/* ==========================================================================
   RESET MÍNIMO §2 / §7
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
  height: auto;
}

/* ==========================================================================
   FUENTES (SELF-HOSTED) §3
   ========================================================================== */
@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo-var.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Archivo Narrow';
  src: url('fonts/archivo-narrow-var.woff2') format('woff2');
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

/* ponytail: IBM Plex Mono solo dispone del archivo plexmono-600.woff2 (peso 600) en app/static/fonts/. §3 menciona 500/600 pero la escala solo consume 600 (--t-dato y --t-kpi). Se declara peso 600 únicamente. */
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fonts/plexmono-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   TOKENS §2
   ========================================================================== */
:root {
  /* ---- Superficie ---- */
  --zinc-000: #FFFFFF;
  --zinc-050: #EDEFF2;
  --zinc-100: #E3E7EB;
  --zinc-150: #DDE2E7;

  /* ---- Tinta ---- */
  --petroleo-900: #0D1A21;
  --petroleo-700: #22333D;
  --petroleo-500: #4A626D;

  /* ---- Acento (uno solo) ---- */
  --naranja-600: #DC5314;
  --naranja-800: #9E3708;

  /* ---- Semánticos ---- */
  --verde-700:  #14594C;
  --ambar-700:  #A66A00;
  --rojo-700:   #A3231A;

  /* ---- Geometría ---- */
  --r: 3px;
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px;
  --hair: 1px solid var(--zinc-150);
  --canto: 2px solid var(--petroleo-900);

  /* ---- Trama de placa (§2.bis) ----
     La grilla del fondo y el relieve estampado de las tarjetas. Son líneas
     duras, no gradientes decorativos ni sombras difusas: la profundidad sigue
     saliendo del canto, acá solo se le agrega la cuadrícula de la chapa. */
  --trama-linea: rgba(13, 26, 33, 0.05);
  --trama-paso: 40px;
  --relieve: 2px 2px 0 rgba(13, 26, 33, 0.07);
  --zinc-nav: #A9BCC6;   /* texto secundario sobre superficies invertidas */

  /* Superficie invertida (el KPI). Tiene tokens propios y no reusa
     petróleo/zinc porque en modo campo esos dos se dan vuelta: la tarjeta
     quedaría clara con la cifra naranja encima, a 2.1:1. */
  --invertido-fondo: var(--petroleo-900);
  --invertido-texto: var(--zinc-000);
  --invertido-acento: var(--naranja-600);

  /* ---- Escala Tipográfica §3 ---- */
  --t-micro: 700 11px/1.2 'Archivo Narrow', system-ui, sans-serif;
  --t-label: 600 13px/1.3 'Archivo Narrow', system-ui, sans-serif;
  --t-body: 400 16px/1.5 'Archivo', system-ui, sans-serif;
  --t-body-fuerte: 500 16px/1.5 'Archivo', system-ui, sans-serif;
  --t-titulo: 700 22px/1.25 'Archivo Narrow', system-ui, sans-serif;
  --t-dato: 600 20px/1.2 'IBM Plex Mono', monospace;
  --t-kpi: 600 36px/1 'IBM Plex Mono', monospace;
}

@media (min-width: 900px) {
  :root {
    --t-kpi: 600 44px/1 'IBM Plex Mono', monospace;
  }
}

/* Modo campo §2 */
[data-tema="campo"] {
  --zinc-050: #0B151A;
  --zinc-000: #14242D;
  --zinc-100: #1B2F3A;
  --zinc-150: #2A414E;
  --petroleo-900: #E8EDF0;
  --petroleo-500: #93A7B2;
  --naranja-600: #FF7A38;
  --naranja-800: #FF9560;

  /* El bloque de modo campo de DISENO §2 invierte zinc, petróleo y naranja,
     pero se olvida de los tres semánticos. Heredados tal cual, #14594C sobre
     #14242D da 1.94:1 y #A3231A da 2.13:1: "cobrado" y "vencido" quedan
     ilegibles justo en el turno de noche, que es para lo que existe este modo.
     Aclarados al mismo criterio que ya se le aplicó al naranja; el peor par
     de cada uno contra las tres superficies oscuras queda sobre 5.4:1. */
  --verde-700: #4FBFA8;
  --ambar-700: #E5A33C;
  --rojo-700:  #FF7A6E;

  /* La trama se invierte con las superficies: líneas claras sobre chapa oscura. */
  --trama-linea: rgba(255, 255, 255, 0.05);
  --relieve: 2px 2px 0 rgba(0, 0, 0, 0.3);
  --zinc-nav: #93A7B2;

  /* El KPI sigue siendo la superficie más oscura, un escalón bajo el fondo. */
  --invertido-fondo: #081116;
  --invertido-texto: #E8EDF0;
  --invertido-acento: #FF7A38;
}

