/* ══════════════════════════════════════════════════════════════════════════
   Bitácora Conductores — design system "Nocturne WT"
   Adaptación del sistema Nocturne (design_handoff_control_conductores/) a la
   marca WeTransport (Manual de Marca: violeta #6114A8 · azul #5F81F7 ·
   naranjo #F67901 solo como acento cálido). Sin frameworks, sin build step.
   ══════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var.65850a373e25.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root,
.contenedor-principal .torre {
  /* base */
  --bg: #161826;
  --superficie: #232532;
  --texto: #e9e9ed;
  --acento: #9184d9;
  --divisor: color-mix(in srgb, #e9e9ed 16%, transparent);

  /* rampa neutral (OKLCH compartida con la de acento) */
  --n100: #f3f5fe; --n200: #e4e7f5; --n300: #cfd3e5; --n400: #b2b6ca;
  --n500: #9397ab; --n600: #75798c; --n700: #595d6c; --n800: #3f424d;
  --n900: #292b31;

  /* rampa acento (blurple de marca) */
  --a100: #f5f4ff; --a200: #e7e5fe; --a300: #d2cefd; --a400: #b5abfc;
  --a500: #968ae0; --a600: #796cbf; --a700: #5d5294; --a800: #423a6a;
  --a900: #2b2741;

  /* estados semánticos (baja croma para no romper el tono) */
  --ok: #8fc7aa;      --ok-solido: #7fb79b;  --ok-fondo: rgba(127,183,155,.16);  --ok-borde: rgba(127,183,155,.5);
  --alerta: #dcb87c;  --alerta-solido: #c9a36a; --alerta-fondo: rgba(201,163,106,.16); --alerta-borde: rgba(201,163,106,.5);
  --mal: #e7969c;     --mal-solido: #cf7d84; --mal-fondo: rgba(207,125,132,.16); --mal-borde: rgba(207,125,132,.5);
  --neutro-fondo: #2b2741; --neutro-borde: #595d6c;

  /* Escala tipográfica: siete tamaños y nada bajo 10px. Antes convivían 31
     valores sin relación; la ficha del móvil usaba 13 a la vez (revisión de
     diseño, 2026-09-03). Fuera de la escala quedan solo las cifras grandes de
     la torre (32–54px) y la tipografía del manual y del login. */
  --t-rotulo: 10px;     /* rótulos en mayúsculas: th, etiquetas de KPI, secciones */
  --t-meta: 11.5px;     /* metadatos, ayuda de formulario, píldoras */
  --t-cuerpo: 13px;     /* cuerpo, tablas, menú, botones */
  --t-titulo: 15px;     /* título de tarjeta */
  --t-pagina: 18px;     /* título de página y de riel */
  --t-riel: 22px;       /* cifras compactas, identidad de ficha */
  --t-cifra: 28px;      /* cifras del panel */

  /* Espaciado en cuatro pasos. */
  --e-1: 6px; --e-2: 10px; --e-3: 14px; --e-4: 20px;

  /* Radios: cajas y píldoras. `--radio-sm` queda para controles internos. */
  --radio-sm: 4px;
  --radio: 8px;
  --radio-pill: 20px;

  /* Motion: tres duraciones y una curva. Hover y foco cambian color, nunca
     tamaño; los paneles nacen desde su ancla; la entrada de página es una
     sola coreografía. Con `prefers-reduced-motion` todo dura 1ms (al final). */
  --t-rapido: 120ms;
  --t-medio: 180ms;
  --t-entrada: 260ms;
  --curva: cubic-bezier(.2, .7, .2, 1);

  --sombra-sm: 0 0 0 1px #3f424d;
  --sombra-md: 0 0 0 1px #595d6c, 0 6px 18px rgba(0, 0, 0, .55);
  --sombra-lg: 0 0 0 1px #9397ab, 0 16px 40px rgba(0, 0, 0, .65);

  --fuente: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Identificadores y cifras (RUT, patentes, fechas, montos): alinean en
     columna y se distinguen del texto. Stack del sistema — la app vive tras
     Tailscale, sin CDN ni build step. */
  --mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", Menlo, monospace;
  --ancho-sidebar: 224px;
  --alto-topbar: 58px;
}

/* ---- Tema claro de la zona de contenido ---------------------------------
   El sidebar conserva el Nocturne oscuro; el área de información (topbar +
   main + modales + guía de la primera vez) usa un gris con sutil azulado. La
   torre re-declara los tokens oscuros arriba: es una "pantalla" (modo TV) y se
   mantiene dark. */
.contenedor-principal, #modal, .guia, .dialogo-confirmar {
  --bg: #eef0f6;
  /* Blanco con un pelo de tono, no #fff: sobre ocho horas de tablas el blanco
     puro sobre el gris del fondo pica a la vista (decisión de tema, ADR-011). */
  --superficie: #fcfcfe;
  --texto: #262b3d;
  --acento: #7264cf;
  --divisor: color-mix(in srgb, #262b3d 14%, transparent);

  --n100: #14182a; --n200: #232838; --n300: #454b60; --n400: #5c6275;
  --n500: #6a7186; --n600: #868da0; --n700: #b7bdcc; --n800: #dbdfe9;
  --n900: #f2f3f8;

  --a100: #241f4a; --a200: #37307a; --a300: #5b4eb8; --a400: #6c5ece;
  --a500: #8478d6; --a600: #9d93e0; --a700: #beb6ee; --a800: #d9d4f6;
  --a900: #edebfb;

  --ok: #1f7a52; --ok-solido: #4da583; --ok-fondo: rgba(61, 153, 112, .13); --ok-borde: rgba(61, 153, 112, .45);
  --alerta: #8a6612; --alerta-solido: #cfa254; --alerta-fondo: rgba(201, 163, 106, .17); --alerta-borde: rgba(164, 128, 62, .5);
  --mal: #b23a45; --mal-solido: #c96a72; --mal-fondo: rgba(207, 125, 132, .13); --mal-borde: rgba(178, 58, 69, .4);
  --neutro-fondo: #eceef6; --neutro-borde: #c4c9d8;

  --sombra-sm: 0 0 0 1px #dbdfe9;
  --sombra-md: 0 0 0 1px #c9cedd, 0 6px 18px rgba(38, 43, 61, .12);
  --sombra-lg: 0 0 0 1px #b7bdcc, 0 16px 40px rgba(38, 43, 61, .18);

  color: var(--texto);
  background: var(--bg);
  color-scheme: light;
}
.sidebar, .contenedor-principal .torre, .login-fondo { color-scheme: dark; }
/* detalles hardcodeados para oscuro que necesitan par claro */
.contenedor-principal .tabla tbody tr:hover td,
#modal .tabla tbody tr:hover td { background: rgba(114, 100, 207, .07); }
.contenedor-principal .avatar-ficha.iniciales {
  background: repeating-linear-gradient(135deg, #e6e2f8 0 5px, #eef0f6 5px 10px);
}
.contenedor-principal .torre { color: var(--texto); }

* , *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--fuente);
  font-size: var(--t-cuerpo);
  line-height: 1.5;
  color: var(--texto);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-weight: 500; letter-spacing: -.015em; margin: 0; }
h1 { font-size: var(--t-pagina); font-weight: 600; }
h2 { font-size: var(--t-titulo); font-weight: 600; margin-bottom: .6rem; }
a { color: var(--a400); text-decoration: none; text-underline-offset: 3px; transition: color var(--t-rapido) var(--curva); }
a:hover { text-decoration: underline; }
small { font-size: var(--t-meta); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--acento) 30%, transparent); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--n800); border-radius: 20px; border: 2px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }

/* iconos (sprite static/img/iconos.svg) */
.ic {
  width: 15px; height: 15px; flex: none;
  fill: currentColor; vertical-align: -2px;
}
.ic-13 { width: 13px; height: 13px; }
.ic-17 { width: 17px; height: 17px; }

/* regla que se desvanece en los extremos — firma Nocturne */
.regla, hr {
  height: 1px; border: 0; margin: 12px 0;
  background: linear-gradient(90deg, transparent, var(--n800) 48px,
              var(--n800) calc(100% - 48px), transparent);
}

/* ---- Shell: sidebar + topbar + main ------------------------------------ */
.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--ancho-sidebar); flex-shrink: 0;
  background: var(--bg); border-right: 1px solid var(--n800);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  z-index: 40;
}
.sidebar .marca { padding: 18px 16px 14px; }
.sidebar .marca img { height: 21px; width: auto; display: block; margin: 0 0 6px; }
.sidebar .marca small { display: block; color: var(--n500); font-size: var(--t-meta); letter-spacing: .02em; }

.sidebar nav { padding: 6px 10px; flex: 1; }
.sidebar .nav-seccion {
  display: flex; align-items: baseline; gap: 6px;
  font-size: var(--t-rotulo); text-transform: uppercase; letter-spacing: .12em;
  color: var(--n600); padding: 16px 8px 5px; font-weight: 500;
}
/* El número de paso: el menú sigue el orden en que nace la operación
   (socio → flota → operación → dinero), el mismo que usa el manual. */
.sidebar .nav-seccion .paso { color: var(--a500); font-variant-numeric: tabular-nums; }
.sidebar nav a {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px; margin-bottom: 2px;
  border: 1px solid transparent; border-radius: var(--radio);
  color: var(--n400); font-size: var(--t-cuerpo);
  transition: background-color var(--t-rapido) var(--curva), color var(--t-rapido) var(--curva);
}
.sidebar nav a .ic { color: var(--n500); transition: color var(--t-rapido) var(--curva); }
.sidebar nav a:hover { background: rgba(145, 132, 217, .07); color: var(--texto); text-decoration: none; }
.sidebar nav a.activo {
  background: rgba(145, 132, 217, .14);
  border-color: rgba(145, 132, 217, .45);
  color: var(--texto); font-weight: 500;
}
.sidebar nav a.activo .ic { color: var(--a400); }
.sidebar nav a .badge-nav {
  margin-left: auto; font-size: var(--t-meta); padding: 1px 7px; line-height: 1.4;
  border-radius: var(--radio-pill); background: var(--a900); color: var(--a300);
  font-variant-numeric: tabular-nums;
}
.sidebar nav a .badge-nav.vivo { color: var(--ok); background: rgba(127, 183, 155, .14); }

.sidebar .pie {
  padding: 12px 16px 14px; border-top: 1px solid var(--n900);
  font-size: var(--t-meta); color: var(--n500);
}
.sidebar .pie .punto { display: inline-block; width: 5px; height: 5px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }

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

.topbar {
  height: var(--alto-topbar); flex-shrink: 0;
  display: flex; align-items: center; gap: 14px;
  padding: 0 18px;
  background: var(--bg); border-bottom: 1px solid var(--n800);
  position: sticky; top: 0; z-index: 30;
}
.topbar .titulo-vista h1 { font-size: var(--t-pagina); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; }
.topbar .titulo-vista .sub { font-size: var(--t-meta); color: var(--n500); margin-top: 1px; }
.topbar .acciones { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }

.usuario-chip { display: flex; align-items: center; gap: 9px; padding-left: 12px; border-left: 1px solid var(--n800); }
.usuario-chip .avatar {
  width: 29px; height: 29px; border-radius: var(--radio);
  background: rgba(145, 132, 217, .16); color: var(--a300);
  display: grid; place-items: center;
  font-size: var(--t-meta); font-weight: 600; letter-spacing: .02em;
}
.usuario-chip .quien { line-height: 1.25; }
.usuario-chip .quien .nombre { font-size: var(--t-cuerpo); font-weight: 500; }
.usuario-chip .quien .rol { font-size: var(--t-meta); color: var(--n500); }
.usuario-chip form { margin: 0; display: flex; }
.boton-salir {
  display: grid; place-items: center; width: 32px; height: 32px;
  background: transparent; border: 1px solid transparent; border-radius: var(--radio);
  color: var(--n500); cursor: pointer; padding: 0;
  transition: color var(--t-rapido) var(--curva), background-color var(--t-rapido) var(--curva);
}
.boton-salir:hover { color: var(--mal); background: var(--mal-fondo); }

.boton-menu {
  display: none; width: 34px; height: 34px;
  background: transparent; border: 1px solid var(--n800); border-radius: var(--radio);
  color: var(--n300); cursor: pointer; place-items: center; padding: 0;
}
.boton-menu:hover { background: rgba(145, 132, 217, .1); }

.principal { flex: 1; min-width: 0; padding: var(--e-4) 22px; display: flex; flex-direction: column; gap: 16px; }
.principal > * { margin: 0; }

