/* Sentiel · modo noche. La clase .tema-oscuro la pone <html> (inc/tema.php) antes de pintar.
 * Se cambia la paleta del tema (presets de theme.json) y se ajustan los pocos colores fijos. */

/* ---------- Selector (en el header, siempre visible) ---------- */
.sentiel-tema { position: relative; display: inline-flex; margin-right: .35rem; }
.sentiel-tema__btn { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; padding: 0; border: 1px solid rgb(255 255 255 / .18); border-radius: var(--sentiel-r-sm); background: transparent; color: var(--sentiel-on) !important; cursor: pointer; }
.sentiel-tema__btn:hover, .sentiel-tema__btn:focus-visible { border-color: rgb(255 255 255 / .5); }
.sentiel-tema__btn span { display: none; line-height: 0; }
[data-tema="auto"] .sentiel-tema__btn .i-auto, [data-tema="claro"] .sentiel-tema__btn .i-claro, [data-tema="oscuro"] .sentiel-tema__btn .i-oscuro { display: block; }
.sentiel-tema__menu { position: absolute; z-index: 1000; top: calc(100% + .4rem); right: 0; min-width: 15rem; padding: .3rem; background: var(--sentiel-bg); color: var(--sentiel-text); border: 1px solid var(--sentiel-line); border-radius: var(--sentiel-r-md); box-shadow: 0 14px 30px -12px rgb(0 0 0 / .45); }
.sentiel-tema__menu[hidden] { display: none; }
.sentiel-tema__menu button { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .55rem .65rem; border: 0; border-radius: var(--sentiel-r-sm); background: none; color: var(--sentiel-text) !important; font: inherit; font-size: var(--wp--preset--font-size--sm); text-align: left; cursor: pointer; }
.sentiel-tema__menu button:hover, .sentiel-tema__menu button:focus-visible { background: var(--sentiel-surface); }
.sentiel-tema__menu button[aria-checked="true"] { font-weight: 700; color: var(--sentiel-primary) !important; }
.sentiel-tema__menu button[aria-checked="true"]::after { content: "✓"; margin-left: auto; }

/* ---------- Paleta ---------- */
html.tema-oscuro {
	color-scheme: dark;
	--wp--preset--color--bg: #0f1114;
	--wp--preset--color--surface: #171a1e;
	--wp--preset--color--surface-2: #1f2328;
	--wp--preset--color--line: #2c3137;
	--wp--preset--color--text: #e8eaed;
	--wp--preset--color--text-muted: #9ca3ab;
	--wp--preset--color--primary: #e0393f;
	--wp--preset--color--primary-soft: #c42a30;
	--wp--preset--color--ink: #08090b;
	--wp--preset--color--ink-muted: #a9aeb4;
	--wp--preset--color--primary-on-ink: #ef5a5f;
}
.tema-oscuro body { background: var(--sentiel-bg); color: var(--sentiel-text); }
.tema-oscuro .has-bg-color { color: var(--sentiel-on) !important; }
.tema-oscuro .sentiel-header, .tema-oscuro .sentiel-footer { border-color: var(--sentiel-line); }
.tema-oscuro .sentiel-header { box-shadow: 0 1px 0 var(--sentiel-line); }

