/* ══════════════════════════════════════════════════════════════════════════
   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;

  --radio-sm: 4px;
  --radio: 8px;
  --radio-pill: 20px;

  --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) 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 {
  --bg: #eef0f6;
  --superficie: #ffffff;
  --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);
}
/* 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: 13px;
  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: 15.5px; }
h2 { font-size: 13.5px; margin-bottom: .6rem; }
a { color: var(--a400); text-decoration: none; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }
small { font-size: 11px; }

: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: 10.5px; letter-spacing: .02em; }

.sidebar nav { padding: 6px 10px; flex: 1; }
.sidebar .nav-seccion {
  font-size: 9px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--n600); padding: 14px 8px 5px; font-weight: 500;
}
.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: 12.5px;
}
.sidebar nav a .ic { color: var(--n500); }
.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: 9.5px; padding: 1px 7px;
  border-radius: var(--radio-pill); background: var(--a900); color: var(--a300);
  letter-spacing: .04em;
}
.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: 11px; 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: 15.5px; font-weight: 500; line-height: 1.2; }
.topbar .titulo-vista .sub { font-size: 11px; 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: 11px; font-weight: 500; letter-spacing: .02em;
}
.usuario-chip .quien { line-height: 1.25; }
.usuario-chip .quien .nombre { font-size: 12px; font-weight: 500; }
.usuario-chip .quien .rol { font-size: 10px; color: var(--n500); }
.usuario-chip form { margin: 0; display: flex; }
.boton-salir {
  display: grid; place-items: center; width: 29px; height: 29px;
  background: transparent; border: 1px solid transparent; border-radius: var(--radio);
  color: var(--n500); cursor: pointer; padding: 0;
}
.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: 18px; display: flex; flex-direction: column; gap: 14px; }
.principal > * { margin: 0; }

/* ---- Tarjetas ----------------------------------------------------------- */
.tarjeta {
  background: var(--superficie); border: 1px solid var(--n800);
  border-radius: var(--radio); padding: 14px 15px;
}
.tarjeta > h2, .tarjeta-cabecera {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 13.5px; font-weight: 500; margin: 0 0 11px;
}
.tarjeta-cabecera .meta { margin-left: auto; font-size: 10.5px; color: var(--n500); font-weight: 400; }

.grilla-tarjetas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}
.grilla-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
/* 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: 11px; font-weight: 600;
}
.celda-avatar { width: 34px; }
.cobertura-barra {
  height: 5px; border-radius: 3px; background: var(--n900);
  overflow: hidden; margin: 4px 0 2px;
}
.cobertura-barra i { display: block; height: 100%; background: var(--alerta-solido); border-radius: 3px; }
.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: 12.5px; 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 */
.kpi { display: flex; flex-direction: column; gap: 3px; padding: 13px 14px; }
.kpi .etiqueta {
  display: flex; align-items: center; gap: 7px;
  font-size: 9px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--n500); font-weight: 500;
}
.kpi .etiqueta a { color: inherit; }
.kpi .etiqueta .ic { width: 13px; height: 13px; color: var(--n500); }
.kpi .valor {
  font-size: 29px; font-weight: 500; letter-spacing: -.02em; line-height: 1.1;
  font-variant-numeric: tabular-nums; margin-top: 2px; white-space: nowrap;
}
.kpi .valor.dinero { font-size: 21px; }
.kpi .valor .unidad { font-size: 10.5px; color: var(--n500); letter-spacing: 0; font-weight: 400; margin-left: 2px; }
.kpi .pie { font-size: 11px; color: var(--n500); }
.kpi.negativo .valor, .valor-mal { color: var(--mal); }
.kpi.alerta .valor { color: var(--alerta); }
.kpi.ok .valor { color: var(--ok); }

