/* ==========================================================================
   EQUIBANAH - sistema de diseno

   Herramienta de trabajo donde alguien resuelve treinta casos seguidos:
   densidad alta, cifras comparables de un vistazo, y que sea evidente que
   esta detenido y por que.

   Identidad: naranja EQUIBANAH sobre blanco. El naranja se reserva a la marca
   y a lo accionable; los estados no compiten con el. Rojo = bloqueo,
   amarillo = alerta, verde = aprobado, y los tres llevan siempre su palabra
   escrita: ninguna informacion viaja solo en el color.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* --- Neutros: gris apenas calido, para convivir con el naranja --- */
  --s0:   #ffffff;
  --s25:  #fcfbfa;
  --s50:  #f8f6f4;
  --s100: #f0edea;
  --s200: #e2ddd8;
  --s300: #c7c0b9;
  --s400: #9a938b;
  --s500: #726b64;
  --s600: #57514b;
  --s700: #403b36;
  --s800: #2b2724;
  --s900: #1b1815;
  --s950: #100e0c;

  /* --- Marca --- */
  --naranja:       #f26522;
  --naranja-vivo:  #ff7c3f;
  --naranja-hondo: #d4521a;
  --naranja-tinte: #fff3ec;
  --naranja-borde: #ffd8c4;
  --marca:       var(--naranja);
  --marca-vivo:  var(--naranja-hondo);
  --marca-tenue: var(--naranja-tinte);

  /* --- Estados --- */
  --peligro:     #d93a34;
  --peligro-bg:  #fdeeec;
  --peligro-bd:  #f7c9c5;
  --aviso:       #9a6d00;
  --aviso-bg:    #fdf6e3;
  --aviso-bd:    #edd9a4;
  --bien:        #16814f;
  --bien-bg:     #e8f6ef;
  --bien-bd:     #b4e0ca;

  /* --- Superficies --- */
  --fondo:       #f6f4f2;
  --panel:       var(--s0);
  --panel-alt:   var(--s50);
  --borde:       var(--s200);
  --borde-sutil: var(--s100);
  --texto:       #202020;
  --texto-2:     #475467;
  --texto-3:     #667085;
  --barra:       var(--s0);

  /* --- Vidrio: tarjetas y paneles grandes. Los controles chicos van solidos. --- */
  --vidrio:        rgba(255, 255, 255, .68);
  --vidrio-fuerte: rgba(255, 255, 255, .82);
  --vidrio-borde:  rgba(255, 255, 255, .72);
  --vidrio-blur:   18px;
  --sombra-vidrio: 0 8px 30px rgba(30, 40, 60, .08);
  --linea:         rgba(16, 24, 40, .07);   /* separadores suaves sobre vidrio */
  --linea-control: rgba(16, 24, 40, .12);   /* borde de controles */
  --linea-encabezado: rgba(16, 24, 40, .16); /* bajo el encabezado de tabla */

  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 24px; --e6: 32px; --e7: 48px;

  --r1: 8px; --r2: 10px; --r3: 10px; --r-full: 999px;
  --r-btn: 12px; --r-control: 14px; --r-tarjeta: 10px;   /* contenedores: esquinas apenas curvas */

  --sombra1: 0 1px 2px rgba(27,24,21,.04), 0 1px 3px rgba(27,24,21,.06);
  --sombra2: 0 4px 6px rgba(27,24,21,.04), 0 10px 24px rgba(27,24,21,.07);

  --fuente: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
            Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

  --transicion: 180ms cubic-bezier(.4, 0, .2, 1);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --fondo:       #100e0d;
    --panel:       #1a1715;
    --panel-alt:   #221e1b;
    --borde:       #35302b;
    --borde-sutil: #292420;
    --texto:       #f4f1ee;
    --texto-2:     #bdb5ad;
    --texto-3:     #978f87;
    --barra:       #16130f;
    --vidrio:        rgba(26, 23, 21, .72);
    --vidrio-fuerte: rgba(34, 30, 27, .86);
    --vidrio-borde:  rgba(255, 255, 255, .07);
    --sombra-vidrio: 0 8px 30px rgba(0, 0, 0, .35);
    --linea:         rgba(255, 255, 255, .07);
    --linea-control: rgba(255, 255, 255, .14);
    --linea-encabezado: rgba(255, 255, 255, .2);
    --naranja:       #ff8340;
    --naranja-vivo:  #ff9a62;
    --naranja-hondo: #ff8340;
    --naranja-tinte: #2e1a0f;
    --naranja-borde: #4a2a17;
    --peligro:     #f4908a;
    --peligro-bg:  #331715;
    --peligro-bd:  #5c2824;
    --aviso:       #e5c468;
    --aviso-bg:    #2d2611;
    --aviso-bd:    #51441d;
    --bien:        #5fc795;
    --bien-bg:     #112a1f;
    --bien-bd:     #244838;
  }
}

:root[data-theme="dark"] {
  --fondo:       #100e0d;
  --panel:       #1a1715;
  --panel-alt:   #221e1b;
  --borde:       #35302b;
  --borde-sutil: #292420;
  --texto:       #f4f1ee;
  --texto-2:     #bdb5ad;
  --texto-3:     #978f87;
  --barra:       #16130f;
    --vidrio:        rgba(26, 23, 21, .72);
    --vidrio-fuerte: rgba(34, 30, 27, .86);
    --vidrio-borde:  rgba(255, 255, 255, .07);
    --sombra-vidrio: 0 8px 30px rgba(0, 0, 0, .35);
    --linea:         rgba(255, 255, 255, .07);
    --linea-control: rgba(255, 255, 255, .14);
    --linea-encabezado: rgba(255, 255, 255, .2);
  --naranja:       #ff8340;
  --naranja-vivo:  #ff9a62;
  --naranja-hondo: #ff8340;
  --naranja-tinte: #2e1a0f;
  --naranja-borde: #4a2a17;
  --peligro:     #f4908a;
  --peligro-bg:  #331715;
  --peligro-bd:  #5c2824;
  --aviso:       #e5c468;
  --aviso-bg:    #2d2611;
  --aviso-bd:    #51441d;
  --bien:        #5fc795;
  --bien-bg:     #112a1f;
  --bien-bd:     #244838;
}

/* ========================================================================== */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Fondo industrial: atmosfera, no contenido. Va en una capa fija aparte
   (background-attachment: fixed falla en iOS) y detras de todo. */
/* Intensidad del fondo, en un solo lugar para afinarla:
   - desenfoque y saturacion: que la imagen sea atmosfera y no compita con
     los colores de estado;
   - velo: blanco mas denso en el centro (donde van las tablas) y suave en
     los extremos (donde la guia quiere ver la maquinaria). */
:root {
  --fondo-desenfoque: 5px;
  --fondo-saturacion: .6;
  --velo-centro: .32;
  --velo-borde: .04;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: url("/static/fondo.png") center / cover no-repeat;
  filter: blur(var(--fondo-desenfoque)) saturate(var(--fondo-saturacion));
  /* Un poco mas grande: el desenfoque deja un halo claro en los bordes. */
  transform: scale(1.06);
  pointer-events: none;
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 60% 70% at 55% 50%,
    rgba(255, 255, 255, var(--velo-centro)) 0%,
    rgba(255, 255, 255, var(--velo-borde)) 100%);
  pointer-events: none;
}
/* En pantalla angosta la guia pide bajarle intensidad al decorado. */
@media (max-width: 768px) { body::before { opacity: .55; } }
/* La imagen es clara: en modo oscuro no se pone. */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] body::before, :root[data-theme="auto"] body::after { display: none; }
}
:root[data-theme="dark"] body::before, :root[data-theme="dark"] body::after { display: none; }

/* Las cifras se comparan en columna: ancho de digito fijo siempre. */
.num, .cifra, .medidor-val, .confianza-num, td.num, th.num, td.fecha {
  font-variant-numeric: tabular-nums;
}

a { color: var(--marca-vivo); }

/* Todo lo clicable lo dice con el cursor. */
button, .btn, summary, label.seg-op, [role="button"] { cursor: pointer; }
button:disabled, .btn:disabled { cursor: default; }

/* El foco nunca se quita: esta herramienta se opera con teclado. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--naranja);
  outline-offset: 2px;
}

.ic { flex: none; display: block; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

.oculto-visual {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Estructura ---------------------------------------------------------- */

.marco { display: flex; min-height: 100vh; }

/* Propuesta mientras se decide el negro de la guia (el logo trae partes
   negras): barra de vidrio, para que el fondo se vea tambien detras. */
.lateral {
  width: 244px; flex: 0 0 244px;
  background: rgba(255, 255, 255, .32);
  backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1);
  border-right: 1px solid rgba(255, 255, 255, .55);
  box-shadow: 4px 0 24px rgba(30, 40, 60, .05);
  z-index: 30;
  padding: var(--e5) var(--e3) var(--e4);
  display: flex; flex-direction: column; gap: var(--e5);
  position: sticky; top: 0; height: 100vh;
}

/* El logo de la empresa ya trae el nombre y el lema: no se le repite al lado. */
.marca-lockup { display: block; padding: var(--e2); }
.marca-lockup img {
  display: block; width: 100%; max-width: 172px; height: auto;
  margin-inline: auto;   /* centrado en la barra */
}

.menu { display: flex; flex-direction: column; gap: 2px; }
.menu a {
  display: flex; align-items: center; gap: 11px;
  min-height: 44px; padding: 0 var(--e3);
  border-radius: var(--r1);
  color: var(--texto-2); text-decoration: none;
  font-size: 14.5px; font-weight: 500;
  transition: background var(--transicion), color var(--transicion);
}
/* Mismo naranja tenue que el hover de las filas de la tabla. */
.menu a:hover { background: color-mix(in srgb, var(--naranja-tinte) 45%, transparent); color: var(--naranja-hondo); }
/* Al pasar, el nombre crece un poco: se siente el recorrido por el menu.
   Con transform y no con font-size, para que nada a su lado se corra. */
.menu a > .ic + span, .grupo-menu summary > .ic + span, .pestanas a > .ic + span {
  display: inline-block; transform-origin: left center;
  transition: transform var(--transicion);
}
.menu a:hover > .ic + span, .grupo-menu summary:hover > .ic + span,
.pestanas a:hover > .ic + span { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .menu a > .ic + span, .grupo-menu summary > .ic + span, .pestanas a > .ic + span { transition: none; }
}
/* Vista actual: la forma completa se ve con un tinte parejo; encima, el
   resplandor que nace en el borde derecho. */
.menu a.activo {
  background:
    radial-gradient(120% 140% at 100% 50%,
      color-mix(in srgb, var(--naranja) 30%, transparent) 0%,
      transparent 75%),
    color-mix(in srgb, var(--naranja) 10%, transparent);
  color: var(--naranja-hondo); font-weight: 600;
  border-radius: var(--r-control);
}
.menu a.activo .ic { color: var(--naranja); }
.menu a .cuenta {
  margin-left: auto; min-width: 24px; text-align: center;
  background: var(--naranja); color: #fff;
  font-size: 12px; font-weight: 700;
  padding: 2px 7px; border-radius: var(--r-full);
}
/* WhatsApp en la barra: el color del texto es el estado de la conexion.
   Gana tambien sobre el naranja de "activo": aqui manda si entran fotos. */
.menu a.enlace-wa.OK, .menu a.enlace-wa.OK .ic           { color: var(--bien); }
/* Rojo mas hondo que el de los estados: sobre el vidrio claro el normal se lavaba. */
.menu a.enlace-wa { --rojo-wa: #c01812; }
.menu a.enlace-wa.BLOQUEO, .menu a.enlace-wa.BLOQUEO .ic { color: var(--rojo-wa); font-weight: 600; }
.menu a.enlace-wa.ALERTA, .menu a.enlace-wa.ALERTA .ic   { color: var(--aviso); font-weight: 600; }
/* Punto de señal: late como un radar, una onda que sale y se desvanece.
   Es la unica animacion permanente de la herramienta, a pedido: la guia las
   evita, asi que se queda en este punto y se apaga con reduced-motion. */
.punto-wa {
  --color-punto: var(--rojo-wa);
  position: relative; margin-left: auto; width: 9px; height: 9px;
  border-radius: 50%; flex: none; background: var(--color-punto);
}
.punto-wa::before, .punto-wa::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--color-punto); opacity: 0;
  animation: radar-wa 2.4s cubic-bezier(.2, .6, .4, 1) infinite;
}
.punto-wa::after { animation-delay: 1.2s; }   /* segunda onda: pulso continuo */
@keyframes radar-wa {
  0%   { transform: scale(1);   opacity: .55; }
  100% { transform: scale(3.4); opacity: 0; }
}
.enlace-wa.OK .punto-wa     { --color-punto: var(--bien); }
.enlace-wa.ALERTA .punto-wa { --color-punto: var(--aviso); }
@media (prefers-reduced-motion: reduce) {
  .punto-wa::before, .punto-wa::after { animation: none; }
  .punto-wa { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-punto) 22%, transparent); }
}