/* ==========================================================================
   BASE & TIPOGRAFÍA §3
   ========================================================================== */
body {
  background-color: var(--zinc-050);
  /* Cuadrícula de chapa: dos juegos de líneas de 1px cada 40px. Fija, para que
     el fondo se lea como la superficie sobre la que están apoyadas las placas
     y no como un patrón que se arrastra con el scroll. */
  background-image:
    repeating-linear-gradient(90deg, var(--trama-linea) 0 1px, transparent 1px var(--trama-paso)),
    repeating-linear-gradient(0deg,  var(--trama-linea) 0 1px, transparent 1px var(--trama-paso));
  background-attachment: fixed;
  color: var(--petroleo-900);
  font: var(--t-body);
  -webkit-font-smoothing: antialiased;
}

.t-micro, .micro {
  font: var(--t-micro);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--petroleo-500);
}

.t-label, .label {
  font: var(--t-label);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.t-body, .body {
  font: var(--t-body);
}

.t-body-fuerte, .body-fuerte {
  font: var(--t-body-fuerte);
}

.t-titulo, .titulo {
  font: var(--t-titulo);
}

.t-dato, .dato {
  font: var(--t-dato);
  font-variant-numeric: tabular-nums;
}

.t-kpi, .kpi {
  font: var(--t-kpi);
  font-variant-numeric: tabular-nums;
}

.mono, .num, .monto, .codigo, .serie {
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   GRILLA & UTILIDADES DE ESTRUCTURA
   ========================================================================== */
.grid {
  display: grid;
  gap: var(--s3);
}

.g2 {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.g3 {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

/* ==========================================================================
   COMPONENTES §5
   ========================================================================== */

/* 1. Tarjeta placa */
.placa {
  background: var(--zinc-000);
  border: var(--hair);
  border-top: var(--canto);
  border-radius: var(--r);
  padding: var(--s4);
  position: relative;
  /* Relieve de canto duro (sin blur): despega la placa de la cuadrícula del
     fondo. Es el desnivel de una chapa apoyada, no una capa flotante. */
  box-shadow: var(--relieve);
}

/* Franja de riesgo: la calcomanía diagonal de la máquina. Marca la placa
   principal de la pantalla. Una sola por vista. */
.franja-riesgo::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: repeating-linear-gradient(
    45deg,
    var(--naranja-600) 0 7px,
    var(--petroleo-900) 7px 14px
  );
}

.franja-riesgo {
  border-top: none;
  padding-top: calc(var(--s4) + 5px);
  overflow: hidden;
}

.placa .codigo {
  position: absolute;
  top: var(--s3);
  right: var(--s4);
  font: 600 11px/1 'IBM Plex Mono', monospace;
  font-variant-numeric: tabular-nums;
  color: var(--petroleo-500);
  letter-spacing: 0.06em;
}

/* 2. Botones */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--s7);
  padding: 0 var(--s5);
  border-radius: var(--r);
  font: var(--t-body-fuerte);
  cursor: pointer;
  border: 1.5px solid transparent;
  background: transparent;
  text-decoration: none;
  box-sizing: border-box;
}

.btn.pri, .btn-pri {
  background: var(--petroleo-900);
  color: var(--zinc-000);
  border-color: var(--petroleo-900);
}

.btn.sec, .btn-sec {
  background: transparent;
  border-color: var(--petroleo-900);
  color: var(--petroleo-900);
}

/* Sobre el riel invertido el borde petróleo desaparecía contra el fondo:
   quedaba un botón "Cerrar sesión" que había que adivinar. */
.riel-izquierdo .btn.sec {
  border-color: var(--zinc-nav);
  color: var(--zinc-000);
}

.btn.dan, .btn-dan {
  background: transparent;
  border-color: var(--rojo-700);
  color: var(--rojo-700);
}

.btn:focus-visible {
  outline: 2px solid var(--naranja-600);
  outline-offset: 2px;
}

/* 3. Chips de concepto */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.chip-c {
  height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 var(--s4);
  border: var(--hair);
  border-radius: var(--r);
  background: var(--zinc-000);
  color: var(--petroleo-900);
  font: var(--t-body-fuerte);
  font-size: 14px;
  cursor: pointer;
  user-select: none;
}

.chip-c.sel {
  background: var(--petroleo-900);
  color: var(--zinc-000);
  border-color: var(--petroleo-900);
}

.chip-c:focus-visible {
  outline: 2px solid var(--naranja-600);
  outline-offset: 2px;
}

/* 4. Campos */
.campo {
  display: grid;
  gap: 6px;
  margin-bottom: var(--s4);
}

.campo label, .campo .label {
  font: var(--t-label);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--petroleo-900);
}