/* ---- Tarjetas ----------------------------------------------------------- */
.tarjeta {
  background: var(--superficie); border: 1px solid var(--n800);
  border-radius: var(--radio); padding: var(--e-3) 15px;
  transition: border-color var(--t-rapido) var(--curva);
}
.tarjeta > h2, .tarjeta-cabecera {
  display: flex; align-items: baseline; gap: 10px;
  font-size: var(--t-titulo); font-weight: 600; letter-spacing: -.01em; margin: 0 0 var(--e-2);
}
.tarjeta-cabecera h2, .tarjeta-cabecera h3 { font-size: var(--t-titulo); font-weight: 600; margin: 0; }
.tarjeta-cabecera .meta { margin-left: auto; font-size: var(--t-meta); color: var(--n500); font-weight: 400; }

.grilla-tarjetas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}
/* Entrada de página: las tarjetas suben 6px en escalera, una sola vez. */
@keyframes entrar { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.grilla-tarjetas > .tarjeta { animation: entrar var(--t-entrada) var(--curva) both; }
.grilla-tarjetas > .tarjeta:nth-child(2) { animation-delay: 30ms; }
.grilla-tarjetas > .tarjeta:nth-child(3) { animation-delay: 60ms; }
.grilla-tarjetas > .tarjeta:nth-child(4) { animation-delay: 90ms; }
.grilla-tarjetas > .tarjeta:nth-child(5) { animation-delay: 120ms; }
.grilla-tarjetas > .tarjeta:nth-child(n + 6) { animation-delay: 150ms; }
.grilla-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
/* simetría: el contenido (tablas anchas) no puede empujar su columna y
   desbalancear la grilla; cada celda scrollea por dentro */
.grilla-2 > *, .grilla-tarjetas > * { min-width: 0; }
/* Cabecera de ficha en dos columnas (identidad | contexto) y columnas
   internas que apilan tarjetas con el mismo gap del layout. */
.grilla-cabecera { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.columna { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.lista-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
/* Cards y chips que filtran: son enlaces pero visten como tarjeta/badge. */
a.tarjeta { color: inherit; }
a.tarjeta:hover { text-decoration: none; border-color: var(--a400); }
.lista-chips a.badge:hover { text-decoration: none; border-color: var(--a400); }

/* Tablero de conductores: identidad y cobertura de un vistazo. */
.avatar-mini {
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--a900); color: var(--a300);
  font-size: var(--t-meta); font-weight: 600;
}
.celda-avatar { width: 34px; }
.alerta-texto { color: var(--alerta); }

/* Select buscable (asignaciones): escribir y elegir del match. */
.buscable-caja { position: relative; }
.buscable-lista {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30;
  background: var(--superficie); border: 1px solid var(--n700);
  border-radius: var(--radio); box-shadow: var(--sombra-md);
  max-height: 264px; overflow-y: auto;
}
.buscable-item { padding: 7px 11px; font-size: var(--t-cuerpo); cursor: pointer; }
.buscable-item:hover { background: rgba(114, 100, 207, .08); }
.buscable-item.vacio { color: var(--n500); cursor: default; }

/* Guía de modalidades: aparece al enfocar el selector, marca la elegida. */
#guia-modalidades .item-modalidad { padding: 8px 10px; border-radius: var(--radio); margin-bottom: 4px; }
#guia-modalidades .item-modalidad.activo { background: rgba(114, 100, 207, .1); outline: 1px solid var(--a600); }

/* ---- KPI: una sola tarjeta de cifra ----------------------------------------
   Antes había dos (`.kpi` vertical en el panel y `.kpi-ficha` horizontal en
   las fichas). Queda una, con `.compacto` para el riel y las pestañas. El color
   va SOLO en la línea de estado (`.estado`), no en la cifra: un 23 en rojo
   grita; «23 · vencidos» en rojo informa. */
.kpi { display: flex; flex-direction: column; gap: 4px; padding: 13px 14px 12px; }
.kpi .etiqueta {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--t-rotulo); text-transform: uppercase; letter-spacing: .1em;
  color: var(--n400); font-weight: 500;
}
.kpi .etiqueta a { color: inherit; }
.kpi .etiqueta .ic { width: 13px; height: 13px; color: var(--n500); }
.kpi .valor {
  font-size: var(--t-cifra); font-weight: 600; letter-spacing: -.025em; line-height: 1.1;
  font-variant-numeric: tabular-nums; margin-top: 2px; white-space: nowrap; color: var(--texto);
}
.kpi .valor.dinero { font-size: var(--t-riel); }
.kpi .valor .unidad { font-size: var(--t-cuerpo); color: var(--n500); letter-spacing: 0; font-weight: 500; margin-left: 2px; }
.kpi .pie { font-size: var(--t-meta); color: var(--n500); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kpi .estado { display: inline-flex; align-items: center; gap: 5px; font-size: var(--t-meta); font-weight: 500; }
.kpi .estado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.kpi .estado.ok { color: var(--ok); } .kpi .estado.alerta { color: var(--alerta); }
.kpi .estado.mal { color: var(--mal); } .kpi .estado.neutro { color: var(--n500); }
.kpi .estado.neutro::before { display: none; }
/* Compacta: para el riel y las pestañas de las fichas. */
.kpi.compacto { flex-direction: row; align-items: center; gap: 11px; padding: 10px 12px; border-radius: var(--radio); }
.kpi.compacto .caja { width: 32px; height: 32px; border-radius: var(--radio); background: var(--n900); display: grid; place-items: center; flex-shrink: 0; }
.kpi.compacto .caja .ic { color: var(--n500); }
.kpi.compacto > div { min-width: 0; }
.kpi.compacto .valor { font-size: var(--t-riel); margin-top: 0; }
.kpi.compacto .etiqueta { margin-top: 1px; }
.kpi.compacto.hueco .caja { background: transparent; border: 1px dashed var(--a600); }
.kpi.compacto.hueco .caja .ic, .kpi.compacto.hueco .etiqueta { color: var(--a500); }

/* ---- Franja de cifras: los números de una lista en una sola línea ----------
   Una lista no necesita seis tarjetas antes de la tabla: una franja con las
   cifras separadas por divisores dice lo mismo en 52px y deja la tabla a la
   vista. Cada cifra puede ser un enlace que filtra. */
.franja-cifras {
  display: flex; align-items: stretch; flex-wrap: wrap;
  background: var(--superficie); border: 1px solid var(--n800); border-radius: var(--radio);
}
.franja-cifras .cifra {
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
  padding: 10px 18px; min-width: 120px; color: inherit;
  border-right: 1px solid var(--n900);
  transition: background-color var(--t-rapido) var(--curva);
}
.franja-cifras .cifra:last-child { border-right: 0; }
.franja-cifras a.cifra:hover { background: var(--bg); text-decoration: none; }
.franja-cifras a.cifra.activa { box-shadow: inset 0 -2px 0 var(--acento); }
.franja-cifras .etiqueta { font-size: var(--t-rotulo); text-transform: uppercase; letter-spacing: .1em; color: var(--n400); font-weight: 500; }
.franja-cifras .valor { font-size: var(--t-riel); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.franja-cifras .valor .unidad { font-size: var(--t-meta); color: var(--n500); font-weight: 500; margin-left: 3px; letter-spacing: 0; }
.franja-cifras .estado { font-size: var(--t-meta); font-weight: 500; }
.franja-cifras .estado.ok { color: var(--ok); } .franja-cifras .estado.alerta { color: var(--alerta); }
.franja-cifras .estado.mal { color: var(--mal); } .franja-cifras .estado.neutro { color: var(--n500); }

/* ---- Tablas ------------------------------------------------------------- */
.tabla-envoltura { overflow-x: auto; margin: 0 -15px; }
.tarjeta .tabla-envoltura:last-child { margin-bottom: -14px; }
table.tabla { width: 100%; border-collapse: collapse; font-size: var(--t-cuerpo); }
.tabla th {
  text-align: left; font-size: var(--t-rotulo); text-transform: uppercase; letter-spacing: .08em;
  color: var(--n400); font-weight: 500; white-space: nowrap;
  padding: 6px 10px 8px;
  border-bottom: 1px solid var(--n800);
}
.tabla th:first-child, .tabla td:first-child { padding-left: 15px; }
.tabla th:last-child, .tabla td:last-child { padding-right: 15px; }
.tabla td { padding: 9px 10px; border-bottom: 1px solid var(--n900); vertical-align: middle; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody td { transition: background-color var(--t-rapido) var(--curva); }
.tabla tbody tr:hover td { background: rgba(43, 39, 65, .5); }
/* Acción de fila: aparece al pasar el mouse o al enfocar con teclado. */
.tabla .accion-fila { opacity: 0; transform: translateX(4px); transition: opacity var(--t-rapido) var(--curva), transform var(--t-rapido) var(--curva); }
.tabla tr:hover .accion-fila, .tabla tr:focus-within .accion-fila { opacity: 1; transform: none; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla .sin-datos { text-align: center; color: var(--n500); padding: 26px; font-size: var(--t-cuerpo); }
.tabla a { color: var(--texto); }
.tabla a:hover { color: var(--a300); }
.tabla strong { font-weight: 500; }
.patente { letter-spacing: .04em; font-weight: 500; }

/* ---- Botones ------------------------------------------------------------ */
.boton, button.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 6px 13px; border-radius: var(--radio); min-height: 32px;
  font-size: var(--t-cuerpo); font-weight: 500; font-family: inherit; line-height: 1.4;
  cursor: pointer; white-space: nowrap;
  background: transparent; color: var(--a300); border: 1px solid var(--acento);
  transition: background-color var(--t-rapido) var(--curva), color var(--t-rapido) var(--curva), border-color var(--t-rapido) var(--curva);
}
.boton:hover { background: color-mix(in srgb, var(--acento) 12%, transparent); text-decoration: none; }
.boton:active { background: color-mix(in srgb, var(--acento) 22%, transparent); transition-duration: 40ms; }
.boton.secundario { color: var(--n300); border-color: var(--n700); }
.boton.secundario:hover { background: color-mix(in srgb, var(--texto) 7%, transparent); }
.boton.peligro { color: var(--mal); border-color: var(--mal-borde); }
.boton.peligro:hover { background: var(--mal-fondo); }
/* «Chico» reduce el ancho, no la altura: 32px es el mínimo tocable. */
.boton.chico { padding: 4px 10px; font-size: var(--t-meta); gap: 5px; min-height: 32px; }
.boton:disabled { opacity: .45; cursor: not-allowed; }

/* ---- Formularios -------------------------------------------------------- */
.formulario p, .campo { margin: 0 0 13px; }
label { display: block; font-weight: 500; font-size: var(--t-meta); color: var(--n300); margin-bottom: 4px; }
input[type=text], input[type=email], input[type=number], input[type=date], input[type=search],
input[type=month], input[type=password], input[type=file], input[type=url], select, textarea {
  width: 100%; max-width: 480px; min-height: 34px;
  padding: 6px 10px; font-size: var(--t-cuerpo); font-family: inherit;
  color: var(--texto); caret-color: var(--acento);
  background: var(--superficie);
  border: 1px solid var(--n800); border-radius: var(--radio);
}
input, select, textarea { transition: border-color var(--t-rapido) var(--curva), box-shadow var(--t-rapido) var(--curva); }
input:hover, select:hover, textarea:hover { border-color: var(--n600); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: var(--acento); outline: 2px solid var(--acento); outline-offset: 0;
}
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--n500) 50%), linear-gradient(135deg, var(--n500) 50%, transparent 50%); background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 28px; }
input[type=checkbox] { width: 16px; height: 16px; min-height: 0; accent-color: var(--acento); }
input[type=file] { padding: 5px; }
input::file-selector-button {
  font: inherit; font-size: var(--t-meta); color: var(--a300);
  background: transparent; border: 1px solid var(--acento); border-radius: 6px;
  padding: 3px 9px; margin-right: 9px; cursor: pointer;
}
textarea { min-height: 84px; resize: vertical; }
.ayuda, .helptext { display: block; color: var(--n500); font-size: var(--t-meta); margin-top: 3px; }
.errorlist { color: var(--mal); font-size: var(--t-meta); margin: 3px 0 0; padding: 0; list-style: none; }
.form-acciones { display: flex; gap: 8px; justify-content: flex-end; max-width: 480px; margin-top: 16px; }

/* Formulario en línea (subir foto o documento junto a su lista). */
.formulario.en-linea { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; }
.formulario.en-linea p { margin: 0; }

/* ---- Filtros ------------------------------------------------------------ */
.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin-bottom: var(--e-3); }
.filtros .campo { margin: 0; }
.filtros label { font-size: var(--t-rotulo); text-transform: uppercase; letter-spacing: .1em; color: var(--n400); }
/* Mientras HTMX trae la tabla filtrada, el formulario lo dice sin saltos. */
.filtros.htmx-request .boton { opacity: .6; }
.filtros input, .filtros select { width: auto; min-width: 140px; max-width: 240px; }

