/* foro.css — la piel del foro de /comunidad/ (P4, lote U, 2026-09-28).
 *
 * REGLAS DE ESTA HOJA
 * - No declara tokens: `tokens.css` es su unico origen, y `tests/web/test_comunidad.py` lo
 *   comprueba. Un token sin respaldo no da error: invalida la declaracion entera, y la caja se
 *   queda sin fondo, sin borde o sin tamano, en silencio.
 * - No hay ningun hex. El color sale de los tokens de la piel Brasa, como en el resto del mundo.
 * - Todo lo que pinta `foro.js` cuelga de `.comunidad` o de `.foro`, y se llama `foro-*`. Una
 *   hoja de una seccion que se lleva por delante la tipografia del articulo, del menu o del pie
 *   es una hoja de otra cosa.
 * - El aire y la forma salen de `--ds-*` (el sistema de P2), no de numeros sueltos.
 * - El brasa (`--catodo`) se reserva para la ACCION (enviar, denunciar) y para la categoria
 *   activa. En una lista de opiniones de gente, el color que mas se gasta es el que mas dice.
 * - Sin `url()`, sin `@import`, sin terceros: la linea del sitio («no carga de nadie») es cierta
 *   porque aqui no hay nada que cargue.
 * - A 390 px no hay scroll horizontal: los mensajes largos se rompen con `overflow-wrap` y las
 *   rejillas se apilan solas.
 */

/* ——— la pagina ——— */
.comunidad {
  max-width: var(--ds-ancho-max);
  overflow-wrap: break-word;
}

.comunidad-cab { margin-block-end: var(--ds-esp-5); }

.comunidad-cab h1 {
  margin: 0;
  font: 600 var(--ds-titulo-1)/var(--ds-linea-display) var(--condensada);
  letter-spacing: var(--tracking-display);
  color: var(--hueso);
}

.comunidad p {
  max-width: 68ch;
  color: var(--hueso-2);
  font: 400 var(--ds-cuerpo)/var(--ds-linea-cuerpo) var(--prosa);
}

/* El enlace a las normas. Es la unica puerta de entrada al texto que obliga, y por eso tiene
   forma de enlace y no de parrafo: si se lee como una frase mas, nadie lo abre. */
.comunidad-normas {
  margin-block: var(--ds-esp-6);
  padding: var(--ds-esp-5);
  background: var(--ds-superficie-1);
  border: 1px solid var(--ds-borde);
  border-inline-start: 2px solid var(--catodo);
  border-radius: var(--ds-radio-m);
}

.comunidad-normas a { color: var(--hueso); font-weight: 600; }

/* El bloque legal: las DOS frases del spec, y van juntas. La primera niega que esto sea consejo
   y la segunda dice quien revisa; separadas, la segunda se lee como una nota tecnica. */
.comunidad-legal {
  display: grid;
  gap: var(--ds-esp-2);
  margin-block-start: var(--ds-seccion);
  padding: var(--ds-esp-5);
  background: var(--ds-superficie-1);
  border: 1px solid var(--ds-borde);
  border-radius: var(--ds-radio-m);
  color: var(--hueso-3);
  font: 400 var(--ds-pie)/1.5 var(--prosa);
}

.comunidad-legal p { margin: 0; max-width: none; }

/* Sin JavaScript el hueco del foro esta vacio, y hay que decir POR QUE. */
.foro-sin-js {
  margin: 0;
  padding: var(--ds-esp-5);
  color: var(--hueso-3);
  font: 400 var(--ds-cuerpo)/var(--ds-linea-cuerpo) var(--prosa);
}

/* ——— el foro ——— */
.foro {
  display: grid;
  gap: var(--ds-esp-5);
  margin-block-start: var(--ds-esp-6);
  min-width: 0;
}

/* El aviso de foro cerrado. Es una caja propia, no un parrafo: mientras el foro este cerrado es
   lo unico que hay que leer, y mezclado con el resto se pierde. */
.foro-cerrado {
  padding: var(--ds-esp-5);
  background: var(--ds-superficie-2);
  border: 1px solid var(--ds-borde);
  border-radius: var(--ds-radio-m);
  color: var(--hueso-2);
  font: 400 var(--ds-cuerpo)/var(--ds-linea-cuerpo) var(--prosa);
}

