/* DatoPlanta — estilos de la marca.
   Azul oscuro de fondo, tarjetas claras para leer y llenar, ámbar solo como acento
   (nunca como letra sobre fondo claro). Botones grandes: se usa de pie, con guantes. */
/* Las letras (Barlow, Barlow Condensed e IBM Plex Mono), servidas por DatoPlanta desde /fuentes: antes venían de Google
   (dos conexiones más al abrir, y Google se enteraba de cada visita). Solo los caracteres latinos, que cubren todo el
   español; lo demás sale con la letra del aparato. Cada página precarga las que más usa, en su cabecera. Licencia libre
   (SIL OFL 1.1: ver public/fuentes). Si se cambia una, el archivo nuevo va con otro nombre: el navegador las guarda 30 días. */
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fuentes/barlow-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fuentes/barlow-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fuentes/barlow-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fuentes/barlow-condensed-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fuentes/ibm-plex-mono-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --azul: #0E1A2B;
  --azul-2: #16263D;
  --ambar: #FFB000;
  --ambar-claro: #FFC233;
  /* Con la marca de una empresa, comun.js cambia los colores de arriba (ver src/core/colores.js). El aviso de
     demostración no: siempre ámbar, para que nadie lo confunda con lo de verdad. */
  --demo-fondo: #FFB000;
  --demo-letra: #0E1A2B;
  /* El fondo de la página y la «tinta» (lo lleno de color fuerte: un botón marcado, el número destacado). En el tema
     oscuro son el mismo; con el tema claro de una marca, el fondo es claro y la tinta sigue fuerte (colores.js). */
  --fondo: var(--azul);
  --fondo-2: var(--azul-2);
  --tinta: var(--azul);
  --sobre-tinta: var(--titulo-oscuro);
  --sobre-tinta-2: var(--secundario-oscuro);
  --sobre-acento: var(--azul);
  --claro: #F1F4F6;
  --blanco: #FFFFFF;
  --titulo-oscuro: #F4F7FA;
  --cuerpo-oscuro: #C9D4E0;
  --secundario-oscuro: #A9B8CA;
  --linea-oscuro: #2B3F5C;
  --texto: #0E1A2B;
  --secundario: #44566B;
  --linea: #C5CFD8;
  --bien: #1E7A46;
  --bien-fondo: #E3F3E9;
  --aviso: #8A5A00;
  --aviso-fondo: #FFF3D6;
  --mal: #B3261E;
  --mal-fondo: #FBE6E4;
  --info-fondo: #E4ECF6;
  --radio: 10px;
  --titulo: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --cuerpo: 'Barlow', 'Segoe UI', Arial, sans-serif;
  --mono: 'IBM Plex Mono', Consolas, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--cuerpo-oscuro);
  font-family: var(--cuerpo);
  font-size: 17px;
  line-height: 1.45;
}

/* ── Barra de arriba ── */
.barra {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--linea-oscuro);
  background: var(--fondo);
}
/* «Atrás» y «Adelante», debajo de la barra en todas las pantallas (alineados con el contenido). */
.navegacion {
  display: flex; align-items: center; gap: 10px;
  padding: 6px max(16px, calc((100% - 980px) / 2 + 16px));
  background: var(--fondo-2); border-bottom: 3px solid var(--ambar);
}
.navegacion button { min-height: 44px; padding: 6px 14px; font-size: 16px; flex: 0 0 auto; }
.navegacion .donde { flex: 1; min-width: 0; text-align: center; font-size: 14px; line-height: 1.2; color: var(--titulo-oscuro); }
.cabecera { position: sticky; top: 0; z-index: 10; }
.marca { display: flex; align-items: center; gap: 10px; color: var(--titulo-oscuro); text-decoration: none; }
.marca img { height: 34px; width: auto; }
/* Nombre de la marca: "Dato" claro y "Planta" en ámbar, sin mayúsculas */
.nombre-marca { font-family: var(--titulo); font-weight: 700; font-size: 26px; line-height: 1; letter-spacing: 0.01em; text-transform: none; color: var(--titulo-oscuro); }
.nombre-marca em { font-style: normal; color: var(--ambar); }
.barra .quien { margin-left: auto; text-align: right; font-size: 14px; color: var(--secundario-oscuro); line-height: 1.2; }
.barra .quien b { display: block; color: var(--titulo-oscuro); font-weight: 600; }
.barra button { margin: 0; }

main { max-width: 980px; margin: 0 auto; padding: 16px; display: grid; gap: 16px; }

h1, h2, h3 {
  font-family: var(--titulo); text-transform: uppercase; letter-spacing: 0.03em;
  margin: 0; line-height: 1.1; text-wrap: balance;
}
h1 { font-size: 30px; color: var(--titulo-oscuro); }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
.subtitulo { color: var(--secundario-oscuro); margin: 4px 0 0; }

/* ── Tarjetas claras ── */
.tarjeta {
  background: var(--claro); color: var(--texto);
  border-radius: var(--radio); padding: 16px;
  display: grid; gap: 14px;
}
.tarjeta h2, .tarjeta h3 { color: var(--texto); }
.tarjeta .nota { color: var(--secundario); font-size: 15px; margin: 0; }

.etiqueta {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--secundario);
}

/* ── Campos ── */
.campos { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
/* Un campo de lado a lado (por ejemplo, la lista de documentos: los nombres largos se leen enteros). */
.campos .a-lo-ancho { grid-column: 1 / -1; }
label.campo { display: grid; gap: 6px; }
label.campo > span { font-weight: 600; }
label.campo small { color: var(--secundario); font-size: 14px; }
input, select, textarea {
  font: inherit; font-size: 18px; color: var(--texto);
  background: var(--blanco); border: 2px solid var(--linea); border-radius: 8px;
  padding: 10px 12px; min-height: 50px; width: 100%;
}
textarea { min-height: 90px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--tinta); outline-offset: 1px; border-color: var(--tinta); }
.con-error input, .con-error select, .con-error textarea, input.con-error, select.con-error { border-color: var(--mal); background: var(--mal-fondo); }
.sino { display: flex; gap: 8px; }
.sino button { flex: 1; }

/* ── Botones ── */
button, .boton {
  font: inherit; font-weight: 600; font-size: 17px;
  min-height: 50px; padding: 10px 18px; border-radius: 8px;
  border: 2px solid transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none;
}
button:focus-visible, .boton:focus-visible { outline: 3px solid var(--ambar); outline-offset: 2px; }
.principal { background: var(--ambar); color: var(--sobre-acento); }
.principal:hover { background: var(--ambar-claro); }
.secundario { background: var(--blanco); color: var(--texto); border-color: var(--linea); }
.secundario:hover { border-color: var(--secundario); }
.oscuro { background: var(--tinta); color: var(--sobre-tinta); }
.peligro { background: var(--blanco); color: var(--mal); border-color: var(--mal); }
.fantasma { background: transparent; color: var(--cuerpo-oscuro); border-color: var(--linea-oscuro); }
.sino button[aria-pressed="true"] { background: var(--tinta); color: var(--sobre-tinta); }
.sino button[aria-pressed="false"] { background: var(--blanco); color: var(--texto); border-color: var(--linea); }
button:disabled { opacity: 0.5; cursor: not-allowed; }
.acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.acciones > * { flex: 1 1 200px; }

