/* =========================================================
   Pesaje de camiones · Balanza → ERP
   Hoja única, sin frameworks ni build.

   Índice
   0. Fuentes
   1. Tokens (tema claro / oscuro)
   2. Base y reset
   3. Utilidades (sr-only, íconos, mono, etiquetas, teclas)
   4. Rejilla y paneles
   5. Barra de aplicación y migas
   6. Estados de conexión y de estabilidad
   7. Instrumento (carcasa, LCD, capacidad, botonera)
   8. Captura (placa, botón principal, motivo)
   9. Formularios y controles
  10. Cálculo (bruto / tara / neto)
  11. Tabla de registros y estado vacío
  12. Log de depuración
  13. Alertas y toasts
  14. Pie
  15. Modo operador
  16. Responsive
  17. Tema oscuro
  18. Movimiento reducido
   ========================================================= */

/* ============================ 0. FUENTES ============================ */
@font-face {
  font-family: 'DSEG7 Classic';
  src: url('https://cdn.jsdelivr.net/npm/dseg@0.46.0/fonts/DSEG7-Classic/DSEG7Classic-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* =========================== 1. TOKENS ============================== */
:root {
  --f-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --f-lcd: 'DSEG7 Classic', 'IBM Plex Mono', ui-monospace, monospace;

  --fs-display: clamp(4.5rem, 12vw, 7.5rem);   /* dígitos LCD: 72–120 px */

  /* Neutros azulados (fondo de la aplicación) */
  --fondo: #EEF1F5;
  --panel: #F8FAFC;
  --panel-2: #EFF3F8;
  --linea: #D5DBE5;
  --linea-2: #BEC7D6;
  --linea-suave: #E7ECF3;
  --zebra: rgba(27, 39, 69, 0.025);
  --hover: rgba(27, 39, 69, 0.05);
  --input-bg: #FFFFFF;
  --tinta: #1B2745;
  --tinta-2: #3E4A70;
  --tinta-3: #5E6A88;

  /* Carcasa del indicador: azul industrial (cabeceras y estructura) */
  --carcasa: #1F3F94;
  --carcasa-oscuro: #172F72;
  --carcasa-txt: #EDF1F8;

  /* Acción primaria: tecla amarilla de la botonera */
  --acento: #F5D90A;
  --acento-hover: #FFE84A;
  --acento-active: #E3C906;
  --acento-borde: #C9B200;
  --acento-txt: #8A6100;
  --foco: #1F3F94;
  --texto-btn: #1B2745;

  /* Semánticos: siempre con ícono + texto */
  --verde-txt: #0E6B3D;
  --verde-fondo: #E4F3EA;
  --verde-borde: #AFDCC4;
  --ambar-txt: #8A6100;
  --ambar-fondo: #FFF4E0;
  --ambar-borde: #EBCE93;
  --rojo-txt: #B3261E;
  --rojo-fondo: #FBE9E7;
  --rojo-borde: #F0BDB8;

  /* Indicador industrial (estilo Dini Argeo, reinterpretado sin marca) */
  --carcasa-txt-2: #A9BCE6;
  --lcd-fondo: #8DBBE3;
  --lcd-centro: #B7D6EF;
  --lcd-digito: #1B2745;
  --lcd-digito-apagado: rgba(27, 39, 69, 0.07);
  --lcd-borde: #5E7FB8;
  --tecla-amarilla: #F5D90A;
  --tecla-amarilla-active: #E3C906;
  --tecla-azul: #34487E;
  --tecla-azul-hover: #3E5594;
  --tecla-azul-txt: #EDF1F8;
  --acero: #C9CED6;
  --led-rojo: #C0212B;
  --led-rojo-apagado: rgba(192, 33, 43, 0.16);

  --barra-bg: #F8FAFC;
  --log-borde: #2A3550;

  --sombra-1: 0 6px 18px rgba(23, 47, 114, 0.16);
  --sombra-2: 0 14px 34px rgba(23, 47, 114, 0.22);

  --radio-panel: 6px;
  --radio-ctrl: 4px;
  --radio-chip: 3px;
  --trans: 140ms ease;
}

/* ========================= 2. BASE Y RESET ========================== */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--fondo);
  color: var(--tinta);
  font: 400 14px/1.5 var(--f-sans);
  -webkit-font-smoothing: antialiased;
}

h1, h2, p, ol, ul, dl, dd, dt, figure, fieldset { margin: 0; padding: 0; }
ol, ul { list-style: none; }

button, input, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

button { cursor: pointer; }
button:disabled { cursor: not-allowed; }

a { color: var(--tinta-2); text-decoration: none; }
a:hover { color: var(--tinta); text-decoration: underline; }

code {
  font: 500 12.5px/1.4 var(--f-mono);
  background: var(--panel-2);
  border: 1px solid var(--linea);
  border-radius: var(--radio-chip);
  padding: 1px 4px;
  color: var(--tinta-2);
}

[hidden] { display: none !important; }

::selection { background: rgba(224, 138, 30, 0.3); }

:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
  border-radius: var(--radio-ctrl);
}

