/*
 * AutoSandoval — modo oscuro de marca y sistema de líneas rojas (v0.5.6).
 *
 * Fuente: docs/propuesta-inicial/diseno/paleta-oscura-2026-10.md
 *   opción A (navy #001530), §4.1/§4.2 (tokens, en style.css y tienda.css),
 *   §4.6 (tokens con doble papel), §6 (líneas rojas), §7 (superficies y
 *   elevación), §8 (estados y componentes) y §12.2 (checklist).
 *
 * Alcance y reglas:
 *   - Se encola SOLO con el modo oscuro activo (filtro `autosandoval_modo_oscuro`).
 *     Orden real de impresión (hallazgo F-17):
 *       rising-bamboo-style → …-woocommerce-style → style.css → tienda.css
 *       → oscuro.css → elementor-frontend → elementor-post-7 (kit)
 *       → elementor-post-11297 → widgets de Elementor
 *     Es decir: va después de las hojas del tema y **antes** de las que genera
 *     Elementor. Las reglas de las páginas de Elementor no se anulan por orden
 *     (se imprimen más tarde), sino por **especificidad** (`body.as-modo-oscuro …`
 *     frente a `.elementor-element-… { color }`) y, en la home, porque su
 *     superficie se define en `uploads/elementor/css/post-11297.css` y la
 *     resuelve el editor (§9 de la especificación), no esta hoja.
 *   - Todo va acotado con `body.as-modo-oscuro` (salvo las utilidades nuevas
 *     .as-rule / .as-card / .link-more / .as-band-* / .as-footer, que no existen en
 *     el padre y solo se cargan en este modo, y `.btn-secondary`, que redeclara
 *     una clase global de Elementor a propósito). Nunca se toca wp-admin.
 *   - Sin `filter: invert()` y sin `!important` en cascada: cada bloque documenta
 *     el selector del padre que anula y usa especificidad equivalente o mayor.
 *     En las reglas de pantalla hay **tres** `!important`, todos marcados: dos
 *     porque el padre ya los trae en su CSS o el fondo va inline en el marcado,
 *     y uno porque hereda de ese mismo inline (ítem activo del desplegable de
 *     categorías). El bloque `@media print` (§18) usa `!important` de forma
 *     deliberada: en papel manda la legibilidad y hay que ganarle a los colores
 *     del padre y de Elementor, algunos también con `!important`.
 *   - Profundidad con pasos de navy y bordes de 1 px (§7); la sombra se reserva
 *     para lo que flota (cabecera fija, modal, minicarrito).
 *   - El rojo es decorativo (§6): nunca detrás de texto menor de 16 px, ni en
 *     errores, CTA, carrito/checkout, legales, resultado del portal, modales ni
 *     minicarrito (§6.4).
 */

/* --------------------------------------------------------------------------
 * 1. Lienzo y variables propias del padre
 *
 * El padre imprime en :root unas 120 variables --rbb-* desde `theme_mods`.
 * Las 30 que tienen clave de color se actualizan en la base de datos; las que
 * no tienen clave (defaults de Kirki) se corrigen aquí, sobre <body>, para que
 * ganen por cercanía a los descendientes sin duplicar :root.
 * ------------------------------------------------------------------------ */

body.as-modo-oscuro {
  background-color: var(--as-bg);
  color: var(--as-text-body);

  /* Anula: --rbb-title-color: #222222 (default de Kirki, sin theme_mod). */
  --rbb-title-color: var(--as-text);
  /* Anula: --rbb-breadcrumb-color: #222222 y el fondo claro del banner. */
  --rbb-breadcrumb-color: var(--as-text-soft);
  --rbb-breadcrumb-background-color: var(--as-bg-alt);
  --rbb-breadcrumb-background-image: none;
  /* Anula: --rbb-menu-background-color: #ffffff y el panel del menú móvil. */
  --rbb-menu-background-color: var(--as-bg-alt);
  --rbb-mobile-navigation-bg-color: var(--as-elevated);
  --rbb-mobile-navigation-text-color: var(--as-text);
  /* Anula: --rbb-mini-cart-content-background-color: #ffffff. */
  --rbb-mini-cart-content-background-color: var(--as-elevated);
  /* `rbb_color_general_link` es un par {link, hover} y NO está entre las 30
   * claves con hex simple: se corrige aquí con los mismos valores de §4.2. */
  --rbb-general-link-color: var(--as-link);
  --rbb-general-link-hover-color: var(--as-link-hover);
  /* Velo de modales: §7.4 (--as-scrim al 72 %, no al 100 %). */
  --rbb-modal-background-color: var(--as-scrim);
  --rbb-modal-background-opacity: 1;
}

body.as-modo-oscuro ::selection {
  background-color: var(--as-gold);
  color: var(--as-on-gold);
}

/* Barra de desplazamiento en Chromium/Safari (Firefox usa scrollbar-color en
 * style.css). Antes el padre la pintaba en grises claros. */
body.as-modo-oscuro ::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

body.as-modo-oscuro ::-webkit-scrollbar-track {
  background-color: var(--as-bg-deep);
}

body.as-modo-oscuro ::-webkit-scrollbar-thumb {
  border: 3px solid var(--as-bg-deep);
  border-radius: var(--radius-pill);
  background-color: var(--as-border-strong);
}

/* --------------------------------------------------------------------------
 * 2. Utilidades de color del tema padre usadas en el marcado
 *
 * El padre (y sus widgets) escriben colores con utilidades Tailwind de un solo
 * literal: `bg-white` (226 usos), `text-black` (128), `bg-[#eaeaea]`,
 * `text-[#5e5e5e]`, `border-r-[#edecec]`… Son declaraciones de (0,1,0), así que
 * `body.as-modo-oscuro .utilidad` (0,2,0) las neutraliza sin `!important`.
 * La tabla de equivalencias es 1:1 con la rampa de §2.2; no se inventa ningún
 * valor. Los componentes concretos se refinan más abajo, después de este bloque.
 * ------------------------------------------------------------------------ */

body.as-modo-oscuro .bg-white,
body.as-modo-oscuro .bg-\[\#fff\] {
  background-color: var(--as-card);
}

