/*
 * AutoSandoval — formularios públicos y sus páginas.
 *
 * Alcance: SOLO las páginas con slug `pqrs` y `trabaja-con-nosotros`. Todas las
 * reglas van prefijadas con `.as-pqrs` o `.as-empleo` (clase que llevan las
 * secciones de Elementor de cada página), así que no tocan el resto del sitio.
 *
 * Se encola en `inc/assets.php` con `is_page()`, después de `tienda.css` y de
 * `oscuro.css`, y usa los tokens de `style.css` / `tienda.css`: no declara
 * colores ni tamaños nuevos.
 *
 * Qué resuelve (y por qué hace falta):
 *  1. La retícula interna del formulario CF7, que CF7 imprime sin estilos propios.
 *  2. El consentimiento, los errores en línea y los paneles de éxito/error: CF7
 *     6.1.7 no les da forma y `oscuro.css` solo colorea el texto del error.
 *  3. La relación de aspecto de las fotos sin altura fija (el widget Image de
 *     Elementor V3 solo recorta con `height`, prohibido por la especificación).
 *  4. Los dos chips del hero de «Trabaja con nosotros».
 *  5. La superficie de las tarjetas (`.as-card`). Se pinta en el envoltorio
 *     interno de la columna de Elementor y no en la columna, porque el fondo de
 *     columna se dibuja dentro del relleno del «Columns Gap» y anularía la
 *     separación entre tarjetas.
 *
 * Tipografía: NO se fija familia. Los tokens `--font-heading` / `--font-body`
 * nombran Archivo e Inter, que el sitio no carga (y estas páginas no pueden
 * pedir fuentes de terceros): al aplicarlos caerían a `system-ui` y el texto
 * quedaría distinto del resto del sitio, que sirve Bai Jamjuree. Se hereda la
 * familia del tema y se usan los tokens de color, tamaño, radio y espacio.
 *
 * Lo que NO se repite aquí porque ya está resuelto:
 *  - fondo, borde y color de todos los campos, foco dorado, casilla y botón de
 *    envío en modo oscuro → `oscuro.css` §8.
 *  - `body`, `h1`–`h3`, contenedores y fondos de sección → ajustes de Elementor
 *    de cada página, con `var(--as-*)` en los controles de color.
 */

/* --------------------------------------------------------------------------
 * 1. Fotografías: relación de aspecto y recorte sin altura fija
 * ------------------------------------------------------------------------ */

:is(.as-pqrs, .as-empleo) .as-media {
  display: block;
  overflow: hidden;
  border: 1px solid var(--as-border);
  border-radius: var(--radius-lg);
  background-color: var(--as-field);
}

:is(.as-pqrs, .as-empleo) .as-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Elementor 4.3.3 imprime la imagen como hija directa del widget (markup
 * optimizado). Esta regla cubre el caso de que el experimento se desactive y
 * vuelva el envoltorio: sin altura definida el `object-fit` no recortaría. */
:is(.as-pqrs, .as-empleo) .as-media > .elementor-widget-container {
  width: 100%;
  height: 100%;
}

:is(.as-pqrs, .as-empleo) .as-media--16x9 {
  aspect-ratio: 16 / 9;
}

:is(.as-pqrs, .as-empleo) .as-media--4x3 {
  aspect-ratio: 4 / 3;
}

:is(.as-pqrs, .as-empleo) .as-media--3x4 {
  aspect-ratio: 3 / 4;
}

:is(.as-pqrs, .as-empleo) .as-media--16x9 img {
  object-position: 50% 50%;
}

:is(.as-pqrs, .as-empleo) .as-media--4x3 img {
  object-position: 50% 45%;
}

:is(.as-pqrs, .as-empleo) .as-media--3x4 img {
  object-position: 50% 35%;
}

@media (max-width: 1024px) {
  :is(.as-pqrs, .as-empleo) .as-media--3x4 {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 767px) {
  :is(.as-pqrs, .as-empleo) .as-media--4x3 {
    aspect-ratio: 3 / 2;
  }

  :is(.as-pqrs, .as-empleo) .as-media--3x4 {
    aspect-ratio: 4 / 5;
    max-width: 22rem;
  }
}

/* --------------------------------------------------------------------------
 * 2. Chips del hero de «Trabaja con nosotros»
 * ------------------------------------------------------------------------ */

:is(.as-pqrs, .as-empleo) .as-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
}

:is(.as-pqrs, .as-empleo) .as-badge {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.25rem 0.875rem;
  border: 1px solid var(--as-border-strong);
  border-radius: var(--radius-pill);
  background-color: var(--as-surface);
  color: var(--as-text-body);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
}

:is(.as-pqrs, .as-empleo) .as-badge--gold {
  border-color: var(--as-gold-strong);
  background-color: var(--as-gold-soft);
  color: var(--as-gold);
}

