/* ===== Dashboard Otero & Villanueva — sistema de estilos ===== */
:root{
  --accent:#0E7C86; --accent-2:#2D6BB0; --accent-strong:#0A5E66; --accent-soft:#DCEDEE;
  --ground:#F4F7F7; --surface:#FFFFFF; --surface-2:#EEF3F3;
  --border:#E0E8E8; --border-strong:#CBD8D8;
  --ink:#15211F; --muted:#5C6E6D; --faint:#8A9A99;
  --verde:#1F9D57; --ambar:#C0860A; --rojo:#C0392B; --info:#2D6BB0;
  --verde-bg:#E4F3EA; --ambar-bg:#F7ECD6; --rojo-bg:#F6E3E0; --info-bg:#E2ECF6;
  --shadow:0 1px 2px rgba(20,32,31,.04), 0 10px 26px -14px rgba(20,32,31,.14);
  --sidebar:#0E2A2C; --sidebar-ink:#CFE3E3; --sidebar-active:#0E7C86;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --accent:#2CA7B1; --accent-2:#6AA0DE; --accent-strong:#4FC0C9; --accent-soft:#123033;
  --ground:#0C1312; --surface:#131D1C; --surface-2:#182322;
  --border:#243130; --border-strong:#334140;
  --ink:#E9F0EF; --muted:#9AABAA; --faint:#6C7D7C;
  --verde:#4BC584; --ambar:#E0A73A; --rojo:#E7776A; --info:#6AA0DE;
  --verde-bg:#123024; --ambar-bg:#2E2413; --rojo-bg:#2E1815; --info-bg:#132234;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 30px -16px rgba(0,0,0,.6);
  --sidebar:#0A1615; --sidebar-ink:#AEC4C3; --sidebar-active:#2CA7B1;
}}
:root[data-theme="dark"]{
  --accent:#2CA7B1; --accent-2:#6AA0DE; --accent-strong:#4FC0C9; --accent-soft:#123033;
  --ground:#0C1312; --surface:#131D1C; --surface-2:#182322;
  --border:#243130; --border-strong:#334140;
  --ink:#E9F0EF; --muted:#9AABAA; --faint:#6C7D7C;
  --verde:#4BC584; --ambar:#E0A73A; --rojo:#E7776A; --info:#6AA0DE;
  --verde-bg:#123024; --ambar-bg:#2E2413; --rojo-bg:#2E1815; --info-bg:#132234;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 30px -16px rgba(0,0,0,.6);
  --sidebar:#0A1615; --sidebar-ink:#AEC4C3; --sidebar-active:#2CA7B1;
}

*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:"Bricolage Grotesque","IBM Plex Sans",sans-serif;margin:0;letter-spacing:-.01em}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
.num{font-variant-numeric:tabular-nums}