/* --- Grupo desplegable (Configuracion) ---------------------------------- */
.grupo-menu summary {
  display: flex; align-items: center; gap: 11px;
  min-height: 44px; padding: 0 var(--e3); border-radius: var(--r-control);
  color: var(--texto-2); font-size: 14.5px; font-weight: 500;
  list-style: none; cursor: pointer; user-select: none;
  transition: background var(--transicion), color var(--transicion);
}
.grupo-menu summary::-webkit-details-marker { display: none; }
.grupo-menu summary:hover { background: color-mix(in srgb, var(--naranja-tinte) 45%, transparent); color: var(--naranja-hondo); }
.grupo-menu summary:focus-visible { outline: 2px solid var(--naranja); outline-offset: -2px; }
/* Abierto: el encabezado se marca con un fondo claro, como en la referencia. */
.grupo-menu[open] summary { background: rgba(255, 255, 255, .6); color: var(--texto); }
/* Estando en una de sus vistas, el encabezado lleva el naranja de "activo". */
.grupo-menu.en-grupo summary { color: var(--naranja-hondo); font-weight: 600; }
.grupo-menu.en-grupo summary .ic { color: var(--naranja); }
.grupo-menu .flecha { margin-left: auto; display: grid; transition: transform var(--transicion); }
.grupo-menu[open] .flecha { transform: rotate(180deg); }
.grupo-menu .submenu {
  display: flex; flex-direction: column; gap: 2px;
  margin: 4px 0 4px 14px; padding-left: 12px;
  border-left: 1px solid var(--linea-control);
}
.menu .submenu a { min-height: 38px; font-size: 14px; }
.grupo-menu[open] .submenu { animation: submenu-abre 180ms ease-out; }
@keyframes submenu-abre { from { opacity: 0; transform: translateY(-4px); } }

.menu-pie { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }

.usuario {
  display: flex; align-items: center; gap: 10px;
  padding: var(--e2) var(--e3); border-radius: var(--r1);
}
.usuario .avatar {
  width: 32px; height: 32px; flex: none; border-radius: 50%;
  background: var(--panel-alt); border: 1px solid var(--borde);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: var(--texto-2);
}
.usuario .quien { font-size: 14px; font-weight: 600; line-height: 1.2; }
.usuario .cargo { font-size: 12px; color: var(--texto-3); }

.firma {
  padding: var(--e3) var(--e3) 0; border-top: 1px solid var(--borde-sutil);
  font-size: 10px; font-weight: 700; letter-spacing: .14em;
  color: var(--s300); line-height: 1.7;
}

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

/* --- Barra superior ------------------------------------------------------ */

