/* Stadium edition: local type, tactile surfaces and stationary game controls. */
@font-face {
    font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 800;
    font-display: swap; src: url('fonts/bricolage-grotesque-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
    font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 800;
    font-display: swap; src: url('fonts/bricolage-grotesque-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: 'Manrope'; font-style: normal; font-weight: 400 800;
    font-display: swap; src: url('fonts/manrope-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
    font-family: 'Manrope'; font-style: normal; font-weight: 400 800;
    font-display: swap; src: url('fonts/manrope-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root {
    --display: 'Bricolage Grotesque', 'Arial Rounded MT Bold', sans-serif;
    --body: 'Manrope', system-ui, sans-serif;
    --club-serif: var(--display);
    --club-gold: #f3ca6d;
    --club-forest: #103b2c;
    --cream: #f1eddf;
    --lift: 0 2px 0 #d0cbb9, 0 6px 0 -2px #e1dbca, 0 16px 28px -14px #30452d4d;
}
body {
    background-color: var(--cream);
    background-image: radial-gradient(ellipse at 15% 0%, #fffaf1 0%, transparent 65%), radial-gradient(#25392112 .7px, transparent .7px);
    background-size: auto, 6px 6px;
    font-family: var(--body);
}
h1, h2, h3 { font-family: var(--display); text-transform: none; font-weight: 800; letter-spacing: -.045em; }
button, input, select, textarea { font-family: var(--body); }
.eyebrow { font-family: var(--body); font-weight: 800; }
.page-heading h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); line-height: 1.08; }
.page-heading > p { max-width: 45ch; text-wrap: pretty; }

/* One light source: upper-left highlights, a defined lower edge and soft falloff. */
.site-header {
    background: radial-gradient(ellipse at 15% 0%, #31583e 0%, transparent 62%), linear-gradient(#143d2d, #102b22);
    border-bottom: 1px solid #6b805a;
    box-shadow: inset 0 1px #ffffff1a, 0 4px 0 #102b221c, 0 12px 28px -18px #092c27;
}
.brand-ball, .login-mark {
    border-radius: 15px 15px 20px 20px;
    background: linear-gradient(140deg, #ffe8a8, #e9b94f 65%, #c1943f);
    border: 1px solid #ffe8a8; color: #173c2c;
    box-shadow: inset 0 2px 1px #fff4cc, inset 0 -3px 2px #ad7c3b, 0 4px 0 #886729, 0 9px 14px #071c2966;
    font-family: var(--display); font-weight: 800; font-style: normal;
    transform: rotate(-7deg); text-shadow: 0 1px #ffedb9;
}
.brand span:last-child { line-height: .98; letter-spacing: -.035em; text-transform: none; }
.brand em { color: #f6d780; letter-spacing: -.03em; }
.main-nav a { transition: color .16s, background-color .16s; }
.site-header .identity {
    display: inline-grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 1px;
    align-items: center;
    color: white;
    text-decoration: none;
    min-height: 44px;
}
.site-header .identity .player-avatar {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
}
.site-header .identity span {
    grid-column: 2;
    grid-row: 1;
    color: #c7d9ce;
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1.1;
}
.site-header .identity strong {
    grid-column: 2;
    grid-row: 2;
    font-size: 1rem;
    font-weight: 700;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.35;
    min-width: 0;
}
@media(max-width: 699px) {
    .site-header .identity {
        display: inline-grid !important;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-rows: auto auto;
        column-gap: 6px;
        row-gap: 0;
        align-items: center;
        text-align: left;
        min-height: 36px;
        min-width: 0;
    }
    .site-header .identity .player-avatar {
        width: 26px;
        height: 26px;
        font-size: 0.65rem;
    }
    .site-header .identity span {
        font-size: .56rem;
        line-height: 1.1;
    }
    .site-header .identity strong {
        font-size: .84rem;
        line-height: 1.35;
        min-width: 0;
    }
}
.button {
    transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
    border-radius: 12px; font-weight: 800;
}
.button-primary {
    background: linear-gradient(160deg, #ffe6a0, #f3c96b 70%, #ecc05d);
    color: #163c2b; border: 1px solid #e3bc67;
    box-shadow: inset 0 2px 0 #fff2cd, 0 4px 0 #b68b3c, 0 8px 15px #28402224;
    text-shadow: 0 1px #ffffff40;
}
.button-primary:hover { background: linear-gradient(160deg, #ffedb6, #f7d178); box-shadow: inset 0 2px #fff5d9, 0 4px 0 #b68b3c, 0 11px 18px #28402230; }
.button-primary:active { transform: translateY(3px); box-shadow: inset 0 1px #fff1c2, 0 1px 0 #b68b3c, 0 3px 5px #28402220; }
.button-secondary, .button-ghost { box-shadow: inset 0 1px #ffffff, 0 2px 0 #c8cdbf; }
.panel, .comparison-card, .choice-group, .history-card {
    background: linear-gradient(145deg, #fffef9, #f8f6ed);
    border: 1px solid #cfcebe; border-radius: 20px; box-shadow: var(--lift);
}

/* Home is the club's matchday cover. The scene occupies decorative space only. */
.dashboard-hero {
    position: relative; isolation: isolate; overflow: hidden;
    margin-bottom: 25px; padding: 34px 38px; min-height: 310px;
    border: 1px solid #78916a; border-radius: 24px;
    background: radial-gradient(ellipse at 0 0, #436647, transparent 60%), #113528;
    color: #fff9e9; box-shadow: inset 0 2px #ffffff25, 0 5px 0 #173928, 0 17px 34px -12px #173d3455;
    grid-template-columns: minmax(0, 1fr) minmax(180px, .5fr);
}
.dashboard-hero::before {
    content: ''; position: absolute; z-index: -1; inset: -28px -45px -30px 40%;
    background: url('stadium-club.webp') center / cover no-repeat;
    mask-image: linear-gradient(90deg, transparent, #000 30%);
    opacity: .88; pointer-events: none;
}
.dashboard-hero::after {
    content: ''; position: absolute; z-index: -1; inset: 0;
    background: linear-gradient(90deg, #123b2a 0%, #123b2adb 37%, transparent 73%);
    pointer-events: none;
}
.dashboard-hero h1 {
    max-width: 9ch; margin: 12px 0 14px;
    font-size: clamp(3.2rem, 6vw, 5.5rem); line-height: .99; letter-spacing: -.065em;
    color: #fff9e9; text-shadow: 0 3px 0 #0b2d26, 0 12px 26px #051f25aa;
}
.dashboard-hero .eyebrow { color: #ffe2a0; margin-bottom: 0; }
.club-motto { max-width: 31ch; font-size: .85rem; line-height: 1.65; color: #e3ebd8; margin: 0 0 18px; text-wrap: pretty; }
.dashboard-hero .dashboard-jornada-name { color: #ffe09b; font-size: 1.15rem; margin: 0; letter-spacing: -.02em; }
.dashboard-hero .dashboard-state {
    color: #fff9e9; position: relative; align-self: end; justify-self: end;
    padding: 12px 14px; border: 1px solid #d9e7ce55; border-radius: 12px;
    background: #102c24ed; box-shadow: inset 0 1px #fff4ca20, 0 6px 12px #021b2466;
    font-size: .75rem; max-width: 100%;
}
.dashboard-hero .dashboard-state time { color: inherit; }
.dashboard-personal {
    border: 1px solid #b7c6a8; background: linear-gradient(145deg, #f5f8e9, #e2ead5);
    border-radius: 20px; box-shadow: inset 0 2px #fffef0, 0 3px 0 #b9c8a9, 0 12px 26px -14px #40592e66;
}
.dashboard-personal h2 { font-size: clamp(1.5rem, 3vw, 2.15rem); line-height: 1.15; }
.dashboard-personal .eyebrow { font-size: .64rem; letter-spacing: .12em; }
.dashboard-personal .dashboard-primary-action {
    background: #194c36; color: #fff9e9; border-color: #184731;
    box-shadow: inset 0 2px #699573, 0 4px 0 #0d3124, 0 10px 18px #23492b40; text-shadow: none;
}
.dashboard-personal .dashboard-primary-action:active { box-shadow: inset 0 1px #699573, 0 1px 0 #0d3124; }
.dashboard-match {
    border-radius: 18px; border-color: #d0cfbe; background: linear-gradient(145deg, #fffef8, #f5f2e7);
    box-shadow: var(--lift); overflow: hidden;
}
.dashboard-match .text-link { min-height: 44px; display: inline-flex; align-items: center; }
.dashboard-people, .dashboard-standings { border-radius: 18px; box-shadow: 0 3px 0 #dad6c7, 0 12px 26px -18px #30452d4d; }
.dashboard-people-list > li { padding-block: 14px; }
.highlight-card { border: 1px solid #d7cda9; border-top: 3px solid #bea96c; background: linear-gradient(#fffae9, #f1ebd8); border-radius: 5px 5px 14px 14px; box-shadow: 0 3px 0 #d8cdb0; }

/* Raised tickets and embossed team tokens. Choices never tilt or auto-scroll. */
.page-jornada .match-card {
    position: relative; border: 1px solid #cacdbc; border-radius: 19px;
    background: radial-gradient(ellipse at 10% 0%, #ffffff 0%, transparent 65%), linear-gradient(135deg, #fffdf6, #f2f0e4);
    box-shadow: inset 0 2px 0 #ffffff, 0 3px 0 #c8c9b4, 0 7px 0 -2px #e4dfcd, 0 17px 30px -15px #26472f50;
}
.page-jornada .match-card.has-pick { border-color: #6e8b60; box-shadow: inset 3px 0 0 #628154, inset 0 2px #ffffff, 0 3px 0 #b2c1a1, 0 7px 0 -2px #e0e0c9, 0 17px 30px -15px #26472f50; }
.page-jornada .match-number { padding: 5px 8px; background: #e8eddc; border: 1px solid #c4ccb7; border-radius: 6px; font-size: .63rem; letter-spacing: .07em; box-shadow: inset 0 1px #fffef7; }
.page-jornada .fixture strong { display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; font-family: var(--display); font-weight: 800; letter-spacing: -.045em; }
.page-jornada .fixture strong > span:last-child { min-width: 0; font: inherit; color: inherit; }
.page-jornada .team-token {
    display: flex; align-items: center; justify-content: center; flex: none;
    width: 42px; height: 46px; border: 1px solid #87a783; border-radius: 13px 13px 17px 17px;
    background: linear-gradient(135deg, #5b8862, #1e583b 65%, #174631); color: #fff1bc;
    box-shadow: inset 1px 2px 1px #b2cfa08c, inset -2px -2px 1px #092f2e77, 2px 4px 0 #123e2c, 4px 8px 10px #18442930;
    font: 800 24px var(--display); text-shadow: 0 2px #123e2c; transform: rotate(-7deg);
}
.page-jornada .fixture-team:last-child .team-token {
    background: linear-gradient(135deg, #ffe8aa, #ebc169 65%, #c99c48); border-color: #cfb472; color: #4b3c21;
    box-shadow: inset 1px 2px 1px #fff3cf, inset -2px -2px 1px #9c732544, 2px 4px 0 #ae8742, 4px 8px 10px #59451e30;
    text-shadow: 0 1px #ffedc3; transform: rotate(7deg);
}
.page-jornada .pick-button {
    border: 1px solid #7d9272; border-radius: 11px; background: linear-gradient(#fffffa, #e9efde);
    color: #244b30; box-shadow: inset 0 2px #ffffff, 0 4px 0 #a8b79a, 0 7px 11px #20412315;
    transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease;
}
.page-jornada .pick-button:hover { background: linear-gradient(#f7ffed, #e4eed5); transform: none; }
.page-jornada .pick-button.is-selected {
    background: linear-gradient(140deg, #38704a, #194b34 70%); border-color: #1b4a31; color: #fffdf1;
    box-shadow: inset 0 2px #85a26a, inset 0 -2px #103a2d, 0 3px 0 #0f3626, 0 7px 12px #194b3436;
}
.page-jornada .pick-button:active { transform: translateY(3px); box-shadow: inset 0 1px #ffffff44, 0 1px 0 #79936b; }
.page-jornada .progress-card {
    background: radial-gradient(ellipse at 0 0, #426443, transparent 75%), #123e2b;
    border: 1px solid #719264; box-shadow: inset 0 2px #adc09644, 0 3px 0 #0f3428, 0 12px 22px -12px #16473370;
}
.page-jornada .entry-dot { border-radius: 10px; box-shadow: inset 0 1px #ffffff80, 0 2px 0 #b5c0a7; }
.page-jornada .entry-dot.is-filled { background: #245338; box-shadow: inset 0 1px #a4bb8744, 0 2px 0 #103a2d; }
.page-jornada .jornada-hero h1 { letter-spacing: -.055em; }
.page-jornada .sticky-action { background: #f7f3e7; color: #182f23; box-shadow: inset 0 2px #ffffff, 0 -3px 0 #d4c18c, 0 -12px 32px #263b291c; }
.page-jornada .sticky-action strong { color: #182f23; }
.page-jornada .sticky-action span { color: #435443; }
.page-jornada .save-feedback { margin-top: 5px; }

/* Shared glory gets the same depth and finish for every tied winner. */
.competition-honors.is-final, .history-honors { background: radial-gradient(circle at 10% 20%, rgba(255, 215, 0, 0.35) 0%, transparent 25%), radial-gradient(circle at 90% 15%, rgba(239, 68, 68, 0.2) 0%, transparent 25%), radial-gradient(circle at 50% 85%, rgba(34, 197, 94, 0.2) 0%, transparent 25%), radial-gradient(ellipse at 15% 0, #fff9d4, transparent 70%), linear-gradient(120deg, #f4db98, #e4cf92); border-color: #c3ad6b; box-shadow: inset 0 2px #fff3c6, 0 4px 0 #bdab74, 0 17px 30px -16px #614d2155; }
.competition-honors.is-final .honor-card { background: linear-gradient(135deg, #fff8de, #ebd598); border-color: #bdab75; box-shadow: inset 0 2px #fffbea, 0 3px 0 #b6a46f, 0 8px 14px #755d2822; }
.honor-party-banner { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.honor-party-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; background: linear-gradient(135deg, #19442a, #0d2b23); color: #fef3c7; border: 1.5px solid #d4a029; border-radius: 999px; font-size: .84rem; font-weight: 800; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); }
.competition-panel .standings-table tr.is-first { background: linear-gradient(90deg, #fff3c4, #fde68a 45%, #fffbeb); box-shadow: inset 4px 0 #d97706, inset 0 1px 0 #fffde6, 0 2px 6px rgba(197, 154, 45, 0.25); }
.competition-panel .standings-table tr.is-first.is-self { background: linear-gradient(90deg, #fef3c7, #e6f7ec 45%, #f6fbf7); box-shadow: inset 5px 0 #1b8a43, inset 0 1px 0 #fffde6, 0 2px 6px rgba(197, 154, 45, 0.25); }
.competition-panel .standings-table tr.is-first td:first-child { color: #854d0e; font-weight: 900; }
.admin-grid a { padding: 22px; border: 1px solid #cbd0be; border-radius: 20px; box-shadow: var(--lift); background: linear-gradient(140deg, #fffdf7, #f2f1e6); }
.admin-grid a:hover { border-color: #729063; }
.admin-grid .admin-mark { display: grid; place-items: center; width: 42px; height: 44px; margin-bottom: 20px; border: 1px solid #a8b799; border-radius: 13px; font: 800 18px var(--display); color: #315738; background: linear-gradient(#f8f8df, #dce7cb); box-shadow: inset 0 2px #fffff2, 0 3px 0 #9aaf87; }

/* Admin Overview / Cabina de Control: Featured Active Jornada Hero Card */
.admin-overview .featured-panel,
.panel.featured-panel {
    background: radial-gradient(ellipse at 15% 15%, #235841, #103426 70%), #103426 !important;
    border: 1px solid #5a7d65 !important;
    border-radius: 20px !important;
    color: #fff9e9 !important;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15), 0 4px 0 #0b241a, var(--lift) !important;
    padding: clamp(1.4rem, 3.5vw, 2.2rem) !important;
}
.admin-overview .featured-panel .eyebrow,
.panel.featured-panel .eyebrow {
    color: #f7d277 !important;
    font-weight: 800 !important;
    letter-spacing: .12em !important;
    font-size: .7rem !important;
    text-transform: uppercase !important;
    margin-bottom: 8px !important;
}
.admin-overview .featured-panel h2,
.panel.featured-panel h2 {
    color: #ffffff !important;
    font-size: clamp(2rem, 3.5vw, 2.7rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -.03em !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
    margin: .35rem 0 .55rem !important;
}
.admin-overview .featured-panel p,
.panel.featured-panel p {
    color: #d1e4d8 !important;
    font-size: .95rem !important;
    margin-bottom: 1.2rem !important;
}
.admin-overview .featured-panel p b,
.panel.featured-panel p b {
    color: #ffffff !important;
    font-weight: 800 !important;
}
.admin-overview .featured-panel .kpi-grid,
.panel.featured-panel .kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    margin: 1.5rem 0 !important;
    gap: .75rem !important;
}
.admin-overview .featured-panel .kpi-grid div,
.panel.featured-panel .kpi-grid div {
    display: grid !important;
    background: rgba(0, 0, 0, 0.38) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 12px !important;
    padding: .85rem !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25) !important;
    text-align: center !important;
}
.admin-overview .featured-panel .kpi-grid strong,
.panel.featured-panel .kpi-grid strong {
    overflow: hidden !important;
    color: #ffd875 !important;
    font-family: var(--display) !important;
    font-size: 1.6rem !important;
    text-overflow: ellipsis !important;
    text-transform: uppercase !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
    line-height: 1.1 !important;
}
.admin-overview .featured-panel .kpi-grid span,
.panel.featured-panel .kpi-grid span {
    color: #a8cfb7 !important;
    font-size: .74rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    margin-top: 4px !important;
}

/* El Pozo Maldito: Progressive Jackpot Marquee */
.jackpot-marquee {
    background: linear-gradient(90deg, #78350f, #b45309 30%, #d97706 50%, #b45309 70%, #78350f);
    border-bottom: 2px solid #fde047;
    box-shadow: 0 4px 14px rgba(180, 83, 9, 0.45);
    color: #ffffff;
    padding: 10px 16px;
    text-align: center;
    position: relative;
    z-index: 10;
}
.jackpot-marquee-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px 12px;
    flex-wrap: wrap;
    font-size: .88rem;
}
.jackpot-marquee strong {
    color: #fef08a;
    font: 800 1rem var(--display);
    letter-spacing: .04em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.jackpot-marquee em {
    font-style: normal;
    font-weight: 800;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.35);
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid rgba(254, 240, 138, 0.5);
}

/* The entrance: a collectible pass beside the miniature stadium. */
.page-login { background: radial-gradient(ellipse at 20% 25%, #396148 0%, transparent 60%), #0d2b23; color: #fff8e8; }
.page-login .shell-auth { width: min(1200px, calc(100% - 64px)); min-height: calc(100svh - 90px); padding-block: 44px; }
.login-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 410px); align-items: center; gap: 70px; width: 100%; }
.login-scene { position: relative; min-height: 650px; isolation: isolate; }
.login-scene > .eyebrow { color: #f4d891; font-size: .67rem; letter-spacing: .15em; }
.login-scene h2 { position: relative; z-index: 1; font-size: clamp(3.5rem, 5.2vw, 4.6rem); line-height: 1.02; letter-spacing: -.065em; color: #fff9e9; margin: 24px 0; text-shadow: 0 4px #0e3628, 0 16px 26px #092d2780; }
.login-scene h2 em { color: #ffe099; font-style: normal; }
.club-pitch { position: absolute; inset: 200px -60px 0 -70px; background: url('stadium-club.webp') center / cover no-repeat; z-index: -1; mask-image: radial-gradient(ellipse 66% 64% at 50% 52%, #000 43%, transparent 82%); }
.login-scene-caption { position: absolute; bottom: -4px; left: 0; max-width: 33ch; font-size: .75rem; line-height: 1.8; color: #d5e1cf; }
.page-login .login-card {
    width: 100%; padding: 32px; border: 1px solid #efe2b7; border-radius: 24px;
    background: radial-gradient(ellipse at 0 0, #ffffff 0%, transparent 75%), linear-gradient(140deg, #fff9e9, #eee7d4);
    box-shadow: inset 0 3px #ffffff, inset 0 -2px #dacdab, 5px 7px 0 #afaa86, 10px 13px 0 -3px #61745b, 0 35px 70px #031e2799;
    color: var(--ink); transform: none;
}
.page-login .login-card::before { top: 0; right: 0; width: 160px; height: 8px; border: 0; border-radius: 0 0 0 10px; background: linear-gradient(90deg, #a9bb83, #e6c771); pointer-events: none; }
.login-card h1 { font-family: var(--display); font-weight: 800; letter-spacing: -.06em; text-transform: none; font-size: 3.3rem; line-height: 1.03; margin-top: 12px; }
.login-card .eyebrow { margin-top: 26px; font-size: .65rem; }
.login-mark { width: 54px; height: 58px; }
.page-login .login-card .fine-print { line-height: 1.6; padding-top: 18px; border-top: 1px dashed #c4bfa8; }
.page-login input { background: #fffef8; box-shadow: inset 0 2px 4px #34472b13, 0 1px #ffffff; border: 1px solid #819475; }
.page-login .site-footer { color: #d0dbc9; border-color: #ffffff22; }
.page-login .notice { color: var(--ink); width: 100%; }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .dashboard-match, .admin-grid a { transition: transform .18s ease, box-shadow .18s ease; }
    .dashboard-match:hover, .admin-grid a:hover { transform: translateY(-2px); }
}
@media (max-width: 1000px) {
    .login-layout { gap: 38px; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); }
    .login-scene h2 { font-size: 3.5rem; }
}
@media (max-width: 899px) {
    .login-layout { display: block; max-width: 430px; margin: auto; }
    .login-scene { display: none; }
    .page-login .shell-auth { padding-block: 32px; }
    .page-login .login-card { transform: none; }
}
@media (max-width: 699px) {
    .brand span:last-child { font-size: 1.12rem; }
    .dashboard-hero { padding: 24px; min-height: 0; grid-template-columns: 1fr; gap: 18px; border-radius: 20px; margin-bottom: 22px; }
    .dashboard-hero::before { inset: -10px -115px -5px 12%; opacity: .55; }
    .dashboard-hero::after { background: linear-gradient(90deg, #123b2aed 0%, #123b2a99 50%, #123b2a11 100%); }
    .dashboard-hero h1 { font-size: 2.75rem; max-width: 8.5ch; margin: 10px 0 12px; line-height: 1.04; }
    .club-motto { font-size: .77rem; max-width: 26ch; margin-bottom: 12px; }
    .dashboard-hero .dashboard-state { justify-self: start; padding: 8px 10px; font-size: .66rem; align-items: flex-start; }
    .dashboard-personal { padding: 19px; }
    .dashboard-personal .dashboard-primary-action { width: 100%; min-height: 52px; justify-content: center; }
    .page-jornada .jornada-hero h1 { font-size: 1.85rem; line-height: 1.05; }
    .page-jornada .fixture strong { gap: 7px; font-size: 1.25rem; }
    .page-jornada .team-token { width: 27px; height: 32px; font-size: 18px; border-radius: 9px 9px 12px 12px; }
    .page-jornada .match-meta { margin-bottom: 10px; }
    .page-jornada .match-list { gap: 21px; }
    .page-jornada .pick-button { font-size: .79rem; }
    .page-login .shell-auth { width: calc(100% - 40px); }
    .page-login .login-card { padding: 26px; box-shadow: inset 0 3px #ffffff, 0 5px 0 #bcb28b, 0 10px 0 -3px #697b5c, 0 26px 45px #021d2777; }
    .login-card h1 { font-size: 2.85rem; }
    .page-heading h1 { font-size: 2.5rem; }
    .site-footer { padding-block: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; }
    .button, .main-nav a, .pick-button, .entry-dot, .admin-grid a, .dashboard-match { transition: none !important; animation: none !important; }
    .button:active, .pick-button:active, .entry-dot:hover, .admin-grid a:hover, .dashboard-match:hover { transform: none !important; }
}

/* Mi quiniela: the same stadium, built around the next decision. */
.page-jornada .jornada-hero {
    position: relative; isolation: isolate; overflow: hidden;
    padding: 28px 32px; margin-bottom: 28px; min-height: 215px;
    border: 1px solid #708869; border-radius: 22px;
    background: #103b2b; color: #fff9e9;
    box-shadow: inset 0 2px #e9f3cc33, 0 4px 0 #153b2b, 0 16px 30px -14px #123a3455;
}
.page-jornada .jornada-hero::before {
    content: ''; position: absolute; z-index: -2; inset: -40px -10px -60px 40%;
    background: url('stadium-club.webp') center / cover no-repeat;
    pointer-events: none;
}
.page-jornada .jornada-hero::after {
    content: ''; position: absolute; z-index: -1; inset: 0;
    background: linear-gradient(90deg, #103b2b 0%, #103b2be8 38%, #103b2b15 85%);
    pointer-events: none;
}
.page-jornada .jornada-hero > div { max-width: 68%; }
.page-jornada .jornada-hero h1 { color: #fff9e9; font-size: clamp(2.5rem, 4.5vw, 3.6rem); line-height: 1.04; text-shadow: 0 3px #0b3026; }
.page-jornada .jornada-hero .eyebrow { color: #ffe09b; }
.page-jornada .jornada-hero .deadline,
.page-jornada .jornada-hero .sharing-note,
.page-jornada .entry-invitation { color: #eef3df; }
.page-jornada .jornada-hero .status-badge { box-shadow: inset 0 1px #ffffff88, 0 3px 0 #14372b, 0 8px 16px #09271e66; }
.page-jornada .match-card { overflow: hidden; border-radius: 20px; }
.page-jornada .match-meta {
    margin: -20px -20px 24px; padding: 13px 20px;
    background: linear-gradient(135deg, #294f39, #143b2b);
    border-bottom: 1px solid #587451; color: #fff5d7;
    box-shadow: inset 0 2px #b1c58c44;
}
.page-jornada .match-number {
    color: #f9e2a9; border: 1px solid #a8b68366;
    background: #163b2b; box-shadow: inset 0 1px #e5eec433, 0 2px #092c20;
}
.page-jornada .match-stadium { color: #e0e9d3; }
.page-jornada .match-meta time { color: #f6e8c5; }
.page-jornada .fixture { align-items: center; min-height: 92px; margin-bottom: 24px; }
.page-jornada .fixture-team { gap: 12px; }
.page-jornada .fixture strong { gap: 15px; font-size: 1.9rem; line-height: 1.08; }
.page-jornada .fixture-versus { font: 800 .8rem var(--display); color: #58694e; text-transform: uppercase; letter-spacing: .02em; }
.page-jornada .team-token { width: 54px; height: 60px; font-size: 31px; border-radius: 17px 17px 22px 22px; }
.page-jornada .pick-form { padding: 14px; border: 1px solid #d2d7c4; border-radius: 16px; background: #e8eddc; box-shadow: inset 0 2px 5px #344b2420, 0 1px #ffffff; }
.page-jornada .pick-button { font-size: .95rem; min-height: 68px; }
.page-jornada .personal-result { padding-top: 14px; margin-top: 10px; }
.page-jornada .progress-card { border-radius: 18px; }
.page-jornada .entry-map-panel { padding: 8px 14px 14px; border: 1px solid #c7cfb8; border-radius: 16px; background: linear-gradient(140deg, #fffef6, #e9eddb); box-shadow: inset 0 2px #ffffff, 0 3px 0 #bec9ac, 0 10px 22px -14px #36513266; }
.page-jornada .entry-map-key { line-height: 1.6; }
@media (min-width: 700px) {
    .page-jornada .entry-layout .match-list { grid-template-columns: minmax(0, 1fr); gap: 26px; }
    .page-jornada .match-card { padding: 20px 24px 14px; }
    .page-jornada .match-meta { margin-inline: -24px; padding-inline: 24px; }
}
@media (min-width: 1100px) {
    .page-jornada .entry-layout { grid-template-columns: 250px minmax(0, 1fr); gap: 32px; }
    .page-jornada .entry-map-panel { margin-top: 18px; }
    .page-jornada .entry-guide-foot { border: 0; padding: 0 8px; }
}
@media (max-width: 699px) {
    .page-jornada .jornada-hero { min-height: 0; padding: 14px 14px 12px; margin-bottom: 16px; border-radius: 16px; gap: 7px; }
    .page-jornada .jornada-hero > div { max-width: none; min-width: 0; }
    .page-jornada .jornada-hero::before { inset: -8px -115px -10px 15%; opacity: .8; }
    .page-jornada .jornada-hero::after { background: linear-gradient(90deg, #103b2bf5, #103b2be0 58%, #103b2b30); }
    .page-jornada .jornada-hero h1 { font-size: 1.75rem; line-height: 1.05; }
    .page-jornada .jornada-hero .deadline { font-size: .68rem; }
    .page-jornada .jornada-hero .sharing-note { font-size: .63rem; }
    .page-jornada .match-card { padding: 14px 14px 8px; border-radius: 18px; }
    .page-jornada .match-meta { margin: -14px -14px 13px; padding: 10px 14px; gap: 4px 8px; }
    .page-jornada .fixture { min-height: 52px; margin-bottom: 15px; gap: 8px; }
    .page-jornada .fixture-team { gap: 7px; }
    .page-jornada .fixture strong { font-size: 1.25rem; gap: 8px; }
    .page-jornada .team-token { width: 30px; height: 36px; font-size: 20px; border-radius: 10px 10px 14px 14px; }
    .page-jornada .pick-form { padding: 8px; gap: 6px; border-radius: 12px; }
    .page-jornada .pick-button { min-height: 64px; font-size: .76rem; gap: 5px; }
    .page-jornada .personal-result { margin-top: 4px; padding-top: 8px; }
    .page-jornada .entry-map-panel { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
    .page-jornada .entry-map-panel[open] { padding: 0 0 8px; }
}

/* UI/UX Coherence Enhancements */
.fixture, .fixture-team, .match-card strong, .dashboard-fixture {
    hyphens: none;
    -webkit-hyphens: none;
}

.nav-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.88rem;
    font-weight: 700;
    color: #235238;
    text-decoration: none;
    padding: 8px 14px;
    min-height: 40px;
    border-radius: 8px;
    background: #e6ede0;
    border: 1px solid #cad6c2;
    transition: background-color 0.15s ease, transform 0.12s ease;
    margin-bottom: 8px;
    align-self: flex-start;
}
.nav-back-link:hover {
    background: #d9e6d1;
    color: #123e2b;
    transform: translateX(-2px);
}

.time-urgency {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 700;
    font-size: 0.82rem;
    padding: 3px 8px;
    border-radius: 6px;
}
.time-urgency.urgency-imminent {
    background: #fde8e8;
    color: #9b1c1c;
    border: 1px solid #f8b4b4;
    font-weight: 800;
}
.time-urgency.urgency-urgent {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
}
.time-urgency.urgency-normal {
    background: #eef2eb;
    color: #274b34;
}

.match-badge-tag {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.match-badge-tag.is-final {
    background: #143e2c;
    color: #ffe6a0;
}
.match-badge-tag.is-scheduled {
    background: #eaf0e4;
    color: #274b34;
    border: 1px solid #c7d8c0;
}
.match-badge-tag.is-in-play {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
}
.match-badge-tag.is-pending {
    background: #edf0ec;
    color: #61705f;
}

.login-assistance {
    margin-top: 20px;
    padding: 14px 16px;
    background: #f4f6ef;
    border: 1px solid #cfd9c6;
    border-radius: 12px;
    font-size: 0.82rem;
    line-height: 1.45;
    color: #384e3e;
}
.login-assistance strong {
    display: block;
    color: #173f2e;
    margin-bottom: 4px;
    font-size: 0.86rem;
}
.login-assistance p {
    margin: 0;
}

.onboarding-welcome-card {
    background: linear-gradient(140deg, #fffbee, #fef5d8);
    border: 2px solid #e2c069;
    border-radius: 16px;
    padding: 18px 22px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px #b68b3c18;
}
.onboarding-welcome-card h2 {
    color: #4b3607;
    font-size: 1.25rem;
    margin-bottom: 6px;
}
.onboarding-welcome-card p {
    color: #634a10;
    font-size: 0.9rem;
    line-height: 1.45;
    margin: 0;
}

.password-field-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
.password-field-wrapper input {
    padding-right: 46px;
}
.password-toggle-btn {
    position: absolute;
    right: 8px;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 1.1rem;
    padding: 6px;
    border-radius: 6px;
    color: #556852;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    min-width: 36px;
}
.password-toggle-btn:hover {
    background: #e9efe4;
    color: #123e2b;
}
.password-length-helper {
    font-size: 0.78rem;
    margin-top: 4px;
    color: #5b6e58;
    transition: color 0.15s ease;
}
.password-length-helper.is-valid {
    color: #1c6b3e;
    font-weight: 700;
}
.password-length-helper.is-invalid {
    color: #a03030;
}

.button-whatsapp, [data-password-whatsapp], [data-share-copy-text] {
    background: #25d366;
    color: #0b3419;
    border: 1px solid #1fa851;
    font-weight: 700;
    box-shadow: 0 2px 0 #1b8a43;
}
.button-whatsapp:hover, [data-password-whatsapp]:hover, [data-share-copy-text]:hover {
    background: #2ee672;
    color: #05200e;
}
.share-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(145deg, #25d366, #1fa851);
    color: #052912;
    border: 1px solid #17833f;
    border-radius: 12px;
    padding: 10px 18px;
    font-weight: 800;
    font-size: 0.95rem;
    text-decoration: none;
    box-shadow: 0 3px 0 #125e2e, 0 6px 16px #125e2e28;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.share-cta-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 0 #125e2e, 0 8px 20px #125e2e38;
}
.share-cta-button:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #125e2e;
}

@media (max-width: 699px) {
    .login-assistance { padding: 12px 14px; font-size: 0.78rem; }
    .onboarding-welcome-card { padding: 14px 16px; margin-bottom: 18px; }
    .onboarding-welcome-card h2 { font-size: 1.15rem; }
    .onboarding-welcome-card p { font-size: 0.82rem; }
    .nav-back-link { font-size: 0.82rem; padding: 7px 12px; }
}

/* ==========================================================================
   EXPERIENCE LAYER: COUCH REMOTE DOCK, ARCADE BUTTONS & WORKBENCH
   ========================================================================== */

/* 1. Mobile couch remote floating dock (≤ 768px) */
@media (min-width: 769px) {
    .mobile-couch-dock {
        display: none !important;
    }
}

@media (max-width: 768px) {
    body:not(.page-jornada) {
        padding-bottom: calc(68px + env(safe-area-inset-bottom, 12px));
    }

    .page-jornada .mobile-couch-dock {
        display: none !important;
    }

    .mobile-couch-dock {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 90;
        background: rgba(8, 28, 19, 0.95);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-top: 1.5px solid rgba(246, 212, 120, 0.45);
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12);
        padding: 6px 12px max(8px, env(safe-area-inset-bottom, 8px));
    }

    .couch-dock-inner {
        display: flex;
        justify-content: space-around;
        align-items: center;
        max-width: 600px;
        margin: 0 auto;
        gap: 6px;
    }

    .couch-dock-link {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 48px;
        color: #a4bb9f;
        text-decoration: none;
        font-size: 0.72rem;
        font-weight: 700;
        transition: color 0.15s, transform 0.12s cubic-bezier(0.2, 0.8, 0.4, 1);
        border-radius: 10px;
        position: relative;
    }

    .couch-dock-link:active {
        transform: scale(0.92);
    }

    .couch-dock-link:hover,
    .couch-dock-link:focus-visible {
        color: #ffd875;
    }

    .couch-dock-link.is-active {
        color: #ffd875;
        font-weight: 800;
        text-shadow: 0 0 10px rgba(255, 216, 117, 0.45);
    }

    .couch-dock-link .dock-icon {
        font-size: 1.25rem;
        line-height: 1;
        margin-bottom: 2px;
        transition: transform 0.15s ease;
    }

    .couch-dock-link.is-active .dock-icon {
        transform: scale(1.15);
        filter: drop-shadow(0 0 5px rgba(243, 202, 109, 0.7));
    }
}

/* 2. Group opinion consensus meter */
.match-opinion-meter {
    margin: 10px 12px 6px;
    padding: 8px 10px;
    background: rgba(16, 43, 30, 0.06);
    border: 1px solid rgba(113, 146, 100, 0.3);
    border-radius: 10px;
}

.opinion-bar {
    display: flex;
    height: 8px;
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.15);
    margin-bottom: 6px;
}

.opinion-seg {
    height: 100%;
    transition: width 0.3s ease;
}

.opinion-seg.is-local {
    background: linear-gradient(90deg, #1fa851, #25d366);
}

.opinion-seg.is-empate {
    background: linear-gradient(90deg, #c99c48, #ffd257);
}

.opinion-seg.is-visita {
    background: linear-gradient(90deg, #3269a8, #4a90e2);
}

.opinion-seg[data-pct="0"] { width: 0%; display: none; }
.opinion-seg[data-pct="1"] { width: 1%; }
.opinion-seg[data-pct="2"] { width: 2%; }
.opinion-seg[data-pct="3"] { width: 3%; }
.opinion-seg[data-pct="4"] { width: 4%; }
.opinion-seg[data-pct="5"] { width: 5%; }
.opinion-seg[data-pct="6"] { width: 6%; }
.opinion-seg[data-pct="7"] { width: 7%; }
.opinion-seg[data-pct="8"] { width: 8%; }
.opinion-seg[data-pct="9"] { width: 9%; }
.opinion-seg[data-pct="10"] { width: 10%; }
.opinion-seg[data-pct="11"] { width: 11%; }
.opinion-seg[data-pct="12"] { width: 12%; }
.opinion-seg[data-pct="13"] { width: 13%; }
.opinion-seg[data-pct="14"] { width: 14%; }
.opinion-seg[data-pct="15"] { width: 15%; }
.opinion-seg[data-pct="16"] { width: 16%; }
.opinion-seg[data-pct="17"] { width: 17%; }
.opinion-seg[data-pct="18"] { width: 18%; }
.opinion-seg[data-pct="19"] { width: 19%; }
.opinion-seg[data-pct="20"] { width: 20%; }
.opinion-seg[data-pct="21"] { width: 21%; }
.opinion-seg[data-pct="22"] { width: 22%; }
.opinion-seg[data-pct="23"] { width: 23%; }
.opinion-seg[data-pct="24"] { width: 24%; }
.opinion-seg[data-pct="25"] { width: 25%; }
.opinion-seg[data-pct="26"] { width: 26%; }
.opinion-seg[data-pct="27"] { width: 27%; }
.opinion-seg[data-pct="28"] { width: 28%; }
.opinion-seg[data-pct="29"] { width: 29%; }
.opinion-seg[data-pct="30"] { width: 30%; }
.opinion-seg[data-pct="31"] { width: 31%; }
.opinion-seg[data-pct="32"] { width: 32%; }
.opinion-seg[data-pct="33"] { width: 33%; }
.opinion-seg[data-pct="34"] { width: 34%; }
.opinion-seg[data-pct="35"] { width: 35%; }
.opinion-seg[data-pct="36"] { width: 36%; }
.opinion-seg[data-pct="37"] { width: 37%; }
.opinion-seg[data-pct="38"] { width: 38%; }
.opinion-seg[data-pct="39"] { width: 39%; }
.opinion-seg[data-pct="40"] { width: 40%; }
.opinion-seg[data-pct="41"] { width: 41%; }
.opinion-seg[data-pct="42"] { width: 42%; }
.opinion-seg[data-pct="43"] { width: 43%; }
.opinion-seg[data-pct="44"] { width: 44%; }
.opinion-seg[data-pct="45"] { width: 45%; }
.opinion-seg[data-pct="46"] { width: 46%; }
.opinion-seg[data-pct="47"] { width: 47%; }
.opinion-seg[data-pct="48"] { width: 48%; }
.opinion-seg[data-pct="49"] { width: 49%; }
.opinion-seg[data-pct="50"] { width: 50%; }
.opinion-seg[data-pct="51"] { width: 51%; }
.opinion-seg[data-pct="52"] { width: 52%; }
.opinion-seg[data-pct="53"] { width: 53%; }
.opinion-seg[data-pct="54"] { width: 54%; }
.opinion-seg[data-pct="55"] { width: 55%; }
.opinion-seg[data-pct="56"] { width: 56%; }
.opinion-seg[data-pct="57"] { width: 57%; }
.opinion-seg[data-pct="58"] { width: 58%; }
.opinion-seg[data-pct="59"] { width: 59%; }
.opinion-seg[data-pct="60"] { width: 60%; }
.opinion-seg[data-pct="61"] { width: 61%; }
.opinion-seg[data-pct="62"] { width: 62%; }
.opinion-seg[data-pct="63"] { width: 63%; }
.opinion-seg[data-pct="64"] { width: 64%; }
.opinion-seg[data-pct="65"] { width: 65%; }
.opinion-seg[data-pct="66"] { width: 66%; }
.opinion-seg[data-pct="67"] { width: 67%; }
.opinion-seg[data-pct="68"] { width: 68%; }
.opinion-seg[data-pct="69"] { width: 69%; }
.opinion-seg[data-pct="70"] { width: 70%; }
.opinion-seg[data-pct="71"] { width: 71%; }
.opinion-seg[data-pct="72"] { width: 72%; }
.opinion-seg[data-pct="73"] { width: 73%; }
.opinion-seg[data-pct="74"] { width: 74%; }
.opinion-seg[data-pct="75"] { width: 75%; }
.opinion-seg[data-pct="76"] { width: 76%; }
.opinion-seg[data-pct="77"] { width: 77%; }
.opinion-seg[data-pct="78"] { width: 78%; }
.opinion-seg[data-pct="79"] { width: 79%; }
.opinion-seg[data-pct="80"] { width: 80%; }
.opinion-seg[data-pct="81"] { width: 81%; }
.opinion-seg[data-pct="82"] { width: 82%; }
.opinion-seg[data-pct="83"] { width: 83%; }
.opinion-seg[data-pct="84"] { width: 84%; }
.opinion-seg[data-pct="85"] { width: 85%; }
.opinion-seg[data-pct="86"] { width: 86%; }
.opinion-seg[data-pct="87"] { width: 87%; }
.opinion-seg[data-pct="88"] { width: 88%; }
.opinion-seg[data-pct="89"] { width: 89%; }
.opinion-seg[data-pct="90"] { width: 90%; }
.opinion-seg[data-pct="91"] { width: 91%; }
.opinion-seg[data-pct="92"] { width: 92%; }
.opinion-seg[data-pct="93"] { width: 93%; }
.opinion-seg[data-pct="94"] { width: 94%; }
.opinion-seg[data-pct="95"] { width: 95%; }
.opinion-seg[data-pct="96"] { width: 96%; }
.opinion-seg[data-pct="97"] { width: 97%; }
.opinion-seg[data-pct="98"] { width: 98%; }
.opinion-seg[data-pct="99"] { width: 99%; }
.opinion-seg[data-pct="100"] { width: 100%; }

.opinion-legend {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.72rem;
    color: #4b6046;
    font-weight: 700;
}

.opinion-legend span b {
    color: #1b3d2b;
}

.opinion-total {
    font-size: 0.68rem;
    color: #657b60;
    font-weight: 600;
}

/* 3. Arcade tactile buttons depth & physical gameboard enhancement */
.page-jornada .match-card {
    border: 1px solid #9fb396;
    border-radius: 18px;
    background: linear-gradient(145deg, #ffffff 15%, #f4f6ee 100%);
    box-shadow: inset 0 2px 0 #ffffff, 0 4px 0 #b3c4a8, 0 12px 24px -10px rgba(18, 62, 43, 0.18);
}

.page-jornada .match-card.has-pick {
    border-color: #6d9675;
    box-shadow: inset 0 2px 0 #ffffff, inset 4px 0 0 #288d4d, 0 4px 0 #9eb592, 0 12px 24px -10px rgba(18, 62, 43, 0.2);
}

.page-jornada .match-meta .match-number {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    color: #ffeaa0;
    font-weight: 800;
    font-family: var(--display, 'Bricolage Grotesque', sans-serif);
    border: 1px solid #6c8f5d;
    border-radius: 8px;
    background: linear-gradient(140deg, #245233, #0f3420);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 2px 0 #082114;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    letter-spacing: 0.02em;
}

.page-jornada .pick-button {
    font-family: var(--display, 'Bricolage Grotesque', sans-serif);
    font-weight: 800;
    border-radius: 12px;
    letter-spacing: -0.01em;
    position: relative;
    cursor: pointer;
    box-shadow: inset 0 2px 0 #ffffff, 0 4px 0 #79936b, 0 8px 14px rgba(18, 62, 43, 0.15);
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}

.page-jornada .pick-button:active {
    transform: translateY(3px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 0 #79936b;
}

/* LOCAL: Lush Stadium Pitch Green */
.page-jornada .pick-button[value="LOCAL"] {
    background: linear-gradient(180deg, #ffffff 0%, #edf7f0 100%);
    border: 1.5px solid #82aa91;
    color: #174d2b;
    box-shadow: inset 0 2px 0 #ffffff, 0 4px 0 #5a8569, 0 8px 14px rgba(22, 60, 38, 0.14);
}
.page-jornada .pick-button[value="LOCAL"]::before {
    border-color: #5a8569;
    background: #e3f2e7;
}
.page-jornada .pick-button[value="LOCAL"]:hover:not(:disabled) {
    background: linear-gradient(180deg, #f7fdf9 0%, #e1f2e6 100%);
    border-color: #4b8861;
}
.page-jornada .pick-button[value="LOCAL"].is-selected {
    background: linear-gradient(180deg, #248c4e 0%, #156235 55%, #0e4826 100%);
    border-color: #0c3e21;
    color: #ffffff;
    box-shadow: inset 0 2px 1px rgba(255, 255, 255, 0.4), 0 4px 0 #072b16, 0 0 16px rgba(36, 140, 78, 0.5), 0 8px 16px rgba(14, 72, 38, 0.35);
}
.page-jornada .pick-button[value="LOCAL"].is-selected::before {
    background: #f8c847;
    color: #0e4826;
    border-color: #f8c847;
    font-weight: 900;
}
.page-jornada .pick-button[value="LOCAL"]:active {
    transform: translateY(3px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 0 #5a8569;
}
.page-jornada .pick-button[value="LOCAL"].is-selected:active {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 0 #072b16, 0 0 12px rgba(36, 140, 78, 0.4);
}

/* EMPATE: Aztec Gold / Stadium Bronze */
.page-jornada .pick-button[value="EMPATE"],
.page-jornada .pick-button.pick-draw {
    background: linear-gradient(180deg, #ffffff 0%, #faf3e5 100%);
    border: 1.5px solid #baa170;
    color: #4d3a14;
    box-shadow: inset 0 2px 0 #ffffff, 0 4px 0 #937d50, 0 8px 14px rgba(77, 58, 20, 0.14);
}
.page-jornada .pick-button[value="EMPATE"]::before,
.page-jornada .pick-button.pick-draw::before {
    border-color: #937d50;
    background: #fdf2d8;
}
.page-jornada .pick-button[value="EMPATE"]:hover:not(:disabled),
.page-jornada .pick-button.pick-draw:hover:not(:disabled) {
    background: linear-gradient(180deg, #fdfbf7 0%, #f4e9d0 100%);
    border-color: #a48746;
}
.page-jornada .pick-button[value="EMPATE"].is-selected,
.page-jornada .pick-button.pick-draw.is-selected {
    background: linear-gradient(180deg, #e6a735 0%, #c4831d 55%, #945f0e 100%);
    border-color: #724707;
    color: #1b2e1e;
    box-shadow: inset 0 2px 1px rgba(255, 255, 255, 0.5), 0 4px 0 #593604, 0 0 16px rgba(230, 167, 53, 0.55), 0 8px 16px rgba(148, 95, 14, 0.35);
}
.page-jornada .pick-button[value="EMPATE"].is-selected::before,
.page-jornada .pick-button.pick-draw.is-selected::before {
    background: #113824;
    color: #f8c847;
    border-color: #113824;
    font-weight: 900;
}
.page-jornada .pick-button[value="EMPATE"]:active,
.page-jornada .pick-button.pick-draw:active {
    transform: translateY(3px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 0 #937d50;
}
.page-jornada .pick-button[value="EMPATE"].is-selected:active,
.page-jornada .pick-button.pick-draw.is-selected:active {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 0 #593604, 0 0 12px rgba(230, 167, 53, 0.4);
}

/* VISITA: Electric Stadium Cobalt / Sky Blue */
.page-jornada .pick-button[value="VISITA"] {
    background: linear-gradient(180deg, #ffffff 0%, #ecf3fc 100%);
    border: 1.5px solid #89adce;
    color: #163d68;
    box-shadow: inset 0 2px 0 #ffffff, 0 4px 0 #5f85ac, 0 8px 14px rgba(22, 61, 104, 0.14);
}
.page-jornada .pick-button[value="VISITA"]::before {
    border-color: #5f85ac;
    background: #deedfe;
}
.page-jornada .pick-button[value="VISITA"]:hover:not(:disabled) {
    background: linear-gradient(180deg, #f7faff 0%, #e0eefd 100%);
    border-color: #4b80b5;
}
.page-jornada .pick-button[value="VISITA"].is-selected {
    background: linear-gradient(180deg, #2c7bc4 0%, #175a97 55%, #0f3c67 100%);
    border-color: #082847;
    color: #ffffff;
    box-shadow: inset 0 2px 1px rgba(255, 255, 255, 0.4), 0 4px 0 #051c33, 0 0 16px rgba(44, 123, 196, 0.5), 0 8px 16px rgba(15, 60, 103, 0.35);
}
.page-jornada .pick-button[value="VISITA"].is-selected::before {
    background: #f8c847;
    color: #0f3c67;
    border-color: #f8c847;
    font-weight: 900;
}
.page-jornada .pick-button[value="VISITA"]:active {
    transform: translateY(3px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 0 #5f85ac;
}
.page-jornada .pick-button[value="VISITA"].is-selected:active {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 0 #051c33, 0 0 12px rgba(44, 123, 196, 0.4);
}

.page-jornada .pick-button:focus-visible {
    outline: 3px solid #1f6fd8;
    outline-offset: 3px;
}

.page-jornada .pick-button:disabled:not(.is-selected) {
    background: #f0f3eb;
    color: #647560;
    border-color: #b0bea8;
    box-shadow: none;
    cursor: default;
    transform: none !important;
}

/* 4. Desktop workbench layout & comparison matrix (≥ 1200px) */
@media (min-width: 1200px) {
    .comparison-matrix {
        margin-top: 32px;
        border: 1px solid rgba(113, 146, 100, 0.45);
        border-radius: 14px;
        background: linear-gradient(180deg, rgba(14, 48, 32, 0.88), rgba(9, 32, 21, 0.96));
        box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4);
    }

    .comparison-matrix summary {
        padding: 16px 24px;
        font-weight: 800;
        font-size: 1.1rem;
        cursor: pointer;
        color: #ffd875;
        letter-spacing: -0.01em;
    }

    .comparison-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 4px;
    }

    .comparison-cell {
        min-width: 38px;
        height: 38px;
        border-radius: 8px;
        font-weight: 800;
        font-size: 0.95rem;
    }

    .comparison-cell.is-correct {
        background: linear-gradient(135deg, #1b8a43, #25d366);
        color: #04240f;
        box-shadow: 0 2px 8px rgba(37, 211, 102, 0.3);
    }
}



/* ==========================================================================
   5. Player Avatars & La Taquilla ($100 MXN Fee)
   ========================================================================== */
.player-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    vertical-align: middle;
    flex-shrink: 0;
    font-weight: 800;
    border: 2px solid #f5cf70;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    object-fit: cover;
    user-select: none;
}
.player-avatar.avatar-small { width: 30px; height: 30px; font-size: 0.72rem; }
.player-avatar.avatar-medium { width: 44px; height: 44px; font-size: 0.95rem; }
.player-avatar.avatar-large { width: 68px; height: 68px; font-size: 1.45rem; border-width: 3px; }
.player-avatar.avatar-xlarge { width: 96px; height: 96px; font-size: 2rem; border-width: 4px; }

.player-avatar.avatar-anon { background: #164032; color: #f5cf70; }
.avatar-tint-0 { background: #15803d; color: #ffffff; }
.avatar-tint-1 { background: #b45309; color: #ffffff; }
.avatar-tint-2 { background: #1d4ed8; color: #ffffff; }
.avatar-tint-3 { background: #991b1b; color: #ffffff; }
.avatar-tint-4 { background: #0f766e; color: #ffffff; }
.avatar-tint-5 { background: #7e22ce; color: #ffffff; }

.avatar-preset-campos { background: linear-gradient(135deg, #e11d48, #eab308, #22c55e, #3b82f6); }
.avatar-preset-campos::after { content: "🧤"; font-size: 1.1em; }
.avatar-preset-cuauhtemoc { background: linear-gradient(135deg, #1e3a8a, #f59e0b); }
.avatar-preset-cuauhtemoc::after { content: "🦅"; font-size: 1.1em; }
.avatar-preset-eltri { background: linear-gradient(135deg, #15803d 45%, #ffffff 50%, #dc2626 55%); }
.avatar-preset-eltri::after { content: "🇲🇽"; font-size: 1.1em; }
.avatar-preset-balon { background: radial-gradient(circle, #ffffff 40%, #1e293b 90%); }
.avatar-preset-balon::after { content: "⚽"; font-size: 1.1em; }
.avatar-preset-silbato { background: linear-gradient(135deg, #d97706, #fbbf24); }
.avatar-preset-silbato::after { content: "📯"; font-size: 1.1em; }

/* Preset Selector in Account */
.preset-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 10px 0 16px;
}
.preset-option {
    position: relative;
    cursor: pointer;
    border-radius: 50%;
    padding: 2px;
    border: 3px solid transparent;
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.preset-option:hover { transform: scale(1.1); }
.preset-option input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    opacity: 0;
    pointer-events: none;
}
.preset-option:has(input:checked) {
    border-color: #f5cf70;
    box-shadow: 0 0 12px rgba(245, 207, 112, 0.6);
    transform: scale(1.08);
}

/* Account Profile Layout */
.account-profile-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 14px 0 20px;
}
.account-profile-name {
    font-size: 1.15rem;
    color: var(--gold-bright);
}
.account-profile-sub {
    font-size: 0.88rem;
    margin: 2px 0;
}
.account-avatar-box {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    margin-top: 10px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}
.account-avatar-title {
    font-weight: 700;
    color: var(--gold);
    margin: 0 0 8px;
    font-size: 0.95rem;
}
.account-avatar-box input[type="file"] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 0.82rem;
}
.account-save-btn {
    margin-top: 12px;
}

/* Taquilla & Boleto Cards */
.boleto-cancha-card {
    background: linear-gradient(180deg, #184438 0%, #0f3027 100%);
    border: 2px solid rgba(245, 207, 112, 0.4);
    border-radius: 16px;
    padding: 20px 24px;
    margin-bottom: 24px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}
.boleto-cancha-card::before {
    content: "🎟️ BOLETO DE CANCHA";
    position: absolute;
    top: 10px;
    right: 14px;
    font-size: 0.72rem;
    font-weight: 900;
    color: #f5cf70;
    letter-spacing: 0.08em;
    opacity: 0.75;
}
.boleto-cancha-card .eyebrow {
    color: #f5cf70 !important;
    font-weight: 800;
    letter-spacing: .08em;
}
.boleto-cancha-card .boleto-confirmed-text {
    margin: 0;
    font-size: 0.92rem;
    color: #f0fdf4 !important;
    font-weight: 600;
    line-height: 1.45;
}
.boleto-cancha-card .boleto-subtext {
    margin: 0 0 10px 0;
    font-size: 0.88rem;
    color: #d1e4d8 !important;
    line-height: 1.45;
}
.boleto-cancha-card .pot-badge-sub {
    display: block;
    color: #a7f3d0 !important;
    font-size: 0.82rem;
    font-weight: 600;
    margin-top: 4px;
}
.boleto-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    margin-top: 8px;
}
.boleto-status-pill.is-confirmado {
    background: rgba(34, 197, 94, 0.2);
    border: 1px solid #22c55e;
    color: #86efac;
}
.boleto-status-pill.is-pendiente {
    background: rgba(234, 179, 8, 0.2);
    border: 1px solid #eab308;
    color: #fde047;
}
.boleto-status-pill.is-rechazado {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid #ef4444;
    color: #fca5a5;
}
.boleto-status-pill.is-sin-pago {
    background: rgba(148, 163, 184, 0.2);
    border: 1px solid #94a3b8;
    color: #e2e8f0;
}

.pot-badge {
    background: linear-gradient(135deg, #ffd700, #b45309);
    color: #04240f;
    font-weight: 900;
    padding: 6px 14px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.92rem;
    box-shadow: 0 4px 14px rgba(255, 215, 0, 0.35);
}

/* Taquilla & Boleto Layout & Styles */
.taquilla-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.taquilla-kpi-panel {
    margin: 0;
    text-align: center;
}
.taquilla-kpi-panel.is-pot {
    border: 2px solid var(--gold);
}
.taquilla-kpi-panel.is-pending {
    border: 2px solid #eab308;
    background: rgba(234, 179, 8, 0.08);
}
.taquilla-kpi-val {
    font-size: 2.2rem;
    display: block;
    line-height: 1.1;
}
.taquilla-kpi-val.is-pot { color: var(--gold); }
.taquilla-kpi-val.is-confirmed { color: #4ade80; }
.taquilla-kpi-val.is-pending { color: #facc15; }
.taquilla-kpi-val.is-unpaid { color: #94a3b8; }
.taquilla-kpi-sub {
    color: var(--muted);
    font-size: 0.82rem;
}
/* ==========================================================================
   Mesa de Control de Taquilla (Admin Viewport Expansion)
   ========================================================================== */
.page-taquilla .shell {
    width: min(1400px, calc(100% - 48px));
    padding-top: 24px;
}
@media (max-width: 900px) {
    .page-taquilla .shell {
        width: calc(100% - 24px);
        padding-top: 16px;
    }
}
.taquilla-jornada-nav {
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.taquilla-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}
.taquilla-table {
    width: 100%;
    border-collapse: collapse;
}
.taquilla-th-left { text-align: left; padding: 10px 10px; font-size: 0.8rem; letter-spacing: 0.04em; }
.taquilla-th-center { text-align: center; padding: 10px 8px; font-size: 0.8rem; letter-spacing: 0.04em; }
.taquilla-th-right { text-align: right; padding: 10px 10px; font-size: 0.8rem; letter-spacing: 0.04em; }
.taquilla-row { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.taquilla-td { padding: 8px 10px; vertical-align: middle; }
.taquilla-td-center { padding: 8px 8px; text-align: center; vertical-align: middle; }
.taquilla-table th:first-child,
.taquilla-table td:first-child {
    max-width: 250px;
}
.taquilla-player-cell { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 240px; }
.taquilla-player-cell > div { min-width: 0; overflow: hidden; }
.taquilla-player-cell strong { display: block; font-size: 0.92rem; line-height: 1.25; word-break: break-word; }
.taquilla-username { display: block; color: var(--muted); font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.taquilla-contact-cell { display: flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 0.84rem; }
.taquilla-wa-link { text-decoration: none; font-size: 1.1rem; flex-shrink: 0; }
.taquilla-no-phone { color: var(--muted); font-size: 0.82rem; white-space: nowrap; }
.taquilla-actions-wrap { display: flex; justify-content: flex-end; align-items: center; gap: 6px; flex-wrap: nowrap; white-space: nowrap; }
.taquilla-inline-form { display: inline-flex; margin: 0; }
.taquilla-btn-sm { padding: 5px 10px; font-size: 0.82rem; white-space: nowrap; }
.taquilla-btn-ghost-sm { padding: 4px 8px; font-size: 0.82rem; white-space: nowrap; }
.taquilla-cash-label { color: #4ade80; font-size: 0.82rem; }
.taquilla-muted-label { color: var(--muted); }
.taquilla-table .boleto-status-pill { margin-top: 0; padding: 4px 10px; font-size: 0.8rem; white-space: nowrap; }
.boleto-summary-title { font-size: 0.88rem; font-weight: 700; color: var(--muted); }
.boleto-form-wrap { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.boleto-input-file { font-size: 0.82rem; padding: 6px; }
.boleto-upload-btn { font-size: 0.85rem; padding: 6px 10px; }
.boleto-cancha-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.boleto-subtext { margin: 0 0 10px 0; font-size: 0.84rem; color: var(--muted); }
.boleto-confirmed-text { margin: 0; font-size: 0.88rem; color: var(--text); }
.pot-badge-wrap { margin-bottom: 14px; }
.pot-badge-sub { display: block; opacity: 0.9; font-size: 0.78rem; font-weight: normal; margin-top: 2px; }
.leaderboard-player-cell { display: flex; align-items: center; gap: 8px; }

/* ==========================================================================
   Modo Francotirador & Radar del Rebaño
   ========================================================================== */
.radar-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}
.radar-toggle-btn {
    font-size: 0.82rem;
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.page-jornada .pick-button .consensus-pill {
    display: block;
    font-size: 0.65rem;
    font-weight: 800;
    line-height: 1;
    opacity: 0.85;
    margin-top: 3px;
    letter-spacing: 0.02em;
    font-family: var(--mono, monospace);
}
.page-jornada .pick-button.is-selected .consensus-pill {
    opacity: 1;
    color: #fde047;
}
.radar-hidden .consensus-pill {
    display: none !important;
}
.sniper-feedback {
    margin: 8px 0;
}
.sniper-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.15) 0%, rgba(245, 158, 11, 0.05) 100%);
    border: 1.5px solid #eab308;
    border-radius: 10px;
    animation: sniperGlow 1.8s ease-in-out infinite alternate;
}
@keyframes sniperGlow {
    from { box-shadow: 0 0 6px rgba(234, 179, 8, 0.2); }
    to { box-shadow: 0 0 14px rgba(234, 179, 8, 0.45); }
}
.sniper-icon {
    font-size: 1.5rem;
    line-height: 1;
}
.sniper-copy strong {
    display: block;
    color: #fef08a;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.03em;
}
.sniper-copy span {
    display: block;
    color: #fde68a;
    font-size: 0.78rem;
    line-height: 1.3;
}
.rebano-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}
.rebano-icon {
    font-size: 1.3rem;
}
.rebano-copy strong {
    display: block;
    color: #e2e8f0;
    font-size: 0.8rem;
    font-weight: 700;
}
.rebano-copy span {
    display: block;
    color: #94a3b8;
    font-size: 0.75rem;
}

/* ==========================================================================
   El Clásico Personal (Head-to-Head Duelo)
   ========================================================================== */
.clasico-card {
    background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
    border: 2px solid #38bdf8;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 24px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 16px rgba(56, 189, 248, 0.15);
}
.clasico-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
    margin-bottom: 14px;
}
.clasico-title {
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #38bdf8;
    display: flex;
    align-items: center;
    gap: 6px;
}
.clasico-jornada-badge {
    font-size: 0.75rem;
    color: var(--muted);
}
.clasico-duelo-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    text-align: center;
}
.clasico-fighter {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.clasico-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #38bdf8;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.clasico-avatar-initials {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #334155;
    color: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 800;
    border: 2px solid #38bdf8;
}
.clasico-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: #f8fafc;
}
.clasico-score-board {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.clasico-score-numbers {
    font-family: var(--display, 'Bricolage Grotesque', sans-serif);
    font-size: 2.2rem;
    font-weight: 900;
    line-height: 1;
    color: #f8fafc;
    display: flex;
    align-items: center;
    gap: 8px;
}
.clasico-score-user {
    color: #4ade80;
}
.clasico-score-rival {
    color: #f87171;
}
.clasico-score-sep {
    color: #64748b;
    font-size: 1.5rem;
}
.clasico-status-pill {
    font-size: 0.75rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 12px;
}
.clasico-status-pill.is-ahead { background: rgba(74, 222, 128, 0.2); color: #4ade80; border: 1px solid #4ade80; }
.clasico-status-pill.is-tied { background: rgba(251, 191, 36, 0.2); color: #fbbf24; border: 1px solid #fbbf24; }
.clasico-status-pill.is-behind { background: rgba(248, 113, 113, 0.2); color: #f87171; border: 1px solid #f87171; }
.clasico-decisive-banner {
    margin-top: 14px;
    padding: 10px 14px;
    background: rgba(56, 189, 248, 0.08);
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 10px;
    font-size: 0.8rem;
    color: #bae6fd;
}
.clasico-decisive-banner strong {
    color: #38bdf8;
}
.clasico-history-plaque {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    margin-top: 12px;
    text-align: center;
}
.clasico-stat-num {
    font-family: var(--display, 'Bricolage Grotesque', sans-serif);
    font-size: 1.4rem;
    font-weight: 800;
    display: block;
}
.clasico-stat-label {
    font-size: 0.72rem;
    color: var(--muted);
    text-transform: uppercase;
}

/* ==========================================================================
   Cajero Exprés (Taquilla Optical Zoom Lens & VIP Dispatch)
   ========================================================================== */
.receipt-zoom-container {
    position: relative;
    display: inline-block;
    cursor: crosshair;
    overflow: hidden;
    border-radius: 8px;
}
.receipt-zoom-lens {
    position: absolute;
    width: 140px;
    height: 140px;
    border: 2px solid #38bdf8;
    border-radius: 50%;
    pointer-events: none;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.5);
    display: none;
    background-repeat: no-repeat;
}
.btn-wa-ticket {
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
    color: #ffffff !important;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
}
.btn-wa-ticket:hover {
    background: linear-gradient(135deg, #2ae06d 0%, #159b8c 100%);
}

.clasico-stat-win { color: #4ade80; }
.clasico-stat-draw { color: #fbbf24; }
.clasico-stat-loss { color: #f87171; }

.jackpot-admin-card { margin-bottom: 20px; border: 1.5px solid #d97706; background: linear-gradient(135deg, #fffbeb, #fef3c7); }
.jackpot-eyebrow { color: #b45309; }
.jackpot-heading { color: #78350f; font-size: 1.4rem; }
.jackpot-desc { color: #92400e; font-size: .9rem; }
.jackpot-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 14px; }
.jackpot-label { flex: 1 1 180px; }
.jackpot-label-text { font-weight: 700; font-size: .82rem; color: #78350f; display: block; margin-bottom: 4px; }
.jackpot-input { background: #ffffff; border: 1px solid #f59e0b; padding: 8px 10px; border-radius: 6px; width: 100%; }
.receipt-thumb-img { width: 52px; height: 52px; object-fit: cover; border-radius: 6px; border: 1.5px solid #38bdf8; display: block; margin: 0 auto; }
.btn-wa-ticket-sm { font-size: 0.78rem; padding: 3px 8px; }

.telegram-panel-meta { margin-bottom: 16px; }
.telegram-warning-text { color: #b45309; }
.telegram-btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.telegram-inline-form { display: inline; }
.telegram-summary-title { font-weight: 700; cursor: pointer; color: var(--green-dark); }
.telegram-form-stack { margin-top: 12px; }
.telegram-form-stack-16 { margin-top: 16px; }
.telegram-btn-gold-lg { font-size: 1.05rem; padding: 12px 20px; }
.telegram-jornada-switcher { margin-top: 20px; }
.telegram-jornada-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.telegram-goals-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.telegram-btn-primary-lg { font-size: 1.05rem; padding: 12px 20px; }
.telegram-commands-panel { margin-top: 24px; }
.telegram-commands-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 16px; }
.telegram-command-box { padding: 16px; background: rgba(255,255,255,0.7); border-radius: 12px; border: 1px solid var(--border); }
.telegram-command-name { color: var(--green-dark); font-size: 1.1rem; }
.telegram-command-desc { font-size: 0.88rem; margin-top: 4px; }
.sticker-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* Taquilla Payment & Notes Dialog */
.taquilla-dialog {
    border: 1px solid rgba(212, 160, 23, 0.4);
    border-radius: 16px;
    background: #0d231a;
    color: #f8fafc;
    padding: 0;
    max-width: 480px;
    width: 90vw;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7), 0 0 25px rgba(212, 160, 23, 0.2);
}
.taquilla-dialog::backdrop {
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
}
.taquilla-dialog-form {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.taquilla-dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 12px;
}
.taquilla-dialog-header h3 {
    margin: 0;
    font-size: 1.15rem;
    color: #ffd700;
}
.dialog-close-btn {
    background: transparent;
    border: none;
    color: var(--muted, #94a3b8);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    line-height: 1;
}
.dialog-close-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}
.dialog-player-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
}
.dialog-player-badge {
    color: #94a3b8;
    font-size: 0.88rem;
}
.dialog-player-title {
    color: #f8fafc;
}
.dialog-pot-hint {
    background: rgba(255, 255, 255, 0.05);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.88rem;
    color: #cbd5e1;
}
.dialog-pot-hint strong {
    color: #4ade80;
}
.dialog-field-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: #e2e8f0;
    margin-bottom: -8px;
}
.dialog-chips-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.dialog-chip {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #cbd5e1;
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.15s ease;
}
.dialog-chip:hover {
    background: rgba(212, 160, 23, 0.2);
    border-color: #ffd700;
    color: #fff;
}
.dialog-text-input {
    width: 100%;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #fff;
    font-size: 0.92rem;
    box-sizing: border-box;
}
.dialog-text-input:focus {
    outline: none;
    border-color: #ffd700;
    box-shadow: 0 0 0 2px rgba(212, 160, 23, 0.3);
}
.dialog-help-text {
    font-size: 0.78rem;
    color: #94a3b8;
    margin-top: -8px;
}
.taquilla-dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 16px;
    margin-top: 8px;
}
.taquilla-note-tag {
    font-size: 0.78rem;
    color: #cbd5e1;
    background: rgba(0, 0, 0, 0.3);
    padding: 3px 8px;
    border-radius: 6px;
    margin-top: 4px;
    display: inline-block;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.taquilla-cash-cell {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 220px;
    margin: 0 auto;
}
.taquilla-cash-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(74, 222, 128, 0.35);
    color: #4ade80;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    line-height: 1.3;
    max-width: 210px;
    word-break: break-word;
    transition: all 0.15s ease;
}
.taquilla-cash-btn span:first-child {
    word-break: break-word;
}
.taquilla-cash-btn:hover {
    background: rgba(34, 197, 94, 0.22);
    border-color: #4ade80;
    color: #fff;
}
.taquilla-note-tag-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #cbd5e1;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.78rem;
    cursor: pointer;
    margin-top: 4px;
    max-width: 220px;
    text-align: left;
    line-height: 1.3;
    word-break: break-word;
    transition: all 0.15s ease;
}
.taquilla-note-tag-btn:hover {
    border-color: #ffd700;
    color: #fff;
}
.taquilla-note-add-btn {
    display: inline-block;
    background: transparent;
    border: 1px dashed rgba(255, 255, 255, 0.25);
    color: var(--muted);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: pointer;
    margin-top: 4px;
    transition: all 0.15s ease;
}
.taquilla-note-add-btn:hover {
    border-color: #ffd700;
    color: #ffd700;
}
.taquilla-note-pencil {
    font-size: 0.72rem;
    opacity: 0.6;
    flex-shrink: 0;
}
.taquilla-cash-btn:hover .taquilla-note-pencil,
.taquilla-note-tag-btn:hover .taquilla-note-pencil {
    opacity: 1;
}