@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root {
    --baseColor: #1e1e2f; /* Fondo claro más suave y moderno */
    --sombra: rgba(0, 0, 0, 0.25); /* Sombra sutil, da profundidad sin ser invasiva */
    --secondColor: #b81111;
    --texto: #B4B4B4;
    --accent: lightgray;
    --hoverAccent: #4752C4;
    --card-bg: #ffffff;
    --glass-bg: rgba(255, 255, 255, 0.2);
    --glass-border: rgba(255, 255, 255, 0.4);
    --shadow: rgba(0, 0, 0, 0.1);
    --primary: #007bff;
    --danger: #dc3545;
    --warning: #ffc107;
    --border-radius: 10px;
    --transition: all 0.3s ease;
    --colorPrimario: #5EE7F0;
    --colorSecundario: #FFD700;
    --vip-border-color: #FFD700;
}
body {
    font-family: 'Poppins', sans-serif;
    /* background: url('https://lkworld.online/assets/background.jpg') no-repeat center center fixed; */
    background:  var(--baseColor);
    background-size: cover;
    min-height: 100vh;        /* se expande si es necesario */
    width: 100%;
    display: flex;
    justify-content: flex-start;
    padding-left: 10%;
    flex-direction: column;
    text-align: center;
    color:  var(--texto);
    transition: padding-left 0.3s ease, background 0.5s ease;
    position: relative;
}

/* Capa difuminada */


/* Modo Oscuro */
html.dark-mode {
    --sombra: rgba(0, 0, 0, 0.25); /* Cambia el color de sombra a uno más oscuro */
    --baseColor: #1e1e2f; /* Cambia el color base a un tono más oscuro */
    --texto: #B4B4B4;
    /* background: #121212 !important; */
    /* color: #f1f1f1 !important; */
}
/* html.dark-mode {
    --sombra: rgba(0, 0, 0, 0.3); /* Cambia el color de sombra a uno más oscuro */
/* } */
html {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

html.loaded {
    visibility: visible;
    opacity: 1;
}
/*****/
/*===============================
=          MENÚ LATERAL         =
===============================*/

#sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 150px;
    background: #1e1e2f;
    padding: 20px 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transition: width 0.3s ease, transform 0.3s ease;
    overflow-y: auto;
    z-index: 1000;
  }
  
  /* Modo colapsado */
  #sidebar.collapsed {
    width: 70px;
    display: flex;
    align-content: flex-start;
    flex-direction: column;
    align-items: stretch;
    overflow-x: hidden; /* 👈 Previene el scroll horizontal */
    white-space: nowrap; /* 👈 Evita que el texto intente hacer scroll horizontal */
}
  /* Compacto solo logo */
  .sidebar.compact-only-logo {
    width: 60px;
    overflow: hidden;
  }
  
  .sidebar.compact-only-logo li span,
  .sidebar.compact-only-logo li ul {
    display: none;
  }
  
  /* Ajuste body cuando el menú está abierto */
  body.menu-open {
    padding-left: 180px;
  }
  
  /*===============================
  =           LISTA UL           =
  ===============================*/
  
  #sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  #sidebar ul li {
    margin: 14px 0;
  }
  
  #sidebar ul li a {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #B4B4B4;
    text-decoration: none;
    font-size: 80%;
    margin-left: -5px;
    padding: 8px 12px;
    border-radius: 6px;
    transition: background 0.3s, color 0.3s;
    white-space: nowrap;
  }
  
  #sidebar ul li a:hover {
    background-color: var(--accentHover);
    color: var(--accent);
  }
  
  /* Oculta el texto cuando está colapsado */
  #sidebar.collapsed ul li a span {
    display: none;
    opacity: 0;
    pointer-events: none;
  }
  
  /* Transición suave del texto */
  #sidebar ul li a span {
    transition: opacity 0.2s ease;
  }
  #sidebar.collapsed ul .has-submenu .submenu-container {
    width: 100px;
}
#sidebar.collapsed ul li a{
    gap: 30px !important;
    margin-left: 5px;
}
  /*===============================
  =         SUBMENÚS             =
  ===============================*/
  
  .has-submenu {
    position: relative;
  }
  
  .has-submenu ul.submenu {
    display: none;
    padding-left: 20px;
  }
  
  .has-submenu.open ul.submenu {
    display: block;
  }
  
  /* Contenedor del enlace + botón de flecha */
  .submenu-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  /* Enlace principal de ítem con submenú */
  .main-link {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 10px;
    color: inherit;
    text-decoration: none;
  }
  
  /* Botón que despliega el submenú */
  .submenu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    color: inherit;
  }
  
  /* Flecha animada */
  .submenu-toggle-icon {
    transition: transform 0.3s ease;
  }
  
  .has-submenu.open .submenu-toggle-icon {
    transform: rotate(180deg);
  }
  
  /* Estilo enlaces dentro del submenú */
  .has-submenu ul li a {
    font-size: 85%;
  }
  
  /*===============================
  =     BOTONES DEL MENÚ         =
  ===============================*/
  
  /* Botón de abrir menú */
  #open-menu {
    top: 15px;
    left:0;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1100;
    padding: 5px;
  }
  #open-menu:hover {
        opacity: 0.8;
    }
  /* Logo del botón */
  #menu-logo {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: block;
  }
  /* Botón cerrar dentro del menú */
  #close-menu {
    display: none;
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 22px;
    color: #B4B4B4;
    cursor: pointer;
  }
  
  #sidebar:not(.collapsed) #close-menu {
    display: block;
  }
  
  /*===============================
  =        TOGGLE DARK MODE      =
  ===============================*/
  
  .switch {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  
  
/*****/
.ruleta-section {
    text-align: center;
    margin-top: 40px;
  }
  
  .ruleta-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  #ruletaCanvas {
    border: 5px solid #5EE7F0;
    border-radius: 50%;
    margin-bottom: 15px;
  }
  
  .ruleta-controles {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin: 30px auto;
    padding: 15px;
    background: #1f1f1f;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    max-width: 500px;
    flex-wrap: wrap;
  }
  
  .ruleta-controles select {
    padding: 10px 15px;
    font-size: 16px;
    border: none;
    border-radius: 8px;
    background: #2c2c2c;
    color: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    outline: none;
    transition: background 0.3s ease, transform 0.2s ease;
  }
  
  .ruleta-controles select:hover {
    background: #3a3a3a;
    transform: scale(1.02);
  }
  
  .ruleta-controles button#girarRuleta {
    padding: 10px 20px;
    font-size: 18px;
    background: #ff5e00;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 8px rgba(255, 94, 0, 0.3);
  }
  
  .ruleta-controles button#girarRuleta:hover {
    background: #ff7733;
    transform: scale(1.05);
  }
  
  
  #tipo-premio, #girarRuleta {
    padding: 10px;
    margin: 5px;
    font-size: 16px;
  }
  
  .ruleta-ganador {
    display: none;
    text-align: center;
    margin-top: 30px;
  }
  
  .ruleta-ganador.mostrar {
    display: block;
  }
  
  #resultado-final {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: var(--baseColor);
    color: var(--texto);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 8px 20px var(--sombra);
    margin: 0 auto;
    width: 100%;
  }
  
  #btnVolver {
    margin-top: 10px;
    background-color: #5EE7F0;
    border: none;
    padding: 10px 15px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    color: #000;
  }
  
  #btnVolver:hover {
    background-color: #00bcd4;
  }
  
  #avatar-ganador {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 20px;
    border: 4px solid #5EE7F0;
  }
  
  #ganador-nombre {
    font-size: 2.2rem;
    color: #FFD700;
    animation: rebote 1s ease infinite alternate;
  }
  
  #ganador-discord {
    font-size: 1.1rem;
    color: var(--texto)
  }
  
  #premio-asignado {
    font-size: 1.3rem;
    font-weight: bold;
    color: #5EE7F0;
  }
  
  @keyframes rebote {
    0% { transform: scale(1); }
    100% { transform: scale(1.1); }
  }
  

/* Barra superior */
header {
    position: absolute;
    top: 10px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.auth-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0px;
    
}

.btn-auth {
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #5865F2, #4752C4);
    color: white;
    font-size: 16px;
    font-weight: bold;
    padding: 8px 15px;
    border-radius: 8px;
    text-decoration: none;
    transition: transform 0.3s ease-in-out;
    position: relative;
    overflow: hidden;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
}

.btn-auth i {
    font-size: 20px;
    transition: transform 0.3s ease-in-out;
}

.btn-auth .btn-text {
    display: inline-block;
    transition: transform 0.3s ease-in-out, opacity 0.3s;
}

/* Efecto Hover */
.btn-auth:hover {
    transform: scale(1.05);
    width: 130px;
}

.btn-auth:hover i {
    transform: translateX(-5px);
}

.btn-auth:hover .btn-text {
    transform: translateX(5px);
    opacity: 0;
}

