/* FORZAR VISIBILIDAD DEL CONFIGURADOR */
#template-customizer, 
.template-customizer-open-btn {
 z-index: 200000 !important; /* Capa superior a todo */
 visibility: visible !important;
 opacity: 1 !important;
 display: block !important;
}
/* FORZAR QUE EL TEMPLATE CUSTOMIZER ESTÉ ENCIMA DE TODO */
.template-customizer-open-btn, 
#template-customizer {
 z-index: 100000 !important; /* Un valor exageradamente alto */
 visibility: visible !important;
 opacity: 1 !important;
}
/* 1. Fondo Mágico Giratorio (FORZADO) */
.magic-bg-container {
 background: linear-gradient(135deg, #696cff 0%, #4346d3 100%) !important;
 position: relative;
 overflow: hidden;
 border: none !important;
 z-index: 1;
}

/* El círculo rúnico de fondo */
.magic-rune-bg {
 position: absolute;
 top: 50%; left: 50%;
 transform: translate(-50%, -50%);
 width: 200%; height: 200%;
 background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 0 L100 50 L50 100 L0 50 Z' fill='none' stroke='rgba(255,255,255,0.1)' stroke-width='2'/%3E%3Ccircle cx='50' cy='50' r='30' stroke='rgba(255,255,255,0.1)' stroke-width='2' fill='none'/%3E%3C/svg%3E");
 opacity: 0.4;
 animation: runeRotate 60s linear infinite;
 z-index: 0;
 pointer-events: none;
}
@keyframes runeRotate { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }

/* 2. Fix del Contador y Badge (CORRECCIÓN DE CONTRASTE) */
.server-card-body {
 display: flex; flex-direction: column; justify-content: center; align-items: center;
 height: 100%; min-height: 220px; position: relative; z-index: 2;
}

/* Contenedor negro semitransparente para el contador */
.ao-counter-container {
 width: 100%;
 background: rgba(0, 0, 0, 0.4) !important; /* Más oscuro para contraste */
 backdrop-filter: blur(4px);
 border-radius: 8px;
 padding: 12px;
 margin: 15px 0;
 border: 1px solid rgba(255,255,255,0.2);
}

/* Badge de Hora: Fondo oscuro para que el texto blanco se lea */
.magic-time-badge {
 background: rgba(0, 0, 0, 0.3) !important;
 border: 1px solid rgba(255, 255, 255, 0.3) !important;
 color: #fff !important;
 padding: 5px 15px;
 border-radius: 50rem;
 display: inline-flex; align-items: center;
}

/* Forzar color de texto blanco en la tarjeta del servidor */
.server-card-body h6, 
.ao-counter-container div, 
.ao-counter-container b { color: #fff !important; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }

/* 3. Icono del Servidor (Visible) */
.magic-icon-circle {
 background: #fff !important;
 color: #696cff !important; /* Color primario forzado */
 width: 50px; height: 50px;
 display: flex; align-items: center; justify-content: center;
 border-radius: 50%;
 box-shadow: 0 0 15px rgba(255,255,255,0.5);
}

/* 4. REPARACIÓN DEL TEMPLATE CUSTOMIZER (El engranaje flotante) */
.template-customizer-open-btn, .template-customizer {
 z-index: 9999 !important; /* Asegura que flote sobre todo */
}

/* Estilos generales */
.ao-avatar-img { border: 2px solid #696cff; }
.card-hover-effect { transition: transform 0.3s; }
.card-hover-effect:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.2); z-index: 5; }

/* 1. Fondo Mágico Giratorio para el Server Status */
.magic-bg-container {
 position: relative;
 overflow: hidden;
 background: linear-gradient(135deg, #696cff 0%, #4346d3 100%);
 z-index: 0;
}
.magic-rune-bg {
 position: absolute;
 top: 50%; left: 50%;
 transform: translate(-50%, -50%);
 width: 200%; height: 200%;
 background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 0 L100 50 L50 100 L0 50 Z' fill='none' stroke='rgba(255,255,255,0.05)' stroke-width='2'/%3E%3Ccircle cx='50' cy='50' r='30' stroke='rgba(255,255,255,0.05)' stroke-width='2' fill='none'/%3E%3C/svg%3E");
 opacity: 0.3;
 animation: runeRotate 60s linear infinite;
 z-index: -1;
}
@keyframes runeRotate { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }

/* 2. Fix del Contador y Centrado */
.server-card-body {
 display: flex;
 flex-direction: column;
 justify-content: center; /* CENTRADO VERTICAL */
 align-items: center; /* CENTRADO HORIZONTAL */
 height: 100%;
 min-height: 220px; /* Altura mínima asegurada */
}
.ao-counter-container {
 width: 100%;
 background: rgba(0, 0, 0, 0.25);
 backdrop-filter: blur(4px);
 border-radius: 8px;
 padding: 10px;
 margin: 15px 0;
 border: 1px solid rgba(255,255,255,0.1);
}
/* Estilos para los divs que uCoz genera dentro del contador */
.ao-counter-container div { 
 display: flex; justify-content: space-between; 
 color: #e6e6e6; margin-bottom: 4px; font-size: 0.85rem; 
}
.ao-counter-container b { color: #fff; font-weight: 700; text-shadow: 0 0 5px rgba(255,255,255,0.5); }
/* Arreglo del Contador Expansivo de uCoz */
.ao-counter-container .tOnline, 
.ao-counter-container .gOnline, 
.ao-counter-container .uOnline {
 display: flex;
 justify-content: space-between;
 font-size: 0.9rem;
 padding: 4px 0;
 border-bottom: 1px solid rgba(255,255,255,0.1);
 width: 100%;
 color: rgba(255,255,255,0.9);
}
.ao-counter-container b {
 color: #fff;
 background: rgba(255,255,255,0.2);
 padding: 0 6px;
 border-radius: 4px;
}

/* Arreglo del Avatar */
.ao-avatar-img {
 width: 80px; height: 80px;
 object-fit: cover;
 border: 2px solid #696cff;
}

/* Arreglo para Tablas de Rankings que no cargan */
.rank-table table { width: 100%; }
.rank-table td { padding: 5px; border-bottom: 1px solid #eee; }
/* ==========================================================================
 🎨 THEME CORE: HIGH-TECH MAGIC / ARGENTUM STYLE
 ========================================================================== */
:root {
 --ao-primary: #696cff; /* Color base Sneat */
 --ao-primary-glow: rgba(105, 108, 255, 0.5);
 --ao-neon-cyan: #00f3ff; /* Detalles Ciber-Mágicos */
 --ao-gold: #ffc107; /* Oro para items legendarios */
 --ao-fire: #ff4500; /* Para alertas/corazones */
 --ao-dark-glass: rgba(22, 33, 62, 0.85); /* Fondo de tarjetas */
 --ao-border-subtle: rgba(255, 255, 255, 0.1);
}

/* 1. SCROLLBAR "ESPADÓN DEL DRAGÓN" (Personalización Global) */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #1a1a2e; }
::-webkit-scrollbar-thumb {
 background: linear-gradient(180deg, var(--ao-primary), var(--ao-neon-cyan));
 border-radius: 4px;
 border: 1px solid #000;
}
::-webkit-scrollbar-thumb:hover { background: var(--ao-neon-cyan); }

/* 2. ANIMACIONES DEL REINO */
@keyframes heartBeat {
 0% { transform: scale(1); }
 50% { transform: scale(1.3); }
 100% { transform: scale(1); }
}
@keyframes pulseGlow {
 0% { box-shadow: 0 0 0 0 rgba(0, 243, 255, 0.7); }
 70% { box-shadow: 0 0 0 6px rgba(0, 243, 255, 0); }
 100% { box-shadow: 0 0 0 0 rgba(0, 243, 255, 0); }
}
@keyframes magicFloat {
 0%, 100% { transform: translateY(0); }
 50% { transform: translateY(-6px); }
}

/* ==========================================================================
 🔮 UI COMPONENTS: TARJETAS & INTERFAZ
 ========================================================================== */

/* Cartas que Levitan (Mejorado) */
.card, .ao-card-levitate {
 border: 1px solid var(--ao-border-subtle);
 transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 background: var(--bg-paper, #fff); /* Fallback */
 position: relative;
 overflow: hidden;
}

/* Modo Oscuro / Glassmorphism */
[data-theme="dark"] .card {
 background: var(--ao-dark-glass);
 backdrop-filter: blur(10px);
}

.card:hover, .ao-card-levitate:hover {
 transform: translateY(-5px);
 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 0 20px var(--ao-primary-glow);
 border-color: var(--ao-neon-cyan);
 z-index: 10;
}

/* Textos Mágicos */
.text-fire { color: var(--ao-fire) !important; text-shadow: 0 0 5px rgba(255, 69, 0, 0.4); }
.text-gold { color: var(--ao-gold) !important; text-shadow: 0 0 5px rgba(255, 193, 7, 0.4); }

/* Avatar con Aura (Usuarios Online) */
.avatar-online-pulse {
 border: 2px solid var(--ao-neon-cyan);
 animation: pulseGlow 2s infinite;
}

/* ==========================================================================
 🔧 UCOZ PATCH SYSTEM: MODERNIZACIÓN DE FORMULARIOS
 ========================================================================== */

/* Regla Maestra: Transforma TODOS los inputs de uCoz (Login, Search, Registro) */
.schQuery input.queryField,
input[type="text"].uLogin,
input[type="password"].uPass, 
.loginField, .passField {
 display: block;
 width: 100%;
 padding: 0.6rem 1rem;
 font-size: 0.9375rem;
 color: #566a7f;
 background-color: transparent;
 border: 1px solid #d9dee3;
 border-radius: 0.375rem;
 transition: 0.3s;
}

[data-theme="theme-default"].dark-layout .schQuery input.queryField,
[data-theme="theme-default"].dark-layout input.uLogin,
[data-theme="theme-default"].dark-layout input.uPass {
 border-color: #444;
 color: #b4b7bd;
 background-color: rgba(0,0,0,0.2);
}

/* Focus Effects */
.schQuery input.queryField:focus,
input.uLogin:focus, input.uPass:focus {
 border-color: var(--ao-primary);
 box-shadow: 0 0 0 0.25rem var(--ao-primary-glow);
 outline: 0;
}

/* Botones de uCoz (Search & Login) transformados a Primary Button */
.schBtn input.searchSbmFl,
.uLogSbm {
 display: inline-block;
 font-weight: 500;
 line-height: 1.5;
 color: #fff;
 text-align: center;
 background-color: var(--ao-primary);
 border: 1px solid var(--ao-primary);
 padding: 0.4375rem 1.25rem;
 font-size: 0.9375rem;
 border-radius: 0.375rem;
 transition: all 0.2s;
 cursor: pointer;
 width: 100%;
 box-shadow: 0 4px 10px var(--ao-primary-glow);
}
.schBtn input.searchSbmFl:hover, .uLogSbm:hover {
 background-color: #5f61e6;
 transform: translateY(-2px);
 box-shadow: 0 6px 15px var(--ao-primary-glow);
}

/* Corrección de Tablas en pestañas (Rankings) */
.tab-content table { width: 100% !important; border-collapse: separate; border-spacing: 0 0.5rem; }
.tab-content td { padding: 10px; vertical-align: middle; border-bottom: 1px solid rgba(255,255,255,0.05); }
.tab-content img { border-radius: 6px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }

/* ==========================================================================
 ⚔️ MAGIC BUTTONS: WISHLIST & COMPARE
 ========================================================================== */
.btn-icon {
 width: 38px; height: 38px;
 padding: 0 !important;
 display: inline-flex !important;
 align-items: center; justify-content: center;
 background: rgba(255, 255, 255, 0.05) !important;
 border: 1px solid var(--ao-border-subtle) !important;
 color: #a1acb8 !important;
 transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
 border-radius: 50%; /* Círculo perfecto */
}

.btn-icon:hover {
 background: var(--ao-primary) !important;
 border-color: var(--ao-primary) !important;
 color: #fff !important;
 box-shadow: 0 0 15px var(--ao-primary-glow);
 transform: rotate(15deg) scale(1.1);
}

/* Iconos inyectados (RemixIcon) */
.wish, .compare-widget { background: none !important; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.compare-widget-wrapper a { display: none !important; }

.wish::before { content: "\eb9d"; font-family: 'remixicon' !important; font-size: 1.1rem; } /* Heart Line */
.compare-widget::before { content: "\ecaf"; font-family: 'remixicon' !important; font-size: 1.1rem; } /* Scales Line */

/* Estados Activos (Agregado/Comparando) */
.wish.wdel::before, .wish.added::before { 
 content: "\eb9c"; /* Heart Fill */
 color: var(--ao-fire) !important; 
 animation: heartBeat 0.5s;
}
.compare-widget.compare-widget-del::before {
 color: var(--ao-gold) !important;
 text-shadow: 0 0 10px var(--ao-gold);
}

/* ==========================================================================
 ⚡ SWIPER SLIDER (LÓGICA DE CARGA)
 ========================================================================== */
#swiper-weekly-sales-with-bg { opacity: 0; transition: opacity 0.6s ease; }
#swiper-weekly-sales-with-bg.loaded { opacity: 1; }
#swiper-weekly-sales-with-bg .swiper-slide { width: 100%; height: 100%; }
#swiper-weekly-sales-with-bg .swiper-pagination-bullet-active {
 background: var(--ao-primary) !important;
 box-shadow: 0 0 10px var(--ao-primary);
 transform: scale(1.2);
}

/* Estructura para el Buscador dentro de Cards */
.searchForm { width: 100%; }
.schQuery { width: 100%; margin-bottom: 0.5rem; }
.schBtn { width: 100%; }