/* Layout */
.app{display:grid;grid-template-columns:216px 1fr;min-height:100vh}
.sidebar{background:var(--sidebar);color:var(--sidebar-ink);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:10px;padding:18px 18px 14px;font-family:"Bricolage Grotesque",sans-serif;font-weight:700;color:#fff;font-size:1.05rem}
.brand .mk{width:30px;height:30px;border-radius:8px;background:var(--accent);display:grid;place-items:center;font-size:16px}
.brand small{display:block;font-size:.66rem;font-weight:400;color:var(--sidebar-ink);letter-spacing:.04em;opacity:.8;font-family:"IBM Plex Mono",monospace}
nav.menu{display:flex;flex-direction:column;padding:8px;gap:2px;overflow-y:auto;flex:1}
nav.menu a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px;border-radius:9px;color:var(--sidebar-ink);font-size:.9rem;font-weight:500}
nav.menu a:hover{background:rgba(255,255,255,.06);color:#fff}
nav.menu a.on{background:var(--sidebar-active);color:#fff}
nav.menu a .soon{font-size:.6rem;font-family:"IBM Plex Mono",monospace;padding:1px 6px;border-radius:20px;background:rgba(255,255,255,.1);color:var(--sidebar-ink);letter-spacing:.03em}
.sb-foot{padding:12px;border-top:1px solid rgba(255,255,255,.08);font-size:.8rem}
.sb-foot a{color:var(--sidebar-ink)}
.sb-foot a:hover{color:#fff}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:14px;padding:12px 26px;background:color-mix(in srgb,var(--ground) 86%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.topbar h1{font-size:1.15rem;font-weight:700}
.spacer{flex:1}
.selector{display:flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border-strong);border-radius:10px;padding:4px}
.selector a{padding:5px 12px;border-radius:7px;font-size:.85rem;color:var(--muted);font-weight:500}
.selector a.on{background:var(--accent);color:#fff}
.anio-sel{appearance:none;border:1px solid var(--border-strong);background:var(--surface);color:var(--ink);border-radius:9px;padding:7px 28px 7px 12px;font-size:.85rem;font-weight:600;cursor:pointer;font-family:inherit;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237a8a89' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
.anio-sel:hover{border-color:var(--accent)}
.filtros-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:12px 0 4px}
.filtros-bar label{font-size:.72rem;color:var(--faint);font-family:"IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.05em;margin-right:2px}
.filtros-bar select{appearance:none;border:1px solid var(--border-strong);background:var(--surface);color:var(--ink);border-radius:9px;padding:7px 26px 7px 11px;font-size:.84rem;cursor:pointer;font-family:inherit;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237a8a89' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center}
.filtros-bar select:hover{border-color:var(--accent)}
.filtros-bar .limpiar{font-size:.8rem;color:var(--accent);padding:6px 4px}
/* Filtro por rango de fechas + atajos */
.rango-fechas{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;margin:14px 0 16px;
  background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow)}
.rf-campo{display:flex;flex-direction:column;gap:4px}
.rf-campo label{font-size:.7rem;color:var(--faint);font-family:"IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.06em}
.rf-campo input[type=date]{border:1px solid var(--border-strong);background:var(--surface);color:var(--ink);
  border-radius:9px;padding:8px 11px;font-size:.9rem;font-family:inherit;cursor:pointer;min-width:150px}
.rf-campo input[type=date]:hover{border-color:var(--accent)}
.rf-campo input[type=date]:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.rf-presets{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto;align-self:center}
.rf-presets .preset{font-size:.8rem;padding:6px 12px;border-radius:20px;border:1px solid var(--border-strong);
  color:var(--muted);font-weight:500;background:var(--surface)}
.rf-presets .preset:hover{border-color:var(--accent);color:var(--accent)}
.rf-presets .preset.on{background:var(--accent);border-color:var(--accent);color:#fff}
/* KPIs compactos de presupuestos */
.km-bloque .km-tit{font-size:.72rem;color:var(--faint);font-family:"IBM Plex Mono",monospace;
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:7px}
.kpi-mini-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:640px){.kpi-mini-grid{grid-template-columns:repeat(2,1fr)}}
.km{background:var(--surface);border:1px solid var(--border);border-radius:13px;padding:13px 15px;
  box-shadow:var(--shadow);border-left:4px solid var(--border-strong)}
.km-l{font-size:.76rem;color:var(--muted);font-weight:500}
.km-v{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.4rem;letter-spacing:-.02em;
  margin-top:5px;line-height:1.1;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.km-pct{font-size:.82rem;font-weight:600;color:var(--muted);font-family:"IBM Plex Mono",monospace}
.km-total{border-left-color:var(--accent)}
.km-ok{border-left-color:var(--verde)} .km-ok .km-pct{color:var(--verde)}
.km-pend{border-left-color:var(--ambar)} .km-pend .km-pct{color:var(--ambar)}
.km-no{border-left-color:var(--rojo)} .km-no .km-pct{color:var(--rojo)}
.usermenu{display:flex;align-items:center;gap:10px;font-size:.85rem;color:var(--muted)}
.chip-rol{font-size:.68rem;font-family:"IBM Plex Mono",monospace;padding:2px 8px;border-radius:20px;background:var(--surface-2);border:1px solid var(--border);color:var(--muted)}
.btn{appearance:none;border:1px solid var(--border-strong);background:var(--surface);color:var(--ink);border-radius:9px;padding:7px 13px;font-size:.83rem;font-weight:600;cursor:pointer;display:inline-flex;gap:7px;align-items:center}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-strong);color:#fff}
.icon-btn{width:34px;height:34px;justify-content:center;padding:0}

.content{padding:22px 26px 48px;width:100%}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:500}
.section-title{font-size:1.2rem;font-weight:700;margin:26px 0 14px}
.muted{color:var(--muted)}

/* KPI tiles */
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(224px,1fr));gap:14px}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 18px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--faint)}
.kpi.sf-verde::before{background:var(--verde)} .kpi.sf-ambar::before{background:var(--ambar)}
.kpi.sf-rojo::before{background:var(--rojo)} .kpi.sf-neutro::before{background:var(--accent)}
.kpi .lab{font-size:.78rem;color:var(--muted);font-weight:500;display:flex;align-items:center;gap:6px}
.kpi .val{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.7rem;letter-spacing:-.02em;margin-top:6px;line-height:1.1}
.kpi .sub{font-size:.8rem;color:var(--muted);margin-top:5px;display:flex;gap:10px;flex-wrap:wrap}
.kpi .val .unidad{font-size:.9rem;font-weight:600;color:var(--muted);margin-left:2px;letter-spacing:0}
.kpi .val-rango{font-size:1.32rem;white-space:nowrap}
.delta{font-weight:600;font-family:"IBM Plex Mono",monospace;font-size:.78rem}
.delta.up{color:var(--verde)} .delta.down{color:var(--rojo)}
.sf-pill{font-size:.66rem;font-weight:600;padding:2px 8px;border-radius:20px;font-family:"IBM Plex Mono",monospace;white-space:nowrap}
.sf-verde .sf-pill{background:var(--verde-bg);color:var(--verde)}
.sf-ambar .sf-pill{background:var(--ambar-bg);color:var(--ambar)}
.sf-rojo .sf-pill{background:var(--rojo-bg);color:var(--rojo)}

