/* Estilos específicos para móvil en componentes de pensiones */

/* Solo aplicar en móvil (menos de 640px) */
@media (max-width: 639px) {
    /* Títulos de tarjetas */
    .titulo-tarjeta-responsive {
        font-size: 1.125rem !important; /* text-lg equivalent */
    }
    
    /* Montos de pensión */
    .monto-pension-responsive {
        font-size: 2.25rem !important; /* text-4xl equivalent */
        line-height: 2.5rem !important;
    }
    
    /* Botones de tarjetas */
    .boton-tarjeta-responsive {
        font-size: 1.125rem !important; /* text-lg equivalent */
        padding: 0.75rem 1rem !important; /* py-3 px-4 equivalent */
        margin-top: 1.5rem !important; /* mt-6 equivalent */
    }
    
    /* Título de bienvenida */
    .titulo-bienvenida-responsive {
        font-size: 1.25rem !important; /* text-xl equivalent */
        line-height: 1.75rem !important;
    }
    
    /* Fix para el scroll en SimuladorCalculadora */
    .table-container {
        max-height: 200px !important;
        overflow-x: auto !important;
        overflow-y: auto !important;
    }
    
    /* Limitar altura de contenedores de tabla con overflow */
    .overflow-x-auto .max-h-\[400px\],
    .overflow-x-auto .max-h-\[600px\],
    div[class*="max-h-"][class*="overflow-y-auto"] {
        max-height: 200px !important;
    }
    
    /* Ajustar z-index del botón PROYECTAR PENSIÓN */
    .sticky.bottom-0 {
        z-index: 100 !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background-color: white !important;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1) !important;
        padding-bottom: env(safe-area-inset-bottom) !important;
    }
    
    /* Reducir z-index de elementos de tabla que pueden interferir */
    thead.sticky {
        z-index: 40 !important;
    }
    
    .sticky.left-0,
    .sticky.left-\[50px\] {
        z-index: 30 !important;
    }
    
    /* Asegurar que el contenedor del botón no sea tapado */
    div[style*="z-index: 10"] {
        z-index: 100 !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background-color: white !important;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1) !important;
        padding-bottom: env(safe-area-inset-bottom) !important;
    }
    
    /* Agregar padding inferior al contenido para que no quede oculto por el botón fijo */
    .tab-content,
    div[role="tabpanel"] {
        padding-bottom: 100px !important;
    }
}

/* Mantener estilos originales en desktop (640px y más) */
@media (min-width: 640px) {
    /* No override - mantiene clases de Tailwind originales */
}