.campo input, .campo select, .campo textarea {
  height: var(--s7);
  border: var(--hair);
  border-radius: var(--r);
  background: var(--zinc-000);
  padding: 0 var(--s3);
  font: var(--t-body);
  font-size: 16px;
  color: var(--petroleo-900);
  width: 100%;
  box-sizing: border-box;
}

.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: 2px solid var(--naranja-600);
  outline-offset: 2px;
  border-color: var(--petroleo-900);
}

/* 5. Fila de alerta */
.alerta {
  display: flex;
  gap: var(--s3);
  align-items: center;
  background: var(--zinc-000);
  border: var(--hair);
  border-left: 3px solid var(--petroleo-500);
  border-radius: var(--r);
  padding: var(--s3) var(--s4);
}

.alerta.crit {
  border-left-color: var(--rojo-700);
}

.alerta.alta {
  border-left-color: var(--naranja-600);
}

.alerta.media {
  border-left-color: var(--ambar-700);
}

.alerta.ok {
  border-left-color: var(--verde-700);
}

.alerta .cuerpo {
  flex: 1;
  min-width: 0;
}

.alerta .t {
  font: var(--t-body-fuerte);
  font-size: 15px;
  line-height: 1.35;
}

.alerta .n {
  font: var(--t-dato);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tag {
  font: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 6px;
  border-radius: 2px;
  border: 1px solid currentColor;
}

.tag.crit {
  color: var(--rojo-700);
}

.tag.alta {
  color: var(--naranja-800);
}

.tag.media {
  color: var(--petroleo-900);
  border-color: var(--ambar-700);
}

.tag.ok {
  color: var(--verde-700);
}

/* 6. Tabla → placas (breakpoint 720px) */
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--zinc-000);
  border: var(--hair);
  border-top: var(--canto);
  border-radius: var(--r);
}

th {
  font: var(--t-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--petroleo-500);
  text-align: left;
  padding: var(--s3) var(--s4);
  border-bottom: var(--hair);
}

th.num, td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

td {
  padding: var(--s3) var(--s4);
  border-bottom: var(--hair);
  font: var(--t-body);
  font-size: 15px;
  vertical-align: middle;
}

tr:last-child td {
  border-bottom: 0;
}

tbody tr:nth-child(even) {
  background: var(--zinc-100);
}

td .cli {
  font: var(--t-body-fuerte);
  font-size: 15px;
}

td .trab {
  font-size: 13px;
  color: var(--petroleo-500);
}

