html{
   overflow-x:hidden;
   width:100%;
}

body{
   overflow-x:hidden;
   width:100%;
   max-width:100vw;
}

*{
   box-sizing:border-box;
   transition:all 0.2s ease;
}

body{
   background:#0f172a;
   color:white;
   font-family:Arial;
   margin:0;
   padding:40px;
}

.titulo{
   text-align:center;
   font-size:50px;
   margin-bottom:60px;
   color:white;
}

.ligas-container{
   display:flex;
   flex-direction:column;
   gap:30px;
   align-items:center;
}

.liga-card{
   width:500px;
   height:160px;

   border-radius:20px;

   cursor:pointer;

   position:relative;

   overflow:hidden;

   transition:0.3s;

   display:flex;
   flex-direction:column;
   justify-content:center;
   align-items:center;

   background:#1e293b;

   border:2px solid transparent;
}

.liga-card:hover{

   transform:scale(1.03);

   border:2px solid #3b82f6;

   box-shadow:0px 0px 25px rgba(59,130,246,0.5);
}

.liga-bandera{
   font-size:50px;
}

.liga-nombre{
   font-size:30px;
   font-weight:bold;
}

.liga-sub{
   font-size:18px;
   opacity:0.8;
}

.clubes-container{

   margin-top:50px;

   display:grid;

   grid-template-columns: repeat(10, 100px);

   justify-content:center;

   gap:25px;
}

.club-card{

   width:100px;
   height:100px;

   background:#111827;

   border-radius:15px;

   display:flex;
   justify-content:center;
   align-items:center;

   cursor:pointer;

   transition:0.3s;

   box-shadow:0px 4px 15px rgba(0,0,0,0.4);
}

.club-card:hover{

   transform:scale(1.08);

   background:#1e293b;
}

.club-card img{
   width:70px;
   height:70px;
}

#posiciones{
   margin-top:20px;

   display:flex;
   flex-direction:column;

   align-items:center;
   justify-content:center;

   gap:15px;
}

.once-ideal-wrapper{
   padding:15px;

   border:2px solid #3b82f6;
   border-radius:18px;

   background:rgba(30,41,59,0.7);

   box-shadow:
      0 0 20px rgba(59,130,246,0.35);
}

.posiciones-container{

   margin-top:20px;

   display:flex;

   justify-content:center;

   gap:15px;
}

.pos-btn{

   background:#1e293b;

   color:white;

   border:none;

   padding:15px 25px;

   border-radius:12px;

   cursor:pointer;

   transition:0.3s;
}

.pos-btn:hover{
   background:#2563eb;
}

.pos-btn.active{
   background:#1d4ed8;
}

.top-bar{
   display:flex;
   justify-content:center;
   align-items:center;
   gap:6px; /* separación pequeña */
   margin:20px auto;
   width:fit-content;
}

#buscador-global{
   width:450px;
   margin:0;
   position:relative;
}

.info-btn{
   flex-shrink:0;
   margin:0;
}

.club-card.active{

   background:#1d4ed8;

   transform:scale(1.08);

   border:3px solid #60a5fa;

   box-shadow:0px 0px 20px rgba(96,165,250,0.6);
}

.club-card.active::after{

   position:absolute;

   bottom:-25px;

   font-size:12px;

   color:#60a5fa;
}

.player-modal{

   position:fixed;

   top:0;
   left:0;

   width:100%;
   height:100%;

   background:rgba(0,0,0,0.75);

   display:flex;

   justify-content:center;
   align-items:center;

   z-index:999;
}

.player-card{

   background:#111827;

   padding:40px;

   border-radius:20px;

   width:80%;

   max-width:900px;

   max-height:85vh;

   overflow-y:auto;

   box-shadow:0px 0px 30px rgba(0,0,0,0.5);
}

.player-card h2{

   margin-top:0;

   color:#60a5fa;
}

.player-card p{

   margin:10px 0;

   border-bottom:1px solid #334155;

   padding-bottom:6px;
}

.player-card button{
   margin-top:20px;
   width:100%;
}

.modal-close{
   width:36px !important;
   height:36px !important;
   margin:0 !important;
}

.player-card table{
   width:100%;
}

.club-wrapper{

   display:flex;

   flex-direction:column;

   align-items:center;

   gap:10px;
}

.club-rank{

   font-size:20px;

   font-weight:bold;

   color:#facc15;
}

.club-info{
   text-align:center;

   display:flex;
   flex-direction:column;
   align-items:center;

   gap:5px;
}

.club-name{
   display:none;

   font-size:14px;
   font-weight:bold;

   white-space:nowrap;
   overflow:hidden;
   text-overflow:ellipsis;
}

.club-points{
   font-size:15px;
   font-weight:bold;
   color:#e2e8f0;

   background:#111827;
   padding:4px 10px;
   border-radius:8px;

   box-shadow:0 0 8px rgba(0,0,0,0.4);
}

