:root{
    --bg:#03140b;
    --bg2:#061f12;
    --panel:#082617;
    --panel2:#0c321f;
    --card:#0b2b1b;
    --card2:#0f3b25;

    --grass:#10b85f;
    --grass2:#35e27d;
    --gold:#f4c64f;
    --red:#e62b3f;
    --blue:#246bff;

    --text:#f8fff9;
    --muted:#b6c8bc;
    --line:rgba(255,255,255,.13);
    --soft:rgba(255,255,255,.07);

    --radius:22px;
    --shadow:0 18px 45px rgba(0,0,0,.34);
}

*{
    box-sizing:border-box;
    -webkit-tap-highlight-color:transparent;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    min-height:100vh;
    font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    color:var(--text);
    background:
        radial-gradient(circle at 50% -8%, rgba(255,255,255,.18), transparent 20%),
        radial-gradient(circle at 10% 12%, rgba(36,107,255,.18), transparent 28%),
        radial-gradient(circle at 90% 10%, rgba(230,43,63,.16), transparent 26%),
        linear-gradient(180deg,#03140b 0%,#061f12 44%,#03140b 100%);
    padding-bottom:84px;
}

body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:0;
    opacity:.18;
    background:
        linear-gradient(90deg, transparent 0 49%, rgba(255,255,255,.25) 50%, transparent 51% 100%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 1px, transparent 1px 54px),
        repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 1px, transparent 1px 54px);
    mask-image:linear-gradient(to bottom, black 0%, black 58%, transparent 100%);
}

a{
    color:inherit;
    text-decoration:none;
}

.top{
    position:sticky;
    top:0;
    z-index:50;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 14px;
    background:rgba(3,20,11,.88);
    backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line);
}

.top::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-1px;
    height:3px;
    background:linear-gradient(90deg,var(--grass),var(--gold),var(--red),var(--blue));
}

.brand{
    display:flex;
    align-items:center;
    gap:9px;
    font-size:18px;
    font-weight:1000;
    letter-spacing:-.045em;
    white-space:nowrap;
}

.brand::before{
    content:"⚽";
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    border-radius:14px;
    background:linear-gradient(135deg,var(--grass2),var(--grass));
    box-shadow:0 10px 25px rgba(16,184,95,.28);
    font-size:19px;
}

nav{
    display:flex;
    align-items:center;
    gap:7px;
}

nav a{
    min-height:38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 11px;
    border-radius:999px;
    color:var(--muted);
    font-size:13px;
    font-weight:850;
    background:transparent;
}

nav a:hover{
    color:white;
    background:var(--soft);
}

nav .btn,
.btn,
button{
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:0;
    border-radius:999px;
    padding:12px 17px;
    font-weight:1000;
    cursor:pointer;
    background:linear-gradient(135deg,var(--grass2),var(--grass));
    color:#021208;
    box-shadow:0 12px 28px rgba(16,184,95,.22);
}

.btn.ghost{
    background:rgba(255,255,255,.08);
    color:white;
    box-shadow:none;
    border:1px solid var(--line);
}

.big{
    min-height:50px;
    font-size:15px;
    padding:14px 20px;
}

.wrap{
    position:relative;
    z-index:2;
    width:min(760px,100%);
    margin:0 auto;
    padding:16px 14px 28px;
}

.hero,
.stadium-hero{
    position:relative;
    overflow:hidden;
    display:block;
    min-height:auto;
    padding:26px 20px;
    border-radius:28px;
    border:1px solid var(--line);
    background:
        radial-gradient(circle at 82% 18%, rgba(244,198,79,.22), transparent 21%),
        linear-gradient(145deg,rgba(16,184,95,.20),rgba(36,107,255,.08)),
        linear-gradient(180deg,var(--panel2),var(--panel));
    box-shadow:var(--shadow);
}

.hero::before{
    content:"";
    position:absolute;
    right:-60px;
    bottom:-80px;
    width:230px;
    height:230px;
    border-radius:50%;
    border:2px solid rgba(255,255,255,.14);
    box-shadow:inset 0 0 0 18px rgba(255,255,255,.035);
}

.hero::after{
    content:"2026";
    position:absolute;
    right:-18px;
    bottom:-12px;
    font-size:92px;
    line-height:.8;
    font-weight:1000;
    letter-spacing:-.12em;
    color:rgba(255,255,255,.065);
}

.hero-content,
.actions{
    position:relative;
    z-index:2;
}

.eyebrow{
    display:inline-flex;
    align-items:center;
    margin-bottom:13px;
    padding:7px 10px;
    border-radius:999px;
    background:rgba(244,198,79,.14);
    border:1px solid rgba(244,198,79,.32);
    color:#ffeaa5;
    font-size:11px;
    font-weight:1000;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.hero h1{
    margin:0 0 12px;
    max-width:540px;
    font-size:clamp(35px,11vw,54px);
    line-height:.9;
    letter-spacing:-.075em;
}

.hero p{
    margin:0;
    max-width:520px;
    color:var(--muted);
    font-size:16px;
    line-height:1.42;
}

.actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:20px;
}

.scoreboard{
    margin-top:18px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    position:relative;
    z-index:2;
}

.score-title{
    grid-column:1/-1;
    text-align:center;
    padding:9px;
    border-radius:16px;
    background:rgba(0,0,0,.35);
    border:1px solid var(--line);
    color:#ffeaa5;
    font-size:11px;
    font-weight:1000;
    letter-spacing:.12em;
}

.score-main{
    min-height:75px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    padding:10px;
    border-radius:18px;
    background:rgba(255,255,255,.075);
    border:1px solid var(--line);
}

.score-main span{
    font-size:24px;
    font-weight:1000;
    letter-spacing:-.06em;
}

.score-main small{
    color:var(--muted);
    font-size:10px;
    font-weight:900;
    text-transform:uppercase;
}

.quick-rules,
.grid,
.cards{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    margin-top:14px;
}

.rule-card,
.card,
.tile{
    position:relative;
    overflow:hidden;
    border-radius:var(--radius);
    border:1px solid var(--line);
    background:
        linear-gradient(180deg,rgba(255,255,255,.075),transparent 38%),
        linear-gradient(180deg,var(--card2),var(--card));
    box-shadow:0 12px 30px rgba(0,0,0,.25);
    padding:17px;
}

.rule-card::before,
.card::before,
.tile::before{
    content:"";
    position:absolute;
    left:14px;
    right:14px;
    top:0;
    height:4px;
    border-radius:0 0 999px 999px;
    background:linear-gradient(90deg,var(--grass),var(--gold),var(--red),var(--blue));
}

.rule-card{
    min-height:98px;
    display:grid;
    grid-template-columns:42px 1fr;
    column-gap:12px;
    align-items:center;
}

.rule-icon{
    grid-row:1/3;
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:16px;
    background:rgba(255,255,255,.09);
    font-size:24px;
}

.rule-card strong{
    font-size:24px;
    line-height:1;
    letter-spacing:-.05em;
}

.rule-card span,
.tile span{
    color:var(--muted);
    font-size:14px;
}

.tournament-card{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    margin-top:14px;
}

.tile{
    min-height:98px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:7px;
}

.tile strong{
    font-size:26px;
    letter-spacing:-.055em;
}

.narrow{
    max-width:460px;
    margin:0 auto;
}

h1{
    margin:0 0 15px;
    font-size:clamp(30px,9vw,46px);
    line-height:.96;
    letter-spacing:-.06em;
}

h2{
    margin:0 0 10px;
    font-size:22px;
    letter-spacing:-.04em;
}

h3{
    margin:8px 0 7px;
    font-size:19px;
    letter-spacing:-.03em;
}

p{
    line-height:1.45;
}

.muted{
    color:var(--muted);
}

form label{
    display:flex;
    flex-direction:column;
    gap:7px;
    margin-bottom:13px;
    color:#d7e5da;
    font-size:13px;
    font-weight:850;
}

input,
select,
textarea{
    width:100%;
    min-height:48px;
    padding:13px 14px;
    border-radius:16px;
    border:1px solid var(--line);
    background:rgba(0,0,0,.36);
    color:white;
    outline:none;
    font-size:16px;
}

input:focus,
select:focus,
textarea:focus{
    border-color:rgba(244,198,79,.72);
    box-shadow:0 0 0 4px rgba(244,198,79,.12);
}

select option{
    background:#082617;
    color:white;
}

.inline,
.formgrid{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
}

.inline input,
.inline select{
    width:100%;
    min-width:0;
}

.formgrid label{
    margin:0;
}

.check{
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
}

.check input{
    width:auto;
    min-height:auto;
}

.score{
    display:grid;
    grid-template-columns:82px 24px 82px;
    align-items:center;
    gap:8px;
}

.score input{
    width:82px;
    min-height:58px;
    text-align:center;
    font-size:25px;
    font-weight:1000;
    border-radius:18px;
    background:rgba(0,0,0,.48);
}

.score span{
    text-align:center;
    color:var(--gold);
    font-size:26px;
    font-weight:1000;
}

.score button{
    grid-column:1/-1;
    width:100%;
    margin-top:4px;
}

.match{
    padding-top:21px;
}

.match::after{
    content:"⚽";
    position:absolute;
    right:14px;
    top:12px;
    font-size:30px;
    opacity:.18;
    transform:rotate(-12deg);
}

.badge{
    display:inline-flex;
    align-items:center;
    padding:7px 10px;
    border-radius:999px;
    background:rgba(244,198,79,.13);
    border:1px solid rgba(244,198,79,.32);
    color:#ffeaa5;
    font-size:11px;
    font-weight:1000;
    text-transform:uppercase;
    letter-spacing:.055em;
}

.locked{
    opacity:.70;
}

.lockedtxt{
    display:inline-flex;
    padding:8px 11px;
    border-radius:999px;
    background:rgba(230,43,63,.14);
    border:1px solid rgba(230,43,63,.34);
    color:#ffd2d8;
    font-size:13px;
    font-weight:1000;
}

