/* ════════════════════════════════════════════════════════════════════
   Alentando al Ganador · by La Cachapera
   Sistema de diseño — paleta dorado / verde / negro (elegante).
   Mobile-first.
   ════════════════════════════════════════════════════════════════════ */

:root {
    /* Dorados */
    --gold-primary: #D4AF37;
    --gold-light:   #F5C542;
    --gold-dark:    #A67C00;
    /* Verdes */
    --green-primary: #355E3B;
    --green-dark:    #1E3A24;
    --green-light:   #5F8A61;
    /* Neutros oscuros */
    --black:    #111111;
    --charcoal: #232323;
    --gray:     #2E3138;
    /* Superficies (DARK) */
    --white:      #FFFFFF;
    --bg:         #131519;   /* fondo de la app */
    --surface:    #1d2026;   /* tarjetas */
    --surface-2:  #262a31;   /* inputs / chips / fills */
    --white-soft: #1d2026;   /* compat: relleno = superficie */
    /* Mundial */
    --wc-yellow:       #F7C600;
    --wc-yellow-light: #FFD84A;

    /* Texto */
    --text:       #ECEEE8;   /* texto claro */
    --ink:        #15171b;   /* texto OSCURO (sobre dorado/amarillo) */
    --text-muted: #9aa0a6;
    --border:     #2f343c;

    /* Estados */
    --ok:#1d6a3a; --ok-bg:#e7f7ec;
    --warn:#9a6400; --warn-bg:#fff3d6;
    --error:#a23029; --error-bg:#fdecea;
    --info:#2363b8; --info-bg:#eef3ff;

    --radius:14px; --radius-sm:10px; --radius-lg:18px; --radius-pill:999px;
    --shadow:    0 2px 8px rgba(17,17,17,.08);
    --shadow-md: 0 10px 28px rgba(17,17,17,.14);
    --shadow-gold: 0 8px 22px rgba(212,175,55,.40);

    --header-h:64px; --nav-h:66px; --maxw:560px;
}

* { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; }

body {
    font-family:'Cabin', system-ui, -apple-system, sans-serif;
    font-size:16px; line-height:1.5; color:var(--text);
    background:var(--bg);
    -webkit-font-smoothing:antialiased;
}

h1,h2,h3,.display {
    font-family:'Bebas Neue','Cabin',sans-serif;
    letter-spacing:.5px; color:var(--text); line-height:1.05; font-weight:400;
}
h1{font-size:2rem;} h2{font-size:1.45rem;} h3{font-size:1.18rem;}
a{color:inherit; text-decoration:none;}

.label{font-weight:700; font-size:.72rem; letter-spacing:.6px; text-transform:uppercase; color:var(--text-muted);}

/* Iconos de moneda y copa (imágenes reales de marca) */
.coin-ic, .copa-ic { height:1.15em; width:auto; vertical-align:-.22em; }
.coin-ic { border-radius:50%; }
.coin-lg { height:30px; border-radius:50%; } .copa-lg { height:30px; }

/* ── Predicciones especiales (home) ─────────────────────────────── */
.picks-grid{ display:flex; flex-direction:column; gap:2px; }
.pick-item{ display:flex; justify-content:space-between; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid var(--border); }
.pick-item:last-child{ border-bottom:none; }
.pick-item > span:last-child{ font-weight:700; display:flex; align-items:center; gap:7px; }
.pick-fl{ width:24px; height:16px; border-radius:3px; box-shadow:var(--shadow); object-fit:cover; }

