/* ════════════════════════════════════════════════════════════════════
   nv-card.css · NormaViva · Card system editorial
   sprint5-round2 · drop-in concat al final de /assets/nv_ux.css
   --------------------------------------------------------------------
   Reemplaza patrones ad-hoc del sprint3 (rank__row, tier,
   pro__compare-card, canje__card) con un sistema único .nv-card +
   modifiers. Border thin sin sombra · hover solo border-color ·
   density via wrapper attribute · sin mono.
   --------------------------------------------------------------------
   Variantes:
     .nv-card                  base
     .nv-card--fallo           sentencia TTA con chip resultado
     .nv-card--oficio          oficio/circular con número + materia
     .nv-card--quote           cita textual con border-left navy
     .nv-card--stat            4-cell strip de números agregados
     .nv-card--empty           empty state con icono + CTA opcional
     .nv-card--loading         skeleton con pulse breathing (no shimmer)
     .nv-card--pro             paywall sutil con badge esquina
   --------------------------------------------------------------------
   Microcomponentes:
     .meta-row                 fecha · fuente · materia · doctrina
     .nv-iconbtn               action button inline
     .nv-chip-result           chip acoge/rechaza/parcial con Tier 2 icon
   ════════════════════════════════════════════════════════════════════ */


/* ──────────────────────────────────────────────────────────────────
   .nv-card-grid · wrapper · define density tokens
   ────────────────────────────────────────────────────────────────── */
.nv-card-grid {
  --row-pad-y: 18px;
  --row-pad-x: 22px;
  --row-gap: 14px;
  --row-title-fs: 16.5px;
  --row-meta-fs: 13px;
  display: grid;
  gap: 12px;
}
.nv-card-grid[data-density="densa"] {
  --row-pad-y: 12px;
  --row-pad-x: 18px;
  --row-gap: 8px;
  --row-title-fs: 15.5px;
  --row-meta-fs: 12.5px;
}
.nv-card-grid--single { display: block; }
.nv-card-grid--stats { grid-template-columns: 1fr; }


/* ──────────────────────────────────────────────────────────────────
   .nv-card · base
   border thin · sin shadow · hover SOLO border-color
   ────────────────────────────────────────────────────────────────── */
.nv-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--oc-r);
  padding: var(--row-pad-y, 18px) var(--row-pad-x, 22px);
  display: flex;
  flex-direction: column;
  gap: var(--row-gap, 14px);
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
  position: relative;
}
.nv-card:hover {
  border-color: var(--border-strong);
}
a.nv-card {
  text-decoration: none;
  color: inherit;
}
a.nv-card:hover .nv-card__title {
  color: var(--navy-800);
}

.nv-card__title {
  font-family: var(--font-serif);
  font-size: var(--row-title-fs, 16.5px);
  line-height: 1.35;
  font-weight: 600;
  color: var(--ink-950);
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: pretty;
}
.nv-card__excerpt {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-800);
  letter-spacing: -0.003em;
  margin: 0;
  text-wrap: pretty;
}
.nv-card__excerpt em {
  font-style: italic;
  color: var(--ink-900);
}


/* ──────────────────────────────────────────────────────────────────
   .meta-row · fecha · fuente · materia · doctrina (any subset)
   border-right separators (default) o variant --bullet
   Inter weight 500 tabular-nums · NO mono (founder cap)
   ────────────────────────────────────────────────────────────────── */
.meta-row {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  font-family: var(--font-sans);
  font-size: var(--row-meta-fs, 13px);
  font-weight: 500;
  color: var(--ink-600);
  letter-spacing: 0.005em;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}
.meta-row > * {
  padding: 0 10px;
  border-right: 1px solid var(--ink-200);
  color: inherit;
}
.meta-row > *:first-child { padding-left: 0; }
.meta-row > *:last-child { border-right: 0; padding-right: 0; }
.meta-row__strong {
  color: var(--ink-800);
  font-weight: 600;
}
.meta-row a {
  color: var(--navy-700);
  text-decoration: none;
}
.meta-row a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.meta-row--bullet > * {
  border-right: 0;
  padding: 0;
}
.meta-row--bullet > * + *::before {
  content: "·";
  margin: 0 8px;
  color: var(--ink-300);
}


/* ──────────────────────────────────────────────────────────────────
   .nv-iconbtn · action button inline
   ────────────────────────────────────────────────────────────────── */
.nv-iconbtn {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--ink-500);
  border-radius: var(--oc-r-sm);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.nv-iconbtn:hover {
  background: var(--ink-100);
  color: var(--navy-800);
}
.nv-iconbtn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}
.nv-iconbtn svg {
  width: 18px;
  height: 18px;
  pointer-events: none;
}


/* ──────────────────────────────────────────────────────────────────
   .nv-chip-result · acoge / rechaza / parcial / indeterminado
   Tier 2 editorial icon inside (hardcoded color via sprite)
   ────────────────────────────────────────────────────────────────── */
.nv-chip-result {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 5px 6px;
  border-radius: var(--oc-r-pill);
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  color: var(--gris-700);
  background: color-mix(in srgb, var(--gris) 8%, var(--white));
  border: 1px solid color-mix(in srgb, var(--gris) 18%, transparent);
}
.nv-chip-result__icon {
  width: 22px;
  height: 22px;
  display: block;
  flex-shrink: 0;
}
.nv-chip-result--acoge {
  color: var(--verde-700);
  background: color-mix(in srgb, var(--verde) 10%, var(--white));
  border-color: color-mix(in srgb, var(--verde) 24%, transparent);
}
.nv-chip-result--rechaza {
  color: var(--rojo-700);
  background: color-mix(in srgb, var(--rojo) 10%, var(--white));
  border-color: color-mix(in srgb, var(--rojo) 24%, transparent);
}
.nv-chip-result--parcial {
  color: var(--ambar-700);
  background: color-mix(in srgb, var(--ambar) 12%, var(--white));
  border-color: color-mix(in srgb, var(--ambar) 28%, transparent);
}


