: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; background:#1c1620; color:#eee; display:flex; flex-direction:column; padding:18px 14px; position:sticky; top:0; height:100vh; }
.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; 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); }