td .mono {
  font: var(--t-dato);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 719px) {
  .tabla-responsive,
  table.responsive {
    display: block;
    background: transparent;
    border: 0;
  }

  .tabla-responsive thead,
  table.responsive thead {
    display: none;
  }

  .tabla-responsive tbody,
  table.responsive tbody {
    display: grid;
    gap: var(--s3);
  }

  .tabla-responsive tr,
  table.responsive tr {
    display: block;
    background: var(--zinc-000);
    border: var(--hair);
    border-top: var(--canto);
    border-radius: var(--r);
    padding: var(--s4);
    position: relative;
  }

  .tabla-responsive td,
  table.responsive td {
    display: block;
    padding: var(--s1) 0;
    border-bottom: 0;
  }

  .tabla-responsive td.num,
  table.responsive td.num {
    text-align: right;
    margin-top: var(--s2);
  }

  /* A 380px el chip y el monto (nowrap) se llevan el ancho y dejan ~100px al
     texto, que es lo primero que se lee. Se reusa el mismo corte de 720 que ya
     colapsa la tabla a placas: el monto baja a su propia línea a la derecha,
     igual que en la placa, y el texto recupera el ancho completo. */
  .alerta {
    flex-wrap: wrap;
  }

  .alerta .cuerpo {
    flex: 1 1 60%;
  }

  .alerta .n {
    margin-left: auto;
  }
}

/* ==========================================================================
   REGLETA DE SERVICIO §4 (ELEMENTO FIRMA)
   ========================================================================== */
.regleta {
  display: flex;
  gap: 3px;
  align-items: flex-end;
}

.regleta i {
  display: block;
  height: 6px;
  flex: 1;
  border: 1.5px solid var(--zinc-150);
  background: transparent;
  border-radius: 0;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  transition: background-color 150ms ease, border-color 150ms ease;
}

.regleta i.on {
  background: var(--petroleo-900);
  border-color: var(--petroleo-900);
}

.regleta i.now {
  background: var(--naranja-600);
  border-color: var(--naranja-600);
}

.regleta i.sin-cobro {
  border-color: var(--zinc-150);
  background: transparent;
}

.regleta i.sin-cobro::after {
  content: '';
  position: absolute;
  height: 1px;
  width: 200%;
  background: var(--zinc-150);
  top: 50%;
  left: -50%;
  transform: translateY(-50%) rotate(-25deg);
}

.regleta.alta i, .regleta-detalle i {
  height: 12px;
}

.regleta-wrap {
  display: grid;
  gap: var(--s1);
}

.regleta-labels {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
}

.regleta-labels span {
  font: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--petroleo-500);
  text-align: center;
}

.regleta-labels span.now {
  color: var(--naranja-800);
}

.regleta-labels span.sin-cobro {
  color: var(--petroleo-500);
  text-decoration: line-through;
}

/* ==========================================================================
   LAYOUT §6
   ========================================================================== */

.wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--s5) var(--s4) var(--s7);
}

/* El riel de escritorio de §6 solo está definido dentro del bloque de ≥1000px,
   así que abajo de eso el <aside> se dibujaba igual, sin estilo: la navegación
   y el pie del riel aparecían sueltos arriba y abajo de la pantalla del
   teléfono, en blanco sobre fondo claro. Se oculta por defecto y aparece
   recién en escritorio, que es cuando existe. */
.riel-izquierdo {
  display: none;
}

/* El margen lateral de --s4 que pide §6 para móvil. Sin esto el contenido va
   pegado al borde de la pantalla y, peor, la barra superior se sale: usa
   márgenes negativos de --s4 para ir de canto a canto, y contra un padre sin
   padding esos -16px de cada lado la dejan 32px más ancha que la ventana. */
.contenido-principal {
  max-width: 1240px;
  padding: var(--s5) var(--s4) var(--s7);
}

/* Va después de .contenido-principal a propósito: misma especificidad, gana el
   último. Abajo hay dos cosas fijas encima del contenido — la barra de 4
   destinos y el botón de registrar, que arranca a 56px y mide 48 — así que el
   colchón tiene que pasar los 104px o el botón tapa la última fila. */
.layout-movil {
  padding-bottom: 120px;
}

.barra-inferior {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--zinc-000);
  border-top: var(--hair);
  display: grid;
  /* Una columna por item, sin decir cuantos son: la barra tiene 3 destinos para
     el TECNICO y 6 para el resto, y un repeat(N) fijo obliga a contarlos a mano
     en la plantilla y a errarle el dia que se suma uno. */
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  z-index: 100;
}

