/* Facturando IA — Tema "Azul acero" vidrio (carga ENCIMA del tema base) · móvil + PC */
html,body{background:transparent !important;}
body::before,body::after{display:none !important;}

/* ===== Variables (móvil + PC) ===== */
:root,body,body.light-mode,body[data-theme="light"]{
  --bg:transparent !important; --bg-secondary:transparent !important;
  --text-primary:#eaf0f4 !important; --text-secondary:rgba(234,240,244,.74) !important; --text-muted:rgba(234,240,244,.55) !important;
  --txt:#eaf0f4 !important; --mut:rgba(234,240,244,.60) !important;
  --bg-card:rgba(255,255,255,.07) !important; --bg-card-hover:rgba(255,255,255,.12) !important; --bg-elevated:rgba(255,255,255,.10) !important;
  --card:rgba(255,255,255,.07) !important;
  --border:rgba(255,255,255,.16) !important; --border-light:rgba(255,255,255,.10) !important; --bd:rgba(255,255,255,.16) !important;
  --glass:rgba(255,255,255,.06) !important; --glass-border:rgba(255,255,255,.16) !important;
  --accent:#6fb0d8 !important; --accent-light:rgba(111,176,216,.18) !important; --border-hover:rgba(111,176,216,.55) !important;
  --vio:#6fb0d8 !important; --vio2:#9fd0ec !important; --pink:#6fb0d8 !important;
}

