/**
 * Simulador de Beneficios Duoc UC · estilos frontend
 * Todas las reglas viven bajo .dsb para no chocar con el tema.
 *
 * --dsb-blue/--dsb-cyan/--dsb-yellow/--dsb-ink/etc. siguen siendo
 * administrables (Simulador → Ajustes) y hoy solo los usa la barra superior
 * opcional (.dsb-topbar). El formulario, el panel lateral y el resultado
 * usan la paleta fija de la maqueta (--dsb-accent/--dsb-text/--dsb-border…)
 * para que el estilo sea idéntico sin importar los colores ya guardados en
 * instalaciones existentes.
 */

.dsb {
  --dsb-blue: #002A5C;
  --dsb-blue-2: #003d82;
  --dsb-cyan: #0093d0;
  --dsb-yellow: #ffcd00;
  --dsb-yellow-d: #e6b800;
  --dsb-ink: #1a2233;
  --dsb-muted: #5a6577;
  --dsb-line: #dfe4ec;
  --dsb-line-2: #eef1f6;
  --dsb-bg: #f4f6fa;
  --dsb-card: #fff;
  --dsb-ok: #1f9d55;
  --dsb-ok-bg: #e7f6ee;
  --dsb-warn: #c98a00;
  --dsb-warn-bg: #fff6e0;
  --dsb-bad: #d43d3d;
  --dsb-bad-bg: #fbe9e9;
  --dsb-radius: 14px;
  --dsb-max: 1180px;
  --dsb-shadow: 0 2px 4px rgba(0, 42, 92, .04), 0 12px 32px rgba(0, 42, 92, .08);

  /* Paleta fija de la maqueta (no editable desde Ajustes). */
  --dsb-accent: #ffb800;
  --dsb-accent-d: #e6a600;
  --dsb-accent-bg: #fff8e5;
  --dsb-text: #1a1a1a;
  --dsb-text-muted: #5a6577;
  --dsb-border: #a4a4a4;
  --dsb-border-lt: #ccc;
  --dsb-panel-bg: #f9f9f9;
  /* Ancho del ícono de ayuda (23px) + separación (4px): en la maqueta todos
     los campos del formulario reservan este margen a la derecha, tengan o
     no un ícono real, para que sus bordes queden alineados entre sí. */
  --dsb-tip-gutter: 27px;

  font-family: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--dsb-bg);
  color: var(--dsb-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.dsb *,
.dsb *::before,
.dsb *::after {
  box-sizing: border-box
}

.dsb p,
.dsb h1,
.dsb h2,
.dsb h3,
.dsb h4,
.dsb h5,
.dsb ul,
.dsb li {
  margin: 0;
  padding: 0
}

/* El tema del sitio suele targetear h1-h5/button directamente: una regla
   heredada de .dsb no le gana en cascada, así que se fija explícita acá. */
.dsb h1,
.dsb h2,
.dsb h3,
.dsb h4,
.dsb h5,
.dsb button {
  font-family: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif
}

/* Ancho fijo: el layout de dos columnas necesita más espacio que el
   --dsb-max admin-configurable (860px por defecto, pensado para el
   wizard de una columna anterior). */
.dsb .dsb-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px 48px
}

/* ---------- topbar (opcional, fuera del frame de la maqueta) ---------- */
.dsb-topbar {
  background: var(--dsb-blue);
  color: #fff;
  padding: 14px 0;
  box-shadow: 0 2px 12px rgba(0, 42, 92, .15)
}

.dsb-topbar .dsb-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 0
}

.dsb-logo {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: .5px;
  display: flex;
  align-items: center;
  gap: 9px
}

.dsb-logo .dsb-dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--dsb-yellow);
  box-shadow: 0 0 0 4px rgba(255, 205, 0, .2)
}

.dsb-logo .dsb-logo-img {
  height: 30px;
  width: auto;
  display: block
}

.dsb-logo small {
  font-weight: 400;
  opacity: .75;
  font-size: 13px
}

.dsb-badge-ref {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .2);
  padding: 5px 11px;
  border-radius: 20px;
  letter-spacing: .4px;
  text-transform: uppercase
}

/* ---------- volver + intro (reemplaza el hero con gradiente) ---------- */
.dsb-volver {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--dsb-text);
  border-radius: 20px;
  padding: 6px 10px 6px 8px;
  margin: 28px 0 0;
  font-size: 16px;
  color: var(--dsb-text);
  text-decoration: none
}

.dsb-volver:hover {
  background: #f4f4f4
}

.dsb-volver-ico {
  width: 20px;
  height: 20px;
  background: url('../img/arrow-left.svg') center/contain no-repeat
}

.dsb-intro {
  padding: 24px 0 0;
  max-width: 100%
}

.dsb-intro h1 {
  font-size: clamp(26px, 4vw, 39px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.5px;
  color: var(--dsb-text)
}

.dsb-intro>p {
  margin-top: 14px;
  font-size: 18px;
  line-height: 1.35;
  color: var(--dsb-text)
}

.dsb-alert {
  display: flex;
  gap: 10px;
  align-items: center;
  background: #fff7e3;
  border-radius: 10px;
  padding: 18px 20px;
  margin-top: 20px
}

.dsb-alert-ico {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  margin-top: 1px;
  background: url('../img/alert-circle.svg') center/contain no-repeat
}

.dsb-alert p {
  font-size: 15px;
  line-height: 1.5;
  color: var(--dsb-text)
}

/* ---------- layout de dos columnas ---------- */
.dsb-cols {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  margin-top: 30px
}

.dsb-form-card {
  flex: 1 1 0;
  min-width: 0;
  background: #fff;
  border-radius: 20px;
  box-shadow: var(--dsb-shadow);
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 30px
}

.dsb-section {
  display: flex;
  flex-direction: column;
  gap: 20px
}

.dsb-section-head {
  display: flex;
  align-items: center;
  gap: 10px
}

.dsb-section-n {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--dsb-accent);
  color: var(--dsb-text);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 15px
}

.dsb-section-title {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -.4px;
  color: var(--dsb-text);
  line-height: 1.2
}

.dsb-step-sub {
  color: var(--dsb-text-muted);
  font-size: 14.5px;
  font-weight: 300;
  margin-top: -10px
}

.dsb-optional-tag {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  background: var(--dsb-warn-bg);
  color: var(--dsb-warn);
  padding: 3px 9px;
  border-radius: 20px;
  vertical-align: middle;
  margin-left: 4px;
  white-space: nowrap
}

.dsb-subhead {
  font-size: 16px;
  font-weight: 700;
  color: var(--dsb-text);
  letter-spacing: -.2px;
  margin: 8px 0 16px
}

.dsb-step-preguntas>.dsb-subhead:first-child {
  margin-top: 0
}

/* ---------- campos ---------- */
.dsb-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px
}

.dsb-grid .dsb-full {
  grid-column: 1/-1
}

.dsb-field {
  margin-bottom: 16px
}

.dsb-grid .dsb-field {
  margin-bottom: 0
}