.extra-btn{

   padding:12px 20px;

   border:none;

   border-radius:10px;

   background:#1e293b;

   color:white;

   cursor:pointer;

   font-weight:bold;

   transition:0.2s;
}

.extra-btn:hover{
   background:#2563eb;
}

.extra-btn.active{
   background:#1d4ed8;
   box-shadow:0px 0px 10px rgba(37,99,235,0.6);
}

table{

   width:80%;

   margin:40px auto;

   border-collapse:collapse;

   background:#111827;

   border-radius:15px;

   overflow:hidden;
}

th{

   background:#1e293b;

   padding:16px;
}

td{

   padding:14px;

   text-align:center;

   border-bottom:1px solid #334155;
}

tr{
   transition:0.2s;
   cursor:pointer;
}

tr:hover{
   background:rgba(59,130,246,0.3);
}

.player-card{
   scrollbar-width:thin;
}

h2{
   text-align:center;
   margin-top:30px;
}

.extras{
   margin-top:40px;
   display:flex;
   justify-content:center;
   gap:20px;
}

.extra-btn,
.pos-btn{
   box-shadow:0px 0px 10px rgba(0,0,0,0.3);
}

.liga-card-extra{

   border:2px solid #facc15;

   box-shadow:0px 0px 15px rgba(250,204,21,0.5);
}

.liga-card-extra:hover{

   transform:scale(1.1);

   background:#1e293b;
}

.premio-card{
   border:2px solid #facc15;
   box-shadow:0px 0px 15px rgba(250,204,21,0.6);
}

.player-img {
   width: 44px;
   height: 44px;
   border-radius: 50%;
   object-fit: cover;
}

.player-img {
   border: 2px solid #3b82f6;
   box-shadow: 0px 0px 10px rgba(59,130,246,0.5);
}

.escudo-mini {
   width: 34px;
}

.flag {
   width: 28px;
   height: auto;
   border-radius: 3px;
   box-shadow: 0 0 3px rgba(0,0,0,0.5);
}

.flag{
   width:28px;
   height:auto;
   max-height:20px;
   object-fit:contain;
   border-radius:3px;
   display:block;
}

.flag-pos{
   display:flex !important;
   flex-direction:row !important;
   align-items:center;
   justify-content:center;
   gap:4px;
}

table td {
   vertical-align: middle;
}

td {
   padding: 20px;
}

table {
   font-size: 16px;
}

tbody tr {
   height: auto;
}

th:nth-child(2) {
   text-align: left;
   padding-left: 12px;
}

.top-separator td {
   border-bottom: 3px solid gold;
}

.distinciones {
   display: flex;
   gap: 8px;
   flex-wrap: nowrap;
   white-space: nowrap;
}

.tabla-ranking tr:hover {
   background: rgba(59,130,246,0.3);
}

.tabla-ranking .gold-player-row {
   background: rgba(250, 204, 21, 0.08);
   color: #facc15;
   font-weight: bold;
}

.tabla-ranking .gold-player-row:hover {
   background: rgba(250, 204, 21, 0.2);
}

.tabla-ranking tr.top1:hover {
   background: rgba(255, 215, 0, 0.25);
   box-shadow: inset 0 0 10px rgba(255, 215, 0, 0.6);
}

.top5-divider td {
   padding: 10px 0;
   border-bottom: none;
}

.top5-line {
   display: flex;
   align-items: center;
   gap: 10px;
}