/* ========================== 3. UTILIDADES =========================== */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.ico {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico--13 { width: 13px; height: 13px; }
.ico--14 { width: 14px; height: 14px; }
.ico--16 { width: 16px; height: 16px; }
.ico--18 { width: 18px; height: 18px; }
.ico--28 { width: 28px; height: 28px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.salto {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 99;
  padding: 10px 14px;
  background: var(--acento);
  color: var(--texto-btn);
  border: 1px solid var(--acento-borde);
  border-radius: var(--radio-ctrl);
  font-weight: 600;
  transition: top var(--trans);
}
.salto:focus { top: 12px; text-decoration: none; }

.mono {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
}

.et {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-3);
  line-height: 1.3;
}

.ayuda {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--tinta-3);
}
.ayuda--arriba { margin-bottom: 2px; }

.k {
  display: inline-block;
  font: 600 10.5px/1 var(--f-mono);
  letter-spacing: 0.05em;
  padding: 4px 5px;
  border-radius: var(--radio-chip);
  background: var(--panel-2);
  border: 1px solid var(--linea);
  color: var(--tinta-2);
}
.k--clave {
  background: rgba(26, 17, 6, 0.14);
  border-color: rgba(26, 17, 6, 0.3);
  color: #3A2405;
}
.k--claro {
  background: var(--panel-2);
  border-color: var(--linea-2);
  color: var(--tinta-2);
}

/* Tooltips (atributo data-tooltip) */
[data-tooltip] { position: relative; }

[data-tooltip]:not([data-tooltip = ""])::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%);
  z-index: 60;
  width: max-content;
  max-width: 270px;
  padding: 8px 10px;
  border-radius: var(--radio-ctrl);
  background: #131A21;
  color: #E7EBEF;
  border: 1px solid #2A333C;
  font: 400 12px/1.45 var(--f-sans);
  text-transform: none;
  letter-spacing: 0;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--trans), visibility var(--trans);
  box-shadow: var(--sombra-1);
}

[data-tooltip]:not([data-tooltip = ""]):hover::after,
[data-tooltip]:not([data-tooltip = ""]):focus-visible::after {
  opacity: 1;
  visibility: visible;
}

.barra__acciones [data-tooltip]::after {
  left: auto;
  right: 0;
  transform: none;
}

/* ====================== 4. REJILLA Y PANELES ======================== */
.rejilla {
  max-width: 1560px;
  margin: 0 auto;
  padding: 20px 24px 28px;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  align-items: start;
}

.col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.panel {
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio-panel);
}

.panel__cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  min-height: 46px;
  padding: 8px 14px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--linea);
  border-radius: var(--radio-panel) var(--radio-panel) 0 0;
}

.panel__tit {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.panel__tit .ico { color: var(--tinta-3); }

.panel__tit h2,
.panel__tit-txt {
  font-size: 14px;
  font-weight: 600;
  color: var(--tinta);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.panel__meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  min-width: 0;
}

.meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--tinta-3);
  white-space: nowrap;
}

.panel__cuerpo { padding: 14px; }

/* Cabecera azul carcasa: pantalla de pesaje */
.panel__cab--carcasa {
  background: linear-gradient(180deg, var(--carcasa), var(--carcasa-oscuro));
  border-bottom-color: var(--carcasa-oscuro);
  color: var(--carcasa-txt);
}
.panel__cab--carcasa h2,
.panel__cab--carcasa .panel__tit .ico { color: var(--carcasa-txt); }
.panel__cab--carcasa .meta,
.panel__cab--carcasa .meta .ico { color: var(--carcasa-txt-2); }
.panel__cuerpo--sin-pad { padding: 0; }

.cab-acciones {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.contador {
  font: 600 11px/1 var(--f-mono);
  letter-spacing: 0.04em;
  padding: 4px 6px;
  border-radius: var(--radio-chip);
  background: var(--panel);
  border: 1px solid var(--linea);
  color: var(--tinta-2);
}

/* Botones base */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid var(--linea-2);
  border-radius: var(--radio-ctrl);
  background: var(--panel);
  color: var(--tinta);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: background var(--trans), border-color var(--trans), color var(--trans);
}
.btn:hover:not(:disabled) { background: var(--panel-2); border-color: var(--tinta-3); }
.btn:active:not(:disabled) { background: var(--linea); }
.btn:disabled {
  background: var(--panel-2);
  border-color: var(--linea);
  color: var(--tinta-3);
}

.btn--primario {
  background: var(--acento);
  border-color: var(--acento-borde);
  color: var(--texto-btn);
}
.btn--primario:hover:not(:disabled) { background: var(--acento-hover); border-color: var(--acento-borde); }
.btn--primario:active:not(:disabled) { background: var(--acento-active); }
.btn--primario:disabled {
  background: var(--panel-2);
  border-color: var(--linea-2);
  color: var(--tinta-3);
}

.btn--sm { min-height: 30px; padding: 0 10px; font-size: 12.5px; gap: 6px; }
.btn--icono { padding: 0 11px; }
.btn--fantasma { background: transparent; border-color: transparent; color: var(--tinta-2); }
.btn--fantasma:hover:not(:disabled) { background: var(--panel-2); border-color: var(--linea); }