.dsb-field>label {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: var(--dsb-text);
  margin-bottom: 6px
}

.dsb-req {
  color: var(--dsb-bad);
  margin-left: 2px
}

.dsb-field input,
.dsb-field select {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--dsb-border);
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--dsb-text);
  background: #fff;
  transition: .2s;
  line-height: 1.3;
  height: 42px;
  box-shadow: none
}

.dsb-field input::placeholder {
  color: var(--dsb-border)
}

.dsb-field input:focus,
.dsb-field select:focus {
  outline: none;
  border-color: var(--dsb-text);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .06)
}

.dsb-field input.dsb-invalid,
.dsb-field select.dsb-invalid {
  border-color: var(--dsb-bad);
  background: var(--dsb-bad-bg)
}

/* Como en la maqueta: los widgets del formulario (inputs, selects, filas de
   radios/checkboxes/opciones, buscador) no llegan al 100% del ancho — dejan
   siempre el margen del ícono de ayuda libre a la derecha, se muestre o no
   un ícono ahí, para que todos los campos queden alineados entre sí. */
.dsb-field > input,
.dsb-field > select,
.dsb-field > .dsb-tel-group,
.dsb-carrera-row > select,
.dsb-carrera-row > .dsb-combo,
.dsb-radios,
.dsb-opts,
.dsb-checklist,
.dsb-checklist-row > .dsb-multicombo,
.dsb-consent > .dsb-check {
  max-width: calc(100% - var(--dsb-tip-gutter))
}

/* Cualquier <select> del formulario (carrera, sede, jornada, modalidad,
   preguntas tipo "select" como tramo de ingreso o CAE, región, comuna,
   nacionalidad, select genérico de contacto): misma flecha plana de la
   maqueta en vez de la del sistema operativo. Regla genérica por hijo
   directo, en vez de listar clase por clase, para que cualquier select
   nuevo la herede automáticamente. Deja afuera a propósito el select
   angosto de país/tipo de documento dentro de .dsb-tel-group (no es hijo
   directo de .dsb-field) y a los <select> .dsb-oculto (espejados como
   radios/combobox, fuera de flujo). */
.dsb-field > select:not(.dsb-oculto),
.dsb-carrera-row > select:not(.dsb-oculto) {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: #fff url('../img/chevron-down.svg') right 13px center/16px no-repeat;
  padding-right: 40px;
  cursor: pointer
}

/* Teléfono / documento (RUT-Pasaporte): en la maqueta el prefijo/tipo y el
   valor comparten una sola caja (un borde, un fondo) en vez de dos campos
   separados con espacio entre ellos. El borde/alto/foco viven en el
   contenedor; el select y el input quedan "desnudos" adentro. */
.dsb-tel-group {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 42px;
  padding: 0 13px;
  border: 1px solid var(--dsb-border);
  border-radius: 10px;
  background: #fff;
  transition: .2s
}

.dsb-tel-group:focus-within {
  border-color: var(--dsb-text);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .06)
}

/* El input/select internos quedan sin borde propio (ver más abajo), así que
   el estado inválido se refleja en la caja completa. */
.dsb-tel-group:has(.dsb-invalid) {
  border-color: var(--dsb-bad);
  background: var(--dsb-bad-bg)
}

.dsb-tel-group select,
.dsb-tel-group input {
  border: 0;
  height: 100%;
  padding: 0;
  background-color: transparent;
  box-shadow: none
}

.dsb-tel-group select:focus,
.dsb-tel-group input:focus {
  outline: none;
  border-color: transparent;
  box-shadow: none
}

.dsb-tel-group select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  flex: 0 0 auto;
  max-width: 90px;
  padding-right: 16px;
  background-image: url('../img/chevron-down.svg');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 14px;
  cursor: pointer
}

.dsb-tel-group input {
  flex: 1;
  min-width: 0;
  width: auto
}

.dsb-hint {
  font-size: 12px;
  color: var(--dsb-text-muted);
  margin-top: 5px
}

.dsb-section-note {
  margin: -4px 0 14px
}

/* Cuando la nota reemplaza a una pregunta (ej. convenios: el buscador va
   directo, sin un Sí/No previo), se lee como texto normal de la maqueta en
   vez de como hint secundario atenuado. */
.dsb-section-note-lead {
  font-size: 14px;
  color: var(--dsb-text)
}

.dsb-section-note-lead p {
  margin: 0 0 12px
}

.dsb-section-note-lead p:last-child {
  margin-bottom: 0
}

/* Fila del selector de carrera: el select/buscador ya reserva el margen del
   ícono (regla compartida de arriba); el ícono se ubica ahí mismo, en vez de
   restarle ancho una segunda vez. */
.dsb-carrera-row {
  position: relative
}

/* Ícono "?" junto al buscador de carrera: círculo relleno sin borde, distinto
   del .dsb-tip genérico (con borde y letra "i") que usan las preguntas.
   Selector compuesto (.dsb-tip.dsb-tip-carrera) a propósito: con la misma
   especificidad que .dsb-tip (una sola clase), el orden en la hoja decide el
   empate y .dsb-tip -declarado más abajo, para las preguntas- terminaba
   pisando position/width/height/border de vuelta a los valores genéricos. */
.dsb-tip.dsb-tip-carrera {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 23px;
  height: 23px;
  border: 0;
  border-radius: 50%;
  background: url('../img/help-circle.svg') center/cover no-repeat;
  color: transparent;
  margin-top: 0
}

/* Selector de carrera con buscador integrado (combobox). */
.dsb-combo {
  position: relative
}

.dsb-combo-input {
  width: 100%;
  padding: 11px 44px 11px 13px;
  border: 1px solid var(--dsb-border);
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--dsb-text);
  background: #fff;
  transition: .2s;
  cursor: text;
  height: 42px
}

.dsb-combo-input::placeholder {
  color: var(--dsb-border)
}

.dsb-combo-input:focus {
  outline: none;
  border-color: var(--dsb-text);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .06)
}

.dsb-combo::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 24px;
  height: 24px;
  transform: translateY(-50%);
  background: url('../img/search.svg') center/contain no-repeat;
  pointer-events: none
}

.dsb-combo-clear {
  position: absolute;
  right: 38px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: none;
  color: var(--dsb-text-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%
}

.dsb-combo-clear:hover {
  color: var(--dsb-text);
  background: var(--dsb-line-2)
}

.dsb-combo-list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  margin: 0;
  padding: 10px !important;
  list-style: none;
  background: #fff;
  border: 1px solid var(--dsb-border);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .14);
  scrollbar-width: thin;
  scrollbar-color: #b0b0b0 transparent;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dsb-combo-list::-webkit-scrollbar {
  width: 8px
}

.dsb-combo-list::-webkit-scrollbar-thumb {
  background: #b0b0b0;
  border-radius: 30px
}

.dsb-combo-list::-webkit-scrollbar-track {
  background: transparent
}

.dsb-combo-opt {
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 14.5px;
  line-height: 1.35;
  cursor: pointer
}

