@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/*======================================
  VARIABLES
======================================*/
:root {
    --fondo: #06111e;
    --panel: #0d2032;
    --panel2: #112b42;
    --borde: rgba(151, 190, 216, .2);
    --acento: #37df87;
    --oro: #f9c74f;
    --texto: #ecf7ff;
    --suave: #91a9bb;
}

/*======================================
  RESET Y BASE
======================================*/
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;
    color: var(--texto);
    font-family: Inter, Arial, sans-serif;
    background: 
        linear-gradient(rgba(4, 10, 20, .72), rgba(4, 10, 20, .82)),
        url("../assets/backgrounds/background1.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

body:before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at top, rgba(80, 160, 255, .15), transparent 55%);
}

/* Experiencia social Prime: paneles de cristal, ceremonias y navegación. */
.contenidoSocial { width: min(1220px, 100%); animation: entradaPrime .42s ease both; }
.contenidoSocial, .ceremoniaFinal, .formConfiguracion { background: linear-gradient(135deg, rgba(13,32,50,.92), rgba(8,21,35,.78)); border: 1px solid var(--borde); border-radius: 24px; box-shadow: 0 24px 70px rgba(0,0,0,.32); }
.cabeceraPanel { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; color:var(--suave); text-transform:uppercase; font-weight:700; letter-spacing:.12em; }
.volverPanel { background: transparent; color: var(--texto); border: 1px solid var(--borde); padding: 9px 14px; }
.rankingHero { padding: clamp(28px,6vw,70px); text-align:center; background: radial-gradient(circle at top, rgba(55,223,135,.14), transparent 60%); }
.rankingHero p { margin: 12px auto 0; }
.rankingColumnas, .managerCard { display:grid; grid-template-columns: 88px minmax(250px,1.4fr) minmax(150px,.7fr) minmax(230px,1fr); align-items:center; gap:15px; }
.rankingColumnas { padding: 12px 24px; color:var(--suave); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; }
.rankingLista { padding: 0 14px 18px; }
.managerCard { width:100%; min-height:82px; margin:7px 0; padding:12px 16px; text-align:left; color:var(--texto); background:rgba(5,17,30,.62); border:1px solid var(--borde); }
.managerCard:hover { border-color: var(--acento); box-shadow:0 0 28px rgba(55,223,135,.13); }
.managerCard img { width:52px; height:52px; object-fit:contain; grid-column:2; grid-row:1; }
.rango { font:800 1.5rem "Barlow Condensed"; color:var(--oro); grid-column:1; }
.managerNombre { display:grid; grid-column:2; padding-left:64px; margin-top:-45px; }.managerNombre small,.managerRecord { color:var(--suave); }.primePuntos { grid-column:3; color:var(--acento); font-weight:800; }.primePuntos small { display:block; font-size:.65rem; }.managerRecord { grid-column:4; font-size:.82rem; }
.heroPerfil { display:grid; grid-template-columns:120px 1fr auto; align-items:center; gap:25px; padding:28px; }.heroPerfil>img {width:110px;height:110px;object-fit:contain;}.heroPerfil p {text-align:left;margin:8px 0 0;}.scoreHero {text-align:right;}.scoreHero span,.scoreHero small{display:block;color:var(--suave);font-size:.72rem;}.scoreHero b{display:block;font:800 clamp(2rem,5vw,4rem) "Barlow Condensed";color:var(--oro);}
.metricasPerfil { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; padding:14px; }.metricasPerfil>div { text-align:center; padding:18px 9px; background:rgba(5,17,30,.52); border:1px solid var(--borde); border-radius:14px; }.metricasPerfil b,.metricasPerfil span { display:block; }.metricasPerfil b { font:800 1.7rem "Barlow Condensed"; color:var(--acento); }.metricasPerfil span { color:var(--suave); font-size:.7rem; }
.perfilGrid,.podiosPremios { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; padding:14px; }.panelPerfil,.podiosPremios article,.onceIdeal,.noticiasFeed article { border:1px solid var(--borde); background:rgba(4,15,27,.48); border-radius:16px; padding:20px; }.panelPerfil h2,.podiosPremios h3,.onceIdeal h3 {font-size:1.45rem;margin-bottom:14px;}.trofeosPerfil,.estadisticasExtendidas {display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}.premio,.trofeoPrincipal {padding:12px;border-radius:10px;background:rgba(255,255,255,.04);text-align:center;}.premio b,.premio span,.trofeoPrincipal b,.trofeoPrincipal span{display:block;}.premio b,.trofeoPrincipal b{color:var(--oro);font-size:1.4rem;}.estadisticasExtendidas span{display:flex;justify-content:space-between;padding:9px;border-bottom:1px solid var(--borde);color:var(--suave);}.estadisticasExtendidas b{color:var(--texto);}.historialTemporadas,.ultimosPartidos{display:grid;gap:8px;}.temporadaCard,.resultadoPerfil{display:flex;justify-content:space-between;gap:8px;padding:11px;border-radius:9px;background:rgba(255,255,255,.04);}.temporadaCard.campeon{border-left:3px solid var(--oro);}.plantillaPerfil{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;}.plantillaPerfil div{padding:8px;background:rgba(255,255,255,.04);}.plantillaPerfil span,.plantillaPerfil em{font-size:.72rem;color:var(--suave);margin-left:6px;}
.ceremoniaFinal { margin:25px auto; padding:20px; max-width:1120px; }.premioGrande {text-align:center;padding:26px;background:radial-gradient(circle,rgba(249,199,79,.18),transparent 70%);}.premioGrande span,.premioGrande b,.premioGrande small{display:block;}.premioGrande b{font:800 2.6rem "Barlow Condensed";color:var(--oro);}.podiosPremios{padding:14px 0;grid-template-columns:repeat(3,1fr);}.podiosPremios ol{list-style:none;display:grid;gap:9px;}.podiosPremios li b,.podiosPremios li span{display:block;}.podiosPremios li span{font-size:.75rem;color:var(--suave);}.onceIdeal>div{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}.onceIdeal span{padding:9px;background:rgba(55,223,135,.08);border-radius:8px;}.onceIdeal b,.onceIdeal small{display:block;}.onceIdeal small{color:var(--suave);font-size:.7rem;}.accionesFinales{display:flex;justify-content:center;gap:12px;margin:20px 0;}.accionesFinales button:last-child{background:var(--oro);}
.noticiasFeed {padding:15px;display:grid;gap:12px;}.noticiasFeed article span{font-size:.7rem;color:var(--acento);}.noticiasFeed article h2{font-size:1.65rem;margin-top:8px;}.noticiasFeed article p{text-align:left;margin:7px 0 0;}.formConfiguracion{padding:24px;display:grid;gap:14px;max-width:660px;margin:20px auto;}.formConfiguracion label{display:grid;gap:7px;color:var(--suave);}.formConfiguracion input{padding:13px;border-radius:10px;border:1px solid var(--borde);background:#071521;color:var(--texto);}.donarBtn{margin-top:20px;background:linear-gradient(135deg,#ff5f8f,#f9c74f);}
@keyframes entradaPrime { from { opacity:0; transform:translateY(12px) scale(.99); } to { opacity:1; transform:none; } }
@media (max-width: 760px) { .rankingColumnas{display:none}.managerCard{grid-template-columns:52px 1fr auto}.managerCard img{grid-column:1;grid-row:1}.rango{display:none}.managerNombre{grid-column:2;padding-left:0;margin:0}.primePuntos{grid-column:3}.managerRecord{display:none}.heroPerfil{grid-template-columns:75px 1fr}.heroPerfil>img{width:70px;height:70px}.scoreHero{grid-column:1/-1;text-align:left}.metricasPerfil{grid-template-columns:repeat(3,1fr)}.perfilGrid,.podiosPremios{grid-template-columns:1fr}.onceIdeal>div{grid-template-columns:repeat(2,1fr)}.trofeosPerfil{grid-template-columns:repeat(2,1fr)} }

/*======================================
  UTILIDADES
======================================*/
.pantalla {
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 42px clamp(18px, 4vw, 64px);
}

.oculto {
    display: none !important;
}

/*======================================
  TIPOGRAFÍA
======================================*/
h1, h2, h3, .eyebrow {
    font-family: "Barlow Condensed", Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: .05em;
}

h1 {
    font-size: clamp(3rem, 7vw, 6rem);
    line-height: .9;
}

h2 {
    font-size: clamp(2.1rem, 4vw, 3.2rem);
}

p {
    color: var(--suave);
    margin: 14px 0 22px;
    text-align: center;
    max-width: 620px;
}

/*======================================
  BOTONES
======================================*/
button {
    border: 0;
    border-radius: 10px;
    padding: 13px 19px;
    font: 700 .9rem Inter, sans-serif;
    letter-spacing: .04em;
    color: #02160c;
    background: var(--acento);
    cursor: pointer;
    transition: .18s ease;
}

button:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
}

