/* =============================================================================
   FORM EXPUESTO — rediseño "Ruta"
   Base visual: formulario.module de UVM, tropicalizado a UNITEC (tokens de
   css/tokens/*, Work Sans del tema). Solo capa visual: no cambia IDs, names,
   validaciones, stepper ni tracking de form-expuesto.module.js.

   Todo cuelga de `.fe-ruta` (solo este módulo): css/components/_form-expuesto.css
   lo comparten form_expuesto_producto_soi y form_sedena y NO se toca.
   `.fe-ruta #ModalCalculadoraVue` le gana a `#ModalCalculadoraVue ...` del CSS
   compartido por especificidad. Los `!important` que quedan son contra reglas
   que ya traen `!important` (.c-btn--*, utilidades .d-flex/.p-5).

   OJO tokens de espaciado: css/tokens/_spacing.css redefine --space-4 (4px),
   --space-8 (8px) y --space-12 (12px) más abajo en el mismo :root. Aquí se usan
   --space-16 / --space-32 o literales para 16 / 32 / 48px. Igual con el peso:
   --font-weight-semibold vale 500 en el tema, así que el semibold va como 600 literal.

   Layout: <768 una columna (beneficios ocultos) · ≥992 panel | tarjeta.
   El wizard del JS no cambia: <768 y ≥1200 muestran ambos pasos; 768–1199 paso a paso.
   ============================================================================= */

.fe-ruta {
  /* Íconos de campo: Material Icons (Outlined) como máscara; el color sale de un token */
  --fe-rd-ic-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2m0 10c2.7 0 5.8 1.29 6 2H6c.23-.72 3.31-2 6-2m0-12C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 10c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
  --fe-rd-ic-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6zm-2 0l-8 5-8-5h16zm0 12H4V8l8 5 8-5v10z'/%3E%3C/svg%3E");
  --fe-rd-ic-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.54 5c.06.89.21 1.76.45 2.59l-1.2 1.2c-.41-1.2-.67-2.47-.76-3.79h1.51m9.86 12.02c.85.24 1.72.39 2.6.45v1.49c-1.32-.09-2.59-.35-3.8-.75l1.2-1.19M7.5 3H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.49c0-.55-.45-1-1-1-1.24 0-2.45-.2-3.57-.57-.1-.04-.21-.05-.31-.05-.26 0-.51.1-.71.29l-2.2 2.2c-2.83-1.45-5.15-3.76-6.59-6.59l2.2-2.2c.28-.28.36-.67.25-1.02C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1z'/%3E%3C/svg%3E");
  --fe-rd-ic-nivel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3L1 9l4 2.18v6L12 21l7-3.82v-6l2-1.09V17h2V9L12 3zm6.82 6L12 12.72 5.18 9 12 5.28 18.82 9zM17 15.99l-5 2.73-5-2.73v-3.72L12 15l5-2.73v3.72z'/%3E%3C/svg%3E");
  --fe-rd-ic-programa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 16h8v2H8zm0-4h8v2H8zm6-10H6c-1.1 0-2 .9-2 2v16c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z'/%3E%3C/svg%3E");
  --fe-rd-ic-campus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zM7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 2.88-2.88 7.19-5 9.88C9.92 16.21 7 11.85 7 9z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E");
  --fe-rd-ic-ciclo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V10h16v11zm0-13H4V5h16v3z'/%3E%3C/svg%3E");
  --fe-rd-ic-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z'/%3E%3C/svg%3E");

  --fe-rd-chip-bg: var(--Blanco-Complementario, #f2f2f0);
  --fe-rd-chip-border: var(--color-border-light, #d0d4e4);
  --fe-rd-field-h: 48px;
  --fe-rd-shadow-card: 0 8px 24px rgba(0, 0, 0, 0.06);
  --fe-rd-shadow-hover: 0 6px 14px rgba(0, 0, 0, 0.16);
}

/* ---------- Banda (caja canónica 1160) ---------- */
.fe-ruta #ModalCalculadoraVue .modal-dialog.nvoAncho {
  padding: var(--space-10, 40px) var(--space-16, 16px);
}

.fe-ruta #ModalCalculadoraVue .modal-content {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  background: var(--color-bg-alt, #f6f7fb);
  border-radius: var(--radius-xl, 16px);
  box-shadow: none;
}

