/* form.css — formulario de contacto del home.
 *
 * Reemplaza los estilos del RFP, que quedaron vacíos al retirar aquel embudo
 * (decisión del dueño, 2026-08-07). Zona clara ("cuaderno de matemático"):
 * fondo papel, acento azul en foco, rojo para error. Reutiliza el patrón de
 * input ya validado en auth.css en vez de inventar uno nuevo. */

.contacto {
  padding: var(--space-xl) 0;
}

.contacto__lede {
  max-width: 62ch;
  margin: var(--space-sm) 0 var(--space-lg);
  color: var(--color-ink-soft);
  text-align: justify;
  text-wrap: pretty;
  hyphens: auto;
}

.contacto-form {
  max-width: 62ch;
}

/* Nombre y correo comparten renglón en pantallas anchas; se apilan solos en
   móvil sin necesidad de media query gracias al minmax + auto-fit. */
.contacto-form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--space-md);
}

.contacto-form__field {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-md);
}

.form-label {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  margin-bottom: 0.4em;
}

.form-input {
  background: #fff;
  border: 1.5px solid #ccc9c0;
  border-radius: 4px;
  padding: 0.6em 0.75em;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-ink);
  outline: none;
  width: 100%;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.form-input:focus {
  border-color: var(--color-blue);
  box-shadow: 0 0 0 3px var(--color-blue-dim);
}

.form-textarea {
  resize: vertical;
  min-height: 7em;
  line-height: 1.55;
}

.form-message {
  display: none;
  margin-bottom: var(--space-md);
  font-size: 0.95rem;
}

.form-message[data-visible="true"] {
  display: block;
}

.form-message--error {
  color: var(--color-red);
}

.form-message--success {
  color: var(--color-green);
}

/* ── Cola de aprobación (publicaciones.html) ───────────────────────────────
   Uso interno del dueño, no superficie pública: prioriza densidad y lectura
   del texto tal como saldrá, sin adornos. */

/* El aire entre el encabezado de la página y las propuestas. En informes.html
   esa separación la da `.intel-control-bar` (la barra de pestañas); aquí no
   hay barra, así que el contenido arrancaba pegado al título. */
#publicacionesContenido,
#publicacionesGate {
  margin-top: var(--space-lg);
}

.pub-vacio {
  color: var(--color-ink-soft);
  max-width: 62ch;
}

.pub-card {
  border: 1px solid var(--color-stone-line);
  border-radius: 8px;
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
  background: var(--color-paper-alt);
}

.pub-card__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-ink-soft);
  margin-bottom: var(--space-md);
}

.pub-card__estado {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.25em 0.6em;
  border-radius: 3px;
  border: 1px solid currentColor;
}

.pub-card__estado--pendiente  { color: var(--color-blue); }
.pub-card__estado--reproceso  { color: var(--color-amber); }
.pub-card__estado--autorizada { color: var(--color-green); }
.pub-card__estado--publicada  { color: var(--color-ink-soft); }

/* El boletín en PDF (2026-08-07). El visor nativo del navegador es
   deliberado: pagina, hace zoom e imprime sin que el sitio cargue una
   librería, y lo que se juzga es cómo se ve el PDF de verdad — no una
   reimplementación del PDF en HTML. */
.pub-card__doc {
  margin-bottom: var(--space-md);
}

/* La página mide 1080 × 1350 px (4:5), y la caja se dimensiona con el truco
   del `padding-top` porcentual, no con `aspect-ratio`: sobre un marco
   reemplazado no todos los navegadores lo honran, y donde no lo hace la
   altura colapsa —a 0 en `object`, a los 150 px por omisión en `iframe`— y el
   visor sale en blanco. El porcentaje de padding se calcula siempre sobre el
   ANCHO del contenedor, así que 125 % = 1350/1080 y la proporción sale sola.

   Sin borde y con el mismo negro del boletín (decisión del dueño,
   2026-08-07). El visor del navegador pinta su propio fondo alrededor de la
   hoja, y sobre el papel claro de la tarjeta ese fondo más el borde dibujaban
   un marco que no era parte de nada: ni del boletín ni de la interfaz. En
   negro, lo que sobra alrededor de la hoja desaparece.

   El enlace de abajo no es decorativo: es la salida garantizada si el
   navegador se niega a incrustar un PDF. */
.pub-card__visor {
  position: relative;
  width: 100%;
  padding-top: 125%;
  border-radius: 4px;
  background: #12161B;
  overflow: hidden;
}

.pub-card__pdf {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.pub-card__doc-link {
  display: inline-block;
  margin-top: var(--space-xs);
  font-family: var(--font-mono);
  font-size: 0.82rem;
}

.pub-card__texto {
  width: 100%;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font-body);
  font-size: 0.97rem;
  line-height: 1.55;
  background: #fff;
  border: 1px solid var(--color-stone-line);
  border-radius: 4px;
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

.pub-card__social-titulo {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-ink-soft);
  margin-bottom: var(--space-xs);
}

.pub-obs {
  margin-bottom: var(--space-md);
}

.pub-obs h3 {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-ink-soft);
  margin-bottom: var(--space-xs);
}

.pub-obs ul { list-style: none; }

.pub-obs li {
  border-left: 2px solid var(--color-amber);
  padding-left: var(--space-sm);
  margin-bottom: var(--space-xs);
  font-size: 0.94rem;
}

.pub-obs__fecha {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-ink-soft);
}

/* Mismos componentes que el resto del sitio: el textarea es el del formulario
   de contacto y los botones son el del modal de acceso — no hay un tercer
   estilo de botón en el sitio. */
.pub-card__acciones {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  border-top: 1px solid var(--color-stone-line);
  padding-top: var(--space-lg);
  margin-top: var(--space-md);
}

.pub-card__retro {
  display: flex;
  flex-direction: column;
}

.pub-card__retro .form-label { margin-bottom: 0.4em; }
.pub-card__retro .form-textarea { margin-bottom: var(--space-md); }

/* El botón de acceso viene con `width: 100%` del modal; aquí se ciñe a su
   contenido para que no cruce la tarjeta de lado a lado. */
.pub-card__acciones .auth-submit {
  width: auto;
  align-self: flex-start;
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}

.auth-submit--ghost {
  background: transparent;
  color: var(--color-ink);
  border: 1.5px solid var(--color-stone-line);
}

.pub-card__msg { margin-top: var(--space-sm); }

.pub-card__aviso {
  color: var(--color-amber);
  border: 1px solid currentColor;
  border-radius: 3px;
  padding: 0.25em 0.6em;
}