/* niell-site styles — Slice F (B-full) cerrado.
   Zero deps externas runtime: Tailwind CDN dropped. Todas las clases
   son semánticas (.layout, .sidebar, .sidebar-link, .content, etc.) +
   element selectors dentro de .content para markdown body.
   Tokens en :root + dark mode auto via prefers-color-scheme.
   Toggle UI dark/light queda para Slice G. */

:root {
  --color-bg: #faf9f6;            /* warm white */
  --color-bg-elevated: #ece8dc;   /* sidebar summary, code blocks — ~6% más oscuro que bg */
  --color-fg: #222227;            /* slate text primary */
  --color-fg-muted: #5a5a5a;      /* secondary text */
  --color-fg-subtle: #8a8a87;     /* badges, footer */
  --color-accent: #1c7b97;        /* petrol brillante */
  --color-accent-hover: #155f78;
  --color-border: #e5e1d8;
}

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

/* ----- Sidebar collapse en mobile (<details> + summary) -----
   Mobile: summary "Menú" visible, clic colapsa/expande.
   Desktop: summary hidden via @media, nav siempre abierto forzado por
   el <script> al final del body (sets details.open = true). */
details.sidebar-collapse > summary {
  cursor: pointer;
  padding: 0.5rem 0.75rem;
  background-color: var(--color-bg-elevated);
  border-radius: 4px;
  font-weight: 600;
  list-style: none;
  user-select: none;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
details.sidebar-collapse > summary::-webkit-details-marker { display: none; }
details.sidebar-collapse > summary::before {
  content: "☰";
  font-size: 1.1em;
  line-height: 1;
}
details.sidebar-collapse[open] > summary::before { content: "✕"; }

@media (min-width: 768px) {
  details.sidebar-collapse > summary { display: none; }
}

/* ----- Dark mode (Slice G2: toggle UI + persistence).
   Tres caminos para activar dark:
   1. `@media (prefers-color-scheme: dark)` — primera visita, sigue OS.
   2. `[data-theme="dark"]` — forzado por user via toggle, persist en localStorage.
   3. `[data-theme="light"]` — forzado por user a light, sobreescribe OS dark.
   El JS inline en <head> aplica data-theme desde localStorage antes del render
   (FOUC-free). El toggle al final del sidebar swappea entre light/dark y persiste. */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #1a1815;
    --color-bg-elevated: #26231e;
    --color-fg: #e8e6e1;
    --color-fg-muted: #a8a59f;
    --color-fg-subtle: #7a7770;
    --color-accent: #3aa3c4;
    --color-accent-hover: #5bb9d6;
    --color-border: #3a3631;
  }
}
[data-theme="dark"] {
  --color-bg: #1a1815;
  --color-bg-elevated: #26231e;
  --color-fg: #e8e6e1;
  --color-fg-muted: #a8a59f;
  --color-fg-subtle: #7a7770;
  --color-accent: #3aa3c4;
  --color-accent-hover: #5bb9d6;
  --color-border: #3a3631;
}
[data-theme="light"] {
  --color-bg: #faf9f6;
  --color-bg-elevated: #ece8dc;
  --color-fg: #222227;
  --color-fg-muted: #5a5a5a;
  --color-fg-subtle: #8a8a87;
  --color-accent: #1c7b97;
  --color-accent-hover: #155f78;
  --color-border: #e5e1d8;
}

/* Theme toggle button — Slice G2: solo icon ☾/☀ (JS swap según estado).
   Sits arriba del lang switcher en el sidebar (top de controles globales). */
.theme-toggle {
  background: none;
  border: none;
  color: var(--color-fg-muted);
  cursor: pointer;
  font-size: 1.1rem;
  padding: 0.25rem 0;
  line-height: 1;
  margin-bottom: 0.75rem;
  font-family: inherit;
  text-align: left;       /* override UA default `center` para alinear con switcher */
}
.theme-toggle:hover {
  color: var(--color-fg);
}

/* ============================================================
   LAYOUT + SIDEBAR + CONTENT (semantic classes)
   Estas son las únicas reglas que dan estilo al sitio post-Slice F.
   Niell emite class names semánticos en cada nodo HTML; styles
   markdown body via element selectors dentro de .content.
   ============================================================ */

/* ----- Layout root: <body class="layout"> ----- */
.layout {
  max-width: 80rem;
  margin: 0 auto;
  padding: 2rem 1rem;
  color: var(--color-fg);
}
@media (min-width: 768px) {
  .layout {
    display: flex;
    gap: 2rem;
  }
}

/* ----- Sidebar: <aside class="sidebar"> + <nav class="sidebar-nav"> ----- */
.sidebar {
  width: 100%;
  margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
  .sidebar {
    width: 16rem;
    flex-shrink: 0;
    margin-bottom: 0;
  }
}
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .sidebar-nav {
    position: sticky;
    top: 2rem;
  }
}