.fe-ruta #ModalCalculadoraVue .ancho-modal {
  display: grid !important; /* .d-flex de utilidades trae !important */
  grid-template-columns: minmax(0, 1fr);
  align-items: start !important;
  gap: var(--space-6, 24px);
  width: auto;
  margin: 0 !important;
  padding: var(--space-6, 24px); /* mismo aire en los 4 lados */
  border-radius: var(--radius-xl, 16px);
  box-sizing: border-box;
  font-family: var(--font-family-base, "Work Sans", Arial, sans-serif);
}

/* ---------- Panel de valor (#info_clc) ---------- */
.fe-ruta #ModalCalculadoraVue #info_clc.card-blue {
  display: block;
  order: 0;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0 !important; /* .p-5 */
  text-align: left;
}

.fe-ruta #ModalCalculadoraVue #info_clc .overlay,
.fe-ruta #ModalCalculadoraVue #info_clc .card-desc {
  padding: 0;
  background: transparent;
}

.fe-ruta #ModalCalculadoraVue #info_clc .card-desc {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
}

.fe-ruta #ModalCalculadoraVue #info_clc .titulo-frmt {
  align-items: flex-start;
  gap: var(--space-2, 8px);
  text-align: left;
}

.fe-ruta #ModalCalculadoraVue #info_clc .size-calc {
  display: none !important;
}

.fe-ruta #ModalCalculadoraVue .fe-rd__eyebrow {
  margin: 0;
  color: var(--color-primary, #006fba);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.fe-ruta #ModalCalculadoraVue #info_clc .tit-desc {
  margin: 0;
  color: var(--color-primary-dark, #003053);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: normal;
  text-align: left;
}

.fe-ruta #ModalCalculadoraVue #info_clc .subtit-desc {
  width: auto;
  margin: 0;
  color: var(--color-text-body, #505050);
  font-size: var(--font-size-sm, 14px);
  font-weight: var(--font-weight-regular, 400);
  line-height: 1.5;
  letter-spacing: normal;
  text-align: left;
}

.fe-ruta #ModalCalculadoraVue .fe-rd__bullets {
  display: none; /* móvil: protagonismo a título + formulario */
  margin: var(--space-5, 20px) 0 0;
  padding: 0;
  list-style: none;
  gap: var(--space-16, 16px);
}

.fe-ruta #ModalCalculadoraVue .fe-rd__bullet {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3, 12px);
  margin: 0;
  padding: 0;
}

.fe-ruta #ModalCalculadoraVue .fe-rd__bullet::before {
  content: none; /* el tema pone viñetas en li */
}

.fe-ruta #ModalCalculadoraVue .fe-rd__bullet-ic {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  box-sizing: border-box;
  border: 1px solid var(--fe-rd-chip-border);
  border-radius: var(--radius-sm, 8px);
  background: var(--fe-rd-chip-bg);
  color: var(--color-primary, #006fba);
}

.fe-ruta #ModalCalculadoraVue .fe-rd__bullet-txt b,
.fe-ruta #ModalCalculadoraVue .fe-rd__bullet-desc {
  display: block;
  font-size: var(--font-size-sm, 14px);
  line-height: 1.4;
}

.fe-ruta #ModalCalculadoraVue .fe-rd__bullet-txt b {
  color: var(--color-text-primary, #323338);
  font-weight: 600;
}

.fe-ruta #ModalCalculadoraVue .fe-rd__bullet-desc {
  color: var(--color-text-body, #505050);
  font-weight: var(--font-weight-regular, 400);
}

/* Rich text: sin los márgenes de <p>/<ul> del tema para conservar el ritmo del diseño */
.fe-ruta #ModalCalculadoraVue .fe-rd__bullet-desc > * {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

.fe-ruta #ModalCalculadoraVue .fe-rd__bullet-desc > * + * {
  margin-top: var(--space-1, 4px);
}