button:disabled {
    opacity: .3;
    cursor: not-allowed;
    transform: none;
}

/*======================================
  MENU
======================================*/
#menu {
    justify-content: center;
    gap: 7px;
}

#menu p {
    font-size: 1.05rem;
}

/* Menú principal: acciones reales, jerarquía visual y lectura rápida. */
.menuAcciones { width:min(1120px,100%); display:grid; grid-template-columns:repeat(4,minmax(170px,1fr)); gap:13px; margin-top:24px; }
.menuAcciones button { min-height:142px; display:grid; grid-template-columns:42px 1fr; grid-template-rows:1fr auto; align-items:center; column-gap:10px; padding:18px; text-align:left; color:var(--texto); background:linear-gradient(145deg,rgba(20,53,76,.95),rgba(7,23,38,.95)); border:1px solid rgba(151,190,216,.22); border-radius:16px; box-shadow:inset 0 1px rgba(255,255,255,.06),0 12px 28px rgba(0,0,0,.18); position:relative; overflow:hidden; }
.menuAcciones button::after { content:""; position:absolute; inset:auto -25% -70% 30%; height:110px; background:radial-gradient(ellipse,rgba(55,223,135,.18),transparent 65%); pointer-events:none; transition:.25s ease; }
.menuAcciones button:hover { border-color:var(--acento); transform:translateY(-5px); box-shadow:0 16px 36px rgba(0,0,0,.32),0 0 20px rgba(55,223,135,.12); }
.menuAcciones button:hover::after { transform:scale(1.5); }
.menuAcciones button > span { grid-row:1 / 3; font-size:1.8rem; filter:drop-shadow(0 0 8px rgba(255,255,255,.25)); }
.menuAcciones button > small { grid-column:2; color:var(--suave); font-weight:500; letter-spacing:0; line-height:1.25; }
.menuAcciones #btnNueva { background:linear-gradient(135deg,#13925b,#0b3e3c); border-color:rgba(55,223,135,.55); }
.menuAcciones .accionPeligrosa { background:linear-gradient(135deg,#502333,#24131d); border-color:rgba(255,108,128,.35); }
.menuAcciones .accionPeligrosa:hover { border-color:#ff6c80; box-shadow:0 16px 36px rgba(0,0,0,.32),0 0 20px rgba(255,108,128,.15); }

/* Movimiento de posiciones tras cada jornada de la fase liga. */
.movimientoTabla { display:inline-block; margin-left:6px; font:700 .66rem Inter,sans-serif; vertical-align:middle; }
.movimientoTabla.sube { color:#37df87; }.movimientoTabla.baja { color:#ff7890; }
tr.filaSube { animation: ascensoTabla .85s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--orden) * 18ms); }
tr.filaBaja { animation: descensoTabla .85s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--orden) * 18ms); }
@keyframes ascensoTabla { 0% { opacity:0; transform:translateY(28px); background:rgba(55,223,135,.34); } 55% { background:rgba(55,223,135,.18); } 100% { opacity:1; transform:none; } }
@keyframes descensoTabla { 0% { opacity:0; transform:translateY(-28px); background:rgba(255,120,144,.28); } 55% { background:rgba(255,120,144,.14); } 100% { opacity:1; transform:none; } }

