/* ==========================================================================
   Tema oscuro de la tienda pública
   --------------------------------------------------------------------------
   Solo se carga cuando Ajustes > Apariencia > Tema es «Oscuro» o «Automático»
   (header.php). Todo cuelga de body[data-ui-theme="dark"]: en automático el
   script de cabecera cambia el atributo según el sistema del visitante.

   1. Tokens: grises invertidos, superficies y líneas. Los colores de marca
      aclarados (--color-accent, --color-primary…) los calcula PHP a partir de
      Ajustes y van en línea en header.php.
   2. Ajustes por componente donde las hojas usan colores fijos.
   ========================================================================== */

/*------------------------------------*\
  #1. TOKENS
\*------------------------------------*/
html:has(body[data-ui-theme="dark"]) {
    scrollbar-color: #3a4852 #10161a;
    background-color: #10161a;
}

body[data-ui-theme="dark"] {
    --dk-bg: #10161a;
    --dk-surface: #172026;
    --dk-raised: #1d2830;
    --dk-sunken: #131b20;
    --dk-ink: #e8eef2;
    --dk-ink-soft: #b4c1ca;
    --dk-ink-faint: #8796a1;
    --dk-line: rgba(255, 255, 255, 0.09);
    --dk-line-strong: rgba(255, 255, 255, 0.16);
    /* Texto sobre un relleno de acento (que en oscuro es claro). */
    --dk-on-accent: #0e1519;

    --color-gray-50: #151d22;
    --color-gray-100: #1b252c;
    --color-gray-200: #26323a;
    --color-gray-300: #34424b;
    --color-gray-400: #6c7b85;
    --color-gray-500: #8796a1;
    --color-gray-600: #a3b0b9;
    --color-gray-700: #c3cdd4;
    --color-gray-800: #dce4e9;
    --color-gray-900: #eef2f5;
    --color-dark: #dce4e9;
    --color-light: #1d2830;
    --color-gray-light: #151d22;
    --color-gray: #8796a1;
    --color-secondary: #2a3a44;

    --color-stock-ok: #7fc4a4;
    --color-stock-ok-bg: rgba(63, 122, 98, 0.24);
    --color-stock-low: #e2b467;
    --color-stock-low-bg: rgba(183, 121, 31, 0.22);
    --color-stock-last: #ec9a7c;
    --color-stock-last-bg: rgba(196, 92, 56, 0.24);
    --color-stock-unique: #d9a6d7;
    --color-stock-unique-bg: rgba(107, 61, 106, 0.32);

    --ink-rgb: 0, 0, 0;
    --surface-panel: rgba(23, 32, 38, 0.86);
    --surface-card: var(--dk-surface);
    --hairline: var(--dk-line);
    --hairline-strong: var(--dk-line-strong);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.4);
    --shadow-panel: 0 1px 2px rgba(0, 0, 0, 0.3), 0 18px 40px -24px rgba(0, 0, 0, 0.6);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.32), 0 12px 26px -18px rgba(0, 0, 0, 0.6);
    --shadow-card-hover: 0 2px 4px rgba(0, 0, 0, 0.36), 0 26px 44px -20px rgba(0, 0, 0, 0.7);

    /* Laboratorio, óxidos y recetas declaran sus tokens en :root o en su raíz. */
    --lab-ink: var(--dk-ink);
    --lab-ink-soft: var(--dk-ink-soft);
    --lab-ink-faint: var(--dk-ink-faint);
    --lab-surface: rgba(255, 255, 255, 0.035);
    --lab-canvas: transparent;
    --lab-sunken: rgba(0, 0, 0, 0.18);
    --lab-line: var(--dk-line-strong);
    --lab-line-strong: rgba(255, 255, 255, 0.24);
    --lab-accent: var(--color-accent);
    --lab-accent-soft: rgba(var(--color-accent-rgb), 0.14);
    --lab-primary: var(--color-primary);
    --lab-ok: #7fc4a4;
    --lab-ok-soft: rgba(31, 122, 76, 0.22);
    --lab-warn: #e2b467;
    --lab-warn-soft: rgba(154, 100, 18, 0.24);
    --lab-danger: #f09a8c;
    --lab-danger-soft: rgba(163, 46, 32, 0.24);

    color: var(--dk-ink-soft);
}

body[data-ui-theme="dark"] .lab.lab--contrast {
    --lab-line: rgba(255, 255, 255, 0.34);
    --lab-ink: #ffffff;
    --lab-ink-soft: #d6dee3;
    --lab-surface: var(--dk-surface);
}

body[data-ui-theme="dark"] .ox {
    --ox-ink: var(--dk-ink);
    --ox-ink-soft: var(--dk-ink-soft);
    --ox-ink-faint: var(--dk-ink-faint);
    --ox-line: var(--dk-line-strong);
    --ox-accent: var(--color-accent);
    --ox-primary: var(--color-primary);
}

body[data-ui-theme="dark"] .rx {
    --rx-ink: var(--dk-ink);
    --rx-ink-soft: var(--dk-ink-soft);
    --rx-ink-faint: var(--dk-ink-faint);
    --rx-surface: var(--dk-surface);
    --rx-canvas: var(--dk-bg);
    --rx-sunken: var(--dk-sunken);
    --rx-line: var(--dk-line-strong);
    --rx-line-strong: rgba(255, 255, 255, 0.24);
    --rx-accent: var(--color-accent);
    --rx-primary: var(--color-primary);
}

body[data-ui-theme="dark"] .account-page {
    --acc-surface: var(--dk-surface);
    --acc-surface-muted: var(--dk-sunken);
    --acc-border: var(--dk-line);
    --acc-border-strong: var(--dk-line-strong);
    --acc-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.3);
    --acc-shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.36), 0 18px 40px rgba(0, 0, 0, 0.42);
}

body[data-ui-theme="dark"] .kc {
    --kc-ink: var(--dk-ink);
    --kc-muted: var(--dk-ink-faint);
    --kc-line: var(--dk-line-strong);
    --kc-plot: var(--dk-sunken);
}

