.dark-mode body {
  background-color: #0f172a !important;
  color: #f8fafc !important;
  transition: background 0.3s, color 0.3s;
}

/* 🔹 Paneles y tarjetas */
.dark-mode .tradeando-card,
.dark-mode .tradeando-dashboard {
  background-color: #1e293b !important;
  color: #f8fafc !important;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.05) !important;
}

/* 🔹 Textos generales dentro del panel */
.dark-mode .tradeando-dashboard h2,
.dark-mode .tradeando-dashboard h3,
.dark-mode .tradeando-dashboard p,
.dark-mode .tradeando-dashboard td,
.dark-mode .tradeando-dashboard th {
  color: #f8fafc !important;
}

/* 🔹 Bordes de tablas */
.dark-mode table,
.dark-mode th,
.dark-mode td {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* 🔹 Links */
.dark-mode a {
  color: #93c5fd !important;
}
.dark-mode a:hover {
  color: #60a5fa !important;
}

/* 🔹 Gráficos y etiquetas */
.dark-mode canvas {
  filter: brightness(1.1);
}

/* ==============================
   AJUSTES VISUALES GLOBALES
   ============================== */

/* --- 1️⃣ Texto claro en el panel de vendedor --- */
.dark-mode .tradeando-dashboard td,
.dark-mode .tradeando-dashboard th,
.dark-mode .tradeando-dashboard p,
.dark-mode .tradeando-dashboard h3 {
  color: #f8fafc !important;
}

/* Asegurar que el mensaje "Cargando datos..." sea visible */
.dark-mode #tradeandoTopSales td {
  color: #f8fafc !important;
}

/* --- 2️⃣ Tabla "Mis productos" --- */
.dark-mode table,
.dark-mode .woocommerce table,
.dark-mode .tradeando-products-list {
  background-color: #1e293b !important;
  color: #f8fafc !important;
  border-color: rgba(255,255,255,0.1) !important;
}

/* Encabezados de tabla */
.dark-mode th {
  background-color: #6d28d9 !important;
  color: #fff !important;
}

/* Celdas con fondo blanco (corrige nombres invisibles) */
.dark-mode td {
  background-color: #1e293b !important;
  color: #f8fafc !important;
}

/* --- 3️⃣ Página de producto (detalle) --- */
.dark-mode .woocommerce div.product,
.dark-mode .woocommerce table.shop_attributes,
.dark-mode .woocommerce-tabs,
.dark-mode .woocommerce-Tabs-panel {
  background-color: #0f172a !important;
  color: #f8fafc !important;
  border-color: #0f172a !important;
}

/* Texto de campos específicos (precio, etiquetas, vendedores, etc.) */
.dark-mode .woocommerce div.product p.price,
.dark-mode .woocommerce div.product span.price,
.dark-mode .woocommerce div.product .stock,
.dark-mode .woocommerce .related h2,
.dark-mode .woocommerce .product_meta {
  color: #f8fafc !important;
}

/* --- 4️⃣ Productos relacionados --- */
.dark-mode .related.products h2,
.dark-mode .related.products .woocommerce-loop-product__title {
  color: #f8fafc !important;
}
.dark-mode .related.products .price {
  color: #93c5fd !important;
}

/* --- 5️⃣ Botones dentro de tarjetas --- */
.dark-mode .button,
.dark-mode button,
.dark-mode .btn {
  color: #fff !important;
  background-color: #334155 !important;
  border-color: #475569 !important;
}
.dark-mode .button:hover,
.dark-mode button:hover {
  background-color: #475569 !important;
}

/* --- 6️⃣ Tablas o cajas que permanecían blancas --- */
.dark-mode .woocommerce table.shop_table,
.dark-mode .woocommerce-cart-form,
.dark-mode .woocommerce-checkout-review-order-table {
  background-color: #1e293b !important;
  color: #f8fafc !important;
  border-color: rgba(255,255,255,0.1) !important;
}
/* ==========================================
   🌙 MODO OSCURO GLOBAL UNIFICADO - TRADEANDO
   ========================================== */

/* Fondo principal uniforme (mismo tono para todo) */
.dark-mode body,
.dark-mode #page,
.dark-mode .site,
.dark-mode .ast-container,
.dark-mode .ast-site-content,
.dark-mode .site-content,
.dark-mode .woocommerce div.product,
.dark-mode .woocommerce-page {
  background-color: #0f172a !important;
  color: #fcf8f8 !important;
  transition: background 0.3s, color 0.3s;
}

