/* ============================================================
   POLLA MUNDIAL 2026 — Estilos con 3 temas
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Nunito:wght@400;600;700;800&display=swap');

:root,[data-theme="dark"]{--bg:#080c20;--bg-2:#0e1230;--bg-card:#141a3d;--bg-card-2:#1a2248;--border:#232d60;--border-hover:#303d7a;--text:#eef1ff;--text-muted:#7a8ab8;--text-subtle:#404d78;--navbar-bg:rgba(8,12,32,0.96);--shadow:0 4px 24px rgba(0,0,0,.55);--shadow-lg:0 8px 48px rgba(0,0,0,.75);--input-bg:#0e1230;--verde:#A4BD23;--verde-dark:#6F8300;--verde-field:#2B4700;--dorado:#BBDE00;--rojo:#BB011A;--azul:#29ABE2;--font-display:'Bebas Neue',sans-serif;--font-body:'Nunito',sans-serif;--radius:12px;--radius-lg:20px;--transition:0.22s cubic-bezier(.4,0,.2,1)}
[data-theme="light"]{--bg:#f0f4ff;--bg-2:#e4eaf8;--bg-card:#ffffff;--bg-card-2:#f0f4ff;--border:#c8d2ee;--border-hover:#a0b0dd;--text:#171352;--text-muted:#5060a0;--text-subtle:#a0b0d0;--navbar-bg:rgba(255,255,255,0.96);--shadow:0 2px 16px rgba(23,19,82,.08);--shadow-lg:0 6px 32px rgba(23,19,82,.14);--input-bg:#f0f4ff;--verde:#6F8300;--verde-dark:#4a5800;--verde-field:#2B4700;--dorado:#A4BD23;--rojo:#BB011A;--azul:#1a82b8}
[data-theme="field"]{--bg:#0e1a08;--bg-2:#121f0b;--bg-card:#182a0f;--bg-card-2:#1e3214;--border:#2b4a1a;--border-hover:#3d6a26;--text:#e6f5c8;--text-muted:#8bc460;--text-subtle:#4a7a30;--navbar-bg:rgba(14,26,8,0.97);--shadow:0 4px 24px rgba(0,0,0,.5);--shadow-lg:0 8px 48px rgba(0,0,0,.65);--input-bg:#121f0b;--verde:#BBDE00;--verde-dark:#A4BD23;--verde-field:#0a1205;--dorado:#BBDE00;--rojo:#BB011A;--azul:#29ABE2}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);min-height:100vh;line-height:1.6;-webkit-font-smoothing:antialiased;transition:background .3s,color .3s}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-2)}::-webkit-scrollbar-thumb{background:var(--verde-dark);border-radius:3px}

h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:.04em;line-height:1.1;color:var(--text)}
h1{font-size:clamp(1.8rem,4vw,3rem)}h2{font-size:clamp(1.3rem,3vw,2rem)}h3{font-size:1.3rem}
a{color:var(--verde);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--dorado)}

.navbar{background:var(--navbar-bg);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:200;padding:0 1.5rem;box-shadow:var(--shadow);transition:background .3s}
.navbar-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:62px}
.navbar-brand{font-family:var(--font-display);font-size:1.5rem;color:var(--dorado);letter-spacing:.06em;display:flex;align-items:center;gap:.5rem;flex-shrink:0}
.navbar-brand span{color:var(--verde)}
.navbar-logo{height:26px;width:auto;display:block;flex-shrink:0}
.navbar-brand-sep{color:var(--border);font-weight:300;font-size:1.1rem;margin:0 .1rem}
.navbar-nav{display:flex;align-items:center;gap:.15rem;list-style:none;flex:1;justify-content:center}
.navbar-nav a{color:var(--text-muted);padding:.45rem .85rem;border-radius:var(--radius);font-weight:700;font-size:.85rem;transition:all var(--transition);white-space:nowrap}
.navbar-nav a:hover{color:var(--text);background:var(--bg-card)}
.navbar-nav a.active{background:var(--verde);color:#fff}
.navbar-user{display:flex;align-items:center;gap:.6rem;flex-shrink:0}
.avatar-badge{width:34px;height:34px;background:var(--bg-card-2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.1rem;border:2px solid var(--verde);transition:border-color var(--transition);text-decoration:none}
.avatar-badge:hover{border-color:var(--dorado)}

/* Selector de tema */
.theme-switcher{display:flex;background:var(--bg-card-2);border:1px solid var(--border);border-radius:999px;padding:3px;gap:2px}
.theme-btn{width:28px;height:28px;border-radius:50%;border:2px solid transparent;cursor:pointer;font-size:.85rem;display:flex;align-items:center;justify-content:center;transition:all var(--transition);background:transparent;color:var(--text-muted)}
.theme-btn:hover{border-color:var(--border-hover);color:var(--text)}
.theme-btn.active{border-color:var(--verde);background:var(--verde);color:#fff}

.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.4rem;border-radius:var(--radius);font-family:var(--font-body);font-weight:700;font-size:.9rem;border:none;cursor:pointer;transition:all var(--transition);text-decoration:none;white-space:nowrap}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-primary{background:var(--verde);color:#fff}
.btn-primary:hover:not(:disabled){filter:brightness(1.1);transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,200,83,.3)}
.btn-secondary{background:var(--bg-card);color:var(--text);border:1px solid var(--border)}
.btn-secondary:hover:not(:disabled){border-color:var(--verde);color:var(--verde)}
.btn-danger{background:var(--rojo);color:#fff}
.btn-danger:hover:not(:disabled){filter:brightness(1.1)}
.btn-gold{background:var(--dorado);color:#1a1a1a}
.btn-gold:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-2px)}
.btn-outline{background:transparent;border:2px solid var(--verde);color:var(--verde)}
.btn-outline:hover{background:var(--verde);color:#fff}
.btn-sm{padding:.35rem .9rem;font-size:.8rem}
.btn-lg{padding:.8rem 1.8rem;font-size:1rem}
.btn-full{width:100%;justify-content:center}

.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;transition:border-color var(--transition),box-shadow var(--transition)}
.card:hover{border-color:var(--border-hover)}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem;padding-bottom:1rem;border-bottom:1px solid var(--border)}
.card-title{font-family:var(--font-display);font-size:1.2rem;color:var(--dorado);letter-spacing:.04em}

