/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* ── Design Tokens ── */
:root {
/* Colors */
--navy: #0B1929;
--navy-mid: #152338;
--navy-light: #1E3355;
--blue: #1852CC;
--blue-light: #3A6EE0;
--blue-pale: #E6EDFA;
--red: #C8102E;
--red-light: #E03248;
--red-pale: #FDE8EB;
--gold: #C9920A;
--gold-bright: #F0B429;
--gold-pale: #FEF3D0;
--white: #F8F9FB;
--surface: #EEF1F7;
--card: #FFFFFF;
--border: #DDE3EE;
--border-light: #F0F3F8;
--text: #0B1929;
--text-sec: #4E5D74;
--text-muted: #8D9BB0;
--win: #15803D;
--win-bg: #DCFCE7;
--draw: #B45309;
--draw-bg: #FEF3C7;
--exact: #6D28D9;
--exact-bg: #EDE9FE;
--loss: #DC2626;
--loss-bg: #FEE2E2;
/* Typography */
--font-display: 'Playfair Display', Georgia, serif;
--font-ui: 'Inter', system-ui, sans-serif;
/* Radius */
--r-xs: 4px;
--r-sm: 8px;
--r-md: 12px;
--r-lg: 16px;
--r-xl: 20px;
--r-pill: 9999px;
/* Shadows */
--shadow-card: 0 1px 3px rgba(11,25,41,0.08), 0 4px 14px rgba(11,25,41,0.06);
--shadow-elevated: 0 4px 20px rgba(11,25,41,0.12), 0 8px 32px rgba(11,25,41,0.08);
/* Prevent Turbo scroll-restoration interference */
scroll-behavior: auto;
}
/* ── Base ── */
html, body {
height: 100%;
background: var(--surface);
color: var(--text);
font-family: var(--font-ui);
font-size: 14px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
color: var(--text);
line-height: 1.2;
}
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-light); }
/* ── App Shell ── */
.app-shell {
display: flex;
height: 100vh;
overflow: hidden;
}
/* ── Sidebar ── */
.sidebar {
width: 220px;
min-width: 220px;
background: var(--navy);
display: flex;
flex-direction: column;
overflow-y: auto;
position: relative;
}
/* Halftone pattern overlay */
.sidebar::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(255,255,255,0.09) 1.5px, transparent 1.5px);
background-size: 11px 11px;
pointer-events: none;
}
/* Top accent bar */
.sidebar-accent {
height: 3px;
display: flex;
flex-shrink: 0;
position: relative;
z-index: 1;
}
.sidebar-accent span:nth-child(1) { flex: 1; background: var(--red); }
.sidebar-accent span:nth-child(2) { flex: 1; background: var(--gold); }
.sidebar-accent span:nth-child(3) { flex: 1; background: var(--blue); }
/* Logo area */
.sidebar-logo {
padding: 16px 16px 12px;
position: relative;
z-index: 1;
}
.sidebar-logo .app-name {
font-family: var(--font-display);
font-size: 18px;
font-weight: 900;
color: white;
letter-spacing: -0.3px;
}
.sidebar-logo .app-sub {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.2px;
color: rgba(255,255,255,0.38);
margin-top: 2px;
}
/* Nav sections */
.sidebar-section {
padding: 12px 10px 4px;
position: relative;
z-index: 1;
}
.sidebar-section-label {
font-size: 9.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
color: rgba(255,255,255,0.27);
padding: 0 6px;
margin-bottom: 4px;
}
.sidebar-nav-item {
display: flex;
align-items: center;
gap: 9px;
padding: 8px 10px;
border-radius: var(--r-sm);
border-left: 2.5px solid transparent;
color: rgba(255,255,255,0.58);
font-size: 13px;
font-weight: 400;
cursor: pointer;
text-decoration: none;
margin-bottom: 2px;
transition: background 0.15s;
position: relative;
z-index: 1;
}
.sidebar-nav-item:hover {
background: rgba(255,255,255,0.07);
color: rgba(255,255,255,0.85);
}
.sidebar-nav-item.active {
background: rgba(255,255,255,0.10);
border-left-color: var(--blue);
color: white;
font-weight: 600;
}
/* Sidebar bottom */
.sidebar-bottom {
margin-top: auto;
padding: 12px 10px;
position: relative;
z-index: 1;
}
.sidebar-user-card {
background: rgba(255,255,255,0.055);
border-radius: var(--r-md);
padding: 9px 12px;
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
transition: background 0.15s;
}
.sidebar-user-card:hover {
background: rgba(255,255,255,0.11);
}
.sidebar-avatar {
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--blue);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: 13px;
font-weight: 900;
color: white;
flex-shrink: 0;
}
.sidebar-user-name {
font-size: 12px;
font-weight: 700;
color: white;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sidebar-user-role {
font-size: 10px;
color: rgba(255,255,255,0.38);
}
/* ── Main content area ── */
.main-area {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
min-width: 0;
}
/* ── Top bar ── */
.topbar {
height: 58px;
min-height: 58px;
background: var(--card);
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 28px;
flex-shrink: 0;
}
.topbar-title {
font-family: var(--font-display);
font-size: 22px;
font-weight: 900;
color: var(--text);
letter-spacing: -0.4px;
}
.topbar-right {
display: flex;
align-items: center;
gap: 12px;
}
.topbar-user {
font-size: 12px;
color: var(--text-sec);
}
/* ── Scrollable content ── */
.content-scroll {
flex: 1;
overflow-y: auto;
padding: 24px 28px;
}
/* ── Cards ── */
.card {
background: var(--card);
border-radius: var(--r-xl);
box-shadow: var(--shadow-card);
padding: 20px 24px;
}
/* Shared top-level section header for the Inicio dashboard */
.section-title {
font-family: var(--font-display);
font-size: 20px;
font-weight: 900;
color: var(--text);
margin: 0 0 16px;
}
/* ── Home: Mis Ligas (sizes to content) + Partidos de hoy (fixed sidebar) ── */
.home-grid {
display: flex;
align-items: flex-start;
gap: 24px;
margin-bottom: 32px;
}
.home-main {
flex: 0 1 auto; /* size to content, shrink if needed */
min-width: 0;
max-width: 1008px; /* caps Mis Ligas at ~4 cards wide (4×240 + 3×16) */
}
.home-side {
flex: 0 1 720px; /* sidebar basis; shrinks on narrow desktops so the two
columns never overflow / overlap (was a fixed 1020px
non-shrinking column that bled into Mis Ligas) */
min-width: 0;
margin-left: auto; /* leftover space becomes the gutter between sections */
}
.league-cards-grid {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-bottom: 16px;
}
.league-cards-grid > * {
flex: 0 0 240px; /* fixed-width cards; wrap to next row past 4 */
}
/* Today's games column */
.tg-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.tg-header-titles { flex: 1; min-width: 0; text-align: center; }
.tg-title { margin: 0; }
.tg-date { display: block; font-size: 12px; font-weight: 600;
color: var(--text-muted); text-transform: capitalize; margin-top: 2px; }
.tg-nav { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border-light);
background: var(--card-bg, #fff); color: var(--text-sec);
font-size: 20px; font-weight: 700; line-height: 1; text-decoration: none;
transition: background 0.15s, color 0.15s; }
.tg-nav:hover { background: var(--gold); color: #fff; border-color: var(--gold); }
.tg-list { display: flex; flex-direction: column; gap: 12px; }
.tg-card { border-left: 4px solid var(--gold); padding: 14px 16px; }
.tg-teams { font-family: var(--font-display); font-weight: 700; font-size: 15px;
color: var(--text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tg-vs { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; }
.tg-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
margin-top: 6px; font-size: 11px; color: var(--text-muted); font-weight: 600; }
.tg-time { font-family: var(--font-display); font-weight: 700; color: var(--blue); }
.tg-result { margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--win); }
.tg-divider { height: 1px; background: var(--border-light); margin: 12px 0; }
.tg-pred-label { font-size: 10px; font-weight: 700; text-transform: uppercase;
letter-spacing: 1px; color: var(--text-muted); margin-bottom: 6px; }
.tg-pred-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.tg-pred-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; }
.tg-pred-league { color: var(--text-sec); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-pred-score { font-family: var(--font-display); font-weight: 700; color: var(--text); flex-shrink: 0; }
.tg-pred-none { font-size: 12px; color: var(--text-muted); font-style: italic; flex-shrink: 0; }
.tg-pred-right { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.tg-picks-btn { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
color: var(--blue); text-decoration: none; padding: 2px 8px; border-radius: 6px;
border: 1px solid var(--blue); white-space: nowrap; transition: background 0.15s, color 0.15s; }
.tg-picks-btn:hover { background: var(--blue); color: #fff; }
.tg-empty { text-align: center; color: var(--text-muted); padding: 24px; font-size: 13px; }
@media (max-width: 768px) {
.home-grid { flex-direction: column; gap: 24px; }
.home-main { max-width: none; }
.home-side { flex: 1 1 auto; margin-left: 0; width: 100%; }
.league-cards-grid > * { flex: 1 1 100%; } /* full-width stacked cards */
}
.card-header {
background: var(--navy);
background-image: radial-gradient(circle, rgba(255,255,255,0.09) 1.5px, transparent 1.5px);
background-size: 11px 11px;
border-radius: var(--r-xl) var(--r-xl) 0 0;
padding: 12px 18px;
}
.card-header-title {
font-family: var(--font-display);
font-size: 15px;
font-weight: 900;
color: white;
}
/* ── Buttons ── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 18px;
border-radius: var(--r-pill);
font-family: var(--font-ui);
font-size: 13px;
font-weight: 700;
border: none;
cursor: pointer;
text-decoration: none;
transition: opacity 0.15s;
}
.btn:hover { opacity: 0.88; }
.btn-primary { background: var(--blue); color: white; }
.btn-red { background: var(--red); color: white; }
.btn-gold { background: var(--gold); color: white; }
.btn-ghost {
background: var(--surface);
color: var(--text-sec);
border: 1px solid var(--border);
}
/* ── Pico "role=button" links & submit inputs ── */
[role="button"] {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 18px;
border-radius: var(--r-pill);
font-family: var(--font-ui);
font-size: 13px;
font-weight: 700;
cursor: pointer;
text-decoration: none;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text-sec);
transition: opacity 0.15s;
}
[role="button"]:hover { opacity: 0.88; color: var(--text-sec); }
[role="button"].secondary {
background: var(--surface);
color: var(--text-sec);
border-color: var(--border);
}
input[type="submit"], button[type="submit"] {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 18px;
border-radius: var(--r-pill);
font-family: var(--font-ui);
font-size: 13px;
font-weight: 700;
border: none;
cursor: pointer;
background: var(--blue);
color: white;
transition: opacity 0.15s;
}
input[type="submit"]:hover, button[type="submit"]:hover { opacity: 0.88; }
/* ── Tables ── */
table {
width: 100%;
border-collapse: collapse;
font-family: var(--font-ui);
}
thead tr {
background: var(--surface);
}
thead th {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.7px;
color: var(--text-muted);
padding: 8px 16px;
text-align: left;
}
tbody tr {
border-bottom: 1px solid var(--border-light);
}
tbody tr:hover { background: var(--surface); }
tbody td {
padding: 12px 16px;
font-size: 13px;
color: var(--text);
}
/* ── Score inputs ── */
input[type="number"] {
width: 52px;
height: 52px;
border-radius: var(--r-md);
border: 1.5px solid var(--border);
background: var(--card);
font-family: var(--font-display);
font-size: 22px;
font-weight: 900;
color: var(--text);
text-align: center;
outline: none;
-moz-appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; }
input[type="number"]:focus {
border-color: var(--blue);
box-shadow: 0 0 0 3px var(--blue-pale);
}
/* ── Text inputs & selects ── */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], textarea, select {
width: 100%;
padding: 10px 14px;
border-radius: var(--r-sm);
border: 1.5px solid var(--border);
background: var(--card);
font-family: var(--font-ui);
font-size: 14px;
color: var(--text);
outline: none;
margin-bottom: 12px;
}
input[type="text"]:focus, input[type="email"]:focus,
input[type="password"]:focus, textarea:focus, select:focus {
border-color: var(--blue);
box-shadow: 0 0 0 3px var(--blue-pale);
}
label {
display: block;
font-size: 12px;
font-weight: 600;
color: var(--text-sec);
margin-bottom: 4px;
}
/* ── Badges / Pills ── */
.badge {
display: inline-flex;
align-items: center;
padding: 3px 9px;
border-radius: var(--r-pill);
font-size: 11px;
font-weight: 700;
}
.badge-exact { background: var(--exact-bg); color: var(--exact); }
.badge-win { background: var(--win-bg); color: var(--win); }
.badge-draw { background: var(--draw-bg); color: var(--draw); }
.badge-loss { background: var(--loss-bg); color: var(--loss); }
.badge-gold { background: var(--gold-pale); color: var(--gold); }
.badge-blue { background: var(--blue-pale); color: var(--blue); }
.badge-red { background: var(--red-pale); color: var(--red); }
/* ── Code / invite code ── */
code {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-sm);
padding: 2px 8px;
font-family: 'Courier New', monospace;
font-size: 13px;
letter-spacing: 1px;
color: var(--text);
}
/* ── Flash messages ── */
.flash-notice {
background: var(--win-bg);
color: var(--win);
padding: 10px 16px;
border-radius: var(--r-md);
margin-bottom: 16px;
font-size: 13px;
font-weight: 600;
}
.flash-alert {
background: var(--loss-bg);
color: var(--loss);
padding: 10px 16px;
border-radius: var(--r-md);
margin-bottom: 16px;
font-size: 13px;
font-weight: 600;
}
/* ── Leaderboard "me" row ── */
tr.me-row { background: var(--blue-pale) !important; }
/* ── Mobile Bottom Nav ── */
.mobile-bottom-nav {
display: none;
}
@media (max-width: 768px) {
.mobile-bottom-nav {
display: flex;
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: calc(60px + env(safe-area-inset-bottom));
padding-bottom: env(safe-area-inset-bottom);
background: var(--navy);
background-image: radial-gradient(circle,
rgba(255,255,255,0.09) 1.5px, transparent 1.5px);
background-size: 11px 11px;
border-top: 1px solid rgba(255,255,255,0.08);
z-index: 100;
box-shadow: 0 -2px 12px rgba(11,25,41,0.15);
}
.mobile-nav-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
text-decoration: none;
color: rgba(255,255,255,0.45);
font-family: var(--font-ui);
transition: color 0.15s;
padding: 6px 4px;
border-top: 2px solid transparent;
}
.mobile-nav-item.active {
color: white;
border-top-color: var(--blue);
}
.mobile-nav-item:hover {
color: rgba(255,255,255,0.8);
}
.mobile-nav-icon {
font-size: 20px;
line-height: 1;
}
.mobile-nav-label {
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
}
/* ── Super Admin popup menu (mobile nav) ── */
.su-admin-nav {
position: relative;
}
.su-admin-trigger {
flex: 1;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
background: none;
border: none;
cursor: pointer;
color: inherit;
font-family: var(--font-ui);
padding: 6px 4px;
}
.su-admin-menu {
position: absolute;
bottom: calc(100% + 8px);
right: 6px;
min-width: 220px;
background: var(--navy);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 12px;
padding: 6px;
box-shadow: 0 8px 24px rgba(11,25,41,0.45);
display: none;
flex-direction: column;
gap: 2px;
z-index: 110;
}
.su-admin-menu.open {
display: flex;
animation: suAdminMenuIn 0.14s ease-out;
}
@keyframes suAdminMenuIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.su-admin-menu-title {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.6px;
color: rgba(255,255,255,0.40);
padding: 6px 10px 4px;
}
.su-admin-menu-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 10px;
border-radius: 8px;
text-decoration: none;
color: rgba(255,255,255,0.85);
font-family: var(--font-ui);
font-size: 14px;
font-weight: 600;
}
.su-admin-menu-item span {
font-size: 16px;
line-height: 1;
}
.su-admin-menu-item:hover,
.su-admin-menu-item:active {
background: rgba(255,255,255,0.08);
color: white;
}
.su-admin-menu-item.active {
background: var(--blue);
color: white;
}
/* Tighter padding on phones; extra bottom space for the fixed nav */
.content-scroll {
padding: 16px 14px calc(76px + env(safe-area-inset-bottom));
}
/* Hide sidebar completely on mobile */
.sidebar {
display: none;
}
/* Full width main area on mobile */
.main-area {
width: 100%;
}
/* Topbar adjustments for mobile */
.topbar {
padding: 0 16px;
}
.topbar-title {
font-size: 17px;
}
/* Stack topbar buttons on very small screens */
.topbar-right .btn {
font-size: 11px;
padding: 6px 10px;
}
.match-meta {
display: none;
}
}
/* ── Group Predictions: Collapsible Sections ── */
.group-section {
background: var(--card);
border-radius: var(--r-xl);
box-shadow: var(--shadow-card);
margin-bottom: 12px;
overflow: hidden;
}
.group-summary {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 20px;
cursor: pointer;
list-style: none;
background: var(--card);
border-bottom: 1px solid var(--border-light);
user-select: none;
}
.group-summary::-webkit-details-marker { display: none; }
.group-summary::after {
content: '▸';
color: var(--text-muted);
font-size: 12px;
transition: transform 0.2s;
}
details[open] .group-summary::after {
transform: rotate(90deg);
}
.group-label {
font-family: var(--font-display);
font-size: 17px;
font-weight: 900;
color: var(--text);
}
.group-meta {
font-size: 11px;
font-weight: 600;
color: var(--text-muted);
}
.group-content {
padding: 0;
}
/* ── Group Predictions: Match Rows ── */
.match-row {
display: flex;
align-items: center;
padding: 14px 20px;
border-bottom: 1px solid var(--border-light);
}
.match-row:last-of-type {
border-bottom: none;
}
.match-team {
flex: 1;
font-size: 13px;
font-weight: 600;
color: var(--text);
min-width: 100px;
}
.match-team-home {
text-align: right;
padding-right: 16px;
}
.match-team-away {
text-align: left;
padding-left: 16px;
}
.match-score-area {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.score-divider {
font-size: 18px;
color: var(--text-muted);
width: 16px;
text-align: center;
line-height: 1;
}
.match-meta {
display: grid;
grid-template-columns: 52px 1fr;
column-gap: 10px;
font-size: 10px;
color: var(--text-muted);
min-width: 220px;
max-width: 280px;
flex-shrink: 0;
margin-left: 20px;
padding-left: 20px;
border-left: 1px solid var(--border-light);
}
.match-meta span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.6;
}
.score-input {
width: 52px !important;
height: 52px !important;
border-radius: var(--r-md) !important;
border: 1.5px solid var(--border) !important;
background: var(--card) !important;
font-family: var(--font-display) !important;
font-size: 22px !important;
font-weight: 900 !important;
color: var(--text) !important;
text-align: center !important;
padding: 0 !important;
}
.score-input:focus {
border-color: var(--blue) !important;
box-shadow: 0 0 0 3px var(--blue-pale) !important;
outline: none !important;
}
.score-divider {
font-size: 20px;
color: var(--text-muted);
font-weight: 300;
line-height: 1;
width: 16px;
text-align: center;
}
/* ── Tournament Bracket ── */
.bracket-wrapper {
background: var(--card);
border-radius: var(--r-xl);
box-shadow: var(--shadow-card);
padding: 14px 10px;
}
.bracket-container {
display: flex;
align-items: stretch;
gap: 10px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
padding: 0 8px 12px;
/* justify-content:center + overflow clips the left edge; auto margins
center when there is room but keep the full bracket scrollable */
justify-content: flex-start;
}
.bracket-half:first-child { margin-left: auto; }
.bracket-half:last-child { margin-right: auto; }
.bracket-half {
display: flex;
gap: 10px;
}
.bracket-column {
display: flex;
flex-direction: column;
width: 148px;
flex-shrink: 0;
scroll-snap-align: start;
}
.bracket-col-header {
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.8px;
color: var(--text-muted);
text-align: center;
padding: 4px 0 10px;
flex-shrink: 0;
}
/* flex: 1 fills column height so space-around aligns across rounds */
.bracket-col-matches {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-around;
gap: 6px;
}
/* Center column */
.bracket-center-col {
display: flex;
flex-direction: column;
width: 160px;
flex-shrink: 0;
}
.bracket-center-col .bracket-match-card {
width: 100%;
}
.bracket-center-matches {
display: flex;
flex-direction: column;
justify-content: center;
flex: 1;
}
.bk-trophy {
width: 46px;
height: 46px;
border-radius: 50%;
background: linear-gradient(135deg, var(--gold-bright), var(--gold));
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
margin: 0 auto 6px;
box-shadow: 0 3px 10px rgba(201, 146, 10, 0.35);
}
.bk-champ-name {
font-family: var(--font-display);
font-size: 17px;
font-weight: 900;
color: var(--text);
text-align: center;
min-height: 22px;
margin-bottom: 14px;
}
.bk-center-label {
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.6px;
color: var(--text-muted);
text-align: center;
margin-bottom: 4px;
}
.bk-center-final { color: var(--gold); }
.bk-center-3rd { margin-top: 18px; }
/* ── Bracket match card ── */
.bracket-match-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r-sm);
overflow: hidden;
box-shadow: 0 1px 2px rgba(11, 25, 41, 0.05);
}
.bracket-match-card[data-round="r32"] { border-left: 3px solid var(--blue); }
.bracket-match-card[data-round="r16"] { border-left: 3px solid var(--gold); }
.bracket-match-card[data-round="qf"] { border-left: 3px solid var(--red); }
.bracket-match-card[data-round="sf"] { border-left: 3px solid #7C3AED; }
.bracket-match-card[data-round="final"] { border-left: 3px solid var(--gold); }
.bracket-match-card[data-round="third"] { border-left: 3px solid var(--text-muted); }
.bk-team-row {
display: flex;
align-items: center;
gap: 5px;
padding: 0 8px;
min-height: 29px;
}
.bk-team-row + .bk-team-row {
border-top: 1px solid var(--border-light);
}
.bracket-team-name {
font-size: 13px;
font-weight: 600;
color: var(--text);
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bk-name-tbd {
color: var(--text-muted);
font-weight: 500;
font-size: 12px;
}
/* Winner / loser states */
.bk-row-win { background: var(--win-bg); }
.bk-row-win .bracket-team-name { color: var(--win); font-weight: 700; }
.bk-row-win .bk-score-ro { color: var(--win); }
.bk-row-lose .bracket-team-name,
.bk-row-lose .bk-score-ro {
color: var(--text-muted);
font-weight: 500;
}
.bk-check {
color: var(--win);
font-size: 12px;
font-weight: 800;
line-height: 1;
flex-shrink: 0;
}
/* Score inputs inside bracket cards — override the global 52×52 number input */
.bracket-score-input {
width: 26px !important;
height: 24px !important;
min-width: 26px;
border-radius: 4px !important;
border: 1px solid var(--border) !important;
background: var(--card) !important;
font-family: var(--font-ui) !important;
font-size: 13px !important;
font-weight: 700 !important;
color: var(--text) !important;
text-align: center !important;
padding: 0 !important;
flex-shrink: 0;
box-shadow: none !important;
}
.bracket-score-input:focus {
border-color: var(--blue) !important;
box-shadow: 0 0 0 2px var(--blue-pale) !important;
outline: none !important;
}
.bk-score-ro {
min-width: 18px;
text-align: center;
font-size: 13px;
font-weight: 700;
color: var(--text-sec);
flex-shrink: 0;
}
/* Winner row — only visible when the score is a draw */
.bk-winner-row {
padding: 4px 6px 5px;
border-top: 1px dashed var(--border);
background: var(--surface);
}
.bk-winner-row.bk-hidden { display: none; }
/* Override the global select padding/margin */
.bracket-winner-select {
width: 100% !important;
padding: 1px 4px !important;
font-size: 12px !important;
border-radius: 4px !important;
border: 1px solid var(--border) !important;
background: var(--card) !important;
color: var(--text) !important;
margin-bottom: 0 !important;
height: 22px;
line-height: 1;
cursor: pointer;
}
/* ── Admin: Actual bracket debug view ── */
.bk-slot {
font-size: 10px;
font-weight: 700;
color: var(--blue);
flex-shrink: 0;
margin-left: 2px;
}
.bk-debug-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
padding: 3px 6px;
border-top: 1px dashed var(--border);
background: var(--surface);
font-size: 10px;
font-weight: 700;
}
.bk-debug-num { color: var(--text-muted); }
.bk-debug-ok { color: var(--win); }
.bk-debug-muted { color: var(--text-muted); font-weight: 600; }
.bk-debug-flag { color: var(--red); }
/* Completed match whose winner wasn't propagated — the bug to spot */
.bracket-match-card.bk-card-bug {
border-color: var(--red);
box-shadow: 0 0 0 2px var(--red-pale);
}
/* ── Admin: Results page ── */
.admin-sort-btn {
font-size: 12px;
font-weight: 700;
padding: 6px 14px;
border-radius: var(--r-sm);
background: var(--surface);
color: var(--text-sec);
text-decoration: none;
border: 1.5px solid var(--border);
transition: background 0.15s, color 0.15s;
}
.admin-sort-btn.active {
background: var(--blue);
color: white;
border-color: var(--blue);
}
.admin-filter-bar[hidden] {
display: none;
}
.admin-filter-bar {
display: flex;
gap: 10px;
align-items: center;
padding: 12px 16px;
background: var(--card);
border: 1.5px solid var(--border);
border-radius: var(--r-md);
margin-bottom: 20px;
flex-wrap: wrap;
}
.admin-filter-label {
font-size: 11px;
font-weight: 700;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
flex-shrink: 0;
}
.admin-filter-bar select {
font-size: 12px;
padding: 6px 10px;
border: 1.5px solid var(--border);
border-radius: var(--r-sm);
background: var(--surface);
color: var(--text);
cursor: pointer;
}
.admin-filter-reset {
font-size: 11px;
font-weight: 700;
color: var(--text-muted);
background: none;
border: 1.5px solid var(--border);
border-radius: var(--r-sm);
padding: 6px 12px;
cursor: pointer;
margin-left: auto;
}
.admin-filter-reset:hover {
color: var(--text);
border-color: var(--text-muted);
}
/* ── Scoreboard mobile filter toggle (Area 1) ──
Hidden on desktop; the filter panel is always visible there. */
.sb-filter-toggle {
display: none;
}
@media (max-width: 768px) {
.sb-filter-toggle {
display: inline-flex;
align-items: center;
gap: 7px;
margin-bottom: 14px;
padding: 9px 16px;
font-family: var(--font-ui);
font-size: 13px;
font-weight: 700;
color: var(--text-sec);
background: var(--card);
border: 1.5px solid var(--border);
border-radius: var(--r-pill);
cursor: pointer;
}
.sb-filter-toggle-icon {
font-size: 14px;
line-height: 1;
}
/* Active-filter dot — pure CSS: lit when any filter select is off its
default (first) option, which always carries value="". */
.sb-filter-dot {
display: none;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--blue);
}
.sb-filter-section:has(.admin-filter-bar select:not(:has(option[value=""]:checked))) .sb-filter-dot {
display: inline-block;
}
/* Collapsed state hides the panel (mobile only) */
.filters-collapsed .admin-filter-bar {
display: none;
}
}
.admin-match-card {
border-bottom: 1px solid var(--border-light);
}
.admin-match-card:last-child {
border-bottom: none;
}
.admin-card-header {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 20px;
background: var(--surface);
border-bottom: 1px solid var(--border-light);
font-size: 11px;
color: var(--text-muted);
}
.admin-match-num {
font-family: var(--font-display);
font-weight: 900;
font-size: 12px;
color: var(--text-sec);
flex-shrink: 0;
}
.admin-card-body {
display: flex;
align-items: center;
padding: 12px 20px;
gap: 0;
}
.admin-advances-wrap {
margin-left: 20px;
flex-shrink: 0;
}
.admin-advances-label {
display: block;
font-size: 10px;
font-weight: 700;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.4px;
margin-bottom: 3px;
}
.admin-advances-select {
font-size: 12px;
padding: 5px 8px;
border: 1.5px solid var(--border);
border-radius: var(--r-sm);
background: var(--surface);
color: var(--text);
min-width: 140px;
}
.admin-save-btn {
margin-left: auto;
padding: 9px 20px;
font-size: 12px;
font-weight: 700;
font-family: var(--font-ui);
background: var(--blue);
color: white;
border: none;
border-radius: var(--r-sm);
cursor: pointer;
white-space: nowrap;
transition: opacity 0.15s;
}
.admin-save-btn:hover {
opacity: 0.85;
}
/* ── Admin "Por Fecha" dense table ── */
.adt-table {
display: grid;
grid-template-columns: 46px 104px minmax(110px, 1.3fr) minmax(90px, 1fr) 96px minmax(90px, 1fr) 64px 86px;
align-items: center;
background: var(--card);
border-radius: var(--r-xl);
box-shadow: var(--shadow-card);
overflow: hidden;
}
.adt-group,
.adt-row { display: contents; } /* children align to the shared grid */
.adt-head {
font-family: var(--font-display);
font-size: 11px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #fff;
background: var(--navy);
padding: 8px 6px;
white-space: nowrap;
position: sticky;
top: 0;
z-index: 2;
}
.adt-c-home { text-align: right; }
.adt-c-score { text-align: center; }
.adt-c-status { text-align: center; }
.adt-date {
grid-column: 1 / -1;
background: var(--surface);
font-family: var(--font-display);
font-weight: 900;
font-size: 12px;
color: var(--text-sec);
padding: 5px 10px;
border-top: 1px solid var(--border);
}
.adt-date-meta {
color: var(--text-muted);
font-weight: 600;
font-family: var(--font-ui);
margin-left: 6px;
}
.adt-row > * {
padding: 5px 8px;
border-top: 1px solid var(--border-light);
font-size: 13px;
min-width: 0;
}
.adt-num { font-family: var(--font-display); font-weight: 900; color: var(--blue); }
.adt-muted { color: var(--text-muted); font-size: 12px; }
.adt-cell, .adt-venue, .adt-team {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.adt-team { font-weight: 600; color: var(--text); }
.adt-home { text-align: right; }
.adt-away { display: flex; align-items: center; gap: 6px; }
.adt-score { display: flex; align-items: center; justify-content: center; gap: 4px; }
.adt-score .score-input {
width: 34px;
text-align: center;
padding: 3px;
}
.adt-advances { font-size: 11px; max-width: 96px; flex-shrink: 0; }
.adt-status { text-align: center; }
.adt-badge { font-size: 10px; }
.adt-pending { color: var(--text-muted); }
.adt-save {
font-size: 11px;
font-weight: 700;
font-family: var(--font-ui);
padding: 4px 10px;
border-radius: var(--r-pill);
background: var(--blue);
color: #fff;
border: none;
cursor: pointer;
white-space: nowrap;
transition: opacity 0.15s;
}
.adt-save:hover { opacity: 0.85; }
@media (max-width: 768px) {
.adt-table { overflow-x: auto; }
}
/* ── League predictions feed (mobile only) ──────────────────────────────
The feed replaces the table view on phones. It is hidden on desktop, where
the .sb-desktop table view shows instead. All feed styling lives in the
max-width:768px block below so desktop is completely unaffected. */
.lp-feed { display: none; }
.sb-desktop { display: block; }
/* ── Group-stage card grid (desktop Grupos tab) ─────────────────────────
Brings the mobile lp-card design to the desktop scoreboard. Lives in
.sb-desktop, so it is naturally hidden on phones (which use .lp-feed). */
.gs-wrap { margin-top: 4px; }
/* Filter bar matches the card list: same 860px cap, centered, same radius, so
the two stack as one cohesive block. */
.gs-controls {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
max-width: 860px; margin: 0 auto 18px; border-radius: var(--r-lg);
}
.gs-sort { display: inline-flex; gap: 6px; }
.gs-sort-btn {
padding: 7px 14px; border: 1px solid var(--border); border-radius: var(--r-pill);
background: var(--card); color: var(--text-sec);
font-family: var(--font-ui); font-size: 12px; font-weight: 700; cursor: pointer;
transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.gs-sort-btn:hover { border-color: var(--text-muted); }
.gs-sort-btn.active { background: var(--navy); color: #fff; border-color: var(--navy); }
/* Time-bucket tabs (Jugados / Hoy / Próximos / Todos) above the filter bar.
Same 860px cap as the grid so the block stays cohesive. */
.gs-buckets {
display: flex; gap: 6px; flex-wrap: wrap;
max-width: 860px; margin: 0 auto 12px;
}
.gs-bucket-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 16px; border: 1px solid var(--border); border-radius: var(--r-pill);
background: var(--card); color: var(--text-sec);
font-family: var(--font-ui); font-size: 13px; font-weight: 800; cursor: pointer;
transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.gs-bucket-btn:hover { border-color: var(--text-muted); }
.gs-bucket-btn.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.gs-bucket-count { font-size: 11px; font-weight: 700; opacity: 0.75; }
.gs-empty {
grid-column: 1 / -1;
padding: 28px 16px; text-align: center;
color: var(--text-muted); font-size: 13px;
}
/* Single-column list: one full-width card per row. Capped at a readable width
so cards don't stretch across ultra-wide screens. Each card owns its row, so
a wrapping team name no longer misaligns siblings. */
.gs-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; max-width: 860px; margin: 0 auto; }
.gs-group-header {
grid-column: 1 / -1;
font-family: var(--font-display); font-size: 17px; font-weight: 900; color: var(--text);
padding: 10px 2px 4px; margin-top: 6px; border-bottom: 2px solid var(--border-light);
}
.gs-card {
background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow-card);
border-left: 3px solid var(--blue); padding: 16px 20px;
transition: box-shadow 0.15s;
}
.gs-card:hover { box-shadow: var(--shadow-elevated); }
/* Two columns: left = header + title, right = split bar + footer. align-items
stretch keeps both columns the full card height so the right-column footer
(margin-top:auto) sits at the bottom regardless of team-name wrapping. */
.gs-card-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.gs-card-left, .gs-card-right { display: flex; flex-direction: column; min-width: 0; }
.gs-card-head {
display: flex; justify-content: space-between; align-items: center; gap: 8px;
margin-bottom: 12px;
font-size: 11px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
color: var(--text-muted);
}
.gs-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-badge { flex-shrink: 0; padding: 3px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 800; letter-spacing: 0; }
.gs-badge-done { background: var(--win-bg); color: var(--win); }
.gs-badge-soon { background: var(--surface); color: var(--text-sec); }
.gs-title { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.gs-title-home, .gs-title-away {
font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--text);
flex: 1; min-width: 0; line-height: 1.2;
}
.gs-title-home { text-align: left; }
.gs-title-away { text-align: right; }
.gs-title-vs { flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--text-muted); }
.gs-bar { display: flex; height: 9px; border-radius: var(--r-pill); overflow: hidden; background: var(--surface); margin-bottom: 7px; }
.gs-bar-seg { height: 100%; }
.gs-bar-home { background: var(--blue); }
.gs-bar-draw { background: var(--text-muted); }
.gs-bar-away { background: var(--gold); }
.gs-bar-seg.is-win { background: var(--win); }
.gs-bar-labels { display: flex; gap: 6px; }
.gs-bar-label { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 11px; }
.gs-bar-label-home { align-items: flex-start; text-align: left; }
.gs-bar-label-draw { align-items: center; text-align: center; }
.gs-bar-label-away { align-items: flex-end; text-align: right; }
.gs-bar-pct { font-weight: 800; color: var(--text); font-size: 12px; }
.gs-bar-name { color: var(--text-muted); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-bar-label.is-win .gs-bar-pct,
.gs-bar-label.is-win .gs-bar-name { color: var(--win); font-weight: 700; }
.gs-split-empty { font-size: 12px; color: var(--text-muted); font-style: italic; padding: 6px 0 8px; }
.gs-foot {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
margin-top: auto; padding-top: 11px; border-top: 1px solid var(--border-light);
font-size: 13px;
}
.gs-mine { color: var(--text-muted); font-weight: 600; min-width: 0; }
.gs-mine-score { font-family: var(--font-display); font-weight: 700; color: var(--text); margin-left: 3px; }
.gs-mine-none { font-style: italic; }
.gs-pts { margin-left: 6px; font-weight: 800; }
.gs-pts-pos { color: var(--win); }
.gs-pts-zero { color: var(--text-muted); }
.gs-seepicks { flex-shrink: 0; display: inline-flex; align-items: center; gap: 3px; color: var(--blue); font-weight: 700; }
.gs-seepicks:hover { color: var(--blue-light); }
.gs-chevron { font-size: 15px; line-height: 1; }
/* Tablet (above the 768px mobile-feed breakpoint): two columns get cramped, so
stack the card back to a single column. DOM order is header → title → bar →
footer, so it reads the same as the original vertical card. */
@media (max-width: 1023px) {
.gs-card-cols { grid-template-columns: 1fr; gap: 0; }
.gs-title { margin-bottom: 14px; } /* gap between stacked title and bar */
.gs-foot { margin-top: 14px; } /* fixed spacing when not bottom-pinned */
}
@media (max-width: 768px) {
.sb-desktop { display: none; }
.lp-feed { display: block; }
.lp-feed-head { margin-bottom: 16px; }
.lp-feed-title { font-family: var(--font-display); font-size: 22px; font-weight: 900; color: var(--text); line-height: 1.1; }
.lp-feed-sub { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-top: 2px; }
/* Tabs */
.lp-tabs { display: flex; gap: 6px; margin-bottom: 16px; }
.lp-tab {
flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
padding: 9px 6px; border: none; border-radius: var(--r-pill);
background: var(--surface); color: var(--text-sec);
font-family: var(--font-ui); font-size: 12px; font-weight: 700; cursor: pointer;
}
.lp-tab.active { background: var(--navy); color: #fff; }
.lp-tab-count { font-size: 10px; opacity: 0.75; font-weight: 700; }
.lp-empty { padding: 28px 16px; text-align: center; color: var(--text-muted); font-size: 13px; }
/* Match card (tappable) */
.lp-card {
display: block; text-decoration: none; color: var(--text);
background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow-card);
padding: 14px 16px; margin-bottom: 12px;
transition: box-shadow 0.15s, transform 0.1s;
}
.lp-card:active { transform: scale(0.99); box-shadow: var(--shadow-elevated); }
.lp-card-top {
display: flex; justify-content: space-between; align-items: center; gap: 8px;
margin-bottom: 12px;
font-size: 11px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
color: var(--text-muted);
}
.lp-seepicks { display: inline-flex; align-items: center; gap: 3px; color: var(--blue); flex-shrink: 0; }
.lp-chevron { font-size: 15px; line-height: 1; }
/* Teams + score */
.lp-teams { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.lp-team { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--text);
flex: 1; min-width: 0; line-height: 1.2; }
.lp-team-home { text-align: left; }
.lp-team-away { text-align: right; }
.lp-vs { flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--text-muted); }
.lp-score { flex-shrink: 0; font-family: var(--font-display); font-weight: 900; font-size: 18px; color: var(--win); }
/* Split bar */
.lp-bar {
display: flex; height: 8px; border-radius: var(--r-pill); overflow: hidden;
background: var(--surface); margin-bottom: 7px;
}
.lp-bar-seg { height: 100%; }
.lp-bar-home { background: var(--blue); }
.lp-bar-draw { background: var(--text-muted); }
.lp-bar-away { background: var(--gold); }
.lp-bar-seg.is-win { background: var(--win); } /* crowd matched the actual result */
.lp-bar-labels { display: flex; gap: 6px; }
.lp-bar-label { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 11px; color: var(--text-sec); }
.lp-bar-label-home { align-items: flex-start; text-align: left; }
.lp-bar-label-draw { align-items: center; text-align: center; }
.lp-bar-label-away { align-items: flex-end; text-align: right; }
.lp-bar-pct { font-weight: 800; color: var(--text); font-size: 12px; }
.lp-bar-name { color: var(--text-muted); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-bar-label.is-win .lp-bar-pct,
.lp-bar-label.is-win .lp-bar-name { color: var(--win); font-weight: 700; }
.lp-split-empty { font-size: 12px; color: var(--text-muted); font-style: italic; padding: 2px 0; }
/* Your prediction */
.lp-divider { height: 1px; background: var(--border-light); margin: 12px 0 10px; }
.lp-mine { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
.lp-mine-label { color: var(--text-muted); font-weight: 600; }
.lp-mine-score { font-family: var(--font-display); font-weight: 700; color: var(--text); margin-left: 4px; }
.lp-mine-none { font-style: italic; }
.lp-pts { flex-shrink: 0; font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: var(--r-pill); }
.lp-pts-pos { background: var(--win-bg); color: var(--win); }
.lp-pts-zero { background: var(--loss-bg); color: var(--loss); }
}
/* ── Scoreboard (Pronósticos de la liga) ── */
.sb-tabs {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 16px;
}
.sb-tab-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 16px;
border-radius: var(--r-pill);
font-family: var(--font-ui);
font-size: 13px;
font-weight: 700;
border: 1.5px solid var(--border);
background: var(--card);
color: var(--text-sec);
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sb-tab-btn:hover {
background: var(--surface);
color: var(--text);
}
.sb-tab-btn.active {
background: var(--navy);
border-color: var(--navy);
color: white;
}
.sb-tab-count {
background: rgba(0,0,0,0.12);
border-radius: var(--r-pill);
font-size: 10px;
font-weight: 700;
padding: 1px 6px;
line-height: 1.4;
}
.sb-tab-btn.active .sb-tab-count {
background: rgba(255,255,255,0.18);
}
.sb-panel {
background: var(--card);
border-radius: var(--r-xl);
box-shadow: var(--shadow-card);
overflow: hidden;
}
.sb-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.sb-table {
border-collapse: collapse;
width: max-content;
min-width: 100%;
font-family: var(--font-ui);
}
/* ── Sticky / frozen columns ── */
.sb-sticky {
position: sticky;
z-index: 2;
background: var(--card);
}
.sb-table thead .sb-sticky {
z-index: 3;
background: var(--navy);
}
.sb-table thead tr:nth-child(2) .sb-sticky {
background: var(--navy-mid);
}
.sb-table tbody tr:hover .sb-sticky {
background: var(--surface);
}
/* Shadow on last frozen column marks scroll boundary */
.sb-sticky-end {
box-shadow: 3px 0 8px -2px rgba(11,25,41,0.12);
}
.sb-table thead .sb-sticky-end {
box-shadow: 3px 0 8px -2px rgba(0,0,0,0.35);
}
/* Header rows */
.sb-table thead tr:first-child {
background: var(--navy);
}
.sb-table thead tr:nth-child(2) {
background: var(--navy-mid);
}
.sb-th {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.6px;
padding: 9px 10px;
text-align: center;
color: rgba(255,255,255,0.7);
white-space: nowrap;
border-right: 1px solid rgba(255,255,255,0.07);
}
.sb-th:last-child { border-right: none; }
/* Player name header spans 3 columns */
.sb-th-player {
border-right: 1px solid rgba(255,255,255,0.15) !important;
color: white;
font-size: 11px;
letter-spacing: 0;
text-transform: none;
max-width: 110px;
overflow: hidden;
text-overflow: ellipsis;
}
.sb-th-sub {
font-size: 9px;
padding: 5px 8px;
color: rgba(255,255,255,0.5);
}
/* Fixed-width first columns */
.sb-col-first {
width: 52px;
min-width: 52px;
text-align: center !important;
}
.sb-col-partido {
width: 210px;
min-width: 210px;
text-align: left !important;
}
.sb-col-fecha {
width: 82px;
min-width: 82px;
text-align: center !important;
}
.sb-col-ciudad {
width: 110px;
min-width: 110px;
text-align: left !important;
}
.sb-col-result {
width: 72px;
min-width: 72px;
text-align: center !important;
}
/* Body rows */
.sb-table tbody tr {
border-bottom: 1px solid var(--border-light);
}
.sb-table tbody tr:last-child {
border-bottom: none;
}
.sb-table tbody tr:hover {
background: var(--surface);
}
.sb-td {
padding: 9px 10px;
font-size: 12px;
color: var(--text);
text-align: center;
vertical-align: middle;
border-right: 1px solid var(--border-light);
}
.sb-td:last-child { border-right: none; }
.sb-col-partido.sb-td {
text-align: left;
white-space: nowrap;
}
.sb-col-result.sb-td {
border-right: 2px solid var(--border);
}
/* Match info */
.sb-group-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--blue-pale);
color: var(--blue);
font-size: 11px;
font-weight: 900;
font-family: var(--font-display);
}
.sb-match-num {
font-family: var(--font-display);
font-size: 11px;
font-weight: 900;
color: var(--text-muted);
}
.sb-team-home,
.sb-team-away {
font-size: 12px;
font-weight: 600;
color: var(--text);
}
.sb-vs {
font-size: 10px;
color: var(--text-muted);
margin: 0 5px;
}
.sb-result-val {
font-family: var(--font-display);
font-size: 13px;
font-weight: 900;
color: var(--text);
}
.sb-no-result {
color: var(--text-muted);
}
/* Knockout predicted team columns */
.sb-col-team {
width: 68px;
min-width: 68px;
}
.sb-team-trunc {
width: 64px;
max-width: 64px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 11px;
font-weight: 600;
color: var(--text-sec);
text-align: left;
}
/* Prediction score columns */
.sb-td-score {
font-family: var(--font-display);
font-size: 13px;
font-weight: 900;
color: var(--text-sec);
width: 30px;
min-width: 30px;
}
/* Points column */
.sb-pts {
font-family: var(--font-display);
font-size: 13px;
font-weight: 900;
width: 36px;
min-width: 36px;
border-right: 1px solid var(--border) !important;
}
.sb-pts-green {
background: var(--win-bg);
color: var(--win);
}
.sb-pts-red {
background: var(--loss-bg);
color: var(--loss);
}
.sb-no-pred {
color: var(--text-muted);
opacity: 0.5;
}
.sb-fecha-day {
font-size: 11px;
font-weight: 700;
color: var(--text);
line-height: 1.3;
}
.sb-fecha-time {
font-size: 10px;
color: var(--text-muted);
line-height: 1.3;
}
.sb-ciudad-val {
font-size: 11px;
color: var(--text-sec);
font-weight: 500;
white-space: nowrap;
}
.sb-sort-btn {
font-size: 12px;
font-weight: 700;
padding: 6px 14px;
border-radius: var(--r-sm);
background: var(--surface);
color: var(--text-sec);
border: 1.5px solid var(--border);
cursor: pointer;
transition: background 0.15s, color 0.15s;
font-family: var(--font-ui);
}
.sb-sort-btn:hover {
background: var(--border);
color: var(--text);
}
.sb-sort-btn.active {
background: var(--blue);
color: white;
border-color: var(--blue);
}
@media (max-width: 768px) {
.sb-tabs {
gap: 4px;
}
.sb-tab-btn {
font-size: 12px;
padding: 6px 12px;
}
}
/* ── Mobile/tablet (< 768px): the 5 frozen columns (526px) overflow the
screen, leaving no room to scroll the participant columns into view. Drop the
secondary Fecha/Ciudad frozen columns, slim the rest, and re-anchor the inline
`left` offsets so the frozen block fits (~200px). Resultado stays frozen. */
@media (max-width: 768px) {
/* Hide secondary frozen columns (header th + body td share these classes) */
.sb-col-fecha,
.sb-col-ciudad {
display: none !important;
}
.sb-col-first {
width: 32px !important;
min-width: 32px !important;
}
.sb-col-partido {
width: 118px !important;
min-width: 118px !important;
left: 32px !important; /* overrides inline left: 52px */
}
/* Allow long "Equipo vs Equipo" to wrap instead of clipping */
.sb-col-partido.sb-td {
white-space: normal;
}
.sb-col-result {
width: 50px !important;
min-width: 50px !important;
left: 150px !important; /* overrides inline left: 454px (32 + 118) */
}
/* Tighter cells so more participant columns fit per scroll */
.sb-th,
.sb-td {
padding: 5px 7px;
}
/* Slightly smaller numeric cells; team names keep their own 12px rule */
.sb-td {
font-size: 11px;
}
.sb-group-badge {
width: 20px;
height: 20px;
font-size: 10px;
}
}
/* ── View toggle (Por Partido / Por Participante) ─────────────────── */
.sb-view-toggle {
display: flex;
gap: 6px;
margin-bottom: 10px;
}
.sb-view-btn {
display: inline-flex;
align-items: center;
padding: 6px 14px;
border-radius: var(--r-pill);
font-family: var(--font-ui);
font-size: 12px;
font-weight: 700;
border: 1.5px solid var(--border);
background: var(--surface);
color: var(--text-sec);
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sb-view-btn:hover {
background: var(--blue-pale);
color: var(--blue);
border-color: var(--blue);
}
.sb-view-btn.active {
background: var(--blue);
color: white;
border-color: var(--blue);
}
/* ── Transposed table ─────────────────────────────────────────────── */
.sbt-table {
table-layout: auto;
}
.sbt-sticky-left {
position: sticky;
left: 0;
z-index: 2;
background: var(--card);
min-width: 110px;
max-width: 150px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
padding-left: 12px !important;
box-shadow: 2px 0 4px rgba(11,25,41,0.06);
}
.sb-table thead .sbt-sticky-left {
background: var(--navy);
z-index: 3;
}
.sbt-sticky-right {
position: sticky;
right: 0;
z-index: 2;
background: var(--exact-bg);
color: var(--exact);
font-weight: 700;
min-width: 48px;
text-align: center;
box-shadow: -2px 0 4px rgba(11,25,41,0.08);
}
.sb-table thead .sbt-sticky-right {
background: var(--navy);
color: white;
z-index: 3;
}
.sbt-match-header {
font-size: 10px;
font-weight: 700;
white-space: nowrap;
text-align: center;
min-width: 72px;
}
.sbt-border-left {
border-left: 2px solid var(--border-light) !important;
}
.sbt-sub {
font-size: 9px;
}
.sbt-pts-header {
background: var(--exact-bg) !important;
color: var(--exact) !important;
}
.sbt-td {
font-size: 12px;
text-align: center;
padding: 5px 6px;
white-space: nowrap;
}
.sbt-pts-cell {
font-family: var(--font-display);
font-size: 12px;
font-weight: 700;
text-align: center;
min-width: 30px;
background: var(--exact-bg);
}
.sbt-team-cell {
font-size: 10px;
font-weight: 700;
color: var(--text-sec);
letter-spacing: 0.03em;
}
.sbt-total-cell {
font-family: var(--font-display);
font-size: 13px;
font-weight: 900;
text-align: center;
}
/* Official result row */
.sbt-result-row td {
background: var(--win-bg);
color: var(--win);
font-weight: 700;
border-bottom: 2px solid var(--win);
}
.sbt-result-row .sbt-sticky-left {
background: var(--win-bg);
color: var(--win);
}
.sbt-result-row .sbt-sticky-right {
background: var(--win-bg);
color: var(--win);
}
.sbt-result-label {
font-size: 11px;
font-weight: 700;
}
/* PTS cell colors */
.sbt-pts-exact { background: #c6f0d4; color: #1a5c31; font-weight: 700; }
.sbt-pts-7 { background: #d4eaff; color: #0a4080; font-weight: 600; }
.sbt-pts-partial { background: #d4eaff; color: #0a4080; }
.sbt-pts-1 { background: #fff3cc; color: #7a5c00; }
.sbt-pts-0 { background: #fce8e8; color: #8b0000; }
/* ── Bracket scoreboard (bsb) ─────────────────────────────────────── */
/* Slot column headers: round/slot label + the actual team that filled it. */
.bsb-slot-th {
min-width: 96px;
vertical-align: top;
}
.bsb-slot-label {
font-size: 9px;
color: rgba(255,255,255,0.5);
letter-spacing: 0.6px;
}
.bsb-slot-team {
margin-top: 3px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0;
text-transform: none;
color: #fff;
white-space: nowrap;
}
/* Member name (sticky left) — larger per UI-density preference. */
.bsb-member-name {
font-size: 14px;
font-weight: 700;
color: var(--text);
}
.bsb-member-pts {
font-size: 11px;
font-weight: 700;
color: var(--text-muted);
margin-top: 1px;
}
/* Predicted-team cells: green when it matches the actual team, red otherwise
(including when the member made no prediction for the slot). */
.bsb-cell {
font-size: 11px;
font-weight: 600;
min-width: 96px;
}
.bsb-hit {
background: var(--win-bg);
color: var(--win);
}
.bsb-miss {
background: var(--loss-bg);
color: var(--loss);
}
/* Correct team that DID advance to this round, but to a different match/slot
than the one the member placed it in. Right team, wrong cruce → blue. */
.bsb-advanced {
background: var(--blue-pale);
color: var(--blue);
}
/* Round not yet decided: show the prediction without judging it. */
.bsb-pending {
background: var(--surface);
color: var(--text-muted);
}
/* Matchup bonus: a gold frame around the two cells of a match where the member
got BOTH teams right (in the correct slots). The cells keep their normal green
hit background; the frame is a ::after pseudo-element inset inside each cell —
the left cell carries the left half (rounded left corners, open right), the
right cell the right half — so the pair reads as one rounded box without
overlapping neighbours. */
.bsb-page td.bsb-mu-start {
position: relative;
}
.bsb-page td.bsb-mu-start::after {
content: '';
position: absolute;
inset: 3px 0 3px 3px;
border: 2px solid #f0c040;
border-right: none;
border-radius: 5px 0 0 5px;
pointer-events: none;
}
.bsb-page td.bsb-mu-end {
position: relative;
}
.bsb-page td.bsb-mu-end::after {
content: '';
position: absolute;
inset: 3px 3px 3px 0;
border: 2px solid #f0c040;
border-left: none;
border-radius: 0 5px 5px 0;
pointer-events: none;
}
.bsb-none {
font-style: italic;
opacity: 0.85;
}
/* Make the sticky TOTAL stand out a touch more on this page. */
.bsb-page .sbt-total-cell {
font-size: 14px;
}
/* Participant column left-aligned (header + member cells). */
.bsb-page .sbt-sticky-left {
text-align: left;
}
/* Uniform column widths — independent of team-name length. Header cells in
the first row drive the widths under fixed layout; names truncate with an
ellipsis (full name on hover via title). */
.bsb-page .sb-table {
table-layout: fixed;
}
.bsb-page .sbt-sticky-left { width: 150px; }
.bsb-page .bsb-slot-th { width: 104px; }
.bsb-page .sbt-sticky-right { width: 56px; }
.bsb-page .bsb-cell,
.bsb-page .bsb-slot-team {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Real ![]()
flags (flagcdn) — emoji flags don't render on Windows. */
.team-flag-img {
display: inline-block;
vertical-align: -2px;
margin-right: 5px;
border-radius: 2px;
object-fit: cover;
box-shadow: 0 0 0 1px rgba(0,0,0,0.12);
}
/* ── Frozen header row + participant column ───────────────────────────
The participant column is already sticky-left; here we also pin the
header row to the top by making each panel its own vertical scroll
container and sticking the header cells to top: 0. */
.bsb-page .sb-table-wrap {
max-height: calc(100vh - 230px);
overflow: auto;
}
.bsb-page .sb-table thead .sb-th {
position: sticky;
top: 0;
z-index: 4;
/* Background must sit on the sticky cell itself — the navy on the
doesn't move with it, leaving the header transparent while scrolling. */
background: var(--navy);
}
/* Top-left and top-right corners must outrank both sticky axes. */
.bsb-page .sb-table thead .sbt-sticky-left,
.bsb-page .sb-table thead .sbt-sticky-right {
top: 0;
z-index: 6;
}
/* ── Desktop / mobile layout switch ───────────────────────────────────
The bracket-phase panels render both a table (desktop) and an accordion
(mobile); only one is shown per breakpoint. The Top-4 panel has no
accordion — it keeps its table on both. */
.bsb-desktop-only { display: block; }
.bsb-mobile-only { display: none; }
/* ── Legend ───────────────────────────────────────────────────────────
Three states: equipo acertado / fallado / partido acertado (gold frame). */
.bsb-legend {
display: flex; flex-wrap: wrap; gap: 16px;
margin-top: 16px; padding: 12px 14px;
background: var(--card); border-radius: var(--r-md);
box-shadow: var(--shadow-card);
font-size: 12px; font-weight: 600; color: var(--text-sec);
}
.bsb-legend-item { display: inline-flex; align-items: center; gap: 7px; }
.bsb-legend-swatch { width: 18px; height: 18px; border-radius: var(--r-xs); flex-shrink: 0; }
.bsb-legend-hit { background: var(--win-bg); }
.bsb-legend-adv { background: var(--blue-pale); }
.bsb-legend-miss { background: var(--loss-bg); }
.bsb-legend-mu { background: var(--win-bg); box-shadow: inset 0 0 0 2px #f0c040; }
/* ── Bracket scoreboard on phones ─────────────────────────────────────
The page wrapper carries .sb-desktop, which is display:none on phones
(the regular scoreboard swaps to .lp-feed there). The bracket page has
no feed view, so without this it would vanish entirely on mobile. The
table already has a frozen participant column, a sticky TOTAL and
horizontal scroll, so we simply re-enable it and tighten the sizing so
more of the bracket is reachable per swipe. */
@media (max-width: 768px) {
/* Re-enable the page (its wrapper carries .sb-desktop, hidden on phones). */
.bsb-page.sb-desktop { display: block; }
/* Swap each bracket-phase table for its accordion. */
.bsb-desktop-only { display: none; }
.bsb-mobile-only { display: block; }
/* The Top-4 panel keeps its table on mobile (no accordion) — slim its
frozen columns so it scrolls cleanly. */
.bsb-page .sbt-sticky-left { width: 116px; }
.bsb-page .sbt-sticky-right { width: 44px; }
.bsb-page .bsb-member-name { font-size: 13px; }
.bsb-page .bsb-member-pts { font-size: 10px; }
.bsb-page .sbt-td { padding: 6px 5px; }
.bsb-page .sb-table-wrap { max-height: calc(100vh - 200px); }
/* ── Match accordion ── */
.bsb-acc { display: flex; flex-direction: column; }
.bsb-acc-tile { border-bottom: 1px solid var(--border); }
.bsb-acc-tile:last-child { border-bottom: none; }
/* Header — always visible, acts as the toggle. */
.bsb-acc-head {
width: 100%; display: flex; align-items: center; justify-content: space-between;
gap: 8px; padding: 10px;
background: var(--surface); border: none; border-bottom: 0.5px solid var(--border);
font-family: var(--font-ui); text-align: left; color: var(--text); cursor: pointer;
}
.bsb-acc-teams {
display: flex; align-items: center; gap: 6px; min-width: 0;
font-size: 12px; font-weight: 700;
}
.bsb-acc-team { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bsb-acc-vs { flex-shrink: 0; font-size: 10px; font-weight: 600; color: var(--text-muted); }
.bsb-acc-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.bsb-acc-count {
font-size: 10px; font-weight: 700; color: var(--text-muted); white-space: nowrap;
}
.bsb-acc-chevron {
font-size: 11px; color: var(--text-muted);
transition: transform 0.12s; transform-origin: center;
}
/* Rotate the ▸ glyph to point down (▾) when the tile is open. */
.bsb-acc-tile.open .bsb-acc-chevron { transform: rotate(90deg); }
/* Body — hidden until the tile is open. */
.bsb-acc-body { display: none; padding: 0 8px 6px; background: var(--card); }
.bsb-acc-tile.open .bsb-acc-body { display: block; }
.bsb-acc-row {
display: flex; align-items: center; gap: 6px;
padding: 4px 0; border-bottom: 1px solid var(--border-light);
}
.bsb-acc-row:last-child { border-bottom: none; }
.bsb-acc-name {
width: 52px; flex-shrink: 0;
font-size: 10px; font-weight: 500; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bsb-acc-chips { display: flex; flex: 1; gap: 5px; min-width: 0; }
.bsb-acc-chip {
flex: 1; min-width: 0;
font-size: 10px; padding: 3px 6px; border-radius: 3px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bsb-acc-chip-hit { background: var(--win-bg); color: var(--win); }
.bsb-acc-chip-miss { background: var(--loss-bg); color: var(--loss); }
.bsb-acc-chip-advanced { background: var(--blue-pale); color: var(--blue); }
.bsb-acc-chip-pending { background: var(--surface); color: var(--text-muted); }
/* Matchup hit (both teams right): green hit chip with a gold ::after frame,
the left chip carrying the left half and the right chip the right half. */
.bsb-acc-chip.bsb-acc-mu-home {
position: relative;
}
.bsb-acc-chip.bsb-acc-mu-home::after {
content: '';
position: absolute;
inset: 2px 0 2px 2px;
border: 1.5px solid #f0c040;
border-right: none;
border-radius: 4px 0 0 4px;
pointer-events: none;
}
.bsb-acc-chip.bsb-acc-mu-away {
position: relative;
}
.bsb-acc-chip.bsb-acc-mu-away::after {
content: '';
position: absolute;
inset: 2px 2px 2px 0;
border: 1.5px solid #f0c040;
border-left: none;
border-radius: 0 4px 4px 0;
pointer-events: none;
}
.bsb-acc-pts {
width: 22px; flex-shrink: 0; text-align: right;
font-size: 9px; font-weight: 600;
}
.bsb-acc-pts-full { color: var(--gold); }
.bsb-acc-pts-partial { color: var(--text-muted); }
.bsb-acc-pts-zero { color: var(--loss); }
.bsb-acc-pts-pending { color: var(--text-muted); }
/* Official row: light-green band, bleeding to the tile edges. Kept light
per the project's white-card theme rather than the dark reference. */
.bsb-acc-official {
background: var(--win-bg); margin: 0 -8px; padding: 5px 8px;
border-bottom: 1px solid var(--win);
}
.bsb-acc-official .bsb-acc-name {
color: var(--win); font-weight: 800; font-size: 9px;
text-transform: uppercase; letter-spacing: 0.5px;
}
.bsb-acc-chip-off { background: rgba(255,255,255,0.7); color: var(--win); font-weight: 700; }
}
/* ── Match detail (predictions per match) ─────────────────────────── */
.sb-match-link {
display: block;
margin: -9px -10px;
padding: 9px 10px;
color: inherit;
text-decoration: none;
cursor: pointer;
border-radius: var(--r-xs);
transition: background 0.12s;
}
.sb-match-link:hover {
background: var(--blue-pale);
}
.sb-match-link:hover .sb-team-home,
.sb-match-link:hover .sb-team-away {
color: var(--blue);
}
.mdp-hero {
background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
border-radius: var(--r-lg);
padding: 22px 24px 20px;
margin-bottom: 18px;
color: white;
}
.mdp-hero-meta {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
}
.mdp-group-badge {
display: inline-flex;
align-items: center;
padding: 3px 10px;
border-radius: var(--r-pill);
background: var(--gold-bright);
color: var(--navy);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.mdp-hero-info {
font-size: 12px;
font-weight: 600;
color: rgba(255, 255, 255, 0.65);
}
.mdp-hero-teams {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 16px;
}
.mdp-hero-team {
font-family: var(--font-display);
font-size: 24px;
font-weight: 900;
line-height: 1.2;
}
.mdp-hero-home { text-align: right; }
.mdp-hero-away { text-align: left; }
.mdp-hero-score {
font-family: var(--font-display);
font-size: 34px;
font-weight: 900;
color: var(--gold-bright);
white-space: nowrap;
}
.mdp-hero-vs {
font-size: 15px;
font-weight: 700;
color: rgba(255, 255, 255, 0.5);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.mdp-hero-pending {
margin-top: 10px;
text-align: center;
font-size: 12px;
font-weight: 600;
color: rgba(255, 255, 255, 0.55);
}
.mdp-share {
display: flex;
justify-content: flex-end;
margin-bottom: 16px;
}
.mdp-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
align-items: start;
}
.mdp-col {
background: var(--card);
border: 1.5px solid var(--border);
border-radius: var(--r-md);
overflow: hidden;
}
.mdp-col-winner {
border-color: var(--win);
background: var(--win-bg);
}
.mdp-col-winner .mdp-col-head {
background: var(--win);
border-bottom-color: var(--win);
}
.mdp-col-winner .mdp-col-head .mdp-col-title,
.mdp-col-winner .mdp-col-head .mdp-col-count {
color: white;
}
.mdp-col-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
padding: 11px 14px;
background: var(--navy);
border-bottom: 1.5px solid var(--border);
}
.mdp-col-title {
font-family: var(--font-display);
font-size: 15px;
font-weight: 800;
color: white;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mdp-col-title-draw {
color: var(--gold-bright);
}
.mdp-col-count {
flex-shrink: 0;
font-size: 11px;
font-weight: 700;
color: rgba(255, 255, 255, 0.6);
}
.mdp-list {
list-style: none;
margin: 0;
padding: 4px 0;
}
.mdp-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 7px 14px;
font-size: 13px;
border-bottom: 1px solid var(--border-light);
}
.mdp-row:last-child {
border-bottom: none;
}
.mdp-col-winner .mdp-row {
border-bottom-color: rgba(21, 128, 61, 0.12);
}
.mdp-row-me .mdp-name-text {
font-weight: 800;
color: var(--blue);
}
.mdp-name {
display: flex;
align-items: center;
gap: 7px;
min-width: 0;
}
.mdp-name-text {
font-weight: 600;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Overall league-rank bubble next to each participant */
.mdp-rank-bubble {
flex-shrink: 0;
width: 20px;
height: 20px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: 11px;
font-weight: 900;
line-height: 1;
background: var(--surface);
color: var(--text-sec);
}
.mdp-rank-1 { background: var(--gold-bright); color: var(--navy); }
.mdp-rank-2 { background: #C3CBD6; color: var(--navy); }
.mdp-rank-3 { background: #D89A62; color: white; }
.mdp-pick {
flex-shrink: 0;
font-family: var(--font-display);
font-size: 13px;
font-weight: 700;
color: var(--text-sec);
white-space: nowrap;
}
.mdp-col-winner .mdp-pick {
color: var(--win);
}
.mdp-empty {
padding: 22px 14px;
text-align: center;
font-size: 12px;
color: var(--text-muted);
}
/* ── Page header (title + back link) ─────────────────────────────── */
.page-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin-bottom: 16px;
}
.page-head h1 { font-size: 20px; margin: 0; }
.page-back {
font-size: 12px;
font-weight: 600;
color: var(--text-muted);
white-space: nowrap;
flex-shrink: 0;
}
.page-back:hover { color: var(--text-sec); }
/* ── Progress bar (predictions completed) ─────────────────────────── */
.progress-row { margin-bottom: 16px; }
.progress-label {
font-size: 13px;
color: var(--text-sec);
margin-bottom: 6px;
}
.progress-track {
height: 6px;
border-radius: var(--r-pill);
background: var(--border);
overflow: hidden;
}
.progress-fill {
height: 100%;
border-radius: var(--r-pill);
background: linear-gradient(90deg, var(--blue), var(--blue-light));
transition: width 0.3s;
}
.progress-fill.complete { background: var(--win); }
/* ── Read-only score box (locked predictions) ─────────────────────── */
.score-display {
width: 52px;
height: 52px;
border-radius: var(--r-md);
border: 1.5px solid var(--border);
background: var(--surface);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: 22px;
font-weight: 900;
color: var(--text-muted);
flex-shrink: 0;
}
/* ── Auth screens (login / signup / password) ─────────────────────── */
.auth-wrap {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 24px 16px;
background: var(--navy);
background-image: radial-gradient(circle, rgba(255,255,255,0.09) 1.5px, transparent 1.5px);
background-size: 11px 11px;
}
.auth-card { width: 100%; max-width: 400px; padding: 36px 32px; }
.auth-logo { text-align: center; margin-bottom: 24px; }
.auth-app-name {
font-family: var(--font-display);
font-size: 28px;
font-weight: 900;
color: var(--navy);
}
.auth-app-sub {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.2px;
color: var(--text-muted);
margin-top: 4px;
}
.auth-title { font-size: 18px; text-align: center; margin-bottom: 16px; }
.auth-sub {
font-size: 13px;
color: var(--text-sec);
text-align: center;
margin: -8px 0 20px;
}
.auth-links {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--border-light);
display: flex;
flex-direction: column;
gap: 8px;
text-align: center;
font-size: 13px;
font-weight: 600;
}
.check-row {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--text-sec);
margin: 2px 0 14px;
cursor: pointer;
}
.check-row input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: var(--blue);
margin: 0;
}
.field-hint {
font-size: 11px;
color: var(--text-muted);
margin: -8px 0 12px;
}
/* ── Join league ──────────────────────────────────────────────────── */
.join-card {
max-width: 420px;
margin: 24px auto 0;
padding: 36px 28px;
text-align: center;
}
.join-emoji { font-size: 44px; margin-bottom: 12px; line-height: 1; }
.join-title { font-size: 24px; margin-bottom: 6px; }
.join-sub { font-size: 13px; color: var(--text-sec); margin-bottom: 24px; }
.join-card label { text-align: left; }
.invite-code-input {
text-transform: uppercase;
text-align: center;
font-family: 'Courier New', monospace;
font-size: 18px !important;
font-weight: 700;
letter-spacing: 4px;
}
/* ── Leaderboard podium ───────────────────────────────────────────── */
.podium {
background: var(--navy);
background-image: radial-gradient(circle, rgba(255,255,255,0.09) 1.5px, transparent 1.5px);
background-size: 11px 11px;
padding: 20px 16px 0;
display: flex;
align-items: flex-end;
justify-content: center;
gap: 10px;
}
.podium-col {
display: flex;
flex-direction: column;
align-items: center;
width: 92px;
min-width: 0;
}
.podium-name {
font-family: var(--font-display);
font-size: 13px;
font-weight: 900;
color: rgba(255,255,255,0.85);
margin-bottom: 3px;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.podium-pts {
font-family: var(--font-display);
font-size: 16px;
font-weight: 900;
}
.podium-block {
width: 100%;
border: 2px solid;
border-bottom: none;
border-radius: 6px 6px 0 0;
display: flex;
align-items: center;
justify-content: center;
margin-top: 6px;
font-size: 22px;
}
/* ── Leaderboard table ────────────────────────────────────────────── */
.league-page { max-width: 980px; margin: 0 auto; }
/* "Mis Pronósticos" links: base = wrapping grid (mobile/tablet unchanged).
The desktop two-column layout (≥1024px) overrides this to a vertical stack. */
.mp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
/* Desktop-only scoreboard CTA card in the right column; hidden by default so
mobile/tablet keep the "Ve pronósticos" button (.lp-mobile-cta) instead. */
.lp-cta-card { display: none; }
.lb-heading {
font-family: var(--font-display);
font-size: 17px;
font-weight: 900;
color: var(--text);
padding: 14px 16px 4px;
margin: 0;
}
.lb-heading span {
font-family: var(--font-ui);
font-size: 11px;
font-weight: 600;
color: var(--text-muted);
margin-left: 6px;
}
.share-card-btn {
font-family: var(--font-ui);
font-size: 12px;
font-weight: 600;
color: var(--blue);
background: var(--blue-pale);
border: 1px solid var(--blue-light);
border-radius: var(--r-pill);
padding: 5px 12px;
cursor: pointer;
white-space: nowrap;
transition: background 0.15s, color 0.15s;
flex-shrink: 0;
}
.share-card-btn:hover { background: var(--blue); color: #fff; }
.share-card-btn:disabled { opacity: 0.6; cursor: default; }
.lb-scroll { overflow-x: visible; -webkit-overflow-scrolling: touch; }
.lb-table { margin: 0; width: 100%; table-layout: fixed; }
.lb-table thead th { padding: 8px 5px; }
.lb-table td { padding: 8px 5px; }
.lb-table th.lb-center { text-align: center; }
/* Rank column: breathing room from the table's left edge and from the avatar. */
.lb-table th.col-rank, .lb-table td.col-rank { text-align: center; padding-left: 14px; padding-right: 10px; }
/* Champion-flag column: flags share one centered column so they line up. */
.lb-table th.col-champ, .lb-table td.col-champ { text-align: center; padding-left: 4px; padding-right: 4px; }
/* Movement column hugs the Total column and shares its gold background so it
reads as part of the Total column rather than a separate one. The left
padding separates it from the Premios column. */
.lb-table th.col-movement, .lb-table td.col-movement {
text-align: right;
padding-left: 14px;
padding-right: 2px;
background: rgba(201, 146, 10, 0.08);
}
/* Match the Total column's font so the arrows read as part of it. */
.lb-table td.col-movement {
font-family: var(--font-display);
font-size: 16px;
font-weight: 900;
}
/* Rank medal badge */
.lb-rank-badge {
width: 28px;
height: 28px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: 13px;
font-weight: 900;
background: var(--surface);
color: var(--text-sec);
}
.lb-rank-1 { background: var(--gold-bright); color: var(--navy); }
.lb-rank-2 { background: #C3CBD6; color: var(--navy); }
.lb-rank-3 { background: #D89A62; color: white; }
.lb-player { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lb-avatar {
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--blue);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: 12px;
font-weight: 900;
color: white;
flex-shrink: 0;
}
.lb-champ-flag {
font-family: "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
font-size: 17px;
line-height: 1;
flex-shrink: 0;
}
.lb-name { font-size: 15px; font-weight: 700; line-height: 1.25; }
.lb-name a { color: var(--text); }
.lb-name a:hover { color: var(--blue); }
/* Mobile-only breakdown under the name */
.lb-sub-stats {
display: none;
font-size: 11px;
color: var(--text-muted);
margin-top: 1px;
white-space: nowrap;
}
.lb-num { text-align: center; font-size: 13px; color: var(--text-muted); }
.lb-num-strong { text-align: center; font-size: 13px; color: var(--text-sec); font-weight: 600; }
/* Knockout columns grouped with a faint band */
.lb-band { background: rgba(24, 82, 204, 0.04); }
/* Total column anchored in gold */
.lb-total-cell {
text-align: center;
font-family: var(--font-display);
font-size: 19px;
font-weight: 900;
color: var(--navy);
background: rgba(201, 146, 10, 0.08);
}
th.lb-total-th {
color: var(--gold) !important;
background: rgba(201, 146, 10, 0.08);
}
/* ── League show: desktop two-column layout (web only) ─────────────────
Mobile (≤768px) and tablet (769–1023px) keep the original single column;
this block only applies on wide viewports, so the mobile layout is untouched. */
@media (min-width: 1024px) {
.league-page { max-width: 1240px; }
.league-grid {
display: grid;
/* Sidebar sits between the original ~33% and a tight 260px, so the
leaderboard gets more room without stretching the table too wide. */
grid-template-columns: minmax(0, 1fr) 360px;
gap: 24px;
align-items: start;
}
/* Swap the mobile scoreboard button for the desktop CTA card. */
.lp-mobile-cta { display: none; }
.lp-cta-card {
display: flex;
align-items: center;
gap: 14px;
background: var(--card);
border-radius: var(--r-xl);
box-shadow: var(--shadow-card);
padding: 18px 20px;
margin-bottom: 24px;
text-decoration: none;
transition: box-shadow 0.15s, transform 0.15s;
}
.lp-cta-card:hover { box-shadow: var(--shadow-elevated); transform: translateY(-1px); }
.lp-cta-icon { font-size: 26px; flex-shrink: 0; }
.lp-cta-text { display: flex; flex-direction: column; min-width: 0; }
.lp-cta-title {
font-family: var(--font-display);
font-size: 16px;
font-weight: 900;
color: var(--text);
line-height: 1.25;
}
.lp-cta-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
/* "Mis Pronósticos": stack the three links vertically, full width, left-aligned. */
.league-col-side .mp-grid { grid-template-columns: 1fr; }
.league-col-side .mp-link { justify-content: flex-start; gap: 10px; width: 100%; }
/* Leaderboard: fixed layout + inline column widths govern sizing, so the
table always fits the column. Keep single-line cells and a slightly
smaller header so the short titles fit their narrow columns. */
.league-col-main .lb-table { min-width: 0; width: 100%; }
.league-col-main .lb-table thead th,
.league-col-main .lb-table td { padding: 9px 4px; white-space: nowrap; }
.league-col-main .lb-table thead th { font-size: 9px; letter-spacing: 0.3px; }
/* Keep the rank/movement spacing on desktop (beats the generic padding above). */
.league-col-main .lb-table th.col-rank,
.league-col-main .lb-table td.col-rank { padding-left: 14px; padding-right: 10px; }
.league-col-main .lb-table th.col-movement,
.league-col-main .lb-table td.col-movement { padding-left: 14px; padding-right: 2px; }
/* Wider podium columns so the top names show in full without wrapping. */
.league-col-main .podium { gap: 16px; padding: 24px 20px 0; }
.league-col-main .podium-col { width: 116px; }
}
/* ── Predicted group standings (st-) ──────────────────────────────── */
.st-wrap {
padding: 16px 14px;
background: var(--surface);
border-top: 2px solid var(--border-light);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.st-title {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
color: var(--text-muted);
margin-bottom: 10px;
}
.st-table { margin: 0; }
.st-table thead th { padding: 6px 10px; }
.st-table td { padding: 7px 10px; font-size: 12px; color: var(--text); }
.st-c { text-align: center; }
.st-pos { font-weight: 700; }
.st-team { font-weight: 600; }
.st-pts { font-size: 13px; font-weight: 700; text-align: center; }
.st-row-1, .st-row-2 { background: var(--win-bg); }
.st-row-3 { background: var(--draw-bg); }
.st-row-4 { background: var(--loss-bg); }
.st-badge {
display: inline-block;
color: white;
padding: 2px 7px;
border-radius: var(--r-pill);
font-size: 9px;
font-weight: 700;
white-space: nowrap;
}
.st-badge-1, .st-badge-2 { background: var(--win); }
.st-badge-3 { background: var(--draw); }
.st-badge-4 { background: var(--loss); }
/* ── Best third-place teams (mejores terceros) ── */
.tp-section {
margin-top: 28px;
background: var(--card);
border: 1.5px solid var(--border);
border-radius: var(--r-lg);
box-shadow: var(--shadow-card);
overflow: hidden;
}
.tp-head {
padding: 18px 18px 14px;
background: linear-gradient(135deg, var(--navy), var(--navy-light));
color: var(--white);
}
.tp-title {
font-family: var(--font-display);
font-size: 22px;
font-weight: 900;
line-height: 1.1;
color: var(--white);
}
.tp-sub {
margin-top: 4px;
font-size: 12px;
font-weight: 600;
color: var(--gold-bright);
}
.tp-empty {
padding: 28px 22px;
text-align: center;
font-size: 13px;
font-weight: 600;
color: var(--text-muted);
}
.tp-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.tp-table {
width: 100%;
min-width: 560px;
border-collapse: collapse;
}
.tp-table thead th {
padding: 9px 8px;
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-muted);
background: var(--surface);
white-space: nowrap;
border-bottom: 1px solid var(--border);
}
.tp-table td {
padding: 9px 8px;
font-size: 13px;
color: var(--text);
border-bottom: 1px solid var(--border-light);
}
.tp-c { text-align: center; }
.tp-rank { font-weight: 800; color: var(--text-sec); }
.tp-team { font-weight: 700; white-space: nowrap; }
.tp-pts { font-weight: 800; }
.tp-gd { font-weight: 600; color: var(--text-sec); }
.tp-fifa { color: var(--text-muted); font-size: 12px; }
.tp-group-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
padding: 2px 8px;
border-radius: var(--r-pill);
background: var(--gold-bright);
color: var(--navy);
font-family: var(--font-display);
font-size: 12px;
font-weight: 900;
}
/* Rows 1–8 advance */
.tp-row.tp-in { background: var(--card); }
.tp-row.tp-in:hover { background: var(--win-bg); }
/* Best third place */
.tp-row.tp-best {
background: var(--win-bg);
box-shadow: inset 3px 0 0 var(--win);
}
.tp-row.tp-best .tp-rank { color: var(--win); }
/* Rows 9–12 eliminated — dimmed */
.tp-row.tp-out { background: var(--surface); }
.tp-row.tp-out td { color: var(--text-muted); }
.tp-row.tp-out .tp-team { color: var(--text-sec); }
.tp-row.tp-out .tp-group-badge {
background: var(--border);
color: var(--text-muted);
}
/* Cutoff line after #8 */
.tp-cutoff td {
padding: 0;
border-bottom: none;
}
.tp-cutoff-line {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
background: repeating-linear-gradient(
-45deg,
var(--red-pale),
var(--red-pale) 8px,
transparent 8px,
transparent 16px
);
border-top: 2px dashed var(--red);
border-bottom: 2px dashed var(--red);
}
.tp-cutoff-line::after {
content: "Eliminados";
margin-left: auto;
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.6px;
color: var(--red);
}
.tp-cutoff-label {
display: inline-block;
padding: 3px 11px;
border-radius: var(--r-pill);
background: var(--win);
color: white;
font-size: 11px;
font-weight: 800;
white-space: nowrap;
}
.tp-note {
padding: 12px 18px 16px;
font-size: 12px;
font-weight: 600;
color: var(--text-muted);
}
/* ── Admin actual group standings (ags-) ── */
.ags-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
gap: 16px;
}
@media (max-width: 520px) {
.ags-grid { grid-template-columns: 1fr; }
}
.ags-card {
background: var(--card);
border: 1.5px solid var(--border);
border-radius: var(--r-lg);
box-shadow: var(--shadow-card);
overflow: hidden;
}
.ags-card-head {
padding: 12px 14px;
background: linear-gradient(135deg, var(--navy), var(--navy-light));
}
.ags-badge {
font-family: var(--font-display);
font-size: 15px;
font-weight: 900;
color: var(--white);
}
.ags-card .st-wrap { border-top: none; }
/* ── Group prediction cards (mis pronósticos + perfil de miembro) ── */
.gpc-hint {
display: none;
text-align: center;
font-size: 11px;
font-weight: 600;
color: var(--text-muted);
margin-bottom: 8px;
}
.gpc-row {
display: flex;
align-items: flex-start;
gap: 14px;
overflow-x: auto;
padding: 2px 2px 14px;
scroll-snap-type: x proximity;
scrollbar-width: thin;
scrollbar-color: var(--border) transparent;
}
.gpc-row::-webkit-scrollbar { height: 8px; }
.gpc-row::-webkit-scrollbar-track { background: transparent; }
.gpc-row::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: var(--r-pill);
}
.gpc-col {
flex: 0 0 320px;
min-width: 0;
scroll-snap-align: start;
}
.gpc-card {
background: var(--card);
border: 1.5px solid var(--border);
border-radius: var(--r-lg);
box-shadow: var(--shadow-card);
overflow: hidden;
}
.gpc-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 12px 14px;
border-bottom: 1px solid var(--border-light);
}
.gpc-badge {
display: inline-flex;
align-items: center;
padding: 3px 11px;
border-radius: var(--r-pill);
background: var(--gold-bright);
color: var(--navy);
font-family: var(--font-display);
font-size: 13px;
font-weight: 900;
white-space: nowrap;
}
.gpc-listo {
flex-shrink: 0;
padding: 3px 9px;
border-radius: var(--r-pill);
background: var(--win);
color: white;
font-size: 9px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.gpc-count {
flex-shrink: 0;
padding: 3px 9px;
border-radius: var(--r-pill);
background: var(--surface);
border: 1px solid var(--border);
color: var(--text-sec);
font-size: 9px;
font-weight: 800;
letter-spacing: 0.08em;
}
.gpc-matches { padding: 2px 0 6px; }
.gpc-match {
padding: 8px 12px;
border-bottom: 1px solid var(--border-light);
}
.gpc-match:last-child { border-bottom: none; }
.gpc-match-line {
display: flex;
align-items: center;
gap: 7px;
}
.gpc-team {
flex: 1;
min-width: 0;
font-size: 12px;
font-weight: 600;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.gpc-team-home { text-align: right; }
.gpc-team-away { text-align: left; }
.gpc-x {
flex-shrink: 0;
font-size: 13px;
font-weight: 300;
color: var(--text-muted);
}
.gpc-box,
.gpc-input {
width: 40px !important;
height: 40px !important;
flex-shrink: 0;
border-radius: 10px !important;
border: 1px solid var(--border) !important;
background: var(--surface) !important;
box-shadow: inset 0 1px 3px rgba(11, 25, 41, 0.10) !important;
font-family: var(--font-display) !important;
font-size: 16px !important;
font-weight: 900 !important;
color: var(--text) !important;
text-align: center !important;
padding: 0 !important;
margin: 0 !important;
}
.gpc-box {
display: flex;
align-items: center;
justify-content: center;
}
.gpc-input:focus {
border-color: var(--blue) !important;
box-shadow: inset 0 1px 3px rgba(11, 25, 41, 0.10),
0 0 0 3px var(--blue-pale) !important;
outline: none !important;
}
.gpc-match-sub {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 4px;
font-size: 10px;
font-weight: 600;
min-height: 13px;
}
.gpc-date { color: var(--text-muted); }
.gpc-real { color: var(--text-muted); }
.gpc-real-win { color: var(--win); }
.gpc-real-loss { color: var(--loss); }
/* Admin variant: per-match save row */
.gpc-admin-sub {
justify-content: space-between;
align-items: center;
margin-top: 6px;
}
.gpc-status-ok {
color: var(--win);
font-weight: 700;
}
.gpc-status-pending { color: var(--text-muted); }
.gpc-save-btn {
flex-shrink: 0;
padding: 3px 12px;
border: none;
border-radius: var(--r-pill);
background: var(--blue);
color: white;
font-family: var(--font-ui);
font-size: 10px;
font-weight: 700;
cursor: pointer;
transition: background 0.15s;
}
.gpc-save-btn:hover { background: var(--blue-light); }
/* Collapsible predicted standings under each card */
.gpc-standings {
margin-top: 8px;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r-md);
overflow: hidden;
}
.gpc-standings-summary {
display: flex;
align-items: center;
justify-content: space-between;
padding: 9px 12px;
cursor: pointer;
list-style: none;
user-select: none;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-sec);
}
.gpc-standings-summary::-webkit-details-marker { display: none; }
.gpc-standings-summary::after {
content: '▸';
color: var(--text-muted);
font-size: 11px;
transition: transform 0.2s;
}
.gpc-standings[open] .gpc-standings-summary::after {
transform: rotate(90deg);
}
/* Compact standings inside the 320px column */
.gpc-standings .st-wrap { padding: 0 0 4px; border-top: 1px solid var(--border-light); }
.gpc-standings .st-title { display: none; }
.gpc-standings .st-sm-hide { display: none; }
.gpc-standings .st-table thead th { padding: 5px 8px; font-size: 9px; }
.gpc-standings .st-table td { padding: 6px 8px; font-size: 11px; }
/* ── Bonus / awards ───────────────────────────────────────────────── */
.award-card { max-width: 560px; }
.award-section-title {
font-family: var(--font-display);
font-size: 15px;
font-weight: 900;
color: var(--text);
padding: 14px 20px;
border-bottom: 1px solid var(--border-light);
}
.award-table { margin: 0; }
.award-table td { padding: 10px 20px; font-size: 13px; }
.award-label { font-weight: 600; width: 150px; }
.award-hint { font-size: 12px; color: var(--text-muted); margin-bottom: 20px; }
/* ── Bracket mobile scroll hint ───────────────────────────────────── */
.bracket-scroll-hint { display: none; }
/* ── Mobile refinements ───────────────────────────────────────────── */
@media (max-width: 768px) {
/* Leaderboard: keep rank / player / total, hide detail cols */
.lb-md { display: none !important; }
.lb-table { min-width: 0; width: 100%; }
.lb-table thead th { padding: 6px 8px; }
.lb-table td { padding: 5px 8px; }
.lb-sub-stats { display: block; font-size: 10px; }
.lb-player { gap: 8px; }
.lb-rank-badge { width: 22px; height: 22px; font-size: 11px; }
.lb-avatar { width: 24px; height: 24px; font-size: 10px; }
.lb-name { font-size: 13px; }
.lb-champ-flag { font-size: 12px; }
.lb-total-cell { font-size: 16px; }
.lb-table td.col-movement { font-size: 14px; }
/* Podium is desktop-only; reclaim its vertical space on phones so the
leaderboard table starts right after the Clasificación header. */
.podium { display: none; }
/* Predicted standings: drop PJ/G/E/P/GF/GC, keep DIF/PTS/Estado */
.st-sm-hide { display: none; }
/* Group prediction cards: narrower, hidden scrollbar, swipe hint */
.gpc-hint { display: block; }
.gpc-row {
scrollbar-width: none;
padding-bottom: 6px;
}
.gpc-row::-webkit-scrollbar { display: none; }
.gpc-col { flex-basis: 280px; }
.gpc-input { font-size: 16px !important; } /* iOS zooms into inputs < 16px */
/* Match rows: fit a 360px screen without overflow */
.match-row { padding: 12px; }
.match-team { min-width: 0; font-size: 12px; line-height: 1.3; }
.match-team-home { padding-right: 10px; }
.match-team-away { padding-left: 10px; }
.match-score-area { gap: 6px; }
.score-divider { width: 10px; font-size: 14px; }
.score-input { width: 44px !important; height: 44px !important; font-size: 18px !important; }
.score-display { width: 44px; height: 44px; font-size: 18px; }
.group-summary { padding: 12px 14px; }
/* iOS zooms into inputs with font-size < 16px */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], textarea, select {
font-size: 16px;
}
/* Member profile prediction table: hide date/city columns */
.sb-sm-hide { display: none; }
/* Transposed (Por Participante) table: tighter cells on phones */
.sbt-td { padding: 5px 4px; }
.sbt-sticky-left { min-width: 90px; max-width: 110px; }
/* Match detail: stack the 3 outcome columns, shrink the hero */
.mdp-grid { grid-template-columns: 1fr; }
.mdp-hero { padding: 16px 16px 14px; }
.mdp-hero-team { font-size: 17px; }
.mdp-hero-score { font-size: 26px; }
/* Filter bar selects share the row instead of overflowing */
.admin-filter-bar { padding: 10px 12px; gap: 8px; }
.admin-filter-bar select { flex: 1 1 130px; min-width: 0; }
/* Bracket: show swipe hint, tighter padding */
.bracket-scroll-hint {
display: block;
text-align: center;
font-size: 11px;
font-weight: 600;
color: var(--text-muted);
margin-bottom: 8px;
}
.bracket-wrapper { padding: 10px 6px; }
.bracket-container { padding: 0 4px 10px; gap: 8px; }
.bracket-half { gap: 8px; }
.bracket-column { width: 136px; }
.bracket-center-col { width: 148px; }
.page-head { flex-wrap: wrap; }
.page-head h1 { font-size: 17px; }
.auth-card { padding: 28px 22px; }
.join-card { margin-top: 8px; padding: 28px 20px; }
}
/* ════════════════════════════════════════════════════════════════════
Reglas — static scoring-rules page. Self-contained; uses design tokens.
════════════════════════════════════════════════════════════════════ */
.reglas { max-width: 820px; margin: 0 auto; }
.reglas-hero { margin-bottom: 22px; }
.reglas-hero-title {
font-family: var(--font-display); font-size: 30px; font-weight: 900;
color: var(--text); line-height: 1.1;
}
.reglas-hero-sub {
margin-top: 8px; max-width: 60ch;
font-size: 14px; line-height: 1.55; color: var(--text-sec);
}
.reglas-section {
background: var(--card); border-radius: var(--r-lg); overflow: hidden;
box-shadow: var(--shadow-card); margin-bottom: 22px;
}
/* Subtle colored left accent distinguishes each section (on-brand, like the
scoreboard cards) instead of a full saturated header band. */
.reglas-section--green { border-left: 3px solid var(--win); }
.reglas-section--red { border-left: 3px solid var(--red); }
/* Light header with dark text + a pale-tinted icon chip for the accent color */
.reglas-band {
display: flex; align-items: center; gap: 12px;
padding: 16px 22px; border-bottom: 1px solid var(--border-light);
}
.reglas-band-icon {
flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--r-pill);
display: inline-flex; align-items: center; justify-content: center;
font-size: 18px; line-height: 1;
}
.reglas-band-title {
font-family: var(--font-display); font-size: 20px; font-weight: 900; color: var(--text);
}
.reglas-band--green .reglas-band-icon { background: var(--win-bg); }
.reglas-band--red .reglas-band-icon { background: var(--red-pale); }
.reglas-body { padding: 20px 22px 22px; }
.reglas-intro { margin: 0 0 16px; font-size: 14px; line-height: 1.55; color: var(--text-sec); }
/* "Marcador Real" callout (blue accent) */
.reglas-real {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
background: var(--blue-pale); border: 1px solid #cfddf7;
border-radius: var(--r-md); padding: 12px 16px; margin-bottom: 16px;
}
.reglas-real-label {
font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px;
color: var(--blue);
}
.reglas-real-score { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.reglas-team { font-weight: 700; color: var(--text); font-size: 15px; }
.reglas-real-goals {
font-family: var(--font-display); font-weight: 900; font-size: 20px; color: var(--blue);
}
/* Tables */
.reglas-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.reglas-table {
width: 100%; border-collapse: collapse; min-width: 420px;
font-size: 14px;
}
.reglas-table--simple { min-width: 280px; }
.reglas-table th {
text-align: left; padding: 10px 14px;
font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
color: var(--text-muted); background: var(--surface);
border-bottom: 1px solid var(--border);
}
.reglas-table td {
padding: 11px 14px; color: var(--text); border-bottom: 1px solid var(--border-light);
vertical-align: middle;
}
.reglas-table tbody tr:last-child td { border-bottom: none; }
.reglas-table tbody tr:hover { background: var(--border-light); }
.reglas-col-pts { text-align: center; white-space: nowrap; }
.reglas-hint { color: var(--text-muted); font-weight: 400; font-size: 12px; }
.reglas-pred {
font-family: var(--font-display); font-weight: 700; color: var(--text-sec);
background: var(--surface); border-radius: var(--r-sm); padding: 3px 9px; display: inline-block;
}
/* Points badges — color by magnitude */
.reglas-pts {
display: inline-flex; align-items: center; justify-content: center;
min-width: 34px; padding: 4px 8px; border-radius: var(--r-pill);
font-family: var(--font-display); font-weight: 900; font-size: 15px; line-height: 1;
}
.reglas-pts--max { background: var(--win-bg); color: var(--win); }
.reglas-pts--high { background: #d9f0e2; color: #1a7a44; }
.reglas-pts--mid { background: var(--gold-pale); color: var(--gold); }
.reglas-pts--low { background: var(--blue-pale); color: var(--blue); }
.reglas-pts--gold { background: var(--gold-pale); color: var(--gold); }
.reglas-pts--zero { background: var(--surface); color: var(--text-muted); }
.reglas-each { margin-left: 6px; font-size: 12px; font-weight: 700; color: var(--text-muted); }
/* Note callout */
.reglas-note {
display: flex; gap: 10px; margin-top: 16px;
background: var(--gold-pale); border: 1px solid #f3e3b0; border-left: 4px solid var(--gold-bright);
border-radius: var(--r-md); padding: 14px 16px;
}
.reglas-note-icon { flex-shrink: 0; font-size: 16px; line-height: 1.5; }
.reglas-note p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--text-sec); }
@media (max-width: 768px) {
.reglas-hero-title { font-size: 24px; }
.reglas-band-title { font-size: 18px; }
.reglas-body { padding: 16px 16px 18px; }
.reglas-band { padding: 13px 16px; }
}
/* ── Member profile: group predictions history (Por fecha / Por grupo) ── */
.predictions-header { display: flex; justify-content: flex-end; margin-bottom: 1rem; }
.toggle-group { display: flex; border: 0.5px solid #ccc; border-radius: 6px; overflow: hidden; }
.toggle-btn { padding: 6px 14px; font-size: 13px; background: transparent; border: none; cursor: pointer; color: #666; }
.toggle-btn + .toggle-btn { border-left: 0.5px solid #ccc; }
.toggle-btn.active { background: #e6f1fb; color: #185fa5; font-weight: 500; }
/* Member profile summary chips: 4-up on desktop, 2x2 on phones so they don't
overflow the viewport width. */
.member-stats-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
@media (max-width: 600px) {
.member-stats-chips { grid-template-columns: 1fr 1fr; gap: 8px; }
}
.predictions-history-card { background: white; border: 0.5px solid #e5e5e5; border-radius: 12px; overflow: hidden; }
.predictions-history-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.predictions-history-table th { text-align: left; font-size: 11px; font-weight: 700; color: #444; text-transform: uppercase; letter-spacing: 0.04em; padding: 6px 8px; border-bottom: 1px solid #eee; }
.predictions-history-table td { padding: 9px 8px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }
.predictions-history-table td.date-cell { color: #888; font-size: 13px; white-space: nowrap; }
.predictions-history-table tr.unplayed { opacity: 0.5; }
.predictions-history-table tr.missing-prediction { background: #fffaf0; }
.predictions-history-table .center { text-align: center; }
.predictions-history-table td.loc-cell { color: #555; font-size: 13px; }
.predictions-history-table td.loc-cell .loc-city { display: block; color: #999; font-size: 11px; }
.predictions-history-table .group-tag-mobile { display: none; }
@media (max-width: 768px) {
/* On phones, drop the Grupo + Sede columns and show the group as an inline tag. */
.predictions-history-table .col-grupo,
.predictions-history-table .col-sede { display: none; }
.predictions-history-table .group-tag-mobile {
display: inline-block; font-size: 11px; background: #faeeda; color: #633806;
border-radius: 4px; padding: 2px 6px; margin-left: 6px;
}
}
@media (max-width: 600px) {
/* On narrow phones, hide the group tag so the Partido column stays single-line. */
.predictions-history-table .group-tag-mobile { display: none; }
/* Shrink the predictions table to fit phone width. Admins keep the Editar
column; their wider table scrolls within the card wrapper only. */
.predictions-history-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.predictions-history-table th,
.predictions-history-table td { font-size: 12px; padding: 6px 4px; }
/* Short headers (incl. "Mi pronóstico") wrap rather than widen the table. */
.predictions-history-table th { white-space: normal; }
/* Keep the date column compact. */
.predictions-history-table td.date-cell { font-size: 12px; width: 48px; max-width: 48px; }
}
.score-real .exact { color: #3b6d11; font-weight: 500; }
.score-real .off { color: #a32d2d; }
.score-real .pending { color: #aaa; }
.pts-badge { display: inline-block; min-width: 26px; text-align: center; padding: 2px 7px; border-radius: 20px; font-size: 12px; font-weight: 500; }
.pts-badge.pts-10 { background: #eaf3de; color: #3b6d11; }
.pts-badge.pts-7 { background: #e6f1fb; color: #185fa5; }
.pts-badge.pts-5 { background: #faeeda; color: #854f0b; }
.pts-badge.pts-4 { background: #faeeda; color: #854f0b; }
.pts-badge.pts-1 { background: #f1efe8; color: #5f5e5a; }
.pts-badge.pts-0 { background: #fcebeb; color: #a32d2d; }
.pts-badge.pts-pending { background: #f1efe8; color: #aaa; }
/* Super-admin inline prediction editing in the Por fecha table */
.edit-prediction-btn { background: none; border: none; cursor: pointer; font-size: 14px; color: #aaa; padding: 2px 4px; }
.edit-prediction-btn:hover { color: #185fa5; }
.prediction-edit-form { display: none; align-items: center; gap: 6px; }
.prediction-edit-form input[type=number] { width: 36px; text-align: center; font-size: 13px; border: 0.5px solid #ccc; border-radius: 4px; padding: 3px 4px; }
.prediction-edit-form .save-btn { font-size: 12px; background: #185fa5; color: white; border: none; border-radius: 4px; padding: 3px 8px; cursor: pointer; }
.prediction-edit-form .cancel-btn { font-size: 12px; background: none; border: none; color: #aaa; cursor: pointer; }
/* ── Knockout match predictions (leagues/:id/matches/:id/predictions) ───── */
.ko-section { margin-top: 18px; }
.ko-section-head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
}
.ko-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.ko-dot-green { background: #4aaa72; }
.ko-dot-red { background: #eb5757; }
.ko-section-title {
font-family: var(--font-display);
font-size: 15px;
font-weight: 800;
color: var(--text);
}
.ko-count { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.knockout-result-blocks {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 12px;
align-items: start;
}
.result-block {
border: 0.5px solid var(--border);
border-radius: 8px;
overflow: hidden;
}
.result-block-header {
padding: 7px 10px;
font-size: 11px;
font-weight: 600;
display: flex;
justify-content: space-between;
align-items: center;
gap: 6px;
}
.result-block-label { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.result-block-label img { vertical-align: middle; }
.result-block-badge {
flex-shrink: 0;
font-weight: 800;
background: rgba(255, 255, 255, 0.18);
border-radius: 10px;
padding: 1px 7px;
}
.result-block.correct { border: 1.5px solid #4aaa72; }
.result-block.correct .result-block-header { background: #112b1a; color: #6fcf97; }
.result-block.zero .result-block-header { background: var(--surface); color: var(--text-muted); }
.result-block.zero .result-block-badge { background: rgba(0, 0, 0, 0.06); color: var(--text-muted); }
.home-wins-header { background: #1a2b1a; color: #6fcf97; }
.draw-header { background: #1a2a3a; color: #7ec8f0; }
.away-wins-header { background: #2b1111; color: #eb5757; }
.result-block-body { padding: 2px 0; }
.result-block-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 6px 10px;
font-size: 13px;
border-bottom: 0.5px solid var(--border-light);
}
.result-block-row:last-child { border-bottom: none; }
.result-row-name {
font-weight: 600;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.result-row-right { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.result-row-score {
font-family: var(--font-display);
font-weight: 700;
color: var(--text-sec);
white-space: nowrap;
}
.advance-chip {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 9px;
background: #1a2a3a;
color: #7ec8f0;
padding: 1px 5px;
border-radius: 10px;
}
.ko-no-score-note {
margin-top: 10px;
font-size: 12px;
color: var(--text-muted);
}
.miss-block {
border: 0.5px solid var(--border);
border-radius: 8px;
overflow: hidden;
}
.miss-row {
display: flex;
align-items: center;
padding: 6px 10px;
border-bottom: 0.5px solid var(--border);
gap: 6px;
font-size: 13px;
}
.miss-row:last-child { border-bottom: none; }
.miss-name {
width: 140px;
flex-shrink: 0;
font-weight: 600;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.miss-teams { flex: 1; min-width: 0; }
.miss-vs { color: var(--text-muted); }
.miss-score {
flex-shrink: 0;
font-family: var(--font-display);
font-weight: 700;
color: var(--text-sec);
white-space: nowrap;
}
.miss-sin { color: var(--text-muted); font-style: italic; }
.t-wrong { color: #eb5757; font-weight: 600; }
.t-ok { color: #6fcf97; font-weight: 600; }
@media (max-width: 768px) {
/* align-items must be reset to stretch: the desktop base rule sets
align-items:start for the 3-col grid, which on a flex column makes each
block shrink to its content width instead of filling the screen. */
.knockout-result-blocks { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.miss-name { width: 110px; }
/* Each result block is full-width on mobile (blocks stack), so render its
member list in 2 columns to reclaim the empty right half of the screen.
All members are still shown — the grid just wraps them into two columns. */
.result-block-body {
display: grid;
grid-template-columns: 1fr 1fr;
}
.result-block-row {
border-top: 0.5px solid var(--border);
padding: 5px 8px;
font-size: 10px;
}
.result-block-row:nth-child(odd) {
border-right: 0.5px solid var(--border);
}
/* Empate block only: the "avanza" advance chip crowds the 2-column grid on
mobile and squashes the participant name. Drop that block to a single
column and stack each member vertically — name + predicted score share
the top line (pushed to opposite edges), with the advance chip on its own
line below. Home/away blocks keep the 2-column grid (they have no chip).
display:contents unwraps .result-row-right so the chip and score become
direct flex siblings of the name, letting flex order/wrap arrange them. */
.result-block-body.empate-body {
display: block;
}
.result-block-row.empate-member-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 3px 6px;
padding: 6px 10px;
border-right: none;
font-size: 11px;
}
.empate-member-row .result-row-right {
display: contents;
}
.empate-member-row .result-row-name {
order: 1;
flex: 1 1 auto;
min-width: 0;
}
.empate-member-row .result-row-score {
order: 2;
flex: 0 0 auto;
font-size: 10px;
}
.empate-member-row .advance-chip {
order: 3;
flex-basis: 100%;
align-self: flex-start;
}
}