@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap');
/* ============================================================
   DASHBOARD-AZUL.CSS  -  Reskin AZUL FUSION cristalino (drop-in)
   ------------------------------------------------------------
   - Reskina TODA la interfaz del dashboard a azul fusion glass.
   - Numeros en Space Grotesk (look moderno).
   - NO toca la logica ni el sistema de mensaje del dia
     (.hero.tipo-*, .msj-box.tipo-*, .badge-tipo.* se quedan
     igual: son funcionales/semanticos).
   - El canvas de Chart.js se recolorea con dashboard-azul-charts.js
   Instalar antes de </body>:
     <link rel="stylesheet" href="dashboard-azul.css?v=1">
     <script src="dashboard-azul-charts.js?v=1"></script>
   ============================================================ */

/* ---------- Fondo + orbes ---------- */
body{
  background:linear-gradient(165deg,#0A3B79 0%,#13539A 48%,#0B4385 100%)!important;
  background-attachment:fixed!important;
  color:#dce8f5!important;
}
body::before,body::after{content:"";position:fixed;border-radius:50%;filter:blur(100px);z-index:0;opacity:.42;pointer-events:none;}
body::before{width:460px;height:460px;background:radial-gradient(circle,rgba(197,242,75,.5),transparent 70%);top:-140px;right:-90px;}
body::after{width:520px;height:520px;background:radial-gradient(circle,rgba(79,163,255,.42),transparent 70%);bottom:-180px;left:-130px;}
.main{position:relative;z-index:1;}

/* Fuente moderna en numeros */
.kpi-v,.evt-stat .num,.pipe-num,.pipe-conv .val,.tvp-monto,.eq-monto,.riesgo-monto{
  font-family:'Space Grotesk','Segoe UI',sans-serif!important;letter-spacing:-.3px;
}

/* ---------- Sidebar glass + activo dorado ---------- */
.sb{
  background:rgba(6,28,56,.82)!important;
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  border-right:1px solid rgba(255,255,255,.08)!important;
}
.sb-logo{border-bottom-color:rgba(255,255,255,.10)!important;}
.sb-sec{color:rgba(255,255,255,.42)!important;}
.sb a{color:rgba(255,255,255,.74)!important;}
.sb a:hover{background:rgba(255,255,255,.07)!important;color:#fff!important;}
.sb a.on{background:rgba(246,197,68,.15)!important;color:#FFD974!important;border-left-color:#F6C544!important;}
.sb hr{border-top-color:rgba(255,255,255,.10)!important;}
.sb-acc-btn{color:#eef4ff!important;}
.sb-acc-btn:hover{background:rgba(255,255,255,.07)!important;}
.sb-acc-btn.open{background:rgba(246,197,68,.12)!important;border-left-color:#F6C544!important;color:#FFD974!important;}
.sb-acc-body{background:rgba(0,0,0,.22)!important;}
.sb-acc-body a{color:rgba(255,255,255,.72)!important;}
.sb-acc-body a.on{background:rgba(246,197,68,.15)!important;color:#FFD974!important;border-left-color:#F6C544!important;}

/* ---------- Topbar cristal (texto blanco se mantiene) ---------- */
.topbar{
  background:rgba(8,32,64,.55)!important;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 4px 18px rgba(0,0,0,.28)!important;
}

/* ---------- KPIs cristal ---------- */
.kpi{
  background:linear-gradient(150deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.045) 55%,rgba(255,255,255,.03) 100%)!important;
  border:1px solid rgba(255,255,255,.15)!important;
  border-left:4px solid #4FA3FF!important;
  backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
  box-shadow:0 10px 30px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.3)!important;
}
.kpi.green{border-left-color:#34D399!important;}
.kpi.red{border-left-color:#F87171!important;}
.kpi.amber{border-left-color:#FBBF24!important;}
.kpi.purple{border-left-color:#C4A6F5!important;}
.kpi-l{color:rgba(255,255,255,.62)!important;}
.kpi-v{color:#eef4ff!important;}
.kpi-v.cg{color:#34D399!important;} .kpi-v.cr{color:#F87171!important;}
.kpi-v.cb{color:#7DC0FF!important;} .kpi-v.cam{color:#FBBF24!important;} .kpi-v.cp{color:#C4A6F5!important;}
.kpi-s{color:rgba(255,255,255,.55)!important;}
.kpi-prog{background:rgba(255,255,255,.12)!important;}

.kpi-section-title{color:rgba(255,255,255,.62)!important;}
.kpi-section-title::before{background:#F6C544!important;}

/* ---------- Paneles cristal ---------- */
.panel{
  background:linear-gradient(150deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.04) 55%,rgba(255,255,255,.025) 100%)!important;
  border:1px solid rgba(255,255,255,.14)!important;
  backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);
  box-shadow:0 10px 30px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.28)!important;
}
.panel-t{color:#eef4ff!important;}
.panel-t-extra{color:rgba(255,255,255,.55)!important;}
.panel-t a{color:#9CC4FF!important;}

/* ---------- Top 3 oportunidades ---------- */
.opp{background:rgba(255,255,255,.05)!important;border-left-color:rgba(255,255,255,.25)!important;color:#e6eefb!important;}
.opp:hover{background:rgba(255,255,255,.09)!important;}
.opp .cli{color:#f4f8ff!important;font-weight:700;}
.opp .mt{color:#cfe0f5!important;}
.opp .meta{color:rgba(255,255,255,.55)!important;}

/* ---------- Equipo ---------- */
.eq-bar{background:rgba(255,255,255,.12)!important;}
.eq-monto{color:#34D399!important;}
.eq-estado.bg{background:rgba(52,211,153,.18)!important;color:#9af2cf!important;}
.eq-estado.ba{background:rgba(251,191,36,.16)!important;color:#ffd98a!important;}
.eq-estado.br2{background:rgba(248,113,113,.16)!important;color:#ffb0b0!important;}

/* ---------- Proximas gestiones ---------- */
.prox-row{background:rgba(255,255,255,.05)!important;border-left-color:rgba(255,255,255,.22)!important;}
.prox-row:hover{background:rgba(255,255,255,.09)!important;}
.prox-fecha{color:rgba(255,255,255,.55)!important;}
.prox-tit{color:#eef4ff!important;}

/* ---------- Top vendedores pipeline ---------- */
.tvp-row{background:rgba(255,255,255,.05)!important;border-left-color:rgba(255,255,255,.22)!important;}
.tvp-nom{color:#f4f8ff!important;}
.tvp-stats{color:rgba(255,255,255,.55)!important;}
.tvp-stats b{color:#eef4ff!important;}
.tvp-monto{color:#34D399!important;}

/* ---------- Riesgo / deudas (tintes translucidos) ---------- */
.riesgo-row.alta{background:rgba(248,113,113,.14)!important;border-left-color:#F87171!important;}
.riesgo-row.media{background:rgba(251,191,36,.13)!important;border-left-color:#FBBF24!important;}
.riesgo-row.baja{background:rgba(79,163,255,.13)!important;border-left-color:#4FA3FF!important;}
.riesgo-rank{color:rgba(255,255,255,.55)!important;}
.riesgo-cli{color:#f4f8ff!important;}
.riesgo-meta{color:rgba(255,255,255,.6)!important;}
.riesgo-monto{color:#F87171!important;}
.riesgo-vend-tag{background:rgba(255,255,255,.10)!important;color:rgba(255,255,255,.7)!important;}

/* ---------- Pipeline por etapa ---------- */
.pipe-nom{color:#eef4ff!important;}
.pipe-num{color:#eef4ff!important;}
.pipe-conv{background:rgba(255,255,255,.06)!important;}
.pipe-conv .lbl{color:rgba(255,255,255,.55)!important;}
.pipe-conv .val{color:#9CC4FF!important;}

/* ---------- Heatmap actividad ---------- */
.act-day{background:rgba(255,255,255,.08)!important;color:rgba(255,255,255,.6)!important;}
/* Niveles de calor (verde) - re-puestos con !important para que ganen */
.act-day.has1{background:#C8E6C9!important;color:#1B5E20!important;}
.act-day.has2{background:#81C784!important;color:#0d3d16!important;}
.act-day.has3{background:#43A047!important;color:#ffffff!important;}
.act-day.has4{background:#1D9E75!important;color:#ffffff!important;}
.act-day.has5{background:#0F6E56!important;color:#ffffff!important;}
.act-leyenda{color:rgba(255,255,255,.55)!important;}
.detalle-dia{background:rgba(255,255,255,.06)!important;border-left-color:#4FA3FF!important;}

/* ---------- Actividad reciente ---------- */
.ai{border-bottom-color:rgba(255,255,255,.07)!important;}
.at{color:#e6eefb!important;}
.at b{color:#f4f8ff!important;}
.ah{color:rgba(255,255,255,.5)!important;}

/* ---------- Estados vacios / loading ---------- */
.empty-state{background:rgba(255,255,255,.04)!important;border-color:rgba(255,255,255,.14)!important;color:rgba(255,255,255,.6)!important;}
.empty-state code{color:#FFD974!important;}
.loading-mini{color:rgba(255,255,255,.55)!important;}
.lider-tag{color:#9af2cf!important;}