/* ---- 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: 12.5px; }
.tabla th {
  text-align: left; font-size: 9px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--n500); font-weight: 500; white-space: nowrap;
  background: var(--n900);
  padding: 7px 10px;
  border-top: 1px solid var(--n800); 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 tr:hover td { background: rgba(43, 39, 65, .5); }
.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: 12px; }
.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);
  font-size: 12.5px; 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);
}
.boton:hover { background: rgba(145, 132, 217, .12); text-decoration: none; }
.boton:active { background: rgba(145, 132, 217, .22); }
.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); }
.boton.chico { padding: 3px 9px; font-size: 11.5px; gap: 5px; }
.boton:disabled { opacity: .45; cursor: not-allowed; }

/* ---- Formularios -------------------------------------------------------- */
.formulario p, .campo { margin: 0 0 13px; }
label { display: block; font-weight: 500; font-size: 11.5px; color: var(--n300); margin-bottom: 4px; }
input[type=text], input[type=email], input[type=number], input[type=date],
input[type=password], input[type=file], input[type=url], select, textarea {
  width: 100%; max-width: 480px; min-height: 33px;
  padding: 6px 10px; font-size: 12.5px; font-family: inherit;
  color: var(--texto); caret-color: var(--acento);
  background: var(--superficie);
  border: 1px solid var(--n800); border-radius: var(--radio);
}
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: auto; min-height: 0; accent-color: var(--acento); }
input[type=file] { padding: 5px; }
input::file-selector-button {
  font: inherit; font-size: 11.5px; 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: 10.5px; margin-top: 3px; }
.errorlist { color: var(--mal); font-size: 11.5px; 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; }

/* ---- Filtros ------------------------------------------------------------ */
.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin-bottom: 13px; }
.filtros .campo { margin: 0; }
.filtros label { font-size: 9px; text-transform: uppercase; letter-spacing: .12em; color: var(--n500); }
.filtros input, .filtros select { width: auto; min-width: 140px; max-width: 240px; }

/* ---- Badges / pills de estado ------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: var(--radio-pill);
  font-size: 10px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap;
  background: var(--a900); color: var(--a300); border: 1px solid var(--a700);
}
.badge.ok { background: var(--ok-fondo); color: var(--ok); border-color: var(--ok-borde); }
.badge.peligro { background: var(--mal-fondo); color: var(--mal); border-color: var(--mal-borde); }
.badge.alerta { background: var(--alerta-fondo); color: var(--alerta); border-color: var(--alerta-borde); }
.badge.neutro { background: var(--neutro-fondo); color: var(--n500); border-color: var(--neutro-borde); }

/* chip de documento (semáforo documental) */
.chip-doc {
  display: inline-block; width: 13px; height: 13px; border-radius: 3px;
  vertical-align: -2px;
}
.chip-doc.vigente { background: rgba(127, 183, 155, .55); }
.chip-doc.por_vencer { background: rgba(201, 163, 106, .6); }
.chip-doc.vencido { background: rgba(207, 125, 132, .65); }
.chip-doc.sin_informacion { background: var(--n800); }

/* ---- Mensajes ----------------------------------------------------------- */
.mensajes { display: flex; flex-direction: column; gap: 8px; }
.mensaje {
  padding: 9px 13px; border-radius: var(--radio); font-size: 12.5px;
  border: 1px solid var(--n700); background: var(--superficie); color: var(--n300);
}
.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: 13px; font-size: 12px; padding: 0 15px 2px; }
.paginacion a, .paginacion span.actual {
  min-width: 27px; padding: 3px 8px; text-align: center;
  border: 1px solid var(--n800); border-radius: 6px;
  background: transparent; color: var(--n300);
}
.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: 11px; }

/* ---- 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: 17px; margin-bottom: 4px; }
.login-caja .sub { color: var(--n500); font-size: 12px; 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: 13px; 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: 10.5px; color: var(--n600); }
.login-local { margin-top: 22px; }
.login-local .divisor {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--n600);
}
.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: 12.5px; padding: 8px 11px;
}
.login-local input:focus { outline: none; border-color: var(--a600); }
.login-local .error { color: var(--mal); font-size: 11.5px; 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: 9px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--n500); font-weight: 500; margin-bottom: 2px;
}
.ficha .dato .v { font-size: 12.5px; }

/* ---- 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;
}
.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: 12px;
  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;
}
.modal .modal-cabecera { display: flex; align-items: center; gap: 10px; }
.modal .modal-cabecera h2 { font-size: 15px; margin: 0; }
.modal .modal-cabecera .cerrar {
  margin-left: auto; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: var(--radio);
  background: none; border: 0; color: var(--n500); cursor: pointer;
}
.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; }

/* ---- Banda de resumen automático ----------------------------------------- */
.resumen-banda {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 15px;
  background: linear-gradient(90deg, rgba(145, 132, 217, .14), rgba(145, 132, 217, .04));
  border: 1px solid rgba(145, 132, 217, .42); border-radius: var(--radio);
}
.resumen-banda .ic { color: var(--a400); margin-top: 2px; }
.resumen-banda .kicker {
  font-size: 9px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--a400); font-weight: 500; margin-bottom: 3px;
}
.resumen-banda p { margin: 0; font-size: 13px; line-height: 1.55; }
.resumen-banda .fuentes { font-size: 10.5px; color: var(--n500); margin-top: 5px; }

