/* ================================================================ NsStore.mx — Sistema de Temas Visual Completo Archivo: themes/ap_office/css/local/nsstore_tema.css CÓMO CAMBIAR DE TEMA: En themes/ap_office/header.tpl busca el o y agrega: Tema Azul (P1): Tema Verde (P2): Para probar: abre la consola del navegador (F12) y escribe: document.body.className = 'tema-azul' ← cambia a azul document.body.className = 'tema-verde' ← cambia a verde ================================================================ */ /* ================================================================ VARIABLES DE TEMA — el único lugar donde cambias colores ================================================================ */ /* ── TEMA AZUL (P1 — Slate Navy) ──────────────────────────────── */ body.tema-azul { /* Fondos */ --bg-page: #f4f6fb; --bg-surface: #ffffff; --bg-surface2: #eef1f8; --bg-header: #1a2a4a; /* azul marino oscuro — antes era #1e1b4b muy intenso */ --bg-topbar: #142038; /* más oscuro que header para jerarquía */ --bg-nav: #1e3a6e; /* azul medio — reemplaza el chillón anterior */ --bg-nav-hover: #2a4f8f; --bg-sidebar: #ffffff; --bg-sidebar2: #f4f6fb; --bg-footer: #1a2a4a; --bg-footer2: #0f1a2e; --bg-card: #ffffff; --bg-input: #f4f6fb; /* Acentos */ --accent: #2563eb; /* azul botones — sólido, no chillón */ --accent-hover: #1d4ed8; --accent-light: #dbeafe; --accent-2: #0ea5e9; /* azul secundario para badges */ /* Textos */ --text-head: #0f172a; --text-body: #1e293b; --text-muted: #64748b; --text-xmuted: #94a3b8; --text-on-dark: #e2e8f0; --text-on-dark2: rgba(226,232,240,.55); --text-link: #2563eb; --text-link-hover:#1d4ed8; --text-price: #0f172a; --text-nav: rgba(226,232,240,.8); --text-nav-act: #ffffff; /* Bordes */ --border: #e2e8f0; --border-accent: #bfdbfe; /* Precio mayoreo */ --mayo-bg: #dbeafe; --mayo-color: #1d4ed8; /* Badge descuento */ --badge-sale-bg: #dc2626; --badge-new-bg: #0ea5e9; } /* ── TEMA VERDE (P2 — Commerce Pro) ───────────────────────────── */ body.tema-verde { --bg-page: #f0faf8; --bg-surface: #ffffff; --bg-surface2: #ecfdf5; --bg-header: #064e3b; --bg-topbar: #022c22; --bg-nav: #059669; --bg-nav-hover: #047857; --bg-sidebar: #ffffff; --bg-sidebar2: #f0fdf4; --bg-footer: #064e3b; --bg-footer2: #022c22; --bg-card: #ffffff; --bg-input: #f0fdf4; --accent: #059669; --accent-hover: #047857; --accent-light: #d1fae5; --accent-2: #0d9488; --text-head: #064e3b; --text-body: #1e3a34; --text-muted: #6b7280; --text-xmuted: #9ca3af; --text-on-dark: #d1fae5; --text-on-dark2: rgba(209,250,229,.55); --text-link: #059669; --text-link-hover:#047857; --text-price: #064e3b; --text-nav: rgba(209,250,229,.85); --text-nav-act: #ffffff; --border: #d1fae5; --border-accent: #a7f3d0; --mayo-bg: #d1fae5; --mayo-color: #047857; --badge-sale-bg: #dc2626; --badge-new-bg: #0d9488; } /* ================================================================ DARK MODE — funciona con AMBOS temas Se activa con: body.tema-azul.dark-mode o body.tema-verde.dark-mode ================================================================ */ body.tema-azul.dark-mode { --bg-page: #091218; --bg-surface: #0d1a28; --bg-surface2: #0f2035; --bg-header: #0d1a28; --bg-topbar: #050c14; --bg-nav: #0d1a28; --bg-nav-hover: #142236; --bg-sidebar: #0d1a28; --bg-sidebar2: #091218; --bg-footer: #0a1520; --bg-footer2: #050c14; --bg-card: #0d1a28; --bg-input: #0f2035; --accent: #3b82f6; --accent-hover: #2563eb; --accent-light: rgba(59,130,246,.15); --accent-2: #0ea5e9; --text-head: #e2eef8; --text-body: #c8d6e5; --text-muted: #4a6070; --text-xmuted: #2a3d50; --text-on-dark: #c8d6e5; --text-on-dark2: rgba(200,214,229,.4); --text-link: #60a5fa; --text-link-hover:#93c5fd; --text-price: #60a5fa; --text-nav: rgba(200,214,229,.45); --text-nav-act: #60a5fa; --border: rgba(255,255,255,.06); --border-accent: rgba(59,130,246,.2); --mayo-bg: rgba(59,130,246,.12); --mayo-color: #60a5fa; --badge-sale-bg: #dc2626; --badge-new-bg: #0ea5e9; } body.tema-verde.dark-mode { --bg-page: #071210; --bg-surface: #0d1a18; --bg-surface2: #0f2020; --bg-header: #0d1a18; --bg-topbar: #050e0c; --bg-nav: #0d1a18; --bg-nav-hover: #142420; --bg-sidebar: #0d1a18; --bg-sidebar2: #071210; --bg-footer: #0a1512; --bg-footer2: #050e0c; --bg-card: #0d1a18; --bg-input: #0f2020; --accent: #10b981; --accent-hover: #059669; --accent-light: rgba(16,185,129,.12); --accent-2: #0d9488; --text-head: #e0f2ec; --text-body: #c0d8d0; --text-muted: #2a5040; --text-xmuted: #1a3028; --text-on-dark: #c0d8d0; --text-on-dark2: rgba(192,216,208,.4); --text-link: #34d399; --text-link-hover:#6ee7b7; --text-price: #10b981; --text-nav: rgba(192,216,208,.4); --text-nav-act: #10b981; --border: rgba(16,185,129,.08); --border-accent: rgba(16,185,129,.2); --mayo-bg: rgba(16,185,129,.1); --mayo-color: #10b981; --badge-sale-bg: #dc2626; --badge-new-bg: #0d9488; } /* ================================================================ ESTILOS BASE — usan variables, funcionan en ambos temas ================================================================ */ body.tema-azul, body.tema-verde { font-family: 'Plus Jakarta Sans', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 14px; line-height: 1.6; color: var(--text-body); background-color: var(--bg-page); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── TOPBAR ─────────────────────────────────────────────────── */ body.tema-azul #topbar, body.tema-verde #topbar { background-color: var(--bg-topbar) !important; border-bottom: 1px solid rgba(255,255,255,.06) !important; } body.tema-azul #topbar *, body.tema-verde #topbar * { color: var(--text-on-dark2) !important; } body.tema-azul #topbar a, body.tema-verde #topbar a { color: var(--text-on-dark2) !important; transition: color .15s; } body.tema-azul #topbar a:hover, body.tema-verde #topbar a:hover { color: var(--text-on-dark) !important; } /* ── HEADER PRINCIPAL ───────────────────────────────────────── */ body.tema-azul #header, body.tema-azul #header-main, body.tema-verde #header, body.tema-verde #header-main { background-color: var(--bg-header) !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; } body.tema-azul #header a, body.tema-verde #header a { color: var(--text-on-dark) !important; } body.tema-azul #header a:hover, body.tema-verde #header a:hover { color: #fff !important; } /* Logo */ body.tema-azul .logo a, body.tema-verde .logo a { color: #fff !important; } /* Barra de búsqueda */ body.tema-azul #searchbox .btn, body.tema-verde #searchbox .btn, body.tema-azul #search_query_top + button, body.tema-verde #search_query_top + button { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; } body.tema-azul #search_query_top, body.tema-verde #search_query_top { background: rgba(255,255,255,.1) !important; border-color: rgba(255,255,255,.15) !important; color: #fff !important; } body.tema-azul #search_query_top::placeholder, body.tema-verde #search_query_top::placeholder { color: rgba(255,255,255,.35) !important; } /* Carrito en header */ body.tema-azul #header .shopping_cart a, body.tema-verde #header .shopping_cart a { color: var(--text-on-dark) !important; } /* ── MENÚ DE NAVEGACIÓN SUPERIOR ───────────────────────────── */ body.tema-azul #block_top_menu, body.tema-verde #block_top_menu, body.tema-azul #leo-megamenu, body.tema-verde #leo-megamenu { background-color: var(--bg-nav) !important; border: none !important; } body.tema-azul #block_top_menu a, body.tema-verde #block_top_menu a, body.tema-azul #block_top_menu .sf-menu > li > a, body.tema-verde #block_top_menu .sf-menu > li > a { color: var(--text-nav) !important; transition: color .15s, background .15s; } body.tema-azul #block_top_menu .sf-menu > li > a:hover, body.tema-verde #block_top_menu .sf-menu > li > a:hover, body.tema-azul #block_top_menu .sf-menu > li.active > a, body.tema-verde #block_top_menu .sf-menu > li.active > a { color: var(--text-nav-act) !important; background-color: var(--bg-nav-hover) !important; } /* Submenús */ body.tema-azul #block_top_menu .sf-menu ul, body.tema-verde #block_top_menu .sf-menu ul { background-color: var(--bg-surface) !important; border: 1px solid var(--border) !important; box-shadow: 0 8px 24px rgba(0,0,0,.12) !important; } body.tema-azul #block_top_menu .sf-menu ul a, body.tema-verde #block_top_menu .sf-menu ul a { color: var(--text-body) !important; } body.tema-azul #block_top_menu .sf-menu ul a:hover, body.tema-verde #block_top_menu .sf-menu ul a:hover { color: var(--accent) !important; background-color: var(--accent-light) !important; } /* ── BREADCRUMB ─────────────────────────────────────────────── */ body.tema-azul #breadcrumb, body.tema-verde #breadcrumb { background-color: var(--bg-surface2) !important; border-bottom: 1px solid var(--border) !important; } body.tema-azul #breadcrumb a, body.tema-verde #breadcrumb a { color: var(--text-link) !important; font-weight: 500; } body.tema-azul #breadcrumb a:hover, body.tema-verde #breadcrumb a:hover { color: var(--text-link-hover) !important; text-decoration: underline; } body.tema-azul #breadcrumb span, body.tema-verde #breadcrumb span { color: var(--text-muted) !important; } /* ── COLUMNAS Y PÁGINA ──────────────────────────────────────── */ body.tema-azul #columns, body.tema-verde #columns, body.tema-azul #center_column, body.tema-verde #center_column { background-color: var(--bg-page) !important; } /* ── SIDEBAR IZQUIERDO ──────────────────────────────────────── */ body.tema-azul #left_column, body.tema-verde #left_column { background-color: var(--bg-sidebar) !important; border-right: 1px solid var(--border) !important; } body.tema-azul #left_column .block, body.tema-verde #left_column .block { border-bottom: 1px solid var(--border) !important; background: var(--bg-sidebar) !important; } body.tema-azul #left_column .title_block, body.tema-verde #left_column .title_block, body.tema-azul #left_column h4.title_block, body.tema-verde #left_column h4.title_block { background-color: var(--bg-sidebar2) !important; color: var(--text-muted) !important; border-bottom: 1px solid var(--border) !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; } body.tema-azul #left_column .block_content, body.tema-verde #left_column .block_content { background-color: var(--bg-sidebar) !important; } body.tema-azul #left_column a, body.tema-verde #left_column a { color: var(--text-body) !important; transition: color .12s; } body.tema-azul #left_column a:hover, body.tema-verde #left_column a:hover { color: var(--accent) !important; } body.tema-azul #left_column li, body.tema-verde #left_column li { border-bottom: 1px solid var(--border) !important; padding: 5px 0 !important; font-size: 13px !important; } /* ── HEADINGS ───────────────────────────────────────────────── */ body.tema-azul h1, body.tema-azul h2, body.tema-azul h3, body.tema-verde h1, body.tema-verde h2, body.tema-verde h3 { color: var(--text-head) !important; font-weight: 700 !important; letter-spacing: -0.3px; } body.tema-azul h1, body.tema-verde h1 { font-size: clamp(20px, 3vw, 28px) !important; } body.tema-azul h2, body.tema-verde h2 { font-size: clamp(16px, 2.5vw, 22px) !important; } body.tema-azul h3, body.tema-verde h3 { font-size: clamp(14px, 2vw, 18px) !important; } /* ── TEXTO GENERAL ──────────────────────────────────────────── */ body.tema-azul p, body.tema-azul li, body.tema-azul span, body.tema-azul td, body.tema-verde p, body.tema-verde li, body.tema-verde span, body.tema-verde td { color: var(--text-body); } /* ── LINKS ──────────────────────────────────────────────────── */ body.tema-azul a, body.tema-verde a { color: var(--text-link) !important; text-decoration: none; transition: color .15s; } body.tema-azul a:hover, body.tema-verde a:hover { color: var(--text-link-hover) !important; } /* ── PRODUCTOS — NOMBRE Y PRECIO ────────────────────────────── */ body.tema-azul .product-name a, body.tema-verde .product-name a, body.tema-azul h3.product-name a, body.tema-verde h3.product-name a { color: var(--text-head) !important; font-weight: 600 !important; font-size: 13px !important; line-height: 1.4 !important; } body.tema-azul .product-name a:hover, body.tema-verde .product-name a:hover { color: var(--accent) !important; } body.tema-azul .price, body.tema-verde .price, body.tema-azul span.price, body.tema-verde span.price, body.tema-azul .product-price, body.tema-verde .product-price { color: var(--text-price) !important; font-weight: 700 !important; font-size: 17px !important; } body.tema-azul .price-old, body.tema-verde .price-old { color: var(--text-xmuted) !important; text-decoration: line-through !important; font-size: 12px !important; } body.tema-azul .product-desc, body.tema-verde .product-desc { color: var(--text-muted) !important; font-size: 12px !important; } /* ── TARJETAS DE PRODUCTO ───────────────────────────────────── */ body.tema-azul .ajax_block_product, body.tema-verde .ajax_block_product, body.tema-azul .product-container, body.tema-verde .product-container { background: var(--bg-card) !important; border: 1px solid var(--border) !important; border-radius: 10px !important; transition: border-color .18s, box-shadow .18s, transform .18s !important; overflow: hidden; } body.tema-azul .ajax_block_product:hover, body.tema-verde .ajax_block_product:hover, body.tema-azul .product-container:hover, body.tema-verde .product-container:hover { border-color: var(--border-accent) !important; box-shadow: 0 6px 24px rgba(0,0,0,.08) !important; transform: translateY(-2px) !important; } /* ── BOTONES ────────────────────────────────────────────────── */ body.tema-azul .button, body.tema-verde .button, body.tema-azul .btn, body.tema-verde .btn, body.tema-azul button[type="submit"], body.tema-verde button[type="submit"], body.tema-azul .ajax_add_to_cart_button, body.tema-verde .ajax_add_to_cart_button { background: var(--accent) !important; border-color: var(--accent) !important; color: #ffffff !important; border-radius: 7px !important; font-weight: 600 !important; font-size: 12px !important; transition: background .15s, transform .1s !important; } body.tema-azul .button:hover, body.tema-verde .button:hover, body.tema-azul .ajax_add_to_cart_button:hover, body.tema-verde .ajax_add_to_cart_button:hover { background: var(--accent-hover) !important; transform: translateY(-1px) !important; } /* ── FORMULARIOS ────────────────────────────────────────────── */ body.tema-azul input, body.tema-verde input, body.tema-azul textarea, body.tema-verde textarea, body.tema-azul select, body.tema-verde select, body.tema-azul .form-control, body.tema-verde .form-control { background-color: var(--bg-input) !important; border: 1px solid var(--border) !important; color: var(--text-body) !important; border-radius: 6px !important; font-size: 13px !important; } body.tema-azul input:focus, body.tema-verde input:focus, body.tema-azul textarea:focus, body.tema-verde textarea:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-light) !important; outline: none !important; } body.tema-azul label, body.tema-verde label { color: var(--text-body) !important; font-weight: 500 !important; } /* ── FOOTER ─────────────────────────────────────────────────── */ body.tema-azul #footer, body.tema-verde #footer { background-color: var(--bg-footer) !important; border-top: 3px solid var(--accent) !important; } body.tema-azul #footer *, body.tema-verde #footer * { color: var(--text-on-dark2) !important; } body.tema-azul #footer a, body.tema-verde #footer a { color: var(--text-on-dark2) !important; transition: color .12s; } body.tema-azul #footer a:hover, body.tema-verde #footer a:hover { color: var(--text-on-dark) !important; } body.tema-azul #footer .title_block, body.tema-verde #footer .title_block, body.tema-azul #footer h4, body.tema-verde #footer h4 { color: var(--text-on-dark) !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; border-bottom: 1px solid rgba(255,255,255,.1) !important; padding-bottom: 8px !important; margin-bottom: 10px !important; } body.tema-azul .footer-bottom, body.tema-verde .footer-bottom, body.tema-azul #footer_bottom, body.tema-verde #footer_bottom { background-color: var(--bg-footer2) !important; color: var(--text-on-dark2) !important; font-size: 11px !important; } /* ── TABLAS ─────────────────────────────────────────────────── */ body.tema-azul .table > tbody > tr > td, body.tema-verde .table > tbody > tr > td, body.tema-azul .table > thead > tr > th, body.tema-verde .table > thead > tr > th { color: var(--text-body) !important; border-color: var(--border) !important; } body.tema-azul .table-striped > tbody > tr:nth-of-type(odd) > td, body.tema-verde .table-striped > tbody > tr:nth-of-type(odd) > td { background-color: var(--bg-surface2) !important; } /* ── ALERTAS ─────────────────────────────────────────────────── */ body.tema-azul .alert-success, body.tema-verde .alert-success { background: #ecfdf5 !important; color: #065f46 !important; border-color: #a7f3d0 !important; } body.tema-azul .alert-danger, body.tema-verde .alert-danger { background: #fef2f2 !important; color: #991b1b !important; border-color: #fecaca !important; } body.tema-azul .alert-info, body.tema-verde .alert-info { background: #eff6ff !important; color: #1e40af !important; border-color: #bfdbfe !important; } body.tema-azul .alert-warning, body.tema-verde .alert-warning { background: #fffbeb !important; color: #92400e !important; border-color: #fde68a !important; } /* ── DARK MODE — aplica sobre cualquier tema ─────────────────── */ body.dark-mode #header, body.dark-mode #header-main, body.dark-mode #topbar, body.dark-mode #block_top_menu, body.dark-mode #leo-megamenu, body.dark-mode #columns, body.dark-mode #center_column, body.dark-mode #left_column, body.dark-mode #left_column .block, body.dark-mode #left_column .block_content, body.dark-mode .ajax_block_product, body.dark-mode .product-container, body.dark-mode #footer, body.dark-mode .footer-bottom { background-color: var(--bg-surface) !important; border-color: var(--border) !important; } body.dark-mode { background: var(--bg-page) !important; } body.dark-mode #columns, body.dark-mode #center_column { background: var(--bg-page) !important; } body.dark-mode body, body.dark-mode p, body.dark-mode span, body.dark-mode li, body.dark-mode td, body.dark-mode div { color: var(--text-body); } body.dark-mode img:not([src*="logo"]) { filter: brightness(.88) contrast(1.05); transition: filter .3s; } body.dark-mode img:not([src*="logo"]):hover { filter: brightness(1) contrast(1); } /* ================================================================ RESPONSIVE SYSTEM — mobile-first, todos los dispositivos ================================================================ */ /* ── BASE MOBILE (< 480px) ──────────────────────────────────── */ @media (max-width: 479px) { body.tema-azul, body.tema-verde { font-size: 13px; } /* Header compacto */ body.tema-azul #header-main, body.tema-verde #header-main { padding: 10px 12px !important; flex-wrap: wrap !important; gap: 8px !important; } /* Logo más pequeño en mobile */ body.tema-azul .logo a img, body.tema-verde .logo a img { max-height: 36px !important; width: auto !important; } /* Barra de búsqueda full width en mobile */ body.tema-azul #searchbox, body.tema-verde #searchbox { width: 100% !important; order: 3; } /* Sidebar en mobile: ocupa 100% y va debajo */ body.tema-azul #left_column, body.tema-verde #left_column { width: 100% !important; float: none !important; border-right: none !important; border-top: 2px solid var(--border) !important; order: 2; } body.tema-azul #center_column, body.tema-verde #center_column { width: 100% !important; float: none !important; order: 1; } /* Productos en 1 columna en mobile pequeño */ body.tema-azul .product_list.grid .ajax_block_product, body.tema-verde .product_list.grid .ajax_block_product { width: 100% !important; margin: 0 0 12px 0 !important; } /* Título de página más pequeño */ body.tema-azul #center_column h1, body.tema-verde #center_column h1 { font-size: 18px !important; } /* Menú top oculto en móvil si hay hamburger */ body.tema-azul #block_top_menu .sf-menu, body.tema-verde #block_top_menu .sf-menu { flex-direction: column !important; } } /* ── TABLET PEQUEÑO (480px – 767px) ─────────────────────────── */ @media (min-width: 480px) and (max-width: 767px) { /* Productos en 2 columnas */ body.tema-azul .product_list.grid .ajax_block_product, body.tema-verde .product_list.grid .ajax_block_product { width: calc(50% - 8px) !important; margin: 0 4px 12px !important; float: left !important; } body.tema-azul #left_column, body.tema-verde #left_column { width: 100% !important; float: none !important; border-right: none !important; border-top: 2px solid var(--border) !important; } body.tema-azul #center_column, body.tema-verde #center_column { width: 100% !important; float: none !important; } } /* ── TABLET (768px – 1023px) ─────────────────────────────────── */ @media (min-width: 768px) and (max-width: 1023px) { /* Sidebar visible, ancho fijo */ body.tema-azul #left_column, body.tema-verde #left_column { display: block !important; visibility: visible !important; width: 220px !important; min-width: 220px !important; float: left !important; } body.tema-azul #center_column, body.tema-verde #center_column { width: calc(100% - 236px) !important; float: left !important; } /* Productos en 2 columnas en tablet */ body.tema-azul .product_list.grid .ajax_block_product, body.tema-verde .product_list.grid .ajax_block_product { width: calc(50% - 10px) !important; margin: 0 5px 14px !important; float: left !important; } /* Acordeón del sidebar en tablet */ body.tema-azul #left_column .block_content, body.tema-verde #left_column .block_content { display: block !important; height: auto !important; overflow: visible !important; } } /* ── DESKTOP (1024px – 1279px) ───────────────────────────────── */ @media (min-width: 1024px) and (max-width: 1279px) { body.tema-azul #left_column, body.tema-verde #left_column { width: 240px !important; min-width: 240px !important; } body.tema-azul #center_column, body.tema-verde #center_column { width: calc(100% - 256px) !important; } /* Productos en 3 columnas */ body.tema-azul .product_list.grid .ajax_block_product, body.tema-verde .product_list.grid .ajax_block_product { width: calc(33.333% - 10px) !important; margin: 0 5px 14px !important; float: left !important; } } /* ── DESKTOP WIDE (1280px+) ──────────────────────────────────── */ @media (min-width: 1280px) { body.tema-azul #center_column, body.tema-verde #center_column { width: calc(100% - 256px) !important; } /* Productos en 4 columnas en pantallas grandes */ body.tema-azul .product_list.grid .ajax_block_product, body.tema-verde .product_list.grid .ajax_block_product { width: calc(25% - 10px) !important; margin: 0 5px 14px !important; float: left !important; } } /* ── SIDEBAR ACCORDION EN MOBILE ─────────────────────────────── */ @media (max-width: 767px) { body.tema-azul #left_column .block, body.tema-verde #left_column .block { overflow: hidden; } body.tema-azul #left_column .title_block, body.tema-verde #left_column .title_block { cursor: pointer !important; padding: 13px 16px !important; display: flex !important; justify-content: space-between !important; align-items: center !important; } body.tema-azul #left_column .title_block::after, body.tema-verde #left_column .title_block::after { content: '+' !important; font-size: 18px !important; font-weight: 300 !important; color: var(--accent) !important; transition: transform .2s !important; } body.tema-azul #left_column .title_block.active::after, body.tema-verde #left_column .title_block.active::after { transform: rotate(45deg) !important; } /* Ordenar columnas: contenido primero, sidebar después */ body.tema-azul #columns .row, body.tema-verde #columns .row { display: flex !important; flex-direction: column !important; } body.tema-azul #center_column, body.tema-verde #center_column { order: 1 !important; } body.tema-azul #left_column, body.tema-verde #left_column { order: 2 !important; } } /* ── MENÚ MOBILE ─────────────────────────────────────────────── */ @media (max-width: 767px) { body.tema-azul #block_top_menu, body.tema-verde #block_top_menu { overflow: visible !important; } body.tema-azul #block_top_menu .sf-menu > li, body.tema-verde #block_top_menu .sf-menu > li { display: block !important; width: 100% !important; border-bottom: 1px solid rgba(255,255,255,.06) !important; } body.tema-azul #block_top_menu .sf-menu > li > a, body.tema-verde #block_top_menu .sf-menu > li > a { display: block !important; padding: 12px 16px !important; font-size: 14px !important; } /* Submenú mobile estático */ body.tema-azul #block_top_menu .sf-menu li ul, body.tema-verde #block_top_menu .sf-menu li ul { position: static !important; display: none !important; width: 100% !important; box-shadow: none !important; border: none !important; padding-left: 16px !important; background: rgba(0,0,0,.12) !important; } body.tema-azul #block_top_menu .sf-menu li.sfHover > ul, body.tema-verde #block_top_menu .sf-menu li.sfHover > ul { display: block !important; } } /* ── TIPOGRAFÍA FLUIDA ───────────────────────────────────────── */ body.tema-azul .product-name, body.tema-verde .product-name, body.tema-azul h3.product-name, body.tema-verde h3.product-name { font-size: clamp(12px, 1.5vw, 14px) !important; font-weight: 600 !important; line-height: 1.4 !important; } body.tema-azul .price, body.tema-verde .price, body.tema-azul span.price, body.tema-verde span.price { font-size: clamp(15px, 2vw, 18px) !important; } /* ── BOTÓN FLOTANTE DE TEMA ──────────────────────────────────── */ #nsstore-theme-switcher { position: fixed; bottom: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; } #nsstore-theme-switcher button { border: none; border-radius: 20px; padding: 8px 16px; font-size: 12px; font-weight: 600; cursor: pointer; box-shadow: 0 2px 12px rgba(0,0,0,.25); transition: all .2s; white-space: nowrap; } #nsstore-btn-darkmode { background: #1e293b; color: #94a3b8; border: 1px solid #334155 !important; } #nsstore-btn-darkmode:hover { background: #0f172a; color: #e2e8f0; } body.dark-mode #nsstore-btn-darkmode { background: #e2e8f0; color: #1e293b; } /* ================================================================ FIX: Fondo lateral oscuro en desktop y wrapper principal ================================================================ */ body.tema-azul #page, body.tema-verde #page, body.tema-azul #wrapper, body.tema-verde #wrapper, body.tema-azul .container, body.tema-verde .container { background-color: var(--bg-surface) !important; } /* El body background solo aplica fuera del contenedor */ body.tema-azul, body.tema-verde { background-color: var(--bg-page) !important; } /* ================================================================ FIX: Header blanco original - sobreescribir con mayor especificidad ================================================================ */ body.tema-azul #header .header-container, body.tema-verde #header .header-container, body.tema-azul #header > .container, body.tema-verde #header > .container, body.tema-azul #header .nav-header, body.tema-verde #header .nav-header, body.tema-azul .header-container, body.tema-verde .header-container { background-color: var(--bg-header) !important; } /* Fondo blanco del header del tema original */ body.tema-azul #header_logo, body.tema-verde #header_logo, body.tema-azul .header-logo, body.tema-verde .header-logo { background-color: var(--bg-header) !important; } /* Topbar links */ body.tema-azul #header_top, body.tema-verde #header_top { background-color: var(--bg-topbar) !important; } /* ================================================================ FIX: Conservar el header blanco con logo (zona central del header) Solo colorear el fondo exterior del header ================================================================ */ body.tema-azul #header, body.tema-verde #header { background-color: var(--bg-header) !important; } /* La zona del logo puede conservarse blanca para respetar el logo */ body.tema-azul #header .logo-container, body.tema-verde #header .logo-container { background-color: var(--bg-surface) !important; } /* ================================================================ FIX MOBILE: Asegurar que el logo se vea bien ================================================================ */ @media (max-width: 767px) { body.tema-azul #header, body.tema-verde #header, body.tema-azul #header-main, body.tema-verde #header-main { background-color: var(--bg-header) !important; padding: 0 !important; } /* La caja blanca del logo en mobile */ body.tema-azul #header .logo, body.tema-verde #header .logo, body.tema-azul #header .logo a, body.tema-verde #header .logo a { background: transparent !important; } } /* ================================================================ FIX DEFINITIVO - Selectores exactos del HTML real de NsStore Basado en inspección del DOM en vivo ================================================================ */ /* Estructura real: