/* ══════════════════════════════════════════════════════════════════════════
   DISEÑO ÚNICO · zona RESERVAR CLASES (Guille 09/11/2026, «la 3 con marca PBC»)

   Maquetas: lienzo https://claude.ai/artifact/4hhEPAoAwKMUzikVaEqBEF, página 1
   (P3DeskClases y P3Nombres). Lo común está en pbc-kit.css; aquí, lo propio del
   calendario de clases de ORDENADOR (templates/global-schedule.html).

   · Solo se carga con el interruptor DISENO_UNICO y todo va dentro de `.pbc-du`
     (en <body>) y de `.du-gs` (el contenedor de la página, solo en ordenador).
   · Ni un color escrito a mano: todo sale de pbc-design-tokens.css.
   · La REJILLA es la de siempre: mismos colores de las fichas (pbc-theme.css),
     banderas, estrella, piezas de curso y el «+» de pedir clase. Aquí solo
     cambia la parte de arriba, que ocupa todo el ancho, y que la página tiene
     UNA sola barra de bajar: la tira del idioma y la fila de los días se
     quedan pegadas arriba al bajar.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · TODO EL ANCHO ───────────────────────────────────────────────────── */
.pbc-du .du-gs {
  max-width: none;
  padding: 22px 28px 32px;
  font-family: var(--pbc-font);
  color: hsl(var(--pbc-ink));
}

/* ── 2 · LA PARTE DE ARRIBA ──────────────────────────────────────────────── */
.pbc-du .du-gs-top { display: flex; flex-direction: column; gap: 14px; margin: 0 0 18px; padding: 0; }
.pbc-du .du-gs-row { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 14px; }
.pbc-du .du-gs-heading { display: flex; flex-direction: column; gap: 4px; margin-right: auto; min-width: 0; }
.pbc-du .du-gs-title {
  margin: 0;
  color: hsl(var(--pbc-ink));
  font-size: var(--pbc-size-title-xl);
  font-weight: var(--pbc-weight-bold);
  line-height: 1.1;
  letter-spacing: -0.9px;
}
.pbc-du .du-gs-sub { margin: 0; color: hsl(var(--pbc-ink-soft)); font-size: var(--pbc-size-body); line-height: 1.4; }

.pbc-du .du-gs-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0; }

/* El idioma: el <select> de siempre, vestido de botón con su bandera. */
.pbc-du .du-gs-lang { position: relative; display: inline-flex; align-items: center; }
.pbc-du .du-gs-lang .du-gs-flag {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 16px;
  border-radius: 3px;
  box-shadow: 0 0 0 1px hsl(var(--pbc-ink) / .12);
  pointer-events: none;
}
.pbc-du .du-gs-select {
  height: 46px;
  min-width: 150px;
  margin: 0;
  padding: 0 42px 0 46px;
  border: 2px solid hsl(var(--pbc-line));
  border-radius: var(--pbc-radius-field);
  background: hsl(var(--pbc-surface));
  color: hsl(var(--pbc-ink));
  box-shadow: 0 3px 0 hsl(var(--pbc-line));
  font-family: var(--pbc-font);
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
  line-height: 1;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.pbc-du .du-gs-lang:not(:has(.du-gs-flag)) .du-gs-select { padding-left: 16px; }
.pbc-du .du-gs-select:focus-visible { outline: 3px solid hsl(var(--pbc-blue) / .35); outline-offset: 2px; }
.pbc-du .du-gs-chev {
  position: absolute;
  right: 14px;
  width: 18px;
  height: 18px;
  color: hsl(var(--pbc-ink-soft));
  pointer-events: none;
}

/* España / Latinoamérica: píldoras. */
.pbc-du .du-gs-regions { display: flex; flex-wrap: wrap; gap: 6px; }
.pbc-du .du-gs-chip {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 14px;
  border: 2px solid hsl(var(--pbc-line));
  border-radius: 999px;
  background: hsl(var(--pbc-surface));
  color: hsl(var(--pbc-ink));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
  text-decoration: none;
}
.pbc-du .du-gs-chip:hover { border-color: hsl(var(--pbc-blue) / .45); color: hsl(var(--pbc-ink)); }
.pbc-du .du-gs-chip.is-on { border-color: hsl(var(--pbc-blue)); background: hsl(var(--pbc-blue)); color: hsl(var(--pbc-on-color)); }

/* Día / Semana / Mes. */
.pbc-du .du-gs-views {
  display: inline-grid;
  grid-auto-flow: column;
  gap: 3px;
  padding: 4px;
  border-radius: var(--pbc-radius-field);
  background: hsl(var(--pbc-page));
}
.pbc-du .du-gs-view {
  padding: 9px 14px;
  border-radius: 11px;
  color: hsl(var(--pbc-ink-soft));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
  text-decoration: none;
}
.pbc-du .du-gs-view:hover { color: hsl(var(--pbc-ink)); }
.pbc-du .du-gs-view.is-on {
  background: hsl(var(--pbc-blue));
  color: hsl(var(--pbc-on-color));
  box-shadow: 0 3px 0 hsl(var(--pbc-blue-dark));
}

/* Segunda fila: tu hora · la semana · los cursos. */
.pbc-du .du-gs-row--2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}
.pbc-du .du-gs-tz {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--pbc-radius-field);
  background: hsl(var(--pbc-page));
  color: hsl(var(--pbc-ink-soft));
  font-size: var(--pbc-size-label);
  line-height: 1.3;
}
.pbc-du .du-gs-tz strong { color: hsl(var(--pbc-ink)); }
.pbc-du .du-gs-tz .pbc-k-ico { width: 18px; height: 18px; }
.pbc-du .du-gs-week { display: flex; align-items: center; gap: 10px; }
.pbc-du .du-gs-range {
  margin: 0;
  min-width: 150px;
  color: hsl(var(--pbc-ink));
  font-size: var(--pbc-size-title-s);
  font-weight: var(--pbc-weight-bold);
  text-align: center;
}
.pbc-du .du-gs-arrow,
.pbc-du .du-gs-today {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid hsl(var(--pbc-line));
  border-radius: var(--pbc-radius-field);
  background: hsl(var(--pbc-surface));
  color: hsl(var(--pbc-ink));
  box-shadow: 0 3px 0 hsl(var(--pbc-line));
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease;
}
.pbc-du .du-gs-today { width: auto; padding: 0 14px; font-size: var(--pbc-size-label); font-weight: var(--pbc-weight-bold); text-decoration: none; }
.pbc-du .du-gs-arrow:active,
.pbc-du .du-gs-today:active { transform: translateY(2px); box-shadow: 0 1px 0 hsl(var(--pbc-line)); }
.pbc-du .du-gs-arrow .pbc-k-ico { width: 18px; height: 18px; }
.pbc-du .du-gs-arrow .pbc-spdot { position: absolute; top: -4px; right: -4px; }
.pbc-du .du-gs-courses {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid hsl(var(--pbc-line-soft));
  border-radius: var(--pbc-radius-field);
  background: hsl(var(--pbc-surface));
  color: hsl(var(--pbc-ink));
  font-size: var(--pbc-size-label);
  text-decoration: none;
}
.pbc-du .du-gs-courses:hover { border-color: hsl(var(--pbc-line)); color: hsl(var(--pbc-ink)); }
.pbc-du .du-gs-courses-n { color: hsl(var(--pbc-muted)); }
.pbc-du .du-gs-courses-go { color: hsl(var(--pbc-blue)); font-weight: var(--pbc-weight-bold); }

