/*
Theme Name: TibiaMex Theme
Theme URI: https://www.tibiamex.com
Author: RobSama
Author URI: https://www.tibiamex.com
Description: Tema personalizado para TibiaMex
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: custom-background, custom-header, full-width-template, one-column, two-columns, responsive-layout
Text Domain: tibiamex
*/

body{
	background-color: #10223d;
	color: #FFF;
}

header{
	background-color: #000;
	color:#737373;
}

footer{
	background-color: #000;
	text-align: center;
	padding: 3% 0%;
	color: #737373;
}

.site-main {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.page-title-container{
	padding: 2% 0%;
	text-align: center;
}

/* Tarjetas (Calculadora y Precios) - Fondo Oscuro con Sombra Elevada */
.card, .imbuement-calculator, .server-prices-container, .community-cta {
    background-color: #1E1E1E; 
    border: 1px solid #303030;
    border-radius: 8px;
    /* Sombras más sutiles en modo oscuro */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); 
    transition: box-shadow 0.3s ease;
    color:#FFF;
}

.form-text{
	color:#FFF;
}

/* Inputs y Selects */
.form-control, .form-select {
    border: 1px solid #303030;
    border-radius: 4px;
    transition: border-color 0.3s;
}
.form-control:focus, .form-select:focus {
    border-color: #6C81A0;
    box-shadow: 0 0 0 0.25rem rgba(108, 129, 160, 0.25);
}

/* Animación de pulso */
.pulse-effect {
    animation: pulse 1.5s infinite;
}
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(0, 166, 80, 0.7); } /* Verde Acento */
    70% { box-shadow: 0 0 0 12px rgba(0, 166, 80, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 166, 80, 0); }
}

#tablaMonstruos td, #tablaMonstruos th, .imbuement-results-table, .loot-split-results table{
    vertical-align: middle;
    text-align: center;
}

#tablaMonstruosCalculadora td, #tablaMonstruosCalculadora th{
    vertical-align: middle;
    text-align: center;
}
.icon-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #a7a7a7;
    color: var(--color-fondo-principal); /* Íconos oscuros sobre círculos de color */
}

