/* ──────────────────────────────────────────────────────────────────────────
   Luz de día y luz de noche.

   No reescribe las hojas de estilo: **redefine sus variables**. El CSS ya
   estaba bien hecho —papel, piso, tinta, línea, todo en `:root`— así que el
   modo noche es cambiar esos valores, no repintar 2.330 líneas.

   ── Qué había y qué se agrega ────────────────────────────────────────────

   El panel YA seguía al sistema: `admin.css` tiene su bloque
   `@media (prefers-color-scheme: dark)` desde antes, y ya venía escrito como
   `:root:not([data-tema="claro"])` — o sea que quien lo escribió dejó el
   gancho puesto para esto. Lo que le faltaba era la otra mitad: poder elegir
   oscuro en un computador que está en claro. Eso es `[data-tema="oscuro"]`.

   La tienda no tenía nada. Ahí se define el tema entero.

   ── Cómo se decide qué se ve ─────────────────────────────────────────────

     1. `html[data-tema="oscuro"]`  — lo que la persona eligió con el botón.
     2. `html[data-tema="claro"]`   — lo mismo, en la otra dirección.
     3. `@media (prefers-color-scheme: dark)` — lo que dice su sistema.

   La elección manda sobre el sistema: quien aprieta el botón está diciendo
   «ahora quiero esto», y eso vale más que algo que configuró hace meses.

   El `:not([data-tema="claro"])` dentro del @media es lo que permite volver a
   claro en un computador que está en oscuro. Sin esa parte el botón
   funcionaría en una dirección y no en la otra — que es el error clásico.
   ────────────────────────────────────────────────────────────────────────── */

/* ── La tienda, de noche ──────────────────────────────────────────────── */

:root[data-tema="oscuro"],
:root:not([data-tema="claro"]) { --foto-fondo:#FFFFFF }

:root[data-tema="oscuro"] {
  --papel:#1B1620;   --piso:#141018;      --linea:#332B3A;
  --tinta:#F2ECF4;   --tinta-2:#CFC4D6;   --tenue:#9A8CA3;
  /* El magenta NO se toca: es el de la marca y se queda igual de día y de
     noche. Sólo se oscurecen los dos tonos de FONDO —el tenue y el pálido—,
     que en claro son rosas casi blancos y sobre papel oscuro serían manchas
     luminosas. Eso no cambia el color de la marca, cambia el papel. */
  --marca-tenue:#2C1F29; --marca-pal:#4A2C3D;
  --ok:#4ADE80;      --alerta:#FBBF24;
  --sombra:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -22px rgba(0,0,0,.9);
  /* La foto del producto vive sobre fondo claro SIEMPRE, y es a propósito:
     las botellas están fotografiadas sobre blanco, y en un recuadro oscuro
     aparecería un halo blanco alrededor de cada una. Se baja un punto para
     que no deslumbre, pero no se oscurece. */
  --foto-fondo:#EFEAF0;
  /* Le dice al navegador que dibuje sus propias cosas —barras de scroll,
     campos nativos, el calendario de una fecha— en oscuro. Sin esto queda
     una barra de scroll blanca al lado de una página negra. */
  color-scheme: dark;
}

/* El panel de noche ya lo hacía el @media de admin.css. Esto es para poder
   ELEGIRLO en un computador que está en claro. */
:root[data-tema="oscuro"] {
  --pa-fondo:#141013;   --pa-papel:#1e181b;  --pa-papel-2:#241d21;
  --pa-tinta:#f4eef0;   --pa-tinta-2:#b5a7ad; --pa-tinta-3:#8a7b82;
  --pa-borde:#342a2f;   --pa-borde-2:#2a2226;
  --pa-marca:#e0538a;   --pa-marca-osc:#c84a7c; --pa-marca-suave:#33161f;
  --pa-ok:#63d69e;      --pa-ok-fondo:#10301f;
  --pa-err:#ff8f88;     --pa-err-fondo:#3a1614;
  --pa-av:#f2c473;      --pa-av-fondo:#332510;
  --pa-sombra:0 1px 2px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.3);
  --pa-sombra-2:0 2px 6px rgba(0,0,0,.5), 0 12px 28px rgba(0,0,0,.4);
  --gris:#9A8CA3;
}
/* El logo del panel es oscuro sobre transparente: sobre fondo negro
   desaparece. Se le pone una tarjeta blanca detrás, igual que ya hace el
   @media de admin.css para el mismo caso. */
