/* ============================================================
   JurisOne — SISTEMA B · composición de las secciones
   01 · La hoja (hero)   ·   04 · El registro (arquitectura)

   La retícula del sistema es una sola y gobierna toda la página:
   [ margen de asiento | campo ]. El margen lleva la trama de seguridad y
   los códigos; el campo lleva lo que se escribió. Esa columna no se mueve
   nunca: es lo que hace que la página se lea como un solo documento.
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   01 · LA HOJA
   ══════════════════════════════════════════════════════════ */
.hoja {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  isolation: isolate;
}

.hoja__lienzo {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--espacio-bloque);
  padding-block: var(--espacio-bloque) var(--espacio-bloque-mayor);
}

.hoja__cuerpo {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, var(--ancho-margen-registro)) minmax(0, 1fr);
  gap: var(--espacio-bloque);
  align-items: stretch;   /* el margen tramado corre de arriba abajo */
  align-content: stretch;
  padding-block: var(--espacio-bloque-mayor);
}
.hoja__campo { align-self: start; }

/* El margen tramado: el fondo de seguridad de un documento de valor.
   Es el elemento firma del sistema y solo vive aquí y en el registro. */
.hoja__margen {
  position: relative;
  align-self: stretch;
  min-height: var(--espacio-capitulo);
}
.hoja__margen::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--trama-seguridad);
  opacity: var(--opacidad-trama);
}

.hoja__campo > * + * { margin-top: var(--espacio-grupo); }

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-texto);
}

/* ---------- Índice: los asientos que vienen ---------- */
.hoja__asientos > * + * { margin-top: var(--espacio-texto); }

.indice-descenso {
  border-top: var(--trazo-hairline) solid var(--color-borde-fuerte);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--ancho-minimo-asiento), 1fr));
}
.indice-descenso__fila {
  border-bottom: var(--trazo-hairline) solid var(--color-borde-sutil);
}
.indice-descenso__enlace {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: var(--espacio-texto);
  min-height: var(--toque-minimo);
  padding-block: var(--espacio-corto);
  padding-inline-end: var(--espacio-elemento);
  text-decoration: none;
  color: var(--color-texto-secundario);
  transition: color var(--duracion-hover) var(--curva-salida);
}
.indice-descenso__codigo {
  font-family: var(--fuente-dato);
  font-weight: var(--peso-cuerpo);
  font-size: var(--tamano-utilidad-menor);
  letter-spacing: var(--tracking-dato);
  font-variant-numeric: tabular-nums;
  color: var(--color-texto-secundario);
}
.indice-descenso__nombre {
  font-family: var(--fuente-display);
  font-weight: var(--peso-display);
  font-size: var(--tamano-cuerpo-menor);
  color: var(--color-texto-principal);
}
@media (hover: hover) and (pointer: fine) {
  .indice-descenso__enlace:hover { color: var(--color-texto-principal); }
}

/* ---------- Pie de la hoja ---------- */
.hoja__pie {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--espacio-elemento);
  padding-top: var(--espacio-elemento);
  border-top: var(--trazo-hairline) solid var(--color-borde-sutil);
}

.hoja__canto { margin-top: auto; }


/* ══════════════════════════════════════════════════════════
   04 · EL REGISTRO (arquitectura)
   ══════════════════════════════════════════════════════════ */
.arquitectura__encabezado { margin-bottom: var(--espacio-bloque-mayor); }

.arquitectura__leyenda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-elemento);
  padding-block: var(--espacio-elemento);
  border-top: var(--trazo-hairline) solid var(--color-borde-fuerte);
  border-bottom: var(--trazo-hairline) solid var(--color-borde-fuerte);
  margin-bottom: var(--espacio-bloque);
}

.descenso { position: relative; }

/* La trama corre continua por el margen de todo el registro: es la misma
   columna del hero, y es lo que amarra la página como un solo documento. */
.descenso::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--ancho-margen-registro);
  background-image: var(--trama-seguridad);
  opacity: var(--opacidad-trama);
  pointer-events: none;
}

.capa {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, var(--ancho-margen-registro)) minmax(0, 1fr);
  gap: var(--espacio-bloque);
  padding-block: var(--espacio-bloque-mayor);
}

/* El renglón que se traza. Donde el sistema A baja una espina vertical,
   el registro escribe una línea horizontal: un asiento se abre trazando
   su renglón, no cayendo. */
.capa::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: var(--trazo-hairline);
  background-color: var(--color-borde-fuerte);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duracion-espina) var(--curva-descenso);
}
.capa[data-visible]::before { transform: scaleX(1); }

