/* Niam Club — temas visuales. Cada tema solo redefine las variables de color de rewards.css; no cambia nada de lo que hace la página.
   "Automático" = sin atributo (sigue al celular, claro u oscuro). El tema elegido vive en <html data-theme="…"> (lo pone theme-boot.js
   antes de pintar y miniam-theme.js al cambiarlo). Los selectores [data-theme] sirven también para las vistas previas del selector.
   Variables por tema: --page --bg --soft --muted --dark --text --line --ok --warn --danger --shadow, el acento (--orange, --orange-dark)
   y el color del texto sobre el acento (--on-accent). test/miniam-themes.test.mjs revisa que todo se lea bien. */

[data-theme="light"] {
  --orange: #FF7A00; --orange-dark: #E86600; --on-accent: #FFFFFF;
  --page: #F4F1EC; --bg: #FFFFFF; --soft: #E5E1DB; --muted: #6B655E; --dark: #333333; --text: #111111;
  --line: rgba(0, 0, 0, .1); --ok: #1E9E48; --warn: #B27600; --danger: #D13B3B;
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 28px rgba(0,0,0,.07);
}
[data-theme="dark"] {
  --orange: #FF7A00; --orange-dark: #FF8A1F; --on-accent: #FFFFFF;
  --page: #000000; --bg: #090909; --soft: #232323; --muted: #A8A29B; --dark: #D0D0D0; --text: #F2F2F2;
  --line: rgba(255, 255, 255, .12); --ok: #34C759; --warn: #FFB300; --danger: #FF6B6B; --shadow: none;
}
/* Arena: beige cálido con azul */
[data-theme="arena"] {
  --orange: #2F5AA8; --orange-dark: #244A8E; --on-accent: #FFFFFF;
  --page: #EFE6D6; --bg: #FAF5EA; --soft: #E3D8C4; --muted: #6A6253; --dark: #2B3A5C; --text: #1B2742;
  --line: rgba(27, 39, 66, .14); --ok: #2E7D4F; --warn: #8F5A00; --danger: #B83A3A;
  --shadow: 0 1px 2px rgba(27,39,66,.06), 0 8px 28px rgba(27,39,66,.09);
}
/* Marea: azul noche con arena */
[data-theme="marea"] {
  --orange: #E8C58A; --orange-dark: #E8C58A; --on-accent: #0B1630;
  --page: #0B1630; --bg: #13224A; --soft: #1F3163; --muted: #A7B3CE; --dark: #D7DEEE; --text: #F4EBDD;
  --line: rgba(244, 235, 221, .16); --ok: #5BD28C; --warn: #F2C14E; --danger: #FF8A8A; --shadow: none;
}
/* Bosque: verdes profundos */
[data-theme="bosque"] {
  --orange: #86CE8F; --orange-dark: #86CE8F; --on-accent: #0A1810;
  --page: #0A1810; --bg: #10261A; --soft: #1A3A28; --muted: #9DB8A4; --dark: #CFE3D2; --text: #EAF3E6;
  --line: rgba(234, 243, 230, .14); --ok: #7BDC8E; --warn: #E8C34A; --danger: #FF8F8F; --shadow: none;
}
/* Rosa: suave y juguetón */
[data-theme="rosa"] {
  --orange: #CC3A73; --orange-dark: #B02D62; --on-accent: #FFFFFF;
  --page: #FFEFF4; --bg: #FFFFFF; --soft: #FADCE7; --muted: #8A566F; --dark: #5A2A42; --text: #3F1D30;
  --line: rgba(63, 29, 48, .12); --ok: #2E8A5F; --warn: #9A5A00; --danger: #C8344D;
  --shadow: 0 1px 2px rgba(214,69,125,.08), 0 8px 28px rgba(214,69,125,.13);
}
/* Minimal: blanco y negro, un solo acento */
[data-theme="minimal"] {
  --orange: #111111; --orange-dark: #111111; --on-accent: #FFFFFF;
  --page: #FFFFFF; --bg: #FFFFFF; --soft: #F1F1F1; --muted: #5E5E5E; --dark: #222222; --text: #0A0A0A;
  --line: rgba(0, 0, 0, .14); --ok: #1B7F3E; --warn: #8A5A00; --danger: #C62828; --shadow: none;
}

/* El menú público de cada restaurante usa otros nombres para algunos colores: se derivan del tema elegido. */
[data-theme] {
  --open: var(--ok); --closing: var(--warn); --closed: var(--muted);
  --soft-a: color-mix(in srgb, var(--soft) 70%, transparent);
  --peach: color-mix(in srgb, var(--orange) 55%, white);
}

/* Marea: un degradado suave de fondo, como el azul de la referencia */
html[data-theme="marea"] body { background: linear-gradient(180deg, #0B1630 0%, #17294F 60%, #243B6B 100%) fixed; }
html[data-theme="arena"] body { background: linear-gradient(180deg, #F3EADA 0%, #EAE0CD 100%) fixed; }

/* El logo oscuro de Niam toma el color del texto del tema; el texto de los botones usa el color pensado para el acento */
html[data-theme] .niam-logo path[fill="#181817"] { fill: var(--text); }
html[data-theme] .btn.primary, html[data-theme] .chip[aria-pressed="true"], html[data-theme] .how span { color: var(--on-accent); }
html[data-theme] { color-scheme: light; }
html[data-theme="dark"], html[data-theme="marea"], html[data-theme="bosque"] { color-scheme: dark; }

/* Botón "Temas" y su selector */
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.top-actions #logout { margin-left: 0; }
.theme-btn { display: inline-flex; align-items: center; gap: 6px; }
.theme-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 14px 0 4px; }
.theme-opt { text-align: left; border: 2px solid var(--line); border-radius: 16px; padding: 12px; background: var(--bg); color: var(--text); cursor: pointer; display: flex; flex-direction: column; gap: 10px; min-height: 84px; }
.theme-opt[aria-pressed="true"] { border-color: var(--orange); box-shadow: 0 0 0 2px var(--orange); }
.theme-opt b { font-size: .95rem; }
.theme-opt small { color: var(--muted); display: block; font-size: .78rem; }
.theme-opt .dots { display: flex; gap: 6px; }
.theme-opt .dots i { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line); display: block; }
.theme-opt .dots i:nth-child(1) { background: var(--page); }
.theme-opt .dots i:nth-child(2) { background: var(--soft); }
.theme-opt .dots i:nth-child(3) { background: var(--orange); border-color: var(--orange); }
.theme-opt .dots i:nth-child(4) { background: var(--text); border-color: var(--text); }
.theme-opt.auto { background: linear-gradient(135deg, #FFFFFF 50%, #090909 50%); color: #888; }
.theme-opt.auto b { background: var(--bg); color: var(--text); border-radius: 8px; padding: 2px 8px; align-self: flex-start; }
.theme-opt.auto small { background: var(--bg); color: var(--muted); border-radius: 8px; padding: 2px 8px; align-self: flex-start; }