/* ══════════════════════════════════════════════════════════════════
   .nv-card--fallo · sentencia TTA con chip resultado
   ══════════════════════════════════════════════════════════════════ */
.nv-card--fallo {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "chip  head    actions"
    "body  body    body"
    "meta  meta    meta";
  column-gap: 16px;
  row-gap: var(--row-gap, 14px);
  align-items: start;
}
.nv-card--fallo .nv-card__chip      { grid-area: chip; align-self: center; }
.nv-card--fallo .nv-card__head      { grid-area: head; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.nv-card--fallo .nv-card__actions   { grid-area: actions; display: flex; gap: 2px; align-self: center; }
.nv-card--fallo .nv-card__body      { grid-area: body; }
.nv-card--fallo .nv-card__meta-foot { grid-area: meta; padding-top: 8px; border-top: 1px solid var(--ink-100); margin-top: 2px; }

.nv-card__rit {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-faint);
  letter-spacing: 0.005em;
  font-variant-numeric: tabular-nums;
}
.nv-card__rit strong {
  color: var(--ink-800);
  font-weight: 600;
}


/* ══════════════════════════════════════════════════════════════════
   .nv-card--oficio · oficio/circular con número prominente
   sin chip-result · tag de tipo en el head
   ══════════════════════════════════════════════════════════════════ */
.nv-card--oficio {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  grid-template-areas:
    "num   head    actions"
    "num   body    body"
    "num   meta    meta";
  column-gap: 20px;
  row-gap: 8px;
  align-items: start;
}
.nv-card--oficio .nv-card__num {
  grid-area: num;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 18px;
  border-right: 1px solid var(--ink-100);
}
.nv-card--oficio .nv-card__head    { grid-area: head; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.nv-card--oficio .nv-card__actions { grid-area: actions; display: flex; gap: 2px; align-self: start; padding-top: 2px; }
.nv-card--oficio .nv-card__body    { grid-area: body; }
.nv-card--oficio .nv-card__meta-foot {
  grid-area: meta;
  padding-top: 8px;
  border-top: 1px solid var(--ink-100);
  margin-top: 2px;
}

.nv-card__num-label {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1;
}
.nv-card__num-val {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 600;
  color: var(--ink-950);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.nv-card__num-year {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-faint);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.nv-card__type {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 3px 8px;
  border-radius: var(--oc-r-sm);
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--navy-700);
  background: var(--navy-100);
}
.nv-card__type--circular {
  color: var(--accent-700);
  background: var(--accent-soft);
}
.nv-card__type--resolucion {
  color: var(--ink-700);
  background: var(--ink-100);
}


/* ══════════════════════════════════════════════════════════════════
   .nv-card--quote · cita textual destacada
   border-left navy-700 · bg paper · serif italic
   ══════════════════════════════════════════════════════════════════ */
.nv-card--quote {
  border-left: 3px solid var(--navy-700);
  border-radius: 0 var(--oc-r) var(--oc-r) 0;
  background: color-mix(in srgb, var(--navy-50) 60%, var(--surface));
  padding: 22px 26px 18px;
  gap: 14px;
}
.nv-card--quote:hover {
  border-color: var(--navy-800);
}
.nv-card__quote {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.45;
  color: var(--ink-900);
  letter-spacing: -0.008em;
  margin: 0;
  text-wrap: pretty;
}
.nv-card__quote::before {
  content: "“";
  color: var(--navy-400);
  font-family: var(--font-serif);
  font-size: 32px;
  line-height: 0;
  vertical-align: -10px;
  margin-right: 2px;
}
.nv-card__quote::after {
  content: "”";
  color: var(--navy-400);
  font-family: var(--font-serif);
  font-size: 32px;
  line-height: 0;
  vertical-align: -16px;
  margin-left: 1px;
}
.nv-card__attr {
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.005em;
  font-variant-numeric: tabular-nums;
}
.nv-card__attr strong {
  color: var(--ink-800);
  font-weight: 600;
}
.nv-card__attr a {
  color: var(--navy-700);
  text-decoration: none;
}
.nv-card__attr a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* ══════════════════════════════════════════════════════════════════
   .nv-card--stat · 4-cell strip · números tabular Inter
   ══════════════════════════════════════════════════════════════════ */
.nv-card--stat {
  display: grid;
  grid-template-columns: repeat(var(--stat-cols, 4), 1fr);
  padding: 0;
  gap: 0;
  overflow: hidden;
}
.nv-card__stat-cell {
  padding: 20px 24px 18px;
  border-right: 1px solid var(--ink-100);
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  min-width: 0;
}
.nv-card__stat-cell:last-child { border-right: 0; }
.nv-card__stat-num {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.05;
  color: var(--ink-950);
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}
.nv-card__stat-label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.nv-card__stat-trend {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11.5px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.nv-card__stat-trend--up { color: var(--verde-700); }
.nv-card__stat-trend--down { color: var(--rojo-700); }
.nv-card__stat-trend--flat { color: var(--text-faint); }


/* ══════════════════════════════════════════════════════════════════
   .nv-card--empty · empty state con icono editorial
   ══════════════════════════════════════════════════════════════════ */
.nv-card--empty {
  align-items: center;
  text-align: center;
  padding: 48px 32px 40px;
  gap: 12px;
}
.nv-card__empty-icon {
  width: 56px;
  height: 56px;
  color: var(--ink-400);
  margin-bottom: 6px;
}
.nv-card__empty-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.015em;
  color: var(--ink-900);
  margin: 0;
  line-height: 1.25;
}
.nv-card__empty-body {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-muted);
  letter-spacing: -0.003em;
  max-width: 440px;
  margin: 0;
  text-wrap: pretty;
}
.nv-card__empty-cta {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--oc-r-sm);
  background: var(--surface);
  color: var(--ink-800);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13.5px;
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
}
.nv-card__empty-cta:hover {
  border-color: var(--navy-700);
  color: var(--navy-800);
  background: var(--surface-alt);
}