/* ── Mensajes ── */
/* scroll-margin-top: al llevar la pantalla a un aviso, que no quede tapado por lo fijo de arriba (lo mide comun.js). */
.mensaje { border-radius: 8px; padding: 12px 14px; margin: 0; scroll-margin-top: calc(var(--alto-cabecera, 150px) + 12px); }
.mensaje.mal { background: var(--mal-fondo); color: var(--mal); }
.mensaje.bien { background: var(--bien-fondo); color: var(--bien); }
.mensaje.aviso { background: var(--aviso-fondo); color: var(--aviso); }
.mensaje.info { background: var(--info-fondo); color: var(--texto); }
.mensaje ul { margin: 6px 0 0; padding-left: 20px; }
[hidden] { display: none !important; }
/* Mientras se llena: "Guardado a las 11:40 a. m.", pegado abajo de la pantalla (se ve desde cualquier parte del
   formulario) y, al final, debajo de los botones. */
.estado-guardado {
  position: sticky; bottom: 10px; z-index: 5; justify-self: center; align-self: center; width: fit-content; margin: 0 auto;
  padding: 6px 14px; border-radius: 999px; font-size: 14px; background: var(--blanco); color: var(--secundario);
  border: 1px solid var(--linea); box-shadow: 0 2px 10px rgba(14, 26, 43, 0.25);
}
.estado-guardado.bien { color: var(--bien); }