.btn--peligro {
  color: var(--rojo-txt);
  border-color: var(--rojo-borde);
  background: var(--panel);
}
.btn--peligro:hover:not(:disabled) { background: var(--rojo-fondo); border-color: var(--rojo-txt); }
.btn--peligro:disabled { background: var(--panel-2); border-color: var(--linea); color: var(--tinta-3); }

/* ================== 5. BARRA DE APLICACIÓN Y MIGAS ================== */
.barra {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--barra-bg);
  border-bottom: 1px solid var(--linea);
}

.barra__fila--principal {
  max-width: 1560px;
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.marca {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.marca__logo {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radio-ctrl);
  background: var(--carcasa);
  color: var(--carcasa-txt);
  border: 1px solid var(--carcasa-oscuro);
  flex: none;
}

.marca__textos { min-width: 0; }
.marca h1 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.2;
  color: var(--tinta);
}
.marca__sub {
  display: block;
  font-size: 12px;
  line-height: 1.35;
  color: var(--tinta-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contexto {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 12px;
  border: 1px solid var(--linea);
  border-radius: var(--radio-ctrl);
  background: var(--panel-2);
  min-width: 0;
}
.contexto__item {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.contexto__item .ico { color: var(--tinta-3); }
.contexto__et {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.contexto__val {
  font-size: 13px;
  font-weight: 500;
  color: var(--tinta);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contexto__sep { width: 1px; align-self: stretch; background: var(--linea); }

.barra__acciones {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-left: auto;
}

.botones-conexion { display: flex; align-items: center; gap: 8px; }

.barra__div { width: 1px; height: 26px; background: var(--linea); }

.btn__txt { display: inline; }

.usuario {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-left: 2px;
  min-width: 0;
}
.usuario__ini {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: var(--radio-ctrl);
  background: var(--panel-2);
  border: 1px solid var(--linea-2);
  color: var(--tinta-2);
  font: 600 11.5px/1 var(--f-mono);
  letter-spacing: 0.04em;
}
.usuario__txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.usuario__nombre { font-size: 12.5px; font-weight: 600; color: var(--tinta); }
.usuario__rol { font-size: 11px; color: var(--tinta-3); white-space: nowrap; }

/* Migas */
.migas { border-top: 1px solid var(--linea); }
.migas ol {
  max-width: 1560px;
  margin: 0 auto;
  padding: 7px 24px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
}
.migas li { display: flex; align-items: center; gap: 6px; color: var(--tinta-3); }
.migas li + li::before { content: '/'; color: var(--linea-2); }
.migas li[aria-current] { color: var(--tinta); font-weight: 600; }
.migas a { color: var(--tinta-2); }
.migas a:hover { color: var(--acento-txt); }

/* =============== 6. ESTADOS DE CONEXIÓN Y ESTABILIDAD =============== */
.estado {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 11px;
  max-width: min(360px, 46vw);
  border: 1px solid var(--linea-2);
  border-radius: var(--radio-ctrl);
  background: var(--panel);
  color: var(--tinta-2);
  font-size: 12.5px;
  font-weight: 600;
  transition: background var(--trans), border-color var(--trans), color var(--trans);
}
.estado__et {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
#estadoTexto {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.estado[data-estado = "conectado"] {
  background: var(--verde-fondo);
  border-color: var(--verde-borde);
  color: var(--verde-txt);
}
.estado[data-estado = "conectado"] .estado__et { color: var(--verde-txt); opacity: 0.8; }

.estado[data-estado = "conectando"],
.estado[data-estado = "reconectando"] {
  background: var(--ambar-fondo);
  border-color: var(--ambar-borde);
  color: var(--ambar-txt);
}
.estado[data-estado = "conectando"] .estado__et,
.estado[data-estado = "reconectando"] .estado__et { color: var(--ambar-txt); opacity: 0.8; }

.estado[data-estado = "desconectado"] {
  background: var(--rojo-fondo);
  border-color: var(--rojo-borde);
  color: var(--rojo-txt);
}
.estado[data-estado = "desconectado"] .estado__et { color: var(--rojo-txt); opacity: 0.8; }

.estado .ico { display: none; }
.estado[data-estado = "conectado"] .ico--con { display: block; }
.estado[data-estado = "conectando"] .ico--cyc { display: block; animation: girar 1.1s linear infinite; }
.estado[data-estado = "reconectando"] .ico--rec { display: block; animation: girar 1.4s linear infinite; }
.estado[data-estado = "desconectado"] .ico--des { display: block; }

/* Chip de estabilidad (dentro del instrumento, fondo oscuro) */
.chip-estado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border: 1px solid;
  border-radius: var(--radio-chip);
  background: rgba(167, 180, 194, 0.1);
  color: #A7B4C2;
  font: 600 11px/1 var(--f-mono);
  letter-spacing: 0.07em;
  transition: background var(--trans), border-color var(--trans), color var(--trans);
}
.chip-estado[data-estado = "ok"] {
  background: rgba(46, 204, 113, 0.13);
  border-color: rgba(76, 213, 140, 0.42);
  color: #74E3AA;
}
.chip-estado[data-estado = "bad"] {
  background: rgba(240, 168, 46, 0.12);
  border-color: rgba(240, 168, 46, 0.42);
  color: #F2B75C;
}
.chip-estado[data-estado = "neutro"] {
  background: rgba(167, 180, 194, 0.1);
  border-color: rgba(167, 180, 194, 0.34);
  color: #A7B4C2;
}
.chip-estado .ico { display: none; }
.chip-estado[data-estado = "ok"] .ico--bien { display: block; }
.chip-estado[data-estado = "bad"] .ico--mal { display: block; }
.chip-estado[data-estado = "neutro"] .ico--neutro { display: block; }

.actividad {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--linea-2);
  transition: background 100ms linear, box-shadow 100ms linear;
}
.actividad.vivo {
  background: var(--verde-txt);
  box-shadow: 0 0 0 3px var(--verde-fondo);
}

/* ========================= 7. INSTRUMENTO =========================== */
/* Carcasa azul tipo indicador industrial */
.instrumento {
  position: relative;
  margin: 14px 14px 0;
  padding: 14px 14px 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 55%),
    var(--carcasa);
  border: 1px solid var(--carcasa-oscuro);
  border-radius: 10px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -3px 0 rgba(9, 20, 52, 0.35),
    var(--sombra-1);
}

/* LED rojo al costado del marco */
.led {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 2;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--led-rojo-apagado);
  box-shadow: inset 0 0 3px rgba(27, 39, 69, 0.35);
  transition: background 200ms ease, box-shadow 200ms ease;
}
.led[data-estado = "parpadea"] {
  background: radial-gradient(circle at 35% 30%, #FF7B82, var(--led-rojo) 60%);
  box-shadow: 0 0 6px rgba(192, 33, 43, 0.65);
  animation: latido-led 1.7s ease-in-out infinite;
}

/* LCD hundido con retroiluminación celeste */
.lcd {
  position: relative;
  background:
    radial-gradient(120% 150% at 50% 0%, var(--lcd-centro) 0%, var(--lcd-centro) 40%, var(--lcd-fondo) 100%);
  border: 1px solid var(--lcd-borde);
  border-radius: 5px;
  box-shadow:
    inset 0 2px 6px rgba(23, 47, 114, 0.3),
    inset 0 -1px 2px rgba(255, 255, 255, 0.5);
  padding: 10px 14px 8px;
  overflow: hidden;
}

.lcd__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 18px;
}
.lcd__fila--sup { justify-content: flex-start; gap: 14px; }
.lcd__fila--inf { justify-content: center; min-height: 15px; }

/* Indicadores del LCD: apagados (fantasma) salvo que se enciendan */
.lcd__ind {
  font: 600 12px/1 var(--f-mono);
  letter-spacing: 0.09em;
  color: var(--lcd-digito-apagado);
  transition: color 180ms ease, opacity 180ms ease;
}
.lcd__ind.on,
.lcd__ind--w1,
#indGN,
.lcd__ind--cero.on { color: var(--lcd-digito); }
.lcd__ind--cero {
  font-size: 13px;
  opacity: 0;
}
.lcd__ind--cero.on { opacity: 1; }

/* Símbolo de balanza: se enciende al estabilizar */
.lcd__balanza {
  width: 15px;
  height: 15px;
  flex: none;
  fill: none;
  stroke: var(--lcd-digito-apagado);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 180ms ease;
}
.lcd__balanza.on { stroke: var(--lcd-digito); }

/* Barras de señal: 0 apagada · 1 reconectando · 3 conectado */
.lcd__bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  margin-left: auto;
  height: 12px;
}
.lcd__bars i {
  display: block;
  width: 3px;
  border-radius: 1px;
  background: var(--lcd-digito-apagado);
  transition: background 180ms ease;
}
.lcd__bars i:nth-child(1) { height: 5px; }
.lcd__bars i:nth-child(2) { height: 8px; }
.lcd__bars i:nth-child(3) { height: 12px; }
.lcd__bars[data-nivel = "3"] i { background: var(--lcd-digito); }
.lcd__bars[data-nivel = "1"] i:nth-child(1) { background: var(--lcd-digito); }