.green-bg { background-color: #00A650; }
.red-bg { background-color: #CF3721; }
.white-bg { background-color: #E0E0E0; }

.community-cta {
    background-color: #1E1E1E; 
    border: 1px solid #303030;
    border-radius: 8px;
    /* Sombras más sutiles en modo oscuro */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); 
    transition: box-shadow 0.3s ease;
    color:#FFF;
}

.stat-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-left: 5px solid #00A650;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
}

.breadcrumb-item+.breadcrumb-item::before{
	color:#FFF;
}

/* Enlaces individuales de la barra de navegación */
.navbar-nav .menu-item a{
    color: #FFF !important; /* Asegura que el texto del enlace sea blanco */
    font-weight: 500; /* Peso de fuente ligeramente más ligero */
    padding: 0.5rem 1rem; /* Ajusta el padding para que se vea moderno */
    text-decoration: none;
    
    /* Agregamos una transición para el efecto hover suave */
    transition: color 0.3s ease, background-color 0.3s ease;
    border-radius: 4px; /* Bordes suaves para el efecto hover */
}

/* Efecto Hover: Resaltar el enlace al pasar el ratón */
.navbar-nav .menu-item a:hover {
    background-color: #1E1E1E; /* Fondo ligeramente oscuro para el efecto de resaltado */
}

/* Estilo para el enlace activo (página actual) */
.navbar-nav .current-menu-item {
    color: #00A650 !important; /* Verde de acento para la página activa */
    font-weight: 700; /* Un poco más de énfasis para el activo */
    border-bottom: 2px solid #00A650; /* Línea verde debajo del enlace activo */
    padding-bottom: calc(0.5rem - 2px); /* Ajusta el padding para compensar el borde */
}

.navbar-nav .current_page_item a{
	text-decoration: none;
}

/* ====================================
   ESTILOS DE MENÚ MÓVIL (MODAL DERECHA-IZQUIERDA)
   ==================================== */

/* 1. Estilos para el contenedor del menú en dispositivos pequeños.
   Asumimos que el menú se llama .navbar-collapse (clase estándar de Bootstrap).
*/
@media (max-width: 991.98px) { /* breakpoint estándar de Bootstrap para lg */
    
    

    /* 2. Estado Activo: El menú se desliza a la vista */
    .navbar-collapse.show {
        transform: translateX(0);
        /* Esto también funciona con la clase 'showing' de Bootstrap */
    }
    
    /* 3. Estilos de los enlaces dentro del menú deslizante */
    .navbar-nav {
        flex-direction: column !important; /* Asegura que los links estén apilados */
        width: 100%;
        margin-top: 50px;
        display: block !important;
    }
    
    .navbar-nav .nav-item {
        margin: 10px 0;
        border-bottom: 1px solid #303030; /* Separador sutil */
        z-index: 1060;
    }
    
    .navbar-nav .menu-item {
        padding: 10px 0 !important; /* Aumenta el área clickeable */
        width: 100%;
        color: #F5F5F5 !important;
        /* Quitamos el fondo oscuro del hover en el nav-link para este menú */
        background-color: transparent !important; 
        z-index: 1061;
        pointer-events: auto;

    }

    .navbar-nav .menu-item a{
    	width: 100%;
    }
    
    .navbar-nav .nav-item:hover {
        color: #CF3721 !important; /* Mantenemos el hover Rojo MX */
    }

    .navbar-collapse {
        position: fixed; /* Fija la posición en el viewport */
        top: 0;
        right: 0;
        bottom: 0;
        width: 80%; /* Ocupa el 80% del ancho de la pantalla */
        max-width: 300px; /* Limita el ancho máximo para tabletas grandes */
        z-index: 1050; /* Z-index alto (como un modal) */
        
        /* Fondo Oscuro de la tarjeta para el menú */
        background-color: #1E1E1E; /* Usamos el color del card-bg */
        
        /* Animación de deslizamiento (por defecto está fuera de la pantalla) */
        transform: translateX(100%);
        transition: transform 0.35s ease-in-out;
        
        /* Oculta el contenido extra si es muy largo */
        overflow-y: auto; 
        
        /* Aseguramos que la navegación esté en modo columna */
        display: block !important; /* Deshace el display: flex/none */
        padding: 20px;
    }
    
    /* 4. Overlay (sombra oscura en el resto de la pantalla) */
    .navbar-toggler:not(.collapsed) + .navbar-collapse::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5); 
        z-index: 1040;
        
        /* 🔥 CAMBIO CLAVE: IGNORAR EVENTOS DEL RATÓN */
        pointer-events: none; 
        
        transition: opacity 0.35s ease-in-out;
        opacity: 1; /* Asegura que se vea cuando la clase :not(.collapsed) está activa */
    }


    
    /* Ocultar el contenido del body mientras el menú está abierto para evitar scroll */
    body.menu-open {
        overflow: hidden;
    }

    .navbar-toggler-close {
        /* Posiciona el botón en la esquina superior derecha del menú deslizante */
        position: absolute;
        top: 15px;
        right: 15px;
        z-index: 1060; /* Asegura que esté por encima del menú */
        
        /* Estilo del botón */
        background: transparent;
        border: none;
        color: #F5F5F5; /* Color del texto/icono claro */
        font-size: 1.5rem;
        font-weight: 300; /* Letra más delgada para la 'X' */
        opacity: 0.8;
        padding: 5px;
        cursor: pointer;
    }
    
    .navbar-toggler-close:hover {
        opacity: 1;
        color: #CF3721; /* Acento rojo al pasar el ratón */
    }
}

/* ====================================
   ESTILOS DE DAÑO Y DEBILIDADES (single-monster)
   ==================================== */

/* Estilo Base del Contenedor de Daño */
.damage-item {
    border-radius: 8px;
    transition: transform 0.2s, box-shadow 0.2s;
    background-color: #242424; /* Fondo sutilmente más claro que el card-bg */
    border: 1px solid #303030;
    font-size: 0.95rem;
}

.damage-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* El círculo del ícono */
.damage-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 16px;
    font-weight: bold;
    color: #FFF; 
}

/* CLASES DE COLOR/ACENTO */

/* --- Estilos para la SECCIÓN DE DAÑO Y DEBILIDADES --- */

.damage-item {
    border-radius: 6px;
    border: 1px solid #303030;
    transition: all 0.2s ease-in-out;
}

/* 1. INMUNIDAD (0%) - ROJO INTENSO */
.damage-item.immune {
    background-color: #581515; /* Fondo oscuro rojo */
    border-left: 5px solid #ff4d4d;
    color: #ff4d4d !important;
}

/* 2. DEBILIDAD MODERADA (1% a 80%) - AMARILLO */
.damage-item.weak-moderate {
    background-color: #3f3513; /* Fondo oscuro amarillo */
    border-left: 5px solid #ffc107;
    color: #ffc107 !important; 
}