.form-group{margin-bottom:1.2rem}
.form-label{display:block;font-size:.8rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.45rem}
.form-control{width:100%;background:var(--input-bg);border:1.5px solid var(--border);border-radius:var(--radius);color:var(--text);font-family:var(--font-body);font-size:.95rem;padding:.65rem 1rem;transition:border-color var(--transition),box-shadow var(--transition);outline:none}
.form-control:focus{border-color:var(--verde);box-shadow:0 0 0 3px rgba(0,200,83,.15)}
.form-control::placeholder{color:var(--text-subtle)}
.form-control option{background:var(--bg-card);color:var(--text)}
.score-input{width:64px;text-align:center;font-size:1.4rem;font-weight:800;padding:.5rem}

.alert{padding:.8rem 1.1rem;border-radius:var(--radius);font-size:.9rem;font-weight:600;display:flex;align-items:center;gap:.6rem;margin-bottom:1rem}
.alert-success{background:rgba(0,200,83,.12);border:1px solid var(--verde);color:var(--verde)}
.alert-error{background:rgba(192,57,43,.12);border:1px solid var(--rojo);color:var(--rojo)}
.alert-info{background:rgba(52,152,219,.12);border:1px solid var(--azul);color:var(--azul)}
.alert-warning{background:rgba(255,215,0,.1);border:1px solid var(--dorado);color:var(--dorado)}

