/* ==========================================================================
   1. VARIABLES GLOBALES (Configuración de colores y medidas)
   ========================================================================== */
:root {
    /* Colores de Fondo */
    --bg-sidebar: #2b2b2b;
    --bg-main: #1d1c1c;
    
    /* Colores de Bordes y Líneas */
    --border-sidebar: #4e4e4e;
    
    /* Colores de Texto */
    --text-white: #ffffff;
    --text-gray: #b0b0b0;
    
    /* Colores de Acento (TikSpark Purple) */
    --accent-purple: #5c1d80;
    --accent-light: #8a2be2;
    --hover-gray: #424242;
    
    /* Medidas Fijas */
    --nav-item-height: 33px;
    --sidebar-width: 200px;
}

/* ==========================================================================
   2. RESET Y BASES (Limpieza del navegador)
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-main);
    height: 100vh;
    overflow: hidden;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Obliga a los elementos de formulario a usar la fuente del body */
textarea, input, select, button {
    font-family: inherit;
}

/* ==========================================================================
   3. PERSONALIZACIÓN DE SCROLLBARS (UNIFICADOS PARA TODA LA APP)
   ========================================================================== */

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #2a2a2a; 
}

::-webkit-scrollbar-thumb {
    background-color: var(--accent-purple);
    border-radius: 10px;
}

/* ==========================================================================
   4. ESTRUCTURA MAESTRA (Layout principal)
   ========================================================================== */
#app-container {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    height: 100vh;
}

/* ==========================================================================
   5. SIDEBAR - CONTENEDOR, PERFIL Y NAVEGACIÓN
   ========================================================================== */
#sidebar {
    background-color: var(--bg-sidebar);
    border-right: 1px solid var(--border-sidebar);
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

.sidebar-separator {
    height: 1px;
    background-color: var(--border-sidebar);
    width: 100%;
    flex-shrink: 0;
}

.sidebar-profile-container {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 12px;
    height: 75px;
    flex-shrink: 0;
}

.sidebar-avatar {
    width: 44px;
    height: 44px;
    background-color: #b0b0b0;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-avatar i {
    font-size: 20px;
}

.sidebar-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Contenedor de la columna de texto (Evita desbordamiento) */
.sidebar-info-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    min-width: 0; 
    overflow: hidden;
}

.sidebar-username-text {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-white);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

#sidebar-connect-btn {
    box-sizing: border-box;
    height: 26px;
    background-color: #2a2a2a;
    border: 1px solid #4d4d4d;
    border-radius: 6px;
    color: white;
    font-size: 13px;
    padding: 0 20px; 
    margin-top: 5px;
    cursor: pointer;
    
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px; 
    white-space: nowrap;

    /* --- EL AJUSTE PARA TUS 3PX DE DESFASE --- */
    line-height: 1;      /* Forzamos a que el texto no tenga aire extra */
    padding-top: 0;      /* Reseteamos por si acaso */
    padding-bottom: 2px; /* Empujamos el texto hacia arriba compensando el fondo */
}

#sidebar-connect-btn:disabled {
    background-color: #232323; /* Más oscuro */
    border-color: #373737;
    color: #4e4e4e;               /* Texto grisáceo */
}

#sidebar-connect-btn i {
    font-size: 11px;
}

#sidebar-connect-btn:hover {
    background-color: #333333;
    border-color: #494949;
}

.sidebar-nav {
    padding-top: 14px;
    padding-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    overflow-y: auto; 
    overflow-x: hidden;
}

.nav-item {
    height: var(--nav-item-height);
    min-height: var(--nav-item-height); 
    flex-shrink: 0; 
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.1s;
    font-size: 18px;
    color: var(--text-white);
}

.nav-item:hover {
    background-color: var(--hover-gray);
}

.nav-item.active {
    background-color: var(--accent-purple);
}

.menu-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 7px;
    margin-bottom: 5px;
    width: 100%;
    opacity: 0.7;
    flex-shrink: 0;
}

.menu-separator::before,
.menu-separator::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: var(--border-sidebar);
}

.menu-separator i {
    color: var(--accent-light);
    font-size: 18px;
    padding: 0 10px;
}

/* ==========================================
   SECCIÓN: SIDEBAR FOOTER (FIJO ABAJO)
   ========================================== */
#sidebar-footer {
    flex-shrink: 0; 
    background-color: var(--bg-sidebar);
    width: 100%;
}

.footer-content {
    padding: 15px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.sidebar-btn-secondary {
    width: 100%;
    height: 35px;
    background-color: #2b2b2b;
    border: 1px solid #444;
    color: var(--text-white);
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.sidebar-btn-secondary:hover {
    background-color: #a4262c;
    border-color: #a4262c;
}

.app-version-text {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-white);
    opacity: 0.9;
    letter-spacing: 0.5px;
}

/* ==========================================================================
   6. LAYOUT DEL CONTENIDO Y NAVEGACIÓN SPA (SIN !IMPORTANT)
   ========================================================================== */
#main-content {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

#main-scroll-area {
    height: 100%;
    overflow-y: auto; 
    overflow-x: hidden;
    padding-top: 30px; 
}

.content-wrapper {
    margin-left: 30px; 
    margin-right: 30px; 
    width: calc(100% - 60px);
    max-width: 1200px; 
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.main-section {
    display: none;
}

.main-section.active {
    display: block;
}

/* ==========================================================================
   7. ESTRUCTURA GLOBAL FIJA (Header Cristalizado)
   ========================================================================== */
#global-header-fixed {
    position: fixed;
    top: 0;
    right: 0;
    width: calc(100% - var(--sidebar-width)); 
    z-index: 9999;
    pointer-events: none; 
    display: flex;
    flex-direction: column;
}

.discord-global-link, 
#update-progress-container, 
.util-square-btn { 
    pointer-events: auto; 
}

#top-right-utilities {
    display: flex;
    justify-content: flex-end;
    margin-top: 25px; 
    padding-right: 40px;
}

.top-util-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.util-square-btn {
    width: 45px;
    height: 45px;
    background: rgba(30, 31, 34, 0.6);
    border: 1px solid rgba(88, 101, 242, 0.3);
    border-radius: 10px;
    color: #949ba4;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    backdrop-filter: blur(8px);
    transition: all 0.3s ease;
}

.util-square-btn:hover {
    background: rgba(88, 101, 242, 0.15);
    border-color: #5865F2;
    color: #fff;
    transform: translateY(-2px);
}

.discord-global-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    background: rgba(30, 31, 34, 0.6); 
    padding: 0 18px;
    border-radius: 10px;
    border: 1px solid rgba(88, 101, 242, 0.3);
    backdrop-filter: blur(8px);
    transition: all 0.3s ease;
    height: 45px;
    box-sizing: border-box;
}

.discord-text { 
    display: flex; 
    flex-direction: column; 
    align-items: flex-end; 
    line-height: 1.2; 
}

.discord-text span { 
    color: #949ba4; 
    font-size: 11px; 
    font-weight: 600; 
    text-transform: uppercase; 
}

.discord-text strong { 
    color: #ffffff; 
    font-size: 14px; 
}

.discord-global-link i { 
    color: #5865F2; 
    font-size: 28px; 
}

/* --- BARRA DE ACTUALIZACIÓN --- */
#update-progress-container {
    margin: 15px 45px 0 25px;
    background-color: #161616;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 15px 20px;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    pointer-events: auto;
}

.update-header-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.update-icon-square {
    background-color: var(--accent-purple);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.update-icon-square i { font-size: 14px; color: white; }
#update-status-text { color: #eee; font-size: 14px; font-weight: bold; }
#update-percent-text { margin-left: auto; color: #d886ff; font-weight: bold; font-size: 14px; }

.update-footer-text {
    font-size: 11px;
    color: #888;
    margin: 0 0 5px 40px; 
}

.update-progress-track {
    background-color: #333;
    height: 5px;
    border-radius: 10px;
    overflow: hidden;
    margin-left: 40px; 
    margin-bottom: 8px; 
}

#update-progress-fill {
    background-color: var(--accent-light);
    width: 0%;
    height: 100%;
    transition: width 0.3s ease;
}

/* ==========================================================================
   COMPONENTES GLOBALES (Limpios y sin líneas divisorias)
   ========================================================================== */

.section-container {
    background-color: #212121;
    border: 1px solid #5c1d80;
    border-radius: 10px;
    padding: 30px; 
    margin-bottom: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    width: 100%;
}

/* 1. Título de la sección */
.section-title {
    color: #8a2be2; 
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 25px;
    display: block;
    filter: none;
    opacity: 1;
}

.section-subtitle {
    color: var(--text-gray);
    font-size: 15px;
    margin-bottom: 25px; 
    display: block; 
}

