/**
 * MechTech Admissions Modal
 * Glassmorphism modal + Gravity Forms dark-theme overrides.
 * Paired with admissions-modal.js
 */

:root {
  --modal-radius: 22px;
  --modal-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  --overlay-dark: rgba(8, 10, 12, 0.65);
  --glass-bg: rgba(18, 22, 27, 0.35);
  --glass-stroke: rgba(255, 255, 255, 0.16);
  --accent: #cf0003;
}

/* -------------------------------------------------------
 * GF label color on dark glass
 * ----------------------------------------------------- */
.gform-theme--framework
  .gform-field-label:where(
    :not(.gform-theme__disable):not(.gform-theme__disable *)
      :not(.gform-theme__disable-framework):not(.gform-theme__disable-framework
        *)
  ) {
  --gf-local-color: #ffffff;
}

/* -------------------------------------------------------
 * Overlay
 * ----------------------------------------------------- */
.mechtech-overlay {
  position: fixed;
  inset: 0;
  z-index: 999998;
  background: var(--overlay-dark);
  backdrop-filter: blur(3px) saturate(120%);
  -webkit-backdrop-filter: blur(3px) saturate(120%);
  display: none;
  opacity: 0;
  transition: opacity 0.28s ease-out;
}
.mechtech-overlay.is-open {
  display: block;
  opacity: 1;
}

/* -------------------------------------------------------
 * Modal
 * ----------------------------------------------------- */
.mechtech-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
  place-items: center;
}
.mechtech-modal.is-open {
  display: grid;
}

/* -------------------------------------------------------
 * Card
 * ----------------------------------------------------- */
.mechtech-card {
  width: min(700px, 92vw);
  max-height: min(88vh, 820px);
  display: flex;
  flex-direction: column;
  border-radius: var(--modal-radius);
  background: linear-gradient(
    to bottom right,
    rgba(0 0 0 / 60%),
    rgba(0 0 0 / 41%)
  );
  background-color: var(--glass-bg);
  outline: 1px solid var(--glass-stroke);
  box-shadow: var(--modal-shadow);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  transform: translateY(8px) scale(0.985);
  opacity: 0;
  transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.2, 1.05),
    opacity 0.28s ease-out;
  position: relative;
  padding: 44px 1.25rem 1.5rem; /* v1.7: banda arriba para el boton de cerrar (tapaba el input de Apellido) */
}
.mechtech-modal.is-open .mechtech-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}
.mechtech-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: calc(var(--modal-radius) + 1px);
  background: linear-gradient(
    to bottom right,
    rgba(255, 255, 255, 0.14),
    rgba(255, 255, 255, 0)
  );
  mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1px;
}

/* -------------------------------------------------------
 * Close button
 * ----------------------------------------------------- */
.mechtech-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease,
    box-shadow 0.15s ease;
}
.mechtech-close:hover {
  transform: translateY(-1px) scale(1.03);
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.32);
}
.mechtech-close::before {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  mask: linear-gradient(#000 0 0) center / 100% 2px no-repeat,
    linear-gradient(#000 0 0) center / 2px 100% no-repeat;
  transform: rotate(45deg);
  background: var(--accent);
  opacity: 0.95;
}

/* -------------------------------------------------------
 * Scroll container
 * ----------------------------------------------------- */
.mechtech-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-right: 0.25rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}
.mechtech-scroll::-webkit-scrollbar {
  width: 8px;
}
.mechtech-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 8px;
}

/* -------------------------------------------------------
 * Form inputs on dark glass
 *
 * GF's "theme framework" uses deeply nested selectors,
 * :where() pseudo-classes, and CSS custom properties.
 * We override at every level: custom properties on the
 * wrapper, direct selectors with !important, and a
 * catch-all that targets any input inside the form wrap.
 * ----------------------------------------------------- */

/* Override GF theme framework CSS custom properties FIRST.
   GF checks for .gform-theme--framework, .gform-theme--foundation,
   and bare .gform_wrapper depending on version. Cover all. */
