/* clan_app/inventory/static/inventory/css/home_login.css */

/* ==================================================== */
/* --- VARIABLES CSS (CONSOLIDADAS) --- */
/* ==================================================== */
:root {
    --cyber-blue: #00FFFF; /* Cian vibrante */
    --cyber-purple: #FF00FF; /* Magenta vibrante */
    --dark-bg: #1a1a2e; /* Fondo oscuro principal */
    --darker-bg: #16213e; /* Fondo un poco más oscuro */
    --light-grey: #b0bec5;
    --text-color: #e0e0e0; /* Color de texto general */
    --border-glow: #00FFFF; /* Borde con brillo */
    --font-main: 'Oxanium', monospace, sans-serif;
    --font-display: 'Oxanium', monospace, sans-serif; /* Para títulos grandes */
    /* Las siguientes variables fueron añadidas o ajustadas para los nuevos inputs */
    --text-color-light: #FFFFFF; /* Blanco para texto general */
    --background-input-dark: #212121; /* Fondo específico para inputs, similar al original */
    --shadow-light-blue: rgba(0, 255, 255, 0.5); /* Sombra cian claro */
    --shadow-light-purple: rgba(255, 0, 255, 0.5); /* Sombra magenta claro */
    --shadow-dark-blue: rgba(0, 128, 128, 0.5); /* Sombra cian oscuro */
    --shadow-dark-purple: rgba(128, 0, 128, 0.5); /* Sombra magenta oscuro */
}

/* ==================================================== */
/* --- RESETEO Y ESTILOS BÁSICOS GLOBALES --- */
/* ==================================================== */
body {
    margin: 0;
    padding: 0;
    font-family: var(--font-main);
    background-color: var(--dark-bg);
    color: var(--text-color);
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Estilos de enlaces generales */
a {
    color: var(--cyber-blue);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--cyber-purple);
}

/* ==================================================== */
/* --- ESTRUCTURA PRINCIPAL DE LA PÁGINA --- */
/* ==================================================== */
.main-wrapper {
    padding-top: 20px;
    padding-bottom: 80px;
    box-sizing: border-box;
    flex-grow: 1;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
}

.custom-container {
    max-width: 1920px;
    width: 100%;
    margin: 0 auto;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 20px;
    box-sizing: border-box;
}

/* Header de la App (Si es un header global, no la navbar) */
.app-header {
    width: 100%;
    padding: 20px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5);
    border-bottom: 2px solid rgba(var(--cyber-blue), 0.3);
    box-shadow: 0 0 15px rgba(var(--cyber-blue), 0.2);
    margin-bottom: 40px;
}

.app-title {
    font-family: var(--font-display);
    font-size: 3em;
    color: var(--cyber-blue);
    text-shadow: 0 0 15px rgba(var(--cyber-blue), 0.8);
    text-transform: uppercase;
    letter-spacing: 3px;
    margin: 0;
}

/* Contenido Principal (dentro de .custom-container) */
.main-content {
    /* Centra el contenido principal. Si el formulario es un hijo directo, lo centrará. */
    text-align: center; 
    gap: 40px; 
    width: 100%;
    display: flex; /* Usamos flexbox para centrar contenido vertical y horizontalmente */
    flex-direction: column; /* Apila los elementos verticalmente */
    align-items: center; /* Centra horizontalmente los elementos hijos */
    justify-content: center; /* Centra verticalmente los elementos hijos (si hay espacio) */
    min-height: 60vh; /* Para que haya espacio para centrar verticalmente, ajusta según necesites */
}

/* ==================================================== */
/* --- TÍTULOS Y ENCABEZADOS --- */
/* ==================================================== */
.section-heading {
    font-family: var(--font-display);
    font-size: 2.5em;
    color: var(--cyber-purple);
    text-shadow: 0 0 10px rgba(var(--cyber-purple), 0.7);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 20px;
}

/* CONSOLIDADO: Estilo para los títulos de sección principales (usado en Mercado) */
.section-title {
    font-family: var(--font-display);
    font-size: 3em;
    text-transform: uppercase;
    color: var(--cyber-blue);
    text-shadow: 0 0 15px rgba(var(--cyber-blue), 0.8);
    margin-bottom: 20px;
    letter-spacing: 2px;
    text-align: center;
    width: 100%;
}

