/* Fallos de tribunales superiores (CS/CA) publicados por el SII.
   Superficie publica dentro de /criterios — 2026-07-30.

   Contraste: todos los pares texto/fondo de esta hoja estan medidos contra AA
   (4.5:1). Tres tokens quedaron VETADOS para texto porque reprueban:
     --oc-subtle      2.57-2.88:1 sobre los cuatro fondos
     --oc-warn        2.70-3.04:1
     --oc-warn-strong 4.05:1 sobre --oc-warn-bg  (y --oc-fallo-parte lo aliasea,
                      asi que la insignia "en parte" usa --oc-warn-deep, 6.27:1)
   Ver 7-docs/superpowers/specs/2026-07-30-fallos-superiores-superficie-publica-design.md

   Rol y numeros de causa van en SANS, nunca mono (typography-overrides.css +
   preferencia founder). */

/* Skip-link accesible (mismas reglas que criterios.css / asistente.css).
   NO vive en style.css: cada hoja por pagina lo redefine. Sin esta regla el
   "Saltar al contenido principal" se rinde como un enlace azul visible arriba
   del header, que es justo lo que se veia en beta el 30-jul.

   Aqui la regla va con peso normal, a diferencia de criterios.css, que la fuerza
   porque sus paginas cargan polish.css y compite. Ninguna de las hojas que carga
   esta superficie (style, header-trending, tokens, nv-tokens,
   typography-overrides, fonts) menciona .nv-skip-link: gana por si sola. */
.nv-skip-link {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 9999;
  color: var(--oc-surface);
  background: var(--oc-navy-900);
  padding: 8px 12px;
  border-radius: var(--oc-r);
  text-decoration: none;
}

.nv-skip-link:focus {
  left: 12px;
  top: 12px;
  width: auto;
  height: auto;
  overflow: visible;
  outline: 2px solid var(--oc-navy-900);
  outline-offset: 2px;
}

.fsup-main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px 64px;
}

/* ─────────────── hero ─────────────── */

.fsup-hero {
  padding: 32px 0 20px;
  border-bottom: 1px solid var(--oc-line);
  margin-bottom: 26px;
}

.fsup-hero h1 {
  font-family: var(--oc-font-serif);
  color: var(--oc-ink);
  font-size: clamp(25px, 3.4vw, 37px);
  line-height: 1.18;
  margin: 8px 0 12px;
  letter-spacing: -0.4px;
}

.fsup-hero__intro {
  color: var(--oc-body);
  font-size: 16px;
  line-height: 1.62;
  /* Columna de lectura estándar del sitio (la del lead del home): a 68ch la
     bajada se leía ancha respecto del resto (pedido founder 31-ago). */
  max-width: 62ch;
  margin: 0 0 18px;
}

.fsup-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  margin-top: 18px;
}

