/* Bohé Rutas — diseño negro y dorado (el mismo de la app original de Service Truck) */
:root {
  --fondo: #0d0c0b;
  --panel: #17140f;
  --panel-2: #211d16;
  --borde: rgba(227, 199, 130, .16);
  --borde-2: rgba(255, 255, 255, .08);
  --oro: #e3c782;          /* color de marca (dorado) */
  --oro-osc: #8a6d33;
  --oro-claro: #ecd59d;
  --suave: rgba(227, 199, 130, .12);
  --navy: #0d0c0b;         /* fondo del encabezado */
  --texto: #f2eee5;
  --texto-2: #ada594;
  --sobre-oro: #16130d;    /* texto sobre botones dorados */
  --rojo: #ef8a80;
  --rojo-suave: rgba(239, 138, 128, .12);
  --verde: #8fd19e;
  --verde-suave: rgba(143, 209, 158, .12);
  --ambar: #f0b35a;
  --ambar-suave: rgba(240, 179, 90, .12);
  --gris-suave: rgba(255, 255, 255, .06);
  --sombra: none;
  --titulos: "Montserrat", system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--fondo);
  color: var(--texto);
  font: 400 16px/1.5 "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
h2, h3, h4 { font-family: var(--titulos); margin: 0 0 .6em; line-height: 1.2; }
h3 { font-size: 1.15rem; }
code { font-size: .9em; background: var(--gris-suave); padding: 1px 6px; border-radius: 5px; }
a { color: var(--oro); }
.muted { color: var(--texto-2); }
.error { color: var(--rojo); font-size: .9rem; min-height: 1.2em; margin: 4px 0; }
.espacio { flex: 1; }
[hidden] { display: none !important; }
.i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.cargando { min-height: 100svh; display: grid; place-items: center; background: var(--navy); }
.cargando img { border-radius: 16px; animation: latido 1.4s ease-in-out infinite; }
@keyframes latido { 50% { opacity: .45; transform: scale(.94); } }

/* ------------------------------------------------ Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 18px;
  border-radius: 12px; border: 1px solid transparent;
  font: 700 .92rem/1 var(--titulos);
  cursor: pointer; text-decoration: none;
  transition: background .15s, transform .1s, opacity .15s, border-color .15s;
  -webkit-user-select: none; user-select: none;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .55; pointer-events: none; }
.btn-oro { background: var(--oro); color: var(--sobre-oro); }
.btn-oro:hover { background: var(--oro-claro); }
.btn-sec { background: var(--panel); color: var(--texto); border-color: var(--borde); }
.btn-sec:hover { border-color: var(--oro); color: var(--oro); }
.btn-texto { background: none; color: var(--oro); padding: 0 10px; }
.btn-peligro { background: #7a2b25; color: #fff; }
.btn-peligro-texto { background: none; color: var(--rojo); padding: 0 6px; }
.btn-bloque { width: 100%; }
.btn-grande { width: 100%; min-height: 60px; font-size: 1.05rem; border-radius: 16px; }
.btn-chico { min-height: 36px; padding: 0 12px; font-size: .82rem; }
.alinear-izq { align-self: flex-start; padding-left: 0; }

/* ------------------------------------------------ Campos */
.campo { display: block; margin: 0 0 14px; font: 600 .82rem/1.3 var(--titulos); color: var(--texto-2); border: 0; padding: 0; min-width: 0; }
.campo legend, .etiqueta { padding: 0; margin-bottom: 8px; display: block; }
.campo input, .campo select, .campo textarea, .selector {
  display: block; width: 100%; margin-top: 7px;
  min-height: 48px; padding: 10px 13px;
  background: var(--panel); color: var(--texto);
  border: 1px solid var(--borde); border-radius: 11px;
  font: 400 1rem/1.3 "Inter", system-ui, sans-serif;
}
.campo textarea { resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus, .selector:focus { outline: none; border-color: var(--oro); box-shadow: 0 0 0 3px var(--suave); }
.campo small { display: block; font: 400 .8rem/1.4 "Inter", sans-serif; color: var(--texto-2); margin-top: 6px; }
.fila2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fila3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 560px) { .fila3 { grid-template-columns: 1fr 1fr; } }

