/* ============================================
   global-fix.css - AJUSTES VISUALES GLOBALES
   Versión mejorada · compacta · responsive
   ============================================ */

/* ===== CONTENEDOR PRINCIPAL ===== */
.container {
    max-width: 1100px !important;
    padding: 20px 20px !important;
}

/* ===== HEADER Y LOGO ===== */
.logo-wrapper {
    margin-bottom: 10px !important;
}

.logo {
    font-size: 4rem !important;
}

.logo-you {
    font-size: 3.5rem !important;
}

.logo-tagline {
    font-size: 1rem !important;
    margin-top: 5px !important;
}

/* ===== BARRA DE USUARIO ===== */
.user-bar {
    margin-bottom: 5px !important;
    padding-top: 5px !important;
}

.user-email, .logout-btn {
    padding: 5px 15px !important;
    font-size: 0.9rem !important;
}

/* ===== SECCIONES COMUNES ===== */
.warning {
    margin: 10px 0 15px !important;
    padding: 15px 20px !important;
    font-size: 0.95rem !important;
}

.section-title {
    margin: 15px 0 10px !important;
}

.section-title h2 {
    font-size: 2rem !important;
    margin-bottom: 5px !important;
}

.section-title p {
    font-size: 1rem !important;
}

.donaciones {
    margin: 25px 0 15px !important;
    padding: 20px !important;
}

.valoracion {
    margin: 10px 0 !important;
    padding: 15px !important;
}

/* ===== TARJETAS PRINCIPALES (INDEX) ===== */
.features {
    gap: 15px !important;
    margin: 20px 0 25px !important;
}

.feature-card {
    padding: 20px 12px !important;
    min-height: 240px !important;
    height: auto !important;
}

.feature-card h3 {
    font-size: 1.4rem !important;
    margin-bottom: 8px !important;
}

.feature-card p {
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
}

.feature-icon {
    font-size: 2.5rem !important;
    margin-bottom: 8px !important;
}

/* ===== TARJETAS DE OPCIÓN (EXPLORADOR) ===== */
.option-grid {
    gap: 15px !important;
    margin: 20px 0 !important;
}

.option-card {
    padding: 25px 15px !important;
}

.option-card h3 {
    font-size: 1.6rem !important;
    margin-bottom: 8px !important;
}

.option-icon {
    font-size: 3rem !important;
    margin-bottom: 10px !important;
}

/* ===== TARJETAS DE AUTORES ===== */
#step2a > div {
    gap: 10px !important;
}

.author-card {
    padding: 15px 8px !important;
}

.author-card h4 {
    font-size: 1.1rem !important;
    margin-bottom: 3px !important;
}

.author-card p {
    font-size: 0.75rem !important;
    margin: 3px 0 !important;
}

.author-icon {
    font-size: 1.8rem !important;
    margin-bottom: 5px !important;
}

.author-card small {
    font-size: 0.6rem !important;
}

/* ===== TARJETA TU ENFOQUE ===== */
.enfoque-card {
    padding: 15px !important;
    margin: 15px auto !important;
}

.enfoque-card h3 {
    font-size: 1.6rem !important;
}

.enfoque-item {
    padding: 8px !important;
    margin: 8px 0 !important;
}

.btn-seguir {
    padding: 4px 10px !important;
    font-size: 0.8rem !important;
}

/* ===== SÍNTOMAS ===== */
.sintomas-grid {
    gap: 8px !important;
    margin: 15px 0 !important;
}

.sintoma-item {
    padding: 10px !important;
}

.sintoma-item span {
    font-size: 0.9rem !important;
}

.sintoma-item input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
}

/* ===== BUSCADOR ===== */
.buscador-box {
    padding: 20px !important;
    margin-bottom: 15px !important;
}

.buscador-box h3 {
    font-size: 1.3rem !important;
    margin-bottom: 10px !important;
}

textarea {
    padding: 10px !important;
    font-size: 0.95rem !important;
    margin: 10px 0 !important;
}

/* ===== BOTONES ===== */
.btn {
    padding: 8px 25px !important;
    font-size: 0.95rem !important;
    margin: 5px 0 !important;
}

.btn-small {
    padding: 5px 15px !important;
    font-size: 0.85rem !important;
}

.btn-naranja {
    padding: 8px 25px !important;
}

/* ===== MÓVIL ===== */
@media (max-width: 768px) {
    .contenedor-principal {
        display: flex;
        flex-direction: row;           /* dos columnas */
        align-items: stretch;           /* que ambas columnas tengan la misma altura */
        gap: 10px;
        padding: 5px;
    }

    .siluetas-container {
        display: flex;
        flex-direction: column;         /* siluetas apiladas */
        width: 40%;                     /* columna izquierda */
        gap: 8px;
    }

    .silueta {
        width: 100%;                    /* cada silueta ocupa el ancho de su columna */
        text-align: center;
        background: #f8fafc;
        border: 2px solid #f97316;
        border-radius: 15px;
        padding: 8px;
    }

    .panel-derecho {
        width: 60%;                     /* columna derecha */
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding: 15px;
        background: #ffffff;
        border: 3px solid #b91c1c;
        border-radius: 25px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }

    .sensacion-btn {
        padding: 6px 10px !important;
        font-size: 0.8rem !important;
        margin: 3px;
    }
}

    .cita-card {
        padding: 6px !important;
        margin: 3px 0 !important;
    }

    .cita-card p {
        font-size: 0.8rem !important;
        line-height: 1.2 !important;
    }

    #botBloqueadoMsg {
        max-width: 140px !important;
        padding: 6px 8px !important;
        font-size: 0.65rem !important;
        bottom: 80px !important;
    }

    #botBloqueadoMsg button {
        font-size: 0.7rem !important;
        padding: 4px 8px !important;
    }

    /* Header en móvil */
    .logo { font-size: 2.8rem !important; }
    .logo-you { font-size: 2.3rem !important; }
    .heart-icon { font-size: 2.3rem !important; }
    .logo-tagline { font-size: 0.8rem !important; }
    
    /* Tarjetas */
    .feature-card { min-height: 200px !important; }
    .feature-card h3 { font-size: 1.2rem !important; }
    
    /* Botones flotantes */
    #crisis-flotante,
    #fuentes-btn,
    .home-btn {
        width: 45px !important;
        height: 45px !important;
    }
    
    #crisis-flotante span:last-child {
        display: none !important;
    }
    
    #crisis-flotante span:first-child {
        font-size: 1.5rem !important;
    }
    
    #fixxy-toggle {
        bottom: 70px !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;
    }
    
    /* Footer */
    .footer-principal p, footer p {
        font-size: 0.75rem !important;
    }
}