:root {
  --bg:#F7F8FA;--white:#FFFFFF;--surface:#FFFFFF;--surface-2:#F0F2F5;--surface-3:#E8EBF0;
  --border:#E2E5EB;--border-light:#ECEEF2;--text:#1A1D26;--text-2:#5A6178;--text-3:#8B92A5;
  --accent:#1E3A5F;--accent-light:#2D5A8E;--accent-dim:rgba(30,58,95,0.06);--accent-mid:rgba(30,58,95,0.12);
  --green:#0D9668;--green-dim:rgba(13,150,104,0.08);--green-light:#E8F5F0;
  --amber:#C07C00;--amber-dim:rgba(192,124,0,0.08);--amber-light:#FFF7E6;
  --red:#D03040;--red-dim:rgba(208,48,64,0.08);--red-light:#FEF0F0;
  --violet:#6B4FA0;--violet-dim:rgba(107,79,160,0.08);--violet-light:#F3F0FA;
  --cyan:#0078A8;--cyan-dim:rgba(0,120,168,0.08);
  --radius:8px;--radius-lg:12px;--radius-sm:6px;
  --shadow-sm:0 1px 3px rgba(0,0,0,0.06);--shadow:0 4px 16px rgba(0,0,0,0.06);--shadow-lg:0 12px 40px rgba(0,0,0,0.12);
  --transition:180ms ease;--font:'Plus Jakarta Sans',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased}

/* ── Login screen ── */
#login-screen{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--bg)}
.login-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:40px;width:380px;max-width:94vw;box-shadow:var(--shadow-lg)}
.login-logo{display:block;height:36px;margin:0 auto 24px}
.login-title{font-size:20px;font-weight:700;text-align:center;margin-bottom:4px}
.login-sub{font-size:13px;color:var(--text-3);text-align:center;margin-bottom:28px}
.login-err{background:var(--red-light);color:var(--red);border-radius:var(--radius-sm);padding:10px 14px;font-size:13px;margin-bottom:16px;display:none}
.btn-google{background:#fff;color:#3c4043;border:1px solid var(--border);font-weight:500;font-size:14px;padding:10px 18px;gap:10px;transition:var(--transition)}
.btn-google:hover{background:var(--surface-2);border-color:#bbb}

/* ── App shell (hidden until logged in) ── */
#app{display:none}

/* ── Topbar ── */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:0 24px;height:56px;background:var(--white);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}
.topbar-left{display:flex;align-items:center;gap:16px}
.brand-logo{height:32px}
.brand-sep{width:1px;height:22px;background:var(--border)}
.brand-module{font-size:14px;font-weight:500;color:var(--text-2)}
.topbar-right{display:flex;align-items:center;gap:14px}
.user-pill{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--border);padding:4px 12px 4px 4px;border-radius:24px}
.avatar{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;letter-spacing:.5px}
.avatar.master{background:var(--green-light);color:var(--green)}
.avatar.editor{background:var(--violet-light);color:var(--violet)}
.avatar.viewer{background:var(--amber-light);color:var(--amber)}
.user-name{font-size:12.5px;color:var(--text-2);font-weight:500}
.role-tag{font-size:10px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;padding:3px 10px;border-radius:4px}
.role-tag.master{background:var(--green-light);color:var(--green)}
.role-tag.editor{background:var(--violet-light);color:var(--violet)}
.role-tag.viewer{background:var(--amber-light);color:var(--amber)}
.btn-logout{background:none;border:1px solid var(--border);color:var(--text-3);font-family:var(--font);font-size:12px;padding:5px 12px;border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition)}
.btn-logout:hover{border-color:var(--red);color:var(--red)}

/* ── Nav ── */
.nav{display:flex;padding:0 24px;background:var(--white);border-bottom:1px solid var(--border);overflow-x:auto}
.nav-item{padding:12px 18px;font-size:13px;font-weight:500;color:var(--text-3);cursor:pointer;border-bottom:2px solid transparent;transition:var(--transition);user-select:none;white-space:nowrap}
.nav-item:hover{color:var(--text-2)}
.nav-item.active{color:var(--accent);border-color:var(--accent)}

