/* sgs-ndr — hoja base homologada a la firma (FIRMA.md).
   Regla de oro: SOLO var(--token), cero colores hardcodeados, para que el toggle
   light/dark funcione en toda la app (Regla #5).

   ── Reparto de responsabilidades entre este archivo y theme.js ──
   Acá se declara el SET COMPLETO de tokens de la firma con los valores del tema oscuro
   (el canónico). theme.js los pisa con style.setProperty() en documentElement, que tiene
   más precedencia que esta regla, para alternar claro/oscuro.

   Es importante que estén los dos: theme.js solo mapea COLORES, y los tokens de forma
   (--radius*, --transition, --mono) no cambian entre temas. Si viven únicamente en el JS,
   quedan sin definir y `border-radius: var(--radius-lg)` es una declaración inválida →
   toda la interfaz sale con esquinas cuadradas, sin transiciones y sin la tipografía
   monoespaciada. Declararlos acá también evita el parpadeo si el JS tarda en ejecutar. */
:root {
  /* Fondos */
  --bg-deep:#0a0e13; --bg:#0f1419; --bg2:#151b23; --bg3:#1c2530; --bg4:#232d3b;
  --panel:#111820; --surface:#18202b; --surface2:#1e2836;
  /* Texto */
  --text:#e4e8ee; --text2:#c0c8d4; --dim:#7a8694; --muted:#525e6c;
  /* Acentos */
  --accent:#00d67e; --accent2:#00f28e; --accent-dim:rgba(0,214,126,0.08); --accent-border:rgba(0,214,126,0.15);
  --blue:#38a3f8; --blue-dim:rgba(56,163,248,0.08); --blue-border:rgba(56,163,248,0.15);
  --orange:#f5a623; --orange-dim:rgba(245,166,35,0.08); --orange-border:rgba(245,166,35,0.18);
  --red:#f04848; --red-dim:rgba(240,72,72,0.08); --red-border:rgba(240,72,72,0.15);
  --purple:#a78bfa; --purple-dim:rgba(167,139,250,0.10); --purple-border:rgba(167,139,250,0.20);
  --gold:#ffd700;
  /* Bordes y superficies */
  --border:rgba(255,255,255,0.06); --border2:rgba(255,255,255,0.1); --hover:rgba(255,255,255,0.04);
  /* Forma: NO cambian con el tema — por eso viven solo acá (FIRMA §2) */
  --shadow:0 4px 24px rgba(0,0,0,0.3);
  --radius:10px; --radius-sm:6px; --radius-lg:14px;
  --transition:all .2s cubic-bezier(.4,0,.2,1);
  --mono:'JetBrains Mono', ui-monospace, monospace;
  /* Cerebro (los lee el canvas por getComputedStyle) */
  --brain-bg:#080b10; --brain-grid:rgba(255,255,255,0.022);
  --syn:rgba(160,180,205,0.16); --syn-hot:rgba(0,214,126,0.55);
  --syn-new:rgba(167,139,250,0.8); --syn-lat:rgba(240,72,72,0.75);
  --neuron-core:#0f1419; --neuron-glow:0,214,126;
}

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

html, body { height: 100%; }
body {
  font-family: 'DM Sans', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }
::selection { background: var(--accent-dim); color: var(--text); }

/* Scrollbars finos (FIRMA §4) */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--muted); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--dim); }
* { scrollbar-width: thin; scrollbar-color: var(--muted) transparent; }

/* ══════════════════════════ Shell (Regla #6/#7) ══════════════════════════ */
#view-main { display: flex; flex-direction: column; height: 100vh; }
.shell { flex: 1; display: flex; overflow: hidden; min-height: 0; }
.content { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.inner { flex: 1; overflow-y: auto; padding: 1rem 1.2rem 1.4rem; }
/* El cerebro ocupa todo: sin padding ni scroll, el canvas manda. */
.inner.full { padding: 0; overflow: hidden; display: flex; flex-direction: column; }

/* ══════════════════════════ Tipografía ══════════════════════════ */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; flex-wrap: wrap; }
.page-title { font-size: 1.05rem; font-weight: 800; display: flex; align-items: center; gap: .5rem; }
.page-title i { color: var(--accent); }
.page-sub { font-size: .8rem; color: var(--dim); margin-top: .15rem; line-height: 1.5; max-width: 70ch; }
.mono { font-family: var(--mono); }
.dim { color: var(--dim); }
.muted { color: var(--muted); }
h3.sec { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--dim); margin: 1.2rem 0 .5rem; }
h3.sec:first-child { margin-top: 0; }