.flash{
    margin-bottom:14px;
    padding:14px 15px;
    border-radius:18px;
    background:linear-gradient(90deg,rgba(16,184,95,.20),rgba(244,198,79,.12));
    border:1px solid rgba(244,198,79,.32);
    color:white;
    font-weight:900;
}

table{
    width:100%;
    border-collapse:separate;
    border-spacing:0 10px;
    margin-top:12px;
}

thead,
tbody,
tr,
th,
td{
    display:block;
}

tr{
    border-radius:20px;
    background:
        linear-gradient(180deg,rgba(255,255,255,.06),transparent 42%),
        linear-gradient(180deg,var(--card2),var(--card));
    border:1px solid var(--line);
    box-shadow:0 10px 24px rgba(0,0,0,.22);
    overflow:hidden;
    margin-bottom:10px;
}

th{
    display:none;
}

td{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:10px 14px;
    border-bottom:1px solid rgba(255,255,255,.07);
    color:white;
    font-size:14px;
}

td:last-child{
    border-bottom:0;
}

td::before{
    content:"";
    color:var(--muted);
    font-weight:800;
    min-width:96px;
}

td:nth-child(1)::before{content:"#";}
td:nth-child(2)::before{content:"Nombre";}
td:nth-child(3)::before{content:"Dato";}
td:nth-child(4)::before{content:"Puntos";}
td:nth-child(5)::before{content:"Info";}
td:nth-child(6)::before{content:"Aciertos";}
td:nth-child(7)::before{content:"Exactos";}
td:nth-child(8)::before{content:"Diferencia";}
td:nth-child(9)::before{content:"Acciones";}

.mini{
    min-height:36px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 10px;
    border-radius:999px;
    background:rgba(255,255,255,.075);
    border:1px solid var(--line);
    color:white;
    font-size:12px;
    font-weight:900;
    margin:2px;
}