/* ══════════════════════════════════════════════════════════════════
   .nv-card--loading · skeleton con pulse breathing (no shimmer)
   --ink-100 → --surface-alt gradient · ease-in-out 2.4s
   ══════════════════════════════════════════════════════════════════ */
.nv-card--loading {
  pointer-events: none;
}
.nv-card__skel {
  background: linear-gradient(90deg, var(--ink-100) 0%, var(--surface-alt) 50%, var(--ink-100) 100%);
  background-size: 220% 100%;
  background-position: 110% 50%;
  border-radius: var(--oc-r-sm);
  height: 14px;
  color: transparent;
  animation: nv-skel-pulse 2.4s ease-in-out infinite;
}
.nv-card__skel--title { height: 20px; width: 78%; }
.nv-card__skel--rit   { height: 12px; width: 38%; margin-top: -4px; }
.nv-card__skel--text  { height: 14px; width: 100%; }
.nv-card__skel--text-short { height: 14px; width: 72%; }
.nv-card__skel--meta  { height: 12px; width: 60%; margin-top: 6px; }
@keyframes nv-skel-pulse {
  0%, 100% { background-position: 110% 50%; }
  50%      { background-position: -110% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .nv-card__skel { animation: none; background-position: 50% 50%; }
}


/* ══════════════════════════════════════════════════════════════════
   .nv-card--pro · paywall sutil · badge esquina + body dimmed
   ══════════════════════════════════════════════════════════════════ */
.nv-card--pro {
  background: linear-gradient(180deg, var(--surface) 0%, var(--navy-50) 100%);
  position: relative;
  overflow: hidden;
}
.nv-card--pro .pro-badge {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 2;
}
.nv-card--pro .nv-card__body--dimmed {
  opacity: 0.42;
  filter: blur(0.4px);
  user-select: none;
  pointer-events: none;
}
.nv-card__pro-cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px dashed var(--navy-200);
}
.nv-card__pro-cta-msg {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--navy-900);
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: pretty;
}
.nv-card__pro-cta-msg strong {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--navy-900);
}
.nv-card__pro-cta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.nv-card__pro-cta-row .nv-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  background: var(--navy-800);
  color: var(--white);
  border: 0;
  border-radius: var(--oc-r-sm);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast);
}
.nv-card__pro-cta-row .nv-btn-primary:hover { background: var(--navy-900); }
.nv-card__pro-cta-row .nv-pro-trial {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12.5px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}


/* ──────────────────────────────────────────────────────────────────
   .pro-badge minimal · selectores para .nv-card--pro corner usage
   Componente completo (.pro-badge--pill etc.) en brand/pro-badge.css
   que concatena al mismo /assets/nv_ux.css
   ────────────────────────────────────────────────────────────────── */
.pro-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 6px;
  background: var(--navy-900);
  color: var(--white);
  border-radius: var(--oc-r-pill);
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
}
.pro-badge__icon {
  width: 16px;
  height: 16px;
  color: var(--accent);
}
.pro-badge--corner {
  /* positioning handled by .nv-card--pro context · see above */
}


/* ══════════════════════════════════════════════════════════════════
   Responsive · breakpoint mobile
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .nv-card--fallo {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "chip  actions"
      "head  head"
      "body  body"
      "meta  meta";
  }
  .nv-card--oficio {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "num     actions"
      "head    head"
      "body    body"
      "meta    meta";
  }
  .nv-card--oficio .nv-card__num {
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    border-right: 0;
    border-bottom: 1px solid var(--ink-100);
    padding: 0 0 10px 0;
  }
  .nv-card--oficio .nv-card__num-val {
    font-size: 22px;
  }
  .nv-card--stat {
    grid-template-columns: repeat(2, 1fr);
  }
  .nv-card__stat-cell:nth-child(odd) { border-right: 1px solid var(--ink-100); }
  .nv-card__stat-cell:nth-child(2n) { border-right: 0; }
  .nv-card__stat-cell:nth-child(-n+2) { border-bottom: 1px solid var(--ink-100); }
}

/* ════════════════════════════════════════════════════════════════════
   end nv-card.css
   ════════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════════
   pro-badge.css · NormaViva · Pro feature badge
   sprint5-round2 · drop-in concat al final de /assets/nv_ux.css
   --------------------------------------------------------------------
   Componente standalone para señalizar features Pro · 3 variantes:
     .pro-badge              base · inline compact (icon + "Pro")
     .pro-badge--pill        variant horizontal larger, room para más texto
     .pro-badge--corner      variant para absolute-positioning en cards
   --------------------------------------------------------------------
   Usa el ícono Tier 2 #pro-badge del sprite (hardcoded "Pro" italic
   text dentro del SVG). El componente añade el wrapper visual.
   ════════════════════════════════════════════════════════════════════ */


/* ────────────────────────────────────────────────────────────────
   .pro-badge · base · inline compact
   Uso: en line de copy mencionando feature Pro · cerca de CTAs
   ──────────────────────────────────────────────────────────────── */
.pro-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 6px;
  background: var(--navy-900);
  color: var(--white);
  border-radius: var(--oc-r-pill);
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  transition: background var(--dur-fast) var(--ease-out);
}
a.pro-badge:hover {
  background: var(--navy-950);
  color: var(--white);
  text-decoration: none;
}

.pro-badge__icon {
  width: 16px;
  height: 16px;
  color: var(--accent);
  flex-shrink: 0;
}


/* ────────────────────────────────────────────────────────────────
   .pro-badge--pill · variant horizontal larger
   Uso: header CTA "Conoce Pro" · banner upgrade · landing hero
   Más padding · texto puede ser frase completa · ícono levemente
   más grande
   ──────────────────────────────────────────────────────────────── */
