/* nv-fallos-relacionados.css — «Fallos relacionados» bajo la ficha del oficio (27-sep-2026).
 * Tokens de marca, medidas en px (DESIGN.md). La card calca el reskin aprobado de los
 * newsletters: pestaña tintada de resultado arriba. Maqueta: 5-design/oficio-seguimiento-pro-2026-09. */

.nvf { margin: 0 0 8px; font-family: var(--oc-font-sans); color: var(--oc-text); }
.nvf .doc-section-titulo { display: flex; align-items: center; gap: 10px; }
.nvf-pro {
  position: relative; top: -1px; display: inline-block; background: var(--oc-navy); color: var(--oc-surface);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: var(--oc-r-sm); padding: 2px 8px; line-height: 1.5;
}
.nvf-pro--suave { background: var(--oc-bg-alt); color: var(--oc-navy); box-shadow: inset 0 0 0 1px var(--oc-line-2); }
.nvf-ico { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; }

.nvf-sub { margin: -6px 0 12px; }
.nvf-sub p { margin: 0; font-size: 13.5px; color: var(--oc-mute); }

.nvf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 14px; }

.nvf-card {
  display: flex; flex-direction: column; background: var(--oc-surface); border: 1px solid var(--oc-line);
  border-radius: var(--oc-r); overflow: hidden; color: inherit; text-decoration: none;
  transition: box-shadow var(--oc-dur, 180ms) var(--oc-ease, ease), border-color var(--oc-dur, 180ms) var(--oc-ease, ease);
}
.nvf-card:hover { box-shadow: var(--oc-shadow); border-color: var(--oc-line-2); color: inherit; text-decoration: none; }
.nvf-card:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(45, 90, 158, .28); }

.nvf-tab {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2px 8px;
  padding: 7px 14px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  border-bottom: 1px solid;
}
.nvf-tab-der { font-size: 11.5px; font-weight: 500; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--oc-body); }
.nvf-tab-der b { font-weight: 600; }
.nvf-tab--acoge { background: var(--oc-ok-bg); border-color: var(--oc-ok-line); color: var(--oc-ok-deep); }
.nvf-tab--parte { background: var(--oc-warn-bg); border-color: var(--oc-warn-line); color: var(--oc-warn-deep); }
.nvf-tab--rechaza { background: var(--oc-bad-bg); border-color: var(--oc-bad-line); color: var(--oc-bad-deep); }

.nvf-body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 13px 14px 14px; flex: 1; }
.nvf-body h4 {
  margin: 0; font-family: var(--oc-font-serif); font-size: 15.5px; line-height: 1.35; font-weight: 600;
  color: var(--oc-ink); text-wrap: balance;
}
.nvf-id { margin: -2px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--oc-mute); }
.nvf-rit { font-weight: 600; color: var(--oc-navy); font-variant-numeric: tabular-nums slashed-zero; }
.nvf-chip {
  font-size: 12px; font-weight: 500; line-height: 1.35; color: var(--oc-navy);
  background: var(--oc-bg-alt); border-radius: var(--oc-r-sm); padding: 2px 8px;
}
.nvf-res {
  margin: 0; font-family: var(--oc-font-doc, var(--oc-font-serif)); font-size: 14px; line-height: 1.5; color: var(--oc-body);
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.nvf-leer {
  margin-top: auto; padding-top: 2px; display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 600; color: var(--oc-navy);
}
.nvf-card:hover .nvf-leer { color: var(--oc-navy-500); text-decoration: underline; text-underline-offset: 2px; }

.nvf-muro {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 14px;
  padding: 14px 16px; background: var(--oc-bg-alt); border: 1px solid var(--oc-line); border-radius: var(--oc-r);
}
.nvf-muro p { margin: 0; flex: 1 1 300px; font-size: 14px; line-height: 1.45; color: var(--oc-ink); font-weight: 500; }
.nvf-btn {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: var(--oc-r);
  background: var(--oc-navy); color: var(--oc-surface); font-size: 14px; font-weight: 600; text-decoration: none;
  transition: background var(--oc-dur, 180ms) var(--oc-ease, ease);
}
.nvf-btn:hover { background: var(--oc-navy-500); color: var(--oc-surface); text-decoration: none; }
.nvf-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(45, 90, 158, .28); }
.nvf-precio { font-size: 12.5px; color: var(--oc-mute); font-variant-numeric: tabular-nums; }

/* «Jurisprudencia relacionada» sin Pro: difusa, recortada a ~3 ítems y con «Solo Pro» encima */
#doc-view-relacionados.nvf-rel-gated {
  position: relative; max-height: 440px; overflow: hidden; cursor: pointer;
  -webkit-mask-image: linear-gradient(to bottom, var(--oc-ink) 70%, transparent);
  mask-image: linear-gradient(to bottom, var(--oc-ink) 70%, transparent);
}
#doc-view-relacionados.nvf-rel-gated > :not(.nvf-rel-velo) {
  filter: blur(5px); user-select: none; pointer-events: none;
}
.nvf-rel-velo {
  position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center;
  padding: 0; background: transparent; border: 0; cursor: pointer; font: inherit;
}
.nvf-rel-pill {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; border-radius: var(--oc-r-pill);
  background: var(--oc-navy); color: var(--oc-surface); font-family: var(--oc-font-sans);
  font-size: 14px; font-weight: 600; box-shadow: var(--oc-shadow);
  transition: background var(--oc-dur, 180ms) var(--oc-ease, ease);
}
.nvf-rel-pill .nvf-ico { width: 15px; height: 15px; }
.nvf-rel-velo:hover .nvf-rel-pill { background: var(--oc-navy-500); }
.nvf-rel-velo:focus-visible { outline: none; }
.nvf-rel-velo:focus-visible .nvf-rel-pill { box-shadow: 0 0 0 3px rgba(45, 90, 158, .28); }

@media (max-width: 640px) {
  .nvf-grid { grid-template-columns: 1fr; }
  .nvf-muro .nvf-btn { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .nvf-card { transition: none; } }