/* ========================================
   LTS - Dark Mode Styles (Refactorizado)
   ======================================== */

/* ===== Dark Mode Variables ===== */
body.dark-mode {
    --bg-primary: #0d0d0d;
    --bg-secondary: #1a1a1a;
    --bg-tertiary: #2a2a2a;
    --bg-card: #222222;
    --bg-input: #2a2a2a;
    --text-primary: #f0f0f0;
    --text-secondary: #cccccc;
    --text-muted: #999999;
    --text-light: #bbbbbb;
    --border-color: #444444;
    --border-light: #555555;
    --shadow-dark: 0 4px 20px rgba(0, 0, 0, 0.6);
    --accent-rosa: #E8A1B2;
    --accent-rosa-hover: #D48A9A;
}

/* ===== Dark Mode Toggle Button ===== */
.dark-mode-toggle {
    background: none;
    border: 2px solid var(--accent-rosa);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    color: var(--accent-rosa);
    font-size: 18px;
}

.dark-mode-toggle:hover {
    background: var(--accent-rosa);
    color: #000;
    transform: rotate(15deg);
}

/* ===== Body ===== */
body.dark-mode {
    background: var(--bg-primary);
    color: var(--text-primary);
}

/* ===== Headers y Nav ===== */
body.dark-mode .header-navbar {
    background: var(--bg-secondary);
    box-shadow: var(--shadow-dark);
}

body.dark-mode .header-top-bar {
    background: var(--bg-tertiary);
}

body.dark-mode .dropdown-menu {
    background: var(--bg-secondary);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
    border-color: var(--border-color);
}

body.dark-mode .dropdown-menu a {
    color: var(--text-primary);
}

body.dark-mode .dropdown-menu a:hover {
    background: var(--bg-tertiary);
    color: var(--accent-rosa);
}

/* ===== Contenedores ===== */
body.dark-mode .container,
body.dark-mode .container-fluid {
    background: transparent !important;
}

body.dark-mode section,
body.dark-mode article {
    background-color: transparent;
}

/* ===== Cards Generales ===== */
body.dark-mode .card,
body.dark-mode .feature-card,
body.dark-mode .category-card {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* ===== Product Cards ===== */
body.dark-mode .product-card,
body.dark-mode .product-card-new {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

body.dark-mode .product-image,
body.dark-mode .product-image-new {
    background: var(--bg-tertiary);
}

body.dark-mode .product-category,
body.dark-mode .product-category-new {
    color: var(--accent-rosa) !important;
}

body.dark-mode .product-title,
body.dark-mode .product-title-new,
body.dark-mode .product-title-detail {
    color: #ffffff !important;
}

body.dark-mode .product-price,
body.dark-mode .product-price-new,
body.dark-mode .product-price-detail {
    color: var(--accent-rosa) !important;
}

body.dark-mode .product-description,
body.dark-mode .product-description-detail {
    color: var(--text-secondary);
}

body.dark-mode .product-description-detail p {
    color: var(--text-secondary) !important;
}

body.dark-mode .product-actions,
body.dark-mode .product-actions-new {
    background: rgba(26, 26, 26, 0.95);
}

body.dark-mode .product-stock-detail h4,
body.dark-mode .size-selector-detail h4 {
    color: #ffffff !important;
}

body.dark-mode .stock-item {
    border-bottom-color: var(--border-color);
}

body.dark-mode .stock-item span:first-child {
    color: #ffffff !important;
}

body.dark-mode .stock-count {
    color: #ffffff !important;
}

body.dark-mode .size-btn-detail {
    border-color: #ffffff;
    background: var(--bg-secondary);
    color: #ffffff;
}

body.dark-mode .size-btn-detail:hover,
body.dark-mode .size-btn-detail.active {
    border-color: var(--accent-rosa);
    background: var(--accent-rosa);
    color: #000;
}

body.dark-mode .add-to-cart-btn-detail {
    background: var(--accent-rosa) !important;
    border-color: var(--accent-rosa) !important;
    color: #000 !important;
}

body.dark-mode .add-to-cart-btn-detail:hover {
    background: var(--accent-rosa-hover) !important;
    border-color: var(--accent-rosa-hover) !important;
    color: #000 !important;
}

body.dark-mode .add-to-cart-btn-detail i {
    color: #000 !important;
}

body.dark-mode .product-meta-detail {
    border-top-color: var(--border-color);
}

body.dark-mode .meta-item {
    border-bottom-color: var(--bg-tertiary);
}

body.dark-mode .meta-item strong,
body.dark-mode .meta-item span {
    color: #ffffff !important;
}

body.dark-mode .sku-text {
    color: #ffffff !important;
    background: var(--bg-tertiary) !important;
}

body.dark-mode .product-info-detail {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color);
}

body.dark-mode .product-info-detail * {
    color: var(--text-primary) !important;
}

body.dark-mode .product-category-detail {
    color: var(--text-secondary) !important;
}

body.dark-mode .product-description-detail {
    background: var(--bg-tertiary) !important;
    border-left-color: var(--border-light);
}

/* ===== Product Badges ===== */
body.dark-mode .product-badge,
body.dark-mode .product-badge-new {
    background: var(--accent-rosa) !important;
    color: #000 !important;
}

body.dark-mode .product-badge-sale {
    background: #ef4444 !important;
    color: #fff !important;
}

body.dark-mode .on-sale .price-current-sale {
    color: #ef4444 !important;
}

body.dark-mode .on-sale .price-old-sale {
    color: var(--text-muted);
}

/* ===== Shop ===== */
body.dark-mode .shop-filters {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color);
}

