/* ============================================================================
 * SeptiGenesis — Modo dia / noche compartido (todas las paginas publicas).
 *
 * El manual de marca no define modo noche: se deriva de su paleta.
 *   Fondos   : azul marino #143E6B llevado a casi negro (#0b1622 / #0f1c2b / #15263a),
 *              los mismos de la ficha SeptiGenesis Pac (septipac.css).
 *   Texto    : neutros frios claros (#e8f1f4 titulos, #c9d3dd cuerpo, #9aa7b6 secundario).
 *   Acento   : turquesa #00A99D como relleno (texto encima #04231f) y #3fd3c5
 *              (turquesa aclarado) como texto/enlace; #7AE8E3 (acento del manual) al pasar.
 * Cada pagina carga este archivo AL FINAL del <head>; el script de arranque (inline,
 * primero del <head>) pone data-theme antes de pintar. Comportamiento: js/theme.js.
 * ==========================================================================*/

:root {
  --sg-bg: #ffffff;
  --sg-surface: #ffffff;
  --sg-surface-2: #f3f8f8;
  --sg-ink: #143e6b;
  --sg-text: #3f4a5c;
  --sg-muted: #5a6374;
  --sg-line: #d9e3e8;
  --sg-accent: #007a71;
  --sg-accent-fill: #00a99d;
  --sg-on-accent: #04231f;
  --sg-shadow: 0 18px 40px -20px rgba(20, 62, 107, 0.45);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --sg-bg: #0b1622;
  --sg-surface: #0f1c2b;
  --sg-surface-2: #15263a;
  --sg-ink: #e8f1f4;
  --sg-text: #c9d3dd;
  --sg-muted: #9aa7b6;
  --sg-line: #22344a;
  --sg-accent: #3fd3c5;
  --sg-accent-fill: #00a99d;
  --sg-on-accent: #04231f;
  --sg-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.8);

  /* Tokens del manual (design-tokens.css) en su version nocturna */
  --primary-teal-light: rgba(0, 169, 157, 0.16);
  --primary-teal-border: rgba(63, 211, 197, 0.38);
  --gcid-secondary-color: #e8f1f4;
  --secondary-dark-blue: #e8f1f4;
  --gcid-heading-color: #e8f1f4;
  --gcid-body-color: #c9d3dd;
  --gcid-link-color: #3fd3c5;
  --heading-color: #e8f1f4;
  --body-text-color: #c9d3dd;
  --link-gray: #9aa7b6;
  --link-hover-gray: #7ae8e3;
  --gcid-primary-text: #3fd3c5;
  --gcid-primary-bg-text: #04231f;
  --bg-white: #0f1c2b;
  --bg-light: #0b1622;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.55);
}

:root[data-theme="dark"] body { background-color: var(--sg-bg); color: var(--sg-text); }

/* ---------- Boton sol / luna ---------- */
.sg-theme {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 36px; height: 36px; padding: 0; border-radius: 999px; cursor: pointer;
  background: var(--primary-teal-light, rgba(0, 169, 157, 0.2));
  border: 1px solid var(--primary-teal-border, rgba(0, 169, 157, 0.4));
  color: var(--sg-ink);
}
.sg-theme:hover { background: var(--sg-accent-fill); border-color: var(--sg-accent-fill); color: var(--sg-on-accent); }
.sg-theme:focus-visible { outline: 3px solid var(--sg-accent); outline-offset: 2px; }
.sg-theme svg { display: block; pointer-events: none; }
.sg-theme-row { display: inline-flex; align-items: center; gap: 8px; }
.sg-theme .sg-theme-sun { display: none; }
:root[data-theme="dark"] .sg-theme .sg-theme-sun { display: block; }
:root[data-theme="dark"] .sg-theme .sg-theme-moon { display: none; }

/* ---------- Logo: variante para fondo oscuro del propio manual (assets/logo_footer.svg) ---------- */
:root[data-theme="dark"] img[data-src-dark="/septigenesis/assets/logo_footer.svg"] { content: url("/septigenesis/assets/logo_footer.svg"); }

/* ---------- Base: encabezados, enlaces, campos ---------- */
:root[data-theme="dark"] header { background-color: var(--sg-surface); border-bottom-color: var(--sg-line); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); }
:root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3,
:root[data-theme="dark"] h4, :root[data-theme="dark"] h5, :root[data-theme="dark"] h6 { color: var(--sg-ink); }
:root[data-theme="dark"] a:hover { color: var(--link-hover-gray); }
:root[data-theme="dark"] input, :root[data-theme="dark"] textarea, :root[data-theme="dark"] select {
  background-color: var(--sg-bg); color: var(--sg-ink); border-color: #34506b;
}
/* placeholder: en dia el gris por defecto (#757575) no llega a 4.5:1 sobre los fondos crema */
input::placeholder, textarea::placeholder { color: var(--sg-muted); opacity: 1; }
:root[data-theme="dark"] input:focus-visible, :root[data-theme="dark"] textarea:focus-visible, :root[data-theme="dark"] select:focus-visible { outline-color: var(--sg-accent); }
:root[data-theme="dark"] input[type="checkbox"], :root[data-theme="dark"] input[type="radio"] { accent-color: var(--sg-accent-fill); }
:root[data-theme="dark"] pre, :root[data-theme="dark"] code { background-color: var(--sg-surface-2); color: var(--sg-ink); }
:root[data-theme="dark"] hr { border-color: var(--sg-line); }
:root[data-theme="dark"] table { color: var(--sg-text); }
:root[data-theme="dark"] th, :root[data-theme="dark"] td { border-color: var(--sg-line); }

