*,
::before,
::after {
  box-sizing: border-box;
  font-family: "Roboto";
}

body {
  margin: 0;
}

.hidden {
  display: none !important;
}
.error {
    color: red;
    font-size: 11px;
    text-align: right;
    margin: -7px 4px 8px 0px;
}
.zcwf_lblLeft .zcwf_col_help {
    float: left;
    margin-left: 7px;
    max-width: 100%;
    word-break: break-word;
}

.container-general {
  position: relative;
  min-height: 100vh;
}
@media (min-width: 992px) {
  .container-general {
    display: flex;
    justify-content: end;
    padding-top: 20px;
    -moz-column-gap: 12px;
         column-gap: 12px;
  }
}
@media (min-width: 1880px) {
  .container-general {
    justify-content: center;
  }
}
.container-general--background-img {
  height: 250px;
  background: url("/img/Imgen-Formulario.jpg") center/cover no-repeat;
  width: 100%;
  background-position: left;
  background-color: #0e691c;
}
@media (min-width: 992px) and (max-width: 1300px) {
  .container-general--background-img {
    background-image: none;
  }
}
@media (min-width: 1670px) and (max-width: 1800px) {
  .container-general--background-img {
    background-size: auto;
  }
}
@media (min-width: 992px) {
  .container-general--background-img {
    height: 50vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    background-size: contain;
  }
}
.container-general--background-color {
  background-color: #8dc73f;
  width: 100%;
  padding: 10px 25px 30px 25px;
  font-size: 24px;
  font-weight: 700;
}
@media (min-width: 992px) {
  .container-general--background-color {
    position: absolute;
    height: 49vh;
    bottom: 0;
    left: 0;
    font-size: 28px;
  }
}
@media (min-width: 992px) {
  .container-general__formulario {
    height: -moz-fit-content;
    height: fit-content;
  }
}
@media (min-width: 1880px) {
  .container-general__formulario {
    margin-left: 600px;
  }
}
.container-general__formulario__imagen {
  padding: 10px 25px;
  background-color: #424244;
  display: flex;
  justify-content: center;
}
.container-general__formulario__imagen img {
  max-width: 310px;
  width: 100%;
  height: auto;
  margin: 0 auto;
}
.container-general__formulario__form {
  margin: 16px;
}
@media (min-width: 992px) {
  .container-general__formulario__form {
    background-color: white;
    margin: 5px 0 0 0;
    position: relative;
    padding: 10px 20px;
  }
}
.container-general__formulario__form--item:not(.privacy-policy) {
  display: flex;
  flex-direction: column;
  row-gap: 5px;
  margin-bottom: 10px;
}
@media (min-width: 992px) {
  .container-general__formulario__form--item:not(.privacy-policy) {
    flex-direction: row;
    align-items: center;
  }
}
.container-general__formulario__form--item:not(.privacy-policy) label {
  font-size: 14px;
}
@media (min-width: 992px) {
  .container-general__formulario__form--item:not(.privacy-policy) label {
    width: 50%;
    font-size: 12px;
  }
}
.container-general__formulario__form--item:not(.privacy-policy) select,
.container-general__formulario__form--item:not(.privacy-policy) input {
  padding: 10px;
  border: none;
  background-color: #f1f1f1;
}
@media (min-width: 992px) {
  .container-general__formulario__form--item:not(.privacy-policy) select,
  .container-general__formulario__form--item:not(.privacy-policy) input {
    width: 50%;
    padding: 8px 12px;
  }
}
.container-general__formulario__form .privacy-policy {
  margin-bottom: 10px;
}
.container-general__formulario__form .privacy-policy label {
  font-size: 14px;
}
.container-general__formulario__form--buttons {
  display: flex;
  justify-content: center;
  -moz-column-gap: 10px;
       column-gap: 10px;
}
.container-general__formulario__form--buttons input{
  font-size: 12px;
  color: #333;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 4px;
}
.container-general__info {
  background-color: #424244;
  padding: 30px 25px;
}
@media (min-width: 992px) {
  .container-general__info {
    height: -moz-fit-content;
    height: fit-content;
    width: 26%;
    margin-right: 3%;
  }
}
@media (min-width: 1880px) {
  .container-general__info {
    margin: 0;
  }
}
.container-general__info--title h1 {
  font-size: 20px;
  margin: 0;
  color: white;
  line-height: 28px;
}
.container-general__info--title h3 {
  margin: 0;
  color: white;
  font-size: 20px;
  line-height: 30px;
  font-weight: 300;
}
.container-general__info--descrip__items {
  margin: 0;
  padding-left: 15px;
}
.container-general__info--descrip__items--item {
  color: white;
  line-height: 24px;
  font-weight: 300;
}
.container-general__info--descrip__items--item::marker {
  color: #8dc73f;
}
.container-general__info--descrip h4 {
  margin: 0;
  margin-top: 40px;
  margin-bottom: 5px;
  color: #8dc73f;
  font-size: 18px;
}/*# sourceMappingURL=style.css.map */



/* intl-tel-input envuelve el campo de telefono en un .iti que por defecto no
   hereda el ancho del input. Sin esto el campo queda angosto al lado de los demas.
   Se agrega en CSS y no en JS: es presentacion, no comportamiento. */
.iti {
  width: 100% !important;
}

.mobile-number .iti {
  width: 100% !important;
}

@media(min-width:992px){
  .mobile-number .iti {
    width: 50% !important;
    right: unset !important;
  }
}

.mobile-number .iti [type="tel"]{
  width: 100%;
}
.mobile-number .iti  .iti__selected-dial-code{
  font-size: .75rem;
}

/* Nivel de la cascada que se muestra sin nada que elegir: la sede cuando el programa
   se ofrece en una sola. Se ve deshabilitado y no se puede tocar, pero NO lleva el
   atributo disabled: HTML excluye del envio los controles deshabilitados y el campo
   se caeria del POST. */
