/* 930 Autogest Core — estilos de formulario público.
   Reutiliza las variables del tema si están presentes; si el plugin se
   activa con otro tema, cae en los valores por defecto de aquí abajo.
   Ningún tamaño de fuente absoluto: todo hereda la tipografía de la
   página para que el formulario no parezca una pieza pegada de otro
   sitio. */

.ag930-servicio,
.ag930-form {
  --ag930-action: var(--action, #D40000);
  --ag930-action-hover: var(--action-hover, #A90000);
  --ag930-border: var(--border-plata, #B8BDC2);
  --ag930-border-suave: var(--border-subtle, #E3E5E6);
  --ag930-text: var(--text-body, #25282C);
  --ag930-text-strong: var(--text-strong, #151719);
  --ag930-text-muted: var(--text-muted, #5A5F66);
  --ag930-bg-alt: var(--bg-section-alt, #F1F2F2);
  --ag930-radio: var(--radius-card, 8px);
  --ag930-error: #A90000;
  --ag930-error-bg: #FDECEC;
  --ag930-ok: #1E7A3C;
  /* Ámbar de "míralo", distinto del rojo de "no puedes continuar". */
  --ag930-aviso: #8A5300;
  --ag930-aviso-bg: #FFF6E5;
  /* Ancho único para TODOS los formularios: cabecera, barra de
     progreso, campos y bloque de cierre comparten exactamente la misma
     columna, centrada. */
  --ag930-ancho: 780px;
}

.ag930-servicio {
  max-width: var(--ag930-ancho);
  margin-inline: auto;
}

.ag930-form {
  max-width: var(--ag930-ancho);
  margin-inline: auto;
}

/* Dentro del contenedor rediseñado el formulario ya está centrado por
   .ag930-servicio: no debe aplicar otra vez su propio límite. */
.ag930-servicio .ag930-form { max-width: none; margin-inline: 0; }

.ag930-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

/* ==================================================================
   Cabecera del servicio
   ================================================================== */

/* Sin título propio: el nombre del servicio es el <h1> de la página
   (ver render_cabecera() en class-form-shortcode.php). */
.ag930-form-cabecera { margin-bottom: 2rem; }

/* Desde que las páginas de trámite dejaron de llevar una introducción
   genérica encima del formulario, esta descripción es el ÚNICO texto
   explicativo que aparece bajo el título de la página: se pinta en el
   rojo de marca (tono oscuro, 7,8:1 de contraste sobre blanco) y un
   punto más grande que el cuerpo normal, con un filete rojo a la
   izquierda que la separa del resto sin necesidad de recuadro. */
.ag930-form-descripcion {
  border-left: 3px solid var(--ag930-action);
  padding-left: 1.1rem;
}
.ag930-form-descripcion p {
  margin: 0 0 0.9em;
  color: var(--ag930-action-hover);
  font-size: 1.03rem;
  line-height: 1.7;
}
/* El primer párrafo es el único visible mientras la descripción está
   plegada: entra con algo más de peso para que funcione de entradilla. */
.ag930-form-descripcion > p:first-child { font-weight: 500; }
.ag930-form-descripcion p:last-child { margin-bottom: 0; }

@media (max-width: 480px) {
  .ag930-form-descripcion {
    border-left-width: 2px;
    padding-left: 0.85rem;
  }
  .ag930-form-descripcion p { font-size: 1rem; }
}

/* Plegado de la descripción. El HTML ya viene con los párrafos 2..N
   dentro de .ag930-form-descripcion-resto y con el botón incluido (ver
   render_cabecera() en class-form-shortcode.php): aquí solo se decide
   qué se ve. Todo cuelga de .ag930-js, la clase que el navegador añade
   a <html> nada más cargar la página, de modo que sin JavaScript la
   descripción se ve entera y el botón no aparece. */
.ag930-js .ag930-form-descripcion-resto { display: none; }
.ag930-js .ag930-form-descripcion.is-desplegada .ag930-form-descripcion-resto { display: block; }

.ag930-form-leer-mas {
  display: none;
  margin-top: 0.6em;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ag930-action);
  cursor: pointer;
  text-decoration: underline;
}
.ag930-js .ag930-form-leer-mas { display: inline-block; min-height: 24px; }
.ag930-form-leer-mas:hover { color: var(--ag930-action-hover); }

/* Bloque informativo: uniforme en todos los servicios. */
/* Las lineas de separacion son BORDES de cada casilla, no un hueco de
   1px por el que se ve el fondo del contenedor.
   El truco del hueco (gap:1px + background del color del borde) se ve
   igual en Chrome, pero depende de que el navegador respete un hueco de
   un solo pixel entre pistas de ancho fraccionario (aqui 1fr 1fr 1.25fr
   1.45fr sobre 778px, o sea columnas de 193,75px). WebKit redondea cada
   pista hacia arriba y se come el hueco: en un iPad el cajetin aparece
   sin ninguna linea, como un bloque de texto suelto. Con bordes reales
   no hay nada que redondear y se ve igual en cualquier motor. */
.ag930-form-datos {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 1.5rem;
  background: #fff;
  border: 1px solid var(--ag930-border-suave);
  border-radius: var(--ag930-radio);
  overflow: hidden;
}
/* Apilado: linea horizontal entre casillas. */
.ag930-form-dato + .ag930-form-dato {
  border-top: 1px solid var(--ag930-border-suave);
}
@media (min-width: 720px) {
  /* Con la 4ª casilla de precio, "Qué incluye" (la única con lista, más
     texto) conserva la columna más ancha; precio queda más estrecho,
     como los dos plazos de la izquierda. */
  /* 1.25fr y ya no 0.9fr: la casilla de precio dejó de ser un número
     suelto y ahora lleva debajo el desglose de honorarios, IVA y tasa
     DGT. Con 0.9fr, "Honorarios (base imponible)" y su importe se
     partían en dos líneas cada uno. */
  .ag930-form-datos { grid-template-columns: 1fr 1fr 1.25fr 1.45fr; }
  /* En cuatro columnas la linea pasa a ser vertical. `box-sizing` para
     que el borde no ensanche la casilla y descuadre la rejilla. */
  .ag930-form-dato + .ag930-form-dato {
    border-top: 0;
    border-left: 1px solid var(--ag930-border-suave);
  }
  .ag930-form-dato { box-sizing: border-box; }
}

.ag930-form-dato {
  background: #fff;
  padding: 0.95rem 1.15rem;
}

/* Icono a tamaño de texto, pegado al dato al que acompaña — no como
   ilustración de columna. */
.ag930-icono {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  color: var(--ag930-action);
  vertical-align: -0.15em;
  margin-right: 0.4em;
}

.ag930-form-dato-etiqueta {
  display: block;
  font-size: var(--fs-eyebrow, 0.8125rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ag930-text-muted);
  margin-bottom: 0.3em;
}
.ag930-form-dato strong {
  display: block;
  color: var(--ag930-text-strong);
  font-size: 0.95rem;
  line-height: 1.35;
}
.ag930-form-dato ul {
  margin: 0;
  padding-left: 1.05em;
  font-size: 0.85rem;
  color: var(--ag930-text);
}
.ag930-form-dato li { margin-bottom: 0.15em; }
.ag930-form-dato li:last-child { margin-bottom: 0; }

/* ---------- Desglose del precio dentro de su casilla ---------- */
/* La lista la pinta el TEMA (.pricing-desglose, exactamente la misma
   pieza que la página de Precios). Aquí solo se ajusta para que quepa.
   OJO con la especificidad: `.ag930-form-dato ul` de aquí arriba vale
   0-1-1 y le gana a `.pricing-desglose-lista` del tema, que vale 0-1-0
   — o sea que le devuelve la sangría y el tamaño de letra que el tema ya
   le había quitado. Por eso todo esto lleva delante la clase de la
   casilla: 0-2-0, y gana sin depender del orden en que se carguen las
   dos hojas. */
.ag930-form-dato--precio .pricing-desglose {
  margin-top: 0.55rem;
  font-size: 0.78rem;
}
/* 12,8 px, no 11,52. Este <summary> es el que hay que pulsar para ver de
   qué se compone lo que se va a pagar —incluido el ITP—, así que es un
   control, no una nota al pie: a 0.72rem quedaba por debajo del mínimo
   legible del sitio. Mismo criterio que las etiquetas
   «Obligatorio/Opcional», que subieron de 10,4 a 12,8 px. */
.ag930-form-dato--precio .pricing-desglose summary {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ag930-text-muted);
}
.ag930-form-dato--precio .pricing-desglose-lista {
  padding-left: 0;
  font-size: inherit;
}
.ag930-form-dato--precio .pricing-desglose-lista li {
  margin-bottom: 0;
  gap: 0.6em;
  align-items: baseline;
}
/* El importe NUNCA se parte. En una columna estrecha, el `space-between`
   del tema dejaba "57,02" en una línea y "€" en la siguiente, que se lee
   como si faltara algo. La etiqueta sí puede seguir partiéndose: es
   texto corrido y no pierde nada. */
.ag930-form-dato--precio .pricing-desglose-lista li > span:last-child {
  white-space: nowrap;
  flex-shrink: 0;
}

/* Asterisco que enlaza el plazo con su nota legal, justo debajo.
   Caja de 24 px como mínimo (WCAG 2.5.8): el «*» solo medía 7x20 y es un
   enlace que se pulsa con el dedo (auditoría de apertura, 2026-09-25). */
.ag930-form-asterisco {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  vertical-align: middle;
  color: var(--ag930-action);
  text-decoration: none;
  font-weight: 700;
}
.ag930-form-asterisco:hover { text-decoration: underline; }

.ag930-form-nota-plazos {
  margin: 0.75em 0 0;
  font-size: var(--fs-eyebrow, 0.8125rem);
  line-height: 1.5;
  color: var(--ag930-text-muted);
}
/* Al llegar desde el asterisco, la nota queda destacada un instante
   para que se vea a qué apuntaba el enlace. */
.ag930-form-nota-plazos:target { color: var(--ag930-text); }

/* ==================================================================
   Barra de progreso
   ================================================================== */

.ag930-progreso { margin-bottom: 2rem; }

.ag930-progreso-lista {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0.5rem;
  list-style: none;
  margin: 0 0 0.85rem;
  padding: 0;
  counter-reset: none;
}

.ag930-progreso-paso {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4em;
  text-align: center;
  font-size: 0.78rem;
  color: var(--ag930-text-muted);
  line-height: 1.25;
}
.ag930-progreso-paso.is-visitado { cursor: pointer; }

.ag930-progreso-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--ag930-border);
  background: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--ag930-text-muted);
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.ag930-progreso-paso.is-activo { color: var(--ag930-text-strong); font-weight: 600; }
.ag930-progreso-paso.is-activo .ag930-progreso-num {
  background: var(--ag930-action);
  border-color: var(--ag930-action);
  color: #fff;
}
.ag930-progreso-paso.is-completado .ag930-progreso-num {
  background: var(--ag930-text-strong);
  border-color: var(--ag930-text-strong);
  color: #fff;
}

.ag930-progreso-barra {
  height: 5px;
  border-radius: 999px;
  background: var(--ag930-border-suave);
  overflow: hidden;
}
.ag930-progreso-relleno {
  height: 100%;
  background: var(--ag930-action);
  border-radius: 999px;
  transition: width 250ms ease;
}
.ag930-progreso-contador {
  margin: 0.6em 0 0;
  font-size: 0.78rem;
  color: var(--ag930-text-muted);
  text-align: right;
}

@media (max-width: 560px) {
  .ag930-progreso-txt { display: none; }
  .ag930-progreso-lista { grid-auto-columns: auto; justify-content: center; gap: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ag930-progreso-relleno,
  .ag930-progreso-num { transition: none; }
}

/* ==================================================================
   Pasos
   ================================================================== */

/* Cada paso es una tarjeta del acordeón. Sin JS todas quedan abiertas y
   el formulario se envía de una sola vez: la clase .ag930-form--js la
   añade form.js, así que plegar u ocultar pasos nunca depende de un
   script que pudiera no cargar. */
.ag930-paso {
  border: 1px solid var(--ag930-border-suave);
  border-radius: var(--ag930-radio);
  background: #fff;
  margin-bottom: 0.85rem;
}
.ag930-paso.is-activo {
  border-color: var(--ag930-border);
  box-shadow: 0 1px 2px rgba(21, 23, 25, 0.05), 0 6px 18px rgba(21, 23, 25, 0.05);
}

/* Los pasos aún no alcanzados no se muestran: la página va creciendo a
   medida que se avanza, en vez de abrir con un formulario larguísimo. */
.ag930-form--js .ag930-paso.is-futuro { display: none; }
.ag930-form--js .ag930-paso:not(.is-activo) .ag930-paso-cuerpo { display: none; }

.ag930-paso-cabecera-wrap { margin: 0; font-size: inherit; font-weight: inherit; }
.ag930-paso-cabecera {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.95rem 1.25rem;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  color: var(--ag930-text-strong);
  cursor: default;
}
.ag930-form--js .ag930-paso.is-completado .ag930-paso-cabecera { cursor: pointer; }
.ag930-form--js .ag930-paso.is-completado:hover .ag930-paso-cabecera { color: var(--ag930-action); }
.ag930-paso-cabecera:focus-visible { outline: 2px solid var(--ag930-action); outline-offset: -2px; border-radius: var(--ag930-radio); }

.ag930-paso-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--ag930-border);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ag930-text-muted);
  background: #fff;
}
.ag930-paso.is-activo .ag930-paso-num {
  background: var(--ag930-action);
  border-color: var(--ag930-action);
  color: #fff;
}
.ag930-paso.is-completado .ag930-paso-num {
  background: var(--ag930-ok);
  border-color: var(--ag930-ok);
  color: #fff;
}

.ag930-paso-titulo { flex: 1 1 auto; font-weight: 700; font-size: 1rem; }

/* "Completado" solo tiene sentido en un paso ya cerrado. */
.ag930-paso-marca { display: none; }
.ag930-form--js .ag930-paso.is-completado .ag930-paso-marca {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  flex: none;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ag930-ok);
}
.ag930-form--js .ag930-paso.is-completado .ag930-paso-marca::before { content: '✓'; font-weight: 700; }

.ag930-paso-cuerpo { padding: 0 1.25rem 1.25rem; }

.ag930-paso-nota {
  margin: 0 0 1.25em;
  font-size: 0.85rem;
  color: var(--ag930-text-muted);
}

.ag930-paso-nav {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ag930-border-suave);
}
.ag930-paso-nav .ag930-btn-siguiente,
.ag930-paso-nav .ag930-btn-enviar { margin-left: auto; }

