/* ========================================
    🧱 ESTILOS GENERALES DEL CUERPO Y CONTENEDOR
======================================== */

body {
    font-family: Arial, sans-serif;
    margin: 0;
    background: linear-gradient(to bottom, #0d0d0d, #1a1a1a, #2a2a2a);
    color: #e0e0e0;
    font-size: 16px;
    line-height: 1.6;
}

.container {
    width: 80%;
    margin: 0 auto; /* MODIFICADO: Top=0, Lados=auto, Bottom=30px. ¡Este margen inferior crea el espacio! */

    background-color: #1a1a1a;
    border: 1px solid #333;
    /* SOMBRA MEJORADA: La hacemos más larga hacia abajo y más difuminada para el efecto "flotante" */
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.8);
    border-radius: 0; /* Mantenemos los bordes superiores rectos */
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    overflow: hidden; /* Importante para que el contenido respete los bordes redondeados */
}

/* ========================================
    🦶 ESTILOS DEL FOOTER
======================================== */

.site-footer {
    width: 15%;
    margin: 0 auto 30px;
    /* 2. CONTROL PRECISO DEL GROSOR */
    /* Usa padding-top y padding-bottom para un control exacto. ¡Prueba con valores bajos como 5px o incluso 2px! */
    padding-top: 5px;
    padding-bottom: 5px;
    /* --- El resto de tus propiedades se mantienen --- */
    background-color: #1a1a1a;
    border-left: 1px solid #333;
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.8);
    text-align: center;
    box-sizing: border-box;
}

    /* 1. LA CLAVE PARA QUITAR LA SEPARACIÓN Y EL GROSOR EXTRA */
    /* Esta regla elimina el margen del párrafo que está DENTRO del footer */
    .site-footer p {
        margin: 0; /* ¡ESTA LÍNEA ES LA MÁS IMPORTANTE! */
        font-size: 14px;
        color: #a0a0a0;
    }

/* ========================================
    ✨ ESTILOS DEL ENLACE DEL FOOTER
======================================== */

.footer-link {
    color: #a0a0a0; /* Mismo color dorado de la navegación para que destaque */
    text-decoration: none; /* Quita la línea de subrayado por defecto */
    transition: color 0.3s ease, text-shadow 0.3s ease; /* Transición suave para el efecto */
}

.footer-link:hover {
    color: #d4af37; /* El texto se pone blanco al pasar el mouse, igual que en la nav */
    text-shadow: 0 0 8px rgba(212, 175, 55, 0.7); /* ¡Aquí está la magia! El mismo brillo de la navegación */
}

/* ========================================
    🧩 ESTRUCTURA GENERAL (SIDEBAR + CONTENIDO)
======================================== */

.main-content {
    display: grid;
    grid-template-columns: 280px 1fr 280px;
    gap: -5px;
}
.sidebar, .sidebar-right {
    width: 280px;
    padding: 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 20px;
    border-bottom-left-radius: 8px;
}

.content {
    overflow: hidden;
    padding: 15px;
    background-color: #1a1a1a;
    box-sizing: border-box;
    min-width: 0;
    overflow-wrap: break-word;
}
    .content img {
        max-width: 100%;
        height: auto;
        display: block;
    }


/* ========================================
    🧭 NAVEGACIÓN PRINCIPAL
======================================== */

nav {
    background-color: #1f1f1f;
    padding: 10px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

    nav a {
        color: #d4af37;
        margin: 0 15px;
        text-decoration: none;
        padding: 5px 0;
        position: relative;
        display: inline-block;
        transition: color 0.3s ease, text-shadow 0.3s ease;
    }

        nav a:hover {
            color: #fff;
            text-shadow: 0 0 8px rgba(212, 175, 55, 0.7);
        }

        nav a::after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: 0;
            width: 0;
            height: 2px;
            background-color: #d4af37;
            transition: width 0.3s ease, left 0.3s ease;
        }

        nav a:hover::after {
            width: 100%;
            left: 0;
        }

/* ========================================
   🔄 MÓDULO DE RESETEAR PERSONAJE (ResetChar.ascx)
======================================== */

