/*
 * Listado "compra un paquete para reservar" del modal de reserva.
 * Lo pinta js/paquetes-comprables.js; acá va solo la forma.
 */

/* El tope existe también en CSS y no solo en el JS: si el modal está oculto al
   renderizar, no se pueden medir las filas y sin esto la lista crecería hasta
   ocupar la pantalla completa, que es el problema que vino a resolver. */
.pkg-buy-list {
  /* Respaldo por si no se puede medir la fila (modal todavía sin pintar): cinco
     filas de 55px más sus márgenes. La medida buena la pone el JS. */
  max-height: 18rem;
  overflow-y: auto;
  /* El scroll de la lista no arrastra el del modal al llegar al final. */
  overscroll-behavior: contain;
}

/* Aire con lo que venga abajo. Sin esto, cuando el modal es el que scrollea, la
   última fila queda pegada al pie y el botón de comprar parece parte de la lista. */
[data-pkg-buy] {
  margin-bottom: .5rem;
}

/* Barra de scroll a la vista y FUERA de las filas: el canal de la derecha la
   separa de los precios, que era donde antes se montaba encima. Se pinta a mano
   porque la nativa es delgada y en varios sistemas ni asoma hasta que uno
   arrastra, y acá es la única señal de que hay más paquetes abajo. */
.pkg-buy-list {
  padding-right: 1rem;
}

/* CUIDADO: declarar `scrollbar-width`/`scrollbar-color` en este mismo elemento
   hace que Chrome IGNORE los ::-webkit-scrollbar de abajo y vuelva a la barra
   flotante del sistema, que se esconde sola. Por eso las dos propiedades
   estándar van aisladas para Firefox, que no tiene los pseudoelementos. */