.superior {
  display: flex; align-items: center; gap: var(--e4);
  /* Alto fijo en todas las vistas, lleve buscador, ruta o nada. */
  min-height: 68px; padding: var(--e2) var(--e5);
  /* Translucida para dejar ver el fondo; el blur separa lo que pasa por debajo. */
  background: color-mix(in srgb, var(--fondo) 55%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  position: sticky; top: 0; z-index: 20;
}
/* Arriba del todo la barra es transparente y el fondo llega hasta el borde;
   el velo aparece recien cuando el contenido empieza a pasar por debajo.
   Sin soporte de animaciones por scroll, se queda con el velo fijo de arriba. */
@supports (animation-timeline: scroll()) {
  .superior {
    animation: velo-superior linear both;
    animation-timeline: scroll(root);
    animation-range: 0 48px;
  }
  @keyframes velo-superior {
    from { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
  }
}
/* Sin buscador arriba, la barra solo lleva campana y fecha: se achica. */

.buscador { position: relative; flex: 1; max-width: 540px; }
.buscador .ic {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--texto-3); pointer-events: none;
}
/* input[type] para ganarle a la regla general de campos, que va mas abajo
   y le quitaba el espacio de la lupa. */
.buscador input[type="text"] {
  width: 100%; height: 44px; padding: 0 var(--e4) 0 42px;
  border: 1px solid var(--vidrio-borde); border-radius: var(--r-full);
  background: var(--vidrio-fuerte); color: var(--texto);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 10px rgba(30, 40, 60, .05);
  font-family: inherit; font-size: 14.5px;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.buscador input[type="text"]:hover { border-color: var(--linea-control); }
.buscador input::placeholder { color: var(--texto-3); }

.superior .derecha {
  margin-left: auto; display: flex; align-items: center; gap: var(--e4);
}
.campana {
  position: relative; width: 44px; height: 44px;
  display: grid; place-items: center;
  background: none; border: 0; border-radius: var(--r-full);
  color: var(--texto-2); transition: background var(--transicion);
}
.campana:hover { background: var(--panel); }
.campana .punto {
  position: absolute; top: 10px; right: 11px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--naranja); border: 2px solid var(--fondo);
}
.fecha-hoy { font-size: 14px; color: var(--texto-2); white-space: nowrap; }
.superior .divisor { width: 1px; height: 28px; background: var(--linea-control); }

/* Usuario arriba a la derecha, con su menu desplegable. */
.menu-usuario { position: relative; }
.menu-usuario summary {
  display: flex; align-items: center; gap: 10px; list-style: none; cursor: pointer;
  padding: 4px 8px 4px 4px; border-radius: var(--r-full);
  transition: background var(--transicion);
}
.menu-usuario summary::-webkit-details-marker { display: none; }
.menu-usuario summary:hover, .menu-usuario[open] summary { background: rgba(255, 255, 255, .6); }
.menu-usuario .avatar {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700; color: var(--naranja-hondo);
  background: var(--naranja-tinte); border: 1px solid var(--naranja-borde);
}
.menu-usuario .usuario-txt { display: flex; flex-direction: column; line-height: 1.2; }
.menu-usuario .quien { font-size: 14px; font-weight: 600; color: var(--texto); white-space: nowrap; }
.menu-usuario .cargo { font-size: 12.5px; color: var(--texto-3); white-space: nowrap; }
.menu-usuario .flecha { display: grid; color: var(--texto-3); transition: transform var(--transicion); }
.menu-usuario[open] .flecha { transform: rotate(180deg); }
.menu-usuario-lista {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; min-width: 250px;
  padding: 6px; border-radius: 10px;
  /* Casi solido: un menu flotante no puede dejar leer lo que tiene debajo. */
  background: var(--panel); border: 1px solid var(--linea-control);
  box-shadow: 0 12px 32px rgba(30, 40, 60, .14);
}
.menu-usuario-lista a {
  display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px;
  border-radius: 10px; color: var(--texto-2); text-decoration: none; font-size: 14px;
}
.menu-usuario-lista a:hover { background: color-mix(in srgb, var(--naranja-tinte) 45%, transparent); color: var(--texto); }
.menu-usuario-lista .nota-sesion {
  display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 0; padding: 10px;
  border-top: 1px solid var(--linea); font-size: 12.5px; color: var(--texto-3);
}
@media (max-width: 768px) { .menu-usuario .usuario-txt, .superior .divisor { display: none; } }

/* --- Area de trabajo ----------------------------------------------------- */

.area {
  flex: 1; display: flex; gap: var(--e5);
  padding: var(--e2) var(--e6) var(--e6); align-items: flex-start; min-width: 0;
}
.area > .col-lista { flex: 1 1 auto; min-width: 0; width: 100%; }  /* en columna (pantalla angosta) no se encoge al contenido */
.area > .col-detalle { flex: 0 0 440px; position: sticky; top: 92px; }  /* barra de 80 + aire */

/* Vidrio: el fondo industrial se adivina detras, sin competir con el dato. */
.tarjeta {
  background: var(--vidrio);
  backdrop-filter: blur(var(--vidrio-blur)); -webkit-backdrop-filter: blur(var(--vidrio-blur));
  border: 1px solid var(--vidrio-borde);
  border-radius: var(--r-tarjeta); box-shadow: var(--sombra-vidrio);
}
/* En la cola el fondo gana protagonismo: vidrio mas abierto y menos blur. */
.area > .tarjeta {
  background: rgba(255, 255, 255, .20);
  backdrop-filter: blur(8px) saturate(1.1); -webkit-backdrop-filter: blur(8px) saturate(1.1);
  border-color: rgba(255, 255, 255, .5);
}
.area .detectado { background: rgba(255, 255, 255, .38); }

/* --- Tabla de vidrio ------------------------------------------------------
   El formato de la cola de revision, reutilizable: tarjeta esmerilada con la
   cabecera adentro, encabezados discretos, filas aireadas y hover naranja
   tenue. Lo usan la cola y las vistas de Configuracion. */
.tarjeta.tabla-vidrio {
  overflow: hidden;   /* sin esto las filas pisan las esquinas redondeadas */
  background: rgba(255, 255, 255, .12);
  backdrop-filter: blur(18px) saturate(1.15); -webkit-backdrop-filter: blur(18px) saturate(1.15);
  border-color: rgba(255, 255, 255, .5);
}
/* Separadores mas tenues que en el resto: se ven, pero no compiten con el dato. */
.tabla-vidrio { --linea: rgba(16, 24, 40, .045); }
.tabla-vidrio thead th { background: rgba(255, 255, 255, .15); color: #566074; }
/* Filas con mas aire en Configuracion. La cola de revision conserva su
   altura: ahi se trabajan treinta casos seguidos y cuenta ver mas filas. */
.pagina .tabla-vidrio tbody td { padding-top: 18px; padding-bottom: 18px; }
.tabla-vidrio thead th:first-child, .tabla-vidrio tbody td:first-child { padding-left: var(--e6); }
.tabla-vidrio thead th:last-child,  .tabla-vidrio tbody td:last-child  { padding-right: var(--e5); }
.tabla-vidrio tbody tr:hover td { background: color-mix(in srgb, var(--naranja-tinte) 45%, transparent); }
.tabla-vidrio tbody tr:last-child td { border-bottom: 0; }
.tabla-vidrio .sec-cab { align-items: center; }
/* Tarjetas de vidrio que van una tras otra en la misma pagina. */
.tabla-vidrio + .tabla-vidrio, .tabla-vidrio + .nota-tabla + .tabla-vidrio { margin-top: var(--e5); }
.nota-tabla { margin: var(--e3) var(--e2) 0; }
/* Dentro de la tarjeta, la nota es el pie de la tabla: mismo margen que la tabla. */
.tabla-vidrio > .nota-tabla {
  margin: 0; padding: var(--e4) var(--e5) var(--e4) var(--e6);
  border-top: 1px solid var(--linea); font-size: 13.5px; color: var(--texto-3);
}
/* El texto de la cabecera se ajusta y deja el boton de accion a la derecha. */
.pagina .tabla-vidrio .sec-cab { flex-wrap: nowrap; }
.pagina .tabla-vidrio .sec-cab > div:first-child { flex: 1 1 auto; min-width: 0; }
.pagina .tabla-vidrio .sec-cab .bajada { max-width: 80ch; }
.pagina .tabla-vidrio .sec-cab > .btn { flex: none; }
@media (max-width: 768px) { .pagina .tabla-vidrio .sec-cab { flex-wrap: wrap; } }
.tabla-vidrio .tit-tarjeta { margin: 0 0 4px; font-size: 20px; font-weight: 700; letter-spacing: -.015em; }
.tabla-vidrio .aviso-en-tarjeta { margin: 0 var(--e6) var(--e5); }
/* Tabla sin encabezados (Herramientas): la primera fila marca el borde. */
.tabla-vidrio table:not(:has(thead)) tbody tr:first-child td { border-top: 1px solid var(--linea); }
.pagina .tabla-vidrio .vacio { margin: 0 var(--e6) var(--e6); }
.pagina .tabla-vidrio > .vacio:first-child { margin-top: var(--e6); }
/* Cabecera de vista fuera de tarjeta (tableros y liquidaciones): titulo,
   descripcion y accion, sin el margen interior de la tarjeta. */
.sec-cab.cab-vista { padding: 0 0 var(--e4); align-items: center; }
/* El subtitulo aprovecha el ancho de la vista, hasta el boton de accion si lo
   hay: en dos lineas largas se lee mejor que en cuatro angostas. El tope solo
   actua en monitores muy anchos, donde una linea sin fin cuesta seguirla. */
.sec-cab.cab-vista > div:first-child { flex: 1 1 auto; min-width: 0; }
.sec-cab.cab-vista .bajada { max-width: 140ch; }
.sec-cab.cab-vista > .btn { margin-left: auto; flex: none; }
/* Aviso que abre una tarjeta de tabla: con aire arriba, no pegado al borde. */
.tabla-vidrio > .aviso-caja:first-child { margin-top: var(--e5); }
.tabla-vidrio > .paginacion { border-top: 1px solid var(--linea); }
/* Codigos y cifras no se parten ("CARG-02", "66.0 gal"); solo el texto
   explicativo refluye. Si no cabe, la tabla se desliza. */
.pagina .tabla-vidrio td:not(.sub):not(.libre) { white-space: nowrap; }
.pagina .tabla-vidrio td.libre { min-width: 260px; }
/* Fila de totales: separada del cuerpo con la misma linea que el encabezado. */
.tabla-vidrio tfoot td {
  padding-top: 16px; padding-bottom: 16px; font-weight: 700;
  background: rgba(255, 255, 255, .35);
  border-top: 1px solid var(--linea-encabezado);
}
.tabla-vidrio tfoot td:first-child { padding-left: var(--e6); }
/* Filtros de una pagina, fuera de tarjeta: sin el margen interior de la tarjeta. */
.filtros.filtros-pagina { padding: 0; margin-bottom: var(--e5); }

/* Columnas con aire. Decide el ancho de la tarjeta, no el de la pantalla
   (tiene tope y va centrada). Medido con la tabla de maquinas, la mas ancha:
   - 1340 px o mas: 26 px por lado;
   - 1260 a 1340: 20 px;
   - menos: 16 px (1920 al 125 % da una tarjeta de ~1228);
   - menos de 1200: 10 px, Editar/Desactivar solo con icono y encabezados
     que pueden partirse en dos lineas;
   - menos de 900: 8 px, y si no cabe la tabla se desliza en su tarjeta. */
.pagina .tabla-vidrio { container-type: inline-size; }
.pagina .tabla-vidrio thead th, .pagina .tabla-vidrio tbody td { padding-left: 26px; padding-right: 26px; }
.pagina .tabla-vidrio thead th:first-child, .pagina .tabla-vidrio tbody td:first-child { padding-left: var(--e6); }
.pagina .tabla-vidrio thead th:last-child, .pagina .tabla-vidrio tbody td:last-child { padding-right: var(--e6); }
.btn-sm.btn-icono { width: 36px; padding: 0; }
@container (max-width: 1339px) {
  .pagina .tabla-vidrio thead th, .pagina .tabla-vidrio tbody td { padding-left: 20px; padding-right: 20px; }
}
@container (max-width: 1259px) {
  .pagina .tabla-vidrio thead th, .pagina .tabla-vidrio tbody td { padding-left: 16px; padding-right: 16px; }
  .pagina .tabla-vidrio thead th:last-child, .pagina .tabla-vidrio tbody td:last-child { padding-right: var(--e5); }
}
@container (max-width: 1199px) {
  .pagina .tabla-vidrio thead th, .pagina .tabla-vidrio tbody td { padding-left: 10px; padding-right: 10px; }
  .pagina .tabla-vidrio thead th:first-child, .pagina .tabla-vidrio tbody td:first-child { padding-left: var(--e5); }
  .pagina .tabla-vidrio thead th { white-space: normal; }
  .pagina .tabla-vidrio .col-ancha { min-width: 170px; }
  .acciones-fila .txt-accion { display: none; }
  .acciones-fila .btn-sm, .acciones-fila .btn-sm.btn-alternar { width: 36px; min-width: 0; padding: 0; }
}
@container (max-width: 899px) {
  .pagina .tabla-vidrio thead th, .pagina .tabla-vidrio tbody td { padding-left: 8px; padding-right: 8px; }
  .pagina .tabla-vidrio thead th:last-child, .pagina .tabla-vidrio tbody td:last-child { padding-right: var(--e4); }
}
.tarjeta > .cuerpo { padding: var(--e5); }

/* --- Cabecera de seccion ------------------------------------------------- */

.sec-cab {
  display: flex; align-items: flex-start; gap: var(--e4);
  flex-wrap: wrap; padding: var(--e6) var(--e6) var(--e5);
}
.sec-cab h1 {
  margin: 0 0 4px; font-size: 30px; font-weight: 700; letter-spacing: -.025em;
  color: var(--texto);
}
.sec-cab .bajada { margin: 0; color: var(--texto-3); font-size: 15px; }

/* Contadores: superficie clara y el estado en el icono y la cifra, no en un
   bloque de color entero. Cada uno lleva su palabra. */
.chips { display: flex; gap: var(--e3); margin-left: auto; flex-wrap: wrap; }
.chip {
  min-width: 108px; padding: var(--e3) var(--e4);
  border-radius: 10px; border: 1px solid var(--vidrio-borde);
  background: var(--vidrio-fuerte); box-shadow: 0 2px 10px rgba(30, 40, 60, .04);
}
.chip .n {
  display: flex; align-items: center; gap: 7px;
  font-size: 24px; font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums; color: var(--texto);
}
.chip .n .ic { color: var(--texto-3); }
.chip .l { font-size: 12.5px; color: var(--texto-3); margin-top: 3px; }
.chip.aviso   .n, .chip.aviso   .n .ic { color: var(--aviso); }
.chip.peligro .n, .chip.peligro .n .ic { color: var(--peligro); }
.chip.bien    .n, .chip.bien    .n .ic { color: var(--bien); }

/* --- Filtros ------------------------------------------------------------- */

.filtros {
  display: flex; gap: var(--e2); align-items: center; flex-wrap: wrap;
  padding: 0 var(--e6) var(--e5);
}
.filtros select, .filtros input[type="date"] {
  width: auto; height: 42px; padding: 0 var(--e4);
  border: 1px solid var(--linea-control); border-radius: var(--r-control);
  background: var(--panel); color: var(--texto);
  font-family: inherit; font-size: 14px;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.filtros select:hover, .filtros input[type="date"]:hover { border-color: var(--s300); }
/* Buscador dentro de los filtros: ocupa la izquierda y empuja los filtros
   a la derecha. Misma altura y radio que los selects. */
/* Base de 200 px: con espacio crece hasta su tope; en una fila justa (Revision,
   con cuatro selectores y la fecha) deja lugar al boton de Borrar filtros. */
.filtros .buscador { flex: 1 1 200px; max-width: 400px; margin-right: auto; }
.filtros .buscador input[type="text"] {
  height: 42px; border-radius: var(--r-control);
  border-color: var(--linea-control); background: var(--panel);
  backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none;
  font-size: 14px;
}

/* --- Tablas -------------------------------------------------------------- */

/* Envoltura con scroll propio: una tabla ancha no rompe el ancho de la pagina. */
.desliza { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; }
thead th {
  text-align: left; white-space: nowrap;
  padding: 12px var(--e4);
  font-size: 12.5px; font-weight: 500; color: var(--texto-3);
  background: rgba(255, 255, 255, .35);
  /* Sin linea arriba; abajo una mas oscura que la de las filas, para que el
     encabezado se separe de los registros. Vale para todas las tablas. */
  border-top: 0;
  border-bottom: 1px solid var(--linea-encabezado);
}
tbody td {
  padding: 14px var(--e4);
  border-bottom: 1px solid var(--linea);
  vertical-align: middle;
}
tbody tr { transition: background var(--transicion); }
tbody tr:hover td { background: rgba(255, 255, 255, .55); }
td.num, th.num { text-align: right; }
/* Columnas a medida: centrada (cifras cortas y estados), ancha (nombres y
   descripciones completas) y angosta (se ajusta a su contenido). */
th.centro, td.centro { text-align: center; }
/* Ultima columna centrada: mismo margen a ambos lados, para que el centro sea
   el centro de verdad (la ultima celda lleva mas margen a la derecha). */
.pagina .tabla-vidrio thead th.centro:last-child,
.pagina .tabla-vidrio tbody td.centro:last-child { padding-left: var(--e5); padding-right: var(--e5); }
th.col-ancha, td.col-ancha { min-width: 210px; }
th.col-angosta, td.col-angosta { width: 1%; }
tr.fila-total td { background: var(--panel-alt); font-weight: 700; }

/* La gravedad la dice el badge de Estado. La banda y el tinte quedan solo
   para la fila abierta en el detalle: es una seleccion, por eso naranja. */
tr.caso td:first-child { box-shadow: inset 3px 0 0 transparent; }
.tabla-vidrio tr.caso.seleccionada td { background: color-mix(in srgb, var(--naranja-tinte) 80%, transparent); }
tr.caso.seleccionada td:first-child { box-shadow: inset 3px 0 0 var(--naranja); }

/* Toda la fila abre la lectura: el enlace del codigo se estira sobre ella. */
tr.caso { position: relative; cursor: pointer; }
.fila-enlace { color: inherit; text-decoration: none; }
.fila-enlace::after { content: ""; position: absolute; inset: 0; }
.fila-enlace:focus-visible { outline: none; }
tr.caso:has(.fila-enlace:focus-visible) td { background: rgba(255, 255, 255, .6); }
tr.caso:has(.fila-enlace:focus-visible) td:first-child { box-shadow: inset 3px 0 0 var(--naranja); }

.miniatura-fila {
  width: 56px; height: 42px; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--linea-control); background: var(--panel-alt); display: block;
  transition: box-shadow var(--transicion);
}
tr.caso:hover .miniatura-fila { box-shadow: 0 4px 12px rgba(30, 40, 60, .12); }
.miniatura-fila img { width: 100%; height: 100%; object-fit: cover; display: block; }

.celda-doble .arriba { font-weight: 600; font-size: 14.5px; }
.celda-doble .abajo { font-size: 12.5px; color: var(--texto-3); }
.celda-momento { display: flex; align-items: center; gap: 7px; color: var(--texto-2); }
.celda-momento span { font-size: 14px; }

/* --- Medidor de confianza ------------------------------------------------ */

.medidor { width: 88px; }
.medidor .barra { height: 6px; border-radius: 3px; background: var(--linea-control); overflow: hidden; }
.medidor .relleno { height: 100%; border-radius: 3px; background: var(--bien); }
.medidor.media .relleno { background: #e3a008; }
.medidor.baja  .relleno { background: var(--peligro); }
.medidor-val { font-size: 12px; color: var(--texto-3); margin-top: 3px; }
.confianza-num { font-size: 14px; font-weight: 600; margin-bottom: 4px; }

/* --- Pastillas de estado ------------------------------------------------- */

.pin {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  padding: 5px 11px; border-radius: var(--r-full);
  border: 0;   /* sin borde: el fondo de color basta para leer el estado */
}
.pin.BLOQUEO { background: var(--peligro-bg); color: var(--peligro); }
.pin.ALERTA  { background: var(--aviso-bg);   color: var(--aviso); }
.pin.OK      { background: var(--bien-bg);    color: var(--bien); }
/* Neutro (Inactivo, Sin verificar...): gris con cuerpo, que se lea de un vistazo. */
.pin.neutro  { background: rgba(16, 24, 40, .08); color: #475467; }
/* Punto de estado dentro de un chip (Inactivo): se ve antes que la palabra. */
.pin .punto-estado {
  width: 7px; height: 7px; border-radius: 50%; flex: none; background: currentColor;
  margin-right: 1px;
}

/* --- Paginacion ---------------------------------------------------------- */

.paginacion {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e4) var(--e5) var(--e4) var(--e6); flex-wrap: wrap;
}
.paginacion .rotulo { font-size: 13.5px; color: var(--texto-3); }
.paginacion .paginas { margin-left: auto; display: flex; gap: var(--e1); }
.paginacion a, .paginacion span.pag {
  min-width: 36px; height: 36px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; border: 1px solid transparent;
  color: var(--texto-2); text-decoration: none;
  font-size: 14px; font-weight: 500;
  transition: background var(--transicion), color var(--transicion);
}
.paginacion a:hover { background: var(--vidrio-fuerte); border-color: var(--linea-control); color: var(--texto); }
/* Pagina actual: solo el numero, en naranja y grueso. Es navegacion activa.
   El tono hondo para que el numero chico pase contraste sobre el vidrio. */
.paginacion a { color: var(--texto-3); }
.paginacion span.pag.actual { color: var(--naranja-hondo); font-weight: 700; }
.paginacion .inerte { color: var(--s300); }

/* --- Panel de detalle ---------------------------------------------------- */

.detalle-cab {
  display: flex; align-items: center; gap: var(--e2);
  padding: var(--e5) var(--e5) var(--e4);
}
.detalle-cab h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.015em; }
.detalle-cab .navegar { margin-left: auto; display: flex; gap: var(--e2); }
.detalle-cab .navegar a, .detalle-cab .navegar span {
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid var(--linea-control); border-radius: 10px;
  background: var(--panel); color: var(--texto-2); text-decoration: none;
  transition: background var(--transicion), border-color var(--transicion), color var(--transicion);
}
.detalle-cab .navegar a:hover { border-color: var(--naranja); color: var(--naranja); }
.detalle-cab .navegar span { color: var(--s300); background: transparent; }

.evidencia-caja { position: relative; margin: 0 var(--e5); }
.evidencia-caja img {
  width: 100%; display: block; border-radius: var(--r3);
  border: 1px solid var(--linea-control); background: var(--s950);
  aspect-ratio: 16 / 10; object-fit: cover; max-width: 100%;
  box-shadow: 0 6px 20px rgba(30, 40, 60, .10);
}
.evidencia-caja .ampliar {
  position: absolute; top: var(--e3); right: var(--e3);
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 10px; border: 1px solid rgba(255,255,255,.6);
  background: rgba(255,255,255,.78); color: var(--s800);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--sombra1); transition: background var(--transicion);
}
.evidencia-caja .ampliar:hover { background: #fff; }

.meta-tira {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--e3); padding: var(--e5);
}
.meta-tira .casilla { display: flex; gap: 7px; align-items: flex-start; min-width: 0; }
.meta-tira .ic { color: var(--texto-3); margin-top: 2px; }
.meta-tira .v {
  font-size: 13.5px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere;
}
.meta-tira .k { font-size: 11.5px; color: var(--texto-3); }

.bloque { margin: 0 var(--e5) var(--e5); }
.bloque > .titulo { display: flex; align-items: center; gap: var(--e2); margin-bottom: var(--e3); }
.bloque > .titulo h3 { margin: 0; font-size: 16px; font-weight: 600; color: var(--texto); }
.bloque > .titulo .pin { margin-left: auto; }

.detectado {
  border: 1px solid var(--vidrio-borde); border-radius: var(--r3); overflow: hidden;
  background: var(--vidrio-fuerte);
}
.detectado .linea {
  display: grid; grid-template-columns: 22px 1fr auto auto 34px;
  gap: var(--e3); align-items: center;
  padding: 13px var(--e4); border-bottom: 1px solid var(--linea);
}
.detectado .linea:last-child { border-bottom: 0; }
.detectado .ic { color: var(--texto-3); }
.detectado .rotulo { font-size: 14px; color: var(--texto-2); }
.detectado .valor { font-size: 15.5px; font-weight: 700; white-space: nowrap; }
.detectado .editar {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--linea-control); border-radius: 10px;
  background: var(--panel); color: var(--texto-3);
  transition: color var(--transicion), border-color var(--transicion);
}
.detectado .editar:hover { color: var(--naranja); border-color: var(--naranja); }