.reset-char-module {
    /* Hereda de .box_body2, así que tendrá el fondo oscuro, borde y sombra. */
    padding: 25px; /* Un poco más de padding */
}

    /* Estilo para el DropDownList de selección de personaje */
    .reset-char-module .char-select-dropdown {
        width: 100%; /* Ocupa todo el ancho disponible */
        padding: 10px;
        background-color: #000;
        color: #e0e0e0;
        border: 1px solid #555;
        border-radius: 5px;
        box-sizing: border-box;
        font-size: 1em;
        appearance: none; /* Quitar estilo nativo del select para mayor control visual */
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23d4af37%22%20d%3D%22M287%2C197.9c-3.2%2C3.2-8.3%2C3.2-11.6%2C0L146.2%2C71.3L16.6%2C197.9c-3.2%2C3.2-8.3%2C3.2-11.6%2C0c-3.2-3.2-3.2-8.3%2C0-11.6l135.2-135.2c3.2-3.2%2C8.3-3.2%2C11.6%2C0l135.2%2C135.2C290.2%2C189.6%2C290.2%2C194.7%2C287%2C197.9z%22%2F%3E%3C%2Fsvg%3E'); /* Icono de flecha personalizado */
        background-repeat: no-repeat;
        background-position: right 10px top 50%;
        background-size: 12px;
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

        .reset-char-module .char-select-dropdown:focus {
            border-color: #d4af37;
            outline: none;
            box-shadow: 0 0 8px rgba(212, 175, 55, 0.5);
        }

/* Estilos para el panel de información del personaje y requisitos */
.reset-info-panel {
    margin-top: 25px; /* Espacio para separar del selector */
    padding: 20px;
    background-color: #151515; /* Un fondo ligeramente diferente para destacar */
    border-radius: 8px;
    border: 1px solid #3a3a3a;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.7);
}

    .reset-info-panel h4 {
        color: #d4af37; /* Dorado para el título "Requisitos para Resetear" */
        font-size: 1.4em;
        text-align: center;
        margin-bottom: 15px;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
    }

    .reset-info-panel p {
        font-size: 1.1em;
        color: #e0e0e0;
        margin-bottom: 10px;
    }

        .reset-info-panel p strong {
            color: #d4af37; /* Dorado para los requisitos */
        }

    /* Estilos específicos para los valores actuales del personaje */
    .reset-info-panel .current-values strong {
        color: #00ff00; /* Verde brillante para Nivel y Zen actual */
        font-size: 1.2em;
        text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
    }

/* Botón de Resetear */
.reset-char-module .reset-button {
    background-color: #ff4d4d; /* Un rojo más llamativo para la acción de resetear */
    color: #fff; /* Texto blanco */
    border: none;
    padding: 12px 25px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.1em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    display: block; /* Para que ocupe todo el ancho y se pueda centrar */
    margin: 20px auto 0 auto; /* Centrar el botón y añadir margen superior */
}

    .reset-char-module .reset-button:hover {
        background-color: #cc0000; /* Rojo más oscuro al hover */
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.7);
    }

/* Estilos para los mensajes de error y éxito (reutilizamos las clases existentes) */
.reset-char-module .error-message,
.reset-char-module .success-message {
    font-size: 1.1em;
    padding: 10px 0;
    margin-top: 15px;
    border-radius: 5px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* ========================================
   🚪 BOTÓN CERRAR SESIÓN (en UserPanel) - MANTENER ESTO
======================================== */
.logout-button {
    background-color: #333;
    color: #ff6666;
    border: 1px solid #666;
    padding: 4px 8px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.95em;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

    .logout-button:hover {
        background-color: #4a4a4a;
        color: #ff0000;
        border-color: #ff6666;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
    }

    .logout-button:active {
        background-color: #222;
        color: #e00000;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
    }

/* ========================================
   💪 MÓDULO DE AÑADIR STATS (AddStats.ascx)
======================================== */

.add-stats-module {
    /* Hereda de .box_body2, así que tendrá el fondo oscuro, borde y sombra. */
    /* Puedes añadir estilos específicos aquí si quieres que se vea diferente */
    padding: 25px; /* Un poco más de padding para que respire */
}

    .add-stats-module h2 {
        /* Ya tienes h2 globalmente, pero si quieres uno específico para este módulo: */
        /* color: #d4af37; */
        /* text-align: center; */
    }

    /* Estilo para el DropDownList (Selección de Personaje) */
    .add-stats-module .char-select-dropdown {
        width: 100%; /* Ocupa todo el ancho disponible */
        padding: 10px;
        background-color: #000;
        color: #e0e0e0;
        border: 1px solid #555;
        border-radius: 5px;
        box-sizing: border-box;
        font-size: 1em;
        appearance: none; /* Quitar estilo nativo del select para mayor control visual */
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23d4af37%22%20d%3D%22M287%2C197.9c-3.2%2C3.2-8.3%2C3.2-11.6%2C0L146.2%2C71.3L16.6%2C197.9c-3.2%2C3.2-8.3%2C3.2-11.6%2C0c-3.2-3.2-3.2-8.3%2C0-11.6l135.2-135.2c3.2-3.2%2C8.3-3.2%2C11.6%2C0l135.2%2C135.2C290.2%2C189.6%2C290.2%2C194.7%2C287%2C197.9z%22%2F%3E%3C%2Fsvg%3E'); /* Icono de flecha personalizado */
        background-repeat: no-repeat;
        background-position: right 10px top 50%;
        background-size: 12px;
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

        .add-stats-module .char-select-dropdown:focus {
            border-color: #d4af37;
            outline: none;
            box-shadow: 0 0 8px rgba(212, 175, 55, 0.5);
        }

    /* Estilo para los botones de selección y añadir puntos */
    .add-stats-module .action-button {
        background-color: #d4af37; /* Dorado */
        color: #000; /* Texto oscuro */
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
        font-weight: bold;
        font-size: 1em;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
        transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
        margin-left: 10px; /* Espacio a la izquierda del botón para separarlo del select */
        margin-top: 15px; /* Espacio superior para separarlo del hr */
    }

        .add-stats-module .action-button:hover {
            background-color: #bfa133; /* Dorado más oscuro al hover */
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.7);
        }

/* Estilos para el panel de añadir stats */
.stats-panel {
    margin-top: 25px; /* Más espacio entre el selector de personaje y la tabla de stats */
    padding: 20px;
    background-color: #151515; /* Un fondo ligeramente diferente al principal para destacar */
    border-radius: 8px;
    border: 1px solid #3a3a3a;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.7);
}

    .stats-panel h3 {
        color: #d4af37; /* Dorado para el título del personaje */
        text-align: center;
        font-size: 1.6em;
        margin-bottom: 15px;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
    }

    .stats-panel p {
        text-align: center;
        font-size: 1.1em;
        color: #e0e0e0;
        margin-bottom: 20px;
    }

        .stats-panel p strong {
            color: #00ff00; /* Verde brillante para los puntos disponibles */
            font-size: 1.2em;
            text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
        }

/* Tabla de Stats */
.stats-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

    .stats-table td {
        padding: 12px 15px;
        text-align: left;
        border-bottom: 1px solid rgba(212, 175, 55, 0.1);
        color: #e0e0e0;
        vertical-align: middle;
        font-size: 1.05em;
    }

    .stats-table tr:nth-child(even) {
        background-color: rgba(255, 255, 255, 0.03); /* Ligeramente más claro para filas pares */
    }

    .stats-table tr:hover {
        background-color: rgba(212, 175, 55, 0.08); /* Efecto hover dorado */
    }

    .stats-table td:first-child {
        font-weight: bold;
        color: #dcd7c9; /* Color para los nombres de los stats (Fuerza, Agilidad, etc.) */
        width: 30%; /* Ancho fijo para las etiquetas de stat */
    }

    .stats-table td:nth-child(2) {
        color: #d4af37; /* Dorado para los valores actuales de los stats */
        font-weight: bold;
        font-size: 1.1em;
        width: 30%; /* Ancho fijo para los valores actuales */
    }

    .stats-table td:last-child {
        text-align: right; /* Alinear el input y el '+' a la derecha */
        width: 40%; /* Ancho para la columna de añadir puntos */
    }

    /* Input para añadir puntos */
    .stats-table input[type="text"] {
        width: 70px; /* Ancho fijo para los inputs de stats */
        padding: 8px;
        background-color: #000;
        color: #00ff00; /* Verde para los puntos a añadir */
        border: 1px solid #555;
        border-radius: 5px;
        box-sizing: border-box;
        font-size: 1em;
        text-align: center; /* Centrar el texto en el input */
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

        .stats-table input[type="text"]:focus {
            border-color: #00ff00; /* Borde verde al enfocar */
            outline: none;
            box-shadow: 0 0 8px rgba(0, 255, 0, 0.5);
        }

/* Estilos para los mensajes de error y éxito */
.add-stats-module .error-message,
.add-stats-module .success-message {
    font-size: 1.1em; /* Un poco más grande */
    padding: 10px 0;
    margin-top: 15px;
    border-radius: 5px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.add-stats-module .error-message {
    color: #ff3333; /* Rojo más fuerte */
}

.add-stats-module .success-message {
    color: #33ff33; /* Verde más fuerte */
}

/* Contenedor para botones en la parte inferior */
.button-container {
    text-align: center;
    margin-top: 20px;
}

/* ========================================
    ✍️ MÓDULO DE REGISTRO
======================================== */

/* Contenedor principal del módulo de registro */
.register-module {
    /* Hereda muchos estilos de .box_body2 */
    /* Puedes añadir estilos específicos aquí si quieres que se vea diferente a otros box_body2 */
    padding: 25px; /* Más padding para la sección de registro */
}

    .register-module .registro-banner {
        display: block;
        width: 100%;
        height: 125px; /* Altura de banner, ajusta a tu gusto */
        object-fit: cover;
        margin: 0 auto 20px auto;
        border-radius: 5px;
        border: 1px solid rgba(212, 175, 55, 0.4); /* Borde dorado */
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.7);
    }

/* Tabla del formulario de registro */
.register-form-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    /* Puedes aplicar bordes y fondos similares a ranking-table si quieres */
    /* border: 1px solid #333; */
    /* border-radius: 8px; */
    /* overflow: hidden; */
}

    .register-form-table tr td {
        padding: 8px; /* Padding para las celdas */
        vertical-align: middle;
        color: #dcd7c9; /* Color del texto de las etiquetas (Usuario:, Contraseña:) */
        /* border-bottom: 1px solid #222; Opcional: separador entre filas */
    }

    .register-form-table tr:last-child td {
        border-bottom: none; /* Sin borde en la última fila */
    }

/* Campos de entrada (Textboxes) */
.register-module input[type="text"],
.register-module input[type="password"],
.register-module input[type="email"] {
    width: calc(100% - 10px); /* Ajustar el ancho para padding */
    padding: 10px; /* Más padding para los campos */
    background-color: #000; /* Fondo negro */
    color: #e0e0e0; /* Texto claro */
    border: 1px solid #555; /* Borde sutil */
    border-radius: 5px; /* Bordes redondeados */
    box-sizing: border-box; /* Incluir padding y borde en el ancho */
    font-size: 1em;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

    .register-module input[type="text"]:focus,
    .register-module input[type="password"]:focus,
    .register-module input[type="email"]:focus {
        border-color: #d4af37; /* Borde dorado al enfocar */
        outline: none; /* Eliminar el outline por defecto del navegador */
        box-shadow: 0 0 8px rgba(212, 175, 55, 0.5); /* Sombra de brillo al enfocar */
    }

/* Estilo del placeholder */
.register-module input::placeholder {
    color: #888; /* Color más suave para el placeholder */
    opacity: 1; /* Asegura que no sea transparente en algunos navegadores */
}

/* Botón de Crear Cuenta */
.register-button {
    background-color: #d4af37; /* Fondo dorado */
    color: #000; /* Texto oscuro */
    border: none;
    padding: 12px 25px; /* Más padding */
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.1em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Sombra para el botón */
    transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

    .register-button:hover {
        background-color: #bfa133; /* Dorado ligeramente más oscuro al hover */
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.7);
    }

/* Mensajes de error y éxito */
.error-message {
    color: #ff0000; /* Rojo vibrante para errores */
    font-weight: bold;
    margin-top: 10px;
    display: block; /* Para que ocupe su propia línea */
}

.success-message {
    color: #00ff00; /* Verde brillante para éxito */
    font-weight: bold;
    margin-top: 10px;
    display: block;
}

/* ========================================
    🏷️ TIPOGRAFÍA Y TÍTULOS
======================================== */

h1 {
    color: #d4af37;
    font-size: 2.8em;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    margin: 20px 0;
}

h2 {
    color: #d4af37;
    font-size: 2em;
    border-bottom: 2px solid rgba(212, 175, 55, 0.5);
    padding-bottom: 10px;
    margin-bottom: 20px;
    text-align: center;
}

h3 {
    color: #e0e0e0;
    font-size: 1.5em;
    margin-bottom: 15px;
}

h4 {
    color: #d4af37;
    font-size: 1.2em;
    text-align: center;
    margin-bottom: 10px;
}

/* ========================================
    📏 LÍNEAS SEPARADORAS
======================================== */

hr {
    border: none;
    border-top: 1px dashed #444;
    margin: 15px 0;
}

/* ========================================
    📦 PANELES Y MÓDULOS GENERALES
======================================== */

.box_body2 {
    background-color: #111;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid #333;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}

/* ========================================
    📋 LISTAS
======================================== */

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

    ul li {
        padding: 5px 0;
        border-bottom: 1px dotted #444;
        color: #999;
    }

        ul li:last-child {
            border-bottom: none;
        }

/* ========================================
    👤 PANEL DE USUARIO / LOGIN
======================================== */

.login-image {
    display: block;
    margin: 0 auto 15px auto;
    width: 100%;
    height: 80px;
    object-fit: cover;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.7); 
    padding: 0;
    background-color: rgba(0,0,0,0.3);
    border-radius: 5px; 
}

#loginPanel,
#userPanel {
    background-color: #111;
    padding: 15px;
    width: 280px;
    border-radius: 8px;
    border: 1px solid #444;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
    color: #e0e0e0;
    box-sizing: border-box;
    max-width: 100%;
}

    #loginPanel h3,
    #userPanel h3 {
        color: #d4af37;
        text-align: center;
        font-size: 1.4em;
    }

    #loginPanel table {
        width: 100%;
        margin-top: 10px;
    }

        #loginPanel table td {
            padding: 5px;
            color: #999;
        }

    #loginPanel input[type="text"],
    #loginPanel input[type="password"] {
        width: 100%;
        padding: 5px;
        background-color: #000;
        color: #e0e0e0;
        border: 1px solid #555;
        border-radius: 3px;
    }

    #loginPanel input[type="submit"] {
        background-color: #d4af37;
        color: #000;
        border: none;
        padding: 8px 15px;
        border-radius: 5px;
        cursor: pointer;
        font-weight: bold;
        transition: 0.3s ease;
    }

        #loginPanel input[type="submit"]:hover {
            background-color: #bfa133;
            color: #000;
        }

    #loginPanel a,
    #userPanel a {
        color: #d4af37;
        text-decoration: none;
    }

        #loginPanel a:hover,
        #userPanel a:hover {
            color: #fff;
            text-decoration: underline;
        }

