/* ==============================================
Variables de Color para Tema Claro y Oscuro
==============================================
*/
:root {
    --background-light: #F3F4F6; /* gray-100 */
    --text-light: #1F2937; /* gray-800 */
    --card-bg-light: rgba(255, 255, 255, 0.7);
    --card-border-light: rgba(0, 0, 0, 0.1);
    --header-bg-light: rgba(255, 255, 255, 0.8);

    --background-dark: #121212;
    --text-dark: #E0E0E0;
    --card-bg-dark: rgba(255, 255, 255, 0.05);
    --card-border-dark: rgba(255, 255, 255, 0.1);
    --header-bg-dark: rgba(18, 18, 18, 0.7);

    /* Variables de color púrpura personalizadas */
    --purple-tint-light: rgba(109, 85, 247, 0.171);
    --purple-border-light: rgba(161, 85, 247, 0.356);
    --purple-tint-dark: rgba(168, 85, 247, 0.15);
    --purple-border-dark: rgba(168, 85, 247, 0.3);
}

/* ==============================================
Estilos Generales del Body
==============================================
*/
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--background-light);
    color: var(--text-light);
    transition: background-color 0.3s, color 0.3s;
}

/* ==============================================
Estilos para el Modo Oscuro
==============================================
*/
html.dark body {
    background-color: var(--background-dark);
    color: var(--text-dark);
}

/* ==============================================
Componentes Reutilizables
==============================================
*/

/* Tarjetas con efecto de vidrio */
.glass-card {
    background: var(--card-bg-light);
    backdrop-filter: blur(10px);
    border: 1px solid var(--card-border-light);
    transition: background-color 0.3s, border-color 0.3s;
}
html.dark .glass-card {
    background: var(--card-bg-dark);
    border: 1px solid var(--card-border-dark);
}

/* Fondo del encabezado */
.header-bg {
    background-color: var(--header-bg-light);
}
html.dark .header-bg {
     background-color: var(--header-bg-dark);
}

