/* GuardiánBot panel — SJ · solo #0050b3 #a9a9a9 #ffffff · build 20260703d */
:root {
  --brand-blue: #0050b3;
  --brand-gray: #a9a9a9;
  --brand-white: #ffffff;
  --brand-blue-rgb: 0, 80, 179;
  --brand-gray-rgb: 169, 169, 169;

  /* Oscuro: azul rey + gris + blanco (sin morados) */
  --bg: #002654;
  --bg2: #001f46;
  --card: #003875;
  --card2: #004494;
  --accent: var(--brand-blue);
  --accent2: var(--brand-gray);
  --accent3: var(--brand-blue);
  --accent4: var(--brand-gray);
  --accent-deep: #00408f;
  --text: var(--brand-white);
  --muted: var(--brand-gray);
  --warn: var(--brand-gray);
  --accent-rgb: var(--brand-blue-rgb);
  --accent2-rgb: var(--brand-gray-rgb);
  --sidebar: 220px;
  --surface-border: rgba(var(--brand-gray-rgb), 0.35);
  --input-bg: rgba(var(--brand-white-rgb, 255, 255, 255), 0.08);
  --shadow-card: 0 8px 28px rgba(0, 0, 0, 0.35);
}
html[data-theme="light"] {
  color-scheme: light;
  --bg: var(--brand-gray);
  --bg2: var(--brand-white);
  --card: var(--brand-white);
  --card2: var(--brand-white);
  --accent: var(--brand-blue);
  --accent2: var(--brand-gray);
  --accent3: var(--brand-blue);
  --accent4: var(--brand-gray);
  --accent-deep: #00408f;
  --text: var(--brand-blue);
  --muted: var(--brand-gray);
  --warn: var(--brand-gray);
  --surface-border: rgba(var(--brand-gray-rgb), 0.55);
  --input-bg: var(--brand-white);
  --shadow-card: 0 6px 20px rgba(var(--brand-blue-rgb), 0.12);
}
html:not([data-theme="light"]) { color-scheme: dark; }
* { box-sizing: border-box; }
html {
  font-size: 17.5px; /* base un poco más grande para lectura cómoda */
}
body {
  font-family:'Segoe UI',system-ui,sans-serif;
  font-size: 1rem;
  line-height: 1.45;
  background:var(--bg2);
  color:var(--text); margin:0; min-height:100vh;
}
.login {
  max-width:420px; margin:4rem auto;
  box-shadow:0 16px 48px rgba(0,0,0,.5);
  text-align:center;
}
.login .login-logo {
  width:100%; max-height:80px; object-fit:contain;
  background:transparent; padding:0; border-radius:0; margin-bottom:1rem;
}
h1 { font-size:1.35rem; margin:0 0 .5rem; }
h2 { font-size:1rem; color:var(--accent); margin:1rem 0 .5rem; letter-spacing:.04em; }
h3 { font-size:.85rem; margin:0 0 .75rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.card {
  background:var(--card);
  border-radius:16px; padding:1.1rem 1.25rem; margin-bottom:1rem;
  border:1px solid var(--surface-border);
  box-shadow:var(--shadow-card);
}
.help {
  background:rgba(var(--brand-blue-rgb),.1); border-left:4px solid var(--accent);
  padding:.75rem 1rem; border-radius:0 8px 8px 0; font-size:.92rem; line-height:1.5;
}
.help ol { margin:.5rem 0 0 1rem; padding:0; }
input,select,textarea,button {
  font:inherit; padding:.55rem .75rem; border-radius:10px;
  border:1px solid var(--surface-border); background:var(--input-bg);
  color:var(--text); width:100%; margin:.35rem 0 .65rem;
}
/* Selects con fondo sólido: los desplegables nativos no soportan fondos translúcidos
   y dejaban letras blancas sobre blanco. */
select {
  background-color:var(--card); color:var(--brand-white);
  border:1px solid var(--brand-gray);
}
select option, select optgroup {
  background-color:var(--card); color:var(--brand-white);
}
select option:disabled { color:var(--brand-gray); }
select[multiple] option:checked {
  background:var(--accent) linear-gradient(0deg, var(--accent), var(--accent));
  color:var(--brand-white);
}
html[data-theme="light"] select {
  background-color:var(--brand-white); color:var(--brand-blue);
  border-color:var(--brand-gray);
}
html[data-theme="light"] select option, html[data-theme="light"] select optgroup {
  background-color:var(--brand-white); color:var(--brand-blue);
}
html[data-theme="light"] select option:disabled { color:var(--brand-gray); }
html[data-theme="light"] select[multiple] option:checked {
  background:var(--accent) linear-gradient(0deg, var(--accent), var(--accent));
  color:var(--brand-white);
}
input::placeholder, textarea::placeholder { color:var(--brand-gray); opacity:.9; }
input[type="date"] { color-scheme:inherit; }
button {
  background:var(--accent);
  color:var(--brand-white); border:none; cursor:pointer; font-weight:700;
  width:auto; padding:.55rem 1.1rem; border-radius:10px;
}
button:hover { filter:brightness(1.08); }
button.secondary {
  background:transparent; color:var(--text);
  border:1px solid var(--brand-gray);
}
button.small { padding:.4rem .7rem; font-size:.85rem; }
table { width:100%; border-collapse:collapse; font-size:.92rem; }
th, td { text-align:left; padding:.55rem; border-bottom:1px solid var(--surface-border); }
th { color:var(--muted); font-weight:600; font-size:.8rem; text-transform:uppercase; }
.muted { color:var(--muted); font-size:.9rem; }
.panel { display:none; }
.panel.active { display:block; }

.app-shell { display:flex; min-height:100vh; }
.sidebar {
  width:var(--sidebar); flex-shrink:0;
  background:var(--accent);
  border-right:2px solid var(--brand-gray);
  padding:1.25rem .85rem; display:flex; flex-direction:column;
  min-height:100vh; position:relative; overflow:visible;
}
.sidebar nav { flex:1 1 auto; min-height:0; }
.brand-rainbow, .login-brand-title {
  font-size:1.1rem; font-weight:800; letter-spacing:.08em;
  text-transform:none;
  color:var(--brand-white);
  background:none;
  -webkit-text-fill-color:currentColor;
}
html[data-theme="light"] .brand-rainbow,
html[data-theme="light"] .login-brand-title {
  color:var(--brand-blue);
}
.login-brand-title { font-size:1.45rem; margin:0 0 .35rem; }
.sidebar-brand-block { margin-bottom:1.35rem; padding:0 .2rem; }
.logo-glow-wrap {
  position:relative; display:block; width:100%; margin-bottom:.55rem;
}
.logo-glow-wrap::before {
  content:''; position:absolute; inset:-6% -4%;
  background:radial-gradient(ellipse at 50% 50%, rgba(var(--accent-rgb),.35) 0%, transparent 68%);
  animation:logoGlowPulse 2.8s ease-in-out infinite alternate;
  pointer-events:none; z-index:0;
}
.logo-glow-wrap::after {
  content:''; position:absolute; left:-100%; top:0; width:55%; height:100%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.35), transparent);
  animation:logoShineSweep 4s ease-in-out infinite;
  pointer-events:none; z-index:2;
}
@keyframes logoGlowPulse {
  from { opacity:.55; transform:scale(.96); }
  to { opacity:1; transform:scale(1.04); }
}
@keyframes logoShineSweep {
  0%, 35% { left:-100%; opacity:0; }
  50% { opacity:1; }
  85%, 100% { left:140%; opacity:0; }
}
.brand-logo {
  width:100%; max-height:88px; object-fit:contain; object-position:left center;
  background:transparent; border:none; border-radius:0; padding:0;
  box-shadow:none; position:relative; z-index:1;
}
.sidebar-logo.logo-animated {
  max-height:72px; margin-bottom:0;
  animation:logoFloat 3.2s ease-in-out infinite;
  filter:drop-shadow(0 0 14px rgba(var(--accent-rgb),.45)) drop-shadow(0 0 18px rgba(var(--accent2-rgb),.2));
}
@keyframes logoFloat {
  0%, 100% { transform:translateY(0); }
  50% { transform:translateY(-5px); }
}
.brand-line-moving {
  height:3px; border-radius:999px; margin:.5rem .15rem 0;
  background:rgba(255,255,255,.07); overflow:hidden; position:relative;
}
.brand-line-moving::before {
  content:''; position:absolute; top:0; left:0; width:42%; height:100%;
  background:linear-gradient(90deg, transparent, var(--accent), var(--accent4), transparent);
  border-radius:999px;
  animation:lineMove 2.4s ease-in-out infinite;
  box-shadow:0 0 12px rgba(var(--accent-rgb),.5);
}
@keyframes lineMove {
  0% { transform:translateX(-130%); }
  100% { transform:translateX(340%); }
}
.login-logo-wrap { position:relative; margin-bottom:.85rem; }
.login-logo-wrap::before {
  content:''; position:absolute; inset:-8%;
  background:radial-gradient(circle, rgba(var(--accent-rgb),.28) 0%, transparent 70%);
  animation:logoGlowPulse 2.8s ease-in-out infinite alternate;
}
.login-logo { max-height:96px; margin-bottom:0; position:relative; z-index:1;
  animation:logoFloat 3.2s ease-in-out infinite;
  filter:drop-shadow(0 0 12px rgba(var(--accent-rgb),.4));
}
.password-field { position:relative; margin:.35rem 0 .65rem; }
.password-field input { margin:0; padding-right:2.75rem; }
.password-toggle {
  position:absolute; right:.55rem; top:50%; transform:translateY(-50%);
  background:transparent; border:none; color:var(--accent); cursor:pointer;
  font-size:.78rem; font-weight:600; padding:.25rem .4rem; width:auto; margin:0;
  border-radius:6px;
}
.password-toggle:hover { background:rgba(255,255,255,.08); filter:none; }
.password-toggle-label {
  display:flex; align-items:center; gap:.45rem; justify-content:flex-start;
  font-size:.82rem; color:var(--muted); margin:-.25rem 0 .75rem; cursor:pointer;
  user-select:none;
}
.password-toggle-label input { width:auto; margin:0; accent-color:var(--accent); }
.topbar-logo {
  max-height:42px; width:auto; max-width:220px; margin-right:.5rem; padding:0;
}
.nav-item {
  display:flex; align-items:center; gap:.6rem; width:100%; text-align:left;
  background:transparent; color:rgba(255,255,255,.82); border:none; border-radius:10px;
  padding:.65rem .75rem; margin-bottom:.25rem; font-size:.85rem; font-weight:600;
}
.nav-item:hover { background:rgba(255,255,255,.12); color:var(--brand-white); }
.nav-item.active {
  position:relative; overflow:hidden;
  background:var(--brand-white);
  color:var(--accent);
  border-left:3px solid var(--brand-gray);
  box-shadow:none;
}
.nav-icon {
  font-size:1.05rem; width:1.25rem; text-align:center; flex-shrink:0;
  transition:transform .25s ease, filter .25s ease;
}
.nav-item:hover .nav-icon { transform:scale(1.08); filter:drop-shadow(0 0 6px rgba(var(--accent-rgb),.4)); }
.nav-item.active .nav-icon {
  animation:navIconPulse 2s ease-in-out infinite;
  filter:drop-shadow(0 0 8px rgba(var(--accent-rgb),.55));
}
.nav-label {
  line-height:1.2; font-weight:600; letter-spacing:.04em;
  transition:color .2s ease, text-shadow .2s ease;
}
.nav-item:hover .nav-label { color:var(--brand-white); text-shadow:none; }
.nav-item.active .nav-label {
  color:var(--accent);
  -webkit-text-fill-color:currentColor;
  text-shadow:none;
}
.nav-item.active::after {
  content:''; position:absolute; left:0; bottom:0; width:100%; height:2px;
  background:var(--brand-gray);
  animation:none; opacity:1;
}
@keyframes navIconPulse {
  0%, 100% { transform:scale(1); opacity:1; }
  50% { transform:scale(1.12); opacity:.95; }
}
.nav-badge { margin-left:.35rem; font-size:.65rem; }
.main-wrap { flex:1; display:flex; flex-direction:column; min-width:0; }
.topbar {
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.75rem;
  padding:1rem 1.5rem;
  border-bottom:3px solid var(--brand-gray);
  background:var(--card);
  box-shadow:0 2px 12px rgba(0,0,0,.2);
}
.topbar-search {
  flex:1; max-width:360px; margin:0;
  background:var(--input-bg); border-radius:999px; padding:.5rem 1rem;
  border:1px solid var(--surface-border);
}
.breadcrumb { font-size:.75rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
.breadcrumb strong { color:var(--accent); }
.content { padding:1.25rem 1.5rem 2rem; flex:1; overflow:auto; background:var(--bg2); }
.dash-top { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:1rem; }
@media (max-width:1100px) { .dash-top { grid-template-columns:repeat(2,1fr); } }
@media (max-width:700px) {
  .dash-top { grid-template-columns:1fr; }
  .app-shell { flex-direction:column; }
  .sidebar {
    width:100%; min-height:0; order:2;
    position:fixed; bottom:0; left:0; right:0; z-index:9000;
    flex-direction:row; align-items:stretch;
    padding:.35rem .2rem calc(.35rem + env(safe-area-inset-bottom, 0px));
    border-right:none; border-top:1px solid rgba(255,255,255,.1);
    box-shadow:0 -8px 24px rgba(0,0,0,.45);
  }
  .sidebar-logo, .sidebar-brand, #dbInfoSide { display:none !important; }
  .sidebar nav {
    display:flex; flex:1; gap:.12rem;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    min-height:0;
  }
  .nav-item {
    flex:1 1 0; min-width:56px; max-width:92px;
    flex-direction:column; align-items:center; justify-content:center;
    gap:.12rem; padding:.42rem .2rem; margin:0;
    font-size:.62rem; border-left:none; text-align:center;
  }
  .nav-item.active {
    border-left:none; border-top:2px solid var(--accent);
    border-radius:10px 10px 0 0;
  }
  .nav-item .nav-icon {
    display:block !important; width:auto; font-size:1.15rem;
  }
  .nav-item .nav-label {
    display:block !important; white-space:nowrap; overflow:hidden;
    text-overflow:ellipsis; max-width:100%;
  }
  .nav-item[data-tab="cola"] { position:relative; }
  .nav-badge {
    display:inline-block !important; position:absolute;
    top:2px; right:4px; margin:0 !important; padding:.1rem .35rem;
    font-size:.58rem; line-height:1.1;
  }
  .main-wrap {
    padding-bottom:calc(78px + env(safe-area-inset-bottom, 0px));
  }
  .topbar { padding:.65rem .75rem; gap:.5rem; }
  .search-bar { flex:1 1 100%; max-width:none; order:3; }
  .topbar-logo { max-height:34px; }
  #userInfoTop { flex:1 1 100%; order:2; font-size:.7rem !important; }
  #dbInfo { display:none; }
}
@media (max-width:800px) {
  .cola-split { grid-template-columns:1fr !important; }
  .cola-detalle { position:static !important; max-height:none !important; }
  .topbar { padding:.75rem 1rem; }
  .content { padding:1rem; }
  table { font-size:.78rem; }
}
.gauge-card { text-align:center; min-height:140px; }
.gauge-wrap { height:90px; position:relative; max-width:140px; margin:0 auto; }
.chart-depth {
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.45));
}
.chart-depth canvas { transform: perspective(520px) rotateX(6deg); transform-origin: center 85%; }
.gauge-wrap.chart-depth::after {
  content:''; position:absolute; left:12%; right:12%; bottom:2px; height:10px;
  background:radial-gradient(ellipse, rgba(var(--accent-rgb),.25) 0%, transparent 70%);
  pointer-events:none; z-index:0;
}
.chart-wrap.chart-depth, .chart-wide.chart-depth { position:relative; }
.chart-card { overflow:visible; }
.gauge-val { font-size:1.5rem; font-weight:800; color:var(--accent); margin-top:-.25rem; text-shadow:0 2px 12px rgba(var(--accent-rgb),.35); }
.gauge-lbl { font-size:.7rem; color:var(--muted); }
.stat-big {
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  min-height:140px;
}
.stat-big .pct { font-size:2.5rem; font-weight:800; color:var(--accent); }
.dash-mid { display:grid; grid-template-columns:2fr 1fr; gap:1rem; margin-bottom:1rem; }
@media (max-width:900px) { .dash-mid { grid-template-columns:1fr; } }
.chart-wide { height:220px; position:relative; padding-bottom:.35rem; }
.dash-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:.65rem; margin-bottom:1rem; }
.kpi {
  background:var(--card); border-radius:12px; padding:.85rem; text-align:center;
  border:1px solid var(--surface-border);
}
.kpi .num { font-size:1.4rem; font-weight:800; color:var(--accent); }
.kpi .lbl { font-size:.68rem; color:var(--muted); margin-top:.2rem; }
.filtro-fechas {
  display:flex; flex-wrap:wrap; gap:.5rem .65rem; align-items:flex-end;
  margin-bottom:.75rem; padding-bottom:.65rem;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.filtro-fechas .filtro-grupo { display:flex; flex-direction:column; gap:.15rem; }
.filtro-fechas .filtro-grupo label { font-size:.7rem; color:var(--muted); margin:0; }
.filtro-fechas input[type="date"] { width:auto; min-width:9.5rem; margin:0; padding:.4rem .55rem; font-size:.8rem; }
.filtro-fechas .filtro-rango { flex:1 1 100%; font-size:.78rem; color:var(--accent); margin:0 0 .25rem; }
.filtro-fechas .preset-btns { display:flex; flex-wrap:wrap; gap:.35rem; }
.bar-row { display:flex; align-items:center; gap:.5rem; margin:.4rem 0; font-size:.82rem; }
.bar-row .bar {
  flex:1; height:14px; border-radius:8px; overflow:visible; position:relative;
  background:linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.25) 100%);
  box-shadow: inset 0 3px 6px rgba(0,0,0,.55), inset 0 -1px 0 rgba(255,255,255,.08);
}
.bar-row .fill {
  height:100%; border-radius:8px; position:relative; top:-1px;
  box-shadow: 0 4px 10px rgba(0,0,0,.4), inset 0 2px 0 rgba(255,255,255,.35);
  transition: width .6s ease-out;
}
.dash-bottom { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1rem; }
@media (max-width:1000px) { .dash-bottom { grid-template-columns:1fr; } }
.steps { counter-reset: step; list-style:none; padding:0; margin:0; }
.steps li { position:relative; padding-left:2rem; margin-bottom:.75rem; font-size:.9rem; }
.steps li::before { counter-increment:step; content:counter(step); position:absolute; left:0; width:1.4rem; height:1.4rem; background:var(--accent); color:#fff; border-radius:50%; text-align:center; line-height:1.4rem; font-size:.75rem; font-weight:700; }
#err { color:#f4212e; }
.grupo-item { display:flex; justify-content:space-between; align-items:center; padding:.5rem 0; border-bottom:1px solid var(--surface-border); gap:.5rem; flex-wrap:wrap; }
.tag { display:inline-block; background:rgba(var(--brand-blue-rgb),.18); color:var(--text); padding:.15rem .5rem; border-radius:4px; font-size:.75rem; }
.msg-box { padding:1rem 1.25rem; border-radius:10px; margin:1rem 0; font-size:1rem; font-weight:600; display:none; animation:fadeIn .3s; }
.msg-box.ok { display:block; background:rgba(var(--brand-blue-rgb),.14); border:2px solid var(--accent); color:#d6e8ff; }
.msg-box.err { display:block; background:#3d1515; border:2px solid #f4212e; color:#ffb4b4; }
.msg-box.info { display:block; background:rgba(var(--brand-blue-rgb),.1); border:2px solid var(--accent4); color:#cce4ff; }
.msg-box.warn { display:block; background:#3d3015; border:2px solid var(--warn); color:#ffe6a8; }
.camp-actions { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-top:.75rem; }
.camp-seg { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin:.5rem 0; }
.camp-seg select { width:auto; min-width:200px; margin:0; }
#toast { position:fixed; top:1rem; right:1rem; z-index:9999; max-width:360px; padding:1rem 1.25rem; border-radius:12px; font-weight:600; box-shadow:0 8px 32px rgba(0,0,0,.5); display:none; }
#toast.ok { background:var(--accent); color:var(--brand-white); }
#toast.err { background:#f4212e; color:#fff; }
@keyframes fadeIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
tr.row-new { background:rgba(var(--brand-blue-rgb), .15) !important; }
button:disabled { opacity:.6; cursor:wait; }
.hero-banner { width:100%; max-height:120px; object-fit:contain; object-position:left center;
  border-radius:12px; margin-bottom:1rem; display:block; border:1px solid var(--surface-border);
  background:var(--brand-white); padding:.75rem 1.25rem; }
.charts-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; margin-bottom:1rem; }
@media (max-width:1200px) { .charts-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:700px) { .charts-grid { grid-template-columns:repeat(2,1fr); } }

/* Dashboard — acentos institucionales SJ */
#dashboard .dash-hero { margin-bottom:1.15rem; padding:0 .1rem; }
#dashboard .dash-hero-title { font-size:1.4rem; margin:0 0 .5rem; font-weight:800; }
#dashboard .card {
  position:relative; overflow:hidden;
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  border:1px solid rgba(var(--accent-rgb),.12);
}
#dashboard .card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px; z-index:1;
  background:var(--accent);
  animation:none; opacity:1;
}
#dashboard .card::after {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(ellipse at 20% 0%, rgba(var(--accent-rgb),.08) 0%, transparent 55%);
  opacity:.85;
}
#dashboard .card:hover {
  transform:translateY(-4px);
  border-color:rgba(var(--accent-rgb),.28);
  box-shadow:0 14px 42px rgba(var(--accent-rgb),.12), 0 10px 36px rgba(0,0,0,.45);
}
#dashboard .card:hover::before { opacity:1; }
#dashboard .card > h3,
#dashboard .dash-section-title {
  position:relative; z-index:2;
  font-size:.82rem; text-transform:uppercase; letter-spacing:.09em;
  margin:0 0 .75rem; font-weight:700;
  color:var(--accent);
  background:none;
  -webkit-text-fill-color:currentColor;
}
#dashboard .gauge-val,
#dashboard .stat-big .pct,
#dashboard .kpi .num {
  position:relative; z-index:2;
  font-weight:800;
  color:var(--accent);
  background:none;
  -webkit-text-fill-color:currentColor;
  text-shadow:none;
  filter:none;
}
#dashboard .gauge-val { font-size:1.55rem; margin-top:-.2rem; }
#dashboard .stat-big .pct { font-size:2.55rem; line-height:1.1; }
#dashboard .kpi {
  position:relative; overflow:hidden;
  border:1px solid var(--surface-border);
  background:var(--card);
  transition:transform .22s ease, box-shadow .22s ease;
}
#dashboard .kpi::before {
  content:''; position:absolute; bottom:0; left:0; width:100%; height:3px;
  background:var(--accent);
  animation:none; opacity:1;
}
#dashboard .kpi:hover {
  transform:scale(1.04);
  box-shadow:0 8px 24px rgba(var(--accent-rgb),.18);
}
#dashboard .gauge-card .gauge-wrap { animation:logoFloat 4s ease-in-out infinite; }
#dashboard .chart-card { min-height:200px; }
#dashboard .filtro-fechas {
  border-bottom-color:var(--surface-border);
  background:var(--card);
  border-radius:10px; padding:.65rem .75rem .75rem;
}
#dashboard .filtro-rango {
  color:var(--accent);
  background:none;
  -webkit-text-fill-color:currentColor;
  font-weight:700;
}
#dashboard .bar-row .fill {
  box-shadow:0 4px 12px rgba(0,0,0,.4), 0 0 14px rgba(var(--accent-rgb),.25), inset 0 2px 0 rgba(255,255,255,.35);
}
@media (prefers-reduced-motion: reduce) {
  #dashboard .card::before, #dashboard .kpi::before, #dashboard .card > h3,
  #dashboard .gauge-val, #dashboard .kpi .num, #dashboard .gauge-card .gauge-wrap {
    animation:none;
  }
  #dashboard .card:hover, #dashboard .kpi:hover { transform:none; }
}
.chart-card { text-align:center; }
.chart-wrap { position:relative; height:180px; max-width:200px; margin:0 auto; }
.modal-bg { position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:10000; display:flex; align-items:center; justify-content:center; padding:1rem; }
.modal-box { background:var(--card); border-radius:12px; padding:1.25rem; max-width:420px; width:100%; border:1px solid var(--surface-border); }
.modal-box.modal-redirigir { max-width:min(520px, 96vw); }
.modal-box.modal-usuario { max-width:min(480px, 96vw); }
select.areas-panel-select {
  width: 100%;
  max-width: 100%;
  margin: 0.35rem 0 0;
  min-height: 10rem;
  font-size: 0.85rem;
}
select.areas-panel-select option { padding: 0.2rem 0.35rem; }
#redirigirArea {
  font-size:.88rem; max-height:min(320px, 50vh); line-height:1.35;
}
#redirigirArea option.redirigir-sep {
  font-weight:700; color:var(--accent); background:rgba(var(--accent-rgb),.08);
}
html[data-theme="light"] #redirigirArea option.redirigir-sep {
  color:var(--accent); background:rgba(var(--brand-blue-rgb), .08);
}
#redirigirArea option.redirigir-item { padding-left:.25rem; }
.modal-actions { display:flex; gap:.5rem; margin-top:1rem; flex-wrap:wrap; }
.guia-asistente {
  position:fixed; left:10px; bottom:12px; margin:0; padding:0;
  display:flex; flex-direction:column; align-items:center; z-index:9990;
  pointer-events:none;
}
.guia-asistente > * { pointer-events:auto; }
.guia-mascota-btn {
  position:relative; width:76px; height:76px; padding:0; margin:0;
  border:2px solid var(--accent); border-radius:50%; overflow:visible;
  background:linear-gradient(145deg,var(--card2),var(--bg)); cursor:pointer;
  box-shadow:0 6px 20px rgba(var(--accent-rgb),.25);
  animation:guiaFlotar 2.6s ease-in-out infinite;
}
.guia-mascota-btn:hover { filter:brightness(1.12); animation-play-state:paused; }
.guia-mascota-btn.abierto { border-color:var(--accent4); animation:none; }
.guia-mascota-btn.atencion { animation:guiaFlotar 1.4s ease-in-out infinite, guiaBrillo 1.4s ease-in-out infinite; }
.guia-mascota-btn img,
.guia-mascota-btn video {
  width:100%; height:100%; object-fit:cover; border-radius:50%; display:block;
  background:#fff;
  pointer-events:none;
}
.guia-mascota-hint {
  position:absolute; top:-4px; right:-4px; width:18px; height:18px;
  background:var(--accent); color:var(--brand-white); font-size:.65rem; font-weight:800;
  border-radius:50%; line-height:18px; text-align:center;
  animation:guiaPulso 1.5s ease-in-out infinite;
}
.guia-mascota-btn.abierto .guia-mascota-hint { display:none; }
@keyframes guiaFlotar {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-6px); }
}
@keyframes guiaBrillo {
  0%,100% { box-shadow:0 6px 20px rgba(var(--accent-rgb),.25); }
  50% { box-shadow:0 8px 28px rgba(var(--accent-rgb),.4); }
}
@keyframes guiaPulso {
  0%,100% { transform:scale(1); opacity:1; }
  50% { transform:scale(1.15); opacity:.85; }
}
.guia-secciones {
  display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:.6rem;
}
.guia-sec-btn {
  font-size:.68rem; padding:.28rem .55rem; margin:0; line-height:1.2;
  background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.12);
  border-radius:999px; color:var(--muted); cursor:pointer; font-weight:600;
}
.guia-sec-btn:hover { color:var(--text); border-color:var(--accent); }
.guia-sec-btn.activa {
  background:rgba(var(--accent-rgb),.18); border-color:var(--accent); color:var(--accent);
}
.guia-panel {
  position:fixed; left:92px; bottom:12px; width:min(320px, calc(100vw - 108px));
  max-height:min(420px, calc(100vh - 24px)); overflow:auto;
  background:linear-gradient(160deg,var(--card2),var(--card)); border:1px solid rgba(var(--accent-rgb),.35);
  border-radius:14px; padding:.85rem 1rem; text-align:left;
  box-shadow:0 16px 48px rgba(0,0,0,.55);
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateX(-10px) scale(0.95);
  transition:opacity .25s ease, transform .25s ease, visibility .25s;
  z-index:9991;
}
.guia-panel.abierto { opacity:1; visibility:visible; pointer-events:auto; transform:translateX(0) scale(1); }
.guia-panel h3 { margin:0 0 .4rem; font-size:.95rem; color:var(--accent); }
.guia-panel .guia-texto { font-size:.82rem; line-height:1.5; color:var(--muted); margin:0 0 .65rem; }
.guia-panel .guia-texto strong { color:var(--text); }
.guia-pasos { list-style:none; margin:0 0 .65rem; padding:0; }
.guia-pasos li {
  font-size:.78rem; padding:.35rem .45rem; margin-bottom:.28rem; border-radius:6px;
  background:rgba(0,0,0,.25); border-left:3px solid var(--accent4); line-height:1.4;
}
.guia-pasos li:hover { background:rgba(var(--accent-rgb),.1); }
.guia-panel-acciones { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.5rem; }
.guia-panel-acciones button { font-size:.75rem; padding:.4rem .7rem; margin:0; }
.guia-check { display:flex; align-items:flex-start; gap:.4rem; font-size:.72rem; color:var(--muted); margin-top:.45rem; }
.guia-check input { width:auto; margin:.15rem 0 0; flex-shrink:0; }
.guia-cerrar-panel {
  position:absolute; top:.35rem; right:.4rem; background:transparent; border:none;
  color:var(--muted); font-size:1.1rem; cursor:pointer; padding:.15rem .35rem; width:auto; margin:0;
}
.guia-cerrar-panel:hover { color:var(--text); }
@media (min-width:701px) {
  .guia-asistente { left:calc(var(--sidebar) - 80px); bottom:14px; }
  .guia-panel { left:calc(var(--sidebar) + 8px); bottom:14px; }
}
@media (max-width:700px) {
  .guia-asistente { left:6px; bottom:calc(78px + env(safe-area-inset-bottom, 0px)); }
  .guia-panel { left:88px; bottom:calc(78px + env(safe-area-inset-bottom, 0px)); width:min(280px, calc(100vw - 100px)); }
}
.search-bar { display:flex; gap:.5rem; flex:1; max-width:520px; align-items:center; flex-wrap:wrap; }
.search-bar input, .search-bar select { margin:0; width:auto; flex:1; min-width:140px; }
#searchResults { display:none; margin-bottom:1rem; max-height:320px; overflow:auto; }
#searchResults.open { display:block; }
.search-hit { padding:.5rem 0; border-bottom:1px solid rgba(255,255,255,.06); font-size:.82rem; }
.informes-grid { display:flex; flex-wrap:wrap; gap:.5rem; }
.theme-toggle-btn { white-space:nowrap; min-width:5.5rem; }

