:root{
  --azul: #1A2744;
  --azul-soft: #24365e;
  --bg: #F5F7FA;
  --card: #FFFFFF;
  --line: #E3E8F0;
  --texto: #1A2744;
  --texto-secundario: #5B6B85;
  --texto-terciario: #8B96AC;
  --positivo: #0E8F7A;
  --positivo-soft: #E4F5F1;
  --neutral: #B8860B;
  --neutral-soft: #FBF1DC;
  --negativo: #C0392B;
  --negativo-soft: #FBE6E3;
  --shadow: 0 1px 2px rgba(26,39,68,0.05), 0 6px 20px -10px rgba(26,39,68,0.15);
  --radius: 12px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--texto);
  font-family:'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* ---------- login (mantiene estilo previo, se reutiliza) ---------- */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px;background:var(--bg);}
.login-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:36px 32px;width:100%;max-width:360px;}
.eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--azul);font-weight:700;margin:0 0 6px;}
.login-card h1{font-size:20px;margin:0 0 22px;font-weight:800;color:var(--azul);}
.login-form{display:flex;flex-direction:column;gap:14px;}
.login-form label{font-size:13px;color:var(--texto-secundario);display:flex;flex-direction:column;gap:6px;}
.login-form input{font:inherit;padding:10px 12px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--texto);}
.login-form button{margin-top:8px;padding:11px;border:none;border-radius:8px;background:var(--azul);color:#fff;font-weight:700;font-size:14px;cursor:pointer;}
.login-form button:hover{background:var(--azul-soft);}
.login-error{background:var(--negativo-soft);color:var(--negativo);padding:9px 12px;border-radius:8px;font-size:13px;margin:0 0 14px;}

/* ---------- header ejecutivo ---------- */
.topbar{background:var(--azul);color:#fff;}
.topbar-inner{
  max-width:1280px;margin:0 auto;padding:20px 28px;
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.brand h1{font-size:26px;margin:0;font-weight:800;letter-spacing:-0.01em;}
.brand .subtitle{margin:4px 0 0;font-size:14px;color:rgba(255,255,255,0.72);}
.topbar-right{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.estado-conexion{display:flex;align-items:center;gap:7px;font-size:13px;color:rgba(255,255,255,0.85);}
.estado-conexion .dot{width:8px;height:8px;border-radius:50%;background:var(--texto-terciario);flex:none;}
.estado-conexion.ok .dot{background:#3DDC97;}
.estado-conexion.stale .dot{background:var(--neutral);}
.estado-conexion.error .dot{background:#F2735C;}
.topbar a.logout{font-size:13px;color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,0.3);padding:7px 14px;border-radius:7px;}
.topbar a.logout:hover{background:rgba(255,255,255,0.1);}
.banner-aviso{
  background:var(--neutral-soft);color:#7a5b06;font-size:13px;padding:9px 28px;
  border-top:1px solid rgba(0,0,0,0.05);
}
.banner-aviso.banner-error{background:var(--negativo-soft);color:#7d241a;}

/* ---------- layout ---------- */
.wrap{max-width:1280px;margin:0 auto;padding:24px 28px 90px;}

/* ---------- filtros ---------- */
.filtros-bar{
  display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 20px;margin-bottom:24px;box-shadow:var(--shadow);
}
.filtro{display:flex;flex-direction:column;gap:5px;}
.filtro label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--texto-secundario);font-weight:600;}
.filtro select,.filtro input{
  font:inherit;font-size:13.5px;padding:8px 10px;border-radius:8px;border:1px solid var(--line);
  background:var(--bg);color:var(--texto);min-width:150px;
}
.filtro-custom{flex-direction:row;align-items:flex-end;gap:8px;}
.filtro-custom label{margin-right:2px;}
.filtro-periodo-analizado{
  margin-left:auto;font-size:12.5px;color:var(--texto-secundario);align-self:center;
  font-style:italic;
}

/* ---------- estados: loading / error / vacío ---------- */
.skeleton-wrap{padding:8px 0;}
.skeleton{background:linear-gradient(90deg,#EBEEF3 25%,#F5F7FA 37%,#EBEEF3 63%);background-size:400% 100%;
  animation:skeleton-shimmer 1.4s ease infinite;border-radius:var(--radius);}
@keyframes skeleton-shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}
.skeleton-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-bottom:20px;}
.skeleton-card{height:170px;}
.skeleton-chart{height:320px;}

.estado-mensaje{border-radius:var(--radius);padding:18px 22px;font-size:14px;margin-bottom:22px;}
.estado-mensaje--error{background:var(--negativo-soft);color:#7d241a;}
.estado-mensaje--error p{margin:6px 0 0;font-size:13px;opacity:.9;}
.estado-mensaje--vacio{background:var(--card);border:1px dashed var(--line);color:var(--texto-secundario);text-align:center;}

/* ---------- secciones ---------- */
section.block{margin-bottom:38px;}
section.block h2{font-size:18px;margin:0 0 4px;font-weight:800;color:var(--azul);}
.fuente-tag{
  display:inline-block;vertical-align:middle;margin-left:8px;
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--texto-terciario);background:var(--bg);
  padding:2px 8px;border-radius:999px;
}
.fuente-tag--alerta{color:var(--neutral);background:var(--neutral-soft);}
.benchmark-subtitulo{font-size:14px;font-weight:700;color:var(--azul);margin:0 0 2px;}
.block-head-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:14px;}
.block-head-row h2{margin:0;}
.block-hint{font-size:12px;color:var(--texto-terciario);}

/* ---------- tarjetas de cuenta ---------- */
.cuentas-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;}
.cuenta-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow);transition:box-shadow .2s ease,transform .2s ease;}
.cuenta-card:hover{box-shadow:0 2px 4px rgba(26,39,68,0.06),0 12px 28px -12px rgba(26,39,68,0.22);transform:translateY(-1px);}
.cuenta-card h3{margin:0 0 14px;font-size:16px;font-weight:700;color:var(--azul);display:flex;align-items:center;gap:8px;}
.swatch{display:inline-block;width:10px;height:10px;border-radius:50%;flex:none;}
.red-block{display:flex;justify-content:space-between;align-items:flex-start;padding:11px 0;border-top:1px solid var(--line);}
.red-block:first-of-type{border-top:none;padding-top:0;}
.red-block .label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--texto-secundario);font-weight:700;}
.red-block .metric{font-size:28px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--texto);letter-spacing:-0.01em;}
.red-block .sub{font-size:12px;color:var(--texto-secundario);margin-top:2px;}
.badge{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;font-weight:700;padding:3px 8px;border-radius:999px;font-variant-numeric:tabular-nums;white-space:nowrap;}
.badge.up{background:var(--positivo-soft);color:var(--positivo);}
.badge.down{background:var(--negativo-soft);color:var(--negativo);}
.badge.flat{background:var(--neutral-soft);color:var(--neutral);}
.badge.na{background:#EEF1F6;color:var(--texto-terciario);}

/* ---------- resumen de desempeño ---------- */
.resumen-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;}
.resumen-card{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--azul);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);transition:box-shadow .2s ease,transform .2s ease;}
.resumen-card:hover{box-shadow:0 2px 4px rgba(26,39,68,0.06),0 12px 28px -12px rgba(26,39,68,0.22);transform:translateY(-1px);}
.resumen-card .rlabel{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--texto-secundario);font-weight:700;margin-bottom:8px;}
.resumen-card .rcuenta{font-size:15px;font-weight:800;color:var(--azul);margin-bottom:4px;}
.resumen-card .rvalor{font-size:13px;color:var(--texto-secundario);}
.resumen-card.negativo{border-left-color:var(--negativo);}
.resumen-card.positivo{border-left-color:var(--positivo);}