/* El logo de fondo es la mano blanca: en oscuro basta con un susurro. */
body[data-ui-theme="dark"]::after {
    opacity: 0.025;
}

body[data-ui-theme="dark"] .main-content {
    color: var(--dk-ink-soft);
}

body[data-ui-theme="dark"] h1,
body[data-ui-theme="dark"] h2,
body[data-ui-theme="dark"] h3,
body[data-ui-theme="dark"] h4 {
    color: inherit;
}

body[data-ui-theme="dark"] .section-title {
    color: var(--dk-ink);
}

body[data-ui-theme="dark"] ::selection {
    background: rgba(var(--color-accent-rgb), 0.4);
    color: #fff;
}

body[data-ui-theme="dark"] .kiln-loader {
    background: var(--dk-bg);
}

/*------------------------------------*\
  #2. BOTONES Y RELLENOS DE ACENTO
  El acento se aclara en oscuro; lo que iba en blanco encima pasa a tinta.
\*------------------------------------*/
body[data-ui-theme="dark"] .btn.btn-primary,
body[data-ui-theme="dark"] .btn.btn-secondary:hover,
body[data-ui-theme="dark"] .btn-back,
body[data-ui-theme="dark"] .btn-edit,
body[data-ui-theme="dark"] .btn-view,
body[data-ui-theme="dark"] .form-submit,
body[data-ui-theme="dark"] .modal-close,
body[data-ui-theme="dark"] .cart-modal-btn-primary,
body[data-ui-theme="dark"] .confirmation-btn--primary,
body[data-ui-theme="dark"] .confirmation-actions .btn-primary,
body[data-ui-theme="dark"] .filter-btn.active,
body[data-ui-theme="dark"] .add-cart-btn,
body[data-ui-theme="dark"] .cart-count,
body[data-ui-theme="dark"] .bg-accent,
body[data-ui-theme="dark"] .skip-link {
    color: var(--dk-on-accent);
}

/* En claro el hover oscurece; en oscuro aclara (--color-accent-dark sigue siendo hondo). */
body[data-ui-theme="dark"] .btn.btn-primary:hover,
body[data-ui-theme="dark"] .btn-back:hover,
body[data-ui-theme="dark"] .btn-edit:hover,
body[data-ui-theme="dark"] .btn-view:hover,
body[data-ui-theme="dark"] .form-submit:hover,
body[data-ui-theme="dark"] .modal-close:hover,
body[data-ui-theme="dark"] .cart-modal-btn-primary:hover,
body[data-ui-theme="dark"] .confirmation-btn--primary:hover,
body[data-ui-theme="dark"] .confirmation-actions .btn-primary:hover {
    background: var(--dk-accent-hover);
    color: var(--dk-on-accent);
    box-shadow: 0 10px 22px -10px rgba(0, 0, 0, 0.7);
}

/* Paneles con degradado de acento: en oscuro, versión honda con texto crema. */
body[data-ui-theme="dark"] .storefront .home-panel--accent,
body[data-ui-theme="dark"] .history-page .home-panel--accent {
    background: linear-gradient(160deg, var(--color-accent-dark) 0%, var(--dk-accent-deep) 100%);
    border-color: rgba(var(--color-accent-rgb), 0.22);
}

body[data-ui-theme="dark"] .storefront .home-panel--accent .btn.btn-primary:hover,
body[data-ui-theme="dark"] .history-page .home-panel--accent .btn.btn-primary:hover,
body[data-ui-theme="dark"] .storefront .hero .hero-content .btn:hover {
    background: #fff;
    color: var(--color-accent-dark);
}

body[data-ui-theme="dark"] .btn.btn-secondary {
    color: var(--color-accent);
    border-color: var(--dk-line-strong);
}

body[data-ui-theme="dark"] .btn.btn-disabled.btn-disabled,
body[data-ui-theme="dark"] .btn.btn-disabled.btn-disabled:hover,
body[data-ui-theme="dark"] .btn-disabled,
body[data-ui-theme="dark"] .btn-disabled:hover {
    background: var(--dk-raised);
    color: var(--dk-ink-faint);
    border-color: var(--dk-line);
}

body[data-ui-theme="dark"] .link-arrow:hover,
body[data-ui-theme="dark"] .back-button:hover,
body[data-ui-theme="dark"] .form-link:hover {
    color: #fff;
}

/*------------------------------------*\
  #3. SUPERFICIES BLANCAS COMUNES
\*------------------------------------*/
body[data-ui-theme="dark"] .main-content {
    background-color: transparent;
}

body[data-ui-theme="dark"] .form-container,
body[data-ui-theme="dark"] .modal-content,
body[data-ui-theme="dark"] .cart-modal-content,
body[data-ui-theme="dark"] .bg-white,
body[data-ui-theme="dark"] .product-card,
body[data-ui-theme="dark"] .product-info,
body[data-ui-theme="dark"] .related-product-card,
body[data-ui-theme="dark"] .error-message,
body[data-ui-theme="dark"] .about-text,
body[data-ui-theme="dark"] .clase-tipo,
body[data-ui-theme="dark"] .recipe-details,
body[data-ui-theme="dark"] .user-recipes,
body[data-ui-theme="dark"] .recipe-card {
    background: var(--dk-surface);
    color: var(--dk-ink-soft);
}

body[data-ui-theme="dark"] .cart-modal-product,
body[data-ui-theme="dark"] .bg-gray-50,
body[data-ui-theme="dark"] .bg-gray-100 {
    background: var(--dk-sunken);
}

body[data-ui-theme="dark"] .cart-modal-btn-secondary {
    background: var(--dk-raised);
    color: var(--dk-ink);
    border-color: var(--dk-line-strong);
}

body[data-ui-theme="dark"] .modal,
body[data-ui-theme="dark"] .cart-modal {
    background: rgba(0, 0, 0, 0.66);
}

/* Formularios */
body[data-ui-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]),
body[data-ui-theme="dark"] select,
body[data-ui-theme="dark"] textarea {
    background-color: var(--dk-sunken);
    color: var(--dk-ink);
    border-color: var(--dk-line-strong);
}