/* Cards & grid */
.grid{display:grid;gap:16px}
.g2{grid-template-columns:1fr 1fr}
@media(max-width:900px){.g2{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px 20px;box-shadow:var(--shadow)}
.card h3{font-size:1rem;font-weight:600;margin-bottom:2px}
.card .card-sub{font-size:.8rem;color:var(--muted);margin-bottom:12px}

/* Charts */
.svg-chart{width:100%;height:auto;overflow:visible}
.axis-zero{stroke:var(--border-strong);stroke-width:1}
.grid-line{stroke:var(--border);stroke-width:1;stroke-dasharray:2 3}
.grid-label{fill:var(--faint);font-size:10px;text-anchor:end;font-family:"IBM Plex Mono",monospace}
.bar{fill:var(--accent)} .bar-alt{fill:var(--accent-2)} .bar-hi{fill:var(--accent-strong)}
.bar-oro{fill:var(--ambar)}
.bar-label.pico{fill:var(--accent);font-weight:700} .bar-label.valle{fill:var(--rojo);font-weight:700}
.leyenda-chart{display:flex;gap:18px;font-size:.82rem;color:var(--muted);margin:2px 0 10px}
.leyenda-chart span{display:inline-flex;align-items:center;gap:6px}
.leyenda-chart .sw{width:12px;height:12px;border-radius:3px;display:inline-block}
.sw-dem{background:var(--accent)} .sw-pro{background:var(--ambar)}
.cuadro-insight{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--ambar);
  border-radius:12px;padding:14px 18px;margin:16px 0;box-shadow:var(--shadow);font-size:.92rem;line-height:1.55}
