/*
 * guided-booking.css — Rediseño móvil del PANEL de reserva (re-piel del #enrollModal).
 *
 * Acotado a `#enrollModal.gb-on` (la clase solo se pinta con GUIDED_BOOKING_ENABLED=ON).
 * NO toca la lógica: el JS, los IDs y el markup quedan iguales. Solo cambia el ASPECTO
 * y agranda las zonas de toque. Pensado MÓVIL primero (≤640px, donde se ve la
 * `.enroll-mobile-info-strip`); en escritorio se deja casi como está.
 *
 * Objetivos (feedback de Guille): panel a pantalla completa, detalles a la vista (sin
 * "Show details"), "quién va" visible, nivel/tipo claros, y BOTONES GIGANTES
 * ("para gente de 80 años").
 */

:root {
  --gb-brand: #02A9CA;
  --gb-brand-dark: #0288A9;
  --gb-ink: #0f2730;
  --gb-muted: #5b6b72;
  --gb-line: #e6edf0;
}

/* Quita el "flash" gris/azul que ponen los móviles al tocar (daba sensación de
 * parpadeo en toda la página al pulsar). Solo en las pantallas del rediseño. */
.gb-schedule, .gb-schedule *,
.gb-tandems, .gb-tandems *,
#enrollModal.gb-on, #enrollModal.gb-on *,
.tandem-modal-dialog.gb-on, .tandem-modal-dialog.gb-on * {
  -webkit-tap-highlight-color: transparent;
}

/* ───────────────────────── Pantalla completa en móvil ───────────────────────── */
@media (max-width: 640px) {
  dialog#enrollModal.gb-on[open] {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
  }
  dialog#enrollModal.gb-on[open]::backdrop {
    background: rgba(6, 38, 47, 0.55);
  }
}

/* ───────────────────────────────── Cabecera ─────────────────────────────────── */
#enrollModal.gb-on .enroll-modal-header {
  background: var(--gb-brand) !important;
  padding: 16px 16px !important;
}
#enrollModal.gb-on #modalTitle {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
}
#enrollModal.gb-on #closeModal {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
}
#enrollModal.gb-on #closeModal i { font-size: 22px !important; }

/* ───────────────────────────── Pestañas de paso ─────────────────────────────── */
/* Más limpias: barra blanca con el número en círculo de marca; sin degradados. */
#enrollModal.gb-on #stepTabsContainer {
  background: #fff !important;
  border-bottom: 1px solid var(--gb-line) !important;
  padding: 4px 8px !important;
}
#enrollModal.gb-on .step-tab {
  border: none !important;
  background: transparent !important;
  color: var(--gb-muted) !important;
  font-weight: 700 !important;
}
#enrollModal.gb-on .step-tab[data-step="1"] {
  color: var(--gb-ink) !important;
  background: transparent !important;
}
#enrollModal.gb-on .step-tab .rounded-full {
  width: 26px !important;
  height: 26px !important;
  background: var(--gb-brand) !important;
  color: #fff !important;
}

/* ─────────────────────── Tira de info móvil → "héroe" ───────────────────────── */
#enrollModal.gb-on .enroll-mobile-info-strip {
  background: #f4fbfd !important;
  border: 1px solid #cfeef5 !important;
  border-radius: 16px !important;
  padding: 16px !important;
}
#enrollModal.gb-on .enroll-mobile-info-strip .enroll-mobile-teacher {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: var(--gb-ink) !important;
}
#enrollModal.gb-on .enroll-mobile-info-strip i { font-size: 0.95rem !important; }
#enrollModal.gb-on .enroll-mobile-seats {
  font-size: 0.85rem !important;
  font-weight: 700 !important;
}

/* "Class details": los detalles de la clase (título, descripción, quién va) van
 * PLEGADOS y se abren con su flechita (feedback Guille). Antes se forzaban SIEMPRE
 * abiertos; ahora dejamos que Alpine (x-show="showDetails") los controle: cerrado
 * por defecto. Solo damos estilo branded al botón "Class details". */
#enrollModal.gb-on .enroll-mobile-details-toggle {
  padding: 12px 2px 2px;
  color: var(--gb-ink) !important;
  font-size: 0.95rem !important;
  -webkit-tap-highlight-color: transparent;
}
#enrollModal.gb-on .enroll-mobile-details-toggle .fa-circle-info { color: var(--gb-brand) !important; }
#enrollModal.gb-on .enroll-mobile-details-toggle .fa-chevron-down { color: var(--gb-brand) !important; }
#enrollModal.gb-on .enroll-mobile-students {
  margin-top: 4px !important;
}
#enrollModal.gb-on .enroll-mobile-students li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 0.95rem !important;
  color: var(--gb-ink) !important;
}
/* Punto-avatar antes de cada compañero, para darle cara aunque no haya foto. */
#enrollModal.gb-on .enroll-mobile-students li::before {
  content: "";
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #d8f1f7;
  border: 1px solid #b6e4ee;
  flex: 0 0 auto;
}

/* ───────────────────────── Tipo de sesión (1:1 / grupo) ─────────────────────── */
#enrollModal.gb-on .enroll-session-type-label {
  padding: 16px !important;
  border-radius: 14px !important;
  border-width: 2px !important;
}
#enrollModal.gb-on .session-type-label .font-medium { font-size: 1rem !important; }
#enrollModal.gb-on .session-type-label.peer-checked\:border-\[\#02A9CA\] { }