body[data-ui-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):focus,
body[data-ui-theme="dark"] select:focus,
body[data-ui-theme="dark"] textarea:focus {
    background-color: var(--dk-bg);
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.22);
}

body[data-ui-theme="dark"] input::placeholder,
body[data-ui-theme="dark"] textarea::placeholder {
    color: var(--dk-ink-faint);
    opacity: 1;
}

body[data-ui-theme="dark"] input:-webkit-autofill {
    -webkit-text-fill-color: var(--dk-ink);
    box-shadow: 0 0 0 100px var(--dk-sunken) inset;
    caret-color: var(--dk-ink);
}

body[data-ui-theme="dark"] .form-label,
body[data-ui-theme="dark"] label {
    color: var(--dk-ink-soft);
}

body[data-ui-theme="dark"] .form-error {
    color: #f0a196;
}

body[data-ui-theme="dark"] .form-success {
    background: rgba(46, 204, 113, 0.12);
    color: #8fdcae;
}

/*------------------------------------*\
  #3b. TIENDA: COLECCIÓN, FICHA, CARRITO, CHECKOUT
\*------------------------------------*/
body[data-ui-theme="dark"] .collection-page .collection-toolbar {
    background: rgba(16, 22, 26, 0.86);
}

body[data-ui-theme="dark"] .collection-page .filter-btn:hover,
body[data-ui-theme="dark"] .collection-page .sf-pager-links a:hover {
    background: var(--dk-raised);
}

body[data-ui-theme="dark"] .collection-page .filter-btn.active,
body[data-ui-theme="dark"] .collection-page .sf-pager-links .is-current {
    color: var(--dk-on-accent);
}

/* Categorías con color propio: tinte translúcido en vez de pastel. */
body[data-ui-theme="dark"] .collection-page .filter-btn.filter-btn--gouache {
    background: rgba(218, 119, 152, 0.14);
    border-color: rgba(218, 119, 152, 0.5);
    color: #f3a7c2;
}

body[data-ui-theme="dark"] .collection-page .filter-btn.filter-btn--gouache:hover {
    background: rgba(218, 119, 152, 0.24);
    border-color: #da7798;
    color: #fbd0df;
}

body[data-ui-theme="dark"] .collection-page .filter-btn.filter-btn--gouache.active {
    background: #c25683;
    border-color: #c25683;
    color: #fff;
}

body[data-ui-theme="dark"] .collection-page .filter-btn.filter-btn--yunomi {
    background: rgba(227, 146, 61, 0.14);
    border-color: rgba(227, 146, 61, 0.5);
    color: #f0b375;
}

body[data-ui-theme="dark"] .collection-page .filter-btn.filter-btn--yunomi:hover {
    background: rgba(227, 146, 61, 0.24);
    border-color: #e3923d;
    color: #fbd5ab;
}

body[data-ui-theme="dark"] .collection-page .filter-btn.filter-btn--yunomi.active {
    background: #d97706;
    border-color: #d97706;
    color: #1a1006;
}

body[data-ui-theme="dark"] :is(.storefront, .collection-page, .product-page) .product-card__media,
body[data-ui-theme="dark"] .pd-thumb,
body[data-ui-theme="dark"] .pd-stage,
body[data-ui-theme="dark"] .ct-item__media,
body[data-ui-theme="dark"] .co-line img {
    background-color: #222c33;
}

body[data-ui-theme="dark"] :is(.storefront, .collection-page, .product-page) .product-card__body {
    background: var(--dk-surface);
}

/* En la vitrina «atelier» el texto va sobre la foto: el degradado se queda. */
body[data-ui-theme="dark"] :is(.storefront, .collection-page, .product-page) .products-grid--atelier .product-card__body {
    background: linear-gradient(180deg, rgba(10, 16, 20, 0) 0%, rgba(10, 16, 20, 0.78) 72%);
}

/* Las insignias van sobre la foto: rellenos hondos y texto claro, como en claro. */
body[data-ui-theme="dark"] :is(.storefront, .collection-page, .product-page) .product-card__badge {
    background: rgba(16, 22, 26, 0.86);
    color: var(--dk-ink);
}

body[data-ui-theme="dark"] :is(.storefront, .collection-page, .product-page) .product-card__badge--unique {
    background: #6b3d6a;
    color: #f8f1f7;
}

body[data-ui-theme="dark"] :is(.storefront, .collection-page, .product-page) .product-card__badge--last {
    background: #b0502f;
    color: #fff6f1;
}

body[data-ui-theme="dark"] :is(.storefront, .collection-page, .product-page) .product-card__badge--low {
    background: #9a6412;
    color: #fff8ee;
}

body[data-ui-theme="dark"] :is(.storefront, .collection-page, .product-page) .product-card__cue {
    color: var(--dk-on-accent);
}

body[data-ui-theme="dark"] .pd-nav,
body[data-ui-theme="dark"] .pd-zoom {
    background: rgba(16, 22, 26, 0.78);
    border-color: var(--dk-line-strong);
    color: var(--dk-ink);
}

body[data-ui-theme="dark"] .pd-nav:hover,
body[data-ui-theme="dark"] .pd-zoom:hover {
    background: rgba(16, 22, 26, 0.94);
    color: var(--color-accent);
}

body[data-ui-theme="dark"] .pd-status,
body[data-ui-theme="dark"] .pd-qty,
body[data-ui-theme="dark"] .co-field input,
body[data-ui-theme="dark"] .co-field textarea,
body[data-ui-theme="dark"] .co-choice label {
    background: var(--dk-sunken);
}

body[data-ui-theme="dark"] .pd-status.is-out {
    background: var(--dk-raised);
}

body[data-ui-theme="dark"] .pd-add,
body[data-ui-theme="dark"] a.pd-add:link,
body[data-ui-theme="dark"] a.pd-add:visited {
    color: var(--dk-on-accent);
    box-shadow: 0 12px 28px -18px rgba(0, 0, 0, 0.8);
}