/* ── 3 · LA REJILLA DE SIEMPRE, A TODO EL ANCHO Y SIN BARRA PROPIA ───────── */
/* overflow: clip recorta las esquinas redondas igual que el hidden de siempre,
   pero sin crear una caja con scroll: así lo pegado (sticky) funciona. */
/* (!important: la clase overflow-hidden de la plantilla va con !important.) Y el
   <body>: varias hojas viejas le ponen overflow-x: hidden, que lo convierte en una
   caja con scroll que nunca se mueve y deja lo pegado sin pegar. clip recorta igual
   (nada se sale por los lados) sin ese efecto. Solo en esta página (du-gs-page). */
body.pbc-du.du-gs-page:not(.pbc-solo-ticket) { overflow-x: clip !important; overflow-y: visible !important; }
.pbc-du .du-gs .schedule-calendar-container { max-width: none; overflow: clip !important; }
.pbc-du .du-gs .schedule-calendar-inner { max-height: none; }
.pbc-du .du-gs #scheduleScrollContainer { overflow: visible !important; }
.pbc-du .du-gs [data-du-sticky] { position: sticky; }
.pbc-du .du-gs .schedule-language-banner[data-du-sticky] { top: var(--du-stick, 0px); z-index: 41; }
.pbc-du .du-gs .schedule-calendar-grid-header[data-du-sticky] {
  top: calc(var(--du-stick, 0px) + var(--du-strip, 52px));
  z-index: 39;
  box-shadow: 0 6px 10px -10px hsl(var(--pbc-ink) / .45);
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .pbc-du .du-gs .schedule-calendar-inner { max-height: none; }
  .pbc-du .du-gs #scheduleScrollContainer { overflow: visible !important; }
}

/* La semana pequeña dentro de la tira, solo mientras la de arriba no se ve. */
.pbc-du .du-gs-miniweek { margin-left: auto; display: flex; align-items: center; gap: 8px; color: hsl(var(--pbc-on-color)); }
.pbc-du .du-gs-miniweek[hidden] { display: none; }
.pbc-du .du-gs-minirange { font-size: var(--pbc-size-label); font-weight: var(--pbc-weight-bold); white-space: nowrap; }
.pbc-du .du-gs-miniarrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid hsl(var(--pbc-on-color) / .4);
  border-radius: 999px;
  background: hsl(var(--pbc-on-color) / .16);
  color: hsl(var(--pbc-on-color));
  cursor: pointer;
}
.pbc-du .du-gs-miniarrow:hover { background: hsl(var(--pbc-on-color) / .28); }

/* ── 4 · LAS FICHAS: mismo color, texto corto («A1 · 2/4») y sin «…» ─────── */
.pbc-du .du-gs .schedule-calendar-container .book-slot { white-space: normal; text-overflow: clip; }
.pbc-du .du-gs .schedule-calendar-container .book-slot > .truncate { white-space: normal; text-overflow: clip; }
.pbc-du .du-gs .du-chip-name { min-width: 0; font-weight: var(--pbc-weight-bold); overflow-wrap: anywhere; }
.pbc-du .du-gs .du-chip-sub {
  margin-top: 3px;
  font-size: var(--pbc-size-small);
  font-weight: var(--pbc-weight-bold);
  line-height: 1.25;
}

/* ══ 5 · EL TICKET Y EL PASO A PASO (class-wizard.js con el interruptor) ══════
   Maquetas P3TicketClaseDesk, P3EligeClaseDesk, P3NivelDesk, P3FichaDesk y
   P3ResenasDesk. El guion pone .cw-desk en el <dialog> desde 1024 px. */

/* 5.1 · En todos los tamaños: la nota junto al botón y los niveles explicados. */
.pbc-du .cw .cw-side { display: none; }
.pbc-du .cw .cw-note { color: hsl(var(--pbc-ink-soft)); font-size: var(--pbc-size-label); line-height: 1.4; text-align: center; }
.pbc-du .cw .cw-note:empty { display: none; }
.pbc-du .cw .cw-note b { color: hsl(var(--pbc-ink)); }
.pbc-du .cw .cw-note-link,
.pbc-du .cw .cw-link {
  padding: 0;
  border: 0;
  background: none;
  color: hsl(var(--pbc-blue));
  font-family: var(--pbc-font);
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
  text-decoration: none;
  cursor: pointer;
}
.pbc-du .cw .cw-link:hover { color: hsl(var(--pbc-blue-dark)); text-decoration: underline; }
.pbc-du .cw .cw-sec {
  min-height: 46px;
  padding: 0 18px;
  border: 2px solid hsl(var(--pbc-line));
  border-radius: var(--pbc-radius-field);
  background: hsl(var(--pbc-surface));
  color: hsl(var(--pbc-ink));
  box-shadow: 0 3px 0 hsl(var(--pbc-line));
  font-family: var(--pbc-font);
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease;
}
.pbc-du .cw .cw-sec:active { transform: translateY(2px); box-shadow: 0 1px 0 hsl(var(--pbc-line)); }
.pbc-du .cw .cw-sec[hidden] { display: none; }
.pbc-du .cw .cw-muted { color: hsl(var(--pbc-muted)); font-weight: var(--pbc-weight-regular); }
.pbc-du .cw .cw-solo b { color: hsl(var(--pbc-ink)); }
.pbc-du .cw .cw-hint { margin: -8px 0 16px; color: hsl(var(--pbc-ink-soft)); font-size: var(--pbc-size-body); line-height: 1.4; }
/* «Lo de siempre» (Guille 10/11/2026): la línea de arriba del paso de confirmar. */
.pbc-du .cw .cw-lasttime {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: var(--pbc-radius-field);
  background: hsl(var(--pbc-blue-soft));
  color: hsl(var(--pbc-blue-dark));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
  line-height: 1.35;
}
.pbc-du .cw .cw-lasttime { flex-wrap: wrap; }
/* El texto nunca en una columna estrecha (Guille 10/11/2026: «no pongas texto en
   vertical así»): ocupa el ancho y, si «Cambiar» no cabe al lado, va debajo. Antes
   la regla general de los botones (ancho 100 % en el móvil) dejaba el texto a una
   palabra por línea. */
.pbc-du .cw .cw-lasttime__txt { flex: 1 1 14rem; min-width: 55%; }
.pbc-du .cw .cw-lasttime__change { flex: 0 0 auto; width: auto; min-width: 0; max-width: 100%; }
/* Misma regla en las filas del resumen (paso 5): si «Editar» no cabe al lado sin dejar
   el texto en menos de media pantalla (en alemán, «Bearbeiten»), baja a la línea de abajo. */
