/* PARQUEOS — estilos mobile-first */
:root{
  --azul:#0d3b66; --azul2:#1d5c96; --ok:#198754; --alerta:#dc3545;
  --ambar:#ffc107; --gris:#f4f6f9; --borde:#e3e8ef;
}
*{ -webkit-tap-highlight-color: transparent; }
body{
  background:var(--gris);
  font-size:16px;
  padding-bottom:76px;          /* deja sitio a la barra inferior */
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

/* ---------- Barra superior ---------- */
.barra-sup{
  background:var(--azul); color:#fff; position:sticky; top:0; z-index:1030;
  padding:.55rem 0; box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.barra-sup .marca{
  color:#fff; text-decoration:none; font-weight:700; font-size:1.05rem;
  display:flex; align-items:center; gap:.35rem; letter-spacing:.5px;
}
.chip-sucursal{
  background:rgba(255,255,255,.16); color:#fff; border-radius:20px;
  padding:.15rem .6rem; font-size:.78rem; white-space:nowrap;
  max-width:42vw; overflow:hidden; text-overflow:ellipsis;
}
.usuario-nombre{ font-size:.85rem; opacity:.9; }
.badge-rol{
  font-size:.68rem; border-radius:6px; padding:.2rem .45rem; font-weight:600;
  background:rgba(255,255,255,.2); color:#fff; text-transform:uppercase;
}
.rol-admin{ background:#ffc107; color:#3a2c00; }
.rol-operador{ background:#20c997; color:#053b2b; }
.rol-visor{ background:#adb5bd; color:#222; }

/* ---------- Barra inferior (navegación) ---------- */
.nav-inferior{
  position:fixed; bottom:0; left:0; right:0; z-index:1040;
  background:#fff; border-top:1px solid var(--borde);
  display:flex; padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -2px 10px rgba(0,0,0,.07);
}
.nav-inferior a{
  flex:1; text-align:center; padding:.5rem .2rem .45rem;
  color:#6b7280; text-decoration:none; font-size:.68rem; font-weight:600;
  display:flex; flex-direction:column; align-items:center; gap:1px;
  min-height:58px; justify-content:center;
}
.nav-inferior a span{ font-size:1.3rem; line-height:1; }
.nav-inferior a.activo{ color:var(--azul); }
.nav-inferior a.activo span{ transform:translateY(-1px); }

/* ---------- Placa ---------- */
.placa{
  font-family:ui-monospace,Menlo,Consolas,monospace; font-weight:800;
  letter-spacing:2px;
}
.placa-g{                       /* placa grande para el operador */
  font-size:2rem; text-align:center; text-transform:uppercase;
  border:3px solid var(--azul); border-radius:12px; padding:.5rem;
  background:#fff; width:100%; letter-spacing:6px;
}
.placa-mini{
  font-family:ui-monospace,Menlo,Consolas,monospace; font-weight:700;
  background:#eef2f7; border:1px solid var(--borde); border-radius:6px;
  padding:.1rem .4rem; font-size:.85rem; letter-spacing:1px;
}

/* ---------- Botones grandes (operador) ---------- */
.btn-gigante{
  font-size:1.15rem; font-weight:700; padding:1rem; border-radius:14px; width:100%;
  display:flex; align-items:center; justify-content:center; gap:.5rem;
}
.btn-gigante span{ font-size:1.5rem; }
.btn-ingreso{ background:var(--ok); color:#fff; border:none; }
.btn-salida{ background:var(--alerta); color:#fff; border:none; }
.btn-ingreso:active,.btn-salida:active{ transform:scale(.985); filter:brightness(.95); }

/* ---------- Tarjetas ---------- */
.tarjeta{
  background:#fff; border:1px solid var(--borde); border-radius:14px;
  padding:.9rem; margin-bottom:.75rem; box-shadow:0 1px 3px rgba(16,24,40,.05);
}
.tarjeta-solida{ border-left:5px solid var(--azul); }
.cifra{ font-size:1.6rem; font-weight:800; line-height:1.1; }
.cifra-chica{ font-size:1.15rem; font-weight:700; }
.etiqueta{ font-size:.75rem; color:#6b7280; text-transform:uppercase; letter-spacing:.4px; font-weight:600; }

/* ---------- Estados ---------- */
.pill{ border-radius:20px; padding:.18rem .6rem; font-size:.72rem; font-weight:700; }
.pill-mensual{ background:#d1f3e4; color:#0b6b45; }
.pill-diario{ background:#e8eef7; color:#2b4b73; }
.pill-adentro{ background:#ffe9a8; color:#6b4c00; }
.pill-fuera{ background:#e9ecef; color:#495057; }

/* ---------- Varios ---------- */
.lista-simple{ list-style:none; padding:0; margin:0; }
.lista-simple li{
  display:flex; align-items:center; gap:.6rem;
  padding:.65rem .2rem; border-bottom:1px solid var(--borde);
}
.lista-simple li:last-child{ border-bottom:none; }
.foto-veh{
  width:56px; height:56px; object-fit:cover; border-radius:10px;
  border:1px solid var(--borde); background:#eef2f7;
}
.foto-thumb{
  width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px;
  border:1px solid var(--borde); cursor:zoom-in; background:#eef2f7;
}
.zona-arrastre{
  border:2px dashed #c3cede; border-radius:12px; padding:1rem; text-align:center;
  color:#6b7280; background:#fafcff;
}
.res-insiste{
  position:absolute; left:0; right:0; top:100%; z-index:1080;
  background:#fff; border:1px solid var(--borde); border-radius:0 0 12px 12px;
  max-height:45vh; overflow:auto; box-shadow:0 10px 24px rgba(0,0,0,.14);
}
.res-insiste .item{ padding:.75rem .9rem; border-bottom:1px solid var(--borde); }
.res-insiste .item:active{ background:#eef4fb; }
.tabla-movil td, .tabla-movil th{ font-size:.86rem; vertical-align:middle; }
@media (max-width:576px){
  .container{ padding-left:.75rem; padding-right:.75rem; }
  .cifra{ font-size:1.4rem; }
}
@media print{
  .barra-sup,.nav-inferior,.no-imprimir{ display:none !important; }
  body{ background:#fff; padding:0; }
  .tarjeta{ border:none; box-shadow:none; }
}

/* =========================================================
   FASE 2 — caja, avisos, comprobantes, PWA
   ========================================================= */

/* ---------- Aviso de conexión / cola pendiente ---------- */
.aviso-offline{
  margin:0 0 .75rem; border-radius:12px; overflow:hidden;
  border:1px solid #f0b429; background:#fff8e1;
}
.ao-linea{ padding:.6rem .8rem; font-size:.85rem; display:flex; align-items:center;
           gap:.5rem; justify-content:space-between; }
.ao-linea + .ao-linea{ border-top:1px solid #f4dfa8; }
.ao-linea.pend{ background:#fff3d6; }
.ao-linea.rech{ background:#fdecea; color:#8a1c14; }
.ao-btn{ background:var(--azul); color:#fff; border:0; border-radius:8px;
         padding:.35rem .7rem; font-size:.78rem; font-weight:700; white-space:nowrap; }

/* ---------- Barra de caja ---------- */
.barra-caja{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  background:#fff; border:1px solid var(--borde); border-left:5px solid var(--ok);
  border-radius:12px; padding:.6rem .75rem; margin-bottom:.75rem;
}
.bc-info{ display:flex; align-items:center; gap:.55rem; min-width:0; }
.bc-punto{ width:11px; height:11px; border-radius:50%; flex:none; }
.bc-punto.ok{ background:var(--ok); box-shadow:0 0 0 4px rgba(25,135,84,.18); }
.bc-punto.no{ background:var(--alerta); box-shadow:0 0 0 4px rgba(220,53,69,.18); }
.bc-t{ font-size:.85rem; font-weight:700; line-height:1.15; }
.bc-s{ font-size:.75rem; color:#6b7280; }
.bc-btn{
  background:var(--azul); color:#fff; text-decoration:none; border-radius:9px;
  padding:.5rem .7rem; font-size:.8rem; font-weight:700; white-space:nowrap;
}
.bc-btn.alerta{ background:var(--alerta); }

/* ---------- Botones extra del panel ---------- */
.btn-camara,.btn-nuevo{
  border:2px solid var(--azul); background:#fff; color:var(--azul);
  border-radius:14px; width:62px; font-size:1.5rem; display:flex;
  align-items:center; justify-content:center; flex:none;
}
.btn-nuevo{ background:var(--azul); color:#fff; }
.btn-camara:active,.btn-nuevo:active{ transform:scale(.96); }

/* ---------- Tarjeta de vehículo ---------- */
.tarjeta-vehiculo{ border-left:5px solid var(--azul); }
.placa-grande{
  font-family:ui-monospace,Menlo,Consolas,monospace; font-weight:800;
  font-size:1.8rem; letter-spacing:4px; line-height:1.1; color:var(--azul);
}
.foto-veh-grande{
  width:92px; height:92px; object-fit:cover; border-radius:12px;
  border:1px solid var(--borde); background:#eef2f7; cursor:zoom-in; flex:none;
}
.foto-veh-grande.ampliada{
  position:fixed; inset:0; width:100vw; height:100vh; z-index:1090;
  border-radius:0; object-fit:contain; background:rgba(0,0,0,.92); cursor:zoom-out;
}
.accion-caja{ background:#f7f9fc; border-radius:12px; padding:.7rem .8rem; margin:.75rem 0; }
.fila-dato{ display:flex; justify-content:space-between; align-items:baseline;
            font-size:.9rem; padding:.22rem 0; }
.fila-dato + .fila-dato{ border-top:1px dotted #d8e0ea; }
.fila-dato b.grande{ font-size:1.25rem; color:var(--azul); }

/* ---------- Comprobante registrado ---------- */
.tarjeta-exito{ border-left:5px solid var(--ok); background:#f4fdf8; }
.exito-titulo{ font-size:1.1rem; font-weight:800; color:#0b6b45; margin-bottom:.5rem; }
.btn-ticket,.btn-wsp{
  flex:1; text-align:center; text-decoration:none; border-radius:10px;
  padding:.7rem .5rem; font-weight:700; font-size:.9rem; border:0;
}
.btn-ticket{ background:#e7eef7; color:var(--azul); }
.btn-wsp{ background:#25d366; color:#fff; }

/* ---------- Avisos flotantes ---------- */
.toast-parq{
  position:fixed; left:50%; transform:translateX(-50%); bottom:84px; z-index:1100;
  background:#1f2937; color:#fff; padding:.7rem 1rem; border-radius:10px;
  font-size:.88rem; max-width:92vw; box-shadow:0 8px 24px rgba(0,0,0,.25);
  animation:aparece .18s ease-out;
}
.toast-parq.warn{ background:#a15c00; }
.toast-parq.ok{ background:#0b6b45; }
@keyframes aparece{ from{ opacity:0; transform:translate(-50%,8px); } to{ opacity:1; } }

/* ---------- Sugerencias ---------- */
.sug-item{ padding:.6rem .8rem; border-bottom:1px solid var(--borde); cursor:pointer; }
.sug-item:last-child{ border-bottom:none; }
.sug-item:active{ background:#eef4fb; }
.sug-nom{ margin-left:.5rem; font-size:.85rem; }

/* ---------- Indicadores (caja / tablero) ---------- */
.kpi{ background:#f7f9fc; border:1px solid var(--borde); border-radius:12px;
      padding:.6rem .5rem; }
.kpi-n{ font-size:1.15rem; font-weight:800; color:var(--azul); }
.kpi-t{ font-size:.72rem; color:#6b7280; text-transform:uppercase; letter-spacing:.3px; }
.cifra-grande{ font-size:2.1rem; font-weight:800; color:#0b6b45; line-height:1.1; }
.pill-alerta{ background:#fde2e0; color:#8a1c14; }

/* ---------- Botón instalar (PWA) ---------- */
.btn-instalar{
  position:fixed; left:.75rem; right:.75rem; bottom:74px; z-index:1050;
  background:var(--azul); color:#fff; border:0; border-radius:12px;
  padding:.8rem; font-size:.9rem; font-weight:700; box-shadow:0 6px 20px rgba(0,0,0,.25);
}

/* ---------- Detalles / summary ---------- */
details.tarjeta summary{ cursor:pointer; padding:.2rem 0; list-style:none; }
details.tarjeta summary::-webkit-details-marker{ display:none; }
details.tarjeta summary::before{ content:"▸ "; color:var(--azul); }
details.tarjeta[open] summary::before{ content:"▾ "; }