/* ══ TEC-S · Módulo de Inscripción Transaccional ══
   Requiere los tokens :root de styles.css (--navy, --teal, --gold, etc.).
   Antes inscripcion.html era una landing page completa (hero + navbar +
   vitrina + oferta + footer) con el wizard real hasta el final -- obligaba a
   scrollear mucho antes de llegar al formulario. Este archivo reemplaza esa
   ambientación por un shell "cero scroll" tipo checkout (mismo lenguaje
   visual que assets/css/pagar.css: página oscura centrada + tarjeta blanca),
   dejando el wizard de 4 pasos (.form-progress/.form-step, ya en styles.css)
   intacto en su interior. */

html, body { height: 100%; }
body { overflow: hidden; } /* el scroll vive DENTRO de la tarjeta, no en la página */

.insc-page {
  position: relative;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 16px;
  background:
    radial-gradient(900px 520px at 88% -12%, rgba(42,191,191,0.22), transparent 62%),
    radial-gradient(720px 460px at -12% 112%, rgba(255,200,61,0.12), transparent 58%),
    linear-gradient(168deg, #0a1440 0%, var(--navy-mid, #152060) 42%, #1a3070 100%);
  overflow: hidden;
}
.insc-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, black 30%, transparent 75%);
  pointer-events: none;
}

