/* 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(--espresso);color:var(--crema);
  border-bottom:1px solid var(--grano);
}
.pbar .who{display:flex;align-items:center;gap:11px;margin-left:auto}
.pbar .avatar{
  width:34px;height:34px;border-radius:999px;background:var(--tostado);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:800;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(--crema)}
.ptabs button[aria-current]{background:var(--senal);color:var(--espresso)}
.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(--senal);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:800;font-size:32px;letter-spacing:-.035em;margin:0}
.head p{margin:6px 0 0;color:var(--tinta-2);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(--espresso)}
.btn2.solid{background:var(--espresso);color:var(--crema);border-color:var(--espresso)}
.btn2.solid:hover{filter:brightness(1.15)}
.btn2.accent{background:var(--senal);border-color:var(--senal)}
.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:#E7F1E1;color:#3B6B2E}
.tag.warn{background:#FBE8E4;color:#A5382A}
.tag.neutral{background:#F1EADD;color:var(--tinta-2)}

/* kanban */
.kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
.col{background:#E6DDCE;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:#DFD3BE;outline-color:var(--tostado)}
.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:700;font-size:15px}
.col .ttl i{width:9px;height:9px;border-radius:999px}
.col .n{font-family:var(--mono);font-size:12px;color:var(--tinta-2);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(30,21,18,.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:900;font-size:26px;letter-spacing:-.04em;line-height:1}
.ocard .items{display:flex;flex-direction:column;gap:8px;border-top:1px solid #EFE8DA;border-bottom:1px solid #EFE8DA;padding:11px 0}
.ocard .it{display:flex;gap:10px;font-size:14px}
.ocard .it b{font-family:var(--mono);font-size:13px;color:var(--tostado);flex-shrink:0}
.ocard .act{
  border-radius:12px;padding:12px;text-align:center;font-weight:700;font-size:14px;
  background:var(--espresso);color:var(--crema);transition:.14s;
}
.ocard .act:active{transform:scale(.98)}
.ocard .act.accent{background:var(--senal);color:var(--espresso)}
.ocard .act.soft{background:#F1EADD;color:var(--espresso)}
.empty{text-align:center;color:#8B8078;font-size:13px;padding:22px 8px;line-height:1.5}

/* 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:800;font-size:31px;letter-spacing:-.04em}
.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:#FBF8F2;border-bottom:1px solid var(--borde-light);
}
td{padding:15px 18px;border-bottom:1px solid #F0EAE0;font-size:15px;vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:#FCFAF6}
.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:#F1EADD;color:var(--tinta-2);
  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:#F0C9C1;background:#FFFBFA}
.stepper{display:flex;align-items:center;gap:12px}
.stepper button{width:34px;height:34px;border-radius:10px;background:#F1EADD;font-size:17px;transition:.14s}
.stepper button:hover{background:var(--espresso);color:var(--crema)}
.stepper .q{font-family:var(--display);font-weight:800;font-size:25px;letter-spacing:-.03em;min-width:56px}
.alert{display:flex;gap:12px;align-items:center;background:#FBE8E4;border:1px solid #F0C9C1;border-radius:var(--r-m);padding:14px 16px;font-size:14px;color:#A5382A;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(--tinta-2);white-space:nowrap}
.bars .fill{width:100%;border-radius:8px 8px 0 0;background:var(--tostado);transition:height .5s cubic-bezier(.22,1,.36,1);min-height:4px}
.bars .b.max .fill{background:var(--espresso)}
.bars .l{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--humo)}
.meter{height:9px;border-radius:999px;background:#F1EADD;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(--espresso);color:var(--crema);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:#2A1F1A;color:var(--crema)}
.side nav button[aria-current]{background:var(--sup-1);color:var(--senal)}
.side .badge{font-family:var(--mono);font-size:11px;color:#6E635B}
.side nav button[aria-current] .badge{color:var(--senal)}
.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(--espresso);color:var(--crema);border-radius:var(--r-m);
  padding:15px 18px;display:flex;gap:13px;align-items:center;
  box-shadow:0 18px 40px rgba(30,21,18,.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}
}