/* ----- Sidebar sections + links ----- */
.sidebar-section { /* container per section (Inicio, Spec, etc.) */ }
.sidebar-heading,
.toc-heading {
  font-size: 1.0625rem;       /* 17px — bump sobre body (16px) para distinguir
                                 visualmente de la is-current de los links (14px). */
  font-weight: 600;
  color: var(--color-fg);
  margin-bottom: 0.5rem;
}
.sidebar-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.875rem;
}
.sidebar-link {
  color: var(--color-fg-muted);
  text-decoration: none;
}
.sidebar-link:hover {
  color: var(--color-fg);
  text-decoration: underline;
}
.sidebar-link.is-current {
  color: var(--color-fg);
  font-weight: 600;
}

/* ----- Lang switcher ----- */
.lang-switcher {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
}
.lang-switcher a {
  font-size: 0.875rem;
  color: var(--color-accent);
  text-decoration: none;
}
.lang-switcher a:hover {
  text-decoration: underline;
  color: var(--color-accent-hover);
}
.lang-suffix {
  font-size: 0.75rem;
  color: var(--color-fg-subtle);
}

/* ----- TOC dentro del sidebar (.toc-heading consolidado arriba con .sidebar-heading) ----- */
.toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
}
.toc-item { margin: 0.25rem 0; }
.toc-item.is-nested { padding-left: 1rem; }
.toc-link {
  color: var(--color-accent);
  text-decoration: none;
}
.toc-link:hover { text-decoration: underline; }

/* ----- Footer ----- */
.footer {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.875rem;
  color: var(--color-fg-muted);
}
.footer a {
  color: var(--color-accent);
  text-decoration: none;
}
.footer a:hover {
  text-decoration: underline;
  color: var(--color-accent-hover);
}

/* ----- Content: <main class="content"> + markdown body via element selectors -----
   Reglas via element selectors dentro de .content para que markdown.niell
   emita <h1>, <p>, <code>, etc. sin atributos class. */
.content {
  flex: 1 1 0%;
  min-width: 0;
}

/* Headings — Slice G1: monospace para identidad "code-native".
   Mismo stack que .content code: headings se leen como código, refuerza
   la tesis "código que se lee como prosa". Sidebar headings se quedan
   sans-serif (utilitario, escaneable). */
.content h1,
.content h2,
.content h3 {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.content h1 {
  font-size: 2.25rem;
  font-weight: 700;
  margin: 2rem 0 1rem;
  line-height: 1.2;
}
.content h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 1.5rem 0 0.75rem;
  line-height: 1.3;
}
.content h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 1.25rem 0 0.5rem;
  line-height: 1.4;
}

/* Inline */
.content p {
  margin: 0.75rem 0;
  line-height: 1.625;
}
.content a {
  color: var(--color-accent);
  text-decoration: none;
}
.content a:hover {
  text-decoration: underline;
  color: var(--color-accent-hover);
}
.content strong { font-weight: 600; }
.content em { font-style: italic; }

/* Code (inline + block) */
.content code {
  background-color: var(--color-bg-elevated);
  padding: 0 0.25rem;
  border-radius: 0.25rem;
  font-size: 0.875em;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.content pre {
  background-color: var(--color-bg-elevated);
  padding: 1rem;
  border-radius: 0.25rem;
  margin: 1rem 0;
  overflow-x: auto;
  font-size: 0.875rem;
  /* Scroll shadows: sombras solo cuando hay overflow real (Lea Verou). */
  background-image:
    linear-gradient(to right, var(--color-bg-elevated), transparent 24px),
    linear-gradient(to left, var(--color-bg-elevated), transparent 24px),
    linear-gradient(to right, rgba(0,0,0,0.12), transparent 14px),
    linear-gradient(to left, rgba(0,0,0,0.12), transparent 14px);
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 24px 100%, 24px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
.content pre code {
  background: none;
  padding: 0;
  font-size: inherit;
  border-radius: 0;
}

/* Lists */
.content ul {
  list-style: disc;
  padding-left: 1.5rem;
  margin: 0.75rem 0;
}
.content ol {
  list-style: decimal;
  padding-left: 1.5rem;
  margin: 0.75rem 0;
}
.content li { margin: 0.25rem 0; }

/* Blockquote — Slice G1: serif italic para tercera voz tipográfica
   (sans body / mono headings / serif italic asides). */
.content blockquote {
  border-left: 4px solid var(--color-border);
  padding-left: 1rem;
  margin: 1rem 0;
  color: var(--color-fg-muted);
  font-family: Cambria, "Hoefler Text", "Iowan Old Style", Georgia, serif;
  font-style: italic;
}

/* Tables */
.content table {
  margin: 1rem 0;
  border-collapse: collapse;
  width: 100%;
  font-size: 0.875rem;
}
.content th {
  padding: 0.5rem 0.75rem;
  text-align: left;
  font-weight: 600;
  border-bottom: 1px solid var(--color-border);
}
.content td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
}

/* First child sin top margin (mantiene alignment fix de B-lite, ahora
   scoped explícitamente al content semántico). */
.content > *:first-child { margin-top: 0; }

/* Mobile-only: padding lateral más chico, code más pequeño */
@media (max-width: 640px) {
  .layout { padding-left: 0.75rem; padding-right: 0.75rem; }
  .content pre { font-size: 0.8rem; }
}