/* ---- Badges / pills de estado ------------------------------------------- */
/* Una sola píldora para todo estado. Cinco tonos con un significado cada uno
   (verde vigente/operando · ámbar por vencer/pendiente · rojo vencido/bloqueado
   · gris inactivo/cerrado · violeta solo interactivo/seleccionado) y un
   «hueco» punteado para lo que falta registrar. Dos tamaños. Reemplaza a
   `.veredicto`, `.chip`, `.pill-patente` y `.falta`, que ya no existen. */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: var(--radio-pill); line-height: 1.5;
  font-size: var(--t-meta); font-weight: 500; letter-spacing: .01em;
  white-space: nowrap;
  background: var(--neutro-fondo); color: var(--n400); border: 1px solid transparent;
}
.badge.ok { background: var(--ok-fondo); color: var(--ok); }
.badge.peligro, .badge.mal { background: var(--mal-fondo); color: var(--mal); }
.badge.alerta { background: var(--alerta-fondo); color: var(--alerta); }
.badge.neutro { background: var(--neutro-fondo); color: var(--n400); }
.badge.seleccionado { background: var(--a900); color: var(--a300); }
.badge.hueco { background: transparent; color: var(--a500); border: 1px dashed var(--a600); }
.badge.grande { font-size: var(--t-cuerpo); padding: 4px 12px; }
.badge.mono { font-family: var(--mono); letter-spacing: .04em; }
.badge .ic { width: 13px; height: 13px; }
a.badge { transition: background-color var(--t-rapido) var(--curva), color var(--t-rapido) var(--curva), border-color var(--t-rapido) var(--curva); }
a.badge:hover { text-decoration: none; filter: brightness(.96); }


/* ---- Mensajes ----------------------------------------------------------- */
.mensajes { display: flex; flex-direction: column; gap: 8px; }
.mensaje {
  padding: 9px 13px; border-radius: var(--radio); font-size: var(--t-cuerpo);
  animation: entrar var(--t-entrada) var(--curva) both;
  border: 1px solid var(--n700); background: var(--superficie); color: var(--n300);
  /* Un mensaje con pasos (uno por línea, ej. cómo salir de «no se puede reversar este lote»)
     respeta sus saltos de línea; el resto no tiene ninguno. */
  white-space: pre-line;
}
.mensaje.success { background: var(--ok-fondo); color: var(--ok); border-color: var(--ok-borde); }
.mensaje.error { background: var(--mal-fondo); color: var(--mal); border-color: var(--mal-borde); }
.mensaje.warning { background: var(--alerta-fondo); color: var(--alerta); border-color: var(--alerta-borde); }
.mensaje.info { background: rgba(145, 132, 217, .12); color: var(--a300); border-color: rgba(145, 132, 217, .45); }

/* ---- Paginación --------------------------------------------------------- */
.paginacion { display: flex; gap: 6px; align-items: center; margin-top: var(--e-3); font-size: var(--t-cuerpo); padding: 0 15px 2px; }
.paginacion a, .paginacion span.actual {
  min-width: 32px; min-height: 32px; padding: 5px 9px; text-align: center;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--n800); border-radius: var(--radio);
  background: transparent; color: var(--n300);
  transition: background-color var(--t-rapido) var(--curva), color var(--t-rapido) var(--curva);
}
.paginacion a:hover { background: rgba(145, 132, 217, .1); text-decoration: none; color: var(--texto); }
.paginacion span.actual { border-color: var(--acento); color: var(--a300); }
.paginacion .resumen { margin-left: auto; color: var(--n500); font-size: var(--t-meta); }

/* ---- Login -------------------------------------------------------------- */
.login-fondo {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(520px 320px at 78% 12%, rgba(97, 20, 168, .16), transparent 70%),
    radial-gradient(420px 300px at 18% 88%, rgba(95, 129, 247, .1), transparent 70%),
    var(--bg);
  padding: 20px;
}
.login-caja {
  background: var(--superficie); border: 1px solid var(--n800);
  border-radius: 14px; padding: 38px 34px 32px;
  width: 390px; max-width: 94vw; text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
.login-caja img.logo { height: 64px; margin: 0 auto 18px; display: block; }
.login-caja h1 { font-size: var(--t-pagina); margin-bottom: 4px; }
.login-caja .sub { color: var(--n500); font-size: var(--t-meta); margin-bottom: 26px; }
.boton-google {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  padding: 10px; border: 1px solid var(--acento); border-radius: var(--radio);
  background: transparent; color: var(--a300);
  font-size: var(--t-cuerpo); font-weight: 500; cursor: pointer; font-family: inherit;
}
.boton-google:hover { background: rgba(145, 132, 217, .12); }
.login-caja .nota { margin-top: 18px; font-size: var(--t-meta); color: var(--n600); }
.login-local { margin-top: 22px; }
.login-local .divisor {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
  font-size: var(--t-rotulo); letter-spacing: .14em; text-transform: uppercase; color: var(--n500);
}
.login-local .divisor::before, .login-local .divisor::after {
  content: ""; flex: 1; height: 1px; background: var(--n800);
}
.login-local form { display: flex; flex-direction: column; gap: 8px; }
.login-local input {
  background: var(--n900); border: 1px solid var(--n800); border-radius: var(--radio);
  color: var(--n200); font: inherit; font-size: var(--t-cuerpo); padding: 8px 11px;
}
.login-local input:focus-visible { border-color: var(--a600); outline: 2px solid var(--acento); outline-offset: 0; }
.login-local .error { color: var(--mal); font-size: var(--t-meta); margin: 0 0 8px; }

/* ---- Detalle: filas clave/valor ----------------------------------------- */
.ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 18px; }
.ficha .dato .l {
  font-size: var(--t-rotulo); text-transform: uppercase; letter-spacing: .1em;
  color: var(--n400); font-weight: 500; margin-bottom: 2px;
}
.ficha .dato .v { font-size: var(--t-cuerpo); }

/* ---- Galería de fotos del móvil ----------------------------------------- */
.galeria-fotos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.galeria-fotos .foto {
  position: relative; border: 1px solid var(--n800); border-radius: var(--radio);
  overflow: hidden; background: var(--n900);
}
.galeria-fotos .foto img { display: block; width: 100%; height: 110px; object-fit: cover; }
.galeria-fotos .foto .pie-foto {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 8px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--n400);
}
.galeria-fotos .foto .pie-foto form { margin-left: auto; display: flex; }
.galeria-fotos .foto .pie-foto button {
  background: none; border: 0; color: var(--n600); cursor: pointer; padding: 0;
  width: 32px; height: 32px; margin: -8px -8px -8px 0; display: grid; place-items: center; border-radius: var(--radio);
  transition: color var(--t-rapido) var(--curva), background-color var(--t-rapido) var(--curva);
}
.galeria-fotos .foto .pie-foto button:hover { color: var(--mal); }
.galeria-fotos .vacio {
  grid-column: 1 / -1; text-align: center; color: var(--n500);
  padding: 22px; font-size: var(--t-meta);
  border: 1px dashed var(--n700); border-radius: var(--radio); background: var(--n900);
}

/* ---- Modal (HTMX) -------------------------------------------------------- */
.modal-fondo {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center; padding: 16px;
  background: rgba(10, 11, 18, .62);
}
.modal {
  width: min(460px, 100%); max-height: 90vh; overflow-y: auto;
  background: var(--superficie); border-radius: 14px;
  box-shadow: var(--sombra-lg);
  padding: 18px 20px 20px;
  display: flex; flex-direction: column; gap: 10px;
  animation: entrar-panel var(--t-medio) var(--curva) both;
}
@keyframes entrar-panel { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.modal-fondo { animation: aparecer var(--t-medio) var(--curva) both; }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
.modal .modal-cabecera { display: flex; align-items: center; gap: 10px; }
.modal .modal-cabecera h2 { font-size: var(--t-titulo); margin: 0; }
.modal .modal-cabecera .cerrar {
  margin-left: auto; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: var(--radio);
  background: none; border: 0; color: var(--n500); cursor: pointer;
  transition: color var(--t-rapido) var(--curva), background-color var(--t-rapido) var(--curva);
}
.modal .modal-cabecera .cerrar:hover { color: var(--texto); background: rgba(145, 132, 217, .1); }
.modal input, .modal select, .modal textarea { max-width: none; }
.modal .form-acciones { max-width: none; }

/* ---- Confirmación propia (static/js/confirmar.js) ---------------------------
   Reemplaza el confirm() del navegador en los formularios con data-confirmar.
   El <dialog> es solo el soporte (cuelga del <body>, por eso lleva los tokens
   claros en la lista del bloque de tema de arriba y no hereda nada): la caja
   es el mismo .modal de los diálogos de HTMX, y el fondo es el de .modal-fondo. */
.dialogo-confirmar {
  width: min(420px, calc(100vw - 32px)); max-width: none; max-height: none;
  padding: 0; border: 0; overflow: visible;
  background: transparent; /* el bloque de tema le puso el fondo gris de la página */
}
.dialogo-confirmar::backdrop {
  background: rgba(10, 11, 18, .62);
  animation: aparecer var(--t-medio) var(--curva) both;
}
.dialogo-confirmar .modal { width: 100%; }
.confirmar-texto { margin: 0; font-size: var(--t-cuerpo); line-height: 1.55; color: var(--texto); overflow-wrap: anywhere; }
/* El ::backdrop no es hijo de nada que el reset global de movimiento alcance. */
@media (prefers-reduced-motion: reduce) {
  .dialogo-confirmar::backdrop { animation: none; }
}



/* "Lo que el sistema aún no registra": es un hueco del producto, no una falta
   del socio. Va en tono apagado y rayado, nunca en rojo. */
.tarjeta.sin-registrar { border-style: dashed; }
.cc-contacto { display: flex; gap: 8px; flex-wrap: wrap; }

.lista-acciones { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.lista-acciones li { display: flex; align-items: center; gap: 7px; font-size: var(--t-cuerpo); }
.lista-acciones .ic { color: var(--a400); flex-shrink: 0; }

.linea-tiempo { list-style: none; margin: 0; padding: 0; position: relative; }
.linea-tiempo::before {
  content: ""; position: absolute; left: 12px; top: 10px; bottom: 10px;
  width: 1px; background: var(--n800);
}
.linea-tiempo li { display: flex; gap: 10px; padding: 6px 0; align-items: flex-start; }
.lt-punto {
  width: 25px; height: 25px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--n900); border: 1px solid var(--n800); position: relative; z-index: 1;
  color: var(--n500);
}
.lt-punto.hito { color: var(--a400); border-color: var(--a800); background: var(--a900); }
.lt-punto.ok { color: var(--ok); border-color: var(--ok-borde); }
.lt-punto.alerta { color: var(--alerta); border-color: var(--alerta-borde); }
.lt-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding-top: 2px; }
.lt-titulo { font-size: var(--t-cuerpo); }
.lt-detalle { font-size: var(--t-meta); color: var(--n500); overflow: hidden; text-overflow: ellipsis; }
.lt-fecha { font-size: var(--t-meta); color: var(--n500); white-space: nowrap; padding-top: 4px; }

/* ---- Torre de disponibilidad -------------------------------------------- */
.torre {
  background: var(--bg); border: 1px solid var(--n900); border-radius: var(--radio);
  padding: 20px; min-height: calc(100vh - 94px);
  display: flex; flex-direction: column; gap: 16px;
}
.torre-cabecera { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.torre-cabecera .kicker {
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--a400); font-weight: 500;
}
.torre-cabecera .titulo { font-size: 34px; font-weight: 500; letter-spacing: -.025em; margin-top: 5px; line-height: 1.05; }
.torre-cabecera .sub { font-size: var(--t-cuerpo); color: var(--n500); margin-top: 3px; }
.torre-reloj { margin-left: auto; text-align: right; }
.torre-reloj .hora { font-size: 32px; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.torre-reloj .refresco { font-size: var(--t-meta); color: var(--n500); margin-top: 5px; }
.torre-reloj .refresco .punto-vivo {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--a400); margin-right: 5px; vertical-align: 1px;
  animation: brillo 2.4s ease-in-out infinite;
}
@keyframes brillo {
  0%, 100% { box-shadow: 0 0 0 0 rgba(145, 132, 217, .55); opacity: 1; }
  50% { box-shadow: 0 0 0 4px rgba(145, 132, 217, 0); opacity: .6; }
}
.torre-paginas { display: flex; gap: 5px; justify-content: flex-end; margin-top: 8px; }
.torre-paginas span { width: 22px; height: 3px; border-radius: 20px; background: var(--n800); }
.torre-paginas span.actual { background: var(--a400); }