html[data-theme="light"] body {
  background:var(--brand-gray);
}
html[data-theme="light"] .sidebar {
  background:var(--brand-white);
  border-right:2px solid var(--brand-blue);
}
html[data-theme="light"] .nav-item {
  color:var(--brand-blue);
}
html[data-theme="light"] .nav-item .nav-label,
html[data-theme="light"] .nav-item .nav-icon {
  color:var(--brand-blue);
}
html[data-theme="light"] .nav-item:hover {
  background:rgba(var(--brand-blue-rgb),.08);
  color:var(--brand-blue);
}
html[data-theme="light"] .nav-item:hover .nav-label,
html[data-theme="light"] .nav-item:hover .nav-icon {
  color:var(--brand-blue);
  text-shadow:none;
}
html[data-theme="light"] .nav-item.active {
  background:var(--brand-blue);
  color:var(--brand-white);
  border-left-color:var(--brand-gray);
}
html[data-theme="light"] .nav-item.active .nav-label,
html[data-theme="light"] .nav-item.active .nav-icon {
  color:var(--brand-white);
}
html[data-theme="light"] .topbar {
  background:var(--brand-blue);
  border-bottom-color:var(--brand-gray);
  box-shadow:0 2px 10px rgba(var(--brand-blue-rgb),.25);
}
html[data-theme="light"] .topbar .breadcrumb,
html[data-theme="light"] .topbar .breadcrumb strong,
html[data-theme="light"] .topbar .muted,
html[data-theme="light"] .topbar #userInfoTop,
html[data-theme="light"] .topbar #dbInfo {
  color:var(--brand-white) !important;
}
html[data-theme="light"] .content {
  background:var(--brand-white);
}
html[data-theme="light"] button.secondary {
  background:var(--brand-white); color:var(--brand-blue);
  border:1px solid var(--brand-gray);
}
html[data-theme="light"] .topbar button.secondary {
  background:transparent; color:var(--brand-white);
  border-color:rgba(255,255,255,.65);
}
html[data-theme="light"] .help {
  background:rgba(var(--brand-blue-rgb),.08); border-left-color:var(--accent); color:var(--text);
}
html[data-theme="light"] th, html[data-theme="light"] td {
  border-bottom-color:var(--surface-border);
}
html[data-theme="light"] .kpi {
  background:var(--input-bg); border-color:var(--surface-border);
}
html[data-theme="light"] .sidebar .nav-item:hover {
  background:rgba(0,0,0,.06); color:var(--text);
}
html[data-theme="light"] .sidebar .nav-item.active {
  background:linear-gradient(90deg, rgba(var(--brand-blue-rgb), .14), rgba(var(--brand-gray-rgb), .12));
  color:var(--accent); border-left-color:var(--accent);
}
.sidebar #dbInfoSide { color:rgba(255,255,255,.75); }
.breadcrumb strong { color:var(--brand-white); }
html[data-theme="light"] .sidebar #dbInfoSide { color:var(--brand-gray); }
html[data-theme="light"] .breadcrumb strong { color:var(--brand-white); }
html[data-theme="light"] .topbar-search {
  background:var(--brand-white); color:var(--brand-blue);
  border-color:var(--brand-gray);
}
html[data-theme="light"] .msg-box.ok {
  background:var(--brand-white); color:var(--brand-blue); border-color:var(--brand-blue);
}
html[data-theme="light"] .msg-box.info {
  background:var(--brand-white); color:var(--brand-blue); border-color:var(--brand-gray);
}
html[data-theme="light"] .msg-box.warn {
  background:#fff8e0; color:#5c4a00;
}
html[data-theme="light"] .tag {
  background:rgba(var(--brand-blue-rgb),.1); color:var(--text);
}
html[data-theme="light"] .grupo-item {
  border-bottom-color:var(--surface-border);
}
html[data-theme="light"] .modal-box {
  border-color:var(--surface-border);
}
html[data-theme="light"] .guia-mascota-btn {
  background:linear-gradient(145deg, var(--brand-white), var(--bg2));
  box-shadow:0 6px 20px rgba(var(--brand-blue-rgb), .2);
}
html[data-theme="light"] .guia-panel {
  background:linear-gradient(160deg, var(--brand-white), var(--card2));
  border-color:rgba(var(--brand-blue-rgb), .25);
  box-shadow:0 16px 48px rgba(0, 80, 179, .12);
}
html[data-theme="light"] .guia-sec-btn {
  background:rgba(0,0,0,.04); border-color:var(--surface-border);
}
html[data-theme="light"] .bar-row .bar {
  background:linear-gradient(180deg,#d8dee8 0%,#eef2f7 100%);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.08);
}
html[data-theme="light"] tr.row-new {
  background:rgba(var(--brand-blue-rgb), .08) !important;
}
html[data-theme="light"] .password-toggle:hover {
  background:rgba(0,0,0,.06);
}
@media (max-width:700px) {
  html[data-theme="light"] .sidebar {
    border-top-color:var(--surface-border);
    box-shadow:0 -8px 24px rgba(15,23,42,.1);
  }
  html[data-theme="light"] .sidebar .nav-item {
    color:var(--muted);
  }
  html[data-theme="light"] .sidebar .nav-item.active {
    color:var(--accent);
    border-top-color:var(--accent);
  }
}
.log-tabs { display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:.75rem; }
.log-tab-btn.active { background:var(--accent); color:var(--brand-white); border:none; }
.log-pre {
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.78rem; line-height:1.45; white-space:pre-wrap; word-break:break-word;
  max-height:min(520px, 58vh); overflow:auto;
  background:rgba(0,0,0,.25); padding:.75rem; border-radius:10px;
  border:1px solid rgba(255,255,255,.08); margin:0;
}
html[data-theme="light"] .log-pre { background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.08); }
.log-tipo { font-size:.72rem; padding:.12rem .4rem; border-radius:6px; background:rgba(var(--accent-rgb),.12); color:var(--accent); white-space:nowrap; }
.log-view { display:none; }
.log-view.active { display:block; }