.mechtech-form-wrap .gform_wrapper,
.mechtech-form-wrap .gform_wrapper.gform-theme--framework,
.mechtech-form-wrap .gform_wrapper.gform-theme--foundation,
.mechtech-form-wrap .gform_wrapper.gravity-theme {
  --gf-ctrl-border-color: rgba(255, 255, 255, 0.22) !important;
  --gf-ctrl-border-color-hover: rgba(255, 255, 255, 0.35) !important;
  --gf-ctrl-border-color-focus: #cf0003 !important;
  --gf-ctrl-bg-color: rgba(255, 255, 255, 0.08) !important;
  --gf-ctrl-bg-color-hover: rgba(255, 255, 255, 0.12) !important;
  --gf-ctrl-color: #fff !important;
  --gf-ctrl-color-placeholder: rgba(255, 255, 255, 0.6) !important;
  --gf-ctrl-border-radius: 10px !important;
  --gf-ctrl-padding-inline: 0.85rem !important;
  --gf-ctrl-padding-block: 0.7rem !important;
  --gf-ctrl-focus-shadow: 0 0 0 3px rgba(207, 0, 3, 0.25) !important;
  --gf-label-color-primary: #fff !important;
  --gf-label-color-secondary: rgba(255, 255, 255, 0.7) !important;
  --gf-local-bg-color: rgba(255, 255, 255, 0.08) !important;
  --gf-local-border-color: rgba(255, 255, 255, 0.22) !important;
  --gf-local-color: #fff !important;
  --gf-color-in-ctrl: #fff !important;
  --gf-color-in-ctrl-primary: #fff !important;
  --gf-color-out-ctrl-light: rgba(255, 255, 255, 0.7) !important;
  --gf-color-out-ctrl-lighter: rgba(255, 255, 255, 0.5) !important;
}

/* Labels — every variant GF generates */
.mechtech-form-wrap label,
.mechtech-form-wrap legend,
.mechtech-form-wrap .gfield_description,
.mechtech-form-wrap .gfield_required,
.mechtech-form-wrap .gform-field-label,
.mechtech-form-wrap .ginput_complex label,
.mechtech-form-wrap .ginput_container label,
.mechtech-form-wrap .gfield_label,
.mechtech-form-wrap .gfield .gform-field-label {
  color: #fff !important;
}

/* Nuclear input override — ANY input inside the form wrap
   that isn't a radio, checkbox, submit, button, or hidden */
.mechtech-form-wrap input:not([type='radio']):not([type='checkbox']):not([type='submit']):not([type='button']):not([type='hidden']):not([type='image']),
.mechtech-form-wrap textarea {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
  border-radius: 10px !important;
  padding: 0.7rem 0.85rem !important;
  -webkit-appearance: none !important;
}

.mechtech-form-wrap input::placeholder,
.mechtech-form-wrap textarea::placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
}

.mechtech-form-wrap input:focus,
.mechtech-form-wrap textarea:focus {
  outline: 0 !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(207, 0, 3, 0.25) !important;
}

/* v1.7: los inputs llenan su columna (el de telefono salia a media
   anchura porque el form va sin el framework de GF) */
.mechtech-form-wrap .ginput_container input:not([type='radio']):not([type='checkbox']):not([type='submit']):not([type='button']):not([type='hidden']):not([type='image']) {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* -------------------------------------------------------
 * Styled selects (GF Legacy + Modern)
 * ----------------------------------------------------- */
.mechtech-form-wrap .gform_wrapper.gravity-theme .ginput_container_select select,
.mechtech-form-wrap .gform_wrapper.gravity-theme .gfield_select select,
.mechtech-form-wrap .gform_wrapper .ginput_container_select select,
.mechtech-form-wrap .gform_wrapper .gfield_select select,
.mechtech-form-wrap select:not([multiple]) {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  width: 100% !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
  border-radius: 10px !important;
  padding: 0.7rem 2.4rem 0.7rem 0.85rem !important;
  min-height: 41px !important;
  line-height: 1.2 !important;
  outline: none !important;
  transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
  background-image: linear-gradient(transparent, transparent),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.7rem center !important;
  background-size: 18px 18px !important;
}
.mechtech-form-wrap select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(207, 0, 3, 0.25) !important;
}

/* Multi-selects */
.mechtech-form-wrap select[multiple] {
  min-height: 7.5rem;
  padding-right: 0.85rem !important;
}