.top5-line::before,
.top5-line::after {
   content: "";
   flex: 1;
   height: 2px;
   background: linear-gradient(to right, gold, #facc15);
}

.top5-line span {
   color: gold;
   font-weight: bold;
   letter-spacing: 1px;
   font-size: 14px;
}

.posicion-cell {
   display: flex;
   align-items: center;
   gap: 6px;
   justify-content: center;
   min-width: 50px;
}

.medalla {
   width: 20px;
   text-align: center;
}

.numero {
   width: 20px;
   text-align: right;
}

.col-escudo {
   width: 80px;
}

.col-escudo div {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 6px;
}

table {
   table-layout: fixed;
}

.player-modal{
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;

   display: flex;
   justify-content: center;
   align-items: center;

   background: rgba(0,0,0,0.6);
   z-index: 999;
}

.player-card{
   background: #0f1b2d;
   padding: 20px;
   border-radius: 10px;
   max-width: 800px;   /* antes 600 */
   width: 95%;
}

.player-card table{
   width: 100%;
   border-collapse: collapse;
   text-align: center;
}

.player-card th,
.player-card td{
   padding: 12px 10px;
   text-align: center;
}

.player-card th{
   background: #1c2a40;
}

.player-card td{
   border-top: 1px solid rgba(255,255,255,0.1);
}

.top-gold{
   background: linear-gradient(90deg, #3a2d00, #6b5200);
   color: #ffd700;
   font-weight: bold;
}

.top-gold td{
   border-color: rgba(255,215,0,0.3);
}

.player-info{
   min-width:0;
}

.player-card{
   position:relative;
}

.modal-close{
   position:absolute !important;

   top:10px !important;
   left:10px !important;

   width:36px;
   height:36px;

   margin:0 !important;
   padding:0 !important;

   display:flex;
   align-items:center;
   justify-content:center;

   background:rgba(0,0,0,.5);
   color:white;

   border:none;
   border-radius:50%;

   cursor:pointer;
   z-index:99999;
}

.modal-close:hover{
   background:rgba(239,68,68,.25);
   color:#f87171;
   transform:scale(1.1);
}

.close-btn{
   position: fixed;

   top: 45px;
   right: 210px;

   width: 40px;
   height: 40px;

   background: rgba(0,0,0,0.6);
   border-radius: 50%;

   display:flex;
   align-items:center;
   justify-content:center;

   font-size:20px;
   color:white;

   border:none;
   cursor:pointer;

   z-index: 1000;
}

.close-btn:hover{
   color:#f87171;
   transform:scale(1.2);
}

.close-btn-comparison{
   position: fixed;

   top: 45px;
   right: 70px;

   width: 40px;
   height: 40px;

   background: rgba(0,0,0,0.6);
   border-radius: 50%;

   display:flex;
   align-items:center;
   justify-content:center;

   font-size:20px;
   color:white;

   border:none;
   cursor:pointer;

   z-index: 1000;
}

.close-btn-comparison:hover{
   color:#f87171;
   transform:scale(1.2);
}

.tooltip{
   position:relative;
   display:flex;
   flex-direction:column;
   align-items:center;
}

.tooltip-text{
   position:absolute;

   bottom:110%; /* encima del escudo */
   left:50%;
   transform:translateX(-50%) translateY(5px);

   background:#1e293b;
   color:white;

   padding:6px 10px;
   border-radius:6px;

   font-size:12px;
   white-space:nowrap;

   opacity:0;
   pointer-events:none;

   box-shadow:0px 0px 10px rgba(0,0,0,0.5);
   transition:0.2s;
}

.tooltip:hover .tooltip-text{
   opacity:1;
   transform:translateX(-50%) translateY(0);
}

.fichajes-card{
   border:2px solid #22c55e;
   box-shadow:0 0 15px rgba(34,197,94,0.5);
}

.fichajes-card:hover{
   transform:scale(1.1);
   box-shadow:0 0 25px rgba(34,197,94,0.8);
}

.tabla-ranking th:last-child,
.tabla-ranking td:last-child{
   width:140px;          /* más ancho */
   min-width:140px;
   white-space:nowrap;   /* evita salto de línea */
   text-align:center;
}

.escudo-mini + span{
   display:block;
   max-width:90px;
   overflow:hidden;
   text-overflow:ellipsis;
   white-space:nowrap;
}

.titulo-header{
   text-align:center;
   margin:0 0 -10px 0;
}

.logo-titulo{
   width:400px;
   max-width:90%;
   margin-top:-150px;
   margin-bottom:-150px;

   cursor:pointer;
}

.logo-titulo:hover{
   transform:scale(1.03);
}

.liga-logo{
   width:100px;
   height:100px;
   object-fit:contain;
}

.paginacion-container {
   margin-top: 20px;
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 15px;
}

.pag-btn {
   background: #111;
   color: #fff;
   border: 1px solid #333;
   padding: 6px 12px;
   border-radius: 6px;
   cursor: pointer;
   font-size: 14px;
   transition: all 0.2s ease;
}

.pag-btn {
   min-width: 36px;
}

.pag-btn:hover:not(:disabled) {
   background: #facc15;
   color: #000;
}

.pag-btn:disabled {
   opacity: 0.3;
   cursor: default;
}

.pag-info {
   font-weight: bold;
   font-size: 14px;
   min-width: 70px;
   text-align: center;
}

.pag-input {
   width: 50px;
   padding: 5px;
   text-align: center;
   border-radius: 5px;
   border: 1px solid #333;
   background: #111;
   color: #fff;
   font-size: 13px;
}

.pag-input:focus {
   outline: none;
   border-color: #facc15;
}

.pag-input::-webkit-outer-spin-button,
.pag-input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
}

.once-ideal-wrapper{
   display:flex;
   justify-content:center;
   margin-top:15px;
}

.once-btn{
   min-width:220px;
   font-weight:bold;
}

.campo-container {
   display: flex;
   justify-content: center;
   gap: 40px;
   position: relative;
}

/* CAMPO */
.campo {
   width: 600px;
   height: 750px;
   border-radius: 12px;
   position: relative;
   overflow: hidden;

   display: flex;
   flex-direction: column;
   justify-content: space-between;
   padding: 40px 0;

   position:relative;
   
   background:#021343;

}

/* LINEAS */
.linea {
   display: flex;
   justify-content: center;
   gap: 20px;
}

/* POSICIONES */
.portero { margin-bottom: 10px; }
.defensa { margin-bottom: 20px; }
.centrocampista { margin-bottom: 20px; }
.delantero { margin-top: 10px; }

/* PLAYER */

.player-card-mini img {
   width: 45px;
   height: 45px;
   border-radius: 50%;
}

/* SUPLENTES */
.suplentes {
   display: flex;
   flex-direction: column;
   gap: 10px;
}

/* ENTRENADOR */
.entrenador {
   position: absolute;
   top: 0;
   left: 0;
}

/* LINEAS CAMPO */
.campo::before {
   content: "";
   position: absolute;
   inset: 10px;
   border: 2px solid rgba(255,255,255,0.6);
   border-radius: 6px;
}

/* LINEA CENTRAL */
.campo::after {
   content: "";
   position: absolute;
   top: 50%;
   left: 10px;
   right: 10px;
   height: 2px;
   background: rgba(255,255,255,0.5);
}

/* CIRCULO CENTRAL */
.circulo-central{
   position:absolute;

   top:50%;
   left:50%;

   width:120px;
   height:120px;

   border:2px solid rgba(255,255,255,.4);

   border-radius:50%;

   transform:translate(-50%, -50%);
}

.area-superior{
   position:absolute;

   top:10px;
   left:50%;

   width:300px;
   height:120px;

   transform:translateX(-50%);

   border:2px solid rgba(255,255,255,.4);

   border-top:none;
}

.area-inferior{
   position:absolute;

   bottom:10px;
   left:50%;

   width:300px;
   height:120px;

   transform:translateX(-50%);

   border:2px solid rgba(255,255,255,.4);

   border-bottom:none;
}

.area-pequena-superior{
   position:absolute;

   top:10px;
   left:50%;

   width:140px;
   height:50px;

   transform:translateX(-50%);

   border:2px solid rgba(255,255,255,.4);

   border-top:none;
}

.area-pequena-inferior{
   position:absolute;

   bottom:10px;
   left:50%;

   width:140px;
   height:50px;

   transform:translateX(-50%);

   border:2px solid rgba(255,255,255,.4);

   border-bottom:none;
}

.porteria-superior{
   position:absolute;

   top:5px;
   left:50%;

   width:80px;
   height:10px;

   transform:translateX(-50%);

   border:2px solid rgba(255,255,255,.7);
}

.porteria-inferior{
   position:absolute;

   bottom:5px;
   left:50%;

   width:80px;
   height:10px;

   transform:translateX(-50%);

   border:2px solid rgba(255,255,255,.7);
}

.punto-superior{
   position:absolute;

   top:90px;
   left:50%;

   width:6px;
   height:6px;

   transform:translateX(-50%);

   background:white;

   border-radius:50%;
}

.punto-inferior{
   position:absolute;

   bottom:90px;
   left:50%;

   width:6px;
   height:6px;

   transform:translateX(-50%);

   background:white;

   border-radius:50%;
}

.campo::before,
.campo::after,
.circulo-central,
.centro-campo,
.area-superior,
.area-inferior,
.area-pequena-superior,
.area-pequena-inferior,
.porteria-superior,
.porteria-inferior,
.punto-superior,
.punto-inferior,
.semiluna-superior,
.semiluna-inferior,
.corner{

   z-index:1;
   pointer-events:none;
}

.centro-campo{

   position:absolute;

   left:50%;
   top:50%;

   width:8px;
   height:8px;

   transform:translate(-50%,-50%);

   background:white;

   border-radius:50%;

   z-index:1;
}

.semiluna-superior{

   position:absolute;

   left:50%;
   top:130px;

   width:90px;
   height:45px;

   transform:translateX(-50%);

   border:2px solid rgba(255,255,255,.45);

   border-top:none;

   border-radius:0 0 90px 90px;

   z-index:1;
}

.semiluna-inferior{

   position:absolute;

   left:50%;
   bottom:130px;

   width:90px;
   height:45px;

   transform:translateX(-50%);

   border:2px solid rgba(255,255,255,.45);

   border-bottom:none;

   border-radius:90px 90px 0 0;

   z-index:1;
}

.corner{
   position:absolute;

   width:24px;
   height:24px;

   border:2px solid rgba(255,255,255,.55);
   border-radius:50%;

   z-index:1;
}


.tl{
   top:-12px;
   left:-12px;

   border-right:none;
   border-bottom:none;

   border-radius:0 0 20px 0;
}

.tr{
   top:-12px;
   right:-12px;

   border-left:none;
   border-bottom:none;

   border-radius:0 0 0 20px;
}

.bl{
   bottom:-12px;
   left:-12px;

   border-right:none;
   border-top:none;

   border-radius:0 20px 0 0;
}

.br{
   bottom:-12px;
   right:-12px;

   border-left:none;
   border-top:none;

   border-radius:20px 0 0 0;
}

.linea {
   display: flex;
   justify-content: center;
   gap: 20px;
}

.suplentes {
   display: flex;
   flex-direction: column;
   gap: 12px;
   align-items: center;
}

.player-card-mini img {
   width: 45px;
   height: 45px;
   border-radius: 50%;
   transition: transform 0.2s;
}

.player-card-mini:hover img {
   transform: scale(1.2);
}

.linea {
   display: flex;
   justify-content: center;
   width: 100%;
   gap: 25px;
}

.linea{
   position:relative;
   left:-2.5px;
}

/* Cada línea ocupa igual ancho */
.linea > div {
   width: 90px;
}

.player-card-mini img {
   width: 50px;
   height: 50px;
   border-radius: 50%;
   border: 3px solid white;
   transition: transform 0.2s;
}

/* COLORES POR POSICIÓN */
.delantero img {
   border-color: #ef4444; /* rojo */
}

.centrocampista img {
   border-color: #22c55e; /* verde */
}

.defensa img {
   border-color: #3b82f6; /* azul */
}

.portero img {
   border-color: #a855f7; /* morado */
}

.player-card-mini:hover img {
   transform: scale(1.2);
}

.player-extra {
   display: flex;
   justify-content: center;
   gap: 5px;
   margin-top: 4px;
}

.player-extra img {
   width: 18px;
   height: 18px;
   border: none;
}

.campo::before,
.campo::after {
   pointer-events: none;
}

.delantero { margin-bottom: 30px; }
.centrocampista { margin-bottom: 20px; }
.defensa { margin-bottom: 10px; }
.portero { margin-bottom: 0px; }

.player-extra {
   display: flex;
   justify-content: center;
   gap: 6px;

   margin-top: 5px;
}

.player-card-mini {
   display: grid;
   grid-template-rows: 50px 40px 30px;
   justify-items: center;

   width: 100px;
   height: 120px;

   position:relative;
   z-index:20;

}

.player-name {

   height: 40px;

   display:flex;
   align-items:center;
   justify-content:center;

   width:95px;

   padding:4px 8px;

   background:#0f172a;

   border:1px solid #1e3a8a;

   border-radius:8px;

   color:white;

   font-size:12px;
   font-weight:600;

   text-align:center;

   white-space:normal;
   word-break:break-word;

   box-shadow:0 2px 6px rgba(0,0,0,.4);
}

.player-extra {
   height: 30px;
   display: flex;
   justify-content: center;
   gap: 6px;
}

.suplentes-filas {
   display: flex;
   flex-direction: column;
   gap: 14px;
}

.fila-suplente-fija {
   display: grid;
   grid-template-columns: 1fr 1fr;
   column-gap: 60px;
   align-items: start;
}

.fila-suplente-fija .col {
   display: flex;
   justify-content: center;
   min-height: 120px;
}

.banquillo{

   min-width:320px;

   padding:20px;

   background:#0f172a;

   border:2px solid #334155;

   border-radius:18px;

   box-shadow:0 0 20px rgba(0,0,0,.4);
   
   background:
         linear-gradient(
            180deg,
            #1e293b,
            #0f172a
         );

}

.banquillo-header{

   text-align:center;

   font-weight:bold;

   color:#facc15;

   margin-bottom:20px;

   font-size:18px;
}

.top10-card{
   border:2px solid #f97316;
   box-shadow:0 0 15px rgba(249,115,22,.5);
}

.top10-card:hover{
   transform:scale(1.1);
   box-shadow:0 0 25px rgba(249,115,22,.8);
}

#input-jugador{

   width: 100%;

   padding: 12px;

   border-radius: 8px;

   border: 1px solid #555;

   font-size: 16px;
}

