/* =============================================================
   La tablet de pasar lista del estudio (/class)
   =============================================================
   Se usa de pie, con la clase saliendo de la sala y las manos ocupadas. Todo
   es grande, se toca con el pulgar y no hay ningún menú del que salirse sin
   querer. Hoja aparte porque no comparte nada con el resto de la web. */

.pase-raiz {
  min-height: 100dvh;
  background: #0d0a07;
  color: #f4ead5;
}

.pase {
  box-sizing: border-box;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 22px 18px 34px;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  /* En el medio, también en el teléfono: estaba pegado arriba con un tercio
     de pantalla vacío debajo. */
  justify-content: center;
}
/* `safe` para que, cuando el contenido no quepa, se pegue arriba en vez de
   cortarse por arriba —que es lo que hace `center` a secas y deja el logo
   fuera de la pantalla sin poder desplazarse hasta él. */
@supports (justify-content: safe center) {
  .pase { justify-content: safe center; }
}

/* El logotipo, arriba y centrado. Antes ponía "GLOW" en letras pequeñas a la
   izquierda, que en una tablet colgada en la pared no se lee ni se reconoce. */
.pase-logo {
  display: block;
  width: 118px;
  margin: 0 auto 22px;
  flex: 0 0 auto;
}
.pase-logo img { display: block; width: 100%; height: auto; }

/* ES / EN propio, abajo y discreto: la tablet abre en inglés y esto es para
   la coach que prefiera español. No toca el idioma del resto de la web. */
.pase-idioma {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 20px;
  padding-top: 4px;
  flex: 0 0 auto;
}
.pase-idioma button {
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: none;
  color: rgba(244, 234, 213, 0.4);
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.12em;
  cursor: pointer;
}
.pase-idioma button.es-activo {
  border-color: rgba(177, 147, 101, 0.4);
  color: #b19365;
}

.pase-cab {
  margin-bottom: 22px;
  /* Centrado desde el teléfono. El logo, los puntos, el teclado y el ES/EN ya
     iban al centro; solo el titular y el texto se quedaban a la izquierda, y
     eso es exactamente lo que se ve torcido. */
  text-align: center;
}

/* El "volver" a la izquierda y en su propia línea: es un control, no parte del
   título. Con `float` NO —un flotante saca el botón del flujo y el texto
   centrado se centra en el hueco que queda a su derecha, así que el nombre de
   la coach salía corrido. */
.pase-cab .pase-volver { display: block; width: fit-content; margin: 0 auto 14px 0; }
.pase-cab h1 { margin: 0 0 5px; font-size: 27px; line-height: 1.18; }
.pase-cab p { margin: 0; font-size: 14.5px; line-height: 1.5; color: rgba(244, 234, 213, 0.6); }

/**
 * "¿No eres tú?", junto al saludo.
 *
 * La tablet es compartida y la sesión dura tres horas: la que llega se
 * encuentra el nombre de la anterior arriba. Cerrar esa sesión tenía el botón
 * al final de la lista, debajo de treinta clases que no son suyas. Aquí está
 * donde se lee el nombre, que es donde se nota el error.
 *
 * Discreto a propósito: no compite con el saludo ni con las clases, y quien
 * lo necesita ya está mirando justo ahí.
 */