.subsection-heading {
    font-family: var(--font-display);
    font-size: 1.8em;
    color: var(--cyber-blue);
    text-shadow: 0 0 8px rgba(var(--cyber-blue), 0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

/* ==================================================== */
/* --- ESTILOS PARA EL SUBMENÚ DE MERCADO (`.header-menu.sub-navbar`) --- */
/* ==================================================== */
.header-menu.sub-navbar {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 10px 0;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--cyber-blue);
    box-shadow: 0 5px 15px rgba(0, 255, 255, 0.2);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header-menu.sub-navbar .nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    justify-content: center;
}

.header-menu.sub-navbar .nav-link {
    font-size: 1.1em;
    font-weight: 700;
    color: var(--light-grey);
    position: relative;
    padding-bottom: 5px;
    text-transform: uppercase;
    white-space: nowrap;
}

.header-menu.sub-navbar .nav-link:hover,
.header-menu.sub-navbar .nav-link.active {
    color: var(--cyber-blue);
    text-shadow: 0 0 8px rgba(var(--cyber-blue), 0.7);
}

.header-menu.sub-navbar .nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    background: var(--cyber-blue);
    left: 0;
    bottom: 0;
    transition: width 0.3s ease;
}

.header-menu.sub-navbar .nav-link:hover::after,
.header-menu.sub-navbar .nav-link.active::after {
    width: 100%;
}

/* ==================================================== */
/* --- ESTILOS DE TARJETAS (GENERALES Y ESPECÍFICAS) --- */
/* ==================================================== */

/* Contenedor de las tarjetas */
.cards-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin-top: 20px;
    width: 100%;
}

