/* ════════════════════════════════════════════════════════════════════
   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: 6px;
  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: 4px;
  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: 999px;
  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: 3px;
  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 6px 6px 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-style: italic;
  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: 4px;
  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: 3px;
  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: 4px;
  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: 999px;
  font-family: var(--font-serif);
  font-style: italic;
  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: 999px;
  font-family: var(--font-serif);
  font-style: italic;
  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 6px 0 6px;
  /* 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;
  }
}

/* ════════════════════════════════════════════════════════════════════
   end hit-target.css
   ════════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════════
   nv-card-fallo-polished.css · NormaViva · Fallo TTA listing card
   sprint5-round4 · drop-in concat al final de /assets/nv_ux.css
   --------------------------------------------------------------------
   REDISEÑO GREENFIELD del .nv-card--fallo.
   - Reemplaza el grid 3-col del Round 2 (chip · head · actions).
   - Nuevo: flex-column · chip arriba kicker-style · caratula serif
     full-width · excerpt con money + law-refs inline · meta-row al pie.
   - Sin actions inline (card es link entero · acciones quedan fuera).
   --------------------------------------------------------------------
   Selectores nuevos (NO romper hooks legacy):
     .nv-card--fallo                        redefinido
     .nv-card--fallo__chip-row              top row · chip + opcional pulse-dot
     .nv-card--fallo__caratula              serif headline
     .nv-card--fallo__excerpt               serif body con money/law-ref inline
     .nv-card--fallo__money                 cifras tabular Inter
     .nv-card--fallo__law-ref               refs legales inline link
     .nv-card--fallo__meta-row              bottom row: RIT · tribunal · fecha
     .nv-card--fallo__rit
     .nv-card--fallo__tribunal
     .nv-card--fallo__fecha
     .nv-card--fallo--selected              state (multi-select compare)
     .nv-card--fallo--loading               skeleton state
     .nv-card--fallo--error                 error state
   --------------------------------------------------------------------
   Density: tomado del wrapper .nv-card-grid[data-density]
   Density "comoda" (default desktop): padding 22 24 · gap 12
   Density "densa" (tablet/mobile/lista densa): padding 14 16 · gap 8
   ════════════════════════════════════════════════════════════════════ */


/* ──────────────────────────────────────────────────────────────────
   .nv-card-grid · density tokens override para fallo polish
   (extiende los del Round 2 · valores nuevos para esta variant)
   ────────────────────────────────────────────────────────────────── */
.nv-card-grid {
  --fallo-pad-y: 22px;
  --fallo-pad-x: 24px;
  --fallo-gap: 12px;
  --fallo-caratula-fs: 17.5px;
  --fallo-excerpt-fs: 14.5px;
  --fallo-meta-fs: 12.5px;
}
.nv-card-grid[data-density="densa"] {
  --fallo-pad-y: 14px;
  --fallo-pad-x: 16px;
  --fallo-gap: 8px;
  --fallo-caratula-fs: 16px;
  --fallo-excerpt-fs: 13.5px;
  --fallo-meta-fs: 12px;
}


/* ──────────────────────────────────────────────────────────────────
   .nv-card--fallo · greenfield redesign
   RESET del grid Round 2 · nuevo flex-column layout
   ────────────────────────────────────────────────────────────────── */
.nv-card--fallo {
  /* Reset del grid Round 2 */
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  grid-template-areas: none;
  /* Layout nuevo */
  gap: var(--fallo-gap);
  padding: var(--fallo-pad-y) var(--fallo-pad-x);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  position: relative;
  transition: border-color var(--dur-fast) var(--ease-out);
  isolation: isolate;
}

/* anular cualquier subselector grid-area del Round 2 */
.nv-card--fallo > * {
  grid-area: auto;
}

.nv-card--fallo:hover {
  border-color: var(--border-strong);
}
.nv-card--fallo:hover .nv-card--fallo__caratula {
  color: var(--navy-800);
}
.nv-card--fallo:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-color: var(--navy-700);
}


/* ──────────────────────────────────────────────────────────────────
   chip-row · top row con chip resultado (+ opcional pulse-dot reciente)
   ────────────────────────────────────────────────────────────────── */
.nv-card--fallo__chip-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
}
.nv-card--fallo__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--fallo__reciente::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--verde);
  box-shadow: 0 0 0 0 var(--verde);
  animation: nv-fallo-pulse 2.4s ease-out infinite;
}
@keyframes nv-fallo-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--fallo__reciente::before { animation: none; }
}


/* ──────────────────────────────────────────────────────────────────
   caratula · headline serif
   ────────────────────────────────────────────────────────────────── */
.nv-card--fallo__caratula {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fallo-caratula-fs);
  line-height: 1.32;
  color: var(--ink-950);
  letter-spacing: -0.014em;
  margin: 0;
  /* Truncate clamp 2 líneas con ellipsis */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-wrap: balance;
  /* Display correction · raw data en mayúsculas todas */
  text-transform: none; /* preserva el casing original · "TELEFONICA" queda así · es la data */
  transition: color var(--dur-fast) var(--ease-out);
}