/* 3. NEUTRAL (81% a 104%) - GRIS SUAVE */
.damage-item.neutral {
    background-color: #282828; /* Fondo oscuro (color base) */
    border-left: 5px solid #6c757d;
    color: #6c757d !important;
}

/* 4. RESISTENCIA/INMUNIDAD PARCIAL (105%+) - VERDE */
.damage-item.resist {
    background-color: #17381b; /* Fondo oscuro verde */
    border-left: 5px solid #20c997;
    color: #20c997 !important;
}

/* Asegurar que los textos dentro se vean bien en el tema oscuro */
.damage-item * {
    color: inherit !important;
}

/* Estilo para los iconos de daño (emojis) */
.damage-item .damage-icon {
    font-size: 1.2rem;
}

/* ====================================
   ESTILOS DE ARCHIVE MONSTRUOS (TARJETAS)
   ==================================== */

/* Estilo de la Tarjeta (Monster Card) */
.monster-card {
    /* Usamos el color de la tarjeta oscura de tu tema */
    background-color: #1E1E1E !important; 
    border: 1px solid #303030 !important;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efecto Hover: Resaltar la tarjeta */
.monster-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5) !important;
    /* Borde de acento verde para indicar interactividad */
    border-color: #00A650 !important;
}

/* Enlace contenedor */
.monster-card-link {
    display: block;
    color: inherit; /* Hereda el color del texto */
}

/* Título y Texto */
.monster-card .monster-name {
    color: #FFF !important; /* Título en blanco puro */
    font-size: 1.5rem;
    border-bottom: none; /* Quitamos el borde de h3/h4 */
    margin-bottom: 0.25rem !important;
}

.monster-card .monster-loot-preview {
    color: #AAAAAA !important; /* Texto secundario gris */
    line-height: 1.4;
}

/* Estilo de la Imagen (Thumbnail) */
.monster-thumb {
    width: 100%;
    max-width: 100px; /* Tamaño máximo en la cuadrícula */
    height: auto;
    border: 3px solid #6C81A0; /* Borde suave */
    padding: 2px;
    object-fit: contain;
}

.monster-thumb-placeholder {
    width: 100px;
    height: 100px;
    font-size: 2rem;
}

/* Asegurar legibilidad de estadísticas */
.monster-stats .text-danger,
.monster-stats .text-success {
    font-weight: bold;
}

/* Estilos de Paginación (para ajustarse al modo oscuro) */
.pagination .page-item .page-link {
    background-color: #1E1E1E;
    color: #FFF;
    border-color: #303030;
    transition: background-color 0.2s, color 0.2s;
}

.pagination .page-item .page-link:hover {
    background-color: #2C3E50;
    color: #00A650;
    border-color: #00A650;
}

.pagination .page-item.active .page-link {
    background-color: #00A650 !important;
    border-color: #00A650 !important;
    color: #FFF !important;
}

/* --- Estilos para la Cuadrícula de Equipamiento --- */

.gear-layout-grid {
    display: grid;
    /* 3 columnas de igual ancho y 4 filas automáticas */
    grid-template-columns: repeat(3, 1fr); 
    grid-template-rows: repeat(4, 1fr); 
    gap: 8px; 
    width: 100%;
    max-width: 350px; /* Tamaño ideal para un layout compacto en el sidebar o columna pequeña */
    margin: 0 auto; 
    padding: 10px;
    background-color: #121212; 
    border-radius: 8px;
    border: 1px solid #333;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5); 
}

.gear-slot {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #282828; 
    border: 1px solid #3e3e3e;
    border-radius: 4px;
    position: relative;
    overflow: hidden; 
    aspect-ratio: 1 / 1; 
}

/* Estilos de las imágenes de ítems */
.gear-slot .gear-item-img {
    max-width: 80%; 
    max-height: 80%;
    object-fit: contain;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5; /* Asegura que la imagen esté sobre el placeholder */
}

/* Placeholder para slots vacíos (el fondo gris oscuro) */
.gear-placeholder {
    display: block;
    width: 80%;
    height: 80%;
    background-color: #383838; 
    border-radius: 4px;
}

/* Etiqueta de slot (Oculta, solo para depuración) */
.gear-slot-label {
    position: absolute;
    top: 2px;
    left: 2px;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.3); 
    z-index: 10;
    pointer-events: none;
    opacity: 0; 
}

