/* =========================================
   1. VARIABLES Y GENERALES
   ========================================= */
:root {
    --bg-main: #13151b;
    --bg-card: rgba(30, 32, 41, 0.95);
    --primary: #FFCC00;
    --primary-gradient: linear-gradient(135deg, #FFD700 0%, #FFAA00 100%); 
    --primary-glow: rgba(255, 204, 0, 0.5); 
    --text-on-primary: #000000;
    --text-white: #ffffff;
    --text-gray: #e0e0e0;
    --success: #00c851;
    --sidebar-width: 250px;
}

* { box-sizing: border-box; margin: 0; padding: 0; outline: none; }

body { 
    font-family: 'Montserrat', sans-serif; 
    margin: 0; height: 100vh; overflow: hidden; 
    background-color: var(--bg-main); color: var(--text-white); 
}

/* =========================================
   2. FONDOS (SCROLL FIX & DISEÑO)
   ========================================= */

/* 1. CLASES DE UTILIDAD */
.oculto { display: none !important; }
body > button, body > p { display: none; } 

/* 2. PANTALLA DE LOGIN */
#login-screen {
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6)), url('img/fondo-loguin.png');
    background-size: cover; background-position: center; background-repeat: no-repeat;
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999;
    display: flex; justify-content: center; align-items: center;
}

/* 3. PANTALLA PRINCIPAL (CONTENEDOR) */
#app-screen {
    background-color: #13151b;
    /* Imagen base */
    background-image: linear-gradient(rgba(19, 21, 27, 0.85), rgba(19, 21, 27, 0.95)), url('img/fondo-dashboard.png');
    
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Imagen quieta */
    
    width: 100%;
    height: 100vh; /* CLAVE: Altura fija igual a la pantalla */
    overflow: hidden; /* CLAVE: Lo que sobre, se maneja con scroll interno */
    
    display: flex;
    transition: background-image 0.4s ease-in-out;
}

/* 4. CAMBIO DE FONDOS SEGÚN SECCIÓN (Lógica :has) */

/* Fondo RANKING */
#app-screen:has(#view-ranking:not(.oculto)) {
    background-image: linear-gradient(rgba(19, 21, 27, 0.8), rgba(19, 21, 27, 0.9)), url('img/fondo-ranking.png');
}

/* Fondo LEGALES / SOPORTE / FAQ */
#app-screen:has(#view-soporte:not(.oculto)),
#app-screen:has(#view-faq:not(.oculto)),
#app-screen:has(#view-terms:not(.oculto)),
#app-screen:has(#view-privacy:not(.oculto)) {
    background-image: linear-gradient(rgba(19, 21, 27, 0.7), rgba(19, 21, 27, 0.8)), url('img/fondo-legal.png');
}

/* 5. LIMPIEZA DE SECCIONES INTERNAS */
.view-section {
    background: none !important; /* Transparente para ver el fondo del padre */
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 30px;
    
    /* Esto permite que el contenido tenga altura pero no rompa el contenedor */
    flex: 1; 
    
    animation: fadeIn 0.5s;
}

@keyframes fadeIn { 
    from { opacity: 0; transform: translateY(10px); } 
    to { opacity: 1; transform: translateY(0); } 
}/* =========================================
   3. LOGIN
   ========================================= */
.login-card {
    background: rgba(20, 22, 28, 0.95); padding: 2.5rem; border-radius: 20px;
    width: 90%; max-width: 420px; text-align: center;
    box-shadow: 0 0 30px rgba(0,0,0,0.8), 0 0 10px rgba(255, 204, 0, 0.1);
    border: 1px solid rgba(255, 204, 0, 0.3);
    display: flex; flex-direction: column;
}
.client-logo-area { margin-bottom: 10px; }
.img-cliente { max-width: 180px; max-height: 70px; object-fit: contain; }
.logo-area { margin-bottom: 20px; }
.login-card p#titulo-modo { color: #fff; font-size: 1.1rem; margin-bottom: 20px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }

.login-card input {
    width: 100%; padding: 15px; margin: 8px 0;
    background: rgba(0,0,0,0.4); border: 1px solid #444;
    border-radius: 10px; color: white; transition: 0.3s;
}
.login-card input:focus { border-color: var(--primary); box-shadow: 0 0 10px var(--primary-glow); }

