/* ============================================================
   JurisOne — SISTEMA D · librería de componentes.
   Mismos nombres de clase que las demás propuestas: el marcado y el
   JavaScript son idénticos. Lo que cambia es la materia.

   Dos reglas gobiernan todo lo de este archivo:
     1. EL ÁMBAR NO HABLA. Aparece como campo, como loseta o como relleno
        de un control activo. Nunca como texto y nunca como filete.
     2. UNA SUPERFICIE ES RECTA, UN CONTROL ES UNA CÁPSULA. No hay
        radios intermedios.
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   BOTÓN — cápsula. Es el único sitio donde el ámbar es un objeto
   pulsable, y por eso es también el sitio donde más se ve.
   ══════════════════════════════════════════════════════════ */
.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-texto);
  font-weight: var(--peso-cuerpo-fuerte);
  font-size: var(--tamano-cuerpo-menor);
  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-borde-control);
}

.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-texto-principal));
  }
  .boton--secundario:hover { border-color: var(--color-texto-principal); }
  .boton--llano:hover { color: var(--color-texto-principal); }
}


/* ══════════════════════════════════════════════════════════
   AFIRMACIÓN — lo que en el sistema A es una placa.
   Aquí no es una tarjeta ni un renglón: es un bloque de texto con aire
   alrededor. Sin fondo, sin filete, sin separador. La jerarquía la hace
   el cuerpo de la letra y el espacio, que es todo lo que hace falta
   cuando hay una sola columna.
   ══════════════════════════════════════════════════════════ */
.placa {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espacio-texto);
  width: 100%;
  background-color: transparent;
  border: 0;
  border-radius: var(--radio-tarjeta);
  text-align: left;
  transition: opacity var(--duracion-filtro) var(--curva-salida);
}

/* Fuera de la plataforma: el BIN sponsor y los rieles. Se hunden con
   superficie, nunca con sombra. */
.placa--hundida {
  background-color: var(--color-superficie-hundida);
  padding: var(--espacio-bloque);
}

/* El recuadro: ranuras de logo y mecanismos de integración. */
.placa--panel {
  background-color: var(--color-superficie-hundida);
  padding: var(--espacio-bloque);
  gap: var(--espacio-elemento);
}

.placa--plana,
.placa--compacta { gap: 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); }

.placa__titulo { color: var(--color-texto-principal); }
.placa__texto  {
  font-family: var(--fuente-texto);
  font-size: var(--tamano-cuerpo);
  line-height: var(--interlinea-cuerpo);
  color: var(--color-texto-secundario);
  max-width: var(--ancho-lectura);
}

/* LA LOSETA DE FAMILIA. La familia dejó de ser una tinta —hay un solo
   color de marca— y pasó a ser una loseta ámbar con la palabra dentro.
   Es superficie, no voz: obedece la regla del sistema.
   Ver docs/direccion-visual.md §15.3 */
.placa__familia {
  order: -1;
  display: inline-block;
  padding: var(--espacio-minimo) var(--espacio-texto);
  background-color: var(--color-marca);
  color: var(--color-texto-inverso);
  border-radius: var(--radio-tarjeta);
  white-space: nowrap;
}


/* ══════════════════════════════════════════════════════════
   LEYENDA DE FAMILIAS — cinco cápsulas de filtro
   ══════════════════════════════════════════════════════════ */
.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-elemento);
  background-color: transparent;
  border: var(--trazo-hairline) solid var(--color-borde-control);
  border-radius: var(--radio-chip);
  color: var(--color-texto-principal);
  font-family: var(--fuente-texto);
  font-weight: var(--peso-cuerpo-fuerte);
  font-size: var(--tamano-cuerpo-menor);
  cursor: pointer;
  transition:
    transform var(--duracion-presion) var(--curva-salida),
    border-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"] {
  background-color: var(--color-marca);
  color: var(--color-texto-inverso);
}
@media (hover: hover) and (pointer: fine) {
  .chip-familia:hover { border-color: var(--color-texto-principal); }
}


/* ══════════════════════════════════════════════════════════
   CINTA DE SECCIÓN — un solo filete, arriba. Nada más.
   ══════════════════════════════════════════════════════════ */
.cinta-seccion {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espacio-elemento);
  padding-top: var(--espacio-corto);
  border-top: var(--trazo-hairline) solid var(--color-borde-fuerte);
}


/* ══════════════════════════════════════════════════════════
   BARRA DE CONTEO — lo que en las demás propuestas es la regla con
   marcas. Aquí no cuenta con ticks: mide. La barra ocupa la fracción
   que esa capa representa sobre la capa más poblada (12 módulos), así
   que a simple vista se ve cuál es el peso real de cada una.
   Es el único movimiento con intención de toda la página.
   ══════════════════════════════════════════════════════════ */
.regla-marcas {
  --marcas: 8;
  height: var(--altura-conteo);
  overflow: hidden;
}
.regla-marcas::after {
  content: "";
  display: block;
  height: 100%;
  width: calc(var(--marcas) / var(--marcas-maximo) * 100%);
  background-color: var(--color-marca);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duracion-espina) var(--curva-descenso);
}
.capa[data-visible] .regla-marcas::after { transform: scaleX(1); }


/* ══════════════════════════════════════════════════════════
   DETALLE COLAPSABLE
   ══════════════════════════════════════════════════════════ */
.detalle { width: 100%; }

.detalle__disparador {
  display: inline-flex;
  align-items: center;
  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 una palabra, no un icono. */
.detalle__disparador::after {
  content: attr(data-etiqueta-abrir);
  margin-inline-start: var(--espacio-corto);
  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
   ══════════════════════════════════════════════════════════ */
.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-inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-corto) var(--espacio-grupo);
}


/* ══════════════════════════════════════════════════════════
   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-elemento);
  border: var(--trazo-hairline) dashed var(--color-borde-control);
  border-radius: var(--radio-chip);
  text-decoration: none;
  color: var(--color-texto-principal);
}
.marca__nombre {
  font-family: var(--fuente-display);
  font-weight: var(--peso-display-fuerte);
  font-size: var(--tamano-cuerpo);
  letter-spacing: var(--tracking-placa);
}
.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);
  border-radius: var(--radio-chip);
  overflow: hidden;
}
.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 comparación, 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-elemento);
  border: var(--trazo-hairline) solid var(--color-borde-control);
  border-radius: var(--radio-chip);
  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-borde-control);
}
@media (hover: hover) and (pointer: fine) {
  .selector-propuesta__opcion:hover { color: var(--color-texto-principal); }
}

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