/* ============================================================================
   NexaCore — Base y componentes
   ----------------------------------------------------------------------------
   Requiere nexacore-tokens.css cargado ANTES que este archivo.
   Componentes extraídos de nexacore-design-system.html (prefijo .nx-).

   Las clases .ds-* del documento del sistema son el cromado de esa página y
   NO se extraen: no son componentes de producto.
   ========================================================================== */

/* ============================================================================
   BASE
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-secondary);
  font-family: var(--font-text);
  font-size: var(--size-sm);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-primary);
  line-height: 1.15;
  letter-spacing: -.02em;
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: var(--size-4xl); font-weight: 700; }
h2 { font-size: var(--size-2xl); font-weight: 700; }
h3 { font-size: var(--size-xl);  font-weight: 500; }
h4 { font-size: var(--size-md);  font-weight: 500; }

p { margin: 0; }

/* Medida de lectura: aplicar a bloques de texto corrido, no globalmente */
.nx-measure { max-width: 68ch; }

a {
  color: var(--signal);
  text-decoration-color: var(--signal-700);
  text-underline-offset: .18em;
  transition: color var(--dur-fast) var(--ease);
}

a:hover { color: var(--signal-soft); }

img,
svg,
video { max-width: 100%; height: auto; }

/* ============================================================================
   SUPERFICIES DEL NAVEGADOR
   Las partes que no dibujamos también son del sistema: sin esto llegan con
   los valores por defecto del navegador, que no pertenecen a ninguna marca.
   ========================================================================== */

::selection {
  background: var(--signal);
  color: var(--on-accent);
}

:root { caret-color: var(--signal); }

html {
  scrollbar-width: thin;
  scrollbar-color: var(--surface-track) var(--surface-page);
}

::-webkit-scrollbar             { width: 10px; height: 10px; }
::-webkit-scrollbar-track       { background: var(--surface-page); }
::-webkit-scrollbar-thumb       { background: var(--surface-track); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: var(--signal); }

/* ============================================================================
   BOTONES
   ========================================================================== */

.nx-btn {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--size-xs);
  padding: 12px 22px;
  /* Píldora: desviación aprobada por el usuario el 2026-09-03 sobre el
     "sharp only" del manual. Ver PRODUCT.md. */
  border-radius: var(--r-full);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  text-decoration: none;
}

.nx-btn--primary        { background: var(--signal); color: var(--on-accent); }
.nx-btn--primary:hover  { background: var(--signal-soft); color: var(--on-accent); }

.nx-btn--secondary       { background: transparent; color: var(--signal); border-color: var(--signal-700); }
.nx-btn--secondary:hover { background: var(--tint-signal-strong); border-color: var(--signal); }

.nx-btn--ghost       { background: transparent; color: var(--text-secondary); }
.nx-btn--ghost:hover { background: var(--tint-neutral); color: var(--text-primary); }

.nx-btn--danger { background: var(--status-fault); color: var(--on-accent); }

.nx-btn:disabled,
.nx-btn[aria-disabled="true"] {
  opacity: .38;
  cursor: not-allowed;
  pointer-events: none;
}

/* Estado de carga: el botón conserva su ancho y anuncia el trabajo en curso */
.nx-btn[data-loading="true"] {
  cursor: progress;
  pointer-events: none;
  color: transparent;
  position: relative;
}

.nx-btn[data-loading="true"]::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: var(--on-accent);
  border-radius: var(--r-full);
  animation: nx-spin var(--dur-slow) linear infinite;
}

.nx-btn--secondary[data-loading="true"]::after,
.nx-btn--ghost[data-loading="true"]::after { border-top-color: var(--signal); }

@keyframes nx-spin { to { transform: rotate(360deg); } }

/* ============================================================================
   CAMPOS DE FORMULARIO
   ========================================================================== */

.nx-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.nx-label {
  font-size: var(--size-2xs);
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: .01em;
}

.nx-input {
  font-family: var(--font-data);
  font-size: var(--size-xs);
  padding: 12px var(--sp-4);
  background: var(--surface-deep);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  color: var(--text-primary);
  transition: border-color var(--dur-fast) var(--ease);
  width: 100%;
}

.nx-input::placeholder { color: var(--text-muted); }

.nx-input:focus {
  outline: none;
  border-color: var(--signal);
  box-shadow: 0 0 0 3px var(--tint-signal-ring);
}

.nx-input:disabled {
  opacity: .5;
  cursor: not-allowed;
  color: var(--text-tertiary);
}

.nx-input[aria-invalid="true"] { border-color: var(--status-fault); }

.nx-input[aria-invalid="true"]:focus {
  border-color: var(--status-fault);
  box-shadow: 0 0 0 3px var(--tint-fault);
}

.nx-hint { font-size: var(--size-3xs); color: var(--text-muted); }

/* El error nombra el problema y la salida; nunca se comunica solo por color */
.nx-hint--error { color: var(--status-fault); }

/* ============================================================================
   DISTINTIVOS DE ESTADO
   ========================================================================== */

.nx-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: var(--r-full);
  font-family: var(--font-data);
  font-size: var(--size-3xs);
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nx-badge i {
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  background: currentColor;
  flex-shrink: 0;
}

.nx-badge--online   { background: var(--tint-online); color: var(--status-online); }
.nx-badge--degraded { background: var(--tint-degraded); color: var(--status-degraded); }
.nx-badge--fault    { background: var(--tint-fault); color: var(--status-fault); }
.nx-badge--idle     { background: var(--tint-idle); color: var(--text-tertiary); }

/* ============================================================================
   TARJETA
   ========================================================================== */

.nx-card {
  border: 1px solid var(--line-subtle);
  border-radius: var(--r-xl);
  padding: var(--sp-5);
  background: var(--surface-raised);
  transition:
    border-color var(--dur-base) var(--ease),
    transform var(--dur-base) var(--ease);
}

.nx-card:hover {
  border-color: var(--signal-700);
  transform: translateY(-3px);
}

.nx-card h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--size-md);
  color: var(--text-primary);
  margin: 0 0 var(--sp-2);
}

.nx-card p {
  margin: 0 0 var(--sp-4);
  font-size: var(--size-xs);
  color: var(--text-tertiary);
}

.nx-card > :last-child { margin-bottom: 0; }

/* ============================================================================
   MÉTRICA
   ========================================================================== */

.nx-metric {
  font-family: var(--font-data);
  font-size: var(--size-2xl);
  color: var(--signal);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.nx-metric small {
  font-size: var(--size-xs);
  color: var(--text-muted);
  margin-left: 6px;
}

/* ============================================================================
   TABLA
   ========================================================================== */

/* Envolver en un contenedor con overflow-x para que la página no ruede en X */
.nx-table-scroll { overflow-x: auto; }

.nx-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--size-xs);
}

.nx-table th {
  text-align: left;
  font-family: var(--font-data);
  font-size: var(--size-3xs);
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--text-muted);
  padding: var(--sp-3);
  border-bottom: 1px solid var(--line);
  font-weight: 500;
}

.nx-table td {
  padding: var(--sp-3);
  border-bottom: 1px solid var(--line-subtle);
  color: var(--text-secondary);
}

.nx-table td.is-data {
  font-family: var(--font-data);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.nx-table tbody tr { transition: background var(--dur-fast) var(--ease); }
.nx-table tbody tr:hover { background: var(--tint-signal); }