/* ---------- gráficos ---------- */
.chart-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;box-shadow:var(--shadow);}

.tabs{display:flex;gap:4px;background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:3px;}
.tab-btn{
  font:inherit;font-size:12.5px;font-weight:600;color:var(--texto-secundario);
  background:none;border:none;padding:6px 16px;border-radius:7px;cursor:pointer;
  min-height:44px;display:inline-flex;align-items:center;
  transition:background .2s ease,color .2s ease;
}
.tab-btn.is-active{background:var(--azul);color:#fff;}
.tab-btn:hover:not(.is-active){background:var(--line);}

.evolucion-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.evolucion-controls select{font:inherit;font-size:13px;padding:7px 10px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--texto);}

/* ---------- top posts ---------- */
.top-posts{display:flex;flex-direction:column;gap:10px;}
.top-post{
  display:flex;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:14px 16px;align-items:flex-start;box-shadow:var(--shadow);
}
.top-post .rank{
  flex:none;width:30px;height:30px;border-radius:50%;background:var(--azul);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:800;
}
.top-post .body{flex:1;min-width:0;}
.top-post .meta{font-size:11.5px;color:var(--texto-secundario);margin-bottom:4px;display:flex;gap:8px;flex-wrap:wrap;}
.top-post .plataforma-tag{
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  padding:1px 6px;border-radius:5px;background:var(--bg);color:var(--texto-secundario);
}
.top-post .msg{font-size:13.5px;color:var(--texto);margin:0 0 8px;}
.top-post .stats{display:flex;gap:16px;font-size:12.5px;color:var(--texto-secundario);}
.top-post .stats b{color:var(--texto);font-variant-numeric:tabular-nums;}
.top-post .ver-link{font-size:12.5px;font-weight:600;color:var(--azul);text-decoration:none;white-space:nowrap;}
.top-post .ver-link:hover{text-decoration:underline;}