#resultados-busqueda{

   position: absolute;

   top: 100%;
   left: 0;

   width: 100%;

   background: #111;

   border-radius: 8px;

   overflow: hidden;

   z-index: 9999;
}

#resultados-comparacion,
#resultados-cambio{
   margin-top:10px;
   max-height:350px;
   overflow-y:auto;

   background:#111;
   border-radius:8px;

   width:100%;
}

.ranking-container{
   overflow-x:auto;
}

.resultado-busqueda{

   display: flex;

   align-items: center;

   gap: 10px;

   padding: 10px;

   cursor: pointer;
}

.resultado-busqueda:hover{

   background: #222;
}

.resultado-busqueda img{

   width: 36px;
   height: 36px;

   border-radius: 50%;
}

.resultado-busqueda small{
   color:#94a3b8;
   display:block;
   margin-top:3px;
}

.resultado-busqueda .player-img{
   width:40px;
   height:40px;
   flex-shrink:0;
}

.compare-header{
   display:flex;
   justify-content:space-between;
   align-items:center;
   margin-bottom:25px;
}

.compare-player{
   flex:1;
   text-align:center;
}

.compare-vs{
   font-size:34px;
   font-weight:bold;
   color:#facc15;
   padding:0 20px;
}

.compare-photo{
   width:90px;
   height:90px;
   border-radius:50%;
   object-fit:cover;
}