.cuadro-insight b{color:var(--ink)}
.tabla-horas tbody tr.pico td{background:var(--accent-soft)}
.tabla-horas tbody tr.valle td{background:var(--rojo-bg)}
.tabla-horas tbody tr.cerrado td{color:var(--faint)}
.bdg{font-size:.62rem;padding:2px 7px;border-radius:20px;font-weight:700;letter-spacing:.03em;vertical-align:middle;margin-left:4px}
.bdg.pico{background:var(--accent);color:#fff} .bdg.valle{background:var(--rojo);color:#fff}
.bar-label{fill:var(--faint);font-size:11px;text-anchor:middle;font-family:"IBM Plex Mono",monospace}
.line{fill:none;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.line-accent{stroke:var(--accent)} .dot.line-accent{fill:var(--accent);stroke:none}
.dot{fill:var(--accent)}
.chart-empty{color:var(--faint);font-size:.85rem;padding:30px;text-align:center}
.svg-donut .arc{fill:none;stroke-linecap:butt}
.arc.c0{stroke:var(--accent)} .arc.c1{stroke:var(--accent-2)} .arc.c2{stroke:var(--verde)}
.arc.c3{stroke:var(--ambar)} .arc.c4{stroke:var(--faint)}
.donut-wrap{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.donut-leg{list-style:none;margin:0;padding:0;font-size:.85rem;display:flex;flex-direction:column;gap:6px}
.donut-leg li{display:flex;align-items:center;gap:8px;color:var(--muted)}
.dot-leg{width:10px;height:10px;border-radius:3px;display:inline-block}
.dot-leg.c0{background:var(--accent)} .dot-leg.c1{background:var(--accent-2)}
.dot-leg.c2{background:var(--verde)} .dot-leg.c3{background:var(--ambar)} .dot-leg.c4{background:var(--faint)}

/* Tables */
.tablewrap{overflow-x:auto;border:1px solid var(--border);border-radius:14px;background:var(--surface);box-shadow:var(--shadow)}
table{border-collapse:collapse;width:100%;font-size:.87rem;min-width:560px}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--border);white-space:nowrap}
thead th{font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);font-weight:500;position:sticky;top:0;background:var(--surface)}
tbody tr:hover{background:var(--surface-2)}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
tfoot td{font-weight:700;background:var(--surface-2);border-top:2px solid var(--border-strong)}
/* Primera columna fija (se queda visible al desplazar horizontalmente) */
table.col-fija td:first-child, table.col-fija th:first-child{position:sticky;left:0;z-index:2;background:var(--surface);box-shadow:1px 0 0 var(--border)}
table.col-fija thead th:first-child{z-index:3}
table.col-fija tbody tr:hover td:first-child{background:var(--surface-2)}
/* Tablas anchas y compactas (seguimiento de presupuestos) */
table.compacta{font-size:.82rem;min-width:920px}
table.compacta th, table.compacta td{padding:7px 11px}
table.compacta th.sep, table.compacta td.sep{border-left:1px solid var(--border-strong)}
table.compacta tbody tr.fila-vacia td{color:var(--faint)}
table.compacta tbody td:first-child{font-weight:600}

/* Parrilla / estados */
.pill{font-size:.74rem;font-weight:600;padding:3px 9px;border-radius:20px;display:inline-block;white-space:nowrap}
.pill.pendiente{background:var(--ambar-bg);color:var(--ambar)}
.pill.aceptado-cita{background:var(--verde-bg);color:var(--verde)}
.pill.aceptado-sincita{background:var(--info-bg);color:var(--info)}
.pill.rechazado{background:var(--rojo-bg);color:var(--rojo)}
.pill.modificado{background:var(--surface-2);color:var(--faint)}
.chips-filtro{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.chips-filtro a{font-size:.8rem;padding:6px 12px;border-radius:20px;border:1px solid var(--border-strong);color:var(--muted);background:var(--surface)}
.chips-filtro a.on{background:var(--accent);color:#fff;border-color:var(--accent)}

/* Insights */
.insight{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--border)}
.insight .sev{font-size:1.1rem;flex:none}
.insight h4{font-size:.95rem;margin-bottom:3px}
.insight p{margin:0;font-size:.87rem;color:var(--muted)}
.insight .acc{color:var(--ink);font-size:.87rem;margin-top:5px}
.tag-mod{font-size:.65rem;font-family:"IBM Plex Mono",monospace;color:var(--accent);text-transform:uppercase;letter-spacing:.06em}

/* Login */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px;
  background:radial-gradient(1200px 500px at 50% -10%, var(--accent-soft), var(--ground))}
