/* ============================================================
   Quiniela Mundial 2026 — Tema "Estadio Nocturno"
   Verde césped + dorado trofeo sobre fondo profundo.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Outfit:wght@400;500;600;700;800&display=swap');

:root {
    --verde-fondo:   #06140d;
    --verde-panel:   #0d2418;
    --verde-panel-2: #11301f;
    --verde-borde:   #1d4a30;
    --verde-cesped:  #19c37d;
    --verde-cesped-2:#0fa968;
    --oro:           #f5b301;
    --oro-suave:     #ffd45e;
    --texto:         #eaf6ee;
    --texto-tenue:   #93b6a1;
    --rojo:          #ff5a5f;
    --azul:          #38bdf8;
    --sombra:        0 18px 50px rgba(0,0,0,.45);
    --radio:         16px;
}

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

body {
    font-family: 'Outfit', system-ui, sans-serif;
    background:
        radial-gradient(1200px 600px at 50% -10%, rgba(25,195,125,.12), transparent 60%),
        radial-gradient(900px 500px at 90% 110%, rgba(245,179,1,.08), transparent 60%),
        var(--verde-fondo);
    color: var(--texto);
    min-height: 100vh;
    line-height: 1.55;
}

/* Textura sutil de líneas de cancha */
body::before {
    content: '';
    position: fixed; inset: 0;
    background-image: repeating-linear-gradient(
        90deg, rgba(255,255,255,.015) 0 2px, transparent 2px 80px);
    pointer-events: none; z-index: 0;
}

h1, h2, h3, .display {
    font-family: 'Anton', 'Outfit', sans-serif;
    font-weight: 400;
    letter-spacing: .5px;
    text-transform: uppercase;
    line-height: 1.05;
}

a { color: var(--verde-cesped); text-decoration: none; }
a:hover { color: var(--oro-suave); }

/* ===== Layout ===== */
.contenedor { max-width: 1080px; margin: 0 auto; padding: 24px; position: relative; z-index: 1; }
.contenedor-angosto { max-width: 460px; margin: 0 auto; padding: 24px; position: relative; z-index: 1; }

/* ===== Navbar ===== */
.nav {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
    padding: 16px 24px;
    background: linear-gradient(180deg, rgba(13,36,24,.95), rgba(13,36,24,.75));
    border-bottom: 2px solid var(--verde-borde);
    position: sticky; top: 0; z-index: 50;
    backdrop-filter: blur(8px);
}
.nav .marca {
    font-family: 'Anton', sans-serif; font-size: 1.4rem;
    text-transform: uppercase; color: var(--texto); display: flex; align-items: center; gap: 10px;
}
.nav .marca .pelota { color: var(--oro); }
.nav .links { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nav .links a {
    color: var(--texto-tenue); padding: 8px 14px; border-radius: 10px;
    font-weight: 600; font-size: .95rem; transition: .15s;
}
.nav .links a:hover, .nav .links a.activo {
    color: var(--texto); background: var(--verde-panel-2);
}
.nav .usuario { font-size: .85rem; color: var(--texto-tenue); }

/* ===== Tarjetas / Paneles ===== */
.panel {
    background: linear-gradient(180deg, var(--verde-panel), var(--verde-panel-2));
    border: 1px solid var(--verde-borde);
    border-radius: var(--radio);
    padding: 24px;
    box-shadow: var(--sombra);
}
.panel + .panel { margin-top: 20px; }

.titulo-seccion { font-size: 1.8rem; margin-bottom: 4px; }
.subtitulo { color: var(--texto-tenue); margin-bottom: 22px; }

/* ===== Hero login/registro ===== */
.hero { text-align: center; margin-bottom: 26px; }
.hero .copa { font-size: 3rem; }
.hero h1 { font-size: 2.6rem; margin: 6px 0; }
.hero h1 .anio { color: var(--oro); }
.hero p { color: var(--texto-tenue); }

/* ===== Formularios ===== */
.campo { margin-bottom: 16px; }
.campo label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; color: var(--texto); }
.campo input, .campo select, .campo textarea {
    width: 100%; padding: 12px 14px;
    background: #08200f; border: 1px solid var(--verde-borde);
    border-radius: 10px; color: var(--texto); font: inherit;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
    outline: none; border-color: var(--verde-cesped);
    box-shadow: 0 0 0 3px rgba(25,195,125,.18);
}

/* ===== Botones ===== */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 22px; border: none; border-radius: 12px;
    font: inherit; font-weight: 700; cursor: pointer; transition: .15s;
    background: linear-gradient(180deg, var(--verde-cesped), var(--verde-cesped-2));
    color: #04130a; text-transform: uppercase; letter-spacing: .4px;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(25,195,125,.3); color: #04130a; }