/* Cabecera (header) */
.dark-mode .main-header-bar,
.dark-mode .ast-primary-header-bar,
.dark-mode .ast-builder-layout-element.site-header {
  background-color: #0f172a !important;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* Menú superior (links del header) */
.dark-mode .ast-builder-menu .menu-item > a,
.dark-mode .ast-header-break-point .ast-builder-menu .menu-item > a {
  color: #f8fafc !important;
}
.dark-mode .ast-builder-menu .menu-item > a:hover {
  color: #93c5fd !important;
}

/* Logo */
.dark-mode .site-title a {
  color: #f8fafc !important;
}

/* Footer */
.dark-mode footer,
.dark-mode .site-footer {
  background-color: #0f172a !important;
  color: #cbd5e1 !important;
}

/* ==========================================
   🧩 CONTENIDO GENERAL Y TARJETAS
   ========================================== */
.dark-mode .tradeando-dashboard,
.dark-mode .woocommerce-tabs,
.dark-mode .woocommerce-Tabs-panel,
.dark-mode .woocommerce table,
.dark-mode table.shop_table,
.dark-mode .woocommerce-cart-form,
.dark-mode .woocommerce-checkout-review-order-table {
  background-color: #0f172a !important;
  color: #2b78c5 !important;
  border-color: #0f172a !important;
  box-shadow: 0 0 12px #0f172a !important;
}

.dark-mode .tradeando-dashboard h2,
.dark-mode .tradeando-dashboard h3,
.dark-mode .tradeando-dashboard p,
.dark-mode .tradeando-dashboard td,
.dark-mode .tradeando-dashboard th {
  color: #2e80d3 !important;
}

/* ==========================================
   💰 CUADRO "PRECIO DEL MERCADO" EN PRODUCTO
   ========================================== */
.dark-mode .tradeando-market-card,
.dark-mode .woocommerce div.product .summary,
.dark-mode .woocommerce div.product .price-box {
  background-color: #1e293b !important;
  color: #1469be !important;
  border-color: rgba(255,255,255,0.1) !important;
}

.dark-mode .tradeando-market-card p,
.dark-mode .tradeando-market-card span,
.dark-mode .tradeando-market-card small,
.dark-mode .tradeando-market-card strong {
  color: #f8fafc !important;
}

/* Botones y cajas pequeñas dentro del cuadro */
.dark-mode .tradeando-market-card .info-box,
.dark-mode .price-card {
  background-color: #334155 !important;
  color: #f8fafc !important;
  border: 1px solid rgba(255,255,255,0.15);
}
.dark-mode .price-card input,
.dark-mode .price-card span {
  background-color: #475569 !important;
  color: #f8fafc !important;
}

/* Línea de progreso (Vendedores / Volatilidad) */
.dark-mode .progress-bar {
  background-color: rgba(255,255,255,0.1) !important;
}
.dark-mode .progress-bar span {
  background: linear-gradient(90deg,#22c55e,#facc15,#ef4444);
}

/* ==========================================
   🛍️ SECCIÓN VENDEDORES Y RELACIONADOS
   ========================================== */
.dark-mode .woocommerce .related.products h2,
.dark-mode .woocommerce .related.products .woocommerce-loop-product__title,
.dark-mode .woocommerce .related.products .price,
.dark-mode .woocommerce .related.products .star-rating {
  color: #f8fafc !important;
}
.dark-mode .woocommerce ul.products li.product {
  background-color: #1e293b !important;
  border-radius: 12px;
  padding: 10px;
}

/* ==========================================
   ✏️ TABLA "MIS PRODUCTOS"
   ========================================== */
.dark-mode .tradeando-products-list,
.dark-mode .tradeando-products-list table {
  background-color: #1e293b !important;
  color: #f8fafc !important;
  border-color: rgba(255,255,255,0.1);
}
.dark-mode .tradeando-products-list th {
  background-color: #6d28d9 !important;
  color: #fff !important;
}
.dark-mode .tradeando-products-list td {
  background-color: #1e293b !important;
  color: #f8fafc !important;
}

/* Botones dentro de "Mis productos" */
.dark-mode .tradeando-products-list a,
.dark-mode .tradeando-products-list button {
  background-color: #334155 !important;
  color: #fff !important;
  border-radius: 6px;
  padding: 5px 10px;
}
.dark-mode .tradeando-products-list a:hover {
  background-color: #475569 !important;
}
/* ==========================================
   🎨 UNIFICACIÓN DE TONOS Y COHERENCIA VISUAL
   ========================================== */
.dark-mode body,
.dark-mode .site,
.dark-mode .ast-container,
.dark-mode .site-content,
.dark-mode .woocommerce div.product,
.dark-mode .woocommerce-page {
  background-color: #0f172a !important;
  color: #f8fafc !important;
}

/* --- Cuadros de productos y precios --- */
.dark-mode .tradeando-market-card,
.dark-mode .woocommerce div.product .summary,
.dark-mode .woocommerce div.product .price-box,
.dark-mode .woocommerce-Tabs-panel,
.dark-mode .woocommerce-tabs,
.dark-mode .woocommerce .woocommerce-tabs .panel {
  background-color: #1e293b !important;
  color: #b35d0c !important;
  border-color: rgba(255,255,255,0.1) !important;
}

/* Subcuadros dentro de “Precio del mercado” */
.dark-mode .tradeando-market-card .info-box,
.dark-mode .tradeando-market-card .price-subbox {
  background-color: #334155 !important;
  color: #1c1cdb !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
}

/* Textos internos */
.dark-mode .tradeando-market-card p,
.dark-mode .tradeando-market-card span,
.dark-mode .tradeando-market-card strong,
.dark-mode .tradeando-market-card small {
  color: #fcf9f8 !important;
}

/* Progreso (líneas de vendedores / volatilidad) */
.dark-mode .progress-bar {
  background-color: rgba(255,255,255,0.1) !important;
}
.dark-mode .progress-bar span {
  background: linear-gradient(90deg, #22c55e, #facc15, #ef4444);
}

/* --- Cuadro de descripción y reviews --- */
.dark-mode .woocommerce-tabs ul.tabs li a,
.dark-mode .woocommerce-Tabs-panel {
  background-color: #0f172a !important;
  color: #f8fafc !important;
}
.dark-mode .woocommerce-tabs ul.tabs li.active a {
  color: #60a5fa !important;
}

/* --- Fondo general uniforme (elimina doble tono) --- */
.dark-mode .ast-separate-container .site-main > .ast-row,
.dark-mode .ast-separate-container .site-content > .ast-container {
  background-color: #0f172a !important;
}

/* ==========================================
   🌙 BOTÓN DE MODO OSCURO - HEADER FIJO (FINAL)
   ========================================== */

/* Asegura que el header tenga contexto*/
.ast-primary-header-bar {
  position: relative !important;
}

/* Botón circular del modo oscuro */
#darkModeToggleContainer {
  position: absolute;
  top: 50%;
  right: 35px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(30, 41, 59, 0.75);
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10000;
}

#darkModeToggleContainer:hover {
  background: rgba(51, 65, 85, 0.9);
  box-shadow: 0 0 10px rgba(250, 204, 21, 0.5);
}

/* Ícono luna/sol */
#darkModeIcon {
  font-family: "dashicons" !important;
  font-size: 20px;
  line-height: 1;
  color: #facc15;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.2);
  transition: all 0.4s ease;
}