/* --- Formularios --------------------------------------------------------- */

label.etiqueta {
  display: block; font-size: 13px; font-weight: 500;
  color: var(--texto-2); margin-bottom: 5px;
}
.campo-linea {
  display: grid; grid-template-columns: 104px 1fr; gap: var(--e3);
  align-items: center; margin-bottom: var(--e3);
}
.campo-linea > label.etiqueta { margin: 0; }

input[type="text"], input[type="date"], select, textarea {
  width: 100%; height: 44px; padding: 0 var(--e4);
  border: 1px solid var(--linea-control); border-radius: var(--r-control);
  background: var(--panel); color: var(--texto);
  font-family: inherit; font-size: 15px;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
input[type="text"]:hover, select:hover { border-color: var(--s300); }
input[type="text"]:focus, input[type="date"]:focus, select:focus, textarea:focus {
  border-color: var(--naranja); box-shadow: 0 0 0 3px var(--naranja-tinte); outline: none;
}
.con-sufijo { position: relative; }
.con-sufijo .sufijo {
  position: absolute; right: var(--e3); top: 50%; transform: translateY(-50%);
  font-size: 13px; color: var(--texto-3); pointer-events: none;
}
.con-sufijo input { padding-right: 58px; }

/* Formulario de catalogo: vive en su pagina y dentro del modal de la lista. */
.ayuda { margin: 5px 0 0; font-size: 12.5px; color: var(--texto-3); }
.req { color: var(--naranja); }
.casilla { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.casilla input { width: 20px; height: 20px; accent-color: var(--naranja); }
.casilla span { font-size: 15px; font-weight: 500; }
.form-acciones { margin-top: var(--e5); }

/* --- Modal --------------------------------------------------------------- */
.modal {
  width: min(820px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
  padding: 0; border: 1px solid var(--vidrio-borde); border-radius: var(--r-tarjeta);
  background: var(--vidrio-fuerte); color: var(--texto);
  backdrop-filter: blur(22px) saturate(1.15); -webkit-backdrop-filter: blur(22px) saturate(1.15);
  box-shadow: 0 24px 60px rgba(30, 40, 60, .22);
  overflow: hidden; flex-direction: column;
}
.modal[open] { display: flex; animation: modal-entra 200ms cubic-bezier(.2, .7, .3, 1); }
.modal::backdrop { background: rgba(20, 24, 32, .32); backdrop-filter: blur(3px); }
@keyframes modal-entra { from { opacity: 0; transform: translateY(8px) scale(.985); } }
.modal-cab {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e6) var(--e6) var(--e5) var(--e7);
}
.modal-cab h2 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.modal-cerrar {
  margin-left: auto; width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid var(--linea-control); border-radius: 10px;
  background: var(--panel); color: var(--texto-2);
  transition: color var(--transicion), border-color var(--transicion);
}
.modal-cerrar:hover { color: var(--naranja); border-color: var(--naranja); }
.modal-cuerpo { padding: 0 var(--e7) var(--e7); overflow-y: auto; }
/* Campos con mas aire dentro del modal. */
.modal-cuerpo .campo-grupo { margin-bottom: var(--e5); }
.modal-cuerpo label.etiqueta { font-size: 14px; margin-bottom: 7px; }
.modal-cuerpo input[type="text"], .modal-cuerpo select { height: 50px; font-size: 15.5px; }
.modal-cuerpo .ayuda { font-size: 13px; margin-top: 7px; line-height: 1.45; }
.modal-cuerpo .casilla span { font-size: 15.5px; }
.modal-cuerpo .form-acciones { margin-top: var(--e6); }
.modal-cuerpo .form-acciones .btn { min-height: 50px; padding: 0 var(--e6); }
/* Dentro del modal el formulario no lleva su caja propia. */
.modal-cuerpo .tarjeta {
  background: none; border: 0; box-shadow: none; overflow: visible;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.modal-cuerpo .tarjeta > .cuerpo { padding: 0; }
.modal-cuerpo .aviso-caja { margin-bottom: var(--e4); }
.modal-cargando { margin: var(--e5) 0; color: var(--texto-3); }
/* Exito dentro del modal: icono y palabra en verde, acciones debajo. */
.modal-exito { text-align: center; padding: var(--e4) 0 var(--e2); }
.modal-exito .exito-icono {
  width: 64px; height: 64px; margin: 0 auto var(--e4); border-radius: 50%;
  display: grid; place-items: center;
  color: var(--bien); background: var(--bien-bg); border: 1px solid var(--bien-bd);
}
.modal-exito .exito-texto { margin: 0 0 var(--e5); font-size: 16px; font-weight: 600; color: var(--texto); }
.modal-exito .acciones { justify-content: center; }
/* Dos columnas de campos cuando cabe; casillas y acciones a lo ancho. */
@media (min-width: 640px) {
  .modal-cuerpo .form-catalogo { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--e6); }
  .modal-cuerpo .form-catalogo > .campo-grupo:has(.casilla),
  .modal-cuerpo .form-catalogo > .form-acciones { grid-column: 1 / -1; }
}

/* Nivel de combustible: se elige como se ve en el tablero, no como decimal. */
/* La opcion elegida va en naranja: es una seleccion, no una alerta. */
.seg {
  display: flex; gap: 4px; padding: 4px;
  border: 1px solid var(--linea-control); border-radius: var(--r-control);
  background: var(--panel);
}
.seg label.seg-op { flex: 1; position: relative; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span {
  display: block; text-align: center; min-height: 36px; line-height: 36px;
  font-size: 13.5px; font-weight: 500; color: var(--texto-2);
  background: transparent; border-radius: 10px;
  transition: background var(--transicion), color var(--transicion), box-shadow var(--transicion);
}
.seg span:hover { background: var(--panel-alt); color: var(--texto); }
.seg input:checked + span {
  background: var(--naranja); color: #fff; font-weight: 700;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--naranja) 35%, transparent);
}
.seg input:focus-visible + span { outline: 2px solid var(--naranja); outline-offset: 2px; }

/* --- Avisos -------------------------------------------------------------- */

/* Sin borde: el color de fondo ya separa el aviso. Transparente y no 0, para
   que la caja mida lo mismo y nada se corra. */
.aviso-caja {
  display: flex; gap: var(--e3); align-items: flex-start;
  border-radius: 10px; padding: var(--e3) var(--e4);
  font-size: 14px; border: 1px solid transparent;
  background: var(--aviso-bg); color: var(--aviso);
}
.aviso-caja.grave { background: var(--peligro-bg); color: var(--peligro); }
.aviso-caja.buena { background: var(--bien-bg); color: var(--bien); }
.aviso-caja .ic { margin-top: 2px; }
.aviso-caja strong { display: block; font-size: 14.5px; margin-bottom: 2px; }
.aviso-caja .detalle-txt { opacity: .92; font-size: 13.5px; }
.aviso-caja a { color: inherit; font-weight: 600; }
.atajos-ficha { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); margin-top: var(--e2); }
.atajos-ficha a {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; text-decoration: none;
}
.atajos-ficha a:hover { text-decoration: underline; }

/* --- Botones ------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 var(--e5);
  border-radius: var(--r-btn); border: 1px solid transparent;
  font-family: inherit; font-size: 14.5px; font-weight: 600;
  text-decoration: none; white-space: nowrap;
  transition: background var(--transicion), border-color var(--transicion),
              color var(--transicion), box-shadow var(--transicion), transform var(--transicion);
}
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.btn-principal {
  background: var(--naranja); color: #fff;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--naranja) 30%, transparent);
}
.btn-principal:hover {
  background: var(--naranja-hondo); transform: translateY(-1px);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--naranja) 38%, transparent);
}
.btn-principal:active { transform: none; }
.btn-suave {
  background: var(--vidrio-fuerte); color: var(--texto); border-color: var(--linea-control);
}
.btn-suave:hover { border-color: var(--s300); background: var(--panel); }
.btn-peligro { background: var(--peligro-bg); color: var(--peligro); border-color: var(--peligro-bd); }
.btn-peligro:hover { background: var(--peligro); color: #fff; }
.btn-bien { background: var(--bien); color: #fff; }
.btn-bien:hover { filter: brightness(1.08); }
/* Borrar filtros sin nada que borrar: gris apagado, legible, sin sombra.
   Encendido usa btn-principal (naranja). */
.btn-borrar[aria-disabled="true"] {
  opacity: 1; pointer-events: auto; cursor: not-allowed; position: relative;
  background: color-mix(in srgb, var(--texto-3) 10%, var(--panel));
  color: var(--texto-3); border-color: var(--linea-control); box-shadow: none;
}
/* Globo de ayuda al pasar el cursor (o al llegar con el teclado). */
.btn-borrar[data-ayuda]::after {
  content: attr(data-ayuda);
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 20;
  padding: 7px 11px; border-radius: 8px; white-space: nowrap;
  background: var(--texto); color: #fff; font-size: 12.5px; font-weight: 500;
  box-shadow: 0 6px 18px rgba(20, 24, 32, .18);
  opacity: 0; transform: translateY(-3px); pointer-events: none;
  transition: opacity var(--transicion), transform var(--transicion);
}
.btn-borrar[data-ayuda]:hover::after, .btn-borrar[data-ayuda]:focus-visible::after {
  opacity: 1; transform: none;
}
@media (prefers-reduced-motion: reduce) { .btn-borrar[data-ayuda]::after { transition: none; } }
.btn-sm { min-height: 36px; padding: 0 var(--e3); font-size: 13.5px; border-radius: 10px; }
.btn-ancho { width: 100%; }

.acciones { display: flex; gap: var(--e2); flex-wrap: wrap; }

/* --- Linea de tiempo ----------------------------------------------------- */

.traza { list-style: none; margin: 0; padding: 0; }
.traza li {
  position: relative; display: grid; grid-template-columns: 16px 46px 1fr;
  gap: var(--e2); align-items: start; padding-bottom: var(--e3);
}
.traza li:last-child { padding-bottom: 0; }
.traza li::before {
  content: ""; position: absolute; left: 6px; top: 16px; bottom: 0;
  width: 2px; background: var(--borde);
}
.traza li:last-child::before { display: none; }
.traza .punto {
  width: 11px; height: 11px; border-radius: 50%; margin-top: 4px;
  background: var(--panel); border: 2px solid var(--s300); z-index: 1;
}
.traza li.viva .punto { background: var(--naranja); border-color: var(--naranja); }
.traza .hora { font-size: 12.5px; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.traza .que { font-size: 13.5px; color: var(--texto-2); overflow-wrap: anywhere; }

/* --- Vacio --------------------------------------------------------------- */

.vacio {
  border: 1px dashed var(--linea-control); border-radius: var(--r3);
  padding: var(--e7) var(--e5); text-align: center; margin: var(--e4) var(--e5) var(--e5);
}
.vacio .ic { margin: 0 auto var(--e3); color: var(--s300); }
.vacio h3 { margin: 0 0 var(--e1); font-size: 17px; font-weight: 650; }
.vacio p { margin: 0 auto; color: var(--texto-3); font-size: 14px; max-width: 46ch; }

/* --- Tarjetas de cifra --------------------------------------------------- */

/* Minimalista y de vidrio: icono en un cuadro tenue, etiqueta al lado, la
   cifra grande y una barra corta de acento al pie. El naranja es acento de
   marca; en las tarjetas de alerta, icono, cifra y barra toman el color del
   estado (rojo bloqueo, ambar aviso) y la nota dice el porque en palabras. */
.cifras {
  display: grid; gap: var(--e4); margin-bottom: var(--e5);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.cifra-caja {
  --acento: var(--naranja);
  --acento-tinte: var(--naranja-tinte);
  position: relative; display: flex; flex-direction: column;
  padding: 16px 20px 16px; border-radius: 10px;   /* esquinas apenas curvas */
  /* Mismo vidrio que las tablas (.tabla-vidrio). */
  background: rgba(255, 255, 255, .12);
  backdrop-filter: blur(18px) saturate(1.15); -webkit-backdrop-filter: blur(18px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, .5);
  box-shadow: 0 6px 24px rgba(30, 40, 60, .06);
  transition: transform var(--transicion), box-shadow var(--transicion);
}
/* Al pasar el mouse, un resplandor del color de acento (naranja, o el del
   estado en las tarjetas de alerta) en vez de una sombra gris. */
.cifra-caja:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--acento) 12%, transparent);
}
.cifra-caja .etq {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
  font-size: 14px; font-weight: 500; color: var(--texto-3);
}
.cifra-caja .cifra-ic {
  width: 34px; height: 34px; flex: none; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--acento-tinte); color: var(--acento);
}
.cifra-caja .cifra {
  font-size: 30px; font-weight: 600; letter-spacing: -.025em; line-height: 1.1; color: var(--texto);
}
.cifra-caja .unidad { font-size: 15px; font-weight: 500; color: var(--texto-3); margin-left: 4px; }
.cifra-caja .nota { font-size: 13.5px; color: var(--texto-3); margin-top: 6px; }
/* Barra corta de acento al pie. */
.cifra-caja::after {
  content: ""; display: block; width: 42px; height: 4px; margin-top: 10px;
  border-radius: 2px; background: var(--acento);
}
/* La principal de cada vista ya no va rellena de naranja (la guia reserva el
   relleno a las acciones): se distingue con una barra mas larga. */