/* Dígitos LCD con segmentos fantasma detrás */
.lcd__digitos {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 10px;
  min-height: var(--fs-display);
  padding: 4px 0 6px;
  overflow: hidden;
}
.lcd__fantasma {
  position: absolute;
  right: 0;
  bottom: 6px;
  font-family: var(--f-lcd);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: 1.05;
  color: var(--lcd-digito-apagado);
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}
.lcd__valor {
  position: relative;
  font-family: var(--f-lcd);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: var(--lcd-digito);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: color 160ms ease, opacity 160ms ease;
}
.lcd__unidad {
  position: relative;
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: clamp(16px, 2.4vw, 24px);
  letter-spacing: 0.04em;
  color: var(--lcd-digito);
}

.instrumento.sin-lectura .lcd__valor,
.instrumento.sin-lectura .lcd__unidad,
.instrumento.sin-lectura .lcd__fantasma { color: var(--lcd-digito-apagado); opacity: 0.28; }
.instrumento.sin-senal .lcd__valor { opacity: 0.55; }

/* Destello suave al estabilizarse */
.instrumento.estabilizado .lcd { animation: destello 450ms ease-out; }

/* Barra de capacidad 0 – 60.000 kg */
.capacidad { margin-top: 12px; }
.capacidad__cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
}
.capacidad__tit {
  font: 600 11px/1 var(--f-mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--carcasa-txt-2);
}
.capacidad__val { font: 600 13px/1 var(--f-mono); color: #FFFFFF; }
.capacidad__pista {
  position: relative;
  height: 8px;
  border-radius: 4px;
  background: rgba(10, 22, 55, 0.5);
  box-shadow: inset 0 1px 2px rgba(8, 14, 34, 0.5);
  overflow: hidden;
}
.capacidad__relleno {
  width: 0;
  height: 100%;
  border-radius: 4px;
  background: #7FA2E6;
  transition: width 300ms ease, background 300ms ease;
}
.capacidad[data-estado = "alta"] .capacidad__relleno { background: var(--tecla-amarilla); }
.capacidad[data-estado = "ol"] .capacidad__relleno { background: var(--led-rojo); }
.capacidad__marcas {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  margin-top: 4px;
  padding: 0 1px;
}
.capacidad__marcas i {
  font: 500 10px/1.4 var(--f-mono);
  font-style: normal;
  color: var(--carcasa-txt-2);
}
.capacidad__marcas i:first-child { text-align: left; }
.capacidad__marcas i:last-child { text-align: right; }

/* Botonera de membrana: 5 teclas */
.botonera {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.tecla {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 58px;
  padding: 7px 6px 13px;
  border: 1px solid rgba(8, 14, 34, 0.55);
  border-radius: 8px;
  font: 600 11px/1.1 var(--f-sans);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -3px 0 rgba(8, 14, 34, 0.35);
  transition: transform var(--trans), background var(--trans), box-shadow var(--trans), filter var(--trans);
}
.tecla:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(8, 14, 34, 0.3);
}
.tecla:focus-visible { outline-offset: 2px; }

.tecla--amarilla {
  background: var(--tecla-amarilla);
  color: var(--lcd-digito);
}
.tecla--amarilla:hover:not(:disabled) { filter: brightness(1.06); }
.tecla--amarilla:active:not(:disabled) { background: var(--tecla-amarilla-active); }

.tecla--azul {
  background: var(--tecla-azul);
  color: var(--tecla-azul-txt);
}
.tecla--azul:hover:not(:disabled) { background: var(--tecla-azul-hover); }

.tecla:disabled { opacity: 0.42; cursor: not-allowed; }

.tecla .k {
  position: absolute;
  right: 5px;
  bottom: 5px;
  margin: 0;
  padding: 2px 4px;
  font-size: 8.5px;
  line-height: 1.2;
  border-radius: 3px;
}
.tecla--amarilla .k {
  background: rgba(27, 39, 69, 0.14);
  border-color: rgba(27, 39, 69, 0.3);
  color: var(--lcd-digito);
}
.tecla--azul .k {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--tecla-azul-txt);
}