:root[data-tema="oscuro"] .pa-marca-logo,
:root[data-tema="oscuro"] .pa-entrar-logo {
  background:#fff; padding:7px 11px; border-radius:11px; box-sizing:content-box;
}

/* ── La tienda siguiendo al sistema ───────────────────────────────────── */

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --papel:#1B1620;   --piso:#141018;      --linea:#332B3A;
    --tinta:#F2ECF4;   --tinta-2:#CFC4D6;   --tenue:#9A8CA3;
    /* El magenta de la marca se queda como es. Ver la nota de arriba. */
    --marca-tenue:#2C1F29; --marca-pal:#4A2C3D;
    --ok:#4ADE80;      --alerta:#FBBF24;
    --sombra:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -22px rgba(0,0,0,.9);
    --foto-fondo:#EFEAF0;
    --gris:#9A8CA3;
    color-scheme: dark;
  }
}

/* ── LO QUE USA «--tinta» COMO FONDO ──────────────────────────────────
   Esto se me pasó en la primera versión y se vio feo en producción, así que
   queda escrito para que no vuelva a pasar.

   `--tinta` es el color del TEXTO: oscuro sobre papel claro. Pero seis
   elementos la usan al revés, como FONDO, contando con que es oscura — el pie
   entero, el sello de ahorro, los mensajes flotantes y dos degradados. Todos
   llevan el texto en blanco escrito a mano.

   Al invertir `--tinta` a claro para el modo noche, esos seis quedaron con
   fondo claro y texto blanco encima: ilegibles. El pie, que en una página con
   poco contenido ocupa media pantalla, se veía en blanco.

   El arreglo es separar los dos usos. `--superficie-osc` es «oscuro de marca»
   y se queda oscuro en los dos temas, que es lo que esos elementos siempre
   quisieron decir. No se toca tienda.css: el cambio vive acá, en un lugar. */

