/**
 * Módulo Becas — 27 ago 2026.
 *
 * FONDO BLANCO, como Embajadas. No es una copia por comodidad: las dos
 * pantallas hacen lo mismo —listas largas que se leen, no cifras que se
 * miran— y el oscuro de Divisas está pensado para lo contrario.
 *
 * EL VIOLETA SALE DEL ICONO QUE ENVIÓ FIDEL. Píxeles leídos del propio PNG:
 * la tinta del libro es #7e44fb y su extremo oscuro #622eef. Se usa el oscuro
 * para texto (6,6:1 sobre blanco) y el vivo para rellenos. No se retoca, no se
 * recolorea: es la marca que él mandó.
 *
 * PRINCIPIO VISUAL, el mismo que dictó para Divisas: limpio, ligero e
 * intuitivo. 3 oct 2026: la tarjeta enseña lo que decide —título, país y
 * tipo, cuándo cierra, si admite cubanos y el enlace oficial—. El resto
 * vive bajo «Más detalles». Una convocatoria tiene treinta campos;
 * volcarlos en la lista es cómo se consigue que no se lea ninguno.
 */

[hidden] {
  display: none !important;
}

body[data-page="becas"] {
  --bec-violeta: #7e44fb;
  --bec-violeta-hondo: #622eef;
  --bec-violeta-suave: #f2edff;
  --bec-tinta: #12161c;
  --bec-tinta-suave: #5b6470;
  --bec-linea: #e7e9ee;
  --bec-fondo-suave: #f6f7f9;

  /* Los cuatro estados. El ámbar es el único que grita, y grita poco: el
     módulo tiene que poder enseñar una lista de cerradas sin parecer un
     tablero de averías. */
  --bec-abierta: #1f7a4d;
  --bec-abierta-f: #e6f5ee;
  --bec-pronto: #a35700;
  --bec-pronto-f: #fdf0dd;
  --bec-proxima: #35507d;
  --bec-proxima-f: #eaf0fb;
  --bec-cerrada: #6b7280;
  --bec-cerrada-f: #f1f2f4;
}

.card-moment--becas {
  position: relative;
  overflow: hidden;
  margin-bottom: 0.85rem;
  background: #ffffff;
  border: 1px solid var(--bec-linea);
  box-shadow: 0 10px 28px rgba(18, 22, 28, 0.06);
}

/* 28 ago 2026 · Pedido de Fidel: «el logo es pequeño, hay que agrandarlo».
   Embajadas lo tiene a 2,5 rem; aquí sube a 3,5 —un 40 % más—.

   SE AGRANDA EL BOTÓN, NO LA IMAGEN, y esto costó un intento: `hub.css` dice
   `.module-info-trigger .card-moment__seal { width: 100%; height: 100% }`, o
   sea que el sello mide lo que mida su botón. Poniéndole el ancho a la imagen,
   el botón seguía en 2,5 rem, el flex la encogía a lo ancho y la altura sí
   crecía: el libro salía ESTIRADO, 40 px de ancho por 56 de alto. Medido, no
   visto de reojo.

   Al crecer el sello baja también la etiqueta «¿Qué hace?» que cuelga debajo,
   así que los huecos del título y del subtítulo se remidieron con el arnés y
   se ajustan aquí al lado. Tocar solo el tamaño parte el subtítulo. */
.card-moment--becas .module-info-trigger--seal {
  width: 3.5rem;
  height: 3.5rem;
}

/* ═══ Cabecera del módulo ═══════════════════════════════════════════════ */

.bec-hero {
  margin: 0 0 0.9rem;
}

.bec-hero__t {
  margin: 0 0 0.25rem;
  /* Hueco del sello, que vive en la esquina (top .75rem, 2,5rem de lado). */
  padding-right: 3rem;
  font-family: var(--font-headline);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--bec-tinta);
}

.bec-hero__sub {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 300;
  line-height: 1.45;
  color: var(--bec-tinta-suave);
}

/* La etiqueta «¿Qué hace?» cuelga bajo el sello y pisaría la PRIMERA línea de
   este párrafo. Embajadas lo resolvió con `padding-right: 5.2rem`, que
   estrecha las CINCO líneas y deja el subtítulo en una columna de la mitad de
   ancho. Aquí se aparta solo lo que estorba: un flotante del tamaño exacto de
   la etiqueta —medido con el arnés: llega hasta x=307 y, con el sello ya a
   3,5 rem, acaba en y=164, o sea dos líneas— y el resto del párrafo recupera
   el ancho entero. El arnés comprueba el choque de verdad: recorre cada LÍNEA
   de texto de `main` con un Range y la cruza contra el sello y su etiqueta.
   Un padding a ojo no habría avisado de que agrandar el logo bajaba la
   etiqueta encima de la segunda línea. */