@media (max-width:900px) { .menuAcciones { grid-template-columns:repeat(3,minmax(160px,1fr)); } }
@media (max-width:580px) { .menuAcciones { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }.menuAcciones button { min-height:122px; grid-template-columns:1fr; grid-template-rows:auto 1fr auto; padding:14px; }.menuAcciones button > span { grid-row:auto; }.menuAcciones button > small { grid-column:auto; font-size:.68rem; } }

/*======================================
  FORMACIONES
======================================*/
.gridFormaciones {
    display: grid;
    grid-template-columns: repeat(3, minmax(160px, 220px));
    gap: 14px;
    margin-top: 20px;
}

.formacion {
    min-height: 105px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    color: var(--texto);
    background: linear-gradient(135deg, #12344a, #0c1e2f);
    border: 1px solid var(--borde);
}

.formacion span {
    font: 800 2rem "Barlow Condensed";
}

.formacion small,
.variante small {
    color: var(--suave);
    margin-top: 5px;
    font-weight: 500;
    letter-spacing: 0;
}

/*======================================
  MODAL
======================================*/
.modal {
    position: fixed;
    z-index: 5;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(0, 5, 12, .76);
    backdrop-filter: blur(7px);
}

.modalContenido {
    position: relative;
    width: min(610px, 100%);
    background: #10273a;
    border: 1px solid var(--borde);
    border-radius: 18px;
    padding: 30px;
    box-shadow: 0 30px 80px #000;
}

.modalContenido h3 {
    font-size: 1.8rem;
    margin-bottom: 18px;
}

.cerrar {
    position: absolute;
    top: 10px;
    right: 10px;
    color: var(--texto);
    background: transparent;
    font-size: 2rem;
    padding: 4px 12px;
}

.opcionesVariantes {
    display: grid;
    gap: 10px;
}

.variante {
    color: var(--texto);
    background: #0a1928;
    border: 1px solid var(--borde);
    text-align: left;
    display: flex;
    flex-direction: column;
}

.variante b {
    font-size: 1.05rem;
}

/*======================================
  DRAFT LAYOUT
======================================*/
.draftTitulo {
    width: min(1440px, 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.draftTitulo h2 {
    margin-top: 2px;
}

.draftTitulo h3 {
    color: var(--oro);
    font-size: 1.5rem;
    text-align: right;
}

.eyebrow {
    color: var(--acento);
    font-size: .72rem;
}

.draftLayout {
    width: min(1440px, 100%);
    display: grid;
    grid-template-columns: minmax(320px, .92fr) minmax(540px, 1.5fr);
    gap: 20px;
    align-items: start;
}

.panelJugadores,
.panelCancha {
    background: rgba(9, 27, 43, .9);
    border: 1px solid var(--borde);
    border-radius: 18px;
    padding: 16px;
    box-shadow: 0 16px 45px rgba(0, 0, 0, .2);
}

.panelJugadores {
    max-height: calc(100vh - 140px);
    overflow: auto;
}

.panelCancha {
    position: sticky;
    top: 18px;
}

.panelTitulo {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 2px 4px 14px;
}

.panelTitulo > span {
    font: 700 1.35rem "Barlow Condensed";
    text-transform: uppercase;
    letter-spacing: .06em;
}

.panelTitulo small {
    color: var(--suave);
}

/*======================================
  CARTAS DE JUGADORES
======================================*/
#jugadores {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.carta {
    border-radius: 13px;
    padding: 14px;
    background: linear-gradient(145deg, #16354d, #0c2031);
    border: 1px solid var(--borde);
    cursor: pointer;
    transition: .18s;
}

.carta:hover {
    transform: translateY(-3px);
    border-color: var(--acento);
}

.jugador-card {
    min-height: 128px;
    position: relative;
    overflow: hidden;
}

.jugador-card:after {
    content: "";
    position: absolute;
    width: 80px;
    height: 80px;
    border: 12px solid rgba(55, 223, 135, .12);
    border-radius: 50%;
    right: -30px;
    top: -30px;
}

.jugador-card h3 {
    font: 700 1.1rem Inter;
    text-transform: none;
    letter-spacing: 0;
    padding-right: 12px;
}

.jugador-card p {
    text-align: left;
    color: #b5cbda;
    margin: 10px 0 0;
    font-size: .74rem;
}

.jugador-card h2 {
    color: var(--oro);
    font-size: 1.55rem;
    margin-top: 7px;
}

.team-card {
    grid-column: span 2;
}

.nombreEquipo {
    font-size: 1.05rem;
    font-weight: 700;
}

.mediaEquipo {
    color: var(--oro);
    font-size: 1.45rem;
    margin: 7px 0;
}

.formacionEquipo {
    color: var(--suave);
    font-size: .8rem;
}

.team-card button {
    margin-top: 10px;
    padding: 8px 12px;
    font-size: .72rem;
}

/*======================================
  CANCHA
======================================*/
#campo {
    width: 100%;
    min-height: 650px;
    padding: 26px 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: 
        linear-gradient(90deg, rgba(255, 255, 255, .1) 2px, transparent 2px) 50%/50% 100%,
        linear-gradient(#1c8b55, #11643d);
    border: 3px solid #d4f6df;
    border-radius: 14px;
    box-shadow: 
        inset 0 0 0 3px rgba(255, 255, 255, .12),
        inset 0 0 80px #073a24;
}

.fila {
    display: flex;
    justify-content: center;
    gap: clamp(8px, 2vw, 24px);
}

.posicion {
    width: clamp(82px, 9vw, 118px);
    min-height: 92px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(145deg, #152b3b, #0a1723);
    border: 2px solid rgba(255, 255, 255, .35);
    border-radius: 12px;
    cursor: pointer;
    transition: .18s;
}

.posicion:hover {
    transform: scale(1.04);
}

.pos {
    color: #d8f9e5;
    font: 800 1.2rem "Barlow Condensed";
}

.activa {
    border-color: var(--oro);
    box-shadow: 
        0 0 0 3px rgba(249, 199, 79, .32),
        0 0 20px rgba(249, 199, 79, .8);
}

.jugadorNombre {
    font-weight: 700;
    font-size: .76rem;
}

.jugadorMedia {
    color: var(--oro);
    font: 800 1.15rem "Barlow Condensed";
    margin: 5px 0;
}

.jugadorPos {
    color: #a9c1d0;
    font-size: .68rem;
}

/*======================================
  CHAMPIONS
======================================*/
#champions {
    align-items: center;
}

#listaEquipos {
    width: min(1200px, 100%);
}

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid var(--borde);
    border-radius: 12px;
    margin: 18px 0;
    background: var(--panel);
}

th, td {
    padding: 10px 8px;
    text-align: center;
    border-bottom: 1px solid var(--borde);
}

th {
    background: #173b58;
    color: #d8efff;
    font-size: .75rem;
}

tr:last-child td {
    border: 0;
}

.resultados {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 8px;
    margin: 12px 0;
}

.resultados div {
    padding: 10px;
    border-radius: 8px;
    background: var(--panel2);
}

.cruces {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin: 18px 0;
}

/*======================================
  CLASES DE MEDIA/RATING
======================================*/
.media-legend {
    background: linear-gradient(135deg, #7b2cff, #d86bff);
    border-color: #c57cff !important;
}

.media-oro {
    background: linear-gradient(135deg, #c08a00, #ffd54a);
    border-color: #ffd54a !important;
}

.media-elite {
    background: linear-gradient(135deg, #1462d6, #49b8ff);
    border-color: #5ec7ff !important;
}

.media-plata {
    background: linear-gradient(135deg, #5a6672, #aab7c4);
    border-color: #d4dde6 !important;
}

.media-normal {
    background: linear-gradient(145deg, #16354d, #0c2031);
}

/*======================================
  PRIME CHAMPIONS PLAYER CARD
======================================*/
.playerCard {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    padding: 18px;
    min-height: 190px;
    cursor: pointer;
    transition: .28s;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: white;
    border: 2px solid rgba(255, 255, 255, .15);
    box-shadow: 0 14px 35px rgba(0, 0, 0, .45);
}

.playerCard:hover {
    transform: translateY(-8px) scale(1.04);
    box-shadow: 0 20px 45px rgba(0, 0, 0, .55);
}

.playerCard::before {
    content: "";
    position: absolute;
    inset: -40%;
    background: linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, .18) 50%, transparent 65%);
    transform: rotate(25deg) translateX(-120%);
    transition: .8s;
}

.playerCard:hover::before {
    transform: rotate(25deg) translateX(120%);
}

.playerCard::after {
    content: "★";
    position: absolute;
    right: -15px;
    bottom: -30px;
    font-size: 130px;
    opacity: .07;
    font-weight: 900;
}

.playerTop {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.playerMedia {
    font-size: 46px;
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 0 10px rgba(255, 255, 255, .25);
}

.playerPos {
    padding: 5px 10px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .12);
    font-size: 13px;
    font-weight: bold;
    backdrop-filter: blur(6px);
}

.playerName {
    margin-top: auto;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.playerPositions {
    margin-top: 8px;
    font-size: 13px;
    opacity: .9;
    letter-spacing: .5px;
}

/* COLORES DE CARTAS */
.card-legend {
    background: radial-gradient(circle at top, #ff9cff 0, #8d37ff 45%, #40107f 100%);
    border-color: #d88bff;
}

.card-gold {
    background: radial-gradient(circle at top, #ffe991 0, #d4a012 45%, #8a5c00 100%);
    border-color: #ffe082;
}

.card-blue {
    background: radial-gradient(circle at top, #78d5ff 0, #2485ff 45%, #103f91 100%);
    border-color: #8bdfff;
}

.card-silver {
    background: radial-gradient(circle at top, #eef4f8 0, #adb8c2 45%, #65727d 100%);
    color: #102030;
    border-color: white;
}

.card-normal {
    background: radial-gradient(circle at top, #2b4b66 0, #173047 45%, #0c1b2b 100%);
}

/*======================================
  MODAL RESULTADOS CHAMPIONS - NUEVO
======================================*/
.modalResultados {
    position: fixed;
    inset: 0;
    background: rgba(0, 5, 12, .88);
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    animation: fadeIn .25s ease;
    padding: 20px;
}

.panelResultados {
    width: min(700px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
    background: linear-gradient(145deg, #0d2032, #0a1927);
    border: 1px solid var(--borde);
    border-radius: 20px;
    padding: 35px 30px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
    text-align: center;
    position: relative;
}

.panelResultados::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 2px;
    background: linear-gradient(135deg, var(--acento), transparent, var(--oro));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: .4;
}

.panelResultados::-webkit-scrollbar {
    width: 8px;
}

.panelResultados::-webkit-scrollbar-track {
    background: rgba(17, 43, 66, .3);
    border-radius: 4px;
}

.panelResultados::-webkit-scrollbar-thumb {
    background: var(--acento);
    border-radius: 4px;
}

.logoResultados {
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin-bottom: 15px;
    filter: drop-shadow(0 0 20px rgba(55, 223, 135, .4));
}

#tituloResultados {
    font-size: 2.2rem;
    margin-bottom: 8px;
    color: var(--texto);
}

.panelResultados h3 {
    color: var(--suave);
    font-size: .9rem;
    letter-spacing: .15em;
    margin-bottom: 25px;
}

#listaResultados {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 25px 0;
}

.partidoGrande {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
    padding: 18px 22px;
    background: rgba(17, 43, 66, .6);
    border: 1px solid var(--borde);
    border-radius: 14px;
    transition: .2s;
    animation: aparecerResultado .5s ease backwards;
}

.partidoGrande:nth-child(1) { animation-delay: .05s; }
.partidoGrande:nth-child(2) { animation-delay: .1s; }
.partidoGrande:nth-child(3) { animation-delay: .15s; }
.partidoGrande:nth-child(4) { animation-delay: .2s; }
.partidoGrande:nth-child(5) { animation-delay: .25s; }
.partidoGrande:nth-child(6) { animation-delay: .3s; }

.partidoGrande:hover {
    transform: translateY(-3px);
    border-color: var(--acento);
    background: rgba(17, 43, 66, .8);
    box-shadow: 0 8px 25px rgba(55, 223, 135, .15);
}

.partidoGrande.mi-partido {
    background: linear-gradient(135deg, rgba(55, 223, 135, .15), rgba(17, 43, 66, .8));
    border: 2px solid var(--acento);
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(55, 223, 135, .3);
}

.partidoGrande.mi-partido .marcadorGrande {
    font-size: 2.8rem;
}

.partidoGrande.mi-partido .marcadorGrande span {
    color: var(--acento);
    text-shadow: 0 0 20px rgba(55, 223, 135, .6);
}

.partidoGrande.mi-partido .equipoGrande span {
    font-weight: 700;
    color: var(--texto);
}

.equipoGrande {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    font-size: .95rem;
}

.equipoGrande:first-child {
    justify-content: flex-start;
}

.equipoGrande:last-child {
    justify-content: flex-end;
    flex-direction: row-reverse;
}

.equipoGrande img {
    width: 45px;
    height: 45px;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .4));
}

.equipoGrande span {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marcadorGrande {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 2.2rem;
    font-weight: 800;
    font-family: "Barlow Condensed", sans-serif;
}

.marcadorGrande span {
    color: var(--oro);
    text-shadow: 0 0 15px rgba(249, 199, 79, .4);
    min-width: 30px;
    text-align: center;
}

.marcadorGrande b {
    color: var(--suave);
    font-size: 1.5rem;
    font-weight: 400;
}

.navegacionResultados {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin: 25px 0 15px;
}

.navegacionResultados button {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    padding: 0;
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    background: rgba(17, 43, 66, .8);
    border: 1px solid var(--borde);
    color: var(--texto);
}

.navegacionResultados button:hover:not(:disabled) {
    background: var(--acento);
    color: #02160c;
    border-color: var(--acento);
}

#contadorPagina {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--suave);
    letter-spacing: .05em;
    min-width: 60px;
}

.puntosPagina {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 25px;
}

.punto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(145, 169, 187, .3);
    transition: .3s;
    cursor: pointer;
}

.punto.activo {
    width: 24px;
    border-radius: 4px;
    background: var(--acento);
    box-shadow: 0 0 12px rgba(55, 223, 135, .5);
}

.accionesResultados {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.accionesResultados button {
    flex: 1;
    max-width: 200px;
}

#btnVerTabla {
    background: rgba(17, 43, 66, .8);
    border: 1px solid var(--borde);
    color: var(--texto);
}

#btnVerTabla:hover {
    background: var(--panel2);
    border-color: var(--acento);
}

#btnCerrarResultados {
    background: var(--acento);
}

/*======================================
  TABLA CHAMPIONS MEJORADA
======================================*/
.leyendaTabla {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin: 20px 0;
    flex-wrap: wrap;
}

.leyendaTabla div {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .85rem;
    color: var(--suave);
}

.verde, .amarillo, .rojo {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    display: inline-block;
}

.verde { background: #2ecc71; }
.amarillo { background: #f1c40f; }
.rojo { background: #e74c3c; }

.clasificaDirecto {
    border-left: 4px solid #2ecc71;
    background: rgba(46, 204, 113, .05);
}

.playoff {
    border-left: 4px solid #f1c40f;
    background: rgba(241, 196, 15, .04);
}

.eliminado {
    border-left: 4px solid #e74c3c;
    background: rgba(231, 76, 60, .03);
}

.mi-partido {
    background: linear-gradient(135deg, rgba(55, 223, 135, .15), rgba(17, 43, 66, .5)) !important;
    border: 2px solid var(--acento) !important;
    font-weight: 700;
}

.logoMiniTabla {
    width: 24px;
    height: 24px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 8px;
}

.partidoCard {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 15px;
    padding: 16px;
    background: rgba(17, 43, 66, .5);
    border: 1px solid var(--borde);
    border-radius: 12px;
    transition: .2s;
}

.partidoCard:hover {
    transform: translateY(-2px);
    border-color: var(--acento);
}

.equipoPartido {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .9rem;
    font-weight: 600;
}

.equipoPartido:last-child {
    justify-content: flex-end;
    flex-direction: row-reverse;
}

.logoMini {
    width: 35px;
    height: 35px;
    object-fit: contain;
}

.resultadoPartido {
    font-size: 1.6rem;
    font-weight: 800;
    font-family: "Barlow Condensed", sans-serif;
    color: var(--oro);
    display: flex;
    gap: 8px;
    align-items: center;
}

.resultadoPartido span {
    color: var(--suave);
    font-size: 1.2rem;
    font-weight: 400;
}

.cruces .carta {
    text-align: center;
    padding: 20px;
}

/*======================================
  PANTALLA EQUIPOS
======================================*/
#contenidoEquipos {
    width: min(1450px, 100%);
    margin: auto;
}

.gridEquipos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.equipoLista {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 22px;
    transition: .22s;
    border-radius: 18px;
    background: linear-gradient(160deg, #14314b, #0a1927);
}

.equipoLista:hover {
    transform: translateY(-8px);
    border-color: var(--acento);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .35);
}

.logoEquipo {
    width: 90px;
    height: 90px;
    object-fit: contain;
    margin-bottom: 16px;
}

.logoEquipoGrande {
    width: 110px;
    height: 110px;
    object-fit: contain;
    margin-bottom: 15px;
}

.equipoLista h3 {
    margin: 8px 0;
    font-size: 1.35rem;
}

.equipoLista small {
    color: #9db4c5;
    margin-bottom: 12px;
}

.mediaCarta {
    color: var(--oro);
    font-size: 1.5rem;
    font-family: "Barlow Condensed";
    margin-bottom: 14px;
}

.jugadorFila {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    margin-bottom: 8px;
}

.canchaVista {
    margin-top: 25px;
    width: 100%;
    min-height: 700px;
    padding: 30px;
    border-radius: 18px;
    background:
        linear-gradient(rgba(255, 255, 255, .08) 2px, transparent 2px),
        linear-gradient(90deg, rgba(255, 255, 255, .08) 2px, transparent 2px),
        linear-gradient(#1f8f58, #12653d);
    background-size: 100% 20%, 20% 100%, 100% 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.filaEquipo {
    display: flex;
    justify-content: center;
    gap: 22px;
}

.jugadorCancha {
    width: 115px;
    min-height: 90px;
    border-radius: 14px;
    background: rgba(10, 25, 39, .92);
    border: 2px solid rgba(255, 255, 255, .15);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: .2s;
}

.jugadorCancha:hover {
    transform: translateY(-5px);
    border-color: #37df87;
}

.jugadorCancha b {
    color: white;
    font-size: 15px;
}

.jugadorCancha small {
    color: #9dc0d7;
}

.jugadorCancha span {
    color: gold;
    font-size: 20px;
    font-family: "Barlow Condensed";
}

.titulo

/*======================================
  LOADING STATE
======================================*/
.loadingResultados {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 350px;
    gap: 20px;
}

.spinner {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(55, 223, 135, .2);
    border-top-color: var(--acento);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/*======================================
  ANIMACIONES UI (PRIME)
======================================*/
@keyframes primeFadeUp {
    from { opacity: 0; transform: translateY(14px) scale(.99); filter: blur(2px); }
    to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes primePop {
    0% { transform: scale(.98); }
    60% { transform: scale(1.04); }
    100% { transform: scale(1); }
}

@keyframes primeGlowPulse {
    0%, 100% { box-shadow: 0 0 0 rgba(55,223,135,0); }
    50% { box-shadow: 0 0 28px rgba(55,223,135,.22); }
}

@keyframes primeShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-3px); }
    40% { transform: translateX(3px); }
    60% { transform: translateX(-2px); }
}

/* Pantallas: animar al mostrarlas */
.pantalla {
    will-change: opacity, transform;
}

.pantalla.entrada {
    animation: primeFadeUp .38s cubic-bezier(.2,.8,.2,1) both;
}

/* Botones: feedback al click */
button:active {
    transform: translateY(0) scale(.98);
}

.btnPulse {
    animation: primePop .18s ease both;
}

/* Estados de formulario */
.estadoFormulario.error {
    animation: primeShake .3s ease both;
}

.estadoFormulario.exito {
    animation: primeGlowPulse 1s ease both;
}

/* Modal: entrada/salida sutil */
.modal {
    animation: fadeIn .25s ease;
}

@media (prefers-reduced-motion: reduce) {
    .contenidoSocial { animation: none !important; }
    .pantalla.entrada { animation: none !important; }
    tr.filaSube, tr.filaBaja { animation: none !important; }
    button:hover { transform: none !important; }
    .estadoFormulario.error, .estadoFormulario.exito { animation: none !important; }
}


.loadingTexto {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--texto);
    letter-spacing: .05em;
}

.dots::after {
    content: '';
    animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
    0%, 20% { content: ''; }
    40% { content: '.'; }
    60% { content: '..'; }
    80%, 100% { content: '...'; }
}

/* Ocultar contenido mientras carga */
.modalResultados.loading #listaResultados,
.modalResultados.loading .navegacionResultados,
.modalResultados.loading #puntosPagina {
    display: none;
}

#btnSiguienteJornada {
    background: var(--acento);
    font-weight: 700;
}

#btnSiguienteJornada:hover {
    transform: translateY(-2px) scale(1.02);
}

.posicion.activa {
    animation: pulse 1s infinite;
    border-color: var(--acento) !important;
    box-shadow: 0 0 20px rgba(55, 223, 135, .6);
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.clubBox{

    width:650px;
    margin:auto;
    background:#111827;
    border-radius:20px;
    padding:40px;
    text-align:center;

}

.clubBox input{

    width:100%;
    padding:15px;
    margin:20px 0;
    border:none;
    border-radius:12px;
    font-size:18px;

}

.selectorEscudos{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin:30px 0;

}

.escudoOpcion{

    width:90px;
    cursor:pointer;
    transition:.2s;

}

.escudoOpcion:hover{

    transform:scale(1.1);

}

.seleccionado{

    outline:4px solid gold;
    border-radius:50%;

}

/*======================================
  ACCESO Y PERFIL DEL CLUB
======================================*/
.authBox,
.clubBox {
    width: min(460px, 100%);
    margin: auto;
    padding: clamp(28px, 5vw, 44px);
    text-align: center;
    background: linear-gradient(145deg, rgba(16, 39, 58, .97), rgba(7, 20, 32, .97));
    border: 1px solid var(--borde);
    border-radius: 22px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .45);
}

.authBox h1,
.clubBox h1 {
    color: var(--oro);
    font-size: clamp(2.5rem, 9vw, 4.3rem);
    margin-bottom: 22px;
}

.authBox h2,
.clubBox h2 {
    font-size: 2rem;
}

.authBox input,
.clubBox input {
    width: 100%;
    margin-top: 12px;
    padding: 15px 16px;
    color: var(--texto);
    font: 500 1rem Inter, Arial, sans-serif;
    background: rgba(4, 16, 27, .9);
    border: 1px solid var(--borde);
    border-radius: 10px;
    outline: none;
}

.authBox input:focus,
.clubBox input:focus {
    border-color: var(--acento);
    box-shadow: 0 0 0 3px rgba(55, 223, 135, .16);
}

.authBox > button,
.clubBox > button {
    width: 100%;
    margin-top: 20px;
}

.authBox p:last-child {
    margin: 19px 0 0;
}

.authBox a {
    color: var(--oro);
    font-weight: 700;
    text-decoration: none;
}

.estadoFormulario {
    min-height: 22px;
    margin: 10px 0 0;
    color: var(--suave);
    font-size: .86rem;
}

.estadoFormulario.error {
    color: #ff9191;
}

.estadoFormulario.exito {
    color: var(--acento);
}

.estadoFormulario.cargando {
    color: var(--oro);
}

.subirEscudo {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 18px 0 4px;
}

.previewEscudo {
    width: 170px;
    height: 170px;
    margin-bottom: 15px;
    object-fit: cover;
    border: 4px solid var(--oro);
    border-radius: 50%;
    background: #0a1928;
}

.subirEscudo small {
    margin-top: 12px;
    color: var(--suave);
    line-height: 1.5;
}

.perfilClub {
    position: absolute;
    top: 24px;
    left: clamp(18px, 4vw, 64px);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 15px 10px 10px;
    background: rgba(8, 24, 38, .83);
    border: 1px solid var(--borde);
    border-radius: 14px;
    backdrop-filter: blur(8px);
}

.perfilClub img {
    width: 54px;
    height: 54px;
    object-fit: contain;
}

.perfilClub h2 {
    color: var(--texto);
    font-size: 1.3rem;
    line-height: 1;
}

.perfilClub p {
    max-width: none;
    margin: 5px 0 0;
    color: var(--suave);
    font-size: .76rem;
    text-align: left;
}

@media (max-width: 680px) {
    #menu {
        padding-top: 138px;
    }

    .perfilClub {
        right: 18px;
        left: 18px;
    }

    .perfilClub h2 {
        font-size: 1.15rem;
    }
}

/* ================= BOTÓN INVITADO ================= */
.btnInvitado {
    width: 100%;
    margin-top: 10px;
    padding: 13px 18px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05));
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #e2e8f0;
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btnInvitado:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: #38bdf8;
    color: #fff;
    transform: translateY(-1px);
}