.mini.danger,
.danger,
.dangerbtn{
    background:linear-gradient(135deg,#ff5b6c,var(--red));
    color:white;
}

.footer{
    position:relative;
    z-index:2;
    padding:22px 14px 100px;
    text-align:center;
    color:var(--muted);
    font-size:13px;
}

/* APP MOBILE NAV */
@media(max-width:760px){
    .top{
        padding:10px 12px;
    }

    .brand{
        font-size:16px;
    }

    .brand::before{
        width:34px;
        height:34px;
        border-radius:13px;
    }

    nav{
        position:fixed;
        left:10px;
        right:10px;
        bottom:10px;
        z-index:80;
        display:grid;
        grid-template-columns:repeat(4,1fr);
        gap:6px;
        padding:8px;
        border-radius:24px;
        background:rgba(3,20,11,.92);
        backdrop-filter:blur(18px);
        border:1px solid rgba(255,255,255,.14);
        box-shadow:0 20px 55px rgba(0,0,0,.48);
    }

    nav a{
        min-height:50px;
        padding:7px 6px;
        border-radius:18px;
        flex-direction:column;
        gap:3px;
        font-size:11px;
        line-height:1;
        color:#d7e5da;
        background:rgba(255,255,255,.04);
        text-align:center;
    }

    nav a:nth-child(n+5){
        display:none;
    }

    nav a[href="/"]::before{content:"🏟️";font-size:17px;}
    nav a[href="/?r=ranking"]::before{content:"🏆";font-size:17px;}
    nav a[href="/?r=login"]::before{content:"👤";font-size:17px;}
    nav a[href="/?r=registro"]::before,
    nav a[href="/?r=predicciones"]::before{content:"⚽";font-size:17px;}
    nav a[href="/?r=mis-puntos"]::before{content:"📊";font-size:17px;}
    nav a[href="/?r=admin"]::before{content:"⚙️";font-size:17px;}

    nav .btn{
        padding:7px 6px;
        min-height:50px;
        box-shadow:none;
        color:#03140b;
    }
}

/* DESKTOP/TABLET */
@media(min-width:761px){
    body{
        padding-bottom:0;
    }

    .wrap{
        width:min(1220px,94vw);
        padding:28px 0 50px;
    }

    .hero,
    .stadium-hero{
        display:grid;
        grid-template-columns:minmax(0,1fr) 330px;
        gap:30px;
        padding:clamp(38px,6vw,74px);
    }

    .quick-rules,
    .grid{
        grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    }

    .cards{
        grid-template-columns:repeat(auto-fit,minmax(310px,1fr));
    }

    .inline{
        display:flex;
        flex-wrap:wrap;
        align-items:end;
    }

    .inline input,
    .inline select{
        width:auto;
        min-width:190px;
    }

    .formgrid{
        grid-template-columns:repeat(auto-fit,minmax(205px,1fr));
    }

    table{
        border-collapse:separate;
        border-spacing:0;
        overflow:hidden;
        border-radius:22px;
        background:rgba(7,20,13,.92);
        border:1px solid var(--line);
    }

    thead,
    tbody,
    tr{
        display:table-row-group;
    }

    tr{
        display:table-row;
        box-shadow:none;
        background:transparent;
        border:0;
        margin:0;
    }

    th,
    td{
        display:table-cell;
        padding:14px 13px;
        border-bottom:1px solid rgba(255,255,255,.10);
    }

    th{
        background:linear-gradient(90deg,rgba(16,184,95,.18),rgba(255,255,255,.045));
        color:#eff6ef;
        font-size:12px;
        text-transform:uppercase;
        letter-spacing:.08em;
    }

    td::before{
        content:none !important;
    }

    .score{
        display:flex;
    }

    .score button{
        width:auto;
        margin-top:0;
    }
}

@media(max-width:390px){
    .actions{
        grid-template-columns:1fr;
    }

    .scoreboard{
        grid-template-columns:1fr;
    }

    .score-title{
        grid-column:auto;
    }

    .hero h1{
        font-size:34px;
    }
}

/* =========================================================
   UX MÓVIL COMPACTO - APP QUINIELA
   Reduce widgets, tarjetas, botones y mejora espacio útil
========================================================= */

@media(max-width:760px){

    body{
        padding-bottom:72px;
        background:
            radial-gradient(circle at 50% -8%, rgba(255,255,255,.10), transparent 18%),
            linear-gradient(180deg,#03140b 0%,#061f12 48%,#03140b 100%);
    }

    body::before{
        opacity:.10;
        background-size:48px 48px;
    }

    .top{
        padding:8px 10px;
        min-height:54px;
    }

    .brand{
        font-size:14px;
        gap:7px;
        max-width:55vw;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .brand::before{
        width:30px;
        height:30px;
        min-width:30px;
        border-radius:11px;
        font-size:15px;
    }

    .wrap{
        padding:10px 10px 18px;
    }

    /* HERO MÁS PEQUEÑO */
    .hero,
    .stadium-hero{
        padding:18px 15px;
        border-radius:20px;
        min-height:0;
        margin-bottom:10px;
    }

    .hero::before{
        width:145px;
        height:145px;
        right:-48px;
        bottom:-60px;
        opacity:.55;
    }

    .hero::after{
        font-size:58px;
        right:-8px;
        bottom:-6px;
        opacity:.60;
    }

    .eyebrow{
        font-size:9px;
        padding:5px 8px;
        margin-bottom:9px;
    }

    .hero h1{
        font-size:30px;
        line-height:.92;
        margin-bottom:8px;
        max-width:88%;
    }

    .hero p{
        font-size:13px;
        line-height:1.35;
        max-width:92%;
    }

    .actions{
        grid-template-columns:1fr 1fr;
        gap:8px;
        margin-top:14px;
    }

    .btn,
    button,
    nav .btn{
        min-height:38px;
        padding:9px 12px;
        font-size:12px;
        border-radius:14px;
    }

    .big{
        min-height:40px;
        padding:9px 12px;
        font-size:12px;
    }

    /* OCULTAR SCOREBOARD GRANDE EN MÓVIL PARA AHORRAR ESPACIO */
    .scoreboard{
        display:none;
    }

    /* REGLAS EN WIDGETS PEQUEÑOS */
    .quick-rules{
        grid-template-columns:repeat(2,1fr);
        gap:8px;
        margin-top:10px;
    }

    .rule-card{
        min-height:72px;
        padding:11px;
        border-radius:16px;
        display:grid;
        grid-template-columns:30px 1fr;
        gap:7px;
    }

    .rule-card::before{
        left:10px;
        right:10px;
        height:3px;
    }

    .rule-icon{
        width:30px;
        height:30px;
        border-radius:11px;
        font-size:17px;
    }

    .rule-card strong{
        font-size:17px;
        line-height:1;
    }

    .rule-card span{
        font-size:10.5px;
        line-height:1.15;
    }

    /* TARJETAS MÁS COMPACTAS */
    .card,
    .tile{
        padding:12px;
        border-radius:17px;
        margin-bottom:10px;
    }

    .card::before,
    .tile::before{
        left:10px;
        right:10px;
        height:3px;
    }

    .cards,
    .grid{
        gap:9px;
        margin-top:9px;
    }

    .tile{
        min-height:74px;
        gap:4px;
    }

    .tile strong{
        font-size:20px;
    }

    .tile span{
        font-size:12px;
        line-height:1.25;
    }

    .tournament-card{
        display:none;
    }

    h1{
        font-size:25px;
        margin-bottom:10px;
        line-height:1;
    }

    h2{
        font-size:18px;
        margin-bottom:8px;
    }

    h3{
        font-size:16px;
        margin:6px 0 4px;
    }

    p{
        font-size:13px;
        line-height:1.35;
    }

    .muted{
        font-size:12px;
    }

    .badge{
        font-size:9px;
        padding:5px 8px;
    }

    /* CARDS DE PARTIDOS MÁS PEQUEÑAS */
    .match{
        padding:14px 12px 12px;
    }

    .match::after{
        font-size:22px;
        right:10px;
        top:9px;
    }

    .match h3{
        max-width:82%;
        font-size:16px;
        line-height:1.15;
    }

    .lockedtxt{
        padding:6px 8px;
        font-size:11px;
    }

    /* FORMULARIOS MÁS COMPACTOS */
    form label{
        font-size:12px;
        margin-bottom:9px;
        gap:5px;
    }

    input,
    select,
    textarea{
        min-height:40px;
        padding:9px 10px;
        border-radius:13px;
        font-size:14px;
    }

    .formgrid,
    .inline{
        gap:8px;
    }

    /* PRONÓSTICO COMPACTO */
    .score{
        grid-template-columns:58px 18px 58px;
        gap:6px;
        margin-top:6px;
    }

    .score input{
        width:58px;
        min-height:46px;
        font-size:20px;
        border-radius:14px;
        padding:6px;
    }

    .score span{
        font-size:20px;
    }

    .score button{
        min-height:38px;
        margin-top:2px;
        font-size:12px;
        border-radius:14px;
    }

    /* TABLAS COMO CARDS MÁS PEQUEÑAS */
    table{
        border-spacing:0 7px;
        margin-top:8px;
    }

    tr{
        border-radius:15px;
        margin-bottom:7px;
    }

    td{
        padding:7px 10px;
        font-size:12px;
        gap:8px;
        line-height:1.25;
    }

    td::before{
        min-width:72px;
        font-size:10px;
        opacity:.78;
    }

    .mini{
        min-height:30px;
        padding:6px 8px;
        font-size:10.5px;
        border-radius:12px;
    }

    .flash{
        padding:10px 11px;
        font-size:12px;
        border-radius:14px;
        margin-bottom:10px;
    }

    /* MENÚ INFERIOR MÁS COMPACTO Y VISIBLE */
    nav{
        left:8px;
        right:8px;
        bottom:8px;
        grid-template-columns:repeat(4,1fr);
        gap:5px;
        padding:6px;
        border-radius:20px;
    }

    nav a{
        min-height:44px;
        padding:5px 4px;
        border-radius:15px;
        font-size:10px;
        gap:2px;
    }

    nav a::before{
        font-size:15px !important;
    }

    nav .btn{
        min-height:44px;
        padding:5px 4px;
        border-radius:15px;
        font-size:10px;
    }

    /* Mostrar solo 4 accesos principales en móvil */
    nav a:nth-child(n+5){
        display:none !important;
    }

    /* Footer más bajo */
    .footer{
        padding:16px 10px 82px;
        font-size:11px;
    }
}

/* EXTRA COMPACTO PARA CELULARES PEQUEÑOS */
@media(max-width:390px){

    .wrap{
        padding-left:8px;
        padding-right:8px;
    }

    .hero h1{
        font-size:27px;
    }

    .hero p{
        font-size:12px;
    }

    .actions{
        grid-template-columns:1fr;
    }

    .quick-rules{
        grid-template-columns:1fr 1fr;
    }

    .rule-card{
        min-height:66px;
        padding:10px;
    }

    .rule-icon{
        width:27px;
        height:27px;
        font-size:15px;
    }

    .rule-card strong{
        font-size:15px;
    }

    .rule-card span{
        font-size:9.5px;
    }

    .card,
    .tile{
        padding:10px;
    }

    .score{
        grid-template-columns:52px 16px 52px;
    }

    .score input{
        width:52px;
        min-height:42px;
        font-size:18px;
    }

    nav a{
        font-size:9px;
    }
}

/* =========================================================
   PATCH FINAL
   TEMA APP MÓVIL + TABS ARRIBA + COLORES LISOS MUNDIAL 2026
   Inspirado en host cities, sin tema recargado
========================================================= */

/* ---------- RESET DE COSAS QUE ESTÁN MOLESTANDO ---------- */
body::before,
body::after,
.hero::before,
.hero::after,
.stadium-hero::before,
.stadium-hero::after,
.scoreboard{
    content:none !important;
    display:none !important;
}

.tournament-card{
    display:none !important;
}

/* si el css viejo escondía tabs, aquí los volvemos a mostrar */
nav a:nth-child(n+5){
    display:inline-flex !important;
}

/* quitar bottom nav fijo viejo */
nav{
    position:static !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
}

/* ---------- PALETA LISA MUNDIAL 2026 ---------- */
:root{
    --wc-navy:#2334a2;
    --wc-blue:#3e57f5;
    --wc-cyan:#3ad9d2;
    --wc-lime:#c6f000;
    --wc-purple:#9b6bff;
    --wc-pink:#ff4e8f;
    --wc-coral:#ff645e;
    --wc-orange:#ff8a22;
    --wc-mint:#aee9c9;
    --wc-dark:#111a56;
    --wc-bg:#eef2ff;
    --wc-card:#ffffff;
    --wc-text:#111827;
    --wc-muted:#5e6785;
    --wc-line:#d9dff6;
    --wc-shadow:0 10px 30px rgba(35,52,162,.10);
    --radius:18px;
}

/* ---------- BASE ---------- */
html{
    scroll-behavior:smooth;
}

body{
    margin:0 !important;
    background:
        linear-gradient(180deg,#f5f7ff 0%, #eef2ff 100%) !important;
    color:var(--wc-text) !important;
    font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
    padding-bottom:18px !important;
    overflow-x:hidden !important;
}

a{
    color:inherit;
    text-decoration:none;
}

.wrap{
    width:min(100%, 760px) !important;
    margin:0 auto !important;
    padding:12px 12px 20px !important;
    position:relative;
    z-index:2;
}

/* ---------- HEADER / TABS ARRIBA ---------- */
.top{
    position:sticky !important;
    top:0 !important;
    z-index:90 !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    align-items:stretch !important;
    padding:10px 12px 10px !important;
    min-height:auto !important;
    background:#ffffff !important;
    border-bottom:1px solid var(--wc-line) !important;
    box-shadow:0 4px 18px rgba(35,52,162,.08) !important;
}

.top::after{
    content:"" !important;
    display:block !important;
    width:100% !important;
    height:4px !important;
    border-radius:999px !important;
    background:linear-gradient(90deg,
        var(--wc-cyan) 0%,
        var(--wc-pink) 20%,
        var(--wc-purple) 40%,
        var(--wc-blue) 60%,
        var(--wc-lime) 80%,
        var(--wc-orange) 100%) !important;
}

.brand{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    min-height:42px !important;
    white-space:nowrap !important;
    font-size:17px !important;
    line-height:1.1 !important;
    font-weight:1000 !important;
    letter-spacing:-.03em !important;
    color:var(--wc-dark) !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}

.brand::before{
    content:"🏆" !important;
    display:grid !important;
    place-items:center !important;
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    border-radius:12px !important;
    background:linear-gradient(135deg,var(--wc-orange),var(--wc-lime)) !important;
    color:#111 !important;
    font-size:19px !important;
    box-shadow:var(--wc-shadow) !important;
}

nav{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    gap:8px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    padding:0 1px 2px !important;
    scrollbar-width:none !important;
    -webkit-overflow-scrolling:touch !important;
}

nav::-webkit-scrollbar{
    display:none !important;
}

nav a,
nav .btn{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    white-space:nowrap !important;
    min-height:38px !important;
    padding:9px 13px !important;
    border-radius:999px !important;
    font-size:12px !important;
    font-weight:900 !important;
    line-height:1 !important;
    border:1px solid var(--wc-line) !important;
    background:#fff !important;
    color:var(--wc-dark) !important;
    box-shadow:none !important;
    flex:0 0 auto !important;
}

nav a:hover,
nav .btn:hover{
    background:var(--wc-dark) !important;
    color:#fff !important;
    border-color:var(--wc-dark) !important;
}

nav .btn{
    background:linear-gradient(135deg,var(--wc-cyan),var(--wc-blue)) !important;
    color:#fff !important;
    border-color:transparent !important;
}

/* ---------- HERO LIGERO / APP ---------- */
.hero,
.stadium-hero{
    display:block !important;
    min-height:auto !important;
    padding:18px 16px !important;
    border-radius:22px !important;
    border:1px solid var(--wc-line) !important;
    background:
        linear-gradient(135deg, rgba(62,87,245,.10) 0%, rgba(58,217,210,.12) 50%, rgba(255,78,143,.10) 100%),
        #ffffff !important;
    box-shadow:var(--wc-shadow) !important;
    overflow:hidden !important;
    position:relative !important;
}

.hero .eyebrow{
    display:inline-flex !important;
    align-items:center !important;
    gap:6px !important;
    margin-bottom:10px !important;
    padding:6px 9px !important;
    border-radius:999px !important;
    background:#edf2ff !important;
    color:var(--wc-blue) !important;
    border:1px solid var(--wc-line) !important;
    font-size:10px !important;
    font-weight:1000 !important;
    text-transform:uppercase !important;
    letter-spacing:.06em !important;
}

.hero h1{
    margin:0 0 8px !important;
    font-size:32px !important;
    line-height:.95 !important;
    letter-spacing:-.05em !important;
    color:var(--wc-dark) !important;
    max-width:95% !important;
}

.hero p{
    margin:0 !important;
    font-size:13px !important;
    line-height:1.35 !important;
    color:var(--wc-muted) !important;
    max-width:95% !important;
}

.actions{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
    margin-top:14px !important;
}

.btn,
button{
    min-height:40px !important;
    padding:10px 12px !important;
    border-radius:14px !important;
    font-size:12px !important;
    font-weight:1000 !important;
    border:1px solid transparent !important;
    cursor:pointer !important;
}

.btn,
button{
    background:linear-gradient(135deg,var(--wc-purple),var(--wc-blue)) !important;
    color:#fff !important;
}

.btn.ghost{
    background:#fff !important;
    color:var(--wc-dark) !important;
    border-color:var(--wc-line) !important;
}

.big{
    min-height:40px !important;
    padding:10px 12px !important;
    font-size:12px !important;
}

/* ---------- REGLAS / WIDGETS COMPACTOS ---------- */
.quick-rules{
    display:grid !important;
    grid-template-columns:repeat(2,1fr) !important;
    gap:8px !important;
    margin-top:10px !important;
}

.rule-card{
    position:relative !important;
    display:grid !important;
    grid-template-columns:30px 1fr !important;
    gap:8px !important;
    min-height:76px !important;
    padding:11px !important;
    border-radius:16px !important;
    border:1px solid var(--wc-line) !important;
    background:#fff !important;
    box-shadow:var(--wc-shadow) !important;
}

.rule-card::before{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    top:0 !important;
    bottom:0 !important;
    width:5px !important;
    border-radius:16px 0 0 16px !important;
    background:linear-gradient(180deg,var(--wc-cyan),var(--wc-purple),var(--wc-pink)) !important;
}

.rule-icon{
    width:30px !important;
    height:30px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:10px !important;
    background:#f5f7ff !important;
    font-size:16px !important;
}

.rule-card strong{
    display:block !important;
    font-size:17px !important;
    line-height:1 !important;
    color:var(--wc-dark) !important;
}

.rule-card span{
    display:block !important;
    font-size:10.5px !important;
    line-height:1.15 !important;
    color:var(--wc-muted) !important;
}

/* ---------- CARDS / TILES ---------- */
.card,
.tile{
    position:relative !important;
    overflow:hidden !important;
    padding:12px !important;
    border-radius:16px !important;
    border:1px solid var(--wc-line) !important;
    background:#fff !important;
    box-shadow:var(--wc-shadow) !important;
    margin-bottom:10px !important;
}

.card::before,
.tile::before{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    top:0 !important;
    width:100% !important;
    height:4px !important;
    background:linear-gradient(90deg,
        var(--wc-cyan),
        var(--wc-purple),
        var(--wc-pink),
        var(--wc-orange),
        var(--wc-lime)) !important;
}

.grid,
.cards{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    margin-top:10px !important;
}

.tile{
    min-height:82px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    gap:4px !important;
}

.tile strong{
    font-size:21px !important;
    line-height:1 !important;
    color:var(--wc-dark) !important;
}

.tile span{
    font-size:12px !important;
    line-height:1.2 !important;
    color:var(--wc-muted) !important;
}

/* ---------- TEXTO ---------- */
h1{
    margin:0 0 10px !important;
    font-size:26px !important;
    line-height:1 !important;
    letter-spacing:-.04em !important;
    color:var(--wc-dark) !important;
}

h2{
    margin:0 0 8px !important;
    font-size:18px !important;
    line-height:1.1 !important;
    color:var(--wc-dark) !important;
}

h3{
    margin:6px 0 4px !important;
    font-size:16px !important;
    line-height:1.15 !important;
    color:var(--wc-dark) !important;
}

p{
    font-size:13px !important;
    line-height:1.35 !important;
}

.muted{
    color:var(--wc-muted) !important;
    font-size:12px !important;
}

.badge{
    display:inline-flex !important;
    align-items:center !important;
    padding:5px 8px !important;
    border-radius:999px !important;
    background:#f5f7ff !important;
    border:1px solid var(--wc-line) !important;
    color:var(--wc-blue) !important;
    font-size:10px !important;
    font-weight:1000 !important;
    text-transform:uppercase !important;
    letter-spacing:.04em !important;
}

/* ---------- FORMULARIOS ---------- */
form label{
    display:flex !important;
    flex-direction:column !important;
    gap:5px !important;
    margin-bottom:10px !important;
    font-size:12px !important;
    font-weight:800 !important;
    color:var(--wc-dark) !important;
}

input,
select,
textarea{
    width:100% !important;
    min-height:40px !important;
    padding:10px 11px !important;
    border-radius:13px !important;
    border:1px solid var(--wc-line) !important;
    background:#fff !important;
    color:var(--wc-text) !important;
    outline:none !important;
    font-size:14px !important;
    box-shadow:none !important;
}

input:focus,
select:focus,
textarea:focus{
    border-color:var(--wc-blue) !important;
    box-shadow:0 0 0 3px rgba(62,87,245,.10) !important;
}

.formgrid,
.inline{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
}

.inline input,
.inline select{
    width:100% !important;
    min-width:0 !important;
}

/* ---------- SCORE / PARTIDOS ---------- */
.match{
    padding:14px 12px 12px !important;
}

.match::after{
    content:"🏆" !important;
    position:absolute !important;
    right:10px !important;
    top:10px !important;
    font-size:20px !important;
    opacity:.80 !important;
}

.score{
    display:grid !important;
    grid-template-columns:58px 16px 58px !important;
    align-items:center !important;
    gap:6px !important;
    margin-top:6px !important;
}

.score input{
    width:58px !important;
    min-height:44px !important;
    text-align:center !important;
    font-size:20px !important;
    font-weight:1000 !important;
    border-radius:14px !important;
    padding:6px !important;
    background:#fff !important;
}

.score span{
    text-align:center !important;
    font-size:18px !important;
    font-weight:1000 !important;
    color:var(--wc-purple) !important;
}

.score button{
    grid-column:1 / -1 !important;
    width:100% !important;
    margin-top:2px !important;
}

.locked{
    opacity:.78 !important;
}

.lockedtxt{
    display:inline-flex !important;
    padding:6px 8px !important;
    border-radius:999px !important;
    background:#fff0f5 !important;
    border:1px solid #ffd1e3 !important;
    color:#d63384 !important;
    font-size:11px !important;
    font-weight:900 !important;
}

/* ---------- FLASH / MINI BUTTONS ---------- */
.flash{
    padding:10px 11px !important;
    margin-bottom:10px !important;
    border-radius:14px !important;
    background:#eef6ff !important;
    border:1px solid #cfe0ff !important;
    color:var(--wc-blue) !important;
    font-size:12px !important;
    font-weight:900 !important;
}

.mini{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:30px !important;
    padding:6px 9px !important;
    border-radius:12px !important;
    border:1px solid var(--wc-line) !important;
    background:#fff !important;
    color:var(--wc-dark) !important;
    font-size:10.5px !important;
    font-weight:900 !important;
    margin:2px !important;
}

.mini.danger,
.danger,
.dangerbtn{
    background:#ffeff1 !important;
    border-color:#ffc7ce !important;
    color:#cc2438 !important;
}

/* ---------- TABLAS MÓVIL ---------- */
table{
    width:100% !important;
    border-collapse:separate !important;
    border-spacing:0 8px !important;
    margin-top:8px !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
}

thead,
tbody,
tr,
th,
td{
    display:block !important;
}

th{
    display:none !important;
}

tr{
    margin-bottom:8px !important;
    border-radius:16px !important;
    overflow:hidden !important;
    background:#fff !important;
    border:1px solid var(--wc-line) !important;
    box-shadow:var(--wc-shadow) !important;
}

td{
    display:flex !important;
    justify-content:space-between !important;
    gap:8px !important;
    padding:8px 10px !important;
    border-bottom:1px solid #eef2ff !important;
    font-size:12px !important;
    line-height:1.25 !important;
    color:var(--wc-text) !important;
}

td:last-child{
    border-bottom:0 !important;
}

td::before{
    content:"" !important;
    min-width:70px !important;
    color:var(--wc-muted) !important;
    font-size:10px !important;
    font-weight:800 !important;
}

td:nth-child(1)::before{content:"#";}
td:nth-child(2)::before{content:"Dato";}
td:nth-child(3)::before{content:"Info";}
td:nth-child(4)::before{content:"Puntos";}
td:nth-child(5)::before{content:"Extra";}
td:nth-child(6)::before{content:"Aciertos";}
td:nth-child(7)::before{content:"Exactos";}
td:nth-child(8)::before{content:"Dif.";}
td:nth-child(9)::before{content:"Acciones";}

/* ---------- FOOTER ---------- */
.footer{
    padding:16px 10px 16px !important;
    text-align:center !important;
    color:var(--wc-muted) !important;
    font-size:11px !important;
    background:transparent !important;
    border-top:0 !important;
}

/* ---------- DESKTOP / TABLET ---------- */
@media(min-width:761px){

    body{
        padding-bottom:18px !important;
    }

    .wrap{
        width:min(1180px,94vw) !important;
        padding:18px 0 26px !important;
    }

    .top{
        grid-template-columns:auto 1fr !important;
        align-items:center !important;
        gap:14px !important;
    }

    .top::after{
        grid-column:1 / -1 !important;
    }

    .brand{
        min-width:max-content !important;
        margin-right:8px !important;
    }

    nav{
        justify-content:flex-end !important;
        overflow:visible !important;
        flex-wrap:wrap !important;
    }

    .hero,
    .stadium-hero{
        padding:28px 24px !important;
    }

    .hero h1{
        font-size:52px !important;
    }

    .hero p{
        font-size:16px !important;
        max-width:700px !important;
    }

    .actions{
        display:flex !important;
        flex-wrap:wrap !important;
    }

    .quick-rules{
        grid-template-columns:repeat(4,1fr) !important;
    }

    .grid{
        grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) !important;
    }

    .cards{
        grid-template-columns:repeat(auto-fit,minmax(300px,1fr)) !important;
    }

    .formgrid{
        grid-template-columns:repeat(auto-fit,minmax(205px,1fr)) !important;
    }

    .inline{
        display:flex !important;
        flex-wrap:wrap !important;
        align-items:end !important;
    }

    .inline input,
    .inline select{
        width:auto !important;
        min-width:190px !important;
    }

    table{
        border-spacing:0 !important;
        border-radius:18px !important;
        overflow:hidden !important;
        border:1px solid var(--wc-line) !important;
        background:#fff !important;
        box-shadow:var(--wc-shadow) !important;
    }

    thead{
        display:table-header-group !important;
    }

    tbody{
        display:table-row-group !important;
    }

    tr{
        display:table-row !important;
        margin:0 !important;
        background:transparent !important;
        border:0 !important;
        box-shadow:none !important;
    }

    th,
    td{
        display:table-cell !important;
        padding:13px 12px !important;
        border-bottom:1px solid #eef2ff !important;
    }

    th{
        background:#f5f7ff !important;
        color:var(--wc-dark) !important;
        font-size:12px !important;
        text-transform:uppercase !important;
        letter-spacing:.06em !important;
    }

    td::before{
        content:none !important;
    }

    .score{
        display:flex !important;
        align-items:center !important;
        gap:8px !important;
    }

    .score button{
        width:auto !important;
        margin-top:0 !important;
    }
}

/* ---------- CELULARES MUY PEQUEÑOS ---------- */
@media(max-width:390px){

    .wrap{
        padding-left:8px !important;
        padding-right:8px !important;
    }

    .brand{
        font-size:15px !important;
    }

    .brand::before{
        width:34px !important;
        height:34px !important;
        min-width:34px !important;
    }

    .hero h1{
        font-size:28px !important;
    }

    .hero p{
        font-size:12px !important;
    }

    .actions{
        grid-template-columns:1fr !important;
    }

    .quick-rules{
        grid-template-columns:1fr 1fr !important;
    }

    nav a,
    nav .btn{
        min-height:36px !important;
        padding:8px 11px !important;
        font-size:11px !important;
    }
}

/* =========================================================
   TEMA FINAL APP COPA MUNDIAL 2026
   Colores lisos, tabs arriba visibles, popup cuenta
========================================================= */

/* limpiar fondos y pseudo-elementos viejos */
body::before,
body::after,
.hero::before,
.hero::after,
.stadium-hero::before,
.stadium-hero::after,
.scoreboard,
.tournament-card{
    content:none !important;
    display:none !important;
}

/* mostrar todos los tabs */
nav a:nth-child(n+5){
    display:inline-flex !important;
}

/* quitar menú inferior viejo */
nav{
    position:static !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    box-shadow:none !important;
}

/* paleta lisa mundial 2026 / sedes */
:root{
    --wc-blue:#3348f5;
    --wc-deep:#172166;
    --wc-cyan:#23d4cc;
    --wc-mint:#bff6df;
    --wc-lime:#b7f500;
    --wc-purple:#8a5cff;
    --wc-pink:#ef3f8f;
    --wc-red:#ff4055;
    --wc-orange:#ff8b1f;
    --wc-yellow:#efff3d;
    --wc-bg:#f3f6ff;
    --wc-card:#ffffff;
    --wc-text:#111833;
    --wc-muted:#69708d;
    --wc-line:#dce2f7;
    --wc-shadow:0 10px 26px rgba(23,33,102,.10);
}

/* base */
body{
    margin:0 !important;
    background:
        linear-gradient(135deg, rgba(35,212,204,.16), transparent 34%),
        linear-gradient(225deg, rgba(239,63,143,.13), transparent 32%),
        #f3f6ff !important;
    color:var(--wc-text) !important;
    padding-bottom:14px !important;
    overflow-x:hidden !important;
    font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}

.wrap{
    width:min(100%,760px) !important;
    margin:0 auto !important;
    padding:12px 12px 20px !important;
}

/* header app */
.top{
    position:sticky !important;
    top:0 !important;
    z-index:100 !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    padding:10px 12px !important;
    background:#fff !important;
    border-bottom:1px solid var(--wc-line) !important;
    box-shadow:0 5px 20px rgba(23,33,102,.08) !important;
    min-height:auto !important;
}

.top::after{
    content:"" !important;
    display:block !important;
    height:5px !important;
    width:100% !important;
    border-radius:999px !important;
    background:linear-gradient(
        90deg,
        var(--wc-cyan),
        var(--wc-purple),
        var(--wc-pink),
        var(--wc-orange),
        var(--wc-lime),
        var(--wc-blue)
    ) !important;
}

.brand{
    display:flex !important;
    align-items:center !important;
    gap:9px !important;
    min-height:38px !important;
    font-size:16px !important;
    font-weight:1000 !important;
    letter-spacing:-.035em !important;
    color:var(--wc-deep) !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}

.brand::before{
    content:"🏆" !important;
    display:grid !important;
    place-items:center !important;
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    border-radius:12px !important;
    background:linear-gradient(135deg,var(--wc-yellow),var(--wc-orange)) !important;
    color:#111 !important;
    font-size:18px !important;
    box-shadow:var(--wc-shadow) !important;
}

/* tabs arriba */
nav{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    gap:7px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    padding:0 1px 1px !important;
    scrollbar-width:none !important;
    -webkit-overflow-scrolling:touch !important;
}

nav::-webkit-scrollbar{
    display:none !important;
}

nav a,
nav .btn,
.account-pill{
    flex:0 0 auto !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    white-space:nowrap !important;
    min-height:37px !important;
    padding:9px 12px !important;
    border-radius:999px !important;
    border:1px solid var(--wc-line) !important;
    background:#fff !important;
    color:var(--wc-deep) !important;
    box-shadow:none !important;
    font-size:12px !important;
    line-height:1 !important;
    font-weight:900 !important;
}

nav a:hover,
.account-pill:hover{
    background:var(--wc-deep) !important;
    color:#fff !important;
    border-color:var(--wc-deep) !important;
}

.account-pill{
    background:linear-gradient(135deg,var(--wc-purple),var(--wc-blue)) !important;
    color:#fff !important;
    border-color:transparent !important;
}

/* hero copa */
.hero,
.stadium-hero{
    display:block !important;
    min-height:auto !important;
    position:relative !important;
    overflow:hidden !important;
    padding:18px 16px !important;
    border-radius:22px !important;
    border:1px solid var(--wc-line) !important;
    background:
        radial-gradient(circle at 88% 18%, rgba(183,245,0,.42), transparent 18%),
        linear-gradient(135deg, rgba(35,212,204,.26), rgba(138,92,255,.18), rgba(239,63,143,.16)),
        #ffffff !important;
    box-shadow:var(--wc-shadow) !important;
}

.hero-content::before{
    content:"🏆" !important;
    display:grid !important;
    place-items:center !important;
    width:52px !important;
    height:52px !important;
    border-radius:18px !important;
    margin-bottom:10px !important;
    background:linear-gradient(135deg,var(--wc-yellow),var(--wc-orange)) !important;
    box-shadow:var(--wc-shadow) !important;
    font-size:28px !important;
}

.eyebrow{
    display:inline-flex !important;
    align-items:center !important;
    padding:6px 9px !important;
    margin-bottom:9px !important;
    border-radius:999px !important;
    background:#eef2ff !important;
    border:1px solid var(--wc-line) !important;
    color:var(--wc-blue) !important;
    font-size:10px !important;
    font-weight:1000 !important;
    text-transform:uppercase !important;
    letter-spacing:.055em !important;
}

.hero h1{
    margin:0 0 8px !important;
    font-size:31px !important;
    line-height:.95 !important;
    letter-spacing:-.055em !important;
    color:var(--wc-deep) !important;
    max-width:95% !important;
}

.hero p{
    margin:0 !important;
    font-size:13px !important;
    line-height:1.35 !important;
    color:var(--wc-muted) !important;
    max-width:95% !important;
}

/* acciones */
.actions{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
    margin-top:14px !important;
}

.btn,
button,
.big{
    min-height:40px !important;
    padding:10px 12px !important;
    border-radius:14px !important;
    font-size:12px !important;
    font-weight:1000 !important;
    border:1px solid transparent !important;
    cursor:pointer !important;
    background:linear-gradient(135deg,var(--wc-purple),var(--wc-blue)) !important;
    color:#fff !important;
    box-shadow:none !important;
}

.btn.ghost{
    background:#fff !important;
    color:var(--wc-deep) !important;
    border-color:var(--wc-line) !important;
}

/* widgets compactos */
.quick-rules{
    display:grid !important;
    grid-template-columns:repeat(2,1fr) !important;
    gap:8px !important;
    margin-top:10px !important;
}

.rule-card{
    position:relative !important;
    display:grid !important;
    grid-template-columns:30px 1fr !important;
    gap:8px !important;
    min-height:74px !important;
    padding:11px !important;
    border-radius:16px !important;
    border:1px solid var(--wc-line) !important;
    background:#fff !important;
    box-shadow:var(--wc-shadow) !important;
}

.rule-card::before{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    top:0 !important;
    bottom:0 !important;
    width:5px !important;
    border-radius:16px 0 0 16px !important;
    background:linear-gradient(180deg,var(--wc-cyan),var(--wc-purple),var(--wc-pink)) !important;
}

.rule-icon{
    width:30px !important;
    height:30px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:10px !important;
    background:#f3f6ff !important;
    font-size:16px !important;
}

.rule-card strong{
    font-size:17px !important;
    color:var(--wc-deep) !important;
    line-height:1 !important;
}

.rule-card span{
    font-size:10.5px !important;
    line-height:1.15 !important;
    color:var(--wc-muted) !important;
}

/* cards */
.card,
.tile{
    position:relative !important;
    overflow:hidden !important;
    padding:12px !important;
    border-radius:16px !important;
    border:1px solid var(--wc-line) !important;
    background:#fff !important;
    box-shadow:var(--wc-shadow) !important;
    margin-bottom:10px !important;
    color:var(--wc-text) !important;
}

.card::before,
.tile::before{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    top:0 !important;
    height:4px !important;
    width:100% !important;
    background:linear-gradient(90deg,var(--wc-cyan),var(--wc-purple),var(--wc-pink),var(--wc-orange),var(--wc-lime)) !important;
}

.grid,
.cards{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    margin-top:10px !important;
}

.tile{
    min-height:82px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    gap:4px !important;
}

.tile strong{
    font-size:21px !important;
    color:var(--wc-deep) !important;
}

.tile span{
    font-size:12px !important;
    color:var(--wc-muted) !important;
}

/* textos */
h1{
    margin:0 0 10px !important;
    font-size:26px !important;
    line-height:1 !important;
    letter-spacing:-.04em !important;
    color:var(--wc-deep) !important;
}

h2{
    margin:0 0 8px !important;
    font-size:18px !important;
    color:var(--wc-deep) !important;
}

h3{
    margin:6px 0 4px !important;
    font-size:16px !important;
    color:var(--wc-deep) !important;
}

p{
    font-size:13px !important;
    line-height:1.35 !important;
}

.muted{
    color:var(--wc-muted) !important;
    font-size:12px !important;
}

.badge{
    display:inline-flex !important;
    align-items:center !important;
    padding:5px 8px !important;
    border-radius:999px !important;
    background:#eef2ff !important;
    border:1px solid var(--wc-line) !important;
    color:var(--wc-blue) !important;
    font-size:10px !important;
    font-weight:1000 !important;
    text-transform:uppercase !important;
}

/* partidos */
.match{
    padding:14px 12px 12px !important;
}

.match::after{
    content:"🏆" !important;
    position:absolute !important;
    right:10px !important;
    top:10px !important;
    font-size:20px !important;
    opacity:.9 !important;
}

.score{
    display:grid !important;
    grid-template-columns:58px 16px 58px !important;
    align-items:center !important;
    gap:6px !important;
    margin-top:6px !important;
}

.score input{
    width:58px !important;
    min-height:44px !important;
    text-align:center !important;
    font-size:20px !important;
    font-weight:1000 !important;
    border-radius:14px !important;
    padding:6px !important;
    background:#fff !important;
}

.score span{
    text-align:center !important;
    font-size:18px !important;
    font-weight:1000 !important;
    color:var(--wc-purple) !important;
}

.score button{
    grid-column:1/-1 !important;
    width:100% !important;
}

/* formularios */
form label{
    display:flex !important;
    flex-direction:column !important;
    gap:5px !important;
    margin-bottom:10px !important;
    font-size:12px !important;
    font-weight:800 !important;
    color:var(--wc-deep) !important;
}

input,
select,
textarea{
    width:100% !important;
    min-height:40px !important;
    padding:10px 11px !important;
    border-radius:13px !important;
    border:1px solid var(--wc-line) !important;
    background:#fff !important;
    color:var(--wc-text) !important;
    outline:none !important;
    font-size:14px !important;
}

input:focus,
select:focus,
textarea:focus{
    border-color:var(--wc-blue) !important;
    box-shadow:0 0 0 3px rgba(51,72,245,.10) !important;
}

.inline,
.formgrid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
}

.inline input,
.inline select{
    width:100% !important;
    min-width:0 !important;
}

/* tablas móvil */
table{
    width:100% !important;
    border-collapse:separate !important;
    border-spacing:0 8px !important;
    margin-top:8px !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
}

thead,
tbody,
tr,
th,
td{
    display:block !important;
}

th{
    display:none !important;
}

tr{
    margin-bottom:8px !important;
    border-radius:16px !important;
    overflow:hidden !important;
    background:#fff !important;
    border:1px solid var(--wc-line) !important;
    box-shadow:var(--wc-shadow) !important;
}

td{
    display:flex !important;
    justify-content:space-between !important;
    gap:8px !important;
    padding:8px 10px !important;
    border-bottom:1px solid #edf1ff !important;
    font-size:12px !important;
    line-height:1.25 !important;
    color:var(--wc-text) !important;
}

td:last-child{
    border-bottom:0 !important;
}

td::before{
    content:"" !important;
    min-width:70px !important;
    color:var(--wc-muted) !important;
    font-size:10px !important;
    font-weight:800 !important;
}

td:nth-child(1)::before{content:"#";}
td:nth-child(2)::before{content:"Dato";}
td:nth-child(3)::before{content:"Info";}
td:nth-child(4)::before{content:"Puntos";}
td:nth-child(5)::before{content:"Extra";}
td:nth-child(6)::before{content:"Aciertos";}
td:nth-child(7)::before{content:"Exactos";}
td:nth-child(8)::before{content:"Dif.";}
td:nth-child(9)::before{content:"Acciones";}

/* popup cuenta */
.access-modal{
    position:fixed !important;
    inset:0 !important;
    z-index:999 !important;
    display:none !important;
    align-items:center !important;
    justify-content:center !important;
    padding:18px !important;
}

.access-modal:target{
    display:flex !important;
}

.access-bg{
    position:absolute !important;
    inset:0 !important;
    background:rgba(17,24,51,.58) !important;
    backdrop-filter:blur(8px) !important;
}

.access-box{
    position:relative !important;
    z-index:2 !important;
    width:min(390px,94vw) !important;
    border-radius:24px !important;
    padding:22px !important;
    background:
        linear-gradient(135deg,rgba(35,212,204,.20),rgba(239,63,143,.16)),
        #fff !important;
    box-shadow:0 30px 90px rgba(17,24,51,.28) !important;
    border:1px solid var(--wc-line) !important;
    text-align:center !important;
}

.access-close{
    position:absolute !important;
    top:10px !important;
    right:12px !important;
    width:34px !important;
    height:34px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:999px !important;
    background:#fff !important;
    color:var(--wc-deep) !important;
    border:1px solid var(--wc-line) !important;
    font-size:22px !important;
    font-weight:900 !important;
}

.access-cup{
    width:68px !important;
    height:68px !important;
    display:grid !important;
    place-items:center !important;
    margin:0 auto 12px !important;
    border-radius:22px !important;
    background:linear-gradient(135deg,var(--wc-yellow),var(--wc-orange)) !important;
    box-shadow:var(--wc-shadow) !important;
    font-size:36px !important;
}

.access-box h2{
    margin:0 0 8px !important;
    font-size:24px !important;
    color:var(--wc-deep) !important;
}

.access-box p{
    margin:0 0 16px !important;
    color:var(--wc-muted) !important;
    font-size:13px !important;
}

.access-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:9px !important;
}

.access-main,
.access-secondary{
    min-height:46px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:16px !important;
    font-weight:1000 !important;
    font-size:14px !important;
}

.access-main{
    color:#fff !important;
    background:linear-gradient(135deg,var(--wc-purple),var(--wc-blue)) !important;
}

.access-secondary{
    color:var(--wc-deep) !important;
    background:#fff !important;
    border:1px solid var(--wc-line) !important;
}

/* mini y alertas */
.flash{
    padding:10px 11px !important;
    margin-bottom:10px !important;
    border-radius:14px !important;
    background:#eef6ff !important;
    border:1px solid #cfe0ff !important;
    color:var(--wc-blue) !important;
    font-size:12px !important;
    font-weight:900 !important;
}

.mini{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:30px !important;
    padding:6px 9px !important;
    border-radius:12px !important;
    border:1px solid var(--wc-line) !important;
    background:#fff !important;
    color:var(--wc-deep) !important;
    font-size:10.5px !important;
    font-weight:900 !important;
    margin:2px !important;
}

.mini.danger,
.danger,
.dangerbtn{
    background:#ffeff1 !important;
    border-color:#ffc7ce !important;
    color:#cc2438 !important;
}

.footer{
    padding:16px 10px !important;
    text-align:center !important;
    color:var(--wc-muted) !important;
    font-size:11px !important;
    background:transparent !important;
    border-top:0 !important;
}

/* desktop */
@media(min-width:761px){
    .wrap{
        width:min(1180px,94vw) !important;
        padding:18px 0 28px !important;
    }

    .top{
        grid-template-columns:auto 1fr !important;
        align-items:center !important;
        gap:14px !important;
    }

    .top::after{
        grid-column:1/-1 !important;
    }

    nav{
        justify-content:flex-end !important;
        overflow:visible !important;
        flex-wrap:wrap !important;
    }

    .hero{
        padding:30px 26px !important;
    }

    .hero h1{
        font-size:52px !important;
    }

    .hero p{
        font-size:16px !important;
    }

    .actions{
        display:flex !important;
    }

    .quick-rules{
        grid-template-columns:repeat(4,1fr) !important;
    }

    .grid{
        grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) !important;
    }

    .cards{
        grid-template-columns:repeat(auto-fit,minmax(300px,1fr)) !important;
    }

    .formgrid{
        grid-template-columns:repeat(auto-fit,minmax(205px,1fr)) !important;
    }

    .inline{
        display:flex !important;
        flex-wrap:wrap !important;
        align-items:end !important;
    }

    .inline input,
    .inline select{
        width:auto !important;
        min-width:190px !important;
    }

    table{
        border-spacing:0 !important;
        border-radius:18px !important;
        overflow:hidden !important;
        border:1px solid var(--wc-line) !important;
        background:#fff !important;
        box-shadow:var(--wc-shadow) !important;
    }

    thead{
        display:table-header-group !important;
    }

    tbody{
        display:table-row-group !important;
    }

    tr{
        display:table-row !important;
        margin:0 !important;
        background:transparent !important;
        border:0 !important;
        box-shadow:none !important;
    }

    th,
    td{
        display:table-cell !important;
        padding:13px 12px !important;
        border-bottom:1px solid #edf1ff !important;
    }

    th{
        display:table-cell !important;
        background:#f3f6ff !important;
        color:var(--wc-deep) !important;
        font-size:12px !important;
        text-transform:uppercase !important;
        letter-spacing:.06em !important;
    }

    td::before{
        content:none !important;
    }

    .score{
        display:flex !important;
        align-items:center !important;
        gap:8px !important;
    }

    .score button{
        width:auto !important;
        margin-top:0 !important;
    }
}

