/*
 * Estilos propios de /contratar/ (Tarea 12). Ningún literal hexadecimal nuevo: todo color sale de
 * las variables ya declaradas en tokens.css (comprobado por test/tokens.test.js). Es la primera
 * página del sitio con campos de texto reales (`input[type="text"]`/`input[type="email"]`) -- no
 * hay ninguna regla que reutilizar de base.css, que solo tiene checkbox/range (calculadora.njk).
 */

.contratar-formulario {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 480px;
  margin-top: 12px;
}

.contratar-campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contratar-campo label {
  font-weight: 600;
  font-size: .9rem;
}

.contratar-campo input {
  font: inherit;
  font-size: .95rem;
  color: var(--tinta);
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 10px;
  padding: 11px 14px;
  width: 100%;
}

/*
 * El anillo de foco (2026-09-07). Era --rojo, que sobre la superficie de panel da 3,55:1: pasa el
 * 3:1 que WCAG 1.4.11 exige a un indicador de foco, pero raspando, y el anillo cae justo en el
 * borde entre el velo del campo (donde da 3,12:1) y el panel de detras. --rojo-texto
 * (--panel-rosa) da 7,15:1 sobre el panel y 6,29:1 sobre el velo: se ve en los dos lados.
 */
.contratar-campo input:focus-visible {
  outline: 2px solid var(--rojo-texto);
  outline-offset: 1px;
}

/*
 * `aria-invalid="true"` (Javascript lo pone/quita, ver contratar.js) marca el campo con el mismo
 * rojo de marca que ya usa el resto del sitio para llamar la atención (`--rojo-texto`), no un
 * color de error nuevo.
 */
.contratar-campo input[aria-invalid="true"] {
  border-color: var(--rojo-texto);
}

.contratar-error {
  color: var(--rojo-texto);
  font-size: .82rem;
  min-height: 1.1em;
}

.contratar-aviso-legal {
  max-width: 480px;
}

.contratar-aviso-legal a {
  color: var(--rojo-texto);
}

/*
 * Confirmación (paso 5). Empieza oculta con `hidden` en el propio HTML -- solo se descubre desde
 * contratar.js tras componer el correo, nunca por defecto (nada de fingir un envío que no ha
 * pasado). `tabindex="-1"` permite enfocarla por JavaScript aunque no sea un control interactivo,
 * sin añadirla al orden de tabulación normal del teclado.
 */
.contratar-confirmacion {
  max-width: 480px;
  margin-top: 24px;
}

.contratar-confirmacion:focus {
  outline: none;
}

.contratar-confirmacion h2 {
  margin-bottom: 10px;
}

.contratar-confirmacion p + p {
  margin-top: 10px;
}

/* ============ Campos nuevos del formulario de alta (2026-09-18) ============
 * El titular pidio los datos y las dos casillas de otra web del sector. Lo que aporta esta hoja es
 * la maqueta: pares de campos en fila, el desplegable, el prefijo del telefono y las casillas.
 */

/*
 * El formulario ensancha (480 -> 620) porque ahora hay pares en fila; por debajo de 560 px cada
 * par vuelve a una sola columna, que es donde `minmax(0, 1fr)` importa: sin el `0`, un campo con
 * un placeholder largo impone su ancho minimo y la fila desborda.
 */
.contratar-formulario {
  max-width: 620px;
}

.contratar-fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
}

@media (max-width: 560px) {
  .contratar-fila {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* El desplegable copia el aspecto del <input> de arriba: misma caja, misma tipografia, mismo foco.
   `appearance: none` quita el cromado del sistema, que en Windows no se parece en nada al resto. */
.contratar-campo select {
  font: inherit;
  font-size: .95rem;
  color: var(--tinta);
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 10px;
  padding: 11px 38px 11px 14px;
  width: 100%;
  appearance: none;
  /* La flecha, dibujada con un degradado conico no: con dos lineas en un SVG embebido. Va en
     `background-image` para no meter un elemento mas dentro del <label>. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F6573' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
}

.contratar-campo select:focus-visible {
  outline: 2px solid var(--rojo-texto);
  outline-offset: 1px;
}

.contratar-campo select[aria-invalid="true"] {
  border-color: var(--rojo-texto);
}

/*
 * El telefono: el prefijo es un rotulo pegado al campo, dentro de la misma caja. La caja la dibuja
 * el contenedor y el <input> de dentro se queda SIN borde, para que los dos se vean como uno.
 */
.contratar-telefono {
  display: flex;
  align-items: stretch;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 10px;
  overflow: hidden;
}

.contratar-telefono:focus-within {
  outline: 2px solid var(--rojo-texto);
  outline-offset: 1px;
}

.contratar-telefono:has(input[aria-invalid="true"]) {
  border-color: var(--rojo-texto);
}

.contratar-prefijo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border-right: 1px solid var(--linea);
  color: var(--tinta-2);
  font-size: .95rem;
  white-space: nowrap;
}

/* Dentro de la caja compartida, el campo no pinta la suya ni su propio foco: los pone el padre. */
.contratar-telefono input {
  border: 0;
  border-radius: 0;
  background: none;
}

.contratar-telefono input:focus-visible {
  outline: none;
}

/*
 * Las casillas. La caja y el texto van en fila, y el texto NO se envuelve por debajo de la caja:
 * `align-items: start` la deja arriba, a la altura de la primera linea.
 *
 * `accent-color` tiñe la casilla con el rojo de marca sin dibujarla a mano: una casilla propia
 * hecha con pseudoelementos pierde el estado indeterminado, el foco del sistema y el alto contraste
 * de Windows.
 */
.contratar-casilla {
  display: flex;
  align-items: start;
  gap: 10px;
}

.contratar-casilla input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--rojo-texto);
}

.contratar-casilla label {
  font-size: .9rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--tinta-2);
}

.contratar-casilla input:focus-visible {
  outline: 2px solid var(--rojo-texto);
  outline-offset: 2px;
}

.contratar-casilla input[aria-invalid="true"] {
  outline: 2px solid var(--rojo-texto);
  outline-offset: 2px;
}

/* Trampa para bots (2026-09-24): fuera de la vista, no display:none, que algunos bots saltan. */
.contratar-trampa {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* El aviso de "no ha llegado", con la misma tarjeta que la confirmacion. */
.contratar-aviso-envio {
  margin-top: 24px;
}

.contratar-aviso-envio:focus {
  outline: 3px solid var(--rojo);
  outline-offset: 3px;
}