body.dark-mode .filter-section h3 {
    color: #ffffff !important;
}

body.dark-mode .filter-list a {
    color: var(--text-primary) !important;
}

body.dark-mode .filter-list a:hover,
body.dark-mode .filter-list a.active {
    background: var(--accent-rosa) !important;
    color: #000 !important;
}

body.dark-mode .shop-products {
    background: var(--bg-secondary) !important;
}

body.dark-mode .products-count {
    color: #ffffff !important;
}

body.dark-mode .sort-select {
    background: var(--bg-tertiary) !important;
    color: #ffffff !important;
    border-color: var(--border-color);
}

body.dark-mode .sort-select option {
    background: var(--bg-tertiary);
    color: #ffffff;
}

body.dark-mode .view-link {
    color: var(--accent-rosa);
}

/* ===== Hero y Carousel ===== */
body.dark-mode .hero-carousel {
    background: var(--bg-secondary);
}

body.dark-mode .carousel-caption h2 {
    color: var(--accent-rosa);
}

body.dark-mode .checkout-hero,
body.dark-mode .about-hero,
body.dark-mode .contact-hero {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
}

body.dark-mode .checkout-hero h1,
body.dark-mode .about-hero h1 {
    color: #ffffff !important;
}

body.dark-mode .breadcrumb {
    background: transparent;
}

body.dark-mode .breadcrumb a {
    color: var(--text-secondary);
}

body.dark-mode .breadcrumb a:hover {
    color: var(--accent-rosa);
}

body.dark-mode .breadcrumb span {
    color: var(--text-muted);
}

/* ===== Features ===== */
body.dark-mode .features-new,
body.dark-mode .categories-new,
body.dark-mode .products-new {
    background: var(--bg-secondary);
}

body.dark-mode .feature-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

body.dark-mode .feature-item h3 {
    color: var(--accent-rosa);
}

body.dark-mode .feature-item p {
    color: var(--text-secondary);
}

/* ===== Forms ===== */
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
    background: var(--bg-input);
    border-color: var(--border-color);
    color: var(--text-primary) !important;
}

body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
    border-color: var(--accent-rosa);
    color: var(--text-primary) !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: var(--text-muted);
}

body.dark-mode label {
    color: var(--text-primary) !important;
}

