/* css/custom.css - VERSIÓN COMPLETA CON PRIMARY Y WARNING PERSONALIZADOS */
:root {
    /* ========== COLOR LILA PRIMARY ========== */
    --bs-primary: #9a71c0;
    --bs-primary-rgb: 154, 113, 192;
    --bs-primary-dark: #7d57a3;
    --bs-primary-light: #b88ae5;
    
    /* ========== COLOR NARANJA WARNING ========== */
    --bs-warning: #fc6d00;
    --bs-warning-rgb: 255, 153, 0;
    --bs-warning-dark: #cc7a00;
    --bs-warning-light: #ffad33;
    
    /* Para mantener consistencia */
    --bs-link-color: var(--bs-primary);
    --bs-link-hover-color: var(--bs-primary-dark);
    --bs-link-color-rgb: var(--bs-primary-rgb);
    --bs-link-hover-color-rgb: 125, 87, 163;
}

/* ========== FORZAR COLORES WARNING EN BOOTSTRAP ========== */
/* Botones Warning */
.btn-warning {
    --bs-btn-color: #000;
    --bs-btn-bg: var(--bs-warning);
    --bs-btn-border-color: var(--bs-warning);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--bs-warning-dark);
    --bs-btn-hover-border-color: var(--bs-warning-dark);
    --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb);
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--bs-warning-dark);
    --bs-btn-active-border-color: var(--bs-warning-dark);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: var(--bs-warning);
    --bs-btn-disabled-border-color: var(--bs-warning);
}

/* Botones Outline Warning */
.btn-outline-warning {
    --bs-btn-color: var(--bs-warning);
    --bs-btn-border-color: var(--bs-warning);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--bs-warning);
    --bs-btn-hover-border-color: var(--bs-warning);
    --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb);
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--bs-warning);
    --bs-btn-active-border-color: var(--bs-warning);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--bs-warning);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-warning);
    --bs-gradient: none;
}

/* Fondo Warning */
.bg-warning {
    background-color: var(--bs-warning) !important;
}

/* Texto Warning */
.text-warning {
    color: var(--bs-warning) !important;
}

/* Borde Warning */
.border-warning {
    border-color: var(--bs-warning) !important;
}

/* Alertas Warning */
.alert-warning {
    --bs-alert-color: #664d03;
    --bs-alert-bg: #fff3cd;
    --bs-alert-border-color: #ffecb5;
}

/* Badges Warning */
.badge.bg-warning {
    background-color: var(--bs-warning) !important;
    color: #000 !important;
}

/* ========== FORZAR COLORES PRIMARY EN BOOTSTRAP ========== */
/* Botones Primary */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-primary-dark);
    --bs-btn-hover-border-color: var(--bs-primary-dark);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-primary-dark);
    --bs-btn-active-border-color: var(--bs-primary-dark);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

/* Botones Outline Primary */
.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--bs-primary);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-primary);
    --bs-gradient: none;
}

/* Fondo Primary */
.bg-primary {
    background-color: var(--bs-primary) !important;
}

/* Texto Primary */
.text-primary {
    color: var(--bs-primary) !important;
}

/* Borde Primary */
.border-primary {
    border-color: var(--bs-primary) !important;
}

/* Alertas Primary */
.alert-primary {
    --bs-alert-color: var(--bs-primary-dark);
    --bs-alert-bg: #f0e6ff;
    --bs-alert-border-color: #d9c2ff;
}

/* ========== LIST GROUP ITEMS (PARA CATEGORÍAS/MARCAS) ========== */
.list-group-item.active {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: white !important;
}

.list-group-item.active:hover,
.list-group-item.active:focus {
    background-color: var(--bs-primary-dark) !important;
    border-color: var(--bs-primary-dark) !important;
}

.list-group-item-action.active:hover {
    background-color: var(--bs-primary-dark) !important;
}

/* List group con hover */
.list-group-item-action:hover {
    background-color: rgba(154, 113, 192, 0.1) !important;
    color: var(--bs-primary-dark) !important;
}

/* ========== FORMULARIOS ========== */
.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--bs-primary-light);
    box-shadow: 0 0 0 0.25rem rgba(154, 113, 192, 0.25);
}

