/* Loto Logistics — estilos. Colores de la marca Loto: verde azulado y rojo del camión. */
:root {
  --fondo: #F2F8F7; --tarjeta: #fff; --texto: #1B2A30; --suave: #5E6E74; --linea: #DDE3E6;
  --prim: #005B58; --prim-2: #006A67; --ambar: #D98E04; --verde: #2E8B57; --rojo: #C32D33; --azul: #2D6CDF; --gris: #7A868B;
  --radio: 14px; --sombra: 0 1px 3px rgba(0,0,0,.08);
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--fondo); color: var(--texto); font-size: 16px; line-height: 1.4; }
h1, h2, h3 { margin: .2em 0 .6em; line-height: 1.2; }
h2 { font-size: 1.35rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
h3 { font-size: 1.05rem; }
a { color: var(--prim-2); }
small { color: var(--suave); }
.cargando { padding: 3rem 1rem; text-align: center; color: var(--suave); }

/* Barra y menú */
.barra { background: var(--prim); color: #fff; display: flex; justify-content: space-between; align-items: center; padding: .6rem 1rem; position: sticky; top: 0; z-index: 500; }
.marca-mini { display: flex; align-items: center; gap: .5rem; font-size: 1.05rem; }
.marca-mini img { width: 30px; height: 30px; }
.quien { text-align: right; font-size: .9rem; display: flex; flex-direction: column; }
.quien small { color: #CDE7E3; }
.menu { display: flex; gap: .2rem; overflow-x: auto; background: #fff; border-bottom: 1px solid var(--linea); padding: .3rem .5rem; position: sticky; top: 50px; z-index: 499; }
.menu a { flex: 1 0 auto; min-width: 58px; display: flex; flex-direction: column; align-items: center; padding: .35rem .35rem; border-radius: 10px; text-decoration: none; color: var(--suave); font-size: .78rem; }
.menu a span { font-size: 1.2rem; }
@media (max-width: 400px) { .menu a { font-size: .72rem; padding: .3rem .2rem; } }
.menu a.activo { background: #E3F1EF; color: var(--prim); font-weight: 700; }
main { max-width: 760px; margin: 0 auto; padding: 1rem 16px 4rem; }

/* Tarjetas y formularios */
.tarjeta { background: var(--tarjeta); border-radius: var(--radio); box-shadow: var(--sombra); padding: 1rem; margin-bottom: 1rem; }
label { display: block; font-weight: 600; font-size: .92rem; margin: .7rem 0 .25rem; }
input, select, textarea { width: 100%; font: inherit; padding: .7rem .8rem; border: 1px solid var(--linea); border-radius: 10px; background: #fff; margin-top: .25rem; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--prim-2); border-color: transparent; }
fieldset { border: 0; padding: 0; margin: .8rem 0; }
legend { font-weight: 600; font-size: .92rem; margin-bottom: .4rem; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.dos label { margin-top: .7rem; }
.ayuda { color: var(--suave); font-size: .85rem; margin: .3rem 0; }
.con-boton { display: flex; gap: .5rem; align-items: center; }
.con-boton input { margin-top: 0; }
.con-boton .btn { width: auto; flex: 0 0 auto; margin: 0; }
label .con-boton { margin-top: .25rem; }
.busca { margin: .6rem 0 1rem; }

.btn { display: inline-flex; justify-content: center; align-items: center; gap: .4rem; width: 100%; padding: .75rem 1rem; margin-top: .9rem; border: 0; border-radius: 12px; background: var(--prim); color: #fff; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.btn:disabled { opacity: .6; cursor: wait; }
.btn.sec { background: #E3F1EF; color: var(--prim); }
.btn.rojo { background: var(--rojo); }
.btn.grande { padding: 1rem; font-size: 1.08rem; }
.btn.link { background: none; color: var(--prim-2); width: auto; padding: .3rem .4rem; margin: 0; font-weight: 600; }
.btn.google { background: #fff; color: var(--texto); border: 1px solid var(--linea); }
.btn.google span { font-weight: 800; color: #4285F4; }
.rojo-txt { color: var(--rojo) !important; }
.fila-btn { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.fila-btn .btn:not(.link) { flex: 1 1 140px; }
.acciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; margin-bottom: 1rem; }
.acciones .btn { margin: 0; }

/* Estados */
.chip { display: inline-block; font-size: .72rem; font-weight: 700; padding: .15rem .55rem; border-radius: 99px; white-space: nowrap; }
.chip.verde { background: #E3F4EA; color: var(--verde); }
.chip.rojo { background: #FBE7E5; color: var(--rojo); }
.chip.ambar { background: #FCF0DC; color: #A86C0F; }
.chip.azul { background: #E5EDFC; color: var(--azul); }
.chip.gris { background: #ECEFF0; color: var(--gris); }
.alerta { background: #FCEDEB; color: #8E2A20; border-radius: 12px; padding: .8rem 1rem; margin: 0 0 1rem; }
.nota { background: #FFF7E8; border-radius: 10px; padding: .6rem .8rem; }

/* Resumen */
.datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .7rem; margin-bottom: 1rem; }
.dato { background: #fff; border-radius: var(--radio); box-shadow: var(--sombra); padding: .9rem; text-decoration: none; color: var(--texto); border-left: 5px solid var(--prim-2); }
.dato b { display: block; font-size: 1.8rem; }
.dato span { font-size: .85rem; color: var(--suave); }
.dato.ambar { border-color: var(--ambar); }
.dato.rojo { border-color: var(--rojo); }

/* Listas */
.pestanas { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .3rem; }
.pestanas a { flex: 0 0 auto; padding: .45rem .8rem; border-radius: 99px; background: #fff; border: 1px solid var(--linea); text-decoration: none; color: var(--suave); font-size: .88rem; }
.pestanas a.activo { background: var(--prim); color: #fff; border-color: var(--prim); }
.lista { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1rem; }
.paq { display: block; background: #fff; border-radius: var(--radio); box-shadow: var(--sombra); padding: .8rem 1rem; text-decoration: none; color: var(--texto); }
.paq.nuevo { border-left: 5px solid var(--ambar); }
.paq.apagado { opacity: .55; }
.paq-1 { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.paq-2 { color: var(--suave); font-size: .9rem; margin-top: .2rem; }
.paq-3 { color: var(--suave); font-size: .82rem; margin-top: .2rem; }
.vacio-txt { color: var(--suave); text-align: center; padding: 1.5rem 0; }
.vacio { text-align: center; padding: 2rem 1rem; }
.grande { font-size: 3rem; }
.volver { display: inline-block; margin-bottom: .5rem; text-decoration: none; }
details summary { cursor: pointer; color: var(--suave); margin: .5rem 0; }

/* Detalle */
.ficha { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .7rem; margin-bottom: .6rem; }
.ficha small { display: block; }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: .5rem; margin: .5rem 0; }
.galeria img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; display: block; background: #eee; }
.historial { list-style: none; padding: 0; margin: 0; border-left: 3px solid var(--linea); }
.historial li { padding: 0 0 .9rem 1rem; position: relative; }
.historial li::before { content: ''; position: absolute; left: -7px; top: 5px; width: 11px; height: 11px; border-radius: 50%; background: var(--prim-2); }
.historial p { margin: .2rem 0; color: var(--suave); font-size: .9rem; }

/* Recepción */
.opciones-condicion { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: .4rem; }
.opcion { margin: 0; position: relative; }
.opcion input { position: absolute; opacity: 0; }
.opcion span { display: block; text-align: center; padding: .65rem .4rem; border: 2px solid var(--linea); border-radius: 10px; font-weight: 600; cursor: pointer; }
.opcion.ok input:checked + span { border-color: var(--verde); background: #E3F4EA; color: var(--verde); }
.opcion.mal input:checked + span { border-color: var(--rojo); background: #FBE7E5; color: var(--rojo); }
.opcion-linea { display: flex; gap: .6rem; align-items: center; font-weight: 500; }
.opcion-linea input { width: auto; margin: 0; }
.resultados { display: flex; flex-direction: column; gap: .3rem; }
.resultados button { text-align: left; padding: .6rem .8rem; border: 1px solid var(--linea); background: #fff; border-radius: 10px; font: inherit; cursor: pointer; }
.fotos-lista { display: flex; gap: .5rem; flex-wrap: wrap; }
.mini { position: relative; width: 84px; height: 84px; }
.mini img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.mini button { position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: var(--rojo); color: #fff; font-weight: 800; cursor: pointer; }
.foto-btn { margin-top: .5rem; }

/* Cliente */
.casillero { text-align: center; border-top: 6px solid var(--ambar); }
.casillero .cod { font-size: 2rem; font-weight: 800; letter-spacing: 2px; color: var(--prim); }
.dir { background: var(--fondo); border-radius: 10px; padding: .8rem; text-align: left; white-space: pre-wrap; font-family: inherit; font-weight: 600; }
.pin { margin-top: .8rem; padding-top: .8rem; border-top: 1px dashed var(--linea); }
.pin b, .pin-txt { font-size: 1.2rem; letter-spacing: 3px; color: var(--prim); }
.pin-grande { font-size: 3rem; font-weight: 800; letter-spacing: 10px; color: var(--prim); background: #FFF7E8; border-radius: 14px; padding: .5rem; margin: .8rem 0; }
.pin-grande.chico { font-size: 1.6rem; letter-spacing: 3px; }
.pin-input { font-size: 2rem; text-align: center; letter-spacing: 12px; }
.mapa { height: 300px; border-radius: 12px; margin: .6rem 0; z-index: 1; }

/* Entrada */
.entrada { max-width: 420px; margin: 0 auto; padding: 2rem 16px; }
.entrada .marca { text-align: center; margin-bottom: 1rem; }
.entrada .marca img { width: 84px; height: 84px; }
.entrada .marca h1 { color: var(--prim); font-size: 2rem; }
.entrada .marca p { color: var(--suave); }
.separador { text-align: center; color: var(--suave); font-size: .85rem; margin: 1rem 0 .2rem; }

/* Ventanas */
.modal-fondo { position: fixed; inset: 0; background: rgba(10,25,30,.5); z-index: 1000; display: flex; align-items: flex-end; justify-content: center; }
.modal { background: #fff; width: 100%; max-width: 480px; max-height: 92vh; overflow-y: auto; border-radius: 18px 18px 0 0; padding: 1.2rem 16px 1.5rem; position: relative; }
.modal.ancho { max-width: 640px; }
.modal .cerrar { position: absolute; top: .4rem; right: .6rem; border: 0; background: none; font-size: 1.8rem; cursor: pointer; color: var(--suave); }
@media (min-width: 640px) { .modal-fondo { align-items: center; } .modal { border-radius: 18px; } }
.exito { text-align: center; }
.confirmar-txt { font-size: 1.05rem; margin-top: 1.2rem; }
.escaner { width: 100%; border-radius: 12px; background: #000; }
.fila-hub { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .5rem 0; border-bottom: 1px solid var(--linea); }

#toast { visibility: hidden; opacity: 0; position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%) translateY(150%); background: var(--texto); color: #fff; padding: .75rem 1.1rem; border-radius: 12px; z-index: 2000; transition: transform .25s; max-width: calc(100% - 32px); }
#toast.on { visibility: visible; opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.error { background: var(--rojo); }
.google-caja { display: flex; justify-content: center; min-height: 44px; }

/* ===== Loto: mapas, cotizador, viajes y chofer ===== */
main.ancho { max-width: 1000px; }
.mapa { height: 300px; border-radius: 12px; margin: .6rem 0; overflow: hidden; background: #E9EEEC; }
.grande-mapa { height: min(60vh, 460px); }
.mapa-vivo { height: min(70vh, 620px); }
.pin { min-width: 28px; height: 28px; padding: 0 6px; border-radius: 14px 14px 14px 2px; transform: rotate(0); color: #fff; font-weight: 800; font-size: .85rem;
  display: flex; align-items: center; justify-content: center; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); cursor: pointer; }
.pin.chico { display: inline-flex; min-width: 22px; height: 22px; font-size: .72rem; border-radius: 11px; box-shadow: none; }
.pin.camion { border-radius: 50%; width: 34px; height: 34px; font-size: 1.1rem; }
.leyenda { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .8rem; color: var(--suave); margin-bottom: .4rem; }
.leyenda i { display: inline-block; width: 18px; height: 4px; border-radius: 2px; vertical-align: middle; margin-right: .3rem; }
.chico-btn { width: auto !important; margin: 0 0 0 auto !important; padding: .45rem .9rem !important; font-size: .9rem; }
.derecha { margin-left: auto; }
.unidades { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
.opcion-unidad { margin: 0; position: relative; }
.opcion-unidad input { position: absolute; opacity: 0; }
.opcion-unidad span { display: block; padding: .6rem .7rem; border: 2px solid var(--linea); border-radius: 12px; cursor: pointer; }
.opcion-unidad small { display: block; font-weight: 500; }
.opcion-unidad input:checked + span { border-color: var(--prim-2); background: #E3F1EF; }
.merc { border: 1px solid var(--linea); border-radius: 12px; padding: .6rem; margin-bottom: .6rem; }
.merc-1 { display: flex; gap: .5rem; align-items: center; }
.merc-1 input { margin: 0; }
.merc-2 { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; }
.merc-2 label { font-size: .78rem; margin: .4rem 0 0; }
.merc-2 input { padding: .55rem .4rem; }
@media (max-width: 520px) { .merc-2 { grid-template-columns: repeat(3, 1fr); } }
.barra-ocupa { height: 10px; background: #E3E8E6; border-radius: 5px; overflow: hidden; margin: .4rem 0; }
.barra-ocupa span { display: block; height: 100%; }
.punto { border: 2px solid var(--linea); border-radius: 12px; padding: .7rem; background: #fff; }
.punto.activo { border-color: var(--ambar); box-shadow: 0 0 0 3px #FCF0DC; }
.punto.falta .coords { color: var(--rojo); font-weight: 600; }
.punto-1 { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.punto .buscar { margin-top: .5rem; }
.precio-total { text-align: center; margin-bottom: .8rem; }
.precio-total b { display: block; font-size: 2.2rem; color: var(--prim); }
.ficha > div { background: var(--fondo); border-radius: 10px; padding: .6rem; font-weight: 700; }
.ficha small { font-weight: 500; }
.tabla { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabla td { padding: .35rem .2rem; border-bottom: 1px solid var(--linea); }
.tabla td:last-child { text-align: right; white-space: nowrap; }
.estado-gps { font-size: .85rem; padding: .5rem .8rem; border-radius: 10px; background: #ECEFF0; color: var(--suave); margin-bottom: .6rem; }
.estado-gps:empty { display: none; }
.estado-gps.bien { background: #E3F4EA; color: var(--verde); }
.estado-gps.mal { background: #FBE7E5; color: var(--rojo); }
.paso { border-top: 6px solid var(--rojo); }
.paso small { color: var(--suave); text-transform: uppercase; font-weight: 700; letter-spacing: .5px; }
.maplibregl-popup-content { font: 14px/1.35 system-ui, sans-serif; }

/* Pago por transferencia */
.pago { border-top: 6px solid var(--rojo); }
.pago .monto { font-size: 1.4rem; color: var(--prim); }
.pago-ok { border-top: 6px solid var(--verde); }
.datos-banco { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .5rem; margin: .6rem 0; }
.datos-banco > div { background: var(--fondo); border-radius: 10px; padding: .5rem .7rem; word-break: break-all; }
.datos-banco small { display: block; }
.comprobantes { padding-left: 1.1rem; margin: .3rem 0; }
.pago h4 { margin: .8rem 0 .2rem; }

/* Aviso de versión nueva dentro de la app de Android */
.banner-update { display: flex; gap: .6rem; align-items: center; justify-content: space-between; background: var(--ambar); color: #fff; padding: .5rem 16px; font-weight: 600; }
.banner-update .btn { width: auto; margin: 0; padding: .45rem .9rem; background: #fff; color: var(--prim); }

/* Costo operativo (solo Loto) */
.operativo { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .5rem; margin: .8rem 0; }
.operativo > div { background: #FFF4E5; border-radius: 10px; padding: .6rem .7rem; }
.operativo b { display: block; font-size: 1.25rem; color: var(--texto); }
.operativo small { color: var(--suave); }
.operativo .gana { background: #E3F4EA; }
.operativo .gana b, .verde-txt { color: var(--verde); }

.nota-solicitud { border-top: 6px solid var(--ambar); }

/* iPhone instalado como app: respetar la muesca y la barra inferior */
.barra { padding-top: calc(.6rem + env(safe-area-inset-top)); padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
main { padding-bottom: calc(4rem + env(safe-area-inset-bottom)); }
.menu { top: calc(50px + env(safe-area-inset-top)); }
input, select, textarea { font-size: 16px; } /* evita que iPhone haga zoom al escribir */

/* ---------- Choferes: registro, asistencia, pasos guiados y reportes (2026-11) ---------- */
.btn.verde { background: var(--verde); color: #fff; }
.btn.chico-btn { width: auto; }
.burbuja { background: var(--rojo); color: #fff; border-radius: 999px; padding: 0 .45rem; font-size: .75rem; margin-left: .2rem; }
/* Fotos con nombre (un recuadro por foto) */
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; margin: .6rem 0; }
.slot { position: relative; display: flex; flex-direction: column; gap: .3rem; padding: .5rem; border: 2px dashed var(--linea); border-radius: 12px; background: #fff; cursor: pointer; min-height: 120px; }
.slot.lista { border-style: solid; border-color: var(--verde); }
.slot-img { height: 70px; border-radius: 8px; background: #EEF3F2 center/cover no-repeat; }
.slot-txt { font-size: .85rem; font-weight: 600; }
.slot-txt small { display: block; font-weight: 400; }
.slot-ok { position: absolute; top: .4rem; right: .5rem; font-size: 1.2rem; }
/* Registro con invitación */
.registro { max-width: 560px; }
.pasos-reg { display: flex; gap: .4rem; list-style: none; padding: 0; margin: 0 0 .8rem; counter-reset: p; }
.pasos-reg li { flex: 1; text-align: center; padding: .45rem .2rem; border-radius: 10px; background: #E7ECEE; color: var(--suave); font-size: .82rem; font-weight: 600; counter-increment: p; }
.pasos-reg li::before { content: counter(p) ". "; }
.pasos-reg li.activo { background: var(--prim); color: #fff; }
.firma-caja { position: relative; height: 170px; border: 2px dashed var(--linea); border-radius: 12px; background: #fff; touch-action: none; }
.firma-caja canvas { width: 100%; height: 100%; display: block; touch-action: none; }
.firma-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--suave); pointer-events: none; }
.avi { padding-left: 1.2rem; }
.avi li { margin: .25rem 0; }
/* Panel: expediente y aprobación */
.docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .5rem; margin: .6rem 0; }
.docs a { display: flex; flex-direction: column; gap: .2rem; font-size: .8rem; color: var(--suave); text-decoration: none; }
.docs img { width: 100%; height: 90px; object-fit: cover; border-radius: 8px; background: #EEF3F2; }
.datos.alertas { margin-bottom: .6rem; }
/* App del chofer */
.hora-entrada { background: #FFF4DC; color: #7A4D00; border-radius: 10px; padding: .45rem .6rem; margin: .35rem 0; font-size: .92rem; }
.ok-dia { background: #E8F5EC; color: #1F6B3F; font-weight: 600; }
.ok-dia .btn { margin-top: .6rem; }
.tarjeta.paso { border-left: 6px solid var(--rojo); }
.tarjeta.paso h3 { font-size: 1.25rem; margin: .2rem 0 .5rem; }
.decir { background: #F2F8F7; border-radius: 12px; padding: .6rem .8rem; margin: .6rem 0; }
.decir p { margin: .25rem 0; }
.stepper { display: flex; gap: .25rem; list-style: none; padding: 0; margin: 0 0 .8rem; overflow-x: auto; }
.stepper li { flex: 1 0 auto; text-align: center; font-size: .72rem; padding: .35rem .4rem; border-radius: 999px; background: #E7ECEE; color: var(--suave); white-space: nowrap; }
.stepper li.hecho { background: #E8F5EC; color: #1F6B3F; }
.stepper li.hecho::before { content: "✓ "; }
.stepper li.actual { background: var(--rojo); color: #fff; font-weight: 700; }
.reportes .rejilla-rep { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.reportes .rejilla-rep .btn { margin-top: .4rem; padding: .7rem .3rem; font-size: .9rem; }
.reporte-reloj { padding: .55rem .7rem; border-radius: 10px; background: #E8F5EC; color: #1F6B3F; font-size: .95rem; }
.reporte-reloj.pronto { background: #FFF4DC; color: #7A4D00; }
.reporte-reloj.tarde { background: var(--rojo); color: #fff; animation: latido 1.2s infinite; }
@keyframes latido { 50% { opacity: .7; } }
.desvio-estado { margin: .6rem 0 0; font-weight: 600; padding: .5rem .6rem; border-radius: 10px; }
.desvio-estado.pendiente { background: #FFF4DC; color: #7A4D00; }
.desvio-estado.autorizado { background: #E8F5EC; color: #1F6B3F; }
.desvio-estado.rechazado { background: #FDE8E8; color: #8E1F24; }
.chips-motivo { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0; }
.chips-motivo label { display: inline-flex; }
.chips-motivo input { display: none; }
.chips-motivo span { padding: .45rem .75rem; border-radius: 999px; background: #E7ECEE; cursor: pointer; font-size: .9rem; }
.chips-motivo input:checked + span { background: var(--prim); color: #fff; }
.btn.ayuda-wa { background: #1FA855; font-size: 1.05rem; }
/* Reportes y rutas fijas */
.feed .reporte.urgente, .historial li.urgente { border-left: 5px solid var(--rojo); }
.feed .reporte.malo { border-left: 5px solid var(--ambar); }
.alerta-roja { display: block; background: var(--rojo); color: #fff; text-decoration: none; }
.puntos-ruta { padding-left: 1.2rem; margin: .4rem 0; }
.puntos-ruta li { margin: .3rem 0; }
.dias-sem { display: flex; gap: .3rem; flex-wrap: wrap; margin: .5rem 0; }
.dias-sem label { display: inline-flex; }
.dias-sem input { display: none; }
.dias-sem span { padding: .45rem .6rem; border-radius: 10px; background: #E7ECEE; cursor: pointer; }
.dias-sem input:checked + span { background: var(--prim); color: #fff; }
.punto-ruta { display: grid; grid-template-columns: auto 1fr 1.6fr auto; gap: .4rem; align-items: center; padding: .5rem; border-radius: 10px; border: 1px solid var(--linea); margin-bottom: .4rem; }
.punto-ruta.activo { border: 2px solid var(--rojo); background: #FFF8F8; }
.punto-ruta input { margin: 0; padding: .45rem .5rem; }
.punto-ruta .hora { font-size: .75rem; color: var(--suave); }
.punto-ruta .dir-p { grid-column: 1 / -1; }
.punto-ruta > .pin { justify-self: center; align-self: center; width: 28px; }
@media (max-width: 520px) { .punto-ruta { grid-template-columns: auto 1fr; } .punto-ruta [data-c="nombre"], .punto-ruta .hora { grid-column: 1 / -1; } }
.marcar-punto { background: #F2F8F7; box-shadow: none; padding: .7rem; }
.marcar-punto .btn { margin-top: .4rem; }

/* Tramos seguros, combustible y paradas (2026-11) */
.alerta-ambar { display: block; background: #FFF4DC; color: #7A4D00; text-decoration: none; }
.alerta-ambar.fuerte { background: #FDE8C8; border-left: 6px solid var(--ambar); font-weight: 600; }
.tarjeta.reportes.detenido { border-left: 6px solid var(--ambar); }
.tarjeta.reportes.detenido h3 { margin-top: 0; }
.ruta-segura .puntos-ruta li.paso, .puntos-ruta li.paso { color: var(--azul); }
.punto-ruta.paso { border-color: #BFD3F6; }
.punto-ruta.gas { border-color: #F1D59C; }
.punto-ruta .ancho { grid-column: 2 / -1; }
.punto-ruta .combs { grid-column: 1 / -1; display: flex; gap: .8rem; font-size: .9rem; }
.punto-ruta .combs input { width: auto; margin: 0 .2rem 0 0; }
.punto-ruta .acciones-p { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: .3rem; }
.punto-ruta .mover button { border: 1px solid var(--linea); background: #fff; border-radius: 8px; padding: .2rem .55rem; font-size: 1rem; cursor: pointer; }
.agregar-puntos .btn { margin-top: .3rem; font-size: .9rem; padding: .6rem .5rem; }
.rejilla-rep .btn { min-height: 3.2rem; }

/* ---------- Marca Renta Rápida (operaciones.rentarapida.com.mx) ---------- */
.marca-rr { --prim: #0F4C81; --prim-2: #1593B8; --fondo: #F1F5F9; --azul: #1593B8; }
.marca-rr .barra { background: #0B1A2A; }
.marca-rr .menu a.activo { background: #E1F1F8; color: #0F4C81; }
.marca-rr .btn.sec { background: #E1F1F8; color: #0F4C81; }
.marca-rr .tarjeta.paso { border-left-color: #F5A623; }
.marca-rr .stepper li.actual { background: #F5A623; color: #0B1A2A; }
.marca-rr .pasos-reg li.activo { background: #0F4C81; }
.marca-rr .entrada .marca.logo-ancho img { width: 100%; max-width: 380px; height: auto; background: #000; border-radius: 16px; padding: 12px 16px; }
.marca-rr .entrada .marca img { background: #000; border-radius: 16px; }
.marca-rr .marca-mini img { border-radius: 6px; background: #000; }

/* Vista de cliente (administrador viendo el portal de una empresa) */
.banner-cliente { position: sticky; top: 0; z-index: 600; display: flex; gap: .6rem; align-items: center; justify-content: space-between; flex-wrap: wrap; background: #F5A623; color: #1B2A30; padding: .5rem 1rem; font-size: .9rem; }
.banner-cliente .btn { width: auto; margin: 0; padding: .4rem .8rem; background: #1B2A30; }

.nombre-empresa[data-portal] { cursor: pointer; text-decoration: underline; text-decoration-color: var(--linea); }
.btn.ver-portal { margin-top: .6rem; background: #F5A623; color: #1B2A30; }

/* ---------- KPIs ---------- */
.kpi-filtros { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: .8rem; }
.kpi-filtros .pestanas { margin: 0; }
.kpi-filtros select { width: auto; margin: 0; }
.kpi-donas { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .8rem; margin-bottom: .8rem; }
.kpi-dona { text-align: center; margin: 0; }
.kpi-dona h3 { margin: 0 0 .3rem; }
.dona { width: 140px; height: 140px; }
.dona-num { font-size: 22px; font-weight: 800; fill: var(--texto); }
.dona-txt { font-size: 11px; fill: var(--suave); }
.kpi-pie small { display: block; color: var(--suave); font-size: .75rem; }
.kpi-pie b { color: var(--verde); font-size: 1.1rem; }
.kpi-leyenda { font-size: .82rem; margin: .3rem 0; }
.p-verde { color: var(--verde); } .p-rojo { color: var(--rojo); } .p-gris { color: var(--suave); }
.kpi-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: .6rem; margin-bottom: .8rem; }
.kpi-tile { background: #fff; border-radius: 12px; box-shadow: var(--sombra); padding: .7rem .8rem; }
.kpi-tile.con-detalle { cursor: pointer; }
.kpi-tile.abierto { outline: 2px solid var(--prim-2); }
.kpi-t { color: var(--suave); font-size: .85rem; display: flex; justify-content: space-between; }
.kpi-v { font-size: 1.6rem; font-weight: 800; margin-top: .2rem; }
.kpi-v small { font-size: .78rem; font-weight: 600; color: var(--suave); }
.kpi-v.verde { color: var(--verde); } .kpi-v.rojo { color: var(--rojo); } .kpi-v.ambar { color: var(--ambar); }
.tabla-scroll { overflow-x: auto; }
.kpi-seg td, .kpi-seg th { white-space: nowrap; vertical-align: top; }
.barra-avance { width: 80px; height: 8px; background: #E7ECEE; border-radius: 6px; overflow: hidden; }
.barra-avance i { display: block; height: 100%; background: var(--prim-2); }

/* Evidencias y Administrar cliente */
.ev-viaje summary { cursor: pointer; list-style: none; }
.ev-viaje summary::-webkit-details-marker { display: none; }
.barra-avance.ancha { width: 100%; margin-top: .4rem; }
.ev-punto { border-top: 1px solid var(--linea); margin-top: .7rem; padding-top: .5rem; }
.ev-punto h4 { margin: .2rem 0 .4rem; }
.ev-pasos { list-style: none; padding: 0; margin: 0; }
.ev-pasos li { padding: .4rem 0; border-bottom: 1px dashed var(--linea); display: flex; flex-direction: column; gap: .15rem; color: var(--suave); }
.ev-pasos li.hecho { color: var(--texto); }
.ev-pasos li small { color: var(--suave); }
.botones-empresa .btn, .botones-cliente .btn { width: auto; flex: 1 1 220px; }
.botones-cliente { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 1rem; }
.botones-cliente .btn { margin: 0; }

/* Gasolineras */
.combs-grande { display: flex; gap: .5rem; flex-wrap: wrap; margin: .5rem 0; }
.combs-grande label { display: inline-flex; }
.combs-grande input { display: none; }
.combs-grande span { padding: .55rem .9rem; border-radius: 999px; background: #E7ECEE; cursor: pointer; font-weight: 600; }
.combs-grande input:checked + span { background: #D98E04; color: #fff; }