/*
 * Contacto (pages/contacto.astro, ADR 0032). La banda, la tarjeta y las tarjetas de ayuda son de
 * components/Banda.astro (estilos/banda.css). Los campos conservan las clases de Contact Form 7; el
 * acomodo es propio.
 */

/* Formulario: Nombre con Email y Asunto con Tipo en dos columnas; el resto a todo el ancho. */
.contacto-formulario {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 24px;
}

.contacto-formulario > * {
  grid-column: 1 / -1;
}

.contacto-formulario > .contacto-medio {
  grid-column: auto;
}

.contacto-campo {
  margin: 0 0 20px;
}

.contacto-campo label {
  color: var(--color-azul);
  font-size: 14px;
}

.contacto-formulario input[type="text"],
.contacto-formulario input[type="email"],
.contacto-formulario select,
.contacto-formulario textarea {
  margin: 6px 0 0;
  border-color: #cfd5e3;
  border-radius: var(--radio);
  color: var(--color-azul);
  background-color: #f7f8fb;
  font-size: 15px;
}

.contacto-formulario input:focus,
.contacto-formulario select:focus,
.contacto-formulario textarea:focus {
  border-color: var(--color-azul);
  outline: 2px solid var(--color-oro);
  outline-offset: 1px;
}

.contacto-formulario input[aria-invalid="true"],
.contacto-formulario select[aria-invalid="true"],
.contacto-formulario textarea[aria-invalid="true"] {
  border-color: #b3261e;
}

.contacto-formulario textarea {
  height: 180px;
  resize: vertical;
}

/* El tema quita la flecha de los <select> (-webkit-appearance: none): se dibuja aquí. */
.contacto-tipo {
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23151a51' stroke-width='2'/%3E%3C/svg%3E");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 16px;
  appearance: none;
}

/* Los mensajes de error van debajo de su campo, con texto visible: la marca roja de Contact Form 7
   (`.wpcf7-not-valid-tip` en legado-1.css) escondía el texto y quedaba fuera de la columna. */
.contacto-error {
  display: block;
  margin-top: 4px;
  color: #b3261e;
  font-size: 14px;
}

.contacto-restantes {
  display: block;
  margin-top: 4px;
  color: #626262;
  font-size: 13px;
}

/* Captcha y botón en un renglón; en el teléfono, uno bajo el otro. */
.contacto-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: center;
  justify-content: space-between;
}

.contacto-captcha {
  flex: 0 1 300px;
  min-width: 0;
}

.contacto-enviar {
  margin: 0;
}

.contacto-formulario input.wpcf7-submit {
  margin: 0;
  padding: 14px 44px;
  border-radius: var(--radio);
  color: var(--color-azul);
  background-color: var(--color-oro);
  font-size: 16px;
  font-weight: 700;
}

.contacto-formulario input.wpcf7-submit:hover,
.contacto-formulario input.wpcf7-submit:focus-visible {
  color: var(--color-oro);
  background-color: var(--color-azul);
}

/* Mientras se envía (scripts/contacto.ts): sin el cambio de color del cursor y con el cursor de espera. */
.contacto-formulario input.wpcf7-submit.contacto-enviando,
.contacto-formulario input.wpcf7-submit.contacto-enviando:hover,
.contacto-formulario input.wpcf7-submit.contacto-enviando:focus-visible {
  color: var(--color-azul);
  background-color: var(--color-oro);
  opacity: 0.7;
  cursor: progress;
}

/* Aviso del resultado, arriba del formulario. */
.contacto-aviso {
  margin: 0 0 24px;
  padding: 14px 18px;
  border-left: 4px solid;
  border-radius: var(--radio);
  font-size: 15px;
  line-height: 1.5;
}

.contacto-aviso:focus {
  outline: none;
}

.contacto-aviso-ok {
  border-color: #2e7d32;
  color: #1b5e20;
  background-color: #e8f5e9;
}

.contacto-aviso-error {
  border-color: #b3261e;
  color: #8c1d18;
  background-color: #fdecea;
}

/* Campo trampa para robots: fuera de la vista, pero no `display: none`, que algunos robots detectan. */
.contacto-trampa {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Columna de ayuda (el resto, en banda.css) */
.contacto-privacidad {
  margin: 0;
  padding: 0 4px;
  color: #626262;
  font-size: 13px;
  line-height: 1.6;
}

@media (max-width: 767.98px) {
  .contacto-formulario {
    grid-template-columns: minmax(0, 1fr);
  }

  .contacto-formulario > .contacto-medio {
    grid-column: 1 / -1;
  }
}