/* ============================================================
   SO · Unidad 02 y 03 · Hoja de estilos compartida (editorial cálido)
   Fuente única de tokens + header/footer/navegación del sitio.
   Cada página conserva sus propios componentes; acá vive el "chrome".
   ============================================================ */

/* ── TOKENS (única definición para todo el sitio) ── */
:root{
  /* base editorial */
  --bg:#f5f4f0; --surface:#fff; --surface2:#eeecea; --border:#d8d5cf;
  --text:#1a1917; --text2:#6b6760; --text3:#9b9890;
  --accent:#2a52e8; --accent-bg:#eef1fd;
  --green:#1a7a4a; --green-bg:#e8f5ee;
  --amber:#a05a00; --amber-bg:#fdf3e3;
  --red:#b83030;   --red-bg:#fdeaea;
  --purple:#7a4ab8; --purple-bg:#f0eafd;
  --teal:#0f8a86;  --teal-bg:#e6f4f3;
  --r:10px; --rl:16px;
  --mono:'DM Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* alias usados por el material "Seteo del S.O." (misma paleta) */
  --paper:var(--surface); --ink:var(--text); --ink-soft:var(--text2);
  --line:var(--border); --rule:var(--border);
  --m-green:var(--green); --m-red:var(--red); --m-purple:var(--purple);
  --m-blue:var(--accent); --m-teal:var(--teal); --m-orange:#c2651a;
  --m-amber:var(--amber); --m-slate:var(--text2);
  --code-bg:#1f2730; --code-ink:#e9eef3; --code-accent:#7fd1a8;
  /* medidas del chrome */
  --site-h:56px;
}

/* ── ENCABEZADO DEL SITIO ── */
.site-header{
  background:var(--surface);
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:200;
  min-height:var(--site-h);
  display:flex; align-items:center; gap:0;
  padding:0 clamp(1rem,3vw,2rem);
}
.site-brand{
  display:flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:13.5px; font-weight:500;
  color:var(--text); text-decoration:none; letter-spacing:.01em;
  height:var(--site-h); margin-right:auto; white-space:nowrap;
}
.site-brand .dot{
  width:9px; height:9px; background:var(--accent);
  border-radius:50%; display:inline-block; flex-shrink:0;
}
.site-brand .brand-sub{color:var(--text3); font-weight:400;}
.site-toggle{
  display:none; align-items:center; justify-content:center;
  height:var(--site-h); width:44px; margin-left:.25rem;
  background:none; border:none; cursor:pointer;
  color:var(--text2); font-size:20px; line-height:1;
}
.site-links{ display:flex; align-items:stretch; gap:0; height:var(--site-h); }
.site-links a{
  display:flex; align-items:center; height:100%;
  padding:0 1.05rem; font-size:13.5px; color:var(--text2);
  text-decoration:none; border-bottom:2px solid transparent;
  transition:color .15s, border-color .15s; white-space:nowrap;
}
.site-links a:hover{ color:var(--text); }
.site-links a[aria-current="page"]{ color:var(--accent); border-bottom-color:var(--accent); }
.site-links a .idx{ font-family:var(--mono); font-size:11px; color:var(--text3); margin-right:6px; }

/* ── NAV DE SECCIÓN (índice interno de la unidad de Hardware) ── */
.section-nav{
  background:var(--surface); border-bottom:1px solid var(--border);
  position:sticky; top:var(--site-h); z-index:150;
  display:flex; align-items:center; height:48px;
  padding:0 clamp(1rem,3vw,2rem); overflow-x:auto;
  -webkit-overflow-scrolling:touch; scrollbar-width:thin;
}
.section-nav .sn-inner{ display:flex; gap:0; height:100%; }
.section-nav a{
  display:flex; align-items:center; height:100%; padding:0 .9rem;
  font-size:12.5px; color:var(--text2); text-decoration:none;
  border-bottom:2px solid transparent; white-space:nowrap;
  transition:color .15s, border-color .15s;
}
.section-nav a:hover{ color:var(--c,var(--text)); }
.section-nav a.active{ color:var(--c,var(--accent)); border-bottom-color:var(--c,var(--accent)); }
/* punto de color por sección (código de color tipo marcador) */
.section-nav a{ gap:7px; }
.section-nav a::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--c,var(--accent)); flex-shrink:0;
}

/* ── PIE DEL SITIO ── */
.site-footer{
  display:block;
  background:var(--surface); border-top:1px solid var(--border);
  margin-top:3rem; padding:1.75rem clamp(1rem,3vw,2.5rem);
}
.site-footer .sf-inner{
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:1rem 1.5rem;
}
.site-footer .sf-left{ display:flex; align-items:center; gap:11px; }
.site-footer .sf-badge{
  width:38px; height:38px; border-radius:10px; flex-shrink:0;
  background:var(--accent-bg); color:var(--accent);
  display:flex; align-items:center; justify-content:center; font-size:17px;
}
.site-footer .sf-name{ font-size:14px; font-weight:600; color:var(--text); line-height:1.35; }
.site-footer .sf-sub{
  display:block; font-family:var(--mono); font-size:11px; font-weight:400;
  color:var(--text3); margin-top:2px;
}
.site-footer .sf-links{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.site-footer .linkedin-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:#0A66C2; color:#fff; text-decoration:none;
  font-size:13px; font-weight:600; padding:8px 16px; border-radius:22px;
  transition:background .2s, transform .15s;
}
.site-footer .linkedin-btn:hover{ background:#094fa3; transform:translateY(-1px); }
.site-footer .sf-legal{
  max-width:1200px; margin:1.1rem auto 0; padding-top:1rem;
  border-top:1px solid var(--surface2);
  font-size:11.5px; color:var(--text3); line-height:1.5;
}

/* ── RESPONSIVE (mobile-first: el header colapsa) ── */
@media(max-width:820px){
  .site-toggle{ display:flex; }
  .site-header{ flex-wrap:wrap; padding:0 1rem; }
  .site-links{
    display:none; flex-direction:column; width:100%; height:auto;
    border-top:1px solid var(--border); padding:.4rem 0;
  }
  .site-links.open{ display:flex; }
  .site-links a{
    height:46px; width:100%; padding:0 .5rem; font-size:15px;
    border-bottom:none; border-left:3px solid transparent;
  }
  .site-links a[aria-current="page"]{ border-left-color:var(--accent); background:var(--accent-bg); }
  .section-nav{ top:var(--site-h); }
}
@media print{
  .site-header,.section-nav,.site-toggle{ display:none !important; }
  .site-footer{ border-top:1px solid #ccc; }
}