/* ============================================================
   BASE.CSS · Variables, Reset y Utilidades
   ============================================================ */

/* 🔥 Fuentes optimizadas (Eliminadas Inter y Outfit para velocidad) */
@font-face { font-family: 'Chakra Petch'; src: local('Chakra Petch'), url('../fonts/chakra-petch/chakra-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: local('JetBrains Mono'), url('../fonts/jetbrains-mono/jbmono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: local('JetBrains Mono Bold'), url('../fonts/jetbrains-mono/jbmono-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  color-scheme: light;
  --bg: #ffffff; --bg-2: #f3f3f3; --bg-3: #e2e2e2;
  --panel: #ffffff; --panel-2: #f3f3f3;
  --border: #e2e2e2; --border-hi: #000000;
  --tx: #000000; --tx-2: #545454; --tx-3: #757575;
  --agua: #000000; --agua-hi: #333333;
  --laton: #05A357; --laton-hi: #059669;
  --naranja: #d93025; --naranja-hi: #b91c1c;
  --verde: #25D366; --rojo: #d93025;
  --radius: 12px;
  --nx-bg: #ffffff; --nx-panel: #f3f3f3; --nx-border: #e2e2e2;
  --nx-cyan: #000000; --nx-text: #000000; --nx-text-muted: #757575;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }

body {
  /* 🔥 Usamos la fuente nativa del sistema para velocidad instantánea */
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg); color: var(--tx); line-height: 1.55;
  -webkit-font-smoothing: antialiased; min-height: 100vh;
  padding-bottom: 80px; overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; font-size: 16px; }
code, .mono { font-family: 'JetBrains Mono', monospace; }
::selection { background: rgba(0,0,0,.1); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f3f3f3; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.25); }

.lucide-icon { display: inline-block; vertical-align: middle; width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.u-hidden { display: none !important; }

/* Utilidades genéricas */
.w-100 { width: 100%; }
.h-100 { height: 100%; }
.d-flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.gap-8 { gap: 8px; }
.gap-10 { gap: 10px; }
.mt-8 { margin-top: 8px; }
.mb-20 { margin-bottom: 20px; }
.p-40 { padding: 40px; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-sm { font-size: 0.85rem; }
.text-mono { font-family: 'JetBrains Mono', monospace; }
.text-muted { color: var(--tx-3); }
.text-danger { color: var(--naranja); }
.text-accent { color: var(--agua); }
.bg-success { background: var(--verde) !important; border-color: var(--verde) !important; }