/* Paneles de escritorio · mostrador y admin */
.panel{min-height:calc(100dvh - 61px);background:var(--papel);display:flex;flex-direction:column}

/* barra de contexto */
.pbar{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  padding:14px 26px;background:var(--carbon);color:var(--lino);
  border-bottom:1px solid var(--grafito);
}
.pbar .who{display:flex;align-items:center;gap:11px;margin-left:auto}
.pbar .avatar{
  width:34px;height:34px;border-radius:999px;background:var(--oliva);color:#FFFFFF;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:600;font-size:13px;flex-shrink:0;
}
.ptabs{display:flex;gap:4px;flex-wrap:wrap}
.ptabs button{
  padding:9px 17px;border-radius:999px;font-size:14px;font-weight:600;
  color:var(--texto-dark);transition:.16s;
}
.ptabs button:hover{background:var(--sup-1);color:var(--lino)}
.ptabs button[aria-current]{background:var(--ambar);color:var(--carbon)}
.clock{display:flex;align-items:center;gap:9px;background:var(--sup-1);border-radius:999px;padding:8px 14px}
.clock i{width:8px;height:8px;border-radius:999px;background:var(--ambar);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

.wrap{padding:28px;flex:1;display:flex;flex-direction:column;gap:22px;max-width:1560px;width:100%;margin:0 auto}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.head h1{font-family:var(--display);font-weight:300;font-size:32px;letter-spacing:-.01em;margin:0}
.head p{margin:6px 0 0;color:var(--piedra);font-size:15px}

.box{background:#fff;border:1px solid var(--borde-light);border-radius:var(--r-l);padding:20px}
.btn2{
  border:1px solid var(--borde-light);background:#fff;border-radius:999px;
  padding:10px 17px;font-size:14px;font-weight:600;transition:.16s;
}
.btn2:hover{border-color:var(--carbon)}
.btn2.solid{background:var(--carbon);color:var(--lino);border-color:var(--carbon)}
.btn2.solid:hover{filter:brightness(1.15)}
.btn2.accent{background:var(--oliva);border-color:var(--oliva);color:#FFFFFF}
.tag{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;white-space:nowrap;
}
.tag.ok{background:#E9EFE1;color:#4E6238}
.tag.warn{background:#F7E7E3;color:#98392A}
.tag.neutral{background:#F1ECE4;color:var(--piedra)}

/* kanban */
.kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
.col{background:#E7E2D9;border-radius:var(--r-l);padding:14px;display:flex;flex-direction:column;gap:12px;min-height:220px;transition:background .16s,outline-color .16s;outline:2px dashed transparent;outline-offset:-4px}
.col.over{background:#DED8CD;outline-color:var(--oliva)}
.col > header{display:flex;align-items:center;justify-content:space-between;padding:2px 4px}
.col .ttl{display:flex;align-items:center;gap:9px;font-family:var(--display);font-weight:600;font-size:15px}
.col .ttl i{width:9px;height:9px;border-radius:999px}
.col .n{font-family:var(--mono);font-size:12px;color:var(--piedra);background:#fff;border-radius:999px;padding:3px 9px}
.ocard{
  background:#fff;border-radius:var(--r-m);padding:15px;display:flex;flex-direction:column;gap:12px;
  box-shadow:0 1px 3px rgba(36,36,34,.07);cursor:grab;
  animation:cardIn .3s cubic-bezier(.22,1,.36,1);
}
.ocard.dragging{opacity:.45;cursor:grabbing}
@keyframes cardIn{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}
.ocard .num{font-family:var(--display);font-weight:300;font-size:26px;letter-spacing:-.01em;line-height:1}
.ocard .items{display:flex;flex-direction:column;gap:8px;border-top:1px solid #EFEAE1;border-bottom:1px solid #EFEAE1;padding:11px 0}
.ocard .it{display:flex;gap:10px;font-size:14px}
.ocard .it b{font-family:var(--mono);font-size:13px;color:var(--oliva);flex-shrink:0}
.ocard .act{
  border-radius:12px;padding:12px;text-align:center;font-weight:600;font-size:14px;
  background:var(--carbon);color:var(--lino);transition:.14s;
}
.ocard .act:active{transform:scale(.98)}
.ocard .act.accent{background:var(--ambar);color:var(--carbon)}
.ocard .act.soft{background:#F1ECE4;color:var(--carbon)}
.empty{text-align:center;color:#93938C;font-size:13px;padding:22px 8px;line-height:1.5}
.ocard.here{box-shadow:0 0 0 2px var(--ambar),0 6px 16px rgba(36,36,34,.12)}
.ocard .tags{display:flex;gap:6px;flex-wrap:wrap}
.tag.soft{background:#FAF5F0;color:var(--humo);border:1px solid var(--borde-light)}
.rule-strip{
  display:flex;gap:13px;align-items:center;flex-wrap:wrap;
  background:#F1ECE4;border-radius:var(--r-m);padding:13px 16px;
  font-size:14px;line-height:1.45;color:var(--piedra);
}
.rule-strip > div{flex:1;min-width:260px}
.rule-strip strong{color:var(--carbon)}

/* grillas */
.g3{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.g4{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.kpi{background:#fff;border:1px solid var(--borde-light);border-radius:var(--r-l);padding:20px;display:flex;flex-direction:column;gap:7px}
.kpi .v{font-family:var(--display);font-weight:300;font-size:31px;letter-spacing:-.01em}
.kpi .d{font-size:13px;font-weight:600}

/* tablas */
.table{background:#fff;border:1px solid var(--borde-light);border-radius:var(--r-l);overflow:hidden}
.table .scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:720px}
th{
  text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--humo);font-weight:500;padding:14px 18px;background:#FBF9F5;border-bottom:1px solid var(--borde-light);
}
td{padding:15px 18px;border-bottom:1px solid #EFEAE1;font-size:15px;vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:#FBF9F5}
.num{text-align:right;font-family:var(--mono);font-size:14px}
th.num{text-align:right}
.who2{display:flex;align-items:center;gap:11px}
.ini{
  width:32px;height:32px;border-radius:999px;background:#F1ECE4;color:var(--piedra);
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;flex-shrink:0;
}

/* stock */
.stock-card{background:#fff;border:1px solid var(--borde-light);border-radius:var(--r-m);padding:16px;display:flex;flex-direction:column;gap:13px;transition:border-color .2s}
.stock-card.low{border-color:#E8C7BF;background:#FDFAF9}
.stepper{display:flex;align-items:center;gap:12px}
.stepper button{width:34px;height:34px;border-radius:10px;background:#F1ECE4;font-size:17px;transition:.14s}
.stepper button:hover{background:var(--carbon);color:var(--lino)}
.stepper .q{font-family:var(--display);font-weight:300;font-size:25px;letter-spacing:-.01em;min-width:56px}
.alert{display:flex;gap:12px;align-items:center;background:#F7E7E3;border:1px solid #E8C7BF;border-radius:var(--r-m);padding:14px 16px;font-size:14px;color:#98392A;line-height:1.45}
.alert i{width:9px;height:9px;border-radius:999px;background:var(--alerta);flex-shrink:0}

/* gráfico */
.bars{display:flex;align-items:flex-end;gap:10px;height:230px;padding-top:14px}
.bars .b{flex:1;display:flex;flex-direction:column;align-items:center;gap:9px;height:100%;justify-content:flex-end}
.bars .v{font-family:var(--mono);font-size:11px;color:var(--piedra);white-space:nowrap}
.bars .fill{width:100%;border-radius:8px 8px 0 0;background:var(--oliva);transition:height .5s cubic-bezier(.22,1,.36,1);min-height:4px}
.bars .b.max .fill{background:var(--carbon)}
.bars .l{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--humo)}
.meter{height:9px;border-radius:999px;background:#F1ECE4;overflow:hidden}
.meter i{display:block;height:100%;border-radius:999px;transition:width .5s cubic-bezier(.22,1,.36,1)}

/* sidebar admin */
.admin{display:grid;grid-template-columns:236px 1fr;flex:1;min-height:0}
.side{background:var(--carbon);color:var(--lino);padding:22px 16px;display:flex;flex-direction:column;gap:22px}
.side nav{display:flex;flex-direction:column;gap:3px}
.side nav button{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;border-radius:12px;font-size:15px;font-weight:600;color:var(--texto-dark);transition:.16s;text-align:left;
}
.side nav button:hover{background:#2C2C29;color:var(--lino)}
.side nav button[aria-current]{background:var(--sup-1);color:var(--ambar)}
.side .badge{font-family:var(--mono);font-size:11px;color:#75756E}
.side nav button[aria-current] .badge{color:var(--ambar)}
.side .local{margin-top:auto;background:var(--sup-1);border-radius:var(--r-m);padding:15px;display:flex;flex-direction:column;gap:5px}

/* toast panel */
.ptoast{
  position:fixed;right:22px;bottom:22px;z-index:80;
  background:var(--carbon);color:var(--lino);border-radius:var(--r-m);
  padding:15px 18px;display:flex;gap:13px;align-items:center;
  box-shadow:0 18px 40px rgba(36,36,34,.35);
  animation:ptIn .3s cubic-bezier(.22,1,.36,1);max-width:340px;
}
.ptoast.out{animation:ptOut .25s ease forwards}
@keyframes ptIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes ptOut{to{opacity:0;transform:translateY(12px)}}

@media (max-width:1080px){
  .kanban{grid-template-columns:1fr}
  .admin{grid-template-columns:1fr}
  .side{flex-direction:row;align-items:center;gap:14px;overflow-x:auto;padding:12px 16px}
  .side .brandbox,.side .local{display:none}
  .side nav{flex-direction:row;gap:6px}
  .side nav button{white-space:nowrap;padding:9px 15px;border-radius:999px}
}
@media (max-width:640px){
  .wrap{padding:18px 14px}
  .head h1{font-size:26px}
  .pbar{padding:12px 14px;gap:12px}
  .ptoast{left:14px;right:14px;bottom:14px;max-width:none}
}