/* ══════════════════════════════════════════════════════════════════════════
   FASE 4 · MAQUETA P10 «CLASES» (Guille, 09/11/2026)

   La pestaña Clases del móvil para quien aún no paga
   (templates/includes/mclases_p10.html). Las piezas comunes vienen del kit
   (pbc-kit.css: tarjeta, botón que se hunde, etiqueta de tipo, píldoras) y no
   se tocan; aquí solo va lo propio de esta pantalla.

   Mismas reglas que el kit (lo vigila mainmodule/tests/test_fase4_clases.py):
   · todo dentro de `.pbc-du` (sin el diseño único no existe nada de esto);
   · ni un color escrito a mano: todo sale de pbc-design-tokens.css;
   · una letra (PBC Sans), su escala (13, 15, 17, 20, 24, 30) y dos pesos;
   · fotos siempre enteras (ancho fijo, alto natural) y sin bandas negras;
   · zonas que se tocan de 44 px como poco.
   ══════════════════════════════════════════════════════════════════════════ */

.pbc-du .pbc-p10 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  font-family: var(--pbc-font);
}
.pbc-du .pbc-p10 > .pbc-mclases-sectiontitle { margin: 8px 4px -6px; }
.pbc-du .pbc-p10 a:focus-visible,
.pbc-du .pbc-p10 button:focus-visible {
  outline: 3px solid hsl(var(--pbc-blue) / .45);
  outline-offset: 2px;
}

/* ── 1 · SU CLASE (arriba) ─────────────────────────────────────────────── */
.pbc-du .pbc-p10-hero {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pbc-du .pbc-p10-hero > * { margin: 0; }
.pbc-du .pbc-p10-kick {
  margin: 0;
  color: hsl(var(--pbc-muted));
  font-size: var(--pbc-size-small);
  font-weight: var(--pbc-weight-bold);
  line-height: 1.3;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.pbc-du .pbc-p10-title {
  margin: 0;
  color: hsl(var(--pbc-ink));
  font-size: var(--pbc-size-title-m);
  font-weight: var(--pbc-weight-bold);
  line-height: 1.2;
  letter-spacing: -.4px;
}
.pbc-du .pbc-p10-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* La próxima hora para ti: caja suave dentro de la tarjeta. */
.pbc-du .pbc-p10-slot {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: var(--pbc-radius-field);
  background: hsl(var(--pbc-page));
}
.pbc-du .pbc-p10-slot > p { margin: 0; }
.pbc-du .pbc-p10-slothead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.pbc-du .pbc-p10-kick--soft {
  color: hsl(var(--pbc-ink-soft));
  font-size: var(--pbc-size-label);
  letter-spacing: 0;
  text-transform: none;
}
.pbc-du .pbc-p10-other {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: -10px 0;
  color: hsl(var(--pbc-blue-dark));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.pbc-du .pbc-p10-slotlang {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  color: hsl(var(--pbc-ink));
  font-size: var(--pbc-size-body);
  line-height: 1.3;
}
.pbc-du .pbc-p10-flag {
  flex: 0 0 auto;
  font-size: var(--pbc-size-title-s);
  border-radius: 3px;
}
.pbc-du .pbc-p10 b { font-weight: var(--pbc-weight-bold); }
.pbc-du .pbc-p10-when {
  color: hsl(var(--pbc-ink));
  font-size: var(--pbc-size-body);
  line-height: 1.35;
}
.pbc-du .pbc-p10-when span,
.pbc-du .pbc-p10-with,
.pbc-du .pbc-p10-alone {
  color: hsl(var(--pbc-ink-soft));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-regular);
  line-height: 1.4;
}
.pbc-du .pbc-p10-seats {
  margin-top: 4px;
  color: hsl(var(--pbc-ink));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
  line-height: 1.4;
}
.pbc-du .pbc-p10-pay { margin: 0; }
.pbc-du .pbc-p10-rules {
  color: hsl(var(--pbc-ink-soft));
  font-size: var(--pbc-size-label);
  line-height: 1.45;
  text-align: center;
}
.pbc-du .pbc-p10-hero .pbc-k-shield { margin-top: 0; }

/* ── 2 · VÍDEO DE LA COMUNIDAD ────────────────────────────────────────── */
.pbc-du .pbc-p10-video {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pbc-du .pbc-p10-video > p { margin: 0; }
/* El hueco se adapta al vídeo (entero, sin bandas): ancho hasta el de la
   tarjeta y alto natural, con un tope para los grabados en vertical. */
.pbc-du .pbc-p10-frame {
  position: relative;
  display: flex;
  justify-content: center;
}
.pbc-du .pbc-p10-vid {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 440px;
  border-radius: var(--pbc-radius-field);
}
.pbc-du .pbc-p10-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: hsl(var(--pbc-surface) / .94);
  box-shadow: 0 4px 14px hsl(var(--pbc-shadow) / .25);
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.pbc-du .pbc-p10-play svg {
  width: 28px;
  height: 28px;
  margin-left: 4px;
  fill: hsl(var(--pbc-blue));
}
.pbc-du .pbc-p10-play[hidden] { display: none; }
.pbc-du .pbc-p10-by {
  color: hsl(var(--pbc-ink-soft));
  font-size: var(--pbc-size-label);
  line-height: 1.4;
}
.pbc-du .pbc-p10-by b { color: hsl(var(--pbc-ink)); }

/* ── 3 · LAS PROFES (rejilla 2 x 2, foto entera) ──────────────────────── */
.pbc-du .pbc-p10-teachers {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.pbc-du .pbc-p10-teachers > .pbc-mclases-sectiontitle { margin: 8px 4px 0; }
.pbc-du .pbc-p10-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 12px;
}
.pbc-du .pbc-p10-teacher {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
}
.pbc-du .pbc-p10-teacher > p { margin: 0; }
.pbc-du .pbc-p10-face {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--pbc-radius-field);
  background: hsl(var(--pbc-page));
  overflow: hidden;
  cursor: pointer;
}
.pbc-du .pbc-p10-face img {
  display: block;
  width: 100%;
  height: auto;
}
.pbc-du .pbc-p10-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  background: hsl(var(--pbc-blue-soft));
  color: hsl(var(--pbc-blue-dark));
  font-size: var(--pbc-size-title-l);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .pbc-p10-tname {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: hsl(var(--pbc-ink));
  font-size: var(--pbc-size-body);
  line-height: 1.25;
}
.pbc-du .pbc-p10-tname .pbc-p10-flag { font-size: var(--pbc-size-label); }
.pbc-du .pbc-p10-rating {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 4px;
  min-height: 44px;
  margin: -8px 0 -6px;
  padding: 0;
  border: 0;
  background: none;
  color: hsl(var(--pbc-blue-dark));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-regular);
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}
.pbc-du .pbc-p10-star {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: hsl(var(--pbc-gold-dark));
}

/* ── 4 · CURSOS Y PLANES (plegados abajo) ─────────────────────────────── */
.pbc-du .pbc-p10-links {
  display: flex;
  flex-direction: column;
  padding: 2px 18px;
}
.pbc-du .pbc-p10-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  color: hsl(var(--pbc-ink));
  font-size: var(--pbc-size-body);
  font-weight: var(--pbc-weight-bold);
  text-decoration: none;
}
.pbc-du .pbc-p10-row + .pbc-p10-row { border-top: 1px solid hsl(var(--pbc-line-soft)); }
.pbc-du .pbc-p10-row .pbc-k-ico { color: hsl(var(--pbc-muted)); }