/* tests-styles.css - Estilos específicos para la página de tests */

/* Estilos para uniformizar los cuadrados de categoría y botones en vista de escritorio */
@media (min-width: 768px) {
    /* Contenedor principal de cada tarjeta de test */
    .test-card {
        display: flex;
        flex-direction: row;
    }
    
    /* Cuadrado de categoría */
    .test-category {
        width: 256px !important; /* Ancho fijo para todos los cuadrados */
        height: 180px !important; /* Altura fija para todos los cuadrados */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 1.5rem;
    }
    
    /* Contenedor de detalles (parte derecha) */
    .test-details {
        flex: 1;
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
    }
    
    /* Contenedor de descripción y tags */
    .test-info {
        flex: 1;
    }
    
    /* Contenedor del botón */
    .test-action {
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
    }
    
    /* Botón "Comenzar Test" */
    .begin-test-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 44px;
        width: 180px; /* Ancho fijo para todos los botones */
        font-size: 0.875rem;
        font-weight: 500;
        border-radius: 0.5rem;
        padding: 0 1rem;
        transition: all 0.3s ease;
    }
}

/* Mantener responsive en vista móvil */
@media (max-width: 767px) {
    .test-card {
        display: flex;
        flex-direction: column;
    }
    
    .test-category {
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    
    .test-details {
        padding: 1.5rem;
    }
    
    .test-action {
        margin-top: 1rem;
    }
    
    .begin-test-button {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0.5rem 1rem;
    }
}

/* Para corregir cualquier problema de alineación de íconos dentro de los botones */
.begin-test-button i {
    margin-right: 0.5rem;
}