body.dark-mode option {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* ===== Buttons ===== */
body.dark-mode .btn-primary {
    background: linear-gradient(135deg, var(--accent-rosa) 0%, var(--accent-rosa-hover) 100%);
    color: #fff !important;
}

body.dark-mode .btn-primary:hover {
    background: linear-gradient(135deg, var(--accent-rosa-hover) 0%, #C07585 100%);
}

body.dark-mode .btn-secondary {
    border-color: var(--accent-rosa);
    color: var(--accent-rosa) !important;
}

body.dark-mode .btn-secondary:hover {
    background: var(--accent-rosa);
    color: #000 !important;
}

body.dark-mode .action-btn {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

body.dark-mode .action-btn:hover {
    background: var(--accent-rosa);
    color: #000;
    border-color: var(--accent-rosa);
}

body.dark-mode .action-btn-new {
    background: var(--accent-rosa);
    color: #000;
}

body.dark-mode .action-btn-new:hover {
    background: #fff;
}

body.dark-mode .btn-checkout {
    background: linear-gradient(135deg, #E8A1B2, #D48A9A);
    color: #000 !important;
}

/* ===== Cart Sidebar ===== */
body.dark-mode .cart-sidebar {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

body.dark-mode .cart-header {
    border-bottom: 3px solid var(--accent-rosa);
    color: var(--text-primary);
}

body.dark-mode .cart-header h3 {
    color: #ffffff !important;
}

body.dark-mode .cart-items {
    background: var(--bg-primary);
    color: var(--text-primary);
}

body.dark-mode .cart-item {
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

body.dark-mode .cart-item-info h4 {
    color: #ffffff !important;
}

body.dark-mode .cart-item-info p {
    color: var(--text-secondary) !important;
}

body.dark-mode .cart-item-talla {
    color: var(--text-muted) !important;
}

body.dark-mode .cart-item-cantidad {
    color: var(--text-secondary) !important;
}

body.dark-mode .cart-item-price {
    color: var(--text-secondary) !important;
}

body.dark-mode .cart-item-subtotal {
    color: var(--accent-rosa) !important;
}

body.dark-mode .cart-item-remove {
    color: var(--text-muted);
}

body.dark-mode .cart-item-remove:hover {
    color: #ef4444;
}

body.dark-mode .cart-footer {
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border-color);
}

body.dark-mode .cart-total {
    color: var(--text-primary);
}

body.dark-mode .total-amount {
    color: var(--accent-rosa) !important;
}

body.dark-mode .qty-btn {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

body.dark-mode .qty-btn:hover {
    background: var(--accent-rosa);
    color: #000;
}

body.dark-mode .sale-badge-mini {
    background: #ef4444;
    color: #fff;
}

/* ===== Cart Badge (Header) ===== */
body.dark-mode .cart-count-badge {
    background: var(--accent-rosa);
    color: #000;
}

/* ===== Checkout ===== */
body.dark-mode .checkout-form,
body.dark-mode .checkout-form-new {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color);
}

body.dark-mode .checkout-form h2 {
    color: #ffffff !important;
}

body.dark-mode .order-summary,
body.dark-mode .order-summary-new {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color);
}

body.dark-mode .order-summary h2,
body.dark-mode .order-summary h3 {
    color: #ffffff !important;
}

body.dark-mode .order-item {
    border-bottom-color: var(--border-color);
}

body.dark-mode .order-item-name {
    color: #ffffff !important;
}

body.dark-mode .order-item-name .item-talla {
    color: var(--text-muted) !important;
}

body.dark-mode .order-item-price {
    color: var(--text-secondary) !important;
}

body.dark-mode .order-item-price .sale-price {
    color: var(--accent-rosa) !important;
}

body.dark-mode .order-item-price .original-price {
    color: var(--text-muted) !important;
}

body.dark-mode .order-item-price .regular-price {
    color: #ffffff !important;
}

body.dark-mode .order-total-row {
    color: var(--text-primary) !important;
}

body.dark-mode .order-total-row.discount-row {
    color: #22c55e !important;
}

body.dark-mode .order-total-row.grand-total {
    color: var(--accent-rosa) !important;
    border-top-color: var(--border-color);
}

body.dark-mode .payment-method {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
}

body.dark-mode .payment-method strong {
    color: #ffffff !important;
}

body.dark-mode .payment-method p {
    color: var(--text-secondary) !important;
}

body.dark-mode .payment-method:hover,
body.dark-mode .payment-method.active {
    border-color: var(--accent-rosa);
    background: rgba(232, 161, 178, 0.15);
}

body.dark-mode .payment-info-box {
    background: var(--bg-tertiary) !important;
    border-left-color: var(--accent-rosa);
}

body.dark-mode .payment-info-box h4 {
    color: #ffffff !important;
}

body.dark-mode .payment-info-box p {
    color: var(--text-secondary) !important;
}

body.dark-mode #info-contra_entrega {
    border-left-color: #22c55e;
}

body.dark-mode #info-contra_entrega h4 {
    color: #22c55e !important;
}

body.dark-mode #info-transferencia {
    background: var(--bg-tertiary) !important;
    border-left-color: #3b82f6;
}

body.dark-mode #info-transferencia h4 {
    color: #3b82f6 !important;
}

