/* La maquetació genèrica de l'àrea de client està en el bundle comú. */

.m-clientOrderTickets {
    margin: 20rem 0;
    padding: 18rem;
    border: 1rem solid #e2e8f0;
    border-radius: 12rem;
    background: #fff;
}

.m-clientOrderTickets__header,
.m-clientOrderTickets__item,
.m-clientOrderTicketPreview__heading,
.m-clientOrderTicketPreview__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14rem;
}

.m-clientOrderTickets__header {
    padding-bottom: 12rem;
    border-bottom: 1rem solid #e2e8f0;
}

.m-clientOrderTickets__title,
.m-clientOrderTickets__intro,
.m-clientOrderTickets__identity strong,
.m-clientOrderTickets__identity span,
.m-clientOrderTickets__action small {
    display: block;
}

.m-clientOrderTickets__intro,
.m-clientOrderTickets__identity span,
.m-clientOrderTickets__action small {
    margin-top: 4rem;
    color: #64748b;
}

.m-clientOrderTickets__list {
    display: grid;
    gap: 10rem;
    padding-top: 12rem;
}

.m-clientOrderTickets__item {
    align-items: flex-start;
    padding: 12rem;
    border: 1rem solid #edf2f7;
    border-radius: 8rem;
    background: #f8fafc;
}

.m-clientOrderTickets__action {
    display: grid;
    justify-items: end;
    gap: 6rem;
}

.m-clientOrderTickets__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8rem;
}

.m-clientOrderTickets__validated {
    padding: 3rem 8rem;
    border-radius: 999rem;
    font-size: 12rem;
    font-weight: 700;
}

.m-clientOrderTickets__validated.-yes {
    color: #166534;
    background: #dcfce7;
}

.m-clientOrderTickets__validated.-no {
    color: #475569;
    background: #e2e8f0;
}

.m-clientOrderTicketValidations {
    display: grid;
    gap: 16rem;
    padding: 20rem;
}

.m-clientOrderTicketValidations__header {
    display: grid;
    gap: 4rem;
    padding-bottom: 14rem;
    border-bottom: 1rem solid #e2e8f0;
}

.m-clientOrderTicketValidations__header h2,
.m-clientOrderTicketValidations__header span {
    margin: 0;
}

.m-clientOrderTicketValidations__header span {
    color: #64748b;
}

.m-clientOrderTicketValidations__list {
    display: grid;
    gap: 8rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.m-clientOrderTicketValidations__list li {
    padding: 12rem;
    border: 1rem solid #e2e8f0;
    border-radius: 8rem;
    background: #f8fafc;
    font-weight: 600;
}

.m-clientOrderTicketPreview {
    display: grid;
    gap: 14rem;
    padding: 16rem;
    background: #fff;
}

.m-clientOrderTicketPreview__frame {
    display: block;
    width: 100%;
    min-height: min(72vh, 760px);
    border: 1rem solid #e2e8f0;
    background: #f8fafc;
}

@media (max-width: 640px) {
    .m-clientOrderTickets__item {
        display: grid;
        align-items: stretch;
    }

    .m-clientOrderTickets__action {
        justify-items: stretch;
    }

    .m-clientOrderTickets__action .a-button {
        width: 100%;
    }

    .m-clientOrderTickets__actions {
        display: grid;
    }
}