/* =====================================================================
   IT2GO Portal · Big Sur theme (V3.0) — se carga al final y manda
   ===================================================================== */
:root{
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", sans-serif;
  --surface: rgba(255,255,255,.72);
  --surface-2: rgba(118,118,128,.08);
  --surface-3: rgba(118,118,128,.14);
  --border: rgba(255,255,255,.75);
  --border-soft: rgba(0,0,0,.05);
  --text: #1d1d1f; --text-dim: #86868b; --text-faint: #aeaeb2;
  --glass-blur: saturate(180%) blur(30px);
  --r-lg: 18px; --r-md: 12px; --r-sm: 8px;
  --sh-card: 0 1px 1px rgba(0,0,0,.03), 0 10px 30px rgba(15,40,80,.08);
  --sh-hover: 0 2px 4px rgba(0,0,0,.04), 0 18px 44px rgba(15,40,80,.14);
}
html, body, button, input, select, textarea { font-family: var(--font) !important; }
body{
  background:
    radial-gradient(1100px 700px at 8% 0%, rgba(20,184,166,.28), transparent 60%),
    radial-gradient(900px 650px at 95% 10%, rgba(59,130,246,.24), transparent 60%),
    radial-gradient(900px 700px at 70% 100%, rgba(168,85,247,.18), transparent 60%),
    radial-gradient(800px 600px at 0% 100%, rgba(251,146,60,.14), transparent 60%),
    #eef2f7 !important;
  background-attachment: fixed !important;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
.bg-animation, #meshCanvas { display: none !important; }
::-webkit-scrollbar{ width:8px; height:8px }
::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.18); border-radius:99px; border:2px solid transparent; background-clip: padding-box }
::-webkit-scrollbar-track{ background: transparent }