.dsb-combo-opt.is-activo {
  background: var(--dsb-text);
  color: #fff
}

.dsb-combo-empty {
  padding: 9px 12px;
  font-size: 13px;
  color: var(--dsb-text-muted)
}

/* Casillas múltiples con buscador (ej. convenios): mismo campo que el
   buscador de carrera (borde, radio, ícono de lupa, listado flotante), pero
   permite marcar varias opciones a la vez. Cada opción marcada queda como
   una píldora removible dentro del propio campo, y el listado no se cierra
   al elegir para poder seguir marcando. */
.dsb-checklist-row {
  position: relative
}

.dsb-multicombo {
  position: relative
}

.dsb-multicombo-field {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid var(--dsb-border);
  border-radius: 10px;
  background: #fff;
  transition: .2s;
  cursor: text
}

.dsb-multicombo-field:focus-within,
.dsb-multicombo.is-open .dsb-multicombo-field {
  border-color: var(--dsb-text);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .06)
}

.dsb-multicombo-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px
}

.dsb-multicombo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px
}

.dsb-multicombo-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 20px;
  background: var(--dsb-accent-bg);
  color: var(--dsb-text);
  font-size: 14px;
  line-height: 1.5;
  white-space: nowrap
}

.dsb-multicombo-chip-x {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--dsb-text);
  font-size: 15px;
  line-height: 1;
  cursor: pointer
}

.dsb-multicombo-chip-x:hover {
  background: rgba(0, 0, 0, .08)
}

.dsb-multicombo-input {
  flex: 1 1 140px;
  min-width: 120px;
  border: 0;
  padding: 3px 0;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--dsb-text);
  background: transparent
}

.dsb-multicombo-input:focus {
  outline: none
}

.dsb-multicombo-input::placeholder {
  color: var(--dsb-border)
}

.dsb-multicombo-icon {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  background: url('../img/search.svg') center/contain no-repeat
}

.dsb-multicombo-list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  margin: 0;
  padding: 10px !important;
  list-style: none;
  background: #fff;
  border: 1px solid var(--dsb-border);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .14);
  scrollbar-width: thin;
  scrollbar-color: #b0b0b0 transparent;
  display: flex;
  flex-direction: column;
  gap: 10px
}

.dsb-multicombo-list::-webkit-scrollbar {
  width: 8px
}

.dsb-multicombo-list::-webkit-scrollbar-thumb {
  background: #b0b0b0;
  border-radius: 30px
}

.dsb-multicombo-list::-webkit-scrollbar-track {
  background: transparent
}

.dsb-multicombo-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 14.5px;
  line-height: 1.35;
  cursor: pointer
}

/* .dsb-multicombo-opt:hover {
  background: var(--dsb-line-2)
} */

.dsb-multicombo-opt.is-activo {
  background: var(--dsb-text);
  color: #fff
}

.dsb-multicombo-opt-box {
  position: relative;
  width: 16px;
  height: 16px;
  flex: 0 0 16px
}

.dsb-multicombo-opt.is-sel .dsb-multicombo-opt-box::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid var(--dsb-text);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg)
}

.dsb-multicombo-opt.is-activo.is-sel .dsb-multicombo-opt-box::after {
  border-color: #fff
}

/* Ícono "?" junto al campo, igual que el buscador de carrera: se alinea con
   la primera línea del campo (que puede crecer en alto con varias píldoras)
   en vez de centrarse verticalmente en toda la caja. */
.dsb-tip.dsb-tip-checklist {
  position: absolute;
  right: 0;
  top: 9px;
  width: 23px;
  height: 23px;
  border: 0;
  border-radius: 50%;
  background: url('../img/help-circle.svg') center/cover no-repeat;
  color: transparent;
  margin-top: 0
}

/* Sede, jornada y modalidad como botones de opción. */
.dsb-oculto,
.dsb-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap
}

.dsb-radios {
  display: flex;
  flex-wrap: wrap;
  gap: 4px
}

.dsb-radios:empty {
  display: none
}

.dsb-radio {
  flex: 1 1 140px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-height: 42px;
  border: 1px solid var(--dsb-border-lt);
  border-radius: 6px;
  padding: 10px 12px;
  cursor: pointer;
  font-size: 14px;
  text-align: left;
  background: #fff;
  transition: .15s
}

.dsb-radio:hover {
  border-color: var(--dsb-text)
}

.dsb-radio.is-sel {
  border-color: var(--dsb-accent);
  background: var(--dsb-accent-bg)
}

.dsb-radio input {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin: 0;
  accent-color: var(--dsb-text)
}

/* Preguntas que acompañan a un paso de carrera o de contacto. */
.dsb-section[data-tipo="carrera"] .dsb-step-preguntas {
  margin-top: 6px
}

.dsb-section[data-tipo="contacto"] .dsb-step-preguntas {
  margin-bottom: 6px
}

.dsb-q {
  margin-bottom: 14px;
  transition: .2s;
  background: #fff
}

.dsb-q:hover {
  border-color: var(--dsb-border)
}

.dsb-q.is-answered {
  border-color: var(--dsb-text);
}

.dsb-q.dsb-invalid {
  border-color: var(--dsb-bad);
  background: var(--dsb-bad-bg)
}

.dsb-q[data-tipo="checkboxes"] {
  border: none;
  background: none;
  padding: 0;
  margin-bottom: 14px
}

.dsb-q[data-tipo="checkboxes"]:hover {
  border-color: transparent
}

.dsb-q[data-tipo="select"],
.dsb-q[data-tipo="numero"],
.dsb-q[data-tipo="texto"] {
  border: none;
  background: none;
  padding: 0
}

.dsb-q[data-tipo="select"] .dsb-field,
.dsb-q[data-tipo="numero"] .dsb-field,
.dsb-q[data-tipo="texto"] .dsb-field {
  margin-bottom: 0
}

.dsb-q-text {
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 12px;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  color: var(--dsb-text)
}

.dsb-tip {
  cursor: help;
  color: var(--dsb-text-muted);
  font-size: 13px;
  font-weight: 700;
  border: 1px solid var(--dsb-border);
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 18px;
  margin-top: 1px;
  position: relative
}

.dsb-tip:hover::after,
.dsb-tip:focus::after {
  content: attr(data-tip);
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--dsb-text);
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  padding: 8px 11px;
  border-radius: 8px;
  width: 230px;
  line-height: 1.4;
  z-index: 20;
  box-shadow: var(--dsb-shadow)
}

/* Sí / No — pill con indicador circular tipo radio, como en la maqueta. */
.dsb-opts {
  display: flex;
  gap: 4px;
  flex-wrap: wrap
}

.dsb-opt {
  flex: 1;
  min-width: 78px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--dsb-border-lt);
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  color: var(--dsb-text);
  transition: .15s;
  user-select: none;
  background: #fff
}

.dsb-opt::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border: 1px solid var(--dsb-text);
  border-radius: 50%;
  background: #fff;
  transition: .15s
}