/* --------------------------------------------------------------------------
 * 3. Tarjetas (canales, tipos de PQRS, argumentos y pasos)
 * ------------------------------------------------------------------------ */

:is(.as-pqrs, .as-empleo) .as-card {
  padding: 0 0.75rem 1.5rem;
}

:is(.as-pqrs, .as-empleo) .as-card > .elementor-widget-wrap.elementor-element-populated {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.5rem;
  border: 1px solid var(--as-border);
  border-radius: var(--radius-lg);
  background-color: var(--as-card);
}

:is(.as-pqrs, .as-empleo) .as-card a {
  color: var(--as-link);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

:is(.as-pqrs, .as-empleo) .as-card a:hover {
  color: var(--as-link-hover);
}

/* Correos largos: sin esto un `mailto:` de 29 caracteres empuja el ancho en
 * pantallas de 320px y aparece scroll horizontal. */
:is(.as-pqrs, .as-empleo) .as-canales a[href^="mailto:"] {
  overflow-wrap: anywhere;
}

@media (max-width: 767px) {
  :is(.as-pqrs, .as-empleo) .as-card {
    padding: 0 0 1rem;
  }

  :is(.as-pqrs, .as-empleo) .as-card > .elementor-widget-wrap.elementor-element-populated {
    padding: 1.25rem;
  }
}

/* --------------------------------------------------------------------------
 * 4. Retícula del formulario CF7
 *
 * El `<div class="as-form">` de la plantilla se imprime DENTRO de
 * `<form class="wpcf7-form">`: el grid y el ancho se aplican a `.as-form`, no al
 * `form`. Los `<p>` son hijos directos de `.as-form`.
 * ------------------------------------------------------------------------ */

:is(.as-pqrs, .as-empleo) .as-form {
  display: grid;
  gap: 1rem;
  width: 100%;
  max-width: 40rem;
  /* La tarjeta es más ancha que los 40rem del formulario: centrado queda con el
   * mismo aire a los dos lados; pegado a la izquierda dejaba un hueco asimétrico. */
  margin-inline: auto;
}

:is(.as-pqrs, .as-empleo) .as-form > p {
  margin: 0;
}

/* `wpcf7_autop` inserta saltos de línea dentro de los párrafos de la plantilla;
 * el espaciado lo da el grid. */
:is(.as-pqrs, .as-empleo) .as-form br {
  display: none;
}

:is(.as-pqrs, .as-empleo) .as-form__legend {
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--as-text-muted);
}

:is(.as-pqrs, .as-empleo) .as-req {
  color: var(--as-gold);
  font-weight: 700;
}

:is(.as-pqrs, .as-empleo) .as-form__field {
  display: block;
}

:is(.as-pqrs, .as-empleo) .as-form .label {
  display: block;
  margin-bottom: 0.375rem;
  color: var(--as-text);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.35;
}

:is(.as-pqrs, .as-empleo) .as-form .field-hint {
  display: block;
  margin-top: 0.25rem;
  color: var(--as-text-muted);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4;
}

/* CF7 envuelve cada control en un `<span>`; sin esto el campo no ocupa el ancho
 * de la columna. */
:is(.as-pqrs, .as-empleo) .as-form .wpcf7-form-control-wrap {
  display: block;
}

:is(.as-pqrs, .as-empleo) .as-form .input {
  width: 100%;
  min-height: 48px;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--as-border-strong);
  border-radius: var(--radius-sm);
  background-color: var(--as-field);
  color: var(--as-text);
  font-size: 1rem;
  line-height: 1.4;
}

:is(.as-pqrs, .as-empleo) .as-form .input::placeholder {
  color: var(--as-text-muted);
  opacity: 1;
}

:is(.as-pqrs, .as-empleo) .as-form .input:focus {
  border-color: var(--as-gold);
  box-shadow: var(--as-focus-glow);
  outline: 2px solid transparent;
  outline-offset: 0;
}

:is(.as-pqrs, .as-empleo) .as-form select.input {
  appearance: none;
  padding-right: 2.5rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--as-text-muted) 50%),
    linear-gradient(135deg, var(--as-text-muted) 50%, transparent 50%);
  /* Flecha centrada verticalmente en el alto de 48px del campo: con un valor en
   * `rem` quedaba por encima del centro y se desalineaba al cambiar el tamaño de
   * letra. Las dos capas forman el mismo caret, separadas 0.25rem. */
  background-position: right 1.25rem center, right 1rem center;
  background-repeat: no-repeat;
  background-size: 0.3rem 0.3rem, 0.3rem 0.3rem;
}

:is(.as-pqrs, .as-empleo) .as-form textarea.input {
  min-height: 9rem;
  resize: vertical;
}

/* --------------------------------------------------------------------------
 * 5. Consentimiento de tratamiento de datos
 * ------------------------------------------------------------------------ */