body.as-modo-oscuro .bg-\[\#eaeaea\],
body.as-modo-oscuro .bg-\[\#ebebeb\],
body.as-modo-oscuro .bg-\[\#ededed\],
body.as-modo-oscuro .bg-\[\#f3f3f3\] {
  background-color: var(--as-field);
}

/* QA-01: la banda de descripción de categoría (`.category-product-bottom`)
 * trae `bg-[#f2f2f2]`, que no estaba en la lista de utilidades anuladas: es la
 * superficie clara a sangre de 1440×242. Se pinta como sección alterna. */
body.as-modo-oscuro .bg-\[\#f2f2f2\] {
  background-color: var(--as-bg-alt);
}

body.as-modo-oscuro .text-black,
body.as-modo-oscuro .text-\[\#222\],
body.as-modo-oscuro .text-\[\#3f4045\] {
  color: var(--as-text);
}

/* Excepción: los textos que el marcado pone en negro sobre una superficie
 * dorada/amarilla conservan el navy de `--as-on-gold` (§4.6); si no, quedarían
 * en 1.35:1. Casos reales: la pestaña del popup de cuenta (`.login-title`) y
 * cualquier contenedor con `bg-[color:var(--rbb-general-button-bg-color)]`. */
body.as-modo-oscuro .login-title,
body.as-modo-oscuro .login-title .text-black,
body.as-modo-oscuro .login-title .login_switch,
body.as-modo-oscuro .bg-\[color\:var\(--rbb-general-button-bg-color\)\] .text-black,
body.as-modo-oscuro .bg-\[var\(--rbb-general-button-bg-color\)\] .text-black {
  color: var(--as-on-gold);
}

body.as-modo-oscuro .text-\[\#5e5e5e\],
body.as-modo-oscuro .text-\[\#909090\],
body.as-modo-oscuro .text-\[\#9b9b9b\],
body.as-modo-oscuro .text-\[\#a1a1a1\] {
  color: var(--as-text-muted);
}

body.as-modo-oscuro .text-\[\#cdcdcd\],
body.as-modo-oscuro .text-white {
  color: var(--as-text);
}

body.as-modo-oscuro .text-red,
body.as-modo-oscuro .text-red-700 {
  /* M-2: asteriscos de campo obligatorio. El padre usa `#FF2A2A` (2.9:1 sobre
   * `--as-elevated`) fuera de tokens; `--as-danger-text` es el token de texto de
   * estado (5.29:1) y no el rojo de marca. */
  color: var(--as-danger-text);
}

body.as-modo-oscuro .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--as-border);
}

body.as-modo-oscuro .border-r-\[\#edecec\],
body.as-modo-oscuro .border-t-\[\#e2e2e2\],
body.as-modo-oscuro .border-\[\#e4e4e4\],
body.as-modo-oscuro .border-\[\#ababab\],
body.as-modo-oscuro .border-\[\#eaeaea\],
body.as-modo-oscuro .border-\[\#ececec\] {
  border-color: var(--as-border);
}

/* --------------------------------------------------------------------------
 * 3. Cabecera y menú (§8.1)
 * ------------------------------------------------------------------------ */

/* Anula: .rbb-default-header.header-1 { background-color:#fff } (style.css del
 * padre) y el `bg-[color:var(--rbb-header-background-color)]` del marcado. */
body.as-modo-oscuro .rbb-default-header,
body.as-modo-oscuro .rbb-default-header.header-1 {
  background-color: var(--as-header-bg);
  border-bottom: 1px solid var(--as-header-border);
}

/* Menú vertical «Ver todas las categorías»:
 * Anula: .vertical-menu .menu-container { background:#fff } (el `ul` interior
 *        seguía blanco aunque el panel ya fuera oscuro) y
 *        .vertical-menu .menu-container li .sub-menu { background:#fff; border:#ffe200 }.
 *        El `.opener` blanco del marcado ya lo cubre la utilidad `.bg-white`. */
body.as-modo-oscuro .vertical-menu .menu-container {
  background-color: transparent;
}

body.as-modo-oscuro .vertical-menu .menu-container li .sub-menu {
  background-color: var(--as-elevated);
  border-color: var(--as-border-strong);
  box-shadow: var(--shadow-lg);
}

body.as-modo-oscuro .vertical-menu .menu-container li > a,
body.as-modo-oscuro .vertical-menu .menu-container li > .a-level {
  color: var(--as-text-soft);
}

body.as-modo-oscuro .vertical-menu .menu-container li > a:hover,
body.as-modo-oscuro .vertical-menu .menu-container li > .a-level:hover,
body.as-modo-oscuro .vertical-menu .menu-container li.menu-active > a {
  color: var(--as-gold);
}

body.as-modo-oscuro .rbb-default-header .rbb-header-sticky,
body.as-modo-oscuro .rbb-default-header .rbb-header-sticky > div,
body.as-modo-oscuro .rbb-default-header .rbb-header-sticky.header-stuck > div {
  background-color: var(--as-header-bg);
}

/* El menú móvil desplegado es superficie elevada (§8.1). Anula: .canvas-menu
 * { background:#fff } y .canvas-menu … ul.sub-menu { background:#fff }. */
body.as-modo-oscuro .canvas-menu,
body.as-modo-oscuro .canvas-menu .rbb-main-navigation #menu-main .menu-container li.level-1 ul.sub-menu {
  background-color: var(--as-elevated);
  border-color: var(--as-border-strong);
}

body.as-modo-oscuro .canvas-menu .rbb-main-navigation #menu-main .menu-container li.level-1 ul.sub-menu li,
body.as-modo-oscuro .canvas-menu .rbb-main-navigation #menu-main .menu-container li.level-1 ul.sub-menu li:first-child,
body.as-modo-oscuro .canvas-menu .search_desktop .input-group:before {
  border-color: var(--as-border);
  color: var(--as-text-muted);
}

/* Anula: .canvas-menu .search_desktop .input-group .input-search { background:#ebebeb } */
body.as-modo-oscuro .canvas-menu .search_desktop .input-group .input-search {
  background-color: var(--as-field);
  color: var(--as-text);
}

/* Anula: .rbb-default-header .header-mobile #_mobile_cart … .cart-icon { color:#000 } */
body.as-modo-oscuro .rbb-default-header .header-mobile #_mobile_cart .mini-cart-icon .cart-icon {
  color: var(--as-text);
}

/* Buscador de la cabecera: `.input-group` viene con `bg-white` y un borde
 * `border-r-[#edecec]` en el marcado; el botón de envío es azul de acción. */
body.as-modo-oscuro .rbb-product-search .rbb-search-form .input-group {
  background-color: var(--as-field);
  border: 1px solid var(--as-border-input);
}

body.as-modo-oscuro .rbb-product-search .rbb-search-form .input-group .rbb-search-categories > div {
  border-color: var(--as-border);
}

body.as-modo-oscuro .rbb-product-search .rbb-search-form .input-search {
  background-color: transparent;
  color: var(--as-text);
}

body.as-modo-oscuro .rbb-product-search .rbb-search-form .btn-search {
  background-color: var(--as-action);
  color: var(--as-text);
}

/* Panel de resultados del buscador. Anula: .rbb_results.style-results-2
 * { background:#fff } y los precios en `--rbb-general-primary-color`. */
body.as-modo-oscuro .rbb_results,
body.as-modo-oscuro .rbb_results.style-results-2,
body.as-modo-oscuro .rbb-ajax-search .rbb_results {
  background-color: var(--as-elevated);
  border: 1px solid var(--as-border-strong);
  box-shadow: var(--shadow-lg);
}

body.as-modo-oscuro .rbb_results .rbb-search-result-ajax .item-content .item-price,
body.as-modo-oscuro .rbb_results .rbb-search-result-ajax .search-item > div .item-price ins {
  color: var(--as-gold);
}

body.as-modo-oscuro .rbb_results .rbb-search-result-ajax .search-item > div .item-price del {
  color: var(--as-price-old);
}

/* --------------------------------------------------------------------------
 * 3-bis. Hero del slider (rbb_slider «single layout-3»)
 *
 * El widget de Elementor trae en `.elementor-widget-container` la imagen gris
 * de relleno `placeholder.png` (1200×800, `background-size:100%`), heredada del
 * ajuste de «imagen de fondo» del widget. Slick fija el ancho de cada
 * `.slick-slide` a 1280 px —el ancho del contenedor de Elementor al
 * inicializar— mientras el slider ocupa el 100 % de la sección estirada
 * (1440 px a 1440 de viewport, y más en pantallas mayores). Los 160 px que las
 * diapositivas no cubren dejan ver el relleno: la cuña clara del hero, con el
 * borde diagonal de la montaña del placeholder.
 *
 * Se pinta el slider y su pista con el lienzo: el hueco pasa a navy y la foto
 * (que ya es oscura en su borde derecho) se funde con el fondo. La causa de
 * fondo —slick no recalcula el ancho de la diapositiva— vive en el plugin
 * `rising-bamboo`; no se toca. Anotado como pendiente de plugin/asset.
 * ------------------------------------------------------------------------ */

body.as-modo-oscuro .rbb-elementor-slider.single.layout-3,
body.as-modo-oscuro .rbb-elementor-slider.single.layout-3 .slick-list,
body.as-modo-oscuro .rbb-elementor-slider.single.layout-3 .slick-track {
  background-color: var(--as-bg);
}

/* Fundido del borde derecho de la foto con el lienzo: el corte del slide
 * (1280 px) contra el hueco navy quedaría como una columna recta cuando la
 * foto es clara en su borde. Un degradado de 12 % del ancho del slide (≈153 px
 * a 1440) lo difumina sin tocar el layout. */
body.as-modo-oscuro .rbb-elementor-slider.single.layout-3 .slick-slide .item-content::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 12%;
  background: linear-gradient(to right, transparent, var(--as-bg));
  pointer-events: none;
}

/* --------------------------------------------------------------------------
 * 4. Banner de título y migas (§8.10 para legales: sin rojo)
 * ------------------------------------------------------------------------ */

/* Anula: .rbb-page-title { background: var(--rbb-breadcrumb-background-color)
 * + background-image } y .rbb-page-title.page-title-single { background:#fff };
 * también `body.search.post-type-archive-product #rbb-page-title{background:#fff}`. */
body.as-modo-oscuro #rbb-page-title,
body.as-modo-oscuro .rbb-page-title,
body.as-modo-oscuro .rbb-page-title.page-title-single,
body.as-modo-oscuro.search.post-type-archive-product #rbb-page-title {
  background-color: var(--as-bg-alt);
  background-image: none;
  border-bottom: 1px solid var(--as-border);
}

body.as-modo-oscuro .rbb-page-title .heading {
  color: var(--as-text);
}

body.as-modo-oscuro .rbb-breadcrumb,
body.as-modo-oscuro .rbb-breadcrumb a {
  color: var(--as-text-soft);
}

body.as-modo-oscuro .rbb-breadcrumb a:hover {
  color: var(--as-link-hover);
}

/* --------------------------------------------------------------------------
 * 5. Tarjetas de producto y de categoría (patrón 2, §7 nivel 2)
 *
 * Anula el fondo transparente/blanco del padre en:
 *   .rbb_woo_products .item-product (home, relacionados, upsells),
 *   .rbb-product-catalog .products-category .item .item-product (catálogo),
 *   .rbb_woo_products .loading .item .item-product { background:#f3f3f380 }.
 * Profundidad con borde de 1 px, sin sombra (§7.1 y §7.2).
 * ------------------------------------------------------------------------ */

body.as-modo-oscuro .rbb_woo_products .item-product,
body.as-modo-oscuro .rbb-product-catalog .products-category .item .item-product,
body.as-modo-oscuro .rbb-product-catalog .products-category.grid_1 .item .item-product {
  background-color: var(--as-card);
  border: 1px solid var(--as-border);
  border-radius: var(--radius-lg);
}

body.as-modo-oscuro .rbb_woo_products .item-product .product_info .product-title .product_name,
body.as-modo-oscuro .rbb-product-catalog .products-category .item .item-product .product_name {
  color: var(--as-text);
}

body.as-modo-oscuro .rbb_woo_products .item-product .product_ratting .ratting-count {
  color: var(--as-text-muted);
}

/* Caja de la foto: fondo de carga oscuro, nunca blanco (§7.7). Anula el
 * `bg-[#eaeaea]` del marcado del catálogo y el `background-color:#fff` de los
 * placeholders de WooCommerce. */
body.as-modo-oscuro .rbb_woo_products .item-product .product-image,
body.as-modo-oscuro .rbb_woo_products .item-product .thumbnail-container,
body.as-modo-oscuro .rbb-product-catalog .products-category .item .item-product .thumbnail-container,
body.as-modo-oscuro .woocommerce-placeholder {
  background-color: var(--as-field);
}

/* Tarjeta de categoría (listado de /tienda/). Anula `.item-product-cat-content`
 * y el bloque claro de la imagen. */
body.as-modo-oscuro .item-product-cat-content {
  background-color: var(--as-card);
  border: 1px solid var(--as-border);
  border-radius: var(--radius-lg);
}

body.as-modo-oscuro .item-product-cat-content .woocommerce-loop-category__title,
body.as-modo-oscuro .rbb-product-catalog .products-category .product-category .woocommerce-loop-category__title {
  color: var(--as-text);
}

/* La sección «policy-icon» de la home trae un fondo claro de 80×80 en el figure
 * del icono (ajuste del widget de Elementor). Se deja transparente para que el
 * icono se apoye en el lienzo; si Elementor define otro color, gana su regla. */
body.as-modo-oscuro .policy-icon .elementor-image-box-img {
  background-color: transparent;
}

/* Placa de foto (§10, R-1). Las fotos de producto todavía llegan con fondo
 * blanco; para que el blanco no quede a sangre sobre navy se montan sobre una
 * placa clara `#F2F5FA` con padding del 8 %, igual en todas las tarjetas. Al
 * recibir recortes con transparencia, se retira esta regla (una sola).
 * Anula el fondo transparente de `.thumbnail-container > a` y de la galería. */
body.as-modo-oscuro .item-product .thumbnail-container > a,
body.as-modo-oscuro .rbb-product-catalog .products-category .item .item-product .thumbnail-container > a {
  display: block;
  padding: 8%;
  background-color: var(--as-photo-plate);
  border: 1px solid var(--as-border);
  border-radius: var(--radius-md);
}

body.as-modo-oscuro.single-product .product-image .rbb-product-gallery__image,
body.as-modo-oscuro.single-product .product-image #rbb-gallery-lightbox {
  padding: 8%;
  background-color: var(--as-photo-plate);
  border: 1px solid var(--as-border);
  border-radius: var(--radius-md);
}

/* Anula: .single-product .product-image … .thumbnail
 * { border:1px solid var(--rbb-general-button-bg-color) } — el amarillo se
 * reserva para la acción; la miniatura activa sigue marcándose con dorado. */
body.as-modo-oscuro.single-product .product-image .rbb-slick-product-thumb .slick-slide .item .thumbnail,
body.as-modo-oscuro.single-product .product-image .rbb-product-thumbs .item .thumbnail {
  border-color: var(--as-border);
}

body.as-modo-oscuro.single-product .product-image .rbb-slick-product-thumb .slick-slide.slick-current .item .thumbnail,
body.as-modo-oscuro.single-product .product-image .rbb-slick-product-thumb .slick-slide .item .thumbnail:hover {
  border-color: var(--as-gold);
}

/* Anula: .single-product .product-summary .product_meta { border-top:1px solid
 * var(--rbb-general-button-bg-color) } — el amarillo se reserva para la acción. */
body.as-modo-oscuro.single-product .product-summary .product_meta {
  border-top-color: var(--as-border);
}

body.as-modo-oscuro .cart-template .rbb-cart__product-image img,
body.as-modo-oscuro .rbb-cart__product-image img,
body.as-modo-oscuro .rbb-mini-cart-canvas .woocommerce-mini-cart-item .product-image img {
  background-color: var(--as-photo-plate);
}


/* Anula: .category-bottom-widget { background:#f2f2f2; padding:95px 0 90px }
 * y su borde superior amarillo `.category-bottom-widget.widget_block`. */
body.as-modo-oscuro .category-bottom-widget {
  background-color: var(--as-bg-alt);
}

body.as-modo-oscuro .category-bottom-widget.widget_block {
  border-top-color: var(--as-border);
}

body.as-modo-oscuro .category-bottom-widget.rbb-widget--product-tags .sidebar-shop-filter-title {
  color: var(--as-text);
}

body.as-modo-oscuro .rbb-sidebar-shop-filter .sidebar-shop-filter-widget.rbb-widget--product-tags .widget-content .widget-content-inner .level-0 > .item {
  border-color: var(--as-border);
}

body.as-modo-oscuro .rbb-sidebar-shop-filter .sidebar-shop-filter-widget.rbb-widget--product-tags .widget-content .widget-content-inner .level-0 > .item a span {
  color: var(--as-text-muted);
}

/* --------------------------------------------------------------------------
 * 6. Sistema de líneas rojas (§6)
 * ------------------------------------------------------------------------ */

/* 6.1 Utilidad base: cualquier línea roja se dibuja con esto. */
.as-rule {
  display: block;
  height: var(--as-rule-w);
  background: var(--as-red);
  border: 0;
  border-radius: var(--radius-pill);
}

/* Patrón 1 — rayita bajo títulos de sección (48 × 2 px).
 * Se aplica al <h2> de sección, nunca al h1 del hero, y solo donde no haya ya
 * un subrayado de menú activo en la misma vista (§6.1: máximo 2 persistentes).
 * elementor-designer debe añadir `as-section-title--rule` (y `is-center` en las
 * bandas centradas) al widget de título correspondiente. */
.as-section-title--rule::after {
  content: "";
  display: block;
  width: var(--as-rule-len);
  height: var(--as-rule-w);
  margin-top: var(--as-rule-gap);
  background: var(--as-red);
  border-radius: var(--radius-pill);
}

.as-section-title--rule.is-center::after {
  margin-inline: auto;
}

/* Patrón 2 — hairline superior de tarjeta al hover (y con :focus-within, para
 * teclado). Se aplica a `.as-card` (clase nueva para Elementor) y, en el tema
 * padre, a las tarjetas reales de producto y categoría. Transitorio: una sola a
 * la vez. Nunca en formularios, cuenta, carrito ni portal (§6.4). */
.as-card {
  position: relative;
  background: var(--as-card);
  border: 1px solid var(--as-border);
  border-radius: var(--radius-lg);
}

.as-card::before,
body.as-modo-oscuro .rbb_woo_products .item-product::before,
body.as-modo-oscuro .item-product-cat-content::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 2;
  height: var(--as-rule-w);
  background: var(--as-red);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.18s ease;
  pointer-events: none;
}

.as-card:hover::before,
.as-card:focus-within::before,
body.as-modo-oscuro .rbb_woo_products .item-product:hover::before,
body.as-modo-oscuro .rbb_woo_products .item-product:focus-within::before,
body.as-modo-oscuro .item-product-cat-content:hover::before,
body.as-modo-oscuro .item-product-cat-content:focus-within::before {
  transform: scaleX(1);
}

body.as-modo-oscuro .rbb_woo_products .item-product,
body.as-modo-oscuro .item-product-cat-content {
  position: relative;
}

/* Patrón 3a — separador de sección (1 px de borde + 120 × 2 px de rojo).
 * Lo usa elementor-designer entre secciones de la home y del catálogo; nunca en
 * páginas legales. */
.as-band-sep {
  position: relative;
  height: 1px;
  border: 0;
  background: var(--as-border);
}

.as-band-sep::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 120px;
  height: var(--as-rule-w);
  background: var(--as-red);
}

/* Patrón 3b — diagonal del hero (una sola vez en el sitio, en la home). */
.as-band--diagonal {
  position: relative;
  overflow: hidden;
}

.as-band--diagonal::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: 0;
  height: 1px;
  background: var(--as-red);
  transform: rotate(-1.2deg);
  transform-origin: left bottom;
  pointer-events: none;
}

/* Patrón 4 — subrayado del ítem activo del menú.
 * Anula el `background: var(--as-cta-bg)` (amarillo) de tienda.css en estado
 * activo. El hover sigue dorado; el estado no depende del color: el ítem activo
 * conserva `aria-current` (lo añade el filtro
 * `autosandoval_portal_menu_aria_current` de `inc/accesibilidad.php`) y el
 * peso 700 del marcado. */
body.as-modo-oscuro .rbb-default-header .rbb-main-navigation ul.menu-container li.level-1.active > a .menu-item-title::after,
body.as-modo-oscuro .rbb-default-header .rbb-main-navigation ul.menu-container li.level-1.active-parent > a .menu-item-title::after,
body.as-modo-oscuro .rbb-default-header .rbb-main-navigation ul.menu-container li.level-1.current-menu-item > a .menu-item-title::after,
body.as-modo-oscuro .rbb-default-header .rbb-main-navigation ul.menu-container li.level-1.current_page_item > a .menu-item-title::after,
body.as-modo-oscuro .rbb-default-header .rbb-main-navigation ul.menu-container li.level-1.current-menu-parent > a .menu-item-title::after,
body.as-modo-oscuro .rbb-default-header .rbb-main-navigation ul.menu-container li.level-1.current-menu-ancestor > a .menu-item-title::after {
  background: var(--as-red);
  transform: scaleX(1);
}

/* Menú móvil: barra roja izquierda de 3 px en el ítem activo (§6.3, patrón 4).
 * M-3: el padre emite la clase `active` (no `current-menu-item`) en el panel
 * `.canvas-menu`; se cubren ambos marcados. */
body.as-modo-oscuro .canvas-menu .rbb-main-navigation #menu-main .menu-container li.level-1.active > a,
body.as-modo-oscuro .canvas-menu .rbb-main-navigation #menu-main .menu-container li.level-1.current-menu-item > a,
body.as-modo-oscuro .canvas-menu .rbb-main-navigation #menu-main .menu-container li.level-1.current_page_item > a,
body.as-modo-oscuro .canvas-menu .rbb-main-navigation #menu-main .menu-container li.level-1.menu-active > a {
  border-left: 3px solid var(--as-red);
  color: var(--as-gold);
  padding-left: 0.75rem;
}

/* Patrón 5 — acento del CTA secundario y del enlace «Ver más».
 * El CTA secundario no se vuelve rojo (el rojo no es color de acción): el acento
 * es una línea que aparece al interactuar. `btn-secondary` es una clase global
 * de Elementor; aquí se replica para el marcado del tema. */
.btn-secondary {
  background: transparent;
  color: var(--as-text);
  border: 2px solid var(--as-border-strong);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  color: var(--as-gold);
  border-color: var(--as-gold);
}

.link-more {
  color: var(--as-text);
  text-decoration: none;
  background-image: linear-gradient(var(--as-red), var(--as-red));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 0.18s ease;
}

.link-more:hover,
.link-more:focus-visible {
  background-size: 100% 1px;
}

/* Patrón 6 — filete bajo la cabecera y sobre el pie (el patrón firma).
 * La cabecera conserva el degradado dorado→naranja de 2 px de tienda.css
 * (`.rbb-default-header::after`) y suma 1 px rojo justo encima. */
body.as-modo-oscuro .rbb-default-header::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px; /* justo encima del degradado de 2 px */
  z-index: 31;
  height: var(--as-fillet-h);
  background: var(--as-red);
  pointer-events: none;
}

/* El pie es `#000B1C` con 1 px rojo arriba (§8.11). El fondo real del pie lo
 * pinta la plantilla de Elementor (Footer 01): elementor-designer debe añadir
 * `as-footer` a su contenedor o poner el color `as-bg-deep`. */
body.as-modo-oscuro .as-footer,
body.as-modo-oscuro #colophon {
  background-color: var(--as-bg-deep);
  border-top: 1px solid var(--as-red);
}