.ag930-campos-grid {
  display: grid;
  gap: 1.1rem 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .ag930-campos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ag930-campos-grid > .ag930-field--ancho { grid-column: 1 / -1; }
}

.ag930-btn {
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  border-radius: 4px;
  padding: 0.8em 1.6em;
  border: 1px solid var(--ag930-border);
  background: #fff;
  color: var(--ag930-text-strong);
}
.ag930-btn:hover { border-color: var(--ag930-text-strong); }
.ag930-btn[disabled] { opacity: 0.45; cursor: default; }
.ag930-btn-primario {
  background: var(--ag930-action);
  border-color: var(--ag930-action);
  color: #fff;
}
.ag930-btn-primario:hover {
  background: var(--ag930-action-hover);
  border-color: var(--ag930-action-hover);
}
.ag930-btn-enviar.is-enviando { opacity: 0.6; cursor: progress; }

/* ==================================================================
   Campos
   ================================================================== */

.ag930-form-errores {
  border: 1px solid var(--ag930-error);
  background: var(--ag930-error-bg);
  border-radius: var(--ag930-radio);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}
.ag930-form-errores:focus { outline: 2px solid var(--ag930-error); outline-offset: 2px; }
.ag930-form-errores p { margin: 0 0 0.5em; font-weight: 600; color: var(--ag930-error); }
.ag930-form-errores ul { margin: 0; padding-inline-start: 1.25em; font-size: 0.9rem; }

