/* Umbral — hoja de estilo del panel.
 *
 * Los colores son los del sistema de diseño de la fase 0, con una separación
 * que importa: los tokens de MARCA son variables sustituibles (marca blanca),
 * los de ESTADO no. Verde es correcto para todo el mundo, y dejar que un
 * cliente ponga su corporativo rojo como color de marca no puede romper la
 * señal de error.
 */

:root {
  /* Marca — lo único que un cliente puede cambiar */
  --marca: #0f6d78;
  --marca-osc: #0a5058;
  --marca-sua: #e3eff0;
  --marca-borde: #a9d0d4;

  /* Superficies */
  --fondo: #f5f6f8;
  --superficie: #ffffff;
  --cabecera: #fafbfc;
  --cebra: #fcfcfd;
  --neutra: #f7f8f9;
  --separador: #edf0f3;
  --divisor: #e4e8ec;
  --borde: #dde2e7;
  --borde-fuerte: #c2cad2;

  /* Texto */
  --tinta: #131a21;
  --tinta-2: #4a5663;
  --tinta-3: #77838f;
  --tinta-4: #98a3ad;
  --tinta-5: #c3cad1;

  /* Estado — NO personalizables */
  --ok: #3d8a5c; --ok-fondo: #e9f3ed; --ok-texto: #2c6f47; --ok-borde: #d3e8db;
  --av: #c58a1e; --av-fondo: #fbf0dc; --av-texto: #96600c; --av-borde: #efdcbb;
  --er: #c0392f; --er-fondo: #fae9e8; --er-texto: #9e2b26; --er-borde: #efcfcc;
  --nn: #98a3ad; --nn-fondo: #eceef1; --nn-texto: #6b7680; --nn-borde: #e0e4e8;
  --in: #3b7cc0; --in-fondo: #e6eef7; --in-texto: #1d5a95; --in-borde: #cfdeef;

  /* Turnos del cuadrante. NO son colores de estado —no dicen si algo está bien
   * o mal—, solo sirven para distinguir de un vistazo mañana de tarde y de
   * noche en una rejilla de siete columnas. Se quedan fuera de la marca blanca
   * igualmente: si un cliente los cambiara por tres tonos parecidos, la rejilla
   * dejaría de leerse. */
  --turno-a: #e8f0fb; --turno-a-borde: #c6d9f2; --turno-a-texto: #24507f;
  --turno-b: #fdf1e0; --turno-b-borde: #f2dcbd; --turno-b-texto: #8a5b13;
  --turno-c: #ece9f6; --turno-c-borde: #d5cfe9; --turno-c-texto: #4b3d80;

  /* Barra lateral */
  --lat: #15202b; --lat-borde: #22303e; --lat-texto: #9fb0bf;
  --lat-activo: #e8edf2; --lat-tenue: #7d8d9b; --lat-avatar: #2c3e4f;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--fondo);
  color: var(--tinta);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--marca); text-decoration: none; }
a:hover { color: var(--marca-osc); text-decoration: underline; }

