/* Definición de variables CSS para los colores */
:root {
    --main-bg-color: #f0f2f5; /* Fondo principal gris claro */
    --navbar-bg-color: #ffffff; /* Fondo del navbar blanco */
    --accent-color: #fa2964; /* Color de acento rojo/rosa */
    --accent-color-rgb: 250, 41, 100; /* RGB para la sombra del color de acento */
    --text-color: #212529; /* Texto oscuro para el fondo claro */
    --secondary-text-color: #6c757d; /* Texto gris para descripciones */
    --card-bg-color: #ffffff; /* Fondo de la tarjeta de contenido blanco */
    --border-color: #dee2e6; /* Borde gris suave */
    --font-family: 'Poppins', sans-serif;
}

body {
    font-family: var(--font-family);
    background-color: var(--main-bg-color);
    color: var(--text-color);
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column; /* Apila navbar, contenido y footer verticalmente */
    min-height: 100vh;
}

/* Contenedor principal para el contenido (excluyendo el navbar y el footer) */
.main-content-wrapper {
    display: flex;
    flex-grow: 1; /* Permite que ocupe todo el espacio disponible */
    justify-content: center;
    align-items: center;
    padding: 2rem; /* Padding para el contenido principal */
}

/* Estilos para el navbar horizontal */
.navbar-custom {
    background-color: rgba(255, 255, 255, 0.7); /* Translucidez para efecto glassmorphism */
    backdrop-filter: blur(10px); /* Efecto de cristal esmerilado */
    -webkit-backdrop-filter: blur(10px); /* Para compatibilidad con Safari */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15); /* Sombra más pronunciada */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Borde sutil */
    padding: 0.75rem 2rem; /* Aumentar padding para que se vea más espacioso */
    border-radius: 0; /* Eliminado border-radius para que se extienda a lo ancho */
    margin: 0; /* Eliminado margen para que ocupe todo el ancho */
    transition: all 0.4s ease-in-out; /* Transición suave para cambios de estado */
    position: sticky; /* Menú pegajoso en la parte superior */
    top: 0; /* Pegar al top */
    z-index: 1000; /* Asegurarse de que esté por encima de otros elementos */
}

.navbar-brand .logo {
    max-width: 90px; /* Ligeramente más grande para destacar */
    height: auto;
    margin-right: 2.5rem; /* Más espacio */
    transition: transform 0.3s ease-in-out;
}

.navbar-brand .logo:hover {
    transform: scale(1.1); /* Efecto de escala al pasar el ratón */
}

/* Estilos para los enlaces de navegación */
.navbar-nav .nav-item {
    margin-right: 1rem; /* Espacio entre los elementos del menú */
}

.navbar-nav .nav-link {
    color: var(--secondary-text-color);
    padding: 0.8rem 1.5rem; /* Más padding para los enlaces */
    border-radius: 10px; /* Bordes más redondeados */
    transition: all 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Transición para sombra y transform */
    font-size: 1.1rem;
    font-weight: 600;
    position: relative;
    overflow: hidden; /* Mantener overflow hidden para el border-radius */
    border: 2px solid transparent; /* Borde transparente por defecto */
    display: flex; /* Para alinear icono y texto */
    align-items: center;
    justify-content: center;
}

.navbar-nav .nav-link i {
    margin-right: 0.5rem; /* Espacio entre icono y texto */
}

/* Estilo general para nav-link en hover/active (Tienda, Contáctenos, Registrarse) */
.navbar-nav .nav-link:not([data-page="login"]):hover,
.navbar-nav .nav-link:not([data-page="login"]).active {
    color: var(--navbar-bg-color); /* Texto blanco al pasar el ratón/activo */
    background-color: var(--accent-color); /* Fondo con color de acento al pasar el ratón/activo */
    transform: translateY(-3px); /* Efecto de elevación */
    box-shadow: 0 6px 15px rgba(var(--accent-color-rgb), 0.4); /* Sombra con color de acento */
    border-color: var(--accent-color); /* Borde del color de acento */
}

/* Estilo específico para el botón "Entrar" en hover/active */
.navbar-nav .nav-link[data-page="login"]:hover,
.navbar-nav .nav-link[data-page="login"].active {
    background-color: var(--navbar-bg-color); /* Fondo blanco */
    color: var(--accent-color); /* Texto del color de acento */
    border: 2px solid var(--accent-color); /* Contorno del color de acento */
    transform: translateY(-3px); /* Efecto de elevación */
    box-shadow: 0 6px 15px rgba(var(--accent-color-rgb), 0.4); /* Sombra más fuerte */
}

