/* --- Reseteo Básico y Variables de Color --- */
/* Nuevo código (Tema Claro) */
:root {
    --bg-color: #f8f9fa;                 /* Color de fondo principal: Blanco */
    --primary-text-color: #212529;       /* Color de texto principal: Negro suave */
    --secondary-text-color: #6c757d;     /* Color para texto menos importante: Gris */
    --accent-color: #4D96FF;             /* Azul eléctrico (se mantiene) */
    --header-border-color: #dee2e6;       /* Borde inferior del header: Gris claro */
    --input-bg-color: #f8f9fa;           /* Fondo para inputs: Gris muy claro */
    --input-border-color: #ced4da;        /* Borde para inputs: Gris medio */
    --secondary-bg-color: #f8f9fa;       /* Color de fondo para tarjetas y secciones */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--bg-color);
    color: var(--primary-text-color);
}

/* =======================================================
ESTILOS UNIVERSALES PARA HERO SLIDER (FULL-WIDTH)
======================================================= */

/* 1. La sección contenedora ocupa el ancho y una altura considerable */
.hero-slider-section {
    width: 100%;
    height: 80vh; /* Altura estándar para escritorio */
    margin: 0;
    padding: 0;
    margin-top: -1px;
}

/* 2. El slider y la imagen/video CUBREN todo el espacio en TODAS las pantallas */
.hero-slider {
    width: 100%;
    height: 100%;
    border-radius: 0; /* Nos aseguramos de quitar los bordes redondeados */
}

.hero-slider .swiper-slide img,
.hero-slider .swiper-slide video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* La imagen siempre CUBRE el espacio */
}

/* 3. AJUSTE OPCIONAL: Reducimos la altura solo en pantallas de celular */
@media (max-width: 768px) {
    .hero-slider-section {
        height: 30vh; /* Una altura más adecuada para no ocupar toda la pantalla del móvil */
    }
}


/* Estilo para las flechas y paginación (usa tu color de acento) */
:root {
    --swiper-navigation-color: #FFFFFF;
    --swiper-pagination-color: var(--accent-color);
}

/* --- ESTILOS PARA SECCIONES (VERSIÓN FINAL CON CLASES SEPARADAS) --- */

.carousel-section {
    margin-top: 60px;
    /* Añadimos padding vertical para darle el mismo "aire" */
    padding: 60px 0 40px 0;
}

/* 2. Estilos SOLO para la sección de la cuadrícula de videojuegos */
.grid-section {
    padding-top: 60px; /* El espaciado normal que queríamos */
}

/* 1. Regla única para el header */
.main-header {
    background-color: var(--accent-color);
    padding: 10px 5%;
    position: sticky; /* <- Ahora funcionará */
    top: 0;
    z-index: 1000;
    width: 100%;
    transition: transform 0.4s ease-in-out;
}

/* 2. Clase que se añade con JS para ocultar el header */
.main-header.header-hidden {
    transform: translateY(-100%);
}

/* --- Fila Superior --- */
.header-top {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: 10px;
}

/* Logo */
.header-logo {
    flex-shrink: 0; /* Evita que el logo se encoja */
}
.header-logo .logo {
    text-decoration: none;
    color: #ffffff;
    display: flex;
    align-items: center;
}
.header-logo .logo img { height: 50px; margin-right: 10px; }
.header-logo .logo span { font-size: 1.2rem; font-weight: 700; }

/* Buscador Central (La parte más importante) */
.header-search {
    flex-grow: 1; /* Hace que el buscador ocupe todo el espacio central */
}
.header-search .search-box {
    width: 100%;
    display: flex;
    align-items: center;
    background-color: #FFF !important; /* Fondo blanco */
    border-radius: 20px;
    padding: 8px 15px;
}
.header-search .search-input {
    width: 100%;
    border: none;
    background: none;
    outline: none;
    font-size: 1rem;
    color: #333 !important; /* Texto oscuro */
}
.header-search .search-input::placeholder {
    color: #777777 !important; /* Placeholder gris */
}
.header-search .search-button {
    background: none; border: none; cursor: pointer;
    font-size: 1.1rem;
    color: #909090 !important; /* Icono de lupa gris */
}

/* Ajustamos el desplegable del buscador */
.search-results-dropdown {
    top: calc(100% + 5px);
    width: 100%;
    left: 0;
    right: 0;
}


/* Acciones de Usuario */
.header-actions {
    flex-shrink: 0; /* Evita que los iconos se encojan */
}
.header-actions .nav-actions {
    display: flex;
    align-items: center;
    gap: 25px;
}
.header-actions .nav-actions a {
    color: #fbfbfb;
    font-size: 1.4rem;
}

/* --- Estilos del Logo --- */
.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--primary-text-color);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.logo i {
    color: var(--accent-color);
    margin-right: 10px;
    font-size: 1.8rem;
}

/* --- Estilos del Logo --- */
.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    /* Las propiedades de texto como color, font-size, etc., ya no son necesarias aquí */
}

/* AÑADE ESTA NUEVA REGLA PARA LA IMAGEN */
.logo img {
    height: 40px; /* <-- Ajusta esta altura a tu gusto */
    width: auto;  /* El ancho se ajustará automáticamente para mantener la proporción */
    /* --- AÑADE LA LÍNEA DE SOMBREADO QUE PREFIERAS AQUÍ --- */
    filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.6)); /* Ejemplo recomendado */
}

/* --- Estilos de los Iconos de Acción y la Barra de Búsqueda --- */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 25px; /* Espacio entre iconos y caja de búsqueda */
}

.nav-actions a {
    color: var(--secondary-text-color);
    font-size: 1.2rem;
    transition: color 0.3s ease;
}

.nav-actions a:hover {
    color: rgb(41, 41, 41);
}

/* --- Estilos específicos de la Caja de Búsqueda --- */
.search-box {
    display: flex;
    align-items: center;
    background-color: var(--input-bg-color);
    border: 1px solid var(--input-border-color);
    border-radius: 20px; /* Bordes redondeados */
    padding: 5px 15px;
}

.search-input {
    background: none;
    border: none;
    color: var(--primary-text-color);
    font-size: 0.9rem;
    padding: 0;
    width: 150px; /* Ancho del campo de texto */
    outline: none; /* Eliminar el contorno al enfocar */
}

.search-input::placeholder {
    color: var(--secondary-text-color);
}

.search-button {
    background: none;
    border: none;
    color: var(--secondary-text-color);
    font-size: 1rem;
    cursor: pointer;
    margin-left: 10px;
    transition: color 0.3s ease;
}

.search-button:hover {
    color: var(--accent-color);
}

.nav-links-secondary {
    list-style: none;
    display: flex;
    justify-content: space-between; /* Distribuye los enlaces uniformemente */
    gap: 20px; /* Espacio mínimo entre enlaces */
}

.nav-links-secondary a {
    text-decoration: none;
    color: var(--secondary-text-color);
    font-weight: 500;
    font-size: 0.95rem; /* Un poco más pequeño que los enlaces superiores */
    padding: 5px 0;
    transition: color 0.3s ease;
    white-space: nowrap; /* Evita que los enlaces se rompan en varias líneas */
}

.nav-links-secondary a:hover {
    color: var(--accent-color);
}
/* --- Sección de Productos Destacados --- */

.products-section {
    width: 100%;
    max-width: 1400px; /* Un poco más ancha para más columnas */
    margin: 40px auto;
    margin-top: calc(50vh - 80px);
    padding: 20px;
    color: var(--text-color); /* Color de texto general para la sección */
}

/* --- Título de Sección (NUEVO DISEÑO) --- */
.section-title {
    text-align: center;
    font-size: 2.2em; /* Un poco más pequeño y profesional */
    color: var(--primary-text-color); /* Color oscuro principal */
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700; /* Más grueso */
    
    /* El truco de las líneas */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 0 auto; /* Quitamos margen vertical */
    max-width: 1200px;
    padding: 0 20px; /* Evita que las líneas toquen los bordes en móvil */
    margin-top: -40px;
    margin-bottom: 10px;
}

.section-title::before,
.section-title::after {
    content: '';
    height: 2px; /* Grosor de la línea */
    flex-grow: 1; /* Ocupa el espacio disponible */
    background-color: var(--accent-color); /* Líneas de color azul */
    opacity: 0.5;
}

.product-grid,
.product-grid-container {
    display: grid;
    /* Corrección: Tarjetas más delgadas (220px) */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 25px; /* Corrección: Menos espacio */
    justify-content: center;
    padding: 40px 20px; /* Corrección: Menos padding lateral */
}

.product-card {
    background-color: var(--secondary-bg-color); /* Fondo de la tarjeta */
    border-radius: 12px;
    overflow: hidden;
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Espacia el contenido verticalmente */
    position: relative;
}

.product-card:hover {
    transform: scale(1.05); /* Efecto de "levantar" al pasar el mouse */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
    z-index: 10;
}

.product-image-container {
    height: 1400px; /* Altura fija para el contenedor de la imagen */
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Asegura que la imagen no se salga */
}

.product-card img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* La imagen se ajusta sin cortarse y manteniendo su aspecto */
    border-radius: 8px; /* Bordes ligeramente redondeados para la imagen */
}

.product-name {
    font-size: 1.5em;
    color: var(--text-color);
    margin: 10px 0;
    line-height: 1.3;
}

.product-price {
    font-size: 1.8em;
    font-weight: bold;
    color: var(--accent-color);
    margin-bottom: 20px;
}

.product-actions {
    display: flex;
    flex-direction: column; /* Botones apilados */
    gap: 10px; /* Espacio entre botones */
    margin-top: auto; /* Empuja los botones hacia abajo */
}

/* Estilos para los botones generales (si no los tienes ya) */
.btn {
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-decoration: none; /* Por si lo usas con <a href> */
    display: inline-block; /* Para que el padding y margen funcionen bien */
}

.add-to-cart-btn {
    background-color: #3e7fd2;
    color: rgb(255, 255, 255);
    font-weight: 700;
}

.add-to-cart-btn:hover {
    background-color: var(--accent-color); /* Un tono más oscuro de tu color de acento */
    color: white;
}

.view-details-btn {
    background-color: transparent;
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
}

.view-details-btn:hover {
    background-color: rgba(0, 0, 0, 0.35);
    color: white;
}

.view-more2 {
    text-align: center;
    margin-top: -20px; /* Quitamos el margen superior */
    background-color: var(--secondary-bg-color); /* Mismo fondo gris */
    border-bottom: 1px solid var(--header-border-color);
    padding: 0 0 60px 0; /* Padding solo abajo */
    margin-bottom: -60px;
}

.view-more {
    text-align: center;
    margin-top: 20px;
    margin-bottom: -40px;
}

.view-all-products-btn {
    background-color: var(--accent-color);
    color: white;
    padding: 15px 30px;
    font-size: 1.1em;
    border-radius: 10px;
    margin-top: 20px;
    margin-bottom: 50px;
}

.view-all-products-btn:hover {
    background-color: #3e7fd2;
}

/* Media Queries para responsividad */
@media (max-width: 900px) {
    .product-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Menos ancho de columna */
    }
}