/* ──────────────────────────────────────────────────────────────────
   excerpt · serif body · 2-3 líneas con ellipsis
   ────────────────────────────────────────────────────────────────── */
.nv-card--fallo__excerpt {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fallo-excerpt-fs);
  line-height: 1.55;
  color: var(--ink-700);
  letter-spacing: -0.002em;
  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--fallo__excerpt {
  -webkit-line-clamp: 2;
}


/* ──────────────────────────────────────────────────────────────────
   money · cifras inline · tabular Inter darker
   ────────────────────────────────────────────────────────────────── */
.nv-card--fallo__money {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.005em;
  /* baseline alignment dentro de serif text · ajuste fino */
  font-size: 0.94em;
}


/* ──────────────────────────────────────────────────────────────────
   law-ref · refs art. inline · sutil link
   ────────────────────────────────────────────────────────────────── */
.nv-card--fallo__law-ref {
  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--fallo__law-ref:hover {
  color: var(--navy-700);
  border-bottom-color: var(--navy-400);
}


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

.nv-card--fallo__rit {
  color: var(--ink-800);
  font-weight: 600;
}
.nv-card--fallo__tribunal {
  color: var(--ink-700);
}
.nv-card--fallo__fecha {
  color: var(--ink-600);
}
.nv-card--fallo__tipo {
  color: var(--ink-600);
  font-style: italic;
  font-family: var(--font-serif);
  font-size: calc(var(--fallo-meta-fs) - 0.5px);
}


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


/* ──────────────────────────────────────────────────────────────────
   state: loading skeleton · respiración no shimmer
   ────────────────────────────────────────────────────────────────── */
.nv-card--fallo--loading {
  pointer-events: none;
  cursor: default;
}
.nv-card--fallo--loading .nv-fallo-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: 3px;
  color: transparent;
  animation: nv-fallo-skel-pulse 2.4s ease-in-out infinite;
}
.nv-fallo-skel--chip      { height: 22px; width: 80px; border-radius: 999px; }
.nv-fallo-skel--caratula  { height: 20px; width: 86%; }
.nv-fallo-skel--caratula-2 { height: 20px; width: 64%; }
.nv-fallo-skel--text      { height: 14px; width: 100%; }
.nv-fallo-skel--text-2    { height: 14px; width: 92%; }
.nv-fallo-skel--text-3    { height: 14px; width: 70%; }
.nv-fallo-skel--meta      { height: 12px; width: 60%; margin-top: 4px; }
@keyframes nv-fallo-skel-pulse {
  0%, 100% { background-position: 110% 50%; }
  50%      { background-position: -110% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .nv-card--fallo--loading .nv-fallo-skel { animation: none; background-position: 50% 50%; }
}


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


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


/* ──────────────────────────────────────────────────────────────────
   chip indeterminado · 4to estado · sin ícono Tier 2 (no existe)
   reusa .nv-chip-result base sin modifier
   ────────────────────────────────────────────────────────────────── */
.nv-chip-result--indeterminado {
  color: var(--gris-700);
  background: color-mix(in srgb, var(--gris-700) 8%, var(--white));
  border-color: color-mix(in srgb, var(--gris-700) 22%, transparent);
}
.nv-chip-result--indeterminado .nv-chip-result__icon {
  display: none;
}
.nv-chip-result--indeterminado {
  padding-left: 12px;
}


/* ──────────────────────────────────────────────────────────────────
   Responsive · tablet + mobile
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .nv-card--fallo {
    --fallo-pad-y: 18px;
    --fallo-pad-x: 20px;
  }
}
@media (max-width: 640px) {
  .nv-card--fallo {
    --fallo-pad-y: 16px;
    --fallo-pad-x: 16px;
    --fallo-caratula-fs: 16px;
    --fallo-excerpt-fs: 14px;
  }
  .nv-card--fallo__meta-row {
    font-size: 11.5px;
  }
  .nv-card--fallo__meta-row > * {
    padding: 0 7px;
  }
  /* en mobile, mostrar sólo 2 líneas de excerpt incluso en density comoda */
  .nv-card--fallo__excerpt {
    -webkit-line-clamp: 2;
  }
}


/* ════════════════════════════════════════════════════════════════════
   end nv-card-fallo-polished.css
   ════════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════════
   nv-card-fallo-v2.css · NormaViva · Fallo card · POLISH PASS 2
   sprint5-round5 · drop-in concat al final de /assets/nv_ux.css
   --------------------------------------------------------------------
   Cambios vs Round 4 polished:
     1. Border + shadow-sm at rest (Opción A · Westlaw soft lift)
        El anti-default original §17 "sin shadow at rest" se REVISA
        para esta variante específica · contra fondo --paper warm,
        border thin solo se diluye y las cards parecen párrafos sueltos.
        Shadow-sm (token existente · 0 1px 2px rgba navy 0.04) da el
        "lift editorial" sin caer en SaaS-tech.
     2. Hover: shadow-md + border-color navy-300 (sin scale/translate)
     3. Serif SOLO en .nv-card--fallo__caratula (founder explicit)
        - excerpt pasa a Inter sans 14.5px ink-700
        - tipo pasa a Inter sans 12px italic
        - meta ya era sans ✓
     4. Border al rest pasa de --ink-200 a --ink-200 (sin cambio) PERO
        con shadow agregado · combo da contraste visual claro contra paper
   --------------------------------------------------------------------
   Estos selectores OVERRIDE los del Round 4 polished por orden de
   cascade · concat al final · same specificity wins.
   ════════════════════════════════════════════════════════════════════ */