/* Estilos específicos para el botón "Ver Carrito" */
.navbar-nav .btn-outline-primary {
    color: var(--accent-color);
    border-color: var(--accent-color);
    padding: 0.8rem 1.5rem; /* Mantener padding similar a nav-link */
    border-radius: 10px; /* Bordes redondeados */
    font-size: 1.1rem;
    font-weight: 600;
    transition: all 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Transición para sombra y transform */
    margin-left: 1.5rem; /* Más espacio a la izquierda del botón */
    display: flex; /* Para alinear icono y texto */
    align-items: center;
    justify-content: center;
}

.navbar-nav .btn-outline-primary i {
    margin-right: 0.5rem; /* Espacio entre icono y texto */
}

.navbar-nav .btn-outline-primary:hover {
    background-color: var(--accent-color);
    color: var(--navbar-bg-color); /* Texto blanco sobre el acento rojo */
    border-color: var(--accent-color); /* Mantener el color del borde */
    transform: translateY(-3px); /* Efecto de elevación */
    box-shadow: 0 6px 15px rgba(var(--accent-color-rgb), 0.4); /* Sombra con color de acento */
}

/* Estilos para la tarjeta de contenido principal */
.content-card {
    background-color: var(--card-bg-color);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 100%;
    max-width: 800px; /* Limita el ancho de la tarjeta de contenido */
}

/* Estilos para títulos */
h1, h2 {
    color: var(--accent-color);
    font-weight: 700;
}

/* Estilos para el pie de página */
.footer {
    text-align: center;
    padding: 1rem;
    color: var(--secondary-text-color);
    background-color: var(--navbar-bg-color); /* Fondo del footer igual al navbar */
    border-top: 1px solid var(--border-color); /* Línea divisoria superior del footer */
}

.footer p {
    font-size: 0.7rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0; /* Elimina el margen inferior predeterminado del párrafo */
}

/* Estilos para el formulario de login y registro (compartidos) */
.login-form-container,
.registration-form-container,
.password-reset-container { /* Añadido el nuevo contenedor para el restablecimiento de contraseña */
    background-color: var(--card-bg-color);
    padding: 2.5rem; /* Más padding para que se vea más espacioso */
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); /* Sombra más pronunciada */
    width: 100%;
    max-width: 800px; /* Aumentar ancho máximo para el formulario de registro al mismo que content-card */
    text-align: left; /* Alinea el texto del formulario a la izquierda */
    position: relative; /* Necesario para posicionar el botón de cerrar */
}

.login-form-container h2,
.registration-form-container h2,
.password-reset-container h2 { /* Añadido el nuevo contenedor para el restablecimiento de contraseña */
    text-align: center;
    margin-bottom: 2rem;
    color: var(--accent-color);
    font-weight: 700;
}

.login-form-container .form-label,
.registration-form-container .form-label,
.password-reset-container .form-label { /* Añadido el nuevo contenedor para el restablecimiento de contraseña */
    font-weight: 600;
    color: var(--text-color);
}

.login-form-container .form-control,
.registration-form-container .form-control,
.password-reset-container .form-control { /* Añadido el nuevo contenedor para el restablecimiento de contraseña */
    border-radius: 8px;
    border: 1px solid var(--border-color);
    padding: 0.75rem 1rem;
    margin-bottom: 1.2rem; /* Espacio entre campos, ligeramente reducido */
}

.registration-form-container .row .col-md-6 .mb-3 {
    margin-bottom: 1.2rem; /* Asegurar que el margen inferior se aplique dentro de la cuadrícula */
}

.login-form-container .btn-primary,
.registration-form-container .btn-primary,
.password-reset-container .btn-primary { /* Añadido el nuevo contenedor para el restablecimiento de contraseña */
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    width: 100%; /* Botón de ingresar ocupa todo el ancho */
    margin-bottom: 1rem; /* Espacio entre botones */
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; /* Añadido color a la transición */
}

.login-form-container .btn-primary:hover,
.registration-form-container .btn-primary:hover,
.password-reset-container .btn-primary:hover { /* Añadido el nuevo contenedor para el restablecimiento de contraseña */
    background-color: var(--navbar-bg-color); /* Fondo blanco */
    color: var(--accent-color); /* Texto del color de acento */
    border-color: var(--accent-color); /* Borde del color de acento */
}

.login-form-container .btn-link,
.registration-form-container .btn-link,
.password-reset-container .btn-link { /* Añadido el nuevo contenedor para el restablecimiento de contraseña */
    color: var(--secondary-text-color);
    font-size: 0.95rem;
    text-decoration: none;
    display: block; /* Para que ocupe su propia línea */
    text-align: center;
    padding: 0.5rem 0;
    transition: color 0.3s ease;
}

