/* =========================================
   HOME.CSS - HERO & SERVER INFO (HUD ROW)
   ========================================= */

:root {
    --theme-main: #8bc34a;
    --theme-glow: rgba(139, 195, 74, 0.6);
    --card-bg-transparent: rgba(0, 0, 0, 0.4); 
}

/* --- HERO SECTION INTEGRADA (Vía Láctea) --- */
.hero-section-integrated {
    position: relative;
    padding: 100px 0 50px 0; 
    margin-top: 60px; 
    text-align: center;
    overflow: visible; 
    z-index: 5;
}

.hero-container {
    display: flex;
    justify-content: center;
    align-items: center; 
    position: relative;
}

/* --- LOGO CENTRAL --- */
.hero-center-logo {
    position: relative;
    z-index: 10;
    margin: 0 auto; 
}

.main-logo-anim {
    max-height: 240px; 
    width: auto;
    filter: drop-shadow(0 0 25px rgba(0,0,0,0.8));
    animation: floatingLogo 3s ease-in-out infinite; 
}

/* Brillo detrás del logo */
.hero-glow {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 300px; height: 300px;
    background: radial-gradient(circle, var(--theme-glow) 0%, transparent 60%);
    z-index: -1; opacity: 0.5;
    animation: pulseGlow 4s infinite alternate;
}

/* --- ANIMACIONES DEL LOGO --- */
@keyframes floatingLogo {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}
@keyframes pulseGlow {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.4; }
    100% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.7; }
}
/* =========================================================
   NUEVA BARRA HORIZONTAL DE ESTADÍSTICAS (HUD ROW - COMPACTA)
   ========================================================= */
.server-stats-row {
    display: flex;
    justify-content: space-between;
    gap: 8px; /* Menos espacio entre paneles para que entren todos */
    margin-bottom: 30px; 
    padding: 10px; /* Contenedor más ajustado */
    background: rgba(5, 10, 5, 0.6); 
    border-radius: 12px;
    border: 1px solid rgba(163, 230, 53, 0.1);
    backdrop-filter: blur(5px);
}

.stat-panel {
    flex: 1; 
    display: flex;
    align-items: center;
    justify-content: center; /* Centramos el contenido internamente */
    background: linear-gradient(135deg, rgba(20, 30, 20, 0.85) 0%, rgba(10, 15, 10, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-left: 3px solid rgba(163, 230, 53, 0.3); 
    border-radius: 8px;
    padding: 8px 10px; /* Padding interior reducido */
    min-width: 0; /* Permite que se encojan lo necesario */
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    white-space: nowrap; /* Evita que el texto baje a otra línea */
}

.stat-panel:hover {
    transform: translateY(-3px);
    border-color: rgba(163, 230, 53, 0.4);
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

.stat-icon {
    font-size: 18px; /* Iconos un poco más pequeños */
    color: var(--theme-main);
    margin-right: 8px; /* Menor separación icono-texto */
    filter: drop-shadow(0 0 5px rgba(163, 230, 53, 0.3));
    transition: 0.3s;
}

.stat-info span { display: block; font-size: 9px; color: #94a3b8; font-weight: bold; letter-spacing: 1px; font-family: 'Oswald', sans-serif; text-transform: uppercase; }
.stat-info b { display: block; font-size: 14px; color: #fff; font-family: 'Oswald'; line-height: 1.1; text-shadow: 0 2px 5px rgba(0,0,0,0.5); }

/* --- EL PANEL ONLINE DESTACADO (BRILLO TOTAL) --- */
.stat-panel.highlight-online {
    background: linear-gradient(135deg, rgba(163, 230, 53, 0.2) 0%, rgba(15, 25, 15, 0.95) 100%) !important;
    border: 1px solid var(--theme-main) !important;
    border-bottom: 3px solid var(--theme-main) !important; 
    box-shadow: 0 0 25px rgba(163, 230, 53, 0.4), inset 0 0 15px rgba(163, 230, 53, 0.2) !important;
    animation: pulseOnlineRow 2.5s infinite alternate; 
    z-index: 10; 
    padding: 8px 15px; /* Un poquito más ancho que los demás */
}

.stat-panel.highlight-online .stat-icon {
    font-size: 22px;
    filter: drop-shadow(0 0 10px var(--theme-main));
}

.stat-panel.highlight-online .stat-info span { color: var(--theme-main); }
.stat-panel.highlight-online .stat-info b {
    font-size: 17px;
    text-shadow: 0 0 15px var(--theme-glow);
}

@keyframes pulseOnlineRow {
    0% { box-shadow: 0 0 15px rgba(163, 230, 53, 0.3); border-color: rgba(163, 230, 53, 0.6); }
    100% { box-shadow: 0 0 30px rgba(163, 230, 53, 0.7); border-color: #bef264; }
}


/* =========================================================
   CONTENEDOR PRINCIPAL DEL HOME (Backdrop)
   ========================================================= */
.home-panel-wrapper {
    background: rgba(8, 12, 8, 0.85); 
    border: 1px solid rgba(139, 195, 74, 0.2); 
    border-top: 2px solid var(--theme-main);    
    padding: 30px;
    border-radius: 6px;
    box-shadow: 0 0 50px rgba(0,0,0,0.8); 
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    position: relative;
    margin-bottom: 50px;
    overflow: hidden; 
}

.home-panel-wrapper::before {
    content: ''; position: absolute; top: 0; left: 0; 
    width: 20px; height: 20px;
    border-top: 2px solid #fff; border-left: 2px solid #fff; opacity: 0.5;
}
.home-panel-wrapper::after {
    content: ''; position: absolute; bottom: 0; right: 0; 
    width: 20px; height: 20px;
    border-bottom: 2px solid #fff; border-right: 2px solid #fff; opacity: 0.5;
}


/* =========================================================
   BANNER CASTLE SIEGE Y NOTICIAS
   ========================================================= */
.hex-siege-banner {
    display: flex; align-items: center; justify-content: space-between;
    background: rgba(5, 10, 5, 0.9); border: 1px solid #1a261a; border-bottom: 3px solid var(--theme-main);
    padding: 25px 40px; margin-bottom: 30px; position: relative;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5); overflow: hidden;
}
.hs-part { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.logo-part { flex: 0 0 auto; margin-right: 35px; }
.hs-logo-frame { width: 80px; height: 80px; background: #000; border: 2px solid var(--theme-main); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 20px rgba(139, 195, 74, 0.4); transform: rotate(45deg); }
.hs-logo-frame img { transform: rotate(-45deg); width: 50px; }
.hs-label { font-size: 10px; color: #888; text-transform: uppercase; margin-bottom: 5px; font-family: 'Oswald'; }
.hs-value-main { margin: 0; font-size: 28px; font-family: 'Oswald'; color: var(--theme-main); font-weight: bold; }
.hs-value-sub { margin: 0; font-size: 18px; font-family: 'Oswald'; color: #fff; }
.hs-status-tag { background: rgba(139,195,74,0.1); color: #fff; padding: 6px 15px; border: 1px solid var(--theme-main); display: inline-block; font-weight: bold; }
.time-part { align-items: flex-end; text-align: right; }
.hex-corner { position: absolute; width: 15px; height: 15px; border-color: var(--theme-main); border-style: solid; opacity: 0.8; }
.top-left { top: 0; left: 0; border-width: 2px 0 0 2px; }
.bottom-right { bottom: 0; right: 0; border-width: 0 2px 2px 0; }

.list-group-toxic .list-group-item { background: transparent !important; border: none !important; padding: 0 !important; }
.list-group-separator { height: 1px; background: rgba(139, 195, 74, 0.2); position: relative; overflow: hidden; margin: 0 20px; }
.list-group-separator::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, var(--theme-main), transparent); animation: separatorScan 3s infinite linear; }
@keyframes separatorScan { 0% { left: -100%; } 100% { left: 100%; } }

.news-header-toggle { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; cursor: pointer; transition: 0.3s; width: 100%; }
.list-group-item:hover .news-header-toggle { background: rgba(139, 195, 74, 0.05); }
.news-title-side { display: flex; align-items: center; gap: 12px; flex: 1; overflow: hidden; margin-right: 10px; }
.icon-plus-custom { color: var(--theme-main); font-size: 12px; }
.list-group-item.active .icon-plus-custom { transform: rotate(90deg); }
.list-group-item-heading { color: #eee; font-family: 'Roboto'; font-weight: 500; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 100%; }
.news-date-label { font-size: 10px; color: #666; font-family: 'Oswald'; }
.news-content-body { background: rgba(0, 0, 0, 0.3); border-top: 1px solid #0d120d; display: none; }
.news-inner-padding { padding: 20px; color: #ccc; font-size: 13px; line-height: 1.6; }

.label { display: inline-block; padding: 2px 8px; font-size: 9px; font-weight: bold; text-transform: uppercase; border-radius: 2px; min-width: 60px; text-align: center; margin-right: 5px; }
.label-toxic-success { background: rgba(139, 195, 74, 0.2); color: #8bc34a; border: 1px solid rgba(139, 195, 74, 0.4); }
.label-toxic-danger { background: rgba(244, 67, 54, 0.2); color: #f44336; border: 1px solid rgba(244, 67, 54, 0.4); }
.label-toxic-info { background: rgba(33, 150, 243, 0.2); color: #2196f3; border: 1px solid rgba(33, 150, 243, 0.4); }
.label-toxic-default { background: rgba(158, 158, 158, 0.2); color: #bbb; border: 1px solid rgba(158, 158, 158, 0.4); }


/* =========================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================= */

/* Modificado: Solo apilar en pantallas tipo Tablet/Móvil (< 992px) */
@media (max-width: 991px) {
    .server-stats-row { flex-wrap: wrap; justify-content: center; gap: 10px; }
    .stat-panel { flex: 0 0 calc(33.33% - 10px); min-width: auto; justify-content: flex-start; }
    /* El online toma una fila entera al principio para destacar en móvil */
    .stat-panel.highlight-online { flex: 0 0 100%; order: -1; margin-bottom: 10px; justify-content: center; }

    .main-logo-anim { max-height: 180px; }
    .hex-siege-banner { flex-direction: column; text-align: center; gap: 20px; padding: 25px; }
    .logo-part { margin-right: 0; }
    .time-part { align-items: center; text-align: center; width: 100%; }
    .home-panel-wrapper { padding: 15px; }
}

@media (max-width: 768px) {
    /* En celulares pequeños, 2 por fila */
    .stat-panel { flex: 0 0 calc(50% - 10px); }
    .stat-panel.highlight-online { flex: 0 0 100%; }
}

/* =========================================================
   PANELES DE MÓDULOS (NOTICIAS, UPDATES) - ESTILO SUAVE
   ========================================================= */

.home-panel-pro, .panel-default {
    background: linear-gradient(135deg, rgba(20, 30, 20, 0.6) 0%, rgba(10, 15, 10, 0.8) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-left: 3px solid rgba(163, 230, 53, 0.4) !important;
    border-top: none !important; 
    border-radius: 10px !important;
    margin-bottom: 30px !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.4) !important;
    backdrop-filter: blur(5px);
    overflow: hidden;
}

/* 1. CABECERA DEL PANEL */
.home-panel-pro .panel-heading, .panel-default > .panel-heading {
    background: rgba(0, 0, 0, 0.25) !important; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
    color: #e2e8f0 !important;
    font-family: 'Oswald', sans-serif;
    font-weight: bold;
    font-size: 14px;
    padding: 12px 20px !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: left !important; /* Forzar izquierda */
    display: flex !important;
    align-items: center !important;
}

/* 2. DESTRUIR LA ETIQUETA <center> DEL CMS */
.home-panel-pro .panel-heading center, 
.panel-default > .panel-heading center {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    text-align: left !important;
}

/* 3. FORZAR BOTÓN A LA DERECHA ABSOLUTA */
.home-panel-pro .panel-heading .pull-right,
.panel-default > .panel-heading .pull-right,
.home-panel-pro .panel-heading .btn,
.panel-default > .panel-heading .btn {
    float: none !important;
    margin-left: auto !important; /* El secreto para empujarlo a la derecha en Flexbox */
    background: rgba(163, 230, 53, 0.1) !important;
    border: 1px solid rgba(163, 230, 53, 0.3) !important;
    color: var(--theme-main) !important;
    padding: 6px 15px !important;
    font-size: 11px !important;
    border-radius: 4px !important;
    transition: 0.3s ease !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

.home-panel-pro .panel-heading .btn:hover, 
.panel-default > .panel-heading .btn:hover {
    background: var(--theme-main) !important;
    color: #000 !important;
    box-shadow: 0 0 10px rgba(163, 230, 53, 0.3) !important;
}

/* Cuerpo del Panel */
.home-panel-pro .panel-body, .panel-default > .panel-body {
    padding: 0 !important;
    background: transparent !important;
}