/* ——— las seis categorias ———
   El bucle de escritura: seis botones que la API cuenta con el mismo nombre y en el mismo orden. */
.foro-pestanas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-esp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.foro-pestana {
  min-height: 44px;
  padding: var(--ds-esp-2) var(--ds-esp-4);
  border: 1px solid var(--ds-borde);
  border-radius: var(--ds-radio-pildora);
  background: none;
  color: var(--hueso-3);
  font: 500 var(--ds-pie)/1.4 var(--condensada);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--ds-t-rapida) var(--ds-curva),
              border-color var(--ds-t-rapida) var(--ds-curva);
}

.foro-pestana:hover { color: var(--hueso); border-color: var(--ds-borde-fuerte); }

/* La categoria activa es la UNICA cosa de esta hoja que lleva el brasa como relleno: es el estado
   de donde estas leyendo, y la que hay que ver de un vistazo en una rejilla de seis. */
.foro-pestana[aria-selected="true"] {
  color: var(--catodo-tinta);
  background: var(--catodo);
  border-color: var(--catodo);
}

/* ——— la lista de hilos ——— */
.foro-hilos {
  display: grid;
  gap: var(--ds-esp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.foro-hilo {
  display: grid;
  gap: var(--ds-esp-1);
  padding: var(--ds-esp-4);
  background: var(--ds-superficie-1);
  border: 1px solid var(--ds-borde);
  border-radius: var(--ds-radio-m);
}

.foro-hilo-titulo {
  margin: 0;
  color: var(--hueso);
  font: 500 var(--ds-cuerpo-grande)/1.35 var(--condensada);
}

.foro-hilo-titulo button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.foro-hilo-meta {
  margin: 0;
  color: var(--hueso-3);
  font: 400 var(--ds-pie)/1.4 var(--datos);
}

/* ——— un hilo y sus mensajes ——— */
.foro-hilo-vista { display: grid; gap: var(--ds-esp-4); }

.foro-mensajes {
  display: grid;
  gap: var(--ds-esp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.foro-mensaje {
  display: grid;
  gap: var(--ds-esp-2);
  padding: var(--ds-esp-4);
  background: var(--ds-superficie-1);
  border: 1px solid var(--ds-borde);
  border-radius: var(--ds-radio-m);
}

/* El mensaje que abre el hilo va marcado con el brasa en el canto: es el que da titulo a la
   pagina, y en una columna de veinte mensajes es el que se busca. */
.foro-mensaje-apertura { border-inline-start: 2px solid var(--catodo); }

.foro-mensaje-texto {
  margin: 0;
  color: var(--hueso);
  font: 400 var(--ds-cuerpo)/var(--ds-linea-cuerpo) var(--prosa);
  /* Un mensaje es texto de otra persona y puede no tener un solo espacio: sin esto, un enlace
     largo o una palabra pegada parte el documento a 390 px. */
  overflow-wrap: break-word;
}

.foro-mensaje-pie {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-esp-3);
  align-items: center;
  margin: 0;
  color: var(--hueso-3);
  font: 400 var(--ds-pie)/1.4 var(--datos);
}


/* ——— los botones de accion ———
   «Denunciar», «Volver», «Publicar», «Rechazar». Todos miden lo mismo y se distinguen por el
   rotulo, no por el color: son pocas veces y el brasa se queda para el envio. */
.foro-accion {
  min-height: 44px;
  padding: var(--ds-esp-1) var(--ds-esp-3);
  border: 1px solid var(--ds-borde);
  border-radius: var(--ds-radio-s);
  background: none;
  color: var(--hueso-2);
  font: 500 var(--ds-pie)/1.4 var(--condensada);
  cursor: pointer;
  transition: color var(--ds-t-rapida) var(--ds-curva),
              border-color var(--ds-t-rapida) var(--ds-curva);
}

.foro-accion:hover { color: var(--hueso); border-color: var(--ds-borde-fuerte); }

/* La unica accion con brasa: enviar. Es la que decide si algo se publica, y por eso es la que
   tiene que destacar de todas las demas. */
.foro-enviar {
  min-height: 44px;
  padding: var(--ds-esp-2) var(--ds-esp-5);
  border: 1px solid var(--catodo);
  border-radius: var(--ds-radio-s);
  background: var(--catodo);
  color: var(--catodo-tinta);
  font: 600 var(--ds-cuerpo)/1.2 var(--condensada);
  cursor: pointer;
  transition: filter var(--ds-t-rapida) var(--ds-curva);
}

.foro-enviar:hover { filter: brightness(1.08); }
.foro-enviar[disabled] { opacity: .55; cursor: not-allowed; }

/* ——— formularios: seudonimo, hilo, respuesta ——— */
.foro-formulario {
  display: grid;
  gap: var(--ds-esp-4);
  padding: var(--ds-esp-5);
  background: var(--ds-superficie-1);
  border: 1px solid var(--ds-borde);
  border-radius: var(--ds-radio-m);
}

.foro-formulario h2 {
  margin: 0;
  color: var(--hueso);
  font: 600 var(--ds-titulo-3)/var(--ds-linea-titulo) var(--condensada);
}

/* La casilla de 18 años y normas. Va SIEMPRE, en los dos formularios, sin exception: es la
   condicion de las condiciones y el unico sitio donde se acepta de forma explicita. */
.foro-aceptar {
  display: flex;
  gap: var(--ds-esp-3);
  align-items: flex-start;
  color: var(--hueso-2);
  font: 400 var(--ds-pie)/1.5 var(--prosa);
}

.foro-aceptar input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--catodo); }

.foro-campo { display: grid; gap: var(--ds-esp-1); min-width: 0; }

.foro-campo label {
  color: var(--hueso-3);
  /* El rotulo va con `font-size` y no dentro del atajo `font:` a proposito: el atajo reinicia
     `line-height` al normal de la fuente, y un rotulo en mayusculas con la linea apretada se
     solapa con el campo en un movil. */
  font-family: var(--condensada);
  font-size: var(--ds-rotulo);
  line-height: 1.4;
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
}

.foro-campo input,
.foro-campo select,
.foro-campo textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--ds-esp-2) var(--ds-esp-3);
  border: 1px solid var(--ds-borde);
  border-radius: var(--ds-radio-s);
  background: var(--ds-superficie-2);
  color: var(--hueso);
  font: 400 var(--ds-cuerpo)/1.5 var(--prosa);
  resize: vertical;
}

