/* ── Alza Design System ──────────────────────────────────────────
   Shared tokens, typography, and component styles.
   Loaded after each page's <style> block so these rules win at
   equal specificity via cascade order.
   ──────────────────────────────────────────────────────────────── */

/* ── Light-mode token system ─────────────────────────────────── */
[data-theme="light"] {
    /* Backgrounds */
    --bg:          #F6FAF8;
    --surface:     #FFFFFF;
    --surface2:    #EEF6F1;
    /* Borders */
    --border:      #E3EEE8;
    --border-h:    #B8D4C0;
    /* Text */
    --text:        #12211C;
    --text-s:      #4E6058;
    --text-m:      #7D9A8A;
    /* Brand */
    --emerald:     #10B981;
    --emerald-d:   rgba(16,185,129,0.09);
    --alza-green:  #10B981;
    --alza-green-h:#0B9E6B;
    /* Accent – Vibrant Amber for Pro / "most popular" (brand-exact #F59E0B) */
    --amber:       #F59E0B;
    --amber-d:     rgba(245,158,11,0.10);
    --accent-amber:#F59E0B;
    /* Semantic */
    --red:         #F2545B;
    --accent-coral:#F2545B;
    /* Indigo kept for gradient accents */
    --indigo:      #6366F1;
    --indigo-d:    rgba(99,102,241,0.08);
    --cyan:        #6366F1;
}

/* ── Body background in light mode ──────────────────────────── */
[data-theme="light"] body {
    background: #F6FAF8;
    color: #12211C;
}

/* ── Typography: Poppins for headings (Alza brand manual) ─────── */
h1, h2, h3, h4,
.hero-h1,
.alza-display {
    font-family: 'Poppins', 'Inter', sans-serif;
}

/* ── Tabular figures on all financial numbers ─────────────────── */
.stat-value,
.db-price,
.db-change,
.pro-stat-num,
.canasta-perf,
.canasta-calc,
.pnl-stat-value,
.tape-price {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* ══════════════════════════════════════════════════════════════
   TRUST BADGE  (replaces emoji + plain text in hero & CTA rows)
   ══════════════════════════════════════════════════════════════ */
.trust-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .15px;
    line-height: 1;
    background: rgba(16,185,129,0.09);
    border: 1px solid rgba(16,185,129,0.20);
    color: #0B7A55;
    transition: background .15s;
}

.trust-badge svg {
    width: 13px;
    height: 13px;
    stroke: #10B981;
    flex-shrink: 0;
}

[data-theme="light"] .trust-badge {
    background: rgba(16,185,129,0.08);
    border-color: rgba(16,185,129,0.22);
    color: #0B7A55;
}

/* Indigo variant — reserved for data/security/infrastructure trust signals
   ("Datos reales", "Seguro"), keeping green for growth/action only. */
.trust-badge.trust-indigo {
    background: rgba(99,102,241,0.09);
    border-color: rgba(99,102,241,0.22);
    color: #4548C9;
}
.trust-badge.trust-indigo svg { stroke: #6366F1; }
[data-theme="light"] .trust-badge.trust-indigo {
    background: rgba(99,102,241,0.08);
    border-color: rgba(99,102,241,0.22);
    color: #4548C9;
}

/* ══════════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════════ */

/* Primary CTA — Alza Green → Trust Indigo gradient, the standard button
   treatment app-wide (brand's two primary accents in one signature element). */
.btn-primary,
.hero-cta,
.cta-main-btn,
.floating-cta-btn {
    background: linear-gradient(135deg, #10B981 0%, #6366F1 100%) !important;
    border-radius: 12px !important;
    font-family: 'Poppins', 'Inter', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: -0.15px !important;
    transition: box-shadow .18s, transform .12s, opacity .15s !important;
    box-shadow: 0 4px 16px rgba(99,102,241,.22) !important;
}
.btn-primary:hover,
.hero-cta:hover,
.cta-main-btn:hover,
.floating-cta-btn:hover {
    box-shadow: 0 8px 24px rgba(99,102,241,.32) !important;
    transform: translateY(-1px) !important;
    opacity: .94 !important;
}
.btn-primary:active,
.hero-cta:active,
.cta-main-btn:active,
.floating-cta-btn:active {
    transform: translateY(0) !important;
    opacity: 1 !important;
}

/* ══════════════════════════════════════════════════════════════
   INTEREST PICKER — selected = solid green fill
   ══════════════════════════════════════════════════════════════ */
[data-theme="light"] .interest-card.selected {
    background: #10B981;
    border-color: #10B981;
}
[data-theme="light"] .interest-card.selected .interest-label {
    color: rgba(255,255,255,0.92);
}
[data-theme="light"] .interest-card.selected::after {
    color: rgba(255,255,255,0.85);
}
[data-theme="light"] .interest-card:hover {
    border-color: #B8D4C0;
    background: #EEF6F1;
}

/* Sorpréndeme random button: dashed border */
#btn-random {
    border-style: dashed;
    border-color: var(--border-h, #B8D4C0);
}
[data-theme="light"] #btn-random:hover {
    border-style: dashed;
    border-color: #10B981;
    color: #0B7A55;
}

/* ══════════════════════════════════════════════════════════════
   CANASTA CARDS  (landing + dashboard)
   ══════════════════════════════════════════════════════════════ */
[data-theme="light"] .canasta-card {
    background: #FFFFFF;
    border-color: #E3EEE8;
    box-shadow: 0 1px 4px -2px rgba(18,33,28,.08);
}
[data-theme="light"] .canasta-card:hover {
    border-color: #10B981;
    box-shadow: 0 10px 28px -16px rgba(18,33,28,.20);
    transform: translateY(-2px);
}
[data-theme="light"] .ticker-chip {
    background: rgba(16,185,129,0.07);
    border-color: rgba(16,185,129,0.20);
    color: #0B7A55;
}

/* canastas-empty state */
[data-theme="light"] .canastas-empty {
    color: #7D9A8A;
}

/* ══════════════════════════════════════════════════════════════
   STAT / METRIC ITEMS  (PnL results, portfolio results)
   ══════════════════════════════════════════════════════════════ */
[data-theme="light"] .stat-item {
    background: #FFFFFF;
    border-color: #E3EEE8;
    box-shadow: 0 1px 3px -1px rgba(18,33,28,.06);
}
[data-theme="light"] .stat-label {
    color: #7D9A8A;
}
[data-theme="light"] .stat-value {
    color: #12211C;
    font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════════════════════
   PRO / BOUTIQUE SECTION — amber accent on featured card
   ══════════════════════════════════════════════════════════════ */

/* Featured card: 2px amber border, amber wash */
.pro-card-featured {
    border-color: rgba(245,158,11,.45) !important;
    border-width: 2px !important;
    background: linear-gradient(160deg, rgba(245,158,11,.06) 0%, var(--surface) 55%) !important;
}
.pro-card-featured:hover {
    border-color: #F59E0B !important;
    box-shadow: 0 10px 28px rgba(245,158,11,.15) !important;
}

/* "Más popular" tag: solid amber */
.pro-featured-tag {
    background: #F59E0B !important;
    background-image: none !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* Pro badge pill: amber tint */
.pro-badge {
    background: rgba(245,158,11,.12) !important;
    border-color: rgba(245,158,11,.32) !important;
    color: #9A6400 !important;
}
[data-theme="light"] .pro-badge {
    color: #9A6400 !important;
}

/* Pro icon for featured card: amber stroke */
.pro-card-featured .pro-card-icon {
    background: linear-gradient(135deg, rgba(245,158,11,.15), rgba(245,158,11,.08)) !important;
    border-color: rgba(245,158,11,.25) !important;
}
.pro-card-featured .pro-card-icon svg {
    stroke: #F59E0B !important;
}

/* Stats strip: deep-green band for contrast */
.pro-stats {
    background: #0F2B20 !important;
    border-color: rgba(16,185,129,.20) !important;
    border-radius: 16px !important;
}
[data-theme="light"] .pro-stats {
    background: #0F2B20 !important;
    border-color: rgba(16,185,129,.20) !important;
}
.pro-stat-num {
    color: #10B981 !important;
    background: none !important;
    -webkit-text-fill-color: #10B981 !important;
    font-variant-numeric: tabular-nums !important;
    font-feature-settings: "tnum" !important;
}
.pro-stat-label {
    color: rgba(255,255,255,.55) !important;
}
.pro-stat-divider {
    background: rgba(255,255,255,.12) !important;
}

/* ══════════════════════════════════════════════════════════════
   DASHBOARD SIDEBAR BOXES  (light mode)
   ══════════════════════════════════════════════════════════════ */
[data-theme="light"] .dashboard-box,
[data-theme="light"] .db-header {
    background: #FFFFFF;
    border-color: #E3EEE8;
}
[data-theme="light"] .db-header {
    font-family: 'Poppins', 'Inter', sans-serif;
    font-weight: 600;
    color: #12211C;
}
[data-theme="light"] .db-row {
    border-bottom-color: rgba(227,238,232,.7);
}
[data-theme="light"] .db-ticker {
    color: #12211C;
}
[data-theme="light"] .db-name {
    color: #7D9A8A;
}
[data-theme="light"] .db-price {
    color: #12211C;
}
[data-theme="light"] .db-news-item {
    color: #4E6058;
    border-bottom-color: rgba(227,238,232,.7);
}

/* ══════════════════════════════════════════════════════════════
   HERO BADGE  (landing page)
   ══════════════════════════════════════════════════════════════ */
[data-theme="light"] .hero-badge {
    background: rgba(16,185,129,.09);
    border-color: rgba(16,185,129,.22);
    color: #0B7A55;
    font-family: 'Poppins', 'Inter', sans-serif;
}

/* ══════════════════════════════════════════════════════════════
   NAV CONTROLS  (floating pills)
   ══════════════════════════════════════════════════════════════ */
[data-theme="light"] .ctrl-pill {
    background: rgba(255,255,255,.95);
    border-color: #E3EEE8;
    color: #4E6058;
    box-shadow: 0 1px 4px rgba(18,33,28,.06);
}
[data-theme="light"] .ctrl-pill:hover {
    color: #12211C;
    border-color: #B8D4C0;
}

/* ══════════════════════════════════════════════════════════════
   ACCORDION / CONCEPT CARDS  (landing page)
   ══════════════════════════════════════════════════════════════ */
[data-theme="light"] .accordion-trigger {
    background: #FFFFFF;
    border-color: #E3EEE8;
    color: #4E6058;
}
[data-theme="light"] .accordion-trigger:hover,
[data-theme="light"] .accordion-trigger.open {
    border-color: #B8D4C0;
    color: #12211C;
}
[data-theme="light"] .accordion-content {
    background: #FFFFFF;
    border-color: #E3EEE8;
}
[data-theme="light"] .concept-card {
    background: #EEF6F1;
    border-color: #E3EEE8;
}
[data-theme="light"] .concept-card h4 {
    color: #12211C;
}
[data-theme="light"] .concept-card p {
    color: #4E6058;
}

/* ══════════════════════════════════════════════════════════════
   MOBILE DASHBOARD TABS  (landing page)
   ══════════════════════════════════════════════════════════════ */
[data-theme="light"] .mobile-db-tabs {
    background: #FFFFFF;
    border-color: #E3EEE8;
}
[data-theme="light"] .mobile-tab {
    color: #7D9A8A;
}
[data-theme="light"] .mobile-tab.active {
    background: #EEF6F1;
    color: #12211C;
}

/* ══════════════════════════════════════════════════════════════
   LANDING CTA SECTION
   ══════════════════════════════════════════════════════════════ */
[data-theme="light"] .cta-section h2 {
    color: #12211C;
}
[data-theme="light"] .cta-section p {
    color: #4E6058;
}

/* ══════════════════════════════════════════════════════════════
   AUTH MODAL — light mode polish
   ══════════════════════════════════════════════════════════════ */
[data-theme="light"] .lp-modal-card {
    background: #FFFFFF;
    border-color: #E3EEE8;
    box-shadow: 0 24px 64px rgba(18,33,28,.12);
}
[data-theme="light"] .lp-modal-title {
    color: #12211C;
}
[data-theme="light"] .lp-modal-subtitle {
    color: #4E6058;
}
[data-theme="light"] .lp-modal-close {
    color: #7D9A8A;
}
[data-theme="light"] .lp-modal-close:hover {
    color: #12211C;
}
[data-theme="light"] .lp-field label {
    color: #4E6058;
}
[data-theme="light"] .lp-field input {
    background: #F6FAF8;
    border-color: #E3EEE8;
    color: #12211C;
}
[data-theme="light"] .lp-field input::placeholder {
    color: #7D9A8A;
}
[data-theme="light"] .lp-divider {
    color: #7D9A8A;
}

/* Google sign-in button: neutral outline, not green */
.lp-google-btn,
.auth-google-btn {
    background: #FFFFFF !important;
    border: 1.5px solid #E3EEE8 !important;
    color: #12211C !important;
    box-shadow: none !important;
}
.lp-google-btn:hover,
.auth-google-btn:hover {
    background: #F6FAF8 !important;
    border-color: #B8D4C0 !important;
    box-shadow: none !important;
}

/* ══════════════════════════════════════════════════════════════
   DASHBOARD — sidenav light mode refinement
   ══════════════════════════════════════════════════════════════ */
[data-theme="light"] .sidenav {
    background: #FFFFFF;
    border-right-color: #E3EEE8;
}
[data-theme="light"] .sidenav-brand-name {
    font-family: 'Poppins', 'Inter', sans-serif;
    font-weight: 700;
    color: #12211C;
}
[data-theme="light"] .sidenav-item {
    color: #4E6058;
}
[data-theme="light"] .sidenav-item:hover {
    background: rgba(16,185,129,.06);
    color: #12211C;
}
[data-theme="light"] .sidenav-item.active {
    background: rgba(16,185,129,.10);
    color: #0B7A55;
}

/* ══════════════════════════════════════════════════════════════
   DASHBOARD — chart/controls cards in light mode
   ══════════════════════════════════════════════════════════════ */
[data-theme="light"] .chart-card {
    background: #FFFFFF;
    border-color: #E3EEE8;
    box-shadow: 0 1px 4px -2px rgba(18,33,28,.07);
}
[data-theme="light"] .controls-panel {
    background: #EEF6F1;
    border-color: #E3EEE8;
}
[data-theme="light"] .ticker-input {
    background: #F6FAF8;
    border-color: #E3EEE8;
    color: #12211C;
}
[data-theme="light"] .search-results {
    background: #FFFFFF;
    border-color: #E3EEE8;
    box-shadow: 0 4px 20px rgba(18,33,28,.09);
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE: collapse interest grid and metric grids at 480px
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .results-stats {
        flex-direction: column !important;
    }
    .pro-stats {
        flex-direction: column !important;
        gap: 12px !important;
        padding: 20px !important;
    }
    .pro-stat-divider {
        display: none !important;
    }
}