/* Disposición: acceso centrado; gerente con menú lateral (móvil: barra inferior); productor con botones grandes. */

/* ---------- acceso ---------- */
.login{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:clamp(24px,6vh,56px) max(16px,env(safe-area-inset-right,0px)) 20px max(16px,env(safe-area-inset-left,0px))}
.login-wrap{width:100%;max-width:460px;display:flex;flex-direction:column;align-items:center;gap:22px;flex:1}
.brand{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.logo{width:72px;height:72px;color:var(--brand)}
.brand h1{font-size:clamp(28px,6vw,34px);line-height:1.1;color:var(--brand)}
.brand p{color:var(--muted);max-width:30ch;text-wrap:balance}
.steam path{stroke-dasharray:3 5;animation:drift 5s linear infinite}
@keyframes drift{to{stroke-dashoffset:-32}}
.login-card{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:clamp(20px,5vw,28px);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:16px}
.login-card h2{font-size:21px}
.demo-tag{align-self:flex-start}
.demo-btns{display:grid;gap:10px}
.demo-btn{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:14px 16px;border-radius:12px;border:1.5px solid var(--line-strong);background:var(--panel)}
.demo-btn:hover{border-color:var(--btn);background:var(--tint)}
.demo-btn .ic{width:42px;height:42px;border-radius:10px;background:var(--tint);color:var(--brand);display:grid;place-items:center}
.demo-btn .ic svg{width:22px;height:22px}
.demo-btn b{display:block;font-size:16px}
.demo-btn span{color:var(--muted);font-size:13.5px}
.divider{display:flex;align-items:center;gap:12px;color:var(--faint);font-size:13px}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.pw-wrap{position:relative}
.pw-wrap input{padding-right:100px}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);min-height:36px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:var(--btn);font-weight:600;font-size:14px}
.pw-toggle:hover{background:var(--tint)}
.foot{margin-top:24px;color:var(--faint);font-size:13px;text-align:center}