.camp-modo-box {
  margin: .5rem 0 .75rem;
  padding: .85rem 1rem;
  border-radius: 10px;
  border: 1px solid rgba(var(--accent-rgb), .28);
  background: rgba(var(--accent-rgb), .06);
}
.camp-modo-select {
  font-size: .95rem;
  font-weight: 600;
  margin: .25rem 0 .35rem;
  border: 2px solid rgba(var(--accent-rgb), .35);
  background: var(--input-bg);
}
.camp-modo-hint { font-size: .8rem; margin: 0; line-height: 1.45; }

.seg-card { margin-bottom: 1rem; }
.seg-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: .65rem;
  margin-bottom: .65rem;
}
.seg-card-title { margin: 0; font-size: 1.05rem; color: var(--text); }
.seg-card-meta { font-size: .8rem; color: var(--muted); margin: .2rem 0 0; }
.seg-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
}
.seg-card-actions button { margin: 0; }
.seg-card.seg-activo {
  border-color: rgba(var(--accent-rgb), .45);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .2);
}
.seg-select-activo {
  border: 2px solid var(--accent) !important;
  font-weight: 600;
}
.seg-activo-banner {
  margin: .25rem 0 .85rem;
  padding: .55rem .75rem;
  border-radius: 10px;
  border: 1px solid var(--surface-border);
  background: var(--input-bg);
  font-size: .9rem;
}
.seg-activo-banner.ok {
  border-color: var(--accent);
  background: rgba(var(--brand-blue-rgb), .12);
  color: var(--text);
}
.seg-bloque-celular {
  padding: .85rem;
  border-radius: 12px;
  border: 1px dashed var(--brand-gray);
  background: rgba(var(--brand-blue-rgb), .06);
  margin-bottom: .5rem;
}
.seg-bloque-celular.listo {
  border-style: solid;
  border-color: var(--accent);
}