.foro-campo textarea { min-height: 120px; }

/* El campo que esta mal: el borde se pone del color de fallo del sistema (`--aviso`) y no de
   un rojo inventado, para que el mismo aviso se lea igual aqui y en el resto de la pagina. */
.foro-error {
  margin: 0;
  color: var(--aviso);
  font: 400 var(--ds-pie)/1.5 var(--prosa);
}

/* ——— la denuncia: el dialogo ——— */
.foro-dialogo {
  width: min(34rem, calc(100vw - 2 * var(--ds-esp-5)));
  padding: var(--ds-esp-5);
  border: 1px solid var(--ds-borde-fuerte);
  border-radius: var(--ds-radio-l);
  background: var(--panel);
  color: var(--hueso);
  font: 400 var(--ds-cuerpo)/var(--ds-linea-cuerpo) var(--prosa);
  box-shadow: var(--ds-brillo-superior);
}

.foro-dialogo::backdrop { background: var(--pozo); }
.foro-dialogo h2 { margin: 0 0 var(--ds-esp-4); font: 600 var(--ds-titulo-3)/var(--ds-linea-titulo) var(--condensada); }
.foro-dialogo .foro-campo { margin-block-end: var(--ds-esp-4); }

/* El acuse. Es lo unico que ve quien denuncia sin cuenta, asi que se pinta con la misma caja que
   el resto de avisos: si se pierde en el texto, la denuncia parece no haberse registrado. */
.foro-acuse {
  margin: 0;
  padding: var(--ds-esp-3);
  border: 1px solid var(--ds-borde-fuerte);
  border-radius: var(--ds-radio-s);
  color: var(--hueso);
  font: 400 var(--ds-pie)/1.5 var(--prosa);
}

/* ——— la decision que ve quien escribe ———
   «Publicado», «Pendiente de revisión» o «Rechazado» con la norma, el motivo, si la decision fue
   automatica o humana y como reclamar. Va en su propia caja con su rotulo: es una motivacion, y
   una motivacion escondida en un parrafo no es una motivacion. */
.foro-decision {
  display: grid;
  gap: var(--ds-esp-2);
  padding: var(--ds-esp-4);
  border: 1px solid var(--ds-borde);
  border-inline-start: 2px solid var(--ds-borde-fuerte);
  border-radius: var(--ds-radio-m);
  background: var(--ds-superficie-1);
}

