/* =====================================================================
   ER CAPITAL FUNDING - STYLESHEET
   Modo oscuro · Premium institucional · Glassmorphism contenido
   Basado en Design Tokens (Clash Display, General Sans, IBM Plex Mono)
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=clash-display@400,500,600,700&f[]=general-sans@400,500,600&display=swap');

:root {
  /* ---------- SUPERFICIES (modo oscuro) ---------- */
  --bg-base:        #0A0D12;
  --bg-surface-1:   #12161D;
  --bg-surface-2:   #1A1F28;
  --bg-surface-3:   #232935;

  --border-subtle:  #2A313D;
  --border-strong:  #3A4150;

  /* ---------- TEXTO ---------- */
  --text-primary:   #E8ECF2;
  --text-secondary: #A2ABBA;
  --text-tertiary:  #6B7585;
  --text-on-accent: #0A0D12;

  /* ---------- ACENTO DE MARCA · AURUM ---------- */
  --brand-aurum:     #C9A24A;
  --brand-aurum-hi:  #DCBC6E;
  --brand-aurum-dim: #8E7335;

  /* ---------- ESTRATEGIAS ---------- */
  --grow:        #38A9C9;
  --grow-hi:     #5FC2DE;
  --grow-soft:   rgba(56, 169, 201, 0.12);

  --turbo:       #F2A03D;
  --turbo-hi:    #F7B85C;
  --turbo-soft:  rgba(242, 160, 61, 0.12);

  /* ---------- ESTADO / DATOS ---------- */
  --gain:        #34C77B;
  --gain-soft:   rgba(52, 199, 123, 0.12);
  --loss:        #E5484D;
  --loss-soft:   rgba(229, 72, 77, 0.12);
  --warning:     #E0B341;
  --neutral:     #8A93A3;

  /* ---------- GLASSMORPHISM ---------- */
  --glass-bg:     rgba(255, 255, 255, 0.04);
  --glass-bg-hi:  rgba(255, 255, 255, 0.06);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-blur:   16px;

  /* ---------- TIPOGRAFÍA ---------- */
  --font-display: 'Clash Display', sans-serif;
  --font-body:    'General Sans', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;

  /* Escala tipográfica */
  --fs-display:   3.052rem;
  --fs-h1:        2.441rem;
  --fs-h2:        1.953rem;
  --fs-h3:        1.563rem;
  --fs-h4:        1.25rem;
  --fs-body:      1rem;
  --fs-sm:        0.875rem;
  --fs-xs:        0.75rem;

  --lh-tight:     1.15;
  --lh-normal:    1.5;

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  /* ---------- ESPACIADO ---------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ---------- RADIOS ---------- */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 999px;

  /* ---------- MOVIMIENTO ---------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:    120ms;
  --dur-normal:  220ms;
}

/* =====================================================================
   GLOBAL & RESET
   ===================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    background-color: var(--bg-base);
    color: var(--text-primary);
    font-family: var(--font-body);
    line-height: var(--lh-normal);
    -webkit-font-smoothing: antialiased;
    width: 100%;
    max-width: 100vw;
    position: relative;
    touch-action: pan-y;
}

h1, h2, h3, h4, h5 {
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    color: var(--text-primary);
    margin-bottom: var(--space-4);
}

a {
    text-decoration: none;
    color: inherit;
}

/* =====================================================================
   COMPONENTS BASE (Basado en recomendaciones de Claude)
   ===================================================================== */

/* Contenedor Principal */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-6);
}

/* Tarjeta Base */
.ercf-card {
    background: var(--bg-surface-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    transition: transform var(--dur-normal) var(--ease-out), border-color var(--dur-normal) var(--ease-out);
}

.ercf-card:hover {
    border-color: var(--border-strong);
    transform: translateY(-2px);
}

/* Cabecera / Navegación Glass */
.glass-nav {
    background: var(--glass-bg);
    border-bottom: 1px solid var(--glass-border);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    position: sticky;
    top: 0;
    z-index: 100;
    padding: var(--space-4) 0;
}

/* Cifras y Datos Numéricos (Tabular) */
.metric-value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: var(--fw-medium);
    color: var(--text-primary);
    font-size: var(--fs-h3);
}

.metric-value.is-gain { color: var(--gain); }
.metric-value.is-loss { color: var(--loss); }

/* Badges de Estrategia */
.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge-grow { 
    color: var(--grow); 
    background: var(--grow-soft); 
    border: 1px solid rgba(56, 169, 201, 0.2);
}

