/* Síguelo On Book (libreta digital de conductores) · piezas propias sobre crm-base.css (CRM Síguelo Gestión). Prefijo lb-.
   Mismos tokens que On Rent, On Mix y On Bus: nada se recolorea. Los colores de actividad salen de la paleta
   de gráficos del CRM (azul #2F5BD3, ámbar #D97706, verde #2F8F55). */
:root {
  --act-c: #2F5BD3; --act-c-suave: var(--blue-soft); --act-c-tinta: var(--blue);
  --act-e: #D97706; --act-e-suave: var(--amber-soft); --act-e-tinta: #7C2D12;
  --act-d: #2F8F55; --act-d-suave: var(--green-soft); --act-d-tinta: #14532D;
  --act-f: #9AA1AD;
}

.lb-fila { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lb-entre { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.lb-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lb-vacio { padding: 32px 16px; text-align: center; color: var(--muted); }
.lb-cargando { padding: 32px 16px; text-align: center; color: var(--muted); }
.lb-hash { font: 12px/1.4 var(--mono); color: var(--ink-2); overflow-wrap: anywhere; }
.folio { font-family: var(--mono); font-weight: 600; font-size: 12px; letter-spacing: .02em; white-space: nowrap; }
.hora { font-family: var(--mono); white-space: nowrap; }
.monto { font-family: var(--mono); font-weight: 600; white-space: nowrap; }
.lb-rut { font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; }

/* ── Menú: producto bajo el logo y empresa activa (igual que On Bus / On Rent) ── */
.lb-vista { display: contents; }
.lb-producto { margin: -6px 6px 8px; align-self: flex-start; font: 600 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; background: var(--ink); color: var(--marca); padding: 5px 8px; border-radius: 6px; }
.plegada .lb-producto { align-self: center; margin: -4px 0 8px; font-size: 9px; letter-spacing: .04em; padding: 4px 5px; }
.lb-empresa { display: flex; align-items: center; gap: 10px; margin: 0 4px 6px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.lb-empresa-logo { width: 30px; height: 30px; aspect-ratio: 1; border-radius: 8px; background: var(--teal); color: #fff; font: 600 12px/30px var(--sans); text-align: center; flex-shrink: 0; }
.lb-empresa > div { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; flex: 1; }
.lb-empresa b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-empresa div span { font-size: 11px; color: var(--muted); }
.lb-empresa select.campo { min-height: 30px; font-size: 13px; font-weight: 600; padding: 0 24px 0 6px; width: 100%; }
.plegada .lb-empresa { justify-content: center; padding: 6px 0; margin: 0 0 6px; border: 0; }
.plegada .lb-empresa > div { display: none; }
.lb-aviso-barra { display: flex; align-items: center; gap: 10px; padding: 8px 20px; background: var(--ink); color: #fff; font-size: 13px; position: sticky; top: 60px; z-index: 40; }
.lb-aviso-barra svg { color: var(--marca); flex-shrink: 0; }
.lb-aviso-barra span { flex: 1; }
.lb-aviso-barra b { color: var(--marca); }
.chip.lb-detenidos { background: var(--amber-soft); color: var(--amber-ink); text-decoration: none; }
.chip.lb-lectura { background: var(--ink); color: var(--marca); }
.menu a.item .n { margin-left: auto; font: 600 11px/1 var(--mono); background: var(--red); color: #fff; border-radius: 999px; padding: 3px 6px; }
.menu a.item[aria-current="page"] .n { background: var(--ink); color: var(--marca); }
.plegada .menu a.item .n { display: none; }

/* ── Estados de actividad ── */
.chip.ac-CONDUCCION { background: var(--act-c-suave); color: var(--act-c-tinta); }
.chip.ac-ESPERA { background: var(--act-e-suave); color: var(--act-e-tinta); }
.chip.ac-DESCANSO { background: var(--act-d-suave); color: var(--act-d-tinta); }
.chip.ac-FUERA_DE_JORNADA { background: var(--line-2); color: var(--muted); }
.chip .dot { width: 7px; height: 7px; }
.dot.ac-CONDUCCION { background: var(--act-c); } .dot.ac-ESPERA { background: var(--act-e); } .dot.ac-DESCANSO { background: var(--act-d); } .dot.ac-FUERA_DE_JORNADA { background: var(--act-f); }
.lb-leyenda { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--ink-2); }
.lb-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.lb-leyenda i { width: 18px; height: 10px; border-radius: 3px; }
.lb-leyenda i.ac-CONDUCCION { background: var(--act-c); } .lb-leyenda i.ac-ESPERA { background: var(--act-e); } .lb-leyenda i.ac-DESCANSO { background: var(--act-d); }
.lb-leyenda i.sin { background: repeating-linear-gradient(135deg, #fff 0 3px, #DADDE3 3px 6px); border: 1px solid var(--line); }

/* KPI con punto de color */
.kpi .lb-kpi-et { display: inline-flex; align-items: center; gap: 7px; }
.kpi b.mal { color: var(--red); }
.kpi.clic { cursor: pointer; text-decoration: none; color: inherit; }
.kpi.clic:hover { border-color: #B8BEC7; }

/* ── Hoy en 24 h (tipo Gantt de On Bus, una fila por conductor) ── */
.lb-hoy { --col-izq: 260px; display: flex; flex-direction: column; overflow: hidden; }
.lb-hoy-eje, .lb-hoy-fila { display: grid; grid-template-columns: var(--col-izq) minmax(0, 1fr) 128px; }
.lb-hoy-eje { background: var(--soft); border-bottom: 1px solid var(--line); font: 500 11px/1 var(--mono); color: var(--muted); }
.lb-hoy-eje > div:first-child, .lb-hoy-eje > div:last-child { padding: 10px 14px; font: 600 12px/1 var(--sans); color: var(--muted); }
.lb-hoy-eje > div:last-child { text-align: right; }
.lb-horas { position: relative; height: 32px; }
.lb-horas span { position: absolute; top: 11px; transform: translateX(-50%); }
.lb-hoy-fila { border-bottom: 1px solid var(--line-2); min-height: 54px; }
.lb-hoy-fila:last-child { border-bottom: 0; }
.lb-hoy-fila.clic { cursor: pointer; }
.lb-hoy-fila.clic:hover { background: var(--soft); }
.lb-quien { padding: 8px 14px; display: flex; flex-direction: column; justify-content: center; gap: 4px; border-right: 1px solid var(--line); min-width: 0; }
.lb-quien .l1 { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-quien .l2 { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.lb-pista { position: relative; background-image: repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px calc(100% / 24)); }
.lb-pista.noche::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(21,24,29,.035) 0 25%, transparent 25% 83.3%, rgba(21,24,29,.035) 83.3%); pointer-events: none; }
.lb-seg { position: absolute; top: 15px; bottom: 15px; border-radius: 4px; min-width: 2px; }
.lb-seg.ac-CONDUCCION { background: var(--act-c); }
.lb-seg.ac-ESPERA { background: var(--act-e); }
.lb-seg.ac-DESCANSO { background: var(--act-d); }
.lb-ahora { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--marca-ambar); z-index: 2; }
.lb-hoy-eje .lb-ahora::before { content: ''; position: absolute; bottom: -5px; left: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--marca-ambar); }
.lb-tot { padding: 8px 14px; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 2px; font: 500 12px/1.2 var(--mono); border-left: 1px solid var(--line-2); }
.lb-tot b { font-size: 14px; }
.lb-alertas { display: flex; gap: 4px; flex-wrap: wrap; }

/* Medidor de conducción continua (5 h) */
.lb-medidor { display: flex; flex-direction: column; gap: 4px; min-width: 120px; }
.lb-medidor-barra { position: relative; height: 8px; border-radius: 4px; background: var(--line-2); overflow: visible; }
.lb-medidor-barra i { display: block; height: 100%; border-radius: 4px; background: var(--act-c); }
.lb-medidor-barra.pronto i { background: #D97706; }
.lb-medidor-barra.excede i { background: var(--red); }
.lb-medidor-barra::after { content: ''; position: absolute; top: -3px; bottom: -3px; left: 90%; width: 2px; background: var(--ink-2); opacity: .35; }
.lb-medidor small { font: 500 11px var(--mono); color: var(--muted); display: flex; justify-content: space-between; }

/* ── Registro diario: 24 h × tramos de 15 min, tres líneas (formato de la libreta oficial) ── */
.lb-dia { border: 1px solid var(--line); border-radius: 12px; background: var(--card); overflow: hidden; }
.lb-dia + .lb-dia { margin-top: 12px; }
.lb-dia-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--line-2); }
.lb-dia-cab .f { display: flex; align-items: baseline; gap: 8px; }
.lb-dia-cab .f b { font: 600 15px var(--mono); }
.lb-dia-cab .f .ds { font-size: 13px; color: var(--muted); text-transform: capitalize; }
.lb-dia-cab .od { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); }
.lb-dia.domingo .lb-dia-cab, .lb-dia.feriado .lb-dia-cab { background: var(--marca-suave); }
.lb-dia.no-trab .lb-rejilla { opacity: .5; }
.lb-rejilla { display: grid; grid-template-columns: 104px minmax(0, 1fr) 64px; align-items: stretch; padding: 8px 14px 12px; }
.lb-rejilla .et { font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.lb-rejilla .et .c { display: none; }
.lb-rejilla .tt { font: 600 12px var(--mono); text-align: right; display: flex; align-items: center; justify-content: flex-end; }
.lb-rejilla .tt.cero { color: var(--muted); font-weight: 400; }
.lb-horas-dia { display: grid; font: 500 10px/1 var(--mono); color: var(--muted); padding-bottom: 4px; }
.lb-horas-dia span { text-align: left; }
.lb-tramos { display: grid; height: 22px; border-left: 1px solid #C4C9D1; }
.lb-tramos + .lb-tramos, .lb-rejilla .tt + .et + .lb-tramos { border-top: 0; }
.lb-tramos span { border-right: 1px solid var(--line-2); border-top: 1px solid var(--line); background: var(--card); }
.lb-tramos.ult span { border-bottom: 1px solid var(--line); }
.lb-tramos span.h { border-right-color: #C4C9D1; }
.lb-tramos span.on { border-right-color: rgba(255,255,255,.28); }
.lb-tramos span.on.h { border-right-color: rgba(255,255,255,.6); }
.lb-tramos.ac-CONDUCCION span.on { background: var(--act-c); border-top-color: var(--act-c); }
.lb-tramos.ac-ESPERA span.on { background: var(--act-e); border-top-color: var(--act-e); }
.lb-tramos.ac-DESCANSO span.on { background: var(--act-d); border-top-color: var(--act-d); }
.lb-dia-pie { padding: 0 14px 10px; font-size: 12px; color: var(--muted); display: flex; gap: 14px; flex-wrap: wrap; }
.lb-dia-pie .aviso { padding: 4px 10px; font-size: 12px; }

/* Resumen mensual con topes */
.lb-mes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.lb-tope { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; background: var(--card); }
.lb-tope span { font-size: 12px; color: var(--muted); }
.lb-tope b { font: 600 20px/1.1 var(--mono); }
.lb-tope b small { font-size: 13px; color: var(--muted); font-weight: 500; }
.lb-tope .lb-medidor-barra::after { display: none; }
.lb-tope.mal b { color: var(--red); }

/* ── Fichas de documento y firmas ── */
.lb-firmas { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.lb-firmas .si { color: #14532D; }
.lb-firmas .no { color: var(--muted); }
.lb-firmas .si::before { content: '✓ '; font-weight: 700; }
.lb-firmas .no::before { content: '○ '; }
.lb-firmas .nc { color: var(--red); font-weight: 600; }
.lb-firma-lienzo { width: 100%; height: 170px; border: 1.5px dashed var(--ink-2); border-radius: 10px; background: #fff; touch-action: none; cursor: crosshair; display: block; }
.lb-doc-resumen { background: var(--soft); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font-size: 13px; display: flex; flex-direction: column; gap: 6px; }
.lb-doc-resumen .fila-dato { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line-2); padding-bottom: 6px; }
.lb-doc-resumen .fila-dato:last-child { border-bottom: 0; padding-bottom: 0; }
.lb-doc-resumen .fila-dato span:first-child { color: var(--muted); }
.lb-acciones-doc { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.lb-accion-doc { display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); cursor: pointer; font: inherit; color: inherit; }
.lb-accion-doc:hover { border-color: #B8BEC7; background: var(--soft); }
.lb-accion-doc .ic { width: 34px; height: 34px; border-radius: 9px; background: var(--marca-suave); color: var(--marca-texto); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lb-accion-doc div { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.lb-accion-doc b { font-size: 14px; font-weight: 600; }
.lb-accion-doc small { font-size: 12px; color: var(--muted); }

/* Marcaciones (registro inalterable) */
.lb-eventos .tabla td { font-size: 12.5px; }
.lb-tipo-ev { display: flex; flex-direction: column; gap: 2px; }
.lb-tipo-ev small { color: var(--muted); font-size: 12px; }
.lb-dif { color: #B45309; font-weight: 600; }

/* ── Configuración: interruptores ── */
.lb-ajuste { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.lb-ajuste:last-child { border-bottom: 0; }
.lb-ajuste > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.lb-ajuste b { font-weight: 600; }
.lb-ajuste small { color: var(--muted); font-size: 13px; }
.lb-ajuste .switch { margin-top: 2px; }

/* ── Verificación de integridad ── */
.lb-integridad { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 12px; }
.lb-integridad .ic { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; font-weight: 700; font-size: 20px; }
.lb-integridad.ok { background: var(--green-soft); color: #14532D; }
.lb-integridad.ok .ic { background: var(--green); }
.lb-integridad.mal { background: var(--red-soft); color: #7A1A12; }
.lb-integridad.mal .ic { background: var(--red); }
.lb-integridad div { display: flex; flex-direction: column; gap: 2px; }

/* ── Ingreso ── */
.login .caja h1 { font-size: 20px; font-weight: 600; }
.lb-login-logo { height: 36px; max-width: 220px; object-fit: contain; align-self: flex-start; }
.lb-login-prod { display: flex; align-items: center; gap: 10px; }
.lb-login-prod .lb-producto { margin: 0; }
.lb-qr { display: flex; gap: 14px; align-items: center; }
.lb-qr img { width: 150px; height: 150px; border: 1px solid var(--line); border-radius: 10px; padding: 4px; background: #fff; }
.lb-codigo { font: 600 22px/1 var(--mono); letter-spacing: .3em; text-align: center; }
.rc-clave { position: relative; display: block; }
.rc-clave .campo { width: 100%; padding-right: 44px; }
.rc-ojo { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; background: transparent; color: var(--ink-2); cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 6px; }
.rc-ojo:hover { background: var(--soft); }
.modal-pie.lb-pie-cuenta { justify-content: space-between; }

/* ── Portada pública (/) ── */
.lb-portada { min-height: 100vh; display: flex; flex-direction: column; }
.lb-portada-cab { background: var(--card); border-bottom: 1px solid var(--line); height: 64px; display: flex; align-items: center; gap: 12px; padding: 0 24px; }
.lb-portada-cab img { height: 32px; }
.lb-portada-cab .lb-producto { margin: 0; align-self: center; }
.lb-portada-cab nav { margin-left: auto; display: flex; gap: 8px; }
.lb-portada-cuerpo { width: min(1080px, 100%); margin: 0 auto; padding: 36px 24px 48px; display: flex; flex-direction: column; gap: 22px; }
.lb-heroe { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: stretch; }
.lb-heroe h1 { font-size: 34px; line-height: 1.12; font-weight: 600; letter-spacing: -0.02em; }
.lb-heroe p { font-size: 16px; color: var(--ink-2); margin-top: 10px; max-width: 560px; }
.lb-dt { background: var(--ink); color: #fff; border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.lb-dt h2 { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--marca); }
.lb-dt p { color: #C9CED6; font-size: 14px; margin: 0; }
.lb-dt .btn { min-height: 56px; font-size: 18px; }
.lb-entradas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.lb-entrada { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); text-decoration: none; color: inherit; }
.lb-entrada:hover { border-color: #B8BEC7; }
.lb-entrada .ic { width: 44px; height: 44px; border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--marca-suave); color: var(--marca-texto); }
.lb-entrada .ic img { width: 100%; height: 100%; }
.lb-entrada b { font-size: 16px; font-weight: 600; }
.lb-entrada span { font-size: 13px; color: var(--muted); }
.lb-normas { display: flex; flex-wrap: wrap; gap: 8px; }
.lb-pie-publico { margin-top: auto; padding: 18px 24px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* Páginas públicas simples (verificar, privacidad) */
.lb-publica { width: min(760px, 100%); margin: 0 auto; padding: 28px 20px 48px; display: flex; flex-direction: column; gap: 16px; }
.lb-publica h1 { font-size: 24px; font-weight: 600; }
.lb-legal p { font-size: 14px; line-height: 1.6; color: var(--ink-2); margin: 0 0 10px; }
.lb-legal h2 { font-size: 17px; font-weight: 600; margin: 18px 0 8px; }
.lb-legal ol { padding-left: 20px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.lb-verif { display: flex; flex-direction: column; gap: 4px; }
.lb-verif .fila-dato { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--line-2); font-size: 14px; }
.lb-verif .fila-dato span:first-child { color: var(--muted); }
.lb-verif .fila-dato span:last-child { font-weight: 500; text-align: right; }

/* ── Responsive ── */
@media (max-width: 1180px) {
  .lb-mes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .lb-heroe, .lb-entradas { grid-template-columns: minmax(0, 1fr); }
  .lb-heroe h1 { font-size: 26px; }
  .lb-portada-cab { padding: 0 14px; }
  .lb-portada-cab nav .btn:not(.primario) { display: none; }
  .lb-portada-cuerpo { padding: 22px 14px 40px; }
  .lb-hoy-env { overflow-x: auto; }
  .lb-hoy { --col-izq: 170px; min-width: 760px; }
  .lb-dia { overflow-x: auto; }
  .lb-rejilla { grid-template-columns: 82px minmax(0, 1fr) 54px; min-width: 680px; }
  .lb-aviso-barra { top: 60px; padding: 8px 12px; }
}
@media (max-width: 560px) {
  .lb-mes { grid-template-columns: minmax(0, 1fr); }
}
@media print {
  .menu, .barra, .pagina-cab .acciones, .lb-aviso-barra { display: none !important; }
  .app { display: block; }
  body { background: #fff; }
}

/* Filas de alerta (igual a las alertas de vencimiento de On Rent) */
.lb-alertas-lista { display: flex; flex-direction: column; gap: 8px; }
.lb-alerta { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); text-align: left; font: inherit; color: inherit; width: 100%; cursor: pointer; }
button.lb-alerta:hover { border-color: #B8BEC7; background: var(--soft); }
.lb-alerta.estatica { cursor: default; }
.lb-alerta .ic { width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font: 600 15px var(--mono); flex-shrink: 0; }
.lb-alerta .ic.rojo { background: var(--red-soft); color: var(--red); }
.lb-alerta .ic.ambar { background: var(--amber-soft); color: #B45309; }
.lb-alerta .ic.azul { background: var(--blue-soft); color: var(--blue); }
.lb-alerta > div:not(.ic) { display: flex; flex-direction: column; line-height: 1.3; flex: 1; min-width: 0; }
.lb-alerta small { color: var(--muted); font-size: 12px; }
.rc-gps-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--green); display: inline-block; box-shadow: 0 0 0 3px var(--green-soft); flex-shrink: 0; }
.rc-gps-punto.off { background: #9AA1AD; box-shadow: 0 0 0 3px var(--line-2); }
.dato .v { font-weight: 500; }
@media (max-width: 860px) { .lb-alerta > div:last-child[style] { display: none; } }

@media (max-width: 860px) { .app:not(.menu-abierto) .menu { box-shadow: none; } }

/* Formularios en modal: rejilla de dos o más columnas; los campos anchos ocupan toda la fila */
.lb-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 14px 16px; align-items: end; }
.lb-form .ancho { grid-column: 1 / -1; }
.lb-form .etiqueta > .campo { width: 100%; }
.tabla tr.clic:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }