/* ============================================================
   RESERVAS CLIENTE
============================================================ */

.client-reservation-section {
    margin: 0 auto;
    max-width: 980px;
}

.client-reservation-section-title {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin-bottom: 14px;
}

.client-reservation-section-title h4 {
    color: #24313a;
    font-size: 1.15rem;
    margin: 0;
}

.client-reservation-section-title span {
    background: #eaf6fb;
    border-radius: 8px;
    color: #136f93;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    padding: 7px 10px;
}

.client-reservation-compact-list {
    background: #ffffff;
    border: 1px solid #e2e7eb;
    border-radius: 8px;
    overflow: hidden;
}

.client-reservation-compact-item {
    align-items: center;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(150px, 1.5fr) minmax(110px, 1fr) minmax(90px, .8fr) auto;
    padding: 12px 14px;
}

.client-reservation-compact-item + .client-reservation-compact-item {
    border-top: 1px solid #edf1f3;
}

.client-reservation-compact-date {
    color: #24313a;
    font-weight: 700;
}

.client-reservation-compact-type,
.client-reservation-compact-time {
    color: #5f6872;
}

.client-reservation-compact-status {
    background: #e1e5e8;
    border-radius: 8px;
    color: #5f6872;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    padding: 7px 10px;
}

.client-reservation-compact-status.is-active {
    background: #eaf7ef;
    color: #12663a;
}

.client-reservation-compact-status.is-warning {
    background: #fff3cd;
    color: #7a5a00;
}

.client-reservation-compact-status.is-nsp {
    background: #fbecec;
    color: #a12f2f;
}

.client-reservation-service-badge {
    border-radius: 8px;
    display: inline-flex;
    font-size: 0.84rem;
    font-weight: 800;
    line-height: 1;
    padding: 8px 10px;
    white-space: nowrap;
}

.client-reservation-service-badge.is-contactologia {
    background: #e0f5ef;
    color: #007a4f;
}

.client-reservation-service-badge.is-oftalmologia {
    background: #e8f1fb;
    color: #0d5f9d;
}

.client-reservation-accordion .accordion-item {
    border: 1px solid #e2e7eb;
    border-radius: 8px;
    overflow: hidden;
}

.client-reservation-accordion .accordion-button {
    box-shadow: none;
    color: #24313a;
    font-weight: 700;
    gap: 10px;
}

.client-reservation-accordion .accordion-button:not(.collapsed) {
    background: #f8fafb;
    color: #24313a;
}

.client-reservation-accordion-count {
    background: #eaf6fb;
    border-radius: 8px;
    color: #136f93;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    padding: 7px 10px;
}

.client-reservation-accordion-count.is-warning {
    background: #fff3cd;
    color: #7a5a00;
}

.client-reservation-accordion-count.is-nsp {
    background: #fbecec;
    color: #a12f2f;
}

.client-reservation-note {
    color: #6f7780;
    font-size: 0.9rem;
    line-height: 1.35;
    margin: 0 0 12px;
}

.client-reservation-table-scroll {
    overflow-x: auto;
}

.client-reservation-table {
    border-collapse: collapse;
    min-width: 680px;
    width: 100%;
}

.client-reservation-table.is-active {
    background: #ffffff;
    border: 1px solid #cfeedd;
    border-radius: 8px;
    min-width: 900px;
    overflow: hidden;
}

.client-reservation-table th,
.client-reservation-table td {
    border-bottom: 1px solid #edf1f3;
    color: #5f6872;
    padding: 11px 12px;
    text-align: left;
    vertical-align: middle;
}

.client-reservation-table th {
    color: #24313a;
    font-size: 0.88rem;
}

.client-reservation-table tbody tr:last-child td {
    border-bottom: 0;
}

.client-reservation-table.is-active td strong {
    color: #136f93;
}

.client-reservation-cancel-source {
    color: #24313a;
    display: block;
    font-weight: 800;
}

.client-reservation-cancel-source + small {
    color: #6f7780;
    display: block;
    font-size: 0.78rem;
    line-height: 1.3;
    margin-top: 3px;
}

.client-reservation-table-actions {
    align-items: center;
    display: flex;
    gap: 6px;
    white-space: nowrap;
}

.client-reservation-action-button {
    background: #ffffff;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    padding: 8px 10px;
}

.client-reservation-action-button.is-resend {
    border-color: #1577a1;
    color: #136f93;
}

.client-reservation-action-button.is-resend:hover {
    background: #eaf6fb;
}

.client-reservation-action-button.is-cancel {
    border-color: #c84343;
    color: #a12f2f;
}

.client-reservation-action-button.is-cancel:hover {
    background: #fbecec;
}

.client-reservation-action-button.is-disabled,
.client-reservation-action-button:disabled {
    background: #edf1f3;
    border-color: #d7dde1;
    color: #7b858d;
    cursor: not-allowed;
    opacity: 1;
}

.client-reservation-action-button.is-disabled:hover,
.client-reservation-action-button:disabled:hover {
    background: #edf1f3;
}

.client-reservation-action-help {
    color: #6f7780;
    display: block;
    font-size: 0.74rem;
    line-height: 1.25;
    margin-top: 6px;
}

.client-reservation-action-help.is-warning {
    color: #9a5a00;
}

.client-reservation-compact-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.appointment-cancel-form {
    margin: 0;
}

.appointment-resend-form {
    margin: 0;
}

.appointment-resend-help {
    color: #6f7780;
    display: block;
    font-size: 0.78rem;
    line-height: 1.3;
    margin-top: 6px;
}

.appointment-resend-help.is-limit {
    color: #9a5a00;
    margin-top: 12px;
}

.appointment-cancel-button {
    background: #ffffff;
    border: 1px solid #c84343;
    border-radius: 8px;
    color: #a12f2f;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 7px 10px;
}

.appointment-cancel-button:hover {
    background: #fbecec;
}

.appointment-resend-button {
    background: #ffffff;
    border: 1px solid #1577a1;
    border-radius: 8px;
    color: #136f93;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 7px 10px;
}

.appointment-resend-button:hover {
    background: #eaf6fb;
}

@media (max-width: 640px) {
    .client-reservation-compact-item {
        align-items: flex-start;
        display: flex;
        flex-direction: column;
    }

    .client-reservation-compact-actions {
        justify-content: flex-start;
    }
}