.badge-turbo { 
    color: var(--turbo); 
    background: var(--turbo-soft); 
    border: 1px solid rgba(242, 160, 61, 0.2);
}

/* Botones */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3) var(--space-6);
    font-family: var(--font-body);
    font-weight: var(--fw-semibold);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-out);
    border: none;
    font-size: var(--fs-sm);
}

.btn-primary {
    background: var(--brand-aurum);
    color: var(--text-on-accent);
}

.btn-primary:hover {
    background: var(--brand-aurum-hi);
    transform: scale(1.02);
}

.btn-outline {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-strong);
}

.btn-outline:hover {
    background: var(--bg-surface-2);
    border-color: var(--text-secondary);
}

/* =====================================================================
   SECCIONES ESPECÍFICAS
   ===================================================================== */
.hero-section {
    padding: var(--space-16) 0 var(--space-12);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero-section h1 {
    font-size: var(--fs-display);
    max-width: 800px;
    margin: 0 auto var(--space-6);
}

.hero-section p {
    color: var(--text-secondary);
    font-size: var(--fs-h4);
    max-width: 600px;
    margin: 0 auto var(--space-8);
}

.split-strategy {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    margin-top: var(--space-12);
}

/* =====================================================================
   TABLET & DESKTOP RESPONSIVENESS OVERRIDES
   ===================================================================== */
@media (max-width: 1024px) {
    .shell { grid-template-columns: 200px 1fr !important; }
    .hero { grid-template-columns: 1fr 1fr !important; }
    .playbook-grid { grid-template-columns: 1fr 1fr !important; }
    .split-strategy { grid-template-columns: 1fr !important; }
    .content { padding: 16px 20px 64px !important; }
}

@media (max-width: 800px) {
    .hero { grid-template-columns: 1fr !important; }
    .playbook-grid { grid-template-columns: 1fr !important; }
}

/* Prevent tables and wide elements from cutting off */
.card, .ercf-card {
    overflow-x: auto !important;
}

/* =====================================================================
   MOBILE RESPONSIVENESS OVERRIDES (GLOBAL)
   ===================================================================== */
@media (max-width: 500px) {
    /* Shell & Layout Overrides */
    .shell {
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Sidebar Overrides - Make it a top horizontal scrollable nav */
    .sidebar {
        width: 100% !important;
        padding: 16px !important;
        border-right: none !important;
        border-bottom: 1px solid var(--border-subtle) !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 50 !important;
    }
    
    .brand {
        padding: 0 0 16px 0 !important;
        justify-content: center !important;
    }
    
    .nav {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        gap: 8px !important;
        padding-bottom: 4px !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .nav a {
        white-space: nowrap !important;
        font-size: 13px !important;
        padding: 8px 12px !important;
        border-radius: var(--radius-md) !important;
        border-left: none !important;
    }
    
    .nav a.active {
        border-bottom: 3px solid var(--brand-aurum) !important;
        border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
    }

    /* Main Content Adjustments */
    .topbar {
        position: relative !important;
        padding: 16px !important;
        flex-direction: column !important;
        gap: 12px !important;
        align-items: flex-start !important;
    }
    
    .topbar .acct {
        width: 100% !important;
        justify-content: space-between !important;
    }
    
    .content {
        padding: 16px !important;
        gap: 16px !important;
    }
    
    /* Grid Collapsing */
    .hero, .kpis, .bottom-row {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    /* Specific adjustments */
    .kpis {
        grid-template-columns: 1fr 1fr !important; /* 2 columns for KPIs looks better on mobile */
    }
    
    .chart-head {
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    .ranges {
        width: 100% !important;
        justify-content: space-between !important;
        overflow-x: auto !important;
    }
    
    /* Text sizing */
    .hero .big {
        font-size: 28px !important;
    }
    .kpi .val {
        font-size: 20px !important;
    }
    
    /* Login Page Overrides */
    .login-container {
        padding: 24px !important;
    }
    
    /* Split Strategy Overrides */
    .split-strategy {
        grid-template-columns: 1fr;
    }
    .hero-section h1 {
        font-size: var(--fs-h1);
    }
    
    /* Settings Form Override */
    .settings-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
}

/* =====================================================================
   CORE ANIMATIONS (PREMIUM FEEL)
   ===================================================================== */
.anim-ready {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.anim-ready.in-view {
    opacity: 1;
    transform: translateY(0);
}