/* ========================================
    ⭐ TOP 5 PLAYERS / INFO DEL SERVER
======================================== */

.Top5-players,
.server-info {
    background-color: #111;
    border: 1px solid #444;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
    padding: 10px;
    color: #e0e0e0;
}

    .Top5-players h4{
        margin-top: 1px;
    }
    .server-info h4 {
        color: #d4af37;
    }

.Top5-list li {
    background-color: rgba(255, 255, 255, 0.02);
    border-bottom: 1px dotted #333;
    padding: 8px 5px;
    margin-bottom: 5px;
    border-radius: 4px;
}

.Top5-rank {
    color: #d4af37;
}

.Top5-name {
    font-weight: bold;
    color: #e0e0e0;
}

.Top5-resets {
    font-size: 0.8em;
}
.Top5-class {
    color: #999;
}

.server-stats-list li {
    padding: 5px 0;
    border-bottom: 1px dotted #333;
}

.server-stats-list strong {
    color: #d4af37;
}

/* ========================================
    📰 MÓDULO DE NOTICIAS
======================================== */

.news-module {
    background-color: #111;
    border: 1px solid #333;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
    color: #e0e0e0;
}

    .news-module h2 {
        color: #d4af37;
    }

.news-item {
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid #333;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 25px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .news-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.8);
    }

    .news-item h3 {
        color: #e0e0e0;
        border-bottom: 1px dotted #444;
        padding-bottom: 5px;
    }

    .news-item .news-date {
        color: #888;
        font-size: 0.8em;
    }

    .news-item p {
        color: #ccc;
    }

    .news-item img {
        max-width: 100%;
        width: 700px;
        height: 400px;
        object-fit: cover;
        border-radius: 4px;
        margin-top: 10px;
        box-shadow: 0 2px rgba(0, 0, 0, 0.3);
    }

