/* La paleta oscura se comparte entre todas las páginas. Los fallbacks de cada
   componente conservan su diseño claro y los colores propios de las imágenes. */
:root { color-scheme: light; }

html[data-theme="dark"] {
    color-scheme: dark;
    --theme-page: #17131b;
    --theme-surface: #211c26;
    --theme-surface-soft: #2b2430;
    --theme-overlay: rgba(33, 28, 38, .96);
    --theme-text: #f5eef6;
    --theme-muted: #bdaebe;
    --theme-accent: #ff8db6;
    --theme-accent-soft: #38232f;
    --theme-accent-border: #82536a;
    --theme-border: #4a3e50;
    --theme-focus: #ffa3c5;
    --theme-success: #79dfad;
    --theme-success-soft: #19372c;
    --theme-info: #c8bbff;
    --theme-info-soft: #2c2842;
    --theme-warning: #f4c884;
    --theme-warning-soft: #3a2e1d;
    --theme-danger: #ffa4b1;
    --theme-danger-soft: #3d242e;
    background: var(--theme-page);
    scrollbar-color: #76637c #211c26;
}

/* Controles compartidos, incluidos los creados por JavaScript. */
html[data-theme="dark"] :where(button, input, select, textarea) { color: inherit; }
html[data-theme="dark"] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]), select, textarea) {
    background-color: var(--theme-surface);
    color: var(--theme-text);
    border-color: var(--theme-border);
}
html[data-theme="dark"] :where(input, textarea)::placeholder { color: var(--theme-muted); opacity: 1; }
html[data-theme="dark"] :where(input, textarea):-webkit-autofill {
    -webkit-text-fill-color: var(--theme-text);
    -webkit-box-shadow: 0 0 0 100px var(--theme-surface) inset;
    caret-color: var(--theme-text);
}
html[data-theme="dark"] .brand-logo img { background: #fff; border-radius: 10px; padding: 4px 7px; }
html[data-theme="dark"] .ivette-home .discover-section { color: var(--theme-text); }
html[data-theme="dark"] .ivette-home .storefront__filter.is-active {
    color: var(--theme-accent);
    background: var(--theme-accent-soft);
    border-color: var(--theme-accent);
}
html[data-theme="dark"] .pedido-page { background: var(--theme-page); }
html[data-theme="dark"] .pedido-product img { background: #fff; }

/* El selector vive en la cabecera, también en pantallas pequeñas. */
.nav-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 9px; }
.nav-wrap { gap: 18px; }
.theme-picker { position: relative; color: var(--theme-text, #302530); }
.theme-picker[hidden] { display: none; }
.theme-picker__toggle {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--theme-border, #e7dfe6);
    border-radius: 50%;
    background: var(--theme-surface, #fff);
    cursor: pointer;
    list-style: none;
}
.theme-picker__toggle::-webkit-details-marker { display: none; }
.theme-picker__toggle::marker { content: ""; }
.theme-picker__toggle:hover,
.theme-picker[open] .theme-picker__toggle {
    background: var(--theme-accent-soft, #fff1f6);
    color: var(--theme-accent, #b72458);
    border-color: var(--theme-accent-border, #efc7d6);
}
.theme-picker__moon { display: none; }
html[data-theme="dark"] .theme-picker__sun { display: none; }
html[data-theme="dark"] .theme-picker__moon { display: block; }
.theme-picker__panel {
    position: absolute;
    z-index: 5;
    top: calc(100% + 12px);
    right: 0;
    width: 232px;
    max-width: calc(100vw - 28px);
    padding: 10px;
    border: 1px solid var(--theme-border, #e7dfe6);
    border-radius: 18px;
    background: var(--theme-surface, #fff);
    box-shadow: 0 16px 45px rgba(15, 8, 18, .18);
}
.theme-picker__panel p {
    margin: 4px 10px 8px;
    color: var(--theme-muted, #776776);
    font: 700 12px/1.5 var(--font-body);
}
.theme-picker__panel button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 44px;
    padding: 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: inherit;
    text-align: left;
    font: 600 14px/1.4 var(--font-body);
    cursor: pointer;
}
.theme-picker__panel button:hover { background: var(--theme-surface-soft, #f7f3f6); }
.theme-picker__panel button[aria-pressed="true"] { color: var(--theme-accent, #b72458); background: var(--theme-accent-soft, #fff1f6); }
.theme-picker__panel small { display: block; margin-top: 2px; font-size: 11px; font-weight: 400; color: var(--theme-muted, #776776); }
.theme-picker__check { visibility: hidden; }
.theme-picker__panel button[aria-pressed="true"] .theme-picker__check { visibility: visible; }
.theme-picker :is(summary, button):focus-visible { outline: 2px solid var(--theme-focus, #b72458); outline-offset: 3px; }

@media (min-width: 1081px) {
    .site-header .desktop-nav { gap: clamp(12px, 1.5vw, 23px); }
    .site-header .brand-logo { flex: 0 1 240px; min-width: 160px; }
    .site-header .brand-logo img { width: 100%; }
}
@media (max-width: 760px) {
    .site-header .nav-wrap { gap: 10px; }
    .site-header .brand-logo { min-width: 0; flex: 0 1 190px; }
    .site-header .brand-logo img { width: 100%; }
    .nav-actions { gap: 6px; }
}

/* La impresión conserva el fondo claro aunque la preferencia sea oscura. */
@media print {
    .theme-picker { display: none; }
    html[data-theme="dark"] {
        color-scheme: light;
        --theme-page: initial;
        --theme-surface: initial;
        --theme-surface-soft: initial;
        --theme-overlay: initial;
        --theme-text: initial;
        --theme-muted: initial;
        --theme-accent: initial;
        --theme-accent-soft: initial;
        --theme-accent-border: initial;
        --theme-border: initial;
        --theme-focus: initial;
        --theme-success: initial;
        --theme-success-soft: initial;
        --theme-info: initial;
        --theme-info-soft: initial;
        --theme-warning: initial;
        --theme-warning-soft: initial;
        --theme-danger: initial;
        --theme-danger-soft: initial;
        background: white;
    }
}