.badge{display:inline-block;padding:.18rem .6rem;border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.badge-verde{background:rgba(0,200,83,.15);color:var(--verde)}
.badge-dorado{background:rgba(255,215,0,.15);color:var(--dorado)}
.badge-gris{background:var(--bg-card-2);color:var(--text-muted);border:1px solid var(--border)}
.badge-rojo{background:rgba(192,57,43,.15);color:var(--rojo)}
.badge-azul{background:rgba(52,152,219,.15);color:var(--azul)}

/* Banderas reales */
.flag-img{width:36px;height:24px;object-fit:cover;border-radius:4px;border:1px solid var(--border);display:inline-block;vertical-align:middle}
.flag-img-lg{width:56px;height:38px;object-fit:cover;border-radius:6px;border:1px solid var(--border);display:inline-block}
.flag-img-sm{width:22px;height:15px;object-fit:cover;border-radius:3px;border:1px solid var(--border);display:inline-block;vertical-align:middle}

.ranking-table{width:100%;border-collapse:collapse}
.ranking-table th{background:var(--bg-card-2);color:var(--text-muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;padding:.75rem 1rem;text-align:left;font-weight:700}
.ranking-table td{padding:.85rem 1rem;border-bottom:1px solid var(--border);font-size:.92rem}
.ranking-table tr:hover td{background:rgba(128,128,128,.05)}
.ranking-table .pos-1 td:first-child{color:var(--dorado);font-weight:800}
.ranking-table .pos-2 td:first-child{color:#a0a0a0;font-weight:800}
.ranking-table .pos-3 td:first-child{color:#cd7f32;font-weight:800}

.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem}
.stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem;text-align:center;transition:all var(--transition)}
.stat-card:hover{border-color:var(--border-hover);transform:translateY(-2px)}
.stat-value{font-family:var(--font-display);font-size:2.4rem;line-height:1;color:var(--dorado)}
.stat-label{font-size:.78rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin-top:.4rem}

.fase-tag{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:.18rem .55rem;border-radius:999px}
.fase-grupo{background:rgba(52,152,219,.15);color:var(--azul)}
.fase-round32{background:rgba(155,89,182,.15);color:#bb8fce}
.fase-round16{background:rgba(230,126,34,.15);color:#eb984e}
.fase-cuartos{background:rgba(192,57,43,.15);color:var(--rojo)}
.fase-semis{background:rgba(255,215,0,.15);color:var(--dorado)}
.fase-tercero{background:rgba(205,127,50,.15);color:#cd7f32}
.fase-final{background:rgba(0,200,83,.15);color:var(--verde)}

.page-header{background:linear-gradient(135deg,var(--verde-field) 0%,var(--bg-2) 60%);border-bottom:1px solid var(--border);padding:2rem 1.5rem;position:relative;overflow:hidden}
.page-header::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}
.page-header-inner{max-width:1200px;margin:0 auto;position:relative}
.page-header h1{color:#fff}
.page-header p{color:rgba(255,255,255,.65);margin-top:.4rem}

.section-title{font-family:var(--font-display);font-size:1rem;color:var(--verde);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.85rem;display:flex;align-items:center;gap:.6rem}
.section-title::after{content:'';flex:1;height:1px;background:var(--border)}

.main-content{padding:1.75rem 1.5rem;max-width:1200px;margin:0 auto}

.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}

@media(max-width:900px){.grid-3{grid-template-columns:repeat(2,1fr)}.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}.navbar-nav{display:none}.navbar-brand{font-size:1.2rem}.navbar-hamburger{display:flex}}

/* ── Menú hamburguesa ──────────────────────────────────────── */
.navbar-hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px;flex-shrink:0;z-index:201}
.navbar-hamburger span{display:block;width:24px;height:2px;background:var(--text);border-radius:2px;transition:all var(--transition)}
.navbar-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navbar-hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.navbar-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-nav{display:none;position:fixed;top:62px;left:0;right:0;bottom:0;background:var(--navbar-bg);backdrop-filter:blur(16px);z-index:199;padding:1rem;border-top:1px solid var(--border);flex-direction:column;gap:.25rem;overflow-y:auto}
.mobile-nav.open{display:flex}
.mobile-nav a{color:var(--text-muted);padding:.9rem 1.1rem;border-radius:var(--radius);font-weight:700;font-size:1rem;text-decoration:none;display:flex;align-items:center;gap:.6rem;transition:all var(--transition)}
.mobile-nav a:hover{background:var(--bg-card);color:var(--text)}
.mobile-nav a.active{background:var(--verde);color:#fff}
.mobile-nav-sep{height:1px;background:var(--border);margin:.5rem 0}

.live-badge{display:inline-flex;align-items:center;gap:.35rem;background:rgba(192,57,43,.15);border:1px solid var(--rojo);color:var(--rojo);border-radius:999px;padding:.18rem .6rem;font-size:.72rem;font-weight:700}
.live-dot{width:6px;height:6px;background:var(--rojo);border-radius:50%;animation:pulse 1.2s infinite}

@keyframes fadeInUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.fade-in-up{animation:fadeInUp .45s ease both}
.stagger-1{animation-delay:.08s}.stagger-2{animation-delay:.16s}.stagger-3{animation-delay:.24s}.stagger-4{animation-delay:.32s}

.text-center{text-align:center}.text-muted{color:var(--text-muted)}.text-verde{color:var(--verde)}.text-dorado{color:var(--dorado)}.text-rojo{color:var(--rojo)}
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}
.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}.mb-4{margin-bottom:2rem}
.flex{display:flex}.flex-center{display:flex;align-items:center;justify-content:center}.flex-between{display:flex;align-items:center;justify-content:space-between}
.gap-1{gap:.5rem}.gap-2{gap:1rem}.hidden{display:none!important}