/* /assets/style.css */

/* ====== Fuentes ====== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700;800&family=Lato:wght@300;400;600;700;900&family=Montserrat:wght@400;600;800&display=swap');


# CSS de tema (fondos, jerarquía tipográfica y componentes visuales)
st.markdown(
    f"""
    <style>
    /* ====== Fuentes ====== */
    @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700;800&family=Lato:wght@300;400;600;700;900&family=Montserrat:wght@400;600;800&display=swap');

            :root {{
        /* Paleta de colores */
        --cabanna-brown: {COLORS["brown"]};
        --cabanna-gold:  {COLORS["gold"]};
        --cabanna-beige: {COLORS["beige"]};
        --cabanna-dark:  {COLORS["black"]};
        --cabanna-white: {COLORS["white"]};

        /* Familias tipográficas */
        --font-title: {TITLE_FONT};
        --font-body:  {BODY_FONT};
        --font-alt:   {ALT_FONT};

        /* Escala tipográfica */
        --fs-h1: 2.0rem;
        --fs-h2: 1.5rem;
        --fs-h3: 1.25rem;
        --fs-h4: 1.05rem;
        --fs-body: 0.98rem;
        --fs-small: 0.88rem;
        --fs-overline: 0.72rem;
    }}

    /* ====== BASE DE LA APLICACIÓN ====== */
    .stApp {{
        background: var(--cabanna-dark);
        color: var(--cabanna-white);
        font-family: var(--font-body);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        line-height: 1.6;
    }}

    /* Texto general */
    p, li, span, div, label {{
        font-family: var(--font-body);
        font-size: var(--fs-body);
        line-height: 1.48;
    }}

    /* ====== JERARQUÍA DE TÍTULOS ====== */
    h1, .stMarkdown h1 {{
        font-family: sans-serif;
        font-weight: bold;
        font-size: var(--fs-h1);
        color: var(--cabanna-brown);
        letter-spacing: 0.2px;
        margin: 0 0 8px 0;
        font-weight: 700;
    }}

    h2, .stMarkdown h2 {{
        font-family: var(--font-title);
        font-size: var(--fs-h2);
        color: var(--cabanna-white);
        margin: 8px 0 6px 0;
        font-weight: 600;
    }}

    h3, .stMarkdown h3 {{
        font-family: var(--font-title);
        font-size: var(--fs-h3);
        color: var(--cabanna-white);
        margin: 8px 0 4px 0;
        font-weight: 600;
    }}

    /* Subtítulos y texto secundario */
    .subtitle {{
        font-family: var(--font-body);
        font-size: var(--fs-h4);
        color: #d7d7d7;
        margin-bottom: 8px;
        font-weight: 400;
    }}

    .overline {{
        font-family: var(--font-alt);
        font-weight: 600;
        font-size: var(--fs-overline);
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: #bdbdbd;
        margin-bottom: 4px;
    }}

    /* ====== TARJETAS DE MÉTRICAS PRINCIPALES ====== */
    .metric-card {{
        background: linear-gradient(135deg, rgba(245,245,220,.08), rgba(255,255,255,.06));
        border-left: 4px solid var(--cabanna-gold);
        box-shadow: 0 8px 24px rgba(0,0,0,0.25);
        border-radius: 16px;
        padding: 14px 16px;
        min-height: 120px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }}

    div[data-testid="stMetricValue"] {{
        color: var(--cabanna-gold);
        font-weight: 800;
        font-family: var(--font-title);
        font-size: 1.8rem;
    }}

    .small-note {{ 
        color: #9aa0a6; 
        font-size: var(--fs-small);
        margin-top: 4px;
    }}

    /* ====== TARJETAS PARA GRÁFICOS Y CONTENIDO ====== */
    .cab-card {{
        background: #0b0b0b;
        border: 1px solid rgba(212,175,55,.18);
        border-radius: 18px;
        padding: 16px 16px 12px 16px;
        box-shadow: 0 10px 24px rgba(0,0,0,.35);
        transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
        margin-bottom: 14px;
    }}

    .cab-card:hover {{
        transform: translateY(-2px);
        box-shadow: 0 16px 28px rgba(0,0,0,.45);
        border-color: rgba(212,175,55,.32);
    }}

    .cab-card .cab-card-title {{
        font-family: var(--font-title);
        color: var(--cabanna-white);
        font-size: var(--fs-h3);
        margin: 0 0 8px 0;
        letter-spacing: 0.3px;
        font-weight: 600;
    }}

    .cab-card .cab-card-sub {{
        color: #cfcfcf;
        font-size: var(--fs-small);
        margin: 0 0 8px 0;
        font-weight: 300;
    }}

    /* ====== TARJETAS DE VARIACIÓN (COMPARATIVOS) ====== */
    .var-card {{
        background: #0b0b0b;
        border: 1px solid rgba(212,175,55,.18);
        border-radius: 16px;
        padding: 14px 16px;
        margin-bottom: 12px;
        box-shadow: 0 6px 18px rgba(0,0,0,.25);
        min-height: 160px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
    }}

    .var-title {{
        font-family: 'Playfair Display', serif;
        font-size: 0.95rem;
        color: #FD6A02; 
        margin-bottom: 4px;
        font-weight: 600;
        letter-spacing: 0.5px;
    }}

    .var-value {{
        font-family: 'Playfair Display', serif;
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 1.2;
        margin: 2px 0 6px 0;
        color: var(--cabanna-white);
    }}

    .var-legend {{
        color: #cfcfcf;
        font-size: 0.85rem;
        margin-bottom: 4px;
        font-weight: 300;
    }}

    .var-range {{
        color: #9aa0a6;
        font-size: 0.8rem;
        font-style: italic;
    }}

    /* ====== UTILIDADES TIPOGRÁFICAS ====== */
    .t-serif   {{ font-family: var(--font-title); }}
    .t-sans    {{ font-family: var(--font-body);  }}
    .t-alt     {{ font-family: var(--font-alt);   }}
    .t-bold    {{ font-weight: 700; }}
    .t-black   {{ font-weight: 900; }}
    .t-gold    {{ color: var(--cabanna-gold); }}
    .t-brown   {{ color: var(--cabanna-brown); }}
    .t-dim     {{ color: #cfcfcf; }}
    .t-xs      {{ font-size: 0.78rem; }}
    .t-sm      {{ font-size: 0.9rem; }}
    .t-lg      {{ font-size: 1.1rem; }}

    /* ====== DISTRIBUCIÓN UNIFORME DE TARJETAS ====== */
    div[data-testid="column"] > div:has(.var-card) {{
        display: flex;
        flex-direction: column;
        height: 100%;
    }}

    .var-card {{
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }}

    /* Mejora de espaciado general */
    .main .block-container {{
        padding-top: 2rem;
        padding-bottom: 2rem;
    }}

    /* Ajuste para métricas de Streamlit */
    [data-testid="stMetric"] {{
        background: transparent;
    }}

    [data-testid="stMetricLabel"] {{
        color: #bdbdbd;
        font-size: var(--fs-small);
        font-weight: 400;
    }}



    </style>
    """,
    unsafe_allow_html=True,
)