/* ============================================================
   El Espectro — chrome global compartido (portado del bundle):
   contenedor, paletas de veredicto, top bar, footer, theme-toggle.
   Las páginas añaden su CSS específico en su propio <style>.
   ============================================================ */

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 28px; }

/* paletas de veredicto — compartidas con la Ficha */
.v-cumple { --v: var(--opportunity); --v-tx: var(--opportunity-text); --v-sf: var(--opportunity-surface); --v-bd: var(--opportunity-border); }
.v-demas  { --v: var(--attention);   --v-tx: var(--attention-text);   --v-sf: var(--attention-surface); --v-bd: var(--attention-border); }
.v-humo   { --v: var(--risk);        --v-tx: var(--risk-text);        --v-sf: var(--risk-surface);      --v-bd: var(--risk-border); }
.v-sin    { --v: var(--text-muted);  --v-tx: var(--text-secondary);   --v-sf: var(--surface-sunken);   --v-bd: var(--border-default); }

/* ---------- top bar ---------- */
.top { border-bottom: 1px solid var(--border-subtle); position: sticky; top:0; z-index:20; background: color-mix(in srgb, var(--surface-canvas) 88%, transparent); backdrop-filter: blur(10px); }
.top-in { max-width:1080px; margin:0 auto; padding: 14px 28px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; }
.brand-prism { width:24px; height:24px; flex:none; }
.brand-name { font: var(--fw-semibold) var(--fs-14)/1 var(--font-sans); letter-spacing:.13em; text-transform:uppercase; color: var(--text-primary); }
.top-nav { display:inline-flex; align-items:center; gap:26px; }
.top-nav a { font: var(--text-label); color: var(--text-secondary); text-decoration:none; }
.top-nav a:hover, .top-nav a.on { color: var(--text-primary); }
.top-by { display:inline-flex; align-items:center; gap:7px; font: var(--text-caption); color: var(--text-muted); padding: 7px 12px; border:1px solid var(--border-default); border-radius: var(--radius-pill); text-decoration:none; }
.top-by:hover { border-color: var(--border-strong); color: var(--text-secondary); }
.top-by .pr { width:15px; height:15px; }
@media (max-width: 780px){ .top-nav { display:none; } }

/* ---------- full footer ---------- */
.foot { margin-top: 70px; border-top: 1px solid var(--border-subtle); background: var(--surface-subtle); }
.foot-in { max-width:1080px; margin:0 auto; padding: 46px 28px 28px; display:grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 34px; }
@media (max-width: 820px){ .foot-in { grid-template-columns: 1fr 1fr; gap: 30px; } }
@media (max-width: 480px){ .foot-in { grid-template-columns: 1fr; } }
.foot-brand .brand { margin-bottom: 14px; }
.foot-note { font: var(--text-body-s); color: var(--text-tertiary); max-width: 34ch; text-wrap:pretty; }
.foot-note b { color: var(--text-secondary); font-weight: var(--fw-semibold); }
.foot-indep { display:inline-flex; align-items:center; gap:7px; margin-top:16px; font: var(--fw-medium) var(--fs-11)/1.3 var(--font-mono); letter-spacing:.03em; color: var(--text-muted); background: var(--surface-default); border:1px solid var(--border-default); border-radius: var(--radius-md); padding: 8px 11px; }
.foot-col h4 { font: var(--fw-semibold) var(--fs-11)/1 var(--font-sans); letter-spacing:.09em; text-transform:uppercase; color: var(--text-muted); margin:0 0 16px; }
.foot-col ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.foot-col a { font: var(--text-body-s); color: var(--text-secondary); text-decoration:none; }
.foot-col a:hover { color: var(--text-primary); }
.foot-bar { border-top:1px solid var(--border-subtle); }
.foot-bar-in { max-width:1080px; margin:0 auto; padding: 18px 28px 40px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.foot-legal { display:inline-flex; align-items:center; gap:18px; flex-wrap:wrap; }
.foot-legal a { font: var(--text-caption); color: var(--text-tertiary); text-decoration:none; }
.foot-legal a:hover { color: var(--text-primary); }
.foot-copy { font: var(--text-caption); color: var(--text-muted); }

/* ---------- theme toggle ---------- */
.theme-toggle { position: fixed; right: 18px; bottom: 18px; z-index: 40; display:inline-flex; gap:4px; padding:4px; border-radius: var(--radius-pill); background: var(--surface-default); border:1px solid var(--border-default); box-shadow: var(--shadow-2); }
.theme-toggle button { appearance:none; border:none; background:none; cursor:pointer; font: var(--text-caption); color: var(--text-secondary); padding:7px 13px; border-radius: var(--radius-pill); }
.theme-toggle button.on { background: var(--surface-sunken); color: var(--text-primary); }

/* migas de pan */
.crumb { display:flex; align-items:center; gap:9px; padding: 26px 0 0; font: var(--text-caption); color: var(--text-muted); }
.crumb a { text-decoration:none; color: var(--text-tertiary); }
.crumb a:hover { color: var(--text-primary); }
.crumb .sep { color: var(--text-disabled); }