:root { --superficie-osc:#33253F }
:root[data-tema="oscuro"] { --superficie-osc:#241E2B }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) { --superficie-osc:#241E2B }
}

:root[data-tema="oscuro"] .pie,
:root[data-tema="oscuro"] .sello.ahorro,
:root[data-tema="oscuro"] .flota { background:var(--superficie-osc) }
:root[data-tema="oscuro"] .exp-hero {
  background:linear-gradient(135deg,var(--superficie-osc),#7A2454);
}
/* Este se me había escapado, y es el que René vio: el degradado de la banda de
   Vino al Puerto empieza en `--tinta`, así que en oscuro arrancaba casi blanco
   y el texto blanco de encima desaparecía en ese tramo.
   No lo detectó el medidor de contraste porque mira `background-color` y esto
   es un `background-image`. Está anotado en el medidor para que no se repita. */
:root[data-tema="oscuro"] .exp-prueba {
  background:linear-gradient(115deg,var(--superficie-osc) 0%,#3A2544 45%,#7A2454 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .pie,
  :root:not([data-tema="claro"]) .sello.ahorro,
  :root:not([data-tema="claro"]) .flota { background:var(--superficie-osc) }
  :root:not([data-tema="claro"]) .exp-hero {
    background:linear-gradient(135deg,var(--superficie-osc),#7A2454);
  }
  :root:not([data-tema="claro"]) .exp-prueba {
    background:linear-gradient(115deg,var(--superficie-osc) 0%,#3A2544 45%,#7A2454 100%);
  }
}

/* ── Los pocos lugares con el color escrito a mano ────────────────────── */

/* La foto del producto y las miniaturas: fondo claro en los dos temas. */
.prod-foto, .bs-it img, .gal-m { background:var(--foto-fondo) }

/* Los avisos verdes y rojos llevaban el color fijo en el CSS. */
:root[data-tema="oscuro"] .aviso.ok,
:root[data-tema="oscuro"] .res-aviso.ok  { background:rgba(74,222,128,.12); color:#86EFAC }
:root[data-tema="oscuro"] .aviso.mal,
:root[data-tema="oscuro"] .res-aviso.mal { background:rgba(248,113,113,.12); color:#FCA5A5 }
:root[data-tema="oscuro"] .res-ok        { background:rgba(74,222,128,.14); color:#86EFAC }
:root[data-tema="oscuro"] .res,
:root[data-tema="oscuro"] .res-form      { background:var(--papel) }
:root[data-tema="oscuro"] input, :root[data-tema="oscuro"] textarea,
:root[data-tema="oscuro"] .inp,
:root[data-tema="oscuro"] .sel-btn, :root[data-tema="oscuro"] .sel-lista {
  background:var(--papel); color:var(--tinta);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .aviso.ok,
  :root:not([data-tema="claro"]) .res-aviso.ok  { background:rgba(74,222,128,.12); color:#86EFAC }
  :root:not([data-tema="claro"]) .aviso.mal,
  :root:not([data-tema="claro"]) .res-aviso.mal { background:rgba(248,113,113,.12); color:#FCA5A5 }
  :root:not([data-tema="claro"]) .res-ok        { background:rgba(74,222,128,.14); color:#86EFAC }
  :root:not([data-tema="claro"]) .res,
  :root:not([data-tema="claro"]) .res-form      { background:var(--papel) }
  :root:not([data-tema="claro"]) input, :root:not([data-tema="claro"]) textarea,
  :root:not([data-tema="claro"]) .inp,
  :root:not([data-tema="claro"]) .sel-btn, :root:not([data-tema="claro"]) .sel-lista {
    background:var(--papel); color:var(--tinta);
  }
}

/* ── El botón ─────────────────────────────────────────────────────────── */

.tema-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; flex:none; padding:0;
  border:1px solid var(--linea, #e7e1e2); border-radius:999px;
  background:transparent; color:inherit; cursor:pointer;
  transition:border-color .15s, background .15s, color .15s;
}
.tema-btn:hover        { border-color:var(--marca, #9c1f4d); color:var(--marca, #9c1f4d) }
.tema-btn:focus-visible{ outline:2px solid var(--marca, #9c1f4d); outline-offset:2px }
/* Sin `display` acá: `.tema-btn svg` tiene más especificidad que `.tema-sol`
   y le ganaba, así que se veían el sol y la luna uno encima del otro. Se
   arregla dejando que las clases de abajo manden. */
.tema-btn svg          { width:19px; height:19px }

/* Un solo botón con los dos dibujos dentro; se muestra el que toca. Así no
   hay salto de tamaño al cambiar ni hay que cargar dos iconos.
   Muestra la LUNA cuando está en claro —porque es lo que vas a obtener si
   aprietas— y el SOL cuando está en oscuro. Es la convención de casi todas
   partes, y la contraria confunde a todo el mundo. */
.tema-sol  { display:none }
.tema-luna { display:block }
:root[data-tema="oscuro"] .tema-sol  { display:block }
:root[data-tema="oscuro"] .tema-luna { display:none }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .tema-sol  { display:block }
  :root:not([data-tema="claro"]) .tema-luna { display:none }
}

/* ── El logo de la tienda ─────────────────────────────────────────────
   El logo de siempre es oscuro sobre transparente: en la barra de noche
   desaparece casi entero. Hay una versión blanca desde antes —la que usa el
   pie— y de noche se muestra esa. */
.logo-noche { display:none }
:root[data-tema="oscuro"] .marca .logo-dia   { display:none }
:root[data-tema="oscuro"] .marca .logo-noche { display:block }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .marca .logo-dia   { display:none }
  :root:not([data-tema="claro"]) .marca .logo-noche { display:block }
}

/* En la barra del panel, que es una rejilla, el botón no debe estirarse. */
.pa-top .tema-btn { align-self:center }

/* El cambio no se anima: pasar 2.330 líneas de blanco a negro con una
   transición produce un barrido sucio en el que cada elemento llega a
   destiempo. Un corte limpio se lee mejor. */
@media (prefers-reduced-motion: reduce) {
  .tema-btn { transition:none }
}