/* ══════════════════════════════════════════════════════════════════════════
   PIEZAS DEL DISEÑO ÚNICO · «la 3 con marca PBC» (Guille, 08/11/2026)

   Maquetas: lienzo https://claude.ai/artifact/4hhEPAoAwKMUzikVaEqBEF, página 1
   (P3Kit, P3Clases, P3Asistente, P3Ticket, P3Form).

   Fase 1: Clases del móvil, el asistente de reservar clase y el ticket de clase.
   Solo cambia el ASPECTO: mismas pantallas, mismo orden y mismos botones.

   Reglas de esta hoja:
   · Solo se carga con el interruptor DISENO_UNICO, y TODO va dentro de
     `.pbc-du` (la clase que la plantilla pone en <body> con el interruptor):
     apagado, nada de aquí existe.
   · Ni un color escrito a mano: todo sale de static/css/pbc-design-tokens.css
     (lo vigila mainmodule/tests/test_diseno_unico.py).
   · Una letra (PBC Sans, 400 y 700) y una escala: 13, 15, 17 (texto normal),
   · 20, 24 y 30-32 (títulos). La alumna tipo tiene 55-75 años y lee con gafas.
   · Iconos: dibujos de línea (SVG) del mismo grosor. Nada de emojis.
   · La cabecera azul con curva (mobile-topbar.css), la barra de abajo y el
     logo oficial NO se tocan.

   Índice
     1. Piezas sueltas (para cualquier pantalla): botón que se hunde, etiqueta
        de tipo en bocadillo, tarjeta, etiquetas de estado, campos de
        formulario, subrayado amarillo, fotos e iconos.
     2. Clases del móvil (mclases.html y mclases_alumno.html).
     3. Ticket de clase (mclase_ticket_v2.html).
     4. Asistente de reservar clase (class-wizard.js en el calendario).
   ══════════════════════════════════════════════════════════════════════════ */


/* ── 1 · PIEZAS SUELTAS ──────────────────────────────────────────────────── */

/* 1.1 · EL BOTÓN QUE SE HUNDE. Uno solo para todo: alto 54, radio 16, letra
   17 en negrita y un canto de 4 px del tono oscuro que baja 3 px al pulsar.
   El papel lo dice el color: azul apuntarse/reservar, amarillo pagar, verde
   entrar ya, blanco con borde para lo secundario y gris para "aún no".
   Los botones de las pantallas de esta fase entran en la misma lista para
   heredar el mismo aspecto sin tocar su HTML. */
.pbc-du .pbc-k-btn,
.pbc-du .pbc-mclases-app .pbc-btn-reservar,
.pbc-du .pbc-mclases-app .pbc-mclases-planlink,
.pbc-du .pbc-c2-bar .pbc-mtk-join,
.pbc-du .pbc-c2-bar .pbc-c2-wait,
.pbc-du .cw .cw-cta,
.pbc-du .cw .cw-act--danger {
  --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));
  --k-drop: 4px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  min-height: 54px;
  padding: 10px 18px;
  border: 2px solid var(--k-line);
  border-radius: var(--pbc-radius-button);
  background: var(--k-bg);
  color: var(--k-ink);
  box-shadow: 0 var(--k-drop) 0 var(--k-edge);
  font-family: var(--pbc-font);
  font-size: var(--pbc-size-body);
  font-weight: var(--pbc-weight-bold);
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .08s ease, box-shadow .08s ease;
}
.pbc-du .pbc-k-btn:hover, .pbc-du .pbc-k-btn:focus,
.pbc-du .pbc-mclases-app .pbc-btn-reservar:hover, .pbc-du .pbc-mclases-app .pbc-btn-reservar:focus,
.pbc-du .pbc-mclases-app .pbc-mclases-planlink:hover, .pbc-du .pbc-mclases-app .pbc-mclases-planlink:focus,
.pbc-du .pbc-c2-bar .pbc-mtk-join:hover, .pbc-du .pbc-c2-bar .pbc-mtk-join:focus,
.pbc-du .cw .cw-cta:hover, .pbc-du .cw .cw-cta:focus {
  background: var(--k-bg);
  color: var(--k-ink);
  text-decoration: none;
}
.pbc-du .pbc-k-btn:active,
.pbc-du .pbc-mclases-app .pbc-btn-reservar:active,
.pbc-du .pbc-mclases-app .pbc-mclases-planlink:active,
.pbc-du .pbc-c2-bar .pbc-mtk-join:active,
.pbc-du .cw .cw-cta:active,
.pbc-du .cw .cw-act--danger:active {
  background: var(--k-bg);
  transform: translateY(calc(var(--k-drop) - 1px));
  box-shadow: 0 1px 0 var(--k-edge);
}
.pbc-du .pbc-k-btn:focus-visible,
.pbc-du .pbc-mclases-app .pbc-btn-reservar:focus-visible,
.pbc-du .pbc-mclases-app .pbc-mclases-planlink:focus-visible,
.pbc-du .pbc-c2-bar .pbc-mtk-join:focus-visible,
.pbc-du .cw .cw-cta:focus-visible {
  outline: 3px solid hsl(var(--pbc-blue) / .45);
  outline-offset: 3px;
}
/* Amarillo: pagar. */
.pbc-du .pbc-k-btn--pay {
  --k-bg: hsl(var(--pbc-gold));
  --k-ink: hsl(var(--pbc-ink));
  --k-edge: hsl(var(--pbc-gold-dark));
  --k-line: hsl(var(--pbc-gold));
}
/* Verde: entrar ya. */
.pbc-du .pbc-k-btn--go {
  --k-bg: hsl(var(--pbc-green));
  --k-edge: hsl(var(--pbc-green-dark));
  --k-line: hsl(var(--pbc-green));
}
/* Secundario: blanco con borde de 2 px y canto de 3 px. */
.pbc-du .pbc-k-btn--sec {
  --k-bg: hsl(var(--pbc-surface));
  --k-ink: hsl(var(--pbc-ink));
  --k-edge: hsl(var(--pbc-line));
  --k-line: hsl(var(--pbc-line));
  --k-drop: 3px;
}
/* Cancelar: secundario con la letra roja oscura. */
.pbc-du .pbc-k-btn--danger {
  --k-bg: hsl(var(--pbc-surface));
  --k-ink: hsl(var(--pbc-red-dark));
  --k-edge: hsl(var(--pbc-red) / .3);
  --k-line: hsl(var(--pbc-red) / .3);
  --k-drop: 3px;
}
/* Aún no (desactivado): gris, sin canto y sin hundirse. */
.pbc-du .pbc-k-btn--off,
.pbc-du .pbc-k-btn[disabled],
.pbc-du .pbc-k-btn[aria-disabled="true"] {
  --k-bg: hsl(var(--pbc-line-soft));
  --k-ink: hsl(var(--pbc-ink-soft));
  --k-edge: transparent;
  --k-line: hsl(var(--pbc-line-soft));
  --k-drop: 0px;
  cursor: default;
  transform: none;
  box-shadow: none;
}

/* 1.2 · ETIQUETA DE TIPO en forma de bocadillo (la esquina de abajo a la
   izquierda casi recta, como el bocadillo del logo; el logo de verdad no se
   toca). Fondo suave, letra oscura y un punto de color. */
.pbc-du .pbc-k-tag {
  --k-tag-bg: hsl(var(--pbc-blue-soft));
  --k-tag-ink: hsl(var(--pbc-blue-dark));
  --k-tag-dot: hsl(var(--pbc-blue));
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  width: auto;
  max-width: 100%;
  padding: 5px 11px;
  border-radius: var(--pbc-radius-tag);
  background: var(--k-tag-bg);
  color: var(--k-tag-ink);
  font-family: var(--pbc-font);
  font-size: var(--pbc-size-small);
  font-weight: var(--pbc-weight-bold);
  line-height: 1.2;
  white-space: nowrap;
}
.pbc-du .pbc-k-tag::before {
  content: '';
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--k-tag-dot);
}
.pbc-du .pbc-k-tag--intercambio {
  --k-tag-bg: hsl(var(--pbc-cyan-soft));
  --k-tag-ink: hsl(var(--pbc-cyan-ink));
  --k-tag-dot: hsl(var(--pbc-cyan));
}
.pbc-du .pbc-k-tag--evento {
  --k-tag-bg: hsl(var(--pbc-gold-soft));
  --k-tag-ink: hsl(var(--pbc-gold-ink));
  --k-tag-dot: hsl(var(--pbc-gold-dark));
}