.dsb-opt:hover {
  border-color: var(--dsb-text)
}

.dsb-opt:focus-visible {
  outline: 2px solid var(--dsb-text);
  outline-offset: 2px
}

.dsb-opt.is-sel {
  border-color: var(--dsb-accent);
  background: var(--dsb-accent-bg)
}

.dsb-opt.is-sel::before {
  background: radial-gradient(circle, var(--dsb-text) 0 40%, #fff 42%)
}

.dsb-opt.is-sel.no {
  border-color: var(--dsb-text-muted);
  background: var(--dsb-line-2)
}

.dsb-opt.is-sel.no::before {
  background: radial-gradient(circle, var(--dsb-text-muted) 0 40%, #fff 42%);
  border-color: var(--dsb-text-muted)
}

.dsb-opt.is-sel.dunno {
  border-color: var(--dsb-warn);
  background: var(--dsb-warn-bg)
}

.dsb-opt.is-sel.dunno::before {
  background: radial-gradient(circle, var(--dsb-warn) 0 40%, #fff 42%);
  border-color: var(--dsb-warn)
}

.dsb-subq {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--dsb-line);
  display: none;
  animation: dsb-fade .3s ease
}

.dsb-subq.is-show {
  display: block
}

.dsb-subq .dsb-q-text {
  font-size: 14.5px
}

.dsb-subq .dsb-field {
  margin-top: 14px;
  margin-bottom: 0
}

@keyframes dsb-fade {
  from {
    opacity: 0;
    transform: translateY(6px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

/* Checkboxes: cuadrado con borde, como la maqueta. */
.dsb-checklist {
  display: grid;
  gap: 6px
}

.dsb-check {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  border: 1px solid var(--dsb-border-lt);
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  transition: .15s;
  background: #fff;
  margin: 0;
}

.dsb-check:hover {
  border-color: var(--dsb-text)
}

.dsb-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--dsb-accent);
  cursor: pointer;
  margin: 0;
  flex: 0 0 18px;
  border-radius: 4px
}

.dsb-check.is-sel {
  border-color: var(--dsb-accent);
  background: var(--dsb-accent-bg)
}

/* ---------- navegación / envío ---------- */
.dsb-form-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start
}

.dsb-btn {
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  padding: 12px 26px;
  border-radius: 40px;
  border: none;
  cursor: pointer;
  transition: .2s;
  letter-spacing: .2px;
  line-height: 1.2
}

.dsb-btn-primary {
  background: var(--dsb-accent);
  color: var(--dsb-text);
  border: 1px solid var(--dsb-accent)
}

.dsb-btn-primary:hover {
  background: var(--dsb-accent-d);
  border-color: var(--dsb-accent-d)
}

.dsb-btn-ghost {
  background: transparent;
  color: var(--dsb-text-muted);
  border: 1px solid var(--dsb-border-lt)
}

.dsb-btn-ghost:hover {
  border-color: var(--dsb-text-muted);
  color: var(--dsb-text)
}

.dsb-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none
}

.dsb-error {
  font-size: 13px;
  color: var(--dsb-bad);
  font-weight: 600;
  margin: 0
}

.dsb-error:empty {
  display: none
}

.dsb-consent {
  display: flex;
  flex-direction: column;
  gap: 10px
}

.dsb-consent .dsb-check {
  font-size: 16px;
  font-weight: 400;
  align-items: flex-start
}

.dsb-consent .dsb-check input {
  margin-top: 2px
}

.dsb-consent .dsb-check span a {
  color: var(--dsb-text)
}

.dsb-recaptcha {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--dsb-line);
  border-radius: 8px;
  padding: 12px 14px;
  margin-top: 4px;
  background: #fafbfd;
  max-width: 300px
}

.dsb-rc-box {
  width: 24px;
  height: 24px;
  border: 2px solid #c4ccd8;
  border-radius: 4px;
  cursor: pointer;
  flex: 0 0 24px
}

.dsb-rc-box.is-on {
  background: var(--dsb-ok);
  border-color: var(--dsb-ok);
  position: relative
}

.dsb-rc-box.is-on::after {
  content: "✓";
  color: #fff;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 700
}

.dsb-recaptcha small {
  font-size: 12px;
  color: var(--dsb-text-muted)
}

.dsb-rc-logo {
  margin-left: auto;
  font-size: 9px;
  color: #9aa4b2;
  text-align: center;
  line-height: 1.2
}

.dsb-recaptcha-real {
  margin-top: 4px
}

/* El wrapper del tema (.container-fluid.content-container) fija
   overflow-x:hidden + overflow-y:auto. Cualquier overflow distinto de
   "visible" en un ancestro pasa a ser el "contenedor de scroll" para
   position:sticky, así que .dsb-side quedaría pegado a ESE div (que no
   hace scroll propio) en vez de a la ventana. No basta con liberar solo
   overflow-y: si un eje queda "hidden" el navegador fuerza el otro eje de
   "visible" a "auto" (no se pueden mezclar), así que hay que liberar los
   dos para que deje de ser un contenedor de scroll. */
.container-fluid.content-container {
  overflow: visible !important
}

/* ---------- panel lateral: sigue con el scroll ---------- */
.dsb-side {
  flex: 1 1 0;
  min-width: 0;
  position: sticky;
  top: 80px;
  border-radius: 20px;
  background: #FFF;
  display: flex;
  width: 625px;
  padding: 30px;
  flex-direction: column;
  align-items: stretch;
  gap: 30px;
}

.dsb-side-title {
  font-size: 25px;
  font-weight: 700;
  color: var(--dsb-text);
  letter-spacing: -.3px;
  line-height: normal;
}

.dsb-side-ficha {
  display: none;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--negro, #1A1A1A);
  font-family: Lato;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: -0.24px;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

.dsb-side-ficha:hover {
  text-decoration: underline
}

.dsb-side-ficha::after {
  content: "";
  width: 15px;
  height: 15px;
  background: url('../img/external-link.svg') center/contain no-repeat
}

.dsb-side-result {
  display: flex;
  flex-direction: column;
  gap: 20px
}

/* ---------- panel lateral: cuadro vacío (nada seleccionado aún) ---------- */
.dsb-side-empty {
  display: flex;
  flex-direction: column;
  gap: 20px
}

.dsb-side-empty-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-radius: 10px;
  background: #E8FFD0;
}

.dsb-side-empty-banner p {
  font-size: 16px;
  color: #000;
  letter-spacing: -.24px;
}

.dsb-side-empty-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background: url('../img/check-circle.svg') center/22px no-repeat;
}

.dsb-side-card {
  background: var(--dsb-panel-bg);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px
}

.dsb-side-card-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--dsb-text);
  letter-spacing: -.2px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap
}

.dsb-side-rows {
  display: flex;
  flex-direction: column;
  gap: 14px
}

.dsb-side-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px
}

.dsb-side-row-lbl {
  font-size: 14px;
  color: var(--dsb-text);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0
}

.dsb-side-row-lbl small {
  font-size: 11.5px;
  color: var(--dsb-text-muted);
  font-weight: 400
}

