/* ═══════════════════════════════════════════════════════════════════
   chrome.css · andamiaje del sitio para el sistema nacholledo
   Barra + breadcrumb, portada de rama, pie, conmutadores y lectura.
   Todo derivado de las variables --nl-* (respeta discreta/vibrante y
   claro/oscuro). Prefijo nl- para no chocar con el contenido.
   ═══════════════════════════════════════════════════════════════════ */

/* ── BARRA SUPERIOR + BREADCRUMB ── */
.nl-topnav{position:sticky;top:0;z-index:500;
  background:color-mix(in srgb,var(--nl-bg) 88%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--nl-line);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:0 20px;min-height:52px;font-family:var(--nl-body)}
.nl-crumb{display:flex;align-items:center;gap:.45rem;font-size:.8rem;
  color:var(--nl-muted);overflow:hidden;min-width:0}
.nl-crumb a{color:var(--nl-muted);text-decoration:none;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;transition:color .15s}
.nl-crumb a:hover{color:var(--nl-ink)}
.nl-crumb .home{display:inline-flex;align-items:center;gap:.35rem;flex:none}
.nl-crumb .sep{opacity:.5;flex:none}
.nl-topnav-right{display:flex;align-items:center;gap:.4rem;flex:none}

/* ── ANTERIOR / SIGUIENTE (solo páginas de contenido) ── */
.nl-nav-btn{font-family:var(--nl-body);font-weight:600;font-size:.7rem;
  letter-spacing:.05em;text-transform:uppercase;color:var(--nl-muted);
  text-decoration:none;padding:6px 12px;border:1px solid var(--nl-line);
  border-radius:8px;white-space:nowrap;transition:color .15s,background .15s,border-color .15s}
.nl-nav-btn:hover{color:var(--nl-ink);background:var(--nl-surface-2)}
[data-tema="vibrante"] .nl-nav-btn{border-radius:100px}

/* ── CONMUTADORES (tema y modo) ── */
.nl-switch{display:inline-flex;align-items:center;gap:6px;
  font-family:var(--nl-body);font-weight:600;font-size:.72rem;letter-spacing:.03em;
  color:var(--nl-muted);cursor:pointer;padding:6px 12px;
  border:1px solid var(--nl-line);border-radius:8px;background:var(--nl-surface);
  transition:color .15s,border-color .15s;line-height:1}
.nl-switch:hover{color:var(--nl-ink);
  border-color:color-mix(in srgb,var(--nl-accent) 45%,var(--nl-line))}
.nl-switch .ic{font-weight:700;font-size:.82rem}
[data-tema="vibrante"] .nl-switch{border-radius:100px}

/* ── PORTADA DE RAMA: HERO ── */
.nl-fhero{text-align:center;padding:clamp(2.5rem,6vw,4rem) 20px clamp(1.4rem,4vw,2.4rem)}
.nl-fhero-label{font-family:var(--nl-body);font-weight:600;font-size:.7rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--nl-accent-strong);margin-bottom:.8rem}
.nl-fhero h1{font-family:var(--nl-display);font-weight:800;letter-spacing:-.025em;
  line-height:1.05;font-size:clamp(2rem,5vw,3rem);color:var(--nl-ink);margin:0 0 .6rem}
.nl-fhero-sub{color:var(--nl-muted);max-width:56ch;margin:0 auto;font-size:1.02rem}

