:root{
  --azul:#1f3a5f; --azul-2:#2c5282; --azul-claro:#e8eef7;
  --texto:#1a202c; --suave:#5a6678; --borde:#d4dbe6; --fondo:#f3f5f9; --blanco:#fff;
  --rojo:#c53030; --rojo-claro:#fdecec; --verde:#276749; --verde-claro:#e6f4ea;
  --ambar:#975a16; --ambar-claro:#fff4d6; --gris-claro:#edf0f5;
  --radio:10px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--texto);
  font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
a{color:var(--azul-2)}
.barra{background:var(--azul);color:#fff}
.barra .dentro{max-width:1180px;margin:0 auto;padding:14px 16px;display:flex;align-items:center;gap:12px}
.barra .marca{font-weight:700;letter-spacing:.2px}
.barra .sub{opacity:.75;font-size:14px}
.barra .der{margin-left:auto;display:flex;gap:8px;align-items:center}
.barra .der a,.barra .der button{color:#fff;font-size:14px}
main{max-width:880px;margin:0 auto;padding:20px 16px 120px}
main.ancho{max-width:1180px}
h1{font-size:24px;margin:4px 0 6px}
h2{font-size:18px;margin:0 0 14px;display:flex;align-items:center;gap:10px}
h2 .num{background:var(--azul);color:#fff;border-radius:50%;width:26px;height:26px;
  display:inline-flex;align-items:center;justify-content:center;font-size:14px;flex:none}
.intro{color:var(--suave);margin:0 0 18px}
.tarjeta{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--radio);
  padding:18px;margin-bottom:16px}
.rejilla{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.rejilla .todo{grid-column:1/-1}
@media (max-width:620px){.rejilla{grid-template-columns:1fr}}
label{display:block;font-size:14px;font-weight:600;margin-bottom:5px}
label .req{color:var(--rojo)}
label .opc{font-weight:400;color:var(--suave)}
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=number],
input[type=password],select,textarea{
  width:100%;font:inherit;padding:11px 12px;border:1px solid var(--borde);border-radius:8px;
  background:#fff;color:var(--texto);min-height:46px}
textarea{min-height:80px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--azul-2);outline-offset:0;border-color:var(--azul-2)}
.campo.error input,.campo.error select,.campo.error textarea{border-color:var(--rojo);background:var(--rojo-claro)}
.msg-error{color:var(--rojo);font-size:13px;margin-top:4px}
.ayuda{color:var(--suave);font-size:13px;margin-top:4px}
.hijo{border:1px dashed var(--borde);border-radius:8px;padding:14px;margin-top:12px;background:#fafbfd}
.hijo .titulo{font-weight:700;font-size:14px;margin-bottom:10px;color:var(--azul)}
.hijo .rejilla{grid-template-columns:1fr 2fr 1.3fr}
@media (max-width:620px){.hijo .rejilla{grid-template-columns:1fr}}
.cant{max-width:140px}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:15px}
.check input{width:22px;height:22px;margin:1px 0 0;flex:none}
.alerta{padding:12px 14px;border-radius:8px;margin-bottom:16px;font-size:15px}
.alerta.ok{background:var(--verde-claro);color:var(--verde)}
.alerta.error{background:var(--rojo-claro);color:var(--rojo)}
.alerta.info{background:var(--azul-claro);color:var(--azul)}
.pie{position:fixed;left:0;right:0;bottom:0;background:rgba(255,255,255,.97);
  border-top:1px solid var(--borde);padding:12px 16px calc(12px + env(safe-area-inset-bottom));z-index:5}
.pie .dentro{max-width:880px;margin:0 auto;display:flex;gap:10px;justify-content:flex-end;align-items:center}
.pie .estado{margin-right:auto;font-size:13px;color:var(--suave)}
.btn{font:inherit;font-weight:600;border-radius:8px;padding:11px 18px;border:1px solid transparent;
  cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px;min-height:46px;
  justify-content:center;white-space:nowrap}
.btn.prim{background:var(--azul);color:#fff}
.btn.prim:hover{background:var(--azul-2)}
.btn.sec{background:#fff;color:var(--azul);border-color:var(--borde)}
.btn.sec:hover{background:var(--gris-claro)}
.btn.peligro{background:#fff;color:var(--rojo);border-color:#f0b4b4}
.btn.chico{padding:6px 10px;min-height:34px;font-size:14px}
.btn.wa{background:#1f8f4e;color:#fff}
@media (max-width:480px){.pie .estado{display:none}.pie .btn{flex:1}}
.centro{max-width:460px;margin:40px auto;text-align:center}
.centro .icono{font-size:44px;line-height:1;margin-bottom:8px}
/* panel */
.contadores{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:16px}
@media (max-width:700px){.contadores{grid-template-columns:repeat(2,minmax(0,1fr))}}
.contador{background:#fff;border:1px solid var(--borde);border-radius:var(--radio);padding:12px 14px;
  text-decoration:none;color:inherit;display:block}
.contador.activo{outline:2px solid var(--azul-2)}
.contador .n{font-size:26px;font-weight:700}
.contador .t{font-size:13px;color:var(--suave)}
.tabla-caja{overflow-x:auto;background:#fff;border:1px solid var(--borde);border-radius:var(--radio)}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{padding:10px 12px;border-bottom:1px solid var(--gris-claro);text-align:left;vertical-align:middle}
th{background:#f7f9fc;font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--suave)}
tr:last-child td{border-bottom:0}
td .acciones{display:flex;gap:6px;flex-wrap:wrap}
.etq{display:inline-block;padding:3px 9px;border-radius:99px;font-size:12px;font-weight:700;white-space:nowrap}
.etq.pendiente{background:var(--gris-claro);color:var(--suave)}
.etq.borrador{background:var(--ambar-claro);color:var(--ambar)}
.etq.enviada{background:var(--azul-claro);color:var(--azul)}
.etq.revisada{background:var(--verde-claro);color:var(--verde)}
.suave{color:var(--suave);font-size:13px}
.fila-flex{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.datos dl{display:grid;grid-template-columns:220px 1fr;gap:0;margin:0}
.datos dt,.datos dd{padding:8px 0;border-bottom:1px solid var(--gris-claro);margin:0}
.datos dt{color:var(--suave);font-size:14px}
@media (max-width:620px){.datos dl{grid-template-columns:1fr}.datos dt{border:0;padding-bottom:0}}
.vacio{color:#a0aabb}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:var(--texto);color:#fff;
  padding:10px 16px;border-radius:8px;font-size:14px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:9}
.toast.ver{opacity:1}