/* Dynamic Styles - Generado por PHP */

/* ================== HEADER ================== */
header .navbar {
    background: #343a40; /* Aplica color o gradiente */
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* Color y tamaño para enlaces principales, marca y toggles */
header .navbar-brand,
header .nav-link,
header #cartDropdown, /* Icono carrito */
header #notificationsDropdown /* Icono campana */
{
    color: #ffffff !important;
    font-size: 16px;
}

/* Color para el nombre de usuario y flecha en el menú desplegable */
header .nav-item.dropdown > .nav-link {
     color: #ffffff !important;
}

/* Aplicamos al <header> principal usando 'body' para aumentar especificidad */
body header.sticky-top {
    background: #343a40 !important; /* Aplica color/gradiente y usa !important */
    font-family: system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, &quot;Liberation Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;;
}
/* Forzamos el navbar interior a ser transparente */
body header.sticky-top nav.navbar { /* También aumentamos especificidad aquí */
    background: transparent !important;
    font-family: system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, &quot;Liberation Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; /* Asegura que la fuente se herede */
}

/* Estilos Hover/Active para enlaces */
header .nav-link:hover,
header .nav-link.active,
header .navbar-brand:hover {
     color: #ffffff !important;
     opacity: 0.8; /* Efecto visual leve */
}

/* Ajuste específico para el toggle del menú hamburguesa */
header .navbar-toggler-icon {
    /* Intenta usar el color de fuente del header para el icono */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ===== INICIO: Estilos Barra de Búsqueda (Refinados) ===== */
header #search-input {
    /*min-width: 300px; */
}

/* Regla principal para el botón */
header #search-form button.btn { /* Apunta a .btn en lugar de .btn-outline-success */
    background-color: #198754 !important;
    color: #ffffff !important;
    border-color: #198754 !important; /* Borde del mismo color */
    box-shadow: none !important; /* Quita sombras extra */
}
/* Regla Hover/Focus */
header #search-form button.btn:hover,
header #search-form button.btn:focus {
    background-color: #198754 !important; /* Mantiene el fondo */
    color: #ffffff !important; /* Mantiene el texto */
    border-color: #198754 !important; /* Mantiene el borde */
    opacity: 0.85; /* Ligera opacidad */
    box-shadow: none !important; /* Quita el brillo azul de focus */
}
/* ===== FIN: Estilos Barra de Búsqueda ===== */

/* ===== INICIO: Estilos Filtro Categorías Index ===== */
#category-filter-nav .nav-link {
    color: #6c757d !important;
    background-color: #f8f9fa !important;
    border: 1px solid transparent; /* Para mantener tamaño consistente */
    margin: 0 3px; /* Pequeño espacio entre botones */
}

/* Estilo Hover para botones normales */
#category-filter-nav .nav-link:not(.active):hover {
    opacity: 0.85;
}

/* Estilo para el botón ACTIVO */
#category-filter-nav .nav-link.active {
    color: #ffffff !important;
    background-color: #343a40 !important;
    border-color: #343a40 !important; /* Borde del mismo color */
    transform: scale(1.05); /* Mantiene el efecto de escala */
}
/* ===== FIN: Estilos Filtro Categorías Index ===== */

/* ===== INICIO: Estilos Botón Primario ===== */
/* Aplicar a todos los botones .btn-primary y a los que usan la clase .button */
.btn-primary,
.button {
    background: #0d6efd !important; /* Permite gradiente */
    color: #ffffff !important;
    border-color: #0d6efd !important; /* Borde coincide o es transparente */
    box-shadow: none !important;
    /* Considera añadir padding, border-radius si quieres unificar más */
    /* padding: .5rem 1rem; */
    /* border-radius: .3rem; */
}

/* Estilo Hover/Focus */
.btn-primary:hover,
.button:hover,
.btn-primary:focus,
.button:focus {
    background: #0d6efd !important; /* Mantiene fondo */
    color: #ffffff !important; /* Mantiene texto */
    border-color: #0d6efd !important; /* Mantiene borde */
    opacity: 0.85; /* Ligera opacidad */
    box-shadow: none !important;
}
/* ===== FIN: Estilos Botón Primario ===== */

/* ================== MENÚ DESPLEGABLE ================== */
header .dropdown-menu {
    background-color: #ffffff;
    font-family: system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, &quot;Liberation Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; /* Hereda fuente del header */
    border: 1px solid rgba(0,0,0,.1); /* Borde sutil */
}

/* Color y tamaño para items del desplegable */
header .dropdown-item {
    color: #212529 !important;
    font-size: calc(16px * 0.95); /* Ligeramente más pequeño */
    padding: .5rem 1rem;
}

/* Color de fondo y fuente al pasar el ratón */
header .dropdown-item:hover,
header .dropdown-item:focus {
    color: #212529 !important;
    background-color: rgba(0, 0, 0, 0.05); /* Sombra ligera */
}

/* Separador en el desplegable */
header .dropdown-divider {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* ================== FOOTER ================== */
footer {
    background: #212529;
    color: #ffffff;
    font-size: 14px;
    font-family: system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, &quot;Liberation Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;;
}

/* Color for links AND general text inside footer */
footer,
footer p,
footer a,
footer .footer-dw,
footer .bi /* Icons */
{
    color: #ffffff !important;
}
footer a {
     text-decoration: none;
}
footer a:hover {
     opacity: 0.8;
     text-decoration: underline;
}

/* Style for the copyright sub-section */
footer .text-center.p-3 {
    background-color: rgba(0, 0, 0, 0.2); /* Apply calculated/default darker bg */
    opacity: 0.9; /* Slightly less prominent */
}
footer .text-center p { /* Ensure copyright text also uses main footer color */
     color: #ffffff !important;
     opacity: 0.8;
}

/* ================== WHATSAPP BUTTON (Exclude - REGLA MÁS ESPECÍFICA) ================== */
/* Al añadir 'footer a' aumentamos la especificidad para anular 'footer a' general */
footer a.whatsapp-float {
    background-color: #25d366 !important; /* Color verde original */
    color: #FFF !important;             /* Color blanco original del icono */
    /* Otros estilos originales si los hubiera (ej. box-shadow) se mantienen */
}
footer a.whatsapp-float:hover {
     color: #FFF !important; /* Asegura que el color no cambie en hover */
     opacity: 1; /* Podrías querer quitar la opacidad del hover general */
     transform: scale(1.1); /* Mantiene la animación original */
}
/* Aseguramos que el ícono dentro también sea blanco */
footer a.whatsapp-float i.bi-whatsapp {
    color: #FFF !important;
}