/* --------------------------------------------------------------------------
 * 7. Catálogo: barra de orden, filtros, tabs y paginación
 * ------------------------------------------------------------------------ */

/* Barra superior del catálogo. Anula:
 *   .rbb-product-catalog.category-right .category-top-bar { background:#f2f2f2 }
 *   … .grid-list .grid_2 … { background:#fff }
 *   .… .woocommerce-ordering .rbb-accordion-title { background:#fff; border:#e4e4e4 }
 *   .… .rbb-accordion-title.act { border-bottom:1px solid #fff } */
body.as-modo-oscuro .rbb-product-catalog .category-top-bar {
  background-color: var(--as-bg-alt);
  border: 1px solid var(--as-border);
}

body.as-modo-oscuro .rbb-product-catalog .category-top-bar .grid-list > div {
  background-color: var(--as-card);
  color: var(--as-text);
}

body.as-modo-oscuro .rbb-product-catalog .category-top-bar .grid-list > div.active,
body.as-modo-oscuro .rbb-product-catalog .category-top-bar .grid-list > div:hover {
  background-color: var(--as-action);
  color: var(--as-text);
}

body.as-modo-oscuro .rbb-product-catalog .category-top-bar .woocommerce-ordering .rbb-accordion-title {
  background-color: var(--as-card);
  border-color: var(--as-border);
  color: var(--as-text);
}

body.as-modo-oscuro .rbb-product-catalog .category-top-bar .woocommerce-ordering .rbb-accordion-title.act {
  border-bottom-color: var(--as-card);
}

body.as-modo-oscuro .rbb-accordion-content,
body.as-modo-oscuro .rbb-product-catalog .woocommerce-ordering .rbb-accordion-content {
  background-color: var(--as-elevated);
  border-color: var(--as-border-strong);
  box-shadow: var(--shadow-lg);
}

/* Filtros del catálogo (barra lateral y lienzos). Anula:
 *   .rbb-sidebar-shop-filter-top { background:#fff }
 *   .rbb-sidebar-shop-filter-left,.rbb-sidebar-shop-filter-right { background:#fff }
 *   .… .sidebar-shop-filter-title { background:#f2f2f2; border:#f2f2f2 }
 *   .… .sidebar-shop-filter-title.act { background:#fff; border:#d9d9d9 }
 *   .… .widget-content { background:#fff; border:#d9d9d9 }
 *   .rbb-sidebar-shop-filter-canvas-*.rbb-modal .rbb-modal-dialog .rbb-modal-body { background:#fff }
 *
 * Obs. 1 del cliente (2026-10-27): «dejarlo sin color de fondo porque se ve mal
 * ese poco contraste en cambio de color en la tienda». En **escritorio** la
 * columna va sin caja: solo un divisor vertical de 1 px la separa del catálogo.
 * En **≤1023 px** el mismo elemento es el lienzo off-canvas que se desliza sobre
 * el contenido: ahí sí necesita superficie elevada, porque transparente dejaría
 * leer el catálogo por debajo (ver el bloque `@media` de abajo). */
body.as-modo-oscuro .rbb-sidebar-shop-filter-left,
body.as-modo-oscuro .rbb-sidebar-shop-filter-right {
  background-color: transparent;
  border-color: var(--as-border);
}

body.as-modo-oscuro .rbb-sidebar-shop-filter-left {
  border-right: 1px solid var(--as-border);
}

body.as-modo-oscuro .rbb-sidebar-shop-filter-right {
  border-left: 1px solid var(--as-border);
}

body.as-modo-oscuro .rbb-sidebar-shop-filter-top,
body.as-modo-oscuro .rbb-sidebar-shop-filter.rbb-modal .rbb-modal-dialog,
body.as-modo-oscuro .rbb-sidebar-shop-filter.rbb-modal .rbb-modal-dialog .rbb-modal-body {
  background-color: var(--as-elevated);
  border-color: var(--as-border-strong);
}

/* Lienzo flotante (off-canvas): superficie obligatoria para que el panel sea
 * legible sobre el catálogo. */
@media (max-width: 1023px) {
  body.as-modo-oscuro .rbb-sidebar-shop-filter-left,
  body.as-modo-oscuro .rbb-sidebar-shop-filter-right {
    background-color: var(--as-elevated);
    border-color: var(--as-border-strong);
  }
}

/* Obs. 2 del cliente: los widgets no pintan caja propia dentro de la barra
 * («caja dentro de caja»). La jerarquía queda en peso, tamaño, color y los
 * separadores de 1 px, sin superficie. */