.barra-inferior a, .barra-inferior button {
  /* 44px es el minimo tactil de §7 de DISENO. Con solo el padding la barra
     quedaba en 38px, que con seis destinos de 61px de ancho es justo donde el
     pulgar empieza a errarle al de al lado. */
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2px;
  text-align: center;
  font: var(--t-micro);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--petroleo-500);
  text-decoration: none;
  background: transparent;
  border: 0;
  cursor: pointer;
}

/* El grupo "Más": mismo objetivo táctil que un destino, y el panel se abre
   hacia arriba porque la barra está pegada al borde inferior. */
.barra-inferior .mas {
  position: relative;
}

.barra-inferior .mas > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: var(--t-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--petroleo-500);
  cursor: pointer;
  list-style: none;
}

.barra-inferior .mas > summary::-webkit-details-marker {
  display: none;
}

.mas-panel {
  position: absolute;
  bottom: 100%;
  right: 0;
  min-width: 180px;
  background: var(--zinc-000);
  border: var(--hair);
  border-top: var(--canto);
  box-shadow: var(--relieve);
}

.mas-panel a {
  justify-content: flex-start;
  padding: 0 var(--s4);
  border-bottom: var(--hair);
}

.mas-panel a:last-child {
  border-bottom: 0;
}

.barra-inferior a.act, .barra-inferior .mas > summary.act, .barra-inferior button.act {
  color: var(--naranja-800);
  box-shadow: inset 0 2px 0 var(--naranja-600);
}

.btn-registrar-fijo {
  position: fixed;
  bottom: 56px;
  left: var(--s4);
  right: var(--s4);
  z-index: 99;
}

@media (min-width: 1000px) {
  .app-layout {
    display: flex;
    min-height: 100vh;
  }

  .riel-izquierdo {
    display: block;
    width: 220px;
    flex-shrink: 0;
    background-color: var(--petroleo-700);
    /* Misma cuadrícula que el fondo, en claro sobre la superficie invertida:
       el riel es la otra cara de la misma chapa. */
    background-image:
      repeating-linear-gradient(90deg, rgba(255,255,255,0.045) 0 1px, transparent 1px var(--trama-paso)),
      repeating-linear-gradient(0deg,  rgba(255,255,255,0.045) 0 1px, transparent 1px var(--trama-paso));
    color: var(--zinc-000);
    padding: var(--s4);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    border-right: 2px solid var(--petroleo-900);
  }

  .riel-izquierdo a {
    color: var(--zinc-000);
    text-decoration: none;
    display: block;
    padding: var(--s2) 0 var(--s2) var(--s3);
    font: var(--t-label);
    /* El destino activo se marca con la barra naranja de la izquierda, no
       pintando el texto: sobre el riel el naranja da 3.3:1 y una etiqueta de
       13px necesita 4.5:1. El texto queda blanco y legible. */
    border-left: 3px solid transparent;
  }

  .contenido-principal {
    margin-left: 220px;
    flex: 1;
    max-width: 1240px;
    padding: var(--s5) var(--s4) var(--s7);
  }

  .barra-inferior, .btn-registrar-fijo {
    display: none;
  }

  /* En escritorio una placa por fila deja 900px de blanco al lado de dos
     líneas de texto y la regleta se estira hasta perder la lectura de tramo.
     Dos o tres columnas según entre, y la regleta con techo. */
  .servicios-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }

  .placa-servicio .regleta {
    max-width: 320px;
  }
}

/* Layout & Componentes Adicionales */
.brand-escritorio {
  margin-bottom: var(--s5);
}

.brand-titulo {
  color: var(--petroleo-900);
}

.riel-izquierdo .brand-titulo {
  color: var(--zinc-000);
  /* El nombre estampado sobre su propia franja, como la placa de la máquina. */
  display: block;
  border-bottom: 3px solid var(--naranja-600);
  padding-bottom: var(--s2);
}