/* Cambio de texto en hover */
.btn-auth::after {
    content: '➲ Entrar';
    position: absolute;
    left: 25%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.btn-auth:hover::after {
    opacity: 1;
    transform: translateX(10px);
}
.user-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--baseColor);
    color: var(--texto);
    font-size: 16px;
    font-weight: bold;
    padding: 6px;
    border-radius: 8px;
    text-decoration: none;
    transition: transform 0.3s ease-in-out;
    box-shadow: 0px 4px 10px var(--sombra);
}

.img-tipo-game{
    width: 30px;
    height: 30px;
    box-shadow: 0px 4px 10px #2d2e31;
}

.logout-btn {
    display: inline-block;
    padding: 15px 20px;
    margin-left: 0px !important;
    background-color: #b81111;
    color: white;
    font-size: 96%;
    width: 100%;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    transition: background-color 0.3s;
}

.logout-btn:hover {
    background-color: rgb(76, 2, 2);
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.user-name {
    font-size: 16px;
    color: var(--texto);
}
/* Estilo para el switch */
.switch {
    margin-top: 20px;
    position: relative;
    display: inline-block;
    width: 100%;
    height: 26px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    background: var(--baseColor);
    position: absolute;
    cursor: pointer;
    inset: 0;
    border-radius: 34px;
    transition: 0.4s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slider i {
    font-size: 16px;
    color: var(--texto);
    transition: transform 0.4s ease, opacity 0.4s ease;
}

input:checked + .slider {
    background: var(--sombra) !important;
    color: var(--texto) !important;
    box-shadow: none;
}

input:checked + .slider i {
    transform: rotate(360deg);
    color: var(--texto);
}
/* Contenedor principal */
main {
    color:  var(--texto);
    padding: 20px;
    text-align: left;
    border-radius: 12px;
    width: 88%;
    background: var(--baseColor);
    box-shadow: 0 0 10px var(--sombra);
    transition: margin-left 0.3s ease;
    min-height: 100vh;        /* se expande si es necesario */
    box-sizing: border-box;
    overflow-x: hidden;  
    display: flex;
    flex-direction: column;
    align-items: flex-start;

}
.uniformes-render{
  display: flex;
  justify-content: center;
}
/* Secciones */
.content {
    display: flex;
    text-align: left;
    justify-content: left;
    margin-top: 20px;
    width: 100%;
}
.content2 {
    display: flex;
    text-align: left;
    justify-content: left;
    flex-direction: column;
    margin-top: 20px;
    margin-left: -5px;
    width: 100%;
}
.content3 {
    display: flex;
    gap: 20px;
    text-align: left;
    justify-content: center;
    margin-top: 20px;
    margin-left: -10px;
    align-items: flex-start;
    width: 100%;
    height: 100%;
}
.content4 {
    display: flex;
    gap: 5px;
    text-align: left;
    justify-content: center;
    margin-top: 20px;
    margin-left: 5px;
    align-items: flex-start;
    width: 100%;
    height: 100%;
}
.div-frame {
    width: 240px;
    height: 150px;
    padding: 10px;
    box-shadow: inset 2px 2px 6px rgba(0, 0, 0, 0.6),
                inset -2px -2px 6px rgba(255, 255, 255, 0.2);
    display: flex;
    overflow: hidden;
    align-items: center;
    justify-content: center;
}
.div-frame img {
    min-width: 260px;
    height: 120px;
    object-fit: cover;
    opacity: 0.5;
}
.vip-arrow {
  font-size: 1.4rem;
  color: #0070ba;
  transition: transform 0.2s ease;
}
.vip-arrow:hover {
  transform: scale(1.2);
  color: #0070ba;
}

.news, .games {
    background: var(--baseColor);
    border-radius: 8px;
    width: 50%;
}
.head-botons{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 5px;
    margin-left: 0;
    padding: 8px;
    width: 100%;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.02));
    box-shadow: 0 4px 14px rgba(2, 6, 23, 0.35);
    backdrop-filter: blur(6px);
    transition: transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s ease;
    z-index: 999;
}

/* Botón toggle izquierdo */
.hb-toggle{
  display:inline-grid;
  place-items:center;
  border: none;
  background: var(--baseColor);
  color: var(--texto);
  width:36px;height:36px;border-radius:3px;
  cursor:pointer;
  font-size:16px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.25);
  transition: transform .18s ease, box-shadow .18s ease;
}
.hb-toggle:active{ transform: scale(.96); }
.hb-toggle i{ font-size:16px; }

/* Lista de botones */
.head-botons-list{
  display:flex;
  gap:8px;
  align-items:center;
  transition: opacity .35s ease, transform .35s cubic-bezier(.2,.9,.2,1), max-height .35s ease;
  transform-origin: left center;
  will-change: transform, opacity;
}

/* Cada botón dentro */
.hb-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:8px;
  border:none;
  background: rgba(255,255,255,0.03);
  color: #f8f8f8;
  font-size:14px;
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  height:36px;
}
.hb-btn i{ margin-right:4px; opacity:.95; font-size:16px; }
.hb-toggle:focus, .hb-btn:focus { outline: 2px solid rgba(255,230,80,0.6); outline-offset: 2px; }
/* hover/active */
.hb-btn:hover{ transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.35); background: rgba(255,255,255,0.04); }
.hb-btn:active{ transform: translateY(0); }

/* Estado colapsado (oculto): animación elegante */
.head-botons.collapsed{
  width:44px; /* solo el toggle visible */
  padding-right:6px;
  gap:0;
  margin-left: -10px; /* para alinear con el borde */
  background: none;
  box-shadow: none;
}
.head-botons.collapsed .head-botons-list{
  opacity:0;
  transform: scale(.96) translateX(-6px);
  pointer-events:none;
  max-height:0;
}

/* Transición para mostrar (cuando se expande) */
.head-botons.expanded .head-botons-list{
  opacity:1;
  transform: scale(1) translateX(0);
  pointer-events:auto;
  max-height:400px;
}

.descr-inf{
    text-align: left;
    padding: 10px;
    width: 100%;
}
.descr-inf h2 {
    text-align: left;
    color: var(--texto);
}
.descr-inf p {
    margin-bottom: 5px;
}
.descr-inf code {
    background: var(--sombra);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
    color: var(--texto);
}
.vs-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.5;
  }
.row-inf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 12px;
    margin: 5px;
    padding: 2px;
    gap: 40px;
    width: 100%;
    flex-direction: row;
    text-align: center;
    background: var(--baseColor);
    box-shadow: 0 0 15px var(--sombra);           /* sombra general original */
}
.row-inf > .descr-inf{
    width: 100%;
}
.noticias-content{
    display: flex;
    justify-content: center;
    border-radius: 12px;
    /* margin: 5px; */
    padding: 2px;
    width: 100%;
    flex-direction: column;
    text-align: center;
    background: var(--baseColor);
    align-items: center;
}
.img-div {
    width: 250px;
    height: 225px;
    left: 0;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.btn-jugar {
   background: #bf1717;
    color: white;
    font-size: 1.2rem;
    padding: 12px 24px;
    border: none;
    max-width: 150px;
    height: 50px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex
;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    position: relative;
    margin: 0px 80px;
    position: absolute;
    right: 100px;
  }
  
  .btn-jugar i {
    transition: transform 0.4s ease, color 0.3s ease;
  }
  
  .btn-jugar:hover i {
    transform: translateY(-5px) scale(1.3) rotate(-10deg);
    color: #ffe600;
  }
  
  .btn-jugar:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(194, 23, 23, 0.6);
    background: linear-gradient(135deg, #bf1717, #c21717);
  }
  
.container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.login-container, .discord-iframe-container {
    background: var(--baseColor);
    color: var(--texto);
    padding: 30px;
    margin-left: -10px;
    border-radius: 12px;
    box-shadow: 0 0 15px var(--sombra);
    text-align: center;
    width: 350px;
    min-height: 520px !important;
    display: flex;
    align-items: center;
    max-height: 520px !important;
}

.login-container img {
    width: 105px; /* Ajusta este valor según sea necesario */
    height: 105px; /* Para mantener la proporción */
    object-fit: cover; /* Para que llene el espacio sin deformarse */
    border-radius: 50%; /* Hace que la imagen sea circular */
    margin-bottom: 20px;
}
.login-container h1 {
    font-size: 24px;
    margin-bottom: 10px;
}
.login-container p {
    font-size: 14px;
    margin-bottom: 20px;
}
.login-container input {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: none;
    border-radius: 6px;
    outline: none;
}
.login-container button {
    width: 100%;
    padding: 12px;
    background: #5865F2;
    border: none;
    color: white;
    font-size: 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.3s;
}
.login-container button:hover {
    background: #4852c7;
}
.discord-btn {
    background: #7289DA;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.discord-btn i {
    font-size: 18px;
}
.discord-iframe {
    width: 100%;
    height: 435px;
    border: none;
    border-radius: 12px;
    overflow: hidden;
}
.iframe-container {
    width: 40%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.discord-notice {
    background: rgba(255, 69, 58, 0.2);
    border: 1px solid #ff453a;
    color: #ff453a;
    padding: 12px;
    border-radius: 6px;
    text-align: center;
    font-size: 14px;
    max-width: 98%;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: bold;
}
/* Contenedor Principal */
.servers-container {
    background: var(--baseColor);
    color: var(--texto);
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 0 15px var(--sombra);
    width: 95%;
    height: auto;
    min-height: 85%;
    max-width: 1150px;
    margin-left: -30px;
}

/* Tarjeta de Servidor */
.server-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--baseColor);
    color: var(--texto);
    padding: 15px;
    border-radius: var(--border-radius);
    box-shadow: 0 0 15px var(--sombra);
    width: 100%;
    max-height: 13%;
    margin: 10px 0;
    flex-wrap: nowrap;
    overflow: hidden;
}