/* 1.3 · TARJETA: blanca, línea de 1 px, radio 20 y sombra suave. */
.pbc-du .pbc-k-card {
  box-sizing: border-box;
  padding: 18px;
  border: 1px solid hsl(var(--pbc-line-soft));
  border-radius: var(--pbc-radius-card);
  background: hsl(var(--pbc-surface));
  box-shadow: 0 4px 14px hsl(var(--pbc-shadow) / .06);
}

/* 1.4 · ETIQUETAS DE ESTADO (píldora): queda 1 plaza, completo, en directo,
   gratis y "protegida" (la primera clase de 10 €). */
.pbc-du .pbc-k-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: hsl(var(--pbc-page));
  color: hsl(var(--pbc-ink-soft));
  box-shadow: none;
  font-family: var(--pbc-font);
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
}
.pbc-du .pbc-k-status--few { background: hsl(var(--pbc-gold-soft)); color: hsl(var(--pbc-gold-ink)); }
.pbc-du .pbc-k-status--full { background: hsl(var(--pbc-line-soft)); color: hsl(var(--pbc-ink-soft)); }
.pbc-du .pbc-k-status--live { background: hsl(var(--pbc-red-soft)); color: hsl(var(--pbc-red-dark)); }
.pbc-du .pbc-k-status--live::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: hsl(var(--pbc-red));
}
.pbc-du .pbc-k-status--free,
.pbc-du .pbc-k-status--ok { background: hsl(var(--pbc-green-soft)); color: hsl(var(--pbc-green)); }
.pbc-du button.pbc-k-status { cursor: pointer; }
/* El escudo de la primera clase (includes/fc10_shield.html con du): la
   explicación se abre debajo, dentro de la página. */
.pbc-du .pbc-k-shield { margin-top: 12px; line-height: 1; }
.pbc-du .pbc-k-shield--center { text-align: center; }
.pbc-du .pbc-k-shield .pbc-k-ico { width: 17px; height: 17px; }
.pbc-du .pbc-k-shield .pbc-k-ico--info { width: 15px; height: 15px; opacity: .75; }
.pbc-du .pbc-k-pop {
  box-sizing: border-box;
  max-width: 300px;
  margin: 8px 0 0;
  padding: 12px 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));
  box-shadow: 0 4px 14px hsl(var(--pbc-shadow) / .10);
  font-family: var(--pbc-font);
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-regular);
  line-height: 1.45;
  text-align: left;
  white-space: normal;
}
.pbc-du .pbc-k-shield--center .pbc-k-pop { margin-left: auto; margin-right: auto; }
.pbc-du .pbc-k-pop[hidden] { display: none; }

/* 1.5 · FORMULARIOS (Guille: "en todo, incluso formularios"). Etiqueta en
   negrita encima, campo con borde de 2 px y radio 14. Al enfocar, borde azul
   con un halo suave; con error, borde rojo y el texto en rojo oscuro. */
.pbc-du .pbc-k-field { display: flex; flex-direction: column; gap: 6px; }
.pbc-du .pbc-k-label {
  color: hsl(var(--pbc-ink));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
  line-height: 1.3;
}
.pbc-du .pbc-k-hint { color: hsl(var(--pbc-muted)); font-size: var(--pbc-size-label); line-height: 1.4; }
.pbc-du .pbc-k-input,
.pbc-du .pbc-k-select,
.pbc-du .pbc-k-textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 0 14px;
  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: none;
  font-family: var(--pbc-font);
  font-size: var(--pbc-size-body);
  font-weight: var(--pbc-weight-regular);
  line-height: 1.3;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pbc-du .pbc-k-textarea { min-height: 112px; padding: 12px 14px; resize: vertical; }
.pbc-du .pbc-k-select { padding-right: 44px; cursor: pointer; }
/* La flecha del desplegable es un dibujo de línea en una caja alrededor. */
.pbc-du .pbc-k-selectbox { position: relative; display: block; }
.pbc-du .pbc-k-selectbox::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 14px;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  background: hsl(var(--pbc-muted));
  pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pbc-du .pbc-k-input::placeholder,