/* celulares pequeños */
@media(max-width:390px){
    .wrap{
        padding-left:8px !important;
        padding-right:8px !important;
    }

    .brand{
        font-size:15px !important;
    }

    .brand::before{
        width:34px !important;
        height:34px !important;
        min-width:34px !important;
    }

    .hero h1{
        font-size:28px !important;
    }

    .actions{
        grid-template-columns:1fr !important;
    }

    nav a,
    nav .btn,
    .account-pill{
        min-height:36px !important;
        padding:8px 10px !important;
        font-size:11px !important;
    }
}

/* =========================================================
   HEADER APP MÓVIL FINAL
   Perfil + hamburguesa, sin tabs rotos arriba
========================================================= */

:root{
    --wc-blue:#3348f5;
    --wc-deep:#172166;
    --wc-cyan:#23d4cc;
    --wc-lime:#b7f500;
    --wc-purple:#8a5cff;
    --wc-pink:#ef3f8f;
    --wc-orange:#ff8b1f;
    --wc-yellow:#efff3d;
    --wc-bg:#f3f6ff;
    --wc-card:#ffffff;
    --wc-text:#111833;
    --wc-muted:#69708d;
    --wc-line:#dce2f7;
    --wc-shadow:0 10px 26px rgba(23,33,102,.10);
}