/* ===== Superficies de vidrio ===== */
.card,.bg-card,.kpi,.ecard,.dsb,.dsb-search,.efbtn,.esearch,
.k-vio,.k-pink,.k-amb,.k-teal{
  background:rgba(255,255,255,.07) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  backdrop-filter:blur(20px) saturate(1.4) !important;
  -webkit-backdrop-filter:blur(20px) saturate(1.4) !important;
}
.card,.kpi,.ecard{box-shadow:0 14px 40px rgba(0,0,0,.26) !important;}
.k-vio .v,.k-pink .v,.k-amb .v,.k-teal .v{color:#eaf0f4 !important;-webkit-text-fill-color:#eaf0f4 !important;background:none !important;}
.k-vio .t,.k-pink .t,.k-amb .t,.k-teal .t{color:rgba(234,240,244,.78) !important;}

/* ===== Navegación ===== */
.navbar-custom,.bottom-nav{
  background:rgba(255,255,255,.06) !important;
  backdrop-filter:blur(18px) saturate(1.3) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.3) !important;
  border-color:rgba(255,255,255,.14) !important;
}
.navbar-custom .brand-text{color:#eaf0f4 !important;}
.dsb-item{color:rgba(234,240,244,.66) !important;}
.dsb-item:hover{background:rgba(255,255,255,.06) !important;color:#eaf0f4 !important;}
.dsb-item.active{background:rgba(111,176,216,.20) !important;color:#fff !important;border:1px solid rgba(111,176,216,.42) !important;}

/* ===== Landing (variables propias + superficies) ===== */
:root,body{--text:#eaf0f4 !important; --muted:rgba(234,240,244,.66) !important; --dim:rgba(234,240,244,.5) !important; --brand:#6fb0d8 !important; --bg-2:transparent !important;
  /* FIX: el tema viejo dejaba --brand-dark en gris (#1c2228) → todos los degradés var(--brand,--brand-dark) salían azul→gris. Ahora azul acero completo. */
  --brand-dark:#2f6f93 !important; --brand-darker:#1f5578 !important;
  --brand-glow:rgba(111,176,216,.35) !important; --brand-light:rgba(111,176,216,.15) !important; --brand-shadow:rgba(47,111,147,.45) !important;}
.nav{background:rgba(255,255,255,.06) !important;backdrop-filter:blur(18px) !important;-webkit-backdrop-filter:blur(18px) !important;border-color:rgba(255,255,255,.14) !important;}
.feature,.plan,.problem-card,.signup-card,.hero-tag,.form-row input,.form-row select,.form-row textarea{background:rgba(255,255,255,.07) !important;border:1px solid rgba(255,255,255,.16) !important;backdrop-filter:blur(18px) saturate(1.3) !important;-webkit-backdrop-filter:blur(18px) saturate(1.3) !important;}
.section-title,.feature h3,.problem-to,.plan-name,.plan-price,.signup h2,.hero h1,.brand-text{color:#eaf0f4 !important;-webkit-text-fill-color:#eaf0f4 !important;}
.btn-primary,.btn-cta,.signup-submit,.plan.featured .plan-cta{background:linear-gradient(135deg,#6fb0d8,#4f93bf) !important;color:#06222f !important;border:none !important;}

/* ===== iOS/táctil: SIN live-blur (causa temblor al scrollear) → vidrio opaco aproximado, scroll suave ===== */
@media (hover:none){
  .card,.bg-card,.kpi,.ecard,.dsb,.dsb-search,.efbtn,.esearch,.navbar-custom,.bottom-nav,.feature,.plan,.problem-card,.signup-card,.hero-tag,.k-vio,.k-pink,.k-amb,.k-teal,.form-row input,.form-row select,.form-row textarea,.glass{
    backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  }
  .card,.bg-card,.kpi,.ecard,.feature,.plan,.problem-card,.signup-card,.k-vio,.k-pink,.k-amb,.k-teal,.vcard{background:rgba(255,255,255,.07) !important;border:1px solid rgba(255,255,255,.15) !important;box-shadow:0 10px 30px rgba(0,0,0,.22) !important;}
  .dsb,.navbar-custom,.bottom-nav{background:rgba(11,17,25,.86) !important;}
  .hero-tag,.dsb-search,.efbtn,.esearch,.form-row input,.form-row select,.form-row textarea{background:rgba(255,255,255,.08) !important;}
}

/* ===== Sidebar PC: nav scrollable + boton celular comodo ===== */
.dsb-nav{overflow-y:auto !important;min-height:0 !important;}
.dsb-nav::-webkit-scrollbar{width:5px;}
.dsb-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:3px;}
.dsb-mobile-btn{display:flex;align-items:center;justify-content:center;gap:8px;margin:10px 0 6px;padding:11px;border-radius:11px;border:1px solid rgba(255,255,255,.20);background:rgba(255,255,255,.07);color:#eaf0f4;text-decoration:none;font-size:.86rem;font-weight:600;transition:all .18s;flex:0 0 auto;}
.dsb-mobile-btn:hover{background:rgba(111,176,216,.20);border-color:rgba(111,176,216,.5);color:#fff;}


/* =========== CUADRO DE MARCA v4 "NEGRO + GLOW ACERO" (elegido 6/7/2026) ===========
   Un solo lugar pisa TODOS los tiles de marca (movil + PC + landing + demo). */
.brand-hero-icon, .emit-hero .eh-ic, .dsb-logo .ic, .ehero-ic, .brand-logo, .s1-logo {
  background: radial-gradient(circle at 50% 42%, rgba(47,111,147,.40), rgba(5,8,12,.98) 68%) !important;
  border: 1px solid rgba(111,176,216,.28) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.55), inset 0 0 22px rgba(111,176,216,.28) !important;
  color: #eaf6fd !important;
}
.brand-hero-icon svg, .emit-hero .eh-ic svg, .dsb-logo .ic svg, .ehero-ic svg, .brand-logo svg, .s1-logo svg {
  filter: drop-shadow(0 0 5px rgba(111,176,216,.55));
}
/* M1 - glow que respira en las marcas protagonistas */
@keyframes fiaBreath {
  0%,100% { box-shadow: 0 10px 26px rgba(0,0,0,.55), inset 0 0 15px rgba(111,176,216,.18); }
  50%     { box-shadow: 0 12px 30px rgba(0,0,0,.62), inset 0 0 30px rgba(111,176,216,.46); }
}
.brand-hero-icon, .emit-hero .eh-ic { animation: fiaBreath 3.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .brand-hero-icon, .emit-hero .eh-ic { animation: none !important; }
}
/* M2 - FAB IA (bottom-nav) con la identidad del cuadro */
.bnav-fab-circle {
  background: radial-gradient(circle at 50% 40%, rgba(47,111,147,.48), rgba(5,8,12,.98) 72%) !important;
  border: 1px solid rgba(111,176,216,.38) !important;
  box-shadow: 0 6px 22px rgba(0,0,0,.55), inset 0 0 18px rgba(111,176,216,.38), 0 0 0 4px rgba(11,21,36,1) !important;
  color: #cfe9f8 !important;
}
body.light-mode .bnav-fab-circle {
  box-shadow: 0 6px 22px rgba(0,0,0,.30), inset 0 0 18px rgba(111,176,216,.38), 0 0 0 4px #fff !important;
}