/* Estilo Reportes Diswine — mismo look que DaVinci Web (paleta + ribbon + grilla Excel) */
:root{
  --bg:#F5F5F5; --sheet:#FFFFFF; --grid:#D0D0D0; --grid-strong:#A0A0A0;
  --gutter-bg:#E7E7E7; --gutter-ink:#616161; --header-bg:#F0F0F0; --header-ink:#333333;
  --ink:#1A1A1A; --ink-2:#444444; --ink-3:#6E6E6E;
  --accent:#6D223C; --accent-2:#551A2E; --accent-tint:#F4E5EB; --accent-tint-2:#E9CEDA;
  --cc-tint:#DEEBF7; --cc-ink:#2B579A; --sc-tint:#FFF2CC; --sc-ink:#8B6914;
  --burg:#E53251; --burg-tint:#FBE0E6; --burg-strong:#F0A6B4;
  --info:#2B579A; --info-tint:#E5EEF8; --warn:#B58900; --warn-tint:#FFF3D6;
  --ok:#1E7A46; --ok-tint:#E3F3E9; --bad:#B4232F; --bad-tint:#FBE4E6; --bad2:#7A1620; --bad2-tint:#F3D6D9;
  --sans:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"Consolas","SF Mono",Menlo,"Liberation Mono",monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:12px;display:flex;flex-direction:column;min-height:100%}

/* Ribbon (idéntico a DaVinci) */
.ribbon{background:var(--sheet);border:1px solid var(--grid);border-bottom:2px solid var(--accent);padding:8px 14px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;flex:0 0 auto}
.ribbon .brand-wrap{display:flex;align-items:center;gap:12px}
.ribbon .brand-logo{height:38px;width:auto;display:block;flex:0 0 auto}
.title{font-size:13px;font-weight:600}
.title .doc-name{color:var(--accent)}
.breadcrumb{font-size:11px;color:var(--ink-3);font-family:var(--mono)}
.ribbon-right{display:flex;align-items:center;gap:10px}
.navlink{font-size:11px;color:var(--accent);text-decoration:none;font-weight:600}
.navlink:hover{text-decoration:underline}
.user-pill{display:flex;align-items:center;gap:8px;padding:3px 8px;border-radius:2px;background:var(--header-bg);border:1px solid var(--grid);font-size:11px;color:var(--ink-2);cursor:pointer}
.user-pill .avatar{width:20px;height:20px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:10px;font-weight:700}
.badge-admin{background:var(--sc-tint);color:var(--sc-ink);font-size:9px;font-weight:700;padding:1px 6px;border-radius:2px;letter-spacing:.05em}

/* Barra de filtros (estilo DaVinci) */
.filtros-bar{background:var(--sheet);border:1px solid var(--grid);border-top:0;padding:8px 14px;display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;flex:0 0 auto}
.fld{display:flex;flex-direction:column;gap:3px}
.fld label{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);font-weight:600}
.fld input,.fld select{padding:5px 8px;border:1px solid var(--grid);background:var(--sheet);font-family:var(--sans);font-size:12px;color:var(--ink);outline:none;height:30px;border-radius:2px}
.fld input:focus,.fld select:focus{border-color:var(--accent)}
.btn{padding:0 14px;height:30px;font-size:12px;border:1px solid var(--grid-strong);background:var(--sheet);cursor:pointer;border-radius:3px;font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:5px}
.btn:hover{background:var(--header-bg)}
.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent-2)}
.btn.primary:hover{background:var(--accent-2)}
.btn.danger{background:var(--sheet);color:var(--burg);border-color:var(--burg-strong)}
.btn.danger:hover{background:var(--burg-tint)}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* KPIs */
.kpis{display:flex;gap:8px;flex-wrap:wrap;padding:10px 14px 0;flex:0 0 auto}
.kpi{background:var(--sheet);border:1px solid var(--grid);border-left:3px solid var(--accent);border-radius:3px;padding:7px 13px;min-width:140px}
.kpi .lbl{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);font-weight:600}
.kpi .val{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:2px}

/* Grilla estilo Excel */
.sheet-wrap{background:var(--sheet);border:1px solid var(--grid);margin:10px 14px;overflow:auto;flex:1 1 auto;min-height:160px}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:11.5px;white-space:nowrap}
thead th{background:var(--header-bg);color:var(--header-ink);font-weight:600;font-size:10.5px;text-align:left;padding:6px 9px;border-right:1px solid var(--grid);border-bottom:1px solid var(--grid-strong);position:sticky;top:0;z-index:3;cursor:pointer;user-select:none;text-transform:uppercase;letter-spacing:.02em}
thead th.num{text-align:right}
thead th:hover{background:var(--grid);color:var(--accent-2)}
thead th.asc::after{content:" ↑";color:var(--accent)}
thead th.desc::after{content:" ↓";color:var(--accent)}
tbody td{padding:5px 9px;border-right:1px solid var(--grid);border-bottom:1px solid var(--grid);vertical-align:middle}
tbody td.num{text-align:right}
tbody td.cli{max-width:340px;overflow:hidden;text-overflow:ellipsis}
tbody td .cod{color:var(--ink-3);font-family:var(--mono);font-size:10px}
tbody tr:hover{background:var(--accent-tint)}
.neg{color:var(--burg)}
.lnk{cursor:pointer;border-bottom:1px dotted var(--cc-ink);color:var(--cc-ink)}
.lnk:hover{background:var(--cc-tint)}
.trend{font-size:10px;font-weight:700;display:inline-block;margin-top:1px}
.trend.up{color:var(--ok)} .trend.down{color:var(--burg)} .trend.flat{color:var(--ink-3);font-weight:400}
.msg{padding:40px;text-align:center;color:var(--ink-3);font-size:13px}
.badge{font-size:9px;font-weight:700;padding:2px 7px;border-radius:3px;white-space:nowrap}
.b-ok{background:var(--ok-tint);color:var(--ok)}
.b-dias{background:var(--warn-tint);color:var(--warn)}
.b-limite{background:var(--burg-tint);color:var(--burg)}
.b-ambas{background:var(--bad2-tint);color:var(--bad2)}

/* Footer JoyLabs */
.footer-credit{background:var(--sheet);border:1px solid var(--grid);border-top:0;padding:6px 14px;display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:0 0 auto}
.footer-credit span{font-size:10.5px;color:var(--ink-3)}
.footer-credit img{height:18px;width:auto;display:block;opacity:.9}

/* Modal (ABM usuarios) */
.modal-ov{position:fixed;inset:0;background:rgba(42,31,20,.5);display:none;align-items:center;justify-content:center;z-index:100;padding:20px}
.modal-ov.open{display:flex}
.modal{background:var(--sheet);border-radius:6px;box-shadow:0 20px 60px rgba(42,31,20,.35);width:100%;max-width:440px;overflow:hidden}
.modal h3{margin:0;background:var(--accent);color:#fff;padding:14px 18px;font-size:15px}
.modal .body{padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.modal .actions{padding:12px 18px;background:var(--header-bg);display:flex;justify-content:flex-end;gap:8px;border-top:1px solid var(--grid)}

.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:9px 18px;border-radius:5px;font-size:13px;z-index:200;opacity:0;transition:opacity .2s;pointer-events:none}
.toast.show{opacity:1}