/* ============================================================================
   Paletas (docs/197) — un bloque por paleta, SÓLO tokens
   ----------------------------------------------------------------------------
   Cada paleta redefine fondo, superficies, borde y los tres textos; algunas también los
   colores de estado, para que un "Pagado" verde en Dracula sea el verde de Dracula y no
   uno ajeno. Nada de selectores por componente: si un componente se ve mal en una paleta,
   el arreglo va en el componente (que use tokens), no acá.

   Cada selector lleva además una clase `.pal-<clave>`: la usa la galería de Apariencia
   para dibujar la miniatura de cada paleta con sus propios colores, sin repetirlos en JS.

   Catálogo (nombres, modo, acento propio): js/core/theme.js → PALETAS.
   Contraste: js/test/temas.test.mjs mide TODOS los textos contra TODAS las superficies
   de cada paleta y falla debajo de 4.5:1. Cambiar un valor acá sin correr el test es
   volver a los meses en que el gris "apagado" no llegaba ni a 3:1 y nadie lo sabía.

   Las oscuras aplican con `data-theme="dark"` + `data-variante`; las claras con
   `data-theme="light"` + `data-claro`. Grafito y Perla son las de styles.css y no
   necesitan bloque salvo para la miniatura.
   ============================================================================ */

/* ── Base para las miniaturas: las dos de styles.css ── */
.pal-perla   { --bg: #f5f6f7; --surface: #ffffff; --surface-2: #eef0f2; --border: #e3e5e9;
               --text: #17191d; --text-2: #545a63; --muted: #686e75; }
.pal-grafito { --bg: #0c0d10; --surface: #15171b; --surface-2: #1c1f25; --border: #2b2f37;
               --text: #e9ebee; --text-2: #aab0b9; --muted: #808893; }

/* ═════════════════════════ OSCUROS · negros y grises ═════════════════════════ */

/* Carbón — el oscuro de fábrica. Negro NEUTRO: ni el azul del grafito ni un marrón. Es el
   de las herramientas de trabajo serias (Vercel, Linear en negro): no tiñe el acento. */
[data-theme="dark"][data-variante="carbon"], .pal-carbon {
  --bg: #0e0e10; --surface: #161618; --surface-2: #1e1e21; --border: #2b2b2f;
  --text: #ececee; --text-2: #b1b1b7; --muted: #8b8b93; --neutral-bg: #232326;
}

/* Negro puro: en pantallas OLED el píxel apagado no consume. Pensado para el teléfono. */
[data-theme="dark"][data-variante="negro"], .pal-negro {
  --bg: #000000; --surface: #0b0b0d; --surface-2: #131316; --border: #26262b;
  --text: #e9ebee; --text-2: #aab0b9; --muted: #858b95; --neutral-bg: #17171a;
}

/* Ónix: negro con una pizca de calidez. Menos frío que el carbón, sin llegar a marrón. */
[data-theme="dark"][data-variante="onix"], .pal-onix {
  --bg: #100f0d; --surface: #191715; --surface-2: #221f1c; --border: #332f2a;
  --text: #efebe6; --text-2: #c0b8ae; --muted: #968d82; --neutral-bg: #26221e;
}

/* Café (antes "Cálido"): grises con marrón. De noche cansa menos que el grafito frío. */
[data-theme="dark"][data-variante="calido"], .pal-calido {
  --bg: #14100d; --surface: #1d1814; --surface-2: #251f19; --border: #3a3128;
  --text: #efe8e0; --text-2: #bfb3a5; --muted: #908576; --neutral-bg: #2a231c;
}

/* Medianoche: pizarra azulada, la del modo oscuro de Linear. */
[data-theme="dark"][data-variante="medianoche"], .pal-medianoche {
  --bg: #0a0c12; --surface: #11141c; --surface-2: #181c27; --border: #262b3a;
  --text: #e5e8f1; --text-2: #a6adc1; --muted: #7f879d; --neutral-bg: #1c2130;
}

/* Tenue: gris medio, la idea de "GitHub dimmed". Oscuro sin ser negro: de día, con luz
   en la oficina, un negro puro contra la ventana cansa más que esto. */
[data-theme="dark"][data-variante="tenue"], .pal-tenue {
  --bg: #22272e; --surface: #2b3139; --surface-2: #333a43; --border: #444c56;
  --text: #d8e1ea; --text-2: #b4bfca; --muted: #9ba6b2; --neutral-bg: #3a414b;
}

/* Tinta: negro violáceo (la escala "mauve" de Radix). */
[data-theme="dark"][data-variante="tinta"], .pal-tinta {
  --bg: #100e14; --surface: #18151e; --surface-2: #211d28; --border: #332d3c;
  --text: #eeebf3; --text-2: #bab3c6; --muted: #918a9f; --neutral-bg: #27222f;
}

/* Bosque: negro verdoso (la escala "sage" de Radix). */
[data-theme="dark"][data-variante="bosque"], .pal-bosque {
  --bg: #0c100e; --surface: #141916; --surface-2: #1c221e; --border: #2b342f;
  --text: #e7eee9; --text-2: #adbab1; --muted: #869389; --neutral-bg: #212823;
}

/* Alto contraste: fondo negro, texto blanco puro y bordes marcados (accesibilidad). */
[data-theme="dark"][data-variante="contraste"], .pal-contraste {
  --bg: #000000; --surface: #0d0d0d; --surface-2: #171717; --border: #6a6a6a;
  --text: #ffffff; --text-2: #e2e2e2; --muted: #b0b0b0; --neutral-bg: #1f1f1f;
}
[data-theme="dark"][data-variante="contraste"] .card,
[data-theme="dark"][data-variante="contraste"] .table-wrap { border-width: 2px; }
/* Con aurora, alto contraste no se vuelve translúcido: la translucidez es justo lo que
   baja la legibilidad, que es lo que esta paleta vino a subir. */
[data-fondo="aurora"][data-theme="dark"][data-variante="contraste"] {
  --glass: var(--surface); --glass-2: var(--surface-2); --glass-border: var(--border);
}

/* ═══════════════════════ OSCUROS · paletas populares ═════════════════════════
   Paletas abiertas (MIT) de mucho uso entre quienes pasan el día frente a una pantalla.
   Se toman sus colores con dos retoques: el texto "apagado" se aclara hasta 4.5:1 (las
   originales están pensadas para comentarios de código, no para encabezados de tabla), y
   el fondo de la página es un escalón más oscuro que su "base" para que las tarjetas
   —que usan la base— se separen del fondo. */

/* Nord — nordtheme.com */
[data-theme="dark"][data-variante="nord"], .pal-nord {
  --bg: #2a2f3a; --surface: #2e3440; --surface-2: #3b4252; --border: #4c566a;
  --text: #eceff4; --text-2: #d8dee9; --muted: #b3bccc; --neutral-bg: #434c5e;
  --success: #a3be8c; --success-bg: #333d3a; --warning: #ebcb8b; --warning-bg: #3d3b37;
  --danger: #e4868f;  --danger-bg: #3e3339;  --info: #88c0d0;    --info-bg: #313c48;
}

/* Dracula — draculatheme.com */
[data-theme="dark"][data-variante="dracula"], .pal-dracula {
  --bg: #21222c; --surface: #282a36; --surface-2: #343746; --border: #44475a;
  --text: #f8f8f2; --text-2: #d6d7e3; --muted: #a9b0d6; --neutral-bg: #3a3d4e;
  --success: #50fa7b; --success-bg: #243a31; --warning: #f1fa8c; --warning-bg: #37392c;
  --danger: #ff6e6e;  --danger-bg: #3d2a33;  --info: #8be9fd;    --info-bg: #25394a;
}

/* Catppuccin Mocha — catppuccin.com */
[data-theme="dark"][data-variante="mocha"], .pal-mocha {
  --bg: #181825; --surface: #1e1e2e; --surface-2: #313244; --border: #45475a;
  --text: #cdd6f4; --text-2: #bac2de; --muted: #a6adc8; --neutral-bg: #313244;
  --success: #a6e3a1; --success-bg: #243330; --warning: #f9e2af; --warning-bg: #36332f;
  --danger: #f38ba8;  --danger-bg: #3a2838;  --info: #89dceb;    --info-bg: #213342;
}

/* Tokyo Night — github.com/enkia/tokyo-night-vscode-theme */
[data-theme="dark"][data-variante="tokyo"], .pal-tokyo {
  --bg: #16161e; --surface: #1a1b26; --surface-2: #24283b; --border: #3b4261;
  --text: #c0caf5; --text-2: #a9b1d6; --muted: #9098c2; --neutral-bg: #292e42;
  --success: #9ece6a; --success-bg: #22301f; --warning: #e0af68; --warning-bg: #33291f;
  --danger: #f7768e;  --danger-bg: #36212c;  --info: #7dcfff;    --info-bg: #1c2e40;
}

/* Rosé Pine — rosepinetheme.com */
[data-theme="dark"][data-variante="rosepine"], .pal-rosepine {
  --bg: #191724; --surface: #1f1d2e; --surface-2: #26233a; --border: #403d52;
  --text: #e0def4; --text-2: #c3bfdd; --muted: #a39fbe; --neutral-bg: #2a273f;
  --success: #9ccfd8; --success-bg: #1f2d38; --warning: #f6c177; --warning-bg: #35292a;
  --danger: #eb6f92;  --danger-bg: #36213a;  --info: #c4a7e7;    --info-bg: #2c2440;
}

/* Gruvbox — github.com/morhetz/gruvbox */
[data-theme="dark"][data-variante="gruvbox"], .pal-gruvbox {
  --bg: #1d2021; --surface: #282828; --surface-2: #32302f; --border: #504945;
  --text: #ebdbb2; --text-2: #d5c4a1; --muted: #b3a494; --neutral-bg: #3c3836;
  --success: #b8bb26; --success-bg: #2f311d; --warning: #fabd2f; --warning-bg: #3a321c;
  --danger: #fb5b48;  --danger-bg: #3c2220;  --info: #83a598;    --info-bg: #283330;
}

/* One Dark — el tema de Atom */
[data-theme="dark"][data-variante="onedark"], .pal-onedark {
  --bg: #21252b; --surface: #282c34; --surface-2: #2f343e; --border: #3e4451;
  --text: #dcdfe4; --text-2: #b6bdca; --muted: #9ba3b1; --neutral-bg: #353b45;
  --success: #98c379; --success-bg: #2b3530; --warning: #e5c07b; --warning-bg: #37332d;
  --danger: #e37981;  --danger-bg: #3a2c33;  --info: #56b6c2;    --info-bg: #26353b;
}

/* Solarized (oscuro) — ethanschoonover.com/solarized */
[data-theme="dark"][data-variante="solarized"], .pal-solarized {
  --bg: #00212b; --surface: #002b36; --surface-2: #073642; --border: #1c4b57;
  --text: #eee8d5; --text-2: #c2c7c0; --muted: #9eadad; --neutral-bg: #0b3c49;
  --success: #a3b818; --success-bg: #14362c; --warning: #d9a514; --warning-bg: #22352a;
  --danger: #f16e6b;  --danger-bg: #2d2d33;  --info: #2eafa5;    --info-bg: #063a42;
}

/* ═══════════════════════════════════ CLAROS ══════════════════════════════════ */

/* Nieve: blanco puro. Máximo brillo, para oficinas con mucha luz. */
[data-theme="light"][data-claro="nieve"], .pal-nieve {
  --bg: #fafafa; --surface: #ffffff; --surface-2: #f3f4f5; --border: #e4e5e8;
  --text: #0f1115; --text-2: #4a4f57; --muted: #656a72; --neutral-bg: #eeeff1;
}

/* Papel: marfil cálido. El blanco puro de ocho horas cansa; esto se parece a una hoja. */
[data-theme="light"][data-claro="papel"], .pal-papel {
  --bg: #f5f1e8; --surface: #fdfbf6; --surface-2: #efe9dc; --border: #e0d8c6;
  --text: #29241c; --text-2: #564d40; --muted: #6a6052; --neutral-bg: #ebe4d5;
}

/* Niebla: gris azulado, sereno. */
[data-theme="light"][data-claro="niebla"], .pal-niebla {
  --bg: #edf0f4; --surface: #f9fafc; --surface-2: #e5e9ef; --border: #d5dbe4;
  --text: #141922; --text-2: #465061; --muted: #5a6475; --neutral-bg: #e1e6ed;
}

/* Catppuccin Latte */
[data-theme="light"][data-claro="latte"], .pal-latte {
  --bg: #e6e9ef; --surface: #eff1f5; --surface-2: #dce0e8; --border: #ccd0da;
  --text: #4c4f69; --text-2: #4d5068; --muted: #575a72; --neutral-bg: #dce0e8;
  --success: #29701a; --success-bg: #d8e5d6; --warning: #905406; --warning-bg: #eee2d0;
  --danger: #c10d34;  --danger-bg: #eed6dc;  --info: #0f6b8a;    --info-bg: #d5e3ec;
}

/* Rosé Pine Dawn */
[data-theme="light"][data-claro="dawn"], .pal-dawn {
  --bg: #f4ede4; --surface: #fffaf3; --surface-2: #f2e9e1; --border: #dfdad9;
  --text: #575279; --text-2: #58537a; --muted: #625d82; --neutral-bg: #efe7df;
  --success: #286983; --success-bg: #e3ebe8; --warning: #93590d; --warning-bg: #f6e7d2;
  --danger: #994d63;  --danger-bg: #f5e0e2;  --info: #3a717c;    --info-bg: #e2eeee;
}

/* Solarized claro */
[data-theme="light"][data-claro="solarizedclaro"], .pal-solarizedclaro {
  --bg: #f5eedb; --surface: #fdf6e3; --surface-2: #eee8d5; --border: #ddd6c1;
  --text: #073642; --text-2: #34525a; --muted: #4d6269; --neutral-bg: #ebe4d0;
  --success: #5c6a00; --success-bg: #e9e8c8; --warning: #8a5a00; --warning-bg: #f4e3c0;
  --danger: #b8231f;  --danger-bg: #f5dcd2;  --info: #196a97;    --info-bg: #e0e8e0;
}

/* ── Miniatura de la galería (Apariencia) ────────────────────────────────────────
   Una ventanita con la paleta de verdad: fondo, barra lateral, una tarjeta con un número,
   una línea de texto secundario y el botón con el acento. */
.pal-mini { display: grid; grid-template-columns: 22% 1fr; height: 78px; border-radius: 8px;
  overflow: hidden; background: var(--bg); border: 1px solid var(--border); }
.pal-mini-side { background: color-mix(in srgb, var(--surface) 55%, var(--bg));
  border-right: 1px solid var(--border); padding: 8px 5px; display: grid; gap: 5px; align-content: start; }
.pal-mini-side i { display: block; height: 4px; border-radius: 2px; background: var(--muted); opacity: .55; }
.pal-mini-side i:first-child { background: var(--pal-acento, #0d8276); opacity: 1; }
.pal-mini-main { padding: 8px; display: grid; gap: 6px; align-content: start; }
.pal-mini-card { background: var(--surface); border: 1px solid var(--border); border-radius: 5px;
  padding: 6px 7px; display: grid; gap: 4px; }
.pal-mini-card b { display: block; height: 6px; width: 55%; border-radius: 3px; background: var(--text); }
.pal-mini-card s { display: block; height: 4px; width: 80%; border-radius: 2px; background: var(--text-2); opacity: .7; }
.pal-mini-btn { justify-self: start; height: 9px; width: 34px; border-radius: 3px; background: var(--pal-acento, #0d8276); }