:root {
  --b900: #0a1733;
  --b800: #0d2348;
  --b700: #0f3460;
  --b600: #1a4d9c;
  --b500: #2563eb;
  --b400: #4a90e2;
  --b300: #93b8e6;
  --b200: #c9def0;
  --b100: #e3eef9;
  --b50:  #f1f6fc;

  --text:  #0f172a;
  --text2: #475569;
  --text3: #94a3b8;
  --border: #e2e8f0;
  --brd2:  #cbd5e1;
  --surf:  #ffffff;
  --s2:    #f8fafc;
  --s3:    #eef2f7;

  --ok:     #047857;  --ok-l:   #d1fae5;
  --warn:   #b45309;  --warn-l: #fef3c7;
  --bad:    #b91c1c;  --bad-l:  #fee2e2;
  --info:   #1d4ed8;  --info-l: #dbeafe;

  --green:  var(--ok);   --green-l: var(--ok-l);
  --red:    var(--bad);  --red-l:   var(--bad-l);
  --amber:  var(--warn); --amber-l: var(--warn-l);

  --accent:  var(--b700);
  --accent2: var(--b600);

  --bg:      #f1f5f9;
  --bg2:     #ffffff;
  --bg3:     #f8fafc;
  --bg4:     #eef2f7;
  --surface: #ffffff;

  --radius:    10px;
  --radius-sm: 6px;
  --radius-lg: 14px;

  --shadow-xs: 0 1px 2px rgba(15,23,42,.04);
  --shadow-sm: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --shadow:    0 4px 12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04);
  --shadow-lg: 0 12px 32px rgba(15,52,96,.12);

  --font: system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: 'SF Mono', 'Fira Code', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 14px; }

.app-layout { display: flex; height: 100%; }

/* flex:1 es obligatorio: como ítem de .app-layout, sin crecer se encogería al
   ancho de su contenido y dejaría los costados vacíos. */
#app { height: 100%; flex: 1 1 auto; display: flex; flex-direction: column; max-width: 480px; margin: 0 auto; position: relative; min-width: 0; }

.screen { flex: 1; overflow: hidden; display: none; flex-direction: column; }
.screen.active { display: flex; }

/* ══ SIDEBAR (entidades + consulta de unidad) ══ */
/* Mobile/tablet: drawer que desliza por encima. Desktop: columna fija en el layout. */
.sidebar-overlay {
  position: fixed; inset: 0; background: rgba(15,23,42,.5); z-index: 190;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.sidebar-overlay.open { opacity: 1; pointer-events: auto; }

/* Navy: el mismo azul del login y del hero. El menú queda como marco y el
   centro, blanco, se lee como el trabajo. */
.app-sidebar {
  position: fixed; top: 0; left: 0; height: 100%; width: 280px; max-width: 82vw;
  background: var(--b900);
  box-shadow: var(--shadow-lg);
  transform: translateX(-100%); transition: transform .22s ease;
  z-index: 200; overflow: hidden; flex-shrink: 0;   /* el que scrollea es .sidebar-nav */
  display: flex; flex-direction: column;
}
.app-sidebar.open { transform: translateX(0); }

.sidebar-toggle {
  background: rgba(255,255,255,.11); border: 1px solid rgba(255,255,255,.3); border-radius: 6px;
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  color: #fff; cursor: pointer; flex-shrink: 0;
}
.sidebar-toggle:hover { background: rgba(255,255,255,.2); }

/* Quién está conectado. Acá NO va el logo: ya está en la barra de marca, al
   lado, y repetirlo no agrega nada. Este es el único lugar de la app donde
   figura el usuario, así que se ve en mobile también (al abrir el menú). */
.sidebar-brand {
  display: flex; align-items: center; gap: 10px; padding: 16px 16px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08); flex-shrink: 0;
}
.sidebar-brand-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
/* El rol arriba, en pastilla: es lo que define qué puede hacer el que entró */
/* El punto verde de conexión va adentro de la pastilla: rol y conexión son la
   misma respuesta —con qué permisos estás trabajando y si hay base del otro
   lado—. El nombre queda suelto abajo, sin adornos. */
.sb-role-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22); color: #dce9f8;
}
/* .auth-role-text trae su propio color/peso (viene de la píldora del topbar);
   adentro de la pastilla manda la pastilla. */