.pbc-du .cw .cw-sum .cw-row { flex-wrap: wrap; }
.pbc-du .cw .cw-sum .cw-row > div { flex: 1 1 12rem; }
.pbc-du .cw .cw-sum .cw-row .cw-edit { margin-left: auto; }

.pbc-du .cw .cw-lvls { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.pbc-du .cw .cw-lvl {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 14px 44px 14px 16px;
  border: 2px solid hsl(var(--pbc-line));
  border-radius: var(--pbc-radius-card);
  background: hsl(var(--pbc-surface));
  color: hsl(var(--pbc-ink));
  box-shadow: 0 4px 0 hsl(var(--pbc-line));
  font-family: var(--pbc-font);
  text-align: left;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease;
}
.pbc-du .cw .cw-lvl:active { transform: translateY(3px); box-shadow: 0 1px 0 hsl(var(--pbc-line)); }
.pbc-du .cw .cw-lvl.sel { border-color: hsl(var(--pbc-blue)); background: hsl(var(--pbc-blue-soft)); box-shadow: 0 4px 0 hsl(var(--pbc-blue)); }
.pbc-du .cw .cw-lvl.sel::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: hsl(var(--pbc-blue));
}
/* La palomita blanca dentro del círculo azul (dibujada con dos bordes). */
.pbc-du .cw .cw-lvl.sel::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 19px;
  right: 23px;
  width: 6px;
  height: 11px;
  border: solid hsl(var(--pbc-on-color));
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.pbc-du .cw .cw-lvl-code { font-size: var(--pbc-size-title-m); font-weight: var(--pbc-weight-bold); line-height: 1.1; }
.pbc-du .cw .cw-lvl.sel .cw-lvl-code { color: hsl(var(--pbc-blue-dark)); }
.pbc-du .cw .cw-lvl-name { font-size: var(--pbc-size-body); font-weight: var(--pbc-weight-bold); }
.pbc-du .cw .cw-lvl-me { color: hsl(var(--pbc-ink-soft)); font-size: var(--pbc-size-label); line-height: 1.35; }

/* 5.2 · Ordenador: el ticket casi a pantalla completa, con el calendario borroso
   detrás. Gana a las reglas !important de pbc-theme.css y class-wizard.css. */