body.as-modo-oscuro .sidebar-shop-filter-widget .sidebar-shop-filter-title {
  background-color: transparent;
  border-bottom: 1px solid var(--as-border);
  color: var(--as-text);
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* Anula: .rbb-sidebar-shop-filter-left/right … .sidebar-shop-filter-group
 * { border:1px solid var(--rbb-general-button-bg-color) } (amarillo decorativo;
 * el dorado se reserva para la acción, §1.1).
 * Obs. 2 del cliente: además se retira el contorno del grupo. La jerarquía queda
 * en el `border-bottom` del título y el filete de 1 px del contenido, sin
 * «caja» ni relleno; el borde lateral de la columna es el único divisor. */
body.as-modo-oscuro .rbb-sidebar-shop-filter .sidebar-shop-filter-widget .sidebar-shop-filter-group,
body.as-modo-oscuro .rbb-sidebar-shop-filter-wrap .sidebar-shop-filter-widget .sidebar-shop-filter-group {
  border: 0;
}

body.as-modo-oscuro .rbb-sidebar-shop-filter-left .rbb-sidebar-shop-filter-title,
body.as-modo-oscuro .rbb-sidebar-shop-filter-right .rbb-sidebar-shop-filter-title {
  border-bottom-color: var(--as-border);
}

/* Anula: … .sidebar-shop-filter-group .widget-content:before
 * { background: var(--rbb-general-button-bg-color) } — filete amarillo de 1 px
 * sobre el contenido de cada grupo de filtros. */
body.as-modo-oscuro .rbb-sidebar-shop-filter-left .sidebar-shop-filter-widget .sidebar-shop-filter-group .widget-content:before,
body.as-modo-oscuro .rbb-sidebar-shop-filter-right .sidebar-shop-filter-widget .sidebar-shop-filter-group .widget-content:before,
body.as-modo-oscuro .rbb-sidebar-shop-filter-top .sidebar-shop-filter-widget .sidebar-shop-filter-group .widget-content:before {
  background: var(--as-border);
}

body.as-modo-oscuro .sidebar-shop-filter-widget .sidebar-shop-filter-title.act,
body.as-modo-oscuro .sidebar-shop-filter-widget .widget-content {
  /* Obs. 2: sin fondo. El título conserva su `border-bottom` y el contenido su
   * filete de 1 px (`.widget-content::before`), que marcan el grupo. */
  background-color: transparent;
  border-color: var(--as-border);
}

/* Opciones del filtro sobre el fondo de página (`#001530`), no sobre tarjeta:
 * tinta secundaria y metadatos en su token. El dorado queda para el ítem activo
 * y el hover. */
body.as-modo-oscuro .sidebar-shop-filter-widget .filter-link {
  color: var(--as-text-soft);
}

body.as-modo-oscuro .sidebar-shop-filter-widget .filter-link:hover,
body.as-modo-oscuro .sidebar-shop-filter-widget .filter-link:focus-visible,
body.as-modo-oscuro .sidebar-shop-filter-widget .filter-link.active {
  color: var(--as-gold);
}

/* El padre marca el lienzo de filtros con `background:#fff!important` en la
 * cabecera del modal: para anularlo hace falta otro `!important` (único caso,
 * además del cierre del modal más abajo). */
body.as-modo-oscuro .rbb-sidebar-shop-filter.rbb-modal .rbb-modal-header,
body.as-modo-oscuro .rbb-sidebar-shop-filter-canvas-top.rbb-modal .rbb-modal-header,
body.as-modo-oscuro .rbb-sidebar-shop-filter-canvas-bottom.rbb-modal .rbb-modal-header,
body.as-modo-oscuro .rbb-sidebar-shop-filter-canvas-left.rbb-modal .rbb-modal-header,
body.as-modo-oscuro .rbb-sidebar-shop-filter-canvas-right.rbb-modal .rbb-modal-header {
  background-color: var(--as-elevated) !important; /* el padre ya usa !important */
}

body.as-modo-oscuro .rbb-active-filters-bar .filter-group .remove-filter,
body.as-modo-oscuro .rbb-active-filters-bar .clear-all a {
  background-color: var(--as-card);
  border-color: var(--as-border-strong);
  color: var(--as-text);
}

body.as-modo-oscuro .rbb-active-filters-bar .filter-group .remove-filter:hover,
body.as-modo-oscuro .rbb-active-filters-bar .clear-all a:hover {
  background-color: var(--as-action);
  border-color: var(--as-action);
  color: var(--as-text);
}

/* Filtro de precio: los thumbs eran blancos sobre pista clara (style.css padre). */
body.as-modo-oscuro .rbb-price-filter .rbb-price-filter__range-input span {
  color: var(--as-text-muted);
}

/* Desplegable de categorías del widget de productos (`ul.select-options`).
 * El marcado del padre trae el fondo **inline** (`style="…background:#fff"`),
 * así que hay que ganarle con `!important`; el resto de la píldora se corrige
 * con tokens. Anula además:
 *   .rbb_woo_products .select-wrap .select-options li { color:#b0b0b0 }
 *   … li.active,:hover { background:#f3f3f3; color: var(--rbb-general-secondary-color) } */
body.as-modo-oscuro .rbb_woo_products .select-wrap .select-options {
  background: var(--as-elevated) !important; /* inline en el marcado */
  border: 1px solid var(--as-border-strong);
  box-shadow: var(--shadow-lg);
}

body.as-modo-oscuro .rbb_woo_products .select-wrap .select-options li {
  color: var(--as-text-soft);
}

body.as-modo-oscuro .rbb_woo_products .select-wrap .select-options li.active,
body.as-modo-oscuro .rbb_woo_products .select-wrap .select-options li:hover {
  /* La píldora activa del padre trae `background:#f3f3f3` (claro): el dorado
   * encima daría 1.6:1. Se fija la superficie de tarjeta.
   * Tercer y último `!important` de la hoja (ver cabecera): nace del fondo
   * `#fff` inline del marcado del bloque 798-803, que se resuelve con
   * `!important`; esta declaración necesita la misma fuerza para ganarle a
   * aquel. Si el padre mueve el estilo inline a una clase, sobran los dos. */
  background-color: var(--as-card) !important;
  color: var(--as-gold);
}

body.as-modo-oscuro .rbb-price-filter .rbb-price-filter__range-input input[type="range"]::-webkit-slider-thumb {
  background: var(--as-gold);
  border-color: var(--as-card);
  box-shadow: 0 0 0 1px var(--as-gold-strong);
}

body.as-modo-oscuro .rbb-price-filter .rbb-price-filter__range-input input[type="range"]::-moz-range-thumb {
  background: var(--as-gold);
  border-color: var(--as-card);
  box-shadow: 0 0 0 1px var(--as-gold-strong);
}

/* Tabs de la ficha de producto. Anula:
 *   .woocommerce-tabs ul.tabs { border-bottom:1px solid #dcdcdc }
 *   .woocommerce-tabs ul.tabs li { background-color:#dcdcdc }
 *   .woocommerce-tabs ul.tabs li.active,.woocommerce-tabs ul.tabs li:hover { background:#fff; border:#dcdcdc }
 *   .woocommerce-tabs #tab-description h3 { color: var(--rbb-title-color) } (ya oscuro) */
body.as-modo-oscuro .woocommerce-tabs ul.tabs {
  border-bottom-color: var(--as-border);
}

body.as-modo-oscuro .woocommerce-tabs ul.tabs li {
  background-color: var(--as-bg-alt);
  border-color: var(--as-border);
  color: var(--as-text-soft);
}

body.as-modo-oscuro .woocommerce-tabs ul.tabs li.active,
body.as-modo-oscuro .woocommerce-tabs ul.tabs li:hover {
  background-color: var(--as-card);
  border-color: var(--as-border);
  border-bottom-color: var(--as-card);
  color: var(--as-text);
}

body.as-modo-oscuro .woocommerce-tabs ul.tabs li a {
  color: inherit;
}

body.as-modo-oscuro .woocommerce-tabs ul.tabs li a::before {
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--as-bg-deep) 55%, transparent));
}

body.as-modo-oscuro .woocommerce-tabs #tab-description ul li::before {
  border-color: var(--as-border-strong);
}

/* --------------------------------------------------------------------------
 * 8. Formularios (§8.6)
 *
 * Una sola regla de alta especificidad para todos los campos del sitio (salvo
 * checkbox/radio, botones y envío): el padre pinta `background-color:#fff` en
 * `[type=text]…` (selector de atributo, 0,1,0) y varios widgets con clases
 * propias. Con `:is(…:not(…))` la especificidad supera la de esos selectores
 * sin recurrir a `!important`.
 * ------------------------------------------------------------------------ */

body.as-modo-oscuro :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="file"]):not([type="range"]):not([type="reset"]):not([type="color"]):not([type="image"]),
  textarea,
  select
) {
  background-color: var(--as-field);
  border: 1px solid var(--as-border-input);
  color: var(--as-text);
}

body.as-modo-oscuro :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="file"]):not([type="range"]):not([type="reset"]):not([type="color"]):not([type="image"]),
  textarea,
  select
):focus {
  border-color: var(--as-gold);
  box-shadow: var(--as-focus-glow);
  outline: 2px solid transparent;
  outline-offset: 0;
}

body.as-modo-oscuro input[type="checkbox"],
body.as-modo-oscuro input[type="radio"] {
  accent-color: var(--as-gold);
  background-color: var(--as-field);
  border-color: var(--as-border-strong);
}

/* Cantidad del carrito / ficha: píldora del padre con borde de color de botón. */
body.as-modo-oscuro.single-product .product-summary form .quantity .qty,
body.as-modo-oscuro .quantity .qty {
  background-color: var(--as-field);
  border-color: var(--as-border-input);
  color: var(--as-text);
}

/* Select2 (país, provincia, dirección). Anula:
 *   .rbb-address__input+span.select2-container .select2-selection { background-color:#fff; border:#ececec }
 *   .rbb-cart__shipping-calculator .select2 .select2-selection { border-color:#dfdfdf } */
body.as-modo-oscuro .select2-container .select2-selection,
body.as-modo-oscuro .rbb-address__input + span.select2-container .select2-selection,
body.as-modo-oscuro .rbb-cart__shipping-calculator .select2 .select2-selection {
  background-color: var(--as-field);
  border-color: var(--as-border-input);
  color: var(--as-text);
}

body.as-modo-oscuro .select2-container .select2-selection .select2-selection__rendered,
body.as-modo-oscuro .rbb-address__input + span.select2-container .select2-selection .select2-selection__rendered {
  color: var(--as-text);
}

body.as-modo-oscuro .select2-dropdown {
  background-color: var(--as-elevated);
  border-color: var(--as-border-strong);
  color: var(--as-text);
}

body.as-modo-oscuro .select2-results__option--highlighted {
  background-color: var(--as-action);
  color: var(--as-text);
}

/* Formulario «Hacer una pregunta» (CF7) dentro del modal de la ficha. */
body.as-modo-oscuro #rbb-contact-form .wpcf7-form h2,
body.as-modo-oscuro #rbb-contact-form .wpcf7-form .sub_title {
  color: var(--as-text);
}

/* El padre aplica a todos los `input` del formulario el ancho y el alto de los
 * campos de texto, así que la casilla de consentimiento se dibujaba como una
 * caja vacía de 400×48. Se devuelve a su tamaño de casilla. */
body.as-modo-oscuro .wpcf7-form input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  min-height: 0;
  margin: 0 0.5rem 0 0;
  padding: 0;
  vertical-align: middle;
  accent-color: var(--as-gold);
}