@media (max-width: 600px) {
    .product-grid {
    display: grid;
    /* Estilo base para móviles: 1 columna */
    grid-template-columns: 1fr;
    gap: 30px; 
}

/* Para pantallas de tabletas: 2 columnas */
@media (min-width: 600px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Para pantallas de escritorio: 4 columnas */
@media (min-width: 1200px) {
    .product-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
    .section-title {
        font-size: 2em;
    }
}
/* --- Estilos del Carrito de Compras --- */

/* Estilo para el contador del ícono del carrito */
.cart-counter-class {
    background-color: #eb2c2c;
    color: white;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 0.75rem;
    position: relative; /* Ajusta la posición si es necesario */
    top: -10px;
    right: 5px;
}

/* Modal del carrito (contenedor principal, oculto por defecto) */
.cart-modal-class {
    position: fixed;
    z-index: 2000;
    top: 0;
    right: -100%; /* Empieza fuera de la pantalla */
    width: 100%;
    max-width: 400px;
    height: 100vh;
    background-color: var(--secondary-bg-color, #2a2a3c);
    box-shadow: -4px 0 15px rgba(0,0,0,0.5);
    transition: right 0.4s ease-in-out;
}

/* Clase para mostrar el modal */
.cart-modal-class.open {
    right: 0;
}

.cart-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.cart-content h2 {
    text-align: center;
    color: var(--accent-color);
    margin-bottom: 20px;
}

.close-cart-class {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 2.5rem;
    cursor: pointer;
    color: var(--primary-text-color);
}

#cart-items-container {
    flex-grow: 1;
    overflow-y: auto; /* Scroll si hay muchos productos */
}

.cart-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--header-border-color);
    padding: 10px 0;
}

.cart-item-details {
    flex-grow: 1;
}

.cart-item-details h4 {
    margin: 0;
    font-size: 1rem;
}

.cart-item-details p {
    margin: 5px 0;
    color: var(--accent-color);
}

.cart-item-remove {
    background: none;
    border: 1px solid #ff4d4d;
    color: #ff4d4d;
    border-radius: 5px;
    cursor: pointer;
    margin-left: 15px;
    padding: 5px 10px;
}

.cart-summary {
    padding-top: 20px;
    border-top: 2px solid var(--accent-color);
    text-align: center;
}

.cart-summary p {
    font-size: 1.5rem;
    font-weight: bold;
}

.checkout-btn {
    width: 100%;
    padding: 15px;
    font-size: 1.1rem;
    background-color: var(--accent-color);
    color: white;
}

/* --- Animación de Partículas --- */
.add-to-cart-btn {
    position: relative;
    overflow: visible; /* Permitimos que las partículas se vean fuera */
}

.particle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--accent-color);
    opacity: 0;
    animation: explode 0.7s ease-out forwards;
}

/* Creamos 6 partículas y les damos un retraso y dirección diferente a cada una */
.particle:nth-child(1) { animation-delay: 0.05s; }
.particle:nth-child(2) { animation-delay: 0.1s; background-color: #ffc107; }
.particle:nth-child(3) { animation-delay: 0.15s; }
.particle:nth-child(4) { animation-delay: 0.2s; background-color: #28a745; }
.particle:nth-child(5) { animation-delay: 0.25s; }
.particle:nth-child(6) { animation-delay: 0.3s; background-color: #dc3545; }

@keyframes explode {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        /* Movemos cada partícula a una posición aleatoria */
        transform: translate(var(--x), var(--y)) scale(0);
        opacity: 0;
    }
}
/* --- Estilos del Modal de Detalles --- */

/* Fondo oscuro del modal */
.details-modal-class {
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Fondo semi-transparente */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Oculto por defecto */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Clase para mostrar el modal */
.details-modal-class.open {
    opacity: 1;
    visibility: visible;
}

/* Contenido del modal */
.modal-content {
    background-color: var(--secondary-bg-color, #2a2a3c);
    padding: 30px;
    border-radius: 15px;
    width: 90%;
    max-width: 800px;
    position: relative;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.details-modal-class.open .modal-content {
    transform: scale(1);
}

.close-details-class {
    position: absolute;
    top: 10px;
    right: 20px;
    color: var(--primary-text-color);
    font-size: 2.5rem;
    font-weight: bold;
    cursor: pointer;
}

.modal-body {
    display: flex;
    gap: 30px;
}

#modal-img {
    max-width: 300px;
    height: auto;
    object-fit: contain;
    border-radius: 10px;
}

.modal-info h2 {
    margin-top: 0;
    color: var(--accent-color);
}

.modal-price-class {
    font-size: 2rem;
    font-weight: bold;
    color: var(--accent-color);
    margin-top: 20px;
}

/* Responsividad para pantallas pequeñas (CORREGIDO PARA SCROLL MÓVIL) */
@media (max-width: 768px) {

    /* 1. Alinea el modal arriba (para ver la X) y da un margen */
    .details-modal-class {
        align-items: flex-start; /* Ya no lo centra verticalmente */
        padding-top: 5vh; /* Un pequeño margen superior (5% de la altura) */
    }

    /* 2. Limita la altura del modal y permite scroll interno */
    .modal-content {
        width: 95%; /* Un poco más de ancho en móvil */
        max-height: 90vh; /* Altura máxima del 90% de la pantalla */
        overflow-y: auto; /* ¡LA CLAVE! AÑADE SCROLL INTERNO */
        padding: 20px; /* Menos padding en móvil */
    }

    /* 3. Tus reglas existentes se mantienen */
    .modal-body {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    #modal-img {
        max-width: 100%;
    }
}
/* --- Barra Flotante de Redes Sociales (Retráctil) --- */

.floating-social-bar {
    position: fixed;
    top: 75%;
    right: 0; /* Anclamos el contenedor a la derecha */
    transform: translateY(-50%);
    z-index: 1000;
}

/* Nuevo código */
.floating-social-bar ul {
    list-style: none;
    padding: 0;
    margin: 0;
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    
    /* La clave está aquí: movemos la barra solo 25px */
    /* Como los botones miden 50px, esto deja visible justo la mitad, incluyendo el ícono */
    transform: translateX(25px); 
}

/* La regla :hover se mantiene exactamente igual */
.floating-social-bar:hover ul {
    transform: translateX(0);
}

/* Cuando el mouse pasa sobre el contenedor, la barra se despliega */
.floating-social-bar:hover ul {
    transform: translateX(0); /* Vuelve a su posición original */
}

/* Estilos de los íconos (se mantienen casi igual) */
.floating-social-bar li {
    margin-bottom: 2px;
}

.floating-social-bar a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    background-color: rgba(30, 33, 37, 0.8);
    backdrop-filter: blur(5px);
    color: white;
    font-size: 1.5rem;
    text-decoration: none;
    transition: background-color 0.3s ease;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}

/* Damos un color de hover individual a cada icono para un toque extra */
.floating-social-bar li:nth-child(1) a:hover { background-color: #25D366; } /* WhatsApp */
.floating-social-bar li:nth-child(2) a:hover { background-color: #E4405F; } /* Instagram */
.floating-social-bar li:nth-child(3) a:hover { background-color: #1DA1F2; } /* Twitter */
.floating-social-bar li:nth-child(4) a:hover { background-color: #777; }    /* Email */
/* --- Estilos de la Página de Checkout --- */

body {
    /* Aseguramos un fondo consistente */
    background-color: var(--bg-color);
    color: var(--primary-text-color);
}

.checkout-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
    max-width: 1200px;
    margin: 40px auto;
    padding: 20px;
}

.payment-methods h1 {
    color: var(--accent-color);
    margin-top: 0;
}

/* Estilos del Acordeón */
.accordion-button {
    background-color: var(--secondary-bg-color, #2a2a3c);
    color: var(--primary-text-color);
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 1.2rem;
    transition: background-color 0.4s ease;
    border-bottom: 1px solid var(--header-border-color);
}

.accordion-button:hover, .accordion-button.active {
    background-color: #3c3c50;
    color: white;
}

.accordion-button i {
    margin-right: 15px;
    color: var(--accent-color);
    width: 20px; /* Alineación */
}

.accordion-panel {
    padding: 0 18px;
    background-color: var(--bg-color);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    border-bottom: 1px solid var(--header-border-color);
}
.accordion-panel p {
    margin: 15px 0;
}

/* Estilos del Resumen de Orden */
.order-summary {
    background-color: var(--secondary-bg-color, #2a2a3c);
    padding: 20px;
    border-radius: 12px;
    height: fit-content; /* Para que no se estire innecesariamente */
}

.order-summary h2 {
    margin-top: 0;
    text-align: center;
    border-bottom: 1px solid var(--header-border-color);
    padding-bottom: 15px;
}

.summary-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    font-size: 0.9rem;
}

.summary-total {
    border-top: 2px solid var(--accent-color);
    margin-top: 20px;
    padding-top: 15px;
    display: flex;
    justify-content: space-between;
    font-size: 1.5rem;
    font-weight: bold;
}

/* Responsividad */
@media (max-width: 900px) {
    .checkout-container {
        grid-template-columns: 1fr;
    }
    .order-summary {
        grid-row: 1; /* Mueve el resumen al principio en móviles */
    }
}
/* --- Estilos para el Botón de Reportar Pago por WhatsApp --- */

#report-payment-btn {
    display: block; /* Ocupa todo el ancho disponible */
    width: 100%;
    margin-top: 30px; /* Lo separa del acordeón de pagos */
    padding: 15px;
    
    background-color: var(--accent-color); /* Usa tu color de acento principal */
    color: white; /* Texto en color blanco */
    
    text-align: center;
    text-decoration: none; /* Quita el subrayado del enlace */
    font-size: 1.2rem;   /* Aumenta el tamaño del texto */
    font-weight: bold;
    
    border: none;
    border-radius: 12px; /* Bordes redondeados consistentes */
    cursor: pointer;
    
    transition: transform 0.3s ease, background-color 0.3s ease;
}

/* Estilo para el ícono de WhatsApp dentro del botón */
#report-payment-btn i {
    margin-right: 10px; /* Espacio entre el ícono y el texto */
}

/* Efecto al pasar el mouse por encima */
#report-payment-btn:hover {
    background-color: #3e8ada; /* Un tono ligeramente más oscuro de tu color de acento */
    transform: scale(1.02); /* Un sutil efecto de crecimiento */
}

/* --- Estilos del Carrusel de Productos --- */

/* La "ventana" por la que se ve el carrusel */

/* --- Estilos del Carrusel de Productos (Versión Ping-Pong) --- */

.carousel-track {
    display: flex;
    /* 1. Ancho dinámico SÓLO para los productos originales */
    /* La transición la podemos quitar o dejar, pero la animación la controla todo */
    transition: transform 0.6s ease-in-out;
    gap: 30px;
}

/* 1. Le damos el tamaño y el margen al ENLACE */
.carousel-track .product-link {
    width: 25%;
    flex-shrink: 0;
}

/* 2. Hacemos que la TARJETA ocupe el 100% de su padre (el enlace) */
/* (Esta regla puede que no la necesites si ya se ve bien, pero es una buena práctica) */
.carousel-track .product-card {
    width: 100%; 
};

/* Reemplaza tus reglas ::before y ::after con estas */
.carousel-container::before,
.carousel-container::after {
    /* 1. Contenido y fuente del ícono */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 1.8rem;
    color: white;
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.8);

    /* 2. Posicionamiento y centrado vertical (LA CLAVE ESTÁ AQUÍ) */
    position: absolute;
    top: 130%; /* Posiciona el inicio del ícono en el centro vertical del contenedor */
    transform: translateY(-50%); /* Sube el ícono la mitad de su propia altura para centrarlo perfectamente */
    z-index: 20;
    
    /* 3. Estilos de la zona de click y efectos */
    cursor: pointer;
    opacity: 0;
    transition: all 0.3s ease;
    padding: 15px;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
}

/* El ícono aparece al pasar el mouse sobre el carrusel */
.carousel-container:hover::before,
.carousel-container:hover::after {
    opacity: 1;
}

.carousel-container::before {
    content: '\f053'; /* Ícono de flecha izquierda */
    left: 20px;       /* Distancia desde el borde izquierdo */
}

.carousel-container::after {
    content: '\f054'; /* Ícono de flecha derecha */
    right: 20px;      /* Distancia desde el borde derecho */
}

/* Pausa la animación cuando el cursor está encima */
.carousel-container:hover .carousel-track {
    animation-play-state: paused;
}

/* --- ESTILOS PARA EL MODO "VER TODOS" (VERSIÓN FINAL COMPLETA) --- */

.products-section.view-all-active .carousel-container {
    overflow: visible;
}

.products-section.view-all-active .carousel-track {
    animation: none;
    transform: translateX(0) !important;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    width: 100%;
    gap: 30px;
}

.products-section.view-all-active .carousel-track .product-card {
    width: auto;
    margin: 0;
}

.products-section.view-all-active .carousel-track .product-card:nth-child(n + calc(var(--product-count) + 1)) {
    display: none !important;
}

/* === REGLA NUEVA PARA OCULTAR LAS FLECHAS === */
.products-section.view-all-active .carousel-btn {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* --- Ajustes para Compactar las Tarjetas de Producto --- */

/* 1. Reducimos la altura del contenedor de la imagen */
.product-image-container {
    height: 140px; /* Puedes probar valores como 150px o 170px */
}

/* 2. Hacemos el texto del nombre más pequeño y ajustamos su espacio */
.product-name {
    font-size: 0.95rem; /* Un tamaño más discreto */
    line-height: 1.3; /* Mejora la legibilidad si el texto ocupa dos líneas */
    margin: 8px 0;
    min-height: 40px; /* Opcional: da una altura mínima para alinear nombres */
}

/* 3. Hacemos el texto del precio más pequeño */
.product-price {
    font-size: 1.25rem;
    margin-bottom: 12px;
}

/* 4. Hacemos los botones más pequeños */
.product-actions .btn {
    padding: 7px 10px;
    font-size: 0.85rem;
}

/* 5. Reducimos el espacio interno general de la tarjeta */
.product-card {
    padding: 12px;
}

/* --- Estilos para el Subtítulo de Sección (ahora igual al Título) --- */
.section-subtitle {
    font-size: 2.2em;
    color: var(--primary-text-color);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 0 auto;
    max-width: 1200px;
    text-align: center;
    padding: 0 20px;
    margin-bottom: 50px;
    margin-top: -80px;
}

.section-subtitle::before,
.section-subtitle::after {
    content: '';
    height: 2px;
    flex-grow: 1;
    background-color: var(--accent-color);
    opacity: 0.5;
}

/* (AÑADIR ESTA NUEVA REGLA)
   Fondo para las secciones "Videojuegos" y "Software" */
section.products-grid {
    background-color: var(--secondary-bg-color); /* Fondo gris claro */
    border-top: 1px solid var(--header-border-color);
    padding: 60px 0 0 0; /* Padding superior */
}
/* --- Estilos de la Página de Detalles del Producto --- */

.product-detail-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    max-width: 1200px;
    margin: 40px auto;
    padding: 20px;
}

/* --- Estilos de la Galería de Producto (Layout Vertical) --- */

/* Contenedor principal de la galería */
.product-gallery {
    display: flex; /* 1. Crea el layout de columnas */
    gap: 20px;     /* 2. Espacio entre las miniaturas y la imagen principal */
    align-items: flex-start; /* Alinea los elementos en la parte superior */
}

/* Columna de las miniaturas */
.thumbnail-images {
    display: flex;
    flex-direction: column; /* 3. Apila las miniaturas verticalmente */
    gap: 10px;
}

/* Las imágenes en miniatura */
.thumbnail-images img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.3s ease;
}

.thumbnail-images img:hover, .thumbnail-images img.active {
    border-color: var(--accent-color);
}

/* --- Estilos para el Contenedor de la Imagen Principal con Tamaño Fijo --- */

/* 1. Definimos el tamaño fijo del contenedor (el "marco") */
.main-image {
    width: 100%;
    height: 450px;
    max-width: 100%; /* Medida de seguridad para que se adapte en pantallas más pequeñas */
    
    border: 1px solid var(--header-border-color);
    border-radius: 15px;
    
    /* Centra la imagen si es más pequeña que el contenedor */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 2. Hacemos que la imagen se ajuste dentro del contenedor sin deformarse */
.main-image img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* <-- Esta es la propiedad clave */
}

/* Columna Derecha: Información */
.product-info h1 {
    margin-top: 0;
    font-size: 1.6rem;
}

.product-info .price {
    font-size: 2rem;
    color: var(--accent-color);
    font-weight: bold;
    margin: 20px 0;
}

.product-info .description {
    line-height: 1.7;
}

.product-actions-detail {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.product-actions-detail .btn {
    padding: 15px;
    font-size: 1.1rem;
    background-color: #4D96FF;
    color: #ffffff;
    font-weight: 700;
}

/* Responsividad */
@media (max-width: 900px) {
    .product-detail-container {
        grid-template-columns: 1fr;
    }
}
/* Neutraliza los estilos del enlace que envuelve la tarjeta de producto */
.product-link {
    text-decoration: none;
    color: inherit; /* Hereda el color del texto de su contenedor */
}

/* --- Forzar Visibilidad de la Descripción del Producto --- */

/* Usamos el ID para darle máxima prioridad a esta regla */
#product-description {
    display: block !important; /* Asegura que no esté oculto */
    height: auto !important; /* Asegura que tenga altura */
    opacity: 1 !important; /* Asegura que no sea transparente */
    visibility: visible !important; /* Asegura que sea visible */
    font-size: 1rem !important; /* Asegura un tamaño de fuente legible */
    color: #a0a0a0 !important; /* Asegura un color visible */
    margin-bottom: 20px; /* Le da un poco de espacio debajo */
}
/* --- Estilos para la Nueva Sección de Descripción Completa --- */

.product-full-description {
    max-width: 1200px; /* Mismo ancho que el contenedor principal */
    margin: 40px auto; /* Centra la sección y le da espacio vertical */
    padding: 20px;
}

/* --- Estilos para la Nueva Lista de Especificaciones (Versión Profesional) --- */

/* Párrafo de introducción (si lo tienes) */
#product-intro-paragraph {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #272727; /* Un blanco ligeramente más suave */
    margin-bottom: 40px; /* Más espacio antes de las especificaciones */
}

/* Contenedor de un componente (ej: "Procesador") */
.spec-component {
    /* Quitamos el borde izquierdo y añadimos un borde superior */
    border-top: 1px solid var(--header-border-color);
    padding: 25px 0; /* Espaciado vertical */
    margin: 0;
}

/* El primer componente no necesita un borde superior */
.spec-component:first-child {
    border-top: none;
    padding-top: 0;
}

/* Título del componente */
.component-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.component-title i {
    color: var(--accent-color);
    font-size: 1.1rem;
}

.component-title h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600; /* Un poco más de peso */
    color: var(--primary-text-color);
}

