/* ============================================================
   JurisOne — SISTEMA B · librería de componentes.
   Mismos nombres de clase que el sistema A: el marcado y el JavaScript son
   idénticos en las tres propuestas. Lo que cambia es la materia.

   La diferencia de fondo con el sistema A: aquí NO HAY PLACAS. Nada se
   eleva, nada se apila, nada tiene esquina redondeada. La jerarquía la
   hacen el renglón, la sangría y el peso de la letra. Un registro es plano.
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   TAXONOMÍA DE FAMILIAS — las cinco tintas de sello
   ══════════════════════════════════════════════════════════ */
[data-familia]                { --familia: var(--color-borde-control); }
[data-familia="identidad"]    { --familia: var(--color-familia-identidad); }
[data-familia="dinero"]       { --familia: var(--color-familia-dinero); }
[data-familia="emision"]      { --familia: var(--color-familia-emision); }
[data-familia="aceptacion"]   { --familia: var(--color-familia-aceptacion); }
[data-familia="inteligencia"] { --familia: var(--color-familia-inteligencia); }


/* ══════════════════════════════════════════════════════════
   BOTÓN — en un formulario, el botón es una casilla, no una pastilla.
   ══════════════════════════════════════════════════════════ */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-corto);
  min-height: var(--toque-minimo);
  padding: var(--espacio-texto) var(--espacio-grupo);
  border: var(--trazo-hairline) solid transparent;
  border-radius: var(--radio-chip);
  background-color: transparent;
  color: var(--color-texto-principal);
  font-family: var(--fuente-utilidad);
  font-weight: var(--peso-utilidad);
  font-size: var(--tamano-utilidad);
  letter-spacing: var(--tracking-utilidad);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--duracion-presion) var(--curva-salida),
    background-color var(--duracion-hover) var(--curva-salida),
    border-color var(--duracion-hover) var(--curva-salida),
    color var(--duracion-hover) var(--curva-salida);
}
.boton:active { transform: scale(var(--escala-presion)); }

.boton--primario {
  background-color: var(--color-superficie-inversa);
  color: var(--color-texto-inverso);
  border-color: var(--color-superficie-inversa);
}

.boton--secundario {
  border-color: var(--color-borde-control);
  color: var(--color-texto-principal);
}

.boton--llano {
  padding-inline: var(--espacio-corto);
  color: var(--color-texto-secundario);
}

@media (hover: hover) and (pointer: fine) {
  .boton--primario:hover {
    background-color: color-mix(in srgb, var(--color-superficie-inversa) 86%, var(--color-superficie-base));
  }
  .boton--secundario:hover { border-color: var(--color-texto-principal); }
  .boton--llano:hover { color: var(--color-texto-principal); }
}


/* ══════════════════════════════════════════════════════════
   ASIENTO — lo que en el sistema A es una placa.
   Aquí es un renglón del registro: sin fondo, sin borde, sin radio.
   Columna izquierda el asiento, columna derecha el sello de clasificación.
   ══════════════════════════════════════════════════════════ */
.placa {
  position: relative;
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "titulo  sello"
    "texto   sello"
    "detalle sello";
  column-gap: var(--espacio-bloque);
  padding-block: var(--espacio-elemento);
  background-color: transparent;
  border: 0;
  border-radius: var(--radio-chip);
  text-align: left;
  transition:
    opacity var(--duracion-filtro) var(--curva-salida),
    filter var(--duracion-filtro) var(--curva-salida);
}

/* El cajón: lo que está por debajo del alcance de la plataforma
   (BIN sponsor y rieles). No se hunde con sombra: se hunde con superficie. */
.placa--hundida {
  background-color: var(--color-superficie-hundida);
  padding: var(--espacio-grupo);
}
/* El panel no es un asiento: es un recuadro del formulario. No hereda la
   retícula [asiento | sello], vuelve a flujo de bloque. */