.bec-hero__sub::before {
  content: "";
  float: right;
  width: 3.4rem;
  height: 2.4rem;
}

/* ═══ Buscador ══════════════════════════════════════════════════════════ */

.bec-buscador {
  margin: 0 0 0.7rem;
}

.bec-buscador__campo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.7rem;
  border-radius: 0.85rem;
  border: 1px solid var(--bec-linea);
  background: var(--bec-fondo-suave);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.bec-buscador__campo:focus-within {
  border-color: color-mix(in srgb, var(--bec-violeta) 55%, transparent);
  background: #ffffff;
}

.bec-buscador__icono {
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
  fill: none;
  stroke: var(--bec-tinta-suave);
  stroke-width: 2;
  stroke-linecap: round;
}

.bec-buscador__campo input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--bec-tinta);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.bec-buscador__campo input::placeholder {
  color: color-mix(in srgb, var(--bec-tinta-suave) 75%, transparent);
}

.bec-buscador__campo input::-webkit-search-cancel-button {
  display: none;
}

.bec-buscador__x {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--bec-tinta-suave) 16%, transparent);
  cursor: pointer;
}

.bec-buscador__x svg {
  width: 0.75rem;
  height: 0.75rem;
  fill: none;
  stroke: var(--bec-tinta);
  stroke-width: 2.5;
  stroke-linecap: round;
}

/* ═══ Filtros ═══════════════════════════════════════════════════════════ */

.bec-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.55rem;
}

.bec-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.6rem;
  border: 1px solid var(--bec-linea);
  border-radius: 999px;
  background: #ffffff;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--bec-tinta-suave);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.bec-chip__n {
  font-variant-numeric: tabular-nums;
  font-size: 0.7rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--bec-tinta-suave) 80%, transparent);
}

.bec-chip.is-on {
  border-color: var(--bec-violeta);
  background: var(--bec-violeta-suave);
  color: var(--bec-violeta-hondo);
}

.bec-chip.is-on .bec-chip__n {
  color: var(--bec-violeta-hondo);
}

/* Pastillas de país: una fila que se desplaza, no se parte. La primera
   es «Todas». El orden lo pone becas.js (la beca que cierra antes). */
.bec-paises {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.35rem;
  margin: 0 0 0.55rem;
  overflow-x: auto;
  padding-bottom: 0.15rem;
  scrollbar-width: none;
}

.bec-paises::-webkit-scrollbar { display: none; }

.bec-pais {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.3rem;
  padding: 0.32rem 0.6rem;
  border: 1px solid var(--bec-linea);
  border-radius: 999px;
  background: #ffffff;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--bec-tinta-suave);
  cursor: pointer;
  white-space: nowrap;
}

.bec-pais__n {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.bec-pais.is-on {
  border-color: var(--bec-violeta);
  background: var(--bec-violeta-suave);
  color: var(--bec-violeta-hondo);
}

.bec-cuenta {
  margin: 0 0 0.7rem;
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bec-tinta-suave);
}

/* ═══ Tarjetas ══════════════════════════════════════════════════════════ */

.bec-lista {
  display: grid;
  gap: 0.5rem;
}

.bec-tarjeta {
  display: grid;
  gap: 0.35rem;
  padding: 0.8rem 0.85rem 0.7rem;
  border: 1px solid var(--bec-linea);
  border-radius: 1rem;
  background: #ffffff;
}

.bec-tarjeta__t {
  margin: 0;
  font-family: var(--font-headline);
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--bec-tinta);
}

.bec-tarjeta__meta,
.bec-tarjeta__plazo,
.bec-tarjeta__admite,
.bec-tarjeta__admite-l {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.84rem;
  line-height: 1.35;
}

.bec-tarjeta__meta {
  color: var(--bec-tinta-suave);
}

.bec-tarjeta__bandera {
  margin-right: 0.3rem;
}

/* El plazo es el dato que decide: mismo cuerpo que la línea de país,
   el violeta lo aparta del resto. */
.bec-tarjeta__plazo {
  font-weight: 700;
  color: var(--bec-violeta-hondo);
  text-wrap: balance;
}

.bec-tarjeta__admite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.bec-tarjeta__admite-l {
  color: var(--bec-tinta-suave);
}