/* ---------- balance IA editorial ---------- */
.ia-report{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:8px 8px;box-shadow:var(--shadow);overflow:hidden;}
.ia-report .ia-fecha{font-size:12px;color:var(--texto-secundario);padding:14px 22px 0;}
.ia-block{display:flex;gap:14px;padding:16px 22px;border-top:1px solid var(--line);}
.ia-block:first-of-type{border-top:none;}
.ia-block .icon{flex:none;font-size:18px;line-height:1.4;}
.ia-block .texto{font-size:14px;color:var(--texto);white-space:pre-wrap;}
.ia-block .texto b, .ia-block .texto strong{color:var(--azul);}
.ia-empty{padding:22px;color:var(--texto-secundario);font-size:13.5px;}

/* ---------- tabla estado ---------- */
.table-wrap{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow-x:auto;}
table.tabla-estado{width:100%;border-collapse:collapse;font-size:13.5px;}
table.tabla-estado th{
  text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--texto-secundario);
  padding:12px 16px;border-bottom:1px solid var(--line);white-space:nowrap;
}
table.tabla-estado td{padding:12px 16px;border-bottom:1px solid var(--line);color:var(--texto);}
table.tabla-estado tr:last-child td{border-bottom:none;}
table.tabla-estado th.num,table.tabla-estado td.num{text-align:right;font-variant-numeric:tabular-nums;}
table.tabla-estado td.cuenta-nombre{font-weight:700;color:var(--azul);}
.estado-pill{display:inline-block;font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:999px;}
.estado-pill.excelente{background:var(--positivo-soft);color:var(--positivo);}
.estado-pill.crecimiento{background:var(--positivo-soft);color:var(--positivo);}
.estado-pill.estable{background:var(--neutral-soft);color:var(--neutral);}
.estado-pill.atencion{background:var(--neutral-soft);color:#a15b0a;}
.estado-pill.caida{background:var(--negativo-soft);color:var(--negativo);}
.estado-pill.sindatos{background:#EEF1F6;color:var(--texto-terciario);}

.empty-note{color:var(--texto-secundario);font-size:13.5px;padding:14px 0;}

/* ---------- mejor día/horario (heatmap) ---------- */
.horarios-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;}
.horario-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);}
.horario-nombre{font-size:14px;font-weight:700;color:var(--azul);margin-bottom:10px;}
.horario-dias{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.horario-celda{
  aspect-ratio:1;border-radius:6px;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb, var(--azul) calc(12% + var(--i) * 78%), var(--bg));
  font-size:10px;font-weight:700;
  color:color-mix(in srgb, white calc(var(--i) * 100%), var(--texto-secundario));
}
.horario-hora{margin-top:10px;font-size:12.5px;color:var(--texto-secundario);}