/* limpiar navegación vieja */
nav a:nth-child(n+5){
    display:flex !important;
}

body{
    background:#f3f6ff !important;
    color:var(--wc-text) !important;
    padding-bottom:14px !important;
}

/* HEADER LIMPIO */
.top.app-header{
    position:sticky !important;
    top:0 !important;
    z-index:200 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
    min-height:58px !important;
    padding:9px 12px !important;
    background:#fff !important;
    border-bottom:1px solid var(--wc-line) !important;
    box-shadow:0 5px 20px rgba(23,33,102,.08) !important;
}

.top.app-header::after{
    content:"" !important;
    position:absolute !important;
    left:12px !important;
    right:12px !important;
    bottom:-1px !important;
    height:4px !important;
    border-radius:999px !important;
    background:linear-gradient(90deg,var(--wc-cyan),var(--wc-purple),var(--wc-pink),var(--wc-orange),var(--wc-lime),var(--wc-blue)) !important;
}

/* LOGO */
.app-brand,
.brand.app-brand{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    min-width:0 !important;
    max-width:calc(100vw - 120px) !important;
    font-size:15px !important;
    line-height:1 !important;
    font-weight:1000 !important;
    letter-spacing:-.035em !important;
    color:var(--wc-deep) !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
}

.brand.app-brand::before{
    content:"🏆" !important;
    display:grid !important;
    place-items:center !important;
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    border-radius:12px !important;
    background:linear-gradient(135deg,var(--wc-yellow),var(--wc-orange)) !important;
    box-shadow:var(--wc-shadow) !important;
    font-size:17px !important;
}