.cifra-caja.destacada::after { width: 64px; }
.cifra-caja.peligro { --acento: var(--peligro); --acento-tinte: var(--peligro-bg); }
.cifra-caja.bien    { --acento: var(--bien);    --acento-tinte: var(--bien-bg); }
.cifra-caja.bien .cifra { color: var(--acento); }

/* --- Lectura en modal (cola de revision) --------------------------------
   Limpio y en bloques apilados: foto y lo detectado lado a lado, una linea
   de confianza, y los valores a confirmar. Pocas cajas y divisores finos.
   El encabezado queda fijo; el resto se desplaza con una barra discreta. */
.modal.modal-lectura {
  width: min(980px, calc(100vw - 32px)); max-height: calc(100vh - 16px);
  background: rgba(255, 255, 255, .95); border-radius: 10px;
}
.modal-lectura .lr-cab {
  display: flex; align-items: center; gap: var(--e4); flex: none;
  padding: 18px var(--e6); border-bottom: 1px solid var(--linea);
}
.lr-cab-txt { min-width: 0; flex: 1; }
.lr-cab-linea { display: flex; align-items: center; gap: var(--e3); }
.lr-cab h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.015em; }
.lr-cab h2:focus { outline: none; }
.lr-contexto {
  margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px;
  font-size: 14px; color: var(--texto-3);
}
.lr-contexto strong { color: var(--texto); font-weight: 600; }
.lr-contexto .sep { color: var(--s300); }
.modal-lectura .navegar { display: flex; gap: var(--e2); }
.modal-lectura .navegar a, .modal-lectura .navegar span, .modal-lectura .cerrar-lectura {
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid var(--linea-control); border-radius: 10px;
  background: var(--panel); color: var(--texto-2); text-decoration: none;
  transition: color var(--transicion), border-color var(--transicion);
}
.modal-lectura .navegar a:hover, .modal-lectura .cerrar-lectura:hover { color: var(--naranja); border-color: var(--naranja); }
.modal-lectura .navegar span { color: var(--s300); background: transparent; }
.modal-lectura .cerrar-lectura { margin-left: var(--e2); }

.lr-scroll {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: none;   /* sin barra: en escritorio normal todo cabe */
}
.lr-scroll::-webkit-scrollbar { display: none; }
.lr-cuerpo { display: flex; flex-direction: column; gap: var(--e5); padding: var(--e5) var(--e6); }

/* Foto y lo detectado */
.lr-revision {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--e5); align-items: stretch;
}
.lr-foto { margin: 0; display: flex; flex-direction: column; }
.lr-foto-marco {
  position: relative; display: block; flex: 1; border-radius: 10px; overflow: hidden;
  background: var(--s950); border: 1px solid var(--linea-control); cursor: zoom-in;
}
.lr-foto-marco img {
  display: block; width: 100%; height: 100%; max-height: min(38vh, 340px);
  object-fit: contain;
}
.lr-foto .ampliar {
  position: absolute; top: var(--e3); right: var(--e3);
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 10px; background: rgba(255, 255, 255, .85); color: var(--s800);
  transition: color var(--transicion), background var(--transicion);
}
.lr-foto-marco:hover .ampliar { background: #fff; color: var(--naranja); }
.lr-foto figcaption {
  display: flex; justify-content: space-between; gap: var(--e3); flex-wrap: wrap;
  margin-top: var(--e2); font-size: 13px; color: var(--texto-3);
}
.lr-momento { display: inline-flex; align-items: center; gap: 7px; color: var(--texto-2); font-weight: 500; }

.lr-detectado {
  display: flex; flex-direction: column;
  border: 1px solid var(--linea-control); border-radius: 10px;
  background: rgba(255, 255, 255, .7);
}
.lr-dato {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding: var(--e4) var(--e5); border-bottom: 1px solid var(--linea);
}
.lr-dato-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); }
.lr-etq { font-size: 13.5px; color: var(--texto-3); }
.lr-grande {
  margin-top: 4px; font-size: 28px; font-weight: 650; letter-spacing: -.02em;
  line-height: 1.15; color: var(--texto);
}
.lr-grande .unidad { font-size: 15px; font-weight: 500; color: var(--texto-3); margin-left: 4px; }
.lr-sub { font-size: 12.5px; color: var(--texto-3); margin-top: 2px; }
.lr-sub.mal { color: var(--peligro); font-weight: 600; }
.lr-sub-in { color: var(--texto-3); font-weight: 400; }
.lr-conf-ok { font-size: 12.5px; color: var(--texto-3); white-space: nowrap; }
.lr-sello {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--e3);
  padding: var(--e3) var(--e5); font-size: 13.5px;
}
.lr-sello-v { font-weight: 600; color: var(--texto); text-align: right; }
/* Lo que pide atencion: borde ambar a la izquierda, sin caja nueva. */
.lr-dato.atencion, .lr-sello.atencion {
  box-shadow: inset 3px 0 0 var(--aviso);
  background: color-mix(in srgb, var(--aviso-bg) 55%, transparent);
}
.lr-detectado > * { border-radius: 10px; }

/* Una sola linea de confianza, centrada. */
.lr-confianza {
  text-align: center; padding: var(--e3) var(--e5); border-radius: 10px;
  background: var(--aviso-bg); color: var(--aviso);
}
.lr-confianza.grave  { background: var(--peligro-bg); color: var(--peligro); }
.lr-confianza.bien   { background: var(--bien-bg);    color: var(--bien); }
.lr-confianza.neutra { background: rgba(16, 24, 40, .05); color: var(--texto-2); }
.lr-confianza p { margin: 0; }
.lr-conf-titulo { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; }
.lr-confianza .lr-conf-txt { margin-top: 2px; font-size: 13.5px; opacity: .92; }
.lr-confianza .atajos-ficha { justify-content: center; margin-top: 6px; gap: var(--e2) var(--e4); }
.lr-confianza .atajos-ficha a {
  font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px;
}

/* Confirmar valores */
.lr-confirmar {
  border: 1px solid var(--linea-control); border-radius: 10px;
  background: rgba(255, 255, 255, .7); padding: var(--e5) var(--e5) 0;
}
.lr-confirmar h3 { margin: 0 0 var(--e4); font-size: 16px; font-weight: 650; color: var(--texto); }
.lr-form { display: flex; flex-direction: column; gap: var(--e4); }
.lr-campo .etiqueta { display: flex; align-items: center; gap: var(--e2); margin-bottom: 6px; }
.lr-marca {
  font-size: 11.5px; font-weight: 600; color: var(--aviso);
  background: var(--aviso-bg); padding: 1px 8px; border-radius: var(--r-full);
}
.lr-campo.atencion input[type="text"], .lr-campo.atencion .seg { border-color: var(--aviso-bd); }
/* Pie del modal: las acciones, fuera de lo que se desplaza. Confirmar
   ocupa el ancho; Rechazar al lado, como alternativa secundaria. */
.lr-pie {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3); flex: none;
  padding: 14px var(--e6); border-top: 1px solid var(--linea);
  background: rgba(255, 255, 255, .97);
}
.lr-pie { justify-content: center; }
.lr-pie .btn { flex: 0 0 260px; }   /* Confirmar y Rechazar, mismo ancho */
.lr-pie-nota { flex-basis: 100%; text-align: center; font-size: 12.5px; color: var(--texto-3); }
.lr-confirmar { padding-bottom: var(--e5); }

/* Secundario plegado */
.lr-plegable { border-top: 1px solid var(--linea); }
.lr-plegable + .lr-plegable { margin-top: calc(var(--e5) * -1); }
.lr-plegable summary {
  display: flex; align-items: center; gap: var(--e2); list-style: none; cursor: pointer;
  padding: 12px 0; font-size: 14px; font-weight: 600; color: var(--texto-2);
}
.lr-plegable summary::-webkit-details-marker { display: none; }
.lr-plegable summary:hover { color: var(--texto); }
.lr-plegable summary .flecha {
  margin-left: auto; display: grid; color: var(--texto-3); transition: transform var(--transicion);
}
.lr-plegable[open] summary .flecha { transform: rotate(180deg); }
.lr-cuenta {
  font-size: 12px; font-weight: 600; color: var(--texto-3);
  background: rgba(16, 24, 40, .06); padding: 0 7px; border-radius: var(--r-full);
}
.lr-tecnico { margin: 0 0 var(--e3); }
.lr-tecnico > div {
  display: flex; justify-content: space-between; gap: var(--e4);
  padding: 8px 0; border-bottom: 1px solid var(--linea); font-size: 13.5px;
}
.lr-tecnico > div:last-child { border-bottom: 0; }
.lr-tecnico dt { color: var(--texto-3); }
.lr-tecnico dd { margin: 0; text-align: right; font-weight: 500; color: var(--texto); }
.lr-tecnico .lr-sub { display: inline; margin-left: 4px; }
.lr-nota { margin: 0 0 var(--e3); font-size: 13px; color: var(--texto-3); line-height: 1.5; }
.lr-plegable .traza { padding-bottom: var(--e3); }

