/* Pantalla PLANES móvil (maqueta aprobada por Guille el 14/08/2026).
   CSS tal cual lo entregó ChatGPT: todas las clases con prefijo pbc-planes-
   para que no choque con el CSS global. Solo se carga con el flag MCLASES. */
* { box-sizing: border-box; }

:root {
  /* Turquesa de marca PBC (el que usa el resto de la web) para los BOTONES. */
  --pbc-brand: #02A9CA;
  --pbc-brand-dark: #0288A9;
  --pbc-planes-yellow: #cfe3f5;
  --pbc-planes-ink: #15263b;
  --pbc-planes-muted: #66758a;
  --pbc-planes-bg: #eef4f9;
  --pbc-planes-green: #0f7a5a;
  --pbc-planes-white: #ffffff;
}

body {
  margin: 0;
  min-height: 100vh;
  background: #dce6ef;
  color: var(--pbc-planes-ink);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; }

.pbc-planes-phone {
  width: 100%;
  max-width: 390px;
  min-height: 100vh;
  margin: 0 auto;
  overflow: hidden;
  background: var(--pbc-planes-bg);
  box-shadow: 0 0 42px rgba(21, 38, 59, .16);
}

/* La CABECERA la pinta includes/mobile_topbar.html con su propia hoja
   (mobile-topbar.css): es la misma de toda la app (Guille, 14/08/2026). Aquí se
   han borrado .pbc-planes-topbar, -back, -help, -logo* y -heading, que eran una
   copia con otro logo, otros botones y otro azul.

   El <header> se queda solo como marco de la mascota: sin fondo ni curva
   propios, para no pintar dos cabeceras una encima de otra. */
.pbc-planes-header {
  position: relative;
  overflow: hidden;
}

.pbc-planes-check svg,
.pbc-planes-shield svg { display: block; }

.pbc-planes-mascot {
  position: absolute;
  z-index: 1;
  right: -20px;
  bottom: -44px;
  width: 145px;
  height: 173px;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 10px 12px rgba(4, 51, 121, .24));
  pointer-events: none;
}

.pbc-planes-main {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 22px;
  padding: 22px 16px 42px;
}

.pbc-planes-card {
  position: relative;
  padding: 24px 21px 21px;
  background: var(--pbc-planes-white);
  border: 2px solid transparent;
  border-radius: 25px;
  box-shadow: 0 9px 24px rgba(39, 68, 102, .10);
}

.pbc-planes-card--recommended {
  margin-top: 7px;
  padding-top: 29px;
  border-color: var(--pbc-brand);
  box-shadow: 0 13px 30px rgba(2, 169, 202, .18);
}

.pbc-planes-card--current {
  border-color: #9bdac9;
  background: #fbfffd;
}

.pbc-planes-ribbon {
  position: absolute;
  top: -15px;
  left: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 31px;
  padding: 6px 17px;
  color: var(--pbc-planes-white);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .7px;
  text-transform: uppercase;
  background: var(--pbc-brand);
  border: 3px solid var(--pbc-planes-bg);
  border-radius: 999px;
  transform: translateX(-50%);
  white-space: nowrap;
}

.pbc-planes-current-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 13px;
  padding: 7px 11px;
  color: var(--pbc-planes-green);
  font-size: 12px;
  font-weight: 900;
  background: #dff7ef;
  border-radius: 999px;
}

.pbc-planes-current-dot {
  width: 8px;
  height: 8px;
  background: var(--pbc-planes-green);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(15, 122, 90, .12);
}

.pbc-planes-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
}

.pbc-planes-card-title {
  margin: 0;
  font-size: 23px;
  line-height: 1.1;
  letter-spacing: -.6px;
}

.pbc-planes-classes {
  margin: 7px 0 0;
  color: var(--pbc-planes-muted);
  font-size: 14px;
  font-weight: 700;
}

.pbc-planes-price {
  flex: 0 0 auto;
  text-align: right;
  color: var(--pbc-brand-dark);
}

.pbc-planes-price-number {
  display: block;
  font-size: 31px;
  font-weight: 900;
  line-height: .95;
  letter-spacing: -1.2px;
}

.pbc-planes-price-period {
  display: block;
  margin-top: 5px;
  color: var(--pbc-planes-muted);
  font-size: 12px;
  font-weight: 700;
}

.pbc-planes-divider {
  height: 1px;
  margin: 20px 0 17px;
  background: #e4ebf2;
}

