/* ========================================================================== Barra de navegación compartida por index.html, index-scalar.html e index-redoc.html. Fuente única: si cambia el menú, se cambia aquí. Sigue el tema del sistema (claro / oscuro). Una página que solo sabe renderizarse en claro puede fijar la barra en claro con . ========================================================================== */ :root{ --nav-h:56px; --nav-font:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; --nav-mono:'JetBrains Mono',ui-monospace,'Cascadia Code',Consolas,monospace; /* Claro */ --nav-bg:rgba(255,255,255,.85); --nav-bg-solid:#ffffff; --nav-border:#dfe4ec; --nav-rule:#e8ecf3; --nav-ink:#0f1728; --nav-ink-soft:#4c5768; --nav-ink-faint:#8a94a6; --nav-accent:#2563eb; --nav-logo:#0000ff; --nav-hover:rgba(15,23,40,.055); } @media (prefers-color-scheme: dark){ :root:not([data-navtheme="light"]){ --nav-bg:rgba(17,23,34,.82); --nav-bg-solid:#111722; --nav-border:#242e3d; --nav-rule:#1d2634; --nav-ink:#e6ecf5; --nav-ink-soft:#93a1b5; --nav-ink-faint:#5b6981; --nav-accent:#60a5fa; --nav-logo:#ffffff; --nav-hover:rgba(255,255,255,.06); } } .skiplink{ position:absolute; left:-9999px; top:0; z-index:2000; background:var(--nav-accent); color:#fff; font-family:var(--nav-font); font-size:13.5px; font-weight:600; padding:9px 16px; border-radius:0 0 6px 0; } .skiplink:focus{left:0;} nav.sitenav{ position:sticky; top:0; z-index:1000; height:var(--nav-h); box-sizing:border-box; background:var(--nav-bg-solid); border-bottom:1px solid var(--nav-border); font-family:var(--nav-font); } /* Translúcida donde el navegador puede desenfocar: el contenido se insinúa debajo en vez de quedar cortado por una franja opaca. */ @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ nav.sitenav{ background:var(--nav-bg); -webkit-backdrop-filter:saturate(180%) blur(14px); backdrop-filter:saturate(180%) blur(14px); } } nav.sitenav .wrap{ display:flex; align-items:center; gap:18px; height:100%; padding:0 24px; max-width:1400px; margin:0 auto; box-sizing:border-box; } /* ---------- Marca ---------- Mismo lockup que la barra lateral de app.smarttax.pe: isotipo + "SmartTax" con la bajada "Por Compliance Soft", y luego la firma tecnica "API". */ nav.sitenav .brandmark{ display:flex; align-items:center; gap:10px; flex:0 0 auto; color:var(--nav-ink); text-decoration:none; white-space:nowrap; } nav.sitenav .brandmark svg{width:26px; height:26px; color:var(--nav-logo); flex:0 0 auto;} nav.sitenav .brandmark .brandlockup{display:flex; flex-direction:column; line-height:1.05;} nav.sitenav .brandmark .brandname{font-weight:700; font-size:16px; letter-spacing:-.015em;} nav.sitenav .brandmark .brandby{ font-size:8.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--nav-ink-faint); margin-top:2px; } nav.sitenav .brandmark:hover{color:var(--nav-accent);} nav.sitenav .brandmark:focus-visible{outline:2px solid var(--nav-accent); outline-offset:3px; border-radius:4px;} /* "API" en monoespaciada: firma técnica, separada del nombre por un filete */ nav.sitenav .brandmark .brandapi{ font-family:var(--nav-mono); font-size:11px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--nav-ink-faint); padding-left:9px; margin-left:1px; border-left:1px solid var(--nav-rule); } /* ---------- Enlaces ---------- Al estilo de la barra de vuejs.org: sin píldoras ni rellenos. El enlace activo se distingue por color de acento y peso, no por un bloque de fondo. */ nav.sitenav .navlinks{ display:flex; align-items:center; height:100%; gap:0; margin-left:auto; min-width:0; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; } nav.sitenav .navlinks::-webkit-scrollbar{display:none;} nav.sitenav .navlinks a{ display:flex; align-items:center; white-space:nowrap; color:var(--nav-ink-soft); text-decoration:none; font-size:14px; font-weight:500; padding:0 14px; transition:color .2s; } nav.sitenav .navlinks a:hover{color:var(--nav-accent);} nav.sitenav .navlinks a.current{color:var(--nav-accent); font-weight:600;} nav.sitenav .navlinks a:focus-visible{outline:2px solid var(--nav-accent); outline-offset:-2px; border-radius:4px;} /* Vista alternativa (ReDoc): mismo contenido que la referencia principal, así que va atenuada y separada para no competir con ella. */ nav.sitenav .navlinks .navsep{ align-self:center; width:1px; height:20px; background:var(--nav-rule); margin:0 10px; flex:0 0 auto; } nav.sitenav .navlinks a.alt{color:var(--nav-ink-faint); font-size:13px; font-weight:400; padding:0 10px;} nav.sitenav .navlinks a.alt:hover{color:var(--nav-accent);} nav.sitenav .navlinks a.alt.current{color:var(--nav-accent); font-weight:500;} @media (max-width:600px){ nav.sitenav .wrap{padding:0 14px; gap:10px;} nav.sitenav .brandmark .brandby{display:none;} nav.sitenav .brandmark .brandname{font-size:15px;} nav.sitenav .brandmark .brandapi{border-left:none; padding-left:0;} nav.sitenav .navlinks a{padding:0 9px; font-size:13px;} nav.sitenav .navlinks .navsep{margin:0 5px;} }