/* FIFA/ESPN Professional Theme */
body{
margin:0;
font-family:'Montserrat',Arial,sans-serif;
background:linear-gradient(135deg,#081221 0%,#0d1b2a 50%,#14213d 100%);
color:#fff;
display:flex;
min-height:100vh;
}
.sidebar{
width:240px;
background:rgba(0,0,0,.45);
backdrop-filter:blur(14px);
padding:20px;
height:100vh;
border-right:1px solid rgba(255,255,255,.08);
box-sizing:border-box;
}
.sidebar h2{
color:#fff;
font-weight:800;
letter-spacing:1px;
}
.sidebar button{
width:100%;
background:transparent;
color:#fff;
border:0;
padding:14px;
margin:6px 0;
border-radius:12px;
text-align:left;
transition:.25s;
}
.sidebar button:hover{
background:rgba(255,255,255,.08);
transform:translateX(4px);
}
.main{flex:1;padding:24px}
.main button{
background:linear-gradient(90deg,#009dff,#0066ff);
color:#fff;border:0;border-radius:10px;padding:10px 16px;
}
.card,.team,details.card{
background:rgba(255,255,255,.04);
backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,.08);
border-radius:18px;
box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.card:hover,.team:hover{transform:translateY(-2px)}
.cards{display:flex;gap:15px;flex-wrap:wrap}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.team img{width:90px;height:90px;object-fit:cover;border-radius:50%;border:3px solid rgba(255,255,255,.15)}
.match-row{
background:rgba(255,255,255,.05);
padding:12px;border-radius:12px;
}
.vs{color:#00d4ff;font-weight:800}
table{width:100%;border-collapse:collapse;border-radius:16px;overflow:hidden}
thead{background:#00a3ff}
thead th{padding:14px}
tbody tr{background:rgba(255,255,255,.03)}
tbody tr:hover{background:rgba(255,255,255,.08)}
.brackets-viewer .round h3{
background:linear-gradient(90deg,#002b5b,#0057b8)!important;
color:#fff!important;
border-radius:12px!important;
padding:12px!important;
font-size:18px!important;
font-weight:800!important;
}
.brackets-viewer .participant{
background:#fff!important;
border-radius:12px!important;
box-shadow:0 4px 10px rgba(0,0,0,.15);
}
.champion-banner,#campeonPlayoff{
background:linear-gradient(135deg,#0b1220,#1e3a8a);
border:2px solid #ffd700;
border-radius:20px;
box-shadow:0 0 30px rgba(255,215,0,.35)!important;
padding:20px;
}


body{margin:0;background:#111;color:#fff;font-family:Arial;display:flex}
.sidebar{width:220px;background:#000;padding:20px;height:100vh}
.sidebar h2{color:#d4af37}
.sidebar button,.main button{background:#d4af37;border:0;padding:10px;margin:5px 0;cursor:pointer}
.main{flex:1;padding:20px}
.hidden{display:none}
.cards{display:flex;gap:15px}
.card,.team{background:#1b1b1b;border:1px solid #d4af37;border-radius:10px;padding:15px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.team img{width:80px;height:80px;object-fit:cover;border-radius:50%}


details.card{margin-bottom:12px}
summary{cursor:pointer;font-weight:bold}
.match-row{display:flex;justify-content:space-between;align-items:center;background:#222;padding:10px;border-radius:8px;margin:6px 0}
.team-mini{display:flex;align-items:center;gap:8px;width:40%}
.team-mini img{width:32px;height:32px;border-radius:50%;object-fit:cover}
.vs{color:#d4af37;font-weight:bold}

.top1{background:#1f3a1f;}
.top2{background:#2b2b2b;}
.top3{background:#3a3220;}


/* ==== BRACKET VIEWER TEXT FIX ==== */
.brackets-viewer .participant .name{
    color:#111 !important;
    font-weight:700 !important;
    opacity:1 !important;
    visibility:visible !important;
}

.brackets-viewer .participant .result{
    color:#111 !important;
}

.brackets-viewer .participant{
    background:#f3f4f6 !important;
}


/* ==== MaoLu Champions Improvements ==== */

.brackets-viewer .round h3{
    font-size:16px !important;
    font-weight:700 !important;
}

.champion-banner{
    box-shadow:0 0 10px rgba(255,215,0,.3);
}


/* ==== MaoLu Final Visual Improvements ==== */

.brackets-viewer .round h3{
    background:#d4af37 !important;
    color:#111 !important;
    font-weight:800 !important;
    font-size:18px !important;
    padding:10px !important;
    border-radius:6px !important;
    text-align:center !important;
}

.brackets-viewer .winner{
    color:#0a7a0a !important;
    font-weight:900 !important;
}

.champion-banner{
    box-shadow:0 0 15px rgba(212,175,55,.45) !important;
}


/* ==== Ultimate Champions UI ==== */

.brackets-viewer .round h3{
    min-width:240px !important;
    width:240px !important;
    white-space:nowrap !important;
    overflow:visible !important;
}

.brackets-viewer .winner{
    color:#16a34a !important;
    font-weight:900 !important;
}

.brackets-viewer .participant{
    transition:all .2s ease;
}

.brackets-viewer .participant:hover{
    transform:scale(1.03);
}


/* Champion path visual */
#playoffsChampions .match{
 transition:all .2s ease;
}
#playoffsChampions .match:hover{
 box-shadow:0 0 10px rgba(212,175,55,.35);
}


/* Production finish */

#playoffsChampions .winner{
    color:#16a34a !important;
    font-weight:900 !important;
    text-shadow:0 0 4px rgba(22,163,74,.25);
}

#playoffsChampions .match{
    border-left:none !important;
}


/* Uniform bracket cards */
#playoffsChampions .match{
  width:260px !important;
  min-height:140px !important;
}
#playoffsChampions .opponents{
  width:260px !important;
  min-width:260px !important;
  max-width:260px !important;
}
#playoffsChampions .participant{
  min-height:42px;
}
#playoffsChampions .participant .name{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:170px;
  font-size:15px !important;
  font-weight:700 !important;
}
#playoffsChampions .participant .result{
  font-size:18px !important;
  font-weight:700 !important;
  min-width:24px;
}
#campeonPlayoff{
  max-width:600px;
  margin:30px auto !important;
}


/* ===== EA SPORTS FC / ESPN PREMIUM PACK ===== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800;900&display=swap');

body{
background:
radial-gradient(circle at top,#1b3f7a 0%,#0b1526 40%,#050b14 100%) !important;
font-family:'Montserrat',sans-serif !important;
}

.sidebar{
background:linear-gradient(180deg,rgba(4,12,24,.95),rgba(7,20,40,.88)) !important;
box-shadow:0 0 30px rgba(0,0,0,.45);
}

.sidebar h2{
font-size:26px;
text-transform:uppercase;
letter-spacing:2px;
}

.card,.team,details.card{
overflow:hidden;
position:relative;
}

.card::before,.team::before{
content:'';
position:absolute;
top:0;left:0;right:0;
height:4px;
background:linear-gradient(90deg,#00d4ff,#3b82f6,#ffd700);
}

.team{
text-align:center;
transition:.3s;
}

.team:hover{
transform:translateY(-6px) scale(1.02);
}

.team img{
width:110px !important;
height:110px !important;
box-shadow:0 0 20px rgba(0,212,255,.25);
}

table{
box-shadow:0 10px 30px rgba(0,0,0,.3);
}

thead{
background:linear-gradient(90deg,#00a3ff,#0066ff) !important;
}

tbody tr:nth-child(odd){
background:rgba(255,255,255,.04);
}

.top1{
background:rgba(255,215,0,.18)!important;
border-left:4px solid gold;
}

.top2{
background:rgba(192,192,192,.12)!important;
}

.top3{
background:rgba(205,127,50,.12)!important;
}

#campeonPlayoff{
text-align:center;
}

#campeonPlayoff h2{
font-size:34px;
text-transform:uppercase;
letter-spacing:2px;
}

.brackets-viewer .round h3{
box-shadow:0 4px 15px rgba(0,87,184,.35);
}

.brackets-viewer .participant{
border:1px solid rgba(0,0,0,.08);
}

.brackets-viewer .participant:hover{
box-shadow:0 0 15px rgba(0,212,255,.35);
}

.stat-card{
background:linear-gradient(135deg,#0f172a,#1e3a8a);
border-radius:18px;
padding:20px;
}


/* ===== EA SPORTS FC ELITE ===== */
:root{
--accent:#00d4ff;
--gold:#ffd700;
}
.sidebar h2{font-size:30px!important;text-transform:uppercase}
.card,.team{
position:relative;
overflow:hidden;
}
.card:before,.team:before{
content:'';position:absolute;left:0;top:0;right:0;height:4px;
background:linear-gradient(90deg,var(--accent),#3b82f6,var(--gold));
}
.card span{
font-size:42px!important;
font-weight:900!important;
color:var(--accent)!important;
}
.team{text-align:center}
.team:hover{transform:translateY(-8px) scale(1.03)!important}
.team img{
width:120px!important;height:120px!important;
box-shadow:0 0 25px rgba(0,212,255,.35);
}
#campeonPlayoff{
background:linear-gradient(135deg,#09111f,#1e40af)!important;
}
#campeonPlayoff h2{
font-size:38px!important;
letter-spacing:3px;
text-transform:uppercase;
}


/* ===== EA SPORTS FC 26 BROADCAST EDITION ===== */
body{
background:
radial-gradient(circle at top center,#214e9b 0%,#0b1830 35%,#050b14 100%) !important;
}

.main{
padding:30px !important;
}

h1,h2,h3{
text-transform:uppercase;
letter-spacing:1px;
}

.card,.team{
border-radius:24px !important;
backdrop-filter:blur(18px) !important;
}

.card{
box-shadow:0 15px 40px rgba(0,0,0,.35) !important;
}

.cards .card{
min-width:240px;
text-align:center;
}

.cards .card span{
font-size:56px !important;
font-weight:900 !important;
display:block;
margin-top:10px;
}

.team{
text-align:center;
padding:20px !important;
}

.team img{
width:140px !important;
height:140px !important;
border:4px solid rgba(255,255,255,.15);
}

.team:hover{
transform:translateY(-10px) scale(1.04) !important;
}

.sidebar button{
font-weight:700 !important;
}

.sidebar button:hover{
box-shadow:0 0 20px rgba(0,212,255,.25);
}

table{
border-radius:22px !important;
overflow:hidden;
}

thead th{
font-size:14px;
letter-spacing:1px;
}

.brackets-viewer .participant{
min-height:48px;
}

.brackets-viewer .participant:hover{
transform:scale(1.05);
}

#campeonPlayoff{
padding:30px !important;
text-align:center;
}

#campeonPlayoff h2{
font-size:42px !important;
}

#campeonPlayoff img{
max-width:180px;
filter:drop-shadow(0 0 20px rgba(255,215,0,.5));
}


/* ===== FULL REFACTOR EA SPORTS FC ===== */
.broadcast-header{
margin-bottom:25px;
padding:22px 30px;
border-radius:24px;
background:linear-gradient(135deg,#081424,#163f8c);
box-shadow:0 15px 40px rgba(0,0,0,.35);
}

.league-title{
font-size:42px;
font-weight:900;
letter-spacing:2px;
text-transform:uppercase;
}

.league-subtitle{
opacity:.8;
margin-top:5px;
}

.main{
max-width:1600px;
margin:auto;
}

.cards{
display:grid!important;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:20px;
}

.cards .card{
padding:25px;
min-height:140px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}

.grid{
display:grid!important;
grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
gap:20px;
}

.team{
background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03))!important;
}

.team img{
border-radius:50%;
object-fit:cover;
}

input,select,button{
border-radius:14px!important;
}

button{
font-weight:800!important;
text-transform:uppercase;
letter-spacing:.5px;
}

.view h2{
font-size:30px;
margin-bottom:20px;
border-left:5px solid #00d4ff;
padding-left:12px;
}

table{
font-size:14px;
}

#jugadoresLista .card,
#equiposLista .team{
transition:.3s;
}

#jugadoresLista .card:hover,
#equiposLista .team:hover{
box-shadow:0 20px 40px rgba(0,0,0,.35);
}