:is(.as-pqrs, .as-empleo) .as-form__consent {
  margin: 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--as-border);
  border-radius: var(--radius-sm);
  background-color: var(--as-surface);
}

:is(.as-pqrs, .as-empleo) .as-form .wpcf7-list-item {
  margin: 0;
}

:is(.as-pqrs, .as-empleo) .as-form .wpcf7-list-item > label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.25rem 0;
  color: var(--as-text-body);
  font-size: 0.875rem;
  line-height: 1.55;
  cursor: pointer;
}

:is(.as-pqrs, .as-empleo) .as-form .wpcf7-list-item input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.15rem 0 0;
  padding: 0;
  accent-color: var(--as-gold);
}

:is(.as-pqrs, .as-empleo) .as-form .wpcf7-list-item-label a {
  color: var(--as-link);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* --------------------------------------------------------------------------
 * 6. Honeypot: fuera de la vista y del flujo, nunca `display:none`
 * (algunos bots descartan los campos con `display:none`).
 * ------------------------------------------------------------------------ */

:is(.as-pqrs, .as-empleo) .as-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
 * 7. Errores de validación
 * ------------------------------------------------------------------------ */

:is(.as-pqrs, .as-empleo) .as-form .wpcf7-form-control-wrap .wpcf7-not-valid {
  border: 2px solid var(--as-danger-text);
  box-shadow: inset 0 0 0 1px var(--as-danger-text);
}

:is(.as-pqrs, .as-empleo) .as-form .wpcf7-not-valid-tip {
  display: block;
  margin-top: 0.25rem;
  color: var(--as-danger-text);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
}

/* --------------------------------------------------------------------------
 * 8. Paneles de respuesta (éxito, error y spam)
 *
 * CF7 6.1.7 añade el estado como clase al `<form>` (`sent`, `invalid`,
 * `unaccepted`, `spam`, `aborted`, `failed`) y deja el texto en
 * `.wpcf7-response-output`.
 * ------------------------------------------------------------------------ */

:is(.as-pqrs, .as-empleo) .as-form .wpcf7-response-output {
  margin: 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--as-border);
  border-radius: var(--radius-sm);
  background-color: var(--as-surface);
  color: var(--as-text-body);
  font-size: 0.9375rem;
  line-height: 1.55;
}

:is(.as-pqrs, .as-empleo) .as-form .wpcf7-response-output:empty {
  display: none;
}

:is(.as-pqrs, .as-empleo) form.sent .as-form .wpcf7-response-output {
  border-color: var(--as-success-text);
  background-color: var(--as-success-soft);
  color: var(--as-text);
}

:is(.as-pqrs, .as-empleo) form:is(.invalid, .unaccepted, .spam, .aborted, .failed) .as-form .wpcf7-response-output {
  border-color: var(--as-danger-text);
  background-color: var(--as-danger-soft);
  color: var(--as-text);
}

/* --------------------------------------------------------------------------
 * 9. Botón de envío
 *
 * El dorado del sistema ya lo aplica `oscuro.css` en modo oscuro; esta regla
 * añade el ancho, el estado deshabilitado y el mismo aspecto en modo claro.
 * ------------------------------------------------------------------------ */

:is(.as-pqrs, .as-empleo) .as-form__submit {
  margin: 0;
}

:is(.as-pqrs, .as-empleo) .as-form .as-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 14rem;
  min-height: 3rem;
  padding: 0.75rem 1.75rem;
  border: 1px solid var(--as-cta-border);
  border-radius: var(--radius-pill);
  background-color: var(--as-cta-bg);
  color: var(--as-cta-text);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}

:is(.as-pqrs, .as-empleo) .as-form .as-submit:hover {
  background-color: var(--as-cta-bg-hover);
  color: var(--as-cta-text);
}

:is(.as-pqrs, .as-empleo) .as-form .as-submit:focus-visible {
  outline: 3px solid var(--as-yellow);
  outline-offset: 3px;
}

:is(.as-pqrs, .as-empleo) form.submitting .as-form .as-submit,
:is(.as-pqrs, .as-empleo) .as-form .as-submit:disabled {
  opacity: 0.7;
  cursor: progress;
}

@media (max-width: 479px) {
  :is(.as-pqrs, .as-empleo) .as-form .as-submit {
    width: 100%;
    min-width: 0;
  }
}

/* --------------------------------------------------------------------------
 * 10. Ancla «#formulario»
 *
 * La cabecera del tema es fija (60px). Al llegar desde el CTA del hero el borde
 * superior de la sección quedaba debajo de la cabecera; `scroll-margin-top` lo
 * compensa sin JavaScript ni `scroll-padding` global.
 * ------------------------------------------------------------------------ */

/* El `id` va en la misma sección que la clase de página, así que el selector es
 * compuesto (sin descendencia). */
:is(.as-pqrs, .as-empleo)#formulario {
  scroll-margin-top: 5rem;
}