/* ---------- Ficha del conductor: cabecera, veredicto, timeline ---------- */
.cabecera-conductor { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.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: 27px; font-weight: 500; color: var(--a400);
  background: repeating-linear-gradient(135deg, #2b2741 0 5px, #292b31 5px 10px);
}
.cc-identidad { flex: 1; min-width: 220px; }
.cc-nombre { font-size: 21px; font-weight: 500; letter-spacing: -.01em; }
.cc-meta { font-size: 11.5px; color: var(--n500); margin-top: 2px; }
.cc-veredicto { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.veredicto {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: var(--radio-pill);
  font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid;
}
/* Conductor: operativo / reservas / bloqueado · Socio: operando / pendientes /
   bloqueado. Vocabulario distinto, misma escala de tres niveles. */
.veredicto.operativo, .veredicto.operando { color: var(--ok); background: var(--ok-fondo); border-color: var(--ok-borde); }
.veredicto.reservas, .veredicto.pendientes { color: var(--alerta); background: var(--alerta-fondo); border-color: var(--alerta-borde); }
.veredicto.bloqueado { color: var(--mal); background: var(--mal-fondo); border-color: var(--mal-borde); }
.veredicto.sin_asignar { color: var(--n500); background: var(--neutro-fondo); border-color: var(--neutro-borde); }

/* "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; }
.lista-pendiente { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.lista-pendiente li { font-size: 12.5px; color: var(--n400); }
.lista-pendiente li::marker { color: var(--n600); }
.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: 12.5px; }
.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: 12.5px; }
.lt-detalle { font-size: 11.5px; color: var(--n500); overflow: hidden; text-overflow: ellipsis; }
.lt-fecha { font-size: 11px; color: var(--n600); 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: 12.5px; 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: 11px; 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: 20px; font-weight: 500; letter-spacing: -.01em; }
.torre-region .codigo { font-size: 11px; 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: 11px; 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: repeating-linear-gradient(115deg, var(--n400) 0 3px, var(--n700) 3px 7px);
}
.torre-barra .evento { background: var(--acento); }
.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); }
.torre-movil.sinver { box-shadow: inset 2px 0 0 var(--n600); }
.torre-movil.evento { box-shadow: inset 2px 0 0 var(--acento); }
.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: 12.5px; letter-spacing: .04em; font-weight: 500; white-space: nowrap; }
.torre-movil .quien { font-size: 12px; color: var(--n500); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.torre-movil .asientos { font-size: 10.5px; color: var(--n600); font-variant-numeric: tabular-nums; white-space: nowrap; }
.torre-region .asientos-zona { font-size: 11px; color: var(--ok); font-variant-numeric: tabular-nums; margin: 2px 0 6px; }
.torre-movil .estado { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.torre-movil.disp .estado { color: var(--ok); }
.torre-movil.sinver .estado { color: var(--n400); }
.torre-movil.evento .estado { color: var(--a400); }
.torre-movil.mant .estado { color: var(--alerta); }
.torre-movil.fuera .estado { color: var(--n500); }
.torre-region .mas { font-size: 10.5px; 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: 11.5px; 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: repeating-linear-gradient(115deg, var(--n400) 0 2px, var(--n700) 2px 5px);
}
.torre-pie .leyenda i.evento { background: var(--acento); }
.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: 15px; }
  body.modo-tv .torre-region .zona { font-size: 26px; }
  body.modo-tv .torre-region .disponibles { font-size: 54px; }
  body.modo-tv .torre-region .conteos { font-size: 14px; }
  body.modo-tv .torre-movil .numero { font-size: 16px; }
  body.modo-tv .torre-movil .quien { font-size: 15px; }
  body.modo-tv .torre-movil .estado { font-size: 12.5px; }
  body.modo-tv .torre-pie { font-size: 14.5px; }
  body.modo-tv .torre-region .mas { font-size: 13px; }
}

/* ---- Utilidades --------------------------------------------------------- */
.texto-2 { color: var(--n500); }
.chico { font-size: 11px; }
.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; }

/* ---- 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 .22s ease;
    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: 13px; font-weight: 500; margin: 0; }
.bloque-asignacion .tabla { font-size: 11.5px; }
/* 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: 15px; 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: 12px; 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: 11px; font-family: inherit; cursor: pointer;
  transition: color .12s, background-color .12s;
}
.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 .18s ease; }

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: 20px; font-weight: 600; letter-spacing: -.02em;
}
.riel-titulo { font-size: 18px; font-weight: 600; letter-spacing: -.02em; margin: 0; line-height: 1.2; }
.riel-titulo.mono { font-family: var(--mono); font-size: 19px; letter-spacing: .02em; }
.riel-sub { font-size: 11.5px; color: var(--n500); margin-top: 3px; }
.riel-modelo { font-size: 12.5px; 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 .4s ease; }
.completitud .pct { font-family: var(--mono); font-size: 16px; font-weight: 600; line-height: 1.1; }
.completitud .detalle { font-size: 11px; color: var(--n500); line-height: 1.35; }

/* ── Riel: datos maestros ── */
.riel-rotulo { font-size: 9.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--n600); }
.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: 11.5px;
}
.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: 12px; }
.riel-datos .v.mono { font-family: var(--mono); }
/* Dato ausente: ámbar y accionable. Nunca un guión mudo. */
.falta {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--alerta); font-size: 11.5px; white-space: nowrap;
}
a.falta:hover { text-decoration: underline; }