/* ── Main ── */
.main {
  padding: 28px 60px;
  max-width: 1600px;
  margin: 0 auto;
}
.tab-content{display:none}
.tab-content.active{display:block}
.sec-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.sec-title{font-size:18px;font-weight:600;display:flex;align-items:center;gap:10px}
.sec-count{font-size:12px;color:var(--text-3);font-weight:500;background:var(--surface-2);padding:2px 10px;border-radius:10px}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:6px;font-family:var(--font);font-size:13px;font-weight:500;padding:8px 18px;border-radius:var(--radius-sm);border:1px solid transparent;cursor:pointer;transition:var(--transition);white-space:nowrap}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-light)}
.btn-ghost{background:var(--white);color:var(--text-2);border-color:var(--border)}
.btn-ghost:hover{background:var(--surface-2);color:var(--text)}
.btn-danger{background:var(--red-light);color:var(--red)}
.btn-danger:hover{background:var(--red-dim)}
.btn-sm{padding:5px 12px;font-size:12px}
.btn svg{width:14px;height:14px}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ── Tables ── */
.table-wrap{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
table{width:100%;border-collapse:collapse}
th{text-align:left;padding:11px 16px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:var(--text-3);background:var(--surface-2);border-bottom:1px solid var(--border)}
td{padding:14px 16px;font-size:13px;border-bottom:1px solid var(--border-light);vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr{transition:background var(--transition)}
tbody tr:hover td{background:var(--surface-2)}
.cell-main{font-weight:600;color:var(--text)}
.cell-sub{font-size:11.5px;color:var(--text-3);margin-top:2px}
.badge{display:inline-block;padding:3px 10px;border-radius:4px;font-size:11px;font-weight:600;letter-spacing:.3px;text-transform:uppercase}
.badge-master{background:var(--green-light);color:var(--green)}
.badge-editor{background:var(--violet-light);color:var(--violet)}
.badge-viewer{background:var(--amber-light);color:var(--amber)}
.chip-list{display:flex;flex-wrap:wrap;gap:4px}
.chip{font-size:11px;padding:3px 8px;border-radius:4px;background:var(--surface-2);color:var(--text-2);white-space:nowrap;border:1px solid var(--border-light)}
.chip-none{font-size:12px;color:var(--text-3)}
.actions{display:flex;gap:6px}

/* ── Modal ── */
.modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.3);backdrop-filter:blur(4px);z-index:500;align-items:center;justify-content:center}
.modal-bg.open{display:flex}
.modal{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);width:560px;max-width:94vw;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg);animation:modalIn 200ms ease}
@keyframes modalIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border)}
.modal-head h3{font-size:16px;font-weight:600}
.modal-x{background:none;border:none;color:var(--text-3);font-size:20px;cursor:pointer;padding:2px;line-height:1;transition:var(--transition)}
.modal-x:hover{color:var(--text)}
.modal-body{padding:24px}
.modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:16px 24px;border-top:1px solid var(--border)}
.fg{margin-bottom:20px}
.fl{display:block;font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--text-2);margin-bottom:6px}
.fi,.fs{width:100%;padding:10px 14px;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:var(--font);font-size:14px;outline:none;transition:var(--transition)}
.fi:focus,.fs:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.fi:disabled{opacity:.5;cursor:not-allowed;background:var(--surface-2)}
.fs{cursor:pointer}
.fhint{font-size:11.5px;color:var(--text-3);margin-top:4px}
/* ── Multi-select dropdown ── */
.ms-wrap{position:relative;width:100%}
.ms-display{width:100%;padding:8px 14px;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:var(--font);font-size:14px;cursor:pointer;min-height:40px;display:flex;flex-wrap:wrap;gap:4px;align-items:center;transition:var(--transition)}
.ms-display:hover{border-color:var(--accent)}
.ms-display.open{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.ms-tag{display:inline-flex;align-items:center;gap:3px;background:var(--accent-dim);color:var(--accent);font-size:11px;font-weight:600;padding:2px 8px;border-radius:3px}
.ms-tag .ms-tag-x{cursor:pointer;font-size:13px;line-height:1;opacity:.7}
.ms-tag .ms-tag-x:hover{opacity:1}
.ms-placeholder{color:var(--text-3);font-size:13px}
.ms-dd{display:none;position:absolute;top:100%;left:0;right:0;z-index:50;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-sm);margin-top:4px;box-shadow:var(--shadow);max-height:220px;overflow-y:auto}
.ms-dd.open{display:block}
.ms-dd label{display:flex;align-items:center;gap:8px;padding:8px 14px;font-size:13px;cursor:pointer;transition:background .15s}
.ms-dd label:hover{background:var(--surface)}
.ms-dd label input[type=checkbox]{accent-color:var(--accent)}
.ms-dd .ms-new-row{display:flex;gap:6px;padding:8px 14px;border-top:1px solid var(--border)}
.ms-dd .ms-new-row input{flex:1;padding:6px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:12px;font-family:var(--font)}
.ms-dd .ms-new-row button{padding:4px 10px;border:none;background:var(--accent);color:#fff;border-radius:var(--radius-sm);font-size:12px;cursor:pointer}

/* ── Toast ── */
.toast{position:fixed;bottom:24px;right:24px;background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:14px 20px;font-size:13px;color:var(--text);font-weight:500;box-shadow:var(--shadow);transform:translateY(80px);opacity:0;transition:all 250ms ease;z-index:999}
.toast.on{transform:translateY(0);opacity:1}
.toast.ok{border-left:3px solid var(--green)}
.toast.err{border-left:3px solid var(--red)}

/* ── KPI / Dashboard ── */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.kpi-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow-sm)}
.kpi-label{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--text-3);margin-bottom:8px}
.kpi-value{font-size:28px;font-weight:700;color:var(--text);line-height:1}
.kpi-sub{font-size:12px;color:var(--text-3);margin-top:6px}
.kpi-value.green{color:var(--green)}
.kpi-value.red{color:var(--red)}
.kpi-value.amber{color:var(--amber)}
.kpi-value.accent{color:var(--accent)}
.charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}
.chart-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow-sm)}
.chart-card.full{grid-column:1/-1}
.chart-title{font-size:14px;font-weight:600;margin-bottom:16px}
.bar-list{display:flex;flex-direction:column;gap:8px}
.bar-row{display:flex;align-items:center;gap:10px}
.bar-label{font-size:12px;color:var(--text-2);width:140px;text-align:right;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-track{flex:1;height:24px;background:var(--surface-2);border-radius:4px;position:relative;overflow:hidden}
.bar-fill{height:100%;border-radius:4px;transition:width 400ms ease;min-width:2px;background:var(--accent)}
.bar-val{font-size:11px;font-weight:600;color:var(--text);position:absolute;right:8px;top:50%;transform:translateY(-50%)}

/* ── OPs toolbar ── */
.ops-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.ops-search{padding:8px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);font-family:var(--font);font-size:13px;color:var(--text);background:var(--white);outline:none;width:240px;transition:var(--transition)}
.ops-search:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.ops-count{font-size:12px;color:var(--text-3);margin-left:auto}