.placa--panel {
  display: block;
  padding: var(--espacio-grupo);
  border: var(--trazo-hairline) solid var(--color-borde-fuerte);
}
.placa--plana,
.placa--compacta { padding-block: var(--espacio-corto); }

.placa--pulsable { cursor: pointer; }
.placa--pulsable:active { transform: scale(var(--escala-presion-placa)); }

/* Estado atenuado por el filtro de familia */
.placa[data-atenuada] {
  opacity: var(--atenuacion-filtrado);
  filter: saturate(var(--saturacion-filtrado));
}

.placa__titulo { grid-area: titulo; margin-bottom: var(--espacio-minimo); }
.placa__texto  {
  grid-area: texto;
  font-family: var(--fuente-texto);
  font-size: var(--tamano-cuerpo-menor);
  line-height: var(--interlinea-cuerpo);
  color: var(--color-texto-secundario);
  max-width: var(--ancho-lectura);
}

/* El sello de clasificación: el nombre de la familia, mecanografiado en su
   tinta, dentro de una casilla de un solo filete. No es un icono ni una
   barra de color: es la marca que deja un sello sobre un documento. */
.placa__familia {
  grid-area: sello;
  align-self: start;
  justify-self: end;
  display: inline-block;
  padding: var(--espacio-minimo) var(--espacio-corto);
  border: var(--trazo-hairline) solid var(--familia);
  color: var(--familia);
  font-family: var(--fuente-dato);
  font-weight: var(--peso-display);
  font-size: var(--tamano-utilidad-menor);
  letter-spacing: var(--tracking-utilidad);
  text-transform: uppercase;
  white-space: nowrap;
}

.placa .detalle { grid-area: detalle; }

@media (max-width: 48rem) {
  .placa {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "sello" "titulo" "texto" "detalle";
    row-gap: var(--espacio-corto);
  }
  .placa__familia { justify-self: start; }
  .placa__titulo { margin-bottom: 0; }
}


/* ══════════════════════════════════════════════════════════
   LEYENDA DE FAMILIAS — las cinco casillas de clasificación del registro
   ══════════════════════════════════════════════════════════ */
.leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-corto);
  align-items: center;
}

.chip-familia {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque-minimo);
  padding-inline: var(--espacio-texto);
  background-color: transparent;
  border: var(--trazo-hairline) solid var(--color-borde-control);
  border-radius: var(--radio-chip);
  color: var(--familia);
  font-family: var(--fuente-dato);
  font-weight: var(--peso-display);
  font-size: var(--tamano-utilidad-menor);
  letter-spacing: var(--tracking-utilidad);
  text-transform: uppercase;
  cursor: pointer;
  transition:
    transform var(--duracion-presion) var(--curva-salida),
    border-color var(--duracion-hover) var(--curva-salida),
    color var(--duracion-hover) var(--curva-salida),
    background-color var(--duracion-hover) var(--curva-salida);
}
.chip-familia:active { transform: scale(var(--escala-presion)); }
.chip-familia[aria-pressed="true"] {
  color: var(--color-texto-inverso);
  background-color: var(--familia);
  border-color: var(--familia);
}
@media (hover: hover) and (pointer: fine) {
  .chip-familia:hover { border-color: var(--familia); }
}


/* ══════════════════════════════════════════════════════════
   CANTO — la costura, en la lengua de este sistema.
   Donde el sistema A muestra el canto laminado de una tarjeta, el registro
   cierra con el doble filete: la marca de que un asiento terminó y no se
   le puede agregar nada más. Aparece exactamente dos veces en la página.
   ══════════════════════════════════════════════════════════ */
.canto {
  position: relative;
  z-index: var(--capa-firma);   /* por encima del velo de foto de la sección */
  height: var(--altura-canto);
  background-color: var(--color-superficie-base);
  border-top: var(--trazo-cierre) solid var(--color-texto-principal);
  border-bottom: var(--trazo-hairline) solid var(--color-texto-principal);
}


