/* ============================================================
   TEMA OSCURO - TIENDA ONLINE
   ============================================================ */

[data-theme="dark"] {
    /* Colores base */
    --bg-primary: #1a1d23;
    --bg-secondary: #23272f;
    --bg-tertiary: #2d3139;
    --bg-card: #2b2f38;
    --bg-hover: #353a45;
    
    /* Texto */
    --text-primary: #e8eaed;
    --text-secondary: #9ca3af;
    --text-muted: #6b7280;
    
    /* Bordes */
    --border-color: #3d434a;
    --border-light: #2d3139;
    
    /* Colores de acento (mantener) */
    --color-primary: #3b82f6;
    --color-secondary: #10b981;
    --color-accent: #f59e0b;
    --color-danger: #ef4444;
    
    /* Sombras */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}

/* Background general */
[data-theme="dark"] body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* Header */
[data-theme="dark"] .navbar,
[data-theme="dark"] .header-top {
    background-color: var(--bg-secondary);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .navbar-brand,
[data-theme="dark"] .nav-link {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .nav-link:hover {
    color: var(--color-primary) !important;
    background-color: var(--bg-hover);
}

/* Cards de productos */
[data-theme="dark"] .product-card,
[data-theme="dark"] .card {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    box-shadow: var(--shadow-md);
}

[data-theme="dark"] .product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .card-title,
[data-theme="dark"] .product-name {
    color: var(--text-primary);
}

[data-theme="dark"] .card-text,
[data-theme="dark"] .product-description {
    color: var(--text-secondary);
}

/* Precios */
[data-theme="dark"] .product-price,
[data-theme="dark"] .price {
    color: var(--color-secondary);
}

[data-theme="dark"] .price-old {
    color: var(--text-muted);
}

/* Badges */
[data-theme="dark"] .badge {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

[data-theme="dark"] .badge-success {
    background-color: var(--color-secondary);
    color: #fff;
}

[data-theme="dark"] .badge-danger {
    background-color: var(--color-danger);
    color: #fff;
}

/* Botones */
[data-theme="dark"] .btn-outline-primary {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

[data-theme="dark"] .btn-outline-primary:hover {
    background-color: var(--color-primary);
    color: #fff;
}

[data-theme="dark"] .btn-light {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .btn-light:hover {
    background-color: var(--bg-hover);
}

/* Forms */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: var(--bg-tertiary);
    border-color: var(--color-primary);
    color: var(--text-primary);
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
}

[data-theme="dark"] .form-control::placeholder {
    color: var(--text-muted);
}

/* Footer */
[data-theme="dark"] footer,
[data-theme="dark"] .footer {
    background-color: var(--bg-secondary);
    border-top-color: var(--border-color);
    color: var(--text-secondary);
}

[data-theme="dark"] footer h5,
[data-theme="dark"] .footer h5 {
    color: var(--text-primary);
}

[data-theme="dark"] footer a,
[data-theme="dark"] .footer a {
    color: var(--text-secondary);
}

[data-theme="dark"] footer a:hover,
[data-theme="dark"] .footer a:hover {
    color: var(--color-primary);
}

/* Breadcrumb */
[data-theme="dark"] .breadcrumb {
    background-color: var(--bg-secondary);
}

[data-theme="dark"] .breadcrumb-item,
[data-theme="dark"] .breadcrumb-item a {
    color: var(--text-secondary);
}

[data-theme="dark"] .breadcrumb-item.active {
    color: var(--text-primary);
}

/* Categorías */
[data-theme="dark"] .category-card {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .category-card:hover {
    background-color: var(--bg-hover);
    border-color: var(--color-primary);
}

/* Carrito */
[data-theme="dark"] .cart-item {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .cart-summary {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

/* Modals */
[data-theme="dark"] .modal-content {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .modal-header {
    border-bottom-color: var(--border-color);
    background-color: var(--bg-tertiary);
}

[data-theme="dark"] .modal-footer {
    border-top-color: var(--border-color);
}

[data-theme="dark"] .modal-title {
    color: var(--text-primary);
}

[data-theme="dark"] .close {
    color: var(--text-primary);
    opacity: 0.7;
}

/* Alerts */
[data-theme="dark"] .alert {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .alert-info {
    background-color: rgba(59, 130, 246, 0.15);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

[data-theme="dark"] .alert-success {
    background-color: rgba(16, 185, 129, 0.15);
    border-color: var(--color-secondary);
    color: var(--color-secondary);
}

[data-theme="dark"] .alert-warning {
    background-color: rgba(245, 158, 11, 0.15);
    border-color: var(--color-accent);
    color: var(--color-accent);
}

[data-theme="dark"] .alert-danger {
    background-color: rgba(239, 68, 68, 0.15);
    border-color: var(--color-danger);
    color: var(--color-danger);
}

/* Búsqueda */
[data-theme="dark"] .search-box {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
}

[data-theme="dark"] .search-box:focus-within {
    border-color: var(--color-primary);
}

/* Paginación */
[data-theme="dark"] .pagination .page-link {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .pagination .page-link:hover {
    background-color: var(--bg-hover);
    border-color: var(--color-primary);
}

[data-theme="dark"] .pagination .page-item.active .page-link {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

/* Dropdown */
[data-theme="dark"] .dropdown-menu {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .dropdown-item {
    color: var(--text-primary);
}

[data-theme="dark"] .dropdown-item:hover {
    background-color: var(--bg-hover);
    color: var(--color-primary);
}

[data-theme="dark"] .dropdown-divider {
    border-top-color: var(--border-color);
}

/* Tooltips */
[data-theme="dark"] .tooltip-inner {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

/* Scrollbar */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: 5px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--bg-hover);
}

/* Skeleton loaders */
[data-theme="dark"] .skeleton {
    background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-hover) 50%, var(--bg-tertiary) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Tables */
[data-theme="dark"] .table {
    color: var(--text-primary);
}

[data-theme="dark"] .table thead th {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
}

[data-theme="dark"] .table td,
[data-theme="dark"] .table th {
    border-color: var(--border-color);
}

[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.02);
}

[data-theme="dark"] .table-hover tbody tr:hover {
    background-color: var(--bg-hover);
}

/* Lista de productos */
[data-theme="dark"] .product-list-item {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .product-list-item:hover {
    background-color: var(--bg-hover);
}

/* Filtros */
[data-theme="dark"] .filter-sidebar {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .filter-group {
    border-bottom-color: var(--border-color);
}

/* Transiciones suaves */
[data-theme="dark"] * {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ============================================================
   SOBRESCRIBIR ESTILOS ARTÍSTICOS/MODERNOS
   ============================================================ */

/* Header Moderno/Artístico */
[data-theme="dark"] .modern-header,
[data-theme="dark"] .header-modern,
[data-theme="dark"] .navbar-modern {
    background-color: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .modern-nav-link,
[data-theme="dark"] .nav-modern-link {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .modern-nav-link:hover,
[data-theme="dark"] .nav-modern-link:hover {
    color: var(--color-primary) !important;
    background-color: var(--bg-hover) !important;
}

[data-theme="dark"] .modern-header-icons .modern-icon-btn {
    color: var(--text-primary) !important;
    background-color: transparent !important;
}

[data-theme="dark"] .modern-header-icons .modern-icon-btn:hover {
    background-color: var(--bg-hover) !important;
    color: var(--color-primary) !important;
}

/* Secciones con fondo blanco en diseños artísticos */
[data-theme="dark"] .section-white,
[data-theme="dark"] .bg-white,
[data-theme="dark"] .section-light,
[data-theme="dark"] .hero-section,
[data-theme="dark"] .features-section,
[data-theme="dark"] .products-section {
    background-color: var(--bg-primary) !important;
}

/* Containers y wrappers */
[data-theme="dark"] .container-modern,
[data-theme="dark"] .wrapper-modern,
[data-theme="dark"] .content-wrapper {
    background-color: var(--bg-primary) !important;
}

/* Cards artísticas */
[data-theme="dark"] .card-artistic,
[data-theme="dark"] .product-card-modern,
[data-theme="dark"] .card-modern,
[data-theme="dark"] .card-premium {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    box-shadow: var(--shadow-md) !important;
}

[data-theme="dark"] .card-artistic:hover,
[data-theme="dark"] .product-card-modern:hover,
[data-theme="dark"] .card-modern:hover {
    box-shadow: var(--shadow-lg) !important;
}

/* Títulos y textos en diseños artísticos */
[data-theme="dark"] .section-title,
[data-theme="dark"] .title-modern,
[data-theme="dark"] .heading-artistic,
[data-theme="dark"] h1, 
[data-theme="dark"] h2, 
[data-theme="dark"] h3, 
[data-theme="dark"] h4, 
[data-theme="dark"] h5, 
[data-theme="dark"] h6 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] p,
[data-theme="dark"] .text-description,
[data-theme="dark"] .description-modern {
    color: var(--text-secondary) !important;
}

/* Overlays y fondos con gradientes */
[data-theme="dark"] .overlay-white,
[data-theme="dark"] .gradient-overlay {
    background: linear-gradient(to bottom, rgba(26, 29, 35, 0.9), rgba(26, 29, 35, 0.95)) !important;
}

/* Productos en grid/lista */
[data-theme="dark"] .products-grid,
[data-theme="dark"] .products-list {
    background-color: transparent !important;
}

[data-theme="dark"] .product-item,
[data-theme="dark"] .product-box {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}

/* Imágenes de productos - mantener container oscuro */
[data-theme="dark"] .product-image-wrapper,
[data-theme="dark"] .image-container {
    background-color: var(--bg-tertiary) !important;
}

/* Categorías artísticas */
[data-theme="dark"] .category-box,
[data-theme="dark"] .category-modern,
[data-theme="dark"] .category-item {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

/* Sidebar y filtros */
[data-theme="dark"] .sidebar-modern,
[data-theme="dark"] .filters-box,
[data-theme="dark"] .filter-container {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}

/* Hero sections con backgrounds claros */
[data-theme="dark"] .hero-banner,
[data-theme="dark"] .banner-section,
[data-theme="dark"] .promo-section {
    background-color: var(--bg-secondary) !important;
}

/* Testimonios y reviews */
[data-theme="dark"] .testimonial-card,
[data-theme="dark"] .review-box {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

/* Newsletter y CTAs */
[data-theme="dark"] .newsletter-box,
[data-theme="dark"] .cta-section {
    background-color: var(--bg-secondary) !important;
}

/* Info boxes */
[data-theme="dark"] .info-box,
[data-theme="dark"] .feature-box,
[data-theme="dark"] .service-box {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}

/* Tabs y navegación secundaria */
[data-theme="dark"] .tabs-modern,
[data-theme="dark"] .nav-tabs-modern {
    background-color: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .tab-modern,
[data-theme="dark"] .nav-tab-modern {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .tab-modern.active,
[data-theme="dark"] .nav-tab-modern.active {
    color: var(--color-primary) !important;
    background-color: var(--bg-primary) !important;
    border-bottom-color: var(--color-primary) !important;
}

/* Detalle de producto artístico */
[data-theme="dark"] .product-detail-modern,
[data-theme="dark"] .product-info-box {
    background-color: var(--bg-card) !important;
}

[data-theme="dark"] .product-specifications,
[data-theme="dark"] .product-details-table {
    background-color: var(--bg-tertiary) !important;
}

[data-theme="dark"] .product-specifications td,
[data-theme="dark"] .product-specifications th {
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Carrito moderno */
[data-theme="dark"] .cart-modern,
[data-theme="dark"] .cart-box {
    background-color: var(--bg-card) !important;
}

[data-theme="dark"] .cart-item-modern {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
}

/* Footer artístico */
[data-theme="dark"] .footer-modern,
[data-theme="dark"] .footer-artistic {
    background-color: var(--bg-secondary) !important;
    border-top: 1px solid var(--border-color) !important;
}

/* Sombras para cards en tema oscuro */
[data-theme="dark"] .shadow,
[data-theme="dark"] .shadow-sm,
[data-theme="dark"] .shadow-md,
[data-theme="dark"] .shadow-lg {
    box-shadow: var(--shadow-md) !important;
}

[data-theme="dark"] .shadow-lg {
    box-shadow: var(--shadow-lg) !important;
}

/* Bordes en elementos artísticos */
[data-theme="dark"] .border,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-left,
[data-theme="dark"] .border-right {
    border-color: var(--border-color) !important;
}

/* Textos pequeños y meta info */
[data-theme="dark"] .text-muted,
[data-theme="dark"] .meta-info,
[data-theme="dark"] .small-text {
    color: var(--text-muted) !important;
}

/* Links en contenido */
[data-theme="dark"] a:not(.btn) {
    color: var(--color-primary) !important;
}

[data-theme="dark"] a:not(.btn):hover {
    color: var(--color-secondary) !important;
}

/* Iconos en tema oscuro */
[data-theme="dark"] .icon,
[data-theme="dark"] i {
    color: var(--text-primary) !important;
}

/* Separadores */
[data-theme="dark"] hr,
[data-theme="dark"] .divider {
    border-color: var(--border-color) !important;
    background-color: var(--border-color) !important;
}

/* Cajas de búsqueda modernas */
[data-theme="dark"] .search-modern,
[data-theme="dark"] .search-box-modern {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .search-modern input,
[data-theme="dark"] .search-box-modern input {
    background-color: transparent !important;
    color: var(--text-primary) !important;
}

/* Mobile menu moderno */
[data-theme="dark"] .mobile-menu-modern,
[data-theme="dark"] .modern-mobile-menu {
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .modern-mobile-nav-link {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .modern-mobile-nav-link:hover,
[data-theme="dark"] .modern-mobile-nav-link.active {
    background-color: var(--bg-hover) !important;
    color: var(--color-primary) !important;
}