.bec-tarjeta__admite .bec-pill {
  font-size: 0.84rem;
  font-weight: 600;
}

.bec-tarjeta__nota-no {
  flex-basis: 100%;
  font-family: var(--font-body);
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--bec-tinta);
}

.bec-tarjeta .bec-boton {
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin-top: 0.15rem;
}

.bec-mas {
  margin: 0;
}

.bec-mas > summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--bec-violeta-hondo);
}

.bec-mas > summary::-webkit-details-marker { display: none; }

.bec-mas > summary::after {
  content: " ›";
  display: inline-block;
  margin-left: 0.15rem;
  transition: transform 0.15s ease;
}

.bec-mas[open] > summary::after {
  transform: rotate(90deg);
}

.bec-det {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0 0 0.35rem;
}

.bec-det__f dt,
.bec-det__f dd {
  font-family: var(--font-body);
  font-size: 0.84rem;
  line-height: 1.45;
}

.bec-det__f dt {
  font-weight: 600;
  color: var(--bec-tinta-suave);
}

.bec-det__f dd {
  margin: 0.12rem 0 0;
  color: var(--bec-tinta);
}

/* ═══ Grupos por país ══════════════════════════════════════════════════
   En «Todas» la lista no se abre entera. Un grupo queda abierto: el de
   la beca que cierra antes. El resto espera al toque. */

.bec-grupo {
  border: 1px solid var(--bec-linea);
  border-radius: 1rem;
  background: #ffffff;
}

.bec-grupo > summary {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.55rem 0.85rem;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--bec-tinta);
}

.bec-grupo > summary::-webkit-details-marker { display: none; }

.bec-grupo > summary::after {
  content: "›";
  margin-left: auto;
  color: var(--bec-tinta-suave);
  transition: transform 0.15s ease;
}

.bec-grupo[open] > summary::after {
  transform: rotate(90deg);
}

.bec-grupo__lista {
  display: grid;
  gap: 0.5rem;
  padding: 0 0.65rem 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
  .bec-mas > summary::after,
  .bec-grupo > summary::after {
    transition: none;
  }
}

/* ═══ Píldoras de estado ════════════════════════════════════════════════ */

.bec-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.16rem 0.48rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.bec-pill--abierta { background: var(--bec-abierta-f); color: var(--bec-abierta); }
.bec-pill--cierra_pronto { background: var(--bec-pronto-f); color: var(--bec-pronto); }
.bec-pill--proxima { background: var(--bec-proxima-f); color: var(--bec-proxima); }
.bec-pill--cerrada { background: var(--bec-cerrada-f); color: var(--bec-cerrada); }
.bec-pill--sin_fecha { background: var(--bec-cerrada-f); color: var(--bec-cerrada); }

/* «Sí» usa --tramite. Sobre la tarjeta blanca el token a pelo no se lee
   (es un verde claro pensado para el fondo navy), así que el texto mezcla
   el token con la tinta y el fondo queda un velo del mismo verde.
   «Sin confirmar» hace lo mismo con --on-surface-muted. */
.bec-pill--si {
  background: color-mix(in srgb, var(--tramite) 22%, white);
  color: color-mix(in srgb, var(--tramite) 40%, var(--bec-tinta));
}

.bec-pill--pendiente {
  background: color-mix(in srgb, var(--on-surface-muted) 28%, white);
  color: color-mix(in srgb, var(--on-surface-muted) 20%, var(--bec-tinta-suave));
}

.bec-pill--quien {
  background: var(--bec-violeta-suave);
  color: var(--bec-violeta-hondo);
  font-weight: 600;
}

.bec-vacio {
  margin: 0.6rem 0 0;
  padding: 0.9rem;
  border: 1px dashed var(--bec-linea);
  border-radius: 0.9rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--bec-tinta-suave);
  text-align: center;
}

/* ═══ Cobertura ═════════════════════════════════════════════════════════ */

.bec-cob {
  margin: 0.9rem 0 0;
  padding: 0.8rem 0.85rem;
  border-radius: 1rem;
  background: var(--bec-fondo-suave);
  border: 1px solid var(--bec-linea);
}

.bec-cob__l {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--bec-tinta-suave);
}

.bec-cob__l strong {
  color: var(--bec-violeta-hondo);
  font-variant-numeric: tabular-nums;
}

.bec-cob__desp {
  margin-top: 0.5rem;
}

.bec-cob__desp > summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--bec-violeta-hondo);
}

