/* ==========================================================================
   campos_ocultos_forms.css  ·  UEMC Online 2026
   --------------------------------------------------------------------------
   Reduce los formularios de Contact Form 7 a las CUATRO filas del diseno.
   Todo se hace por CSS: los .cf7 NO se tocan, asi las plantillas de correo
   siguen recibiendo exactamente los mismos campos que hasta ahora.

   Los campos ocultos son unicamente los NO obligatorios: se envian vacios,
   igual que si el visitante los dejara en blanco. Ningun campo obligatorio
   se oculta, porque CF7 valida en servidor y bloquearia el envio.

   Formularios cubiertos:
     22234  Contacto Programas  ·  cabecera de 8 paginas + fichas
     23293  Contacto Becas      ·  /becas-y-ayudas/
     23305  Contacto Admision   ·  /admision-matricula/
     22275  Descarga de folleto ·  modal de las fichas
      1158  Ficha de producto   ·  tarjeta lateral (columna estrecha)

   Se apoya en :has(), soportado por todos los navegadores actuales.
   Fecha: 27/08/2026
   ========================================================================== */


/* 1 · CAMPOS QUE SOBRAN RESPECTO AL DISENO
   ------------------------------------------------------------------------ */

/* Comentario libre: el diseno no lo dibuja. No es obligatorio.
   Ojo con la estructura: .row > .col > p > span.wpcf7-form-control-wrap  */
.wpcf7-form .row:has(.wpcf7-form-control-wrap[data-name="your-message"]),
.wpcf7-form > .col:has(.wpcf7-form-control-wrap[data-name="your-message"]) {
  display: none !important;
}

/* Duplicado del telefono con selector de bandera. Ya venia marcado .hidden
   en la plantilla; lo reforzamos para que ningun estilo lo saque a flote. */
.wpcf7-form .col.hidden,
.wpcf7-form .row:has(> .col.hidden):not(:has(.wpcf7-form-control-wrap:not([data-name="phonetext-453"]))) {
  display: none !important;
}

/* Los ocultos dinamicos (utm_source, gclid, url_campaign) no deben ocupar
   alto: en varias plantillas dejaban una franja de 27 px. */
.wpcf7-form > .col:has(.wpcf7-form-control-wrap[data-name^="dynamichidden"]):not(:has(input:not([type="hidden"]))):not(:has(select)):not(:has(textarea)):not(:has(a)) {
  display: none !important;
}


/* 2 · LAS CUATRO FILAS DEL DISENO
   ------------------------------------------------------------------------
   Solo para los formularios anchos, que son los que maquetan con .row.
   El de la ficha (1158) no usa .row y se queda apilado a proposito: vive en
   una tarjeta de 404 px donde dos columnas no caben.                        */