body[data-ui-theme="dark"] .pd-add:hover {
    background: var(--dk-accent-hover);
}

body[data-ui-theme="dark"] .ct-btn:hover {
    background: var(--dk-raised);
}

body[data-ui-theme="dark"] .co-alert {
    background: rgba(185, 28, 28, 0.14);
    border-color: rgba(248, 113, 113, 0.32);
    border-left-color: #ef6b6b;
    color: #f8d0cb;
}

body[data-ui-theme="dark"] .co-alert i {
    color: #ef6b6b;
}

body[data-ui-theme="dark"] .co-field input.is-invalid,
body[data-ui-theme="dark"] .co-field textarea.is-invalid {
    border-color: #ef6b6b;
}

body[data-ui-theme="dark"] .co-choice__icon {
    background: var(--dk-raised);
}

body[data-ui-theme="dark"] .legal-page h1,
body[data-ui-theme="dark"] .legal-page h2 {
    color: var(--dk-ink);
}

/* Vista rápida (catalog.css, colores fijos) */
body[data-ui-theme="dark"] .quick-view {
    background: var(--dk-surface);
    color: var(--dk-ink-soft);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
    border: 1px solid var(--dk-line);
}

body[data-ui-theme="dark"] .quick-view::backdrop {
    background: rgba(0, 0, 0, 0.62);
}