/* ========== NAVEGACIÓN Y PESTAÑAS ========== */
.nav-link.active {
    color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

.nav-pills .nav-link.active {
    background-color: var(--bs-primary) !important;
    color: white !important;
}

.nav-pills .nav-link.active.text-warning {
    background-color: var(--bs-warning) !important;
    color: #000 !important;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--bs-primary) !important;
}

/* ========== CARD HEADERS ========== */
.card-header.bg-primary {
    background-color: var(--bs-primary) !important;
    color: white !important;
}

.card-header.bg-warning {
    background-color: var(--bs-warning) !important;
    color: #000 !important;
}

/* ========== PAGINACIÓN ========== */
.page-item.active .page-link {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.page-link {
    color: var(--bs-primary);
}

.page-link:hover {
    color: var(--bs-primary-dark);
}

/* ========== PROGRESS BARS ========== */
.progress-bar {
    background-color: var(--bs-primary);
}

.progress-bar.bg-warning {
    background-color: var(--bs-warning) !important;
}

/* ========== GRADIENTES PERSONALIZADOS ========== */
.login-header,
.btn-login {
    background: linear-gradient(to right, var(--bs-primary), var(--bs-primary-light)) !important;
    border: none !important;
}

.btn-login:hover {
    background: linear-gradient(to right, var(--bs-primary-dark), var(--bs-primary)) !important;
}

/* Para el botón del carrito específicamente */
.btn-outline-primary.position-relative {
    transition: all 0.3s ease;
}

.btn-outline-primary.position-relative:hover {
    background-color: var(--bs-primary);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(154, 113, 192, 0.3);
}

/* Para el botón warning específicamente */
.btn-warning.position-relative,
.btn-outline-warning.position-relative {
    transition: all 0.3s ease;
}

.btn-warning.position-relative:hover {
    background-color: var(--bs-warning-dark) !important;
    border-color: var(--bs-warning-dark) !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 153, 0, 0.3);
}

.btn-outline-warning.position-relative:hover {
    background-color: var(--bs-warning) !important;
    color: #000 !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 153, 0, 0.3);
}

/* ========== BADGES ========== */
.badge.bg-primary {
    background-color: var(--bs-primary) !important;
}

.badge.bg-warning {
    background-color: var(--bs-warning) !important;
    color: #000 !important;
}

/* Para badges en catálogo */
.badge.bg-secondary {
    background-color: #6c757d !important;
}

/* ========== ENLACES ========== */
a {
    color: var(--bs-primary);
}

a:hover {
    color: var(--bs-primary-dark);
}

a.text-warning {
    color: var(--bs-warning) !important;
}

a.text-warning:hover {
    color: var(--bs-warning-dark) !important;
}

/* ========== TABLAS ========== */
.table-primary {
    --bs-table-bg: #f0e6ff;
    --bs-table-striped-bg: #e6d9ff;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #d9c2ff;
    --bs-table-active-color: #000;
    --bs-table-hover-bg: #e6d9ff;
    --bs-table-hover-color: #000;
    color: #000;
    border-color: #d9c2ff;
}

.table-warning {
    --bs-table-bg: #fff3cd;
    --bs-table-striped-bg: #f2e7c3;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #e6dbb9;
    --bs-table-active-color: #000;
    --bs-table-hover-bg: #f2e7c3;
    --bs-table-hover-color: #000;
    color: #000;
    border-color: #ffecb5;
}

/* ========== MISCELÁNEOS ========== */
/* Para los íconos en filtros activos */
.list-group-item.active i {
    color: white !important;
}

.list-group-item.active.text-warning i {
    color: #000 !important;
}

/* Para el breadcrumb activo */
.breadcrumb-item.active {
    color: var(--bs-primary) !important;
}

.breadcrumb-item.active.text-warning {
    color: var(--bs-warning) !important;
}

/* Para el texto en filtros activos */
.list-group-item.active span {
    color: white !important;
}

.list-group-item.active.text-warning span {
    color: #000 !important;
}

/* ========== CUSTOM STYLES PARA SÁNDALA ========== */
/* Botones personalizados con efectos */
.btn-primary,
.btn-outline-primary,
.btn-warning,
.btn-outline-warning,
.btn-login {
    transition: all 0.3s ease !important;
}

.btn-primary:hover,
.btn-warning:hover,
.btn-login:hover {
    transform: translateY(-2px) !important;
}

.btn-primary:hover {
    box-shadow: 0 5px 15px rgba(154, 113, 192, 0.3) !important;
}

.btn-warning:hover {
    box-shadow: 0 5px 15px rgba(255, 153, 0, 0.3) !important;
}

/* Color para los filtros en catálogo */
.card-header.bg-primary {
    color: white !important;
    font-weight: 600;
}

.card-header.bg-warning {
    color: #000 !important;
    font-weight: 600;
}

/* Mejorar la visibilidad de elementos activos */
.list-group-item.active {
    font-weight: 600;
    box-shadow: 0 2px 5px rgba(154, 113, 192, 0.2);
}

.list-group-item.active.bg-warning {
    box-shadow: 0 2px 5px rgba(255, 153, 0, 0.2);
}

/* Para los marcadores visuales */
:focus-visible {
    outline: 2px solid var(--bs-primary) !important;
    outline-offset: 2px;
}

/* ========== CLASES DE REFUERZO (FORZAR ESTILOS) ========== */
/* === FORZAR TODOS LOS BOTONES PRIMARY === */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: white !important;
}