.fsup-stat b {
  display: block;
  font-family: var(--oc-font-sans);
  font-size: 26px;
  font-weight: 700;
  color: var(--oc-navy);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.fsup-stat span {
  display: block;
  font-size: 12.5px;
  color: var(--oc-body-soft);
  margin-top: 3px;
  letter-spacing: 0.2px;
}

/* ─────────────── nota de procedencia ───────────────
   Obligatoria en toda pagina publica de esta superficie. Redactada como nota
   de metodologia, no como disclaimer defensivo. */

.fsup-proc {
  background: var(--oc-bg-alt);
  border: 1px solid var(--oc-line);
  border-left: 3px solid var(--oc-navy);
  border-radius: var(--oc-r-sm);
  padding: 14px 18px;
  margin: 22px 0;
  color: var(--oc-body-soft);   /* 6.90:1 sobre bg-alt */
  font-size: 13.5px;
  line-height: 1.6;
}

.fsup-proc strong { color: var(--oc-text); font-weight: 650; }

.fsup-proc a {
  color: var(--oc-navy);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.fsup-proc a:hover { color: var(--oc-navy-900); }

/* version larga, pagina de metodologia */
.fsup-metodo {
  max-width: 74ch;
  color: var(--oc-body);
  font-size: 16px;
  line-height: 1.68;
}

.fsup-metodo h2 {
  font-family: var(--oc-font-serif);
  color: var(--oc-ink);
  font-size: 22px;
  margin: 34px 0 10px;
  line-height: 1.3;
}

.fsup-metodo h3 {
  color: var(--oc-text);
  font-size: 16.5px;
  margin: 24px 0 8px;
  font-weight: 650;
}

.fsup-metodo p { margin: 0 0 14px; }
.fsup-metodo ul { margin: 0 0 14px; padding-left: 22px; }
.fsup-metodo li { margin-bottom: 8px; }

.fsup-metodo__nomedible {
  background: var(--oc-warn-bg);
  border: 1px solid var(--oc-warn-line);
  border-radius: var(--oc-r-sm);
  padding: 15px 18px;
  color: var(--oc-warn-deep);   /* 6.27:1 sobre warn-bg */
  margin: 20px 0;
  font-size: 15px;
}

.fsup-metodo__nomedible strong { color: var(--oc-warn-deep); }

/* ─────────────── barra de búsqueda ───────────────
   Calca la forma del buscador del home (.nv-bus__hero: contenedor con borde,
   lupa, input sin borde, botón) con clases PROPIAS: esos estilos viven inline
   en index.html, no en una hoja compartida, así que importarlos no es opción. */

.fsup-buscar {
  display: block;
  margin: 0 0 22px;
}

/* La píldora es la FILA, no el form: desde el mesón (31-ago) el form envuelve
   también las facetas, para que buscar y filtrar combinen sin JS. */
.fsup-buscar__fila {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 4px 16px;
  margin: 0 0 14px;
  background: var(--oc-surface);
  border: 2px solid var(--oc-line-2);
  border-radius: var(--oc-r-lg);
  box-shadow: 0 1px 2px rgba(15, 31, 61, .05);
  transition: border-color var(--oc-dur-fast) var(--oc-ease),
              box-shadow var(--oc-dur-fast) var(--oc-ease);
}

.fsup-buscar__fila:focus-within { border-color: var(--oc-navy-500); box-shadow: var(--oc-focus-ring); }

.fsup-buscar__lupa { flex: none; color: var(--oc-navy-300); transition: color var(--oc-dur-fast) var(--oc-ease); }
.fsup-buscar__fila:focus-within .fsup-buscar__lupa { color: var(--oc-navy-500); }

.fsup-buscar__input {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 13px 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: 400 1.02rem/1.4 var(--oc-font-sans);
  color: var(--oc-text);
}

.fsup-buscar__input::placeholder { color: var(--oc-mute); }

.fsup-buscar__go {
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 11px 20px;
  cursor: pointer;
  background: var(--oc-navy);
  border: 0;
  border-radius: var(--oc-r-pill);
  color: var(--oc-on-navy);
  font: 700 .9rem/1 var(--oc-font-sans);
  transition: background var(--oc-dur-fast) var(--oc-ease);
}

.fsup-buscar__go:hover { background: var(--oc-navy-800); }
.fsup-buscar__go:focus-visible { outline: 0; box-shadow: var(--oc-focus-ring); }

/* ─────────────── facetas ─────────────── */

.fsup-facetas {
  display: grid;
  gap: 18px;
  margin-bottom: 26px;
}

.fsup-faceta__label {
  display: block;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: var(--oc-body-soft);
  margin-bottom: 8px;
  font-weight: 600;
}

.fsup-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.fsup-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--oc-r-pill);
  border: 1px solid var(--oc-line-2);
  background: var(--oc-surface);
  color: var(--oc-body);
  font-family: var(--oc-font-sans);
  font-size: 13px;
  text-decoration: none;
  transition: border-color var(--oc-dur-fast) var(--oc-ease),
              background var(--oc-dur-fast) var(--oc-ease);
}

.fsup-chip:hover {
  border-color: var(--oc-navy);
  background: var(--oc-bg-alt);
}

.fsup-chip.activo {
  background: var(--oc-navy);
  border-color: var(--oc-navy);
  color: var(--oc-on-navy);   /* 11.27:1 */
}

.fsup-chip__n {
  font-size: 11.5px;
  color: var(--oc-body-soft);
  font-variant-numeric: tabular-nums;
}

.fsup-chip.activo .fsup-chip__n { color: var(--oc-on-navy); opacity: 0.82; }

.fsup-chip:focus-visible {
  outline: 2px solid var(--oc-focus);
  outline-offset: 2px;
}

/* ─────────────── listado ─────────────── */

.fsup-resumen-filtro {
  color: var(--oc-body-soft);
  font-size: 13.5px;
  margin: 0 0 14px;
}