@media(max-width:900px){
.sidebar{
width:100%!important;
position:relative!important;
}
.main{
margin-left:0!important;
}
.league-title{
font-size:28px;
}
}


/* ===== FIX REAL: nombres de equipos demasiado grandes ===== */

/* Jornadas */
.match-row .team-mini span{
    font-size: 22px !important;
    font-weight: 700 !important;
    color:#20d4ff !important;
    line-height:1.1 !important;
}

/* Playoffs */
#playoffsChampions .participant .name,
#playoffsChampions .team-name,
#playoffsChampions .winner,
#playoffsChampions b{
    font-size: 22px !important;
    line-height:1.1 !important;
}

/* Marcadores */
#playoffsChampions .result{
    font-size: 18px !important;
}

/* IDA / VUELTA */
#playoffsChampions h4,
#playoffsChampions .leg-title{
    font-size: 14px !important;
}



/* ===== MOBILE OPTIMIZATION ONLY ===== */
@media (max-width: 768px){
body{
  flex-direction:column;
  overflow-x:hidden;
}
.sidebar{
  width:100%!important;
  height:auto!important;
  position:relative!important;
  padding:10px!important;
}
.sidebar button{
  padding:12px!important;
  font-size:14px!important;
}
.main{
  padding:10px!important;
  width:100%!important;
  box-sizing:border-box;
}
.cards,.grid{
  display:block!important;
}
.card,.team,details.card{
  margin-bottom:10px!important;
}
input,select{
  width:100%!important;
  margin:4px 0!important;
  box-sizing:border-box!important;
}
.main button{
  width:100%;
  margin:4px 0!important;
}
table{
  display:block;
  overflow-x:auto;
}
img{
  max-width:100%;
  height:auto;
}
}


