/* =========================================================
   UI Typography (NO afecta DataTables)
   Cargar DESPUÉS de Bootstrap/tema
   Ámbito: body.dashboard-topbar-wrapper
   ========================================================= */

/* -------- Variables base -------- */
.dashboard-topbar-wrapper {
    --ui-font: 1rem; /* texto base (p, li, etc.) */
    --ui-line: 1.5;
    --ui-label: .95rem; /* labels / form-text */
    --ui-input: .95rem; /* form-control / select / input-group-text */
    --ui-btn: .95rem; /* botones */

    --ui-nav: .95rem; /* nav-link / topbar */
    --ui-dd: .95rem; /* dropdown menu/item */

    --ui-card-title: 1.05rem;
    --ui-card-text: .98rem;
    --ui-modal-title: 1.10rem;
    --ui-modal-body: .98rem;
    --ui-badge: calc(var(--ui-font) * .85);
    --ui-breadcrumb: .92rem;
    --ui-brand: 1.05rem; /* .titleCompany u otros títulos en topbar */
}

    /* -------- Aplicación de fuentes (sin tablas) -------- */
    .dashboard-topbar-wrapper,
    .dashboard-topbar-wrapper p,
    .dashboard-topbar-wrapper li,
    .dashboard-topbar-wrapper small,
    .dashboard-topbar-wrapper .text-body {
        font-size: var(--ui-font);
        line-height: var(--ui-line);
    }

        /* Formularios */
        .dashboard-topbar-wrapper .form-label,
        .dashboard-topbar-wrapper .form-text {
            font-size: var(--ui-label);
        }

        .dashboard-topbar-wrapper .form-control,
        .dashboard-topbar-wrapper .form-select,
        .dashboard-topbar-wrapper .input-group-text {
            font-size: var(--ui-input);
        }

        /* Botones (no toca los de DataTables porque están en .dataTables_wrapper) */
        .dashboard-topbar-wrapper .btn {
            font-size: var(--ui-btn);
        }

        /* Navegación / Topbar */
        .dashboard-topbar-wrapper .nav-link,
        .dashboard-topbar-wrapper .navbar .nav-link,
        .dashboard-topbar-wrapper .topbar-nav .nav-link {
            font-size: var(--ui-nav);
        }

        /* Dropdowns */
        .dashboard-topbar-wrapper .dropdown-menu,
        .dashboard-topbar-wrapper .dropdown-item {
            font-size: var(--ui-dd);
        }

        /* Cards */
        .dashboard-topbar-wrapper .card-title {
            font-size: var(--ui-card-title);
        }

        .dashboard-topbar-wrapper .card-subtitle {
            font-size: calc(var(--ui-card-title) - .15rem);
        }

        .dashboard-topbar-wrapper .card-text {
            font-size: var(--ui-card-text);
        }

        /* Modales */
        .dashboard-topbar-wrapper .modal-title {
            font-size: var(--ui-modal-title);
        }

        .dashboard-topbar-wrapper .modal-body,
        .dashboard-topbar-wrapper .modal-footer .btn {
            font-size: var(--ui-modal-body);
        }

        /* Otros */
        .dashboard-topbar-wrapper .badge {
            font-size: var(--ui-badge);
        }

        .dashboard-topbar-wrapper .alert {
            font-size: var(--ui-font);
        }

        .dashboard-topbar-wrapper .breadcrumb,
        .dashboard-topbar-wrapper .breadcrumb .breadcrumb-item {
            font-size: var(--ui-breadcrumb);
        }

        /* Marca/Título de empresa en topbar */
        .dashboard-topbar-wrapper .titleCompany {
            font-size: var(--ui-brand);
        }

/* -------- Breakpoints: reduce en pantallas menores -------- */
/* <= 1440 */
@media (max-width: 1439.98px) {
    .dashboard-topbar-wrapper {
        --ui-font: .96rem;
        --ui-label: .92rem;
        --ui-input: .92rem;
        --ui-btn: .92rem;
        --ui-nav: .92rem;
        --ui-dd: .92rem;
        --ui-card-title: 1.02rem;
        --ui-card-text: .95rem;
        --ui-modal-title: 1.06rem;
        --ui-modal-body: .95rem;
        --ui-breadcrumb: .90rem;
        --ui-brand: 1.00rem;
    }
}
/* <= 1366 (típico 1366×768) */
@media (max-width: 1366px) {
    .dashboard-topbar-wrapper {
        --ui-font: .92rem;
        --ui-label: .90rem;
        --ui-input: .90rem;
        --ui-btn: .90rem;
        --ui-nav: .90rem;
        --ui-dd: .90rem;
        --ui-card-title: 1.00rem;
        --ui-card-text: .93rem;
        --ui-modal-title: 1.04rem;
        --ui-modal-body: .93rem;
        --ui-breadcrumb: .88rem;
        --ui-brand: .98rem;
    }
}
/* <= 1140 */
@media (max-width: 1140px) {
    .dashboard-topbar-wrapper {
        --ui-font: .90rem;
        --ui-label: .88rem;
        --ui-input: .88rem;
        --ui-btn: .88rem;
        --ui-nav: .88rem;
        --ui-dd: .88rem;
        --ui-card-title: .98rem;
        --ui-card-text: .90rem;
        --ui-modal-title: 1.02rem;
        --ui-modal-body: .90rem;
        --ui-breadcrumb: .86rem;
        --ui-brand: .96rem;
    }
}
/* <= 992 */
@media (max-width: 991.98px) {
    .dashboard-topbar-wrapper {
        --ui-font: .88rem;
        --ui-label: .86rem;
        --ui-input: .86rem;
        --ui-btn: .86rem;
        --ui-nav: .86rem;
        --ui-dd: .86rem;
        --ui-card-title: .96rem;
        --ui-card-text: .88rem;
        --ui-modal-title: 1.00rem;
        --ui-modal-body: .88rem;
        --ui-breadcrumb: .84rem;
        --ui-brand: .94rem;
    }
}
/* <= 768 */
@media (max-width: 767.98px) {
    .dashboard-topbar-wrapper {
        --ui-font: .86rem;
        --ui-label: .84rem;
        --ui-input: .84rem;
        --ui-btn: .84rem;
        --ui-nav: .84rem;
        --ui-dd: .84rem;
        --ui-card-title: .94rem;
        --ui-card-text: .86rem;
        --ui-modal-title: .98rem;
        --ui-modal-body: .86rem;
        --ui-breadcrumb: .82rem;
        --ui-brand: .92rem;
    }
}
/* <= 576 */
@media (max-width: 575.98px) {
    .dashboard-topbar-wrapper {
        --ui-font: .84rem;
        --ui-label: .82rem;
        --ui-input: .82rem;
        --ui-btn: .82rem;
        --ui-nav: .82rem;
        --ui-dd: .82rem;
        --ui-card-title: .92rem;
        --ui-card-text: .84rem;
        --ui-modal-title: .96rem;
        --ui-modal-body: .84rem;
        --ui-breadcrumb: .80rem;
        --ui-brand: .90rem;
    }
}