/* === FORZAR TODOS LOS BOTONES WARNING === */
.btn-warning,
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active,
.btn-warning:not(:disabled):not(.disabled):active,
.btn-warning:not(:disabled):not(.disabled).active,
.show > .btn-warning.dropdown-toggle {
    background-color: var(--bs-warning) !important;
    border-color: var(--bs-warning) !important;
    color: #000 !important;
}

/* === FORZAR BOTONES DISABLED === */
.btn-primary:disabled,
.btn-primary.disabled {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    opacity: 0.65;
}

.btn-warning:disabled,
.btn-warning.disabled {
    background-color: var(--bs-warning) !important;
    border-color: var(--bs-warning) !important;
    opacity: 0.65;
}

/* === FORZAR HOVER/ACTIVE === */
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: var(--bs-primary-dark) !important;
    border-color: var(--bs-primary-dark) !important;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active {
    background-color: var(--bs-warning-dark) !important;
    border-color: var(--bs-warning-dark) !important;
}

/* === FORZAR OUTLINE PRIMARY === */
.btn-outline-primary,
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active {
    color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active {
    background-color: var(--bs-primary) !important;
    color: white !important;
}

/* === FORZAR OUTLINE WARNING === */
.btn-outline-warning,
.btn-outline-warning:hover,
.btn-outline-warning:focus,
.btn-outline-warning:active,
.btn-outline-warning.active {
    color: var(--bs-warning) !important;
    border-color: var(--bs-warning) !important;
}

.btn-outline-warning:hover,
.btn-outline-warning:focus,
.btn-outline-warning:active,
.btn-outline-warning.active {
    background-color: var(--bs-warning) !important;
    color: #000 !important;
}

/* === FORZAR GRADIENTES EN LOGIN === */
.login-header,
.btn-login {
    background: linear-gradient(to right, var(--bs-primary), var(--bs-primary-light)) !important;
    border: none !important;
}

.btn-login:hover {
    background: linear-gradient(to right, var(--bs-primary-dark), var(--bs-primary)) !important;
}

/* === FORZAR BOTÓN FINALIZAR COMPRA === */
button[onclick*="finalcompra.php"],
button.btn-primary[onclick*="finalcompra.php"] {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

button[onclick*="finalcompra.php"]:hover,
button.btn-primary[onclick*="finalcompra.php"]:hover {
    background-color: var(--bs-primary-dark) !important;
    border-color: var(--bs-primary-dark) !important;
}

/* === FORZAR BOTÓN BUSCAR EN AYUDA === */
#searchButton,
.search-btn-warning {
    background-color: var(--bs-warning) !important;
    border-color: var(--bs-warning) !important;
    color: #000 !important;
}

#searchButton:hover,
.search-btn-warning:hover {
    background-color: var(--bs-warning-dark) !important;
    border-color: var(--bs-warning-dark) !important;
    color: #000 !important;
}

/* ========== UTILIDADES ESPECÍFICAS ========== */
/* Para botones de compra rápida, destacados, etc. */
.btn-highlight {
    background-color: var(--bs-warning) !important;
    border-color: var(--bs-warning) !important;
    color: #000 !important;
    font-weight: 600;
}

.btn-highlight:hover {
    background-color: var(--bs-warning-dark) !important;
    border-color: var(--bs-warning-dark) !important;
}

/* Para precios destacados */
.price-highlight {
    color: var(--bs-warning) !important;
    font-weight: 700;
}

/* Para etiquetas de oferta o descuento */
.discount-badge {
    background-color: var(--bs-warning) !important;
    color: #000 !important;
    font-weight: bold;
}

/* Para mensajes importantes o alertas destacadas */
.important-alert {
    border-left: 4px solid var(--bs-warning) !important;
}