:root{
  --pink:#b5179e; --pink-d:#7b2d6b; --pink-l:#f3e8f1;
  --bg:#f6f5f8; --card:#fff; --line:#e6e3ea; --txt:#2a2430; --muted:#8a8295;
  --ok:#1b9e5a; --warn:#e08a00; --crit:#d62828;
}
*{ box-sizing:border-box; }
body{ margin:0; font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif; background:var(--bg); color:var(--txt); }
a{ color:inherit; text-decoration:none; }

/* ---------- Login ---------- */
.login-body{ display:flex; min-height:100vh; align-items:center; justify-content:center; background:linear-gradient(135deg,#b5179e22,#7b2d6b11); }
.login-card{ background:var(--card); padding:34px 30px; border-radius:16px; box-shadow:0 12px 40px #0001; width:340px; }
.login-mark{ width:64px; height:64px; display:block; margin:0 auto 6px; }
.login-logo{ font-size:26px; font-weight:800; color:var(--txt); text-align:center; }
.login-logo span{ color:var(--pink); }
.login-sub{ color:var(--muted); margin:2px 0 18px; font-size:13px; }
.login-card label{ display:block; font-size:12px; color:var(--muted); margin:12px 0 4px; }
.login-card input{ width:100%; padding:11px; border:1px solid var(--line); border-radius:9px; font-size:14px; }

/* ---------- Layout ---------- */
.layout{ display:flex; min-height:100vh; }
.sidebar{ width:230px; flex-shrink:0; background:#1c1620; color:#eee; display:flex; flex-direction:column; padding:18px 14px; position:sticky; top:0; height:100vh; overflow-y:auto; }
.brand{ font-size:20px; font-weight:800; color:#fff; margin-bottom:4px; display:flex; align-items:center; gap:8px; }
.brand-logo{ width:34px; height:34px; }
.brand b{ color:#e05fb0; font-weight:800; }

/* barra de dia activo (produccion / etiquetas) */
.dia-bar{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 16px; margin-top:14px; }
.dia-actual{ font-size:15px; }
.dia-actual b{ color:var(--pink); }
.dia-prog{ font-size:12px; color:var(--muted); margin-left:8px; }
.dia-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.cell-sel{ padding:6px 8px; border:1px solid var(--line); border-radius:7px; font-size:13px; min-width:110px; }
.row-emg td{ background:#fff5f3 !important; }
.emg-motivo{ font-size:11px; color:var(--crit); font-weight:600; }
.sem-pill{ font-size:11px; background:var(--pink); color:#fff; display:inline-block; padding:3px 9px; border-radius:20px; margin-bottom:18px; width:fit-content; }
.nav-item{ display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:10px; color:#cfc8d6; font-size:14px; margin-bottom:3px; }
.nav-item .ico{ font-size:16px; }
.nav-item:hover{ background:#ffffff14; color:#fff; }
.nav-item.active{ background:var(--pink); color:#fff; }
.sidebar-foot{ margin-top:auto; border-top:1px solid #ffffff1a; padding-top:14px; }
.user-name{ font-size:13px; font-weight:600; }
.user-rol{ font-size:11px; color:#9c93a8; margin-bottom:10px; }

.content{ flex:1; min-width:0; padding:26px 30px; max-width:1500px; }

/* ---------- Header / KPIs ---------- */
.page-head{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.page-head h1{ font-size:22px; margin:0; }
.kpis{ display:flex; gap:12px; }
.kpi{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:8px 16px; font-size:12px; color:var(--muted); text-align:center; }
.kpi span{ display:block; font-size:20px; font-weight:800; color:var(--pink); }
.muted{ color:var(--muted); font-size:13px; }

/* ---------- Day / category blocks ---------- */
.day-block{ margin-top:22px; }
.day-title{ font-size:14px; background:var(--pink-l); color:var(--pink-d); padding:8px 14px; border-radius:9px; display:flex; align-items:center; gap:8px; }
.day-title .count{ background:#fff; color:var(--pink-d); font-size:11px; padding:1px 8px; border-radius:12px; }

/* ---------- Tables ---------- */
.table-wrap{ overflow-x:auto; background:var(--card); border:1px solid var(--line); border-radius:12px; margin-top:8px; }
table.grid{ width:100%; border-collapse:collapse; font-size:13px; }
table.grid th,table.grid td{ padding:8px 10px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap; }
table.grid th{ background:#faf9fb; color:var(--muted); font-weight:600; font-size:12px; position:sticky; top:0; }
table.grid td.num,table.grid th.num{ text-align:right; }
table.grid td.center{ text-align:center; }
table.grid td.prod{ font-weight:600; white-space:normal; min-width:200px; }
table.grid tr:hover td{ background:#fcfbfd; }
.cell-num{ width:88px; padding:6px 8px; border:1px solid var(--line); border-radius:7px; text-align:right; font-size:13px; }
.cell-txt{ width:100%; min-width:120px; padding:6px 8px; border:1px solid var(--line); border-radius:7px; font-size:13px; }
td.reg{ display:flex; gap:5px; align-items:center; }
td.reg .cell-txt{ min-width:90px; width:110px; }
.js-pend.falta{ color:var(--crit); font-weight:700; }
.js-pend.ok{ color:var(--ok); }

/* ---------- Badges ---------- */
.badge{ font-size:12px; }

/* ---------- Tabs ---------- */
.tabs{ display:flex; gap:6px; align-items:center; margin-top:16px; flex-wrap:wrap; }
.tab{ padding:8px 16px; border-radius:9px 9px 0 0; background:var(--card); border:1px solid var(--line); border-bottom:none; font-size:13px; }
.tab.active{ background:var(--pink); color:#fff; border-color:var(--pink); }
.tab.toggle{ border-radius:9px; border-bottom:1px solid var(--line); }
.tabs .spacer{ flex:1; }

/* ---------- Buttons / forms ---------- */
.btn{ display:inline-block; padding:9px 16px; border-radius:9px; border:1px solid var(--line); background:var(--card); cursor:pointer; font-size:13px; }
.btn.primary{ background:var(--pink); color:#fff; border-color:var(--pink); }
.btn.ghost{ background:transparent; color:#ddd; border-color:#ffffff33; text-align:center; }
.btn.block{ display:block; width:100%; margin-top:8px; }
.btn.mini{ padding:6px 10px; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:18px; max-width:520px; }
.card label{ display:block; font-size:12px; color:var(--muted); margin:12px 0 4px; }
.card input{ width:100%; padding:10px; border:1px solid var(--line); border-radius:9px; font-size:14px; }
.card .btn{ margin-top:16px; }
.form-inline{ display:flex; gap:6px; flex-wrap:wrap; margin:10px 0; }
.form-inline input{ padding:8px; border:1px solid var(--line); border-radius:7px; font-size:13px; }

.alert{ padding:11px 14px; border-radius:9px; font-size:13px; margin:12px 0; }
.alert.ok{ background:#e7f7ee; color:var(--ok); }
.alert.err{ background:#fdeaea; color:var(--crit); }

/* ---------- Cronograma ---------- */
.cron-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; margin-top:14px; }
.cron-card{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 16px; }
.cron-card.hoy{ border-color:var(--pink); box-shadow:0 0 0 2px #b5179e22; }
.cron-day{ font-size:14px; margin:0 0 8px; color:var(--pink-d); display:flex; align-items:center; gap:6px; }
.hoy-pill{ background:var(--pink); color:#fff; font-size:10px; padding:1px 7px; border-radius:10px; }
.cron-sec{ font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); margin:10px 0 3px; font-weight:600; }
.cron-item{ display:flex; gap:8px; align-items:flex-start; font-size:13px; padding:3px 0; cursor:pointer; }
.cron-item.done span{ text-decoration:line-through; color:var(--muted); }
.cron-item input{ margin-top:2px; }

.cron-banner{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:#fff6fb; border:1px solid #f3c9e6; border-radius:10px; padding:10px 14px; margin-top:14px; font-size:13px; }
.cb-dia{ font-weight:700; color:var(--pink-d); }
.cb-items{ color:var(--txt); }
.cb-link{ margin-left:auto; color:var(--pink); font-weight:600; }

/* ---------- Resumen ---------- */
.cards-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:12px; }
.big-card{ flex:1; min-width:220px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px 18px; }
.bc-top{ font-size:13px; color:var(--muted); }
.bc-num{ font-size:34px; font-weight:800; color:var(--pink); margin:4px 0; }
.bc-bar{ height:8px; background:var(--pink-l); border-radius:6px; overflow:hidden; margin:6px 0; }
.bc-bar span{ display:block; height:100%; background:var(--pink); }
.bc-sub{ font-size:12px; color:var(--muted); }
.mini-card{ flex:1; min-width:160px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 14px; }
.mc-name{ font-size:13px; font-weight:600; }
.mc-stats{ font-size:13px; color:var(--muted); margin-top:4px; }
.mc-stats b{ font-size:20px; color:var(--txt); }
.mc-cri{ color:var(--crit); margin-left:8px; font-size:12px; }
.ghost-card{ flex:1; min-width:170px; background:repeating-linear-gradient(45deg,#fafafa,#fafafa 8px,#f3f3f5 8px,#f3f3f5 16px); border:1px dashed var(--line); border-radius:12px; padding:22px 14px; text-align:center; color:var(--muted); font-size:13px; }
.soon{ font-size:11px; background:#eee; color:#888; padding:2px 8px; border-radius:10px; vertical-align:middle; }

/* ---------- Toast ---------- */
.save-toast{ position:fixed; bottom:24px; right:24px; background:#222; color:#fff; padding:10px 18px; border-radius:10px; font-size:13px; opacity:0; transform:translateY(10px); transition:.2s; pointer-events:none; }
.save-toast.show{ opacity:1; transform:translateY(0); }


/* ---------- Menu por areas colapsables (17 ago 2026) ---------- */
.nav-area{ margin-bottom:6px; }
.nav-area-tit{ display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:9px;
  color:#9d94a8; font-size:11px; font-weight:700; letter-spacing:.7px; text-transform:uppercase;
  cursor:pointer; list-style:none; user-select:none; }
.nav-area-tit::-webkit-details-marker{ display:none; }
.nav-area-tit:hover{ background:#ffffff0d; color:#cfc8d6; }
.nav-area-nom{ flex:1; }
.nav-area-cnt{ font-size:10px; background:#ffffff14; color:#9d94a8; border-radius:20px;
  padding:1px 7px; font-weight:600; }
.nav-area-tit::after{ content:'\25be'; font-size:11px; color:#6f6579; transition:transform .15s; }
.nav-area[open] > .nav-area-tit::after{ transform:rotate(180deg); }
.nav-area[open] > .nav-area-tit{ color:#cfc8d6; }
.nav-area .nav-item{ margin-left:9px; font-size:13.5px; padding:9px 11px; }
.nav-area[open] .nav-item{ animation:navIn .16s ease-out; }
@keyframes navIn{ from{ opacity:0; transform:translateY(-3px);} to{ opacity:1; transform:none; } }

/* ============================================================
   Version movil (18 ago 2026)
   La barra lateral se esconde y sale con el boton de menu.
   Nada de esto toca el escritorio: todo vive detras de @media.
   ============================================================ */

/* Barra superior movil: invisible en escritorio */
.topbar{ display:none; }

@media (max-width: 920px){

  /* ---- estructura: contenido a lo ancho, menu flotante ---- */
  .layout{ display:block; }
  .content{ padding:14px 12px; max-width:none; }

  .topbar{ display:flex; align-items:center; gap:12px; position:sticky; top:0; z-index:60;
    background:#1c1620; color:#fff; padding:10px 14px; }
  .topbar .brand{ margin:0; font-size:17px; }
  .topbar .brand-logo{ width:26px; height:26px; }
  .topbar-sem{ margin:0 0 0 auto; }
  .nav-btn{ background:none; border:none; color:#fff; font-size:22px; padding:4px 8px; cursor:pointer; line-height:1; }

  .sidebar{ position:fixed; left:0; top:0; bottom:0; height:100dvh; width:262px; z-index:80;
    transform:translateX(-105%); transition:transform .2s ease-out; box-shadow:8px 0 30px #0000;
  }
  body.nav-open .sidebar{ transform:none; box-shadow:8px 0 30px #0007; }
  .nav-backdrop{ display:none; position:fixed; inset:0; background:#00000066; z-index:70; }
  body.nav-open .nav-backdrop{ display:block; }
  body.nav-open{ overflow:hidden; }

  /* ---- titulos y KPIs mas compactos ---- */
  .page-head h1{ font-size:19px; }
  .kpis{ flex-wrap:wrap; }
  .kpi{ flex:1; min-width:96px; }

  /* ---- pestanas de dias: una sola fila deslizable ---- */
  .tabs{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px; }
  .tab{ white-space:nowrap; flex-shrink:0; }

  /* ---- tarjetas del resumen: apiladas ---- */
  .cards-row{ gap:10px; }
  .big-card,.mini-card,.ghost-card{ min-width:100%; }
  .bc-num{ font-size:28px; }

  /* ---- tablas: el producto queda fijo mientras se desliza a la derecha ---- */
  table.grid td.prod{ position:sticky; left:0; background:var(--card); z-index:1;
    box-shadow:1px 0 0 var(--line); min-width:150px; max-width:180px; }
  table.grid tr:hover td.prod{ background:#fcfbfd; }
  table.grid th,table.grid td{ padding:7px 8px; }

  /* los campos donde se teclea, con letra de 16px: evita que el celular haga zoom solo */
  .cell-num,.cell-txt,.cell-sel{ font-size:16px; }
  .cell-num{ width:74px; }

  /* ---- barra del dia y avisos: apilados ---- */
  .dia-bar{ flex-direction:column; align-items:stretch; }
  .dia-actions{ justify-content:stretch; }
  .dia-actions .btn{ flex:1; text-align:center; }

  .cron-banner{ font-size:12px; }
  .cb-link{ margin-left:0; width:100%; }

  /* ---- formularios y login ---- */
  .card{ max-width:none; }
  .login-card{ width:min(340px, 92vw); }
  .form-inline input{ min-width:0; }

  .save-toast{ left:12px; right:12px; bottom:12px; text-align:center; }
}

/* Pantallas muy angostas: se compacta un poco mas */
@media (max-width: 420px){
  .content{ padding:10px 8px; }
  .topbar-sem{ display:none; }
  table.grid{ font-size:12.5px; }
}