/* ── Semáforo ── */
.semaforo{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:4px;white-space:nowrap}
.semaforo.vencida{background:var(--red-light);color:var(--red)}
.semaforo.urgente{background:var(--amber-light);color:var(--amber)}
.semaforo.normal{background:var(--green-light);color:var(--green)}
.semaforo-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.semaforo.vencida .semaforo-dot{background:var(--red)}
.semaforo.urgente .semaforo-dot{background:var(--amber)}
.semaforo.normal .semaforo-dot{background:var(--green)}

/* ── Expand row ── */
.expand-btn{background:none;border:none;cursor:pointer;color:var(--text-3);font-size:16px;transition:var(--transition);padding:2px 6px;border-radius:4px;line-height:1}
.expand-btn:hover{color:var(--accent);background:var(--accent-dim)}
.expand-row{display:none}
.expand-row.open{display:table-row}
.expand-cell{padding:0 16px 16px 16px;background:var(--surface-2)}
.expand-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:12px 0}
.expand-item{font-size:12.5px}
.expand-item-label{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-3);margin-bottom:3px}
.expand-item-val{color:var(--text)}
.op-link{color:var(--accent);text-decoration:none;font-weight:600}
.op-link:hover{text-decoration:underline}
.inline-edit-sel{padding:5px 8px;border:1px solid var(--accent);border-radius:var(--radius-sm);font-family:var(--font);font-size:12px;color:var(--text);background:var(--white);cursor:pointer;box-shadow:0 0 0 3px var(--accent-dim)}
.inline-edit{padding:6px 10px;border:1px solid var(--accent);border-radius:var(--radius-sm);font-family:var(--font);font-size:12px;color:var(--text);background:var(--white);outline:none;width:100%;box-shadow:0 0 0 3px var(--accent-dim)}
.btn-edit-op{background:none;border:1px solid var(--border);color:var(--text-3);font-family:var(--font);font-size:11px;padding:4px 10px;border-radius:4px;cursor:pointer;transition:var(--transition)}
.btn-edit-op:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}
.reproceso-badge{display:inline-block;padding:1px 6px;border-radius:3px;font-size:9px;font-weight:700;text-transform:uppercase;background:var(--amber-light);color:var(--amber);margin-left:4px;vertical-align:middle}
tr.zebra-gray td{background:#f8f9fb}
.doc-link{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--accent);text-decoration:none;font-weight:500;padding:2px 8px;border-radius:4px;background:var(--accent-dim);transition:var(--transition)}
.doc-link:hover{background:var(--accent-mid)}
.tipo-badge{display:inline-block;padding:3px 10px;border-radius:4px;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.3px}
.tipo-badge.proveedor{background:var(--cyan-dim);color:var(--cyan)}
.tipo-badge.taller{background:var(--violet-dim);color:var(--violet)}
.tipo-badge.ambos{background:var(--accent-dim);color:var(--accent)}
.prov-proceso-list{display:flex;flex-wrap:wrap;gap:3px}
.prov-proceso-chip{font-size:10px;padding:2px 7px;border-radius:3px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border-light)}

