/* Nexora Runtime UI kit v1 — estilos base opcionales para apps de la biblioteca. */
:root {
  --nx-ink: #14151f;
  --nx-ink-2: #2b2e3a;
  --nx-muted: #5b6070;
  --nx-line: #e4e6e0;
  --nx-mist: #f6f7f4;
  --nx-lime: #84cc16;
  --nx-lime-soft: #ecfccb;
  --nx-moss: #4d7c0f;
  --nx-danger: #b42318;
  --nx-radius: 14px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: "Outfit", ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--nx-ink);
  background: var(--nx-mist);
  font-size: 15px;
  line-height: 1.5;
}
:focus-visible { outline: 2px solid var(--nx-moss); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3 { letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 .5em; }
.nx-container { max-width: 1120px; margin: 0 auto; padding: 24px 20px 48px; }
.nx-card { background: #fff; border: 1px solid var(--nx-line); border-radius: var(--nx-radius); padding: 18px; box-shadow: 0 1px 2px rgb(20 21 31 / .04); }
.nx-grid { display: grid; gap: 16px; }
.nx-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.nx-spacer { flex: 1; }
.nx-muted { color: var(--nx-muted); }
.nx-btn {
  appearance: none; border: 1px solid transparent; border-radius: 999px; padding: 9px 16px;
  font: inherit; font-weight: 600; cursor: pointer; background: var(--nx-ink); color: #fff;
  transition: background .2s, transform .1s;
}
.nx-btn:hover { background: var(--nx-ink-2); }
.nx-btn:active { transform: translateY(1px); }
.nx-btn--accent { background: var(--nx-lime); color: var(--nx-ink); }
.nx-btn--accent:hover { background: #79bd12; }
.nx-btn--ghost { background: #fff; color: var(--nx-ink); border-color: var(--nx-line); }
.nx-btn--ghost:hover { background: var(--nx-mist); }
.nx-btn--danger { background: #fff; color: var(--nx-danger); border-color: #f2c6c2; }
.nx-btn--sm { padding: 6px 12px; font-size: 13px; }
.nx-input, .nx-select, .nx-textarea {
  width: 100%; font: inherit; color: var(--nx-ink); background: #fff; border: 1px solid #cfd3ca;
  border-radius: 10px; padding: 9px 12px;
}
.nx-input:focus, .nx-select:focus, .nx-textarea:focus { outline: none; border-color: var(--nx-moss); box-shadow: 0 0 0 4px rgb(132 204 22 / .25); }
.nx-label { display: block; font-size: 13px; font-weight: 600; margin: 0 0 4px; }
.nx-field { margin-bottom: 12px; }
.nx-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--nx-radius); overflow: hidden; }
.nx-table th, .nx-table td { padding: 10px 12px; border-bottom: 1px solid var(--nx-line); text-align: left; vertical-align: middle; }
.nx-table th { background: var(--nx-mist); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--nx-muted); }
.nx-badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 2px 9px; font-size: 12px; font-weight: 600; background: var(--nx-mist); color: var(--nx-ink-2); }
.nx-badge--ok { background: var(--nx-lime-soft); color: #3f6212; }
.nx-badge--warn { background: #fffaeb; color: #93370d; }
.nx-badge--danger { background: #fef3f2; color: var(--nx-danger); }
.nx-empty { text-align: center; padding: 36px 16px; color: var(--nx-muted); border: 1px dashed #cfd3ca; border-radius: var(--nx-radius); background: #fff; }
.nx-modal { border: none; border-radius: 18px; padding: 22px; width: min(520px, calc(100vw - 32px)); box-shadow: 0 30px 60px -20px rgb(20 21 31 / .35); }
.nx-modal::backdrop { background: rgb(20 21 31 / .45); }
#nx-bar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 10px 20px;
  background: rgb(255 255 255 / .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--nx-line); font-size: 14px;
}
.nx-bar__brand { font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.nx-bar__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--nx-lime); box-shadow: 0 0 0 4px var(--nx-lime-soft); }
.nx-bar__support { background: #fffaeb; color: #93370d; border-radius: 999px; padding: 2px 10px; font-weight: 600; font-size: 12px; }
.nx-bar__spacer { flex: 1; }
.nx-bar__user { color: var(--nx-muted); }
.nx-bar__btn { border: 1px solid var(--nx-line); background: #fff; border-radius: 999px; padding: 5px 12px; font: inherit; cursor: pointer; }
#nx-toasts { position: fixed; right: 16px; bottom: 16px; display: grid; gap: 8px; z-index: 50; }
.nx-toast { background: var(--nx-ink); color: #fff; padding: 10px 14px; border-radius: 12px; box-shadow: 0 10px 30px -10px rgb(20 21 31 / .5); animation: nx-in .25s ease-out; transition: opacity .3s, transform .3s; }
.nx-toast--error { background: var(--nx-danger); }
.nx-toast--out { opacity: 0; transform: translateY(6px); }
@keyframes nx-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
@media print { #nx-bar, .nx-no-print { display: none !important; } body { background: #fff; } }