/* ── Formulario de alentada (ganador + marcador) ────────────────── */
.bet-pick{ display:flex; gap:8px; margin-bottom:8px; }
.pick-opt{ flex:1; position:relative; }
.pick-opt input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.pick-opt span{ display:block; text-align:center; padding:11px 8px; border-radius:10px; border:1.5px solid #4a4d54; font-weight:700; color:var(--text); }
.pick-opt input:checked + span{ background:var(--wc-yellow); color:var(--black); border-color:var(--wc-yellow); }
.bet-score{ display:flex; flex-direction:column; align-items:center; gap:8px; margin:4px 0 12px; }
.bet-score-label{ font-size:.82rem; color:var(--text); font-weight:700; text-align:center; }
.bet-score-label .coin-ic{ height:1em; vertical-align:-.18em; }
.bet-score-inputs{ display:flex; align-items:center; justify-content:center; gap:12px; }
.bet-score-inputs input{ width:60px; height:54px; text-align:center; background:var(--surface-2);
    border:1.5px solid #4a4d54; border-radius:12px; color:#fff; font-family:'Bebas Neue',sans-serif; font-size:1.8rem; line-height:1; }
.bet-score-inputs input:focus{ outline:none; border-color:var(--gold-primary); box-shadow:0 0 0 3px rgba(212,175,55,.25); }
.bet-score-inputs input::placeholder{ color:#6b6f74; }
/* Oculta las flechitas (spinners) feas del navegador en los inputs de marcador */
.bet-score-inputs input[type=number]{ -moz-appearance:textfield; appearance:textfield; }
.bet-score-inputs input[type=number]::-webkit-outer-spin-button,
.bet-score-inputs input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.bet-dash{ font-family:'Bebas Neue',sans-serif; font-size:1.6rem; color:var(--text-muted); }

/* ── Shell ──────────────────────────────────────────────────────── */
.app-shell{ max-width:var(--maxw); margin:0 auto; min-height:100vh; background:var(--bg); position:relative; display:flex; flex-direction:column; }

.app-header{
    position:sticky; top:0; z-index:30; height:var(--header-h);
    background:var(--black); color:var(--white);
    display:flex; align-items:center; justify-content:space-between;
    padding:0 16px; border-radius:0 0 var(--radius-lg) var(--radius-lg);
    box-shadow:0 2px 10px rgba(0,0,0,.25);
}
.app-header .brand-logo{ height:46px; width:auto; display:block; }
.app-header .header-right{ display:flex; align-items:center; gap:10px; }
.app-header .pill-balance{
    display:inline-flex; align-items:center; gap:6px;
    background:linear-gradient(135deg, var(--gold-light), var(--gold-dark));
    color:var(--black); border-radius:var(--radius-pill);
    padding:5px 12px 5px 8px; font-weight:800; font-size:.92rem;
    box-shadow:var(--shadow-gold);
}
.app-header .pill-balance .coin-ic{ height:20px; }

.app-main{ flex:1 0 auto; display:flex; flex-direction:column; padding:16px 16px calc(var(--nav-h) + 44px); }

/* ── Bottom nav (oscuro elegante, radius contenido) ─────────────── */
.bottom-nav{
    position:fixed; bottom:0; left:50%; transform:translateX(-50%);
    width:100%; max-width:var(--maxw); height:var(--nav-h);
    background:var(--charcoal); border-top:2px solid var(--gold-dark);
    border-radius:14px 14px 0 0;
    box-shadow:0 -4px 18px rgba(0,0,0,.25);
    display:flex; align-items:stretch; justify-content:space-around; z-index:40;
}
.bottom-nav a{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px; color:#b9bbb4; font-size:.66rem; font-weight:600; letter-spacing:.3px;
}
.bottom-nav a.active{ color:var(--gold-light); }
.bottom-nav a.active svg{ color:var(--gold-light); }
.bottom-nav svg{ width:22px; height:22px; }
.bottom-nav .nav-cta{ flex:0 0 auto; margin-top:-20px; }
.bottom-nav .nav-cta .fab{
    width:56px; height:56px; border-radius:var(--radius-pill);
    background:var(--wc-yellow);
    color:var(--black); display:grid; place-items:center;
    box-shadow:0 6px 18px rgba(247,198,0,.45); border:3px solid var(--charcoal);
}
.bottom-nav .nav-cta .fab svg{ width:28px; height:28px; }

/* ── Tarjetas ───────────────────────────────────────────────────── */
.card{
    background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius); box-shadow:var(--shadow);
    padding:16px; margin-bottom:14px;
}
.card.highlight{ box-shadow:var(--shadow-md); }
.card-hero{ background:linear-gradient(150deg, var(--green-primary), var(--green-dark)); color:var(--white); border:none; }
.card-hero h1,.card-hero h2,.card-hero h3{ color:var(--white); }
.card-title{ display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.card-title svg{ width:20px; height:20px; color:var(--gold-dark); }
.card-title h3{ margin:0; }

/* ── Resumen de perfil (cabecera dorada del home) ───────────────── */
.profile-summary{
    background:linear-gradient(135deg, var(--gold-light) 0%, var(--gold-primary) 55%, var(--gold-dark) 100%);
    border-radius:var(--radius-lg); color:var(--black);
    padding:16px; margin-bottom:14px; box-shadow:var(--shadow-md);
    display:flex; align-items:center; gap:14px;
}
.profile-summary .avatar{
    width:62px; height:62px; border-radius:var(--radius-pill); object-fit:cover;
    border:3px solid rgba(17,17,17,.85); background:var(--white); flex:0 0 auto;
}
.profile-summary .ps-name{ font-family:'Bebas Neue',sans-serif; font-size:1.5rem; line-height:1; }
.profile-summary .ps-sub{ font-size:.8rem; font-weight:600; opacity:.8; }
.profile-summary .ps-stats{ display:flex; gap:18px; margin-top:8px; }
.ps-stat{ display:flex; align-items:center; gap:7px; }
.ps-stat .ps-num{ font-family:'Bebas Neue',sans-serif; font-size:1.5rem; line-height:1; }
/* Insignia circular oscura para que el icono contraste sobre el dorado */
.icon-badge{
    width:34px; height:34px; border-radius:var(--radius-pill);
    background:var(--green-dark); display:grid; place-items:center; flex:0 0 auto;
    box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.icon-badge img{ height:22px; width:auto; }

/* ── Botones ────────────────────────────────────────────────────── */
.btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-family:'Cabin',sans-serif; font-weight:700; font-size:.95rem;
    border:none; border-radius:var(--radius-pill); padding:13px 22px; cursor:pointer;
    transition:transform .07s ease, box-shadow .2s ease, filter .2s ease;
}
.btn:active{ transform:scale(.97); }
.btn svg{ width:18px; height:18px; }
/* CTA dorado con degradado animado (texto blanco, vaivén suave sin tirón) */
.btn-cta{
    background:linear-gradient(110deg, var(--gold-dark), var(--gold-primary) 50%, var(--gold-dark));
    background-size:200% 100%; color:#fff; font-weight:800; text-shadow:0 1px 2px rgba(0,0,0,.5);
    animation:shimmer 4.5s ease-in-out infinite alternate; box-shadow:var(--shadow-gold);
}
.btn-cta:hover{ filter:brightness(1.06); }
.btn-cta svg{ filter:drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
@keyframes shimmer{ from{ background-position:0 0; } to{ background-position:100% 0; } }
.btn-green{ background:var(--green-primary); color:var(--white); }
.btn-green:hover{ background:var(--green-dark); }
.btn-dark{ background:var(--black); color:var(--gold-light); }
/* Botón claro (amarillo suave) y blanco — para acciones secundarias */
.btn-soft{ background:#FCE9A8; color:var(--ink); border:1.5px solid #EAD27E; font-weight:700; }
.btn-soft:hover{ background:#F8DE85; }
.btn-white{ background:#fff; color:var(--ink); border:1.5px solid var(--border); font-weight:700; }
.btn-white:hover{ border-color:var(--gold-primary); }
/* Alias de compatibilidad: ahora claro (no invasivo) */
.btn-brand{ background:#FCE9A8; color:var(--ink); border:1.5px solid #EAD27E; font-weight:700; }
.btn-brand:hover{ background:#F8DE85; }
/* Botones de redes / delivery */
.btn-ig{ background:linear-gradient(45deg,#f09433,#e6683c 30%,#dc2743 55%,#cc2366 75%,#bc1888); color:#fff; }
.btn-tiktok{ background:#111; color:#fff; }
.btn-ig:hover,.btn-tiktok:hover{ filter:brightness(1.08); }
.btn-primary{ background:var(--green-primary); color:var(--white); }
.btn-primary:hover{ background:var(--green-dark); }
.btn-ghost{ background:transparent; color:var(--text); border:1.5px solid var(--border); }
.btn-ghost:hover{ border-color:var(--gold-primary); }
.btn-block{ display:flex; width:clamp(200px, 60%, 320px); margin-left:auto; margin-right:auto; }
.btn:disabled{ opacity:.5; cursor:not-allowed; animation:none; }

/* ── Formularios ────────────────────────────────────────────────── */
.field{ margin-bottom:14px; }
.field label{ display:block; margin-bottom:6px; font-weight:600; font-size:.9rem; }
.input,select,textarea{
    width:100%; font-family:inherit; font-size:1rem; color:var(--text);
    background:var(--surface-2); border:1.5px solid var(--border); border-radius:var(--radius-sm); padding:12px 14px;
}
.input::placeholder,textarea::placeholder{ color:var(--text-muted); }
select option{ color:#fff; background:#23262d; }
.input:focus,select:focus,textarea:focus{
    outline:none; border-color:var(--gold-primary); box-shadow:0 0 0 3px rgba(212,175,55,.25);
}

/* Input de archivo bonito (etiqueta-botón con icono) */
.file-field{ position:relative; }
.file-field input[type=file]{ position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer; }
.file-pretty{
    display:flex; align-items:center; justify-content:center; gap:8px;
    border:1.5px dashed var(--gold-dark); color:var(--gold-light); background:var(--surface-2);
    border-radius:var(--radius-sm); padding:12px; font-weight:700; font-size:.9rem;
}
.file-pretty svg{ width:18px; height:18px; }

/* ── Pills / badges ─────────────────────────────────────────────── */
.pill{ display:inline-flex; align-items:center; gap:5px; border-radius:var(--radius-pill); padding:4px 11px; font-size:.78rem; font-weight:800; }
.pill-cp{ background:linear-gradient(135deg,var(--gold-light),var(--gold-dark)); color:var(--black); }
.pill-copa{ background:var(--green-dark); color:var(--gold-light); }
.pill-ok{ background:var(--ok-bg); color:var(--ok); }
.pill-warn{ background:var(--warn-bg); color:var(--warn); }
.pill-error{ background:var(--error-bg); color:var(--error); }

/* ── Alertas ────────────────────────────────────────────────────── */
.alert{ border-radius:var(--radius-sm); padding:12px 14px; margin-bottom:14px; font-size:.92rem; }
.alert-ok{ background:var(--ok-bg); color:var(--ok); }
.alert-warn{ background:var(--warn-bg); color:var(--warn); }
.alert-error{ background:var(--error-bg); color:var(--error); }
.alert-info{ background:var(--info-bg); color:var(--info); }

/* ── Ranking ────────────────────────────────────────────────────── */
.rank-row{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); }
.rank-row:last-child{ border-bottom:none; }
.rank-pos{ width:28px; height:28px; border-radius:var(--radius-pill); background:var(--surface-2); color:var(--text);
           display:grid; place-items:center; font-weight:800; font-size:.85rem; flex:0 0 auto; }
.rank-row:nth-child(1) .rank-pos{ background:linear-gradient(135deg,var(--gold-light),var(--gold-dark)); color:var(--black); }
.rank-ava-wrap{ position:relative; flex:0 0 auto; width:38px; height:38px; }
.rank-avatar{ width:38px; height:38px; border-radius:var(--radius-pill); background:var(--white-soft); object-fit:cover; flex:0 0 auto; border:2px solid var(--border); display:block; }
.rank-flag{ position:absolute; bottom:-3px; right:-4px; width:20px; height:14px; border-radius:3px; object-fit:cover;
            border:2px solid var(--surface); box-shadow:var(--shadow); }
.rank-name{ flex:1; font-weight:600; }
.rank-row.rank-me{ background:rgba(245,197,66,.10); border-radius:10px; padding-left:8px; padding-right:8px; }
.rank-copas{ font-weight:800; color:var(--text); display:flex; align-items:center; gap:5px; }

/* ── Partido ────────────────────────────────────────────────────── */
.match{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.match-team{ display:flex; flex-direction:column; align-items:center; gap:6px; flex:1; text-align:center; }
.match-team img.crest,.match-team img.flag{ width:42px; height:42px; object-fit:contain; }
.match-team .flag{ border-radius:4px; box-shadow:var(--shadow); }
.match-team .tname{ font-weight:700; font-size:.85rem; }
.match-vs{ font-family:'Bebas Neue',sans-serif; font-size:1.1rem; color:var(--text-muted); }
.match-time{ text-align:center; font-size:.78rem; color:var(--text-muted); }
.match-score{ font-family:'Bebas Neue',sans-serif; font-size:1.7rem; }

/* ── Countdown ──────────────────────────────────────────────────── */
.countdown{ display:flex; gap:10px; justify-content:center; }
.countdown .unit{ background:var(--green-dark); color:var(--gold-light); border-radius:var(--radius-sm); padding:10px 12px; min-width:60px; text-align:center; }
.countdown .unit .num{ font-family:'Bebas Neue',sans-serif; font-size:1.9rem; line-height:1; }
.countdown .unit .lbl{ font-size:.62rem; text-transform:uppercase; letter-spacing:.5px; opacity:.85; }

/* ── Misiones (fondo cómic anclado a la izquierda) ──────────────── */
.mission{ position:relative; overflow:hidden; }
/* Imagen de fondo fijada al lado izquierdo, detrás del contenido */
.mission::before{
    content:""; position:absolute; inset:0;
    background:url('/assets/img/mission-bg.png') left center / auto 100% no-repeat;
    opacity:.28; pointer-events:none;
}
.mission .m-body{ position:relative; z-index:1; padding-left:62px; }
.mission .m-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.mission .m-reward{ flex:0 0 auto; white-space:nowrap; }
.mission.is-done{ opacity:.85; }
.mission.is-done::before{ opacity:.3; }

/* ── Premios ────────────────────────────────────────────────────── */
.prize-row{ display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); align-items:flex-start; }
.prize-row:last-child{ border-bottom:none; }
.prize-medal{ width:40px; height:40px; flex:0 0 auto; }

/* ── Cajón de empresa (pestaña sobre el menú, oculto detrás del nav) ── */
.cf-drawer{
    position:fixed; left:50%; transform:translateX(-50%);
    bottom:var(--nav-h); width:100%; max-width:var(--maxw);
    z-index:35; display:flex; flex-direction:column; pointer-events:none;
}
.cf-handle{
    pointer-events:auto; align-self:flex-start; order:2; margin-left:14px;
    display:inline-flex; align-items:center; gap:6px;
    background:linear-gradient(135deg, var(--gold-primary), var(--gold-dark));
    color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.5);
    border:none; border-radius:12px 12px 0 0; padding:5px 18px;
    font-family:'Cabin',sans-serif; font-weight:800; font-size:.78rem; letter-spacing:.3px;
    cursor:pointer; box-shadow:0 -3px 10px rgba(0,0,0,.25);
}
.cf-handle svg{ width:16px; height:16px; transition:transform .3s ease; }
.cf-panel{
    pointer-events:auto; order:1; margin:0 8px 6px;
    background:var(--black); color:#cfd2cb;
    border-radius:var(--radius-lg);
    max-height:0; overflow:hidden; opacity:0;
    transition:max-height .35s ease, opacity .25s ease, padding .35s ease;
    text-align:center; font-size:.82rem; line-height:1.6; padding:0 18px;
}
.cf-drawer.open .cf-panel{ max-height:62vh; opacity:1; overflow-y:auto; padding:18px 18px 14px; box-shadow:0 8px 28px rgba(0,0,0,.5); }
.cf-drawer.open .cf-handle svg{ transform:rotate(180deg); }
.cf-panel .cf-logo{ height:50px; margin-bottom:8px; }
.cf-panel a{ color:var(--gold-light); font-weight:700; }
.cf-panel .cf-locales{ color:#9a9d96; font-size:.76rem; margin-top:6px; }
.cf-panel .cf-social{ display:flex; gap:14px; justify-content:center; margin:10px 0; }
.cf-panel .cf-social a{ color:#cfd2cb; }
.cf-panel .cf-legal{ color:#7c7f78; font-size:.72rem; margin-top:10px; }

/* ── Utilidades ─────────────────────────────────────────────────── */
.text-muted{ color:var(--text-muted); }
.text-center{ text-align:center; }
.mt-1{margin-top:8px;} .mt-2{margin-top:16px;} .mt-3{margin-top:24px;}
.mb-0{margin-bottom:0;}
.row{ display:flex; gap:12px; }
.row>*{ flex:1; }
.stack>*+*{ margin-top:12px; }
.empty{ text-align:center; color:var(--text-muted); padding:24px 12px; }

/* ── Pantallas de auth ──────────────────────────────────────────── */
.auth-screen{
    min-height:100vh; display:flex; flex-direction:column; justify-content:center;
    padding:24px; background:var(--black) url('/assets/img/login-bg.jpg') center/cover no-repeat;
    position:relative;
}
.auth-screen::before{ content:""; position:absolute; inset:0; background:rgba(17,17,17,.55); }
.auth-card{
    position:relative; z-index:1;
    background:var(--black); color:var(--white);
    border:1.5px solid var(--gold-dark);
    border-radius:var(--radius-lg); box-shadow:var(--shadow-md);
    padding:26px 24px; max-width:400px; width:100%; margin:0 auto;
}
.auth-card h1{ color:var(--white); }
.auth-card .auth-logo{ display:block; width:158px; margin:0 auto 6px; }
.auth-card label{ color:#e7e8e3; }
.auth-card .input{ background:#1b1b1b; border-color:#3a3a3a; color:var(--white); }
.auth-card .input::placeholder{ color:#7c7f78; }
.auth-footer-brand{
    position:absolute; left:0; right:0; bottom:14px; z-index:1;
    text-align:center; color:#e7e8e3; font-size:.82rem; line-height:1.5;
}
.auth-footer-brand a{ color:#fff; font-weight:700; }

/* ── Tema oscuro (página Alentar) ───────────────────────────────── */
.theme-dark{ background:var(--charcoal); }
.theme-dark .app-main{ color:var(--white-soft); }
.theme-dark h1,.theme-dark h2,.theme-dark h3{ color:var(--white); }
.theme-dark .card{ background:var(--gray); border-color:#3a3d44; color:var(--white-soft); box-shadow:0 4px 14px rgba(0,0,0,.3); }
.theme-dark .text-muted{ color:#a9aca4; }
.theme-dark .match-vs,.theme-dark .match-time{ color:#a9aca4; }
.theme-dark .btn-ghost{ color:var(--white); border-color:#4a4d54; }
.theme-dark .btn-ghost:hover{ border-color:var(--gold-light); background:rgba(245,197,66,.08); }
.theme-dark .alert-ok{ background:rgba(29,106,58,.25); color:#bfe6cc; }
.theme-dark .alert-warn{ background:rgba(154,100,0,.25); color:#f0d59a; }

/* Navegador de días */
.day-nav{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:14px; }
.day-nav a, .day-nav span.dn-label{
    display:inline-flex; align-items:center; gap:6px; font-weight:700;
}
.day-nav .dn-arrow{ width:42px; height:42px; border-radius:var(--radius-pill); background:var(--gray); color:var(--gold-light);
                    display:grid; place-items:center; border:1px solid #4a4d54; }
.day-nav .dn-arrow.disabled{ opacity:.35; pointer-events:none; }
.day-nav .dn-label{ flex:1; text-align:center; flex-direction:column; gap:0; }
.day-nav .dn-label .dn-day{ font-family:'Bebas Neue',sans-serif; font-size:1.4rem; color:var(--gold-light); }
.day-nav .dn-label .dn-sub{ font-size:.72rem; color:#a9aca4; }

/* Coste de alentada destacado */
.bet-cost{ display:inline-flex; align-items:center; gap:6px; background:rgba(245,197,66,.12);
           border:1px solid var(--gold-dark); border-radius:var(--radius-pill); padding:4px 12px; font-weight:800; color:var(--gold-light); }
.bet-cost .coin-ic{ height:20px; }

/* ── Carrusel de grupos (deslizable) ────────────────────────────── */
.groups-carousel{ display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; padding:2px 0 10px; }
.groups-carousel::-webkit-scrollbar{ height:5px; }
.groups-carousel::-webkit-scrollbar-thumb{ background:var(--gold-dark); border-radius:3px; }
.group-slide{ flex:0 0 84%; scroll-snap-align:center; margin-bottom:0; }
.carousel-hint{ font-size:.78rem; color:var(--text-muted); margin-bottom:6px; display:flex; align-items:center; gap:6px; }

/* ── Bracket eliminatorio (cuadro) ──────────────────────────────── */
.bk-stage{ margin-bottom:14px; }
.bk-stage h3{ color:var(--gold-light); margin-bottom:8px; }
.bk-match{ background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:9px 12px; margin-bottom:8px; }
.bk-line{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:3px 0; }
.bk-line .bk-side{ display:flex; align-items:center; gap:7px; font-weight:700; font-size:.86rem; flex:1; }
.bk-line .bk-side img{ width:22px; height:15px; border-radius:3px; object-fit:cover; box-shadow:var(--shadow); }
.bk-line .bk-slot-tag{ color:var(--text-muted); font-weight:700; }
.bk-line.bk-winner .bk-side{ color:var(--gold-light); }
.bk-line .bk-gs{ font-family:'Bebas Neue',sans-serif; font-size:1.1rem; flex:0 0 auto; color:var(--text); }
.bk-meta{ font-size:.72rem; color:var(--text-muted); margin-top:5px; display:flex; justify-content:space-between; gap:8px; }

/* ── Mundial: grupos, posiciones y bracket ──────────────────────── */
.group-head{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.group-badge{ background:var(--green-dark); color:var(--gold-light); border-radius:8px; padding:2px 12px; font-family:'Bebas Neue',sans-serif; font-size:1.2rem; letter-spacing:.5px; }
.std-table{ width:100%; border-collapse:collapse; font-size:.82rem; }
.std-table th{ text-align:center; font-weight:700; color:var(--text-muted); font-size:.66rem; text-transform:uppercase; padding:5px 3px; border-bottom:1px solid var(--border); }
.std-table td{ text-align:center; padding:7px 3px; border-bottom:1px solid var(--border); }
.std-table tr:last-child td{ border-bottom:none; }
.std-table td.team{ text-align:left; font-weight:600; }
.std-table .pos{ width:22px; color:var(--text-muted); font-weight:800; }
.std-table tr.qual .pos{ color:#fff; background:var(--green-primary); border-radius:6px; }
.std-table .fl{ width:22px; height:15px; border-radius:2px; vertical-align:middle; margin-right:6px; box-shadow:var(--shadow); object-fit:cover; }
.std-table .pts{ font-weight:800; color:var(--text); }
.std-legend{ font-size:.72rem; color:var(--text-muted); margin-top:6px; display:flex; align-items:center; gap:6px; }
.std-legend i{ width:12px; height:12px; border-radius:4px; background:var(--green-primary); display:inline-block; }
.gf-list{ margin-top:10px; border-top:1px solid var(--border); padding-top:8px; }
.gf-row{ display:flex; align-items:center; gap:8px; padding:6px 0; }
.gf-when{ color:var(--text-muted); font-size:.72rem; width:74px; flex:0 0 auto; }
.gf-teams{ flex:1; font-size:.84rem; }
.gf-score{ font-family:'Bebas Neue',sans-serif; font-size:1rem; color:var(--text); }
/* Bracket eliminatorio */
.bracket{ display:flex; flex-direction:column; gap:12px; }
.bk-round h3{ color:var(--gold-dark); margin-bottom:6px; }
.bk-slot{ background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:9px 12px; margin-bottom:7px; font-size:.84rem; display:flex; justify-content:space-between; align-items:center; gap:8px; }
.bk-slot .bk-tbd{ color:var(--text-muted); }
.bk-slot .bk-date{ color:var(--text-muted); font-size:.74rem; }

/* ── Fondo cómic del inicio (anclado a la izquierda, detrás de todo) ── */
body.bg-index .app-shell::before{
    content:""; position:fixed; top:0; bottom:0; left:50%; transform:translateX(-50%);
    width:100%; max-width:var(--maxw);
    background:url('/assets/img/index-bg.png') center center / cover no-repeat;
    opacity:.45; pointer-events:none; z-index:0;
}
body.bg-index .app-header,
body.bg-index .app-main,
body.bg-index .bottom-nav{ position:relative; z-index:1; }

/* ── Botón de premios en la cabecera ────────────────────────────── */
.hdr-btn{ background:rgba(255,255,255,.1); border:none; color:var(--gold-light); width:38px; height:38px;
          border-radius:50%; display:grid; place-items:center; cursor:pointer; }
.hdr-btn svg{ width:20px; height:20px; }
.hdr-btn:hover{ background:rgba(255,255,255,.2); }

/* ── Botón de delivery (bordes e icono dorados) ─────────────────── */
.btn-delivery{
    display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
    background:var(--surface); border:2px solid var(--gold-primary); color:var(--gold-light);
    border-radius:var(--radius-pill); padding:12px 18px; font-weight:800; font-size:.92rem;
    margin-bottom:14px; box-shadow:var(--shadow);
}
.btn-delivery svg{ width:25px; height:25px; color:var(--gold-light); }
.btn-delivery:hover{ background:var(--surface-2); box-shadow:var(--shadow-gold); }

/* ── Ticket de quiniela (mis alentadas) ─────────────────────────── */
.ticket{ background:var(--surface); border:1.5px dashed var(--gold-dark); border-radius:12px; padding:12px 14px;
         margin-bottom:12px; position:relative; box-shadow:var(--shadow); }
.ticket::before,.ticket::after{ content:""; position:absolute; top:50%; transform:translateY(-50%);
         width:14px; height:14px; border-radius:50%; background:var(--bg); }
.ticket::before{ left:-8px; } .ticket::after{ right:-8px; }
.ticket.tk-win{ border-color:var(--ok); }
.tk-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.tk-team{ display:flex; align-items:center; gap:6px; font-weight:700; font-size:.88rem; flex:1; }
.tk-team.tk-rev{ justify-content:flex-end; }
.tk-fl{ width:22px; height:15px; border-radius:3px; box-shadow:var(--shadow); object-fit:cover; }
.tk-score{ font-family:'Bebas Neue',sans-serif; font-size:1.3rem; flex:0 0 auto; }
.tk-bet{ font-size:.82rem; color:var(--text-muted); margin-top:8px; padding-top:8px; border-top:1px dashed var(--border); }
.tk-foot{ display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:6px; font-size:.8rem; flex-wrap:wrap; }
.tk-spent{ color:var(--text-muted); }
.tk-prize{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.tk-ok{ color:var(--ok); font-weight:800; }
.tk-bad{ color:var(--error); font-weight:800; }

/* ── Modal ──────────────────────────────────────────────────────── */
.modal-overlay{ position:fixed; inset:0; background:rgba(17,17,17,.6); z-index:60; display:none;
        align-items:center; justify-content:center; padding:20px; }
.modal-overlay.open{ display:flex; }
.modal-box{ background:var(--surface); border-radius:var(--radius-lg); max-width:420px; width:100%;
        max-height:82vh; overflow-y:auto; padding:18px 20px; box-shadow:var(--shadow-md); }
.modal-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.modal-x{ background:none; border:none; font-size:1.9rem; line-height:1; color:var(--text-muted); cursor:pointer; }

/* ── Modal de reglas (cómo ganar) ───────────────────────────────── */
.rules-list{ display:flex; flex-direction:column; gap:10px; }
.rule-row{ display:flex; align-items:flex-start; gap:12px; padding:11px 12px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface-2); }
.rule-row strong{ color:var(--text); }
.rule-row .text-muted{ font-size:.85rem; margin-top:2px; }
.rule-row .rule-ic{ flex:0 0 auto; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-weight:800; }
.rule-row .rule-ic img{ height:20px; width:auto; }
.rule-win{ border-color:rgba(53,94,59,.6); }
.rule-win .rule-ic{ background:var(--green-dark); }
.rule-score{ border-color:var(--gold-dark); }
.rule-score .rule-ic{ background:linear-gradient(135deg,var(--gold-light),var(--gold-dark)); }
.rule-miss{ border-color:rgba(162,48,41,.5); }
.rule-miss .rule-ic{ background:var(--error); color:#fff; }
.rules-tip{ display:flex; align-items:flex-start; gap:9px; margin-top:14px; padding:11px 12px; border-radius:var(--radius-sm);
            background:rgba(245,197,66,.10); border:1px solid var(--gold-dark); font-size:.86rem; color:var(--text); }
.rules-tip svg{ width:20px; height:20px; color:var(--gold-light); flex:0 0 auto; }
.rules-tip a{ color:var(--gold-light); font-weight:700; }

/* ── Cuadro del Mundial (organigrama eliminatorio) ──────────────── */
.ko-hint{ font-size:.78rem; color:var(--text-muted); margin-bottom:6px; display:flex; align-items:center; gap:6px; }
.ko-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:10px; margin-bottom:8px; }
.ko-scroll::-webkit-scrollbar{ height:6px; }
.ko-scroll::-webkit-scrollbar-thumb{ background:var(--gold-dark); border-radius:3px; }
.ko-bracket{ display:flex; gap:16px; align-items:stretch; min-width:min-content; }
.ko-col{ display:flex; flex-direction:column; min-width:188px; }
.ko-col-head{ font-family:'Bebas Neue',sans-serif; font-size:1.15rem; letter-spacing:.5px; color:var(--gold-light);
    text-align:center; padding:4px 0 8px; position:sticky; top:0; }
.ko-col-body{ display:flex; flex-direction:column; justify-content:space-around; gap:12px; flex:1; }
.ko-match{ background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:7px 9px; }
.ko-team{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:4px 0; }
.ko-team + .ko-team{ border-top:1px dashed var(--border); }
.ko-tn{ display:flex; align-items:center; gap:7px; font-weight:700; font-size:.85rem; min-width:0; }
.ko-tn img, .ko-noflag{ width:22px; height:15px; border-radius:3px; flex:0 0 auto; box-shadow:var(--shadow); object-fit:cover; }
.ko-noflag{ background:var(--border); }
.ko-tn{ overflow:hidden; }
.ko-team.ko-win .ko-tn{ color:var(--gold-light); }
.ko-team.ko-win{ font-weight:800; }
.ko-sc{ font-family:'Bebas Neue',sans-serif; font-size:1.15rem; flex:0 0 auto; color:var(--text); }
.ko-slot{ color:var(--text-muted); font-weight:700; font-size:.8rem; }
.ko-when{ font-size:.7rem; color:var(--text-muted); text-align:center; margin-top:5px; border-top:1px solid var(--border); padding-top:5px; }

/* Tabla de eliminatorias */
.ko-table{ width:100%; border-collapse:collapse; font-size:.84rem; }
.ko-table th{ text-align:left; font-size:.66rem; text-transform:uppercase; letter-spacing:.5px; color:var(--text-muted); padding:6px 6px; border-bottom:1px solid var(--border); }
.ko-table td{ padding:8px 6px; border-bottom:1px solid var(--border); }
.ko-table tr:last-child td{ border-bottom:none; }
.ko-table .kt-round{ font-family:'Bebas Neue',sans-serif; color:var(--gold-light); letter-spacing:.3px; white-space:nowrap; }
.ko-table .kt-res{ font-family:'Bebas Neue',sans-serif; font-size:1rem; white-space:nowrap; }
.ko-table .kt-date{ color:var(--text-muted); white-space:nowrap; }

/* ── Modal de bienvenida (primer login) ─────────────────────────── */
.welcome-overlay{ z-index:80; }
.welcome-box{ position:relative; background:var(--surface); border-radius:var(--radius-lg);
    max-width:440px; width:100%; overflow:hidden; box-shadow:var(--shadow-md); border:1px solid var(--border); }
.welcome-x{ position:absolute; top:8px; right:10px; z-index:2; background:rgba(0,0,0,.45); color:#fff; border:none;
    width:34px; height:34px; border-radius:50%; font-size:1.6rem; line-height:1; cursor:pointer; }
.welcome-media{ position:relative; }
.welcome-media img{ display:block; width:100%; height:auto; }
/* Título centrado en la mitad de la imagen */
.welcome-title{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:18px;
    background:linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.45)); }
.welcome-title span{ font-family:'Bebas Neue',sans-serif; color:#fff; text-align:center; line-height:1.05;
    font-size:2.2rem; letter-spacing:.5px; text-shadow:0 2px 10px rgba(0,0,0,.7); }
/* Si no hay imagen, el título se ve sobre un fondo dorado */
.welcome-media:not(:has(img)) .welcome-title{ position:static; background:linear-gradient(135deg,var(--gold-light),var(--gold-dark)); padding:40px 18px; }
.welcome-media:not(:has(img)) .welcome-title span{ color:var(--ink); text-shadow:none; }
.welcome-actions{ padding:16px; }

/* ── Papelitos amarillos ────────────────────────────────────────── */
#confetti-canvas{ position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:9999; }

/* ════════════════════════════════════════════════════════════════════
   ESCRITORIO (≥1024px)
   El nav inferior se transforma en sidebar izquierda; el contenido se
   ensancha y usa rejillas. Los wrappers .dk-grid / .dk-feed / .dk-block
   son display:contents en móvil (sin efecto) y multi-columna en desktop.
   ════════════════════════════════════════════════════════════════════ */

/* Wrappers de rejilla: neutros en móvil (no alteran el layout actual). */
.dk-grid, .dk-feed, .dk-block { display:contents; }
/* El logo del sidebar solo aparece en escritorio. */
.bottom-nav .nav-brand{ display:none; }

@media (min-width:1024px){
    :root{ --sidebar-w:248px; }

    /* ── Nav inferior → Sidebar izquierda ───────────────────────── */
    .bottom-nav{
        top:0; bottom:auto; left:0; transform:none;
        width:var(--sidebar-w); height:100vh; max-width:none;
        flex-direction:column; justify-content:flex-start; align-items:stretch;
        gap:6px; padding:18px 16px 22px;
        border-top:none; border-right:2px solid var(--gold-dark);
        border-radius:0; box-shadow:4px 0 18px rgba(0,0,0,.25);
        overflow-y:auto;
    }
    /* Logo de la app arriba de las opciones (solo escritorio) */
    .bottom-nav .nav-brand{
        display:flex; align-items:center; justify-content:center;
        padding:4px 0 16px; margin-bottom:8px; flex:0 0 auto;
        border-bottom:1px solid rgba(255,255,255,.08);
    }
    .bottom-nav .nav-brand img{ height:52px; width:auto; }
    .bottom-nav a{
        flex:0 0 auto; flex-direction:row; justify-content:flex-start;
        gap:14px; font-size:1rem; font-weight:700; letter-spacing:.2px;
        padding:13px 18px; border-radius:var(--radius-pill);
    }
    .bottom-nav a:hover{ background:rgba(255,255,255,.05); }
    .bottom-nav a.active{ background:rgba(245,197,66,.12); }
    .bottom-nav svg{ width:24px; height:24px; }
    /* "Alentar": botón dorado a ancho completo, ANCLADO ABAJO del menú */
    .bottom-nav .nav-cta{ order:10; margin-top:auto; padding-top:14px; flex:0 0 auto; }
    .bottom-nav .nav-cta a{ display:block; }
    .bottom-nav .nav-cta .fab{
        width:100%; height:auto; border-radius:var(--radius-pill); border:none;
        flex-direction:row; gap:10px; padding:15px 18px;
        box-shadow:var(--shadow-gold); font-family:'Cabin',sans-serif; font-weight:800; font-size:1.02rem;
    }
    .bottom-nav .nav-cta .fab::after{ content:"Alentar"; }
    .bottom-nav .nav-cta .fab svg{ width:22px; height:22px; }

    /* ── Shell / header / contenido ─────────────────────────────── */
    .app-shell{ margin-left:var(--sidebar-w); max-width:none; }
    .app-header{ border-radius:0; padding:0 36px; height:68px; }
    .app-header .brand-logo{ height:50px; }
    .app-main{
        flex:1 0 auto; width:100%; max-width:1040px; margin:0 auto;
        padding:30px 36px 64px;
    }

    /* ── Cajón de empresa: anclado abajo-izquierda del contenido ── */
    .cf-drawer{ left:var(--sidebar-w); right:auto; transform:none; bottom:0; width:440px; max-width:none; }

    /* Fondo cómic (si alguna página lo activa): cubre el área de contenido */
    body.bg-index .app-shell::before{ left:var(--sidebar-w); transform:none; max-width:none; width:auto; right:0; }

    /* ── Rejillas de contenido ──────────────────────────────────── */
    /* Tarjetas homogéneas (misiones, grupos del Mundial) en 2 columnas */
    .dk-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:start; }
    .dk-grid > *{ margin-bottom:0; }
    /* Flujo masonry para contenido heterogéneo (home) */
    .dk-feed{ display:block; column-count:2; column-gap:24px; }
    .dk-feed > *{ break-inside:avoid; }
    .dk-block{ display:block; break-inside:avoid; }

    /* Grupos del ranking: el carrusel pasa a rejilla de 3 columnas */
    .carousel-hint{ display:none; }
    .groups-carousel{ flex-wrap:wrap; overflow:visible; }
    .groups-carousel .group-slide{ flex:0 0 calc(33.333% - 8px); }

    /* El bracket aprovecha el ancho: cada ronda reparte sus partidos en rejilla */
    .bk-stage{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px 14px; align-items:start; }
    .bk-stage h3{ grid-column:1 / -1; margin-bottom:2px; }
    .bk-stage .bk-match{ margin-bottom:0; }
    /* Bracket alternativo (skeleton .bracket/.bk-round), por si se usa */
    .bracket{ flex-direction:row; flex-wrap:wrap; }
    .bracket .bk-round{ flex:1 1 220px; }
}

/* ── Pantallas anchas: centra la app completa (sidebar + contenido) ── */
@media (min-width:1400px){
    .app-main{ max-width:1120px; }
}