.pbc-planes-benefits {
  display: grid;
  gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pbc-planes-benefit {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.pbc-planes-check {
  display: grid;
  width: 28px;
  height: 28px;
  color: var(--pbc-brand);
  background: #e3f6fa;
  border-radius: 10px;
  place-items: center;
}

.pbc-planes-card--current .pbc-planes-check {
  color: var(--pbc-planes-green);
  background: #e4f7f0;
}

.pbc-planes-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 55px;
  margin-top: 21px;
  padding: 13px 18px;
  color: var(--pbc-planes-white);
  font-size: 16px;
  font-weight: 900;
  text-decoration: none;
  /* Turquesa de marca PBC y píldora entera, igual que el botón de Clases
     (Guille, 14/08/2026). El reborde macizo dejaba el bajo en recto. */
  background: var(--pbc-brand);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(2, 169, 202, 0.32);
  cursor: pointer;
}

.pbc-planes-button:active {
  background: var(--pbc-brand-dark);
  box-shadow: 0 3px 9px rgba(2, 169, 202, 0.3);
}

.pbc-planes-button--current {
  color: var(--pbc-planes-green);
  background: #e5f5ef;
  border: 2px solid #a8ddcd;
  box-shadow: none;
  cursor: default;
}

.pbc-planes-button--current:active { transform: none; }

/* ── Los botones de verdad (Guille, 16/08/2026) ─────────────────────────────
   Bajar de plan NO se pinta como el resto: es un botón sereno, sin el turquesa
   ni la sombra, para que la vista siga cayendo en subir. Y "deshacer la
   bajada" va en verde, porque es el que devuelve las cosas a su sitio. */
.pbc-planes-button--soft {
  color: var(--pbc-brand);
  background: #eef8fb;
  border: 2px solid #bfe6ef;
  box-shadow: none;
  font-weight: 800;
}

.pbc-planes-button--soft:active { background: #ddf0f6; }

.pbc-planes-button--keep {
  color: #0f7355;
  background: #e5f5ef;
  border: 2px solid #a8ddcd;
  box-shadow: none;
}

.pbc-planes-button--keep:active { background: #d6efe5; }

.pbc-planes-button[disabled] { opacity: .65; cursor: default; }

/* La letra pequeña de cada botón: cuándo se cobra y cuándo entra. Es lo que
   hace que subir y bajar de plan dejen de dar miedo. */
.pbc-planes-small {
  margin: 9px 2px 0;
  color: #6b7d8c;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}

/* El cambio que ya tiene pedido, dicho en SU tarjeta: nadie debería tener que
   adivinar por qué su plan va a cambiar solo el mes que viene. */
.pbc-planes-pending {
  margin: 14px 0 0;
  padding: 9px 12px;
  color: #0f3d5c;
  background: #eaf4fd;
  border: 1px solid #cfe3f5;
  border-radius: 12px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.4;
}

.pbc-planes-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: -2px 3px 0;
  color: var(--pbc-planes-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.pbc-planes-shield {
  display: grid;
  flex: 0 0 auto;
  width: 27px;
  height: 27px;
  color: var(--pbc-brand);
  background: #e3f6fa;
  border-radius: 9px;
  place-items: center;
}

@media (max-width: 350px) {
  .pbc-planes-card { padding-right: 17px; padding-left: 17px; }
  .pbc-planes-card-title { font-size: 21px; }
  .pbc-planes-price-number { font-size: 28px; }
}

/* Botón al calendario bajo el carrusel de profes (visitantes, 25/09/2026). */
.pbc-planes-seeclasses { margin: 12px 0 18px; }

/* PLANES EN DESPLEGABLE para visitantes (Guille, 26/09/2026): el mismo
   "Class plans" turquesa de Clases, cerrado al entrar. Solo sale con
   mplanes_new_order (cursos encendidos o ?as=guest del staff). */
.pbc-planes-fold{border:1px solid var(--pbc-brand);border-radius:20px;background:hsl(var(--pbc-surface));box-shadow:0 12px 26px rgba(2,169,202,.22);overflow:hidden}
.pbc-planes-fold>summary{display:flex;align-items:center;gap:12px;min-height:70px;padding:0 16px;cursor:pointer;list-style:none;font-weight:900;background:linear-gradient(135deg,var(--pbc-brand) 0%,var(--pbc-brand-dark) 100%);color:hsl(var(--pbc-on-color))}
.pbc-planes-fold>summary::-webkit-details-marker{display:none}
.pbc-planes-fold>summary:focus-visible{outline:2px solid hsl(var(--pbc-on-color));outline-offset:-4px}
.pbc-planes-foldicon{width:36px;height:36px;flex:none;display:grid;place-items:center;border-radius:12px;background:rgba(255,255,255,.22)}
.pbc-planes-foldicon svg{width:21px;height:21px}
.pbc-planes-foldlabel{flex:1;font-size:17px;letter-spacing:-.3px}
.pbc-planes-foldlabel small{display:block;margin-top:2px;font-size:12px;font-weight:700;color:rgba(255,255,255,.86);letter-spacing:0}
.pbc-planes-foldchev{width:20px;height:20px;flex:none;transition:transform .2s ease}
.pbc-planes-fold[open]>summary .pbc-planes-foldchev{transform:rotate(180deg)}
.pbc-planes-foldbody{display:flex;flex-direction:column;gap:16px;padding:16px 12px}
@media (prefers-reduced-motion:reduce){.pbc-planes-foldchev{transition:none}}

/* CRÉDITO SUELTO con cantidad (Guille, 26/09/2026: "que pueda elegir cuántos").
   Mismos botones -/+ que en Clases. 20px de letra: por debajo de 16px el
   iPhone hace zoom solo al tocar la caja. */
.pbc-planes-topupqty{display:flex;align-items:center;justify-content:center;gap:16px;margin:4px 0 12px}
.pbc-planes-qtybtn{width:40px;height:40px;flex:none;border:1.5px solid hsl(var(--pbc-line));border-radius:999px;background:hsl(var(--pbc-surface));color:var(--pbc-brand-dark);font-size:22px;font-weight:900;line-height:1;cursor:pointer}
.pbc-planes-qtybtn:disabled{opacity:.35;cursor:default}
.pbc-planes-qtynum{width:66px;min-width:66px;padding:6px 0;border:1.5px solid hsl(var(--pbc-line));border-radius:12px;background:hsl(var(--pbc-surface));color:inherit;text-align:center;font-family:inherit;font-size:20px;font-weight:900;-moz-appearance:textfield}
.pbc-planes-qtynum::-webkit-outer-spin-button,
.pbc-planes-qtynum::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}