.btn-primary {
    width: 100%; padding: 15px; background: var(--primary-gradient); color: var(--text-on-primary);
    border: none; border-radius: 10px; font-weight: 900; font-size: 1rem;
    cursor: pointer; margin-top: 15px; transition: 0.3s; text-transform: uppercase; letter-spacing: 1px;
    box-shadow: 0 4px 15px var(--primary-glow);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255, 204, 0, 0.8); filter: brightness(1.1); }

.link-olvide { font-size: 0.85rem; color: var(--primary); cursor: pointer; margin-top: 15px; text-decoration: none; display: inline-block; font-weight: 600; }
.link-olvide:hover { text-shadow: 0 0 8px var(--primary-glow); text-decoration: underline; }
.link-texto { color: #ccc; font-size: 0.9rem; margin-top: 20px; cursor: default; }
.texto-clickeable { cursor: pointer; transition: 0.3s; }
.texto-clickeable:hover { color: white; }
.link-destacado { color: var(--primary); font-weight: 700; text-decoration: underline; }
.texto-clickeable:hover .link-destacado { color: #FFF; text-shadow: 0 0 10px var(--primary); }
.error-text { color: #ff4444; margin-top: 10px; font-weight: bold; font-size: 0.9rem;}
.copyright-interno { margin-top: 30px; padding-top: 15px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 0.75rem; color: #666; text-transform: uppercase; letter-spacing: 1px; }

/* =========================================
   4. SIDEBAR
   ========================================= */
.sidebar {
    width: var(--sidebar-width); background: rgba(15, 15, 20, 0.95); backdrop-filter: blur(10px);
    display: flex; flex-direction: column; padding: 20px; border-right: 1px solid rgba(255,255,255,0.05);
}
.brand { font-size: 1.2rem; font-weight: 900; margin-bottom: 40px; display: flex; align-items: center; justify-content: center; }
.main-nav { flex: 1; display: flex; flex-direction: column; gap: 10px; }

.nav-item {
    background: transparent; border: none; color: #aaa; padding: 15px; text-align: left;
    font-size: 1rem; font-weight: 600; cursor: pointer; border-radius: 10px;
    display: flex; align-items: center; gap: 15px; transition: 0.3s;
    border-left: 3px solid transparent;
}
.nav-item:hover { color: white; background: rgba(255,255,255,0.05); }
.nav-item.active { 
    background: rgba(255, 204, 0, 0.15); color: var(--primary); 
    border-left: 3px solid var(--primary); text-shadow: 0 0 10px rgba(255, 204, 0, 0.4);
}
.nav-item i { width: 25px; text-align: center; }
.user-profile { background: rgba(255,255,255,0.05); padding: 15px; border-radius: 12px; display: flex; align-items: center; gap: 10px; margin-top: auto; border: 1px solid rgba(255,255,255,0.05); }
.user-info { flex: 1; display: flex; flex-direction: column; }
.user-info span { font-size: 0.9rem; font-weight: bold; color: white; }
.user-info small { color: var(--primary); font-size: 0.8rem; font-weight: bold; }
.btn-logout { background: transparent; border: none; color: #ff4444; cursor: pointer; font-size: 1.2rem; transition: 0.2s; }
.btn-logout:hover { transform: scale(1.1); text-shadow: 0 0 10px rgba(255, 68, 68, 0.5); }

/* =========================================
   5. CONTENIDO
   ========================================= */
.content-area { flex: 1; overflow-y: auto; display: flex; flex-direction: column; padding: 0; }
.view-section { width: 100%; max-width: 1400px; margin: 0 auto; padding: 30px; flex: 1; animation: fadeIn 0.5s; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.section-header { margin-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 15px; }
.section-header h2 { text-transform: uppercase; letter-spacing: 1px; font-weight: 800; }

/* DASHBOARD */
.top-bar { margin-bottom: 30px; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 30px; }
.stat-card { padding: 20px; border-radius: 15px; text-align: center; position: relative; overflow: hidden; }
.stat-card.purple { background: var(--primary-gradient); color: black; box-shadow: 0 5px 20px rgba(255, 204, 0, 0.2); }
.stat-card.purple h3, .stat-card.purple p, .stat-card.purple i { color: black; text-shadow: none; }
.stat-card.dark { background: rgba(30, 32, 41, 0.6); border: 1px solid #444; }
.stat-card h3 { font-size: 2.5rem; font-weight: 900; margin: 10px 0; }
.dashboard-section-title { margin-bottom: 15px; border-left: 4px solid var(--primary); padding-left: 15px; }
.dashboard-section-title h3 { text-transform: uppercase; font-size: 1.1rem; letter-spacing: 1px; color: var(--text-white); }

/* GRILLA DASHBOARD */
.matches-grid-4 { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 15px; 
    margin-bottom: 30px; 
}

.matches-grid-4 .team img {
    width: 45px !important;
    height: 30px !important; /* Proporción rectangular Dashboard */
    min-width: 45px !important;
    border-radius: 4px !important;
    margin-bottom: 5px;
}

.matches-grid-4 .match-card {
    min-height: 160px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 15px;
}

.btn-ver-todos {
    display: block; width: 100%; padding: 15px; background: rgba(255,255,255,0.05); border: 1px solid #444;
    color: #aaa; border-radius: 10px; cursor: pointer; font-weight: bold; transition: 0.2s; text-transform: uppercase;
}
.btn-ver-todos:hover { background: rgba(255,255,255,0.1); color: white; border-color: var(--primary); box-shadow: 0 0 10px var(--primary-glow); }

/* PRONÓSTICOS */
.pronosticos-container { display: flex; gap: 20px; align-items: flex-start; height: calc(100vh - 130px); }

.groups-sidebar { 
    display: flex; flex-direction: column; gap: 8px; width: 140px; flex-shrink: 0; 
    overflow-y: auto; padding-right: 5px; 
    max-height: 100%;
    padding-bottom: 100px;
    scrollbar-width: none; -ms-overflow-style: none;
}
.groups-sidebar::-webkit-scrollbar { display: none; }
.groups-sidebar button {
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
    color: #aaa; padding: 10px 12px; font-size: 0.85rem; border-radius: 8px;
    cursor: pointer; font-weight: bold; text-align: left; transition: 0.2s; width: 100%;
}
.groups-sidebar button:hover { border-color: var(--primary); color: white; }
.groups-sidebar button.active { 
    background: var(--primary); color: #000000 !important; border-color: var(--primary); 
    font-weight: 800; box-shadow: 0 0 10px var(--primary-glow);
}

.matches-grid { 
    flex: 1; 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); 
    gap: 20px; 
    overflow-y: auto; 
    padding-bottom: 50px; 
    padding-top: 10px; 
    padding-left: 5px; 
    padding-right: 5px;
    max-height: 100%; 
}

.match-card { 
    background: rgba(30, 32, 41, 0.8); 
    border-radius: 16px; 
    padding: 20px 25px; 
    border: 1px solid rgba(255,255,255,0.1); 
    position: relative; 
    transition: 0.2s; 
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.match-card:hover { 
    border-color: rgba(255,255,255,0.3); 
    transform: translateY(-4px); 
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}
.match-card.guardado { border-color: var(--success); box-shadow: 0 0 15px rgba(0, 200, 81, 0.15); }
.match-info { font-size: 0.8rem; color: #aaa; text-align: center; margin-bottom: 15px; }
.match-date-badge { background: var(--primary); color: black; font-size: 0.7rem; padding: 3px 10px; border-radius: 4px; position: absolute; top: 10px; left: 10px; font-weight: 800; }

.teams { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.team { display: flex; flex-direction: column; align-items: center; width: 30%; font-size: 0.95rem; font-weight: bold; text-align: center; color: white; }

/* BORRÁ CUALQUIER OTRO .team img Y PEGÁ ESTO */

/* Reemplazá tu bloque .team img por este */
/* Corrección de Banderas: Tamaño rectangular y ajuste */
.team img { 
    width: 50px !important;       
    height: 33px !important;       /* Fuerza rectángulo */
    object-fit: cover !important;  /* Evita deformaciones */
    border-radius: 4px !important;  
    margin-bottom: 5px; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.5); 
    border: 1px solid rgba(255,255,255,0.1);
}

/* Ajuste para Dashboard */
.matches-grid-4 .team img {
    width: 45px !important;
}

.score-input { 
    width: 55px; 
    height: 55px; 
    background: rgba(0,0,0,0.4); 
    border: 1px solid #555; 
    border-radius: 12px; 
    color: white; 
    text-align: center; 
    font-size: 1.6rem; 
    font-weight: 900; 
    transition: 0.2s; 
}
.score-input:focus { border-color: var(--primary); box-shadow: 0 0 10px var(--primary-glow); }
.score-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.btn-guardar { width: 100%; padding: 12px; background: #333; border: none; border-radius: 10px; color: white; font-weight: bold; cursor: pointer; transition: 0.3s; text-transform: uppercase; }
.btn-guardar:hover { background: #555; }
.btn-guardar.ya-guardado { background: var(--success); color: black; box-shadow: 0 0 10px rgba(0,200,81,0.4); }
/* FONDO ESPECÍFICO PARA RANKING */
#view-ranking {
    background: linear-gradient(rgba(19, 21, 27, 0.8), rgba(19, 21, 27, 0.9)), url('img/fondo-ranking.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Esto hace que el fondo se quede quieto al scrollear */
    border-radius: 15px; /* Opcional: para que combine con tus tarjetas */
}
.ranking-table { width: 100%; border-collapse: collapse; background: rgba(30, 32, 41, 0.6); border-radius: 15px; overflow: hidden; }
.ranking-table th { text-align: left; color: var(--primary); padding: 15px; background: rgba(0,0,0,0.2); border-bottom: 1px solid rgba(255,255,255,0.1); text-transform: uppercase; font-size: 0.85rem; }
.ranking-table td { padding: 15px; border-bottom: 1px solid rgba(255,255,255,0.05); font-weight: bold; }
.ranking-table tr:first-child td { color: var(--primary); text-shadow: 0 0 10px var(--primary-glow); } 
.premios-grid { display: flex; gap: 20px; flex-wrap: wrap; }
.premio-card { flex: 1; background: rgba(30, 32, 41, 0.6); padding: 30px; border-radius: 15px; text-align: center; border: 1px solid rgba(255, 204, 0, 0.2); }
.premio-img { font-size: 4rem; margin-bottom: 15px; text-shadow: 0 0 20px var(--primary-glow); }

.soporte-grid { 
    display: grid; 
    grid-template-columns: 1fr 2fr; 
    gap: 30px; 
    padding-bottom: 120px; /* ESTO ES LA CLAVE: Espacio extra abajo */
    align-items: start;    /* Para que no se estiren las cajas innecesariamente */
}
.soporte-card { background: rgba(30, 32, 41, 0.8); border-radius: 16px; padding: 30px; border: 1px solid rgba(255,255,255,0.1); display: flex; flex-direction: column; justify-content: space-between; }
.faq-card { background: linear-gradient(135deg, rgba(30, 30, 40, 0.95), rgba(10, 10, 15, 0.95)); border: 1px solid rgba(255,255,255,0.1); position: relative; overflow: hidden; }
.faq-content { text-align: left; z-index: 2; position: relative; }
.faq-icon { background: rgba(255,255,255,0.05); width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; margin-bottom: 20px; color: var(--primary); font-size: 1.2rem; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 0 10px var(--primary-glow); }
.faq-content h3 { font-size: 1.5rem; margin-bottom: 10px; color: white; }
.faq-content p { color: #aaa; font-size: 0.9rem; margin-bottom: 20px; line-height: 1.5; }
.faq-image-decor { width: 80%; max-width: 250px; align-self: flex-end; margin-top: auto; margin-right: -20px; margin-bottom: -20px; filter: drop-shadow(0 5px 15px rgba(0,0,0,0.5)); position: absolute; bottom: 0; right: 0; z-index: 1; opacity: 0.9; }

.form-header { margin-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 15px; }
.form-logo { height: 60px; object-fit: contain; }
.form-group { margin-bottom: 15px; text-align: left; }
.form-group label { display: block; color: var(--primary); margin-bottom: 5px; font-size: 0.85rem; font-weight: 600; }
.input-fixed { width: 100%; padding: 12px; background: rgba(0,0,0,0.5); border: 1px solid #333; border-radius: 8px; color: #777; cursor: not-allowed; font-family: inherit; }
.input-dark { width: 100%; padding: 12px; background: rgba(0,0,0,0.2); border: 1px solid #555; border-radius: 8px; color: white; font-family: inherit; transition: 0.3s; }
.input-dark:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 10px var(--primary-glow); }

.faq-accordion { display: flex; flex-direction: column; gap: 15px; margin-top: 20px; }
.faq-item { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; overflow: hidden; transition: 0.3s; cursor: pointer; }
.faq-item:hover { background: rgba(255,255,255,0.05); border-color: rgba(255, 204, 0, 0.3); }
.faq-item.active { border-color: var(--primary); background: rgba(255, 204, 0, 0.05); box-shadow: 0 0 15px rgba(0,0,0,0.5); }
.faq-question { padding: 20px; display: flex; justify-content: space-between; align-items: center; font-weight: bold; font-size: 1rem; color: #ddd; }
.faq-item.active .faq-question { color: var(--primary); }
.faq-question i { transition: transform 0.3s; }
.faq-item.active .faq-question i { transform: rotate(180deg); color: var(--primary); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out; padding: 0 20px; color: #ccc; font-size: 0.9rem; line-height: 1.6; }
.faq-item.active .faq-answer { padding-bottom: 20px; max-height: 200px; }

.policy-container { background: rgba(20, 20, 25, 0.8); padding: 40px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.05); max-width: 1000px; margin: 0 auto; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.intro-text { font-size: 1rem; color: #ddd; margin-bottom: 30px; line-height: 1.6; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 20px; }
.policy-content h3 { color: var(--primary); font-size: 1.2rem; margin-top: 30px; margin-bottom: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; text-shadow: 0 0 10px rgba(255, 204, 0, 0.15); }
.policy-content p { color: #bbb; font-size: 0.95rem; line-height: 1.8; margin-bottom: 15px; text-align: justify; }
.policy-content strong { color: white; }

.app-footer { background-color: #050505; padding: 20px 40px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #222; font-size: 0.8rem; color: #888; margin-top: auto; }
.footer-links { display: flex; align-items: center; gap: 15px; }
.footer-links span { cursor: pointer; transition: 0.2s; }
.footer-links span:hover { color: var(--primary); }
.sep { color: var(--primary); font-weight: bold; text-shadow: 0 0 8px var(--primary); }
.footer-copy { font-weight: bold; color: #666; text-transform: uppercase; }

.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(5px); z-index: 10000; display: flex; justify-content: center; align-items: center; animation: fadeIn 0.3s; }
.modal-content { background: #1e2029; border: 1px solid var(--primary); padding: 25px; border-radius: 15px; width: 90%; max-width: 500px; max-height: 80vh; display: flex; flex-direction: column; box-shadow: 0 0 30px rgba(255, 204, 0, 0.2); }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 10px; }
.modal-header h3 { color: var(--primary); margin: 0; font-size: 1.1rem; }
.btn-close { background: transparent; border: none; color: white; font-size: 1.5rem; cursor: pointer; }
.audit-list { overflow-y: auto; padding-right: 5px; }
.audit-item { background: rgba(255,255,255,0.05); padding: 10px; margin-bottom: 8px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; }
.audit-score { background: var(--primary); color: black; font-weight: bold; padding: 2px 8px; border-radius: 4px; }

@media (max-width: 768px) {
    #app-screen { flex-direction: column; }
    
    /* BARRA INFERIOR */
    .sidebar { position: fixed; bottom: 0; left: 0; width: 100%; height: 70px; flex-direction: row; padding: 0; z-index: 1000; background: #1e2029; border-top: 1px solid #333; border-right: none; }
    .brand, .user-profile, .btn-logout { display: none; }
    .main-nav { flex-direction: row; width: 100%; justify-content: space-around; }
    /* BARRA DE NAVEGACIÓN DESLIZABLE (SCROLL HORIZONTAL) */
    .sidebar { 
        position: fixed; bottom: 0; left: 0; width: 100%; height: 70px; 
        padding: 0; z-index: 1000; background: #1e2029; 
        border-top: 1px solid #333; border-right: none; 
        
        /* Esto es clave para que el contenido se mueva */
        overflow-x: auto; 
    }

    .main-nav { 
        display: flex;
        flex-direction: row; 
        width: 100%; 
        height: 100%;
        
        /* Cambiamos 'space-around' por 'flex-start' para que empiece desde la izquierda */
        justify-content: flex-start; 
        align-items: center;
        
        /* Permite el scroll y oculta la barra fea */
        overflow-x: auto; 
        -webkit-overflow-scrolling: touch; /* Suavidad en iPhone */
        scrollbar-width: none; /* Oculta barra en Firefox */
        padding: 0 10px; /* Un poco de aire a los costados */
    }
    
    /* Ocultar barra en Chrome/Safari */
    .main-nav::-webkit-scrollbar { display: none; } 
    .sidebar::-webkit-scrollbar { display: none; }

    .nav-item { 
        flex: 0 0 auto; /* No se achica */
        display: flex;
        flex-direction: column; 
        gap: 5px; 
        font-size: 0.65rem; 
        padding: 0 15px; 
        justify-content: center; 
        
        /* SOLUCIÓN DEL CORTE: */
        height: 100%; /* Ocupa toda la altura de la barra */
        box-sizing: border-box; /* El borde se dibuja hacia adentro, no suma altura */
        border-bottom: 3px solid transparent; /* Espacio reservado invisible */
        border-left: none;
        border-radius: 0;
        min-width: 70px;
    }

    /* Cuando está activo, el borde transparente se pinta de amarillo */
    .nav-item.active { 
        border-bottom-color: var(--primary); 
        background: transparent; 
    }
    
    /* CONTENEDOR GENERAL */
    .content-area { padding: 0 0 90px 0; }
    .view-section { padding: 20px 15px; width: 100%; }

    /* DASHBOARD EN UNA SOLA COLUMNA (Usando FLEX para obligar verticalidad) */
    .matches-grid-4 { 
        display: flex !important;        /* Cambiamos Grid por Flex */
        flex-direction: column !important; /* Dirección: Columna (uno abajo del otro) */
        gap: 15px;
    }

    .matches-grid-4 .match-card { 
        width: 100%;
        padding: 15px !important;
        min-height: 140px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    }

    /* Banderas y texto de tamaño NORMAL */
    .matches-grid-4 .team img { 
        width: 45px !important; 
        height: 30px !important; 
    }
    .matches-grid-4 .team span { 
        font-size: 0.85rem !important; 
        white-space: normal;
    }
    
    /* PRONÓSTICOS Y OTROS */
    .pronosticos-container { flex-direction: column; height: auto; }
    .groups-sidebar { flex-direction: row; width: 100%; overflow-x: auto; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 15px; }
    .groups-sidebar button { padding: 8px 15px; width: auto; white-space: nowrap; }
    .matches-grid { display: grid; grid-template-columns: 1fr; gap: 20px; overflow-y: visible; max-height: none; padding-bottom: 20px; }
    
    /* LEGALES Y FOOTER */
    .app-footer { flex-direction: column; gap: 15px; text-align: center; padding-bottom: 30px; }
    .footer-links { flex-wrap: wrap; justify-content: center; font-size: 0.7rem; }
    .soporte-grid { grid-template-columns: 1fr; }
    .faq-card { order: 2; }
    .form-card { order: 1; }
    .policy-container { padding: 15px; }
}
/* --- CORRECCIÓN DESPLEGABLES (Selects) --- */
/* Esto quita el fondo gris feo de las opciones */
select.input-dark option {
    background-color: #1e2029; /* Color oscuro de tu tema */
    color: white;
    padding: 10px;
}

/* Ajuste para que la flechita y el borde se vean bien */
select.input-dark {
    appearance: none; /* Limpia estilos nativos */
    -webkit-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23FFCC00%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 10px top 50%;
    background-size: 12px auto;
    padding-right: 30px; /* Espacio para la flechita */
}