/* Estilos específicos para tablets (768px - 1024px) - IDÉNTICO A INDEX.HTML */
/* Este archivo asegura que el texto sea negro en todos los quizzes en dispositivos tablet */

@media (min-width: 769px) and (max-width: 1024px) {
    /* Estilos generales para texto negro en tablets */
    .quiz-title {
        color: #000000 !important;
        font-size: clamp(1.8rem, 3.2vw, 2.5rem);
    }
    
    .question-text {
        color: var(--soft-white) !important;
        font-weight: 700 !important;
    }
    
    .option-text {
        color: var(--soft-white) !important;
        font-weight: 500 !important;
    }
    
    .indicator-value {
        color: var(--soft-white) !important;
    }
    
    .indicator-label {
        color: var(--text-light) !important;
    }
    
    .question-number {
        color: var(--text-light) !important;
    }
    
    /* Estilos consistentes con index.html */
    .option-letter {
        color: white !important;
    }
    
    /* Estilos de opciones consistentes con index.html */
    .option-button .option-text {
        color: var(--soft-white) !important;
        font-weight: 500 !important;
    }
    
    /* Estilos consistentes con index.html */
    .question-content {
        background: rgba(255, 255, 255, 0.05) !important;
        backdrop-filter: blur(10px);
    }
    
    .option-button {
        background: rgba(255, 255, 255, 0.05) !important;
        backdrop-filter: blur(10px);
        border: 2px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    .quiz-header {
        background: rgba(255, 255, 255, 0.05) !important;
        backdrop-filter: blur(10px);
        padding: 1rem !important;
    }
    
    .indicator-card {
        background: rgba(255, 255, 255, 0.05) !important;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    /* Estilos consistentes con index.html */
    .quiz-question-text {
        color: var(--soft-white) !important;
        font-weight: 700 !important;
        font-size: 1.25rem !important;
    }
    
    .form-check-label {
        color: var(--soft-white) !important;
        font-weight: 500 !important;
        font-size: 1rem !important;
    }
    
    .card-title {
        color: var(--soft-white) !important;
        font-weight: 700 !important;
    }
    
    .card-body {
        background: transparent !important;
        backdrop-filter: blur(10px);
    }
    
    /* Estilos consistentes con index.html */
    h1, h2, h3, h4, h5, h6, p {
        color: var(--soft-white) !important;
    }
    
    /* Estilos de opciones consistentes con index.html */
    .option-card .option-text,
    .form-check .form-check-label {
        color: var(--soft-white) !important;
        font-weight: 500 !important;
    }
    
    /* Estilos específicos para tablets - consistentes con index.html */
    .option-card {
        background: rgba(255, 255, 255, 0.05) !important;
        backdrop-filter: blur(10px);
        border: 2px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    .form-check {
        background: rgba(255, 255, 255, 0.05) !important;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 8px !important;
        padding: 1rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Estilos específicos para cards - consistentes con index.html */
    .card {
        background: rgba(255, 255, 255, 0.05) !important;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    /* Estilos para elementos específicos de quiz - consistentes con index.html */
    .quiz-container {
        background: transparent !important;
        backdrop-filter: blur(10px);
    }
    
    /* Estilos de badges consistentes con index.html */
    .badge {
        color: var(--soft-white) !important;
    }
    
    /* Estilos para elementos de navegación - consistentes con index.html */
    .navbar {
        background: rgba(255, 255, 255, 0.05) !important;
        backdrop-filter: blur(10px);
    }
    
    .navbar-brand,
    .navbar-nav .nav-link {
        color: var(--soft-white) !important;
    }
    
    /* Media queries específicas para orientación en tablets */
    .quiz-container,
    .result-container {
        padding: 1.5rem 2rem;
    }
    
    .quiz-header,
    .question-content,
    .result-header {
        padding: 2rem;
    }
    
    .quiz-question-text {
        font-size: 1.3rem !important;
    }
    
    .form-check-label {
        font-size: 1.1rem !important;
    }
    
    .option-button {
        padding: 1.25rem;
        min-height: 60px;
    }
}

/* Media queries específicas para orientación en tablets */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
    .quiz-container,
    .result-container {
        padding: 1rem 2.5rem;
    }
    
    .quiz-header,
    .question-content,
    .result-header {
        padding: 1.5rem;
    }
    
    .quiz-title {
        font-size: clamp(1.6rem, 2.8vw, 2.2rem);
    }
    
    .quiz-question-text {
        font-size: 1.2rem !important;
    }
    
    .form-check-label {
        font-size: 1rem !important;
    }
    
    .option-button {
        padding: 1rem;
        min-height: 55px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
    .quiz-container,
    .result-container {
        padding: 2rem;
    }
    
    .quiz-header,
    .question-content,
    .result-header {
        padding: 2.5rem;
    }
    
    .quiz-title {
        font-size: clamp(2rem, 3.5vw, 2.8rem);
    }
    
    .quiz-question-text {
        font-size: 1.4rem !important;
    }
    
    .form-check-label {
        font-size: 1.2rem !important;
    }
    
    .option-button {
        padding: 1.5rem;
        min-height: 65px;
    }
}