.pro-badge--pill {
  padding: 7px 16px 7px 10px;
  gap: 8px;
  font-size: 14px;
  letter-spacing: 0;
}
.pro-badge--pill .pro-badge__icon {
  width: 20px;
  height: 20px;
}


/* ────────────────────────────────────────────────────────────────
   .pro-badge--corner · variant absolute-positioning
   Uso: esquina top-right de .nv-card--pro o similar paywall
   Border-radius asimétrico para "esquinarse" al card · sin pill
   shape full
   ──────────────────────────────────────────────────────────────── */
.pro-badge--corner {
  border-radius: 0 var(--oc-r) 0 var(--oc-r);
  /* el border-radius del card (6px) se respeta arriba-derecha
     · esquina inferior-izquierda redonda para "anchorse" al card
     · el resto de positioning lo da el contexto padre */
  padding: 6px 12px 6px 8px;
  font-size: 11.5px;
  gap: 5px;
}
.pro-badge--corner .pro-badge__icon {
  width: 14px;
  height: 14px;
}


/* ────────────────────────────────────────────────────────────────
   .pro-badge--ghost · variant outline / inverse
   Uso: header navy-900 background donde el solid navy-900 badge
   desaparecería · border + color en vez de fill
   ──────────────────────────────────────────────────────────────── */
.pro-badge--ghost {
  background: transparent;
  color: var(--white);
  border: 1px solid color-mix(in srgb, var(--white) 22%, transparent);
}
a.pro-badge--ghost:hover {
  background: color-mix(in srgb, var(--white) 8%, transparent);
  color: var(--white);
}
.pro-badge--ghost .pro-badge__icon {
  color: var(--accent);
}


/* ────────────────────────────────────────────────────────────────
   Accesibilidad
   ──────────────────────────────────────────────────────────────── */
.pro-badge:focus-visible,
a.pro-badge:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Reduced motion: ya no animamos · no hay overrides necesarios */


/* ════════════════════════════════════════════════════════════════
   end pro-badge.css
   ════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════════
   patches/hit-target.css · NormaViva · low-priority WCAG fix
   sprint5-round3b · drop-in concat al final de /assets/nv_ux.css
   --------------------------------------------------------------------
   Sub-44 hit target encontrado en mobile sweep Round 3a:
   .nv-card__pro-cta-row .nv-btn-primary mide ~35px en mobile.
   WCAG 2.5.5 mobile recommend 44×44. Fix mínimo:
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 720px) {
  .nv-card__pro-cta-row .nv-btn-primary {
    min-height: 44px;
    padding-block: 11px;
  }
}

/* ════════════════════════════════════════════════════════════════════
   nv-card-fallo · A · MINUTA · 2026-08-16
   --------------------------------------------------------------------
   Reemplaza los DOS bloques anteriores (nv-card-fallo-polished Round 4/5
   y nv-card-fallo-v2 POLISH PASS 2). Los dos estaban escritos y NINGUNO
   renderizaba: app.js inyectaba en runtime un muro de ~40 reglas
   !important que los tapaba entero. El muro se borró en el mismo cambio;
   si vuelve, esta hoja vuelve a ser letra muerta.

   La forma: la identidad sube a la primera línea, como en una minuta de
   tribunal (veredicto · rol · tribunal · fecha) con la cuantía al margen
   derecho. Eso libera la carátula para ser lo primero que se LEE. El
   veredicto deja de ser píldora y pasa a ser tinta: el punto de 7px hace
   el escaneo y deja de competir con el título.

   Dos estados, un componente. Para un visitante sin Pro el backend ya
   manda rol y tribunal enmascarados (api/_ident.py, NV_IDENT_MASK=hard)
   y la carátula con la parte del SII colapsada; acá eso entra como un
   solo .nv-ident-lock en el lugar del rol, no como dos candados seguidos.

   Maqueta y decisión: 5-design/card-fallo-2026-08/index.html
   ════════════════════════════════════════════════════════════════════ */

/* La lista. Va con el id ademas de la clase a proposito: el contenedor real
   del buscador es <div id="fallos-lista"> y NO lleva la clase, asi que la
   regla .fallos-lista que ya existia nunca se aplico. El separador lo daba
   el muro de !important que app.js inyectaba; al sacarlo las tarjetas
   quedaron pegadas, con 0px entre una y otra. */
#fallos-lista,
.fallos-lista {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.nv-card--fallo {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Explícito y no heredado: una regla de .nv-card aguas arriba pone
     align-items:start, y con eso los hijos quedan shrink-to-fit. Se veía
     en dos sitios a la vez: el filete sobre los chips terminaba donde
     terminaba el último chip (ancho distinto en cada tarjeta), y el
     margin-left:auto de la cuantía no empujaba nada, así que la cifra
     quedaba pegada a la fecha en vez de irse al margen derecho. */
  align-items: stretch;
  gap: 11px;
  padding: 18px 20px 16px;
  background: var(--oc-surface);
  border: 1px solid var(--oc-line);
  border-radius: var(--oc-r);
  box-shadow: var(--oc-shadow-sm);
  color: inherit;
  text-decoration: none;
  transition:
    border-color var(--oc-dur-fast) var(--oc-ease-out),
    box-shadow var(--oc-dur) var(--oc-ease-out);
}
.nv-card--fallo:hover {
  border-color: var(--oc-line-2);
  box-shadow: var(--oc-shadow);
}
.nv-card--fallo:focus-within {
  border-color: var(--oc-navy-500);
}

/* Un solo click target y un solo tab stop. Antes la tarjeta era clicable
   por un addEventListener sobre el <article>, o sea inalcanzable por
   teclado. El ::after del enlace del título cubre la tarjeta entera. */
.nv-card--fallo__caratula-link {
  color: inherit;
  text-decoration: none;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--oc-dur) var(--oc-ease-out);
}
.nv-card--fallo__caratula-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
}
.nv-card--fallo__caratula-link:focus-visible {
  outline: none;
}
.nv-card--fallo__caratula-link:focus-visible::after {
  outline: 2px solid var(--oc-focus);
  outline-offset: 2px;
}
.nv-card--fallo:hover .nv-card--fallo__caratula-link {
  text-decoration: underline;
  text-decoration-color: var(--oc-line-2);
}
/* los enlaces internos (chip de artículo, ref de ley) por encima del área */
.nv-card--fallo a:not(.nv-card--fallo__caratula-link) {
  position: relative;
  z-index: 2;
}

