/* ═════════════════════════════════════════
   DealerCheques Web (PWA) — misma paleta que la app de escritorio
═════════════════════════════════════════ */
@font-face{ font-family:'DM Sans'; font-weight:300; src:url('vendor/fonts/dm-sans-latin-300-normal.woff2') format('woff2'); font-display:swap; }
@font-face{ font-family:'DM Sans'; font-weight:400; src:url('vendor/fonts/dm-sans-latin-400-normal.woff2') format('woff2'); font-display:swap; }
@font-face{ font-family:'DM Sans'; font-weight:500; src:url('vendor/fonts/dm-sans-latin-500-normal.woff2') format('woff2'); font-display:swap; }
@font-face{ font-family:'DM Sans'; font-weight:600; src:url('vendor/fonts/dm-sans-latin-600-normal.woff2') format('woff2'); font-display:swap; }
@font-face{ font-family:'DM Sans'; font-weight:700; src:url('vendor/fonts/dm-sans-latin-700-normal.woff2') format('woff2'); font-display:swap; }
@font-face{ font-family:'JetBrains Mono'; font-weight:600; src:url('vendor/fonts/jetbrains-mono-latin-600-normal.woff2') format('woff2'); font-display:swap; }

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

:root{
  --bg:#E8EAED; --bg-card:#FFFFFF; --bg-input:#F8F9FA; --bg-hover:#F0F1F3;
  --border:#C5CAD3;
  --dealer:#8B1A2B; --dealer-dark:#6E1422; --dealer-light:#F9ECEE;
  --dealer-mid:#C4606E; --dealer-border:#E8B4BB;
  --green:#059669; --green-bg:#ECFDF5; --green-border:#A7F3D0; --green-text:#065F46;
  --yellow:#D97706; --yellow-bg:#FFFBEB; --yellow-border:#FDE68A; --yellow-text:#92400E;
  --red:#DC2626; --red-bg:#FEF2F2; --red-border:#FECACA; --red-text:#991B1B;
  --text:#111827; --text-2:#4B5563; --text-3:#9CA3AF;
  --font:'DM Sans',sans-serif; --mono:'JetBrains Mono',monospace;
  --r-sm:8px; --r-md:12px; --r-lg:18px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

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

.pantalla{ display:none; height:100%; }
.pantalla.activa{ display:block; }

/* ── LOGIN ── */
#p-login.activa{ display:flex; align-items:center; justify-content:center; padding:24px;
  background:linear-gradient(160deg, var(--dealer-dark), #4A0E18 70%, #34090F); height:100%; }
.login-wrap{ width:100%; max-width:360px; background:var(--bg-card); border-radius:var(--r-lg);
  padding:32px 24px; box-shadow:0 20px 60px rgba(0,0,0,.35); }
.marca{ text-align:center; margin-bottom:24px; }
.marca-icono{ width:48px; height:48px; border-radius:12px; background:var(--dealer); color:#fff;
  display:grid; place-items:center; font-weight:700; font-size:16px; margin:0 auto 12px; }
.marca-icono.chico{ width:30px; height:30px; border-radius:8px; font-size:11px; margin:0; }
.marca h1{ font-size:19px; font-weight:700; margin-bottom:4px; }
.marca p{ font-size:12.5px; color:var(--text-3); }
.campo{ margin-bottom:14px; text-align:left; }
.campo label{ display:block; font-size:12px; font-weight:600; color:var(--text-2); margin-bottom:5px; }
.campo input{ width:100%; font-family:var(--font); font-size:15px; padding:12px 13px;
  background:var(--bg-input); border:1px solid var(--border); border-radius:var(--r-sm); outline:none; }
.campo input:focus{ border-color:var(--dealer-mid); box-shadow:0 0 0 3px var(--dealer-light); }
.login-error{ font-size:12.5px; color:var(--red); margin-top:12px; min-height:16px; text-align:center; font-weight:500; }

/* ── botones ── */
.btn{ font-family:var(--font); font-size:14.5px; font-weight:600; border-radius:var(--r-sm);
  padding:13px 0; border:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.btn-primary{ background:var(--dealer); color:#fff; }
.btn-primary:active{ background:var(--dealer-dark); }
.btn-outline{ background:#fff; border:1.5px solid var(--border); color:var(--text-2); }
.btn-red-ghost{ background:#fff; border:1.5px solid var(--red-border); color:var(--red); }
.btn-ancho{ width:100%; margin-top:6px; }

/* ── App shell ── */
#p-app.activa{ display:flex; flex-direction:column; height:100%; }
.topbar{ flex-shrink:0; display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; background:var(--bg-card); border-bottom:1px solid var(--border); }
.topbar-marca{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:15px; }
.icon-btn{ background:none; border:none; color:var(--text-2); padding:6px; border-radius:8px; }
.icon-btn svg{ width:20px; height:20px; display:block; }

.vista{ display:none; flex:1; min-height:0; overflow-y:auto; padding:14px 16px calc(90px + var(--safe-b)); }
.vista.activa{ display:block; }

/* ── KPIs ── */
.kpis{ display:flex; gap:10px; margin-bottom:14px; }
.kpi{ flex:1; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-md); padding:12px 14px; }
.kpi-lbl{ display:block; font-size:10.5px; font-weight:600; color:var(--text-3); text-transform:uppercase; letter-spacing:.4px; }
.kpi-val{ display:block; font-family:var(--mono); font-size:18px; font-weight:600; margin-top:4px; }

/* ── filtros (scroll horizontal, dedo) ── */
.filtros{ display:flex; gap:8px; overflow-x:auto; margin-bottom:14px; padding-bottom:2px; scrollbar-width:none; }
.filtros::-webkit-scrollbar{ display:none; }
.chip-filtro{ flex-shrink:0; font-family:var(--font); font-size:12.5px; font-weight:600; color:var(--text-2);
  background:var(--bg-card); border:1px solid var(--border); border-radius:99px; padding:7px 14px; }
.chip-filtro.activo{ background:var(--dealer); border-color:var(--dealer); color:#fff; }

/* ── tarjetas de cheque ── */
.lista-cheques{ display:flex; flex-direction:column; gap:10px; }
.tarjeta-cheque{ background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-md);
  padding:13px 14px; display:flex; align-items:center; gap:12px; }
.tc-fecha{ flex-shrink:0; width:44px; text-align:center; }
.tc-fecha .d{ font-family:var(--mono); font-size:18px; font-weight:700; line-height:1; }
.tc-fecha .m{ font-size:9.5px; color:var(--text-3); text-transform:uppercase; margin-top:2px; }
.tc-info{ flex:1; min-width:0; }
.tc-libr{ font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tc-sub{ font-size:11.5px; color:var(--text-3); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tc-right{ flex-shrink:0; text-align:right; }
.tc-monto{ font-family:var(--mono); font-weight:600; font-size:14px; }
.badge{ display:inline-block; font-size:9.5px; font-weight:700; letter-spacing:.2px; text-transform:uppercase;
  padding:2px 7px; border-radius:5px; margin-top:4px; border:1px solid transparent; }
.badge.vencido{ background:var(--red-bg); color:var(--red-text); border-color:var(--red-border); }
.badge.urgente{ background:var(--yellow-bg); color:var(--yellow-text); border-color:var(--yellow-border); }
.badge.porvencer{ background:var(--blue-bg,#EFF6FF); color:var(--blue-text,#1E40AF); border-color:var(--blue-border,#BFDBFE); }
.badge.pendiente{ background:var(--bg-input); color:var(--text-2); border-color:var(--border); }
.badge.cobrado{ background:var(--green-bg); color:var(--green-text); border-color:var(--green-border); }

/* ── escanear ── */
.scan-card{ text-align:center; padding:28px 20px; background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--r-lg); margin-top:10px; }
.scan-icono{ width:64px; height:64px; border-radius:16px; background:var(--dealer-light); color:var(--dealer);
  display:grid; place-items:center; margin:0 auto 16px; }
.scan-icono svg{ width:28px; height:28px; }
.scan-card h2{ font-size:17px; margin-bottom:6px; }
.scan-card p{ font-size:12.5px; color:var(--text-3); margin-bottom:18px; line-height:1.5; }
.scan-preview{ margin-top:14px; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--border); position:relative; }
.scan-preview img{ width:100%; display:block; }
.scan-estado{ position:absolute; bottom:0; left:0; right:0; background:rgba(17,24,39,.75); color:#fff;
  font-size:12.5px; padding:10px 12px; text-align:center; }

/* ── ajustes ── */
.lista-simple{ background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-md); padding:4px 14px; }
.fila-ajuste{ display:flex; justify-content:space-between; align-items:center; padding:13px 0; font-size:13.5px;
  border-bottom:1px solid #ECEEF1; }
.fila-ajuste:last-of-type{ border-bottom:none; }
.fila-valor{ color:var(--text-2); font-size:12.5px; }
#btn-salir{ margin:16px 0 6px; }

/* ── nav inferior ── */
.nav-inferior{ flex-shrink:0; display:flex; align-items:center; justify-content:space-around;
  padding:8px 10px calc(8px + var(--safe-b)); background:var(--bg-card); border-top:1px solid var(--border); }
.nav-item{ background:none; border:none; display:flex; flex-direction:column; align-items:center; gap:3px;
  color:var(--text-3); font-family:var(--font); font-size:10.5px; font-weight:600; padding:4px 14px; }
.nav-item svg{ width:22px; height:22px; }
.nav-item.activo{ color:var(--dealer); }
/* botón de escanear: dentro de la barra (no flotando encima del borde),
   con el ícono en un círculo bordó para que se distinga de los demás */
.nav-item-central{ color:var(--dealer); padding:0 14px; }
.cam-circulo{ width:46px; height:46px; border-radius:50%; background:var(--dealer); color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 3px 10px rgba(139,26,43,.3); }
.cam-circulo svg{ width:22px; height:22px; display:block; }

/* ── hoja de detalle (bottom sheet) ── */
.hoja-overlay{ position:fixed; inset:0; background:rgba(17,24,39,.5); z-index:50; display:none; }
.hoja-overlay.show{ display:block; }
.hoja{ position:absolute; left:0; right:0; bottom:0; background:var(--bg-card); border-radius:20px 20px 0 0;
  max-height:85vh; overflow-y:auto; padding:10px 20px calc(24px + var(--safe-b)); }
.hoja-agarradera{ width:36px; height:4px; background:var(--border); border-radius:99px; margin:6px auto 14px; }

/* ── buscador ── */
.buscador{ margin-bottom:12px; }
.buscador input{ width:100%; font-family:var(--font); font-size:15px; padding:11px 13px;
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-sm); outline:none; }
.buscador input:focus{ border-color:var(--dealer-mid); box-shadow:0 0 0 3px var(--dealer-light); }

/* ── formulario de cheque (dentro de la hoja) ── */
.campo select, .campo textarea{ width:100%; font-family:var(--font); font-size:15px; padding:12px 13px;
  background:var(--bg-input); border:1px solid var(--border); border-radius:var(--r-sm); outline:none; color:var(--text); }
.campo input.error{ border-color:var(--red); box-shadow:0 0 0 3px var(--red-bg); }
.fila2{ display:flex; gap:10px; }
.fila2 > .campo{ flex:1; min-width:0; }
.form-titulo{ font-size:16px; margin-bottom:14px; }
.form-seccion{ font-size:10.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--text-3);
  margin:6px 0 10px; padding-top:10px; border-top:1px solid #ECEEF1; }
.form-foto{ width:100%; border-radius:var(--r-sm); border:1px solid var(--border); display:block; margin-bottom:14px; }
.form-acciones{ display:flex; gap:10px; margin-top:16px; }
.form-acciones .btn{ flex:1; }

/* ── detalle de cheque ── */
.det-filas{ display:flex; flex-direction:column; gap:9px; font-size:13.5px; }
.det-fila{ display:flex; justify-content:space-between; gap:12px; }
.det-fila > span:first-child{ color:var(--text-3); flex-shrink:0; }
.det-fila > span:last-child{ text-align:right; word-break:break-word; }
.det-nota{ font-size:11.5px; font-weight:600; color:#9A3412; background:#FFF7ED; border:1px solid #FED7AA;
  border-radius:8px; padding:7px 10px; margin-top:10px; }
.det-foto{ width:100%; border-radius:var(--r-sm); border:1px solid var(--border); display:block; margin-top:14px; }
.det-acciones{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.det-acciones .btn{ flex:1 1 40%; }

/* ── toast ── */
.toast{ position:fixed; left:50%; bottom:calc(84px + var(--safe-b)); transform:translateX(-50%) translateY(20px);
  background:#111827; color:#fff; font-size:13px; padding:11px 16px; border-radius:10px; max-width:90%;
  text-align:center; opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; z-index:80; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ═════════ ANIMACIONES (mismo lenguaje visual que la app de escritorio) ═════════ */
@keyframes pageIn{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }
@keyframes riseIn{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }
@keyframes sheetUp{ from{opacity:0; transform:translateY(100%)} to{opacity:1; transform:none} }
@keyframes lockIn{ from{opacity:0; transform:translateY(14px) scale(.97)} to{opacity:1; transform:none} }
@keyframes fadeScale{ from{opacity:0; transform:scale(.94)} to{opacity:1; transform:scale(1)} }
@keyframes pulseCam{ 0%,100%{box-shadow:0 6px 16px rgba(139,26,43,.4)} 50%{box-shadow:0 6px 22px rgba(139,26,43,.65)} }

.login-wrap{ animation:lockIn .4s ease; }
.vista.activa{ animation:pageIn .3s ease; }
.hoja-overlay.show{ animation:fadeScale .18s ease; }
.hoja-overlay.show .hoja{ animation:sheetUp .3s cubic-bezier(.22,.61,.36,1); }

.lista-cheques.stagger > .tarjeta-cheque{ opacity:0; animation:riseIn .42s cubic-bezier(.22,.61,.36,1) forwards; }
.lista-cheques.stagger > .tarjeta-cheque:nth-child(1){ animation-delay:.02s }
.lista-cheques.stagger > .tarjeta-cheque:nth-child(2){ animation-delay:.07s }
.lista-cheques.stagger > .tarjeta-cheque:nth-child(3){ animation-delay:.12s }
.lista-cheques.stagger > .tarjeta-cheque:nth-child(4){ animation-delay:.17s }
.lista-cheques.stagger > .tarjeta-cheque:nth-child(5){ animation-delay:.22s }
.lista-cheques.stagger > .tarjeta-cheque:nth-child(n+6){ animation-delay:.26s }

.tarjeta-cheque{ transition:transform .12s ease, box-shadow .12s ease; }
.tarjeta-cheque:active{ transform:scale(.98); background:var(--bg-hover); }

.btn{ transition:transform .1s ease, background .15s ease, opacity .15s ease; }
.btn:active{ transform:scale(.97); }

.nav-item{ transition:color .15s ease; }
.cam-circulo{ transition:transform .1s ease; }
.nav-item-central:active .cam-circulo{ transform:scale(.92); }

.chip-filtro{ transition:background .15s ease, color .15s ease, border-color .15s ease; }

.scan-icono{ transition:transform .2s ease; }
.scan-card:active .scan-icono{ transform:scale(1.06); }

@media (prefers-reduced-motion:reduce){
  .login-wrap, .vista.activa, .hoja-overlay.show, .hoja-overlay.show .hoja,
  .lista-cheques.stagger > .tarjeta-cheque{ animation:none !important; }
}

/* pantalla no muy angosta (tablet) */
@media (min-width:480px){
  #p-app.activa{ max-width:480px; margin:0 auto; border-left:1px solid var(--border); border-right:1px solid var(--border); }
}

/* logo nuevo (imagen) dentro del cuadradito de marca */
.marca-icono img{ width:76%; height:auto; display:block; }