/* =====================================================================
   wwwroot/css/contacto.css — únicamente lo que /contacto necesita y
   ninguna otra página: el formulario de consulta, el campo trampa del
   honeypot, el acuse post-envío y el bloque reservado del mapa. Se suma
   por su cuenta con @section Styles, igual que inicio.css e
   institucional.css -no forma parte del esqueleto que ya arma
   sitio.css-.

   Reutiliza sin redefinir: .contenedor, .boton (+ modificadores),
   .icono, .datos (+ modificadores), .contacto-grid y .contacto-grid__*,
   más todos los tokens de tokens.css. Ni un valor literal: tokens.css es
   el único archivo del sitio con esa licencia.
   ===================================================================== */

/* --- El formulario -------------------------------------------------------
   Un campo por fila con su etiqueta arriba, mismo criterio que el
   formulario de alta del panel de administración: es un formulario que
   se completa una vez y con cuidado, no un filtro de uso constante. */
.formulario-contacto {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-5);
  margin-block-end: var(--espacio-8);
}

.formulario-contacto__campo {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
}

.formulario-contacto__campo label {
  font-weight: var(--peso-medio);
}

.formulario-contacto__campo input,
.formulario-contacto__campo textarea {
  padding-block: var(--espacio-2);
  padding-inline: var(--espacio-3);
  border: 1px solid var(--color-borde-fuerte);
  border-radius: var(--radio-sutil);
  font: inherit;
  color: inherit;
  background-color: var(--color-superficie);
}

.formulario-contacto__campo input:focus-visible,
.formulario-contacto__campo textarea:focus-visible {
  outline: 2px solid var(--color-foco);
  outline-offset: 2px;
}

.formulario-contacto__campo textarea {
  min-height: 8rem;
  resize: vertical;
}

/* El resumen de validación lo emite el tag helper de ASP.NET Core con una lista -incluso sin
   errores, deja un <li> de reserva para cuando hay validación por script, que acá no existe-.
   Sin marcador propio: la regla global "ul, ol { list-style: none }" de sitio.css ya se lo saca,
   así que un envío válido no deja ningún punto suelto a la vista. */
.formulario-contacto__resumen ul {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
  color: var(--color-acento-fuerte);
  font-weight: var(--peso-medio);
}

.formulario-contacto__error {
  display: block;
  margin-block-start: var(--espacio-1);
  color: var(--color-acento-fuerte);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
}

/* Clase que ASP.NET Core agrega en tiempo de ejecución al <input>/<textarea> con error -no
   aparece en el marcado fuente, así que el candado de clases huérfanas no la ve, pero el
   navegador sí la recibe y sin esta regla el campo con error se ve idéntico al que no lo tiene. */
.input-validation-error {
  border-color: var(--color-acento-fuerte);
  border-width: 2px;
}

/* --- El campo trampa (honeypot) -------------------------------------------
   Recorte a 1px, mismo truco que .solo-lectores en sitio.css, pero con un nombre y un propósito
   distintos: ahí el contenido SIGUE siendo para el lector de pantalla -es texto que se anuncia a
   propósito-, acá se pide exactamente lo contrario con aria-hidden="true" en el marcado, porque
   nadie tiene que enterarse de que este campo existe: ni la vista, ni el árbol de accesibilidad,
   ni el recorrido con Tab -que además fija tabindex="-1" en el propio <input>-.

   display:none no se usa acá a propósito: algunos rastreadores automáticos ya lo detectan y
   saltean esos campos sin completarlos, con lo que el honeypot deja de servir. El recorte a 1px
   sigue siendo indistinguible en el DOM para un bot que no ejecuta CSS -ve un <input> más, con
   nombre y label como cualquier otro-, que es exactamente el público contra el que esta defensa
   funciona. */
.campo-trampa {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- El acuse post-envío ---------------------------------------------------
   Reemplaza al formulario tras un POST exitoso (ver el PRG en el controlador): la misma
   superficie tenue que .tarjeta-novedades en privado.css usa para "esto ya pasó, no hace falta
   actuar", pero definida acá porque privado.css no se carga en el sitio público. */
.acuse {
  display: flex;
  align-items: flex-start;
  gap: var(--espacio-4);
  padding: var(--espacio-6);
  margin-block-end: var(--espacio-8);
  background-color: var(--color-acento-tenue);
  border-radius: var(--radio-sutil);
  color: var(--color-acento-fuerte);
}

.acuse__titulo {
  margin-block-end: var(--espacio-1);
  font-weight: var(--peso-fuerte);
}

/* --- El mapa ---------------------------------------------------------------
   Imagen estática enlazada a Google Maps, nunca un iframe -frame-src 'none' en el CSP no lo
   admitiría, ver SecurityHeaders.cs-. Sin la foto real todavía: el bloque reserva la MISMA
   relación de aspecto que va a tener la imagen final, así que el día que llegue solo hace falta
   sustituir el fondo por background-image y ningún layout de alrededor se mueve un píxel. Mismo
   criterio que .relato__figura en institucional.css para la foto pendiente de Quiénes Somos. */
.mapa {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  margin-block-start: var(--espacio-6);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-sutil);
  /* Color plano y no degradado: un placeholder no necesita simular
     profundidad. El degradado anterior, entre dos claras casi idénticas,
     se leía como un bloque celeste sin razón, no como un mapa pendiente. */
  background-color: var(--color-superficie-alterna);
  color: var(--color-acento-fuerte);
  text-decoration: none;
  transition:
    border-color var(--duracion-normal) var(--curva-salida),
    box-shadow var(--duracion-normal) var(--curva-salida);
}

.mapa:hover,
.mapa:focus-visible {
  box-shadow: var(--sombra-hover);
}

.mapa__marcador {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espacio-2);
  font-weight: var(--peso-medio);
}