.fsup-resumen-filtro b { color: var(--oc-text); font-variant-numeric: tabular-nums; }

.fsup-lista {
  display: grid;
  gap: 12px;
}

.fsup-card {
  display: block;
  background: var(--oc-surface);
  border: 1px solid var(--oc-line);
  border-radius: var(--oc-r);
  padding: 16px 18px;
  text-decoration: none;
  box-shadow: var(--oc-shadow-sm);
  transition: border-color var(--oc-dur-fast) var(--oc-ease),
              transform var(--oc-dur-fast) var(--oc-ease);
}

.fsup-card:hover {
  border-color: var(--oc-navy-300);
  transform: translateY(-1px);
}

.fsup-card:focus-visible {
  outline: 2px solid var(--oc-focus);
  outline-offset: 2px;
}

.fsup-card__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-bottom: 7px;
}

/* rol: SANS con tabular-nums, NUNCA mono */
.fsup-rol {
  font-family: var(--oc-font-sans);
  font-variant-numeric: tabular-nums;
  font-weight: 680;
  font-size: 14.5px;
  color: var(--oc-ink);
  letter-spacing: -0.1px;
}

.fsup-tribunal {
  font-size: 12.5px;
  color: var(--oc-body-soft);
}

.fsup-fecha {
  font-size: 12.5px;
  color: var(--oc-body-soft);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}

.fsup-card__partes {
  color: var(--oc-body);
  font-size: 14.5px;
  line-height: 1.45;
  margin-bottom: 6px;
}

.fsup-card__extracto {
  color: var(--oc-body-soft);
  font-size: 13.5px;
  line-height: 1.55;
}

.fsup-card__norma {
  margin-top: 9px;
  font-size: 12px;
  color: var(--oc-body-soft);
}

/* ─────────────── insignias de decision ─────────────── */

.fsup-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--oc-r-pill);
  font-size: 11.5px;
  font-weight: 620;
  letter-spacing: 0.2px;
  white-space: nowrap;
  border: 1px solid transparent;
}

.fsup-badge--halugar {
  background: var(--oc-ok-bg);
  border-color: var(--oc-ok-line);
  color: var(--oc-ok-deep);        /* 8.15:1 */
}

.fsup-badge--nohalugar {
  background: var(--oc-bad-bg);
  border-color: var(--oc-bad-line);
  color: var(--oc-bad-deep);       /* 8.62:1 */
}

/* --oc-fallo-parte aliasea --oc-warn-strong, que da 4.05:1 sobre warn-bg y
   REPRUEBA AA. Se usa warn-deep (6.27:1). */
.fsup-badge--parte {
  background: var(--oc-warn-bg);
  border-color: var(--oc-warn-line);
  color: var(--oc-warn-deep);
}

.fsup-badge--nd {
  background: var(--oc-bg-alt);
  border-color: var(--oc-line-2);
  color: var(--oc-body-soft);      /* 6.90:1 */
}

/* ─────────────── ficha ─────────────── */

.fsup-ficha { max-width: 82ch; }

.fsup-ficha__head {
  padding: 26px 0 18px;
  border-bottom: 1px solid var(--oc-line);
  margin-bottom: 22px;
}

.fsup-ficha__rol {
  font-family: var(--oc-font-sans);
  font-variant-numeric: tabular-nums;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  color: var(--oc-ink);
  letter-spacing: -0.3px;
  margin: 6px 0 8px;
  line-height: 1.2;
}

.fsup-ficha__partes {
  font-family: var(--oc-font-serif);
  font-size: 18px;
  color: var(--oc-text);
  line-height: 1.4;
  margin: 0 0 14px;
}

.fsup-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 13.5px;
  color: var(--oc-body-soft);
  margin-top: 12px;
}

.fsup-meta dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  color: var(--oc-body-soft);
  margin-bottom: 2px;
}

.fsup-meta dd {
  margin: 0;
  color: var(--oc-text);
  font-size: 14px;
}

.fsup-seccion {
  margin: 28px 0;
}

.fsup-seccion h2 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--oc-body-soft);
  margin: 0 0 10px;
  font-weight: 650;
}

.fsup-extracto {
  background: var(--oc-bg-alt);
  border-radius: var(--oc-r-sm);
  padding: 16px 18px;
  color: var(--oc-body);
  font-size: 15px;
  line-height: 1.62;
}