/* ── Multi-select dropdown (Excel-style) ── */
.ms-filter{position:relative;display:inline-block}
.ms-btn{padding:7px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);font-family:var(--font);font-size:12px;color:var(--text-2);background:var(--white);cursor:pointer;display:flex;align-items:center;gap:6px;transition:var(--transition);white-space:nowrap;font-weight:500}
.ms-btn:hover{border-color:var(--accent);background:var(--accent-dim);color:var(--accent)}
.ms-btn.has-filter{border-color:var(--accent);color:var(--white);background:var(--accent);font-weight:600}
.ms-btn::after{content:'▾';font-size:10px}
.ms-drop{display:none;position:absolute;top:100%;left:0;margin-top:4px;background:var(--white);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);z-index:200;min-width:260px;max-width:320px;padding:0;overflow:hidden}
.ms-drop.open{display:block}
.ms-drop-header{padding:8px 10px;border-bottom:1px solid var(--border);background:var(--surface-2)}
.ms-drop-search{width:100%;padding:6px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);font-family:var(--font);font-size:12px;color:var(--text);outline:none;background:var(--white)}
.ms-drop-search:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-dim)}
.ms-drop-search::placeholder{color:var(--text-3)}
.ms-drop-actions{display:flex;gap:6px;margin-top:6px}
.ms-drop-actions button{flex:1;padding:4px 8px;font-family:var(--font);font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;border:1px solid var(--border);border-radius:3px;background:var(--white);color:var(--text-3);cursor:pointer;transition:var(--transition)}
.ms-drop-actions button:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}
.ms-drop-list{max-height:240px;overflow-y:auto;padding:4px 6px}
.ms-drop-list::-webkit-scrollbar{width:5px}
.ms-drop-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
.ms-opt{display:flex;align-items:center;gap:7px;padding:5px 8px;border-radius:4px;cursor:pointer;font-size:12px;color:var(--text-2);transition:var(--transition)}
.ms-opt:hover{background:var(--surface-2);color:var(--text)}
.ms-opt input{accent-color:var(--accent);width:14px;height:14px;cursor:pointer;flex-shrink:0}
.ms-opt.on{color:var(--text);font-weight:500;background:var(--accent-dim)}
.ms-opt .ms-count{margin-left:auto;font-size:10px;color:var(--text-3);font-weight:400}
.ms-drop-footer{padding:6px 10px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;background:var(--surface-2)}
.ms-drop-footer .ms-selected-count{font-size:10.5px;color:var(--text-3)}
.ms-clear{font-size:11px;color:var(--red);cursor:pointer;font-weight:500;padding:2px 8px;border-radius:3px;transition:var(--transition)}
.ms-clear:hover{background:var(--red-light)}