/* Contenedor de los detalles de un componente */
.component-details {
    display: grid; /* Usamos grid para alinear mejor */
    grid-template-columns: 180px 1fr; /* Columna de llave fija, valor flexible */
    gap: 10px 20px; /* Espacio vertical y horizontal */
    font-size: 0.95rem;
    color: black;
    padding-left: 30px; /* Indentación para los detalles */
}

.spec-key {
    font-weight: bold;
    /* Ya no necesita un ancho mínimo, el grid lo controla */
}

/* --- Estilos para la Nueva Lista de Especificaciones (Versión Profesional) --- */

/* Párrafo de introducción (si lo tienes) */
#product-intro-paragraph {
    font-size: 1rem;
    line-height: 1.7;
    color: #272727; /* Un blanco ligeramente más suave */
    margin-bottom: 40px; /* Más espacio antes de las especificaciones */
    text-align: justify;
}

/* Contenedor de un componente (ej: "Procesador") */
.spec-component {
    /* Quitamos el borde izquierdo y añadimos un borde superior */
    border-top: 1px solid var(--header-border-color);
    padding: 25px 0; /* Espaciado vertical */
    margin: 0;
}

/* El primer componente no necesita un borde superior */
.spec-component:first-child {
    border-top: none;
    padding-top: 0;
}

/* Título del componente */
.component-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.component-title i {
    color: var(--accent-color);
    font-size: 1.1rem;
}

.component-title h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600; /* Un poco más de peso */
    color: var(--primary-text-color);
}

/* Contenedor de los detalles de un componente */
.component-details {
    display: grid; /* Usamos grid para alinear mejor */
    grid-template-columns: 180px 1fr; /* Columna de llave fija, valor flexible */
    gap: 10px 20px; /* Espacio vertical y horizontal */
    font-size: 0.95rem;
    color: #000000;
    padding-left: 30px; /* Indentación para los detalles */
}

.spec-key {
    font-weight: bold;
    /* Ya no necesita un ancho mínimo, el grid lo controla */
}

/* --- Estilos para el Sistema de Valoración por Estrellas --- */

/* Contenedor principal de las estrellas en la página de detalles */
.star-rating-container {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0;
    cursor: pointer; /* Indica que se puede hacer clic */
}

/* Estilo para las estrellas (usando Font Awesome) */
.star-rating-container .fa-star,
.star-rating-container .fa-star-half-alt {
    color: #ffc107; /* Color amarillo para las estrellas */
}

.star-rating-container .rating-text {
    font-weight: bold;
}
.star-rating-container .reviews-count {
    color: #a0a0a0;
}


/* Contenedor de las reseñas detalladas en el modal */
#reviews-by-platform-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}

.platform-review {
    display: flex;
    align-items: center;
    gap: 15px;
    border-bottom: 1px solid var(--header-border-color);
    padding-bottom: 15px;
}
.platform-review:last-child {
    border-bottom: none;
}

.platform-review .platform-name {
    font-weight: bold;
    min-width: 100px;
}

.platform-review .stars {
    display: inline-block; /* Para que no se rompa la línea */
}

/* --- Estilos para las Opciones de Compra (Meta Info) --- */

