/* ============================================ */
/* responsive.css - VERSIÓN DEFINITIVA */
/* AJUSTES PARA TODAS LAS PÁGINAS DE FIX YOU */
/* ============================================ */

/* ============================================ */
/* PANTALLAS MUY CHICAS (menos de 400px) */
/* ============================================ */
@media screen and (max-width: 400px) {
    .container {
        padding: 15px 12px !important;
    }
    
    h2 {
        font-size: 1.6rem !important;
    }
    
    h3 {
        font-size: 1.3rem !important;
    }
    
    .logo {
        font-size: 2.5rem !important;
    }
    
    .logo-you {
        font-size: 2.2rem !important;
    }
    
    .heart-icon {
        font-size: 2.2rem !important;
    }
    
    .logo-tagline {
        font-size: 0.9rem !important;
    }
}

/* ============================================ */
/* CELULARES (hasta 600px) - REGLAS UNIVERSALES */
/* ============================================ */
@media screen and (max-width: 600px) {
    
    /* === CONTENEDOR PRINCIPAL === */
    .container {
        padding: 20px 15px !important;
    }
    
    /* === BARRA DE USUARIO === */
    .user-bar {
        flex-direction: column !important;
        align-items: flex-end !important;
        gap: 8px !important;
        padding: 0 10px !important;
    }
    
    .user-email {
        font-size: 0.85rem !important;
        padding: 5px 12px !important;
    }
    
    .logout-btn {
        padding: 5px 12px !important;
        font-size: 0.85rem !important;
    }
    
    /* === LOGO === */
    .logo {
        font-size: 3rem !important;
        gap: 5px !important;
    }
    
    .logo-fix {
        font-size: 3rem !important;
    }
    
    .logo-you {
        font-size: 2.5rem !important;
    }
    
    .heart-icon {
        font-size: 2.5rem !important;
    }
    
    .logo-tagline {
        font-size: 1rem !important;
        padding: 0 10px !important;
    }
    
    /* === TÍTULOS === */
    h2 {
        font-size: 1.8rem !important;
    }
    
    h3 {
        font-size: 1.4rem !important;
    }
    
    h4 {
        font-size: 1.2rem !important;
    }
    
    p, span, li, a, small, label, .autor-detalle, .comentario-texto {
        font-size: 0.95rem !important;
    }
    
    /* === ADVERTENCIA === */
    .warning, .aviso-legal {
        padding: 15px !important;
        font-size: 0.9rem !important;
        margin: 15px 0 !important;
    }
    
    /* ======================================== */
    /* GRIDS - REGLAS UNIVERSALES */
    /* ======================================== */
    
    /* Grid de autores (explorador) */
    #step2a > div[style*="grid-template-columns: repeat(5, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    /* Grid de features (index) */
    .features {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    /* Grid de opciones (YA SÉ / NO SÉ) */
    .option-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    /* Grid de síntomas */
    .sintomas-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    
    /* Grid de estadísticas (seguimiento) */
    .stats-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    
    /* ======================================== */
    /* TARJETAS - TODAS CON MISMO ALTO */
    /* ======================================== */
    
    /* Tarjetas de autor */
    .author-card {
        min-height: 140px !important;
        padding: 12px 5px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
    
    .author-icon {
        font-size: 1.8rem !important;
        margin-bottom: 3px !important;
    }
    
    .author-card h4 {
        font-size: 1rem !important;
        margin: 2px 0 !important;
    }
    
    .author-card p {
        font-size: 0.75rem !important;
        margin: 2px 0 !important;
    }
    
    .author-card small {
        font-size: 0.65rem !important;
    }
    
    /* Tarjetas de features */
    .feature-card {
        min-height: 200px !important;
        padding: 20px 15px !important;
    }
    
    .feature-icon {
        font-size: 2.2rem !important;
        margin-bottom: 10px !important;
    }
    
    .feature-card h3 {
        font-size: 1.4rem !important;
        margin-bottom: 8px !important;
    }
    
    .feature-card p {
        font-size: 0.9rem !important;
    }
    
    /* Tarjetas de opción (YA SÉ / NO SÉ) */
    .option-card {
        padding: 25px 15px !important;
    }
    
    .option-icon {
        font-size: 3rem !important;
    }
    
    .option-card h3 {
        font-size: 1.6rem !important;
    }
    
    /* Tarjetas de comentarios (comunidad) */
    .comentario-card {
        padding: 15px !important;
        margin-bottom: 15px !important;
    }
    
    .comentario-autor {
        font-size: 1rem !important;
    }
    
    .comentario-fecha {
        font-size: 0.75rem !important;
    }
    
    .estrellas {
        font-size: 1rem !important;
    }
    
    /* Tarjetas de autor en seguimiento */
    .autor-card {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 15px !important;
    }
    
    .autor-info {
        width: 100% !important;
    }
    
    .autor-nombre {
        font-size: 1.2rem !important;
    }
    
    .autor-detalle {
        font-size: 0.85rem !important;
    }
    
    /* Tarjetas de nivel (enfoques) */
    .nivel {
        padding: 20px 15px !important;
    }
    
    .nivel h2 {
        font-size: 1.5rem !important;
    }
    
    .nivel li {
        font-size: 0.95rem !important;
        gap: 10px !important;
    }
    
    .nivel input[type="checkbox"] {
        width: 20px !important;
        height: 20px !important;
    }
    
    /* Tarjetas de resultado */
    .result-box {
        padding: 20px 15px !important;
    }
    
    .result-box h3 {
        font-size: 1.3rem !important;
    }
    
    .resultado-destacado {
        font-size: 1.3rem !important;
    }
    
    /* Tarjetas de tendencia */
    .tendencia-card {
        min-width: 100% !important;
        margin-bottom: 10px !important;
        padding: 15px !important;
    }
    
    /* Tarjetas de test */
    .test-card {
        padding: 20px 15px !important;
    }
    
    .question h3 {
        font-size: 1.1rem !important;
    }
    
    .options {
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .options label {
        width: 100% !important;
        justify-content: center !important;
    }
    
    /* Tarjetas de historial */
    .test-item {
        padding: 12px !important;
    }
    
    .test-puntaje {
        font-size: 1rem !important;
    }
    
    /* ======================================== */
    /* BOTONES - TODOS OCUPAN ANCHO COMPLETO */
    /* ======================================== */
    
    .btn,
    .btn-small,
    .btn-naranja,
    .btn-seguir,
    .btn-volver,
    .btn-donar,
    .btn-verde,
    .btn-pago,
    .btn-detalle,
    .crisis-btn-small,
    .btn-ver-todas,
    .btn-wa,
    button[class*="btn"] {
        width: 100% !important;
        margin: 8px 0 !important;
        padding: 12px 15px !important;
        font-size: 1rem !important;
        text-align: center !important;
        display: block !important;
        box-sizing: border-box !important;
    }
    
    /* Botones pequeños dentro de tarjetas */
    .btn-seguir {
        width: 100% !important;
        margin-top: 10px !important;
    }
    
    /* Botón de test count */
    .test-count {
        display: inline-block !important;
        margin-left: 5px !important;
    }
    
    /* ======================================== */
    /* FORMULARIOS */
    /* ======================================== */
    
    .buscador-box {
        padding: 20px 15px !important;
    }
    
    textarea,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    #comentarioInput {
        padding: 12px !important;
        font-size: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 8px 0 !important;
    }
    
    /* Estrellas input */
    .estrellas-input {
        gap: 3px !important;
    }
    
    .estrellas-input span {
        font-size: 1.8rem !important;
    }
    
    /* Checkbox group */
    .checkbox-group {
        margin: 10px 0 !important;
    }
    
    /* ======================================== */
    /* PANEL DE CRISIS */
    /* ======================================== */
    
    .crisis-content {
        max-width: 95% !important;
        width: 95% !important;
        padding: 20px 15px !important;
        max-height: 85vh !important;
    }
    
    .crisis-content h2 {
        font-size: 1.6rem !important;
    }
    
    .crisis-breathe {
        width: 60px !important;
        height: 60px !important;
    }
    
    .crisis-btn-small {
        margin: 10px 0 !important;
    }
    
    /* Botón flotante de crisis */
    #crisis-flotante {
        width: 55px !important;
        height: 55px !important;
        top: 80px !important;
        right: 10px !important;
        font-size: 0.6rem !important;
    }
    
    #crisis-flotante span:first-child {
        font-size: 1.3rem !important;
    }
    
    /* Ventana de ayuda */
    .ventana-ayuda {
        width: 95% !important;
        max-width: 95% !important;
        height: 85vh !important;
        padding: 20px 15px !important;
    }
    
    .ayuda-header h3 {
        font-size: 1.4rem !important;
    }
    
    .linea-item {
        padding: 12px !important;
        margin: 8px 0 !important;
    }
    
    /* ======================================== */
    /* BOTÓN CASA FLOTANTE */
    /* ======================================== */
    
    .home-btn {
        width: 50px !important;
        height: 50px !important;
        bottom: 15px !important;
        left: 15px !important;
        font-size: 1.6rem !important;
    }
    
    .home-btn::after {
        font-size: 0.7rem !important;
        left: 60px !important;
    }
    
    /* ======================================== */
    /* MODAL DE HISTORIAL */
    /* ======================================== */
    
    #modalHistorial {
        width: 95% !important;
        padding: 20px 15px !important;
        max-height: 80vh !important;
    }
    
    /* ======================================== */
    /* FOOTER */
    /* ======================================== */
    
    footer {
        margin-top: 40px !important;
        padding: 25px 15px !important;
    }
    
    .footer-links {
        flex-direction: column !important;
        gap: 15px !important;
        align-items: center !important;
    }
    
    .footer-links a {
        font-size: 0.9rem !important;
        padding: 5px 0 !important;
    }
    
    /* ======================================== */
    /* SECCIONES ESPECIALES */
    /* ======================================== */
    
    /* Timer box (enfoques) */
    .timer-box {
        padding: 15px !important;
    }
    
    .timer-box .tiempo {
        font-size: 2rem !important;
    }
    
    /* Donaciones */
    .donaciones {
        padding: 20px 15px !important;
        margin: 30px 0 !important;
    }
    
    /* Valoración */
    .valoracion {
        padding: 20px 15px !important;
    }
    
    .estrellas {
        font-size: 1.8rem !important;
        gap: 5px !important;
    }
    
    /* Motivación */
    .motivacion {
        padding: 20px 15px !important;
        font-size: 1rem !important;
    }
    
    /* Progreso */
    .progreso-texto {
        font-size: 0.8rem !important;
    }
    
    /* Tips container */
    .tips-container {
        padding: 20px 15px !important;
    }
    
    /* Extension container */
    #extensionContainer {
        padding: 15px !important;
    }
    
    /* Pago container */
    #pagoContainer > div {
        width: 95% !important;
        padding: 15px !important;
    }
    
    /* Bot de contención */
    #fixxy-toggle {
        bottom: 20px !important;
        right: 10px !important;
    }
    
    #fixxy-toggle img {
        width: 40px !important;
        height: 40px !important;
    }
    
    #fixxy-toggle span {
        font-size: 0.8rem !important;
        padding: 4px 10px !important;
    }
    
    #botBloqueadoMsg {
        max-width: 250px !important;
        padding: 15px !important;
        bottom: 80px !important;
    }
    
    /* Estado vacío */
    .empty-state {
        padding: 30px 20px !important;
    }
}