/* ---------- carcasa del gerente ---------- */
.shell{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100vh}
.side{background:var(--side-bg);color:var(--side-ink);position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:20px;padding:20px 14px 16px max(16px,env(safe-area-inset-left,0px))}
.side-brand{display:flex;align-items:center;gap:10px;color:var(--side-ink);padding:2px 6px}
.side-brand svg{width:34px;height:34px}
.side-brand b{font-family:var(--font-display);font-size:16px;line-height:1.15;font-weight:600}
.side-brand small{display:block;font-family:var(--font-body);font-weight:500;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--side-muted);margin-top:2px}
.nav{display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.nav-label{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--side-muted);padding:12px 12px 4px}
.nav button{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:0;border-radius:9px;background:transparent;color:var(--side-muted);font-weight:500;text-align:left}
.nav button:hover{background:var(--side-active);color:var(--side-ink)}
.nav button[aria-current="page"]{background:var(--side-active);color:#fff}
.nav svg{width:19px;height:19px}
.nav .badge{margin-left:auto;min-width:22px;padding:0 7px;border-radius:999px;font-size:12px;font-weight:700;text-align:center;background:#F0D58A;color:#33290F}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding-top:12px;border-top:1px solid var(--side-line)}
.side-user{display:flex;align-items:center;gap:10px;padding:0 6px}
.side-user .avatar{background:var(--side-active);color:#fff}
.side-user b{display:block;font-size:14px}
.side-user small{color:var(--side-muted);font-size:12.5px}
.side-link{display:flex;gap:10px;align-items:center;padding:8px 12px;border:0;border-radius:8px;background:transparent;color:var(--side-muted);font-weight:500;text-align:left}
.side-link:hover{background:var(--side-active);color:#fff}
.side-link svg{width:18px;height:18px}

.main{min-width:0;display:flex;flex-direction:column}
.demo-bar{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;justify-content:center;background:var(--warn-bg);color:var(--warn);font-size:13px;font-weight:600;padding:7px 16px;text-align:center}
.content{padding:28px max(32px,env(safe-area-inset-right,0px)) 56px 32px;display:flex;flex-direction:column;gap:22px;max-width:1280px;width:100%}
.page-head{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;justify-content:space-between}
.page-head h1{font-size:26px;line-height:1.15}
.page-head p{color:var(--muted);margin-top:4px}
.actions{display:flex;flex-wrap:wrap;gap:10px}

.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;min-width:0}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px 0}
.card-head h2{font-size:16px}
.card-body{padding:14px 18px 18px}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.kpi{padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.kpi-top{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-weight:600;font-size:13.5px}
.kpi-ic{width:32px;height:32px;border-radius:9px;background:var(--tint);color:var(--brand);display:grid;place-items:center}
.kpi-ic svg{width:18px;height:18px}
.kpi-val{font-family:var(--font-display);font-size:30px;font-weight:600;letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums}
.kpi-val small{font-family:var(--font-body);font-size:15px;font-weight:600;color:var(--muted);letter-spacing:0}
.kpi-sub{color:var(--muted);font-size:13px}
.two{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:16px}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.alerts{display:flex;flex-direction:column;gap:10px}
.alert-row{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:10px;background:var(--tint)}
.alert-row b{font-weight:600}
.alert-row .t{min-width:0}
.alert-row .t span{display:block;color:var(--muted);font-size:13px}

/* gráficos */
.chart{width:100%;height:auto;display:block}
.chart text{font-family:var(--font-body);fill:var(--muted);font-size:12px}
.chart .v{fill:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .bar{fill:var(--chart)}
.chart .bar.last{fill:var(--btn)}
.hbars{display:flex;flex-direction:column;gap:12px}
.hrow{display:grid;grid-template-columns:104px minmax(0,1fr) auto;gap:12px;align-items:center}
.hrow .track{height:12px;border-radius:6px;background:var(--tint);overflow:hidden}
.hrow .fill{height:100%;border-radius:0 6px 6px 0;background:var(--chart);min-width:4px}
.hrow .val{font-variant-numeric:tabular-nums;font-weight:600;font-size:13.5px;text-align:right}

/* filtros y listas */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.search{position:relative;flex:1 1 240px;max-width:380px}
.search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--faint);pointer-events:none}
.search input{padding-left:38px}
.toolbar select{width:auto;min-width:160px}
.count{margin-left:auto;color:var(--muted);font-size:13.5px}

/* inventario */
.stock{padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.stock h3{font-size:15px;font-family:var(--font-body);font-weight:700}
.stock .big{font-family:var(--font-display);font-size:32px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.1}
.stock .big small{font-size:15px;color:var(--muted);font-family:var(--font-body);font-weight:600}
.eqs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.eq{border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:3px}
.eq b{font-size:15px}
.eq .st{display:flex;justify-content:space-between;gap:8px;align-items:center;font-size:14px}

/* tablero */
.board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,1fr);gap:12px;overflow-x:auto;padding-bottom:10px;align-items:start}
.col{background:var(--tint);border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;min-height:220px;min-width:0}
.col.over{border-color:var(--focus);outline:2px dashed var(--focus);outline-offset:-4px}
.col-head{padding:12px 14px 6px}
.col-title{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:600;font-size:15px}
.col-title .n{padding:0 8px;border-radius:999px;background:var(--panel);border:1px solid var(--line);font:600 12px var(--font-body);color:var(--muted)}
.col-sum{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.col-body{padding:6px 10px 12px;display:flex;flex-direction:column;gap:9px}
.deal{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:6px;cursor:grab}
.deal:hover{border-color:var(--line-strong);box-shadow:var(--shadow)}
.deal.dragging{opacity:.45}
.deal b{font-weight:700}
.deal .sub{color:var(--muted);font-size:13px}
.deal .row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.deal .mv{display:flex;justify-content:space-between;margin:2px -4px -4px}
.deal .mv .icon-btn:disabled{opacity:.25;cursor:default}

/* reportes */
.tabs{display:flex;flex-wrap:wrap;gap:8px}
.tab{padding:7px 14px;border-radius:999px;border:1px solid var(--line-strong);background:var(--panel);font-weight:600;color:var(--muted)}
.tab:hover{color:var(--ink);border-color:var(--muted)}
.tab[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:var(--bg)}

/* ---------- barra inferior (móvil) ---------- */
.bottomnav{display:none}
.sheet{position:fixed;inset:0;z-index:55;background:rgba(15,25,19,.5);display:flex;align-items:flex-end}
.sheet-in{width:100%;background:var(--panel);border-radius:18px 18px 0 0;padding:16px 16px calc(24px + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.sheet-in button{display:flex;align-items:center;gap:10px;padding:14px;border-radius:12px;border:1px solid var(--line);background:var(--panel);font-weight:600;text-align:left}
.sheet-in svg{width:20px;height:20px;color:var(--brand)}

/* ---------- productor ---------- */
body[data-role="productor"]{font-size:18px}
.p-shell{min-height:100vh;display:flex;flex-direction:column}
.p-top{background:var(--side-bg);color:var(--side-ink);padding:12px max(16px,env(safe-area-inset-right,0px)) 12px max(16px,env(safe-area-inset-left,0px));display:flex;align-items:center;justify-content:space-between;gap:12px}
.p-top .side-brand b{font-size:15px}
.p-top .out{display:inline-flex;gap:8px;align-items:center;padding:8px 14px;border-radius:10px;border:1px solid var(--side-line);background:transparent;color:var(--side-ink);font-weight:600;font-size:15px}
.p-top .out svg{width:18px;height:18px}
.p-main{width:100%;max-width:760px;margin:0 auto;padding:22px max(16px,env(safe-area-inset-right,0px)) 48px max(16px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:20px}
.p-main h1{font-size:28px;line-height:1.2}
.p-hello p{color:var(--muted);margin-top:4px}
.p-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px 20px;display:flex;flex-direction:column;gap:6px}
.p-card .big{font-family:var(--font-display);font-size:34px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.15}
.big-btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.big-btn{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:20px;min-height:132px;border-radius:20px;border:2px solid var(--line-strong);background:var(--panel);text-align:left}
.big-btn:hover{border-color:var(--btn);background:var(--tint)}
.big-btn .ic{width:52px;height:52px;border-radius:14px;background:var(--btn);color:var(--btn-ink);display:grid;place-items:center}
.big-btn .ic svg{width:28px;height:28px}
.big-btn b{font-size:21px;font-family:var(--font-display);font-weight:600}
.big-btn span{color:var(--muted);font-size:16px;line-height:1.35}
.big-btn.help .ic{background:var(--tint);color:var(--brand)}
.p-back{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;min-height:52px;padding:10px 20px;border-radius:14px;border:2px solid var(--line-strong);background:var(--panel);font-weight:700;font-size:18px}
.p-back svg{width:22px;height:22px}
.p-list{display:flex;flex-direction:column;gap:12px}
.p-item{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px 18px;display:flex;flex-direction:column;gap:8px}
.p-item .top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.p-item b{font-size:19px}
.p-item .amt{font-family:var(--font-display);font-weight:600;font-size:22px;font-variant-numeric:tabular-nums;white-space:nowrap}
.p-item .meta{color:var(--muted);font-size:16px}
.p-btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:60px;padding:12px 20px;border-radius:16px;border:0;background:var(--btn);color:var(--btn-ink);font-weight:700;font-size:19px;width:100%}
.p-btn:hover{background:var(--btn-hover)}
.p-btn svg{width:24px;height:24px}
.p-btn.alt{background:var(--panel);color:var(--ink);border:2px solid var(--line-strong)}
.choice{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.choice button{padding:14px 8px;min-height:64px;border-radius:14px;border:2px solid var(--line-strong);background:var(--panel);font-weight:700;font-size:17px}
.choice button[aria-pressed="true"]{border-color:var(--btn);background:var(--btn);color:var(--btn-ink)}
.faq{border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.faq summary{padding:16px 18px;font-weight:700;font-size:18px;cursor:pointer}
.faq p{padding:0 18px 16px;color:var(--muted)}
.p-big-in input,.p-big-in select{min-height:56px;font-size:19px}
.p-big-in label{font-size:17px}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .two{grid-template-columns:minmax(0,1fr)}
  .three{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .side{display:none}
  .content{padding:20px max(16px,env(safe-area-inset-right,0px)) 96px max(16px,env(safe-area-inset-left,0px))}
  .bottomnav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--panel);border-top:1px solid var(--line);padding:6px max(6px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(6px,env(safe-area-inset-left,0px))}
  .bottomnav button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;border:0;border-radius:10px;background:transparent;color:var(--muted);font-size:11.5px;font-weight:600;position:relative}
  .bottomnav button[aria-current="page"]{color:var(--btn);background:var(--tint)}
  .bottomnav svg{width:22px;height:22px}
  .m-top{display:flex!important}
}
.m-top{display:none;align-items:center;justify-content:space-between;gap:10px;background:var(--side-bg);color:var(--side-ink);padding:10px max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px));position:sticky;top:0;z-index:40}
.m-top .side-brand b{font-size:15px}
.m-top .out{padding:7px 12px;border-radius:9px;border:1px solid var(--side-line);background:transparent;color:var(--side-ink);font-weight:600;font-size:14px}
@media (max-width:640px){
  .kpis{grid-template-columns:minmax(0,1fr)}
  .grid2,.eqs,.pair{grid-template-columns:minmax(0,1fr)}
  .page-head h1{font-size:22px}
  .big-btns{grid-template-columns:minmax(0,1fr)}
  .big-btn{min-height:104px;flex-direction:row;align-items:center;gap:16px}
  .big-btn .tx{display:flex;flex-direction:column;gap:2px}
  .board{grid-auto-columns:minmax(250px,86%)}
  .hrow{grid-template-columns:84px minmax(0,1fr) auto}
  .count{margin-left:0;width:100%}
  .choice{grid-template-columns:minmax(0,1fr)}
  .scrim{align-items:flex-end;padding:0}
  .modal{border-radius:18px 18px 0 0}
}
.side-brand .logo,.p-top .logo,.m-top .logo{width:34px;height:34px;color:var(--side-ink)}