/* Estado activado (modo oscuro encendido) */
body.dark-mode #darkModeIcon {
  color: #93c5fd;
  transform: rotate(-25deg);
  text-shadow: 0 0 8px rgba(147, 197, 253, 0.8);
}

/* Forzar visibilidad de Dashicons */
.dashicons,
.dashicons-before::before {
  display: inline-block;
  font-family: "dashicons" !important;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  text-align: center;
  vertical-align: middle;
}

/* ================================================================
   🌑 FIX TOTAL: Woo Tabs + Reviews + Astra Wrapper (modo oscuro)
   ================================================================ */

/* Fondo global para todos los wrappers que usan Astra */
body.dark-mode .ast-woocommerce-container,
body.dark-mode .woocommerce-tabs,
body.dark-mode .woocommerce div.product .woocommerce-tabs,
body.dark-mode .woocommerce div.product .woocommerce-tabs .panel,
body.dark-mode .woocommerce div.product .woocommerce-Tabs-panel,
body.dark-mode .woocommerce div.product .woocommerce-Tabs-panel--description,
body.dark-mode .woocommerce div.product .woocommerce-Tabs-panel--reviews,
body.dark-mode .woocommerce #reviews,
body.dark-mode .woocommerce #review_form_wrapper,
body.dark-mode .woocommerce #review_form,
body.dark-mode .woocommerce #review_form #respond,
body.dark-mode .woocommerce #review_form form {
  background-color: #0f172a !important;
  color: #34535c !important;
  border: none !important;
  box-shadow: none !important;
}

