/* nv-pro-lock.css — el muro de BuscadorLaboral, portado de buscadortributario.cl (25-sep-2026).
   Copia de frontend/assets/nv-pro-lock.css de nv-codigo. Es granate sin tocar las reglas: todo sale de
   los tokens --oc-*, y en este docroot --oc-navy es #6e1423 (assets/tokens.css). Solo cambian los
   dos rgba escritos a mano de BT (el velo del modal y el degradado del muro), pasados a la rampa
   granate. Spec workspace 7-docs/superpowers/specs/2026-09-25-bl-gates-sin-plan-design.md §5.
   BT, 16-sep-2026: rediseño sin cuota de fallos. Texto a la izquierda, plano salvo la sombra de
   modal, checks dibujados, hoja inferior en telefono. */
.nv-pro-lock-overlay {
  position: fixed;
  inset: 0;
  background: rgba(61, 10, 19, 0.52);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.nv-pro-lock-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  background: var(--oc-surface);
  border-radius: var(--oc-r-lg);
  box-shadow: var(--oc-shadow-lg);
  text-align: left;
  font-family: var(--oc-font-sans);
  animation: nv-pro-lock-in 220ms var(--oc-ease-out, cubic-bezier(.16, 1, .3, 1)) both;
}
@keyframes nv-pro-lock-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .nv-pro-lock-card { animation: none; } }
/* Muro en página (no overlay): misma tarjeta, plana y con borde */
.nv-pro-lock-inline {
  margin: 24px auto 40px;
  max-width: 680px;
  max-height: none;
  width: calc(100% - 32px);
  border: 1px solid var(--oc-line);
  box-shadow: none;
  animation: none;
}
.nv-pro-lock-main { padding: 22px 24px 20px; }
/* Tarjetas que arman criterios.py, fallos_superiores.py y app.js con hijos directos */
.nv-pro-lock-inline:not(:has(> .nv-pro-lock-main)) { padding: 24px; }
.nv-pro-lock-card > .nv-pro-lock-chip { margin: 0 0 12px; }
.nv-pro-lock-card > .nv-pro-lock-back { margin: 16px 0 0; }
.nv-pro-lock-inline:not(:has(> .nv-pro-lock-main)) > .nv-pro-lock-nl { margin: 18px -24px 0; }
.nv-pro-lock-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 28px;
  margin: -4px -10px 10px 0;
}
.nv-pro-lock-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--oc-r-sm);
  background: none;
  color: var(--oc-mute);
  cursor: pointer;
}
.nv-pro-lock-x:hover { background: var(--oc-bg-alt); color: var(--oc-ink); }
.nv-pro-lock-x svg { width: 14px; height: 14px; }

/* Chip del plan — sólido en --oc-navy (granate en BL), sin emoji */
.nv-pro-lock-chip,
.nv-pro-lock-inline-chip {
  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;
}
.nv-pro-lock-inline-chip {
  margin-left: 8px;
  padding: 2px 9px;
  vertical-align: middle;
  cursor: pointer;
}

.nv-pro-lock-title {
  margin: 0 0 8px;
  font-family: var(--oc-font-serif);
  font-size: 21px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--oc-ink);
  text-wrap: balance;
}
.nv-pro-lock-lede {
  margin: 0 0 16px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--oc-body);
}

/* Medidor. Global = el de antes (lo usa la ficha de superiores para «% a favor», Pro). */
.nv-pro-lock-meter { margin: 16px 0 4px; }
.nv-pro-lock-meter-txt {
  display: block;
  font-size: 12.5px;
  color: var(--oc-mute);
  letter-spacing: 0.01em;
}
.nv-pro-lock-meter-txt strong {
  color: var(--oc-navy);
  font-variant-numeric: tabular-nums;
}
.nv-pro-lock-bar {
  display: block;
  height: 5px;
  margin: 8px auto 0;
  max-width: 220px;
  background: var(--oc-line);
  border-radius: var(--oc-r-pill);
  overflow: hidden;
}
.nv-pro-lock-bar > i {
  display: block;
  height: 100%;
  background: var(--oc-navy);
  border-radius: var(--oc-r-pill);
}
/* En la tarjeta: solo el chat tiene cuota */
.nv-pro-lock-main .nv-pro-lock-meter {
  margin: 0 0 16px;
  padding: 10px 12px;
  border-radius: var(--oc-r-sm);
  background: var(--oc-bg-alt);
  font-size: 13px;
  line-height: 1.45;
  color: var(--oc-body);
  font-variant-numeric: tabular-nums slashed-zero;
}
.nv-pro-lock-main .nv-pro-lock-meter b { color: var(--oc-ink); font-weight: 600; }
.nv-pro-lock-main .nv-pro-lock-bar { height: 4px; max-width: none; margin: 8px 0 0; }

.nv-pro-lock-also { margin: 0 0 6px; font-size: 12.5px; font-weight: 600; color: var(--oc-mute); }
.nv-pro-lock-benefits { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 6px; }
.nv-pro-lock-benefits li {
  display: flex;
  gap: 9px;
  align-items: baseline;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--oc-body);
}
.nv-pro-lock-benefits svg {
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  color: var(--oc-navy);
  transform: translateY(1px);
}

/* Mensaje de estado (lo usan app.js y criterios.py en sus propios muros) */
.nv-pro-lock-msg {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--oc-body);
}
.nv-pro-lock-msg:empty { margin: 0; }
.nv-pro-lock-msg.is-ok { color: var(--oc-ok-strong); }
.nv-pro-lock-msg.is-err { color: var(--oc-bad-strong); }

.nv-pro-lock-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 46px;
  border: 0;
  border-radius: var(--oc-r);
  padding: 0 18px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
  transition: background 180ms var(--oc-ease, ease);
}
.nv-pro-lock-btn--primary {
  background: var(--oc-navy);
  color: var(--oc-surface) !important;
}
.nv-pro-lock-btn--primary:hover { background: var(--oc-navy-500); }
.nv-pro-lock-btn:active { transform: translateY(1px); }
.nv-pro-lock-card a:focus-visible,
.nv-pro-lock-card button:focus-visible,
.nv-pro-lock-card input:focus-visible {
  outline: none;
  box-shadow: var(--oc-shadow-focus);
}
.nv-pro-lock-sub {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
  color: var(--oc-mute);
  font-size: 12.5px;
  line-height: 1.4;
}
.nv-pro-lock-sub a { color: var(--oc-navy-500); font-weight: 600; }
.nv-pro-lock-back {
  display: inline-block;
  margin: 0 24px 18px;
  color: var(--oc-mute);
  font-size: 13px;
  text-decoration: none;
}
.nv-pro-lock-back:hover { color: var(--oc-body); text-decoration: underline; }

/* Newsletter como banda al pie (la pinta nv-pro-lock.js) */
.nv-pro-lock-nl {
  padding: 16px 24px 20px;
  border-top: 1px solid var(--oc-line);
  background: var(--oc-bg-alt);
  text-align: left;
}
.nv-pro-lock-inline .nv-pro-lock-nl { margin-bottom: 14px; }

/* Telefono: hoja inferior, el pulgar llega al boton; sin la lista para no tapar la ficha */
@media (max-width: 600px) {
  .nv-pro-lock-overlay { align-items: flex-end; padding: 0; }
  .nv-pro-lock-overlay .nv-pro-lock-card {
    max-width: none;
    max-height: 92dvh;
    border-radius: var(--oc-r-lg) var(--oc-r-lg) 0 0;
  }
  .nv-pro-lock-main { padding: 18px; }
  .nv-pro-lock-nl { padding: 14px 18px calc(18px + env(safe-area-inset-bottom)); }
  .nv-pro-lock-overlay .nv-pro-lock-also,
  .nv-pro-lock-overlay .nv-pro-lock-benefits { display: none; }
  .nv-pro-lock-back { margin: 0 18px 16px; }
}