/* ══════════════════════════════════════════════════════════
   CINTA DE SECCIÓN — la cabecera del asiento.
   Rótulo impreso a la izquierda, dato mecanografiado a la derecha.
   ══════════════════════════════════════════════════════════ */
.cinta-seccion {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espacio-elemento);
  padding-block: var(--espacio-corto);
  border-top: var(--trazo-cierre) solid var(--color-texto-principal);
  border-bottom: var(--trazo-hairline) solid var(--color-texto-principal);
  margin-bottom: var(--espacio-bloque-mayor);
}


/* ══════════════════════════════════════════════════════════
   REGLA CON MARCAS — el conteo de asientos de una capa.
   Tantos ticks como entradas tiene el registro en ese nivel.
   ══════════════════════════════════════════════════════════ */
.regla-marcas {
  --marcas: 8;
  position: relative;
  height: var(--espacio-corto);
  border-top: var(--trazo-hairline) solid var(--color-borde-fuerte);
}
.regla-marcas::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: var(--espacio-corto);
  background-image: linear-gradient(
    to right,
    var(--color-borde-fuerte) 0 var(--trazo-hairline),
    transparent var(--trazo-hairline) 100%
  );
  background-size: calc(100% / var(--marcas)) 100%;
  background-repeat: repeat-x;
}


/* ══════════════════════════════════════════════════════════
   DETALLE COLAPSABLE — el anexo del asiento
   ══════════════════════════════════════════════════════════ */
.detalle__disparador {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-elemento);
  /* Sin regla propia: el asiento ya tiene la suya. Dos filetes por entrada
     convertirían el registro en una reja. */
  justify-content: flex-start;
  width: auto;
  min-height: var(--toque-minimo);
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: var(--color-texto-secundario);
  font-family: var(--fuente-utilidad);
  font-weight: var(--peso-utilidad);
  font-size: var(--tamano-utilidad-menor);
  letter-spacing: var(--tracking-utilidad);
  text-transform: uppercase;
  transition: color var(--duracion-hover) var(--curva-salida);
}
@media (hover: hover) and (pointer: fine) {
  .detalle__disparador:hover { color: var(--color-texto-principal); }
}
/* El signo del disparador es tipográfico, no un icono. */
.detalle__disparador::after {
  content: attr(data-etiqueta-abrir);
  color: var(--color-texto-principal);
}
.detalle__disparador[aria-expanded="true"]::after { content: attr(data-etiqueta-cerrar); }

.detalle__panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows var(--duracion-detalle-cierra) var(--curva-salida),
    opacity var(--duracion-detalle-cierra) var(--curva-salida);
}
.detalle__panel > * { overflow: hidden; }
.detalle__disparador[aria-expanded="true"] + .detalle__panel {
  grid-template-rows: 1fr;
  opacity: 1;
  transition-duration: var(--duracion-detalle-abre);
}


/* ══════════════════════════════════════════════════════════
   LISTAS — sin viñetas, sin checks. Renglones.
   ══════════════════════════════════════════════════════════ */
.lista-llana > li {
  padding-block: var(--espacio-corto);
  font-family: var(--fuente-texto);
  font-size: var(--tamano-cuerpo-menor);
  color: var(--color-texto-secundario);
}
.lista-llana > li + li { border-top: var(--trazo-hairline) solid var(--color-borde-sutil); }

.lista-inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-corto) var(--espacio-elemento);
}
.lista-inline > li + li {
  padding-inline-start: var(--espacio-elemento);
  border-inline-start: var(--trazo-hairline) solid var(--color-borde-sutil);
}


/* ══════════════════════════════════════════════════════════
   MARCO DE FOTO — hueco de las imágenes de Recraft
   ══════════════════════════════════════════════════════════ */