.fsup-extracto__fuente {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  color: var(--oc-body-soft);
}

.fsup-texto {
  font-family: var(--oc-font-doc);
  color: var(--oc-body);
  font-size: 16px;
  line-height: 1.72;
  word-wrap: break-word;
  /* Justificado SIEMPRE con silabacion: en español, justificar sin hyphens
     abre rios de blanco y se lee peor que alineado a la izquierda.
     El <html lang="es-CL"> ya carga el diccionario correcto. */
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  /* Medida de lectura: a 828px daban ~104 caracteres por linea, muy sobre el
     rango comodo (60-75). El fallo de la ICA de referencia usa una columna de
     ~517pt sobre 612 de pagina. Acotar la medida es la mejora de legibilidad
     mas grande del lote. */
  /* +72px = el padding lateral de la "pagina": asi la MEDIDA util del texto
     sigue siendo ~68ch y no se angosta al meterlo en la caja. */
  /* Ancho completo de la seccion para alinear con la tarjeta de "la misma causa"
     y el resto de la ficha (828px). La MEDIDA de lectura se conserva con el
     padding lateral: 828 - 2x90 = 648 de texto = ~81 caracteres por linea, lo
     mismo que mide el texto de los fallos TTA. */
  background: var(--oc-surface);
  border: 1px solid var(--oc-line);
  border-radius: var(--oc-r);
  box-shadow: var(--oc-shadow-sm);
  padding: 32px 90px;
}

@media (max-width: 1000px) {
  .fsup-texto {
    padding: 26px 40px;
  }
}

@media (max-width: 640px) {
  .fsup-texto {
    padding: 20px 18px;
  }
}

/* El texto viene en <p> reales desde _parrafos_sentencia(): el espacio entre
   parrafos sale del margin, no de un \n renderizado. */
.fsup-texto > p {
  margin: 0 0 1.05em;
}
.fsup-texto > p:last-child {
  margin-bottom: 0;
}

/* Hitos de la sentencia (VISTOS, SE RESUELVE, Registrese...): separan bloques. */
.fsup-texto > p.fsup-p-hito {
  margin-top: 2em;
  margin-bottom: 1.2em;
  letter-spacing: 0.01em;
  text-align: left;
  hyphens: none;
}
.fsup-texto > p.fsup-p-hito:first-child {
  margin-top: 0;
}

/* Considerandos: el ordinal ancla la lectura en el margen. */
.fsup-texto > p.fsup-p-cons {
  margin-top: 1.5em;
}

/* El realce va en el ordinal / el hito, no en la prosa. */
.fsup-texto > p > strong {
  font-weight: 650;
}

/* Cruce de la causa entre instancias. Dos lineas por item: identificacion
   arriba, contexto abajo. Sin vinetas: es una lista de fichas, no de puntos. */
.fsup-cadena__intro {
  color: var(--oc-body-soft);
  font-size: 14px;
  margin: 0 0 12px;
}

.fsup-cadena__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fsup-cadena__item {
  border: 1px solid var(--oc-line);
  border-radius: var(--oc-r-sm);
  padding: 11px 14px;
  background: var(--oc-surface);
}

.fsup-cadena__link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.fsup-cadena__link:hover .fsup-cadena__car {
  text-decoration: underline;
}

.fsup-cadena__rit {
  font-weight: 650;
  color: var(--oc-navy);
  margin-right: 8px;
}

.fsup-cadena__car {
  color: var(--oc-body);
}