/* ── Llenar sección por sección: «Sección 2 de 9», su barra y «Atrás / Adelante» debajo de la sección ── */
.avance { display: grid; gap: 8px; scroll-margin-top: calc(var(--alto-cabecera, 150px) + 12px); }
.avance-de { margin: 0; font-family: var(--mono); font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--titulo-oscuro); }
.avance-barra { height: 8px; border-radius: 999px; background: var(--linea-oscuro); overflow: hidden; }
.avance-relleno { height: 100%; width: 0; border-radius: inherit; background: var(--ambar); transition: width 0.2s ease; }
.navegar-secciones > * { flex: 1 1 130px; } /* uno al lado del otro, también en el celular */
/* El título de la sección recibe el foco al llegar (para lectores de pantalla), sin recuadro a la vista. */
[tabindex="-1"]:focus { outline: none; }
.lista-secciones { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lista-secciones li {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center;
  padding: 10px 12px; border-radius: 8px; background: var(--blanco);
  border: 1px solid var(--linea); border-left: 6px solid var(--bien);
}
.lista-secciones li.falta { border-left-color: var(--aviso); }
.lista-secciones .detalle { font-size: 14px; color: var(--secundario); }
.lista-secciones .lista { color: var(--bien); font-weight: 600; }
.lista-secciones .por-completar { color: var(--aviso); }
.lista-secciones button { min-height: 44px; padding: 8px 14px; font-size: 15px; }
@media (max-width: 460px) {
  .lista-secciones li { grid-template-columns: 1fr; }
}

/* ── Ver el Excel dentro de la app: cada hoja como un papel, achicado para que quepa a lo ancho ── */
.pestanas-excel { display: flex; flex-wrap: wrap; gap: 8px; }
.pestanas-excel button { flex: 0 0 auto; padding: 8px 14px; }
/* Sobre el fondo oscuro, la hoja que se ve va llena (blanca, con raya ámbar) y las demás solo con borde. */
.pestanas-excel button[aria-selected="false"] { background: transparent; color: var(--cuerpo-oscuro); border-color: var(--secundario-oscuro); }
.pestanas-excel button[aria-selected="true"] { background: var(--blanco); color: var(--texto); border-color: var(--blanco); box-shadow: inset 0 -4px 0 var(--ambar); }
.visor-excel { overflow: hidden; border-radius: var(--radio); background: #DCE2E8; }
.visor-excel .papel {
  background: #fff; color: #000; padding: 24px; box-sizing: border-box; transform-origin: top left;
  font-family: Calibri, Carlito, 'Segoe UI', Arial, sans-serif;
}
.visor-excel .cabecera-pagina, .visor-excel .pie-pagina { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; min-height: 14px; font-size: 8pt; color: #8A97A6; }
.visor-excel .cabecera-pagina { margin-bottom: 16px; font-weight: bold; }
.visor-excel .pie-pagina { margin-top: 16px; }
.visor-excel .cabecera-pagina span:nth-child(2), .visor-excel .pie-pagina span:nth-child(2) { text-align: center; }
.visor-excel .cabecera-pagina span:last-child, .visor-excel .pie-pagina span:last-child { text-align: right; }
.visor-excel .hoja-excel { position: relative; }
.visor-excel table { border-collapse: collapse; table-layout: fixed; }
.visor-excel td { padding: 0 3px; overflow: hidden; box-sizing: border-box; line-height: 1.25; }
.visor-excel a.a-hoja { color: #1F5FBF; }
.estado-guardado.mal { color: var(--mal); background: var(--mal-fondo); border-color: var(--mal); }

/* ── Estados ── */
.chip {
  display: inline-block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 99px; white-space: nowrap;
}
.chip.borrador { background: var(--claro); color: var(--secundario); border: 1px solid var(--linea); }
.chip.enviado { background: var(--aviso-fondo); color: var(--aviso); }
.chip.devuelto { background: var(--mal-fondo); color: var(--mal); }
.chip.aprobado { background: var(--bien-fondo); color: var(--bien); }

/* ── Listas de registros ── */
.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lista a {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center;
  background: var(--blanco); color: var(--texto); text-decoration: none;
  border: 1px solid var(--linea); border-radius: 8px; padding: 12px 14px; min-height: 56px;
}
.lista a:hover, .lista a:focus-visible { border-color: var(--tinta); }
.lista .detalle { color: var(--secundario); font-size: 14px; }
.lista li.tarjeta { background: var(--blanco); border: 1px solid var(--linea); }
.detalle { color: var(--secundario); font-size: 14px; }
.vacio { color: var(--secundario); font-style: italic; margin: 0; }

/* ── Tablas dentro del formulario ── */
.tabla-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { padding: 8px; text-align: left; border-bottom: 1px solid var(--linea); vertical-align: middle; }
th { font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--secundario); font-weight: 500; }
td.numero, th.numero { text-align: right; }
.tabla-form td { padding: 6px 4px; min-width: 110px; }
.tabla-form td:last-child { min-width: 0; width: 1%; }
.tabla-form input, .tabla-form select { min-height: 46px; font-size: 17px; }
/* Una columna que se calcula sola (los minutos de una parada): se ve como resultado, no como casilla. */
.tabla-form output.calculado { display: flex; align-items: center; min-height: 46px; padding: 0 10px; border-radius: 6px; background: var(--claro); font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--texto); }
.quitar { min-height: 46px; padding: 6px 12px; background: var(--blanco); color: var(--mal); border-color: var(--linea); }

/* ── Números grandes ── */
.numeros { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.numero-grande {
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 12px 14px; display: grid; gap: 2px;
}
.numero-grande.destacado { background: var(--tinta); border-color: var(--tinta); }
.numero-grande.destacado .etiqueta { color: var(--sobre-tinta-2); }
.numero-grande.destacado .valor { color: var(--sobre-tinta); }
.numero-grande .valor { font-family: var(--mono); font-size: 32px; line-height: 1.15; color: var(--texto); font-variant-numeric: tabular-nums; }
.numero-grande .pie { font-size: 13px; color: var(--secundario); }
.numero-grande.destacado .pie { color: var(--sobre-tinta-2); }

/* ── Firmas ── */
.firmas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.firmas li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; background: var(--blanco); border: 1px solid var(--linea); border-radius: 8px; padding: 10px 12px; }
.firmas .marca-firma { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: 14px; }
.firmas .hecha .marca-firma { background: var(--bien); color: var(--blanco); }
.firmas .turno .marca-firma { background: var(--ambar); color: var(--sobre-acento); }
.firmas .espera .marca-firma { background: var(--claro); color: var(--secundario); border: 1px solid var(--linea); }
.firmas .anulada { opacity: 0.7; }
.firmas .anulada .marca-firma { background: var(--mal-fondo); color: var(--mal); }

/* ── Muestra ── */
.sello-ejemplo {
  font-family: var(--titulo); font-size: 20px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sobre-acento); background: var(--ambar); border-radius: 6px; padding: 4px 12px; justify-self: start;
}

/* ── Pareto y barras ── */
.barras { display: grid; gap: 8px; }
/* Marcas finas: cada barra sale de su base (línea gris) y solo la punta del dato va redondeada. */
.barra-fila { display: grid; grid-template-columns: minmax(120px, 34%) 1fr auto; gap: 10px; align-items: center; padding: 4px; border-radius: 6px; }
.barra-fila:hover, .barra-fila:focus-visible { background: var(--blanco); outline: none; box-shadow: inset 0 0 0 2px var(--linea); }
.barra-fila .nombre { font-size: 15px; }
.barra-fondo { border-left: 2px solid var(--linea); height: 16px; }
.barra-relleno { height: 100%; background: var(--tinta); border-radius: 0 4px 4px 0; }
.barra-fila .cifra { font-family: var(--mono); font-size: 14px; min-width: 88px; text-align: right; font-variant-numeric: tabular-nums; }

details { background: var(--blanco); border: 1px solid var(--linea); border-radius: 8px; padding: 8px 12px; }
details summary { cursor: pointer; font-weight: 600; min-height: 40px; display: flex; align-items: center; }

.pila { display: grid; gap: 16px; }
.barra .quien b { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* En el celular, cada fila de una tabla del formulario es una tarjetita: no hay que deslizar de lado. */
@media (max-width: 640px) {
  .tabla-form, .tabla-form tbody { display: block; }
  .tabla-form thead { display: none; }
  .tabla-form tr { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; background: var(--blanco); border: 1px solid var(--linea); border-radius: 8px; padding: 10px; margin-bottom: 10px; }
  .tabla-form td { display: grid; gap: 4px; padding: 0; border: 0; min-width: 0; width: auto; }
  .tabla-form td::before { content: attr(data-etiqueta); font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--secundario); }
  .tabla-form td.celda-quitar { grid-column: 1 / -1; width: auto; }
  .tabla-form td.celda-quitar::before { content: none; }
  .tabla-form .quitar { width: 100%; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .barra .quien { font-size: 12px; }
  .barra .quien .empresa { display: none; }
  .barra .quien b { max-width: 40vw; }
  h1 { font-size: 26px; }
  .barra-fila { grid-template-columns: 1fr auto; }
  .barra-fila .barra-fondo { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 460px) {
  .marca .nombre-marca { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ── Avisos de arriba: demostración, y copia de un respaldo (en rojo: no es el sistema de verdad) ── */
.aviso-demo, .aviso-copia {
  background: var(--demo-fondo); color: var(--demo-letra); text-align: center;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 6px 12px;
}
.aviso-copia { background: var(--mal); color: var(--blanco); }
.aviso-copia span { display: inline-block; } /* cada pedazo entero: la fecha nunca se parte */

/* ── Entrada ── */
.entrada { max-width: 440px; padding-top: 40px; }
.marca-grande { display: grid; justify-items: center; gap: 6px; text-align: center; }
.marca-grande .nombre-marca { font-size: 52px; }
/* «Ya entró en este aparato»: quién, y seguir o entrar con otro usuario. */
.seguir-quien { margin: 0; font-size: 17px; }

/* ── Con la marca de la empresa: su logo sobre una placa clara (se ve igual con cualquier color de fondo) ── */
.marca-cliente { background: var(--blanco); border-radius: 8px; padding: 4px 10px; min-height: 44px; }
.marca-cliente img { height: 34px; width: auto; max-width: 180px; object-fit: contain; }
.marca-cliente .nombre-cliente { font-family: var(--titulo); font-weight: 700; font-size: 22px; color: var(--texto); }
.marca-grande .logo-cliente { background: var(--blanco); border-radius: 12px; padding: 14px 20px; width: min(300px, 100%); height: auto; }
@media (max-width: 460px) {
  .marca-cliente img { max-width: 120px; }
}
/* Para los lectores de pantalla, sin ocupar lugar (por ejemplo, el nombre cuando ya lo dice el logo). */
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── El letrero de la entrada: PRÁCTICA (ámbar, como el aviso de demostración) o LA DE VERDAD (verde) ── */
.letrero { display: grid; gap: 2px; justify-items: center; text-align: center; margin: 0; padding: 12px 16px; border-radius: var(--radio); }
.letrero b { font-family: var(--titulo); font-size: 28px; line-height: 1.1; letter-spacing: 0.06em; text-transform: uppercase; }
.letrero span { font-size: 15px; }
/* (con nombre propio: «.practica» ya es la caja de «Llenar todo», y le ganaba) */
.letrero-practica { background: var(--demo-fondo); color: var(--demo-letra); }
.letrero-verdad { background: var(--bien); color: var(--blanco); }
/* La empresa fija de un DatoPlanta de un solo cliente: se lee, pero no se escribe. */
input.fija { background: var(--claro); font-weight: 600; cursor: default; }

/* ── Conexión con Power BI ── */
code { font-family: var(--mono); font-size: 14px; overflow-wrap: anywhere; }
.llave-nueva { display: flex; flex-wrap: wrap; gap: 10px; }
.llave-nueva input { flex: 1 1 280px; font-family: var(--mono); font-size: 15px; }
.pasos-pbi { margin: 0; padding-left: 22px; display: grid; gap: 10px; }
.direcciones { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.direccion { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.direccion code { flex: 1 1 240px; background: var(--blanco); border: 1px solid var(--linea); border-radius: 8px; padding: 10px 12px; }
.direccion button { min-height: 44px; }

/* ── Campos con botones grandes (opciones, checklist) y expediente ── */
div.campo { display: grid; gap: 6px; }
div.campo > span { font-weight: 600; }
.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opciones button { flex: 1 1 140px; }
.opciones button[aria-pressed="true"] { background: var(--tinta); color: var(--sobre-tinta); }
.opciones button[aria-pressed="false"] { background: var(--blanco); color: var(--texto); border-color: var(--linea); }
/* «Marque las que apliquen»: cada una marcada lleva su ✓, para que se note que se pueden marcar varias. */
.opciones.varias button[aria-pressed="true"]::before { content: '✓ '; }
.descripcion { margin: 6px 0 0; color: var(--secundario-oscuro); font-size: 15px; max-width: 70ch; }
.anterior { display: block; color: var(--secundario); font-size: 14px; border-left: 3px solid var(--ambar); padding-left: 8px; }

/* Checklist: Cumple (verde), No cumple (rojo), N/A (gris). Un punto por renglón. */
.campo-fila { grid-column: 1 / -1; padding-top: 12px; border-top: 1px solid var(--linea); }
.campo-fila:first-child { border-top: 0; padding-top: 0; }
.chequeo { display: grid; gap: 8px; }
.chequeo-botones { display: flex; gap: 8px; }
.chequeo-botones button { flex: 1; padding-inline: 8px; background: var(--blanco); color: var(--texto); border-color: var(--linea); }
.chequeo-botones button[data-v="cumple"][aria-pressed="true"] { background: var(--bien); border-color: var(--bien); color: var(--blanco); }
.chequeo-botones button[data-v="no_cumple"][aria-pressed="true"] { background: var(--mal); border-color: var(--mal); color: var(--blanco); }
.chequeo-botones button[data-v="na"][aria-pressed="true"] { background: var(--secundario); border-color: var(--secundario); color: var(--blanco); }
.chequeo-nota { min-height: 60px; }
.chequeo-lectura { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding-top: 10px; border-top: 1px solid var(--linea); }
.chequeo-lectura:first-child { border-top: 0; padding-top: 0; }
.chequeo-lectura .estado { font-weight: 600; }
.chequeo-lectura.cumple .estado { color: var(--bien); }
.chequeo-lectura.no_cumple .estado { color: var(--mal); }
.chequeo-lectura.na .estado, .chequeo-lectura.sin-marcar .estado { color: var(--secundario); }
.chequeo-lectura .detalle { grid-column: 1 / -1; }

/* ── Texto para leer (un consentimiento) y firma con el dedo ── */
.texto-lectura { display: grid; gap: 10px; font-size: 17px; line-height: 1.55; max-width: 70ch; }
.texto-lectura p { margin: 0; }
div.campo small { color: var(--secundario); font-size: 14px; }
.campo-firma { grid-column: 1 / -1; }
.firma { display: grid; gap: 8px; }
.firma-lienzo {
  display: block; width: 100%; height: 200px;
  background: var(--blanco); border: 2px dashed var(--secundario); border-radius: 8px;
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair;
}
.firma.firmado .firma-lienzo { border-style: solid; border-color: var(--tinta); }
.con-error .firma-lienzo { border-color: var(--mal); }
.firma-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.firma-estado { color: var(--secundario); font-size: 14px; }
.firma.firmado .firma-estado { color: var(--bien); font-weight: 600; }
.firma-lectura { grid-column: 1 / -1; display: grid; gap: 6px; }
.firma-imagen { display: block; width: 100%; max-width: 360px; height: auto; background: var(--blanco); border: 1px solid var(--linea); border-radius: 8px; }
@media (max-width: 480px) { .firma-lienzo { height: 180px; } }

/* ── La copia archivada en PDF (en la cabecera oscura de un documento cerrado) ── */
.archivo { margin: 0; color: var(--secundario-oscuro); font-size: 14px; max-width: 75ch; }
.archivo b { color: var(--titulo-oscuro); }
.archivo code { font-family: var(--mono); font-size: 12px; color: var(--cuerpo-oscuro); }

/* ── "Llenar todo (práctica)": solo en una demostración ── */
.practica { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.practica button { border: 2px dashed var(--ambar); }
.practica small { color: var(--secundario-oscuro); font-size: 14px; flex: 1 1 260px; }

/* ── Personas: cada una en su tarjeta, con sus botones a la derecha ── */
.lista li.persona {
  display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: 8px; padding: 12px 14px; min-height: 56px;
}
.lista li.persona.sin-acceso { opacity: .6; }
.botones-persona { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
/* Al corregirla («Editar»): su nombre y su puesto arriba, y Guardar / Cancelar debajo. */
.lista li.persona.editando { grid-template-columns: 1fr; opacity: 1; border-color: var(--ambar); }
.lista li.persona.editando .botones-persona { justify-content: flex-start; }
@media (max-width: 520px) {
  .lista li.persona { grid-template-columns: 1fr; }
  .botones-persona { justify-content: flex-start; }
}

/* Fotos de los expedientes (por ejemplo, la uña del paciente en cada visita): miniaturas en fila, botones para
   agregar más, y la foto en grande encima de la pantalla al tocarla. */
.campo-fotos { grid-column: 1 / -1; }
.fotos, .fotos-lectura { display: grid; gap: 10px; }
.fotos-lista, .anterior-fotos { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
.anterior-fotos { align-items: center; color: var(--secundario); }
.foto { margin: 0; display: grid; gap: 6px; justify-items: center; }
.foto-abrir { padding: 0; width: 104px; height: 104px; border: 1px solid var(--linea); border-radius: 8px; background: var(--blanco); overflow: hidden; cursor: zoom-in; }
.anterior-fotos .foto-abrir { width: 72px; height: 72px; }
.foto-abrir img { display: block; width: 100%; height: 100%; object-fit: cover; }
.foto .quitar { padding: 4px 10px; font-size: 13px; }
.fotos-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.fotos-estado { color: var(--secundario); font-size: 14px; }
.con-error .fotos-estado { color: var(--mal); }
.foto-grande { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; align-content: center; gap: 12px; padding: 16px; background: rgba(14, 26, 43, 0.92); }
.foto-grande-imagen { max-width: 100%; max-height: 82vh; border-radius: 8px; background: var(--blanco); }
/* La galería del expediente: las fotos de cada visita, una visita al lado de la otra, de la más vieja a la más nueva. */
.galeria { display: flex; flex-wrap: wrap; gap: 16px; }
.galeria-visita { display: grid; gap: 8px; align-content: start; padding: 10px; border: 1px solid var(--linea); border-radius: 10px; background: var(--blanco); }
.galeria-visita h3 { margin: 0; font-size: 15px; }
.galeria-visita .detalle { margin: 0; font-size: 13px; color: var(--secundario); }

/* «Cómo va la planta hoy»: una tarjeta por línea, siempre en el mismo orden (para ubicarlas de un vistazo). En la
   computadora caben 4 por fila; en el celular, una debajo de la otra. La que está parada se marca en rojo. */
main.ancha { max-width: 1320px; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lineas-vivo { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.linea-vivo { position: relative; background: var(--blanco); color: var(--texto); border: 1px solid var(--linea); border-radius: 10px; padding: 14px; display: grid; gap: 10px; align-content: start; }
.linea-vivo .cabeza { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.linea-vivo h3 { margin: 0; font-size: 18px; color: var(--texto); }
.linea-vivo.parada { border-color: var(--mal); box-shadow: inset 0 0 0 1px var(--mal); }
.linea-vivo.sin_hoja { background: transparent; border-style: dashed; }
.linea-vivo.sin_hoja h3, .linea-vivo.sin_hoja .vacio { color: var(--secundario-oscuro); }
.estado-linea { font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.estado-linea.mal { background: var(--mal); color: #FFFFFF; }
.estado-linea.bien { background: var(--bien-fondo); color: var(--bien); }
.estado-linea.neutro { background: var(--claro); color: var(--secundario); border: 1px solid var(--linea); }
.estado-linea.apagado { color: var(--secundario-oscuro); border: 1px dashed var(--linea-oscuro); }
.parada-ahora { margin: 0; background: var(--mal-fondo); color: var(--mal); border-radius: 8px; padding: 8px 10px; display: grid; gap: 2px; font-size: 14px; }
.disponibilidad { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 8px; }
.disponibilidad .valor { font-family: var(--mono); font-size: 28px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.disponibilidad .barra-fondo { grid-column: 1 / -1; height: 8px; background: var(--claro); border-left: 0; border-radius: 4px; overflow: hidden; }
.disponibilidad .barra-relleno { border-radius: 4px; }
.disponibilidad-pie { grid-column: 1 / -1; font-size: 13px; color: var(--secundario); }
/* La disponibilidad, por partes: el tiempo del turno, menos lo programado, menos lo sin programar, y la división. */
.desglose { display: grid; gap: 8px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--linea); }
.desglose h3 { margin: 0; font-size: 17px; }
.desglose table { width: 100%; max-width: 560px; border-collapse: collapse; font-size: 15px; }
.desglose th, .desglose td { padding: 6px 0; border: 0; text-align: left; vertical-align: top; font-weight: 400; }
/* Se lee como texto, no como encabezado de tabla (esos van en mayúsculas y letra de máquina). */
.desglose th { font-family: var(--cuerpo); font-size: 15px; letter-spacing: normal; text-transform: none; color: var(--texto); }
.desglose th small { display: block; color: var(--secundario); font-size: 13px; }
.desglose td.signo { width: 1.6em; color: var(--secundario); font-family: var(--mono); font-weight: 700; }
.desglose td.numero { text-align: right; white-space: nowrap; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.desglose tr.subtotal th, .desglose tr.subtotal td { border-top: 1px solid var(--linea); font-weight: 700; }
.desglose-cuenta { margin: 0; font-size: 15px; }
.desglose-cuenta b { font-family: var(--mono); font-size: 18px; }
.datos-linea { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 0; font-size: 14px; }
.datos-linea dt { color: var(--secundario); }
.datos-linea dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.hojas-linea { list-style: none; margin: 0; padding: 8px 0 0; border-top: 1px solid var(--linea); display: grid; gap: 8px; font-size: 14px; }
.hojas-linea li { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; }
.hojas-linea .cuando { grid-column: 1 / -1; color: var(--secundario); font-size: 12px; }
.numero-grande.alerta { background: var(--mal); border-color: var(--mal); }
.numero-grande.alerta .etiqueta, .numero-grande.alerta .valor, .numero-grande.alerta .pie { color: #FFFFFF; }
/* En el celular, las paradas suben arriba: así no hay que bajar buscándolas. En la computadora, cada una en su lugar. */
@media (max-width: 600px) { .linea-vivo.parada { order: -1; } }
/* En la tableta, una tabla de muchas columnas (6 o más, como una hoja de paradas con lugar y causa) también va en
   tarjetitas, y sus listas a lo ancho: así se lee entero lo que dice cada una («118 · Llenadora: Tapadora de cubeta»). */
@media (max-width: 1024px) {
  .tabla-form.muchas-columnas, .tabla-form.muchas-columnas tbody { display: block; }
  .tabla-form.muchas-columnas thead { display: none; }
  .tabla-form.muchas-columnas tr { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; background: var(--blanco); border: 1px solid var(--linea); border-radius: 8px; padding: 10px; margin-bottom: 10px; }
  .tabla-form.muchas-columnas td { display: grid; gap: 4px; padding: 0; border: 0; min-width: 0; width: auto; }
  .tabla-form.muchas-columnas td::before { content: attr(data-etiqueta); font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--secundario); }
  .tabla-form.muchas-columnas td:has(select) { grid-column: 1 / -1; }
  .tabla-form.muchas-columnas td.celda-quitar { grid-column: 1 / -1; width: auto; }
  .tabla-form.muchas-columnas td.celda-quitar::before { content: none; }
  .tabla-form.muchas-columnas .quitar { width: 100%; }
}
/* En los recuadros de la planta, lo largo (una causa con su código) va en 2 renglones como mucho, con «…». */
.datos-linea dd.recorta { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }

/* «Una línea por dentro» (linea.html): su cinta del día, sus barras y sus columnas hora por hora. Los colores dicen el
   estado (andando, parada sin programar, programada, todavía no) y no van solos: lo programado y lo que falta van
   rayados, cada parada dice qué fue al tocarla y abajo está la lista completa. Revisados con un validador de colores:
   se distinguen también con daltonismo (verde y rojo: ΔE 11; gris y rojo: 17) y los tres resaltan sobre la tarjeta. */
:root { --cinta-andando: #3D9A5F; --cinta-parada: #B3261E; --cinta-programada: #7D8B9C; --cinta-falta: #E6EBF0; }
.cabeza-linea { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.volver-planta { display: inline-block; margin-bottom: 6px; color: var(--secundario-oscuro); font-weight: 600; text-decoration: none; }
.volver-planta:hover, .volver-planta:focus-visible { text-decoration: underline; color: var(--titulo-oscuro); }
.parada-ahora.grande { font-size: 16px; padding: 12px 14px; }
.leyenda { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--secundario); }
.leyenda li { display: inline-flex; align-items: center; gap: 6px; }
.muestra { width: 22px; height: 12px; border-radius: 3px; display: inline-block; }
.muestra.andando, .tramo.andando { background: var(--cinta-andando); }
.muestra.parada, .tramo.parada, .trozo.parada { background: var(--cinta-parada); }
.muestra.programada, .tramo.programada, .trozo.programada { background: repeating-linear-gradient(135deg, var(--cinta-programada) 0 4px, #98A4B2 4px 7px); }
.muestra.falta, .tramo.falta { background: repeating-linear-gradient(135deg, var(--cinta-falta) 0 5px, #D5DCE3 5px 9px); }
.tramo.parada.abierta { background: repeating-linear-gradient(135deg, var(--cinta-parada) 0 6px, #D2554B 6px 10px); }
.cinta-turno { display: grid; gap: 6px; margin-top: 16px; }
.cinta-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 14px; color: var(--texto); }
.cinta-titulo .quien { color: var(--secundario); }
.cinta { position: relative; height: 36px; border-radius: 6px; overflow: hidden; background: var(--cinta-falta); }
.tramo { position: absolute; top: 0; bottom: 0; }
button.tramo { border: 0; padding: 0; margin: 0; border-radius: 0; cursor: pointer; min-width: 4px; box-shadow: inset 2px 0 0 var(--blanco), inset -2px 0 0 var(--blanco); }
button.tramo:hover { filter: brightness(1.12); }
button.tramo:focus-visible { outline: 3px solid var(--texto); outline-offset: -3px; z-index: 2; }
.marca-ahora { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--texto); transform: translateX(-1px); pointer-events: none; z-index: 1; }
.marca-ahora span { position: absolute; top: 3px; left: 5px; font-family: var(--mono); font-size: 11px; line-height: 1.4; color: var(--texto); background: var(--blanco); padding: 0 4px; border-radius: 3px; }
.marcas-hora { position: relative; height: 16px; font-family: var(--mono); font-size: 11px; color: var(--secundario); font-variant-numeric: tabular-nums; }
.marca-hora { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.marca-hora:first-child { transform: none; }
.marca-hora:last-child { transform: translateX(-100%); }
@media (max-width: 700px) { .marca-hora.impar { display: none; } }
.detalle-cinta { margin: 12px 0 0; min-height: 1.4em; font-size: 14px; color: var(--texto); }
.dos-columnas { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
/* Lado a lado, la más baja se estira al alto de la otra: lo suyo, arriba (no repartido en el alto que sobra). */
.dos-columnas > .tarjeta { margin: 0; align-content: start; }
.horas-linea { display: flex; gap: 20px; align-items: flex-end; min-width: max-content; padding-top: 4px; }
.grupo-horas { display: grid; gap: 6px; }
.grupo-horas .columnas { display: flex; gap: 4px; }
.grupo-horas .nombre-turno { font-size: 13px; color: var(--secundario); text-align: center; border-top: 1px solid var(--linea); padding-top: 4px; }
.columna-hora { display: grid; gap: 4px; justify-items: center; width: 26px; }
.columna-hora:focus-visible { outline: 3px solid var(--texto); outline-offset: 2px; border-radius: 4px; }
.pila-hora { width: 18px; height: 120px; display: flex; flex-direction: column-reverse; gap: 2px; border-bottom: 1px solid var(--linea);
  background: linear-gradient(to top, transparent calc(50% - 0.5px), var(--linea) calc(50% - 0.5px), var(--linea) calc(50% + 0.5px), transparent calc(50% + 0.5px)); }
.trozo { display: block; width: 100%; flex: none; border-radius: 4px 4px 0 0; }
.trozo[style*="height: 0%"] { display: none; }
.columna-hora .hora { font-family: var(--mono); font-size: 11px; color: var(--secundario); }
tr.abierta td { color: var(--mal); font-weight: 600; }
.programada-chip { margin-left: 6px; }

/* En «Cómo va la planta hoy», todo el recuadro de una línea lleva a su página (su nombre es el enlace, estirado sobre
   el recuadro); los enlaces de sus hojas quedan encima y se pueden tocar aparte. */
.linea-vivo .enlace-linea { color: inherit; text-decoration: none; }
.linea-vivo .enlace-linea::after { content: ''; position: absolute; inset: 0; border-radius: 10px; }
.linea-vivo .enlace-linea:focus-visible { outline: none; }
.linea-vivo .enlace-linea:focus-visible::after { outline: 3px solid var(--ambar); outline-offset: 2px; }
.linea-vivo:hover { outline: 2px solid var(--ambar); outline-offset: 2px; cursor: pointer; }
.linea-vivo .hojas-linea a { position: relative; z-index: 1; }
.ver-linea { font-size: 13px; font-weight: 600; color: var(--secundario); }
.linea-vivo.sin_hoja .ver-linea { color: var(--secundario-oscuro); }

/* ── El menú de al lado (calidad, supervisor, gerente y administrador de una fábrica; ver /core/menu.js) ──
   En la computadora queda fijo a la izquierda, debajo de la barra, y el contenido se corre a la derecha; en la tableta y
   el celular se abre con «Menú», encima de la pantalla. Arriba, la planta y cada línea con cómo va ahora: el color va
   siempre con su palabra (andando en verde, parada en rojo, cerrada en gris, sin hoja en un círculo vacío). */
:root { --ancho-menu: 256px; }
body.con-menu { padding-left: var(--ancho-menu); }
body.con-menu > .cabecera { margin-left: calc(-1 * var(--ancho-menu)); }
/* «Atrás» y «Adelante», alineados con el contenido (que ahora empieza después del menú). */
body.con-menu .navegacion {
  padding-left: calc(var(--ancho-menu) + max(16px, calc((100% - var(--ancho-menu) - 980px) / 2 + 16px)));
  padding-right: max(16px, calc((100% - var(--ancho-menu) - 980px) / 2 + 16px));
}
.menu-lado {
  position: fixed; top: var(--alto-cabecera, 112px); bottom: 0; left: 0; z-index: 9; width: var(--ancho-menu);
  overflow-y: auto; overscroll-behavior: contain; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-content: start;
  padding: 16px 10px 28px; background: var(--fondo-2); border-right: 1px solid var(--linea-oscuro);
}
/* minmax(0, 1fr): que cada renglón quepa en el ancho del menú (un nombre largo se corta con «…», la palabra de la derecha no). */
.menu-seccion { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.menu-titulo { margin: 0 0 2px; padding: 0 10px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--secundario-oscuro); }
.menu-enlaces, .menu-lineas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.menu-lineas { margin: 4px 0 2px 10px; padding-left: 6px; border-left: 1px solid var(--linea-oscuro); }
.menu-enlace, .menu-linea {
  display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 10px; border-radius: 6px;
  color: var(--cuerpo-oscuro); text-decoration: none; font-size: 15px; line-height: 1.2;
}
.menu-enlace:hover, .menu-linea:hover { background: var(--fondo); color: var(--titulo-oscuro); }
.menu-enlace:focus-visible, .menu-linea:focus-visible { outline: 3px solid var(--ambar); outline-offset: -3px; }
/* Donde está: más fuerte y con su raya de acento. */
.menu-enlace[aria-current="page"], .menu-linea[aria-current="page"] { background: var(--fondo); color: var(--titulo-oscuro); font-weight: 600; box-shadow: inset 3px 0 0 var(--ambar); }
.menu-linea .nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-linea .estado { flex: none; font-size: 12px; color: var(--secundario-oscuro); font-variant-numeric: tabular-nums; }
.menu-linea .punto { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--cinta-programada); }
.menu-linea.andando .punto { background: var(--cinta-andando); }
.menu-linea.sin_hoja .punto { background: transparent; border: 2px solid var(--cinta-programada); }
.menu-linea.parada .punto { background: var(--cinta-parada); box-shadow: 0 0 0 2px var(--titulo-oscuro); }
.menu-linea.parada .estado { padding: 2px 8px; border-radius: 999px; background: var(--mal); color: #FFFFFF; font-weight: 600; }
.menu-vacio { padding: 6px 10px; font-size: 13px; color: var(--secundario-oscuro); }
.boton-menu { display: none; }
@media (max-width: 1099px) {
  body.con-menu { padding-left: 0; }
  body.con-menu > .cabecera { margin-left: 0; }
  body.con-menu .navegacion { padding: 6px max(16px, calc((100% - 980px) / 2 + 16px)); }
  .boton-menu { display: inline-flex; min-height: 44px; padding: 6px 14px; font-size: 16px; }
  /* Al abrir, se ve enseguida (y su primer enlace recibe el foco) mientras se desliza; al cerrar, se esconde después. */
  .menu-lado {
    width: min(300px, 86vw); visibility: hidden; transform: translateX(-100%);
    transition: transform 0.2s ease, visibility 0s linear 0.2s; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  }
  body.menu-abierto .menu-lado { visibility: visible; transform: none; transition: transform 0.2s ease, visibility 0s; }
}
/* En un celular angosto, la barra con «Menú» también cabe entera: botones y nombre más compactos. */
@media (max-width: 420px) {
  body.con-menu .barra { gap: 8px; padding: 8px 10px; }
  body.con-menu .barra button { min-height: 44px; padding: 6px 10px; font-size: 15px; }
  body.con-menu .barra .quien b { max-width: 30vw; }
}
@media print {
  .menu-lado, .boton-menu, .campana, .panel-avisos { display: none !important; }
  body.con-menu { padding-left: 0; }
  body.con-menu > .cabecera { margin-left: 0; }
}

/* ── La campanita, al lado de «Adelante» (ver campana.js) ──
   El número dice cuántas cosas esperan; en rojo, si hay alguna sin ver. Al llegar algo nuevo, se sacude dos veces (y
   suena la alarma). El tipo de cada aviso va con su palabra y su color: Línea parada en rojo, Por firmar en el acento,
   Devuelto en ámbar oscuro. */
.navegacion .campana { position: relative; padding: 6px 12px; }
.campana-icono { width: 24px; height: 24px; display: block; transform-origin: 50% 12%; }
.campana-cuenta {
  position: absolute; top: -7px; right: -7px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  display: grid; place-items: center; background: var(--titulo-oscuro); color: var(--fondo); border: 2px solid var(--fondo-2);
  font-family: var(--mono); font-size: 12px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}
.campana.con-nuevos { border-color: var(--mal); color: var(--titulo-oscuro); }
.campana.con-nuevos .campana-cuenta { background: var(--mal); color: var(--blanco); }
.campana.sonando .campana-icono { animation: sacudir-campana 0.9s ease-in-out 2; }
@keyframes sacudir-campana {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(16deg); }
  30% { transform: rotate(-13deg); }
  45% { transform: rotate(9deg); }
  60% { transform: rotate(-6deg); }
  75% { transform: rotate(3deg); }
}
.panel-avisos {
  position: fixed; z-index: 30; top: calc(var(--alto-cabecera, 110px) + 6px); right: max(12px, calc((100% - 980px) / 2 + 12px));
  width: min(420px, calc(100% - 24px)); max-height: calc(100dvh - var(--alto-cabecera, 110px) - 18px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--claro); color: var(--texto); border: 1px solid var(--linea); border-radius: var(--radio);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.38);
}
.avisos-cabeza { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px 10px; background: var(--claro); }
.avisos-cabeza h2 { color: var(--texto); font-size: 20px; }
.avisos-cabeza .avisos-cerrar { color: var(--texto); border-color: var(--linea); min-height: 40px; padding: 4px 12px; font-size: 15px; }
.avisos-lista { list-style: none; margin: 0; padding: 0 10px 12px; display: grid; gap: 8px; }
.campana-aviso {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px; padding: 10px 12px; border-radius: 8px;
  background: var(--blanco); border: 1px solid var(--linea); color: var(--texto); text-decoration: none;
}
.campana-aviso:hover { border-color: var(--secundario); }
.campana-aviso:focus-visible { outline: 3px solid var(--tinta); outline-offset: 1px; }
.campana-aviso.nuevo { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }
.campana-aviso-tipo {
  justify-self: start; padding: 2px 9px; border-radius: 999px; background: var(--claro); color: var(--secundario);
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.campana-aviso.parada .campana-aviso-tipo { background: var(--mal); color: var(--blanco); }
.campana-aviso.firmar .campana-aviso-tipo { background: var(--ambar); color: var(--sobre-acento); }
.campana-aviso.devuelto .campana-aviso-tipo { background: var(--aviso-fondo); color: var(--aviso); }
.campana-aviso-cuando { font-size: 13px; color: var(--secundario); white-space: nowrap; }
.campana-aviso-titulo { grid-column: 1 / -1; font-size: 17px; line-height: 1.25; }
.campana-aviso-texto { grid-column: 1 / -1; font-size: 15px; line-height: 1.35; color: var(--secundario); }
.avisos-vacio { padding: 4px 6px; color: var(--secundario); font-size: 15px; }
.avisos-pie { display: grid; gap: 14px; padding: 12px 14px 14px; border-top: 1px solid var(--linea); }
.avisos-opcion { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; }
.avisos-opcion > span:first-child { display: grid; gap: 2px; }
.avisos-opcion small { color: var(--secundario); font-size: 14px; line-height: 1.3; }
.avisos-botones { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.avisos-botones button { min-height: 42px; padding: 6px 14px; font-size: 15px; }
.avisos-mensaje { margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--info-fondo); color: var(--texto); font-size: 14px; }
@media (max-width: 520px) {
  .avisos-opcion { grid-template-columns: 1fr; }
  .avisos-botones { justify-content: flex-start; }
}
@media (max-width: 420px) {
  .navegacion { gap: 6px; }
  .navegacion button { padding: 6px 10px; font-size: 15px; }
  .navegacion .campana { padding: 6px 9px; }
}

/* ── El carrusel de la marca: las fotos de sus productos, en su inicio y en su entrada (ver carrusel.js) ──
   Cada foto sobre su propio color (el de la marca que le toca), con un brillo detrás del producto, que entra subiendo y
   después flota apenas. La letra va blanca u oscura según se lea mejor sobre ese color. Los mandos van sobre una pastilla
   oscura y translúcida: se leen sobre cualquier color. */
/* La foto llena todo el alto del carrusel (en la entrada de la computadora, el del formulario de al lado). */
.vitrina { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-rows: minmax(0, 1fr); border-radius: calc(var(--radio) + 4px); background: var(--fondo-2); }
.carrusel-ventana { overflow: hidden; display: grid; }
.carrusel-pista { display: flex; touch-action: pan-y; transition: transform 0.7s cubic-bezier(0.22, 0.75, 0.2, 1); }
.diapositiva {
  flex: 0 0 100%; min-width: 0; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 16px;
  min-height: 270px; padding: 30px 30px 66px;
  background: var(--fondo-foto);
  background:
    radial-gradient(circle at 74% 46%, rgba(255, 255, 255, 0.5) 0, rgba(255, 255, 255, 0) 44%),
    linear-gradient(135deg, var(--fondo-foto) 0%, color-mix(in srgb, var(--fondo-foto) 70%, #000000) 100%);
}
.letra-clara { color: var(--blanco); }
.letra-oscura { color: #111111; }
.diapositiva-texto { display: grid; gap: 8px; align-content: center; }
.diapositiva-marca { margin: 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.88; }
.diapositiva-titulo { font-size: clamp(30px, 4.4vw, 48px); line-height: 0.98; letter-spacing: 0.01em; }
.diapositiva-detalle { margin: 0; max-width: 34ch; font-size: 17px; line-height: 1.35; }
.diapositiva-foto { display: grid; place-items: center; min-height: 200px; }
.diapositiva-foto img {
  width: 100%; max-width: 400px; max-height: 250px; object-fit: contain; filter: drop-shadow(0 18px 20px rgba(0, 0, 0, 0.35));
  opacity: 0; transform: translateY(16px) scale(0.92); transition: opacity 0.6s ease 0.15s, transform 0.9s cubic-bezier(0.22, 0.75, 0.2, 1) 0.15s;
}
.diapositiva.activa .diapositiva-foto img { opacity: 1; transform: none; animation: flotar-foto 6s ease-in-out 1.2s infinite; }
@keyframes flotar-foto { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.carrusel-mandos { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; pointer-events: none; }
.carrusel-puntos, .carrusel-botones { display: flex; align-items: center; gap: 2px; padding: 2px 6px; border-radius: 999px; background: rgba(0, 0, 0, 0.32); pointer-events: auto; }
.carrusel-punto { position: relative; width: 34px; min-height: 30px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--blanco); }
.carrusel-punto::after { content: ''; position: absolute; left: 6px; right: 6px; top: 12px; height: 6px; border-radius: 999px; background: currentColor; opacity: 0.45; transition: opacity 0.3s ease; }
.carrusel-punto[aria-current="true"]::after { opacity: 1; }
.carrusel-boton { width: 38px; min-height: 38px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--blanco); font-size: 20px; font-weight: 600; line-height: 1; }
.carrusel-boton:hover { background: rgba(255, 255, 255, 0.18); }
.carrusel-icono { width: 15px; height: 15px; display: block; }
/* En la entrada, más bajo; en la computadora, al lado del formulario y a todo lo alto. */
.vitrina.compacto .diapositiva { min-height: 220px; padding: 24px 24px 60px; }
.vitrina.compacto .diapositiva-titulo { font-size: clamp(26px, 3.2vw, 36px); }
.vitrina.compacto .diapositiva-foto img { max-height: 200px; }
.entrada.con-vitrina { max-width: 1120px; }
@media (min-width: 900px) {
  .entrada.con-vitrina { grid-template-columns: minmax(0, 1.3fr) minmax(340px, 1fr); column-gap: 36px; align-items: center; padding-top: 32px; }
  .entrada.con-vitrina > .vitrina { grid-column: 1; grid-row: 1 / span 3; align-self: stretch; }
  .entrada.con-vitrina > :not(.vitrina) { grid-column: 2; }
  .entrada.con-vitrina .diapositiva { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: start; min-height: 560px; padding: 40px 36px 74px; }
  .entrada.con-vitrina .diapositiva-titulo { font-size: clamp(40px, 4vw, 56px); }
  .entrada.con-vitrina .diapositiva-foto { align-self: stretch; }
  .entrada.con-vitrina .diapositiva-foto img { max-width: 480px; max-height: 340px; }
}
/* En el celular, primero el formulario para entrar; las fotos, debajo. */
@media (max-width: 899px) {
  .entrada.con-vitrina > .vitrina { order: 1; }
}
@media (max-width: 560px) {
  .diapositiva { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: 8px; min-height: 214px; padding: 18px 16px 58px; }
  .diapositiva-titulo { font-size: 26px; }
  .diapositiva-detalle { font-size: 14px; }
  .diapositiva-foto { min-height: 150px; }
  .diapositiva-foto img { max-height: 160px; }
  .vitrina.compacto .diapositiva { min-height: 190px; padding: 16px 14px 56px; }
  .vitrina.compacto .diapositiva-titulo { font-size: 24px; }
  .diapositiva-lema { display: none; } /* arriba, solo la marca: el lema no cabe */
}

/* ── Un problema serio (ver urgencia.js y campana.js) ──
   El botón «Problema serio», en rojo lleno (se lee igual en las pantallas oscuras y en las claras), antes de la campanita.
   Su ventana: a quién (supervisor, gerente o los dos), qué pasa (botones grandes: se toca con guantes), en qué línea y unas
   palabras. A quien lo recibe: la campanita en rojo, el aviso con «Lo vi, voy para allá» y una banda roja arriba, que no
   se va hasta que alguien lo atiende. */
.navegacion .urgencia { padding: 6px 12px; gap: 6px; background: var(--mal); border-color: var(--mal); color: var(--blanco); }
.navegacion .urgencia:hover { filter: brightness(1.08); }
.urgencia-icono { width: 22px; height: 22px; display: block; flex: none; }
.urgencia-signo { fill: var(--mal); }
.panel-urgencia {
  position: fixed; z-index: 31; top: calc(var(--alto-cabecera, 110px) + 6px); right: 12px;
  width: min(440px, calc(100% - 24px)); max-height: calc(100dvh - var(--alto-cabecera, 110px) - 18px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--claro); color: var(--texto); border: 2px solid var(--mal); border-radius: var(--radio);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.38);
}
.urgencia-cabeza { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; background: var(--mal); color: var(--blanco); }
.urgencia-cabeza h2 { color: var(--blanco); font-size: 20px; }
.urgencia-cabeza .urgencia-cerrar { color: var(--blanco); border-color: rgba(255, 255, 255, 0.6); min-height: 40px; padding: 4px 12px; font-size: 15px; }
.urgencia-cuerpo { display: grid; gap: 14px; padding: 14px; }
.urgencia-nota { margin: 0; font-size: 14px; color: var(--secundario); }
.urgencia-campo { display: grid; gap: 6px; }
.urgencia-opciones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.urgencia-motivos { display: grid; gap: 6px; }
.urgencia-opciones button, .urgencia-motivos button { min-height: 48px; padding: 8px 12px; font-size: 16px; justify-content: flex-start; text-align: left; }
.urgencia-opciones button { justify-content: center; text-align: center; }
.urgencia-opciones button[aria-pressed="true"], .urgencia-motivos button[aria-pressed="true"] { background: var(--mal); border-color: var(--mal); color: var(--blanco); }
/* «Avisar ahora», siempre a la vista: fijo abajo de la ventana aunque se baje por la lista. */
.urgencia-enviar {
  position: sticky; bottom: 0; z-index: 1; min-height: 56px; font-size: 19px;
  background: var(--mal); color: var(--blanco); border-color: var(--mal); box-shadow: 0 -10px 16px var(--claro);
}
.urgencia-enviar:hover { filter: brightness(1.08); }
.banda-urgente { display: grid; gap: 2px; background: var(--mal); color: var(--blanco); }
.banda-urgente-fila {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px;
  padding: 8px max(16px, calc((100% - 980px) / 2 + 16px)); font-size: 15px; line-height: 1.3;
}
.banda-urgente-texto b { font-family: var(--titulo); font-size: 18px; letter-spacing: 0.02em; text-transform: uppercase; margin-right: 4px; }
.banda-urgente-fila .principal { min-height: 42px; padding: 6px 14px; font-size: 15px; background: var(--blanco); color: var(--mal); }
.campana.con-urgente { background: var(--mal); border-color: var(--mal); color: var(--blanco); }
.campana.con-urgente .campana-cuenta { background: var(--blanco); color: var(--mal); }
.campana-aviso.urgente { border-color: var(--mal); background: var(--mal-fondo); }
.campana-aviso.urgente .campana-aviso-tipo { background: var(--mal); color: var(--blanco); }
.campana-aviso.atendida .campana-aviso-tipo { background: var(--bien-fondo); color: var(--bien); }
.campana-aviso.recordatorio .campana-aviso-tipo { background: var(--aviso-fondo); color: var(--aviso); }
.campana-aviso-botones { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.campana-aviso-botones .boton, .campana-aviso-botones button { min-height: 42px; padding: 6px 12px; font-size: 15px; }

/* «Se conectó Juan Pérez»: abajo a la derecha (a la izquierda está el menú), chico, y se va solo a los 7 segundos. */
.al-vuelo {
  position: fixed; z-index: 25; right: 12px; bottom: 12px; display: grid; gap: 8px;
  width: max-content; max-width: min(340px, calc(100% - 24px)); pointer-events: none;
}
.al-vuelo-aviso {
  margin: 0; display: grid; gap: 1px; padding: 10px 14px 10px 30px; border-radius: 8px; position: relative;
  background: var(--texto); color: var(--blanco); border: 1px solid rgba(255, 255, 255, 0.18); font-size: 15px; line-height: 1.3;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  animation: al-vuelo-entra 0.25s ease-out, al-vuelo-sale 0.4s ease-in 6.6s forwards;
}
.al-vuelo-aviso::before { content: ''; position: absolute; left: 12px; top: 15px; width: 9px; height: 9px; border-radius: 50%; background: var(--bien); box-shadow: 0 0 0 3px rgba(30, 122, 70, 0.3); }
.al-vuelo-aviso span { font-size: 13px; opacity: 0.8; }
@keyframes al-vuelo-entra { from { transform: translateY(10px); opacity: 0; } }
@keyframes al-vuelo-sale { to { opacity: 0; } }

/* Por qué esa parada no suena en la campanita (su hora, fuera del turno de su hoja; o su turno ya terminó). */
.parada-revisar { margin-top: 4px; padding-top: 6px; border-top: 1px dashed currentColor; font-size: 13px; line-height: 1.35; }

/* «Conectados ahora» (Cómo va la planta): cada persona con su puesto, y un punto verde. Arriba de su tarjeta, sin
   estirarse al alto de «Cerrar turno», que va al lado. */
.en-linea { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; align-self: start; gap: 8px; }
.en-linea li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--blanco); border: 1px solid var(--linea); font-size: 15px; }
.en-linea li::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--bien); }
.en-linea li span { color: var(--secundario); font-size: 13px; }
.en-linea li.vacio { padding: 0; background: none; border: 0; }
.en-linea li.vacio::before { content: none; }
/* «Cerrar turno»: el turno y el botón en una fila (en el celular, uno debajo del otro). */
.fila-cerrar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.fila-cerrar .campo { flex: 1 1 220px; }
@media (max-width: 700px) {
  .urgencia-texto { display: none; } /* en el celular, solo el triángulo (su nombre lo lee el lector de pantalla) */
}
@media (max-width: 420px) {
  .navegacion .urgencia { padding: 6px 9px; }
  .urgencia-opciones button { font-size: 15px; padding: 6px 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .al-vuelo-aviso { animation: none; }
}
@media print {
  .urgencia, .panel-urgencia, .banda-urgente, .al-vuelo { display: none !important; }
}