.capa__indice {
  position: sticky;
  top: var(--espacio-bloque);
  align-self: start;
  padding-inline-end: var(--espacio-grupo);
}

/* Código mecanografiado del asiento */
.capa__codigo {
  display: block;
  font-family: var(--fuente-dato);
  font-weight: var(--peso-cuerpo);
  font-size: var(--tamano-utilidad-menor);
  letter-spacing: var(--tracking-dato);
  text-transform: none;
  color: var(--color-texto-secundario);
}

/* La pregunta es el rótulo IMPRESO del formulario… */
.capa__pregunta {
  display: block;
  margin-top: var(--espacio-elemento);
  font-family: var(--fuente-utilidad);
  font-weight: var(--peso-utilidad);
  font-size: var(--tamano-utilidad-menor);
  letter-spacing: var(--tracking-utilidad);
  text-transform: uppercase;
  color: var(--color-texto-secundario);
}

/* …y el nombre de la capa es la respuesta MECANOGRAFIADA. */
.capa__nombre {
  display: block;
  margin-top: var(--espacio-minimo);
  font-family: var(--fuente-display);
  font-weight: var(--peso-display);
  font-size: var(--tamano-subtitulo);
  line-height: var(--interlinea-subtitulo);
  letter-spacing: var(--tracking-subtitulo);
  color: var(--color-texto-principal);
}

.capa__cuerpo > * + * { margin-top: var(--espacio-elemento); }

/* Capas 01 y 02: están fuera de la plataforma. Se enuncian como una lista
   de renglones, sin superficie propia. */
.lista-canal { display: block; }
.lista-canal__item {
  font-family: var(--fuente-display);
  font-weight: var(--peso-display);
  font-size: var(--tamano-placa);
  line-height: var(--interlinea-placa);
  color: var(--color-texto-principal);
  padding-block: var(--espacio-texto);
}
.lista-canal__item + .lista-canal__item {
  border-top: var(--trazo-hairline) solid var(--color-borde-sutil);
}

/* Rejilla de asientos: un renglón por módulo, no una rejilla de tarjetas. */
.rejilla-capa { display: block; }
.rejilla-capa > li + li {
  border-top: var(--trazo-hairline) solid var(--color-borde-sutil);
}

/* Los rieles y el BIN sponsor están en el cajón: ahí sí hay superficie. */
.rejilla-capa--ancha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--ancho-minimo-placa-ancha), 1fr));
  gap: var(--espacio-texto);
}
.rejilla-capa--ancha > li + li { border-top: 0; }
/* En el cajón la columna es angosta: el sello se apila sobre el asiento
   en vez de disputarle el ancho. */
.rejilla-capa--ancha .placa {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "sello" "titulo" "texto" "detalle";
  row-gap: var(--espacio-corto);
}
.rejilla-capa--ancha .placa__familia { justify-self: start; }
.rejilla-capa--ancha .placa__titulo { margin-bottom: 0; }

.modulo__detalle {
  color: var(--color-texto-secundario);
  font-size: var(--tamano-cuerpo-menor);
}
.modulo__detalle .lista-llana { margin-top: var(--espacio-corto); }

/* ---------- Rieles ---------- */
.riel__redes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-corto);
  margin-top: var(--espacio-texto);
}
.riel__red {
  padding: var(--espacio-minimo) var(--espacio-corto);
  border: var(--trazo-hairline) solid var(--color-borde-control);
  font-family: var(--fuente-dato);
  font-size: var(--tamano-utilidad-menor);
  letter-spacing: var(--tracking-dato);
  color: var(--color-texto-principal);
}

/* ---------- Ecosistema abierto: el anexo del registro ---------- */
.ecosistema {
  margin-top: var(--espacio-capitulo);
  padding-top: var(--espacio-bloque);
  border-top: var(--trazo-cierre) solid var(--color-texto-principal);
}
.ecosistema__mecanismos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-corto);
}


/* ══════════════════════════════════════════════════════════
   RESPONSIVE — el margen no cabe: se convierte en una banda superior,
   y la trama sigue estando, ahora en horizontal.
   ══════════════════════════════════════════════════════════ */
@media (max-width: 60rem) {
  .hoja__cuerpo,
  .capa {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--espacio-grupo);
  }
  .hoja__margen { min-height: var(--espacio-bloque); }
  .capa__indice { position: static; padding-inline-end: 0; }
  .descenso::before {
    inset-block-end: auto;
    inset-inline: 0;
    width: auto;
    height: var(--espacio-corto);
  }
  .capa { padding-block: var(--espacio-bloque); }
}