@media (min-width: 768px) {

  form.wpcf7-form:has(> .row),
  form.wpcf7-form:not(:has(> .row)):has(> .col.contiene-tlfn) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 10px;
    align-items: start;
  }

  /* por defecto todo a lo ancho y despues de los campos */
  form.wpcf7-form:has(> .row) > *,
  form.wpcf7-form:not(:has(> .row)):has(> .col.contiene-tlfn) > * {
    grid-column: 1 / -1;
    order: 5;
  }
  form.wpcf7-form > .wpcf7-response-output { order: 6; }

  /* --- fila 1 de las plantillas con .row: Nombre | Apellidos --- */
  form.wpcf7-form:has(> .row) > .row:has([data-name="your-name"]) { order: 1; }


  /* --- CASO A · plantillas con la fila combinada Pais+Telefono (22234, 22275)
         1 Nombre|Apellidos   2 Pais|Telefono   3 Email|Nivel   4 Interesado --- */

  form.wpcf7-form:has(> .row.pais-tel) > .row.pais-tel { order: 2; }

  /* El reparto de columnas sigue el orden del DOM, no el de `order`: la rejilla
     nunca retrocede a una columna que ya dejo atras. Como nivelestudios va antes
     que your-email en la plantilla, es el que ocupa la columna izquierda; si se
     invirtieran, cada uno caeria en una fila distinta. */
  form.wpcf7-form:has(> .row.pais-tel) > .row:has([data-name="nivelestudios"]) {
    order: 3;
    grid-column: 1 / 2;
  }
  form.wpcf7-form:has(> .row.pais-tel) > .row:has([data-name="your-email"]) {
    order: 3;
    grid-column: 2 / 3;
  }
  form.wpcf7-form:has(> .row.pais-tel) > .row:has([data-name="interesado"]) {
    order: 4;
    grid-column: 1 / -1;
  }

  /* Si la plantilla no trae el select "interesado", el de nivel de estudios
     hace ese papel y ocupa la fila entera. */
  form.wpcf7-form:has(> .row.pais-tel):not(:has([data-name="interesado"])) > .row:has([data-name="nivelestudios"]) {
    order: 4;
    grid-column: 1 / -1;
  }


  /* --- CASO B · plantillas con pais y telefono en filas sueltas (23293, 23305)
         1 Nombre|Apellidos   2 Pais|Email   3 Prefijo+Telefono   4 Interesado --- */

  form.wpcf7-form:has(> .row):not(:has(> .row.pais-tel)) > .row:has([data-name="countrytext-17"]) {
    order: 2;
    grid-column: 1 / 2;
  }
  form.wpcf7-form:has(> .row):not(:has(> .row.pais-tel)) > .row:has([data-name="your-email"]) {
    order: 2;
    grid-column: 2 / 3;
  }
  form.wpcf7-form:has(> .row):not(:has(> .row.pais-tel)) > .row:has([data-name="tel-858"]) {
    order: 3;
    grid-column: 1 / -1;
  }
  form.wpcf7-form:has(> .row):not(:has(> .row.pais-tel)) > .row:has([data-name="nivelestudios"]) {
    order: 4;
    grid-column: 1 / -1;
  }


  /* --- CASO C · la tarjeta de las fichas de producto (87 plantillas)
         Reparte en columnas los campos que hoy van apilados uno bajo otro.
         El diseno (2.1.1 Ficha producto) pide:
         1 Nombre|Apellidos   2 Email|Telefono   3 Pais   4 Nivel de estudios --- */

  form.wpcf7-form:not(:has(> .row)):has(> .col.contiene-tlfn) > .col:has([data-name="your-name"]) {
    order: 1;
    grid-column: 1 / 2;
  }
  form.wpcf7-form:not(:has(> .row)):has(> .col.contiene-tlfn) > .col:has([data-name="your-ape"]) {
    order: 1;
    grid-column: 2 / 3;
  }
  form.wpcf7-form:not(:has(> .row)):has(> .col.contiene-tlfn) > .col:has([data-name="your-email"]) {
    order: 2;
    grid-column: 1 / 2;
  }
  form.wpcf7-form:not(:has(> .row)):has(> .col.contiene-tlfn) > .col.contiene-tlfn {
    order: 2;
    grid-column: 2 / 3;
  }
  form.wpcf7-form:not(:has(> .row)):has(> .col.contiene-tlfn) > .col:has([data-name^="countrytext"]) {
    order: 3;
    grid-column: 1 / -1;
  }
  form.wpcf7-form:not(:has(> .row)):has(> .col.contiene-tlfn) > .col:has([data-name="nivelestudios"]) {
    order: 4;
    grid-column: 1 / -1;
  }
  /* El titulo de la tarjeta va arriba del todo, a lo ancho. */
  form.wpcf7-form:not(:has(> .row)):has(> .col.contiene-tlfn) > .col:not(:has(.wpcf7-form-control-wrap)):first-of-type {
    order: 0;
  }
}


/* 3 · PREFIJO + TELEFONO EN UNA SOLA LINEA
   ------------------------------------------------------------------------
   En la tarjeta de la ficha (1158) el contenedor .contiene-tlfn no era flex,
   asi que prefijo y telefono se apilaban y la fila media 114 px en vez de 50. */

