/* ===========================================================================
   Net Tinker — la carcasa del sitio sobre las páginas generadas
   ===========================================================================

   Se carga DESPUÉS de `docs-base.css` / `privacy-base.css`, que son el <style>
   que la ayuda y la política llevan dentro cuando viven en la extensión. Esta
   hoja no lo sustituye: le añade las dos cosas que dentro de la extensión no
   hacen falta y en la web sí.

     1. **Modo oscuro.** La ayuda interna se abre en una pestaña del navegador y
        está escrita en claro y a pelo; en la web, junto a una landing que sigue
        `prefers-color-scheme`, una página que se queda en blanco cuando todo lo
        demás es oscuro canta. Se redefinen los colores con las variables de
        `src/options/options.css`, que son los del producto.
     2. **La navegación.** El sitio publicado hoy tiene un solo enlace saliente
        en toda la portada —el cambio de idioma—: ni tienda, ni privacidad, ni
        vuelta atrás. La barra y el pie que inyecta `scripts/gen-site.mjs` se
        pintan aquí.

   No se toca ni una regla de la hoja base: si algún día la ayuda cambia de
   maquetación, esto sigue valiendo.
   =========================================================================== */

:root {
  --bg: #ffffff;
  --surface: #f6f7fb;
  --border: #e3e5ea;
  --text: #1a1d29;
  --text-muted: #4a4f60;
  --primary: #4a63e7;
  --primary-hover: #3a50cc;
  --primary-text: #ffffff;
  --radius-sm: 6px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14151c;
    --surface: #1c1e29;
    --border: #2c2f3d;
    --text: #e7e8ef;
    --text-muted: #9498a8;
    --primary: #6c81f2;
    --primary-hover: #839afc;
    --primary-text: #0e0f16;
  }
}

body {
  color: var(--text);
  background: var(--bg);
}

a {
  color: var(--primary);
}

a:hover {
  color: var(--primary-hover);
}

h2 {
  border-bottom-color: var(--border);
}

code {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

th,
td {
  border-color: var(--border);
}

th {
  background: var(--surface);
}

.toc {
  background: var(--surface);
  border-color: var(--border);
}

.example {
  background: var(--surface);
  border-left-color: var(--primary);
}

.lede,
.updated {
  color: var(--text-muted);
}

/* ---- la barra que inyecta el generador ---- */

.site-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 28px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

.site-nav-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}

.site-nav-brand img {
  display: block;
}

.site-nav-links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.site-nav-cta {
  background: var(--primary);
  color: var(--primary-text);
  border-radius: var(--radius-sm);
  padding: 5px 12px;
  font-weight: 600;
  text-decoration: none;
}

.site-nav-cta:hover {
  background: var(--primary-hover);
  color: var(--primary-text);
}

/* ---- y el pie ---- */

.site-foot {
  margin-top: 48px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-muted);
}

.site-foot p {
  margin: 0 0 6px;
}

.site-foot p:last-child {
  margin-bottom: 0;
}