.ag930-fieldset {
  border: 1px solid var(--ag930-border);
  border-radius: var(--ag930-radio);
  padding: 1.25rem 1.5rem 1.5rem;
  margin: 0 0 1.5rem;
  /* `<fieldset>` no es un bloque normal: la hoja del navegador le pone
     `min-inline-size: min-content`, asi que se niega a encoger por debajo
     del contenido mas ancho que tenga dentro y NINGUN `width` lo corrige.
     Medido en produccion a 320px: el fieldset pedia 356px dentro de un
     formulario de 193, y el borde derecho de todos los campos quedaba
     cortado fuera de la pantalla en Tasacion, Transporte y Fotografia.
     Es la unica propiedad que lo arregla. */
  min-inline-size: 0;
}
.ag930-fieldset legend {
  padding-inline: 0.5em;
  font-weight: 700;
  color: var(--ag930-text-strong);
}
/* Dentro de una tarjeta de paso ya hay un borde: el del fieldset se
   suaviza para no dibujar dos cajas encajadas una dentro de otra. */
.ag930-paso-cuerpo .ag930-fieldset {
  border-color: var(--ag930-border-suave);
  padding: 1rem 1.15rem 1.15rem;
  margin-bottom: 1.15rem;
}
.ag930-paso-cuerpo .ag930-fieldset legend { font-size: 0.95rem; }

.ag930-field { margin-bottom: 1rem; }
.ag930-campos-grid .ag930-field { margin-bottom: 0; }

.ag930-field > label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.35em;
  color: var(--ag930-text-strong);
}
.ag930-obligatorio { color: var(--ag930-action); font-weight: 700; }

/* El `input[type="file"]` estaba fuera de esta lista y era el segundo
   desbordamiento de movil: un campo de archivo tiene ancho intrinseco
   propio (medido: 306px, el que necesita el boton "Seleccionar archivo"
   mas el texto "Sin archivos seleccionados") y sin `width` no encoge.
   Se salia 27px a 375px y 17px en /profesionales/ a 320px. El de la
   zona de arrastre no entra aqui: ese va en `position: absolute` con
   `inset: 0` y ya se ajusta a su caja (ver .ag930-dropzone mas abajo). */
.ag930-field input[type="text"],
.ag930-field input[type="email"],
.ag930-field input[type="tel"],
.ag930-field input[type="number"],
.ag930-field input[type="date"],
.ag930-field > input[type="file"],
.ag930-field select,
.ag930-field textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 0.7em 0.9em;
  border: 1px solid var(--ag930-border);
  border-radius: 4px;
  font: inherit;
  color: var(--ag930-text);
  background: #fff;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.ag930-field input:focus,
.ag930-field select:focus,
.ag930-field textarea:focus {
  outline: none;
  border-color: var(--ag930-text-strong);
  box-shadow: 0 0 0 3px rgba(21, 23, 25, 0.08);
}
.ag930-field textarea { min-height: 5.5em; resize: vertical; }

/* Las declaraciones legales del final del formulario (privacidad,
   cookies, veracidad de los datos) son casillas obligatorias: sin
   marcarlas no se envía nada. No llevan la clase .ag930-checkbox-opcion
   —son un <label for> a secas dentro de .ag930-field-checkbox—, así que
   se quedaban fuera del relleno de más abajo y seguían midiendo 22 px.
   Salió en la prueba de zonas pulsables, no a ojo: por eso esa prueba
   busca «<label> con una casilla dentro» y no una clase concreta.

   El margen entre declaraciones baja de 0.9rem a 0 por lo mismo que el
   hueco entre opciones: ahora lo pone el relleno de cada una. */
.ag930-field-checkbox label,
.ag930-field-checkbox > label { display: flex; align-items: flex-start; gap: 0.55em; min-height: 44px; padding: 0.7rem 0; font-weight: 400; font-size: 0.9rem; }
.ag930-field-checkbox input { margin-top: 0.25em; flex: 0 0 auto; }

.ag930-field-help {
  font-size: 0.8rem;
  color: var(--ag930-text-muted);
  margin: -0.15em 0 0.5em;
  line-height: 1.45;
}

/* Mensaje concreto bajo el campo. Nunca se muestra un borde rojo sin
   explicación: la caja existe siempre y solo se hace visible cuando
   tiene texto (lo pone form.js o PHP tras un envío fallido). */
.ag930-field-error {
  display: none;
  margin: 0.4em 0 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ag930-error);
  line-height: 1.4;
}
.ag930-field-error:not(:empty) { display: block; }

/* Aviso de cuadre entre la provincia elegida y el código postal de la
   dirección (ver provincia-cp-v1.js). Ámbar y no rojo a propósito: no
   impide enviar el formulario, así que no debe confundirse con los
   campos que sí lo impiden — si todo grita igual, no grita nada. */
.ag930-field-aviso {
  margin: 0.4em 0 0;
  padding: 0.55em 0.7em;
  border-left: 3px solid var(--ag930-aviso);
  background: var(--ag930-aviso-bg);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ag930-aviso);
  line-height: 1.45;
}

.ag930-field-aviso[hidden] { display: none; }

.ag930-field-invalido input[type="text"],
.ag930-field-invalido input[type="email"],
.ag930-field-invalido input[type="tel"],
.ag930-field-invalido input[type="number"],
.ag930-field-invalido input[type="date"],
.ag930-field-invalido select,
.ag930-field-invalido textarea {
  border-color: var(--ag930-error);
  background: var(--ag930-error-bg);
}
.ag930-field-invalido > label { color: var(--ag930-error); }
.ag930-field-invalido .ag930-field-radio-opciones,
.ag930-field-invalido .ag930-field-checkbox-opciones {
  outline: 1px solid var(--ag930-error);
  outline-offset: 0.4em;
  border-radius: 4px;
}
.ag930-field-invalido .ag930-dropzone {
  border-color: var(--ag930-error);
  background: var(--ag930-error-bg);
}

