/* ==========================================================================
   Portfolio · Gastón M. Mansilla
   Visuales de los casos de estudio hechos en código (cifras, comparaciones,
   escalas, estados). Se suma a styles.css y usa sus mismos tokens.
   ========================================================================== */

/* ---------- Tarjetas de cifras ---------- */
.stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 0;
  margin: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
@media (min-width: 1024px) {
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-12);
}
.stat__num {
  font-size: 48px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--primary-500);
}
.stat__title { margin-top: 4px; font-size: 18px; line-height: 1.3; font-weight: 600; color: var(--gray-900); }
.stat__text { flex: 1; font-size: 16px; line-height: 1.5; color: var(--body-color); }
.stat__link {
  align-self: flex-start;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.57;
  font-weight: 500;
  color: var(--link-color);
  text-transform: uppercase;
  text-decoration: none;
}
.stat__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.stat__link:active { color: var(--primary-700); }

/* ==========================================================================
   Visuales del Hallazgo 1 (identidad visual): barras, botones, benchmark,
   paleta, radios y badges. Prefijo nx- para no pisar nada de styles.css.
   ========================================================================== */

/* Tokens del sistema que styles.css no trae (los mismos de prototipos/sistema/css/tokens.css) */
:root {
  --primary-300: #6ba0da;
  --primary-800: #04274e;
  --secondary-50: #f0f1f2;
  --secondary-300: #a7acb1;
  --secondary-400: #899197;
  --secondary-500: #6c757d;
  --secondary-600: #565e64;
  --secondary-700: #41464b;
  --brand-50: #f7ece6;
  --brand-500: #ac3e00;
  --brand-600: #8a3200;
  --brand-700: #672500;
  --brand-vivid: #ff6600;
  --danger-50: #f7e6e8;
  --danger-100: #efccd0;
  --danger-500: #ad0014;
  --danger-600: #8a0010;
  --danger-700: #68000c;
  --success-50: #eaf3e6;
  --success-500: #2d8500;
  --success-700: #1b5000;
  --secondary-800: #2b2f32;
  --warning-50: #fff8e6;
  --warning-400: #ffc107;
  --warning-800: #6b2c00;
}

/* ---------- Tarjeta contenedora de un visual ---------- */
.nx-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  padding: 24px;
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-12);
}
.nx-card__head { display: flex; flex-direction: column; gap: 4px; }
.nx-card__title { font-size: 21px; line-height: 1.25; font-weight: 600; color: var(--gray-900); }
.nx-card__note { font-size: 14px; line-height: 1.57; color: var(--text-muted); }
@media (min-width: 768px) {
  .nx-card--wide .nx-card__head { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 32px; }
  .nx-card--wide .nx-card__note { max-width: 46ch; text-align: right; }
}
.nx-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 1024px) {
  .nx-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.nx-pair--start { align-items: start; }
.nx-panel { padding: 16px; background: var(--secondary-50); border-radius: var(--radius-8); }

/* ---------- Barras: para qué se usan los botones ---------- */
.nx-bars { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; }
.nx-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; }
.nx-bar__label { font-size: 16px; line-height: 1.4; font-weight: 600; color: var(--gray-900); }
.nx-bar__sub { font-size: 14px; font-weight: 400; color: var(--text-muted); }
.nx-bar__value { font-size: 16px; line-height: 1.4; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--gray-900); }
.nx-bar__track { grid-column: 1 / -1; height: 12px; background: var(--secondary-100); border-radius: 999px; overflow: hidden; }
.nx-bar__fill { display: block; height: 100%; width: var(--w); min-width: 10px; background: var(--c); border-radius: 999px; }

/* ---------- Botones del sistema (muestras) ---------- */
.nxb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 40px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-8);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1;
  font-weight: 400;
  white-space: nowrap;
  user-select: none;
  cursor: default;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.nxb--sm { min-height: 32px; padding: 0 16px; }
.nxb--lg { min-height: 48px; padding: 0 24px; font-size: 16px; }
.nxb--block { width: 100%; padding-inline: 4px; }

.nxb--primary { background: var(--primary-500); color: var(--white); }
.nxb--primary:hover, .nxb--primary.is-hover { background: var(--primary-600); }
.nxb--primary:active, .nxb--primary.is-active { background: var(--primary-700); }
.nxb--primary.is-focus { box-shadow: 0 0 0 3px var(--primary-200); }
.nxb--primary.is-disabled { background: var(--primary-300); }

.nxb--secondary { background: var(--secondary-100); color: var(--gray-900); }
.nxb--secondary:hover { background: var(--secondary-200); }
.nxb--secondary:active { background: var(--secondary-300); }

.nxb--danger { background: var(--danger-500); color: var(--white); }
.nxb--danger:hover { background: var(--danger-600); }
.nxb--danger:active { background: var(--danger-700); }

.nxb--brand { background: var(--brand-500); color: var(--white); }
.nxb--brand:hover { background: var(--brand-600); }
.nxb--brand:active { background: var(--brand-700); }