.bec-cob__desp > summary::-webkit-details-marker { display: none; }

.bec-cob__desp > summary::after {
  content: " ›";
  display: inline-block;
  transition: transform 0.15s ease;
}

.bec-cob__desp[open] > summary::after {
  transform: rotate(90deg);
}

.bec-cob__grupo {
  margin-top: 0.7rem;
}

.bec-cob__h {
  margin: 0 0 0.3rem;
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bec-tinta-suave);
}

.bec-cob__h span {
  font-weight: 600;
  color: color-mix(in srgb, var(--bec-tinta-suave) 70%, transparent);
}

.bec-cob__grupo ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.22rem;
}

.bec-cob__grupo li {
  font-family: var(--font-body);
  font-size: 0.79rem;
  line-height: 1.35;
  color: var(--bec-tinta);
}

.bec-cob__grupo a {
  color: var(--bec-violeta-hondo);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--bec-violeta) 30%, transparent);
}

.bec-cob__falta {
  font-size: 0.72rem;
  color: var(--bec-cerrada);
}

/* ═══ Pie del módulo ════════════════════════════════════════════════════ */

.bec-disclaimer {
  margin: 0.85rem 0 0;
  font-family: var(--font-body);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--on-surface-muted);
}

.bec-disclaimer strong {
  color: var(--on-surface);
}

/* ═══════════════════════════════════════════════════════════════════════
   LA FICHA
   ═══════════════════════════════════════════════════════════════════════ */

.bec-breadcrumb {
  margin: 0 0 0.6rem;
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-surface-muted);
}

.bec-cab {
  margin: 0 0 0.9rem;
  padding-right: 3rem;
}

.bec-cab__t {
  margin: 0.4rem 0 0.3rem;
  font-family: var(--font-headline);
  font-size: 1.28rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--bec-tinta);
}

.bec-cab__org {
  margin: 0 0 0.15rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--bec-tinta-suave);
}

.bec-cab__pais {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--bec-tinta);
}

.bec-panel {
  padding: 0.85rem 0;
  border-top: 1px solid var(--bec-linea);
}

.bec-panel__h {
  margin: 0 0 0.45rem;
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--bec-tinta-suave);
}

.bec-p {
  margin: 0 0 0.45rem;
  font-family: var(--font-body);
  font-size: 0.87rem;
  line-height: 1.55;
  color: var(--bec-tinta);
}

.bec-p:last-child { margin-bottom: 0; }

/* Lo que dice la fuente, no lo que concluimos nosotros. Se marca con un filo
   a la izquierda para que se lea como cita y no como opinión de Herizo. */
.bec-p--fuente {
  padding-left: 0.7rem;
  border-left: 2px solid color-mix(in srgb, var(--bec-violeta) 40%, transparent);
  color: var(--bec-tinta-suave);
}

.bec-p--sub {
  font-size: 0.82rem;
  color: var(--bec-tinta-suave);
}

.bec-p--pendiente {
  font-style: italic;
  color: var(--bec-tinta-suave);
}

.bec-nota {
  margin: 0.45rem 0 0;
  font-family: var(--font-body);
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--bec-tinta-suave);
}

/* —— El plazo —— */
.bec-plazo {
  margin: 0;
  font-family: var(--font-headline);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--bec-tinta);
}

.bec-plazo__cuba {
  margin: 0.45rem 0 0;
  padding: 0.5rem 0.65rem;
  border-radius: 0.7rem;
  background: var(--bec-violeta-suave);
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--bec-violeta-hondo);
}

.bec-plazo__cuba strong {
  font-weight: 700;
}

.bec-plazo__origen {
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}

.bec-plazo__cuba--sin {
  background: var(--bec-fondo-suave);
  color: var(--bec-tinta-suave);
}

/* —— Elegibilidad —— */
.bec-eleg {
  margin: 0 0 0.45rem;
  font-family: var(--font-headline);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--bec-abierta);
}

.bec-eleg--no { color: #b3261e; }
.bec-eleg--pendiente { color: var(--bec-pronto); }
.bec-eleg--si_residentes_fuera { color: var(--bec-pronto); }

/* —— Quién presenta —— */
.bec-quien {
  margin: 0 0 0.45rem;
  font-family: var(--font-headline);
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--bec-violeta-hondo);
}

.bec-aviso {
  margin: 0 0 0.5rem;
  padding: 0.5rem 0.65rem;
  border-radius: 0.7rem;
  background: var(--bec-pronto-f);
  font-family: var(--font-body);
  font-size: 0.83rem;
  line-height: 1.45;
  color: var(--bec-pronto);
}