.fsup-cadena__pie {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.fsup-cadena__trib {
  color: var(--oc-body-soft);
  font-size: 13px;
}

/* Badge del tipo de recurso: mismo formato que el de resultado, tono neutro
   para que no compita con el desenlace, que es lo que se busca primero. */
.fsup-badge--rec {
  background: var(--oc-bg-alt);
  color: var(--oc-body-soft);
  border: 1px solid var(--oc-line);
}

/* Materia de la causa (heredada del fallo TTA de primera instancia): tono
   navy sobre superficie, para distinguirla del recurso (procesal, gris). */
.fsup-badge--materia {
  background: var(--oc-surface);
  color: var(--oc-navy);
  border: 1px solid var(--oc-line-2);
}

/* En pantallas angostas el chip de materia QUIEBRA en vez de heredar el
   nowrap del badge: con 60 chars mide ~335px de min-content y eso infla el
   track de .fsup-lista a 414px en un viewport de 375 (max-width:100% no
   sirve: no resuelve durante el intrinsic sizing del grid). Medido 31-ago. */
@media (max-width: 640px) {
  .fsup-badge--materia {
    white-space: normal;
    line-height: 1.35;
  }
}

/* La nota de procedencia sigue siendo obligatoria —declara que el corpus lo cura
   una de las partes del litigio— pero al final y en tono menor: informa, ya no
   compite con el contenido. */
.fsup-proc {
  margin-top: 34px;
  padding: 12px 0 0;
  border-top: 1px solid var(--oc-line);
  border-left: 0;
  background: none;
  color: var(--oc-body-soft);
  font-size: 12.5px;
  line-height: 1.6;
}
.fsup-proc strong {
  font-weight: 600;
  color: var(--oc-body-soft);
}

/* Desplegables de faceta: reemplazan el muro de 33 chips de corte y anio. */
.fsup-drops {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
.fsup-drop {
  border: 1px solid var(--oc-line);
  border-radius: var(--oc-r-sm);
  background: var(--oc-surface);
  min-width: 190px;
}
.fsup-drop > summary {
  cursor: pointer;
  padding: 8px 13px;
  font-size: 14px;
  color: var(--oc-body);
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
}
.fsup-drop > summary::-webkit-details-marker { display: none; }
.fsup-drop > summary::after { content: "▾"; margin-left: auto; color: var(--oc-body-soft); }
.fsup-drop[open] > summary::after { content: "▴"; }
.fsup-drop > summary:focus-visible { outline: 2px solid var(--oc-focus); outline-offset: 2px; }
.fsup-drop__sel { font-weight: 650; color: var(--oc-navy); }
.fsup-drop__n { color: var(--oc-body-soft); font-size: 13px; }
/* GOTCHA: display:flex en un hijo directo de <details> ANULA el colapso
   nativo — la regla del user-agent pierde contra la del autor por
   especificidad. Sin esto los 33 chips se ven igual con el desplegable
   cerrado (medido: 585px de alto con open=false). */
.fsup-drop:not([open]) > .fsup-chips {
  display: none;
}

.fsup-drop[open] > .fsup-chips { padding: 0 12px 12px; max-height: 260px; overflow-y: auto; }
.fsup-activos {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.fsup-activo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: var(--oc-r-pill);
  background: var(--oc-navy);
  color: var(--oc-on-navy);
  text-decoration: none;
  font-size: 13px;
}
.fsup-limpiar { font-size: 13px; color: var(--oc-body-soft); }

/* Filtros de Corte y Anio como <select> reales, igual que el buscador TTA.
   Sin conteos: el numero al lado de cada opcion es ruido. */
.fsup-sel {
  display: inline-flex;
}
.fsup-sel__el {
  appearance: none;
  border: 1px solid var(--oc-line);
  border-radius: var(--oc-r-sm);
  background: var(--oc-surface);
  color: var(--oc-body);
  font: 14px var(--oc-font-sans);
  padding: 8px 34px 8px 13px;
  min-width: 200px;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--oc-body-soft) 50%),
    linear-gradient(135deg, var(--oc-body-soft) 50%, transparent 50%);
  background-position: calc(100% - 17px) calc(50% + 2px), calc(100% - 12px) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.fsup-sel__el:focus-visible {
  outline: 2px solid var(--oc-focus);
  outline-offset: 2px;
}

/* ── cajón del mesón: los filtros plegados bajo «Filtros · n» ── */
.fsup-cajon {
  border: 1px solid var(--oc-line);
  border-radius: var(--oc-r-md);
  background: var(--oc-surface);
}
.fsup-cajon__sum {
  cursor: pointer;
  padding: 10px 14px;
  font: 600 14px var(--oc-font-sans);
  color: var(--oc-navy);
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
}
.fsup-cajon__sum::-webkit-details-marker { display: none; }
.fsup-cajon__sum::after { content: "▾"; margin-left: auto; color: var(--oc-body-soft); }
.fsup-cajon[open] > .fsup-cajon__sum::after { content: "▴"; }
.fsup-cajon__sum:focus-visible { outline: 2px solid var(--oc-focus); outline-offset: 2px; }
/* GOTCHA repetido del .fsup-drop: display en el hijo directo de <details>
   anula el colapso nativo — el grid solo existe con el cajón abierto. */
.fsup-cajon:not([open]) > .fsup-cajon__grid { display: none; }
.fsup-cajon[open] > .fsup-cajon__grid {
  display: grid;
  gap: 14px;
  padding: 4px 14px 14px;
  border-top: 1px solid var(--oc-line);
}

.fsup-ficha__acciones {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

/* La meta de las tarjetas de cadena (RIT · tribunal · fecha) venía PEGADA:
   esas clases nv-card--fallo__* traen su layout de una hoja del SPA que esta
   página no carga (defecto medido: "…Tribunal de Coquimbo07-09-2022"). */
.nv-card--fallo__meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
}

/* Botón «Copiar cita» de la ficha (JS: fallos-superiores.js) */
.fsup-copy-cita {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  cursor: pointer;
  background: var(--oc-surface);
  border: 1px solid var(--oc-line-2);
  border-radius: var(--oc-r-pill);
  color: var(--oc-navy);
  font: 600 13px var(--oc-font-sans);
  transition: border-color var(--oc-dur-fast) var(--oc-ease);
}
.fsup-copy-cita:hover { border-color: var(--oc-navy-500); }
.fsup-copy-cita:focus-visible { outline: 2px solid var(--oc-focus); outline-offset: 2px; }
.fsup-copy-cita.ok { color: var(--oc-ok); border-color: var(--oc-ok); }

.fsup-normas {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

/* ─────────────── estado vacio honesto ───────────────
   51 fallos del corpus (2,9%) traen texto inservible; el peor es
   literalmente "<p>xxxxx</p>". No se muestra una pagina en blanco. */

.fsup-vacio {
  background: var(--oc-warn-bg);
  border: 1px solid var(--oc-warn-line);
  border-radius: var(--oc-r);
  padding: 20px 22px;
  color: var(--oc-warn-deep);   /* 6.27:1 */
  font-size: 15px;
  line-height: 1.6;
}

.fsup-vacio strong { display: block; margin-bottom: 6px; font-size: 15.5px; }

.fsup-vacio a { color: var(--oc-warn-deep); text-decoration: underline; }

/* nota de contexto temporal (contribuciones no existen antes de 2019) */
.fsup-nota-serie {
  color: var(--oc-body-soft);
  font-size: 12.5px;
  line-height: 1.55;
  margin-top: 10px;
  padding-left: 11px;
  border-left: 2px solid var(--oc-line-2);
}

/* ─────────────── paginacion ─────────────── */

.fsup-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
}

.fsup-pager a {
  padding: 9px 18px;
  border: 1px solid var(--oc-line-2);
  border-radius: var(--oc-r-sm);
  color: var(--oc-navy);
  background: var(--oc-surface);
  text-decoration: none;
  font-size: 14px;
}

.fsup-pager a:hover { border-color: var(--oc-navy); background: var(--oc-bg-alt); }

.fsup-pager span {
  color: var(--oc-body-soft);
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}

.fsup-volver {
  display: inline-block;
  margin: 18px 0 0;
  color: var(--oc-navy);
  font-size: 14px;
  text-decoration: none;
}

.fsup-volver:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .fsup-main { padding: 0 15px 48px; }
  .fsup-stats { gap: 18px; }
  .fsup-fecha { margin-left: 0; width: 100%; }
  .fsup-texto { font-size: 15.5px; }
}