.marco-foto {
  position: relative;
  display: grid;
  place-content: center;
  gap: var(--espacio-minimo);
  aspect-ratio: var(--proporcion-tarjeta);
  padding: var(--espacio-grupo);
  background-color: var(--color-superficie-hundida);
  border: var(--trazo-hairline) dashed var(--color-borde-control);
  text-align: center;
}
.marco-foto--fondo {
  position: absolute;
  inset: 0;
  z-index: var(--capa-foto);
  aspect-ratio: auto;
  border: 0;
  background-color: transparent;
  place-content: end start;
  text-align: left;
  padding: var(--espacio-borde-pantalla);
}
.marco-foto--fondo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--foto-mancha);
  opacity: var(--foto-opacidad);
}
.marco-foto--fondo::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--foto-velo);
}
.marco-foto > * { position: relative; z-index: 1; }
.marco-foto__clave { color: var(--color-texto-secundario); }
.marco-foto__nota  {
  color: var(--color-texto-secundario);
  font-family: var(--fuente-dato);
  font-size: var(--tamano-utilidad-menor);
  text-transform: none;
  letter-spacing: var(--tracking-dato);
  max-width: var(--ancho-lectura);
}


/* ══════════════════════════════════════════════════════════
   MARCA Y NAVEGACIÓN
   ══════════════════════════════════════════════════════════ */
.barra-nav {
  position: relative;
  z-index: var(--capa-nav);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-elemento);
  padding-block: var(--espacio-grupo);
}

/* Ranura del logotipo: encargo aparte. Se marca el sitio, no se inventa. */
.marca {
  display: inline-flex;
  align-items: baseline;
  gap: var(--espacio-corto);
  padding: var(--espacio-corto) var(--espacio-texto);
  border: var(--trazo-hairline) dashed var(--color-borde-control);
  text-decoration: none;
  color: var(--color-texto-principal);
}
.marca__nombre {
  font-family: var(--fuente-display);
  font-weight: var(--peso-display);
  font-size: var(--tamano-placa);
  letter-spacing: var(--tracking-dato);
}
.marca__nota { color: var(--color-texto-secundario); }

.acciones-nav { display: flex; align-items: center; gap: var(--espacio-corto); }

.selector-idioma {
  display: inline-flex;
  border: var(--trazo-hairline) solid var(--color-borde-control);
}
.selector-idioma__opcion {
  min-height: var(--toque-minimo);
  min-width: var(--toque-minimo);
  padding-inline: var(--espacio-texto);
  background-color: transparent;
  border: 0;
  color: var(--color-texto-secundario);
  font-family: var(--fuente-utilidad);
  font-weight: var(--peso-utilidad);
  font-size: var(--tamano-utilidad);
  letter-spacing: var(--tracking-utilidad);
  cursor: pointer;
  transition:
    background-color var(--duracion-hover) var(--curva-salida),
    color var(--duracion-hover) var(--curva-salida);
}
.selector-idioma__opcion[aria-pressed="true"] {
  background-color: var(--color-superficie-inversa);
  color: var(--color-texto-inverso);
}


/* ══════════════════════════════════════════════════════════
   SELECTOR DE PROPUESTA — andamiaje de la ronda 2, no de la página final.
   ══════════════════════════════════════════════════════════ */
.selector-propuesta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-corto);
}
.selector-propuesta__opcion {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque-minimo);
  padding-inline: var(--espacio-texto);
  border: var(--trazo-hairline) solid var(--color-borde-control);
  color: var(--color-texto-secundario);
  font-family: var(--fuente-utilidad);
  font-weight: var(--peso-utilidad);
  font-size: var(--tamano-utilidad-menor);
  letter-spacing: var(--tracking-utilidad);
  text-transform: uppercase;
  text-decoration: none;
  transition:
    color var(--duracion-hover) var(--curva-salida),
    border-color var(--duracion-hover) var(--curva-salida);
}
.selector-propuesta__opcion[aria-current="page"] {
  color: var(--color-texto-inverso);
  background-color: var(--color-superficie-inversa);
  border-color: var(--color-superficie-inversa);
}
@media (hover: hover) and (pointer: fine) {
  .selector-propuesta__opcion:hover { color: var(--color-texto-principal); }
}

@media (max-width: 30rem) {
  .marca__nota { display: none; }
}