/* =========================================================
   [T-W1] ARATECH web · tema claro (paleta de ARASYS) + botón de tema
   Se carga AL FINAL en todas las páginas. El tema oscuro no cambia.
   La clase la pone js/tema.js en <html> antes de pintar:
   html.light-mode → claro.
   ========================================================= */

/* ---------- 1. Botón del tema (idéntico al de ARASYS) ---------- */
#theme-toggle {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 40px; padding: 0 12px; flex: none;
    border: 1px solid var(--line-2); border-radius: 12px;
    background: rgba(255, 255, 255, .05); color: var(--text-1);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03);
    cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
    transition: background-color .25s ease, border-color .25s ease, transform .2s ease;
}
#theme-toggle:hover { border-color: var(--accent); background: rgba(255, 255, 255, .08); }
#theme-toggle:active { transform: scale(.95); }
#theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#theme-toggle .theme-track {
    position: relative; width: 34px; height: 12px; border-radius: 999px;
    background: var(--ink-1); border: 1px solid var(--line-2);
}
#theme-knob {
    position: absolute; top: -3px; left: -2px; width: 16px; height: 16px; border-radius: 50%;
    background: var(--accent); box-shadow: 0 0 14px rgba(30, 144, 255, .6);
    transform: translateX(18px);
    transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), background-color .35s ease, box-shadow .35s ease;
}
html.light-mode #theme-knob { transform: none; box-shadow: 0 0 10px rgba(31, 111, 235, .35); }
#theme-toggle .theme-sun, #theme-toggle .theme-moon { display: grid; place-items: center; transition: transform .35s ease, opacity .35s ease, filter .35s ease; }
#theme-toggle svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#theme-toggle .theme-moon svg { fill: currentColor; stroke: none; }
html:not(.light-mode) #theme-toggle .theme-moon { transform: scale(1.15); color: #75D0FA; filter: drop-shadow(0 0 6px rgba(117, 208, 250, .75)); }
html:not(.light-mode) #theme-toggle .theme-sun { opacity: .5; }
html.light-mode #theme-toggle .theme-sun { transform: scale(1.15); color: #E8A400; filter: drop-shadow(0 0 6px rgba(255, 196, 0, .6)); }
html.light-mode #theme-toggle .theme-moon { opacity: .5; }
#theme-toggle.switching .theme-track { animation: tw-riel .5s ease; }
@keyframes tw-riel { 40% { transform: scaleX(1.12); } }
@media (max-width: 600px) {
    #theme-toggle { height: 38px; padding: 0 9px; gap: 6px; }
    #theme-toggle .theme-track { width: 28px; }
    #theme-knob { transform: translateX(12px); }
    html.light-mode #theme-knob { transform: none; }
}

/* ---------- 2. Líquido que se derrama (de ARASYS T-14) ---------- */
html.t14-tema *, html.t14-tema *::before, html.t14-tema *::after { transition: none !important; }
html.t14-tema::view-transition-old(root) { animation: none; z-index: 1; }
html.t14-tema::view-transition-new(root) { animation: none; z-index: 2; clip-path: circle(0px at var(--t14-x, 50%) var(--t14-y, 0px)); }
@media (prefers-reduced-motion: reduce) { html.t14-tema::view-transition-new(root) { clip-path: none; } }

/* ---------- 3. Paleta clara de ARASYS ---------- */
html.light-mode {
    color-scheme: light;
    --ink-0: #F3F5F9;
    --ink-1: #FFFFFF;
    --ink-2: #EEF2F7;
    --line-1: #E6EBF2;
    --line-2: #DCE3EC;
    --line-3: #C3CDDA;
    --text-1: #0F172A;
    --text-2: #475569;
    --text-3: #5F6E85;
    --accent: #1F6FEB;
    --accent-ink: #1A5FD6;
    --accent-soft: rgba(31, 111, 235, .09);
    --cyan: #0EA5C6;
    --grad: linear-gradient(135deg, #1F6FEB 0%, #0EA5C6 100%);
    --ok: #15803D;
    --bad: #BE123C;
    --copper: #B4692E;
    --copper-soft: rgba(180, 105, 46, .3);
    --wa-ink: #04150B;
    --shadow-card: 0 1px 2px rgba(15, 23, 42, .06), 0 12px 28px rgba(15, 23, 42, .08);
}
html:not(.light-mode) { color-scheme: dark; }
html.light-mode body {
    background:
        radial-gradient(1100px 620px at 85% -8%, rgba(31, 111, 235, .08), transparent 60%),
        radial-gradient(900px 520px at -10% 105%, rgba(14, 165, 198, .05), transparent 60%),
        var(--ink-0);
}
html.light-mode ::selection { background: rgba(31, 111, 235, .2); }

/* Barra y botones con vidrio claro */
html.light-mode .nav { background: rgba(255, 255, 255, .78); border-bottom-color: var(--line-1); }
html.light-mode .btn--ghost { background: rgba(255, 255, 255, .7); border-color: var(--line-2); color: var(--text-1); }
html.light-mode .btn--ghost:hover { background: rgba(31, 111, 235, .06); border-color: rgba(31, 111, 235, .45); }
html.light-mode .btn--light { box-shadow: 0 8px 20px rgba(31, 111, 235, .25), inset 0 1px 0 rgba(255, 255, 255, .25); }
html.light-mode #theme-toggle { background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .06); }
html.light-mode #theme-toggle .theme-track { background: var(--ink-2); }

/* Logo: versión con letras oscuras */
html.light-mode img[src*="logo-aratech-420.webp"] { content: url("../assets/img/logo-aratech-420-claro.webp"); }

/* ---------- 4. Tienda ---------- */
html.light-mode .ti-btn-carrito { background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .06); }
html.light-mode .ti-btn-carrito:hover { background: rgba(31, 111, 235, .05); }
html.light-mode .ti-barra-compra { background: rgba(255, 255, 255, .94); box-shadow: 0 -8px 24px rgba(15, 23, 42, .08); }
html.light-mode .ti-mini-carrito { background: rgba(255, 255, 255, .97); box-shadow: 0 22px 50px rgba(15, 23, 42, .18); }
html.light-mode .ti-card, html.light-mode .ti-filtros, html.light-mode .ti-compra { box-shadow: var(--shadow-card); }

/* ---------- 5. Pago ---------- */
html.light-mode .pg-campo input { background: #fff; }
html.light-mode .pg-campo input[aria-invalid="true"] { border-color: var(--bad); }
html.light-mode .pg-error { color: var(--bad); }

/* Etiqueta "Pago seguro" de la barra: en una sola línea */
.pg-seguro { white-space: nowrap; }
@media (max-width: 420px) { .nav__actions .pg-seguro { font-size: .8rem; } }