/* Panel · Grafito y lima (E6). Bóveda oscura + hoja blanca radio 28, todo lo que se toca es píldora. */
@font-face{font-family:'Inter';font-weight:400;font-display:swap;src:url(inter-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:500;font-display:swap;src:url(inter-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:600;font-display:swap;src:url(inter-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-weight:700;font-display:swap;src:url(plus-jakarta-sans-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-weight:800;font-display:swap;src:url(plus-jakarta-sans-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'Anton';font-weight:400;font-display:swap;src:url(anton-400.woff2) format('woff2')}
@font-face{font-family:'Playfair Display';font-weight:900;font-display:swap;src:url(playfair-900.woff2) format('woff2')}

:root{
  --grafito:#0E1116;--grafito-2:#1C222B;--lima:#B8F04A;--lima-osc:#7BC62D;--lima-claro:#F2FADF;
  --tinta:#14181F;--tinta-2:#4A525E;--tinta-3:#6B7380;--linea:#E7EAEE;--fondo:#F4F5F7;--suave:#AEB6C2;
  --rojo:#B3261E;--rojo-claro:#FCE8E6;--ambar:#9A6700;--ambar-claro:#FFF4D6;--wa:#1FAF38;
  --f-tit:'Plus Jakarta Sans',Inter,system-ui,sans-serif
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--grafito);color:var(--tinta);font:400 16px/1.4 Inter,system-ui,sans-serif;min-height:100vh}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
.app{max-width:560px;margin:0 auto;min-height:100vh;position:relative;background:linear-gradient(160deg,var(--grafito) 0%,var(--grafito-2) 100%)}

/* Bóveda */
.boveda{padding:calc(18px + env(safe-area-inset-top)) 16px 26px;color:#fff;display:flex;flex-direction:column;gap:10px}
.fila{display:flex;align-items:center;justify-content:space-between;gap:10px}
.etiqueta{display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;background:var(--lima);color:var(--grafito);font:800 11px var(--f-tit);letter-spacing:1.4px;text-transform:uppercase;white-space:nowrap}
.etiqueta.gris{background:#2B333E;color:#DDE3EA}
.etiqueta.ambar{background:#FFB938;color:var(--grafito)}
.suave{color:var(--suave);font-size:13px}
.b-titulo{margin:0;font:800 22px/1.2 var(--f-tit)}
.b-sub{margin:0;font-size:13px;color:var(--suave)}
.cifra{display:flex;align-items:flex-end;gap:12px;margin-top:4px}
.cifra b{font:800 52px/1 var(--f-tit);letter-spacing:-2px;font-variant-numeric:tabular-nums}
.cifra span{font-size:14px;color:var(--suave);padding-bottom:6px;line-height:1.3}
.atras{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px 0 8px;border-radius:999px;border:1px solid #2F3743;background:transparent;color:#fff;font:600 14px Inter}
.icono-btn{width:44px;height:44px;border-radius:999px;border:1px solid #2F3743;background:transparent;color:#fff;display:inline-flex;align-items:center;justify-content:center}
.marca{font:800 18px var(--f-tit);color:#fff;display:flex;align-items:center;gap:8px}
.marca i{width:22px;height:12px;border-radius:999px;background:var(--lima);display:inline-block}

/* Hoja */
.hoja{background:#fff;border-radius:28px 28px 0 0;padding:22px 16px calc(104px + env(safe-area-inset-bottom));min-height:calc(100vh - 160px);display:flex;flex-direction:column;gap:16px}
.hoja.sin-nav{padding-bottom:calc(32px + env(safe-area-inset-bottom))}
h2{margin:0;font:800 17px var(--f-tit)}
h3{margin:0;font:800 15px var(--f-tit)}
p{margin:0}
.ayuda{color:var(--tinta-2);font-size:14px}
.vacio{padding:28px 12px;text-align:center;color:var(--tinta-2)}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:999px;border:none;background:var(--tinta);color:#fff;font:800 15px var(--f-tit);text-decoration:none;text-align:center}
.btn.grande{min-height:56px;font-size:16px;width:100%}
.btn.lima{background:var(--lima);color:var(--grafito)}
.btn.borde{background:#fff;color:var(--tinta);border:1.5px solid var(--linea)}
.btn.rojo{background:#fff;color:var(--rojo);border:1.5px solid #F2C9C5}
.btn.wa{background:var(--wa);color:#fff}
.btn.chico{min-height:40px;padding:0 14px;font-size:13px}
.btn[disabled]{opacity:.55;cursor:wait}
.btn:active{transform:translateY(1px)}
.acciones{display:flex;flex-direction:column;gap:10px}
.acciones.fila2{flex-direction:row}
.acciones.fila2>*{flex:1}

/* Tarjetas de evento */
.lista{display:flex;flex-direction:column;gap:12px}
.tarjeta-ev{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:22px;border:1px solid var(--linea);background:#fff;text-align:left;width:100%}
.tarjeta-ev .t{font:800 17px/1.25 var(--f-tit)}
.tarjeta-ev .s{font-size:13px;color:var(--tinta-2)}
.mini{display:flex;align-items:center;gap:12px}
.mini b{font:800 26px/1 var(--f-tit);letter-spacing:-1px}
.mini .pista{flex:1}
.seccion-t{font:700 12px var(--f-tit);letter-spacing:1.2px;text-transform:uppercase;color:var(--tinta-3);margin-top:6px}

/* Barras */
.barra{display:flex;flex-direction:column;gap:8px}
.barra .t{display:flex;justify-content:space-between;font-size:14px;gap:8px}
.barra .t span:first-child{font-weight:600}
.barra .t span:last-child{color:var(--tinta-2)}
.barra .t b{color:var(--tinta)}
.pista{height:10px;border-radius:999px;background:var(--linea);overflow:hidden}
.pista div{height:100%;border-radius:999px;background:var(--lima-osc);max-width:100%}

.aviso{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;background:var(--lima-claro)}
.aviso p{font-size:14px;font-weight:600}
.aviso small{display:block;font-weight:400;color:var(--tinta-2);font-size:13px}
.aviso .btn{margin-left:auto}
.aviso.ambar{background:var(--ambar-claro)}
.aviso.rojo{background:var(--rojo-claro)}
.origenes{display:flex;gap:8px;flex-wrap:wrap}
.origenes span{padding:8px 12px;border-radius:999px;border:1px solid var(--linea);font-size:13px;font-weight:600}

/* Formularios */
.form{display:flex;flex-direction:column;gap:16px}
.campo{display:flex;flex-direction:column;gap:6px}
.campo>span{font-weight:600;font-size:14px}
.campo small{color:var(--tinta-3);font-size:12px}
.campo i{font-style:normal;color:var(--tinta-3);font-weight:400}
.entrada{width:100%;min-height:52px;border:1.5px solid var(--linea);border-radius:16px;background:#fff;padding:0 16px;font-size:16px;outline:none;-webkit-appearance:none;appearance:none}
textarea.entrada{padding:12px 16px;min-height:80px;resize:vertical}
.entrada:focus{border-color:var(--tinta);box-shadow:0 0 0 3px rgba(184,240,74,.6)}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pildoras{display:flex;gap:8px;flex-wrap:wrap}
.pildora{min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid var(--linea);background:#fff;font:600 14px Inter;display:inline-flex;align-items:center;gap:6px}
.pildora[aria-pressed="true"]{background:var(--tinta);border-color:var(--tinta);color:#fff}
.pildora .n{font-weight:700;opacity:.7}
.contador{display:flex;align-items:center;gap:10px}
.contador button{width:52px;height:52px;border-radius:999px;border:1.5px solid var(--linea);background:#fff;font:800 22px var(--f-tit)}
.contador input{width:110px;text-align:center;font:800 26px var(--f-tit)}
.estilos{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.estilo{border:2px solid var(--linea);border-radius:16px;padding:6px;background:#fff;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;font-weight:600}
.estilo i{display:block;width:100%;height:40px;border-radius:10px}
.estilo[aria-pressed="true"]{border-color:var(--tinta);box-shadow:0 0 0 2px var(--lima)}
.foto-campo{display:flex;align-items:center;gap:12px}
.foto-campo img{width:84px;height:84px;object-fit:cover;border-radius:16px;border:1px solid var(--linea);background:var(--fondo)}
.foto-campo img.logo{object-fit:contain;padding:6px}
.error{color:var(--rojo);font-size:14px;font-weight:600}
.error:empty{display:none}
.ok{color:#2E7D32;font-size:14px;font-weight:600}

/* Productores */
.buscar{position:relative}
.buscar input{padding-left:46px}
.buscar svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--tinta-3)}
.buscar.grande input{min-height:60px;font-size:18px}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips .pildora{white-space:nowrap;flex-shrink:0}
.prod{border:1px solid var(--linea);border-radius:22px;padding:14px;display:flex;flex-direction:column;gap:10px}
.prod .cab{display:flex;align-items:flex-start;gap:10px}
.prod .nom{font:800 16px/1.25 var(--f-tit)}
.prod .det{font-size:13px;color:var(--tinta-2)}
.prod .cab .der{margin-left:auto;display:flex;gap:6px;align-items:center;flex-shrink:0}
.marcas{display:flex;gap:8px;flex-wrap:wrap}
.marca-btn{min-height:44px;padding:0 14px;border-radius:999px;border:1.5px solid var(--linea);background:#fff;font:600 14px Inter}
.marca-btn[aria-pressed="true"]{background:var(--lima-claro);border-color:var(--lima-osc);color:#2C4A07}
.sello{padding:4px 10px;border-radius:999px;font:800 11px var(--f-tit);letter-spacing:.6px;text-transform:uppercase;background:var(--lima);color:var(--grafito);white-space:nowrap}
.sello.gris{background:var(--fondo);color:var(--tinta-2)}
.sello.ambar{background:var(--ambar-claro);color:var(--ambar)}
.nota{font-size:13px;color:var(--tinta-2);background:var(--fondo);border-radius:12px;padding:8px 12px;text-align:left;border:none;width:100%}
.wa-btn{width:44px;height:44px;border-radius:999px;background:var(--wa);color:#fff;display:inline-flex;align-items:center;justify-content:center;border:none;text-decoration:none}

/* Llegada */
.llego{min-height:48px;padding:0 18px;border-radius:999px;border:none;background:var(--lima);color:var(--grafito);font:800 15px var(--f-tit)}
.hora-llego{min-height:44px;padding:0 14px;border-radius:999px;border:1.5px solid var(--lima-osc);background:var(--lima-claro);color:#2C4A07;font:700 14px Inter}
.contadores{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.contadores div{background:var(--fondo);border-radius:18px;padding:12px;text-align:center}
.contadores b{display:block;font:800 26px/1 var(--f-tit)}
.contadores span{font-size:12px;color:var(--tinta-2)}

/* Cierre */
.cuadros{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cuadro{border:1px solid var(--linea);border-radius:20px;padding:14px}
.cuadro span{font-size:13px;color:var(--tinta-2);font-weight:600}
.cuadro b{display:block;font:800 30px/1.1 var(--f-tit);margin-top:4px}
.cuadro small{display:block;font-size:12px;color:var(--tinta-3);margin-top:2px}
.tabla-origen{display:flex;flex-direction:column;gap:8px}
.tabla-origen div{display:flex;justify-content:space-between;gap:8px;padding:12px 14px;border-radius:16px;background:var(--fondo);font-size:14px}
.tabla-origen b{font-weight:700}

/* Navegación inferior */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:20;background:#fff;border-top:1px solid var(--linea);padding-bottom:env(safe-area-inset-bottom)}
.nav div{max-width:560px;margin:0 auto;display:flex;justify-content:space-around}
.nav button{flex:1;min-height:68px;border:none;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font:600 12px Inter;color:var(--tinta-3)}
.nav button svg{width:24px;height:24px}
.nav button[aria-current="page"]{color:var(--tinta)}
.nav button[aria-current="page"] .ic{background:var(--lima);color:var(--grafito)}
.nav .ic{width:44px;height:30px;border-radius:999px;display:flex;align-items:center;justify-content:center}

/* Ventana */
.velo{position:fixed;inset:0;background:rgba(14,17,22,.55);z-index:40;display:flex;align-items:flex-end;justify-content:center}
.ventana{background:#fff;border-radius:28px 28px 0 0;width:100%;max-width:560px;padding:22px 16px calc(22px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:14px;max-height:92vh;overflow:auto}
.pin-grande{font:800 40px var(--f-tit);letter-spacing:8px;text-align:center;padding:14px;border-radius:20px;background:var(--lima-claro)}
.aviso-flotante{position:fixed;left:16px;right:16px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:50;max-width:528px;margin:0 auto;background:var(--tinta);color:#fff;padding:14px 18px;border-radius:18px;font-weight:600;font-size:14px;box-shadow:0 10px 30px rgba(0,0,0,.3);transition:opacity .3s}
.aviso-flotante.oculto{opacity:0;pointer-events:none}

/* Ingreso */
.ingreso{min-height:100vh;display:flex;flex-direction:column}
.ingreso .boveda{padding-top:calc(56px + env(safe-area-inset-top));padding-bottom:40px}
.ingreso .hoja{flex:1;min-height:0}
.cargando{min-height:100vh;display:flex;align-items:center;justify-content:center;color:var(--suave)}