.insc-back {
  position: relative;
  align-self: center;
  color: rgba(255,255,255,0.65);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 8px;
  transition: color 0.2s, background 0.2s;
  flex: none;
}
.insc-back:hover { color: #fff; background: rgba(255,255,255,0.08); }

.insc-card {
  position: relative;
  width: 100%;
  max-width: 720px;
  max-height: calc(100vh - 76px);
  max-height: calc(100dvh - 76px);
  display: flex;
  flex-direction: column;
  animation: insc-card-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes insc-card-rise {
  from { opacity: 0; transform: translateY(22px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.insc-head {
  position: relative;
  flex: none;
  background:
    radial-gradient(420px 200px at 110% -40%, rgba(42,191,191,0.35), transparent 70%),
    linear-gradient(150deg, #0a1440, var(--navy) 70%);
  padding: 20px 32px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-radius: 24px 24px 0 0;
}
.insc-head::after {
  content: "";
  position: absolute;
  left: 32px; right: 32px; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(42,191,191,0.7), transparent);
}
.insc-head img { height: 32px; width: auto; filter: brightness(0) invert(1); flex: none; }
.insc-head-text { display: flex; flex-direction: column; gap: 2px; }
.insc-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--teal);
}
.insc-eyebrow::before { content: ""; width: 16px; height: 2px; background: var(--gold); border-radius: 2px; }
.insc-head h1 {
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem;
  color: #fff; line-height: 1.2;
}

/* La tarjeta entera nunca crece más que el viewport (max-height arriba); el
   scroll -- si un paso puntual tiene más contenido del que entra (ej. Datos
   Personales de un menor de edad, con los campos del representante) -- pasa
   a vivir aquí adentro, nunca en la página. */
.insc-card .form-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }
.insc-card .form-progress { flex: none; }

/* ── Breadcrumb de flujo (bajo el stepper) ── */
.insc-flow {
  flex: none;
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  padding: 9px 20px;
  background: var(--gray-100, #f4f6fb);
  border-bottom: 1px solid #e7ebf3;
  font-size: 0.78rem;
}
.insc-flow[hidden] { display: none; }
.insc-flow .flow-seg {
  /* inline-block y no inline: con display:inline el text-overflow nunca se
     aplicaba, así que un nombre largo desbordaba en vez de truncar */
  display: inline-block; vertical-align: middle;
  font-weight: 700; color: var(--navy, #0D1B4B);
  background: #fff; border: 1px solid #e2e7f0;
  padding: 3px 11px; border-radius: 999px;
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.insc-flow .flow-sep { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--teal, #2ABFBF); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* Segmento de horario en dos líneas: días abreviados arriba, hora abajo. */
.insc-flow .flow-seg--time { display: inline-flex; flex-direction: column; align-items: center; gap: 0; line-height: 1.1; padding: 3px 11px; }
.insc-flow .flow-seg--time b { font-size: 0.64rem; font-weight: 800; letter-spacing: 0.1em; color: var(--teal-dark, #1a9a9a); }
.insc-flow .flow-seg--time span { font-weight: 700; }

/* ── Íconos SVG del Paso 3 (tarjetas de horario) ── */
.sch-ic { width: 15px; height: 15px; flex: none; vertical-align: -3px; margin-right: 5px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sch-ic--ok { stroke: var(--teal-dark, #1a9a9a); }
.sch-ic--full { stroke: #c0392b; }

/* ── Íconos SVG del resumen (Paso 4) ── */
.summary-card .sum-lbl { display: inline-flex; align-items: center; gap: 7px; }
.sum-ic { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--teal-dark, #1a9a9a); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.summary-card .summary-note { display: flex; align-items: flex-start; gap: 8px; }
.summary-card .summary-note .sum-ic--note { stroke: var(--gold-text, #9a5a00); margin-top: 1px; }

/* Total a pagar: azul TEC-S (navy), más grande y contundente. */
.summary-card .summary-total-amount { color: var(--navy, #0D1B4B); font-size: 1.5rem; font-weight: 900; letter-spacing: -0.01em; }

/* ── Paso 4 · Resumen + método fusionados ── */
/* Cupón: botón compacto (ancho al contenido, alineado a la izquierda) que
   despliega el campo al tocarlo -- no una barra a todo lo ancho. */
.coupon-acc { margin-top: 18px; }
.coupon-acc > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  border: 1.5px solid var(--gray-200, #e8ecf4); border-radius: 999px;
  background: #fff; color: var(--navy, #0D1B4B);
  font-weight: 700; font-size: 0.85rem;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.coupon-acc > summary:hover { border-color: var(--teal, #2ABFBF); background: #f6fdfd; }
.coupon-acc > summary::-webkit-details-marker { display: none; }
.coupon-acc > summary .coupon-ic { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--teal-dark, #1a9a9a); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.coupon-acc[open] > summary { border-color: var(--teal, #2ABFBF); color: var(--teal-dark, #1a9a9a); margin-bottom: 12px; }
.coupon-acc-body { padding: 0; }
.coupon-acc-body input {
  width: 100%; max-width: 240px;
  padding: 11px 14px; border: 1.5px solid var(--gray-200, #e8ecf4); border-radius: 10px;
  font-family: var(--font-main, 'Inter', sans-serif); font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.04em;
}
.coupon-acc-body input:focus { outline: none; border-color: var(--teal, #2ABFBF); box-shadow: 0 0 0 3px rgba(42,191,191,0.15); }
.coupon-acc-body #public-coupon-result { margin-top: 8px; font-size: 0.88rem; }

/* Bloque de método de pago dentro del resumen. */
.pay-choose { margin-top: 22px; }
.pay-choose-label { display: block; font-size: 1rem; color: var(--navy, #0D1B4B); font-weight: 700; margin-bottom: 12px; }
.pay-choose #pay-method-notice { margin-bottom: 10px; }
/* Métodos compactos: 3 tiles con el ícono centrado arriba y el nombre debajo. */
.pay-choose .pay-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pay-choose .pay-method { position: relative; flex-direction: column; align-items: center; text-align: center; gap: 9px; padding: 16px 10px; }
.pay-choose .pay-method .pm-text { flex: none; }
.pay-choose .pay-method .pm-text strong { font-size: 0.9rem; }
.pay-choose .pay-method .pm-soon { position: absolute; top: 7px; right: 7px; padding: 2px 7px; font-size: 0.6rem; }
@media (max-width: 420px) {
  .pay-choose .pay-methods { gap: 8px; }
  .pay-choose .pay-method { padding: 13px 6px; }
  .pay-choose .pay-method .pm-text strong { font-size: 0.82rem; }
}

/* ── Paso 1: tarjetas de modalidad en cascada ──
   Aparecen al elegir el curso (renderModalityCards en main.js). Diseño premium
   compacto: cada tarjeta es un radio-button real (accesible), con estado
   seleccionado (anillo teal + check) que habilita el botón Continuar. */
.modality-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin: 22px 0 4px;
}
.modality-cards[hidden] { display: none; }
.modality-cards--single { grid-template-columns: minmax(240px, 360px); justify-content: center; }

/* ══ Híbrido: CLARA + acento por defecto → DEGRADADO inmersivo al seleccionar ══
   Estado base (Concept C): blanca, barra de acento lateral en degradado por
   intensidad, halo de color en la esquina, micro-barra de intensidad, precio
   navy con subrayado dorado. Estado .selected (Concept B): la tarjeta entera
   se vuelve un degradado a todo color con texto blanco y precio dorado. */
.mod-card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  width: 100%;
  padding: 16px 18px 16px 20px;
  border-radius: 18px;
  border: 1px solid #eef1f7;
  background: #fff;
  cursor: pointer;
  font-family: var(--font-main);
  box-shadow: 0 2px 4px rgba(13,27,75,0.05), 0 14px 30px -18px rgba(13,27,75,0.3);
  transition: transform 0.24s var(--ease, cubic-bezier(0.4,0,0.2,1)), box-shadow 0.24s ease, border-color 0.24s ease, background 0.3s ease;
  /* animación de cascada (stagger por nth-child) */
  opacity: 0;
  transform: translateY(12px);
  animation: mod-card-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.mod-card:nth-child(1) { animation-delay: 0.02s; }
.mod-card:nth-child(2) { animation-delay: 0.08s; }
.mod-card:nth-child(3) { animation-delay: 0.14s; }
.mod-card:nth-child(4) { animation-delay: 0.20s; }
.mod-card:nth-child(5) { animation-delay: 0.26s; }
.mod-card:nth-child(6) { animation-delay: 0.32s; }
@keyframes mod-card-in {
  to { opacity: 1; transform: translateY(0); }
}
.mod-card:hover { transform: translateY(-3px); box-shadow: 0 4px 8px rgba(13,27,75,0.06), 0 20px 40px -18px rgba(13,27,75,0.42); }
.mod-card:focus-visible { outline: 3px solid var(--gold-text, #9a5a00); outline-offset: 2px; }

/* Barra de acento lateral (degradado por intensidad) */
.mod-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: linear-gradient(var(--teal, #2ABFBF), var(--teal-dark, #1a9a9a));
  transition: opacity 0.3s ease;
}
.mod-card[data-tier="2"]::before { background: linear-gradient(#5b8cff, #1f3fa8); }
.mod-card[data-tier="3"]::before { background: linear-gradient(var(--gold, #FFC83D), #ff9d2e); }
/* Halo de color en la esquina superior derecha */
.mod-card::after {
  content: ""; position: absolute; right: -40px; top: -40px; width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle, rgba(42,191,191,0.16), transparent 70%);
  pointer-events: none; transition: opacity 0.3s ease, background 0.3s ease;
}
.mod-card[data-tier="3"]::after { background: radial-gradient(circle, rgba(255,168,61,0.2), transparent 70%); }

/* Tile claro con ícono en trazo de color (según intensidad). Fondo con leve
   gradiente + brillo interior para que no se vea plano. */
.mod-card-tile {
  flex: none;
  width: 48px; height: 48px;
  border-radius: 14px;
  display: grid; place-items: center;
  background: linear-gradient(155deg, #ffffff, #eef1f7);
  border: 1px solid #e7ebf3;
  box-shadow: inset 0 1px 0 #fff, 0 3px 7px -3px rgba(13,27,75,0.14);
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.24s ease;
}
.mod-card-tile svg {
  width: 25px; height: 25px; fill: none;
  stroke: var(--teal-dark, #1a9a9a); color: var(--teal-dark, #1a9a9a);
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke 0.3s ease;
}
.mod-card[data-tier="2"] .mod-card-tile svg { stroke: #1f3fa8; color: #1f3fa8; }
.mod-card[data-tier="3"] .mod-card-tile svg { stroke: #cf7d08; color: #cf7d08; }
.mod-card:hover .mod-card-tile { transform: scale(1.04); }

.mod-card-body { display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; flex: 1; }
.mod-card-name {
  font-family: var(--font-display); font-weight: 800; color: var(--navy);
  font-size: 1.02rem; line-height: 1.15; transition: color 0.3s ease;
}
/* Micro-barra de intensidad (solo estado claro) */
.mod-card-bar { height: 5px; width: 64px; max-width: 100%; border-radius: 99px; background: #e9edf5; overflow: hidden; margin: 7px 0 6px; transition: opacity 0.25s ease; }
.mod-card-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--teal, #2ABFBF), var(--teal-dark, #1a9a9a)); }
.mod-card[data-tier="2"] .mod-card-bar i { background: linear-gradient(90deg, #5b8cff, #1f3fa8); }
.mod-card[data-tier="3"] .mod-card-bar i { background: linear-gradient(90deg, var(--gold, #FFC83D), #ff9d2e); }
.mod-card-meta { font-size: 0.78rem; color: var(--gray-400); font-weight: 500; transition: color 0.3s ease; }
.mod-card-price { display: flex; flex-direction: column; align-items: flex-end; flex: none; line-height: 1.05; white-space: nowrap; }
.mod-card-price b { font-family: var(--font-display); font-weight: 900; font-size: 1.28rem; color: var(--navy); transition: color 0.3s ease; }
.mod-card-price b::after { content: ""; display: block; height: 3px; width: 70%; margin: 2px 0 0 auto; border-radius: 9px; background: var(--gold, #FFC83D); transition: opacity 0.3s ease; }
.mod-card-price small { font-size: 0.7rem; color: var(--gray-400); font-weight: 600; transition: color 0.3s ease; }

/* El check va en FLUJO (último ítem): reserva su espacio, nunca tapa el precio. */
.mod-card-check {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Seleccionada: la tarjeta se queda CLARA (como te gusta) y gana un anillo
   fino + resplandor de color por intensidad. El tile NO se rellena: se queda
   claro con su ícono de color, igual que en estado normal. La selección se
   comunica con el anillo, el resplandor y el check. ── */
.mod-card.selected {
  border-color: transparent;
  background: #f6fdfd;
  box-shadow: 0 0 0 1.5px var(--teal), 0 18px 38px -20px rgba(42,191,191,0.42);
  transform: translateY(-2px);
}
.mod-card[data-tier="2"].selected { border-color: transparent; background: #f5f8ff; box-shadow: 0 0 0 1.5px #2450c8, 0 18px 38px -20px rgba(37,80,200,0.4); }
.mod-card[data-tier="3"].selected { border-color: transparent; background: #fffaf0; box-shadow: 0 0 0 1.5px #f0a921, 0 18px 40px -20px rgba(255,168,61,0.44); }
.mod-card.selected .mod-card-check { opacity: 1; transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  .mod-card { animation: none; opacity: 1; transform: none; }
  .mod-card:hover { transform: none; }
}

@media (max-width: 480px) {
  /* El breadcrumb envuelve por debajo de ~420px y solo dejaba 6px entre
     filas: las píldoras quedaban pegadas unas sobre otras. Se separa el
     salto de línea sin tocar la separación horizontal. */
  .insc-flow { column-gap: 6px; row-gap: 11px; align-items: center; padding: 10px 14px 12px; }
  .insc-page { padding: 12px 10px; gap: 6px; }
  .insc-card { max-height: calc(100vh - 54px); max-height: calc(100dvh - 54px); }
  .insc-head { padding: 16px 20px 14px; }
  .insc-head img { height: 26px; }
  .insc-head h1 { font-size: 0.95rem; }
  .insc-back { font-size: 0.8rem; padding: 4px 8px; }
  /* En móvil las tarjetas de modalidad van en rejilla de 2 columnas y cambian
     de fila horizontal a tarjeta vertical (ícono arriba, nombre, meta y precio
     apilados). Inglés tiene 5 modalidades activas: pasa de 5 filas altas a 3
     filas cortas, que era el motivo del scroll interminable en el paso 1.
     La quinta queda a media fila; se deja así a propósito, ensancharla la
     devolvería al formato horizontal. */
  .modality-cards { grid-template-columns: repeat(2, 1fr); gap: 10px; justify-content: stretch; }
  /* si solo hay una modalidad (p.ej. Portugués) no tiene sentido media fila */
  .modality-cards--single { grid-template-columns: 1fr; justify-content: stretch; }

  .mod-card {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 9px;
    padding: 14px 13px 14px 16px;
  }
  .mod-card-tile { width: 38px; height: 38px; border-radius: 11px; }
  .mod-card-tile svg { width: 20px; height: 20px; }
  .mod-card-body { flex: none; width: 100%; }
  .mod-card-name { font-size: 0.92rem; }
  .mod-card-bar { margin: 6px 0 5px; }
  .mod-card-meta { font-size: 0.72rem; line-height: 1.35; }
  /* el precio deja de ir a la derecha: pasa a ser el pie de la tarjeta */
  .mod-card-price {
    flex-direction: row;
    align-items: baseline;
    align-self: flex-start;
    gap: 3px;
    margin-top: auto;
  }
  .mod-card-price b { font-size: 1.1rem; }
  .mod-card-price b::after { display: none; }
  .mod-card-price small { font-size: 0.66rem; }
  /* el check sale del flujo y se ancla a la esquina: en vertical ocuparía
     una línea entera para nada */
  .mod-card-check { position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; font-size: 0.72rem; }
  /* el halo de la esquina se encogía sobre una tarjeta la mitad de ancha */
  .mod-card::after { right: -30px; top: -30px; width: 90px; height: 90px; }
}
/* Pantallas muy estrechas: 2 columnas siguen entrando, pero se aprieta todo
   un punto más para que el nombre de la modalidad no se parta en 4 líneas. */
@media (max-width: 360px) {
  .modality-cards { gap: 8px; }
  .mod-card { padding: 12px 11px 12px 14px; gap: 8px; }
  .mod-card-name { font-size: 0.86rem; }
  .mod-card-price b { font-size: 1rem; }
}
/* ══ Elección de plan de pago (solo bootcamps: pago completo o 2×50 %) ══
   Vive dentro de la tarjeta de resumen del paso 4; se oculta por completo en
   los programas que no admiten dividir el pago. */
.pay-plan-choice { margin-top: 18px; }
.pay-plan-choice[hidden] { display: none; }
.pay-plan-title {
  display: block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--gray-400); margin-bottom: 10px;
}
.pay-plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pay-plan {
  position: relative; text-align: left; cursor: pointer; font-family: var(--font-main);
  border: 1px solid #eef1f7; border-radius: 14px; padding: 13px 14px; background: #fff;
  box-shadow: 0 2px 4px rgba(13, 27, 75, 0.05);
  transition: box-shadow 0.24s ease, border-color 0.24s ease, background 0.24s ease;
}
.pay-plan:hover { border-color: #cfe6e6; }
.pay-plan:focus-visible { outline: 3px solid var(--gold-text, #9a5a00); outline-offset: 2px; }
.pay-plan.selected {
  border-color: transparent; background: #f6fdfd;
  box-shadow: 0 0 0 1.5px var(--teal, #2ABFBF), 0 14px 30px -20px rgba(42, 191, 191, 0.45);
}
.pay-plan-name { display: block; font-weight: 800; font-size: 0.82rem; color: var(--navy); }
.pay-plan-price {
  display: block; font-family: var(--font-display); font-weight: 900;
  font-size: 1.25rem; line-height: 1.1; color: var(--navy); margin: 4px 0 3px;
}
.pay-plan-note { display: block; font-size: 0.7rem; line-height: 1.35; color: var(--gray-400); }
@media (max-width: 480px) {
  .pay-plan-grid { grid-template-columns: 1fr; }
}

@media (max-height: 700px) {
  .insc-head { padding: 14px 28px 12px; }
  .insc-head img { height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .insc-card { animation: none; }
}

/* ══ Soporte ══
   Enlace de texto discreto al pie de la tarjeta, con el mismo tono que el de
   pagar.html. Antes era un botón flotante que en móvil tapaba el formulario. */
.insc-support {
  position: relative;
  flex: none;
  margin: 0;
  padding: 4px 10px 0;
  text-align: center;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.62);
}
.insc-support a {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.insc-support a:hover { color: var(--teal, #2ABFBF); }
.insc-support a:focus-visible { outline: 3px solid var(--gold-text, #9a5a00); outline-offset: 3px; border-radius: 4px; }

/* fila del monto en Pago Móvil: el importe y su botón de copiar */
.pm-amount-row { display: inline-flex; align-items: center; gap: 8px; }

/* ══ Modal del contrato ══
   No tenía ni una regla CSS: dependía por completo de estilos en línea, sin
   nada específico para móvil. Estas reglas le ponen suelo: la tarjeta nunca
   toca los bordes, si crece se hace scroll vertical (nunca lateral) y el texto
   parte palabras largas en vez de desbordar. */
#modal-manual {
  padding: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
#modal-manual > .modal {
  width: 100%;
  max-width: 600px;
  margin: auto;   /* si la tarjeta es más alta que la pantalla, se centra y scrollea */
}
#modal-manual-content { overflow-wrap: anywhere; }
#modal-manual .modal-header h3 { font-size: 1.02rem; line-height: 1.25; }

@media (max-width: 520px) {
  #modal-manual { padding: 10px; }
  #modal-manual > .modal { padding: 18px 16px; max-height: 88vh; max-height: 88dvh; }
  #modal-manual-content { font-size: 0.88rem; }
  #modal-manual .modal-header h3 { font-size: 0.92rem; }
  /* el pie en columna: la etiqueta y el botón no caben en una línea a 360px */
  #modal-manual .modal-footer {
    flex-direction: column; align-items: stretch !important; gap: 12px;
  }
  #modal-manual .modal-footer .btn { width: 100%; }
}