/* ========================================
    ⬇️ MÓDULO DE DESCARGAS
======================================== */

.downloads-module {
    background-color: #111;
    border: 1px solid #333;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
    color: #e0e0e0;
}

    .downloads-module h2 {
        color: #d4af37;
    }

.download-item {
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid #333;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 25px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6);
}

    .download-item h3 {
        color: #e0e0e0;
        border-bottom: 1px dotted #444;
        padding-bottom: 5px;
    }

    .download-item ul {
        color: #aaa;
    }

    .download-item .download-button {
        margin-top: 3px;
        background-color: #333;
        color: #0094ff;
        border: 1px solid #666;
        padding: 3px 3px;
        border-radius: 5px;
        cursor: pointer;
        font-weight: bold;
        font-size: 0.80em;
        text-transform: uppercase;
        text-decoration: none;
        display: inline-block;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
        transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .download-item .download-button:hover {
        background-color: #0094ff;
        color: #d4af37;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
    }

/* ========================================
    🏆 RANKING DE PERSONAJES
======================================== */

.ranking-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    border: 1px solid rgba(212, 175, 55, 0.2); /* Borde más sutil y dorado */
    border-radius: 8px; /* Bordes redondeados para la tabla completa */
    overflow: hidden; /* Asegura que los bordes redondeados se apliquen correctamente */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.7); /* Sombra para que la tabla "flote" */
}

    .ranking-table th,
    .ranking-table td {
        padding: 12px; /* Un poco más de padding para mejor legibilidad */
        text-align: left;
        border-bottom: 1px solid rgba(212, 175, 55, 0.1); /* Línea divisoria más sutil y dorada */
        color: #e0e0e0; /* Texto principal */
    }

    .ranking-table th {
        background-color: rgba(212, 175, 55, 0.15); /* Fondo dorado transparente para encabezados */
        color: #d4af37; /* Dorado para el texto del encabezado */
        font-weight: bold;
        text-transform: uppercase; /* Mayúsculas para los encabezados */
        letter-spacing: 0.5px; /* Pequeño espacio entre letras */
        font-size: 0.95em;
    }

    .ranking-table tr:nth-child(even) {
        background-color: rgba(255, 255, 255, 0.03); /* Fondo muy ligeramente transparente para filas pares */
    }

    .ranking-table tr:hover {
        background-color: rgba(212, 175, 55, 0.1); /* Efecto hover con un toque dorado transparente */
    }

