/**
 * Lo propio de /seo/: el veredicto de la auditoría pública.
 *
 * Reutiliza el formulario de /prospeccion/ (.pr-zona, en prospeccion.css) en
 * vez de copiarlo: es el mismo formulario sobre el mismo bloque de tinta, y dos
 * copias del mismo formulario son dos sitios donde arreglar el siguiente fallo.
 *
 * Lo que sí es de aquí son los tres estados. Van con COLOR Y PALABRA, nunca
 * solo con color: quien no distingue rojo de verde —y es mucha gente— tiene que
 * poder leer el resultado igual, y el texto de cada veredicto ya lo dice
 * («No tiene título», «Un h1, que es lo correcto»). El color subraya, no
 * informa.
 *
 * Los dos colores salen de tokens que YA existen: --kairikos-oliva (5,34:1
 * sobre la tarjeta) y --kairikos-terracota-deep (7,22:1). Se comprobaron antes
 * de usarlos, que es como se descubre que --kairikos-terracota a secas se queda
 * en 4,47 y no habría pasado.
 *
 * Solo tokens --kairikos-*. Si falta un color o una medida, se añade al :root
 * del tema padre; aquí no se escribe ni un hex.
 */

/* El campo de la URL es texto libre y largo: al contrario que los desplegables
   de /prospeccion/, necesita todo el ancho que sobre. */
.pr-zona__campo--ancho {
  flex: 1 1 22rem;
  min-width: 14rem;
}

.pr-zona__campo--ancho input {
  width: 100%;
  padding: var(--kairikos-sp-3) var(--kairikos-sp-4);
  font-family: var(--kairikos-font-sans);
  font-size: var(--kairikos-fs-md);
  color: var(--kairikos-hueso);
  background: var(--kairikos-velo-sobre-tinta);
  border: 1px solid var(--kairikos-border-sobre-tinta);
  border-radius: var(--kairikos-radius-lg);
}

.pr-zona__campo--ancho input::placeholder {
  color: rgba(250, 246, 238, .45);
}

.pr-zona__campo--ancho input:focus-visible {
  outline: 2px solid var(--kairikos-hueso);
  outline-offset: 2px;
}

/* --- El veredicto -------------------------------------------------------- */

/* «.sector-card .seo-veredicto» y no «.seo-veredicto» a secas. Es la MISMA
   trampa que se llevó por delante el precio de /prospeccion/ el 27/09:
   landing.css trae «.sector-card p { color: … }», que es 0-1-1, y le gana a una
   clase sola por mucho que esta hoja se cargue después. Allí salió un precio
   pequeño; aquí salían los tres veredictos del mismo color, o sea la
   herramienta entera sin decir nada.

   Va dentro de una .sector-card, que es clara: los colores son los de texto
   sobre papel, no los de sobre tinta. */
.sector-card .seo-veredicto {
  margin: var(--kairikos-sp-3) 0 0;
  padding-top: var(--kairikos-sp-3);
  border-top: 1px solid var(--kairikos-linea);
  font-size: var(--kairikos-fs-sm);
  line-height: var(--kairikos-lh-body);
  font-weight: 600;
}

.sector-card .seo-veredicto--bien {
  color: var(--kairikos-oliva);
}

.sector-card .seo-veredicto--regular {
  color: var(--kairikos-tinta);
}

.sector-card .seo-veredicto--mal {
  color: var(--kairikos-terracota-deep);
}

@media (max-width: 767px) {
  .pr-zona__campo--ancho {
    flex: 1 1 auto;
  }
}