@media (min-width: 1024px) {
  body.pbc-du dialog#enrollModal.cw-on.cw-desk {
    position: fixed !important;
    inset: 34px 40px !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 26px !important;
    background: hsl(var(--pbc-surface)) !important;
    box-shadow: 0 30px 70px hsl(var(--pbc-ink) / .38) !important;
    overflow: hidden !important;
    align-items: stretch !important;
  }
  body.pbc-du dialog#enrollModal.cw-on.cw-desk::backdrop {
    background: hsl(var(--pbc-ink) / .42) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    backdrop-filter: blur(6px) !important;
  }
  body.pbc-du dialog#enrollModal.cw-desk .cw {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 24px 30px 26px;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  body.pbc-du dialog#enrollModal.cw-desk .cw .cw-top { padding: 0; gap: 14px; }
  body.pbc-du dialog#enrollModal.cw-desk .cw .cw-toptag { margin-right: auto; font-size: var(--pbc-size-label); }
  body.pbc-du dialog#enrollModal.cw-desk .cw .cw-body {
    flex: 1;
    min-height: 0;
    padding: 0 4px 0 0;
    overflow-y: auto;
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 40px;
    align-content: start;
  }
  body.pbc-du dialog#enrollModal.cw-desk .cw .cw-side { display: flex; flex-direction: column; gap: 12px; grid-column: 1; grid-row: 1 / span 2; align-self: start; }
  body.pbc-du dialog#enrollModal.cw-desk .cw .cw-ask,
  body.pbc-du dialog#enrollModal.cw-desk .cw .cw-content { grid-column: 2; max-width: 760px; min-width: 0; }
  body.pbc-du dialog#enrollModal.cw-desk .cw .cw-ask { margin: 0 0 18px; }
  body.pbc-du dialog#enrollModal.cw-desk .cw .cw-bubble { font-size: var(--pbc-size-title-xl); letter-spacing: -1px; line-height: 1.12; }
  body.pbc-du dialog#enrollModal.cw-desk .cw .cw-bubble:empty { display: none; }
  body.pbc-du dialog#enrollModal.cw-desk .cw .cw-cards { flex-direction: row; }
  body.pbc-du dialog#enrollModal.cw-desk .cw .cw-cards > .cw-card { flex: 1 1 0; }
  body.pbc-du dialog#enrollModal.cw-desk .cw .cw-lvls { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  body.pbc-du dialog#enrollModal.cw-desk .cw .cw-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    padding: 16px 0 0;
    border-top: 1px solid hsl(var(--pbc-line-soft));
  }
  body.pbc-du dialog#enrollModal.cw-desk .cw .cw-err { flex: 1 0 100%; margin: 0; }
  body.pbc-du dialog#enrollModal.cw-desk .cw .cw-err:not(.show) { display: none; }
  body.pbc-du dialog#enrollModal.cw-desk .cw .cw-note { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; font-size: var(--pbc-size-body); }
  body.pbc-du dialog#enrollModal.cw-desk .cw .cw-note:empty { display: block; }
  body.pbc-du dialog#enrollModal.cw-desk .cw .cw-note .cw-muted { font-size: var(--pbc-size-label); }
  body.pbc-du dialog#enrollModal.cw-desk .cw .cw-foot > .cw-cta { width: auto; min-width: 220px; min-height: 58px; margin: 0; padding: 0 40px; }
  /* Reservar es AZUL (regla 2: azul = unirme/reservar, amarillo = pagar), como en la maqueta. */
  body.pbc-du dialog#enrollModal.cw-desk .cw .cw-cta.cw-yellow:not(.cw-pay) {
    --k-bg: hsl(var(--pbc-blue));
    --k-ink: hsl(var(--pbc-on-color));
    --k-edge: hsl(var(--pbc-blue-dark));
    --k-line: hsl(var(--pbc-blue));
  }
  body.pbc-du dialog#enrollModal.cw-desk .cw .cw-stepno:empty { display: none; }

  /* Columna de la izquierda: la clase libre (tarjeta gris) o el profe (foto entera). */
  body.pbc-du dialog#enrollModal.cw-desk .cw .cw-side--card { padding: 18px; border-radius: var(--pbc-radius-card); background: hsl(var(--pbc-page)); }
  body.pbc-du dialog#enrollModal.cw-desk .cw .cw-side--card .pbc-k-tag { align-self: flex-start; }
  .pbc-du .cw .cw-ds-who { display: flex; align-items: center; gap: 12px; }
  .pbc-du .cw .cw-ds-ava {
    width: 54px;
    height: 54px;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 50%;
    background: hsl(var(--pbc-blue-soft));
    color: hsl(var(--pbc-blue-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--pbc-size-title-s);
    font-weight: var(--pbc-weight-bold);
  }
  /* El círculo pequeño de la tarjeta es un avatar, no la foto grande: ahí sí se
     encaja (la foto ENTERA va en la ficha y en el ticket). */
  .pbc-du .cw .cw-ds-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .pbc-du .cw .cw-ds-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .pbc-du .cw .cw-ds-name b { font-size: var(--pbc-size-title-s); }
  .pbc-du .cw .cw-ds-name small { color: hsl(var(--pbc-muted)); font-size: var(--pbc-size-label); }
  .pbc-du .cw .cw-ds-when { display: flex; flex-direction: column; font-size: var(--pbc-size-body); }
  .pbc-du .cw .cw-ds-hour { font-weight: var(--pbc-weight-bold); }
  .pbc-du .cw .cw-ds-class { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-top: 12px; border-top: 1px solid hsl(var(--pbc-line)); }
  .pbc-du .cw .cw-ds-class b { font-size: var(--pbc-size-body); line-height: 1.3; }
  .pbc-du .cw .cw-ds-first,
  .pbc-du .cw .cw-ds-type { color: hsl(var(--pbc-ink-soft)); font-size: var(--pbc-size-label); line-height: 1.4; }

  .pbc-du .cw .cw-dt-photo { width: 100%; overflow: hidden; border-radius: var(--pbc-radius-card); background: hsl(var(--pbc-page)); }
  .pbc-du .cw .cw-dt-photo img { display: block; width: 100%; height: auto; }
  .pbc-du .cw .cw-dt-photo.is-initial,
  .pbc-du .cw .cw-v-mini.is-initial {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: hsl(var(--pbc-blue-soft));
    color: hsl(var(--pbc-blue-dark));
    font-size: var(--pbc-size-title-xl);
    font-weight: var(--pbc-weight-bold);
  }
  .pbc-du .cw .cw-dt-who { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
  .pbc-du .cw .cw-dt-namebox { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .pbc-du .cw .cw-dt-name { font-size: var(--pbc-size-title-m); font-weight: var(--pbc-weight-bold); letter-spacing: -0.5px; }
  .pbc-du .cw .cw-dt-role { color: hsl(var(--pbc-ink-soft)); font-size: var(--pbc-size-label); }
  .pbc-du .cw .cw-dt-rate { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; white-space: nowrap; }
  .pbc-du .cw .cw-dt-avg { display: inline-flex; align-items: center; gap: 4px; color: hsl(var(--pbc-gold-ink)); font-size: var(--pbc-size-body); font-weight: var(--pbc-weight-bold); }
  .pbc-du .cw .cw-star { width: 17px; height: 17px; }
  .pbc-du .cw .cw-star,
  .pbc-du .cw .cw-star * { fill: hsl(var(--pbc-gold)); stroke: hsl(var(--pbc-gold-dark)); stroke-width: 1.2; }

  /* La columna de la derecha del ticket. */
  .pbc-du .cw .cw-dt-head { display: flex; flex-direction: column; gap: 8px; margin: 0 0 18px; }
  .pbc-du .cw .cw-dt-kicker { color: hsl(var(--pbc-muted)); font-size: var(--pbc-size-body); line-height: 1.35; }
  .pbc-du .cw .cw-dt-kicker b { color: hsl(var(--pbc-blue-dark)); }
  .pbc-du .cw .cw-dt-title { margin: 0; color: hsl(var(--pbc-ink)); font-size: var(--pbc-size-title-xl); font-weight: var(--pbc-weight-bold); letter-spacing: -1px; line-height: 1.12; overflow-wrap: anywhere; }
  .pbc-du .cw .cw-dt-when { font-size: var(--pbc-size-title-s); font-weight: var(--pbc-weight-bold); }
  .pbc-du .cw .cw-dt-when .cw-muted { font-size: var(--pbc-size-body); }
  .pbc-du .cw .cw-dt-desc { margin: 0 0 18px; max-width: 680px; color: hsl(var(--pbc-ink-soft)); font-size: var(--pbc-size-body); line-height: 1.5; white-space: pre-line; }
  .pbc-du .cw .cw-dt-topic { display: flex; align-items: center; gap: 8px; margin: 0 0 18px; font-size: var(--pbc-size-body); font-weight: var(--pbc-weight-bold); }
  .pbc-du .cw .cw-dt-people { border: 1px solid hsl(var(--pbc-line-soft)); border-radius: var(--pbc-radius-card); }
  .pbc-du .cw .cw-dt-prow { display: flex; align-items: center; gap: 14px; padding: 14px 18px; font-size: var(--pbc-size-body); line-height: 1.4; }
  .pbc-du .cw .cw-dt-prow + .cw-dt-prow { border-top: 1px solid hsl(var(--pbc-line-soft)); }
  .pbc-du .cw .cw-dt-avas { display: flex; }
  .pbc-du .cw .cw-dt-avas > * + * { margin-left: -9px; }
  .pbc-du .cw .cw-dt-avas:empty { display: none; }
  .pbc-du .cw .cw-dt-ico {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: hsl(var(--pbc-blue-soft));
    color: hsl(var(--pbc-blue));
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .pbc-du .cw .cw-dt-ico .cw-svg { width: 18px; height: 18px; }
  .pbc-du .cw .cw-dt-people + .cw-acts { margin-top: 18px; }
  /* Botones del ticket en el ordenador (Unirse a la llamada, Cancelar la clase…;
     Guille 10/11/2026): ancho natural, juntos y alineados, como mucho 340 px; nunca
     a lo ancho de la ventana. En el móvil siguen a lo ancho, como siempre. */
  body.pbc-du dialog#enrollModal.cw-desk .cw .cw-acts {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 12px;
  }
  body.pbc-du dialog#enrollModal.cw-desk .cw .cw-acts > .cw-act {
    flex: 0 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 200px;
    max-width: 340px;
    min-height: 52px;
    margin: 0;
    padding: 0 32px;
  }
  /* Igual los botones blancos de la ficha y de las reseñas (Ver más reseñas…). */
  body.pbc-du dialog#enrollModal.cw-desk .cw .cw-view .cw-sec { align-self: flex-start; width: auto; max-width: 340px; }
  body.pbc-du dialog#enrollModal.cw-desk .cw .cw-view .cw-rv-more { align-self: center; min-width: 220px; padding: 0 32px; }

  /* 5.3 · La ficha y las reseñas DENTRO del ticket. */
  body.pbc-du dialog#enrollModal.cw-desk .cw.cw-viewing > .cw-top,
  body.pbc-du dialog#enrollModal.cw-desk .cw.cw-viewing > .cw-body,
  body.pbc-du dialog#enrollModal.cw-desk .cw.cw-viewing > .cw-foot { display: none; }
  body.pbc-du dialog#enrollModal.cw-desk .cw .cw-view { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 18px; }
  .pbc-du .cw .cw-v-top { display: flex; align-items: center; gap: 12px; }
  .pbc-du .cw .cw-v-gap { flex: 1; }
  .pbc-du .cw .cw-v-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 0 18px 0 12px;
    border: 2px solid hsl(var(--pbc-line));
    border-radius: var(--pbc-radius-field);
    background: hsl(var(--pbc-surface));
    color: hsl(var(--pbc-ink));
    box-shadow: 0 3px 0 hsl(var(--pbc-line));
    font-family: var(--pbc-font);
    font-size: var(--pbc-size-label);
    font-weight: var(--pbc-weight-bold);
    cursor: pointer;
  }
  .pbc-du .cw .cw-v-back .cw-svg { width: 18px; height: 18px; }
  .pbc-du .cw .cw-v-grid { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 36px; align-content: start; }
  .pbc-du .cw .cw-v-left { display: flex; flex-direction: column; gap: 12px; align-self: start; }
  /* En la ficha, la nota y «N reseñas» en una fila bajo el nombre (maqueta P3FichaDesk). */
  .pbc-du .cw .cw-v-left > .cw-dt-rate { flex-direction: row; align-items: center; align-self: flex-start; gap: 10px; }
  .pbc-du .cw .cw-v-left--box { padding: 18px; border-radius: var(--pbc-radius-card); background: hsl(var(--pbc-page)); }
  .pbc-du .cw .cw-v-mini { width: 120px; overflow: hidden; border-radius: var(--pbc-radius-field); }
  .pbc-du .cw .cw-v-mini img { display: block; width: 100%; height: auto; }
  .pbc-du .cw .cw-v-big { font-size: var(--pbc-size-title-xl); font-weight: var(--pbc-weight-bold); letter-spacing: -1px; line-height: 1; }
  .pbc-du .cw .cw-v-note { color: hsl(var(--pbc-ink-soft)); font-size: var(--pbc-size-label); line-height: 1.4; }
  .pbc-du .cw .cw-v-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
  .pbc-du .cw .cw-v-title { margin: 0; font-size: var(--pbc-size-title-l); font-weight: var(--pbc-weight-bold); letter-spacing: -0.8px; line-height: 1.15; }
  .pbc-du .cw .cw-v-sec { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0; padding: 0; }
  .pbc-du .cw .cw-v-lbl { color: hsl(var(--pbc-muted)); font-size: var(--pbc-size-label); font-weight: var(--pbc-weight-bold); }
  .pbc-du .cw .cw-v-ctitle { font-size: var(--pbc-size-title-s); }
  .pbc-du .cw .cw-v-p { margin: 0; font-size: var(--pbc-size-body); line-height: 1.55; white-space: pre-line; }
  .pbc-du .cw .cw-rv-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; }
  .pbc-du .cw .cw-rv-list { display: flex; flex-direction: column; gap: 14px; }
  .pbc-du .cw .cw-rv { display: flex; flex-direction: column; gap: 6px; padding: 14px 18px; border: 1px solid hsl(var(--pbc-line-soft)); border-radius: var(--pbc-radius-card); }
  /* El valor de cada fila del resumen (paso 5) también se llama .cw-rv: sin la caja de la
     reseña (salía cada valor dentro de un recuadro en el ordenador). */
  .pbc-du .cw .cw-row .cw-rv { display: block; padding: 0; border: 0; border-radius: 0; }
  .pbc-du .cw .cw-rv-stars { display: inline-flex; gap: 2px; }
  .pbc-du .cw .cw-rv-stars .off .cw-star,
  .pbc-du .cw .cw-rv-stars .off .cw-star * { fill: hsl(var(--pbc-line)); stroke: hsl(var(--pbc-line)); }
  .pbc-du .cw .cw-rv-stars--big .cw-star { width: 22px; height: 22px; }
  .pbc-du .cw .cw-rv-text { font-size: var(--pbc-size-body); line-height: 1.45; }
  .pbc-du .cw .cw-rv-meta { color: hsl(var(--pbc-muted)); font-size: var(--pbc-size-label); }
  .pbc-du .cw .cw-v-foot { display: flex; align-items: center; gap: 16px; padding-top: 16px; border-top: 1px solid hsl(var(--pbc-line-soft)); }
  .pbc-du .cw .cw-v-sum { flex: 1; display: flex; flex-direction: column; gap: 2px; }
  .pbc-du .cw .cw-v-sum b { font-size: var(--pbc-size-body); }
  .pbc-du .cw .cw-v-sum small { color: hsl(var(--pbc-muted)); font-size: var(--pbc-size-label); }
  .pbc-du .cw .cw-v-foot > .cw-v-cta { width: auto; min-width: 220px; min-height: 58px; margin: 0; padding: 0 34px; }
  .pbc-du .cw .cw-v-cta[hidden] { display: none; }
}
.pbc-du .cw .cw-view[hidden] { display: none; }