/* El botón de envío es el CTA dorado del sistema (§8.2). */
body.as-modo-oscuro .wpcf7-form input[type="submit"],
body.as-modo-oscuro .wpcf7-form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--as-cta-border);
  border-radius: var(--radius-pill);
  background-color: var(--as-cta-bg);
  color: var(--as-cta-text);
  font-weight: 700;
}

body.as-modo-oscuro .wpcf7-form input[type="submit"]:hover,
body.as-modo-oscuro .wpcf7-form button[type="submit"]:hover {
  background-color: var(--as-cta-bg-hover);
  color: var(--as-cta-text);
}

body.as-modo-oscuro .wpcf7-not-valid-tip,
body.as-modo-oscuro .wpcf7-form .wpcf7-response-output.wpcf7-validation-errors {
  color: var(--as-danger-text);
  border-color: var(--as-danger-text);
}

/* Títulos que WooCommerce imprime con el literal `#222` (no usan
 * `--rbb-general-heading-color`):
 *   body:not(.logged-in) .woocommerce > h2 { color:#222 }
 *   body:not(.logged-in) #customer_login .u-column1|2 h2 { color:#222 }
 * Son los de «Acceder», «Registrarse» y los de la ficha de cuenta. */
body.as-modo-oscuro:not(.logged-in) .woocommerce > h2,
body.as-modo-oscuro:not(.logged-in) #customer_login .u-column1 h2,
body.as-modo-oscuro:not(.logged-in) #customer_login .u-column2 h2 {
  color: var(--as-text);
}

/* El subrayado decorativo de esos títulos es un `::before` del padre con
 * `background: var(--rbb-general-secondary-color)` al 20 %: sobre navy se lee
 * como un rectángulo gris claro detrás del texto. Se pasa a dorado de marca. */
body.as-modo-oscuro:not(.logged-in) .woocommerce > h2::before,
body.as-modo-oscuro:not(.logged-in) #customer_login .u-column1 h2::before,
body.as-modo-oscuro:not(.logged-in) #customer_login .u-column2 h2::before {
  background: var(--as-gold);
  opacity: 0.25;
}

/* --------------------------------------------------------------------------
 * 9. Tablas y zonas transaccionales (§7.5 y §8.8)
 *
 * Carrito, checkout y cuenta: cero rojo decorativo (§6.4). La profundidad va
 * con cabecera --as-bg-alt, filas alternas --as-row-alt / --as-card y
 * separadores de 1 px; sin sombras ni zebra de colores.
 * Anula: .rbb-cart__table { background-color:#f2f2f2; border:2px solid #f2f2f2 }
 *        .rbb-cart__totals-content { background-color:#f2f2f2 }
 *        .rbb-cart__btn-update { background-color:#f2f2f2; color:#222 }
 *        .rbb-cart__header, .rbb-cart__item … :before { color:#222 }
 *        .rbb-account__order-content / -detail / -no { background-color:#f2f2f2 }
 *        .rbb-checkout__order-content { background-color:#f2f2f2 }
 *        .rbb-checkout__code / __login { background-color:#f2f2f2 }
 *        .rbb-order-received__btn { background-color:#f2f2f2 }        (§9.1)
 *        .rbb-account__list y su ul / a / i en claro                   (§9.2)
 *        .rbb-account__dashboard-top / -address-top / -address-content
 *        y .rbb-account__item { background-color|border-color:#f2f2f2 } (§9.3)
 * ------------------------------------------------------------------------ */

body.as-modo-oscuro .cart-template .rbb-cart__table,
body.as-modo-oscuro .cart-template .rbb-cart__table-header,
body.as-modo-oscuro .cart-template .rbb-cart__totals-content,
body.as-modo-oscuro .cart-template .rbb-cart__totals,
body.as-modo-oscuro .checkout-template .rbb-checkout__order-content,
body.as-modo-oscuro .checkout-template .rbb-checkout__code,
body.as-modo-oscuro .checkout-template .rbb-checkout__login,
body.as-modo-oscuro .rbb-account__order-content,
body.as-modo-oscuro .rbb-account__order-detail,
body.as-modo-oscuro .rbb-account__order-no {
  background-color: var(--as-card);
  border-color: var(--as-border);
}

body.as-modo-oscuro .cart-template .rbb-cart__table-header {
  background-color: var(--as-bg-alt);
  color: var(--as-text-soft);
}

body.as-modo-oscuro .cart-template .rbb-cart__header,
body.as-modo-oscuro .cart-template .rbb-cart__item .rbb-cart__table-col::before,
body.as-modo-oscuro .rbb-account__item .rbb-account__table-col::before,
body.as-modo-oscuro .rbb-account__order-list a {
  color: var(--as-text-soft);
}

body.as-modo-oscuro .cart-template .rbb-cart__item:nth-child(even) {
  background-color: var(--as-row-alt);
}

body.as-modo-oscuro .cart-template .rbb-cart__totals-sub,
body.as-modo-oscuro .cart-template .rbb-cart__shipping-calculator,
body.as-modo-oscuro .cart-template .rbb-cart__totals,
body.as-modo-oscuro .checkout-template .rbb-checkout__price-total,
body.as-modo-oscuro .checkout-template .rbb-checkout__order-content .border-b,
body.as-modo-oscuro .rbb-account__order-detail-subtotal {
  border-color: var(--as-border);
}

body.as-modo-oscuro .cart-template .rbb-cart__btn-update {
  background-color: var(--as-bg-alt);
  border: 1px solid var(--as-border-strong);
  color: var(--as-text);
}

body.as-modo-oscuro .cart-template .rbb-cart__btn-update:hover {
  background-color: var(--as-card-hover);
  color: var(--as-text);
}

body.as-modo-oscuro .cart-template .rbb-cart__coupon input {
  border-color: var(--as-border-input);
}

body.as-modo-oscuro .cart-template .rbb-cart__product-image,
body.as-modo-oscuro .rbb-cart__product-image {
  border-color: var(--as-border);
  background-color: var(--as-field);
}

body.as-modo-oscuro .order-total .woocommerce-Price-amount,
body.as-modo-oscuro .cart-template .rbb-cart__totals-content .woocommerce-Price-amount {
  color: var(--as-gold);
  font-weight: 700;
}

/* Icono de eliminar del carrito: el padre lo deja en el color de enlace. Como
 * *texto/icono* de peligro se usa `--as-danger-text` (§7.6 y §8.2). */
body.as-modo-oscuro .cart-template .rbb-cart__remove .remove,
body.as-modo-oscuro .cart-template .rbb-cart__remove a {
  color: var(--as-danger-text);
}

body.as-modo-oscuro .cart-template .rbb-cart__remove .remove:hover,
body.as-modo-oscuro .cart-template .rbb-cart__remove a:hover {
  color: var(--as-warning-text);
}

/* Tablas nativas de WooCommerce (por si el widget no usa la plantilla RBB). */
body.as-modo-oscuro table.shop_table,
body.as-modo-oscuro .woocommerce-checkout-review-order-table,
body.as-modo-oscuro .woocommerce-orders-table {
  background-color: var(--as-card);
  border-color: var(--as-border);
  color: var(--as-text-body);
}

body.as-modo-oscuro table.shop_table th,
body.as-modo-oscuro .woocommerce-checkout-review-order-table th {
  background-color: var(--as-bg-alt);
  color: var(--as-text-soft);
}

body.as-modo-oscuro table.shop_table td,
body.as-modo-oscuro .woocommerce-checkout-review-order-table td {
  border-color: var(--as-border);
}

body.as-modo-oscuro table.shop_table tbody tr:nth-child(even) td {
  background-color: var(--as-row-alt);
}

body.as-modo-oscuro table.shop_table tbody tr:hover td {
  background-color: var(--as-card-hover);
}

/* Aviso de «carrito vacío» y botón de vuelta a la tienda. */
body.as-modo-oscuro .woocommerce-cart .woocommerce .return-to-shop .button {
  border-color: var(--as-border-strong);
  color: var(--as-text);
}

/* Direcciones y pedidos de «Mi cuenta». Anula `.rbb-account__order-list a{color:#222}`
 * (ya cubierto arriba) y los fondos #f2f2f2 de las tarjetas. */
body.as-modo-oscuro .woocommerce-MyAccount-content .woocommerce-Address,
body.as-modo-oscuro .woocommerce-MyAccount-content .woocommerce-address-fields,
body.as-modo-oscuro .woocommerce-form-track-order {
  background-color: var(--as-card);
  border: 1px solid var(--as-border);
}

/* --- 9.1 Pedido recibido: celdas del resumen del pedido -------------------
 *
 * `checkout/thankyou.php` del padre imprime las cuatro celdas del resumen con
 * `.rbb-order-received__btn`, que en `_thank-you.scss` solo cambia el fondo:
 *   .rbb-order-received__btn { background-color:#f2f2f2 }
 * La tinta que llega ahí es `--as-text-body` (heredada del <body>), así que
 * «Número de pedido», «Fecha», «Total» y «Método de pago» salían en 1.17:1
 * sobre #F2F2F2. No hay borde que anular: la píldora es solo fondo y radio.
 * Se conserva el tamaño del marcado (`h-14 leading-[58px] rounded-lg truncate`)
 * y la jerarquía etiqueta/valor: la etiqueta pasa a `--as-text-soft` (9.44:1) y
 * el valor, que ya va en <strong> con peso 700, a `--as-text` (13.18:1). */
body.as-modo-oscuro .woocommerce-order-overview .rbb-order-received__btn {
  background-color: var(--as-card);
  color: var(--as-text-soft);
}

body.as-modo-oscuro .woocommerce-order-overview .rbb-order-received__btn strong {
  color: var(--as-text);
}

/* --- 9.2 Menú lateral de «Mi cuenta» --------------------------------------
 *
 * El padre pinta en claro el contenedor, la lista y los separadores:
 *   .rbb-account__list    { border-color:#f2f2f2 }  (el marcado añade border-2)
 *   .rbb-account__list ul { background-color:#f2f2f2 }
 *   .rbb-account__list a  { border-color:#dfdfdf }
 *   .rbb-account__list i  { color:#7d7d7d }
 * Los enlaces quedan en `--as-link` (#8cc9f0, vía `--rbb-general-link-color`):
 * 1.6:1 sobre #F2F2F2 y 7.90:1 sobre `--as-card`, así que no hace falta tocar su
 * color ni su hover. El ítem activo, en cambio, lo marca el padre con
 * `--rbb-general-primary-color` (#2268b4): 5.16:1 sobre el claro del padre pero
 * 2.5:1 sobre la tarjeta, de modo que aquí se pasa al dorado del patrón 4
 * (§6.3), el mismo color del ítem activo en el menú móvil (7.56:1). Los iconos
 * usan `--as-blue`, el token de iconos (6.09:1 sobre tarjeta), y los separadores
 * el borde decorativo `--as-border`, como en el resto de §9. */
body.as-modo-oscuro .rbb-account__list {
  border-color: var(--as-border);
}

body.as-modo-oscuro .rbb-account__list ul {
  background-color: var(--as-card);
}

body.as-modo-oscuro .rbb-account__list a {
  border-color: var(--as-border);
}

body.as-modo-oscuro .rbb-account__list i {
  color: var(--as-blue);
}

body.as-modo-oscuro .rbb-account__list ul li.is-active a,
body.as-modo-oscuro .rbb-account__list ul li.is-active a i {
  color: var(--as-gold);
}