.fe-ruta #ModalCalculadoraVue .fe-rd__bullet-desc a {
  color: var(--color-primary, #006fba);
  text-decoration: underline;
}

/* ---------- Tarjeta del formulario (#paso) ---------- */
.fe-ruta #ModalCalculadoraVue .secc-zaul-res {
  display: block;
  min-width: 0;
  padding: var(--space-5, 20px); /* mismo aire en los 4 lados */
  box-sizing: border-box;
  background: var(--color-bg-white, #fff);
  border: 1px solid var(--color-border-light, #d0d4e4);
  border-radius: var(--radius-xl, 16px);
  box-shadow: var(--fe-rd-shadow-card);
}

.fe-ruta #ModalCalculadoraVue #form_calculadora {
  width: 100%;
  max-width: 100%;
  padding: 0;
  gap: var(--space-16, 16px);
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.fe-ruta #ModalCalculadoraVue .FormWizardContent {
  display: block;
  padding: 0;
}

/* Paso 1: nombre a lo ancho; apellidos y correo|teléfono en pares (≥768) */
.fe-ruta #ModalCalculadoraVue #paso1_form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: min-content;
  column-gap: var(--space-16, 16px);
  row-gap: var(--space-3, 12px);
  align-items: start;
  width: 100%;
  margin: 0;
}

.fe-ruta #ModalCalculadoraVue #paso1_form > .form {
  grid-column: 1 / -1;
  min-width: 0;
}

/* Paso 2: selects uno por línea (a media columna se truncan los nombres de programa) */
.fe-ruta #ModalCalculadoraVue #paso2_form {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  margin: var(--space-3, 12px) 0 0;
}

.fe-ruta #ModalCalculadoraVue #paso2_form .container-fluid {
  padding: 0;
}

.fe-ruta #ModalCalculadoraVue #paso2_form .row.sProg {
  margin: 0;
}

.fe-ruta #ModalCalculadoraVue #paso2_form .mg-paso2 {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
  width: 100%;
  padding: 0;
}

.fe-ruta #ModalCalculadoraVue .form-select {
  margin: 0;
}

/* ---------- Campos (48px + ícono a la izquierda) ---------- */
.fe-ruta #ModalCalculadoraVue .form-group.floating,
.fe-ruta #ModalCalculadoraVue .form-select .form-group {
  position: relative;
  height: var(--fe-rd-field-h);
  min-height: var(--fe-rd-field-h);
  max-height: var(--fe-rd-field-h);
  box-sizing: border-box;
  margin: 0;
  background: var(--color-bg-white, #fff);
  border-radius: var(--radius-sm, 8px);
  outline: 1px solid var(--color-border, #c3c6d4);
  outline-offset: -1px;
}

.fe-ruta #ModalCalculadoraVue .form-group.floating {
  padding: 18px var(--space-16, 16px) 6px 44px;
}

.fe-ruta #ModalCalculadoraVue .form-select .form-group {
  padding: 0;
}

.fe-ruta #ModalCalculadoraVue .form-group.floating::before,
.fe-ruta #ModalCalculadoraVue .form-select .form-group::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 1;
  width: 20px;
  height: 20px;
  background-color: var(--color-text-muted, #676879);
  -webkit-mask: var(--fe-rd-ic-programa) center / 20px 20px no-repeat;
  mask: var(--fe-rd-ic-programa) center / 20px 20px no-repeat;
  pointer-events: none;
}

.fe-ruta #ModalCalculadoraVue .form-select .form-group::after {
  content: "";
  position: absolute;
  top: 16px;
  right: 16px;
  width: 16px;
  height: 16px;
  background-color: var(--color-primary, #006fba);
  -webkit-mask: var(--fe-rd-ic-chevron) center / 16px 16px no-repeat;
  mask: var(--fe-rd-ic-chevron) center / 16px 16px no-repeat;
  pointer-events: none;
}