.pase-nosoyyo {
  margin-top: 9px;
  padding: 6px 13px;
  border: 1px solid rgba(244, 234, 213, 0.26);
  border-radius: 999px;
  background: none;
  color: rgba(244, 234, 213, 0.72);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
}
.pase-nosoyyo:hover { border-color: rgba(244, 234, 213, 0.5); color: #f4ead5; }

.pase-volver {
  display: inline-block;
  margin-bottom: 12px;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(244, 234, 213, 0.6);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

/* ---------- 1) quién eres ---------- */
/**
 * Una sola columna, centrada, en todas las medidas.
 *
 * Estuvieron en dos columnas en pantalla grande y siempre se veía torcido: con
 * un número impar de tarjetas la última se queda sola en la izquierda, y con
 * una sola clase la tarjeta se iba a media pantalla mientras el logo y los
 * botones seguían centrados. Una columna no tiene ese problema nunca. Y para
 * pasar lista es mejor: se baja en orden, que es como se hace.
 */
.pase-coaches { display: grid; gap: 10px; max-width: 460px; width: 100%; margin: 0 auto; }
.pase-coach {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* 64px de alto: es el mínimo que se acierta con el pulgar sin mirar. */
  min-height: 64px;
  padding: 16px 20px;
  border-radius: 16px;
  border: 1px solid rgba(177, 147, 101, 0.3);
  background: rgba(177, 147, 101, 0.07);
  color: inherit;
  font: inherit;
  font-size: 19px;
  text-align: left;
  cursor: pointer;
}
.pase-coach:active { background: rgba(177, 147, 101, 0.16); }
.pase-coach-nombre { font-weight: 500; }
.pase-coach-nuevo {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #b19365;
}

/**
 * "Tu sesión sigue abierta", en la tarjeta de quien dejó la tablet encendida.
 *
 * En verde y no en dorado como el aviso de crear PIN: no son lo mismo. Uno
 * dice "aquí tienes que hacer algo", este dice "esta de aquí entra directa".
 * Y le dice a la que llega de quién era la tablet antes de tocar nada.
 */
.pase-coach-abierta {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8fae84;
}

/* ---------- 2) el PIN ---------- */
.pase-puntos { display: flex; justify-content: center; gap: 15px; margin: 8px 0 22px; }
.pase-punto {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid rgba(177, 147, 101, 0.45);
}
.pase-punto.es-lleno { background: #b19365; border-color: #b19365; }

.pase-teclado {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 11px;
  /* Tope: en una tablet de 1024 de alto, sin esto cada tecla salía tan grande
     que el teclado no cabía en la mano. */
  max-width: 340px;
  width: 100%;
  margin: 0 auto;
}
.pase-tecla {
  min-height: 72px;
  border-radius: 16px;
  border: 1px solid rgba(177, 147, 101, 0.22);
  background: rgba(244, 234, 213, 0.05);
  color: inherit;
  font-family: inherit;
  font-size: 27px;
  cursor: pointer;
}
.pase-tecla:active { background: rgba(177, 147, 101, 0.2); }
.pase-tecla.es-vacia { border-color: transparent; background: none; cursor: default; }
.pase-tecla.es-borrar { font-size: 22px; }

.pase-error {
  margin: 0 0 14px;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid rgba(201, 112, 100, 0.4);
  background: rgba(201, 112, 100, 0.12);
  color: #e3a99f;
  font-size: 14px;
  line-height: 1.5;
}

/* ---------- 3) las clases ---------- */
.pase-clases { display: grid; gap: 10px; max-width: 460px; width: 100%; margin: 0 auto; }
.pase-clase {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "hora tit ir" "hora gente ir";
  align-items: center;
  gap: 2px 16px;
  padding: 17px 20px;
  border-radius: 16px;
  border: 1px solid rgba(177, 147, 101, 0.3);
  background: rgba(177, 147, 101, 0.07);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
/* La que ya está pasada, en verde y apagada: de un vistazo se ve qué falta. */
.pase-clase.es-lista { border-color: rgba(120, 165, 90, 0.4); background: rgba(120, 165, 90, 0.08); }
.pase-clase-hora {
  grid-area: hora;
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 15px;
  color: #b19365;
  white-space: nowrap;
}
/* El día, solo cuando no es hoy: en una lista de un mes hace falta saber de
   cuándo es cada una, y en las de hoy sobra. */
.pase-clase-hora small { font-size: 10.5px; letter-spacing: 0.04em; opacity: 0.62; }

/* Los títulos de cada montón. */
.pase-grupo {
  margin: 14px 0 2px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 234, 213, 0.42);
}
.pase-grupo:first-child { margin-top: 0; }
/* El de lo que falta por apuntar, en ámbar: es lo único de esta pantalla que
   reclama algo, y a fin de mes es dinero sin pagar. */
.pase-grupo.es-aviso { color: #c6a978; }

.pase-vermas {
  margin-top: 16px;
  padding: 11px 16px;
  border-radius: 999px;
  border: 1px dashed rgba(244, 234, 213, 0.18);
  background: none;
  color: rgba(244, 234, 213, 0.5);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
}
.pase-clase-tit { grid-area: tit; font-size: 18px; }
.pase-clase-gente { grid-area: gente; font-size: 13px; color: rgba(244, 234, 213, 0.55); }

/* "Pasar lista", a la derecha y dentro del recuadro: dice qué pasa al tocar,
   que en una tarjeta con hora, título y cuentas no era evidente. */
.pase-clase-ir {
  grid-area: ir;
  align-self: center;
  flex: 0 0 auto;
  margin-left: 12px;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid rgba(177, 147, 101, 0.45);
  background: rgba(177, 147, 101, 0.12);
  color: #d8be7e;
  font-size: 13px;
  white-space: nowrap;
}
.pase-clase.es-pronto .pase-clase-ir { border-color: rgba(244, 234, 213, 0.16); background: none; color: rgba(244, 234, 213, 0.45); }

@media (max-width: 460px) {
  /* En el teléfono no cabe al lado: se baja y ocupa la fila entera. */
  .pase-clase {
    grid-template-columns: auto 1fr;
    grid-template-areas: "hora tit" "hora gente" "ir ir";
  }
  .pase-clase-ir { margin: 10px 0 0; text-align: center; }
}

/* ---------- la lista de gente ---------- */
/* Los mismos números que el panel: vino · faltaron · sin marcar · en total. */
.pase-cuentas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  margin: 0 auto 12px;
  max-width: 520px;
  width: 100%;
}
.pase-cuenta {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(244, 234, 213, 0.14);
  font-size: 12.5px;
  color: rgba(244, 234, 213, 0.6);
  white-space: nowrap;
}
.pase-cuenta.es-si { border-color: rgba(120, 165, 90, 0.4); color: #a9c98e; }
.pase-cuenta.es-no { border-color: rgba(201, 112, 100, 0.38); color: #e0a49a; }
.pase-cuenta.es-total { border-color: rgba(177, 147, 101, 0.4); color: #c6a978; }
/* Las de clase gratis, en azul: no es ni bueno ni malo como el verde y el
   rojo de vino/faltó, es otra cosa — quién viene a probar. */
.pase-cuenta.es-gratis { border-color: rgba(120, 150, 200, 0.42); color: #a8bde0; }

.pase-gratispie {
  margin: -4px auto 12px;
  max-width: 520px;
  width: 100%;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(244, 234, 213, 0.5);
  text-align: center;
}

/* La etiqueta de al lado del nombre. */
.pase-etiqueta {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(120, 150, 200, 0.4);
  background: rgba(120, 150, 200, 0.12);
  color: #a8bde0;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-style: normal;
  vertical-align: middle;
}
/* En la tarjeta de la clase va debajo del resto, en su línea. */
.pase-etiqueta.es-mini { margin: 4px 0 0; display: table; }

.pase-todas {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0 auto 14px;
  max-width: 520px;
  width: 100%;
}
/* "Borrar la lista" en gris y a lo ancho: se usa poco y no compite con las dos
   de arriba, que son las de todos los días. */
.pase-btn-todas.es-limpia {
  flex-basis: 100%;
  border-color: rgba(244, 234, 213, 0.16);
  background: transparent;
  color: rgba(244, 234, 213, 0.55);
}

/* La gente de fuera: ClassPass, drop-in, invitadas. */
.pase-fuera {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 14px auto 0;
  max-width: 520px;
  width: 100%;
  padding: 13px 15px;
  border-radius: 14px;
  border: 1px solid rgba(177, 147, 101, 0.28);
  background: rgba(177, 147, 101, 0.07);
}
.pase-fuera-que { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pase-fuera-que strong { font-size: 15px; font-weight: 500; }
.pase-fuera-que small { font-size: 11.5px; line-height: 1.45; color: rgba(244, 234, 213, 0.5); }
.pase-fuera-mas { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.pase-fuera-mas button {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(244, 234, 213, 0.18);
  background: transparent;
  color: var(--cream, #f4ead5);
  font-size: 20px;
  cursor: pointer;
}
.pase-fuera-mas button:disabled { opacity: 0.3; cursor: default; }
.pase-fuera-mas strong { min-width: 34px; text-align: center; font-size: 19px; }
.pase-btn-todas {
  flex: 1;
  min-height: 48px;
  border-radius: 13px;
  border: 1px solid rgba(120, 165, 90, 0.45);
  background: rgba(120, 165, 90, 0.12);
  color: #cfe3bd;
  font: inherit;
  font-size: 14.5px;
  cursor: pointer;
}
.pase-btn-todas.es-no {
  border-color: rgba(201, 112, 100, 0.4);
  background: rgba(201, 112, 100, 0.1);
  color: #e3a99f;
}

.pase-gente {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  gap: 8px;
  max-width: 520px;
  width: 100%;
}
.pase-gente li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 14px;
  border: 1px solid rgba(244, 234, 213, 0.1);
  background: rgba(244, 234, 213, 0.035);
}
.pase-gente li.es-vino { border-color: rgba(120, 165, 90, 0.4); background: rgba(120, 165, 90, 0.1); }
.pase-gente li.es-falto { border-color: rgba(201, 112, 100, 0.32); background: rgba(201, 112, 100, 0.07); }
.pase-nombre { flex: 1; font-size: 16.5px; min-width: 0; }
.pase-marcas { display: flex; gap: 8px; flex: 0 0 auto; }
/* 52px: se acierta con el pulgar sin apuntar, que es como se usa esto. */
.pase-marca {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  border: 1px solid rgba(244, 234, 213, 0.16);
  background: transparent;
  color: rgba(244, 234, 213, 0.45);
  font-size: 21px;
  cursor: pointer;
}
.pase-marca.es-si.es-puesta { background: #78a55a; border-color: #78a55a; color: #0d0a07; }
.pase-marca.es-no.es-puesta { background: #c97064; border-color: #c97064; color: #0d0a07; }

/* La que todavía no ha empezado: apagada y sin botones. No se esconde —la
   coach quiere ver a cuántas espera— pero no se puede marcar. */
.pase-clase.es-pronto { opacity: 0.55; }
.pase-pronto {
  margin: 0 auto 14px;
  max-width: 520px;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid rgba(177, 147, 101, 0.3);
  background: rgba(177, 147, 101, 0.08);
  color: rgba(244, 234, 213, 0.72);
  font-size: 13.5px;
  line-height: 1.5;
  text-align: center;
}
.pase-marca:disabled { opacity: 0.3; cursor: default; }

.pase-vacio, .pase-vacio-li {
  margin: 0;
  padding: 22px 4px;
  color: rgba(244, 234, 213, 0.5);
  font-size: 14.5px;
  list-style: none;
  text-align: center;
  /* Ocupa la fila entera: dentro de una rejilla de dos columnas, "nadie
     reservó esta clase" se quedaba en la izquierda como si fuera una fila de
     la lista. */
  grid-column: 1 / -1;
}

.pase-salir {
  margin-top: 26px;
  align-self: center;
  padding: 13px 26px;
  border-radius: 999px;
  border: 1px solid rgba(244, 234, 213, 0.18);
  background: none;
  color: rgba(244, 234, 213, 0.65);
  font: inherit;
  font-size: 14.5px;
  cursor: pointer;
}

/* =============================================================
   Las tres medidas
   =============================================================
   Teléfono: una columna y todo al alcance del pulgar, que es lo de arriba.
   Tablet y escritorio: el contenido se centra en vertical en vez de quedarse
   pegado al borde de arriba con media pantalla vacía debajo, y la lista de
   coaches pasa a dos columnas para que quepan las seis sin desplazar. */

@media (min-width: 700px) {
  .pase { max-width: 660px; padding: 34px 26px 40px; }
  .pase-logo { width: 140px; margin-bottom: 26px; }
  .pase-cab h1 { font-size: 32px; }
  .pase-clase { align-content: center; }
}

@media (min-width: 1100px) {
  .pase { max-width: 780px; padding: 40px 30px; }
  .pase-cab h1 { font-size: 36px; }
  .pase-coach { font-size: 20px; min-height: 72px; }

}

/* Pantallas bajas —una tablet en horizontal son 768 de alto— donde centrar
   deja el contenido sin sitio. */
@media (max-height: 620px) {
  .pase { justify-content: flex-start; padding-top: 18px; }
  .pase-logo { width: 96px; margin-bottom: 14px; }
  .pase-cab { margin-bottom: 16px; }
  .pase-tecla { min-height: 58px; font-size: 23px; }
}

/* "Clase de Paulina": la dueña puede abrir las listas de las demás, y de esa
   lista sale el pago de otra persona. Se dice antes de marcar a nadie. */
.pp-deotra {
  margin: 4px 0 0;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  color: #d8b45f;
}