/* Marca de Neuropoint en modo claro, tomada del sitio (`neuropoint-ai-promocional`, rama develop,
   app/assets/css/tema.css, `:root.tema-claro`; PR #105). La comparten el panel y la página pública.
   Criterio del claro del sitio: sombras cortas en tinta índigo y el color como acento (bordes,
   líneas, rellenos suaves). */
@font-face { font-family: "Stack Sans Headline"; src: url("StackSansHeadline-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Stack Sans Headline"; src: url("StackSansHeadline-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Stack Sans Headline"; src: url("StackSansHeadline-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Stack Sans Text"; src: url("StackSansText-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Stack Sans Text"; src: url("StackSansText-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Stack Sans Text"; src: url("StackSansText-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }

:root {
  color-scheme: light;
  --np-page: #f7f7fc;
  --np-page-alt: #eef0fb;
  --np-surface: #ffffff;
  --np-surface-sunken: #f4f5fe;
  --np-surface-raised: #eef2ff;
  --np-line: #e0e7ff;
  --np-line-strong: #c7d2fe;
  --np-ink: #0a0818;
  --np-ink-body: #312e81;
  --np-ink-lead: #4338ca;
  --np-ink-muted: #5b5a85;
  --np-accent: #4f46e5;
  --np-accent-display: #6366f1;
  --np-primary: #818cf8;          /* firma de la marca: botón principal */
  --np-on-primary: #1e1b4b;
  --np-accent-soft: #eef2ff;
  /* Estados (los del claro del sitio: esmeralda, ámbar y rojo en su tono oscuro sobre blanco) */
  --st-ok: #059669;
  --st-ok-text: #047857;
  --st-ok-soft: #ecfdf5;
  --st-ok-line: #a7f3d0;
  --st-lento: #d97706;
  --st-lento-text: #b45309;
  --st-lento-soft: #fffbeb;
  --st-lento-line: #fde68a;
  --st-caida: #dc2626;
  --st-caida-text: #b91c1c;
  --st-caida-soft: #fef2f2;
  --st-caida-line: #fecaca;
  --st-mant: #2563eb;
  --st-mant-text: #1d4ed8;
  --st-mant-soft: #eff6ff;
  --st-sin: #c7cbe0;
  --st-sin-text: #5b5a85;
  --np-shadow-card: 0 1px 2px rgba(30, 27, 75, 0.07), 0 2px 6px -2px rgba(30, 27, 75, 0.08);
  --np-shadow-glow: 0 1px 2px rgba(30, 27, 75, 0.08), 0 8px 16px -8px rgba(49, 46, 129, 0.24);
  --radio: 16px;
  --font-headline: "Stack Sans Headline", Inter, system-ui, sans-serif;
  --font-text: "Stack Sans Text", Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--np-page); color: var(--np-ink); font-family: var(--font-text); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--font-headline); letter-spacing: -0.02em; margin: 0; color: var(--np-ink); }
a { color: var(--np-accent); }
.tarjeta { background: var(--np-surface); border: 1px solid var(--np-line); border-radius: var(--radio); box-shadow: var(--np-shadow-card); }

.boton { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; font: 600 14px var(--font-text); border: 1px solid var(--np-line-strong); background: var(--np-surface); color: var(--np-ink-body); text-decoration: none; cursor: pointer; white-space: nowrap; }
.boton:hover { border-color: var(--np-primary); }
.boton.principal { background: var(--np-primary); border-color: var(--np-primary); color: var(--np-on-primary); }
.boton.principal:hover { background: #6f7bf0; }
.boton.peligro { color: var(--st-caida-text); border-color: var(--st-caida-line); }
.boton:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--np-accent); outline-offset: 2px; }
.pildora { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border: 1px solid var(--np-line-strong); border-radius: 999px; background: var(--np-surface); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--np-ink-body); }

.punto { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; background: var(--st-sin); }
.e-operando .punto, .e-ok .punto { background: var(--st-ok); }
.e-lento .punto, .e-caida_parcial .punto { background: var(--st-lento); }
.e-caida .punto, .e-falla .punto { background: var(--st-caida); }
.e-mantenimiento .punto { background: var(--st-mant); }
.e-operando, .e-ok { color: var(--st-ok-text); }
.e-lento, .e-caida_parcial { color: var(--st-lento-text); }
.e-caida, .e-falla { color: var(--st-caida-text); }
.e-mantenimiento { color: var(--st-mant-text); }
.e-sin_datos, .e-sin_actualizar, .e-pendiente, .e-pausada { color: var(--st-sin-text); }