.product-meta-info {
    margin: 25px 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.meta-section {
    border-top: 1px solid var(--header-border-color);
    padding-top: 20px;
}

.shipping-text {
    font-weight: bold;
    color: #28a745; /* Verde para el envío */
    margin: 0;
}
.shipping-text i {
    margin-right: 8px;
}
.shipping-link {
    color: var(--accent-color);
    text-decoration: none;
    font-size: 0.9rem;
}

.color-options h4 {
    margin: 0 0 10px 0;
}
.color-swatches {
    display: flex;
    gap: 10px;
}
.color-swatch {
    background-color: transparent;
    border: 1px solid var(--header-border-color);
    color: var(--primary-text-color);
    padding: 8px 15px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.color-swatch.active, .color-swatch:hover {
    border-color: var(--accent-color);
    background-color: var(--accent-color);
    color: white;
}

.quantity-selector {
    display: flex;
    align-items: center;
    gap: 10px;
}
.quantity-selector label {
    font-weight: bold;
}
.quantity-selector input[type="number"] {
    width: 60px;
    padding: 8px;
    text-align: center;
    background-color: var(--bg-color);
    border: 1px solid var(--header-border-color);
    color: var(--primary-text-color);
    border-radius: 8px;
}
.stock-info {
    font-size: 0.9rem;
    color: #a0a0a0;
}

/* --- Estilos para la Galería con Video --- */

/* Estilo para que el video se ajuste bien en el contenedor principal */
#main-media-display video {
    width: 100%;
    height: auto;
    border-radius: 15px;
    border: 1px solid var(--header-border-color);
}

/* Contenedor de la miniatura del video */
.video-thumbnail {
    position: relative;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 8px; /* Coincide con el borde de las imágenes */
    overflow: hidden; /* Oculta partes del ícono que se salgan */
}

/* El ícono de "Play" superpuesto */
.video-thumbnail::after {
    content: '\f04b'; /* Código del ícono de Play en Font Awesome */
    font-family: 'Font Awesome 6 Free'; /* Asegúrate de usar la familia de fuentes correcta */
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    color: white;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
    opacity: 0.8;
    transition: all 0.3s ease;
}

/* Efecto al pasar el mouse y cuando está activo */
.video-thumbnail:hover, .video-thumbnail.active {
    border-color: var(--accent-color);
}

.video-thumbnail:hover::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
}

/* Pequeña capa oscura para que el ícono resalte más */
.video-thumbnail::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
}

/* --- Estilos para el Formulario de Perfil --- */

#profile-form {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.form-group label {
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--secondary-text-color);
}

.form-group input {
    background-color: var(--input-bg-color);
    border: 1px solid var(--input-border-color);
    color: var(--primary-text-color);
    padding: 12px;
    border-radius: 8px;
    font-size: 1rem;
}

#login-form .btn,
#register-form .btn {
    margin-top: 10px;
    background-color: var(--accent-color);
    color: white;
    width: 100%; /* Asegura que ocupe todo el ancho */
    padding: 12px;
    font-size: 1rem;
    font-weight: 600;
}

#delete-profile-data {
    text-align: center;
    font-size: 0.8rem;
    color: var(--secondary-text-color);
    text-decoration: underline;
    margin-top: 10px;
}

/* --- Estilos para el Desplegable de Búsqueda --- */

.search-container {
    position: relative; /* Esencial para posicionar el desplegable */
}

.search-results-dropdown {
    position: absolute;
    top: calc(100% + 5px); /* Se posiciona 5px debajo del buscador */
    left: 0;
    width: 100%;
    background-color: #ffffff; /* Un gris oscuro sólido, como el de la barra de búsqueda */
    border: 1px solid var(--header-border-color);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    z-index: 9999; /* Se asegura de que esté por encima de todo */
    max-height: 400px;
    overflow-y: auto;
    
    /* Oculto por defecto */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease-in-out;
}

.search-results-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.search-result-item {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    text-decoration: none;
    color: var(--primary-text-color);
    border-bottom: 1px solid var(--header-border-color);
    transition: background-color 0.2s ease;
}
.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover {
    background-color: var(--accent-color);
    color: white;
}

.search-result-item img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 12px;
}

.search-result-item .info .name {
    font-weight: 600;
    font-size: 0.9rem;
}

.search-result-item .info .price {
    font-size: 0.8rem;
    color: var(--secondary-text-color);
}

.search-result-item:hover .info .price {
    color: rgba(255, 255, 255, 0.8);
}

/* --- Estilos para las Estrellas en el Modal de Detalles --- */

#modal-stars-container {
    margin: 15px 0; /* Espacio para separar del título y la descripción */
    font-size: 1.2rem; /* Tamaño de las estrellas */
    color: #ffc107; /* Color amarillo para las estrellas */
    display: flex;
    align-items: center;
}

.modal-rating-text {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--primary-text-color); /* Usa el color de texto principal de tu tema */
    margin-left: 8px; /* Espacio entre las estrellas y el número */
}

/* --- Estilos para Galería de Detalles en Cuadrícula (Grid) --- */

.detail-gallery {
    margin-top: 50px;
    border-top: 1px solid var(--header-border-color);
    padding-top: 30px;

    /* --- INICIO DE LA CORRECCIÓN --- */
    display: grid; /* 1. Convertimos el contenedor en una cuadrícula */
    grid-template-columns: repeat(2, 1fr); /* 2. Creamos 3 columnas de igual tamaño */
    gap: 20px; /* 3. Añadimos un espacio de 20px entre cada imagen */
    align-items: center; /* 4. Opcional: Centra las imágenes si tienen alturas diferentes */
}

/* Hacemos que el título ocupe las 3 columnas */
.detail-gallery h3 {
    font-size: 1.5rem;
    color: var(--accent-color);
    margin-bottom: 5px; /* Reducimos el margen ya que 'gap' añade espacio */
    grid-column: 1 / -1; /* El título se expande desde la columna 1 hasta la última */
}

/* La imagen ahora ocupará el 100% del ancho de SU columna */
.detail-gallery img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    /* 'margin-bottom' ya no es necesario gracias a la propiedad 'gap' */
}

/* Hacemos que la galería se vea en una sola columna en pantallas de móvil */
@media (max-width: 768px) {
    .detail-gallery {
        grid-template-columns: 1fr; /* Cambia a una sola columna */
    }
}

/* --- Estilos para la Galería Desplegable --- */

/* Estilo para el botón */
.detail-toggle-btn {
    width: 100%;
    margin-top: 30px;
    background-color: var(--input-bg-color);
    color: var(--primary-text-color);
    border: 1px solid var(--header-border-color);
}
.detail-toggle-btn i {
    margin-left: 10px;
    transition: transform 0.4s ease;
}
/* Gira la flecha cuando el botón está activo */
.detail-toggle-btn.active i {
    transform: rotate(180deg);
}

/* Contenedor de la galería (modificado para ser desplegable) */
.detail-gallery {
    /* Estado inicial: Colapsado */
    max-height: 0;
    overflow: hidden;
    padding-top: 0; /* Quitamos el padding superior inicial */
    margin-top: 0;  /* Quitamos el margen superior inicial */
    border-top: none; /* Quitamos el borde superior inicial */
    
    /* Animación suave */
    transition: all 0.5s ease-in-out;
}

/* Estado desplegado: se activa con JavaScript */
.detail-gallery.open {
    max-height: 2000px; /* Un valor alto para que quepa todo el contenido */
    
    /* Devolvemos los estilos de separación */
    margin-top: 20px;
    padding-top: 30px;
    border-top: 1px solid var(--header-border-color);
}

/* --- Estilos para Previsualización de Galería --- */

.toggle-gallery-wrapper {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-top: 30px;
    border: 1px solid var(--header-border-color);
    border-radius: 8px;
    background-color: var(--input-bg-color);
    padding: 5px;
    padding-left: 15px;
    transition: all 0.3s ease;
}
.toggle-gallery-wrapper:hover {
    border-color: var(--accent-color);
}

/* Contenedor de las miniaturas */
.gallery-previews {
    display: flex;
    align-items: center;
}

/* Estilo de cada miniatura */
.gallery-previews img {
    width: 45px;
    height: 45px;
    object-fit: cover;
    border-radius: 6px;
    border: 2px solid var(--bg-color);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: all 0.4s ease;
}

/* El efecto de apilamiento */
.gallery-previews img:not(:first-child) {
    margin-left: -25px; /* Superpone cada imagen sobre la anterior */
}

/* Animación al pasar el mouse sobre el contenedor */
.toggle-gallery-wrapper:hover .gallery-previews img {
    margin-left: -10px;
}
.toggle-gallery-wrapper:hover .gallery-previews img:nth-child(2) {
    transform: rotate(-8deg);
}
.toggle-gallery-wrapper:hover .gallery-previews img:nth-child(3) {
    transform: rotate(8deg);
}


/* Hacemos que el botón ocupe el espacio restante */
.toggle-gallery-wrapper .detail-toggle-btn {
    flex-grow: 1;
    margin-top: 0;
    border: none; /* Le quitamos el borde ya que el contenedor padre lo tiene */
}

/* --- Estilos para la Ventana Flotante de Oferta --- */

.promo-popup {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 350px;
    background-color: var(--secondary-bg-color, #25282c);
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--header-border-color);
    z-index: 1010; /* Por encima de otros elementos flotantes */
    
    /* Estado inicial: oculto y fuera de la pantalla */
    opacity: 0;
    transform: translateY(20px);
    visibility: hidden;
    transition: all 0.5s ease-in-out;
}

/* Estado visible: se activa con JavaScript */
.promo-popup.visible {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

.close-promo-btn {
    position: absolute;
    top: 5px;
    right: 10px;
    background: none;
    border: none;
    font-size: 1.8rem;
    color: var(--secondary-text-color);
    cursor: pointer;
    padding: 5px;
    line-height: 1;
    transition: color 0.3s ease;
}
.close-promo-btn:hover {
    color: var(--primary-text-color);
}

.promo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    padding: 20px;
}

.promo-link img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin-right: 15px;
}

.promo-info small {
    font-size: 0.8rem;
    color: var(--accent-color);
    font-weight: 600;
}

.promo-info .promo-name {
    color: var(--primary-text-color);
    font-weight: 600;
    margin: 5px 0;
}

.promo-info .promo-price {
    color: var(--secondary-text-color);
    font-size: 1.2rem;
    font-weight: bold;
}

/* --- AJUSTE DE TAMAÑO DEL CARRUSEL PARA MÓVILES --- */

@media (max-width: 768px) {
    .carousel-track .product-link {
        width: 80%; /* Cada tarjeta ocupará el 80% del ancho de la pantalla */
    }
}


/* 2. Posiciona las flechas con el valor exacto que encontraste. */
.carousel-container::before,
.carousel-container::after {
    position: absolute;
    z-index: 20;
    opacity: 0;
    
    /* Pega aquí el valor que encontraste. Yo usaré 135px como ejemplo. */
    top: 135px; /* <--- USA TU NÚMERO AQUÍ */
    transform: translateY(-50%);

    /* Estilos visuales (estos no cambian) */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 1.8rem;
    color: white;
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 15px;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
}

/* 3. Mantenemos la lógica de visibilidad que ya funcionaba. */
.carousel-container:hover::before,
.carousel-container:hover::after {
    opacity: 1;
}
@media (max-width: 1024px) {
    .products-section:not(.view-all-active) .carousel-container::before,
    .products-section:not(.view-all-active) .carousel-container::after {
        opacity: 1;
    }
}
.products-section.view-all-active .carousel-container::before,
.products-section.view-all-active .carousel-container::after {
    opacity: 0;
    pointer-events: none;
}
/* 2. Hacemos las flechas visibles en pantallas táctiles (móviles y tablets) */
@media (max-width: 1024px) {
    .carousel-container::before,
    .carousel-container::after {
        /* Forzamos la opacidad a 1 para que siempre sean visibles */
        opacity: 1;
    }
}

