:root{
  --color-active: #8bc34a !important;
  --color-reserve: #fb8c00 !important;
  --color-finally: #424242 !important;
}

.container-boletos {
    width: 100%;
    min-height: 250px;
    max-height: 100%;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem; /* Espacio entre boletos */
    margin-bottom: 2rem;
    margin-top: 2rem;
    justify-content: center; /* Alinea desde la izquierda */
    align-items: flex-start; /* Alinea los elementos superiores */
}

button.boleto{
    outline: none;
    border: none;
    background: none;
    max-width: 60px; /* Tamaño máximo */
    width: 60px; /* Altura máxima */
    height: 60px; /* Altura máxima */
    max-height: 60px; /* Altura máxima */
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.12));
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
    transform: rotateZ(16deg);
    border-radius: 0.5rem;
    margin: 0.5rem;
}

p.text-boleto{
    transform: rotatez(-16deg);
}

.boleto-activo{
    background: var(--color-active) !important;
}
.boleto-reservado{
    background: var(--color-reserve) !important;
}
.boleto-comprado{
    background: var(--color-finally) !important;
    color: white !important;
}
.boleto-rounded{
    border-radius: 50% !important;
}