/* BOTONES DERECHA */
.mobile-head-actions{
    display:flex !important;
    align-items:center !important;
    gap:7px !important;
    flex:0 0 auto !important;
}

.profile-icon,
.hamburger-icon{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:14px !important;
    border:1px solid var(--wc-line) !important;
    text-decoration:none !important;
    font-size:20px !important;
    font-weight:1000 !important;
    box-shadow:none !important;
}

.profile-icon{
    background:linear-gradient(135deg,var(--wc-purple),var(--wc-blue)) !important;
    color:#fff !important;
}

.hamburger-icon{
    background:#fff !important;
    color:var(--wc-deep) !important;
}

/* MENÚ DESPLEGABLE */
.app-menu{
    position:fixed !important;
    inset:0 !important;
    z-index:300 !important;
    display:none !important;
    flex-direction:column !important;
    gap:9px !important;
    padding:18px !important;
    background:
        linear-gradient(135deg,rgba(35,212,204,.18),rgba(239,63,143,.14)),
        #f3f6ff !important;
    overflow:auto !important;
    box-shadow:none !important;
}

.app-menu:target{
    display:flex !important;
}

.menu-close{
    position:absolute !important;
    top:14px !important;
    right:14px !important;
    width:42px !important;
    height:42px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:14px !important;
    background:#fff !important;
    border:1px solid var(--wc-line) !important;
    color:var(--wc-deep) !important;
    font-size:26px !important;
    font-weight:1000 !important;
}