/* Zona pulsable de 44 px de alto.

   Cada opción medía 22 px: exactamente el alto de una línea de texto a
   0.9rem, porque no tenía relleno propio. Un dedo necesita 44x44 (WCAG
   2.5.5 y las guías de Apple) y estos formularios se rellenan casi
   siempre desde el móvil, con el vehículo delante — fallar la opción y
   marcar la de al lado en «Tipo de tasación» cambia el servicio que se
   contrata, no solo la comodidad.

   El relleno va en rem y no en em a propósito: lo que se persigue son
   píxeles reales de dedo, no múltiplos del tamaño de letra. Si mañana
   el texto baja a 0.85rem, la zona pulsable tiene que seguir midiendo
   44. La regla min-height es el cinturón por si eso ocurre.

   El hueco entre opciones baja de 0.5em a 0 porque ahora lo pone el
   relleno de cada fila. Con los dos a la vez el paso entre opciones
   subía de 29 a 52 px y el grupo se deshacía visualmente; así sube solo
   a 44 y las filas quedan contiguas, que es como se comporta cualquier
   lista de opciones pulsable. La separación que ve el ojo entre dos
   textos pasa de 7 a 22 px, que sigue leyéndose como un grupo. */
.ag930-field-radio-opciones,
.ag930-field-checkbox-opciones { display: flex; flex-direction: column; gap: 0; }
.ag930-radio-opcion,
.ag930-checkbox-opcion { display: flex; align-items: flex-start; gap: 0.5em; min-height: 44px; padding: 0.7rem 0; font-weight: 400; font-size: 0.9rem; cursor: pointer; }
.ag930-radio-opcion input,
.ag930-checkbox-opcion input { margin-top: 0.2em; }

/* ---------- Modalidad dentro de la propia opción ----------

   Las seis familias de tasación con más de una modalidad se pintan como
   UNA opción con un desplegable pequeño dentro (ver
   render_radio_opciones() en class-form-shortcode.php). Aquí solo se
   decide cuándo se ve ese desplegable y cómo queda la letra de la
   modalidad al lado del nombre.

   EL DESPLEGABLE SE VE POR DEFECTO. La clase .ag930-modalidades-js la
   añade modalidad-v1.js al arrancar, así que la regla que recoge los
   desplegables de las familias no marcadas SOLO se aplica si hay
   JavaScript para volver a abrirlos. Sin él se ven los seis, la lista es
   más larga y sigue funcionando — que es la regla de esta casa: el
   plegado es una mejora, nunca un requisito. Es lo contrario de lo que
   hacen los campos condicionales de aquí abajo (nacen con [hidden]), y a
   propósito: allí un campo de más solo sobra, aquí un desplegable
   escondido impediría elegir modalidad. */
.ag930-radio-familia { display: flex; flex-direction: column; }
.ag930-radio-modalidad {
  display: flex;
  align-items: center;
  gap: 0.5em;
  /* Sangrado hasta la altura del texto de la opción: el radio (~13px) y
     el hueco de 0.5em de .ag930-radio-opcion. Así el desplegable cuelga
     del nombre y no del borde del grupo, y se lee como parte de esa
     opción y no como un campo nuevo. */
  padding: 0 0 0.7rem 1.9em;
  margin-top: -0.35rem;
}
.ag930-radio-modalidad-etiqueta {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ag930-text-muted);
}
/* Pequeño a propósito: es un ajuste de la opción, no una pregunta del
   formulario, y con el ancho completo competía con el propio grupo. Los
   44px de alto se mantienen — se sigue pulsando con el dedo. */
.ag930-radio-modalidad select {
  min-height: 44px;
  padding: 0.35rem 0.6rem;
  font-size: 0.88rem;
  width: auto;
  max-width: 100%;
}
.ag930-modalidades-js .ag930-radio-familia:not([data-ag930-familia-abierta]) .ag930-radio-modalidad { display: none; }

/* La letra de la modalidad elegida, al lado del nombre. Una sola letra
   —T, P, C, M, A— porque va en la misma línea que el título del
   servicio y repetir ahí «— telemática» era justo lo que hacía
   indistinguibles las parejas. */
.ag930-radio-abreviatura {
  flex: 0 0 auto;
  min-width: 1.55em;
  padding: 0.05em 0.4em;
  border-radius: 999px;
  background: var(--ag930-action);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.55;
  text-align: center;
}
.ag930-radio-abreviatura[hidden] { display: none; }
.ag930-radio-etiqueta { flex: 1 1 auto; }

/* Campos condicionales del formulario adaptativo de tasación: ocultos
   hasta que 'tipo_tasacion' coincida (ver form.js), con el atributo
   nativo [hidden] — sin JS quedan simplemente ocultos en vez de
   mostrar campos fuera de contexto. */
.ag930-field-condicional[hidden] { display: none; }

/* ==================================================================
   Documentación (arrastrar y soltar)
   ================================================================== */

.ag930-documentos { display: grid; gap: 1rem; }

.ag930-documento {
  border: 1px solid var(--ag930-border-suave);
  border-radius: var(--ag930-radio);
  padding: 1.15rem 1.25rem;
  background: #fff;
}
.ag930-documento.ag930-field-invalido { border-color: var(--ag930-error); }

/* Jerarquía deliberada dentro de cada documento:
   1. QUÉ hay que aportar — el nombre, en negrita y al mayor tamaño.
   2. Por qué / qué debe verse — la descripción, legible pero secundaria.
   3. Formatos y límites — letra pequeña bajo la zona de subida: es una
      aclaración técnica, no debe competir con lo anterior. */
.ag930-documento-info { margin-bottom: 0.8rem; }
.ag930-documento-nombre {
  display: flex;
  align-items: center;
  gap: 0.6em;
  flex-wrap: wrap;
  margin: 0 0 0.25em;
}
.ag930-documento-nombre label {
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.3;
  color: var(--ag930-text-strong);
  cursor: pointer;
}
/* 0.8rem = 12,8 px, y antes eran 0.65rem = 10,4 px.
   No es una preferencia: 10,4 px EN MAYÚSCULAS, en negrita 700 y con
   letter-spacing es la combinación que peor se lee de cerca, y esta es la
   etiqueta que le dice al cliente si un documento hace falta o no. Va en
   formularios que ya cuestan 59 s de teclado; si no distingue «Obligatorio»
   de «Opcional», sube de más o se atasca.
   Sigue siendo claramente más pequeña que la etiqueta del documento
   (1.02rem), que es lo que tiene que seguir siendo: una marca, no un título.
   El espaciado baja de 0.05em a 0.03em porque a 10,4 px ayudaba a separar
   mayúsculas apretadas y a 12,8 px ya solo alarga la pastilla.
   Los colores NO se tocan: ya dan 6,84:1, medido. */
.ag930-etiqueta {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-radius: 999px;
  padding: 0.2em 0.7em;
  line-height: 1.4;
}
.ag930-etiqueta--obligatorio { background: var(--ag930-error-bg); color: var(--ag930-error); }
.ag930-etiqueta--opcional { background: var(--ag930-bg-alt); color: var(--ag930-text-muted); }