.pbc-du .pbc-k-textarea::placeholder { color: hsl(var(--pbc-muted)); opacity: 1; }
.pbc-du .pbc-k-input:focus,
.pbc-du .pbc-k-select:focus,
.pbc-du .pbc-k-textarea:focus {
  outline: none;
  border-color: hsl(var(--pbc-blue));
  box-shadow: 0 0 0 4px hsl(var(--pbc-blue-soft));
}
.pbc-du .pbc-k-field.is-error .pbc-k-input,
.pbc-du .pbc-k-field.is-error .pbc-k-select,
.pbc-du .pbc-k-field.is-error .pbc-k-textarea,
.pbc-du .pbc-k-input[aria-invalid="true"],
.pbc-du .pbc-k-select[aria-invalid="true"],
.pbc-du .pbc-k-textarea[aria-invalid="true"] {
  border-color: hsl(var(--pbc-red));
  background: hsl(var(--pbc-red-soft));
}
.pbc-du .pbc-k-error {
  display: flex;
  align-items: center;
  gap: 6px;
  color: hsl(var(--pbc-red-dark));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
  line-height: 1.3;
}
/* Casilla y opción: un cuadrado (o círculo) de 26 px que se pinta de azul. */
.pbc-du .pbc-k-check,
.pbc-du .pbc-k-radio {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 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-body);
  line-height: 1.3;
  cursor: pointer;
}
.pbc-du .pbc-k-check input,
.pbc-du .pbc-k-radio input {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  margin: 0;
  border: 2px solid hsl(var(--pbc-line));
  border-radius: 8px;
  background: hsl(var(--pbc-surface));
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.pbc-du .pbc-k-radio input { border-radius: 50%; }
.pbc-du .pbc-k-check input:checked { border-color: hsl(var(--pbc-blue)); background: hsl(var(--pbc-blue)); }
.pbc-du .pbc-k-check input:checked::after {
  content: '';
  width: 6px;
  height: 11px;
  margin-top: -3px;
  border: solid hsl(var(--pbc-on-color));
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.pbc-du .pbc-k-radio input:checked {
  border-color: hsl(var(--pbc-blue));
  background: hsl(var(--pbc-blue));
  box-shadow: inset 0 0 0 5px hsl(var(--pbc-surface));
}
.pbc-du .pbc-k-check input:focus-visible,
.pbc-du .pbc-k-radio input:focus-visible { outline: none; box-shadow: 0 0 0 4px hsl(var(--pbc-blue-soft)); }
/* Grupo de fichas (el nivel, por ejemplo): se pulsan como los botones. */
.pbc-du .pbc-k-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 8px; }
.pbc-du .pbc-k-chip {
  box-sizing: border-box;
  min-height: 44px;
  margin: 0 0 3px;
  padding: 0 10px;
  border: 2px solid hsl(var(--pbc-line));
  border-radius: 12px;
  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 .pbc-k-chip:active { transform: translateY(2px); box-shadow: 0 1px 0 hsl(var(--pbc-line)); }
.pbc-du .pbc-k-chip.is-on,
.pbc-du .pbc-k-chip[aria-pressed="true"],
.pbc-du input:checked + .pbc-k-chip {
  border-color: hsl(var(--pbc-blue));
  background: hsl(var(--pbc-blue-soft));
  color: hsl(var(--pbc-blue-dark));
  box-shadow: 0 3px 0 hsl(var(--pbc-blue));
}

/* 1.6 · SUBRAYADO AMARILLO para una palabra clave de algunos títulos. */
.pbc-du .pbc-k-mark {
  padding: 0 2px;
  background: linear-gradient(transparent 60%, hsl(var(--pbc-gold)) 60%, hsl(var(--pbc-gold)) 92%, transparent 92%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* 1.7 · FOTOS REALES llenando el cuadro (sin bordes negros ni mascotas) e
   ICONOS de línea del mismo grosor. */
.pbc-du .pbc-k-photo {
  display: block;
  width: 100%;
  object-fit: cover;
  border-radius: var(--pbc-radius-field);
  background: hsl(var(--pbc-page));
}
.pbc-du .pbc-k-ico { width: 20px; height: 20px; flex: 0 0 auto; }
.pbc-du .pbc-k-ico,
.pbc-du .pbc-k-ico * { fill: none; stroke: currentColor; }
.pbc-du .pbc-k-icobox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: var(--pbc-radius-field);
  background: hsl(var(--pbc-blue-soft));
  color: hsl(var(--pbc-blue));
}


/* ── 2 · CLASES DEL MÓVIL (mclases.html y mclases_alumno.html) ───────────── */

/* Fondo blanco (la maqueta) y la letra de la casa en todo. */
.pbc-du .pbc-mclases-app { background: hsl(var(--pbc-surface)); font-family: var(--pbc-font); }
.pbc-du .pbc-mclases-app button,
.pbc-du .pbc-mclases-app input,
.pbc-du .pbc-mclases-app summary { font-family: inherit; }
/* Sin mascotas en pantallas de alumnos (Guille, 08/11/2026). */
.pbc-du .pbc-mclases-mascot,
.pbc-du .pbc-zorra-paseo { display: none !important; }
/* Subtítulo de la cabecera a 17 (la cabecera, su curva y el logo, igual). */
.pbc-du .pbc-mclases-app .pbc-mtop-heading p { font-size: var(--pbc-size-body); }

/* Tarjetas */
.pbc-du .pbc-mclases-app .pbc-mclases-card,
.pbc-du .pbc-mclases-app .pbc-mclases-plans {
  border: 1px solid hsl(var(--pbc-line-soft));
  border-radius: var(--pbc-radius-card);
  background: hsl(var(--pbc-surface));
  box-shadow: 0 4px 14px hsl(var(--pbc-shadow) / .06);
}
.pbc-du .pbc-mclases-app .pbc-mclases-book { padding: 18px; }
.pbc-du .pbc-mclases-book > .pbc-k-tag { margin-bottom: 10px; }
.pbc-du .pbc-mclases-book > h2 {
  font-size: var(--pbc-size-title-m);
  font-weight: var(--pbc-weight-bold);
  line-height: 1.15;
  letter-spacing: -.5px;
}
.pbc-du .pbc-mclases-book > h2 + .pbc-btn-reservar { margin-top: 16px; }
.pbc-du .pbc-mclases-book > p {
  margin: 10px 0 18px;
  color: hsl(var(--pbc-ink-soft));
  font-size: var(--pbc-size-body);
  font-weight: var(--pbc-weight-regular);
  line-height: 1.4;
}
.pbc-du .pbc-mclases-app .pbc-mclases-sectiontitle {
  font-size: var(--pbc-size-title-m);
  font-weight: var(--pbc-weight-bold);
  letter-spacing: -.4px;
}
.pbc-du .pbc-mclases-app .pbc-mclases-empty {
  color: hsl(var(--pbc-ink-soft));
  font-size: var(--pbc-size-body);
  font-weight: var(--pbc-weight-regular);
}

/* Botones: azul por defecto; la clase de 10 € y los planes son pagar
   (amarillo); el plan que ya tienes, gris; cancelar o salirse, en rojo. */
.pbc-du .pbc-mclases-app .pbc-btn-reservar.pbc-du-pay,
.pbc-du .pbc-mclases-plan .pbc-mclases-planlink {
  --k-bg: hsl(var(--pbc-gold));
  --k-ink: hsl(var(--pbc-ink));
  --k-edge: hsl(var(--pbc-gold-dark));
  --k-line: hsl(var(--pbc-gold));
}
.pbc-du .pbc-mclases-app .pbc-mclases-planlink--current,
.pbc-du .pbc-mclases-app .pbc-mclases-planlink[disabled] {
  --k-bg: hsl(var(--pbc-line-soft));
  --k-ink: hsl(var(--pbc-ink-soft));
  --k-edge: transparent;
  --k-line: hsl(var(--pbc-line-soft));
  --k-drop: 0px;
  cursor: default;
}
.pbc-du .pbc-mclases-app [data-cr-url*="/cancel/"],
.pbc-du .pbc-mclases-app [data-cr-url*="/leave/"] {
  --k-bg: hsl(var(--pbc-surface));
  --k-ink: hsl(var(--pbc-red-dark));
  --k-edge: hsl(var(--pbc-red) / .3);
  --k-line: hsl(var(--pbc-red) / .3);
  --k-drop: 3px;
}
.pbc-du .pbc-mclases-book .pbc-btn-reservar { margin-bottom: 4px; }
.pbc-du .pbc-mclases-app .pbc-mclases-plan .pbc-mclases-planlink { min-height: 54px; margin-top: 14px; font-size: var(--pbc-size-body); }
.pbc-du .pbc-mclases-app .pbc-mdeberes-open { min-height: 54px; font-size: var(--pbc-size-body); }
.pbc-du .pbc-mclases-app .pbc-mclases-secondary {
  margin-top: 14px;
  color: hsl(var(--pbc-blue-dark));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
}

/* Planes: una fila blanca como la maqueta (cuadrito de icono, título y flecha). */
.pbc-du .pbc-mclases-app .pbc-mclases-planicon {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: var(--pbc-radius-field);
  background: hsl(var(--pbc-blue-soft));
  color: hsl(var(--pbc-blue));
}
.pbc-du .pbc-mclases-app .pbc-mclases-planicon svg { width: 22px; height: 22px; }
.pbc-du .pbc-mclases-app .pbc-mclases-plans > summary {
  min-height: 76px;
  gap: 14px;
  padding: 0 16px;
  color: hsl(var(--pbc-ink));
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .pbc-mclases-app .pbc-mclases-plans--destaca > summary {
  background: hsl(var(--pbc-surface));
  color: hsl(var(--pbc-ink));
}
.pbc-du .pbc-mclases-app .pbc-mclases-plans--destaca > summary .pbc-mclases-planicon {
  background: hsl(var(--pbc-blue-soft));
  color: hsl(var(--pbc-blue));
}
.pbc-du .pbc-mclases-app .pbc-mclases-planlabel,
.pbc-du .pbc-mclases-app .pbc-mclases-plans--destaca > summary .pbc-mclases-planlabel {
  font-size: var(--pbc-size-body);
  letter-spacing: -.2px;
}
.pbc-du .pbc-mclases-app .pbc-mclases-planlabel small,
.pbc-du .pbc-mclases-app .pbc-mclases-plans--destaca > summary .pbc-mclases-planlabel small {
  margin-top: 2px;
  color: hsl(var(--pbc-muted));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-regular);
}
.pbc-du .pbc-mclases-app .pbc-mclases-chevron,
.pbc-du .pbc-mclases-app .pbc-mclases-plans--destaca > summary .pbc-mclases-chevron { color: hsl(var(--pbc-muted)); }
.pbc-du .pbc-mclases-app .pbc-mclases-plans--destaca { border-color: hsl(var(--pbc-line-soft)); }
.pbc-du .pbc-mclases-app .pbc-mclases-plans--destaca[open] > summary { border-bottom: 1px solid hsl(var(--pbc-line-soft)); }
.pbc-du .pbc-mclases-app .pbc-mclases-planbody p { color: hsl(var(--pbc-ink-soft)); font-size: var(--pbc-size-label); }
/* Cada plan */
.pbc-du .pbc-mclases-app .pbc-mclases-plan {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid hsl(var(--pbc-line-soft));
  border-radius: 18px;
  background: hsl(var(--pbc-page));
}
.pbc-du .pbc-mclases-app .pbc-mclases-plan--recommended {
  border: 2px solid hsl(var(--pbc-blue));
  background: hsl(var(--pbc-surface));
  box-shadow: 0 4px 14px hsl(var(--pbc-shadow) / .08);
}
.pbc-du .pbc-mclases-app .pbc-mclases-plan--current {
  border: 2px solid hsl(var(--pbc-green) / .45);
  background: hsl(var(--pbc-green-soft));
}
.pbc-du .pbc-mclases-app .pbc-mclases-planname strong { font-size: var(--pbc-size-title-s); font-weight: var(--pbc-weight-bold); }
.pbc-du .pbc-mclases-app .pbc-mclases-planname small {
  color: hsl(var(--pbc-muted));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-regular);
}
.pbc-du .pbc-mclases-app .pbc-mclases-plantag {
  margin-top: 6px;
  padding: 3px 10px;
  background: hsl(var(--pbc-green-soft));
  color: hsl(var(--pbc-green));
  font-size: var(--pbc-size-small);
  font-weight: var(--pbc-weight-bold);
  letter-spacing: 0;
  text-transform: none;
}
.pbc-du .pbc-mclases-app .pbc-mclases-plantag--reco { background: hsl(var(--pbc-blue-soft)); color: hsl(var(--pbc-blue-dark)); }
.pbc-du .pbc-mclases-app .pbc-mclases-plan--current .pbc-mclases-plantag { background: hsl(var(--pbc-surface)); }
.pbc-du .pbc-mclases-app .pbc-mclases-plannumber {
  font-size: var(--pbc-size-title-m);
  font-weight: var(--pbc-weight-bold);
  letter-spacing: -.5px;
}
.pbc-du .pbc-mclases-app .pbc-mclases-planperiod {
  color: hsl(var(--pbc-muted));
  font-size: var(--pbc-size-small);
  font-weight: var(--pbc-weight-regular);
}
.pbc-du .pbc-mclases-app .pbc-mclases-perclass {
  padding: 4px 10px;
  border-radius: 999px;
  background: hsl(var(--pbc-blue-soft));
  color: hsl(var(--pbc-blue-dark));
  font-size: var(--pbc-size-small);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .pbc-mclases-app .pbc-mclases-planfeatures li {
  color: hsl(var(--pbc-ink-soft));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-regular);
}
.pbc-du .pbc-mclases-app .pbc-mclases-planfeatures svg { color: hsl(var(--pbc-green)); }
.pbc-du .pbc-mclases-app .pbc-mclases-plans .pbc-mclases-benefits summary {
  color: hsl(var(--pbc-blue-dark));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .pbc-mclases-app .pbc-mclases-guarantee {
  color: hsl(var(--pbc-ink-soft));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-regular);
}
/* El escudo de la garantía, de línea y verde, en vez del emoji. */
.pbc-du .pbc-mclases-app .pbc-mclases-guarantee::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  vertical-align: -3px;
  background: hsl(var(--pbc-green));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Crédito suelto: − y + como botones secundarios y la cantidad como campo. */
.pbc-du .pbc-mclases-app .pbc-mclases-qtybtn {
  width: 48px;
  height: 48px;
  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-size: var(--pbc-size-title-m);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .pbc-mclases-app .pbc-mclases-qtybtn:active { transform: translateY(2px); box-shadow: 0 1px 0 hsl(var(--pbc-line)); background: hsl(var(--pbc-surface)); }
.pbc-du .pbc-mclases-app .pbc-mclases-qtynum {
  width: 76px;
  min-width: 76px;
  min-height: 52px;
  border: 2px solid hsl(var(--pbc-line));
  border-radius: var(--pbc-radius-field);
  font-size: var(--pbc-size-title-s);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .pbc-mclases-app .pbc-mclases-qtynum:focus {
  outline: none;
  border-color: hsl(var(--pbc-blue));
  box-shadow: 0 0 0 4px hsl(var(--pbc-blue-soft));
}

/* Próxima clase y las demás */
.pbc-du .pbc-mclases-app .pbc-mclases-next { padding: 18px 40px 18px 18px; }
.pbc-du .pbc-mclases-app .pbc-mclases-language { font-size: var(--pbc-size-title-s); font-weight: var(--pbc-weight-bold); }
.pbc-du .pbc-mclases-app .pbc-mclases-flag {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: hsl(var(--pbc-blue-soft));
  color: hsl(var(--pbc-blue));
}
.pbc-du .pbc-mclases-app .pbc-mclases-level {
  padding: 5px 12px;
  background: hsl(var(--pbc-blue-soft));
  color: hsl(var(--pbc-blue-dark));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .pbc-mclases-app .pbc-mclases-detail { padding: 12px; border-radius: var(--pbc-radius-field); background: hsl(var(--pbc-page)); }
.pbc-du .pbc-mclases-app .pbc-mclases-detail svg { color: hsl(var(--pbc-blue)); }
.pbc-du .pbc-mclases-app .pbc-mclases-detailtext span,
.pbc-du .pbc-mclases-app .pbc-mclases-creditstext span {
  color: hsl(var(--pbc-muted));
  font-size: var(--pbc-size-small);
  font-weight: var(--pbc-weight-bold);
  letter-spacing: 0;
  text-transform: none;
}
/* Sin mayúsculas forzadas, pero la etiqueta empieza en mayúscula ("tu hora…"). */
.pbc-du .pbc-mclases-app .pbc-mclases-detailtext span::first-letter,
.pbc-du .pbc-mclases-app .pbc-mclases-creditstext span::first-letter { text-transform: uppercase; }
/* La hora entera, aunque baje de línea: antes se cortaba con "…". */
.pbc-du .pbc-mclases-app .pbc-mclases-detailtext strong {
  overflow: visible;
  font-size: var(--pbc-size-body);
  font-weight: var(--pbc-weight-bold);
  line-height: 1.25;
  text-overflow: clip;
  white-space: normal;
}
.pbc-du .pbc-mclases-app .pbc-mclases-more { padding: 4px 18px; }
.pbc-du .pbc-mclases-app .pbc-mclases-morerow { padding: 14px 0; border-bottom-color: hsl(var(--pbc-line-soft)); }
.pbc-du .pbc-mclases-app .pbc-mclases-morerow:last-child { border-bottom: 0; }
.pbc-du .pbc-mclases-app .pbc-mclases-moremain strong { font-size: var(--pbc-size-body); font-weight: var(--pbc-weight-bold); }
.pbc-du .pbc-mclases-app .pbc-mclases-moremain small {
  color: hsl(var(--pbc-muted));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-regular);
}
.pbc-du .pbc-mclases-app .pbc-mclases-moreteacher {
  color: hsl(var(--pbc-blue-dark));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .pbc-mclases-app .pbc-mclases-next .pbc-mclases-chevron,
.pbc-du .pbc-mclases-app .pbc-mclases-moreteacher .pbc-mclases-chevron { color: hsl(var(--pbc-subtle)); }

/* Créditos e historial */
.pbc-du .pbc-mclases-app .pbc-mclases-credits { padding: 18px; }
.pbc-du .pbc-mclases-app .pbc-mclases-creditstext strong {
  font-size: var(--pbc-size-title-l);
  font-weight: var(--pbc-weight-bold);
  letter-spacing: -.6px;
}
.pbc-du .pbc-mclases-app .pbc-mclases-history { border-top-color: hsl(var(--pbc-line-soft)); }
.pbc-du .pbc-mclases-app .pbc-mclases-history summary {
  padding: 14px 2px 4px;
  color: hsl(var(--pbc-ink));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .pbc-mclases-app .pbc-mclases-moves li { padding: 12px 2px; border-top-color: hsl(var(--pbc-line-soft)); }
.pbc-du .pbc-mclases-app .pbc-mclases-movetext strong { font-size: var(--pbc-size-label); font-weight: var(--pbc-weight-bold); }
.pbc-du .pbc-mclases-app .pbc-mclases-movetext span {
  color: hsl(var(--pbc-muted));
  font-size: var(--pbc-size-small);
  font-weight: var(--pbc-weight-regular);
}
.pbc-du .pbc-mclases-app .pbc-mclases-moveamount { color: hsl(var(--pbc-red-dark)); font-size: var(--pbc-size-body); font-weight: var(--pbc-weight-bold); }
.pbc-du .pbc-mclases-app .pbc-mclases-moveamount--plus { color: hsl(var(--pbc-green)); }
.pbc-du .pbc-mclases-app .pbc-mclases-more > .pbc-mclases-movesempty { padding: 14px 0; }
.pbc-du .pbc-mclases-app .pbc-mclases-movesempty {
  color: hsl(var(--pbc-muted));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-regular);
}

/* Filas-enlace (deberes, temario): como "Planes de clases" de la maqueta. */
.pbc-du .pbc-mclases-app .pbc-mclases-rowlink {
  gap: 14px;
  min-height: 76px;
  padding: 14px 16px;
  color: hsl(var(--pbc-ink));
  font-size: var(--pbc-size-body);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .pbc-mclases-app .pbc-mclases-rowlinktext small {
  color: hsl(var(--pbc-muted));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-regular);
}

/* Deberes (mclases_alumno) */
.pbc-du .pbc-mclases-app .pbc-mdeberes-card { padding: 18px; }
.pbc-du .pbc-mclases-app .pbc-mdeberes-teacher { font-size: var(--pbc-size-body); font-weight: var(--pbc-weight-bold); }
.pbc-du .pbc-mclases-app .pbc-mdeberes-when { color: hsl(var(--pbc-muted)); font-size: var(--pbc-size-small); font-weight: var(--pbc-weight-regular); }
.pbc-du .pbc-mclases-app .pbc-mdeberes-title { color: hsl(var(--pbc-blue-dark)); font-size: var(--pbc-size-body); font-weight: var(--pbc-weight-bold); }
.pbc-du .pbc-mclases-app .pbc-mdeberes-note { color: hsl(var(--pbc-ink-soft)); font-size: var(--pbc-size-label); font-weight: var(--pbc-weight-regular); }

/* Copiar y compartir: cuadritos secundarios con iconos de línea. */
.pbc-du .pbc-mclases-app .pbc-sharebtn {
  width: 40px;
  height: 40px;
  border: 2px solid hsl(var(--pbc-line));
  border-radius: 12px;
  background: hsl(var(--pbc-surface));
  color: hsl(var(--pbc-ink));
  box-shadow: 0 3px 0 hsl(var(--pbc-line));
}
.pbc-du .pbc-mclases-app .pbc-sharebtn:active { transform: translateY(2px); box-shadow: 0 1px 0 hsl(var(--pbc-line)); }
.pbc-du .pbc-mclases-app .pbc-sharerow { gap: 8px; }

/* Los profes (carrusel de siempre): solo la letra y su botón. */
.pbc-du .pbc-mclases-app .pbc-profes p.pbc-profes-name { font-size: var(--pbc-size-title-s); font-weight: var(--pbc-weight-bold); }
.pbc-du .pbc-mclases-app .pbc-profes-rating { font-size: var(--pbc-size-small); }
.pbc-du .pbc-mclases-app .pbc-profes-rating b { font-weight: var(--pbc-weight-bold); }
.pbc-du .pbc-mclases-app .pbc-profes-medals li { font-size: var(--pbc-size-small); font-weight: var(--pbc-weight-bold); }
.pbc-du .pbc-mclases-app .pbc-profes-book {
  min-height: 50px;
  border-radius: var(--pbc-radius-button);
  font-size: var(--pbc-size-body);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .pbc-mclases-app .pbc-profes-initial { font-weight: var(--pbc-weight-bold); }

/* Vídeos de alumnos: la foto de portada llena el cuadro (sin bandas negras). */
.pbc-du .pbc-mclases-app .pbc-svid-poster { background-size: cover; background-position: center 30%; }

/* Clase "Special" (calabaza): el aviso con la letra de la casa. */
.pbc-du .pbc-mclases-app .pbc-special-pop-card strong { font-size: var(--pbc-size-title-s); }
.pbc-du .pbc-mclases-app .pbc-special-pop-go { font-weight: var(--pbc-weight-bold); }


/* ── 3 · TICKET DE CLASE (mclase_ticket_v2.html) ─────────────────────────── */

.pbc-du .pbc-c2 .pbc-mtk-card {
  padding: 18px;
  border: 1px solid hsl(var(--pbc-line-soft));
  border-radius: var(--pbc-radius-card);
  box-shadow: 0 4px 14px hsl(var(--pbc-shadow) / .06);
}
.pbc-du .pbc-c2 .pbc-mtk-card > .pbc-k-tag { margin-bottom: 10px; }
.pbc-du .pbc-c2 .pbc-mtk-title {
  font-size: var(--pbc-size-title-m);
  font-weight: var(--pbc-weight-bold);
  line-height: 1.2;
  letter-spacing: -.4px;
}
.pbc-du .pbc-c2 .pbc-mtk-desc {
  color: hsl(var(--pbc-ink-soft));
  font-size: var(--pbc-size-body);
  font-weight: var(--pbc-weight-regular);
}
.pbc-du .pbc-c2 .pbc-c2-teacher { gap: 14px; margin-top: 12px; }
.pbc-du .pbc-c2 .pbc-c2-name { font-size: var(--pbc-size-title-s); font-weight: var(--pbc-weight-bold); }
.pbc-du .pbc-c2 .pbc-c2-sub { color: hsl(var(--pbc-muted)); font-size: var(--pbc-size-label); font-weight: var(--pbc-weight-regular); }
.pbc-du .pbc-c2 .pbc-c2-link,
.pbc-du .pbc-c2-bar .pbc-c2-link {
  min-height: 44px;
  color: hsl(var(--pbc-blue-dark));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .pbc-c2-bar .pbc-c2-link { display: inline-flex; align-items: center; }
.pbc-du .pbc-c2 .pbc-c2-teacher .pbc-c2-link { min-height: 0; padding: 4px 0; }
.pbc-du .pbc-c2 .pbc-c2-when small::first-letter { text-transform: uppercase; }
/* Cancelar, en rojo oscuro (rojo = cancelar). */
.pbc-du .pbc-c2-bar #mtkCancel { color: hsl(var(--pbc-red-dark)); }
.pbc-du .pbc-c2 .pbc-c2-chips { gap: 8px; }
.pbc-du .pbc-c2 .pbc-c2-chip {
  padding: 6px 12px;
  border: 0;
  background: hsl(var(--pbc-page));
  color: hsl(var(--pbc-ink));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .pbc-c2 .pbc-c2-when {
  margin-top: 14px;
  font-size: var(--pbc-size-title-s);
  font-weight: var(--pbc-weight-bold);
  line-height: 1.25;
}
.pbc-du .pbc-c2 .pbc-c2-when small {
  color: hsl(var(--pbc-muted));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-regular);
}
/* "Empieza en…": una píldora amarilla suave, como la maqueta. */
.pbc-du .pbc-c2 .pbc-c2-left {
  display: inline-flex;
  justify-content: flex-start;
  gap: 6px;
  margin-top: 12px;
  padding: 7px 14px;
  border-radius: 999px;
  background: hsl(var(--pbc-gold-soft));
  color: hsl(var(--pbc-gold-ink));
}
.pbc-du .pbc-c2 .pbc-c2-left span,
.pbc-du .pbc-c2 .pbc-c2-left b {
  color: hsl(var(--pbc-gold-ink));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .pbc-c2 .pbc-c2-kick {
  margin: 0 0 10px;
  color: hsl(var(--pbc-ink));
  font-size: var(--pbc-size-title-s);
  font-weight: var(--pbc-weight-bold);
  letter-spacing: -.2px;
  text-transform: none;
}
.pbc-du .pbc-c2 .pbc-c2-steps li {
  grid-template-columns: 54px 14px 1fr;
  padding: 6px 0;
  font-size: var(--pbc-size-body);
}
.pbc-du .pbc-c2 .pbc-c2-steps time { font-weight: var(--pbc-weight-bold); }
.pbc-du .pbc-c2 .pbc-c2-dot { margin-top: 6px; }
.pbc-du .pbc-c2 .pbc-c2-note {
  padding: 14px 16px;
  border: 0;
  border-radius: var(--pbc-radius-field);
  background: hsl(var(--pbc-page));
  color: hsl(var(--pbc-ink-soft));
  font-size: var(--pbc-size-label);
}
.pbc-du .pbc-c2 .pbc-mtk-note { color: hsl(var(--pbc-muted)); font-size: var(--pbc-size-label); font-weight: var(--pbc-weight-regular); }
.pbc-du .pbc-c2 .pbc-mtk-msg { color: hsl(var(--pbc-red-dark)); font-size: var(--pbc-size-label); font-weight: var(--pbc-weight-bold); }
/* Invitar y copiar: secundarios. */
.pbc-du .pbc-c2 .pbc-xinv-btn {
  min-height: 52px;
  border: 2px solid hsl(var(--pbc-line));
  border-radius: var(--pbc-radius-button);
  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);
}
.pbc-du .pbc-c2 .pbc-xinv-btn:hover { background: hsl(var(--pbc-surface)); color: hsl(var(--pbc-ink)); }
.pbc-du .pbc-c2 .pbc-xinv-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 hsl(var(--pbc-line)); }
.pbc-du .pbc-c2 .pbc-sharebtn {
  width: 44px;
  height: 44px;
  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));
}
.pbc-du .pbc-c2 .pbc-sharebtn:active { transform: translateY(2px); box-shadow: 0 1px 0 hsl(var(--pbc-line)); }
.pbc-du .pbc-c2 .pbc-sharerow { gap: 8px; }
/* La barra fija de abajo: verde "Entrar", azul "Valorar", gris "Se abre a las…". */
.pbc-du .pbc-c2-bar {
  padding-top: 14px;
  border-top: 1px solid hsl(var(--pbc-line-soft));
  box-shadow: 0 -6px 18px hsl(var(--pbc-ink) / .08);
  font-family: var(--pbc-font);
}
.pbc-du .pbc-c2-bar .pbc-mtk-join[data-t2-enter] {
  --k-bg: hsl(var(--pbc-green));
  --k-edge: hsl(var(--pbc-green-dark));
  --k-line: hsl(var(--pbc-green));
}
.pbc-du .pbc-c2-bar .pbc-mtk-join + .pbc-mtk-join { margin-top: 12px; }
.pbc-du .pbc-c2-bar .pbc-c2-wait {
  --k-bg: hsl(var(--pbc-line-soft));
  --k-ink: hsl(var(--pbc-ink-soft));
  --k-edge: transparent;
  --k-line: hsl(var(--pbc-line-soft));
  --k-drop: 0px;
  cursor: default;
}
.pbc-du .pbc-c2-bar .pbc-c2-remind { color: hsl(var(--pbc-muted)); font-size: var(--pbc-size-label); }
.pbc-du .pbc-c2-bar .pbc-c2-links { gap: 0 18px; margin-top: 6px; }


/* ── 4 · ASISTENTE DE RESERVAR CLASE (class-wizard.js) ──────────────────── */
/* El guion, con el interruptor, cambia los emojis por dibujos de línea
   (.cw-svg), sube "Paso n de t" encima de la barra (.cw-prog) y pinta la
   barra por tramos (un <span> por paso). Aquí, el resto del aspecto. */

.pbc-du .cw { background: hsl(var(--pbc-surface)); color: hsl(var(--pbc-ink)); font-family: var(--pbc-font); }
.pbc-du .cw button,
.pbc-du .cw input,
.pbc-du .cw textarea,
.pbc-du .cw select { font-family: inherit; }
.pbc-du .cw .cw-svg { width: 22px; height: 22px; flex: 0 0 auto; display: block; }
/* De línea siempre: alguna hoja global del calendario rellena los trazos. */
.pbc-du .cw .cw-svg,
.pbc-du .cw .cw-svg * { fill: none; stroke: currentColor; }

/* Arriba: atrás, el paso y la barra, compartir y cerrar. */
.pbc-du .cw .cw-top { gap: 12px; padding: 16px 18px 8px; }
.pbc-du .cw .cw-back,
.pbc-du .cw .cw-x,
.pbc-du .cw .cw-share {
  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));
  transition: transform .08s ease, box-shadow .08s ease;
}
.pbc-du .cw .cw-back:active,
.pbc-du .cw .cw-x:active,
.pbc-du .cw .cw-share:active { transform: translateY(2px); box-shadow: 0 1px 0 hsl(var(--pbc-line)); }
.pbc-du .cw .cw-share[hidden] { display: none; }
.pbc-du .cw .cw-back .cw-svg,
.pbc-du .cw .cw-x .cw-svg,
.pbc-du .cw .cw-share .cw-svg { width: 20px; height: 20px; }
.pbc-du .cw .cw-prog { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pbc-du .cw .cw-prog .cw-stepno {
  min-height: 18px;
  margin: 0;
  color: hsl(var(--pbc-blue));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
  line-height: 1.2;
  text-align: center;
}
.pbc-du .cw .cw-bar {
  display: flex;
  gap: 5px;
  flex: 0 0 auto;
  height: 7px;
  border-radius: 0;
  background: none;
  overflow: visible;
}
.pbc-du .cw .cw-bar > i { display: none; }
.pbc-du .cw .cw-bar > span {
  flex: 1;
  height: 7px;
  border-radius: 4px;
  background: hsl(var(--pbc-line-soft));
  transition: background .2s ease;
}
.pbc-du .cw .cw-bar > span.on { background: hsl(var(--pbc-blue)); }

/* La pregunta, grande y sin burbuja ni mascota (como la maqueta). */
.pbc-du .cw .cw-body { padding: 10px 18px 8px; }
.pbc-du .cw .cw-ask { display: block; margin: 6px 0 18px; }
.pbc-du .cw .cw-mascot { display: none; }
.pbc-du .cw .cw-bubble {
  padding: 0;
  border-radius: 0;
  background: none;
  color: hsl(var(--pbc-ink));
  font-size: var(--pbc-size-title-l);
  font-weight: var(--pbc-weight-bold);
  line-height: 1.15;
  letter-spacing: -.6px;
}
.pbc-du .cw .cw-bubble:after { display: none; }
@media (max-width: 359.98px) { .pbc-du .cw .cw-bubble { font-size: var(--pbc-size-title-m); } }
.pbc-du .cw .cw-sub {
  margin: -6px 0 12px;
  color: hsl(var(--pbc-muted));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
  letter-spacing: 0;
  text-transform: none;
}

/* Opciones (nivel, hora, tipo…): fichas gordas que se pulsan, con su cuadrito
   de icono a la izquierda y el círculo de "elegida" a la derecha. */
.pbc-du .cw .cw-opts,
.pbc-du .cw .cw-cards { gap: 14px; }
.pbc-du .cw .cw-cards { flex-direction: column; }
.pbc-du .cw .cw-opt,
.pbc-du .cw .cw-card {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  border: 2px solid hsl(var(--pbc-line));
  border-radius: 18px;
  background: hsl(var(--pbc-surface));
  color: hsl(var(--pbc-ink));
  box-shadow: 0 4px 0 hsl(var(--pbc-line));
  text-align: left;
  transition: transform .08s ease, box-shadow .08s ease;
  -webkit-tap-highlight-color: transparent;
}
.pbc-du .cw .cw-opt {
  gap: 14px;
  min-height: 72px;
  padding: 12px 56px 12px 14px;
  font-size: var(--pbc-size-body);
  font-weight: var(--pbc-weight-bold);
  line-height: 1.25;
}
.pbc-du .cw .cw-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  align-content: center;
  align-items: center;
  column-gap: 14px;
  min-height: 84px;
  padding: 14px 56px 14px 14px;
}
.pbc-du .cw .cw-opt:active,
.pbc-du .cw .cw-card:active { transform: translateY(3px); box-shadow: 0 1px 0 hsl(var(--pbc-line)); }
.pbc-du .cw .cw-opt.sel,
.pbc-du .cw .cw-card.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-opt.sel:active,
.pbc-du .cw .cw-card.sel:active { box-shadow: 0 1px 0 hsl(var(--pbc-blue)); }
/* El cuadrito del icono */
.pbc-du .cw .cw-opt .cw-ico,
.pbc-du .cw .cw-card .cw-big {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: var(--pbc-radius-field);
  background: hsl(var(--pbc-blue-soft));
  color: hsl(var(--pbc-blue));
  font-size: var(--pbc-size-title-m);
  line-height: 1;
}
.pbc-du .cw .cw-opt.sel .cw-ico,
.pbc-du .cw .cw-card.sel .cw-big { background: hsl(var(--pbc-blue)); color: hsl(var(--pbc-on-color)); }
.pbc-du .cw .cw-card .cw-big { grid-column: 1; grid-row: 1 / span 3; }
.pbc-du .cw .cw-card .cw-big .cw-svg { width: 26px; height: 26px; }
.pbc-du .cw .cw-card b {
  grid-column: 2;
  margin: 0;
  color: hsl(var(--pbc-ink));
  font-size: var(--pbc-size-title-s);
  font-weight: var(--pbc-weight-bold);
  line-height: 1.2;
}
.pbc-du .cw .cw-card span {
  grid-column: 2;
  margin: 2px 0 0;
  color: hsl(var(--pbc-muted));
  font-size: var(--pbc-size-label);
  line-height: 1.3;
}
.pbc-du .cw .cw-card.sel span { color: hsl(var(--pbc-ink-soft)); }
.pbc-du .cw .cw-card .cw-cost {
  margin-top: 4px;
  color: hsl(var(--pbc-blue-dark));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .cw .cw-opt .cw-tag {
  color: hsl(var(--pbc-muted));
  font-size: var(--pbc-size-small);
  font-weight: var(--pbc-weight-bold);
}
/* Con detalle (tipo de clase al pedir una): el detalle va DEBAJO del nombre,
   no apretado a la derecha. */
.pbc-du .cw .cw-opt:has(> .cw-tag) {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-content: center;
  align-items: center;
  column-gap: 14px;
  row-gap: 2px;
}
.pbc-du .cw .cw-opt:has(> .cw-tag) > .cw-ico { grid-column: 1; grid-row: 1 / span 2; }
.pbc-du .cw .cw-opt:has(> .cw-tag) > .cw-tag {
  grid-column: 2;
  margin: 0;
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-regular);
  line-height: 1.3;
  text-align: left;
}
/* El círculo de "elegida" (vacío; azul con la marca al elegir). */
.pbc-du .cw .cw-opt::after,
.pbc-du .cw .cw-card::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 16px;
  box-sizing: border-box;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  border: 2px solid hsl(var(--pbc-line));
  border-radius: 50%;
  background: hsl(var(--pbc-surface));
}
.pbc-du .cw .cw-opt.sel::after,
.pbc-du .cw .cw-card.sel::after { border-color: hsl(var(--pbc-blue)); background: hsl(var(--pbc-blue)); }
.pbc-du .cw .cw-opt.sel::before,
.pbc-du .cw .cw-card.sel::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 25px;
  width: 6px;
  height: 11px;
  margin-top: -8px;
  border: solid hsl(var(--pbc-on-color));
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

/* Clase larga (75 min): un interruptor a la derecha, como la maqueta. */
.pbc-du .cw .cw-toggle {
  position: relative;
  min-height: 70px;
  margin-top: 14px;
  padding: 12px 86px 12px 16px;
  border: 1px solid hsl(var(--pbc-line-soft));
  border-radius: 16px;
  background: hsl(var(--pbc-surface));
  color: hsl(var(--pbc-ink));
  font-size: var(--pbc-size-body);
  font-weight: var(--pbc-weight-bold);
  line-height: 1.25;
}
.pbc-du .cw .cw-toggle .cw-ico { display: none; }
.pbc-du .cw .cw-toggle small {
  margin-top: 3px;
  color: hsl(var(--pbc-muted));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-regular);
}
.pbc-du .cw .cw-toggle::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 16px;
  width: 52px;
  height: 30px;
  margin-top: -15px;
  border-radius: 999px;
  background: hsl(var(--pbc-line));
  transition: background .15s ease;
}
.pbc-du .cw .cw-toggle::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 41px;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  border-radius: 50%;
  background: hsl(var(--pbc-surface));
  box-shadow: 0 1px 3px hsl(var(--pbc-ink) / .25);
  transition: transform .15s ease;
}
.pbc-du .cw .cw-toggle.sel { border-color: hsl(var(--pbc-blue) / .35); background: hsl(var(--pbc-blue-soft)); }
.pbc-du .cw .cw-toggle.sel::after { background: hsl(var(--pbc-blue)); }
.pbc-du .cw .cw-toggle.sel::before { transform: translateX(22px); }