.fsup-ficha__resumen {
  color: var(--oc-body);
  font-size: 15px;
  line-height: 1.55;
  margin: 10px 0 0;
}

.fsup-drops {
  align-items: center;
}
.fsup-sel {
  display: inline-flex;
  align-items: center;
}

/* ─────────────── puente a /criterios ───────────────
   /criterios pasa a ser sub-funcion de esta seccion (decision founder 2026-07-30):
   los mismos tribunales, pero la doctrina que los TTA citan al fallar, rankeada por
   cuantas sentencias la invocan. Va sobre las facetas y no al pie porque esta
   superficie es publica y /criterios es Pro: es el unico punto donde el lector que
   todavia no paga se cruza con la capa de analisis. */

.fsup-crit {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 24px;
  padding: 14px 18px;
  border: 1px solid var(--oc-line);
  border-left: 3px solid var(--oc-navy);
  border-radius: var(--oc-r-sm);
  background: var(--oc-bg-alt);
  text-decoration: none;
  transition: background .15s var(--oc-ease), border-color .15s var(--oc-ease);
}

.fsup-crit:hover {
  background: var(--oc-surface);
  border-color: var(--oc-navy-300);
  border-left-color: var(--oc-navy);
}

.fsup-crit:focus-visible {
  outline: 2px solid var(--oc-focus);
  outline-offset: 2px;
}