/* Mobile optimization */
@media (max-width:768px){
body{overflow-x:hidden!important;}
.sidebar{position:fixed!important;left:-280px;z-index:9999;transition:.3s;width:260px!important;}
.sidebar.open{left:0!important;}
.main-content,.content,.container{margin-left:0!important;width:100%!important;padding:10px!important;}
form, .form-row{display:block!important;}
input,select,button,textarea{width:100%!important;max-width:100%!important;margin:4px 0!important;}
.action-buttons,.btn-group{display:flex!important;flex-direction:column!important;gap:8px;}
.team-banner img,.foto-equipo,img{max-width:100%;height:auto;}
.stats-row,.team-stats{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px;}
table{display:block;overflow-x:auto;}
}


/* MOBILE MENU FIX */
@media (max-width:768px){
.sidebar{
 position:fixed!important;
 left:-280px;
 top:0;
 height:100vh!important;
 overflow:auto;
 z-index:9999;
 transition:left .3s ease;
}
.sidebar.open{left:0!important;}
.mobile-menu-btn{
 display:block!important;
 position:fixed;
 top:10px;
 left:10px;
 z-index:10000;
 background:#d4af37;
 color:#111;
 border:none;
 padding:10px 14px;
 border-radius:10px;
}
.main{padding-top:60px!important;}
}
@media (min-width:769px){
.mobile-menu-btn{display:none!important;}
}