.ag930-documento-desc {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ag930-text);
  line-height: 1.5;
}
.ag930-documento-formatos {
  margin: 0.5em 0 0;
  font-size: var(--fs-eyebrow, 0.8125rem);
  line-height: 1.4;
  color: var(--ag930-text-muted);
  opacity: 0.85;
}

.ag930-dropzone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 96px;
  padding: 1rem;
  border: 1.5px dashed var(--ag930-border);
  border-radius: var(--ag930-radio);
  background: var(--ag930-bg-alt);
  transition: border-color 150ms ease, background 150ms ease;
}
.ag930-dropzone:hover { border-color: var(--ag930-action); }
.ag930-dropzone.is-arrastrando {
  border-color: var(--ag930-action);
  background: color-mix(in srgb, var(--ag930-action) 7%, #fff);
}
.ag930-dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.ag930-dropzone input[type="file"]:focus-visible + .ag930-dropzone-texto {
  outline: 2px solid var(--ag930-action);
  outline-offset: 4px;
}
.ag930-dropzone-texto {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  font-size: 0.88rem;
  color: var(--ag930-text-muted);
  pointer-events: none;
}
.ag930-dropzone-texto strong { color: var(--ag930-text-strong); }

.ag930-dropzone-lista { list-style: none; margin: 0.75em 0 0; padding: 0; }
.ag930-dropzone-lista li {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.45em 0.7em;
  border: 1px solid var(--ag930-border-suave);
  border-radius: 4px;
  margin-bottom: 0.4em;
  font-size: 0.85rem;
  background: #fff;
}
.ag930-archivo-nombre { flex: 1 1 auto; overflow-wrap: anywhere; }
.ag930-archivo-peso { color: var(--ag930-text-muted); font-size: 0.78rem; white-space: nowrap; }
.ag930-archivo-quitar {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--ag930-text-muted);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.2em;
}
.ag930-archivo-quitar:hover { color: var(--ag930-error); }

/* ==================================================================
   Confirmación: precio, autorización y declaraciones
   ================================================================== */

.ag930-resumen-precio { margin-bottom: 1.5rem; }

.ag930-autorizacion-texto {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--ag930-text-muted);
  background: #F9F9F8;
  border-radius: 6px;
  padding: 1em 1.25em;
  margin-bottom: 1em;
}
.ag930-autorizacion-texto p { margin: 0 0 0.85em; }
.ag930-autorizacion-texto p:last-child { margin-bottom: 0; }
.ag930-autorizacion-texto ul { margin: 0 0 0.85em; padding-left: 1.25em; }
.ag930-autorizacion-texto li { margin-bottom: 0.5em; }
.ag930-autorizacion-titulo { color: var(--ag930-text-strong); }
.ag930-autorizacion-titulo strong { display: inline-block; }
.ag930-autorizacion-aviso { color: var(--ag930-error) !important; font-size: 0.78rem; margin-top: 0.5em; }

.ag930-autorizacion-detalle { margin: 0 0 1em; }

/* Casilla bloqueada hasta que se abre el desplegable de la autorización
   (ver iniciarAutorizacion() en form.js). Se ve claramente que todavía
   no está disponible, pero sigue siendo pulsable: al pulsarla se abre el
   texto, que es justo lo que hay que hacer antes de aceptarlo. */
.ag930-declaracion.is-bloqueada { opacity: 0.65; }
.ag930-declaracion.is-bloqueada label { cursor: pointer; }
.ag930-autorizacion-bloqueo {
  margin: 0.35em 0 0 1.75em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ag930-text-muted);
}
.ag930-autorizacion-bloqueo[hidden] { display: none; }
.ag930-autorizacion-detalle summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--ag930-action);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
.ag930-autorizacion-detalle summary::-webkit-details-marker { display: none; }
.ag930-autorizacion-detalle summary::after {
  content: '▾';
  font-weight: 400;
  transition: transform 0.15s ease;
}
.ag930-autorizacion-detalle[open] summary::after { transform: rotate(180deg); }
.ag930-autorizacion-detalle summary:focus-visible {
  outline: 2px solid var(--ag930-action);
  outline-offset: 3px;
}
.ag930-autorizacion-toggle-cerrar { display: none; }
.ag930-autorizacion-detalle[open] .ag930-autorizacion-toggle-abrir { display: none; }
.ag930-autorizacion-detalle[open] .ag930-autorizacion-toggle-cerrar { display: inline; }
.ag930-autorizacion-resto { margin-top: 0.85em; }
.ag930-autorizacion-resto ul { margin: 0 0 0.85em; padding-left: 1.25em; }
.ag930-autorizacion-resto li { margin-bottom: 0.5em; }
@media (prefers-reduced-motion: reduce) {
  .ag930-autorizacion-detalle summary::after { transition: none; }
}

.ag930-autorizacion-declaracion { font-size: 0.8rem; color: var(--ag930-text-muted); margin: 0.5em 0 1.1em; }

.ag930-declaraciones .ag930-declaracion { margin-bottom: 0; }
.ag930-declaraciones .ag930-declaracion:last-child { margin-bottom: 0; }
.ag930-declaracion label { align-items: flex-start; line-height: 1.5; }
/* Enlaces legales en azul, como pide el diseño: son los dos únicos
   enlaces del formulario y deben leerse como enlaces, no como texto. */
.ag930-enlace-legal { color: #1155CC; text-decoration: underline; }
.ag930-enlace-legal:hover { color: #0B3D91; }

.ag930-consentimiento { font-size: 0.85rem; margin-bottom: 1.25rem; }
.ag930-consentimiento label { display: flex; align-items: flex-start; gap: 0.5em; }

/* ==================================================================
   Bloque de cierre "¿Qué ocurre después?"
   ================================================================== */

/* Vive dentro del último paso, justo encima del botón de envío: es la
   última duda que le queda al cliente antes de pulsarlo. */
.ag930-form-despues {
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--ag930-bg-alt);
  border-radius: var(--ag930-radio);
  border-left: 3px solid var(--ag930-action);
}
.ag930-form-despues h3 {
  margin: 0 0 0.5em;
  font-size: 1.05rem;
  color: var(--ag930-text-strong);
}
.ag930-form-despues p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--ag930-text-muted);
}

.ag930-confirmacion {
  text-align: center;
  max-width: 560px;
  margin-inline: auto;
  padding: 2rem 0;
}
.ag930-confirmacion p { color: var(--ag930-text-muted); line-height: 1.65; }