/* ── línea de identidad ───────────────────────────────────────────── */
.nv-card--fallo__top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}
.nv-card--fallo__id {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 9px;
  font-family: var(--oc-font-sans);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--oc-mute);
  line-height: 1.45;
  /* slashed-zero: el rol lleva ceros y años, y el 0 sin barra se confunde
     con la O en Inter a 12,5px */
  font-variant-numeric: tabular-nums slashed-zero;
}
.nv-card--fallo__sep {
  display: inline-block;
  flex: none;
  width: 1px;
  height: 11px;
  background: var(--oc-line-2);
}
.nv-card--fallo__rit {
  color: var(--oc-body);
  font-weight: 600;
  letter-spacing: 0.005em;
}

/* ── veredicto · color como tinta, no como caja ───────────────────── */
.nv-card--fallo__res {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--oc-font-sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.005em;
  white-space: nowrap;
}
.nv-card--fallo__res-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: var(--oc-r-circle);
}
/* El texto NO usa el token base del resultado: --oc-fallo-acoge es #16a34a
   y sobre blanco a 12,5px da 3,0:1, bajo el mínimo. El punto sí lo usa
   (es forma, no texto), y el texto va al tono -strong/-deep de la misma
   familia: 5,0 / 6,9 / 6,5:1. */
.nv-card--fallo__res--acoge          { color: var(--oc-ok-strong); }
.nv-card--fallo__res--acoge .nv-card--fallo__res-dot   { background: var(--oc-fallo-acoge); }
.nv-card--fallo__res--parcial        { color: var(--oc-warn-deep); }
.nv-card--fallo__res--parcial .nv-card--fallo__res-dot { background: var(--oc-warn); }
.nv-card--fallo__res--rechaza        { color: var(--oc-bad-strong); }
.nv-card--fallo__res--rechaza .nv-card--fallo__res-dot { background: var(--oc-fallo-rechaza); }
.nv-card--fallo__res--indeterminado  { color: var(--oc-mute); }
.nv-card--fallo__res--indeterminado .nv-card--fallo__res-dot { background: var(--oc-line-2); }

/* ── cuantía · es una estimación por tramos, se escribe como cifra ── */
.nv-card--fallo__monto {
  margin-left: auto;
  font-family: var(--oc-font-sans);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--oc-warn-deep);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.005em;
  white-space: nowrap;
  cursor: help;
}
.nv-card--fallo__monto-aprox {
  font-weight: 500;
  color: var(--oc-warn-strong);
}

/* ── carátula · la única voz serif de la tarjeta ──────────────────── */
.nv-card--fallo__caratula {
  font-family: var(--oc-font-serif);
  font-weight: 600;
  font-size: 17.5px;
  line-height: 1.3;
  letter-spacing: -0.014em;
  color: var(--oc-ink);
  margin: 0;
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* La mitad que se repite en casi todo el corpus ("con Servicio de
   Impuestos Internos…") baja de rango sin desaparecer. Es lo mismo que
   hace normaliza_caratula() en el backend cuando enmascara, así que la
   vista Pro y la gated no dan un salto visual. */
.nv-card--fallo__vs {
  font-weight: 400;
  color: var(--oc-mute);
  transition: color var(--oc-dur) var(--oc-ease-out);
}
.nv-card--fallo:hover .nv-card--fallo__vs {
  color: var(--oc-body-soft);
}

/* ── extracto ─────────────────────────────────────────────────────── */
/* Sin tope de medida, a propósito (decisión founder 16-ago-2026). Hubo un
   max-width:74ch por legibilidad y dejaba 382px muertos a la derecha de cada
   tarjeta, con la carátula peor todavía (466px). En una tarjeta cuyo filete y
   cuya fila de chips SÍ van a todo el ancho, ese vacío se lee como un defecto
   de maquetación, no como una columna de lectura. Y como el clamp de 3 líneas
   no estaba cortando nada, ensanchar hace caber MÁS texto en las mismas tres
   líneas, no menos. */
.nv-card--fallo__excerpt {
  font-family: var(--oc-font-sans);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--oc-body-soft);
  margin: 0;
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nv-card--fallo__money {
  font-family: var(--oc-font-sans);
  font-weight: 600;
  color: var(--oc-text);
  font-variant-numeric: tabular-nums;
}
.nv-card--fallo__law-ref {
  color: var(--oc-body);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px dotted var(--oc-line-2);
  transition:
    color var(--oc-dur-fast) var(--oc-ease),
    border-color var(--oc-dur-fast) var(--oc-ease);
}
.nv-card--fallo__law-ref:hover {
  color: var(--oc-navy-500);
  border-bottom-color: var(--oc-navy-300);
}

/* ── taxonomía · UN solo lenguaje de chip ─────────────────────────── */
/* Antes convivían tres: la píldora del resultado, la caja del monto y
   estas etiquetas. Y el artículo iba en monoespaciada, que en esta marca
   se reserva para código real: va en sans con cifras tabulares. */
.nv-card--fallo__tax {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 3px;
  padding-top: 12px;
  border-top: 1px solid var(--oc-line);
}
.nv-card--fallo__chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--oc-font-sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  padding: 3px 10px;
  border: 1px solid var(--oc-line);
  border-radius: var(--oc-r-sm);
  background: var(--oc-bg-alt);
  color: var(--oc-body-soft);
  white-space: nowrap;
}
.nv-card--fallo__chip--tipo {
  background: var(--oc-cat-1-bg);
  border-color: var(--oc-navy-100);
  color: var(--oc-cat-1);
  font-weight: 600;
}
.nv-card--fallo__chip--ley {
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition:
    border-color var(--oc-dur-fast) var(--oc-ease),
    color var(--oc-dur-fast) var(--oc-ease);
}
.nv-card--fallo__chip--ley:hover {
  border-color: var(--oc-navy-300);
  color: var(--oc-navy);
}

/* ── estado: seleccionada (comparar fallos) ───────────────────────── */
.nv-card--fallo--selected {
  border-color: var(--oc-navy-500);
  background: var(--oc-cat-1-bg);
}

/* ── estado: carga ────────────────────────────────────────────────── */
.nv-card--fallo--loading {
  pointer-events: none;
  cursor: default;
}
.nv-fallo-skel {
  background: var(--oc-bg-alt);
  border-radius: var(--oc-r-sm);
  height: 12px;
  color: transparent;
  animation: nv-fallo-skel-pulse 1.4s var(--oc-ease) infinite;
}
.nv-fallo-skel--id       { height: 11px; width: 44%; }
.nv-fallo-skel--caratula { height: 19px; width: 66%; }
.nv-fallo-skel--text     { width: 100%; }
.nv-fallo-skel--text-2   { width: 88%; }
@keyframes nv-fallo-skel-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
  .nv-fallo-skel { animation: none; }
}