/* ── Combo select ── */
.combo-select{position:relative}
.combo-new{font-size:13px!important}

/* ── Bulk-select & bulk actions ── */
.op-row-check{accent-color:var(--accent);width:16px;height:16px;cursor:pointer;margin:0}
.bulk-menu{padding:4px}
.bulk-menu-header{padding:6px 10px 4px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-3);border-bottom:1px solid var(--border-light);margin-bottom:4px}
.bulk-menu-item{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:4px;font-size:12px;color:var(--text);cursor:pointer;text-decoration:none;border:none;background:none;width:100%;text-align:left;font-family:var(--font);transition:var(--transition)}
.bulk-menu-item:hover{background:var(--accent-dim);color:var(--accent)}
.bulk-menu-item.disabled{color:var(--text-3);cursor:not-allowed;opacity:.55}
.bulk-menu-item.disabled:hover{background:none;color:var(--text-3)}
.bulk-menu-item svg{width:14px;height:14px;flex-shrink:0}
.bulk-menu-sep{height:1px;background:var(--border-light);margin:4px 0}

/* ── Upload zone ── */
.upload-zone{border:2px dashed var(--border);border-radius:var(--radius-lg);padding:32px 24px;text-align:center;cursor:pointer;transition:var(--transition);background:var(--white)}
.upload-zone:hover{border-color:var(--accent);background:var(--accent-dim)}
.upload-zone.dragover{border-color:var(--accent);background:var(--accent-dim)}
.upload-zone-icon{font-size:32px;margin-bottom:8px;opacity:.5}
.upload-zone-text{font-size:13px;color:var(--text-2)}
.upload-zone-hint{font-size:11.5px;color:var(--text-3);margin-top:4px}
.upload-preview{margin-top:16px}

/* ── Period tabs ── */
.period-tabs{display:flex;gap:0;background:var(--surface-2);border-radius:var(--radius-sm);border:1px solid var(--border);overflow:hidden}
.period-tab{padding:7px 16px;font-size:12.5px;font-weight:500;color:var(--text-3);cursor:pointer;transition:var(--transition);border-right:1px solid var(--border);user-select:none}
.period-tab:last-child{border-right:none}
.period-tab:hover{color:var(--text-2);background:var(--white)}
.period-tab.active{color:var(--white);background:var(--accent);font-weight:600}
.date-range{display:flex;align-items:center;gap:6px}
.date-range input[type="date"]{padding:6px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);font-family:var(--font);font-size:12px;color:var(--text);background:var(--white);outline:none}

/* ── Entregas summary ── */
.entregas-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0}
.entregas-summary-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:14px 18px;box-shadow:var(--shadow-sm);text-align:center}
.entregas-summary-val{font-size:24px;font-weight:700;line-height:1}
.entregas-summary-label{font-size:11px;color:var(--text-3);margin-top:4px;text-transform:uppercase;letter-spacing:.5px}
.entregas-summary-val.red{color:var(--red)}
.entregas-summary-val.amber{color:var(--amber)}
.entregas-summary-val.green{color:var(--green)}