/* ---------- Consulta de estado de expediente ---------- */
.ag930-lookup { max-width: 560px; margin-inline: auto; }
.ag930-lookup-form { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; margin-bottom: 1.5rem; }
.ag930-lookup-form .ag930-field { flex: 1 1 200px; margin-bottom: 0; }
.ag930-lookup-error {
  background: #FDECEC; color: #A90000; border: 1px solid #F3B9B9;
  border-radius: 6px; padding: 0.85em 1em; font-size: 0.9rem;
}
.ag930-lookup-resultado {
  border: 1px solid var(--border-plata, #B8BDC2);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
}
.ag930-timeline { margin: 1em 0 0; padding-left: 1.25em; font-size: 0.85rem; }
.ag930-timeline li { margin-bottom: 0.5em; }
.ag930-timeline .fecha { color: var(--text-muted, #5A5F66); }

/* ---------- Área privada: documentos y mensajería ---------- */
.ag930-lista-documentos { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.ag930-lista-documentos li { padding: 0.4em 0; border-bottom: 1px solid var(--border-plata, #B8BDC2); }
.ag930-lista-documentos a { color: inherit; }

.ag930-hilo-cliente { margin-bottom: 1.5rem; }
.ag930-mensaje {
  max-width: 80%;
  padding: 0.75em 1em;
  border-radius: 8px;
  margin-bottom: 0.75em;
  font-size: 0.9rem;
}
.ag930-mensaje p { margin: 0.3em 0 0; }
.ag930-mensaje-cliente { background: var(--action, #D40000); color: #fff; margin-left: auto; }
.ag930-mensaje-equipo { background: #F1F2F2; }
.ag930-mensaje-fecha { font-size: var(--fs-eyebrow, 0.8125rem); opacity: 0.75; margin-left: 0.5em; }

/* ---------- Portal de profesionales ---------- */
.ag930-portal-login { max-width: 380px; margin-inline: auto; }
.ag930-portal-profesional { max-width: 860px; margin-inline: auto; }
.ag930-tabla-portal { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.ag930-tabla-portal th, .ag930-tabla-portal td { text-align: left; padding: 0.6em 0.8em; border-bottom: 1px solid var(--border-plata, #B8BDC2); font-size: 0.9rem; }
.ag930-tabla-portal th { color: var(--text-muted, #5A5F66); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; }
.ag930-portal-aviso { text-align: right; font-size: 0.85rem; margin-bottom: 1rem; }

/* ---------- Panel de administración ---------- */
.ag930-panel-administracion { max-width: 960px; margin-inline: auto; }
.ag930-panel-tabs {
  display: flex;
  gap: 0.5em;
  border-bottom: 1px solid var(--border-plata, #B8BDC2);
  margin-bottom: 1.5rem;
}
.ag930-panel-tabs a {
  padding: 0.75em 1em;
  font-weight: 600;
  color: var(--text-muted, #5A5F66);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.ag930-panel-tabs a.is-activa { color: var(--action, #D40000); border-bottom-color: var(--action, #D40000); }

.ag930-panel-detalle table.widefat,
.ag930-buzon table.ag930-tabla-portal {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5em 0 1.25em;
}
.ag930-panel-detalle table.widefat td,
.ag930-panel-detalle table.widefat th {
  text-align: left;
  padding: 0.5em 0.75em;
  border-bottom: 1px solid var(--border-plata, #B8BDC2);
  font-size: 0.9rem;
}
.ag930-panel-detalle table.widefat td:first-child { color: var(--text-muted, #5A5F66); width: 35%; }

.ag930-buzon { display: flex; flex-direction: column; gap: 1rem; }
.ag930-buzon-item-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75em;
}

/* ---------- FAQ (acordeón) ---------- */
.ag930-faq { max-width: 720px; margin-inline: auto; }
.ag930-faq-item {
  border-bottom: 1px solid var(--border-plata, #B8BDC2);
  padding: 1em 0;
}
.ag930-faq-item summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  position: relative;
  padding-right: 1.5em;
}
.ag930-faq-item summary::-webkit-details-marker { display: none; }
.ag930-faq-item summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 0;
  font-weight: 400;
  color: var(--action, #D40000);
}
.ag930-faq-item[open] summary::after { content: '–'; }
.ag930-faq-answer { margin-top: 0.75em; font-size: 0.95rem; color: var(--text-muted, #5A5F66); }
.ag930-faq-answer p:last-child { margin-bottom: 0; }

/* ---------- Testimonios ---------- */
.ag930-testimonios {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  max-width: 960px;
  margin-inline: auto;
}
@media (min-width: 720px) { .ag930-testimonios { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ag930-testimonios { grid-template-columns: repeat(3, 1fr); } }
.ag930-testimonio {
  margin: 0;
  border: 1px solid var(--border-plata, #B8BDC2);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  background: #fff;
}
.ag930-testimonio blockquote { margin: 0 0 1em; font-style: italic; }
.ag930-testimonio figcaption strong { display: block; }
.ag930-testimonio figcaption span { font-size: 0.85rem; color: var(--text-muted, #5A5F66); }

/* ---------- Calendario de eventos ---------- */
.ag930-sin-eventos { color: var(--text-muted, #5A5F66); font-size: 0.9rem; }
.ag930-calendario { display: flex; flex-direction: column; gap: 1rem; max-width: 780px; margin-inline: auto; }
.ag930-evento-card {
  display: flex;
  gap: 1.25rem;
  border: 1px solid var(--border-plata, #B8BDC2);
  border-radius: 8px;
  padding: 1.25rem;
  background: #fff;
  /* Deja hueco para que, al pulsar un día marcado en el mini calendario
     (eventos-v2.js), la tarjeta no quede tapada bajo la cabecera fija. */
  scroll-margin-top: 100px;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
/* Tarjeta a la que se acaba de saltar desde el mini calendario: mismo
   color de acento (rojo) que ya marca el día en el calendario. */
.ag930-evento-card--resaltada {
  border-color: var(--action, #D40000);
  box-shadow: 0 0 0 3px rgba(212, 0, 0, 0.25);
}
.ag930-evento-fecha {
  flex-shrink: 0;
  width: 72px;
  text-align: center;
  background: var(--action, #D40000);
  color: #fff;
  border-radius: 6px;
  padding: 0.6em 0;
  height: fit-content;
}
.ag930-evento-fecha .day { display: block; font-size: 1.5rem; font-weight: 700; line-height: 1; }
.ag930-evento-fecha .month { font-size: var(--fs-eyebrow, 0.8125rem); text-transform: uppercase; }
.ag930-evento-tipo { font-size: var(--fs-eyebrow, 0.8125rem); font-weight: 700; text-transform: uppercase; color: var(--action, #D40000); letter-spacing: 0.04em; }
.ag930-evento-body h3 { margin: 0.2em 0; }
.ag930-evento-lugar { font-size: 0.85rem; color: var(--text-muted, #5A5F66); margin: 0 0 0.5em; }
.ag930-evento-desc { font-size: 0.9rem; margin-bottom: 0.5em; }

/* ---------- Ficha desplegable de cada evento ----------
   Es un <details>/<summary> nativo: sin JavaScript se abre igual, y el
   lector de pantalla ya lo anuncia como un desplegable. La clase
   --pulsable la añade eventos-v3.js, así que el cursor de mano solo
   aparece cuando el clic en toda la tarjeta funciona de verdad. */
.ag930-evento-card--pulsable { cursor: pointer; }
.ag930-evento-ficha { margin: 0 0 0.6em; }
.ag930-evento-ficha-abrir {
  cursor: pointer;
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--action, #D40000);
  padding: 0.35em 0;
  /* El triángulo por defecto de Safari y Chrome se quita para poner el
     nuestro (::after), que gira al abrir. list-style vale para Firefox y
     Chrome; ::-webkit-details-marker sigue haciendo falta en Safari. */
  list-style: none;
}
.ag930-evento-ficha-abrir::-webkit-details-marker { display: none; }
.ag930-evento-ficha-abrir::after {
  content: '▾';
  display: inline-block;
  margin-left: 0.4em;
  transition: transform 0.15s ease;
}
.ag930-evento-ficha[open] > .ag930-evento-ficha-abrir::after { transform: rotate(180deg); }
.ag930-evento-ficha-abrir:focus-visible { outline: 2px solid var(--action, #D40000); outline-offset: 2px; border-radius: 3px; }

/* En táctil, el objetivo de 44px de la casa. Medido sin esto: 31px de
   alto, por debajo del mínimo. Que toda la tarjeta abra la ficha
   (eventos-v3.js) da un objetivo mucho mayor, pero eso solo vale si hay
   JavaScript, y esta línea tiene que ser pulsable igual sin él. */
@media (pointer: coarse), (max-width: 768px) {
  .ag930-evento-ficha-abrir {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}

.ag930-evento-ficha-datos {
  display: grid;
  grid-template-columns: minmax(9rem, auto) 1fr;
  gap: 0.35em 1rem;
  margin: 0.5em 0 0;
  padding: 0.85em 1em;
  font-size: 0.875rem;
  /* --bg-section-alt, no --ag930-bg-alt: esa segunda vive en el ámbito
     de .ag930-form / .ag930-servicio y la tarjeta de un evento no está
     dentro de ninguno de los dos, así que aquí no llegaría y caería
     siempre al respaldo. Igual que el resto de este bloque, se toma la
     variable del tema directamente. */
  background: var(--bg-section-alt, #F1F2F2);
  border-radius: 6px;
}
.ag930-evento-ficha-datos dt { font-weight: 700; color: var(--text-muted, #5A5F66); }
.ag930-evento-ficha-datos dd { margin: 0; }

/* A 375 px las dos columnas dejan cuatro palabras por línea y la ficha
   se lee como una escalera. Por debajo de 560 px, etiqueta encima del
   dato y a una sola columna. */
@media (max-width: 560px) {
  .ag930-evento-ficha-datos { grid-template-columns: 1fr; gap: 0.15em; }
  .ag930-evento-ficha-datos dd { margin-bottom: 0.6em; }
  .ag930-evento-ficha-datos dd:last-child { margin-bottom: 0; }
}

/* Quien prefiera menos movimiento no necesita ver girar el triángulo. */
@media (prefers-reduced-motion: reduce) {
  .ag930-evento-ficha-abrir::after { transition: none; }
}

/* ---------------------------------------------------------------
   Aviso de trámites pendientes en Mi cuenta
   ---------------------------------------------------------------
   Va encima de TODAS las páginas de Mi cuenta, no dentro de la
   pestaña de expedientes: lo primero que ve el cliente al entrar es
   el escritorio, y un trámite pendiente de pago escondido a dos
   clics es un trámite que no se paga.

   Se apoya en el rojo de marca (--action, con respaldo propio por si
   el tema no está activo) pero sobre fondo claro y no al revés: un
   bloque rojo entero a ancho completo grita como un error del sitio
   y este aviso no es un error, es una tarea del cliente. El filete
   izquierdo grueso da la urgencia sin dar la alarma.
   --------------------------------------------------------------- */
.ag930-aviso-pendientes {
  --ag930-aviso: var(--action, #D40000);
  border: 1px solid #F0C7C7;
  border-left: 6px solid var(--ag930-aviso);
  border-radius: 8px;
  background: #FFF7F7;
  padding: 1.15rem 1.25rem;
  margin: 0 0 1.75rem;
}

.ag930-aviso-pendientes__cabecera {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
}

/* Círculo con la admiración en vez de un emoji: el emoji cambia de
   dibujo en cada sistema y aquí el tono importa. */
.ag930-aviso-pendientes__icono {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--ag930-aviso);
  color: #fff;
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 2rem;
  text-align: center;
}

/* Con la clase del aviso delante: `.entry-content h2 { margin-top: 2em }`
   del tema ganaba a la clase sola y bajaba el titulo ~37 px respecto al
   icono (visto el 2026-09-27). */
.ag930-aviso-pendientes .ag930-aviso-pendientes__titulo {
  margin: 0 0 0.15rem;
  font-size: 1.15rem;
  line-height: 1.25;
  color: var(--text-strong, #14181C);
}

/* El tema pone margen a todos los <p> y aqui abria un hueco de casi
   una linea entre el importe y la nota. Se normaliza dentro de la
   cabecera en vez de pelearse regla a regla. */
.ag930-aviso-pendientes__cabecera p { margin: 0 0 0.2rem; }
.ag930-aviso-pendientes__total { margin: 0 0 0.35rem; }
.ag930-aviso-pendientes__nota {
  margin: 0;
  font-size: 0.92rem;
  color: var(--text-muted, #5A6472);
}

.ag930-aviso-pendientes__lista {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.ag930-aviso-pendientes__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  background: #fff;
  border: 1px solid #EDE3E3;
  border-radius: 6px;
  padding: 0.6rem 0.75rem;
}

/* El nombre del servicio se queda con el espacio sobrante para que el
   importe y el botón no bailen de una fila a otra. */
.ag930-aviso-pendientes__servicio { flex: 1 1 12rem; }
.ag930-aviso-pendientes__servicio code {
  background: #F2F4F6;
  border-radius: 4px;
  padding: 0.1rem 0.35rem;
  font-size: 0.85em;
}

.ag930-aviso-pendientes__importe { font-weight: 600; white-space: nowrap; }

/* La nota del pedido («esperando tu transferencia») va en su propia línea,
   debajo del servicio y el importe (auditoría de apertura, 2026-09-25). */
.ag930-aviso-pendientes__item .ag930-aviso-pendientes__nota { flex: 1 1 100%; order: 3; }
.ag930-aviso-pendientes__item .ag930-aviso-pendientes__btn { order: 2; }

.ag930-aviso-pendientes__btn {
  background: var(--ag930-aviso);
  color: #fff;
  border-radius: 6px;
  padding: 0.45rem 0.95rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.ag930-aviso-pendientes__btn:hover,
.ag930-aviso-pendientes__btn:focus { background: var(--action-hover, #A90000); color: #fff; }

.ag930-aviso-pendientes__presupuesto {
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px dashed #E3D3D3;
  font-size: 0.95rem;
}

/* A 480px el botón pasa a ocupar la fila entera: apretado contra el
   importe se convierte en un objetivo de pulsación de 40px que se
   falla con el pulgar. */
@media (max-width: 480px) {
  .ag930-aviso-pendientes__item { flex-direction: column; align-items: stretch; }
  /* Al pasar a columna, el eje principal es el vertical y el
     `flex-basis: 12rem` del nombre deja de ser ancho para convertirse
     en ALTO: dejaba un hueco de 12rem entre el servicio y el precio.
     Medido a 375px. */
  .ag930-aviso-pendientes__servicio { flex: 0 0 auto; }
  .ag930-aviso-pendientes__btn { text-align: center; }
}

/* ==================================================================
   Solicitud de factura en el checkout
   ================================================================== */
/* El bloque se pliega con el atributo `hidden` desde PHP y JS (ver
   checkout-factura-v2.js), no con una clase: si el navegador no ejecuta
   JavaScript el formulario se ve entero y sigue siendo enviable, y la
   validacion que decide de verdad esta en PHP. */
.ag930-factura {
  margin-top: 1.25rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--ag930-border-suave);
  border-radius: var(--ag930-radio);
  background: var(--ag930-bg-alt);
}
.ag930-factura-casilla { margin: 0; }
.ag930-factura-casilla label {
  display: flex;
  align-items: baseline;
  gap: 0.55em;
  cursor: pointer;
}
.ag930-factura-nota {
  display: block;
  margin-top: 0.3em;
  font-size: var(--fs-small, 0.9rem);
  color: var(--ag930-text-muted);
}
.ag930-factura-datos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ag930-border-suave);
}
/* SIN ESTO EL BLOQUE NO SE PLIEGA NUNCA, y era el caso real en
   produccion: `[hidden] { display: none }` vive en la hoja del navegador,
   asi que CUALQUIER regla de autor que declare `display` le gana, incluida
   la de aqui arriba. El resultado medido era el peor de los dos mundos: el
   PHP escribia `hidden`, el JS lo conmutaba bien y `aria-expanded` decia
   "false", pero los tres campos fiscales se veian siempre — 392px de alto
   con la casilla sin marcar — y un lector de pantalla anunciaba plegada
   una region que estaba abierta.
   Va DESPUES de la regla de `display: grid` a proposito: misma
   especificidad, gana la posterior. */
.ag930-factura-datos[hidden] { display: none; }
@media (min-width: 600px) {
  .ag930-factura-datos { grid-template-columns: 1fr 1fr; }
  .ag930-factura-campo--ancho { grid-column: 1 / -1; }
}
.ag930-factura-campo { margin: 0; }
.ag930-factura-campo label {
  display: block;
  margin-bottom: 0.3em;
  font-weight: 600;
  font-size: var(--fs-small, 0.9rem);
  color: var(--ag930-text-strong);
}
.ag930-factura-campo input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.6em 0.75em;
  border: 1px solid var(--ag930-border);
  border-radius: 4px;
  font: inherit;
  background: #fff;
}
.ag930-factura-campo input:focus {
  outline: 2px solid var(--ag930-action);
  outline-offset: 1px;
}
.ag930-factura-ayuda {
  display: block;
  margin-top: 0.25em;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--ag930-text-muted);
}

/* ==================================================================
   "Que pasa ahora", en la pagina de compra realizada
   ================================================================== */
.ag930-proximos-pasos {
  margin: 0 0 2rem;
  padding: 1.25rem 1.5rem 1.5rem;
  border: 1px solid var(--ag930-border-suave);
  border-radius: var(--ag930-radio);
  background: var(--ag930-bg-alt);
}
.ag930-proximos-pasos h2 {
  margin: 0 0 0.75rem;
  font-size: 1.15rem;
  color: var(--ag930-text-strong);
}
.ag930-proximos-pasos__expediente { margin: 0 0 1rem; }
.ag930-proximos-pasos__lista {
  margin: 0 0 1rem;
  padding-inline-start: 1.3em;
  display: grid;
  gap: 0.5rem;
}
.ag930-proximos-pasos__lista li { padding-inline-start: 0.2em; }
.ag930-proximos-pasos__correo {
  margin: 0 0 1.25rem;
  font-size: var(--fs-small, 0.9rem);
  color: var(--ag930-text-muted);
}
.ag930-proximos-pasos__acciones { margin: 0; }

/* ---------- Descarga de factura en el detalle del pedido ---------- */
.ag930-factura-descarga { margin: 1.25rem 0 0; }
.ag930-boton-factura {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.7em 1.1em;
  border: 1px solid var(--ag930-text-strong);
  border-radius: 4px;
  background: transparent;
  color: var(--ag930-text-strong);
  font-weight: 600;
  text-decoration: none;
  /* 44px de alto minimo: es una zona pulsable y la prueba de responsive
     lo exige a 375px. */
  min-height: 44px;
  box-sizing: border-box;
}
.ag930-boton-factura:hover,
.ag930-boton-factura:focus {
  border-color: var(--ag930-action);
  color: var(--ag930-action);
  background: var(--ag930-bg-alt);
}
.ag930-icono-pdf { flex-shrink: 0; }
.ag930-factura-aviso {
  margin: 1.25rem 0 0;
  padding: 0.8em 1em;
  border-left: 3px solid var(--ag930-action);
  background: var(--ag930-bg-alt);
  font-size: var(--fs-small, 0.9rem);
}

/* =============================================================
   PRECIO EN VIVO (v12)
   -------------------------------------------------------------
   El precio que sigue a la modalidad elegida. Aparece en tres
   sitios de la misma página —el cajetín de la cabecera, el panel
   que va debajo del selector y el resumen de confirmación— y en
   los tres tiene que leerse como el mismo dato, así que comparten
   el bloque `.ag930-precio-vivo` y solo cambian de tamaño.
   Ver render_precio_vivo() en class-form-shortcode.php.
   ============================================================= */
.ag930-precio-vivo {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.3em;
}
/* "Desde" solo está mientras no hay modalidad elegida, y va en
   secundario: el que manda es el número. Mismo tratamiento que el
   "Desde" de las tarjetas del tema, para que no parezcan dos cosas
   distintas. */
.ag930-precio-vivo-desde {
  font-weight: 400;
  font-size: 0.8em;
  color: var(--ag930-text-muted);
}
.ag930-precio-vivo-importe {
  font-variant-numeric: tabular-nums;
}

/* ---------- El panel dentro del formulario ---------- */
/* Va pegado al selector de modalidad, que es la decisión que lo
   mueve. Se destaca con fondo y borde porque compite con 42 campos
   de formulario alrededor: sin marco, un precio en mitad de un
   formulario se lee como una etiqueta más. */
.ag930-precio-panel {
  margin: 1.1rem 0 0;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--ag930-borde, #e0e0e0);
  border-left: 3px solid var(--action, #d40000);
  border-radius: 6px;
  background: var(--ag930-fondo-suave, #fafafa);
}
.ag930-precio-panel-etiqueta {
  display: block;
  font-size: var(--fs-eyebrow, 0.8125rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ag930-text-muted);
  margin-bottom: 0.25em;
}
/* Aquí el número es el protagonista de la caja, así que va bastante
   más grande que en el cajetín, donde comparte sitio con otros tres
   datos. 1.65rem cabe en una línea a 375 px incluso con
   "Consúltanos", que es el texto más largo que puede salir. */
.ag930-precio-panel .ag930-precio-vivo {
  font-size: 1.65rem;
  line-height: 1.2;
  color: var(--action, #d40000);
}
.ag930-precio-panel .ag930-precio-vivo svg {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}
.ag930-precio-panel-nota {
  margin: 0.5rem 0 0;
  font-size: 0.82rem;
  color: var(--ag930-text-muted);
}
.ag930-precio-panel .pricing-desglose {
  margin-top: 0.5rem;
  font-size: 0.8rem;
}
.ag930-precio-panel .pricing-desglose summary {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ag930-text-muted);
}
.ag930-precio-panel .pricing-desglose-lista {
  padding-left: 0;
  font-size: inherit;
}
.ag930-precio-panel .pricing-desglose-lista li {
  margin-bottom: 0;
  gap: 0.6em;
  align-items: baseline;
}
/* Mismo motivo que en el cajetín: el importe no se parte nunca. */
.ag930-precio-panel .pricing-desglose-lista li > span:last-child {
  white-space: nowrap;
  flex-shrink: 0;
}