/* ===================================================================
   CÓDIGO DEFINITIVO PARA NAVEGACIÓN RESPONSIVE (MOBILE-FIRST)
   =================================================================== */

/* --- 1. ESTILOS BASE (PARA MÓVIL) --- */

/* El <nav> es el ancla y alinea el botón a la derecha */
.header-bottom .header-nav {
    position: relative;
    display: flex;
    justify-content: flex-end;
    padding: 5px 0; /* Un poco de espacio vertical */
}

/* Estilos del botón hamburguesa (visible en móvil) */
.nav-toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 24px;
    height: 24px;
    padding: 0;
}
.nav-toggle-btn span {
    width: 100%;
    height: 2px;
    background-color: #ffffff;
    border-radius: 2px;
    transition: all 0.3s ease-in-out;
}

/* El menú desplegable (oculto por defecto) */
.nav-dropdown {
    display: none; /* Oculto por defecto */
    position: absolute;
    top: calc(100% + 10px);
    right: 0; /* Se alinea a la derecha del <nav> */
    background-color: var(--accent-color);
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    z-index: 1100;
}
.nav-dropdown .nav-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
}

/* Cuando se hace clic, el JS añade la clase 'nav-open' y esto muestra el menú */
.header-nav.nav-open .nav-dropdown {
    display: block;
}

/* Animación del botón a una "X" */
.header-nav.nav-open .nav-toggle-btn span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.header-nav.nav-open .nav-toggle-btn span:nth-child(2) { opacity: 0; }
.header-nav.nav-open .nav-toggle-btn span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }


/* --- 2. ESTILOS PARA ESCRITORIO (PANTALLAS DE 769PX O MÁS) --- */

@media (min-width: 769px) {

    /* Alineamos la navegación a la izquierda en escritorio */
    .header-bottom .header-nav {
        justify-content: flex-start;
    }

    /* Ocultamos el botón hamburguesa */
    .nav-toggle-btn {
        display: none;
    }

    /* Mostramos el menú y le quitamos los estilos de "desplegable" */
    .nav-dropdown {
        display: block;
        position: static;
        background: none;
        box-shadow: none;
        padding: 0;
    }

    /* Ponemos los enlaces en horizontal */
    .nav-dropdown .nav-links {
        flex-direction: row;
        gap: 20px;
    }
}
/* =======================================================
ESTILO PARA LOS ENLACES DEL MENÚ DE NAVEGACIÓN
   ======================================================= */

.nav-dropdown .nav-links a {
    color: #ffffff; /* <-- Devuelve el color blanco */
    text-decoration: none; /* <-- Quita el subrayado */
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

/* Opcional: añadimos un efecto al pasar el ratón por encima */
.nav-dropdown .nav-links a:hover {
    color:  #2f3133;
}

/* =======================================================
   SOLUCIÓN FINAL DE OVERFLOW CON @MEDIA QUERY
   ======================================================= */

/* 1. Por defecto (para escritorio), PERMITIMOS el desbordamiento */
.carousel-container {
    overflow: visible;

    /* Mantenemos los estilos de apilamiento que ya habían funcionado */
    position: relative;
    z-index: 2;
}

/* 2. EN MÓVIL (pantallas de 1024px o menos), OCULTAMOS el desbordamiento */
@media (max-width: 1024px) {
    .carousel-container {
        overflow: hidden;
    }
}

#product-specs-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 32px;
  align-items: start;
}
@media (max-width: 800px) {
  #product-specs-container {
    grid-template-columns: 1fr;
  }
}
.spec-item {
  margin-bottom: 10px;
}

/* --- Estilos del Selector de Moneda (Diseño Moderno y Elegante) --- */

.currency-switcher-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 0 10px;
  height: 38px;
  position: relative; /* Para la flecha personalizada */
}

.currency-selector {
  /* 1. Apariencia (Quitar estilo nativo) */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* 2. Colores (Elegante sobre fondo azul) */
  background-color: rgba(255, 255, 255, 0.1); /* Fondo blanco traslúcido */
  color: #FFFFFF; /* Texto blanco, como los iconos */
  border: 1px solid rgba(255, 255, 255, 0.5); /* Borde blanco sutil */
  
  /* 3. Tipografía y Espaciado */
  font-family: 'Poppins', sans-serif;
  font-weight: 500; /* Un poco más ligero */
  font-size: 0.9rem;
  padding: 6px 30px 6px 12px; /* Más espacio a la derecha para la flecha */
  border-radius: 20px; /* Más redondeado = más moderno */
  
  /* 4. Flecha Personalizada (SVG blanco) */
  background-image: url('data:image/svg+xml;utf8,<svg fill="none" stroke="white" stroke-width="2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><polyline points="3 5 6 8 9 5"/></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 12px; /* Flecha más pequeña y sutil */

  /* 5. Comportamiento */
  cursor: pointer;
  outline: none;
  transition: all 0.3s ease;
}

/* 6. Efecto Hover y Focus */
.currency-selector:hover {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.8);
}

.currency-selector:focus {
  /* Un "glow" blanco */
  border-color: #FFFFFF;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}

/* 7. Estilo de las Opciones (el desplegable) */
.currency-selector option {
  background: #FFFFFF; /* Fondo blanco */
  color: #212529; /* Texto oscuro para legibilidad */
  font-weight: 500;
}

/* =======================================================
   ESTILOS PARA LA PÁGINA DE CUADRÍCULA DE PRODUCTOS
   ======================================================= */

/* Contenedor principal de la página */
.main-content-grid {
    max-width: 1200px; /* Ancho máximo para la página */
    margin: 2rem auto;  /* Centra el contenedor y le da espacio arriba/abajo */
    padding: 0 1rem;    /* Espacio a los lados en móviles */
}

/* El contenedor de la cuadrícula */
/* (MODIFICAR ESTA REGLA) */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 25px;
    justify-content: center;
    /* Ajustamos el padding: 40px arriba/abajo, 20px a los lados */
    padding: 40px 20px; 
}

/* Ajustes menores para asegurar que las tarjetas se vean bien en la cuadrícula */
.product-grid-container .product-card {
    width: 100%; /* La tarjeta ocupa todo el espacio de su celda en la cuadrícula */
    margin: 0;   /* Quitamos cualquier margen que pudiera tener */
}

.product-grid-container .product-link {
    text-decoration: none; /* Asegura que no haya subrayado */
    color: inherit;
    display: block;
}

/* =======================================================
   FIX 8: MENÚ DESPLEGABLE SUAVE DEBAJO DEL HEADER
   ======================================================= */

/* Se aplica solo a pantallas con un ancho máximo de 768px */
@media (max-width: 768px) {

    /* --- FILA 1: Logo y Acciones --- */
    .header-top {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        row-gap: 10px; 
    }
    .header-logo { order: 1; }
    .header-actions { order: 2; }

    /* --- FILA 2: Buscador y Botón de Menú --- */
    .header-search {
        order: 3;
        flex-grow: 1;
        margin-right: 15px;
    }
    .header-bottom {
        order: 4;
        background-color: transparent;
        padding: 0;
        height: auto;
    }

    /* ¡LA CLAVE! El <nav> será el punto de anclaje del menú */
    .header-nav {
        padding: 0;
        position: relative; /* Necesario para posicionar el menú desplegable */
    }

    /* --- EL MENÚ DESPLEGABLE (EL CUADRO) --- */
    .nav-dropdown {
        /* Posicionamiento */
        position: absolute;
        top: calc(100% + 10px); /* Lo coloca 10px por debajo del botón de menú */
        right: 0; /* Lo alinea con el lado derecho del header */
        z-index: 1000;

        /* Tamaño y Estilo */
        width: 250px; /* Ancho fijo para el menú */
        background-color: #4d96ff;
        border-radius: 8px; /* Bordes redondeados */
        box-shadow: 0 5px 25px rgba(0,0,0,0.15); /* Sombra más pronunciada */
        border: 1px solid #e9ecef;

        /* ¡LA ANIMACIÓN! */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px) scale(0.98); /* Comienza ligeramente encogido y arriba */
        transform-origin: top right; /* La animación se origina desde la esquina superior derecha */
        transition: opacity 0.25s ease-out, transform 0.25s ease-out, visibility 0.25s;
    }

    /* --- ESTADO ABIERTO DEL MENÚ --- */
    /* Cuando se hace clic, el menú aparece y se expande a su tamaño normal */
    .header-nav.nav-open .nav-dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
    }

    /* --- ESTILO DE LOS ENLACES --- */
    .nav-dropdown .nav-links {
        list-style: none;
        padding: 10px; /* Padding interno para que los enlaces no toquen los bordes */
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 5px; /* Espacio pequeño entre enlaces */
    }
    .nav-dropdown .nav-links a {
        text-decoration: none;
        color: #ffffff;
        font-weight: 500;
        padding: 12px 15px;
        border-radius: 6px; /* Bordes redondeados para cada enlace */
        transition: background-color 0.2s ease, color 0.2s ease;
    }
    .nav-dropdown .nav-links a:hover {
        background-color: #f1f3f5;
        color: #007bff;
    }

    /* =======================================================
       INICIO: Corrección del Header para Móvil
       ======================================================= */

    /* 1. Reduce el espacio entre los iconos de acción */
    .header-actions .nav-actions {
        gap: 15px; /* Reduce el espacio (antes era 25px) */
    }

    /* 2. Reduce el tamaño de los iconos del carrito y perfil */
    .header-actions .nav-actions a {
        font-size: 1.2rem; /* Reduce el tamaño (antes era 1.4rem) */
    }
    
    /* 3. Reduce el tamaño del selector de moneda */
    .currency-selector {
        font-size: 0.85rem; /* Reduce el texto */
        padding: 4px 24px 4px 10px; /* Reduce el espaciado interno */
        min-width: 60px; /* Lo hace más compacto */
        background-size: 12px 12px; /* Ajusta la flecha */
        background-position: right 8px center; /* Ajusta la flecha */
    }

    /* 4. Asegura que el buscador ocupe toda la fila de abajo */
    .header-search {
        margin-right: 0; /* Quita el margen que dejaba espacio */
        width: 100%; /* Ocupa el 100% de su fila */
    }
    
    /* =======================================================
       FIN: Corrección del Header para Móvil
       ======================================================= */
}

/* =======================================================
   ESTILOS DEL PIE DE PÁGINA (FOOTER)
   ======================================================= */