/* --- 9.3 Franjas de aviso y tarjetas de dirección -------------------------
 *
 *   .rbb-account__dashboard-top { background-color:#f2f2f2;
 *                                 border-color: var(--rbb-general-primary-color) }
 *   .rbb-account__address-top   { background-color:#f2f2f2;
 *                                 border-color: var(--rbb-general-primary-color) }
 *   .rbb-account__address-content { background-color:#f2f2f2;
 *                                   border-color:#f2f2f2 }
 *   .rbb-account__item          { border-color:#f2f2f2 }
 * El saludo «Hola … (¿no eres …? Cerrar sesión)» salía en 1.17:1 y «Editar» en
 * 1.6:1; los títulos «Dirección de facturación» y «Dirección de envío», ya en
 * `--as-text`, en 1.04:1. Las franjas superiores de 3 y 5 px conservan su
 * función de acento con `--as-border-strong` (3.06:1 sobre la tarjeta, umbral
 * de 3:1 para elementos no textuales); las tarjetas y las filas de pedido usan
 * el borde decorativo `--as-border`. `.rbb-account__item:last-child` sigue sin
 * borde por la regla del padre. */
body.as-modo-oscuro .rbb-account__dashboard-top,
body.as-modo-oscuro .rbb-account__address-top {
  background-color: var(--as-card);
  border-color: var(--as-border-strong);
  color: var(--as-text-body);
}

/* El nombre de usuario va en <strong>: mismo peso visual que antes sobre el
 * fondo claro, ahora con `--as-text` (13.18:1) frente al cuerpo del aviso. */
body.as-modo-oscuro .rbb-account__dashboard-top strong {
  color: var(--as-text);
}

body.as-modo-oscuro .rbb-account__address-content {
  background-color: var(--as-card);
  border-color: var(--as-border);
}

body.as-modo-oscuro .rbb-account__item {
  border-color: var(--as-border);
}

/* --------------------------------------------------------------------------
 * 10. Modales y minicarrito (superficies elevadas, §7.4 y §7.6)
 *
 * Sin rojo decorativo aquí: sobre --as-elevated el rojo baja de 3:1 (§6.4).
 * Anula: .rbb-modal .rbb-modal-dialog .rbb-modal-header .rbb-close-modal
 *          { background:#fff; color:#fff } y los :before/:after { background:#000 }
 *        #rbb-contact-form .rbb-modal-body { background:#fff }
 *        body .account-form-popup { background:#fff }
 *        .pswp__scroll-wrap { background-color:#fff }
 * ------------------------------------------------------------------------ */

body.as-modo-oscuro .rbb-modal .rbb-modal-dialog {
  background-color: var(--as-elevated);
  border: 1px solid var(--as-border-strong);
  box-shadow: var(--shadow-xl);
}

/* Excepción del splash promocional, solo en la variante `promotion`
 * (#rbb-promotion-popup.promotion). Su contenido es mascota.png (PNG con
 * transparencia): sobre --as-elevated la transparencia deja ver un cuadrado
 * azul alrededor de la mascota, más borde y sombra. La variante `newsletter`
 * tiene un panel .popup-content opaco y necesita superficie, así que conserva
 * la regla global. El resto de modales (contacto, cuenta, quick view, filtros)
 * también conserva la superficie opaca. */
body.as-modo-oscuro #rbb-promotion-popup.promotion .rbb-modal-dialog {
  background-color: transparent;
  border: 0;
  box-shadow: none;
}

body.as-modo-oscuro .rbb-modal .rbb-modal-header {
  background-color: transparent;
  border-color: var(--as-border);
}

body.as-modo-oscuro .rbb-modal .rbb-modal-dialog .rbb-modal-header .rbb-close-modal {
  background-color: var(--as-card);
  color: var(--as-text);
}

body.as-modo-oscuro .rbb-modal .rbb-modal-dialog .rbb-modal-header .rbb-close-modal::before,
body.as-modo-oscuro .rbb-modal .rbb-modal-dialog .rbb-modal-header .rbb-close-modal::after {
  background-color: var(--as-text);
}

body.as-modo-oscuro #rbb-contact-form .rbb-modal-body,
body.as-modo-oscuro body .account-form-popup,
body.as-modo-oscuro .account-form-popup .rbb-modal-dialog .rbb-modal-body {
  background-color: var(--as-elevated);
  color: var(--as-text-body);
}

body.as-modo-oscuro .pswp__scroll-wrap,
body.as-modo-oscuro .pswp__scroll-wrap .pswp__container {
  background-color: var(--as-bg-deep);
}

/* Minicarrito lateral: panel --as-elevated con borde fuerte y sombra XL.
 * Anula: .rbb-mini-cart-canvas .cart-right .mini-cart-content-inner .mini_scroll
 *          { background:#f2f2f2 }
 *        .mini-cart-content-inner .woocommerce-mini-cart__buttons a.wc-forward:first-child
 *          { background-color:#fff; border:#dfe1e6; color: var(--rbb-general-button-color) }
 *        .rbb-mini-cart-canvas … .woocommerce-mini-cart-item a { color:#111417 } (tienda.css) */
body.as-modo-oscuro .rbb-mini-cart-canvas .cart-right .mini-cart-content-inner .mini_scroll {
  background-color: var(--as-elevated);
}

body.as-modo-oscuro .rbb-mini-cart-canvas .woocommerce-mini-cart-item a:not(.remove) {
  color: var(--as-text);
}

body.as-modo-oscuro .rbb-mini-cart-canvas .mini-cart-content-inner .woocommerce-mini-cart__buttons a.wc-forward:first-child {
  background-color: transparent;
  border: 2px solid var(--as-border-strong);
  color: var(--as-text);
}

body.as-modo-oscuro .rbb-mini-cart-canvas .mini-cart-content-inner .woocommerce-mini-cart__buttons a.wc-forward:first-child:hover {
  background-color: transparent;
  border-color: var(--as-gold);
  color: var(--as-gold);
}

body.as-modo-oscuro .rbb-mini-cart-canvas .woocommerce-mini-cart-item .product-image,
body.as-modo-oscuro .rbb-mini-cart .woocommerce-mini-cart-item .product-image {
  border-color: var(--as-border);
  background-color: var(--as-field);
}

body.as-modo-oscuro .rbb-mini-cart-canvas .woocommerce-mini-cart__total {
  border-top-color: var(--as-border-strong);
  color: var(--as-text);
}

/* --------------------------------------------------------------------------
 * 11. Lista de deseos y comparación (plugins woosw / woosc)
 *
 * Anula: .woosw-popup … .woosw-popup-content { background:#fff }
 *        … .woosw-popup-content-top { background-color:#fff }
 *        .woosw-popup-content-bot a { background:#efefef }
 *        .woosw-content-bot .woosw-notice { background:#eef6f0; border:#a2e0af }
 *        #woosc-area … table tbody tr:nth-child(2n) td { background-color:#f8f8f8 }
 *        .woosc-quick-table … thead th { background-color:#f8f8f8 }
 *        .woosw-list table.woosw-items tr { border:1px solid <color de botón> }
 * ------------------------------------------------------------------------ */

body.as-modo-oscuro .woosw-popup .woosw-popup-inner .woosw-popup-content,
body.as-modo-oscuro .woosw-popup .woosw-popup-inner .woosw-popup-content .woosw-popup-content-top,
body.as-modo-oscuro .woosw-popup .woosw-popup-inner .woosw-popup-content .woosw-popup-content-bot {
  background-color: var(--as-elevated);
  border-color: var(--as-border-strong);
}

body.as-modo-oscuro .woosw-popup .woosw-popup-content-mid .woosw-items .woosw-item {
  border-color: var(--as-border);
}

body.as-modo-oscuro .woosw-popup .woosw-popup-content-mid .woosw-items .woosw-item .woosw-item--time,
body.as-modo-oscuro .woosw-popup .woosw-popup-content-top .woosw-count-wrapper {
  color: var(--as-text-muted);
}

body.as-modo-oscuro .woosw-popup .woosw-popup-content-bot a {
  background-color: var(--as-card);
  color: var(--as-text);
}

body.as-modo-oscuro .woosw-popup .woosw-popup-content-bot .woosw-notice {
  background-color: var(--as-success-soft);
  border-color: var(--as-success);
  color: var(--as-text);
}

/* Comparador (plugin woo-smart-compare). Anula, con su misma especificidad más
 * `body.as-modo-oscuro`:
 *   plugin frontend.css: `.woosc-area … tbody tr td { background-color:#ffffff }`
 *   plugin frontend.css: `… tr:nth-child(2n) td { background-color:#fbfbfb }`
 *   plugin frontend.css: `… tr.tr-highlight td { background-color:#fff8d9 }`
 *   tema padre: `#woosc-area … tr:nth-child(2n) td { background-color:#f8f8f8 }`
 *   tema padre: `.woosc-page thead th / tbody tr:nth-child(2n) td { background:#f2f2f2 }`
 *              `.woosc-quick-table … thead th / tbody tr:nth-child(2n) td { background:#f8f8f8 }` */
body.as-modo-oscuro #woosc-area .woosc-inner .woosc-table .woosc-table-inner .woosc-table-items table tbody tr td,
body.as-modo-oscuro .woosc-area .woosc-inner .woosc-table .woosc-table-inner .woosc-table-items table tbody tr td,
body.as-modo-oscuro .woosc-page tbody tr td {
  background-color: var(--as-card);
  color: var(--as-text-body);
}

body.as-modo-oscuro #woosc-area .woosc-inner .woosc-table .woosc-table-inner .woosc-table-items table tbody tr:nth-child(2n) td,
body.as-modo-oscuro .woosc-area .woosc-inner .woosc-table .woosc-table-inner .woosc-table-items table tbody tr:nth-child(2n) td,
body.as-modo-oscuro .woosc-page tbody tr:nth-child(2n) td,
body.as-modo-oscuro .woosc-quick-table .woosc-quick-table-products tbody tr:nth-child(2n) td {
  background-color: var(--as-row-alt);
}

body.as-modo-oscuro #woosc-area .woosc-inner .woosc-table .woosc-table-inner .woosc-table-items table tbody tr.tr-highlight td,
body.as-modo-oscuro .woosc-page tr.tr-highlight td {
  background-color: var(--as-gold-soft);
  border-bottom-color: var(--as-gold-strong);
  color: var(--as-text);
}

body.as-modo-oscuro .woosc-page thead th,
body.as-modo-oscuro .woosc-quick-table .woosc_table th,
body.as-modo-oscuro .woosc-quick-table .woosc-quick-table-products thead th {
  background-color: var(--as-bg-alt);
  color: var(--as-text-soft);
}

/* Tabla «Comparación rápida» del plugin (va fuera de #woosc-area).
 * Anula: .woosc-quick-table .woosc_table th, … td { background-color:#ffffff } y
 *        .woosc-quick-table .woosc_table th, … tr:nth-child(2n) td { #fbfbfb }. */
body.as-modo-oscuro .woosc-quick-table .woosc_table td {
  background-color: var(--as-card);
  color: var(--as-text-body);
}

body.as-modo-oscuro .woosc-quick-table .woosc_table tr:nth-child(2n) td {
  background-color: var(--as-row-alt);
}

body.as-modo-oscuro #woosc-area .woosc-inner .woosc-table .woosc-table-inner .woosc-table-items table tbody tr td,
body.as-modo-oscuro .woosc-quick-table .woosc-quick-table-products tbody tr td {
  color: var(--as-text-body);
}

body.as-modo-oscuro .woosc-table-open tbody tr .woocommerce-Price-amount,
body.as-modo-oscuro .woosc-quick-table .woosc-quick-table-products tbody tr td .woocommerce-Price-amount {
  color: var(--as-gold);
}