body.dark-mode #info-whatsapp {
    background: var(--bg-tertiary) !important;
    border-left-color: #25D366;
}

body.dark-mode .terminos-box {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-color);
}

body.dark-mode .terminos-box span {
    color: var(--text-primary) !important;
}

body.dark-mode .terminos-box a {
    color: #60a5fa !important;
}

body.dark-mode #terminos {
    accent-color: #22c55e;
}

/* ===== Promociones Aplicadas ===== */
body.dark-mode .promotions-applied {
    background: rgba(255, 193, 7, 0.15);
    border-color: #ffc107;
}

body.dark-mode .promotions-applied h4 {
    color: #ffd54f !important;
}

body.dark-mode .promo-tag {
    background: #ffc107;
    color: #000;
}

body.dark-mode .item-sale-badge {
    background: #ef4444;
    color: #fff;
}

/* ===== Footer ===== */
body.dark-mode .footer-mdl {
    background: var(--bg-primary);
    border-top: 1px solid var(--border-color);
}

body.dark-mode .footer-logo {
    color: var(--text-primary);
}

body.dark-mode .footer-description {
    color: var(--text-secondary);
}

body.dark-mode .footer-emails-section h4 {
    color: var(--accent-rosa);
}

body.dark-mode .emails-list a,
body.dark-mode .footer-info-col ul li a {
    color: var(--text-secondary);
}

body.dark-mode .emails-list a:hover,
body.dark-mode .footer-info-col ul li a:hover {
    color: var(--accent-rosa);
}

body.dark-mode .footer-info-col h5 {
    color: #ffffff !important;
}