.opciones-ruta { display: grid; gap: 8px; }
.opcion { display: block; cursor: pointer; position: relative; }
.opcion input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.opcion span {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; border-radius: 12px;
  background: var(--panel); border: 1.5px solid var(--borde);
  font: 600 .98rem/1.3 var(--titulos); color: var(--texto);
}
.opcion span::before {
  content: ""; width: 20px; height: 20px; border-radius: 50%; flex: none;
  border: 2px solid var(--texto-2);
}
.opcion input:checked + span { border-color: var(--oro); background: var(--suave); }
.opcion input:checked + span::before { border-color: var(--oro); background: radial-gradient(circle, var(--oro) 45%, transparent 50%); }
.opcion input:focus-visible + span { outline: 2px solid var(--oro); }

.interruptor { display: flex; align-items: center; gap: 12px; margin: 6px 0 16px; cursor: pointer; font: 600 1rem/1.3 var(--titulos); position: relative; }
.interruptor input { position: absolute; opacity: 0; }
.interruptor-pista { width: 50px; height: 30px; border-radius: 99px; background: var(--gris-suave); border: 1px solid var(--borde); position: relative; flex: none; transition: background .2s; }
.interruptor-pista::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--texto-2); transition: transform .2s, background .2s; }
.interruptor input:checked + .interruptor-pista { background: var(--oro-osc); border-color: var(--oro-osc); }
.interruptor input:checked + .interruptor-pista::after { transform: translateX(20px); background: var(--oro); }
.interruptor input:focus-visible + .interruptor-pista { outline: 2px solid var(--oro); }