/* ───────────────────────────── Nivel y temas ────────────────────────────────── */
#enrollModal.gb-on #levelSelect {
  padding: 14px 16px !important;
  border-radius: 14px !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  border: 2px solid var(--gb-line) !important;
}
#enrollModal.gb-on .topic-type-btn {
  padding: 16px !important;
  border-radius: 14px !important;
  font-size: 0.95rem !important;
}
#enrollModal.gb-on #meetingNotes {
  border-radius: 14px !important;
  border: 2px solid var(--gb-line) !important;
  padding: 14px 16px !important;
}

/* Botón "Personalizar mi clase (opcional)" — pliega Tema + Objetivos (guided-booking.js). */
#enrollModal.gb-on .gb-customize-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 4px 0 6px;
  padding: 14px 16px;
  background: #fff;
  border: 2px dashed #cfe9f0;
  border-radius: 14px;
  color: var(--gb-muted);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#enrollModal.gb-on .gb-customize-toggle small { font-weight: 600; opacity: 0.7; }
#enrollModal.gb-on .gb-customize-toggle .fa-sliders { color: var(--gb-brand); }
#enrollModal.gb-on .gb-customize-toggle .gb-caret {
  margin-left: auto;
  transition: transform 0.2s ease;
}
#enrollModal.gb-on .gb-customize-toggle.is-open {
  border-style: solid;
  color: var(--gb-ink);
}
#enrollModal.gb-on .gb-customize-toggle.is-open .gb-caret { transform: rotate(180deg); }

/* Etiqueta fija (group session / nivel) cuando ya está decidido — no parece un menú. */
#enrollModal.gb-on .gb-fixed-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--bg-accent, #e8f7fb);
  background: #e8f7fb;
  color: #0a4e63;
  font-weight: 700;
  font-size: 1rem;
}
#enrollModal.gb-on .gb-fixed-pill .fa-circle-check { color: var(--gb-brand); }

/* ═══════════ Sin crédito → pagar (P6): sin parpadeo ═══════════
 * Guille: el checkout "todavía parpadea". Quitamos transiciones/animaciones dentro del
 * panel de compra (transition-all de las tarjetas + cambios de opacidad) para que no
 * haya destellos al tocar/aparecer. Solo con el flag (esta hoja). */
#enrollModal.gb-on #creditPurchasePanel,
#enrollModal.gb-on #creditPurchasePanel *,
#enrollModal.gb-on .pbc-buy-option {
  transition: none !important;
  animation: none !important;
}

/* ═══════════ Confirmar (P3): barrita de nivel + contador de créditos ═══════════ */
/* La barrita FIJA el <select> real, que ocultamos (el JS lee su value al enviar). Se usa
   en RESERVAS (#levelSelect) y en TÁNDEMS (#tdJoinLevel), con el MISMO look (uniforme,
   feedback Guille). Las clases .gb-level-* solo existen con el flag (esta hoja). */
#enrollModal.gb-on #levelSelect,
.tandem-modal-dialog.gb-on #tdJoinLevel,
#requestModal.gb-on #reqLevel { display: none !important; }
.gb-level-bar { display: flex; gap: 6px; margin-top: 2px; }
.gb-level-step {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 13px 2px; border-radius: 12px;
  border: 2px solid var(--gb-line); border-bottom-width: 4px; background: #fff;
  font-weight: 800; color: var(--gb-muted);
  -webkit-tap-highlight-color: transparent; cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .1s ease, transform .06s ease;
}
.gb-level-step:active { transform: translateY(2px); border-bottom-width: 2px; }
/* Ascendente: se rellenan todos los tramos hasta el nivel elegido. */
.gb-level-step.is-on { background: var(--gb-brand); border-color: var(--gb-brand-dark); color: #fff; }
.gb-level-code { font-size: 0.95rem; }

/* Icono de "reserva confirmada" LIMPIO (Guille: el de SweetAlert salía fino y a veces
   roto). Círculo verde macizo + tick blanco grueso (iconHtml). Fuera las líneas
   animadas de SweetAlert que a veces no se dibujan bien. No va en @media: se ve en
   cualquier tamaño (solo carga con el flag, así que ya está acotado a Guille). */
.swal2-icon.gb-success-ico {
  border-color: transparent !important; background: #22c55e !important;
  box-shadow: 0 8px 24px rgba(34,197,94,.30);
}
.swal2-icon.gb-success-ico .swal2-success-ring,
.swal2-icon.gb-success-ico [class^="swal2-success-line"],
.swal2-icon.gb-success-ico [class*=" swal2-success-line"],
.swal2-icon.gb-success-ico .swal2-success-fix,
.swal2-icon.gb-success-ico .swal2-success-circular-line-left,
.swal2-icon.gb-success-ico .swal2-success-circular-line-right { display: none !important; }
.swal2-icon.gb-success-ico .swal2-icon-content {
  display: flex !important; align-items: center; justify-content: center; width: 100%; height: 100%;
}

/* "Pedir una clase" (#requestModal): aspecto más moderno/app y coherente con el resto
   (Guille): botones de tema con relieve 3D, controles redondeados, tipo de sesión con
   tarjeta 3D. La barrita de nivel ya la comparte (.gb-level-*). Tema magenta propio. */
#requestModal.gb-on .req-topic-btn {
  border-radius: 14px !important; border-bottom-width: 4px !important;
  padding: 14px 10px !important; transition: transform .1s ease, border-color .1s ease, background .1s ease;
}
#requestModal.gb-on .req-topic-btn:active { transform: translateY(2px); border-bottom-width: 2px !important; }
#requestModal.gb-on #reqTopic,
#requestModal.gb-on #reqSubtopic,
#requestModal.gb-on #reqFocus,
#requestModal.gb-on #reqTime {
  border-radius: 14px !important; padding: 12px 14px !important; font-size: 0.95rem !important;
  border: 2px solid #ecd7e6 !important;
}
#requestModal.gb-on #reqTopic:focus,
#requestModal.gb-on #reqSubtopic:focus,
#requestModal.gb-on #reqFocus:focus,
#requestModal.gb-on #reqTime:focus { border-color: #a23e8c !important; }
#requestModal.gb-on .request-type-card {
  border-radius: 14px !important; border-bottom-width: 4px !important; padding: 12px 14px !important;
}
#requestModal.gb-on .request-type-card:has(.request-type-radio:checked) {
  border-color: #a23e8c !important; background: #fdf4fa !important;
}

