/* ============================================================
   JurisOne — SISTEMA C · 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.

   La diferencia de fondo: aquí la unidad no es la tarjeta ni el renglón,
   es LA CELDA DE UNA MATRIZ. Las celdas no flotan, no tienen esquina y no
   se separan con aire: comparten filete, como los puertos de un panel.
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   BOTÓN — una tecla del tablero. Rectangular y sólida.
   ══════════════════════════════════════════════════════════ */
.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)); }

/* El CTA sí lleva el color de marca. En las propuestas anteriores no podía:
   habría roto la leyenda de cinco tintas. Aquí no hay cinco tintas — hay
   una marca — y el sitio donde una marca debe estar es el botón. */
.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) 84%, var(--color-texto-principal));
  }
  .boton--secundario:hover { border-color: var(--color-marca); color: var(--color-marca); }
  .boton--llano:hover { color: var(--color-texto-principal); }
}


/* ══════════════════════════════════════════════════════════
   CELDA — lo que en el sistema A es una placa.
   Aquí es un puerto de la matriz: llena su casilla de borde a borde.
   ══════════════════════════════════════════════════════════ */
.placa {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espacio-corto);
  width: 100%;
  height: 100%;
  padding: var(--espacio-grupo);
  background-color: transparent;
  border: 0;
  border-radius: var(--radio-chip);
  text-align: left;
  transition:
    opacity var(--duracion-filtro) var(--curva-salida),
    background-color var(--duracion-hover) var(--curva-salida);
}

/* Fuera de la plataforma: el BIN sponsor y los rieles viven en papel
   hundido. No se hunden con sombra, se hunden con superficie. */
.placa--hundida { background-color: var(--color-superficie-hundida); }

/* El panel no es una celda: es un recuadro suelto (ranuras de logo,
   mecanismos de integración). Lleva filete propio porque no está en matriz. */
.placa--panel {
  border: var(--trazo-hairline) solid var(--color-borde-fuerte);
  height: auto;
}

.placa--plana,
.placa--compacta { padding: var(--espacio-elemento) 0; }

.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); }

@media (hover: hover) and (pointer: fine) {
  .rejilla-capa .placa:hover {
    background-color: color-mix(in srgb, var(--color-texto-principal) 6%, transparent);
  }
}

.placa__titulo { color: var(--color-texto-principal); }
.placa__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);
}

/* La familia ya no es un color: es una palabra en el log.
   Ver docs/direccion-visual.md §14.3 — por qué se retiraron las cinco tintas. */
.placa__familia {
  order: -1;
  color: var(--color-texto-secundario);
}


/* ══════════════════════════════════════════════════════════
   LEYENDA DE FAMILIAS — las cinco teclas de filtro del tablero
   ══════════════════════════════════════════════════════════ */
.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-utilidad);
  font-weight: var(--peso-utilidad);
  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(--color-superficie-inversa);
  border-color: var(--color-superficie-inversa);
}
@media (hover: hover) and (pointer: fine) {
  .chip-familia:hover { border-color: var(--color-marca); }
}


/* ══════════════════════════════════════════════════════════
   CINTA DE SECCIÓN — la barra de estado del tablero.
   Rótulo a la izquierda, dato real a la derecha. Una sección no se
   anuncia con color: se anuncia declarando de qué se compone.
   ══════════════════════════════════════════════════════════ */
.cinta-seccion {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espacio-elemento);
  padding-block: var(--espacio-corto);
  border-block: var(--trazo-hairline) solid var(--color-borde-fuerte);
}


/* ══════════════════════════════════════════════════════════
   REGLA CON MARCAS — retirada en este sistema.
   El JavaScript la sigue emitiendo (es decorativa, va con aria-hidden),
   pero aquí no tiene trabajo que hacer: la matriz YA es el conteo. Tantas
   celdas como módulos, a la vista. Una regla de ticks encima habría dicho
   por segunda vez lo que la retícula ya dice, y una línea suelta sobre el
   borde superior de la matriz solo se lee como ruido.
   ══════════════════════════════════════════════════════════ */
.regla-marcas { display: none; }


/* ══════════════════════════════════════════════════════════
   DETALLE COLAPSABLE — el detalle del puerto
   ══════════════════════════════════════════════════════════ */
.detalle { width: 100%; margin-top: auto; }

.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-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);
}


/* ══════════════════════════════════════════════════════════
   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-marca);
}
.marca__nombre {
  font-family: var(--fuente-display);
  font-weight: var(--peso-display-fuerte);
  font-size: var(--tamano-placa);
  text-transform: uppercase;
  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);
}
.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-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; }
}