@media (max-height: 760px) {
  .modal-lectura .lr-cab { padding-top: 12px; padding-bottom: 12px; }
  .lr-cuerpo { gap: var(--e4); padding-top: var(--e4); }
  .lr-foto-marco img { max-height: 36vh; }
  .lr-grande { font-size: 24px; }
}
@media (max-width: 760px) {
  .modal.modal-lectura { width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
  .modal-lectura .lr-cab { padding: 12px var(--e4); align-items: flex-start; }
  .lr-cuerpo { padding: var(--e4); }
  .lr-revision { grid-template-columns: 1fr; }
  .lr-foto-marco img { max-height: 34vh; }
  .lr-confirmar { padding: var(--e4) var(--e4) 0; }
  .lr-pie { padding: 10px var(--e4); flex-wrap: nowrap; }
  .lr-pie-nota { display: none; }
  .lr-pie .btn { flex: 1 1 0; padding: 0 var(--e3); min-width: 0; }
  
}
@media (max-width: 600px) {
  .lr-cab h2 { font-size: 18px; white-space: nowrap; }
  .lr-cab-linea { flex-wrap: wrap; gap: 6px var(--e2); }
  .lr-contexto { font-size: 13px; }
  .lr-contexto strong + span { display: none; }   /* la descripcion de la maquina */
  .modal-lectura .navegar { gap: 6px; }
  .modal-lectura .navegar a, .modal-lectura .navegar span, .modal-lectura .cerrar-lectura {
    width: 34px; height: 34px;
  }
  .modal-lectura .cerrar-lectura { margin-left: 0; }
}

/* --- Lectura en modal: estilo de la vista Combustible ---------------------
   Misma atmosfera que las paginas (fondo industrial suavizado con velo
   claro), lo detectado en tarjetas de cifra y contenedores de vidrio. La
   distribucion es la de arriba; esto solo cambia la apariencia. */
.modal.modal-lectura {
  position: relative; isolation: isolate;
  background: #f4f4f5; border: 1px solid rgba(255, 255, 255, .8);
}
.modal.modal-lectura::before, .modal.modal-lectura::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
}
.modal.modal-lectura::before {
  background: url("/static/fondo.png") center / cover no-repeat;
  filter: blur(var(--fondo-desenfoque)) saturate(var(--fondo-saturacion));
  transform: scale(1.06);
}
.modal.modal-lectura::after {
  /* Mismo velo que las paginas (variables --velo-*). */
  background: radial-gradient(ellipse 70% 80% at 50% 45%,
    rgba(255, 255, 255, var(--velo-centro)) 0%, rgba(255, 255, 255, var(--velo-borde)) 100%);
}
.modal-lectura::backdrop { background: rgba(20, 24, 32, .28); backdrop-filter: blur(4px); }

/* Encabezado y pie: vidrio claro, como la barra superior de las paginas. */
.modal-lectura .lr-cab, .modal-lectura .lr-pie {
  background: rgba(255, 255, 255, .55);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-color: rgba(255, 255, 255, .6);
}
.lr-cab h2 { font-size: 24px; letter-spacing: -.02em; }
.modal-lectura .navegar a, .modal-lectura .navegar span, .modal-lectura .cerrar-lectura {
  border-color: var(--linea-control); border-radius: var(--r-control);
}
.modal-lectura .navegar span { background: rgba(255, 255, 255, .35); }

/* Foto en tarjeta de vidrio. */
.lr-foto {
  padding: var(--e3); border-radius: 10px;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .5);
  backdrop-filter: blur(18px) saturate(1.15); -webkit-backdrop-filter: blur(18px) saturate(1.15);
  box-shadow: 0 6px 24px rgba(30, 40, 60, .06);
}
.lr-foto-marco { border: 0; }

/* Lo detectado: tarjetas de cifra apiladas (mismo componente que Combustible). */
.lr-detectado {
  display: flex; flex-direction: column; gap: var(--e3);
  border: 0; background: none; border-radius: 10px;
}
.lr-detectado > .cifra-caja { flex: 1; padding: 16px 20px 18px; }
.lr-detectado .cifra-caja .etq { margin-bottom: 8px; }
.lr-detectado .cifra-caja .etq .pin, .lr-detectado .cifra-caja .etq .lr-conf-ok { margin-left: auto; }
.lr-detectado .cifra-caja .cifra { font-size: 28px; }
.lr-detectado .cifra-caja .nota { margin-top: 4px; }
.lr-detectado .cifra-caja .nota.mal { color: var(--peligro); font-weight: 600; }
.lr-detectado .cifra-caja::after { display: none; }   /* sin barra de acento en el modal */
.lr-detectado .lr-sello {
  padding: 12px 20px; border-radius: 10px;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .5);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.lr-detectado .lr-sello.atencion { box-shadow: inset 3px 0 0 var(--aviso); }

/* Valores en firme dentro de las tarjetas de lo detectado. */
.cifra-editable { display: flex; align-items: baseline; gap: 4px; }
.lr-detectado .cifra-editable input[type="text"] {
  grid-area: 1 / 1; width: 100%; min-width: 0; height: auto; padding: 0 6px; margin: 0;
  font-family: inherit; font-size: 28px; font-weight: 600; letter-spacing: -.025em; line-height: 1.2;
  color: inherit; background: transparent;
  border: 1px dashed transparent; border-radius: 8px; box-shadow: none;
  transition: border-color var(--transicion), background var(--transicion);
}
.lr-detectado .cifra-caja.peligro .cifra-editable input,
.lr-detectado .cifra-caja.aviso .cifra-editable input { color: var(--acento); }
.lr-detectado .cifra-editable input[type="text"]:hover { border-color: var(--linea-control); }
.lr-detectado .cifra-editable input[type="text"]:focus {
  outline: none; border-style: solid; border-color: var(--naranja);
  background: rgba(255, 255, 255, .85); box-shadow: 0 0 0 3px var(--naranja-tinte);
}
/* Copia invisible del valor: misma letra y relleno que el campo; la caja
   toma su ancho y el campo la ocupa entera. */
.medida-campo { display: inline-grid; margin-left: -7px; }
.medida-campo .medida {
  grid-area: 1 / 1; visibility: hidden; white-space: pre;
  font-size: 28px; font-weight: 600; letter-spacing: -.025em; line-height: 1.2;
  font-variant-numeric: tabular-nums; padding: 0 8px 0 6px; border: 1px solid transparent;
}
.cifra-editable .lapiz { display: grid; align-self: center; color: var(--texto-3); margin-left: 4px; }
.cifra-editable:focus-within .lapiz { color: var(--naranja); }
.lr-leido { color: var(--texto-3); }
.lr-detectado .seg-tarjeta { margin-top: 10px; }
.lr-detectado .seg-tarjeta span { min-height: 32px; line-height: 32px; font-size: 13px; }

/* Confianza: solo el fondo de color, sin borde. */
.lr-confianza { border: 0; }

/* Confirmar valores y plegables: contenedores de vidrio como las tablas. */
.lr-confirmar, .lr-plegable {
  border-radius: var(--r-tarjeta);
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .5);
  backdrop-filter: blur(18px) saturate(1.15); -webkit-backdrop-filter: blur(18px) saturate(1.15);
  box-shadow: var(--sombra-vidrio);
}
.lr-confirmar { padding: var(--e5) var(--e6); }
.lr-confirmar h3 { font-size: 20px; font-weight: 700; letter-spacing: -.015em; }
.lr-plegable { padding: 0 var(--e5); }
.lr-plegable + .lr-plegable { margin-top: calc(var(--e3) - var(--e5)); }

/* Subtitulos de las vistas justificados: con varias lineas, el borde derecho
   desparejo se veia raro. */
.sec-cab .bajada, .pag-cab .bajada { text-align: justify; hyphens: auto; }
/* Avisos de una pagina, fuera de la tarjeta (Configuracion). */
.aviso-caja.aviso-pagina { margin-bottom: var(--e4); }
/* Buscador en una fila de filtros con etiqueta arriba: alineado abajo con
   los campos, a la izquierda; los filtros quedan a la derecha. */
.filtros-fecha .buscador { align-self: flex-end; flex-basis: 140px; }

/* Cabecera de la cola de revision: titulo, filtros y cifras a lo ancho,
   con el mismo margen lateral que la tabla y la lectura de abajo. */
.cab-area { padding: var(--e2) var(--e6) 0; }
@media (max-width: 768px) { .cab-area { padding: 0 var(--e4); } }
/* Cola de revision centrada y con tope, como Combustible y Configuracion:
   a todo el ancho las columnas se estiraban sin necesidad. */
.cab-area:has(+ .area), .cab-area + .area {
  width: 100%; max-width: 1700px; margin-inline: auto;
}
/* Letra de la tabla de la cola un punto mas grande: se leia muy chica. */
.col-lista thead th { font-size: 13.5px; }
.col-lista .celda-doble .arriba { font-size: 15.5px; }
.col-lista .celda-doble .abajo { font-size: 13.5px; }
.col-lista .celda-momento span { font-size: 15px; }
.col-lista .pin { font-size: 13.5px; }
.cifra-caja.aviso   { --acento: var(--aviso);   --acento-tinte: var(--aviso-bg); }
.cifra-caja.peligro .cifra, .cifra-caja.aviso .cifra { color: var(--acento); }

.sec { font-weight: 600; }
.sub { color: var(--texto-3); font-size: 12.5px; }
.delta {
  display: inline-block; margin-left: 6px; font-size: 12px; font-weight: 700;
  color: var(--aviso); background: var(--aviso-bg);
  border: 1px solid var(--aviso-bd); padding: 0 6px; border-radius: var(--r1);
}

.pagina { padding: var(--e2) var(--e5) var(--e6); max-width: 1220px; }
.pagina .pag-cab, .pagina .triaje { padding-left: 0; padding-right: 0; }
/* El titulo de cada vista arranca 8 px bajo la barra superior. */
.pagina > .pag-cab:first-child { padding-top: 0; }
.pagina .vacio { margin-left: 0; margin-right: 0; }

/* --- Paginas de tabla centradas (Configuracion, Jornadas) --- */
/* Con un tope para que las columnas no se estiren y el mismo aire a
   izquierda y derecha. */
.pagina:has(.config-cab), .pagina.centrada {
  max-width: 1480px; margin-inline: auto; width: 100%;
  padding-left: var(--e6); padding-right: var(--e6);
}
@media (max-width: 768px) {
  .pagina:has(.config-cab), .pagina.centrada { padding-left: var(--e4); padding-right: var(--e4); }
}

/* Filtros de fecha dentro de la tarjeta: etiqueta arriba, boton alineado
   con los campos. */
.filtros-fecha { align-items: flex-end; }
.filtros-fecha .campo label.etiqueta { margin-bottom: 6px; }
.filtros-fecha .btn { min-height: 42px; }
/* La observacion bajo el estado si puede partirse: es texto, no cifra. */
.pagina .tabla-vidrio td .observacion { margin-top: 6px; white-space: normal; max-width: 52ch; }

/* --- Ruta, filtros de lista y pestañas --- */
/* Ruta en la barra superior: Inicio › Configuración › Máquinas. */
.ruta { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; font-size: 14px; min-height: 44px; }
.ruta a { color: var(--texto-3); text-decoration: none; padding: 2px 4px; border-radius: 6px; }
.ruta a:hover { color: var(--texto); background: rgba(255, 255, 255, .6); }
.ruta .sep { color: var(--s300); margin: 0 4px; }
.ruta .aqui { color: var(--texto); font-weight: 600; padding: 2px 4px; }

/* Buscador y filtros de una lista, entre el titulo y la tabla. Cada filtro
   lleva su nombre chico arriba del valor, como un campo rotulado. */
.filtros-lista { align-items: stretch; }
.filtros-lista .buscador { flex: 1 1 280px; max-width: 520px; margin-right: auto; }
.filtros-lista .buscador input[type="text"] {
  height: 52px; border-radius: var(--r-control); border-color: var(--linea-control);
  background: var(--panel); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none;
}
.filtro-rotulado {
  position: relative; display: block; min-width: 180px; flex: 0 1 200px;
}
.filtro-rotulado .rotulo-filtro {
  position: absolute; left: 15px; top: 7px; pointer-events: none;
  font-size: 11.5px; color: var(--texto-3);
}
.filtros .filtro-rotulado select, .filtros .filtro-rotulado input[type="date"] {
  width: 100%; height: 52px; padding: 18px 36px 0 14px;
  font-size: 14.5px; font-weight: 500; cursor: pointer;
}
@media (max-width: 768px) {
  .filtro-rotulado { flex: 1 1 150px; min-width: 0; }
  .filtros-lista .buscador { flex-basis: 100%; max-width: none; }
}
/* Fechas rotuladas: el texto no lleva la flecha del select. */
.filtros .filtro-rotulado input[type="date"] { padding-right: 12px; }
/* El boton de una fila de filtros rotulados, a la misma altura. */
.filtros-lista > .btn { min-height: 52px; align-self: stretch; }
.sin-coincidencias td { text-align: center; color: var(--texto-3); padding: var(--e6) !important; }

