:root{--app-bottom:22px}html{scroll-behavior:smooth}.app-shell{min-height:100vh}.app-header{position:sticky;top:0;z-index:20}.app-header__inner{height:68px}.wc-logo{height:50px;width:auto;object-fit:contain}.app-header__title{display:flex;flex-direction:column;line-height:1.15}.app-header__title strong{font-size:17px}.app-header__title span{font-size:12px;color:#cfd6e6}.live-pill{margin-left:auto;background:rgba(0,177,64,.16);border:1px solid rgba(39,223,106,.45);color:#fff;border-radius:999px;padding:7px 12px;font-size:12px;font-weight:600;display:flex;align-items:center;gap:7px}.live-pill span{width:8px;height:8px;border-radius:50%;background:#27DF6A;box-shadow:0 0 0 5px rgba(39,223,106,.16)}.app-hero{box-shadow:0 12px 30px rgba(0,0,0,.2)}.app-hero__inner{min-height:108px}.app-dark-section{padding:28px 0 36px;background:radial-gradient(circle at 20% 0,rgba(68,98,237,.35),transparent 38%),var(--fc-navy)}.dashboard-grid{display:grid;gap:16px}.app-home-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.home-card{display:block;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:22px;color:#fff;min-height:186px;text-decoration:none!important;transition:.18s}.home-card:hover{transform:translateY(-3px);background:rgba(255,255,255,.12)}.home-card span{color:var(--fc-yellow);font-weight:700;font-size:13px}.home-card h2{font-size:22px;margin:14px 0 10px;color:#fff}.home-card p{font-size:14px;margin:0;color:#dce4ff}.sponsors{display:grid;grid-template-columns:1.2fr 1fr;gap:16px;margin-top:18px}.sponsor-card{background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.14);border-radius:18px;min-height:120px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px}.sponsor-card span{text-transform:uppercase;letter-spacing:.08em;font-size:12px;color:#aeb8d4;font-weight:700}.sponsor-card img{max-width:220px;max-height:76px;object-fit:contain}.sponsor-main img{background:#fff;border-radius:12px;padding:12px}.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px}.data-note{font-size:12px;color:var(--fc-grey);background:#f7f9fc;border:1px solid #e4e8f0;border-radius:999px;padding:8px 12px}.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}.stats-row div{background:#fff;border:1px solid var(--fc-grey-light);border-radius:14px;padding:16px}.stats-row strong{display:block;font-size:26px;color:#000}.stats-row span{font-size:13px;color:var(--fc-grey)}.table-scroll{overflow:auto;border:1px solid var(--fc-grey-light);border-radius:14px;background:#fff}.ranking-table th:nth-child(3),.ranking-table td:nth-child(3),.points-cell{font-weight:800}.podium-row:nth-child(1){box-shadow:inset 4px 0 0 #ffcc00}.podium-row:nth-child(2){box-shadow:inset 4px 0 0 #a5acbb}.podium-row:nth-child(3){box-shadow:inset 4px 0 0 #cd7f32}.medal{font-size:22px;display:inline-flex;min-width:34px;justify-content:center}.detail-cell{max-width:280px;font-size:12px;color:var(--fc-grey)}.matches-list{display:grid;gap:10px}.match-card{border-radius:14px;overflow:hidden;border:1px solid var(--fc-grey-light);background:#fff}.match-meta{display:flex;justify-content:space-between;gap:10px;padding:10px 16px;background:#f7f9fc;color:var(--fc-grey);font-size:12px;font-weight:600}.venue-line{padding:0 16px 12px;color:#505b73;font-size:12px}.groups-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.group-card{border:1px solid var(--fc-grey-light);border-radius:14px;overflow:hidden;background:#fff}.group-card h3{padding:16px 16px 0}.bracket-grid{display:grid;grid-template-columns:repeat(5,260px);gap:14px;overflow:auto;padding:5px 0 16px}.bracket-column h3{font-size:15px;color:#000;margin-bottom:10px}.bracket-card{background:#fff;border:1px solid var(--fc-grey-light);border-radius:14px;padding:14px;min-height:116px;margin-bottom:12px}.bracket-card small{font-weight:700;color:var(--fc-primary);text-transform:uppercase}.bracket-teams{margin-top:10px;display:grid;gap:8px}.bracket-teams div{display:flex;justify-content:space-between;background:#f7f9fc;border-radius:8px;padding:9px 10px}.more-row{margin-top:18px;display:flex;justify-content:center}.floating-nav{position:fixed;right:18px;bottom:calc(var(--app-bottom) + env(safe-area-inset-bottom));z-index:50}.floating-nav__button{width:58px;height:58px;border:0;border-radius:50%;background:#000;color:#fff;font-size:24px;box-shadow:0 10px 26px rgba(0,0,0,.34);cursor:pointer}.floating-nav__panel{position:absolute;right:0;bottom:72px;background:#fff;color:#000;border-radius:16px;box-shadow:0 12px 34px rgba(0,0,0,.28);padding:10px;display:none;min-width:230px}.floating-nav__panel.is-open{display:grid}.floating-nav__panel a{color:#000;text-decoration:none;padding:11px 12px;border-radius:10px;font-weight:600;font-size:14px}.floating-nav__panel a:hover{background:#f0f3ff;color:#2C46C8}.fc-match__score.is-live{background:#DF1C3C;color:#fff}.fc-match__score.is-upcoming{font-size:13px;min-width:110px}.page-title{padding:30px 0;background:var(--fc-navy);color:#fff}.page-title h1{color:#fff}.back-link{color:#fff!important;font-weight:700;display:inline-flex;margin-bottom:10px}@media(max-width:980px){.app-home-grid,.groups-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sponsors{grid-template-columns:1fr}.bracket-grid{grid-template-columns:repeat(5,240px)}}@media(max-width:640px){.app-header__inner{height:62px}.wc-logo{height:42px}.app-header__title strong{font-size:14px}.app-header__title span,.live-pill{display:none}.app-home-grid,.groups-grid,.stats-row{grid-template-columns:1fr}.home-card{min-height:140px;padding:18px}.sponsor-card{flex-direction:column;align-items:flex-start}.sponsor-card img{max-width:180px}.section-head{align-items:flex-start;flex-direction:column}.fc-match{grid-template-columns:1fr;gap:7px}.fc-match__home,.fc-match__away{justify-content:center;text-align:center}.fc-match__score{margin:auto}.floating-nav{right:14px}.floating-nav__button{width:54px;height:54px}.detail-cell{display:none}}
/* --- Home analytics tabs ------------------------------------------------ */
.analytics-panel{background:rgba(0,0,0,.30);border:1px solid rgba(255,255,255,.14);border-radius:22px;padding:22px;box-shadow:0 18px 44px rgba(0,0,0,.18)}
.analytics-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:18px}.analytics-head h2{color:#fff;font-size:28px;margin:10px 0 6px}.analytics-head p{margin:0;color:#dce4ff;font-size:14px}.chart-tabs{display:flex;gap:8px;overflow:auto;padding:4px;margin-bottom:16px}.chart-tab{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;border-radius:999px;padding:10px 14px;font-family:var(--fc-font);font-weight:700;font-size:13px;white-space:nowrap;cursor:pointer}.chart-tab.is-active{background:#fff;color:#020F2A;border-color:#fff}.chart-card{background:linear-gradient(180deg,rgba(255,255,255,.96),#fff);color:#000;border-radius:18px;border:1px solid rgba(255,255,255,.18);padding:18px}.chart-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:12px}.chart-title-row h3{margin:0 0 4px;color:#000}.chart-title-row p{margin:0;color:#505B73;font-size:13px}.chart-legend{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}.legend-item{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#505B73}.legend-dot{width:10px;height:10px;border-radius:3px;display:inline-block}.legend-dot.orange{background:#f96a17}.legend-dot.blue{background:#4462ED}.chart-scroll{overflow:auto;padding-bottom:4px}.bar-chart{min-width:860px;height:360px;display:flex;align-items:flex-end;gap:14px;padding:22px 12px 42px;border-radius:14px;background:linear-gradient(180deg,#f7f9fc,#fff);border:1px solid #E4E8F0;position:relative}.bar-chart::before{content:"";position:absolute;left:12px;right:12px;top:25%;height:1px;background:#E4E8F0;box-shadow:0 86px 0 #E4E8F0,0 172px 0 #E4E8F0}.bar-group{position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:center;gap:4px;min-width:48px;height:100%}.bar-pair{display:flex;gap:4px;align-items:flex-end;height:260px}.bar{width:18px;border-radius:6px 6px 0 0;min-height:2px;position:relative}.bar.orange{background:linear-gradient(180deg,#ff8b3d,#f96a17)}.bar.blue{background:linear-gradient(180deg,#6f8cff,#4462ED)}.bar.single{width:24px}.bar-value{position:absolute;top:-19px;left:50%;transform:translateX(-50%);font-size:10px;font-weight:800;color:#DF1C3C;white-space:nowrap}.bar-label{position:absolute;left:50%;bottom:-38px;transform:translateX(-50%) rotate(-42deg);transform-origin:top left;width:98px;text-align:right;font-size:10px;font-weight:700;color:#505B73;line-height:1.05}.empty-chart{margin:auto;color:#505B73;font-weight:700}.chart-card[data-mode="single"] .bar-chart{gap:18px}.chart-card[data-mode="single"] .bar-group{min-width:40px}.chart-card[data-mode="single"] .bar-label{bottom:-40px;width:112px}.chart-card[data-mode="single"] .bar-pair{height:260px}
@media(max-width:640px){.analytics-panel{padding:16px;border-radius:18px}.analytics-head{align-items:flex-start;flex-direction:column}.analytics-head h2{font-size:23px}.chart-card{padding:14px}.chart-title-row{flex-direction:column}.chart-legend{justify-content:flex-start}.bar-chart{min-width:780px;height:330px}.bar-label{font-size:9px}}
/* --- V4 fine tuning Jordi ------------------------------------------------ */
/* Bajamos las etiquetas del eje X para que no se monten encima de las columnas. */
.bar-chart{padding-bottom:72px;height:390px;align-items:flex-end;}
.bar-label{bottom:-62px;transform:translateX(-50%) rotate(-42deg);transform-origin:top right;}
.chart-card[data-mode="single"] .bar-label{bottom:-64px;}
@media(max-width:640px){.bar-chart{height:370px;padding-bottom:78px}.bar-label{bottom:-66px}}
/* El logo de IKATZA se muestra como 2GROW: sin caja blanca ni padding. */
.sponsor-main img{background:transparent!important;border-radius:0!important;padding:0!important;filter:none;}
/* Botones de + resultados / + grupos / ir al cuadro: texto visible y potente. */
.more-row .fc-btn,
.more-row .fc-btn:visited,
.more-row .fc-btn:hover{color:#fff!important;font-weight:800!important;text-transform:uppercase!important;letter-spacing:.04em;text-decoration:none!important;}
/* --- V5 chart UX: sin scroll vertical + ayuda de swipe horizontal ---------- */
.chart-scroll{
position:relative;
overflow-x:auto!important;
overflow-y:hidden!important;
padding-bottom:0!important;
scrollbar-gutter:stable;
scroll-behavior:smooth;
}
.bar-chart{
height:360px!important;
min-height:360px;
max-height:360px;
padding:20px 12px 66px!important;
overflow:hidden;
}
.bar-pair{height:230px!important;}
.bar-label{bottom:-54px!important;}
.chart-card[data-mode="single"] .bar-label{bottom:-56px!important;}
.chart-card[data-mode="single"] .bar-pair{height:230px!important;}
.chart-scroll::-webkit-scrollbar{height:9px;}
.chart-scroll::-webkit-scrollbar-track{background:#eef2f7;border-radius:999px;}
.chart-scroll::-webkit-scrollbar-thumb{background:#A5ACBB;border-radius:999px;}
.swipe-hint{
position:absolute;
left:50%;
bottom:18px;
transform:translateX(-50%);
z-index:6;
display:none;
align-items:center;
gap:10px;
padding:10px 14px;
border-radius:999px;
background:rgba(2,15,42,.92);
color:#fff;
box-shadow:0 12px 28px rgba(2,15,42,.28);
font-weight:800;
font-size:12px;
letter-spacing:.02em;
pointer-events:none;
}
.swipe-hint.is-visible{display:flex;animation:hintFade 3.8s ease both;}
.swipe-hint__hand{font-size:22px;animation:handSwipe 1.05s ease-in-out infinite;}
.swipe-hint__arrows{font-size:18px;letter-spacing:4px;color:#FFCC00;animation:arrowPulse 1.05s ease-in-out infinite;}
@keyframes handSwipe{0%,100%{transform:translateX(-12px)}50%{transform:translateX(12px)}}
@keyframes arrowPulse{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes hintFade{0%{opacity:0;transform:translate(-50%,8px)}12%,78%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,8px)}}
@media(max-width:640px){
.bar-chart{height:330px!important;min-height:330px;max-height:330px;padding-bottom:64px!important;}
.bar-pair,.chart-card[data-mode="single"] .bar-pair{height:205px!important;}
.bar-label{bottom:-52px!important;}
.swipe-hint{bottom:16px;font-size:11px;padding:9px 12px;}
}
/* --- V6 ajustes Jordi: gráfica completa + hint solo cuando entra en pantalla --- */
.chart-scroll{
overflow-x:auto!important;
overflow-y:visible!important;
padding-bottom:12px!important;
}
.bar-chart{
height:430px!important;
min-height:430px!important;
max-height:none!important;
padding:22px 12px 24px!important;
overflow:visible!important;
}
.bar-group{
height:100%!important;
align-items:flex-end!important;
}
.bar-pair,
.chart-card[data-mode="single"] .bar-pair{
height:270px!important;
margin-bottom:86px!important;
}
.bar-label,
.chart-card[data-mode="single"] .bar-label{
bottom:10px!important;
width:118px;
transform:translateX(-50%) rotate(-42deg)!important;
transform-origin:top right!important;
}
.swipe-hint{
bottom:34px!important;
}
@media(max-width:640px){
.bar-chart{height:410px!important;min-height:410px!important;padding-bottom:24px!important;}
.bar-pair,.chart-card[data-mode="single"] .bar-pair{height:235px!important;margin-bottom:112px!important;}
.bar-label,.chart-card[data-mode="single"] .bar-label{bottom:16px!important;width:112px;}
.swipe-hint{bottom:38px!important;}
}
/* --- V7 ajuste final Jordi: sin scroll vertical y etiquetas siempre dentro --- */
.chart-card{
overflow:visible!important;
}
.chart-scroll{
overflow-x:auto!important;
overflow-y:hidden!important;
padding-bottom:10px!important;
max-height:none!important;
}
.bar-chart{
height:470px!important;
min-height:470px!important;
max-height:none!important;
padding:24px 12px 28px!important;
overflow:hidden!important;
align-items:flex-end!important;
}
.bar-chart::before{
top:112px!important;
box-shadow:0 82px 0 #E4E8F0,0 164px 0 #E4E8F0!important;
}
.bar-group{
height:100%!important;
align-items:flex-end!important;
}
.bar-pair,
.chart-card[data-mode="single"] .bar-pair{
height:270px!important;
margin-bottom:118px!important;
}
.bar-label,
.chart-card[data-mode="single"] .bar-label{
bottom:22px!important;
width:120px!important;
transform:translateX(-50%) rotate(-42deg)!important;
transform-origin:top right!important;
line-height:1.08!important;
white-space:normal!important;
}
.swipe-hint{bottom:48px!important;}
@media(max-width:640px){
.bar-chart{
height:455px!important;
min-height:455px!important;
padding:22px 10px 28px!important;
}
.bar-chart::before{
top:110px!important;
box-shadow:0 78px 0 #E4E8F0,0 156px 0 #E4E8F0!important;
}
.bar-pair,
.chart-card[data-mode="single"] .bar-pair{
height:238px!important;
margin-bottom:130px!important;
}
.bar-label,
.chart-card[data-mode="single"] .bar-label{
bottom:24px!important;
width:114px!important;
font-size:9px!important;
}
.swipe-hint{bottom:52px!important;}
}
/* --- V8 Jordi: respiración responsive en módulos internos ----------------- */
/* Evita que las secciones de contenido queden pegadas al borde en móvil/tablet. */
main .fc-surface{
padding-left:max(16px, env(safe-area-inset-left));
padding-right:max(16px, env(safe-area-inset-right));
}
main .fc-surface > .fc-container{
width:100%;
max-width:var(--fc-maxw);
margin-left:auto;
margin-right:auto;
padding-left:0!important;
padding-right:0!important;
}
main .fc-surface .fc-section{
padding-top:36px;
padding-bottom:36px;
}
/* Más aire visual entre cards/listados de las secciones internas. */
main .fc-surface .fc-card,
main .fc-surface .table-scroll,
main .fc-surface .match-card,
main .fc-surface .group-card,
main .fc-surface .bracket-card{
border-radius:18px;
}
main .fc-surface .matches-list,
main .fc-surface .groups-grid,
main .fc-surface .bracket-grid,
main .fc-surface .table-scroll{
margin-left:0;
margin-right:0;
}
/* El botón flotante respira mejor en smartphone. */
.floating-nav{
right:20px;
bottom:calc(24px + env(safe-area-inset-bottom));
}
@media(min-width:768px){
main .fc-surface{
padding-left:24px;
padding-right:24px;
}
}
@media(min-width:1200px){
main .fc-surface{
padding-left:32px;
padding-right:32px;
}
}
@media(max-width:640px){
main .fc-surface{
padding-left:16px!important;
padding-right:16px!important;
}
main .fc-surface .fc-section{
padding-top:30px;
padding-bottom:30px;
}
.floating-nav{
right:18px!important;
bottom:calc(24px + env(safe-area-inset-bottom))!important;
}
}
/* V9 · Cuadro eliminatorio estilo FIFA.com */
main .fc-surface .bracket-grid{
display:block;
overflow:visible;
padding:0;
}
.ko-board{
background:#fff;
border:1px solid var(--fc-grey-light);
border-radius:18px;
color:#0b1633;
overflow:hidden;
box-shadow:0 10px 28px rgba(2,15,42,.08);
}
.ko-board-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding:20px 22px;
border-bottom:1px solid #edf1f7;
background:#fff;
}
.ko-title-block{display:flex;align-items:center;gap:12px;min-width:0}.ko-title-block strong{display:block;font-size:20px;line-height:1.15;color:#06122d}.ko-title-block small{display:block;color:#506078;font-size:12px;margin-top:2px}.ko-logo-mini{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid #e4e8f0;background:#fff;flex:0 0 auto}.ko-logo-mini img{width:28px;height:34px;object-fit:contain}.ko-note{font-size:12px;color:#506078;background:#f7f9fc;border:1px solid #e4e8f0;border-radius:999px;padding:8px 12px;white-space:nowrap}.ko-scroll{overflow:auto;padding:22px 26px 30px;background:#fff;scrollbar-color:#a5acbb #f1f4f9;scrollbar-width:thin}.ko-track{min-width:1540px;height:1120px;display:grid;grid-template-columns:172px 172px 172px 172px 212px 172px 172px 172px 172px;gap:22px;align-items:start;position:relative}.ko-col h3{font-size:14px;font-weight:500;color:#34415c;margin:0 0 22px;text-align:center;white-space:nowrap}.ko-col-matches{display:flex;flex-direction:column}.ko-col--r32 .ko-col-matches{gap:18px}.ko-col--r16 .ko-col-matches{gap:91px;padding-top:58px}.ko-col--qf .ko-col-matches{gap:235px;padding-top:191px}.ko-col--sf .ko-col-matches{gap:0;padding-top:459px}.ko-center{padding-top:385px;text-align:center}.ko-center-spacer{height:0}.ko-final-label,.ko-third-label{font-weight:500;color:#34415c;margin-bottom:10px}.ko-third-label{margin-top:34px;line-height:1.2}.ko-match{position:relative;height:112px}.ko-match-id{position:absolute;left:-28px;top:51px;font-size:12px;color:#06122d;text-decoration:underline!important;z-index:3}.ko-col--right .ko-match-id{left:auto;right:-28px}.ko-card{background:#fff;border:1px solid #bfc8d8;border-radius:8px;min-height:96px;padding:8px 8px 9px;position:relative;z-index:2}.ko-date{display:flex;justify-content:space-between;color:#45546f;font-size:12px;margin-bottom:7px;line-height:1}.ko-teams{display:grid;gap:6px}.ko-team{height:32px;border:1px solid #bfc8d8;border-radius:6px;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:0 8px;background:#fff}.ko-team-left{display:flex;align-items:center;gap:8px;min-width:0}.ko-team-name{font-size:13px;font-weight:600;color:#111b33;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ko-score{font-size:12px;color:#8c96aa}.ko-flag{width:20px;height:14px;border-radius:2px;object-fit:cover;flex:0 0 auto;border:1px solid rgba(0,0,0,.06)}.ko-flag--empty{background:linear-gradient(135deg,#f8fafc,#e8edf5);border:1px solid #d7deeb}.ko-col--left .ko-match::after,.ko-col--r16.ko-col--left .ko-match::after,.ko-col--qf.ko-col--left .ko-match::after,.ko-col--sf.ko-col--left .ko-match::after{content:"";position:absolute;left:100%;top:50%;width:22px;border-top:2px solid #cfd6e6;z-index:1}.ko-col--right .ko-match::after{content:"";position:absolute;right:100%;top:50%;width:22px;border-top:2px solid #cfd6e6;z-index:1}.ko-col--r32 .ko-match:nth-child(odd)::before,.ko-col--r16 .ko-match:nth-child(odd)::before,.ko-col--qf .ko-match:nth-child(odd)::before{content:"";position:absolute;left:calc(100% + 20px);top:50%;width:10px;height:129px;border-top:2px solid #cfd6e6;border-right:2px solid #cfd6e6;border-bottom:2px solid #cfd6e6;border-radius:0 7px 7px 0;z-index:1}.ko-col--r16 .ko-match:nth-child(odd)::before{height:224px}.ko-col--qf .ko-match:nth-child(odd)::before{height:368px}.ko-col--right.ko-col--r32 .ko-match:nth-child(odd)::before,.ko-col--right.ko-col--r16 .ko-match:nth-child(odd)::before,.ko-col--right.ko-col--qf .ko-match:nth-child(odd)::before{left:auto;right:calc(100% + 20px);border-right:0;border-left:2px solid #cfd6e6;border-radius:7px 0 0 7px}.ko-center .ko-match-id{left:50%;top:auto;bottom:-18px;transform:translateX(-50%)}.ko-center .ko-match{height:128px}.ko-center .ko-card{min-height:104px}.ko-board--preview .ko-track{height:880px;transform-origin:top left}.ko-board--preview .ko-scroll{max-height:620px}.ko-board--preview .ko-col--r32 .ko-col-matches{max-height:820px;overflow:hidden}
@media(max-width:900px){.ko-board-head{align-items:flex-start;flex-direction:column;padding:16px}.ko-title-block strong{font-size:17px}.ko-note{white-space:normal;border-radius:14px}.ko-scroll{padding:16px}.ko-track{min-width:1320px;height:1040px;grid-template-columns:150px 150px 150px 150px 184px 150px 150px 150px 150px;gap:18px}.ko-col h3{font-size:13px}.ko-match-id{left:-22px}.ko-col--right .ko-match-id{right:-22px}.ko-team-name{font-size:12px}.ko-card{padding:7px}.ko-team{height:31px}.ko-col--r16 .ko-col-matches{gap:89px}.ko-col--qf .ko-col-matches{gap:232px}.ko-center{padding-top:382px}}
@media(max-width:640px){.ko-board{border-radius:16px;margin-inline:-2px}.ko-scroll{padding:14px 12px}.ko-track{min-width:1180px;height:1010px;grid-template-columns:136px 136px 136px 136px 168px 136px 136px 136px 136px;gap:16px}.ko-card{min-height:90px}.ko-match{height:106px}.ko-date{font-size:11px}.ko-team{height:29px;padding:0 6px}.ko-team-name{font-size:11px}.ko-flag{width:18px;height:13px}.ko-col--r32 .ko-col-matches{gap:16px}.ko-col--r16 .ko-col-matches{gap:86px;padding-top:55px}.ko-col--qf .ko-col-matches{gap:226px;padding-top:184px}.ko-col--sf .ko-col-matches{padding-top:443px}.ko-center{padding-top:366px}.ko-match-id{font-size:11px;left:-19px}.ko-col--right .ko-match-id{right:-19px}.ko-col--r32 .ko-match:nth-child(odd)::before,.ko-col--r16 .ko-match:nth-child(odd)::before,.ko-col--qf .ko-match:nth-child(odd)::before{display:none}.ko-col--left .ko-match::after,.ko-col--right .ko-match::after{width:16px}.ko-board--preview .ko-scroll{max-height:520px}}
/* V10 · Preview del cuadro en home + mejoras cuadro FIFA */
.bracket-preview-card{
position:relative;
display:block;
overflow:hidden;
border-radius:18px;
min-height:360px;
border:1px solid var(--fc-grey-light);
background:#06122d;
box-shadow:0 12px 32px rgba(2,15,42,.12);
text-decoration:none!important;
}
.bracket-preview-card img{
width:100%;
height:100%;
min-height:360px;
object-fit:cover;
object-position:center;
display:block;
opacity:.76;
filter:saturate(.92) contrast(1.02);
}
.bracket-preview-card__overlay{
position:absolute;
inset:0;
background:linear-gradient(180deg,rgba(2,15,42,.08),rgba(2,15,42,.42));
}
.bracket-preview-card__button{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
z-index:2;
min-width:170px;
justify-content:center;
box-shadow:0 18px 34px rgba(2,15,42,.28);
}
/* Fondo copa dentro del cuadro, con opacidad baja para mantener legibilidad */
.ko-scroll{
position:relative;
background:#fff;
}
.ko-scroll::before{
content:"";
position:absolute;
inset:0;
background-image:linear-gradient(rgba(255,255,255,.82),rgba(255,255,255,.88)),url('../img/FIFA-World-Cup-trophy.avif');
background-repeat:no-repeat;
background-position:center center;
background-size:min(520px,46vw) auto;
opacity:.72;
pointer-events:none;
}
.ko-track{
position:relative;
z-index:1;
}
/* Quitar enlaces PXX y limpiar la lectura del bracket */
.ko-match-id{display:none!important;}
.ko-match{
height:118px;
overflow:visible;
}
.ko-card{
min-height:108px;
padding:9px 9px 10px;
overflow:hidden;
background:rgba(255,255,255,.96);
backdrop-filter:blur(2px);
}
.ko-date{
gap:8px;
min-width:0;
}
.ko-teams{
gap:7px;
}
.ko-team{
height:34px;
min-width:0;
overflow:hidden;
}
.ko-team-left{min-width:0;max-width:calc(100% - 20px);}
.ko-team-name{display:block;min-width:0;max-width:100%;}
.ko-score{flex:0 0 auto;}
/* Más ancho para evitar que nombres + banderas salgan del contenedor */
.ko-track{
min-width:1690px;
height:1180px;
grid-template-columns:190px 190px 190px 190px 224px 190px 190px 190px 190px;
gap:20px;
}
.ko-col--r32 .ko-col-matches{gap:18px;}
.ko-col--r16 .ko-col-matches{gap:98px;padding-top:61px;}
.ko-col--qf .ko-col-matches{gap:254px;padding-top:202px;}
.ko-col--sf .ko-col-matches{padding-top:488px;}
.ko-center{padding-top:414px;}
/* Conectores más sólidos y alineados con el centro de cada card */
.ko-col--left .ko-match::after,
.ko-col--r16.ko-col--left .ko-match::after,
.ko-col--qf.ko-col--left .ko-match::after,
.ko-col--sf.ko-col--left .ko-match::after,
.ko-col--right .ko-match::after{
top:54px;
border-top-color:#c5cfdf;
}
.ko-col--r32 .ko-match:nth-child(odd)::before,
.ko-col--r16 .ko-match:nth-child(odd)::before,
.ko-col--qf .ko-match:nth-child(odd)::before{
top:54px;
border-color:#c5cfdf;
}
.ko-col--r32 .ko-match:nth-child(odd)::before{height:136px;}
.ko-col--r16 .ko-match:nth-child(odd)::before{height:236px;}
.ko-col--qf .ko-match:nth-child(odd)::before{height:390px;}
@media(max-width:900px){
.bracket-preview-card,.bracket-preview-card img{min-height:300px;}
.ko-track{
min-width:1470px;
height:1120px;
grid-template-columns:164px 164px 164px 164px 196px 164px 164px 164px 164px;
gap:18px;
}
.ko-match{height:114px;}
.ko-card{min-height:104px;}
.ko-col--r16 .ko-col-matches{gap:95px;padding-top:59px;}
.ko-col--qf .ko-col-matches{gap:244px;padding-top:197px;}
.ko-col--sf .ko-col-matches{padding-top:470px;}
.ko-center{padding-top:398px;}
}
@media(max-width:640px){
.bracket-preview-card,.bracket-preview-card img{min-height:240px;}
.bracket-preview-card__button{min-width:152px;padding-inline:18px;}
.ko-scroll{padding:14px 12px;}
.ko-track{
min-width:1280px;
height:1080px;
grid-template-columns:148px 148px 148px 148px 178px 148px 148px 148px 148px;
gap:16px;
}
.ko-match{height:110px;}
.ko-card{min-height:100px;padding:8px;}
.ko-team{height:31px;}
.ko-col--r16 .ko-col-matches{gap:91px;padding-top:56px;}
.ko-col--qf .ko-col-matches{gap:234px;padding-top:190px;}
.ko-col--sf .ko-col-matches{padding-top:454px;}
.ko-center{padding-top:382px;}
.ko-col--r32 .ko-match:nth-child(odd)::before,
.ko-col--r16 .ko-match:nth-child(odd)::before,
.ko-col--qf .ko-match:nth-child(odd)::before{
display:block;
height:128px;
}
.ko-col--r16 .ko-match:nth-child(odd)::before{height:224px;}
.ko-col--qf .ko-match:nth-child(odd)::before{height:368px;}
}
/* V11 · Corrección fina del cuadro eliminatorio
- Los equipos quedan siempre dentro de la tarjeta de partido.
- Conectores recalculados para que no queden cortes entre fases.
*/
.ko-card,
.ko-teams,
.ko-team{
width:100%;
max-width:100%;
box-sizing:border-box;
}
.ko-card{
overflow:hidden;
}
.ko-team{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
align-items:center;
column-gap:8px;
}
.ko-team-left{
min-width:0;
max-width:100%;
overflow:hidden;
}
.ko-team-name{
min-width:0;
max-width:100%;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.ko-score{
justify-self:end;
min-width:8px;
text-align:right;
}
.ko-score:empty{display:none;}
/* Geometría estable del bracket */
.ko-track{
height:1200px;
}
.ko-match{
height:118px;
}
.ko-card{
height:108px;
min-height:108px;
}
.ko-col--r32 .ko-col-matches{gap:18px;padding-top:0;}
.ko-col--r16 .ko-col-matches{gap:154px;padding-top:68px;}
.ko-col--qf .ko-col-matches{gap:426px;padding-top:204px;}
.ko-col--sf .ko-col-matches{gap:0;padding-top:476px;}
.ko-center{padding-top:402px;}
/* Conectores al centro exacto de cada tarjeta */
.ko-col--left .ko-match::after,
.ko-col--r16.ko-col--left .ko-match::after,
.ko-col--qf.ko-col--left .ko-match::after,
.ko-col--sf.ko-col--left .ko-match::after,
.ko-col--right .ko-match::after{
top:59px;
width:22px;
border-top:2px solid #c5cfdf;
}
.ko-col--r32 .ko-match:nth-child(odd)::before,
.ko-col--r16 .ko-match:nth-child(odd)::before,
.ko-col--qf .ko-match:nth-child(odd)::before{
top:59px;
border-color:#c5cfdf;
}
.ko-col--r32 .ko-match:nth-child(odd)::before{height:136px;}
.ko-col--r16 .ko-match:nth-child(odd)::before{height:272px;}
.ko-col--qf .ko-match:nth-child(odd)::before{height:544px;}
@media(max-width:900px){
.ko-track{height:1180px;}
.ko-match{height:114px;}
.ko-card{height:104px;min-height:104px;}
.ko-col--r32 .ko-col-matches{gap:16px;padding-top:0;}
.ko-col--r16 .ko-col-matches{gap:146px;padding-top:65px;}
.ko-col--qf .ko-col-matches{gap:406px;padding-top:195px;}
.ko-col--sf .ko-col-matches{padding-top:455px;}
.ko-center{padding-top:388px;}
.ko-col--left .ko-match::after,
.ko-col--r16.ko-col--left .ko-match::after,
.ko-col--qf.ko-col--left .ko-match::after,
.ko-col--sf.ko-col--left .ko-match::after,
.ko-col--right .ko-match::after{top:57px;}
.ko-col--r32 .ko-match:nth-child(odd)::before,
.ko-col--r16 .ko-match:nth-child(odd)::before,
.ko-col--qf .ko-match:nth-child(odd)::before{top:57px;}
.ko-col--r32 .ko-match:nth-child(odd)::before{height:130px;}
.ko-col--r16 .ko-match:nth-child(odd)::before{height:260px;}
.ko-col--qf .ko-match:nth-child(odd)::before{height:520px;}
}
@media(max-width:640px){
.ko-track{height:1150px;}
.ko-match{height:110px;}
.ko-card{height:100px;min-height:100px;}
.ko-team{height:30px;}
.ko-col--r32 .ko-col-matches{gap:14px;padding-top:0;}
.ko-col--r16 .ko-col-matches{gap:138px;padding-top:62px;}
.ko-col--qf .ko-col-matches{gap:386px;padding-top:186px;}
.ko-col--sf .ko-col-matches{padding-top:434px;}
.ko-center{padding-top:370px;}
.ko-col--left .ko-match::after,
.ko-col--r16.ko-col--left .ko-match::after,
.ko-col--qf.ko-col--left .ko-match::after,
.ko-col--sf.ko-col--left .ko-match::after,
.ko-col--right .ko-match::after{top:55px;width:16px;}
.ko-col--r32 .ko-match:nth-child(odd)::before,
.ko-col--r16 .ko-match:nth-child(odd)::before,
.ko-col--qf .ko-match:nth-child(odd)::before{display:block;top:55px;}
.ko-col--r32 .ko-match:nth-child(odd)::before{height:124px;}
.ko-col--r16 .ko-match:nth-child(odd)::before{height:248px;}
.ko-col--qf .ko-match:nth-child(odd)::before{height:496px;}
}
/* V12 · Cuadro eliminatorio con geometría absoluta tipo FIFA
Cada fase queda centrada exactamente entre los dos cruces anteriores. */
.ko-track--absolute{
display:block!important;
position:relative!important;
overflow:visible;
background:transparent;
}
.ko-track--absolute .ko-stage-title{
position:absolute;
font-size:14px;
font-weight:500;
color:#34415c;
text-align:center;
white-space:nowrap;
z-index:3;
}
.ko-track--absolute .ko-node{
position:absolute;
z-index:4;
}
.ko-track--absolute .ko-node .ko-match{
height:auto!important;
position:relative;
}
.ko-track--absolute .ko-node .ko-card{
height:108px!important;
min-height:108px!important;
}
.ko-track--absolute .ko-node--final .ko-final-label,
.ko-track--absolute .ko-node--third .ko-third-label{
position:absolute;
left:0;
right:0;
bottom:calc(100% + 10px);
margin:0;
text-align:center;
font-weight:500;
color:#34415c;
line-height:1.2;
}
.ko-track--absolute .ko-lines{
position:absolute;
inset:0;
z-index:1;
pointer-events:none;
overflow:visible;
}
.ko-track--absolute .ko-lines path{
fill:none;
stroke:#c5cfdf;
stroke-width:2;
vector-effect:non-scaling-stroke;
stroke-linejoin:round;
stroke-linecap:round;
}
/* Desactiva conectores antiguos basados en pseudo-elementos */
.ko-track--absolute .ko-match::before,
.ko-track--absolute .ko-match::after{
display:none!important;
content:none!important;
}
.ko-track--absolute .ko-match-id{display:none!important;}
.ko-board--preview .ko-track--absolute{
transform-origin:top left;
}
@media(max-width:640px){
.ko-track--absolute .ko-stage-title{font-size:12px;}
.ko-track--absolute .ko-node .ko-card{height:100px!important;min-height:100px!important;}
}
/* V13 · Fondo del cuadro completo + preview ancho y bajo tipo hero */
.ko-scroll::before{
inset:0!important;
background-image:linear-gradient(rgba(255,255,255,.86),rgba(255,255,255,.9)),url('../img/FIFA-World-Cup-trophy.avif')!important;
background-repeat:no-repeat!important;
background-position:center center!important;
background-size:cover!important;
opacity:.62!important;
z-index:0;
}
.ko-track--absolute{position:relative!important;z-index:1!important;}
.ko-board--preview .ko-board-head{display:none;}
.ko-board--preview{
height:320px!important;
border-radius:24px!important;
overflow:hidden!important;
position:relative!important;
background:#06122d!important;
}
.ko-board--preview .ko-scroll{
height:320px!important;
max-height:none!important;
overflow:hidden!important;
padding:0!important;
background:#06122d!important;
}
.ko-board--preview .ko-scroll::before{
background-image:linear-gradient(rgba(2,15,42,.32),rgba(2,15,42,.52)),url('../img/cuadro-preview.png')!important;
opacity:1!important;
background-size:cover!important;
background-position:center center!important;
z-index:0!important;
}
.ko-board--preview .ko-track--absolute{
transform:scale(.42);
transform-origin:top left;
opacity:.55;
filter:blur(.1px);
}
.ko-board--preview .ko-lines path{stroke:rgba(255,255,255,.38)!important;}
.ko-board--preview .ko-card{background:rgba(255,255,255,.9)!important;}
.ko-board--preview .ko-stage-title{color:rgba(255,255,255,.85)!important;}
.bracket-preview-card{
width:100%;
height:320px!important;
min-height:320px!important;
border-radius:24px!important;
}
.bracket-preview-card img{
min-height:320px!important;
height:320px!important;
object-position:center center!important;
}
.bracket-preview-card__overlay{
background:linear-gradient(180deg,rgba(2,15,42,.16),rgba(2,15,42,.58))!important;
}
.bracket-preview-card__button{
text-transform:uppercase;
font-weight:800;
color:#fff!important;
}
@media(max-width:640px){
.ko-board--preview,.ko-board--preview .ko-scroll,.bracket-preview-card,.bracket-preview-card img{height:260px!important;min-height:260px!important;}
.ko-board--preview .ko-track--absolute{transform:scale(.32);}
}
/* V14 · Fondo premium repetible del bracket + hover suave en preview */
.ko-scroll::before{
background-image:
linear-gradient(rgba(255,255,255,.84),rgba(255,255,255,.90)),
url('../img/bracket-watermark-pattern.png')!important;
background-repeat:repeat-x!important;
background-position:center center!important;
background-size:1150px auto!important;
opacity:1!important;
}
.ko-board--preview .ko-scroll::before{
background-image:linear-gradient(rgba(2,15,42,.32),rgba(2,15,42,.52)),url('../img/cuadro-preview.png')!important;
background-repeat:no-repeat!important;
background-size:cover!important;
background-position:center center!important;
}
.bracket-preview-card,
.bracket-preview-card img,
.bracket-preview-card__button{
transition:transform .18s ease, box-shadow .18s ease, filter .18s ease, opacity .18s ease!important;
}
.bracket-preview-card:hover img{
transform:scale(1.015)!important;
filter:saturate(.96) contrast(1.04)!important;
}
.bracket-preview-card:hover .bracket-preview-card__button{
transform:translate(-50%,-51%) scale(1.015)!important;
box-shadow:0 20px 36px rgba(2,15,42,.30)!important;
}
.bracket-preview-card__button:hover{
transform:translate(-50%,-51%) scale(1.015)!important;
}
@media(max-width:640px){
.ko-scroll::before{background-size:900px auto!important;}
.bracket-preview-card:hover img{transform:scale(1.008)!important;}
.bracket-preview-card:hover .bracket-preview-card__button,
.bracket-preview-card__button:hover{transform:translate(-50%,-50.5%) scale(1.008)!important;}
}
/* V16 · Fondo final del cuadro: logo oficial repetido como watermark + API-ready */
.ko-scroll::before{
background-color:#fff!important;
background-image:
linear-gradient(rgba(255,255,255,.935),rgba(255,255,255,.955)),
url('../img/WC26_Logo.avif')!important;
background-repeat:repeat!important;
background-position:center center!important;
background-size:auto,260px auto!important;
opacity:1!important;
filter:none!important;
}
.ko-board--preview .ko-scroll::before{
background-image:
linear-gradient(rgba(2,15,42,.34),rgba(2,15,42,.56)),
url('../img/cuadro-preview.png')!important;
background-repeat:no-repeat!important;
background-size:cover!important;
background-position:center center!important;
}
@media(max-width:640px){
.ko-scroll::before{background-size:auto,210px auto!important;}
}
/* V17 header 50/50 + IKATZA + live pulse */
.app-header__inner{
display:grid !important;
grid-template-columns:1fr 1fr;
align-items:center;
gap:16px;
}
.app-header__left,
.app-header__right{
display:flex;
align-items:center;
min-width:0;
}
.app-header__left{gap:14px;justify-content:flex-start;}
.app-header__right{gap:18px;justify-content:flex-end;}
.header-ikatza-logo{
height:28px;
width:auto;
max-width:155px;
object-fit:contain;
display:block;
opacity:.96;
}
.live-pill{
margin-left:0 !important;
white-space:nowrap;
}
.live-pill .live-dot,
.live-pill > span:first-child{
width:9px;
height:9px;
min-width:9px;
border-radius:50%;
background:#27DF6A;
box-shadow:0 0 0 0 rgba(39,223,106,.72);
animation:livePulse 1.65s ease-out infinite;
}
@keyframes livePulse{
0%{box-shadow:0 0 0 0 rgba(39,223,106,.72);transform:scale(1);}
60%{box-shadow:0 0 0 8px rgba(39,223,106,0);transform:scale(1.05);}
100%{box-shadow:0 0 0 0 rgba(39,223,106,0);transform:scale(1);}
}
@media(max-width:640px){
.app-header__inner{
grid-template-columns:1fr 1fr !important;
height:62px;
gap:8px;
}
.app-header__left{gap:8px;overflow:hidden;}
.wc-logo{height:38px;flex:0 0 auto;}
.app-header__title{min-width:0;}
.app-header__title strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.app-header__title span{display:none !important;}
.app-header__right{gap:10px;justify-content:flex-end;}
.header-ikatza-logo{height:18px;max-width:84px;}
.live-pill{
display:flex !important;
padding:0;
width:18px;
height:18px;
justify-content:center;
align-items:center;
background:rgba(0,177,64,.12);
border:1px solid rgba(39,223,106,.32);
}
.live-pill .live-text{display:none !important;}
.live-pill .live-dot,
.live-pill > span:first-child{width:8px;height:8px;min-width:8px;}
}
/* V17.1 · Afinado desktop del badge Datos en vivo sin tocar mobile */
@media (min-width: 641px){
.app-header__right{
gap:28px !important;
justify-content:flex-end;
}
.header-ikatza-logo{
height:34px !important;
max-width:180px !important;
width:auto;
object-fit:contain;
opacity:.98;
}
.live-pill{
display:flex !important;
align-items:center;
gap:10px !important;
margin-left:0 !important;
padding:8px 18px !important;
border:1px solid rgba(34,197,94,.38) !important;
border-radius:999px !important;
background:rgba(34,197,94,.08) !important;
color:#fff !important;
font-size:14px !important;
font-weight:700 !important;
line-height:1 !important;
white-space:nowrap;
}
.live-pill .live-dot,
.live-pill > span:first-child{
position:relative;
width:10px !important;
height:10px !important;
min-width:10px !important;
border-radius:50%;
background:#22c55e !important;
box-shadow:none !important;
animation:none !important;
flex-shrink:0;
}
.live-pill .live-dot::after,
.live-pill > span:first-child::after{
content:"";
position:absolute;
inset:-4px;
border-radius:50%;
border:2px solid rgba(34,197,94,.55);
animation:livePulseDesktop 2s ease-out infinite;
pointer-events:none;
}
@keyframes livePulseDesktop{
0%{transform:scale(.75);opacity:1;}
100%{transform:scale(2.35);opacity:0;}
}
}
/* V17.2 · Fix desktop badge: evita que la regla global .live-pill span afecte al texto */
@media (min-width: 641px){
.app-header__right{
gap:30px !important;
}
.live-pill{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap:11px !important;
min-width:138px;
height:38px;
padding:0 18px !important;
overflow:visible;
}
.live-pill .live-text{
display:inline-block !important;
width:auto !important;
height:auto !important;
min-width:0 !important;
max-width:none !important;
border-radius:0 !important;
background:transparent !important;
box-shadow:none !important;
animation:none !important;
color:#fff !important;
font-size:14px !important;
font-weight:800 !important;
line-height:1 !important;
white-space:nowrap !important;
transform:none !important;
position:relative;
z-index:2;
}
.live-pill .live-dot,
.live-pill > span:first-child{
position:relative !important;
z-index:1;
width:10px !important;
height:10px !important;
min-width:10px !important;
max-width:10px !important;
flex:0 0 10px !important;
display:inline-block !important;
}
.live-pill .live-dot::after,
.live-pill > span:first-child::after{
z-index:-1;
}
}
/* V20 · Ranking conectado a cache real + modal de detalle */
.detail-btn{
border:1px solid rgba(68,98,237,.28);
background:#f0f3ff;
color:#2C46C8;
border-radius:999px;
padding:8px 12px;
font-weight:700;
font-size:12px;
cursor:pointer;
white-space:nowrap;
}
.detail-btn:hover{background:#4462ED;color:#fff;transform:translateY(-1px)}
.ranking-modal{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:18px}
.ranking-modal.is-open{display:flex}
.ranking-modal__backdrop{position:absolute;inset:0;background:rgba(2,15,42,.72);backdrop-filter:blur(5px)}
.ranking-modal__card{position:relative;z-index:1;width:min(980px,100%);max-height:min(86vh,920px);overflow:auto;background:#fff;color:#000;border-radius:22px;box-shadow:0 24px 70px rgba(0,0,0,.34);padding:24px}
.ranking-modal__close{position:sticky;top:0;margin-left:auto;display:flex;align-items:center;justify-content:center;width:38px;height:38px;border:0;border-radius:50%;background:#020F2A;color:#fff;font-size:24px;line-height:1;cursor:pointer;z-index:2}
.ranking-detail-head h2{margin:.45rem 0 .15rem;color:#000}.ranking-detail-head p{margin:0;color:#505B73}.ranking-detail-total{margin:18px 0;padding:18px;border-radius:18px;background:linear-gradient(135deg,#4462ED,#045694);color:#fff;display:flex;align-items:end;gap:10px}.ranking-detail-total strong{font-size:42px;line-height:1}.ranking-detail-total span{font-weight:700;opacity:.9}.ranking-detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:20px}.ranking-detail-grid div{border:1px solid #E4E8F0;border-radius:16px;padding:16px;background:#F7F9FC}.ranking-detail-grid strong{display:block;font-size:26px}.ranking-detail-grid span{font-size:13px;color:#505B73;font-weight:700}.detail-table th,.detail-table td{font-size:13px}.scorer-detail-list{display:grid;gap:10px;margin-top:10px}.scorer-detail-list div{border:1px solid #E4E8F0;border-radius:14px;padding:13px;background:#F7F9FC}.scorer-detail-list strong{display:block}.scorer-detail-list span{font-size:13px;color:#505B73}
@media(max-width:640px){.ranking-modal{padding:10px}.ranking-modal__card{padding:16px;border-radius:18px}.ranking-detail-grid{grid-template-columns:1fr}.ranking-detail-total strong{font-size:34px}.ranking-table th:nth-child(6),.ranking-table td:nth-child(6){display:none}}
/* V20.1 · Ajustes modal ranking: sin teléfono, espacios y cierre robusto */
.ranking-modal.is-open{
display:flex !important;
}
.ranking-modal__card{
position:relative !important;
z-index:121 !important;
background:#fff !important;
color:#020F2A !important;
}
.ranking-modal__close{
position:absolute !important;
top:16px !important;
right:16px !important;
margin-left:0 !important;
z-index:123 !important;
pointer-events:auto !important;
}
.ranking-detail-head{
padding-right:54px;
}
.ranking-detail-head h2{
color:#020F2A !important;
}
.ranking-detail-total,
.ranking-detail-grid div,
.scorer-detail-list div{
gap:10px;
}
.ranking-detail-total strong,
.ranking-detail-grid strong,
.scorer-detail-list strong{
margin-right:8px;
}
.scorer-detail-list strong{
display:inline-block !important;
}
.scorer-detail-list span{
display:inline-block;
}
.ranking-table .fc-teamcol small{
display:none !important;
}
@media(max-width:640px){
.ranking-modal__close{top:12px !important;right:12px !important;}
.ranking-detail-head{padding-right:46px;}
.scorer-detail-list strong,.scorer-detail-list span{display:block !important;}
}
/* V23 · Semáforo de estado de datos */
.live-pill.status-live{border-color:rgba(39,223,106,.48)!important;background:rgba(39,223,106,.12)!important;}
.live-pill.status-live .live-dot,.live-pill.status-live > span:first-child{background:#27DF6A!important;}
.live-pill.status-demo{border-color:rgba(250,204,21,.48)!important;background:rgba(250,204,21,.12)!important;}
.live-pill.status-demo .live-dot,.live-pill.status-demo > span:first-child{background:#facc15!important;}
.live-pill.status-error{border-color:rgba(239,68,68,.55)!important;background:rgba(239,68,68,.14)!important;}
.live-pill.status-error .live-dot,.live-pill.status-error > span:first-child{background:#ef4444!important;}
.live-pill.status-stale{border-color:rgba(249,115,22,.55)!important;background:rgba(249,115,22,.14)!important;}
.live-pill.status-stale .live-dot,.live-pill.status-stale > span:first-child{background:#f97316!important;}
.live-pill.status-live .live-dot::after,.live-pill.status-live > span:first-child::after{border-color:rgba(39,223,106,.55)!important;}
.live-pill.status-demo .live-dot::after,.live-pill.status-demo > span:first-child::after{border-color:rgba(250,204,21,.45)!important;}
.live-pill.status-error .live-dot::after,.live-pill.status-error > span:first-child::after{border-color:rgba(239,68,68,.5)!important;}
.live-pill.status-stale .live-dot::after,.live-pill.status-stale > span:first-child::after{border-color:rgba(249,115,22,.5)!important;}
.sync-note{font-size:12px;color:#cfd6e6;margin-top:6px}
/* V24 · Home tipo APP: resumen, podium y navegación móvil */
.app-hero__inner{
min-height:68px!important;
padding-top:10px!important;
padding-bottom:10px!important;
}
.fc-band__title{font-size:18px!important;}
.fc-band__dates{font-size:12px!important;}
.fc-countdown{gap:10px!important;}
.fc-countdown__cell{min-width:38px!important;}
.fc-countdown__num{font-size:22px!important;}
.fc-countdown__lab{font-size:10px!important;}
.app-overview{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:14px;
margin-bottom:16px;
}
.app-kpi-card{
position:relative;
overflow:hidden;
min-height:116px;
padding:18px;
border-radius:22px;
border:1px solid rgba(255,255,255,.16);
background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.06));
color:#fff;
box-shadow:0 14px 34px rgba(0,0,0,.16);
}
.app-kpi-card::after{
content:"";
position:absolute;
right:-32px;
top:-32px;
width:98px;
height:98px;
border-radius:50%;
background:rgba(68,98,237,.25);
}
.app-kpi-card span{
display:block;
color:#aeb8d4;
font-size:12px;
font-weight:800;
text-transform:uppercase;
letter-spacing:.06em;
margin-bottom:9px;
}
.app-kpi-card strong{
position:relative;
z-index:1;
display:block;
color:#fff;
font-size:clamp(24px,2.6vw,34px);
line-height:1.05;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.app-kpi-card small{
position:relative;
z-index:1;
display:block;
margin-top:8px;
color:#dce4ff;
font-size:12px;
font-weight:700;
}
.app-kpi-card--leader{
background:linear-gradient(135deg,rgba(255,204,0,.18),rgba(255,255,255,.07));
}
.app-kpi-card--leader::after{background:rgba(255,204,0,.24);}
.app-kpi-card--next{
background:linear-gradient(135deg,rgba(39,223,106,.14),rgba(255,255,255,.07));
}
.app-kpi-card--next::after{background:rgba(39,223,106,.18);}
.app-action-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:12px;
margin-bottom:18px;
}
.app-action-card{
display:flex;
align-items:center;
gap:12px;
padding:14px;
border-radius:18px;
border:1px solid rgba(255,255,255,.14);
background:rgba(2,15,42,.38);
color:#fff!important;
text-decoration:none!important;
transition:transform .16s ease, background .16s ease, border-color .16s ease;
}
.app-action-card:hover{
transform:translateY(-2px);
background:rgba(255,255,255,.10);
border-color:rgba(255,255,255,.24);
}
.app-action-card span{
width:40px;
height:40px;
flex:0 0 40px;
display:grid;
place-items:center;
border-radius:14px;
background:rgba(255,255,255,.12);
font-size:20px;
}
.app-action-card strong{
display:block;
color:#fff;
font-size:14px;
line-height:1.15;
}
.app-action-card small{
display:block;
color:#aeb8d4;
font-size:11px;
margin-top:3px;
}
.podium-cards{
display:grid;
grid-template-columns:1.1fr 1fr 1fr;
gap:12px;
margin:0 0 16px;
}
.podium-card{
position:relative;
overflow:hidden;
border:1px solid var(--fc-grey-light);
border-radius:18px;
background:#fff;
padding:18px;
min-height:128px;
box-shadow:0 8px 22px rgba(2,15,42,.05);
}
.podium-card::before{
content:"";
position:absolute;
inset:0 auto 0 0;
width:5px;
background:#a5acbb;
}
.podium-card--1::before{background:#ffcc00;}
.podium-card--2::before{background:#a5acbb;}
.podium-card--3::before{background:#cd7f32;}
.podium-card__rank{
display:inline-flex;
align-items:center;
justify-content:center;
width:36px;
height:36px;
border-radius:50%;
background:#f7f9fc;
margin-bottom:12px;
font-size:20px;
}
.podium-card h3{
color:#020F2A!important;
font-size:18px;
margin:0 0 8px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.podium-card strong{
display:block;
color:#4462ED;
font-size:26px;
line-height:1;
}
.podium-card small{
display:block;
color:#505B73;
margin-top:7px;
font-size:12px;
font-weight:700;
}
.podium-card--1{
background:linear-gradient(135deg,#fff,#fff9db);
}
.mobile-tabbar{
display:none;
}
@media(max-width:980px){
.app-overview{grid-template-columns:repeat(2,minmax(0,1fr));}
.app-action-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:640px){
body.fc{padding-bottom:76px;}
.app-hero__inner{
min-height:62px!important;
gap:8px!important;
}
.fc-band__title{font-size:14px!important;}
.fc-band__dates{display:none;}
.fc-countdown{
width:auto!important;
margin-left:auto;
gap:6px!important;
}
.fc-countdown__cell{min-width:31px!important;}
.fc-countdown__num{font-size:17px!important;}
.fc-countdown__lab{font-size:8px!important;}
.app-overview{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
}
.app-kpi-card{
min-height:104px;
padding:14px;
border-radius:18px;
}
.app-kpi-card span{font-size:10px;margin-bottom:7px;}
.app-kpi-card strong{font-size:22px;}
.app-kpi-card small{font-size:10px;}
.app-action-grid{
grid-template-columns:1fr 1fr;
gap:10px;
}
.app-action-card{
padding:12px;
border-radius:16px;
}
.app-action-card span{
width:34px;
height:34px;
flex-basis:34px;
border-radius:12px;
font-size:18px;
}
.app-action-card strong{font-size:12px;}
.app-action-card small{display:none;}
.analytics-panel{
margin-top:2px;
}
.podium-cards{
grid-template-columns:1fr;
}
.podium-card{
min-height:auto;
padding:14px 14px 14px 18px;
display:grid;
grid-template-columns:42px 1fr auto;
align-items:center;
gap:10px;
}
.podium-card__rank{margin:0;}
.podium-card h3{font-size:15px;margin:0;}
.podium-card strong{font-size:20px;text-align:right;}
.podium-card small{display:none;}
.floating-nav{display:none!important;}
.mobile-tabbar{
position:fixed;
left:0;
right:0;
bottom:0;
z-index:80;
display:grid;
grid-template-columns:repeat(5,1fr);
gap:0;
padding:8px 8px calc(8px + env(safe-area-inset-bottom));
background:rgba(255,255,255,.96);
border-top:1px solid #e4e8f0;
box-shadow:0 -10px 28px rgba(2,15,42,.12);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
}
.mobile-tabbar a{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:2px;
min-height:50px;
color:#505B73!important;
text-decoration:none!important;
font-size:11px;
font-weight:800;
border-radius:14px;
}
.mobile-tabbar a span{font-size:19px;line-height:1;}
.mobile-tabbar a strong{font-size:10px;line-height:1;}
.mobile-tabbar a.is-active{
color:#4462ED!important;
background:#eef2ff;
}
}
/* V25 · Home limpia y ranking centralizado */
.app-home-clean{
padding-top:32px;
padding-bottom:44px;
}
.app-home-clean .app-overview{
margin-bottom:18px;
}
.app-ranking-analytics{
padding-top:30px;
padding-bottom:34px;
}
#ranking-detalle{
scroll-margin-top:86px;
}
#clasificacion .more-row .fc-btn[href="#ranking-detalle"]{
min-width:190px;
justify-content:center;
}
@media(max-width:640px){
.app-home-clean{
padding-top:20px;
padding-bottom:calc(92px + env(safe-area-inset-bottom));
}
.app-ranking-analytics{
padding-top:20px;
padding-bottom:24px;
}
}
/* V27 · Ajuste final Home: countdown en una línea + sponsors compactos */
.app-hero__inner,
.fc-band__inner{
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
flex-wrap:nowrap!important;
gap:12px!important;
min-height:58px!important;
padding-top:8px!important;
padding-bottom:8px!important;
}
.fc-band__inner > div:first-child{
min-width:0!important;
flex:1 1 auto!important;
}
.fc-band__title{
max-width:100%!important;
font-size:clamp(14px,2.2vw,18px)!important;
line-height:1.12!important;
white-space:normal!important;
}
.fc-band__dates{
font-size:11px!important;
line-height:1.15!important;
}
.fc-band__spacer{
display:none!important;
}
.fc-countdown{
display:flex!important;
align-items:center!important;
justify-content:flex-end!important;
flex-wrap:nowrap!important;
gap:clamp(5px,1.2vw,10px)!important;
flex:0 0 auto!important;
margin-left:auto!important;
white-space:nowrap!important;
}
.fc-countdown__cell{
min-width:auto!important;
width:auto!important;
flex:0 0 auto!important;
}
.fc-countdown__num{
font-size:clamp(15px,2.2vw,22px)!important;
line-height:1!important;
font-weight:800!important;
}
.fc-countdown__lab{
font-size:clamp(7px,1.1vw,10px)!important;
line-height:1.05!important;
}
.sponsors{
gap:14px!important;
margin-top:16px!important;
}
.sponsor-card{
min-height:96px!important;
padding:18px 20px!important;
gap:14px!important;
align-items:center!important;
}
.sponsor-card span{
display:block!important;
margin:0!important;
line-height:1.15!important;
}
.sponsor-card img{
display:block!important;
margin:0!important;
max-height:54px!important;
object-fit:contain!important;
}
.sponsor-main img{
background:transparent!important;
border-radius:0!important;
padding:0!important;
filter:none!important;
}
@media(max-width:640px){
.app-hero__inner,
.fc-band__inner{
min-height:58px!important;
padding:8px 16px!important;
gap:8px!important;
}
.fc-band__inner > div:first-child{
max-width:47%!important;
}
.fc-band__title{
font-size:14px!important;
line-height:1.1!important;
white-space:normal!important;
}
.fc-band__dates{
display:none!important;
}
.fc-countdown{
gap:5px!important;
}
.fc-countdown__num{
font-size:15px!important;
}
.fc-countdown__lab{
font-size:7px!important;
}
.sponsors{
gap:12px!important;
margin-top:14px!important;
}
.sponsor-card{
min-height:112px!important;
padding:16px 18px!important;
gap:8px!important;
align-items:flex-start!important;
justify-content:space-between!important;
}
.sponsor-card span{
min-height:24px!important;
display:flex!important;
align-items:flex-start!important;
}
.sponsor-card a{
width:100%!important;
display:flex!important;
align-items:flex-end!important;
min-height:44px!important;
}
.sponsor-card img{
margin:0!important;
max-height:44px!important;
max-width:190px!important;
object-fit:contain!important;
}
}
/* V28 · Ranking chart: eje X por posición, sin nombres inclinados */
.chart-card[data-mode="rank"] .bar-chart{
min-width:760px!important;
}
.chart-card[data-mode="rank"] .bar-group{
min-width:54px!important;
}
.chart-card[data-mode="rank"] .bar-label{
bottom:34px!important;
left:50%!important;
width:auto!important;
min-width:34px!important;
padding:5px 8px!important;
border-radius:999px!important;
background:#eef2ff!important;
color:#2C46C8!important;
font-size:12px!important;
font-weight:900!important;
text-align:center!important;
line-height:1!important;
white-space:nowrap!important;
transform:translateX(-50%)!important;
}
.chart-card[data-mode="rank"] .rank-1 .bar-label{background:#fff7d8!important;color:#8a6d00!important;}
.chart-card[data-mode="rank"] .rank-2 .bar-label{background:#edf1f7!important;color:#505B73!important;}
.chart-card[data-mode="rank"] .rank-3 .bar-label{background:#fff1e6!important;color:#9a4f12!important;}
.chart-card[data-mode="rank"] .bar-group{cursor:help;}
@media(max-width:640px){
.chart-card[data-mode="rank"] .bar-chart{min-width:680px!important;}
.chart-card[data-mode="rank"] .bar-group{min-width:50px!important;}
.chart-card[data-mode="rank"] .bar-label{bottom:36px!important;font-size:11px!important;min-width:32px!important;padding:5px 7px!important;}
}
/* V29 · Ranking chart PRO: badges compactos + tooltip tap/hover */
.chart-card[data-mode="rank"] .bar-chart{
min-width:740px!important;
padding-left:18px!important;
padding-right:18px!important;
}
.chart-card[data-mode="rank"] .bar-group{
min-width:58px!important;
cursor:pointer!important;
outline:none!important;
}
.chart-card[data-mode="rank"] .bar-group:focus-visible .bar-label{
box-shadow:0 0 0 3px rgba(68,98,237,.22),0 8px 18px rgba(2,15,42,.12)!important;
}
.chart-card[data-mode="rank"] .bar-label{
bottom:28px!important;
left:50%!important;
width:auto!important;
min-width:36px!important;
height:30px!important;
padding:0 9px!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
border-radius:999px!important;
background:#fff!important;
border:1px solid #dbe3f0!important;
color:#1f2a44!important;
font-size:13px!important;
font-weight:950!important;
line-height:1!important;
letter-spacing:0!important;
text-align:center!important;
white-space:nowrap!important;
transform:translateX(-50%)!important;
box-shadow:0 6px 16px rgba(2,15,42,.08)!important;
}
.chart-card[data-mode="rank"] .rank-1 .bar-label{
background:#fff7d8!important;
border-color:#ffdf69!important;
color:#8a6d00!important;
}
.chart-card[data-mode="rank"] .rank-2 .bar-label{
background:#f2f4f8!important;
border-color:#cfd6e6!important;
color:#505B73!important;
}
.chart-card[data-mode="rank"] .rank-3 .bar-label{
background:#fff1e6!important;
border-color:#f0b37a!important;
color:#9a4f12!important;
}
.chart-card[data-mode="rank"] .bar-group:hover .bar-label,
.chart-card[data-mode="rank"] .bar-group:focus .bar-label{
transform:translateX(-50%) translateY(-2px)!important;
box-shadow:0 10px 22px rgba(2,15,42,.14)!important;
}
.chart-tooltip{
position:fixed;
z-index:9999;
display:none;
min-width:210px;
max-width:min(320px,calc(100vw - 20px));
padding:13px 15px;
border-radius:16px;
background:#020F2A;
color:#fff;
box-shadow:0 18px 44px rgba(2,15,42,.34);
border:1px solid rgba(255,255,255,.14);
pointer-events:none;
transform:translateZ(0);
}
.chart-tooltip.is-visible{display:block;animation:chartTipIn .14s ease both;}
.chart-tooltip strong{
display:block;
margin-bottom:8px;
font-size:14px;
line-height:1.15;
}
.chart-tooltip span{
display:block;
color:#dce4ff;
font-size:12px;
font-weight:750;
line-height:1.45;
}
@keyframes chartTipIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:640px){
.chart-card[data-mode="rank"] .bar-chart{
min-width:620px!important;
padding-left:14px!important;
padding-right:14px!important;
}
.chart-card[data-mode="rank"] .bar-group{min-width:54px!important;}
.chart-card[data-mode="rank"] .bar-label{
bottom:30px!important;
min-width:34px!important;
height:28px!important;
padding:0 8px!important;
font-size:12px!important;
}
.chart-tooltip{
min-width:200px;
padding:12px 14px;
border-radius:15px;
}
}
/* V30 · Ranking chart final: badges grandes, rectos y centrados */
.chart-card[data-mode="rank"] .bar-chart{
min-width:780px!important;
padding-left:22px!important;
padding-right:22px!important;
}
.chart-card[data-mode="rank"] .bar-group{
position:relative!important;
display:flex!important;
align-items:flex-end!important;
justify-content:center!important;
min-width:66px!important;
height:100%!important;
cursor:pointer!important;
outline:none!important;
}
.chart-card[data-mode="rank"] .bar-pair{
display:flex!important;
justify-content:center!important;
align-items:flex-end!important;
gap:5px!important;
margin-left:auto!important;
margin-right:auto!important;
}
.chart-card[data-mode="rank"] .bar-label,
.chart-card[data-mode="rank"] .rank-1 .bar-label,
.chart-card[data-mode="rank"] .rank-2 .bar-label,
.chart-card[data-mode="rank"] .rank-3 .bar-label{
position:absolute!important;
left:50%!important;
right:auto!important;
bottom:30px!important;
transform:translateX(-50%) rotate(0deg)!important;
transform-origin:center center!important;
width:54px!important;
min-width:54px!important;
height:42px!important;
padding:0!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
border-radius:16px!important;
background:#fff!important;
border:1px solid #dbe3f0!important;
color:#1f2a44!important;
font-size:24px!important;
font-weight:950!important;
line-height:1!important;
letter-spacing:0!important;
text-align:center!important;
white-space:nowrap!important;
box-shadow:0 8px 18px rgba(2,15,42,.10)!important;
z-index:5!important;
pointer-events:none!important;
}
.chart-card[data-mode="rank"] .rank-1 .bar-label{
background:#fff7d8!important;
border-color:#ffdf69!important;
}
.chart-card[data-mode="rank"] .rank-2 .bar-label{
background:#f2f4f8!important;
border-color:#cfd6e6!important;
}
.chart-card[data-mode="rank"] .rank-3 .bar-label{
background:#fff1e6!important;
border-color:#f0b37a!important;
}
.chart-card[data-mode="rank"] .bar-group:hover .bar-label,
.chart-card[data-mode="rank"] .bar-group:focus .bar-label,
.chart-card[data-mode="rank"] .bar-group:focus-visible .bar-label{
transform:translateX(-50%) translateY(-2px) rotate(0deg)!important;
box-shadow:0 12px 26px rgba(2,15,42,.16)!important;
}
.chart-card[data-mode="rank"] .bar-value{
font-size:12px!important;
font-weight:950!important;
}
@media(max-width:640px){
.chart-card[data-mode="rank"] .bar-chart{
min-width:690px!important;
padding-left:18px!important;
padding-right:18px!important;
}
.chart-card[data-mode="rank"] .bar-group{
min-width:62px!important;
}
.chart-card[data-mode="rank"] .bar-pair{
gap:5px!important;
}
.chart-card[data-mode="rank"] .bar-label,
.chart-card[data-mode="rank"] .rank-1 .bar-label,
.chart-card[data-mode="rank"] .rank-2 .bar-label,
.chart-card[data-mode="rank"] .rank-3 .bar-label{
bottom:32px!important;
width:52px!important;
min-width:52px!important;
height:40px!important;
border-radius:15px!important;
font-size:24px!important;
}
}
/* V30 · Doble horario en resultados: hora local del partido + hora España. */
.match-times{
display:flex;
flex-wrap:wrap;
gap:8px 14px;
padding:0 16px 10px;
color:#28324a;
font-size:12px;
}
.match-times span{
display:inline-flex;
align-items:center;
gap:4px;
background:#f7f9fc;
border:1px solid #e4e8f0;
border-radius:999px;
padding:7px 10px;
}
.match-times strong{color:#000;font-weight:800}
.match-times em{font-style:normal;color:#6b7280;font-weight:700}
@media(max-width:640px){
.match-times{justify-content:center;padding-top:2px}
.match-times span{width:100%;justify-content:center;border-radius:12px}
}
.match-time-flag{
display:inline-flex;
align-items:center;
margin-left:4px;
font-size:1.05em;
line-height:1;
}
/* V30.1 · Ranking con empates + buscador/paginación */
.ranking-tools{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin:0 0 16px;flex-wrap:wrap}
.ranking-search{display:grid;gap:6px;min-width:min(360px,100%);font-weight:800;color:#1f2a44;font-size:13px}
.ranking-search input{width:100%;border:1px solid #dbe3f0;border-radius:14px;padding:12px 14px;font:inherit;background:#fff;color:#020F2A;outline:none}
.ranking-search input:focus{border-color:#4462ED;box-shadow:0 0 0 3px rgba(68,98,237,.14)}
.ranking-page-info{font-size:13px;font-weight:800;color:#505B73}
.ranking-pagination{display:flex;align-items:center;justify-content:center;gap:12px;margin:18px 0 0;flex-wrap:wrap}
.ranking-pagination button{border:0;border-radius:999px;background:#020F2A;color:#fff;font-weight:900;padding:10px 16px;cursor:pointer}
.ranking-pagination button:disabled{opacity:.35;cursor:not-allowed}
.ranking-pagination span{font-size:13px;font-weight:900;color:#1f2a44}
.empty-table{text-align:center!important;color:#505B73!important;font-weight:800;padding:22px!important}
@media(max-width:640px){.ranking-tools{align-items:stretch}.ranking-page-info{width:100%}.ranking-pagination{justify-content:space-between}.ranking-pagination button{flex:1}}
/* V31 · Ranking gráficas PRO: flechas desktop + hint móvil compacto */
.chart-card{
position:relative!important;
}
.chart-scroll-controls{
position:absolute;
right:22px;
bottom:24px;
z-index:12;
display:none;
gap:10px;
align-items:center;
pointer-events:none;
}
.chart-card.has-horizontal-scroll .chart-scroll-controls{
display:flex;
}
.chart-scroll-btn{
width:44px;
height:44px;
display:grid;
place-items:center;
border:1px solid rgba(2,15,42,.10);
border-radius:999px;
background:rgba(255,255,255,.92);
color:#020F2A;
font-size:30px;
font-weight:950;
line-height:1;
cursor:pointer;
box-shadow:0 14px 30px rgba(2,15,42,.16);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
transition:transform .16s ease, background .16s ease, opacity .16s ease, box-shadow .16s ease;
pointer-events:auto;
}
.chart-scroll-btn:hover:not(:disabled){
transform:translateY(-2px);
background:#fff;
box-shadow:0 18px 38px rgba(2,15,42,.20);
}
.chart-scroll-btn:disabled{
opacity:.35;
cursor:not-allowed;
transform:none!important;
}
.chart-scroll::after{
content:"";
position:sticky;
right:0;
bottom:0;
float:right;
width:58px;
height:100%;
min-height:350px;
margin-left:-58px;
background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.92));
pointer-events:none;
z-index:5;
}
.swipe-hint{
gap:8px!important;
padding:9px 13px!important;
border:1px solid rgba(255,255,255,.16)!important;
background:linear-gradient(135deg,rgba(2,15,42,.96),rgba(35,55,116,.94))!important;
box-shadow:0 18px 42px rgba(2,15,42,.34), inset 0 1px 0 rgba(255,255,255,.14)!important;
font-size:12px!important;
letter-spacing:.01em!important;
}
.swipe-hint span:last-child{
font-weight:950!important;
text-transform:uppercase!important;
letter-spacing:.04em!important;
}
.swipe-hint__arrows{
width:28px;
height:28px;
display:inline-grid;
place-items:center;
border-radius:999px;
background:rgba(255,204,0,.16);
color:#FFCC00!important;
letter-spacing:0!important;
font-size:16px!important;
}
.swipe-hint__hand{
display:none!important;
}
@media(min-width:641px){
.swipe-hint{display:none!important;}
}
@media(max-width:640px){
.chart-scroll-controls{display:none!important;}
.chart-scroll::after{display:none!important;}
.swipe-hint{
bottom:46px!important;
padding:8px 12px!important;
border-radius:999px!important;
font-size:11px!important;
}
.swipe-hint__arrows{
width:25px;
height:25px;
font-size:14px!important;
}
}
/* V32 · Gráficas ranking: navegación visible desktop + contenedor compacto + hint móvil PRO */
.chart-card{
position:relative!important;
overflow:visible!important;
padding-bottom:20px!important;
}
.chart-scroll{
position:relative!important;
overflow-x:auto!important;
overflow-y:hidden!important;
max-height:440px!important;
padding-bottom:14px!important;
scrollbar-width:thin;
scrollbar-color:#a5acbb #eef2f7;
}
.chart-scroll::-webkit-scrollbar{height:10px!important;display:block!important;}
.chart-scroll::-webkit-scrollbar-track{background:#eef2f7!important;border-radius:999px!important;}
.chart-scroll::-webkit-scrollbar-thumb{background:#a5acbb!important;border-radius:999px!important;border:2px solid #eef2f7!important;}
.chart-scroll::after{display:none!important;content:none!important;}
.bar-chart{
height:390px!important;
min-height:390px!important;
max-height:390px!important;
padding:22px 22px 28px!important;
overflow:hidden!important;
}
.chart-card[data-mode="rank"] .bar-chart{
min-width:100%!important;
}
.chart-scroll-controls{
position:absolute!important;
left:0!important;
right:0!important;
top:50%!important;
bottom:auto!important;
transform:translateY(-50%)!important;
z-index:30!important;
display:none;
justify-content:space-between!important;
align-items:center!important;
padding:0 10px!important;
pointer-events:none!important;
}
.chart-card.has-horizontal-scroll .chart-scroll-controls{
display:flex!important;
}
.chart-scroll-btn{
width:54px!important;
height:54px!important;
display:grid!important;
place-items:center!important;
border:1px solid rgba(2,15,42,.12)!important;
border-radius:18px!important;
background:rgba(255,255,255,.96)!important;
color:#020F2A!important;
font-size:38px!important;
font-weight:950!important;
line-height:.8!important;
cursor:pointer!important;
box-shadow:0 18px 40px rgba(2,15,42,.20)!important;
backdrop-filter:blur(12px)!important;
-webkit-backdrop-filter:blur(12px)!important;
pointer-events:auto!important;
transition:transform .16s ease, opacity .16s ease, box-shadow .16s ease, background .16s ease!important;
}
.chart-scroll-btn:hover:not(:disabled){
transform:translateY(-2px) scale(1.03)!important;
background:#fff!important;
box-shadow:0 22px 48px rgba(2,15,42,.26)!important;
}
.chart-scroll-btn:disabled{
opacity:.28!important;
cursor:not-allowed!important;
transform:none!important;
}
.swipe-hint{
gap:8px!important;
padding:8px 12px!important;
border-radius:999px!important;
border:1px solid rgba(255,255,255,.18)!important;
background:linear-gradient(135deg,rgba(2,15,42,.96),rgba(44,57,115,.96))!important;
box-shadow:0 18px 42px rgba(2,15,42,.34), inset 0 1px 0 rgba(255,255,255,.16)!important;
font-size:11px!important;
letter-spacing:.04em!important;
text-transform:uppercase!important;
}
.swipe-hint span:last-child{font-weight:950!important;}
.swipe-hint__hand{display:none!important;}
.swipe-hint__arrows{
width:26px!important;
height:26px!important;
display:inline-grid!important;
place-items:center!important;
border-radius:999px!important;
background:rgba(255,204,0,.16)!important;
color:#ffcc00!important;
letter-spacing:0!important;
font-size:15px!important;
}
@media(min-width:641px){
.swipe-hint{display:none!important;}
}
@media(max-width:640px){
.chart-card{padding-bottom:14px!important;}
.chart-scroll{max-height:405px!important;padding-bottom:12px!important;}
.bar-chart{height:372px!important;min-height:372px!important;max-height:372px!important;padding:20px 18px 26px!important;}
.chart-scroll-controls{display:none!important;}
.swipe-hint{bottom:44px!important;}
}
/* V33 · Gráficas ranking: todos los datos + navegación desktop + contenedor compacto */
.chart-card{
position:relative!important;
overflow:visible!important;
padding:16px 18px 18px!important;
}
.chart-title-row{
margin-bottom:10px!important;
}
.chart-title-row h3{
font-size:18px!important;
line-height:1.15!important;
}
.chart-title-row p{
font-size:12px!important;
}
.chart-scroll{
position:relative!important;
overflow-x:auto!important;
overflow-y:hidden!important;
max-height:350px!important;
padding-bottom:12px!important;
scrollbar-width:thin;
scrollbar-color:#a5acbb #eef2f7;
}
.chart-scroll::-webkit-scrollbar{height:10px!important;display:block!important;}
.chart-scroll::-webkit-scrollbar-track{background:#eef2f7!important;border-radius:999px!important;}
.chart-scroll::-webkit-scrollbar-thumb{background:#a5acbb!important;border-radius:999px!important;border:2px solid #eef2f7!important;}
.bar-chart{
height:318px!important;
min-height:318px!important;
max-height:318px!important;
padding:18px 20px 24px!important;
overflow:hidden!important;
}
.bar-chart::before{
top:84px!important;
box-shadow:0 62px 0 #E4E8F0,0 124px 0 #E4E8F0!important;
}
.bar-pair,
.chart-card[data-mode="single"] .bar-pair,
.chart-card[data-mode="rank"] .bar-pair{
height:178px!important;
margin-bottom:92px!important;
}
.chart-card[data-mode="rank"] .bar-label,
.chart-card[data-mode="rank"] .rank-1 .bar-label,
.chart-card[data-mode="rank"] .rank-2 .bar-label,
.chart-card[data-mode="rank"] .rank-3 .bar-label{
bottom:20px!important;
}
.chart-scroll-controls{
position:absolute!important;
left:0!important;
right:0!important;
top:54%!important;
transform:translateY(-50%)!important;
z-index:30!important;
display:none;
justify-content:space-between!important;
align-items:center!important;
padding:0 8px!important;
pointer-events:none!important;
}
.chart-card.has-horizontal-scroll .chart-scroll-controls{display:flex!important;}
.chart-scroll-btn{
width:52px!important;
height:52px!important;
display:grid!important;
place-items:center!important;
border:1px solid rgba(2,15,42,.12)!important;
border-radius:18px!important;
background:rgba(255,255,255,.96)!important;
color:#020F2A!important;
font-size:38px!important;
font-weight:950!important;
line-height:.8!important;
cursor:pointer!important;
box-shadow:0 18px 40px rgba(2,15,42,.20)!important;
backdrop-filter:blur(12px)!important;
-webkit-backdrop-filter:blur(12px)!important;
pointer-events:auto!important;
transition:transform .16s ease, opacity .16s ease, box-shadow .16s ease, background .16s ease!important;
}
.chart-scroll-btn:hover:not(:disabled){
transform:translateY(-2px) scale(1.03)!important;
background:#fff!important;
box-shadow:0 22px 48px rgba(2,15,42,.26)!important;
}
.chart-scroll-btn:disabled{opacity:.25!important;cursor:not-allowed!important;}
.swipe-hint{
gap:8px!important;
padding:8px 12px!important;
border-radius:999px!important;
border:1px solid rgba(255,255,255,.18)!important;
background:linear-gradient(135deg,rgba(2,15,42,.96),rgba(44,57,115,.96))!important;
box-shadow:0 18px 42px rgba(2,15,42,.34), inset 0 1px 0 rgba(255,255,255,.16)!important;
font-size:11px!important;
letter-spacing:.04em!important;
text-transform:uppercase!important;
}
.swipe-hint span:last-child{font-weight:950!important;}
.swipe-hint__hand{display:none!important;}
.swipe-hint__arrows{
width:26px!important;
height:26px!important;
display:inline-grid!important;
place-items:center!important;
border-radius:999px!important;
background:rgba(255,204,0,.16)!important;
color:#ffcc00!important;
letter-spacing:0!important;
font-size:15px!important;
}
@media(min-width:641px){.swipe-hint{display:none!important;}}
@media(max-width:640px){
.chart-card{padding:14px!important;}
.chart-title-row{flex-direction:column!important;gap:8px!important;}
.chart-scroll{max-height:370px!important;padding-bottom:12px!important;}
.bar-chart{height:338px!important;min-height:338px!important;max-height:338px!important;padding:18px 18px 24px!important;}
.bar-chart::before{top:92px!important;box-shadow:0 62px 0 #E4E8F0,0 124px 0 #E4E8F0!important;}
.bar-pair,.chart-card[data-mode="single"] .bar-pair,.chart-card[data-mode="rank"] .bar-pair{height:178px!important;margin-bottom:98px!important;}
.chart-scroll-controls{display:none!important;}
.swipe-hint{bottom:42px!important;}
}
/* V31 · Ranking APP mode: bloqueo de zoom y ancho fijo móvil */
html.app-no-zoom,
html.app-no-zoom body{
width:100%;
max-width:100%;
overflow-x:hidden;
-webkit-text-size-adjust:100%;
text-size-adjust:100%;
overscroll-behavior-x:none;
}
body.app-no-zoom{
touch-action:manipulation;
}
body.app-no-zoom main,
body.app-no-zoom .app-shell,
body.app-no-zoom .fc-surface,
body.app-no-zoom .app-dark-section{
max-width:100vw;
overflow-x:hidden;
}
body.app-no-zoom .chart-scroll,
body.app-no-zoom .table-scroll,
body.app-no-zoom .ko-scroll{
touch-action:pan-x pan-y;
-webkit-overflow-scrolling:touch;
}
body.app-no-zoom input,
body.app-no-zoom select,
body.app-no-zoom textarea,
body.app-no-zoom button{
font-size:16px;
}
body.app-no-zoom img,
body.app-no-zoom video,
body.app-no-zoom canvas,
body.app-no-zoom svg{
max-width:100%;
}
/* V30 · Live results: minuto y goleadores en tarjetas de partidos */
.match-card--live{border-color:rgba(249,106,23,.55);box-shadow:0 0 0 1px rgba(249,106,23,.18),0 16px 36px rgba(0,0,0,.18)}
.match-live-minute{display:inline-flex;align-items:center;gap:.25rem;margin-left:.4rem;padding:.16rem .45rem;border-radius:999px;background:rgba(249,106,23,.14);color:#f96a17;font-weight:800;white-space:nowrap}
.match-goals{display:flex;flex-wrap:wrap;gap:.45rem;margin:.7rem 0 .2rem;justify-content:center}
.match-goals span{display:inline-flex;align-items:center;gap:.3rem;padding:.35rem .55rem;border-radius:999px;background:rgba(44,57,115,.08);font-size:.86rem;font-weight:750}
/*Informacion flotante en resultados.html "Los resultados se actualizan automáticamente cada 10 segundos. No hace falta recargar la página."*/
.live-info-toast {
position: fixed;
left: 50%;
bottom: 78px;
transform: translateX(-50%);
width: calc(100% - 40px);
max-width: 520px;
z-index: 99999;
padding: 14px 18px;
border-radius: 18px;
background: rgba(8, 24, 48, 0.96);
color: #fff;
font-size: 14px;
line-height: 1.45;
font-weight: 700;
text-align: center;
box-shadow: 0 12px 30px rgba(0,0,0,.25);
opacity: 1;
visibility: visible;
pointer-events: none;
animation: liveToastShow 4s ease forwards;
}
@keyframes liveToastShow {
0% {
opacity: 0;
transform: translateX(-50%) translateY(14px);
}
12% {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
82% {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
100% {
opacity: 0;
transform: translateX(-50%) translateY(14px);
}
}
@media (max-width: 768px) {
.live-info-toast {
max-width: none;
width: calc(100% - 40px);
bottom: 78px;
}
}
@media (min-width: 769px) {
.live-info-toast {
bottom: 24px;
}
}
/* V34 · Fix gráfica ranking live: sin desbordes ni reseteo visual */
.chart-card{
max-width:100%!important;
}
.chart-scroll{
width:100%!important;
max-width:100%!important;
box-sizing:border-box!important;
border-radius:16px!important;
overscroll-behavior-x:contain!important;
}
.bar-chart{
box-sizing:border-box!important;
}
.analytics-card,
.rank-section{
max-width:100%!important;
}
.chart-card.has-horizontal-scroll .chart-scroll{
overflow-x:auto!important;
}
@media(min-width:641px){
.chart-scroll-controls{
left:10px!important;
right:10px!important;
}
}
/* V36 · Fix final ranking chart: barras compactas y proporcionadas */
.chart-card[data-mode="rank"]{
overflow:visible!important;
}
.chart-card[data-mode="rank"] .chart-scroll{
max-height:300px!important;
overflow-x:auto!important;
overflow-y:hidden!important;
padding-bottom:10px!important;
}
.chart-card[data-mode="rank"] .bar-chart{
height:270px!important;
min-height:270px!important;
max-height:270px!important;
padding:18px 20px 22px!important;
align-items:flex-end!important;
overflow:hidden!important;
}
.chart-card[data-mode="rank"] .bar-chart::before{
top:70px!important;
box-shadow:0 52px 0 #E4E8F0,0 104px 0 #E4E8F0!important;
}
.chart-card[data-mode="rank"] .bar-group{
height:100%!important;
align-items:flex-end!important;
}
.chart-card[data-mode="rank"] .bar-pair{
height:118px!important;
max-height:118px!important;
margin-bottom:82px!important;
align-items:flex-end!important;
}
.chart-card[data-mode="rank"] .bar,
.chart-card[data-mode="rank"] .bar.orange,
.chart-card[data-mode="rank"] .bar.blue{
max-height:118px!important;
}
.chart-card[data-mode="rank"] .bar-value{
top:-18px!important;
font-size:11px!important;
}
.chart-card[data-mode="rank"] .bar-label,
.chart-card[data-mode="rank"] .rank-1 .bar-label,
.chart-card[data-mode="rank"] .rank-2 .bar-label,
.chart-card[data-mode="rank"] .rank-3 .bar-label{
bottom:18px!important;
}
@media(max-width:640px){
.chart-card[data-mode="rank"] .chart-scroll{
max-height:300px!important;
}
.chart-card[data-mode="rank"] .bar-chart{
height:270px!important;
min-height:270px!important;
max-height:270px!important;
padding:16px 18px 22px!important;
}
.chart-card[data-mode="rank"] .bar-chart::before{
top:72px!important;
box-shadow:0 50px 0 #E4E8F0,0 100px 0 #E4E8F0!important;
}
.chart-card[data-mode="rank"] .bar-pair{
height:110px!important;
max-height:110px!important;
margin-bottom:86px!important;
}
.chart-card[data-mode="rank"] .bar,
.chart-card[data-mode="rank"] .bar.orange,
.chart-card[data-mode="rank"] .bar.blue{
max-height:110px!important;
}
.chart-card[data-mode="rank"] .bar-label,
.chart-card[data-mode="rank"] .rank-1 .bar-label,
.chart-card[data-mode="rank"] .rank-2 .bar-label,
.chart-card[data-mode="rank"] .rank-3 .bar-label{
bottom:20px!important;
}
}
/* V34 · Ajustes gráficas estadísticas: barras proporcionales + iconos compactos */
.chart-card[data-mode="rank"] .bar-group{
padding-bottom:22px!important;
}
.chart-card[data-mode="rank"] .bar-total{
position:absolute!important;
left:50%!important;
bottom:0!important;
transform:translateX(-50%)!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
min-width:44px!important;
height:18px!important;
padding:0 7px!important;
border-radius:999px!important;
background:#020F2A!important;
color:#fff!important;
font-size:10px!important;
font-weight:900!important;
line-height:1!important;
white-space:nowrap!important;
box-shadow:0 8px 18px rgba(2,15,42,.14)!important;
}
.chart-card[data-mode="rank"] .bar-label,
.chart-card[data-mode="rank"] .rank-1 .bar-label,
.chart-card[data-mode="rank"] .rank-2 .bar-label,
.chart-card[data-mode="rank"] .rank-3 .bar-label{
bottom:24px!important;
}
.chart-card[data-mode="single"] .bar-chart{
min-width:max-content!important;
width:max-content!important;
gap:12px!important;
padding-right:22px!important;
}
.chart-card[data-mode="single"] .bar-group{
min-width:50px!important;
width:50px!important;
}
.chart-card[data-mode="single"] .bar-label{
bottom:22px!important;
width:auto!important;
min-width:42px!important;
transform:translateX(-50%)!important;
text-align:center!important;
}
.chart-card[data-mode="single"] .bar-pair{
margin-bottom:82px!important;
}
.chart-team-icon,
.chart-player-icon{
display:inline-grid!important;
place-items:center!important;
position:relative!important;
width:40px!important;
height:40px!important;
border-radius:16px!important;
background:#fff!important;
border:1px solid #dfe6f1!important;
box-shadow:0 10px 24px rgba(2,15,42,.12)!important;
}
.chart-team-flag{
display:block!important;
font-size:26px!important;
line-height:1!important;
filter:saturate(1.08)!important;
}
.chart-player-photo{
width:34px!important;
height:34px!important;
border-radius:14px!important;
display:grid!important;
place-items:center!important;
background:linear-gradient(180deg,#eef3ff,#dfe7ff)!important;
color:#20315f!important;
border:1px solid rgba(68,98,237,.20)!important;
overflow:hidden!important;
position:relative!important;
}
.chart-player-photo strong{
font-size:10px!important;
font-weight:950!important;
letter-spacing:-.03em!important;
}
.chart-player-photo small{
position:absolute!important;
right:3px!important;
bottom:2px!important;
min-width:12px!important;
height:12px!important;
border-radius:999px!important;
background:#020F2A!important;
color:#fff!important;
font-size:8px!important;
font-weight:900!important;
line-height:12px!important;
}
.chart-player-flag{
position:absolute!important;
right:-4px!important;
bottom:-4px!important;
font-size:15px!important;
width:20px!important;
height:20px!important;
display:grid!important;
place-items:center!important;
background:#fff!important;
border-radius:999px!important;
box-shadow:0 5px 12px rgba(2,15,42,.14)!important;
}
@media(max-width:640px){
.chart-card[data-mode="single"] .bar-group{min-width:46px!important;width:46px!important;}
.chart-team-icon,.chart-player-icon{width:38px!important;height:38px!important;border-radius:15px!important;}
.chart-team-flag{font-size:24px!important;}
}
/* V35 · Emojis de selección + camisetas CSS para goleadores */
.chart-card[data-mode="single"] .bar-total--single{
position:absolute!important;
left:50%!important;
bottom:0!important;
transform:translateX(-50%)!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
min-width:30px!important;
height:17px!important;
padding:0 7px!important;
border-radius:999px!important;
background:#020F2A!important;
color:#fff!important;
font-size:10px!important;
font-weight:950!important;
line-height:1!important;
white-space:nowrap!important;
box-shadow:0 8px 18px rgba(2,15,42,.14)!important;
}
.chart-card[data-mode="single"] .bar-label{
bottom:24px!important;
}
.chart-player-photo{
background:linear-gradient(180deg,color-mix(in srgb,var(--kit-color,#4462ED) 84%,#ffffff 16%),var(--kit-color,#4462ED))!important;
color:#fff!important;
text-shadow:0 1px 3px rgba(0,0,0,.35)!important;
border-color:rgba(255,255,255,.40)!important;
}
.chart-player-shirt{
position:absolute!important;
inset:5px 6px 4px!important;
background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.05))!important;
clip-path:polygon(26% 0,40% 12%,60% 12%,74% 0,100% 22%,84% 42%,78% 100%,22% 100%,16% 42%,0 22%)!important;
opacity:.95!important;
}
.chart-player-photo strong,
.chart-player-photo small{
position:relative!important;
z-index:2!important;
}
.chart-player-photo small{
text-shadow:none!important;
}
.chart-team-icon:hover,
.chart-player-icon:hover{
transform:translateY(-2px)!important;
transition:transform .18s ease!important;
}
@media(max-width:640px){
.chart-card[data-mode="single"] .bar-total--single{font-size:9px!important;height:16px!important;min-width:28px!important;}
}
/* V36 · Banderas reales por imagen + miniaturas reales de goleadores */
.chart-team-flag-img{
display:block!important;
width:30px!important;
height:30px!important;
border-radius:999px!important;
object-fit:cover!important;
box-shadow:0 0 0 1px rgba(2,15,42,.08)!important;
}
.chart-team-flag-img--fallback{
display:grid!important;
place-items:center!important;
font-size:24px!important;
line-height:1!important;
}
.chart-player-photo{
background:linear-gradient(180deg,#eef3ff,#dfe7ff)!important;
color:#20315f!important;
text-shadow:none!important;
}
.chart-player-img{
position:absolute!important;
inset:0!important;
width:100%!important;
height:100%!important;
object-fit:cover!important;
border-radius:inherit!important;
z-index:2!important;
}
.chart-player-photo strong{
display:none!important;
z-index:1!important;
}
.chart-player-photo.is-fallback strong{
display:block!important;
}
.chart-player-photo.is-fallback{
background:linear-gradient(180deg,#f6f8fc,#dfe7ff)!important;
}
.chart-player-flag-img{
display:block!important;
width:18px!important;
height:18px!important;
border-radius:999px!important;
object-fit:cover!important;
}
.chart-player-flag-img--fallback{
display:grid!important;
place-items:center!important;
width:18px!important;
height:18px!important;
font-size:13px!important;
line-height:1!important;
}
/* V35 · Resultados: orden inteligente + incidencias del partido */
.matches-section-title{
margin:18px 0 4px;
padding:8px 12px;
border-radius:999px;
background:rgba(44,57,115,.08);
color:#2c3973;
font-size:13px;
font-weight:900;
width:max-content;
}
.matches-section-title:first-child{margin-top:0}
.match-events{
display:flex;
flex-wrap:wrap;
gap:.45rem;
margin:.55rem 16px .2rem;
justify-content:center;
}
.match-events span{
display:inline-flex;
align-items:center;
gap:.3rem;
padding:.32rem .55rem;
border-radius:999px;
background:rgba(44,57,115,.06);
font-size:.8rem;
font-weight:750;
}
.match-events small{color:#65708a;font-weight:700}
.match-events em,.match-goals em{font-style:normal;color:#65708a;font-weight:900}
.match-goals small{font-size:.72rem;color:#65708a;font-weight:700}
.match-events--cards .is-yellow{background:rgba(255,204,0,.18)}
.match-events--cards .is-red{background:rgba(223,28,60,.12);color:#b30f2d}
.match-events--important span{background:rgba(249,106,23,.1);color:#2c3973}
@media(max-width:640px){.match-events{margin-left:10px;margin-right:10px}.matches-section-title{font-size:12px}}
/* V37 · Resultados: filtros por estado de partido */
.matches-filter-shell{
position:sticky;
top:78px;
z-index:18;
margin:-4px 0 18px;
padding:10px 0 12px;
background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.88));
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
}
.matches-filters{
display:flex;
align-items:center;
gap:10px;
overflow-x:auto;
padding:2px 2px 4px;
scrollbar-width:none;
-webkit-overflow-scrolling:touch;
}
.matches-filters::-webkit-scrollbar{display:none;}
.match-filter{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
min-height:42px;
padding:10px 15px;
border:1px solid #dfe6f1;
border-radius:999px;
background:#fff;
color:#1f2a44;
box-shadow:0 8px 20px rgba(2,15,42,.06);
font-family:var(--fc-font);
font-size:13px;
font-weight:900;
line-height:1;
white-space:nowrap;
cursor:pointer;
transition:transform .16s ease,box-shadow .16s ease,background .16s ease,color .16s ease,border-color .16s ease;
}
.match-filter:hover{
transform:translateY(-1px);
box-shadow:0 12px 26px rgba(2,15,42,.10);
}
.match-filter.is-active{
background:#f96a17;
border-color:#f96a17;
color:#fff;
box-shadow:0 14px 30px rgba(249,106,23,.28);
}
.match-filter__count{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:24px;
height:24px;
padding:0 8px;
border-radius:999px;
background:#eef2ff;
color:#2c3973;
font-size:12px;
font-weight:950;
}
.match-filter.is-active .match-filter__count{
background:rgba(255,255,255,.22);
color:#fff;
}
.matches-empty-state{
padding:26px 18px;
border:1px dashed #cfd6e6;
border-radius:18px;
background:#fff;
color:#505B73;
text-align:center;
font-weight:800;
box-shadow:0 8px 22px rgba(2,15,42,.04);
}
.matches-empty-state strong{
display:block;
margin-bottom:6px;
color:#020F2A;
font-size:18px;
}
@media(max-width:640px){
.matches-filter-shell{
top:62px;
margin:-2px -16px 16px;
padding:10px 16px 12px;
background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.92));
}
.matches-filters{gap:8px;}
.match-filter{
min-height:40px;
padding:9px 12px;
font-size:12px;
}
.match-filter__count{
min-width:22px;
height:22px;
padding:0 7px;
font-size:11px;
}
}
/* V38 · Resultados: filtros desktop con chips y móvil con desplegable compacto */
.matches-filter-mobile{display:none;}
.matches-filter-buttons{display:flex;align-items:center;gap:10px;overflow-x:auto;padding:2px 2px 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.matches-filter-buttons::-webkit-scrollbar{display:none;}
.matches-filter-select-label{display:block;margin:0 0 7px;color:#505B73;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;}
.matches-filter-select-wrap{position:relative;}
.matches-filter-select-wrap::after{content:"⌄";position:absolute;right:14px;top:50%;transform:translateY(-56%);font-size:20px;font-weight:950;color:#f96a17;pointer-events:none;}
.matches-filter-select{width:100%;min-height:50px;padding:0 44px 0 16px;border:1px solid #dfe6f1;border-radius:18px;background:#fff;color:#1f2a44;box-shadow:0 10px 24px rgba(2,15,42,.08);font-family:var(--fc-font);font-size:16px;font-weight:950;outline:none;appearance:none;-webkit-appearance:none;}
.matches-filter-select:focus{border-color:#f96a17;box-shadow:0 0 0 4px rgba(249,106,23,.14),0 10px 24px rgba(2,15,42,.08);}
@media(max-width:640px){
.matches-filter-shell{top:62px;margin:-2px -16px 16px;padding:10px 16px 12px;}
.matches-filters{display:block;padding:0;overflow:visible;}
.matches-filter-mobile{display:block;}
.matches-filter-buttons{display:none;}
}
/* V39 · Home: countdown del siguiente partido */
.fc-next-countdown{
min-width:360px;
max-width:520px;
text-align:right;
color:#fff;
display:grid;
gap:4px;
justify-items:end;
}
.next-countdown__eyebrow{
text-transform:uppercase;
font-size:11px;
font-weight:900;
letter-spacing:.08em;
color:rgba(255,255,255,.82);
}
.next-countdown__teams{
max-width:100%;
font-size:clamp(18px,2.4vw,28px);
font-weight:950;
line-height:1.05;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.next-countdown__times{
display:flex;
align-items:center;
justify-content:flex-end;
flex-wrap:wrap;
gap:6px 10px;
font-size:11px;
font-weight:850;
color:rgba(255,255,255,.92);
}
.next-countdown__timer{
display:flex;
align-items:center;
justify-content:flex-end;
gap:6px;
margin-top:2px;
}
.next-countdown__cell{
min-width:38px;
display:grid;
place-items:center;
padding:3px 6px;
border-radius:10px;
background:rgba(2,15,42,.16);
border:1px solid rgba(255,255,255,.12);
}
.next-countdown__cell strong{
display:block;
color:#fff;
font-size:20px;
line-height:1;
font-weight:950;
}
.next-countdown__cell span{
display:block;
color:rgba(255,255,255,.84);
font-size:9px;
line-height:1.05;
font-weight:800;
}
.next-countdown__status{
display:inline-flex;
align-items:center;
min-height:34px;
padding:7px 11px;
border-radius:999px;
background:rgba(2,15,42,.18);
border:1px solid rgba(255,255,255,.12);
color:#fff;
font-size:12px;
font-weight:900;
}
.app-kpi-link{
display:block;
color:inherit!important;
text-decoration:none!important;
min-height:126px;
transition:transform .16s ease, border-color .16s ease, background .16s ease;
}
.app-kpi-link:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.26);}
.app-kpi-card strong{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;}
.app-kpi-card small{white-space:normal!important;line-height:1.32!important;}
@media(max-width:760px){
.app-hero__inner,.fc-band__inner{
align-items:flex-start!important;
flex-direction:column!important;
gap:9px!important;
}
.fc-band__inner > div:first-child{max-width:100%!important;width:100%!important;}
.fc-next-countdown{
width:100%;
min-width:0;
max-width:none;
text-align:left;
justify-items:start;
}
.next-countdown__teams{
white-space:normal;
font-size:20px;
}
.next-countdown__times,.next-countdown__timer{justify-content:flex-start;}
.next-countdown__cell{min-width:35px;padding:3px 5px;}
.next-countdown__cell strong{font-size:17px;}
.app-kpi-link{min-height:118px;}
}
/* V35 · Filtros premium ranking detalle */
.ranking-tools--advanced{
background:linear-gradient(180deg,#fff,#f8fbff);
border:1px solid #dfe6f2;
border-radius:20px;
padding:16px;
box-shadow:0 14px 34px rgba(2,15,42,.07);
margin-bottom:16px;
}
.ranking-tools__main{
display:grid;
grid-template-columns:minmax(260px,1.2fr) minmax(220px,.9fr) minmax(220px,.9fr);
gap:14px;
align-items:end;
}
.ranking-search,
.ranking-filter{
display:grid;
gap:8px;
min-width:0;
}
.ranking-search span,
.ranking-filter span{
font-size:12px;
font-weight:900;
color:#06122d;
letter-spacing:.01em;
}
.ranking-search input,
.ranking-filter select{
width:100%;
min-height:52px;
border:1px solid #d7deeb;
border-radius:15px;
background:#fff;
color:#111b33;
font-family:var(--fc-font);
font-weight:800;
font-size:15px;
padding:0 16px;
outline:none;
box-shadow:0 8px 18px rgba(2,15,42,.04);
}
.ranking-filter select{
appearance:none;
background-image:linear-gradient(45deg,transparent 50%,#2c46c8 50%),linear-gradient(135deg,#2c46c8 50%,transparent 50%);
background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;
background-size:6px 6px,6px 6px;
background-repeat:no-repeat;
padding-right:38px;
}
.ranking-search input:focus,
.ranking-filter select:focus{
border-color:#4462ED;
box-shadow:0 0 0 4px rgba(68,98,237,.12),0 8px 18px rgba(2,15,42,.05);
}
.ranking-tools__footer{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-top:12px;
}
.ranking-clear-filters{
display:none;
border:1px solid #d7deeb;
background:#fff;
color:#2c46c8;
border-radius:999px;
padding:10px 14px;
font-family:var(--fc-font);
font-weight:900;
cursor:pointer;
}
.ranking-clear-filters.is-visible{display:inline-flex;}
.ranking-page-info{font-weight:800;color:#34415c;font-size:13px;}
@media(max-width:760px){
.ranking-tools--advanced{
border-radius:24px;
padding:14px;
background:linear-gradient(180deg,#ffffff 0%,#f4f7ff 100%);
box-shadow:0 18px 40px rgba(2,15,42,.10);
}
.ranking-tools__main{
grid-template-columns:1fr;
gap:12px;
}
.ranking-search,
.ranking-filter{
background:#fff;
border:1px solid #e3e9f4;
border-radius:18px;
padding:11px 12px 12px;
box-shadow:0 10px 22px rgba(2,15,42,.05);
}
.ranking-search span,
.ranking-filter span{
font-size:11px;
text-transform:uppercase;
color:#506078;
}
.ranking-search input,
.ranking-filter select{
min-height:42px;
border:0;
border-radius:0;
padding:0;
box-shadow:none;
font-size:16px;
background-color:transparent;
}
.ranking-filter select{
background-position:calc(100% - 8px) 18px,calc(100% - 2px) 18px;
}
.ranking-search input:focus,
.ranking-filter select:focus{
box-shadow:none;
}
.ranking-tools__footer{
align-items:stretch;
flex-direction:column;
}
.ranking-page-info{
order:2;
text-align:center;
background:#eef3ff;
border:1px solid #dfe6f2;
border-radius:999px;
padding:10px 12px;
font-size:12px;
}
.ranking-clear-filters.is-visible{
display:flex;
width:100%;
justify-content:center;
background:#06122d;
color:#fff;
border-color:#06122d;
padding:13px 16px;
}
}
/* --- V Estadísticas premium / Porra gemelas ----------------------------- */
.stats-link-btn,
.stats-back-btn{
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:999px;
padding:10px 14px;
background:#fff;
color:#020F2A!important;
font-weight:900;
font-size:13px;
text-decoration:none!important;
box-shadow:0 10px 24px rgba(0,0,0,.18);
white-space:nowrap;
}
.stats-back-btn{background:var(--fc-yellow,#ffcc00);}
.analytics-panel--premium{position:relative;overflow:hidden;}
.analytics-panel--premium::before{
content:"";
position:absolute;
inset:-1px;
background:radial-gradient(circle at 86% 4%,rgba(255,204,0,.22),transparent 32%);
pointer-events:none;
}
.analytics-panel--premium>*{position:relative;z-index:1;}
.stats-hero-head p{margin:0;color:#dce4ff;font-size:14px;max-width:620px;}
.stats-mobile-select{display:none;margin:0 0 16px;}
.stats-mobile-select span{display:block;margin:0 0 7px;color:#cfd6e6;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;}
.stats-mobile-select select{
width:100%;
min-height:54px;
border-radius:16px;
border:2px solid #f96a17;
background:#fff;
color:#06122d;
font-family:var(--fc-font);
font-weight:900;
font-size:16px;
padding:0 42px 0 16px;
box-shadow:0 12px 26px rgba(2,15,42,.18);
}
.chart-card[data-mode="twins"] .chart-scroll{overflow:hidden!important;}
.chart-card[data-mode="twins"] .bar-chart{
min-width:0!important;
height:auto!important;
min-height:0!important;
padding:0!important;
display:block;
background:transparent;
border:0;
}
.chart-card[data-mode="twins"] .bar-chart::before{display:none;}
.twin-chart{display:grid;gap:12px;}
.twin-card{
background:linear-gradient(180deg,#fff,#f7f9fc);
border:1px solid #E4E8F0;
border-radius:18px;
padding:14px;
box-shadow:0 10px 22px rgba(2,15,42,.07);
}
.twin-card__top{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.twin-card__top strong{font-size:15px;color:#06122d;}
.twin-card__top span:last-child{margin-left:auto;color:#f96a17;font-weight:900;}
.twin-rank{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#06122d;color:#fff;font-weight:900;}
.twin-card__names{display:grid;grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr);align-items:center;gap:8px;}
.twin-card__names div{background:#fff;border:1px solid #edf1f7;border-radius:14px;padding:10px;min-width:0;}
.twin-card__names small{display:block;color:#506078;font-size:11px;font-weight:900;margin-bottom:4px;}
.twin-card__names b{display:block;color:#06122d;font-size:13px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.twin-card__names em{text-align:center;font-style:normal;font-size:20px;color:#f96a17;font-weight:900;}
.twin-progress{height:9px;background:#e9eef7;border-radius:999px;overflow:hidden;margin-top:12px;}
.twin-progress span{display:block;height:100%;background:linear-gradient(90deg,#f96a17,#ffcc00);border-radius:inherit;}
.stats-explain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.stats-explain-grid article{background:#fff;border:1px solid var(--fc-grey-light);border-radius:18px;padding:18px;}
.stats-explain-grid strong{display:block;font-size:22px;color:#06122d;margin-bottom:6px;}
.stats-explain-grid span{font-size:13px;color:#506078;}
@media(max-width:640px){
.analytics-head{gap:12px;}
.stats-link-btn,.stats-back-btn{width:100%;min-height:44px;}
.stats-mobile-select{display:block;}
.stats-desktop-tabs{display:none!important;}
.stats-page-hero{padding-bottom:24px;}
.twin-chart{gap:10px;}
.twin-card{padding:12px;border-radius:16px;}
.twin-card__names{grid-template-columns:1fr;}
.twin-card__names em{font-size:18px;line-height:1;}
.twin-card__names b{white-space:normal;}
.stats-explain-grid{grid-template-columns:1fr;}
}
/* V Estadísticas premium · detalle de porras gemelas */
.chart-card[data-mode="twins"] .chart-scroll{
overflow-x:hidden!important;
overflow-y:auto!important;
}
.chart-card[data-mode="twins"] .bar-chart{
height:auto!important;
min-height:0!important;
padding:0!important;
background:transparent!important;
border:0!important;
display:block!important;
}
.chart-card[data-mode="twins"] .swipe-hint{display:none!important;}
.twin-chart{display:grid;gap:14px;}
.twin-card{
background:linear-gradient(180deg,#fff,#f9fbff);
border:1px solid #e4e8f0;
border-radius:18px;
padding:16px;
box-shadow:0 12px 28px rgba(2,15,42,.06);
}
.twin-card__names--detailed{
display:grid;
grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr);
align-items:stretch;
gap:10px;
}
.twin-person{
background:#fff;
border:1px solid #edf1f7;
border-radius:16px;
padding:12px;
min-width:0;
}
.twin-person small{display:block;color:#506078;font-size:11px;font-weight:900;margin-bottom:4px;}
.twin-person b{display:block;color:#06122d;font-size:14px;line-height:1.15;margin-bottom:10px;}
.twin-picks{display:flex;flex-wrap:wrap;gap:6px;}
.twin-pick{
display:inline-flex;
align-items:center;
gap:5px;
max-width:100%;
border-radius:999px;
padding:6px 8px;
font-size:11px;
font-weight:900;
line-height:1;
border:1px solid transparent;
color:#06122d;
}
.twin-pick em{font-style:normal;font-size:11px;line-height:1;}
.twin-pick.is-match{background:#dcfce7;border-color:#86efac;color:#14532d;}
.twin-pick.is-diff{background:#fef3c7;border-color:#fde68a;color:#78350f;}
.twin-picks--empty{font-size:12px;color:#506078;font-weight:800;}
.twin-note{display:flex;align-items:center;gap:7px;margin:10px 0 0;color:#506078;font-size:11px;font-weight:800;}
.twin-dot{width:10px;height:10px;border-radius:50%;display:inline-block;}
.twin-dot--green{background:#22c55e;}
.twin-dot--yellow{background:#facc15;}
@media(max-width:640px){
.chart-card[data-mode="twins"] .chart-scroll{max-height:none!important;}
.twin-card{padding:13px;border-radius:16px;}
.twin-card__top strong{font-size:14px;}
.twin-card__names--detailed{grid-template-columns:1fr;}
.twin-card__names--detailed em{font-size:18px;line-height:1;text-align:center;}
.twin-person{padding:11px;}
.twin-person b{font-size:13px;white-space:normal;}
.twin-pick{font-size:10px;padding:6px 7px;}
}
/* V40 · Home móvil: sponsors igualados a las 4 KPI cards */
@media(max-width:640px){
.sponsors{
display:grid!important;
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:10px!important;
margin-top:14px!important;
}
.sponsor-card{
position:relative!important;
overflow:hidden!important;
min-height:104px!important;
padding:14px!important;
border-radius:18px!important;
border:1px solid rgba(255,255,255,.16)!important;
background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.06))!important;
box-shadow:0 14px 34px rgba(0,0,0,.16)!important;
display:flex!important;
flex-direction:column!important;
align-items:flex-start!important;
justify-content:space-between!important;
gap:10px!important;
}
.sponsor-card::after{
content:"";
position:absolute;
right:-32px;
top:-32px;
width:98px;
height:98px;
border-radius:50%;
background:rgba(68,98,237,.25);
pointer-events:none;
}
.sponsor-card span{
position:relative!important;
z-index:1!important;
color:#aeb8d4!important;
font-size:10px!important;
font-weight:800!important;
text-transform:uppercase!important;
letter-spacing:.06em!important;
line-height:1.15!important;
margin:0!important;
}
.sponsor-card img{
position:relative!important;
z-index:1!important;
width:100%!important;
max-width:130px!important;
max-height:42px!important;
object-fit:contain!important;
object-position:left center!important;
margin:0!important;
}
.sponsor-card a{
position:relative!important;
z-index:1!important;
display:flex!important;
align-items:center!important;
width:100%!important;
min-height:44px!important;
}
.sponsor-main img{
background:transparent!important;
border-radius:0!important;
padding:0!important;
}
}