select.nivel-bloqueado {
  pointer-events: none;
  background-color: #e9ecef;
  color: #6c757d;
  cursor: not-allowed;
}

.container-general__formulario__form--item input:focus,
.container-general__formulario__form--item select:focus,
.container-general__formulario__form--item .iti__selected-flag:focus,
.container-general__formulario__form--item .iti__selected-country:focus,
.container-general__formulario__form--buttons input:focus {
  outline: unset;
  outline-offset: unset;
  box-shadow: 0 0 0 2px rgba(141, 199, 63, 0.6);
}

/* Buscador de "Carrera o especialidad" (Tom Select, ver src/js/buscador-carrera.js). El
   control copia el aspecto de los <select> del formulario —mismo fondo, sin borde, flecha a la
   derecha, mitad de ancho en escritorio— y el buscador vive dentro del desplegable. */
.container-general__formulario__form--item .ts-wrapper {
  width: 100%;
}
@media (min-width: 992px) {
  .container-general__formulario__form--item .ts-wrapper {
    width: 50%;
  }
}
.container-general__formulario__form--item .ts-wrapper .ts-control {
  position: relative;
  padding: 10px 32px 10px 10px !important;
  border: none;
  border-radius: 0;
  background-color: #f1f1f1;
  font-size: 13px;
  line-height: 1.35;
}
@media (min-width: 992px) {
  .container-general__formulario__form--item .ts-wrapper .ts-control {
    padding: 8px 32px 8px 12px !important;
  }
}
/* La flecha del <select> nativo, para que se lea como un desplegable y no como un campo de
   texto. */
.container-general__formulario__form--item .ts-wrapper .ts-control::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 12px;
  width: 7px;
  height: 7px;
  margin-top: -6px;
  border-right: 2px solid #555;
  border-bottom: 2px solid #555;
  transform: rotate(45deg);
  pointer-events: none;
}
.container-general__formulario__form--item .ts-wrapper.dropdown-active .ts-control::after {
  margin-top: -2px;
  transform: rotate(-135deg);
}
/* La carrera elegida va en una sola línea: lo que no entra se corta con "…". Los nombres
   largos ("ADMINISTRACIÓN DE NEGOCIOS CON ÉNFASIS EN…") partían el control en dos renglones y
   lo dejaban más alto que los demás campos. El nombre completo se ve al abrir la lista. */
.container-general__formulario__form--item .ts-wrapper.single .ts-control {
  flex-wrap: nowrap;
}
.container-general__formulario__form--item .ts-wrapper .ts-control .item {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.container-general__formulario__form--item .ts-wrapper.focus .ts-control {
  box-shadow: 0 0 0 2px rgba(141, 199, 63, 0.6);
}
.container-general__formulario__form--item .ts-wrapper .items-placeholder {
  padding: 0;
  background: transparent;
  font-size: 13px;
  cursor: pointer;
}

/* El desplegable. En escritorio el control ocupa media fila, así que el listado se abre hacia
   la izquierda hasta cubrir la fila entera: los nombres de carrera son largos y a media fila
   quedaban partidos en tres renglones. */
.container-general__formulario__form--item .ts-dropdown {
  margin-top: 2px;
  border: 1px solid #d0d0d0;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  font-size: 13px;
}
@media (min-width: 992px) {
  .container-general__formulario__form--item .ts-dropdown {
    left: auto;
    right: 0;
    width: 200%;
  }
}
.container-general__formulario__form--item .ts-dropdown .ts-dropdown-content {
  max-height: 320px;
}
.container-general__formulario__form--item .ts-dropdown .option,
.container-general__formulario__form--item .ts-dropdown .no-results {
  padding: 9px 12px;
  line-height: 1.35;
}
.container-general__formulario__form--item .ts-dropdown .dropdown-input {
  padding: 10px 12px;
  font-size: 13px;
}
.container-general__formulario__form--item .ts-dropdown .dropdown-input:focus {
  outline: none;
  box-shadow: none;
  background-color: #fafafa;
}
.container-general__formulario__form--item .ts-dropdown .active {
  background-color: rgba(141, 199, 63, 0.25);
  color: inherit;
}
.container-general__formulario__form--item .ts-wrapper.locked .ts-control {
  background-color: #e9ecef;
  color: #6c757d;
  cursor: not-allowed;
}

/* Al abrir el desplegable Tom Select le cambia el aspecto al control: esconde el texto
   "Seleccione una opción", le pone borde y fondo blanco. Como el buscador está dentro del
   desplegable, el control quedaba vacío y se achicaba a una franja. Se mantiene igual que
   cerrado: mismo fondo, sin borde, con su texto y su altura. */
.container-general__formulario__form--item .ts-wrapper.plugin-dropdown_input.dropdown-active:not(.has-items) .items-placeholder {
  display: block !important;
}
.container-general__formulario__form--item .ts-wrapper.plugin-dropdown_input.focus.dropdown-active .ts-control,
.container-general__formulario__form--item .ts-wrapper.single.input-active .ts-control {
  border: none;
  background-color: #f1f1f1;
  cursor: pointer;
}
.container-general__formulario__form--item .ts-wrapper.plugin-dropdown_input.focus.dropdown-active .ts-control {
  box-shadow: 0 0 0 2px rgba(141, 199, 63, 0.6);
}

/* Con 10 carreras o menos el buscador no se muestra (ver MAX_SIN_BUSCADOR en
   buscador-carrera.js). Se oculta a la vista sin sacarlo del flujo del foco: el teclado del
   desplegable depende de ese input. */
.container-general__formulario__form--item .ts-wrapper.sin-buscador .dropdown-input-wrap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}