/* ── responsive ───────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .nv-card--fallo {
    padding: 16px 16px 14px;
  }
  .nv-card--fallo__caratula {
    font-size: 16.5px;
    -webkit-line-clamp: 3;
  }
  .nv-card--fallo__excerpt {
    font-size: 14px;
  }
  /* La línea de identidad no cabe junto al veredicto: en vez de partirse
     en tres filas dejando el separador colgando, baja entera a la
     segunda y la cuantía sube a la primera junto al veredicto. */
  .nv-card--fallo__top > .nv-card--fallo__sep { display: none; }
  .nv-card--fallo__top > .nv-card--fallo__monto { order: 2; }
  .nv-card--fallo__top > .nv-card--fallo__id { order: 3; flex: 1 0 100%; }
}

/* ════════════════════════════════════════════════════════════════════
   nv-card-oficio-v1.css · NormaViva · Oficio/Circular/Resolución card
   sprint5-round6 · drop-in concat al final de /assets/nv_ux.css
   --------------------------------------------------------------------
   Hermano del .nv-card--fallo v2 (Round 5) · mismo lift editorial
   "Westlaw soft": border thin + shadow-sm at rest · hover navy-300 +
   shadow-md · cero scale · cero translate.

   Diferencias contra .nv-card--fallo:
     - Sin chip-result acoge/rechaza · acá usamos .nv-card--oficio__tag
       que pinta el TIPO (Oficio · Circular · Resolución) con color
       por variante (navy · accent warm · ink gris).
     - Num-block prominente como columna izquierda con número + año
       en SANS Inter tabular-nums. NO serif. NO mono. Reemplaza la
       caratula como vector visual fuerte de identificación.
     - Tribunal (fallo) ⇢ materia + sub-materia (oficio). Misma
       posición en meta-row.

   Selectores nuevos (greenfield · NO parallel-class sobre legacy):
     .nv-card--oficio                       redefinido
     .nv-card--oficio__tag-row              top row · tag tipo + opcional reciente
     .nv-card--oficio__tag                  pill del tipo (default = Oficio)
     .nv-card--oficio__tag--oficio
     .nv-card--oficio__tag--circular
     .nv-card--oficio__tag--resolucion
     .nv-card--oficio__reciente             opt indicador "publicado hoy/ayer"
     .nv-card--oficio__num-block            columna izquierda · N° + año
     .nv-card--oficio__num-label            "N°"
     .nv-card--oficio__num-val              número · sans tabular 22px
     .nv-card--oficio__num-year             año · sans tabular 12px
     .nv-card--oficio__head                 contenedor titulo
     .nv-card--oficio__titulo               serif 600 · única excepción serif
     .nv-card--oficio__titulo-link          stretched-link cubre la card
     .nv-card--oficio__body                 contenedor excerpt
     .nv-card--oficio__excerpt              sans 14.5px · 3-line clamp
     .nv-card--oficio__money                cifras tabular Inter (reuse pattern fallo)
     .nv-card--oficio__law-ref              refs ley/art inline link (reuse)
     .nv-card--oficio__meta-row             bottom · materia · sub · fecha · tipo
     .nv-card--oficio__materia
     .nv-card--oficio__sub-materia
     .nv-card--oficio__fecha
     .nv-card--oficio__tipo-meta
     .nv-card--oficio--selected             state (multi-select compare)
     .nv-card--oficio--loading              skeleton state
     .nv-card--oficio--error                error state

   Density: tomado del wrapper .nv-card-grid[data-density]
   Density "comoda" (default desktop): padding 22 22 · gap 12
   Density "densa" (tablet/mobile/listas largas): padding 14 16 · gap 8
   ════════════════════════════════════════════════════════════════════ */


/* ──────────────────────────────────────────────────────────────────
   .nv-card-grid · density tokens para oficio (no colisionan con fallo)
   ────────────────────────────────────────────────────────────────── */