/* Sección de encabezado */
.server-header {
    display: flex;
    align-items: left;
    gap: 15px;
    flex-grow: 1;
    flex-wrap: nowrap;
    overflow: hidden;
    min-width: 0; /* Permite que el contenido se ajuste */
    /* max-width: 30%; Permite que el contenido se ajuste */
}

/* Evita que el nombre del servidor se desborde */
.server-name {
    font-size: 100%;
    font-weight: bold;
}
.server-logo {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    box-shadow: 0 0 15px var(--sombra);
}
/* Token alineado a la derecha */
.token-container {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    width: 40%;
    margin: 20px; /* Mueve el token hacia la derecha */
    margin-left: 0; /* Elimina cualquier margen izquierdo */
}

/* Input del Token */
.token-input {
    padding: 6px 10px;
    font-size: 14px;
    border-radius: 5px;
    color: var(--texto);
    min-width: 180px;
    width: 100%;
    background: var(--sombra);
}

.token-input:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--baseColor);
}

/* Botón de eliminar */
.btn-icon {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    transition: 0.3s;
    color: var(--danger);
}

/* Dirección IP */
.server-ip {
    font-size: 14px;
    color: var(--texto);
    flex-shrink: 0;
    white-space: nowrap;
    margin: 20px;
    margin-left: 0px;
    text-align: right;
    width: 100px;
}

/* Grupo de botones */
.button-group {
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
}

/* Botones */
.btn {
    background: var(--baseColor);
    box-shadow: 0 0 15px var(--sombra);
    color: var(--texto);
    padding: 6px 12px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: 0.3s;
    white-space: nowrap;
}

.start { background: #007bff; color: white; margin-right: 5px;}
.beta { 
  background: #07ff51; 
  color: black; 
  font-size: 11px;
}
.restart { background: #ffc107; color: black; }
.stop { background: #dc3545; color: white; }

.btn:hover {
    opacity: 0.8;
    transform: scale(1.05);
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="time"],
input[type="date"],
input[type="email"] {
    text-transform: none !important;
    text-indent: 0px !important;
    text-shadow: none !important;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* Ocultar flechas en los inputs de tipo number */
/* input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
} */
input[type="text"],
input[type="password"],
input[type="number"],
input[type="time"],
input[type="date"],
input[type="email"] {
    color: var(--texto) !important;
    background: var(--sombra) !important;
    border: none;
    font-size: 1rem;
    text-align: center;
    outline: none;
    /* box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.4),
                inset -4px -4px 8px rgba(255, 255, 255, 0.1); */
    transition: all 0.3s ease-in-out;
}
.team-container {
    display: flex;
    flex-direction: row;  /* Alinea los elementos en una fila */
    align-items: center;  /* Alinea los elementos verticalmente al centro */
    justify-content: flex-start;  /* Alinea los elementos al principio */
    padding: 0px;
    width: 100%;
    margin-right: 30px;
    gap: 20px;  /* Espacio entre los elementos */
}

.label-team {
    font-size: 14px;
    display: flex;  /* Alinea el label y el input en línea */
    align-items: center;  /* Centra el contenido dentro del label */
}

.label-team strong {
    margin-right: 8px;  /* Separación entre el texto y el input */
}

.team-input {
    width: 150px;  /* Ajuste de tamaño del input */
    padding: 5px;
    text-align: center;  /* Alinea el texto en el centro */
    background-color: #f0f0f0; /* Color de fondo claro */
    border: 1px solid #ccc; /* Borde suave */
    border-radius: 4px; /* Bordes redondeados */
    font-size: 14px;
    color: #333;
}

/* Efecto al hacer focus */
input:focus:not([readonly]):not([type="checkbox"]) {
    box-shadow: inset 2px 2px 6px rgba(0, 0, 0, 0.6),
                inset -2px -2px 6px rgba(255, 255, 255, 0.2);
}

.status-icon {
    font-size: 14px; /* Ajusta el tamaño si es necesario */
    position: relative;
}

.status-icon::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    background: inherit; /* Hereda el color del icono */
    border-radius: 50%;
    opacity: 0.6;
    filter: blur(8px);
    transform: translate(-50%, -50%);
    z-index: -1;
}

.status-icon.green {
    color: #00ff00; /* Verde */
    text-shadow: 0 0 8px #00ff00, 0 0 16px #00ff00, 0 0 24px #00ff00;
}

.status-icon.red {
    color: #ff0000; /* Rojo */
    text-shadow: 0 0 8px #ff0000, 0 0 16px #ff0000, 0 0 24px #ff0000;
}

#paginacion {
    display: flex;
    justify-content: flex-end; /* Mueve los botones a la derecha */
    gap: 8px; /* Espaciado entre botones */
    /* overflow: hidden; */
}

.page-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--baseColor);
    color: var(--texto);
    border: none;
    border-radius: 8px; /* Hace que los bordes sean cuadrados pero ligeramente redondeados */
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.config-btn{
    display: block;
    width: 30px;
    height: 30px;
}
.page-btn-filtro{
    min-height:20px;
    min-width:40px;
    gap: 5px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--baseColor);
    color: var(--texto);
    border: none;
    border-radius: 5px; /* Hace que los bordes sean cuadrados pero ligeramente redondeados */
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.page-btn:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    background: var(--primary); /* Puedes cambiarlo por otro color si quieres */
}

.page-btn:active {
    transform: scale(0.95);
}
.server-detalle {
    width: 100%;
    min-height: 80%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.server-card.full-view {
    width: 100%;
    height: 90%;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    padding: 0px;
    margin: 0;
    border-radius: 10px;
}

.panel-izquierdo {
    width: 70%;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    top: 0;
    border-radius: 5px;
    padding: 20px 30px;
    box-shadow: inset 0 0 10px var(--sombra);
    overflow-y: scroll; /* Fuerza el desplazamiento vertical */
    overflow-x: hidden; /* Oculta el desplazamiento horizontal */
}
::-webkit-scrollbar {
    width: 8px; /* Grosor de la barra */
}

::-webkit-scrollbar-thumb {
    background: var(--texto); /* Color del "pulgar" */
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--baseColor); /* Cambio de color al pasar el cursor */
}
.panel-izquierdo h3 {
    margin: 10px;
}
.panel-izquierdo label {
    display: flex;
    justify-content: space-between;
    text-align: left;
    margin-bottom: 5px;
    color: var(--texto);
    align-items: center;
}

.panel-izquierdo input {
    width: 70%;
    padding: 5px;
    border-radius: 3px;
    
}
#search-mods {
    width: 100%;
    min-width: 70%;
  }
.panel-derecho {
    width: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.server-img-container {
    position: relative;
    width: 40%;
    height: auto;
}

.server-img-container img {
    width: 90%;
    height: auto;
    border-radius: 10px;
}

/* Botón oculto por defecto */
.edit-img-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    display: none;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 5px; /* Added for rounded corners */
    font-size: 0.8em;
}

.edit-img-btn:hover {
    background-color: rgba(0, 0, 0, 0.7);
    transform: scale(1.1);
}

/* Mostrar el botón al hacer hover en la imagen */
.server-img-container:hover .edit-img-btn {
    display: block;
}

/* Mostrar el botón si tiene la clase .drag-over (se añade desde JS) */
.edit-img-btn.drag-over {
    display: block !important;  /* Force display during drag */
    background-color: #e0f7fa; /* Light background for drag-over state */
    border: 2px dashed #007bff; /* Dashed border for drag-over state */
    color: #000;
}
.server-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 10px;
    width: 60%;
}