.wpcf7-form .contiene-tlfn:has(> .col-3) {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 8px;
}
.wpcf7-form .contiene-tlfn:has(> .col-3) > .col-3 {
  flex: 0 0 72px;
  width: 72px;
  max-width: 72px;
}
.wpcf7-form .contiene-tlfn:has(> .col-3) > .col-9 {
  flex: 1 1 auto;
  width: auto;
  max-width: none;
}


/* 4 · MOVIL: UNA SOLA COLUMNA
   ------------------------------------------------------------------------ */

@media (max-width: 767px) {
  form.wpcf7-form:has(> .row),
  form.wpcf7-form:not(:has(> .row)):has(> .col.contiene-tlfn) {
    display: block;
  }
  form.wpcf7-form > * {
    grid-column: 1 / -1 !important;
  }
}


/* 5 . EL SELECT DE NIVEL DE ESTUDIOS INYECTADO
   ------------------------------------------------------------------------
   functions.php lo anade a los siete formularios que no lo traian (20394,
   20412, 22811, 23293, 23305, 23311 y 23319). Llega como ultima fila del DOM,
   asi que aqui se le da su sitio.

   Ojo con el nombre: en esos siete, el campo que SE LLAMA «nivelestudios» es en
   realidad el de areas de interes. El nivel de estudios de verdad es el de la
   clase .uemc-fila-nivel.                                                     */