/* Separadores, cola y acentos corporativos */
.panel-divider { border:none; border-top:1px solid var(--surface-border); margin:1rem 0; }
.table-head-brand { text-align:left; background:rgba(var(--brand-blue-rgb),.12); }
.cola-split {
  display:grid; grid-template-columns:1fr;
  gap:1rem; align-items:start;
}
.cola-detalle,
.cola-detalle-full {
  position:relative; top:auto; width:100%;
  max-height:none; overflow:visible;
  padding:.85rem 1rem; border-radius:10px;
  background:rgba(var(--brand-blue-rgb),.06);
  border:1px solid var(--surface-border);
  margin-bottom:1rem;
}
#colaTrazaPanel {
  max-height:min(52vh,520px); overflow:auto; margin-bottom:.65rem;
  padding:.75rem; border-radius:8px; font-size:.9rem; line-height:1.5;
  background:rgba(0,0,0,.22); border:1px solid var(--surface-border);
}
.cola-historial-titulo {
  margin:0 0 .5rem; font-size:1rem; color:var(--accent4);
}
.cola-historial-wrap {
  max-height:min(42vh,420px); overflow:auto;
  border:1px solid var(--surface-border); border-radius:8px;
}
.cola-traza { margin-bottom:.5rem; padding:.45rem .55rem; border-radius:6px; }
.cola-traza-usuario { background:rgba(var(--brand-blue-rgb),.14); }
.cola-traza-asesor { background:rgba(var(--brand-gray-rgb),.16); border-left:3px solid var(--accent4); }
.cola-traza-sistema { background:rgba(var(--brand-gray-rgb),.1); border-left:3px solid var(--accent2); }
.camp-waba-setup {
  margin-bottom:.5rem; padding:.5rem; border-radius:6px;
  border:1px solid rgba(var(--brand-gray-rgb),.4);
  background:rgba(var(--brand-blue-rgb),.06);
}
.qr-img {
  background:var(--brand-white); border-radius:8px; padding:8px; max-width:100%;
}
html[data-theme="light"] .cola-detalle { background:rgba(var(--brand-blue-rgb),.04); }
html[data-theme="light"] #colaTrazaPanel { background:rgba(0,0,0,.04); }
html[data-theme="light"] .cola-traza-asesor { background:rgba(var(--brand-gray-rgb),.12); }
html[data-theme="light"] .cola-traza-sistema { background:rgba(var(--brand-gray-rgb),.08); }