/* Tema claro / oscuro.

   Los colores del sitio son variables CSS ("tokens"): el tema claro las define en :root y el
   oscuro las redefine. El resto del CSS usa var(--...), así que cambiar de tema es cambiar
   solo estos valores.

   static/js/tema.js pone <html data-tema="claro|oscuro"> antes de dibujar la página: el tema
   que la persona eligió (guardado en localStorage) o, si eligió "sistema" o nada, el del
   sistema operativo (prefers-color-scheme). Sin JavaScript el sitio queda en claro.

   Tailwind no se puede recompilar (sin Node), así que las clases de colores que usan las
   plantillas (bg-white, text-neutral-500, border-neutral-200…) se redefinen aquí con las
   variables. Este archivo va DESPUÉS de klzalo.css: con la misma especificidad gana el último. */

:root {
  color-scheme: light;
  --fondo: #fafafa;            /* página (bg-neutral-50) */
  --superficie: #ffffff;       /* tarjetas y cajas (bg-white) */
  --superficie-2: #f5f5f5;     /* chips, selector de escala */
  --texto: #111111;            /* tinta */
  --texto-2: #404040;          /* neutral-700 */
  --texto-3: #525252;          /* neutral-600 */
  --texto-suave: #737373;      /* neutral-500 */
  --texto-tenue: #a3a3a3;      /* neutral-400 */
  --texto-apagado: #d4d4d4;    /* neutral-300 / 200: emojis de relleno */
  --borde: #e5e5e5;            /* neutral-200 */
  --borde-fuerte: #d4d4d4;     /* neutral-300 */
  --borde-suave: #f5f5f5;      /* neutral-100 */
  --invertido: #111111;        /* botón principal, talla elegida */
  --invertido-hover: #404040;
  --sobre-invertido: #ffffff;
  --acento: #ff4d00;
  --foto: #f5f5f5;             /* fondo de las fotos de producto */
  --foto-ficha: #ffffff;
  --portada: #111111;          /* recuadro negro de la portada */
  --ok: #047857;  --ok-fuerte: #065f46;  --ok-fondo: #ecfdf5;  --ok-borde: #a7f3d0;
  --error: #b91c1c; --error-fuerte: #991b1b; --error-fondo: #fef2f2; --error-borde: #fecaca;
  --aviso: #b45309; --aviso-fuerte: #92400e; --aviso-fondo: #fffbeb; --estrellas: #d97706;
  --grilla: #f0f0f0;           /* líneas del gráfico */
}

:root[data-tema="oscuro"] {
  color-scheme: dark;
  --fondo: #0f0f10;
  --superficie: #18181b;
  --superficie-2: #26262a;
  --texto: #ededed;
  --texto-2: #d4d4d4;
  --texto-3: #c2c2c2;
  --texto-suave: #a1a1a1;
  --texto-tenue: #7a7a7a;
  --texto-apagado: #4a4a4f;
  --borde: #2e2e33;
  --borde-fuerte: #414147;
  --borde-suave: #232327;
  --invertido: #ededed;
  --invertido-hover: #c8c8c8;
  --sobre-invertido: #111111;
  --foto: #e4e4e7;             /* las fotos tienen fondo blanco: se dejan claras, un poco atenuadas */
  --foto-ficha: #e4e4e7;
  --portada: #1c1c20;
  --ok: #34d399;  --ok-fuerte: #6ee7b7;  --ok-fondo: rgba(16, 185, 129, 0.12);  --ok-borde: rgba(16, 185, 129, 0.35);
  --error: #f87171; --error-fuerte: #fca5a5; --error-fondo: rgba(239, 68, 68, 0.12); --error-borde: rgba(239, 68, 68, 0.35);
  --aviso: #fbbf24; --aviso-fuerte: #fcd34d; --aviso-fondo: rgba(245, 158, 11, 0.12); --estrellas: #fbbf24;
  --grilla: #2a2a2e;
}
/* --- Clases de Tailwind usadas en las plantillas, ahora con variables -------------- */
.bg-neutral-50 { background-color: var(--fondo); }
.bg-white { background-color: var(--superficie); }
.bg-white\/95 { background-color: color-mix(in srgb, var(--superficie) 95%, transparent); }
.bg-neutral-100 { background-color: var(--superficie-2); }
.bg-tinta { background-color: var(--portada); }
.bg-emerald-50 { background-color: var(--ok-fondo); }
.bg-red-50 { background-color: var(--error-fondo); }