/* Campos (metas, foco del tema) y el desplegable que abre la hoja de abajo. */
.pbc-du .cw .cw-input,
.pbc-du .cw .cw-textarea {
  border: 2px solid hsl(var(--pbc-line));
  border-radius: var(--pbc-radius-field);
  padding: 13px 14px;
  background: hsl(var(--pbc-surface));
  color: hsl(var(--pbc-ink));
  font-size: var(--pbc-size-body);
  font-weight: var(--pbc-weight-regular);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pbc-du .cw .cw-input::placeholder,
.pbc-du .cw .cw-textarea::placeholder { color: hsl(var(--pbc-muted)); font-weight: var(--pbc-weight-regular); }
.pbc-du .cw .cw-input:focus,
.pbc-du .cw .cw-textarea:focus {
  outline: none;
  border-color: hsl(var(--pbc-blue));
  box-shadow: 0 0 0 4px hsl(var(--pbc-blue-soft));
}
.pbc-du .cw .cw-lbl {
  margin: 18px 0 6px;
  color: hsl(var(--pbc-ink));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
  letter-spacing: 0;
  text-transform: none;
}
.pbc-du .cw .cw-select {
  position: relative;
  min-height: 62px;
  padding: 10px 48px 10px 14px;
  border: 2px solid hsl(var(--pbc-line));
  border-radius: var(--pbc-radius-field);
  background: hsl(var(--pbc-surface));
}
.pbc-du .cw .cw-select:focus-visible {
  outline: none;
  border-color: hsl(var(--pbc-blue));
  box-shadow: 0 0 0 4px hsl(var(--pbc-blue-soft));
}
.pbc-du .cw .cw-select small {
  margin-bottom: 2px;
  color: hsl(var(--pbc-muted));
  font-size: var(--pbc-size-small);
  font-weight: var(--pbc-weight-bold);
  letter-spacing: 0;
  text-transform: none;
}
.pbc-du .cw .cw-select b { color: hsl(var(--pbc-ink)); font-size: var(--pbc-size-body); font-weight: var(--pbc-weight-bold); }
.pbc-du .cw .cw-select.unset b { color: hsl(var(--pbc-muted)); font-style: normal; font-weight: var(--pbc-weight-regular); }
.pbc-du .cw .cw-select .cw-chev {
  position: absolute;
  top: 50%;
  right: 14px;
  float: none;
  margin: -10px 0 0;
  color: hsl(var(--pbc-muted));
}
.pbc-du .cw .cw-select .cw-chev .cw-svg { width: 20px; height: 20px; }
.pbc-du .cw .cw-select.cw-need { border-color: hsl(var(--pbc-gold-dark)); background: hsl(var(--pbc-gold-soft)); }

/* La hoja de abajo para elegir de una lista (tema, subtema). */
.pbc-du .cw-picker { background: hsl(var(--pbc-ink) / .4); }
.pbc-du .cw-picker__sheet { padding: 8px 0 16px; border-radius: var(--pbc-radius-card) var(--pbc-radius-card) 0 0; font-family: var(--pbc-font); }
.pbc-du .cw-picker__title {
  padding: 14px 20px 6px;
  color: hsl(var(--pbc-ink-soft));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
  letter-spacing: 0;
  text-transform: none;
}
.pbc-du .cw-picker__opt {
  min-height: 52px;
  padding: 14px 20px;
  color: hsl(var(--pbc-ink));
  font-family: inherit;
  font-size: var(--pbc-size-body);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .cw-picker__opt:hover { background: hsl(var(--pbc-page)); }
.pbc-du .cw-picker__opt.sel { background: hsl(var(--pbc-blue-soft)); color: hsl(var(--pbc-blue-dark)); }

/* Ruleta de la hora (pedir una clase) */
.pbc-du .cw .cw-band { background: hsl(var(--pbc-blue-soft)); }
.pbc-du .cw .cw-tick { color: hsl(var(--pbc-subtle)); font-size: var(--pbc-size-title-s); font-weight: var(--pbc-weight-bold); }
.pbc-du .cw .cw-tick.mid { color: hsl(var(--pbc-ink)); font-size: var(--pbc-size-title-m); }

/* Repaso ("el ticket") y ticket de una clase ya montada */
.pbc-du .cw .cw-sum,
.pbc-du .cw .cw-people {
  border: 1px solid hsl(var(--pbc-line-soft));
  border-radius: var(--pbc-radius-card);
  box-shadow: 0 4px 14px hsl(var(--pbc-shadow) / .06);
}
.pbc-du .cw .cw-row { gap: 12px; padding: 12px 14px; border-bottom-color: hsl(var(--pbc-line-soft)); }
.pbc-du .cw .cw-row .cw-ri {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: hsl(var(--pbc-blue-soft));
  color: hsl(var(--pbc-blue));
  font-size: var(--pbc-size-title-s);
}
.pbc-du .cw .cw-row .cw-ri .cw-svg { width: 20px; height: 20px; }
.pbc-du .cw .cw-row .cw-ri--ava { width: auto; height: auto; border-radius: 0; background: none; }
.pbc-du .cw .cw-row .cw-rl {
  color: hsl(var(--pbc-muted));
  font-size: var(--pbc-size-small);
  font-weight: var(--pbc-weight-bold);
  text-transform: none;
}
.pbc-du .cw .cw-row .cw-rv { color: hsl(var(--pbc-ink)); font-size: var(--pbc-size-body); font-weight: var(--pbc-weight-bold); }
.pbc-du .cw .cw-row .cw-edit {
  padding: 10px 0 10px 10px;
  color: hsl(var(--pbc-blue-dark));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .cw .cw-person {
  padding: 12px 14px;
  border-bottom-color: hsl(var(--pbc-line-soft));
  color: hsl(var(--pbc-ink));
  font-size: var(--pbc-size-body);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .cw .cw-person .cw-dot { background: hsl(var(--pbc-green)); }
.pbc-du .cw .cw-person--empty { color: hsl(var(--pbc-muted)); font-style: normal; font-weight: var(--pbc-weight-regular); }
.pbc-du .cw .cw-ava { background: hsl(var(--pbc-blue-soft)); color: hsl(var(--pbc-blue)); font-weight: var(--pbc-weight-bold); }
.pbc-du .cw .cw-desc {
  padding: 12px 14px;
  border: 1px solid hsl(var(--pbc-line-soft));
  border-radius: 16px;
  background: hsl(var(--pbc-page));
  color: hsl(var(--pbc-ink-soft));
  font-size: var(--pbc-size-label);
  line-height: 1.5;
}
.pbc-du .cw .cw-desc strong { color: hsl(var(--pbc-ink)); }
.pbc-du .cw .cw-more { border: 1px solid hsl(var(--pbc-line-soft)); border-radius: 16px; }
.pbc-du .cw .cw-more__sum {
  padding: 14px 16px;
  background: hsl(var(--pbc-page));
  color: hsl(var(--pbc-blue-dark));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
}
/* La flecha del desplegable, de línea en vez del triángulo de texto. */
.pbc-du .cw .cw-more__sum::after {
  content: '';
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pbc-du .cw .cw-more__title { font-size: var(--pbc-size-body); font-weight: var(--pbc-weight-bold); }
.pbc-du .cw .cw-more--open {
  border: 2px solid hsl(var(--pbc-blue) / .35);
  border-left: 5px solid hsl(var(--pbc-blue));
  background: hsl(var(--pbc-blue-soft));
}
.pbc-du .cw .cw-topic-hero {
  padding: 14px 16px;
  border: 2px solid hsl(var(--pbc-blue));
  border-radius: 18px;
  background: hsl(var(--pbc-blue-soft));
}
.pbc-du .cw .cw-topic-hero__lbl {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  color: hsl(var(--pbc-blue-dark));
  font-size: var(--pbc-size-small);
  font-weight: var(--pbc-weight-bold);
  letter-spacing: 0;
  text-transform: none;
}
.pbc-du .cw .cw-topic-hero__lbl .cw-svg { width: 18px; height: 18px; }
.pbc-du .cw .cw-topic-hero__main { font-size: var(--pbc-size-title-s); font-weight: var(--pbc-weight-bold); }
.pbc-du .cw .cw-topic-hero__sub { color: hsl(var(--pbc-ink-soft)); font-size: var(--pbc-size-label); font-weight: var(--pbc-weight-regular); }

/* Abajo: el error y el botón que se hunde. El último paso (reservar con tus
   clases o pagar) sigue en amarillo; "Entrar a la llamada", en verde. */
.pbc-du .cw .cw-foot { padding: 12px 18px 18px; border-top-color: hsl(var(--pbc-line-soft)); background: hsl(var(--pbc-surface)); }
.pbc-du .cw .cw-err {
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid hsl(var(--pbc-red) / .3);
  border-radius: var(--pbc-radius-field);
  background: hsl(var(--pbc-red-soft));
  color: hsl(var(--pbc-red-dark));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .cw .cw-cta { padding: 12px 18px; }
.pbc-du .cw .cw-cta.cw-yellow {
  --k-bg: hsl(var(--pbc-gold));
  --k-ink: hsl(var(--pbc-ink));
  --k-edge: hsl(var(--pbc-gold-dark));
  --k-line: hsl(var(--pbc-gold));
}
.pbc-du .cw a.cw-cta.cw-act {
  --k-bg: hsl(var(--pbc-green));
  --k-ink: hsl(var(--pbc-on-color));
  --k-edge: hsl(var(--pbc-green-dark));
  --k-line: hsl(var(--pbc-green));
}
.pbc-du .cw .cw-act--danger {
  --k-bg: hsl(var(--pbc-surface));
  --k-ink: hsl(var(--pbc-red-dark));
  --k-edge: hsl(var(--pbc-red) / .3);
  --k-line: hsl(var(--pbc-red) / .3);
  --k-drop: 3px;
}
.pbc-du .cw .cw-acts { gap: 12px; }
.pbc-du .cw .cw-stepno { color: hsl(var(--pbc-blue)); font-size: var(--pbc-size-label); font-weight: var(--pbc-weight-bold); }
.pbc-du .cw .cw-spinner { border-color: hsl(var(--pbc-line-soft)); border-top-color: hsl(var(--pbc-blue)); }

/* Blindaje: en el móvil global-responsive.css estira todos los botones y
   class-wizard.css pone 34 px a los de arriba con !important. */
@media (max-width: 575.98px) {
  .pbc-du .cw .cw-back,
  .pbc-du .cw .cw-x,
  .pbc-du .cw .cw-share { width: 44px !important; }
}