/* Mobile menu fix */
@media (max-width:768px){
.mobile-menu-btn, .menu-toggle, #menuToggle{
position:fixed !important;
top:12px !important;
left:12px !important;
width:48px !important;
height:48px !important;
border-radius:12px !important;
z-index:99999 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
padding:0 !important;
min-width:48px !important;
max-width:48px !important;
background:#d4af37 !important;
}
.mobile-menu-bar,.menu-bar,.mobile-menu-container{
width:auto !important;
height:auto !important;
background:transparent !important;
padding:0 !important;
margin:0 !important;
}
}


.toast{
 position:fixed;
 bottom:20px;
 left:50%;
 transform:translateX(-50%);
 background:#28a745;
 color:#fff;
 padding:12px 20px;
 border-radius:10px;
 font-weight:bold;
 z-index:99999;
 box-shadow:0 4px 12px rgba(0,0,0,.3);
}


/* Fix modal editar liga mobile */
#modalEditarLiga{
 position:fixed;
 inset:0;
 overflow-y:auto;
 -webkit-overflow-scrolling:touch;
}
#modalEditarLiga .modal-content,
#modalEditarLiga .modal-box{
 max-height:90vh;
 overflow-y:auto;
}

/* Landscape table full width */
@media screen and (orientation:landscape){
 .main,.content,.page-content,.container{
   width:100% !important;
   max-width:none !important;
   margin-left:0 !important;
   margin-right:0 !important;
 }
 table{
   width:100% !important;
   min-width:0 !important;
 }
}

/* Equipo column fix */
.equipo-col{width:40% !important;}
.equipo-wrap{display:flex;align-items:center;gap:8px;}
.equipo-wrap span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}


/* Tablet vertical tabla ajuste */
@media (min-width: 700px) and (max-width: 1100px){
  #tablaLista{display:flex;justify-content:center;}
  #tablaLista table{width:auto !important; min-width:auto !important;}
}

.equipo-header{display:flex;align-items:center;gap:8px;font-size:18px;margin:8px 0;color:#fff}
.equipo-header img{object-fit:cover}


/* Fix login text visibility */
#loginOverlay, #loginOverlay *{
  -webkit-text-fill-color: initial !important;
}
#loginOverlay h2{
 color:#111 !important;
 text-align:center;
}
#loginOverlay input{
 color:#111 !important;
 background:#fff;
}
#loginOverlay input::placeholder{
 color:#555 !important;
 opacity:1 !important;
}
#loginOverlay button{
 color:#111 !important;
 font-weight:700;
}
#loginMsg{
 color:#c62828 !important;
 font-weight:700;
}

.fila-goleador{display:grid;grid-template-columns:60px 56px 1.6fr 1fr 70px;align-items:center;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.08)}
.fila-goleador:hover{background:rgba(255,255,255,.04)}
.fila-goleador img.mini-foto{width:42px;height:42px;border-radius:50%;object-fit:cover;border:2px solid #fff}
.pos-badge{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#23345c;font-weight:700}
.gol-badge{display:inline-block;padding:4px 10px;border-radius:999px;background:#facc15;color:#111;font-weight:700}