.fsup-crit__ico {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: var(--oc-navy);
}

.fsup-crit__txt {
  flex: 1 1 auto;
  min-width: 0;
}

.fsup-crit__t {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.3;
  color: var(--oc-navy);
}

.fsup-crit__pro {
  background: var(--oc-navy);
  color: var(--oc-on-navy);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3px;
  padding: 1px 6px;
  border-radius: var(--oc-r-sm);
}

.fsup-crit__d {
  display: block;
  margin-top: 3px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--oc-body-soft);   /* 6.90:1 sobre bg-alt */
}

.fsup-crit__ir {
  flex: 0 0 auto;
  font-size: 18px;
  line-height: 1;
  color: var(--oc-navy);
}

@media (max-width: 560px) {
  .fsup-crit {
    align-items: flex-start;
    padding: 13px 15px;
  }
  .fsup-crit__ir { display: none; }
}

/* El analisis del SII venia como un muro: se renderizaba escapado dentro de un
   div plano y los saltos del dato se colapsaban. Ahora llega en <p> reales, asi
   que el espacio entre parrafos sale del margin. Misma medida de lectura que el
   resto de la ficha: a 828px de ancho la prosa quedaba en ~104 caracteres. */
.fsup-extracto > p {
  /* La mitad de lo que tenia: 0.95em separaba demasiado para un analisis que se
     lee de corrido, no para una sentencia con considerandos. */
  margin: 0 0 0.48em;
}
.fsup-extracto > p:last-child {
  margin-bottom: 0;
}
.fsup-extracto {
  padding-left: 74px;
  padding-right: 74px;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

@media (max-width: 1000px) {
  .fsup-extracto {
    padding-left: 32px;
    padding-right: 32px;
  }
}

@media (max-width: 640px) {
  .fsup-extracto {
    padding-left: 16px;
    padding-right: 16px;
    text-align: left;
  }
}

/* El mismo enlace de volver, tambien arriba: con el texto completo de la
   sentencia abajo, regresar al listado obligaba a bajar varias pantallas. */
.fsup-volver--top {
  display: inline-block;
  margin-bottom: 14px;
}


/* ── Tribunal Constitucional ────────────────────────────────────────────────
   La superficie del TC reusa este mismo sistema de tarjetas y ficha. Solo dos
   cosas son suyas, y las dos existen porque la fuente NO publica lo que dicen. */

/* Rotulo de procedencia del resultado. El TC define el parametro `Resultado` y
   lo devuelve NULL en 0 de 68 fichas (medido 2026-08-20), asi que el valor que
   se muestra lo derivamos nosotros del texto. Decirlo no es un adorno: sin este
   rotulo el lector atribuye al Tribunal una lectura que es nuestra. */
.fsup-badge__nv {
  font-weight: 400;
  font-size: 0.78em;
  opacity: 0.75;
  margin-left: 0.4em;
  border-left: 1px solid currentColor;
  padding-left: 0.5em;
  cursor: help;
}

/* Serie de sentencias identicas: el interes moratorio del art. 53 CT genera
   decenas de STC practicamente iguales. El listado y el daily las colapsan bajo
   la lider; en la ficha se declara de que serie es. */
.fsup-serie {
  margin: 0.75rem 0 0;
  padding: 0.6rem 0.85rem;
  border-left: 3px solid var(--oc-line);
  background: var(--oc-bg-alt);
  font-size: 0.92rem;
  color: var(--oc-body-soft);
}
.fsup-serie a { color: inherit; text-decoration: underline; }

/* Nota de procedencia. Existe para que el lector distinga lo que publica la fuente
   de lo que derivamos nosotros; sin estilo propio se leía como una frase más del
   fallo y no cumplía su función. */
.fsup-nota {
  margin: 0.6rem 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--oc-body-soft);
  font-style: italic;
}