/* ---------- chips de hashtags ---------- */
.hashtag-chips{display:flex;flex-wrap:wrap;gap:8px;}
.hashtag-chip{
  --chip-color:var(--azul);
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:600;color:var(--chip-color);
  background:color-mix(in srgb, var(--chip-color) 12%, var(--card));
  border:1px solid color-mix(in srgb, var(--chip-color) 30%, transparent);
  padding:6px 12px;border-radius:999px;
}
.hashtag-chip b{font-variant-numeric:tabular-nums;font-weight:800;}

/* ---------- accesibilidad: foco visible ---------- */
.filtro select:focus-visible,.filtro input:focus-visible,
.tab-btn:focus-visible,.top-post .ver-link:focus-visible,
.evolucion-controls select:focus-visible,.topbar a.logout:focus-visible,
.icon-btn:focus-visible,.ia-toggle:focus-visible,.quicknav a:focus-visible{
  outline:2px solid var(--neutral);outline-offset:2px;
}

/* ---------- botones de icono (actualizar / exportar) ---------- */
.icon-btn{
  width:36px;height:36px;border-radius:8px;border:1px solid rgba(255,255,255,0.3);
  background:transparent;color:#fff;font-size:16px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .2s ease,transform .2s ease;
}
.icon-btn:hover{background:rgba(255,255,255,0.1);}
.icon-btn:active{transform:scale(0.94);}
.icon-btn:disabled{opacity:.5;cursor:default;}
.icon-btn.is-spinning{animation:spin .7s linear infinite;}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* ---------- nav rápida (ancla flotante) ---------- */
.quicknav{
  position:fixed;right:14px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:9px;z-index:20;
}
.quicknav a{
  color:var(--line);font-size:9px;text-decoration:none;line-height:1;
  transition:color .2s ease,transform .2s ease;
}
.quicknav a:hover{color:var(--azul);transform:scale(1.4);}
@media (max-width:1280px){ .quicknav{display:none;} }

/* ---------- balance IA colapsable ---------- */
.ia-toggle{
  display:block;width:100%;text-align:center;padding:12px;border:none;
  border-top:1px solid var(--line);background:var(--bg);color:var(--azul);
  font:inherit;font-size:13px;font-weight:700;cursor:pointer;border-radius:0 0 var(--radius) var(--radius);
}
.ia-toggle:hover{background:var(--line);}

/* ---------- sparkline de tarjeta de cuenta ---------- */
.spark-wrap{margin-top:10px;height:30px;}
canvas.spark{width:100%!important;height:30px!important;}

/* ---------- impresión / exportar PDF ---------- */
@media print{
  .topbar,.quicknav,.filtros-bar,.tabs,.ia-toggle,.icon-btn,.topbar a.logout,#estado-loading{display:none!important;}
  body{background:#fff;}
  .wrap{padding:0;max-width:100%;}
  section.block{break-inside:avoid;margin-bottom:24px;}
  .chart-card,.cuenta-card,.resumen-card,.table-wrap,.ia-report,.top-post{box-shadow:none;border:1px solid #ccc;}
  .ia-resto{display:block!important;}
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .filtros-bar{flex-direction:column;align-items:stretch;}
  .filtro select,.filtro input{min-width:0;width:100%;}
  .filtro-periodo-analizado{margin-left:0;}
  .block-head-row{flex-direction:column;align-items:flex-start;}
  .evolucion-controls{width:100%;justify-content:space-between;}
}
@media (max-width:600px){
  .topbar-inner{padding:16px 18px;}
  .wrap{padding:18px 16px 70px;}
  .brand h1{font-size:21px;}
  .cuentas-grid,.resumen-grid,.skeleton-cards{grid-template-columns:1fr;}
  .chart-card{padding:14px 10px;overflow-x:auto;}
  .chart-card canvas{min-width:480px;}
}