.server-buttons .btn {
    margin: 5px;
    padding: 8px 15px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.guardar-btn {
    width: 100%;
    background-color: #28a745;
    color: white;
    padding: 10px;
    border-radius: 5px;
    margin-top: 20px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.detalles{
    display: flex;
    margin-top: 20px;
    justify-content: center;
    flex-wrap: wrap;
}
.detalles .btn{
    margin: 0;
    margin-top: 5px;
    width: 100%;
    padding: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.page-btn-volver {
    height:40px;
    width:80px;
    display: flex;
    position: fixed;
    top: 0px;
    left: 0px;
    align-items: center;
    justify-content: center;
    background: var(--baseColor);
    color: var(--texto);
    border: none;
    border-radius: 5px; /* Hace que los bordes sean cuadrados pero ligeramente redondeados */
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--sombra);
    padding: 8px 12px;
    margin-bottom: 5px;
    background-color: var(--baseColor);
    border-radius: 5px;
    font-size: 0.75rem;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}


.detal {
    display: flex;
    gap: 10px;
    flex-grow: 1;
    align-items: center;
    white-space: nowrap;
}
.div1 {
    width: 170px;
    margin: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.div2 {
    max-width: 120px;
    min-width: 5%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

strong {
    font-weight: bold;
    white-space: nowrap;
    margin-right: 5px;
}
.btn-add {
    background: none;
    border: none;
    color: #28a745;
    font-size: 16px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: color 0.3s ease;
}

.btn-add::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400%;
    height: 400%;
    background: rgba(0, 255, 21, 0.2); /* Ajusté la opacidad a 0.2 */
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.5s ease;
}

.btn-add:hover {
    color: white;
}

.btn-add:hover::before {
    transform: translate(-50%, -50%) scale(1);
}

.btn-add:hover::after {
    font-size: 18px;
    opacity: 1;
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.2);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.btn-delete {
    background: none;
    border: none;
    color: red;
    font-size: 16px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: color 0.3s ease;
}

.btn-delete::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400%;
    height: 400%;
    background: rgba(255, 0, 0, 0.2); /* Ajusté la opacidad a 0.2 */
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.5s ease;
}

.btn-delete:hover {
    color: white;
}

.btn-delete:hover::before {
    transform: translate(-50%, -50%) scale(1);
}

.btn-delete:hover::after {
    font-size: 18px;
    opacity: 1;
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.2);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.page-btn-volver:hover {
    background: var(--primary);
}
a {
    color: #007bff; /* Azul */
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}
a.button-link {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border-radius: 5px;
    text-align: center;
    font-size: 16px;
}
.discord-button {
    display: none;
}
#pantalla-carga {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    /* background-color: #0d1117; */
    background-color: var(--baseColor);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    font-family: 'Segoe UI', sans-serif;
    transition: opacity 0.3s ease;
}

.pantalla-carga-contenido {
    font-size: 1.5rem;
    display: none;
    flex-direction: column;
    align-items: center;
}

.puntos::after {
    content: '';
    display: inline-block;
    animation: animarPuntos 1.5s infinite steps(4);
}

@keyframes animarPuntos {
    0%   { content: ''; }
    25%  { content: '.'; }
    50%  { content: '..'; }
    75%  { content: '...'; }
    100% { content: ''; }
}

.listado-top{
  display: flex;
    margin: 15px 0px 10px;
    gap: 5px;
    font-size: 80%;
    line-height: 1.4;
    white-space: pre-line;
    flex-direction: column;
}
.contenedor-tabla-posiciones {
    overflow-x: auto;
  }
  
  .tabla-posiciones-liga {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--sombra);
    box-shadow: 0 0 12px rgba(0,0,0,0.08);
  }
  
  .tabla-posiciones-liga th,
  .tabla-posiciones-liga td {
    padding: 0.45em;
    text-align: center;
    border-bottom: 1px solid var(--baseColor);
  }
  
  .tabla-posiciones-liga th {
    background-color: #bf1717;
    color: #e0e0e0;
    font-weight: bold;
  }
  
  .logo-team-tabla {
    width: 22px;
    vertical-align: middle;
    margin-right: 8px;
  }
  .btn-column{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
  .server-actions {
    display: flex;
    min-width: 140px;
    width: 100%;
    justify-content: space-between;
    align-items: center;
  }
  .select-server {
    width: 100%;
    max-width: 300px;
    padding: 10px 14px;
    font-size: 16px;
    font-weight: 500;
    color: var(--texto);
    border: 2px solid var(--sombra);
    background: var(--baseColor);
    border-radius: 10px;
    appearance: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
    padding-right: 40px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  }
  
  .select-server:hover {
    border-color: #888;
    box-shadow: 0 0 12px var(--sombra);
  }
  
  .select-server:focus {
    outline: none;
    border-color: #4d90fe;
    box-shadow: 0 0 10px #4d90fe99;
    background-color: var(--baseColor);
  }
  select[multiple] {
    width: 100%;
    height: auto;
    min-height: 100px;
    padding: 8px;
    background-color: var(--baseColor, #f9f9f9);
    border: 1px solid var(--sombra, #ccc);
    border-radius: 5px;
    font-size: 14px;
    color: var(--texto);
    outline: none;
    box-shadow: inset 0 1px 3px var(--sombra);
    margin-bottom: 5px;
  }
  
  select[multiple] option {
    padding: 6px 5px;
    cursor: pointer;
  }
  
  select[multiple] option:checked {
    background-color: var(--accentColor, var(--secondColor));
    color: white;
  }
  
  select[multiple]:focus {
    border-color: var(--accentColor, #d60000);
    box-shadow: 0 0 3px var(--secondColor);
  }
  .select-individual-wrapper {
    display: flex;
    align-items: center;
    margin: 4px 0;
    gap: 6px;
}

.select-individual {
    background-color: var(--sombra);
    color: var(--texto);
    flex: 1;
    padding: 4px;
    font-size: 14px;
    outline: none;
    border: none;
    max-width: 250px;

}

.input-cantidad {
    width: 60px;
    padding: 4px;
    border-radius: 6px;
    border: 1px solid var(--sombra, #ccc);
    text-align: center;
    font-size: 14px;
}
.label-jugador-leido {
    margin-right: 8px;
    font-weight: 500;
    font-size: 0.95rem;
    display: inline-block;
    min-width: 220px;
}
.uniform-preview-only{
    border-radius: 12px;

    width: 200px;
    height: 150px;
    background: var(--baseColor);
    display: flex;
    margin-top: 40px;
    justify-content: center;
    align-items: center;
}
.server-container-auto {
    height: auto !important;
  }
  
  .server-container-fixed {
    min-height: 92% !important;
    max-height: 96% !important;
  }
  .input-row{
    display: flex;
    top: 5px;
    justify-content: space-between;
  }
  .label-jugador-leido{
    max-width: 350px;
    box-shadow: 0 8px 20px var(--sombra);
  }
  .discord-btn{
    margin: 15px 0px;
    height: 40px;
    min-width: 200px;
    max-width: 350px;
  }

  .inf-stats {
    display:flex;
    align-items: flex-start;
    border-radius: 10px;
    padding: 20px;
    background: #1e1e2f;
    gap: 10px;
    height: 100%;
    box-shadow: 0 0 15px var(--sombra);
    align-items: center;
    width: 101.9%;
    align-items: flex-start;
  }
  
  .chart-container {
    margin: 5px;
    background: #1e1e2f;
    min-height: 420px;
    height: 90%;
    border-radius: 10px;
    padding: 10px;
    border: 2px solid;
    width: 40%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  }
  
  .chart-container h3 {
    text-align: center;
    background-color: #1e1e2f;
    margin: -10px;
    padding: 10px;
    padding-bottom: 30px;
    border-radius: 10px;
    height: 50px;
    font-size: 16px;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
  }
  .chart-container h2 {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 50px;
    margin-left: -10px;
    font-size: 15px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    padding: 5px 0px;
    width: 105%;
  }
  
  .chart-container img {
    display: block;
    margin: 0 auto;
    width: 100%;
  }
  
  .top-container {
    margin-bottom: 30px;
    max-width: 50vh;
    width: 35%;
    height: 100%;
  }
  .extra-container {
    margin: 5px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 30%;
  }
  
  .progreso-box {
    width: 100%;
    margin: 10px 0px;
    border-radius: 10px;
    padding: 15px;
    border: 2px solid;
    background: #0e0e0e33;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    color: #B4B4B4;
  }
  
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 5px;
    justify-items: center;
  }
  
  .stat-card {
    width: 80%;
    height: 100%;
    background: #1e1e2f;
    padding: 5px;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
    text-align: center;
    color: #B4B4B4;
     overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-word;
  }
  
  .stat-card .icon {
    font-size: 22px;
  }
  
  .stat-card .label {
    font-weight: bold;
    font-size: 12px;
  }
  
  .stat-card .value {
    font-size: 20px;
  }
  .btn-servidor {
    background: #444;
    color: white;
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}

.btn-servidor:hover {
    background: #666;
}

.select-servidor {
    font-size: 12px;
    padding: 5px 10px;
    border: none;
    background: var(--baseColor);
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    color: #B4B4B4;
    appearance: none;
    outline: none;
    cursor: pointer;
    margin: 15px 0px;
    width: 100%;
}

.select-servidor:hover,
.select-servidor:focus {
    background-color: transparent;
    border: none;
    outline: none;
}
.select-servidor option {
    background-color: rgba(0, 0, 0, 0.5);
    color: rgba(0, 0, 0, 0.5);
}
.column{
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    width: 100%;
}
.vip-terms li {
  font-size: 9px;
  line-height: 1.2;
  margin-top: 10px;
  color: #ccc;
}

/*
/* Animación de entrada suave para tarjetas */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.stat-card {
  animation: fadeInUp 0.6s ease forwards;
  opacity: 0;
}
.stat-card .icon {
  display: inline-block;
  animation: bounce 2s ease-in-out infinite;
}

.chart-img {
  animation: rotate-slow 40s linear infinite;
  transform-origin: center center;
  
}

@keyframes rotate-slow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
.stat-card:nth-child(1) { animation-delay: 0s; }
.stat-card:nth-child(2) { animation-delay: 0.1s; }
.stat-card:nth-child(3) { animation-delay: 0.2s; }
.stat-card:nth-child(4) { animation-delay: 0.3s; }
.stat-card:nth-child(5) { animation-delay: 0.4s; }
.stat-card:nth-child(6) { animation-delay: 0.5s; }
.stat-card:nth-child(7) { animation-delay: 0.6s; }
.stat-card:nth-child(8) { animation-delay: 0.7s; }

.chart-container img {
  animation: zoomIn 0.8s ease forwards;
  opacity: 1;
  height:auto;
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.row-info{
    width: 100%;
    height: 100%;
    overflow: visible;
}
.extra-container, .top-container {
  animation: fadeInUp 0.8s ease forwards;
  opacity: 0;
  animation-delay: 0.4s;
}

.metric-box {
  transition: transform 0.3s ease;
}

.metric-box:hover {
  transform: scale(1.05);
}
.ctn-img{
    position: absolute;
    width: 10px;
    margin-left: 150px;
    height: 0px;
    background: none;
    overflow: visible;
}
.imagen-desbordada {
    transform: translateX(-50%) translateY(-50%);
    width: 180px;
    height: auto;
        position: absolute;
}
.ctn-img:hover {
    transform: rotate(3deg);
}
@keyframes glow {
  0% { filter: drop-shadow(0 0 0px #ff7f7f); }
  50% { filter: drop-shadow(0 0 10px #ff7f7f); }
  100% { filter: drop-shadow(0 0 0px #ff7f7f); }
}

.chart-img {
  animation: glow 3s ease-in-out infinite;
}
.selector-contenedor{
    width: 780px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-left: 10px;
    margin-top: -20px;
    margin-bottom: -5px;
    gap: 10px;
}
.tiktok-embed {
    height: auto;
    box-shadow: 0 0 10px var(--sombra);
    border-radius: 10px;
    margin: 0px 10px !important;
    padding: 5px !important;
    display: flex !important;
    justify-content: center !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
}

.games{
    box-shadow: 0 0 10px var(--sombra);
    border-radius: 10px;
    width: 110%;
}
.games label{
    padding-left: 20px;
}
.games h2{
    padding: 10px 0px;
}
.select-vip{
    font-size: 15px;
    padding: 10px 10px;
    border: none;
    background-color: rgba(0, 0, 0, 0.5);
    color: #B4B4B4;
    appearance: none;
    outline: none;
    cursor: pointer;
    text-align: center;
    /* margin: 15px 0px; */
    width: 100%;
}
.column {
    text-align: left;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}
.column-shop {
    text-align: left;
    padding: 5px;
    display: flex;
    gap: 10px;
    width: 100%;
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    flex-wrap: wrap;
    justify-content: center;
}
.column-detalles {
    padding: 5px;
    display: flex;
    width: 200px;
    height: 200px;
    border-radius: 8px;
    box-shadow: inset 2px 2px 6px rgba(0, 0, 0, 0.6),
                inset -2px -2px 6px rgba(255, 255, 255, 0.2);
    justify-content: center;
}
.column-shop > div {
  flex: 0 0 40%; /* 3 columnas: cada div ocupa un tercio */
  height: 50%;        /* 2 filas: cada div ocupa la mitad */
  box-sizing: border-box;
  
}
.column .sub-noticia p{
    padding-left: 10px;
    font-size: 85%;
}
.column-shop > .tiktok-embed {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  perspective: 1000px;
}
.column-shop > .tiktok-embed:hover {
  transform: scale(1.05) rotateX(5deg) rotateY(-5deg);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
.rotating-card {
  width: 120px;
  height: 120px;
  transform-style: preserve-3d;
  transition: transform 0.1s;
  margin: auto;
}
.rotating-card {
  position: relative;
  perspective: 1000px;
  width: 200px;
  height: 200px;
}

.rotating-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 12px;
  position: relative;
    transition: transform 0.2s ease;
  z-index: 1;
}

.contenido{
    display: flex;
    align-items: center;
    gap: 10px;
}
.vip-border-anim {
  position: relative;
  z-index: 1;
  --vip-border-color: #00f6ff; /* Puedes cambiar el color desde JS */
  --vip-border-glow: rgba(0, 246, 255, 0.2);
}

.vip-border-anim::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 8px;
  border: 2px solid #B4B4B4; /* tubo base más suave */
  box-shadow:
    0 0 6px 1px var(--vip-border-color),
    inset 0 0 4px 1px var(--vip-border-color);
  animation: neonPulse 10s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

.vip-border-anim::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 8px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--vip-border-color) 45%,
    transparent 55%
  );
  background-size: 200% auto;
  animation: borderFlow 6s ease-in-out infinite;
  opacity: 0.25; /* más suave */
  filter: blur(1px);
  pointer-events: none;
  z-index: -2;
}
.nequi-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(to right, #4c0371, #d92b7e);
  color: white;
  font-weight: bold;
  padding: 12px 24px;
  border: none;
  border-radius: 999px;
  font-size: 16px;
  position: relative;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
      width: 100%;
    height: 40px;
    margin-top: 5px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.nequi-btn:hover {
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
}

.nequi-btn img {
  height: 30px;
  animation: fadeIn 1s forwards;
  transition: all 0.3s ease;
}
.nequi-btn .nequi-label {
  opacity: 0;
  transform: translateX(50px);
  animation: slideIn 0.5s ease-out forwards;
  animation-delay: 0.8s;
  white-space: nowrap;
  color: white;
  padding-left: 10px;
}
.nequi-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 10, 20, 0.95);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.nequi-modal-content {
  position: relative;
  background: #1a1a2f;
  border-radius: 12px;
  padding: 30px;
  max-width: 800px;
  width: 90%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: white;
}

.nequi-close {
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 28px;
  background: transparent;
  border: none;
  color: white;
  cursor: pointer;
}

.nequi-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nequi-header img {
  height: 30px;
}

.nequi-body {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: center;
}

.qr-img {
  width: 200px;
  height: 200px;
  object-fit: contain;
  border: 2px solid #fff;
  border-radius: 8px;
  background: white;
  padding: 5px;
}

.qr-instructions {
  font-size: 14px;
  line-height: 1.6;
  width: 100%;
  padding-left: 5%;
}

.qr-instructions ul {
  margin-top: 8px;
  padding-left: 18px;
}

.open-nequi-app {
  margin-top: 15px;
  display: inline-block;
  background: #d92b7e;
  color: white;
  padding: 10px 20px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.3s;
}

.open-nequi-app:hover {
  background: #b81f68;
}
/* ====== CONTENEDOR DE SOBRES ====== */
#sobre-container.sobre-container {
  width: 100%;
  height: 70%;
  gap: 20px;
  margin: 20px auto;
  background-image: url("data:image/jpeg;base64,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"); /* tu base64 completo */
  background-size: cover;
  background-position: center;
  box-shadow: 0 8px 20px rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* Overlay semitransparente solo para el fondo */
#sobre-container.sobre-container::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--background, rgba(15, 16, 32, 0.93)); /* color semitransparente del fondo */
  z-index: 0; /* debe quedar detrás del contenido */
}

/* Contenido encima del overlay */
#sobre-container.sobre-container > * {
  position: relative;
  z-index: 1; /* contenido se ve normal, sin opacidad */
}

/* Estilo base de los sobres */
.sobre {
  position: relative;
  width: 200px;
  height: 270px;
  cursor: pointer;
  perspective: 1200px; /* Necesario para el efecto 3D */
  transition: transform 0.3s ease;
}
.sobre:hover {
  transform: scale(1.05);
}

/* ====== Mitades del sobre (base sin color) ====== */
.sobre-mitad {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  z-index: 3;
  border: 2px solid rgba(0,0,0,0.6);
  transition: transform 1s ease, opacity 0.6s ease;
  transform-origin: center;
  overflow: hidden;

  /* Textura metálica simulada */
  background-size: 200% 200%;
  background-blend-mode: overlay;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.25), 0 3px 8px rgba(0,0,0,0.35);
}
.sobre-izq {
  left: 0;
  border-right: none;
  border-radius: 10px 0 0 10px;
}
.sobre-der {
  right: 0;
  border-left: none;
  border-radius: 0 10px 10px 0;
}

/* ====== Colores según rareza ====== */
.sobre.oro .sobre-mitad {
  background: linear-gradient(135deg,#fff7c5 0%, #f8d84e 40%, #c49d0a 100%);
}
.sobre.plata .sobre-mitad {
  background: linear-gradient(135deg,#f7f9fa 0%, #cfd3d6 40%, #9b9b9b 100%);
}
.sobre.bronce .sobre-mitad {
  background: linear-gradient(135deg,#f5d1a6 0%, #c08a4a 40%, #804c1f 100%);
}

/* ====== Overlay según rareza ====== */
.sobre.oro .pack-overlay {
  background: radial-gradient(circle at 50% 35%, rgba(255,240,160,0.55), rgba(255,200,50,0.0) 60%);
}
.sobre.plata .pack-overlay {
  background: radial-gradient(circle at 50% 35%, rgba(220,230,240,0.45), rgba(200,200,220,0.0) 60%);
}
.sobre.bronce .pack-overlay {
  background: radial-gradient(circle at 50% 35%, rgba(210,160,100,0.45), rgba(180,110,40,0.0) 60%);
}
/* ====== CONTENEDOR INTERNO CON BORDE ====== */
.sobre-inner {
  position: absolute;
  inset: 0; /* que ocupe todo el sobre */
  border: 3px solid rgba(255,255,255,0.4);
  border-radius: 10px;
  z-index: 1; /* por debajo de las mitades */
  overflow: hidden;
  pointer-events: none;
}

/* Fondo con logo y texto repetido SIEMPRE */
.sobre-inner::before {
  content: "LKWorld • LKWorld • LKWorld • LKWorld • LKWorld • LKWorld • ";
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-45deg);
  background-image: url("https://lkworld.fun/assets/icons/logolk.png");
  background-repeat: repeat;
  background-size: 20px 20px;
  opacity: 0.15;
}

/* ====== BORDES DIFERENTES SEGÚN RAREZA ====== */
.sobre.oro .sobre-inner {
  border-color: #ffd700;
}
.sobre.plata .sobre-inner {
  border-color: #c0c0c0;
}
.sobre.bronce .sobre-inner {
  border-color: #cd7f32;
}


/* Logo central */
.sobre-logo {
  position: absolute;
  top: 40%;
  left: 50%;
  width: 70px;
  transform: translate(-50%, -50%);
  z-index: 3;
}

/* Overlay y precio */
.pack-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255,255,255,0.3), transparent 70%);
  z-index: 4;
  border-radius: 10px;
}
.pack-price {
  position: absolute;
  bottom: 10px;
  width: 100%;
  text-align: center;
  font-weight: bold;
  color: white;
  text-shadow: 0 0 5px black;
  z-index: 5;
}

/* Efecto abrir */
.sobre.abriendo .sobre-izq {
  transform: rotateY(-120deg) translateX(-40px);
  opacity: 0.7;
}
.sobre.abriendo .sobre-der {
  transform: rotateY(120deg) translateX(40px);
  opacity: 0.7;
}
.sobre.abriendo .sobre-logo,
.sobre.abriendo .pack-overlay,
.sobre.abriendo .pack-price {
  opacity: 0;
}

/* ====== FONDOS POR RAREZA ====== */
.sobre.oro {
  background: linear-gradient(135deg,#fff7c5 0%, #f8d84e 40%, #c49d0a 100%);
}
.sobre.plata {
  background: linear-gradient(135deg,#f7f9fa 0%, #cfd3d6 40%, #9b9b9b 100%);
}
.sobre.bronce {
  background: linear-gradient(135deg,#f5d1a6 0%, #c08a4a 40%, #804c1f 100%);
}

/* ====== HOVER ====== */
.sobre:hover{
  transform: translateY(-8px) scale(1.05) rotate(-1.5deg);
  filter: brightness(1.05);
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}

/* ====== LOGO SOBRE ====== */
.sobre-logo{
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  opacity: 0.9;
  z-index: 6;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.4));
}

/* ====== LUZ INTERIOR AL ABRIR ====== */
.sobre::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255,255,230,0.85) 0%, transparent 60%);
  opacity: 0;
  transition: opacity .55s ease;
  pointer-events: none;
  z-index: 4;
}

.sobre.oro .pack-overlay {
  background: radial-gradient(circle at 50% 35%, rgba(255,240,160,0.55), rgba(255,200,50,0.0) 60%);
}
.sobre.plata .pack-overlay {
  background: radial-gradient(circle at 50% 35%, rgba(220,230,240,0.45), rgba(200,200,220,0.0) 60%);
}
.sobre.bronce .pack-overlay {
  background: radial-gradient(circle at 50% 35%, rgba(210,160,100,0.45), rgba(180,110,40,0.0) 60%);
}

/* ====== ESTADO APERTURA ====== */
.sobre.abriendo::after { opacity: 1; animation: flashInner .9s ease forwards; }
.sobre.abriendo .pack-overlay { opacity: 1; }
@keyframes flashInner { 0%{opacity:0} 40%{opacity:1} 100%{opacity:0} }

.sobre.abierto .sobre-izq{ transform:translateX(-140%) rotateY(-35deg); opacity:0; }
.sobre.abierto .sobre-der{ transform:translateX(140%) rotateY(35deg); opacity:0; }

.sobre.oculto{ opacity:0; transform:scale(0.6); pointer-events:none; }

/* ====== PRECIO BAJO CADA SOBRE ====== */
.pack-price {
  text-align: center;
  font-weight: 700;
  color: #fff;
  margin-top: 15px;
  font-size: 14px;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.6));
  transition: transform .3s ease, opacity .3s ease;
  opacity: 0.95;
  z-index: 99;
}
.sobre.oro + .pack-price { color: #ffefb8; }
.sobre.plata + .pack-price { color: #f0f6f9; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5)); }
.sobre.bronce + .pack-price { color: #ffdcb0; }


/* --- BOTONES --- */
.botones{ display:flex;justify-content:left;gap:20px;margin:2px 0px;width:100%; }
.btn-generar{
  padding:12px 20px;font-size:16px;border-radius:10px;border:none;cursor:pointer;transition:.3s;
  background:#3498db;color:#fff;
}
.btn-generar:hover{ background:#2980b9; }

/* --- CARTAS FIFA --- */
.cartas-container{
  display:none;justify-content:center;gap:20px;;
  perspective:1000px; /* para tilt 3D real */
    width: 100%;
  height: 70%;
  margin: 20px auto;
  background-image: url("data:image/jpeg;base64,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"); /* tu base64 completo */
  background-size: cover;
  background-position: center;
  box-shadow: 0 8px 20px rgba(0,0,0,0.6);
      align-items: center;
}
.cartas-container::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--background, rgba(15, 16, 32, 0.93)); /* color semitransparente del fondo */
  z-index: 0; /* debe quedar detrás del contenido */
}
.fifa-card{
  width:170px;
  height:250px;
  position:relative;
  font-family:Arial,sans-serif;
  box-shadow:0 8px 25px rgba(0,0,0,.6);
  border-radius:8px; /* mantiene bordes suaves fuera de la máscara */
  padding:10px;
  text-align:center;
  color:#000;
  opacity:0;
  transform:scale(.5) rotateY(90deg);
  background:linear-gradient(145deg,#f1c40f,#f7e7b2);
  transition: box-shadow .6s ease, opacity .6s ease, transform .6s ease;
  transform-style: preserve-3d;
  overflow: visible;
}

/* pseudo-sombra / brillo interior para simular relieve metálico */
.fifa-card::before{
  content:"";
  position:absolute;
  inset:6% 6% 12% 6%;
  border-radius:10px;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.03));
  mix-blend-mode: overlay;
  z-index:1;
}
.fifa-card > * { position: relative; z-index: 2; } /* para que el contenido quede sobre el brillo */

.fifa-card.mostrar{
  opacity:1; transform:scale(1) rotateY(0deg);
  animation:destelloCarta 1s ease;
}
@keyframes destelloCarta{
  0%{ box-shadow:0 0 0 rgba(255,255,255,0); }
  50%{ box-shadow:0 0 50px rgba(255,255,200,1); }
  100%{ box-shadow:0 8px 25px rgba(0,0,0,.6); }
}

/* Hover base (el giro depende del mouse vía JS, aquí solo realzamos) */

/* Rarezas */
.fifa-card.bronce{ background:linear-gradient(145deg,#a97142,#d7a56c); }
.fifa-card.plata{  background:linear-gradient(145deg,#bdc3c7,#ecf0f1); }
.fifa-card.oro{    background:linear-gradient(145deg,#f1c40f,#f7e7b2); }
.fifa-card.especial{ background:linear-gradient(145deg,#8e44ad,#3498db); color:#fff; }

/* Rating, posición, bandera, foto, nombre, stats */
.fifa-card .rating{ font-size:26px;font-weight:bold;position:absolute;top:10px;left:15px; }
.fifa-card .position{ font-size:14px;font-weight:bold;position:absolute;top:45px;left:18px; }
.fifa-card .country{ width:28px;height:18px;position:absolute;top:65px;left:15px; }
.fifa-card .player-img{
  width:75px;height:75px;border-radius:50%;object-fit:cover;position:absolute;top:25px;right:15px;border:2px solid #fff;
}
.fifa-card .name{ margin-top:120px;font-size:16px;font-weight:bold;text-transform:uppercase; }
.fifa-card .stats{ display:grid;grid-template-columns:1fr 1fr;margin-top:15px;font-size:12px;font-weight:bold;text-align:left;padding:0 10px; }
.fifa-card .stat{ display:flex;justify-content:space-between; }
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

@keyframes slideIn {
  0% {
    transform: translateX(50px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes neonPulse {
  0%, 100% {
    box-shadow:
      0 0 4px 1px var(--vip-border-glow),
      inset 0 0 2px 1px var(--vip-border-glow);
  }
  45% {
    box-shadow:
      0 0 8px 2px var(--vip-border-color),
      inset 0 0 4px 1px var(--vip-border-color);
  }
  50% {
    box-shadow:
      0 0 10px 3px var(--vip-border-color),
      inset 0 0 5px 2px var(--vip-border-color);
  }
  55% {
    box-shadow:
      0 0 8px 2px var(--vip-border-color),
      inset 0 0 4px 1px var(--vip-border-color);
  }
}

@keyframes borderFlow {
  0% {
    background-position: -100% 0;
    opacity: 0;
  }
  45% {
    opacity: 0.15;
  }
  50% {
    opacity: 0.3;
  }
  55% {
    opacity: 0.15;
  }
  100% {
    background-position: 100% 0;
    opacity: 0;
  }
}
.column-shop-details{
  display: flex;
}

/* === INPUT DE FILTRO === */
#filtroUniformes {
    width: 100%;
    padding: 12px 15px; /* Más padding */
    border-radius: 8px;
    border: 1px solid #444; /* Borde más sutil */
    background: #1a1a2f;
    color: white;
    font-size: 1rem;
    box-sizing: border-box; /* Importante para que el padding no aumente el ancho total */
}
#filtroUniformes:focus {
    outline: none;
    border-color: #7f5af0; /* Color de acento al enfocar */
    box-shadow: 0 0 0 3px rgba(127, 90, 240, 0.3);
}
/* === GRID GENERAL === */
.uniform-grid {
    display: grid;
    /* Ajustado minmax para mejor responsividad en pantallas pequeñas */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px; /* Un poco más de espacio */
    justify-items: center;
    width: 100%;
}
/* === TARJETA GENERAL === */
.uniform-card {
    display: flex;
    flex-direction: column; /* Cambiado para mejor estructura interna */
    background: #1e1e2f; /* Un poco más claro que el body */
    border-radius: 12px;
    /* overflow: hidden; No es necesario si el contenido interno se maneja bien */
    padding: 15px;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3); /* Sombra más pronunciada */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
    position: relative;
    box-sizing: border-box;
}
.uniform-card:hover {
    transform: translateY(-5px) scale(1.01); /* Efecto de elevación */
    box-shadow: 0 8px 35px rgba(127, 90, 240, 0.15); /* Sombra con color de acento */
}
/* === CONTENIDO INTERNO DE LA TARJETA === */
.uniform-inner {
    display: flex; /* Por defecto horizontal */
    width: 100%;
    align-items: center; /* Alinear items al inicio */
}

.uniform-card.expanded .uniform-inner {
    flex-direction: column; /* Cambia a vertical cuando está expandida */
    align-items: center; /* Centra contenido cuando está expandida */
}
/* === TARJETA EXPANDIDA === */
.uniform-card.expanded {
    z-index: 999;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1); /* Escala inicial a 1 */
    width: 90vw;
    max-width: 500px; /* Reducido para mejor visualización del detalle */
    padding: 20px;
    box-shadow: 0 10px 50px rgba(0,0,0,0.7);
}
.noticia-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: auto;
  padding: 20px;
}

.noticia-overlay .noticia-expandida {
  max-width: 800px;
  height: 100%;
  background: var(--baseColor);
  color: var(--texto);
  padding: 20px;
  border-radius: 12px;
  position: relative;
  animation: fadeIn 0.3s ease-in-out;
  box-shadow: 0 10px 50px rgba(0,0,0,0.7);
}
.close-noticia{
  color: var(--texto);
}
.noticia-overlay .close-noticia {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  background: transparent;
  color: #000;
  border: none;
  cursor: pointer;
}

.noticia-expandida img:hover {
  transform: scale(1.1);
  cursor: zoom-in;
  transition: transform 0.3s;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

.uniform-card.expanded .uniform-preview {
    margin-right: 0; /* Sin margen a la derecha cuando está expandida */
    margin-bottom: 50px; /* Espacio debajo de la previsualización grande */
    margin-top: -100px;
}
.uniform-card.expanded .circle-preview {
    width: 200px; /* Círculo más grande */
    height: 200px;
    border-width: 5px;
}
.uniform-card.expanded .circle-preview .numero {
    font-size: 4rem; /* Número más grande */
}
.uniform-card.expanded .uniform-info {
    text-align: center; /* Centrar texto de info cuando está expandido */
    width: 100%; /* Ocupar todo el ancho */
}
/* === BOTÓN CERRAR === */
.close-btn {
    position: absolute;
    top: 12px; /* Ajustado */
    right: 12px;
    background: #ff4d4d; /* Rojo más brillante */
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 1rem; /* Tamaño de fuente para el ícono */
    width: 30px; /* Ajustado */
    height: 30px;
    cursor: pointer;
    display: none;
    z-index: 1000;
    line-height: 30px; /* Centrar el ícono '✖' */
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
.uniform-card.expanded .close-btn {
    display: flex; /* Usar flex para centrar el contenido */
    align-items: center;
    justify-content: center;
}
.close-btn:hover {
    background: #ff1a1a;
}
/* === VISTA PREVIA (Izquierda) === */
.uniform-preview {
    margin-top: -40px;
    margin-right: 15px; /* Espacio entre círculo e info */
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0; /* Evitar que se encoja */
}
/* === CÍRCULO PREVIO === */
.circle-preview {
    width: 70px; /* Ligeramente más pequeño para mejor proporción */
    height: 70px;
    border-radius: 50%;
    border: 2px solid #333; /* Borde más sutil */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0,0,0,0.3); /* Sombra interna y externa */
    overflow: hidden; /* Para asegurar que el gradiente no se salga */
    /* transform-origin es center por defecto, lo cual es correcto para la rotación */
}
.numero {
    font-weight: bold;
    position: relative;
    top: 55px;
    color: white;
    font-size: 1.6rem;
    text-shadow: 0px 0px 5px rgba(0, 0, 0, 1), 0px 0px 8px rgba(0, 0, 0, 0.8);
    z-index: 1;
    /* El número no debe rotar con el fondo, está en un span separado */
}
/* === INFO DERECHA === */
.uniform-info {
    flex-grow: 1;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centrar verticalmente el contenido de info */
    min-width: 0; /* Para que flex-grow funcione correctamente con word-break */
}
.uniform-info h3 {
    margin: 0 0 10px; /* Más espacio inferior */
    font-size: 1.1rem; /* Ligeramente más pequeño para no dominar */
    color: #f0f0f0; /* Un blanco menos puro */
    font-weight: 600;
    white-space: nowrap; /* Evitar que el nombre se rompa en dos líneas fácilmente */
    overflow: hidden;
    text-overflow: ellipsis; /* Añadir puntos suspensivos si el nombre es muy largo */
}
/* === BOTONES DE ACCIÓN === */
.uniform-actions {
    display: flex;
    gap: 8px; /* Más espacio entre botones */
    flex-wrap: wrap;
    margin-bottom: 10px;
    justify-content: space-evenly;
}

.uniform-actions button {
    background: #2a2a3f; /* Color base de botones */
    color: #c0c0d0; /* Color de texto más suave */
    border: 1px solid #444; /* Borde sutil */
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.75rem; /* Ligeramente más pequeño */
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
    font-weight: 500;
    width: 30%;
}
.uniform-actions button:hover {
    background: #7f5af0; /* Color de acento al pasar el mouse */
    color: white;
    border-color: #7f5af0;
}
.uniform-actions button:active {
    transform: scale(0.98);
}
/* === CÓDIGO (LABELS) === */
.uniform-info code {
    font-size: 0.7rem; /* Más pequeño */
    background: #161620; /* Fondo más oscuro para el código */
    padding: 5px 8px;
    border-radius: 4px;
    color: #9090a0; /* Color de texto del código */
    display: block;
    margin-top: auto; /* Empujar el código hacia abajo si hay espacio */
    word-break: break-all;
    border: 1px solid #2a2a3f;
}
.uniform-card.expanded .numero {
    font-size: 3rem;
    font-size: 6rem;
    top: 175px;
}
/* Estilos para el overlay cuando una tarjeta está expandida */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 998; /* Detrás de la tarjeta expandida */
    display: none; /* Oculto por defecto */
}
.overlay.active {
    display: block;
}
.categoria-uniformes {
    position: absolute;
    left: 0;
    top: 0;
    padding: 2px 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
/* === RESPONSIVE === */
@media (max-width: 600px) {
  .uniform-grid {
    grid-template-columns: 1fr;
  }
  
  .uniform-card {
    flex-direction: column;
  }
  
  .uniform-preview {
    margin-right: 0;
    margin-bottom: 12px;
  }
}
.search-input-wrapper {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
    gap: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    padding: 10px;
}
#filtroCategoria{
    padding: 12px 15px; /* Más padding */
    border-radius: 8px;
    background: var(--baseColor);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    font-size: 1rem;
    border: none;
    color: var(--texto);
    box-sizing: border-box; /* Importante para que el padding no aumente el ancho total */
}
#main-footer {
    width: 100%;
    background: #1e1e2f;
    color: #f0f0f0;
    padding: 20px 10px;
    font-family: 'Segoe UI', sans-serif;
    border-top: 2px solid var(--texto);
    margin-top: 10px;
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    gap: 12px;
}

.footer-branding p {
    margin: 4px 0;
    font-size: 14px;
}

.footer-branding a {
    color: #48FF31;
    text-decoration: none;
}

.footer-branding a:hover {
    text-decoration: underline;
}

.footer-social {
    display: flex;
    gap: 16px;
    margin-top: 10px;
}

.footer-social a {
    color: #f0f0f0;
    font-size: 24px;
    transition: color 0.3s ease;
}

.footer-social a:hover {
    color: #48FF31;
}

/*
/* Mejor animación de apertura en móvil */

@media (min-width: 992px) {
    .server-header{
        width: 42%;
    }
    .server-actions{
        width: 35%;
    }
    .detalles{
        flex-direction: column;
    }
}
@media (max-width: 992px) {
      .footer-content {
        flex-direction: row;
        text-align: left;
        padding: 0 20px;
    }

    .footer-branding {
        flex: 1;
        align-items: flex-start;
    }

    .footer-social {
        justify-content: flex-end;
    }
  .column-shop-details{
      flex-direction: column;
      align-items: center;
  }
  .qr-instructions{
    padding-left: 0px;
  }
   .open-nequi-app{
    width: 100%;
   }
    .nequi-body {
      flex-direction: column;
    }
    .vip-border-anim::after {
      animation: none;
    }
    .content4 .tiktok-embed{
        width: 100%;
    }
    li {
        flex-wrap: wrap;
    }
    .div1{
        width: 100%;
    }
    .div2{
        width: 100%;
    }
    .discord-link {
        display: none;
    }
    .select-individual {
        max-width: 60%;
    }
    .discord-button {
        display: inline-block;
        background: none;
        border: none;
        font-size: 18px;
        cursor: pointer;
        color: #007bff;
    }
    .server-card.full-view {
        height: auto;
        flex-direction: column;
    }
    .server-card.full-view div:nth-child(1) {
        order: 2; /* Mueve el primer div al final */
    }
    
    .server-card.full-view div:nth-child(2) {
        order: 1; /* Mueve el segundo div al inicio */
    }
    .detalles .btn{
        width: 98%;
        height: 40%;
    }
    .panel-izquierdo {
        width: 100%;
        min-height: none;
        height: auto;
        justify-content: space-around;
    }
    .panel-derecho {
        display: flex;
        flex-direction: column-reverse;
        flex-wrap: wrap; /* Permite que los elementos pasen a una nueva línea */
        width: 100%;
    }
    .panel-derecho div:nth-child(3) {
        order: 3;
        width: 100%; /* Hace que el tercer div se extienda y baje a la siguiente línea */
    }
    .server-img-container img{
      margin-top: 30px;
      margin-bottom: 30px;
    }
    .inf-stats{
        flex-direction: column;
        align-items: center;
    }
    .config-btn{
        display: block;
        width: 30px;
        height: 25px;
        font-size: 80%;
    }
    .servers-container {
        margin: 0px auto;
        margin-left: 0;
        padding: 0;
        padding-top: 20px; /* Usa un valor fijo o relativo en lugar de % */
        padding-bottom: 20px; /* Usa un valor fijo o relativo en lugar de % */
        height: auto; /* Evita problemas de altura excesiva */
        min-height: 100vh; /* Asegura que el contenedor tenga al menos el alto de la pantalla */
    }
    .servers-container h1 {
        font-size: 130%;
    }
    .team-container {
        display: flex;
        flex-direction: column;
        padding: 0px;
        width: auto;
        gap: 10px;
        align-items: flex-start;
        margin: 10;
    }
    .server-name{
        font-size: 95%;
    }
    .server-card {
        flex-direction: column;
        align-items: flex-start;
        height: auto;
        max-height: none;
        flex-wrap: wrap;
        padding: 5px;
    }
    .teams-card {
        flex-direction: row !important;
    }
    .token-input {
        width: 100%;
        min-width: none;
        font-size: 10px;
        
    }
    .token-container{
        padding:  0px;
        width: 95%;
        min-height: 0px;
        max-height: 10px;
    }
    .server-header{
        min-height: 0px;
        max-height: 20px;
        
    }
    .button-group {
        justify-content: flex-start;
        width: 100%;
    }

    .server-ip {
        width: 100%;
        text-align: left;
        margin-top: 0px;
    }
   
    
    .label-informe{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* Evita el padding al abrir el menú en móviles */
    .noticia-overlay{
      padding: 0px;
    }
    .container {
        flex-direction: column;
        text-align: center;
    }
    .iframe-container {
        width: 95%;
    }
    .discord-notice {
        font-size: 12px;
        color: #bbb;
        margin-top: 5px;
    }
    .discord-iframe,
    .discord-iframe-container {
        display: none;
    }
    .login-container {
        margin-top: -150px !important;
    }
    body {
        padding-left: 15px;
        padding-top: 70px;
    }
    .server-detalle {
        flex-direction: column;
    }
    .content {
        flex-direction: column;
    }
    .row-inf {
        flex-direction: column;
        padding: 5px;
        gap: 10px;
        padding-bottom: 10px;
    }
    .row-inf > .descr-inf{
        width: 100%;
        font-size: 80%;
        margin-left: 0px !important;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    }
    .img-div{
        width: 150px;
        height: 150px;
        gap: 20px;
    }

    .news, .games {
        width: 100%;
    }

    #ruletaCanvas{
        width: 60%;
    }

    .head-botons button {
        font-size: 10 !important;
        height: auto !important;
    }
    #sidebar {
        transform: translateX(-200px); /* Oculta el menú fuera de pantalla por defecto */
        margin-left: 200px;
        width: 150px;
        padding-top: 70px;
    }
    #sidebar.collapsed {
        margin-left: 0px;
    }
    #sidebar.open {
        transform: translateX(0); /* Muestra el menú */
    }

    body.menu-open {
        padding-left: 20px; /* No hay padding cuando el menú está abierto en pantallas pequeñas */
    }

    #open-menu {
        top: 6px;
        display: block; /* Muestra el botón de abrir */
    }

    #close-menu {
        display: block; /* Siempre visible cuando el menú está abierto en responsive */
    }
    main{
        padding: 10px;
        width: 100%;
        margin-left: -8px;
    }
    .inf-stats{
        padding-left: 20px;
    }
     .chart-container h3 {
    text-align: center;
    width: 100%;
     }
     .top-container {
        width: 100% !important;
     }
     .extra-container {
        width: 100%;
     }
     .chart-container {
        width: 100%;
     }
     .btn-jugar{
        position: static;
     }
     .ctn-img{
        margin-left: 0px;
        position: static;
        width: auto;
        height: auto;
     }
     .imagen-desbordada{
        transform:none;
        position: static;
     }
     header{
        left: 5px;
        right: auto;
        width: 97%;
        justify-content: space-between;
     }
     .descr-inf h2{
        text-align: center;
        font-size: 170%;
        margin-bottom: 5px;
     } 
     .descr-inf p {
        margin-bottom: 0px;
        font-size: 70%;
    }
    .tabla-posiciones-liga th, .tabla-posiciones-liga td {
        font-size: 70%;
    }
    .stats-grid {
        min-width: 300px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        padding: 10px;
        border-radius: 10px;
    }
    .selector-contenedor{
        width: 100%;
    }
    .content4{
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
        margin-left: 0px;
    }
    .server-actions{
      align-items: center;
      justify-content: flex-end;
    }
    .uniform-preview-only{
      width: 92%;
      margin-bottom: 20px;
    }
}
@keyframes flickerGlow {
  0% { box-shadow: 0 0 0px transparent; opacity: 0.2; }
  10% { box-shadow: 0 0 5px var(--chatColor); opacity: 1; }
  20% { box-shadow: 0 0 2px transparent; opacity: 0.4; }
  30% { box-shadow: 0 0 8px var(--chatColor); opacity: 0.9; }
  40% { box-shadow: 0 0 0px transparent; opacity: 0.3; }
  60% { box-shadow: 0 0 10px var(--chatColor); opacity: 1; }
  80% { box-shadow: 0 0 10px var(--chatColor); opacity: 1; }
  100% { box-shadow: 0 0 10px var(--chatColor); opacity: 1; }
}