/*
 * Site Monitoreo - Tipografía global compacta
 * Fase: UI typography Montserrat 2026-06-02
 *
 * Fuente principal: Montserrat.
 * Montserrat es una fuente open source ampliamente soportada para interfaces.
 * Este CSS intenta cargarla desde Google Fonts y mantiene fallbacks seguros si no carga.
 *
 * Si luego quieren evitar dependencia externa, se puede alojar Montserrat localmente
 * y reemplazar el @import por @font-face apuntando a /public/assets/fonts/montserrat/.
 */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

:root {
    --sm-font-family: 'Montserrat', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    --sm-font-size-base: 11px;
    --sm-font-size-small: 10px;
    --sm-font-size-title: 16px;
    --sm-font-size-heading: 18px;
    --sm-font-size-display: 20px;
    --sm-line-height: 1.38;
    --sm-letter-spacing: -0.005em;
}

html {
    font-size: var(--sm-font-size-base);
}

body {
    font-family: var(--sm-font-family) !important;
    font-size: var(--sm-font-size-base) !important;
    line-height: var(--sm-line-height);
    letter-spacing: var(--sm-letter-spacing);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body :where(
    :not(i):not(svg):not(path):not(.bi):not([class^='bi-']):not([class*=' bi-']):not(.fa):not([class^='fa-']):not([class*=' fa-']):not(.fa-solid):not(.fa-regular):not(.fa-brands)
) {
    font-family: var(--sm-font-family) !important;
}

/* Texto operativo: compacto y consistente en vistas, formularios, tablas y modales. */
body :where(
    .page,
    .card,
    .toolbar,
    .actions,
    .field,
    .form-grid,
    .modal,
    .modal-content,
    .dropdown-menu,
    .flash-modal,
    .sm-webnotify-panel,
    .login-card,
    .table,
    table,
    thead,
    tbody,
    tr,
    th,
    td,
    label,
    input,
    select,
    textarea,
    option,
    button,
    .btn,
    .badge,
    .alert,
    .menu a,
    .menu-label,
    .meta,
    .muted,
    .small,
    .form-control,
    .form-select,
    .form-label,
    .form-text,
    .input-group-text,
    .input-group-custom,
    .form-control-custom,
    .btn-login,
    .footer-copy,
    .sm-webnotify-title,
    .sm-webnotify-body,
    .sm-webnotify-meta,
    .gpsrep-page,
    .wdg,
    .condition-form-page
) {
    font-size: var(--sm-font-size-base) !important;
    line-height: var(--sm-line-height) !important;
}

/* Normaliza textos inline dispersos dentro del contenido sin afectar íconos. */
body .page :where(
    div,
    span,
    p,
    a,
    li,
    strong,
    em,
    code,
    b,
    small
):not(i):not(.bi):not([class^='bi-']):not([class*=' bi-']):not(.fa):not([class^='fa-']):not([class*=' fa-']):not(.brand-title):not(.brand-mark):not(.menu-icon) {
    font-size: var(--sm-font-size-base) !important;
    line-height: var(--sm-line-height) !important;
}

/* Texto secundario: etiquetas, ayudas, badges y metadatos. */
body :where(
    small,
    .small,
    .muted,
    .badge,
    th,
    .meta-label,
    .topbar-subtitle,
    .form-text,
    .help-text,
    .sm-webnotify-meta,
    .footer-copy,
    .gpsrep-label,
    .gpsrep-badge,
    .wdg-badge,
    .wdg-small
) {
    font-size: var(--sm-font-size-small) !important;
}

/* Montserrat necesita un poco más de peso para verse clara en 10/11px. */
body :where(
    th,
    label,
    .form-label,
    .badge,
    .btn,
    button,
    .menu-label,
    .topbar-title strong,
    .module-title
) {
    font-weight: 600;
}

/* Títulos: se mantiene jerarquía visual, pero con escala compacta. */
body :where(.topbar-title strong, .module-title, .flash-modal-title, .sm-webnotify-head strong) {
    font-size: var(--sm-font-size-title) !important;
    line-height: 1.22 !important;
    letter-spacing: -0.015em;
}

body :where(h1, .page-title, .wdg-title, .gpsrep-head h1) {
    font-size: var(--sm-font-size-heading) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em;
}

body :where(h2, h3, .brand-title) {
    font-size: var(--sm-font-size-title) !important;
    line-height: 1.22 !important;
    letter-spacing: -0.015em;
}

body :where(h4, h5, h6) {
    font-size: 13px !important;
    line-height: 1.28 !important;
}

/* Métricas/KPIs: compactas, pero legibles. */
body :where(
    .kpi-value,
    .metric-value,
    .stat-value,
    .stat-number,
    .gpsrep-kpi .value,
    .wdg-kpi .num
) {
    font-size: var(--sm-font-size-display) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.025em;
}

/* Ajustes finos para controles compactos. */
body :where(input, select, textarea, .form-control, .form-select, .form-control-custom) {
    min-height: 34px;
}

body :where(.btn, button, .btn-login) {
    min-height: 34px;
}

/* Evita que algunos componentes Bootstrap/heredados vuelvan a Inter o Arial. */
body :where(.dropdown, .dropdown-item, .nav, .nav-link, .tab, .tabs, .breadcrumb, .pagination, .page-link) {
    font-family: var(--sm-font-family) !important;
}