/* Estilos de la pantalla de CLASES (/schedule/). Estaban DENTRO del HTML
   (27 KB en cada carga, que el navegador no puede guardar). Sacados a
   fichero el 14/08/2026: mismo CSS, ni una regla cambiada, pero ahora se
   descarga una vez y se reutiliza en cada cambio de pantalla.
   Ver templates/global-schedule.html. */
  /* Profe destacado (11/08/2026): los diez con más puntos de la temporada. Borde
     dorado, estrella y un brillo LENTO. Nada de parpadeo rápido: cansa la vista y
     en una rejilla llena de huecos sería una discoteca. Se respeta a quien pide
     menos animación en su sistema. */
  .pbc-star-slot {
    border-color: #e0a800 !important;
    box-shadow: 0 0 0 1px rgba(224, 168, 0, .35), 0 0 10px rgba(224, 168, 0, .28);
    animation: pbc-star-glow 2.8s ease-in-out infinite;
  }
  .pbc-star-mark {
    color: #e0a800;
    font-size: .78em;
    flex: 0 0 auto;
  }
  @keyframes pbc-star-glow {
    0%, 100% { box-shadow: 0 0 0 1px rgba(224, 168, 0, .35), 0 0 6px rgba(224, 168, 0, .20); }
    50%      { box-shadow: 0 0 0 1px rgba(224, 168, 0, .55), 0 0 14px rgba(224, 168, 0, .45); }
  }
  @media (prefers-reduced-motion: reduce) {
    .pbc-star-slot { animation: none; }
  }

  /* ---------------------------------------------------------------------------
     TARJETA DE CLASE DEL MÓVIL v3 (maqueta plana aprobada por Guille el
     19/08/2026, "así está bien, ponlo tal cual"). La v2 del 18/08 (gradientes,
     sombras 3D, botón amarillo/turquesa) no le gustó nada al verla montada:
     "no me gustan los colores, no me gustan las formas". Ahora: blanco liso,
     azul de marca #126EF8, sin degradados ni sombras. El botón "cortado" que
     veía era el `box-shadow: 0 5px 0` de antes recortado por el
     `overflow: hidden` de la tarjeta; al quitar la sombra 3D desaparece solo.
     --------------------------------------------------------------------------- */
  .pbc-mslot {
    position: relative;
    min-height: 92px;
    padding: 13px 14px 12px 16px !important;
    border: 1px solid #e2e7f0 !important;
    border-radius: 16px !important;
    color: #15263b !important;
    background: #ffffff !important;
    box-shadow: none;
  }
  .pbc-mslot-top,
  .pbc-mslot-bottom {
    position: relative;
    z-index: 2;
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .pbc-mslot-top { min-height: 29px; }
  .pbc-mslot-bottom { min-height: 39px; margin-top: 5px; }
  .pbc-mslot-name-wrap {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
  }
  .pbc-mslot-teacher {
    min-width: 0;
    /* El nombre recorta con "..." si es largo, y ese recorte (overflow) se comía
       el subrayado, que cae por debajo de la línea: se le deja ese hueco abajo
       y se recupera con el margen negativo. */
    padding-bottom: 6px;
    margin-bottom: -6px;
    /* `clip` en vez de `hidden`: con `hidden` el nombre es una caja que se puede
       desplazar y el móvil le pintaba una barrita gris al lado; `clip` recorta
       igual (y el "..." sigue saliendo) pero ya no es una caja desplazable.
       El `hidden` de antes se queda de reserva para navegadores viejos. */
    overflow: hidden;
    overflow: clip;
    scrollbar-width: none;
    color: #15263b;
    font-size: 19px;
    font-weight: 900;
    line-height: 1.15;
    text-decoration-line: underline;
    text-decoration-color: rgba(0, 102, 255, .68);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
  }
  .pbc-mslot-teacher::-webkit-scrollbar { width: 0; height: 0; display: none; }
  /* v2 (18/08/2026): foto del profe a la izquierda. Los !important del tamaño
     son por viewport-fix.css (img { width/height:auto !important } en móvil):
     sin ellos la foto saldría a su tamaño natural, como le pasó al logo. */
  .pbc-mslot-ava {
    display: flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    color: #126ef8;
    background: #e9f0fe;
    font-size: 17px;
    font-weight: 700;
  }
  .pbc-mslot-ava img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    display: block;
  }
  .pbc-mslot-who {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 1px;
  }
  .pbc-mslot-sub {
    overflow: hidden;
    color: #5c6b80;
    font-size: 13px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .pbc-mslot--past .pbc-mslot-sub { color: #8b96a5; }
  /* Bolitas de plazas: llena = alguien sentado, punteada = hueco libre. */
  .pbc-mslot-dots { display: inline-flex; align-items: center; }
  .pbc-mslot-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-left: 4px;
    border: 1px solid #c4d2e3;
    border-radius: 50%;
    background: transparent;
  }
  .pbc-mslot-dot:first-child { margin-left: 0; }
  .pbc-mslot-dot--on {
    border-color: #126ef8;
    background: #126ef8;
  }
  .pbc-mslot-dots em {
    margin-left: 7px;
    color: #5c6b80;
    font-size: 13px;
    font-weight: 700;
    font-style: normal;
    white-space: nowrap;
  }
  .pbc-mslot--past .pbc-mslot-dot--on {
    border-color: #b9c3cf;
    background: #b9c3cf;
  }
  .pbc-mslot-btn {
    display: inline-flex;
    min-width: 88px;
    min-height: 38px;
    margin-left: auto;
    padding: 8px 20px;
    flex: 0 1 auto;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
    border-radius: 10px;
    color: #ffffff;
    background: #126ef8;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
  }
  .pbc-mslot:active .pbc-mslot-btn { background: #0e57c4; }
  .pbc-mslot-btn--book {
    color: #126ef8;
    background: transparent;
    border: 1px solid #126ef8;
  }
  .pbc-mslot:active .pbc-mslot-btn--book { background: #e9f0fe; }
  /* Chapa de "no hay nada que pulsar": clase llena, ya reservada o pasada. */
  .pbc-mslot-tag {
    display: inline-flex;
    min-height: 34px;
    margin-left: auto;
    padding: 7px 13px;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
  }
  .pbc-mslot-tag svg { width: 16px; height: 16px; flex: 0 0 16px; }

  /* Clase llena */
  .pbc-mslot-tag--full {
    color: #5132a0;
    background: #f1ecfc;
  }
  /* Ya la tengo reservada */
  .pbc-mslot-tag--booked {
    color: #0e4bb0;
    background: #e9f0fe;
  }
  /* Pasada o cerrada */
  .pbc-mslot.pbc-mslot--past {
    border-color: #e2e7f0 !important;
    color: #758294 !important;
    background: #f6f7f9 !important;
  }
  .pbc-mslot--past .pbc-mslot-teacher { color: #687587; text-decoration-color: #9aa6b4; }
  .pbc-mslot-tag--past {
    color: #687587;
    background: #e6e9ed;
  }
  /* Profe destacado de la temporada: solo la chapa, sin marco ni brillo */
  .pbc-mslot-toptag {
    display: inline-flex;
    min-height: 24px;
    padding: 3px 9px;
    flex: 0 0 auto;
    align-items: center;
    border-radius: 999px;
    color: #0e4bb0;
    background: #e9f0fe;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
  }

  /* Circulito de una persona dentro de la ventana de la clase: su foto o el animal
     de su rango. El aro del rango lo pone .pbc-flair alrededor (static/js/flair.js). */
  .pbc-tk-ava {
    width: var(--flair-size, 2.1rem);
    height: var(--flair-size, 2.1rem);
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    background: #e6f6fa;
    color: #02a9ca;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
  }
  .pbc-tk-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }

  /* Botón "ⓘ" de la tarjeta de clase: abre la ficha de la profesora. Vive aparte del
     nombre porque el nombre entero pulsable se comía el clic de reservar (07/08/2026). */
  .pbc-slot-info {
    /* Las franjas que no se pueden reservar (pasadas, llenas, de otro idioma) llevan
       pointer-events:none para que no se puedan pulsar... y eso apagaba también la
       "ⓘ" de dentro: pulsarla no hacía NADA (Guille 21/08/2026). La ficha de la
       profesora se puede ver siempre, así que aquí se vuelve a encender. */
    pointer-events: auto;
    border: 0;
    background: transparent;
    padding: 0 2px;
    line-height: 1;
    color: currentColor;
    opacity: .55;
    cursor: pointer;
    flex: 0 0 auto;
  }
  .pbc-slot-info:hover,
  .pbc-slot-info:focus-visible { opacity: 1; }
  .pbc-slot-info i { font-size: .78rem; pointer-events: none; }
  /* El tick de ÉXITO usa el verde estándar de SweetAlert2 (animado, limpio). Antes se
     repintaba a turquesa a mano y quedaba raro (feedback Guille); mejor el de serie. */
  /* When SweetAlert2 is rendered inside the enrollModal <dialog> (so it lives
     in the browser's top layer and isn't occluded by the dialog), keep its
     container centered and fully covering the dialog. */
  #enrollModal > .swal2-container {
    position: fixed !important;
    inset: 0 !important;
    /* 18/08/2026: `safe center` centra el popup pero, si no cabe, lo pega
       arriba en vez de dejar el borde superior fuera de la pantalla (con
       `center` a secas el trozo que sobra por arriba es INALCANZABLE). */
    align-items: safe center !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }
  /* Popup "Add your WhatsApp" (al reservar sin número): mismo look que el panel
     "Request a class" (tipo ticket): popup redondeado, título fuerte, botón
     primario morado degradado y "Cancel" en contorno gris. buttonsStyling:false
     en el Swal.fire deja que estas reglas manden. */
  .swal2-popup.wa-prompt-swal {
    border-radius: 20px !important;
    padding: 24px 22px 20px !important;
  }
  .swal2-popup.wa-prompt-swal .swal2-title {
    color: #111827 !important;
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    padding: 0 !important;
  }
  /* 18/08/2026: el contenido del popup NO debe tener su propio scroll. Con la
     lista de 210 prefijos desplegada, SweetAlert2 daba scroll interno al
     .swal2-html-container y la cajita del numero se iba fuera y ya no habia
     forma de volver a ella ("por defecto sale, pero si toco el panel
     desaparece", Guille). Ahora el que scrollea, si hace falta, es el popup
     entero: el titulo, el campo y los botones siguen siendo alcanzables. */
  .swal2-popup.wa-prompt-swal .swal2-html-container {
    margin: 0.9rem 0 0 !important;
    overflow: visible !important;
    max-height: none !important;
  }
  /* El popup TAMPOCO recorta: la lista de paises es un desplegable flotante
     (position:absolute) que cuelga por debajo de la fila. Si el popup
     recortara, volveria a cortarse el buscador. Como el contenido propio es
     corto (frase + fila + nota), no hace falta scroll aqui; si aun asi no
     cupiera, scrollea el contenedor (align-items: safe center mas abajo). */
  .swal2-popup.wa-prompt-swal { overflow: visible !important; }
  /* La fila "prefijo + numero" se queda SIEMPRE a la vista con la lista
     abierta: la lista se limita en alto para no comerse la pantalla. */
  .swal2-popup.wa-prompt-swal .pbc-cc-list { max-height: 40vh !important; }
  .swal2-popup.wa-prompt-swal .pbc-cc-panel { max-height: none !important; }
  .swal2-popup.wa-prompt-swal .swal2-actions {
    width: 100% !important;
    gap: 10px !important;
    margin-top: 20px !important;
    justify-content: flex-end !important;
  }
  .swal2-popup.wa-prompt-swal .swal2-actions button {
    margin: 0 !important;
    min-height: 44px !important;
    padding: 0 20px !important;
    border-radius: 12px !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    box-shadow: none !important;
  }
  .swal2-popup.wa-prompt-swal .swal2-confirm {
    background: linear-gradient(135deg, #a23e8c, #7a2a66) !important;
    color: #fff !important;
    box-shadow: 0 1px 3px rgba(122, 42, 102, 0.3) !important;
  }
  .swal2-popup.wa-prompt-swal .swal2-cancel {
    background: #fff !important;
    color: #374151 !important;
    border: 1px solid #d1d5db !important;
  }
  @media (max-width: 640px) {
    .swal2-popup.wa-prompt-swal .swal2-actions { flex-direction: column-reverse !important; }
    .swal2-popup.wa-prompt-swal .swal2-actions button { width: 100% !important; }
  }
  /* PBC-85: burbujas de REGIÓN (All / Spain / LATAM) bajo el idioma. Misma forma
     que las pestañas del calendario de tándems (.tandem-lang-tab), pero en azul
     pálido de marca; la activa va en azul sólido #02A9CA. */
  .schedule-region-tab {
    display: inline-flex; align-items: center; padding: 0.35rem 0.9rem;
    border-radius: 9999px; font-size: 13px; font-weight: 600; text-decoration: none;
    color: #036b82; background: #e8f7fb; border: 1px solid #bce6f0;
    transition: all .15s ease; white-space: nowrap;
  }
  .schedule-region-tab:hover { background: #d3eff7; border-color: #02A9CA; }
  .schedule-region-tab.active {
    background: #02A9CA; color: #fff; border-color: #02A9CA;
    box-shadow: 0 1px 3px rgba(2, 169, 202, .3);
  }
  /* Modal "Request a class": en móvil dos reglas globales (mobile-responsive.css)
     rompían las tarjetas de "Session type": una infla todo radio/checkbox a 48px
     con padding, y otra aplica hyphens/overflow-wrap:break-word a cada div. Eso
     estrujaba la columna del texto y partía las palabras ("Priv ate", "Sh ort").
     Lo anulamos SOLO dentro de este modal. */
  #requestModal .request-type-radio {
    min-width: 0; min-height: 0;
    width: 20px; height: 20px;
    padding: 0; flex: none;
  }
  #requestModal .request-type-card,
  #requestModal .request-type-card div {
    hyphens: none; -webkit-hyphens: none;
    overflow-wrap: normal; word-wrap: normal; word-break: normal;
  }
  /* Nombre del profe en la tarjeta de hueco: NUNCA partido a la mitad
     ("Guillerm/o"). Misma regla global de móvil (hyphens + overflow-wrap:
     break-word en cada div) que rompía el modal de arriba. La anulamos y, si el
     nombre no cabe, lo recortamos con puntos suspensivos. */
  .book-slot .font-bold,
  .book-slot .pbc-slot-person {
    hyphens: none; -webkit-hyphens: none;
    overflow-wrap: normal; word-wrap: normal; word-break: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .book-slot .font-bold { flex: 1 1 auto; }
  /* La chapa "3 joined" no se encoge: el nombre manda en el hueco que sobra. */
  .book-slot .font-bold + div { flex: 0 0 auto; white-space: nowrap; }
  /* Calendario público: ventanita de alta ("guest gate") al pulsar Reservar sin cuenta. */
  /* max-width !important: una regla global (global-responsive) fuerza max-width:100%
     y, sin esto, la ventanita se estira a lo ancho de la pantalla (misma clase de
     gotcha que los otros overrides globales del proyecto). */
  /* inset+margin auto: centra la ventanita en la pantalla (un <dialog> perdía el centrado
     por los overrides globales y salía pegada arriba). */
  .guest-gate-dialog { border: none; border-radius: 20px; padding: 0; width: 92vw; max-width: 420px !important; background: transparent; inset: 0 !important; margin: auto !important; }
  .guest-gate-dialog::backdrop { background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(2px); }
  .guest-gate-card { position: relative; background: #fff; border-radius: 20px; padding: 28px 24px 24px; box-shadow: 0 20px 60px rgba(0,0,0,0.25); text-align: center; }
  /* Perforación de ticket: línea de puntos a lo ancho del ticket + muescas
     semitransparentes en los bordes (del mismo color que el fondo, así se funden y
     parece troquelado de verdad). Separa la cabecera del "resguardo" (los datos). */
  .guest-gate-perf { position: relative; height: 0; margin: 4px -24px 16px; border-top: 2px dashed #cbd5e1; }
  .guest-gate-perf::before, .guest-gate-perf::after { content: ''; position: absolute; top: -13px; width: 24px; height: 24px; border-radius: 50%; background: rgba(15, 23, 42, 0.55); }
  .guest-gate-perf::before { left: -12px; }
  .guest-gate-perf::after { right: -12px; }
  /* Blindada contra las reglas globales de botones (las mismas que aplastan/estiran
     botones en otros modales): sin esto la X se estira a lo ancho con un recuadro
     verde. Tamaño fijo y arriba a la derecha, estilo estándar. */
  .guest-gate-close { position: absolute !important; top: 10px !important; right: 10px !important; left: auto !important; bottom: auto !important; width: 36px !important; min-width: 0 !important; max-width: 36px !important; height: 36px !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; border: none !important; outline: none !important; box-shadow: none !important; background: transparent !important; border-radius: 50%; display: flex !important; align-items: center; justify-content: center; font-size: 24px; line-height: 1; color: #94a3b8; cursor: pointer; z-index: 5; }
  .guest-gate-close:hover { color: #475569; background: #f1f5f9 !important; }
  .guest-gate-emoji { font-size: 40px; margin-bottom: 6px; }
  .guest-gate-title { font-size: 20px; font-weight: 800; color: #1f2937; margin: 0 0 8px; }
  .guest-gate-text { font-size: 14px; color: #6b7280; margin: 0 auto 18px; max-width: 340px; line-height: 1.5; }
  .guest-gate-summary { background: #f0f9fb; border: 1px solid #cdeef4; border-radius: 14px; padding: 12px 14px; margin-bottom: 18px; text-align: left; }
  .guest-gate-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 3px 0; }
  .guest-gate-row span { color: #64748b; }
  .guest-gate-row b { color: #0f172a; font-weight: 700; text-align: right; }
  .guest-gate-btn { display: block; width: 100%; padding: 13px 16px; border-radius: 12px; font-weight: 700; font-size: 15px; text-decoration: none; transition: all .15s ease; }
  .guest-gate-btn--primary { background: #02A9CA; color: #fff; box-shadow: 0 4px 0 0 #0286a1; margin-bottom: 10px; }
  .guest-gate-btn--primary:hover { background: #0298b5; }
  .guest-gate-btn--ghost { background: #fff; color: #1666D6; border: 1px solid #dbe4f0; }
  .guest-gate-btn--ghost:hover { background: #f5f8ff; }

  /* ── Ficha de clase: "Reservar" obvio e imposible de perder (corta abrir-mirar-cerrar) ──
     TODO scoped a :not(.gb-on) → el rediseño guiado (gb, opt-in móvil) se queda igual. */
  /* Un solo paso: fuera el indicador falso de "paso 1 / paso 2" en el flujo base. */
  #enrollModal:not(.gb-on) #stepTabsContainer { display: none !important; }
  /* El aviso del siguiente paso solo en el flujo base (gb tiene su propio guion). */
  #enrollModal.gb-on #bookingReassure { display: none !important; }
  /* Aviso del siguiente paso (arriba de la ficha). CSS propio, no clases Tailwind
     nuevas: en prod Tailwind va compilado y no recogería clases inexistentes. */
  #enrollModal #bookingReassure {
    display: flex; align-items: flex-start; gap: 0.75rem;
    margin-bottom: 1rem; padding: 0.625rem 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(2, 169, 202, 0.30);
    background: rgba(2, 169, 202, 0.10);
  }
  #enrollModal #bookingReassure i { color: #02A9CA; font-size: 1rem; margin-top: 2px; flex-shrink: 0; }
  #enrollModal #bookingReassure p { margin: 0; font-size: 0.875rem; line-height: 1.4; color: #374151; }
  @media (min-width: 640px) {
    #enrollModal #bookingReassure { margin-bottom: 1.5rem; padding: 0.75rem 1rem; }
  }

  /* ── TEMA DE LA CLASE (titulo y descripcion que escribe el profe en su
     disponibilidad). Arriba del paso 1, siempre visible, tambien con el
     rediseño guiado (gb): es lo que dice de que va la clase. ── */
  #enrollModal .pbc-class-topic {
    display: flex; align-items: flex-start; gap: 0.75rem;
    margin-bottom: 1rem; padding: 0.75rem 0.875rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(2, 169, 202, 0.30);
    border-left: 4px solid #02A9CA;
    background: rgba(2, 169, 202, 0.06);
  }
  #enrollModal .pbc-class-topic-icon {
    color: #02A9CA; font-size: 1rem; margin-top: 3px; flex-shrink: 0;
  }
  #enrollModal .pbc-class-topic-text { min-width: 0; }
  #enrollModal .pbc-class-topic-title {
    margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.3; color: #0f172a;
    overflow-wrap: anywhere;
  }
  #enrollModal .pbc-class-topic-desc {
    margin: 0.25rem 0 0; font-size: 0.875rem; line-height: 1.45; color: #374151;
    white-space: pre-line; overflow-wrap: anywhere;
  }
  @media (min-width: 640px) {
    #enrollModal .pbc-class-topic { margin-bottom: 1.5rem; padding: 0.875rem 1rem; }
    #enrollModal .pbc-class-topic-title { font-size: 1.0625rem; }
  }
  /* "Tu primera clase es gratis" en su propia fila, centrada, bajo el botón. */
  #enrollModal #firstFreeUnderCta {
    flex: 0 0 100%; width: 100%;
    display: flex; justify-content: center;
    padding-top: 0.5rem;
  }
  @media (max-width: 639px) {
    /* En móvil "Reservar" es la acción principal: ocupa el ancho que sobra y manda la
       vista; "Cancelar" queda compacto al lado. (Etiqueta corta: nunca se recorta.) */
    #enrollModal:not(.gb-on) #formActions #confirmBooking {
      flex: 1 1 auto !important;
      min-width: 0 !important;
      font-size: 0.95rem !important;
      font-weight: 700 !important;
      padding-top: 0.6rem !important;
      padding-bottom: 0.6rem !important;
    }
    #enrollModal:not(.gb-on) #formActions #cancelBooking { flex: 0 0 auto !important; }
  }
  @media (min-width: 640px) {
    /* En escritorio el botón verde pesa un poco más para tirar la vista hacia él. */
    #enrollModal:not(.gb-on) #formActions #confirmBooking {
      font-size: 0.95rem !important;
      font-weight: 700 !important;
      padding-left: 1.75rem !important;
      padding-right: 1.75rem !important;
    }
  }

  /* Botones de compartir del ticket de la clase (globitos / cadena / flecha) y su
     cartelito de ayuda. El cartelito SOLO con ratón: en móvil molestaría al tocar y
     además allí ya explica la ventana de confirmación. */
  .cls-share-btn {
    position: relative;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: none; border-radius: 8px;
    color: rgba(255, 255, 255, .9);
    transition: background-color .15s, color .15s;
  }
  .cls-share-btn:hover { color: #fff; background: rgba(255, 255, 255, .12); }
  @media (hover: hover) {
    .cls-share-btn[data-tip]:hover::after,
    .cls-share-btn[data-tip]:focus-visible::after {
      content: attr(data-tip);
      position: absolute; top: calc(100% + 8px); right: 0;
      background: #042C53; color: #E6F1FB;
      font-size: 12px; font-weight: 500; line-height: 1.3;
      padding: 7px 11px; border-radius: 8px;
      width: max-content; max-width: 240px; white-space: normal; text-align: left;
      pointer-events: none; z-index: 60;
    }
  }
  /* Lista de salas de la ventana "¿publicar esta clase?" (SweetAlert). */
  /* Tick "publicarla en el chat" de la ventana de reserva (Guille 07/08/2026).
     DISCRETO: sin caja de color ni negrita, para que no compita con el nivel ni con
     los créditos. Toda la fila es zona de toque (es un <label>) y mide 44 px de alto,
     el mínimo cómodo para el dedo en móvil. Sin tick, el texto se apaga: se ve de un
     vistazo que la clase NO se va a publicar. */
  .cls-share-tick {
    display: flex; align-items: flex-start; gap: 10px;
    min-height: 44px; padding: 8px 2px; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .cls-share-tick input[type="checkbox"] {
    width: 18px; height: 18px; margin: 2px 0 0; flex: 0 0 auto;
    accent-color: #02A9CA; cursor: pointer;
  }
  .cls-share-tick > span {
    font-size: 13px; line-height: 1.35; color: #475569; font-weight: 600;
    min-width: 0; word-break: break-word;
  }
  .cls-share-tick small {
    display: block; margin-top: 2px;
    font-size: 11.5px; line-height: 1.3; color: #94a3b8; font-weight: 400;
  }
  .cls-share-tick:has(input:not(:checked)) > span { color: #94a3b8; }
  .cls-share-tick:has(input:not(:checked)) small { color: #cbd5e1; }

  .cls-group-row {
    display: flex; align-items: center; gap: 10px;
    background: #f8fafc; border-radius: 8px;
    padding: 9px 11px; margin-bottom: 6px;
    font-size: 14px; color: #0f172a; text-align: left; cursor: pointer;
  }
  .cls-group-row input { width: 16px; height: 16px; accent-color: #02A9CA; }

  /* TICKET DE LA CLASE: junto a la cara (que ya trae su marco de rango), el
     nombre pulsable y su MEDALLA más alta (Guille, 14/08/2026). El nombre y la
     medalla van en la misma línea y se parten si no caben. */
  .pbc-slot-nameline {
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
    min-width: 0; font-size: 14px;
  }
  .pbc-slot-name { font-weight: 600; color: #0f172a; }

  /* Copiado de includes/medal_mini.html: esa pieza se pinta desde el
  servidor y aquí la medalla la monta el JS, así que necesita las reglas sueltas
  (mismo apaño que en tandem-schedule.html). */
  .medal-mini { display: inline-block; width: 14px; height: 14px;
    vertical-align: -2px; margin-left: 4px; border-radius: 50%;
    background: linear-gradient(150deg, #1B5FCC, #22D3EE); }
  .medal-mini--lv2 { box-shadow: 0 0 0 1px #FBFAF7, 0 0 0 2.5px #1B5FCC;
    width: 11px; height: 11px; margin-left: 6px; margin-right: 2px; }
  .medal-mini--lv3, .medal-mini--lv4 { border-radius: 0;
    clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); }
  .medal-mini--lv5 { border-radius: 0;
    background: linear-gradient(150deg, #F5B92E, #e0a712);
    clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%); }
  .medal-mini--lv6 { border-radius: 50% 50% 42% 42%; }
  .medal-mini--mythic { border-radius: 0;
    background: linear-gradient(150deg, #14110a, #3b2f14);
    clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
    box-shadow: 0 0 4px #F5B92Ecc; }
  /* !important a propósito: mobile-responsive.css trae reglas globales de <img>
     que estiraban la mini a lo ancho y la echaban a la línea de abajo. */
  .medal-mini-img { width: 18px !important; height: 18px !important;
    display: inline-block !important; object-fit: contain;
    vertical-align: -4px; margin-left: 2px; }


/* ══ El ticket de la clase, dentro del panel (Guille 18/08/2026) ══════════════
   El "Details" del panel abre ESTA página con ?ticket=<id>&embed=1 metida en una
   ventanita. Es el ticket de siempre, no una copia: así solo hay un ticket que
   mantener. Lo que sobra se apaga y el fondo se deja transparente, que el velo
   lo pone el propio ticket (el ::backdrop del diálogo).
   Se apagan los HIJOS DIRECTOS del body salvo el ticket, los avisos flotantes
   (SweetAlert) y la ficha de persona, que sale al pulsar una cara del ticket. */
body.pbc-solo-ticket {
  background: transparent !important;
  overflow: hidden !important;
  padding-top: 0 !important;
}
body.pbc-solo-ticket > *:not(#enrollModal):not(.swal2-container):not(#pbcPersonCard):not(script):not(style):not(link) {
  display: none !important;
}