body.dark-mode .social-icons-footer a {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

body.dark-mode .social-icons-footer a:hover {
    background: var(--accent-rosa);
    color: #000;
}

body.dark-mode .social-link {
    border-color: var(--border-color);
}

body.dark-mode .social-link:hover {
    background: var(--accent-rosa);
    color: #000;
}

body.dark-mode .payments-content {
    background: var(--bg-tertiary);
}

body.dark-mode .payments-left span,
body.dark-mode .payments-right span {
    color: var(--text-light);
}

body.dark-mode .shipping-info {
    color: var(--text-primary);
}

body.dark-mode .shipping-info i {
    color: var(--accent-rosa);
}

body.dark-mode .footer-copyright p {
    color: var(--text-muted);
}

body.dark-mode .copyright-divider {
    background: var(--border-color);
}

body.dark-mode .slogan-epyme a,
body.dark-mode .slogan-epyme span {
    color: var(--text-secondary) !important;
}

/* ===== Page Headers ===== */
body.dark-mode .page-header {
    background: transparent;
}

body.dark-mode .section-title {
    color: #ffffff !important;
}

body.dark-mode .section-title .highlight {
    color: var(--accent-rosa) !important;
}

body.dark-mode .section-subtitle {
    color: var(--accent-rosa) !important;
}

/* ===== Category Cards ===== */
body.dark-mode .category-card-new {
    border-color: var(--border-color);
    background: var(--bg-card);
}

body.dark-mode .mv-card,
body.dark-mode .valor-card {
    background: var(--bg-card);
    color: var(--text-primary);
}

body.dark-mode .mv-card h3,
body.dark-mode .valor-card h3 {
    color: var(--accent-rosa);
}

body.dark-mode .mv-card p,
body.dark-mode .valor-card p {
    color: var(--text-secondary);
}

body.dark-mode .contact-info-card,
body.dark-mode .contact-form-card {
    background: var(--bg-card);
    color: var(--text-primary);
}

body.dark-mode .contact-info-card h2,
body.dark-mode .contact-form-card h2 {
    color: #ffffff !important;
}

body.dark-mode .info-item {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* ===== Newsletter ===== */
body.dark-mode .newsletter-content {
    background: var(--bg-tertiary);
}

body.dark-mode .newsletter-input {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* ===== Tags ===== */
body.dark-mode .tag {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

body.dark-mode .tag:hover {
    background: var(--accent-rosa);
    color: #000;
}

body.dark-mode .size-tag {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

/* ===== Modal ===== */
body.dark-mode .modal-content {
    background: #1a1a1a;
    border: 1px solid var(--border-color);
}

body.dark-mode .modal-header {
    border-bottom-color: var(--border-color);
}

body.dark-mode .modal-title {
    color: #ffffff !important;
}

body.dark-mode .modal-body {
    color: var(--text-primary);
}

/* ===== Notifications ===== */
body.dark-mode .notification {
    background: var(--accent-rosa);
    color: #000;
}

/* ===== Mobile Menu ===== */
body.dark-mode .mobile-menu {
    background: var(--bg-secondary);
}

body.dark-mode .mobile-nav-menu .header-nav-link {
    color: var(--text-primary);
}

body.dark-mode .mobile-nav-menu .header-nav-link:hover {
    color: var(--accent-rosa);
}

/* ===== Misc ===== */
body.dark-mode .spinner {
    border-color: var(--border-color);
    border-top-color: var(--accent-rosa);
}

body.dark-mode .divider {
    background: var(--border-color);
}

body.dark-mode .image-placeholder {
    background: var(--bg-tertiary);
}

body.dark-mode .care-recommendation {
    background: var(--bg-tertiary);
    border-left-color: var(--accent-rosa);
    color: var(--text-secondary);
}

body.dark-mode .important-note {
    background: var(--bg-tertiary);
    border-left-color: var(--accent-rosa);
    color: var(--text-secondary);
}

body.dark-mode .policy-card {
    background: #1a1a1a;
    border-color: var(--border-color);
}

body.dark-mode .policy-card h3 {
    color: #ffffff !important;
}

body.dark-mode .policy-card p {
    color: var(--text-secondary);
}

body.dark-mode small,
body.dark-mode .text-muted {
    color: var(--text-muted) !important;
}

body.dark-mode .text-light {
    color: var(--text-light) !important;
}

/* ===== Thank You Page ===== */
body.dark-mode .thank-content h1 {
    color: #ffffff !important;
}

body.dark-mode .thank-content .message {
    color: var(--text-secondary) !important;
}

body.dark-mode .order-info {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color);
}

body.dark-mode .order-info h3 {
    color: #ffffff !important;
}

body.dark-mode .order-info .detail-row {
    border-bottom-color: var(--border-color);
}

body.dark-mode .order-info .detail-row span:first-child {
    color: var(--text-muted);
}

body.dark-mode .order-info .detail-row strong {
    color: var(--accent-rosa) !important;
}

body.dark-mode .status-paid {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

body.dark-mode .status-pending {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

/* ===== Scrollbar ===== */
body.dark-mode ::-webkit-scrollbar {
    width: 10px;
}

body.dark-mode ::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: 5px;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: var(--accent-rosa);
}

/* ===== Selection ===== */
body.dark-mode ::selection {
    background: var(--accent-rosa);
    color: #000;
}

/* ===== Transition for smooth mode switch ===== */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

body * {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}