@media (min-width: 768px) {

  /* Reparto general: el nivel va en la segunda fila, y lo que habia detras
     corre un puesto. */
  form.wpcf7-form:has(> .row):not(:has(> .row.pais-tel)) > .row.uemc-fila-nivel {
    order: 2;
    grid-column: 1 / -1;
  }
  form.wpcf7-form:has(> .row.uemc-fila-nivel):not(:has(> .row.pais-tel)) > .row:has([data-name="countrytext-17"]) { order: 3; }
  form.wpcf7-form:has(> .row.uemc-fila-nivel):not(:has(> .row.pais-tel)) > .row:has([data-name="your-email"])     { order: 3; }
  form.wpcf7-form:has(> .row.uemc-fila-nivel):not(:has(> .row.pais-tel)) > .row:has([data-name="tel-858"])        { order: 4; }
  form.wpcf7-form:has(> .row.uemc-fila-nivel):not(:has(> .row.pais-tel)) > .row:has([data-name="nivelestudios"])  { order: 5; }

  /* La pagina de Contacto (20394) va aparte: el diseno 10 dibuja ahi un orden
     propio -Nombre|Apellidos, Nivel, Interesado, Pais+Telefono, Email-. */
  /* La pagina de Contacto va con filas EXPLICITAS, no con `order`.
     Con `order` la rejilla seguia colocando por el orden del DOM y dejaba a
     Pais solo en su fila mientras el telefono se iba detras del email: la
     colocacion automatica no retrocede a un hueco que ya dejo atras. Fijando
     grid-row no hay ambiguedad posible.
     Las genericas de arriba son (0,6,1); estas suben a (0,6,2) repitiendo
     .wpcf7 y anteponiendo body, que es lo justo para ganarles. */
  body .wpcf7.wpcf7[id^="wpcf7-f20394-"] form.wpcf7-form > .row:has([data-name="your-name"])      { grid-row: 1; grid-column: 1 / -1; }
  body .wpcf7.wpcf7[id^="wpcf7-f20394-"] form.wpcf7-form > .row.uemc-fila-nivel                   { grid-row: 2; grid-column: 1 / -1; }
  body .wpcf7.wpcf7[id^="wpcf7-f20394-"] form.wpcf7-form > .row:has([data-name="nivelestudios"])  { grid-row: 3; grid-column: 1 / -1; }
  body .wpcf7.wpcf7[id^="wpcf7-f20394-"] form.wpcf7-form > .row:has([data-name="countrytext-17"]) { grid-row: 4; grid-column: 1 / 2; }
  body .wpcf7.wpcf7[id^="wpcf7-f20394-"] form.wpcf7-form > .row:has([data-name="tel-858"])        { grid-row: 4; grid-column: 2 / 3; }
  body .wpcf7.wpcf7[id^="wpcf7-f20394-"] form.wpcf7-form > .row:has([data-name="your-email"])     { grid-row: 5; grid-column: 1 / -1; }
  form.wpcf7-form:has(> .row.pais-tel) > .row:has([data-name="interesado"]) {
    order: 4;
    grid-column: 1 / -1;
  }

  /* Si la plantilla no trae el select "interesado", el de nivel de estudios
     hace ese papel y ocupa la fila entera. */
  form.wpcf7-form:has(> .row.pais-tel):not(:has([data-name="interesado"])) > .row:has([data-name="nivelestudios"]) {
    order: 4;
    grid-column: 1 / -1;
  }


  /* --- CASO B · plantillas con pais y telefono en filas sueltas (23293, 23305)
         1 Nombre|Apellidos   2 Pais|Email   3 Prefijo+Telefono   4 Interesado --- */

  form.wpcf7-form:has(> .row):not(:has(> .row.pais-tel)) > .row:has([data-name="countrytext-17"]) {
    order: 2;
    grid-column: 1 / 2;
  }
  form.wpcf7-form:has(> .row):not(:has(> .row.pais-tel)) > .row:has([data-name="your-email"]) {
    order: 2;
    grid-column: 2 / 3;
  }
  form.wpcf7-form:has(> .row):not(:has(> .row.pais-tel)) > .row:has([data-name="tel-858"]) {
    order: 3;
    grid-column: 1 / -1;
  }
  form.wpcf7-form:has(> .row):not(:has(> .row.pais-tel)) > .row:has([data-name="nivelestudios"]) {
    order: 4;
    grid-column: 1 / -1;
  }


  /* --- CASO C · la tarjeta de las fichas de producto (87 plantillas)
         Reparte en columnas los campos que hoy van apilados uno bajo otro.
         El diseno (2.1.1 Ficha producto) pide:
         1 Nombre|Apellidos   2 Email|Telefono   3 Pais   4 Nivel de estudios --- */

  form.wpcf7-form:not(:has(> .row)):has(> .col.contiene-tlfn) > .col:has([data-name="your-name"]) {
    order: 1;
    grid-column: 1 / 2;
  }
  form.wpcf7-form:not(:has(> .row)):has(> .col.contiene-tlfn) > .col:has([data-name="your-ape"]) {
    order: 1;
    grid-column: 2 / 3;
  }
  form.wpcf7-form:not(:has(> .row)):has(> .col.contiene-tlfn) > .col:has([data-name="your-email"]) {
    order: 2;
    grid-column: 1 / 2;
  }
  form.wpcf7-form:not(:has(> .row)):has(> .col.contiene-tlfn) > .col.contiene-tlfn {
    order: 2;
    grid-column: 2 / 3;
  }
  form.wpcf7-form:not(:has(> .row)):has(> .col.contiene-tlfn) > .col:has([data-name^="countrytext"]) {
    order: 3;
    grid-column: 1 / -1;
  }
  form.wpcf7-form:not(:has(> .row)):has(> .col.contiene-tlfn) > .col:has([data-name="nivelestudios"]) {
    order: 4;
    grid-column: 1 / -1;
  }
  /* El titulo de la tarjeta va arriba del todo, a lo ancho. */
  form.wpcf7-form:not(:has(> .row)):has(> .col.contiene-tlfn) > .col:not(:has(.wpcf7-form-control-wrap)):first-of-type {
    order: 0;
  }
}


/* 3 · PREFIJO + TELEFONO EN UNA SOLA LINEA
   ------------------------------------------------------------------------
   En la tarjeta de la ficha (1158) el contenedor .contiene-tlfn no era flex,
   asi que prefijo y telefono se apilaban y la fila media 114 px en vez de 50. */