/* ── PORTADA DE RAMA: REJILLA DE TARJETAS ── */
.nl-fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:1rem;padding:1.5rem 0 3rem}
.nl-fcard{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.nl-fcard h3{font-family:var(--nl-display);font-weight:700;font-size:1.05rem;color:var(--nl-ink);margin:0 0 .5rem;line-height:1.3}
.nl-fcard p{font-size:.9rem;color:var(--nl-muted);margin:0;flex:1;line-height:1.6}
.nl-fcard .go{margin-top:1.1rem;font-family:var(--nl-body);font-weight:600;font-size:.7rem;
  letter-spacing:.07em;text-transform:uppercase;color:var(--nl-accent-strong);opacity:0;transition:opacity .2s}
.nl-fcard:hover .go{opacity:1}

/* ── PIE ── */
.nl-footer{border-top:1px solid var(--nl-line);background:var(--nl-surface);text-align:center;padding:2.5rem 20px;margin-top:2rem}
.nl-footer .brand-link{display:inline-block;text-decoration:none;margin-bottom:.65rem}
.nl-footer .nl-logo{height:22px;width:auto;color:var(--nl-logo)}
.nl-footer .nl-logo path{fill:currentColor}
.nl-footer .nl-brand{height:22px;width:auto;display:none;margin:0 auto}
[data-theme="dark"]  .nl-footer .nl-brand-dark{display:inline-block}
[data-theme="light"] .nl-footer .nl-brand-light{display:inline-block}
.nl-footer .tag{font-family:var(--nl-body);font-size:.78rem;letter-spacing:.04em;color:var(--nl-muted)}

/* ── CONTENIDO DE LECTURA · .nl-doc ── */
.nl-doc{max-width:800px;margin:0 auto;padding:2.5rem 20px 3.5rem}
.nl-doc h1{font-family:var(--nl-display);font-weight:800;letter-spacing:-.025em;line-height:1.05;
  font-size:clamp(2rem,5vw,2.8rem);color:var(--nl-ink);margin:0 0 1rem}
.nl-doc h2{font-family:var(--nl-display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.4rem,3vw,1.9rem);color:var(--nl-ink);margin:2.2rem 0 .8rem}
.nl-doc h3{font-family:var(--nl-display);font-weight:700;font-size:1.15rem;color:var(--nl-ink);margin:1.6rem 0 .5rem}
.nl-doc p{color:var(--nl-muted);margin:0 0 1rem;font-size:1rem;line-height:1.7}
.nl-doc a{color:var(--nl-accent-strong);text-decoration:underline;text-underline-offset:2px}
.nl-doc ul,.nl-doc ol{color:var(--nl-muted);margin:0 0 1rem 1.2rem;line-height:1.7}
.nl-doc li{margin:.3rem 0}
.nl-doc strong{color:var(--nl-ink);font-weight:600}
.nl-doc code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;
  background:var(--nl-surface-2);border:1px solid var(--nl-line);border-radius:6px;padding:1px 6px}
.nl-doc .lead{font-size:1.12rem;color:var(--nl-ink);margin-bottom:1.4rem}

/* ── ÍNDICE (index.html de cada carpeta) ──
   Vive dentro de .nl-wrap (que ya da ancho y márgenes laterales);
   estas secciones solo aportan ritmo vertical. Tarjetas = .nl-card. */
.nl-idx-head{padding:2.5rem 0 0}
.nl-idx-head h1{font-family:var(--nl-display);font-weight:800;letter-spacing:-.025em;
  line-height:1.05;font-size:clamp(2rem,5vw,2.8rem);color:var(--nl-ink);margin:0 0 .5rem}
.nl-idx-head .lead{color:var(--nl-muted);font-size:1.05rem;margin:0}

.nl-idx-tools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:1.6rem 0 .4rem}
.nl-idx-buscar{flex:1;min-width:220px;font-family:var(--nl-body);font-size:.95rem;
  color:var(--nl-ink);background:var(--nl-surface);border:1px solid var(--nl-line);
  border-radius:10px;padding:10px 14px;transition:border-color .15s}
.nl-idx-buscar:focus{outline:none;border-color:var(--nl-accent)}
.nl-idx-buscar::placeholder{color:var(--nl-muted)}
.nl-idx-chips{display:flex;flex-wrap:wrap;gap:8px}
.nl-chip{font-family:var(--nl-body);font-weight:600;font-size:.78rem;color:var(--nl-muted);
  background:var(--nl-surface-2);border:1px solid var(--nl-line);border-radius:100px;
  padding:6px 13px;cursor:pointer;transition:color .15s,background .15s,border-color .15s}
.nl-chip:hover{color:var(--nl-ink);border-color:var(--nl-muted)}
.nl-chip.is-on{background:var(--nl-accent);color:var(--nl-on-accent);border-color:var(--nl-accent)}

.nl-idx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:1rem;padding:1rem 0 3rem}
.nl-idx-card{display:flex;flex-direction:column;gap:.5rem}
.nl-idx-card[hidden]{display:none}                     /* gana a display:flex */
.nl-idx-card--area{text-decoration:none}
.nl-idx-kind{font-family:var(--nl-body);font-weight:600;font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--nl-accent-strong)}
.nl-idx-card h3{font-family:var(--nl-display);font-weight:700;font-size:1.12rem;margin:0;color:var(--nl-ink)}
.nl-idx-card--area p{color:var(--nl-muted);font-size:.85rem;margin:0}
.nl-idx-main{text-decoration:none}
.nl-idx-main h3{transition:color .15s}
.nl-idx-card--pieza:hover .nl-idx-main h3{color:var(--nl-accent-strong)}
.nl-idx-card--pieza p{color:var(--nl-muted);font-size:.9rem;line-height:1.55;margin:0;flex:1}
.nl-idx-tags{display:flex;flex-wrap:wrap;gap:6px}
.nl-idx-alt{align-self:flex-start;font-family:var(--nl-body);font-weight:600;font-size:.75rem;
  color:var(--nl-muted);text-decoration:none;border-bottom:1px dashed var(--nl-line);
  padding-bottom:1px;transition:color .15s,border-color .15s}
