/* ============================================
   SISTEMA DE ESCALADO RESPONSIVO (FLUID UI)
   Optimización para pantallas pequeñas y grandes
   ============================================ */

:root {
    /* 
       Escalado fluido del tamaño base (Más denso):
       - 13px en 320px
       - 15px en 1280px
    */
    font-size: clamp(0.8125rem, 0.77rem + 0.208vw, 0.9375rem);

    /* Variables de espaciado dinámico (Reducido) */
    --padding-card: clamp(0.6rem, 0.5rem + 0.5vw, 1rem);
    --padding-section: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
    --sidebar-w: clamp(200px, 15vw + 80px, 240px);
}

/* Reducción de tamaños globales para evitar "cosas muy grandes" */
@media (max-width: 768px) {
    body {
        -webkit-text-size-adjust: 100%;
    }

    /* Forzar que las fuentes de inputs y botones no se desborden visualmente */
    input,
    select,
    textarea,
    button {
        font-size: 14px !important;
        /* Evita zoom automático en iOS y mantiene control */
    }

    /* Reducir títulos desproporcionados */
    h1 {
        font-size: 1.5rem !important;
    }

    h2 {
        font-size: 1.3rem !important;
    }

    h3 {
        font-size: 1.1rem !important;
    }

    /* Optimizar headers de tarjetas */
    .card-header {
        padding: 0.75rem 1rem !important;
    }

    .card-title {
        font-size: 0.9rem !important;
    }
}

/* Optimización extra para móviles muy pequeños */
@media (max-width: 480px) {
    :root {
        --padding-card: 0.75rem;
    }

    .stats-card {
        padding: 0.75rem !important;
    }

    .stat-icon {
        width: 38px !important;
        height: 38px !important;
        font-size: 1.2rem !important;
    }

    .stat-info h3 {
        font-size: 1.2rem !important;
    }
}