.login-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:34px;width:100%;max-width:380px;box-shadow:var(--shadow)}
.login-card .mk{width:46px;height:46px;border-radius:12px;background:var(--accent);display:grid;place-items:center;font-size:24px;margin-bottom:16px}
.login-card h1{font-size:1.3rem;margin-bottom:4px}
.login-card p.sub{color:var(--muted);font-size:.88rem;margin:0 0 20px}
.field{margin-bottom:14px}
.field label{display:block;font-size:.78rem;color:var(--muted);margin-bottom:5px;font-weight:500}
.field input{width:100%;padding:10px 12px;border:1px solid var(--border-strong);border-radius:10px;background:var(--ground);color:var(--ink);font-size:.95rem}
.field input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.err{background:var(--rojo-bg);color:var(--rojo);padding:9px 12px;border-radius:9px;font-size:.83rem;margin-bottom:14px}
.login-note{font-size:.75rem;color:var(--faint);margin-top:16px;line-height:1.5}
.empty-state{text-align:center;padding:60px 20px;color:var(--muted)}

/* Modal Actualizar */
.modal-back{display:none;position:fixed;inset:0;background:rgba(10,20,19,.5);z-index:50;align-items:center;justify-content:center;padding:20px}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);width:100%;max-width:620px;padding:22px}
.modal-head{display:flex;align-items:center;justify-content:space-between;font-size:1.05rem;font-family:"Bricolage Grotesque",sans-serif}
.upd-estado{font-size:.9rem;font-weight:600;padding:8px 12px;border-radius:9px;background:var(--surface-2);color:var(--muted)}
.upd-estado.corriendo{background:var(--ambar-bg);color:var(--ambar)}
.upd-estado.ok{background:var(--verde-bg);color:var(--verde)}
.upd-estado.error{background:var(--rojo-bg);color:var(--rojo)}
.upd-log{margin-top:10px;background:var(--sidebar);color:var(--sidebar-ink);border-radius:10px;padding:12px;font-family:"IBM Plex Mono",monospace;font-size:.76rem;line-height:1.5;max-height:280px;overflow:auto;white-space:pre-wrap;word-break:break-word}

/* ===== Impresión / PDF ===== */
@media print{
  :root{--ground:#fff;--surface:#fff;--surface-2:#f4f6f6;--ink:#111;--muted:#444;--faint:#666;--border:#d8dede;--border-strong:#c2caca;--shadow:none}
  .sidebar, .topbar, .no-print, .filtros-bar, .chips-filtro, .btn{display:none !important}
  .app{display:block}
  .main{display:block}
  .content{padding:0;max-width:100%}
  body{background:#fff;font-size:12px}
  .card, .kpi, .tablewrap{box-shadow:none;border:1px solid #d0d7d7;break-inside:avoid;page-break-inside:avoid}
  .kpis{gap:8px}
  h2.section-title{break-after:avoid;page-break-after:avoid}
  table{font-size:11px}
  .content::before{content:"Otero & Villanueva Dental — Informe del panel";display:block;font-weight:700;font-size:16px;margin-bottom:10px;font-family:"Bricolage Grotesque",sans-serif}
  a[href]::after{content:""}
  @page{margin:14mm}
}

/* ===== Barras de scroll con el color de la barra de módulos ===== */
*{scrollbar-width:thin;scrollbar-color:var(--sidebar) transparent}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--sidebar);border-radius:8px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--sidebar-active)}
::-webkit-scrollbar-corner{background:transparent}

/* Todas las tablas dentro de su marco ocupan el ancho completo */
.tablewrap table{width:100%}