/* Estilos para las tarjetas de ítems individuales (.item-glow-card) */
/* ESTOS SON LOS ESTILOS UIVERSE.IO ADAPTADOS A item-glow-card */
.item-glow-card {
    position: relative;
    width: 220px;
    min-height: 280px;
    background-color: #000 !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 12px;
    gap: 12px;
    border-radius: 8px;
    color: white; /* Aseguramos un color de texto por defecto */
    box-sizing: border-box;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Pseudo-elemento para el borde interno más nítido (el que se ve como el "contorno") */
.item-glow-card::before {
    content: '';
    position: absolute;
    /* Eliminamos inset, left, margin, width, height fijos */
    top: -6px;    /* Extiende 6px hacia arriba */
    bottom: -6px; /* Extiende 6px hacia abajo */
    left: -6px;   /* Extiende 6px hacia la izquierda */
    right: -6px;  /* Extiende 6px hacia la derecha */
    border-radius: 10px;
    background: linear-gradient(-45deg, #e81cff 0%, #40c9ff 100% ); /* Gradiente para el borde */
    z-index: -10; /* Detrás del contenido, y detrás del ::after */
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease; /* Transición para el hover */
}

/* Pseudo-elemento para el brillo difuminado principal (el que está más al fondo) */
.item-glow-card::after {
    content: "";
    z-index: -1; /* Delante del ::before, detrás del contenido */
    position: absolute;
    /* Eliminamos inset, y usamos valores negativos para extender el área para el blur */
    top: -8px;    /* Extiende 8px hacia arriba */
    bottom: -8px; /* Extiende 8px hacia abajo */
    left: -8px;   /* Extiende 8px hacia la izquierda */
    right: -8px;  /* Extiende 8px hacia la derecha */
    background: linear-gradient(-45deg, #fc00ff 0%, #00dbde 100% ); /* Gradiente para el brillo */
    /* Mantenemos transform y filter para el efecto de blur y la animación */
    transform: translate3d(0, 0, 0) scale(0.95); /* Esto encoge el gradiente antes del blur */
    filter: blur(20px); /* Aplica el desenfoque para el brillo */
    transition: transform 0.3s ease, filter 0.3s ease, opacity 0.3s ease; /* Transición para el hover */
    opacity: 0.7; /* Opacidad inicial para que se vea sutilmente */
    animation: glow-animation 3s linear infinite; /* Animación de movimiento de gradiente */
}

/* EFECTOS DE HOVER para .item-glow-card */
.item-glow-card:hover::after { /* Afecta al brillo difuminado (el z-index -10) */
    filter: blur(30px); /* Aumenta el blur al pasar el ratón */
    opacity: 1; /* Hace el brillo más intenso */
}

.item-glow-card:hover::before { /* Afecta al borde nítido (el z-index -1) */
    transform: rotate(-90deg) scaleX(1.34) scaleY(0.77);
    opacity: 1; /* El borde se vuelve completamente opaco */
}

/* Keyframes para la animación del brillo */
@keyframes glow-animation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Estilos de texto dentro de .item-glow-card */
.item-glow-card .heading {
    font-size: 20px; /* Ajustado al original de Uiverse.io */
    text-transform: capitalize;
    font-weight: 700;
    font-family: var(--font-display); /* Mantener tu fuente display */
    color: var(--cyber-blue); /* Color de título cyberpunk */
    text-shadow: 0 0 5px rgba(var(--cyber-blue), 0.5);
    margin-bottom: 5px;
}

.item-glow-card p:not(.heading) { /* Párrafos que no son el título */
    font-size: 14px; /* Ajustado al original de Uiverse.io */
    color: var(--light-grey); /* Color por defecto para párrafos */
}

/* NUEVA CLASE PARA EL TEXTO DEL CONTADOR DE ÍTEMS (Si quieres mantenerlo diferente) */
.item-count-text {
    font-size: 15px; /* Tamaño ligeramente más grande */
    color: var(--cyber-blue); /* Color a cian vibrante */
    font-weight: 600;
    font-family: var(--font-main);
    text-transform: uppercase;
    margin-top: auto; /* Empuja este texto hacia abajo, antes del enlace */
    flex-grow: 1; /* Le permite ocupar espacio flexible si es necesario */
    display: block; /* Asegura que ocupe su propia línea */
}

/* Estilo para la cantidad de ítems en las tarjetas del mercado, haciéndolo blanco */
.item-count-white {
    color: white !important; /* Usamos !important para asegurar que sobrescriba cualquier estilo de Bootstrap */
}

/* Placeholder de imagen dentro de la tarjeta */
.item-glow-card .item-image {
    max-height: 120px;
    object-fit: contain;
    padding: 5px;
    margin-bottom: 5px;
}

.item-glow-card .no-image-placeholder {
    background-color: var(--dark-bg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 120px;
    color: var(--light-grey);
    font-size: 1.2em;
    border-radius: 4px;
    margin-bottom: 5px;
    flex-grow: 1;
}

/* CLASE PARA HACER TODA LA TARJETA CLICABLE */
.item-card-link {
    display: block; /* Importante para que el enlace ocupe todo el espacio de la tarjeta */
    text-decoration: none; /* Quita el subrayado del enlace */
    color: inherit; /* Hereda el color del texto */
    /* width: 100%; */ /* Comentar o eliminar si .item-glow-card ya tiene width fijo */
    /* height: 100%; */ /* Comentar o eliminar si .item-glow-card ya tiene height fijo */
    border-radius: 8px; /* Para que coincida con el borde de la tarjeta */
    /* overflow: hidden; /* Importante para que los pseudo-elementos internos queden dentro */
    cursor: pointer;
    padding: 0;
    margin: 0;
    box-sizing: border-box; /* Incluir padding y borde en el width/height */
}

/* Asegura que el item-glow-card dentro del link ocupe todo el espacio y mantenga su estilo */
.item-card-link .item-glow-card {
    /* Puedes eliminarlas o comentarlas si los resultados no son los esperados. */
    /* width: 100%; */
    /* height: 100%; */
    margin: 0;
}

/* --- ESTILOS PARA LAS TARJETAS DE CATEGORÍA (`.category-card`) --- */
.item-categories {
    margin-top: 0;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    justify-content: center;
    align-items: start;
}

.category-card {
    background-color: #000 !important; /* Fondo negro puro */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 15px;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
    background-size: cover;
    background-position: center;
    text-decoration: none;
    color: inherit;
    min-height: 230px;
    aspect-ratio: 1 / 1.1;
    /* La sombra inicial la da el ::after, así que este box-shadow lo he retirado
        para que no haya conflicto visual */
    /* box-shadow: 0 0 15px rgba(255,94,247,0.5); */
}

.category-card:hover {
    transform: translateY(-5px);
}

.category-card::before {
    content: '';
    position: absolute;
    top: -6px;
    bottom: -6px;
    left: -6px;
    right: -6px;
    margin: auto;
    width: calc(100% + 12px);
    height: calc(100% + 12px);
    border-radius: 10px;
    background: linear-gradient(-45deg, #e81cff 0%, #40c9ff 100% );
    z-index: -10;
    pointer-events: none;
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.category-card::after {
    content: "";
    z-index: -1;
    position: absolute;
    top: -6px;
    bottom: -6px;
    left: -6px;
    right: -6px;
    background: linear-gradient(-45deg, #fc00ff 0%, #00dbde 100% );
    transform: translate3d(0, 0, 0) scale(0.95);
    filter: blur(20px);
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Hover states para category-card */
.category-card:hover::after {
    filter: blur(30px);
}

.category-card:hover::before {
    transform: rotate(-90deg) scaleX(1.34) scaleY(0.77);
}

/* Clases específicas para las imágenes de fondo */
.category-weapons { background-image: url('../img/category_weapons.png'); }
.category-cyberlimbs { background-image: url('../img/category_cyberlimbs.png'); }
.category-accessories { background-image: url('../img/category_accessories.png'); }
.category-weapon-skins { background-image: url('../img/category_weapon_skins.png'); }
.category-aspects { background-image: url('../img/category_aspect.png'); }

.category-title {
    font-family: var(--font-display);
    font-size: 1.4em;
    text-transform: uppercase;
    color: var(--text-color);
    text-shadow: 0 0 8px rgba(var(--cyber-blue), 0.5);
    position: relative;
    z-index: 2;
    text-align: center;
    width: 100%;
    white-space: normal;
}

/* Este ::before es el gradiente oscuro sobre la imagen de fondo de .category-card */
/* Renombrado a .category-card-overlay para evitar conflicto de nombre con ::before/::after del brillo */
.category-card .category-card-overlay::before { /* Este selector puede que necesite ajuste si no es un elemento real */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 50%);
    z-index: 1;
}

/* ==================================================== */
/* --- ESTILOS PARA BOTONES CYBERPUNK --- */
/* ==================================================== */
.cyber-button {
    cursor: pointer;
    color: #fff !important;
    font-size: 17px;
    border-radius: 1rem;
    border: none;
    position: relative;
    background: #100720;
    transition: all 0.2s ease-in-out;
    font-family: var(--font-main);
    text-transform: uppercase;
    font-weight: 700;
    box-shadow: 0 0 15px rgba(255,94,247,0.5);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    white-space: nowrap;
    padding: 12px 25px;
    min-width: 120px;
}

.cyber-button::after {
    content: '';
    width: 100%;
    height: 100%;
    background-image: radial-gradient( circle farthest-corner at 10% 20%, rgba(255,94,247,1) 17.8%, rgba(2,245,255,1) 100.2% );
    filter: blur(18px);
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 1rem;
    transition: all 0.2s ease-in-out;
}

.cyber-button:active {
    transform: scale(0.9) rotate(3deg);
    background: radial-gradient( circle farthest-corner at 10% 20%, rgba(255,94,247,1) 17.8%, rgba(2,245,255,1) 100.2% );
    transition: 0.5s;
}

.cyber-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 25px rgba(255,94,247,0.8);
}

.cyber-button:hover::after {
    filter: blur(25px);
}

/* --- AJUSTES ESPECÍFICOS PARA EL BOTÓN EN LA NAVBAR --- */
.navbar .cyber-button {
    height: auto;
    padding: 0.5rem 1rem;
    font-size: 0.9em;
    border-radius: 0.5rem;
    box-shadow: 0 0 8px rgba(255,94,247,0.4);
    margin-left: 10px;
    width: auto;
    min-width: 120px;
}

.navbar .cyber-button::after {
    filter: blur(10px);
    border-radius: 0.5rem;
}

/* --- ESTILO PARA BOTONES DENTRO DE TARJETAS DE CATEGORÍA (.category-card) --- */
.category-card .cyber-button {
    width: 100%;
    padding: 10px 15px;
    font-size: 1em;
    margin-top: 15px;
    align-self: center;
}


/* --- BOTÓN DE ATRÁS (back-button) --- */
.back-button {
    background: none;
    border: 1px solid var(--cyber-blue);
    color: var(--cyber-blue);
    padding: 8px 15px;
    font-size: 0.9em;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease;
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(var(--cyber-blue), 0.4);
    margin-top: 30px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.back-button:hover {
    background: var(--cyber-blue);
    color: var(--dark-bg);
    box-shadow: 0 0 15px rgba(var(--cyber-blue), 0.8);
}


/* ==================================================== */
/* --- ESTILOS PARA BREADCRUMBS --- */
/* ==================================================== */
.breadcrumb {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    padding: 10px 15px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding-left: 0;
}

.cyberpunk-breadcrumb-item {
    font-family: var(--font-main);
    font-size: 0.95em;
    color: var(--light-grey);
    display: flex;
    align-items: center;
    position: relative;
}

.cyberpunk-breadcrumb-item + .cyberpunk-breadcrumb-item::before {
    display: inline-block;
    padding-right: 10px;
    color: var(--cyber-blue);
    content: '>';
    font-size: 1.2em;
    margin-right: 10px;
    font-weight: bold;
}

.cyberpunk-breadcrumb-item.active {
    color: var(--cyber-purple);
    font-weight: bold;
    text-shadow: 0 0 5px rgba(255, 0, 255, 0.7);
}

.cyber-button-breadcrumb {
    color: var(--cyber-blue);
    text-decoration: none;
    transition: color 0.3s ease, text-shadow 0.3s ease;
    font-weight: bold;
    padding: 0 2px;
}

.cyber-button-breadcrumb:hover {
    color: var(--cyber-purple);
    text-shadow: 0 0 8px rgba(255, 0, 255, 0.7);
}

/* ==================================================== */
/* --- ESTILOS DE PAGINACIÓN CYBERPUNK --- */
/* ==================================================== */
.pagination-cyber {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    padding: 0;
    margin-top: 30px;
}

.pagination-cyber .page-item {
    margin: 0 5px;
}

.pagination-cyber .page-link {
    background-color: var(--darker-bg);
    border: 1px solid var(--cyber-blue);
    color: var(--cyber-blue);
    padding: 8px 15px;
    border-radius: 5px;
    transition: all 0.3s ease;
    text-decoration: none;
    font-family: var(--font-main);
    font-weight: 700;
    display: block;
}

.pagination-cyber .page-link:hover {
    background-color: var(--cyber-blue);
    color: var(--dark-bg);
    box-shadow: 0 0 10px rgba(var(--cyber-blue), 0.6);
    transform: translateY(-2px);
}

.pagination-cyber .page-item.active .page-link {
    background-color: var(--cyber-purple);
    border-color: var(--cyber-purple);
    color: var(--text-color);
    box-shadow: 0 0 15px rgba(var(--cyber-purple), 0.8);
    pointer-events: none;
}

.pagination-cyber .page-item.disabled .page-link {
    background-color: rgba(var(--darker-bg), 0.5);
    border-color: rgba(var(--cyber-blue), 0.3);
    color: rgba(var(--cyber-blue), 0.5);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ==================================================== */
/* --- MENSAJES DE ESTADO Y SPINNER --- */
/* ==================================================== */
.status-message {
    margin-top: 15px;
    font-size: 1.1em;
    color: var(--light-grey);
}

.status-message.error {
    color: red;
}

.spinner-border {
    color: var(--cyber-purple) !important;
}

/* ==================================================== */
/* --- FOOTER --- */
/* ==================================================== */
.footer {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 40px;
    background-color: rgba(0, 0, 0, 0.5);
    border-top: 2px solid rgba(var(--cyber-blue), 0.3);
    box-shadow: 0 0 15px rgba(var(--cyber-blue), 0.2);
    box-sizing: border-box;
    margin-top: 50px;
    color: var(--light-grey); /* Asegura que el texto y los iconos por defecto sean visibles en el fondo oscuro */
}

/* Estilos para los enlaces de los iconos en el footer */
.footer-icon-link {
    text-decoration: none; /* Elimina el subrayado de los enlaces de los iconos */
    color: var(--light-grey); /* Color por defecto para los iconos */
    transition: color 0.3s ease; /* Transición suave para el cambio de color al pasar el ratón */
    display: flex; /* Asegura que el enlace sea un flex container para centrar la imagen si es necesario */
    align-items: center; /* Alinea verticalmente la imagen dentro del enlace */
    justify-content: center; /* Alinea horizontalmente la imagen dentro del enlace */
}

/* Efecto hover para los enlaces de los iconos */
.footer-icon-link:hover {
    color: var(--cyber-blue); /* Cambia el color al cian al pasar el ratón */
}

/* Estilos específicos para los LOGOS SVG dentro de los enlaces del footer */
/* Aplicamos un tamaño máximo para que no se desborden y se ajusten a 24px de alto */
.footer-icon-link img { /* Esto afectará a todas las imágenes dentro de .footer-icon-link */
    height: 24px; /* O el tamaño que desees. 24px fue el que usamos para los iconos de fuente. */
    width: auto; /* Mantiene la proporción de la imagen */
    max-width: 100%; /* Asegura que no se desborden de su contenedor si el padre es más pequeño */
    vertical-align: middle; /* Ayuda a alinear visualmente con otros elementos si los hubiera */
}

/* Si quieres un tamaño diferente para el logo de Opensea, puedes ser más específico */
.footer-opensea-logo {
    height: 24px; /* Puedes dejarlo en 24px o ajustarlo */
    /* width: auto; ya está cubierto por .footer-icon-link img */
}

/* Las clases footer-social-icon ahora se aplicarán a las imágenes SVG directamente */
.footer-social-icon {
    height: 24px; /* Controla el alto del icono */
    width: auto; /* Mantiene la proporción */

}

/* ==================================================== */
/* --- ESTILOS PARA INPUTS CYBERPUNK (ANCLADOS AL CENTRO) --- */
/* ==================================================== */

/* Contenedor principal del formulario */
/* Esto se aplicaría a tu <form class="registration-form"> si tienes uno */
.registration-form {
    display: flex;
    flex-direction: column; /* Apila los elementos del formulario verticalmente */
    align-items: center; /* Centra horizontalmente los elementos dentro del formulario (inputs, botones) */
    justify-content: center; /* Centra verticalmente el contenido del formulario si el form tiene una altura definida */
    width: 100%; /* Ocupa el 100% del ancho disponible en main-content */
    max-width: 400px; /* Limita el ancho del formulario para que no se estire demasiado */
    margin: 0 auto; /* Centra el formulario completo en la página */
    padding: 20px;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.6); /* Fondo para el formulario */
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(var(--cyber-blue), 0.3); /* Sombra para el formulario */
}

/* Contenedor general para cada campo del formulario (etiqueta, input, help text) */
.form-group {
    margin-bottom: 30px; /* Espacio entre cada grupo de campo */
    width: 100%; /* Asegura que el form-group ocupe todo el ancho disponible en .registration-form */
    text-align: left; /* Alinea los contenidos (label, input, help text) a la izquierda dentro del form-group */
}

/* Estilos para las etiquetas de formulario (Username, Internal Wallet) */
.form-group label {
    display: block; /* La etiqueta ocupa su propia línea */
    margin-bottom: 5px; /* Pequeño espacio debajo de la etiqueta */
    color: var(--text-color); 
    font-weight: bold; 
    font-size: 1.1em;
}

/* Contenedor principal del input con el borde brillante */
.box-input {
    position: relative;
    width: 100%; /* Ocupa el 100% del ancho de su padre (.form-group) */
    margin-top: 0; 
    margin-bottom: 0; 
}

.border {
    background-image: linear-gradient(to right bottom, 
                                     var(--cyber-purple), 
                                     var(--cyber-blue), 
                                     #00AAFF, 
                                     var(--cyber-purple)) !important; 
    
    box-shadow: 
        -15px -5px 20px -5px var(--shadow-light-purple),
        15px -5px 20px -5px var(--shadow-light-blue),
        15px 5px 20px -5px var(--shadow-dark-blue),
        -15px 5px 20px -5px var(--shadow-dark-purple) !important; 
    
    padding: 4px;
    border-radius: 8px;
    background-color: transparent !important; 
}

.input {
    background-color: var(--background-input-dark) !important; 
    width: 100%; 
    height: 40px;
    padding: 0 19px 0 10px;
    font-size: 1.1em;
    position: relative;
    border: none !important; 
    color: var(--text-color-light); 
    outline: none !important; 
    overflow: hidden;
    border-radius: 6px;
    display: block; 
}

/* Pseudo-elementos para el efecto visual (luces/resplandores) */
.box-input::after,
.box-input::before {
    content: "";
    width: 130px;
    height: 30px;
    position: absolute;
    z-index: -1;
}

.box-input::after {
    bottom: 0;
    right: 0;
}

.box-input::before {
    top: 0;
    left: 0;
}

/* Estilo del placeholder */
.input::placeholder {
    color: rgba(var(--text-color-light), 0.6); 
    transition: all 0.5s ease-in, transform 0.2s ease-in 0.6s, opacity 0.2s ease-in 0.6s;
}

/* Efecto del placeholder al enfocar el input */
.input:focus::placeholder {
    padding-left: 165px;
    transform: translateY(-50px);
    opacity: 0;
}

/* --- Estilos para los textos de ayuda (help_text) de los formularios --- */
.form-text.text-muted {
    color: #FFFFFF !important; 
    font-size: 0.9em; 
    margin-top: 8px; 
    margin-bottom: 0; 
    display: block; 
    text-align: left; 
}

.register-button-container {
    margin-top: 40px; 
    text-align: center; 
}

/* ==================================================== */
/* --- MEDIA QUERIES PARA RESPONSIVIDAD (CONSOLIDADAS) --- */
/* ==================================================== */
@media (max-width: 1200px) {
    .section-title {
        font-size: 2.5em;
    }
    .category-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 15px;
    }
    .category-card {
        min-height: 190px;
        aspect-ratio: 1 / 1.1;
        padding: 10px;
    }
    .category-title {
        font-size: 1.2em;
    }
}

@media (max-width: 768px) {
    .app-header {
        padding: 15px;
        margin-bottom: 20px;
    }
    .app-title {
        font-size: 2.2em;
    }
    .section-heading, .section-title {
        font-size: 1.8em;
    }
    .subsection-heading {
        font-size: 1.4em;
    }

    .cards-container {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .item-glow-card {
        width: 90%; /* Ajuste para que ocupe más espacio en móviles */
        min-height: 280px; 
        max-width: 300px; /* Limita el ancho para que no se vea gigante */
    }
    .item-glow-card .item-image,
    .item-glow-card .no-image-placeholder {
        max-height: 180px;
        min-height: 120px;
    }

    .header-menu.sub-navbar .nav-list {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .header-menu.sub-navbar .nav-list li {
        margin: 0;
    }
    .category-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .category-card {
        min-height: 150px;
        aspect-ratio: 1.6 / 1;
        padding: 10px;
    }
    .category-title {
        font-size: 1.1em;
    }

    .cyberpunk-breadcrumb-item {
        font-size: 0.85em;
    }
    .cyberpunk-breadcrumb-item + .cyberpunk-breadcrumb-item::before {
        padding-right: 5px;
        margin-right: 5px;
    }
    .pagination-cyber .page-link {
        padding: 6px 10px;
        font-size: 0.8em;
    }
    .footer {
        padding: 8px 20px;
        flex-direction: column;
        gap: 5px;
    }
    .early-access {
        font-size: 0.8em;
    }
    
    .registration-form {
        max-width: 95%; 
        padding: 15px;
    }
}

@media (max-width: 576px) {
    .section-title, .section-heading {
        font-size: 1.5em;
    }
    .item-glow-card .heading {
        font-size: 1.1em;
    }
    .cyber-button {
        font-size: 0.85em;
        padding: 10px 20px;
    }
}