.nv-card-grid {
  --oficio-pad-y: 22px;
  --oficio-pad-x: 22px;
  --oficio-gap: 12px;
  --oficio-num-col: 88px;
  --oficio-num-val-fs: 22px;
  --oficio-titulo-fs: 17px;
  --oficio-excerpt-fs: 14.5px;
  --oficio-meta-fs: 12.5px;
}
.nv-card-grid[data-density="densa"] {
  --oficio-pad-y: 14px;
  --oficio-pad-x: 16px;
  --oficio-gap: 8px;
  --oficio-num-col: 72px;
  --oficio-num-val-fs: 19px;
  --oficio-titulo-fs: 15.5px;
  --oficio-excerpt-fs: 13.5px;
  --oficio-meta-fs: 12px;
}


/* ──────────────────────────────────────────────────────────────────
   .nv-card--oficio · base · grid 2-col + tag-row top + meta-row foot
   RESET total del grid Round 2 (tenía nv-card__num etc)
   ────────────────────────────────────────────────────────────────── */
.nv-card--oficio {
  display: grid;
  grid-template-columns: var(--oficio-num-col) 1fr;
  grid-template-areas:
    "tagrow tagrow"
    "num    head"
    "num    body"
    "meta   meta";
  column-gap: 20px;
  row-gap: var(--oficio-gap);
  padding: var(--oficio-pad-y) var(--oficio-pad-x);
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--oc-r);
  /* Westlaw soft lift · idéntico al fallo v2 */
  box-shadow: var(--shadow-sm);
  /* stretched-link · el <article> NO es anchor (HTML5 prohíbe nested
     anchors · law-refs inline rompen outer <a>). Click delegado al
     ::after del .titulo-link. */
  position: relative;
  isolation: isolate;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

/* anular subselectores grid-area del Round 2 que tenían su propio map */
.nv-card--oficio > * {
  grid-area: auto;
}

.nv-card--oficio:hover {
  border-color: var(--navy-300);
  box-shadow: var(--shadow-md);
}
.nv-card--oficio:hover .nv-card--oficio__titulo-link {
  color: var(--navy-800);
}
.nv-card--oficio:focus-within {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-color: var(--navy-700);
  box-shadow: var(--shadow-md);
}


/* ──────────────────────────────────────────────────────────────────
   stretched titulo-link · cubre toda la card
   ────────────────────────────────────────────────────────────────── */
.nv-card--oficio__titulo-link {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.nv-card--oficio__titulo-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  cursor: pointer;
  border-radius: var(--oc-r);
}
.nv-card--oficio__titulo-link:focus {
  outline: none; /* focus ring vive en .nv-card--oficio:focus-within */
}


/* ──────────────────────────────────────────────────────────────────
   tag-row · top · tag tipo + opcional indicador reciente
   ────────────────────────────────────────────────────────────────── */
.nv-card--oficio__tag-row {
  grid-area: tagrow;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
  min-height: 22px;
}
.nv-card--oficio__tag-row > .nv-card--oficio__reciente {
  margin-left: auto;
}

.nv-card--oficio__tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--oc-r-sm);
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  line-height: 1.4;
  /* default = Oficio (navy editorial) */
  color: var(--navy-800);
  background: var(--navy-100);
  border: 1px solid color-mix(in srgb, var(--navy-700) 14%, transparent);
}
.nv-card--oficio__tag--oficio {
  /* explicit modifier · idéntico al default · documenta intención */
  color: var(--navy-800);
  background: var(--navy-100);
  border-color: color-mix(in srgb, var(--navy-700) 14%, transparent);
}
.nv-card--oficio__tag--circular {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
}
.nv-card--oficio__tag--resolucion {
  color: var(--ink-700);
  background: var(--ink-100);
  border-color: var(--ink-200);
}

.nv-card--oficio__reciente {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--verde-700);
}
.nv-card--oficio__reciente::before {
  content: "";
  width: 6px; height: 6px; border-radius: var(--oc-r-circle);
  background: var(--verde);
  box-shadow: 0 0 0 0 var(--verde);
  animation: nv-oficio-pulse 2.4s ease-out infinite;
}
@keyframes nv-oficio-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--verde) 60%, transparent); }
  70%  { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .nv-card--oficio__reciente::before { animation: none; }
}


/* ──────────────────────────────────────────────────────────────────
   num-block · columna izquierda · número + año prominentes
   SANS Inter tabular-nums · NO serif · NO mono (founder explicit)
   ────────────────────────────────────────────────────────────────── */
.nv-card--oficio__num-block {
  grid-area: num;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 18px;
  border-right: 1px solid var(--ink-100);
  min-width: 0;
}
.nv-card--oficio__num-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1;
  margin-bottom: 6px;
}
.nv-card--oficio__num-val {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--oficio-num-val-fs);
  color: var(--ink-950);
  line-height: 1.05;
  letter-spacing: -0.018em;
  font-variant-numeric: tabular-nums;
}
.nv-card--oficio__num-year {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-faint);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  margin-top: 6px;
}


/* ──────────────────────────────────────────────────────────────────
   head · titulo serif (única excepción serif del card)
   ────────────────────────────────────────────────────────────────── */
.nv-card--oficio__head {
  grid-area: head;
  min-width: 0;
}
.nv-card--oficio__titulo {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--oficio-titulo-fs);
  line-height: 1.32;
  color: var(--ink-950);
  letter-spacing: -0.014em;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-wrap: balance;
  transition: color var(--dur-fast) var(--ease-out);
}


/* ──────────────────────────────────────────────────────────────────
   body · excerpt sans
   ────────────────────────────────────────────────────────────────── */
.nv-card--oficio__body {
  grid-area: body;
  min-width: 0;
}
.nv-card--oficio__excerpt {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--oficio-excerpt-fs);
  line-height: 1.55;
  color: var(--ink-700);
  letter-spacing: 0.005em;
  margin: 0;
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nv-card-grid[data-density="densa"] .nv-card--oficio__excerpt {
  -webkit-line-clamp: 2;
}


