/* Estilos específicos para mejorar el responsive design de la calculadora ISR */

/* Asegurar que no haya overflow horizontal en pantallas pequeñas */
@media (max-width: 640px) {
    .calculadora-isr-container {
        overflow-x: hidden;
        width: 100%;
    }
    
    /* Mejorar el espaciado en tabs */
    .calculadora-isr-tabs {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .calculadora-isr-tab-button {
        width: 100%;
        text-align: center;
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }
    
    /* Mejorar grids en pantallas pequeñas */
    .calculadora-isr-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    /* Mejorar elementos con justify-between */
    .calculadora-isr-flex-between {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }
    
    /* Reducir padding en tarjetas */
    .calculadora-isr-card {
        padding: 0.75rem;
    }
    
    /* Mejorar texto en elementos flexibles */
    .calculadora-isr-text-responsive {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
    
    /* Asegurar que los botones no se salgan */
    .calculadora-isr-button {
        width: 100%;
        max-width: none;
    }
}

/* Mejoras específicas para pantallas muy pequeñas (375px) */
@media (max-width: 375px) {
    .calculadora-isr-container {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    .calculadora-isr-tab-button {
        font-size: 0.8rem;
        padding: 0.5rem 0.75rem;
    }
    
    .calculadora-isr-card {
        padding: 0.5rem;
    }
    
    .calculadora-isr-text-responsive {
        font-size: 0.8rem;
    }
}

/* Asegurar que los elementos con texto largo no causen overflow */
.calculadora-isr-text-wrap {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Mejorar la legibilidad en pantallas pequeñas */
@media (max-width: 640px) {
    .calculadora-isr-heading {
        font-size: 1.125rem;
        line-height: 1.5rem;
    }
    
    .calculadora-isr-subheading {
        font-size: 1rem;
        line-height: 1.375rem;
    }
    
    .calculadora-isr-body-text {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
}