body.as-modo-oscuro .woosc-table-open tbody tr del .woocommerce-Price-amount bdi,
body.as-modo-oscuro .woosc-quick-table .woosc-quick-table-products tbody tr td del .woocommerce-Price-amount bdi,
body.as-modo-oscuro #primary .woosw-list table.woosw-items tr td .woosw-item--price del {
  color: var(--as-price-old);
}

/* Las tarjetas del comparador no son la ficha: el CTA sigue siendo el dorado
 * (no rojo) y el texto, navy sobre dorado (§8.2). */
body.as-modo-oscuro .woosc-table-open tbody tr .button,
body.as-modo-oscuro .woosc-quick-table .woosc_table td .button,
body.as-modo-oscuro .woosc-page tbody tr td .add_to_cart_button,
body.as-modo-oscuro .woosc-page tbody tr td .product_type_simple {
  background-color: var(--as-cta-bg);
  border: 1px solid var(--as-cta-border);
  color: var(--as-cta-text);
}

body.as-modo-oscuro .woosc-table-open tbody tr .button:hover,
body.as-modo-oscuro .woosc-quick-table .woosc_table td .button:hover,
body.as-modo-oscuro .woosc-page tbody tr td .add_to_cart_button:hover,
body.as-modo-oscuro .woosc-page tbody tr td .product_type_simple:hover {
  background-color: var(--as-cta-bg-hover);
  color: var(--as-cta-text);
}

/* Popup del comparador (buscar productos y ajustes). Anula el CSS del plugin
 * `woo-smart-compare/frontend.css`:
 *   .woosc-popup … .woosc-popup-content { background-color:#fff }
 *   … .woosc-search-input input { color:#222; background-color:#f2f2f2 }
 *   … .woosc-search-result ul li .item-inner .item-name { color:#222 }
 *   … .item-add span { color:#222; background-color:#f2f2f2 }
 *   … .woosc-settings-field-li / .ui-sortable-handle (heredaban #D8E2F0)
 * Es superficie elevada (§7.4), sin rojo decorativo. */
body.as-modo-oscuro .woosc-popup .woosc-popup-inner .woosc-popup-content {
  background-color: var(--as-elevated);
  border: 1px solid var(--as-border-strong);
  color: var(--as-text);
  box-shadow: var(--shadow-xl);
}

body.as-modo-oscuro .woosc-popup .woosc-popup-inner .woosc-popup-content .woosc-popup-content-inner .woosc-search-input input {
  background-color: var(--as-field);
  border: 1px solid var(--as-border-input);
  color: var(--as-text);
}

body.as-modo-oscuro .woosc-popup .woosc-search-result ul li {
  border-color: var(--as-border);
}

body.as-modo-oscuro .woosc-popup .woosc-search-result ul li .item-inner .item-name {
  color: var(--as-text);
}

body.as-modo-oscuro .woosc-popup .woosc-search-result ul li .item-inner .item-add span {
  background-color: var(--as-card);
  border: 1px solid var(--as-border-strong);
  color: var(--as-text);
}

body.as-modo-oscuro .woosc-popup .woosc-search-result ul li .item-inner .item-add span:hover {
  background-color: var(--as-gold);
  border-color: var(--as-gold-strong);
  color: var(--as-on-gold);
}

body.as-modo-oscuro .woosc-popup .woosc-settings-field-li,
body.as-modo-oscuro .woosc-popup .woosc-settings-field-li .move,
body.as-modo-oscuro .woosc-popup .woosc-table-settings {
  color: var(--as-text);
}

body.as-modo-oscuro .woosc-popup .woosc-settings-field-li {
  border-color: var(--as-border);
}

/* --------------------------------------------------------------------------
 * 12. Pie y botón «volver arriba»
 * ------------------------------------------------------------------------ */

/* Volver arriba: el fondo y el icono vienen de theme_mods (--as-action y tinta
 * clara). Solo se corrige la sombra genérica del padre. */
body.as-modo-oscuro .scroll-to-top {
  box-shadow: var(--shadow-md);
}

/* --------------------------------------------------------------------------
 * 13. Preferencias del usuario (§6.5, §8 y accesibilidad)
 * ------------------------------------------------------------------------ */

/* Movimiento reducido: la hairline de tarjeta y el subrayado de «Ver más»
 * aparecen sin transición (la información nunca depende de la animación). */
@media (prefers-reduced-motion: reduce) {
  .as-card::before,
  body.as-modo-oscuro .rbb_woo_products .item-product::before,
  body.as-modo-oscuro .item-product-cat-content::before,
  .link-more {
    transition: none;
  }
}

/* Contraste alto: las rayitas pasan a 3 px y el subrayado del ítem activo se
 * refuerza (§6.5). No se añade información nueva: el estado ya va en texto,
 * peso y aria-current. */
@media (prefers-contrast: more) {
  :root {
    --as-rule-w: 3px;
  }

  body.as-modo-oscuro .rbb-default-header .rbb-main-navigation ul.menu-container li.level-1.current-menu-item > a .menu-item-title::after,
  body.as-modo-oscuro .rbb-default-header .rbb-main-navigation ul.menu-container li.level-1.current_page_item > a .menu-item-title::after,
  body.as-modo-oscuro .rbb-default-header .rbb-main-navigation ul.menu-container li.level-1.current-menu-ancestor > a .menu-item-title::after {
    height: 3px;
  }

  body.as-modo-oscuro .rbb-default-header {
    border-bottom-color: var(--as-border-strong);
  }
}

/* --------------------------------------------------------------------------
 * 14. Franja de logos de marcas de la home (excepción deliberada)
 *
 * Los 12 PNG de `brand-*` son logotipos en gris oscuro con transparencia: sobre
 * navy desaparecen (mismo problema que R-2 con el logo propio). Se convierten
 * en silueta blanca con `filter`, **solo** dentro del carrusel de marcas
 * (`.rbb-elementor-slider.multiple.default`, el único con ese layout y con
 * `.block__content`). No se aplica ningún filtro fuera de esta franja: ni al
 * logo de la cabecera, ni a las fotos de producto, ni al monograma.
 * ------------------------------------------------------------------------ */

body.as-modo-oscuro .rbb-elementor-slider.multiple.default .block__content img {
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

body.as-modo-oscuro .rbb-elementor-slider.multiple.default .block__content:hover img {
  opacity: 1;
}

/* --------------------------------------------------------------------------
 * 15. Páginas legales (§8.10 de la especificación)
 *
 * Solo el cuerpo del documento (`article#post-… .entry-content`) de las tres
 * páginas legales (3, 11688, 11724). El padre sirve el texto a 14 px/24 px y a
 * todo el ancho del contenedor: 68 ch, 18 px, 1.75 de interlineado, alineado a
 * la izquierda. Cero rojo y cero animaciones en estas páginas.
 * ------------------------------------------------------------------------ */

body.as-modo-oscuro:is(.page-id-3, .page-id-11688, .page-id-11724) :is(#post-3, #post-11688, #post-11724) .entry-content {
  max-width: 68ch;
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--as-text-body);
  text-align: left;
}

body.as-modo-oscuro:is(.page-id-3, .page-id-11688, .page-id-11724) :is(#post-3, #post-11688, #post-11724) .entry-content :is(h2, h3) {
  margin-top: 2em;
  padding-bottom: 0.35em;
  border-bottom: 1px solid var(--as-border);
  color: var(--as-text);
}

body.as-modo-oscuro:is(.page-id-3, .page-id-11688, .page-id-11724) :is(#post-3, #post-11688, #post-11724) .entry-content a {
  color: var(--as-link);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

body.as-modo-oscuro:is(.page-id-3, .page-id-11688, .page-id-11724) :is(#post-3, #post-11688, #post-11724) .entry-content a:hover {
  color: var(--as-link-hover);
}

body.as-modo-oscuro:is(.page-id-3, .page-id-11688, .page-id-11724) :is(#post-3, #post-11688, #post-11724) .entry-content ul {
  margin: 0 0 1em;
  padding-left: 1.25em;
}

body.as-modo-oscuro:is(.page-id-3, .page-id-11688, .page-id-11724) :is(#post-3, #post-11688, #post-11724) .entry-content li {
  margin-bottom: 0.5em;
  list-style: none;
}

/* Viñeta dorada de 6 px (§8.10). El padre elimina el marcador de lista. */
body.as-modo-oscuro:is(.page-id-3, .page-id-11688, .page-id-11724) :is(#post-3, #post-11688, #post-11724) .entry-content li::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 0.6em;
  border-radius: 50%;
  background-color: var(--as-gold);
  vertical-align: middle;
}

/* --------------------------------------------------------------------------
 * 16. CTA en píldora de los banners y subtítulo sobre foto (G-1 y G-2)
 * ------------------------------------------------------------------------ */

/* G-1 — Los CTA de los banners son píldoras cuyo fondo pinta Elementor con
 * `var(--as-yellow)` (reglas del tipo
 * `.elementor-11297 .elementor-element.elementor-element-… .elementor-repeater-item-…`
 * con `background-color: var(--as-yellow)`), mientras el padre conserva
 * `.rbb-button { color: #fff }`. Blanco sobre el amarillo del CTA = 1.45:1.
 * Se acota a las píldoras (`rounded-[48px]` / `rounded-[50px]`, el estilo real
 * del botón): los `.rbb-button` de texto —sin píldora y con fondo transparente
 * sobre tarjeta oscura— conservan su tinta clara, y los que van sobre las fotos
 * claras de la sección de consejos conservan su color oscuro. */
body.as-modo-oscuro .rbb-button.btn:is(.rounded-\[48px\], .rounded-\[50px\]),
body.as-modo-oscuro .rbb-button.btn:is(.rounded-\[48px\], .rounded-\[50px\]) .button-text {
  color: var(--as-on-gold);
}

/* G-2 — El `.sub_title` de los banners se sirve con el primario de Kirki
 * (`#2268B4`, 3.22:1 sobre navy) y el de «Cuida tu vehículo durante todo el
 * año» queda sobre la foto de estudio `banner0-3.jpg` (fondo blanco, R-1):
 * ahí el token claro daría 1.9:1. Se aplica el recurso que la especificación
 * prevé para texto sobre foto (§8.2 y R-1: velo, nunca blanco a sangre) en la
 * zona del texto, y el subtítulo pasa a `--as-blue-dark` (10.2:1 sobre el velo).
 * Solo la tarjeta que lleva ese subtítulo; el resto de la sección es trabajo en
 * curso de elementor-designer. */
body.as-modo-oscuro .elementor-widget-rbb_banner:has(.sub_title.text-white) .banner-image {
  position: relative;
}

body.as-modo-oscuro .elementor-widget-rbb_banner:has(.sub_title.text-white) .banner-image::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 1;
  height: 58%;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--as-bg-deep) 85%, transparent), transparent);
  pointer-events: none;
}

body.as-modo-oscuro .elementor-widget-rbb_banner:has(.sub_title.text-white) .title_block {
  position: relative;
  z-index: 2;
}

body.as-modo-oscuro .elementor-widget-rbb_banner .title_block .sub_title.text-white {
  color: var(--as-blue-dark);
}

/* --------------------------------------------------------------------------
 * 17. Correcciones de la ronda de QA (2026-10-27)
 * ------------------------------------------------------------------------ */

/* QA-01 — Banda de descripción de la categoría.
 * `.category-product-bottom` ocupa 1440×242 px a sangre y el padre la pinta con
 * `bg-[#f2f2f2]` (utilidad ya anulada arriba → `--as-bg-alt`). Aquí se fija la
 * superficie por si el marcado cambia de utilidad y se pasa el «Ver más +» /
 * «Ver menos −» (`.see_more` / `.see_less`, `#909090`) a tinta secundaria. */