/* ──────────────────────────────────────────────────────────────────
   money + law-ref inline · reuse del pattern fallo v2
   ────────────────────────────────────────────────────────────────── */
.nv-card--oficio__money {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.005em;
  font-size: 1em;
}

.nv-card--oficio__law-ref {
  /* z-index 1 · gana al ::after stretched-link */
  position: relative;
  z-index: 1;
  color: var(--ink-800);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px dotted transparent;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.nv-card--oficio__law-ref:hover {
  color: var(--navy-700);
  border-bottom-color: var(--navy-400);
}


/* ──────────────────────────────────────────────────────────────────
   meta-row · bottom · materia · sub-materia · fecha · tipo
   ────────────────────────────────────────────────────────────────── */
.nv-card--oficio__meta-row {
  grid-area: meta;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--ink-100);
  font-family: var(--font-sans);
  font-size: var(--oficio-meta-fs);
  font-weight: 500;
  color: var(--ink-600);
  letter-spacing: 0.005em;
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
}
.nv-card--oficio__meta-row > * {
  padding: 0 9px;
  border-right: 1px solid var(--ink-200);
}
.nv-card--oficio__meta-row > *:first-child { padding-left: 0; }
.nv-card--oficio__meta-row > *:last-child { border-right: 0; padding-right: 0; }

.nv-card--oficio__materia {
  color: var(--ink-800);
  font-weight: 600;
}
.nv-card--oficio__sub-materia {
  color: var(--ink-700);
}
.nv-card--oficio__fecha {
  color: var(--ink-600);
}
.nv-card--oficio__tipo-meta {
  color: var(--ink-600);
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: 400;
}


/* ──────────────────────────────────────────────────────────────────
   state: selected (multi-select compare)
   ────────────────────────────────────────────────────────────────── */
.nv-card--oficio--selected {
  border-color: var(--navy-700);
  background: color-mix(in srgb, var(--navy-50) 70%, var(--white));
  box-shadow: var(--shadow-md), inset 3px 0 0 var(--navy-700);
}
.nv-card--oficio--selected:hover {
  border-color: var(--navy-800);
  box-shadow: var(--shadow-md), inset 3px 0 0 var(--navy-800);
}


/* ──────────────────────────────────────────────────────────────────
   state: loading skeleton · respiración no shimmer
   ────────────────────────────────────────────────────────────────── */
.nv-card--oficio--loading {
  pointer-events: none;
  cursor: default;
  box-shadow: var(--shadow-sm);
}
.nv-card--oficio--loading .nv-oficio-skel {
  background: linear-gradient(90deg, var(--ink-100) 0%, var(--surface-alt) 50%, var(--ink-100) 100%);
  background-size: 220% 100%;
  background-position: 110% 50%;
  border-radius: var(--oc-r-sm);
  color: transparent;
  animation: nv-oficio-skel-pulse 2.4s ease-in-out infinite;
}
.nv-oficio-skel--tag      { height: 18px; width: 78px; border-radius: var(--oc-r-sm); }
.nv-oficio-skel--num      { height: 22px; width: 80%; }
.nv-oficio-skel--year     { height: 12px; width: 50%; margin-top: 4px; }
.nv-oficio-skel--titulo   { height: 20px; width: 86%; }
.nv-oficio-skel--titulo-2 { height: 20px; width: 60%; }
.nv-oficio-skel--text     { height: 14px; width: 100%; }
.nv-oficio-skel--text-2   { height: 14px; width: 92%; }
.nv-oficio-skel--text-3   { height: 14px; width: 68%; }
.nv-oficio-skel--meta     { height: 12px; width: 60%; margin-top: 4px; }
@keyframes nv-oficio-skel-pulse {
  0%, 100% { background-position: 110% 50%; }
  50%      { background-position: -110% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .nv-card--oficio--loading .nv-oficio-skel { animation: none; background-position: 50% 50%; }
}


/* ──────────────────────────────────────────────────────────────────
   state: error
   ────────────────────────────────────────────────────────────────── */
.nv-card--oficio--error {
  border-color: color-mix(in srgb, var(--rojo) 28%, var(--border));
  background: color-mix(in srgb, var(--rojo) 4%, var(--surface));
  cursor: default;
  box-shadow: var(--shadow-sm);
}
.nv-card--oficio--error .nv-card--oficio__titulo {
  color: var(--rojo-700);
}


/* ──────────────────────────────────────────────────────────────────
   state: empty (lista entera) · usa .nv-card--empty del Round 2
   documentado en notes.md · no necesita override.
   ────────────────────────────────────────────────────────────────── */


/* ──────────────────────────────────────────────────────────────────
   Responsive · tablet + mobile · collapse num-block a row
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .nv-card--oficio {
    --oficio-pad-y: 18px;
    --oficio-pad-x: 20px;
    --oficio-num-col: 76px;
  }
}
@media (max-width: 640px) {
  .nv-card--oficio {
    grid-template-columns: 1fr;
    grid-template-areas:
      "tagrow"
      "num"
      "head"
      "body"
      "meta";
    --oficio-pad-y: 16px;
    --oficio-pad-x: 16px;
    --oficio-titulo-fs: 16px;
    --oficio-excerpt-fs: 14px;
  }
  .nv-card--oficio__num-block {
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
    border-right: 0;
    border-bottom: 1px solid var(--ink-100);
    padding: 0 0 10px 0;
  }
  .nv-card--oficio__num-label { margin-bottom: 0; }
  .nv-card--oficio__num-year  { margin-top: 0; }
  .nv-card--oficio__meta-row {
    font-size: 11.5px;
  }
  .nv-card--oficio__meta-row > * {
    padding: 0 7px;
  }
  .nv-card--oficio__excerpt {
    -webkit-line-clamp: 2;
  }
}


/* ════════════════════════════════════════════════════════════════════
   end nv-card-oficio-v1.css
   ════════════════════════════════════════════════════════════════════ */