.brand-subtitulo {
  display: block;
  color: var(--petroleo-500);
  margin-top: var(--s1);
}

.riel-izquierdo .brand-subtitulo,
.barra-superior-movil .brand-subtitulo {
  color: var(--zinc-nav);
}

.nav-escritorio {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.nav-escritorio a.act {
  font-weight: 700;
  border-left-color: var(--naranja-600);
  background: rgba(220, 83, 20, 0.14);
}

.riel-footer {
  position: absolute;
  bottom: var(--s4);
  left: var(--s4);
  right: var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.usuario-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.usuario-info span {
  color: var(--zinc-000);
}

.usuario-info .micro {
  color: var(--zinc-nav);
}

.btn-nuevo-escritorio, .btn-logout-escritorio {
  width: 100%;
}

.barra-superior-movil {
  background-color: var(--petroleo-900);
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px var(--trama-paso));
  color: var(--zinc-000);
  padding: var(--s3) var(--s4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: calc(-1 * var(--s5)) calc(-1 * var(--s4)) var(--s4) calc(-1 * var(--s4));
  border-bottom: 3px solid var(--naranja-600);
}

.barra-superior-movil .brand-titulo {
  color: var(--zinc-000);
}

.user-tag {
  color: var(--zinc-nav);
}

@media (min-width: 1000px) {
  .barra-superior-movil {
    display: none;
  }
}

.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--s4);
  /* El fondo lo pinta la escena SVG de login.html. Este color es solo el
     respaldo mientras el SVG no está pintado todavía. */
  background-color: var(--petroleo-900);
  position: relative;
}

.login-escena {
  position: fixed;
  inset: 0;
  z-index: 0;
}

.login-escena svg {
  width: 100%;
  height: 100%;
  display: block;
}

.login-card {
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.45);
}

.login-wrap {
  width: 100%;
  max-width: 400px;
  /* por encima de la escena */
  position: relative;
  z-index: 1;
}

.login-card {
  padding: var(--s6) var(--s5);
}

/* Ancla la placa al pie de la chapa: sin esto el ingreso son 400px flotando en
   el medio de una pantalla vacía. #A9BCC6 sobre petróleo da 9:1. */
.login-pie {
  margin-top: var(--s4);
  text-align: center;
  color: var(--zinc-nav);
}

.login-header {
  margin-bottom: var(--s5);
}

.login-alerta {
  margin-bottom: var(--s4);
}

.login-form {
  display: grid;
  gap: var(--s2);
}

.btn-full {
  width: 100%;
  margin-top: var(--s2);
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--s4);
  flex-wrap: wrap;
  gap: var(--s2);
}

.page-header-actions {
  display: flex;
  gap: var(--s2);
  align-items: center;
}

.alertas-stack {
  display: grid;
  gap: var(--s2);
  margin-bottom: var(--s5);
}

/* El "por cobrar" es la pregunta que abre el sistema: va invertido para que sea
   lo primero que engancha el ojo en la pantalla. El naranja sobre petróleo da
   4.46:1 y la cifra es de 36px, muy por encima del piso de 3:1 para texto
   grande. */
.kpi-card {
  margin-bottom: var(--s5);
  background: var(--invertido-fondo);
  border-color: var(--invertido-fondo);
  color: var(--invertido-texto);
  box-shadow: 3px 3px 0 rgba(13, 26, 33, 0.18);
}

.kpi-card .micro,
.kpi-card .codigo {
  color: var(--zinc-nav);
}

.kpi-val {
  color: var(--naranja-600);
  margin-top: var(--s1);
  margin-bottom: var(--s1);
}

.kpi-sub {
  color: var(--petroleo-500);
}

.kpi-card .kpi-sub {
  color: var(--zinc-nav);
}

.kpi-card .kpi-val {
  color: var(--invertido-acento);
}

.servicios-grid {
  display: grid;
  gap: var(--s3);
}

.placa-servicio {
  display: grid;
  gap: var(--s2);
  /* El código va absoluto a 12px del borde y ocupa hasta los 23; la regleta,
     que acá es el primer elemento del flujo, arrancaba a 16 y le pasaba por
     encima en la esquina derecha. */
  padding-top: calc(var(--s4) + var(--s3));
  text-decoration: none;
  color: inherit;
}