.text-tinta { color: var(--texto); }
.text-neutral-700 { color: var(--texto-2); }
.text-neutral-600 { color: var(--texto-3); }
.text-neutral-500 { color: var(--texto-suave); }
.text-neutral-400 { color: var(--texto-tenue); }
.text-neutral-300, .text-neutral-200 { color: var(--texto-apagado); }
.text-emerald-700 { color: var(--ok); }
.text-emerald-800 { color: var(--ok-fuerte); }
.text-red-700 { color: var(--error); }
.text-red-800 { color: var(--error-fuerte); }
.text-amber-600 { color: var(--estrellas); }

.border-neutral-100 { border-color: var(--borde-suave); }
.border-neutral-200 { border-color: var(--borde); }
.border-neutral-300 { border-color: var(--borde-fuerte); }
.border-tinta { border-color: var(--texto); }
.border-white { border-color: var(--superficie); }
.border-emerald-200 { border-color: var(--ok-borde); }
.border-red-200 { border-color: var(--error-borde); }
.accent-tinta { accent-color: var(--texto); }

.hover\:text-tinta:hover { color: var(--texto); }
.hover\:text-red-700:hover { color: var(--error); }
.hover\:border-tinta:hover { border-color: var(--texto); }
.focus\:border-tinta:focus { border-color: var(--texto); }
.focus\:bg-white:focus { background-color: var(--superficie); }

/* Componentes de klzalo.css (@layer components) */
.btn { background-color: var(--invertido); color: var(--sobre-invertido); }
.btn:hover { background-color: var(--invertido-hover); }
.btn-sec { border-color: var(--borde-fuerte); background-color: var(--superficie); color: var(--texto); }
.btn-sec:hover { border-color: var(--texto); }
.chip { background-color: var(--superficie-2); color: var(--texto-2); }
.campo label { color: var(--texto-2); }
.campo input, .campo select, .campo textarea { border-color: var(--borde-fuerte); background-color: var(--superficie); color: var(--texto); }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--texto); --tw-ring-color: var(--texto); }

/* Fotos de producto: siempre sobre fondo claro (vienen con fondo blanco); con
   mix-blend-multiply el blanco de la foto se funde con este fondo. */
.foto { background-color: var(--foto); }
.foto-ficha { background-color: var(--foto-ficha); }

/* Logo de KLZALÖ: dos archivos (letras negras / blancas) y se muestra el del tema. */
.logo-oscuro, :root[data-tema="oscuro"] .logo-claro { display: none; }
:root[data-tema="oscuro"] .logo-oscuro { display: block; }
:root[data-tema="oscuro"] .logo-pie.logo-oscuro { display: inline-block; }

/* Botón de tema de la cabecera (static/js/tema.js): muestra el ícono del tema actual. */
.boton-tema {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; flex: none;
  border: 1px solid var(--borde); border-radius: 9999px;
  background: var(--superficie); color: var(--texto-suave);
}
.boton-tema:hover { color: var(--texto); border-color: var(--borde-fuerte); }
.boton-tema:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.boton-tema svg { width: 1.125rem; height: 1.125rem; }
.boton-tema [data-icono] { display: none; }
.boton-tema[data-tema="claro"] [data-icono="claro"],
.boton-tema[data-tema="oscuro"] [data-icono="oscuro"],
.boton-tema[data-tema="sistema"] [data-icono="sistema"] { display: block; }