/* Contador de créditos: coste (cambia con el tipo) + saldo "te quedan". */
.gb-credits { display: none; }
#enrollModal.gb-on .gb-credits {
  display: block; margin: 6px 0 2px; padding: 12px 14px;
  border-radius: 14px; background: #f4fbfd; border: 1px solid #cfeef5;
}
#enrollModal.gb-on .gb-credits-main { display: flex; align-items: center; justify-content: space-between; }
#enrollModal.gb-on .gb-credits-label { font-weight: 700; color: var(--gb-ink); }
#enrollModal.gb-on .gb-credits-cost { font-weight: 800; color: var(--gb-brand-dark); font-size: 1.05rem; }
#enrollModal.gb-on .gb-credits-sub { margin-top: 2px; font-size: 0.82rem; color: var(--gb-muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#enrollModal.gb-on .gb-credits.gb-credits-low .gb-credits-sub { color: #b45309; font-weight: 700; }
/* "get more to book": botón CLICABLE que lleva a los precios (Guille). */
#enrollModal.gb-on .gb-credits-buy {
  border: none; border-radius: 999px; padding: 5px 12px; font-size: 0.8rem; font-weight: 800;
  color: #fff; background: var(--gb-brand-dark); cursor: pointer; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 0 0 rgba(0,0,0,.15);
}
#enrollModal.gb-on .gb-credits-buy:active { transform: translateY(1px); }

/* Aviso del botón "Next" cuando falta el nivel: se atenúa y avisa. */
#enrollModal.gb-on #nextStep.gb-btn-need {
  background: #fff !important; color: var(--gb-muted) !important;
  border: 2px solid var(--gb-line) !important; box-shadow: none !important;
}

/* ═══════════ Ticket (P7): quién viene con punto verde + cancelar discreto ═══════════ */
/* Quién viene: punto VERDE de "conectado" antes de cada nombre (sin iniciales). */
#enrollModal.gb-on #bookedStudentsList li::before {
  width: 11px !important; height: 11px !important;
  background: #22c55e !important; border: 2px solid #bbf7d0 !important;
}
/* Icono de éxito (tick) más grande y limpio en la cabecera del ticket. */
#enrollModal.gb-on #bookedClassDetails h4 .fa-circle-check { font-size: 1.35rem !important; }
@media (max-width: 640px) {
  /* "Cancelar" DISCRETO: texto gris pequeño centrado, sin caja (no anuncia el crédito).
     Va DESPUÉS del override anterior (misma especificidad) para ganar. */
  #enrollModal.gb-on #bookedClassDetails #cancelBookingBtn {
    order: 3 !important;
    width: auto !important; margin: 8px auto 0 !important;
    min-height: 0 !important; padding: 6px 12px !important;
    background: transparent !important; border: none !important; box-shadow: none !important;
    color: var(--gb-muted) !important; font-size: 0.85rem !important;
    font-weight: 600 !important; text-decoration: underline;
  }
  /* Ocultar el botón de cancelar cuando falta <24h (lo marca el JS). */
  #enrollModal.gb-on #bookedClassDetails #cancelBookingBtn.gb-hide { display: none !important; }
}

/* ═══════════ Pedir una clase (P5): re-piel ligera del modal de solicitud ═══════════ */
@media (max-width: 640px) {
  dialog.request-modal-dialog.gb-on[open] {
    width: 100vw !important; max-width: 100vw !important;
    height: 100dvh !important; max-height: 100dvh !important;
    margin: 0 !important; padding: 0 !important; border: none !important; border-radius: 0 !important;
    display: flex !important; flex-direction: column !important;
  }
  dialog.request-modal-dialog.gb-on[open]::backdrop { background: rgba(6, 38, 47, 0.55); }
  .request-modal-dialog.gb-on #submitRequest {
    width: 100% !important; min-height: 54px !important;
    border-radius: 16px !important; font-size: 1.05rem !important; font-weight: 800 !important;
  }
  .request-modal-dialog.gb-on #reqLevel,
  .request-modal-dialog.gb-on #reqTopic,
  .request-modal-dialog.gb-on #reqSubtopic {
    padding: 13px 14px !important; border-radius: 12px !important; font-weight: 600 !important;
    border: 2px solid var(--gb-line) !important;
  }
}

/* ═══════════ Tándems (P1 lista): tarjeta con EMBLEMA de banderas grande ═══════════
 * Solo móvil + flag (.gb-tandems = #tandemGrid con el flag). En la agenda móvil el día
 * ya es la cabecera y la hora la columna izquierda, así que la tarjeta enseña el
 * emblema (las 2 banderas), la línea de meta y el chip de unirse. Teal propio de
 * tándems (#0d9488). El grid de escritorio (oculto en móvil) no se toca. */