.compare-table .winner{
   color:#22c55e;
   font-weight:bold;
   font-size:1.05em;
}

.compare-stat{
   font-weight:bold;
   color:#facc15;
}

.compare-card{
   max-width:1100px;
}

.compare-player h3{
   margin:10px 0;
}

.compare-photo{
   width:90px;
   height:90px;
   border-radius:50%;
   object-fit:cover;
   border:3px solid #3b82f6;
}

.compare-table{
   width:100%;
}

.compare-player{
   display:flex;
   flex-direction:column;
   align-items:center;
}

.compare-icons{
   display:flex;
   align-items:center;
   justify-content:center;
   gap:8px;

   margin-top:8px;
   margin-bottom:8px;
}

.compare-icons .escudo-mini{
   width:24px;
}

.compare-icons .flag{
   width:20px;
}

.info-btn{
   background:#1f2937;
   color:white;
   border:none;
   padding:10px 14px;
   border-radius:8px;
   cursor:pointer;
   font-weight:bold;
}

.info-btn:hover{
   background:#374151;
}

.selector-posiciones{

   margin:15px auto 0 auto;

   padding:20px;

   border:2px solid #3b82f6;

   border-radius:18px;

   background:rgba(30,41,59,0.7);

   box-shadow:0 0 20px rgba(59,130,246,0.35);

   width:fit-content;
}

