/* ══════════════════════════════════════════════════════════════════
   NCO — Taller de Arquitectura
   Cabecera y pie comunes del sitio (lote 7, 23/10/2026; maqueta
   ~/Downloads/maqueta-portadas, aprobada por el titular)

   Tres entradas arriba (Taller, Guías, Herramientas); Apps, Escritos y lo
   legal al pie. Inter alojada en el sitio (OFL, /herramientas/fuentes/):
   nada de la fuente del sistema, que al imprimir a PDF incrustaba San
   Francisco. Tokens de src/lib/tokens-nco.js; el error es el único color.
   La usan el inicio, las guías y su portada; la portada de herramientas
   (src/pages/Home.jsx) la importa para la misma cabecera y el mismo pie.
   ══════════════════════════════════════════════════════════════════ */
@font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url('/herramientas/fuentes/inter-latin-300-normal.woff') format('woff')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/herramientas/fuentes/inter-latin-400-normal.woff') format('woff')}
@font-face{font-family:'Inter';font-style:italic;font-weight:400;font-display:swap;src:url('/herramientas/fuentes/inter-latin-400-italic.woff') format('woff')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/herramientas/fuentes/inter-latin-500-normal.woff') format('woff')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/herramientas/fuentes/inter-latin-600-normal.woff') format('woff')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/herramientas/fuentes/inter-latin-700-normal.woff') format('woff')}
@font-face{font-family:'Inter';font-style:normal;font-weight:800 900;font-display:swap;src:url('/herramientas/fuentes/inter-latin-800-normal.woff') format('woff')}