.placa-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s2);
}

.placa-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.placa-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: var(--s2);
  padding-top: var(--s2);
  border-top: var(--hair);
}

.filtros-card {
  margin-bottom: var(--s4);
  padding: var(--s3) var(--s4);
}

.filtros-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  align-items: flex-end;
}

.filtros-campo {
  flex: 1 1 140px;
  margin-bottom: 0;
}

.filtros-campo label {
  display: block;
}

.form-grid {
  display: grid;
  gap: var(--s2);
}

.form-row {
  display: grid;
  gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.tipo-trabajo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.gastos-section {
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: var(--canto);
}

.gasto-fila {
  display: flex;
  gap: var(--s2);
  align-items: flex-end;
  margin-bottom: var(--s3);
  flex-wrap: wrap;
}

.gasto-concepto-select {
  flex: 2 1 160px;
}

.gasto-monto-input {
  flex: 1 1 110px;
}

.gasto-nota-input {
  flex: 2 1 160px;
}

.total-gastos-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--zinc-100);
  padding: var(--s3) var(--s4);
  border-radius: var(--r);
  margin-top: var(--s3);
  margin-bottom: var(--s4);
}

.detalle-grid {
  display: grid;
  gap: var(--s4);
}

.detalle-meta {
  display: grid;
  gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.historial-item {
  padding: var(--s2) 0;
  border-bottom: var(--hair);
}

.historial-item:last-child {
  border-bottom: 0;
}

.empty-card {
  text-align: center;
  padding: var(--s6) var(--s4);
}

.empty-text {
  color: var(--petroleo-500);
  margin-bottom: var(--s4);
}

.paginacion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-top: var(--s4);
}

.fila-clicable {
  cursor: pointer;
}

.cli-link {
  color: inherit;
  text-decoration: none;
  display: block;
}

.mb-0 {
  margin-bottom: 0;
}

.display-block {
  display: block;
}

.seccion-bloque {
  margin-bottom: var(--s6);
}

.seccion-mb5 {
  margin-bottom: var(--s5);
}

.header-grupo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s3);
}

.titulo-bloque {
  display: block;
  margin-bottom: var(--s3);
}

.kpi-num {
  margin: var(--s1) 0;
}

.kpi-block {
  display: block;
  margin-top: var(--s1);
}

.kpi-ok {
  color: var(--verde-700);
}

.c-alta {
  color: var(--naranja-800);
}

.c-crit {
  color: var(--rojo-700);
}

.dato-kpi {
  margin: var(--s2) 0;
}

.micro-margin {
  margin: var(--s1) 0;
}

.micro-block {
  display: block;
  line-height: 1.4;
}

.nota-text {
  color: var(--petroleo-500);
  margin-top: var(--s1);
}

.nota-supuesto {
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: var(--hair);
}

.alerta-detalle {
  font: var(--t-label);
  color: var(--petroleo-500);
  margin-top: var(--s1);
}

.col-estado {
  width: 140px;
}

.col-cotizacion {
  width: 130px;
}

.col-monto {
  width: 140px;
}

.placa-split {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s3);
}

.text-right {
  text-align: right;
}

.pago-form {
  margin-top: var(--s2);
  display: inline-flex;
  gap: var(--s2);
  align-items: center;
}

.pago-fecha {
  height: 36px;
  width: 140px;
}

.btn-sm {
  height: 36px;
  padding: 0 var(--s3);
  font-size: 13px;
}

.link-destacado {
  color: var(--naranja-800);
  text-decoration: underline;
}

.grid-s2 {
  display: grid;
  gap: var(--s2);
}

.gasto-barra-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2px;
}

.barra-track {
  height: 10px;
  background: var(--zinc-100);
  border-radius: var(--r);
  overflow: hidden;
}

.barra-fill {
  height: 100%;
  background: var(--petroleo-900);
}

.tabla-wrap {
  padding: 0;
  overflow-x: auto;
}

/* ==========================================================================
   ACCESIBILIDAD §7
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}