/* ============================================================
   JobIn — Tokens del diseño «Aurora» (28/10/2026)
   Conserva los nombres de las variables de la interfaz original (--ink, --paper, --white, --soft, --blue,
   --blue-soft, --acid, --muted, --line) y añade las que necesitan el modo oscuro y la portada.
   Claro en :root; oscuro en :root[data-theme="dark"] (lo fija jobin-tema.js) y, sin JS, por el sistema.
   Paleta en uso (28/10/2026): «Verde y lima» (index.html lleva <html data-paleta="verde">). Sin atributo queda la
   original de JobIn (azul + lima); otras parejas: html[data-paleta="…"].
============================================================ */
:root {
  color-scheme: light;
  /* Marca */
  --blue: #315cff; --blue-hover: #2449d6; --blue-soft: #eef2ff; --p1-rgb: 49, 92, 255; --p1-light: #8da4ff;
  --acid: #d6ff3f; --acid-soft: #f3ffd0; --p2: #d6ff3f; --p2-rgb: 214, 255, 63;
  --btn-ink: #ffffff; --btn-shadow: 5px 5px 0 var(--acid); --btn-shadow-md: 4px 4px 0 var(--acid); --btn-shadow-sm: 3px 3px 0 var(--acid);
  --on-acid: #141414;   /* tinta sobre lima: la lima es clara en los dos temas */
  /* Superficies y texto (interfaz original) */
  /* Fondo con tono (29/10/2026): el interior en claro era todo blanco; ahora el fondo lleva un verde grisáceo muy
     claro y las tarjetas (--white) destacan sobre él, como ocurre en oscuro. La portada conserva su blanco. */
  --ink: #141414; --ink-bg: #141414; --paper: #eff4f0; --white: #ffffff; --soft: #f0f4f1;
  --muted: #6b7280; --muted-strong: #374151; --line: #e5e7eb;
  /* Portada y Quiénes somos */
  --bg: #f5f7fb; --text: #0b1020; --glass: rgba(255, 255, 255, .5); --glass-line: rgba(255, 255, 255, .75);
  --glass-blur: 18px; --scrim: rgba(245, 247, 251, .6);
  --num-from: #0b1020; --num-to: var(--blue); --titular-2: var(--blue);
  /* Degradado de las dos palabras del titular de la portada (maqueta Aurora) */
  --g1: var(--blue); --g2: var(--blue); --g3: var(--blue);
  --map-fill: #eceff3; --map-fill-scope: #dde2e9; --map-stroke: #ffffff;
  /* Semánticos (29/10/2026): avisos, resaltados y líneas que antes iban escritos a mano en index.html.
     En claro, los mismos valores de siempre; en oscuro, sus equivalentes. */
  --label: #555; --hover-fill: #eceef2; --line-strong: #aaa; --surface-2: #fafbfc; --dot: #e2e6ec; --faint: #94a3b8;
  --track: #dfe6ff; --line-soft: #e8ecfb; --line-blue: #dbe3ff; --line-faint: #f1f1f1;
  --danger: #b42318; --danger-ink: #c0392b; --danger-btn: #d92d20; --danger-soft: #fdeceb; --danger-line: #f7d9d6;
  --warn: #8a5a00; --warn-soft: #fff7e6; --warn-line: #f0dcb4; --warn-soft-2: #fdf3e3; --warn-ink-2: #8a6d1f;
  --hl: #fff8d6; --hl-hover: #fdf3b8; --hl-focus: #e0e7ff; --hl-ink: #0f172a;
  --map-label: #334155; --map-halo: #ffffff;
  --ok: #137a3a; --ok-soft: #e8f7ee; --ok-line: #bbf7d0; --line-mid: #d1d5db;
  /* Tipo */
  --font: Manrope, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Movimiento */
  --ease: cubic-bezier(.2, .8, .2, 1); --dur: 220ms; --dur-fast: 150ms;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --blue: #315cff; --blue-hover: #4f7bff; --blue-soft: rgba(49, 92, 255, .2);
  --acid-soft: rgba(214, 255, 63, .14);
  --btn-shadow: none; --btn-shadow-md: none; --btn-shadow-sm: none; --on-acid: #141414;
  /* Interior (29/10/2026): grafito con fondo verde en vez de negro azulado; las superficies se separan del fondo. */
  --ink: #eef2ef; --ink-bg: #26302b; --paper: #0e1412; --white: #151c19; --soft: #1b2420;
  --muted: #98a59e; --muted-strong: #cfd8d2; --line: rgba(255, 255, 255, .09);
  --bg: #0e1412; --text: #eef2ef; --glass: rgba(255, 255, 255, .05); --glass-line: rgba(255, 255, 255, .1);
  --glass-blur: 16px; --scrim: rgba(8, 12, 10, .62);
  --num-from: #eef2ef; --num-to: #8da4ff; --titular-2: var(--acid); --g1: var(--acid); --g2: var(--acid); --g3: var(--acid);
  --map-fill: #1a221e; --map-fill-scope: #243029; --map-stroke: #0e1412;
  --label: var(--muted); --hover-fill: #243029; --line-strong: rgba(255, 255, 255, .28); --surface-2: #121917; --dot: rgba(255, 255, 255, .14); --faint: #6f7f77;
  --track: rgba(255, 255, 255, .1); --line-soft: var(--line); --line-blue: var(--line); --line-faint: var(--line);
  --danger: #ff8f85; --danger-ink: #ff9d94; --danger-btn: #d94a3f; --danger-soft: rgba(255, 120, 110, .14); --danger-line: rgba(255, 120, 110, .26);
  --warn: #ffd27d; --warn-soft: rgba(255, 190, 90, .14); --warn-line: rgba(255, 190, 90, .3); --warn-soft-2: rgba(255, 190, 90, .14); --warn-ink-2: #ffd27d;
  --hl: rgba(214, 255, 63, .14); --hl-hover: rgba(214, 255, 63, .22); --hl-focus: rgba(var(--p1-rgb), .2); --hl-ink: var(--ink);
  --map-label: #dfe6e1; --map-halo: var(--paper);
  --ok: #7ddba3; --ok-soft: rgba(26, 127, 69, .18); --ok-line: rgba(26, 127, 69, .4); --line-mid: rgba(255, 255, 255, .2);
}
/* La portada conserva su blanco en claro (el fondo con tono es solo del interior). */
#landing { --paper: #ffffff; --soft: #f6f7fa; }
/* La portada conserva su negro (aprobado por el usuario): dentro de #landing vuelven los valores anteriores. */
:root[data-theme="dark"] #landing { --paper: #04050a; --bg: #04050a; --white: #0b0e18; --soft: #0f1220; --ink: #ffffff; --text: #ffffff; --ink-bg: #1d2130; --muted: #9aa6bd; --muted-strong: #d8deea; --line: rgba(255, 255, 255, .12); --scrim: rgba(4, 5, 10, .6); --num-from: #ffffff; --glass: rgba(255, 255, 255, .05); --glass-line: rgba(255, 255, 255, .1); }
/* Respaldo sin JavaScript: el sistema decide. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --blue: #315cff; --blue-hover: #4f7bff; --blue-soft: rgba(49, 92, 255, .2);
    --acid-soft: rgba(214, 255, 63, .14);
    --btn-shadow: none; --btn-shadow-md: none; --btn-shadow-sm: none; --on-acid: #141414;
    /* Interior (29/10/2026): grafito con fondo verde en vez de negro azulado; las superficies se separan del fondo. */
    --ink: #eef2ef; --ink-bg: #26302b; --paper: #0e1412; --white: #151c19; --soft: #1b2420;
    --muted: #98a59e; --muted-strong: #cfd8d2; --line: rgba(255, 255, 255, .09);
    --bg: #0e1412; --text: #eef2ef; --glass: rgba(255, 255, 255, .05); --glass-line: rgba(255, 255, 255, .1);
    --glass-blur: 16px; --scrim: rgba(8, 12, 10, .62);
    --num-from: #eef2ef; --num-to: #8da4ff; --titular-2: var(--acid); --g1: var(--acid); --g2: var(--acid); --g3: var(--acid);
    --map-fill: #1a221e; --map-fill-scope: #243029; --map-stroke: #0e1412;
    --label: var(--muted); --hover-fill: #243029; --line-strong: rgba(255, 255, 255, .28); --surface-2: #121917; --dot: rgba(255, 255, 255, .14); --faint: #6f7f77;
    --track: rgba(255, 255, 255, .1); --line-soft: var(--line); --line-blue: var(--line); --line-faint: var(--line);
    --danger: #ff8f85; --danger-ink: #ff9d94; --danger-btn: #d94a3f; --danger-soft: rgba(255, 120, 110, .14); --danger-line: rgba(255, 120, 110, .26);
    --warn: #ffd27d; --warn-soft: rgba(255, 190, 90, .14); --warn-line: rgba(255, 190, 90, .3); --warn-soft-2: rgba(255, 190, 90, .14); --warn-ink-2: #ffd27d;
    --hl: rgba(214, 255, 63, .14); --hl-hover: rgba(214, 255, 63, .22); --hl-focus: rgba(var(--p1-rgb), .2); --hl-ink: var(--ink);
    --map-label: #dfe6e1; --map-halo: var(--paper);
    --ok: #7ddba3; --ok-soft: rgba(26, 127, 69, .18); --ok-line: rgba(26, 127, 69, .4); --line-mid: rgba(255, 255, 255, .2);
  }
  :root:not([data-theme="light"]) #landing { --paper: #04050a; --bg: #04050a; --white: #0b0e18; --soft: #0f1220; --ink: #ffffff; --text: #ffffff; --ink-bg: #1d2130; --muted: #9aa6bd; --muted-strong: #d8deea; --line: rgba(255, 255, 255, .12); --scrim: rgba(4, 5, 10, .6); --num-from: #ffffff; --glass: rgba(255, 255, 255, .05); --glass-line: rgba(255, 255, 255, .1); }
}
/* Otras parejas de color (maqueta «Aurora»): se activan con <html data-paleta="…"> */
html[data-paleta="cian"] { --blue: #2b5cff; --blue-hover: #1b47d6; --p1-rgb: 43, 92, 255; --acid: #22d3ee; --acid-soft: #d9f8fd; --p2: #22d3ee; --p2-rgb: 34, 211, 238; --btn-shadow: none; }
html[data-paleta="coral"] { --acid: #ff6a4d; --acid-soft: #ffe3dc; --p2: #ff6a4d; --p2-rgb: 255, 106, 77; --btn-shadow: none; }
html[data-paleta="verde"] { --blue: #0f9f6e; --blue-hover: #0b6b4a; --blue-soft: #e3f7ee; --p1-rgb: 15, 159, 110; --p1-light: #5fd7a8; --g1: #0b6b4a; --g2: #0f9f6e; --g3: #6f9a00; }
html[data-paleta="ambar"] { --blue: #4f7bff; --blue-hover: #2f5bd6; --p1-rgb: 79, 123, 255; --acid: #ffb020; --acid-soft: #fff1d6; --p2: #ffb020; --p2-rgb: 255, 176, 32; --btn-shadow: none; }
html[data-paleta="cian"][data-theme="dark"], html[data-paleta="coral"][data-theme="dark"], html[data-paleta="ambar"][data-theme="dark"] { --acid-soft: rgba(var(--p2-rgb), .16); --blue-soft: rgba(var(--p1-rgb), .2); }
/* El oscuro de :root fija --blue con más especificidad que html[data-paleta]: el verde se repite aquí. */
html[data-paleta="verde"][data-theme="dark"] { --blue: #18ad7a; --blue-hover: #22c48a; --blue-soft: rgba(24, 173, 122, .16); --num-to: #5fd7a8; --g1: #ffffff; --g2: #5fd7a8; --g3: #d6ff3f; }
@media (prefers-color-scheme: dark) {
  html[data-paleta="verde"]:not([data-theme="light"]) { --blue: #18ad7a; --blue-hover: #22c48a; --blue-soft: rgba(24, 173, 122, .16); --num-to: #5fd7a8; --g1: #ffffff; --g2: #5fd7a8; --g3: #d6ff3f; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; --dur-fast: 0ms; }
}