/* 3D Reinvent · panel de operacion
   Tokens del design system "3D Reinvent" (paleta A Taller): los mismos nombres que tokens.json y
   que landing/styles.css, mas los del mockup del panel (sunken, ink-faint, track, solid...).
   Colores de estado = LED de Prusa: azul imprimiendo, verde terminada, amarillo pausa, rojo
   atencion/error, gris libre, punteado sin conexion o fuera de servicio. */

/* Letras propias (fuentes/, licencia en OFL.txt): las mismas de la landing, sin pedirle nada a Google
   Fonts. Archivo e IBM Plex Sans son variables (un archivo para todos los pesos) y las precarga
   index.html. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 600 800;
  font-stretch: 112%;
  font-display: swap;
  src: url(fuentes/archivo.woff2) format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fuentes/ibm-plex-sans.woff2) format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fuentes/ibm-plex-mono-400.woff2) format("woff2");
}

@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");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fuentes/ibm-plex-mono-600.woff2) format("woff2");
}

:root {
  color-scheme: light;
  --bg: #F6F6F3;
  --surface: #FFFFFF;
  --sunken: #ECEEF0;
  --ink: #1D2125;
  --ink-muted: #5E6873;
  --ink-faint: #9AA3AD;
  --line: #D9DDE1;
  --line-soft: #ECEEF0;
  --line-strong: #C4C9CE;
  --border-control: #8A939C;
  --edge: #5E6873;
  --edge-soft: #9AA3AD;
  --track: #D9DDE1;
  --solid: #1D2125;
  --on-solid: #FFFFFF;
  --danger-bg: #FBEAE9;
  --danger-ink: #B3261E;
  --danger-ink-strong: #8C1D18;
  --bar: #8A939C;
  --focus: #1D2125;
  --serie1: #1F6FD1;
  --serie2: #D95926;
  /* el boton principal y los chips activos: grafito en claro; en oscuro solo borde y texto blancos, sin relleno.
     El dueno lo eligio entre ocho opciones el 2026-10-09: cinco botones blancos o amarillos juntos resaltaban */
  --accion-bg: #1D2125;
  --accion-ink: #FFFFFF;
  --accion-hover: #353B41;
  --accion-borde: #1D2125;
  --lateral-activo: #F2F3F4;
  /* tintes de la linea de tiempo de la granja */
  --azul-tinte: rgba(31, 111, 209, 0.12);
  --verde-tinte: rgba(23, 122, 65, 0.14);
  --amarillo-tinte: rgba(242, 183, 5, 0.22);
  --rojo-tinte: rgba(179, 38, 30, 0.12);

  /* Fijos de marca: no cambian con el tema */
  --grafito: #1D2125;
  --amarillo: #F2B705;
  --on-accent: #1D2125;
  --lateral-linea: #3A4148;
  --lateral-texto: #D9DDE1;
  --lateral-nota: #9AA3AD;

  --led-azul: #1F6FD1;
  --led-verde: #177A41;
  --led-amarillo: #F2B705;
  --led-rojo: #B3261E;

  --font-display: "Archivo", "Arial", system-ui, sans-serif;
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --bg: #111417;
    --surface: #1D2125;
    --sunken: #262B30;
    --ink: #F2F3F4;
    --ink-muted: #A4ADB7;
    --ink-faint: #6B7580;
    --line: #343B42;
    --line-soft: #2A3036;
    --line-strong: #4A525A;
    --border-control: #6B7580;
    --edge: #6B7580;
    --edge-soft: #5E6873;
    --track: #343B42;
    --solid: #F2F3F4;
    --on-solid: #1D2125;
    --danger-bg: #3A1F1D;
    --danger-ink: #F28B82;
    --danger-ink-strong: #F6B3AD;
    --bar: #6B7580;
    --focus: #F2B705;
    --serie1: #3987E5;
    --serie2: #E2602C;
    --accion-bg: transparent;
    --accion-ink: #F2F3F4;
    --accion-hover: #262B30;
    --accion-borde: #F2F3F4;
    --lateral-activo: #F2F3F4;
    --azul-tinte: rgba(31, 111, 209, 0.22);
    --verde-tinte: rgba(23, 122, 65, 0.26);
    --amarillo-tinte: rgba(242, 183, 5, 0.16);
    --rojo-tinte: rgba(179, 38, 30, 0.26);
  }
}

