/* Defensive: kill rogue body::before stripe + any drop cap */
body::before { display: none !important; content: none !important; }

/* ============================================================
 * editorial-deluxe.css · 2026-05-10
 * Bundle 15-item premium polish: CSS-only items + base for JS
 * Loaded AFTER editorial-polish.css + editorial-premium.css
 * ============================================================ */

/* ─── 1. Hyphenation + hanging punctuation (long-form fallo body) ─── */
.fallo-md-body, .md-body, .resumen-long-sec p, #texto-completo, .texto-pre,
.fallo-detalle p, .resumen-callout p, .doc-content p, .legal__article p,
.acerca-wrap p, .terminos-content p {
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 6 3 2;
  text-align: justify;
  text-justify: inter-word;
  word-spacing: -0.01em;
}
/* Hanging punctuation — first-letter quote hangs into margin */
.fallo-md-body p, .md-body p {
  hanging-punctuation: first allow-end;
}

/* ─── 2. Optical-sizing explícito en h1 grandes (var(--oc-font-serif) Variable axis) ─── */
.oc-doc-title, .oc-art-hero h1, .oc-hero h1, .pv4-hero h1, h1.fallo-caratula-title,
h1.legal__title, h1.land__title, .oc-doc-title {
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 32, "wght" 700;
  letter-spacing: -0.024em;
}
h2, .panel-title, .land__section-title, .legal__section-title {
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 20, "wght" 600;
}

/* ─── 3. Small-caps en kickers / panel-titles ─── */
.panel-kicker, .pv4-eyebrow, .canje__kicker, .pro__kicker,
.find__kicker, .land__kicker, .land__section-kicker, .land__who-kicker,
.legal__crumbs, .oc-tendencia-title, .resumen-tag {
  font-variant-caps: small-caps;
  font-feature-settings: "smcp" 1, "c2sc" 1, "ss01" 1;
  letter-spacing: 0.06em;
}

/* ─── 4. Magnetic CTA (sutil cursor-attract via JS, base CSS) ─── */
.oc-cta-primary, .pro-btn--primary, .pro-btn--gold, .tier__cta--primary,
.btn-primario, .pv4-bonus-popup-cta, .action-btn.primary {
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s, background .18s;
  will-change: transform;
}
.oc-cta-primary:active, .pro-btn--primary:active, .action-btn.primary:active {
  transform: translateY(1px) scale(0.99);
}

/* ─── 5. Page fade-in + main-tabs stagger ─── */
@keyframes nv-page-fade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes nv-card-stagger {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
body.nv-fade-in { animation: nv-page-fade .22s ease-out both; }
.main-tab.nv-stagger,
.tier.nv-stagger,
.pv4-counter-card.nv-stagger,
.fallo-card.nv-stagger {
  animation: nv-card-stagger .24s ease-out both;
}
.main-tab.nv-stagger:nth-child(1) { animation-delay: 0ms; }
.main-tab.nv-stagger:nth-child(2) { animation-delay: 40ms; }
.main-tab.nv-stagger:nth-child(3) { animation-delay: 80ms; }
.main-tab.nv-stagger:nth-child(4) { animation-delay: 120ms; }
@media (prefers-reduced-motion: reduce) {
  body.nv-fade-in, .main-tab.nv-stagger, .tier.nv-stagger, .pv4-counter-card.nv-stagger, .fallo-card.nv-stagger {
    animation: none !important;
  }
}

/* ─── 6. Toast notifications (estilo Stripe/Linear) ─── */
.nv-toasts-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99999;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  pointer-events: none;
  max-width: 380px;
}
.nv-toast {
  background: var(--oc-navy);
  color: var(--oc-bg);
  padding: 12px 16px 12px 14px;
  border-radius: var(--oc-r);
  font-family: var(--oc-font-sans);
  font-size: 13.5px;
  line-height: 1.45;
  box-shadow: 0 4px 14px rgba(15,33,71,0.25), 0 1px 4px rgba(11,30,63,0.08);
  display: flex;
  gap: 10px;
  align-items: flex-start;
  pointer-events: auto;
  transform: translateX(380px);
  opacity: 0;
  animation: nv-toast-in .35s cubic-bezier(.2,.8,.2,1) forwards;
  border-left: 3px solid var(--oc-navy-800);
  max-width: 100%;
}
.nv-toast.exit { animation: nv-toast-out .25s ease-in forwards; }
.nv-toast.success { border-left-color: var(--oc-ok-strong); }
.nv-toast.error { border-left-color: var(--oc-bad-strong); }
.nv-toast.info { border-left-color: var(--oc-navy-800); }
.nv-toast-icon { flex-shrink: 0; font-size: 16px; line-height: 1.4; }
.nv-toast-body { flex: 1; min-width: 0; }
.nv-toast-title {
  font-family: var(--oc-font-serif);
  font-weight: 600;
  font-size: 13.5px;
  margin-bottom: 2px;
  color: var(--oc-warn);
}
.nv-toast-msg { color: rgba(246,247,250,0.9); }
.nv-toast-close {
  background: none;
  border: 0;
  color: rgba(246,247,250,0.55);
  cursor: pointer;
  font-size: 16px;
  padding: 0 2px;
  line-height: 1;
  flex-shrink: 0;
}
.nv-toast-close:hover { color: white; }
@keyframes nv-toast-in {
  to { transform: translateX(0); opacity: 1; }
}
@keyframes nv-toast-out {
  to { transform: translateX(20px); opacity: 0; }
}
@media (max-width: 720px) {
  .nv-toasts-container { bottom: 16px; right: 16px; left: 16px; max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .nv-toast { animation: none; transform: none; opacity: 1; }
}

/* ─── 7. Number count-up — base CSS (animation lives in JS) ─── */
.nv-counter { font-variant-numeric: tabular-nums slashed-zero; transition: color .15s; }

/* ─── 8. Citation popovers (extends Tippy) — color tweak only ─── */
.tippy-box[data-theme~='nv-cite'] { background: var(--oc-navy-900); border-left: 3px solid var(--oc-warn); }
.tippy-box[data-theme~='nv-cite'] .tippy-arrow { color: var(--oc-navy-900); }

/* ─── 12. Sparkline (inline SVG) ─── */
.nv-sparkline {
  display: inline-block;
  vertical-align: middle;
  width: 64px;
  height: 18px;
}
.nv-sparkline polyline { fill: none; stroke: var(--oc-navy); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.nv-sparkline circle { fill: var(--oc-warn-strong); }

/* ─── 13. Last-visited indicator (dot ámbar) ─── */
.fallo-card.nv-visited::before,
.fallo-row.nv-visited::before,
.doc-row.nv-visited::before,
.aside-list li.nv-visited::before,
.jurisp-item.nv-visited::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--oc-warn-strong);
  border-radius: var(--oc-r-circle);
  margin-right: 6px;
  vertical-align: middle;
  opacity: 0.85;
}