/* Chosen / Enhanced UI (GF) */
.mechtech-form-wrap .chosen-container {
  width: 100% !important;
  color: #fff;
  font-size: 14px;
}
.mechtech-form-wrap .chosen-container-single .chosen-single {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 10px !important;
  height: auto !important;
  padding: 0.65rem 0.9rem !important;
  box-shadow: none !important;
  color: #fff !important;
  min-height: 41px !important;
}
.mechtech-form-wrap .chosen-container-single .chosen-single div b {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 18px 18px !important;
}
.mechtech-form-wrap .chosen-container-active .chosen-single {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(207, 0, 3, 0.25) !important;
}
.mechtech-form-wrap .chosen-drop {
  background: rgba(15, 15, 18, 0.98) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35) !important;
}
.mechtech-form-wrap .chosen-results li {
  color: #fff !important;
}
.mechtech-form-wrap .chosen-results li.highlighted {
  background: var(--accent) !important;
}

/* -------------------------------------------------------
 * Submit button (80% centered, MechTech red)
 * ----------------------------------------------------- */
.mechtech-form-wrap .gform_footer input[type='submit'],
.mechtech-form-wrap .gform_page_footer input[type='button'],
.mechtech-form-wrap .gform_page_footer input[type='submit'] {
  display: block !important;
  width: 80% !important;
  margin: 1rem auto 0 !important;
  background: #cf0003 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 0.9rem 1.2rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  text-align: center;
  cursor: pointer;
  transition: background 0.25s ease, box-shadow 0.25s ease,
    transform 0.2s ease;
}
.mechtech-form-wrap .gform_footer input[type='submit']:hover,
.mechtech-form-wrap .gform_page_footer input[type='button']:hover,
.mechtech-form-wrap .gform_page_footer input[type='submit']:hover {
  background: #e00000 !important;
  box-shadow: 0 0 25px rgba(207, 0, 3, 0.45) !important;
  transform: translateY(-1px);
}

/* -------------------------------------------------------
 * GF spacing overrides
 * ----------------------------------------------------- */
.mechtech-form-wrap .gform_wrapper.gravity-theme .gfield,
.mechtech-form-wrap .gform_wrapper .gfield {
  margin-bottom: 0.75rem !important;
}
.mechtech-form-wrap .gform_fields {
  row-gap: 0.75rem !important;
}
h3.gsection_title {
  font-size: 2rem;
}
.gform-theme--foundation .gform_footer,
.gform-theme--foundation .gform_page_footer {
  margin-block-start: 0px;
}

/* -------------------------------------------------------
 * Validation on dark
 * ----------------------------------------------------- */
.mechtech-form-wrap .gform_validation_errors {
  display: none;
}
.mechtech-form-wrap .gfield_error input,
.mechtech-form-wrap .gfield_error textarea,
.mechtech-form-wrap .gfield_error select {
  border-color: #cf0003;
}

/* -------------------------------------------------------
 * Body lock (v1.7, oct 2026)
 * Solo bloquea el scroll. Antes este bloque ponia overflow:visible
 * al <html> y a las secciones de Elementor mientras el modal estaba
 * abierto: eso soltaba el marquee de la home (.elementor-scrolling-
 * wrapper, ~5900px de ancho) y los swipers, y en Chrome de Android el
 * layout viewport se ensanchaba hasta 4x (zoom-out minimo 0.25). El
 * modal (fixed, inset:0) quedaba de 1648x3356 en un Pixel 7 y la
 * tarjeta centrada fuera de la pantalla. El <html>/<body> ya recortan
 * en x (overflow-x hidden / clip); aqui se mantiene ese recorte.
 * ----------------------------------------------------- */
html.modal-locked,
body.modal-locked {
  overflow: hidden !important;
}

/* -------------------------------------------------------
 * Mobile fullscreen takeover
 * ----------------------------------------------------- */