/* ──────────────────────────────────────────────────────────────────
   .nv-card--fallo · v2 · Westlaw soft lift
   ────────────────────────────────────────────────────────────────── */
.nv-card--fallo {
  border: 1px solid var(--ink-200);
  background: var(--surface);
  /* Shadow at rest · subtle lift contra paper warm bg */
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.nv-card--fallo:hover {
  border-color: var(--navy-300);
  box-shadow: var(--shadow-md);
}
.nv-card--fallo:focus-within {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-color: var(--navy-700);
  box-shadow: var(--shadow-md);
}


/* ──────────────────────────────────────────────────────────────────
   Tipografía v2 · serif SOLO en caratula (founder explicit)
   ────────────────────────────────────────────────────────────────── */

/* caratula sigue serif 600 (única excepción) */
.nv-card--fallo__caratula {
  /* serif preservado del v1 · sin override · documentado para claridad */
  font-family: var(--font-serif);
  font-weight: 600;
}

/* excerpt pasa a sans */
.nv-card--fallo__excerpt {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-700);
  letter-spacing: 0.005em;
}
.nv-card-grid[data-density="densa"] .nv-card--fallo__excerpt {
  font-size: 13.5px;
  -webkit-line-clamp: 2;
}

/* money inline · sigue tabular Inter (estaba bien) · darker color */
.nv-card--fallo__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; /* match al excerpt · ya no scale 0.94 · ahora ambos son sans 14.5 */
}

/* law-ref sigue como v1 · sans con underline-on-hover · z-index 1 preservado */
/* (selectores del v1 polished stay · solo confirmamos override de font-family) */
.nv-card--fallo__law-ref {
  font-family: var(--font-sans);
}

/* tipo pasa de serif italic a sans italic */
.nv-card--fallo__tipo {
  font-family: var(--font-sans);
  font-style: italic;
  font-size: 12px;
  color: var(--ink-600);
  font-weight: 400;
}


/* ──────────────────────────────────────────────────────────────────
   Selected state v2 · ajuste shadow para no doblar
   ────────────────────────────────────────────────────────────────── */
.nv-card--fallo--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--fallo--selected:hover {
  box-shadow: var(--shadow-md), inset 3px 0 0 var(--navy-800);
  border-color: var(--navy-800);
}


/* ──────────────────────────────────────────────────────────────────
   Loading + error · ajuste shadow para coherencia
   ────────────────────────────────────────────────────────────────── */
.nv-card--fallo--loading {
  box-shadow: var(--shadow-sm);
}
.nv-card--fallo--error {
  box-shadow: var(--shadow-sm);
}


/* ════════════════════════════════════════════════════════════════════
   end nv-card-fallo-v2.css
   ════════════════════════════════════════════════════════════════════ */
/* Fix caratula-link hotfix */
.nv-card--fallo__caratula-link,
.nv-card--fallo__caratula a {color:inherit;text-decoration:none}
.nv-card--fallo__caratula-link:hover{color:var(--navy-800)}

/* ════════════════════════════════════════════════════════════════════
   FORCE Round 5 v2 visual · sprint5-round5 hotfix2
   bypass cualquier CSS legacy de beta que pueda overridear
   ════════════════════════════════════════════════════════════════════ */
.nv-card.nv-card--fallo {
  background: var(--surface) !important;
  border: 1px solid var(--ink-200) !important;
  border-radius: 6px !important;
  padding: 22px 22px 18px !important;
  box-shadow: 0 1px 2px rgba(15,33,71,0.04), 0 1px 1px rgba(15,33,71,0.03) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  transition: border-color 120ms ease-out, box-shadow 120ms ease-out !important;
  text-decoration: none !important;
  color: inherit !important;
  position: relative !important;
}
.nv-card.nv-card--fallo:hover {
  border-color: var(--navy-300) !important;
  box-shadow: 0 2px 4px rgba(15,33,71,0.06), 0 4px 12px rgba(15,33,71,0.05) !important;
}
.nv-card.nv-card--fallo .nv-card--fallo__caratula-link {
  color: var(--ink-950) !important;
  text-decoration: none !important;
}
.nv-card.nv-card--fallo:hover .nv-card--fallo__caratula-link {
  color: var(--navy-800) !important;
}

/* ════════════════════════════════════════════════════════════════════
   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: 6px;
  /* 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: 6px;
}
.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: 3px;
  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: 50%;
  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: 3px;
  color: transparent;
  animation: nv-oficio-skel-pulse 2.4s ease-in-out infinite;
}
.nv-oficio-skel--tag      { height: 18px; width: 78px; border-radius: 3px; }
.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
   ════════════════════════════════════════════════════════════════════ */