/* ─── 14. Custom favicon — handled at <link> level, no CSS ─── */

/* =======================================================================
 * NV-UX-FALLO INICIO  ·  2026-07-26  ·  texto del fallo a su largo real
 * -----------------------------------------------------------------------
 * .fallo-texto-body tenia max-height:720px + overflow-y:auto sobre un texto
 * de ~16.700px => 4,3% visible, 24 "paginas" internas, scroll anidado dentro
 * de una pagina que ya scrollea. Sin media query, en movil la caja ocupaba
 * ~100% del viewport (trampa sin salida). El mismo cap estaba copiado en las
 * dos .doc-texto-body (/doc/ y panel jurisprudencia) y en .fallo-texto-pre.
 *
 * El layout se deja EXACTAMENTE como estaba: una columna, hero, tabla de
 * metadatos y medida de lectura sin tocar. Lo unico que cambia es que el
 * texto fluye a su largo en vez de vivir en una caja con scroll propio.
 * (Version anterior de este bloque incluia 2 columnas, chips, hero oculto y
 * barras indicadoras; descartado por el founder el 26-jul.)
 *
 * ROLLBACK: borrar todo entre los marcadores NV-UX-FALLO INICIO / FIN.
 * ======================================================================= */

.fallo-texto-body,
.fallo-texto-pre,
#doc-texto-section .doc-texto-body,
#panel-jurisprudencia-sii .doc-texto-body {
  max-height: none;
  overflow-y: visible;
}

/* ── Boton flotante "subir": estaba roto en TODO el sitio ──────────────
 * `body.nv-fade-in { animation: nv-page-fade .22s ease-out both }` deja, por
 * el fill-mode `both`, un transform permanente en <body>. Cualquier transform
 * distinto de `none` (incluso translateY(0)) convierte al elemento en
 * containing block de sus descendientes `position:fixed`. Resultado:
 * #btn-subir-global quedaba anclado al fondo del DOCUMENTO en vez del
 * viewport — medido en y=19.422 de un documento de 19.490px, o sea sólo
 * aparecia al llegar al final. No se notaba con paginas de 3.500px; con el
 * texto del fallo completo (19K+) es evidente.
 *
 * Ojo: la animacion TERMINA en translateY(0), que sigue siendo un transform
 * distinto de `none`, asi que el problema persiste incluso despues de que la
 * animacion acaba. No basta con esperar a que corra.
 *
 * Y no basta con neutralizar el valor computado: un elemento con una animacion
 * de `transform` EN CURSO crea containing block aunque el transform valga
 * `none`. Hay que sacar transform de la animacion, no enmascararlo.
 *
 * Se replican los keyframes animando solo opacidad — que es el mismo fundido
 * que ya hacia, sin el desplazamiento de 4px — y ademas se fija transform:none
 * con !important, que gana sobre las animaciones en la cascada. Con las dos
 * cosas no queda transform ni durante ni despues de la animacion.
 * Aplica a todo el sitio a proposito: el boton estaba igual de roto en las
 * demas paginas, solo que con paginas cortas no se notaba. */
@keyframes nv-page-fade-solo-opacidad {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body.nv-fade-in {
  animation-name: nv-page-fade-solo-opacidad;
  transform: none !important;
}

/* Hubo un segundo motivo por el que no se veia: #nv-digest-gear (preferencias
   de correo) vivia en la MISMA esquina con z-index 9998 y lo tapaba entero
   —engranaje en top 654, boton en top 650—. Se resolvia corriendo el boton una
   fila con :has(#nv-digest-gear:not([hidden])).
   Ya no hace falta: el 26-jul se elimino esa feature muerta de los 5 docroots,
   asi que la regla referenciaba un elemento inexistente y se quito para no
   dejar residuo de lo mismo que se acababa de borrar. Si algun dia vuelve un
   flotante a esa esquina, ojo con este solape: el boton no declara z-index. */

/* Imprimir / guardar PDF desde el navegador.
   editorial-polish.css fuerza display:block en @media print para que el texto
   salga, pero nunca reseteaba el cap: el fallo se cortaba en la primera
   pagina. Es el mismo arreglo de arriba aplicado a medio impreso, no un
   cambio de layout. */
@media print {
  .fallo-texto-body,
  .fallo-texto-pre,
  #doc-texto-section .doc-texto-body,
  #panel-jurisprudencia-sii .doc-texto-body {
    max-height: none !important;
    overflow: visible !important;
  }
}
/* NV-UX-FALLO FIN */