/* ============================================================
   Bigvoz — Color tokens
   Brand: dark-first (Navy). Cyan→Purple gradient reserved for
   "VOZ" wordmark and the voice-wave element only. Never on body text.
   ============================================================ */

:root {
  /* ---- Brand core (from the brand manual) ---- */
  --bv-navy:        #0B1120;   /* primary brand surface          */
  --bv-cyan:        #22D3EE;   /* gradient start                 */
  --bv-purple:      #A855F7;   /* gradient end                   */
  --bv-white:       #FFFFFF;
  --bv-black:       #000000;

  /* The single brand gradient. Use ONLY on VOZ + voice wave + key accents. */
  --bv-gradient:    linear-gradient(120deg, #A855F7 0%, #22D3EE 100%); /* @kind color */
  --bv-gradient-vivid: linear-gradient(120deg, #E879F9 0%, #A855F7 45%, #22D3EE 100%);
  --font-numeric: 'Space Grotesk', 'Inter', sans-serif;
  --bv-gradient-soft: linear-gradient(90deg, rgba(34,211,238,0.16) 0%, rgba(168,85,247,0.16) 100%); /* @kind color */

  /* ---- Navy surface scale (dark UI) ---- */
  --navy-950: #070B16;
  --navy-900: #0B1120;   /* base background */
  --navy-850: #0F1626;
  --navy-800: #131B2E;   /* elevated surface */
  --navy-700: #1A2336;   /* card / panel */
  --navy-600: #232E45;   /* hover surface */
  --navy-500: #2E3A54;   /* borders strong */

  /* ---- Neutral text on dark ---- */
  --slate-50:  #F4F6FB;
  --slate-100: #E3E8F2;
  --slate-200: #C7CEDB;
  --slate-300: #A4ADBF;
  --slate-400: #8A93A6;
  --slate-500: #6B7488;

  /* ---- Accent tints ---- */
  --cyan-soft:   rgba(34,211,238,0.14);
  --cyan-line:   rgba(34,211,238,0.40);
  --purple-soft: rgba(168,85,247,0.14);
  --purple-line: rgba(168,85,247,0.40);

  /* ---- Semantic ---- */
  --success:  #34D399;
  --success-soft: rgba(52,211,153,0.14);
  --warning:  #FBBF24;
  --warning-soft: rgba(251,191,36,0.14);
  --danger:   #F87171;
  --danger-soft: rgba(248,113,113,0.14);
  --info:     #38BDF8;
  --info-soft: rgba(56,189,248,0.14);

  /* WhatsApp brand (product context — channel chips, call states) */
  --whatsapp: #25D366;
  --whatsapp-deep: #128C7E;

  /* ============================================================
     Semantic aliases — prefer these in components
     ============================================================ */
  --bg-base:       var(--navy-900);
  --bg-deep:       var(--navy-950);
  --surface-1:     var(--navy-800);
  --surface-2:     var(--navy-700);
  --surface-hover: var(--navy-600);

  --border-subtle: rgba(255,255,255,0.07);
  --border-default: rgba(255,255,255,0.12);
  --border-strong: rgba(255,255,255,0.20);

  --text-strong:   var(--bv-white);
  --text-body:     var(--slate-200);
  --text-muted:    var(--slate-400);
  --text-faint:    var(--slate-500);

  --accent:        var(--bv-cyan);
  --accent-2:      var(--bv-purple);
  --focus-ring:    rgba(34,211,238,0.55);

  /* On-light context (rare — light sections of marketing) */
  --light-bg:      #F4F6FB;
  --light-text:    var(--bv-navy);
}
/* Bigvoz webfonts
   Orbitron Bold (700) — logo, display titles, featured figures only.
   Inter (400/500/600/700) — all reading text, UI, buttons.
   Served from Google Fonts. If you need self-hosted binaries, replace these
   @import lines with local @font-face rules pointing at /assets/fonts. */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600;700;800;900&family=Space+Grotesk:wght@500;600;700&family=Inter:ital,wght@0,400;0,500;0,600;0,700;0,800&display=swap');
/* ============================================================
   Bigvoz — Spacing, radius, shadow, motion tokens
   ============================================================ */

:root {
  /* ---- Spacing (4px base grid) ---- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---- Radius — soft, modern. Pills for buttons/chips. ---- */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   14px;   /* default card */
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-pill: 999px;

  /* ---- Borders ---- */
  --border-width: 1px;

  /* ---- Shadows — deep, cool-tinted (dark UI) ---- */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.40);
  --shadow-md:  0 8px 24px rgba(3,7,18,0.45);
  --shadow-lg:  0 20px 48px rgba(3,7,18,0.55);
  --shadow-pop: 0 24px 60px rgba(3,7,18,0.70);

  /* Brand glow — for primary CTAs and active voice states */
  --glow-cyan:   0 0 0 1px rgba(34,211,238,0.30), 0 8px 28px rgba(34,211,238,0.28);
  --glow-purple: 0 0 0 1px rgba(168,85,247,0.30), 0 8px 28px rgba(168,85,247,0.28);
  --glow-brand:  0 10px 34px rgba(34,211,238,0.22), 0 10px 34px rgba(168,85,247,0.22);

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   200ms; /* @kind other */
  --dur-slow:   360ms; /* @kind other */

  /* ---- Layout ---- */
  --container:   1200px; /* @kind other */
  --container-wide: 1400px; /* @kind other */
}
/* ============================================================
   Bigvoz — Typography tokens
   Orbitron Bold  → logo, display headings, featured numbers (UPPERCASE)
   Inter          → everything readable: body, UI, buttons, labels
   Never set long paragraphs in Orbitron.
   ============================================================ */

:root {
  --font-display: 'Orbitron', 'Inter', system-ui, sans-serif; /* @kind font */
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;   /* @kind font */
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;          /* @kind font */

  /* Display weights — Orbitron */
  --fw-display:   700; /* @kind font */

  /* Body weights — Inter */
  --fw-regular:   400; /* @kind font */
  --fw-medium:    500; /* @kind font */
  --fw-semibold:  600; /* @kind font */
  --fw-bold:      700; /* @kind font */

  /* Type scale (px → rem at 16px base) */
  --text-2xs:  0.6875rem; /* 11 — micro labels */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 — body */
  --text-md:   1.125rem;  /* 18 */
  --text-lg:   1.375rem;  /* 22 */
  --text-xl:   1.75rem;   /* 28 */
  --text-2xl:  2.25rem;   /* 36 */
  --text-3xl:  3rem;      /* 48 */
  --text-4xl:  4rem;      /* 64 */
  --text-5xl:  5.25rem;   /* 84 — hero */

  /* Line heights */
  --leading-tight:   1.08;
  --leading-snug:    1.25;
  --leading-normal:  1.55;
  --leading-relaxed: 1.7;

  /* Letter spacing */
  --tracking-logo:   0.031em;  /* the wordmark spec (2px @ 64px) */
  --tracking-display: 0.02em;
  --tracking-wide:   0.08em;   /* eyebrows / overlines */
  --tracking-normal: 0;
  --tracking-tight:  -0.01em;  /* large Inter headings */
}
/* ============================================================
   Bigvoz — base resets + brand primitives
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--text-strong); }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

::selection { background: rgba(34,211,238,0.30); color: #fff; }

/* ---- The brand wordmark ---------------------------------- */
/* Usage: <span class="bv-wordmark">BIG<span class="bv-voz">VOZ</span></span> */
.bv-wordmark {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  text-transform: uppercase;
  letter-spacing: var(--tracking-logo);
  color: var(--text-strong);
  white-space: nowrap;
}
.bv-voz {
  background: var(--bv-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Gradient text accent — use sparingly on display headings, never body. */
.bv-gradient-text {
  background: var(--bv-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Eyebrow / overline label */
.bv-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
}

/* Ambient navy backdrop with a faint radial glow (hero / app shell) */
.bv-backdrop {
  background:
    radial-gradient(1100px 520px at 50% -10%, rgba(34,211,238,0.10), transparent 60%),
    radial-gradient(900px 480px at 85% 10%, rgba(168,85,247,0.10), transparent 55%),
    var(--bg-base);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ===== Dashboard CLIENT · componentes (Resultados/Impacto) ===== */
body{ background:var(--bg-deep); color:var(--text-body); min-height:100vh; }
.shell{ display:flex; min-height:100vh; }
.sidebar{ display:none; }
.main{ flex:1; padding:56px 16px 40px; max-width:520px; margin:0 auto; width:100%; }
.topbar{ position:fixed; top:0; left:0; right:0; height:52px; z-index:40; display:flex; align-items:center; gap:12px; padding:0 16px; background:rgba(11,17,32,.92); border-bottom:1px solid var(--border-subtle); backdrop-filter:blur(8px); }
.bv-wordmark.sm{ font-size:var(--text-md); } .biz-name.sm{ font-size:var(--text-sm); color:var(--text-strong); font-weight:600; }
.hero{ position:relative; overflow:hidden; border:1px solid var(--cyan-line); border-radius:var(--radius-xl); padding:24px; box-shadow:0 20px 60px rgba(3,7,18,.55), 0 0 48px rgba(168,85,247,.22); background:
    radial-gradient(120% 100% at 12% -10%, rgba(168,85,247,.28), transparent 46%),
    radial-gradient(120% 100% at 92% 8%, rgba(34,211,238,.22), transparent 50%),
    var(--navy-800); }
.hero-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.eyebrow{ font-size:var(--text-2xs); letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); font-weight:600; }
.hero-sales{ font-family:var(--font-numeric); font-weight:700; font-size:var(--text-4xl); letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums; background:var(--bv-gradient-vivid); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero-sub{ color:var(--text-muted); font-size:var(--text-sm); margin-top:4px; }
.wave{ display:flex; align-items:flex-end; gap:4px; height:34px; margin:16px 0; }
.wave span{ flex:1; background:var(--bv-gradient); border-radius:var(--radius-pill); animation:pulse 1.1s ease-in-out infinite; }
.wave span:nth-child(odd){ animation-delay:.15s } .wave span:nth-child(3n){ animation-delay:.3s }
@keyframes pulse{ 0%,100%{ height:30% } 50%{ height:100% } }
@media (prefers-reduced-motion: reduce){ .wave span{ animation:none; height:60% } }
.impact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.impact-c .iv{ font-family:var(--font-numeric); font-weight:700; font-size:var(--text-xl); letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--text-strong); }
.impact-c .il{ font-size:var(--text-2xs); color:var(--text-muted); line-height:1.3; }
.sec-h{ font-size:var(--text-md); color:var(--text-strong); margin:22px 4px 12px; }
.card{ background:rgba(26,35,54,.55); backdrop-filter:blur(14px); border:1px solid var(--border-default); border-radius:var(--radius-lg); padding:18px; margin-top:14px; }
.card-h{ font-size:var(--text-sm); color:var(--text-strong); margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.kpi-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.kpi{ background:rgba(26,35,54,.55); backdrop-filter:blur(14px); border:1px solid var(--border-default); border-radius:var(--radius-lg); padding:18px; transition:transform var(--dur-base) var(--ease-out), border-color var(--dur-base), box-shadow var(--dur-base); }
.kpi:hover{ transform:translateY(-3px); border-color:var(--border-strong); box-shadow:var(--glow-purple); }
.kpi .kv{ font-family:var(--font-numeric); font-weight:700; font-size:var(--text-2xl); letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--text-strong); }
.kpi .kl{ font-size:var(--text-xs); color:var(--text-muted); margin-top:2px; }
.kpi .ic{ width:30px; height:30px; border-radius:var(--radius-pill); display:inline-flex; align-items:center; justify-content:center; background:var(--bv-gradient-soft); border:1px solid var(--cyan-line); font-size:16px; margin-bottom:10px; }
.kpi .ic i{ background:var(--bv-gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.funnel{ display:flex; flex-direction:column; gap:10px; }
.frow{ display:flex; align-items:center; gap:10px; }
.fbar{ height:26px; border-radius:var(--radius-pill); background:var(--bv-gradient); min-width:44px; }
.flabel{ position:absolute; left:12px; font-size:var(--text-xs); color:#06121f; font-weight:600; }
.fwrap{ position:relative; flex:1; display:flex; align-items:center; }
.fval{ font-family:var(--font-numeric); font-weight:700; font-variant-numeric:tabular-nums; color:var(--text-strong); width:56px; text-align:right; }
.pill-count{ background:var(--danger-soft); color:var(--danger); border-radius:var(--radius-pill); font-size:var(--text-2xs); padding:1px 8px; font-weight:700; }
.atten{ display:flex; flex-direction:column; gap:10px; }
.empty{ color:var(--text-muted); font-size:var(--text-sm); padding:8px 0; }
.att{ display:flex; align-items:center; gap:10px; padding:10px; background:var(--navy-800); border-radius:var(--radius-sm); }
.att-av{ width:34px; height:34px; border-radius:var(--radius-pill); background:var(--bv-gradient-soft); color:var(--bv-cyan); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:var(--text-xs); position:relative; }
.att-av .hot{ position:absolute; top:-2px; right:-2px; width:10px; height:10px; border-radius:50%; background:var(--warning); border:2px solid var(--navy-800); }
.att-body{ flex:1; min-width:0; } .att-name{ font-size:var(--text-sm); color:var(--text-strong); font-weight:600; }
.att-msg{ font-size:var(--text-xs); color:var(--text-muted); }
.btn-wa{ background:var(--whatsapp); color:#04140d; border:0; border-radius:var(--radius-pill); padding:8px 14px; font-weight:600; font-size:var(--text-xs); cursor:pointer; white-space:nowrap; display:inline-block; }
.use-top{ display:flex; justify-content:space-between; align-items:center; }
.use-num{ font-size:var(--text-xs); color:var(--text-muted); } .use-num b{ font-family:var(--font-display); color:var(--text-strong); }
.bar{ height:10px; background:var(--navy-600); border-radius:var(--radius-pill); margin:10px 0; overflow:hidden; }
.bar-fill{ height:100%; border-radius:var(--radius-pill); background:var(--bv-gradient); }
.use-foot{ display:flex; justify-content:space-between; font-size:var(--text-2xs); color:var(--text-muted); }
.badge{ font-size:var(--text-2xs); padding:2px 10px; border-radius:var(--radius-pill); font-weight:600; }
.badge-cyan{ background:var(--cyan-soft); color:var(--bv-cyan); }
@media (min-width:960px){
  .topbar{ display:none; }
  .sidebar{ display:flex; flex-direction:column; gap:8px; width:264px; padding:20px 16px; position:sticky; top:0; height:100vh; background:var(--bg-base); border-right:1px solid var(--border-subtle); }
  .brand{ padding:4px 8px 16px; } .brand .bv-wordmark{ font-size:var(--text-lg); }
  .biz{ display:flex; gap:10px; align-items:center; padding:10px; background:var(--navy-700); border-radius:var(--radius-md); }
  .biz-av{ width:38px; height:38px; border-radius:var(--radius-pill); background:var(--bv-gradient); color:#06121f; display:flex; align-items:center; justify-content:center; font-weight:800; }
  .biz-name{ font-size:var(--text-sm); color:var(--text-strong); font-weight:600; } .biz-plan{ font-size:var(--text-2xs); color:var(--text-muted); }
  .nav{ display:flex; flex-direction:column; gap:2px; margin-top:12px; }
  .nav-i{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--radius-sm); color:var(--text-muted); cursor:pointer; font-size:var(--text-sm); }
  .nav-i:hover{ background:var(--navy-700); color:var(--text-body); } .nav-i.active{ background:linear-gradient(90deg, rgba(34,211,238,.14), rgba(168,85,247,.06) 70%, transparent); color:var(--bv-cyan); box-shadow:inset 2px 0 14px -6px rgba(34,211,238,.6); }
.nav-i i{ width:18px; text-align:center; }
.nav-i.active i{ background:var(--bv-gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
  .main{ padding:32px 40px; max-width:1040px; }
  .impact-grid{ grid-template-columns:repeat(4,1fr); } .kpi-grid{ grid-template-columns:repeat(4,1fr); } .hero-sales{ font-size:48px; }
}