/* ==========================================================================
   WorkE · Componentes que el sistema todavía no tiene
   --------------------------------------------------------------------------
   Este archivo es la ÚNICA divergencia respecto a la maqueta. `tokens.css` y
   `worke.css` son copias literales de `lab/` y no se tocan nunca; todo lo que
   el sistema no traiga se añade aquí, para que la divergencia sea rastreable
   en un solo sitio.

   Contenido actual: lo imprescindible para publicar las páginas legales.
     1. Estilos base de h3–h6  (hallazgo B-02 del DESIGN_SYSTEM)
     2. Componente de texto largo `.lab-legal`  (§6.7 y §9.4)

   No se usa ningún valor literal: todo sale de los tokens ya existentes.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1 · Estilos base para h3–h6
   --------------------------------------------------------------------------
   `worke.css` solo estiliza h1 y h2. Los encabezados de tercer nivel se ven
   bien únicamente porque SIEMPRE llevan la clase de su componente; un `<h3>`
   sin clase —el caso de cualquier contenido editable— hereda el estilo del
   navegador. Esto lo cierra reproduciendo exactamente la regla que `worke.css`
   aplica a h1 y h2, con los tamaños que los tokens ya declaran.
   -------------------------------------------------------------------------- */

h3,
h4,
h5,
h6 {
  color: var(--worke-color-heading);
  font-weight: var(--worke-font-weight-heading);
  line-height: var(--worke-line-height-heading);
  margin: 0 0 var(--worke-space-md);
}

h3 { font-size: var(--worke-font-size-h3); }
h4 { font-size: var(--worke-font-size-h4); }
h5 { font-size: var(--worke-font-size-h5); }

/* No existe `--worke-font-size-h6`, y no se inventa: el sexto nivel reutiliza
   el tamaño del quinto. En un texto legal rara vez se baja de h3, así que
   crear un token para un caso que no se da sería ruido en el sistema. */
h6 { font-size: var(--worke-font-size-h5); }


/* --------------------------------------------------------------------------
   2 · Componente de texto largo
   --------------------------------------------------------------------------
   Contenedor de prosa para las páginas legales, según §6.7: sin hero, sin
   eyebrow, sin banda de cierre y sin llamadas a la acción. El texto se limita
   a la medida de lectura y el `h1` es el nombre del documento.

   El espacio vertical de la página ya lo aporta `.lab-main`, que existe en
   `worke.css`, así que aquí no se repite.
   -------------------------------------------------------------------------- */

.lab-legal {
  max-width: var(--worke-measure);
}


/* Ritmo vertical.

   Los encabezados del sistema solo declaran margen INFERIOR, que es lo
   correcto cuando cada uno abre su propia sección con fondo y relleno propios.
   En prosa continua no basta: un `h2` que sigue a un párrafo quedaría pegado
   al texto anterior y se leería como parte de él. El margen superior es lo que
   convierte una sucesión de bloques en apartados distinguibles.

   La escala acompaña a la jerarquía —a mayor nivel, más aire por encima—, y
   usa los mismos escalones de espacio que el resto del sistema. */

.lab-legal h2 {
  margin-top: var(--worke-space-2xl);
}

.lab-legal h3 {
  margin-top: var(--worke-space-xl);
}

.lab-legal h4,
.lab-legal h5,
.lab-legal h6 {
  margin-top: var(--worke-space-lg);
}

/* El primer elemento nunca lleva margen superior: lo aporta `.lab-main`, y
   sumarlos descolgaría el título del resto de la página. */
.lab-legal > *:first-child {
  margin-top: 0;
}


/* Listas.

   `worke.css` no estiliza `ul`, `ol` ni `li` a nivel base —no le hacía falta,
   porque todas sus listas son componentes con su propia clase—, así que una
   lista dentro de un texto legal heredaría el estilo del navegador. */

.lab-legal ul,
.lab-legal ol {
  margin: 0 0 var(--worke-space-md);
  padding-left: var(--worke-space-lg);
}

.lab-legal li {
  margin-bottom: var(--worke-space-sm);
}

.lab-legal li:last-child {
  margin-bottom: 0;
}

/* Listas anidadas: separan del elemento que las introduce, no del anterior. */
.lab-legal li > ul,
.lab-legal li > ol {
  margin-top: var(--worke-space-sm);
}


/* Enlaces dentro del texto.

   NO se reutiliza `.lab-link`: esa clase fija `font-size: small`, pensada para
   enlaces sueltos al pie de una sección. Dentro de un párrafo, un enlace tiene
   que conservar el tamaño del texto que lo rodea.

   El color es `--worke-color-primary-dark` y no `--worke-color-primary`
   porque el propio `tokens.css` advierte de que el primero da 4,85:1 y el
   segundo se queda en 3,84:1, por debajo del mínimo AA. En un documento que
   está para leerse, el contraste no es negociable.

   El subrayado se mantiene siempre: en prosa es el único indicador de que algo
   es un enlace, ya que no hay forma ni posición que lo distingan. */

.lab-legal a {
  color: var(--worke-color-primary-dark);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.lab-legal a:hover {
  text-decoration-thickness: 2px;
}


/* --------------------------------------------------------------------------
   3 · Mensajes de resultado del formulario
   --------------------------------------------------------------------------
   El sistema no tiene colores de estado: `tokens.css` solo declara la paleta
   de marca y de superficie. Distinguir un acierto de un error es justamente lo
   que estos mensajes tienen que hacer, así que los dos colores se declaran
   aquí, en el propio componente, y NO como tokens globales: `tokens.css` es
   copia literal de la maqueta y no se toca.

   Ambos pares están comprobados por encima de 4,5:1 sobre su propio fondo.
   -------------------------------------------------------------------------- */

.lab-demo__mensaje {
  --mensaje-color: var(--worke-color-heading);
  --mensaje-fondo: var(--worke-color-surface-alt);
  --mensaje-borde: var(--worke-color-border);

  margin: 0 0 var(--worke-space-lg);
  padding: var(--worke-space-md);
  border-left: 3px solid var(--mensaje-borde);
  border-radius: var(--worke-radius-md);
  background-color: var(--mensaje-fondo);
  color: var(--mensaje-color);
  font-size: var(--worke-font-size-small);
}

.lab-demo__mensaje--ok {
  --mensaje-color: #15803d;   /* 5,2:1 sobre su fondo */
  --mensaje-fondo: #f0fdf4;
  --mensaje-borde: #15803d;
}

.lab-demo__mensaje--error {
  --mensaje-color: #b91c1c;   /* 6,4:1 sobre su fondo */
  --mensaje-fondo: #fef2f2;
  --mensaje-borde: #b91c1c;
}

/* El mensaje recibe el foco al llegar por el ancla. El contorno visible lo
   aporta la regla global de `:focus-visible`; aquí solo se evita el contorno
   por defecto del navegador cuando el foco se mueve por programa. */
.lab-demo__mensaje:focus {
  outline: none;
}


/* --------------------------------------------------------------------------
   4 · Trampa antispam
   --------------------------------------------------------------------------
   No se usa `display: none` ni `visibility: hidden`: son los dos primeros
   valores que comprueba un envío automático para saltarse el campo. Se saca de
   la vista por posición, que es indistinguible de un campo normal para quien
   solo lee el marcado.
   -------------------------------------------------------------------------- */

.lab-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}