.class-icon {
    width: 32px; /* Tamaño del icono, ajusta si quieres que sean más grandes/pequeños */
    height: 32px; /* Mismo tamaño para que sean cuadrados */
    border-radius: 50%; /* Para hacer la imagen circular */
    object-fit: cover; /* Asegura que la imagen llene el círculo sin distorsionarse */
    vertical-align: middle; /* Alinea el icono verticalmente con el texto */
    margin-right: 8px; /* Espacio a la derecha del icono */
    border: 1px solid rgba(194, 178, 128, 0.6); /* Borde dorado más visible */
    padding: 2px; /* Pequeño padding dentro del borde */
    background-color: rgba(0, 0, 0, 0.4); /* Fondo sutil para el icono */
}
/* Estilos para los botones de selección de ranking */
.ranking-options {
    text-align: center; /* Se mantiene para compatibilidad, aunque flexbox lo controla mejor */
    margin-bottom: 20px;
    /* --- MODIFICACIONES CLAVE PARA LA SEPARACIÓN Y ORDEN --- */
    display: flex; /* Habilitar Flexbox */
    justify-content: center; /* Centrar los botones horizontalmente */
    align-items: center; /* Centrar los botones verticalmente si tienen diferente altura (menos común aquí) */
    flex-wrap: wrap; /* Permitir que los botones salten de línea si no hay suficiente espacio */
    gap: 15px; /* Espacio horizontal y vertical entre los botones (puedes ajustar el valor) */
    /* --- FIN MODIFICACIONES --- */

    background-color: #111; /* Fondo oscuro (ejemplo, puedes usar el de tu paleta) */
    padding: 15px; /* Añade un padding para que los botones no estén pegados a los bordes del div */
    border-radius: 8px; /* Bordes redondeados para el contenedor de opciones */
    border: 1px solid #333; /* Borde sutil */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Sombra para que flote un poco */
}

.ranking-button {
    background-color: #333; /* Fondo oscuro */
    color: #d4af37; /* Texto dorado */
    border: 1px solid #555; /* Borde más suave */
    padding: 10px 20px;
    /* --- ELIMINAR EL MARGEN INDIVIDUAL, YA LO CONTROLA 'GAP' --- */
    /* margin: 0 5px; */
    /* --- FIN ELIMINACIÓN --- */
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    flex-shrink: 0; /* Evita que los botones se encojan si hay poco espacio */
}

    .ranking-button:hover {
        background-color: #4a4a4a; /* Fondo un poco más claro al pasar el mouse */
        border-color: #ffbd28; /* Dorado más brillante al hover */
        color: #fff; /* Texto blanco al hover */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6); /* Sombra más pronunciada al hover */
    }

    /* --- ESTILO PARA EL BOTÓN ACTIVO (EL QUE MUESTRA EL RANKING ACTUAL) --- */
    .ranking-button.active {
        background-color: #d4af37; /* Fondo dorado para el botón activo */
        color: #111; /* Texto oscuro para el botón activo */
        border-color: #fff; /* Borde blanco para el botón activo */
        box-shadow: 0 0 15px rgba(212, 175, 55, 0.7); /* Sombra de brillo para el activo */
        cursor: default; /* Cursor normal para el botón activo */
    }

