@charset "UTF-8";
/*
    Formulario lateral de cita (parts/right-contact-form.php) — rediseño SVENSON 2026
    Author: Vicente Martín | elgrupo

    Es el mismo Contact Form 7 nº 117 que el de la capa de pide cita, y lleva sus
    mismos campos: se apoya en el bloque `.sv-form-cita` de capa-cita.css (que
    esta hoja tiene como dependencia) y aquí solo se acomoda a la columna. Sin
    pestaña ni botón de la agenda: el lateral conserva su titular de siempre.

    Las reglas van con las dos clases para ganarle a las del bloque, también a
    las de su media query de móvil, sin depender del orden de carga.
*/
.sv-form-cita.sv-form-cita--lateral {
  /* El gris y el relleno ya los pone #formulario-contacto-lateral. */
  --sv-fc-columna: 100%;
  padding: 0;
  background: none;
}

/* En la capa los campos dejan 29px a cada lado del panel; aquí ocupan todo el
   ancho de la columna. */
.sv-form-cita.sv-form-cita--lateral .wpcf7 .row,
.sv-form-cita.sv-form-cita--lateral .wpcf7 .wpcf7-response-output {
  max-width: 100%;
}

/*
 * Las plantillas les ponen margen a sus .row con selectores de ID, y también
 * alcanzan a las filas del formulario: en Soluciones - Interior,
 * `#servicios-wrapper .row:not(:last-child)` les mete 20px por debajo. Aquí la
 * separación la pone el bloque con margin-top, así que abajo no va nada.
 */
#formulario-contacto-lateral .sv-form-cita.sv-form-cita--lateral .wpcf7 .row {
  margin-bottom: 0;
}

/*
 * "Llámanos. 900 222 777", debajo del formulario. Sigue al teléfono de las
 * fichas de centro (#datos-centro en centros.css): icono de 18px centrado en un
 * círculo y a 12px del texto, todo alineado con flex. El círculo es de 30px, y
 * no de 34 como allí, a petición de Vicente (2026-10-06). Antes el círculo
 * era de 24px para un icono de 21px, y por debajo de 980px responsive.css lo
 * subía a una línea propia, encima del texto. En los centros este bloque no
 * sale: ya tienen el suyo.
 *
 * El texto "Llámanos." va suelto dentro del enlace y en flex pierde el espacio
 * que lo separaba del número: lo repone el margen del número.
 */
#formulario-contacto-lateral .row.llamanos > a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  /* Entre 768 y 991 la columna se queda en 185px: ahí el número baja entero
     a su propia línea en vez de partirse. */
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  row-gap: 2px;
  min-height: 50px;
  padding: 4px 0;
  line-height: 1.2;
}

#formulario-contacto-lateral .row.llamanos > a > i {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 30px;
  height: 30px;
  margin: 0 12px 0 0;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  vertical-align: baseline;
}

#formulario-contacto-lateral .row.llamanos > a > .numero_de_telefono {
  margin-left: 0.3em;
  white-space: nowrap;
}

/*
 * "Encuentra tu centro Svenson": centrado como el "Llámanos" de debajo. El
 * marcado son dos columnas de Bootstrap (col-xs-1 con el icono y col-xs-10 con
 * el texto), que flotan a la izquierda y ocupan anchos fijos; aquí dejan de
 * flotar, miden lo que su contenido y flex las centra juntas. El texto sigue
 * alineado a la izquierda dentro de su bloque.
 */
#formulario-contacto-lateral .row.encuentra-tu-centro > a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 12px;
}

#formulario-contacto-lateral .row.encuentra-tu-centro > a > div {
  float: none;
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
  width: auto;
  min-width: 0;
  padding: 0;
}

/* El tema la cuadraba con la línea de 42px de la columna y un desfase de -12px
   en el icono; con flex sobra. */
#formulario-contacto-lateral .row.encuentra-tu-centro > a > div:first-child {
  line-height: 1;
}

#formulario-contacto-lateral .row.encuentra-tu-centro > a i {
  vertical-align: middle;
}/*# sourceMappingURL=formulario-lateral.css.map */