/* ============================================ */
/* TABLETS (601px a 900px) */
/* ============================================ */
@media screen and (min-width: 601px) and (max-width: 900px) {
    
    .container {
        padding: 30px 20px !important;
    }
    
    /* Grid de autores: 3 columnas */
    #step2a > div[style*="grid-template-columns: repeat(5, 1fr)"] {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    /* Features: 2 columnas */
    .features {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* Opciones: 2 columnas */
    .option-grid {
        grid-template-columns: 1fr 1fr !important;
    }
    
    /* Síntomas: 2 columnas */
    .sintomas-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* Stats: 2 columnas */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* Tarjetas de autor en seguimiento */
    .autor-card {
        flex-direction: row !important;
        align-items: center !important;
    }
    
    .btn-seguir {
        width: auto !important;
        min-width: 120px !important;
    }
}

/* ============================================ */
/* TABLETS GRANDES / DESKTOP CHICO (901px a 1200px) */
/* ============================================ */
@media screen and (min-width: 901px) and (max-width: 1200px) {
    
    .container {
        max-width: 1000px !important;
    }
    
    /* Grid de autores: 4 columnas */
    #step2a > div[style*="grid-template-columns: repeat(5, 1fr)"] {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    
    /* Stats: 3 columnas */
    .stats-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ============================================ */
/* PANTALLAS GRANDES (1201px en adelante) */
/* ============================================ */
@media screen and (min-width: 1201px) {
    .container {
        max-width: 1400px !important;
    }
    
    #step2a > div[style*="grid-template-columns: repeat(5, 1fr)"] {
        grid-template-columns: repeat(5, 1fr) !important;
    }
}