@media (max-width: 768px) {
  /* v1.7: medidas en vw/dvh (no inset:0) para que el modal siga del
     tamano de la pantalla aunque algo ensanche el layout viewport, y
     100dvh para que la barra de Chrome no tape el boton de enviar. */
  .mechtech-overlay,
  .mechtech-modal {
    right: auto;
    bottom: auto;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
  }
  .mechtech-card {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
    padding: 60px 1.25rem calc(1.25rem + env(safe-area-inset-bottom, 0px)); /* banda arriba para el boton de cerrar */
  }
  .mechtech-scroll {
    max-height: none;
  }
}

/* =======================================================
 * Advisor modal ("Habla con nuestro personal" PR = GF form 2,
 * "Talk to an Admissions Advisor" FL = GF form 4): tarjeta
 * ancha + 2 columnas. Nombre, mensaje y campos sin pareja a
 * lo ancho; los campos cortos en pares. En movil vuelve a
 * 1 columna. El scroll del .mechtech-scroll queda solo como
 * fallback. (Sep 30 2026: se quitaron los campos 4 y 5,
 * "como contactarte" y "mejor horario", en ambos forms.)
 *   PR pares: 2|3 tel/email, 6|7 recinto/programa, 8|9
 *   FL pares: 2|3 phone/email, 8|9 (7 programa a lo ancho)
 * ----------------------------------------------------- */
#mtcConsejeroModal .mechtech-card {
  width: min(940px, 94vw);
  padding-top: 44px; /* banda libre para el boton de cerrar: la 1a fila no le queda debajo */
}
#mtcConsejeroModal #gform_fields_2,
#mtcConsejeroModal #gform_fields_4 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 22px;
}
#mtcConsejeroModal #gform_fields_2 > .gfield,
#mtcConsejeroModal #gform_fields_4 > .gfield {
  grid-column: 1 / -1;
}
#mtcConsejeroModal #gform_fields_2 > #field_2_2,
#mtcConsejeroModal #gform_fields_2 > #field_2_3,
#mtcConsejeroModal #gform_fields_2 > #field_2_6,
#mtcConsejeroModal #gform_fields_2 > #field_2_7,
#mtcConsejeroModal #gform_fields_2 > #field_2_8,
#mtcConsejeroModal #gform_fields_2 > #field_2_9,
#mtcConsejeroModal #gform_fields_4 > #field_4_2,
#mtcConsejeroModal #gform_fields_4 > #field_4_3,
#mtcConsejeroModal #gform_fields_4 > #field_4_8,
#mtcConsejeroModal #gform_fields_4 > #field_4_9 {
  grid-column: auto / span 1;
}
#mtcConsejeroModal .mechtech-form-wrap textarea {
  min-height: 5rem;
  height: 6rem; /* opcional: 4 lineas bastan (antes 130px) */
}
#mtcConsejeroModal .mechtech-form-wrap .ginput_container input {
  width: 100%;
}
@media (max-width: 768px) {
  /* mismo fullscreen takeover que el modal de Solicitudes:
     estas propiedades se re-declaran porque el selector con id
     del consejero le gana al .mechtech-card del bloque general */
  #mtcConsejeroModal .mechtech-card {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
    padding-top: 60px;
  }
  #mtcConsejeroModal #gform_fields_2,
  #mtcConsejeroModal #gform_fields_4 { grid-template-columns: 1fr; column-gap: 0; }
  #mtcConsejeroModal #gform_fields_2 > .gfield,
  #mtcConsejeroModal #gform_fields_4 > .gfield { grid-column: 1 / -1 !important; }
}

/* -------------------------------------------------------
 * Windows fix — dropdown nativo del <select> (sep 2026)
 * El popup abierto en Chrome/Edge de Windows hereda el
 * color #fff del select pero pinta el fondo del popup
 * blanco nativo (color-scheme light) => opciones
 * invisibles. macOS dibuja el popup del OS e ignora el
 * CSS, por eso alli se veia bien. color-scheme:dark hace
 * que Chromium pinte el popup oscuro nativo; las reglas
 * de option cubren Firefox y todo navegador que honra
 * estilos en option. Safari ignora ambas y pinta su popup
 * claro nativo con texto negro (legible igual).
 * ----------------------------------------------------- */
.mechtech-form-wrap select {
  color-scheme: dark;
}
.mechtech-form-wrap select option,
.mechtech-form-wrap select optgroup {
  background-color: #161616 !important;
  color: #ffffff !important;
}