.opciones-tramo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.opciones-tramo .opcion span { flex-wrap: wrap; row-gap: 2px; padding: 12px; }
.opciones-tramo small { flex-basis: 100%; padding-left: 32px; font: 400 .78rem/1.25 "Inter", sans-serif; color: var(--texto-2); }
.bloque-vuelta, .bloque-comb { border-left: 3px solid var(--suave); padding-left: 14px; margin-bottom: 14px; }
.bloque-vuelta p { font-size: .88rem; margin: 0 0 10px; }
.mas-datos { margin: 0 0 14px; border: 1px solid var(--borde); border-radius: 12px; padding: 0 14px; background: var(--panel); }
.mas-datos summary { cursor: pointer; padding: 13px 0; font: 600 .9rem/1.2 var(--titulos); color: var(--texto-2); }
.mas-datos[open] summary { color: var(--oro); }
.mas-datos[open] { padding-bottom: 4px; }
.ticket { position: relative; min-height: 48px; display: flex; width: fit-content; max-width: 100%; align-items: center; margin-bottom: 10px; padding-right: 44px; }
.ticket:has(img) { padding-right: 0; }
.ticket img { max-width: 100%; max-height: 260px; border-radius: 10px; border: 1px solid var(--borde); }
.ticket-quitar { position: absolute; top: 6px; right: 6px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .75); color: #fff; font-size: 1rem; cursor: pointer; }
.ticket-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ticket-grande { display: grid; gap: 10px; justify-items: center; }
.ticket-grande img { max-width: 100%; max-height: 70vh; border-radius: 10px; }
/* Documentos: archivo (PDF o foto), lectura automática y cuotas del seguro */
.archivo-caja { margin-bottom: 10px; }
.archivo-caja img { max-width: 100%; max-height: 240px; border-radius: 10px; border: 1px solid var(--borde); }
.archivo-fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 12px; background: var(--panel-2); }
.archivo-fila span { font-weight: 600; word-break: break-all; }
.archivo-fila small { color: var(--texto-2); width: 100%; }
.btn-ia { margin-top: 10px; }
.nota-ia { margin-top: 8px; font-size: .85rem; }
.cuotas { display: grid; gap: 8px; margin-bottom: 10px; }
.cuota { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 12px; background: var(--panel-2); }
.cuota strong { grid-column: 1 / -1; }
.cuota input[type="date"] { min-width: 0; background: var(--panel); border: 1px solid var(--borde); border-radius: 10px; color: var(--texto); padding: 8px 10px; font: inherit; }
.cuota .check-simple { margin: 0; }
.cuota-archivo { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cuota-archivo small { color: var(--texto-2); }
.cuota-pagada { opacity: .65; }
.cuota-pagada strong::after { content: " · pagada"; color: var(--verde); font-weight: 600; }
.visor-archivo { display: grid; justify-items: center; }
.visor-archivo iframe { width: 100%; height: 70vh; border: 1px solid var(--borde); border-radius: 10px; background: #fff; }
.visor-archivo img { max-width: 100%; max-height: 70vh; border-radius: 10px; }

/* ------------------------------------------------ Login */
.centro { min-height: 100svh; display: grid; place-items: center; padding: 20px; background: radial-gradient(800px 420px at 50% 0%, rgba(227, 199, 130, .1), transparent 70%), var(--fondo); }
.tarjeta-login { width: 100%; max-width: 390px; background: var(--panel); border: 1px solid var(--borde); border-radius: 22px; padding: 28px 24px; text-align: center; }
.tarjeta-login .campo { text-align: left; }
.login-marca { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 22px; }
.login-marca img { width: 64px; height: 64px; border-radius: 16px; background: var(--panel-2); padding: 8px; }
.login-marca strong { font: 800 1.35rem/1.2 var(--titulos); color: var(--oro); margin-top: 8px; letter-spacing: .02em; }
.login-marca span { font-size: .85rem; color: var(--texto-2); }
.pie-marca { text-align: center; font-size: .78rem; margin: 14px 0 0; }

/* ------------------------------------------------ Encabezado */
.enc {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; padding-top: max(10px, env(safe-area-inset-top));
  background: rgba(13, 12, 11, .94); backdrop-filter: blur(8px); color: var(--texto);
  border-bottom: 1px solid var(--borde);
}
.enc img { border-radius: 9px; object-fit: contain; }
.enc-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.enc-txt strong { font: 700 1rem/1.2 var(--titulos); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.enc-txt span { font-size: .8rem; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conexion { font-size: .72rem; font-weight: 600; padding: 4px 9px; border-radius: 99px; background: var(--verde-suave); color: var(--verde); white-space: nowrap; }
.conexion::before { content: "● "; }
.conexion.sin-senal { background: var(--rojo-suave); color: var(--rojo); }
.enc-menu { width: 42px; height: 42px; border-radius: 10px; border: 0; background: none; color: var(--texto); cursor: pointer; display: grid; place-items: center; }
.enc-menu svg { width: 22px; height: 22px; fill: currentColor; }

.aviso-plan { background: var(--ambar-suave); color: var(--ambar); border-bottom: 1px solid rgba(240, 179, 90, .35); padding: 10px 16px; font-size: .9rem; text-align: center; }
.aviso-plan.vencido { background: var(--rojo-suave); color: var(--rojo); border-color: rgba(239, 138, 128, .4); }
.aviso-plan a { font-weight: 700; margin-left: 6px; color: inherit; }

/* ------------------------------------------------ Página */
.pagina { padding: 16px 14px 60px; max-width: 760px; margin: 0 auto; }
.pagina-admin { max-width: 1240px; }
.pagina-chofer > * + * { margin-top: 16px; }

.periodo { display: flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--borde); border-radius: 14px; padding: 6px; box-shadow: var(--sombra); }
.periodo > div { flex: 1; text-align: center; display: flex; flex-direction: column; min-width: 150px; }
.periodo strong { font: 700 1.05rem/1.2 var(--titulos); }
.periodo span { font-size: .78rem; color: var(--texto-2); }
.flecha { width: 44px; height: 44px; border-radius: 10px; border: 0; background: var(--suave); color: var(--oro); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.flecha:disabled { opacity: .3; }

.resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.dato { background: var(--panel); border: 1px solid var(--borde); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; justify-content: space-between; min-height: 88px; box-shadow: var(--sombra); }
.dato span { font-size: .78rem; color: var(--texto-2); line-height: 1.3; }
.dato strong { font: 800 1.5rem/1.2 var(--titulos); color: var(--oro); margin-top: 6px; }
.dato small { font-size: .8rem; color: var(--texto-2); }
.dato-grande { background: linear-gradient(135deg, #2c2519, #17140f); }
.dato-grande strong { font-size: 2.2rem; }
.dato-cobrar { background: linear-gradient(135deg, #4a3c1f, #221c12); border-color: var(--oro-osc); }
.dato-cobrar { grid-column: span 2; }
.dato-cobrar strong { font-size: 1.7rem; overflow-wrap: anywhere; }
.sin-tarifa { color: var(--rojo); font-weight: 600; }
.oro { color: var(--oro); }
.alerta { background: var(--rojo-suave); border: 1px solid rgba(239, 138, 128, .4); color: var(--rojo); border-radius: 12px; padding: 10px 14px; font-size: .9rem; margin: 0 0 14px; }
.alerta strong { color: var(--texto); }

.pendiente { background: var(--suave); border: 1px dashed var(--oro-osc); color: var(--oro); border-radius: 12px; padding: 10px 14px; font-size: .88rem; text-align: center; }

.viajes { display: grid; gap: 8px; }
.viaje {
  display: flex; align-items: center; gap: 14px; width: 100%;
  background: var(--panel); border: 1px solid var(--borde); border-radius: 14px;
  padding: 10px 12px; color: inherit; text-align: left; font: inherit; cursor: pointer; box-shadow: var(--sombra);
}
.viaje:active { background: var(--panel-2); }
.viaje-fecha { width: 52px; flex: none; text-align: center; display: flex; flex-direction: column; background: var(--panel-2); color: var(--texto); border-radius: 10px; padding: 6px 0; }
.viaje-fecha span { font-size: .68rem; text-transform: uppercase; }
.viaje-fecha strong { font: 800 1.3rem/1.1 var(--titulos); }
.viaje-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.viaje-info strong { font: 600 .95rem/1.3 var(--titulos); }
.viaje-info .muted { font-size: .82rem; }
.chip { align-self: flex-start; font-size: .8rem; background: var(--suave); color: var(--oro); padding: 3px 9px; border-radius: 99px; }
/* Viajes programados (cargados por adelantado) */
.chip-programado { background: transparent; border: 1px dashed var(--oro-osc); color: var(--oro); font-size: .75rem; }
.subtitulo .chip-programado { vertical-align: middle; margin-left: 6px; }
.viaje-programado { border-style: dashed; border-color: var(--oro-osc); }
.viaje-programado .viaje-fecha { background: transparent; border: 1px dashed var(--oro-osc); }
.dato-programado { border-style: dashed; border-color: var(--oro-osc); }
.dato-programado strong { color: var(--texto); }
.nota-programado { margin: -4px 0 4px; padding: 10px 12px; border: 1px dashed var(--oro-osc); border-radius: 12px; background: var(--suave); font-size: .85rem; color: var(--texto-2); line-height: 1.45; }
.nota-programado strong { color: var(--oro); }
.acciones-columna { flex-direction: column; align-items: stretch; }
.ayuda-programados { margin: -4px 0 4px; font-size: .82rem; }
.flecha-der { color: var(--texto-2); }
.vacio { text-align: center; color: var(--texto-2); padding: 30px 10px; }

/* ------------------------------------------------ Panel */
.pestanas { display: flex; gap: 4px; overflow-x: auto; padding: 6px 14px 0; border-bottom: 1px solid var(--borde); background: var(--fondo); position: sticky; top: 62px; z-index: 15; scrollbar-width: none; }
.pestanas button { flex: none; background: none; border: 0; border-bottom: 3px solid transparent; color: var(--texto-2); font: 700 .9rem/1 var(--titulos); padding: 13px 14px; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.pestanas button.activa { color: var(--oro); border-color: var(--oro); }
.globo { background: var(--oro); color: var(--sobre-oro); border-radius: 99px; font-size: .7rem; padding: 2px 7px; }

.barra-herr { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.barra-herr .periodo { min-width: 260px; }
.barra-herr .selector { width: auto; min-width: 190px; margin: 0; }
.titulo { margin: 0; font-size: 1.3rem; }
.subtitulo { margin: 28px 0 10px; font-size: 1rem; color: var(--texto-2); }
.resumen-admin { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

.tabla-caja { overflow-x: auto; border: 1px solid var(--borde); border-radius: 14px; background: var(--panel); box-shadow: var(--sombra); }
.tabla { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tabla th { text-align: left; font: 700 .72rem/1.3 var(--titulos); text-transform: uppercase; letter-spacing: .04em; color: var(--oro); background: var(--panel-2); padding: 11px 12px; white-space: nowrap; border-bottom: 1px solid var(--borde); }
.tabla td { padding: 10px 12px; border-top: 1px solid var(--borde-2); white-space: nowrap; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla tfoot td { border-top: 2px solid var(--oro-osc); font-weight: 700; color: var(--oro); background: var(--panel-2); }
.tabla-clic tbody tr[data-viaje] { cursor: pointer; }
.tabla-clic tbody tr[data-viaje]:hover { background: var(--panel-2); }

.tarjetas-lista { display: grid; gap: 10px; }
.item { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--borde); border-radius: 14px; padding: 14px 16px; box-shadow: var(--sombra); }
.item.inactivo { opacity: .6; }
.item-info { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 4px; }
.item-info strong { font: 700 1rem/1.3 var(--titulos); }
.item-info span { font-size: .85rem; color: var(--texto-2); }
.item-info p { margin: 6px 0; white-space: pre-wrap; }
.item-acc { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.etq-inactivo { color: var(--rojo) !important; font-weight: 600; }

.credenciales { background: var(--panel-2); border: 1px solid var(--borde); border-radius: 12px; padding: 4px 14px; margin: 12px 0; }
.credenciales div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--borde-2); }
.credenciales div:last-child { border: 0; }
.credenciales span { color: var(--texto-2); font-size: .85rem; }
.credenciales strong { font-family: ui-monospace, monospace; overflow-wrap: anywhere; text-align: right; }

/* ------------------------------------------------ Semáforo de documentos */
.docs { display: flex; flex-wrap: wrap; gap: 8px; }
.item > .docs { flex: 1 1 100%; }
.doc-pastilla {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-width: 150px; padding: 9px 12px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--borde); background: var(--panel); text-align: left; font: inherit; color: var(--texto);
  border-left-width: 4px;
}
.doc-pastilla strong { font: 700 .82rem/1.2 var(--titulos); }
.doc-pastilla span { font-size: .76rem; color: var(--texto-2); }
/* Clases "est-*": no usar "ok"/"aviso" sueltas, que ya existen para otros elementos */
.doc-pastilla.est-ok { border-left-color: var(--verde); }
.doc-pastilla.est-aviso { border-left-color: var(--ambar); background: var(--ambar-suave); }
.doc-pastilla.est-vencido { border-left-color: var(--rojo); background: var(--rojo-suave); }
.doc-pastilla.est-falta { border-left-color: #6f6a60; background: var(--gris-suave); }
.doc-pastilla:disabled { cursor: default; }
.doc-estado { display: inline-block; font-size: .82rem; font-weight: 600; padding: 3px 10px; border-radius: 99px; margin: 0 0 12px; }
td .doc-estado { margin: 0; }
.doc-estado.est-ok { background: var(--verde-suave); color: var(--verde); }
.doc-estado.est-aviso { background: var(--ambar-suave); color: var(--ambar); }
.doc-estado.est-vencido { background: var(--rojo-suave); color: var(--rojo); }
.doc-estado.est-falta { background: var(--gris-suave); color: var(--texto-2); }
.sem-ok strong { color: var(--verde) !important; }
.sem-aviso strong { color: var(--ambar) !important; }
.sem-vencido strong { color: var(--rojo) !important; }
.sem-falta strong { color: var(--texto-2) !important; }

/* ------------------------------------------------ Empresa */
.dos-col-admin { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.empresa-cab { display: flex; gap: 14px; align-items: center; }
.empresa-cab div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.empresa-cab strong { font: 700 1.1rem/1.2 var(--titulos); }
.empresa-cab span { font-size: .85rem; }
.empresa-logo { width: 64px; height: 64px; border-radius: 14px; object-fit: contain; background: var(--panel-2); border: 1px solid var(--borde); flex: none; }
.empresa-logo-chico { width: 46px; height: 46px; border-radius: 12px; object-fit: contain; background: var(--panel-2); border: 1px solid var(--borde); flex: none; }
.destacado { border-color: var(--oro); box-shadow: inset 4px 0 0 var(--oro), var(--sombra); }

.firma-vista { min-height: 70px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 10px; border: 1px dashed var(--borde); border-radius: 12px; background: #f6f3ec; color: #6b6458; margin-bottom: 10px; }
.firma-vista .muted { color: #6b6458; }
.firma-vista img { max-height: 90px; max-width: 260px; }
/* Cierre mensual del chofer */
.resumen-cierre { margin: 12px 0; }
.cierre-firma { margin: 14px 0 0 auto; width: min(280px, 100%); display: grid; justify-items: center; gap: 4px; padding: 12px 10px 8px; border-radius: 12px; background: #f6f3ec; color: #2a241b; text-align: center; }
.cierre-firma img { max-height: 70px; max-width: 240px; }
.cierre-firma span { width: 100%; border-top: 1px solid #6b6458; padding-top: 6px; font-size: .85rem; }
.firma-texto { font: italic 600 1.4rem/1.2 Georgia, serif; color: #0d1b2a; margin: 8px 0 4px; }
.ok-texto { color: var(--verde); font-weight: 600; }
.mi-firma { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .85rem; }
.tarjeta-chofer .doc-estado { align-self: flex-start; margin-top: 3px; }
.firma-mini img { max-height: 60px; }
.firma-lienzo { position: relative; margin-bottom: 10px; }
.firma-lienzo canvas { width: 100%; height: 170px; display: block; background: #fff; border: 1px solid var(--borde); border-radius: 12px; touch-action: none; }
.firma-linea { position: absolute; left: 24px; right: 24px; bottom: 40px; border-bottom: 1px solid #C6D1D9; pointer-events: none; }
.nota-legal { font-size: .78rem; }

/* ------------------------------------------------ Administración de la plataforma */
.empresa-item { align-items: center; }
.empresa-numeros { display: flex; gap: 18px; }
.empresa-numeros div { display: flex; flex-direction: column; align-items: center; min-width: 70px; text-align: center; }
.empresa-numeros strong { font: 800 1.3rem/1.1 var(--titulos); color: var(--oro); }
.empresa-numeros span { font-size: .72rem; color: var(--texto-2); }
.plan { font-weight: 700; font-size: .78rem; padding: 2px 9px; border-radius: 99px; }
.plan-ok { background: var(--verde-suave); color: var(--verde); }
.plan-aviso { background: var(--ambar-suave); color: var(--ambar); }
.plan-vencida, .plan-suspendida { background: var(--rojo-suave); color: var(--rojo); }
.barras { display: flex; gap: 10px; align-items: flex-end; height: 150px; padding: 10px 6px 0; background: var(--panel-2); border: 1px solid var(--borde); border-radius: 14px; }
.barra-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.barra { width: 100%; max-width: 48px; min-height: 3px; background: var(--oro-osc); border-radius: 6px 6px 0 0; }
.barra-col.actual .barra { background: var(--oro); }
.barra-num { font: 700 .82rem/1 var(--titulos); color: var(--texto); }
.barra-etq { font-size: .72rem; color: var(--texto-2); padding-bottom: 6px; }

/* ------------------------------------------------ Clientes y autorizaciones */
.vinculos { flex: 1 1 100%; display: grid; gap: 6px; }
.vinculo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--borde-2); border-radius: 10px; background: var(--panel-2); }
.vinculo strong { font: 700 .9rem/1.2 var(--titulos); flex: 1; min-width: 140px; }
.vinculo .doc-estado { margin: 0; }
.acuerdo { font-size: .9rem; color: var(--texto-2); background: var(--panel-2); border: 1px solid var(--borde-2); border-radius: 12px; padding: 12px 14px; }
.acuerdo ul { margin: 8px 0; padding-left: 1.2em; }
.acuerdo strong { color: var(--texto); }
.fila-check span { border-radius: 12px; padding: 12px 14px; font-size: .92rem; }
.fila-check small { color: var(--texto-2); }
.check-simple { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: var(--texto-2); margin: 4px 0 10px; line-height: 1.35; }
.check-simple input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--oro); flex: none; }
.alerta-accion { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
/* Avisos de novedades (service, cierres) */
.banner-avisos { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 10px 16px 0; padding: 10px 14px; border: 1px solid var(--oro-osc); border-radius: 12px; background: var(--suave); font-size: .9rem; }
.banner-avisos span { flex: 1 1 260px; }
.avisos-nuevos { position: fixed; top: 12px; right: 12px; left: 12px; z-index: 50; display: grid; gap: 8px; justify-items: end; pointer-events: none; }
.aviso-nuevo { pointer-events: auto; width: min(420px, 100%); display: flex; gap: 10px; align-items: center; padding: 12px 12px 12px 16px; border-radius: 14px;
  background: #221c12; border: 1px solid var(--oro); box-shadow: 0 12px 30px rgba(0,0,0,.55); animation: aviso-entra .3s ease-out; }
.aviso-nuevo div { flex: 1; display: grid; gap: 2px; min-width: 0; }
.aviso-nuevo strong { font: 700 .95rem/1.25 var(--titulos); color: var(--oro); }
.aviso-nuevo span { font-size: .85rem; color: var(--texto); }
.aviso-cerrar { background: none; border: 0; color: var(--texto-2); font-size: 1rem; cursor: pointer; padding: 4px 6px; }
@keyframes aviso-entra { from { transform: translateY(-12px); opacity: 0; } to { transform: none; opacity: 1; } }
.alerta-accion div { flex: 1 1 260px; }

/* ------------------------------------------------ Exportar */
.chips-rutas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.chip-check { cursor: pointer; position: relative; }
.chip-check input { position: absolute; opacity: 0; }
.chip-check span { display: block; padding: 8px 12px; border-radius: 99px; border: 1px solid var(--borde); background: var(--panel); font: 600 .8rem/1.2 "Inter", sans-serif; color: var(--texto-2); }
.chip-check input:checked + span { background: var(--suave); border-color: var(--oro); color: var(--oro); }
.sel-barra { display: flex; align-items: center; gap: 6px; margin: 6px 0 8px; font-size: .9rem; }
.sel-lista { max-height: 300px; overflow-y: auto; }
.sel-lista td { padding: 8px 10px; }
.sel-lista input { width: 18px; height: 18px; accent-color: var(--oro); }

/* ------------------------------------------------ Planillas */
.origenes { display: grid; gap: 10px; margin: 14px 0; }
.procesando { padding: 50px 10px; text-align: center; color: var(--texto-2); }
.girando { width: 42px; height: 42px; margin: 0 auto 16px; border-radius: 50%; border: 3px solid var(--borde); border-top-color: var(--oro); animation: girar 1s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.tabla-edicion td { padding: 6px; }
.tabla-edicion input, .tabla-edicion select {
  width: 100%; min-width: 92px; min-height: 40px; padding: 6px 8px;
  background: var(--panel); color: var(--texto); border: 1px solid var(--borde); border-radius: 8px;
  font: 400 .9rem/1.2 "Inter", sans-serif;
}
.tabla-edicion select { min-width: 190px; }
.tabla-edicion tr.fuera { opacity: .45; }
.tabla-edicion tr.revisar td { background: rgba(242, 184, 75, .12); }
.tabla-edicion tr.revisar input[data-k="fecha"] { border-color: var(--amarillo, #f2b84b); }
.aviso-fila { display: block; color: #f2b84b; font-size: .75rem; margin-top: 3px; }
.planilla-foto { margin-bottom: 10px; }
.planilla-foto.abierta { position: sticky; top: -16px; z-index: 3; background: var(--panel); padding: 8px 0; }
.planilla-foto-img { margin-top: 8px; max-height: 38vh; overflow: auto; border: 1px solid var(--borde); border-radius: 10px; background: #fff; }
.planilla-foto-img img { display: block; width: 100%; min-width: 600px; }
.alerta ul { margin: 4px 0 6px 1.2em; }
.alerta p { margin: 6px 0 2px; }
.resumen-comp { grid-template-columns: repeat(3, 1fr); margin: 14px 0 6px; }
.dato-bien { border-color: rgba(143, 209, 158, .5); }
.dato-bien strong { color: var(--verde); font-size: 1.2rem; }
.dato-mal { border-color: rgba(239, 138, 128, .5); }
.dato-mal strong { color: var(--rojo); }
.comp-titulo { margin: 22px 0 8px; font: 700 .92rem/1.3 var(--titulos); }
.comp-titulo.mal { color: var(--rojo); }
.comp-titulo.bien { color: var(--verde); }
.tabla td.nota { color: var(--ambar); white-space: normal; }
.ok { color: var(--verde) !important; font-weight: 600; }
.mal { color: var(--rojo) !important; font-weight: 600; }

/* Tarjetas de la pantalla del chofer */
.tarjeta-chofer { background: var(--panel); border: 1px solid var(--borde); border-radius: 16px; padding: 14px; display: grid; gap: 10px; box-shadow: var(--sombra); align-content: start; }
.tarjeta-chofer-cab { display: flex; gap: 12px; align-items: center; }
.tarjeta-chofer-cab .i { width: 26px; height: 26px; color: var(--oro); }
.tarjeta-chofer-cab div { display: flex; flex-direction: column; }
.tarjeta-chofer-cab strong { font: 700 1rem/1.3 var(--titulos); }
.tarjeta-chofer-cab span { font-size: .85rem; }
.acciones-fila { display: flex; gap: 8px; flex-wrap: wrap; }
.acciones-fila .btn { flex: 1 1 140px; }

/* Service */
.service.urgente { border-color: rgba(239, 138, 128, .6); box-shadow: inset 4px 0 0 var(--rojo); }
.estado-service { align-self: flex-start; font-size: .75rem !important; font-weight: 700; padding: 3px 10px; border-radius: 99px; margin-top: 4px; }
.estado-pendiente { background: var(--rojo-suave); color: var(--rojo) !important; }
.estado-entaller { background: var(--suave); color: var(--oro) !important; }
.estado-resuelto { background: var(--verde-suave); color: var(--verde) !important; }
.selector-chico { min-height: 36px; padding: 4px 8px; width: auto; min-width: 0; margin: 0; font-size: .85rem; }
.nota-wa { font-size: .8rem; margin-top: 10px; text-align: center; }
.tarjeta-chofer .service { padding: 10px 12px; box-shadow: none; }

/* ------------------------------------------------ Modal */
.modal {
  width: min(540px, calc(100% - 20px)); max-height: calc(100svh - 20px);
  padding: 0; border-radius: 20px;
  background: var(--panel); color: var(--texto);
  border: 1px solid var(--borde);
}
.modal-ancho { width: min(920px, calc(100% - 20px)); }
.modal::backdrop { background: rgba(0, 0, 0, .7); }
.modal-cuerpo { padding: 22px 20px 18px; }
.acciones { display: flex; align-items: center; gap: 8px; margin-top: 16px; justify-content: flex-end; flex-wrap: wrap; }
.lista-opciones { display: grid; gap: 10px; }
@media (max-width: 600px) {
  .modal { width: 100%; max-width: none; max-height: 94svh; margin: auto 0 0; border-radius: 20px 20px 0 0; }
  .modal-cuerpo { padding-bottom: max(18px, env(safe-area-inset-bottom)); }
  .barra-herr .periodo, .barra-herr .selector { flex: 1 1 100%; }
  .fila2 { grid-template-columns: 1fr; gap: 0; }
  .empresa-numeros { width: 100%; justify-content: space-around; }
}

/* ------------------------------------------------ Avisos */
.aviso {
  position: fixed; left: 50%; bottom: 24px; z-index: 100;
  transform: translate(-50%, 20px); opacity: 0;
  background: #2c2519; color: var(--texto); border: 1px solid var(--oro-osc);
  padding: 12px 18px; border-radius: 12px; font-weight: 600; font-size: .92rem;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .5);
  transition: opacity .25s, transform .25s; max-width: calc(100% - 32px); text-align: center;
}
.aviso.visible { opacity: 1; transform: translate(-50%, 0); }
.aviso-error { border-color: var(--rojo); color: var(--rojo); }

/* Enlace a la política de privacidad junto a formularios */
.aviso-datos { font-size: .82rem; margin: 6px 0 0; }
.aviso-datos a { color: inherit; text-decoration: underline; }