/* Pie de la carcasa: estado, señal y neto */
.carcasa__pie {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.instrumento__hora { font-size: 11.5px; color: var(--carcasa-txt-2); }
.neto-mini {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  margin-left: auto;
  font: 600 11px/1 var(--f-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--carcasa-txt);
}
.neto-mini b { font-weight: 600; font-size: 16px; letter-spacing: 0; text-transform: none; }

/* Chip de estabilidad y aviso de señal dentro de la carcasa azul */
.instrumento .chip-estado {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28);
  color: #DCE6FF;
}
.instrumento .chip-estado[data-estado = "ok"] {
  background: rgba(110, 231, 149, 0.16);
  border-color: rgba(146, 240, 175, 0.5);
  color: #BDF1D0;
}
.instrumento .chip-estado[data-estado = "bad"] {
  background: rgba(245, 217, 10, 0.15);
  border-color: rgba(245, 217, 10, 0.5);
  color: #F8E47A;
}
.instrumento .chip-estado[data-estado = "neutro"] {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28);
  color: #DCE6FF;
}
.instrumento .aviso-senal {
  background: rgba(255, 107, 97, 0.2);
  border-color: rgba(255, 138, 120, 0.55);
  color: #FFD2CC;
}

/* ========================== 8. CAPTURA ============================== */
.ayuda--franja {
  margin: 12px 14px 0;
  max-width: 80ch;
}

.captura {
  display: grid;
  grid-template-columns: minmax(210px, 300px) minmax(0, 1fr);
  gap: 14px 18px;
  align-items: start;
  margin: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--linea);
}

.campo--placa input {
  height: 56px;
  padding: 0 13px;
  font-family: var(--f-mono);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.captura__zona {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}

.btn--captura {
  width: 100%;
  min-height: 56px;
  padding: 0 20px;
  gap: 12px;
  font-size: 17px;
  font-weight: 600;
  background: var(--acento);
  border-color: var(--acento-borde);
  color: var(--texto-btn);
  transition: background var(--trans), border-color var(--trans), color var(--trans);
}
.btn--captura:hover:not(:disabled) { background: var(--acento-hover); }
.btn--captura:active:not(:disabled) { background: var(--acento-active); }
.btn--captura:disabled {
  background: var(--panel-2);
  border-color: var(--linea-2);
  color: var(--tinta-2);
}
.btn--captura:disabled .k--clave { opacity: 0.7; }
.btn--captura .k--clave { margin-left: auto; }

.captura__motivo {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  min-height: 3em;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--tinta-3);
}
.captura__motivo .ico { margin-top: 2px; }
.captura__motivo .ico--aviso-ico { color: var(--ambar-txt); }
.captura__motivo .ico--ok-ico { display: none; }
.captura__motivo--ok { color: var(--verde-txt); }
.captura__motivo--ok .ico--aviso-ico { display: none; }
.captura__motivo--ok .ico--ok-ico { display: block; }