/* ---------- Sidebar flotante translúcido ---------- */
.sb{
  top:10px !important; left:10px !important; bottom:10px !important; min-height:0 !important;
  border-radius: 20px !important;
  background: rgba(1,38,64,.80) !important;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 20px 50px rgba(1,38,64,.30);
}
.main{ margin-left: calc(var(--sb-w) + 20px) !important; }
.main.exp{ margin-left: calc(var(--sb-w-col) + 20px) !important; }
.sb-logo{ border-bottom-color: rgba(255,255,255,.08) !important; }
.sb-sel{ background: rgba(255,255,255,.10) !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 8px !important; }
.sb-sec-lbl{ color: rgba(255,255,255,.38) !important; letter-spacing:.06em !important; font-size:10.5px !important; }
.ni{ border-radius: 9px !important; padding: 8px 10px !important; color: rgba(255,255,255,.72) !important; font-weight:500 !important; }
.ni:hover{ background: rgba(255,255,255,.08) !important; color:#fff !important; }
.ni.on{
  background: linear-gradient(180deg,#19b39a,#00836F) !important; color:#fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 4px 12px rgba(0,131,111,.35);
}
.ni.on .ni-ico{ color:#fff !important; opacity:1 !important; }
.ni-badge{ border-radius: 99px !important; }

/* ---------- Topbar tipo barra de ventana ---------- */
.topbar{
  margin: 10px 10px 0 !important; border-radius: 16px !important;
  background: rgba(255,255,255,.62) !important;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255,255,255,.7) !important;
  box-shadow: var(--sh-card);
}
.topbar-title{ font-size: 20px !important; font-weight: 700 !important; letter-spacing: -.02em !important; color: var(--text) !important; }
.sync-pill{ background: rgba(255,255,255,.7) !important; border: 1px solid rgba(0,0,0,.06) !important; }
.pc{ padding: 18px 10px 30px !important; }

/* ---------- Tarjetas de vidrio ---------- */
.card, .chart-card, .kpi, .bi-kpi{
  background: var(--surface) !important;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-card) !important;
}
.card{ overflow: hidden; }
.card-hd{ border-bottom: 1px solid rgba(0,0,0,.05) !important; padding: 16px 20px !important; }
.card-title{ font-size: 15px !important; font-weight: 650 !important; color: var(--text) !important; letter-spacing: -.01em; }
.chart-ttl, .kpi-lbl, .bi-kpi-label{
  text-transform: none !important; letter-spacing: 0 !important;
  font-size: 12.5px !important; font-weight: 600 !important; color: var(--text-dim) !important;
}
.kpi{ transition: transform .25s ease, box-shadow .25s ease !important; }
.kpi:hover{ transform: translateY(-2px); box-shadow: var(--sh-hover) !important; }
.kpi-val, .chart-val, .bi-kpi-val{
  font-size: 28px !important; font-weight: 700 !important; letter-spacing: -.03em !important;
  font-variant-numeric: tabular-nums;
}
.kpi-val{ color: var(--text) }
.kpi.green .kpi-val{ color:#00836F !important } .kpi.red .kpi-val{ color:#e0352b !important }
.kpi.amber .kpi-val{ color:#d97706 !important } .kpi.purple .kpi-val{ color:#7c3aed !important }

/* Hero */
.hero{
  border-radius: 22px !important;
  background:
    radial-gradient(600px 300px at 90% -20%, rgba(94,234,212,.45), transparent 60%),
    radial-gradient(500px 300px at 10% 120%, rgba(96,165,250,.40), transparent 60%),
    linear-gradient(135deg,#00836F 0%,#0b5d7a 50%,#012640 100%) !important;
  box-shadow: 0 20px 50px rgba(0,80,90,.25) !important;
}
.hero-title{ font-size: 30px !important; letter-spacing: -.03em !important; }

/* ---------- Tablas ---------- */
table.t thead th{
  text-transform: none !important; letter-spacing: 0 !important;
  font-size: 12px !important; font-weight: 600 !important; color: var(--text-dim) !important;
  background: rgba(248,248,250,.85) !important;
  backdrop-filter: blur(12px); border-bottom: 1px solid rgba(0,0,0,.06) !important;
}
table.t tbody td{ border-bottom: 1px solid rgba(0,0,0,.045) !important; }
table.t tbody tr:hover td{ background: rgba(0,122,255,.045) !important; }
.amt, .amt-sm, .mono, .folio{ font-family: "SF Mono", ui-monospace, Menlo, monospace !important; font-variant-numeric: tabular-nums; }

/* Badges tipo macOS */
.badge{ border-radius: 6px !important; padding: 3px 8px !important; font-weight: 600 !important; letter-spacing: 0 !important; }

/* Controles segmentados */
.ppto-tabs, .meta-tabs{ background: rgba(118,118,128,.12) !important; border-radius: 9px !important; padding: 2px !important; }
.pt, .meta-tab{ border-radius: 7px !important; font-weight: 600 !important; color: var(--text) !important; }
.pt.on, .meta-tab.active{ background: #fff !important; color: var(--text) !important; box-shadow: 0 3px 8px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.04) !important; }

/* Botones */
.btn{ border-radius: 8px !important; font-weight: 600 !important; }
.btn-p, .btn-primary{ background: linear-gradient(180deg,#19b39a,#00836F) !important; color:#fff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 6px rgba(0,131,111,.3) !important; border:none !important; }
.btn-g{ background: rgba(255,255,255,.75) !important; border: 1px solid rgba(0,0,0,.08) !important; }
.finput{ background: rgba(255,255,255,.85) !important; border: 1px solid rgba(0,0,0,.1) !important; border-radius: 8px !important; }
.finput:focus{ border-color:#0a84ff !important; box-shadow: 0 0 0 4px rgba(10,132,255,.18) !important; }

/* Barras de progreso */
.hb-track, .meta-trk{ background: rgba(118,118,128,.14) !important; height: 7px !important; }
.hb-fill, .meta-fill{ border-radius: 99px !important; }

/* Presupuestos */
.ppto-wrap{ border-radius: 14px !important; border: 1px solid rgba(0,0,0,.06) !important; background: rgba(255,255,255,.6); }
.ppto-tbl thead th{ background: #1f3b8f !important; }
.ppto-tbl thead th.main{ background: #2d5be3 !important; }

/* Panel de perfil y overlays */
.panel{ background: rgba(242,244,248,.82) !important; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.panel-hd, .pmenu{ background: rgba(255,255,255,.6) !important; }
.overlay.on{ background: rgba(0,0,0,.25) !important; }
.period-bar{ border-radius: 12px !important; background: rgba(10,132,255,.08) !important; border: 1px solid rgba(10,132,255,.18) !important; }

/* D3 */
.axis text{ font-family: var(--font) !important; fill:#86868b !important; }
.mapa-container{ background: rgba(255,255,255,.5) !important; border-radius: 14px !important; }

/* Animación de entrada */
.pc > div > template + div, .kpi-row, .card, .chart-card{ animation: bs-in .35s ease both; }
@keyframes bs-in{ from{ opacity:0; transform: translateY(6px) } to{ opacity:1; transform:none } }

/* ===================== V3.1 ===================== */
/* Sidebar: azul profundo y vivo, sin velo grisáceo */
.sb{
  background:
    radial-gradient(420px 260px at 0% 0%, rgba(20,184,166,.22), transparent 70%),
    radial-gradient(380px 300px at 100% 100%, rgba(37,99,235,.28), transparent 70%),
    linear-gradient(180deg,#044a78 0%,#023456 48%,#01223a 100%) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 24px 60px rgba(2,40,70,.38), inset 0 1px 0 rgba(255,255,255,.12) !important;
  transition: width .28s cubic-bezier(.4,0,.2,1) !important;
}
.ni{ color: rgba(255,255,255,.86) !important; }
.ni .ni-ico{ opacity: .9 !important; }
.sb-sec-lbl{ color: rgba(160,220,255,.55) !important; }
.sb-sel{ background: rgba(255,255,255,.12) !important; }
.sb-uname{ color:#fff !important } .sb-urole{ color: rgba(255,255,255,.55) !important }

/* Logo: completo al expandir, ícono al contraer */
.sb-toggle{ display:none !important; }
.sb-logo{ cursor: default !important; min-height: 64px; }
.sb-logo-icon{ display:none; width:34px; height:34px; object-fit:contain; }
.sb.col .sb-logo-img{ display:none !important; }
.sb.col .sb-logo-icon{ display:block; }
.sb.col .sb-logo{ padding: 15px 0 !important; justify-content:center !important; }
.sb.col .ni{ padding: 10px 0 !important; justify-content:center !important; }
.sb.col .ni-ico{ width:20px !important; height:20px !important; }
.sb.col .sb-user{ padding: 12px 0 !important; }

/* Botón flotante en el borde del menú */
.sb-edge{
  position: fixed; z-index: 400; top: 38px;
  left: calc(var(--sb-w) + 10px - 13px);
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.95); color: #023456;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow: 0 4px 14px rgba(2,40,70,.25);
  transition: left .28s cubic-bezier(.4,0,.2,1), transform .2s, background .2s;
}
.sb-edge:hover{ transform: scale(1.12); background:#fff; color:#00836F; }
.sb-edge svg{ transition: transform .28s; }
.sb-edge.col{ left: calc(var(--sb-w-col) + 10px - 13px); }
.sb-edge.col svg{ transform: rotate(180deg); }
@media (max-width:768px){ .sb-edge{ display:none; } }

/* Trimestres */
.q-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:12px; margin-bottom:14px; }
@media (max-width:1100px){ .q-grid{ grid-template-columns: repeat(2,1fr); } }
.q-card{ position:relative; overflow:hidden; }
.q-card::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:4px; }
.q-card.q1::before{ background:#00836F } .q-card.q2::before{ background:#2563EB }
.q-card.q3::before{ background:#7C3AED } .q-card.q4::before{ background:#F59E0B }
.q-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:8px; vertical-align:middle; }
.q-dot.q1{ background:#00836F } .q-dot.q2{ background:#2563EB } .q-dot.q3{ background:#7C3AED } .q-dot.q4{ background:#F59E0B }

/* Tabla mensual de metas/presupuestos */
table.metas-t{ min-width: 820px; }
table.metas-t tbody td{ padding: 10px 16px !important; vertical-align: middle; }
table.metas-t tr.mes-hoy td{ background: rgba(0,131,111,.07) !important; }
table.metas-t tr.mes-hoy td:first-child{ box-shadow: inset 3px 0 0 #00836F; }
table.metas-t tfoot td{
  padding: 12px 16px; font-weight:700; border-top: 2px solid rgba(0,0,0,.08);
  background: rgba(248,248,250,.9); font-variant-numeric: tabular-nums;
}
.alc-cell{ display:flex; align-items:center; gap:10px; }
.alc-cell .meta-trk{ flex:1; margin:0; }
.alc-cell span{ min-width:40px; text-align:right; font-size:12px; }
table.metas-t .cel-in{
  width: 100%; max-width: 150px; margin-left:auto; display:block;
  background: rgba(0,131,111,.06) !important; border: 1px solid rgba(0,131,111,.22) !important;
  border-radius: 7px !important; padding: 6px 9px !important; text-align:right;
  font: 600 13px "SF Mono", ui-monospace, monospace !important; color:#1d1d1f;
}
table.metas-t .cel-in.cm{ background: rgba(245,158,11,.07) !important; border-color: rgba(245,158,11,.3) !important; }
table.metas-t .cel-in:focus{ outline:none; border-color:#0a84ff !important; box-shadow: 0 0 0 3px rgba(10,132,255,.18); background:#fff !important; }
input.cel-in::-webkit-inner-spin-button{ opacity:.4 }

/* Mapa */
#mapa-geo svg{ display:block; width:100%; height:auto; }

/* ===================== V3.2 · Calendario ===================== */
.cal-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.cal-rango{ font-size:17px; font-weight:700; letter-spacing:-.02em; margin-left:8px; text-transform:capitalize; }
.cal-chips{ display:flex; gap:6px; flex-wrap:wrap; }
.cal-chip{ display:inline-flex; align-items:center; gap:7px; padding:4px 11px 4px 4px; border-radius:99px; font:600 12px var(--font);
  background: rgba(255,255,255,.8); border:1px solid color-mix(in srgb, var(--c) 35%, transparent); color:#1d1d1f; cursor:pointer; transition:.15s; }
.cal-chip:hover{ box-shadow:0 2px 8px rgba(0,0,0,.1); }
.cal-chip.off{ opacity:.4; filter:grayscale(1); }
.cal-av{ width:22px; height:22px; border-radius:50%; color:#fff; font:700 10px var(--font); display:inline-flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px #fff; flex-shrink:0; }
.cal-avs{ display:flex; }
.cal-avs .cal-av + .cal-av{ margin-left:-6px; }

.cal-card{ padding:0 !important; }
.cal-grid-head, .cal-allday{ display:grid; grid-template-columns: 58px repeat(7, 1fr); }
.cal-grid-head{ border-bottom:1px solid rgba(0,0,0,.06); }
.cal-dh{ text-align:center; padding:10px 4px; font-size:12px; color:var(--text-dim); font-weight:600; }
.cal-dh b{ display:block; font-size:22px; color:#1d1d1f; font-weight:600; letter-spacing:-.02em; margin-top:2px; }
.cal-dh.hoy b{ background:#e0352b; color:#fff; width:36px; height:36px; line-height:36px; border-radius:50%; margin:2px auto 0; font-size:19px; }
.cal-dh.hoy span{ color:#e0352b; }
.cal-dh.finde b{ color:var(--text-dim); }
.cal-allday{ border-bottom:1px solid rgba(0,0,0,.06); min-height:30px; }
.cal-allday-l{ font-size:10px; text-align:right; padding:8px 8px 0 0; }
.cal-allday-c{ padding:3px; border-left:1px solid rgba(0,0,0,.05); display:flex; flex-direction:column; gap:2px; }
.cal-pill{ font-size:11px; font-weight:600; padding:3px 7px; border-radius:6px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background: color-mix(in srgb, var(--ev) 18%, white); color: color-mix(in srgb, var(--ev) 75%, black); border-left:3px solid var(--ev); }

.cal-body{ display:grid; grid-template-columns:58px repeat(7,1fr); max-height:62vh; overflow-y:auto; position:relative; }
.cal-hora{ font-size:10.5px; color:var(--text-dim); text-align:right; padding-right:8px; transform:translateY(-7px); font-variant-numeric:tabular-nums; }
.cal-hora:first-child{ visibility:hidden; }
.cal-col{ position:relative; border-left:1px solid rgba(0,0,0,.05);
  background-image: repeating-linear-gradient(180deg, transparent 0 calc(var(--px) - 1px), rgba(0,0,0,.055) calc(var(--px) - 1px) var(--px)); }
.cal-col.finde{ background-color: rgba(118,118,128,.035); }
.cal-col.hoy{ background-color: rgba(10,132,255,.035); }
.cal-now{ position:absolute; left:0; right:0; height:2px; background:#e0352b; z-index:5; pointer-events:none; }
.cal-now::before{ content:''; position:absolute; left:-5px; top:-4px; width:10px; height:10px; border-radius:50%; background:#e0352b; }
.cal-ev{ position:absolute; border-radius:7px; padding:3px 6px 3px 8px; cursor:pointer; overflow:hidden; z-index:2;
  background-color: color-mix(in srgb, var(--ev) 16%, white);
  border:1px solid color-mix(in srgb, var(--ev) 30%, transparent);
  box-shadow: inset 3px 0 0 0 var(--ev); transition: transform .12s, box-shadow .12s; }
.cal-ev::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background: var(--ev-bar); }
.cal-ev:hover{ z-index:4; transform:scale(1.02); box-shadow: 0 6px 18px rgba(0,0,0,.14); }
.cal-ev-t{ font-size:11.5px; font-weight:700; line-height:1.25; color: color-mix(in srgb, var(--ev) 70%, black);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cal-ev-h{ font-size:10.5px; color: color-mix(in srgb, var(--ev) 55%, #555); margin-top:1px; white-space:nowrap; }

.cal-hoy{ display:flex; flex-direction:column; }
.cal-hoy-row{ display:flex; align-items:center; gap:12px; padding:11px 20px; border-bottom:1px solid rgba(0,0,0,.045); cursor:pointer; transition:background .15s; }
.cal-hoy-row:last-child{ border-bottom:none; }
.cal-hoy-row:hover{ background: rgba(10,132,255,.04); }
.cal-hoy-row.pasado{ opacity:.45; }
.cal-hoy-row.encurso{ background: rgba(0,131,111,.06); }
.cal-hoy-h{ width:58px; font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; flex-shrink:0; }
.cal-hoy-h .dim{ font-size:11px; font-weight:500; }
.cal-hoy-bar{ width:4px; align-self:stretch; border-radius:4px; background: var(--ev-bar); flex-shrink:0; }
.cal-hoy-t{ flex:1; min-width:0; }
.cal-hoy-t .bold{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal-join{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:8px; font:600 12px var(--font);
  text-decoration:none; color:#fff; background:#5b5fc7; white-space:nowrap; flex-shrink:0; box-shadow:0 2px 6px rgba(91,95,199,.35); }
.cal-join.p-zoom{ background:#0b5cff; box-shadow:0 2px 6px rgba(11,92,255,.35); }
.cal-join.p-meet{ background:#00897b; }
.cal-join:hover{ filter:brightness(1.08); }

.cal-modal{ position:fixed; z-index:600; top:50%; left:50%; transform:translate(-50%,-50%); width:min(520px, 92vw); max-height:86vh; overflow:auto;
  background: rgba(255,255,255,.92); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border-radius:20px; box-shadow: 0 30px 80px rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.8); }
.cal-modal-top{ padding:20px 20px 16px; color:#fff; background: linear-gradient(135deg, var(--ev), color-mix(in srgb, var(--ev) 60%, #012640)); border-radius:20px 20px 0 0; position:relative; }
.cal-modal-t{ font-size:19px; font-weight:700; letter-spacing:-.02em; margin:0 30px 6px 0; }
.cal-x{ position:absolute; top:14px; right:14px; width:28px; height:28px; border-radius:50%; border:none; background:rgba(255,255,255,.25); color:#fff; cursor:pointer; font-size:13px; }
.cal-x:hover{ background:rgba(255,255,255,.4); }
@media (max-width:900px){ .cal-grid-head,.cal-allday,.cal-body{ grid-template-columns:44px repeat(7, minmax(90px,1fr)); } .cal-card{ overflow-x:auto !important; } }

/* ===================== V3.3 · Color sólido + responsivo ===================== */
/* Menú: azul marino institucional sólido, sin velos ni transparencias */
.sb{
  background: linear-gradient(180deg, #03436d 0%, #022f4f 45%, #011f36 100%) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  opacity: 1 !important; filter: none !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 18px 44px rgba(1,31,54,.35) !important;
  display: flex !important; flex-direction: column !important;
}
.sb::before, .sb::after{ display:none !important; }
.ni{ color:#e8f1f8 !important; }
.ni .ni-ico{ opacity:1 !important; color:#9fd8ff; }
.ni:hover{ background: rgba(255,255,255,.10) !important; }
.ni.on{ background: linear-gradient(180deg,#0aa58a,#007a67) !important; box-shadow: 0 4px 14px rgba(0,122,103,.45) !important; }
.ni.on .ni-ico{ color:#fff !important; }
.sb-sec-lbl{ color:#7fb8dd !important; opacity:1 !important; }
.sb-logo-sub{ color: rgba(255,255,255,.6) !important; }

/* Arreglo del encimado: nada se comprime, el menú se desplaza */
.sb-logo, .sb-filters, .sb-user, .sb-foot{ flex-shrink:0 !important; }
.sb-nav{ flex:1 1 auto !important; min-height:0 !important; overflow-y:auto !important; overflow-x:hidden !important; }
.sb-nav > *{ flex-shrink:0 !important; }
.sb-sec-lbl{ display:block; line-height:1.4 !important; padding:14px 10px 5px !important; margin:0 !important; }
.sb-nav::-webkit-scrollbar{ width:4px } .sb-nav::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.2) }

/* Aprovechar todo el ancho */
.pc{ max-width:none !important; width:100% !important; }

/* Controles móviles (ocultos en escritorio) */
.tb-menu, .sb-close, .sb-backdrop{ display:none; }
.topbar-l{ flex:1; min-width:0; }

/* ---------- Tablet (768–1199) ---------- */
@media (max-width:1199px){
  .kpi-row{ grid-template-columns: repeat(auto-fit, minmax(170px,1fr)) !important; }
  .q-grid{ grid-template-columns: repeat(2,1fr); }
}

/* ---------- Teléfono (<768) ---------- */
@media (max-width:767px){
  .sb{
    top:0 !important; left:0 !important; bottom:0 !important; width: 280px !important; border-radius: 0 20px 20px 0 !important;
    transform: translateX(-105%); transition: transform .28s cubic-bezier(.4,0,.2,1) !important; z-index: 700 !important;
  }
  .sb.abierto{ transform: translateX(0); }
  /* en móvil el menú siempre se ve completo, con textos */
  .sb .ni-lbl, .sb .sb-sec-lbl, .sb .sb-filters, .sb .ni-badge, .sb .sb-ui, .sb .sb-logo-txt, .sb .sb-foot{ display: revert !important; }
  .sb .sb-filters{ display:flex !important; }
  .sb .ni{ justify-content:flex-start !important; padding: 11px 12px !important; font-size:14px !important; }
  .sb .sb-logo-img{ display:block !important; } .sb .sb-logo-icon{ display:none !important; }
  .sb-close{ display:flex; position:absolute; right:12px; top:16px; width:32px; height:32px; border-radius:50%; border:none;
    background: rgba(255,255,255,.12); color:#fff; font-size:14px; align-items:center; justify-content:center; cursor:pointer; }
  .sb-logo{ position:relative; }
  .sb-backdrop{ display:block; position:fixed; inset:0; z-index:650; background: rgba(1,20,35,.45); backdrop-filter: blur(3px);
    opacity:0; pointer-events:none; transition: opacity .25s; }
  .sb-backdrop.on{ opacity:1; pointer-events:auto; }
  .sb-edge{ display:none !important; }

  .main, .main.exp{ margin-left:0 !important; }
  .topbar{ margin: 8px 8px 0 !important; padding: 10px 12px !important; gap:10px !important; position: sticky; top: 8px; }
  .tb-menu{ display:flex; width:40px; height:40px; border-radius:12px; border:none; flex-shrink:0; cursor:pointer;
    align-items:center; justify-content:center; color:#fff; background: linear-gradient(180deg,#03436d,#011f36);
    box-shadow: 0 4px 12px rgba(1,31,54,.3); }
  .topbar-title{ font-size:17px !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .topbar-sub{ font-size:11.5px !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .sync-pill span:last-child{ display:none; } .sync-pill{ padding:8px !important; }
  .pc{ padding: 12px 8px 24px !important; }

  .kpi-row{ grid-template-columns: 1fr 1fr !important; gap:8px !important; }
  .kpi{ padding: 13px 14px !important; }
  .kpi-val, .chart-val{ font-size: 21px !important; }
  .kpi-lbl{ font-size: 11.5px !important; }
  .q-grid{ grid-template-columns: 1fr 1fr; gap:8px; }
  .g2, .g3, .g1-2{ grid-template-columns: 1fr !important; }
  .hero{ padding: 18px !important; } .hero-title{ font-size: 22px !important; } .hero-sub{ font-size: 13px !important; }
  .card-hd{ padding: 13px 14px !important; flex-wrap: wrap; gap: 8px; }
  .chart-card{ padding: 14px !important; }
  .chart-head{ flex-wrap: wrap; gap: 8px; }
  .ppto-tabs{ width: 100% !important; }
  table.t thead th, table.t tbody td{ padding: 9px 10px !important; font-size: 12.5px !important; white-space: nowrap; }
  .tbl-wrap{ -webkit-overflow-scrolling: touch; }

  /* Calendario en móvil */
  .cal-toolbar{ flex-direction: column; align-items: stretch; }
  .cal-toolbar > div:first-child{ justify-content: space-between; }
  .cal-rango{ font-size:15px; margin-left:0; }
  .cal-chips{ overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; }
  .cal-chip{ flex-shrink:0; }
  .cal-card{ overflow-x:auto !important; }
  .cal-grid-head, .cal-allday, .cal-body{ grid-template-columns: 44px repeat(7, 120px) !important; }
  .cal-hoy-row{ padding: 11px 12px; gap: 9px; flex-wrap: wrap; }
  .cal-hoy-t{ flex-basis: calc(100% - 90px); }
  .cal-join{ margin-left: 70px; }
  .cal-modal{ width: 100vw; max-height: 92vh; top:auto; bottom:0; left:0; transform:none; border-radius: 20px 20px 0 0; }
  .cal-modal-top{ border-radius: 20px 20px 0 0; }

  .panel{ max-width: 100% !important; }
}
/* Tablets en vertical: menú contraído por defecto se maneja desde JS */

/* ===================== V3.4 · Organigrama ===================== */
.org{ overflow-x:auto; padding: 18px 12px 26px; }
.org ul{ display:flex; justify-content:center; padding-top: 22px; position:relative; margin:0; }
.org > ul{ padding-top:0; min-width:max-content; margin: 0 auto; }
.org li{ list-style:none; position:relative; padding: 22px 10px 0; display:flex; flex-direction:column; align-items:center; }
.org > ul > li{ padding-top:0; }
.org li::before, .org li::after{ content:''; position:absolute; top:0; right:50%; width:50%; height:22px; border-top:2px solid rgba(2,52,86,.22); }
.org li::after{ right:auto; left:50%; border-left:2px solid rgba(2,52,86,.22); }
.org li:only-child::before, .org li:only-child::after{ display:none; }
.org li:only-child{ padding-top:22px; }
.org > ul > li:only-child{ padding-top:0; }
.org li:first-child::before, .org li:last-child::after{ border:0 none; }
.org li:last-child::before{ border-right:2px solid rgba(2,52,86,.22); border-radius: 0 10px 0 0; }
.org li:first-child::after{ border-radius: 10px 0 0 0; }
.org ul ul::before{ content:''; position:absolute; top:0; left:50%; height:22px; border-left:2px solid rgba(2,52,86,.22); }
.org > ul > li::before, .org > ul > li::after{ display:none; }
.org-node{ width: 190px; background: rgba(255,255,255,.9); border:1px solid rgba(0,0,0,.06); border-top: 4px solid var(--c);
  border-radius: 16px; padding: 16px 12px 12px; text-align:center; box-shadow: 0 8px 24px rgba(15,40,80,.10); transition: transform .2s, box-shadow .2s; }
.org-node:hover{ transform: translateY(-3px); box-shadow: 0 14px 32px rgba(15,40,80,.16); }
.org-av{ width:54px; height:54px; border-radius:50%; margin: 0 auto 8px; color:#fff; font: 700 18px var(--font);
  display:flex; align-items:center; justify-content:center; overflow:hidden; box-shadow: 0 0 0 3px #fff, 0 4px 10px rgba(0,0,0,.15); }
.org-av img{ width:100%; height:100%; object-fit:cover; }
.org-n{ font-weight:700; font-size:14px; letter-spacing:-.01em; color:#1d1d1f; }
.org-p{ font-size:12px; color:#6e6e73; margin-top:2px; min-height:16px; }
.org-d{ display:inline-block; margin-top:6px; font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:6px;
  background: color-mix(in srgb, var(--c) 14%, white); color: color-mix(in srgb, var(--c) 75%, black); }
.org-cnt{ font-size:11px; color:#86868b; margin-top:6px; }
.org-acts{ display:flex; gap:6px; justify-content:center; margin-top:10px; flex-wrap:wrap; }
.org-acts button{ font: 600 11px var(--font); padding: 5px 9px; border-radius:7px; cursor:pointer;
  border:1px solid rgba(0,0,0,.08); background: rgba(118,118,128,.08); color:#1d1d1f; }
.org-acts button:hover{ background: var(--c); color:#fff; border-color: transparent; }
.eq-color{ width:26px; height:26px; border-radius:50%; border:2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.12); cursor:pointer; }
.eq-color.on{ box-shadow: 0 0 0 2px #1d1d1f; transform: scale(1.1); }
@media (max-width:767px){ .org-node{ width: 160px; padding: 12px 8px 10px; } .org li{ padding-left:6px; padding-right:6px; } }

/* ===================== V3.5 ===================== */
.cli-link{ cursor:pointer; color:inherit; text-decoration:none; border-bottom:1px dashed rgba(0,131,111,.45); }
.cli-link:hover{ color:#00836F; border-bottom-style:solid; }
.c360-head{ display:flex !important; align-items:center; gap:16px; padding:18px 20px !important; flex-wrap:wrap;
  background: linear-gradient(135deg, rgba(0,131,111,.10), rgba(2,52,86,.08)), rgba(255,255,255,.8) !important; }
.c360-av{ width:60px; height:60px; border-radius:16px; flex-shrink:0; color:#fff; font:700 22px var(--font);
  display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg,#00836F,#023456); box-shadow:0 8px 20px rgba(2,52,86,.25); }
.c360-n{ font-size:22px; font-weight:700; letter-spacing:-.02em; }
.c360-meta{ display:flex; gap:14px; flex-wrap:wrap; font-size:12.5px; color:#6e6e73; margin-top:4px; }
.c360-meta a{ color:#0a6fb8; text-decoration:none; } .c360-meta a:hover{ text-decoration:underline; }
@media (max-width:767px){ .c360-n{ font-size:18px; } .c360-av{ width:48px; height:48px; font-size:18px; } }

/* V3.5.1 · Embudo de cotizaciones */
.cot-funnel{ display:flex; gap:8px; overflow-x:auto; padding: 2px 2px 12px; margin-bottom: 4px; }
.cot-stage{ flex: 1 0 120px; text-align:left; cursor:pointer; border-radius:14px; padding: 12px 14px; font-family: var(--font);
  background: rgba(255,255,255,.75); border:1px solid rgba(0,0,0,.06); border-top: 4px solid var(--c);
  box-shadow: 0 4px 14px rgba(15,40,80,.06); transition: transform .15s, box-shadow .15s; }
.cot-stage:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15,40,80,.12); }
.cot-stage.on{ background: color-mix(in srgb, var(--c) 12%, white); box-shadow: 0 0 0 2px var(--c); }
.cot-stage-n{ font-size:24px; font-weight:700; letter-spacing:-.02em; color: var(--c); }
.cot-stage-l{ font-size:11.5px; font-weight:600; color:#1d1d1f; margin-top:2px; }
.cot-stage-m{ font-size:12px; color:#6e6e73; font-variant-numeric: tabular-nums; margin-top:2px; }

/* ===================== V3.6 · CX ===================== */
.cx-g{ display:flex; flex-direction:column; align-items:center; }
.cx-g .kpi-lbl{ align-self:flex-start; }
.cx-gauge{ position:relative; width:150px; height:82px; margin:6px auto 4px; overflow:hidden; }
.cx-arc{ position:absolute; left:0; top:0; width:150px; height:150px; border-radius:50%; }
.cx-arc::after{ content:''; position:absolute; inset:18px; border-radius:50%; background: rgba(255,255,255,.95); }
.cx-val{ position:absolute; left:0; right:0; bottom:0; text-align:center; font-size:30px; font-weight:700; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.cx-bar{ display:flex; height:14px; border-radius:99px; overflow:hidden; margin:14px 0 10px; background: rgba(118,118,128,.14); }
.cx-bar > div{ min-width:0; transition: flex .5s; }
.cx-leg{ display:flex; flex-wrap:wrap; gap:10px; font-size:11.5px; color:#6e6e73; }
.cx-leg i{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:4px; }
.cx-resp{ display:flex; align-items:center; gap:14px; padding:12px 20px; border-bottom:1px solid rgba(0,0,0,.045); }
.cx-resp:last-child{ border-bottom:none; }
.cx-chips{ display:flex; flex-direction:column; gap:4px; flex-shrink:0; width:84px; }
.cx-chip{ font: 700 11px var(--font); padding: 3px 8px; border-radius:6px; text-align:center;
  background: color-mix(in srgb, var(--c) 14%, white); color: color-mix(in srgb, var(--c) 80%, black); }
@media (max-width:767px){ .cx-resp{ flex-wrap:wrap; padding:12px; } .cx-chips{ flex-direction:row; width:auto; } }

/* ===================== V3.5.2 · Ancho completo + íconos blancos ===================== */
.main, .main.exp, .pc, .page-content, .container, .content, main{ max-width: none !important; }
.main{ width: auto !important; margin-right: 0 !important; }
.topbar{ margin-right: 10px !important; }
.pc{ width: 100% !important; padding-right: 14px !important; }
@media (min-width:1600px){ .pc{ padding-left: 16px !important; padding-right: 22px !important; } .kpi-row{ grid-template-columns: repeat(auto-fit, minmax(200px,1fr)) !important; } }
.ni .ni-ico{ color: rgba(255,255,255,.88) !important; opacity: 1 !important; transition: color .15s, transform .15s; }
.ni:hover .ni-ico{ color: #34d3b4 !important; transform: scale(1.08); }
.ni.on .ni-ico{ color: #ffffff !important; }
.ni{ color: rgba(255,255,255,.92) !important; }
.sb.col .ni:hover{ background: rgba(52,211,180,.14) !important; }
.sb.col .ni.on{ box-shadow: 0 0 0 2px rgba(52,211,180,.35), 0 4px 14px rgba(0,122,103,.45) !important; }
.sb-sec-lbl{ color: rgba(255,255,255,.45) !important; }
.sb-edge:hover{ color: #00836F !important; }
.cx-row{ grid-template-columns: repeat(auto-fit, minmax(210px,1fr)) !important; }

/* ===================== V3.7 · Acceso ===================== */
.acc-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap:6px; }
.acc-item{ display:flex; align-items:center; gap:7px; padding:7px 10px; border-radius:8px; font-size:12.5px; cursor:pointer;
  background: rgba(255,255,255,.8); border:1px solid rgba(0,0,0,.08); transition: .15s; }
.acc-item.on{ background: rgba(0,131,111,.12); border-color: rgba(0,131,111,.35); font-weight:600; }
.acc-item input{ accent-color:#00836F; }

/* V3.8 · envío de encuestas */
.cx-aviso{ margin: 0 20px 10px; padding: 10px 14px; border-radius: 10px; font-size: 13px; cursor:pointer;
  background: rgba(0,131,111,.08); border:1px solid rgba(0,131,111,.2); color:#065f52; }

/* V3.9 · filtro de encuestas */
.cx-filtros{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.cx-fchip{ font: 600 12.5px var(--font); padding: 7px 13px; border-radius: 99px; cursor:pointer; border:1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.8); color:#1d1d1f; transition:.15s; }
.cx-fchip b{ margin-left:4px; font-weight:700; color:#6e6e73; }
.cx-fchip.on{ background: linear-gradient(180deg,#19b39a,#00836F); color:#fff; border-color:transparent; box-shadow: 0 3px 10px rgba(0,131,111,.3); }
.cx-fchip.on b{ color: rgba(255,255,255,.85); }
.cx-fchip.add{ background: transparent; border-style: dashed; color:#00836F; }

/* ===================== V3.11 · Periodo y comparativos ===================== */
.per-bar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; padding:10px 12px;
  background: rgba(255,255,255,.72); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border:1px solid rgba(255,255,255,.8); border-radius:16px; box-shadow: var(--sh-card); }
.per-seg{ display:flex; background: rgba(118,118,128,.12); border-radius:10px; padding:2px; }
.per-seg button{ border:none; background:transparent; padding:7px 12px; border-radius:8px; font:600 12.5px var(--font); color:#1d1d1f; cursor:pointer; white-space:nowrap; }
.per-seg button.on{ background:#fff; box-shadow: 0 3px 8px rgba(0,0,0,.12); color:#00836F; }
.per-ctrl{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.per-ctrl .finput{ width:auto; padding:7px 10px; font-size:12.5px; }
.per-vs{ font-size:12px; font-weight:700; color:#86868b; }
.per-lbl{ margin-left:auto; font-size:12.5px; color:#6e6e73; }
.per-lbl strong{ color:#1d1d1f; }
.per-kpis{ display:grid; grid-template-columns: repeat(auto-fit, minmax(170px,1fr)); gap:10px; margin-bottom:14px; }
.per-kpi{ background: var(--surface); border:1px solid var(--border); border-radius:16px; padding:14px 16px; box-shadow: var(--sh-card);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.per-val{ font-size:24px; font-weight:700; letter-spacing:-.03em; margin:6px 0 4px; font-variant-numeric: tabular-nums; }
.per-foot{ display:flex; gap:8px; align-items:center; font-size:11.5px; flex-wrap:wrap; }
.per-delta{ font-weight:700; padding:2px 7px; border-radius:6px; }
.per-delta.sube{ background: rgba(0,131,111,.12); color:#00705f; }
.per-delta.baja{ background: rgba(224,53,43,.12); color:#c0271e; }
.per-delta.neutro{ background: rgba(118,118,128,.12); color:#6e6e73; }
.per-det > summary{ cursor:pointer; list-style:none; flex-wrap:wrap; gap:10px; }
.per-det > summary::-webkit-details-marker{ display:none; }
.per-det > summary .card-title::before{ content:'▸ '; color:#86868b; }
.per-det[open] > summary .card-title::before{ content:'▾ '; }
.per-tabs{ display:flex; gap:4px; flex-wrap:wrap; }
.per-tabs button{ border:1px solid rgba(0,0,0,.08); background: rgba(255,255,255,.8); padding:6px 11px; border-radius:99px; font:600 12px var(--font); cursor:pointer; color:#1d1d1f; }
.per-tabs button.on{ background: linear-gradient(180deg,#19b39a,#00836F); color:#fff; border-color:transparent; }
@media (max-width:767px){
  .per-bar{ padding:8px; } .per-seg{ width:100%; overflow-x:auto; } .per-lbl{ margin-left:0; width:100%; }
  .per-kpis{ grid-template-columns: 1fr 1fr; } .per-val{ font-size:19px; }
}

/* ===================== V4.1 · Panel de perfil ===================== */
.panel-hd{ display:flex; align-items:center; gap:12px; padding:12px 16px !important; }
.pd-ttl{ flex:1; text-align:center; font-weight:700; font-size:14px; color:var(--txt-1,#1d1d1f); }
.pd-x{ width:32px; height:32px; border-radius:50%; border:1px solid rgba(0,0,0,.08); background:rgba(118,118,128,.10);
  color:#6e6e73; cursor:pointer; font-size:13px; transition:.15s; }
.pd-x:hover{ background:#e0352b; color:#fff; border-color:transparent; }
.panel-hero{ position:relative; overflow:hidden;
  background: radial-gradient(500px 220px at 85% -30%, rgba(94,234,212,.40), transparent 60%), linear-gradient(135deg,#00836F 0%,#0b5d7a 55%,#012640 100%) !important; }
.panel-hero::after{ content:''; position:absolute; right:-40px; bottom:-60px; width:180px; height:180px; border-radius:50%; background:rgba(255,255,255,.06); }
.pd-name{ font-size:20px; font-weight:700; letter-spacing:-.02em; color:#fff; }
.pd-mail{ font-size:12.5px; color:rgba(255,255,255,.78); margin-top:1px; }
.pd-tags{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.pd-tag{ font:600 11px var(--font); padding:3px 9px; border-radius:99px; background:rgba(255,255,255,.18);
  color:#fff; border:1px solid rgba(255,255,255,.25); text-transform:capitalize; }
.pm-lbl{ font:700 10px var(--font); letter-spacing:.08em; text-transform:uppercase; color:var(--txt-3,#aeaeb2); padding:14px 12px 5px; }
.pm-item{ display:flex !important; align-items:center; gap:10px; border-radius:10px !important; padding:9px 12px !important;
  font:600 13px var(--font) !important; border:none; background:transparent; cursor:pointer; text-align:left; width:100%;
  color:var(--txt-1,#1d1d1f) !important; transition:.15s; }
.pm-item:hover{ background:rgba(0,131,111,.10) !important; }
.pm-item.on{ background:linear-gradient(180deg,#19b39a,#00836F) !important; color:#fff !important; box-shadow:0 3px 10px rgba(0,131,111,.3); }
.pm-ic{ width:20px; text-align:center; font-size:14px; flex-shrink:0; }
.pm-item.out{ color:#e0352b !important; } .pm-item.out:hover{ background:rgba(224,53,43,.10) !important; }
.tema-seg{ display:flex; gap:3px; background:rgba(118,118,128,.12); border-radius:10px; padding:3px; margin:2px 8px; }
.tema-seg button{ flex:1; border:none; background:transparent; border-radius:8px; padding:7px 4px; cursor:pointer;
  font:600 10.5px var(--font); color:var(--txt-1,#1d1d1f); display:flex; flex-direction:column; align-items:center; gap:2px; }
.tema-seg button span:first-child{ font-size:14px; }
.tema-seg button.on{ background:var(--surface-solid,#fff); box-shadow:0 2px 6px rgba(0,0,0,.14); color:#00836F; }
.marca-row{ display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid rgba(0,0,0,.06); }
.marca-row:last-of-type{ border-bottom:none; }
.marca-prev{ width:96px; height:56px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
  background:linear-gradient(135deg,#03436d,#011f36); padding:8px; overflow:hidden; }
.marca-prev.favicon{ width:56px; } .marca-prev.icono{ width:66px; }
.marca-prev img{ max-width:100%; max-height:100%; object-fit:contain; }

/* ===================== V4.1 · Modo oscuro ===================== */
:root{ --txt-1:#1d1d1f; --txt-2:#6e6e73; --txt-3:#aeaeb2; --surface-solid:#fff; }
:root[data-theme="dark"]{
  --navy:#0b1622; --txt-1:#e8eaed; --txt-2:#9aa4b2; --txt-3:#6b7684; --surface-solid:#16212e;
  --text:#e8eaed; --text-dim:#9aa4b2; --text-faint:#6b7684;
  --surface: rgba(28,39,52,.80); --surface-2: rgba(255,255,255,.06); --surface-3: rgba(255,255,255,.10);
  --border: rgba(255,255,255,.10); --border-soft: rgba(255,255,255,.07);
  --sh-card: 0 1px 1px rgba(0,0,0,.25), 0 10px 30px rgba(0,0,0,.35);
  --sh-hover: 0 2px 4px rgba(0,0,0,.3), 0 18px 44px rgba(0,0,0,.45);
  color-scheme: dark;
}
:root[data-theme="dark"] body{
  background:
    radial-gradient(1100px 700px at 8% 0%, rgba(13,148,136,.20), transparent 60%),
    radial-gradient(900px 650px at 95% 10%, rgba(37,99,235,.18), transparent 60%),
    radial-gradient(900px 700px at 70% 100%, rgba(124,58,237,.15), transparent 60%),
    #0b1622 !important;
  color: var(--txt-1);
}
:root[data-theme="dark"] .card, :root[data-theme="dark"] .chart-card, :root[data-theme="dark"] .kpi,
:root[data-theme="dark"] .bi-kpi, :root[data-theme="dark"] .per-kpi, :root[data-theme="dark"] .topbar,
:root[data-theme="dark"] .cal-modal, :root[data-theme="dark"] .org-node, :root[data-theme="dark"] .cot-stage,
:root[data-theme="dark"] .per-bar, :root[data-theme="dark"] .panel{
  background: var(--surface) !important; border-color: var(--border) !important; color: var(--txt-1); }
:root[data-theme="dark"] .pmenu{ background: rgba(20,29,40,.9) !important; border-color: var(--border) !important; }
:root[data-theme="dark"] .p-body{ background: transparent; }
:root[data-theme="dark"] .card-title, :root[data-theme="dark"] .kpi-val, :root[data-theme="dark"] .per-val,
:root[data-theme="dark"] .topbar-title, :root[data-theme="dark"] .bold, :root[data-theme="dark"] h3,
:root[data-theme="dark"] .cal-rango, :root[data-theme="dark"] .c360-n, :root[data-theme="dark"] .org-n{ color: var(--txt-1) !important; }
:root[data-theme="dark"] .dim, :root[data-theme="dark"] .kpi-lbl, :root[data-theme="dark"] .card-meta,
:root[data-theme="dark"] .chart-sub, :root[data-theme="dark"] .p-sub, :root[data-theme="dark"] .kpi-meta,
:root[data-theme="dark"] .chart-ttl, :root[data-theme="dark"] .org-p{ color: var(--txt-2) !important; }
:root[data-theme="dark"] table.t thead th{ background: rgba(255,255,255,.05) !important; color: var(--txt-2) !important; border-bottom-color: var(--border) !important; }
:root[data-theme="dark"] table.t tbody td{ border-bottom-color: rgba(255,255,255,.06) !important; color: var(--txt-1); }
:root[data-theme="dark"] table.t tbody tr:hover td{ background: rgba(255,255,255,.05) !important; }
:root[data-theme="dark"] table.metas-t tfoot td{ background: rgba(255,255,255,.06) !important; }
:root[data-theme="dark"] .finput, :root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea{
  background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.14) !important; color: var(--txt-1) !important; }
:root[data-theme="dark"] .btn-g{ background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.14) !important; color: var(--txt-1) !important; }
:root[data-theme="dark"] .ppto-tabs, :root[data-theme="dark"] .per-seg, :root[data-theme="dark"] .meta-tabs,
:root[data-theme="dark"] .tema-seg{ background: rgba(255,255,255,.08) !important; }
:root[data-theme="dark"] .pt.on, :root[data-theme="dark"] .per-seg button.on, :root[data-theme="dark"] .meta-tab.active,
:root[data-theme="dark"] .tema-seg button.on{ background:#233246 !important; color:#34d3b4 !important; }
:root[data-theme="dark"] .pt, :root[data-theme="dark"] .per-seg button, :root[data-theme="dark"] .per-tabs button,
:root[data-theme="dark"] .cx-fchip, :root[data-theme="dark"] .cal-chip, :root[data-theme="dark"] .acc-item,
:root[data-theme="dark"] .pm-item{ color: var(--txt-1) !important; }
:root[data-theme="dark"] .per-tabs button, :root[data-theme="dark"] .cx-fchip, :root[data-theme="dark"] .cal-chip,
:root[data-theme="dark"] .acc-item, :root[data-theme="dark"] .pd-x{ background: rgba(255,255,255,.07) !important; border-color: rgba(255,255,255,.12) !important; }
:root[data-theme="dark"] .meta-trk, :root[data-theme="dark"] .hb-track{ background: rgba(255,255,255,.12) !important; }
:root[data-theme="dark"] .axis text{ fill:#9aa4b2 !important; }
:root[data-theme="dark"] .cal-col{ background-image: repeating-linear-gradient(180deg, transparent 0 calc(var(--px) - 1px), rgba(255,255,255,.07) calc(var(--px) - 1px) var(--px)) !important; }
:root[data-theme="dark"] .cal-ev{ background-color: color-mix(in srgb, var(--ev) 26%, #16212e) !important; }
:root[data-theme="dark"] .cal-ev-t{ color: color-mix(in srgb, var(--ev) 30%, #ffffff) !important; }
:root[data-theme="dark"] .cal-pill{ background: color-mix(in srgb, var(--ev) 25%, #16212e) !important; color: color-mix(in srgb, var(--ev) 25%, #fff) !important; }
:root[data-theme="dark"] .cx-chip, :root[data-theme="dark"] .org-d{ background: color-mix(in srgb, var(--c, var(--ev, #00836F)) 22%, #16212e) !important; color: color-mix(in srgb, var(--c, var(--ev, #00836F)) 30%, #fff) !important; }
:root[data-theme="dark"] .mapa-container{ background: rgba(255,255,255,.04) !important; }
:root[data-theme="dark"] #mapa-geo path[fill="#e9ecf1"], :root[data-theme="dark"] #mapa-clientes path[fill="#e9ecf1"]{ fill:#243447 !important; }
:root[data-theme="dark"] #mapa-geo path, :root[data-theme="dark"] #mapa-clientes path{ stroke:#0b1622 !important; }
:root[data-theme="dark"] .cel-in{ background: rgba(0,131,111,.16) !important; color: var(--txt-1) !important; }
:root[data-theme="dark"] .cel-in.cm{ background: rgba(245,158,11,.16) !important; }
:root[data-theme="dark"] .badge{ filter: brightness(1.12) saturate(1.1); }
:root[data-theme="dark"] .sync-pill{ background: rgba(255,255,255,.08) !important; color: var(--txt-1); }
:root[data-theme="dark"] .overlay.on{ background: rgba(0,0,0,.55) !important; }
:root[data-theme="dark"] .sb-edge{ background:#1c2734 !important; color:#9fd8ff; border-color: rgba(255,255,255,.14); }
:root[data-theme="dark"] .marca-row{ border-bottom-color: rgba(255,255,255,.08); }
:root[data-theme="dark"] .cx-arc::after{ background:#16212e !important; }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.22); }

/* V4.2 · marca clara y oscura */
.marca-grupo{ padding:14px 0; border-bottom:1px solid rgba(0,0,0,.06); }
.marca-grupo:last-of-type{ border-bottom:none; }
.marca-tit{ display:flex; flex-direction:column; gap:1px; margin-bottom:10px; }
.marca-tit .dim{ font-size:11.5px; }
.marca-par{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.marca-slot{ border:1px solid rgba(0,0,0,.08); border-radius:12px; overflow:hidden; }
.marca-prev{ width:100%; height:62px; border-radius:0; padding:8px; }
.marca-prev.mp-light{ background:#f2f4f8; }
.marca-prev.mp-dark{ background:linear-gradient(135deg,#0d1b28,#03436d); }
.marca-pie{ display:flex; align-items:center; justify-content:space-between; gap:6px; padding:7px 9px; background:rgba(118,118,128,.07); }
:root[data-theme="dark"] .marca-grupo{ border-bottom-color:rgba(255,255,255,.08); }
:root[data-theme="dark"] .marca-slot{ border-color:rgba(255,255,255,.12); }
:root[data-theme="dark"] .marca-pie{ background:rgba(255,255,255,.06); }

/* ===================== V4.3 · Panel Big Sur desde la izquierda ===================== */
.panel{
  left:0 !important; right:auto !important; max-width: 880px !important;
  border-radius: 0 24px 24px 0 !important;
  background: rgba(242,244,248,.86) !important;
  backdrop-filter: saturate(180%) blur(30px); -webkit-backdrop-filter: saturate(180%) blur(30px);
  border-right: 1px solid rgba(255,255,255,.7);
  box-shadow: 30px 0 80px rgba(15,40,80,.22) !important;
}
.panel-hd{ background: rgba(255,255,255,.55) !important; border-bottom:1px solid rgba(0,0,0,.06) !important; }
.panel-hero{ padding: 24px 24px !important; }
.pmenu{ background: rgba(255,255,255,.45) !important; border-right:1px solid rgba(0,0,0,.06) !important; padding: 8px 10px 12px !important; }
.p-body{ padding: 24px 28px 32px !important; }
.p-sec h3{ font-size:19px !important; font-weight:700 !important; letter-spacing:-.02em; }
.p-sub{ font-size:13px !important; color: var(--txt-2) !important; margin-bottom:16px !important; }
.pm-ic{ width:18px; height:18px; flex-shrink:0; opacity:.85; }
.pm-item.on .pm-ic{ opacity:1; }
.tema-seg button{ padding:8px 4px; gap:3px; }
.tema-seg .pm-ic{ width:17px; height:17px; }
.marca-prev{ display:flex; align-items:center; justify-content:center; }
/* oscuro */
:root[data-theme="dark"] .panel{ background: rgba(16,24,34,.90) !important; border-right-color: rgba(255,255,255,.10); box-shadow: 30px 0 80px rgba(0,0,0,.5) !important; }
:root[data-theme="dark"] .panel-hd{ background: rgba(255,255,255,.05) !important; border-bottom-color: rgba(255,255,255,.08) !important; }
:root[data-theme="dark"] .pmenu{ background: rgba(255,255,255,.04) !important; border-right-color: rgba(255,255,255,.08) !important; }
:root[data-theme="dark"] .pd-ttl, :root[data-theme="dark"] .p-sec h3{ color: var(--txt-1) !important; }
@media (max-width:900px){ .panel{ border-radius:0 !important; grid-template-areas:"hd" "hero" "menu" "body" !important; grid-template-columns:1fr !important; grid-template-rows:auto auto auto 1fr !important; }
  .pmenu{ flex-direction:row !important; overflow-x:auto; border-right:none !important; border-bottom:1px solid rgba(0,0,0,.06); gap:6px !important; }
  .pmenu .pm-lbl, .pmenu > div[style*="flex:1"]{ display:none !important; }
  .pm-item{ white-space:nowrap; } .tema-seg{ margin:0; flex-shrink:0; } }

/* ===================== V4.4 · Menú fluido, logo y malla ===================== */
/* Malla de fondo */
#malla{ position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; opacity:.85; }
#malla{ z-index:0 !important; }
.main{ position:relative; z-index:1; }
.sb{ z-index:300 !important; } .sb-edge{ z-index:400 !important; }
.sb-backdrop{ z-index:650 !important; } .panel{ z-index:700 !important; }
.overlay{ z-index:480 !important; } .cal-modal{ z-index:800 !important; }

/* Transición del menú: todo con la misma curva y duración */
:root{ --sb-ease: cubic-bezier(.32,.72,0,1); --sb-dur: .42s; }
.sb{ transition: width var(--sb-dur) var(--sb-ease), background .3s !important; will-change: width; }
.main, .main.exp{ transition: margin-left var(--sb-dur) var(--sb-ease) !important; will-change: margin-left; }
.sb-edge{ transition: left var(--sb-dur) var(--sb-ease), transform .2s, background .2s !important; }
/* Los textos se desvanecen en vez de desaparecer de golpe */
.ni-lbl, .sb-grp, .sb-filters, .ni-badge, .sb-ui{
  transition: opacity .18s ease, transform .22s var(--sb-ease) !important; }
.sb.col .ni-lbl, .sb.col .sb-grp, .sb.col .sb-filters, .sb.col .ni-badge, .sb.col .sb-ui{
  opacity:0 !important; transform: translateX(-6px); pointer-events:none;
  position:absolute !important; white-space:nowrap; }
.sb.col .sb-filters{ visibility:hidden; }
.ni{ transition: background .18s, color .18s, padding var(--sb-dur) var(--sb-ease) !important; }
.sb-nav{ scrollbar-gutter: stable; }
.sb.col .sb-nav{ overflow-x:hidden; }

/* Logo: completo al expandir, llaves al contraer. Siempre blanco. */
.sb-logo{ justify-content:center !important; padding:18px 12px 14px !important; min-height:0 !important; border-bottom:1px solid rgba(255,255,255,.08); }
.sb-logo-txt{ display:none !important; }
.sb-logo-img{ display:block !important; max-width:150px; max-height:42px; width:auto; height:auto; object-fit:contain;
  opacity:1; transition: opacity .18s ease; }
.sb-logo-icon{ display:none !important; width:34px !important; height:34px !important; object-fit:contain; }
.sb.col .sb-logo{ padding:16px 0 12px !important; }
.sb.col .sb-logo-img{ display:none !important; }
.sb.col .sb-logo-icon{ display:block !important; }

/* Encabezados de grupo */
.sb-grp{ display:flex; flex-direction:column; gap:1px; padding:15px 12px 6px; }
.sb-grp-t{ font:700 10.5px var(--font); letter-spacing:.07em; text-transform:uppercase; color:#8fc9ea; }
.sb-grp-s{ font:500 9.5px var(--font); color:rgba(255,255,255,.34); letter-spacing:.02em; }
.sb.col .sb-grp{ padding:0 !important; height:14px; }
.sb-div{ margin:6px 10px !important; }


/* ===== V4.6.1 · LOGO SIEMPRE BLANCO + sin salto al contraer ===== */
.sb-logo-img, .sb-logo-icon{ filter: brightness(0) invert(1) !important; }

/* El contenido no se redibuja durante la animación */
.main{ contain: layout paint; }
.sb, .sb-nav{ contain: layout; }
.pc{ transition: none !important; }
/* Una sola curva para menú, contenido y botón */
.sb{ transition: width .38s cubic-bezier(.4,0,.2,1) !important; }
.main, .main.exp{ transition: margin-left .38s cubic-bezier(.4,0,.2,1) !important; }
.sb-edge{ transition: left .38s cubic-bezier(.4,0,.2,1), transform .2s, background .2s !important; }
.ni-lbl, .sb-grp, .sb-filters, .ni-badge, .sb-ui{ transition: opacity .12s ease !important; }
.sb.col .ni-lbl, .sb.col .sb-grp, .sb.col .sb-filters, .sb.col .ni-badge, .sb.col .sb-ui{ transform:none !important; }


/* ===== V4.6.2 · DESVANECIDO SUAVE del menú ===== */
/* Los textos ya no salen del flujo: se recortan con el ancho y se desvanecen */
.sb{ overflow-x: hidden !important; }
.sb-nav{ overflow-x: hidden !important; }

.ni-lbl, .sb-grp-t, .sb-grp-s, .ni-badge, .sb-filters, .sb-uname, .sb-urole, .sb-foot{
  white-space: nowrap;
  opacity: 1;
  /* al expandir: primero crece el menú, después aparece el texto */
  transition: opacity .22s ease .16s !important;
  position: static !important;
  transform: none !important;
  visibility: visible !important;
}
.sb.col .ni-lbl, .sb.col .sb-grp-t, .sb.col .sb-grp-s, .sb.col .ni-badge,
.sb.col .sb-filters, .sb.col .sb-uname, .sb.col .sb-urole, .sb.col .sb-foot{
  /* al contraer: el texto se va primero, sin esperar */
  opacity: 0 !important;
  transition: opacity .13s ease 0s !important;
  pointer-events: none;
}
/* El espacio de los filtros y el grupo se cierra al mismo ritmo que el menú */
.sb-filters{ overflow:hidden; max-height:180px; transition: opacity .22s ease .16s, max-height .38s cubic-bezier(.4,0,.2,1), padding .38s cubic-bezier(.4,0,.2,1), margin .38s cubic-bezier(.4,0,.2,1) !important; }
.sb.col .sb-filters{ max-height:0 !important; padding-top:0 !important; padding-bottom:0 !important; margin:0 !important; }
.sb-grp{ overflow:hidden; max-height:60px; transition: max-height .38s cubic-bezier(.4,0,.2,1), padding .38s cubic-bezier(.4,0,.2,1) !important; }
.sb.col .sb-grp{ max-height:16px !important; padding:6px 0 2px !important; }
.sb-foot{ overflow:hidden; max-height:50px; transition: opacity .13s ease, max-height .38s cubic-bezier(.4,0,.2,1), padding .38s cubic-bezier(.4,0,.2,1) !important; }
.sb.col .sb-foot{ max-height:0 !important; padding:0 !important; }
/* Los íconos se recentran con la misma curva */
.ni{ transition: background .18s, color .18s, padding .38s cubic-bezier(.4,0,.2,1) !important; }
.ni-ico{ flex-shrink:0; }


/* ===== V4.6.3 · Menú más fino al expandir/contraer (V463 MENU) ===== */
:root{ --sbc: cubic-bezier(.22,1,.36,1); --sbd: .36s; }
.sb{ transition: width var(--sbd) var(--sbc) !important; }
.main, .main.exp{ transition: margin-left var(--sbd) var(--sbc) !important; }
.sb-edge{ transition: left var(--sbd) var(--sbc), transform .18s, background .18s !important; }
/* el texto se va rápido y regresa cuando ya hay espacio */
.ni-lbl, .sb-grp-t, .sb-grp-s, .ni-badge, .sb-uname, .sb-urole{
  transition: opacity .2s ease .14s !important; }
.sb.col .ni-lbl, .sb.col .sb-grp-t, .sb.col .sb-grp-s, .sb.col .ni-badge,
.sb.col .sb-uname, .sb.col .sb-urole{ transition: opacity .11s ease 0s !important; }
/* el ícono se desliza al centro en lugar de saltar */
.ni{ display:flex; align-items:center; gap:12px; justify-content:flex-start !important;
  transition: background .18s, color .18s, padding var(--sbd) var(--sbc), gap var(--sbd) var(--sbc) !important; }
.sb.col .ni{ gap:0 !important; padding-left:0 !important; padding-right:0 !important; justify-content:center !important; }
.ni-ico{ transition: transform var(--sbd) var(--sbc) !important; }
.sb.col .ni-ico{ transform: scale(1.12); }
.sb-logo-img, .sb-logo-icon{ transition: opacity .18s ease !important; }
/* nada parpadea mientras dura la animación */
.sb *{ backface-visibility:hidden; }

/* ===== V4.8 · Modo oscuro: ningún texto en negro ===== */
:root[data-theme="dark"] .folio, :root[data-theme="dark"] .mono, :root[data-theme="dark"] .amt,
:root[data-theme="dark"] .amt-sm, :root[data-theme="dark"] td, :root[data-theme="dark"] th,
:root[data-theme="dark"] .cel-in, :root[data-theme="dark"] .hb-name, :root[data-theme="dark"] .hb-val,
:root[data-theme="dark"] .cot-stage-l, :root[data-theme="dark"] .val-t, :root[data-theme="dark"] .marca-tit,
:root[data-theme="dark"] .cal-hoy-t, :root[data-theme="dark"] .q-card, :root[data-theme="dark"] .per-kpi,
:root[data-theme="dark"] label, :root[data-theme="dark"] .flbl, :root[data-theme="dark"] p,
:root[data-theme="dark"] .alc-cell span, :root[data-theme="dark"] .org-acts button,
:root[data-theme="dark"] .acc-item, :root[data-theme="dark"] .chip, :root[data-theme="dark"] summary{
  color: var(--txt-1) !important; }
:root[data-theme="dark"] .folio{ background: rgba(255,255,255,.10) !important; }
:root[data-theme="dark"] .badge.b-void, :root[data-theme="dark"] .badge.b-draft{
  background: rgba(255,255,255,.12) !important; color:#cbd5e1 !important; }
/* etiquetas de las gráficas */
:root[data-theme="dark"] svg text{ fill: #cbd5e1 !important; }
:root[data-theme="dark"] svg .axis text{ fill:#9aa4b2 !important; }
:root[data-theme="dark"] #chart-top10 text, :root[data-theme="dark"] #chart-rentabilidad text,
:root[data-theme="dark"] #chart-campanas text{ fill:#e8eaed !important; }
:root[data-theme="dark"] #mapa-geo text, :root[data-theme="dark"] #mapa-clientes text{ fill:#fff !important; }
/* menús desplegables del sistema */
:root[data-theme="dark"] option{ background:#16212e; color:#e8eaed; }

/* ===================== V4.9 · Paleta oscura completa ===================== */
/* Menú: azul marino → verde navy en modo oscuro */
:root[data-theme="dark"] .sb{
  background:
    radial-gradient(420px 260px at 0% 0%, rgba(45,212,167,.14), transparent 70%),
    radial-gradient(380px 300px at 100% 100%, rgba(13,148,136,.16), transparent 70%),
    linear-gradient(180deg,#07403a 0%,#052e2e 45%,#031f22 100%) !important;
  border-color: rgba(45,212,167,.14) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.07) !important;
}
:root[data-theme="dark"] .ni.on{
  background: linear-gradient(180deg,#2DD4A7,#0d9b7d) !important; color:#03231f !important;
  box-shadow: 0 4px 16px rgba(45,212,167,.35) !important; }
:root[data-theme="dark"] .ni.on .ni-ico{ color:#03231f !important; }
:root[data-theme="dark"] .ni:hover{ background: rgba(45,212,167,.12) !important; }
:root[data-theme="dark"] .ni .ni-ico{ color: rgba(160,240,220,.85) !important; }
:root[data-theme="dark"] .ni:hover .ni-ico{ color:#2DD4A7 !important; }
:root[data-theme="dark"] .sb-grp-t{ color:#6ee7c8 !important; }
:root[data-theme="dark"] .sb-sel{ background: rgba(255,255,255,.09) !important; border-color: rgba(45,212,167,.20) !important; }
:root[data-theme="dark"] .sb-edge{ background:#0b332f !important; color:#2DD4A7 !important; border-color: rgba(45,212,167,.28) !important; }
:root[data-theme="dark"] .sb-user{ border-top-color: rgba(255,255,255,.08) !important; }

/* Hero y acentos */
:root[data-theme="dark"] .hero, :root[data-theme="dark"] .panel-hero, :root[data-theme="dark"] .c360-av{
  background: radial-gradient(500px 260px at 88% -25%, rgba(45,212,167,.30), transparent 60%),
    linear-gradient(135deg,#0a5f54 0%,#07414a 55%,#04222e 100%) !important; }
:root[data-theme="dark"] .btn-p, :root[data-theme="dark"] .btn-primary{
  background: linear-gradient(180deg,#2DD4A7,#0d9b7d) !important; color:#03231f !important;
  box-shadow: 0 2px 10px rgba(45,212,167,.30) !important; }
:root[data-theme="dark"] .pm-item.on, :root[data-theme="dark"] .cx-fchip.on, :root[data-theme="dark"] .per-tabs button.on{
  background: linear-gradient(180deg,#2DD4A7,#0d9b7d) !important; color:#03231f !important; }
:root[data-theme="dark"] .cli-link:hover, :root[data-theme="dark"] .c360-meta a, :root[data-theme="dark"] .back{ color:#2DD4A7 !important; }
:root[data-theme="dark"] .brand-tag, :root[data-theme="dark"] .val-ic, :root[data-theme="dark"] .marca{ color:#2DD4A7 !important; }
:root[data-theme="dark"] .hb-fill.teal, :root[data-theme="dark"] .meta-fill{ filter: brightness(1.25); }

/* Verde / rojo / ámbar más legibles sobre oscuro */
:root[data-theme="dark"] .green, :root[data-theme="dark"] .kpi.green .kpi-val{ color:#2DD4A7 !important; }
:root[data-theme="dark"] .red, :root[data-theme="dark"] .kpi.red .kpi-val{ color:#FB7185 !important; }
:root[data-theme="dark"] .amber, :root[data-theme="dark"] .kpi.amber .kpi-val{ color:#FBBF24 !important; }
:root[data-theme="dark"] .per-delta.sube{ background: rgba(45,212,167,.16) !important; color:#2DD4A7 !important; }
:root[data-theme="dark"] .per-delta.baja{ background: rgba(251,113,133,.16) !important; color:#FB7185 !important; }

/* Todo el texto en claro: regla general con excepciones */
:root[data-theme="dark"] .card *, :root[data-theme="dark"] .chart-card *, :root[data-theme="dark"] .kpi *,
:root[data-theme="dark"] .per-kpi *, :root[data-theme="dark"] .panel *, :root[data-theme="dark"] .cal-modal *{
  border-color: rgba(255,255,255,.10); }
:root[data-theme="dark"] .badge{ color:#e8eaed; }
:root[data-theme="dark"] .badge.b-paid{ background: rgba(45,212,167,.18) !important; color:#6ee7c8 !important; }
:root[data-theme="dark"] .badge.b-over, :root[data-theme="dark"] .badge.b-unpaid{ background: rgba(251,113,133,.18) !important; color:#fda4af !important; }
:root[data-theme="dark"] .badge.b-warn{ background: rgba(251,191,36,.18) !important; color:#fcd34d !important; }
:root[data-theme="dark"] .badge.b-info, :root[data-theme="dark"] .badge.b-sent{ background: rgba(96,165,250,.18) !important; color:#93c5fd !important; }
:root[data-theme="dark"] .badge.b-brand{ background: rgba(45,212,167,.18) !important; color:#6ee7c8 !important; }
:root[data-theme="dark"] .badge.b-gen{ background: rgba(192,132,252,.18) !important; color:#d8b4fe !important; }

/* Formularios y avisos */
:root[data-theme="dark"] .cx-aviso{ background: rgba(45,212,167,.10) !important; border-color: rgba(45,212,167,.24) !important; color:#6ee7c8 !important; }
:root[data-theme="dark"] .msg.info{ background: rgba(96,165,250,.12) !important; color:#93c5fd !important; }
:root[data-theme="dark"] .msg.err{ background: rgba(251,113,133,.12) !important; color:#fda4af !important; }
:root[data-theme="dark"] input::placeholder, :root[data-theme="dark"] textarea::placeholder{ color:#6b7684 !important; }
:root[data-theme="dark"] .spin{ border-color: rgba(255,255,255,.18) !important; border-top-color:#2DD4A7 !important; }

/* ===================== V5.0 ===================== */
/* Medidores con el número grande al centro */
.cx-gauge.big{ height:98px; width:172px; }
.cx-gauge.big .cx-arc{ width:172px; height:172px; }
.cx-gauge.big .cx-arc::after{ inset:23px; }
.cx-gauge.big .cx-val{ bottom:0; font-size:40px; font-weight:800; letter-spacing:-.04em; line-height:1; }
@media (max-width:767px){ .cx-gauge.big{ height:82px; width:144px; } .cx-gauge.big .cx-arc{ width:144px; height:144px; }
  .cx-gauge.big .cx-arc::after{ inset:19px; } .cx-gauge.big .cx-val{ font-size:31px; } }

/* TELÉFONO: el velo ya no tapa el menú ni bloquea los toques */
.sb-backdrop{ z-index: 290 !important; }
.sb{ z-index: 300 !important; }
@media (max-width:767px){
  .sb{ z-index: 720 !important; }
  .sb-backdrop{ z-index: 700 !important; }
  .sb-backdrop:not(.on){ display:none !important; pointer-events:none !important; }
  .sb:not(.abierto){ pointer-events:none; }
  .sb.abierto{ pointer-events:auto; }
  .panel{ z-index: 900 !important; } .overlay{ z-index: 880 !important; } .cal-modal{ z-index: 950 !important; }
  .tb-menu{ z-index: 5; position:relative; }
  #malla{ z-index:0 !important; pointer-events:none !important; }
}

/* ===================== V5.0 ===================== */
/* Medidores con el número grande al centro */
.cx-gauge.big{ height:98px; width:172px; }
.cx-gauge.big .cx-arc{ width:172px; height:172px; }
.cx-gauge.big .cx-arc::after{ inset:23px; }
.cx-gauge.big .cx-val{ bottom:0; font-size:40px; font-weight:800; letter-spacing:-.04em; line-height:1; }
@media (max-width:767px){ .cx-gauge.big{ height:82px; width:144px; } .cx-gauge.big .cx-arc{ width:144px; height:144px; }
  .cx-gauge.big .cx-arc::after{ inset:19px; } .cx-gauge.big .cx-val{ font-size:31px; } }

/* TELÉFONO: el velo ya no tapa el menú ni bloquea los toques */
.sb-backdrop{ z-index: 290 !important; }
.sb{ z-index: 300 !important; }
@media (max-width:767px){
  .sb{ z-index: 720 !important; }
  .sb-backdrop{ z-index: 700 !important; }
  .sb-backdrop:not(.on){ display:none !important; pointer-events:none !important; }
  .sb:not(.abierto){ pointer-events:none; }
  .sb.abierto{ pointer-events:auto; }
  .panel{ z-index: 900 !important; } .overlay{ z-index: 880 !important; } .cal-modal{ z-index: 950 !important; }
  .tb-menu{ z-index: 5; position:relative; }
  #malla{ z-index:0 !important; pointer-events:none !important; }
}

/* ===================== V5.1 · Menú verde fijo, campana y agentes ===================== */
/* El menú es verde navy en los dos temas */
.sb, :root[data-theme="dark"] .sb{
  background:
    radial-gradient(420px 260px at 0% 0%, rgba(45,212,167,.16), transparent 70%),
    radial-gradient(380px 300px at 100% 100%, rgba(13,148,136,.18), transparent 70%),
    linear-gradient(180deg,#07443d 0%,#05302f 45%,#032123 100%) !important;
  border: 1px solid rgba(45,212,167,.14) !important;
  box-shadow: 0 24px 60px rgba(3,33,35,.42), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.ni.on, :root[data-theme="dark"] .ni.on{
  background: linear-gradient(180deg,#2DD4A7,#0d9b7d) !important; color:#03231f !important;
  box-shadow: 0 4px 16px rgba(45,212,167,.35) !important; }
.ni.on .ni-ico, :root[data-theme="dark"] .ni.on .ni-ico{ color:#03231f !important; }
.ni:hover, :root[data-theme="dark"] .ni:hover{ background: rgba(45,212,167,.12) !important; }
.ni .ni-ico, :root[data-theme="dark"] .ni .ni-ico{ color: rgba(170,242,225,.88) !important; }
.ni:hover .ni-ico{ color:#2DD4A7 !important; }
.sb-grp-t, :root[data-theme="dark"] .sb-grp-t{ color:#6ee7c8 !important; }
.sb-grp-s{ color: rgba(255,255,255,.35) !important; }
.sb-sel, :root[data-theme="dark"] .sb-sel{ background: rgba(255,255,255,.10) !important; border-color: rgba(45,212,167,.22) !important; color:#fff !important; }
.sb-edge, :root[data-theme="dark"] .sb-edge{ background:#0b3a34 !important; color:#2DD4A7 !important; border-color: rgba(45,212,167,.30) !important; }
.sb-edge:hover{ background:#2DD4A7 !important; color:#03231f !important; }

/* Campana de avisos */
.campana-wrap{ position:relative; }
.campana{ width:38px; height:38px; border-radius:12px; border:1px solid rgba(0,0,0,.07); cursor:pointer;
  background: rgba(255,255,255,.7); color:#1d1d1f; display:flex; align-items:center; justify-content:center; position:relative; transition:.15s; }
.campana svg{ width:19px; height:19px; }
.campana:hover{ background:#fff; color:#00836F; }
.campana.urge{ color:#e0352b; animation: camp 2.4s ease-in-out infinite; }
@keyframes camp{ 0%,88%,100%{transform:rotate(0)} 90%{transform:rotate(-11deg)} 94%{transform:rotate(9deg)} }
.campana-n{ position:absolute; top:-5px; right:-5px; min-width:18px; height:18px; padding:0 5px; border-radius:99px;
  background:#e0352b; color:#fff; font:700 10.5px var(--font); display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px #fff; }
.avisos-panel{ position:absolute; right:0; top:46px; width:min(400px, calc(100vw - 24px)); max-height:min(560px, 72vh);
  display:flex; flex-direction:column; z-index:520; border-radius:18px; overflow:hidden;
  background: rgba(255,255,255,.92); backdrop-filter: saturate(180%) blur(30px); -webkit-backdrop-filter: saturate(180%) blur(30px);
  border:1px solid rgba(255,255,255,.8); box-shadow: 0 24px 60px rgba(15,40,80,.26); }
.avisos-hd{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 14px; border-bottom:1px solid rgba(0,0,0,.06); }
.avisos-lista{ overflow-y:auto; }
.aviso{ display:flex; gap:11px; align-items:flex-start; padding:11px 14px; border-bottom:1px solid rgba(0,0,0,.05); cursor:pointer; transition:.14s; }
.aviso:hover{ background: rgba(0,131,111,.06); }
.aviso.leido{ opacity:.48; }
.aviso-ic{ width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
.aviso-t{ font:700 12.8px var(--font); color:var(--txt-1,#1d1d1f); }
.aviso-d{ font-size:12px; color:var(--txt-2,#6e6e73); margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.aviso-m{ font:700 12.5px var(--font); color:var(--txt-1,#1d1d1f); font-variant-numeric:tabular-nums; }
.aviso-f{ font-size:10.5px; color:var(--txt-3,#aeaeb2); }
:root[data-theme="dark"] .campana{ background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.12) !important; color:#e8eaed !important; }
:root[data-theme="dark"] .campana-n{ box-shadow:0 0 0 2px #16212e; }
:root[data-theme="dark"] .avisos-panel{ background: rgba(22,33,46,.95) !important; border-color: rgba(255,255,255,.10) !important; }
:root[data-theme="dark"] .aviso{ border-bottom-color: rgba(255,255,255,.07); }
:root[data-theme="dark"] .aviso:hover{ background: rgba(45,212,167,.10); }
@media (max-width:767px){ .avisos-panel{ position:fixed; right:8px; left:8px; top:64px; width:auto; } }

/* ===================== V5.3 · Asistencia ===================== */
.checa-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap:10px; }
.checa{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:18px 12px; border-radius:16px; cursor:pointer;
  border:1.5px solid rgba(0,0,0,.08); background: rgba(255,255,255,.72); font-family:var(--font); transition:.18s; }
.checa:hover:not(:disabled){ transform: translateY(-2px); box-shadow: 0 10px 26px rgba(15,40,80,.14); }
.checa.toca{ border-color:#00836F; box-shadow: 0 0 0 3px rgba(0,131,111,.16); }
.checa.hecho{ background: rgba(0,131,111,.10); border-color: rgba(0,131,111,.3); cursor:default; }
.checa:disabled{ opacity:.85; }
.checa-ic{ font-size:26px; }
.checa-t{ font-weight:700; font-size:13.5px; color:var(--txt-1,#1d1d1f); }
.checa-h{ font-size:12px; color:var(--txt-2,#6e6e73); font-variant-numeric:tabular-nums; }
.checa.hecho .checa-h{ font-weight:700; color:#00836F; }
:root[data-theme="dark"] .checa{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
:root[data-theme="dark"] .checa.hecho{ background: rgba(45,212,167,.14); border-color: rgba(45,212,167,.35); }
:root[data-theme="dark"] .checa.hecho .checa-h{ color:#2DD4A7; }
:root[data-theme="dark"] .checa.toca{ border-color:#2DD4A7; box-shadow: 0 0 0 3px rgba(45,212,167,.20); }

/* ===================== V5.4 · Reloj checador ===================== */
.reloj-card{ display:flex !important; align-items:center; gap:24px; flex-wrap:wrap; padding:20px 24px !important; margin-bottom:14px; }
.reloj-izq{ flex:1; min-width:210px; }
.reloj-lbl{ font:600 12.5px var(--font); color:var(--txt-2,#6e6e73); }
.reloj-t{ font:800 44px/1 var(--font); letter-spacing:-.04em; font-variant-numeric:tabular-nums; color:var(--txt-1,#1d1d1f); margin:4px 0 10px; }
.reloj-pb{ height:7px; border-radius:99px; background:rgba(118,118,128,.16); overflow:hidden; max-width:330px; }
.reloj-pf{ height:100%; border-radius:99px; transition:width .6s ease; }
.reloj-meta{ display:flex; gap:6px; flex-wrap:wrap; font-size:12px; color:var(--txt-2,#6e6e73); margin-top:8px; font-variant-numeric:tabular-nums; }
.reloj-btn{ display:flex; align-items:center; gap:12px; padding:17px 30px; border-radius:18px; border:none; cursor:pointer;
  font:700 16px var(--font); color:#fff; background:var(--c); box-shadow:0 8px 24px color-mix(in srgb, var(--c) 40%, transparent);
  transition:.18s; flex-shrink:0; }
.reloj-btn:hover:not(:disabled){ filter:brightness(1.07); transform:translateY(-2px); }
.reloj-btn:active:not(:disabled){ transform:scale(.98); }
.reloj-btn:disabled{ opacity:.6; cursor:default; box-shadow:none; }
.reloj-ico{ display:flex; } .reloj-ico svg{ width:26px; height:26px; }
:root[data-theme="dark"] .reloj-pb{ background:rgba(255,255,255,.12); }
@media (max-width:767px){
  .reloj-card{ flex-direction:column; align-items:stretch; gap:16px; padding:18px !important; }
  .reloj-t{ font-size:38px; } .reloj-pb{ max-width:none; }
  .reloj-btn{ width:100%; justify-content:center; padding:18px; }
}