/* Canonical shared design. Copies in WEB/css and portafolio/css keep each site portable. */
:root {
    color-scheme: light;
    --bg: #edf2f7; --bg-primary: #edf2f7; --bg-secondary: #f9fbfd; --bg-tertiary: #e8eef6;
    --ink: #192536; --text-primary: #192536;
    --muted: #556579; --text-secondary: #556579;
    --subtle: #526176; --text-tertiary: #526176;
    --blue: #1965cf; --primary-color: #1965cf; --primary-light: #1965cf;
    --glass: rgba(255,255,255,.64); --glass-solid: #f9fbfd; --glass-border: rgba(255,255,255,.92);
    --line: rgba(59,82,113,.11); --border-color: rgba(59,82,113,.11); --chip: rgba(255,255,255,.6);
    --shadow: 0 10px 34px -16px #3045622e, inset 0 1px 0 #fffffff2;
}
:root[data-theme="dark"], .dark-mode {
    color-scheme: dark;
    --bg: #101824; --bg-primary: #101824; --bg-secondary: #202e41; --bg-tertiary: #26364b;
    --ink: #f1f5fb; --text-primary: #f1f5fb;
    --muted: #b4c2d4; --text-secondary: #b4c2d4;
    --subtle: #a7b6ca; --text-tertiary: #a7b6ca;
    --blue: #8fbaff; --primary-color: #8fbaff; --primary-light: #8fbaff;
    --glass: rgba(30,43,61,.72); --glass-solid: #202e41; --glass-border: rgba(206,223,248,.15);
    --line: rgba(204,223,250,.13); --border-color: rgba(204,223,250,.13); --chip: rgba(172,201,242,.08);
    --shadow: 0 10px 34px -16px #0006, inset 0 1px 0 #ffffff17;
}
.network-header { position: sticky; top: 18px; z-index: 40; padding-top: 18px; margin-bottom: 42px; }
.network-nav { width: min(860px, calc(100% - 48px)); min-height: 66px; margin: 0 auto; padding: 8px 11px 8px 23px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid var(--glass-border); border-radius: 99px; background: var(--glass-solid); box-shadow: 0 8px 32px -12px #2639523d, inset 0 1px 0 #ffffffb3; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .network-nav { background: var(--glass); backdrop-filter: blur(28px) saturate(155%); -webkit-backdrop-filter: blur(28px) saturate(155%); }
}
.network-brand { display: inline-flex; align-items: center; gap: 13px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.network-mark { font-size: 30px; font-weight: 750; letter-spacing: -3px; line-height: 1; }
.network-mark > span { color: var(--blue); }
.network-caption { border-left: 1px solid var(--line); padding-left: 12px; color: var(--muted); font-size: 11px; font-weight: 500; }
.network-links { display: flex; align-items: center; gap: 5px; }
.network-link { display: inline-flex; align-items: center; min-height: 40px; padding: 9px 14px; border: 1px solid transparent; border-radius: 99px; color: var(--muted); font-size: 12px; font-weight: 550; line-height: 1.5; text-decoration: none; white-space: nowrap; }
.network-link:hover { background: var(--chip); color: var(--ink); }
.network-link[aria-current="page"] { color: var(--ink); border-color: var(--glass-border); background: var(--chip); }
.network-actions { display: flex; align-items: center; gap: 7px; }
.network-icon { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.network-theme { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; color: var(--ink); border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.network-theme:hover { background: var(--chip); }
.network-theme .theme-sun { display: none; }
[data-theme="dark"] .network-theme .theme-sun, .dark-mode .network-theme .theme-sun { display: block; }
[data-theme="dark"] .network-theme .theme-moon, .dark-mode .network-theme .theme-moon { display: none; }
.network-action { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 0 18px; border-radius: 99px; font-size: 12px; font-weight: 600; color: var(--bg); background: var(--ink); text-decoration: none; white-space: nowrap; }
.network-action .network-icon { width: 16px; height: 16px; }
.network-nav a:focus-visible, .network-nav button:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
@media (max-width: 620px) {
    .network-header { top: 10px; padding-top: 10px; margin-bottom: 24px; }
    .network-nav { width: calc(100% - 30px); min-height: 62px; padding: 7px 9px 7px 16px; gap: 8px; }
    .network-caption { display: none; }
    .network-links { gap: 0; }
    .network-link { font-size: 11px; padding: 8px; min-height: 38px; }
    .network-actions { gap: 3px; }
    .network-theme { width: 34px; height: 38px; }
    .network-action { min-height: 39px; width: 36px; padding: 0; }
    .network-action > span { display: none; }
}
@media (prefers-reduced-transparency: reduce) {
    .network-nav { background: var(--glass-solid); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media print { .network-header { display: none !important; } }