/* ============================================================================
   GLS ERP · Design system · base.css
   Reset suave, tipografía, elementos HTML sin clase, utilidades.
   ============================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--topbar-height) + 16px); }
body {
  margin: 0; min-width: 320px; overflow-x: hidden;
  font-family: var(--font-sans); font-size: var(--fs-14); line-height: var(--lh-base);
  color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Tipografía --------------------------------------------------------------- */
h1, h2, h3, h4 { margin: 0; color: var(--text); line-height: var(--lh-tight); font-weight: 600; overflow-wrap: anywhere; }
h1 { font-size: var(--fs-28); font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: var(--fs-16); margin-bottom: var(--sp-3); }
h3 { font-size: var(--fs-14); }
h4 { font-size: var(--fs-13); color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; }
p { margin: 0 0 var(--sp-3); }
p:last-child { margin-bottom: 0; }
small { font-size: var(--fs-12); }
strong, b { font-weight: 600; }
a { color: var(--blue-700); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: color var(--t-fast), text-decoration-color var(--t-fast); }
a:hover { color: var(--blue-900); text-decoration-color: currentColor; }
code, kbd, pre { font-family: var(--font-mono); font-size: .92em; }
code { overflow-wrap: anywhere; background: var(--surface-3); padding: 1px 5px; border-radius: 4px; }
pre { overflow-x: auto; padding: var(--sp-3); border-radius: var(--radius-sm); background: var(--surface-3); }
kbd { display: inline-block; min-width: 1.6em; padding: 1px 6px; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 5px; background: var(--surface); font-size: var(--fs-12); text-align: center; }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-5) 0; }
mark { background: #fff1b8; color: inherit; padding: 0 2px; border-radius: 2px; }
ul, ol { margin: 0 0 var(--sp-3); padding-left: 20px; }
li { margin: 4px 0; }
dl { margin: 0; }
img, svg, video { max-width: 100%; height: auto; }
svg.icon { display: inline-block; flex: none; vertical-align: -.2em; width: 1.25em; height: 1.25em; }
figure { margin: 0; }
address { font-style: normal; }
summary { cursor: pointer; }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
progress { display: block; width: 100%; height: 10px; margin: var(--sp-2) 0 var(--sp-3); accent-color: var(--brand); border-radius: var(--radius-pill); overflow: hidden; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .6; }
table { border-collapse: separate; border-spacing: 0; }
.tabular, table, .kpi__value, .stat-value, .metrics strong { font-variant-numeric: tabular-nums; }

/* Foco visible (anillo azul 3px) ------------------------------------------- */
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--focus-ring-color); outline-offset: 2px; border-radius: 4px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }

/* Utilidades ----------------------------------------------------------------- */
.visually-hidden, .sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -10000px; top: 8px; z-index: 1000; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--shadow-lg); }
.skip-link:focus { left: 12px; }
.meta { color: var(--text-2); font-size: var(--fs-13); }
.muted, .text-muted { color: var(--text-2); }
.text-danger { color: var(--danger); } .text-success { color: var(--success); } .text-warning { color: var(--warning); }
.nowrap { white-space: nowrap; }
.text-right, .num { text-align: right; }
.text-center { text-align: center; }
.flex { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.flex-between { display: flex; gap: var(--sp-3); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.stack { display: grid; gap: var(--sp-3); }
.mt-0 { margin-top: 0 !important; } .mb-0 { margin-bottom: 0 !important; } .mt-5 { margin-top: var(--sp-5); }
.mt-2 { margin-top: var(--sp-2); } .mt-4 { margin-top: var(--sp-4); } .mt-6 { margin-top: var(--sp-6); }
.mb-2 { margin-bottom: var(--sp-2); } .mb-4 { margin-bottom: var(--sp-4); } .mb-6 { margin-bottom: var(--sp-6); }
.w-full { width: 100%; }
.eyebrow { margin: 0 0 6px; color: var(--blue-700); font-size: var(--fs-12); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.page-intro { max-width: 720px; margin: 6px 0 var(--sp-5); color: var(--text-2); }
.no-js .js-only { display: none !important; }
html:not(.no-js) .no-js-only { display: none !important; }
.delta-up { color: var(--success); } .delta-down { color: var(--danger); }