.sb-role-chip .auth-role-text { color: inherit; font-weight: inherit; }
/* Sin sesión no hay rol que mostrar y la pastilla desaparece entera */
.sb-role-chip:has(.auth-role-text:empty) { display: none; }
.sb-user-name { font-size: 13.5px; font-weight: 700; color: #fff; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-collapse {
  margin-left: auto; flex-shrink: 0; width: 26px; height: 26px; border-radius: 7px;
  background: rgba(255,255,255,.06); border: none;
  color: #a9bdd9; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.sidebar-collapse:hover { background: rgba(255,255,255,.14); color: #fff; }
.sidebar-collapse svg { transition: transform .2s; }
.app-layout.sb-off .sidebar-collapse svg { transform: rotate(180deg); }

.sidebar-nav { flex: 1; overflow-y: auto; padding: 10px 10px 16px; display: flex; flex-direction: column; gap: 1px; }
.nav-link, .nav-group-btn {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px; border: none; border-radius: 9px; background: none;
  color: #c3d2e8; font-family: var(--font); font-size: 13.5px; font-weight: 600;
  text-align: left; cursor: pointer;
}
.nav-link:hover, .nav-group-btn:hover { background: rgba(255,255,255,.06); color: #fff; }
/* La sección abierta queda marcada: el menú dice dónde estás parado */
.nav-link.active { background: var(--b600); color: #fff; }
.nav-link.active .nav-ico { color: #fff; }
.nav-txt { flex: 1; min-width: 0; }
.nav-meta { font-size: 11px; font-weight: 700; color: #7690b4; flex-shrink: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nav-ico { display: flex; align-items: center; justify-content: center; width: 17px; height: 17px; color: #8ba4c8; flex-shrink: 0; }
.nav-ico svg { width: 100%; height: 100%; }
.nav-ico-sm { width: 13px; height: 13px; color: #7690b4; }
.nav-meta .vto-bad { color: #f0a5a5; font-weight: 700; }

/* Grupos plegables: el menú entero entra sin scroll y cada sección se abre
   cuando hace falta. El chevrón gira en vez de cambiar de ícono. */
.nav-group { margin-bottom: 2px; }
.nav-chev { width: 14px; height: 14px; color: #7690b4; flex-shrink: 0; transition: transform .18s; }
.nav-group.open .nav-chev { transform: rotate(90deg); }
.nav-children { overflow: hidden; max-height: 0; transition: max-height .22s ease; }
.nav-group.open .nav-children { max-height: 320px; }
/* Los hijos no llevan ícono: la sangría alcanza para leer la jerarquía */
.nav-child { padding: 8px 10px 8px 34px; font-size: 12.8px; color: #a9bdd9; border-radius: 8px; }
.nav-switch-row { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; }
.nav-switch-row:hover { background: rgba(255,255,255,.06); color: #fff; }
.switch {
  width: 32px; height: 18px; border-radius: 999px; background: rgba(255,255,255,.14);
  position: relative; flex-shrink: 0; transition: background .15s;
}
.switch::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: #fff; transition: transform .18s;
}
.switch.on { background: var(--b500); }
.switch.on::after { transform: translateX(14px); }

/* ══ TABLERO DE INSPECCIONES A/P ══ */
/* Dos entradas del mismo peso: ninguna es "la chica" — el auditor elige
   según si puede sacarle la foto a la patente o no. */
.ap-cta-row { display: flex; gap: 10px; margin: 16px; flex-shrink: 0; }
/* Ícono a la izquierda y texto al lado: apilados, las dos cards armaban un
   bloque de ~170px arriba de la lista, que es lo que el rediseño vino a evitar. */
.ap-cta {
  flex: 1; min-width: 0; display: flex; flex-direction: row; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: var(--radius-lg); cursor: pointer;
  text-align: left; font-family: var(--font);
}
.ap-cta:hover { transform: translateY(-1px); }
.ap-cta:active { transform: translateY(0); }
.ap-cta-ico {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.ap-cta-title { font-size: 14.5px; font-weight: 700; display: block; }
.ap-cta-sub { font-size: 11px; display: block; margin-top: 1px; }

/* La LPR es LA acción: el auditor apunta la cámara en vez de tipear. Va en azul
   lleno para que se lea como el botón, no como una opción más. */
.ap-cta-primary {
  border: none; background: linear-gradient(135deg, var(--b600) 0%, var(--b500) 100%);
  color: #fff; box-shadow: 0 4px 14px rgba(37,99,235,.28);
}
.ap-cta-primary:hover { box-shadow: 0 6px 18px rgba(37,99,235,.36); }
.ap-cta-primary .ap-cta-ico { background: rgba(255,255,255,.2); }
.ap-cta-primary .ap-cta-sub { color: var(--b100); }

.ap-cta-secondary {
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  box-shadow: var(--shadow-xs);
}
.ap-cta-secondary:hover { border-color: var(--brd2); box-shadow: var(--shadow-sm); }
.ap-cta-secondary .ap-cta-ico { background: var(--s2); color: var(--accent); }
.ap-cta-secondary .ap-cta-sub { color: var(--text3); }

/* Campo de patente con botón de cámara al lado */
.ap-field-cam { display: flex; gap: 8px; align-items: flex-start; }
.ap-field-cam .form-input { margin-bottom: 0; }
.ap-cam-btn {
  flex-shrink: 0; width: 42px; height: 40px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface); color: var(--accent);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.ap-cam-btn:hover { border-color: var(--accent); }

/* Confirmación de la lectura del OCR */
.ocr-modal {
  position: fixed; inset: 0; z-index: 300; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(15,23,42,.6);
}
.ocr-card {
  width: 100%; max-width: 360px; background: var(--surface);
  border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-lg);
}
.ocr-title { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 12px; }
.ocr-aviso { font-size: 12.5px; color: var(--bad); background: var(--bad-l); border-radius: var(--radius-sm); padding: 9px 11px; margin-bottom: 12px; line-height: 1.45; }
.ocr-input {
  width: 100%; padding: 12px 14px; text-align: center;
  font-family: var(--mono); font-size: 22px; font-weight: 700; letter-spacing: .08em;
  background: var(--s2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); outline: none; text-transform: uppercase;
}
.ocr-input:focus { border-color: var(--b500); box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
/* Confirmación del OCR: la patente es lo único que hay que comparar contra la
   chapa, así que ocupa la pantalla. La foto no se muestra. */
.ocr-patente-big { font-size: 34px; padding: 16px 14px; letter-spacing: .12em; }
.ocr-hint { font-size: 11.5px; color: var(--text3); margin-top: 8px; text-align: center; }
/* Bitren: a cuál de las dos chapas corresponde la lectura */
.ocr-semi-sel { display: flex; gap: 8px; margin-bottom: 12px; }
.ocr-semi-btn {
  flex: 1; padding: 9px 0; border-radius: var(--radius-sm);
  border: 1px solid var(--brd2); background: var(--bg3); color: var(--text2);
  font-family: var(--font); font-size: 13px; font-weight: 600; cursor: pointer;
}
.ocr-semi-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.ocr-btns { display: flex; gap: 10px; margin-top: 16px; }
.ocr-btns .btn-primary, .ocr-btns .btn-secondary { margin-top: 0; flex: 1; }

/* Envuelven en varias líneas: el scroll lateral escondía la mitad de los
   estados y había que arrastrar para ver si había alguna dañada. */
/* ── Filtros del tablero ────────────────────────────────────────────────────
   En escritorio el panel está siempre abierto y el botón no existe; en celular
   (<=767px) el panel se pliega y el botón lo abre. Ver el comentario del bloque
   en index.html. */
/* En escritorio el resumen va DEBAJO de los filtros, pegado a la lista que
   describe. En celular queda arriba, compartiendo renglón con el botón que
   abre el panel. */
.ap-filtros { flex-shrink: 0; display: flex; flex-direction: column; }
.ap-f-bar { order: 2; padding-bottom: 10px; }
.ap-f-panel { order: 1; }
.ap-f-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 16px 8px; }
.ap-f-resumen { font-family: var(--mono); font-size: 11.5px; color: var(--text3);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-f-toggle { display: none; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surf); color: var(--text2);
  font-family: var(--font); font-size: 12px; font-weight: 600; cursor: pointer; flex-shrink: 0; }
.ap-f-toggle.tiene { border-color: var(--b500); color: var(--b500); }
.ap-f-toggle .ap-f-n { background: var(--b500); color: #fff; border-radius: 999px;
  padding: 0 6px; font-family: var(--mono); font-size: 10.5px; }
.ap-f-panel { padding: 0 16px 12px; }
.ap-f-grid { display: flex; flex-wrap: wrap; gap: 9px; }
.ap-f-campo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ap-f-campo label { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text3); padding-left: 2px; }
.ap-f-campo select, .ap-f-campo input { padding: 7px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surf); color: var(--text);
  font-family: var(--font); font-size: 13px; cursor: pointer; min-width: 140px; }
.ap-f-campo input { font-family: var(--mono); font-size: 12px; cursor: text; }
.ap-f-campo select:focus-visible, .ap-f-campo input:focus-visible { outline: 2px solid var(--b500); outline-offset: 1px; }
/* Los dos campos del rango solo aparecen con "Entre fechas" elegido. */
.ap-f-rango { display: none; }
.ap-f-rango.on { display: flex; }
.ap-f-acc { display: flex; justify-content: flex-end; margin-top: 9px; }
.ap-f-limpiar { padding: 6px 13px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: transparent; color: var(--text2); font-family: var(--font); font-size: 12px;
  font-weight: 600; cursor: pointer; }
.ap-f-limpiar:hover { border-color: var(--brd2); color: var(--text); }
.ap-f-limpiar[hidden] { display: none; }


.ap-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.ap-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  cursor: pointer;
}
.ap-row:hover { border-color: var(--brd2); box-shadow: var(--shadow-xs); }
.ap-row-main { flex: 1; min-width: 0; }
.ap-row-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* La fila se reconoce por el NOMBRE del chofer: es lo único en negrita. Las
   patentes van al lado, más livianas y en gris — están para confirmar, no para
   buscar. En sans y no en mono: el mono se veía como texto de máquina y le daba
   a las patentes el mismo peso visual que al nombre. */
.ap-patente { font-size: 13.8px; font-weight: 700; color: var(--text); line-height: 1.35; }
.ap-row-plates { font-weight: 500; color: var(--text2); }
.ap-row-sub { font-size: 12px; color: var(--text2); margin-top: 3px; }
.ap-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
.ap-estado { font-size: 12px; font-weight: 600; }
.ap-fecha { font-size: 11px; color: var(--text3); }
.ap-badge { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; }
.ap-badge-danada { background: var(--bad-l); color: var(--bad); }
.ap-badge-nov { background: var(--ok-l); color: var(--ok); }

/* Aviso de regularización, arriba de la pantalla de oficina */
.ap-novedad { background: var(--ok-l); border-left: 3px solid var(--ok); border-radius: var(--radius); padding: 12px 14px; }
.ap-novedad-tit { font-size: 13px; font-weight: 700; color: var(--ok); }
.ap-novedad-det { font-size: 12.5px; color: var(--text2); margin-top: 4px; line-height: 1.45; }
.ap-novedad-user { font-size: 11px; color: var(--text3); margin-top: 4px; }

/* Discrepancia de patente: lo que declaró el transporte contra lo que se vio
   afuera. No traba nada — es para que el de oficina confirme con la foto. */
.ap-disc { background: var(--warn-l); border-left: 3px solid var(--warn); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 10px; }
.ap-disc-tit { font-size: 13px; font-weight: 700; color: var(--warn); }
.ap-disc-cotejo { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 6px; font-size: 12.5px; color: var(--text2); }
.ap-disc-cotejo b { font-family: ui-monospace, Consolas, monospace; font-size: 14px; letter-spacing: .05em; color: var(--text); }

/* Miniaturas de las fotos de patente. La que discrepa va marcada. */
.ap-pat-minis { display: flex; flex-wrap: wrap; gap: 10px; }
.ap-pat-mini { flex: 1 1 130px; min-width: 130px; cursor: pointer; }
.ap-pat-marco {
  aspect-ratio: 4 / 3; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface2, var(--bg)); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.ap-pat-marco img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ap-pat-alerta .ap-pat-marco { border: 2px solid var(--warn); }
.ap-pat-pie { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 5px; }
.ap-pat-rot { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text3); }
.ap-pat-num { font-family: ui-monospace, Consolas, monospace; font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.ap-pat-hora { font-size: 10.5px; color: var(--text3); margin-top: 2px; }
/* La foto llegó al servidor bastante después de sacarse: quedó retenida sin
   señal. No es un error, pero el horario no se lee igual y hay que verlo. */
.ap-pat-hora-desf { color: var(--warn); }

.btn-eliminar { color: var(--bad); }
.btn-eliminar:hover { border-color: var(--bad); color: var(--bad); }
.ap-badge-auth { background: var(--info-l); color: var(--info); }
.ap-empty { padding: 40px 20px; text-align: center; color: var(--text3); font-size: 13px; line-height: 1.6; }
.ap-empty-load { display: flex; align-items: center; justify-content: center; gap: 9px; }
.ap-spin { width: 14px; height: 14px; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--b500); animation: apSpin .7s linear infinite; }
@keyframes apSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ap-spin { animation-duration: 2.4s; } }
.ap-chip-doc {
  margin-top: 8px; margin-right: 6px; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--info); background: var(--info-l); color: var(--info);
  font-family: var(--font); font-size: 11.5px; font-weight: 700; cursor: pointer;
}
.ap-chip-doc:hover { background: var(--info); color: #fff; }

/* Resumen para el auditor de oficina */
.ap-dato { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.ap-dato-lbl { flex: 0 0 96px; font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--text3); font-family: var(--mono); padding-top: 2px; }
.ap-dato-val { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--text); }
.ap-desv-cont { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.ap-desv-chip {
  padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  background: var(--s3); color: var(--text2);
}
.ap-desv-crit { background: var(--bad-l);  color: var(--bad); }
.ap-desv-leve { background: var(--warn-l); color: var(--warn); }
/* El contenedor se copia al tocarlo: se distingue del resto de los chips, que
   son solo lectura. La fuente mono es la misma del DNI y las patentes. */
.ap-chip-copia {
  cursor: pointer; font-family: var(--mono); letter-spacing: .4px;
  border: 1px dashed var(--border); user-select: all;
}
.ap-chip-copia:active { transform: scale(.97); }
/* ── Tilde de nacionalidad de la entidad ─────────────────────────────────────
   Argentino por defecto. Destildarlo apaga los documentos del régimen laboral
   argentino, así que el subtítulo explica la consecuencia y no el campo. */
.nf-check {
  display: flex; gap: 11px; align-items: center; cursor: pointer;
  margin-top: 12px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--s2);
}
.nf-check input { width: 18px; height: 18px; margin: 0; flex: none; cursor: pointer; accent-color: var(--b500); }
.nf-check b { font-size: 14px; font-weight: 600; color: var(--text); }

/* ── Variante del documento (ART / accidentes personales) ────────────────────
   Un casillero, dos papeles posibles: el tilde dice cuál se está cargando. */
.var-opt {
  display: flex; gap: 10px; align-items: center; cursor: pointer;
  padding: 11px 13px; margin-bottom: 8px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--s2); font-size: 14px; color: var(--text2);
}
.var-opt:last-child { margin-bottom: 0; }
.var-opt.sel { border-color: var(--b500); background: var(--b50, var(--s3)); color: var(--text); font-weight: 600; }
.var-opt input { width: 17px; height: 17px; margin: 0; flex: none; accent-color: var(--b500); }

/* La pastilla de la ficha: qué papel ocupa el casillero. */
.doc-variante {
  display: inline-block; margin: 6px 0 0;
  font-size: 11.5px; font-weight: 600; color: var(--text2);
  background: var(--s3); border-radius: 999px; padding: 3px 10px;
}

/* ── Sección 04 · Contenedores del checklist ─────────────────────────────────
   Un renglón por contenedor, con su × al costado. La letra es mono como las
   patentes y el DNI: es un código que después se tipea en ALET. */
.ap-cont-fila { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.ap-cont-input {
  flex: 1; min-width: 0; margin-bottom: 0;
  font-family: var(--mono); letter-spacing: .5px; text-transform: uppercase;
}
.ap-cont-quitar {
  flex: none; width: 34px; height: 34px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface); color: var(--text3);
  font-size: 18px; line-height: 1; cursor: pointer;
}
.ap-cont-quitar:hover { border-color: var(--bad); color: var(--bad); }
.ap-cont-add {
  padding: 8px 14px; border-radius: 999px;
  border: 1px dashed var(--border); background: var(--surface);
  color: var(--text2); font-size: 13px; font-weight: 600; cursor: pointer;
}
.ap-cont-add:hover { border-color: var(--b500); color: var(--b500); }
.ap-cont-hint { margin-top: 8px; font-size: 12px; color: var(--text3); }

.ap-desv-grupo { margin-bottom: 12px; }
.ap-desv-grupo .desvio-item { border-top: none; padding: 5px 0; }

.ap-unidad-edit {
  margin-left: auto; padding: 6px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface); color: var(--text2);
  font-family: var(--font); font-size: 12px; font-weight: 600; cursor: pointer;
}
.ap-unidad-edit:hover { border-color: var(--brd2); color: var(--text); }

/* ══ CHECKLIST A/P ══ */
/* Fondo navy, no gris: al lado va a aparecer el chip rojo/ámbar de desvíos, y
   con gris se confundían — el título es estructura, el chip es alerta. */
.cl-sect-title {
  padding: 14px 16px 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--b100); background: var(--b700);
  border-bottom: 1px solid var(--border);
}

/* Resumen de desvíos que se ve arriba, fijo, mientras se marca el checklist —
   "va sumando" sin tener que bajar a la sección 03 para verlo. */
.ap-cl-resumen-top {
  position: sticky; top: 0; z-index: 6; display: flex; gap: 8px;
  padding: 10px 16px; background: var(--bg2); border-bottom: 1px solid var(--border);
}
.ap-cl-resumen-top:empty { display: none; }
.ap-rt-chip {
  font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 20px;
  display: flex; align-items: center; gap: 6px;
}
.ap-rt-chip .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.ap-rt-crit { background: var(--bad-l); color: var(--bad); }
.ap-rt-crit .dot { background: var(--bad); }
.ap-rt-leve { background: var(--warn-l); color: var(--warn); }
.ap-rt-leve .dot { background: var(--warn); }
.cl-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px;
  border-bottom: 1px solid var(--border);
}
.cl-hidden { display: none; }
.cl-nivel-1 { padding-left: 30px; background: var(--s2); }
.cl-nivel-2 { padding-left: 44px; background: var(--s3); }
.cl-txt { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.cl-num { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--text3); flex-shrink: 0; }
.cl-label { font-size: 13px; line-height: 1.35; color: var(--text); }
.cl-crit { font-size: 9.5px; font-weight: 700; padding: 1px 5px; border-radius: 3px; flex-shrink: 0; }
.crit-c { background: var(--bad-l); color: var(--bad); }
.crit-n { background: var(--warn-l); color: var(--warn); }

/* Fila compactada: todo lo que sigue en "Sí"/"N/A" (default) se reduce a una
   línea, así el checklist entero no arranca como un muro de 64 renglones. */
.cl-compacta { cursor: pointer; padding-top: 8px; padding-bottom: 8px; }
.cl-compacta:hover { filter: brightness(0.98); }
.cl-pill {
  flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; color: #fff;
}
.cl-pill-si { background: var(--ok); }
.cl-pill-na { background: var(--text3); }
/* ScD: estuvo mal y se corrigió. Ámbar y no verde a propósito — verde es el
   ítem que nunca tuvo problema, y son dos cosas distintas. */