.btn-bloque { width: 100%; }
.btn-oro { background: linear-gradient(180deg, var(--oro-suave), var(--oro)); color: #2a1e00; }
.btn-oro:hover { box-shadow: 0 10px 24px rgba(245,179,1,.3); color: #2a1e00; }
.btn-fantasma {
    background: transparent; border: 1px solid var(--verde-borde); color: var(--texto);
}
.btn-fantasma:hover { background: var(--verde-panel-2); color: var(--texto); }
.btn-sm { padding: 8px 14px; font-size: .85rem; }

/* ===== Alertas / flash ===== */
.alerta { padding: 12px 16px; border-radius: 12px; margin-bottom: 16px; font-weight: 600; font-size: .92rem; border: 1px solid; }
.alerta-ok    { background: rgba(25,195,125,.12); border-color: var(--verde-cesped); color: #aef0cf; }
.alerta-error { background: rgba(255,90,95,.12);  border-color: var(--rojo);        color: #ffc6c8; }
.alerta-info  { background: rgba(56,189,248,.10); border-color: var(--azul);        color: #bfe6fb; }

/* ===== Badges ===== */
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.badge-ok    { background: rgba(25,195,125,.18); color: var(--verde-cesped); }
.badge-pend  { background: rgba(245,179,1,.16);  color: var(--oro-suave); }
.badge-cerr  { background: rgba(255,90,95,.14);   color: var(--rojo); }
.badge-grupo { background: var(--verde-panel-2); color: var(--texto-tenue); border: 1px solid var(--verde-borde); }

/* ===== Tarjeta de partido ===== */
.partido {
    background: var(--verde-panel-2); border: 1px solid var(--verde-borde);
    border-radius: 14px; padding: 16px; margin-bottom: 14px;
}
.partido-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: .8rem; color: var(--texto-tenue); }
.partido-fila { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.equipo { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.equipo.local { justify-content: flex-end; text-align: right; }
.equipo .bandera { font-size: 1.4rem; }
.marcador-input { display: flex; align-items: center; gap: 8px; justify-content: center; }
.marcador-input input { width: 56px; text-align: center; font-size: 1.3rem; font-weight: 700; padding: 8px; }
.marcador-input .vs { color: var(--texto-tenue); font-weight: 700; }
.resultado-real { text-align: center; font-family: 'Anton'; font-size: 1.6rem; }
.partido-pie { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.puntos-obtenidos { font-weight: 700; }
.pts-5 { color: var(--oro); } .pts-1, .pts-2, .pts-3, .pts-4 { color: var(--verde-cesped); } .pts-0 { color: var(--texto-tenue); }

/* ===== Tabla de posiciones ===== */
table.tabla { width: 100%; border-collapse: collapse; }
table.tabla th, table.tabla td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--verde-borde); }
table.tabla th { font-size: .78rem; text-transform: uppercase; color: var(--texto-tenue); letter-spacing: .5px; }
table.tabla tbody tr:hover { background: var(--verde-panel-2); }
table.tabla td.num { text-align: center; font-weight: 700; }
.pos { font-family: 'Anton'; font-size: 1.1rem; width: 44px; text-align: center; }
.pos-1 { color: var(--oro); } .pos-2 { color: #cfd8dc; } .pos-3 { color: #d8a26a; }
.fila-yo { background: rgba(25,195,125,.08); }

/* ===== Stats / KPI ===== */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 14px; margin-bottom: 20px; }
.kpi { background: var(--verde-panel-2); border: 1px solid var(--verde-borde); border-radius: 14px; padding: 18px; }
.kpi .valor { font-family: 'Anton'; font-size: 2rem; color: var(--oro); }
.kpi .etq { color: var(--texto-tenue); font-size: .85rem; text-transform: uppercase; letter-spacing: .4px; }

/* ===== Misc ===== */
.centro { text-align: center; }
.mt { margin-top: 18px; } .mb { margin-bottom: 18px; }
.fila-flex { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.entre { justify-content: space-between; }
.tenue { color: var(--texto-tenue); }
.pequeno { font-size: .85rem; }
footer.pie { text-align: center; color: var(--texto-tenue); padding: 30px; font-size: .85rem; }

@media (max-width: 560px) {
    .partido-fila { grid-template-columns: 1fr; gap: 14px; text-align: center; }
    .equipo.local { justify-content: center; text-align: center; }
    .nav { padding: 12px 16px; }
}

/* ============================================================
   MATCH CARD "PRO" — scoreboard de estadio
   ============================================================ */
.jornada {
    display:flex; align-items:center; gap:12px; margin:26px 0 14px;
}
.jornada h2 { font-size:1.25rem; margin:0; }
.jornada .linea { flex:1; height:1px; background:linear-gradient(90deg,var(--verde-borde),transparent); }

.match {
    background: linear-gradient(165deg, var(--verde-panel) 0%, #0a1f14 100%);
    border:1px solid var(--verde-borde); border-radius:18px;
    padding:18px 20px 16px; margin-bottom:16px; position:relative; overflow:hidden;
    transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.match::before {
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg,var(--verde-cesped),var(--oro));
    transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.match:hover { transform:translateY(-3px); border-color:var(--verde-cesped); box-shadow:0 16px 40px rgba(0,0,0,.45); }
.match:hover::before { transform:scaleX(1); }
.match.jugado { border-color:rgba(245,179,1,.35); }

.match-top {
    display:flex; justify-content:space-between; align-items:center; margin-bottom:14px;
    font-size:.74rem; color:var(--texto-tenue); text-transform:uppercase; letter-spacing:.6px;
}
.match-top .sede { font-style:normal; opacity:.7; }

.match-body { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; }

.team { display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center; min-width:0; }
.team .flag { font-size:2.7rem; line-height:1; filter:drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
.flag-img { width:58px; height:43px; object-fit:cover; border-radius:7px; box-shadow:0 4px 12px rgba(0,0,0,.5); display:block; border:1px solid rgba(255,255,255,.12); }
.flag-fallback { display:flex; align-items:center; justify-content:center; font-size:1.6rem; background:var(--verde-panel-2); }
.team .team-name { font-weight:700; font-size:.92rem; line-height:1.15; max-width:120px; }

.score { display:flex; align-items:center; gap:10px; }
.score-sep { font-family:'Anton'; font-size:1.7rem; color:var(--texto-tenue); margin-top:-2px; }

.stepper { display:flex; flex-direction:column; align-items:center; gap:5px; }
.step {
    width:42px; height:22px; border:1px solid var(--verde-borde); background:#08200f;
    color:var(--texto-tenue); border-radius:7px; cursor:pointer; font-size:.65rem;
    display:flex; align-items:center; justify-content:center; transition:.12s; user-select:none;
}
.step:hover { color:var(--oro); border-color:var(--oro); background:#0c2c18; }
.step:active { transform:scale(.9); }

.score-box {
    width:64px; height:66px; text-align:center; font-family:'Anton'; font-size:2.3rem;
    color:var(--texto); background:#04140b; border:2px solid var(--verde-borde);
    border-radius:12px; box-shadow:inset 0 2px 10px rgba(0,0,0,.55); transition:.15s;
}
.score-box:focus { outline:none; border-color:var(--oro); box-shadow:inset 0 2px 10px rgba(0,0,0,.55), 0 0 0 3px rgba(245,179,1,.22); }
.score-box::-webkit-outer-spin-button, .score-box::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.score-box { -moz-appearance:textfield; appearance:textfield; }

.score-final {
    font-family:'Anton'; font-size:2.8rem; color:var(--oro); line-height:1;
    text-shadow:0 2px 12px rgba(245,179,1,.25); min-width:64px; text-align:center;
}
.score-locked {
    width:64px; height:66px; display:flex; align-items:center; justify-content:center;
    font-family:'Anton'; font-size:2.3rem; color:var(--texto-tenue);
    background:#04140b; border:2px solid var(--verde-borde); border-radius:12px;
}

.match-foot {
    display:flex; justify-content:space-between; align-items:center; gap:10px;
    margin-top:14px; padding-top:12px; border-top:1px solid var(--verde-borde);
    font-size:.84rem; color:var(--texto-tenue); flex-wrap:wrap;
}
.match-foot .tu-pred { display:flex; align-items:center; gap:6px; }
.match-foot .chip {
    background:#08200f; border:1px solid var(--verde-borde); border-radius:8px;
    padding:3px 9px; font-weight:700; color:var(--texto);
}
.gano-pts { font-family:'Anton'; font-size:1.05rem; }

@media (max-width:520px) {
    .team .flag { font-size:2.1rem; }
    .flag-img { width:46px; height:34px; }
    .team .team-name { font-size:.8rem; }
    .score-box, .score-locked { width:54px; height:58px; font-size:1.9rem; }
    .step { width:36px; }
    .match-body { gap:6px; }
}