.selector-posiciones-titulo{

   text-align:center;

   font-weight:bold;

   color:#60a5fa;

   font-size:18px;
}

.posicion-badge{

   min-width:30px;

   height:18px;

   border-radius:4px;

   display:flex;

   align-items:center;
   justify-content:center;

   font-size:10px;
   font-weight:bold;

   color:white;
}

.posicion-badge{

   width:30px;
   min-width:30px;

   height:18px;

   font-size:10px;
   font-weight:bold;

   display:flex;
   align-items:center;
   justify-content:center;
}

.pos-por{
   background:#a855f7;
}

.pos-def{
   background:#3b82f6;
}

.pos-med{
   background:#22c55e;
}

.pos-del{
   background:#ef4444;
}

@media (max-width:768px){

   .selector-posiciones{

      width:95%;

      max-width:350px;

      text-align:center;
   }

}

@media (max-width: 768px){

   body{
      padding:15px;
   }

   .clubes-container{
      grid-template-columns: repeat(4, 1fr);
      gap:15px;
      justify-items:center;
   }

   .club-wrapper{
      width:auto;
   }

}

@media (max-width: 768px){

   table{
      width:100%;
      font-size:13px;
   }

   td{
      padding:8px;
   }

   th{
      padding:8px;
   }

   .player-img{
      width:32px;
      height:32px;
   }

   .escudo-mini{
      width:24px;
   }

   .flag{
      width:20px;
   }

}

@media (max-width:768px){
   .flag{
      width:22px;
      height:auto;
      max-height:16px;
   }
}

@media (max-width: 768px){

   .liga-card{
      width:100%;
      max-width:350px;
      height:120px;
   }

   .liga-logo{
      width:70px;
      height:70px;
   }

}

@media (max-width:768px){

   .club-card{
      width:70px;
      height:70px;
   }

   .club-card img{
      width:45px;
      height:45px;
   }

   .club-rank{
      font-size:16px;
   }

   .club-points{
      font-size:11px;
      padding:3px 6px;
   }

}

@media (max-width:768px){

   .logo-titulo{
      width:300px;
      margin-top:-100px;
      margin-bottom:-100px;
   }

}

@media (max-width:768px){

   .club-card{
      border-radius:10px;
   }

   .club-info{
      gap:2px;
   }

   .club-points{
      font-size:10px;
      text-align:center;
   }

}

@media (max-width:768px){

   .campo-container{
      flex-direction:column;
      align-items:center;
   }

   .campo{
      width:360px;
      height:520px;
   }

   .banquillo{
      width:360px;
      min-width:360px;
   }

}

@media (max-width:768px){

   .posiciones-container{
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      gap:15px;
   }

}

@media (max-width:768px){

   .pos-btn{
      padding:8px 10px;
      font-size:10px;
      margin-bottom:10px;
   }

}

@media (max-width:768px){

   .selector-posiciones{
      padding:15px 15px 10px 15px;
   }

}

@media (max-width:768px){

   .club-wrapper{
      grid-column:auto !important;
      grid-row:auto !important;
   }

}

@media (max-width:768px){

   .player-card-mini{
      width:70px;
      height:100px;
   }

   .player-name{
      width:75px;
      font-size:9px;
   }

   .linea > div{
      width:70px;
   }

}