:root[data-tema="oscuro"] {
  color-scheme: dark;
  --bg: #111417;
  --surface: #1D2125;
  --sunken: #262B30;
  --ink: #F2F3F4;
  --ink-muted: #A4ADB7;
  --ink-faint: #6B7580;
  --line: #343B42;
  --line-soft: #2A3036;
  --line-strong: #4A525A;
  --border-control: #6B7580;
  --edge: #6B7580;
  --edge-soft: #5E6873;
  --track: #343B42;
  --solid: #F2F3F4;
  --on-solid: #1D2125;
  --danger-bg: #3A1F1D;
  --danger-ink: #F28B82;
  --danger-ink-strong: #F6B3AD;
  --bar: #6B7580;
  --focus: #F2B705;
  --serie1: #3987E5;
  --serie2: #E2602C;
  --accion-bg: transparent;
  --accion-ink: #F2F3F4;
  --accion-hover: #262B30;
  --accion-borde: #F2F3F4;
  --lateral-activo: #F2F3F4;
  --azul-tinte: rgba(31, 111, 209, 0.22);
  --verde-tinte: rgba(23, 122, 65, 0.26);
  --amarillo-tinte: rgba(242, 183, 5, 0.16);
  --rojo-tinte: rgba(179, 38, 30, 0.26);
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; touch-action: pan-x pan-y; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.45;
}
a { color: var(--ink); }
a:hover { color: var(--ink-muted); }
h1, h2, h3 { font-family: var(--font-display); font-stretch: 112%; margin: 0; color: var(--ink); }
h1 { font-size: 26px; font-weight: 800; line-height: 1.1; }
h2 { font-size: 18px; font-weight: 700; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.saltar { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--amarillo); color: var(--on-accent); padding: 8px 12px; }
.saltar:focus { left: 8px; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--font-mono); }
.negrita { font-weight: 600; }
.grande { font-size: 17px; }
.chico, .chica { font-size: 12px; }
.nota { color: var(--ink-muted); font-size: 13px; }
.bloque { display: block; }
.apagado { color: var(--ink-muted); }
.derecha { align-items: flex-end; }
.crece { flex-grow: 1; min-width: 0; }
.empuja { margin-left: auto; }
.rotulo {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.con-punto { display: flex; align-items: center; gap: 6px; }
.columna { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.columna.apretada { gap: 2px; }
.fila-entre { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.fila-entre.arriba { align-items: flex-start; }
.fila-chips { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.texto-peligro { color: var(--danger-ink-strong); font-size: 12px; }
.vacio { color: var(--ink-muted); padding: 16px; background: var(--surface); border: 1px dashed var(--line); border-radius: 4px; }

/* ---------- colores del LED ---------- */

.punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--bar); }
.punto.grande { width: 12px; height: 12px; }
.led-azul { --led: var(--led-azul); --led-texto: #FFFFFF; }
.led-verde { --led: var(--led-verde); --led-texto: #FFFFFF; }
.led-amarillo { --led: var(--led-amarillo); --led-texto: #1D2125; }
.led-rojo { --led: var(--led-rojo); --led-texto: #FFFFFF; }
.led-gris { --led: var(--bar); --led-texto: #FFFFFF; }
.led-punteado { --led: transparent; --led-texto: var(--ink-muted); }
.punto[class*="led-"] { background: var(--led); }
.punto.led-amarillo { box-shadow: 0 0 0 1px #1D2125; }
.punto.led-punteado { border: 2px solid var(--edge-soft); }

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--led);
  color: var(--led-texto);
}
.etiqueta.led-gris { background: var(--sunken); color: var(--ink); border: 1px solid var(--line); }
.etiqueta.led-punteado { border: 1px dashed var(--edge); }

.barra-led { height: 6px; margin: -16px -16px 0; border-radius: 3px 3px 0 0; background: var(--led); }
.barra-led.led-gris { background: var(--track); }
.barra-led.led-punteado { background: repeating-linear-gradient(90deg, var(--edge-soft) 0 8px, transparent 8px 14px); }

.progreso { height: 6px; background: var(--track); }
.progreso-lleno { height: 100%; width: 0; background: var(--led, var(--led-azul)); }
.progreso-lleno.led-gris { background: var(--bar); }

/* ---------- marco: barra de arriba, cajon (menos de 1024 px) y lateral (desde 1024 px) ---------- */

.marco { min-height: 100vh; }
.vista { min-width: 0; outline: none; }
.vista:has(.barra-accion) { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.lateral { display: none; }

.marca { display: flex; align-items: center; gap: 12px; padding: 0 8px; flex-wrap: wrap; }
.marca img { display: block; }
.marca-granja { font-size: 11px; color: var(--lateral-nota); }
.nav-lateral { display: flex; flex-direction: column; gap: 20px; }
.nav-grupo { display: flex; flex-direction: column; gap: 4px; }
.nav-titulo { padding: 0 12px 4px; color: var(--lateral-nota); }
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 2px;
  color: var(--lateral-texto);
  text-decoration: none;
  font-size: 14px;
}
a.nav-item:hover { color: #FFFFFF; background: #262B30; }
.nav-item[aria-current="page"] { background: var(--amarillo); color: var(--on-accent); font-weight: 600; }
.nav-cuenta { margin-left: auto; font-size: 12px; color: var(--lateral-nota); }
.nav-item[aria-current="page"] .nav-cuenta { color: var(--on-accent); }
.lateral-pie { margin-top: auto; display: flex; flex-direction: column; gap: 16px; }
.selector-tema { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border: 1px solid var(--lateral-linea); border-radius: 4px; }
.selector-tema button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 4px;
  border: 0; border-radius: 2px; background: transparent; color: var(--lateral-texto); font-size: 13px; font-weight: 600; cursor: pointer;
}
.selector-tema button[aria-pressed="true"] { background: var(--lateral-activo); color: #1D2125; }
.caja-gateway { border: 1px solid var(--lateral-linea); border-radius: 4px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.caja-gateway .rotulo, .caja-usuario .rotulo { color: var(--lateral-nota); }
.gateway-estado { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.gateway-nota, .usuario-nota { font-size: 12px; color: var(--lateral-nota); }
.caja-usuario { padding: 0 8px; display: flex; flex-direction: column; gap: 4px; }
.usuario-nombre { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.usuario-enlaces { display: flex; align-items: center; gap: 8px; }
.usuario-enlaces a, .usuario-enlaces .boton-enlace {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px 0 0; color: var(--lateral-texto); font-size: 13px;
}
.usuario-enlaces a:hover, .usuario-enlaces .boton-enlace:hover { color: #FFFFFF; }

/* El cajon: el mismo menu del lateral, a la izquierda; el fondo oscuro es el propio <dialog>. */
.cajon {
  position: fixed; inset: 0 auto 0 0; margin: 0; padding: 0; border: 0; width: min(300px, 86vw); max-width: none; height: 100dvh;
  max-height: none; background: var(--grafito); color: #F2F3F4;
}
.cajon::backdrop { background: rgba(17, 20, 23, 0.6); }
.cajon-cuerpo {
  display: flex; flex-direction: column; gap: 24px; min-height: 100%;
  padding: calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
}
.cajon-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.boton-icono {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0;
  padding: 0; border-radius: 2px; cursor: pointer; background: var(--surface); color: var(--ink); border: 1px solid var(--line); text-decoration: none;
}
.boton-icono.boton-oscuro { background: transparent; color: #F2F3F4; border-color: var(--lateral-linea); }

/* La barra de arriba de cada pantalla: grafito con filete amarillo en el celular y la tablet. */
.barra {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px; box-sizing: content-box; min-height: 56px;
  padding: env(safe-area-inset-top) calc(8px + env(safe-area-inset-right)) 0 calc(4px + env(safe-area-inset-left));
  background: var(--grafito); color: #F2F3F4; border-bottom: 3px solid var(--amarillo);
}
.barra-menu, .barra-gateway {
  flex: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 2px; color: inherit; cursor: pointer; padding: 0;
}
.barra-volver {
  flex: none; display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 10px 0 4px; color: inherit;
  text-decoration: none; font-weight: 600; font-size: 14px; border-radius: 2px;
}
.barra-volver:hover { color: inherit; opacity: 0.8; }
.barra-texto { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; }
.barra h1 {
  color: inherit; font-size: 18px; line-height: 22px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.barra-sub {
  font-size: 11px; line-height: 14px; letter-spacing: 0.04em; color: var(--lateral-nota); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
}
.barra-gateway { cursor: default; }
.punto-gateway { width: 10px; height: 10px; border-radius: 50%; background: #9AA3AD; }
body[data-gateway="en_linea"] .punto-gateway { background: #2EBD59; box-shadow: 0 0 0 3px rgba(46, 189, 89, 0.25); }
body[data-gateway="desconectado"] .punto-gateway { background: #E5534B; box-shadow: 0 0 0 3px rgba(229, 83, 75, 0.25); }
/* Las acciones de la pantalla, en una tira debajo de la barra. */
.barra-acciones {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 16px; background: var(--surface);
  border-bottom: 1px solid var(--line);
}

/* La accion principal, fija abajo (desde 1024 px queda al final del contenido). */
.barra-accion {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; flex-direction: column; gap: 8px; background: var(--surface);
  border-top: 1px solid var(--line); padding: 12px calc(16px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
}
.barra-accion-botones { display: flex; gap: 8px; }
.barra-accion-botones > * { flex: 1 1 0; min-height: 52px; }
.barra-accion-nota { margin: 0; font-size: 12px; color: var(--ink-muted); }
body:has(.barra-accion) .aviso { bottom: calc(96px + env(safe-area-inset-bottom)); }

.selector-rol { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Pestanas subrayadas (cola, finanzas, etiquetas...). */
.pestanas { display: flex; overflow-x: auto; padding: 0 8px; background: var(--surface); border-bottom: 1px solid var(--line); scrollbar-width: none; }
.pestanas::-webkit-scrollbar { display: none; }
.pestana {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 14px; background: none; border: 0;
  border-bottom: 3px solid transparent; color: var(--ink-muted); font-weight: 600; cursor: pointer;
}
.pestana[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--amarillo); }
.pestana-cuenta { font-size: 12px; padding: 0 6px; background: var(--sunken); border-radius: 2px; color: var(--ink); }

/* ---------- pagina ---------- */

.encabezado {
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 32px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.encabezado-texto { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.subtitulo { font-size: 12px; color: var(--ink-muted); }
.encabezado-acciones { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.migas { font-size: 12px; color: var(--ink-muted); }
.contenido { padding: 32px; display: flex; flex-direction: column; gap: 32px; }
.contenido-angosto { max-width: 640px; gap: 24px; }
.seccion { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.seccion-titulo { display: flex; align-items: center; gap: 10px; }
.seccion-cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cuenta {
  display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 6px;
  background: var(--amarillo); color: var(--on-accent); border-radius: 2px; font-size: 12px; font-weight: 600;
}
.leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; font-size: 12px; color: var(--ink-muted); }
.leyenda > span { display: inline-flex; align-items: center; gap: 6px; }

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpis-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.kpi-acento { background: var(--amarillo); border-color: var(--amarillo); color: var(--on-accent); }
.kpi-acento .rotulo, .kpi-acento .kpi-nota { color: var(--on-accent); font-weight: 600; }
.kpi-valor { font-size: 28px; font-weight: 600; line-height: 1.1; }
.kpi-valor small { font-size: 14px; font-weight: 400; color: var(--ink-muted); }
.kpi-acento .kpi-valor small { color: var(--on-accent); }
.kpi-nota { font-size: 12px; color: var(--ink-muted); }

.rejilla { display: grid; gap: 16px; }
.rejilla-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rejilla-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Lo que solo cabe en pantallas anchas (de la fila 6 a la 8 de Siguientes en cola). */
tr.solo-ancho { display: none; }
@media (min-width: 1600px) { tr.solo-ancho { display: table-row; } }

.tarjeta, .panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.panel { padding: 20px; gap: 14px; }
.panel .barra-led { margin: -20px -20px 0; }
.tarjeta-punteada { border-style: dashed; }
.tarjeta-texto { font-size: 14px; }
.tarjeta-pie { margin-top: auto; }
.id { font-size: 15px; font-weight: 600; }
.id-grande { font-size: 16px; font-weight: 600; }
.datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.panel .datos { border-top: 0; padding-top: 0; }
.datos-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.datos-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dato { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dato .valor { font-family: var(--font-mono); font-size: 13px; overflow-wrap: anywhere; }
.dato .valor.fuerte { font-size: 15px; font-weight: 600; }
.dato.grande .valor { font-size: 22px; font-weight: 600; }
.dato .boton { align-self: flex-start; margin-top: 4px; }
.dato-ancho { grid-column: 1 / -1; }
.pie-panel { padding-top: 14px; border-top: 1px solid var(--line); font-size: 12px; }
.nota-caja { padding: 10px 12px; background: var(--surface); border: 1px dashed var(--line); font-size: 12px; }

.lista-filas { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; }
.lista-filas li { border-bottom: 1px solid var(--line); }
.lista-filas li:last-child { border-bottom: 0; }
.fila-enlace { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 16px; color: var(--ink); text-decoration: none; }
.fila-enlace:hover { color: var(--ink); background: var(--bg); }
.desde-820 { display: none; }
@media (min-width: 820px) { .desde-820 { display: block; } .hasta-819 { display: none; } }
.desde-1024 { display: none; }
@media (min-width: 1024px) { .desde-1024 { display: block; } .hasta-1023 { display: none; } }

/* ---------- botones y campos ---------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 2px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.boton-principal { background: var(--accion-bg); color: var(--accion-ink); border-color: var(--accion-borde); }
.boton-principal:hover { color: var(--accion-ink); background: var(--accion-hover); }
.boton-accion { background: var(--amarillo); color: var(--on-accent); }
.boton-accion:hover { color: var(--on-accent); background: #E0A904; }
.boton-borde { background: var(--surface); color: var(--ink); border-color: var(--ink); }
.boton-suave { background: var(--surface); color: var(--ink); border-color: var(--line); }
.boton-peligro { background: var(--led-rojo); color: #FFFFFF; }
.boton-peligro-borde { background: var(--surface); color: var(--danger-ink); border-color: var(--danger-ink); }
.boton-chico { min-height: 44px; padding: 0 12px; font-size: 13px; }
.boton-grande { width: 100%; min-height: 52px; font-size: 16px; }
.boton:disabled, .boton-bloqueado { background: var(--track); color: var(--ink-muted); border-color: transparent; cursor: not-allowed; }
.botones-chicos { display: flex; gap: 8px; flex-wrap: wrap; }
.enlace-accion { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 14px; font-weight: 600; text-decoration: none; }
/* Un boton que se ve como enlace (el codigo del carrete, que abre su historial). */
.boton-enlace {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0; background: none; border: 0;
  color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.boton-enlace:hover { color: var(--ink-muted); }
.filtros { display: flex; gap: 8px; flex-wrap: wrap; }
.filtro {
  min-height: 44px; padding: 0 14px; background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  border-radius: 2px; font-size: 13px; cursor: pointer;
}
.filtro[aria-pressed="true"] { background: var(--accion-bg); color: var(--accion-ink); border-color: var(--accion-borde); font-weight: 600; }

input[type="text"], input[type="number"], input[type="search"], input[type="date"], input[type="password"],
input[type="email"], select {
  min-height: 44px; padding: 0 12px; background: var(--surface); color: var(--ink);
  border: 1px solid var(--border-control); border-radius: 2px; min-width: 0; width: 100%;
}
textarea {
  min-height: 64px; padding: 10px 12px; background: var(--surface); color: var(--ink);
  border: 1px solid var(--border-control); border-radius: 2px; width: 100%; resize: vertical;
}
input[type="file"] {
  min-height: 44px; padding: 8px; background: var(--bg); color: var(--ink); border: 1px dashed var(--border-control);
  border-radius: 2px; width: 100%; min-width: 0;
}
/* iOS acerca la pagina al tocar un campo con letra de menos de 16 px (README, Decisiones). */
@media (pointer: coarse) {
  input, select, textarea { font-size: 16px; }
}
.campo { display: flex; flex-direction: column; gap: 4px; }
.casilla { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 10px 12px; background: var(--bg); cursor: pointer; }
.casilla input { width: 22px; height: 22px; margin: 0; accent-color: var(--ink); flex-shrink: 0; }
.campos-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.campo-en-linea { display: flex; align-items: center; gap: 8px; }
.campo-en-linea select { width: auto; }
.campo-en-linea input[type="search"] { width: 220px; }
/* Periodo, familia y buscador de la Cola: se acomodan en renglones si no caben. */
.controles { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.forma { display: flex; flex-direction: column; gap: 12px; }
.forma-en-linea { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.forma-en-linea label { display: flex; flex-direction: column; gap: 4px; }
.forma-en-linea input[type="number"] { width: 110px; }

/* ---------- tablas ---------- */

/* position: relative para que el texto .oculto (position: absolute) quede adentro del scroll: sin
   eso se sale, ensancha la pagina y en el celular el navegador la aleja y las pestanas quedan fuera. */
.tabla-caja { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: 2px; }
.tabla { width: 100%; border-collapse: collapse; background: var(--surface); font-size: 14px; }
.tabla th {
  padding: 12px 16px; text-align: left; background: var(--bg); border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted);
  white-space: nowrap;
}
.tabla td { padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla .num { text-align: right; }
.tabla-compacta th, .tabla-compacta td { padding: 10px 12px; }
.tabla .mono, .tabla .etiqueta { white-space: nowrap; }
/* Un enlace dentro de una tabla o tarjeta es un objetivo tactil: 44 px. */
.tabla a, .lista-tarjetas a, .tarjeta-chica a.mono, a.mono, a.bloque, .lista-carretes a { display: inline-flex; align-items: center; min-height: 44px; }
.tabla .botones-chicos { flex-wrap: nowrap; }
.tabla .botones-apilados { flex-direction: column; align-items: stretch; }
.celda-restante { min-width: 140px; }
.celda-restante .progreso { margin-top: 6px; }
.solo-angosto { display: none; }
.lista-tarjetas { list-style: none; margin: 0; padding: 0; flex-direction: column; gap: 12px; }
.lista-tarjetas .tarjeta > .boton { align-self: flex-start; }
.lista-carretes {
  list-style: none; margin: 0; padding: 0; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 4px;
}
.lista-carretes li { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 14px; }
.lista-carretes li:last-child { border-bottom: 0; }
.lista-carretes .codigo-carrete { font-size: 15px; }
.lista-carretes .boton-chico { min-height: 44px; }
.fila-barra { display: flex; align-items: center; gap: 10px; }
.fila-barra .progreso { flex-grow: 1; min-width: 0; }
.fila-barra > span { flex-shrink: 0; white-space: nowrap; }

/* ---------- validacion, detalle y material ---------- */

.encabezado-alto { align-items: flex-start; padding-top: 20px; padding-bottom: 20px; }
.rejilla-validacion { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; align-items: start; }
.rejilla-detalle { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: start; }
.rejilla-material { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.columna.ancha { gap: 24px; }
.rejilla-validacion > .aviso-error, .rejilla-detalle > .aviso-error { grid-column: 1 / -1; }
.opcion {
  width: 100%; text-align: left; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 4px; cursor: pointer; color: var(--ink);
}
.opcion { min-height: 56px; }
.opcion[aria-pressed="true"] { border: 2px solid var(--ink); padding: 13px 15px; }
.fila-opcion { display: flex; align-items: center; gap: 10px; width: 100%; }
.sangria { padding-left: 22px; }
.chip-solido {
  display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 2px; font-family: var(--font-mono);
  font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; background: var(--solid); color: var(--on-solid);
}
.revisiones { list-style: none; margin: 0; padding: 0; }
.revision { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.marca-revision {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%;
  font-family: var(--font-mono); font-size: 13px;
}
.marca-revision.bien { background: var(--led-verde); color: #FFFFFF; }
.marca-revision.mal { background: var(--led-rojo); color: #FFFFFF; }
.marca-revision.no-aplica { border: 1px dashed var(--edge); color: var(--ink-muted); }
.codigo-peligro {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 2px; background: var(--danger-bg);
  color: var(--danger-ink-strong); font-size: 11px; font-weight: 600; white-space: nowrap;
}
.final-revision { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; }
.enviado { display: flex; align-items: center; gap: 12px; padding: 16px; border: 2px solid var(--led-azul); border-radius: 4px; }
.paso { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line-soft); flex-wrap: wrap; }
.eventos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.plegable > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; cursor: pointer; list-style: none; }
.plegable > summary::-webkit-details-marker { display: none; }
.plegable[open] > summary { margin-bottom: 8px; }
.eventos li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.vida { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.vida li { display: flex; align-items: center; gap: 12px; }
.bloque-rastreo { padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
/* Al saltar al historial, que las pestanas fijas de la tablet no tapen su titulo. */
[data-material-lado] > section { scroll-margin-top: 80px; }

/* ---------- cotizaciones y menu completo ---------- */

.rejilla-cotizar { display: grid; grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr); gap: 24px; align-items: start; }
.rejilla-cotizar > .columna { scroll-margin-top: 80px; }
.rejilla-cotizar [data-accion="mas-filas"] { align-self: flex-start; }
.panel-accion { border: 2px solid var(--ink); padding: 19px; }
.desglose { display: flex; flex-direction: column; }
.desglose-fila { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.desglose-suma { border-bottom-color: var(--line-strong); }
.desglose-total { font-size: 17px; font-weight: 600; border-bottom: 0; }
.lista-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-width: 560px; }
.opcion-menu {
  display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 16px; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 4px; text-decoration: none; font-size: 16px; font-weight: 600;
}
.opcion-menu > span:first-of-type { flex-grow: 1; }
a.opcion-menu:hover, button.opcion-menu:hover { border-color: var(--ink); color: var(--ink); }
button.opcion-menu { width: 100%; text-align: left; cursor: pointer; }
.opcion-proxima { color: var(--ink-muted); font-weight: 400; cursor: default; }

/* ---------- control de calidad ---------- */

/* En escritorio, las listas a la izquierda y la inspeccion a la derecha; en una columna, la
   inspeccion va despues de "Por inspeccionar". */
.rejilla-calidad {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); grid-template-areas: "lista inspeccion" "otros inspeccion";
  grid-template-rows: auto 1fr; gap: 24px; align-items: start;
}
.cal-lista { grid-area: lista; }
.cal-inspeccion { grid-area: inspeccion; }
.cal-otros { grid-area: otros; }
.rejilla-calidad > .columna { scroll-margin-top: 80px; }
.rejilla-calidad .opcion .etiqueta { flex-shrink: 0; }
.panel-inspeccion h3 { font-family: var(--font-sans); font-stretch: 100%; font-size: 15px; font-weight: 600; margin: 0; }
.cotas { display: flex; flex-direction: column; gap: 8px; }
.cota { margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 2px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cota-cabeza { display: flex; align-items: flex-end; gap: 10px; }
.cota-resultado { min-height: 44px; display: flex; align-items: center; }
.cota-medidas { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.cota-medidas input { padding: 0 8px; }
input[data-marca="cerca"] { background: var(--led-amarillo); color: #1D2125; font-weight: 600; }
input[data-marca="fuera"] { background: var(--danger-bg); color: var(--danger-ink-strong); border-color: var(--danger-ink); font-weight: 600; }
.lista-visual { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.lista-visual legend { grid-column: 1 / -1; }
.caja-rechazo { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 2px solid var(--danger-ink); border-radius: 4px; }
.final-inspeccion { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.botones-inspeccion { display: flex; gap: 8px; flex-wrap: wrap; }
.aviso-hecho { display: flex; align-items: center; gap: 12px; padding: 16px; border: 2px solid var(--ink); border-radius: 4px; flex-wrap: wrap; }
.eventos li.anulada > span:last-child { color: var(--ink-muted); text-decoration: line-through; }

/* ---------- desempeno ---------- */

.rejilla-desempeno { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.rejilla-desempeno-2 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.cat-imprimiendo { background: var(--led-azul); }
.cat-terminada { background: var(--led-verde); }
.cat-pausada { background: var(--led-amarillo); }
.cat-atencion { background: var(--led-rojo); }
.cat-libre { background: var(--track); }
.cat-fuera_servicio { background: #5E6873; }
.cat-sin_conexion { background: repeating-linear-gradient(135deg, var(--edge-soft) 0 3px, transparent 3px 7px); }
.muestra { display: inline-block; width: 12px; height: 12px; border-radius: 2px; flex-shrink: 0; }
.muestra.cat-pausada { box-shadow: inset 0 0 0 1px #1D2125; }
.filas-tiempo { display: flex; flex-direction: column; gap: 10px; }
.fila-tiempo { display: grid; grid-template-columns: 80px minmax(0, 1fr) 52px; gap: 12px; align-items: center; }
.fila-tiempo .num { text-align: right; }
.barra-apilada { display: flex; gap: 2px; height: 22px; border-radius: 2px; overflow: hidden; background: var(--sunken); }
.segmento { height: 100%; min-width: 2px; }
.hallazgos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.hallazgos li { display: flex; flex-direction: column; gap: 6px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.hallazgos li:first-child { padding-top: 0; }
.hallazgos li:last-child { border-bottom: 0; padding-bottom: 0; }
.grafica { display: flex; gap: 8px; height: 200px; }
.grafica-eje { display: flex; flex-direction: column; justify-content: space-between; width: 36px; font-size: 11px; color: var(--ink-muted); text-align: right; }
.grafica-barras {
  flex-grow: 1; display: flex; gap: 2px; align-items: flex-end; border-bottom: 1px solid var(--edge);
  background: linear-gradient(var(--line-soft) 1px, transparent 1px) 0 0 / 100% 50%;
}
.columna-barra { flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: flex-end; }
.barra-dia { width: 100%; background: var(--bar); border-radius: 3px 3px 0 0; }
.grafica-fechas { display: flex; justify-content: space-between; padding-left: 44px; font-size: 11px; }
.barras-causa { display: flex; flex-direction: column; gap: 14px; }
.barra-causa, .barra-utilizacion { flex-grow: 1; height: 14px; background: var(--sunken); }
.barra-utilizacion { height: 8px; max-width: 120px; }
.barra-causa-llena, .barra-utilizacion-llena { height: 100%; width: 0; background: var(--solid); border-radius: 0 4px 4px 0; }
.texto-alerta { color: var(--danger-ink); font-weight: 600; }
.texto-alerta svg { vertical-align: -2px; margin-right: 4px; }

/* ---------- avisos y dialogos ---------- */

.aviso-error {
  padding: 12px 16px; background: var(--danger-bg); color: var(--danger-ink-strong); border: 1px solid var(--danger-ink); border-radius: 4px;
}
.aviso {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 200%); z-index: 40; max-width: min(560px, calc(100vw - 32px));
  padding: 12px 16px; border-radius: 4px; background: var(--solid); color: var(--on-solid); font-weight: 600;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); transition: transform 0.2s ease; visibility: hidden;
}
.aviso.visible { transform: translate(-50%, 0); visibility: visible; }
.aviso-error.aviso { background: var(--led-rojo); color: #FFFFFF; border: 0; }
@media (prefers-reduced-motion: reduce) { .aviso { transition: none; } }
.dialogo {
  border: 1px solid var(--line); border-radius: 4px; padding: 0; background: var(--surface); color: var(--ink);
  width: min(460px, calc(100vw - 32px));
}
.dialogo::backdrop { background: rgba(17, 20, 23, 0.6); }
.dialogo-cuerpo { padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.dialogo-sub { color: var(--ink-muted); font-size: 12px; }
.dialogo-botones { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.lista-revision { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 4px; }
.lista-revision legend { margin-bottom: 6px; }
.lista-revision label { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 12px; background: var(--bg); cursor: pointer; font-size: 15px; }
.lista-revision input { width: 22px; height: 22px; margin: 0; accent-color: var(--ink); flex-shrink: 0; }

/* ---------- mantenimiento y fallas ---------- */

.dialogo-largo { max-height: calc(100dvh - 32px); overflow-y: auto; }
.lista-revision label.opcion-larga, .lista-piezas label { align-items: flex-start; padding: 10px 12px; }
.opcion-larga input, .lista-piezas input { margin-top: 2px; }
.opcion-larga.apagada { cursor: not-allowed; color: var(--ink-muted); }
.lista-piezas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.lista-niveles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.lista-niveles li { display: flex; flex-direction: column; gap: 6px; }
.lista-tareas { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }

/* ---------- celular: pendientes y cambio de carrete ---------- */

.contenido-movil { padding: 16px; display: flex; flex-direction: column; gap: 16px; max-width: 520px; margin: 0 auto; }
.tarjeta-grande { gap: 14px; }
.tarjeta-hecha { border: 2px solid var(--ink); }
.tarjeta-chica { gap: 8px; }
.tarjeta-chica .barra-led { height: 4px; }
.paso-tarjeta h2 { font-size: 17px; font-family: var(--font-sans); font-stretch: 100%; font-weight: 600; }
.paso-numero {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%;
  background: var(--solid); color: var(--on-solid); font-family: var(--font-mono); font-size: 14px; font-weight: 600;
}
.paso-numero.hecho { background: var(--led-verde); color: #FFFFFF; }
.paso-numero.apagado { background: var(--edge-soft); color: #FFFFFF; }
.sangria-paso { padding-left: 40px; gap: 6px; }
.visor {
  position: relative; min-height: 180px; background: var(--solid); border-radius: 4px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; color: var(--on-solid); font-size: 14px; overflow: hidden;
}
.visor video { width: 100%; max-height: 320px; object-fit: cover; }
.visor-apagado { outline: 3px solid var(--amarillo); outline-offset: -18px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 8px; background: var(--bg); border-radius: 2px; font-size: 12px; }
.chip-bien svg { color: var(--led-verde); }
.chip-mal { background: var(--danger-bg); color: var(--danger-ink-strong); }
.lista-resultado { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }

/* La TV va sola: sin menu. */
.modo-solo .marco { display: block; }
.modo-solo .lateral, .modo-solo .cajon, .modo-solo .barra-menu { display: none !important; }

/* ---------- vista de planta (TV): siempre oscura ---------- */

.tv { min-height: 100vh; display: flex; flex-direction: column; background: #111417; color: #F2F3F4; }
.tv h1, .tv h2 { color: #F2F3F4; }
.tv-cabeza {
  min-height: 96px; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 0 40px;
  background: #1D2125; border-bottom: 1px solid #2E343A; flex-wrap: wrap;
}
.tv-cabeza h1 { font-size: 30px; }
.tv-sub { font-size: 16px; color: #9AA3AD; display: inline-flex; align-items: center; gap: 6px; }
.tv-leyenda { display: flex; align-items: center; gap: 28px; font-size: 20px; flex-wrap: wrap; }
.tv-leyenda > span { display: inline-flex; align-items: center; gap: 10px; }
.tv-leyenda .punto.grande { width: 16px; height: 16px; }
.tv-hora { font-size: 48px; font-weight: 600; line-height: 1; }
.tv-cuerpo { flex-grow: 1; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; padding: 32px 40px; }
/* Dos filas como en el mockup (8 impresoras); con mas, siguen hacia abajo. */
.tv-rejilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 24px; min-height: 0; }
.tv-rejilla[data-columnas="1"] { grid-template-columns: minmax(0, 1fr); }
.tv-rejilla[data-columnas="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tv-rejilla[data-columnas="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tv-rejilla[data-columnas="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tv-rejilla[data-columnas="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.tv-tile { background: #1D2125; border: 1px solid #2E343A; border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.tv-tile-verde { border: 2px solid var(--led-verde); }
.tv-banda {
  height: 60px; flex-shrink: 0; display: flex; align-items: center; gap: 12px; padding: 0 24px; background: var(--led); color: var(--led-texto);
  font-family: var(--font-mono); font-size: 22px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}
.tv-banda.led-gris { background: #2E343A; color: #F2F3F4; }
.tv-banda.led-punteado { background: transparent; color: #9AA3AD; border-bottom: 2px dashed #5E6873; }
.tv-contenido { flex-grow: 1; padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 10px; }
.tv-id { font-size: clamp(34px, 2.6vw, 52px); font-weight: 600; line-height: 1; }
.tv-trabajo { font-size: clamp(18px, 1.3vw, 26px); font-weight: 600; }
.tv-texto { font-size: clamp(16px, 1.15vw, 22px); line-height: 1.35; }
.tv-siguiente { color: #9AA3AD; }
.tv-pie { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.tv-grande { font-size: clamp(32px, 2.4vw, 48px); font-weight: 600; line-height: 1; }
.tv-progreso { height: 14px; background: #2E343A; }
.tv-lado { display: flex; flex-direction: column; gap: 16px; background: #1D2125; border: 1px solid #2E343A; border-radius: 4px; padding: 24px; }
.tv-lado h2 { font-size: 24px; }
.tv-cola-total { margin: -8px 0 0; font-size: 18px; color: #F2F3F4; flex-shrink: 0; }
.tv-cola { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 18px; flex: 0 1 auto; min-height: 0; overflow: hidden; }
.tv-cola li { display: flex; flex-direction: column; gap: 2px; padding-bottom: 12px; border-bottom: 1px solid #2E343A; }
.tv-hoy { margin-top: auto; flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; }
.tv-hoy .rotulo { color: #9AA3AD; font-size: 14px; }
.tv-vacio { padding: 40px; font-size: 24px; color: #9AA3AD; }
/* En la pantalla de la planta nada se sale: las filas reparten la altura. */
@media (min-width: 1024px) { .tv { height: 100vh; overflow: hidden; } .tv-cuerpo { min-height: 0; } .tv-lado { min-height: 0; overflow: hidden; } }

/* Pendientes en el escritorio: la tarjeta de la cama a la izquierda y lo demas en rejilla a la derecha. */
.rejilla-chicas { display: grid; gap: 12px; }
@media (min-width: 1024px) {
  .contenido-pendientes { max-width: none; padding: 32px; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 24px; }
  .contenido-pendientes > .tarjeta-grande { flex: 0 1 560px; }
  .contenido-pendientes > .seccion { flex: 1 1 480px; }
  .contenido-pendientes > .vacio, .contenido-pendientes > .aviso-error { flex-basis: 100%; }
  .rejilla-chicas { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
}

/* La tabla de carretes necesita unos 700 px: junto al menu lateral, los formularios solo caben a
   su derecha desde 1380 px. Mas angosto van debajo. */
@media (max-width: 1379px) {
  .rejilla-material, .rejilla-cotizar { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- desde 1024 px: lateral fijo y barra clara ---------- */

@media (min-width: 1024px) {
  .marco { display: grid; grid-template-columns: 240px minmax(0, 1fr); }
  .lateral {
    position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--grafito); color: #F2F3F4;
    display: flex; flex-direction: column; gap: 32px; padding: 24px 16px;
  }
  .cajon { display: none; }
  .barra-menu { display: none; }
  .barra { background: var(--surface); color: var(--ink); border-bottom: 1px solid var(--line); padding-left: 24px; padding-right: 24px; }
  .barra-sub { color: var(--ink-muted); }
  .barra-acciones { padding: 12px 24px; }
  .barra-accion { position: sticky; left: auto; right: auto; margin-top: 8px; }
  .barra-accion-botones { justify-content: flex-end; }
  .barra-accion-botones > * { flex: 0 0 auto; min-width: 200px; }
  .vista:has(.barra-accion) { padding-bottom: 0; }
  body:has(.barra-accion) .aviso { bottom: 24px; }
}

@media (max-width: 1023px) {
  .contenido { padding: 24px; gap: 24px; }
  .encabezado { padding: 16px 24px; }
  .kpis, .kpis-3, .kpis-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rejilla-desempeno, .rejilla-desempeno-2 { grid-template-columns: minmax(0, 1fr); }
  .rejilla-3, .rejilla-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rejilla-validacion, .rejilla-detalle { grid-template-columns: minmax(0, 1fr); }
  .rejilla-calidad { grid-template-columns: minmax(0, 1fr); grid-template-areas: "lista" "inspeccion" "otros"; grid-template-rows: none; }
  .datos-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tv-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .tv-rejilla[data-columnas] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
}

/* La cola tiene 11 columnas: por debajo de 1024 px va en tarjetas. */
@media (max-width: 1023px) {
  .solo-ancho { display: none; }
  .solo-angosto { display: flex; }
}

/* ---------- celular: una columna, tarjetas en lugar de tablas ---------- */

@media (max-width: 699px) {
  body { font-size: 15px; }
  .contenido { padding: 16px; gap: 16px; }
  .encabezado { padding: 14px 16px; min-height: 0; }
  h1 { font-size: 22px; }
  .kpis-3, .kpis-5 { grid-template-columns: minmax(0, 1fr); }
  .kpi { padding: 12px 14px; }
  .kpi-valor { font-size: 24px; }
  .kpi-nota { font-size: 11px; }
  .rejilla-3, .rejilla-4 { grid-template-columns: minmax(0, 1fr); }
  .datos-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .campos-2 { grid-template-columns: minmax(0, 1fr); }
  .lista-visual { grid-template-columns: minmax(0, 1fr); }
  .botones-inspeccion, .botones-inspeccion .boton { width: 100%; }
  .filtros { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .filtro { flex-shrink: 0; }
  .eventos li { grid-template-columns: 88px minmax(0, 1fr); }
  .tv-cabeza { padding: 16px; }
  .tv-cuerpo { padding: 16px; }
  .tv-rejilla[data-columnas] { grid-template-columns: minmax(0, 1fr); }
  .tv-id { font-size: 34px; }
}

/* ---------- miniaturas de los disenos del portal ---------- */

.pieza-fila { display: inline-flex; align-items: center; gap: 10px; }
.miniatura { width: 40px; height: 40px; flex: none; object-fit: contain; background: var(--sunken); border: 1px solid var(--line); border-radius: 4px; }
.miniatura-grande { width: 160px; height: 160px; }
.pieza-detalle { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }

/* ---------- etiquetas QR: la hoja carta de 10 (Avery 5163) y la ficha del carrete ---------- */

.lista-elegir { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; }
.lista-elegir li { border-bottom: 1px solid var(--line); }
.lista-elegir li:last-child { border-bottom: 0; }
.elegir { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 16px; cursor: pointer; }
.elegir input { width: 22px; height: 22px; margin: 0; accent-color: var(--ink); flex-shrink: 0; }
.fila-hoja { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.lista-pasos { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.previa-nav { padding: 4px 0; }
.fieldset-plano { border: 0; margin: 0; padding: 0; min-width: 0; }
.fila-boton { width: 100%; background: none; border: 0; text-align: left; font: inherit; cursor: pointer; }
.fila-boton:disabled { cursor: not-allowed; opacity: 0.55; }
.opcion-menu:disabled { cursor: not-allowed; color: var(--ink-muted); background: var(--sunken); }
.opcion-peligro { color: var(--danger-ink); border-color: var(--danger-ink); }
button.opcion-menu { min-height: 56px; }

/* La unidad `--in` vale una pulgada de la hoja: en pantalla es el ancho del contenedor entre 8.5 (la hoja
   se ajusta a la pantalla) y al imprimir es 1in de verdad. Margenes de la 5163: 0.5 in arriba y abajo,
   0.1555 in a los lados y 0.189 in entre las dos columnas. */
.hojas, .etq-solo { container-type: inline-size; }
.hojas { display: flex; flex-direction: column; gap: 16px; max-width: 560px; }
.hoja {
  --in: calc(100cqw / 8.5);
  width: 100%; aspect-ratio: 8.5 / 11; box-sizing: border-box; background: #FFFFFF; color: #111417; border: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(2, calc(4 * var(--in))); grid-template-rows: repeat(5, calc(2 * var(--in)));
  column-gap: calc(0.189 * var(--in)); padding: calc(0.5 * var(--in)) calc(0.1555 * var(--in)); overflow: hidden;
}
.etq-solo { --in: calc(100cqw / 4); }
.etq-solo .etq { --in: calc(100cqw / 4); }
.etq {
  box-sizing: border-box; width: calc(4 * var(--in)); height: calc(2 * var(--in)); display: flex; align-items: center;
  gap: calc(0.1 * var(--in)); padding: calc(0.08 * var(--in)) calc(0.1 * var(--in)) calc(0.08 * var(--in)) 0; overflow: hidden;
  outline: 1px dashed #C4C9CE; outline-offset: -1px; background: #FFFFFF; color: #111417;
}
.etq-solo .etq { width: 100%; border: 1px solid var(--line); outline: 0; }
.etq-qr { flex: none; width: calc(1.75 * var(--in)); height: calc(1.75 * var(--in)); display: block; }
.etq-texto { min-width: 0; flex-grow: 1; display: flex; flex-direction: column; gap: calc(0.025 * var(--in)); }
.etq-codigo { font-family: var(--font-mono); font-size: calc(0.24 * var(--in)); line-height: 1.15; font-weight: 600; letter-spacing: -0.01em; }
.etq-linea { font-size: calc(0.125 * var(--in)); line-height: 1.2; overflow-wrap: anywhere; }
.etq-impresora .etq-codigo { font-size: calc(0.26 * var(--in)); }
.etq-aviso {
  align-self: flex-start; padding: calc(0.015 * var(--in)) calc(0.05 * var(--in)); background: #111417; color: #FFFFFF; font-family: var(--font-mono);
  font-size: calc(0.085 * var(--in)); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
}
.etq-url { font-family: var(--font-mono); font-size: calc(0.07 * var(--in)); line-height: 1.2; color: #4A535C; overflow-wrap: anywhere; }
.etq-libre { outline-color: transparent; }

@media print {
  @page { size: letter; margin: 0; }
  /* Solo las hojas: nada del panel. El QR va negro sobre blanco. */
  html, body { background: #FFFFFF !important; }
  body * { visibility: hidden; }
  .hojas, .hojas * { visibility: visible; }
  .hojas { position: absolute; left: 0; top: 0; display: block; container-type: normal; max-width: none; }
  .desde-820, .hojas-pantalla { display: block !important; }
  .hasta-819 { display: none !important; }
  .hoja { --in: 1in; width: 8.5in; height: 11in; aspect-ratio: auto; border: 0; break-after: page; page-break-after: always; }
  .etq { outline: 0; }
}

/* ---------- finanzas ---------- */

.kpi-utilidad .kpi-valor { font-size: 34px; }
.pestanas a.pestana { text-decoration: none; }
.pestanas a.pestana:hover { color: var(--ink); }
.pestanas a.pestana[aria-current="page"] { color: var(--ink); border-bottom-color: var(--amarillo); }
.texto-alerta { color: var(--danger-ink); font-weight: 600; }
.tachado { text-decoration: line-through; color: var(--ink-muted); }
.fila-gasto { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 16px; }
.fila-gasto.anulado { background: var(--bg); }
.fila-gasto .botones-chicos { justify-content: flex-end; }
.subir { position: relative; overflow: hidden; cursor: pointer; }
.subir:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Los dos colores de la grafica (pasan el contraste sobre la tarjeta en claro y en oscuro). */
.muestra.serie1, .gd-barra.serie1 { background: var(--serie1); }
.muestra.serie2, .gd-barra.serie2 { background: var(--serie2); }
.grafica-doble { display: flex; gap: 6px; height: 180px; padding-bottom: 22px; border-bottom: 1px solid var(--edge); }
.gd-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; position: relative; }
.gd-barras { width: 100%; flex-grow: 1; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.gd-barra { width: 42%; max-width: 28px; min-height: 0; border-radius: 3px 3px 0 0; }
.gd-col > span { position: absolute; bottom: -22px; }
.barras-categoria { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.barras-categoria li { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.bc-barra { height: 14px; background: var(--sunken); }
.bc-llena { display: block; height: 100%; width: 0; background: var(--serie1); border-radius: 0 4px 4px 0; }

/* Registrar gasto: categorias y de donde salio como chips (radios de 44 px). */
.chips-elegir { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-elegir { position: relative; }
.chip-elegir input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip-elegir span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; background: var(--surface); border: 1px solid var(--border-control);
  border-radius: 2px; font-size: 14px;
}
.chip-elegir input:checked + span { background: var(--accion-bg); color: var(--accion-ink); border-color: var(--accion-borde); font-weight: 600; }
.chip-elegir input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- granja en vivo: tablero por grupos, panel con pestanas y linea de tiempo ---------- */

/* La barra de arriba es pegajosa: las cabeceras de grupo se pegan debajo de ella. */
:root { --barra-alto: 59px; }
@media (min-width: 1024px) { :root { --barra-alto: 57px; } }

.contenido-granja { gap: 24px; }
.cuerpo-granja { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.granja-principal { container: tablero / inline-size; min-width: 0; }
.granja-principal h2 .nota { font-family: var(--font-mono); font-weight: 400; font-stretch: 100%; }
a.kpi { color: inherit; text-decoration: none; }
a.kpi:hover { border-color: var(--border-control); }
a.kpi.kpi-acento:hover { border-color: var(--grafito); }

/* El tablero: cabecera de columnas, cabeceras de grupo pegajosas y una fila por impresora. overflow: clip
   deja pegar las cabeceras (hidden no). */
.tablero { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; overflow: clip; }
.grupo-cab {
  position: sticky; top: var(--barra-alto); z-index: 2; display: flex; align-items: center; gap: 10px; padding: 8px 16px;
  background: var(--sunken); border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; min-height: 40px;
}
.grupo-cab.atencion { background: var(--amarillo); color: var(--on-accent); }
.grupo-cab .nota { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 12px; }
.grupo-cab.atencion .nota { color: var(--on-accent); }
/* Las columnas dependen del ancho del tablero (no de la pantalla): junto al menu de 240 px y al panel de
   440 px le quedan menos pixeles. Completo desde 960 px de tablero; compacto en tres renglones entre 640 y
   959; apilado con el boton al ancho debajo de 640. */
.cab-filas, .fila-imp {
  display: grid; grid-template-columns: minmax(140px, 0.9fr) minmax(130px, 0.8fr) minmax(170px, 1.5fr) minmax(130px, 1fr) minmax(140px, 1fr) auto;
  gap: 12px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line);
}
@container tablero (min-width: 1200px) {
  .cab-filas, .fila-imp { grid-template-columns: 190px 160px minmax(220px, 1.5fr) minmax(170px, 1fr) minmax(170px, 1fr) auto; gap: 16px; }
}
.cab-filas { padding: 8px 16px; }
.cab-filas .accion { text-align: right; }
.fila-imp { min-height: 68px; }
.fila-imp.abierta { background: var(--sunken); border-bottom-color: transparent; }
.tablero > :last-child { border-bottom: 0; }
.celda { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.celda .chico { font-size: 12px; }
.celda .progreso { margin: 2px 0; }
.celda-id { flex-direction: row; align-items: center; gap: 10px; }
.celda-id .id { font-size: 15px; text-decoration: none; }
.celda-id .nota { font-size: 12px; }
.expandir {
  width: 44px; height: 44px; flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 0;
  border: 1px solid var(--border-control); border-radius: 2px; background: transparent; color: var(--ink); cursor: pointer;
}
.expandir[aria-expanded="true"] { background: var(--surface); }
.expandir[aria-expanded="true"] svg { transform: rotate(180deg); }
.celda-accion { display: flex; justify-content: flex-end; min-width: 0; }
.celda-accion .boton { white-space: nowrap; }
.barra-fina .progreso { height: 4px; }
.detalle {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 12px 16px 16px 70px;
  background: var(--sunken); border-bottom: 1px solid var(--line);
}
.detalle .chico { font-size: 12px; }
.detalle .nota { font-size: 12px; }
.niveles-fila, .eventos-fila { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.eventos-fila li { display: flex; gap: 8px; }
.eventos-fila li > span:first-child { flex: none; min-width: 44px; }
.enlace-chico { font-size: 12px; min-height: 44px; }

/* Tablero de menos de 960 px (la tablet, o 1024 px junto al menu): filas compactas en tres renglones. */
@container tablero (max-width: 959px) {
  .cab-filas { display: none; }
  .fila-imp {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; row-gap: 10px;
    grid-template-areas: "id estado accion" "trabajo trabajo trabajo" "sig carrete carrete";
  }
  .celda-id { grid-area: id; } .celda-estado { grid-area: estado; } .celda-trabajo { grid-area: trabajo; }
  .celda-sig { grid-area: sig; } .celda-carrete { grid-area: carrete; } .celda-accion { grid-area: accion; }
  .detalle { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-left: 16px; }
}
/* Tablero de menos de 640 px (el celular): todo apilado y el boton al ancho. */
@container tablero (max-width: 639px) {
  .fila-imp { grid-template-columns: minmax(130px, auto) minmax(0, 1fr); grid-template-areas: "id estado" "trabajo trabajo" "sig sig" "carrete carrete" "accion accion"; }
  .celda-id .id { white-space: nowrap; }
  .celda-estado { align-items: flex-end; text-align: right; }
  .celda-estado .chico { white-space: normal; }
  .celda-accion { justify-content: stretch; }
  .celda-accion .boton, .celda-accion .enlace-accion { width: 100%; justify-content: center; }
  .detalle { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 699px) { .cuerpo-granja { gap: 24px; } }

/* El panel de la derecha: pestanas con los tokens de accion y su propio ancho (container query). */
.panel-lado { container: lado / inline-size; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pestanas-panel .pestanas { padding: 0; background: transparent; border-bottom: 0; gap: 8px; }
.pestanas-panel .pestana {
  min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 2px; color: var(--ink); background: var(--surface);
}
.pestanas-panel .pestana[aria-selected="true"] { background: var(--accion-bg); color: var(--accion-ink); border-color: var(--accion-borde); }
.pestanas-panel .pestana[aria-selected="true"] .pestana-cuenta { background: var(--amarillo); color: var(--on-accent); }
.lado-tabla { display: none; }
.lado-lista { display: block; }
@container lado (min-width: 760px) { .lado-tabla { display: block; } .lado-lista { display: none; } }
.lista-filas li.desde-1600 { display: none; }
@media (min-width: 1600px) { .lista-filas li.desde-1600 { display: list-item; } }

/* Terminadas hoy. */
.lista-term { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; }
.lista-term li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; padding: 8px 16px; border-bottom: 1px solid var(--line); align-items: center; min-height: 56px; }
.lista-term li:last-child { border-bottom: 0; }
.panel-terminadas h2 .nota { font-weight: 400; font-stretch: 100%; }

/* Desde 1600 px: tablero y panel de 440 px a la derecha; Terminadas hoy queda bajo el panel. */
@media (min-width: 1600px) {
  .cuerpo-granja { display: grid; grid-template-columns: minmax(0, 1fr) 440px; align-items: start; }
  .granja-principal { grid-row: span 2; }
  .panel-lado, .panel-terminadas { grid-column: 2; }
}
/* Desde 2400 px: tablero, panel de 480 px y Terminadas hoy de 420 px. */
@media (min-width: 2400px) {
  .cuerpo-granja { grid-template-columns: minmax(0, 1fr) 480px 420px; }
  .granja-principal { grid-row: auto; }
  .panel-terminadas { grid-column: 3; }
}

/* La linea de tiempo: eje con la hora, la linea "ahora" y una fila por impresora. Las tres ventanas se
   pintan y el ancho del panel escoge cual se ve. */
.lt { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.lt-v { display: none; }
.lt-v-4h { display: block; }
@container lado (min-width: 560px) { .lt-v-4h { display: none; } .lt-v-6h { display: block; } }
@container lado (min-width: 900px) { .lt-v-6h { display: none; } .lt-v-8h { display: block; } }
.lt-eje, .lt-fila { display: grid; grid-template-columns: 200px minmax(0, 1fr); border-bottom: 1px solid var(--line); }
.lt-eje { background: var(--sunken); }
.lt-fila:last-child { border-bottom: 0; }
.lt-izq { padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--line); min-width: 0; }
.lt-izq .id { font-size: 15px; text-decoration: none; }
.lt-izq .fila-entre { gap: 4px 8px; }
.lt-izq .id { white-space: nowrap; }
.lt-izq .nota { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-eje .lt-izq { justify-content: center; }
.lt-pista { position: relative; min-height: 72px; overflow: hidden; }
.lt-eje .lt-pista { min-height: 36px; }
.lt-tick { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--line-soft); }
.lt-tick span { position: absolute; top: 9px; left: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-muted); white-space: nowrap; }
.lt-ahora { position: absolute; top: 0; bottom: 0; border-left: 2px solid var(--ink); z-index: 3; }
.lt-ahora span {
  position: absolute; top: 6px; left: 6px; padding: 1px 6px; background: var(--ink); color: var(--bg);
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; white-space: nowrap;
}
.seg {
  position: absolute; top: 20px; height: 32px; display: flex; align-items: center; padding: 0 8px; border-radius: 2px;
  border: 1px solid transparent; font-family: var(--font-mono); font-size: 12px; color: var(--ink); white-space: nowrap; overflow: hidden;
}
.seg span { position: relative; z-index: 1; overflow: hidden; text-overflow: ellipsis; }
.seg i { position: absolute; left: 0; top: 0; bottom: 0; }
.seg-azul { background: var(--azul-tinte); border-color: var(--led-azul); }
.seg-azul i { background: var(--led-azul); opacity: 0.45; }
.seg-verde { background: var(--verde-tinte); border-color: var(--led-verde); }
.seg-ambar, .seg-amarillo { background: repeating-linear-gradient(135deg, var(--amarillo-tinte) 0 6px, transparent 6px 12px); border-color: var(--led-amarillo); }
.seg-rojo { background: repeating-linear-gradient(135deg, var(--rojo-tinte) 0 6px, transparent 6px 12px); border-color: var(--led-rojo); }
.seg-cola { border: 1px dashed var(--border-control); color: var(--ink-muted); background: var(--surface); }
.seg-punteado { border: 1px dashed var(--border-control); color: var(--ink-muted); background: repeating-linear-gradient(90deg, var(--line-soft) 0 8px, transparent 8px 14px); }
.lt-leyenda { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--ink-muted); }
.lt-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
:where(.lt-leyenda i) { width: 18px; height: 10px; border-radius: 1px; display: inline-block; border: 1px solid transparent; }
.lt-leyenda .seg-azul { border-color: var(--led-azul); }
@container lado (max-width: 559px) {
  .lt-eje, .lt-fila { grid-template-columns: minmax(0, 1fr); }
  .lt-eje .lt-izq { display: none; }
  .lt-izq { border-right: 0; padding-bottom: 4px; }
  .lt-pista { min-height: 60px; border-top: 1px dashed var(--line); }
  .lt-eje .lt-pista { border-top: 0; }
  .seg { top: 14px; }
}