/* Estilos para el Banner de Descargas */
.downloads-banner {
    display: block; /* Para que ocupe su propia línea y podamos centrarlo */
    width: 100%; /* Ocupa todo el ancho disponible del módulo */
    height: 125px; /* Alto fijo del banner (ajusta si lo necesitas) */
    object-fit: cover; /* Asegura que la imagen cubra el área sin distorsionarse, recortando si es necesario */
    margin: 0 auto 20px auto; /* Centra el banner y añade margen inferior */
    border-radius: 5px; /* Bordes ligeramente redondeados */
    border: 1px solid rgba(194, 178, 128, 0.4); /* Borde dorado sutil */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.7); /* Sombra para efecto flotante */
}

.ranking-banner {
    display: block; /* Para que ocupe su propia línea y podamos centrarlo */
    width: 100%; /* Ocupa todo el ancho disponible del módulo */
    height: 125px; /* Alto fijo del banner (ajusta si lo necesitas) */
    object-fit: cover; /* Asegura que la imagen cubra el área sin distorsionarse, recortando si es necesario */
    margin: 0 auto 20px auto; /* Centra el banner y añade margen inferior */
    border-radius: 5px; /* Bordes ligeramente redondeados */
    border: 1px solid rgba(194, 178, 128, 0.4); /* Borde dorado sutil */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.7); /* Sombra para efecto flotante */
}

.registro-banner {
    display: block; /* Para que ocupe su propia línea y podamos centrarlo */
    width: 100%; /* Ocupa todo el ancho disponible del módulo */
    height: 125px; /* Alto fijo del banner (ajusta si lo necesitas) */
    object-fit: cover; /* Asegura que la imagen cubra el área sin distorsionarse, recortando si es necesario */
    margin: 0 auto 20px auto; /* Centra el banner y añade margen inferior */
    border-radius: 5px; /* Bordes ligeramente redondeados */
    border: 1px solid rgba(194, 178, 128, 0.4); /* Borde dorado sutil */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.7); /* Sombra para efecto flotante */
}

.guild-mark-icon {
    width: 16px; /* <--- TAMAÑO AJUSTADO */
    height: 16px; /* <--- TAMAÑO AJUSTADO */
    border-radius: 4px;
    object-fit: cover;
    vertical-align: middle;
    margin-right: 8px;
    border: 1px solid rgba(194, 178, 128, 0.6);
    padding: 2px;
    background-color: rgba(0, 0, 0, 0.4);
}

.guild-cell-content {
    display: flex; /* Para que el escudo y el nombre estén en línea */
    align-items: center; /* Centra verticalmente el escudo y el texto */
    gap: 8px; /* Espacio entre el escudo y el nombre */
}

.guild-name-display {
    color: #dcd7c9; /* Color del nombre de la Guild */
    font-weight: bold;
    font-size: 1.1em;
    white-space: nowrap; /* Evita que el nombre se rompa en varias líneas */
    overflow: hidden;
    text-overflow: ellipsis; /* Añade puntos suspensivos si el nombre es muy largo */
}

/* Contenido de la celda de MASTER */
.master-cell-content {
    display: flex; /* Para que el nombre del master y el icono de clase estén en línea */
    align-items: center; /* Centra verticalmente */
    gap: 5px; /* Espacio entre el nombre del master y el icono */
}