/* ── Donut chart ── */
.donut-wrap{display:flex;align-items:center;gap:24px}
.donut-svg{width:140px;height:140px;flex-shrink:0}
.donut-legend{display:flex;flex-direction:column;gap:6px}
.donut-legend-item{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-2);cursor:pointer;padding:4px 8px;border-radius:var(--radius-sm);transition:var(--transition)}
.donut-legend-item:hover{background:var(--surface-2)}
.donut-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.donut-legend-val{font-weight:600;color:var(--text);margin-left:auto}

/* ── Monthly bar chart (vertical columns) ── */
.month-bars{display:flex;align-items:flex-end;gap:6px;height:160px;padding-top:10px}
.month-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px}
.month-bar{width:100%;border-radius:4px 4px 0 0;transition:height 400ms ease;cursor:pointer;position:relative}
.month-bar:hover{opacity:.8}
.month-bar-val{font-size:10px;font-weight:600;color:var(--text);text-align:center;position:absolute;top:-16px;width:100%}
.month-label{font-size:10px;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px}

/* ── Drill-down panel ── */
.drill-panel{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:0;box-shadow:var(--shadow);margin-bottom:24px;overflow:hidden;animation:modalIn 200ms ease}
.drill-head{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:var(--surface-2);border-bottom:1px solid var(--border)}
.drill-head h4{font-size:14px;font-weight:600}
.drill-close{background:none;border:none;color:var(--text-3);font-size:18px;cursor:pointer;padding:2px 6px;border-radius:4px;transition:var(--transition)}
.drill-close:hover{background:var(--surface-3);color:var(--text)}
.bar-row{cursor:pointer}
.bar-row:hover .bar-label{color:var(--accent)}

/* ── Calendar OP popup ── */
.cal-op-popup{position:fixed;z-index:600;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px 20px;box-shadow:var(--shadow-lg);min-width:280px;max-width:360px;animation:modalIn 150ms ease}
.cal-op-popup .cal-popup-close{position:absolute;top:8px;right:12px;background:none;border:none;font-size:16px;cursor:pointer;color:var(--text-3)}
.cal-op-popup .cal-popup-close:hover{color:var(--text)}