.dsb-side-row-val {
  font-weight: 600;
  font-size: 14px;
  color: var(--dsb-text);
  white-space: nowrap
}

.dsb-side-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--dsb-border);
  border-radius: 10px;
  padding: 8px 34px 8px 12px;
  background: #fff url('../img/chevron-down.svg') right 10px center/14px no-repeat;
  font-size: 13px;
  font-weight: 400;
  max-width: 100%;
  min-width: 292px;
}

/* Cuando hay más de un convenio/beca calificado, el chip es un <select>
   real: se le quita la flecha nativa (inconsistente entre navegadores y la
   causa de que el ícono se viera pegado o rompiera el layout) para usar la
   misma flecha de ../img/chevron-down.svg que ya trae .dsb-side-chip. */
.dsb-side-chip-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-family: inherit;
  color: var(--dsb-text);
  cursor: pointer
}

.dsb-side-row--subtotal .dsb-side-row-lbl,
.dsb-side-row--subtotal .dsb-side-row-val,
.dsb-side-row--total .dsb-side-row-lbl,
.dsb-side-row--total .dsb-side-row-val {
  font-weight: 700
}

.dsb-side-rule {
  height: 1px;
  background: var(--dsb-border);
  margin: 2px 0
}

.dsb-side-row-big {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px
}

.dsb-side-row-big .dsb-side-cae-cuota-lbl {
  font-size: 14px;
  color: var(--dsb-text)
}

.dsb-side-row-big .dsb-side-cae-cuota {
  font-size: 20px;
  font-weight: 700;
  color: var(--dsb-text)
}

.dsb-side-row-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 700
}

.dsb-side-cae-titulo:empty {
  display: none
}

.dsb-foot {
  padding: 26px 0 40px;
  text-align: center;
  color: var(--dsb-text-muted);
  font-size: 12px
}

.dsb-foot b {
  color: var(--dsb-text)
}

.dsb-foot-sub {
  opacity: .7
}

.dsb-loading {
  position: relative;
  pointer-events: none;
  opacity: .7
}

/* ==================================================================
 * Maqueta 2026 (Figma 1025:31253) · v1.9.0
 * Medidas tomadas del frame: contenedor 1300px, formulario 595px,
 * panel 625px, separación 30px.
 * ================================================================ */
.dsb .dsb-wrap {
  max-width: 1340px
}

/* ---------- cabecera ---------- */
.dsb-intro {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 30px
}

.dsb-intro h1 {
  font-size: clamp(28px, 4vw, 39.09px);
  letter-spacing: -.5864px
}

.dsb-intro>p {
  margin-top: 0;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -.3px
}

.dsb-alert {
  align-items: flex-start;
  margin-top: 0;
  padding: 20px
}

.dsb-alert-ico {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  margin-top: 0
}

.dsb-alert-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: #000
}

.dsb-alert-title {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -.24px
}

.dsb-alert-text {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: normal
}

.dsb-alert-text p {
  margin: 0 0 14px
}

/* «Leer más» (shortcode leer_mas="1"): texto recortado a N líneas. */
.dsb-leer-mas {
  max-height: calc(var(--dsb-leer-lineas, 3) * 1.25em);
  overflow: hidden
}

.dsb-leer-mas.is-cortado {
  -webkit-mask-image: linear-gradient(#000 60%, transparent);
  mask-image: linear-gradient(#000 60%, transparent)
}

.dsb-leer-mas.is-abierto {
  max-height: none
}

.dsb .dsb-leer-mas-btn {
  align-self: flex-start;
  margin-top: -8px;
  padding: 0;
  border: 0;
  background: none;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: #1a1a1a;
  text-decoration: underline;
  cursor: pointer
}

.dsb .dsb-leer-mas-btn[hidden] {
  display: none
}

.dsb-alert-text p:last-child {
  margin-bottom: 0
}

.dsb-alert-text ul {
  margin: 14px 0 14px 21px;
  padding: 0;
  list-style: disc
}

.dsb-alert-text li {
  margin: 0;
  padding: 0
}

/* ---------- columnas ---------- */
.dsb-cols {
  justify-content: flex-start
}

.dsb-form-card {
  flex: 0 1 595px;
  box-shadow: none;
  gap: 40px
}

.dsb-side {
  flex: 0 1 625px;
  width: auto;
  gap: 40px
}

.dsb-sep {
  border: 0;
  border-top: 1px solid #d9d9d9;
  margin: 0;
  width: 100%;
  height: 0
}

.dsb-section {
  gap: 30px
}

.dsb-section-n {
  font-weight: 400;
  font-size: 15.88px
}

.dsb-section-title {
  letter-spacing: -.375px
}

/* Contenido de cada paso: consentimientos (10px entre casillas) y
   luego los campos (16px entre campos), 30px entre bloques. */
.dsb-section[data-tipo="contacto"] .dsb-consent {
  gap: 10px
}

.dsb-section .dsb-grid {
  gap: 16px
}

/* ---------- campos ---------- */
.dsb-field>label {
  margin-bottom: 4px;
  line-height: normal
}

.dsb-req {
  color: inherit;
  margin-left: 0
}

.dsb-field input,
.dsb-field select {
  padding: 10px
}

.dsb-tel-group {
  padding: 0 10px;
  gap: 9.5px
}

.dsb-tel-group select {
  font-family: 'Inter', sans-serif;
  font-size: 13.3px;
  color: #1a1a1a;
  max-width: 76px;
  padding-right: 22px;
  background-size: 17px
}

/* ---------- consentimientos ---------- */
.dsb-consent .dsb-check {
  align-items: center;
  min-height: 42px;
  padding: 10px 14px;
  gap: 10px;
  font-size: 16px;
  letter-spacing: -.24px;
  color: #1e1e1e
}

.dsb-consent .dsb-check input,
.dsb-check input {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin: 0;
  border: 1px solid #000;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  position: relative
}

.dsb-check input:checked {
  background: #1a1a1a;
  border-color: #1a1a1a
}

.dsb-check input:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg)
}

.dsb-check input:focus-visible {
  outline: 2px solid #1a1a1a;
  outline-offset: 2px
}

.dsb-consent .dsb-check span a,
.dsb-consent .dsb-check span u {
  color: inherit;
  text-decoration: underline;
  text-underline-position: from-font
}

/* Sección 1 «Importante»: aviso + consentimientos. */
.dsb-consent-body {
  display: flex;
  flex-direction: column;
  gap: 20px
}

.dsb-consent-aviso {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  background: #fff7e3;
  color: #000
}

.dsb .dsb-consent-aviso-titulo {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -.24px
}

.dsb-consent-aviso-titulo .dsb-alert-ico {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  margin: 0
}

.dsb .dsb-consent-aviso-texto,
.dsb .dsb-consent-aviso-texto p {
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -.21px;
  color: #000
}

.dsb .dsb-consent-aviso-texto p {
  margin: 0 0 21px
}