.config-cab { padding-top: var(--e4); }
.config-cab .migas {
  display: block; font-size: 13px; font-weight: 600; color: var(--texto-3);
  margin-bottom: 0;
}
.config-cab .migas .sep { margin: 0 4px; }
.config-cab .migas .aqui { color: var(--naranja-hondo); }
.pestanas {
  display: inline-flex; gap: 4px; padding: 4px; max-width: 100%; overflow-x: auto;
  background: var(--vidrio); border: 1px solid var(--vidrio-borde);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: 10px; box-shadow: var(--sombra-vidrio);
}
.pestanas a {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  min-height: 38px; padding: 0 var(--e4); border-radius: 10px;
  color: var(--texto-2); text-decoration: none; font-size: 14px; font-weight: 500;
  transition: background var(--transicion), color var(--transicion);
}
/* Al pasar, como la barra lateral: naranja y el nombre crece un poco. */
.pestanas a:hover { background: color-mix(in srgb, var(--naranja-tinte) 45%, transparent); color: var(--naranja-hondo); }
/* Pestaña actual: misma lectura que la opcion activa de la barra lateral. */
.pestanas a.activa {
  background: color-mix(in srgb, var(--naranja) 12%, var(--panel));
  color: var(--naranja-hondo); font-weight: 600;
}
.pestanas a.activa .ic { color: var(--naranja); }
/* Pestanas que unen las paginas de una misma vista (Liquidacion): entre el
   titulo y los filtros, con el mismo aire que separa los filtros de la tabla. */
.pestanas.pestanas-vista { margin-bottom: var(--e5); }

.pag-cab { padding: var(--e5) var(--e5) var(--e4); }
.pag-cab h1 { margin: 0 0 2px; font-size: 27px; font-weight: 700; letter-spacing: -.025em; }
.pag-cab .bajada { margin: 0; color: var(--texto-3); font-size: 14px; max-width: 70ch; }

