/* assets/css/style.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');

/* Variables CSS para los colores base del tema */
:root {
    /* Tema Claro (valores por defecto) */
    --body-bg-color: #f0f2f5; /* Fondo general de la página */
    --text-color: #333; /* Color de texto principal */
    --heading-color: #222; /* Color de títulos */
    --container-bg-color: #ffffff; /* Fondo de contenedores de contenido */
    --border-color: #e0e0e0; /* Color de bordes y líneas divisorias */
    --shadow-color: rgba(0, 0, 0, 0.1); /* Color de sombra */

    --button-primary-bg: #4CAF50; /* Fondo de botón primario (ej. Proceed to Checkout) */
    --button-primary-hover-bg: #45a049;
    --button-primary-text-color: white; /* Añadida: Color de texto para botones primarios */

    --button-secondary-bg: #f0f0f0; /* Fondo de botón secundario */
    --button-secondary-hover-bg: #e0e0e0;
    --button-secondary-text: #333;

    --accent-color: #007bff; /* Color de acento (ej. enlaces, botones de "Ver más") */
    --accent-hover-color: #0056b3; /* Añadida: Color de acento para hover */

    --warning-color: #ffc107; /* Color de advertencia */

    --focus-shadow-color: rgba(0, 123, 255, 0.25); /* Añadida: Sombra para elementos en focus (azul suave) */
}

/* Tema Oscuro */
body.dark-theme {
    --body-bg-color: #0d1117; /* Fondo general oscuro */
    --text-color: #c9d1d9; /* Texto claro */
    --heading-color: #e6edf3; /* Títulos claros */
    --container-bg-color: #161b22; /* Fondo de contenedores oscuro */
    --border-color: #30363d; /* Bordes oscuros */
    --shadow-color: rgba(0, 0, 0, 0.5); /* Sombra más oscura */

    --button-primary-bg: #2ea44f; /* Botón primario verde oscuro */
    --button-primary-hover-bg: #2c974b;
    --button-primary-text-color: white; /* Añadida: Color de texto para botones primarios */

    --button-secondary-bg: #30363d; /* Botón secundario gris oscuro */
    --button-secondary-hover-bg: #444c56;
    --button-secondary-text: #e6edf3;

    --accent-color: #58a6ff; /* Color de acento azul GitHub */
    --accent-hover-color: #388bfd; /* Añadida: Color de acento para hover */

    --warning-color: #d4b483; /* Color de advertencia más cálido para oscuro */

    --focus-shadow-color: rgba(56, 139, 253, 0.25); /* Añadida: Sombra para elementos en focus */
}


/* Estilos Generales con Variables */
body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    background-color: var(--body-bg-color);
    color: var(--text-color);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: background-color 0.3s ease, color 0.3s ease; /* Transición suave para el cambio de tema */
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    box-sizing: border-box;
    flex-grow: 1;
    background-color: var(--container-bg-color);
    border-radius: 12px;
    box-shadow: 0 4px 15px var(--shadow-color);
    border: 1px solid var(--border-color);
    padding: 30px;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--heading-color);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 15px;
    margin-bottom: 25px;
}

p {
    line-height: 1.6;
}

a {
    color: var(--accent-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--accent-hover-color); /* Usar la nueva variable de hover de acento */
    text-decoration: underline;
}

/* Estilos para el botón "Ver catálogo de forros" en carrito-vacio (usando variables) */
.carrito-vacio .btn {
    display: inline-block;
    background-color: var(--accent-color); /* Usa el color de acento */
    color: var(--button-primary-text-color); /* Para asegurar el color del texto blanco */
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 3px 10px var(--shadow-color);
}

.carrito-vacio .btn:hover {
    background-color: var(--accent-hover-color); /* CAMBIO: Ahora usa el hover del color de acento */
    transform: translateY(-2px);
}

/* Puedes mover algunos estilos generales de carrito.css a style.css si son aplicables a todo el sitio */
/* Por ejemplo, si .btn es un estilo de botón general, deberías definirlo aquí.
    Los estilos específicos de diseño de componentes como .producto-carrito deben permanecer en carrito.css */

/* Media Queries (ejemplo, ajusta según tus necesidades) */
@media (max-width: 768px) {
    .container {
        margin: 20px auto;
        padding: 0 15px;
    }
}


/* Ocultar la flecha nativa del select o menú, si está duplicada */
.dropdown-toggle::after {
  display: none !important; /* Oculta la flecha que Bootstrap agrega */
}

/* En cambio, usa solo una flecha con un SVG o font icon personalizada */
.mi-flecha-personalizada {
  display: inline-block;
  /* estilos para tu flecha */
}

.dropdown-menu {
    z-index: 2000 !important;
}