/* ── 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: 11.5px; 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: 11.5px; 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: 12.5px; font-weight: 500;
  color: var(--n500); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.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: 10.5px; 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: 13px; font-weight: 600; color: var(--alerta); }
.banner-pendientes .cabecera .derecha { margin-left: auto; font-size: 11.5px; }
.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: 10.5px; color: var(--n600); }
.banner-pendientes .titulo { font-size: 12.5px; font-weight: 500; margin-top: 3px; line-height: 1.35; }
.banner-pendientes .sub { font-size: 11px; color: var(--n500); margin-top: 2px; }

/* ── KPIs ── */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.kpi-ficha {
  display: flex; align-items: center; gap: 11px; padding: 13px 14px;
  background: var(--superficie); border: 1px solid var(--divisor); border-radius: 10px;
}
.kpi-ficha .caja { width: 32px; height: 32px; border-radius: 9px; background: var(--n900); display: grid; place-items: center; flex-shrink: 0; }
.kpi-ficha .caja .ic { color: var(--n500); }
.kpi-ficha .valor {
  font-family: var(--mono); font-size: 22px; font-weight: 500; line-height: 1.1;
  /* El signo del monto no puede quedar en una línea y la cifra en otra. */
  white-space: nowrap;
}
.kpi-ficha > div { min-width: 0; }
.kpi-ficha .label { font-size: 11px; color: var(--n500); margin-top: 1px; }
/* Un KPI en ámbar señala un hueco, no una cifra mala. */
.kpi-ficha.hueco .caja { background: var(--alerta-fondo); }
.kpi-ficha.hueco .caja .ic, .kpi-ficha.hueco .label { color: var(--alerta); }

@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: 9.5px; letter-spacing: .08em;
  color: var(--n600); 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: 13px; font-weight: 500; }
.meta-mono { font-family: var(--mono); font-size: 11px; 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;
  background: var(--alerta-fondo); border-radius: 9px; padding: 10px 12px;
}
.aviso-hueco > div { flex: 1; min-width: 0; }
.aviso-hueco strong { font-size: 12.5px; color: var(--alerta); font-weight: 600; }
.aviso-hueco .chico { color: var(--n500); }
.avatar-punteado {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  border: 1px dashed var(--alerta-borde); display: grid; place-items: center;
}
.avatar-punteado .ic { color: var(--alerta); }

/* 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(--n700); }
.vacio p { margin: 0; max-width: 42ch; font-size: 12.5px; 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: 9px; 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: 13px; font-weight: 600; }
.pill-patente {
  font-family: var(--mono); font-size: 11px; padding: 2px 7px;
  border-radius: 5px; background: var(--n900); color: var(--n400);
}
.tarjeta-movil .cabecera .meta { margin-left: auto; font-size: 11px; 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: 12px; }
.bloque-tripulacion.falta-conductor { background: var(--alerta-fondo); color: var(--alerta); font-size: 12px; }
.bloque-tripulacion.falta-conductor .boton { margin-left: auto; }

.chips-movil { display: flex; gap: 6px; flex-wrap: wrap; }
.chips-movil .chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; padding: 3px 8px; border-radius: 6px;
  background: var(--n900); color: var(--n500);
}

.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.checklist li { display: flex; align-items: flex-start; gap: 8px; font-size: 11.5px; color: var(--n400); line-height: 1.4; }
.checklist .ic { color: var(--n600); 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); }