.tabla-caja {
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: var(--r3); box-shadow: var(--sombra1); overflow: hidden;
}
.seccion-tit { display: flex; align-items: baseline; gap: var(--e2); margin: var(--e6) 0 var(--e3); }
.seccion-tit h2 { font-size: 17px; font-weight: 680; margin: 0; }
.seccion-tit .cont { font-size: 13.5px; color: var(--texto-3); }
.dos-col { display: grid; gap: var(--e5); align-items: start;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.panel { background: var(--panel); border: 1px solid var(--borde);
  border-radius: var(--r2); box-shadow: var(--sombra1); overflow: hidden; }
.panel > .cab {
  padding: var(--e3) var(--e4); border-bottom: 1px solid var(--borde-sutil);
  background: var(--panel-alt); font-size: 13px; font-weight: 650; color: var(--texto-2);
  display: flex; align-items: center; justify-content: space-between; gap: var(--e2);
}
.panel > .interior { padding: var(--e4); }
.par { display: flex; justify-content: space-between; gap: var(--e3);
  padding: 9px 0; border-bottom: 1px solid var(--borde-sutil); }
.par:last-child { border-bottom: 0; }
.par .k { color: var(--texto-3); font-size: 13.5px; }
.par .v { font-weight: 600; text-align: right; }
.campo-grupo { margin-bottom: var(--e4); }
.triaje { display: flex; flex-direction: column; gap: var(--e3); padding: 0 var(--e5) var(--e5); }
.caso-tarjeta {
  display: grid; grid-template-columns: 104px 1fr auto; gap: var(--e4);
  background: var(--panel); border: 1px solid var(--borde);
  border-left: 4px solid var(--s300);
  border-radius: var(--r2); padding: var(--e4);
}
.caso-tarjeta.BLOQUEO { border-left-color: var(--peligro); }
.caso-tarjeta.ALERTA  { border-left-color: var(--aviso); }
.caso-tarjeta.OK      { border-left-color: var(--bien); }
.caso-tarjeta .miniatura {
  width: 104px; height: 78px; border-radius: var(--r1); overflow: hidden;
  border: 1px solid var(--borde); display: block; background: var(--panel-alt);
}
.caso-tarjeta .miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.caso-tarjeta .linea1 { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.caso-tarjeta .maquina { font-weight: 650; font-size: 15px; }
.caso-tarjeta .meta { color: var(--texto-3); font-size: 12.5px; }
.caso-tarjeta .motivo { color: var(--texto-2); font-size: 13.5px; margin: var(--e2) 0 0; }
.caso-tarjeta .lecturas { display: flex; gap: var(--e5); margin-top: var(--e3); flex-wrap: wrap; }
.dato .etq { font-size: 11px; font-weight: 600; color: var(--texto-3); }
.dato .val { font-size: 17px; font-weight: 650; }

/* --- Adaptacion: 1440 / 1180 / 1024 / 768 / 375 -------------------------- */

@media (max-width: 1440px) {
  .area > .col-detalle { flex-basis: 400px; }
}

@media (max-width: 1180px) {
  /* El detalle deja de caber al lado: pasa debajo, a lo ancho. */
  .area { flex-direction: column; }
  .area > .col-detalle { flex: 1 1 auto; width: 100%; position: static; }
  .meta-tira { grid-template-columns: repeat(2, 1fr); }
  .dos-col { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
  .marco { flex-direction: column; }
  .lateral {
    position: static; height: auto; width: auto; flex: none;
    flex-direction: row; align-items: center; gap: var(--e4);
    padding: var(--e2) var(--e4); overflow-x: auto;
    border-right: 0; border-bottom: 1px solid var(--borde);
  }
  .menu { flex-direction: row; gap: var(--e1); }
  .menu a { white-space: nowrap; padding: 0 11px; }
  /* El pie (Configuracion) sigue en la fila horizontal, al final. */
  .menu-pie { margin: 0; flex-direction: row; }
  /* En la barra horizontal, Configuracion abre su lista flotando debajo. */
  .lateral { overflow: visible; flex-wrap: wrap; }
  /* Las vistas diarias se deslizan dentro de su fila: sin esto la barra
     estiraba la pagina a lo ancho en el celular. */
  .lateral > nav.menu { position: relative; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .lateral > nav.menu::-webkit-scrollbar { display: none; }
  .grupo-menu { position: relative; }
  .grupo-menu summary { white-space: nowrap; }
  .grupo-menu .submenu {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 40;
    min-width: 200px; margin: 0; padding: 6px; border-left: 0;
    background: var(--vidrio-fuerte); border: 1px solid var(--vidrio-borde);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-radius: 10px; box-shadow: var(--sombra-vidrio);
  }
  .sec-cab h1, .pag-cab h1 { font-size: 23px; }
}

@media (max-width: 768px) {
  .superior { min-height: 64px; padding: var(--e3) var(--e4); flex-wrap: wrap; }
  .area { padding: 0 var(--e4) var(--e4); }
  .sec-cab, .filtros, .paginacion, .pag-cab, .triaje {
    padding-left: var(--e4); padding-right: var(--e4);
  }
  .pagina { padding: var(--e2) var(--e4) var(--e5); }
  .chips { margin-left: 0; width: 100%; }
  .chip { flex: 1 1 72px; min-width: 0; }
  .fecha-hoy { display: none; }
  .campo-linea { grid-template-columns: 1fr; gap: var(--e1); }
  .caso-tarjeta { grid-template-columns: 74px 1fr; }
  .caso-tarjeta .miniatura { width: 74px; height: 58px; }
}

@media (max-width: 420px) {
  .meta-tira { grid-template-columns: 1fr; }
  .detectado .linea { grid-template-columns: 22px 1fr auto; row-gap: 6px; }
  .detectado .medidor, .detectado .editar { grid-column: 2 / -1; }
  .seg { flex-wrap: wrap; }
  .seg label.seg-op { flex: 1 0 33%; }
}

/* =========================================================================
   Utilidades y piezas de cada vista
   Lo que antes iba en style="" y en bloques <style> dentro de las plantillas.
   Una sola fuente: si cambia el ritmo vertical o una pieza, cambia aqui y no
   repartido en cuarenta atributos. Va al final para ganarle, por orden, a las
   reglas generales de la misma especificidad.
   ========================================================================= */

/* --- Espaciado ----------------------------------------------------------- */
.mt-1 { margin-top: var(--e1); }
.mt-3 { margin-top: var(--e3); }
.mt-4 { margin-top: var(--e4); }
.mt-5 { margin-top: var(--e5); }
.mt-6 { margin-top: var(--e6); }

/* --- Piezas genericas ---------------------------------------------------- */
.aparte { display: block; }
.al-derecha { text-align: right; }
.texto-peligro { color: var(--peligro); }
.marca-lockup { text-decoration: none; }
.pagina.estrecha { max-width: 720px; }

/* Nota al pie de un formulario o de una tarjeta. La tenue es la letra chica. */
.nota-txt { margin: var(--e4) 0 0; font-size: 13px; color: var(--texto-2); }
.nota-txt.tenue { margin-top: var(--e3); font-size: 12.5px; color: var(--texto-3); }

/* Errores de un formulario, listados dentro del aviso. */
.lista-errores { margin: 6px 0 0; padding-left: 18px; }

/* Fila "sin datos" de una tabla: la celda no agrega relleno y el estado vacio
   no dibuja un segundo marco dentro de la tarjeta. */
tbody td.celda-vacia,
.pagina .tabla-vidrio tbody td.celda-vacia { padding: 0; }
.vacio.sin-marco { border: 0; background: transparent; }

/* Parrafos dentro de un estado vacio: el boton que propone el siguiente paso,
   y la nota que dice donde si hay datos. `.vacio p` les quitaria el margen. */
.vacio .vacio-accion { margin-top: var(--e4); }
.vacio .vacio-nota { margin-top: var(--e3); }

/* Barra de botones al pie de una tarjeta. */
.acciones.con-relleno { padding: var(--e4); }

/* Campo con su boton al lado, en una sola fila. */
.campo-en-linea { display: flex; gap: var(--e2); margin-top: 6px; }
.campo-en-linea > input { flex: 1; }

/* --- Tarjetas de vidrio en dos columnas (WhatsApp, Cargar) --------------- */
/* Armadas con las tarjetas de las demas vistas; aqui solo lo que esas piezas
   no traen cuando van lado a lado y con contenido que no es una tabla. */
.aviso-caja .faltante { display: block; margin-top: 6px; }
/* Dos tarjetas lado a lado no llevan el margen de "una tras otra". */
.dos-col > .tabla-vidrio + .tabla-vidrio { margin-top: 0; }
/* En tarjeta angosta la tabla reduce su margen lateral, pero el titulo, los
   avisos y el formulario no: la tabla clave/valor se alinea con ellos. */
.dos-col .tabla-vidrio tbody td:first-child { padding-left: var(--e6); }
.dos-col .tabla-vidrio tbody td:last-child { padding-right: var(--e6); }
/* El estado a la derecha del titulo de la tarjeta, sin encogerse. */
.tabla-vidrio .sec-cab > .pin { flex: none; }
/* Aviso que sigue a una tabla dentro de la tarjeta: con aire arriba. */
.tabla-vidrio table + .aviso-en-tarjeta { margin-top: var(--e5); }
/* Contenido libre (formulario, notas) alineado con las columnas de la tabla.
   Tras una tabla lleva su linea; justo bajo el titulo, no la necesita. */
.tabla-vidrio > .cuerpo-tarjeta {
  padding: var(--e5) var(--e6); border-top: 1px solid var(--linea);
}
.tabla-vidrio > .sec-cab + .cuerpo-tarjeta { border-top: 0; padding-top: 0; }
.cuerpo-tarjeta > :first-child { margin-top: 0; }

/* --- Catalogos (/maquinas, /operadores, /frentes, /tarifas) -------------- */
/* En una sola linea, como las filas de la cola: si no cabe, la tabla se desliza. */
.acciones-fila { display: flex; gap: 6px; justify-content: flex-start; flex-wrap: nowrap; }
.acciones-fila form { display: contents; }
/* Activar y Desactivar miden lo mismo: la columna no baila al cambiar. */
.acciones-fila .btn-alternar { min-width: 9em; }
td.centro .acciones-fila { justify-content: center; }
/* Lo inactivo sigue visible pero se retira del primer plano. Las acciones
   y el chip de estado no: atenuados, los botones parecerian deshabilitados
   y el "Inactivo" costaria leerlo. */
tr.inactiva td:not(:last-child):not(:has(.pin)) { opacity: .55; }

/* --- Banco de pruebas del motor (/cargar y /analisis) -------------------- */
.zona-soltar {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: var(--e7) var(--e4); text-align: center; cursor: pointer;
  border: 2px dashed var(--borde); border-radius: var(--r2);
  background: var(--panel-alt); transition: border-color .15s, background .15s;
}
/* Al pasar, el punteado se tiñe de naranja sin llegar al de marca: avisa que
   la zona responde sin gritar. */
.zona-soltar:hover, .zona-soltar.encima {
  border-color: color-mix(in srgb, var(--naranja) 40%, var(--borde));
  background: var(--marca-tenue);
}
/* Las dos tarjetas a la misma altura. La zona de soltar se estira y ocupa el
   alto que sobra, en vez de dejar un hueco al pie de la tarjeta. */
.dos-col.parejas { align-items: stretch; }
.dos-col.parejas > .tarjeta { display: flex; flex-direction: column; }
.dos-col.parejas .cuerpo-tarjeta:has(> form),
.dos-col.parejas .cuerpo-tarjeta > form { flex: 1; display: flex; flex-direction: column; }
.dos-col.parejas .zona-soltar { flex: 1; }
.zona-soltar .icono { font-size: 30px; line-height: 1; }
.zona-soltar .titular { font-weight: 650; font-size: 15px; }
.zona-soltar .sub { font-size: 13px; color: var(--texto-3); }

.elegidas { list-style: none; margin: var(--e3) 0 0; padding: 0;
  max-height: 260px; overflow-y: auto; }
.elegidas li {
  display: flex; justify-content: space-between; gap: var(--e3);
  padding: 7px 10px; border: 1px solid var(--borde-sutil); border-radius: var(--r1);
  margin-bottom: 4px; font-size: 13px; background: var(--panel);
}
.elegidas li .peso { color: var(--texto-3); font-variant-numeric: tabular-nums; }

.agujas { margin-top: var(--e3); }
.agujas summary {
  display: flex; align-items: center; gap: 7px;
  font-size: 13.5px; color: var(--texto-2);
  padding: 7px 10px; border: 1px solid var(--borde); border-radius: var(--r1);
  background: var(--panel-alt); list-style: none;
}
.agujas summary::-webkit-details-marker { display: none; }
.agujas summary:hover { border-color: var(--naranja); color: var(--texto); }
.agujas[open] summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.agujas-cuerpo {
  border: 1px solid var(--borde); border-top: 0;
  border-radius: 0 0 var(--r1) var(--r1); padding: var(--e3);
}
.agujas-cuerpo img {
  width: 100%; max-width: 560px; display: block; border-radius: var(--r1);
  border: 1px solid var(--borde); margin-bottom: var(--e3);
}
.agujas-cuerpo .sub { margin: var(--e2) 0 0; }
.tabla-agujas { font-size: 13px; }
.tabla-agujas th, .tabla-agujas td { padding: 5px 10px; }

.verdad { display: flex; flex-direction: column; min-width: 172px; }
.verdad .etiqueta { margin-bottom: 3px; }
.verdad input + .etiqueta { margin-top: 6px; }
.verdad .btn { margin-top: var(--e2); }
.accion.estirada { align-items: stretch; }
.caso-tarjeta.OK { border-left-color: var(--bien); }

/* --- Bloques plegables (Liquidación › Resumen por jornada) --------------- */
/* Primer nivel como en una tabla dinámica: el encabezado del bloque resume
   (cuántas jornadas y cuánto suman) y al hacer clic despliega los registros.
   Es un <details>: abre y cierra con teclado sin código propio. */
.bloque-plegable > summary {
  list-style: none; cursor: pointer; user-select: none;
  transition: background var(--transicion);
}
/* Al pasar, toda la banda toma el mismo naranja tenue que el hover de la
   barra lateral. La tarjeta recorta las esquinas (overflow: hidden). */
.bloque-plegable > summary:hover { background: color-mix(in srgb, var(--naranja-tinte) 45%, transparent); }
.bloque-plegable > summary::-webkit-details-marker { display: none; }
.bloque-plegable > summary:focus-visible { outline: 2px solid var(--naranja); outline-offset: -2px; border-radius: var(--r-tarjeta); }
.pagina .tabla-vidrio.bloque-plegable > .sec-cab { align-items: center; gap: var(--e4); }
/* La flecha va primero, asi que el titulo crece por su cuenta. */
.pagina .tabla-vidrio.bloque-plegable > .sec-cab > div { flex: 1 1 auto; min-width: 0; }
.flecha-bloque {
  flex: none; width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 10px; color: var(--texto-3);
  background: color-mix(in srgb, var(--texto-3) 8%, transparent);
  transition: transform var(--transicion), color var(--transicion), background var(--transicion);
}
.bloque-plegable[open] .flecha-bloque { transform: rotate(180deg); }
/* Al pasar, como la barra lateral: el titulo y la flecha toman el naranja. */
.bloque-plegable > summary:hover .tit-tarjeta,
.bloque-plegable > summary:hover .flecha-bloque { color: var(--naranja-hondo); }
.bloque-plegable > summary:hover .flecha-bloque { background: color-mix(in srgb, var(--naranja-tinte) 60%, transparent); }
.bloque-plegable > summary .tit-tarjeta { transition: color var(--transicion); }
/* Los totales del bloque, a la derecha, legibles sin abrirlo. */
/* Cada cifra centrada bajo su etiqueta. */
.totales-bloque { display: flex; gap: var(--e6); margin: 0 0 0 auto; flex: none; text-align: center; }
.totales-bloque dt { font-size: 12px; color: var(--texto-3); margin-bottom: 2px; }
.totales-bloque dd { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
/* Cerrado, el encabezado es todo el bloque: sin el aire inferior del titulo. */
.bloque-plegable:not([open]) > .sec-cab { padding-bottom: var(--e6); }
@media (max-width: 900px) { .totales-bloque { gap: var(--e4); } .totales-bloque dd { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .flecha-bloque { transition: none; } }

/* --- Diálogo de confirmación (Cerrar período) ----------------------------- */
/* El mismo modal de Configuración, más angosto: una pregunta, lo que implica
   y dos botones. */
.modal.modal-confirmar { width: min(560px, calc(100vw - 32px)); }
.modal-confirmar .modal-texto { margin: 0 0 var(--e5); font-size: 15px; line-height: 1.55; color: var(--texto-2); }
.resumen-cierre {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e3);
  margin: 0 0 var(--e5);
}
.resumen-cierre > div {
  padding: var(--e3) var(--e4); border-radius: var(--r2);
  background: color-mix(in srgb, var(--naranja-tinte) 40%, var(--panel));
}
.resumen-cierre dt { font-size: 12px; color: var(--texto-3); margin-bottom: 2px; }
.resumen-cierre dd { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.modal-confirmar .form-acciones { margin-top: var(--e5); }
@media (max-width: 560px) { .resumen-cierre { grid-template-columns: 1fr; } }

/* --- Barra de herramientas (Liquidación › Resumen por jornada) ---------- */
/* Una línea: filtros a la izquierda, separador, y lo que se hace con el
   período (exportar, cerrar) a la derecha. Si no cabe, se parte en dos y el
   separador sobra. */
.barra-herramientas {
  display: flex; align-items: flex-end; gap: var(--e3);
  padding: var(--e4); margin-bottom: var(--e5);
  /* Por delante de los bloques de abajo: su vidrio crea capa propia y, sin
     esto, taparía el menú de Exportar. */
  position: relative; z-index: 5;
  background: var(--vidrio); border: 1px solid var(--vidrio-borde);
  border-radius: var(--r-tarjeta); box-shadow: var(--sombra-vidrio);
  backdrop-filter: blur(var(--vidrio-blur)); -webkit-backdrop-filter: blur(var(--vidrio-blur));
}
.barra-herramientas > .filtros { padding: 0; margin: 0; flex: 1 1 auto; min-width: 0; }
.barra-separador { flex: none; align-self: stretch; width: 1px; background: var(--linea-control); }
.barra-acciones { display: flex; align-items: flex-end; gap: var(--e2); flex: none; }
/* Botones y fechas más ceñidos que en otras vistas: así la barra entera cabe
   en una línea desde ~1440 px de pantalla. */
.barra-herramientas .btn { min-height: 42px; padding: 0 var(--e4); }
.barra-herramientas .filtros input[type="date"] { width: 138px; padding: 0 var(--e3); }
@media (max-width: 1180px) {
  .barra-herramientas { flex-wrap: wrap; }
  .barra-separador { display: none; }
}

/* --- Menú desplegable (Exportar) ----------------------------------------- */
.desplegable { position: relative; }
.flecha-desplegable { display: inline-flex; margin-left: -2px; }
.flecha-desplegable .ic { transition: transform var(--transicion); }
[data-desplegable][aria-expanded="true"] .flecha-desplegable .ic { transform: rotate(180deg); }
.menu-desplegable {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 100%;
  display: grid; gap: 2px; padding: 6px;
  background: var(--panel); border: 1px solid var(--linea-control); border-radius: 12px;
  box-shadow: 0 12px 30px rgba(20, 24, 32, .14);
}
.menu-desplegable[hidden] { display: none; }
.menu-desplegable a {
  display: flex; align-items: center; gap: 10px; white-space: nowrap;
  padding: 9px 12px; border-radius: 8px;
  color: var(--texto); text-decoration: none; font-size: 14px; font-weight: 500;
  transition: background var(--transicion), color var(--transicion);
}
.menu-desplegable a .ic { color: var(--texto-3); transition: color var(--transicion); }
/* Al pasar, como la barra lateral. */
.menu-desplegable a:hover, .menu-desplegable a:focus-visible {
  background: color-mix(in srgb, var(--naranja-tinte) 45%, transparent); color: var(--naranja-hondo); outline: none;
}
.menu-desplegable a:hover .ic, .menu-desplegable a:focus-visible .ic { color: var(--naranja); }
@media (prefers-reduced-motion: reduce) { .flecha-desplegable .ic { transition: none; } }

/* --- Inicio: el día de la operación ------------------------------------- */
/* Título de una sección suelta de la página (fuera de tarjeta), un escalón
   por debajo del h1 de la vista. */
.tit-seccion { margin: 0 0 4px; font-size: 20px; font-weight: 700; letter-spacing: -.015em; color: var(--texto); }
/* Selector de día a la derecha del título. */
.sec-cab.cab-vista > .filtros-dia { padding: 0; margin: 0 0 0 auto; flex: none; flex-wrap: nowrap; }
.filtros-dia .filtro-rotulado { min-width: 170px; }
.titulo-alerta { font-weight: 600; color: var(--texto); }

/* Una tarjeta por máquina, en rejilla que se acomoda al ancho. */
.maquinas-hoy {
  display: grid; gap: var(--e4);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.maquina-hoy {
  display: flex; flex-direction: column; gap: var(--e4);
  padding: var(--e5); min-width: 0;
}
.maquina-hoy.sin_reportar { opacity: .72; }
.maquina-hoy header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e3); }
.maquina-hoy h3 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.maquina-hoy header .sub { display: block; margin-top: 2px; }
.maquina-hoy header .pin { flex: none; }
.operador-hoy { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 500; color: var(--texto-2); }
.operador-hoy .ic { color: var(--texto-3); flex: none; }

/* Los cinco momentos como una línea de avance: punto lleno si llegó la foto. */
.pasos-hoy {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); position: relative;
}
.pasos-hoy::before {
  content: ""; position: absolute; left: 10%; right: 10%; top: 6px; height: 2px;
  background: var(--linea-control);
}
.pasos-hoy li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.pasos-hoy .punto {
  width: 14px; height: 14px; border-radius: 50%; z-index: 1;
  background: var(--panel); border: 2px solid var(--linea-control);
}
.pasos-hoy li.hecho .punto { background: var(--naranja); border-color: var(--naranja); }
.pasos-hoy .nombre { font-size: 11.5px; color: var(--texto-3); }
.pasos-hoy li.hecho .nombre { color: var(--texto-2); font-weight: 600; }
.pasos-hoy .hora { font-size: 12px; color: var(--texto); font-variant-numeric: tabular-nums; }
.pasos-hoy li:not(.hecho) .hora { color: var(--s300); }

/* Combustible: ocho segmentos, como los octavos del medidor del tablero. */
.combustible-hoy {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3);
  padding-top: var(--e4); border-top: 1px solid var(--linea);
}
.combustible-hoy .rotulo { display: flex; align-items: center; gap: 6px; width: 100%; font-size: 12.5px; color: var(--texto-3); }
.medidor-octavos { display: flex; gap: 3px; }
.medidor-octavos span {
  width: 14px; height: 22px; border-radius: 3px;
  background: color-mix(in srgb, var(--texto-3) 14%, transparent);
}
.medidor-octavos.OK span.lleno { background: var(--bien); }
.medidor-octavos.ALERTA span.lleno { background: var(--aviso); }
.medidor-octavos.BLOQUEO span.lleno { background: var(--peligro); }
.combustible-datos { display: flex; flex-direction: column; line-height: 1.25; font-size: 13px; color: var(--texto-2); }
.combustible-datos strong { font-size: 16px; color: var(--texto); }
.aviso-tanqueo { margin-left: auto; }

/* Lo que la máquina tiene detenido, con acceso directo a la cola filtrada. */
.detenidas-hoy {
  display: flex; align-items: center; gap: 6px; margin-top: auto;
  padding: 8px 12px; border-radius: 10px; text-decoration: none;
  font-size: 13.5px; font-weight: 600; color: var(--peligro); background: var(--peligro-bg);
  transition: filter var(--transicion);
}
.detenidas-hoy .ic:last-child { margin-left: auto; }
.detenidas-hoy:hover { filter: brightness(.97); }