/* ============================================================
   QUINIELA MUNDIAL 2026 · Estilo app FIFA (azul profundo)
   ============================================================ */
:root {
    --fondo-arriba: #21357f;
    --fondo-medio: #14235f;
    --fondo-abajo: #0a153f;
    --carta: rgba(8, 17, 52, 0.45);
    --carta-borde: rgba(255, 255, 255, 0.07);
    --chip: rgba(16, 28, 74, 0.85);
    --texto: #ffffff;
    --texto-suave: #8fa2d4;
    --texto-apagado: rgba(255, 255, 255, 0.55);
    --dorado: #e8c35a;
    --verde: #35c46e;
    --rojo-vivo: #ff5a5a;
    --radio: 26px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
                 Roboto, "Helvetica Neue", Arial, sans-serif;
    background: linear-gradient(180deg, var(--fondo-arriba) 0%, var(--fondo-medio) 32%, var(--fondo-abajo) 100%);
    background-attachment: fixed;
    color: var(--texto);
    min-height: 100vh;
    padding: 16px 14px 60px;
}

.contenedor { max-width: 640px; margin: 0 auto; }
.contenedor-ancho { max-width: 1100px; margin: 0 auto; }

/* ---------- Encabezado ---------- */
.encabezado { text-align: center; padding: 8px 0 18px; position: relative; }
.encabezado .trofeo {
    width: 46px; height: 60px; margin: 0 auto 10px;
    background: linear-gradient(180deg, #f4d67c, #c99a2e);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath d='M12 0c2.6 0 4.6 1 5.6 2.4.5-.2 1-.4 1.7-.4 2.4 0 4.7 1.9 4.7 5 0 3.6-2.9 6.5-6.5 7.6-.9 2-2.3 3.5-4 4.2v4.4h3.6c.7 0 1.4.6 1.4 1.4v6.2c0 .7-.6 1.2-1.4 1.2H6.9c-.8 0-1.4-.5-1.4-1.2v-6.2c0-.8.7-1.4 1.4-1.4h3.6v-4.4c-1.7-.7-3.1-2.2-4-4.2C2.9 13.5 0 10.6 0 7c0-3.1 2.3-5 4.7-5 .7 0 1.2.2 1.7.4C7.4 1 9.4 0 12 0z'/%3E%3C/svg%3E") center/contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath d='M12 0c2.6 0 4.6 1 5.6 2.4.5-.2 1-.4 1.7-.4 2.4 0 4.7 1.9 4.7 5 0 3.6-2.9 6.5-6.5 7.6-.9 2-2.3 3.5-4 4.2v4.4h3.6c.7 0 1.4.6 1.4 1.4v6.2c0 .7-.6 1.2-1.4 1.2H6.9c-.8 0-1.4-.5-1.4-1.2v-6.2c0-.8.7-1.4 1.4-1.4h3.6v-4.4c-1.7-.7-3.1-2.2-4-4.2C2.9 13.5 0 10.6 0 7c0-3.1 2.3-5 4.7-5 .7 0 1.2.2 1.7.4C7.4 1 9.4 0 12 0z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.encabezado h1 { font-size: 24px; font-weight: 700; letter-spacing: .2px; }
.encabezado .subtitulo { color: var(--texto-suave); font-size: 14px; margin-top: 4px; font-weight: 600; }

/* ---------- Navegación principal ---------- */
.nav-paginas {
    display: flex; justify-content: center; gap: 8px; margin: 14px 0 20px; flex-wrap: wrap;
}
.nav-paginas a {
    color: var(--texto-suave); text-decoration: none; font-weight: 700; font-size: 14px;
    padding: 9px 18px; border-radius: 999px; background: rgba(255,255,255,0.05);
    border: 1px solid transparent; transition: all .18s;
}
.nav-paginas a.activo { color: #0a153f; background: #fff; }
.nav-paginas a:not(.activo):hover { border-color: var(--carta-borde); color: #cdd8f5; }

/* ---------- Tarjeta contenedora ---------- */
.carta {
    background: var(--carta);
    border: 1px solid var(--carta-borde);
    border-radius: var(--radio);
    padding: 18px 16px;
    margin-bottom: 22px;
    backdrop-filter: blur(8px);
}

/* ---------- Pestañas Resultados / Hoy / Próximos ---------- */
.pestanas { display: flex; justify-content: space-around; padding: 4px 8px 14px; }
.pestanas button {
    background: none; border: none; cursor: pointer;
    color: var(--texto-suave); font-size: 19px; font-weight: 600;
    font-family: inherit; padding: 6px 10px; transition: color .15s;
}
.pestanas button.activa { color: #fff; font-weight: 800; }

/* ---------- Partido ---------- */
.partido {
    padding: 16px 6px 18px;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.partido:first-child { border-top: none; }
.partido .fase {
    text-align: center; color: var(--texto-apagado);
    font-size: 15px; font-weight: 700; margin-bottom: 12px;
}
.partido .fila {
    display: grid;
    grid-template-columns: 1fr auto 1.1fr auto 1fr;
    align-items: center; gap: 6px;
}
.equipo { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 74px; }
.equipo img, .equipo .sin-bandera {
    width: 46px; height: 46px; border-radius: 50%;
    object-fit: cover; background: rgba(255,255,255,0.12);
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.equipo .sin-bandera { display: block; }
.equipo .nombre { font-size: 15px; font-weight: 700; text-align: center; line-height: 1.2; }
.equipo .dueno { font-size: 11.5px; color: var(--dorado); font-weight: 700; }

.gol { font-size: 42px; font-weight: 800; color: rgba(255,255,255,0.55); min-width: 34px; text-align: center; }
.partido.en-vivo .gol { color: #fff; }

.centro { text-align: center; }
.centro .estado-fin { font-size: 17px; font-weight: 800; }
.centro .penales { font-size: 14px; font-weight: 700; margin-top: 2px; }
.centro .hora { font-size: 26px; font-weight: 800; }
.centro .fecha { font-size: 12.5px; color: var(--texto-suave); font-weight: 700; margin-top: 3px; }
.centro .vivo {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--rojo-vivo); font-weight: 800; font-size: 15px;
}
.centro .vivo::before {
    content: ""; width: 9px; height: 9px; border-radius: 50%;
    background: var(--rojo-vivo); animation: parpadeo 1.1s infinite;
}
@keyframes parpadeo { 50% { opacity: .25; } }

.vacio { text-align: center; color: var(--texto-suave); padding: 26px 10px; font-weight: 600; }

/* ---------- Sección quiniela ---------- */
.titulo-seccion { text-align: center; font-size: 21px; font-weight: 800; margin-bottom: 16px; }
.participante {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 14px 4px;
}
.participante:first-of-type { border-top: none; }
.participante .cabecera { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.participante .cabecera .nombre-p { font-size: 17px; font-weight: 800; }
.participante .cabecera .vivos {
    font-size: 12.5px; font-weight: 800; color: var(--verde);
    background: rgba(53,196,110,0.12); padding: 4px 12px; border-radius: 999px;
}
.equipos-mini { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-equipo {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--chip); border: 1px solid var(--carta-borde);
    border-radius: 999px; padding: 5px 13px 5px 6px;
    font-size: 13.5px; font-weight: 700;
}
.chip-equipo img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.chip-equipo.eliminado { opacity: .42; }
.chip-equipo.eliminado .nombre-e { text-decoration: line-through; }
.chip-equipo.campeon { border-color: var(--dorado); color: var(--dorado); }
.chip-equipo .fase-out { font-size: 10.5px; color: var(--texto-suave); font-weight: 600; }

/* ---------- Cuadro / Bracket ---------- */
.tabs-fases {
    display: flex; justify-content: space-around; max-width: 640px;
    margin: 0 auto 18px; padding: 0 8px;
}
.tabs-fases span { color: var(--texto-suave); font-weight: 800; font-size: 16px; }
.tabs-fases span.activa { color: #fff; }

.bracket {
    display: flex; gap: 34px; overflow-x: auto; padding: 6px 4px 30px;
    -webkit-overflow-scrolling: touch;
}
.ronda { display: flex; flex-direction: column; justify-content: space-around; gap: 22px; min-width: 250px; }
.ronda .titulo-ronda {
    text-align: center; color: var(--texto-suave);
    font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px;
}
.llave { position: relative; }
.llave .fecha-llave {
    background: var(--chip); border: 1px solid var(--carta-borde);
    border-bottom: none; border-radius: 16px 16px 0 0;
    padding: 8px 14px; font-size: 13.5px; font-weight: 800; color: #cdd8f5;
}
.llave .lado {
    background: rgba(13, 24, 66, 0.62); border: 1px solid var(--carta-borde);
    padding: 11px 14px; display: flex; align-items: center; gap: 10px;
    font-size: 15.5px; font-weight: 700;
}
.llave .lado + .lado { border-top: none; border-radius: 0 0 16px 16px; }
.llave .lado img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.llave .lado .marcador-lado { margin-left: auto; font-weight: 800; color: var(--texto-apagado); }
.llave .lado.gana { color: #fff; }
.llave .lado.gana .marcador-lado { color: #fff; }
.llave .lado.pierde { color: var(--texto-apagado); }
.llave .lado.pendiente { color: var(--texto-apagado); }
.llave .lado .circulo {
    width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,0.09); flex-shrink: 0;
}
/* Conectores entre rondas */
.par { display: flex; flex-direction: column; gap: 22px; position: relative; }
.par::after {
    content: ""; position: absolute; right: -18px; top: 25%; bottom: 25%;
    width: 16px; border: 1.5px solid rgba(255,255,255,0.16); border-left: none;
    border-radius: 0 12px 12px 0;
}
.ronda.final .par::after { display: none; }

/* ---------- Formularios (sorteo) ---------- */
.formulario input[type=text], .formulario input[type=password] {
    width: 100%; background: rgba(255,255,255,0.07); color: #fff;
    border: 1px solid var(--carta-borde); border-radius: 14px;
    padding: 12px 16px; font-size: 15px; font-family: inherit; outline: none;
}
.formulario input:focus { border-color: rgba(255,255,255,0.35); }
.boton {
    display: inline-block; background: #fff; color: #0a153f;
    font-weight: 800; font-size: 15px; font-family: inherit;
    border: none; border-radius: 999px; padding: 12px 26px;
    cursor: pointer; transition: transform .12s, opacity .15s;
}
.boton:hover { opacity: .92; }
.boton:active { transform: scale(.97); }
.boton.dorado { background: linear-gradient(135deg, #f4d67c, #d1a437); }
.boton.peligro { background: rgba(255,90,90,0.15); color: #ff9d9d; }
.boton:disabled { opacity: .4; cursor: not-allowed; }
.fila-form { display: flex; gap: 10px; margin-bottom: 10px; }
.lista-simple li {
    list-style: none; display: flex; justify-content: space-between; align-items: center;
    padding: 10px 4px; border-bottom: 1px solid rgba(255,255,255,0.08); font-weight: 700;
}
.aviso {
    background: rgba(232,195,90,0.1); border: 1px solid rgba(232,195,90,0.3);
    color: var(--dorado); border-radius: 14px; padding: 12px 16px;
    font-size: 14px; font-weight: 600; margin-bottom: 16px;
}
.exito {
    background: rgba(53,196,110,0.1); border: 1px solid rgba(53,196,110,0.35);
    color: var(--verde); border-radius: 14px; padding: 12px 16px;
    font-size: 14px; font-weight: 600; margin-bottom: 16px;
}
.nota-pie { text-align: center; color: var(--texto-suave); font-size: 12.5px; margin-top: 8px; }
.nota-pie a { color: var(--texto-suave); }

@media (max-width: 480px) {
    .gol { font-size: 34px; }
    .centro .hora { font-size: 22px; }
    .equipo img, .equipo .sin-bandera { width: 42px; height: 42px; }
    .encabezado h1 { font-size: 20px; }
}