.torre-grilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.torre-region { background: var(--bg); border: 1px solid var(--n800); border-radius: var(--radio); padding: 15px; }
.torre-region .cabeza { display: flex; align-items: baseline; gap: 8px; }
.torre-region .zona { font-size: var(--t-riel); font-weight: 500; letter-spacing: -.01em; }
.torre-region .codigo { font-size: var(--t-meta); color: var(--n500); letter-spacing: .1em; text-transform: uppercase; }
.torre-region .disponibles {
  margin-left: auto; font-size: 40px; line-height: .85; font-weight: 500;
  letter-spacing: -.03em; color: var(--ok); font-variant-numeric: tabular-nums;
}
.torre-region .disponibles.cero { color: var(--n600); }
/* El número grande es "planificables". Se pinta verde solo si algo de eso está
   verificado: un 178 en verde sobre 178 móviles sin verificar volvería a dar
   la falsa tranquilidad que este estado existe para quitar. */
.torre-region .disponibles.sin-verificados { color: var(--n300); }
.torre-region .conteos { display: flex; gap: 12px; margin-top: 7px; font-size: var(--t-meta); color: var(--n500); }
.torre-barra { display: flex; height: 6px; margin-top: 9px; gap: 2px; border-radius: 20px; overflow: hidden; }
.torre-barra .disp { background: var(--ok-solido); }
/* Sin verificar: rayado, no color sólido — no es un estado del móvil, es un
   hueco de información nuestro. Se distingue de "fuera" (gris plano). */
.torre-barra .sinver {
  background-color: var(--n900);
  background-image: radial-gradient(circle, var(--a500) 1px, transparent 1.3px);
  background-size: 6px 6px;
}
.torre-barra .evento { background: var(--alerta-solido); }
.torre-barra .mant { background: var(--alerta-solido); }
.torre-barra .fuera { background: var(--n700); }
.torre-moviles { margin-top: 12px; display: flex; flex-direction: column; gap: 5px; }
.torre-movil {
  display: flex; align-items: center; gap: 9px; padding: 7px 9px;
  background: var(--superficie); border-radius: var(--radio);
}
.torre-movil.disp { box-shadow: inset 2px 0 0 var(--ok-solido); }
/* Sin verificar es un hueco nuestro: borde punteado, no franja sólida (se
   descuenta su ancho del padding para no mover el contenido). */
.torre-movil.sinver { box-shadow: none; border-left: 2px dashed var(--a600); padding-left: 7px; }
/* En atención y mantención son el mismo mensaje («no sale hoy pero vuelve»):
   mismo ámbar, se distinguen por la etiqueta. */
.torre-movil.evento { box-shadow: inset 2px 0 0 var(--alerta-solido); }
.torre-movil.mant { box-shadow: inset 2px 0 0 var(--alerta-solido); }
.torre-movil.fuera { box-shadow: inset 2px 0 0 var(--n700); }
.torre-movil .numero { font-size: var(--t-cuerpo); letter-spacing: .04em; font-weight: 500; white-space: nowrap; }
.torre-movil .quien { font-size: var(--t-meta); color: var(--n500); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.torre-movil .asientos { font-size: var(--t-meta); color: var(--n500); font-variant-numeric: tabular-nums; white-space: nowrap; }
.torre-region .asientos-zona { font-size: var(--t-meta); color: var(--ok); font-variant-numeric: tabular-nums; margin: 2px 0 6px; }
.torre-region .mas { font-size: var(--t-meta); color: var(--n600); padding-left: 2px; margin-top: 5px; }

.torre-pie {
  margin-top: auto; display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding-top: 13px; border-top: 1px solid var(--n900);
  font-size: var(--t-meta); color: var(--n500);
}
.torre-pie .leyenda { display: flex; align-items: center; gap: 6px; }
.torre-pie .leyenda i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.torre-pie .leyenda i.disp { background: var(--ok-solido); }
.torre-pie .leyenda i.sinver {
  background: var(--n900);
  background-image: radial-gradient(circle, var(--a500) 1px, transparent 1.3px);
  background-size: 4px 4px;
}
.torre-pie .leyenda i.evento { background: var(--alerta-solido); }
.torre-pie .salir-tv { margin-left: 12px; }
/* Embebida en la página normal no es una tarjeta oscura flotando: sin borde
   ni radio (torre.html la pone a sangre); el modo TV ya lo hacía. */
body:not(.modo-tv) .torre { border: 0; border-radius: 0; }
.torre .regla { margin: 0; }
.torre-pie .leyenda i.mant { background: var(--alerta-solido); }
.torre-pie .leyenda i.fuera { background: var(--n700); }
.torre-pie .nota { margin-left: auto; color: var(--alerta); }

/* modo TV (?tv=1): pantalla completa, escala arriba */
body.modo-tv .sidebar, body.modo-tv .topbar { display: none; }
body.modo-tv .principal { padding: 0; }
body.modo-tv .torre { border: 0; border-radius: 0; min-height: 100vh; padding: 28px 32px; }
@media (min-width: 1800px) {
  body.modo-tv .torre-cabecera .titulo { font-size: 44px; }
  body.modo-tv .torre-reloj .hora { font-size: 42px; }
  body.modo-tv .torre-reloj .refresco, body.modo-tv .torre-cabecera .sub { font-size: var(--t-titulo); }
  body.modo-tv .torre-region .zona { font-size: var(--t-cifra); }
  body.modo-tv .torre-region .disponibles { font-size: 54px; }
  body.modo-tv .torre-region .conteos { font-size: var(--t-titulo); }
  body.modo-tv .torre-movil .numero { font-size: var(--t-pagina); }
  body.modo-tv .torre-movil .quien { font-size: var(--t-titulo); }
  body.modo-tv .torre-movil .estado { font-size: var(--t-cuerpo); }
  body.modo-tv .torre-pie { font-size: var(--t-titulo); }
  body.modo-tv .torre-region .mas { font-size: var(--t-cuerpo); }
}

/* ---- Utilidades --------------------------------------------------------- */
.texto-2 { color: var(--n500); }
.chico { font-size: var(--t-meta); }
.nowrap { white-space: nowrap; }
.derecha { text-align: right; }
.mono, .num { font-variant-numeric: tabular-nums; }
.negativo { color: var(--mal); }
.positivo { color: var(--ok); }
.sin-margen { margin: 0; }
.fila-flex { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Texto que solo leen los lectores de pantalla (el estado de una píldora que se entiende por color). */
.solo-lectores {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 1100px) {
  .torre-grilla { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .boton-menu { display: grid; }
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; height: 100vh;
    transform: translateX(-100%); transition: transform var(--t-medio) var(--curva);
    box-shadow: none;
  }
  body.menu-abierto .sidebar { transform: translateX(0); box-shadow: 0 0 0 100vmax rgba(10, 11, 18, .6); }
  .topbar { padding: 0 12px; gap: 10px; }
  .topbar .titulo-vista .sub { display: none; }
  .usuario-chip .quien { display: none; }
  .principal { padding: 12px; gap: 12px; }
  .grilla-cabecera { grid-template-columns: 1fr; }
  .grilla-2 { grid-template-columns: 1fr; }
  .torre { min-height: 0; }
  .torre-grilla { grid-template-columns: 1fr; }
  .torre-cabecera .titulo { font-size: 24px; }
  .torre-reloj .hora { font-size: 24px; }
  .torre-pie .nota { margin-left: 0; }
  .filtros input, .filtros select { min-width: 110px; }
  .form-acciones { max-width: none; }
  input, select, textarea { max-width: none; }
}

@media (max-width: 560px) {
  .grilla-tarjetas { grid-template-columns: repeat(2, 1fr); }
  .kpi .valor { font-size: 24px; }
  .topbar .acciones .boton span.txt { display: none; }
  .topbar .acciones .boton { padding: 6px 9px; }
}

/* ── Tripulación: cada asignación es un bloque con su gente dentro ──────────
   La ficha del móvil dejó de ser una tabla plana de asignaciones cuando el
   conductor pasó a ser N. El anidamiento visual dice lo que dice el modelo:
   la tripulación cuelga de la asignación, no del móvil. */
.bloque-asignacion {
  border: 1px solid var(--divisor);
  border-radius: 8px;
  padding: 11px 12px;
  margin-bottom: 10px;
}
.bloque-asignacion:last-child { margin-bottom: 0; }
.bloque-asignacion > .tarjeta-cabecera { margin-bottom: 8px; }
.bloque-asignacion h3 { font-size: var(--t-cuerpo); font-weight: 500; margin: 0; }
.bloque-asignacion .tabla { font-size: var(--t-meta); }
/* Un vínculo cerrado sigue siendo historia visible, solo que en segundo plano. */
.tabla tr.fila-cerrada td { color: var(--n500); }

/* ── Pantallas de error (403/404/500) ──────────────────────────────────────
   Se ven solo en producción (Django usa sus plantillas con DEBUG=False).
   Regla: decir qué pasó en una línea, no culpar al usuario y dejar salida. */
.pantalla-error { max-width: 560px; margin: 40px auto; text-align: center; }
.pantalla-error h2 { font-size: var(--t-titulo); font-weight: 500; margin: 12px 0 6px; }
.pantalla-error p { margin: 0 0 18px; line-height: 1.55; }
.pantalla-error .form-acciones { justify-content: center; }
.icono-error { color: var(--n500); display: inline-block; }
.ic-32 { width: 32px; height: 32px; }

/* ── Volver: la salida de toda pantalla de detalle ─────────────────────────
   Vive en la topbar, a la izquierda del título, para que esté siempre en el
   mismo lugar sin importar el módulo. En pantallas angostas queda solo el
   ícono: el destino ya lo dice el `title`. */
.topbar .volver {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 9px 5px 5px; border-radius: var(--radio);
  color: var(--n400); font-size: var(--t-meta); text-decoration: none;
  border: 1px solid transparent; flex-shrink: 0;
}
.topbar .volver:hover { color: var(--texto); background: var(--n900); border-color: var(--n800); }
@media (max-width: 900px) { .topbar .volver .txt { display: none; } }

/* ── Menú plegable a solo iconos ───────────────────────────────────────────
   Las fichas de socio y móvil tienen su propio riel de identidad de 288px y
   compiten por el ancho con el menú. Plegado devuelve 160px al contenido.
   La elección la toma el usuario y se recuerda; no cambia sola por pantalla. */
.sidebar .marca .isotipo { display: none; height: 22px; width: auto; }
.plegar-menu {
  display: flex; align-items: center; gap: 8px; width: calc(100% - 20px);
  margin: 0 10px 2px; padding: 6px 9px;
  background: none; border: 1px solid transparent; border-radius: var(--radio);
  color: var(--n600); font-size: var(--t-meta); font-family: inherit; cursor: pointer;
  transition: color var(--t-rapido) var(--curva), background-color var(--t-rapido) var(--curva);
}
.plegar-menu:hover { color: var(--n300); background: rgba(145, 132, 217, .07); }
.plegar-menu:focus-visible { outline: 2px solid var(--a400); outline-offset: 1px; }
.plegar-menu .ic { transition: transform var(--t-medio) var(--curva); }

body.menu-plegado { --ancho-sidebar: 64px; }
body.menu-plegado .sidebar .marca { padding: 18px 0 14px; text-align: center; }
body.menu-plegado .sidebar .marca img:not(.isotipo),
body.menu-plegado .sidebar .marca small,
body.menu-plegado .sidebar .nav-seccion,
body.menu-plegado .sidebar .pie div,
body.menu-plegado .plegar-menu .txt,
body.menu-plegado .sidebar nav a .etiqueta { display: none; }
body.menu-plegado .sidebar .marca .isotipo { display: inline-block; }
body.menu-plegado .plegar-menu { justify-content: center; width: auto; margin: 0 auto 4px; }
body.menu-plegado .plegar-menu .ic { transform: rotate(180deg); }
body.menu-plegado .sidebar nav { padding: 6px; }
body.menu-plegado .sidebar nav a { justify-content: center; padding: 9px 0; }
/* Separador en vez del rótulo de sección, para no perder los grupos. */
body.menu-plegado .sidebar .nav-seccion + a { margin-top: 10px; }
body.menu-plegado .sidebar .pie { padding: 12px 0; text-align: center; }
body.menu-plegado .sidebar .pie::after {
  content: ""; display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: var(--ok-solido);
}

/* ══ Fichas de socio y móvil (rediseño del handoff) ════════════════════════
   Esqueleto compartido: riel de identidad fijo · pestañas · secciones.
   Los colores salen de los tokens del sistema, NO de los hex del mockup, para
   que la ficha siga funcionando si el tema cambia.

   Regla central del rediseño, y la razón de casi todo lo de abajo:
   un CERO real se pinta gris; un dato AUSENTE se pinta ámbar. Nunca se
   colapsan los dos a un guión. */

.ficha-shell {
  display: grid; grid-template-columns: 288px minmax(0, 1fr); flex: 1; min-height: 0;
  /* El riel es `sticky`, así que su caja no puede estirarse hasta abajo: el
     color de la columna lo pinta el contenedor. Sin esto el riel se corta a
     media página y deja un borde suelto en el aire. */
  background: linear-gradient(to right,
              var(--superficie) 0 288px, var(--divisor) 288px 289px, transparent 289px);
}
.ficha-riel {
  /* El fondo y el divisor los pinta `.ficha-shell` (ver su nota): un elemento
     `sticky` no se estira, y el borde quedaría colgando a media página. */
  background: var(--superficie);
  padding: 18px 16px; display: flex; flex-direction: column; gap: 16px;
  position: sticky; top: var(--alto-topbar); align-self: start;
  max-height: calc(100vh - var(--alto-topbar)); overflow-y: auto;
}
.ficha-cuerpo { min-width: 0; display: flex; flex-direction: column; }

/* ── Riel: identidad ── */
.riel-monograma {
  width: 56px; height: 56px; border-radius: 16px; background: var(--n200);
  color: var(--n900); display: grid; place-items: center;
  font-size: var(--t-riel); font-weight: 600; letter-spacing: -.02em;
}
/* Foto del conductor en el riel (o sus iniciales si no hay foto). */
.avatar-ficha { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; box-shadow: var(--sombra-sm); flex-shrink: 0; }
.avatar-ficha.iniciales {
  display: flex; align-items: center; justify-content: center;
  font-size: var(--t-cifra); font-weight: 500; color: var(--a400);
  background: repeating-linear-gradient(135deg, #2b2741 0 5px, #292b31 5px 10px);
}
.riel-titulo { font-size: var(--t-pagina); font-weight: 600; letter-spacing: -.02em; margin: 0; line-height: 1.2; }
.riel-titulo.mono { font-family: var(--mono); font-size: var(--t-riel); letter-spacing: .02em; }
.riel-sub { font-size: var(--t-meta); color: var(--n500); margin-top: 3px; }
.riel-modelo { font-size: var(--t-cuerpo); font-weight: 500; line-height: 1.35; margin-top: 2px; }

/* ── Riel: anillo de completitud ── */
.completitud { display: flex; align-items: center; gap: 12px; border: 1px solid var(--divisor); border-radius: 10px; padding: 13px; }
.completitud svg { flex-shrink: 0; transform: rotate(-90deg); }
.completitud .pista { stroke: var(--n800); }
.completitud .avance { stroke: var(--a300); stroke-linecap: round; transition: stroke-dasharray var(--t-entrada) var(--curva); }
.completitud .pct { font-family: var(--mono); font-size: var(--t-pagina); font-weight: 600; line-height: 1.1; }
.completitud .detalle { font-size: var(--t-meta); color: var(--n500); line-height: 1.35; }

/* ── Riel: datos maestros ── */
.riel-rotulo { font-size: var(--t-rotulo); font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--n500); }
.riel-datos { display: flex; flex-direction: column; margin-top: 8px; }
.riel-datos .dato {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--n900); font-size: var(--t-meta);
}
.riel-datos .dato:last-child { border-bottom: 0; }
.riel-datos .l { color: var(--n500); flex-shrink: 0; }
.riel-datos .v { text-align: right; font-size: var(--t-cuerpo); }
.riel-datos .v.mono { font-family: var(--mono); }
/* Dato ausente = hueco nuestro, no un estado del mundo: contorno punteado y
   violeta apagado, accionable. El ámbar queda para lo que vence o espera. */
.falta {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--a500); font-size: var(--t-meta); white-space: nowrap;
  padding: 1px 8px; border-radius: var(--radio-pill); border: 1px dashed var(--a600);
  transition: background-color var(--t-rapido) var(--curva);
}
a.falta:hover { text-decoration: none; background: var(--a900); }