.main-footer {
    background-color: #1a1a1a; 
    color: #f8f9fa; 
    padding: 40px 0 20px 0; /* Asegura que el padding horizontal sea 0 si quieres que toque los bordes */
    margin-top: 100px; 
    
    border-top: 5px solid var(--accent-color, #007bff); 
    /* max-width: 1200px;  <-- ¡ELIMINA O COMENTA ESTA LÍNEA! */
}

.footer-container {
    max-width: 1300px; /* Mantén el ancho máximo para el contenido, pero centra */
    margin: 0 auto; /* Esto lo centrará dentro del footer de ancho completo */
    padding: 0 20px; /* Añade un padding horizontal interno para que el contenido no pegue a los bordes */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: 30px;
    margin-bottom: 30px;
}

.footer-column h4 {
    font-size: 1.2em;
    color: var(--accent-color); /* Títulos en color de acento */
    margin-bottom: 15px;
    font-weight: 600;
}

/* --- Estilos de Contacto e Logo --- */

.footer-logo img {
    max-width: 180px;
    margin-bottom: 15px;
}

.footer-text {
    font-size: 0.95em;
    margin-bottom: 15px;
    line-height: 1.4;
}

.contact-info {
    font-size: 0.9em;
    margin-bottom: 8px;
}

.contact-info i {
    color: var(--accent-color);
    margin-right: 10px;
    width: 15px; /* Para alinear el texto */
    text-align: center;
}

/* --- Estilos de Enlaces --- */

.footer-links {
    list-style: none;
    padding: 0;
}

.footer-links li {
    margin-bottom: 8px;
}

.footer-links a {
    color: #ced4da; /* Gris claro */
    text-decoration: none;
    font-size: 0.95em;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: var(--accent-color); /* Efecto hover en color de acento */
    text-decoration: underline;
}

/* --- Estilos de Redes Sociales y Newsletter --- */

.social-icons a {
    color: #f8f9fa;
    font-size: 1.5em;
    margin-right: 15px;
    transition: color 0.3s;
}

.social-icons a:hover {
    color: var(--accent-color);
}

.newsletter-form {
    display: flex;
    margin-top: 15px;
}

.newsletter-form input {
    padding: 10px;
    border: none;
    border-radius: 4px 0 0 4px;
    font-size: 0.9em;
    flex-grow: 1;
}

.btn-subscribe {
    background-color: var(--accent-color);
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 500;
    transition: background-color 0.3s;
}

.btn-subscribe:hover {
    background-color: #0056b3; /* Un tono más oscuro de azul */
}

/* --- Estilos de la Sección Inferior --- */

.footer-bottom {
    max-width: 1100px; /* Igual que el contenedor, para centrar el contenido */
    margin: 0 auto; /* Centrará esta sección también */
    padding: 10px 20px; /* Padding interno */
    border-top: 1px solid #495057; 
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85em;
    color: #adb5bd;
}

.payment-methods i {
    font-size: 1.8em;
    margin-left: 10px;
    color: #adb5bd;
}


/* --- Responsividad del Footer --- */
@media (max-width: 768px) {
    .footer-container {
        /* En pantallas medianas, cambia a 2 columnas */
        grid-template-columns: repeat(auto-fit, minmax(45%, 1fr)); 
    }
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
    .footer-bottom p {
        margin-bottom: 10px;
    }
}

@media (max-width: 480px) {
    .footer-container {
        /* En móviles, apila todas las columnas */
        grid-template-columns: 1fr; 
        text-align: center;
    }
    .footer-contact, .footer-social {
        /* Centrar elementos en la vista móvil */
        align-items: center;
        display: flex;
        flex-direction: column;
    }
    .footer-links {
        padding-left: 0;
    }
}

/* --- Estilos para la Barra de Progreso de la Oferta --- */

/* Ajustamos el contenedor principal para que los bordes redondeados corten la barra */
.promo-popup {
    /* ...tus estilos existentes... */
    overflow: hidden; /* <-- AÑADE ESTO */
}

/* 1. El contenedor de la barra (el fondo gris) */
.promo-timer-bar-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5px; /* Altura de la barra */
    background-color: var(--input-bg-color, #f0f0f0); 
}

/* 2. La barra de progreso (el color de acento) */
.promo-timer-bar-progress {
    height: 100%;
    background-color: var(--accent-color, #4D96FF);
    width: 100%; /* Inicia al 100% */
}

/* 3. La animación que "consume" la barra */
@keyframes depleteTimer {
    from {
        width: 100%;
    }
    to {
        width: 0%;
    }
}

/* 4. La clase que usaremos en JS para (re)iniciar la animación */
.promo-timer-bar-progress.animate {
    /* Elige la duración. 8s = 8 segundos */
    animation: depleteTimer 8s linear forwards;
}

/* --- Estilos para el nuevo modal de Autenticación --- */

/* Para los mensajes de error (ej. "Email ya existe") */
.auth-error {
    color: #dc3545; /* Rojo */
    background-color: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.4);
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 15px;
    font-size: 0.9rem;
    display: none; /* Oculto por defecto */
}

/* Para el enlace "Regístrate aquí" / "Inicia sesión" */
.auth-toggle-link {
    text-align: center;
    font-size: 0.9rem;
    color: var(--accent-color);
    text-decoration: underline;
    margin-top: 15px;
    display: block;
    cursor: pointer;
}

/* =======================================================
   ESTILOS DEL MENÚ DESPLEGABLE DE PERFIL
   ======================================================= */
.profile-dropdown {
    position: absolute;
    top: 70px; /* Ajusta esto a la altura de tu header */
    right: 5%; /* Alineado con los iconos */
    width: 240px;
    background-color: var(--secondary-bg-color, #FFF);
    border: 1px solid var(--header-border-color, #EEE);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    z-index: 2000;
    font-size: 0.95rem;
    
    /* Oculto por defecto */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease-out;
}

.profile-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.profile-dropdown-header {
    padding: 15px 20px;
    border-bottom: 1px solid var(--header-border-color, #EEE);
}
.profile-dropdown-links {
    list-style: none;
    padding: 10px 0;
}
.profile-dropdown-links li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    text-decoration: none;
    color: var(--primary-text-color);
    transition: background-color 0.2s ease;
}
.profile-dropdown-links li a:hover {
    background-color: rgba(0,0,0,0.05);
}
.profile-dropdown-links li a i {
    width: 18px;
    color: var(--secondary-text-color);
}
.profile-dropdown-links li a#btn-logout {
    color: #dc3545; /* Rojo para cerrar sesión */
}
.profile-dropdown-divider {
    height: 1px;
    background-color: var(--header-border-color, #EEE);
    margin: 8px 0;
}

/* =======================================================
   ESTILOS DEL MODAL GRANDE DE PERFIL
   ======================================================= */
.profile-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    z-index: 3000;
    display: none;
}
.profile-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 900px;
    height: 70vh;
    min-height: 500px;
    background-color: var(--bg-color, #F8F9FA);
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    display: flex;
    z-index: 3001;
    overflow: hidden;
    display: none;
}
.profile-modal-overlay.open,
.profile-modal.open {
    display: block;
}
@media (min-width: 768px) {
    .profile-modal.open {
        display: flex;
    }
}

/* Sidebar de navegación */
.profile-modal-sidebar {
    width: 220px;
    background-color: var(--secondary-bg-color, #FFF);
    border-right: 1px solid var(--header-border-color, #EEE);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
}
.profile-tab-btn {
    background-color: transparent;
    border: none;
    padding: 15px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--secondary-text-color);
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s ease;
}
.profile-tab-btn:hover {
    background-color: rgba(0,0,0,0.05);
}
.profile-tab-btn.active {
    background-color: var(--accent-color);
    color: white;
}
.profile-tab-btn i {
    width: 20px;
}
.profile-modal-close-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--secondary-text-color);
    cursor: pointer;
}

/* Contenido de las Vistas */
.profile-modal-content {
    flex-grow: 1;
    padding: 40px;
    overflow-y: auto;
}
.profile-view {
    display: none; /* Oculto por defecto */
}
.profile-view.active {
    display: block; /* Visible */
}
.profile-view h2 {
    margin-top: 0;
    color: var(--primary-text-color);
}
.profile-view p {
    color: var(--secondary-text-color);
    margin-bottom: 30px;
}

/* Estilos para el formulario (reutiliza los de login) */
.profile-modal .form-group {
    margin-bottom: 20px;
}
.profile-modal .auth-error,
.profile-modal .auth-success {
    display: none; /* Ocultos por defecto */
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 15px;
}
.profile-modal .auth-success {
    color: #155724;
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
}
.profile-modal input[disabled] {
    background-color: #e9ecef;
    cursor: not-allowed;
}

/* Estilos para la lista de pedidos */
#orders-list-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.order-item {
    border: 1px solid var(--header-border-color);
    border-radius: 8px;
    padding: 15px;
}
.order-item-header {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 10px;
}
.order-item-header .order-status-pending {
    color: #ffc107;
}
.order-item-header .order-status-completed {
    color: #28a745;
}
.order-item-body {
    font-size: 0.9rem;
    color: var(--secondary-text-color);
}

/* =======================================================
ESTILOS PARA EL AVATAR DE PERFIL EN EL HEADER
======================================================= */
.profile-avatar-icon {
    width: 32px;       /* Ajusta el tamaño (ej. 32px o 36px) */
    height: 32px;      /* Debe ser igual al width */
    border-radius: 50%; /* ¡Esto lo hace redondo! */
    object-fit: cover; /* Asegura que la imagen (ej. goku) llene el círculo */
    border: 2px solid #ffffff; /* Un borde blanco opcional */
    cursor: pointer;
    transition: transform 0.2s ease;
    vertical-align: middle; /* Ayuda a alinearlo bien */
}

/* Efecto visual al pasar el mouse */
.profile-avatar-icon:hover {
    transform: scale(1.1);
}

/* =======================================================
   ESTILOS PARA EL RECIBO DE PAGO (CHECKOUT SUCCESS)
   ======================================================= */
.receipt-container {
    max-width: 700px; /* Hacemos el contenedor más angosto */
    margin: 20px auto; /* Centramos el recibo en la página */
    padding: 30px 40px;
    background-color: var(--secondary-bg-color, #FFF);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border: 1px solid var(--header-border-color, #EEE);
}

.receipt-header {
    text-align: center;
    border-bottom: 1px solid var(--header-border-color, #EEE);
    padding-bottom: 25px;
    margin-bottom: 25px;
}

.receipt-icon {
    font-size: 3.5rem;
    color: #28a745; /* Verde de éxito */
    margin-bottom: 15px;
    line-height: 1;
}

.receipt-header h2 {
    margin: 0;
    font-size: 1.8rem;
    color: var(--primary-text-color);
}

.receipt-message {
    font-size: 1rem;
    color: #28a745; /* Verde de éxito */
    font-weight: 500;
    margin-top: 10px;
    margin-bottom: 5px;
}

.receipt-header > p {
    font-size: 0.95rem;
    color: var(--secondary-text-color);
    margin: 0;
}

.receipt-status-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--bg-color, #F8F9FA);
    border-radius: 8px;
    border: 1px solid var(--header-border-color, #EEE);
    padding: 20px;
    margin: 25px 0;
}

.receipt-status-left, .receipt-status-right {
    display: flex;
    flex-direction: column;
}

.receipt-status-right {
    text-align: right;
}

.receipt-status-box strong {
    font-size: 0.9rem;
    color: var(--secondary-text-color);
    margin-bottom: 5px;
    font-weight: 500;
}

.receipt-status-box span {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-text-color);
}

.receipt-status-box .status-pending {
    color: #ffc107; /* Naranja/amarillo de "pendiente" */
    font-weight: 700;
}

.receipt-note {
    font-size: 0.9rem;
    color: var(--secondary-text-color);
    line-height: 1.6;
    text-align: center;
}

.receipt-summary {
    margin-top: 30px;
    border-top: 1px solid var(--header-border-color, #EEE);
    padding-top: 20px;
}

.receipt-summary h3 {
    font-size: 1.2rem;
    margin-bottom: 20px;
    color: var(--primary-text-color);
}

.receipt-item, .receipt-total {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 0.9rem;
    color: var(--primary-text-color);
}

.receipt-item span:last-child {
    font-weight: 500;
}

.receipt-total {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--accent-color);
    border-top: 2px dashed var(--header-border-color, #EEE);
    padding-top: 15px;
    margin-top: 15px;
}

#receipt-home-btn {
    width: 100%;
    text-align: center;
    margin-top: 30px;
    padding: 15px;
    font-size: 1rem;
    background-color: var(--accent-color);
    color: white;
}
#receipt-home-btn:hover {
    background-color: #3e7fd2; /* Un azul más oscuro */
}