/* Texto con gradiente primario */
.primary-gradient-text {
    background: linear-gradient(90deg, #4F46E5, #A855F7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Fondo con gradiente primario */
.primary-gradient-bg {
    background: linear-gradient(90deg, #4F46E5, #A855F7);
}

/* Botón secundario (AHORA CON TONO PÚRPURA) */
.secondary-button {
    background-color: var(--purple-tint-light) !important;
    border: 1px solid var(--purple-border-light) !important;
}
html.dark .secondary-button {
    background-color: var(--purple-tint-dark) !important;
    border: 1px solid var(--purple-border-dark) !important;
}

/* ==============================================
Estilos de Texto y Navegación
==============================================
*/

/* Enlaces de navegación */
.nav-link {
    color: #4B5563; /* gray-600 */
}
html.dark .nav-link {
    color: #D1D5DB; /* gray-300 */
}
html.dark .nav-link:hover {
    color: #FFFFFF;
}
.nav-link:hover {
    color: #000000;
}

/* Texto principal */
.main-text { color: #111827; /* gray-900 */ }
html.dark .main-text { color: #FFFFFF; }

/* Texto secundario */
.secondary-text { color: #4B5563; /* gray-600 */}
html.dark .secondary-text { color: #9CA3AF; /* gray-400 */}

/* ==============================================
Estilos Específicos para NFT Rarity Viewer
==============================================
*/

/* Estilos de la barra de desplazamiento */
::-webkit-scrollbar { width: 8px; }
html.light ::-webkit-scrollbar-track { background: #e5e7eb; }
html.dark ::-webkit-scrollbar-track { background: #2d3748; }
html.light ::-webkit-scrollbar-thumb { background: #9ca3af; border-radius: 4px; }
html.dark ::-webkit-scrollbar-thumb { background: #4a5568; border-radius: 4px; }
html.light ::-webkit-scrollbar-thumb:hover { background: #6b7280; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #718096; }

/* Ocultar flechas en inputs de tipo número */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}
input[type=number] { 
    -moz-appearance: textfield; 
}

/* Estilos para los botones del acordeón de filtros */
.accordion-btn {
    background-color: var(--purple-tint-light) !important;
    border: 1px solid var(--purple-border-light) !important;
}
html.dark .accordion-btn {
    background-color: var(--purple-tint-dark) !important;
    border: 1px solid var(--purple-border-dark) !important;
}


/* Estilos para las tarjetas de rasgos */
.trait-card {
     background-color: var(--purple-tint-light) !important;
     border: 1px solid var(--purple-border-light) !important;
     cursor: pointer;
}
html.dark .trait-card {
    background-color: var(--purple-tint-dark) !important;
    border: 1px solid var(--purple-border-dark) !important;
}

/* Estilos para el contenido del acordeón de filtros */
.accordion-content { 
    max-height: 0; 
    overflow: hidden; 
    transition: max-height 0.3s ease-out; 
}

/* Estilo para etiquetas deshabilitadas */
label.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Transición para los modales */
#image-modal, #report-modal {
    transition: opacity 0.3s ease;
}

/* Estilos para los botones de paginación */
.pagination-button.active {
    background-color: #a955f7c0 !important; /* Púrpura */
    color: white !important;
    border-color: #A855F7 !important;
}

/* Estilos para inputs y selects dentro del panel de filtros */
#filter-panel select, #filter-panel input[type="number"] {
    background-color: var(--purple-tint-light) !important;
    border-color: var(--purple-border-light) !important;
}
html.dark #filter-panel select, html.dark #filter-panel input[type="number"] {
    background-color: var(--purple-tint-dark) !important;
    border-color: var(--purple-border-dark) !important;
}

/* Estilos para el modal de reporte */
#report-modal > div {
    background-color: var(--background-light) !important;
}
html.dark #report-modal > div {
    background-color: #1F2937 !important; /* gray-800 */
}

/* Estilos para la caja de descripción del NFT */
.glass-card.sticky > div:last-child {
    background-color: var(--purple-tint-light) !important;
    border: 1px solid var(--purple-border-light) !important;
}
html.dark .glass-card.sticky > div:last-child {
    background-color: var(--purple-tint-dark) !important;
    border: 1px solid var(--purple-border-dark) !important;
}

/* Estilos para el select de "items por página" y botones de paginación */
#items-per-page, .pagination-button {
    background-color: var(--purple-tint-light) !important;
    border: 1px solid var(--purple-border-light) !important;
}
html.dark #items-per-page, html.dark .pagination-button {
    background-color: var(--purple-tint-dark) !important;
    border: 1px solid var(--purple-border-dark) !important;
}

/* ==============================================
Efectos de Interacción de Botones
==============================================
*/

/* --- Transición Suave --- */
/* Define una transición suave para todos los efectos de los botones */
.secondary-button,
.accordion-btn,
.pagination-button,
.trait-card,
#connectWalletBtn,
#theme-toggle,
header a[class*="text-gray-500"],
footer a[class*="text-gray-500"] {
    transition: all 0.15s ease-in-out;
}

/* --- Efecto Hover (Sobresalir) --- */
/* Aplica una sombra y levanta el botón cuando el mouse pasa por encima */
.secondary-button:hover,
.accordion-btn:hover,
.pagination-button:hover,
.trait-card:hover,
#connectWalletBtn:hover,
#theme-toggle:hover,
header a[class*="text-gray-500"]:hover,
footer a[class*="text-gray-500"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(116, 57, 255, 0.548);
}

/* --- Efecto Active (Presionar) --- */
/* Hune el botón con una sombra interior cuando se hace clic */
.secondary-button:active,
.accordion-btn:active,
.pagination-button:active,
.trait-card:active,
#connectWalletBtn:active,
#theme-toggle:active,
header a[class*="text-gray-500"]:active,
footer a[class*="text-gray-500"]:active {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4) !important;
    transform: translateY(1px);
}