.dsb .dsb-consent-aviso-texto p:last-child {
  margin-bottom: 0
}

.dsb-consent-aviso .dsb-leer-mas-btn {
  margin-top: -8px
}

.dsb-consent-seccion .dsb-consent .dsb-check,
.dsb-consent-seccion .dsb-consent .dsb-check:hover,
.dsb-consent-seccion .dsb-consent .dsb-check.is-sel {
  border-color: transparent;
  background: none
}

.dsb-consent-seccion .dsb-consent .dsb-check {
  align-items: flex-start;
  min-height: 0;
  padding: 0 14px;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -.21px
}

.dsb-consent-seccion .dsb-consent .dsb-check input {
  margin-top: 3px
}

.dsb-consent-seccion .dsb-consent .dsb-check.dsb-invalid {
  padding: 6px 14px;
  border-color: var(--dsb-bad);
  background: var(--dsb-bad-bg)
}

/* Texto secundario bajo un consentimiento: <span class="dsb-consent-desc">. */
.dsb .dsb-consent-desc {
  display: block;
  font-weight: 400
}

/* Resto del formulario mientras faltan consentimientos obligatorios. */
.dsb-bloqueado {
  opacity: .45;
  pointer-events: none;
  user-select: none
}

.dsb-side-row-msg a {
  color: inherit;
  text-decoration: underline;
  text-underline-position: from-font;
  font-weight: normal;
  font-style: normal;
}

.dsb-check.dsb-invalid {
  border-color: var(--dsb-bad);
  background: var(--dsb-bad-bg)
}

/* ---------- paso 2: subsecciones ---------- */
.dsb-step-preguntas {
  display: flex;
  flex-direction: column;
  gap: 40px
}

.dsb-section[data-tipo="carrera"] .dsb-step-preguntas {
  margin-top: 10px
}

.dsb-subsec {
  display: flex;
  flex-direction: column;
  gap: 16px
}

.dsb-subsec>.dsb-subhead {
  margin: 0;
  line-height: 1.5;
  letter-spacing: -.24px
}

.dsb-subsec>.dsb-grid {
  gap: 30px
}

.dsb-subsec .dsb-section-note {
  margin: 0
}

.dsb-subsec .dsb-section-note-lead {
  font-family: 'Inter', sans-serif;
  line-height: normal;
  color: #000
}

.dsb-subsec .dsb-section-note-lead p {
  margin: 0 0 16px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: normal;
  color: #000
}

.dsb-subsec .dsb-section-note-lead p:last-child {
  margin-bottom: 0
}

/* Nota + buscador de convenios: 12px entre el texto y el campo. */
.dsb-subsec .dsb-section-note+.dsb-q {
  margin-top: -4px
}

/* Aviso de la sección (ej. convenios no acumulables): ancho completo y 12px
   con la nota y con el campo, como la maqueta. */
.dsb-subsec .dsb-section-aviso {
  max-width: none
}

.dsb-subsec .dsb-section-note+.dsb-section-aviso,
.dsb-subsec .dsb-section-aviso+.dsb-q {
  margin-top: -4px
}

.dsb-subsec .dsb-q {
  margin-bottom: 0;
  background: none
}

/* 30px entre las preguntas de una misma subsección (Gratuidad). */
.dsb-subsec .dsb-q+.dsb-q {
  margin-top: 14px
}

.dsb-q-text {
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -.21px;
  color: #000;
  display: block
}

.dsb-q-text .dsb-req {
  display: none /* la maqueta no marca las preguntas; se validan igual */
}

/* Botones de opción (Sí/No en fila, o en lista) */
.dsb-opts--lista {
  flex-direction: column;
  flex-wrap: nowrap
}

.dsb-opts--lista .dsb-opt {
  flex: 0 0 auto;
  width: 100%
}

.dsb-opt,
.dsb-radio {
  min-height: 42px;
  padding: 10px 12px;
  gap: 10px;
  font-size: 14px;
  line-height: normal;
  color: #1e1e1e;
  border-color: var(--dsb-border-lt)
}

.dsb-opt:hover,
.dsb-radio:hover {
  border-color: #999
}

.dsb-opt::before {
  border-color: #000
}

.dsb-opt.is-sel::before,
.dsb-opt.is-sel.no::before {
  border-color: #000;
  background: radial-gradient(circle, #000 0 6px, #fff 6.5px)
}

.dsb-opt.is-sel.no {
  border-color: var(--dsb-accent);
  background: var(--dsb-accent-bg)
}

/* Radios reales (modalidad / sede): mismo dibujo que .dsb-opt. */
.dsb-radio input {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border: 1px solid #000;
  border-radius: 50%;
  background: #fff;
  cursor: pointer
}

.dsb-radio input:checked {
  background: radial-gradient(circle, #000 0 6px, #fff 6.5px)
}

.dsb-radio input:focus-visible {
  outline: 2px solid #1a1a1a;
  outline-offset: 2px
}

.dsb-radio:has(input:checked) {
  border-color: var(--dsb-accent);
  background: var(--dsb-accent-bg)
}

.dsb-radios.dsb-invalid .dsb-radio,
.dsb-q.dsb-invalid .dsb-opt {
  border-color: var(--dsb-bad)
}

.dsb-q.dsb-invalid {
  background: none
}

.dsb-field-modgrupo>label,
.dsb-field-carrera>label {
  margin-bottom: 12px
}

.dsb-field-modgrupo .dsb-radio {
  flex: 1 1 0
}

.dsb-field-carrera>label {
  font-family: 'Inter', sans-serif
}

/* Selector con ícono «?» al lado (tramo del RSH). */
.dsb-select-row {
  position: relative
}

.dsb-select-row>select {
  width: 100%;
  max-width: calc(100% - var(--dsb-tip-gutter));
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: #fff url('../img/chevron-down.svg') right 10px center/18px no-repeat;
  padding-right: 40px;
  cursor: pointer;
  font-family: 'Lato', sans-serif;
  color: #000;
  border-color: #dde2e6
}

.dsb-q[data-tipo="select"] .dsb-field>label {
  margin-bottom: 12px;
  line-height: normal
}

.dsb-tip.dsb-tip-lado {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 23px;
  height: 23px;
  border: 0;
  border-radius: 50%;
  background: url('../img/help-circle.svg') center/cover no-repeat;
  color: transparent;
  margin-top: 0
}

.dsb-tip.dsb-tip-lado:hover::after,
.dsb-tip.dsb-tip-lado:focus::after,
.dsb-tip.dsb-tip-carrera:hover::after,
.dsb-tip.dsb-tip-carrera:focus::after,
.dsb-tip.dsb-tip-checklist:hover::after,
.dsb-tip.dsb-tip-checklist:focus::after {
  left: auto;
  right: 0;
  transform: none;
  color: #fff
}

/* Avisos del flujo (Aviso, Nota, Advertencia, Mensaje, Online). */
.dsb-aviso {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px;
  background: #fff7e3;
  max-width: calc(100% - var(--dsb-tip-gutter))
}

.dsb-subsec .dsb-q.dsb-aviso {
  background: #fff7e3
}

.dsb-aviso .dsb-alert-ico {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin-top: 1px;
  background-image: url('../img/alert-circle-sm.svg')
}

.dsb-aviso-texto {
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -.21px;
  color: #000
}

/* El tema fija `p { font-size: .8125rem }`: sin repetir la tipografía en el
   párrafo, el interlineado queda en 19.5px en vez de los 21px de la maqueta. */
.dsb .dsb-aviso-texto p {
  margin: 0;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -.21px;
  color: #000
}

.dsb-aviso[hidden] {
  display: none
}

/* Gratuidad deshabilitada (carreras Online). */
.dsb-subsec.is-disabled>.dsb-subhead,
.dsb-subsec.is-disabled .dsb-q-text,
.dsb-subsec.is-disabled .dsb-opt {
  color: #a4a4a4
}

.dsb-subsec.is-disabled .dsb-opt {
  pointer-events: none;
  border-color: #ccc;
  background: #fff
}

.dsb-subsec.is-disabled .dsb-opt::before {
  border-color: #ccc
}

/* ---------- convenios: listado con «Ver detalle» ---------- */
.dsb-multicombo-list {
  top: calc(100% + 2px);
  padding: 6px !important;
  gap: 6px;
  max-height: 290px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .1)
}

.dsb-multicombo-opt {
  min-height: 42px;
  padding: 6px 8px 6px 14px;
  border: 1px solid var(--dsb-border-lt);
  border-radius: 6px;
  font-size: 14px;
  color: #1e1e1e;
  gap: 10px
}

.dsb-multicombo-opt>span:nth-child(2) {
  flex: 1 1 auto;
  min-width: 0
}

.dsb-multicombo-opt.is-activo {
  background: #f4f4f4;
  color: #1e1e1e
}

.dsb-multicombo-opt.is-sel {
  border-color: var(--dsb-accent);
  background: var(--dsb-accent-bg)
}

.dsb-multicombo-opt-box {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border: 1px solid #000;
  border-radius: 4px;
  background: #fff
}

.dsb-multicombo-opt.is-sel .dsb-multicombo-opt-box {
  background: #1a1a1a;
  border-color: #1a1a1a
}

.dsb-multicombo-opt.is-sel .dsb-multicombo-opt-box::after,
.dsb-multicombo-opt.is-activo.is-sel .dsb-multicombo-opt-box::after {
  left: 5px;
  top: 1px;
  border-color: #fff
}

.dsb-ver-detalle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 0;
  border-radius: 20px;
  background: #666;
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: -.18px;
  white-space: nowrap;
  cursor: pointer
}