/* =======================================================
   ESTILOS DEL NUEVO MODAL DE AUTENTICACIÓN
   ======================================================= */

/* --- Contenedor y Fondo --- */
.auth-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 2999;
    /* Oculto por defecto */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

.auth-modal-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    width: 90%;
    max-width: 420px;
    background-color: var(--secondary-bg-color, #FFF);
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    z-index: 3000;
    overflow: hidden;
    /* Oculto por defecto */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

/* --- Estados Abiertos (controlados por JS) --- */
/* (El JS usa la clase .open de tu script de modal anterior) */
#auth-modal.open {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}
#auth-modal-overlay.open {
    opacity: 1;
    visibility: visible;
}
/* Tu JS viejo también usa la clase .visible, por si acaso */
#auth-modal.visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}
#auth-modal-overlay.visible {
    opacity: 1;
    visibility: visible;
}


/* --- Botón de Cerrar --- */
.auth-close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 2rem;
    color: var(--secondary-text-color, #AAA);
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s ease;
}
.auth-close-btn:hover {
    color: var(--primary-text-color, #000);
}

/* --- Pestañas (Tabs) --- */
.auth-tabs {
    display: flex;
    background-color: var(--bg-color, #f8f9fa);
}
.auth-tab {
    flex: 1;
    padding: 18px 10px;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    color: var(--secondary-text-color, #6c757d);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}
.auth-tab:hover {
    color: var(--primary-text-color, #000);
}
.auth-tab.active {
    color: var(--accent-color, #4D96FF);
    border-bottom-color: var(--accent-color, #4D96FF);
}

/* --- Contenido (Formularios) --- */
.auth-content {
    padding: 30px;
}
.auth-form {
    display: none; /* JS controla cuál se muestra */
}
.auth-form.active {
    display: block;
}

/* --- Botones de Redes Sociales --- */
.social-login {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--input-border-color, #ced4da);
    background-color: var(--secondary-bg-color, #FFF);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--primary-text-color, #333);
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.social-login:hover {
    background-color: var(--bg-color, #f8f9fa);
}
.social-login i {
    font-size: 1.1rem;
    margin-right: 12px;
    color: #DB4437; /* Color de Google */
}

/* --- Divisor "o" --- */
.auth-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--secondary-text-color, #AAA);
    font-size: 0.9rem;
    margin: 20px 0;
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--header-border-color, #EEE);
}
.auth-divider span {
    padding: 0 15px;
}

/* --- Grupos de Formulario (con iconos) --- */
.input-group {
    position: relative;
    margin-bottom: 18px;
}
.input-group i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--secondary-text-color, #AAA);
}
.input-group input {
    width: 100%;
    padding: 12px 15px 12px 45px; /* Espacio para el icono */
    font-size: 1rem;
    border: 1px solid var(--input-border-color, #ced4da);
    border-radius: 8px;
    background-color: var(--input-bg-color, #f8f9fa);
    color: var(--primary-text-color);
}
.input-group input:focus {
    outline: none;
    border-color: var(--accent-color, #4D96FF);
    box-shadow: 0 0 0 2px rgba(77, 150, 255, 0.2);
}

/* --- Enlaces y Checkbox --- */
.forgot-password-link {
    display: block;
    text-align: right;
    font-size: 0.9rem;
    color: var(--accent-color, #4D96FF);
    text-decoration: none;
    margin: -10px 0 20px 0;
}
.terms-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
}
.terms-check input {
    margin-top: 3px;
    flex-shrink: 0;
}
.terms-check label {
    font-size: 0.85rem;
    color: var(--secondary-text-color, #6c757d);
    line-height: 1.4;
}
.terms-check a {
    color: var(--accent-color, #4D96FF);
    text-decoration: none;
}

/* --- Botón Principal --- */
.auth-submit-btn {
    width: 100%;
    padding: 14px;
    font-size: 1rem;
    font-weight: 600;
    color: #FFF;
    background-color: var(--accent-color, #4D96FF);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.auth-submit-btn:hover {
    background-color: #3e7fd2; /* Azul más oscuro */
}

/* --- Mensajes de Error (sin cambios, ya los tenías) --- */
.auth-error {
    color: #dc3545;
    background-color: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.4);
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 15px;
    font-size: 0.9rem;
    display: none; /* Oculto por defecto */
}

/* --- Estilos para el Mensaje de Contexto del Modal --- */

.auth-context-message {
    padding: 20px 30px 15px 30px;
    text-align: center;
    /* Un fondo sutil para destacarlo */
    background-color: var(--bg-color, #f8f9fa); 
    border-bottom: 1px solid var(--header-border-color, #EEE);
}

.auth-context-message h3 {
    margin: 0 0 5px 0;
    font-size: 1.2rem;
    color: var(--accent-color, #4D96FF); /* Color de acento */
}

.auth-context-message p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--secondary-text-color, #6c757d);
    line-height: 1.4;
}

/* Cuando el mensaje está visible, el modal es un poco más alto */
.auth-modal-container {
    transition: all 0.3s ease;
}

/* --- Estilos para el botón "Seguir Comprando" --- */

/* Un estilo de botón secundario (bordeado) */
.btn-secondary {
    background-color: transparent;
    color: var(--accent-color, #4D96FF);
    border: 2px solid var(--accent-color, #4D96FF);
    font-weight: 600;
}

/* Efecto al pasar el mouse */
.btn-secondary:hover {
    background-color: var(--accent-color, #4D96FF);
    color: white;
}

/* Estilos específicos para el botón en el checkout */
#keep-shopping-btn {
    width: 100%;
    text-align: center;
    text-decoration: none;
    padding: 12px;
    margin-bottom: 25px; /* Lo separa del título del resumen */
    display: inline-block; /* Para que el padding y margen funcionen */
}

/* --- Estilos para la Vista de Pedidos (Modal de Perfil) --- */

.order-status {
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 0.9em;
    text-transform: capitalize;
}

/* Estado: Pendiente de Verificación */
.order-status-pending {
    color: #856404;       /* Texto Naranja Oscuro */
    background-color: #fff3cd; /* Fondo Amarillo Claro */
}

/* Estado: Pago Verificado */
.order-status-verified {
    color: #155724;       /* Texto Verde Oscuro */
    background-color: #d4edda; /* Fondo Verde Claro */
}

/* Estado: Completado */
.order-status-completed {
    color: #0c5460;       /* Texto Azul Oscuro */
    background-color: #d1ecf1; /* Fondo Azul Claro */
}

/* Estado: Cancelado */
.order-status-cancelled {
    color: #721c24;       /* Texto Rojo Oscuro */
    background-color: #f8d7da; /* Fondo Rojo Claro */
}

/* Estilo para el botón de "Ver Producto Digital" */
.view-key-btn {
    width: 100%;
    margin-top: 10px;
    background-color: var(--accent-color); /* Tu color de acento azul */
    color: white;
    font-weight: 600;
}

.view-key-btn:hover {
    background-color: #3e7fd2; /* Un azul un poco más oscuro */
}

.view-key-btn i {
    margin-right: 8px;
}

/* =======================================================
   TAREA 11: ESTILOS DEL SISTEMA DE NOTIFICACIONES
   ======================================================= */

/* --- 1. Estilos del Icono de la Campana (Header) --- */
#notifications-icon {
    position: relative; /* Necesario para posicionar el contador */
    color: #ffffff; /* Asegura que sea blanco como los otros iconos */
}

/* 2. Estilo del Contador Rojo (Círculo) */
.notification-count {
    position: absolute;
    top: -5px;         /* Un poco arriba del icono */
    right: -8px;       /* Un poco a la derecha */
    background-color: #dc3545; /* Rojo de "alerta" */
    color: white;
    
    /* Círculo perfecto */
    width: 18px;
    height: 18px;
    border-radius: 50%; 
    
    /* Centrar el número */
    display: flex;
    justify-content: center;
    align-items: center;
    
    font-size: 0.75rem; /* Tamaño del número */
    font-weight: bold;
    line-height: 1;
    
    /* Borde para separarlo del fondo */
    border: 2px solid var(--accent-color); 
}

/* --- 3. Estilos del Panel Desplegable --- */
.notifications-dropdown {
    /* Posicionamiento (exactamente igual que .profile-dropdown) */
    position: absolute;
    top: 70px; /* Ajusta a la altura de tu header */
    right: 5%; /* Alineado con los iconos */
    z-index: 2000;

    /* Tamaño */
    width: 340px; /* Un poco más ancho que el de perfil */
    max-height: 450px;
    
    /* Estilos Visuales (copiados de .profile-dropdown) */
    background-color: var(--secondary-bg-color, #FFF);
    border: 1px solid var(--header-border-color, #EEE);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    font-size: 0.95rem;
    
    /* Oculto por defecto (animación) */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease-out;
}

/* Estado abierto (cuando se hace clic) */
.notifications-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* --- 4. Estilos del Contenido Interno del Panel --- */

.notifications-header {
    padding: 15px 20px;
    border-bottom: 1px solid var(--header-border-color, #EEE);
}
.notifications-header h4 {
    margin: 0;
}

/* Contenedor de la lista (con scroll) */
.notifications-list {
    max-height: 380px; /* Altura del panel (450) menos el header */
    overflow-y: auto;
}

/* Cada ítem de notificación */
.notification-item {
    display: block;
    padding: 15px 20px;
    text-decoration: none;
    color: var(--primary-text-color);
    border-bottom: 1px solid var(--header-border-color, #EEE);
    transition: background-color 0.2s ease;
}
.notification-item:last-child {
    border-bottom: none;
}
.notification-item:hover {
    background-color: rgba(0,0,0,0.05); /* Un gris muy claro */
}

/* Estilo para notificaciones YA LEÍDAS */
.notification-item.is-read {
    color: var(--secondary-text-color);
    /* Fondo más oscuro para que se vea "apagada" */
    background-color: var(--bg-color, #f8f9fa); 
}

.notification-item p {
    margin: 0 0 5px 0;
    line-height: 1.4;
    font-size: 0.9rem;
}

.notification-item small {
    font-size: 0.8rem;
    color: var(--secondary-text-color);
}

/* --- 5. Media Query para Teléfonos Móviles --- */
@media (max-width: 480px) {
    .notifications-dropdown {
        /* Hacemos que ocupe casi toda la pantalla */
        width: 90vw; 
        /* Lo centramos */
        right: 5vw; 
        /* Ajustamos por si el header es más pequeño en móvil */
        top: 65px; 
    }
}

/* --- Estilos para la sección "Mis Pedidos" --- */

/* 1. CONTENEDOR DE ACCIONES
    Esto crea un contenedor flex para alinear los botones 
    (ej. "Ver Producto" y "Cancelar") uno al lado del otro
    con un espacio entre ellos.
*/
.order-item-actions {
  display: flex;
  flex-wrap: wrap;     /* Permite que los botones pasen abajo en pantallas pequeñas */
  gap: 10px;           /* Un espacio de 10px entre cada botón */
  margin-top: 15px;    /* Un margen superior para separarlo de la lista de productos */
}

/* 2. BOTÓN PEQUEÑO
    Esta clase es para el botón de "Cancelar", para hacerlo un
    poco más discreto que el botón principal de "Ver Producto".
*/
.btn-small {
  padding: 6px 12px;
  font-size: 0.875rem; /* Un poco más pequeño que el texto normal */
  line-height: 1.5;
  border-radius: 4px; /* O el borde que estés usando en tus .btn */
}

/* 3. CLASES DE COLOR (Si no las tienes)
    El código JS que te pasé usa .btn-danger y .btn-secondary.
    Si no los tienes definidos, aquí están unos estilos básicos:
*/

/* Botón de peligro (para Cancelar) */
.btn-danger {
  background-color: #dc3545; /* Rojo */
  color: white;
  border: none;
}
.btn-danger:hover {
  background-color: #c82333; /* Rojo más oscuro al pasar el ratón */
}

/* Botón secundario (para "Ver de Nuevo") */
.btn-secondary {
  background-color: #6c757d; /* Gris */
  color: white;
  border: none;
}
.btn-secondary:hover {
  background-color: #5a6268; /* Gris más oscuro al pasar el ratón */
}

/* 4. CLASE PRIMARIA (Para "Ver Producto Digital")
    Asumiendo que .btn-primary es tu botón azul estándar.
*/
.btn-primary {
  background-color: #007bff; /* Azul (cámbialo por tu azul) */
  color: white;
  border: none;
}
.btn-primary:hover {
  background-color: #0069d9;
}

/* --- Estilos para el Modal de Reportar Pago --- */
.report-payment-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1001; 
    display: none;
}

.report-payment-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    z-index: 1002; 
    width: 90%;
    max-width: 500px;
    padding: 25px;
    display: none; 
}

.report-payment-close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 2rem;
    color: #888;
    cursor: pointer;
    line-height: 1;
}
.report-payment-close-btn:hover { color: #333; }

.report-payment-modal .form-group { margin-bottom: 15px; }
.report-payment-modal label { display: block; font-weight: 600; margin-bottom: 5px; }
.report-payment-modal input[type="text"],
.report-payment-modal input[type="file"],
.report-payment-modal select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}

/* Botón de "Reportar Pago" en la lista de pedidos */
.report-payment-btn {
    background-color: #ff9800; /* Naranja */
    color: white;
    border: none;
    font-weight: 600;
}
.report-payment-btn:hover { background-color: #e68900; }

/* Estilo para el estado 'esperando_pago' */
.order-status-esperando_pago {
    background-color: #ffe0b2; /* Naranja claro */
    color: #e65100; /* Naranja oscuro */
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 0.9em;
    font-weight: 600;
}

/* --- Estilos para el Modal de Formas de Envío --- */
/* (Puedes reusar los estilos de .report-payment-modal si son idénticos) */

.shipping-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1001; 
    display: none;
}

.shipping-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    z-index: 1002; 
    width: 90%;
    max-width: 600px; /* Un poco más ancho para las imágenes */
    padding: 25px;
    display: none; 
}

.shipping-modal-close-btn {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 2rem;
    color: #888;
    cursor: pointer;
    line-height: 1;
}
.shipping-modal-close-btn:hover { color: #333; }

.shipping-modal h2 {
    margin-top: 0;
    margin-bottom: 20px;
    text-align: center;
    color: #333;
}

.shipping-methods-list {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Espacio entre cada método */
    max-height: 60vh; /* Límite de altura para el scroll */
    overflow-y: auto; /* Scroll si hay muchos métodos */
    padding: 5px;
}

.shipping-method-item {
    display: flex;
    align-items: center;
    gap: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}
.shipping-method-item:last-child {
    border-bottom: none;
}

.shipping-method-item img {
    width: 200px;
    height: 140px;
    object-fit: cover; /* <-- CAMBIO: De 'contain' a 'cover' para que ocupe todo el espacio */
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 5px;
    flex-shrink: 0;
    /* --- NUEVO: Efecto de sombreado --- */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

.shipping-method-item h3 {
    margin: 0 0 5px 0;
    font-size: 1.1rem;
    color: #333;
}

.shipping-method-item p {
    margin: 0;
    font-size: 0.9rem;
    color: #666;
    line-height: 1.4;
}

.shipping-note {
    margin-top: 20px;
    font-size: 0.85rem;
    color: #777;
    text-align: center;
    background: #f9f9f9;
    padding: 10px;
    border-radius: 5px;
}

/* ============================================= */
/* --- ARREGLO HEADER MÓVIL (CAMPANA) --- */
/* ============================================= */

/* Usamos 768px como el punto de quiebre. 
   Si tu menú móvil se activa en otro tamaño, ajusta este valor. 
*/
@media (max-width: 768px) {

    /* 1. Hacemos que el header-top sea un contenedor flexible */
    .header-top {
        display: flex;
        flex-wrap: wrap; /* Permite que los elementos bajen de línea */
        align-items: center; /* Centra el logo y los iconos verticalmente */
        justify-content: space-between; /* Pone el logo a la izq. y los iconos a la der. */
        padding: 10px 15px; /* Añade un poco de relleno */
    }

    /* 2. El logo: se queda a la izquierda */
    .header-logo {
        flex-grow: 0; /* No crece */
        flex-shrink: 0; /* No se encoge */
        order: 1; /* Es el primer elemento */
    }

    /* 3. Los iconos: los mandamos a la derecha */
    .header-actions {
        order: 2; /* Es el segundo elemento */
    }

    /* 4. La barra de búsqueda: la mandamos abajo */
    .header-search {
        order: 3; /* Es el tercer elemento */
        flex-basis: 100%; /* Ocupa todo el ancho */
        margin-top: 10px; /* Espacio de la fila de arriba */
    }

    /* 5. EL CAMBIO MÁS IMPORTANTE:
       Ocultamos el selector de moneda en móviles 
       para hacer espacio a los iconos. */
    .currency-switcher-container {
        display: none;
    }
}

/* ============================================= */
/* --- LÓGICA COMPLETA DEL MODAL DE PERFIL (vFINAL) --- */
/* ============================================= */

/* 1. ESTADO POR DEFECTO (OCULTO) */
.profile-modal-overlay,
.profile-modal {
    display: none; /* <-- Oculto por defecto */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 2. ESTADO ABIERTO (VISIBLE) */
/* (Se activa cuando JS añade la clase ".open") */
.profile-modal-overlay.open {
    display: block;
    opacity: 1;
    visibility: visible;
}
.profile-modal.open {
    display: flex; /* <-- Usamos FLEX para mostrarlo */
    opacity: 1;
    visibility: visible;
}

/* 3. EL FONDO OSCURO (OVERLAY) */
.profile-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1001; 
}

/* 4. EL MODAL (VISTA DE ESCRITORIO - 769px y más) */
.profile-modal {
    flex-direction: row; /* Lado a lado */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 900px;
    height: 70vh;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    z-index: 1002;
    overflow: hidden; 
}

.profile-modal-sidebar {
    width: 250px;
    flex-shrink: 0;
    background: #f7f7f7;
    border-right: 1px solid #eee;
    padding: 15px;
    display: flex;
    flex-direction: column;
    position: relative; /* Para posicionar el botón X */
}

.profile-tab-btn {
    width: 100%;
    padding: 15px;
    font-size: 1rem;
    font-weight: 600;
    color: #555;
    background: none;
    border: none;
    border-radius: 8px;
    display: flex;
    align-items: center;
    cursor: pointer;
    text-align: left;
    margin-bottom: 5px;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.profile-tab-btn i {
    margin-right: 12px;
    width: 20px;
    text-align: center;
    color: #888;
}
.profile-tab-btn:hover {
    background-color: #eee;
}
.profile-tab-btn.active {
    background-color: #007bff;
    color: white;
}
.profile-tab-btn.active i {
    color: white;
}

/* Botón X (Versión Escritorio) */
.profile-modal-close {
    display: none; /* Oculto en escritorio */
}

.profile-modal-content {
    flex-grow: 1;
    overflow-y: auto;
    padding: 30px;
}
.profile-view { 
    display: none; 
}
.profile-view.active { 
    display: block; 
}


/* 5. VISTA DE MÓVIL (768px y menos) */
@media (max-width: 768px) {

    .profile-modal {
        width: 95vw;
        height: 85vh; 
        flex-direction: column; /* Apilado */
    }

    .profile-modal-sidebar {
        width: 100%;
        flex-direction: row; 
        justify-content: flex-start; /* Iconos a la izquierda */
        border-right: none; 
        border-bottom: 1px solid #eee; 
        flex-shrink: 0; 
        padding: 5px;
        padding-right: 50px; /* Espacio para el botón "X" */
    }

    .profile-tab-btn {
        font-size: 0;      /* Ocultar texto */
        padding: 12px 15px;
        flex-grow: 0; /* No estirar */
        text-align: center;
        margin: 0 5px; 
    }
    .profile-tab-btn:first-child {
        margin-left: 10px; 
    }
    .profile-tab-btn i {
        font-size: 1.3rem; 
        margin-right: 0;   
    }

    /* Botón X (Versión Móvil) */
    .profile-modal-close {
        display: block; /* Visible en móvil */
        position: absolute; 
        top: 5px;
        right: 15px;
        font-size: 2.2rem;
        width: auto;
        padding: 0;
        background: none;
        border: none;
        z-index: 1003; 
        color: #888;
    }

    .profile-modal-content {
        flex-grow: 1; 
        padding: 20px;
        overflow-y: auto; /* ¡Este es el scroll! */
        min-height: 0; 
        -webkit-overflow-scrolling: touch; 
    }
}

/* ============================================= */
/* --- REGLA PARA BLOQUEAR SCROLL DE FONDO --- */
/* ============================================= */

/* Esta clase se añadirá al <body> con JavaScript 
   cuando cualquier modal esté abierto. */
body.modal-open {
    overflow: hidden;
}

/* ============================================= */
/* --- ESTILOS PARA LA VISTA DE PRODUCTO DIGITAL --- */
/* ============================================= */

#digital-product-view {
    /* Por defecto está oculto */
    display: none; 
}

.digital-product-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

/* Estilo para el botón de "Volver" */
.digital-product-back-btn {
    background-color: #6c757d; /* Gris */
    color: white;
    font-size: 0.9rem;
    padding: 8px 12px;
}

#digital-product-view h3 {
    font-size: 1.5rem;
    color: #333;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.digital-key-message {
    font-size: 1rem;
    line-height: 1.5;
    color: #555;
}

.digital-key-container {
    background-color: #f9f9f9;
    border: 1px dashed #ccc;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
}

/* 'pre' preserva los saltos de línea y espacios de tu key */
#digital-key-display {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.1rem;
    color: #d63384; /* Un color rosado para destacar */
    white-space: pre-wrap;  /* Asegura que el texto largo se ajuste */
    word-break: break-all;
}

.digital-key-note {
    font-size: 0.9rem;
    color: #777;
    text-align: center;
    margin-top: 15px;
}