.fe-ruta #ModalCalculadoraVue #gpo_firstname .form-group::before,
.fe-ruta #ModalCalculadoraVue #gpo_lastname .form-group::before,
.fe-ruta #ModalCalculadoraVue #gpo_lastname_m .form-group::before {
  -webkit-mask-image: var(--fe-rd-ic-user);
  mask-image: var(--fe-rd-ic-user);
}
.fe-ruta #ModalCalculadoraVue #gpo_email .form-group::before {
  -webkit-mask-image: var(--fe-rd-ic-mail);
  mask-image: var(--fe-rd-ic-mail);
}
.fe-ruta #ModalCalculadoraVue #gpo_phone .form-group::before {
  -webkit-mask-image: var(--fe-rd-ic-phone);
  mask-image: var(--fe-rd-ic-phone);
}
.fe-ruta #ModalCalculadoraVue #gpo_nivel_de_interes::before {
  -webkit-mask-image: var(--fe-rd-ic-nivel);
  mask-image: var(--fe-rd-ic-nivel);
}
.fe-ruta #ModalCalculadoraVue #gpo_campus_interes .form-group::before {
  -webkit-mask-image: var(--fe-rd-ic-campus);
  mask-image: var(--fe-rd-ic-campus);
}
.fe-ruta #ModalCalculadoraVue #gpo_ciclo .form-group::before {
  -webkit-mask-image: var(--fe-rd-ic-ciclo);
  mask-image: var(--fe-rd-ic-ciclo);
}

/* Íconos de fuente del diseño anterior: reemplazados por los ::before */
.fe-ruta #ModalCalculadoraVue .form-select .cont-prepa {
  display: none;
}

.fe-ruta #ModalCalculadoraVue .form-group.floating .form-calculadora {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: var(--font-size-sm, 14px);
  line-height: 20px;
  color: var(--color-text-primary, #323338);
}

.fe-ruta #ModalCalculadoraVue .form-group.floating > label {
  inset-inline-start: 44px;
  max-width: calc(100% - 60px);
  overflow: hidden;
  color: var(--color-text-muted, #676879);
  font-size: var(--font-size-sm, 14px);
  line-height: 18px;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
}

/* `~` y no `+`: en correo el JS mete <ul class="drop"> entre el input y la etiqueta */
.fe-ruta #ModalCalculadoraVue .form-group.floating .form-calculadora:not(:placeholder-shown) ~ label,
.fe-ruta #ModalCalculadoraVue .form-group.floating .form-calculadora:focus ~ label {
  top: 5px;
  transform: none;
  inset-inline-start: 44px;
  font-size: 12px;
  line-height: 14px;
}

.fe-ruta #ModalCalculadoraVue .form-select select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0 40px 0 44px;
  box-sizing: border-box;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm, 8px);
  font-family: inherit;
  font-size: var(--font-size-sm, 14px);
  line-height: 20px;
  color: var(--color-text-body, #505050);
  text-overflow: ellipsis;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.fe-ruta #ModalCalculadoraVue .form-select select:focus-visible {
  outline: 2px solid var(--color-primary, #006fba);
  outline-offset: -2px;
}

.fe-ruta #ModalCalculadoraVue .form-group.floating:has(.input-error),
.fe-ruta #ModalCalculadoraVue .form-select .form-group:has(.input-error) {
  outline-color: var(--color-error, #d60000);
}

.fe-ruta #ModalCalculadoraVue .error-form,
.fe-ruta #ModalCalculadoraVue .error-form-select {
  margin: var(--space-1, 4px) 0 0;
  color: var(--color-error, #d60000);
}

/* Sugeridor de dominios de correo: solo se pinta cuando tiene opciones
   (vacío no debe dejar una caja visible bajo el campo) */
.fe-ruta #ModalCalculadoraVue #email_options_email.drop:not(:empty) {
  left: 0;
  width: 100%;
  margin-top: var(--space-1, 4px);
  padding: var(--space-1, 4px);
  background: var(--color-bg-white, #fff);
  border: 1px solid var(--color-border-light, #d0d4e4);
  border-radius: var(--radius-sm, 8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  max-height: 168px;
}

.fe-ruta #ModalCalculadoraVue #email_options_email.drop li {
  padding: var(--space-2, 8px) var(--space-3, 12px);
  border-radius: 4px;
  font-size: var(--font-size-sm, 14px);
  line-height: 1.25;
}

.fe-ruta #ModalCalculadoraVue #email_options_email.drop li:hover,
.fe-ruta #ModalCalculadoraVue #email_options_email.drop li:focus {
  background: var(--color-bg-alt, #f6f7fb);
}

.fe-ruta #ModalCalculadoraVue #gpo_revalidaci_n_equivalencias_ .label-beca {
  margin: 0;
  color: var(--color-text-body, #505050);
  font-size: var(--font-size-sm, 14px);
}

/* ---------- Legales + CTA ---------- */
/* Columna minmax(0,1fr): sin ella el botón de 370px ensancha la columna y
   legales + botón se salen de la tarjeta en móvil */
.fe-ruta #ModalCalculadoraVue .WizardPager {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3, 12px);
  padding: 0;
}

.fe-ruta #ModalCalculadoraVue .WizardPager > * {
  min-width: 0;
  max-width: 100%;
}