.bec-datos {
  margin: 0.4rem 0 0;
}

.bec-dato {
  display: flex;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.83rem;
}

.bec-dato dt {
  font-weight: 600;
  color: var(--bec-tinta-suave);
}

.bec-dato dd {
  margin: 0;
  color: var(--bec-tinta);
}

/* —— Qué cubre —— */
.bec-fin {
  margin: 0 0 0.4rem;
  font-family: var(--font-headline);
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--bec-tinta);
}

.bec-cubre {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.bec-cubre li {
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--bec-abierta-f);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--bec-abierta);
}

/* —— El botón —— */
.bec-boton {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.35rem;
  padding: 0.62rem 0.95rem;
  border-radius: 0.8rem;
  background: var(--bec-violeta-hondo);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  color: #ffffff;
  text-decoration: none;
}

.bec-boton svg {
  width: 0.9rem;
  height: 0.9rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* —— Fuentes —— */
.bec-fuentes {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.6rem;
}

.bec-fuentes li {
  display: grid;
  gap: 0.15rem;
}

.bec-fuentes a {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--bec-violeta-hondo);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--bec-violeta) 30%, transparent);
  justify-self: start;
}

.bec-fuentes__m,
.bec-fuentes__n {
  font-family: var(--font-body);
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--bec-tinta-suave);
}

.bec-comprobado {
  margin: 0.7rem 0 0;
  font-family: var(--font-body);
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--bec-tinta-suave);
}

.bec-nohay {
  margin: 0;
  padding: 1.1rem;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--bec-tinta-suave);
}

.bec-nohay a {
  color: var(--bec-violeta-hondo);
}

/* ═══ ¿Dónde estás? ═════════════════════════════════════════════════════
   28 ago 2026. No es un chip más y por eso no se parece a los chips: lleva
   su pregunta escrita al lado y va en su propia fila. Los chips filtran la
   lista; esto cambia cómo se LEE la lista entera. */

.bec-donde {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.55rem;
  margin: 0 0 0.35rem;
}

/* El cuarto control no entra en el segmento: se enciende solo. */
.bec-cubanos {
  padding: 0.32rem 0.7rem;
  border: 1px solid var(--bec-linea);
  border-radius: 999px;
  background: #ffffff;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--bec-tinta-suave);
  cursor: pointer;
}

.bec-cubanos.is-on {
  border-color: var(--bec-violeta);
  background: var(--bec-violeta-suave);
  color: var(--bec-violeta-hondo);
}

.bec-cubanos-nota {
  margin: 0 0 0.6rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--bec-tinta-suave);
}

.bec-donde__l {
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bec-tinta-suave);
}

.bec-donde__ops {
  display: inline-flex;
  padding: 0.15rem;
  border: 1px solid var(--bec-linea);
  border-radius: 999px;
  background: var(--bec-fondo-suave);
}

.bec-donde__b {
  padding: 0.28rem 0.62rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--bec-tinta-suave);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.bec-donde__b.is-on {
  background: var(--bec-violeta-hondo);
  color: #ffffff;
}

/* La marca de sitio en la tarjeta. Sale solo cuando se ha preguntado. */
.bec-pill--desde {
  background: var(--bec-proxima-f);
  color: var(--bec-proxima);
  font-weight: 600;
}

.bec-pill--nose {
  background: var(--bec-cerrada-f);
  color: var(--bec-cerrada);
  font-weight: 600;
}

/* El rótulo del grupo apartado. Dice POR QUÉ están abajo; sin eso, bajar
   una convocatoria al final es esconderla despacio. */
.bec-aparte {
  margin: 0.55rem 0 0.1rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--bec-linea);
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bec-tinta-suave);
}

/* Apagadas, no escondidas: se leen y se abren igual. */
.bec-aparte ~ .bec-tarjeta {
  background: var(--bec-fondo-suave);
}

.bec-aparte ~ .bec-tarjeta .bec-tarjeta__t {
  color: var(--bec-tinta-suave);
}