/* Posicionamiento específico de los ítems en la cuadrícula */
.gear-slot.amuleto { grid-area: 1 / 1 / 2 / 2; } 
.gear-slot.cabeza { grid-area: 1 / 2 / 2 / 3; } 
.gear-slot.vacio-bp-right { grid-area: 1 / 3 / 2 / 4; } 
.gear-slot.anillo { grid-area: 1 / 3 / 2 / 4; }
.gear-slot.mano-izquierda { grid-area: 2 / 1 / 3 / 2; } 
.gear-slot.cuerpo { grid-area: 2 / 2 / 3 / 3; } 
.gear-slot.mano-derecha { grid-area: 2 / 3 / 3 / 4; } 
.gear-slot.anillo { grid-area: 3 / 1 / 4 / 2; } 
.gear-slot.piernas { grid-area: 3 / 2 / 4 / 3; } 
.gear-slot.vacio-ammo { grid-area: 3 / 3 / 4 / 4; } 
.gear-slot.vacio-bp-left { grid-area: 4 / 1 / 5 / 2; } 
.gear-slot.botas { grid-area: 4 / 2 / 5 / 3; } 
.gear-slot.vacio-mana { grid-area: 4 / 3 / 5 / 4; } 

/* Ocultar el overlay de dos manos en el slot de la mano derecha para evitar duplicidad */
.gear-slot.mano-derecha .gear-item-img.two-hand-overlay {
    visibility: hidden; 
}

/* --- Lógica de sets de mano (One Hand / Two Hand) --- */

/* Contenedor que alberga el set de una mano o dos manos */
.gear-slot .hand-set-container {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex; /* Asegura que el contenido (imagen/placeholder) se centre */
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 6; 
}

/* Ocultar todos los sets por defecto para un control estricto */
.gear-slot .hand-set-container {
    visibility: hidden;
    opacity: 0;
}

/* Mostrar el set de UNA MANO si el grid tiene data-active-set="one_hand" */
.gear-layout-grid[data-active-set="one_hand"] .hand-set-container[data-set="one_hand"] {
    visibility: visible;
    opacity: 1;
}

/* Mostrar el set de DOS MANOS si el grid tiene data-active-set="two_hand" */
.gear-layout-grid[data-active-set="two_hand"] .hand-set-container[data-set="two_hand"] {
    visibility: visible;
    opacity: 1;
}


/* Ocultar la imagen de dos manos en el slot derecho (si el set two_hand está activo) */
.gear-layout-grid[data-active-set="two_hand"] .gear-slot.mano-derecha .gear-item-img.two-hand-overlay {
    visibility: hidden; 
}

/* Ocultar el placeholder en la mano derecha cuando el set two_hand está activo, 
   para que no interfiera con el overlay del slot izquierdo */
.gear-layout-grid[data-active-set="two_hand"] .gear-slot.mano-derecha .gear-placeholder {
    display: none;
}

/* --- Estilos de Paginación TibiaMex (Alta Especificidad) --- */

/* Contenedor general (Solo para margen y centrado) */
.tibiamex-pagination .pagination {
    margin: 0 auto;
    padding: 0;
    border-radius: 5px;
}

/* Estilo para los enlaces de la paginación (inactivos y deshabilitados) */
.tibiamex-pagination .page-item .page-link {
    background-color: #212529 !important;
    border-color: #444 !important;
    color: #ffffff !important;
    transition: all 0.2s;
}

/* Estilo al pasar el ratón (hover) */
.tibiamex-pagination .page-item .page-link:hover,
.tibiamex-pagination .page-item .page-link:focus {
    background-color: #343a40 !important; /* Fondo más oscuro */
    color: #ffc107 !important; /* Texto Amarillo Tibia */
    border-color: #ffc107 !important;
}

/* Estilo de la página ACTUAL (ACTIVA) - La prioridad más alta */
.tibiamex-pagination .page-item.active .page-link {
    background-color: #CF3721 !important; /* Rojo/Naranja de Tibia para activo */
    border-color: #CF3721 !important; 
    color: #ffffff !important;
    font-weight: bold;
    box-shadow: 0 0 5px rgba(207, 55, 33, 0.5); 
    z-index: 3;
}

/* Estilo para elementos deshabilitados (si los hubiera) */
.tibiamex-pagination .page-item.disabled .page-link {
    color: #6c757d !important;
    background-color: #212529 !important;
    border-color: #444 !important;
    cursor: not-allowed;
}

/* Arreglo de bordes redondeados */
.tibiamex-pagination .page-item:first-child .page-link {
    border-top-left-radius: 5px !important;
    border-bottom-left-radius: 5px !important;
}
.tibiamex-pagination .page-item:last-child .page-link {
    border-top-right-radius: 5px !important;
    border-bottom-right-radius: 5px !important;
}
.tibiamex-pagination .page-item:not(:first-child) .page-link {
    margin-left: -1px; 
}