/* ======================== 9. FORMULARIOS ============================ */
.campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.campo input[type = text] {
  width: 100%;
  height: 38px;
  padding: 0 11px;
  background: var(--input-bg);
  border: 1px solid var(--linea-2);
  border-radius: var(--radio-ctrl);
  color: var(--tinta);
  font-size: 14px;
  line-height: 1.4;
  transition: border-color var(--trans), box-shadow var(--trans);
}
.campo input[type = text]::placeholder { color: var(--tinta-3); opacity: 1; }
.campo input[type = text]:focus { border-color: var(--foco); }
.campo input[type = text]:disabled {
  background: var(--panel-2);
  color: var(--tinta-3);
  border-color: var(--linea);
}

.campo__ayuda {
  font-size: 12px;
  line-height: 1.45;
  color: var(--tinta-3);
}
.campo__error {
  font-size: 12px;
  line-height: 1.45;
  font-weight: 500;
  color: var(--rojo-txt);
}
input.is-invalid {
  border-color: var(--rojo-txt);
  box-shadow: 0 0 0 2px var(--rojo-fondo);
}

.campo--sin-borde { border: 0; min-width: 0; }
.campo--sin-borde legend { color: var(--tinta-3); margin-bottom: 6px; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.input-accion { display: flex; flex-wrap: wrap; gap: 8px; }
.input-accion input[type = text] { flex: 1 1 150px; width: auto; min-width: 0; }

/* Control segmentado */
.segmentado {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--linea-2);
  border-radius: var(--radio-ctrl);
  overflow: hidden;
  background: var(--panel);
}
.segmentado label { position: relative; display: flex; min-width: 0; }
.segmentado input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.segmentado span {
  flex: 1;
  padding: 9px 6px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--tinta-2);
  border-right: 1px solid var(--linea-2);
  cursor: pointer;
  transition: background var(--trans), color var(--trans);
}
.segmentado label:last-child span { border-right: 0; }
.segmentado input:checked + span { background: var(--tinta); color: var(--panel); }
.segmentado input:focus-visible + span { outline: 2px solid var(--foco); outline-offset: -3px; }

/* ========================== 10. CÁLCULO ============================= */
.resumen__sub {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--tinta-3);
  margin-bottom: 10px;
}

.resumen { display: flex; flex-direction: column; gap: 8px; }

.dato {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 12px;
  align-items: baseline;
  padding: 10px 12px;
  background: var(--panel-2);
  border: 1px solid var(--linea);
  border-radius: var(--radio-ctrl);
}
.dato__et { font-size: 12.5px; font-weight: 500; color: var(--tinta-2); }
.dato__nota { color: var(--tinta-3); font-weight: 400; }
.dato__val {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.15;
  text-align: right;
  color: var(--tinta);
  white-space: nowrap;
}
.dato__val[data-neg = "1"] { color: var(--rojo-txt); }
.dato__extra {
  grid-column: 1 / -1;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--tinta-3);
}
.dato__extra:empty { display: none; }

.dato--neto {
  background: var(--panel);
  border-color: var(--linea-2);
  border-left: 3px solid var(--tinta);
  padding-left: 9px;
}
.dato--neto .dato__val { font-size: 26px; }

.panel--calculo .ayuda { display: block; margin-top: 10px; }

/* ==================== 11. TABLA Y ESTADO VACÍO ====================== */
.tabla-cont {
  position: relative;
  overflow: auto;
  max-height: min(52vh, 460px);
}

.tabla {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.tabla thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 36px;
  padding: 0 12px;
  background: var(--panel-2);
  color: var(--tinta-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--linea);
}

.tabla tbody td {
  height: 38px;
  padding: 0 12px;
  border-bottom: 1px solid var(--linea-suave);
  color: var(--tinta);
  white-space: nowrap;
}
.tabla tbody tr:nth-child(even) { background: var(--zebra); }
.tabla tbody tr:hover { background: var(--hover); }
.tabla tbody tr:last-child td { border-bottom: 0; }

.tabla .num { text-align: right; }
.tabla .col-id {
  width: 46px;
  color: var(--tinta-3);
  font-family: var(--f-mono);
  font-size: 12px;
}
.tabla .placa { font-family: var(--f-mono); font-weight: 600; letter-spacing: 0.04em; }

/* Chip de operación (dirección, no estado) */
.op {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  border: 1px solid var(--linea-2);
  border-radius: var(--radio-chip);
  background: var(--panel);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--tinta-2);
}
.op::before { font-family: var(--f-mono); font-weight: 600; }
.op--entrada::before { content: '\2192'; }
.op--salida::before { content: '\2190'; }
.op--salida { background: var(--panel-2); }