/* ── Riel: acciones rápidas ── */
.acciones-rapidas { background: var(--a900); border-radius: 10px; padding: 12px; }
.acciones-rapidas h3 {
  display: flex; align-items: center; gap: 6px; margin: 0 0 8px;
  font-size: var(--t-meta); font-weight: 600; color: var(--a300);
}
.acciones-rapidas h3 .ic { color: var(--a400); }
.acciones-rapidas a { display: flex; align-items: center; gap: 7px; padding: 3px 0; font-size: var(--t-meta); color: var(--a300); }
.acciones-rapidas a .ic { color: var(--a400); flex-shrink: 0; }

/* ── Pestañas ── */
.ficha-pestanas {
  display: flex; gap: 2px; padding: 0 18px; background: var(--superficie);
  border-bottom: 1px solid var(--divisor); overflow-x: auto; scrollbar-width: none;
}
.ficha-pestanas::-webkit-scrollbar { display: none; }
.ficha-pestanas a {
  display: flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 12px 12px 10px; font-size: var(--t-cuerpo); font-weight: 500;
  color: var(--n500); border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--t-rapido) var(--curva), border-color var(--t-rapido) var(--curva);
}
.ficha-pestanas a:hover { color: var(--texto); text-decoration: none; }
.ficha-pestanas a.activa { color: var(--texto); font-weight: 600; border-bottom-color: var(--n100); }
.ficha-pestanas .cuenta {
  font-family: var(--mono); font-size: var(--t-meta); padding: 1px 6px;
  border-radius: 4px; background: var(--n900); color: var(--n500);
}
.ficha-pestanas a.activa .cuenta { color: var(--n300); }

.ficha-secciones { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }

/* ── Banner de pendientes ── */
.banner-pendientes { border: 1px solid var(--divisor); border-radius: 10px; overflow: hidden; background: var(--superficie); }
.banner-pendientes .cabecera {
  display: flex; align-items: center; gap: 9px; padding: 11px 15px;
  background: var(--alerta-fondo); border-bottom: 1px solid var(--alerta-borde);
}
.banner-pendientes .cabecera .ic { color: var(--alerta); }
.banner-pendientes .cabecera h2 { margin: 0; font-size: var(--t-cuerpo); font-weight: 600; color: var(--alerta); }
.banner-pendientes .cabecera .derecha { margin-left: auto; font-size: var(--t-meta); }
.banner-pendientes .lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--n900); }
.banner-pendientes .item { background: var(--superficie); padding: 13px 15px; display: block; color: inherit; }
.banner-pendientes .item:hover { background: var(--bg); text-decoration: none; }
.banner-pendientes .codigo { font-family: var(--mono); font-size: var(--t-meta); color: var(--n500); }
.banner-pendientes .titulo { font-size: var(--t-cuerpo); font-weight: 500; margin-top: 3px; line-height: 1.35; }
.banner-pendientes .sub { font-size: var(--t-meta); color: var(--n500); margin-top: 2px; }

/* ── KPIs ── */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }

@media (max-width: 1180px) {
  .ficha-shell { grid-template-columns: 1fr; background: none; }
  .ficha-riel { position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--divisor); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .banner-pendientes .lista { grid-template-columns: 1fr; }
}
/* Las fichas ponen su riel pegado al borde: sin el padding del resto. */
.principal.a-sangre { padding: 0; gap: 0; }

/* ── Ficha del móvil: piezas propias ──────────────────────────────────────── */
.riel-foto {
  height: 74px; border-radius: 12px; border: 1px solid var(--divisor);
  display: grid; place-items: center; position: relative; overflow: hidden;
  color: var(--n600);
}
.riel-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.riel-foto.vacia {
  background: repeating-linear-gradient(135deg,
    var(--n900) 0 6px, var(--superficie) 6px 12px);
}
.rotulo-foto {
  position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: var(--t-rotulo); letter-spacing: .08em;
  color: var(--n500); background: var(--superficie); padding: 1px 6px; border-radius: 4px;
}
.riel-foto.vacia .rotulo-foto { position: static; transform: none; background: none; margin-top: 4px; }

.bloque-asignacion .fila-asignacion { display: flex; align-items: center; gap: 11px; margin-bottom: 9px; }
.caja-socio {
  width: 34px; height: 34px; border-radius: 9px; background: var(--a900);
  display: grid; place-items: center; flex-shrink: 0;
}
.caja-socio .ic { color: var(--a300); }
.fila-asignacion .quien { flex: 1; min-width: 0; }
.fila-asignacion .nombre { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--t-cuerpo); font-weight: 500; }
.meta-mono { font-family: var(--mono); font-size: var(--t-meta); color: var(--n500); margin-top: 2px; }

/* Un hueco de la operación: ámbar, con nombre y con salida. */
.aviso-hueco {
  display: flex; align-items: center; gap: 11px; margin-top: 9px;
  border: 1px dashed var(--a600); border-radius: var(--radio); padding: 10px 12px;
}
.aviso-hueco > div { flex: 1; min-width: 0; }
.aviso-hueco strong { font-size: var(--t-cuerpo); color: var(--a400); font-weight: 600; }
.aviso-hueco .chico { color: var(--n500); }
.avatar-punteado {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  border: 1px dashed var(--a600); display: grid; place-items: center;
}
.avatar-punteado .ic { color: var(--a500); }

/* Estado vacío: icono, una frase que dice qué debería haber ahí, y acción. */
.vacio { text-align: center; padding: 26px 18px; display: grid; gap: 10px; justify-items: center; }
.vacio .ic { color: var(--n500); }
.vacio p { margin: 0; max-width: 42ch; font-size: var(--t-cuerpo); color: var(--n500); line-height: 1.5; }

/* ── Registro fotográfico: 5 ángulos fijos ── */
.galeria-angulos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.slot-foto {
  position: relative; height: 88px; border-radius: 9px; overflow: hidden;
  display: grid; place-items: center; border: 1px solid var(--divisor);
}
.slot-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slot-foto.vacio {
  border-style: dashed; color: var(--n600);
  background: repeating-linear-gradient(135deg,
    var(--n900) 0 6px, var(--superficie) 6px 12px);
}
.slot-foto .rotulo-angulo {
  position: absolute; bottom: 0; left: 0; right: 0; text-align: center;
  font-family: var(--mono); font-size: var(--t-rotulo); letter-spacing: .07em; text-transform: uppercase;
  color: var(--n500); background: var(--superficie); padding: 3px 0;
  border-top: 1px solid var(--divisor);
}
.slot-foto.vacio .rotulo-angulo { border-top: 0; background: none; }
/* «+2»: las versiones anteriores del mismo ángulo siguen existiendo. */
.contador-versiones {
  position: absolute; top: 5px; right: 5px;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  background: var(--n200); color: var(--n900); padding: 2px 6px; border-radius: 5px;
}
.contador-versiones:hover { text-decoration: none; background: var(--a300); }
.bloque-angulo { border-top: 1px solid var(--n900); padding-top: 11px; margin-top: 11px; }
.bloque-angulo:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.galeria-fotos .foto.anterior { opacity: .6; }

.mono { font-family: var(--mono); }
.ic-15 { width: 15px; height: 15px; }
.ic.verde { color: var(--ok); } .ic.rojo { color: var(--mal); } .ic.ambar { color: var(--alerta); }

