/* BrewNUX — lenguaje visual NUX oscuro: negro profundo, cian eléctrico, cobre, vidrio, Orbitron + Inter + JetBrains Mono */
:root{--bg:#020408;--cyan:#00f0ff;--copper:#c77d5b;--card:rgba(8,14,22,.78);--line:rgba(0,240,255,.15);
 --txt:#eef5ff;--mut:#7f98b3;--bad:#ff5d6c;--ok:#2fe6a6;--warn:#e8a15f;
 --sans:'Inter',system-ui,-apple-system,Segoe UI,Arial,sans-serif;--mono:'JetBrains Mono',ui-monospace,Consolas,monospace;--disp:'Orbitron','Segoe UI',system-ui,sans-serif}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;font-family:var(--sans);background:transparent;color:var(--txt);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh}
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
header,main,#toast{position:relative;z-index:2}
header{display:flex;align-items:center;gap:.9rem;padding:.7rem 1.2rem;background:rgba(2,4,8,.72);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5;flex-wrap:wrap}
.logo{font-family:var(--disp);font-weight:600;letter-spacing:.08em;font-size:1.05rem;color:var(--cyan)}
.logo i{font-style:normal;color:var(--copper)}
header nav{display:flex;gap:.25rem;flex:1;flex-wrap:wrap}
header a{color:var(--mut);text-decoration:none;padding:.4rem .85rem;border-radius:60px;font-size:.85rem;border:1px solid transparent;transition:.2s}
header a:hover{color:var(--txt);border-color:var(--line)}
header a.on{color:var(--cyan);border-color:var(--cyan);background:rgba(0,240,255,.1)}
#who{color:var(--mut);font-family:var(--mono);font-size:.75rem}
main{max-width:1060px;margin:0 auto;padding:1.4rem 1rem 4rem}
h1{font-family:var(--disp);font-weight:600;font-size:1.5rem;margin:.2rem 0 1.2rem;color:var(--cyan);border-left:4px solid var(--cyan);padding-left:.9rem;letter-spacing:.03em}
h2{font-size:.78rem;margin:1.4rem 0 .6rem;color:var(--copper);text-transform:uppercase;letter-spacing:.14em;font-weight:600}
a{color:var(--cyan)}
.card{background:var(--card);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:22px;padding:1.2rem 1.3rem;margin-bottom:1.1rem;transition:border-color .2s}
.card:hover{border-color:rgba(0,240,255,.3)}
.row{display:flex;gap:.8rem;flex-wrap:wrap;align-items:end}
label{display:flex;flex-direction:column;font-size:.68rem;color:var(--mut);gap:.3rem;flex:1;min-width:130px;text-transform:uppercase;letter-spacing:.1em}
input,select,textarea{background:rgba(0,0,0,.55);color:var(--txt);border:1px solid rgba(0,240,255,.18);border-radius:12px;padding:.6rem .75rem;font-size:1rem;width:100%;font-family:var(--sans);text-transform:none;letter-spacing:0}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,240,255,.15)}
input[readonly]{opacity:.65}
button{background:var(--cyan);color:#001318;border:0;border-radius:60px;padding:.6rem 1.3rem;font-size:.9rem;cursor:pointer;font-weight:700;letter-spacing:.02em;transition:.2s;font-family:var(--sans)}
button:hover{box-shadow:0 0 22px rgba(0,240,255,.45);transform:translateY(-1px)}
button.ghost{background:transparent;color:var(--cyan);border:1px solid rgba(0,240,255,.4)}
button.ghost:hover{background:rgba(0,240,255,.1);box-shadow:none}
button.bad{background:var(--bad);color:#1a0206}button:disabled{opacity:.35;cursor:not-allowed;box-shadow:none;transform:none}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th{text-align:left;padding:.55rem .5rem;font-size:.65rem;text-transform:uppercase;letter-spacing:.14em;color:var(--copper);border-bottom:1px solid var(--line);font-weight:600}
td{border-bottom:1px solid rgba(0,240,255,.07);padding:.5rem .5rem;vertical-align:middle}
tr:hover td{background:rgba(0,240,255,.03)}
td input,td select{padding:.4rem .5rem;font-size:.9rem;border-radius:9px}
td b,.mono{font-family:var(--mono)}
.tw{overflow-x:auto}
.warn,.ok{padding:.8rem 1rem;border-radius:18px;margin:.7rem 0;border:1px solid;font-size:.9rem}
.warn{background:rgba(199,125,91,.1);border-color:rgba(199,125,91,.55);color:#ffd9c4}
.ok{background:rgba(47,230,166,.08);border-color:rgba(47,230,166,.5);color:#baf7e0}
.warn b:first-child,.ok b:first-child{font-family:var(--disp);letter-spacing:.04em;font-weight:600}
.warn table th{border-color:rgba(199,125,91,.3)}
.tag{display:inline-block;padding:.12rem .7rem;border-radius:60px;font-size:.66rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;border:1px solid var(--cyan);color:var(--cyan);background:rgba(0,240,255,.1)}
.tag.cerrada{border-color:#5d7389;color:#9db0c4;background:rgba(255,255,255,.04)}
.tag.anulada{border-color:var(--bad);color:var(--bad);background:rgba(255,93,108,.1)}
.mut{color:var(--mut)}.right{margin-left:auto}
.lotline{display:block;font-family:var(--mono);font-size:.68rem;color:var(--mut);line-height:1.4}
#toast{position:fixed;bottom:1.2rem;left:50%;transform:translateX(-50%);background:rgba(8,14,22,.95);border:1px solid var(--cyan);color:var(--txt);padding:.65rem 1.2rem;border-radius:60px;z-index:9;box-shadow:0 0 30px rgba(0,240,255,.25)}
.login{max-width:360px;margin:14vh auto;text-align:center}
.login h1{border:0;padding:0;font-size:2.2rem;background:linear-gradient(135deg,#fff,#80d8ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.login label{text-align:left;margin-bottom:.7rem}
.grid35{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.5rem}
.grid35 label{min-width:0}
@media(max-width:700px){
 main{padding:.9rem .7rem 4rem}.row{gap:.55rem}
 header{gap:.3rem;padding:.45rem .7rem}.logo{font-size:.9rem}
 header nav{order:3;flex:1 0 100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:.15rem}
 header nav::-webkit-scrollbar{display:none}
 header a{white-space:nowrap;padding:.38rem .7rem}
 #who{margin-left:auto}header button{padding:.3rem .8rem}
 td button{padding:.35rem .6rem;font-size:.78rem}
 .right{margin-left:0;width:100%;display:flex;gap:.5rem}.right button{flex:1}
 table{font-size:.82rem}th,td{padding:.4rem .3rem}
 .card{border-radius:18px;padding:1rem}h1{font-size:1.25rem}
}

/* Portada */
.hero{position:fixed;inset:0;z-index:1;overflow:hidden;display:flex;align-items:center}
.hero-img{position:absolute;inset:0 0 0 auto;width:min(78vw,1100px);background-size:cover;background-position:60% 30%;opacity:.95}
.hero-fade{position:absolute;inset:0;background:linear-gradient(90deg,#020408 0%,#020408 30%,rgba(2,4,8,.72) 52%,rgba(2,4,8,.15) 100%),linear-gradient(0deg,#020408 0%,rgba(2,4,8,0) 35%)}
.hero-in{position:relative;padding:0 clamp(1.2rem,6vw,5rem);max-width:560px;width:100%}
.hero-logo{width:84px;height:auto;margin-bottom:1.1rem;opacity:.95}
.hero-t{font-family:var(--disp);font-size:clamp(2.6rem,9vw,5rem);font-weight:600;letter-spacing:.06em;margin:0;border:0;padding:0;line-height:1;background:linear-gradient(135deg,#fff,#80d8ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 60px rgba(0,240,255,.25)}
.hero-t i{font-style:normal;-webkit-text-fill-color:var(--copper)}
.hero-s{font-size:clamp(1rem,2.6vw,1.3rem);color:rgba(255,255,255,.85);margin:1rem 0 .4rem}
.hero-m{font-family:var(--mono);color:var(--cyan);font-size:.8rem;opacity:.85;margin:0 0 1.6rem}
.hero .login{margin:0;max-width:340px;text-align:left}
@media(max-width:700px){.hero{align-items:flex-end;padding-bottom:1.5rem}.hero-img{width:100%;inset:0;background-position:62% 12%;height:68%}
 .hero-fade{background:linear-gradient(0deg,#020408 0%,#020408 38%,rgba(2,4,8,.55) 62%,rgba(2,4,8,.1) 100%)}
 .hero-logo{width:56px;margin-bottom:.5rem}.hero-m{margin-bottom:1rem}.hero-s{margin:.6rem 0 .2rem}}

.hero-radar{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

.hero-t{display:flex;flex-direction:column;gap:.15em;-webkit-text-fill-color:initial;background:none;text-shadow:none}
.hero-t .b{font-family:var(--mono);font-weight:500;font-size:.34em;letter-spacing:.5em;text-transform:uppercase;color:var(--copper);padding-left:.2em}
.hero-t .n{font-family:var(--disp);font-weight:600;letter-spacing:.06em;background:linear-gradient(135deg,#fff,#80d8ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 60px rgba(0,240,255,.25);filter:drop-shadow(0 0 24px rgba(0,240,255,.25))}
.logo i{font-style:normal}

/* Opción B: Brew grande con degradé "cerveza" (ámbar → dorado → espuma) */
.hero-t{gap:0;line-height:.92}
.hero-t .b{font-family:var(--disp);font-weight:600;font-size:.78em;letter-spacing:.06em;text-transform:none;padding-left:0;color:transparent;
 background:linear-gradient(180deg,#fff6dc 0%,#ffd76a 30%,#e8961e 68%,#9c4f12 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 22px rgba(232,150,30,.35))}
.hero-t .n{margin-top:.04em}

/* Opción C: una sola línea, BrewNu-X */
.hero-t{flex-direction:row;align-items:baseline;gap:0;line-height:1;font-size:clamp(2.2rem,8vw,4.6rem)}
.hero-t .b{font-size:1em}.hero-t .n{margin-top:0;font-size:1em}

/* Isologo más presente: más grande, con filete cian que lo ancla al título */
.hero-logo{width:132px;margin-bottom:1.3rem;opacity:1;filter:drop-shadow(0 0 18px rgba(0,240,255,.25))}
.hero-in::before{content:"";display:block;width:56px;height:2px;background:linear-gradient(90deg,var(--cyan),transparent);margin:0 0 1.1rem;order:-1}
@media(max-width:700px){.hero-logo{width:84px;margin-bottom:.8rem}}

/* Logo centrado sobre BrewNu-X */
.lockup{display:inline-flex;flex-direction:column;align-items:center}
.hero-in::before{display:none}
.hero-logo{margin-bottom:.9rem}
.lockup::after{content:none}
.hero-t{flex-wrap:wrap;justify-content:center}
/* Columna de portada centrada */
.hero-in{text-align:center;display:flex;flex-direction:column;align-items:center}
.hero .login{margin:0 auto}
.hero-t{justify-content:center}

/* Panel */
.kgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.9rem;margin-bottom:1.1rem}
.kpi{margin:0;text-align:left}.kl{font-size:.66rem;text-transform:uppercase;letter-spacing:.14em;color:var(--copper)}
.kv{font-family:var(--disp);font-size:2.6rem;font-weight:600;color:var(--cyan);line-height:1.1;margin:.3rem 0 .1rem;text-shadow:0 0 28px rgba(0,240,255,.3)}
.kv.kv-ok{color:var(--ok);text-shadow:0 0 28px rgba(47,230,166,.3)}.kv.kv-bad{color:var(--bad);text-shadow:0 0 28px rgba(255,93,108,.3)}
.ks{font-size:.78rem;color:var(--mut)}
.g2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.1rem}
.chart{width:100%;height:auto;display:block;overflow:visible}
.chart .cl{fill:#b5c8dc;font-size:12px;font-family:var(--sans)}.chart .cv{fill:#eef5ff;font-size:11px;font-family:var(--mono)}
.chart .big{fill:#eef5ff;font-family:var(--disp);font-size:26px}
.chart .bar{transition:width .9s cubic-bezier(.2,.8,.2,1)}.chart .col{transition:y .9s cubic-bezier(.2,.8,.2,1),height .9s cubic-bezier(.2,.8,.2,1)}
@media(prefers-reduced-motion:reduce){.chart .bar,.chart .col{transition:none}}
@media(max-width:700px){.kv{font-size:2rem}.kgrid{grid-template-columns:1fr 1fr}.g2{grid-template-columns:1fr}}

/* Colores de marca: Brew en cian, Nu-X en naranja cobre */
.hero-t .b{background:linear-gradient(180deg,#d9fdff 0%,#00f0ff 55%,#00a9c4 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 22px rgba(0,240,255,.35))}
.hero-t .n{background:linear-gradient(180deg,#ffd2a8 0%,#e8883a 55%,#c77d5b 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 22px rgba(232,136,58,.3));text-shadow:none}
/* Avisos de fermentador */
.alert{display:flex;gap:1rem;align-items:center;background:var(--card);backdrop-filter:blur(14px);border:1px solid var(--line);border-left:5px solid var(--cyan);border-radius:20px;padding:.9rem 1.1rem;margin-bottom:.8rem}
.alert.vencido{border-left-color:var(--bad);box-shadow:0 0 28px rgba(255,93,108,.12)}.alert.hoy{border-left-color:var(--warn)}
.aic{font-size:1.6rem;width:2.4rem;text-align:center;color:var(--cyan)}.alert.up .aic{color:#ff9a4d}.alert.down .aic{color:#5fd0ff}
.abody{flex:1;min-width:0}.at{font-size:1.1rem}.atag{font-family:var(--mono);font-size:.7rem;padding:.1rem .6rem;border-radius:60px;border:1px solid currentColor;margin-left:.5rem;color:var(--cyan)}
.alert.vencido .atag{color:var(--bad)}.alert.hoy .atag{color:var(--warn)}
.as{color:var(--mut);font-size:.85rem}.an{font-size:.85rem;margin-top:.2rem;color:#c9d9ea}
@media(max-width:700px){.alert{flex-wrap:wrap}.alert button{width:100%}}

[hidden]{display:none!important}
.rule{display:block;width:56px;height:2px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);margin:0 auto 1rem}
.hero{overflow-y:auto;align-items:safe center}
/* Pedidos a proveedores */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.8rem}
.pcard{background:var(--card);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:20px;padding:.9rem 1rem;cursor:pointer;transition:.2s;user-select:none}
.pcard:hover{border-color:rgba(0,240,255,.45);transform:translateY(-2px)}
.pcard.sel{border-color:var(--cyan);background:rgba(0,240,255,.08);box-shadow:0 0 24px rgba(0,240,255,.15)}
.pn{font-weight:600;font-size:1rem}.pm{color:var(--copper);margin:.15rem 0}.ps{font-size:.82rem;color:#c9d9ea}.pf{font-size:.72rem;color:var(--mut);margin-top:.25rem;min-height:1.7em}
.pb{margin-top:.5rem;font-family:var(--mono);font-size:.75rem;color:var(--cyan)}.pwarn{color:var(--warn)}
.alink{font-size:.72rem;letter-spacing:.04em;text-transform:none;margin-left:.8rem;color:var(--cyan)}
@media(max-height:780px){.hero-logo{width:96px;margin-bottom:.5rem}.rule{margin-bottom:.6rem}.hero-t{font-size:clamp(2rem,6.4vw,3.4rem)}
 .hero-s{margin:.6rem 0 .2rem;font-size:1rem}.hero-m{margin-bottom:.9rem}.hero .login{padding:.9rem 1.1rem}.hero .login label{margin-bottom:.4rem}.hero-in{padding-top:.8rem;padding-bottom:.8rem}}

/* pedido mínimo y formato de entrega */
.pk{display:block;font-size:.78rem;color:var(--mut);margin-top:.15rem}.pk.ok{color:var(--ok)}.pk.bad{color:var(--warn)}
.pk button{margin-left:.4rem;padding:.15rem .7rem;font-size:.75rem}

.subtabs{display:flex;gap:.3rem;margin:0 0 1rem;border-bottom:1px solid var(--grid,rgba(0,240,255,.15));overflow-x:auto}
.subtabs a{padding:.5rem .9rem;color:var(--mut,#7f98b3);text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap}
.subtabs a.on{color:var(--cyan,#00f0ff);border-bottom-color:var(--cyan,#00f0ff)}
.ctable td{padding:.35rem .6rem}.ctable input{width:7rem;text-align:right}.ctable select{width:4.5rem}
tr.grp th{background:transparent;color:var(--cyan,#00f0ff);text-align:left;font-size:.8rem;letter-spacing:.06em;padding-top:1rem}
tr.tot td{border-top:1px solid var(--cyan,#00f0ff)}
.savebar{position:sticky;bottom:0;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.7rem 1rem;background:var(--bg2,#0b1522);border-top:1px solid var(--cyan,#00f0ff);margin-top:1rem}

.vbox{margin:.2rem 0 .8rem;padding:.6rem .9rem;border:1px solid var(--cyan,#00f0ff);border-radius:10px;display:flex;flex-wrap:wrap;gap:.3rem .9rem;align-items:baseline}
.vbox .vl{color:var(--mut,#7f98b3);font-size:.8rem}.vbox .vn{font-size:1.15rem;color:#fff}

/* inventario mensual (móvil primero) */
.mbar{display:flex;align-items:center;gap:.8rem;margin:.6rem 0}.mpb{flex:1;height:10px;border-radius:6px;background:rgba(0,240,255,.12);overflow:hidden}#mprog{height:100%;background:var(--cyan,#00f0ff);width:0;transition:width .25s}
.mtools{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;margin-bottom:.4rem}.mtools input[type=search]{flex:1;min-width:10rem}.chk{display:flex;gap:.4rem;align-items:center;font-size:.9rem;white-space:nowrap}
.mh{position:sticky;top:0;background:var(--bg2,#0b1522);padding:.5rem .2rem;margin:1rem 0 .2rem;z-index:2;font-size:1.05rem}
.mrow{display:grid;grid-template-columns:1fr 6.2rem 4.2rem 1.6rem;gap:.5rem;align-items:center;padding:.55rem .2rem;border-bottom:1px solid rgba(0,240,255,.1)}
.mrow.done .mn b{color:var(--ok,#2fe6a6)}.mn{display:flex;flex-direction:column;min-width:0}.mn b{font-weight:500;overflow-wrap:anywhere}.mn .mut{font-size:.75rem}
.mrow input,.mrow select{font-size:1.1rem;min-height:2.8rem;width:100%;text-align:right}.mrow select{text-align:left}.ms{font-size:.85rem;color:var(--ok,#2fe6a6);text-align:center}
.mx{padding:0;min-height:2rem;width:2rem;font-size:.8rem}.madd summary{cursor:pointer}.madd .row{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.6rem}.madd .row input{flex:1;min-width:10rem}
@media(max-width:480px){.mrow{grid-template-columns:1fr 5.2rem 4.8rem auto}.ms{display:none}}
.mrow select{padding:.3rem .4rem;font-size:1rem}.chk{text-transform:none;letter-spacing:normal}.chk input{width:auto;min-height:0}