/* «Pedir una clase» en el ordenador (Guille 10/11/2026): el botón con su ancho, como
   mucho 340 px y centrado; nunca a lo ancho de la ventana. En el móvil, a lo ancho. */
@media (min-width: 1024px) {
  body.pbc-du dialog#requestModal .cw .cw-foot > .cw-cta {
    width: fit-content;
    min-width: 220px;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 40px;
    padding-right: 40px;
  }
}

/* 6 · El ticket del MÓVIL (Guille 10/11/2026, «Club de Cine» de Camila): en la caja
   azul de qué va la clase, las etiquetas (Título, Descripción) y lo que dicen van con
   el MISMO margen interior, y la descripción sin otra caja dentro. Antes la regla del
   kit dejaba las etiquetas pegadas al borde y el texto metido hacia dentro. */
.pbc-du .cw .cw-more--open { padding: 0 14px 14px; }
.pbc-du .cw .cw-more--open > .cw-lbl,
.pbc-du .cw .cw-more--open > .cw-more__title,
.pbc-du .cw .cw-more--open > .cw-desc { margin-left: 0; margin-right: 0; }
.pbc-du .cw .cw-more--open > .cw-lbl { margin-top: 14px; margin-bottom: 4px; }
.pbc-du .cw .cw-more--open > .cw-desc { padding: 0; border: 0; border-radius: 0; background: none; }
.pbc-du .cw .cw-more--open > :last-child { margin-bottom: 0; }
/* La foto del profe ocupa lo mismo que los iconos de las otras filas: textos alineados. */
.pbc-du .cw .cw-row .cw-ri--ava { width: 38px; justify-content: center; }
/* Las fotos pequeñas (profe y alumnos): la cara siempre a la vista, no recortada. */
.pbc-du .cw .cw-ava img:not(.pbc-critter) { object-position: 50% 30%; }

/* 7 · Los iconos de los 5 pasos (Guille 10/11/2026): todos de línea, de la misma
   familia, y el elegido solo cambia de COLOR (antes el cuadrito se rellenaba de azul
   y el icono pasaba a blanco: parecía otro icono). */
body.pbc-du .cw .cw-opt .cw-ico,
body.pbc-du .cw .cw-card .cw-big { background: hsl(var(--pbc-page)); color: hsl(var(--pbc-ink-soft)); }
body.pbc-du .cw .cw-opt.sel .cw-ico,
body.pbc-du .cw .cw-card.sel .cw-big { background: hsl(var(--pbc-blue-soft)); color: hsl(var(--pbc-blue)); }