@media (max-width: 1180px) { .galeria-angulos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── Ficha del socio: tarjetas de móvil ───────────────────────────────────
   Tabla no: lo que el operador mira es QUIÉN maneja cada móvil, y eso en una
   celda de tabla se pierde. Cada móvil es una tarjeta con su tripulación
   destacada y sus chips de estado abajo. */
.grilla-moviles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--n900); }
.grilla-moviles > .vacio { grid-column: 1 / -1; background: var(--superficie); }
.tarjeta-movil { background: var(--superficie); padding: 12px 14px; display: grid; gap: 9px; }
.tarjeta-movil:hover { background: var(--bg); }
.tarjeta-movil .cabecera { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tarjeta-movil .codigo { font-family: var(--mono); font-size: var(--t-cuerpo); font-weight: 600; }
.tarjeta-movil .cabecera .meta { margin-left: auto; font-size: var(--t-meta); color: var(--n500); }

.bloque-tripulacion { background: var(--bg); border-radius: 8px; padding: 8px 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bloque-tripulacion .conductor { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-meta); }
.bloque-tripulacion.falta-conductor { background: transparent; border: 1px dashed var(--a600); color: var(--a400); font-size: var(--t-cuerpo); }
.bloque-tripulacion.falta-conductor .boton { margin-left: auto; }


.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.checklist li { display: flex; align-items: flex-start; gap: 8px; font-size: var(--t-meta); color: var(--n400); line-height: 1.4; }
.checklist .ic { color: var(--n500); flex-shrink: 0; margin-top: 1px; }

@media (max-width: 1180px) { .grilla-moviles { grid-template-columns: 1fr; } }
.banner-pendientes .item.sin-accion { cursor: default; }
.banner-pendientes .item.sin-accion:hover { background: var(--superficie); }

/* ---- Manual de usuario (/ayuda) ---------------------------------------
   Texto largo dentro de la app: ancho de lectura acotado, índice lateral
   pegajoso y los mismos tokens del resto. Nació con colores literales del
   tema oscuro (#dfe2ec, #fff) que sobre el área clara eran ilegibles; ahora
   solo usa variables, así que sigue al tema donde se pinte. El documento
   imprimible lleva su propia hoja (apps/ayuda/templates/ayuda/impreso.html). */
.manual { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start; }
.manual-indice { position: sticky; top: 18px; display: flex; flex-direction: column; gap: 2px; }
.manual-indice a { display: flex; gap: 8px; align-items: center; padding: 7px 10px; border-radius: var(--radio); color: var(--n400); font-size: var(--t-cuerpo); text-decoration: none; }
.manual-indice a:hover { background: color-mix(in srgb, var(--acento) 8%, transparent); color: var(--texto); }
.manual-indice a.activo { background: color-mix(in srgb, var(--acento) 16%, transparent); color: var(--texto); }
.manual-indice .num { width: 18px; text-align: right; opacity: .55; font-variant-numeric: tabular-nums; }
.manual-cuerpo { max-width: 860px; }
.manual-cuerpo h2 { font-size: var(--t-riel); margin: 0 0 6px; }
.manual-cuerpo h3 { font-size: var(--t-pagina); margin: 26px 0 8px; }
.manual-cuerpo p, .manual-cuerpo li { line-height: 1.6; color: var(--n300); font-size: var(--t-titulo); }
.manual-cuerpo p { margin: 0 0 12px; }
.manual-cuerpo ul, .manual-cuerpo ol { padding-left: 22px; margin: 0 0 14px; }
.manual-cuerpo li { margin: 4px 0; }
.manual-cuerpo strong { color: var(--texto); }
.manual-cuerpo table { width: 100%; border-collapse: collapse; margin: 8px 0 18px; font-size: var(--t-cuerpo); }
.manual-cuerpo th, .manual-cuerpo td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--n800); vertical-align: top; color: var(--n300); }
.manual-cuerpo th { color: var(--texto); font-weight: 600; }
.manual-cuerpo .ruta { display: inline-block; padding: 1px 7px; border-radius: 6px; background: var(--n900); font-size: var(--t-meta); color: var(--texto); white-space: nowrap; }
.manual-cuerpo .boton-doc { display: inline-block; padding: 1px 8px; border: 1px solid var(--acento); border-radius: 6px; font-size: var(--t-meta); color: var(--texto); white-space: nowrap; }
.manual-cuerpo .aviso { border-left: 3px solid var(--alerta-solido); padding: 10px 14px; margin: 14px 0; background: var(--alerta-fondo); border-radius: 0 var(--radio) var(--radio) 0; }
.manual-cuerpo .aviso.ok { border-color: var(--ok-solido); background: var(--ok-fondo); }
.manual-cuerpo .aviso.mal { border-color: var(--mal-solido); background: var(--mal-fondo); }
.manual-cuerpo figure { margin: 16px 0 22px; }
.manual-cuerpo figure svg { width: 100%; height: auto; display: block; }
.manual-cuerpo figcaption { font-size: var(--t-meta); color: var(--n500); margin-top: 6px; }
.manual-pie { display: flex; justify-content: space-between; gap: 12px; margin-top: 34px; padding-top: 14px; border-top: 1px solid var(--n800); }
@media (max-width: 900px) { .manual { grid-template-columns: 1fr; } .manual-indice { position: static; flex-direction: row; flex-wrap: wrap; } }

/* ---- HTMX: lo que llega se asienta, no se pega ------------------------------
   Con `hx-swap="… settle:180ms"` el contenido nuevo entra con `.htmx-added` y
   pasa a su estado final en la duración media. */
.htmx-added { opacity: 0; }
[id^=tabla-] > *, .ficha-cuerpo { transition: opacity var(--t-medio) var(--curva); }
.htmx-indicator { opacity: 0; transition: opacity var(--t-rapido) var(--curva); }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

/* ═══ Listas: cabecera con filtros, franja, acción de fila ═══════════════════════════════════════════════════
   Integrado desde app-listas.css al cierre de la revisión de diseño (2026-09-03). */
/* ══════════════════════════════════════════════════════════════════════════
   Listados — refuerzos sobre app.css (revisión de diseño, 2026-09-03)
   Una lista deja de ser "tabla cruda + seis tarjetas encima": una sola
   tarjeta con cabecera (título + conteo + filtros), tabla debajo y
   paginación al pie. Este archivo solo agrega clases nuevas; no redefine
   nada de app.css. Tokens y colores se reusan tal cual de ahí.
   ══════════════════════════════════════════════════════════════════════ */

/* ---- Cabecera de la tarjeta de listado ----------------------------------
   Título + conteo a la izquierda, formulario de filtros compacto pegado a
   la derecha; envuelve en pantallas angostas sin romper el orden de tabulación. */
.cabecera-lista {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 10px 16px; margin-bottom: var(--e-2);
}
.cabecera-lista h2 {
  font-size: var(--t-titulo); font-weight: 600; letter-spacing: -.01em; margin: 0;
}
.cabecera-lista .meta { font-size: var(--t-meta); color: var(--n500); font-weight: 400; }
.cabecera-lista .filtros { margin: 0 0 0 auto; }

/* ---- Acción de fila en móvil: sin hover, siempre visible ---------------- */
@media (hover: none) {
  .tabla .accion-fila { opacity: 1; transform: none; }
}

/* ---- Forms de una sola acción dentro de una celda: sin salto de línea --- */
.accion-en-linea { display: inline-flex; margin: 0; }

/* ---- Párrafo de ayuda antes de la cabecera de una tarjeta ---------------- */
.nota-superior { margin: 0 0 var(--e-2); }

/* ---- KPI con valor de texto (nombre, estado) en vez de cifra ------------
   `.kpi .valor` está pensado para números grandes (28px); un valor como
   "Aplicado" o el nombre de quien subió el lote se lee mejor un tono más
   chico, al tamaño del título de página. */
.kpi .valor.texto { font-size: var(--t-pagina); }


/* ═══ Fichas y torre: mismo esqueleto, mismas píldoras ═══════════════════════════════════════════════════
   Integrado desde app-fichas.css al cierre de la revisión de diseño (2026-09-03). */
/* ══════════════════════════════════════════════════════════════════════════
   app-fichas.css — Implementación de la revisión de diseño del 2026-09-03
   (lienzo de Ariel). Toca SOLO las fichas de conductor/móvil/socio, la torre
   de disponibilidad y el detalle de evento/postulación/cuenta corriente.

   Se carga después de `app.css` (ver `templates/base.html`): selectores de
   igual especificidad ganan por orden de carga, así que estas reglas pueden
   completar la ficha del conductor, la torre y las pestañas (colores, tamaños de
   texto bajo el piso de 10px) sin tocar el archivo base. Nada de gradientes
   decorativos nuevos, nada de estilos inline: todo lo que antes era `style=`
   en las plantillas de este reparto quedó acá como clase.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Riel de identidad: veredicto y causas ──────────────────────────────
   La ficha del conductor ya no tiene su propio `.cc-veredicto`: usa el mismo
   patrón que socio y móvil, con el badge grande en su propia línea y las
   causas (si hay) envueltas debajo. */
.riel-veredicto { margin-top: 9px; }
.riel-causas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }

/* ── Kicker y fuentes: genéricos para cualquier tarjeta ──────────────────
   Reemplazan a `.resumen-banda` (gradiente violeta + banda propia). El
   "resumen automático" del conductor ahora es una `.tarjeta` normal con un
   kicker arriba, igual que cualquier otra tarjeta de la ficha. */
.kicker {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--t-rotulo); text-transform: uppercase; letter-spacing: .12em;
  color: var(--a400); font-weight: 600; margin-bottom: 6px;
}
.kicker .ic { color: var(--a400); }
.fuentes { font-size: var(--t-meta); color: var(--n500); margin-top: 6px; }

/* ── Notas pequeñas bajo una tabla o lista dentro de una tarjeta ─────────
   Reemplaza los `style="margin:10px 0 0"` repetidos en las pestañas. */
.nota-pie { margin: 10px 0 0; }

/* ── Fila de una acción/nota dentro de una tarjeta (evento de bitácora) ── */
.fila-nota { padding: 6px 0; border-bottom: 1px solid var(--n900); }
.fila-nota:last-of-type { border-bottom: 0; }
/* Campo de formulario que debe crecer para llenar el ancho disponible
   dentro de `.filtros` (que por defecto reparte según `min-width`). */
.campo.campo-crece { flex: 1; }

/* ── KPIs de 3 columnas (cuenta corriente del móvil, ledger del socio) ───
   Antes vivía como `style="grid-template-columns:repeat(3,minmax(0,1fr))"`
   repetido en cada plantilla. */
.kpis.kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Cifra más angosta que un monto (p. ej. un mes "mm-aaaa") dentro de un KPI
   compacto: el tamaño por defecto (--t-riel, 22px) la hace desbordar. */
.kpi.compacto .valor.pequeno { font-size: var(--t-titulo); }



/* ═══ Controles: foco, combobox, modal, login y errores ═══════════════════════════════════════════════════
   Integrado desde app-controles.css al cierre de la revisión de diseño (2026-09-03). */
/* ══════════════════════════════════════════════════════════════════════════
   Controles — formularios, modal, login y pantallas de error
   Reparto de la revisión de diseño del 2026-09-03 (docs/decisions, lienzo).
   Usa SOLO los tokens de app.css (--color-*, --radio, --t-*, --curva…);
   este archivo no declara tokens propios. Carga después de app.css: las
   reglas de aquí ganan por orden de cascada cuando pisan una del base.
   ══════════════════════════════════════════════════════════════════════ */

/* ---- Formularios: foco con anillo doble ---------------------------------
   El anillo de foco de app.css es un solo outline pegado al borde; en un
   campo con fondo de superficie casi no se separa del control. Un segundo
   anillo, con un respiro de por medio, lo hace visible sin cambiar tamaño
   (regla de motion: hover y foco cambian color, nunca tamaño). */
input[type=text]:focus-visible, input[type=email]:focus-visible,
input[type=number]:focus-visible, input[type=date]:focus-visible,
input[type=password]:focus-visible, input[type=file]:focus-visible,
input[type=url]:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 22%, transparent);
}

/* ---- Formularios: errores visibles junto al campo -----------------------
   Django (as_p) pinta el <ul class="errorlist"> ANTES del campo, no después:
   se estiliza como una alerta corta pegada al control que le sigue, y ese
   control se marca en rojo — así el error se lee junto a su campo aunque el
   orden del marcado sea el inverso. */
.formulario .errorlist {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 4px;
  font-weight: 500;
}
.formulario .errorlist li { list-style: none; }
/* El selector tiene que seguir al marcado real: `as_p` deja el <ul> como
   hermano ANTERIOR del <p>, así que `p:has(.errorlist)` no coincidía nunca y el
   campo se quedaba sin su borde rojo. Se dejan los dos: el hermano (lo que
   Django hace hoy) y el descendiente (por si una plantilla mete el error
   adentro). Encontrado en la prueba de usuario del 2026-09-04. */