/* Estado de la captura: color + texto (ya es texto, aquí el peso visual) */
.estado-reg { font-weight: 500; }
.estado-reg--ok { color: var(--verde-txt); }
.estado-reg--bad { color: var(--ambar-txt); }

/* Estado vacío */
.vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  max-width: 440px;
  margin: 0 auto;
  padding: 40px 20px;
  color: var(--tinta-3);
}
.vacio__tit { font-size: 14.5px; font-weight: 600; color: var(--tinta); }
.vacio__txt { font-size: 13px; line-height: 1.55; color: var(--tinta-2); }
.vacio__txt strong { color: var(--tinta); font-weight: 600; }

#registrosVacio:not([hidden]) ~ .tabla { display: none; }

/* ====================== 12. LOG DE DEPURACIÓN ======================= */
.panel--log { overflow: hidden; }

.panel__cab--resumen {
  cursor: pointer;
  list-style: none;
  border-bottom: 0;
  border-radius: var(--radio-panel);
}
.panel__cab--resumen::-webkit-details-marker { display: none; }
.panel__cab--resumen:hover { background: var(--linea); }
details[open] > .panel__cab--resumen { border-bottom: 1px solid var(--linea); }

.chevron {
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 1.5px solid var(--tinta-3);
  border-bottom: 1.5px solid var(--tinta-3);
  transform: rotate(45deg);
  transition: transform var(--trans);
}
details[open] .chevron { transform: rotate(225deg); }