@media (max-width: 640px) {
  .gb-tandems .tandem-slot {
    padding: 14px !important;
    border: 2px solid #cdeee6 !important; border-bottom-width: 5px !important;
    border-radius: 16px !important; background: #fff !important;
  }
  .gb-tandems .tandem-slot.is-mine { background: #eafaf6 !important; border-color: #9fe0d1 !important; }
  /* Emblema: banderas GRANDES; se ocultan los códigos de 2 letras y la flecha (texto
     que "se corta"); el emblema manda (poca bandera). */
  .gb-tandems .tandem-slot__codes { font-size: 0 !important; }
  .gb-tandems .tandem-lang-flag {
    font-size: 2rem !important; margin: 0 4px !important;
    border-radius: 4px !important; box-shadow: 0 0 0 1px rgba(0,0,0,.08);
  }
  .gb-tandems .tandem-slot__meta { font-size: 0.85rem !important; color: #0d5c52 !important; }
  /* Chip de unirse: pastilla teal redonda, más grande (toque). line-height:1 + padding:0
     para que el "+" quede CENTRADO y no se corte por abajo; el contenedor no recorta. */
  .gb-tandems .tandem-slot__pair { overflow: visible !important; }
  .gb-tandems .tandem-slot__flag--join {
    width: 34px !important; height: 34px !important; border-radius: 999px !important;
    font-size: 1.35rem !important; line-height: 1 !important; padding: 0 0 2px !important;
    display: inline-flex !important; flex: 0 0 auto !important;
    align-items: center; justify-content: center; box-shadow: 0 3px 0 0 #0a6b62;
  }
  /* "Yours" / esperando enlace: legibles. */
  .gb-tandems .tandem-slot__flag { font-size: 0.7rem !important; }
  /* Fuera el "Practising X" (confuso: si eres español, "practicando español" no dice
     nada). El emblema de banderas ya deja claro qué idiomas hay. Guille. */
  .gb-tandems .tandem-slot__pair + .tandem-slot__meta { display: none !important; }
  /* Pestañas "I want to practise": aspecto app (redondeadas, más toque). */
  .gb-tandems .tandem-lang-tab { padding: 8px 15px !important; border-radius: 999px !important; font-weight: 700 !important; }
  /* Checkbox "ocultar llenos": más discreto (Guille: ocupaba demasiado). */
  .gb-tandems #tandemSecondaryFilters label span { font-size: 0.85rem !important; }
}

/* Filtros PLEGADOS en un desplegable (Guille: en la portada de tándems sobra info
 * antes del calendario; que se vea antes). Botón grande de proponer arriba, luego
 * este desplegable cerrado, y ya el calendario. Solo móvil + flag. */
@media (max-width: 640px) {
  .gb-tandems .gb-tandem-filters {
    border: 2px solid #cdeee6; border-radius: 14px; background: #fff; margin-bottom: 1rem;
  }
  .gb-tandems .gb-tandem-filters__summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; gap: .5rem;
    padding: .8rem 1rem; font-weight: 800; color: #0d5c52; -webkit-tap-highlight-color: transparent;
  }
  .gb-tandems .gb-tandem-filters__summary::-webkit-details-marker { display: none; }
  .gb-tandems .gb-tandem-filters__chev { margin-left: auto; transition: transform .18s ease; }
  .gb-tandems .gb-tandem-filters[open] .gb-tandem-filters__chev { transform: rotate(180deg); }
  .gb-tandems .gb-tandem-filters__body { padding: .1rem 1rem 1rem; }
  /* Dentro del desplegable, sin margen sobrante entre bloques. */
  .gb-tandems .gb-tandem-filters__body > .mb-4,
  .gb-tandems .gb-tandem-filters__body > #tandemSecondaryFilters { margin-bottom: .75rem !important; }
  .gb-tandems .gb-tandem-filters__body > :last-child { margin-bottom: 0 !important; }
}

/* En ESCRITORIO el rediseño no aplica: el desplegable no debe esconder los filtros.
 * Se fuerza el cuerpo visible y se oculta el resumen, para dejarlos como siempre. */
@media (min-width: 641px) {
  .gb-tandems .gb-tandem-filters { border: 0 !important; background: transparent !important; }
  .gb-tandems .gb-tandem-filters__summary { display: none !important; }
  .gb-tandems details.gb-tandem-filters > .gb-tandem-filters__body { display: block !important; }
}

/* ═══════════ Tándems (P2 unirse / P3 ticket): modal #tandemDetailModal ═══════════ */
@media (max-width: 640px) {
  /* Robusto contra Tailwind CDN: las 2 columnas (ofrece / practica) LADO A LADO
     (grid-cols-2 no siempre lo pinta el CDN → se apilaban enormes). */
  .tandem-modal-dialog.gb-on .grid.grid-cols-2 {
    display: grid !important; grid-template-columns: 1fr 1fr !important; align-items: start;
  }
  /* Quién viene: punto VERDE de "conectado" antes de cada nombre (sin iniciales). */
  .tandem-modal-dialog.gb-on #tdOfferedPeople li,
  .tandem-modal-dialog.gb-on #tdSoughtPeople li { display: flex !important; align-items: center; gap: 8px; }
  .tandem-modal-dialog.gb-on #tdOfferedPeople li::before,
  .tandem-modal-dialog.gb-on #tdSoughtPeople li::before {
    content: ""; width: 10px; height: 10px; border-radius: 50%;
    background: #22c55e; border: 2px solid #bbf7d0; flex: 0 0 auto;
  }
  /* Fuera el avatar con la inicial (Guille: "sin iniciales"); lo sustituye el punto
     verde. Además se estiraba a barra y tapaba el nombre. Ahora: punto verde + nombre. */
  .tandem-modal-dialog.gb-on #tdOfferedPeople .tandem-person-avatar,
  .tandem-modal-dialog.gb-on #tdSoughtPeople .tandem-person-avatar { display: none !important; }
  .tandem-modal-dialog.gb-on #tdOfferedPeople li > div,
  .tandem-modal-dialog.gb-on #tdSoughtPeople li > div { min-width: 0; flex: 1 1 auto; }
  /* "Gratis, no gasta créditos": el aviso pequeño lo pone el JS con .gb-tandem-free. */
  .tandem-modal-dialog.gb-on .gb-tandem-free {
    display: block; text-align: center; margin-top: 8px;
    font-size: 0.78rem; color: var(--gb-muted); font-weight: 600;
  }
  /* Salir / cambiar idioma: enlaces DISCRETOS (gris), no botones grandes. */
  .tandem-modal-dialog.gb-on #tdLeave,
  .tandem-modal-dialog.gb-on #tdEdit {
    background: transparent !important; border: none !important; box-shadow: none !important;
    color: var(--gb-muted) !important; text-decoration: underline;
    min-height: 0 !important; font-size: 0.85rem !important; order: 5 !important;
  }
}

