.ticket {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    max-height: 100%;
    position: relative;
    white-space: normal;
    width: 100% !important;
}

    .ticket > :not([hidden]) ~ :not([hidden]) {
        --tw-divide-y-reverse: 0;
        border-top-width: calc(2px * calc(1 - var(--tw-divide-y-reverse)));
        border-bottom-width: calc(2px * var(--tw-divide-y-reverse));
        border-color: rgb(148 163 184);
    }

    .ticket .header {
        border-top-left-radius: 0.5rem;
        border-top-right-radius: 0.5rem;
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;
        background-color: rgb(34 197 94);
        padding: 2px;
        font-weight: 700;
        color: rgb(255 255 255);
    }
.circle {
    border-radius: 50%;
    width: 30px;
    height: 30px;
    margin: 0px 2px;
}
.mesonero {
color:white;
}
        .ticket .header .first-row {
            position: relative;
        }

            .ticket .header .first-row .content {
                display: flex;
                align-items: center;
                justify-content: space-between;
            }

                .ticket .header .first-row .content .table-descr {
                    position: absolute;
                    width: 100%;
                    text-align: center;
                    font-size: 1.25rem;
                    line-height: 1.75rem;
                }

        .ticket .header .second-row {
            display: flex;
            margin-top: 0.25rem;
            justify-content: space-between;
        }

    .ticket .items-list {
        overflow-y: auto;
    }

        .ticket .items-list .item-btn {
            display: flex;
            position: relative;
            z-index: 10;
            padding: 2px;
            align-items: center;
            width: 100%;
            font-weight: 600;
            background-color: rgb(255 255 255);
        }

            .ticket .items-list .item-btn:focus {
                background-color: rgb(226 232 240);
                outline: none !important;
            }

            .ticket .items-list .item-btn .status-indicator {
                margin-top: 0.25rem;
                margin-bottom: 0.25rem;
                margin-left: 0.5rem;
                margin-right: 0.5rem;
                align-self: stretch;
                width: 0.25rem;
            }

            .ticket .items-list .item-btn .data {
                width: 100%;
            }

            .ticket .items-list .item-btn .data-wrapper {
                display: flex;
            }

            .ticket .items-list .item-btn .details {
                text-align: start;
                flex-grow: 1;
                width:250px;
            }

            .ticket .items-list .item-btn .status {
                padding-right: 0.25rem;
                text-align: end;
            }

            .ticket .items-list .item-btn .status-text {
                text-align: end;
                padding-right: 0.25rem;
                font-size: 80%;
            }

            .ticket .items-list .item-btn .modificadores-list .item {
                margin-left: 1.5rem;
                font-weight: 100;
                text-align: left;
            }

        .ticket .items-list > :not([hidden]) ~ :not([hidden]) {
            --tw-divide-y-reverse: 0;
            border-top-width: calc(2px * calc(1 - var(--tw-divide-y-reverse)));
            border-bottom-width: calc(2px * var(--tw-divide-y-reverse));
            border-style: dashed;
            border-color: rgb(148 163 184);
        }

.item__status__pendiente-text {
    background-color: #374151;
}

.item__status__preparando-text {
    background-color: #3B82F6;
}

.item__status__terminado-text {
    background-color: #10B981;
}

.item__status__cancelado-text {
    background-color: #EF4444;
}

/* Ítem anulado desde restaurante: titila hasta que el usuario hace clic (reconocer que lo vio) */
.ticket .items-list .item-btn.item-anulado-sin-ack {
    animation: item-anulado-blink 0.8s ease-in-out infinite;
    border: 2px solid #EF4444;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.5);
}

@keyframes item-anulado-blink {
    0%, 100% {
        opacity: 1;
        background-color: rgba(254, 202, 202, 0.95);
    }
    50% {
        opacity: 0.75;
        background-color: rgba(239, 68, 68, 0.25);
    }
}