/* ---------- Encabezado compacto (header.css) y menu "Mas" ---------- */
:root[data-theme="dark"] header .nav-group-btn { background: transparent; color: var(--sg-text); }
:root[data-theme="dark"] header .nav-group-btn:hover,
:root[data-theme="dark"] header .nav-group-btn[aria-expanded="true"] { background: var(--primary-teal-light); color: var(--sg-accent); }
:root[data-theme="dark"] body header.sg-hdr .sg-more > .nav-group-menu,
:root[data-theme="dark"] header .nav-group-menu { background: var(--sg-surface-2); border-color: var(--sg-line); box-shadow: var(--sg-shadow); }
:root[data-theme="dark"] header .nav-group-menu a { color: var(--sg-text); }
:root[data-theme="dark"] header .nav-group-menu a:hover,
:root[data-theme="dark"] header .nav-group-menu a:focus-visible,
:root[data-theme="dark"] header .nav-group-menu a.active { color: var(--sg-accent); }
:root[data-theme="dark"] body header.sg-hdr .header-nav { background: transparent; }
@media (max-width: 1023.98px) {
  :root[data-theme="dark"] body header.sg-hdr .header-nav { background: var(--sg-surface); border-top-color: var(--sg-line); box-shadow: var(--sg-shadow); }
  :root[data-theme="dark"] body header.sg-hdr .sg-more > .nav-group-menu { background: none; box-shadow: none; }
}
:root[data-theme="dark"] .header-nav.mobile-open { background: var(--sg-surface); border-top-color: var(--sg-line); }
:root[data-theme="dark"] .nav-toggle { color: var(--sg-ink); }

/* ---------- Selector de idioma (site-i18n.js) ---------- */
:root[data-theme="dark"] .lang-btn { background: var(--primary-teal-light); border-color: var(--primary-teal-border); color: var(--sg-ink); }
:root[data-theme="dark"] .lang-btn:hover { background: var(--sg-accent-fill); border-color: var(--sg-accent-fill); color: var(--sg-on-accent); }
:root[data-theme="dark"] .lang-menu { background: var(--sg-surface-2); border-color: var(--sg-line); box-shadow: var(--sg-shadow); }
:root[data-theme="dark"] .lang-item { color: var(--sg-ink); }
:root[data-theme="dark"] .lang-item:hover, :root[data-theme="dark"] .lang-item.active { background: rgba(0, 169, 157, 0.2); }
:root[data-theme="dark"] .lang-item .check, :root[data-theme="dark"] .lang-item .lang-code { color: var(--sg-accent); }

/* ---------- Botones de marca (components.css) ---------- */
:root[data-theme="dark"] .btn-primary-cta,
:root[data-theme="dark"] .badge { background: var(--sg-accent-fill); color: var(--sg-on-accent); border-color: var(--sg-accent-fill); }
:root[data-theme="dark"] .btn-primary-cta:hover,
:root[data-theme="dark"] .badge:hover { background: #7ae8e3; color: var(--sg-on-accent); }

/* ---------- Superficies navy / teal oscuro con texto blanco ----------
 * En noche --gcid-secondary-color y --gcid-primary-text pasan a ser TINTA clara;
 * donde el manual los usa como FONDO de chips y botones, el fondo vuelve al color
 * de marca (navy #143e6b: 11:1 con blanco; teal #007a71: 5.2:1 con blanco). */
:root[data-theme="dark"] .btn-primary-cta:hover,
:root[data-theme="dark"] .sg-badge-rep,
:root[data-theme="dark"] .sg-sect-steps li::before,
:root[data-theme="dark"] .tooltip,
:root[data-theme="dark"] .skip-link:focus { background-color: #143e6b; border-color: #143e6b; color: #fff; }
:root[data-theme="dark"] .dictate-btn.listening { background: #007a71; border-color: #007a71; color: #fff; }

/* ---------- design-tokens.css raiz (lo importa feedback.css) ---------- */
:root[data-theme="dark"] {
  --color-surface: #0b1622;
  --color-surface-2: #15263a;
  --color-border: #22344a;
  --color-border-subtle: #1c2c3e;
  --color-text-primary: #e8f1f4;
  --color-text-secondary: #c9d3dd;
  --color-text-muted: #9aa7b6;
}

/* ---------- Componentes compartidos ---------- */
:root[data-theme="dark"] .sg-card,
:root[data-theme="dark"] .card { background: var(--sg-surface); border-color: var(--sg-line); }
:root[data-theme="dark"] .dictate-btn { background: var(--sg-surface-2); border-color: var(--sg-line); color: var(--sg-accent); }
:root[data-theme="dark"] .footer-logo img { background: transparent; box-shadow: none; padding-inline: 0; }

/* ---------- Pie ---------- */
:root[data-theme="dark"] footer { background-color: #07101a; color: var(--sg-text); border-top-color: var(--sg-line); }

@media (prefers-reduced-motion: reduce) {
  .sg-theme { transition: none; }
}