/* ─────────── Confirmación de cancelar reserva (SweetAlert) branded ───────────
 * Acotado a .gb-cancel-swal (clase puesta en el Swal.fire). Como toda esta hoja
 * solo carga con el flag, OFF = diálogo de siempre. Fuera el icono de exclamación;
 * botones grandes apilados: el seguro "No, keep booking" (teal) arriba, el
 * destructivo "Yes, cancel booking" (rojo discreto) abajo. NO usa #enrollModal
 * como ámbito porque el popup puede montarse fuera del modal. */
@media (max-width: 640px) { /* Rediseño SOLO móvil: avisos branded únicamente aquí. */
.swal2-popup.gb-cancel-swal {
  border-radius: 20px !important;
  padding: 24px 22px 22px !important;
}
.swal2-popup.gb-cancel-swal .swal2-icon { display: none !important; }
.swal2-popup.gb-cancel-swal .swal2-title {
  color: #0f2730 !important;
  font-size: 1.4rem !important;
  font-weight: 800 !important;
}
.swal2-popup.gb-cancel-swal .swal2-html-container { color: #5b6b72 !important; }
.swal2-popup.gb-cancel-swal .swal2-actions {
  flex-direction: column !important;
  width: 100% !important;
  gap: 10px !important;
  margin-top: 18px !important;
}
.swal2-popup.gb-cancel-swal .swal2-actions button {
  width: 100% !important;
  min-height: 54px !important;
  margin: 0 !important;
  border-radius: 14px !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}
/* "No, keep booking" (cancelButton) = acción segura, prominente, arriba. */
.swal2-popup.gb-cancel-swal .swal2-cancel {
  order: 0 !important;
  background: #02A9CA !important;
  color: #fff !important;
}
/* "Yes, cancel booking" (confirmButton) = destructiva, discreta, abajo. */
.swal2-popup.gb-cancel-swal .swal2-confirm {
  order: 1 !important;
  background: #fff !important;
  color: #d23b3b !important;
  border: 2px solid #f0c9c9 !important;
}

/* ───────────── Branding GLOBAL de todos los avisos (SweetAlert) ──────────────
 * Toda esta hoja solo carga con el flag → OFF = avisos por defecto. Quita los
 * iconos "raros" (warning/info/question, la exclamación naranja), redondea el
 * popup y agranda/redondea los botones (conservan el teal que ya pone cada
 * Swal.fire). Mantiene el tick de ÉXITO (reserva confirmada) y el de error. El
 * diálogo de cancelar (.gb-cancel-swal) manda por mayor especificidad. */
.swal2-popup { border-radius: 18px !important; }
.swal2-icon.swal2-warning,
.swal2-icon.swal2-info,
.swal2-icon.swal2-question { display: none !important; }
.swal2-title { color: #0f2730 !important; }
.swal2-html-container, .swal2-popup .swal2-content { color: #5b6b72 !important; }
.swal2-actions button.swal2-styled {
  border-radius: 12px !important;
  font-weight: 700 !important;
  padding: 12px 28px !important;
  min-height: 48px !important;
  box-shadow: none !important;
}
} /* fin @media — avisos branded solo en móvil */

/* ───────────── Vista "entrada/ticket" de clase YA reservada ──────────────
 * Calma el arco iris (tarjetas verde/morado/ámbar/azul) a blanco branded, hace
 * el botón de videollamada grande y apila los botones de acción. Mantiene los
 * colores de TÍTULO/icono como señal semántica (check verde = reservado). */
#enrollModal.gb-on #bookedClassDetails .enroll-modal-card {
  background: #fff !important;
  border: 1px solid var(--gb-line) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}
#enrollModal.gb-on #bookedClassDetails .text-blue-700,
#enrollModal.gb-on #bookedClassDetails .text-amber-800 { color: var(--gb-muted) !important; }

/* Botón "Join Now" → grande, ancho completo, prominente. */
#enrollModal.gb-on #joinNowContainer a {
  display: flex !important;
  width: 100% !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 54px !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 16px rgba(2, 169, 202, 0.3) !important;
}

/* Participantes con punto-avatar (igual que el héroe). */
#enrollModal.gb-on #bookedStudentsList li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 0.95rem !important;
  color: var(--gb-ink) !important;
}
#enrollModal.gb-on #bookedStudentsList li::before {
  content: "";
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #d8f1f7;
  border: 1px solid #b6e4ee;
  flex: 0 0 auto;
}
/* El punto verde ya lo pone el ::before de arriba. El JS mete ADEMÁS un <span> verde
   inline → salían DOS puntos (Guille). Ocultamos ese <span> para dejar solo uno. */