@supports not selector(::-webkit-scrollbar) {
  .pkg-buy-list {
    scrollbar-width: auto;
    scrollbar-color: var(--ma-brand, var(--bs-primary, #6C3FC5))
                     color-mix(in srgb, currentColor 14%, transparent);
  }
}

.pkg-buy-list::-webkit-scrollbar {
  width: .75rem;
}

.pkg-buy-list::-webkit-scrollbar-track {
  border-radius: .375rem;
  background: color-mix(in srgb, currentColor 14%, transparent);
}

.pkg-buy-list::-webkit-scrollbar-thumb {
  border-radius: .375rem;
  background: var(--ma-brand, var(--bs-primary, #6C3FC5));
}

/* La fila entera es la etiqueta del radio: se elige tocando cualquier parte.
   Los colores, el radio y los grosores son los MISMOS del listado de compra del
   modal con dependientes (`.mabk-buy`/`.mabk-pkg` en calendario-v3.css): es la
   misma decisión en dos pantallas y se veían distintas. Acá van con variables y
   fallback porque este componente también se pinta en las páginas públicas, que
   no cargan el tema del panel. */
.pkg-buy-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  cursor: pointer;
  padding: .6875rem .875rem;
  border: 1.5px solid var(--bs-border-color, #e8e3f6);
  border-radius: 10px;
  background: #fff;
  transition: border-color .15s, background-color .15s;
  /* Separación mínima entre filas: con nueve paquetes, los 8px de antes eran
     72px de aire — lo justo para obligar a scrollear dentro del modal. */
  margin-bottom: .125rem;
}

.pkg-buy-row:hover {
  border-color: var(--ma-brand-light, #9B6FE8);
  background: #FBFAFF;
}

/* El margen de la última fila es alto que la lista cuenta y nadie ve: bastaba
   para dejarla 2px sobre su tope y hacerla scrollear cuando cabía justo. */
.pkg-buy-row:last-child {
  margin-bottom: 0;
}

.pkg-buy-row .pkg-buy-radio {
  flex: 0 0 auto;
  margin: 0;
}

/* El elegido se ve elegido sin tener que buscar el punto del radio. */
.pkg-buy-row:has(.pkg-buy-radio:checked) {
  border-color: var(--bs-primary, var(--ma-brand, #6C3FC5));
  background: var(--ma-brand-xlight, #EDE8FB);
  box-shadow: 0 0 0 3px rgba(var(--ma-brand-rgb, 108, 63, 197), .12);
}

/* min-width:0 es lo que habilita el truncado: sin esto el contenido impone su
   ancho mínimo, la fila se desborda y el botón cae al renglón de abajo. */
.pkg-buy-row .pkg-buy-info {
  flex: 1 1 auto;
  min-width: 0;
}

.pkg-buy-row .pkg-buy-name,
.pkg-buy-row .pkg-buy-meta {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pkg-buy-row .pkg-buy-name {
  font-size: 13px;
  font-weight: 500;
  color: #444050;
  line-height: 1.35;
}

.pkg-buy-row .pkg-buy-meta {
  font-size: .74rem;
  color: #8A82A0;
}

/* Aviso del HORARIO FIJO: lo que compra no es este horario suelto sino un ciclo
   que se reserva solo. A diferencia del nombre y las sesiones, esta línea NO se
   trunca: es justamente lo que el alumno necesita leer entero antes de comprar.

   El color sale de la PALETA DE LA ACADEMIA, no de un valor fijo: este listado
   se pinta en el panel (donde styles_panel.html define --ma-brand con lo que
   eligió el admin) y en la página pública (donde cae a --bs-primary del tema).
   Un verde hardcodeado se veía ajeno en cuanto la academia cambiaba su color. */
.pkg-buy-row .pkg-buy-fijo {
  display: block;
  margin-top: .15rem;
  font-size: .75rem;
  line-height: 1.35;
  white-space: normal;
  color: var(--ma-brand, var(--bs-primary, #6C3FC5));
}

/* Precio y botón apilados y pegados a la derecha: las filas quedan alineadas
   entre sí y el ojo baja por una sola columna de precios. El bloque conserva su
   ancho (flex 0 0 auto), así que un nombre largo se trunca en vez de empujarlo. */
.pkg-buy-row .pkg-buy-aside {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .25rem;
}

.pkg-buy-row .pkg-buy-price {
  font-weight: 700;
  font-size: .8125rem;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--bs-primary, var(--ma-brand, #6C3FC5));
}

/* La barra de compra: lo elegido a la izquierda y el botón a la derecha. Vive en
   el pie del modal, que no scrollea. */
.pkg-buy-bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex: 1 1 auto;
  min-width: 0;
}

/* Lo elegido en dos renglones: el nombre y debajo lo que define la compra
   —sesiones, vigencia y precio—. El pie da para eso y el alumno no tiene que
   volver a la lista para acordarse de qué está por pagar. */
.pkg-buy-bar .pkg-buy-elegido {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

.pkg-buy-bar .pkg-buy-elegido-vacio {
  font-size: .8125rem;
  color: var(--bs-secondary-color, #6c757d);
}

.pkg-buy-bar .pkg-buy-elegido-nombre,
.pkg-buy-bar .pkg-buy-elegido-meta {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pkg-buy-bar .pkg-buy-elegido-nombre {
  font-size: 13px;
  font-weight: 600;
  color: #444050;
  line-height: 1.3;
}

.pkg-buy-bar .pkg-buy-elegido-meta {
  font-size: .74rem;
  color: #8A82A0;
  line-height: 1.35;
}

.pkg-buy-bar .pkg-buy-elegido-meta b {
  font-weight: 700;
  color: var(--bs-primary, var(--ma-brand, #6C3FC5));
}

/* Encabezado del bloque de compra: mismo tratamiento que los pasos del modal
   con dependientes (`.mabk-step-h`). */
.pkg-buy-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ma-brand-dark, #4B2A9C);
}

.pkg-buy-titulo .ti {
  font-size: 1rem;
}

/* El tamaño va fijo acá y no con btn-sm: en este tema btn-sm sobre btn-icon
   agranda el botón, y las plantillas de las páginas públicas no cargan las
   clases de Sneat. */
.pkg-buy-bar .pkg-buy-comprar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: .25rem .625rem;
  font-size: .8125rem;
  line-height: 1.4;
  white-space: nowrap;
}

/* En escritorio hay ancho de sobra y este es EL botón de la pantalla: apretado
   se leía como un control secundario. En el teléfono no crece acá porque ya se
   estira a todo el ancho (más abajo). */
@media (min-width: 576px) {
  .pkg-buy-bar .pkg-buy-comprar {
    padding: .4375rem 1rem;
    font-size: .9375rem;
  }
}

/* El pie pasa a repartir: la barra toma todo el ancho disponible.
   El padding vertical se empareja porque el tema deja el pie con 0 arriba y
   1.5rem abajo: pensado para una fila de botones pegada al contenido, deja el
   bloque descentrado en cuanto ocupa dos renglones. */
.pkg-buy-pie {
  flex-wrap: nowrap;
  gap: .5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* "Cerrar" mientras hay lista de compra: lo tapa el JS, que también lo devuelve. */
.pkg-buy-oculto {
  display: none;
}

/* En un modal de 338px el nombre queda en 98px y se corta ("Pack de 4 Cl..."),
   perdiendo justo el precio que hay que leer antes de pagar. Se baja a su propia
   línea, entero, y los dos botones pasan abajo.

   display:contents saca la barra de en medio y deja que el pie ordene sus tres
   piezas: sin eso, envolver la etiqueta se lleva el botón "Comprar" con ella. */
@media (max-width: 575.98px) {
  .pkg-buy-pie {
    flex-wrap: wrap;
  }
  .pkg-buy-bar {
    display: contents;
  }
  .pkg-buy-bar .pkg-buy-elegido {
    flex: 1 1 100%;
    white-space: normal;
  }
  /* Sin "Cerrar" al lado, el botón quedaba solo y angosto en su renglón: que se
     estire deja un blanco de toque decente. */
  .pkg-buy-bar .pkg-buy-comprar {
    flex: 1 1 auto;
    justify-content: center;
    padding-top: .375rem;
    padding-bottom: .375rem;
  }
}

.pkg-buy-empty {
  display: none;
}
.pkg-buy-empty.is-visible {
  display: block;
}