@media (max-width:768px){

   #buscador-global{
      max-width:300px;
   }

}

@media (max-width:768px){

   .clubes-container > div{
      grid-column:auto !important;
      grid-row:auto !important;
   }

}

@media (max-width:768px){

   .campo{
      padding-top:0;
      padding-bottom:80px;
   }

}

@media (max-width:768px){

   .clubes-container{
      display:flex !important;
      flex-wrap:wrap;
      justify-content:center;
      gap:15px;
   }

}

@media (max-width:768px){

   .delantero{
      margin-bottom:17px;
   }

   .centrocampista{
      margin-bottom:12px;
   }

   .defensa{
      margin-bottom:7px;
   }

}

@media (max-width:768px){

   .linea{
      position:relative;
      left:-2.5px;
   }

}

@media (max-width:768px){

   .clubes-container > div{
      width:75px !important;
      margin:0 !important;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
   }

}

@media (max-width:768px){

   .club-wrapper{
      justify-content:flex-start;
      gap:8px;
   }

   .club-info{
      min-height:35px;
      display:flex;
      justify-content:center;
   }

}

@media (max-width:768px){

   .ranking-container{
      width:100%;
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
   }

}

@media (max-width:768px){

   .player-card{
      width:98%;
      max-height:92vh;
      padding:12px;
   }

}

@media (max-width:768px){

   .close-btn{
      top:12px;
      right:12px;
   }

   .close-btn-comparison{
      top:12px;
      right:60px;
   }

}

@media (max-width:768px){

   .compare-header{
      flex-direction:row;
      justify-content:center;
      align-items:center;
      gap:10px;
   }

}

@media (max-width:768px){

   .compare-player{
      flex:1;
      min-width:0;
   }

   .compare-player h3{
      font-size:11px;
      word-break:break-word;
   }

   .compare-photo,
   .compare-player .player-img{
      width:45px;
      height:45px;
   }

   .compare-vs{
      font-size:18px;
      padding:0 5px;
      flex-shrink:0;
   }

}



@media (max-width:768px){

   .compare-table{
      font-size:11px;
   }

   .compare-table th,
   .compare-table td{
      padding:6px;
   }

}

@media (max-width:768px){

   .compare-photo{
      width:20px;
      height:20px;
   }

   .compare-icons .flag{
      width:30px !important;
      max-height:none !important;
   }

   .compare-icons .escudo-mini{
      width:30px !important;
   }

}

@media (max-width:768px){

   .compare-table .flag-pos{
      display:flex !important;
      flex-direction:row !important;
      align-items:center;
      justify-content:center;
      gap:4px;
      flex-wrap:nowrap;
   }

   .compare-table .flag{
      width:16px !important;
      flex-shrink:0;
   }

   .compare-table .escudo-mini{
      width:20px !important;
      flex-shrink:0;
   }

}

@media (max-width:768px){

   .player-card h3{
      font-size:16px;
      margin-top:20px;
   }

   .player-card p{
      font-size:14px;
   }

}

@media (max-width:768px){

   .liga-card{
      max-width:280px;
      height:100px;
   }

}

@media (max-width:768px){

   .tabla-ranking{
      width:100% !important;
      min-width:0 !important;
      table-layout:fixed;
      font-size:10px;
   }

   .tabla-ranking th,
   .tabla-ranking td{
      padding:3px;
   }

   .tabla-ranking .player-img{
      width:28px;
      height:28px;
   }

   .tabla-ranking .escudo-mini{
      width:20px;
   }
}

@media (max-width:768px){

   .tabla-ranking{
      table-layout:auto !important;
   }

   .tabla-ranking th:nth-child(2),
   .tabla-ranking td:nth-child(2){
      width:40%;
   }
}

@media (max-width:768px){

   .posicion-cell{
      min-width:30px;
      gap:2px;
   }

   .medalla{
      width:14px;
      font-size:11px;
   }

   .numero{
      width:12px;
      font-size:11px;
   }
}

@media (max-width:768px){

   .tabla-ranking th:last-child,
   .tabla-ranking td:last-child{
      width:35px;
      min-width:35px;
   }
}

@media (max-width:768px){

   .tabla-ranking th:nth-child(4),
   .tabla-ranking td:nth-child(4){
      width:55px;
   }
}

@media (max-width:768px){

   .flag{
      width:16px !important;
      max-height:12px;
   }

   .posicion-badge{
      width:22px;
      min-width:22px;
      height:14px;
      font-size:8px;
      border-radius:3px;
   }

   .flag-pos{
      gap:2px;
   }

   .escudo-mini{
      width:24px;
   }

}

@media (max-width:768px){

   .posicion-badge{
      width:16px;
      min-width:16px;
      height:10px;
      font-size:6px;
   }

}

