/* BuscadorLaboral — capa propia del vertical.
 *
 * Va DESPUES de las hojas de buscadortributario, que aportan el chrome
 * (cabecera, nav de dos niveles, hero, tira de pestañas, pie). Aca solo vive
 * lo que ese chrome no cubre: el wordmark, la caja de busqueda, los filtros,
 * la tarjeta de resultado y la ficha.
 *
 * La tarjeta reproduce la del listado de bt (valores tomados del CSS que
 * `js/trending-widget.js` inyecta en runtime) pero **expresados en tokens**:
 * asi se tiñe con --oc-* y el design_detector la puede leer, que es
 * justamente lo que no pasa con el original incrustado en un string de JS.
 *
 * Ni un hex. Tamaños en px, no rem.
 */

/* ── wordmark ─────────────────────────────────────────────────────────── */
/* El wordmark es ahora un SVG en curvas (assets/logo-header-bl.svg), asi que
   las reglas del de texto se fueron con el: el sitio solo sirve Manrope
   400-700 y el 800 del wordmark caia a 700. `.oc-logo` lo dimensiona desde las
   hojas de bt, igual que alli. */
.oc-logo-link { text-decoration: none; }

.lab-salto {
  position: absolute; left: -9999px; top: 0; z-index: 50;
  background: var(--oc-navy); color: var(--oc-on-navy);
  padding: 10px 16px; border-radius: var(--oc-r);
}
.lab-salto:focus { left: 12px; top: 12px; }

/* ── encabezado de seccion (imita el de bt) ───────────────────────────── */
.lab-h2 {
  font-family: var(--oc-font-serif); font-size: 26px; line-height: 1.22;
  font-weight: 600; color: var(--oc-navy-900); letter-spacing: -0.015em;
  margin: 26px 0 6px; text-wrap: balance;
}
.lab-sub { margin: 0 0 20px; color: var(--oc-body-soft); font-size: 15px; max-width: 70ch; }

/* ── conteo y fragmento ───────────────────────────────────────────────
   Hasta el 25-sep aca vivian la caja de busqueda, los filtros y la tarjeta
   propios. Las dos listas usan desde entonces el buscador y la tarjeta del TTA
   de bt (spec 2026-09-24-bl-segunda-instancia-nivel-tta, ver el bloque del
   final): quedan el conteo y la linea «En el texto». */
/* Texto corrido y no flex: en el teléfono «· por relevancia para «…»» bajaba entero y la
   línea nueva empezaba con el punto. */
.lab-resumen { margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--oc-line); line-height: 1.45; }
.lab-resumen strong { color: var(--oc-navy-900); font-size: 17px; }
.lab-resumen span { font-size: 13px; color: var(--oc-mute); }