.log-acciones {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.log-ley {
  font: 600 10.5px/1 var(--f-mono);
  letter-spacing: 0.05em;
  padding: 3px 5px;
  border-radius: var(--radio-chip);
  border: 1px solid var(--linea-2);
  background: var(--panel);
  color: var(--tinta-2);
}
.log-ley--rx { color: var(--verde-txt); border-color: var(--verde-borde); background: var(--verde-fondo); }
.log-ley--tx { color: var(--ambar-txt); border-color: var(--ambar-borde); background: var(--ambar-fondo); }
.log-ley--sys { color: var(--tinta-2); }
.log-ley--err { color: var(--rojo-txt); border-color: var(--rojo-borde); background: var(--rojo-fondo); }

.log-lista {
  max-height: 300px;
  overflow: auto;
  padding: 7px 0;
  background: #0E1319;
  border: 1px solid var(--log-borde);
  border-radius: var(--radio-ctrl);
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: 1.5;
  color: #C6D0DA;
}
.log-lista li {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  padding: 2px 12px;
}
.log-lista li:nth-child(even) { background: rgba(255, 255, 255, 0.025); }

.log__hora { color: #6E7E8C; white-space: nowrap; }
.log__dir {
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  padding: 1px 4px;
  border-radius: 2px;
  text-align: center;
  min-width: 34px;
}
.log__dir--rx { background: rgba(46, 204, 113, 0.16); color: #74E3AA; }
.log__dir--tx { background: rgba(240, 168, 46, 0.16); color: #F2B75C; }
.log__dir--sys { background: rgba(148, 163, 184, 0.16); color: #B3C0CD; }
.log__dir--err { background: rgba(255, 107, 97, 0.18); color: #FF9E92; }
.log-lista li span:last-child { word-break: break-word; white-space: pre-wrap; }

.log-lista:empty::after {
  content: 'Sin mensajes en el log.';
  display: block;
  padding: 4px 12px;
  color: #6E7E8C;
}

/* ====================== 13. ALERTAS Y TOASTS ======================== */
.alerta {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid;
  border-left-width: 3px;
  border-radius: var(--radio-ctrl);
  font-size: 13px;
  line-height: 1.5;
}
.alerta p + p { margin-top: 5px; }
.alerta__tit {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
}
.alerta--warn {
  background: var(--ambar-fondo);
  border-color: var(--ambar-borde);
  color: var(--ambar-txt);
}
.alerta--err {
  background: var(--rojo-fondo);
  border-color: var(--rojo-borde);
  color: var(--rojo-txt);
}
.alerta--bloque { margin: 12px 14px 0; }
.alerta code { background: rgba(255, 255, 255, 0.55); border-color: currentColor; color: inherit; }
.alerta__pie { opacity: 0.92; }

.toasts {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;
}

.toast {
  max-width: min(420px, calc(100vw - 40px));
  padding: 11px 14px;
  border: 1px solid var(--linea-2);
  border-left-width: 3px;
  border-radius: var(--radio-ctrl);
  background: var(--panel);
  color: var(--tinta);
  font-size: 13.5px;
  line-height: 1.45;
  box-shadow: var(--sombra-2);
  transition: opacity 300ms ease;
}
.toast--ok {
  border-color: var(--verde-borde);
  border-left-color: var(--verde-txt);
  background: var(--verde-fondo);
  color: var(--verde-txt);
}
.toast--err {
  border-color: var(--rojo-borde);
  border-left-color: var(--rojo-txt);
  background: var(--rojo-fondo);
  color: var(--rojo-txt);
}
.toast--aviso {
  border-color: var(--ambar-borde);
  border-left-color: var(--ambar-txt);
  background: var(--ambar-fondo);
  color: var(--ambar-txt);
}

/* ============================ 14. PIE =============================== */
.pie {
  max-width: 1560px;
  margin: 0 auto;
  padding: 14px 24px 26px;
  border-top: 1px solid var(--linea);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--tinta-3);
}
.pie .mono { color: var(--tinta-2); }
.pie .k { vertical-align: baseline; }

/* ========================= 15. MODO OPERADOR ======================== */
body[data-modo = "operador"] .col--lateral,
body[data-modo = "operador"] .migas,
body[data-modo = "operador"] .pie,
body[data-modo = "operador"] .contexto,
body[data-modo = "operador"] .marca__sub { display: none; }

body[data-modo = "operador"] .rejilla {
  grid-template-columns: minmax(0, 1fr);
  max-width: 1100px;
}

body[data-modo = "operador"] .lcd__valor { font-size: clamp(3.5rem, 13vw, 9.5rem); }
body[data-modo = "operador"] .btn--captura { min-height: 72px; font-size: 20px; }
body[data-modo = "operador"] .captura { grid-template-columns: minmax(210px, 340px) minmax(0, 1fr); }

#btnOperador .ico--op2 { display: none; }
#btnOperador[aria-pressed = "true"] {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--panel);
}
#btnOperador[aria-pressed = "true"] .ico--op { display: none; }
#btnOperador[aria-pressed = "true"] .ico--op2 { display: block; }
#btnOperador[aria-pressed = "true"]:hover:not(:disabled) {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--panel);
  opacity: 0.86;
}

/* Tema: icono del botón (moon = ir a oscuro, sun = ir a claro) */
#btnTema .ico--tema-oscuro { display: none; }
html[data-tema = "oscuro"] #btnTema .ico--tema-claro { display: none; }
html[data-tema = "oscuro"] #btnTema .ico--tema-oscuro { display: block; }

/* ========================== 16. RESPONSIVE ========================== */
@media (max-width: 1360px) {
  .estado__et { display: none; }
}

@media (max-width: 1240px) {
  .contexto { display: none; }
  .grid2 { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
  .rejilla { grid-template-columns: minmax(0, 1fr); padding: 16px 16px 24px; }
  .col { display: contents; }

  .panel--peso { order: 1; }
  .panel--datos { order: 2; }
  .panel--registros { order: 3; }
  .panel--calculo { order: 4; }
  .panel--conexion { order: 5; }
  .panel--log { order: 6; }

  .barra__fila--principal { padding: 10px 16px; }
  .migas ol { padding: 7px 16px; }
  .pie { padding: 14px 16px 24px; }
  .barra__acciones { margin-left: 0; width: 100%; justify-content: flex-start; }
}

@media (max-width: 760px) {
  .col-oculta { display: none; }
  .usuario__txt { display: none; }
  .marca__sub { display: none; }
  .barra__div { display: none; }
  .captura { grid-template-columns: minmax(0, 1fr); }
  .botonera { grid-template-columns: repeat(3, 1fr); }
  .instrumento { padding: 12px; }
}

@media (max-width: 560px) {
  .botones-conexion .btn { flex: 1 1 auto; }
  .cab-acciones { width: 100%; }
  .cab-acciones .btn { flex: 1 1 auto; }
}

/* ========================== 17. TEMA OSCURO ========================= */
html[data-tema = "oscuro"] {
  --fondo: #0E1216;
  --panel: #161B21;
  --panel-2: #1D242B;
  --linea: #2A333C;
  --linea-2: #3A4550;
  --linea-suave: #222A32;
  --zebra: rgba(255, 255, 255, 0.025);
  --hover: rgba(255, 255, 255, 0.05);
  --input-bg: #11161B;
  --tinta: #E7EBEF;
  --tinta-2: #A9B4BF;
  --tinta-3: #8A96A1;

  --acento-txt: #E9C33E;
  --foco: #9DB4F0;

  /* Carcasa más oscura; el LCD conserva su celeste */
  --carcasa: #16265C;
  --carcasa-oscuro: #0F1C45;
  --carcasa-txt-2: #9FB4E8;

  --verde-txt: #5FD9A0;
  --verde-fondo: #0F2A1E;
  --verde-borde: #1E5B3E;
  --ambar-txt: #F0B84E;
  --ambar-fondo: #2C2312;
  --ambar-borde: #6A4E14;
  --rojo-txt: #FF9A90;
  --rojo-fondo: #2E1715;
  --rojo-borde: #6E2F28;

  --barra-bg: #161B21;
  --log-borde: #2A333C;

  --sombra-1: 0 6px 18px rgba(0, 0, 0, 0.45);
  --sombra-2: 0 14px 34px rgba(0, 0, 0, 0.55);
}

html[data-tema = "oscuro"] .alerta code { background: rgba(0, 0, 0, 0.3); }

html[data-tema = "oscuro"] .segmentado input:checked + span {
  background: var(--tinta);
  color: var(--panel);
}

html[data-tema = "oscuro"] .marca__logo { border-color: var(--carcasa-oscuro); }

/* ======================= 18. MOVIMIENTO REDUCIDO ==================== */
@keyframes girar { to { transform: rotate(360deg); } }

@keyframes latido-led {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

@keyframes latido {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

@keyframes destello {
  0% { background-color: rgba(123, 224, 168, 0.16); }
  100% { background-color: rgba(123, 224, 168, 0); }
}

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