:root {
    --navy: #03243a;
    --navy-deep: #001b2d;
    --green: #087a36;
    --green-dark: #005d2c;
    --green-soft: #e6f5ea;
    --background: #f6f8f9;
    --surface: #ffffff;
    --text: #0c1a2b;
    --muted: #637083;
    --border: #dfe5ea;
    --danger: #e1262f;
    --danger-soft: #fff0f0;
    --warning: #f18a0b;
    --warning-soft: #fff5e7;
    --saldo: #0865cf;
    --saldo-soft: #e9f2ff;
    --np: #687384;
    --np-soft: #eef1f4;
    --border-soft: #eef1f4;
    --debt-text: #a95500;
    --pending: #d9a83f;
    --pending-soft: #fdf4e0;
    --pending-text: #8a5a00;
    --np-text: #4a5560;
    --tap: 2.75rem;
    --color-bg: var(--background);
    --color-surface: var(--surface);
    --color-text: var(--text);
    --color-muted: var(--muted);
    --color-primary: var(--green);
    --color-primary-hover: var(--green-dark);
    --color-admin: var(--navy);
    --color-paid: var(--green);
    --color-balance: var(--saldo);
    --color-debt: var(--debt-text);
    --color-not-participating: var(--np);
    --color-border: var(--border);
    --color-success-bg: var(--green-soft);
    --color-success: var(--green-dark);
    --color-danger-bg: var(--danger-soft);
    --color-danger: var(--danger);
    --radius-xs: .45rem;
    --radius-sm: .65rem;
    --radius-md: .9rem;
    --radius-lg: 1.25rem;
    --shadow-sm: 0 1px 3px rgb(7 32 48 / 7%);
    --shadow: 0 .7rem 2rem rgb(7 32 48 / 8%);
    --space-1: .5rem;
    --space-2: .75rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2rem;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text);
    background: var(--background);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    min-width: 0;
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    color: var(--text);
    font-size: .95rem;
    line-height: 1.5;
    background: var(--background);
}
button, input, select, textarea { font: inherit; }
a { color: var(--green); }
h1, h2, h3 { overflow-wrap: anywhere; color: var(--text); line-height: 1.16; }
h1 { margin: .2rem 0; font-size: clamp(1.65rem, 5.5vw, 2.15rem); letter-spacing: -.035em; }
h2 { margin: 0 0 1rem; font-size: clamp(1.1rem, 3.8vw, 1.35rem); }
h3 { margin: 0; font-size: 1.05rem; }
p { margin: .5rem 0; }
small { display: block; color: var(--muted); }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid rgb(8 122 54 / 70%); outline-offset: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ui-icon { width: 1.25rem; height: 1.25rem; fill: currentColor; }
.eyebrow { margin: 0 0 .25rem; color: var(--green); font-size: .75rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.muted { color: var(--muted); }
.section { margin-top: 1.5rem; }
.section-title { margin-top: 1.25rem; }
.app-main { min-width: 0; }
.admin-main { width: min(100%, 92rem); margin: 0 auto; padding: 1rem 1rem 6.25rem; }
.player-main { width: min(100%, 38rem); margin: 0 auto; padding: 1rem 1rem 6.25rem; }
.public-main { width: min(100% - 2rem, 72rem); margin-inline: auto; padding-block: 2rem; }
.global-alert { margin-bottom: 1rem; }
.hero { padding-block: clamp(2rem, 10vw, 5rem); text-align: center; }
.hero p { max-width: 38rem; margin-inline: auto; }
.card-grid { display: grid; gap: 1rem; }
.auth-shell { display: grid; min-height: calc(100vh - 4rem); place-items: center; padding: 1rem; background: var(--background); }
.auth-card { width: min(100%, 31rem); }

/* Shells */
.admin-app-shell, .player-app-shell { min-height: 100vh; }
.admin-sidebar, .player-sidebar { display: none; }
.workspace-header, .player-topbar {
    position: sticky; top: 0; z-index: 30; display: flex; min-height: 4.2rem; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .75rem 1rem; color: #fff; background: linear-gradient(135deg, var(--navy), var(--navy-deep));
}
.workspace-header strong, .player-topbar > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-actions { display: flex; align-items: center; gap: .5rem; }
.workspace-user { display: none; }
.player-brand img { width: 2rem; height: 2rem; }
.icon-button { display: inline-grid; width: 2.5rem; height: 2.5rem; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--text); text-decoration: none; cursor: pointer; }
.icon-button--inverse { color: #fff; }
.public-topbar { display: flex; align-items: center; justify-content: space-between; padding: 1rem max(1rem, calc((100% - 70rem)/2)); background: #fff; border-bottom: 1px solid var(--border); }
.sidebar-brand { display: flex; align-items: center; gap: .65rem; color: inherit; font-weight: 900; line-height: 1; text-decoration: none; }
.sidebar-brand img { width: 2.4rem; height: 2.8rem; }
.sidebar-brand span { display: grid; font-size: 1.05rem; }
.sidebar-brand small { color: #19b65a; font-size: .7rem; letter-spacing: .04em; }

/* Components */
.card { min-width: 0; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm); }
.stack-list { display: grid; gap: .75rem; }
.responsive-cards { display: grid; gap: 1rem; }
.page-heading, .player-heading, .section-heading, .card-title, .row-card, .movement { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.page-heading { align-items: center; margin-bottom: 1.25rem; }
.page-heading p, .player-heading p { color: var(--muted); }
.player-heading--navy { margin: -1rem -1rem 1rem; padding: 1.3rem 1rem 1.5rem; color: #fff; background: linear-gradient(135deg, var(--navy), #003659); }
.player-heading--navy h1, .player-heading--navy .eyebrow { color: #fff; }
.section-heading { align-items: center; }
.metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.player-kpis { margin-top: 1.5rem; }
.club-panel-kpis { margin: 1rem 0; }
.metric { display: grid; gap: .2rem; min-width: 0; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-sm); }
.metric strong { color: var(--text); font-size: 1.8rem; line-height: 1.1; }
.metric span { color: var(--muted); font-size: .78rem; }
.metric a { font-size: .8rem; font-weight: 700; text-decoration: none; }
.metric--warning { border-color: #efbc79; }
.metric--success { border-color: #76bb90; }
.data-grid, .inline-metrics { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .65rem; }
.data-grid--three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.data-grid span, .inline-metrics span { display: grid; min-width: 0; color: var(--muted); font-size: .8rem; }
.data-grid b, .inline-metrics b { margin-top: .15rem; color: var(--text); font-size: .95rem; overflow-wrap: anywhere; }
.button { display: inline-flex; min-height: 2.75rem; align-items: center; justify-content: center; gap: .45rem; padding: .65rem 1rem; border: 1px solid var(--green); border-radius: var(--radius-sm); background: var(--green); color: #fff; font-weight: 800; text-decoration: none; cursor: pointer; }
.button:hover { background: var(--green-dark); }
.button--secondary, .button--ghost { background: #fff; color: var(--green); }
.button--ghost { border-color: transparent; }
.button--small { min-height: var(--tap); padding: .35rem .65rem; font-size: .8rem; }
.button--full { width: 100%; }
button:disabled, [aria-disabled="true"] { cursor: not-allowed; opacity: .5; }
.text-button { padding: .25rem; border: 0; background: transparent; color: var(--green); font-weight: 800; cursor: pointer; }
.text-button--danger { color: var(--danger); }
.badge { display: inline-flex; width: fit-content; max-width: 100%; align-items: center; gap: .25rem; padding: .22rem .52rem; border-radius: 999px; background: var(--green-soft); color: var(--green-dark); font-size: .68rem; font-style: normal; font-weight: 900; line-height: 1.25; text-transform: uppercase; }
.badge--success, .badge--paid, .badge--open, .badge--reopened { background: var(--green-soft); color: var(--green-dark); }
.badge--balance { background: var(--saldo-soft); color: var(--saldo); }
.badge--debt { background: var(--warning-soft); color: var(--debt-text); }
.badge--pending { background: var(--pending-soft); color: var(--pending-text); border: 1px dashed var(--pending); padding: calc(.22rem - 1px) calc(.52rem - 1px); }
.badge--not-participating { background: var(--np-soft); color: var(--np); }
.alert { padding: .8rem 1rem; border: 1px solid transparent; border-radius: var(--radius-sm); }
.alert--error { border-color: #f5c4c4; background: var(--danger-soft); color: #9c171d; }
.alert--success { border-color: #b9dfc7; background: var(--green-soft); color: var(--green-dark); }
.alert--warning { border-color: #f1d3a5; background: var(--warning-soft); color: #714000; }
.balance-pill { flex: 0 0 auto; padding: .5rem .7rem; border-radius: 999px; background: #fff; color: var(--green-dark); font-weight: 900; text-decoration: none; }
.avatar { display: inline-grid; width: 2.15rem; height: 2.15rem; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #63a86f; color: #fff; font-size: .72rem; font-weight: 900; }
.avatar--large { width: 3rem; height: 3rem; font-size: .9rem; }
.person-cell { display: flex; min-width: 0; align-items: center; gap: .7rem; }
.person-cell > span:last-child { display: grid; min-width: 0; }
.person-cell small { overflow: hidden; text-overflow: ellipsis; }
.club-mark { display: inline-grid; width: 2.2rem; height: 2.2rem; place-items: center; border-radius: .55rem; background: var(--navy); color: #fff; }
.empty-state { padding: 1.4rem; border: 1px dashed #bdc9d0; border-radius: var(--radius-md); color: var(--muted); text-align: center; }
.quick-actions, .check-row, .copy-row, .row-actions, .panel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; padding: 10px; }
.row-actions { white-space: nowrap; }
.icon-action { display: inline-flex; align-items: center; min-height: var(--tap); padding: .35rem .55rem; border: 1px solid var(--border); border-radius: .45rem; font-size: .8rem; font-weight: 700; text-decoration: none; }
.form-stack { display: grid; gap: 1rem; margin-top: 1rem; }
.form-grid, .two-columns, .action-grid { display: grid; gap: 1rem; }
.mini-form { display: grid; gap: .65rem; align-content: start; padding: .75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.toolbar { display: grid; gap: 1rem; }
.field { display: grid; gap: .35rem; min-width: 0; font-weight: 750; }
.field > span, fieldset legend { color: #334155; font-size: .78rem; font-weight: 800; }
input, select, textarea { width: 100%; min-height: 2.75rem; padding: .62rem .75rem; border: 1px solid #ccd5dc; border-radius: var(--radius-sm); background: #fff; color: var(--text); }
textarea { min-height: 5.5rem; resize: vertical; }
.check { display: flex; align-items: flex-start; gap: .5rem; }
.check input, input[type="checkbox"] { width: 1.1rem; min-height: 1.1rem; accent-color: var(--green); }
.input-small { width: 8rem; }
details > summary { min-height: 2.75rem; padding: .65rem 0; cursor: pointer; }
.copy-row input { flex: 1 1 14rem; }
pre { max-width: 100%; overflow: auto; white-space: pre-wrap; }
.compact-card { display: grid; gap: .65rem; }
.link-card { display: flex; align-items: center; justify-content: space-between; color: var(--text); text-decoration: none; }
.link-card span:first-child { display: grid; }

/* Login */
.auth-page { background: var(--navy); }
.auth-page .public-main { width: 100%; padding: 0; }
.login-screen { display: grid; min-height: 100svh; align-content: center; gap: 2rem; padding: 2rem 1.25rem; color: #fff; background: radial-gradient(circle at 70% 20%, #064466 0, transparent 34%), linear-gradient(160deg, var(--navy), var(--navy-deep)); }
.login-brand { display: grid; justify-items: center; }
.login-brand img { width: 7rem; height: 8rem; }
.login-brand h1 { margin: .25rem 0 0; color: #fff; font-size: 2rem; letter-spacing: .03em; }
.login-brand > strong { color: #20d36b; font-size: 1.1rem; letter-spacing: .08em; }
.login-content { width: min(100%, 25rem); margin-inline: auto; }
.login-content h2, .login-content .eyebrow { color: #fff; }
.login-content h2 { font-size: .9rem; font-weight: 500; }
.login-form .field > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.login-form input { min-height: 3.25rem; border: 0; }
.login-help { text-align: center; font-size: .8rem; }
.login-private { width: min(100%, 25rem); margin-inline: auto; padding: 1rem; border-radius: var(--radius-md); background: #fff; color: var(--text); }
.login-private p { color: var(--muted); font-size: .82rem; }

/* Player */
.player-draw-card, .player-club-card { padding: 0; overflow: hidden; }
.draw-card-hero { display: grid; gap: .3rem; padding: 1.15rem; color: #fff; background: linear-gradient(140deg, #00632d, #00833c); }
.draw-card-hero h3 { color: #fff; font-size: 1.2rem; }
.draw-card-hero small { color: #dff6e6; }
.draw-card-body { display: grid; gap: 1rem; padding: 1rem; }
.player-club-card { padding: 1rem; background: linear-gradient(140deg, #00632d, #007b39); color: #fff; }
.player-club-card strong, .player-club-card .muted, .player-club-card .data-grid span, .player-club-card .data-grid b { color: #fff; }
.notice { display: flex; gap: .8rem; border-left: .28rem solid var(--border); }
.notice-icon { display: inline-grid; width: 2rem; height: 2rem; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--saldo-soft); color: var(--saldo); font-weight: 900; }
.notice--reminder { border-left-color: var(--warning); }
.notice--reminder .notice-icon { background: var(--warning-soft); color: var(--warning); }
.notice--blocked { border-left-color: var(--danger); }
.notice--blocked .notice-icon { background: var(--danger-soft); color: var(--danger); }
.notice--success { border-left-color: var(--green-dark); }
.notice--success .notice-icon { background: var(--green-soft); color: var(--green-dark); }
.notice--admin { border-left-color: var(--saldo); }
.notice-settings { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: .8rem; }
.notice-settings p { margin: 0; flex: 1 1 100%; color: var(--muted); }
.notice-pref-form { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-left: auto; }
.notice-pref-form label { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; }
.notice--unread { background: #f7fafb; }
.draw-mobile-header { margin: -1rem -1rem 0; padding: 1.25rem 1rem 1.5rem; color: #fff; background: var(--navy); }
.draw-mobile-header h1 { margin-top: .7rem; color: #fff; }
.quiniela-coupon-page { display: grid; gap: 1rem; margin: -1rem; padding-bottom: 1rem; background: #f1f4f2; }
.quiniela-coupon-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.15rem 1rem; color: #fff; background: var(--green-dark); }
.quiniela-coupon-header h1 { margin: .3rem 0 .2rem; color: #fff; font-size: 1.4rem; }
.quiniela-coupon-header p { margin: 0; color: #dff4e5; font-size: .8rem; }
.quiniela-coupon-kicker { color: #c9efd4; font-size: .68rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.quiniela-coupon-tabs { display: flex; gap: .4rem; margin-top: -1rem; padding: .75rem 1rem 0; overflow-x: auto; border-bottom: 1px solid #cbd9ce; background: #fff; }
.quiniela-coupon-tabs a { padding: .55rem .75rem; border: 1px solid var(--border); border-bottom: 0; border-radius: .55rem .55rem 0 0; color: var(--muted); font-size: .75rem; font-weight: 800; white-space: nowrap; text-decoration: none; }
.quiniela-coupon-tabs a[aria-current="page"] { border-color: var(--green); background: var(--green); color: #fff; }
.quiniela-coupon-summary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 0 1rem; overflow: hidden; border: 1px solid #cfdbd1; border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-sm); }
.quiniela-coupon-summary > div { display: grid; gap: .1rem; min-width: 0; padding: .7rem .75rem; border-right: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.quiniela-coupon-summary > div:nth-child(2n) { border-right: 0; }
.quiniela-coupon-summary > div:nth-last-child(-n+2) { border-bottom: 0; }
.quiniela-coupon-summary span { color: var(--muted); font-size: .65rem; font-weight: 750; }
.quiniela-coupon-summary strong { overflow-wrap: anywhere; font-size: .94rem; }
.quiniela-coupon-page > .alert, .quiniela-official-card, .quiniela-coupon-page > .empty-state { margin-right: 1rem; margin-left: 1rem; }
.quiniela-slip { margin: 0 1rem; overflow: hidden; border: 1px solid #b8caba; border-radius: var(--radius-md); background: #f7fbf7; box-shadow: 0 .5rem 1.5rem rgb(3 36 58 / 9%); }
.quiniela-slip-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: .8rem .85rem; color: #fff; background: var(--navy); }
.quiniela-slip-title > div { display: grid; }
.quiniela-slip-title span { color: #7de0a0; font-size: .62rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.quiniela-slip-title h2 { margin: 0; color: #fff; font-size: 1.05rem; }
.quiniela-slip-title small { max-width: 10rem; color: #cfdee6; font-size: .65rem; text-align: right; }
.quiniela-slip-column-head { display: grid; grid-template-columns: minmax(0,1fr) repeat(3,2.25rem); gap: .3rem; align-items: center; padding: .38rem .55rem .28rem 2.55rem; border-bottom: 1px solid #cbd9ce; color: #53675a; font-size: .6rem; font-weight: 900; text-align: center; text-transform: uppercase; }
.quiniela-slip-column-head span:first-child { text-align: left; }
.quiniela-slip-lines { background: #fff; }
.quiniela-slip-line { display: grid; grid-template-columns: 1.45rem minmax(0,1fr) auto; gap: .45rem; min-height: 3.55rem; align-items: center; padding: .38rem .55rem .38rem .35rem; border-bottom: 1px solid #d7e1d8; }
.quiniela-slip-line.is-complete { background: #fbfefb; }
.quiniela-match-number { display: grid; width: 1.4rem; height: 1.8rem; place-items: center; border-radius: .25rem; background: #e5eee7; color: var(--green-dark); font-size: .68rem; font-weight: 950; }
.quiniela-slip-line.is-complete .quiniela-match-number { background: var(--green-dark); color: #fff; }
.quiniela-teams { display: grid; min-width: 0; line-height: 1.2; }
.quiniela-teams strong, .quiniela-teams span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quiniela-teams strong { color: #132b1b; font-size: .74rem; }
.quiniela-teams span { margin-top: .12rem; color: #526158; font-size: .68rem; }
.quiniela-teams small { margin-top: .18rem; color: var(--muted); font-size: .58rem; }
.quiniela-mark-grid { display: grid; grid-template-columns: repeat(3,2.25rem); gap: .3rem; }
.quiniela-mark-form, .quiniela-pleno-marks form { margin: 0; }
.quiniela-mark { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; padding: 0; border: 1px solid #b9c8bd; border-radius: .32rem; background: #fff; color: #405448; font-size: .76rem; font-weight: 950; line-height: 1; cursor: pointer; }
span.quiniela-mark { cursor: default; }
.quiniela-mark:hover { border-color: var(--green); color: var(--green-dark); }
.quiniela-mark.is-selected { border-color: var(--green-dark); background: var(--green-dark); color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 24%); }
.quiniela-mark-input:checked + .quiniela-mark { border-color: var(--green-dark); background: var(--green-dark); color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 24%); }
.quiniela-mark-input:focus-visible + .quiniela-mark { outline: 3px solid rgb(10 112 55 / 28%); outline-offset: 2px; }
.quiniela-mark.is-miss { border-color: var(--danger); background: var(--danger); }
.quiniela-mark.is-hit { border-color: var(--green-dark); background: var(--green-dark); }
.quiniela-pleno { border-top: .35rem solid var(--green-dark); background: #eef6ef; }
.quiniela-pleno-heading { display: flex; align-items: center; gap: .6rem; padding: .65rem .75rem .4rem; }
.quiniela-pleno-heading > span { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; border-radius: .3rem; background: var(--navy); color: #fff; font-size: .72rem; font-weight: 950; }
.quiniela-pleno-heading h3 { font-size: .9rem; }
.quiniela-pleno-heading small { font-size: .6rem; }
.quiniela-pleno-line { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .5rem; align-items: center; padding: .45rem .7rem; border-top: 1px solid #d3dfd5; }
.quiniela-pleno-line > div:first-child { display: grid; min-width: 0; }
.quiniela-pleno-line small { color: var(--muted); font-size: .58rem; text-transform: uppercase; }
.quiniela-pleno-line strong { overflow: hidden; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.quiniela-pleno-marks { display: grid; grid-template-columns: repeat(4,2.25rem); gap: .25rem; }
.quiniela-slip-legend { display: flex; flex-wrap: wrap; gap: .6rem 1rem; padding: .6rem .75rem; border-top: 1px solid #c8d7ca; background: #f8fbf8; color: #526158; font-size: .62rem; }
.quiniela-slip-legend span { display: inline-flex; align-items: center; gap: .3rem; }
.quiniela-slip-legend b { display: grid; width: 1.2rem; height: 1.2rem; place-items: center; border: 1px solid #aebfb2; border-radius: .2rem; background: #fff; color: var(--green-dark); }
.quiniela-submit-card { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .75rem; align-items: center; margin: 0 1rem; padding: .75rem; border: 1px solid #b6c6b9; border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-sm); }
.quiniela-submit-card > div { display: grid; }
.quiniela-submit-card strong { font-size: .78rem; }
.quiniela-submit-card span { color: var(--muted); font-size: .62rem; }
.quiniela-submit-card .button { min-height: 2.65rem; padding: .45rem .7rem; font-size: .72rem; }
.quiniela-submit-card > .quiniela-draft-actions { display: flex; grid-auto-flow: column; gap: .5rem; }
.quiniela-unsaved { color: #a85c00 !important; font-weight: 850; }
.admin-quiniela-constructor { display: grid; gap: 1rem; width: 100%; max-width: 52rem; margin: 0 auto; }
.admin-quiniela-constructor .quiniela-coupon-summary, .quiniela-slip--admin { margin: 0; }
.admin-quiniela-progress { margin: 0; }
.quiniela-builder-goal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1rem; margin-top: -.45rem; padding: 0 .2rem; color: var(--muted); font-size: .68rem; }
.quiniela-builder-goal span { display: inline-flex; gap: .3rem; }
.quiniela-builder-goal strong { color: var(--text); }
.quiniela-results-section { display: grid; gap: .75rem; }
.quiniela-result-card { overflow: hidden; border: 1px solid #b8caba; border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-sm); }
.quiniela-result-summary { display: grid; gap: .8rem; padding: 1rem; color: #fff; background: var(--navy); }
.quiniela-result-summary h3 { margin: .2rem 0 .1rem; color: #fff; font-size: 1.05rem; }
.quiniela-result-summary small { color: #cbdce5; font-size: .68rem; }
.quiniela-result-kpis { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); overflow: hidden; border: 1px solid rgb(255 255 255 / 16%); border-radius: .65rem; background: rgb(255 255 255 / 8%); }
.quiniela-result-kpis span { display: grid; gap: .08rem; padding: .5rem .35rem; border-right: 1px solid rgb(255 255 255 / 14%); color: #d9e5eb; font-size: .58rem; text-align: center; }
.quiniela-result-kpis span:last-child { border-right: 0; }
.quiniela-result-kpis b { color: #fff; font-size: 1.12rem; }
.quiniela-result-kpis .is-hit b { color: #83e3a4; }
.quiniela-result-kpis .is-pending b { color: #ffd078; }
.quiniela-result-kpis .is-miss b { color: #ff8a82; }
.quiniela-result-details > summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 3rem; padding: .65rem 1rem; border-bottom: 1px solid transparent; color: var(--navy); font-size: .75rem; font-weight: 850; cursor: pointer; list-style-position: inside; }
.quiniela-result-details > summary small { color: var(--muted); font-size: .6rem; font-weight: 650; text-align: right; }
.quiniela-result-details[open] > summary { border-bottom-color: #c9d7cb; background: #f3f8f4; }
.quiniela-slip--results { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.quiniela-slip--results .quiniela-slip-title h4 { margin: 0; color: #fff; font-size: 1rem; }
.quiniela-result-line { border-left: .24rem solid #b8c2bd; }
.quiniela-result-line.is-hit { border-left-color: var(--green); background: #f5fcf7; }
.quiniela-result-line.is-miss { border-left-color: var(--danger); background: #fff8f7; }
.quiniela-result-line.is-pending { border-left-color: #a9b3ae; }
.quiniela-result-state { display: inline-flex; width: fit-content; margin-left: .12rem; padding: .1rem .32rem; border-radius: 999px; font-size: .55rem; font-style: normal; font-weight: 900; line-height: 1.3; }
.quiniela-result-state.is-hit { background: #def5e5; color: #09672e; }
.quiniela-result-state.is-miss { background: #ffe3e0; color: #b42318; }
.quiniela-result-state.is-pending { background: #edf0ef; color: #58645e; }
.quiniela-mark.is-actual { outline: 2px solid #fff; outline-offset: -4px; }
.quiniela-mark.is-actual.is-hit { border-color: #075f2c; background: #075f2c; color: #fff; }
.quiniela-mark.is-actual.is-miss { border-color: var(--danger); background: var(--danger); color: #fff; }
.quiniela-mark.is-actual.is-pending { border-color: #d79500; background: #f4b323; color: #2f290f; }
.quiniela-result-legend { display: flex; flex-wrap: wrap; gap: .4rem; padding: .65rem .75rem; border-top: 1px solid #c8d7ca; background: #f8fbf8; }
.quiniela-result-legend span { padding: .22rem .42rem; border: 1px solid #b9c8bd; border-radius: .35rem; color: #405448; font-size: .6rem; font-weight: 800; }
.quiniela-result-legend .is-forecast { border-color: var(--green-dark); color: var(--green-dark); }
.quiniela-result-legend .is-hit { border-color: #76bd8e; background: #e8f7ed; color: #09672e; }
.quiniela-result-legend .is-miss { border-color: #efaaa4; background: #fff0ee; color: #b42318; }
.tabs, .draw-tabs, .filter-chips { display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none; }
.tabs { margin: 0 -1rem 1rem; padding: 0 1rem; border-bottom: 1px solid var(--border); background: #fff; }
.tabs button, .draw-tabs a, .draw-tabs span { min-height: 2.8rem; padding: .65rem .7rem; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-weight: 750; white-space: nowrap; text-decoration: none; }
.tabs button[aria-selected="true"], .draw-tabs a[aria-current="page"] { border-bottom-color: var(--green); color: var(--green); }
.tab-locked { display: inline-flex; align-items: center; gap: .35rem; }
.tab-panel:not(.is-active) { display: none; }
.draw-summary-card { display: grid; gap: 1rem; }
.detail-list { display: grid; gap: .75rem; }
.detail-list span { display: flex; justify-content: space-between; gap: 1rem; }
.participation-card { margin-top: 1rem; }
.equivalence { margin: 0; padding: .75rem; border-radius: .6rem; background: #edf4f0; font-weight: 800; }
.balance-hero { display: grid; gap: .2rem; margin-bottom: 1rem; }
.balance-hero strong { color: var(--green); font-size: 2.2rem; }
.balance-hero .debt-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--border-soft); }
.balance-hero .debt-row strong { color: var(--debt-text); font-size: 1.1rem; }
.finance-action { margin-bottom: .75rem; }
.movement-list { border-top: 1px solid var(--border); }
.movement { align-items: center; padding: .8rem 0; border-bottom: 1px solid var(--border); }
.movement > div { display: grid; }
.history-list { margin-top: 1rem; }
.history-card { display: grid; gap: .9rem; }
.amount-positive { color: var(--green) !important; }
.amount-negative { color: var(--danger) !important; }

/* Navigation */
.bottom-nav { position: fixed; right: 0; bottom: 0; left: 0; z-index: 50; display: grid; grid-template-columns: repeat(5,1fr); border-top: 1px solid var(--border); background: var(--navy); box-shadow: 0 -.5rem 1.5rem rgb(3 36 58 / 12%); }
.bottom-nav a, .bottom-nav > button { display: grid; min-height: 4.25rem; place-items: center; align-content: center; gap: .15rem; padding: .35rem; border: 0; background: transparent; color: #fff; font-size: .68rem; text-decoration: none; cursor: pointer; }
.bottom-nav .ui-icon { width: 1.2rem; height: 1.2rem; }
.bottom-nav a[aria-current="page"], .bottom-nav button[aria-expanded="true"] { color: #21c660; font-weight: 900; }
.menu-sheet, .side-panel { position: fixed; inset: 0; z-index: 100; }
.sheet-backdrop, .panel-backdrop { position: absolute; inset: 0; width: 100%; border: 0; background: rgb(0 18 30 / 60%); }
.sheet-panel { position: absolute; right: 0; bottom: 0; left: 0; display: grid; gap: .25rem; padding: .7rem 1rem calc(1.4rem + env(safe-area-inset-bottom)); border-radius: 1.25rem 1.25rem 0 0; background: #fff; box-shadow: var(--shadow); }
.sheet-handle { width: 2.8rem; height: .25rem; margin: 0 auto .5rem; border-radius: 999px; background: #c8d0d6; }
.sheet-panel a, .sheet-panel form button { display: flex; width: 100%; min-height: 3rem; align-items: center; gap: .75rem; padding: .6rem; border: 0; background: transparent; color: var(--text); font-weight: 750; text-decoration: none; }

/* Admin dashboard */
.dashboard-grid { display: grid; gap: 1.25rem; }
.current-draw-card { display: grid; gap: 1rem; padding: 0; overflow: hidden; }
.current-draw-card > header { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem; color: #fff; background: linear-gradient(140deg, var(--green-dark), var(--green)); }
.current-draw-card > header h3 { color: #fff; }
.current-draw-card > :not(header) { margin-right: 1rem; margin-left: 1rem; }
.current-draw-card > .quick-actions { margin-bottom: 1rem; }
.deadline { color: var(--muted); }
.attention-list { padding: 0; overflow: hidden; }
.attention-list article { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .7rem; padding: .85rem 1rem; border-bottom: 1px solid var(--border); }
.attention-list article:last-child { border-bottom: 0; }
.attention-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--saldo); }
.attention-dot--warning { background: var(--warning); }

/* Tables and filters */
.search-bar, .control-search { display: grid; gap: .65rem; padding: .8rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff; }
.search-field { display: grid; gap: .25rem; }
.search-field span { font-size: .8rem; font-weight: 800; }
.filter-chips { margin-top: .8rem; padding-bottom: .25rem; }
.filter-chips button, .filter-chips a { min-height: var(--tap); padding: .45rem .75rem; border: 1px solid var(--border); border-radius: 999px; background: #fff; color: var(--muted); font-size: .8rem; font-weight: 800; white-space: nowrap; text-decoration: none; }
.filter-chips .is-active { border-color: var(--green); background: var(--green); color: #fff; }
.filter-chips a.filter-pc { border-color: var(--pending); background: var(--pending-soft); color: var(--pending-text); }
.filter-chips a.filter-pc.is-active { border-color: var(--pending); background: var(--pending); color: #fff; }
.table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; }
th, td { padding: .75rem .85rem; border-bottom: 1px solid var(--border); text-align: left; }
th { color: #445164; background: #fbfcfd; font-size: .7rem; font-weight: 850; }
td { font-size: .82rem; }
tbody tr:hover { background: #f8fbf9; }
.admin-data-table { overflow: visible; }
.admin-data-table table, .admin-data-table tbody, .admin-data-table tr, .admin-data-table td { display: block; width: 100%; white-space: normal; }
.admin-data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.admin-data-table tr { padding: .85rem; border-bottom: 1px solid var(--border); }
.admin-data-table td { display: grid; grid-template-columns: 6rem minmax(0,1fr); gap: .5rem; padding: .4rem 0; border: 0; }
.admin-data-table td::before { content: attr(data-label); color: var(--muted); font-size: .7rem; font-weight: 800; }
.selection-toolbar { position: sticky; bottom: 5.2rem; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .75rem; padding: .7rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow); }

/* Panels */
.side-panel aside { position: absolute; top: 0; right: 0; bottom: 0; width: min(100%, 34rem); overflow-y: auto; padding: 1rem; background: #fff; box-shadow: var(--shadow); }
.side-panel aside > header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); }
.side-panel aside > header h2 { margin: 0; }

/* Breadcrumb + Centro de Jornada */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-bottom: .75rem; font-size: .8rem; color: var(--muted); }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--green); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--text); font-weight: 800; }
.jornada-center { margin-bottom: 1.25rem; }
.jornada-center-head { margin-bottom: .85rem; }
.jornada-center-head > div { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.jornada-center-head > div > span:first-child { font-weight: 800; color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; }
.jornada-checklist { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0 0 1rem; padding: 0; }
.jornada-checklist li { display: flex; align-items: center; gap: .4rem; padding: .4rem .7rem; border: 1px solid var(--border); border-radius: 999px; font-size: .78rem; color: var(--muted); background: #fff; }
.jornada-checklist li::before { content: "○"; }
.jornada-checklist li.is-done { color: var(--green-dark); border-color: var(--green); background: var(--green-soft); }
.jornada-checklist li.is-done::before { content: "✓"; font-weight: 900; }
.jornada-center-actions { display: flex; flex-wrap: wrap; gap: .55rem; }

/* Draw control */
.draw-context-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin: -1rem -1rem 0; padding: 1.2rem 1rem; color: #fff; background: var(--navy); }
.draw-context-header h1 { margin-top: .65rem; color: #fff; }
.draw-context-header p { color: #d7e3eb; }
.draw-tabs { margin: 0 -1rem 1rem; padding: 0 1rem; border-bottom: 1px solid var(--border); background: #fff; }
.draw-kpi-strip { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; margin-bottom: 1rem; }
.draw-kpi-strip > div, .budget-section > div { display: grid; }
.draw-kpi-strip span, .budget-section span { color: var(--muted); font-size: .8rem; }
.draw-kpi-strip strong, .budget-section strong { font-size: 1.2rem; }
.control-workspace { min-width: 0; }
.control-main { min-width: 0; }
.control-table { margin-top: .75rem; overflow: visible; border: 0; background: transparent; }
.control-table table, .control-table tbody { display: block; }
.control-table thead { display: none; }
.control-table tr { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .7rem; margin-bottom: .6rem; padding: .75rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff; cursor: pointer; }
.control-table td { display: none; padding: 0; border: 0; }
.control-table td:first-child, .control-table td:nth-child(2), .control-table td:nth-child(5), .control-table td:nth-child(6), .control-table td:last-child { display: block; }
.control-table td:nth-child(2) { min-width: 0; }
.control-table td:nth-child(5) { grid-column: 2; }
.control-table td:nth-child(6) { grid-column: 2; }
.control-table td:last-child { grid-column: 3; grid-row: 1 / span 3; }
.inline-state-group { display: flex; gap: .35rem; flex-wrap: wrap; }
.inline-state-group form { display: contents; }
.state-button.is-current { border-width: 2px; background: #f8faf9; }
.bulk-toolbar { display: flex; gap: .4rem; overflow-x: auto; margin-top: .7rem; padding: .55rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff; }
.bulk-toolbar form { display: contents; }
.bulk-divider { width: 1px; flex: 0 0 auto; background: var(--border); }
.state-button { min-height: var(--tap); padding: .35rem .55rem; border: 1px solid currentColor; border-radius: .45rem; background: #fff; font-size: .7rem; font-weight: 850; white-space: nowrap; }
.state-button--p { color: var(--green); }
.state-button--s { color: var(--saldo); }
.state-button--d { color: var(--warning); }
.state-button--np { color: var(--np); }
.participant-side-panel { position: fixed; right: 0; bottom: 0; left: 0; z-index: 90; max-height: 82svh; overflow-y: auto; padding: 1rem; border-radius: 1.25rem 1.25rem 0 0; background: #fff; box-shadow: 0 -1rem 3rem rgb(0 24 40 / 22%); transform: translateY(105%); transition: transform .22s ease; }
.participant-side-panel.is-open { transform: translateY(0); }
.panel-close { position: absolute; top: .6rem; right: .7rem; z-index: 2; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%; background: #f1f4f6; font-size: 1.5rem; cursor: pointer; }
.participant-editor { display: none; }
.participant-editor.is-active { display: block; }
.participant-editor > header { padding-right: 2.5rem; padding-bottom: .9rem; border-bottom: 1px solid var(--border); }
.state-editor fieldset { padding: 0; border: 0; }
.units-stepper > span { display: grid; grid-template-columns: 2.75rem minmax(0,1fr) 2.75rem; }
.units-stepper button { border: 1px solid var(--border); background: #fff; color: var(--green); font-size: 1.4rem; }
.units-stepper input { border-radius: 0; text-align: center; }
.status-choice { display: grid; min-height: 4.3rem; place-items: center; padding: .4rem .2rem; border: 1px solid var(--border); border-radius: .6rem; background: #fff; color: var(--muted); font-size: .8rem; cursor: pointer; }
.status-choice b { display: grid; width: 1.7rem; height: 1.7rem; place-items: center; border-radius: 50%; background: currentColor; color: #fff; }
.status-choice--p { color: var(--green); }.status-choice--s { color: var(--saldo); }.status-choice--d { color: var(--warning); }.status-choice--np { color: var(--np); }
.status-choice.is-selected { border-width: 2px; border-color: currentColor; background: #f8faf9; }
.panel-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border: 1px solid var(--border); border-radius: .65rem; }
.panel-metrics span { display: grid; padding: .65rem; border-right: 1px solid var(--border); color: var(--muted); font-size: .8rem; }
.panel-metrics span:last-child { border-right: 0; }
.panel-metrics b { margin-top: .2rem; color: var(--text); font-size: .85rem; }
.panel-actions > * { flex: 1; }
.budget-section { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .8rem; margin-top: 1rem; }
.budget-section form { grid-column: 1 / -1; }
.state-form { display: grid; grid-template-columns: 4.5rem repeat(2, minmax(5rem, 1fr)); gap: .35rem; min-width: 20rem; }
.units-input { grid-row: span 2; }

/* Sellado QR (Fase 2B) */
.qr-display { display: grid; justify-items: center; gap: .75rem; padding: 1.5rem 1rem; border-radius: var(--radius-md); background: #fff; text-align: center; }
.qr-display-info { display: grid; gap: .15rem; color: var(--text); }
.qr-display-info strong { font-size: 1.1rem; }
.qr-image svg { width: min(80vw, 320px); height: auto; }
.qr-token { font-family: ui-monospace, Menlo, monospace; letter-spacing: .04em; }
.qr-exit { position: absolute; top: 1rem; right: 1rem; background: #fff; box-shadow: var(--shadow); }
[data-qr-display].is-fullscreen { position: fixed; inset: 0; z-index: 200; background: #fff; display: grid; place-content: center; padding: 2rem; }
[data-qr-display].is-fullscreen .qr-image svg { width: min(90vw, 90vh, 560px); }

.selae-preview { display: grid; gap: 1rem; }
.selae-match-preview { display: grid; gap: .55rem; }
.selae-match-preview article { display: flex; min-width: 0; align-items: center; gap: .7rem; padding: .7rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-soft); }
.selae-match-preview article > div { display: grid; min-width: 0; gap: .15rem; }
.selae-match-preview article strong { overflow-wrap: anywhere; }
.selae-match-preview article small, .quiniela-teams small { color: var(--muted); font-size: .72rem; font-weight: 600; }
.manual-fallback { margin-top: 1rem; }
.manual-fallback > summary { cursor: pointer; }

@media (min-width: 48rem) {
    .selae-match-preview { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .admin-main, .player-main { padding: 1.5rem 1.5rem 5.5rem; }
    .metric-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
    .responsive-cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .form-grid, .two-columns { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .action-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .search-bar, .control-search { grid-template-columns: minmax(0,1fr) auto; align-items: end; }
    .draw-kpi-strip { grid-template-columns: repeat(5,minmax(0,1fr)); }
    .login-screen { grid-template-columns: minmax(15rem,1fr) minmax(20rem,25rem); align-items: center; }
    .login-brand { grid-row: span 2; }
    .login-private { grid-column: 2; }
    .quiniela-coupon-page { margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
    .quiniela-coupon-summary { grid-template-columns: repeat(4,minmax(0,1fr)); }
    .quiniela-coupon-summary > div { border-right: 1px solid var(--border-soft); border-bottom: 0; }
    .quiniela-coupon-summary > div:nth-child(2n) { border-right: 1px solid var(--border-soft); }
    .quiniela-coupon-summary > div:last-child { border-right: 0; }
    .quiniela-result-summary { grid-template-columns: minmax(0,1fr) minmax(17rem,22rem); align-items: center; }
}

@media (min-width: 64rem) {
    .admin-app-shell { display: grid; grid-template-columns: 15.5rem minmax(0,1fr); }
    .admin-sidebar { position: sticky; top: 0; display: flex; height: 100vh; flex-direction: column; padding: 1.25rem 1rem; overflow-y: auto; color: #fff; background: linear-gradient(180deg,var(--navy),var(--navy-deep)); }
    .admin-sidebar .sidebar-brand { padding: 0 .35rem 1.2rem; }
    .sidebar-user { display: flex; align-items: center; gap: .65rem; padding: 1rem .35rem; border-top: 1px solid rgb(255 255 255 / 10%); border-bottom: 1px solid rgb(255 255 255 / 10%); }
    .sidebar-user > span:last-child { display: grid; min-width: 0; }
    .sidebar-user small { color: #b9cbd7; font-size: .66rem; }
    .sidebar-nav { display: grid; gap: .25rem; margin-top: 1rem; }
    .sidebar-nav > a { display: flex; min-height: 2.65rem; align-items: center; gap: .7rem; padding: .6rem .75rem; border-radius: .45rem; color: #fff; font-size: .83rem; text-decoration: none; }
    .sidebar-nav > a[aria-current="page"], .sidebar-nav > a:hover { background: var(--green); }
    .sidebar-subnav { display: grid; gap: .1rem; margin: -.1rem 0 .3rem .8rem; padding-left: .85rem; border-left: 1px solid rgb(255 255 255 / 20%); }
    .sidebar-subnav a, .sidebar-subnav span { padding: .38rem .2rem; color: #dce8ef; font-size: .8rem; text-decoration: none; }
    .sidebar-subnav a[aria-current="page"] { color: #42df7d; font-weight: 800; }
    .sidebar-logout { margin-top: auto; }
    .sidebar-logout button { display: flex; width: 100%; align-items: center; gap: .7rem; padding: .7rem; border: 0; background: transparent; color: #fff; cursor: pointer; }
    .workspace-header { min-height: 4.5rem; padding: .75rem 2rem; border-bottom: 1px solid var(--border); background: #fff; color: var(--text); }
    .workspace-user { display: inline; }
    .admin-main { width: min(100%,96rem); padding: 1.7rem 2rem 2.5rem; }
    .bottom-nav, .admin-bottom-nav { display: none; }
    .dashboard-grid { grid-template-columns: minmax(0,1.1fr) minmax(22rem,.9fr); }
    .dashboard-kpis .metric { min-height: 7rem; }
    .responsive-cards { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .admin-data-table { overflow-x: auto; }
    .admin-data-table table { display: table; white-space: nowrap; }
    .admin-data-table thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
    .admin-data-table tbody { display: table-row-group; }
    .admin-data-table tr { display: table-row; padding: 0; }
    .admin-data-table th, .admin-data-table td { display: table-cell; width: auto; padding: .75rem .85rem; border-bottom: 1px solid var(--border); }
    .admin-data-table td::before { display: none; }
    .selection-toolbar { bottom: 1rem; }
    .control-workspace { display: grid; grid-template-columns: minmax(0,1fr) 21rem; gap: 1rem; align-items: start; }
    .control-table { overflow-x: auto; border: 1px solid var(--border); background: #fff; }
    .control-table table { display: table; white-space: nowrap; }
    .control-table thead { display: table-header-group; }
    .control-table tbody { display: table-row-group; }
    .control-table tr { display: table-row; padding: 0; border: 0; background: transparent; }
    .control-table td { display: table-cell !important; grid-column: auto !important; grid-row: auto !important; padding: .75rem .85rem; border-bottom: 1px solid var(--border); }
    .participant-side-panel { position: sticky; top: 5.4rem; z-index: 1; max-height: calc(100vh - 6.5rem); padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); transform: none; }
    .participant-side-panel .panel-close { display: none; }
    .budget-section { grid-template-columns: repeat(4,minmax(0,1fr)); }
    .budget-section form { grid-column: auto; }
    .draw-context-header { margin: 0; border-radius: var(--radius-md) var(--radius-md) 0 0; }
    .draw-tabs { margin: 0 0 1rem; padding: 0 .5rem; }
    .player-app-shell { display: grid; grid-template-columns: 15.5rem minmax(0,1fr); }
    .player-sidebar { position: sticky; top: 0; display: flex; height: 100vh; flex-direction: column; padding: 1.25rem 1rem; overflow-y: auto; color: #fff; background: linear-gradient(180deg,var(--navy),var(--navy-deep)); }
    .player-sidebar .sidebar-brand { padding: 0 .35rem 1.2rem; }
}

@media (max-width: 47.99rem) {
    .page-heading { align-items: stretch; flex-direction: column; }
    .page-heading > .button, .page-heading > button { width: 100%; }
    .data-grid--three { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .admin-main > .two-columns > section, .admin-main > .two-columns > details { min-width: 0; }
    .table-wrap.responsive-table { overflow: visible; border: 0; background: transparent; }
    .responsive-table table, .responsive-table tbody, .responsive-table tr, .responsive-table td { display: block; width: 100%; white-space: normal; }
    .responsive-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .responsive-table tr { margin-bottom: 1rem; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff; }
    .responsive-table td { display: grid; grid-template-columns: 6rem minmax(0,1fr); gap: .5rem; padding: .5rem 0; white-space: normal; }
    .responsive-table td::before { content: attr(data-label); color: var(--muted); font-size: .7rem; font-weight: 800; }
    .state-form { grid-column: 1 / -1; min-width: 0; width: 100%; grid-template-columns: minmax(3.75rem, 4.5rem) repeat(2, minmax(0, 1fr)); }
    .draw-context-header { flex-direction: column; }
    .draw-context-header .quick-actions, .draw-context-header form, .draw-context-header button { width: 100%; }
    .jornada-center-head > div { flex-direction: column; align-items: stretch; }
    .jornada-center-head > div > a.button, .jornada-center-head > div > span.badge { width: 100%; justify-content: center; }
    .jornada-center-actions { flex-direction: column; }
    .jornada-center-actions > a { width: 100%; justify-content: center; }
    .quiniela-submit-card { grid-template-columns: 1fr; }
    .quiniela-submit-card > .quiniela-draft-actions { flex-direction: column; }
    .quiniela-submit-card .button { width: 100%; }
}

@media (max-width: 22rem) {
    .quiniela-slip-column-head { grid-template-columns: minmax(0,1fr) repeat(3,2rem); padding-left: 2.4rem; }
    .quiniela-mark-grid { grid-template-columns: repeat(3,2rem); }
    .quiniela-mark, .quiniela-pleno-marks .quiniela-mark { width: 2rem; height: 2rem; }
    .quiniela-pleno-marks { grid-template-columns: repeat(4,2rem); }
    .quiniela-submit-card { grid-template-columns: 1fr; }
    .quiniela-submit-card .button { width: 100%; }
    .quiniela-result-details > summary { align-items: flex-start; flex-direction: column; }
    .quiniela-result-details > summary small { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}