.dsb-ver-detalle:hover {
  background: #1a1a1a
}

/* Resumen del descuento al pasar el mouse por «Ver detalle» (lo posiciona
   el JS: el listado tiene scroll y recortaría un ::after). */
.dsb-resumen-tip {
  position: fixed;
  z-index: 100000;
  max-width: 260px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--dsb-text);
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: -.18px;
  box-shadow: var(--dsb-shadow);
  white-space: pre-line;
  pointer-events: none
}

.dsb-resumen-tip[hidden] {
  display: none
}

.dsb-ver-detalle-ico {
  width: 16px;
  height: 16px;
  background: url('../img/info.svg') center/14.33px no-repeat
}

/* ---------- botón ---------- */
.dsb-btn-primary.dsb-submit {
  min-width: 252px;
  height: 44px;
  padding: 0 20px;
  line-height: 1.5;
  letter-spacing: -.24px;
  color: #1a1a1a
}

/* ---------- panel lateral ---------- */
.dsb-side-head {
  display: flex;
  flex-direction: column;
  gap: 18px
}

.dsb-side-title {
  line-height: 1.2;
  letter-spacing: -.375px
}

.dsb-link-ext {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  color: #1a1a1a;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -.24px;
  text-decoration: underline;
  text-underline-position: from-font
}

.dsb-link-ext::after {
  content: "";
  flex: 0 0 17.11px;
  width: 17.11px;
  height: 17.11px;
  background: url('../img/open-new-window.svg') center/14.06px no-repeat
}

.dsb-side-ficha::after {
  width: 17.11px;
  height: 17.11px;
  background: url('../img/open-new-window.svg') center/14.06px no-repeat
}

.dsb-link-ext:hover {
  color: #000
}

.dsb-side-box {
  background: var(--dsb-panel-bg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 34px
}

.dsb-side-arancel {
  display: flex;
  flex-direction: column;
  gap: 26px
}

.dsb-side-card-title {
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -.3px
}

.dsb-side-rows {
  gap: 16px
}

.dsb-side-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 12px;
  row-gap: 4px;
  align-items: start
}

.dsb-side-row-lbl,
.dsb-side-row-val {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -.24px;
  color: #1a1a1a
}

.dsb-side-row--selector {
  align-items: center
}

.dsb-side-row-msg {
  grid-column: 1 / 2;
  display: flex;
  gap: 6px;
  align-items: flex-start;
  max-width: 413px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -.21px;
  color: #1a1a1a
}

.dsb-side-row-ico {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  background: url('../img/check-circle-green.svg') center/15px no-repeat
}

.dsb-side-row-msg.is-bad .dsb-side-row-ico {
  background-image: url('../img/x-circle-red.svg');
  background-size: 15px
}

.dsb-side-rule {
  height: 1px;
  background: #1a1a1a;
  margin: 0
}

.dsb-side-chip {
  min-width: 0;
  max-width: 100%;
  width: auto;
  padding: 6px 36px 6px 8px;
  border-radius: 6px;
  border-color: #999;
  font-family: 'Inter', sans-serif;
  font-size: 13.3px;
  font-weight: 400;
  color: #1a1a1a;
  background-position: right 8px center;
  background-size: 17px
}

.dsb-side-infos {
  display: flex;
  flex-direction: column;
  gap: 16px
}

.dsb-side-infos[hidden],
.dsb-side-cae-box[hidden] {
  display: none
}

.dsb-info-box {
  background: #fff7e3;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #000
}

.dsb-info-box-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -.21px
}

.dsb-info-box-ico {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  background: url('../img/alert-circle-sm.svg') center/contain no-repeat
}

.dsb-info-box-text {
  padding-left: 30px;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -.21px
}

.dsb-info-box-text p {
  margin: 0 0 21px
}

.dsb-info-box-text p:last-child {
  margin-bottom: 0
}

.dsb-info-box-text a,
.dsb-side-cae-box a {
  color: inherit;
  text-decoration: underline;
  text-underline-position: from-font
}

.dsb-side-cae-box {
  background: var(--dsb-panel-bg);
  padding: 20px;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -.21px;
  color: #1a1a1a
}

/* ---------- modal (términos, detalle de convenio) ---------- */
.dsb-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px
}

.dsb.dsb-modal-portal {
  margin: 0;
  padding: 0;
  min-height: 0;
  background: none
}

.dsb-modal[hidden] {
  display: none
}