.menu-title{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    margin:44px 0 10px !important;
    padding:16px !important;
    border-radius:20px !important;
    background:#fff !important;
    border:1px solid var(--wc-line) !important;
    box-shadow:var(--wc-shadow) !important;
    color:var(--wc-deep) !important;
}

.menu-title span{
    width:46px !important;
    height:46px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:16px !important;
    background:linear-gradient(135deg,var(--wc-yellow),var(--wc-orange)) !important;
    font-size:25px !important;
}

.menu-title strong{
    font-size:20px !important;
    line-height:1 !important;
}

.app-menu a:not(.menu-close){
    min-height:48px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    padding:13px 15px !important;
    border-radius:16px !important;
    background:#fff !important;
    border:1px solid var(--wc-line) !important;
    color:var(--wc-deep) !important;
    font-size:15px !important;
    font-weight:950 !important;
    text-decoration:none !important;
    box-shadow:var(--wc-shadow) !important;
}

.app-menu a:not(.menu-close)::after{
    content:"›" !important;
    font-size:24px !important;
    color:var(--wc-purple) !important;
}

.app-menu a:not(.menu-close):hover{
    background:var(--wc-deep) !important;
    color:#fff !important;
}

/* POPUP CUENTA */
.access-modal{
    position:fixed !important;
    inset:0 !important;
    z-index:400 !important;
    display:none !important;
    align-items:center !important;
    justify-content:center !important;
    padding:18px !important;
}

.access-modal:target{
    display:flex !important;
}

.access-bg{
    position:absolute !important;
    inset:0 !important;
    background:rgba(17,24,51,.58) !important;
    backdrop-filter:blur(8px) !important;
}

.access-box{
    position:relative !important;
    z-index:2 !important;
    width:min(390px,94vw) !important;
    border-radius:24px !important;
    padding:22px !important;
    background:
        linear-gradient(135deg,rgba(35,212,204,.20),rgba(239,63,143,.16)),
        #fff !important;
    box-shadow:0 30px 90px rgba(17,24,51,.28) !important;
    border:1px solid var(--wc-line) !important;
    text-align:center !important;
}

.access-close{
    position:absolute !important;
    top:10px !important;
    right:12px !important;
    width:34px !important;
    height:34px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:999px !important;
    background:#fff !important;
    color:var(--wc-deep) !important;
    border:1px solid var(--wc-line) !important;
    font-size:22px !important;
    font-weight:900 !important;
}

.access-cup{
    width:68px !important;
    height:68px !important;
    display:grid !important;
    place-items:center !important;
    margin:0 auto 12px !important;
    border-radius:22px !important;
    background:linear-gradient(135deg,var(--wc-yellow),var(--wc-orange)) !important;
    box-shadow:var(--wc-shadow) !important;
    font-size:36px !important;
}

.access-box h2{
    margin:0 0 8px !important;
    font-size:24px !important;
    color:var(--wc-deep) !important;
}

.access-box p{
    margin:0 0 16px !important;
    color:var(--wc-muted) !important;
    font-size:13px !important;
}

.access-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:9px !important;
}

.access-main,
.access-secondary{
    min-height:46px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:16px !important;
    font-weight:1000 !important;
    font-size:14px !important;
}

.access-main{
    color:#fff !important;
    background:linear-gradient(135deg,var(--wc-purple),var(--wc-blue)) !important;
}

.access-secondary{
    color:var(--wc-deep) !important;
    background:#fff !important;
    border:1px solid var(--wc-line) !important;
}

/* DESKTOP */
@media(min-width:761px){
    .top.app-header{
        min-height:66px !important;
        padding:12px 28px !important;
    }

    .app-brand,
    .brand.app-brand{
        max-width:none !important;
        font-size:19px !important;
    }

    .mobile-head-actions{
        order:3 !important;
    }

    .hamburger-icon{
        display:grid !important;
    }

    .profile-icon{
        display:grid !important;
    }

    .app-menu{
        width:360px !important;
        left:auto !important;
        right:0 !important;
        box-shadow:-20px 0 60px rgba(17,24,51,.18) !important;
    }
}

/* CELULARES MUY PEQUEÑOS */
@media(max-width:390px){
    .app-brand,
    .brand.app-brand{
        font-size:13px !important;
        max-width:calc(100vw - 112px) !important;
    }

    .profile-icon,
    .hamburger-icon{
        width:37px !important;
        height:37px !important;
        min-width:37px !important;
        border-radius:13px !important;
        font-size:18px !important;
    }
}

/* =========================================================
   HEADER FINAL QUINIELA BRUJOS
   Copa del Mundo FIFA 2026
   Colores planos Mundial 2026 + menú hamburguesa real
========================================================= */

/* Reset de headers/nav viejos */
.top,
.top.app-header,
.brujos-header{
    all:unset;
    box-sizing:border-box !important;
}

nav,
.app-menu,
.brujos-menu{
    all:unset;
    box-sizing:border-box !important;
}

/* Mostrar menú nuevo solo cuando se abre */
#menuBrujos{
    display:none !important;
}

#menuBrujos:target{
    display:block !important;
}

/* Paleta plana inspirada en Mundial 2026 / sedes */
:root{
    --br-blue:#3147f4;
    --br-deep:#101b66;
    --br-cyan:#24d4ce;
    --br-mint:#baf7da;
    --br-lime:#b9f400;
    --br-purple:#8b5cff;
    --br-pink:#ef3f8f;
    --br-coral:#ff5f5a;
    --br-orange:#ff8a1c;
    --br-yellow:#efff47;
    --br-bg:#f4f6ff;
    --br-card:#ffffff;
    --br-text:#111733;
    --br-muted:#69708a;
    --br-line:#dce2f7;
    --br-shadow:0 10px 28px rgba(16,27,102,.10);
}

/* Base clara y plana */
body{
    margin:0 !important;
    background:
        linear-gradient(135deg, rgba(36,212,206,.20), transparent 34%),
        linear-gradient(225deg, rgba(239,63,143,.14), transparent 32%),
        var(--br-bg) !important;
    color:var(--br-text) !important;
    font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
    overflow-x:hidden !important;
    padding-bottom:14px !important;
}