.mono, .num {
  font-family: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

/* ── Armazón ─────────────────────────────────────────────────────────────── */
.armazon { display: flex; min-height: 100vh; }

.lateral {
  width: 232px; flex-shrink: 0; background: var(--lat);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.marca-caja {
  height: 56px; display: flex; align-items: center; gap: 10px;
  padding: 0 16px; border-bottom: 1px solid var(--lat-borde);
}
.marca-icono {
  width: 20px; height: 20px; border: 2px solid var(--marca);
  border-bottom-color: transparent; border-radius: 3px 3px 0 0;
}
.marca-nombre { font-size: 16px; font-weight: 700; color: #fff; letter-spacing: -0.01em; }

.menu { padding: 12px 0; display: flex; flex-direction: column; gap: 1px; flex-grow: 1; overflow-y: auto; }
.nav {
  display: flex; align-items: center; gap: 10px; height: 34px;
  padding: 0 12px; margin: 0 8px; border-radius: 4px;
  font-size: 13px; color: var(--lat-texto); text-decoration: none;
}
.nav:hover { background: var(--lat-borde); color: var(--lat-activo); text-decoration: none; }
.nav.activo { background: var(--marca); color: #fff; font-weight: 500; }
.nav.activo:hover { background: var(--marca); color: #fff; }
.nav svg { flex-shrink: 0; }
.menu-sep { height: 1px; background: var(--lat-borde); margin: 10px 16px; }

.yo {
  border-top: 1px solid var(--lat-borde); padding: 12px 16px;
  display: flex; align-items: center; gap: 10px;
}
.avatar {
  width: 28px; height: 28px; border-radius: 50%; background: var(--lat-avatar);
  color: #c6d2dc; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; flex-shrink: 0;
}
.yo-nombre { font-size: 12px; color: var(--lat-activo); font-weight: 500; }
.yo-rol { font-size: 11px; color: var(--lat-tenue); text-transform: capitalize; }

.principal { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; }

.superior {
  height: 56px; flex-shrink: 0; background: var(--superficie);
  border-bottom: 1px solid var(--borde);
  display: flex; align-items: center; gap: 16px; padding: 0 20px;
  position: sticky; top: 0; z-index: 10;
}
.buscador {
  width: 320px; max-width: 40vw; height: 32px; border: 1px solid var(--borde);
  border-radius: 4px; display: flex; align-items: center; gap: 8px;
  padding: 0 10px; background: var(--cabecera);
}
.buscador input {
  border: 0; background: transparent; outline: 0; font-size: 13px;
  font-family: inherit; color: var(--tinta); width: 100%;
}
.buscador input::placeholder { color: var(--tinta-4); }

.contenido { flex-grow: 1; padding: 20px; display: flex; flex-direction: column; gap: 16px; }

.encabezado { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.titulo { font-size: 21px; font-weight: 600; }
.subtitulo { font-size: 13px; color: var(--tinta-2); margin-top: 3px; }

/* ── Piezas ──────────────────────────────────────────────────────────────── */
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: 5px; display: flex; flex-direction: column; }
.tarjeta-cab { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; border-bottom: 1px solid var(--borde); }
.tarjeta-tit { font-size: 13px; font-weight: 600; }
.tarjeta-cuerpo { padding: 14px; }
.tarjeta-pie { border-top: 1px solid var(--separador); background: var(--cabecera); padding: 10px 14px; font-size: 11px; color: var(--tinta-2); line-height: 1.5; }

.rejilla { display: grid; gap: 12px; }
.rejilla-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.rejilla-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

.kpi { background: var(--superficie); border: 1px solid var(--borde); border-left-width: 3px; border-radius: 5px; padding: 12px 14px; display: flex; flex-direction: column; gap: 5px; }
.kpi-et { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--tinta-2); }
.kpi-val { font-size: 30px; font-weight: 600; line-height: 1.05; font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; }
.kpi-pie { font-size: 11px; color: var(--tinta-3); }
.kpi.ok { border-left-color: var(--ok); }
.kpi.av { border-left-color: var(--av); }
.kpi.er { border-left-color: var(--er); }
.kpi.in { border-left-color: var(--in); }
.kpi.nn { border-left-color: var(--nn); }
.kpi.er .kpi-val { color: var(--er-texto); }

/* ── Botones ─────────────────────────────────────────────────────────────── */
.bt {
  height: 32px; display: inline-flex; align-items: center; gap: 7px;
  padding: 0 12px; border-radius: 4px; font-size: 13px; font-weight: 500;
  font-family: inherit; cursor: pointer; border: 1px solid var(--borde-fuerte);
  background: var(--superficie); color: var(--tinta); text-decoration: none;
}
.bt:hover { background: var(--neutra); text-decoration: none; color: var(--tinta); }
.bt-p { background: var(--marca); border-color: var(--marca); color: #fff; }
.bt-p:hover { background: var(--marca-osc); border-color: var(--marca-osc); color: #fff; }
.bt-x { border-color: var(--er-borde); color: var(--er-texto); background: var(--er-fondo); }
.bt-x:hover { background: #f5dcda; color: var(--er-texto); }
.bt-g { height: 40px; padding: 0 18px; font-size: 14px; }
.bt[disabled] { opacity: .5; cursor: not-allowed; }

/* ── Formularios ─────────────────────────────────────────────────────────── */
.campo { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.eti { font-size: 12px; font-weight: 500; color: var(--tinta-2); }
.eti small { font-weight: 400; color: var(--tinta-3); }
.ent {
  height: 34px; border: 1px solid var(--borde-fuerte); border-radius: 4px;
  padding: 0 10px; font-size: 13px; font-family: inherit; color: var(--tinta);
  background: var(--superficie); width: 100%; outline: 0;
}
.ent:focus { border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-sua); }
textarea.ent { height: auto; min-height: 70px; padding: 8px 10px; line-height: 1.5; resize: vertical; }
select.ent { cursor: pointer; }
.ayuda { font-size: 11px; color: var(--tinta-3); line-height: 1.5; }
.fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 14px; }

/* ── Tablas ──────────────────────────────────────────────────────────────── */
.tabla-caja { overflow-x: auto; }
table.tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla th {
  text-align: left; font-size: 11px; font-weight: 600; color: var(--tinta-2);
  text-transform: uppercase; letter-spacing: .04em;
  background: var(--cabecera); border-bottom: 1px solid var(--borde);
  padding: 9px 12px; white-space: nowrap; position: sticky; top: 0;
}
.tabla td { padding: 9px 12px; border-bottom: 1px solid var(--separador); vertical-align: middle; }
.tabla tbody tr:nth-child(even) { background: var(--cebra); }
.tabla tbody tr:hover { background: var(--marca-sua); }
.tabla td.der, .tabla th.der { text-align: right; }
.tabla .sin-datos { color: var(--tinta-4); }

/* ── Distintivos ─────────────────────────────────────────────────────────── */
.dis {
  display: inline-flex; align-items: center; gap: 5px; height: 21px;
  padding: 0 8px; border-radius: 3px; font-size: 11px; font-weight: 500;
  border: 1px solid transparent; white-space: nowrap;
}
.dis-ok { background: var(--ok-fondo); color: var(--ok-texto); border-color: var(--ok-borde); }
.dis-av { background: var(--av-fondo); color: var(--av-texto); border-color: var(--av-borde); }
.dis-er { background: var(--er-fondo); color: var(--er-texto); border-color: var(--er-borde); }
.dis-nn { background: var(--nn-fondo); color: var(--nn-texto); border-color: var(--nn-borde); }
.dis-in { background: var(--in-fondo); color: var(--in-texto); border-color: var(--in-borde); }
.dis-m  { background: var(--marca-sua); color: var(--marca-osc); border-color: var(--marca-borde); }
.punto { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

/* ── Avisos ──────────────────────────────────────────────────────────────── */
.aviso { border: 1px solid; border-radius: 5px; padding: 11px 14px; font-size: 13px; line-height: 1.55; display: flex; gap: 10px; align-items: flex-start; }
.aviso-ok { background: var(--ok-fondo); border-color: var(--ok-borde); color: var(--ok-texto); }
.aviso-av { background: var(--av-fondo); border-color: var(--av-borde); color: var(--av-texto); }
.aviso-er { background: var(--er-fondo); border-color: var(--er-borde); color: var(--er-texto); }
.aviso-in { background: var(--in-fondo); border-color: var(--in-borde); color: var(--in-texto); }
.aviso strong { font-weight: 600; }
.aviso-cuerpo { min-width: 0; }

/* ── Vacíos ──────────────────────────────────────────────────────────────── */
.vacio { padding: 40px 26px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.vacio-tit { font-size: 15px; font-weight: 600; }
.vacio-txt { font-size: 12px; color: var(--tinta-2); line-height: 1.55; max-width: 380px; }

/* ── Detalles ────────────────────────────────────────────────────────────── */
.pares { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.par-et { font-size: 11px; color: var(--tinta-3); margin-bottom: 3px; }
.par-val { font-size: 13px; font-weight: 500; }

.tenue { color: var(--tinta-3); }
.pequeno { font-size: 11px; }
.negativo { color: var(--er-texto); }
.positivo { color: var(--ok-texto); }

/* ── Acceso ──────────────────────────────────────────────────────────────── */
.acceso { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--fondo); }
.acceso-caja { width: 100%; max-width: 380px; }
.acceso-marca { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; }
.acceso-marca .marca-icono { width: 26px; height: 26px; }
.acceso-marca-nombre { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }

/* ── Móvil ───────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .armazon { flex-direction: column; }
  .lateral { width: 100%; height: auto; position: static; }
  .menu { flex-direction: row; overflow-x: auto; padding: 8px; gap: 4px; }
  .nav { margin: 0; white-space: nowrap; }
  .menu-sep { display: none; }
  .yo { display: none; }
  .buscador { width: auto; flex-grow: 1; }
  .contenido { padding: 14px; }
}

/* ── Impresión ───────────────────────────────────────────────────────────── */
/* Una pantalla del panel que se imprime tiene que salir como un papel: sin
   menú, sin buscador y sin botones. Los documentos de entrega —el parte, las
   horas extra y el expediente— tienen su propia hoja en impreso.css. */
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  body { background: #fff; }
  .lateral, .superior, .no-imprimir { display: none !important; }
  .armazon, .principal { display: block; }
  .contenido { padding: 0; gap: 10px; }
  .tarjeta, .kpi { border-color: #c2cad2; box-shadow: none; break-inside: avoid; }
  .tabla-caja { overflow: visible; }
  .tabla tbody tr:hover { background: transparent; }
  thead { display: table-header-group; }
  tr { break-inside: avoid; }
}

/* ── Cuadrante ───────────────────────────────────────────────────────────── */

.celda-turno { display: block; width: 100%; border-radius: 4px; padding: 2px 4px;
               border: 1px solid transparent; font-size: 12px; }
.turno-a { background: var(--turno-a); border-color: var(--turno-a-borde);
           color: var(--turno-a-texto); }
.turno-b { background: var(--turno-b); border-color: var(--turno-b-borde);
           color: var(--turno-b-texto); }
.turno-c { background: var(--turno-c); border-color: var(--turno-c-borde);
           color: var(--turno-c-texto); }
.turno-libre { background: var(--neutra); border-color: var(--borde);
               color: var(--tinta-3); }

/* Lo heredado de la asignación fija se ve, pero se ve que no se ha decidido
 * aquí: si pareciera planificado, nadie sabría qué falta por planificar. */
.heredado { opacity: .62; font-style: italic; }

.rejilla-cuadrante { min-width: 880px; }
.rejilla-cuadrante th { font-weight: 600; text-align: center; }
.rejilla-cuadrante td.dia { padding: 3px; vertical-align: middle; }
.rejilla-cuadrante select.celda { width: 100%; height: 28px; font-size: 12px;
                                  padding: 2px 4px; }
.rejilla-cuadrante .quien { white-space: nowrap; }
.fin-de-semana { background: var(--neutra); }

/* ── Sala de control ─────────────────────────────────────────────────────── */
/* La pantalla que se deja puesta en un monitor y se mira de reojo desde tres
 * metros. Por eso lo de aquí es más grande de lo normal y hay más aire: lo que
 * en una tabla de informe es un detalle, aquí es lo único que se va a leer. */

/* La frase de arriba no es un número, así que no puede usar el tamaño de los
 * números: «Hay algo que mirar ahora» a 30 px se sale del recuadro. */
.kpi-val-txt { font-size: 18px; font-weight: 600; line-height: 1.2; }

.alerta { border: 1px solid var(--borde); border-left-width: 3px; border-radius: 5px;
          padding: 9px 11px; margin-bottom: 8px; display: flex; flex-direction: column;
          gap: 3px; }
.alerta:last-child { margin-bottom: 0; }
.alerta-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.alerta-er { border-left-color: var(--er); background: var(--er-fondo); }
.alerta-av { border-left-color: var(--av); }
.alerta-ok { border-left-color: var(--ok); }

/* Un suceso recién llegado se enciende y se apaga solo. Sin esto, en una
 * pantalla que se actualiza sola no se distingue lo que acaba de entrar de lo
 * que lleva ahí un cuarto de hora. */
@keyframes sala-entra {
  from { background: var(--marca-sua); }
  to   { background: transparent; }
}
.sala-nuevo > td { animation: sala-entra 4s ease-out 1; }
@media (prefers-reduced-motion: reduce) {
  .sala-nuevo > td { animation: none; }
}

/* El plano lógico: cada zona una caja, y dentro las puertas que dan a ella. */
.plano { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
         gap: 12px; }
.plano-zona { border: 1px solid var(--borde); border-radius: 6px; padding: 11px 12px;
              background: var(--neutra); display: flex; flex-direction: column; gap: 6px; }
.plano-zona-cab { display: flex; align-items: flex-start; justify-content: space-between;
                  gap: 10px; }
.plano-zona-nom { font-weight: 600; }
.plano-zona-num { font-family: "IBM Plex Mono", monospace; font-size: 26px;
                  font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.plano-gente { line-height: 1.5; }
.plano-puertas { display: flex; flex-direction: column; gap: 5px; }
.plano-puerta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
                font-size: 12px; }