/* Centralita Manhattan - master.css. Direccion "Sala de maquinas" (yeye-style, elegida 2026-08-26). Oscuro por defecto; el tema claro solo redefine tokens (data-theme="claro" en ). */ /* ============================ TOKENS ============================ */ :root{ --marca:#4fb8e6; --marca-fuerte:#2B9FD1; --marca-tinta:#06202e; --agua:#2ec9ae; --ok:#43a679; --ok-fondo:rgba(67,166,121,.14); --aviso:#d9a441; --aviso-fondo:rgba(217,164,65,.14); --critico:#ff7b6b; --critico-fondo:rgba(255,123,107,.14); --fondo:#0b141c; --panel:#111c26; --panel-2:#0d161f; --linea:#22313f; --texto:#e3edf5; --texto-apagado:#8ea2b3; --texto-suave:#5f7385; --radio:8px; --radio-peq:6px; --fuente:"Source Sans 3",system-ui,sans-serif; --fuente-titulo:Manrope,system-ui,sans-serif; --fuente-mono:"IBM Plex Mono",ui-monospace,monospace; } :root[data-theme="claro"]{ --marca:#2B9FD1; --marca-tinta:#fff; --agua:#18b39a; --ok:#2e7d5b; --ok-fondo:#e7f3ec; --aviso:#b0761c; --aviso-fondo:#faf1e1; --critico:#b3372e; --critico-fondo:#f8ebe9; --fondo:#edf2f6; --panel:#fff; --panel-2:#f4f8fb; --linea:#dbe4ec; --texto:#0e1b26; --texto-apagado:#5a6b7a; --texto-suave:#8c9aa8; } /* ============================ RESET Y BASE ============================ */ *{box-sizing:border-box} html{font-size:15px} body{margin:0;background:var(--fondo);color:var(--texto);font-family:var(--fuente);line-height:1.45;min-height:100vh;display:flex;flex-direction:column} a{color:var(--marca)} h1,h2,h3{font-family:var(--fuente-titulo);margin:0;text-wrap:balance} h1{font-size:1.35rem;font-weight:800} h2{font-size:1rem;font-weight:700} h3{font-size:.8rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--texto-apagado)} .mono{font-family:var(--fuente-mono);font-size:.82rem;font-variant-numeric:tabular-nums} .oculto{display:none !important} .apagado{color:var(--texto-apagado)} .suave{color:var(--texto-suave);font-size:.8rem} /* ============================ BARRA SUPERIOR ============================ */ .barra{display:flex;align-items:center;gap:1.4rem;padding:.65rem 1.4rem;background:var(--panel);border-bottom:1px solid var(--linea);position:sticky;top:0;z-index:5} .barra__logo{font-family:var(--fuente-titulo);font-weight:800;letter-spacing:.02em;color:var(--texto);text-decoration:none} .barra__logo i{display:inline-block;width:9px;height:9px;border-radius:2px;background:var(--marca);margin-right:.5rem;vertical-align:1px;box-shadow:0 0 0 3px color-mix(in srgb,var(--marca) 22%,transparent)} .barra__nav{display:flex;gap:1.1rem;font-size:.9rem} .barra__nav a{color:var(--texto-apagado);text-decoration:none;padding:.3rem 0;border-bottom:2px solid transparent} .barra__nav a:hover{color:var(--texto)} .barra__nav a.on{color:var(--texto);border-bottom-color:var(--marca)} .barra__derecha{margin-left:auto;display:flex;align-items:center;gap:.9rem;font-size:.85rem} .barra__usuario{color:var(--texto-apagado)} .barra__tema{background:transparent;border:1px solid var(--linea);color:var(--texto-apagado);border-radius:var(--radio-peq);width:34px;height:34px;cursor:pointer;font-size:1rem} .barra__salir{color:var(--texto-apagado);text-decoration:none} .barra__salir:hover{color:var(--critico)} /* ============================ LAYOUT Y ESTRUCTURA ============================ */ .contenido{flex:1;width:100%;max-width:1240px;margin:0 auto;padding:1.3rem 1.4rem 2rem;display:flex;flex-direction:column;gap:1.1rem} .cabecera-pagina{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap} .dos-columnas{display:grid;grid-template-columns:1fr 360px;gap:1.1rem;align-items:start} .panel{background:var(--panel);border:1px solid var(--linea);border-radius:var(--radio)} .panel__cabecera{display:flex;justify-content:space-between;align-items:center;padding:.65rem .95rem;border-bottom:1px solid var(--linea)} .panel__cuerpo{padding:.95rem} .panel--relleno{padding:.95rem;display:flex;flex-direction:column;gap:.9rem} .pie{padding:.9rem 1.4rem;color:var(--texto-suave);font-size:.75rem;border-top:1px solid var(--linea)} /* ============================ INSTRUMENTOS (estado de un vistazo) ============================ */ .instrumentos{display:flex;gap:2.2rem;padding:.2rem 0 1rem;border-bottom:1px solid var(--linea);font-family:var(--fuente-mono);flex-wrap:wrap} .instrumento{display:flex;flex-direction:column;gap:.15rem} .instrumento b{font-size:1.6rem;font-weight:600;color:var(--texto);line-height:1;font-variant-numeric:tabular-nums} .instrumento span{font-size:.68rem;color:var(--texto-apagado);letter-spacing:.08em;text-transform:uppercase} .instrumento--critico b{color:var(--critico)} .instrumento--aviso b{color:var(--aviso)} /* ============================ LINEAS (una por equipo, franja de estado) ============================ */ .lineas{display:flex;flex-direction:column} .linea{display:grid;grid-template-columns:5px 1fr auto;gap:.9rem;align-items:center;padding:.6rem .8rem .6rem 0;border-bottom:1px solid var(--linea);color:inherit;text-decoration:none} .linea:last-child{border-bottom:0} .linea:hover{background:var(--panel-2)} .linea i{display:block;width:5px;height:38px;border-radius:2px;background:var(--agua)} .linea--pendiente i{background:var(--aviso)} .linea--revocado i{background:var(--texto-suave)} .linea--critico i{background:var(--critico)} .linea__nombre{display:flex;flex-direction:column;gap:.15rem} .linea__nombre b{font-weight:600;color:var(--texto)} .linea__nombre small{color:var(--texto-apagado);font-family:var(--fuente-mono);font-size:.75rem} .linea__derecha{text-align:right;font-family:var(--fuente-mono);font-size:.76rem;color:var(--texto-apagado)} .linea__derecha b{display:block;color:var(--texto);font-weight:600} /* ============================ TABLAS ============================ */ .tabla-envoltura{overflow-x:auto} table{width:100%;border-collapse:collapse} th{font-size:.66rem;letter-spacing:.07em;text-transform:uppercase;color:var(--texto-apagado);text-align:left;padding:.5rem .9rem;border-bottom:1px solid var(--linea);font-weight:600;white-space:nowrap} td{padding:.5rem .9rem;border-bottom:1px solid var(--linea);font-variant-numeric:tabular-nums;vertical-align:middle} tr:last-child td{border-bottom:0} tbody tr:hover td{background:var(--panel-2)} /* ============================ BADGES Y ESTADOS ============================ */ .chip{display:inline-flex;align-items:center;gap:.35rem;font-size:.7rem;font-weight:700;padding:.14rem .5rem;border-radius:99px;letter-spacing:.02em;white-space:nowrap} .chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor} .chip--activo{background:var(--ok-fondo);color:var(--ok)} .chip--pendiente{background:var(--aviso-fondo);color:var(--aviso)} .chip--revocado{background:color-mix(in srgb,var(--texto-suave) 18%,transparent);color:var(--texto-apagado)} .chip--critico{background:var(--critico-fondo);color:var(--critico)} /* ============================ CODIGO DE ALTA Y COMANDOS (protagonistas) ============================ */ .codigo-alta{font-family:var(--fuente-mono);font-size:2.2rem;letter-spacing:.16em;color:var(--texto);background:var(--panel-2);border:1px dashed var(--linea);padding:.8rem;text-align:center;border-radius:var(--radio-peq);user-select:all} .comando{font-family:var(--fuente-mono);font-size:.78rem;color:var(--marca);background:var(--panel-2);padding:.6rem .75rem;border-radius:var(--radio-peq);overflow-x:auto;white-space:nowrap;border:1px solid var(--linea)} .fila-copiar{display:flex;gap:.6rem;align-items:center} .fila-copiar .comando{flex:1} .aviso-unica{font-size:.8rem;color:var(--aviso)} /* ============================ FORMULARIOS ============================ */ .formulario{display:flex;flex-direction:column;gap:.9rem;max-width:460px} .campo{display:flex;flex-direction:column;gap:.3rem} .campo label{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-apagado);font-weight:600} .campo input,.campo select{background:var(--panel-2);border:1px solid var(--linea);color:var(--texto);padding:.6rem .7rem;border-radius:var(--radio-peq);font:inherit;min-height:44px} .campo input:focus,.campo select:focus,.boton:focus-visible,.barra__tema:focus-visible{outline:2px solid var(--marca);outline-offset:2px} .campo input.mono{font-family:var(--fuente-mono);letter-spacing:.12em;font-size:1.1rem} .ayuda{font-size:.78rem;color:var(--texto-suave)} .boton{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;background:var(--marca);color:var(--marca-tinta);font-weight:700;font-size:.85rem;padding:.55rem .95rem;border-radius:var(--radio-peq);text-decoration:none;border:0;cursor:pointer;min-height:40px;transition:filter .15s ease-out} .boton:hover{filter:brightness(1.08)} .boton--secundario{background:transparent;color:var(--marca);border:1px solid var(--marca)} .boton--peligro{background:transparent;color:var(--critico);border:1px solid var(--critico)} .boton--hecho{background:var(--ok);color:#fff} .boton:disabled{opacity:.5;cursor:default} .mensaje{padding:.6rem .8rem;border-radius:var(--radio-peq);font-size:.85rem;border:1px solid var(--linea)} .mensaje--error{background:var(--critico-fondo);color:var(--critico);border-color:color-mix(in srgb,var(--critico) 35%,transparent)} .mensaje--ok{background:var(--ok-fondo);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 35%,transparent)} /* ============================ LOGIN ============================ */ .login{flex:1;display:grid;place-items:center;padding:2rem 1rem;background:radial-gradient(1200px 500px at 20% -10%,color-mix(in srgb,var(--marca) 16%,transparent),transparent 60%),var(--fondo)} .login__caja{width:100%;max-width:400px;background:var(--panel);border:1px solid var(--linea);border-radius:var(--radio);padding:1.6rem} .login__marca{font-family:var(--fuente-titulo);font-weight:800;letter-spacing:.02em;font-size:1.2rem;margin-bottom:.15rem} .login__marca i{display:inline-block;width:10px;height:10px;border-radius:2px;background:var(--marca);margin-right:.55rem;box-shadow:0 0 0 3px color-mix(in srgb,var(--marca) 22%,transparent)} .login__sub{color:var(--texto-apagado);font-size:.85rem;margin-bottom:1.3rem} /* ============================ REGISTRO DE EVENTOS ============================ */ .evento{display:grid;grid-template-columns:118px 110px 1fr;gap:.7rem;padding:.5rem .95rem;border-bottom:1px solid var(--linea);font-size:.84rem;align-items:baseline} .evento:last-child{border-bottom:0} .evento time{font-family:var(--fuente-mono);font-size:.74rem;color:var(--texto-suave);font-variant-numeric:tabular-nums} .evento .tipo{font-family:var(--fuente-mono);font-size:.74rem;color:var(--texto-apagado)} .evento--critico .tipo{color:var(--critico)} .evento--alta .tipo{color:var(--agua)} .evento .detalle b{font-weight:600} /* ============================ RESPONSIVE ============================ */ @media (max-width:900px){ .dos-columnas{grid-template-columns:1fr} .barra{flex-wrap:wrap;gap:.7rem} .barra__nav{order:3;width:100%;overflow-x:auto} .evento{grid-template-columns:100px 1fr} .evento .tipo{grid-column:2} .instrumentos{gap:1.3rem} } @media (prefers-reduced-motion:reduce){*{transition:none !important}}