@media (max-width:768px){

   body{
      overflow-x:hidden;
   }

   #buscador-global{
      width:100%;
      max-width:300px;
   }

}

@media (max-width:768px){

   .compare-card{
      width:99%;
      padding:10px;
   }

   .compare-player h3{
      font-size:13px;
      margin:6px 0;
   }

   .compare-photo,
   .compare-player .player-img{
      width:50px;
      height:50px;
   }

   .compare-vs{
      font-size:22px;
   }

   .compare-table{
      font-size:10px;
      table-layout:auto;
   }

   .compare-table th,
   .compare-table td{
      padding:4px 2px;
      word-break:break-word;
   }
}

@media (max-width:768px){

   .compare-table td{
      white-space:nowrap;
   }

   .compare-table .flag-pos{
      display:flex;
      flex-direction:row;
      align-items:center;
      justify-content:center;
      gap:4px;
      white-space:nowrap;
   }

}

@media (max-width:768px){

   .player-card table th,
   .player-card table td{
      font-size:11px;
      padding:6px;
   }

   .player-card table img{
      max-width:22px;
   }
}

@media (max-width:768px){

   .player-card{
      width:97%;
      max-height:90vh;
      overflow-y:auto;
   }

   .player-card h2{
      font-size:20px;
   }

   .player-card h3{
      font-size:15px;
   }

   .player-card p{
      font-size:13px;
      margin:6px 0;
   }

   .player-card img.player-img{
      width:70px !important;
      height:70px !important;
   }
}

@media (max-width:768px){

   #input-comparador{
      font-size:14px !important;
      padding:8px !important;
   }

   .resultado-busqueda{
      padding:8px;
   }

   .resultado-busqueda .player-img{
      width:30px;
      height:30px;
   }

   .resultado-busqueda small{
      font-size:10px;
   }
}

@media (max-width:768px){

   .compare-table{
      width:100%;
      table-layout:auto;
   }

   .player-card table{
      width:100%;
      table-layout:fixed;
   }

}

@media (max-width:768px){

   .top-bar{
      width:100%;
      justify-content:center;
   }

   #buscador-global{
      width:100%;
      max-width:300px;
   }

}

/* RESULTADOS COMPARADOR */
#resultados-comparacion .resultado-busqueda,
#resultados-cambio .resultado-busqueda{
   display:flex;
   align-items:center;
   gap:10px;
   padding:10px;
   min-height:50px;
}

#resultados-comparacion .player-img,
#resultados-cambio .player-img{
   width:40px !important;
   height:40px !important;
   border-radius:50%;
   flex-shrink:0;
}

#resultados-comparacion div,
#resultados-cambio div{
   font-size:14px;
}

#resultados-comparacion small,
#resultados-cambio small{
   font-size:11px;
   color:#94a3b8;
}

@media (max-width:768px){
   .player-card img.player-img{
      width:70px !important;
      height:70px !important;
   }
}

@media (max-width:768px){
   .player-card > div > img.player-img{
      width:70px !important;
      height:70px !important;
   }
}

/* =========================
   WEB RENDERIZADA EN SERVIDOR
   (enlaces con el aspecto de los antiguos botones)
   ========================= */

a.liga-card,
a.club-card,
a.resultado-busqueda,
.enlace-jugador,
.logo-enlace{
   color:inherit;
   text-decoration:none;
}

.enlace-jugador:hover{
   text-decoration:underline;
}

a.pos-btn,
a.info-btn,
a.pag-btn{
   display:inline-block;
   text-decoration:none;
   color:white;
   font-family:Arial, sans-serif;
   font-size:13.3333px;
   line-height:normal;
   text-align:center;
}

a.pag-btn{
   color:#fff;
   font-size:14px;
}

a.pag-btn:hover{
   background:#facc15;
   color:#000;
}

/* encabezados para buscadores y lectores de pantalla */
.solo-lectores{
   position:absolute;
   width:1px;
   height:1px;
   padding:0;
   margin:-1px;
   overflow:hidden;
   clip:rect(0,0,0,0);
   white-space:nowrap;
   border:0;
}

/* ficha / guía / comparador como página completa */
.player-card.ficha-pagina{
   margin:30px auto;
   max-height:none;
   overflow:visible;
}

.player-card h1.titulo-ficha{
   margin-top:0;
   font-size:1.5em;
   color:#60a5fa;
}

.migas{
   text-align:center;
   margin-top:30px;
   color:#94a3b8;
   font-size:14px;
}

.migas a,
.enlace-texto{
   color:#60a5fa;
   text-decoration:none;
}

.migas a:hover,
.enlace-texto:hover{
   text-decoration:underline;
}

.resultados-pagina{
   background:#111;
   border-radius:8px;
   overflow:hidden;
}

@media (max-width:768px){

   a.pos-btn{
      font-size:10px;
   }

   .player-card.ficha-pagina{
      width:100%;
   }

}