/* Tema oscuro de la tienda: fondo verde profundo, tarjetas blancas y detalles en lima (como la referencia GreenBasket).
   Se activa con class="tema-oscuro" en <body>; quitando esa clase la tienda vuelve al tema claro. */
.tema-oscuro { --pagina: #0c2f18; --pagina-2: #0a2613; --pagina-3: #07190d; --lima: #99c93a; --lima-osc: #7eb02a; --trazo: rgba(255,255,255,.12); --texto-suave: rgba(255,255,255,.76); background: var(--pagina); color: #fff; }

/* Títulos y textos sobre el fondo de la página */
.tema-oscuro .seccion-cab h2, .tema-oscuro .catalogo-cab h2 { color: #fff; }
.tema-oscuro .seccion-sub, .tema-oscuro #conteo, .tema-oscuro .orden small { color: var(--texto-suave); }
.tema-oscuro .ver-todo { color: var(--lima); }

/* Encabezado y categorías */
.tema-oscuro .nb { background: var(--pagina); border-bottom-color: var(--trazo); color: #fff; }
.tema-oscuro .nb-marca { color: #fff; }
.tema-oscuro .nb-marca img { box-shadow: 0 0 0 2px rgba(255,255,255,.2); }
.tema-oscuro .nb-buscar input { background: #fff; border-color: #fff; color: var(--tinta); }
.tema-oscuro .nb-buscar button { background: var(--lima); color: var(--pagina); } .tema-oscuro .nb-buscar button:hover { background: var(--lima-osc); }
.tema-oscuro .nb-btn { color: #fff; } .tema-oscuro .nb-btn:hover { background: rgba(255,255,255,.1); color: var(--lima); }
.tema-oscuro .nb-btn .cuenta { border-color: var(--pagina); }
.tema-oscuro .nb-zona-btn { color: #fff; border-color: rgba(255,255,255,.28); background: transparent; } .tema-oscuro .nb-zona-btn:hover { background: rgba(255,255,255,.1); }
.tema-oscuro .nb-zona-btn small { color: var(--texto-suave); } .tema-oscuro .nb-zona-btn .ico { color: var(--lima); }
.tema-oscuro .nb-pedido { color: var(--lima); }
.tema-oscuro .cats-nav { background: var(--pagina-2); border-bottom-color: var(--trazo); box-shadow: 0 8px 16px -10px rgba(0,0,0,.5); }
.tema-oscuro .cats-menu { background: var(--lima); color: var(--pagina); } .tema-oscuro .cats-menu:hover, .tema-oscuro .cats-menu[aria-expanded=true] { background: var(--lima-osc); }
.tema-oscuro .chip { color: #fff; } .tema-oscuro .chip:hover { color: var(--lima); } .tema-oscuro .chip[aria-pressed=true] { color: var(--lima); }
.tema-oscuro .chip.oferta, .tema-oscuro .chip.oferta:hover { color: #fff; }
.tema-oscuro .cats-der button, .tema-oscuro .cats-der a { color: var(--texto-suave); } .tema-oscuro .cats-der > *:hover { color: var(--lima); }

/* Portada */
.tema-oscuro .hero { box-shadow: 0 20px 40px -20px rgba(0,0,0,.6); }
.tema-oscuro .tono-menta { background: radial-gradient(circle at 76% 48%, rgba(153,201,58,.2) 0 30%, transparent 31%), radial-gradient(circle at 96% 8%, rgba(153,201,58,.12) 0 12%, transparent 13%), linear-gradient(135deg, #18522b, #0e3a1d); }
.tema-oscuro .tono-coral { background: radial-gradient(circle at 76% 48%, rgba(255,140,120,.22) 0 30%, transparent 31%), radial-gradient(circle at 96% 8%, rgba(255,140,120,.13) 0 12%, transparent 13%), linear-gradient(135deg, #1b562c, #103e1e); }
.tema-oscuro .tono-crema { background: radial-gradient(circle at 76% 48%, rgba(255,214,102,.2) 0 30%, transparent 31%), radial-gradient(circle at 96% 8%, rgba(255,214,102,.12) 0 12%, transparent 13%), linear-gradient(135deg, #16502a, #0d391b); }
.tema-oscuro .slide-texto { color: #fff; } .tema-oscuro .slide h1, .tema-oscuro .slide h2 { color: #fff; } .tema-oscuro .slide p { color: var(--texto-suave); }
.tema-oscuro .slide-botones .btn-borde { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); } .tema-oscuro .slide-botones .btn-borde:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.tema-oscuro .slide-arte img { filter: drop-shadow(0 22px 24px rgba(0,0,0,.45)); }
.tema-oscuro .hero-puntos { background: rgba(0,0,0,.35); } .tema-oscuro .hero-puntos button::after { border-color: #fff; } .tema-oscuro .hero-puntos button[aria-current]::after { background: var(--lima); border-color: var(--lima); }
.tema-oscuro .hero-pausa { background: rgba(0,0,0,.4); color: #fff; box-shadow: none; }

/* Beneficios, rieles y catálogo */
.tema-oscuro .beneficios li { background: rgba(255,255,255,.07); border-color: var(--trazo); box-shadow: none; color: #fff; }
.tema-oscuro .beneficios .bi { background: rgba(255,255,255,.12); color: var(--lima); } .tema-oscuro .beneficios small { color: var(--texto-suave); }
.tema-oscuro .banda { background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--trazo); }
.tema-oscuro .pc { border-color: transparent; box-shadow: 0 8px 20px -10px rgba(0,0,0,.55); }
.tema-oscuro .esqueleto { background: linear-gradient(90deg, rgba(255,255,255,.06) 25%, rgba(255,255,255,.14) 37%, rgba(255,255,255,.06) 63%); background-size: 400% 100%; }
.tema-oscuro .select { border-color: transparent; }

/* Información, aviso y pie */
.tema-oscuro .info { box-shadow: inset 0 0 0 1px var(--trazo), 0 20px 40px -24px rgba(0,0,0,.6); background: radial-gradient(circle at 92% 10%, rgba(153,201,58,.14) 0 14%, transparent 15%), radial-gradient(circle at 4% 100%, rgba(255,255,255,.06) 0 18%, transparent 19%), linear-gradient(135deg, #1a5a2d, #0f401e); }
.tema-oscuro .aviso-demo { background: rgba(255,255,255,.07); border-color: var(--trazo); color: var(--texto-suave); }
.tema-oscuro .pie { background: var(--pagina-3); border-top-color: var(--trazo); color: #fff; }
.tema-oscuro .pie h2, .tema-oscuro .pie-logo b { color: #fff; } .tema-oscuro .pie-marca > p, .tema-oscuro .pie-contacto, .tema-oscuro .pie-contacto a, .tema-oscuro .pie-links a, .tema-oscuro .pie-links button { color: var(--texto-suave); }
.tema-oscuro .pie-contacto .ico { color: var(--lima); } .tema-oscuro .pie-links a:hover, .tema-oscuro .pie-links button:hover { color: var(--lima); }
.tema-oscuro .pie-chips button { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.2); color: #fff; } .tema-oscuro .pie-chips button:hover { background: var(--lima); border-color: var(--lima); color: var(--pagina); }
.tema-oscuro .pie .btn-primario { background: var(--lima); color: var(--pagina); } .tema-oscuro .pie .btn-primario:hover { background: var(--lima-osc); }
.tema-oscuro .pie-fin { background: #050f08; border-top-color: var(--trazo); color: rgba(255,255,255,.7); }
.tema-oscuro .pie-fin button { background: transparent; border-color: rgba(255,255,255,.25); color: var(--lima); } .tema-oscuro .pie-fin button:hover { background: rgba(255,255,255,.1); }
.tema-oscuro .saltar { color: var(--pagina); }

/* Colores como la referencia: botones principales y acentos en lima sobre verde bosque */
.tema-oscuro .estado { background: #0f3d1d; } .tema-oscuro .estado.cerrado { background: #5a2616; } .tema-oscuro .estado.pausa { background: #6b1d17; }
.tema-oscuro .btn-accion, .tema-oscuro .btn-agregar { background: var(--lima); color: var(--pagina); box-shadow: 0 1px 2px rgba(0,0,0,.3); text-shadow: none; font-weight: 700; }
.tema-oscuro .btn-accion:hover:not([disabled]), .tema-oscuro .btn-agregar:hover { background: var(--lima-osc); box-shadow: 0 8px 18px -6px rgba(153,201,58,.55); }
.tema-oscuro .btn-agregar .ico { color: var(--pagina); }
.tema-oscuro .pc.en-carro { border-color: var(--lima); box-shadow: 0 0 0 2px var(--lima), 0 8px 20px -10px rgba(0,0,0,.55); }
.tema-oscuro .paso.en-tarjeta { background: #1f6b32; border-color: #1f6b32; } .tema-oscuro .paso.en-tarjeta button:hover { background: #17552a; }
.tema-oscuro .pc-precio.oferta b { color: #b3261e; }
.tema-oscuro .promo { background: linear-gradient(135deg, #1f6b32, #124a22); }
.tema-oscuro .promo:nth-child(2) { background: linear-gradient(135deg, #e0762a, #bf4f12); }
.tema-oscuro .promo:nth-child(3) { background: linear-gradient(135deg, #55801a, #3b5e0f); }
.tema-oscuro .promo-btn { background: var(--lima); color: var(--pagina); }
.tema-oscuro .nb-marca img, .tema-oscuro .pie-logo img { box-shadow: 0 0 0 2px rgba(153,201,58,.45); }
.tema-oscuro .hoy-tag { background: var(--lima); color: var(--pagina); }
.tema-oscuro .horarios .hoy dt { color: #17552a; }
.tema-oscuro .btn-claro { color: #17552a; }
.tema-oscuro .contacto-acc .btn-primario { color: #17552a; }

/* Las hojas (carrito, pago, detalle, asistente) son claras: no heredan el texto blanco de la página */
.tema-oscuro .hoja, .tema-oscuro .hoja .contenido, .tema-oscuro .hoja > footer { color: var(--tinta); }
.tema-oscuro .hoja .btn-accion, .tema-oscuro .hoja .btn-agregar { background: var(--lima); color: var(--pagina); }
.tema-oscuro .hoja .paso output { color: var(--tinta); }


/* El cuadro de categorías es claro: sus textos vuelven a ser oscuros */
.tema-oscuro .cats-caja .seccion-cab h2 { color: var(--tinta); } .tema-oscuro .cats-caja .seccion-sub { color: var(--tinta-2); }
.tema-oscuro .cats-caja .ver-todo { color: var(--verde); } .tema-oscuro .cats-caja .ver-todo:hover { color: #fff; }
.tema-oscuro .cats-caja { box-shadow: 0 24px 48px -20px rgba(0,0,0,.65); }

/* Caja de categorías con fondo de color, a juego con los banners de arriba */
.tema-oscuro .cats-caja { position: relative; overflow: hidden; color: #fff; background:
  radial-gradient(circle at 100% 0%, rgba(153,201,58,.34), transparent 42%),
  radial-gradient(circle at 0% 100%, rgba(224,106,26,.28), transparent 40%),
  linear-gradient(135deg, #1f6b32, #124a22); }
.tema-oscuro .cats-caja .seccion-cab h2 { color: #fff; } .tema-oscuro .cats-caja .seccion-sub { color: rgba(255,255,255,.88); }
.tema-oscuro .cats-caja .pista { background: rgba(255,255,255,.16); color: var(--lima); }
.tema-oscuro .cats-caja .ver-todo { color: #fff; border-color: rgba(255,255,255,.7); } .tema-oscuro .cats-caja .ver-todo:hover { background: var(--lima); border-color: var(--lima); color: #0c2f18; }
.tema-oscuro .cats-caja .desliza { color: rgba(255,255,255,.85); }
.tema-oscuro .cats-caja .cat-card { box-shadow: 0 10px 22px -12px rgba(0,0,0,.55); }