:root { --ui-bg: #000; --ui-border: #5e4b35; --skill-size: 32px; --slot-gap-x: 40px; --slot-gap-y: 28px; }
            .skill-window { width: 330px; height: 468px; background-color: var(--ui-bg); border: 2px solid var(--ui-border); border-radius: 4px; box-shadow: 0 0 15px rgba(0,0,0,0.9); display: flex; flex-direction: column; margin: 20px auto; position: relative; color: white; font-family: 'Tahoma', sans-serif; user-select: none; }
            .nav-tabs { display: flex; background: #111; border-bottom: 1px solid var(--ui-border); height: 28px; flex-shrink: 0; }
            .nav-tab { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #888; border-right: 1px solid #333; background: linear-gradient(to bottom, #2a2a2a, #000); cursor: pointer; }
            .nav-tab.active { color: #fff; font-weight: bold; background: linear-gradient(to bottom, #555, #222); }
            .tab-content { display: none; padding: 20px 20px; flex: 1; grid-template-rows: repeat(6, var(--skill-size)); grid-template-columns: repeat(4, var(--skill-size)); grid-auto-flow: column; justify-content: space-between; align-content: start; gap: var(--slot-gap-y) var(--slot-gap-x); }
            .tab-content.active { display: grid; }
            .skill-slot { position: relative; width: var(--skill-size); height: var(--skill-size); }
            .skill-slot.empty { opacity: 0; pointer-events: none; }
            
            /* ESTILOS DE ESTADO */
            .skill-icon { width: 100%; height: 100%; border: 1px solid #666; background-size: cover; cursor: help; transition: all 0.3s; }
            .skill-icon.locked { filter: grayscale(100%); opacity: 0.4; border-color: #333; }
            
            .skill-level-box { position: absolute; top: -2px; right: -14px; width: 16px; height: 14px; background: #000; border: 1px solid #c9a66d; color: #fff; font-size: 10px; display: flex; justify-content: center; align-items: center; z-index: 10; }
            .skill-plus-btn { position: absolute; top: 20px; right: -11px; width: 12px; height: 12px; cursor: pointer; background: none; border: none; padding: 0; z-index: 11; display: flex; justify-content: center; align-items: center; }
            .plus-circle { width: 10px; height: 10px; background-color: #777; border-radius: 50%; border: 1px solid #000; transition: background 0.2s; }
            .skill-plus-btn:hover .plus-circle { background-color: #ffcc00; }
            
            .footer-panel { height: 45px; background: #080808; border-top: 1px solid var(--ui-border); display: flex; justify-content: space-between; align-items: center; padding: 0 10px; font-size: 11px; flex-shrink: 0; }
            .points-display { border: 1px solid #444; background: #111; width: 35px; padding: 3px 0; text-align: center; color: #fff; font-weight: bold; }
            .btn-group { display: flex; gap: 5px; }
            .btn-skill { padding: 5px 10px; font-size: 10px; text-transform: uppercase; cursor: pointer; border: 1px solid #444; background: #222; color: #ccc; }
            .btn-submit.ready { background: #800; border-color: #f00; color: #fff; box-shadow: 0 0 8px #500; }
            .btn-reset-db { background: #440000; color: #ff9999; border: 1px solid #600; }
			.modal {
    display: none; /* Oculto por defecto */
    position: fixed; 
    z-index: 99999; /* Por encima de todo */
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.85); /* Fondo negro con transparencia */
    
    /* Flexbox para centrado perfecto */
    align-items: center; 
    justify-content: center;
}

.modal.active {
    display: flex; /* Se muestra al agregar la clase active */
}

/* Contenedor flexible */
.equalizer-container {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

/* El input numérico pequeño a la derecha */
.chakra-number {
    width: 60px;
    background: #000;
    border: 1px solid #5e4b35;
    color: #c39b6c;
    text-align: center;
    font-weight: bold;
}

/* RESET del Range Slider para personalizarlo */
input[type=range].chakra-range {
    -webkit-appearance: none; /* Quita estilo default Webkit */
    width: 100%;
    background: transparent; 
    cursor: pointer;
}

/* La "Pista" (el fondo de la barra) */
input[type=range].chakra-range::-webkit-slider-runnable-track {
    width: 100%;
    height: 12px;
    cursor: pointer;
    background: #111;
    border: 1px solid #444;
    border-radius: 2px;
}

/* El "Thumb" (la bolita o manejador) */
input[type=range].chakra-range::-webkit-slider-thumb {
    height: 20px;
    width: 10px;
    border-radius: 2px;
    background: #c39b6c; /* Color dorado */
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -5px; /* Centrar verticalmente */
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

/* Firefox estilos específicos */
input[type=range].chakra-range::-moz-range-track {
    width: 100%;
    height: 12px;
    background: #111;
    border: 1px solid #444;
}
input[type=range].chakra-range::-moz-range-thumb {
    height: 20px;
    width: 10px;
    background: #c39b6c;
    border: none;
    cursor: pointer;
}
.btn_general {
    background: linear-gradient(to bottom, #4a2d52, #3b2445, #3d2647, #3a2444, #3c2546, #492648);
    color: #fed494;
    border: 1px solid #6d4395;
    padding: 10px;
    width: 100%;
    font-size: 12pt;
    cursor: pointer;
}

/* Opcional: Un efecto hover para que se note al pasar el mouse */
.btn_general:hover {  
	background: #111111;
    color: #be9b6c;
	border: 1px solid #2b2b2b;
}
.mt-5{
	margin-top:5px;
}
.mt-10{
	margin-top:10px;
}
.mb-5{
	margin-bottom:5px;
}
.mb-10{
	margin-bottom:10px;
}
.fs-10{
	font-size:12px;
}
.fs-12{
	font-size:12px;
}
.fs-14{
	font-size:14px;
}
.fs-16{
	font-size:16px;
}
.white{
	color:#fff;
}

.btn_morado {
    position: relative; /* Necesario para contener las capas */
    z-index: 1; /* Asegura que el texto del botón quede encima de las imágenes */
    color: #b69373;
    font-size: 16pt;
    
    /* IMPORTANTE: Quitamos el fondo del elemento principal */
    background: none; 
    
    /* Transición solo para el color del texto */
    transition: color 0.3s ease;
}

/* CAPA 1: Estado Normal (Siempre visible al inicio) */
.btn_morado::before {
    content: "";
    position: absolute;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    
    /* Aquí va la imagen en posición 0 0 */
    background-image: url(../img/profile/btn_morado.png);
    background-position: 0 0;
    
    z-index: -1; /* Se pone detrás del texto */
    transition: opacity 0.4s ease; /* La magia del desvanecimiento */
    opacity: 1;
}

/* CAPA 2: Estado Hover (Invisible al inicio) */
.btn_morado::after {
    content: "";
    position: absolute;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    
    /* Aquí va la imagen en posición -52px */
    background-image: url(../img/profile/btn_morado.png);
    background-position: 0 -50px;
    
    z-index: -1; /* Se pone detrás del texto */
    transition: opacity 0.4s ease;
    opacity: 0; /* Empieza invisible */
}

/* --- ACCIÓN HOVER --- */
.btn_morado:hover {
    color: #fdd393;
}

/* Cuando pasas el mouse, la capa normal se desvanece (opacity 0) */
.btn_morado:hover::before {
    opacity: 0;
}

/* Cuando pasas el mouse, la capa hover aparece (opacity 1) */
.btn_morado:hover::after {
    opacity: 1;
}



.btn_gris {
    position: relative; /* Necesario para contener las capas */
    z-index: 1; /* Asegura que el texto del botón quede encima de las imágenes */
    color: #ab8b6c;
    font-size: 16pt;
    
    /* IMPORTANTE: Quitamos el fondo del elemento principal */
    background: none; 
    
    /* Transición solo para el color del texto */
    transition: color 0.3s ease;
}
.btn_gris::before {
    content: "";
    position: absolute;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    
    /* Aquí va la imagen en posición 0 0 */
    background-image: url(../img/profile/btn_gris.png);
    background-position: 0 0;
    
    z-index: -1; /* Se pone detrás del texto */
    transition: opacity 0.4s ease; /* La magia del desvanecimiento */
    opacity: 1;
}

/* CAPA 2: Estado Hover (Invisible al inicio) */
.btn_gris::after {
    content: "";
    position: absolute;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    
    /* Aquí va la imagen en posición -52px */
    background-image: url(../img/profile/btn_gris.png);
    background-position: 0 -50px;
    
    z-index: -1; /* Se pone detrás del texto */
    transition: opacity 0.4s ease;
    opacity: 0; /* Empieza invisible */
}

/* --- ACCIÓN HOVER --- */
.btn_gris:hover {
    color: #fdd393;
}

/* Cuando pasas el mouse, la capa normal se desvanece (opacity 0) */
.btn_gris:hover::before {
    opacity: 0;
}

/* Cuando pasas el mouse, la capa hover aparece (opacity 1) */
.btn_gris:hover::after {
    opacity: 1;
}