.wpcf7-form .contiene-tlfn:has(> .col-3) {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 8px;
}
.wpcf7-form .contiene-tlfn:has(> .col-3) > .col-3 {
  flex: 0 0 72px;
  width: 72px;
  max-width: 72px;
}
.wpcf7-form .contiene-tlfn:has(> .col-3) > .col-9 {
  flex: 1 1 auto;
  width: auto;
  max-width: none;
}


/* 4 · MOVIL: UNA SOLA COLUMNA
   ------------------------------------------------------------------------ */

@media (max-width: 767px) {
  form.wpcf7-form:has(> .row),
  form.wpcf7-form:not(:has(> .row)):has(> .col.contiene-tlfn) {
    display: block;
  }
  form.wpcf7-form > * {
    grid-column: 1 / -1 !important;
  }
}


/* 5 . EL SELECT DE NIVEL DE ESTUDIOS INYECTADO
   ------------------------------------------------------------------------
   functions.php lo anade a los siete formularios que no lo traian (20394,
   20412, 22811, 23293, 23305, 23311 y 23319). Llega como ultima fila del DOM,
   asi que aqui se le da su sitio.

   Ojo con el nombre: en esos siete, el campo que SE LLAMA «nivelestudios» es en
   realidad el de areas de interes. El nivel de estudios de verdad es el de la
   clase .uemc-fila-nivel.                                                     */

@media (min-width: 768px) {

  /* Reparto general: el nivel va en la segunda fila, y lo que habia detras
     corre un puesto. */
  form.wpcf7-form:has(> .row):not(:has(> .row.pais-tel)) > .row.uemc-fila-nivel {
    order: 2;
    grid-column: 1 / -1;
  }
  form.wpcf7-form:has(> .row.uemc-fila-nivel):not(:has(> .row.pais-tel)) > .row:has([data-name="countrytext-17"]) { order: 3; }
  form.wpcf7-form:has(> .row.uemc-fila-nivel):not(:has(> .row.pais-tel)) > .row:has([data-name="your-email"])     { order: 3; }
  form.wpcf7-form:has(> .row.uemc-fila-nivel):not(:has(> .row.pais-tel)) > .row:has([data-name="tel-858"])        { order: 4; }
  form.wpcf7-form:has(> .row.uemc-fila-nivel):not(:has(> .row.pais-tel)) > .row:has([data-name="nivelestudios"])  { order: 5; }

  /* La pagina de Contacto (20394) va aparte: el diseno 10 dibuja ahi un orden
     propio -Nombre|Apellidos, Nivel, Interesado, Pais+Telefono, Email-. */
  /* Las genericas de arriba son (0,6,1); estas suben a (0,6,2) repitiendo
     .wpcf7 y anteponiendo body, que es lo justo para ganarles. */
  body .wpcf7.wpcf7[id^="wpcf7-f20394-"] form.wpcf7-form > .row.uemc-fila-nivel                   { order: 2; grid-column: 1 / -1; }
  body .wpcf7.wpcf7[id^="wpcf7-f20394-"] form.wpcf7-form > .row:has([data-name="nivelestudios"])  { order: 3; grid-column: 1 / -1; }
  body .wpcf7.wpcf7[id^="wpcf7-f20394-"] form.wpcf7-form > .row:has([data-name="countrytext-17"]) { order: 4; grid-column: 1 / 2; }
  body .wpcf7.wpcf7[id^="wpcf7-f20394-"] form.wpcf7-form > .row:has([data-name="tel-858"])        { order: 4; grid-column: 2 / 3; }
  body .wpcf7.wpcf7[id^="wpcf7-f20394-"] form.wpcf7-form > .row:has([data-name="your-email"])     { order: 5; grid-column: 1 / -1; }
}

/* El select inyectado no lo monta CF7, asi que no hereda el margen de los <p>
   de las demas filas. */
.wpcf7-form .row.uemc-fila-nivel > .col > p {
  margin: 0;
}
.wpcf7-form select.uemc-nivelestudios {
  width: 100%;
}