/* ── Loading state ── */
.loading-state{display:flex;align-items:center;justify-content:center;padding:60px;color:var(--text-3);font-size:14px;gap:10px}
.spinner{width:18px;height:18px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Responsive ── */
@media(max-width:1024px){
  .kpi-grid{grid-template-columns:repeat(2,1fr)!important}
  .charts-grid{grid-template-columns:1fr}
  .expand-grid{grid-template-columns:repeat(2,1fr)}
  div[id="prov-kpis"]{grid-template-columns:repeat(3,1fr)!important}
}

@media(max-width:768px){
  .main{padding:16px 12px}
  .topbar{padding:0 14px;height:52px}
  .topbar-right{gap:8px}
  .nav{padding:0 8px}
  .nav-item{padding:11px 12px;font-size:12.5px}
  .brand-sep,.brand-module{display:none}
  .brand-logo{height:28px}
  .user-name{display:none}
  .user-pill{padding:4px}
  .role-tag{padding:2px 8px;font-size:9.5px}
  .btn-logout{padding:5px 10px}

  .sec-header{flex-direction:column;gap:12px;align-items:stretch}
  .sec-header > div{width:100%;justify-content:flex-start;flex-wrap:wrap}
  .sec-header .btn{flex:0 0 auto;max-width:100%}
  .sec-title{font-size:16px}

  .kpi-grid{grid-template-columns:repeat(2,1fr)!important;gap:10px}
  .kpi-card{padding:14px}
  .kpi-value{font-size:22px}
  .kpi-label{font-size:11px}

  .charts-grid{gap:12px}
  .chart-card{padding:14px}
  .bar-label{width:90px;font-size:11px}

  .ops-toolbar{gap:8px}
  .ops-search{width:100%;flex:1 1 100%}
  .ms-btn{padding:7px 11px;font-size:11.5px}
  .ms-filter{flex:0 0 auto}
  .ms-drop{min-width:240px!important;max-width:calc(100vw - 24px)!important}
  #msd-bulk-actions{min-width:240px!important}

  .expand-grid{grid-template-columns:1fr}
  .entregas-summary{grid-template-columns:1fr;gap:10px}

  .modal{max-width:96vw;max-height:92vh;width:auto!important}
  .modal-head{padding:14px 18px}
  .modal-body{padding:18px}
  .modal-foot{padding:12px 18px}
  /* Collapse 2-col modal grids to single column on mobile */
  .modal-body div[style*="grid-template-columns:1fr 1fr"],
  .modal-body div[style*="grid-template-columns: 1fr 1fr"]{grid-template-columns:1fr!important}

  /* Prevent iOS auto-zoom on input focus by ensuring 16px font */
  .fi,.fs,input.ms-drop-search{font-size:16px}
  .fg{margin-bottom:14px}

  .donut-wrap{flex-direction:column;align-items:center;gap:14px}
  .donut-svg{width:120px;height:120px}
  .month-bars{height:120px;gap:4px}
  .month-label{font-size:9px}
  .period-tabs{flex-wrap:wrap}
  .period-tab{padding:7px 12px;font-size:11.5px}
  .date-range{flex-wrap:wrap}

  /* Make the row checkbox a slightly bigger tap target */
  .op-row-check{width:18px;height:18px}

  /* Dashboard prov KPIs */
  div[id="prov-kpis"]{grid-template-columns:repeat(2,1fr)!important}

  /* ─────────────────────────────────────────────────────────────
     Mobile tables: keep ALL columns visible.
     The table-wrap scrolls horizontally so the user can swipe to
     reach every column — nothing is hidden.
     ───────────────────────────────────────────────────────────── */
  .table-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    border-radius:var(--radius);
  }
  /* Force the table to its natural width so each column keeps its
     content readable instead of being squished into the viewport. */
  #ops-table, #prov-table, #users-table{
    width:auto;
    min-width:100%;
  }
  #ops-table th, #ops-table td,
  #prov-table th, #prov-table td,
  #users-table th, #users-table td{
    padding:10px 12px;
    font-size:12px;
    white-space:nowrap;
  }
  /* Allow long free-text fields to wrap so they don't blow out the row. */
  #ops-table td[data-label="Cliente"],
  #ops-table td[data-label="Referencia"]{
    white-space:normal!important;
    min-width:140px;
    max-width:200px!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
  /* Keep the action cluster compact and on a single horizontal line. */
  #ops-table .actions,
  #prov-table .actions,
  #users-table .actions{
    flex-wrap:nowrap;
  }
  #ops-table .btn-edit-op,
  #prov-table .btn-edit-op,
  #users-table .btn-edit-op{ font-size:11px; padding:4px 10px }
  #ops-table .actions .btn-danger,
  #prov-table .actions .btn-danger,
  #users-table .actions .btn-danger{ font-size:11px; padding:4px 10px }

  /* Expand row keeps its details readable on a narrow screen. */
  #ops-table .expand-grid{ grid-template-columns:1fr 1fr; gap:10px }
}

@media(max-width:480px){
  .main{padding:12px 10px}
  .topbar{padding:0 10px}
  .role-tag{display:none}
  .nav-item{padding:10px 10px;font-size:12px}
  .kpi-grid{grid-template-columns:1fr!important}
  .sec-title{font-size:15px}
  .modal{max-width:100vw;max-height:100vh;border-radius:0}
  .modal-head{padding:12px 14px}
  .modal-body{padding:14px}
  .modal-foot{padding:10px 14px}
  .ms-drop{min-width:200px;max-width:calc(100vw - 16px)}
  /* Sec header buttons */
  .sec-header .btn{font-size:12px;padding:7px 12px}
  .btn-sm{padding:5px 10px;font-size:11px}
  div[id="prov-kpis"]{grid-template-columns:1fr 1fr!important}

  /* Tables: tighten cells a bit but still keep every column visible
     via horizontal scroll. */
  #ops-table th, #ops-table td,
  #prov-table th, #prov-table td,
  #users-table th, #users-table td{
    padding:8px 10px;
    font-size:11.5px;
  }
}