/* 8 · Regla 2 también en el MÓVIL (Guille 10/11/2026): «Reservar esta clase» y
   «Aceptar y reservar» con crédito van en AZUL; amarillo solo si se paga dinero
   (clase de 10 €, o sin créditos: va directo al pago). */
body.pbc-du dialog#enrollModal .cw .cw-cta.cw-yellow:not(.cw-pay) {
  --k-bg: hsl(var(--pbc-blue));
  --k-ink: hsl(var(--pbc-on-color));
  --k-edge: hsl(var(--pbc-blue-dark));
  --k-line: hsl(var(--pbc-blue));
}

/* 9 · Calendario del MÓVIL (Guille 10/11/2026, maquetas aprobadas M1ClasesArriba y
   M2ClasesFinal). Arriba: la cabecera azul con su curva, «Reserva tu clase» y los
   idiomas en fichas. «Elige tu día» con la semana y el calendario, la tira de 7 días y
   las clases del día en fichas de dos filas. Al final: «¿Ninguna te encaja?» y «Bueno
   saberlo». Ningún aviso arriba; el diseño llena la pantalla, sin franjas ni huecos. */
body.pbc-du.du-gs-m .container.gb-schedule { display: flex; flex-direction: column; padding-top: 0 !important; }
body.pbc-du.du-gs-m .container.gb-schedule > * { min-width: 0; }

/* Cabecera: sigue el azul de la cabecera de la web (vacía en esta página), sin su
   curva blanca ni el relleno general de las secciones. */
body.pbc-du.du-gs-m .pbc-mtop::after { display: none; }
body.pbc-du.du-gs-m .du-mtop { margin: 0 -16px 2px; padding: 0 !important; }
body.pbc-du.du-gs-m .du-mtop-logo { position: relative; display: block; width: auto !important; max-width: none; height: 26px !important; margin: 0 0 10px; }
body.pbc-du.du-gs-m .du-mtop-head {
  position: relative;
  overflow: hidden;
  padding: 8px 20px 46px;
  background: hsl(var(--pbc-blue));
  color: hsl(var(--pbc-on-color));
}
body.pbc-du.du-gs-m .du-mtop-head::after {
  content: '';
  position: absolute;
  left: -12%;
  right: -12%;
  bottom: -44px;
  height: 80px;
  border-radius: 50%;
  background: hsl(var(--pbc-surface));
}
body.pbc-du.du-gs-m .du-mtop-title {
  position: relative;
  margin: 0;
  color: hsl(var(--pbc-on-color));
  font-family: var(--pbc-font);
  font-size: var(--pbc-size-title-xl);
  font-weight: var(--pbc-weight-bold);
  line-height: 1.1;
  letter-spacing: -.7px;
}

/* Idiomas en fichas con bandera */
body.pbc-du.du-gs-m .du-mlangs {
  display: flex;
  gap: 8px;
  padding: 0 16px 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
body.pbc-du.du-gs-m .du-mlangs::-webkit-scrollbar { display: none; }
body.pbc-du.du-gs-m .du-mlang {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  box-sizing: border-box;
  padding: 0 14px 0 10px;
  border: 2px solid hsl(var(--pbc-line));
  border-radius: var(--pbc-radius-field);
  background: hsl(var(--pbc-surface));
  box-shadow: 0 3px 0 hsl(var(--pbc-line));
  color: hsl(var(--pbc-ink));
  font-size: var(--pbc-size-body);
  font-weight: var(--pbc-weight-bold);
  text-decoration: none;
  white-space: nowrap;
}
body.pbc-du.du-gs-m .du-mlang.is-on {
  border-color: hsl(var(--pbc-blue));
  background: hsl(var(--pbc-blue-soft));
  box-shadow: 0 3px 0 hsl(var(--pbc-blue));
  color: hsl(var(--pbc-blue-dark));
}
body.pbc-du.du-gs-m .du-mlang-flag { display: inline-flex; font-size: var(--pbc-size-title-s); line-height: 1; }
body.pbc-du.du-gs-m .du-mlang-flag svg { width: 22px; height: 16px; }

/* «Elige tu día», la semana y el calendario */
body.pbc-du.du-gs-m .du-mday-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 10px; }
/* Los controles de la semana van juntos: si no caben al lado del título, bajan enteros. */
body.pbc-du.du-gs-m .du-mweek-ctrl { display: flex; align-items: center; gap: 6px; margin-left: auto; }
body.pbc-du.du-gs-m .du-mday-title {
  flex: 1 1 auto;
  margin: 0;
  color: hsl(var(--pbc-ink));
  font-size: var(--pbc-size-title-s);
  font-weight: var(--pbc-weight-bold);
  letter-spacing: -.4px;
  white-space: nowrap;
}
body.pbc-du.du-gs-m .du-mnav {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px !important;
  min-width: 0 !important;
  height: 40px !important;
  min-height: 0 !important;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 2px solid hsl(var(--pbc-line));
  border-radius: 12px;
  background: hsl(var(--pbc-surface));
  box-shadow: 0 2px 0 hsl(var(--pbc-line));
  color: hsl(var(--pbc-ink));
  cursor: pointer;
}
body.pbc-du.du-gs-m .du-mnav svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body.pbc-du.du-gs-m .du-mnav--cal { color: hsl(var(--pbc-blue)); }
body.pbc-du.du-gs-m .du-mnav--cal svg { width: 18px; height: 18px; stroke-width: 2.2; }
body.pbc-du.du-gs-m .du-mdate {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}
body.pbc-du.du-gs-m .du-mweek {
  flex: 0 0 auto;
  color: hsl(var(--pbc-ink));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
  white-space: nowrap;
}