.fe-ruta #ModalCalculadoraVue #frm_politicas_y_condiciones {
  margin: 0;
}

/* Aviso legal a 10/15 como UVM (--font-size-xs = 10px) */
.fe-ruta #ModalCalculadoraVue #form_politicas {
  max-width: 520px;
  margin: 0 auto;
  padding: 0;
  color: var(--color-text-muted, #676879);
  font-size: var(--font-size-xs, 10px);
  line-height: 15px;
}

.fe-ruta #ModalCalculadoraVue #form_politicas a {
  color: inherit;
}

/* stretch: con center la .botn-div se ajustaba a los 370px del botón y se salía en móvil;
   el centrado del botón lo da align-items de .botn-div */
.fe-ruta #ModalCalculadoraVue .WizardPagerButtons.only-mobile {
  justify-items: stretch;
}

.fe-ruta #ModalCalculadoraVue .botn-div {
  align-items: center;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.fe-ruta #ModalCalculadoraVue .PagerBtn,
.fe-ruta #ModalCalculadoraVue .botn-div .btn.btn-primary.btn-frm {
  width: 370px;
  max-width: 100%;
  min-width: 0;
  min-height: 46px;
  box-sizing: border-box;
}

/* =============================================================================
   TyPage — dos columnas: resumen | siguientes pasos
   Se activa cuando el JS muestra #info-res / #res-card (quita .hidden).
   ============================================================================= */
.fe-ruta #ModalCalculadoraVue .div-card-azul:not(:has(> :not(.hidden))) {
  display: none !important;
}

.fe-ruta #ModalCalculadoraVue .ancho-modal:has(> .div-card-azul > :not(.hidden)) {
  grid-template-columns: minmax(0, 1fr);
}

.fe-ruta #ModalCalculadoraVue .visibleonlimobile.div-card-azul {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: none;
  align-items: start;
  gap: var(--space-6, 24px);
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
}

.fe-ruta #ModalCalculadoraVue #info-res,
.fe-ruta #ModalCalculadoraVue #res-card,
.fe-ruta #ModalCalculadoraVue #res-card .dtn-text,
.fe-ruta #ModalCalculadoraVue .dtn-text-deco {
  grid-area: auto;
  margin: 0;
  text-align: left;
}

/* ----- Columna izquierda: resumen ----- */
.fe-ruta #ModalCalculadoraVue #info-res {
  display: block;
}

.fe-ruta #ModalCalculadoraVue .div-tit-res {
  align-items: flex-start;
  align-self: auto;
  margin: 0;
}

.fe-ruta #ModalCalculadoraVue .div-tit-res > svg {
  display: none;
}

.fe-ruta #ModalCalculadoraVue .mod-camp {
  margin: 0 0 var(--space-3, 12px);
  color: var(--color-primary-dark, #003053);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: normal;
  text-align: left;
}