.dsb-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 26, .45)
}

.dsb-modal-box {
  position: relative;
  width: 699px;
  max-width: 100%;
  max-height: min(560px, calc(100vh - 32px));
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .1);
  padding: 44px 16px 24px 30px;
  outline: none
}

.dsb-modal-x {
  position: absolute;
  top: 12px;
  right: 16px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: url('../img/close.svg') center/12px no-repeat;
  cursor: pointer
}

.dsb-modal-scroll {
  overflow-y: auto;
  padding-right: 14px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  scrollbar-width: thin;
  scrollbar-color: #b0b0b0 transparent
}

.dsb-modal-scroll::-webkit-scrollbar {
  width: 10px
}

.dsb-modal-scroll::-webkit-scrollbar-thumb {
  background: #b0b0b0;
  border-radius: 30px
}

.dsb-modal-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.3px;
  color: #1a1a1a
}

.dsb-modal-body {
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -.24px;
  color: #1a1a1a
}

.dsb-modal-body p {
  margin: 0 0 24px
}

.dsb-modal-body p:last-child {
  margin-bottom: 0
}

/* Tratamiento de datos personales / términos (Figma 1036:7612). */
.dsb-modal--legal .dsb-modal-box {
  max-height: min(888px, calc(100vh - 32px))
}

.dsb-modal--legal .dsb-modal-body,
.dsb .dsb-modal--legal .dsb-modal-body p,
.dsb .dsb-modal--legal .dsb-modal-body li,
.dsb .dsb-modal--legal .dsb-modal-body h3 {
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -.21px;
  color: #1a1a1a
}

.dsb .dsb-modal--legal .dsb-modal-body p,
.dsb .dsb-modal--legal .dsb-modal-body ul {
  margin: 0 0 21px
}

.dsb .dsb-modal--legal .dsb-modal-body h3 {
  margin: 0 0 21px;
  padding-left: 14px;
  font-weight: 700
}

.dsb .dsb-modal--legal .dsb-modal-body ul {
  padding-left: 21px;
  list-style: disc
}

.dsb .dsb-modal--legal .dsb-modal-body li {
  margin: 0;
  padding: 0
}

.dsb .dsb-modal--legal .dsb-modal-body a {
  color: inherit;
  text-decoration: underline
}

.dsb .dsb-modal--legal .dsb-modal-body > :last-child {
  margin-bottom: 0
}

.dsb-detalle-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px
}

.dsb-detalle-tabla th,
.dsb-detalle-tabla td {
  text-align: left;
  vertical-align: top;
  padding: 10px 8px;
  border-bottom: 1px solid #e5e5e5
}

.dsb-detalle-tabla th {
  width: 42%;
  font-weight: 700
}

.dsb-detalle-tabla tr:last-child th,
.dsb-detalle-tabla tr:last-child td {
  border-bottom: 0
}

html.dsb-modal-abierto {
  overflow: hidden
}

@media(max-width:900px) {
  .dsb-cols {
    flex-direction: column;
    align-items: stretch
  }

  .dsb-form-card,
  .dsb-side {
    flex: 1 1 auto;
    width: 100%
  }

  .dsb-side {
    position: static
  }
}

@media(max-width:640px) {
  .dsb-grid {
    grid-template-columns: 1fr
  }

  .dsb-form-card,
  .dsb-side {
    padding: 20px
  }

  .dsb-side-box,
  .dsb-side-cae-box {
    padding: 16px
  }

  .dsb-modal-box {
    padding: 44px 10px 20px 20px
  }

  .dsb-multicombo-opt {
    flex-wrap: wrap
  }

  .dsb-btn-primary.dsb-submit {
    width: 100%;
    min-width: 0
  }

  .dsb-wrap {
    padding-left: 16px;
    padding-right: 16px
  }
}

@media print {

  .dsb-topbar,
  .dsb-volver,
  .dsb-form-actions {
    display: none !important
  }

  .dsb-cols {
    display: block
  }

  .dsb-side {
    position: static
  }

  .dsb-form-card {
    box-shadow: none
  }

  .dsb {
    background: #fff
  }
}
/* Ajustes finos maqueta 2026 */
.dsb .dsb-info-box-text a,
.dsb .dsb-side-cae-box a,
.dsb .dsb-aviso-texto a {
  font-weight: inherit;
  font-style: normal;
  color: inherit
}

.dsb-q .dsb-field>label .dsb-req {
  display: none
}

.dsb-side-row--selector .dsb-side-row-lbl {
  align-items: flex-start
}

/* Resultado sin Gratuidad (Figma 918:14480) */
.dsb-side-resultados {
  display: flex;
  flex-direction: column;
  gap: 20px
}

.dsb-side-row--selector {
  align-items: center
}

.dsb-side-row--selector .dsb-side-row-val {
  align-self: center
}

.dsb-side-chip,
.dsb-side-chip-select {
  width: 292px;
  max-width: 100%;
  height: 38px;
  padding: 0 38px 0 10px;
  border: 1px solid #a4a4a4;
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: normal;
  color: #000;
  background: #fff url('../img/chevron-down.svg') right 10px center/18px no-repeat
}

.dsb-side-row-msg {
  max-width: 437px
}

.dsb-side-row-msg.is-bad .dsb-side-row-ico {
  margin-top: 2px;
  background-size: 18px
}

.dsb-side-cae-box {
  font-size: 16px;
  letter-spacing: -.24px;
  color: #000
}

/* Listado de convenios (Figma 273:3239): opciones con 14px de margen interno
   a ambos lados y barra de desplazamiento en su propia columna gris,
   separada de las opciones y del borde del listado. */
.dsb .dsb-multicombo-list {
  padding: 6px 0 6px 6px !important;
  scrollbar-gutter: stable
}

/* .dsb li reinicia el padding con más especificidad: se fija aquí. */
.dsb .dsb-multicombo-opt {
  padding: 10px 14px;
  margin: 0 6px 0 0
}


.dsb .dsb-multicombo-list {
  scrollbar-width: auto;
  scrollbar-color: auto
}

.dsb-multicombo-list::-webkit-scrollbar {
  width: 14px
}

.dsb-multicombo-list::-webkit-scrollbar-track {
  background: linear-gradient(#f1f1f1, #f1f1f1) center / 8px 100% no-repeat;
  margin: 6px 0
}

.dsb-multicombo-list::-webkit-scrollbar-thumb {
  background: #b0b0b0;
  background-clip: padding-box;
  border: 3px solid transparent;
  border-radius: 30px
}

/* Mismo problema de especificidad (.dsb li) en el buscador de carrera. */
.dsb .dsb-combo-opt,
.dsb .dsb-combo-empty {
  padding: 9px 12px
}

/* Firefox no soporta ::-webkit-scrollbar (en Chrome, declarar
   scrollbar-color desactivaría el estilo de arriba). */
@-moz-document url-prefix() {
  .dsb .dsb-multicombo-list {
    scrollbar-width: thin;
    scrollbar-color: #b0b0b0 #f1f1f1
  }
}