/* ---------- Formularios (tienda, checkout de bloques, Mi cuenta) ---------- */
.tema-oscuro input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="range"]),
.tema-oscuro select, .tema-oscuro textarea {
	background-color: var(--sentiel-surface) !important; color: var(--sentiel-text) !important; border-color: var(--sentiel-line) !important;
}
.tema-oscuro input::placeholder, .tema-oscuro textarea::placeholder { color: var(--sentiel-muted); }
.tema-oscuro .wc-block-components-text-input label, .tema-oscuro .wc-blocks-components-select__label,
.tema-oscuro .wc-block-components-combobox .wc-block-components-combobox-control label { color: var(--sentiel-muted) !important; }
.tema-oscuro .wc-block-components-checkbox__input[type="checkbox"], .tema-oscuro .wc-block-components-radio-control__input { background: var(--sentiel-surface); border-color: #5a616a; }
.tema-oscuro .wc-block-components-panel, .tema-oscuro .wc-block-components-totals-wrapper,
.tema-oscuro .wc-block-components-order-summary, .tema-oscuro .wc-block-components-sidebar-layout .wc-block-components-main { border-color: var(--sentiel-line) !important; }
.tema-oscuro .wc-block-components-notice-banner { background: var(--sentiel-surface); color: var(--sentiel-text); }
.tema-oscuro .woocommerce-message, .tema-oscuro .woocommerce-info, .tema-oscuro .woocommerce-error { background: var(--sentiel-surface); color: var(--sentiel-text); }
.tema-oscuro .shop_table, .tema-oscuro .shop_table th, .tema-oscuro .shop_table td { border-color: var(--sentiel-line) !important; }
.tema-oscuro .sentiel-cat-nav__caja { background: var(--sentiel-surface); border-color: #5a616a; }

/* ---------- Fotos de producto (fondo blanco de origen): sobre gris claro, sin recuadro brillante ---------- */
.tema-oscuro .sentiel-card__img, .tema-oscuro .woocommerce-product-gallery__image, .tema-oscuro .wc-block-components-product-image,
.tema-oscuro .wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery__wrapper,
.tema-oscuro [class*="__foto"] {
	background-color: #e9ebee !important; border-radius: var(--sentiel-r-sm);
}
.tema-oscuro .sentiel-card__img img, .tema-oscuro .woocommerce-product-gallery__image img, .tema-oscuro .wc-block-components-product-image img,
.tema-oscuro [class*="__foto"] img { mix-blend-mode: multiply; background: transparent !important; }
/* Carrito y resumen: el fondo claro va solo en la imagen (la celda es tan alta como el renglón). */
.tema-oscuro .wc-block-cart-item__image img, .tema-oscuro .wc-block-components-order-summary-item__image img { background: #e9ebee !important; padding: 3px; border-radius: var(--sentiel-r-sm); }
.tema-oscuro .sentiel-mc__fila.desc span:last-child { color: #4cc27a; }
.tema-oscuro .sentiel-card__img { border-radius: 0; }

/* ---------- Colores fijos del tema ---------- */
.tema-oscuro .sentiel-stock--disponible, .tema-oscuro .sentiel-copiar.is-ok { color: #4cc27a; }
.tema-oscuro .sentiel-stock--sobre-pedido { color: #e3a64a; }
.tema-oscuro .sentiel-card:hover, .tema-oscuro .sentiel-card:focus-within { border-color: #3d444c; box-shadow: 0 14px 30px -18px rgb(0 0 0 / .9); }
.tema-oscuro .sentiel-card .dsu-lista-btn--icono { background: rgb(15 17 20 / .85); }
.tema-oscuro .sentiel-card__mas { background: var(--sentiel-bg); }
.tema-oscuro .sentiel-ficha-datos { background: var(--sentiel-surface); }
.tema-oscuro .dsu-msi-badge { background: var(--sentiel-surface-2); border: 1px solid var(--sentiel-line); }

/* ---------- Plugin DSU Cotizaciones (Mi cuenta, selector de listas) ---------- */
.tema-oscuro .dsu-lista-pop, .tema-oscuro .dsu-cot-cli-res { background: var(--sentiel-bg); color: var(--sentiel-text); border-color: var(--sentiel-line); }
.tema-oscuro .dsu-cot-cli-res .res { border-color: var(--sentiel-line); }
.tema-oscuro .dsu-cot-cli-res .res:hover { background: var(--sentiel-surface); }
.tema-oscuro .dsu-listas, .tema-oscuro .dsu-cot-nueva, .tema-oscuro .dsu-cot-mias { --dsu-l: var(--sentiel-line); }
.tema-oscuro .dsu-listas .button:not(.dsu-cot-btn), .tema-oscuro .dsu-cot-nueva .button:not(.dsu-cot-btn), .tema-oscuro .dsu-cot-mias .button,
.tema-oscuro .dsu-listas button:not(.dsu-cot-btn) { background: var(--sentiel-surface); color: var(--sentiel-text); }
.tema-oscuro .dsu-listas-nav a { border-color: var(--sentiel-line); }
.tema-oscuro .dsu-baja { color: #4cc27a; }