.nxb--o-primary { border-color: var(--primary-500); color: var(--primary-500); background: transparent; }
.nxb--o-primary:hover { background: var(--primary-50); }
.nxb--o-primary:active { background: var(--primary-100); }
.nxb--o-secondary { border-color: var(--secondary-500); color: var(--secondary-700); background: transparent; }
.nxb--o-secondary:hover { background: var(--secondary-100); }
.nxb--o-secondary:active { background: var(--secondary-200); }
.nxb--o-danger { border-color: var(--danger-500); color: var(--danger-500); background: transparent; }
.nxb--o-danger:hover { background: var(--danger-50); }
.nxb--o-danger:active { background: var(--danger-100); }
.nxb--o-brand { border-color: var(--brand-500); color: var(--brand-500); background: transparent; }
.nxb--o-brand:hover { background: var(--brand-50); }
.nxb--o-brand:active { background: var(--brand-100, #eed8cc); }

/* Botones del producto viejo: radio de 4px y verde de estado como acción */
.nxb--old { border-radius: var(--radius-4); }
.nxb--old-success { background: var(--success-500); color: var(--white); }
.nxb--old-outline { border-color: var(--secondary-500); color: var(--secondary-600); background: transparent; }
.nxb--old-link { min-height: 0; padding: 0; color: #0d6efd; background: transparent; }
.nxb--old-vivid { background: var(--brand-vivid); color: var(--white); }

/* ---------- Antes y después de los botones ---------- */
.nx-mix__head { display: none; }
.nx-mix__list { margin: 0; padding: 0; list-style: none; }
.nx-mix__item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 20px 0; border-top: 1px solid rgba(7, 78, 155, 0.16); }
.nx-mix__item:first-child { border-top: 0; padding-top: 4px; }
.nx-mix__cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nx-mix__tag { font-size: 12px; line-height: 1.4; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--link-color); }
.nx-mix__chipbox { display: flex; align-items: center; gap: 8px; height: 40px; }
.nx-mix__chip { width: 40px; height: 22px; border-radius: 4px; background: var(--c); }
.nx-mix__chip--link, .nx-mix__chip--ghost { width: 44px; height: 28px; border-radius: 6px; background: radial-gradient(circle at 9px 50%, var(--c) 0 3.5px, transparent 4px) no-repeat, linear-gradient(var(--c), var(--c)) 18px 50% / 20px 3px no-repeat; }
.nx-mix__chip--ghost { background-color: var(--primary-50); box-shadow: inset 0 0 0 1px rgba(7, 78, 155, 0.18); }
.nx-mix__chip--outline { background: var(--white); box-shadow: inset 0 0 0 2px var(--c); }
.nx-mix__share { margin: 0; display: flex; flex-direction: column; gap: 4px; font-size: 20px; line-height: 1.2; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--gray-900); }
.nx-mix__name { margin: 0; font-size: 16px; line-height: 1.3; font-weight: 600; color: var(--gray-900); }
.nx-mix__sub { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.nx-mix__to { margin: 0; font-size: 14px; line-height: 1.5; color: var(--body-color); }
.nx-mix__to + .nx-mix__to { margin-top: 8px; }
.nx-mix__to strong { display: block; font-size: 16px; line-height: 1.3; color: var(--primary-700); }
@media (min-width: 768px) {
  .nx-mix__head, .nx-mix__item { grid-template-columns: minmax(0, 1.25fr) 96px minmax(0, 1.25fr); gap: 0 32px; align-items: start; }
  .nx-mix__head { display: grid; padding-bottom: 12px; border-bottom: 2px solid rgba(7, 78, 155, 0.24); font-size: 12px; line-height: 1.4; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--link-color); }
  .nx-mix__item:first-child { padding-top: 20px; }
  .nx-mix__tag { display: none; }
  .nx-mix__share { padding-top: 40px; }
  .nx-mix__cell--to { position: relative; }
  .nx-mix__cell--to::before { content: ""; position: absolute; left: -26px; top: 12px; width: 16px; height: 16px; background: var(--primary-500); -webkit-mask: var(--nx-arrow) center / contain no-repeat; mask: var(--nx-arrow) center / contain no-repeat; }
}
.nx-mix { --nx-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 11h12.2l-5.6-5.6L12 4l8 8-8 8-1.4-1.4 5.6-5.6H4z'/%3E%3C/svg%3E"); }

/* ---------- Cifras de links que hacen de botón ---------- */
.nx-facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .nx-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; } }
@media (min-width: 1100px) { .nx-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }
.nx-fact { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding-top: 16px; border-top: 1px solid rgba(7, 78, 155, 0.16); }
.nx-fact p { margin: 0; }
.nx-fact__n { font-size: 40px; line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--gray-900); }
.nx-fact__t { font-size: 16px; line-height: 1.3; font-weight: 600; color: var(--gray-900); }
.nx-fact__d { font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.nx-fact code { font-size: 0.92em; overflow-wrap: anywhere; }

/* ---------- Benchmark: una columna por producto ---------- */
.nx-bm { display: grid; grid-template-columns: 1fr; gap: 32px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .nx-bm { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; } }
@media (min-width: 1200px) { .nx-bm { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.nx-bm__item { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.nx-bm__name { margin: 0; font-size: 18px; line-height: 1.3; font-weight: 600; color: var(--gray-900); }
.nx-bm__split { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; height: 72px; border-radius: var(--radius-12); overflow: hidden; }
.nx-bm__split span { display: flex; align-items: flex-end; padding: 8px 12px; background: var(--c); color: var(--fg); font-size: 12px; line-height: 1.3; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.nx-bm__verdict { margin: 0; font-size: 13px; line-height: 1.4; font-weight: 600; color: var(--secondary-700); }
.nx-bm__verdict::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--secondary-400); }
.nx-bm__verdict--same::before { background: var(--primary-500); }
.nx-bm__list { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.nx-bm__list > div { display: flex; flex-direction: column; gap: 2px; }
.nx-bm__list dt { font-size: 12px; line-height: 1.5; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.nx-bm__list dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--body-color); }

/* ---------- Paleta: roles semánticos y escalas ---------- */
.nx-roles, .nx-steps { list-style: none; margin: 0; padding: 0; }
.nx-roles { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .nx-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .nx-roles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.nx-role { display: flex; align-items: center; gap: 16px; padding: 16px; border: 1px solid var(--border-soft); border-radius: var(--radius-12); background: var(--white); }
.nx-role__sw { flex: none; width: 56px; height: 56px; border-radius: var(--radius-12); background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.08); }
.nx-role__body { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.nx-role__name, .nx-role__tok, .nx-role__warn, .nx-scale__name { margin: 0; }
.nx-role__name { font-size: 16px; line-height: 1.3; font-weight: 600; color: var(--gray-900); }
.nx-role__tok { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.4; color: var(--text-muted); overflow-wrap: anywhere; }
.nx-role__warn { font-size: 13px; line-height: 1.4; font-weight: 600; color: var(--danger-600); }
.nx-cr { display: inline-flex; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 12px; line-height: 1.5; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nx-cr--ok { background: var(--success-50); color: var(--success-700); }
.nx-cr--mid { background: var(--secondary-100); color: var(--secondary-800); }
.nx-cr--no { background: var(--secondary-100); color: var(--secondary-700); }
.nx-pill { display: inline-block; margin-left: 8px; padding: 2px 10px; border: 1px solid var(--primary-200); border-radius: 999px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.5; font-weight: 500; color: var(--primary-700); vertical-align: middle; }
.nx-scale { display: flex; flex-direction: column; gap: 8px; }
.nx-scale__name { font-size: 14px; line-height: 1.4; font-weight: 600; color: var(--gray-900); }
.nx-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; }
@media (min-width: 640px) { .nx-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 900px) { .nx-steps { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .nx-steps { grid-template-columns: repeat(11, minmax(0, 1fr)); } }
.nx-step { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.nx-step__sw { width: 100%; height: 44px; border-radius: var(--radius-8); background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.nx-step.is-base .nx-step__sw { box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px var(--gray-900); }
.nx-step__n { font-size: 13px; line-height: 1.3; font-weight: 600; color: var(--gray-900); }
.nx-step__hex { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.3; color: var(--text-muted); }
.nx-step .nx-cr { flex-direction: column; gap: 0; padding: 2px 6px; border-radius: var(--radius-8); font-size: 11.5px; line-height: 1.4; }
@media (max-width: 1199px) { .nx-step .nx-cr { flex-direction: row; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 12px; } }
.nx-step .nx-cr--no span[aria-hidden] { display: inline; }
/* tira compacta: solo colores y numero de paso */
.nx-steps.nx-steps--mini { grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 4px; }
.nx-steps--mini .nx-step { display: flex; flex-direction: column; gap: 4px; align-items: center; min-width: 0; }
.nx-steps--mini .nx-step__sw { height: 32px; border-radius: var(--radius-4); }
.nx-steps--mini .nx-step__n { font-size: 11px; line-height: 1.2; font-weight: 500; color: var(--text-muted); }
@media (max-width: 480px) { .nx-steps--mini .nx-step__n { font-size: 10px; } .nx-steps--mini .nx-step__sw { height: 26px; } }

/* ---------- Radios ---------- */
.nx-spec { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; }
.nx-spec__row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--secondary-200);
}
.nx-spec__row:last-child { border-bottom: 0; }
.nx-spec__name { font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--gray-900); }
.nx-spec__radius { display: block; font-size: 14px; font-weight: 400; color: var(--text-muted); }
.nx-spec__item { justify-self: start; min-width: 0; max-width: 100%; }
.nx-old-card { padding: 16px; background: var(--white); border: 1px solid var(--secondary-200); border-radius: var(--radius-4); }
.nx-old-card strong { display: block; font-size: 18px; font-weight: 600; color: var(--gray-900); }
.nx-old-card span { font-size: 14px; color: var(--text-muted); }
.nx-old-alert { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--danger-100); border: 1px solid #e6b0b8; border-radius: var(--radius-4); color: var(--danger-700); font-size: 16px; }
.nx-old-input { display: flex; flex-direction: column; gap: 4px; }
.nx-old-input small { font-size: 14px; color: var(--text-muted); }
.nx-old-input span { padding: 10px 12px; background: var(--white); border: 1px solid var(--secondary-300); border-radius: var(--radius-4); font-size: 16px; color: var(--gray-900); }
.nx-radii { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 1200px) { .nx-radii { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.nx-radii li { display: flex; flex-direction: column; gap: 4px; padding: 20px 16px; background: var(--white); border: 1px solid var(--secondary-200); border-radius: var(--r); box-shadow: var(--shadow-sm); }
.nx-radii strong { font-size: 18px; line-height: 1.3; font-weight: 600; color: var(--gray-900); }
.nx-radii span { display: block; font-size: 14px; line-height: 1.4; color: var(--text-muted); }

/* ---------- Componente completo ---------- */
.nx-matrix { display: flex; flex-direction: column; gap: 16px; }
.nx-matrix__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 12px; align-items: center; }
.nx-matrix__row > .nx-matrix__label { grid-column: 1 / -1; }
.nx-matrix__label { font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--gray-900); }
.nx-matrix__head { font-size: 12px; font-weight: 500; line-height: 1.5; text-transform: uppercase; text-align: center; color: var(--text-muted); }
@media (min-width: 640px) {
  .nx-matrix__row { grid-template-columns: 96px repeat(4, minmax(0, 144px)); }
  .nx-matrix__row > .nx-matrix__label { grid-column: auto; }
}
.nx-sub { margin: 0; padding-top: 20px; border-top: 1px solid var(--secondary-200); }
.nx-sub__title { margin-bottom: 16px; font-size: 16px; font-weight: 600; color: var(--gray-900); }
.nx-chips { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 24px; margin: 0; padding: 0; list-style: none; }
.nx-chips li { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.nx-chips small { font-size: 14px; line-height: 1.3; color: var(--text-muted); }
.nx-two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 40px; }
@media (min-width: 900px) { .nx-two { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.nx-two > .nx-sub { border-top: 0; padding-top: 0; }

/* ---------- Badges: del pill ilegible al badge de 4px ---------- */
.nx-badges { width: 100%; max-width: 720px; border-collapse: collapse; }
.nx-badges th { padding: 12px 8px; font-size: 14px; line-height: 1.57; font-weight: 500; text-transform: uppercase; text-align: left; color: var(--text-muted); border-bottom: 1px solid var(--secondary-300); }
.nx-badges td, .nx-badges tbody th { padding: 16px 8px; vertical-align: middle; border-bottom: 1px solid var(--secondary-200); }
.nx-badges tbody th { font-size: 16px; font-weight: 600; text-transform: none; color: var(--gray-900); border-bottom: 1px solid var(--secondary-200); }
.nx-badges tr:last-child th, .nx-badges tr:last-child td { border-bottom: 0; }
.nx-badges small { display: block; margin-top: 6px; font-size: 14px; line-height: 1.3; color: var(--text-muted); }
.nx-badge { display: inline-block; font-weight: 600; text-transform: uppercase; letter-spacing: 0; line-height: 1.3; padding: 4px 10px; }
.nx-badge--old { border-radius: 999px; }
.nx-badge--old.is-full { background: var(--warning-400); color: #fff; }
.nx-badge--old.is-light { background: #fffdf5; color: var(--warning-400); }
.nx-badge--new { border-radius: var(--radius-4); }
.nx-badge--new.is-full { background: var(--warning-400); color: var(--gray-900); }
.nx-badge--new.is-light { background: var(--warning-50); color: var(--warning-800); }
.nx-badge.is-big { font-size: 14px; }
.nx-badge--old.is-big { font-size: 13.1px; }
.nx-badge--old.is-small { font-size: 9.75px; padding: 3px 8px; }
.nx-badge--new.is-small { font-size: 12px; padding: 2px 8px; }

@media (prefers-reduced-motion: reduce) { .nxb { transition: none; } }


/* Badges en celular: cada variante pasa a un bloque con las dos versiones lado a lado */
@media (max-width: 639px) {
  .nx-badges, .nx-badges tbody { display: block; }
  .nx-badges thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .nx-badges tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; padding: 16px 0; border-bottom: 1px solid var(--secondary-200); }
  .nx-badges tr:last-child { border-bottom: 0; }
  .nx-badges tbody th { grid-column: 1 / -1; padding: 0; border: 0; }
  .nx-badges td { padding: 0; border: 0; }
  .nx-badges td::before { content: attr(data-label); display: block; margin-bottom: 6px; font-size: 12px; line-height: 1.5; font-weight: 500; text-transform: uppercase; color: var(--text-muted); }
}

/* ==========================================================================
   Estructura de la página del caso
   - Blanco = narración. Celeste ("stage") = evidencia. Banda oscura = lo clave.
   - Índice fijo con la sección actual resaltada.
   ========================================================================== */

/* Los enlaces internos tienen que quedar debajo del header y del índice fijos */
html { scroll-padding-top: calc(var(--header-h) + 49px); }

/* ---------- Índice fijo ---------- */
.case-nav {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  background: var(--white);
  border-bottom: 1px solid var(--border-soft);
}
.case-nav__list {
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.case-nav__list::-webkit-scrollbar { display: none; }
.case-nav a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0 10px;
  border-bottom: 2px solid transparent;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
}
.case-nav a:hover { color: var(--gray-900); }
.case-nav a[aria-current="location"] { color: var(--primary-500); border-bottom-color: var(--primary-500); }
.case-nav__n {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--secondary-100);
  font-size: 12px;
  font-weight: 600;
  color: var(--secondary-700);
}
.case-nav a[aria-current="location"] .case-nav__n { background: var(--primary-500); color: var(--white); }

/* ---------- Encabezado de cada hallazgo ---------- */
.case-eyebrow {
  font-size: 14px;
  line-height: 1.57;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--link-color);
}
.case-intro { display: flex; flex-direction: column; gap: 24px; }
.case-intro__head { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
@media (min-width: 1024px) {
  .case-intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: start; }
}

/* ---------- Escenario de evidencia ---------- */
.stage {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-inline: calc(-1 * var(--gutter));
  padding: 16px var(--gutter);
  background: var(--primary-50);
  background: color-mix(in srgb, var(--primary-50) 40%, var(--white));
}
@media (min-width: 768px) {
  .stage { gap: 24px; margin-inline: 0; padding: 24px; border-radius: 24px; }
}
@media (min-width: 1024px) {
  .stage { padding: 32px; }
}
.stage .case-media { aspect-ratio: 16 / 6; width: 100%; }
@media (max-width: 767px) { .stage .case-media { aspect-ratio: 328 / 200; } }
.stage .case-gallery { gap: 16px; }
@media (min-width: 1024px) { .stage .case-gallery { gap: 24px; } }

/* ---------- Banda oscura ---------- */
.section--dark { background: var(--primary-800); color: var(--secondary-100); }
.section--dark .case-h2, .section--dark strong { color: var(--white); }
.section--dark .case-note { color: var(--secondary-300); }
.section--dark .stat { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.18); }
.section--dark .stat__num { color: var(--primary-200); }
.section--dark .stat__title { color: var(--white); }
.section--dark .stat__text { color: var(--secondary-100); }
.section--dark .stat__link { color: var(--primary-200); }
.section--dark .stat__link:active { color: var(--primary-100); }
.section--dark .process__label { color: var(--white); }
.section--dark .process__row p { color: var(--secondary-100); }

/* ==========================================================================
   Menos recuadros: dentro del escenario celeste los bloques no llevan tarjeta
   propia, se separan con una línea. La tarjeta blanca queda solo para las
   muestras que necesitan una superficie (roles de color, radios).
   ========================================================================== */
.stage .nx-card {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}
.stage > .nx-card + .nx-card, .stage > .nx-card + .nx-pair, .stage > .nx-pair + .nx-card { padding-top: 32px; border-top: 1px solid rgba(7, 78, 155, 0.16); }
@media (min-width: 768px) {
  .stage > .nx-card + .nx-card, .stage > .nx-card + .nx-pair, .stage > .nx-pair + .nx-card { padding-top: 40px; }
  .stage { gap: 40px; }
}
.stage .nx-pair { gap: 32px; }
@media (min-width: 1024px) {
  .stage .nx-pair > .nx-card + .nx-card { padding-left: 32px; border-left: 1px solid rgba(7, 78, 155, 0.16); }
}
@media (max-width: 1023px) {
  .stage .nx-pair > .nx-card + .nx-card { padding-top: 32px; border-top: 1px solid rgba(7, 78, 155, 0.16); }
}
.stage .nx-panel { background: var(--white); }
.stage .nx-role { border-color: transparent; }

/* Cifras sobre la banda oscura: columnas abiertas, sin recuadro */
.section--dark .stats { gap: 32px 32px; }
.section--dark .stat { padding: 20px 0 0; background: none; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.35); border-radius: 0; }

/* ---------- Radios: escala por rol, con vista Hoy / Propuesta ---------- */
.nx-rad { --r-s: 4px; --r-c: 8px; --r-m: 12px; --r-l: 16px; --r-x: 24px; min-width: 0; margin: 0; padding: 0; border: 0; }
.nx-rad__in--old:checked ~ .nx-rad__cols { --r-s: 4px; --r-c: 4px; --r-m: 4px; --r-l: 4px; --r-x: 4px; }
.nx-rad__switch { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin-bottom: 24px; background: var(--white); border: 1px solid rgba(7, 78, 155, 0.16); border-radius: var(--radius-12); }
.nx-rad__switch label { display: flex; flex-direction: column; gap: 0; min-width: 132px; padding: 8px 16px; border-radius: var(--radius-8); cursor: pointer; font-size: 15px; line-height: 1.3; font-weight: 600; color: var(--gray-900); }
.nx-rad__switch label span { font-size: 13px; font-weight: 400; color: var(--text-muted); }
.nx-rad__switch label:hover { background: var(--primary-50, #e8f0fb); }
.nx-rad__in--new:checked ~ .nx-rad__switch label[for="rad-new"], .nx-rad__in--old:checked ~ .nx-rad__switch label[for="rad-old"] { background: var(--primary-500); color: var(--white); }
.nx-rad__in--new:checked ~ .nx-rad__switch label[for="rad-new"] span, .nx-rad__in--old:checked ~ .nx-rad__switch label[for="rad-old"] span { color: rgba(255, 255, 255, 0.85); }
.nx-rad__in:focus-visible ~ .nx-rad__switch label[for="rad-new"] { outline: 3px solid var(--primary-200); outline-offset: 2px; }
.nx-rad__in--old:focus-visible ~ .nx-rad__switch label[for="rad-old"] { outline: 3px solid var(--primary-200); outline-offset: 2px; }
.nx-rad__in--new:focus-visible ~ .nx-rad__switch label[for="rad-old"] { outline: 0; }
.nx-rad__cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px 24px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .nx-rad__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .nx-rad__cols { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px 20px; } }
.nx-rad__col { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding-top: 16px; border-top: 1px solid rgba(7, 78, 155, 0.16); }
.nx-rad__corner { display: block; width: 64px; height: 64px; margin-bottom: 8px; border-top: 3px solid var(--primary-500); border-left: 3px solid var(--primary-500); border-top-left-radius: var(--r); transition: border-top-left-radius 0.3s ease; }
.nx-rad__role { margin: 0; font-size: 16px; line-height: 1.3; font-weight: 600; color: var(--gray-900); }
.nx-rad__val { margin: 0; font-size: 14px; line-height: 1.4; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.nx-rad__v--old { display: none; }
.nx-rad__in--old:checked ~ .nx-rad__cols .nx-rad__v--new { display: none; }
.nx-rad__in--old:checked ~ .nx-rad__cols .nx-rad__v--old { display: inline; }
.nx-rad__specs { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 8px 0; min-width: 0; }
.nx-rad__uses { margin: 0; font-size: 14px; line-height: 1.5; color: var(--body-color); }
.nx-rad__foot { margin: 24px 0 0; }
.nx-rad__specs > *, .nx-rad__specs span { transition: border-radius 0.3s ease; }
.nx-rad__badge { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; background: var(--success-50); color: var(--success-700); border-radius: var(--r-s); font-size: 12px; line-height: 1; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.nx-rad__tip { padding: 4px 8px; background: var(--secondary-900, #212529); color: var(--white); border-radius: var(--r-s); font-size: 14px; line-height: 22px; }
.nx-rad__check { display: grid; place-items: center; width: 20px; height: 20px; background: var(--primary-500); border-radius: var(--r-s); }
.nx-rad__btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px; border: 1px solid transparent; border-radius: var(--r-c); font-size: 14px; line-height: 1; font-weight: 600; }
.nx-rad__btn--solid { background: var(--primary-500); color: var(--white); }
.nx-rad__btn--outline { background: var(--white); border-color: var(--primary-500); color: var(--primary-500); }
.nx-rad__alert { padding: 12px 14px; background: var(--primary-50, #e8f0fb); border: 1px solid var(--primary-200); border-radius: var(--r-c); font-size: 14px; line-height: 1.4; color: var(--gray-900); }
.nx-rad__input { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.nx-rad__input small { font-size: 13px; color: var(--text-muted); }
.nx-rad__input > span { padding: 10px 12px; background: var(--white); border: 1px solid var(--secondary-300); border-radius: var(--r-m); font-size: 14px; color: var(--gray-900); }
.nx-rad__card { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 14px; background: var(--white); border: 1px solid var(--secondary-200, #dee2e6); border-radius: var(--r-m); box-sizing: border-box; }
.nx-rad__card strong { font-size: 15px; color: var(--gray-900); }
.nx-rad__card span { font-size: 13px; color: var(--text-muted); }
.nx-rad__svc { display: flex; flex-direction: column; gap: 12px; width: 100%; padding: 14px; background: var(--white); border: 1px solid var(--secondary-200, #dee2e6); border-radius: var(--r-l); box-sizing: border-box; }
.nx-rad__svc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nx-rad__svc-head strong { font-size: 15px; color: var(--gray-900); }
.nx-rad__svc-line { font-size: 13px; color: var(--text-muted); }
.nx-rad__promo { display: inline-flex; align-items: center; padding: 6px 14px; background: var(--brand-50); border-radius: var(--r-x); font-size: 12px; line-height: 18px; font-weight: 600; color: var(--gray-900); }
@media (prefers-reduced-motion: reduce) { .nx-rad__corner, .nx-rad__specs > *, .nx-rad__specs span { transition: none; } }
@media (min-width: 900px) {
  .nx-card--wide .nx-card__head--stack { flex-direction: column; align-items: flex-start; gap: 4px; }
  .nx-card--wide .nx-card__head--stack .nx-card__note { max-width: 78ch; text-align: left; }
}
.nx-rad__foot { text-align: left; }
.nx-rad__promo { white-space: nowrap; }
.nx-card--wide .nx-rad__foot { max-width: 78ch; text-align: left; }
.nx-rad__promo { gap: 4px; }
.nx-mix__chip--sm { width: 18px; height: 22px; }
.nx-mix__chipbox { flex-wrap: wrap; }
.nx-rad { --r-b: 4px; }
.nx-rad__in--old:checked ~ .nx-rad__cols { --r-b: 8px; --r-x: 999px; }
.nx-rad__badge { border-radius: var(--r-b); }

/* ---------- Botones y badges: especímenes del catálogo ---------- */
.nxk, .nxd, .nxt { --primary-50:#e6eff9;--primary-100:#cedff3;--primary-200:#9dc0e7;--primary-300:#6ba0da;--primary-400:#3a81ce;--primary-500:#0961c2;--primary-600:#074e9b;--primary-700:#053a74;--primary-800:#04274e;--primary-900:#021327;--primary-950:#010c17;--secondary-50:#f0f1f2;--secondary-100:#e2e3e5;--secondary-200:#c4c8cb;--secondary-300:#a7acb1;--secondary-400:#899197;--secondary-500:#6c757d;--secondary-600:#565e64;--secondary-700:#41464b;--secondary-800:#2b2f32;--secondary-900:#161719;--secondary-950:#0d0e0f;--brand-50:#f7ece6;--brand-100:#eed8cc;--brand-200:#deb299;--brand-300:#cd8b66;--brand-400:#bd6533;--brand-500:#ac3e00;--brand-600:#8a3200;--brand-700:#672500;--brand-800:#451900;--brand-900:#220c00;--brand-950:#150700;--info-50:#e7f1f4;--info-100:#cfe3e9;--info-200:#9fc7d3;--info-300:#6eacbc;--info-400:#3e90a6;--info-500:#0e7490;--info-600:#0b5d73;--info-700:#084656;--info-800:#062e3a;--info-900:#03171d;--info-950:#020e11;--success-50:#eaf3e6;--success-100:#d5e7cc;--success-200:#abce99;--success-300:#81b666;--success-400:#579d33;--success-500:#2d8500;--success-600:#246a00;--success-700:#1b5000;--success-800:#123500;--success-900:#091b00;--success-950:#051000;--warning-50:#fff8e6;--warning-100:#fff3cd;--warning-200:#ffe69c;--warning-300:#ffd44d;--warning-400:#ffc107;--warning-500:#e69800;--warning-600:#c46c00;--warning-700:#9b4600;--warning-800:#6b2c00;--warning-900:#4a1c00;--warning-950:#2a1000;--danger-50:#f7e6e8;--danger-100:#efccd0;--danger-200:#de99a1;--danger-300:#ce6672;--danger-400:#bd3343;--danger-500:#ad0014;--danger-600:#8a0010;--danger-700:#68000c;--danger-800:#450008;--danger-900:#230004;--danger-950:#150002; --btn-sm: 32px; --btn-md: 40px; --btn-lg: 48px; }
.nxk .sr-only, .nxd .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nxk-ic { width: 20px; height: 20px; flex: none; fill: currentColor; }
.nxk-btn { --k-50: var(--primary-50); --k-100: var(--primary-100); --k-500: var(--primary-500); --k-600: var(--primary-600); --k-700: var(--primary-700); --ring: rgba(9, 97, 194, .4);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; height: var(--btn-md); padding: 0 16px; border: 1px solid transparent; border-radius: 8px;
  font: 400 14px/22px "Nunito", system-ui, sans-serif; white-space: nowrap; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; }
.nxk-btn.is-focus { box-shadow: 0 0 0 3px var(--ring); }
.nxk-btn.is-disabled { opacity: .6; cursor: not-allowed; }
.nxk-btn--sm { height: var(--btn-sm); padding: 0 12px; }
.nxk-btn--lg { height: var(--btn-lg); padding: 0 24px; font-size: 16px; line-height: 24px; }
.nxk-btn--secondary { --k-50: var(--secondary-50); --k-100: var(--secondary-100); --k-500: var(--secondary-500); --k-600: var(--secondary-600); --k-700: var(--secondary-600); --ring: rgba(108, 117, 125, .4); }
.nxk-btn--brand { --k-50: var(--brand-50); --k-100: var(--brand-100); --k-500: var(--brand-500); --k-600: var(--brand-600); --k-700: var(--brand-700); --ring: rgba(172, 62, 0, .4); }
.nxk-btn--danger { --k-50: var(--danger-50); --k-100: var(--danger-100); --k-500: var(--danger-500); --k-600: var(--danger-600); --k-700: var(--danger-700); --ring: rgba(173, 0, 20, .4); }
.nxk-btn--solid { background: var(--k-500); color: #fff; }
.nxk-btn--solid:is(:hover, .is-hover) { background: var(--k-600); }
.nxk-btn--solid:is(:active, .is-active) { background: var(--k-700); }
.nxk-btn--solid.nxk-btn--secondary { background: var(--secondary-100); color: var(--secondary-900); }
.nxk-btn--solid.nxk-btn--secondary:is(:hover, .is-hover) { background: var(--secondary-200); }
.nxk-btn--solid.nxk-btn--secondary:is(:active, .is-active) { background: var(--secondary-300); }
.nxk-btn--outline { background: transparent; border-color: var(--k-500); color: var(--k-600); }
.nxk-btn--outline:is(:hover, .is-hover) { background: var(--k-500); color: #fff; }
.nxk-btn--outline:is(:active, .is-active) { background: var(--k-600); border-color: var(--k-600); color: #fff; }
.nxk-btn--ghost { background: transparent; color: var(--k-600); }
.nxk-btn--ghost:is(:hover, .is-hover) { background: var(--k-50); }
.nxk-btn--ghost:is(:active, .is-active) { background: var(--k-100); }
.nxk-btn--icon { padding: 0; width: var(--btn-md); }
.nxk-btn--icon.nxk-btn--sm { width: var(--btn-sm); }
.nxk-btn--icon.nxk-btn--lg { width: var(--btn-lg); }
.nxk-btn--icon.nxk-btn--sm .nxk-ic { width: 16px; height: 16px; }
.nxk-btn--icon.nxk-btn--lg .nxk-ic { width: 24px; height: 24px; }
.nxk [data-nxk-btn] { transition: none; }

.nxk__lab { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 900px) { .nxk__lab { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "controls stage" "controls read"; gap: 24px 40px; align-items: start; }
  .nxk__stage { grid-area: stage; } .nxk__controls { grid-area: controls; } .nxk__read { grid-area: read; } }
.nxk__surface { display: grid; place-items: center; min-height: 176px; padding: 24px; background: var(--white); border: 1px solid rgba(7, 78, 155, 0.16); border-radius: 12px; }
.nxk__controls { display: flex; flex-direction: column; gap: 16px; }
.nxk__group { min-width: 0; margin: 0; padding: 0; border: 0; }
.nxk__group legend { padding: 0; margin-bottom: 6px; font-size: 12px; line-height: 1.4; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--link-color, #2b4c9e); }
.nxk__opts { display: flex; flex-wrap: wrap; gap: 6px; }
.nxk__opts label { cursor: pointer; }
.nxk__opts label span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; background: var(--white); border: 1px solid rgba(7, 78, 155, 0.24); border-radius: 8px; font-size: 14px; line-height: 1.2; color: var(--gray-900, #212529); }
.nxk__opts label:hover span { background: var(--primary-50); }
.nxk__opts input:checked + span { background: var(--primary-500); border-color: var(--primary-500); color: #fff; font-weight: 600; }
.nxk__opts input:focus-visible + span { outline: 3px solid rgba(9, 97, 194, .4); outline-offset: 2px; }
.nxk__opts input:disabled + span { opacity: .45; cursor: not-allowed; }
.nxk__read { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 0 20px; margin: 0; font-size: 14px; line-height: 1.5; }
.nxk__read dt { padding: 8px 0; color: var(--text-muted); border-top: 1px solid rgba(7, 78, 155, 0.14); }
.nxk__read dd { margin: 0; padding: 8px 0; color: var(--gray-900, #212529); border-top: 1px solid rgba(7, 78, 155, 0.14); font-variant-numeric: tabular-nums; }
.nxk__read code { font-size: 0.92em; }
.nxk__read .nxk__sw { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
.nxk__read b { font-weight: 600; }
.nxk__sub { margin-top: 40px; padding-top: 28px; border-top: 1px solid rgba(7, 78, 155, 0.16); }
.nxk__subnote, .nxd__subnote { margin: 4px 0 0; font-size: 14px; line-height: 1.57; color: var(--text-muted); max-width: 78ch; }
.nxk__fam { display: flex; flex-direction: column; gap: 16px; margin: 20px 0 0; padding: 0; list-style: none; }
.nxk__famrow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-items: center; }
@media (min-width: 900px) { .nxk__famrow { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; } }
.nxk__famlabel { margin: 0; font-size: 16px; font-weight: 600; color: var(--gray-900, #212529); }
.nxk__famgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 640px; }
@media (min-width: 640px) { .nxk__famgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.nxk__famgrid .nxk-btn { width: 100%; padding: 0 8px; }
.nxk__more { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px 32px; margin: 20px 0 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .nxk__more { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .nxk__more { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.nxk__more li { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.nxk__spec { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-height: 56px; }
.nxk__capt { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-muted); }
.nxk__capt strong { display: block; font-size: 16px; line-height: 1.3; color: var(--gray-900, #212529); }
.nxk-close { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; color: #000; opacity: .5; cursor: pointer; transition: opacity .15s ease; }
.nxk-close .nxk-ic { width: 16px; height: 16px; }
.nxk-close:hover, .nxk-close--on { opacity: .75; }
.nxk-seg, .nxk-grp { display: inline-flex; max-width: 100%; }
.nxk-seg > span, .nxk-grp > span { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 14px; border: 1px solid var(--primary-500); border-left-width: 0; color: var(--primary-600); font-size: 14px; background: transparent; cursor: pointer; transition: background-color .15s ease; }
.nxk-seg > span:first-child, .nxk-grp > span:first-child { border-left-width: 1px; border-radius: 8px 0 0 8px; }
.nxk-seg > span:last-child, .nxk-grp > span:last-child { border-radius: 0 8px 8px 0; }
.nxk-seg > span:hover { background: var(--primary-50); }
.nxk-seg > span.is-on { background: var(--primary-500); color: #fff; }
.nxk-grp > span:hover { background: var(--primary-50); }
.nxk-split { display: inline-flex; }
.nxk-split > .nxk-btn { border-radius: 8px 0 0 8px; }
.nxk-split__chev { display: grid; place-items: center; width: 40px; height: 40px; background: var(--primary-500); color: #fff; border-left: 1.5px solid var(--primary-700); border-radius: 0 8px 8px 0; cursor: pointer; }
.nxk-split__chev:hover { background: var(--primary-600); }

.nxd__sub { margin-top: 40px; }
.nxd__sub:first-of-type { margin-top: 8px; }
.nxd__ba { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin: 16px 0 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .nxd__ba { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .nxd__ba { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 20px; } }
.nxd__ba-item { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding-top: 14px; border-top: 1px solid rgba(7, 78, 155, 0.16); }
.nxd__ba-name { margin: 0; font-size: 16px; font-weight: 600; color: var(--gray-900, #212529); }
.nxd__ba-line { display: grid; grid-template-columns: 52px auto; align-items: center; gap: 2px 10px; }
.nxd__ba-line small { grid-column: 2; font-size: 13px; line-height: 1.3; color: var(--text-muted); }
.nxd__ba-line .nx-badge { justify-self: start; }
.nxd__tag { grid-row: 1 / span 2; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--link-color, #2b4c9e); }
.nxd__fact { margin: 20px 0 0; font-size: 15px; line-height: 1.6; color: var(--body-color); max-width: 78ch; }
.nxd__fact code { font-size: 0.92em; }
.nxd__list { display: flex; flex-direction: column; margin: 16px 0 0; padding: 0; list-style: none; max-width: 760px; }
.nxd__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px 0; border-top: 1px solid rgba(7, 78, 155, 0.14); }
@media (min-width: 640px) { .nxd__row { grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: center; } }
.nxd__name { margin: 0; font-size: 16px; font-weight: 600; color: var(--gray-900, #212529); }
.nxd__cell { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.nxd__cell::before { content: attr(data-label); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--link-color, #2b4c9e); }
@media (min-width: 640px) { .nxd__cell::before { display: none; } }
.nxd__pair { display: flex; align-items: center; gap: 10px; }
.nxd__cr { font-size: 13px; line-height: 1.3; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.nxd__cr b { font-weight: 600; color: var(--gray-900, #212529); }
.nxd__counters { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.nxd-badge { display: inline-flex; align-items: center; justify-content: center; height: 18px; padding: 0 6px; border-radius: 4px; background: var(--b-bg); color: var(--b-fg); font-family: "Nunito", system-ui, sans-serif; font-size: 12px; font-weight: 600; line-height: 17px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.nxd-badge--lg { height: 24px; padding: 0 8px; font-size: 14px; line-height: 18px; letter-spacing: 0; }
.nxd-badge--primary { --b-bg: var(--primary-500); --b-fg: #fff; }
.nxd-badge--brand { --b-bg: var(--brand-500); --b-fg: #fff; }
.nxd-badge--secondary { --b-bg: var(--secondary-500); --b-fg: #fff; }
.nxd-badge--success { --b-bg: var(--success-500); --b-fg: #fff; }
.nxd-badge--warning { --b-bg: var(--warning-400); --b-fg: var(--secondary-900); }
.nxd-badge--danger { --b-bg: var(--danger-500); --b-fg: #fff; }
.nxd-badge--info { --b-bg: var(--info-500); --b-fg: #fff; }
.nxd-badge--light.nxd-badge--primary { --b-bg: var(--primary-50); --b-fg: var(--primary-500); }
.nxd-badge--light.nxd-badge--brand { --b-bg: var(--brand-50); --b-fg: var(--brand-500); }
.nxd-badge--light.nxd-badge--secondary { --b-bg: var(--secondary-50); --b-fg: var(--secondary-600); }
.nxd-badge--light.nxd-badge--success { --b-bg: var(--success-50); --b-fg: var(--success-600); }
.nxd-badge--light.nxd-badge--warning { --b-bg: var(--warning-50); --b-fg: var(--warning-700); }
.nxd-badge--light.nxd-badge--danger { --b-bg: var(--danger-50); --b-fg: var(--danger-500); }
.nxd-badge--light.nxd-badge--info { --b-bg: var(--info-50); --b-fg: var(--info-500); }
.nxd-badge--count { width: 18px; min-width: 18px; padding: 0; border-radius: 20px; letter-spacing: 0; }
.nxd-badge--count.nxd-badge--lg { width: 24px; min-width: 24px; border-radius: 26px; }
@media (prefers-reduced-motion: reduce) { .nxk-btn, .nxk-close, .nxk-seg > span, .nxk-grp > span { transition: none; } }
.nxk__famnote { display: block; font-size: 13px; font-weight: 400; line-height: 1.3; color: var(--text-muted); }
.nxk-btn--sm .nxk-ic { width: 16px; height: 16px; }
.nxk-btn--lg .nxk-ic { width: 24px; height: 24px; }

/* ---------- Badges: antes y ahora ---------- */
.nxd__facts { margin-top: 8px; }
.nxo__group { margin: 24px 0 0; font-size: 12px; line-height: 1.4; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--link-color, #2b4c9e); }
.nxo__list { display: flex; flex-direction: column; margin: 8px 0 0; padding: 0; list-style: none; }
.nxo__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 14px 0; border-top: 1px solid rgba(7, 78, 155, 0.14); }
@media (min-width: 760px) { .nxo__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; } }
.nxo__old, .nxo__new { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.nxo__tag { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--link-color, #2b4c9e); }
.nxo__cr { font-size: 13px; line-height: 1.4; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.nxo__cr b { font-weight: 600; color: var(--gray-900, #212529); }
.nxo__cr code { font-size: 0.95em; }
.nxo-badge { display: inline-block; padding: 4.2px 5.5px; border-radius: 8px; background: var(--bg); color: var(--fg); font-family: "Nunito", system-ui, sans-serif; font-size: 9.7px; line-height: 1; font-weight: 600; text-transform: uppercase; white-space: nowrap; }

/* ==========================================================================
   Hallazgo 2 · Tablas (prefijo nxt-)
   - nxt-old: réplica del marcado y los estilos de producción, anonimizada.
   - nxt-x: la tabla del sistema; con menos de 700 px de ancho se vuelve tarjetas.
   ========================================================================== */
@font-face { font-family: "NxOldIcons"; src: url("../fonts/nx-old-icons.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
.nxt-svg { position: absolute; width: 0; height: 0; overflow: hidden; }
.nxt-ic { width: 16px; height: 16px; flex: none; fill: currentColor; }
@media (min-width: 1100px) { .nx-facts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Pareja de celulares */
.nxt-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 32px 40px; align-items: start; }
.nxt-ph { display: flex; flex-direction: column; gap: 12px; min-width: 0; margin: 0; }
.nxt-ph__tag { margin: 0; font-size: 12px; line-height: 1.3; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); text-align: center; }
.nxt-ph__tag--new { color: var(--primary-600); }
.nxt-ph__fit { width: 100%; overflow-x: auto; }
.nxt-phone { width: 360px; margin-inline: auto; border-radius: 20px; overflow: hidden; box-shadow: 0 0 0 1px rgba(7, 78, 155, 0.16); }
.nxt-ph__cap { margin: 0 auto; max-width: 360px; font-size: 14px; line-height: 1.57; color: var(--text-muted); }
.nxt-ph__cap b { font-weight: 600; color: var(--gray-900); }

/* Hoy: réplica de la tabla de producción (fuente Nunito, grises y azul de Bootstrap) */
.nxt-old { padding: 24px 12px; background: #f5f5f6; font: 400 14px/21px "Nunito", system-ui, sans-serif; color: #212529; }
.nxt-old * { box-sizing: border-box; }
.nxt-old__card { padding: 24px; background: #fff; border-radius: 12px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.075); }
.nxt-old__h { margin: 0 0 16px; font-size: 17.5px; line-height: 21px; font-weight: 500; color: #212529; }
.nxt-old__scroll { position: relative; overflow-x: auto; }
.nxt-old__scroll:focus-visible { outline: 2px solid #0961c2; outline-offset: 2px; }
.nxt-old table { width: 100%; margin: 0; border-collapse: collapse; line-height: 18px; }
.nxt-old th { padding: 8px; text-align: left; vertical-align: bottom; font-size: 14px; font-weight: 600; text-transform: uppercase; color: #6c757d; border-bottom: 1px solid #dee2e6; }
.nxt-old td { padding: 8px; vertical-align: middle; font-size: 12px; border-bottom: 1px solid #dee2e6; }
.nxt-old tbody tr:last-child td { border-bottom: 0; }
.nxt-old small { font-size: 0.875em; }
.nxt-old .is-c { text-align: center; }
.nxt-old .is-w { width: 1%; white-space: nowrap; }
.nxt-old .is-nw { white-space: nowrap; }
.nxt-old__cut { display: block; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nxt-old__acts { display: flex; justify-content: flex-end; white-space: nowrap; }
.nxt-old__a { display: block; padding: 0; border: 1px solid transparent; font-size: 14px; line-height: 21px; color: #007bff; }
.nxt-old__a + .nxt-old__a { margin-left: 0; }
.nxt-old__acts .nxt-old__a:first-child { margin-right: 16px; }
.nxt-old__a.is-off { opacity: 0.65; color: #6c757d; }
.nxt-oi { display: inline-block; font-family: "NxOldIcons"; font-weight: 400; font-style: normal; font-size: 18px; line-height: 0.25em; vertical-align: -0.25em; letter-spacing: normal; text-transform: none; white-space: nowrap; direction: ltr; font-feature-settings: "liga"; -webkit-font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; }
.nxt-old__tag { display: inline-block; margin-left: 4px; padding: 4.2px 5.5px; border-radius: 8px; background: #f8f9fa; color: #2d8600; font-size: 9.7px; line-height: 1; font-weight: 600; text-transform: uppercase; vertical-align: baseline; }

/* Propuesta: marco del celular con el sistema */
.nxt-phone--new { display: flex; flex-direction: column; gap: 16px; padding: 16px; background: var(--secondary-50); }
.nxt-new__h { margin: 0; font-size: 18px; line-height: 1.3; font-weight: 600; color: var(--secondary-900); }

/* La tabla del sistema */
.nxt-x { position: relative; container: nxt / inline-size; min-width: 0; font-family: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--secondary-900); }
.nxt-x * { box-sizing: border-box; }
.nxt-tools { display: none; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 14px; line-height: 22px; color: var(--secondary-600); }
.nxt-sel { height: 32px; padding: 0 8px; border: 1px solid var(--secondary-300); border-radius: 12px; background: #fff; color: var(--secondary-900); font: 400 14px/22px "Nunito", system-ui, sans-serif; }
.nxt-sel:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(9, 97, 194, 0.4); }
.nxt-box { background: #fff; border: 1px solid var(--secondary-100); border-radius: 12px; overflow: hidden; }
.nxt-bar { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 8px 12px; border-bottom: 1px solid var(--secondary-100); font-size: 14px; line-height: 22px; color: var(--secondary-600); }
.nxt-bar b { color: var(--secondary-900); font-weight: 600; }
.nxt-scroll { position: relative; overflow-x: auto; }
.nxt-t { width: 100%; min-width: 640px; margin: 0; border-collapse: collapse; background: #fff; font-size: 12px; line-height: 18px; }
.nxt-t th { height: 37px; padding: 8px; text-align: left; white-space: nowrap; font-size: 14px; font-weight: 400; line-height: 22px; text-transform: uppercase; color: var(--secondary-600); }
.nxt-t td { height: 44px; padding: 0 8px; vertical-align: middle; border-bottom: 1px solid var(--secondary-100); color: var(--secondary-900); }
.nxt-t tbody tr:last-child td { border-bottom: 0; }
.nxt-t tbody tr:hover { background: var(--secondary-50); }
.nxt-t tbody tr.is-selected, .nxt-t tbody tr.is-selected:hover { background: var(--brand-50); }
.nxt-t .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.nxt-t .nxt-c-ck, .nxt-t th.nxt-c-ck { width: 34px; padding-right: 0; }
.nxt-sort { display: inline-flex; align-items: center; gap: 6px; padding: 0; background: none; border: 0; border-radius: 4px; color: inherit; font: inherit; line-height: inherit; text-transform: inherit; cursor: pointer; }
.nxt-sort:hover { color: var(--secondary-900); }
.nxt-sort:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(9, 97, 194, 0.4); }
.nxt-sort .nxt-ic { fill: var(--secondary-600); }
.nxt-t th[aria-sort="ascending"] .nxt-ic, .nxt-t th[aria-sort="descending"] .nxt-ic { fill: var(--secondary-900); }
.nxt-ck { position: relative; display: inline-flex; padding: 2px 0; line-height: 0; }
.nxt-ck input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.nxt-ck__box { display: grid; place-items: center; width: 18px; height: 18px; border: 1.5px solid var(--secondary-300); border-radius: 4px; background: #fff; }
.nxt-ck__box .nxt-ic { width: 14px; height: 14px; fill: #fff; opacity: 0; }
.nxt-ck:hover .nxt-ck__box { border-color: var(--secondary-400); }
.nxt-ck input:checked + .nxt-ck__box, .nxt-ck input:indeterminate + .nxt-ck__box { background: var(--primary-500); border-color: var(--primary-500); }
.nxt-ck input:checked + .nxt-ck__box .nxt-ic-on, .nxt-ck input:indeterminate + .nxt-ck__box .nxt-ic-mid { opacity: 1; }
.nxt-ck input:focus-visible + .nxt-ck__box { box-shadow: 0 0 0 3px rgba(9, 97, 194, 0.4); }
.nxt-bdg { display: inline-flex; align-items: center; justify-content: center; height: 18px; padding: 0 6px; border-radius: 4px; background: var(--secondary-50); color: var(--secondary-600); font-size: 12px; line-height: 17px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.nxt-acts { display: flex; justify-content: flex-end; gap: 8px; }
.nxt-acts .nxk-btn { flex: none; }

/* Con menos de 700 px de ancho cada fila pasa a ser una tarjeta */
@container nxt (max-width: 699px) {
  .nxt-tools { display: flex; }
  .nxt-bar { display: none; }
  .nxt-box { background: none; border: 0; border-radius: 0; overflow: visible; }
  .nxt-scroll { overflow: visible; }
  .nxt-t, .nxt-t tbody { display: block; min-width: 0; background: none; }
  .nxt-t thead { display: none; }
  .nxt-t tbody { display: flex; flex-direction: column; gap: 12px; }
  .nxt-t tbody tr, .nxt-t tbody tr:hover, .nxt-t tbody tr.is-selected { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; padding: 16px; background: #fff; border: 1px solid var(--secondary-100); border-radius: 12px; }
  .nxt-t td { display: block; height: auto; padding: 0; border: 0; }
  .nxt-t td.nxt-c-ck { display: none; }
  .nxt-t td.nxt-c-tipo { grid-column: 1; grid-row: 1; }
  .nxt-t td.nxt-c-nombre { grid-column: 2; grid-row: 1; min-width: 0; font-size: 14px; font-weight: 500; line-height: 22px; overflow-wrap: anywhere; }
  .nxt-t td.nxt-c-acts { grid-column: 3; grid-row: 1; }
  .nxt-t td[data-l] { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 12px; text-align: right; overflow-wrap: anywhere; }
  .nxt-t td[data-l]::before { content: attr(data-l); flex: none; text-align: left; color: var(--secondary-600); }
  .nxt-t td[data-l][data-empty] { display: none; }
  .nxt-t td.nxt-c-first { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--secondary-100); }
}

/* Acciones: hoy y con el sistema */
.nxt-act { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 24px 32px; align-items: start; }
.nxt-act__col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.nxt-act__tag { margin: 0; font-size: 12px; line-height: 1.3; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.nxt-act__tag--new { color: var(--primary-600); }
.nxt-act__demo { display: flex; align-items: center; gap: 24px; min-height: 88px; padding: 16px 20px; background: var(--white); border: 1px solid var(--border-soft); border-radius: var(--radius-12); }
.nxt-act__demo--old { font-family: "Nunito", system-ui, sans-serif; }
.nxt-act__demo .nxt-old__a { outline: 1px dashed var(--primary-300); outline-offset: 0; }
.nxt-states { display: flex; flex-wrap: wrap; gap: 16px 20px; }
.nxt-states figure { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; }
.nxt-states figcaption { font-size: 12px; line-height: 1.3; color: var(--text-muted); }
.nxt-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.5; color: var(--gray-900); }
.nxt-list li { position: relative; padding-left: 16px; }
.nxt-list li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--primary-300); }
.nxt-list b { font-weight: 600; }

/* Tamaños del área de toque, a escala */
.nxt-sqs { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px 32px; }
.nxt-sq { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0; }
.nxt-sq__b { display: grid; place-items: center; width: calc(var(--w) * 3px); height: calc(var(--h) * 3px); border-radius: 6px; background: var(--primary-100); color: var(--primary-600); }
.nxt-sq__b svg { width: calc(var(--i) * 3px); height: calc(var(--i) * 3px); fill: currentColor; }
.nxt-sq__b--old { background: var(--secondary-100); color: #007bff; border-radius: 0; }
.nxt-sq__b--min { background: none; border: 1.5px dashed var(--secondary-500); color: var(--secondary-500); }
.nxt-sq figcaption { font-size: 13px; line-height: 1.4; color: var(--text-muted); }
.nxt-sq figcaption b { display: block; font-size: 15px; font-weight: 600; color: var(--gray-900); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Hallazgo 3 · Headers (prefijo nxh-)
   - nxh-old: réplica del marcado y los estilos de producción, anonimizada.
     Los valores salen del CSS compilado de la réplica (Bootstrap 5.3.7 con las
     variables del producto); los íconos son los contornos reales de Material Icons.
   - nxh-live: la pantalla del prototipo del sistema, en un iframe.
   ========================================================================== */
.nxh-ic { display: block; flex: none; width: 1em; height: 1em; fill: currentColor; }
.nxh-trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 32px 24px; align-items: start; }
.nxh-stack { display: flex; flex-direction: column; gap: 32px; }
.nxh-stack .nxt-ph__cap, .nxh-wide .nxt-ph__cap { max-width: 78ch; margin-inline: 0; }
.nxh-stack .nxt-ph__tag, .nxh-wide .nxt-ph__tag { text-align: left; }
.nxh-tall { min-height: 424px; }
.nx-card > .nxh-wide { margin-top: 20px; }
.nxh-stack .nxt-ph__fit { overflow: hidden; }

/* Marco */
.nxh-old { font: 400 14px/21px "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif; color: #212529; background: #f5f5f6; }
.nxh-old * { box-sizing: border-box; }
.nxh-d { width: 100%; min-width: 760px; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px rgba(7, 78, 155, 0.16); }
.nxh-old__body { padding: 12px 16px; font-size: 12px; line-height: 18px; color: #495057; }
.nxh-old__body--tall { min-height: 64px; }
.nxh-brand { font-weight: 800; font-size: 24px; line-height: 1; letter-spacing: -0.02em; color: #fff; }
.nxh-ph { display: flex; align-items: center; justify-content: center; flex: none; background: #e9ecef; border: 1px dashed #adb5bd; border-radius: 4px; color: #495057; font-size: 10px; line-height: 15px; }

/* 1 · Barra naranja mobile (.nbx-sidebar-top) */
.nxh-top { position: relative; display: flex; align-items: center; height: 50px; background: #ff8431; color: #fff; }
.nxh-top .nxh-brand { margin-left: 16px; }
.nxh-top__a { position: relative; display: flex; align-items: center; align-self: stretch; padding: 0 8px; color: #f8f9fa; font-size: 28px; }
.nxh-top__a--bell { margin-left: auto; }
.nxh-top__n { position: absolute; top: 9px; left: 70%; transform: translateX(-50%); min-width: 18px; height: 18px; padding: 3px; border-radius: 800px; background: #ff8431; color: #fff; font-size: 12px; font-weight: 600; line-height: 12px; text-align: center; }

/* 2 · Barra oscura (nbx-top-navbar) */
.nxh-dark { display: flex; align-items: center; height: 50px; background: #212529; color: #fff; }
.nxh-dark__brand { display: flex; align-items: center; justify-content: center; flex: none; width: 220px; height: 50px; margin-right: 16px; background: #ff8431; }
.nxh-dark--m .nxh-dark__brand { width: 50px; }
.nxh-dark__l { display: flex; align-items: center; padding: 8px 0; color: #fff; font-size: 14px; }
.nxh-dark__l .nxh-ic { font-size: 18px; }
.nxh-dark__l span { margin-left: 8px; }
.nxh-dark__r { margin-left: auto; margin-right: 16px; }

/* 3 · Breadcrumb (nbx-breadcrumb) */
.nxh-bc { display: flex; align-items: center; height: 50px; padding: 0 16px; background: #fff; border-bottom: 1px solid #dee2e6; }
.nxh-bc ol { display: flex; margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 19px; }
.nxh-bc li { display: flex; }
.nxh-bc li + li { padding-left: 8px; }
.nxh-bc li + li::before { content: "/"; padding-right: 8px; color: #6c757d; }
.nxh-bc a, .nxh-bc .nxh-lnk { color: #007bff; }
.nxh-bc__r { display: flex; align-items: center; max-width: 400px; margin-left: auto; }
.nxh-bc__r strong { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.nxh-bc__r > span { margin: 0 4px; }
.nxh-bc__r small { padding-top: 2px; font-size: 0.875em; }
.nxh-bc--m ol { font-size: 12px; }
.nxh-bc--m .nxh-bc__r { display: none; }

/* Botones del producto */
.nxh-btn { display: inline-flex; align-items: center; padding: 9px 20px; border: 1px solid transparent; border-radius: 8px; font: inherit; line-height: 21px; white-space: nowrap; }
.nxh-btn--link { color: #007bff; }
.nxh-btn--out { color: #6c757d; border-color: #6c757d; }
.nxh-btn--ok { background: #2d8600; border-color: #2d8600; color: #fff; }
.nxh-btn .nxh-ic { font-size: 18px; }
.nxh-btn--ok .nxh-ic { font-size: 24px; margin-left: 4px; }
.nxh-btn--link span { margin-left: 4px; }
.nxh-btn--link .nxh-ic + span { margin-left: 4px; }

/* 4 · Header de lista (nbx-list-header) */
.nxh-lh { padding: 16px; background: #fff; border-bottom: 1px solid #dee2e6; }
.nxh-lh__row { display: flex; align-items: center; }
.nxh-lh__row .nxh-ph { width: 40px; height: 40px; margin-right: 16px; }
.nxh-lh h4 { margin: 0; font-size: 20.9px; line-height: 1.2; font-weight: 500; }
.nxh-lh__acts { display: flex; align-items: center; margin-left: auto; }
.nxh-lh__acts .nxh-btn--out { margin-left: 8px; }
.nxh-lh--m h4 { font-size: 20.4px; }
.nxh-lh--m .nxh-ph, .nxh-lh--m .nxh-btn--link { display: none; }

/* 5 · Header de Cloud (cloud-iaas-header) */
.nxh-cl__top { display: flex; align-items: center; padding: 24px 16px; }
.nxh-cl__top .nxh-ph { width: 140px; height: 34px; }
.nxh-cl__menu { margin-left: auto; padding: 9px 0 9px 12px; color: #007bff; text-decoration: underline; }
.nxh-cl__menu::after { content: ""; display: inline-block; margin-left: 4px; vertical-align: 0.2em; border-top: 0.3em solid; border-right: 0.3em solid transparent; border-left: 0.3em solid transparent; }
.nxh-cl__row { display: flex; align-items: flex-start; padding: 0 16px 16px; }
.nxh-tabs { display: flex; flex: 1; min-width: 0; margin: 0 16px 0 0; padding: 0; list-style: none; border-bottom: 1px solid #dee2e6; box-shadow: inset 0 -2px 0 #ced4da; }
.nxh-tabs li { margin-bottom: -1px; padding: 8px 16px; font-weight: 600; }
.nxh-tabs li.is-on { color: #ff8431; box-shadow: inset 0 -2px 0 #ff8431; }

/* Pantalla de servicio en mobile, hoy (tpl "configurar") */
.nxh-svc { padding: 16px; }
.nxh-svc__card { display: flex; align-items: center; margin-bottom: 16px; padding: 16px 0 16px 24px; background: #fff; border-radius: 12px; }
.nxh-svc__name { display: flex; flex: 1; justify-content: space-between; min-width: 0; }
.nxh-svc__name strong { font-weight: 600; }
.nxh-svc__name small { font-size: 0.875em; }
.nxh-svc__more { padding: 0 16px; color: #007bff; font-size: 24px; }
.nxh-sh { margin-bottom: 8px; }
.nxh-sh__t { display: flex; align-items: center; margin-bottom: 4px; }
.nxh-sh__t .nxh-ic { margin-right: 8px; color: #ff8431; font-size: 28px; }
.nxh-sh h4 { margin: 0; font-size: 20.4px; line-height: 1.2; font-weight: 500; }
.nxh-sh p { margin: 0; }
.nxh-svc__box { margin-top: 16px; padding: 24px; background: #fff; border-radius: 12px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.075); }

/* Prototipo del sistema (iframe) */
.nxh-live { width: 360px; height: 424px; margin-inline: auto; border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(7, 78, 155, 0.16); }
.nxh-live iframe { display: block; width: 100%; height: 100%; border: 0; }
.nxh-shot { position: relative; width: 100%; height: calc(var(--h, 520) * var(--s, 0.84) * 1px); overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(7, 78, 155, 0.16); }
.nxh-shot iframe { position: absolute; top: 0; left: 0; width: 1280px; height: calc(var(--h, 520) * 1px); border: 0; transform-origin: 0 0; transform: scale(var(--s, 0.84)); }

/* De siete piezas a un header */
.nxh-map { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; border-top: 1px solid rgba(7, 78, 155, 0.16); }
.nxh-map > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 14px 0; border-bottom: 1px solid rgba(7, 78, 155, 0.16); }
.nxh-map dt { font-size: 15px; line-height: 1.4; font-weight: 600; color: var(--gray-900); }
.nxh-map dd { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.nxh-map dd b { font-weight: 600; color: var(--gray-900); }
.nxh-map small { display: block; font-size: 12px; line-height: 1.4; font-weight: 400; color: var(--text-muted); }
@media (min-width: 720px) {
  .nxh-map > div { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; }
}

/* ==========================================================================
   Hallazgo 5 · Cards, "elegido" y listas (prefijo nxc-)
   - Las piezas de "hoy" son páginas de réplica (casos/nubix-hoy) con el CSS compilado
     del producto, recortado a lo que se usa; se incrustan en iframes.
   - El "después" son pantallas del prototipo (listado, estados de tarjetas), también en iframes.
   ========================================================================== */
.nxc-phone { width: 360px; height: calc(var(--h, 560) * 1px); margin-inline: auto; border-radius: 20px; overflow: hidden; background: #f5f5f6; box-shadow: 0 0 0 1px rgba(7, 78, 155, 0.16); }
.nxc-phone iframe { display: block; width: 100%; height: calc((var(--y, 0) + var(--h, 560)) * 1px); margin-top: calc(var(--y, 0) * -1px); border: 0; }
.nxc-phone--new { background: #fff; }
.nxc-shot { position: relative; width: 100%; height: calc(var(--h, 520) * var(--s, 0.8) * 1px); overflow: hidden; border-radius: 12px; background: #f5f5f6; box-shadow: 0 0 0 1px rgba(7, 78, 155, 0.16); }
.nxc-shot--new { background: #fff; }
.nxc-shot iframe { position: absolute; top: 0; left: 0; width: 1280px; height: calc((var(--y, 0) + var(--h, 520)) * 1px); border: 0; transform-origin: 0 0; transform: scale(var(--s, 0.8)) translateY(calc(var(--y, 0) * -1px)); }
.nxc-auto { width: 100%; border-radius: 12px; overflow: hidden; background: #f5f5f6; box-shadow: 0 0 0 1px rgba(7, 78, 155, 0.16); }
.nxc-auto--new { background: #fff; }
.nxc-auto iframe { display: block; width: 100%; height: var(--ah, 480px); border: 0; }
.nxc-pair-sm { align-items: start; }
.nxc-wide { display: flex; flex-direction: column; gap: 12px; margin: 0; min-width: 0; }
.nxc-wide + .nxc-wide, .nx-card > .nxc-wide, .nx-card > .nxt-pair + .nxc-wide, .nx-card > .nxt-pair + .nxt-pair { margin-top: 28px; }
.nxc-wide .nxt-ph__tag { text-align: left; }
.nxc-wide .nxt-ph__cap { max-width: 78ch; margin-inline: 0; }
.nxc-stackshots { display: flex; flex-direction: column; gap: 10px; }

/* Etiquetas de veredicto (no dependen solo del color) */
.nxc-v { display: inline-block; padding: 0 6px; border-radius: 4px; font-size: 12px; line-height: 18px; font-weight: 700; white-space: nowrap; }
.nxc-v--no { background: #f7e6e8; color: #8f0012; }
.nxc-v--ok { background: #eaf3e6; color: #1d5700; }

/* Tabla de badges */
.nxc-scroll { overflow-x: auto; }
.nxc-bt { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; line-height: 1.4; }
.nxc-bt caption { text-align: left; }
.nxc-bt th, .nxc-bt td { padding: 14px 16px 14px 0; text-align: left; vertical-align: top; border-top: 1px solid rgba(7, 78, 155, 0.16); }
.nxc-bt thead th { padding-top: 0; padding-bottom: 10px; border-top: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.nxc-bt thead th.is-new { color: var(--primary-600); }
.nxc-bt tbody th { font-weight: 600; color: var(--gray-900); white-space: nowrap; }
.nxc-bt td > div { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.nxc-bt td > div + div { margin-top: 8px; }
.nxc-bt small { font-size: 12px; color: var(--text-muted); }
.nxc-bt code { font-size: 12px; }
.nxc-b { display: inline-block; padding: 4.2px 5.5px; border-radius: 8px; font: 600 9.744px/1 "Nunito", system-ui, sans-serif; text-transform: uppercase; white-space: nowrap; }
.nxc-b--su { background: #2d8600; color: #fff; }
.nxc-b--wa { background: #ffc107; color: #fff; }
.nxc-b--in { background: #3fa9f5; color: #fff; }
.nxc-b--da { background: #dc3545; color: #fff; }
.nxc-b--se { background: #6c757d; color: #fff; }
.nxc-b--l-su { background: #f8f9fa; color: #2d8600; }
.nxc-b--l-wa { background: #f8f9fa; color: #ffc107; }
.nxc-b--l-in { background: #f8f9fa; color: #3fa9f5; }
.nxc-b--l-da { background: #f8f9fa; color: #dc3545; }
.nxc-n { display: inline-block; padding: 0 6px; border-radius: 4px; font: 600 12px/18px "Nunito", system-ui, sans-serif; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.nxc-n--su { background: #2d8500; color: #fff; }
.nxc-n--wa { background: #ffc107; color: #161719; }
.nxc-n--in { background: #0e7490; color: #fff; }
.nxc-n--da { background: #ad0014; color: #fff; }
.nxc-n--se { background: #6c757d; color: #fff; }
.nxc-n--l-su { background: #eaf3e6; color: #246a00; }
.nxc-n--l-wa { background: #fff8e6; color: #9b4600; }
.nxc-n--l-in { background: #e7f1f4; color: #0e7490; }
.nxc-n--l-da { background: #f7e6e8; color: #ad0014; }

/* Lista de patrones de "elegido" */
.nxc-pat { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; border-top: 1px solid rgba(7, 78, 155, 0.16); }
.nxc-pat > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 24px; padding: 14px 0; border-bottom: 1px solid rgba(7, 78, 155, 0.16); }
.nxc-pat dt { font-size: 15px; line-height: 1.4; font-weight: 600; color: var(--gray-900); }
.nxc-pat dt small { display: block; font-size: 12px; font-weight: 400; color: var(--text-muted); }
.nxc-pat dd { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.nxc-pat dd b { display: block; font-size: 11px; line-height: 1.4; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.nxc-pat code { font-size: 0.92em; overflow-wrap: anywhere; }
@media (min-width: 900px) { .nxc-pat > div { grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 2.4fr) minmax(0, 3fr); } }

/* Barras de modales */
.nxc-chart { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.nxc-chart li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
@media (min-width: 640px) { .nxc-chart li { grid-template-columns: 160px minmax(0, 1fr); align-items: center; gap: 16px; } }
.nxc-chart__l { font-size: 14px; line-height: 1.3; font-weight: 600; color: var(--gray-900); }
.nxc-chart__l small { display: block; font-size: 12px; font-weight: 400; color: var(--text-muted); }
.nxc-bar { display: flex; height: 32px; width: calc(var(--w, 100) * 1%); min-width: 96px; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px rgba(7, 78, 155, 0.28); }
.nxc-bar > span { display: flex; align-items: center; justify-content: center; min-width: 0; font-size: 13px; font-weight: 700; line-height: 1; }
.nxc-bar > span + span { box-shadow: -1px 0 0 rgba(7, 78, 155, 0.28); }
.nxc-s--w { background: #fff; color: var(--gray-900); }
.nxc-s--b { background: var(--primary-600); color: #fff; }
.nxc-s--c { background: #fff; color: var(--gray-900); }
.nxc-s--i { background: var(--primary-100); color: var(--gray-900); }
.nxc-s--n { background: repeating-linear-gradient(135deg, #f1f3f5 0 6px, #e4e8ec 6px 12px); color: var(--gray-900); }
.nxc-legend { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0 0 14px; padding: 0; list-style: none; font-size: 13px; line-height: 1.3; color: var(--text-muted); }
.nxc-legend li { display: inline-flex; align-items: center; gap: 8px; }
.nxc-legend i { display: inline-block; width: 16px; height: 16px; border-radius: 4px; box-shadow: 0 0 0 1px rgba(7, 78, 155, 0.28); }
.nxc-sub { margin: 28px 0 12px; font-size: 15px; line-height: 1.3; font-weight: 700; color: var(--gray-900); }
.nxc-sub:first-of-type { margin-top: 0; }
.nxc-bcap { max-width: 78ch; margin: 18px 0 0; }
@media (max-width: 639px) {
  .nxc-wide .nxc-shot, .nxc-wide .nxc-stackshots { display: none; }
  .nxc-wide .nxt-ph__tag::after { content: " · se ve en pantallas anchas"; text-transform: none; letter-spacing: 0; font-weight: 400; }
}

/* Detalle técnico plegable */
.nx-tech { margin-top: 28px; border-top: 1px solid rgba(7, 78, 155, 0.16); padding-top: 16px; }
.nx-tech summary { cursor: pointer; font-size: 14px; line-height: 1.4; font-weight: 600; color: var(--primary-700, #074e9b); list-style: none; display: inline-flex; align-items: center; gap: 8px; border-radius: 6px; }
.nx-tech summary::-webkit-details-marker { display: none; }
.nx-tech summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
.nx-tech[open] summary::before { transform: rotate(45deg); }
.nx-tech summary:focus-visible { outline: 2px solid var(--primary-700, #074e9b); outline-offset: 3px; }
.nx-tech dl { display: grid; gap: 14px; margin: 16px 0 0; }
@media (min-width: 768px) { .nx-tech dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; } }
.nx-tech dt { font-size: 13px; line-height: 1.3; font-weight: 600; color: var(--gray-900); }
.nx-tech dd { margin: 2px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.nx-tech code { font-size: 0.92em; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .nx-tech summary::before { transition: none; } }

/* ==========================================================================
   El sistema aplicado · pantallas reales del prototipo (prefijo nxs-)
   ========================================================================== */
.nxs { display: grid; gap: 40px; }
.nxs-item { display: grid; gap: 14px; margin: 0; }
.nxs-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: stretch; }
.nxs-fig { margin: 0; position: relative; overflow: hidden; background: #fff; border-radius: 12px; box-shadow: 0 0 0 1px rgba(7, 78, 155, 0.16), 0 8px 24px rgba(7, 78, 155, 0.08); }
.nxs-fig img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.nxs-fig--d { aspect-ratio: 1280 / 800; }
.nxs-fig--m { border-radius: 24px; max-width: 260px; width: 100%; margin: 0 auto; aspect-ratio: 360 / 740; }
.nxs-fig--d { display: none; }
.nxs-cap { margin: 0; max-width: 62ch; font-size: 0.9375rem; line-height: 1.55; color: var(--text-muted, #5b6370); }
.nxs-cap b { color: var(--text, #111); font-weight: 700; }
/* Desktop y mobile comparten alto: columnas 1 : 0,304 = (800/1280) x (360/740), así cada captura conserva su proporción sin recortes */
@media (min-width: 768px) {
  .nxs-fig--d { display: block; }
  .nxs-row { grid-template-columns: minmax(0, 1fr) minmax(0, 0.304fr); gap: 20px; align-items: start; }
  .nxs-fig--m { max-width: none; margin: 0; }
}
@media (min-width: 1024px) { .nxs-row { gap: 28px; } }
/* ==== nxsb · hallazgo 4 (sidebar) ==== */
.nxsb-win { position: relative; width: calc(var(--w) * var(--z, 1) * 1px); max-width: 100%; height: calc(var(--h) * var(--z, 1) * 1px); margin-inline: auto; overflow: hidden; border-radius: 12px; background: #f5f5f6; box-shadow: 0 0 0 1px rgba(7, 78, 155, 0.16); }
.nxsb-win--new { background: #fff; }
.nxsb-win iframe { position: absolute; top: 0; left: 0; width: 1280px; height: calc(var(--h) * 1px); border: 0; transform-origin: 0 0; transform: scale(var(--z, 1)); }
.nxsb-flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 24px 40px; align-items: start; }
.nxsb-flow__col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.nxsb-flow .nxt-ph__tag { text-align: left; }
.nxsb-flow__steps { margin: 0; padding: 0; list-style: none; counter-reset: s; display: flex; flex-direction: column; gap: 10px; }
.nxsb-flow__steps li { counter-increment: s; position: relative; margin: 0; padding: 12px 14px 12px 52px; min-height: 48px; border-radius: 10px; background: var(--secondary-50); color: var(--gray-900); font-size: 15px; line-height: 1.5; }
.nxsb-flow__steps li::before { content: counter(s); position: absolute; left: 14px; top: 12px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--secondary-300); color: var(--secondary-700); font-size: 13px; line-height: 24px; font-weight: 700; text-align: center; }
.nxsb-flow__steps li.is-pain { background: var(--danger-50); }
.nxsb-flow__steps li.is-pain::before { box-shadow: 0 0 0 1px var(--danger-500); color: var(--danger-600); }
.nxsb-flow__col--new .nxsb-flow__steps li { background: #eef4fb; }
.nxsb-flow__col--new .nxsb-flow__steps li::before { box-shadow: 0 0 0 1px var(--primary-300); color: var(--primary-800); }
.nxsb-flow__sum { margin: 2px 0 0; font-size: 15px; line-height: 1.5; color: var(--text-muted); }
.nxsb-flow__sum b { color: var(--gray-900); }
/* ==== /nxsb ==== */