/* Enlace a la causa cruzada. Sin viñeta: es una acción, no un listado. */
.fsup-cruce {
  list-style: none;
  margin: 0.7rem 0 0;
  padding: 0;
}
.fsup-cruce li {
  padding: 0.55rem 0.8rem;
  border-left: 3px solid var(--oc-accent);
  background: var(--oc-bg-alt);
  margin: 0 0 0.4rem;
  font-size: 0.94rem;
}
.fsup-cruce a { font-weight: 600; }
.fsup-cruce .fsup-card__norma { margin: 0.3rem 0 0; font-size: 0.9rem; }


/* ── Tribunal Constitucional dentro del listado de superiores ───────────────
   Integrado como tercera categoría el 2026-08-20. Comparte la tarjeta; sólo
   cambia DÓNDE va el acento, porque el contenido no es el mismo: en CS/CA la
   identidad de la causa es la carátula y el rol; en el TC es el precepto que se
   impugnó. */

/* El rol del TC va en Manrope regular, no en el 680 de CS/CA: acá es una
   referencia, no el titular. */
.fsup-rol--tc {
  font-weight: 450;
  letter-spacing: 0;
  color: var(--oc-body-soft);
}

/* El tema lleva el acento de la tarjeta: es lo que se busca al escanear. */
.fsup-card__partes--tema {
  color: var(--oc-ink);
  font-weight: 560;
  font-size: 15px;
  letter-spacing: -0.1px;
}

/* Marca de procedencia del resultado. Va FUERA de la pastilla: adentro obligaba
   a una pastilla dentro de otra, se veía rota y no se entendía. La nota al pie
   de la lista explica qué significa; acá sólo señala cuáles son. */
.fsup-ast {
  margin-left: 2px;
  font-size: 11px;
  color: var(--oc-body-soft);
  cursor: help;
}


/* ── Ficha del Tribunal Constitucional ──────────────────────────────────────
   El titular es el TEMA; el rol y la fecha son metadatos. Antes era al revés y
   el rol grande no le decía nada a nadie. */

.tcf-tema {
  margin: 4px 0 8px;
  line-height: 1.2;
  text-wrap: balance;
}

/* Rol · fecha · competencia · sala. Manrope regular, sin negritas. */
.tcf-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 13.5px;
  color: var(--oc-body-soft);
  font-variant-numeric: tabular-nums;
  margin-bottom: 12px;
}
.tcf-rol { color: var(--oc-body); }

.tcf-resultado { margin: 0 0 6px; }

.tcf-resumen {
  margin: 10px 0 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--oc-body);
  max-width: 70ch;
}

/* Procedencia del dato. Se dice una vez, en prosa y completa: la versión previa
   metía "según nuestra lectura" DENTRO de la pastilla del resultado, y se leía
   como una pastilla partida en dos que no explicaba nada. */
.tcf-proc {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--oc-body-soft);
  max-width: 68ch;
}

/* Normas como pastillas. Eran dos <h3> con listas de viñetas, anidados dentro de
   una sección que ya tenía su encabezado: tres niveles de título para seis
   palabras. */
.tcf-normas {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 2px 0 4px;
}
.tcf-normas__grupo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 8px;
}
.tcf-normas__label {
  font-size: 11.5px;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--oc-body-soft);
  margin-right: 2px;
}
.tcf-norma {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid var(--oc-line);
  border-radius: var(--oc-r-pill);
  background: var(--oc-surface);
  font-size: 13px;
  color: var(--oc-ink);
  text-decoration: none;
  transition: border-color 200ms ease, background 200ms ease;
}
.tcf-norma:hover { border-color: var(--oc-accent); background: var(--oc-bg-alt); }
.tcf-norma:focus-visible { outline: 2px solid var(--oc-accent); outline-offset: 2px; }
.tcf-norma--plano { color: var(--oc-body-soft); }

/* Descarga del original. */
.tcf-original {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 16px 0 0;
}
.tcf-original__btn {
  display: inline-block;
  padding: 8px 16px;
  border-radius: var(--oc-r-sm);
  background: var(--oc-navy);
  color: var(--oc-on-navy);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 200ms ease, transform 200ms ease;
}
.tcf-original__btn:hover { opacity: 0.88; }
.tcf-original__btn:active { transform: translateY(1px); }
.tcf-original__btn:focus-visible { outline: 2px solid var(--oc-accent); outline-offset: 2px; }
.tcf-original__nota { font-size: 12.5px; color: var(--oc-body-soft); }