/* ==========================================================================
   typography.css — Sistema tipografico global de Entropy.

   Tipos:
     - DM Serif Display : titulos editoriales (paginas, secciones, KPIs grandes).
     - DM Sans          : cuerpo, labels, botones, navegacion.

   Filosofia:
     - Suavizar el "look IA" de Inter @ 800: bajamos los headlines pesados y
       los sustituimos por un serif elegante (DM Serif Display) que da
       jerarquia visual sin necesidad de pesos extremos.
     - Tracking reducido (-0.01em en serif headlines) y mas humano en labels
       (.06em-.08em) para alejarse del look "tech bro" 100% sans bold.
     - tabular-nums en numeros financieros para alineacion vertical limpia.

   IMPORTA: este archivo @importa las fuentes desde Google. Cargarlo es lo
   unico que hace falta — no necesitas tocar los <link> de cada layout.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=DM+Serif+Display:ital@0;1&display=swap');

/* --------------------------------------------------------------------------
   1) BODY + INPUTS / BOTONES — fuente sans-serif principal.
   Usamos !important porque varios archivos (dashboard.css, finanzas.css,
   formularios MUI) tienen 'Inter', sans-serif hardcodeado y queremos
   centralizar el cambio en un solo punto.
   -------------------------------------------------------------------------- */
body,
input,
textarea,
select,
button,
.mui-input,
.mui-btn,
.mui-textfield,
.mui-label,
.material-icons-outlined + span,
.menu-link,
.btn-primary-capsule,
.btn-white-capsule,
.btn-action-outline {
    font-family: 'DM Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* --------------------------------------------------------------------------
   2) HEADLINES EDITORIALES — DM Serif Display, peso normal, tracking suave.
   Cubre titulos de seccion / paginas en los modulos principales.
   -------------------------------------------------------------------------- */
h1,
h2.section-title,
.section-title,
.calendar-title,
.feature-title,
.al-ch-title,
.al-chart-title,
.hm-ov-heading,
.inv-title,
.inv-detail-title,
.inv-chart-title,
.shop-box-title h2,
.maintenance-score .score-title,
.manage-recent-heading,
.score-title,
.recipes-panel-title h2,
.profile-summary-name,
.entropy-overview h3,
.feature-card-title {
    font-family: 'DM Serif Display', 'Times New Roman', Georgia, serif;
    font-weight: 400; /* DM Serif Display ya es robusto de por si */
    letter-spacing: -0.01em;
    /* DM Serif Display no tiene varios pesos; con normal basta. */
}

/* Subtitulos: DM Sans 500 (no 800) con tracking minimo. */
.section-subtitle,
.feature-subtitle,
.al-ch-eyebrow + .al-ch-title + p,
.score-sub,
.hm-ov-sub,
.info-desc {
    font-weight: 500;
    letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   3) CIFRAS GRANDES / KPIs — serif + tabular-nums para alineacion vertical.
   -------------------------------------------------------------------------- */
.hm-ov-kpi-val,
.hm-score-num,
.al-counter-num,
.al-total-num,
.kpi-value,
.kpi-card strong,
.finanzas-kpi-number,
.finanzas-categorias-kpi-value,
.finanzas-advisor-value,
.finanzas-summary-card .info-title,
.inv-stat-value,
.inv-detail-price-value,
.inv-portfolio-center-value,
.profile-entropy-value,
.profile-inventory-value,
.maintenance-score .score-ring strong {
    font-family: 'DM Serif Display', 'Times New Roman', Georgia, serif;
    font-weight: 400;
    letter-spacing: -0.015em;
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   4) TABULAR-NUMS en cualquier tabla financiera/datos para alineacion.
   -------------------------------------------------------------------------- */
.finanzas-table,
.finanzas-table th,
.finanzas-table td,
.finanzas-history-table,
.finanzas-history-table th,
.finanzas-history-table td,
.finanzas-categorias-table,
.finanzas-categorias-table th,
.finanzas-categorias-table td,
.market-table,
.market-table th,
.market-table td,
.admin-table,
.admin-table th,
.admin-table td,
.finanzas-amount-pill,
.finanzas-balance-pill,
.finanzas-history-amount,
.stat-chip-value {
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   5) LABELS EYEBROW — peso medio (500), tracking visible (.08em).
   Se aleja del look "uppercase 800 super wide" tipico de templates AI.
   -------------------------------------------------------------------------- */