.foro-decision-rechazado { border-inline-start-color: var(--aviso); }
.foro-decision-publicado { border-inline-start-color: var(--oro); }

.foro-decision-titulo {
  margin: 0;
  color: var(--hueso);
  font: 600 var(--ds-cuerpo)/1.3 var(--condensada);
}

.foro-decision p { margin: 0; color: var(--hueso-2); font: 400 var(--ds-pie)/1.5 var(--prosa); }

/* La frase de reclamacion. Es lo que hace que la motivacion sea completa: saber la norma, el
   motivo y quien decidio dice QUE ha pasado, pero no dice COMO discutirlo. Sin esta linea el
   autor se queda con un «rechazado» y nada mas. */
.foro-reclamo { color: var(--hueso-3); font-style: italic; }

/* ——— el panel de administracion ———
   Solo se pinta si `estado.admin` lo dice. Es la cola de pendientes y las denuncias abiertas, que
   son datos de otros: por eso vive en su propia caja y no se mezcla con la lista de hilos. */
.foro-admin {
  display: grid;
  gap: var(--ds-esp-4);
  margin-block-start: var(--ds-esp-7);
  padding: var(--ds-esp-5);
  border: 1px solid var(--ds-borde-fuerte);
  border-radius: var(--ds-radio-m);
  background: var(--ds-superficie-1);
}

.foro-admin h2 { margin: 0; color: var(--hueso); font: 600 var(--ds-titulo-3)/var(--ds-linea-titulo) var(--condensada); }
.foro-admin-rotulo {
  margin: 0;
  color: var(--hueso-3);
  font-family: var(--condensada);
  font-size: var(--ds-rotulo);
  line-height: 1.4;
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
}
.foro-admin-acciones { display: flex; flex-wrap: wrap; gap: var(--ds-esp-2); }


/* ——— el foco ———
   Se ve SIEMPRE, en todos los controles, incluidos los que tienen borde propio. En un foro con
   seis pestanas, cuatro campos y un dialogo, el teclado es la primera forma de usarlo, y un foco
   invisible deja el formulario inusable sin dar ningun error en consola. */
.foro :focus-visible,
.foro-dialogo :focus-visible {
  outline: 2px solid var(--catodo);
  outline-offset: 2px;
  border-radius: var(--ds-radio-s);
}

/* ——— a 390 px ———
   Un solo punto de ruptura y lo que hace falta: las pestanas ya se envuelven, los mensajes van en
   una columna, y los campos del formulario pasan a ocupar el ancho entero. Sin un `width` fijo en
   pixeles en toda la hoja, nada puede empujar el documento. */
@media (max-width: 599px) {
  .foro-pestanas { gap: var(--ds-esp-1); }
  .foro-pestana { flex: 1 1 auto; padding: var(--ds-esp-2) var(--ds-esp-3); }
  .foro-formulario { padding: var(--ds-esp-4); }
  .foro-dialogo { width: calc(100vw - 2 * var(--ds-esp-4)); }
  .foro-mensaje-pie { gap: var(--ds-esp-2); }
}

/* ——— movimiento reducido ———
   La valvula existe Y apaga transiciones y animaciones. Un bloque vacio declara la intencion y
   no cumple nada: quien lo escribe asi cree que ha hecho el trabajo y el fallo no se ve hasta que
   alguien con la preferencia activada encuentra que la pagina se mueve. */
@media (prefers-reduced-motion: reduce) {
  .foro-pestana,
  .foro-accion,
  .foro-enviar {
    transition: none;
    animation: none;
  }
}


/* Las migas, las mismas que el catalogo de calculadoras (calc/catalogo.css). */
.migas {
  margin: 0 0 var(--ds-esp-5);
  color: var(--hueso-3);
  font: 400 var(--ds-pie)/1.4 var(--prosa);
}

.migas ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-esp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.migas li + li::before {
  content: "/";
  margin-inline-end: var(--ds-esp-2);
  color: var(--bronce);
}

.migas a {
  color: var(--hueso-3);
  text-decoration-color: var(--bronce);
  text-underline-offset: var(--ds-esp-1);
}

.migas a:hover,
.migas a:focus-visible {
  color: var(--hueso);
}

.migas [aria-current='page'] {
  color: var(--hueso-2);
}