.cl-pill-scd { background: var(--warn); }
.cl-label-trunc {
  flex: 1; min-width: 0; font-size: 12.5px; color: var(--text2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Las eslingas no se responden con un tilde: hay que CONTARLAS (una cada dos
   pallets). Va en su propio recuadro para que no se lea como un renglón más
   del checklist y se pase por alto, con el número grande y en negrita. */
.cl-eslingas {
  display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 10px;
  padding: 9px 12px; background: var(--s2);
  border: 1px solid var(--brd2); border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
}
.cl-eslingas label { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text2); font-family: var(--mono); }
.cl-eslingas input {
  width: 84px; padding: 7px 10px; background: var(--surf);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-family: var(--font); font-size: 17px; font-weight: 700; text-align: center;
  color: var(--text); outline: none;
}
.cl-eslingas input:focus { border-color: var(--b500); box-shadow: 0 0 0 3px rgba(37,99,235,.15); }

/* Botones grandes: esto se usa con guantes, en el playón */
.cl-btns { display: flex; gap: 4px; flex-shrink: 0; }
.cl-btn {
  min-width: 42px; padding: 9px 8px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface); color: var(--text2);
  font-family: var(--font); font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.cl-btn.active.cl-btn-si { background: var(--ok);   border-color: var(--ok);   color: #fff; }
.cl-btn.active.cl-btn-no { background: var(--bad);  border-color: var(--bad);  color: #fff; }
.cl-btn.active.cl-btn-na { background: var(--text3); border-color: var(--text3); color: #fff; }
.cl-btn.active.cl-btn-scd { background: var(--warn); border-color: var(--warn); color: #fff; }
/* Con la cuarta columna los cuatro botones ya no entran a 42px en un teléfono:
   el ancho lo pone el contenido y se aprieta parejo antes que desbordar. */
.cl-btns .cl-btn { min-width: 0; flex: 1 1 auto; padding: 9px 6px; }

/* El textarea de observaciones: alto cómodo y sin resize horizontal, que en un
   teléfono desborda la tarjeta. */
.ap-obs-input { width: 100%; resize: vertical; min-height: 84px; line-height: 1.5; }

/* Las observaciones en la pantalla de oficina. Respeta los renglones que
   escribió el del playon: si separo en parrafos, se lee como los escribio. */
.ap-obs-doc { margin-top: 10px; padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--surface2, var(--bg)); border-left: 3px solid var(--border); }
.ap-obs-doc-tit { font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; color: var(--text3); margin-bottom: 4px; }
.ap-obs-doc-txt { font-size: 13px; color: var(--text2); line-height: 1.5; white-space: pre-wrap; }

.desvio-panel { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; }
.desvio-col { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.desvio-head {
  padding: 9px 12px; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: space-between;
}
.desvio-head-crit { background: var(--bad-l);  color: var(--bad); }
.desvio-head-leve { background: var(--warn-l); color: var(--warn); }
.desvio-cnt { font-family: var(--mono); }
.desvio-item { display: flex; align-items: baseline; gap: 8px; padding: 8px 12px; font-size: 12.5px; border-top: 1px solid var(--border); }
.desvio-vacio { padding: 10px 12px; font-size: 12px; color: var(--text3); font-style: italic; }
.dot-crit, .dot-leve { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.dot-crit { background: var(--bad); }
.dot-leve { background: var(--warn); }
.ap-cierre-info { font-size: 13px; color: var(--text2); background: var(--s2); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; line-height: 1.5; }
/* Aviso de que hay correcciones sin guardar sobre un checklist ya cerrado */
.ap-cierre-aviso { font-size: 12px; color: var(--warn); font-weight: 600; text-align: center; margin: 8px 0 12px; }
.btn-secondary {
  width: 100%; margin-top: 10px; padding: 12px 16px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
  color: var(--text2); font-family: var(--font); font-size: 14px; font-weight: 600; cursor: pointer;
}
.btn-secondary:hover { border-color: var(--brd2); color: var(--text); }

/* Control documental dentro de la inspección (el detalle vive en la consulta de unidad) */

.ap-hist-row { padding: 9px 0; border-bottom: 1px solid var(--border); }
.ap-hist-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ap-hist-accion { font-size: 13px; font-weight: 600; color: var(--text); }
.ap-hist-fecha { font-size: 11px; color: var(--text3); flex-shrink: 0; }
.ap-hist-det { font-size: 12px; color: var(--text2); margin-top: 2px; }
.ap-hist-user { font-size: 11px; color: var(--text3); margin-top: 2px; }

/* ══ PANTALLA DE OFICINA (s-ap-doc) ══ */
/* Sin bandas de sección: la jerarquía la dan las tarjetas. Arriba la identidad
   de la unidad, después el paso siguiente, y el contexto plegado abajo. */
.ap-doc-body { flex: 1; overflow-y: auto; padding: 14px 16px 28px; display: flex; flex-direction: column; gap: 14px; }

/* La pantalla de oficina en desktop: el trabajo a la izquierda, el contexto y
   el registro a la derecha. Debajo de 1100px se apila, que es como se ve en el
   celular y como se veía antes en todos lados. */
.ap-doc-cols { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: 14px; align-items: start; }
.ap-doc-col  { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (max-width: 1100px) { .ap-doc-cols { grid-template-columns: 1fr; } }

/* La identidad de la unidad vive en el topbar, no en el cuerpo: la barra ya
   estaba ahí y lo único que llevaba era un subtítulo gris. DNI y patentes son
   los datos que el de oficina vuelve a tipear en ALET, así que van en mono, se
   pueden seleccionar a mano (user-select:all) y traen su botón de copiar. El
   tipo de semi y el transporte son contexto: mismo renglón, otra tipografía. */
.tb-unidad { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 20px; margin-top: 6px; }
.tb-u { position: relative; display: inline-flex; align-items: baseline; gap: 7px; }
.tb-u + .tb-u::before {
  content: ''; position: absolute; left: -10px; top: 1px; bottom: 1px;
  width: 1px; background: rgba(255,255,255,.18);
}
.tb-u-lbl {
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--b300);
}
.tb-u-val {
  font-family: var(--mono); font-size: 14.5px; font-weight: 700;
  color: #fff; letter-spacing: .01em; user-select: all;
}
.tb-u-txt .tb-u-val { font-family: var(--font); font-size: 13px; font-weight: 600; color: #dbeafe; letter-spacing: 0; }
.tb-u-copia {
  width: 20px; height: 20px; padding: 0; margin-left: -2px; border-radius: 5px;
  border: 1px solid rgba(255,255,255,.22); background: transparent; color: rgba(255,255,255,.75);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .12s, background .12s; align-self: center;
}
.tb-u:hover .tb-u-copia { opacity: 1; }
.tb-u-copia:hover { background: rgba(255,255,255,.18); color: #fff; }
.tb-u-copia svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2; }
.tb-u-copia.ok { opacity: 1; background: #d1fae5; border-color: #d1fae5; color: #047857; }
/* En pantalla chica el botón no sirve (no hay hover): queda siempre visible */
@media (hover: none) { .tb-u-copia { opacity: 1; } }

/* El estado, al lado del nombre. El color lo pone ESTADOS_AP, el mismo que usa
   el tablero: si allá una unidad es violeta, acá también. */
.tb-estado {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: #fff; vertical-align: middle; margin-left: 8px;
}
.tb-estado::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; opacity: .85; }
/* En pantalla angosta el que se recorta es el nombre, nunca el estado: el chip
   sin su texto no dice nada. */
.topbar-title:has(.tb-estado) { display: flex; align-items: center; min-width: 0; }
.topbar-title:has(.tb-estado) > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-estado { flex: none; }

/* La carga: un renglón bajo el topbar con lo que la unidad viene a hacer.
   Separado a propósito de quién es la unidad, que está en el topbar. */
.ap-carga {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); padding: 11px 16px; box-shadow: var(--shadow-xs);
}
.ap-carga-grid { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 20px; }
.ap-u-campo { min-width: 0; }
.ap-u-lbl {
  display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text3); font-family: var(--mono);
}
.ap-u-val {
  display: block; margin-top: 2px; font-size: 13.5px; font-weight: 600; color: var(--text);
  line-height: 1.35; user-select: all; overflow-wrap: anywhere;
}
.ap-u-campo-mono .ap-u-val { font-family: var(--mono); font-size: 14.5px; font-weight: 700; }
.ap-u-vacio .ap-u-val { color: var(--text3); font-weight: 500; }
/* En el celular el renglón no entra: se apila y "Editar datos" baja al pie */
@media (max-width: 640px) {
  .ap-carga { flex-direction: column; align-items: flex-start; gap: 8px; }
  .ap-carga-grid { width: 100%; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
}

/* El paso siguiente: una tarjeta, un botón principal. El borde izquierdo dice
   de qué se trata sin tener que leer (gris espera, azul trabajo, rojo problema,
   verde listo/hecho). */
.ap-paso {
  border: 1px solid var(--border); border-left-width: 4px; border-radius: var(--radius-lg);
  background: var(--surface); padding: 14px 16px; box-shadow: var(--shadow-sm);
}
.ap-paso-tit { font-size: 15px; font-weight: 800; color: var(--text); }
.ap-paso-txt { font-size: 13px; color: var(--text2); line-height: 1.5; margin-top: 6px; }
.ap-paso-nota { font-size: 12px; font-weight: 600; color: var(--warn); margin-top: 8px; }
/* El desvío documental es un hecho verificado con el chofer presente, no un aviso */
.ap-paso-nota-bad { color: var(--bad); }
.ap-paso-btn {
  width: 100%; margin-top: 12px; padding: 13px 16px; border: none; border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--b600) 0%, var(--b700) 100%); color: #fff;
  font-family: var(--font); font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: var(--shadow-sm);
}
.ap-paso-btn:disabled { opacity: .6; cursor: default; }
.ap-paso-btn2 {
  width: 100%; margin-top: 8px; padding: 10px 14px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: transparent; color: var(--text2);
  font-family: var(--font); font-size: 13px; font-weight: 600; cursor: pointer;
}
.ap-paso-btn2:hover { border-color: var(--brd2); color: var(--text); }
/* Las acciones del paso van en fila: el principal al ancho de su texto y con
   ícono, los secundarios al lado con borde. Antes eran dos barras del ancho de
   la pantalla que sólo se distinguían por el color. */
.ap-paso-acc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.ap-paso-acc .ap-paso-btn {
  width: auto; margin-top: 0; display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; font-size: 14.5px;
}
.ap-paso-acc .ap-paso-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.ap-paso-acc .ap-paso-btn2 {
  width: auto; margin-top: 0; display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 15px; background: var(--surface);
}
.ap-paso-acc .ap-paso-btn2 svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }
/* En el celular vuelven a ser bloques a todo el ancho: ahí manda el pulgar */
@media (max-width: 640px) {
  .ap-paso-acc { flex-direction: column; align-items: stretch; }
  .ap-paso-acc .ap-paso-btn, .ap-paso-acc .ap-paso-btn2 { width: 100%; justify-content: center; }
}
.ap-paso-espera { border-left-color: var(--text3); }
.ap-paso-falta  { border-left-color: var(--b600); }
.ap-paso-danada { border-left-color: var(--bad); }
.ap-paso-danada .ap-paso-tit { color: var(--bad); }
.ap-paso-listo  { border-left-color: var(--ok); }
.ap-paso-ok     { border-left-color: var(--ok); background: var(--ok-l); }
.ap-paso-ok .ap-paso-tit { color: var(--ok); }

/* Tarjeta de contenido (resultado del A/P) */
.ap-card { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: 14px 16px; }
.ap-card-tit { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text3); margin-bottom: 10px; }
.ap-card-txt { font-size: 13px; color: var(--text2); }
.ap-card-link { margin-top: 10px; padding: 0; border: none; background: none; color: var(--b600); font-family: var(--font); font-size: 13px; font-weight: 600; cursor: pointer; }
.ap-card-link:hover { text-decoration: underline; }

/* Plegables: datos de contexto, historial y desvíos leves */
.ap-fold { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.ap-fold > summary {
  list-style: none; cursor: pointer; padding: 12px 14px; font-size: 13px; font-weight: 600;
  color: var(--text2); display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.ap-fold > summary::-webkit-details-marker { display: none; }
.ap-fold > summary::after { content: '▾'; color: var(--text3); font-size: 12px; transition: transform .15s; }
.ap-fold[open] > summary::after { transform: rotate(180deg); }
.ap-fold-body { padding: 0 14px 14px; }
/* El de los leves va suelto adentro de la tarjeta, sin caja propia */
.ap-fold-inline { border: none; background: none; margin-top: 4px; }
.ap-fold-inline > summary { padding: 6px 0; font-size: 12.5px; color: var(--warn); }
.ap-fold-inline .ap-fold-body { padding: 0; }

/* ══ FOTOS DE RESPALDO DEL A/P ══ */
/* Sin miniaturas a propósito: son respaldo por si las piden, no evidencia que
   haya que mirar en cada control. */
.ap-foto-fila { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.ap-foto-nom { font-size: 13px; font-weight: 600; color: var(--text); }
.ap-foto-fecha { flex: 1; font-size: 11px; color: var(--text3); }
.ap-foto-accion {
  margin-left: auto; padding: 5px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text2); font-family: var(--font); font-size: 12px; font-weight: 600; cursor: pointer;
}
.ap-foto-accion + .ap-foto-accion { margin-left: 0; }
.ap-foto-accion:hover { border-color: var(--brd2); color: var(--text); }
.ap-foto-quitar:hover { border-color: var(--bad); color: var(--bad); }
.ap-foto-add {
  width: 100%; margin-top: 10px; padding: 12px 16px; border: 1px dashed var(--brd2);
  border-radius: var(--radius-sm); background: var(--s2); color: var(--text2);
  font-family: var(--font); font-size: 14px; font-weight: 600; cursor: pointer;
}
.ap-foto-add:hover { border-color: var(--b400); color: var(--text); }
.ap-foto-hint { font-size: 11.5px; color: var(--text3); margin-top: 8px; line-height: 1.45; }

/* La autorización de DOW no compite con habilitar: enlace chico al pie */
.ap-link-aut {
  display: block; margin: 16px auto 0; padding: 6px 10px; border: none; background: none;
  color: var(--text3); font-family: var(--font); font-size: 12px; cursor: pointer; text-decoration: underline;
}
.ap-link-aut:hover { color: var(--warn); }

/* El cierre negativo. Mismo peso visual que "Autorizado": las dos son
   decisiones excepcionales, no pasos del circuito. */
.ap-link-rech {
  display: block; margin: 8px auto 0; padding: 6px 10px; border: none; background: none;
  color: var(--text3); font-family: var(--font); font-size: 12px; cursor: pointer; text-decoration: underline;
}
.ap-link-rech:hover { color: var(--bad); }

/* Nota del cierre de circuito en ALET, bajo las acciones de oficina */
.ap-alet-nota { font-size: 11.5px; color: var(--text3); text-align: center; margin-top: 8px; line-height: 1.4; }

/* Aviso de archivado: mantenimiento, no trabajo del día. Discreto a propósito. */
.ap-archivo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border: 1px dashed var(--border); border-radius: var(--radius);
  padding: 10px 14px; margin-bottom: 12px; background: var(--surface);
}
.ap-archivo-txt { font-size: 12.5px; color: var(--text2); line-height: 1.45; }
/* El rango de fechas del respaldo. Va antes del botón y se baja de renglón
   solo en pantalla angosta, que es donde el flex-wrap del contenedor actúa. */
.ap-archivo-rango { display: flex; gap: 6px; }
.ap-archivo-rango input {
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
  color: var(--text2); font-family: var(--font); font-size: 12px; padding: 5px 8px;
}
.ap-archivo-sub { display: block; font-size: 11.5px; color: var(--text3); }
.ap-archivo-btn {
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: none;
  color: var(--text2); font-family: var(--font); font-size: 12px; padding: 6px 14px; cursor: pointer;
}
.ap-archivo-btn:hover:not(:disabled) { border-color: var(--text3); color: var(--text); }
.ap-archivo-btn:disabled { opacity: .6; cursor: default; }
/* Cuantos informes se lleva el rango elegido. Debajo de la tarjeta y en chico:
   es una confirmacion antes de apretar, no un titulo. */
.ap-archivo-cuantas { font-size: 12px; color: var(--text3); margin: -4px 0 12px 2px; }

/* Importación de preingresos */
.pre-textarea { font-family: var(--mono); font-size: 12px; line-height: 1.4; resize: vertical; white-space: pre; overflow-x: auto; }
.pre-ayuda { font-size: 11.5px; color: var(--text3); margin-top: 8px; line-height: 1.45; }
.pre-resumen { font-size: 13px; color: var(--text2); padding: 10px 0; }
.pre-dim { color: var(--text3); }
.pre-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.pre-row-main { flex: 1; min-width: 0; }
.pre-row-sub { font-size: 12px; color: var(--text2); margin-top: 3px; }
.pre-descartes { font-size: 11.5px; color: var(--text3); padding: 10px 0; line-height: 1.5; }
/* Con qué estado entra cada fila: se ve antes de importar, no después */
.pre-estado { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }

.ap-match { font-size: 12px; margin-top: 6px; min-height: 16px; }
.ap-match-ok { color: var(--ok); font-weight: 600; }
.ap-match-no { color: var(--text3); }
#s-ver.active { display: block; overflow-y: auto; }

/* TOPBAR */
.topbar {
  background: linear-gradient(180deg, #103c70 0%, var(--b700) 100%);
  border-bottom: 1px solid rgba(255,255,255,.04);
  box-shadow: var(--shadow-sm);
  padding: 14px 16px; display: flex; align-items: center; gap: 10px;
  flex-shrink: 0; position: sticky; top: 0; z-index: 10;
}
.topbar-back {
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.2);
  background: transparent; color: rgba(255,255,255,0.8);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}
.topbar-info { flex: 1; min-width: 0; }
.topbar-title { font-size: 15px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-sub { font-size: 11px; color: var(--b300); margin-top: 1px; }
.icon-btn {
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.2);
  background: transparent; color: rgba(255,255,255,0.8);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}

/* HOME TOPBAR */
/* ══ ZONA DE MARCA (hero de bienvenida → barra de trabajo) ══
   El logo animado se ve al ENTRAR y después se retrae. El espacio de arriba es
   el recurso más caro de la pantalla de inicio: la identidad se paga una vez,
   y lo que queda fijo ya es de trabajo (búsqueda + actualizar). */
.brand-zone {
  flex-shrink: 0; color: #fff; overflow: hidden; position: relative;
  background: radial-gradient(ellipse 80% 80% at 80% 0%, rgba(74,144,226,.15), transparent),
              linear-gradient(180deg, #103c70 0%, var(--b700) 100%);
  box-shadow: var(--shadow-sm);
}
/* El colapso es con grid-template-rows 1fr→0fr: anima el alto sin conocerlo */
.brand-hero {
  display: grid; grid-template-rows: 1fr; padding: 28px 24px 32px;
  transition: grid-template-rows .55s cubic-bezier(.4,0,.2,1), padding .55s cubic-bezier(.4,0,.2,1), opacity .4s ease;
}
.brand-hero-inner { overflow: hidden; min-height: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.brand-zone.collapsed .brand-hero { grid-template-rows: 0fr; padding-top: 0; padding-bottom: 0; opacity: 0; }

.logo-wrap { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; }
.logo-wrap img { max-width: 220px; width: 100%; height: auto; display: block; animation: logoFade .8s ease forwards; }
@keyframes logoFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.logo-bar { position: relative; align-self: stretch; height: 2.5px; width: 0; border-radius: 3px; background: var(--b400); transform-origin: center; animation: logoBar .7s cubic-bezier(.3,.7,.2,1) .55s forwards; }
@keyframes logoBar { to { width: 100%; } }
.logo-bar::after { content: ''; position: absolute; right: -4px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: var(--b400); opacity: 0; animation: logoDot .3s ease 1.25s forwards; }
@keyframes logoDot { to { opacity: 1; } }
.home-title { font-size: 20px; font-weight: 600; color: #fff; margin-bottom: 4px; margin-top: 6px; }
.hero-caption { font-size: 10px; font-weight: 700; letter-spacing: .14em; color: var(--b300); text-transform: uppercase; }

.brand-bar { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .55s .08s cubic-bezier(.4,0,.2,1), opacity .45s .12s ease; }
.brand-zone.collapsed .brand-bar { grid-template-rows: 1fr; opacity: 1; }
.brand-bar-inner { overflow: hidden; min-height: 0; display: flex; align-items: center; gap: 10px; padding: 0 14px; }
.brand-zone.collapsed .brand-bar-inner { padding: 10px 14px; }
.bar-menu-btn { width: 34px; height: 34px; border-radius: 9px; border: none; background: rgba(255,255,255,.1); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.bar-menu-btn:hover { background: rgba(255,255,255,.2); }
.bar-logo { display: flex; align-items: center; flex-shrink: 0; }
.bar-logo img { height: 22px; width: auto; display: block; animation: driveIn .85s cubic-bezier(.22,.85,.28,1) both; }
@keyframes driveIn { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: translateX(0); } }
.bar-logo-text { font-size: 12.5px; font-weight: 700; color: #fff; white-space: nowrap; line-height: 1.15; }
.bar-logo-text small { display: block; font-size: 8.5px; font-weight: 700; letter-spacing: .1em; color: var(--b300); }
.bar-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 8px 14px; }
.bar-search:focus-within { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.3); }
.bar-search svg { width: 16px; height: 16px; color: var(--b200); flex-shrink: 0; }
.bar-search input { flex: 1; min-width: 0; border: none; background: transparent; outline: none; color: #fff; font-size: 13.5px; font-family: var(--font); }
.bar-search input::placeholder { color: #a9c3e6; }
.bar-search input::-webkit-search-cancel-button { filter: invert(1); opacity: .5; }
.bar-refresh { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.bar-refresh:hover { background: rgba(255,255,255,.18); }
.bar-refresh svg { width: 16px; height: 16px; }
.bar-refresh.spinning svg { animation: barSpin 1s linear infinite; }
@keyframes barSpin { to { transform: rotate(360deg); } }

.auth-role-text { color: rgba(255,255,255,.75); font-weight: 400; }
.auth-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bad); flex-shrink: 0; transition: background .3s; }
.auth-dot.connected { background: #4caf50; box-shadow: 0 0 0 3px rgba(76,175,80,.25); }
.auth-text { font-size: 12px; color: rgba(255,255,255,.85); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.theme-toggle { width: 32px; height: 32px; border: none; border-radius: 8px; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.theme-toggle:hover { background: rgba(255,255,255,.22); }
.theme-toggle svg { width: 16px; height: 16px; stroke: currentColor; }

@media (prefers-reduced-motion: reduce) { .logo-wrap img, .logo-bar, .logo-bar::after { animation: none; } .logo-wrap img { opacity: 1; } .logo-bar { width: 100%; } .logo-bar::after { opacity: 1; } }

/* SECTION CARDS */
/* flex:1 + overflow: .screen es overflow:hidden, sin esto la última tarjeta
   (Transportes) queda cortada abajo en pantallas de celular */
.section-cards { padding: 20px 16px; display: flex; flex-direction: column; gap: 14px; flex: 1; min-height: 0; overflow-y: auto; }
.sec-card {
  background: var(--surf); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; cursor: pointer; display: flex; align-items: center; gap: 16px;
  transition: all .15s; position: relative; overflow: hidden;
  flex-shrink: 0; /* dentro del contenedor scrolleable no deben comprimirse */
  box-shadow: var(--shadow-xs);
}
.sec-card:hover { box-shadow: var(--shadow); border-color: var(--brd2); }
.sec-card:active { transform: scale(0.98); }
.sec-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.sec-card-chofer::before { background: #3b82f6; }
.sec-card-tractor::before { background: #22c55e; }
.sec-card-semi::before { background: #f59e0b; }
.sec-card-transporte::before { background: #a78bfa; }
.sec-icon { width: 48px; height: 48px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sec-icon-chofer { background: var(--info-l); }
.sec-icon-tractor { background: var(--ok-l); }
.sec-icon-semi { background: var(--warn-l); }
.sec-icon-transporte { background: #ede9fe; }
.sec-info { flex: 1; }
.sec-title { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.sec-count { font-size: 11px; font-family: var(--mono); padding: 3px 8px; border-radius: 20px; margin-top: 6px; display: inline-block; }
.sec-count-chofer { background: var(--info-l); color: var(--info); }
.sec-count-tractor { background: var(--ok-l); color: var(--ok); }
.sec-count-semi { background: var(--warn-l); color: var(--warn); }
.sec-count-transporte { background: #ede9fe; color: #6d28d9; }

/* SEARCH */
.search-wrap { position: relative; }
.search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text3); }
.search-input {
  width: 100%; padding: 11px 14px 11px 38px;
  background: var(--s2); border: 1px solid var(--border); border-radius: var(--radius);
  font-family: var(--font); font-size: 14px; color: var(--text);
  outline: none; transition: border-color .2s;
}
.search-input::placeholder { color: var(--text3); }
.search-input:focus { border-color: var(--b500); box-shadow: 0 0 0 3px rgba(37,99,235,.15); }

/* LISTS */
.list-header { padding: 12px 16px 6px; font-size: 10px; font-weight: 600; color: var(--text3); letter-spacing: 1.2px; text-transform: uppercase; font-family: var(--mono); flex-shrink: 0; background: var(--s2); border-bottom: 1px solid var(--border); }

.entity-row { padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; cursor: pointer; transition: background .15s; background: var(--surf); }
.entity-row:hover { background: var(--s2); }
.entity-row:active { background: var(--s3); }

.avatar { width: 42px; height: 42px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; font-family: var(--mono); flex-shrink: 0; }
.av-blue { background: var(--info-l); color: var(--info); }
.av-green { background: var(--ok-l); color: var(--ok); }
.av-amber { background: var(--warn-l); color: var(--warn); }
.av-purple { background: #ede9fe; color: #6d28d9; }
.av-bad { background: var(--bad-l); color: var(--bad); }
.row-info { flex: 1; min-width: 0; }
.row-name { font-size: 14px; font-weight: 500; color: var(--text); }
.row-sub { font-size: 11px; color: var(--text2); margin-top: 2px; }

/* BADGES */
.badge { font-size: 10px; padding: 3px 9px; border-radius: 20px; font-weight: 600; font-family: var(--mono); }
.badge-ok {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 9999px;
  background: var(--ok-l); color: var(--ok);
  font-size: 10px; font-weight: 500;
}
.badge-ok::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--ok); }
.badge-bad {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 9999px;
  background: var(--bad-l); color: var(--bad);
  font-size: 10px; font-weight: 500;
}
.badge-bad::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--bad); }
.badge-warn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 9999px;
  background: var(--warn-l); color: var(--warn);
  font-size: 10px; font-weight: 500;
}
.badge-warn::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--warn); }

/* FAB */
.fab {
  position: fixed; bottom: 24px; right: max(calc(50vw - 240px + 16px),16px);
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--b700); border: none; color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 4px 20px rgba(15,52,96,0.35); z-index: 20;
}
.fab:active { transform: scale(0.95); }

/* Alta desde el topbar: el par del FAB para desktop. Se excluyen mutuamente
   (ver el media query de ≥768px), nunca se ven los dos a la vez. */
.topbar-add {
  display: none; align-items: center; gap: 6px; flex-shrink: 0;
  padding: 7px 13px; margin-right: 4px;
  border: 1px solid rgba(255,255,255,.28); border-radius: var(--radius-sm);
  background: rgba(255,255,255,.12); color: #fff;
  font-family: var(--font); font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: background .12s;
}
.topbar-add:hover { background: rgba(255,255,255,.22); }
.topbar-add:active { transform: scale(.97); }

/* DOC SECTIONS */
.doc-section-title { padding: 10px 16px 6px; font-size: 10px; font-weight: 600; color: var(--text3); letter-spacing: 1.2px; text-transform: uppercase; font-family: var(--mono); background: var(--s2); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.doc-card { padding: 14px 16px; border-bottom: 1px solid var(--border); background: var(--surf); }
.doc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.doc-left { display: flex; align-items: center; gap: 8px; }
.doc-name { font-size: 13px; font-weight: 600; color: var(--text); }
.doc-file { font-size: 10px; color: var(--text3); margin-left: 17px; font-family: var(--mono); margin-top: 2px; }
.doc-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.btn-sm {
  display: flex; align-items: center; gap: 5px;
  padding: 7px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--s2);
  font-size: 11px; font-weight: 500; color: var(--text2);
  cursor: pointer; font-family: var(--font); transition: all .15s;
}
.btn-sm:active { background: var(--s3); }
.btn-sm-accent { border-color: rgba(37,99,235,0.3); background: var(--info-l); color: var(--info); }
.btn-optional {
  display: flex; align-items: center; gap: 8px;
  margin: 12px 16px; padding: 10px 14px;
  border-radius: var(--radius);
  border: 1px dashed var(--border); background: transparent;
  font-size: 12px; color: var(--text3); cursor: pointer;
  font-family: var(--font); width: calc(100% - 32px); transition: all .15s;
}
.btn-optional:active { background: var(--s2); }

/* DOC GROUP (card desplegable, p.ej. Capacitaciones) */
.doc-group { border-bottom: 1px solid var(--border); }
.doc-group-head {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 14px 16px; background: var(--surf);
  border: none; cursor: pointer; font-family: var(--font); text-align: left;
}
.doc-group-head:active { background: var(--s2); }
.doc-group-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text); }
.doc-group-meta { display: flex; align-items: center; gap: 10px; }
.doc-group-count { font-size: 10px; font-family: var(--mono); color: var(--text3); background: var(--s2); padding: 2px 8px; border-radius: 999px; }
.doc-group-chevron { color: var(--text3); transition: transform .18s ease; }
.doc-group-chevron.open { transform: rotate(180deg); }
.doc-group-body { background: var(--s2); }
.doc-group-body .doc-card { background: transparent; }
.doc-group-body .btn-optional { margin: 12px 16px; }
.dot-empty { background: var(--border2, var(--border)); }
html:not(.light) .doc-group-head { background: #1e293b; }
html:not(.light) .doc-group-body { background: #162032; }

/* CAMERA / SCAN */
.cam-options { display: flex; gap: 8px; padding: 14px 16px 10px; }
.btn-option {
  flex: 1; padding: 10px 8px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--s2);
  font-size: 12px; font-weight: 500; color: var(--text2);
  cursor: pointer; font-family: var(--font);
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: all .15s;
}
.btn-option.selected { border-color: var(--b500); background: var(--info-l); color: var(--info); }
.scan-area { margin: 0 16px 12px; border-radius: var(--radius); border: 1px dashed var(--border); background: var(--bg2); overflow: hidden; }
.cam-placeholder { height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
.cam-hint { font-size: 12px; color: var(--text3); }
.pages-label { padding: 0 16px 4px; font-size: 10px; font-weight: 600; color: var(--text3); letter-spacing: 1px; text-transform: uppercase; font-family: var(--mono); }
.pages-strip { padding: 0 16px 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.page-thumb { width: 56px; height: 70px; border-radius: var(--radius-sm); border: 1px solid var(--border); overflow: hidden; }
.page-thumb img { width: 100%; height: 100%; object-fit: cover; }
.page-add { width: 56px; height: 70px; border-radius: var(--radius-sm); border: 1px dashed var(--border); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 22px; color: var(--text3); }
.page-add:active { background: var(--s2); }

/* OCR */
.ocr-box { margin: 0 16px 14px; background: var(--bg2); border-radius: var(--radius); border: 1px solid var(--border); padding: 14px; }
.ocr-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; }
.ocr-row + .ocr-row { border-top: 1px solid var(--border); }
.ocr-label { font-size: 11px; color: var(--text2); }
.ocr-val { font-size: 12px; font-weight: 600; color: var(--text); font-family: var(--mono); text-align: right; max-width: 200px; word-break: break-all; }
.ocr-chip { font-size: 10px; padding: 2px 8px; border-radius: 20px; background: var(--ok-l); color: var(--ok); font-weight: 600; }
.ocr-chip-wait { background: var(--warn-l); color: var(--warn); }
/* Acotada a .ocr-box a propósito: es el campo de fecha del escáner de docs, y
   con el selector suelto pisaba al input del modal de patente (mismo nombre,
   componentes distintos), que quedaba chico y alineado a la derecha. */
.ocr-box .ocr-input { background: transparent; border: none; border-bottom: 1px solid var(--border); font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--text); outline: none; width: 140px; text-align: right; padding: 2px 4px; }

/* PRIMARY BUTTON */
.btn-primary {
  margin: 0 16px 16px; width: calc(100% - 32px); padding: 14px;
  background: var(--b700); color: #fff; border: none; border-radius: var(--radius);
  font-size: 14px; font-weight: 600; cursor: pointer; font-family: var(--font);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: all .2s;
}
.btn-primary:active { background: var(--b600); transform: scale(0.98); }
.btn-primary:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

/* FORMS */
.form-section { padding: 16px; border-bottom: 1px solid var(--border); }
.form-label { font-size: 10px; font-weight: 600; color: var(--text3); letter-spacing: 1px; text-transform: uppercase; font-family: var(--mono); margin-bottom: 10px; }
.form-input {
  width: 100%; padding: 10px 14px;
  background: var(--s2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-family: var(--font); font-size: 14px; color: var(--text);
  outline: none; transition: border-color .2s; margin-bottom: 10px;
}
.form-input:last-child { margin-bottom: 0; }
.form-input:focus { border-color: var(--b500); box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
.form-input::placeholder { color: var(--text3); }

/* ── Formulario de ingreso de la unidad ──────────────────────────────────────
   Son diez campos y se scrolleaba todo el tiempo. Acá el ritmo vertical se
   comprime (padding y separación de la etiqueta) y los campos cortos van de a
   dos por renglón. Va acotado a .ap-form: los formularios de documentación
   siguen como estaban. El VALOR cargado va en negrita — es el dato, la
   etiqueta es solo referencia. */
.ap-form .form-section { padding: 10px 16px; border-bottom: none; }
.ap-form .form-label { margin-bottom: 5px; }
.ap-form .form-input { margin-bottom: 0; font-weight: 700; }
.ap-form select.form-input { font-weight: 700; }
/* El renglón del match reservaba su alto aunque estuviera vacío, en los cuatro
   campos que lo tienen */
.ap-form .ap-match { margin-top: 5px; min-height: 0; }
.ap-form .ap-match:empty { display: none; }
.ap-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.ap-form-row .form-section { min-width: 0; }

/* EMPTY STATE */
.empty-state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 40px 20px; color: var(--text3); }
.empty-state p { font-size: 14px; text-align: center; line-height: 1.6; }

/* STATUS DOTS */
.status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dot-ok { background: var(--ok); }
.dot-bad { background: var(--bad); }

/* SPINNER */
.spinner { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; flex-shrink: 0; }
@keyframes spin { to { transform: rotate(360deg); } }

/* TOAST */
.toast {
  position: fixed; bottom: 88px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: #0f172a; border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius); padding: 10px 18px;
  font-size: 13px; color: #f1f5f9;
  opacity: 0; transition: all .3s; z-index: 100;
  white-space: nowrap; pointer-events: none; max-width: 90vw; text-align: center;
  box-shadow: var(--shadow-lg);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* SCROLLBAR */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: var(--brd2); border-radius: 2px; }

/* IMAGE EDITOR */
.crop-point {
  position: absolute; width: 28px; height: 28px; border-radius: 50%;
  background: var(--b500); border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  transform: translate(-50%,-50%); cursor: grab; z-index: 10;
  touch-action: none;
}
.crop-point:active { cursor: grabbing; transform: translate(-50%,-50%) scale(1.2); }
.filter-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--s2);
  font-size: 11px; color: var(--text2); cursor: pointer;
  font-family: var(--font); white-space: nowrap; min-width: 72px;
  transition: all .15s;
}
.filter-btn.selected { border-color: var(--b500); background: var(--info-l); color: var(--info); }
.filter-preview { width: 40px; height: 28px; border-radius: 4px; border: 1px solid var(--border); }

/* RESUME / VER SCREEN */
.ver-header { padding: 20px 16px 16px; background: linear-gradient(180deg, #103c70 0%, var(--b700) 100%); position: sticky; top: 0; z-index: 5; }
.ver-entity-name { font-size: 20px; font-weight: 600; color: #fff; margin-bottom: 2px; }
.ver-entity-sub { font-size: 12px; color: var(--b300); font-family: var(--mono); }
.ver-status { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 5px 12px; border-radius: 20px; font-size: 13px; font-weight: 600; }
.ver-status-ok { background: var(--ok-l); color: var(--ok); }
.ver-status-bad { background: var(--bad-l); color: var(--bad); }
.ver-doc { border-bottom: 1px solid var(--border); background: var(--surf); }
.ver-doc-header { padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.ver-doc-name { font-size: 14px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; }
.ver-preview { width: 100%; max-height: 500px; object-fit: contain; background: var(--bg); display: block; }
.ver-doc-actions { padding: 10px 16px 14px; display: flex; gap: 8px; }
.ver-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--s2);
  font-size: 12px; color: var(--text2);
  cursor: pointer; text-decoration: none; font-family: var(--font);
}
.ver-btn-accent { border-color: rgba(37,99,235,0.3); background: var(--info-l); color: var(--info); }
.ver-no-doc { padding: 12px 16px 16px; font-size: 12px; color: var(--text3); font-style: italic; }
/* Documento heredado de la nómina del transporte: hay que ver de un vistazo que
   se está mirando una nómina y no una ART individual */
.doc-inherit, .ver-doc-origen {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--text3); font-style: italic;
}
.doc-inherit { padding: 0 16px 2px; margin-top: -4px; }
.ver-doc-origen { padding: 0 16px 10px; margin-top: -6px; }
.doc-inherit::before, .ver-doc-origen::before {
  content: ''; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); opacity: .55;
}
/* Confirmado = alguien verificó que el chofer figura en esa nómina.
   Sin confirmar = el transporte tiene nómina, pero nadie lo buscó todavía. */
.doc-inherit.ok::before, .ver-doc-origen.ok::before { background: var(--ok); opacity: .9; }
.doc-inherit.pend, .ver-doc-origen.pend { color: var(--warn); font-style: normal; font-weight: 600; }
.doc-inherit.pend::before, .ver-doc-origen.pend::before { background: var(--warn); opacity: .9; }
.ver-img-wrap { position: relative; cursor: zoom-in; }
.ver-zoom-icon { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; background: rgba(0,0,0,0.5); border-radius: 50%; display: flex; align-items: center; justify-content: center; }

/* LIGHTBOX */
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.92); z-index: 300; display: none; align-items: center; justify-content: center; }
.lightbox.open { display: flex; }
/* --lb-bot lo calcula _lbLayout(): alto real de las barras flotantes de abajo */
.lightbox-viewport { position: absolute; inset: 0; bottom: var(--lb-bot, 84px); overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 0 16px; cursor: grab; touch-action: none; }
.lightbox-viewport.panning { cursor: grabbing; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; transform-origin: 0 0; will-change: transform; user-select: none; -webkit-user-drag: none; }
/* Recorte nítido de la zona visible (lbRenderTile): va encima del <img>, sin robarle el arrastre */
#lb-tile { position: absolute; pointer-events: none; z-index: 1; }
.lightbox-close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.15); border: none; color: #fff; font-size: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; }
.lightbox-controls { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; background: rgba(0,0,0,0.55); backdrop-filter: blur(6px); padding: 6px 10px; border-radius: 999px; z-index: 2; }
.lightbox-controls button { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.15); border: none; color: #fff; font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.lightbox-controls button:hover { background: rgba(255,255,255,0.28); }
.lightbox-controls span { color: #fff; font-size: 12px; font-family: var(--mono, monospace); min-width: 46px; text-align: center; }
/* Barra de PDF: paginado + buscador. Deja libre la esquina de la ✕ (right: 68px). */
.lightbox-topbar {
  position: absolute; top: 16px; left: 16px; right: 68px; z-index: 3;
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
}
.lb-pager, .lb-find {
  display: flex; align-items: center; gap: 4px;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(6px);
  padding: 5px 8px; border-radius: 999px; color: #fff;
}
.lightbox-topbar button {
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%;
  background: rgba(255,255,255,0.15); border: none; color: #fff;
  font-size: 18px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.lightbox-topbar button:hover { background: rgba(255,255,255,0.28); }
.lightbox-topbar button:disabled { opacity: .35; cursor: default; }
#lb-page-label { font-size: 12px; font-family: var(--mono, monospace); min-width: 54px; text-align: center; }
.lb-find { flex: 1 1 180px; min-width: 0; padding-left: 12px; }
.lb-find svg { flex: 0 0 auto; opacity: .7; }
.lb-find input {
  flex: 1 1 auto; min-width: 0; background: transparent; border: none; outline: none;
  color: #fff; font-family: var(--font); font-size: 13px; padding: 4px 2px;
}
.lb-find input::placeholder { color: rgba(255,255,255,0.5); }
.lb-find-info { font-size: 11px; font-family: var(--mono, monospace); color: rgba(255,255,255,0.85); white-space: nowrap; }
/* Barra de verificación en la nómina: abajo de todo. Los controles de zoom se
   apoyan encima y el área de la imagen termina arriba de ambos (ver _lbLayout). */
.lb-verif {
  position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 4;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  background: rgba(0,0,0,0.72); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius);
  padding: 10px 14px; color: #fff;
}
.lb-verif-title { font-size: 13px; font-weight: 600; }
.lb-verif-sub { font-size: 11.5px; color: rgba(255,255,255,0.7); margin-top: 2px; }
.lb-verif-pag { font-size: 11px; color: rgba(255,255,255,0.55); margin-top: 4px; }
.lb-verif-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.lb-verif button {
  padding: 9px 14px; border-radius: var(--radius-sm); border: none;
  font-family: var(--font); font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.lb-verif-no { background: rgba(255,255,255,0.15); color: #fff; }
.lb-verif-no:hover { background: rgba(255,255,255,0.26); }
.lb-verif-add { background: rgba(255,255,255,0.15); color: #fff; }
.lb-verif-add:hover { background: rgba(255,255,255,0.26); }
.lb-verif-si { background: var(--accent); color: #fff; }
.lb-verif-si:disabled { opacity: .4; cursor: default; }
@media (max-width: 520px) {
  .lb-verif { left: 10px; right: 10px; bottom: 10px; padding: 10px; }
  .lb-verif-actions { width: 100%; }
  .lb-verif-actions button { flex: 1; }
}

/* En modo PDF la barra ocupa el tope: bajamos el área de la imagen para no taparla */
.lightbox.doc-mode .lightbox-viewport { top: 62px; }
@media (max-width: 520px) {
  .lightbox-topbar { left: 10px; right: 58px; top: 10px; gap: 6px; }
  .lb-find { flex-basis: 100%; }
  .lightbox.doc-mode .lightbox-viewport { top: 100px; }
}

/* LOGIN */
#login-wall { position: fixed; inset: 0; background: #eef2f7; z-index: 999; display: flex; flex-direction: column; }
#login-wall.hidden { display: none; }
.login-topbar { background: linear-gradient(180deg, #103c70 0%, var(--b700) 100%); box-shadow: var(--shadow-sm); padding: 14px 28px; flex-shrink: 0; display: flex; align-items: center; }
.login-topbar-title { font-size: 16px; font-weight: 500; color: #fff; }
.login-topbar-title strong { color: var(--b400); font-weight: 700; }
.login-center { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.login-card { width: 100%; max-width: 420px; background: #fff; border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 4px 32px rgba(15,52,96,.10); padding: 40px 36px 36px; }
.login-icon { width: 56px; height: 56px; background: var(--b100); border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.login-title { font-size: 26px; font-weight: 700; color: var(--b700); margin-bottom: 8px; }
.login-sub { font-size: 14px; color: var(--text2); line-height: 1.5; margin-bottom: 28px; }
.login-field { margin-bottom: 18px; }
.login-label { font-size: 13px; font-weight: 500; color: var(--text); margin-bottom: 6px; display: block; }
.login-input { width: 100%; padding: 12px 14px; background: var(--s2); border: 1.5px solid var(--border); border-radius: var(--radius); font-family: var(--font); font-size: 15px; color: var(--text); outline: none; transition: border-color .2s; }
.login-input:focus { border-color: var(--b500); box-shadow: 0 0 0 3px rgba(37,99,235,.12); background: #fff; }
.login-input::placeholder { color: var(--text3); }
.login-btn { width: 100%; padding: 14px; background: #0d3d8a; color: #fff; border: none; border-radius: var(--radius); font-size: 15px; font-weight: 600; cursor: pointer; font-family: var(--font); transition: background .15s; margin-top: 6px; }
.login-btn:hover { background: var(--b600); }
.login-btn:active { transform: scale(0.98); }
.login-error { font-size: 13px; color: var(--bad); margin-top: 14px; min-height: 18px; }
.login-shake { animation: shake .4s ease; }
@keyframes shake { 0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)} }

/* DESKTOP */
@media (min-width: 768px) {
  #app { max-width: 100%; flex: 1; }
  .brand-hero { padding: 48px 40px 36px; }
  .brand-zone.collapsed .brand-bar-inner { padding: 10px 24px; }
  .logo-wrap img { max-width: 280px; }
  /* La hamburguesa de la barra es solo de mobile: acá el sidebar está fijo */
  .bar-menu-btn { display: none; }

  /* Sidebar fija: sale del modo drawer, pasa a ser una columna más del layout */
  .app-sidebar { position: static; transform: none; box-shadow: none; width: 260px; max-width: none; transition: width .2s ease; }
  .sidebar-overlay, .sidebar-toggle { display: none; }
  .sidebar-brand { display: flex; }

  /* Colapsado: queda un riel de íconos. No se esconde la navegación entera
     (antes desaparecía y quedaba una franja azul vacía): se van las etiquetas,
     los contadores y el usuario, y los íconos siguen llevando a cada lado. */
  .app-layout.sb-off .app-sidebar { width: 68px; }
  .app-layout.sb-off .sidebar-brand { padding: 16px 8px; justify-content: center; }
  .app-layout.sb-off .sidebar-brand-txt,
  .app-layout.sb-off .nav-txt,
  .app-layout.sb-off .nav-meta,
  .app-layout.sb-off .nav-chev,
  .app-layout.sb-off .nav-children { display: none; }
  .app-layout.sb-off .sidebar-collapse { margin-left: 0; }
  .app-layout.sb-off .nav-link,
  .app-layout.sb-off .nav-group-btn { justify-content: center; padding: 10px 0; }

  .sec-icon { width: 44px; height: 44px; }
  .list-header, .doc-section-title { padding-left: 24px; padding-right: 24px; }
  .entity-row { padding-left: 24px; padding-right: 24px; }
  .doc-card { padding-left: 24px; padding-right: 24px; }
  .topbar { padding-left: 24px; padding-right: 24px; }
  /* Con mouse, el botón flotante abajo a la derecha queda lejos de la lista y
     del título: el alta pasa al topbar, donde se está mirando. */
  .fab { display: none; }
  .topbar-add { display: inline-flex; }
}

/* DOWNLOAD ZIP */
.btn-download-zip {
  display: flex; align-items: center; gap: 8px;
  margin: 12px 16px; padding: 11px 16px;
  border-radius: var(--radius);
  background: var(--b700); color: #fff;
  font-size: 13px; font-weight: 600;
  border: none; cursor: pointer;
  width: calc(100% - 32px);
  transition: background .15s;
}
.btn-download-zip:hover { background: var(--b600); }

/* ══════════════ ESTADO "PRÓXIMO A VENCER" ══════════════ */
.dot-warn { background: var(--warn); }
.ver-status-warn { background: var(--warn-l); color: var(--warn); }

/* HOME — sub-línea de vencimientos por sección */
.sec-vto-line { margin-top: 6px; font-size: 10px; font-family: var(--mono); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.vto-bad  { color: var(--bad);  font-weight: 600; }
.vto-warn { color: var(--warn); font-weight: 600; }
.vto-ok   { color: var(--text3); }
.vto-sep  { color: var(--text3); }

/* LIST — chips de filtro */
.list-filters { display: flex; gap: 8px; margin-top: 10px; }
.lf-chip { padding: 6px 14px; border-radius: 20px; border: 1px solid var(--border); background: var(--s2); color: var(--text2); font-size: 12px; font-weight: 500; font-family: var(--font); cursor: pointer; transition: all .15s; }
.lf-chip:hover { border-color: var(--brd2); }
.lf-chip.active { background: var(--b700); border-color: var(--b700); color: #fff; }

/* ══════════════ DARK MODE ══════════════ */
html:not(.light) {
  --bg:      #0f172a;
  --bg2:     #1e293b;
  --bg3:     #162032;
  --bg4:     #1a2a3d;
  --surf:    #1e293b;
  --s2:      #162032;
  --s3:      #1a2a3d;
  --surface: #1e293b;
  --text:    #f1f5f9;
  --text2:   #94a3b8;
  --text3:   #64748b;
  --border:  #334155;
  --brd2:    #475569;
  --ok-l:    #064e3b;
  --warn-l:  #451a03;
  --bad-l:   #450a0a;
  --info-l:  #1e3a5f;
  --shadow-xs: 0 1px 2px rgba(0,0,0,.3);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
  --shadow:    0 4px 12px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.3);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.5);
}
html:not(.light) #login-wall { background: #0a1225; }
html:not(.light) .login-card { background: #1e293b; border-color: #334155; }
html:not(.light) .login-title { color: #e2e8f0; }
html:not(.light) .login-sub { color: #94a3b8; }
html:not(.light) .login-label { color: #cbd5e1; }
html:not(.light) .login-input { background: #162032; border-color: #334155; color: #f1f5f9; }
html:not(.light) .login-input::placeholder { color: #475569; }
html:not(.light) .login-input:focus { background: #1e293b; border-color: var(--b400); }
html:not(.light) .login-icon { background: #162032; }
html:not(.light) .topbar { background: linear-gradient(180deg, #0a1d3a 0%, #07121f 100%); }
html:not(.light) .brand-zone { background: linear-gradient(180deg, #0a1d3a 0%, #07121f 100%); }
html:not(.light) .sec-card { background: #1e293b; border-color: #334155; }
html:not(.light) .app-sidebar { background: #0a1225; border-color: #334155; }
html:not(.light) .nav-link:hover { background: #162032; color: #e2e8f0; }
html:not(.light) .ap-row { background: #1e293b; border-color: #2d3f55; }
html:not(.light) .ap-row:hover { background: #243044; }
/* El chip activo pinta su color por estilo inline (uno por estado), así que
   acá solo se ajusta el apagado */
html:not(.light) .ap-patente { color: #e2e8f0; }
html:not(.light) .ap-dato-val { color: #e2e8f0; }
html:not(.light) .ap-dato { border-color: #2d3f55; }
html:not(.light) .ap-desv-chip { background: #243044; color: #cbd5e1; }
/* Van después del genérico a propósito: el chip neutro pisaba el rojo y el
   ámbar, y en la pantalla de oficina son el primer dato que se lee. */
html:not(.light) .ap-desv-crit { background: #450a0a; color: #f87171; }
html:not(.light) .ap-desv-leve { background: #451a03; color: #fbbf24; }
html:not(.light) .ap-unidad-edit { background: #1e293b; border-color: #334155; color: #cbd5e1; }
html:not(.light) .cl-row { border-color: #2d3f55; }
html:not(.light) .cl-nivel-1 { background: #162032; }
html:not(.light) .cl-nivel-2 { background: #111a2b; }
html:not(.light) .cl-label { color: #e2e8f0; }
html:not(.light) .cl-btn { background: #1e293b; border-color: #334155; color: #cbd5e1; }
html:not(.light) .cl-eslingas input { background: #162032; border-color: #334155; color: #f1f5f9; }
html:not(.light) .desvio-col, html:not(.light) .desvio-item { border-color: #2d3f55; }
html:not(.light) .ap-cierre-info { background: #1e293b; border-color: #334155; color: #cbd5e1; }
html:not(.light) .ap-hist-row, html:not(.light) .pre-row { border-color: #2d3f55; }
html:not(.light) .ap-hist-accion { color: #e2e8f0; }
html:not(.light) .btn-secondary, html:not(.light) .ap-cam-btn { background: #1e293b; border-color: #334155; }
html:not(.light) .btn-secondary { color: #cbd5e1; }
html:not(.light) .ocr-card { background: #1e293b; }
html:not(.light) .ocr-title { color: #e2e8f0; }
html:not(.light) .ocr-input { background: #162032; border-color: #334155; color: #f1f5f9; }
html:not(.light) .sidebar-sep { background: #334155; }
html:not(.light) .entity-row { background: #1e293b; border-color: #2d3f55; }
html:not(.light) .entity-row:hover { background: #243044; }
html:not(.light) .doc-card { background: #1e293b; border-color: #2d3f55; }
html:not(.light) .list-header, html:not(.light) .doc-section-title { background: #162032; }
html:not(.light) .search-input { background: #162032; border-color: #334155; color: #f1f5f9; }
html:not(.light) .search-input::placeholder { color: #475569; }
html:not(.light) .doc-name { color: #e2e8f0; }
html:not(.light) .row-name { color: #e2e8f0; }
html:not(.light) .ap-carga, html:not(.light) .ap-paso, html:not(.light) .ap-card, html:not(.light) .ap-fold { background: #1e293b; border-color: #334155; }
html:not(.light) .ap-u-val, html:not(.light) .ap-paso-tit { color: #e2e8f0; }
html:not(.light) .ap-paso-ok { background: #0d2b22; }
html:not(.light) .ap-paso-ok .ap-paso-tit { color: #34d399; }
html:not(.light) .ap-paso-danada .ap-paso-tit { color: #f87171; }
html:not(.light) .ap-card-link { color: var(--b400); }
html:not(.light) .ap-fold-inline { background: none; border: none; }
html:not(.light) .ap-foto-fila { border-color: #2d3f55; }
html:not(.light) .ap-foto-nom { color: #e2e8f0; }
html:not(.light) .ap-foto-accion { background: #1e293b; border-color: #334155; color: #cbd5e1; }
html:not(.light) .ap-foto-add { background: #162032; border-color: #475569; color: #cbd5e1; }

/* ══ CONSULTA DE UNIDAD ══ */
.cu-launch {
  display: flex; align-items: center; gap: 12px;
  margin: 0 16px 14px; padding: 14px 16px; width: calc(100% - 32px);
  border: none; border-radius: var(--radius-lg); cursor: pointer;
  background: linear-gradient(135deg, var(--b600) 0%, var(--b700) 100%);
  color: #fff; box-shadow: var(--shadow); text-align: left;
  font-family: var(--font); transition: transform .12s, box-shadow .12s;
}
.cu-launch:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.cu-launch:active { transform: translateY(0); }
.cu-launch-ico {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.16); color: #fff;
}
.cu-launch-txt { flex: 1; min-width: 0; }
.cu-launch-title { font-size: 15px; font-weight: 700; }
.cu-launch-sub { font-size: 11.5px; color: var(--b200); margin-top: 2px; }

.cu-form {
  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-sm);
}
.cu-field { display: flex; flex-direction: column; gap: 5px; }
.cu-field-lbl { font-size: 12px; font-weight: 600; color: var(--text2); }
.cu-opt { font-weight: 400; color: var(--text3); }
/* "+ Agregar semi (bitren)": acción secundaria, no compite con Consultar */
.cu-add-semi {
  align-self: flex-start; padding: 6px 10px; margin: -4px 0 2px;
  border: 1px dashed var(--brd2); border-radius: var(--radius-sm);
  background: transparent; color: var(--text3);
  font-family: var(--font); font-size: 12px; font-weight: 600; cursor: pointer;
}
.cu-add-semi:hover { color: var(--text2); border-color: var(--text3); }
.cu-input {
  width: 100%; padding: 12px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--brd2); background: var(--bg3); color: var(--text);
  font-size: 16px; font-family: var(--font); outline: none; transition: border-color .12s;
}
.cu-input:focus { border-color: var(--b400); background: var(--bg2); }
.cu-input-pat { font-family: var(--mono); font-weight: 700; letter-spacing: 3px; text-transform: uppercase; }
.cu-input::placeholder { color: var(--text3); letter-spacing: normal; font-weight: 400; }

#consulta-result { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.cu-verdict {
  display: flex; align-items: center; gap: 14px; padding: 18px 18px;
  border-radius: var(--radius-lg); border: 1px solid; margin-bottom: 4px;
}
.cu-verdict-ico { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; color: #fff; }
.cu-verdict-title { font-size: 22px; font-weight: 800; letter-spacing: 1px; line-height: 1.1; }
.cu-verdict-sub { font-size: 12.5px; margin-top: 2px; }
.cu-verdict-ok  { background: var(--ok-l); border-color: var(--ok); }
.cu-verdict-ok .cu-verdict-ico { background: var(--ok); }
.cu-verdict-ok .cu-verdict-title { color: var(--ok); }
.cu-verdict-ok .cu-verdict-sub { color: var(--ok); }
.cu-verdict-bad { background: var(--bad-l); border-color: var(--bad); }
.cu-verdict-bad .cu-verdict-ico { background: var(--bad); }
.cu-verdict-bad .cu-verdict-title { color: var(--bad); }
.cu-verdict-bad .cu-verdict-sub { color: var(--bad); }

.cu-row {
  background: var(--bg2); border: 1px solid var(--border); border-left-width: 4px;
  border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow-xs);
}
.cu-row-ok   { border-left-color: var(--ok); }
.cu-row-bad  { border-left-color: var(--bad); }
.cu-row-gray { border-left-color: var(--brd2); }
.cu-row-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.cu-row-id { display: flex; align-items: flex-start; gap: 9px; min-width: 0; }
.cu-row-id .status-dot { margin-top: 4px; flex-shrink: 0; }
.cu-row-label { font-size: 13.5px; font-weight: 600; color: var(--text); }
.cu-row-sub { font-size: 11.5px; color: var(--text2); margin-top: 3px; line-height: 1.45; }
/* Última revisión: dato de contexto, NO una aprobación. Chico y gris a propósito,
   nunca compitiendo con el veredicto — el auditor tiene que ver el rojo primero. */
.cu-rev { font-size: 10.5px; color: var(--text3); margin-top: 5px; line-height: 1.4; }
.cu-rev:empty { display: none; }
.cu-rev-nueva { opacity: .75; }
.cu-rev.cu-rev-cambio { color: var(--warn, #f59e0b); }
/* Registrar revisión: gesto deliberado del auditor, no un efecto secundario de consultar */
.cu-rev-btn {
  width: 100%; margin-top: 14px; padding: 13px;
  background: var(--bg2); color: var(--text);
  border: 1px solid var(--border2); border-radius: var(--radius-sm);
  font-family: var(--font); font-size: 13px; font-weight: 600; cursor: pointer;
}
.cu-rev-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.cu-rev-btn:disabled { cursor: default; opacity: .9; }
.cu-rev-btn.cu-rev-btn-done { background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.45); color: #22c55e; }
.cu-rev-hint { font-size: 10.5px; color: var(--text3); text-align: center; margin-top: 6px; line-height: 1.45; }
/* Mismo bloque al pie de la ficha: es el camino principal (actualizo la entidad,
   queda al día, dejo constancia). La consulta de unidad es el atajo. */
.dt-rev { margin: 18px 16px 28px; padding-top: 16px; border-top: 1px solid var(--border2); }
.dt-rev .cu-rev { text-align: center; margin-top: 0; margin-bottom: 2px; }
.dt-rev .cu-rev-btn { margin-top: 10px; }
.cu-row-actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.cu-ver-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--bg3); color: var(--text2); font-size: 12px; font-weight: 600;
  font-family: var(--font); cursor: pointer; transition: background .12s;
}
.cu-ver-btn:hover { background: var(--bg4); }
.cu-crear-btn { background: var(--accent); color: #fff; border-color: var(--accent); }
.cu-crear-btn:hover { background: var(--accent2); }

/* El "volver" de la vista resumen dejó de ser un botón flotante (quedaba en el
   medio del ancho en desktop y encima del contenido): ahora es el topbar de
   siempre, con la flecha a la izquierda. Ver #ver-topbar. */

/* ══ CELULAR ══════════════════════════════════════════════════════════════
   El auditor del playón trabaja de parado, con una mano y al sol: lo que
   importa es que la lista de inspecciones empiece lo más arriba posible. */
@media (max-width: 767px) {
  /* Las dos cards de ingreso van LADO A LADO, con ícono y título nada más.
     Apiladas y con subtítulo se comían casi un tercio de la pantalla. */
  .ap-cta-row { gap: 8px; margin: 12px 16px; }
  .ap-cta { gap: 8px; padding: 11px 10px; }
  .ap-cta-ico { width: 32px; height: 32px; }
  .ap-cta-ico svg { width: 16px; height: 16px; }
  .ap-cta-title { font-size: 12.3px; }
  .ap-cta-sub { display: none; }
  /* Plegar el sidebar es de escritorio: en celular se abre y se cierra, no
     hay riel al que plegarlo. */
  .sidebar-collapse { display: none; }
  /* El nombre al lado del logo se cae: en 390px le robaba el ancho a la
     búsqueda, que es lo que de verdad se usa. El logo solo ya identifica. */
  .bar-logo-text { display: none; }
  /* Plegado por defecto: los cuatro desplegados cuestan 80 px, casi un renglón
     de camión, antes de que aparezca el primero. */
  .ap-f-toggle { display: inline-flex; }
  .ap-f-bar { order: 0; padding-bottom: 8px; }
  .ap-f-panel { order: 1; display: none; }
  .ap-f-panel.abierto { display: block; }
  .ap-f-campo { flex: 1 1 calc(50% - 5px); }
  .ap-f-campo select, .ap-f-campo input { min-width: 0; width: 100%; }
}


/* ══════════════════════════════════════════════════════════════════════════
   CAPACITACIONES — pantalla del operario (s-cap)
   ══════════════════════════════════════════════════════════════════════════
   Reusa .cu-form / .cu-field / .cu-input de la consulta de unidad: es la
   misma idea (buscar por un dato y leer un veredicto), así que se maneja
   igual. Todo va con tokens, así el modo oscuro sale solo.

   Los banners de estado van en color sólido con texto blanco en vez de fondo
   claro: --ok/--bad/--info no se redefinen para oscuro, y además esto se lee
   parado en el playón con sol de frente, que es donde se usa. */

.cap-buscar-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 4px; }
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 0 14px; min-height: 42px; border-radius: var(--radius-sm);
  background: var(--surf); color: var(--text2); border: 1px solid var(--brd2);
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.btn-ghost:hover { background: var(--s3); color: var(--text); }

.cap-cargando { padding: 24px; text-align: center; color: var(--text3); font-size: 13px; }

.cap-card {
  background: var(--surf); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); overflow: hidden; margin-top: 14px;
}
.cap-card-hdr {
  padding: 10px 14px; background: var(--s3); border-bottom: 1px solid var(--border);
  font-size: 11px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; color: var(--text2);
}
.cap-sin { padding: 18px 14px; text-align: center; color: var(--text3); font-size: 13px; }

.cap-banner { padding: 13px 14px; color: #fff; }
.cap-banner-ttl { font-size: 16px; font-weight: 800; letter-spacing: .2px; }
.cap-banner-txt { font-size: 12.5px; opacity: .92; margin-top: 3px; line-height: 1.45; }
.cap-ok   { background: var(--ok); }
.cap-bad  { background: var(--bad); }
.cap-info { background: var(--b600); }

/* La foto manda: es lo que el auditor compara contra la persona que tiene
   adelante, así que ocupa la mitad del ancho y no un recuadrito. */
.cap-body { display: grid; grid-template-columns: 128px 1fr; gap: 14px; padding: 14px; }
.cap-foto {
  aspect-ratio: 3/4; background: var(--s2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); overflow: hidden; display: flex;
  align-items: center; justify-content: center;
}
.cap-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Foto arriba, firma abajo: las dos cosas que el auditor compara con la persona
   que tiene delante, en la misma columna. */
.cap-medios { display: flex; flex-direction: column; gap: 8px; }
.cap-firma {
  height: 52px; background: #f8fafc; border: 1px solid #cbd5e1;
  border-radius: var(--radius-sm); overflow: hidden; display: flex;
  align-items: center; justify-content: center; padding: 4px;
}
/* `contain` y no `cover`: una firma recortada no se puede juzgar. */
.cap-firma img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.cap-firma .cap-foto-ph { color: #64748b; }
.cap-foto-ph { font-size: 11px; color: var(--text3); text-align: center; padding: 8px; }

.cap-datos { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cap-dato b {
  display: block; font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; color: var(--text3); margin-bottom: 2px;
}
.cap-dato span { font-size: 14px; font-weight: 600; color: var(--text); word-break: break-word; }

/* El nombre que ALET tiene para ese DNI, cuando no coincide con el declarado */
.cap-alet { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 5px; font-size: 12.5px; color: var(--text2); }
.cap-alet b { font-weight: 700; color: var(--text); }
.cap-alet-btn {
  border: 1px solid var(--border); border-radius: 999px; background: none; cursor: pointer;
  color: var(--accent); font-family: var(--font); font-size: 11.5px; font-weight: 600; padding: 3px 10px;
}
.cap-alet-btn:hover { border-color: var(--accent); }

/* Validar es irreversible (habilita un año), así que no comparte tamaño ni
   peso con rechazar: el botón grande es el que se usa casi siempre. */
.cap-acciones { display: grid; grid-template-columns: auto 1fr; gap: 9px; padding: 0 14px 14px; }
.cap-btn {
  min-height: 48px; border-radius: var(--radius-sm); border: none; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 700; padding: 0 16px;
}
.cap-btn-si { background: var(--ok); color: #fff; }
.cap-btn-no { background: var(--surf); color: var(--bad); border: 1px solid var(--bad); }

/* ══ SALTO DE VIDEO POR TV ══ */
/* Apagado es una franja gris que no compite con nada; encendido se pone verde
   y muestra el código grande, porque el operario lo va a estar dictando. */
.cap-tv { margin-top: 14px; }
.cap-tv-off, .cap-tv-on {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surf);
}
.cap-tv-on { border-color: var(--ok); background: var(--ok-l); }
.cap-tv-txt { flex: 1; min-width: 0; }
.cap-tv-txt b { display: block; font-size: 13px; font-weight: 700; color: var(--text); }
.cap-tv-txt span { display: block; font-size: 11.5px; color: var(--text2); margin-top: 2px; line-height: 1.45; }
.cap-tv-cod {
  flex-shrink: 0; font-size: 26px; font-weight: 800; letter-spacing: 4px;
  color: var(--ok); font-variant-numeric: tabular-nums;
}
.cap-tv-btn {
  flex-shrink: 0; min-height: 40px; padding: 0 16px; border-radius: var(--radius-sm);
  border: none; background: var(--b600); color: #fff; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 700;
}
.cap-tv-btn-off { background: var(--surf); color: var(--bad); border: 1px solid var(--bad); }

.cap-pases-sec { margin-top: 26px; }
.cap-pases-ttl {
  font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
  color: var(--text3); margin-bottom: 9px;
}
.cap-pases-vacio { padding: 16px; text-align: center; color: var(--text3); font-size: 12.5px; }
.cap-pase {
  width: 100%; display: flex; align-items: center; gap: 12px; text-align: left;
  background: var(--surf); border: 1px solid var(--border); border-left: 3px solid var(--b600);
  border-radius: var(--radius-sm); padding: 11px 13px; margin-bottom: 8px;
  cursor: pointer; font-family: inherit;
}
.cap-pase:hover { background: var(--s3); }
.cap-pase-info { flex: 1; min-width: 0; }
.cap-pase-nom { display: block; font-size: 14px; font-weight: 700; color: var(--text); }
.cap-pase-sub { display: block; font-size: 11.5px; color: var(--text3); margin-top: 2px; }
.cap-pase-vence { flex-shrink: 0; font-size: 9.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--text3); text-align: right; }
.cap-pase-vence b { font-size: 14px; color: var(--warn); letter-spacing: 0; }

/* ══ ESCÁNER DE QR ══ */
.cap-scanner { position: fixed; inset: 0; background: #000; z-index: 320; display: none; }
.cap-scanner.open { display: block; }
.cap-scanner video { width: 100%; height: 100%; object-fit: cover; }
.cap-scanner-marco {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 66vw; max-width: 300px; aspect-ratio: 1;
  border: 3px solid rgba(255,255,255,.9); border-radius: 16px;
  box-shadow: 0 0 0 100vmax rgba(0,0,0,.5);
}
.cap-scanner-txt {
  position: absolute; left: 0; right: 0; top: calc(50% + 190px); text-align: center;
  color: #fff; font-size: 14px; font-weight: 600; padding: 0 20px; text-shadow: 0 1px 3px rgba(0,0,0,.8);
}
.cap-scanner-x {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(28px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.4); color: #fff;
  padding: 13px 32px; border-radius: 999px; font-size: 14px; font-weight: 700;
  font-family: inherit; cursor: pointer; backdrop-filter: blur(6px);
}

@media (max-width: 380px) {
  .cap-body { grid-template-columns: 104px 1fr; }
  .cap-acciones { grid-template-columns: 1fr; }
}

/* Dato verificado colgado del ítem o2 del checklist (inducción). Informa, no
   decide: durante la transición un chofer puede tener la capacitación en
   papel, así que "sin digital" avisa pero no marca desvío. */
.cl-cap {
  display: block; margin-top: 6px; padding: 6px 9px; border-radius: var(--radius-sm);
  font-size: 11.5px; font-weight: 600; line-height: 1.4;
}
.cl-cap-ok    { background: var(--ok-l);   color: var(--ok); }
.cl-cap-falta { background: var(--warn-l); color: var(--warn); }
html:not(.light) .cl-cap-ok    { color: #6ee7b7; }
html:not(.light) .cl-cap-falta { color: #fcd34d; }

/* Aviso de "validada pero sin ficha" dentro de la tarjeta. Va en la tarjeta y
   no en un toast: es el resultado de una acción importante y tiene que seguir
   ahí cuando el auditor vuelva a mirar. */
.cap-vinc {
  margin: 0 14px 14px; padding: 11px 13px; border-radius: var(--radius-sm);
  background: var(--warn-l); border: 1px solid rgba(180,83,9,.3);
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.cap-vinc-txt { flex: 1; min-width: 190px; font-size: 12.5px; line-height: 1.45; color: var(--warn); }
.cap-vinc-btn {
  background: var(--warn); color: #fff; border: none; border-radius: var(--radius-sm);
  padding: 10px 14px; font-family: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer; min-height: 42px; white-space: nowrap;
}
html:not(.light) .cap-vinc-txt { color: #fcd34d; }
html:not(.light) .cap-vinc-btn { background: #b45309; color: #fff; }

/* Eliminar capacitación: acción de admin y destructiva. Va discreta y al pie
   de la tarjeta — no compite con Validar, que es lo que se usa todo el día. */
.cap-borrar-row { padding: 0 14px 12px; text-align: right; }
.cap-borrar {
  background: none; border: none; color: var(--bad); font-family: inherit;
  font-size: 12px; font-weight: 600; cursor: pointer; padding: 6px 4px;
  text-decoration: underline; text-underline-offset: 2px;
}
.cap-borrar:hover { color: #dc2626; }

/* ── Conciliación con ALET ──────────────────────────────────────────────── */
/* Cada hallazgo es un bloque con barra de color: rojo lo que hay que mirar
   ahora, ámbar lo que necesita una decisión, azul el trabajo de rutina. */
/* El tono va por clase: los tokens semánticos no se redefinen en modo oscuro,
   así que un color fijo queda ilegible en uno de los dos temas. */
.conc-bloque { border-left: 3px solid var(--conc-c); background: var(--s2);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 12px 14px; margin-bottom: 14px; }
.conc-bloque-tit { font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; margin-bottom: 4px; color: var(--conc-c); }
.conc-brand { --conc-c: var(--accent2); }
.conc-warn  { --conc-c: var(--warn); }
.conc-bad   { --conc-c: var(--bad); }
html:not(.light) .conc-brand { --conc-c: #4a90e2; }
html:not(.light) .conc-warn  { --conc-c: #fbbf24; }
html:not(.light) .conc-bad   { --conc-c: #f87171; }
.conc-link { background: none; border: 0; color: var(--accent2); font-size: 12px;
  font-weight: 600; cursor: pointer; padding: 4px 6px; white-space: nowrap; }
html:not(.light) .conc-link { color: #4a90e2; }
.conc-amb { padding: 10px 0; border-bottom: 1px solid var(--border); }
.conc-nota { font-size: 11.5px; color: var(--conc-c, var(--warn)); margin-top: 6px; line-height: 1.45; }
.conc-opts { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
/* Botón ancho: se toca con el pulgar y el número entra entero sin cortarse. */
.conc-opt { text-align: left; font-family: var(--mono); font-size: 12px;
  padding: 9px 11px; border: 0.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surf); color: var(--text); cursor: pointer; }
.conc-opt:hover { border-color: var(--accent); }

/* ══ CONCILIACIÓN — cartel del espejo y renglones de diferencia ══ */
.conc-esp { display:flex; align-items:center; gap:11px; padding:11px 14px;
  border-radius:var(--radius); font-size:13px; margin-bottom:4px; }
.conc-esp.ok   { background:var(--ok-l);   border:1px solid var(--ok);   color:var(--ok); }
.conc-esp.pend { background:var(--warn-l); border:1px solid var(--warn); color:var(--warn); }
.conc-esp .conc-h { margin-left:auto; font-family:var(--mono); font-size:12px; opacity:.85; }

.conc-u { border-top:1px solid var(--border); padding:10px 0; }
.conc-u:first-of-type { border-top:0; }
.conc-u-h { display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.conc-u-sub { font-size:12px; color:var(--text3); }
.conc-dif { font-family:var(--mono); font-size:13px; margin-top:5px;
  display:flex; gap:16px; flex-wrap:wrap; align-items:baseline; }
.conc-dif-k { color:var(--text3); font-family:var(--font); font-size:11px;
  text-transform:uppercase; letter-spacing:.05em; margin-right:5px; }
.conc-dif-aca  { color:var(--ok);  font-weight:600; }
.conc-dif-alet { color:var(--bad); font-weight:600; }
.conc-falta { font-size:12px; font-weight:600; color:var(--bad); margin-top:4px; }
.conc-u-btn { margin-top:6px; display:flex; gap:7px; flex-wrap:wrap; }
.conc-mini { border:1px solid var(--border2); background:var(--bg2); color:var(--text2);
  font-size:11px; font-weight:600; padding:5px 10px; border-radius:var(--radius-sm);
  cursor:pointer; font-family:var(--font); }
.conc-mini.ok { background:var(--ok); border-color:var(--ok); color:#fff; }

/* ── Pólizas de flota ──────────────────────────────────────────────────────
   Un transporte tiene varias pólizas contratadas y cada camión figura en una.
   Cada póliza es una fila dentro de la tarjeta del casillero, indentada para
   que se lea como "estas son las que hay" y no como casilleros sueltos. */
.pz-fila {
  border-left: 3px solid var(--brd2);
  padding: 10px 0 4px 12px;
  margin: 10px 0 0 2px;
}
.pz-fila + .pz-fila { border-top: 1px solid var(--border); }
.pz-fila .doc-top { padding: 0; }
.pz-fila .doc-name { font-size: 14px; }
.pz-fila .doc-inherit { padding: 0; margin-top: 2px; }
.pz-fila .doc-actions { margin-top: 8px; }