/* ================= TABLA DE CHAMPIONS: COLORES Y ANIMACIONES ================= */
.leyendaTabla {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin: 12px 0 18px;
    padding: 10px 16px;
    background: rgba(4, 16, 27, 0.7);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.85rem;
    color: #cbd5e1;
}

.leyendaTabla .verde {
    background: #22c55e;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}

.leyendaTabla .amarillo {
    background: #eab308;
    box-shadow: 0 0 8px rgba(234, 179, 8, 0.5);
}

.leyendaTabla .rojo {
    background: #ef4444;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}

tr.clasificaDirecto {
    background: rgba(34, 197, 94, 0.08) !important;
    border-left: 4px solid #22c55e;
    transition: all 0.3s ease;
}

tr.clasificaDirecto:hover {
    background: rgba(34, 197, 94, 0.18) !important;
}

tr.playoff {
    background: rgba(234, 179, 8, 0.08) !important;
    border-left: 4px solid #eab308;
    transition: all 0.3s ease;
}

tr.playoff:hover {
    background: rgba(234, 179, 8, 0.18) !important;
}

tr.eliminado {
    background: rgba(239, 68, 68, 0.07) !important;
    border-left: 4px solid #ef4444;
    opacity: 0.82;
    transition: all 0.3s ease;
}

tr.eliminado:hover {
    opacity: 1;
    background: rgba(239, 68, 68, 0.15) !important;
}

tr.filaSube {
    animation: resaltarSube 1.2s ease forwards;
}

tr.filaBaja {
    animation: resaltarBaja 1.2s ease forwards;
}

@keyframes resaltarSube {
    0% { background: rgba(34, 197, 94, 0.4) !important; transform: scale(1.02); }
    100% { transform: scale(1); }
}

@keyframes resaltarBaja {
    0% { background: rgba(239, 68, 68, 0.4) !important; transform: scale(0.98); }
    100% { transform: scale(1); }
}

.movimientoTabla {
    display: inline-block;
    margin-left: 6px;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 4px;
}

.movimientoTabla.sube {
    color: #4ade80;
    background: rgba(34, 197, 94, 0.2);
}

.movimientoTabla.baja {
    color: #f87171;
    background: rgba(239, 68, 68, 0.2);
}

/* ================= TARJETAS DE RESULTADOS Y BOTÓN DE STATS ================= */
.partidoGrandeCard {
    background: linear-gradient(145deg, rgba(12, 33, 50, 0.95), rgba(6, 19, 31, 0.95));
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 16px;
    padding: 18px;
    margin-bottom: 16px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.partidoGrandeCard:hover {
    border-color: var(--oro);
    transform: translateY(-2px);
}

.resumenGoleadoresMini {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 12px 0;
    padding: 10px 14px;
    background: rgba(2, 10, 18, 0.6);
    border-radius: 8px;
    font-size: 0.82rem;
    color: #cbd5e1;
}

.colGolesL { text-align: left; }
.colGolesV { text-align: right; }

.colGolesL span, .colGolesV span {
    display: block;
    margin-bottom: 3px;
}

.btnVerStatsPartido {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #0284c7, #0369a1);
    color: #fff;
    font-size: 0.88rem;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}

.btnVerStatsPartido:hover {
    background: linear-gradient(135deg, #38bdf8, #0284c7);
    transform: scale(1.01);
}

.btnVerStatsPartidoMini {
    grid-column: 1 / -1;
    margin-top: 8px;
    padding: 6px 12px;
    background: rgba(3, 105, 161, 0.25);
    border: 1px solid rgba(56, 189, 248, 0.4);
    color: #38bdf8;
    font-size: 0.8rem;
    font-weight: 700;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btnVerStatsPartidoMini:hover {
    background: #0284c7;
    color: #fff;
}

/* ================= MODAL ESTADÍSTICAS DEL PARTIDO ================= */
#modalEstadisticasPartido {
    z-index: 10005 !important;
    background: rgba(0, 4, 10, 0.78) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

.modalStatsContenido {
    max-width: 680px !important;
    width: 92%;
    background: linear-gradient(160deg, #0a1f32 0%, #04101b 100%);
    border: 1px solid var(--oro);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
    color: #fff;
    max-height: 90vh;
    overflow-y: auto;
}

.statsPartidoHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.statsEquipo {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 32%;
    text-align: center;
}

.statsEquipo img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    margin-bottom: 8px;
}

.statsEquipo h3 {
    font-size: 1rem;
    color: var(--oro);
    margin: 0;
}

.statsMarcador {
    text-align: center;
}

.statsMarcador span {
    display: block;
    font-size: 2.2rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: 2px;
}

.statsMarcador small {
    color: var(--acento);
    font-weight: 700;
    font-size: 0.75rem;
}

.statsGoleadoresDetalle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 16px 0;
    padding: 12px;
    background: rgba(2, 10, 18, 0.8);
    border-radius: 10px;
    font-size: 0.85rem;
}

.golesColumna.local { text-align: left; }
.golesColumna.visitante { text-align: right; }

.tituloSeccionStats {
    text-align: center;
    font-size: 0.95rem;
    color: var(--oro);
    letter-spacing: 1px;
    margin: 20px 0 12px;
}

.statsGridComparacion {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.filaStatComparativa {
    background: rgba(255, 255, 255, 0.03);
    padding: 10px 14px;
    border-radius: 8px;
}

.statHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.88rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.valLocal { color: #38bdf8; }
.valVisitante { color: #f43f5e; }
.labelStat { color: #94a3b8; font-size: 0.8rem; font-weight: 600; }

.barraContenedor {
    display: flex;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.barraLocal { background: #38bdf8; transition: width 0.5s ease; }
.barraVisitante { background: #f43f5e; transition: width 0.5s ease; }

.mvpBox {
    margin-top: 20px;
    padding: 14px;
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.15), rgba(234, 179, 8, 0.05));
    border: 1px solid rgba(234, 179, 8, 0.4);
    border-radius: 12px;
    text-align: center;
}

.mvpBox span {
    font-size: 0.75rem;
    font-weight: 800;
    color: #eab308;
    letter-spacing: 1px;
}

.mvpBox h4 {
    margin: 6px 0 4px;
    font-size: 1.1rem;
    color: #fff;
}

.notaMVP {
    font-size: 0.85rem;
    color: #cbd5e1;
}

/* ================= FORO Y COMUNIDAD ================= */
.formPublicarForo {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
    background: rgba(10, 31, 50, 0.8);
    padding: 16px;
    border-radius: 14px;
    border: 1px solid var(--borde);
}

.formPublicarForo textarea {
    width: 100%;
    min-height: 85px;
    padding: 12px;
    background: rgba(4, 16, 27, 0.9);
    border: 1px solid var(--borde);
    border-radius: 8px;
    color: #fff;
    font-family: inherit;
    font-size: 0.92rem;
    resize: vertical;
    outline: none;
}

.formPublicarForo textarea:focus {
    border-color: var(--acento);
}

.accionesFormForo {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btnPublicarForo {
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--acento), #16a34a);
    color: #04101b;
    font-weight: 800;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.btnPublicarForo:hover {
    transform: translateY(-1px);
}

.avisoInvitadoForo {
    padding: 16px;
    margin-bottom: 24px;
    background: rgba(56, 189, 248, 0.1);
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 12px;
    color: #38bdf8;
    font-size: 0.9rem;
    text-align: center;
    line-height: 1.5;
}

.listaForoMensajes {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tarjetaForoMensaje {
    background: linear-gradient(145deg, rgba(12, 35, 54, 0.9), rgba(6, 20, 32, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.foroCabeceraUsuario {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 12px;
}

.logoForo {
    width: 46px;
    height: 46px;
    object-fit: contain;
    border-radius: 50%;
    background: #0a1928;
    border: 2px solid var(--oro);
}

.infoUsuarioForo h3 {
    margin: 0;
    font-size: 1rem;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.clubMeta {
    color: var(--oro);
    font-weight: 600;
    font-size: 0.88rem;
}

.fechasForo {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 0.78rem;
    color: #94a3b8;
    margin-top: 4px;
}

.fechasForo b {
    color: #cbd5e1;
}

.cuerpoMensajeForo {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #f1f5f9;
    white-space: pre-wrap;
    word-break: break-word;
}