/* La tira de 7 días: punto si hay clases, pasados en gris, el elegido en azul */
body.pbc-du.du-gs-m .du-mstrip { margin: 0 0 16px !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
body.pbc-du.du-gs-m .du-mstrip > .grid { gap: 6px; }
body.pbc-du.du-gs-m [data-du-mday] {
  height: 66px;
  padding: 0 !important;
  justify-content: center;
  gap: 1px;
  border-radius: 14px !important;
  background: hsl(var(--pbc-page)) !important;
  box-shadow: none !important;
  color: hsl(var(--pbc-ink)) !important;
}
body.pbc-du.du-gs-m [data-du-mday] > span:first-child { color: hsl(var(--pbc-ink-soft)) !important; font-size: var(--pbc-size-small) !important; }
body.pbc-du.du-gs-m [data-du-mday] > span:nth-child(2) { font-size: var(--pbc-size-title-s) !important; }
body.pbc-du.du-gs-m [data-du-mday][data-past],
body.pbc-du.du-gs-m [data-du-mday][data-past] > span:first-child { color: hsl(var(--pbc-muted)) !important; }
body.pbc-du.du-gs-m [data-du-mday][aria-pressed="true"] {
  background: hsl(var(--pbc-blue)) !important;
  box-shadow: 0 3px 0 hsl(var(--pbc-blue-dark)) !important;
  color: hsl(var(--pbc-on-color)) !important;
}
body.pbc-du.du-gs-m [data-du-mday][aria-pressed="true"] > span:first-child { color: hsl(var(--pbc-on-color)) !important; }
body.pbc-du.du-gs-m [data-du-dot] { width: 6px !important; height: 6px !important; background: hsl(var(--pbc-blue)) !important; }
body.pbc-du.du-gs-m [aria-pressed="true"] > [data-du-dot] { background: hsl(var(--pbc-gold)) !important; }
body.pbc-du.du-gs-m [data-past] > [data-du-dot] { background: hsl(var(--pbc-line)) !important; }

/* «Miércoles 11 de noviembre · 4 clases» */
body.pbc-du.du-gs-m .du-mday-line { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; }
body.pbc-du.du-gs-m .du-mday-name {
  flex: 1;
  margin: 0;
  color: hsl(var(--pbc-ink));
  font-size: var(--pbc-size-title-s);
  font-weight: var(--pbc-weight-bold);
}
body.pbc-du.du-gs-m .du-mday-count { color: hsl(var(--pbc-ink-soft)); font-size: var(--pbc-size-label); }

/* Las fichas de dos filas (la hora ya va dentro: fuera la columna de la izquierda) */
body.pbc-du.du-gs-m .du-mhour-col { display: none !important; }
body.pbc-du.du-gs-m .book-slot.du-mcard {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 12px 12px 14px !important;
  border: 1px solid hsl(var(--pbc-line-soft)) !important;
  border-left: 5px solid hsl(var(--pbc-line)) !important;
  border-radius: 16px !important;
  background: hsl(var(--pbc-surface)) !important;
  box-shadow: none !important;
}
body.pbc-du.du-gs-m .book-slot.du-mcard--free { border-color: hsl(var(--pbc-gold) / .35) !important; border-left-color: hsl(var(--pbc-gold)) !important; background: hsl(var(--pbc-gold-soft)) !important; }
body.pbc-du.du-gs-m .book-slot.du-mcard--joined { border-color: hsl(var(--pbc-green) / .25) !important; border-left-color: hsl(var(--pbc-green)) !important; background: hsl(var(--pbc-green-soft)) !important; }
body.pbc-du.du-gs-m .book-slot.du-mcard--mine { border-color: hsl(var(--pbc-blue) / .25) !important; border-left-color: hsl(var(--pbc-blue)) !important; background: hsl(var(--pbc-blue-soft)) !important; }
/* La llena, en el morado de siempre del calendario (maqueta M2). */
body.pbc-du.du-gs-m .book-slot.du-mcard--full { border-color: hsl(var(--pbc-purple) / .28) !important; border-left-color: hsl(var(--pbc-purple)) !important; background: hsl(var(--pbc-purple-soft)) !important; }
body.pbc-du.du-gs-m .book-slot.du-mcard--past { border-left-color: hsl(var(--pbc-line)) !important; background: hsl(var(--pbc-page)) !important; }
body.pbc-du.du-gs-m .book-slot.du-mcard--past { opacity: .7; }
body.pbc-du.du-gs-m .du-mcard-row1 { display: flex; align-items: center; gap: 8px; }
body.pbc-du.du-gs-m .du-mcard-hour {
  color: hsl(var(--pbc-ink));
  font-size: var(--pbc-size-title-m);
  font-weight: var(--pbc-weight-bold);
  letter-spacing: -.4px;
}
body.pbc-du.du-gs-m .du-mcard-dur { flex: 1; color: hsl(var(--pbc-ink-soft)); font-size: var(--pbc-size-label); }
body.pbc-du.du-gs-m .du-mcard-tag {
  padding: 4px 10px;
  border-radius: 10px 10px 10px 3px;
  background: hsl(var(--pbc-line-soft));
  color: hsl(var(--pbc-ink-soft));
  font-size: var(--pbc-size-small);
  font-weight: var(--pbc-weight-bold);
  white-space: nowrap;
}
body.pbc-du.du-gs-m .du-mcard--free .du-mcard-tag { background: hsl(var(--pbc-gold) / .3); color: hsl(var(--pbc-gold-ink)); }
body.pbc-du.du-gs-m .du-mcard--joined .du-mcard-tag { background: hsl(var(--pbc-green) / .18); color: hsl(var(--pbc-green-dark)); }
body.pbc-du.du-gs-m .du-mcard--mine .du-mcard-tag { background: hsl(var(--pbc-blue) / .14); color: hsl(var(--pbc-blue-dark)); }
body.pbc-du.du-gs-m .du-mcard--full .du-mcard-tag { background: hsl(var(--pbc-purple) / .16); color: hsl(var(--pbc-purple-ink)); }
body.pbc-du.du-gs-m .du-mcard-row2 { display: flex; align-items: center; gap: 10px; }
body.pbc-du.du-gs-m .du-mcard-photo { flex: 0 0 46px; width: 46px; overflow: hidden; border-radius: 10px; }
body.pbc-du.du-gs-m .du-mcard-photo img { display: block; width: 46px; height: auto; border-radius: 10px; }
body.pbc-du.du-gs-m .du-mcard-photo.is-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 55px;
  background: hsl(var(--pbc-cyan-soft));
  color: hsl(var(--pbc-cyan-ink));
  font-size: var(--pbc-size-body);
  font-weight: var(--pbc-weight-bold);
}
body.pbc-du.du-gs-m .du-mcard-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
body.pbc-du.du-gs-m .du-mcard-name {
  color: hsl(var(--pbc-ink));
  font-size: var(--pbc-size-body);
  font-weight: var(--pbc-weight-bold);
  text-decoration: none;
  overflow-wrap: anywhere;
}
body.pbc-du.du-gs-m .du-mcard-line { color: hsl(var(--pbc-ink-soft)); font-size: var(--pbc-size-small); }
body.pbc-du.du-gs-m .du-mcard-line.is-rating { color: hsl(var(--pbc-gold-ink)); font-weight: var(--pbc-weight-bold); }
body.pbc-du.du-gs-m .du-mcard-book {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 18px;
  border-radius: 14px;
  background: hsl(var(--pbc-blue));
  box-shadow: 0 3px 0 hsl(var(--pbc-blue-dark));
  color: hsl(var(--pbc-on-color));
  font-size: var(--pbc-size-body);
  font-weight: var(--pbc-weight-bold);
}