.info-label,
.al-chart-eyebrow,
.al-ch-eyebrow,
.al-counter-label,
.al-cta-kicker,
.al-total-label,
.hm-ov-eyebrow,
.mk-eyebrow,
.mk-eyebrow--replace,
.inv-stat-label,
.inv-portfolio-center-label,
.feature-tag,
.status-tag,
.finanzas-filter-label,
.finanzas-categorias-pill,
.profile-entropy-title,
.profile-inventory-label,
.market-symbol-chip,
.feature-eyebrow,
.entropy-overview .label,
.recipes-meta {
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   6) BOTONES & BADGES — peso 600 (no 800), tracking suave.
   -------------------------------------------------------------------------- */
.btn-primary-capsule,
.btn-white-capsule,
.btn-action-outline,
.mui-btn,
.mui-btn-contained,
.action-pill,
.al-resolve-all-btn,
.al-clear-btn,
.menu-link,
.header-username-tag,
.mk-action-strong,
.mk-action-soft {
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* --------------------------------------------------------------------------
   7) BRAND / LOGOTIPO — DM Serif Display da un aire mas editorial.
   -------------------------------------------------------------------------- */
.brand-main {
    font-family: 'DM Serif Display', 'Times New Roman', Georgia, serif;
    font-weight: 400;
    letter-spacing: -0.5px;
}

.brand-tagline {
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    letter-spacing: 0.18em;
}

/* --------------------------------------------------------------------------
   8) Ajustes finos — bajar weights extremos donde detectamos 800.
   Hacemos esto en los selectores mas obvios; el resto del CSS los pilla via
   las cascadas anteriores.
   -------------------------------------------------------------------------- */
.al-ch-title,
.al-counter-num,
.hm-ov-heading,
.hm-ov-kpi-val,
.inv-title,
.section-title {
    /* Sobrescribe font-weight:800 de varios css hijos. Con DM Serif Display
       el peso 400 ya da suficiente jerarquia. */
    font-weight: 400 !important;
}

/* No tocamos badges/status pills coloreados — sus colores siguen marcando jerarquia. */

/* --------------------------------------------------------------------------
   9) EXCEPCION: modulo de finanzas (/finanzas/*).
   El usuario prefiere que los numeros del area financiera usen DM Sans
   bold (look "data-heavy" mas tipico de fintech) en vez del serif editorial.
   Conservamos tabular-nums para que las cifras sigan alineadas.
   Las KPIs y precios dentro de .finanzas-workspace vuelven al sans.
   -------------------------------------------------------------------------- */
.finanzas-workspace .finanzas-kpi-number,
.finanzas-workspace .finanzas-categorias-kpi-value,
.finanzas-workspace .finanzas-advisor-value,
.finanzas-workspace .info-title,
.finanzas-workspace .inv-stat-value,
.finanzas-workspace .inv-detail-price-value,
.finanzas-workspace .inv-portfolio-center-value,
.finanzas-workspace .finanzas-summary-card .info-title,
.finanzas-workspace .kpi-value,
.finanzas-workspace .finanzas-amount-pill,
.finanzas-workspace .finanzas-balance-pill {
    font-family: 'DM Sans', 'Inter', system-ui, -apple-system, sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    font-variant-numeric: tabular-nums !important;
}

/* --------------------------------------------------------------------------
   10) EXCEPCION: marca "Entropy" (logo) en welcome y sidebar.
   El usuario prefiere mantener el look "wordmark sans bold" original (Inter)
   en lugar del serif editorial. Aplica a:
     - <h1>Entropy</h1> dentro de .text-layer (welcome.blade.php)
     - .brand-main (sidebar de la app)
   -------------------------------------------------------------------------- */
.text-layer h1,
.brand-main {
    font-family: 'Inter', 'DM Sans', system-ui, -apple-system, sans-serif !important;
}

/* Mantenemos el peso y tracking originales de cada uno. */
.text-layer h1 {
    font-weight: 500 !important;
    letter-spacing: -6px !important;
}

.brand-main {
    font-weight: 800 !important;
    letter-spacing: -1.2px !important;
}