body[data-ui-theme="dark"] .quick-view__x,
body[data-ui-theme="dark"] .quick-view__nav {
    background: rgba(16, 22, 26, 0.82);
    color: var(--dk-ink);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

body[data-ui-theme="dark"] .quick-view__x:hover,
body[data-ui-theme="dark"] .quick-view__nav:hover {
    background: rgba(16, 22, 26, 0.96);
}

body[data-ui-theme="dark"] .quick-view__media,
body[data-ui-theme="dark"] .quick-view__thumb {
    background: #222c33;
}

body[data-ui-theme="dark"] .quick-view__thumb {
    border-color: rgba(255, 255, 255, 0.3);
}

body[data-ui-theme="dark"] .quick-view__thumb.is-active {
    border-color: var(--color-accent);
}

body[data-ui-theme="dark"] .quick-view__body h2,
body[data-ui-theme="dark"] .quick-view__price,
body[data-ui-theme="dark"] .quick-view__specs dd,
body[data-ui-theme="dark"] .quick-view__qty button,
body[data-ui-theme="dark"] .quick-view__qty-val {
    color: var(--dk-ink);
}

body[data-ui-theme="dark"] .quick-view__eyebrow,
body[data-ui-theme="dark"] .quick-view__specs dt {
    color: var(--dk-ink-faint);
}

body[data-ui-theme="dark"] .quick-view__meta,
body[data-ui-theme="dark"] .quick-view__desc {
    color: var(--dk-ink-soft);
}

body[data-ui-theme="dark"] .quick-view__badge {
    background: rgba(63, 122, 98, 0.24);
    color: #8fd0b0;
}

body[data-ui-theme="dark"] .quick-view__badge.is-last,
body[data-ui-theme="dark"] .quick-view__badge.is-unique {
    background: rgba(183, 121, 31, 0.24);
    color: #e9c07a;
}

body[data-ui-theme="dark"] .quick-view__specs {
    background: var(--dk-sunken);
}

body[data-ui-theme="dark"] .quick-view__qty,
body[data-ui-theme="dark"] .quick-view__actions a {
    background: var(--dk-sunken);
    border-color: var(--dk-line-strong);
    color: var(--dk-ink);
}

body[data-ui-theme="dark"] .quick-view__add,
body[data-ui-theme="dark"] .quick-view__actions .quick-view__cart {
    background: var(--color-accent);
    color: var(--dk-on-accent);
}

body[data-ui-theme="dark"] .quick-view__add:hover {
    background: var(--dk-accent-hover);
}

body[data-ui-theme="dark"] .quick-view__status.is-ok {
    color: #8fd0b0;
}

body[data-ui-theme="dark"] .quick-view__status.is-error {
    color: #f0a196;
}

body[data-ui-theme="dark"] .quick-view button:focus-visible,
body[data-ui-theme="dark"] .quick-view a:focus-visible {
    outline-color: var(--color-accent);
}

/* Corazón de favoritos (estilo crítico en línea en header.php) */
body[data-ui-theme="dark"] .wl-heart {
    background: rgba(16, 22, 26, 0.82);
    border-color: rgba(255, 255, 255, 0.16);
    color: #b4c1ca;
}

body[data-ui-theme="dark"] .wl-heart--page {
    background: var(--dk-sunken);
}

body[data-ui-theme="dark"] .wl-heart.is-saved {
    color: #f0796e;
    border-color: rgba(240, 121, 110, 0.45);
}

/* Enlaces que en claro oscurecen al pasar: en oscuro aclaran. */
body[data-ui-theme="dark"] .breadcrumb a:hover,
body[data-ui-theme="dark"] .auth-field__hint:hover,
body[data-ui-theme="dark"] .auth-card__footer a:hover {
    color: #fff;
}

/* Acceso / registro */
body[data-ui-theme="dark"] .auth-page .auth-input {
    background: var(--dk-sunken);
}

body[data-ui-theme="dark"] .auth-page .auth-input[aria-invalid='true'] {
    border-color: #ef6b6b;
}

body[data-ui-theme="dark"] .auth-alert {
    background: rgba(185, 28, 28, 0.14);
    border-color: rgba(248, 113, 113, 0.32);
    border-left-color: #ef6b6b;
    color: #f8d0cb;
}

body[data-ui-theme="dark"] .auth-alert i {
    color: #ef6b6b;
}

body[data-ui-theme="dark"] .auth-totp-secret,
body[data-ui-theme="dark"] .mfa-secret {
    background: var(--dk-sunken);
    color: var(--dk-ink);
}

/* El QR necesita fondo blanco para leerse: se queda, con aire alrededor. */
body[data-ui-theme="dark"] .mfa-qr {
    border-color: transparent;
    box-shadow: 0 0 0 6px #fff;
}

/* Confirmación de pedido */
body[data-ui-theme="dark"] .confirmation-mail-warning {
    border-color: rgba(226, 180, 103, 0.32);
    color: #ecd2a0;
}

body[data-ui-theme="dark"] .bank-details,
body[data-ui-theme="dark"] .guest-note {
    background: var(--dk-sunken);
}

body[data-ui-theme="dark"] .confirmation-line img,
body[data-ui-theme="dark"] .order-product-item .product-image,
body[data-ui-theme="dark"] .order-product-item .product-image-guest,
body[data-ui-theme="dark"] .order-product-item .product-image img,
body[data-ui-theme="dark"] .order-product-item .product-image-guest img {
    background-color: #222c33;
}

body[data-ui-theme="dark"] .confirmation-btn--primary,
body[data-ui-theme="dark"] .confirmation-actions .btn-primary {
    box-shadow: 0 12px 28px -18px rgba(0, 0, 0, 0.8);
}

body[data-ui-theme="dark"] .confirmation-btn--ghost,
body[data-ui-theme="dark"] .confirmation-actions .btn-secondary {
    background: transparent;
    color: var(--dk-ink-soft);
}

body[data-ui-theme="dark"] .confirmation-btn--ghost:hover,
body[data-ui-theme="dark"] .confirmation-actions .btn-secondary:hover {
    background: var(--dk-raised);
    color: var(--dk-ink);
}

/* Clases y bloques heredados de content.css */
body[data-ui-theme="dark"] .about::before {
    background: none;
}

body[data-ui-theme="dark"] .laboratory-content,
body[data-ui-theme="dark"] .philosophy-item,
body[data-ui-theme="dark"] .testimonial-item,
body[data-ui-theme="dark"] .clases-text,
body[data-ui-theme="dark"] .clases-cta {
    background-color: var(--surface-panel);
    color: var(--dk-ink-soft);
}

body[data-ui-theme="dark"] .clase-tipo {
    border-color: var(--dk-line);
}

body[data-ui-theme="dark"] .clases-text h2 {
    color: var(--dk-ink);
}

body[data-ui-theme="dark"] .laboratory-content .btn,
body[data-ui-theme="dark"] .timeline-date,
body[data-ui-theme="dark"] .cta-button {
    color: var(--dk-on-accent);
}

body[data-ui-theme="dark"] .about-cta {
    background: linear-gradient(135deg, var(--color-accent-dark), var(--dk-accent-deep));
    color: #f4f7f9;
}

body[data-ui-theme="dark"] .about-cta .btn {
    color: var(--dk-on-accent);
}

/*------------------------------------*\
  #3d. RECETAS PÚBLICAS (recetas.css)
\*------------------------------------*/
body[data-ui-theme="dark"] .rx-hero {
    background: linear-gradient(135deg, var(--color-accent-dark) 0%, #0b1418 100%);
}

body[data-ui-theme="dark"] .rx-btn--solid:hover {
    background: var(--dk-raised);
}

body[data-ui-theme="dark"] .rx-btn--primary,
body[data-ui-theme="dark"] .rx-pager .is-current {
    color: var(--dk-on-accent);
}

body[data-ui-theme="dark"] .rx-btn--primary:hover {
    background: var(--dk-accent-hover);
    border-color: var(--dk-accent-hover);
}

body[data-ui-theme="dark"] a.rx-card,
body[data-ui-theme="dark"] .rx-card {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

body[data-ui-theme="dark"] a.rx-card:hover {
    box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.7);
}

body[data-ui-theme="dark"] .rx-card__media,
body[data-ui-theme="dark"] .rx-gallery__main {
    background: #222c33;
}

body[data-ui-theme="dark"] .rx-chip {
    background: rgba(var(--color-accent-rgb), 0.14);
}

body[data-ui-theme="dark"] .rx-chip--top {
    background: rgba(196, 73, 63, 0.2);
    color: #f3a59c;
}

body[data-ui-theme="dark"] .rx-like {
    background: rgba(16, 22, 26, 0.82);
    border-color: rgba(255, 255, 255, 0.16);
}

body[data-ui-theme="dark"] .rx-like:hover {
    color: #f0796e;
}

/*------------------------------------*\
  #3f. LABORATORIO (laboratorio.css)
  Los diagramas (Stull, ternario) se quedan en «papel» claro: sus trazos son
  fijos en azul hondo y se leen como una lámina impresa.
\*------------------------------------*/
body[data-ui-theme="dark"] .lab-hero {
    background: linear-gradient(135deg, var(--color-accent-dark) 0%, #0b1418 100%);
}

body[data-ui-theme="dark"] .lab-card {
    background: var(--dk-surface);
}

body[data-ui-theme="dark"] .lab-btn--on-light {
    background: rgba(255, 255, 255, 0.92);
    color: var(--color-accent-dark);
}

body[data-ui-theme="dark"] .lab-btn--on-light:hover {
    background: #fff;
    color: var(--color-accent-dark);
}

body[data-ui-theme="dark"] .lab-btn--primary,
body[data-ui-theme="dark"] .lab-map-tab.is-active,
body[data-ui-theme="dark"] .lab-jump__chip.is-active {
    color: var(--dk-on-accent);
}

body[data-ui-theme="dark"] .lab-btn--primary:hover:not(:disabled) {
    background: var(--dk-accent-hover);
}

body[data-ui-theme="dark"] .lab-btn--ghost,
body[data-ui-theme="dark"] .lab-pick,
body[data-ui-theme="dark"] .lab-air,
body[data-ui-theme="dark"] .lab-admin__chip,
body[data-ui-theme="dark"] .lab-fire__value .lab-input,
body[data-ui-theme="dark"] .lab-map-tab {
    background: var(--dk-sunken);
    color: var(--dk-ink-soft);
}

/* Panel del horno: el mismo matiz por atmósfera, como brasa sobre oscuro. */
body[data-ui-theme="dark"] .lab-fire {
    background: linear-gradient(165deg, rgba(255, 196, 140, 0.08) 0%, rgba(255, 255, 255, 0.02) 55%, rgba(120, 150, 165, 0.06) 100%);
}

body[data-ui-theme="dark"] .lab-fire[data-atmosfera='oxidante'] {
    background: linear-gradient(165deg, rgba(240, 150, 70, 0.16) 0%, rgba(255, 255, 255, 0.02) 58%, rgba(120, 150, 165, 0.05) 100%);
}

body[data-ui-theme="dark"] .lab-fire[data-atmosfera='neutra'] {
    background: linear-gradient(165deg, rgba(150, 175, 190, 0.14) 0%, rgba(255, 255, 255, 0.02) 58%, rgba(120, 150, 165, 0.05) 100%);
}

body[data-ui-theme="dark"] .lab-fire[data-atmosfera='reductora'] {
    background: linear-gradient(165deg, rgba(110, 180, 160, 0.15) 0%, rgba(255, 255, 255, 0.02) 58%, rgba(110, 160, 150, 0.05) 100%);
}

body[data-ui-theme="dark"] .lab-admin__section {
    background: rgba(255, 255, 255, 0.03);
}

body[data-ui-theme="dark"] .lab-admin__foot {
    background: var(--dk-surface);
}

body[data-ui-theme="dark"] .lab-pick__menu,
body[data-ui-theme="dark"] .lab-sub,
body[data-ui-theme="dark"] .lab-jump,
body[data-ui-theme="dark"] .lab-modal__box {
    background: var(--dk-raised);
    color: var(--dk-ink-soft);
    box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.75);
}

body[data-ui-theme="dark"] .lab-modal {
    background: rgba(0, 0, 0, 0.62);
}

body[data-ui-theme="dark"] .lab-gallery__main {
    background: rgba(255, 255, 255, 0.04);
}

body[data-ui-theme="dark"] .lab-limit__span {
    border-color: rgba(127, 196, 164, 0.4);
}

body[data-ui-theme="dark"] .lab-pick__swatch,
body[data-ui-theme="dark"] .ox-oxide__dot {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
}

/* Diagramas de Stull y ternario: lámina clara, así que recuperan los tokens de claro. */
body[data-ui-theme="dark"] .lab-stull__svg {
    --lab-ink: #16242b;
    --lab-ink-soft: #4a5c66;
    --lab-ink-faint: #7d8d96;
    --lab-accent: #1d4251;
    --lab-accent-soft: #e7eef1;
    --lab-ok: #1f7a4c;
    --lab-warn: #9a6412;
    --lab-danger: #a32e20;
    border-color: transparent;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* Curva de horno (curva-horno.css): esta sí pasa a oscuro. */
body[data-ui-theme="dark"] .kc {
    --kc-starved: #7fc4a4;
    --kc-mid: #9ab4c2;
    --kc-plenty: #f0a060;
}

body[data-ui-theme="dark"] .kc-grid {
    stroke: rgba(255, 255, 255, 0.07);
}

body[data-ui-theme="dark"] .kc-axis-label,
body[data-ui-theme="dark"] .kc-axis-title {
    fill: var(--dk-ink-faint);
}

body[data-ui-theme="dark"] .kc-line {
    stroke: var(--color-accent);
}

body[data-ui-theme="dark"] .kc-cross {
    stroke: rgba(255, 255, 255, 0.28);
}

body[data-ui-theme="dark"] .kc-dot circle {
    stroke: var(--dk-sunken);
}

body[data-ui-theme="dark"] .kc-dot.is-selected circle {
    stroke: var(--dk-ink);
}

body[data-ui-theme="dark"] .kc-preset,
body[data-ui-theme="dark"] .kc-link {
    background: var(--dk-sunken);
    color: var(--dk-ink-soft);
    border-color: var(--dk-line-strong);
}

body[data-ui-theme="dark"] .kc-tag--starved { background: rgba(61, 107, 94, 0.3); }
body[data-ui-theme="dark"] .kc-tag--mid { background: rgba(90, 115, 128, 0.3); }
body[data-ui-theme="dark"] .kc-tag--plenty { background: rgba(208, 106, 28, 0.24); }

body[data-ui-theme="dark"] .kc-log tr.is-selected td {
    background: var(--dk-raised);
}

/* Visita guiada del laboratorio (ikra-tour.css) */
body[data-ui-theme="dark"] .ikra-tour__card {
    background: var(--dk-raised);
    border: 1px solid var(--dk-line-strong);
}

body[data-ui-theme="dark"] .ikra-tour__btn--ghost {
    background: var(--dk-sunken);
}

body[data-ui-theme="dark"] .ikra-tour__btn--primary {
    color: var(--dk-on-accent);
}

/*------------------------------------*\
  #3e. ÓXIDOS (oxidos.css)
\*------------------------------------*/
body[data-ui-theme="dark"] .ox-hero,
body[data-ui-theme="dark"] .ox-cta {
    background: linear-gradient(135deg, var(--color-accent-dark) 0%, #0b1418 100%);
}

body[data-ui-theme="dark"] .ox-btn--on-light {
    background: rgba(255, 255, 255, 0.92);
    color: var(--color-accent-dark);
}

body[data-ui-theme="dark"] .ox-btn--on-light:hover {
    background: #fff;
    color: var(--color-accent-dark);
}

body[data-ui-theme="dark"] .ox-btn--primary {
    color: var(--dk-on-accent);
}

body[data-ui-theme="dark"] .ox-btn--primary:hover {
    background: var(--dk-accent-hover);
    color: var(--dk-on-accent);
}

body[data-ui-theme="dark"] .ox-card,
body[data-ui-theme="dark"] .ox-oxide,
body[data-ui-theme="dark"] .ox-table-wrap {
    background: var(--dk-surface);
}

body[data-ui-theme="dark"] .ox-specs div,
body[data-ui-theme="dark"] .ox-chip,
body[data-ui-theme="dark"] .ox-atmo__btn {
    background: var(--dk-sunken);
}

body[data-ui-theme="dark"] .ox-chip.is-active,
body[data-ui-theme="dark"] .ox-chip:hover,
body[data-ui-theme="dark"] .ox-atmo__btn.is-active,
body[data-ui-theme="dark"] .ox-atmo__btn:hover,
body[data-ui-theme="dark"] .ox-tag--rol {
    background: rgba(var(--color-accent-rgb), 0.14);
}

body[data-ui-theme="dark"] .ox-umf th,
body[data-ui-theme="dark"] .ox-table th {
    background: var(--dk-raised);
}

body[data-ui-theme="dark"] .ox-risk {
    background: rgba(154, 100, 18, 0.2);
    color: #ecd2a0;
}

body[data-ui-theme="dark"] .ox-search input {
    background-color: var(--dk-sunken);
}

/*------------------------------------*\
  #3g. MI CUENTA (mi-cuenta.css)
\*------------------------------------*/
body[data-ui-theme="dark"] .account-hero,
body[data-ui-theme="dark"] .recipe-detail__head {
    background: linear-gradient(135deg, var(--color-accent-dark) 0%, var(--dk-accent-deep) 100%);
    border: 1px solid rgba(var(--color-accent-rgb), 0.18);
}

body[data-ui-theme="dark"] .recipe-card__head {
    background: linear-gradient(135deg, var(--color-accent-dark) 0%, var(--dk-accent-deep) 100%);
}

body[data-ui-theme="dark"] .account-page .tab-item.active,
body[data-ui-theme="dark"] .account-page .tab-item.active .tab-item__count,
body[data-ui-theme="dark"] .account-page .btn-primary,
body[data-ui-theme="dark"] .account-page .btn-invoice,
body[data-ui-theme="dark"] .account-page .btn-save-notes,
body[data-ui-theme="dark"] .order-track__step.is-done .order-track__dot {
    color: var(--dk-on-accent);
}

body[data-ui-theme="dark"] .account-page .tab-item.active .tab-item__count {
    background: rgba(0, 0, 0, 0.16);
}

body[data-ui-theme="dark"] .account-page .btn-primary:hover,
body[data-ui-theme="dark"] .account-page .btn-invoice:hover,
body[data-ui-theme="dark"] .account-page .btn-save-notes:hover {
    background: var(--dk-accent-hover);
    box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.6);
}

/* En Mi cuenta, Ver/Editar son botones de contorno, no de relleno (anula #2). */
body[data-ui-theme="dark"] .account-page .btn-secondary,
body[data-ui-theme="dark"] .account-page .btn-track,
body[data-ui-theme="dark"] .account-page .btn-cancel-notes,
body[data-ui-theme="dark"] .account-page .btn-view,
body[data-ui-theme="dark"] .account-page .btn-edit {
    background: var(--acc-surface);
    color: var(--dk-ink-soft);
}

body[data-ui-theme="dark"] .account-page .btn-secondary:hover,
body[data-ui-theme="dark"] .account-page .btn-track:hover,
body[data-ui-theme="dark"] .account-page .btn-cancel-notes:hover,
body[data-ui-theme="dark"] .account-page .btn-view:hover,
body[data-ui-theme="dark"] .account-page .btn-edit:hover {
    background: rgba(var(--color-accent-rgb), 0.08);
    color: var(--color-accent);
    box-shadow: none;
}

body[data-ui-theme="dark"] .account-page .btn-delete {
    background: transparent;
    border-color: rgba(239, 107, 107, 0.4);
    color: #f09a8c;
}

body[data-ui-theme="dark"] .account-page .btn-delete:hover {
    background: rgba(220, 38, 38, 0.14);
    border-color: #ef6b6b;
}

body[data-ui-theme="dark"] .panel__head {
    background: linear-gradient(180deg, var(--dk-raised) 0%, var(--acc-surface-muted) 100%);
}

body[data-ui-theme="dark"] .account-alert--success {
    background: rgba(5, 150, 105, 0.14);
    border-color: rgba(52, 211, 153, 0.3);
    border-left-color: #34d399;
    color: #a7f3d0;
}

body[data-ui-theme="dark"] .account-alert--error {
    background: rgba(220, 38, 38, 0.14);
    border-color: rgba(248, 113, 113, 0.3);
    border-left-color: #f87171;
    color: #fecaca;
}

body[data-ui-theme="dark"] .account-alert--info {
    background: rgba(37, 99, 235, 0.14);
    border-color: rgba(96, 165, 250, 0.3);
    border-left-color: #60a5fa;
    color: #bfdbfe;
}

body[data-ui-theme="dark"] .status-pill--pendiente { background: rgba(245, 158, 11, 0.18); color: #fcd34d; }
body[data-ui-theme="dark"] .status-pill--procesando { background: rgba(59, 130, 246, 0.18); color: #93c5fd; }
body[data-ui-theme="dark"] .status-pill--enviado { background: rgba(20, 184, 166, 0.18); color: #5eead4; }
body[data-ui-theme="dark"] .status-pill--entregado { background: rgba(34, 197, 94, 0.18); color: #86efac; }
body[data-ui-theme="dark"] .status-pill--cancelado { background: rgba(239, 68, 68, 0.18); color: #fca5a5; }

body[data-ui-theme="dark"] .form-group .req,
body[data-ui-theme="dark"] .totals-row--discount span:last-child {
    color: #f87171;
}

body[data-ui-theme="dark"] .notes-box {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(253, 230, 138, 0.25);
    border-left-color: #f59e0b;
    color: #f3e3b5;
}

body[data-ui-theme="dark"] .gallery-thumb__delete {
    border-color: var(--dk-surface);
}

body[data-ui-theme="dark"] .account-page .modal {
    background: rgba(0, 0, 0, 0.62);
}

body[data-ui-theme="dark"] .panel {
    border-color: var(--dk-line);
}

body[data-ui-theme="dark"] .account-notice-list li {
    border-bottom-color: var(--dk-line);
}

body[data-ui-theme="dark"] .push-device-box {
    border-color: var(--dk-line);
    background: rgba(255, 255, 255, 0.03);
}

body[data-ui-theme="dark"] .colorant-chip {
    border-color: rgba(255, 255, 255, 0.12);
}

/*------------------------------------*\
  #3c. SOBRE MÍ
\*------------------------------------*/
body[data-ui-theme="dark"] .about-card {
    background: var(--dk-surface);
    border-color: var(--dk-line);
}

body[data-ui-theme="dark"] .about-card:hover {
    box-shadow: 0 10px 26px -12px rgba(0, 0, 0, 0.7);
}

body[data-ui-theme="dark"] .about-steps li,
body[data-ui-theme="dark"] .about-role,
body[data-ui-theme="dark"] .about-stack li {
    background: var(--dk-surface);
}

body[data-ui-theme="dark"] .about-steps li::before {
    color: var(--dk-on-accent);
}

body[data-ui-theme="dark"] .about-stack li {
    border-color: var(--dk-line-strong);
    color: var(--dk-ink-soft);
}

body[data-ui-theme="dark"] .about-hero__media figure,
body[data-ui-theme="dark"] .about-hero__media:not(.about-hero__media--duo) {
    box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.7);
}

/*------------------------------------*\
  #4. CABECERA
\*------------------------------------*/
body[data-ui-theme="dark"] .brand-logo {
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45));
}

body[data-ui-theme="dark"] .header.is-scrolled,
body[data-ui-theme="dark"] .header.has-notice {
    border-bottom-color: var(--dk-line);
}

body[data-ui-theme="dark"] .header.is-scrolled {
    box-shadow: 0 10px 28px -18px rgba(0, 0, 0, 0.8);
}

body[data-ui-theme="dark"] .header .nav-link:hover,
body[data-ui-theme="dark"] .header .nav-link.active,
body[data-ui-theme="dark"] header .nav-link.nav-cta:hover,
body[data-ui-theme="dark"] header .nav-link.nav-cta.active {
    color: var(--color-accent) !important;
}

body[data-ui-theme="dark"] header .nav-link.nav-cta:hover,
body[data-ui-theme="dark"] header .nav-link.nav-cta.active {
    border-color: var(--color-accent) !important;
    background-color: rgba(var(--color-accent-rgb), 0.1) !important;
}

body[data-ui-theme="dark"] .dropdown-item.active,
body[data-ui-theme="dark"] .dropdown-item:hover {
    color: #fff;
}

body[data-ui-theme="dark"] .dropdown-divider {
    background: var(--dk-line);
}

body[data-ui-theme="dark"] .dropdown-item--locked {
    color: var(--dk-ink-faint);
}

body[data-ui-theme="dark"] .menu-toggle span {
    background-color: var(--dk-ink);
}

body[data-ui-theme="dark"] .store-notice {
    background: #1d3440;
    color: #e9eef1;
}

body[data-ui-theme="dark"] .store-notice.session-notice {
    background: #3a1d1d;
    color: #f8d4d0;
    border-top-color: rgba(248, 113, 113, 0.3);
}

/*------------------------------------*\
  #5. PIE Y AVISOS FIJOS
  El pie ya era oscuro: se fija para que la inversión de grises no lo aclare.
\*------------------------------------*/
body[data-ui-theme="dark"] .footer {
    background: #0b1013;
    color: #b4c1ca;
    border-top: 1px solid var(--dk-line);
}

body[data-ui-theme="dark"] .footer-brand h3,
body[data-ui-theme="dark"] .footer-menu h4,
body[data-ui-theme="dark"] .footer-contact a:hover,
body[data-ui-theme="dark"] .footer-legal a:hover,
body[data-ui-theme="dark"] .footer-legal a:focus-visible,
body[data-ui-theme="dark"] .footer-legal__btn:hover,
body[data-ui-theme="dark"] .footer-legal__btn:focus-visible {
    color: #f4f7f9;
}

body[data-ui-theme="dark"] .footer-brand p,
body[data-ui-theme="dark"] .footer-contact a,
body[data-ui-theme="dark"] .footer-contact span,
body[data-ui-theme="dark"] .footer-menu a,
body[data-ui-theme="dark"] .footer-link--locked,
body[data-ui-theme="dark"] .footer-legal a,
body[data-ui-theme="dark"] .footer-legal__btn {
    color: #9aa8b2;
}

body[data-ui-theme="dark"] .footer-info p,
body[data-ui-theme="dark"] .visit-count {
    color: #75838d;
}

body[data-ui-theme="dark"] .footer-bottom {
    background: rgba(0, 0, 0, 0.28);
    border-top-color: var(--dk-line);
}

body[data-ui-theme="dark"] .footer-social a {
    background: #1b252c;
    color: #9aa8b2;
}

body[data-ui-theme="dark"] .footer-social a:hover,
body[data-ui-theme="dark"] .footer-social a:focus-visible {
    color: var(--dk-on-accent);
}

body[data-ui-theme="dark"] .cookie-consent,
body[data-ui-theme="dark"] .ikra-push-banner {
    background: #1d2a32;
    color: var(--dk-ink);
    border: 1px solid var(--dk-line-strong);
    box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.8);
}

body[data-ui-theme="dark"] .cookie-consent__btn {
    border-color: rgba(255, 255, 255, 0.5);
}

body[data-ui-theme="dark"] .cookie-consent__btn:hover,
body[data-ui-theme="dark"] .cookie-consent__btn:focus-visible {
    background: var(--dk-ink);
    color: var(--dk-on-accent);
}

body[data-ui-theme="dark"] .back-to-top {
    background: var(--dk-raised);
    color: var(--dk-ink);
    border: 1px solid var(--dk-line-strong);
}

body[data-ui-theme="dark"] .back-to-top:hover,
body[data-ui-theme="dark"] .back-to-top:focus-visible {
    background: var(--color-accent);
    color: var(--dk-on-accent);
}

body[data-ui-theme="dark"] .ikra-ptr__mark {
    background: var(--dk-raised);
    border-color: rgba(255, 255, 255, 0.18);
    border-top-color: var(--color-accent);
}

body[data-ui-theme="dark"] .ikra-ptr__text {
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}