body.as-modo-oscuro .category-product-bottom {
  background-color: var(--as-bg-alt);
}

body.as-modo-oscuro .category-product-bottom :is(.see_more, .see_less, .rbb-accordion-title) {
  color: var(--as-text-muted);
}

/* QA-02 — Panel «TU PEDIDO» del checkout.
 * El padre pinta `.rbb-cart__header` con `#222` y hereda
 * `color: var(--e-global-color-text)` (#7A7A7A, 3.30:1) en
 * `.rbb-checkout__order-content`: rótulo «Envío» y los textos de pago,
 * privacidad y términos. */
body.as-modo-oscuro .rbb-cart__header {
  color: var(--as-text-soft);
}

body.as-modo-oscuro .rbb-checkout__order-content {
  color: var(--as-text-body);
}

/* QA-03 — Foco visible en todo el sitio (WCAG 2.4.7).
 * El padre anula el contorno (`a:active,a:hover{outline:0}`) y solo el portal,
 * el CTA y los campos de WooCommerce tenían anillo. Se aplica el anillo dorado
 * de 3 px + halo del lienzo a cualquier interactivo enfocado con teclado, fuera
 * del ámbito del portal (que ya lo tiene) y sin tocar campos, que conservan su
 * borde dorado + glow propios. */
body.as-modo-oscuro :is(a, button, [role="button"], summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: var(--as-focus-ring);
  outline-offset: var(--as-focus-offset);
  box-shadow: var(--as-focus-halo);
  /* Los enlaces del padre animan `all .3s`: sin esto el anillo aparece
   * desvanecido (1 px y color mezclado) durante ~300 ms. */
  transition: none;
}

/* QA-04 — Hamburguesa del menú móvil.
 * El padre dibuja las tres barras con `background-color:#000` en
 * `.toggle-megamenu::before/::after` y `.icon-directional::before`: negro sobre
 * el navy de la cabecera = 1.09:1. Se atan al color del icono (tinta clara). */
body.as-modo-oscuro .rbb-default-header .toggle-megamenu::before,
body.as-modo-oscuro .rbb-default-header .toggle-megamenu::after,
body.as-modo-oscuro .rbb-default-header .toggle-megamenu .icon-directional::before,
body.as-modo-oscuro .rbb-default-header .toggle-megamenu .icon-directional::after {
  background-color: currentColor;
}

/* M-4 — Selector de categoría en móvil.
 * `.rbb_woo_products.default .select-styled, … .layout-3 .select-styled` fija
 * `background-color:#f1f1f1` con el texto claro heredado (1.16:1). Pasa a campo
 * oscuro con borde de control. */
body.as-modo-oscuro .rbb_woo_products .select-wrap .select-styled {
  background-color: var(--as-field);
  border: 1px solid var(--as-border-input);
  color: var(--as-text);
}

/* QA-01 (bis) — El degradado de «leer más» del bloque de descripción está
 * pintado con el mismo `#f2f2f2`:
 *   .category-product-bottom .rbb-accordion:not(.active) .product-desc:before
 *     { background: linear-gradient(0deg,#f2f2f2e6,#f2f2f21a) }
 * Sobre la banda navy quedaba una franja gris. Se funde al color de la banda. */
body.as-modo-oscuro .category-product-bottom .rbb-accordion:not(.active) .product-desc::before {
  background: linear-gradient(0deg, color-mix(in srgb, var(--as-bg-alt) 90%, transparent), transparent);
}

/* Etiquetas del bloque «TODAS LAS ETIQUETAS» (`.tags-link a` y
 * `.wp-block-tag-cloud a` traen `background:#f2f2f2` con el texto del cuerpo). */
body.as-modo-oscuro .tags-link a,
body.as-modo-oscuro .wp-block-tag-cloud a {
  background-color: var(--as-card);
  color: var(--as-text-soft);
}

/* QA-13 (baja, de paso) — Campo inválido del checkout.
 * La regla genérica de campos de esta hoja (alta especificidad) ganaba al borde
 * de error de `tienda.css`, y el campo inválido conservaba el borde neutro
 * `#54779F`. Se reafirma el borde de error (2 px `--as-danger-text`) con una
 * especificidad mayor que la genérica, acotado a `.woocommerce-invalid`. */
body.as-modo-oscuro :is(
  .woocommerce-invalid input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
  .woocommerce-invalid select,
  .woocommerce-invalid textarea
) {
  border: 2px solid var(--as-danger-text);
}

/* F-08 (revisión de código) — Campo inválido del portal. La regla genérica de
 * campos de esta hoja ganaba a `.as-portal__input[aria-invalid="true"]`
 * (0,2,0): el borde de error se quedaba en el neutro de 1 px. Es la página que
 * captura placa y cédula, así que el indicador debe ser inequívoco. */
body.as-modo-oscuro .as-portal__input[aria-invalid="true"] {
  border: 2px solid var(--as-danger-text);
  box-shadow: inset 0 0 0 1px var(--as-danger-text);
}

/* --------------------------------------------------------------------------
 * 18. Impresión (F-01 de la revisión de código)
 *
 * En pantalla el lienzo es navy y el texto `--as-text-body`; al imprimir, el
 * navegador no pinta fondos pero sí respeta el color del texto, así que ficha,
 * «Pedido recibido», páginas legales y el resultado del portal salían casi en
 * blanco sobre papel blanco. Aquí se fuerza papel claro, se oculta la
 * navegación y la decoración, y se conserva el logo legible.
 *
 * Los colores de papel son los únicos valores fijos del sistema
 * (`--as-print-bg` / `--as-print-ink`, declarados en `style.css`): no
 * pertenecen a la paleta de pantalla y no se pueden expresar con sus tokens.
 * ------------------------------------------------------------------------ */

@media print {
  html.as-modo-oscuro,
  body.as-modo-oscuro {
    color-scheme: light;
    background: var(--as-print-bg) !important;
    color: var(--as-print-ink) !important;
  }

  /* Tinta de papel para todo el texto visible. El padre usa colores con
   * `!important` en algunos metadatos (p. ej. `.product_meta > span
   * span:first-child`), así que hace falta una especificidad mayor:
   * `:not(#as-print)` aporta la de un id sin depender de un id real (ese id no
   * existe en el marcado) y `*` cubre cualquier etiqueta. */
  body.as-modo-oscuro :not(#as-print) * {
    color: var(--as-print-ink) !important;
    text-shadow: none !important;
  }

  /* Sin superficies ni sombras de pantalla. */
  body.as-modo-oscuro :is(
    section, article, header, footer, nav, aside, main, div, form, table, thead, tbody, tr, td, th, ul, ol, li, figure
  ) {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  /* Enlaces: subrayados, sin depender del color. */
  body.as-modo-oscuro a,
  body.as-modo-oscuro a:visited {
    color: var(--as-print-ink) !important;
    text-decoration: underline !important;
  }

  /* Fuera de papel: cabecera fija, menús, buscador, carrito, modales, controles
   * flotantes y botones de acción. El bloque de cabecera se conserva para el
   * logo, pero sin navegación ni iconos. */
  /* Se oculta la navegación, los iconos y los controles; la marca se conserva. */
  body.as-modo-oscuro :is(
    .rbb-main-navigation, .rbb-header-center, .header-right-group,
    .rbb-account, .rbb-wishlist, .rbb-mini-cart, .rbb-mini-cart-canvas,
    .rbb-modal, .canvas-menu, .rbb-product-search, .vertical-menu,
    .header-mobile, .toggle-megamenu, .header-top-center,
    .woosc-popup, .woosw-popup, .rbb-promotion-popup, #rbb-promotion-popup,
    .scroll-to-top, .rbb-breadcrumb, .rbb-product-catalog .category-top-bar,
    .woocommerce-pagination, .woosw-btn, .woosc-btn, .rbb-slick-button,
    button, .button, .add_to_cart_button, .single_add_to_cart_button
  ) {
    display: none !important;
  }

  /* La cabecera fija se convierte en una franja estática mínima con el logo. */
  body.as-modo-oscuro .rbb-default-header,
  body.as-modo-oscuro .rbb-header-sticky,
  body.as-modo-oscuro .rbb-header-sticky > div {
    position: static !important;
    height: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  /* Controles de formulario: sobre papel, fondo blanco y borde de tinta. */
  body.as-modo-oscuro :is(input, select, textarea) {
    background: transparent !important;
    border-color: var(--as-print-ink) !important;
    box-shadow: none !important;
  }

  /* Líneas rojas decorativas y filetes: no se imprimen. */
  body.as-modo-oscuro :is(
    .rbb-default-header::before, .rbb-default-header::after,
    .as-card::before, .item-product::before, .item-product-cat-content::before,
    .as-band-sep::after, .as-band--diagonal::after
  ) {
    display: none !important;
  }

  /* El logo de la cabecera es la variante clara (wordmark blanco): en papel se
   * imprime la variante oscura original (adjunto 11218) para que se lea. */
  body.as-modo-oscuro :is(img.logo, img.sticky-logo) {
    content: url("https://autosandoval.com/wp-content/uploads/2026/10/logo-autosandoval-300x122.png");
    filter: none;
  }

  /* Saltos de página sanos en documentos largos (legales, ficha). */
  body.as-modo-oscuro :is(h1, h2, h3) {
    break-after: avoid-page;
  }

  body.as-modo-oscuro :is(img, table, figure) {
    break-inside: avoid-page;
  }
}

/* --------------------------------------------------------------------------
 * 19. Aire en las tarjetas de /tienda/ (observación 3 del cliente, 2026-10-27)
 *
 * «Agregar paddings y márgenes en las cards de esa vista porque están los
 * textos e imágenes muy pegados a los marcos». Se usa la escala `--space-*` y
 * una sola medida para las dos familias de tarjeta.
 *
 * Marcado real:
 *   producto  .products-category .item > .item-product
 *               > .product-content > .thumbnail-container > a (placa 1:1)
 *                                 > .product_info > .product_info-bottom
 *   categoría .content-categories .items > .item-product-cat-content
 *               > .img-cate (placa 1:1) + .content > .item-title + div (N productos)
 * ------------------------------------------------------------------------ */

/* 19.1 Tarjeta de producto: 12 px entre el marco y la placa, y 16/12 en el
 * bloque de título, precio y botón. La placa conserva su padding del 8 % y la
 * proporción 1:1 (el ancho lo fija el contenedor). */
body.as-modo-oscuro .rbb_woo_products .item-product,
body.as-modo-oscuro .rbb-product-catalog .products-category .item .item-product {
  padding: var(--space-sm);
}

body.as-modo-oscuro .item-product .product_info-bottom {
  /* El padre trae `pt-4` y `md:px-0`: el texto quedaba pegado al canto. */
  padding: var(--space-md) var(--space-sm) var(--space-sm);
}

/* 19.2 Tarjeta de categoría: padding interno, placa 1:1 que se adapta al ancho
 * útil, y título de dos líneas reservadas para que todas las tarjetas midan lo
 * mismo y el «N productos» nunca quede fuera del marco. */
body.as-modo-oscuro .item-product-cat-content {
  padding: var(--space-sm) var(--space-sm) var(--space-md);
  overflow-wrap: anywhere;
}

body.as-modo-oscuro .item-product-cat-content .img-cate {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  align-self: center;
}

body.as-modo-oscuro .item-product-cat-content .content {
  padding-top: var(--space-md);
}

body.as-modo-oscuro .item-product-cat-content .item-title {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.6em;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

body.as-modo-oscuro .item-product-cat-content .content > div:last-child {
  line-height: 1.4;
}