.login-form-container .btn-link:hover,
.registration-form-container .btn-link:hover,
.password-reset-container .btn-link:hover { /* Añadido el nuevo contenedor para el restablecimiento de contraseña */
    color: var(--accent-color);
    text-decoration: underline;
}

/* Estilos para el checkbox de términos y condiciones */
.registration-form-container .form-check {
    display: flex; /* Usar flexbox */
    align-items: center; /* Alinear verticalmente al centro */
    justify-content: center; /* Centrar horizontalmente */
    margin-bottom: 1.5rem; /* Espacio debajo del checkbox */
}

.registration-form-container .form-check-input {
    margin-right: 0.5rem; /* Espacio entre el checkbox y el texto */
}

/* Estilos para el botón de cerrar (la "X") */
.close-button {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--secondary-text-color);
    cursor: pointer;
    transition: color 0.3s ease;
    padding: 0; /* Eliminar padding extra del botón */
    line-height: 1; /* Asegurar que el icono no tenga espacio extra */
}

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

/* Estilos para el modal de mensajes */
.message-modal .modal-header.bg-success {
    background-color: #28a745 !important; /* Verde Bootstrap */
    color: white;
}
.message-modal .modal-header.bg-danger {
    background-color: var(--accent-color) !important; /* Usar el color de acento para errores */
    color: white;
}
.message-modal .modal-header.bg-info {
    background-color: #17a2b8 !important; /* Azul Bootstrap */
    color: white;
}
.message-modal .modal-title {
    font-weight: 600;
}
.message-modal .modal-body {
    color: var(--text-color);
    font-size: 1.1rem;
}

/* Estilos para los elementos del menú desplegable del usuario */
.navbar-nav .dropdown-menu {
    border-radius: 10px; /* Bordes redondeados para el menú desplegable */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); /* Sombra suave */
    border: none; /* Eliminar borde predeterminado de Bootstrap */
    padding: 0.5rem; /* Pequeño padding interno para que los ítems no toquen los bordes */
}

.navbar-nav .dropdown-item {
    color: var(--text-color); /* Color de texto normal */
    padding: 0.7rem 1.2rem; /* Ajustar padding para que se vea similar a nav-link */
    border-radius: 8px; /* Bordes redondeados para cada ítem del menú */
    font-size: 1rem; /* Ligeramente más pequeño que nav-link pero legible */
    font-weight: 500; /* Peso de fuente un poco más ligero */
    transition: all 0.3s ease-in-out; /* Transición para hover */
    display: flex; /* Para alinear icono y texto */
    align-items: center;
}

.navbar-nav .dropdown-item i {
    margin-right: 0.5rem; /* Espacio entre icono y texto */
}

.navbar-nav .dropdown-item:hover,
.navbar-nav .dropdown-item:focus,
.navbar-nav .dropdown-item.active {
    background-color: var(--accent-color); /* Fondo con color de acento */
    color: var(--navbar-bg-color); /* Texto blanco */
    transform: translateY(-2px); /* Ligeramente elevado */
    box-shadow: 0 4px 10px rgba(var(--accent-color-rgb), 0.3); /* Sombra con color de acento */
}

.navbar-nav .dropdown-divider {
    margin: 0.5rem 0; /* Espacio para el divisor */
    border-top-color: var(--border-color); /* Color del divisor */
}

/* Media queries para dispositivos móviles */
@media (max-width: 767px) {
    .navbar-custom {
        margin: 0; /* Elimina el margen en móviles */
        border-radius: 0; /* Elimina el border-radius en móviles */
        top: 0; /* Pegar al top en móvil */
    }
    .navbar-brand .logo {
        max-width: 70px; /* Logo más pequeño en móviles */
        margin-right: 1rem; /* Ajuste de margen en móvil */
    }
    .navbar-nav .nav-item {
        margin-right: 0; /* Eliminar margen entre ítems en móvil */
        margin-bottom: 0.5rem; /* Espacio vertical entre ítems */
    }
    .navbar-nav .nav-link,
    .navbar-nav .btn-outline-primary {
        padding: 0.6rem 1rem; /* Reducir padding en móvil */
        font-size: 1rem;
    }
    .navbar-nav .btn-outline-primary {
        margin-left: 0; /* Eliminar margen izquierdo en móvil */
    }
    .login-form-container,
    .registration-form-container,
    .password-reset-container { /* Añadido el nuevo contenedor para el restablecimiento de contraseña */
        padding: 1.5rem; /* Menos padding en móvil */
        max-width: 100%; /* Ocupa todo el ancho disponible en móvil */
    }
    .close-button {
        top: 10px;
        right: 10px;
        font-size: 1.3rem;
    }
    .registration-form-container .form-check {
        justify-content: flex-start; /* Alinear a la izquierda en móvil */
    }
}