.nco-sitio{--s-papel:#F7F6F2;--s-tarjeta:#FFFFFF;--s-sel:#E7E6DF;--s-tinta:#202922;--s-suave:#5A605B;--s-linea:#DEDCD4;--s-borde:#7F847E;--s-on:#F7F6F2;
  --s-error:#A12D22;--s-fuente:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;color-scheme:light}
/* Modo oscuro (03/11/2026): TOKENS_NCO_OSCURO de src/lib/tokens-nco.js, con
   las mismas reglas que la herramienta. Sigue al sistema y obedece al botón
   de tema (data-theme en <html>); sólo en pantalla: lo impreso es claro. Lo
   piden las páginas con data-modo-oscuro en <html> (scripts/tema-temprano.mjs). */
@media screen and (prefers-color-scheme:dark){:root[data-modo-oscuro]:not([data-theme="claro"]) .nco-sitio{--s-papel:#0A0C0B;--s-tarjeta:#131614;--s-sel:#222724;--s-tinta:#ECEDE7;--s-suave:#A5AAA4;--s-linea:#2A2F2C;--s-borde:#686E68;--s-on:#0A0C0B;--s-error:#F2877B;color-scheme:dark;background:var(--s-papel);color:var(--s-tinta)}}
@media screen{:root[data-modo-oscuro][data-theme="oscuro"] .nco-sitio{--s-papel:#0A0C0B;--s-tarjeta:#131614;--s-sel:#222724;--s-tinta:#ECEDE7;--s-suave:#A5AAA4;--s-linea:#2A2F2C;--s-borde:#686E68;--s-on:#0A0C0B;--s-error:#F2877B;color-scheme:dark;background:var(--s-papel);color:var(--s-tinta)}}

/* Cabecera */
.nco-cab{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:24px;padding:12px 24px;background:var(--s-papel);border-bottom:1px solid var(--s-linea);font-family:var(--s-fuente);color:var(--s-tinta)}
.nco-logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--s-tinta)}
.nco-logo b{font-weight:800;font-size:24px;letter-spacing:-1px;line-height:1}
.nco-logo span{font-size:10px;letter-spacing:.24em;line-height:1.3;text-transform:uppercase}
.nco-entradas{display:flex;gap:4px;margin:0 0 0 auto;padding:0;list-style:none}
.nco-cab .nco-cuenta{margin-left:4px}
/* El botón de tema (03/11/2026) junto a la cuenta; antes de cargar su guion
   ya ocupa su lugar (48 px), para que la cabecera no salte. */
.nco-cab .nco-tema{min-width:48px;min-height:48px;margin-left:4px}
/* Cada entrada es una píldora con el nombre (lleva a la portada) y la flecha
   que abre su desglose (24/10/2026). */
.nco-entrada{position:relative;display:flex;align-items:center;border-radius:999px}
.nco-entrada.actual{background:var(--s-tinta)}
.nco-entrada:not(.actual):hover,.nco-entrada.abierta:not(.actual){background:var(--s-sel)}
.nco-entrada>a{display:inline-flex;align-items:center;min-height:44px;padding:0 2px 0 16px;border-radius:999px;text-decoration:none;font-size: var(--ui-texto-control, 15px);color:var(--s-tinta)}
.nco-entrada.actual>a,.nco-entrada.actual>.nco-abre{color:var(--s-on)}
.nco-abre{display:inline-grid;place-items:center;width:34px;height:44px;padding:0 10px 0 0;margin:0;border:0;border-radius:0 999px 999px 0;background:transparent;color:var(--s-tinta);cursor:pointer}
.nco-abre::before{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s}
.nco-entrada.abierta>.nco-abre::before{transform:translateY(2px) rotate(-135deg)}
.nco-entrada>a:focus-visible,.nco-abre:focus-visible,.nco-desglose a:focus-visible,.nco-menu:focus-visible,.nco-pie a:focus-visible{outline:2px solid var(--s-tinta);outline-offset:2px}
.nco-cab .nco-desglose{display:none;position:absolute;right:0;top:calc(100% + 8px);z-index:60;box-sizing:border-box;width:max-content;max-width:calc(100vw - 32px);
  grid-template-columns:repeat(var(--cols,1),minmax(240px,280px));gap:8px 24px;padding:16px;border-radius:16px;background:var(--s-tarjeta);border:1px solid var(--s-linea);text-align:left}
.nco-cab .nco-entrada.abierta>.nco-desglose{display:grid}
.nco-cab .nco-grupo{display:grid;gap:2px;align-content:start}
.nco-cab .nco-grupo-t{margin:0 0 4px 8px;font-size: var(--ui-texto-firma, 11px);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--s-suave)}
.nco-cab .nco-grupo a{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;min-height:44px;padding:8px;border-radius:10px;text-decoration:none;color:var(--s-tinta)}
.nco-cab .nco-grupo a:hover{background:var(--s-sel)}
.nco-cab .nco-grupo svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:1.5}
.nco-cab .nco-grupo b{display:block;font-size: var(--ui-texto-control, 15px);font-weight:600;line-height:1.3}
.nco-cab .nco-grupo small{display:block;margin-top:2px;font-size: var(--ui-texto-nota, 13px);line-height:1.35;color:var(--s-suave)}
.nco-cab .nco-desglose-pie{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px 20px;margin:4px 0 0;padding:10px 8px 0;border-top:1px solid var(--s-linea)}
.nco-cab .nco-desglose-pie a{font-size: var(--ui-texto-nota, 13px);color:var(--s-tinta);text-decoration:none}
.nco-cab .nco-desglose-pie a:hover{text-decoration:underline;text-underline-offset:3px}
.nco-menu{display:none;width:44px;height:44px;margin-left:4px;border-radius:50%;border:1px solid var(--s-borde);background:transparent;color:var(--s-tinta);font:400 18px var(--s-fuente);cursor:pointer}

/* Pie */
.nco-pie{border-top:1px solid var(--s-linea);background:var(--s-papel);color:var(--s-tinta);font-family:var(--s-fuente)}
.nco-pie-dentro{max-width:1080px;margin:0 auto;padding:32px 24px;display:grid;grid-template-columns:auto 1fr;gap:24px 48px;font-size: var(--ui-texto-control, 15px)}
.nco-pie-cols{display:flex;gap:40px;flex-wrap:wrap}
.nco-pie h2{font-size: var(--ui-texto-nota, 13px);font-weight:600;margin:0 0 8px;color:var(--s-suave);letter-spacing:0;text-transform:none}
.nco-pie ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.nco-pie a{color:var(--s-tinta);text-decoration:none}
.nco-pie a:hover{text-decoration:underline;text-underline-offset:3px}
.nco-pie-sede{grid-column:1/-1;font-size: var(--ui-texto-nota, 13px);color:var(--s-suave);margin:0}

/* Las guías pintan header, nav y footer de forma genérica (y con clases
   como .guia-rutas>header): aquí se les gana en especificidad. */
.nco-sitio header.nco-cab{max-width:none;margin:0;padding:12px 24px;border-top:0;border-bottom:1px solid var(--s-linea)}
.nco-sitio .nco-cab nav{display:block;max-width:none;margin:0 0 0 auto;padding:0;border:0;overflow:visible;gap:0}
.nco-sitio footer.nco-pie{max-width:none;margin:0;padding:0;border-top:1px solid var(--s-linea);font-size: var(--ui-texto-control, 15px);color:var(--s-tinta)}
.nco-sitio .nco-pie nav{display:block;max-width:none;margin:0;padding:0;border:0;overflow:visible}

@media (max-width:760px){
  .nco-sitio header.nco-cab{padding:12px 16px}
  .nco-cab{gap:12px;padding:12px 16px}
  .nco-menu{display:inline-grid;place-items:center}
  .nco-cab nav{order:3}
  .nco-cab .nco-tema{margin-left:auto}
  .nco-sitio .nco-cab nav{margin-left:0}
  .nco-cab .nco-cuenta{margin-left:0}
  .nco-entradas{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:4px;max-height:calc(100dvh - 72px);overflow-y:auto;padding:8px 16px 16px;background:var(--s-papel);border-bottom:1px solid var(--s-linea)}
  .nco-cab.abierta .nco-entradas{display:flex}
  /* En el celular, acordeón: tocar el nombre despliega su lista. */
  .nco-entrada{flex-wrap:wrap;border-radius:12px}
  .nco-entrada>a{flex:1;padding-right:0}
  .nco-abre{width:44px;padding:0;border-radius:0 12px 12px 0}
  .nco-cab .nco-desglose{position:static;width:100%;max-width:none;grid-template-columns:1fr;gap:4px;padding:4px 4px 8px;border:0;border-radius:0;background:transparent}
  .nco-entrada.actual .nco-desglose{background:var(--s-papel);border-radius:0 0 12px 12px}
  .nco-cab .nco-desglose-pie{padding:10px 12px 0}
  /* Abajo queda aire para el botón flotante de WhatsApp del inicio. */
  .nco-pie-dentro{grid-template-columns:1fr;padding:24px 16px 96px}
}
@media print{.nco-cab,.nco-pie{display:none!important}}