#enrollModal.gb-on #bookedStudentsList li > span:first-child {
  display: none !important;
}

/* Acciones (Cancel / Close) grandes y apiladas: Close teal arriba, Cancel rojo abajo. */
@media (max-width: 640px) {
  #enrollModal.gb-on #bookedClassDetails { padding: 16px !important; }
  #enrollModal.gb-on #bookedClassDetails .flex.space-x-3 {
    flex-direction: column !important;
    gap: 10px !important;
  }
  #enrollModal.gb-on #bookedClassDetails #cancelBookingBtn,
  #enrollModal.gb-on #bookedClassDetails #closeBookedDetails {
    width: 100% !important;
    margin: 0 !important;
    min-height: 54px !important;
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    border-radius: 14px !important;
    padding: 14px !important;
  }
  #enrollModal.gb-on #bookedClassDetails #closeBookedDetails {
    order: 0 !important;
    background: #02A9CA !important;
    color: #fff !important;
    border-color: transparent !important;
  }
  #enrollModal.gb-on #bookedClassDetails #cancelBookingBtn { order: 1 !important; }
}

/* ───────────── Paso 2 "Review" (Ready to Book) branded ─────────────
 * Mismo lenguaje que la entrada: tarjetas blancas limpias, sin tinte teal. */
#enrollModal.gb-on #step2 h4 {
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  color: var(--gb-ink) !important;
}
#enrollModal.gb-on #step2 .enroll-modal-card {
  background: #fff !important;
  border: 1px solid var(--gb-line) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}
#enrollModal.gb-on #step2 .enroll-modal-section-title { color: var(--gb-ink) !important; }
#enrollModal.gb-on #step2 .enroll-modal-section-title i { color: var(--gb-brand) !important; }
#enrollModal.gb-on #step2 [id^="review"] { color: var(--gb-ink) !important; }
#enrollModal.gb-on #step2 #reviewGoals {
  border-radius: 12px !important;
  border: 1px solid var(--gb-line) !important;
  background: #f8fafb !important;
}
/* Caja de info inferior ("Your session will be confirmed...") → neutra branded. */
#enrollModal.gb-on #step2 > div:last-child {
  background: #f4fbfd !important;
  border: 1px solid #cfeef5 !important;
  border-radius: 14px !important;
}
#enrollModal.gb-on #step2 > div:last-child p { color: var(--gb-muted) !important; }

/* ───────────── Rediseño Duolingo: selector de idioma "¿Qué quieres practicar?" ─────────────
 * Lista de botones GRANDES (bandera + nombre + subtítulo con nº de grupos + flecha).
 * Solo se ve en MÓVIL y solo en la "pantalla 1" (contenedor .gb-screen-picker); fuera
 * de ahí queda oculto para no tocar el escritorio ni la pantalla del calendario.
 * Las clases .gb-lang-* / .gb-schedule solo existen con el flag (esta hoja solo carga
 * con él), así que con OFF nada de esto aplica. */
.gb-lang-picker { display: none; position: relative; padding: 4px 0 8px; }
.gb-cal-back { display: none; }