/* Líneas divisorias */
body.dark-mode hr,
body.dark-mode .woocommerce-tabs::before,
body.dark-mode .woocommerce div.product .woocommerce-tabs ul.tabs::before {
  border-color: #0f172a !important;
}

/* Texto dentro de las tabs */
body.dark-mode .woocommerce-tabs,
body.dark-mode .woocommerce-tabs p,
body.dark-mode .woocommerce-tabs li,
body.dark-mode .woocommerce-tabs h1,
body.dark-mode .woocommerce-tabs h2,
body.dark-mode .woocommerce-tabs h3,
body.dark-mode .woocommerce-tabs a,
body.dark-mode .woocommerce-tabs label {
  color: #f8fafc !important;
}

/* Inputs y textarea */
body.dark-mode .woocommerce #review_form input,
body.dark-mode .woocommerce #review_form textarea {
  background-color: #0f172a !important;
  color: #f8fafc !important;
  border: 1px solid #0f172a !important;
  border-radius: 6px;
  transition: border-color 0.3s ease;
}

body.dark-mode .woocommerce #review_form input:focus,
body.dark-mode .woocommerce #review_form textarea:focus {
  border-color: #f8fafc !important;
  box-shadow: 0 0 4px #0f172a !important;
}

/* Tabs superiores ("Description", "Reviews") */
body.dark-mode .woocommerce div.product .woocommerce-tabs ul.tabs {
  background: #0f172a !important;
  border-bottom: 1px solid #0f172a !important;
}

body.dark-mode .woocommerce div.product .woocommerce-tabs ul.tabs li a {
  color: #0f172a !important;
  background: transparent !important;
}

body.dark-mode .woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: #93c5fd !important;
  border-bottom: 2px solid #6d28d9 !important;
}

/* Botón Submit */
body.dark-mode .woocommerce #review_form #submit {
  background-color: #2563eb !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 6px !important;
}
body.dark-mode .woocommerce #review_form #submit:hover {
  background-color: #1d4ed8 !important;
}

/* Estrellas */
body.dark-mode p.stars a::before {
  color: #facc15 !important;
}


/****************************************************
 * PERFIL PÚBLICO DEL VENDEDOR - OVERRIDES DARK MODE
 ****************************************************/

body.dark-mode .td-vendor-hero {
  background: #020617;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.9);
}

body.dark-mode .td-vendor-banner {
  background: radial-gradient(circle at top left, #22c55e, #020617 45%, #1d4ed8);
}

body.dark-mode .td-vendor-main {
  background: rgba(15, 23, 42, 0.98);
  color: #e5e7eb;
}

body.dark-mode .td-vendor-name {
  color: #f9fafb;
}

body.dark-mode .td-vendor-username {
  color: #9ca3af;
}

body.dark-mode .td-vendor-row {
  color: #cbd5f5;
}

body.dark-mode .td-vendor-stat {
  background: rgba(15, 23, 42, 0.85);
  border-color: rgba(148, 163, 184, 0.6);
}

body.dark-mode .td-vendor-actions .td-btn-primary {
  box-shadow: 0 10px 24px rgba(59, 130, 246, 0.7);
}

/* Sidebar filtros */
body.dark-mode .td-vendor-filters {
  background: #0f172a;
  border-color: rgba(30, 64, 175, 0.7);
  box-shadow: 0 16px 30px rgba(15, 23, 42, 1);
}

body.dark-mode .td-vendor-filters h3 {
  color: #e5e7eb;
}

body.dark-mode .td-filter-label {
  color: #cbd5f5;
}

body.dark-mode .td-filter-group select,
body.dark-mode .td-filter-group input[type="text"],
body.dark-mode .td-filter-group input[type="number"] {
  background: #020617;
  color: #e5e7eb;
  border-color: rgba(51, 65, 85, 0.9);
}

/* Botón filtros */
body.dark-mode .td-filter-apply {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  box-shadow: 0 8px 20px rgba(22, 163, 74, 0.65);
}

/* Productos */
body.dark-mode .td-vendor-products .products li.product {
  background: #020617 !important;
  border-color: rgba(51, 65, 85, 0.9) !important;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 1) !important;
}

body.dark-mode .td-vendor-products .products li.product .woocommerce-loop-product__title {
  color: #e5e7eb !important;
}

body.dark-mode .td-vendor-products .products li.product .price {
  color: #93c5fd !important;
}