/* ═══════════════════════════════════════════════════════════════════════
   LOS PUENTES · 29 ago 2026
   ═══════════════════════════════════════════════════════════════════════

   El componente compartido `js/puentes.js` pinta `.tool-card`, y esa tarjeta
   está escrita para fondo oscuro: `hub.css:1213` le da
   `background: color-mix(in srgb, #0f1d30 75%, var(--navy-deep))` y texto
   claro encima. Becas es de fondo BLANCO, así que aquí sale un bloque azul
   marino dentro de una tarjeta blanca.

   No se toca `hub.css` —necesita permiso, AGENTS.md §3— y no se copia el
   componente: se le pone su ropa clara aquí, que es lo mismo que hizo Divisas
   el 22 de agosto corrigiendo desde su propia hoja.

   Y el sello va VISIBLE. En oscuro `.tool-card__mark` es gris al 30 % —una
   marca de agua—; sobre blanco eso desaparece. Aquí se enseña entero y algo
   más grande, que es lo que pidió Fidel el 29: «los sellos en los lugares
   donde aportan conexión». El sello es el que dice a qué módulo vas antes de
   tocar.                                                                    */

.bec-panel--puentes .tools-list--puente {
  gap: 0.5rem;
}

.bec-panel--puentes .tool-card {
  padding: 0.8rem 0.85rem;
  gap: 0.7rem;
  border: 1px solid var(--bec-linea);
  border-radius: 0.9rem;
  background: var(--bec-fondo-suave);
  color: var(--bec-tinta);
}

/* El `display: block` del título y la descripción vivía aquí acotado unas
   horas: se arregló en `hub.css` el mismo 29, con permiso de Fidel, porque el
   fallo era del componente compartido y estaba igual en Pasaporte y Envíos.
   Se quita de aquí para no dejar dos sitios diciendo lo mismo. */

.bec-panel--puentes .tool-card__title {
  font-size: 0.95rem;
  color: var(--bec-tinta);
}

.bec-panel--puentes .tool-card__desc {
  color: var(--bec-tinta-suave);
}

.bec-panel--puentes .tool-card__mark {
  width: 1.75rem;
  height: 1.75rem;
  opacity: 1;
  filter: none;
}

.bec-panel--puentes .tool-card__chevron {
  stroke: var(--bec-tinta-suave);
  opacity: 0.6;
}

/* El toque enciende el violeta del módulo, no el ámbar del hub: quien pulsa
   sigue dentro de Becas hasta que la otra página carga. */
.bec-panel--puentes .tool-card:active,
.bec-panel--puentes .tool-card.is-pressed {
  background: var(--bec-violeta-suave);
  border-color: color-mix(in srgb, var(--bec-violeta) 35%, transparent);
}

.bec-panel--puentes .tool-card:active .tool-card__desc,
.bec-panel--puentes .tool-card.is-pressed .tool-card__desc {
  color: var(--bec-tinta);
}

/* ═══════════════════════════════════════════════════════════════════════
   LA TIRA DEL PIE · 29 ago 2026
   ═══════════════════════════════════════════════════════════════════════

   Presencia, no túnel. Es la forma que Fidel fijó el 27 de agosto en Recargas
   (`RecargasOtros.vue`) y que señaló el 29 para traerla al hub: debajo del
   todo, en gris hasta que se toca, con el sello pequeño.

   Vive FUERA de la tarjeta blanca, sobre el azul del hub, así que usa los
   tokens del hub —`--on-surface-muted`— y no los del módulo. Eso también
   quiere decir que su contraste NO depende de que Becas sea claro: la misma
   tira funcionaría igual en un módulo oscuro.

   Tres sellos y no ocho: a 390 px, ocho en una fila salen a 48 px y el texto
   se estrangula. Y enseñar los ocho aquí sería repetir el índice que el pie
   del hub ya es.                                                            */

.bec-otros {
  display: block;
  margin-top: 1.6rem;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--on-surface) 8%, transparent);
}

.bec-otros__t {
  display: block;
  margin-bottom: 0.7rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--on-surface-muted);
}

.bec-otros__fila {
  display: flex;
  gap: 0.5rem;
}

.bec-otros__i {
  flex: 1 1 0;
  display: grid;
  justify-items: center;
  gap: 0.3rem;
  /* 44 px es el mínimo que se toca sin fallar en un móvil. Decisión del 25. */
  min-height: 44px;
  padding: 0.5rem 0.25rem;
  border-radius: 12px;
  color: var(--on-surface-muted);
  font-size: 0.72rem;
  text-align: center;
  text-decoration: none;
}

.bec-otros__i img {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.6;
  transition: filter 0.15s ease, opacity 0.15s ease;
}

.bec-otros__i:hover img,
.bec-otros__i:focus-visible img {
  filter: none;
  opacity: 1;
}

.bec-otros__i:hover,
.bec-otros__i:focus-visible {
  color: var(--on-surface);
}