.fe-ruta #ModalCalculadoraVue .fe-rd__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
  margin: 0 0 var(--space-3, 12px);
  padding: var(--space-2, 8px) var(--space-16, 16px);
  border: 1px solid rgba(0, 193, 92, 0.28);
  border-radius: var(--radius-full, 9999px);
  background: rgba(0, 193, 92, 0.08);
  color: var(--color-text-primary, #323338);
  font-size: 12px;
  font-weight: var(--font-weight-medium, 500);
  line-height: 1.25;
}

.fe-ruta #ModalCalculadoraVue .fe-rd__chip svg {
  flex: 0 0 auto;
  color: var(--color-success, #00c15c);
}

.fe-ruta #ModalCalculadoraVue .subtitle-res {
  margin: 0 0 var(--space-2, 8px);
  text-align: left;
}

.fe-ruta #ModalCalculadoraVue .subtitle-res p {
  margin: 0;
  color: var(--color-text-body, #505050);
  font-size: var(--font-size-sm, 14px);
  font-weight: var(--font-weight-regular, 400);
  line-height: 1.5;
  text-align: left;
}

.fe-ruta #ModalCalculadoraVue .subtitle-res #alumno {
  color: var(--color-primary-dark, #003053);
  font-size: var(--font-size-base, 16px);
  font-weight: 600;
}

.fe-ruta #ModalCalculadoraVue .datos .d-list {
  display: grid;
  gap: var(--space-3, 12px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fe-ruta #ModalCalculadoraVue .list-datos {
  gap: var(--space-3, 12px);
  margin: 0;
  padding: 0;
}

.fe-ruta #ModalCalculadoraVue .list-datos::before {
  content: none; /* viñeta del tema en li */
}

.fe-ruta #ModalCalculadoraVue .list-datos > div:first-child {
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  box-sizing: border-box;
  border: 1px solid var(--fe-rd-chip-border);
  border-radius: var(--radius-sm, 8px);
  background: var(--fe-rd-chip-bg);
}

/* El <i> es inline y su line-height lo desplaza: caja de 16x16 centrada */
.fe-ruta #ModalCalculadoraVue .list-datos > div:first-child i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  line-height: 0;
}

.fe-ruta #ModalCalculadoraVue .list-datos > div:first-child svg {
  display: block;
  width: 16px;
  height: 16px;
}

.fe-ruta #ModalCalculadoraVue .list-datos > div:first-child svg path,
.fe-ruta #ModalCalculadoraVue .list-datos > div:first-child svg circle {
  fill: var(--color-primary, #006fba);
}

.fe-ruta #ModalCalculadoraVue .list-bl {
  color: var(--color-text-primary, #323338);
  font-size: var(--font-size-base, 16px);
  font-weight: var(--font-weight-medium, 500);
  line-height: 1.4;
  letter-spacing: normal;
}

.fe-ruta #ModalCalculadoraVue .fe-rd__quote {
  max-width: 460px;
  margin: var(--space-3, 12px) 0 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
}

.fe-ruta #ModalCalculadoraVue .fe-rd__quote .dtn-text-box {
  color: var(--color-text-muted, #676879);
  font-size: 12px;
  font-style: italic;
  font-weight: var(--font-weight-regular, 400);
  line-height: 1.4;
  letter-spacing: normal;
  text-align: left;
}

/* ----- Columna derecha: siguientes pasos ----- */
.fe-ruta #ModalCalculadoraVue #res-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
}

.fe-ruta #ModalCalculadoraVue .fe-rd__steps {
  display: grid;
  gap: var(--space-1, 4px);
}

.fe-ruta #ModalCalculadoraVue .fe-rd__steps b {
  color: var(--color-text-muted, #676879);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.fe-ruta #ModalCalculadoraVue .fe-rd__steps span {
  color: var(--color-text-body, #505050);
  font-size: var(--font-size-sm, 14px);
}

/* El compartido pone align-self:center desde 1200px (layout anterior): el bloque
   se encogía y quedaba centrado; aquí ocupa todo el ancho de la columna */
.fe-ruta #ModalCalculadoraVue #res-card .dtn-text {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  width: 100%;
  gap: var(--space-3, 12px);
}

.fe-ruta #ModalCalculadoraVue #res-card .border-sep {
  display: none;
}

.fe-ruta #ModalCalculadoraVue .subCanales {
  margin: var(--space-1, 4px) 0 0;
  padding: 0;
  color: var(--color-text-body, #505050);
  font-size: var(--font-size-sm, 14px);
  font-weight: var(--font-weight-regular, 400);
  line-height: 1.4;
  letter-spacing: normal;
  text-align: left;
}

.fe-ruta #ModalCalculadoraVue .canales-entrantes-whatsapp,
.fe-ruta #ModalCalculadoraVue .canales-entrantes-call {
  display: block;
  margin: 0;
}

/* ----- Tarjetas de acción -----
   .c-btn (async_defaults) trae !important en display/gap/text-align/justify-content/
   font-weight y `.c-btn > span { display: inline-flex !important }`: aquí se
   contrarrestan con !important, acotado a .fe-ruta. */
.fe-ruta #ModalCalculadoraVue .fe-rd__act {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: var(--space-3, 12px) !important;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: auto;
  margin: 0;
  padding: var(--space-3, 12px) var(--space-16, 16px);
  box-sizing: border-box;
  border: 1px solid var(--color-border, #c3c6d4) !important;
  border-radius: var(--radius-md, 12px);
  outline: 0;
  background: var(--color-bg-white, #fff) !important;
  color: var(--CTA-Primary-main, #003053) !important;
  font-family: inherit;
  font-size: var(--font-size-sm, 14px);
  font-weight: 600 !important;
  line-height: 1.25;
  letter-spacing: normal;
  text-align: left !important;
  text-decoration: none !important;
  transition: box-shadow 0.2s ease;
  cursor: pointer;
}

.fe-ruta #ModalCalculadoraVue .fe-rd__act[hidden] {
  display: none !important;
}

.fe-ruta #ModalCalculadoraVue .fe-rd__act:hover,
.fe-ruta #ModalCalculadoraVue .fe-rd__act:focus-visible {
  box-shadow: var(--fe-rd-shadow-hover);
  text-decoration: none !important;
}

.fe-ruta #ModalCalculadoraVue .fe-rd__act:focus-visible {
  outline: 2px solid var(--color-primary, #006fba);
  outline-offset: 2px;
}

/* Ícono centrado en su caja de 40x40 */
.fe-ruta #ModalCalculadoraVue .fe-rd__act > .fe-rd__act-ic {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  line-height: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm, 8px);
  background: var(--color-bg-alt, #f6f7fb);
  color: var(--color-primary, #006fba) !important;
}

.fe-ruta #ModalCalculadoraVue .fe-rd__act .fe-rd__act-ic svg {
  display: block;
  flex: 0 0 auto;
}

.fe-ruta #ModalCalculadoraVue .fe-rd__act .fe-rd__act-ic svg,
.fe-ruta #ModalCalculadoraVue .fe-rd__act .fe-rd__act-ic svg path,
.fe-ruta #ModalCalculadoraVue .fe-rd__act .fe-rd__act-ic svg circle {
  fill: currentColor !important;
}

/* Texto principal arriba y subtítulo debajo (columna) */
.fe-ruta #ModalCalculadoraVue .fe-rd__act > .fe-rd__act-tx {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start !important; /* .c-btn > span lo fuerza a center */
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
  color: inherit !important;
  text-align: left;
}

/* Subtítulo visual: va en ::after para no alterar el textContent que mide GA4 */
.fe-ruta #ModalCalculadoraVue .fe-rd__act-tx::after {
  content: attr(data-fe-sub);
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: var(--font-weight-regular, 400);
  line-height: 1.25;
  opacity: 0.85;
}

.fe-ruta #ModalCalculadoraVue .fe-rd__act .fe-rd__act-chev {
  flex: 0 0 auto;
  color: inherit;
}

.fe-ruta #ModalCalculadoraVue .fe-rd__act .fe-rd__act-chev,
.fe-ruta #ModalCalculadoraVue .fe-rd__act .fe-rd__act-chev path {
  fill: currentColor !important; /* chevron_right de Material es relleno */
}

