/* Pasaporte · app del negocio. Tema claro de uso diario (el que la dueña aprobó en el demo).
   Los colores de la marca se ponen al entrar (--action, --acento, --bg, --barra). Espaciado en múltiplos de 4 px. */
:root{
  color-scheme:light;
  --bg:#F2F3F5; --panel:#FFFFFF; --panel-2:#F6F7F8; --panel-3:#ECEEF1;
  --line:#E3E5E9; --line-2:#CFD3D9;
  --fg:#16181C; --fg-2:#3E444C; --muted:#5F6670;
  --action:#16181C; --on-action:#FFFFFF; --acento:#16181C; --barra:#3E63DD;
  --ok:#1E8A5A; --ok-bg:#E2F3EA; --ok-fg:#15663F;
  --soon:#B7791F; --soon-bg:#FCF1DE; --soon-fg:#7E520F;
  --info-bg:#E7EDFA; --info-fg:#2C4C99; --err:#C2362C;
  --font:'Plus Jakarta Sans', 'Segoe UI', sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0; background:var(--bg); color:var(--fg)}
body{font-family:var(--font); font-size:16px; line-height:1.45; -webkit-font-smoothing:antialiased}
button,input,select{font:inherit; color:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed}
:focus-visible{outline:2px solid var(--action); outline-offset:2px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
@media (prefers-reduced-motion:reduce){ *{transition:none!important; animation:none!important} }

.app{max-width:760px; margin:0 auto; padding:16px max(16px, env(safe-area-inset-right)) calc(96px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); display:flex; flex-direction:column; gap:16px}
.app.sin-nav{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
.top{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:60px}
.logo{display:block; height:56px; width:auto; border-radius:10px}
.marca-txt{font-weight:800; font-size:18px}
.quien{font-size:13px; color:var(--muted); text-align:right}

.h1{margin:0; font-size:26px; line-height:1.2; font-weight:700; letter-spacing:-.015em}
.h1[tabindex="-1"]:focus{outline:none}
.h2{margin:0; font-size:20px; line-height:1.25; font-weight:700}
.lead{margin:0; color:var(--fg-2); font-size:15px}
.cap{font-size:13px; font-weight:600; color:var(--muted)}
.hint{font-size:13px; color:var(--muted)}
.num{font-variant-numeric:tabular-nums; white-space:nowrap}

/* Botones */
.primary{min-height:52px; padding:0 20px; border-radius:14px; border:0; background:var(--action); color:var(--on-action); font-size:16px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; text-align:center; text-decoration:none; transition:opacity .2s}
.primary:disabled{background:var(--panel-3); color:var(--muted)}
.primary[aria-busy="true"]{opacity:.7}
.ghost{min-height:44px; padding:0 16px; border-radius:12px; border:1px solid var(--line-2); background:var(--panel); color:var(--fg); font-size:14px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; text-align:center; text-decoration:none; transition:border-color .2s}
.ghost:hover{border-color:var(--muted)}
.link{min-height:44px; padding:0 4px; border:0; background:transparent; color:var(--fg-2); font-size:14px; font-weight:600; text-decoration:underline; text-underline-offset:4px}
.link.danger{color:var(--err)}
.fila{display:flex; flex-wrap:wrap; gap:8px}
.fila > .ghost, .fila > .primary{flex:1 1 140px}
.barra-accion{position:sticky; bottom:calc(8px + env(safe-area-inset-bottom)); z-index:10; display:flex; padding:12px; border-radius:18px; background:rgba(255,255,255,.94); border:1px solid var(--line-2); backdrop-filter:blur(8px)}
.barra-accion .primary{flex:1; min-height:56px}

/* Formularios */
.campo{display:flex; flex-direction:column; gap:8px; min-width:0}
.campo > label, .lbl{font-size:14px; font-weight:600; color:var(--fg-2)}
.campos{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:16px}
.inp{min-height:48px; width:100%; min-width:0; border-radius:12px; border:1px solid var(--line-2); background:var(--panel); padding:0 12px; font-size:16px}
.inp[aria-invalid="true"]{border-color:var(--err); box-shadow:0 0 0 1px var(--err)}
.affix{display:flex; border-radius:12px; border:1px solid var(--line-2); background:var(--panel); overflow:hidden}
.affix .inp{border:0; border-radius:0}
.affix span{display:flex; align-items:center; padding:0 12px; font-size:14px; color:var(--muted); background:var(--panel-2)}
.affix:has([aria-invalid="true"]){border-color:var(--err); box-shadow:0 0 0 1px var(--err)}
.ayuda{font-size:13px; color:var(--muted)}
.err{font-size:14px; color:var(--err); font-weight:600}
.err:empty{display:none}

/* Entrada con código */
.entrada{min-height:calc(100dvh - 120px); display:flex; flex-direction:column; justify-content:center; gap:20px; max-width:420px; margin:0 auto; width:100%}
.entrada .logo{height:72px; align-self:flex-start}
.codigo{font-size:30px; font-weight:700; letter-spacing:.3em; text-transform:uppercase; text-align:center; min-height:64px}

/* Navegación de abajo (solo la dueña) */
.nav{position:fixed; left:0; right:0; bottom:0; z-index:20; display:grid; grid-template-columns:repeat(3, 1fr); background:var(--panel); border-top:1px solid var(--line); padding:6px 8px calc(6px + env(safe-area-inset-bottom))}
.nav button{min-height:56px; border:0; background:transparent; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-size:12.5px; font-weight:600; color:var(--muted); border-radius:12px}
.nav button[aria-current="page"]{color:var(--action); background:color-mix(in srgb, var(--action) 8%, #FFFFFF)}

/* Chips */
.chip{display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px; font-size:12.5px; font-weight:600; white-space:nowrap}
.chip.wait{color:var(--fg-2); border:1px dashed var(--line-2)}
.chip.main{background:var(--info-bg); color:var(--info-fg)}
.chip.ok{background:var(--ok-bg); color:var(--ok-fg)}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip-b{min-height:44px; padding:0 14px; border-radius:999px; border:1px solid var(--line-2); background:var(--panel); font-size:14px; font-weight:600}
.chip-b[aria-pressed="true"]{background:var(--action); color:var(--on-action); border-color:var(--action)}
.chip-add{border-style:dashed; background:transparent}

/* Carros de hoy */
.hero{display:flex; align-items:center; gap:16px; width:100%; min-height:88px; padding:16px 20px; border:0; border-radius:20px; background:var(--action); color:var(--on-action); text-align:left}
.hero b{display:block; font-size:20px}
.hero small{display:block; font-size:14px; margin-top:4px; opacity:.8}
.hero-plus{flex:none; width:52px; height:52px; border-radius:50%; background:var(--on-action); color:var(--action); display:flex; align-items:center; justify-content:center; font-size:32px; font-weight:700}
.lista{display:flex; flex-direction:column; gap:12px}
.cabeza{display:flex; justify-content:space-between; align-items:center; gap:12px}
.tarjeta{background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:16px; display:flex; flex-direction:column; gap:12px; box-shadow:0 1px 2px rgba(22,24,28,.06)}
.t-top{display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap}
.t-main{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
.t-carro{margin:0; font-size:20px; font-weight:700; overflow-wrap:anywhere}
.t-quien{font-size:14px; color:var(--fg-2); margin-top:4px}
.t-pkg{display:flex; flex-direction:column; align-items:flex-end; gap:2px; font-size:13px; color:var(--muted); text-align:right}
.t-pkg b{font-size:18px; color:var(--fg)}
.miniaturas{display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.mini{width:52px; height:52px; padding:0; border:0; border-radius:10px; overflow:hidden; background:var(--panel-3)}
.mini img{width:100%; height:100%; object-fit:cover; display:block}
.nota{font-size:14px; color:var(--fg-2); padding:8px 12px; border-left:3px solid var(--soon); background:var(--panel-2); border-radius:0 10px 10px 0}
.t-acciones{display:flex; flex-direction:column; gap:8px}
.t-acciones .primary{width:100%; min-height:56px}
.vacio{border:1px dashed var(--line-2); border-radius:20px; padding:24px 20px; display:flex; flex-direction:column; gap:6px; text-align:center; color:var(--fg-2)}
details > summary{cursor:pointer; min-height:44px; display:flex; align-items:center; font-weight:600; color:var(--fg-2)}
details[open].plegable{display:flex; flex-direction:column; gap:12px}

/* Nuevo lavado */
.wiz{display:flex; flex-direction:column; gap:20px}
.wtop{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px}
.wtop > :last-child{justify-self:end}
.prog{display:grid; grid-template-columns:repeat(3, 1fr); gap:6px}
.prog span{height:6px; border-radius:999px; background:var(--line-2)}
.prog span.on{background:var(--action)}
.svs{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px}
.sv{position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-height:104px; padding:16px; border-radius:18px; border:1px solid var(--line-2); background:var(--panel); text-align:left; box-shadow:0 1px 2px rgba(22,24,28,.06)}
.sv[aria-pressed="true"]{border-color:var(--action); box-shadow:inset 0 0 0 2px var(--action)}
.sv-n{font-size:18px; font-weight:700}
.sv-d{font-size:14px; color:var(--fg-2); line-height:1.35}
.sv-p{margin-top:auto; font-size:15px; font-weight:600}
.sv-ok{position:absolute; top:12px; right:12px; width:24px; height:24px; border-radius:50%; background:var(--action); display:flex; align-items:center; justify-content:center}
.caja{display:flex; flex-direction:column; gap:12px; padding:16px; border-radius:18px; border:1px dashed var(--line-2)}
.slots{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px}
.slot{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; aspect-ratio:1; border-radius:16px; border:1.5px dashed var(--line-2); background:var(--panel); color:var(--fg-2); overflow:hidden; cursor:pointer; padding:0}
.slot.on{border-style:solid; border-color:var(--ok)}
.slot img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.slot-l{position:relative; font-size:12px; font-weight:700; text-align:center; padding:0 4px}
.slot.on .slot-l{position:absolute; left:6px; right:6px; bottom:6px; padding:3px 6px; border-radius:8px; background:rgba(255,255,255,.92); color:var(--fg)}
.slot input{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer}
.slot:focus-within{outline:2px solid var(--action); outline-offset:2px}
.slot-add{background:transparent}

/* Aviso: así le llega por WhatsApp */
.wa{border-radius:18px; overflow:hidden; border:1px solid var(--line)}
.wa-head{display:flex; align-items:center; gap:10px; padding:10px 14px; background:#F0F2F5; color:#111B21}
.wa-head b{display:block; font-size:15px}
.wa-head small{font-size:12.5px; color:#54656F}
.wa-av{width:36px; height:36px; border-radius:50%; background:#DFE5E7; color:#54656F; display:flex; align-items:center; justify-content:center; font-weight:700}
.wa-chat{background:#EFEAE2; padding:16px 12px; display:flex; justify-content:flex-end}
.wa-bub{position:relative; max-width:88%; background:#D9FDD3; color:#111B21; border-radius:10px 2px 10px 10px; padding:6px 8px 20px}
.wa-bub p{margin:4px 2px 0; font-size:14.5px; line-height:1.4; overflow-wrap:anywhere}
.wa-link{color:#027EB5}
.wa-t{position:absolute; right:8px; bottom:4px; font-size:11px; color:#667781}
.qr{display:flex; flex-direction:column; align-items:center; gap:12px; padding:20px; border-radius:20px; background:var(--panel)}
.qr svg{width:min(240px, 64vw); height:auto}

/* Números */
.rango{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; margin:0 -16px; padding:0 16px 2px}
.rango::-webkit-scrollbar{display:none}
.rango .chip-b{flex:none}
.kpis{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px}
.kpi{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:14px; display:flex; flex-direction:column; gap:4px}
.kpi b{font-size:24px; font-weight:700; letter-spacing:-.01em}
.panel{background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:16px; display:flex; flex-direction:column; gap:12px}
.barras{display:flex; align-items:flex-end; gap:2px; height:160px; border-bottom:1px solid var(--line-2); padding-top:8px}
.barras button{flex:1 1 0; max-width:24px; min-width:4px; height:100%; padding:0; border:0; background:transparent; display:flex; align-items:flex-end}
.barras i{display:block; width:100%; min-height:2px; background:var(--barra); border-radius:4px 4px 0 0}
.barras button[aria-pressed="true"] i{background:var(--fg)}
.ejes{display:flex; justify-content:space-between; font-size:12px; color:var(--muted)}
.tabla{width:100%; border-collapse:collapse; font-size:14px}
.tabla th{font-size:12.5px; font-weight:600; color:var(--muted); text-align:left; padding:6px 4px; border-bottom:1px solid var(--line)}
.tabla td{padding:10px 4px; border-bottom:1px solid var(--line)}
.tabla tr:last-child td{border-bottom:0}
.tabla .n{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}

/* Ajustes */
.renglon{display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%; min-height:56px; padding:10px 4px; border:0; border-bottom:1px solid var(--line); background:transparent; text-align:left}
.renglon:last-child{border-bottom:0}
.renglon small{display:block; font-size:13px; color:var(--muted)}
.apagado{opacity:.55}
.codigo-grande{font-size:40px; font-weight:800; letter-spacing:.25em; text-align:center; padding:16px; border-radius:16px; background:var(--panel-2); font-variant-numeric:tabular-nums}

/* Avisos y diálogo */
.toast{position:fixed; left:50%; top:calc(12px + env(safe-area-inset-top)); transform:translateX(-50%); z-index:50; max-width:calc(100% - 32px); padding:12px 16px; border-radius:14px; background:var(--fg); color:#FFFFFF; font-size:15px; font-weight:600; box-shadow:0 12px 40px rgba(0,0,0,.25)}
.toast:empty{display:none}
.dlg{border:0; border-radius:24px; padding:16px; width:440px; max-width:calc(100% - 24px); max-height:calc(100dvh - 24px); overflow:auto}
.dlg::backdrop{background:rgba(10,11,13,.6)}
.dlg img{width:100%; border-radius:14px; display:block}
.cargando{min-height:60dvh; display:flex; align-items:center; justify-content:center; color:var(--muted)}
.codigo::placeholder{color:#B5BAC2}