/* fragmento con el termino buscado, bajo el resumen corto (24-sep) */
.lab-coincide { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: var(--oc-body-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lab-coincide span { font-weight: 600; color: var(--oc-navy); margin-right: 4px; }

/* ── estados ──────────────────────────────────────────────────────────── */
.lab-estado { padding: 44px 8px; text-align: center; color: var(--oc-mute); }
.lab-estado h2 { font-family: var(--oc-font-serif); font-size: 19px; color: var(--oc-navy-900); margin: 0 0 6px; }
.lab-estado p { margin: 0; font-size: 14px; }
.lab-esqueleto { background: var(--oc-surface); border: 1px solid var(--oc-line); border-radius: var(--oc-r); padding: 14px 16px; margin: 12px 0; }
.lab-barra { height: 11px; border-radius: var(--oc-r-sm); background: var(--oc-bg-alt); margin-bottom: 9px; animation: lab-latido 1.4s var(--oc-ease) infinite; }
.lab-barra:last-child { margin-bottom: 0; }
@keyframes lab-latido { 0%,100% { opacity: 1 } 50% { opacity: .45 } }
@media (prefers-reduced-motion: reduce) { .lab-barra { animation: none } }

/* `hidden` tiene que ganarle a cualquier `display` de clase. El atributo se
   apoya en `[hidden]{display:none}` de la hoja del navegador, que pierde por
   especificidad contra `.lab-paginas{display:flex}`: el JS ponia
   `paginas.hidden = true` y los botones seguian ahi. Se veia en los dos
   estados sin lista —«Sin resultados» y el error— ofreciendo pasar a una
   pagina siguiente que no existe. */
[hidden] { display: none !important; }

/* ── angosto ──────────────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .lab-h2 { font-size: 22px; }
}

/* Ficha SSR de /sentencia/{id} (api/laboral_ssr.py): el titular del hero baja de
   <h1> a <p> para que la pagina tenga un solo <h1>, el de la sentencia. Mismo
   aspecto que .oc-hero h1 (assets/ssr/oc-hero-styles.css + el letter-spacing y el
   opsz de editorial-deluxe.css). La portada conserva su <h1>. */
.oc-hero .oc-hero-titulo {
  margin: 0 0 12px; max-width: none; opacity: 1;
  font-family: var(--font-serif, var(--oc-font-serif));
  font-size: clamp(1.45rem, 3.2vw, 1.85rem); line-height: 1.18; font-weight: 700;
  letter-spacing: -0.024em; color: white;
  font-optical-sizing: auto; font-variation-settings: "opsz" 32, "wght" 700;
}
.oc-hero .oc-hero-titulo .accent { color: var(--oc-navy-100); font-weight: 700; }

/* En la ficha, el hero de la portada sobra: en movil empujaba la sentencia bajo el pliegue. */
body:has(#vista-ficha:not([hidden])) .oc-hero { display: none; }
/* ── Buscador y tarjeta del TTA (spec 2026-09-24-bl-segunda-instancia-nivel-tta) ──
   La lista usa el MARCADO de buscadortributario.cl: `.nv-bus` de
   assets/ssr/nv-buscador-tta-2026-08-04.css y la tarjeta `nv-card--fallo` de
   nv_ux.css, las dos copiadas byte a byte (⛔ no se editan acá: divergirían de BT).
   Esta capa solo re-tiñe los cuatro rgba navy que esa hoja trae escritos a mano y
   agrega lo que BT no tiene. */
.nv-bus__hero, .nv-bus__toggle { box-shadow: var(--oc-shadow-sm); }
.nv-bus__go:focus-visible { box-shadow: var(--oc-focus-ring); }
.nv-bus__chip button { background: color-mix(in srgb, var(--oc-navy) 10%, transparent); }
.nv-bus__chip button:hover { background: color-mix(in srgb, var(--oc-navy) 22%, transparent); }
/* La marca «· solo Cortes / · solo Suprema» de los campos exclusivos, discreta. */
.nv-bus__f > span em { font-style: normal; font-weight: 500; letter-spacing: 0; text-transform: none; opacity: .85; }

/* Lo que la tarjeta de BT no tiene: «no resuelve el fondo», «favorece a…», «desde la C.A.». */
.nv-card--fallo .lab-card-nota { font: 400 12.5px/1.45 var(--oc-font-sans); color: var(--oc-mute); margin-left: -4px; }
.nv-card--fallo__id .lab-card-nota { margin-left: 4px; }
.nv-card--fallo .lab-coincide { margin: -4px 0 0; }

/* La pastilla de 1ª lleva la acción («Acoge parcialmente · Despido indirecto»): en el
   teléfono puede ser más ancha que la tarjeta, y el nowrap del TTA la desbordaba. */
@media (max-width: 760px) {
  .nv-card--fallo__res { white-space: normal; align-items: flex-start; }
  /* Los rótulos de BL son más largos que los del TTA: a 390 px un chip de una línea se salía
     de la tarjeta (revisión del 24-sep). */
  .nv-card--fallo__chip { white-space: normal; max-width: 100%; }
  .nv-card--fallo__res-dot { margin-top: 5px; }   /* con dos líneas, junto a la primera */
}
/* En el teléfono el juzgado (o la Corte) baja a su propia línea y el RIT queda con la
   fecha: los nombres de BL son largos y la línea se partía en tres con separadores
   colgando, justo lo que la tarjeta del TTA evita (nv_ux.css, ≤760 px). */
@media (max-width: 760px) {
  .nv-card--fallo__id .lab-sep-lugar { display: none; }
  .nv-card--fallo__id .lab-card-lugar { order: 9; flex: 1 0 100%; }
}
/* «+2» de las materias que no caben: el resto va en su title. Solo esa chip sube sobre el
   enlace que cubre la tarjeta, y solo con mouse: toda la tarjeta sigue abriendo la ficha
   (spec §3.2) y en el teléfono no hay tooltip (revisión del 25-sep). */
.nv-card--fallo__chip.lab-chip-mas { cursor: help; }
@media (hover: hover) and (pointer: fine) {
  .nv-card--fallo__chip.lab-chip-mas { position: relative; z-index: 2; }
}

/* Paginador en el teléfono: los botones en una fila y el texto debajo, sin partir «← / Anterior». */
@media (max-width: 720px) {
  .fallos-paginacion { flex-wrap: wrap; }
  .fallos-paginacion button { white-space: nowrap; }
  .fallos-paginacion #pagina { order: 3; flex-basis: 100%; text-align: center; }
}

/* Anuncio del conteo para lectores de pantalla: una región viva que no se oculta. */
.lab-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Portada en el teléfono: con búsqueda o filtros el hero se va (clase desde
   laboral.js::modoBusqueda); empujaba la primera sentencia a la segunda pantalla. */
@media (max-width: 720px) { body.lab-buscando .oc-hero { display: none; } }

/* Alzada: el mismo panel que la portada (laboral-home-editorial.css), alineado con la
   cabecera. Sin esto el panel iba de borde a borde. */
.lab-alzada .content { width: 100%; max-width: 1264px; margin: 34px auto 0; }
@media (max-width: 720px) { .lab-alzada .content { margin-top: 20px; } }

/* Esqueleto de carga con la geometría de la tarjeta. */
.nv-card--fallo.lab-esqueleto { gap: 10px; padding: 18px 20px 16px; margin: 0; }
.nv-card--fallo.lab-esqueleto .lab-barra { margin: 0; }

/* Aviso de cobertura de la alzada: información, no decoración (va sobre la lista). */
.lab-cobertura {
  margin: 0 0 14px; padding: 12px 14px; font-size: 14px; line-height: 1.5;
  border: 1px solid var(--oc-warn-line); border-left: 3px solid var(--oc-warn);
  background: var(--oc-warn-bg); color: var(--oc-warn-deep); border-radius: var(--oc-r-sm);
}
.lab-cobertura strong { font-weight: 600; }
.lab-cobertura span { display: block; margin-top: 4px; color: var(--oc-body); }

/* La flecha «Volver» entra a la banda de la ficha (laboral-nav.js); antes de que corra el JS
   no ocupa su fila, para que la ficha servida por el SSR no salte (26-sep). */
#vista-ficha:has(.fallo-detalle-head) > .fallo-volver{display:none}