.master-name-display {
    color: #a0a093; /* Color del nombre del maestro */
    font-size: 0.95em;
    white-space: nowrap; /* Evita que el nombre se rompa */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ========================================
    ⭐ TOP 3 CLANES EN SIDEBAR
======================================== */

.top-guilds {
    margin-top: -20px;
    background-color: #111; /* Fondo similar a otros módulos del sidebar */
    border: 1px solid #444;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
    /*padding: 10px;*/
    color: #dcd7c9; /* Texto principal */
}

    .top-guilds h4 {
        color: #d4af37; /* Dorado envejecido para el título */
        font-size: 1.2em;
        margin-top: 0;
    }

.top-guilds-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .top-guilds-list li {
        background-color: rgba(255, 255, 255, 0.02); /* Verde musgo transparente para ítems */
        border-bottom: 1px dotted rgba(194, 178, 128, 0.25);
        padding: 8px 5px;
        margin-bottom: 5px;
        border-radius: 4px;
        display: flex; /* Usar flexbox para alinear elementos */
        flex-wrap: wrap; /* Permitir que salten de línea */
        align-items: center; /* Centrar verticalmente */
        gap: 5px; /* Espacio entre los elementos */
    }

        .top-guilds-list li:last-child {
            border-bottom: none;
        }

.top-guild-rank {
    font-weight: bold;
    color: #c2b280; /* Dorado para el rank */
    margin-right: 5px;
}

.top-guild-mark {
    /* El guild-mark-icon ya tiene sus propios estilos (48x48px, etc.) */
    display: inline-block; /* Asegura que el contenedor del icono se alinee */
}

.top-guild-name {
    flex-grow: 1; /* Permite que el nombre ocupe el espacio restante */
    font-weight: bold;
    color: #dcd7c9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.top-guild-score {
    font-size: 0.85em;
    color: #a0a093; /* Texto secundario */
}

.top-guild-master-info {
    width: 100%; /* Ocupa toda la línea debajo del nombre */
    font-size: 0.8em;
    color: #a0a093; /* Texto secundario */
    display: flex;
    margin-left: 15px;
    align-items: center;
    gap: 3px; /* Espacio entre "Maestro:" y el nombre */
    padding-top: 3px; /* Pequeño espacio superior */
    border-top: 1px dotted rgba(194, 178, 128, 0.1); /* Línea divisoria sutil */
    margin-top: 5px; /* Espacio superior */
}

    .top-guild-master-info .master-name-display {
        color: #dcd7c9; /* Nombre del maestro en texto principal */
        font-weight: normal;
        margin-right: 5px;
    }

/* ========================================
    ⚙️ MÓDULO DE CONFIGURACIÓN DB
======================================== */

.config-module {
    /* Hereda estilos de .box_body2, ajusta si es necesario */
    padding: 25px;
    color: #e0e0e0;
}

    .config-module h2 {
        /* Hereda estilos de h2, ajusta si es necesario */
        text-align: center;
    }

    .config-module .form-table {
        width: 100%;
        margin: 20px auto;
        border-collapse: collapse;
    }

        .config-module .form-table td {
            padding: 10px 5px;
            color: #dcd7c9;
            vertical-align: middle;
            border-bottom: 1px dotted rgba(212, 175, 55, 0.15);
        }

        .config-module .form-table tr:last-child td {
            border-bottom: none;
        }

    .config-module input[type="text"],
    .config-module input[type="password"] {
        width: calc(100% - 22px); /* Ajusta para padding */
        padding: 10px;
        background-color: #000;
        color: #e0e0e0;
        border: 1px solid #555;
        border-radius: 4px;
        box-sizing: border-box;
        font-size: 0.95em;
    }

        .config-module input[type="text"]:focus,
        .config-module input[type="password"]:focus {
            border-color: #d4af37;
            outline: none;
            box-shadow: 0 0 8px rgba(212, 175, 55, 0.5);
        }

    /* Estilo del placeholder */
    .config-module input::placeholder {
        color: #888;
        opacity: 1;
    }

/* Estilos para los mensajes de éxito/error (usando las clases generales) */
.success-message {
    color: #00ff00;
    font-weight: bold;
}

.error-message {
    color: #ff0000;
    font-weight: bold;
}

/* ========================================
    🛑 PÁGINAS DE ERROR (404, 500, General)
======================================== */

.error-page-module {
    /* Hereda de .box_body2 */
    padding: 30px; /* Más padding para los mensajes de error */
    text-align: center;
    color: #dcd7c9;
}

    .error-page-module h2 {
        color: #ff0000; /* Rojo fuego para el título del error */
        font-size: 2.5em;
        margin-bottom: 15px;
        border-bottom: 2px solid rgba(255, 0, 0, 0.5); /* Línea roja */
    }

    .error-page-module p {
        font-size: 1.1em;
        line-height: 1.8;
        margin-bottom: 10px;
        color: #a0a093; /* Texto secundario */
    }