/* Y el ancla más firme de todas: Django marca el control con `aria-invalid`,
   que no depende de dónde caiga el <ul> en el marcado. */
.formulario [aria-invalid="true"],
.formulario .errorlist + p input,
.formulario .errorlist + p select,
.formulario .errorlist + p textarea,
.formulario p:has(.errorlist) input,
.formulario p:has(.errorlist) select,
.formulario p:has(.errorlist) textarea {
  border-color: var(--mal);
}
.formulario [aria-invalid="true"]:focus-visible,
.formulario .errorlist + p input:focus-visible,
.formulario .errorlist + p select:focus-visible,
.formulario .errorlist + p textarea:focus-visible,
.formulario p:has(.errorlist) input:focus-visible,
.formulario p:has(.errorlist) select:focus-visible,
.formulario p:has(.errorlist) textarea:focus-visible {
  outline-color: var(--mal);
  box-shadow: 0 0 0 4px var(--mal-fondo);
}

/* ---- Anchos de lectura para formularios cortos --------------------------
   Utilidades de ancho, en el mismo espíritu que las de app.css (.ic-15,
   .chico…): la tarjeta de un formulario corto no necesita estirarse a todo
   el ancho de la página. */
.ancho-560 { max-width: 560px; }
.ancho-640 { max-width: 640px; }

/* Línea de "dónde consultar" del formulario de verificación documental. */
.fila-espaciada { padding: 4px 0; }

/* Ayuda bajo un campo, como lista (tripulante_form: motivos del vínculo). */
.lista-ayuda { margin: 10px 0 0; padding-left: 18px; }

/* ---- Select buscable: estado de teclado ----------------------------------
   El ítem resaltado con flechas usa la misma variable de acento que el
   hover, un poco más marcada, y no depende del mouse para notarse. */
.buscable-item.activo {
  background: color-mix(in srgb, var(--acento) 16%, transparent);
  outline: 1px solid var(--a600);
  outline-offset: -1px;
}

/* ---- Modal: accesibilidad de foco -----------------------------------------
   El comportamiento (Escape, foco inicial, retorno de foco) vive en el
   script de base.html; acá solo el estado visual de "cerrar con teclado". */
.modal .modal-cabecera .cerrar:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

/* ---- Login: alto de botón consistente ------------------------------------
   login.html no extiende base.html (a propósito: sigue funcionando si el
   contexto falla), así que declara su propio <link> a este archivo. */
.boton-google, .login-local .boton { min-height: 40px; }

/* ---- Pantallas de error: título al tamaño de la topbar --------------------
   .pantalla-error h2 hereda var(--t-titulo) (15px) de las reglas generales
   de h2 en app.css; en la pantalla de error, sola en el centro, se lee mejor
   al tamaño de un título de página. */
.pantalla-error h2 { font-size: var(--t-pagina); }

/* 500.html no extiende base.html (autocontenida a propósito, ver su
   comentario): trae su propio centrado de página en vez de estilos en línea. */
.pagina-error-independiente { display: grid; place-items: center; min-height: 100vh; padding: 24px; }
.pagina-error-independiente .pantalla-error { max-width: 520px; }

.punto.ok { background: var(--ok-solido); }

/* ---- Consulta al RNTP en el formulario del móvil ------------------------ */
.rntp-consulta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 4px 0 var(--e-3); max-width: 480px; }
.rntp-consulta .htmx-request { opacity: .6; }
.rntp { flex-basis: 100%; border: 1px dashed var(--n700); border-radius: var(--radio); padding: 10px 12px; display: grid; gap: 8px; }
.rntp:empty { display: none; }
.rntp-aviso { margin: 0; display: flex; gap: 6px; align-items: flex-start; font-size: var(--t-cuerpo); color: var(--n300); }
.rntp-cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--t-meta); }
.rntp-datos { margin: 0; display: grid; gap: 6px; }
.rntp-datos dt { font-size: var(--t-rotulo); text-transform: uppercase; letter-spacing: .1em; color: var(--n400); font-weight: 500; }
.rntp-datos dd { margin: 1px 0 0; font-size: var(--t-cuerpo); }
.rntp-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* ---------- Subir cobros y ventas: lo que cambia con la fuente ----------
   Al elegir la fuente, HTMX cambia este bloque: de dónde sale el archivo y cómo se verifica. El
   ancho es el de los campos (480px) para que el formulario se lea como una sola columna. Subir
   no pide ningún número: lo que la fuente deja para la vista previa se explica, no se pide. */
.ayuda-fuente {
  max-width: 480px; margin: 0 0 13px; padding: 10px 12px;
  background: var(--a900); border-left: 3px solid var(--acento);
  border-radius: 0 var(--radio) var(--radio) 0;
  animation: entrar var(--t-entrada) var(--curva) both;
}
.ayuda-fuente-titulo { display: flex; align-items: center; gap: 6px; font-size: var(--t-cuerpo); color: var(--a300); }
.ayuda-fuente-titulo .ic { color: var(--a400); flex: none; }
.ayuda-fuente p { margin: 4px 0 6px; line-height: 1.5; color: var(--n300); }
.ayuda-fuente.vacia { background: transparent; border-left-color: var(--n800); }
.ayuda-fuente.vacia p { margin: 0; color: var(--n500); }
/* Cómo se verifica la fuente: una nota neutra con su ícono. No es un estado (nada se ha cargado
   todavía), así que no lleva el verde de «cuadra»; lo que sí es estado va en la vista previa. */
.control-fuente {
  display: flex; align-items: flex-start; gap: 9px; max-width: 480px; margin: 0 0 13px;
  padding: 10px 12px; border: 1px solid var(--n800); border-radius: var(--radio);
  font-size: var(--t-cuerpo); line-height: 1.5;
  animation: entrar var(--t-entrada) var(--curva) both;
}
.control-fuente > .ic { flex: none; margin-top: 2px; color: var(--a400); }
.control-fuente > div { min-width: 0; }
.control-fuente p { margin: 0; color: var(--n300); }
.control-fuente strong { display: block; margin-bottom: 2px; color: var(--texto); font-weight: 500; }
.control-fuente .desplegable { margin-top: 4px; }
.control-fuente .desplegable p { margin: 4px 0 0; }
.control-fuente.vacia { border-style: dashed; }
.control-fuente.vacia p { color: var(--n500); }

/* ---------- Cargas del mes ----------
   Una pantalla para ver de un vistazo qué falta en el mes: arriba el resumen (cuántas cargas están
   listas y una píldora por cada una, que lleva a su tarjeta); abajo, las tarjetas en el orden en
   que se hace el trabajo. El color vive solo donde hay estado: confirmado (verde), por confirmar
   y bandeja (ámbar), sin cargar (hueco punteado) y una flota que falta (rojo). */
.cargas-resumen { display: flex; flex-direction: column; gap: var(--e-2); }
.cargas-resumen-cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2); }
.cargas-rotulo {
  margin: 0; font-size: var(--t-rotulo); font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: var(--n400);
}
.cargas-resumen .filtros { margin: 0; }
.cargas-resumen .filtros .campo { display: flex; align-items: center; gap: 8px; }
.cargas-resumen .filtros input { min-width: 150px; }
.cargas-cifra {
  margin: 0; font-size: var(--t-riel); font-weight: 600; letter-spacing: -.02em;
  line-height: 1.2; font-variant-numeric: tabular-nums;
}
.cargas-cuentas { display: flex; flex-wrap: wrap; gap: 2px 16px; margin: 0; color: var(--n500); }
.cargas-cuentas .cuenta { display: inline-flex; align-items: center; gap: 6px; }
.cargas-cuentas .cuenta.alerta { color: var(--alerta); font-weight: 500; }
.cargas-cuentas .cuenta.alerta::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.cargas-pildoras { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cargas-pildoras .badge { padding: 3px 10px; }
.cargas-grupo { display: flex; flex-direction: column; gap: var(--e-2); margin-top: var(--e-3); scroll-margin-top: calc(var(--alto-topbar) + var(--e-3)); }
.cargas-titulo { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0; font-size: var(--t-titulo); font-weight: 600; }
.cargas-titulo .paso { color: var(--a500); font-variant-numeric: tabular-nums; }
.cargas-titulo .texto-2 { font-weight: 400; }
/* Las dos secciones comparten las mismas columnas: la tarjeta de Aramco queda sobre la de
   WEAPP, y una tercera fuente de cobros ocupa un hueco ya previsto. */
.grilla-cargas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.grilla-cargas > * { min-width: 0; }
.grilla-cargas > .tarjeta { animation: entrar var(--t-entrada) var(--curva) both; }
.grilla-cargas > .tarjeta:nth-child(2) { animation-delay: 30ms; }
.grilla-cargas > .tarjeta:nth-child(3) { animation-delay: 60ms; }
.grilla-cargas > .tarjeta:nth-child(n + 4) { animation-delay: 90ms; }
.tarjeta.carga { display: flex; flex-direction: column; scroll-margin-top: calc(var(--alto-topbar) + var(--e-3)); }
.tarjeta.carga:target { border-color: var(--acento); }
.tarjeta.carga .tarjeta-cabecera { align-items: center; }
.tarjeta.carga .form-acciones { flex-wrap: wrap; margin-top: auto; padding-top: var(--e-3); justify-content: flex-start; max-width: none; }
.tarjeta.carga.carga-falta { border-color: var(--mal-borde); }
.tarjeta.carga.carga-por_confirmar { border-color: var(--alerta-borde); }
/* Lo que todavía no existe: sin relleno ni sombra, para que no compita con lo que sí se puede hacer. */
.tarjeta.carga.carga-apagada { background: transparent; border-style: dashed; }
.carga-que { margin: 0 0 var(--e-1); line-height: 1.5; color: var(--n300); }
.carga-verifica { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 var(--e-2); font-size: var(--t-meta); line-height: 1.5; color: var(--n500); }
.carga-verifica .ic { margin-top: 2px; color: var(--n600); }
/* El estado del mes, separado de lo que la fuente es por una línea fina. */
.carga-mes { padding-top: var(--e-2); border-top: 1px solid var(--n800); display: flex; flex-direction: column; gap: 2px; }
.carga-mes p { margin: 0; }
.carga-monto { font-size: var(--t-riel); font-weight: 600; letter-spacing: -.02em; line-height: 1.25; font-variant-numeric: tabular-nums; }
.carga-vacio { color: var(--n500); }
.carga-mes .aviso-nota { margin-top: var(--e-1); padding: 7px 10px; font-size: var(--t-meta); }
.cargas-flota-datos { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e-2) var(--e-4); }
.cargas-flota-datos .datos-lote { margin: 0; }

/* ---------- Vista previa de un lote: «¿Cuadra con el proveedor?» ----------
   Lo que Aiur leyó a la izquierda, lo que dice el documento en el centro y el veredicto a la
   derecha: tres cosas que se comparan, en el orden en que se leen. */
.datos-lote { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 var(--e-2); }
.datos-lote > div { display: flex; flex-direction: column; gap: 1px; }
.datos-lote dt { font-size: var(--t-meta); color: var(--n500); }
.datos-lote dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.cuadre-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--e-3) var(--e-4); align-items: start; }
.cuadre-lado { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cuadre-lado > * { margin: 0; }
.cuadre-rotulo { font-size: var(--t-rotulo); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--n400); }
.cuadre-cifra { font-size: var(--t-riel); font-weight: 600; letter-spacing: -.02em; line-height: 1.25; font-variant-numeric: tabular-nums; }
.cuadre-lado .datos-lote { margin: 0; }
.cuadre-lado .formulario.en-linea { align-items: end; }
.cuadre-lado .formulario.en-linea input { width: 100%; min-width: 150px; max-width: 220px; }
.control-documento { min-width: 0; }
.cuadre-espera { color: var(--n500); font-size: var(--t-meta); line-height: 1.5; }
.resultado-cuadre {
  display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 9px 12px; line-height: 1.5;
  border: 1px solid var(--n800); border-radius: var(--radio);
}
.resultado-cuadre .ic { flex: none; margin-top: 2px; }
.resultado-cuadre.ok { background: var(--ok-fondo); border-color: var(--ok-borde); }
.resultado-cuadre.ok .ic { color: var(--ok); }
.resultado-cuadre.mal { background: var(--mal-fondo); border-color: var(--mal-borde); }
.resultado-cuadre.mal .ic { color: var(--mal); }
.resultado-cuadre strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.historial-rotulo { margin: var(--e-3) 0 0; }
.anotado-por { margin: 0 0 var(--e-2); text-align: right; }
.historial-control { margin: 4px 0 0; padding-left: 18px; }