.nl-idx-alt:hover{color:var(--nl-accent-strong);border-color:var(--nl-accent)}
.nl-idx-vacio{color:var(--nl-muted);padding:0 0 3rem}

/* vibrante: título del índice con degradado, como las portadas */
[data-tema="vibrante"] .nl-idx-head h1{
  background:linear-gradient(120deg,var(--nl-c-amber),var(--nl-c-magenta) 60%,var(--nl-c-violet));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* ── RESPONSIVE ── */
@media (max-width:600px){
  .nl-topnav{padding:0 14px;gap:.5rem}
  .nl-crumb{font-size:.76rem}
  .nl-nav-btn{display:none}
  .nl-switch{padding:8px 10px;gap:0}
  .nl-switch .txt{display:none}
  .nl-wrap{padding:0 18px}
}

/* ═══════════════════════════════════════════════════════════════════
   COLOR VIBRANTE · solo [data-tema="vibrante"]
   Sube el colorido sin tocar el tema discreta (que es sobrio a propósito).
   ═══════════════════════════════════════════════════════════════════ */

/* Hero de portada: título con degradado, etiqueta viva */
[data-tema="vibrante"] .nl-fhero-label{color:var(--nl-c-magenta)}
[data-tema="vibrante"] .nl-fhero h1{
  background:linear-gradient(120deg,var(--nl-c-amber),var(--nl-c-magenta) 55%,var(--nl-c-violet));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* Tarjetas de portada: fondo TEÑIDO de color rotativo (bloque, no solo franja) */
[data-tema="vibrante"] .nl-fcard{position:relative;overflow:hidden;padding-top:28px;--c:var(--nl-c-amber)}
[data-tema="vibrante"] .nl-fgrid .nl-fcard:nth-child(7n+1){--c:var(--nl-c-amber)}
[data-tema="vibrante"] .nl-fgrid .nl-fcard:nth-child(7n+2){--c:var(--nl-c-blue)}
[data-tema="vibrante"] .nl-fgrid .nl-fcard:nth-child(7n+3){--c:var(--nl-c-magenta)}
[data-tema="vibrante"] .nl-fgrid .nl-fcard:nth-child(7n+4){--c:var(--nl-c-violet)}
[data-tema="vibrante"] .nl-fgrid .nl-fcard:nth-child(7n+5){--c:var(--nl-c-cyan)}
[data-tema="vibrante"] .nl-fgrid .nl-fcard:nth-child(7n+6){--c:var(--nl-c-lime)}
[data-tema="vibrante"] .nl-fgrid .nl-fcard:nth-child(7n+7){--c:var(--nl-c-coral)}
[data-tema="vibrante"] .nl-fcard{
  background:linear-gradient(160deg,color-mix(in srgb,var(--c) 24%,var(--nl-surface)),var(--nl-surface) 72%);
  border-color:color-mix(in srgb,var(--c) 32%,var(--nl-line))}
[data-tema="vibrante"] .nl-fcard::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:var(--c)}
[data-tema="vibrante"] .nl-fcard .go{color:color-mix(in srgb,var(--c) 70%,var(--nl-ink));opacity:1}
[data-tema="vibrante"] .nl-fcard:hover{transform:translateY(-3px);border-color:transparent;
  background:linear-gradient(160deg,color-mix(in srgb,var(--c) 40%,var(--nl-surface)),var(--nl-surface) 66%)}

/* Páginas de texto en vibrante: acentos vivos sin romper la lectura */
[data-tema="vibrante"] .nl-doc h1{
  background:linear-gradient(120deg,var(--nl-c-amber),var(--nl-c-magenta) 60%,var(--nl-c-violet));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
[data-tema="vibrante"] .nl-doc h2{color:var(--nl-accent-strong);padding-left:14px;position:relative}
[data-tema="vibrante"] .nl-doc h2::before{content:"";position:absolute;left:0;top:.15em;bottom:.15em;width:5px;
  border-radius:3px;background:linear-gradient(180deg,var(--nl-c-amber),var(--nl-c-magenta))}
[data-tema="vibrante"] .nl-doc a{color:var(--nl-c-magenta)}
[data-tema="vibrante"] .nl-doc li::marker{color:var(--nl-c-magenta)}