/* ── Chip del identificador de causa (RIT, rol, tribunal) sin plan · BT 2026-07-31 ──
   Mismo lenguaje visual que .nv-pro-lock-card: el sitio tiene UNA gramatica de
   "esto es del plan", no una por superficie. El encuadre es de utilidad, no de
   castigo: el rol es lo que permite citar la causa y verificarla en tribunal.
   Sin hex literales: los tokens --oc-* ya existen y el detector los exige. */
.nv-ident-lock {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border: 1px solid var(--oc-accent);
  border-radius: 999px;
  /* OPACO a proposito (2026-08-05). Antes era una veladura translucida del
     accent, que se veia bien sobre tarjeta blanca y desaparecia sobre fondo
     oscuro: en .fallo-detalle-head (navy) quedaba texto navy sobre navy, ~1,3:1,
     ilegible. Y ahi es donde MAS importa, porque el chip ocupa el lugar del RIT
     justo para quien no esta logueado. Opaco contrasta 8,6:1 en cualquier
     superficie y no depende de lo que tenga detras. */
  background: var(--oc-navy-100);
  color: var(--oc-navy);
  font-size: 0.86em;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
  white-space: nowrap;
}
.nv-ident-lock:hover,
.nv-ident-lock:focus-visible {
  background: var(--oc-surface);
  outline: none;
}

/* Aviso al buscar POR ROL: el momento de mayor intencion del embudo. */
.nv-ident-hint {
  margin: 14px 0;
  padding: 12px 16px;
  border: 1px solid var(--oc-accent);
  border-left-width: 4px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--oc-accent) 8%, transparent);
  color: var(--oc-body);
  font-size: 14px;
  line-height: 1.55;
}
.nv-ident-hint a {
  color: var(--oc-navy);
  font-weight: 700;
}

/* ── Candados de contenido en la ficha · BT C1/C2/C3 2026-08-21 ───────────
   Misma gramatica que .nv-pro-lock-card: chip solido, sin emoji. */
.nv-lock-blur{filter:blur(5px);pointer-events:none;user-select:none}
/* 16-sep-2026: apilados en la MISMA celda de grid, no overlay absoluto. Con el newsletter bajo el
   CTA el overlay quedo mas alto que el difuso (max-height 420px): centrado en absoluto se salia por
   arriba (chip sobre la caratula) y por abajo (form cortado). En grid la celda crece al mas alto. */
.nv-lockwrap{position:relative;display:grid}
.nv-lockwrap>*{grid-area:1/1;min-width:0}
.nv-lock-overlay{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;padding:18px;background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(248,241,242,.86));border-radius:var(--oc-r)}
.nv-lock-t{margin:2px 0 0;font-family:var(--oc-font-sans);font-size:15.5px;font-weight:700;color:var(--oc-ink);letter-spacing:-.01em}
.nv-lock-d{margin:0;font-family:var(--oc-font-sans);font-size:13px;line-height:1.5;color:var(--oc-body);max-width:420px}
.nv-lock-btn{display:inline-block;margin-top:8px;background:var(--oc-navy);color:var(--oc-surface);font-family:var(--oc-font-sans);font-size:13.5px;font-weight:600;line-height:1;padding:11px 18px;border-radius:var(--oc-r);text-decoration:none}
.nv-lock-btn:hover{background:var(--oc-navy-500);color:var(--oc-surface)}
.nv-lock-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 2px;font-family:var(--oc-font-sans)}
.nv-lock-row-txt{font-size:13px;color:var(--oc-body)}
.nv-lock-row-cta{font-size:13px;font-weight:600;color:var(--oc-navy);text-decoration:none;border-bottom:1px solid var(--oc-line-2);white-space:nowrap}
.nv-lock-row-cta:hover{color:var(--oc-navy-500)}
.nv-texto-lock-claro{font-family:var(--oc-font-doc);font-size:15.5px;line-height:1.7;color:var(--oc-body);margin:0 0 10px}
.nv-texto-lock-blur{max-height:420px;overflow:hidden;font-family:var(--oc-font-doc);font-size:15.5px;line-height:1.7;color:var(--oc-body)}
.nv-texto-lock-blur p{margin:0 0 10px}