/* Al final: «¿Ninguna te encaja?» con el pedir clase de siempre */
body.pbc-du.du-gs-m .du-mreq {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
  padding: 18px;
  border: 1px solid hsl(var(--pbc-line-soft));
  border-radius: 20px;
  background: hsl(var(--pbc-surface));
}
body.pbc-du.du-gs-m .du-mreq-title {
  margin: 0;
  color: hsl(var(--pbc-ink));
  font-size: var(--pbc-size-title-m);
  font-weight: var(--pbc-weight-bold);
  letter-spacing: -.4px;
}
body.pbc-du.du-gs-m .du-mreq-text { margin: 0; color: hsl(var(--pbc-ink-soft)); font-size: var(--pbc-size-body); line-height: 1.4; }
body.pbc-du.du-gs-m .du-mreq-btn {
  width: 100%;
  height: 50px;
  margin: 0;
  border: 2px solid hsl(var(--pbc-line));
  border-radius: 16px;
  background: hsl(var(--pbc-surface));
  box-shadow: 0 3px 0 hsl(var(--pbc-line));
  color: hsl(var(--pbc-ink));
  font-family: inherit;
  font-size: var(--pbc-size-body);
  font-weight: var(--pbc-weight-bold);
}
/* Día sin clases (Guille 11/11): pedir clase es lo único del día → pegado a la fecha y en azul. */
body.pbc-du.du-gs-m .du-mreq--only { margin-top: 0; }
body.pbc-du.du-gs-m .du-mreq--only .du-mreq-btn {
  border-color: hsl(var(--pbc-blue));
  background: hsl(var(--pbc-blue));
  box-shadow: 0 3px 0 hsl(var(--pbc-blue-dark));
  color: hsl(var(--pbc-on-color));
}

/* Cursos intensivos al final de la lista (Guille 11/11/2026: «no me gusta cómo aparece la
   opción de los cursos»): tarjeta blanca como «¿Ninguna te encaja?», icono de línea, título
   y botón blanco que se hunde. Sustituye a la barra amarilla con la flecha verde. */
body.pbc-du.du-gs-m .du-mcourses {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 14px 0 0;
  padding: 18px;
  border: 1px solid hsl(var(--pbc-line-soft));
  border-radius: 20px;
  background: hsl(var(--pbc-surface));
  color: hsl(var(--pbc-ink));
  text-decoration: none;
}
body.pbc-du.du-gs-m .du-mcourses-head { display: flex; align-items: center; gap: 12px; }
body.pbc-du.du-gs-m .du-mcourses-ico {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: hsl(var(--pbc-blue-soft));
}
body.pbc-du.du-gs-m .du-mcourses-ico svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: hsl(var(--pbc-blue));
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body.pbc-du.du-gs-m .du-mcourses-title {
  color: hsl(var(--pbc-ink));
  font-size: var(--pbc-size-title-m);
  font-weight: var(--pbc-weight-bold);
  letter-spacing: -.4px;
}
body.pbc-du.du-gs-m .du-mcourses-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  border: 2px solid hsl(var(--pbc-line));
  border-radius: 16px;
  background: hsl(var(--pbc-surface));
  box-shadow: 0 3px 0 hsl(var(--pbc-line));
  color: hsl(var(--pbc-ink));
  font-size: var(--pbc-size-body);
  font-weight: var(--pbc-weight-bold);
}

/* «Ver ficha» en la ficha de cada clase: la foto y el nombre ya la abrían, pero nada lo
   decía y tocar la ficha abría siempre el asistente de reservar (Guille 11/11/2026). */
body.pbc-du.du-gs-m .du-mcard-prof {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  min-height: 28px;
  color: hsl(var(--pbc-blue));
  font-size: var(--pbc-size-small);
  font-weight: var(--pbc-weight-bold);
  text-decoration: underline;
  text-underline-offset: 2px;
}
body.pbc-du.du-gs-m .du-mcard-photo[data-person-id] { cursor: pointer; }

/* «Ver su ficha» dentro del ticket del móvil: botón blanco que se hunde, a lo ancho. */
.pbc-du .cw .cw-sec.cw-m-prof { margin-top: 12px; }

/* «Bueno saberlo»: lo que antes eran avisos arriba */
body.pbc-du.du-gs-m .du-mgood {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 14px 0 8px;
  padding: 16px 18px;
  border-radius: 20px;
  background: hsl(var(--pbc-page));
}
body.pbc-du.du-gs-m .du-mgood-title { margin: 0; color: hsl(var(--pbc-ink-soft)); font-size: var(--pbc-size-label); font-weight: var(--pbc-weight-bold); }
body.pbc-du.du-gs-m .du-mgood-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  color: hsl(var(--pbc-ink));
  font-size: var(--pbc-size-body);
  line-height: 1.4;
}
body.pbc-du.du-gs-m .du-mgood-row svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  fill: none;
  stroke: hsl(var(--pbc-blue));
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Lo de arriba que ya no va: «← Idiomas», Día/Semana/Mes, la semana de antes, la caja de
   la hora y los avisos de la clase de 10 € (van en «Bueno saberlo»). */
body.pbc-du.du-gs-m .gb-cal-back,
body.pbc-du.du-gs-m .du-tz-box,
body.pbc-du.du-gs-m [data-fc10-private-note],
body.pbc-du.du-gs-m [data-fc10-other-times],
body.pbc-du.du-gs-m .du-m-filters .schedule-view-switcher,
body.pbc-du.du-gs-m .du-m-filters .schedule-page-heading,
body.pbc-du.du-gs-m .gb-schedule > .schedule-date-nav { display: none !important; }
body.pbc-du.du-gs-m .du-m-filters { margin: 0 0 4px !important; }
body.pbc-du.du-gs-m .du-m-filters .schedule-filters-row { margin-top: 0; gap: 8px; }
/* Las barras de oferta, de curso y de clase especial: al final, nunca arriba. */
body.pbc-du.du-gs-m .gb-schedule > .fc10-topbar:not(.du-m-offer),
body.pbc-du.du-gs-m .gb-schedule > .du-m-shield,
body.pbc-du.du-gs-m .gb-schedule > .du-mcourses,
body.pbc-du.du-gs-m .gb-schedule > .fc10-groups,
body.pbc-du.du-gs-m .gb-schedule > .gs-course-promo,
body.pbc-du.du-gs-m .gb-schedule > .pbc-special-banner,
body.pbc-du.du-gs-m .gb-schedule > [data-fc10-calendar-empty] { order: 30; }

/* La oferta de la primera clase (10 €), ARRIBA solo para quien aún no ha pagado (Guille
   11/11/2026: «Sí, súbela»): bajo los idiomas y encima de «Elige tu día», compacta y con
   su botón amarillo (regla 2: amarillo = pagar). A quien ya paga no le sale nada arriba.
   El escudo «Primera clase protegida» se queda al final, para no cargar la parte de arriba. */
body.pbc-du.du-gs-m .gb-schedule > .fc10-topbar.du-m-offer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 6px 0 0;
  padding: 8px 8px 8px 14px;
  border: 1px solid hsl(var(--pbc-gold) / .6);
  border-radius: var(--pbc-radius-field);
  background: hsl(var(--pbc-gold-soft));
  color: hsl(var(--pbc-ink));
  text-decoration: none;
}
body.pbc-du.du-gs-m .du-m-offer .fc10-topbar-text {
  min-width: 0;
  color: hsl(var(--pbc-ink));
  font-size: var(--pbc-size-body);
  font-weight: var(--pbc-weight-bold);
  line-height: 1.2;
}
body.pbc-du.du-gs-m .du-m-offer .fc10-topbar-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 12px;
  background: hsl(var(--pbc-gold));
  box-shadow: 0 3px 0 hsl(var(--pbc-gold-dark));
  color: hsl(var(--pbc-ink));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
  white-space: nowrap;
}