/* ---------- Lotes: un aviso que impide confirmar, y las partes que se despliegan ---------- */
.lista-errores { display: grid; gap: 4px; margin-bottom: var(--e-2); }
.tarjeta.aviso-lote { display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; }
.tarjeta.aviso-lote .ic { flex: none; margin-top: 2px; }
.tarjeta.aviso-lote.mal { background: var(--mal-fondo); border-color: var(--mal-borde); color: var(--mal); }
.tarjeta.aviso-lote.ok { background: var(--ok-fondo); border-color: var(--ok-borde); color: var(--ok); }
.tarjeta.aviso-lote.alerta { background: var(--alerta-fondo); border-color: var(--alerta-borde); color: var(--alerta); }
.tarjeta.aviso-lote div { color: var(--texto); }
.tarjeta.aviso-lote strong { color: inherit; }
.desplegable > summary {
  display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  font-size: var(--t-meta); font-weight: 500; color: var(--a400); padding: 4px 0;
}
.desplegable > summary::-webkit-details-marker { display: none; }
.desplegable > summary::before {
  content: ""; width: 6px; height: 6px; flex: none;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform var(--t-rapido) var(--curva);
}
.desplegable[open] > summary::before { transform: rotate(45deg); }
.desplegable > summary:hover { color: var(--a300); }
.desplegable > summary:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: var(--radio-sm); }
.desplegable > .tabla-envoltura, .desplegable > .tabla-simple { margin-top: var(--e-2); }
/* Un abono baja lo que el socio debe: se lee distinto de un cargo. */
.tabla .abono { color: var(--ok); }
.tabla tfoot td { border-top: 1px solid var(--n800); border-bottom: 0; font-weight: 500; font-variant-numeric: tabular-nums; }

/* Un aviso dentro de una tarjeta (no una tarjeta aparte): lo que el número de arriba no dice. */
.aviso-nota {
  display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; margin: 12px 0 0;
  padding: 10px 12px; border-radius: var(--radio); border: 1px solid var(--n800);
}
.aviso-nota .ic { flex: none; margin-top: 2px; color: var(--n500); }
.aviso-nota > div { min-width: 0; }
.aviso-nota.alerta { background: var(--alerta-fondo); border-color: var(--alerta-borde); }
.aviso-nota.alerta .ic { color: var(--alerta); }
.aviso-nota.mal { background: var(--mal-fondo); border-color: var(--mal-borde); }
.aviso-nota.mal .ic { color: var(--mal); }
.aviso-nota.ok { background: var(--ok-fondo); border-color: var(--ok-borde); }
.aviso-nota.ok .ic { color: var(--ok); }

/* ---------- Producción del mes ---------- */
/* Lo que HTMX reemplaza vive en un contenedor propio: apila sus tarjetas con el mismo aire que el resto. */
.contenido-apilado { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.filtros-mes { margin: 0; }
.cifra-aparte {
  display: flex; align-items: flex-start; gap: 10px; line-height: 1.5;
  border: 1px dashed var(--alerta-borde); background: var(--alerta-fondo);
}
.cifra-aparte .ic { flex: none; margin-top: 2px; color: var(--alerta); }
.cifra-aparte strong { font-variant-numeric: tabular-nums; }

/* ---- Movimiento reducido: todo dura un instante ------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important; animation-iteration-count: 1 !important;
    transition-duration: 1ms !important; scroll-behavior: auto !important;
  }
}

/* ---------- Lote de importación: lo que NO se va a aplicar ----------
   Las filas de aviso se pintaban igual que las demás, en una tabla de treinta
   columnas con scroll, mientras la tarjeta de arriba decía «0 errores» en
   verde. Se confirmaba el lote sin ver lo que se perdía. */
.lista-avisos { margin: 8px 0 0; padding-left: 18px; color: var(--n700); }
.lista-avisos li { margin-bottom: 4px; font-size: var(--t-meta); }
.tabla tr.fila-aviso > td { background: var(--alerta-fondo); color: var(--alerta); }
.tabla tr.fila-aviso > td:first-child { box-shadow: inset 3px 0 0 var(--alerta); }

/* ---------- Bandeja de cobros: «algo en el aire», y qué hacer con eso ----------
   El motivo por sí solo dice QUÉ pasó; la pista de abajo dice QUÉ HACER (Ariel,
   2026-09-20: «que quede accionable, que se note que hay algo en el aire»). */
.bandeja-motivo .ayuda { margin-top: 4px; }

/* ---------- Bandeja por decisiones (cobros y ventas) ----------
   La pantalla muestra DECISIONES (un vehículo, un motivo) y no filas: cada grupo trae sus acciones
   a la vista (son el motivo de la pantalla, no un extra al pasar el mouse) y el detalle fila por
   fila se despliega debajo, cargado solo cuando se abre. */
.reresolver {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 var(--e-3);
  padding: 10px 12px; background: var(--a900); border-left: 3px solid var(--acento);
  border-radius: 0 var(--radio) var(--radio) 0;
}
.reresolver p { flex: 1 1 280px; min-width: 0; line-height: 1.45; }
.tabla tr.fila-decision > td { border-bottom: 0; vertical-align: top; }
.tabla tr.fila-detalle > td { padding-top: 0; }
.celda-decision { min-width: 280px; }
.decision-titulo { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.decision-titulo .vehiculo { font-size: var(--t-titulo); font-weight: 500; letter-spacing: .03em; }
.celda-decision .ayuda { max-width: 460px; margin-top: 6px; line-height: 1.45; }
.fechas-decision { white-space: nowrap; }
.tabla .acciones-decision { width: 190px; }
.acciones-pila { display: flex; flex-direction: column; gap: 5px; align-items: stretch; }
.acciones-pila form { display: flex; margin: 0; }
.acciones-pila .boton { width: 100%; justify-content: center; }
.tabla .acciones-decision .accion-fila, .detalle-cuerpo .accion-fila, .tabla .accion-visible { opacity: 1; transform: none; }
.detalle-cuerpo td.acciones-decision { width: auto; }
.detalle-cuerpo .acciones-decision .boton { margin: 0 0 4px 4px; }
.detalle-cuerpo { margin-top: var(--e-2); }
.detalle-cuerpo .tabla-envoltura { margin: 0; overflow: visible; }
.sidebar nav a .badge-nav { white-space: nowrap; }
.badge-nav .filas-entre-parentesis { opacity: .7; font-weight: 400; }
.casilla-confirmacion {
  display: flex; align-items: center; gap: 8px; margin: 10px 0 0; width: fit-content;
  font-size: var(--t-cuerpo); font-weight: 500; color: var(--texto); cursor: pointer;
}
.casilla-confirmacion input { width: auto; margin: 0; }

/* El buscador de asignación de los modales: se escribe y se elige entre las que calzan. */
.resultado-asignaciones { margin-top: var(--e-1); min-height: 20px; }
.opciones-asignacion { border: 0; margin: 0; padding: 0; display: grid; gap: 4px; }
.opciones-asignacion legend { padding: 0 0 4px; }
.opcion-asignacion {
  display: flex; align-items: flex-start; gap: 8px; padding: 7px 10px; cursor: pointer;
  border: 1px solid var(--n800); border-radius: var(--radio);
  transition: background-color var(--t-rapido) var(--curva), border-color var(--t-rapido) var(--curva);
}
.opcion-asignacion:hover { background: rgba(145, 132, 217, .08); }
.opcion-asignacion:has(input:checked) { border-color: var(--acento); background: var(--a900); }
.opcion-asignacion:has(input:focus-visible) { outline: 2px solid var(--acento); outline-offset: 1px; }
.opcion-asignacion input { width: auto; margin: 3px 0 0; flex: none; }
.opcion-asignacion .cuerpo { display: grid; gap: 1px; min-width: 0; }

/* «Reemplazar por esta versión»: las dos versiones lado a lado, lo que cambió resaltado. */
.modal.ancho { width: min(560px, 100%); }
.modal .tabla-envoltura { margin: 0; }
.comparacion-versiones { table-layout: fixed; width: 100%; }
.comparacion-versiones th, .comparacion-versiones td { padding: 7px 8px; vertical-align: top; overflow-wrap: anywhere; }
.comparacion-versiones th:first-child, .comparacion-versiones td:first-child { padding-left: 0; width: 22%; }
.comparacion-versiones thead th { text-transform: none; letter-spacing: 0; font-size: var(--t-meta); color: var(--texto); }
.comparacion-versiones th[scope="row"] {
  font-size: var(--t-rotulo); text-transform: uppercase; letter-spacing: .08em; color: var(--n500);
  font-weight: 500; text-align: left;
}
.comparacion-versiones td.cambia { color: var(--alerta); font-weight: 500; }

/* ---------- Guía de «la primera vez» (static/js/guia.js) ----------
   Oscurece la pantalla, ilumina una parte con un borde blanco y la explica en
   un globo. El velo es una capa a pantalla completa con un agujero (clip-path
   que escribe guia.js) justo donde está el elemento iluminado, así lo
   iluminado queda tal cual, sin capa encima. Usa los tokens claros del área de
   trabajo (ver el bloque de tema de arriba) y queda sobre los modales
   (z-index 90) y la barra lateral (40). */
.guia { position: fixed; inset: 0; z-index: 200; background: transparent; }
.guia-velo {
  position: fixed; inset: 0; background: rgba(10, 11, 18, .62);
  transition: clip-path var(--t-entrada) var(--curva);
}
/* El recuadro solo dibuja el borde blanco; el agujero lo hace el velo. */
.guia-hueco {
  position: fixed; border-radius: var(--radio); pointer-events: none;
  outline: 2px solid var(--superficie); outline-offset: 2px;
  transition: top var(--t-entrada) var(--curva), left var(--t-entrada) var(--curva),
              width var(--t-entrada) var(--curva), height var(--t-entrada) var(--curva);
}
/* Paso sin elemento (aviso de «nada que explicar»): velo entero y sin recuadro. */
.guia.sin-hueco .guia-hueco { display: none; }
.guia-globo {
  position: fixed; width: min(360px, calc(100vw - 24px)); max-height: calc(100vh - 24px);
  overflow-y: auto; display: grid; gap: var(--e-3);
  padding: var(--e-4); background: var(--superficie); color: var(--texto);
  border-radius: 14px; box-shadow: var(--sombra-lg);
  transition: top var(--t-entrada) var(--curva), left var(--t-entrada) var(--curva);
}
/* Mientras la página se desplaza el recuadro sigue al elemento sin lag. */
.guia.sigue .guia-velo, .guia.sigue .guia-hueco, .guia.sigue .guia-globo { transition: none; }
.guia [hidden] { display: none !important; }
.guia-cuerpo { display: grid; gap: var(--e-2); }
.guia-cabecera { display: flex; align-items: center; gap: var(--e-2); }
.guia-paso { font-size: var(--t-meta); font-weight: 600; color: var(--a400); font-variant-numeric: tabular-nums; }
.guia-puntos { margin-left: auto; display: flex; align-items: center; gap: 3px; }
.guia-puntos i { width: 6px; height: 6px; border-radius: 3px; background: var(--neutro-borde); }
.guia-puntos i.activo { width: 16px; background: var(--acento); }
.guia-titulo { font-size: var(--t-titulo); font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.guia-texto { margin: 0; font-size: var(--t-cuerpo); line-height: 1.55; color: var(--n300); }
.guia-acciones { display: flex; align-items: center; justify-content: flex-end; gap: var(--e-1); }
/* «Saltar» queda lejos de «Siguiente»: es salirse de todo, no avanzar. */
.guia-acciones .guia-saltar { margin-right: auto; }
@media print { .guia { display: none; } }
/* El botón «Ver la guía» de la barra superior: en ventanas medianas deja solo el
   ícono para no quitarle sitio al título y a las acciones de la pantalla. */
@media (max-width: 1180px) {
  .topbar .acciones .boton-guia .txt { display: none; }
  .topbar .acciones .boton-guia { padding: 6px 9px; }
}
/* Lo iluminado se ve completo aunque normalmente aparezca solo al pasar el
   mouse (las acciones de una fila de tabla). */
.guia-objetivo .accion-fila, .guia-objetivo.accion-fila { opacity: 1; transform: none; }