/* ══════════════════════════ Cards ══════════════════════════ */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .8rem; }
.card + .card { margin-top: .6rem; }
.card-title { font-size: .68rem; font-weight: 800; color: var(--dim); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .5rem; display: flex; align-items: center; gap: .35rem; }
.card-title i { color: var(--accent); }
.grid { display: grid; gap: .6rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

/* KPIs: número en mono peso 800-900, color semántico (FIRMA §4) */
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .7rem .8rem; min-width: 0; }
.kpi-label { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); display: flex; align-items: center; gap: .3rem; margin-bottom: .25rem; }
.kpi-val { font-family: var(--mono); font-size: 1.5rem; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.kpi-sub { font-size: .68rem; color: var(--muted); margin-top: .15rem; }
.kpi.acc .kpi-val { color: var(--accent); } .kpi.acc .kpi-label i { color: var(--accent); }
.kpi.red .kpi-val { color: var(--red); }    .kpi.red .kpi-label i { color: var(--red); }
.kpi.orange .kpi-val { color: var(--orange); } .kpi.orange .kpi-label i { color: var(--orange); }
.kpi.blue .kpi-val { color: var(--blue); }  .kpi.blue .kpi-label i { color: var(--blue); }
.kpi.purple .kpi-val { color: var(--purple); } .kpi.purple .kpi-label i { color: var(--purple); }

/* ══════════════════════════ Botones (Regla #19: nada pelado) ══════════════════════════ */
.btn {
  padding: .45rem .8rem; border: 1px solid transparent; border-radius: var(--radius-sm);
  font-size: .8rem; font-weight: 700; font-family: inherit; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  transition: var(--transition); white-space: nowrap; line-height: 1.3;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn i { font-size: .9em; }
.btn-accent { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #04140d; border-color: transparent; }
.btn-accent:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 14px var(--accent-dim); }
/* Secundaria y Cancelar: SIEMPRE con borde (Regla #19), nunca texto pelado */
.btn-outline { background: transparent; border-color: var(--border2); color: var(--text2); }
.btn-outline:hover:not(:disabled) { background: var(--hover); color: var(--text); border-color: var(--dim); }
.btn-sec { background: var(--surface2); border-color: var(--border); color: var(--text); }
.btn-sec:hover:not(:disabled) { background: var(--bg3); border-color: var(--border2); }
.btn-red { background: var(--red-dim); border-color: var(--red-border); color: var(--red); }
.btn-red:hover:not(:disabled) { background: var(--red); color: #fff; }
.btn-blue { background: var(--blue-dim); border-color: var(--blue-border); color: var(--blue); }
.btn-purple { background: var(--purple-dim); border-color: var(--purple-border); color: var(--purple); }
/* btn-ghost: SOLO para botones-ícono (la ✕ de cerrar). Nunca para una acción con texto. */
.btn-ghost { background: transparent; border-color: transparent; color: var(--dim); padding: .35rem .5rem; }
.btn-ghost:hover:not(:disabled) { background: var(--hover); color: var(--text); }
.btn-sm { padding: .3rem .55rem; font-size: .72rem; }
.btn.full { width: 100%; }
.btn-row { display: flex; gap: .4rem; flex-wrap: wrap; }

/* Grupo de botones tipo segmento (filtros rápidos) */
.seg { display: inline-flex; border: 1px solid var(--border2); border-radius: var(--radius-sm); overflow: hidden; }
.seg button { background: transparent; border: none; color: var(--dim); font-family: inherit; font-size: .72rem; font-weight: 700; padding: .32rem .6rem; cursor: pointer; transition: var(--transition); }
.seg button + button { border-left: 1px solid var(--border); }
.seg button:hover { background: var(--hover); color: var(--text); }
.seg button.on { background: var(--accent-dim); color: var(--accent); }

/* ══════════════════════════ Formularios ══════════════════════════ */
label { font-size: .64rem; font-weight: 700; color: var(--dim); text-transform: uppercase; letter-spacing: .05em; display: block; margin-bottom: .25rem; }
input, select, textarea {
  width: 100%; min-width: 0; box-sizing: border-box;
  padding: .45rem .6rem; background: var(--bg); border: 1px solid var(--border2);
  border-radius: var(--radius-sm); color: var(--text); font-size: .82rem; font-family: inherit;
  outline: none; transition: var(--transition);
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
input::placeholder, textarea::placeholder { color: var(--muted); }
textarea { resize: vertical; min-height: 68px; line-height: 1.5; }
/* select nativo estilizado (Regla #19: prohibido el look del sistema) */
select { appearance: none; -webkit-appearance: none; padding-right: 1.8rem; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--dim) 50%), linear-gradient(135deg, var(--dim) 50%, transparent 50%);
  background-position: calc(100% - 14px) 52%, calc(100% - 9px) 52%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.field { margin-bottom: .7rem; }
.field-hint { font-size: .68rem; color: var(--muted); margin-top: .25rem; line-height: 1.45; }
.error-msg { color: var(--red); font-size: .76rem; min-height: 1.1rem; margin: .3rem 0; }

/* Checkbox / radio estilizados */
.check { display: flex; align-items: center; gap: .45rem; cursor: pointer; font-size: .8rem; color: var(--text2); font-weight: 600; }
.check input[type="checkbox"], .check input[type="radio"] {
  appearance: none; -webkit-appearance: none; width: 15px; height: 15px; flex-shrink: 0;
  border: 1px solid var(--border2); background: var(--bg); border-radius: 4px; cursor: pointer;
  display: grid; place-content: center; transition: var(--transition);
}
.check input[type="radio"] { border-radius: 50%; }
.check input:checked { background: var(--accent); border-color: var(--accent); }
.check input:checked::after { content: ''; width: 7px; height: 4px; border-left: 2px solid #04140d; border-bottom: 2px solid #04140d; transform: rotate(-45deg) translate(1px, -1px); }
.check input[type="radio"]:checked::after { width: 5px; height: 5px; border: none; border-radius: 50%; background: #04140d; transform: none; }

/* ══════════════════════════ Tablas ══════════════════════════ */
.tabla-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: .8rem; }
thead th {
  text-align: left; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: var(--dim); padding: .5rem .7rem; border-bottom: 1px solid var(--border2);
  background: var(--surface2); position: sticky; top: 0; z-index: 1; white-space: nowrap;
}
tbody td { padding: .45rem .7rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr.click { cursor: pointer; transition: var(--transition); }
tbody tr.click:hover { background: var(--hover); }
tbody tr.click:hover td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
td.num { font-family: var(--mono); text-align: right; font-weight: 600; white-space: nowrap; }
td.nowrap, th.nowrap { white-space: nowrap; }

/* ══════════════════════════ Badges y pills ══════════════════════════ */
.badge {
  display: inline-flex; align-items: center; gap: .25rem; padding: .12rem .45rem;
  border-radius: 20px; font-size: .65rem; font-weight: 800; letter-spacing: .02em;
  border: 1px solid transparent; white-space: nowrap; line-height: 1.6;
}
.badge.acc { background: var(--accent-dim); color: var(--accent); border-color: var(--accent-border); }
.badge.red { background: var(--red-dim); color: var(--red); border-color: var(--red-border); }
.badge.orange { background: var(--orange-dim); color: var(--orange); border-color: var(--orange-border); }
.badge.blue { background: var(--blue-dim); color: var(--blue); border-color: var(--blue-border); }
.badge.purple { background: var(--purple-dim); color: var(--purple); border-color: var(--purple-border); }
.badge.dim { background: var(--surface2); color: var(--dim); border-color: var(--border); }
.badge.gold { background: rgba(255,215,0,.1); color: var(--gold); border-color: rgba(255,215,0,.25); }

/* Barra de riesgo 0-100 */
.riesgo { display: inline-flex; align-items: center; gap: .4rem; min-width: 70px; }
.riesgo-bar { flex: 1; height: 4px; background: var(--bg3); border-radius: 2px; overflow: hidden; min-width: 34px; }
.riesgo-fill { height: 100%; border-radius: 2px; transition: width .4s; }
.riesgo-num { font-family: var(--mono); font-size: .68rem; font-weight: 800; min-width: 22px; text-align: right; }

/* ══════════════════════════ Estados (FIRMA §5.3) ══════════════════════════ */
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; padding: 3rem 1.5rem; color: var(--dim); text-align: center; }
.empty i { font-size: 2rem; color: var(--muted); }
.empty-title { font-weight: 700; color: var(--text2); font-size: .9rem; }
.empty-sub { font-size: .78rem; max-width: 46ch; line-height: 1.55; color: var(--muted); }
.spinner { width: 22px; height: 22px; border: 2px solid var(--border2); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading { display: flex; align-items: center; justify-content: center; gap: .6rem; padding: 2.5rem; color: var(--dim); font-size: .82rem; }

/* Caja de ayuda contextual (McFlow: la explicación va donde se necesita) */
.hint { display: flex; gap: .55rem; align-items: flex-start; background: var(--bg2); border: 1px solid var(--border);
  border-left: 3px solid var(--accent); border-radius: var(--radius-sm); padding: .6rem .75rem;
  font-size: .78rem; line-height: 1.55; color: var(--text2); margin-bottom: .8rem; }
.hint i { color: var(--accent); font-size: 1rem; margin-top: .1rem; flex-shrink: 0; }
.hint.warn { border-left-color: var(--orange); } .hint.warn i { color: var(--orange); }
.hint.info { border-left-color: var(--blue); } .hint.info i { color: var(--blue); }

/* ══════════════════════════ Toasts (Regla #3) ══════════════════════════ */
#toasts { position: fixed; top: .8rem; right: .8rem; z-index: 9999; display: flex; flex-direction: column; gap: .35rem; pointer-events: none; }
.toast-item {
  display: flex; align-items: center; gap: .45rem; padding: .5rem .8rem;
  border-radius: var(--radius-sm); font-size: .8rem; font-weight: 700;
  background: var(--surface2); color: var(--text); border: 1px solid var(--border2);
  box-shadow: var(--shadow); opacity: 0; transform: translateX(14px); transition: .22s cubic-bezier(.4,0,.2,1);
  max-width: 380px;
}
.toast-item.show { opacity: 1; transform: none; }
.toast-item.ok { border-left: 3px solid var(--accent); } .toast-item.ok i { color: var(--accent); }
.toast-item.err { border-left: 3px solid var(--red); }   .toast-item.err i { color: var(--red); }
.toast-item.nfo { border-left: 3px solid var(--blue); }  .toast-item.nfo i { color: var(--blue); }

/* ══════════════════════════ Modales ══════════════════════════ */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(3px); z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal { background: var(--panel); border: 1px solid var(--border2); border-radius: var(--radius-lg); box-shadow: var(--shadow); width: 100%; max-width: 520px; max-height: 88vh; display: flex; flex-direction: column; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .8rem 1rem; border-bottom: 1px solid var(--border); font-weight: 800; font-size: .92rem; }
.modal-head i.close { cursor: pointer; color: var(--dim); padding: .2rem; border-radius: 4px; }
.modal-head i.close:hover { background: var(--hover); color: var(--text); }
.modal-body { padding: 1rem; overflow-y: auto; }
.modal-foot { display: flex; justify-content: flex-end; gap: .45rem; padding: .7rem 1rem; border-top: 1px solid var(--border); }

/* ══════════════════════════ Paginación (FIRMA §3) ══════════════════════════ */
.pager { display: flex; align-items: center; justify-content: center; gap: .6rem; padding: .7rem; font-size: .76rem; color: var(--dim); }
.pager .info { font-family: var(--mono); }

/* ══════════════════════════ Login ══════════════════════════ */
.login-wrap {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: var(--bg-deep); padding: 1rem;
  /* Resplandor verde detrás de la tarjeta: la identidad de la firma entra por el acento,
     no por un fondo plano. Es el mismo halo que usan las neuronas del cerebro. */
  background-image:
    radial-gradient(ellipse 70% 50% at 50% 0%, var(--accent-dim), transparent 70%),
    radial-gradient(ellipse 60% 50% at 50% 100%, var(--blue-dim), transparent 70%);
}
.login-card {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--radius-lg);          /* 14px — antes salía cuadrado: el token no existía */
  padding: 1.7rem 1.6rem;
  width: 100%; max-width: 380px;
  box-shadow: var(--shadow), 0 0 0 1px var(--accent-border);
  position: relative; overflow: hidden;
}
/* Filo de luz superior: el detalle que separa una tarjeta de un rectángulo. */
.login-card::before {
  content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: .55;
}
.login-header { font-size: 1.3rem; font-weight: 800; display: flex; align-items: center; gap: .55rem; letter-spacing: -.02em; }
.login-header i { color: var(--accent); font-size: 1.15rem; }
.login-header b { color: var(--accent); font-weight: 900; }
.login-sub { font-size: .76rem; color: var(--dim); margin: .3rem 0 1.3rem; line-height: 1.55; }
.login-card label { margin-top: .8rem; }
.login-card .btn { margin-top: 1.1rem; padding: .55rem .8rem; }

/* ══════════════════════════ Utilidades ══════════════════════════ */
.row { display: flex; align-items: center; gap: .5rem; }
.row.wrap { flex-wrap: wrap; }
.between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sep { height: 1px; background: var(--border); margin: .8rem 0; }
.rp-body .field:first-child { margin-top: 0; }
.rp-body .sep:first-child { display: none; }

/* Slider — el control nativo es gris y ajeno a la firma (Regla #19) */
input[type="range"] {
  appearance: none; -webkit-appearance: none;
  width: 100%; height: 4px; padding: 0; border: none;
  background: var(--bg3); border-radius: 2px; cursor: pointer; outline: none;
}
input[type="range"]:focus { box-shadow: none; }
input[type="range"]::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--panel);
  box-shadow: 0 0 0 1px var(--accent-border); cursor: pointer; transition: var(--transition);
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--panel); cursor: pointer;
}
input[type="range"]::-moz-range-track { height: 4px; background: var(--bg3); border-radius: 2px; }