body::before,
body::after,
.hero::before,
.hero::after,
.stadium-hero::before,
.stadium-hero::after,
.scoreboard,
.tournament-card{
    display:none !important;
    content:none !important;
}

/* Header móvil / app */
.brujos-header{
    position:sticky !important;
    top:0 !important;
    z-index:300 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;
    width:100% !important;
    min-height:62px !important;
    padding:8px 10px 10px !important;
    background:#ffffff !important;
    border-bottom:1px solid var(--br-line) !important;
    box-shadow:0 6px 22px rgba(16,27,102,.08) !important;
}

.brujos-header::after{
    content:"" !important;
    position:absolute !important;
    left:10px !important;
    right:10px !important;
    bottom:0 !important;
    height:4px !important;
    border-radius:999px !important;
    background:linear-gradient(90deg,
        var(--br-cyan),
        var(--br-purple),
        var(--br-pink),
        var(--br-coral),
        var(--br-orange),
        var(--br-lime),
        var(--br-blue)
    ) !important;
}

/* Marca */
.brujos-brand{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    min-width:0 !important;
    max-width:calc(100vw - 112px) !important;
    color:var(--br-deep) !important;
    text-decoration:none !important;
}

.brujos-cup{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:13px !important;
    background:linear-gradient(135deg,var(--br-yellow),var(--br-orange)) !important;
    box-shadow:var(--br-shadow) !important;
    font-size:20px !important;
}

.brujos-title-wrap{
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    min-width:0 !important;
    line-height:1 !important;
}

.brujos-title-wrap strong{
    display:block !important;
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    font-size:16px !important;
    line-height:1 !important;
    font-weight:1000 !important;
    letter-spacing:-.035em !important;
    color:var(--br-deep) !important;
}

.brujos-title-wrap small{
    display:block !important;
    margin-top:3px !important;
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    font-size:8.5px !important;
    line-height:1 !important;
    font-weight:800 !important;
    letter-spacing:.08em !important;
    text-transform:uppercase !important;
    color:var(--br-muted) !important;
}

/* Acciones header */
.brujos-actions{
    display:flex !important;
    align-items:center !important;
    gap:7px !important;
    flex:0 0 auto !important;
}

.brujos-profile,
.brujos-menu-btn{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:14px !important;
    text-decoration:none !important;
    border:1px solid var(--br-line) !important;
    font-size:20px !important;
    font-weight:1000 !important;
}

.brujos-profile{
    background:linear-gradient(135deg,var(--br-purple),var(--br-blue)) !important;
    color:#fff !important;
}

.brujos-menu-btn{
    background:#fff !important;
    color:var(--br-deep) !important;
}

/* Menú hamburguesa */
.brujos-menu{
    position:fixed !important;
    inset:0 !important;
    z-index:500 !important;
}

.brujos-menu-bg{
    position:absolute !important;
    inset:0 !important;
    display:block !important;
    background:rgba(16,27,102,.42) !important;
    backdrop-filter:blur(7px) !important;
}

.brujos-menu-panel{
    position:absolute !important;
    top:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:min(360px,88vw) !important;
    padding:16px !important;
    background:
        linear-gradient(135deg,rgba(36,212,206,.18),rgba(239,63,143,.12)),
        #f4f6ff !important;
    box-shadow:-24px 0 70px rgba(16,27,102,.22) !important;
    overflow:auto !important;
}

.brujos-menu-close{
    position:absolute !important;
    top:12px !important;
    right:12px !important;
    width:40px !important;
    height:40px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:14px !important;
    background:#fff !important;
    border:1px solid var(--br-line) !important;
    color:var(--br-deep) !important;
    text-decoration:none !important;
    font-size:26px !important;
    font-weight:1000 !important;
}

.brujos-menu-head{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    margin:48px 0 14px !important;
    padding:14px !important;
    border-radius:20px !important;
    background:#fff !important;
    border:1px solid var(--br-line) !important;
    box-shadow:var(--br-shadow) !important;
}

.brujos-menu-cup{
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:16px !important;
    background:linear-gradient(135deg,var(--br-yellow),var(--br-orange)) !important;
    font-size:25px !important;
}

.brujos-menu-head strong{
    display:block !important;
    font-size:20px !important;
    line-height:1 !important;
    font-weight:1000 !important;
    color:var(--br-deep) !important;
}

.brujos-menu-head small{
    display:block !important;
    margin-top:4px !important;
    font-size:9px !important;
    line-height:1 !important;
    font-weight:900 !important;
    text-transform:uppercase !important;
    letter-spacing:.08em !important;
    color:var(--br-muted) !important;
}

.brujos-menu-panel > a:not(.brujos-menu-close){
    min-height:48px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    margin-bottom:8px !important;
    padding:13px 14px !important;
    border-radius:16px !important;
    background:#fff !important;
    border:1px solid var(--br-line) !important;
    box-shadow:var(--br-shadow) !important;
    color:var(--br-deep) !important;
    text-decoration:none !important;
    font-size:15px !important;
    font-weight:950 !important;
}

.brujos-menu-panel > a:not(.brujos-menu-close)::after{
    content:"›" !important;
    font-size:24px !important;
    line-height:1 !important;
    color:var(--br-purple) !important;
}

.brujos-menu-panel > a:not(.brujos-menu-close):hover{
    background:var(--br-deep) !important;
    color:#fff !important;
}

/* Layout */
.wrap{
    width:min(100%,760px) !important;
    margin:0 auto !important;
    padding:12px 12px 20px !important;
}

/* Hero limpio */
.hero,
.stadium-hero{
    display:block !important;
    min-height:auto !important;
    padding:18px 16px !important;
    border-radius:22px !important;
    border:1px solid var(--br-line) !important;
    background:
        radial-gradient(circle at 86% 18%, rgba(185,244,0,.38), transparent 18%),
        linear-gradient(135deg, rgba(36,212,206,.25), rgba(139,92,255,.17), rgba(239,63,143,.15)),
        #fff !important;
    box-shadow:var(--br-shadow) !important;
}

.hero-content::before{
    content:"🏆" !important;
    display:grid !important;
    place-items:center !important;
    width:52px !important;
    height:52px !important;
    border-radius:18px !important;
    margin-bottom:10px !important;
    background:linear-gradient(135deg,var(--br-yellow),var(--br-orange)) !important;
    box-shadow:var(--br-shadow) !important;
    font-size:28px !important;
}

.eyebrow{
    display:inline-flex !important;
    padding:6px 9px !important;
    margin-bottom:9px !important;
    border-radius:999px !important;
    background:#eef2ff !important;
    border:1px solid var(--br-line) !important;
    color:var(--br-blue) !important;
    font-size:10px !important;
    font-weight:1000 !important;
    text-transform:uppercase !important;
    letter-spacing:.055em !important;
}

.hero h1{
    margin:0 0 8px !important;
    font-size:31px !important;
    line-height:.95 !important;
    letter-spacing:-.055em !important;
    color:var(--br-deep) !important;
}

.hero p{
    margin:0 !important;
    font-size:13px !important;
    line-height:1.35 !important;
    color:var(--br-muted) !important;
}

/* Popup cuenta, por si no quedó estilizado */
.access-modal{
    position:fixed !important;
    inset:0 !important;
    z-index:650 !important;
    display:none !important;
    align-items:center !important;
    justify-content:center !important;
    padding:18px !important;
}

.access-modal:target{
    display:flex !important;
}

.access-bg{
    position:absolute !important;
    inset:0 !important;
    background:rgba(16,27,102,.55) !important;
    backdrop-filter:blur(8px) !important;
}

.access-box{
    position:relative !important;
    z-index:2 !important;
    width:min(390px,94vw) !important;
    padding:22px !important;
    border-radius:24px !important;
    background:#fff !important;
    border:1px solid var(--br-line) !important;
    box-shadow:0 30px 90px rgba(16,27,102,.28) !important;
    text-align:center !important;
}

.access-close{
    position:absolute !important;
    top:10px !important;
    right:12px !important;
    width:34px !important;
    height:34px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:999px !important;
    background:#fff !important;
    border:1px solid var(--br-line) !important;
    color:var(--br-deep) !important;
    font-size:22px !important;
    font-weight:900 !important;
    text-decoration:none !important;
}

.access-cup{
    width:68px !important;
    height:68px !important;
    display:grid !important;
    place-items:center !important;
    margin:0 auto 12px !important;
    border-radius:22px !important;
    background:linear-gradient(135deg,var(--br-yellow),var(--br-orange)) !important;
    box-shadow:var(--br-shadow) !important;
    font-size:36px !important;
}

.access-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:9px !important;
}

.access-main,
.access-secondary{
    min-height:46px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:16px !important;
    font-weight:1000 !important;
    font-size:14px !important;
    text-decoration:none !important;
}

.access-main{
    background:linear-gradient(135deg,var(--br-purple),var(--br-blue)) !important;
    color:#fff !important;
}

.access-secondary{
    background:#fff !important;
    border:1px solid var(--br-line) !important;
    color:var(--br-deep) !important;
}

/* Desktop */
@media(min-width:761px){
    .brujos-header{
        min-height:68px !important;
        padding:12px 28px 14px !important;
    }

    .brujos-brand{
        max-width:none !important;
    }

    .brujos-title-wrap strong{
        font-size:20px !important;
    }

    .brujos-title-wrap small{
        font-size:9px !important;
    }

    .wrap{
        width:min(1180px,94vw) !important;
        padding:18px 0 28px !important;
    }

    .hero{
        padding:30px 26px !important;
    }
}

/* Celulares pequeños */
@media(max-width:390px){
    .brujos-brand{
        max-width:calc(100vw - 104px) !important;
    }

    .brujos-title-wrap strong{
        font-size:14px !important;
    }

    .brujos-title-wrap small{
        font-size:7.5px !important;
    }

    .brujos-cup,
    .brujos-profile,
    .brujos-menu-btn{
        width:36px !important;
        height:36px !important;
        min-width:36px !important;
        border-radius:12px !important;
    }
}