:root{
  /* Marca Saynut: azul primario y verde de acento (logo). */
  --primario:#1f2a5a;--primario-osc:#161d3f;--primario-claro:#e0e1e8;--acento:#8aaf3e;
  --fondo:#f3f4f6;--superficie:#fff;--texto:#1f2937;--gris:#64748b;--borde:#cbd5e1;
  --ok:#15803d;--error:#b42318;--error-fondo:#fee8e7;--aviso:#92400e;--aviso-fondo:#fef3c7;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--fondo);color:var(--texto);font-family:Arial,Helvetica,sans-serif;min-height:100vh;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}

header{background:linear-gradient(135deg,var(--primario-osc),var(--primario));color:#fff;padding:14px 16px;padding-top:calc(14px + env(safe-area-inset-top));border-bottom:3px solid var(--acento);position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px}
header .marca{display:flex;align-items:center;gap:10px;min-width:0}
header .logo{width:38px;height:38px;border-radius:9px;background:#fff;padding:3px;flex-shrink:0}
header h1{font-size:18px;margin:0}
header .usuario{font-size:12px;opacity:.9;margin-top:3px}
header .btn{background:#ffffff22;color:#fff;padding:8px 12px;font-size:13px}

.wrap{max-width:820px;margin:auto;padding:14px 16px}
.card{background:var(--superficie);border-radius:14px;padding:16px;margin:0 0 14px;box-shadow:0 2px 10px #0001}
.card h2{font-size:16px;margin:0 0 12px;color:var(--primario-osc)}

.btn{border:0;border-radius:9px;padding:12px 15px;font-weight:bold;font-size:14px;cursor:pointer;font-family:inherit}
.btn:disabled{opacity:.5;cursor:default}
.primario{background:var(--primario);color:#fff}
.secundario{background:var(--primario-claro);color:var(--primario-osc)}

.msg{font-size:14px;border-radius:9px;padding:10px 12px;margin:12px 0 0}
.msg.error{background:var(--error-fondo);color:var(--error)}
.msg.aviso{background:var(--aviso-fondo);color:var(--aviso)}
.msg.ok{background:#dcfce7;color:var(--ok)}
.msg:empty{display:none}

/* ---------- Pantalla de PIN ---------- */
.pin{max-width:360px;margin:24px auto;text-align:center}
.pin p{color:var(--gris);font-size:14px;margin:0 0 18px}
.puntos{display:flex;justify-content:center;gap:12px;min-height:22px;margin:0 0 22px}
.puntos span{width:16px;height:16px;border-radius:50%;border:2px solid var(--primario);display:block}
.puntos span.lleno{background:var(--primario)}
.teclado{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.teclado button{height:64px;border:1px solid var(--borde);border-radius:14px;background:var(--superficie);font-size:26px;font-weight:bold;color:var(--texto);cursor:pointer;font-family:inherit;touch-action:manipulation}
.teclado button:active{background:var(--primario-claro)}
.teclado button.accion{font-size:15px}
.teclado button.entrar{background:var(--primario);color:#fff;border-color:var(--primario)}
.teclado button:disabled{opacity:.5}

/* ---------- Formulario de entrega ---------- */
.btn.ancho{width:100%;padding:14px;font-size:16px}
.exito{background:var(--ok);color:#fff}
.req{color:var(--error)}
label{display:block;font-size:13px;font-weight:bold;color:#334155;margin:12px 0 5px}
label:first-of-type{margin-top:0}
input,textarea{width:100%;padding:11px;border:1px solid var(--borde);border-radius:9px;font-size:16px;background:#fff;font-family:inherit;color:var(--texto)}
input:focus,textarea:focus{outline:2px solid var(--primario);outline-offset:0;border-color:var(--primario)}
textarea{min-height:96px;resize:vertical}
.fecha{margin:0 0 12px;font-size:14px}
.detalle-marca{font-size:14px;line-height:1.6;margin:10px 0 0;color:var(--gris)}
.detalle-marca b{color:var(--texto);font-size:18px}
.detalle-marca .ok{color:var(--ok);font-weight:bold}
.detalle-marca .alerta{color:var(--aviso);font-weight:bold}
.ayuda{font-size:12px;color:var(--gris);margin:6px 0 0}
.ayuda:empty{display:none}
.contador{font-size:13px;font-weight:normal;color:var(--gris);float:right}

.autocompletar{position:relative}
.sugerencias{position:absolute;left:0;right:0;top:100%;z-index:5;list-style:none;margin:4px 0 0;padding:4px;background:#fff;border:1px solid var(--borde);border-radius:9px;box-shadow:0 6px 18px #0002;max-height:280px;overflow-y:auto}
.sugerencias button{display:block;width:100%;text-align:left;border:0;background:none;padding:12px 10px;font-size:15px;font-family:inherit;color:var(--texto);border-radius:6px;cursor:pointer}
.sugerencias button:active,.sugerencias button:hover{background:var(--primario-claro)}

.botones{display:flex;gap:10px;flex-wrap:wrap}
.botones .btn{flex:1 1 140px}
.fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;margin-top:12px}
.fotos:empty{display:none}
.foto{position:relative}
.foto img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;border:1px solid var(--borde);display:block}
.foto button{position:absolute;top:4px;right:4px;width:30px;height:30px;border:0;border-radius:50%;background:#000a;color:#fff;font-size:18px;line-height:1;cursor:pointer}

canvas#firma{width:100%;height:180px;border:2px dashed #94a3b8;border-radius:10px;background:#fff;touch-action:none;display:block;margin-bottom:10px}

.acciones{position:sticky;bottom:0;background:var(--fondo);padding:10px 0 calc(10px + env(safe-area-inset-bottom));margin:0 -2px}
.acciones .msg{margin-top:8px}
.exito-card h2{color:var(--ok);font-size:20px}
.exito-card p{line-height:1.6;margin:0 0 16px}

/* ---------- Cola de envío ---------- */
.msg.fijo{margin:0 0 14px}
.msg.cola{margin:0 0 14px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.msg.cola .btn{padding:8px 12px;font-size:13px}
.exito-card .msg{margin:0 0 16px}

/* ---------- Mis entregas de hoy ---------- */
.lista-hoy{list-style:none;margin:0;padding:0}
.lista-hoy li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid #e2e8f0}
.lista-hoy li:last-child{border-bottom:0}
.lista-hoy li div{min-width:0}
.lista-hoy b{display:block;color:var(--primario-osc);overflow-wrap:anywhere}
.lista-hoy span{font-size:13px;color:var(--gris)}
.lista-hoy .ok{color:var(--ok);font-weight:bold}
.lista-hoy .alerta{color:var(--aviso);font-weight:bold}
.lista-hoy .error{color:var(--error);font-weight:bold}
.lista-hoy .btn{flex-shrink:0;padding:8px 10px;font-size:13px}