@media (max-width: 640px) {
  /* Estilo app: fuera el pie de marketing en las pantallas de reserva (más aire,
     "bottom al mínimo"). Solo con el flag (body.gb-app) y solo móvil. */
  body.gb-app .site-footer { display: none !important; }

  /* En el horario re-vestido, el selector de banderas manda: fuera el h1 legacy y el
     desplegable de idioma (redundantes con el selector). */
  .gb-schedule .schedule-page-heading,
  .gb-schedule .schedule-language-wrap { display: none !important; }

  /* Pantalla 1 (selector): mostrar el picker y ocultar TODO lo demás del contenedor.
     Ocupa la pantalla (Duolingo) para que el pie no se cuele por debajo. */
  .gb-schedule.gb-screen-picker > *:not(.gb-lang-picker) { display: none !important; }
  .gb-schedule.gb-screen-picker .gb-lang-picker { display: block; min-height: calc(100dvh - 120px); }

  /* Pantalla 2 (calendario): botón "volver a idiomas" arriba-izq. */
  .gb-schedule:not(.gb-screen-picker) .gb-cal-back {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 0 0 12px; padding: 8px 12px 8px 4px;
    color: var(--gb-brand-dark); font-weight: 700; font-size: 0.95rem;
    background: none; border: none; text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .gb-schedule:not(.gb-screen-picker) .gb-cal-back i { font-size: 1rem; }
}

/* Botón atrás arriba-izq (a la home) del selector. */
.gb-back {
  position: absolute; top: 0; left: 0; z-index: 2;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  color: var(--gb-ink); font-size: 1.1rem; text-decoration: none;
  border-radius: 12px; -webkit-tap-highlight-color: transparent;
}
.gb-lang-prompt {
  font-size: 1.5rem; font-weight: 800; color: var(--gb-ink);
  text-align: center; padding: 20px 44px 4px; letter-spacing: -0.01em;
}
.gb-lang-list { display: flex; flex-direction: column; gap: 14px; max-width: 460px; margin: 30px auto 4px; }
/* Botón grande por idioma: relieve 3D (borde inferior grueso que se hunde al pulsar). */
.gb-lang-row {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 16px 18px;
  border-radius: 18px; text-decoration: none;
  background: #fff; color: #3C4043;
  border: 2px solid #E6E9EF; border-bottom-width: 5px;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, border-bottom-width .12s ease, border-color .22s ease, background-color .22s ease, box-shadow .22s ease;
}
/* Pulsado: además de hundirse, el botón se pone AZUL OSCURO de marca (borde + sombra
   inferior + una sombra PROFUNDA azul por debajo) A LA VEZ que se presiona. La sombra
   más oscura y profunda que pidió Guille; y TARDA un pelín más en irse al soltar
   (transición .22s en color/fondo/sombra) para que "dure un microsegundo más". Solo
   dura el toque (:active); al soltar navega al calendario de ese idioma. */
.gb-lang-row:active {
  transform: translateY(3px); border-bottom-width: 2px;
  border-color: var(--gb-brand-dark); background: #e3f5fa;
  box-shadow: 0 8px 18px rgba(2, 136, 169, .55);
}
.gb-lang-row--current { border-color: var(--gb-brand); background: #f4fbfd; }
/* Bandera: tamaño fijo (una regla global de móvil infla los SVG; lo acotamos). */
.gb-lang-flag { flex: 0 0 auto; width: 42px; text-align: center; font-size: 34px; line-height: 1; }
.gb-lang-flag .gb-flag,
.gb-lang-flag .gb-senyera { width: 34px !important; height: 23px !important; border-radius: 3px; display: inline-block; box-shadow: 0 0 0 1px rgba(0,0,0,.06); }
/* Banderas flag-icons (SVG reales): mismo recuadro fijo, rellenando (cover) para que no
   queden con bordes vacíos. Sustituyen al emoji que fallaba en Windows (Rusia, etc.). */
.gb-lang-flag .fi { width: 34px !important; height: 23px !important; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.06); background-size: cover; }
.gb-lang-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* Nombre en una línea (nunca partir: una regla global aplica hyphens:auto). */
.gb-lang-name {
  font-size: 1.05rem; font-weight: 800; color: var(--gb-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  hyphens: none; -webkit-hyphens: none; overflow-wrap: normal; word-break: normal;
}
.gb-lang-sub { font-size: 0.8rem; font-weight: 600; color: var(--gb-muted); }
.gb-lang-row--current .gb-lang-sub { color: var(--gb-brand-dark); }
.gb-lang-arrow { flex: 0 0 auto; color: #b9c4cc; font-size: 1rem; }

/* ───────────── Cabecera del horario: más fina, mismo azul (móvil) ─────────────
 * Solo en esta página (la hoja solo carga aquí). La barra fija medía ~120px; la
 * dejamos en ~60px (logo más pequeño + menos padding) y ajustamos el hueco que el
 * body reservaba para que no quede un gap enorme ni se solape el contenido. */
@media (max-width: 640px) {
  .navbar { padding: 0 !important; }
  .navbar > .container { padding: 8px 1rem !important; min-height: 0 !important; }
  .navbar .logo { height: 34px !important; }
  .navbar .logo-img { height: 30px !important; max-height: 30px !important; }
  body.page-legacy { padding-top: 62px !important; }
  body.page-legacy > .container { padding-top: 0.75rem !important; }
}

/* ═══════════════ TÁNDEMS: mismo tratamiento que booking ═══════════════
 * Acotado a .tandem-modal-dialog.gb-on. Respeta su teal propio (#0d9488).
 * (La cabecera fina y los avisos branded ya los hereda al cargar esta hoja.) */
@media (max-width: 640px) {
  dialog.tandem-modal-dialog.gb-on[open] {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  dialog.tandem-modal-dialog.gb-on[open]::backdrop { background: rgba(4, 20, 24, 0.98); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
}
.tandem-modal-dialog.gb-on .tandem-modal-header h3 { font-size: 1.05rem !important; }
.tandem-modal-dialog.gb-on .tandem-modal-header button[aria-label] {
  width: 44px !important;
  height: 44px !important;
}

/* Pie: botones grandes apilados (conservan su color teal/danger/ghost). */
@media (max-width: 640px) {
  .tandem-modal-dialog.gb-on > div:last-child {
    flex-direction: column !important;
    gap: 10px !important;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom)) !important;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06) !important;
  }
  /* `:not(.hidden)` CLAVE: no anular el display:none de los botones ocultos por rol
   * (si no, salen Join call / Leave / Cancel a la vez con "Join"). */
  .tandem-modal-dialog.gb-on > div:last-child > a:not(.hidden),
  .tandem-modal-dialog.gb-on > div:last-child > button:not(.hidden) {
    width: 100% !important;
    min-height: 54px !important;
    margin: 0 !important;
    border-radius: 16px !important;
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
  /* La acción principal (Join / Suggest) arriba del grupo. */
  .tandem-modal-dialog.gb-on #tdJoin,
  .tandem-modal-dialog.gb-on #tpSubmit,
  .tandem-modal-dialog.gb-on #tdyPropose { order: 0 !important; }
}

/* "Publish link" fuera: los enlaces se autocrean (Daily). El host solo necesita
 * "Join the call" + "Cancel tandem". (Solo aparecía como fallback con link pendiente.) */
.tandem-modal-dialog.gb-on #tdSetLink { display: none !important; }

/* Native (offered) vs Practising (sought) explícitos. Oculta el "X ⇄ Y" redundante. */
.tandem-modal-dialog.gb-on #tdLangs { display: none !important; }
.gb-tandem-langs { display: flex; flex-direction: column; gap: 8px; }
.gb-tandem-langs > div {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.1rem;
  font-weight: 800;
  color: #0f2730;
}
.gb-tl-tag {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: #0a5c54;
  background: #d6f3ee;
  border: 1px solid #abe5da;
  border-radius: 999px;
  padding: 3px 9px;
  flex: 0 0 auto;
}

/* Botón "Request a class" del rediseño: SOLO móvil (en escritorio, como hoy). */
@media (min-width: 641px) {
  .gb-req-btn { display: none !important; }
}

/* Etiquetas de sección un punto más legibles. */
#enrollModal.gb-on .enroll-spec-label {
  font-size: 0.72rem !important;
  color: var(--gb-muted) !important;
}

/* ═══════════ Pantalla 2 (calendario): tarjetas de clase estilo "ticket" ═══════════
 * Acotado a .gb-schedule y solo móvil. Cada hueco = tarjeta con profe, nivel/ocupación
 * y una PASTILLA clara: "Unirte · X/4" (grupo con gente) o "Reservar" (hora libre).
 * La pastilla la pinta la plantilla (.gb-slot-cta), oculta por defecto (desktop/flag
 * OFF) y visible solo aquí. Se esconde el circulito "+" flotante (.slot-plus). */
.gb-slot-cta { display: none; }
@media (max-width: 640px) {
  /* Tira de días HORIZONTAL robusta: no depender de que Tailwind (por CDN, frágil)
     pinte grid-cols-7. Forzamos las 7 columnas por CSS propio. */
  .gb-schedule .grid.grid-cols-7 { display: grid !important; grid-template-columns: repeat(7, 1fr) !important; gap: 4px !important; }
  .gb-schedule .grid.grid-cols-7 button { padding: 8px 2px !important; min-width: 0 !important; }
  .gb-schedule .book-slot {
    padding: 14px 15px !important;
    border-radius: 18px !important;
    border-width: 2px !important;
    border-bottom-width: 5px !important;
    color: var(--gb-ink) !important;
  }
  .gb-schedule .book-slot .font-bold { font-size: 1rem !important; }
  .gb-schedule .slot-plus { display: none !important; }
  .gb-schedule .gb-slot-cta {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 12px; padding: 9px 18px;
    border-radius: 999px; font-weight: 800; font-size: 0.92rem;
    color: #fff; background: var(--gb-brand);
    box-shadow: 0 3px 0 0 var(--gb-brand-dark);
  }
  /* Clase LLENA (4/4): pastilla en morado apagado. Informa de que está completa;
     no es un botón para apuntarse (al abrirla solo se ve quién está dentro). */
  .gb-schedule .gb-slot-cta--full {
    color: #6b21a8;                /* purple-800 */
    background: #f3e8ff;           /* purple-100 */
    box-shadow: 0 3px 0 0 #e9d5ff; /* purple-200 */
  }
  /* "Pedir una clase": mismo tamaño de ticket. */
  .gb-schedule .request-day-btn { border-radius: 18px !important; padding: 14px 15px !important; border-bottom-width: 5px !important; }
  .gb-schedule .request-day-btn .slot-plus { display: none !important; }
}

/* ──────────────────────── PIE: botones GIGANTES (móvil) ─────────────────────── */
@media (max-width: 640px) {
  #enrollModal.gb-on #formActions {
    flex-direction: column !important;
    gap: 10px !important;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom)) !important;
    background: #fff !important;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06) !important;
  }
  /* El grupo cancel/next/confirm a columna y ancho completo (quita el ml-auto). */
  #enrollModal.gb-on .enroll-modal-footer-actions {
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
    order: 0 !important;
  }
  #enrollModal.gb-on #prevStep { order: 1 !important; }

  /* Todos los botones: altos, anchos, texto grande. */
  #enrollModal.gb-on #formActions button {
    width: 100% !important;
    min-height: 56px !important;
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    border-radius: 16px !important;
    white-space: normal !important;
    padding: 12px 16px !important;
  }
  /* La acción principal manda: a marca, arriba del grupo. */
  #enrollModal.gb-on #nextStep,
  #enrollModal.gb-on #confirmBooking {
    order: 0 !important;
    background: var(--gb-brand) !important;
    border-color: transparent !important;
    box-shadow: 0 6px 16px rgba(2, 169, 202, 0.32) !important;
  }
  #enrollModal.gb-on #confirmBooking { background: #16a34a !important; box-shadow: 0 6px 16px rgba(22,163,74,.30) !important; }
  /* Secundarios (cancelar / atrás): grandes pero discretos. */
  #enrollModal.gb-on #cancelBooking,
  #enrollModal.gb-on #prevStep {
    order: 1 !important;
    background: #fff !important;
    color: var(--gb-muted) !important;
    border: 2px solid var(--gb-line) !important;
    box-shadow: none !important;
  }
  #enrollModal.gb-on #cancelBooking { order: 2 !important; }
}

/* ─────────────────── Paso 2 "Ready to Book" + clase ya reservada ─────────────── */
#enrollModal.gb-on #step2 .text-center h4 {
  font-size: 1.4rem !important;
  font-weight: 800 !important;
}
#enrollModal.gb-on #bookedClassDetails {
  padding: 4px 2px !important;
}
/* Cualquier botón dentro de la vista de reserva confirmada también grande. */
@media (max-width: 640px) {
  #enrollModal.gb-on #bookedClassDetails a,
  #enrollModal.gb-on #bookedClassDetails button {
    min-height: 52px !important;
    font-size: 1rem !important;
    border-radius: 14px !important;
  }
}