.section-container h2 {
    color: var(--accent-light);
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.section-container p {
    color: #b0b0b0;
    font-size: 14px;
    margin-bottom: 25px;
}

/* Gestión de secciones persistentes */
.section-view {
  width: 100%;
  height: 100%;
}

/* Solo ocultamos cuando tiene la clase hidden */
.section-view.hidden {
  display: none;
}

/* Mostramos cuando tiene la clase active */
.section-view.active {
  display: block;
}

/* Optimización de imágenes para evitar saltos de renderizado */
img {
  content-visibility: auto;
}

.info-box {
    width: fit-content;
    background-color: rgba(92, 29, 128, 0.1); 
    border-left: 4px solid #5c1d80;
    border-radius: 6px; 
    padding: 15px 20px;
    margin-top: 25px;
}

.info-box ul {
    list-style: none;
}

.info-box li {
    color: #cccccc;
    font-size: 14px;
}

.info-box-gray {
    width: fit-content;
    background-color: #2c2c2c; 
    border-left: 4px solid #424242;
    border-radius: 6px; 
    padding: 15px 20px;
    margin-bottom: 25px;
}

.info-box-gray p {
    color: #d9d9d9;
    margin-bottom: 0;
}

/* ==========================================================================
   GRADIENTES Y COLORES DE RANGO (REUTILIZABLES - FIX WARNINGS)
   ========================================================================== */

.bg-free { background: linear-gradient(90deg, #0095cc, #00c3ff); }
.bg-premium { background: linear-gradient(90deg, #0d8a40, #10c35b); }
.bg-plus { background: linear-gradient(90deg, #b02327, #ed4245); }

.text-gradient-free {
    background: linear-gradient(90deg, #0095cc, #00c3ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.text-gradient-premium {
    background: linear-gradient(90deg, #0d8a40, #10c35b);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.text-gradient-plus {
    background: linear-gradient(90deg, #b02327, #ed4245);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-yellow { color: #ddaa1e; font-weight: bold; }

.rank-tag-label {
    color: white;
    font-weight: 800;
    font-size: 11px;
    padding: 4px 12px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
}

/* ==========================================
   ESTILOS DEL MODAL BASE (TikSpark Pro)
   ========================================== */
.ts-modal-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(50, 50, 50, 0.3);
    z-index: 12000;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px); /* Opcional: un poco de desenfoque solo en el contenido */
}

.ts-modal-overlay.show {
    display: flex;
}

/* El cuadro principal */
.ts-modal-box {
    background-color: #2a2a2a;
    border: 1px solid #4d4d4d;
    border-radius: 8px;
    width: 420px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.4);
    overflow: hidden;
}

/* Header */
.ts-modal-header {
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #ffffff;
    font-weight: normal;
    font-size: 18px;
}

.ts-modal-x {
    background: none; border: none; color: #888;
    font-size: 20px; cursor: pointer;
}
.ts-modal-x:hover { color: #fff; }

/* Línea divisoria */
.ts-modal-divider {
    height: 1px;
    background-color: #4d4d4d;
    width: 100%;
}

/* Cuerpo */
.ts-modal-body {
    padding: 30px 25px;
    color: #ffffff;
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
}

/* Footer (Contenedor de botones) */
.ts-modal-footer {
    padding: 0 20px 20px 20px; /* Espacio lateral y abajo */
    display: flex;
    justify-content: center;
    gap: 12px;
}

/* ESTILO DE BOTONES (2a2a2a / 4d4d4d) */
.ts-modal-btn {
    background-color: #2a2a2a;
    border: 1px solid #4d4d4d;
    color: #ffffff;
    border-radius: 6px;
    padding: 8px 25px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: none; /* No obliga a mayúsculas */
    font-weight: normal;
    min-width: 100px;
    height: 38px;
}

.ts-modal-btn:hover {
    background-color: #333333;
    border-color: #494949;
}

/* Botón secundario (Opcional por si quieres que sea más oscuro) */
.ts-modal-btn-secondary {
    opacity: 0.7;
}

/* ==========================================================================
   CHECKBOX GLOBAL - ESTILO TIKSPARK (MORADO & GLOW)
   ========================================================================== */

input[type="checkbox"] {
    /* 1. Resetear el estilo nativo de Windows */
    -webkit-appearance: none;
    appearance: none;
    
    /* 2. Medidas y Colores Base */
    width: 20px;
    height: 20px;
    background-color: #2a2a2a;
    border: 2px solid #4d4d4d;
    border-radius: 4px;
    
    /* 3. Comportamiento */
    cursor: pointer;
    position: relative;
    
    /* --- CORRECCIÓN PARA CENTRADO PERFECTO --- */
    display: inline-flex;      /* Cambiado para poder usar align y justify */
    align-items: center;       /* Centra verticalmente el contenido (la palomita) */
    justify-content: center;    /* Centra horizontalmente el contenido */
    /* ----------------------------------------- */

    vertical-align: middle;
    transition: all 0.2s ease-in-out;
    outline: none;
    box-sizing: border-box;
}

/* --- ESTADO: HOVER (Pasar el mouse) --- */
input[type="checkbox"]:hover {
    border-color: #666;
}

/* --- ESTADO: FOCUS/ACTIVE (El brillo tipo Interactive) --- */
input[type="checkbox"]:focus {
    border-color: var(--accent-light);
    box-shadow: 0 0 8px rgba(138, 43, 226, 0.6); /* Brillo morado */
}

/* --- ESTADO: CHECKED (Cuando está marcado) --- */
input[type="checkbox"]:checked {
    background-color: var(--accent-light);
    border-color: var(--accent-light);
}

/* --- EL "CHECK" (La palomita blanca dibujada) --- */
input[type="checkbox"]:checked::after {
    content: '';
    
    /* --- CORRECCIÓN DE POSICIÓN --- */
    position: relative;    /* Cambiado de absolute a relative para que Flexbox lo controle */
    /* Eliminados: left y top manuales */
    /* ------------------------------ */
    
    /* Dibujamos una L virada */
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    
    /* Solo mantenemos la rotación */
    transform: rotate(45deg);

    /* Pequeño ajuste visual: al rotar una L, el peso visual sube. 
       Este margen compensa ese efecto óptico para que se vea centrado a la vista. */
    margin-bottom: 2px; 
}

/* --- OPCIONAL: Estilo para cuando está deshabilitado --- */
input[type="checkbox"]:disabled {
    background-color: #1a1a1a;
    border-color: #333;
    cursor: not-allowed;
    opacity: 0.6;
}

/* ==========================================================================
   LINKS GLOBALES - ESTILO TIKSPARK (MORADO & GLOW)
   ========================================================================== */
a {
    color: #8A2BE2; /* Morado TikSpark */
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s;
}

a:hover {
    text-decoration: none;
    opacity: 0.8;
}

/* Para que los iconos dentro de los links hereden el color automáticamente */
a i {
    color: inherit;
}

/* ==========================================================================
   TOAST GLOBALES - ESTILO TIKSPARK (MORADO & GLOW)
   ========================================================================== */
.ts-toast {
    color: white;
    padding: 12px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    gap: 10px;
    animation: slideInToast 0.3s ease-out forwards;
}

/* Éxito (Verde) */
.ts-toast.success { background-color: #2e7d32; }

/* Advertencia (Amarillo/Naranja) */
.ts-toast.warning { background-color: #ffa000; color: #000; } 

/* Error (Rojo) */
.ts-toast.error { background-color: #c62828; }

@keyframes slideInToast {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* ==========================================================================
   INPUT NUMÉRICO GLOBALES - ESTILO TIKSPARK (CORREGIDO)
   ========================================================================== */

.ts-unit-field {
    display: flex;
    align-items: center;
    background-color: #2a2a2a;
    border: 1px solid #4d4d4d;
    border-radius: 6px;
    height: 38px;
    /* Quitamos overflow: hidden para que no "corte" las flechas si el espacio es justo */
    overflow: visible; 
    transition: all 0.2s ease;
    position: relative;
}

.ts-unit-field:focus-within {
    border-color: #8a2be2;
    box-shadow: 0 0 8px rgba(138, 43, 226, 0.4);
}

.ts-unit-field input {
    flex: 1;
    background: transparent !important;
    border: none !important;
    color: #ffffff;
    /* CAMBIO CLAVE: Bajamos el padding. 8px a la izquierda y solo 2px a la derecha 
       para dejarle espacio a las flechas */
    padding: 0 8px 0 10px; 
    font-size: 14px;
    justify-content: center;
    outline: none;
    height: 100%;
    width: 100%; /* Para que ocupe todo el ancho disponible */
    box-sizing: border-box;
}

.ts-unit-field span {
    color: #ffffff;
    font-size: 14px;
    padding-right: 15px;
    user-select: none;
}

/* FLECHAS */
.ts-unit-field input::-webkit-inner-spin-button,
.ts-unit-field input::-webkit-outer-spin-button {
    filter: invert(1);
    /* CAMBIO CLAVE: Reducimos el margen de la flecha al mínimo 
       para que no se empuje hacia afuera del cuadro */
    margin-right: 2px; 
    cursor: pointer;
    /* Forzamos a que siempre tengan un ancho mínimo para que no desaparezcan */
    min-width: 15px;
}

/* ==========================================================================
   SELECTORES DESPEGABLES GLOBALES - ESTILO TIKSPARK PRO
   ========================================================================== */
.ts-select-container {
    position: relative;
    width: auto;
    display: inline-block;
    min-width: 150px;
    user-select: none;
}


/* CON JS */
.ts-select-header {
    background-color: #2a2a2a;
    border: 1px solid #4d4d4d;
    border-radius: 6px;
    /* CIRUGÍA AQUÍ: Cambiamos height por min-height y permitimos que crezca */
    min-height: 38px; 
    height: auto; 
    padding: 4px 15px 4px 15px; 
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    color: #fff;
    font-size: 14px;
    transition: border-color 0.2s;
}

/* Esto hace que el cuadro de arriba sea idéntico a los de la lista */
.ts-select-header > span {
    display: flex;
    align-items: center;
    gap: 12px; /* Mismo espacio que en la lista de regalos */
    flex: 1;
    height: 100%;
}

/* Forzamos que cualquier imagen que suba al header mida lo mismo que en la lista */
.ts-select-header span img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Estilo para mensajes de "No hay datos" dentro de los selectores */
.ts-select-no-data {
    color: #757575;
    font-size: 14px;
    height: 26px; /* ALTURA REAL DE TIKSPARK */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Para que el placeholder del selector de regalos se vea gris */
.ts-select-header > span.placeholder {
    color: #757575;
}


/* 1. La flecha en estado normal */
.ts-select-header i {
    color: #8a2be2; 
    font-size: 12px;
    transition: transform 0.3s ease; /* <--- ESTO hace que gire suave */
}

/* 2. La flecha cuando el menú está abierto */
.ts-select-container.active .ts-select-header i {
    transform: rotate(180deg); /* <--- ESTO la hace mirar hacia arriba */
}

/* LISTA DESPLEGABLE */
.ts-select-list {
    position: absolute;
    top: 43px;
    left: 0;
    width: 100%;
    background-color: #2a2a2a;
    border: 1px solid #4d4d4d;
    border-radius: 8px;
    z-index: 10000;
    
    /* MODIFICACIÓN: Sin padding y sin scroll */
    padding: 0; 
    overflow: hidden; 

    box-shadow: 0 10px 25px rgba(0,0,0,0.6);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.2s ease;
}

.ts-options-viewport {
    max-height: 250px;
    overflow-y: auto;
    padding: 5px;      /* El padding va AQUÍ para proteger los items */
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* MOSTRAR CUANDO ESTÁ ACTIVO (Sin !important) */
.ts-select-container.active .ts-select-list {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

/* CADA OPCIÓN (Estilo Cápsula) */
.ts-select-item {
    padding: 0 12px;
    color: #ffffff;
    font-size: 14px;
    cursor: pointer;
    border-radius: 6px; /* Redondeado para que parezca un botón interno */
    transition: all 0.2s;
    height: 38px; 
    display: flex;
    align-items: center; /* Centra el texto verticalmente */
    flex-shrink: 0; /* EVITA QUE SE APLASTEN */
}

.ts-select-item:hover {
    background-color: #4d4d4d;
    color: #ffffff;
}

/* Si el contenedor de tags está vacío, muestra el placeholder */
.ts-tags-container:empty::before {
    content: 'Selecciona...';
    color: #757575;
    font-size: 14px;
    pointer-events: none;
    margin-left: 11px
}

/* OPCIÓN SELECCIONADA */
.ts-select-item.selected {
    background-color: #5c1d80; /* Morado sólido como tu captura */
    color: #ffffff;
}

/* ==========================================================================
   CONTENEDOR DE ACCIONES SELECCIONADAS - ESTILO TIKSPARK
   ========================================================================== */
/* Contenedor de las cápsulas dentro del header */
.ts-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    flex: 1;
    margin-left: -11px;
}

/* La Cápsula (Tag) */
.ts-tag {
    background-color: #323235;
    color: white;
    padding: 0 8px;      /* Cambiamos el padding vertical a 0 porque usaremos height */
    border-radius: 4px;
    font-size: 12px;
    display: flex;
    align-items: center;  /* Centrado vertical perfecto */
    justify-content: center; /* Centrado horizontal (opcional) */
    gap: 8px;
    height: 28px;        /* Altura fija solicitada */
    box-sizing: border-box; /* Asegura que el borde/padding no rompa los 28px */
}

/* El botón X de la cápsula */
.ts-tag-close {
    width: 15px;
    height: 15px;
    background-color: #ffffff;
    color: #1e1e1e;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s;
    
    /* AJUSTES DE CENTRADO */
    line-height: 1;      /* Quita el espacio de bloque de la letra */
    padding-bottom: 1.5px; /* Ajuste manual: si la X se ve muy arriba, usa padding-top. 
                            Si se ve muy abajo (lo común), usa padding-bottom. */
}

.ts-tag-close:hover {
    background-color: #ff4d4d; /* Rojo al borrar */
    color: white;
}

/* =========================================
   SELECTOR DE REGALOS - FOTO + NOMBRE + PRECIO
   ========================================= */
/* Contenedor de cada regalo en la lista */

#ev-gift-opts-container {
    display: flex;
    flex-direction: column;
    gap: 5px;      /* <--- SEPARACIÓN DE 5PX ENTRE CADA REGALO */
}

.gift-opt-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0px 15px;
    height: 38px;
    cursor: pointer;
    transition: background 0.2s;
    border-radius: 6px;
    box-sizing: border-box;
    flex-shrink: 0; /* EVITA QUE SE APLASTEN */
}

.gift-opt-item:hover {
    background-color: #3a3a3a;
}

/* Imagen del regalo */
.gift-img-item {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Columna de texto (Nombre + Meta) */
.gift-info-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1;
}

.gift-name-text {
    color: #ffffff;
    font-size: 13px;
    font-weight: normal;
}

.gift-meta-text {
    color: #aaaaaa;
    font-size: 12px;
}

/* ESTADO SELECCIONADO (Morado TikSpark) */
/* Añadimos ambos IDs para que el morado funcione en el modal y en el simulador */
#ev-gift-opts-container .gift-opt-item.selected,
#sim-gift-opts-container .gift-opt-item.selected,
#ev-emote-opts-container .gift-opt-item.selected {
    background-color: #5c1d80;
}

/* Estilo para botones de eliminación masiva cuando están apagados (0) */
.ae-btn-action:disabled {
    background-color: #232323; /* Más oscuro */
    border-color: #373737;
    color: #4e4e4e;               /* Texto grisáceo */
}

/* =========================================
   BLOQUE DE SECCIONES Y FUNCIONES PREMIUM - PREMIUM PLUS
   ========================================= */

/* Base para posicionamiento */
.lock-premium, .lock-premium-plus { 
    position: relative; 
}

/* Estilo base del Tag (Oculto) */
.rank-lock-badge {
    display: none;
    position: absolute;
    top: 25px;
    right: 25px;
    z-index: 100;

    /* AJUSTES DE TAMAÑO */
    padding: 8px 20px;       /* Más relleno interno */
    font-size: 13px;         /* Texto más grande */
    letter-spacing: 1px;     /* Espaciado de letras profesional */
    border-radius: 20px;     /* Bordes más redondeados */
    min-width: 140px;        /* Ancho mínimo para que destaque */
    justify-content: center; /* Centrar contenido */
}

/* Estado bloqueado: Control de eventos y selección */
/* Usamos el ID del contenedor padre para ganar especificidad sin !important */
#main-section-container .locked-section {
    pointer-events: none;
    user-select: none;
}

/* Efecto de "apagado" solo a los hijos que NO sean la etiqueta */
.locked-section > *:not(.rank-lock-badge) {
    opacity: 0.8;
    filter: grayscale(0.2);
}

/* Mostrar la etiqueta con brillo total y color */
.locked-section .rank-lock-badge {
    display: inline-flex;
}

/* =========================================
   SUBMENÚ SIDEBAR (ESTILO GLOBAL TIKSPARK)
   ========================================= */

/* 1. El contenedor: Se pega al padre y crea la línea morada lateral */
.sidebar-submenu {
    display: none;
    background-color: #1d1c1c;
    margin-top: -10px; 
    border-left: 3px solid #5c1d80; /* El borde que envuelve a los hijos */
    border-radius: 6px;
    padding: 0;
    width: 100%;
}

.sidebar-submenu.open {
    display: block;
}

/* 2. Los hijos: Centrados horizontalmente y sin aire extra */
.sub-nav-item {
    height: 33px; /* Misma altura que nav-item */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center; /* Texto centrado horizontalmente */
    font-size: 14px;
    color: #ffffff;
    cursor: pointer;
    margin: 0;
    transition: background-color 0.1s;
}

.sub-nav-item:hover {
    background-color: #6d6d6d;
    border-radius: 6px;
}

/* 3. Eliminar el espacio entre el padre y el primer hijo */
.nav-item.active {
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* =========================================
   SISTEMA DE SCROLL Y TEMBLOR GLOBAL
   ========================================= */

/* AIRE SUPERIOR GLOBAL: 
   Cualquier elemento con clase 'section-container' dejará 30px de aire al bajar */
.section-container {
    scroll-margin-top: 30px;
}

/* ANIMACIÓN TEMBLOR (SHAKE) */
@keyframes shake-focus {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.shake-active {
    animation: shake-focus 0.5s ease-in-out;
    border: 2px solid #8A2BE2 !important; /* Brillo morado durante el temblor */
}.login-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}

.login-overlay.active { display: flex; }

.login-background {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, #1a0b2e 0%, #2e1a47 50%, #0f0518 100%);
    z-index: 1;
}

.login-card {
    position: relative;
    z-index: 2;
    background-color: #1e2124;
    padding: 40px;
    border-radius: 8px;
    width: 380px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    text-align: center;
    border: 1px solid #2f3136;
}

.login-card h2 { color: white; margin: 0 0 10px 0; font-size: 24px; }
.login-subtitle { color: #b9bbbe; font-size: 14px; margin-bottom: 30px; }

.login-form-group { text-align: left; margin-bottom: 20px; position: relative; }
.login-form-group label { display: block; color: #b9bbbe; font-size: 12px; font-weight: bold; margin-bottom: 8px; text-transform: uppercase; }

.login-form-group input {
    width: 100%;
    padding: 12px;
    background-color: #2f3136;
    border: 1px solid #202225;
    border-radius: 4px;
    color: white;
    font-size: 14px;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.login-form-group input:focus { outline: none; border-color: #5c1d80; }

.password-toggle {
    position: absolute;
    right: 12px;
    bottom: 12px;
    color: #72767d;
    cursor: pointer;
}

#btn-login-action {
    width: 100%;
    padding: 12px;
    background-color: #5c1d80;
    color: white;
    font-weight: bold;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 15px;
    margin-top: 10px;
    transition: background-color 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

#btn-login-action:hover { background-color: #430e61; }
.login-footer-links { margin-top: 25px; font-size: 13px; color: #72767d; }
.login-footer-links a { color: #00b0f4; text-decoration: none; }
.login-version-tag { position: absolute; bottom: 40px; left: 40px; color: #ffffff; font-size: 12px; z-index: 2; }/* ==========================================================================
   SECCIÓN INICIO - DISEÑO FINAL REPLICADO (ESTILO UNIFICADO)
   ========================================================================== */

/* 2. Panel Principal (Gris oscuro con borde morado) */
.home-panel {
    background-color: #212121;
    border: 1px solid #5c1d80; /* Borde morado principal */
    border-radius: 10px;
    margin-bottom: 30px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* 3. Cabecera del Panel (Ajustada para Título + Descripción) */
.home-panel-header {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background-color: #212121;
    /* La línea divisoria queda por debajo de la descripción */
    border-bottom: 1px solid var(--border-sidebar);
}

/* Contenedor para agrupar Título y Descripción a la izquierda */
.home-header-left-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.home-panel-title {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    font-weight: bold;
    font-size: 22px;
    padding-bottom: 5px;
}

.home-panel-title i {
    color: #fe2c55; 
    font-size: 20px;
}

/* Descripción arriba de la línea */
.home-description {
    color: var(--text-gray);
    font-size: 14px;
    margin: 0;
    opacity: 0.9;
}

/* Switcher de API */
.home-mode-switcher {
    height: 40px;
    background-color: #212121;
    padding: 4px;
    border: 1px solid #4d4d4d;
    border-radius: 8px;
    display: flex;
    gap: 2px;
}

.home-mode-btn {
    background: transparent;
    border: none;
    color: var(--text-gray);
    padding: 6px 15px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 14px;
    transition: all 0.2s;
    cursor: pointer;
}

.home-mode-btn:hover {
    background-color: #2a2a2a;
}

.home-mode-btn.active {
    background-color: var(--accent-purple);
    color: #fff;
}

/* 4. Cuerpo del Panel (Estructura de 2 columnas) */
.panel-body {
    padding: 25px 0 40px 0; 
}

/* Layout de configuración */
.home-config-row {
    display: flex;
    gap: 50px;
    align-items: flex-start;
    margin-top: 25px;
}

/* Lado Izquierdo: Etiqueta */
.home-label-column {
    min-width: 220px; 
    padding-top: 12px;
    margin-left: 20px; 
}

.home-label-column label {
    color: #fff;
    font-weight: bold;
    font-size: 14px;
}

.home-required {
    color: #ff4d4d;
    font-weight: bold;
}

/* Lado Derecho: Input y Botones */
.home-action-column {
    width: fit-content; /* Obliga a la columna a ajustarse al ancho de los botones */
    display: flex;
    flex-direction: column;
    margin-right: 25px; 
    margin-bottom: 25px;
}

/* Input de Usuario (Corregido: 2a2a2a / 4d4d4d) */
#username-input {
    width: 100%; /* Ahora sí funcionará porque el padre se estira */
    min-width: 350px; /* Un tamaño base para que no se vea minúsculo al inicio */
    height: 38px;
    background-color: #2a2a2a;
    border: 1px solid #4d4d4d;
    border-radius: 6px;
    padding: 0 15px;
    color: #fff;
    box-sizing: border-box;
    outline: none;
}

#username-input:focus {
    border-color: var(--accent-light);
}

/* 5. Fila de Botones (Estilo Unificado) */
.home-button-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.btn-unified {
    height: 38px;
    min-width: 120px;
    padding: 0 20px;
    background-color: #2a2a2a; /* Fondo gris igual al input */
    border: 1px solid #4d4d4d; /* Borde gris igual al input */
    color: white;              /* Texto blanco */
    /* -------------------------- */
    border-radius: 6px;
    font-size: 13px;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer; /* Para que salga la mano al pasar el mouse */
}

.btn-unified:hover:not(:disabled) {
    background-color: #333333;
    border-color: #494949;
}

.btn-unified:disabled {
    background-color: #232323; /* Más oscuro */
    border-color: #373737;
    color: #4e4e4e;               /* Texto grisáceo */
}

/* 6. Consola de Logs */
.home-console {
    background-color: #212121;
    border: 1px solid #5c1d80;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 450px;
}

.home-console-messages {
    padding: 10px;
    flex: 1;
    overflow-y: auto;
    color: #fff;
}

/* ==========================================================================
   SECCIÓN INICIO - LOGS CON ICONOS Y ESTILO ANTIGUO
   ========================================================================== */

.log-entry {
    display: flex; /* Necesario para alinear el icono con el texto */
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    margin-bottom: 10px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.4;
    color: #fff;
}

/* Iconos dentro de los logs */
.log-entry i {
    width: 20px;
    text-align: center;
    font-size: 16px;
}

/* Colores y Bordes (Ordenado por Eventos de TikTok) */

/* 1. Join */
.log-entry.join { background-color: #1a1a1a; border-left: 4px solid #888; opacity: 0.8; }
.log-entry.join i { color: #bbb; }

/* 2. Share */
.log-entry.share { background-color: #1a1a1a; border-left: 4px solid #25d366; }
.log-entry.share i { color: #25d366; }

/* 3. Follow */
.log-entry.follow { background-color: #1a1a1a; border-left: 4px solid #4a90e2; }
.log-entry.follow i { color: #4a90e2; }

/* 4. Superfan */
.log-entry.superfan { background-color: #3a2d48; border-left: 4px solid #ffeb3b; }
.log-entry.superfan i { color: #ffeb3b; }

/* 5. Like */
.log-entry.like { background-color: #1a1a1a; border-left: 4px solid #ff4b4b; }
.log-entry.like i { color: #ff4b4b; }

/* 6. Chat */
.log-entry.chat { background-color: #2d2d2d; border-left: 4px solid #108038; }
.log-entry.chat i { color: #aaa; }

/* 7. Emote */
.log-entry.emote { background-color: #2d2d2d; border-left: 4px solid #ffd700; }
.log-entry.emote i { color: #ffd700; }

/* 8. Gift */
.log-entry.gift { background-color: #3a2d48; border-left: 4px solid #ff56a8; font-weight: 600; }
.log-entry.gift i { color: #ffeb3b; }

/* Extras (Sistema) */
.log-entry.info { background-color: #1a1a1a; border-left: 4px solid #0078d4; }
.log-entry.info i { color: #4caf50; }

.log-entry.error { background-color: #581616; border-left: 4px solid #ff0000; }
.log-entry.error i { color: #ff4d4d; }/* ==========================================================================
   SECCIÓN CONFIGURACIÓN - ESTRUCTURA INTERNA
   ========================================================================== */

/* --- 1. LAYOUT PRINCIPAL (Columnas) --- */
.sub-layout { 
    display: flex; 
    gap: 30px; 
    align-items: flex-start; 
}

.sub-left { flex: 1.6; }
.sub-right { flex: 1; display: flex; justify-content: flex-end; }

/* --- 2. LISTA DE BENEFICIOS --- */
.sub-benefits-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.sub-benefits-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #b0b0b0;
    font-size: 14px;
    margin-bottom: 10px;
}

.sub-benefits-list li i {
    color: var(--accent-light);
    font-size: 14px;
    width: 16px;
}

/* --- 3. FORMULARIO DE REGISTRO (Inputs) --- */
.sub-form-container {
    margin-top: 25px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sub-input-group {
    display: flex;
    align-items: center;
    gap: 170px; /* Valor personalizado por el usuario */
}

.sub-input-group label {
    min-width: 100px;
    color: #fff;
    font-size: 14px;
}

.sub-field {
    flex: 1;
    height: 38px;
    max-width: 300px;
    background-color: #2a2a2a;
    border: 1px solid #4d4d4d;
    border-radius: 6px;
    padding: 10px 15px;
    color: #fff;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}

.sub-field:focus {
    border-color: var(--accent-light);
}

.sub-field-off {
    color: #666 !important;
}

/* --- 4. BOTONES DE ACCIÓN --- */

/* Botón Estado: Autenticar (Morado) */
.sub-btn-auth {
    width: fit-content;
    height: 38px; /* <--- Altura fija exacta */
    
    /* Quitamos el padding de 10px arriba/abajo y dejamos solo el de los lados (40px) */
    padding: 0 40px; 
    
    /* Centrado perfecto del texto */
    display: flex;
    align-items: center;
    justify-content: center;

    background-color: var(--accent-purple);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    margin-left: 270px; 
    transition: filter 0.2s;
}

.sub-btn-auth:hover {
    filter: brightness(1.2);
}

/* Botón Estado: Liberar (Rojo) */
.sub-btn-red {
    width: fit-content;
    padding: 10px 40px;
    background-color: #a4262c;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    margin-left: 270px; /* Valor personalizado por el usuario */
    transition: background-color 0.2s;
}

.sub-btn-red:hover {
    background-color: #c43235;
}

/* --- 5. TARJETA DE RANGO (Lado Derecho) --- */
.rank-card-container {
    background-color: #1a1a1a;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    width: 280px;
}

.rank-badge-display {
    color: white;
    padding: 10px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 16px;
    letter-spacing: 1px;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.rank-id-display-box {
    display: flex;
    align-items: center;
    background-color: #111;
    padding: 5px 10px;
    border-radius: 4px;
    margin-top: 15px;
    gap: 8px;
}

.rank-id-display-box span {
    color: #ffffff;
    font-size: 14px;
    font-weight: bold;
}

.rank-id-display-box input {
    background: transparent;
    border: none;
    color: #cccccc;
    font-size: 14px;
    width: 100%;
    outline: none;
    cursor: default;
}

/* ==========================================================================
   SECCIÓN CONFIGURACIÓN - ESTILOS DINÁMICOS
   ========================================================================== */

/* Colores de texto de expiración */
.text-gold {
    color: #ddaa1e !important;
    font-weight: bold;
}

.text-gray-dim {
    color: #666 !important;
}

/* Backgrounds de los badges según el rango */
.bg-free { 
    background: linear-gradient(90deg, #0095cc, #00c3ff); 
}

.bg-premium { 
    background: linear-gradient(90deg, #0d8a40, #10c35b); 
}

.bg-premium-plus { 
    background: linear-gradient(90deg, #b02327, #ed4245); 
}

/* --- ESTILOS DE LAYOUT (Manteniendo los tuyos) --- */
.sub-layout { display: flex; gap: 30px; align-items: flex-start; }
.sub-left { flex: 1.6; }
.sub-right { flex: 1; display: flex; justify-content: flex-end; }

/* --- CONTENEDOR DE LA TARJETA --- */
#tk-web-card {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 15px;
}

/* --- PERFIL (IZQUIERDA) --- */
#tk-web-profile-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

#tk-web-avatar-container {
    width: 55px;
    height: 55px;
    border: 2px solid #5c1d80;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #b0b0b0;
}

#tk-web-avatar-container i {
    font-size: 20px;
}

#tk-web-profile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- TEXTOS --- */
#tk-web-text-container {
    display: flex;
    flex-direction: column;
}

#tk-web-nickname {
    display: block;
    font-weight: bold;
    font-size: 16px;
    color: #ffffff;
}

#tk-web-username {
    font-size: 13px;
    color: #aaaaaa;
}

#tk-web-status {
    font-size: 12px;
    color: #888888;
    margin-top: 2px;
}

/* --- BOTONES (DERECHA) --- */
.tk-web-btn-purple {
    background-color: #5c1d80;
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: 5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tk-web-btn-purple:hover { background-color: #430e61; }

.tk-web-btn-red {
    background-color: #ed4245;
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: 5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tk-web-btn-red:hover { background-color: #c43235; }

/* TIKTOK LOGIN */

.config-btn-row {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.config-btn-gray {
    background-color: #2a2a2a;
    border: 1px solid #4d4d4d;
    color: #ffffff;
    border-radius: 6px;
    padding: 8px 25px;
    font-size: 13px;
    cursor: pointer;
    font-weight: normal;
    height: 38px;
}
.config-btn-gray:hover { 
    background-color: #333333;
    border-color: #494949;
}

/* CONEXIONES */

.connection-config-area {
    margin-top: 20px;
}

.connection-input-group {
    display: flex;
    align-items: center;
    margin-bottom: 10px; /* Espacio de 10px entre filas */
}

.connection-input-group label {
    width: 270px; /* Espacio para el texto de la izquierda */
    color: #ffffff;
    font-size: 14px;
    font-weight: normal; /* Letra normal, no bold */
}

.connection-input-group input {
    background-color: #2a2a2a;
    border: 1px solid #4d4d4d;
    color: white;
    padding: 0 12px; /* Espacio interno lateral */
    border-radius: 6px; /* Radio de 6px */
    width: 300px;
    height: 38px; /* Altura exacta de 38px */
    box-sizing: border-box; /* Para que el borde no sume al tamaño */
    font-size: 14px;
}

.connection-input-group input:focus {
    border-color: var(--accent-light); /* O el color exacto: #8A2BE2 */
    outline: none; /* Esto quita el borde amarillo/azul por defecto del navegador */
}

/* Fix para el cuadro gris: darle margen arriba y abajo */
.connection-config-area .info-box-gray {
    margin-top: 20px;
    margin-bottom: 20px;
}

.btn-probar {
    margin-left: 270px;
    background-color: #2a2a2a;
    border: 1px solid #4d4d4d;
    color: #ffffff;
    border-radius: 6px;
    padding: 8px 25px;
    font-size: 13px;
    cursor: pointer;
    font-weight: normal;
    height: 38px;
}
.btn-probar:hover {
    background-color: #333333;
    border-color: #494949;
}/* ==========================================================================
   SECCIÓN SUSCRIPCIONES - REPLICACIÓN 100% FIJA
   ========================================================================== */

/* Ajuste de espaciado inicial */
#section-subscriptions h2 { margin-bottom: 10px; }
#section-subscriptions .section-subtitle { margin-bottom: 40px; display: block; color: #b0b0b0; }

/* 1. CAJAS DE TEXTO (Aviso y Reembolso) */
.sub-info-notice, .sub-refund-notice {
    max-width: 850px;
    margin: 20px auto;
    background-color: #362245;
    border-left: 4px solid #5c1d80;
    padding: 15px 25px;
    border-radius: 6px;
    color: #ffffff;
    font-size: 0.95em;
    line-height: 1.8;
}

.sub-copy-box {
    background-color: #21241f;
    border: 2px solid #3f3f46;
    padding: 4px 12px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
}

/* 2. PRICING WRAPPER (GRID FIJO) */
.sub-pricing-wrapper {
    display: grid;
    grid-template-columns: 280px 300px 280px; /* Medidas exactas del antiguo */
    gap: 15px;
    margin: 60px auto 0 auto;
    justify-content: center;
    align-items: center;
}

.sub-pricing-card {
    background-color: #121727;
    border: 1px solid #333;
    border-radius: 15px;
    padding: 20px 15px;
    text-align: center;
    transition: transform 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 400px;
    box-sizing: border-box;
}

/* Hover de cartas */
.sub-pricing-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(138, 43, 226, 0.4);
    border-color: #8A2BE2;
}

/* Tarjeta Destacada */
.sub-pricing-card.featured {
    border: 2px solid #8A2BE2;
    box-shadow: 0 10px 30px rgba(138, 43, 226, 0.2);
    transform: scale(1.05);
    z-index: 5;
    min-height: 450px;
}

.sub-pricing-card.featured:hover {
    transform: scale(1.05) translateY(-10px);
}

.sub-popular-tag {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #8A2BE2;
    color: white;
    padding: 4px 15px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
}

/* 3. CONTENIDO TARJETAS */
.sub-plan-name { font-size: 18px; font-weight: 800 !important; color: #fff; margin-bottom: 15px; }
.sub-plan-price { font-size: 42px; font-weight: 800; color: #fff; margin-bottom: 5px; }
.sub-plan-price span { font-size: 16px; color: #888; }
.sub-plan-description { font-size: 13px; color: #aaa; margin-bottom: 25px; }

.sub-plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
    text-align: left;
    flex-grow: 1;
}

.sub-plan-features li {
    font-size: 14px;
    color: #ccc;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sub-plan-features li i { color: #57b727; font-size: 12px; }

/* 4. BOTONES PLANES */
.sub-btn-plan {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: none;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.sub-btn-plan.primary { background-color: #2d2d3a; color: white; border: 1px solid #444; }
.sub-btn-plan.primary:hover { background-color: #8A2BE2; border-color: #8A2BE2; }

.sub-btn-plan.active-plan, .sub-btn-plan.included-plan {
    background-color: #5c1d80 !important; color: white !important; cursor: default;
}

/* 5. BANNER KICK */
.sub-kick-banner {
    max-width: 665px;
    margin: 30px auto;
    background-color: #121727;
    border: 1px solid #216e51;
    border-radius: 12px;
    display: flex;
    align-items: center;
    padding: 20px;
    gap: 20px;
}

.sub-kick-logo-box {
    background-color: #000;
    padding: 12px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sub-kick-logo-box img { width: 32px; height: 32px; }
.sub-kick-title { color: #32c571; font-weight: bold; font-size: 1.2em; }
.sub-kick-text { color: #cbd5e1; font-size: 0.95em; }
.sub-kick-footer { color: #94a3b8; font-style: italic; font-size: 0.75em; }

/* 6. QR CARDS */
.sub-qr-wrapper {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.sub-qr-card {
    background: #1a1a1f;
    padding: 46px 15px 11px 15px; /* Medida exacta del antiguo */
    border-radius: 10px;
    text-align: center;
    border: 1px solid #333;
    width: 180px;
    position: relative;
    transition: transform 0.2s;
    box-sizing: border-box;
}

.sub-qr-card:hover { transform: scale(1.05); }

.sub-qr-card img {
    width: 100%;
    max-width: 150px;
    border-radius: 5px;
    background-color: white;
    padding: 5px;
    box-sizing: border-box;
}

.sub-qr-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    font-size: 10px;
    font-weight: bold;
    padding: 3px 10px;
    border-radius: 5px;
    color: white;
    text-transform: uppercase;
}

.bg-paypal { background-color: #0070ba; font-size: 14px; }
.bg-binance { background-color: #f3ba2f; font-size: 14px; }
.bg-yape { background-color: #88129a; font-size: 14px; }

/* 7. OFFERS GRID */
.sub-offers-grid {
    display: grid;
    grid-template-columns: repeat(4, 200px);
    gap: 15px;
    justify-content: center;
    margin-top: 40px;
}

.sub-offer-card {
    background: #1e1e24;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    text-align: center;
    border: 1px solid #333;
    transition: transform 0.2s;
}

.sub-offer-card:hover { transform: scale(1.03); }

.sub-offer-label {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
    border: 1px solid rgba(255,255,255,0.2);
    z-index: 2;
}

.sub-offer-card img { width: 100%; height: 140px; object-fit: cover; filter: brightness(0.7); }
.sub-offer-info { padding: 12px; display: flex; flex-direction: column; background: #1a1a1f; }
.sub-offer-price { color: #fff; font-weight: 800; font-size: 14px; }
.sub-offer-save { color: #aaa; font-size: 11px; }

/* Bordes de oferta */
.border-premium { border: 1px solid #2ecc71; box-shadow: 0 0 10px #47f08d }
.border-plus { border: 1px solid #e74c3c; box-shadow: 0 0 10px #f15f4e }
.border-kick { border: 1px solid #f1c40f; box-shadow: 0 0 10px #e7c127 }
.bg-kick { background-color: #2ecc71 !important; color: #000 !important; box-shadow: 0 0 10px #47f08d }

/* 8. COLORES DINÁMICOS CORREGIDOS */
.text-blue {
    background: linear-gradient(90deg, #0095cc, #00c3ff);
    -webkit-background-clip: text;
    background-clip: text; /* Standard */
    -webkit-text-fill-color: transparent;
    font-weight: bold;
}

.text-red {
    background: linear-gradient(90deg, #b02327, #ed4245);
    -webkit-background-clip: text;
    background-clip: text; /* Standard */
    -webkit-text-fill-color: transparent;
    font-weight: bold;
}

.text-green {
    background: linear-gradient(90deg, #0d8a40, #10c35b);
    -webkit-background-clip: text;
    background-clip: text; /* Standard */
    -webkit-text-fill-color: transparent;
    font-weight: bold;
}

.text-yellow { color: #ffb84d; font-weight: bold; }/* RESET DE BOX-SIZING PARA EVITAR ERRORES DE CÁLCULO DE ALTURA */
.ae-modal-box *, .ae-modal-box *::before, .ae-modal-box *::after {
    box-sizing: border-box;
}

/* --- TEXTO DESCRIPTIVO --- */
.ae-description {
    color: #b0b0b0;
    font-size: 14px;
    margin-bottom: 15px;
}

/* --- FILA DE CONTROLES --- */
.ae-controls-row {
    display: flex;
    gap: 20px;
    margin-top: 25px;
    align-items: flex-start;
}

/* --- SELECTOR (300px para alinear con los de Minecraft) --- */
.ae-select-wrapper {
    position: relative;
    width: 280px;
}

.ae-select-wrapper select {
    width: 100%;
    height: 38px;
    background-color: #2a2a2a;
    border: 1px solid #4d4d4d;
    border-radius: 6px;
    color: white;
    padding: 0 15px;
    appearance: none;
    cursor: pointer;
    font-size: 14px;
    outline: none;
}

.ae-select-wrapper i {
    align-items: center;
    position: absolute;
    right: 14px;
    top: 13px;
    color: var(--accent-light); /* Morado TikSpark */
    font-size: 12px;
    pointer-events: none;
}

/* --- COLUMNA DE BOTONES --- */
.ae-buttons-column {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ae-btn-group {
    display: flex;
    gap: 8px;
}

/* --- BOTÓN ESTÁNDAR (38px / 2a2a2a) --- */
.ae-btn-action {
    background-color: #2a2a2a;
    border: 1px solid #4d4d4d;
    color: #ffffff;
    height: 38px;
    padding: 0 20px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: normal;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.ae-btn-action:hover {
    background-color: #333333;
    border-color: #494949;
}

/* Botón Eliminar Rojo */
.btn-danger-red:hover {
    background-color: #a4262c;
    border-color: #c43235;
}

/* --- INPUT DE CÓDIGO (Igual a los demás) --- */
.ae-input-style {
    background-color: #2a2a2a;
    border: 1px solid #4d4d4d;
    border-radius: 6px;
    color: #ffffff;
    padding: 0 15px;
    height: 38px;
    width: 124px;
    font-size: 14px;
    outline: none;
}
.ae-list-header-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    margin-top: 25px;
}

/* =========================================
   BUSCADOR DE REGALOS
   ========================================= */

/* La caja que pega el buscador arriba */
.ae-search-box-sticky {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #2a2a2a; /* Mismo color que el fondo del menú */
    border-bottom: 1px solid #4d4d4d; /* Línea de separación */
    padding: 0; /* QUITAMOS EL PADDING PARA QUE PEGUE A LOS BORDES */
    width: 100%;
}

/* El input estirado al 100% */
.ae-search-box-sticky input {
    width: 100%;
    height: 40px; /* Altura para que sea fácil de clickar */
    background: transparent; /* Que use el color del fondo de la caja sticky */
    border: none; /* Sin bordes internos para que parezca una sola pieza */
    padding: 0 15px; /* Espacio solo para el texto interno */
    color: white;
    outline: none;
    font-size: 14px;
}

/* --- ESTRUCTURA DE TABLA (BLOQUE UNIFICADO) --- */

.ae-table-wrapper {
    margin-top: 25px;
    border: 1px solid #4d4d4d;
    border-radius: 6px;
    overflow: hidden;
    background-color: #212121; /* Fondo para huecos */
}

/* Layout base del Grid (Sin colores ni márgenes) */
/* PARCHE: Se quitan important aumentando especificidad con el padre */
.ae-table-wrapper .ae-table-grid,
.ae-table-wrapper .ae-table-row-base {
    display: grid;
    align-items: stretch;
    height: 41px; /* Ajustado */
    color: #888;
    font-size: 13px;
    background-color: transparent;
    border: none; 
}

/* Celdas con líneas divisorias */
.ae-table-grid > div,
.ae-table-grid > a,
.ae-table-row-base > div,
.ae-table-row-base > a {
    display: flex;
    align-items: center;
    padding: 0 10px;
    border-right: 1px solid #4d4d4d;
}

.ae-table-grid > *:last-child,
.ae-table-row-base > *:last-child {
    border-right: none;
}

/* Encabezado (Gris Claro #2a2a2a) */
.ae-table-wrapper .ae-table-head,
.ae-table-wrapper .ae-table-header-style {
    background-color: #2a2a2a;
    border-bottom: 1px solid #4d4d4d;
    font-weight: bold;
}

/* Filas de Datos (Gris Oscuro #212121) */
.ae-table-wrapper .ae-row-data,
.ae-table-wrapper .ae-row-data-action,
.ae-table-wrapper .ae-screen-row-item {
    background-color: #212121;
    height: 41px; /* Ajustado */
    color: #eee;
}

/* La última fila NO lleva borde inferior porque ya lo tiene el marco (.ae-table-wrapper) */
.ae-row-data:last-child,
.ae-row-data-action:last-child,
.ae-screen-row-item:last-child {
    border-bottom: none;
}

/* Estado Vacío (Igual que las filas) */
.ae-table-wrapper .ae-list-content-area {
    background-color: #212121;
    min-height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* PARCHE: Separación de columnas por clases */
.ae-grid-actions, .ae-table-actions {
    grid-template-columns: 43px 150px 1.5fr 1fr 1fr 2fr;
}

.ae-grid-events, .ae-table-events {
    grid-template-columns: 43px 80px 60px 50px 2fr 2fr 2fr;
}

.ae-grid-screens, .ae-table-screens {
    grid-template-columns: 150px 1fr;
}

/* 1. Clase de utilidad para truncar texto */
.truncate {
    white-space: nowrap;      /* Evita el salto de línea */
    overflow: hidden;         /* Esconde lo que sobra */
    text-overflow: ellipsis;  /* Pone los "..." */
    display: block;           /* Necesario para que el ancho funcione */
}

/* 2. Ajuste específico para tus columnas de grid */
/* Esto evita que el contenido empuje el ancho de la columna */
.ae-table-row-base > div {
    min-width: 0; 
}

/* 3. Ajuste para las descripciones que tienen HTML (colores) */
.ae-col-desc span {
    display: inline-block;
    vertical-align: middle;
}

/* CHECKBOX DE CONTENIDO ACCIONES */
.ae-col-check {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Estilo para que el resumen de acciones no rompa la tabla */
.ae-col-actions-summary {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #b0b0b0;
    font-size: 12px;
}

.ae-col-platform {
    justify-content: center;
    text-align: center;
    font-size: 16px;
    color: #8a2be2;
}

.ae-col-active {
    justify-content: center;
    text-align: center;
}

/* Quita el padding lateral para que los iconos no tengan márgenes a los lados */
.ae-table-wrapper div.ae-col-icons {
    padding: 0 !important; /* Aquí el !important es necesario para anular el "> div" genérico */
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
}

/* Iconos Circulares */
.ae-col-icons {
    gap: 8px;
    justify-content: center;
}

/* 1. EL CONTENEDOR (Transparente) */
.ae-icon-btn {
    width: 24px;
    height: 24px;
    background-color: transparent; 
    border: none;
    padding: 0;
    cursor: pointer;
    position: relative; 
    display: inline-block; 
    vertical-align: middle;
    transition: transform 0.1s;
    outline: none;
}

/* 2. EL ICONO (Todos Morados) */
.ae-icon-btn i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #8A2BE2; /* Morado TikSpark fijo */
    font-size: 15px;
    line-height: 1;
    display: block;
}

/* 3. ESTADOS HOVER */
.ae-icon-btn:hover {
    transform: scale(1.1);
}

.ae-icon-btn:hover i {
    filter: brightness(1.3); /* Brilla un poco al pasar el mouse */
}

/* Usamos el padre para ganar especificidad y quitamos los márgenes */
.ae-table-wrapper .ae-empty-msg {
    color: #b0b0b0;
    font-size: 14px;
    margin: 0; /* Esto elimina el margin-bottom: 25px de app.css */
    
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 40px; /* Altura exacta que pediste */
}

/* ==========================================================================
   SIMULAR EVENTOS
   ========================================================================== */

.ae-dual-layout {
    display: flex;
    gap: 30px;
    width: 100%;
}

.ae-half {
    flex: 1;
}

.ae-tab-row {
    display: flex;
    gap: 15px;
    margin: 20px 0;
    border-bottom: 1px solid #3c3c3c;
    padding-bottom: 10px;
}

.ae-tab {
    color: #666;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ae-tab.active {
    color: var(--accent-light);
}

.ae-simulate-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 15px;
}

.ae-btn-simulate {
    background-color: #2a2a2a;
    border: 1px solid #4d4d4d;
    color: #fff;
    height: 38px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
}

.ae-input-row-sim {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    align-items: center;
}

/* PARCHE: Selector de Gift flexible */
.ae-input-row-sim .ae-select-wrapper {
    flex: 1;
    width: auto;
}

.ae-btn-simulate-action {
    background-color: #2a2a2a;
    border: 1px solid #4d4d4d;
    color: #fff;
    height: 38px;
    width: 130px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    flex-shrink: 0;
}

.ae-btn-simulate-action:hover {
    background-color: #333;
    border-color: #494949;
}

.ae-input-full {
    flex: 1;
    height: 38px;
    background: #2a2a2a;
    border: 1px solid #4d4d4d;
    border-radius: 6px;
    color: white;
    padding: 0 12px;
    outline: none;
}

#panel-media .ae-unit-field {
    width: 330px;
}

.ae-unit-field {
    display: flex;
    align-items: center;
    background-color: #2a2a2a;
    border: 1px solid #4d4d4d;
    border-radius: 6px;
    overflow: hidden;
    height: 38px;
    min-height: 38px;
    flex: 1;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.ae-unit-field:focus-within, .ae-unit-field:hover {
    border-color: var(--accent-light);
    box-shadow: 0 0 8px rgba(138, 43, 226, 0.4);
}

.ae-unit-field input {
    background: transparent;
    border: none;
    color: white;
    padding: 0 12px;
    flex: 1;
    width: 100%;
    height: 100%;
    outline: none;
}

.ae-unit-field span {
    background-color: #2a2a2a;
    color: white;
    font-size: 12px;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 15px;
    user-select: none;
}

.ae-config-field-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    gap: 20px;
}

.ae-config-field-row label {
    flex-shrink: 0;
    width: 150px;
    color: #b0b0b0;
}

.ae-config-field-row .ae-unit-field {
    flex: 1;
}

/* ==========================================================================
   MODAL DE NUEVA ACCIÓN - DISEÑO REPLICADO FINAL CORREGIDO
   ========================================================================== */

.ae-modal-box {
    background-color: #2a2a2a;
    border: 1px solid #4d4d4d;
    border-radius: 8px;
    width: 720px;
    height: 915px;
    max-height: 95vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}

@media (max-height: 950px) {
    .ae-modal-box {
        height: 780px;
    }
}

.ae-modal-header {
    padding: 15px 25px;
    border-bottom: 1px solid #4d4d4d;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #ffffff;
    font-weight: bold;
}

.ae-modal-close {
    background: none; 
    border: none; 
    color: #ffffff; 
    font-size: 24px; 
    cursor: pointer;
}

.ae-modal-body {
    padding: 20px 30px;
    overflow-y: auto;
}

.ae-modal-group { 
    margin-bottom: 25px; 
    display: block;
}

.ae-modal-group label { 
    display: block;
    color: #ffffff;
    font-size: 14px; 
    margin-bottom: 10px;
}

.ae-input-base {
    margin-left: 20px;
    width: 200px;
    height: 38px;
    background-color: #2a2a2a;
    border: 1px solid #4d4d4d;
    border-radius: 6px;
    color: #ffffff;
    padding: 0 12px;
    outline: none;
    font-size: 14px;
}

#ae-action-name {
    width: 200px;
}

.ae-section-label {
    color: #ffffff;
    font-size: 14px; 
    margin: 30px 0 15px;
    border-bottom: none;
    padding-bottom: 8px;
    font-weight: normal;
}

.ae-header-box-centered {
    background-color: #1e1e1e;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    border-radius: 6px;
    margin-bottom: 5px;
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
}

.ae-header-box-centered:hover { background-color: #333; }

.ae-header-box-centered i:first-child {
    position: absolute;
    left: 20px;
    color: #ffffff;
    transition: transform 0.3s;
}

.border-white { border: 2px solid #ffffff; }
.border-red { border: 2px solid #ff4d4d; }

.ae-acc-title { text-align: center; display: flex; flex-direction: column; pointer-events: none; }
.ae-acc-title span { font-weight: bold; font-size: 15px; color: #ffffff; }
.ae-acc-title small { font-size: 12px; color: #ffffff; opacity: 0.8; }

.ae-header-box-centered.active i:first-child {
    transform: rotate(90deg);
}

.ae-checkbox-list-single {
    display: none;
    flex-direction: column;
    gap: 0px;
    padding: 15px 0 0 20px;
}

.ae-checkbox-list-single.show {
    display: flex;
}

.ae-check-row {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #ffffff;
    font-size: 14px;
    cursor: pointer;
}

.ae-modal-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.ae-modal-row label { 
    width: 200px; 
    color: #ffffff;
    font-size: 14px; 
}

.ae-modal-box .ae-input-with-unit, 
.ae-modal-box .ae-select-wrapper, 
.ae-modal-box .ae-input-fixed, 
.ae-modal-box #ae-action-img {
    margin-right: 60px;
    width: 230px;
    height: 38px;
    min-height: 38px;
}

.ae-input-with-unit {
    display: flex;
    border: 1px solid #4d4d4d;
    border-radius: 6px;
    overflow: hidden;
    background-color: #2a2a2a;
    box-sizing: border-box;
}

.ae-input-with-unit input {
    background: transparent; 
    border: none; 
    color: #ffffff; 
    flex: 1; 
    min-width: 0; 
    padding-left: 15px; 
    outline: none;
    height: 100%;
}

.ae-unit {
    background-color: #2a2a2a;
    color: #ffffff; 
    padding: 0 10px; 
    display: flex;
    align-items: center;
    border-left: none; 
    font-size: 13px;
    flex-shrink: 0; 
    white-space: nowrap;
    height: 100%;
}

.ae-modal-info-footer {
    margin-top: 40px;
    text-align: center;
}

.ae-link-purple {
    color: var(--accent-light);
    text-decoration: none;
    font-size: 15px;
    display: block;
    margin-bottom: 15px;
}

.ae-modal-info-footer p {
    color: #ffffff;
    opacity: 0.7;
    font-size: 14px;
    line-height: 1.6;
    padding: 0 50px;
}

.ae-modal-buttons-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 35px;
    padding-bottom: 20px;
}

.ae-btn-modal {
    background-color: #2a2a2a;
    border: 1px solid #4d4d4d;
    color: #ffffff;
    height: 38px;
    width: 170px;
    border-radius: 6px;
    font-weight: normal;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.ae-btn-modal:hover {
    background-color: #333;
    border-color: var(--accent-light);
}

/* ==========================================================================
   DISEÑO INTEGRADO SIDE-BY-SIDE (38px / 2a2a2a / 4d4d4d)
   ========================================================================== */

.ae-checkbox-list-single.show { display: flex; }

.ae-row-integrated {
    display: flex;
    align-items: flex-start;
    width: 100%;
}

.ae-check-side {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 210px;
    min-width: 210px;
    height: 38px;
    color: #ffffff;
    font-size: 14px;
    cursor: pointer;
    flex-shrink: 0;
}

.ae-panel-side {
    display: none;
    flex: 1;
    padding-top: 11px;
    padding-bottom: 15px;
    margin-left: 68px; 
}

.ae-panel-side.show { display: block; }

.ae-textarea-integrated, 
.ae-input-base-integrated,
.ae-btn-action-small,
.ae-modal-box .ae-unit-field {
    background-color: #2a2a2a;
    border: 1px solid #4d4d4d;
    border-radius: 4px;
    color: #ffffff;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
}

.ae-textarea-integrated {
    width: 330px; 
    height: 90px;
    padding: 10px;
    resize: none;
    margin-bottom: 5px;
    display: block;
}

.ae-input-base-integrated {
    width: 330px; 
    height: 38px;
    padding: 0 12px;
}

.ae-modal-box .ae-unit-field {
    display: flex;
    align-items: center;
    height: 38px;
    min-height: 38px;
    width: 160px; 
    overflow: hidden;
    background-color: #2a2a2a;
    border: 1px solid #4d4d4d;
    border-radius: 4px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.ae-modal-box .ae-unit-field span {
    color: #888;
    padding: 0 10px;
    font-size: 14px;
    user-select: none;
    height: 100%;
    display: flex;
    align-items: center;
    padding-bottom: 4px;
    box-sizing: border-box;
    background-color: transparent;
}

.ae-modal-box .ae-unit-field input {
    flex: 1;
    height: 100%;
    background: transparent;
    border: none;
    color: #ffffff;
    padding: 0 12px;
    outline: none;
    margin: 0;
}

.ae-audio-slider-row {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 38px;
}

.ae-audio-slider-row i {
    margin: 5px;
    color: #ffffff;
}

.ae-range-purple {
    -webkit-appearance: none;
    appearance: none; 
    width: 250px;
    height: 12px;
    background: linear-gradient(90deg, #5c1d80 50%, #3e3e42 50%); 
    border-radius: 5px;
    outline: none;
}

.ae-range-purple::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none; 
    height: 24px;
    width: 24px;
    background: #000000; 
    border: 3px solid #5c1d80; 
    border-radius: 50%;
    cursor: pointer;
}

.ae-panel-label {
    display: block;
    font-size: 13px;
    color: #b0b0b0;
    margin-bottom: 8px;
}

.ae-links-row {
    display: flex;
    gap: 20px;
    margin-top: 5px;
    margin-bottom: 10px;
}

.ae-panel-row-inputs {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.ae-input-stack { display: flex; flex-direction: column; }

/* Altura base para asegurar los 38px */
.ae-btn-action-small {
    height: 38px;
    background-color: #2a2a2a;
    border: 1px solid #4d4d4d;
    border-radius: 4px;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Anchos corregidos */
#panel-audio .ae-btn-action-small:first-of-type { 
    width: 180px; 
}

#panel-audio .ae-upload-row .ae-btn-action-small { 
    width: 120px; 
}

/* Espacio vertical entre "Abrir Lista" y la fila de "Subir" */
.ae-audio-btns {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Aumentamos el espacio de 8px a 12px */
    margin: 15px 0;
}

/* Forzar que el botón y el texto estén en la misma línea */
.ae-upload-row {
    display: flex;
    flex-direction: row; /* Asegura que sea una fila */
    align-items: center; /* Centra el texto verticalmente respecto al botón */
    gap: 10px; /* Espacio entre el botón de 120px y el texto */
}

.ae-upload-row span { margin-left: 10px; color: #ffffff; }

.ae-audio-checks { display: flex; flex-direction: column; gap: 8px; }
.ae-check-row-small { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #eee; cursor: pointer; }

/* TEXTO DEBAJO DEL BOTÓN */
.ae-file-info-box {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ae-file-info-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ae-file-name {
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
}

.ae-file-size {
    color: #666;
    font-size: 12px;
}

.ae-file-status {
    color: #666;
    font-size: 12px;
}

/* ==========================================================================
   MODAL DE KEYSTROKES - DISEÑO INTEGRADO (TikSpark)
   ========================================================================== */

/* Capa de fondo (Overlay) */
.ks-modal-overlay {
    display: none; /* Se activa con .show desde JS */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(50, 50, 50, 0.3);
    z-index: 11000;
    justify-content: center;
    align-items: center;
}

/* Clase para abrir el modal */
.ks-modal-overlay.show {
    display: flex;
}

/* Contenedor principal del modal */
.ks-modal-window {
    width: 700px;
    background-color: #2a2a2a;
    border: 1px solid #4d4d4d;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* Cabecera */
.ks-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid #4d4d4d;
}

.ks-header-title {
    color: #ffffff;
    font-weight: bold;
    font-size: 18px;
}

.ks-btn-close {
    background: transparent;
    border: none;
    color: #ffffff;
    width: 30px;
    height: 30px;
    font-size: 24px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
}

.ks-btn-close:hover {
    background: #3a3a3a;
}

/* Cuerpo del modal */
.ks-modal-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Zona de Textos Informativos */
.ks-info-section {
    width: 651px;
    margin-bottom: 15px;
    text-align: left;
}

.ks-info-text {
    color: #ffffff;
    font-size: 13px;
    margin: 4px 0;
}

.ks-info-text a {
    color: #8A2BE2;
    font-size: inherit; /* Que use el tamaño del texto padre */
    text-decoration: none;
    transition: opacity 0.2s;
}

.ks-info-text a:hover {
    text-decoration: none; /* Quitamos el underline para cumplir el estilo global */
    opacity: 0.8;          /* Efecto de brillo/atenuado de TikSpark */
}

/* --- TECLADO (Ancho total 651px) --- */
.ks-content-centered {
    width: 651px;
}

.ks-keyboard-layout {
    display: flex;
    gap: 8px; /* Espacio entre Bloque A, B y C */
    margin-bottom: 15px;
}

/* Bloques individuales */
.ks-block-main { width: 385px; }
.ks-block-nav  { width: 150px; }
.ks-block-num  { width: 100px; }

/* Filas y Teclas */
.ks-row {
    display: flex;
    gap: 3px;
    margin-bottom: 3px;
    width: 100%;
}

.ks-row-empty {
    height: 38px;
    margin-bottom: 3px;
}

.ks-key {
    background: #2a2a2a;
    border: 1px solid #4d4d4d;
    color: #ffffff;
    height: 38px;
    border-radius: 6px;
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
    flex: 1; /* Teclas base se reparten el ancho */
}

.ks-key-none {
    flex: 1;         /* Ocupa el mismo ancho que una tecla */
    height: 38px;    /* Misma altura */
    visibility: hidden; /* Invisible pero presente en el layout */
}

.ks-key:hover {
    background: #333333;
    border-color: #494949;
}

/* Anchos especiales para que el Bloque A encaje en 385px */
.ks-backspace { flex: 2; }
.ks-tab { flex: 1.5; }
.ks-caps { flex: 1.8; }
.ks-enter { flex: 2.2; }
.ks-shift-l { flex: 2.2; }
.ks-shift-r { flex: 2.8; }
.ks-space { flex: 6; }

/* --- SECCIÓN ACCIONES (Clicks) --- */
.ks-actions-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    margin: 10px 0;
}

.ks-btn-action {
    background: #2a2a2a;
    border: 1px solid #4d4d4d;
    color: #ffffff;
    height: 38px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    transition: 0.2s;
}

.ks-btn-action:hover {
    background: #333333;
    border-color: #494949;
}

/* Checkbox de compatibilidad */
.ks-compat-row {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    font-size: 13px;
    margin: 10px 0;
    cursor: pointer;
}

/* --- NUEVA ÁREA DISPLAY INTERACTIVA --- */
.ks-display-wrapper {
    width: 651px;
    height: 300px;
    background: #212121; /* El fondo del área negra se mantiene */
    border: 1px solid #4d4d4d;
    border-radius: 6px;
    padding: 12px;
    overflow-y: auto;
    box-sizing: border-box;
}

.ks-display-wrapper::-webkit-scrollbar-track {
    background: transparent;
    /* ESTO ES LO IMPORTANTE: Crea el espacio arriba y abajo */
    margin-top: 12px;    
    margin-bottom: 12px;
}

/* Contenedor de la lista de filas */
.ks-sequence-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* La Fila (Row) */
.ks-sequence-row {
    display: flex;
    align-items: center;
    background: #2a2a2a;
    border: 1px solid #4d4d4d;
    border-radius: 4px;
    padding: 8px 12px;
}

/* Bloques A y B */
.ks-block-a, .ks-block-b {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Espacio de 70px entre bloques */
.ks-row-spacer {
    width: 83px;
}

/* Etiquetas blancas */
.ks-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ks-label {
    color: #ffffff;
    font-size: 11px;
    font-weight: bold;
}

/* Cuadros de Orden, Tecla, Inputs y Botones con tus colores 2a2a2a y 4d4d4d */
.ks-row-order, 
.ks-key-preview, 
.ks-row-select, 
.ks-row-input, 
.ks-btn-play, 
.ks-btn-delete {
    background: #2a2a2a;
    border: 1px solid #4d4d4d;
    color: #ffffff;
    border-radius: 4px;
    outline: none;
}

.ks-row-order {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 6px;
    font-size: 12px;
    min-width: 38px;
    gap: 5px;
}

.ks-key-preview {
    min-width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.ks-row-select, .ks-row-input {
    height: 38px;
    width: 75px;
    padding: 4px;
    font-size: 12px;
}

.ks-row-input { 
    width: 75px; 
    text-align: center; 
}

/* Botones de acción finales */
.ks-row-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.ks-btn-play, .ks-btn-delete {
    margin-top: 15px;
    width: 38px;
    height: 38px;
    padding: 0; /* Quitamos el padding para que no deforme el tamaño fijo */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.ks-btn-delete i { color: #ff4d4d; }
.ks-btn-play:hover { border-color: #8A2BE2; }

/* --- FOOTER DEL MODAL --- */
.ks-modal-footer {
    display: flex;
    justify-content: center;
    gap: 15px;
    padding: 20px;
}

.ks-footer-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 38px;
    background: #2a2a2a;
    border: 1px solid #4d4d4d;
    color: #ffffff;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: 0.2s;
    gap: 8px;
}

.ks-footer-btn:hover {
    background: #333333;
    border-color: #494949;
}

/* Estilo del cuadro resumen (El de la sección de eventos) */
.ae-keys-summary-box {
    width: 330px; 
    min-height: 64px;
    background-color: #2a2a2a; /* Tu color */
    border: 1px solid #4d4d4d; /* Tu color */
    border-radius: 4px;
    
    /* ESPACIOS DE 11PX */
    padding: 0 12px;           /* 11px a los lados (arriba/abajo lo centra el flex) */
    display: flex;
    align-items: center;       /* Centra verticalmente los cuadros de 40px */
    gap: 12px;                 /* 11px entre cuadros */
    
    box-sizing: border-box;
    overflow-x: auto;          /* Por si se llena la lista */
}

/* El cuadro de la tecla */
.ae-key-badge {
    width: 38px;
    height: 38px;
    background-color: #2a2a2a; /* Mismo que el fondo o un tono similar si prefieres */
    border: 1px solid #4d4d4d;
    border-radius: 4px;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    color: #ffffff;
    font-size: 14px;
    font-weight: normal;
    flex-shrink: 0;            /* Evita que el cuadro se aplaste */
}

/* =========================================
   MODAL DE AUDIOS - ARQUITECTURA FINAL
   ========================================= */
/* --- CONTENEDOR BASE --- */
.ma-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(50, 50, 50, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 11000;
}

.ma-modal-container {
    background-color: #2a2a2a;
    border: 1px solid #4d4d4d;
    border-radius: 12px;
    width: 760px;
    
    /* --- ESTO ES LO NUEVO --- */
    max-height: 90vh;    /* Que no ocupe más del 90% de la altura de la pantalla */
    display: flex;       /* Permite que los hijos se organicen mejor */
    flex-direction: column; 
    color: white;
    overflow: hidden;
}

.ma-modal-header {
    /* Cambiamos height por min-height para bloquear el tamaño */
    min-height: 50px; 
    height: 50px;
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 20px;
    padding-right: 20px;
    border-bottom: 1px solid #4d4d4d;
    box-sizing: border-box;
    
    /* ESTO EVITA QUE SE ACHIQUE */
    flex-shrink: 0; 
}

.ma-header-title {
    font-size: 18px;
    font-weight: bold;
}

.ma-modal-close-x {
    background: none;
    border: none;
    color: white;
    font-size: 22px;
    cursor: pointer;
}

.ma-modal-body {
    padding-top: 25px;
    padding-bottom: 25px;
    padding-left: 25px;
    padding-right: 25px;
    /* --- ESTO ES LO NUEVO --- */
    overflow-y: auto;    /* Activa el scroll vertical solo aquí */
    flex: 1;             /* Hace que este bloque use todo el espacio sobrante */
    /* Esto ayuda a que el body sea el único que ceda espacio */
    display: flex;
    flex-direction: column;
    scrollbar-gutter: stable;
}

/* --- FILAS --- */
.ma-row-search, 
.ma-row-url, 
.ma-row-controls, 
.ma-row-tabs, 
.ma-row-gallery {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

/* --- FILA 2: BUSCAR --- */
.ma-search-group {
    position: relative;
    width: 300px;
    height: 38px;
}

.ma-search-group i {
    position: absolute;
    left: 12px;
    top: 11px;
    color: #757575;
}

.ma-input-base {
    width: 300px;
    height: 38px;
    background-color: #2a2a2a;
    border-width: 1px;
    border-style: solid;
    border-color: #4d4d4d;
    border-radius: 6px;
    padding-left: 35px;
    color: white;
    outline: none;
}

.ma-info-link {
    margin-left: 20px;
    font-size: 14px;
}

.ma-link-purple {
    color: #8a2be2;
    text-decoration: none;
    font-weight: bold;
}

/* --- FILA 3: URL --- */
.ma-input-url {
    width: 300px;
    height: 38px;
    background-color: #2a2a2a;
    border-width: 1px;
    border-style: solid;
    border-color: #4d4d4d;
    border-radius: 6px;
    padding-left: 15px;
    padding-right: 15px;
    color: white;
    outline: none;
}

.ma-btn-add {
    width: 120px;
    height: 38px;
    background-color: #2a2a2a;
    border-width: 1px;
    border-style: solid;
    border-color: #4d4d4d;
    color: white;
    border-radius: 6px;
    margin-left: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* --- FILA 4: VOLUMEN Y ORDEN --- */
.ma-volume-section {
    margin-left: 3PX;
    width: 300px;
}

.ma-volume-slider-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ma-range-purple {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 12px;
    background: linear-gradient(90deg, #5c1d80 50%, #3e3e42 50%);
    border-radius: 5px;
    outline: none;
}

.ma-range-purple::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 24px;
    width: 24px;
    background-color: #000000;
    border-width: 3px;
    border-style: solid;
    border-color: #5c1d80;
    border-radius: 50%;
    cursor: pointer;
}

.ma-volume-label {
    font-size: 12px;
    color: #888;
    margin-left: 34px;
    display: block;
    margin-top: 4px;
}

.ma-spacer-130 {
    width: 130px;
}

.ma-sort-section {
    display: flex;
    align-items: center;
    gap: 15px;
}

.ma-dropdown-wrapper {
    position: relative;
}

.ma-dropdown-select {
    background-color: #2a2a2a;
    border-width: 1px;
    border-style: solid;
    border-color: #4d4d4d;
    color: white;
    height: 38px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 6px;
    width: 140px;
    appearance: none;
}

.ma-dropdown-wrapper i {
    position: absolute;
    right: 10px;
    top: 12px;
    color: #8a2be2;
}

/* --- FILA 5: TABS --- */
.ma-row-tabs {
    margin-left: 6px;
    justify-content: center;
}

.ma-tabs-parent {
    width: 342px;
    height: 56px;
    background-color: #2a2a2a;
    border-width: 1px;
    border-style: solid;
    border-color: #4d4d4d;
    border-radius: 8px;
    padding: 8px;
    display: flex;
    gap: 8px;
    box-sizing: border-box;
    margin: 0 auto;
    
}

.ma-tab-btn {
    width: 164px;
    height: 38px;
    border: none;
    background: transparent;
    color: #888;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
}

.ma-tab-btn:hover {
    background-color: #333333;
}

.ma-tab-btn.ma-active {
    background-color: #8a2be2;
    color: white;
}

/* --- FILA 6: GALERÍA --- */
.ma-row-gallery {
    justify-content: center;
}

.ma-gallery-parent {
    width: 665px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* --- CARTA DE AUDIO --- */
.ma-audio-card {
    width: 160px;
    height: 110px;
    background-color: #151515;
    border-radius: 8px;
    position: relative;
}

.ma-card-inner-box {
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 4px;
    overflow: hidden;
}

.ma-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.4;
}

.ma-card-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding-top: 12px;
    padding-bottom: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.ma-card-title {
    font-weight: bold;
    font-size: 13px;
    color: white;
    margin-bottom: 5px;
    /* --- ESTO ACTIVA EL "..." --- */
    width: 90%;             /* Define un ancho para saber dónde cortar */
    white-space: nowrap;    /* Evita que el texto baje a otra línea */
    overflow: hidden;       /* Esconde lo que sobra */
    text-overflow: ellipsis; /* Añade los tres puntos (...) */
}

.ma-card-duration {
    font-size: 13px;
    font-weight: bold;
    padding-left: 6px;
    padding-right: 6px;
    padding-top: 2px;
    padding-bottom: 2px;
    border-radius: 10px;
    color: #ffffff;
}

.ma-card-footer {
    position: absolute;
    bottom: 5px;
    display: flex;
    gap: 5px;
}

.ma-btn-play, 
.ma-btn-check,
.ma-btn-delete {
    width: 45px;
    height: 38px;
    background-color: #2a2a2a;
    border-width: 1px;
    border-style: solid;
    border-color: #4d4d4d;
    color: white;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ma-btn-play:hover, 
.ma-btn-check:hover,
.ma-btn-delete:hover {
    background-color: #333333;
    border-color: #494949;
}

/* INFO-BOX */

.ma-row-local-controls {
    display: flex;
    align-items: center;
    justify-content: center; /* Centra también la fila del botón de carpeta */
    gap: 10px;
    margin-bottom: 20px;
    width: 100%;
}

.ma-btn-folder {
    background-color: #2a2a2a;
    border: 1px solid #4d4d4d;
    color: white;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
}

/* Clase principal alineada a 38px de alto */
.ma-info-box-aligned {
    display: flex;
    align-items: center;      /* Centra el texto verticalmente */
    width: fit-content;
    height: 38px;             /* Altura exacta del botón */
    background-color: rgba(92, 29, 128, 0.1);
    border-left: 4px solid #5c1d80;
    border-radius: 6px; 
    padding: 0 20px;          /* 0 arriba/abajo para dejar que height mande */
    box-sizing: border-box;   /* Asegura que los 38px incluyan todo */
}

/* Estilo del párrafo interno */
.ma-info-box-aligned p {
    color: #d9d9d9;
    font-size: 13px;          /* Tamaño solicitado */
    margin: 0;                /* Quitamos márgenes para evitar desbordes */
    line-height: 1;           /* Ayuda a que el centrado sea perfecto */
}

/* MODAL DE ACCIÓN */
/* Nueva clase exclusiva para el modal de Acción */
.ae-modal-overlay {
    position: fixed; /* O absolute, según prefieras */
    top: 0; left: 0; 
    width: 100%; height: 100%;
    background-color: rgba(50, 50, 50, 0.3); /* Su propio fondo si quieres */
    display: none; /* Se activa con .show */
    align-items: center;
    justify-content: center;
    z-index: 11000; /* NIVEL DE TRABAJO */
    backdrop-filter: blur(2px);
}

.ae-modal-overlay.show {
    display: flex;
}


/* =========================================
   MODAL DE EVENTOS - ESTRUCTURA PROFESIONAL
   ========================================= */

.ev-modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(50, 50, 50, 0.3);
    z-index: 11000; /* Igual que acciones, pero independiente */
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}

.ev-modal-overlay.show { display: flex; }

.ev-modal-box {
    background-color: #2a2a2a;
    border: 1px solid #4d4d4d;
    border-radius: 8px;
    width: 720px;
    height: 915px;
    max-height: 95vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}

/* AJUSTE PARA PANTALLAS PEQUEÑAS (Igual que Acciones) */
@media (max-height: 950px) {
    .ev-modal-box {
        height: 780px;
    }
}

.ev-modal-header {
    padding: 15px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #ffffff;
    font-weight: bold;
}

.ev-modal-close {
    background: none; border: none; color: #fff; font-size: 24px; cursor: pointer;
}

.ev-header-divider {
    height: 1px; background-color: #4d4d4d; width: 100%;
}

.ev-modal-body {
    padding: 20px 30px;
    overflow-y: auto;
    flex: 1;
}

/* Fila 2: Switcher */
.ev-platform-switcher {
    display: flex;
    background-color: #1e1e1e;
    border-radius: 8px;
    padding: 5px;
    width: fit-content;
    margin: 0 auto 25px auto;
    border: 1px solid #4d4d4d;
}

.ev-tab {
    padding: 8px 30px;
    color: #888;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.ev-tab.active {
    background-color: #8a2be2;
    color: white;
}

/* Filas de 2 Columnas */
.ev-modal-row-split {
    display: flex;
    margin-bottom: 30px;
    padding: 43px;
}

.ev-col-label {
    width: 210px;
    color: #ffffff;
    font-size: 14px;
    padding-top: 5px;
}

.ev-col-content {
    margin-top: 5px;
    margin-left: 70px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Ajuste de alineación para el contenedor de usuario específico */
#ev-specific-user-container {
    margin-left: -1px; /* Corrige el desfase visual de 1px */
}

/* Estilo Radio Buttons Personalizados */
.ev-radio-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #ffffff;
    font-size: 14px;
    cursor: pointer;
}

.ev-radio-item input { display: none; }

.ev-radio-item span {
    width: 20px; height: 20px;
    border: 2px solid #4d4d4d;
    border-radius: 50%;
    position: relative;
    background-color: #2a2a2a;
}

.ev-radio-item input:checked + span {
    border-color: #8a2be2;
}

.ev-radio-item input:checked + span::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 10px; height: 10px;
    background-color: #8a2be2;
    border-radius: 50%;
}

/* Filas estándar */
.ev-modal-row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 15px;
    padding-right: 26px;
}

.ev-modal-row label {
    margin-left: 42px;
    width: 280px;        /* ESTO crea la columna para el texto */
    flex-shrink: 0;      /* Evita que el texto se encoja */
    color: white; 
    font-size: 14px;
}

/* Fila 9: Upload Group */
.ev-upload-group {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 280px;
}

.ev-btn-upload {
    background-color: #2a2a2a;
    border: 1px solid #4d4d4d;
    color: white;
    height: 38px;
    padding: 0 15px;
    border-radius: 6px;
    cursor: pointer;
}

.ev-hint { color: #b0b0b0; font-size: 13px; flex: 1; }

.ev-btn-gallery {
    width: 38px; height: 38px;
    background-color: #2a2a2a;
    border: 1px solid #4d4d4d;
    color: white;
    border-radius: 6px;
    cursor: pointer;
}

/* Botones finales */
.ev-modal-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 36px;
    padding-bottom: 21px;
}

.ev-btn-apply, .ev-btn-discard {
    width: 170px; height: 38px;
    border-radius: 6px;
    border: 1px solid #4d4d4d;
    background-color: #2a2a2a;
    color: white;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}

.ev-btn-apply:hover { border-color: #8a2be2; }

/* =========================================
   PÁGINAS DE ACCIONES Y EVENTOS
   ========================================= */

.ae-pagination-container {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 30px;
}

.ae-btn-pagination {
    background-color: #2a2a2a;
    border: none;
    color: white;
    width: 38px;
    height: 38px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.ae-btn-pagination:hover:not(:disabled) {
    background-color: #333;
    border-color: var(--accent-light);
}

.ae-btn-pagination.active {
    background-color: #5c1d80;
    font-weight: bold;
}

.ae-btn-pagination:disabled {
    opacity: 0.4;
    cursor: default;
}

/* =========================================
   BLOQUE DE EVENTOS PARA USUARIOS FREE
   ========================================= */

/* Color base para los textos dentro de la tabla */
.ae-table-wrapper .ae-row-data span,
.ae-table-wrapper .ae-row-data .ae-col-desc,
.ae-table-wrapper .ae-row-data .ae-col-who {
    color: #eee;
}

/* Fondo de la fila limitada */
.ae-table-wrapper .ae-row-data.ae-row-limited {
    background-color: rgba(255, 77, 77, 0.03);
}

/* Especificidad alta: Color rojo para textos en filas limitadas */
.ae-table-wrapper .ae-row-data.ae-row-limited span, 
.ae-table-wrapper .ae-row-data.ae-row-limited .ae-col-desc,
.ae-table-wrapper .ae-row-data.ae-row-limited .ae-col-who {
    color: #ff4d4d;
}

/* Cursor manito siempre */
.ae-table-wrapper .ae-row-limited .ae-icon-btn,
.ae-table-wrapper .ae-row-limited .custom-chk {
    cursor: pointer;
}

/* =========================================
   SISTEMA MM (MEDIA MANAGER) - 100% AISLADO
   ========================================= */

.mm-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(50, 50, 50, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 12000;
}

.mm-modal-container {
    background-color: #2a2a2a;
    border: 1px solid #4d4d4d;
    border-radius: 12px;
    width: 760px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mm-modal-header {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    border-bottom: 1px solid #4d4d4d;
}

.mm-modal-title { font-weight: bold; font-size: 18px; color: white; }
.mm-close-btn { background: none; border: none; color: white; font-size: 24px; cursor: pointer; }

.mm-modal-body { padding: 25px; overflow-y: auto; flex: 1; }

.mm-layout-row { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; }

/* Inputs */
.mm-input-field {
    height: 38px;
    background-color: #2a2a2a;
    border: 1px solid #4d4d4d;
    border-radius: 6px;
    color: white;
    padding: 0 12px;
    outline: none;
    font-size: 14px;
}

.mm-w300 { width: 300px; }
.mm-w180 { width: 180px; }

/* Buscador con Lupa (Independiente) */
.mm-search-block {
    position: relative;
    width: 300px;
}

.mm-search-block i {
    position: absolute;
    left: 12px;
    top: 11px;
    color: #757575;
}

.mm-search-block .mm-input-field {
    width: 100%;
    padding-left: 35px;
}

/* Badge Segundos Gris */
.mm-seconds-counter {
    height: 38px;
    background-color: #2a2a2a;
    border: 1px solid #4d4d4d;
    border-radius: 6px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mm-seconds-counter input {
    width: 30px;
    background: transparent;
    border: none;
    color: white;
    text-align: right;
    outline: none;
}

.mm-seconds-counter p { color: white; font-size: 13px; margin: 0; }

/* Botones de acción */
.mm-action-btn {
    height: 38px;
    padding: 0 20px;
    background-color: #2a2a2a;
    border: 1px solid #4d4d4d;
    border-radius: 6px;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}
.mm-action-btn:hover { 
    background-color: #333333;
    border-color: #494949;
}

/* Tabs */
.mm-tabs-wrapper { display: flex; justify-content: center; margin-bottom: 25px; }
.mm-tabs-group {
    background-color: #2a2a2a;
    border: 1px solid #4d4d4d;
    border-radius: 8px;
    padding: 8px;
    display: flex;
    gap: 5px;
}

.mm-tab-btn {
    height: 38px;
    padding: 0 25px;
    border: none;
    background: transparent;
    color: #888;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
}

.mm-tab-btn.active { background-color: #8a2be2; color: white; }

/* Galería */
.mm-gallery-grid { 
    display: flex; 
    flex-wrap: wrap; gap: 12px; 
    justify-content: flex-start;
    gap: 12px;
}

/* La carta ahora controla el recorte */
.mm-media-card {
    width: 160px;
    height: 120px;
    background-color: #151515;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    border: 1px solid #333;
    display: flex;
    flex-direction: column;
}

.mm-card-top { flex: 1; position: relative; }
.mm-card-top img { width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }

.mm-card-name-label {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    height: 80px; /* Limitamos la altura al área de imagen, sin tocar los botones */
    display: flex;
    align-items: center; /* Centra verticalmente en esos 80px */
    justify-content: center;
    padding: 10px;
    box-sizing: border-box;
    z-index: 2;
    pointer-events: none;
    text-align: center;
}

.mm-card-name-label span {
    font-size: 11px;
    font-weight: bold;
    color: white;
    word-break: break-all;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8); /* Sombra para que se lea en fotos claras */
}

/* Los botones ahora flotan (posición absoluta) */
.mm-card-btns {
    position: absolute;
    bottom: 5px;
    left: 5px;
    right: 5px;
    height: 35px; /* Altura igual a los de audio */
    display: flex;
    gap: 4px;
    background: transparent; /* Sin fondo sólido para que floten */
    padding: 0;
}

/* El botón de la carta */
.mm-card-action {
    flex: 1;
    height: 100%;
    background-color: #2a2a2a;
    border: 1px solid #4d4d4d;
    color: white;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.mm-card-action:hover {
    background-color: #333;
}

/* Alineación del preview en el modal de acciones */
#ae-media-selected-display {
    display: none; 
    align-items: center; 
    gap: 15px; 
    margin-top: 15px;
    padding-left: 0; /* Asegura que empiece pegado a la izquierda */
}/* --- COMPONENTE: BARRA DE ENLACE DE OVERLAY --- */
.overlay-link-bar {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
    width: 100%; /* Permite que la barra use el ancho de su contenedor padre */
    position: relative; /* Cirugía: permite posicionar la máscara encima */
}

.overlay-input-link {
    flex: 1; /* Permite que el input crezca y se encoja según el espacio */
    max-width: 500px; /* <--- No pasará de 500px aunque sobre espacio */
    min-width: 0; /* <--- Permite que se encoja sin romperse en pantallas pequeñas */
    height: 38px;
    background-color: #2a2a2a;
    border: 1px solid #4d4d4d;
    border-radius: 6px;
    padding: 0 15px;
    color: #d4d4d4;
    font-size: 13px;
    outline: none;
}

.overlay-btn-group {
    display: flex;
    gap: 8px;
    flex-shrink: 0; /* Evita que los botones se aplasten cuando el link se encoge */
}

/* Botón de la barra (38px de alto, estilo 2a2a2a) */
.btn-gallery {
    height: 38px;
    padding: 0 15px;
    background-color: #2a2a2a;
    border: 1px solid #4d4d4d;
    color: #fff;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.btn-gallery:hover { background-color: #333333; border-color: #494949; }

/* --- DISEÑO DE CONTENIDO (Preview + Config) --- */
.overlay-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr; /* Preview grande, Config pequeña */
    gap: 20px;
}

.overlay-preview-area {
    background-color: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.overlay-config-area {
    padding-left: 10px;
}

.overlay-config-area h4 {
    color: #fff;
    font-size: 14px;
    margin-bottom: 15px;
    border-bottom: 1px solid #333;
    padding-bottom: 5px;
}

.overlay-container {
    background-color: #2a2a2a;
    border: 1px solid #4d4d4d;
    border-radius: 6px;
    padding: 10px;
    gap: 10px;
    
    /* CONFIGURACIÓN DE ANCHO */
    display: flex;
    flex-direction: row;
    width: 100%;       /* Intenta ocupar el ancho disponible */
    max-width: 945px;  /* Pero nunca pasará de 945px */
    box-sizing: border-box; /* Asegura que el padding no sume extra al ancho */

    /* MANEJO DE CONTENIDO */
    overflow-y: auto;  /* Scroll vertical si el contenido es muy alto */
    overflow-x: hidden; /* Evita scroll horizontal si el contenido se ajusta bien */
}

.config-container {
    background-color: #1d1c1c;
    border: 1px solid #4d4d4d;
    border-radius: 6px;
    padding: 10px;
    height: 300px;
    
    /* Agregamos esto para controlar el ancho */
    width: 100%;       /* Ocupa el espacio disponible... */
    max-width: 360px;  /* ...pero detente al llegar a 345px */
    box-sizing: border-box; /* Para que el padding no rompa el ancho */
}
.config-container h4 {
    color: #ffffff; 
    font-weight: bold;
}

.overlay-preview {
    background-color: #1d1c1c;
    border: 1px solid #4d4d4d;
    border-radius: 6px;
    
    /* CAMBIO AQUÍ: */
    width: 100%;       /* Intenta llenar el espacio */
    flex: 1;           /* Ayuda a que conviva mejor con la configuración en el Flexbox */
}

.overlay-preview iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    pointer-events: none; /* TRUCO: Evita que el usuario haga click dentro del overlay por error */
}

.horizontal-configuration-options {
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.vertical-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vertical-options label {
    color: #ffffff;
    font-size: 11px;
}

.vertical-configuration-options {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.horizontal-options {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
}

.horizontal-options label {
    color: #ffffff;
    font-size: 11px;
}

.config-container .ts-unit-field {
    width: 160px; /* Aquí ajustas el ancho que quieras */
    flex: none;    /* Evita que intente estirarse o encogerse si está en un flexbox */
}

/* Solo los botones que están en la fila de arriba de Subasta */
#oga-auction-box > .horizontal-configuration-options .btn-gallery {
    height: 38px;           /* Altura igual que los inputs */
    padding: 0 35px;             /* Quitamos el espacio de los lados */
    justify-content: center; /* Centramos el icono */
    flex-shrink: 0;         /* Para que no se aplasten */
}

/* META DE WIN */

/* Contenedor principal de la configuración Win */
.win-setup-wrapper {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Estilo del título con el trofeo */
.win-header {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 22px;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 30px;
}

.trophy-icon {
    color: #ffaa00; /* Color oro para el trofeo */
    font-size: 28px;
}

/* Estilo de cada fila (Meta / Conteo) */
.win-row {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Texto a la izquierda, botones a la derecha */
}

.win-row label {
    color: #ffffff; /* Color gris como la referencia */
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 1px;
}

/* Grupo de botones e input */
.win-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Botones de + y - */
.btn-step {
    background: none;
    border: none;
    color: #8A2BE2; /* Color verde para los simbolos como la referencia */
    font-size: 24px;
    cursor: pointer;
    transition: transform 0.1s, opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-step i {
    -webkit-text-stroke: 3px #8a2be2;
    font-weight: 1000; /* Asegura que use la versión más pesada del icono */
    font-size: 30px;  /* Puedes subirle un poco el tamaño también */
}

.btn-step:hover {
    opacity: 0.8;
    transform: scale(1.1);
}

.btn-step:active {
    transform: scale(0.9);
}

/* El input pequeño personalizado */
.win-small-input {
    width: 80px; /* Ancho fijo para que se vea como la referencia */
    min-width: 80px;
    height: 45px; /* Un poco más alto para que sea fácil de ver */
}

.win-small-input input {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}

/* Solo los labels de la fila superior de la sección Subasta */
#oga-auction-box > .horizontal-configuration-options .vertical-options label {
    font-size: 14px; /* Ajusta este valor al tamaño que desees */
}

/* SUBASTA */
.auction-config-container {
    background-color: #1d1c1c;
    border: 1px solid #4d4d4d;
    border-radius: 6px;
    padding: 10px;
    min-height: 400px;
    height: auto;
    
    /* Agregamos esto para controlar el ancho */
    width: 100%;       /* Ocupa el espacio disponible... */
    max-width: 360px;  /* ...pero detente al llegar a 345px */
    box-sizing: border-box; /* Para que el padding no rompa el ancho */
}
.auction-config-container h4 {
    color: #ffffff; 
    font-weight: bold;
}

.btn-add-coins {
    width: 165px;
    height: 38px;
    background-color: #5c1d80;
    border: 1px solid #4d4d4d;
    border-radius: 6px;
    color: #ffffff;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.config-auction-container {
    background-color: #1d1c1c;
    border: 1px solid #4d4d4d;
    border-radius: 6px;
    padding: 10px;
    min-height: 300px;
    height: auto;
    
    /* Agregamos esto para controlar el ancho */
    width: 100%;       /* Ocupa el espacio disponible... */
    max-width: 600px;  /* ...pero detente al llegar a 345px */
    box-sizing: border-box; /* Para que el padding no rompa el ancho */
}

.config-auction-container h4 {
    color: #ffffff; 
    font-weight: bold;
    margin-bottom: 10px;
}

.auction-container {
    background-color: #1d1c1c;
    border: 1px solid #4d4d4d;
    border-radius: 6px;
    overflow: hidden;
    height: 368px;
    
    /* Agregamos esto para controlar el ancho */
    width: 100%;       /* Ocupa el espacio disponible... */
    max-width: 540px;  /* ...pero detente al llegar a 345px */
    box-sizing: border-box; /* Para que el padding no rompa el ancho */
}

.auction-container h4 {
    color: #ffffff; 
    font-weight: bold;
}

/* Estilo de la cabecera */
.auction-header {
    display: flex;
    background-color: #2d2d2d; /* Un gris un poco más claro para la barra */
    padding: 10px;
    /* border-bottom: 1px solid #4d4d4d; */
}

.auction-header span {
    color: #ffffff; /* Color de texto gris tenue */
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
}

/* Definición de anchos de columna para que todo alinee */
.col-rank { width: 5%; text-align: center; }
.col-player { width: 40%; }
.col-coins { width: 20%; text-align: center; }
.col-actions { width: 35%; text-align: center; }

/* Cuerpo y mensaje de "vacío" */
.auction-body {
    display: block; /* Cambiado de flex a block para que los hijos se apilen */
    width: 100%;
    overflow-y: auto;
    height: 331px;
}

.empty-message {
    width: 100%;
    text-align: center;
    margin-top: 20px; /* Ajusta para que no pegue al header */
    color: #666666;
}

/* CAJA DE INFORMACIÓN INFERIOR */
.auction-info {
    margin-top: 10px;
    padding: 15px; /* Un poco más de aire interno */
    border: 1px solid #4d4d4d;
    border-radius: 8px;
    background-color: #2a2a2a;
    display: flex;
    flex-direction: column;
    gap: 12px; /* Más espacio entre las dos filas */
}

.auction-info-row {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #ffffff;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ESTO ES LO QUE CAMBIA: Solo el icono es dorado, no el texto */
.auction-info-row .info-icon-gold {
    color: #ffaa00; /* Dorado brillante para el icono */
    width: 20px;    /* Ancho fijo para que el texto se alinee verticalmente */
    text-align: center;
    font-size: 16px;
}

/* Tarjeta de participante en el Dashboard */
.auc-participant-card {
    display: flex;
    align-items: center;
    margin: 0; /* Eliminado el margen para quitar la separación entre cuadros */
    padding: 8px;
    border-radius: 0; /* Quitamos el redondeo para que los cuadros encajen perfectamente */
    background-color: #2a2a2a;
    border: 1px solid #3d3d3d;
    gap: 10px;
    box-sizing: border-box; /* Importante para que el padding no rompa el ancho */
}

/* Colores especiales Top 3 */
.auc-row-gold { border-color: #aa8c34; background-color: #483618; }
.auc-row-silver { border-color: #8a8a8a; background-color: #414040; }
.auc-row-bronze { border-color: #a25f2b; background-color: #492d1a; }

.auc-col-rank { 
    width: 5%; /* Alineado con .col-rank */
    font-weight: bold; 
    color: #888; 
    text-align: center; 
    display: flex;
    justify-content: center;
    align-items: center;
}

.auc-col-info { 
    width: 40%; /* Alineado con .col-player */
    flex: none; /* Evitamos que crezca más de lo definido */
    display: flex; 
    align-items: center; 
    gap: 10px; 
    overflow: hidden; 
}

.auc-pfp {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    background-color: #444; /* Fondo gris si no hay imagen */
    /* Imagen de silueta por defecto si falla el src */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23cccccc' d='M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.7-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 448v48c0 17.7 14.3 32 32 32h384c17.7 0 32-14.3 32-32v-48c0-99.8-60.2-160-134.4-160z'/%3E%3C/svg%3E");
    background-size: 60%;
    background-repeat: no-repeat;
    background-position: center;
}
.auc-name-box { display: flex; flex-direction: column; overflow: hidden; }
.auc-nick { color: white; font-weight: bold; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auc-user { color: #aaa; font-size: 11px; }

.auc-col-coins { 
    width: 20%; /* Alineado con .col-coins */
    text-align: center; 
    color: #ffeb3b; 
    font-weight: bold; 
    font-size: 15px; 
    display: flex;
    justify-content: center;
    align-items: center;
}

.auc-col-actions { 
    width: 35%; /* Alineado con .col-actions */
    display: flex; 
    gap: 5px; 
    align-items: center; 
    justify-content: center;
}

.auc-mini-input { 
    width: 60px; 
    height: 38px; 
    background: #2a2a2a; 
    border: 1px solid #4d4d4d; 
    color: white; 
    text-align: center;
    border-radius: 6px; 
    padding-right: 2px;
}

.auc-btn-sub { 
    background: #444; /* Gris oscuro o #f39c12 para naranja */
    color: white; 
    border: none; 
    width: 38px; 
    height: 38px; 
    border-radius: 4px; 
    cursor: pointer; 
}
.auc-btn-add { background: #10c35b; color: white; border: none; width: 38px; height: 38px; border-radius: 4px; cursor: pointer; }
.auc-btn-kick { background: #e74c3c; color: white; border: none; width: 38px; height: 38px; border-radius: 4px; cursor: pointer; }

/* --- DISEÑO DE LA MÁSCARA PREMIUM / BLOQUEO PARA USUARIOS FREE --- */
.premium-mask {
    display: none;
    position: absolute;
    padding: 0 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #d4d4d4; /* Mismo color que el texto original */
    font-size: 13px;
    font-weight: normal;
    pointer-events: none;
    z-index: 5;
}

/* --- LÓGICA DE BLOQUEO POR ESPECIFICIDAD (SIN !IMPORTANT) --- */
/* Cuando el ancestro es .locked-section, modificamos el input y la máscara */
.locked-section .overlay-link-bar .overlay-input-link {
    color: transparent;
    user-select: none;
}

.locked-section .overlay-link-bar .premium-mask {
    display: flex;
}