/* Calcula tu beca: acción principal */
.fe-ruta #ModalCalculadoraVue .fe-rd__act--calc {
  border-color: var(--CTA-Primary-main, #003053) !important;
  background: var(--CTA-Primary-main, #003053) !important;
  color: var(--color-text-inverse, #fff) !important;
}

.fe-ruta #ModalCalculadoraVue .fe-rd__act--calc:hover,
.fe-ruta #ModalCalculadoraVue .fe-rd__act--calc:focus-visible {
  border-color: var(--CTA-Primary-hover, #002641) !important;
  background: var(--CTA-Primary-hover, #002641) !important;
  color: var(--color-text-inverse, #fff) !important;
}

.fe-ruta #ModalCalculadoraVue .fe-rd__act--calc .fe-rd__act-ic {
  background: var(--color-bg-white, #fff);
  color: var(--CTA-Primary-main, #003053) !important;
}

/* WhatsApp */
.fe-ruta #ModalCalculadoraVue .fe-rd__act--wa,
.fe-ruta #ModalCalculadoraVue .fe-rd__act--wa:hover,
.fe-ruta #ModalCalculadoraVue .fe-rd__act--wa:focus-visible {
  border-color: var(--color-success-whatsapp, #25d366) !important;
  background: var(--color-success-whatsapp, #25d366) !important;
  color: var(--CTA-Primary-main, #003053) !important;
}

.fe-ruta #ModalCalculadoraVue .fe-rd__act--wa .fe-rd__act-ic {
  background: var(--color-bg-white, #fff);
  color: var(--CTA-Primary-main, #003053) !important;
}

/* Llámanos: blanco con borde (hereda .fe-rd__act) */
.fe-ruta #ModalCalculadoraVue .fe-rd__act--tel:hover,
.fe-ruta #ModalCalculadoraVue .fe-rd__act--tel:focus-visible {
  background: var(--color-bg-white, #fff) !important;
  color: var(--CTA-Primary-main, #003053) !important;
}

/* =============================================================================
   Breakpoints
   ============================================================================= */
@media (min-width: 768px) {
  .fe-ruta #ModalCalculadoraVue .modal-dialog.nvoAncho {
    padding: var(--space-14, 56px) var(--space-6, 24px);
  }

  .fe-ruta #ModalCalculadoraVue #paso1_form > #gpo_lastname,
  .fe-ruta #ModalCalculadoraVue #paso1_form > #gpo_lastname_m,
  .fe-ruta #ModalCalculadoraVue #paso1_form > #gpo_email,
  .fe-ruta #ModalCalculadoraVue #paso1_form > #gpo_phone {
    grid-column: span 1;
  }

  .fe-ruta #ModalCalculadoraVue #paso1_form {
    row-gap: var(--space-16, 16px);
  }

  .fe-ruta #ModalCalculadoraVue #paso2_form {
    margin-top: var(--space-16, 16px);
  }

  .fe-ruta #ModalCalculadoraVue #paso2_form .mg-paso2 {
    gap: var(--space-16, 16px);
  }

  .fe-ruta #ModalCalculadoraVue .fe-rd__bullets {
    display: grid;
  }
}

@media (min-width: 992px) {
  .fe-ruta #ModalCalculadoraVue .ancho-modal {
    grid-template-columns: minmax(340px, 1fr) minmax(0, 560px);
    gap: 44px;
    padding: 48px; /* literal: --space-12 vale 12px */
  }

  .fe-ruta #ModalCalculadoraVue .secc-zaul-res {
    padding: var(--space-32, 32px);
  }

  .fe-ruta #ModalCalculadoraVue .visibleonlimobile.div-card-azul {
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: var(--space-10, 40px);
  }

  .fe-ruta #ModalCalculadoraVue .datos .d-list {
    gap: var(--space-16, 16px);
  }

  .fe-ruta #ModalCalculadoraVue .fe-rd__quote {
    margin-top: var(--space-5, 20px);
  }
}

@media (min-width: 1200px) {
  .fe-ruta #ModalCalculadoraVue .modal-dialog.nvoAncho {
    padding: var(--space-14, 56px) var(--space-10, 40px);
  }
}