.repair-order-professional {
    --rop-page-bg: #1a2331;
    --rop-surface-bg: #1e293b;
    --rop-card-bg: #1e293b;
    --rop-border: #334155;
    --rop-title: #f1f5f9;
    --rop-title-accent: #22d3ee;
    --rop-text: #e5e7eb;
    --rop-text-soft: #9ca3af;
    --rop-text-muted: #6b7280;
    --rop-chip-bg: rgba(255, 255, 255, 0.05);
    --rop-chip-border: rgba(255, 255, 255, 0.12);
    --rop-table-head: #313d4f;
    --rop-row-head-bg: rgb(77, 96, 121);
    --rop-row-zebra-odd: rgba(15, 23, 42, 0.2);
    --rop-row-zebra-even: rgba(59, 130, 246, 0.08);
    --rop-success: #34d399;
    --rop-danger: #fb7185;
    --rop-warning: #fbbf24;
    --rop-info: #60a5fa;
    --rop-fs-2xs: 11px;
    --rop-fs-xs: 12px;
    --rop-fs-sm: 13px;
    --rop-fs-md: 14px;
    --rop-fs-lg: 16px;
    --rop-fs-xl: 18px;
    --rop-fs-2xl: 22px;
    --rop-fs-3xl: 26px;
    min-height: 100vh;
    background: var(--rop-page-bg);
}

.repair-order-professional__container {
    padding-top: 10px;
    padding-bottom: 26px;
}

.page-content {
    padding: calc(44px + 24px) calc(24px / 2) 60px calc(24px / 2) !important;
}

.repair-order-professional__hero {
    /* border: 1px solid var(--rop-border); */
    /* border-radius: 18px; */
    /* background: var(--rop-surface-bg); */
    /* padding: 18px; */
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    /* gap: 14px; */
    margin-bottom: 6px !important;
}

.repair-order-professional__hero-right {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.repair-order-professional__title {
    margin: 0 0 8px 0;
    color: var(--rop-title);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.repair-order-professional__title-icon {
    color: var(--rop-title-accent);
    font-size: 24px;
    line-height: 1;
}

.repair-order-professional__title-number {
    color: var(--rop-title-accent);
}

.repair-order-professional__breadcrumb {
    background: transparent;
    padding: 0;
}

.repair-order-professional__breadcrumb .breadcrumb-item,
.repair-order-professional__breadcrumb .breadcrumb-item a {
    color: var(--rop-text-soft);
    font-size: 12px;
}

.repair-order-professional__breadcrumb .breadcrumb-item.active {
    color: var(--rop-text);
}

.repair-order-professional__breadcrumb {
    justify-content: flex-end;
}

.repair-order-professional__actions .btn {
    width: 42px;
    height: 42px;
    border: 1px solid var(--rop-chip-border);
    background: var(--rop-chip-bg);
}

.repair-order-professional__actions ._email {
    color: #90d0ff;
}

.repair-order-professional__actions .download_g {
    color: #8feec7;
}

.repair-order-professional__actions ._print {
    color: #ffdfa0;
}

.repair-order-professional__stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.repair-order-professional__stat-card {
    border: 1px solid var(--rop-border);
    border-radius: 8px;
    background: var(--rop-card-bg);
    padding: 9px 11px;
    min-height: 118px;
}

.repair-order-professional__stat-card--reminder {
    background: linear-gradient(155deg, #202833 0%, #1e293b 100%);
}

.repair-order-professional__stat-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.repair-order-professional__stat-head--reminder {
    justify-content: flex-start;
    gap: 8px;
}

.repair-order-professional__stat-head--compact {
    justify-content: flex-start;
    gap: 8px;
}

.repair-order-professional__stat-label {
    margin: 0;
    color: var(--rop-text-soft);
    font-size: 13px;
    font-weight: 600;
}

.repair-order-professional__icon {
    width: 33px;
    height: 33px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 17px;
}

.repair-order-professional__icon--warning {
    background: linear-gradient(135deg, #f5bf35, #ef9320);
}

.repair-order-professional__icon--primary {
    background: linear-gradient(135deg, #4f8cff, #3d62fb);
}

.repair-order-professional__icon--success {
    background: linear-gradient(135deg, #18d399, #10b981);
}

.repair-order-professional__icon--info {
    background: linear-gradient(135deg, #22b9e7, #0ea5e9);
}

.repair-order-professional__stat-value {
    margin: 3px 0 0;
    color: var(--rop-title);
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
}

.repair-order-professional__stat-actions {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.repair-order-professional__stat-main-row {
    margin-top: 4px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.repair-order-professional__stat-main-row .repair-order-professional__stat-value {
    margin: 0;
}

.repair-order-professional__stat-main-row .repair-order-professional__stat-actions {
    margin-top: 0;
    justify-content: flex-end;
}

.repair-order-professional__stat-actions .badge {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 9px;
    line-height: 1.2;
}

.repair-order-professional__stat-actions .badge-light {
    border: 1px solid var(--rop-chip-border);
    background: rgba(112, 134, 179, 0.2);
    color: var(--rop-text);
}

.repair-order-professional__stat-rich {
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.repair-order-professional__stat-reminder-main-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.repair-order-professional__stat-card--reminder .repair-order-professional__stat-rich {
    margin-top: 0;
}

.repair-order-professional__stat-main {
    font-size: 32px;
    color: var(--rop-title);
    font-weight: 700;
    line-height: 1;
}

.repair-order-professional__stat-separator {
    color: var(--rop-text-soft);
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
}

.repair-order-professional__stat-secondary {
    font-size: 23px;
    color: var(--rop-text-soft);
    font-weight: 700;
    line-height: 1;
}

.repair-order-professional__pill {
    background: rgba(255, 193, 7, 0.18);
    color: #ffd778;
    border: 1px solid rgba(255, 193, 7, 0.35);
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
}

.repair-order-professional__stat-note {
    margin-top: 6px;
    background: var(--rop-chip-bg);
    border: 1px solid var(--rop-border);
    border-radius: 10px;
    padding: 6px 10px;
    color: var(--rop-text);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
}

.repair-order-professional__stat-popover-wrap {
    margin-top: 4px;
}

.repair-order-professional__stat-popover-btn {
    width: 100%;
    border: 1px solid var(--rop-border);
    border-radius: 10px;
    background: var(--rop-chip-bg);
    color: var(--rop-text);
    font-size: 11px;
    font-weight: 700;
    padding: 5px 9px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 1.2;
}

.repair-order-professional__stat-card--reminder .repair-order-professional__stat-popover-wrap {
    margin-top: 0;
    flex-shrink: 0;
}

.repair-order-professional__stat-card--reminder .repair-order-professional__stat-popover-btn {
    width: auto;
    min-height: 30px;
    padding: 5px 8px;
    gap: 8px;
}

.repair-order-professional__stat-popover-btn:focus,
.repair-order-professional__stat-popover-btn:hover {
    color: var(--rop-title);
    border-color: rgba(34, 211, 238, 0.45);
    outline: none;
}

.repair-order-professional__stat-popover-meta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.repair-order-professional__stat-popover-label {
    color: var(--rop-text);
}

.repair-order-professional__stat-popover-count-badge {
    min-width: 22px;
    height: 20px;
    padding: 0 7px;
    border-radius: 8px;
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
    border: 1px solid rgba(147, 197, 253, 0.4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 11px;
}

.repair-order-professional__stat-popover-meta .bx {
    color: var(--rop-info);
    font-size: 13px;
}

.rop-reminder-popover-popover {
    border: 1px solid var(--rop-border, #334155);
    border-radius: 10px;
    background: var(--rop-surface-bg, #1e293b);
    max-width: 280px;
}

.rop-reminder-popover-popover .popover-content {
    color: var(--rop-text, #e5e7eb);
    padding: 10px;
}

.rop-reminder-popover__title {
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 7px;
    color: var(--rop-title, #f1f5f9);
}

.rop-reminder-popover__rows {
    display: grid;
    gap: 5px;
}

.rop-reminder-popover__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--rop-text-soft, #9ca3af);
}

.rop-reminder-popover__row strong {
    color: var(--rop-title, #f1f5f9);
    font-weight: 700;
}

.rop-reminder-popover__next {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--rop-border, #334155);
    font-size: 11px;
    color: var(--rop-text-soft, #9ca3af);
    line-height: 1.35;
}

.rop-reminder-popover__next span {
    color: var(--rop-text, #e5e7eb);
    font-weight: 700;
}

.repair-order-professional__services-counter {
    margin-top: 4px;
    color: var(--rop-text-soft);
    font-size: 11px;
}

.repair-order-professional__services-counter strong {
    color: var(--rop-title);
}

.repair-order-professional__placeholder {
    margin-top: 9px;
    color: var(--rop-text-muted);
    font-size: 11px;
}

.repair-order-professional__quote-bars {
    margin-top: 8px;
}

.repair-order-professional__quote-row {
    display: grid;
    grid-template-columns: 78px 1fr 30px;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 12px;
    color: var(--rop-text-soft);
}

.repair-order-professional__quote-row b {
    color: var(--rop-text);
    text-align: right;
}

.repair-order-professional__bar {
    height: 6px;
    border-radius: 8px;
    background: rgba(148, 163, 184, 0.3);
    overflow: hidden;
}

.repair-order-professional__bar span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 8px;
    transition: width 0.3s ease;
}

#ropQuoteApprovedBar {
    background: var(--rop-success);
}

#ropQuoteRejectedBar {
    background: var(--rop-danger);
}

.repair-order-professional__timeline-card {
    border: 1px solid var(--rop-border);
    border-radius: 8px;
    background: var(--rop-surface-bg);
    padding: 14px 16px 16px;
    margin-bottom: 14px;
}

.repair-order-professional__timeline-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 7px 10px 0px;
    margin: -14px -16px 0px;
    border-bottom: 1px solid var(--rop-border);
    background: transparent;
}

.repair-order-professional__timeline-main {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 0;
}

.repair-order-professional__timeline-id-block {
    min-width: 200px;
    padding-right: 24px;
}

.repair-order-professional__timeline-id-label {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 700;
    color: var(--rop-text-muted);
}

.repair-order-professional__timeline-id-number {
    display: block;
    color: var(--rop-title);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: 0.2px;
}

.repair-order-professional__timeline-id-value {
    font-weight: 400;
}

.repair-order-professional__timeline-date {
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--rop-text-muted);
    font-size: 12px;
}

.repair-order-professional__timeline-date i {
    font-size: 14px;
}

.repair-order-professional__timeline-meta {
    display: flex;
    flex-wrap: wrap;
}

.repair-order-professional__timeline-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 0 18px;
    border-right: 1px solid var(--rop-border);
}

.repair-order-professional__timeline-meta-item:last-child {
    border-right: 0;
    padding-right: 0;
}

.repair-order-professional__timeline-meta-icon {
    color: var(--rop-text-soft);
    font-size: 24px;
    line-height: 1;
}

.repair-order-professional__timeline-meta-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.repair-order-professional__timeline-meta-label {
    font-size: 13px;
    font-weight: 800;
    color: var(--rop-text);
}

.repair-order-professional__timeline-meta-value {
    font-size: 13px;
    font-weight: 600;
    color: #d8e0ec;
}

.repair-order-professional__timeline-state {
    min-width: 170px;
    text-align: right;
    color: var(--rop-text-soft);
    font-size: 12px;
}

.repair-order-professional__timeline-state strong {
    display: block;
    margin-top: 2px;
    color: var(--rop-title);
    font-size: 15px;
}

.repair-order-professional__timeline-state--whatsapp {
    min-width: 0;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
}

.repair-order-professional__timeline-state--whatsapp .repair-order-professional__wa-btn {
    white-space: nowrap;
}

.repair-order-professional__step-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 -16px 10px;
    padding: 2px 10px;
    border-bottom: 1px solid var(--rop-border);
    background: transparent;
}

.repair-order-professional__step-title {
    color: #9ca3af;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.repair-order-professional__step-complete {
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.42);
    background: rgba(71, 85, 105, 0.32);
    color: #cbd5e1;
    font-size: 13px;
    font-weight: 700;
    padding: 4px 11px;
    white-space: nowrap;
}

.repair-order-professional__step-track {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 9px;
    margin-bottom: 0px;
}

.rop-step {
    position: relative;
    border: 1px solid var(--rop-border);
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(33, 53, 84, 0.65), rgba(22, 38, 66, 0.65));
    color: var(--rop-text-soft);
    padding: 12px 12px 10px;
    min-height: 85px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-align: center;
    overflow: hidden;
}

.rop-step::before {
    content: none;
}

.rop-step__index {
    position: absolute;
    top: 7px;
    right: 7px;
    display: inline-flex;
    width: 20px;
    height: 20px;
    border-radius: 8px;
    border: 1px solid var(--rop-chip-border);
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    background: rgba(120, 143, 182, 0.22);
}

.rop-step__icon {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(67, 98, 148, 0.28);
    color: #9fc6ff;
    margin-bottom: 0;
}

.rop-step__icon i {
    font-size: 22px;
}

.rop-step__name {
    display: block;
    width: 100%;
    padding: 0 18px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--rop-title);
    text-align: center;
}

.rop-step__duration {
    margin-top: 0;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 700;
    color: #9dd7bf;
    line-height: 1.2;
    text-align: center;
}

.rop-step__duration i {
    font-size: 13px;
    line-height: 1;
}

.rop-step__status {
    margin-top: 0;
    width: 100%;
    font-size: 12px;
    font-weight: 700;
    color: var(--rop-text-soft);
    text-align: center;
}

.rop-step--locked {
    cursor: not-allowed;
}

.rop-step--locked .rop-step__name,
.rop-step--locked .rop-step__duration,
.rop-step--locked .rop-step__status {
    opacity: 0.88;
}

.rop-step--no-duration {
    gap: 2px;
}

.rop-step--no-duration .rop-step__status {
    margin-top: 0;
}

.rop-step--done {
    border-color: rgba(38, 99, 68, 0.58);
    background: #202b3c;
}

.rop-step--done::before {
    background: linear-gradient(90deg, #10b981, #34d399);
}

.rop-step--done .rop-step__icon {
    background: rgba(16, 193, 144, 0.2);
    color: #55f8c6;
}

.rop-step--done .rop-step__status {
    color: #61f4ca;
}

.rop-step--done .rop-step__duration {
    color: #5cf2c7;
}

.rop-step--current {
    border-color: rgba(99, 172, 255, 0.75);
    background: linear-gradient(145deg, rgba(11, 56, 104, 0.82), rgba(9, 46, 90, 0.8));
}

.rop-step--current::before {
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
}

.rop-step--pending::before {
    background: rgba(148, 163, 184, 0.35);
}

.rop-step--current .rop-step__icon {
    background: rgba(73, 151, 255, 0.2);
    color: #8bc2ff;
}

.rop-step--current .rop-step__status {
    color: #9bd0ff;
}

.rop-step--current .rop-step__duration {
    color: #95ccff;
}

.rop-step.is-selected {
    border-color: rgba(147, 197, 253, 0.92);
    overflow: visible !important;
}

.rop-step.is-selected::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    border: 1.5px solid rgba(147, 197, 253, 0.7);
    box-shadow: 0 0 5px rgba(147, 197, 253, 0.35);
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    animation: rop-step-water-wave 2.2s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;
}

@keyframes rop-step-water-wave {
    0% {
        inset: 0;
        border-radius: 12px;
        opacity: 0.8;
    }

    100% {
        inset: -12px;
        border-radius: 24px;
        /* 12px + 12px */
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rop-step.is-selected::after {
        animation: none !important;
    }
}

.repair-order-professional__wa-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 8px;
}

.repair-order-professional__wa-text {
    text-align: center;
}

.repair-order-professional__wa-title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--rop-title);
}

.repair-order-professional__wa-subtitle {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--rop-text-muted);
}

.repair-order-professional__wa-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 7px;
    background: #25d366;
    color: #fff;
    border: 1px solid #25d366;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    padding: 7px 11px;
    transition: background 0.2s ease, transform 0.1s ease;
    white-space: nowrap;
}

.repair-order-professional__wa-btn i {
    font-size: 20px;
    line-height: 1;
}

.repair-order-professional__wa-btn:hover,
.repair-order-professional__wa-btn:focus {
    color: #fff;
    background: #1ebe5c;
    border-color: #1ebe5c;
    transform: scale(1.02);
}

.repair-order-professional__wa-btn.is-disabled {
    pointer-events: none;
    opacity: 0.55;
    background: rgba(148, 163, 184, 0.35);
    border-color: rgba(148, 163, 184, 0.4);
}

body.rop-wa-modal-open {
    overflow: hidden;
}

body.rop-feedback-survey-open {
    overflow: hidden;
}

.rop-wa-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 11900;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(2, 5, 10, 0.76);
    backdrop-filter: blur(2px);
}

.rop-wa-modal.is-open {
    display: flex;
}

.rop-wa-modal__dialog {
    width: 100%;
    max-width: 640px;
    border: 1px solid #313846;
    border-radius: 16px;
    overflow: hidden;
    background: #161b22;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.rop-wa-modal__header {
    padding: 14px 16px;
    background: linear-gradient(135deg, color-mix(in srgb, #367FA9 20%, #000) 0%, #367FA9 100%) !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.rop-wa-modal__header-main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.rop-wa-modal__avatar {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #25d366;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rop-wa-modal__avatar i {
    font-size: 22px;
}

.rop-wa-modal__heading h5 {
    margin: 0;
    color: #f1f5f9;
    font-size: 24px;
    font-weight: 700;
}

.rop-wa-modal__heading p {
    margin: 2px 0 0;
    color: #e5e7eb;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rop-wa-modal__heading .rop-wa-modal__destination {
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: normal;
    overflow: visible;
}

.rop-wa-modal__destination i {
    color: #25d366;
    font-size: 14px;
}

.rop-wa-modal__destination b {
    color: #ffffff;
    font-weight: 700;
}

.rop-wa-modal__destination span {
    color: #ffffff;
    font-weight: 700;
}

.rop-wa-modal__close {
    border: 1px solid rgba(255, 255, 255, 0.12);
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: #e5e7eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rop-wa-modal__close i {
    font-size: 22px;
}

.rop-wa-modal__close:hover,
.rop-wa-modal__close:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #f1f5f9;
}

.rop-wa-modal__body {
    padding: 14px 16px 10px;
    background: #202733;
}

.rop-wa-modal__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.rop-wa-modal__chip {
    border-radius: 8px;
    border: 1px solid var(--rop-chip-border);
    background: var(--rop-chip-bg);
    color: var(--rop-text);
    padding: 6px 10px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.rop-wa-modal__chip i {
    color: var(--rop-title-accent);
    font-size: 14px;
}

.rop-wa-modal__chip b {
    color: var(--rop-title);
    font-weight: 700;
}

.rop-wa-modal__message-wrap {
    border: 1px solid #313846;
    border-radius: 12px;
    background: #242d39;
    padding: 10px;
}

.rop-wa-modal__message-label {
    margin: 0 0 8px;
    color: var(--rop-title);
    font-size: 13px;
    font-weight: 700;
    display: block;
}

.rop-wa-modal__message {
    width: 100%;
    min-height: 150px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background: #1e293b;
    color: #e5e7eb;
    font-size: 13px;
    line-height: 1.5;
    padding: 10px 12px;
    resize: vertical;
    outline: none;
}

.rop-wa-modal__message:focus {
    border-color: rgba(34, 211, 238, 0.8);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.15);
}

.rop-wa-modal__footer {
    padding: 12px 16px 16px;
    border-top: 1px solid #313846;
    background: #2c3646;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.rop-wa-modal__btn-cancel {
    border-color: rgba(255, 255, 255, 0.12);
    color: #e5e7eb;
    background: rgba(255, 255, 255, 0.05);
}

.rop-wa-modal__btn-cancel:hover,
.rop-wa-modal__btn-cancel:focus {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
}

.rop-wa-modal__btn-send {
    border-color: #059669;
    background: linear-gradient(135deg, #059669 0%, #34d399 100%);
    color: #fff;
    font-weight: 700;
}

.rop-wa-modal__btn-send i {
    font-size: 16px;
    margin-right: 4px;
}

.rop-feedback-modal .rop-wa-modal__dialog {
    max-width: 760px;
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
}

.rop-feedback-modal .rop-wa-modal__body {
    flex: 1 1 auto;
    max-height: calc(100vh - 230px);
    overflow-y: auto;
    overflow-x: hidden;
}

.rop-feedback-modal .rop-wa-modal__body::-webkit-scrollbar {
    width: 7px;
}

.rop-feedback-modal .rop-wa-modal__body::-webkit-scrollbar-track {
    background: rgba(148, 163, 184, 0.12);
}

.rop-feedback-modal .rop-wa-modal__body::-webkit-scrollbar-thumb {
    background: rgba(34, 211, 238, 0.45);
    border-radius: 8px;
}

.rop-feedback-modal__avatar {
    background: #fbbf24;
}

.rop-feedback-modal__form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rop-feedback-modal__row {
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    padding: 10px 12px;
}

.rop-feedback-modal__row--name {
    padding-bottom: 12px;
}

.rop-feedback-modal__label {
    margin: 0 0 8px;
    color: var(--rop-title);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
}

.rop-feedback-modal__label i {
    color: #67e8f9;
    font-size: 14px;
    line-height: 1;
}

.rop-feedback-modal__input,
.rop-feedback-modal__textarea {
    width: 100%;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.5);
    color: var(--rop-text);
    font-size: 13px;
    line-height: 1.45;
    padding: 9px 10px;
    outline: none;
}

.rop-feedback-modal__input:focus,
.rop-feedback-modal__textarea:focus {
    border-color: rgba(56, 189, 248, 0.6);
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.14);
}

.rop-feedback-modal__textarea {
    min-height: 120px;
    resize: vertical;
}

.rop-feedback-modal__options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.rop-feedback-modal__options--inline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rop-feedback-modal__option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.44);
    color: var(--rop-text);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.rop-feedback-modal__option input {
    margin: 0;
}

.rop-feedback-modal__option:hover,
.rop-feedback-modal__option:focus-within {
    border-color: rgba(56, 189, 248, 0.52);
    background: rgba(30, 41, 59, 0.7);
}

.rop-intro-stack .rop-card {
    margin-bottom: 12px;
}

.repair-order-professional__panels {
    position: relative;
}

.rop-step-panel {
    display: none;
}

.rop-step-panel.active {
    display: block;
}

.rop-card {
    border: 1px solid var(--rop-border) !important;
    border-radius: 8px;
    background: var(--rop-card-bg);
    margin-bottom: 12px;
}

.rop-card__title {
    margin: 0 0 10px;
    color: var(--rop-title);
    font-size: 15px;
    font-weight: 700;
}

.rop-card>.rop-card__title,
.rop-card--sectioned .rop-card__title {
    padding: 12px 14px 10px;
    border-bottom: 1px solid var(--rop-border);
    background: linear-gradient(180deg, rgba(29, 38, 54, 0.85) 0%, rgba(49, 55, 65, 0.78) 100%);
    border-radius: 11px 11px 0px 0px;
}

.rop-card--signatures .rop-card__title {
    background: linear-gradient(180deg, rgba(29, 38, 54, 0.85) 0%, rgba(49, 55, 65, 0.78) 100%);
    border-radius: 11px 11px 0px 0px;
}

.rop-card--sectioned>.rop-company,
.rop-card--sectioned>.rop-vehicle,
.rop-card--sectioned>.rop-insurance,
.rop-card--sectioned>.rop-photo-carousel,
.rop-card--sectioned>.rop-photo-grid,
.rop-card--sectioned>.rop-signatures,
.rop-card--sectioned>.rop-diagnostic-report__meta,
.rop-card--sectioned>.rop-empty {
    margin: 12px 14px 14px;
}

.rop-card--sectioned>.rop-note-textarea {
    display: block;
    width: calc(100% - 28px);
    margin: 12px 14px 14px;
}

.rop-card--sectioned>.rop-diagnostic-report__meta+.rop-note-textarea {
    margin-top: 0;
}

.rop-card__title i {
    color: #86bcff;
    font-size: 17px;
}

.repair-order-professional__timeline-head .repair-order-professional__timeline-id-label,
.repair-order-professional__timeline-head .repair-order-professional__timeline-date,
.repair-order-professional__timeline-head .repair-order-professional__timeline-state {
    color: #9ca3af;
}

.repair-order-professional__timeline-head .repair-order-professional__timeline-id-number,
.repair-order-professional__timeline-head .repair-order-professional__timeline-state strong {
    color: #f1f5f9;
}

.repair-order-professional__timeline-head .repair-order-professional__timeline-meta-label {
    color: #f1f5f9;
}

.repair-order-professional__timeline-head .repair-order-professional__timeline-meta-value {
    color: #c8d2df;
}

.repair-order-professional__timeline-head .repair-order-professional__timeline-meta-icon {
    color: #92a4bd;
}

.rop-grid {
    display: grid;
    gap: 12px;
}

.rop-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rop-company {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.rop-company__logo {
    width: 66px;
    min-width: 66px;
    height: 66px;
    border-radius: 8px;
    border: 1px solid var(--rop-border);
    background: rgba(45, 79, 134, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9cc8ff;
    font-size: 28px;
}

.rop-company__logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.rop-company__info h5 {
    margin: 0 0 6px;
    color: var(--rop-title);
    font-size: 16px;
    font-weight: 700;
}

.rop-company__info p {
    margin: 0 0 4px;
    color: var(--rop-text-soft);
    font-size: 12px;
}

.rop-company__details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 18px;
}

.rop-company__col p:last-child {
    margin-bottom: 0;
}

.rop-company__phone-link {
    color: #5ec8ff;
    text-decoration: none;
}

.rop-company__phone-link:hover,
.rop-company__phone-link:focus {
    color: #87daff;
    text-decoration: underline;
}

.rop-company__phone-separator {
    color: var(--rop-text-soft);
    padding: 0 4px;
}

.rop-company__info b,
.rop-vehicle p b,
.rop-insurance p b,
.rop-totals span,
.rop-service-card__meta b {
    color: var(--rop-text);
    font-weight: 600;
}

.rop-vehicle {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 142px;
    gap: 14px;
    align-items: start;
}

.rop-vehicle__photo {
    width: 68px;
    height: 68px;
    border-radius: 8px;
    border: 1px solid var(--rop-border);
    background: rgba(45, 79, 134, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9cc8ff;
    font-size: 26px;
    overflow: hidden;
}

.rop-vehicle__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rop-vehicle__list p {
    margin: 0 0 5px;
    color: var(--rop-text-soft);
    font-size: 12px;
}

.rop-vehicle__qr {
    border: 1px solid var(--rop-border);
    border-radius: 10px;
    background: rgba(9, 19, 39, 0.45);
    padding: 8px;
    text-align: center;
}

.rop-vehicle__qr img {
    width: 104px;
    height: 104px;
    object-fit: contain;
    display: block;
    margin: 0 auto 4px;
    background: #fff;
    border-radius: 6px;
    padding: 0px;
}

.rop-vehicle__qr p {
    margin: 0;
    color: var(--rop-text-soft);
    font-size: 11px;
}

.rop-insurance {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
}

.rop-insurance p {
    margin: 0;
    color: var(--rop-text-soft);
    font-size: 12px;
}

.rop-photo-carousel {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

.rop-photo-carousel__viewport {
    overflow: hidden;
    border-radius: 12px;
}

.rop-photo-carousel__track {
    display: flex;
    gap: 16px;
    align-items: stretch;
    will-change: transform;
}

.rop-photo-carousel__item {
    width: 200px;
    min-width: 200px;
    display: block;
    border: 1px solid var(--rop-border);
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    background: rgba(7, 15, 30, 0.38);
    transition: transform 0.25s ease;
}

.rop-photo-carousel__item:hover {
    transform: scale(1.03);
}

.rop-photo-carousel__item img {
    width: 100%;
    height: 140px;
    object-fit: cover;
}


.rop-photo-carousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.62);
    color: #f8fafc;
    box-shadow: 0 8px 18px rgba(2, 6, 23, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.25s ease;
}

.rop-photo-carousel__arrow i {
    font-size: 22px;
}

.rop-photo-carousel__arrow--left {
    left: 10px;
}

.rop-photo-carousel__arrow--right {
    right: 10px;
}

.rop-photo-carousel.is-interactive .rop-photo-carousel__arrow {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.rop-photo-carousel.is-interactive .rop-photo-carousel__arrow:hover {
    background: rgba(15, 23, 42, 0.82);
    border-color: rgba(255, 255, 255, 0.7);
    transform: translateY(-50%) scale(1.08);
}

.rop-photo-carousel.is-static .rop-photo-carousel__arrow {
    display: none;
}

body.rop-photo-viewer-open {
    overflow: hidden;
}

.rop-photo-viewer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 12000;
    background: rgba(2, 5, 10, 0.76);
    backdrop-filter: blur(2px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 42px 84px;
}

.rop-photo-viewer.is-open {
    display: flex;
}

.rop-photo-viewer__content {
    max-width: 1220px;
    width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.rop-photo-viewer__content img {
    max-width: 100%;
    max-height: calc(100vh - 138px);
    border-radius: 12px;
    box-shadow: 0 20px 54px rgba(0, 0, 0, 0.5);
    background: #0b1322;
    object-fit: contain;
}

.rop-photo-viewer__counter {
    color: #eef3ff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    border-radius: 8px;
    padding: 5px 12px;
    background: rgba(28, 42, 66, 0.78);
    border: 1px solid rgba(189, 212, 251, 0.24);
}

.rop-photo-viewer__close {
    position: absolute;
    top: 18px;
    right: 20px;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.rop-photo-viewer__close i {
    font-size: 28px;
}

.rop-photo-viewer__close:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

.rop-photo-viewer__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 58px;
    height: 58px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.rop-photo-viewer__nav i {
    font-size: 34px;
}

.rop-photo-viewer__nav--prev {
    left: 22px;
}

.rop-photo-viewer__nav--next {
    right: 22px;
}

.rop-photo-viewer__nav:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-50%) scale(1.05);
}

.rop-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.rop-photo-item {
    display: block;
    border: 1px solid var(--rop-border);
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    background: rgba(7, 15, 30, 0.38);
}

.rop-photo-item img {
    width: 100%;
    height: 120px;
    object-fit: cover;
}

#ropDamagePhotos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
}

#ropDamagePhotos .rop-photo-item {
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    width: 100%;
    padding: 8px;
    min-height: 360px;
}

#ropDamagePhotos .rop-photo-item img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 344px;
    object-fit: contain;
    border-radius: 8px;
    background: #ffffff;
}

#ropDamagePhotos .rop-photo-item:only-child {
    grid-column: auto;
    justify-self: center;
    width: 100%;
    max-width: 760px;
    min-height: 300px;
}

#ropDamagePhotos .rop-photo-item:only-child img {
    min-height: 284px;
    max-height: 430px;
}


.rop-empty {
    margin-top: 8px;
    color: var(--rop-text-muted);
    font-size: 12px;
}

.rop-empty-inline {
    color: var(--rop-text-muted);
    font-size: 12px;
}

.rop-card--assets {
    padding: 0;
    overflow: hidden;
}

.rop-card__head--assets {
    padding: 12px 14px 10px;
    border-bottom: 1px solid var(--rop-border);
    background: linear-gradient(180deg, rgba(29, 38, 54, 0.85) 0%, rgba(49, 55, 65, 0.78) 100%);
}

.rop-card__head--assets .rop-card__title {
    margin: 0 0 8px;
}

.rop-card--assets .rop-assets-grid {
    padding: 12px 14px;
}

.rop-card--assets .rop-empty {
    margin-top: 0;
    padding: 0 14px 12px;
}

.rop-assets-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 12px;
}

.rop-assets-legend span {
    color: var(--rop-text-soft);
}

.rop-assets-legend .ok i,
.rop-asset-item.ok i {
    color: var(--rop-success);
}

.rop-assets-legend .warn i,
.rop-asset-item.warn i {
    color: var(--rop-warning);
}

.rop-assets-legend .bad i,
.rop-asset-item.bad i {
    color: var(--rop-danger);
}

.rop-assets-legend .none i,
.rop-asset-item.none i {
    color: #9aa7c5;
}

.rop-card__head--assets .rop-assets-legend {
    margin-bottom: 0;
}

.rop-assets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
}

.rop-asset-item {
    border: 1px solid var(--rop-border);
    border-radius: 9px;
    background: rgba(11, 20, 38, 0.35);
    padding: 8px 10px;
    color: var(--rop-text-soft);
    font-size: 12px;
}

.rop-note {
    margin: 0;
    color: var(--rop-text-soft);
    font-size: 13px;
    line-height: 1.55;
    white-space: pre-wrap;
}

.rop-diagnostic-report__meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 0 0 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--rop-border);
}

.rop-diagnostic-report__meta-item {
    min-width: 0;
}

.rop-diagnostic-report__meta-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--rop-text-soft);
    font-size: 12px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.1px;
    margin-bottom: 4px;
}

.rop-diagnostic-report__meta-value {
    display: block;
    color: var(--rop-title);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
}

.rop-diagnostic-report__meta-label i {
    color: var(--rop-info);
    font-size: 14px;
    line-height: 1;
}

.rop-diagnostic-report__meta-label-colon {
    color: var(--rop-text-soft);
    font-weight: 700;
}

.rop-note-textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 96px;
    border: 1px solid var(--rop-border);
    border-radius: 10px;
    background: rgba(8, 18, 36, 0.4);
    color: var(--rop-text);
    font-size: 14px;
    line-height: 1.6;
    padding: 14px 16px;
    resize: none;
    outline: 0;
}

.rop-note-textarea[readonly] {
    cursor: default;
}

.rop-note-textarea--report {
    min-height: 170px;
}

.rop-signatures {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.rop-signatures p {
    color: var(--rop-text-soft);
    font-size: 12px;
    margin: 0 0 6px;
}

.rop-signature-box {
    border: 1px solid var(--rop-border);
    border-radius: 9px;
    min-height: 170px;
    background: rgba(8, 16, 31, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.rop-signature-box img {
    max-width: 96%;
    width: auto;
    max-height: 150px;
    background: #fff;
    border-radius: 6px;
}

#ropClientSignatureWrap img,
#ropBudgetClientSignatureWrap img {
    background: #ffffff;
    filter: grayscale(1) contrast(3) brightness(0.95);
}

.rop-signature-missing {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 1px dashed var(--rop-border);
    border-radius: 8px;
    color: var(--rop-text-muted);
    background: rgba(67, 98, 148, 0.12);
}

.rop-signature-missing i {
    font-size: 24px;
    line-height: 1;
}

.rop-signature-missing__badge {
    position: absolute;
    right: -6px;
    bottom: -4px;
    font-size: 16px !important;
    color: var(--rop-danger);
    background: var(--rop-surface-bg);
    border-radius: 8px;
}

.rop-service-card {
    border: 1px solid var(--rop-border);
    border-radius: 10px;
    background: rgba(7, 15, 30, 0.34);
    padding: 11px;
    margin-bottom: 10px;
}

.rop-service-card__head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.rop-service-card__head h6 {
    margin: 0;
    color: var(--rop-title);
    font-size: 14px;
    font-weight: 700;
}

.rop-service-card__head p {
    margin: 4px 0 0;
    color: var(--rop-text-soft);
    font-size: 12px;
}

.rop-status-badge {
    display: inline-block;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
    white-space: nowrap;
}

.rop-status-badge.status-1 {
    background: rgba(245, 190, 58, 0.2);
    color: #ffd77a;
}

.rop-status-badge.status-2 {
    background: rgba(34, 197, 255, 0.2);
    color: #9ee6ff;
}

.rop-status-badge.status-3 {
    background: rgba(35, 211, 166, 0.2);
    color: #9af4da;
}

.rop-service-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    color: var(--rop-text-soft);
    font-size: 12px;
    margin-bottom: 7px;
}

.rop-approval-toggle {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 8px;
}

.rop-approval-toggle label {
    margin: 0;
    color: var(--rop-text-soft);
    font-size: 12px;
    font-weight: 600;
}

.rop-approval-toggle input {
    margin-right: 4px;
}

.rop-subtitle {
    color: var(--rop-text);
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 6px;
}

.rop-card .table {
    color: var(--rop-text-soft);
    font-size: 12px;
}

.rop-card .table thead th {
    color: var(--rop-text);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-top: 0;
    border-bottom: 1px solid var(--rop-border);
    background: var(--rop-table-head);
}

.rop-card .table td {
    border-color: var(--rop-border);
}

.rop-totals {
    display: grid;
    gap: 6px;
    font-size: 13px;
    color: var(--rop-text-soft);
}

.rop-totals p {
    margin: 0;
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.rop-total-line {
    border-top: 1px dashed var(--rop-border);
    padding-top: 7px;
}

.rop-totals strong {
    color: var(--rop-title);
    font-weight: 700;
}

.rop-totals--border {
    margin-top: 10px;
    border-top: 1px solid var(--rop-border);
    padding-top: 10px;
}

.rop-approved-item {
    border: 1px solid var(--rop-border);
    border-radius: 8px;
    background: rgba(8, 16, 31, 0.33);
    padding: 8px 10px;
    color: var(--rop-text-soft);
    font-size: 12px;
    margin-bottom: 7px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.rop-approved-item strong {
    color: #bbf7e4;
}

.rop-card--placeholder p {
    margin: 0;
    color: var(--rop-text-soft);
    font-size: 13px;
    line-height: 1.6;
}

.rop-badge-pending {
    display: inline-block;
    margin-top: 10px;
    border-radius: 8px;
    border: 1px solid rgba(245, 190, 58, 0.5);
    background: rgba(245, 190, 58, 0.18);
    color: #ffe39f;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
}

body.light-mode .repair-order-professional {
    --rop-page-bg: #f4f6f9;
    --rop-surface-bg: #ffffff;
    --rop-card-bg: #ffffff;
    --rop-border: #dee2e6;
    --rop-title: #2d3748;
    --rop-title-accent: #448aff;
    --rop-text: #2f3c4d;
    --rop-text-soft: #495057;
    --rop-text-muted: #6c757d;
    --rop-chip-bg: #f1f5f9;
    --rop-chip-border: #dee2e6;
    --rop-table-head: #ffffff;
    --rop-row-head-bg: #f7fbff;
    --rop-row-zebra-odd: #ffffff;
    --rop-row-zebra-even: #eaeaea;
    --rop-success: #28a745;
    --rop-danger: #ef4444;
    --rop-warning: #ffc107;
    --rop-info: #3b82f6;
}

body.light-mode .repair-order-professional__actions ._email {
    color: #245ca8;
}

body.light-mode .repair-order-professional__actions .download_g {
    color: #118f73;
}

body.light-mode .repair-order-professional__actions ._print {
    color: #936700;
}

body.light-mode .repair-order-professional__stat-card--reminder {
    background: #ffffff;
}

body.light-mode .repair-order-professional__stat-popover-count-badge {
    background: rgba(59, 130, 246, 0.14);
    color: #1d4ed8;
    border-color: rgba(59, 130, 246, 0.26);
}

body.light-mode .rop-reminder-popover-popover {
    border-color: #dee2e6;
    background: #ffffff;
}

body.light-mode .rop-reminder-popover-popover .popover-content {
    color: #2f3c4d;
}

body.light-mode .rop-reminder-popover__title,
body.light-mode .rop-reminder-popover__row strong,
body.light-mode .rop-reminder-popover__next span {
    color: #2d3748;
}

body.light-mode .rop-reminder-popover__row,
body.light-mode .rop-reminder-popover__next {
    color: #495057;
}

body.light-mode .rop-reminder-popover__next {
    border-top-color: #dee2e6;
}

body.light-mode .rop-card>.rop-card__title,
body.light-mode .rop-card--sectioned .rop-card__title,
body.light-mode .rop-card--signatures .rop-card__title,
body.light-mode .rop-card__head--assets {
    border-bottom: 1px solid var(--rop-border);
    background: linear-gradient(180deg, #f7fafc 0%, #e9eef5 100%);
    border-radius: 8px 11px 0px 0px;
}

body.light-mode .repair-order-professional__timeline-head,
body.light-mode .repair-order-professional__step-topbar {
    border-bottom: 1px solid var(--rop-border);
    background: transparent;
}

body.light-mode .repair-order-professional__step-title,
body.light-mode .repair-order-professional__timeline-head .repair-order-professional__timeline-id-label,
body.light-mode .repair-order-professional__timeline-head .repair-order-professional__timeline-date,
body.light-mode .repair-order-professional__timeline-head .repair-order-professional__timeline-meta-label,
body.light-mode .repair-order-professional__timeline-head .repair-order-professional__timeline-state {
    color: #334155;
}

body.light-mode .repair-order-professional__timeline-head .repair-order-professional__timeline-id-number,
body.light-mode .repair-order-professional__timeline-head .repair-order-professional__timeline-meta-value,
body.light-mode .repair-order-professional__timeline-head .repair-order-professional__timeline-state strong {
    color: #475569;
}

body.light-mode .repair-order-professional__timeline-head .repair-order-professional__timeline-meta-icon,
body.light-mode .rop-card__title i {
    color: #448aff;
}

body.light-mode .repair-order-professional__step-complete {
    border-color: rgba(148, 163, 184, 0.52);
    background: rgba(226, 232, 240, 0.96);
    color: #475569;
}

body.light-mode .rop-step {
    background: #ffffff;
}

body.light-mode .rop-step__icon {
    background: rgba(58, 95, 157, 0.12);
    color: #2e64b0;
}

body.light-mode .rop-step__duration {
    color: #4b5563;
}

body.light-mode .rop-step__name,
body.light-mode .rop-step__status {
    color: #3f4958;
}

body.light-mode .rop-step--done {
    background: #ffffff;
    border-color: #65da8880;
}

body.light-mode .rop-step--done .rop-step__name,
body.light-mode .rop-step--done .rop-step__status,
body.light-mode .rop-step--done .rop-step__duration {
    color: #3f4958;
}

body.light-mode .rop-step--current {
    background: #ffffff;
    border-color: rgba(62, 127, 224, 0.42);
}

body.light-mode .rop-step--current .rop-step__name,
body.light-mode .rop-step--current .rop-step__status,
body.light-mode .rop-step--current .rop-step__duration {
    color: #3f4958;
}

body.light-mode .rop-step.is-selected {
    border-color: rgba(37, 99, 235, 0.75);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.28), 0 8px 18px rgba(15, 23, 42, 0.12);
}

body.light-mode .rop-step.is-selected::after {
    border-color: rgba(59, 130, 246, 0.5);
}

body.light-mode .rop-photo-carousel__arrow {
    background: rgba(255, 255, 255, 0.96);
    border-color: #b9c8d8;
    color: #334155;
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.14);
}

body.light-mode .rop-photo-carousel.is-interactive .rop-photo-carousel__arrow:hover {
    background: #ffffff;
    border-color: #8ea7bf;
    color: #1f2937;
}

body.light-mode .rop-card,
body.light-mode .rop-service-card,
body.light-mode .rop-asset-item,
body.light-mode .rop-photo-carousel__item,
body.light-mode .rop-photo-item,
body.light-mode .rop-approved-item,
body.light-mode .rop-signature-box,
body.light-mode .rop-vehicle__qr {
    background: #ffffff;
}

body.light-mode .rop-note-textarea {
    background: #f8fbff;
    color: var(--rop-text);
}

body.light-mode .rop-company__phone-link {
    color: #1c66c6;
}

body.light-mode .rop-company__phone-link:hover,
body.light-mode .rop-company__phone-link:focus {
    color: #0f4ea4;
}

body.light-mode .rop-approved-item strong {
    color: #0e7458;
}

body.light-mode .rop-wa-modal__dialog {
    background: #ffffff;
    border-color: #dee2e6;
}

body.light-mode .rop-wa-modal__header {
    background: linear-gradient(135deg, #448aff 0%, #60a5fa 100%);
}

body.light-mode .rop-wa-modal__heading h5,
body.light-mode .rop-wa-modal__heading p {
    color: #ffffff;
}

body.light-mode .rop-wa-modal__destination b,
body.light-mode .rop-wa-modal__destination span {
    color: #ffffff;
}

body.light-mode .rop-wa-modal__close {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

body.light-mode .rop-wa-modal__close:hover,
body.light-mode .rop-wa-modal__close:focus {
    background: rgba(255, 255, 255, 0.32);
    border-color: rgba(255, 255, 255, 0.45);
}

body.light-mode .rop-wa-modal__body {
    background: #ffffff;
}

body.light-mode .rop-wa-modal__chip {
    background: #f1f5f9;
    border-color: #dee2e6;
}

body.light-mode .rop-wa-modal__message-wrap {
    background: #f8f9fa;
    border-color: #dee2e6;
}

body.light-mode .rop-wa-modal__message {
    background: #ffffff;
    color: var(--rop-text);
    border-color: #ced4da;
}

body.light-mode .rop-wa-modal__footer {
    background: #f8f9fa;
    border-top-color: #dee2e6;
}

body.light-mode .rop-wa-modal__btn-cancel {
    background: #ffffff;
    color: #495057;
    border-color: #ced4da;
}

body.light-mode .rop-wa-modal__btn-cancel:hover,
body.light-mode .rop-wa-modal__btn-cancel:focus {
    background: #e9ecef;
    color: #2f3c4d;
    border-color: #ced4da;
}

body.light-mode .rop-wa-modal__btn-send {
    background: linear-gradient(135deg, #28a745 0%, #34d399 100%);
    border-color: #28a745;
}

body.light-mode .rop-feedback-modal__row {
    background: #f8fafc;
    border-color: #dbe4f0;
}

body.light-mode .rop-feedback-modal__label {
    color: #1f2937;
}

body.light-mode .rop-feedback-modal__label i {
    color: #2563eb;
}

body.light-mode .rop-feedback-modal__input,
body.light-mode .rop-feedback-modal__textarea {
    background: #ffffff;
    border-color: #ced7e2;
    color: #1f2937;
}

body.light-mode .rop-feedback-modal__option {
    background: #ffffff;
    border-color: #d7e0ec;
    color: #334155;
}

body.light-mode .rop-feedback-modal__option:hover,
body.light-mode .rop-feedback-modal__option:focus-within {
    border-color: #7dd3fc;
    background: #f8fbff;
}

@media (max-width: 1199px) {
    .repair-order-professional__stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .repair-order-professional__step-track {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .rop-grid--2 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991px) {
    .repair-order-professional__hero {
        flex-direction: column;
        align-items: stretch;
    }

    .repair-order-professional__hero-right {
        margin-left: 0;
        align-items: flex-start;
        gap: 10px;
    }

    .repair-order-professional__breadcrumb {
        justify-content: flex-start;
    }

    .repair-order-professional__actions {
        justify-content: flex-start !important;
    }

    .repair-order-professional__timeline-head {
        flex-direction: column;
    }

    .repair-order-professional__timeline-main {
        width: 100%;
        display: block;
    }

    .repair-order-professional__timeline-id-block {
        padding-right: 0;
        margin-bottom: 10px;
    }

    .repair-order-professional__timeline-id-number {
        font-size: 20px;
    }

    .repair-order-professional__timeline-meta-item {
        padding: 0 14px 0 0;
        margin: 0 14px 8px 0;
    }

    .repair-order-professional__timeline-state {
        min-width: 0;
        text-align: left;
    }

    .repair-order-professional__timeline-state--whatsapp {
        justify-content: flex-start;
    }

    .repair-order-professional__step-topbar {
        flex-wrap: wrap;
    }

    .rop-vehicle {
        grid-template-columns: 1fr;
    }

    .rop-vehicle__qr {
        grid-column: auto;
        width: 100%;
        max-width: 180px;
        justify-self: center;
        margin-left: auto;
        margin-right: auto;
    }

    .rop-company__details {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .repair-order-professional__wa-bar {
        justify-content: flex-start;
    }

    .repair-order-professional__wa-text {
        text-align: left;
    }
}

@media (max-width: 767px) {
    .repair-order-professional__stats-grid {
        grid-template-columns: 1fr;
    }

    .repair-order-professional__step-track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rop-signatures {
        grid-template-columns: 1fr;
    }

    .rop-signature-box {
        min-height: 150px;
    }

    .rop-signature-box img {
        max-height: 130px;
    }

    .rop-insurance {
        grid-template-columns: 1fr;
    }

    .rop-diagnostic-report__meta {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .rop-vehicle__photo {
        margin: 0 auto;
    }

    .rop-company {
        flex-direction: column;
    }

    .rop-company__details {
        grid-template-columns: 1fr;
    }

    .repair-order-professional__timeline-id-number {
        font-size: 18px;
    }

    .repair-order-professional__timeline-meta-item {
        border-right: 0;
        padding: 0;
        margin: 0 0 8px 0;
        width: 48%;
    }

    .rop-photo-carousel__item {
        width: 150px;
        min-width: 150px;
    }

    .rop-photo-carousel__item img {
        height: 120px;
    }

    #ropDamagePhotos {
        grid-template-columns: 1fr;
    }

    #ropDamagePhotos .rop-photo-item {
        min-height: 300px;
    }

    #ropDamagePhotos .rop-photo-item img {
        min-height: 280px;
    }

    .repair-order-professional__title {
        font-size: 23px;
    }

    .rop-wa-modal {
        padding: 10px;
    }

    .rop-wa-modal__header {
        padding: 12px;
    }

    .rop-wa-modal__heading h5 {
        font-size: 18px;
    }

    .rop-wa-modal__chips {
        gap: 6px;
    }

    .rop-wa-modal__chip {
        width: 100%;
        border-radius: 10px;
    }

    .rop-wa-modal__footer {
        flex-direction: column-reverse;
    }

    .rop-wa-modal__footer .btn {
        width: 100%;
    }

    .rop-feedback-modal__options,
    .rop-feedback-modal__options--inline {
        grid-template-columns: 1fr;
    }

    .rop-feedback-modal .rop-wa-modal__dialog {
        max-height: calc(100vh - 20px);
    }

    .rop-feedback-modal .rop-wa-modal__body {
        max-height: calc(100vh - 200px);
    }

    .rop-photo-viewer {
        padding: 24px 56px;
    }

    .rop-photo-viewer__nav {
        width: 48px;
        height: 48px;
    }

    .rop-photo-viewer__nav i {
        font-size: 28px;
    }

    .rop-photo-viewer__nav--prev {
        left: 8px;
    }

    .rop-photo-viewer__nav--next {
        right: 8px;
    }
}

@media (max-width: 520px) {
    .repair-order-professional__container {
        padding-top: 16px;
    }

    .repair-order-professional__step-track {
        grid-template-columns: 1fr;
    }

    .rop-step {
        min-height: 124px;
    }

    .repair-order-professional__timeline-meta-item {
        width: 100%;
    }

    .rop-photo-carousel__item {
        width: 120px;
        min-width: 120px;
    }

    .rop-photo-carousel__item img {
        height: 100px;
    }

    #ropDamagePhotos .rop-photo-item {
        min-height: 250px;
        padding: 10px;
    }

    #ropDamagePhotos .rop-photo-item img {
        min-height: 230px;
    }

    .rop-photo-viewer {
        padding: 18px 44px;
    }

    .rop-photo-viewer__content img {
        max-height: calc(100vh - 112px);
        border-radius: 10px;
    }

    .rop-photo-viewer__close {
        top: 10px;
        right: 10px;
        width: 38px;
        height: 38px;
    }

    .rop-photo-viewer__close i {
        font-size: 24px;
    }

    .rop-photo-viewer__nav {
        width: 40px;
        height: 40px;
    }

    .rop-photo-viewer__nav i {
        font-size: 24px;
    }
}

/* Typography Standard (forced) */
.repair-order-professional__title,
.repair-order-professional__timeline-id-number,
.repair-order-professional__stat-value,
.repair-order-professional__stat-main {
    font-size: var(--rop-fs-3xl) !important;
}

.repair-order-professional__stat-secondary {
    font-size: var(--rop-fs-xl) !important;
}

.repair-order-professional__stat-separator,
.repair-order-professional__icon,
.repair-order-professional__wa-btn i {
    font-size: var(--rop-fs-lg) !important;
}

.repair-order-professional__stat-label,
.repair-order-professional__wa-title,
.repair-order-professional__wa-btn,
.repair-order-professional__timeline-state strong,
.rop-card__title,
.rop-company__info h5,
.rop-service-card__head h6,
.rop-note-textarea {
    font-size: var(--rop-fs-md) !important;
}

.repair-order-professional__step-complete,
.repair-order-professional__timeline-meta-label,
.rop-note,
.rop-card--placeholder p,
.rop-totals,
.rop-service-card__meta {
    font-size: var(--rop-fs-sm) !important;
}

.rop-step__name {
    font-size: 12px !important;
    font-weight: 600 !important;
}

.rop-step__duration,
.rop-step__status {
    font-size: 11px !important;
    font-weight: 600 !important;
}

.repair-order-professional__breadcrumb .breadcrumb-item,
.repair-order-professional__breadcrumb .breadcrumb-item a,
.repair-order-professional__stat-actions .badge,
.repair-order-professional__stat-note,
.repair-order-professional__stat-popover-btn,
.repair-order-professional__services-counter,
.repair-order-professional__quote-row,
.repair-order-professional__timeline-id-label,
.repair-order-professional__timeline-date,
.repair-order-professional__timeline-state,
.repair-order-professional__step-title,
.repair-order-professional__wa-subtitle,
.rop-company__info p,
.rop-vehicle__list p,
.rop-insurance p,
.rop-assets-legend,
.rop-asset-item,
.rop-empty,
.rop-empty-inline,
.rop-service-card__head p,
.rop-approval-toggle label,
.rop-subtitle,
.rop-card .table,
.rop-approved-item,
.rop-signatures p,
.rop-card__meta,
.rop-photo-caption,
.repair-order-professional p,
.repair-order-professional li {
    font-size: var(--rop-fs-xs) !important;
}

.repair-order-professional__pill,
.repair-order-professional__placeholder,
.rop-step__index,
.rop-status-badge,
.rop-card .table thead th,
.rop-vehicle__qr p,
.rop-badge-pending {
    font-size: var(--rop-fs-2xs) !important;
}

@media (max-width: 767px) {

    .repair-order-professional__title,
    .repair-order-professional__timeline-id-number,
    .repair-order-professional__stat-value,
    .repair-order-professional__stat-main {
        font-size: var(--rop-fs-2xl) !important;
    }
}

.rop-card--budget-shell,
.rop-card--ready-shell,
.rop-card--quality-table,
.rop-card--panel-body {
    overflow: hidden;
}

.rop-card--budget-signatures .rop-card__title,
.rop-card--quality-table .rop-card__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 18px 22px 14px;
}

.rop-card__title--sectionbar {
    margin: 0;
    padding: 14px 18px;
    border-bottom: 1px solid var(--rop-border);
    color: var(--rop-title);
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.rop-card__title--budget-order-details {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.rop-card__title-main {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.rop-budget-approve-all-btn {
    border: 1px solid rgba(34, 197, 94, 0.5);
    background: rgba(34, 197, 94, 0.14);
    color: #86efac;
    border-radius: 10px;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
}

.rop-budget-approve-all-btn:hover {
    background: rgba(34, 197, 94, 0.2);
}

.rop-budget-approve-all-btn[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

.rop-card__section-body {
    padding: 20px 22px;
}

.pres-estados-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 20px 14px;
    margin: 0;
    border-top: 2px solid #38bdf8;
    border-bottom: 1px solid var(--rop-border);
    color: #7dd3fc;
    font-size: 13px;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.pres-estados-title i {
    font-size: 16px;
}

.pres-estados-title--approved {
    color: #4ade80;
    border-top-color: #22c55e;
}

.pres-estados-title--rejected {
    color: #fda4af;
    border-top-color: rgba(244, 114, 182, 0.55);
    background: rgba(190, 24, 93, 0.08);
}

.pres-estados-title--products {
    color: #93c5fd;
    border-top-color: #60a5fa;
}

.pres-servicio-block {
    border-bottom: 1px solid var(--rop-border);
}

.pres-standalone-section {
    border-top: 1px solid var(--rop-border);
}

.pres-servicio-row {
    display: grid;
    grid-template-columns: 42px minmax(220px, 1.3fr) minmax(130px, 0.95fr) minmax(96px, auto) minmax(128px, auto) minmax(128px, auto) minmax(220px, 1fr);
    gap: 18px;
    align-items: center;
    padding: 14px 20px;
    background: var(--rop-row-zebra-odd);
}

#ropBudgetServicesStack>.pres-servicio-block:nth-child(odd) .pres-servicio-row:not(.pres-servicio-row--labels),
#ropReadyPickupServicesStack>.pres-servicio-block:nth-child(odd) .pres-servicio-row:not(.pres-servicio-row--labels) {
    background: var(--rop-row-zebra-odd);
}

#ropBudgetServicesStack>.pres-servicio-block:nth-child(even) .pres-servicio-row:not(.pres-servicio-row--labels),
#ropReadyPickupServicesStack>.pres-servicio-block:nth-child(even) .pres-servicio-row:not(.pres-servicio-row--labels) {
    background: var(--rop-row-zebra-even);
}

.pres-servicio-row--compact {
    grid-template-columns: 42px minmax(220px, 1.3fr) minmax(130px, 0.95fr) minmax(96px, auto) minmax(128px, auto) minmax(128px, auto);
}

.pres-servicio-row--budget-no-operational {
    grid-template-columns: 42px minmax(280px, 1.55fr) minmax(96px, auto) minmax(136px, auto) minmax(136px, auto) minmax(250px, 1fr);
}

.pres-servicio-row--budget-no-operational-no-approval {
    grid-template-columns: 42px minmax(280px, 1.55fr) minmax(96px, auto) minmax(136px, auto) minmax(136px, auto);
}

.pres-servicio-row--ready {
    grid-template-columns: 42px minmax(250px, 1.3fr) minmax(130px, 0.9fr) minmax(170px, 1fr) minmax(96px, auto) minmax(136px, auto) minmax(136px, auto);
}

.pres-servicio-row--headline {
    background: rgba(56, 189, 248, 0.08);
}

.pres-servicio-row--labels {
    padding-top: 12px;
    padding-bottom: 12px;
    background: var(--rop-row-head-bg);
    border-bottom: 1px solid var(--rop-border);
}

.pres-servicio-row--labels .pres-svc-head:nth-child(3),
.pres-servicio-row--labels .pres-svc-head:nth-child(4),
.pres-servicio-row--labels .pres-svc-head:nth-child(5) {
    justify-content: center;
}

.pres-servicio-row--budget-no-operational .pres-svc-col:nth-child(3) {
    text-align: center;
}

.pres-servicio-row--budget-no-operational .pres-svc-col:nth-child(4),
.pres-servicio-row--budget-no-operational .pres-svc-col:nth-child(5) {
    text-align: right;
}

.pres-servicio-row--labels.pres-servicio-row--ready .pres-svc-head:nth-child(3) {
    justify-content: center;
}

.pres-servicio-row--labels.pres-servicio-row--ready .pres-svc-head:nth-child(4) {
    justify-content: flex-start;
}

.pres-servicio-row--labels.pres-servicio-row--ready .pres-svc-head:nth-child(5) {
    justify-content: center;
}

.pres-servicio-row--labels.pres-servicio-row--ready .pres-svc-head:nth-child(6),
.pres-servicio-row--labels.pres-servicio-row--ready .pres-svc-head:nth-child(7) {
    justify-content: flex-end;
}

.pres-servicio-row--ready .pres-svc-col--state {
    text-align: center;
}

.pres-servicio-row--ready .pres-svc-col:nth-child(5) {
    text-align: center;
}

.pres-servicio-row--ready .pres-svc-col:nth-child(6),
.pres-servicio-row--ready .pres-svc-col:nth-child(7) {
    text-align: right;
}

.pres-avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, #2563eb, #38bdf8);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pres-avatar.sm {
    width: 24px;
    height: 24px;
    font-size: 10px;
}

.pres-svc-name {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
    font-weight: 500;
    color: #f2f7ff;
}

.pres-svc-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.35px;
    text-transform: uppercase;
    color: #dbe7f5;
}

.pres-svc-head i {
    color: #7dd3fc;
    font-size: 14px;
}

.pres-svc-head--icon {
    justify-content: center;
}

.pres-svc-head--approval {
    justify-content: flex-end;
}

.pres-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 8px;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid transparent;
}

.pres-badge--help {
    cursor: help;
}

.pres-badge.approved {
    background: rgba(34, 197, 94, 0.14);
    border-color: rgba(34, 197, 94, 0.3);
    color: #6ee7b7;
}

.pres-badge.rejected {
    background: rgba(244, 63, 94, 0.14);
    border-color: rgba(244, 63, 94, 0.3);
    color: #fda4af;
}

.pres-badge.working {
    background: rgba(234, 179, 8, 0.14);
    border-color: rgba(234, 179, 8, 0.3);
    color: #fde68a;
}

.pres-badge.finished {
    background: rgba(56, 189, 248, 0.14);
    border-color: rgba(56, 189, 248, 0.3);
    color: #7dd3fc;
}

.pres-badge.pending {
    background: rgba(148, 163, 184, 0.14);
    border-color: rgba(148, 163, 184, 0.3);
    color: #cbd5e1;
}

.pres-svc-mecanico,
.pres-svc-col {
    font-size: 12px;
    color: var(--rop-text);
    font-weight: 600;
}

.pres-svc-mecanico {
    color: var(--rop-text-soft);
}

.pres-svc-aprobacion {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 6px;
    min-width: 230px;
}

.pres-svc-aprobacion--badge-only {
    min-width: 120px;
}

.pres-svc-aprobacion--badge-only .pres-badge {
    margin-left: auto;
}

.pres-approval-options {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: nowrap;
    width: auto;
    white-space: nowrap;
}

.pres-approval-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    flex: 0 0 auto;
}

.pres-table-approval-head .rop-table-head {
    justify-content: flex-end;
    width: 100%;
}

.pres-table-approval-cell {
    text-align: right;
    white-space: nowrap;
}

.pres-table-approval-cell .pres-svc-aprobacion {
    justify-content: flex-end;
    width: 100%;
    min-width: 210px;
}

.pres-toggle {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 18px;
    margin: 0;
}

.pres-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.pres-slider {
    position: absolute;
    inset: 0;
    border-radius: 8px;
    background: rgba(203, 213, 225, 0.7);
    cursor: pointer;
    transition: background 0.2s ease;
}

.pres-slider::before {
    content: '';
    position: absolute;
    top: 2.5px;
    left: 2.5px;
    width: 13px;
    height: 13px;
    border-radius: 8px;
    background: #fff;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.pres-toggle input:checked+.pres-slider.green,
.pres-toggle.active-green .pres-slider.green {
    background: #10b981;
}

.pres-toggle input:checked+.pres-slider.red,
.pres-toggle.active-red .pres-slider.red {
    background: #ef4444;
}

.pres-toggle input:checked+.pres-slider::before,
.pres-toggle.active-green .pres-slider::before,
.pres-toggle.active-red .pres-slider::before {
    transform: translateX(16px);
}

.pres-toggle-label {
    color: var(--rop-text-soft);
    font-size: 11px;
    font-weight: 700;
    margin-right: 0;
    white-space: nowrap;
}

.pres-lock-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 18px;
    padding: 2px 7px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.2px;
    border: 1px solid transparent;
    margin-left: 0;
}

.pres-lock-chip--editable {
    color: #90f6cb;
    background: rgba(16, 185, 129, 0.18);
    border-color: rgba(16, 185, 129, 0.38);
}

.pres-lock-chip--locked {
    color: #ffd9ae;
    background: rgba(245, 158, 11, 0.2);
    border-color: rgba(245, 158, 11, 0.45);
}

.pres-svc-aprobacion.is-locked .pres-toggle {
    cursor: not-allowed;
}

.pres-svc-aprobacion.is-locked .pres-toggle-label {
    color: #a8b4ca;
}

.pres-svc-aprobacion.is-locked .pres-slider {
    cursor: not-allowed;
    box-shadow: inset 0 0 0 1px rgba(254, 215, 170, 0.25);
}

.pres-svc-aprobacion.is-locked .pres-toggle input:checked+.pres-slider.green {
    background: #4f7f73;
}

.pres-svc-aprobacion.is-locked .pres-toggle.active-green .pres-slider.green {
    background: #4f7f73;
}

.pres-svc-aprobacion.is-locked .pres-toggle input:checked+.pres-slider.red {
    background: #8d5a5a;
}

.pres-svc-aprobacion.is-locked .pres-toggle.active-red .pres-slider.red {
    background: #8d5a5a;
}

.pres-productos-block {
    background: transparent;
    border-top: 1px solid rgba(148, 163, 184, 0.08);
}

.pres-productos-block--service {
    margin: 8px 18px 14px 54px;
    padding: 10px 12px 12px;
    border: 1px solid rgba(96, 165, 250, 0.24);
    border-left: 3px solid rgba(96, 165, 250, 0.78);
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.42);
}

.pres-productos-context {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    color: #bfdbfe;
    font-size: 12px;
    font-weight: 700;
}

.pres-productos-context i {
    color: #60a5fa;
}

.pres-productos-context strong {
    margin-left: auto;
    color: #e2e8f0;
    font-weight: 800;
}

.pres-productos-block .pres-table td {
    color: #deebff;
}

.pres-productos-block .pres-table td:nth-child(2) {
    color: #f4f8ff;
    font-weight: 500;
}

.pres-product-name-cell {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.pres-productos-title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
    color: var(--rop-text-soft);
    font-size: 12px;
    font-weight: 700;
}

.pres-table,
.pres-abonos-table,
.taller-table,
.taller-svc-table,
.cc-table {
    width: 100%;
    border-collapse: collapse;
}

.rop-workshop-parts-table-wrap,
.rop-workshop-services-table-wrap {
    max-height: 320px;
    overflow-y: auto;
    overflow-x: auto;
}

.rop-workshop-parts-table-wrap thead th,
.rop-workshop-services-table-wrap thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

.pres-table th,
.pres-abonos-table th,
.taller-table th,
.taller-svc-table th,
.cc-table th {
    padding: 11px 14px;
    border-bottom: 1px solid var(--rop-border);
    background: var(--rop-row-head-bg);
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 700;
    text-align: left;
}

.pres-table td,
.pres-abonos-table td,
.taller-table td,
.taller-svc-table td,
.cc-table td {
    padding: 14px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
    color: var(--rop-text);
    font-size: 13px;
    vertical-align: middle;
}

.pres-table th:nth-child(1),
.pres-table td:nth-child(1) {
    width: 64px;
}

.pres-table th:nth-child(3),
.pres-table td:nth-child(3) {
    width: 110px;
    text-align: center;
}

.pres-table th:nth-child(4),
.pres-table td:nth-child(4),
.pres-table th:nth-child(5),
.pres-table td:nth-child(5) {
    width: 160px;
    text-align: right;
}

.pres-table th:nth-child(6),
.pres-table td:nth-child(6) {
    width: 280px;
    min-width: 280px;
}

.pres-abonos-table th:nth-child(1),
.pres-abonos-table td:nth-child(1) {
    width: 11%;
}

.pres-abonos-table th:nth-child(2),
.pres-abonos-table td:nth-child(2) {
    width: 18%;
}

.pres-abonos-table th:nth-child(3),
.pres-abonos-table td:nth-child(3) {
    width: 15%;
}

.pres-abonos-table th:nth-child(4),
.pres-abonos-table td:nth-child(4),
.pres-abonos-table th:nth-child(5),
.pres-abonos-table td:nth-child(5),
.pres-abonos-table th:nth-child(6),
.pres-abonos-table td:nth-child(6) {
    width: 12%;
    text-align: right;
    white-space: nowrap;
}

.pres-abonos-table th:nth-child(7),
.pres-abonos-table td:nth-child(7) {
    width: 20%;
}

.taller-table th:nth-child(1),
.taller-table td:nth-child(1) {
    width: 38%;
}

.taller-table th:nth-child(2),
.taller-table td:nth-child(2) {
    width: 12%;
    text-align: center;
    white-space: nowrap;
}

.taller-table th:nth-child(3),
.taller-table td:nth-child(3) {
    width: 20%;
}

.taller-table th:nth-child(4),
.taller-table td:nth-child(4) {
    width: 30%;
}

.taller-svc-table th:nth-child(1),
.taller-svc-table td:nth-child(1) {
    width: 7%;
}

.taller-svc-table th:nth-child(2),
.taller-svc-table td:nth-child(2) {
    width: 37%;
}

.taller-svc-table th:nth-child(3),
.taller-svc-table td:nth-child(3) {
    width: 16%;
}

.taller-svc-table th:nth-child(4),
.taller-svc-table td:nth-child(4) {
    width: 20%;
}

.taller-svc-table th:nth-child(5),
.taller-svc-table td:nth-child(5) {
    width: 20%;
}

.cc-table th:nth-child(1),
.cc-table td:nth-child(1) {
    width: 6%;
}

.cc-table th:nth-child(2),
.cc-table td:nth-child(2) {
    width: 31%;
}

.cc-table th:nth-child(3),
.cc-table td:nth-child(3) {
    width: 19%;
}

.cc-table th:nth-child(4),
.cc-table td:nth-child(4) {
    width: 24%;
}

.cc-table th:nth-child(5),
.cc-table td:nth-child(5) {
    width: 20%;
}

.cc-photo-log {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.cc-photo-log__item {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(96, 165, 250, 0.3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.5);
}

.cc-photo-log__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cc-photo-log-empty {
    color: #a9b8cd;
    font-size: 12px;
    font-weight: 600;
}

.pres-table tbody tr:nth-child(odd) td,
.pres-abonos-table tbody tr:nth-child(odd) td,
.taller-table tbody tr:nth-child(odd) td,
.taller-svc-table tbody tr:nth-child(odd) td,
.cc-table tbody tr:nth-child(odd) td {
    background: var(--rop-row-zebra-odd);
}

.pres-table tbody tr:nth-child(even) td,
.pres-abonos-table tbody tr:nth-child(even) td,
.taller-table tbody tr:nth-child(even) td,
.taller-svc-table tbody tr:nth-child(even) td,
.cc-table tbody tr:nth-child(even) td {
    background: var(--rop-row-zebra-even);
}

.pres-product-thumb {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(148, 163, 184, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pres-product-thumb--clickable {
    cursor: zoom-in;
}

.pres-product-thumb--icon {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(96, 165, 250, 0.28);
    color: #93c5fd;
}

.pres-product-thumb--icon i {
    font-size: 18px;
}

.pres-product-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.pres-subtotal,
.pres-total-row,
.pres-resumen-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
    color: var(--rop-text-soft);
}

.pres-subtotal {
    margin-top: 12px;
    padding: 10px 14px 0;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
}

.pres-subtotal-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pres-subtotal-label i {
    color: #60a5fa;
}

.pres-subtotal--products {
    margin-top: 0;
}

.pres-subtotal strong,
.pres-total-row span,
.pres-resumen-row span {
    color: var(--rop-title);
    font-weight: 700;
}

.pres-totales-block,
.pres-resumen {
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.02);
}

.pres-totales-block {
    margin: 14px 20px 4px;
    max-width: 430px;
    margin-left: auto;
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
}

.rop-card--budget-summary {
    padding: 0;
}

.rop-card--budget-summary .rop-card__title {
    margin: 0;
    padding: 14px 20px 12px;
    border-bottom: 1px solid var(--rop-border);
    font-size: 14px;
}

.rop-card__title--budget-totals {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.rop-card__title-note {
    color: var(--rop-text-soft);
    font-size: 11px;
    font-weight: 700;
}

.rop-card--budget-rejected {
    overflow: hidden;
}

.rop-card__title--budget-rejected {
    margin: 0;
    padding: 14px 20px 12px;
    border-bottom: 1px solid rgba(244, 114, 182, 0.22);
    background: rgba(190, 24, 93, 0.08);
    color: #fecdd3;
}

.rop-card__title--budget-rejected i {
    color: #fda4af;
}

.rop-budget-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 16px 20px 20px;
}

.rop-budget-summary-table-wrap {
    padding: 12px 20px 20px;
}

.rop-budget-summary-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 8px;
    overflow: hidden;
}

.rop-budget-summary-table tbody tr td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(255, 255, 255, 0.02);
    vertical-align: middle;
}

.rop-budget-summary-table tbody tr:last-child td {
    border-bottom: 0;
}

.rop-budget-summary-table tbody tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.035);
}

.rop-budget-summary-table tbody tr td:first-child {
    width: 62%;
}

.rop-budget-summary-table tbody tr td:last-child {
    width: 38%;
    text-align: right;
}

.rop-budget-summary-row--strong td {
    background: rgba(125, 211, 252, 0.1) !important;
}

.rop-budget-summary-row--balance td {
    background: rgba(59, 130, 246, 0.08) !important;
}

.rop-budget-summary-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(255, 255, 255, 0.02);
}

.rop-budget-summary-item--strong {
    border-color: rgba(125, 211, 252, 0.35);
}

.rop-budget-summary-item--balance {
    grid-column: 1 / -1;
    border-color: rgba(59, 130, 246, 0.3);
}

.rop-budget-summary-label {
    color: var(--rop-text-soft);
    font-size: 12px;
    font-weight: 700;
}

.rop-budget-summary-value {
    color: var(--rop-title);
    font-size: 14px;
    font-weight: 800;
    text-align: right;
}

.rop-budget-summary-value--success {
    color: #4ade80;
}

.rop-budget-summary-value--balance {
    color: #7dd3fc;
}

.pres-totales-title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    justify-content: flex-end;
    width: 100%;
    margin-bottom: 8px;
    color: var(--rop-text-soft);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.15px;
    text-transform: none;
}

.pres-totales-title i {
    display: none;
}

.pres-totales-block .pres-total-row {
    justify-content: flex-end;
    gap: 14px;
    font-size: 13px;
}

.pres-totales-block .pres-total-row>span:first-child {
    color: var(--rop-text-soft);
    font-weight: 600;
}

.pres-totales-block .pres-total-row>span:last-child {
    min-width: 160px;
    text-align: right;
}

.pres-total-row.grand,
.pres-resumen-row.bold,
.pres-resumen-row.saldo-pendiente {
    font-size: 14px;
    font-weight: 800;
    color: var(--rop-title);
}

.pres-total-blue,
.pres-resumen-row.saldo-pendiente span {
    color: #7dd3fc !important;
}

.pres-resumen-row span.green {
    color: #4ade80;
}

.pres-resumen--pickup .pres-resumen-row {
    font-size: 13px;
}

.pres-resumen--pickup .pres-resumen-row.bold,
.pres-resumen--pickup .pres-resumen-row.saldo-pendiente {
    font-size: 15px;
}

.pres-resumen--pickup .pres-resumen-row.saldo-pendiente span {
    color: #22c55e !important;
}

.pres-resumen--pickup .pres-resumen-row span.green {
    color: var(--rop-title);
}

.pres-resumen-divider {
    margin: 10px 0;
    border-top: 1px solid rgba(125, 211, 252, 0.35);
}

.pres-abonos-section {
    border-top: 1px solid var(--rop-border);
}

.pres-abonos-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 20px 12px;
    background: rgba(15, 23, 42, 0.5);
    border-bottom: 1px solid var(--rop-border);
    color: var(--rop-title);
    font-size: 14px;
    font-weight: 800;
}

.rop-step-panel[data-step-panel="6"] .rop-card--ready-shell,
.rop-step-panel[data-step-panel="6"] .retiro-encuesta-card {
    border: 0;
}

.rop-step-panel[data-step-panel="6"] .rop-card--ready-shell>.rop-card__title {
    margin-bottom: 0;
    padding: 12px 20px 10px !important;
    border-bottom: 1px solid var(--rop-border);
    background: transparent;
    border-radius: 0;
}

.rop-step-panel[data-step-panel="6"] .pres-estados-title {
    padding: 12px 20px 10px;
    border-top: 0;
    border-bottom: 1px solid var(--rop-border);
    background: transparent;
}

.rop-step-panel[data-step-panel="6"] .pres-estados-title--approved {
    color: rgba(74, 222, 128, 0.76);
}

.rop-step-panel[data-step-panel="6"] .pres-estados-title--products {
    color: rgba(147, 197, 253, 0.8);
    border-top: 0;
}

.rop-step-panel[data-step-panel="6"] .pres-servicio-row {
    padding-left: 20px;
    padding-right: 20px;
}

.rop-step-panel[data-step-panel="6"] .pres-servicio-block,
.rop-step-panel[data-step-panel="6"] .pres-standalone-section,
.rop-step-panel[data-step-panel="6"] .pres-productos-block {
    border-top: 0;
    border-bottom: 0;
}

.rop-step-panel[data-step-panel="6"] .pres-productos-block--service {
    margin: 8px 0 12px;
    padding: 10px 12px 12px;
    border: 0;
    border-left: 0;
    border-radius: 0;
    background: transparent;
}

.rop-step-panel[data-step-panel="6"] .pres-productos-context {
    margin-bottom: 8px;
    padding-left: 6px;
    padding-right: 6px;
}

.rop-step-panel[data-step-panel="6"] .pres-resumen {
    padding: 12px 20px !important;
    background: transparent;
}

.pres-signature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding: 10px 22px 14px;
}

.pres-signature-title {
    color: var(--rop-title);
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 4px;
}

.pres-signature-sub {
    color: var(--rop-text-soft);
    font-size: 11px;
    margin-bottom: 10px;
}

.pres-signature-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 120px;
    color: var(--rop-text-soft);
    font-size: 12px;
}

.pres-signature-empty i {
    font-size: 26px;
}

.taller-top-grid,
.cc-bottom-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.cc-bottom-grid>.rop-card:only-child {
    grid-column: 1 / -1;
}

.taller-side-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.taller-section-title {
    margin: 0 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--rop-title);
    font-size: 15px;
    font-weight: 800;
}

.taller-section-title i {
    color: var(--rop-info);
    font-size: 17px;
    line-height: 1;
}

.taller-section-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.taller-section-title-row .taller-section-title {
    margin: 0;
}

.taller-oc-title-status {
    display: none;
    align-items: center;
    gap: 6px;
    color: var(--rop-text-soft);
    font-size: 12px;
    font-weight: 700;
}

.taller-oc-title-status i {
    color: #60a5fa;
    font-size: 14px;
    line-height: 1;
}

.taller-oc-title-status .taller-badge {
    margin-left: 2px;
}

.taller-sub-card,
.taller-oc-card,
.chat-box,
.taller-obs-card {
    border: 1px solid var(--rop-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
}

.taller-sub-card {
    padding: 14px 16px;
    margin-bottom: 14px;
}

.taller-sub-title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
    color: #7dd3fc;
    font-size: 12px;
    font-weight: 700;
}

.taller-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 11px;
    font-weight: 700;
}

.taller-badge.oc,
.taller-badge.espera {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(252, 211, 77, 0.24);
    color: #fcd9a0;
}

.taller-badge.proveedor,
.taller-badge.pendiente-svc {
    background: rgba(234, 179, 8, 0.14);
    border-color: rgba(234, 179, 8, 0.3);
    color: #fde68a;
}

.taller-badge.recibido,
.taller-badge.inventario {
    background: rgba(34, 197, 94, 0.14);
    border-color: rgba(34, 197, 94, 0.3);
    color: #86efac;
}

.taller-badge.confirmada,
.taller-badge.proceso {
    background: rgba(59, 130, 246, 0.14);
    border-color: rgba(59, 130, 246, 0.3);
    color: #93c5fd;
}

.taller-detalle,
.taller-oc-row,
.taller-obs-meta {
    color: var(--rop-text-soft);
    font-size: 12px;
}

.taller-oc-card {
    padding: 16px 18px;
}

.taller-oc-inline-summary {
    display: none;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 7px;
    margin: -4px 0 12px;
    padding: 10px 12px;
    border: 1px solid var(--rop-border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
}

.taller-oc-inline-summary__left,
.taller-oc-inline-summary__right {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.taller-oc-inline-summary__left {
    grid-column: 1 / 2;
}

.taller-oc-inline-summary__right {
    justify-content: flex-end;
    color: var(--rop-text-soft);
    font-size: 12px;
    grid-column: 2 / 3;
    justify-self: end;
    white-space: nowrap;
    text-align: right;
}

.taller-oc-inline-summary__right i {
    color: #60a5fa;
    font-size: 14px;
}

.taller-oc-inline-summary__right strong {
    color: #7dd3fc;
    margin-left: 2px;
    font-weight: 500;
}

.taller-oc-inline-summary__supplier {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    grid-column: 1 / -1;
    color: var(--rop-text-soft);
    font-size: 12px;
    min-width: 0;
}

.taller-oc-inline-summary__supplier i {
    color: #60a5fa;
    font-size: 14px;
}

.taller-oc-inline-summary__supplier strong {
    color: var(--rop-title);
    margin-left: 2px;
    font-weight: 500;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.taller-oc-inline-summary__right span[data-rop-i18n],
.taller-oc-inline-summary__supplier span[data-rop-i18n] {
    color: var(--rop-title);
    font-weight: 700;
}

.taller-oc-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 0;
}

.taller-oc-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.taller-oc-header-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
    width: 100%;
}

.taller-oc-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex-wrap: wrap;
}

.taller-oc-meta-item i {
    color: #60a5fa;
    font-size: 14px;
    line-height: 1;
}

.taller-oc-meta-item strong,
.taller-oc-meta-item .taller-badge {
    margin-left: 2px;
}

.taller-oc-title {
    margin-bottom: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--rop-title);
    font-size: 13px;
    font-weight: 800;
}

.taller-oc-body {
    width: 100%;
}

.taller-oc-left {
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    column-gap: 24px;
    row-gap: 8px;
    width: 100%;
}

.taller-oc-num {
    color: var(--rop-title);
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 0;
    white-space: nowrap;
    line-height: 1;
}

.taller-oc-num--small {
    font-size: 16px;
    font-weight: 700;
}

.taller-oc-row strong,
.taller-blue {
    color: #7dd3fc;
}

#ropWorkshopPoSummaryDate {
    white-space: nowrap;
}

.chat-box {
    padding: 14px;
    min-height: 190px;
    max-height: 240px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}

.chat-msg {
    display: flex;
}

.chat-msg.out {
    justify-content: flex-end;
}

.chat-bubble {
    max-width: 78%;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 12px;
    line-height: 1.5;
}

.chat-bubble.out {
    background: rgba(34, 197, 94, 0.18);
    color: #d1fae5;
    border-bottom-right-radius: 3px;
}

.chat-bubble.in {
    background: rgba(255, 255, 255, 0.05);
    color: var(--rop-text);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-bottom-left-radius: 3px;
}

.chat-time,
.chat-check {
    display: block;
    color: var(--rop-text-muted);
    font-size: 10px;
    font-weight: 600;
}

.chat-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-input,
.cc-obs-input,
.informe-textarea {
    width: 100%;
    border: 1px solid var(--rop-border);
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.65);
    color: var(--rop-title);
}

.chat-input {
    padding: 10px 14px;
    font-size: 12px;
}

.chat-attach,
.chat-mic,
.chat-send,
.taller-obs-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    cursor: pointer;
}

.chat-attach,
.chat-mic,
.chat-send {
    width: 38px;
    height: 38px;
    border: 1px solid var(--rop-border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--rop-text-soft);
}

.chat-send {
    background: rgba(59, 130, 246, 0.2);
    color: #bfdbfe;
}

.chat-mic.is-recording {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.5);
    color: #fecaca;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.22);
}

.chat-file-input {
    display: none;
}

.chat-empty-state {
    text-align: center;
    color: var(--rop-text-muted);
    font-size: 12px;
    padding: 20px 8px;
}

.chat-bubble-text {
    white-space: pre-wrap;
    word-break: break-word;
}

.chat-attachments {
    display: grid;
    row-gap: 8px;
    margin-top: 8px;
}

.chat-attachment {
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 10px;
    padding: 8px;
    background: rgba(15, 23, 42, 0.45);
}

.chat-attachment-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 11px;
    color: var(--rop-text-soft);
}

.chat-attachment-kind {
    font-weight: 700;
}

.chat-attachment-link {
    color: #93c5fd;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
}

.chat-attachment-link:hover {
    text-decoration: underline;
}

.chat-attachment-name {
    font-size: 12px;
    line-height: 1.3;
    word-break: break-word;
}

.chat-attachment-image {
    display: block;
    width: 100%;
    max-height: 180px;
    object-fit: cover;
    border-radius: 8px;
}

.chat-attachment-audio {
    width: 100%;
}

.chat-attachment--audio {
    border: none;
    border-radius: 14px;
    padding: 8px 8px 7px;
    background: linear-gradient(155deg, rgba(16, 185, 129, 0.26) 0%, rgba(6, 95, 70, 0.32) 100%);
    box-shadow: inset 0 0 0 1px rgba(110, 231, 183, 0.3);
}

.chat-msg.in .chat-attachment--audio {
    background: linear-gradient(155deg, rgba(71, 85, 105, 0.42) 0%, rgba(30, 41, 59, 0.56) 100%);
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.32);
}

.chat-attachment-audio-shell {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 7px;
    border-radius: 10px;
    background: rgba(2, 6, 23, 0.3);
    border: 1px solid rgba(148, 163, 184, 0.24);
}

.chat-attachment-audio-shell .chat-attachment-audio {
    flex: 1 1 auto;
    min-width: 0;
    height: 36px;
    border-radius: 8px;
    overflow: hidden;
    background: transparent;
}

.chat-attachment-audio-icon,
.chat-attachment-audio-open {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
}

.chat-attachment-audio-icon {
    color: #ecfdf5;
    background: rgba(16, 185, 129, 0.28);
    border: 1px solid rgba(16, 185, 129, 0.56);
    font-size: 15px;
}

.chat-attachment-audio-open {
    color: #dbeafe;
    text-decoration: none;
    background: rgba(15, 23, 42, 0.52);
    border: 1px solid rgba(148, 163, 184, 0.32);
}

.chat-attachment-audio-open:hover {
    color: #ffffff;
    text-decoration: none;
}

.chat-attachment-audio-meta {
    margin-top: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.chat-attachment-audio-meta .chat-attachment-kind {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-radius: 8px;
    padding: 1px 6px;
    color: #ecfdf5;
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid rgba(110, 231, 183, 0.35);
    flex: 0 0 auto;
}

.chat-attachment-audio-meta .chat-attachment-name {
    font-size: 10px;
    color: rgba(203, 213, 225, 0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
    flex: 1 1 auto;
}

.chat-attachment-audio::-webkit-media-controls-enclosure {
    border-radius: 8px;
    background: transparent;
}

.chat-attachment-audio::-webkit-media-controls-panel {
    background: rgba(255, 255, 255, 0.18);
}

.chat-msg.in .chat-attachment-audio::-webkit-media-controls-panel {
    background: rgba(148, 163, 184, 0.2);
}

.chat-pending-files {
    display: none;
    margin-bottom: 10px;
    border: 1px dashed rgba(148, 163, 184, 0.32);
    border-radius: 10px;
    padding: 10px;
    background: rgba(15, 23, 42, 0.35);
}

.chat-pending-files.is-visible {
    display: block;
}

.chat-pending-files-title {
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--rop-title);
}

.chat-pending-files-list {
    display: grid;
    row-gap: 6px;
}

.chat-pending-file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 8px;
    padding: 6px 8px;
}

.chat-pending-file-name {
    flex: 1;
    word-break: break-word;
}

.chat-pending-file-remove {
    border: 0;
    background: transparent;
    color: #fda4af;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    padding: 0;
}

.taller-obs-card {
    padding: 16px 18px;
    position: relative;
    background: rgba(234, 179, 8, 0.08);
    border-color: rgba(234, 179, 8, 0.22);
}

.taller-obs-text {
    margin: 0 0 10px;
    padding-right: 28px;
    color: var(--rop-text);
    font-size: 13px;
    line-height: 1.6;
}

.taller-obs-edit {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    color: var(--rop-text-soft);
}

.taller-svc-num,
.cc-num {
    color: var(--rop-text-soft);
    font-weight: 800;
}

.taller-foto-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.taller-foto-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.taller-foto-label {
    color: var(--rop-text-muted);
    font-size: 10px;
    font-weight: 700;
}

.taller-fotos {
    display: flex;
    gap: 4px;
}

.taller-foto {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: linear-gradient(135deg, #0f172a, #334155);
    border: 1px solid rgba(148, 163, 184, 0.16);
}

.taller-foto.light {
    background: linear-gradient(135deg, #94a3b8, #cbd5e1);
}

.taller-arrow {
    color: var(--rop-text-soft);
    font-size: 18px;
}

.svc-mini-strip {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    max-width: 180px;
    padding-bottom: 3px;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.3) transparent;
}

.svc-mini-strip::-webkit-scrollbar {
    height: 3px;
}

.svc-mini-strip::-webkit-scrollbar-track {
    background: transparent;
}

.svc-mini-strip::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.3);
    border-radius: 2px;
}

.svc-foto-thumb {
    display: block;
    width: 52px;
    height: 52px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.2);
    flex-shrink: 0;
    cursor: pointer;
    transition: opacity 0.15s, border-color 0.15s;
}

.svc-foto-thumb:hover {
    opacity: 0.82;
    border-color: rgba(148, 163, 184, 0.5);
}

.svc-foto-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.svc-foto-empty {
    color: var(--rop-text-soft);
    font-size: 13px;
    line-height: 52px;
}

.cc-table td,
.cc-table th {
    padding-left: 14px;
    padding-right: 14px;
}

.rop-table-head {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: inherit;
    font-weight: 800;
    line-height: 1.2;
}

.rop-table-head i {
    color: #93c5fd;
    font-size: 14px;
}

.cc-table th {
    color: #cbd5e1;
    border-bottom-color: rgba(148, 163, 184, 0.22);
    background: rgba(255, 255, 255, 0.03);
}

.cc-table td {
    color: #e2e8f0;
    border-bottom-color: rgba(148, 163, 184, 0.1);
}

.cc-select {
    width: 100%;
    border: 1px solid var(--rop-border);
    border-radius: 8px;
    padding: 6px 28px 6px 12px;
    background: rgba(15, 23, 42, 0.65);
    color: var(--rop-title);
    font-size: 11px;
    font-weight: 700;
    appearance: none;
    -webkit-appearance: none;
}

.cc-state-pill {
    /* width: 100%; */
    border: 1px solid var(--rop-border);
    border-radius: 8px;
    padding: 6px 12px;
    background: rgba(15, 23, 42, 0.65);
    color: var(--rop-title);
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    line-height: 1.2;
}

.cc-select.cc-bueno,
.cc-state-pill.cc-bueno {
    border-color: rgba(34, 197, 94, 0.32);
    color: #86efac;
}

.cc-select.cc-regular,
.cc-state-pill.cc-regular {
    border-color: rgba(234, 179, 8, 0.32);
    color: #fde68a;
}

.cc-select.cc-reproceso,
.cc-state-pill.cc-reproceso {
    border-color: rgba(244, 63, 94, 0.32);
    color: #fda4af;
}

.cc-select.cc-revision,
.cc-state-pill.cc-revision {
    border-color: rgba(59, 130, 246, 0.32);
    color: #93c5fd;
}

.cc-obs-input {
    padding: 8px 10px;
    font-size: 12px;
    min-width: 160px;
}

.cc-informe-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--rop-border);
}

.cc-meta-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cc-meta-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--rop-text-muted);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cc-meta-label i {
    font-size: 12px;
    line-height: 1;
}

.cc-meta-label-colon {
    margin-left: 1px;
}

.cc-meta-value {
    color: var(--rop-title);
    font-size: 13px;
    font-weight: 700;
}

.cc-badge-result {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 8px;
    background: rgba(250, 204, 21, 0.2);
    border: 1px solid rgba(250, 204, 21, 0.42);
    color: #fde68a;
    font-size: 11px;
    font-weight: 700;
}

.cc-toolbar,
.retiro-actions-row,
.resol-action-row,
.resol-footer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.informe-tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 14px;
    border: 1px solid var(--rop-border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--rop-text);
    font-size: 12px;
    font-weight: 700;
}

.informe-tool-btn--success {
    border-color: rgba(34, 197, 94, 0.3);
    color: #86efac;
}

.cc-fotos-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.cc-foto-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cc-foto-thumb {
    height: 96px;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.38);
    font-size: 22px;
}

.cc-foto-thumb.dark {
    background: linear-gradient(135deg, #0f172a, #334155);
}

.cc-foto-thumb.dark2 {
    background: linear-gradient(135deg, #1f2937, #475569);
}

.cc-foto-thumb.dark3 {
    background: linear-gradient(135deg, #111827, #374151);
}

.cc-foto-thumb.add-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 2px dashed rgba(148, 163, 184, 0.25);
    cursor: pointer;
    flex-direction: column;
    gap: 6px;
    color: var(--rop-text-soft);
    font-size: 13px;
}

.cc-foto-meta,
.cc-fotos-hint {
    color: var(--rop-text-soft);
    font-size: 11px;
    font-weight: 600;
}

.cc-fotos-hint {
    display: flex;
    align-items: center;
    gap: 5px;
}

.retiro-encuesta-card {
    margin-top: 16px;
}

.retiro-encuesta-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--rop-border);
    flex-wrap: wrap;
}

.retiro-encuesta-icon {
    width: 46px;
    height: 46px;
    border-radius: 8px;
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
}

.retiro-encuesta-title {
    color: var(--rop-title);
    font-size: 15px;
    font-weight: 800;
}

.retiro-encuesta-sub {
    margin-top: 2px;
    color: var(--rop-text-soft);
    font-size: 12px;
}

.retiro-encuesta-toggle-wrap {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.retiro-toggle-big {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
}

.retiro-toggle-big input {
    opacity: 0;
    width: 0;
    height: 0;
}

.retiro-slider-big {
    position: absolute;
    inset: 0;
    border-radius: 8px;
    background: rgba(148, 163, 184, 0.4);
    transition: 0.2s;
    cursor: pointer;
}

.retiro-slider-big::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 20px;
    border-radius: 8px;
    background: #fff;
    transition: 0.2s;
}

.retiro-toggle-big input:checked+.retiro-slider-big {
    background: #22c55e;
}

.retiro-toggle-big input:checked+.retiro-slider-big::before {
    transform: translateX(24px);
}

.retiro-toggle-label-big {
    color: var(--rop-text-soft);
    font-size: 13px;
    font-weight: 700;
}

.retiro-encuesta-panel {
    display: none;
}

.retiro-encuesta-body {
    padding: 22px;
}

.retiro-ratings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 28px;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--rop-border);
}

.retiro-rating-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.retiro-rating-label,
.retiro-comment-label {
    color: var(--rop-title);
    font-size: 13px;
    font-weight: 700;
}

.retiro-stars {
    display: flex;
    gap: 6px;
}

.retiro-star {
    color: rgba(148, 163, 184, 0.45);
    font-size: 24px;
    cursor: pointer;
    transition: color 0.15s ease, transform 0.15s ease;
}

.retiro-star:hover,
.retiro-star.active {
    color: #fbbf24;
    transform: scale(1.08);
}

.retiro-thumbs {
    display: flex;
    gap: 10px;
}

.retiro-thumb,
.retiro-btn-primary,
.retiro-btn-secondary,
.resol-cta-btn,
.resol-next-btn,
.resol-download-btn,
.wa-cancel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.retiro-thumb {
    padding: 8px 16px;
    border: 1px solid var(--rop-border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--rop-text-soft);
}

.retiro-thumb.up.selected,
.retiro-thumb.up:hover {
    border-color: rgba(34, 197, 94, 0.32);
    background: rgba(34, 197, 94, 0.14);
    color: #86efac;
}

.retiro-thumb.down.selected,
.retiro-thumb.down:hover {
    border-color: rgba(244, 63, 94, 0.32);
    background: rgba(244, 63, 94, 0.14);
    color: #fda4af;
}

.retiro-comment-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
}

.retiro-actions-row {
    align-items: center;
    margin-top: 4px;
    padding-bottom: 10px;
}

.retiro-btn-primary {
    padding: 10px 20px;
    border: 0;
    background: #22c55e;
    color: #fff;
}

.retiro-btn-secondary,
.wa-cancel-btn {
    padding: 10px 18px;
    border: 1px solid var(--rop-border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--rop-text);
}

.resol-cta-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 16px;
    padding: 18px 22px;
    border-radius: 14px;
    background: linear-gradient(135deg, #0f172a 0%, #1d4ed8 100%);
}

.resol-cta-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
}

.resol-cta-icon,
.resol-modal-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bfdbfe;
    font-size: 18px;
}

.resol-cta-title,
.resol-modal-title {
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}

.resol-cta-sub,
.resol-modal-sub {
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    line-height: 1.5;
}

.resol-cta-btn,
.resol-next-btn,
.resol-download-btn {
    padding: 11px 18px;
    border: 0;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.resol-cta-btn--attention {
    position: relative;
    z-index: 1;
    overflow: visible !important;
    background: rgba(255, 255, 255, 0.14) !important;
    color: #ffffff !important;
    border-radius: 7px !important;
    border: 0 !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.22);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Ensure button text and icons stack on top of the expanding waves */
.resol-cta-btn--attention>* {
    position: relative;
    z-index: 2;
}

/* Water Ripple Wave 1 */
.resol-cta-btn--attention::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 7px;
    border: 1.5px solid rgba(96, 165, 250, 0.7);
    box-shadow: 0 0 5px rgba(96, 165, 250, 0.35);
    pointer-events: none;
    z-index: -1;
    opacity: 0;
    animation: rop-water-wave 2.4s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;
}

/* Water Ripple Wave 2 (delayed for concentric water ripple effect) */
.resol-cta-btn--attention::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 7px;
    border: 1.5px solid rgb(255, 255, 255);
    box-shadow: 0 0 5px rgba(96, 165, 250, 0.35);
    pointer-events: none;
    z-index: -1;
    opacity: 0;
    animation: rop-water-wave 2.4s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;
    animation-delay: 1.2s;
}

.resol-cta-btn--attention:hover {
    transform: translateY(-2px) scale(1.03);
    background: rgba(255, 255, 255, 0.22) !important;
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.4);
}

.resol-cta-btn--attention:active {
    transform: translateY(0) scale(0.97);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
    transition: all 0.1s ease;
}

@keyframes rop-water-wave {
    0% {
        inset: 0;
        border-radius: 7px;
        opacity: 0.8;
    }

    100% {
        inset: -12px;
        border-radius: 19px;
        /* 7px + 12px */
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {

    .resol-cta-btn--attention::before,
    .resol-cta-btn--attention::after {
        animation: none !important;
    }
}

.resol-next-btn {
    border: 1px solid rgba(148, 163, 184, 0.45);
    background: rgba(148, 163, 184, 0.24);
    color: rgba(241, 245, 249, 0.95);
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.resol-next-btn:not(.is-blocked) {
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
    border-color: rgba(59, 130, 246, 0.9);
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.3);
    color: #ffffff;
}

.resol-next-btn.green:not(.is-blocked) {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    border-color: rgba(16, 185, 129, 0.94);
    box-shadow: 0 10px 22px rgba(5, 150, 105, 0.28);
}

.resol-next-btn:not(.is-blocked):hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
}

.resol-next-btn.is-blocked {
    opacity: .82;
    cursor: not-allowed;
    background: rgba(148, 163, 184, 0.34);
    border: 1px solid rgba(148, 163, 184, 0.38);
}

.resol-overlay {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(2, 6, 23, 0.78);
}

.resol-overlay.open {
    display: flex;
}

.resol-modal {
    width: 100%;
    max-width: 720px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--rop-border);
    border-radius: 16px;
    overflow: hidden;
    background: #0f172a;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.35);
}

.resol-modal-header,
.resol-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--rop-border);
}

.resol-modal-footer {
    border-bottom: 0;
    border-top: 1px solid var(--rop-border);
}

.resol-modal-header {
    /* background: linear-gradient(135deg, #0f172a 0%, #1e40af 100%);*/
    background: linear-gradient(135deg, color-mix(in srgb, var(--company-primary) 20%, #000) 0%, var(--company-primary) 100%) !important;
}

.resol-modal-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.resol-modal-close {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.resol-steps-bar {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 14px 20px;
    border-bottom: 1px solid var(--rop-border);
    background: rgba(255, 255, 255, 0.03);
}

.resol-step-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.resol-step-sep {
    flex: 1;
    height: 1px;
    margin: 0 8px;
    background: rgba(148, 163, 184, 0.18);
}

.resol-step-dot {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background: rgba(148, 163, 184, 0.18);
    color: var(--rop-text-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
}

.resol-step-lbl {
    color: var(--rop-text-soft);
    font-size: 11px;
    font-weight: 700;
}

.resol-step-item.active .resol-step-dot,
.resol-step-item.done .resol-step-dot {
    color: #fff;
}

.resol-step-item.active .resol-step-dot {
    background: #3b82f6;
}

.resol-step-item.active .resol-step-lbl {
    color: #93c5fd;
}

.resol-step-item.done .resol-step-dot {
    background: #22c55e;
}

.resol-step-item.done .resol-step-lbl {
    color: #86efac;
}

.resol-modal-body {
    padding: 20px;
    overflow-y: auto;
}

.resol-panel {
    display: none;
}

.resol-panel.active {
    display: block;
}

.resol-warning-box,
.resol-summary,
.resol-confirm-check,
.resol-download-card,
.resol-final-summary,
.resol-final-warning,
.resol-drop-zone,
.resol-file-item {
    border-radius: 12px;
    border: 1px solid var(--rop-border);
}

.resol-warning-box {
    display: flex;
    gap: 14px;
    padding: 16px;
    margin-bottom: 16px;
    background: rgba(234, 179, 8, 0.1);
    border-color: rgba(234, 179, 8, 0.22);
}

.resol-warning-icon {
    color: #fbbf24;
    font-size: 22px;
}

.resol-warning-title,
.resol-panel-title {
    margin-bottom: 8px;
    color: var(--rop-title);
    font-size: 14px;
    font-weight: 800;
}

.resol-warning-text,
.resol-panel-sub {
    color: var(--rop-text-soft);
    font-size: 12px;
    line-height: 1.6;
}

.resol-summary {
    padding: 14px 16px;
    margin-bottom: 16px;
    background: rgba(255, 255, 255, 0.03);
}

.resol-decision-box {
    padding: 14px 16px;
    margin-bottom: 16px;
    border-radius: 12px;
    border: 1px solid var(--rop-border);
    background: rgba(59, 130, 246, 0.08);
}

.resol-decision-title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    color: var(--rop-title);
    font-size: 13px;
    font-weight: 800;
}

.resol-decision-title i {
    color: #93c5fd;
}

.resol-decision-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.resol-decision-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 14px;
    border-radius: 10px;
    border: 1px solid var(--rop-border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--rop-text-soft);
    font-size: 12px;
    font-weight: 700;
}

.resol-decision-btn.is-approve.active {
    border-color: rgba(34, 197, 94, 0.32);
    background: rgba(34, 197, 94, 0.14);
    color: #86efac;
}

.resol-decision-btn.is-reject.active {
    border-color: rgba(244, 63, 94, 0.32);
    background: rgba(244, 63, 94, 0.14);
    color: #fda4af;
}

.resol-summary-title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
    color: var(--rop-text-soft);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.resol-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.resol-summary-item span {
    display: block;
    color: var(--rop-text-muted);
    font-size: 10px;
    font-weight: 700;
    margin-bottom: 2px;
}

.resol-summary-item strong {
    color: var(--rop-title);
    font-size: 13px;
    font-weight: 800;
}

.resol-blue {
    color: #7dd3fc !important;
}

.resol-confirm-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: rgba(34, 197, 94, 0.08);
    border-color: rgba(34, 197, 94, 0.22);
    color: var(--rop-text);
    font-size: 12px;
}

.resol-confirm-check input {
    margin-top: 2px;
}

.resol-firma-tabs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.resol-firma-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--rop-border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--rop-text-soft);
    font-size: 12px;
    font-weight: 700;
}

.resol-firma-clear {
    margin-left: auto;
    padding: 8px 12px;
}

.resol-firma-tab.active {
    border-color: rgba(59, 130, 246, 0.35);
    background: rgba(59, 130, 246, 0.12);
    color: #93c5fd;
}

.resol-canvas-wrap,
.resol-drop-zone {
    position: relative;
    padding: 10px;
    background: rgba(255, 255, 255, 0.03);
}

.resol-canvas {
    width: 100%;
    height: 160px;
    display: block;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.35);
    touch-action: none;
}

.resol-canvas-hint {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
    pointer-events: none;
}

.resol-firma-ok {
    display: none;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.22);
    color: #86efac;
    font-size: 12px;
    font-weight: 700;
}

.resol-download-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    margin-bottom: 14px;
    background: rgba(244, 63, 94, 0.08);
    border-color: rgba(244, 63, 94, 0.2);
}

.resol-download-icon {
    color: #fda4af;
    font-size: 28px;
}

.resol-download-title {
    color: var(--rop-title);
    font-size: 13px;
    font-weight: 800;
}

.resol-download-sub {
    color: var(--rop-text-soft);
    font-size: 11px;
}

.resol-fisica-steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.resol-fisica-step {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--rop-text);
    font-size: 12px;
    font-weight: 600;
}

.resol-fisica-num {
    width: 22px;
    height: 22px;
    border-radius: 8px;
    background: #3b82f6;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
}

.resol-drop-zone {
    text-align: center;
    padding: 28px 18px;
    cursor: pointer;
}

.resol-drop-zone.is-dragover {
    border-color: rgba(59, 130, 246, 0.35);
    background: rgba(59, 130, 246, 0.08);
}

.resol-drop-icon {
    color: var(--rop-text-muted);
    font-size: 30px;
    margin-bottom: 8px;
}

.resol-drop-title {
    color: var(--rop-title);
    font-size: 13px;
    font-weight: 700;
}

.resol-drop-sub,
.resol-step-counter {
    color: var(--rop-text-soft);
    font-size: 12px;
}

.resol-files-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
}

.resol-file-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--rop-text);
}

.resol-file-del {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: #fda4af;
}

.resol-final-summary {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    margin-bottom: 16px;
    background: rgba(34, 197, 94, 0.08);
    border-color: rgba(34, 197, 94, 0.2);
}

.resol-final-row {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #86efac;
    font-size: 13px;
    font-weight: 700;
}

.resol-final-row.is-pending {
    color: var(--rop-text-soft);
}

.resol-check-icon {
    color: #22c55e;
    font-size: 16px;
}

.resol-final-warning {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    background: rgba(244, 63, 94, 0.08);
    border-color: rgba(244, 63, 94, 0.2);
    color: #fecdd3;
    font-size: 12px;
    line-height: 1.6;
}

.resol-hidden {
    display: none !important;
}

body.light-mode .rop-card--budget-shell,
body.light-mode .rop-card--ready-shell,
body.light-mode .rop-card--quality-table,
body.light-mode .rop-card--panel-body,
body.light-mode .rop-card--budget-signatures {
    background: #ffffff;
}

body.light-mode .rop-budget-approve-all-btn {
    border-color: #86efac;
    background: #ecfdf3;
    color: #166534;
}

body.light-mode .rop-budget-approve-all-btn:hover {
    background: #dcfce7;
}

body.light-mode .pres-estados-title {
    background: #ffffff;
    border-top-color: #38bdf8;
    border-bottom-color: #d9e4ef;
    color: #38bdf8;
}

body.light-mode .pres-servicio-block {
    border-bottom-color: #d9e4ef;
}

body.light-mode .pres-servicio-row {
    background: var(--rop-row-zebra-odd);
}

body.light-mode #ropBudgetServicesStack>.pres-servicio-block:nth-child(odd) .pres-servicio-row:not(.pres-servicio-row--labels),
body.light-mode #ropReadyPickupServicesStack>.pres-servicio-block:nth-child(odd) .pres-servicio-row:not(.pres-servicio-row--labels) {
    background: var(--rop-row-zebra-odd);
}

body.light-mode #ropBudgetServicesStack>.pres-servicio-block:nth-child(even) .pres-servicio-row:not(.pres-servicio-row--labels),
body.light-mode #ropReadyPickupServicesStack>.pres-servicio-block:nth-child(even) .pres-servicio-row:not(.pres-servicio-row--labels) {
    background: var(--rop-row-zebra-even);
}

body.light-mode .pres-servicio-row--labels {
    background: var(--rop-row-head-bg);
    border-bottom-color: #d9e4ef;
}

body.light-mode .pres-estados-title--products {
    color: #2563eb;
    border-top-color: #2563eb;
}

body.light-mode .pres-estados-title--rejected {
    color: #b42318;
    border-top-color: rgba(217, 45, 32, 0.35);
    background: rgba(254, 228, 226, 0.9);
}

body.light-mode .pres-servicio-row--headline {
    background: #eef8ff;
}

body.light-mode .pres-standalone-section {
    border-top-color: #d9e4ef;
}

body.light-mode .pres-svc-head {
    color: #5f6f84;
}

body.light-mode .pres-svc-name {
    color: #243b53;
}

body.light-mode .pres-svc-head i {
    color: #2563eb;
}

body.light-mode .pres-badge.approved {
    background: #ecfdf3;
    border-color: #a7f3d0;
    color: #059669;
}

body.light-mode .pres-badge.rejected {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}

body.light-mode .pres-badge.working {
    background: #fff7ed;
    border-color: #fed7aa;
    color: #ea580c;
}

body.light-mode .pres-badge.finished {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #2563eb;
}

body.light-mode .pres-badge.pending {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #64748b;
}

body.light-mode .rop-budget-summary-item {
    background: #f8fbff;
    border-color: #d9e4ef;
}

body.light-mode .rop-budget-summary-table {
    border-color: #d9e4ef;
}

body.light-mode .rop-budget-summary-table tbody tr td {
    background: #ffffff;
    border-bottom-color: #d9e4ef;
}

body.light-mode .rop-budget-summary-table tbody tr:nth-child(even) td {
    background: #f8fbff;
}

body.light-mode .rop-budget-summary-row--strong td {
    background: #edf6ff !important;
}

body.light-mode .rop-budget-summary-row--balance td {
    background: #eaf4ff !important;
}

body.light-mode .rop-budget-summary-item--strong {
    border-color: #b6d8f8;
}

body.light-mode .rop-budget-summary-item--balance {
    border-color: #bfdbfe;
}

body.light-mode .rop-budget-summary-label {
    color: #5f6f84;
}

body.light-mode .rop-budget-summary-value {
    color: #243b53;
}

body.light-mode .pres-productos-block {
    background: transparent;
}

body.light-mode .pres-productos-block--service {
    border-color: #d7e6f7;
    border-left-color: #3b82f6;
    background: #f8fbff;
}

body.light-mode .pres-productos-context {
    color: #2563eb;
}

body.light-mode .pres-productos-context i {
    color: #2563eb;
}

body.light-mode .pres-productos-context strong {
    color: #1e293b;
}

body.light-mode .pres-productos-block,
body.light-mode .pres-totales-block,
body.light-mode .pres-resumen {
    border-top-color: #d9e4ef;
}

body.light-mode .pres-totales-block {
    border: 0;
    background: transparent;
}

body.light-mode .pres-productos-title,
body.light-mode .pres-subtotal,
body.light-mode .pres-resumen-row,
body.light-mode .pres-signature-sub {
    color: #5f6f84;
}

body.light-mode .pres-resumen--pickup .pres-resumen-row.saldo-pendiente span {
    color: #16a34a !important;
}

body.light-mode .pres-resumen--pickup .pres-resumen-row span.green {
    color: #2f3c4e;
}

body.light-mode .pres-totales-title {
    color: #2563eb;
}

body.light-mode .rop-card__title--budget-rejected {
    border-bottom-color: rgba(217, 45, 32, 0.16);
    background: rgba(254, 228, 226, 0.9);
    color: #912018;
}

body.light-mode .rop-card__title--budget-rejected i {
    color: #d92d20;
}

body.light-mode .pres-subtotal {
    border-top-color: #d9e4ef;
}

body.light-mode .pres-subtotal-label i {
    color: #2563eb;
}

body.light-mode .pres-abonos-title {
    background: linear-gradient(180deg, #f7fafc 0%, #e9eef5 100%);
    border-bottom-color: #d9e4ef;
    color: #243b53;
}

body.light-mode .taller-badge.oc,
body.light-mode .taller-badge.espera {
    background: #fff8f1;
    border-color: #f3d2b2;
    color: #8a5a2b;
}

body.light-mode .taller-badge.proveedor,
body.light-mode .taller-badge.pendiente-svc {
    background: #fefce8;
    border-color: #eab308;
    color: #854d0e;
}

body.light-mode .taller-badge.recibido,
body.light-mode .taller-badge.inventario {
    background: #dcfce7;
    border-color: #22c55e;
    color: #166534;
}

body.light-mode .taller-badge.confirmada,
body.light-mode .taller-badge.proceso {
    background: #eff6ff;
    border-color: #60a5fa;
    color: #1d4ed8;
}

body.light-mode .pres-table th,
body.light-mode .pres-abonos-table th,
body.light-mode .taller-table th,
body.light-mode .taller-svc-table th,
body.light-mode .cc-table th {
    background: var(--rop-row-head-bg);
    color: #526375;
    border-bottom-color: #d9e4ef;
}

body.light-mode .pres-table td,
body.light-mode .pres-abonos-table td,
body.light-mode .taller-table td,
body.light-mode .taller-svc-table td,
body.light-mode .cc-table td {
    border-bottom-color: #e5edf5;
    color: #243b53;
}

body.light-mode .pres-productos-block .pres-table td:nth-child(2) {
    color: #243b53;
}

body.light-mode .pres-table tbody tr:nth-child(odd) td,
body.light-mode .pres-abonos-table tbody tr:nth-child(odd) td,
body.light-mode .taller-table tbody tr:nth-child(odd) td,
body.light-mode .taller-svc-table tbody tr:nth-child(odd) td,
body.light-mode .cc-table tbody tr:nth-child(odd) td {
    background: var(--rop-row-zebra-odd);
}

body.light-mode .pres-table tbody tr:nth-child(even) td,
body.light-mode .pres-abonos-table tbody tr:nth-child(even) td,
body.light-mode .taller-table tbody tr:nth-child(even) td,
body.light-mode .taller-svc-table tbody tr:nth-child(even) td,
body.light-mode .cc-table tbody tr:nth-child(even) td {
    background: #eaeaea;
}

body.light-mode .cc-photo-log__item {
    background: #f8fbff;
    border-color: #cbd5e1;
}

body.light-mode .cc-photo-log-empty {
    color: #64748b;
}

body.light-mode .pres-product-thumb {
    background: #ffffff;
    border-color: #d9e4ef;
}

body.light-mode .pres-product-thumb--icon {
    background: #eff6ff;
    border-color: #cfe0f1;
    color: #2563eb;
}

body.light-mode .rop-table-head i {
    color: #2563eb;
}

body.light-mode .pres-signature-empty {
    min-height: 120px;
    border: 1px dashed #cfe0f1;
    background: #f8fbff;
    color: #6b7c93;
}

body.light-mode .rop-signature-box {
    background: #f8fbff;
    border-color: #d9e4ef;
}

body.light-mode .chat-box {
    background: #ffffff;
    border-color: #d9e4ef;
}

body.light-mode .chat-bubble.in {
    background: #ffffff;
    border-color: #d9e4ef;
    color: #243b53;
}

body.light-mode .chat-bubble.out {
    background: #dcfce7;
    color: #166534;
}

body.light-mode .chat-time,
body.light-mode .chat-check {
    color: #7b8794;
}

body.light-mode .chat-input {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #243b53;
}

body.light-mode .chat-input::placeholder {
    color: #94a3b8;
}

body.light-mode .chat-attach {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #64748b;
}

body.light-mode .chat-mic {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #64748b;
}

body.light-mode .chat-send {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #2563eb;
}

body.light-mode .chat-mic.is-recording {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #b91c1c;
}

body.light-mode .chat-empty-state {
    color: #6b7c93;
}

body.light-mode .chat-attachment {
    background: #ffffff;
    border-color: #d9e4ef;
}

body.light-mode .chat-attachment-link {
    color: #2563eb;
}

body.light-mode .chat-attachment--audio {
    background: linear-gradient(155deg, #dcfce7 0%, #ecfeff 100%);
    box-shadow: inset 0 0 0 1px #9ae6b4;
}

body.light-mode .chat-msg.in .chat-attachment--audio {
    background: linear-gradient(155deg, #f8fafc 0%, #edf2f7 100%);
    box-shadow: inset 0 0 0 1px #d9e4ef;
}

body.light-mode .chat-attachment-audio-shell {
    background: #f1f5f9;
    border-color: #d9e4ef;
}

body.light-mode .chat-attachment-audio-icon {
    color: #047857;
    background: #d1fae5;
    border-color: #86efac;
}

body.light-mode .chat-attachment-audio-open {
    color: #2563eb;
    background: #ffffff;
    border-color: #cbd5e1;
}

body.light-mode .chat-attachment-audio-meta .chat-attachment-kind {
    color: #047857;
    background: #ecfdf5;
    border-color: #9ae6b4;
}

body.light-mode .chat-attachment-audio-meta .chat-attachment-name {
    color: #64748b;
}

body.light-mode .chat-attachment-audio {
    color-scheme: light;
    background: #eef4ff;
}

body.light-mode .chat-attachment-audio::-webkit-media-controls-enclosure {
    background: #eef4ff;
}

body.light-mode .chat-attachment-audio::-webkit-media-controls-panel {
    background: #eef4ff;
}

body.light-mode .chat-pending-files {
    background: #f8fbff;
    border-color: #d9e4ef;
}

body.light-mode .chat-pending-file-item {
    background: #ffffff;
    border-color: #d9e4ef;
}

body.light-mode .cc-table th {
    background: #f8fbff;
}

body.light-mode .cc-select,
body.light-mode .cc-state-pill,
body.light-mode .cc-obs-input,
body.light-mode .informe-textarea {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #243b53;
}

body.light-mode .cc-obs-input::placeholder,
body.light-mode .informe-textarea::placeholder {
    color: #94a3b8;
}

body.light-mode .cc-select.cc-bueno,
body.light-mode .cc-state-pill.cc-bueno {
    background: #ecfdf3;
    border-color: #a7f3d0;
    color: #059669;
}

body.light-mode .cc-select.cc-regular,
body.light-mode .cc-state-pill.cc-regular {
    background: #fffbeb;
    border-color: #fcd34d;
    color: #b45309;
}

body.light-mode .cc-select.cc-reproceso,
body.light-mode .cc-state-pill.cc-reproceso {
    background: #fff1f2;
    border-color: #fda4af;
    color: #e11d48;
}

body.light-mode .cc-select.cc-revision,
body.light-mode .cc-state-pill.cc-revision {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #2563eb;
}

body.light-mode .cc-foto-thumb {
    border-color: #d9e4ef;
    color: #64748b;
}

body.light-mode .cc-foto-thumb.dark {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    color: #2563eb;
}

body.light-mode .cc-foto-thumb.dark2 {
    background: linear-gradient(135deg, #e0f2fe, #c7d2fe);
    color: #1d4ed8;
}

body.light-mode .cc-foto-thumb.dark3 {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    color: #1e40af;
}

body.light-mode .cc-foto-thumb.add-btn {
    background: #f8fbff;
    border-color: #cbd5e1;
    color: #64748b;
}

body.light-mode .cc-foto-meta,
body.light-mode .cc-fotos-hint {
    color: #5f6f84;
}

body.light-mode .cc-meta-label {
    color: #5c6b80;
}

body.light-mode .cc-meta-value {
    color: #223a57;
}

body.light-mode .cc-badge-result {
    background: #fff5d6;
    border-color: #e6c977;
    color: #84550a;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

body.light-mode .resol-overlay {
    background: rgba(15, 23, 42, 0.36);
}

body.light-mode .resol-modal {
    background: #ffffff;
    border-color: #d9e4ef;
    box-shadow: 0 32px 80px rgba(15, 23, 42, 0.24);
}

body.light-mode .resol-modal-footer,
body.light-mode .resol-modal-body,
body.light-mode .resol-steps-bar {
    background: #ffffff;
}

body.light-mode .resol-modal-footer,
body.light-mode .resol-modal-body,
body.light-mode .resol-steps-bar,
body.light-mode .resol-modal-header {
    border-color: #d9e4ef;
}

body.light-mode .resol-modal-header {
    /* background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%); */
    background: linear-gradient(135deg, color-mix(in srgb, var(--company-primary) 20%, #000) 0%, var(--company-primary) 100%) !important;
}

body.light-mode .resol-modal-close {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

body.light-mode .resol-step-dot {
    background: #e2e8f0;
    color: #64748b;
}

body.light-mode .resol-step-sep {
    background: #d9e4ef;
}

body.light-mode .resol-step-lbl,
body.light-mode .resol-step-counter,
body.light-mode .resol-warning-text,
body.light-mode .resol-panel-sub,
body.light-mode .resol-drop-sub,
body.light-mode .resol-download-sub {
    color: #5f6f84;
}

body.light-mode .resol-step-item.active .resol-step-lbl {
    color: #2563eb;
}

body.light-mode .resol-step-item.done .resol-step-lbl {
    color: #059669;
}

body.light-mode .resol-warning-box {
    background: #fff9eb;
    border-color: #fbd38d;
}

body.light-mode .resol-warning-title,
body.light-mode .resol-panel-title,
body.light-mode .resol-download-title,
body.light-mode .resol-drop-title {
    color: #243b53;
}

body.light-mode .resol-panel-title i,
body.light-mode .resol-summary-title i {
    color: #2563eb;
}

body.light-mode .resol-summary {
    background: #f8fbff;
    border-color: #d9e4ef;
}

body.light-mode .resol-decision-box {
    background: #ffffff;
    border-color: #d9e4ef;
}

body.light-mode .resol-decision-title {
    color: #243b53;
}

body.light-mode .resol-decision-title i {
    color: #2563eb;
}

body.light-mode .resol-decision-btn {
    background: #f8fbff;
    border-color: #c9d8e8;
    color: #3b4f65;
}

body.light-mode .resol-decision-btn i {
    color: #6b7c93;
}

body.light-mode .resol-decision-btn.is-approve.active {
    border-color: #16a34a;
    background: #dcfce7;
    color: #166534;
}

body.light-mode .resol-decision-btn.is-approve.active i {
    color: #166534;
}

body.light-mode .resol-decision-btn.is-reject.active {
    border-color: #e11d48;
    background: #ffe4e6;
    color: #9f1239;
}

body.light-mode .resol-decision-btn.is-reject.active i {
    color: #9f1239;
}

body.light-mode .resol-summary-title {
    color: #5f6f84;
}

body.light-mode .resol-summary-item span {
    color: #6b7c93;
}

body.light-mode .resol-summary-item strong {
    color: #243b53;
}

body.light-mode .resol-confirm-check {
    background: #ecfdf3;
    border-color: #a7f3d0;
    color: #1f2937;
}

body.light-mode .resol-firma-tab,
body.light-mode .informe-tool-btn,
body.light-mode .wa-cancel-btn {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #475569;
}

body.light-mode .resol-firma-tab.active {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #2563eb;
}

body.light-mode .informe-tool-btn--success {
    background: #ecfdf3;
    border-color: #a7f3d0;
    color: #059669;
}

body.light-mode .resol-canvas-wrap,
body.light-mode .resol-drop-zone,
body.light-mode .resol-file-item {
    background: #f8fbff;
    border-color: #d9e4ef;
}

body.light-mode .resol-canvas {
    background: #ffffff;
    border: 1px solid #d9e4ef;
}

body.light-mode .resol-canvas-hint,
body.light-mode .resol-drop-icon {
    color: #94a3b8;
}

body.light-mode .resol-firma-ok {
    background: #ecfdf3;
    border-color: #a7f3d0;
    color: #059669;
}

body.light-mode .resol-download-card {
    background: #eff6ff;
    border-color: #bfdbfe;
}

body.light-mode .resol-download-icon {
    color: #2563eb;
}

body.light-mode .resol-fisica-step {
    color: #243b53;
}

body.light-mode .resol-drop-zone.is-dragover {
    background: #eaf3ff;
    border-color: #93c5fd;
}

body.light-mode .resol-final-summary {
    background: #ecfdf3;
    border-color: #a7f3d0;
}

body.light-mode .resol-final-row {
    color: #059669;
}

body.light-mode .resol-final-row.is-pending {
    color: #6b7280;
}

body.light-mode .resol-final-warning {
    background: #fef2f2;
    border-color: #fecaca;
    color: #b42318;
}

body.light-mode .resol-next-btn,
body.light-mode .resol-download-btn,
body.light-mode .resol-cta-btn {
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
    color: #ffffff;
}

body.light-mode .resol-next-btn.green:not(.is-blocked) {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    border-color: rgba(16, 185, 129, 0.94);
}

body.light-mode .resol-next-btn.is-blocked {
    background: #94a3b8;
    border: 1px solid #94a3b8;
    color: #ffffff;
}

body.rop-resolution-open {
    overflow: hidden;
}

@media (max-width: 1199px) {

    .pres-servicio-row,
    .pres-servicio-row--compact {
        grid-template-columns: 42px minmax(200px, 1fr) minmax(100px, auto) minmax(132px, auto) minmax(132px, auto);
        gap: 16px;
    }

    .pres-servicio-row--budget-no-operational {
        grid-template-columns: 42px minmax(220px, 1fr) minmax(100px, auto) minmax(132px, auto) minmax(132px, auto) minmax(180px, 1fr);
    }

    .pres-servicio-row--budget-no-operational-no-approval {
        grid-template-columns: 42px minmax(220px, 1fr) minmax(100px, auto) minmax(132px, auto) minmax(132px, auto);
    }

    .pres-servicio-row--ready {
        grid-template-columns: 42px minmax(210px, 1fr) minmax(120px, auto) minmax(150px, auto) minmax(100px, auto) minmax(132px, auto) minmax(132px, auto);
    }

    .pres-servicio-row .pres-svc-aprobacion,
    .pres-servicio-row .pres-svc-col:nth-child(6),
    .pres-servicio-row .pres-svc-col:nth-child(7),
    .pres-servicio-row .pres-svc-mecanico {
        grid-column: auto;
    }

    .taller-top-grid,
    .cc-bottom-grid {
        grid-template-columns: 1fr;
    }

    .pres-productos-block--service {
        margin-left: 20px;
    }
}

@media (max-width: 767px) {

    .pres-signature-grid,
    .resol-summary-grid,
    .cc-fotos-grid,
    .retiro-ratings-grid {
        grid-template-columns: 1fr;
    }

    .pres-servicio-row--labels {
        display: none;
    }

    .pres-productos-block--service {
        margin: 8px 8px 12px;
        padding: 10px;
    }

    .pres-productos-context {
        flex-wrap: wrap;
    }

    .pres-productos-context strong {
        margin-left: 0;
    }

    .pres-servicio-row,
    .pres-servicio-row--compact,
    .pres-servicio-row--ready,
    .pres-servicio-row--headline {
        grid-template-columns: 42px 1fr;
    }

    .pres-productos-block {
        padding-left: 18px;
    }

    .pres-totales-block {
        margin: 12px 0 0;
        max-width: none;
    }

    .rop-budget-summary-grid {
        grid-template-columns: 1fr;
    }

    .rop-budget-summary-table-wrap {
        padding: 12px 14px 16px;
    }

    .rop-budget-summary-table tbody tr td {
        padding: 9px 10px;
    }

    .rop-budget-summary-item--balance {
        grid-column: auto;
    }

    .retiro-encuesta-header,
    .resol-modal-header,
    .resol-modal-footer,
    .resol-download-card,
    .resol-cta-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .taller-oc-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .taller-oc-header-top {
        width: 100%;
    }

    .taller-oc-header-meta {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .taller-oc-num {
        font-size: 22px;
    }

    .taller-oc-inline-summary {
        grid-template-columns: 1fr;
        row-gap: 7px;
    }

    .taller-oc-inline-summary__left,
    .taller-oc-inline-summary__right {
        grid-column: 1 / -1;
        justify-content: flex-start;
        width: 100%;
        text-align: left;
        justify-self: start;
    }

    .taller-oc-inline-summary__supplier strong {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .taller-section-title-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    #ropWorkshopPoSummaryDate {
        white-space: normal;
    }

    .retiro-encuesta-toggle-wrap {
        margin-left: 0;
    }

    .resol-steps-bar {
        flex-wrap: wrap;
        gap: 8px;
    }

    .resol-step-sep {
        display: none;
    }
}

.rop-photo-carousel--diagnostic .rop-photo-carousel__item,
.rop-diagnostic-placeholder-card {
    width: 300px;
    min-width: 300px;
}

.rop-photo-carousel--diagnostic .rop-photo-carousel__item img,
.rop-diagnostic-placeholder-card {
    height: 180px;
}

.rop-diagnostic-placeholder-card {
    border: 1px solid var(--rop-border);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(18, 28, 44, 0.9) 0%, rgba(34, 44, 62, 0.84) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(226, 232, 240, 0.78);
    overflow: hidden;
}

.rop-diagnostic-placeholder-card:nth-child(2n) {
    background: linear-gradient(135deg, rgba(12, 20, 33, 0.94) 0%, rgba(26, 36, 52, 0.82) 100%);
}

.rop-diagnostic-placeholder-card:nth-child(3n) {
    background: linear-gradient(135deg, rgba(24, 35, 53, 0.9) 0%, rgba(46, 52, 64, 0.82) 100%);
}

.rop-diagnostic-placeholder-card i {
    font-size: 44px;
}

body.light-mode .rop-photo-carousel--diagnostic .rop-photo-carousel__item {
    background: #ffffff;
    border-color: #d9e4ef;
}

body.light-mode .rop-photo-carousel--diagnostic .rop-photo-carousel__arrow {
    background: rgba(255, 255, 255, 0.94);
    border-color: #d9e4ef;
    color: #64748b;
}

body.light-mode .rop-diagnostic-placeholder-card {
    border-color: #d9e4ef;
    background: linear-gradient(135deg, #f8fafc 0%, #edf4ff 100%);
    color: #9aa9be;
}

body.light-mode .rop-diagnostic-placeholder-card:nth-child(2n) {
    background: linear-gradient(135deg, #f1f5f9 0%, #e8f1fb 100%);
}

body.light-mode .rop-diagnostic-placeholder-card:nth-child(3n) {
    background: linear-gradient(135deg, #eef2ff 0%, #e2ebf9 100%);
}

.rop-photo-carousel--quality .rop-photo-carousel__item {
    width: 240px;
    min-width: 240px;
}

.rop-photo-carousel--quality .rop-photo-carousel__item img {
    height: 160px;
}

body.light-mode .rop-photo-carousel--quality .rop-photo-carousel__item {
    background: #ffffff;
    border-color: #d9e4ef;
}

body.light-mode .rop-photo-carousel--quality .rop-photo-carousel__arrow {
    background: rgba(255, 255, 255, 0.94);
    border-color: #d9e4ef;
    color: #64748b;
}

@media (max-width: 767px) {

    .rop-photo-carousel--diagnostic .rop-photo-carousel__item,
    .rop-diagnostic-placeholder-card {
        width: 220px;
        min-width: 220px;
    }

    .rop-photo-carousel--diagnostic .rop-photo-carousel__item img,
    .rop-diagnostic-placeholder-card {
        height: 150px;
    }

    .rop-photo-carousel--quality .rop-photo-carousel__item {
        width: 210px;
        min-width: 210px;
    }

    .rop-photo-carousel--quality .rop-photo-carousel__item img {
        height: 146px;
    }
}

.rop-step.rop-step--estimate-diagnostic {
    border-color: rgba(88, 144, 204, 0.52);
    background: linear-gradient(145deg, rgba(20, 54, 90, 0.78), rgba(17, 47, 78, 0.78));
}

.rop-step.rop-step--estimate-diagnostic::before {
    background: linear-gradient(90deg, #4d7faf, #5f8fbd);
}

.rop-step.rop-step--estimate-diagnostic .rop-step__icon {
    background: rgba(86, 136, 188, 0.2);
    color: #b6d0ea;
}

.rop-step.rop-step--estimate-diagnostic .rop-step__status {
    color: #bed8ef;
}

.rop-step.rop-step--estimate-budget {
    border-color: rgba(173, 124, 63, 0.52);
    background: linear-gradient(145deg, rgba(102, 68, 30, 0.8), rgba(83, 55, 23, 0.8));
}

.rop-step.rop-step--estimate-budget::before {
    background: linear-gradient(90deg, #9f7440, #b7894e);
}

.rop-step.rop-step--estimate-budget .rop-step__icon {
    background: rgba(180, 133, 74, 0.2);
    color: #dfc29b;
}

.rop-step.rop-step--estimate-budget .rop-step__status {
    color: #e5ccb0;
}

body.light-mode .rop-step.rop-step--estimate-diagnostic {
    background: #ffffff;
    border-color: rgba(75, 122, 176, 0.38);
}

body.light-mode .rop-step.rop-step--estimate-diagnostic .rop-step__name,
body.light-mode .rop-step.rop-step--estimate-diagnostic .rop-step__status {
    color: #3f4958;
}

body.light-mode .rop-step.rop-step--estimate-budget {
    background: #ffffff;
    border-color: rgba(173, 124, 63, 0.4);
}

body.light-mode .rop-step.rop-step--estimate-budget .rop-step__name,
body.light-mode .rop-step.rop-step--estimate-budget .rop-step__status {
    color: #3f4958;
}

body.light-mode .pres-lock-chip--editable {
    color: #1f7a5d;
    background: rgba(16, 185, 129, 0.22);
    border-color: rgba(16, 150, 106, 0.52);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

body.light-mode .pres-lock-chip--locked {
    color: #8a4f08;
    background: rgba(245, 158, 11, 0.3);
    border-color: rgba(196, 117, 14, 0.64);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.resol-modal {
    max-width: 690px;
}

.resol-modal-header,
.resol-modal-footer {
    padding: 12px 16px;
}

.resol-steps-bar {
    padding: 10px 16px;
}

.resol-modal-body {
    padding: 14px 16px;
}

.resol-panel[data-resol-panel="1"] .resol-warning-box,
.resol-panel[data-resol-panel="1"] .resol-confirm-check,
.resol-panel[data-resol-panel="1"] .resol-summary,
.resol-panel[data-resol-panel="1"] .resol-decision-box,
.resol-panel[data-resol-panel="1"] .resol-notes-box {
    margin-bottom: 10px;
}

.resol-panel[data-resol-panel="1"] .resol-warning-box {
    padding: 12px 14px;
    gap: 10px;
}

.resol-panel[data-resol-panel="1"] .resol-warning-title {
    margin-bottom: 6px;
}

.resol-panel[data-resol-panel="1"] .resol-warning-text {
    margin-bottom: 6px;
    line-height: 1.45;
}

.resol-panel[data-resol-panel="1"] .resol-warning-text:last-child {
    margin-bottom: 0;
}

.resol-panel[data-resol-panel="1"] .resol-summary,
.resol-panel[data-resol-panel="1"] .resol-decision-box {
    padding: 12px 14px;
}

.resol-panel[data-resol-panel="1"] .resol-confirm-check {
    padding: 10px 12px;
}

.resol-notes-box {
    border: 1px solid var(--rop-border);
    border-radius: 12px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.02);
}

.resol-notes-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    color: var(--rop-title);
    font-size: 12px;
    font-weight: 800;
}

.resol-notes-label i {
    color: #93c5fd;
    font-size: 14px;
}

.resol-notes-textarea {
    width: 100%;
    min-height: 66px;
    border-radius: 10px;
    border: 1px solid var(--rop-border);
    background: rgba(255, 255, 255, 0.03);
    color: var(--rop-title);
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.4;
    resize: vertical;
}

body.light-mode .resol-notes-box {
    background: #f8fbff;
    border-color: #d9e4ef;
}

body.light-mode .resol-notes-label {
    color: #243b53;
}

body.light-mode .resol-notes-label i {
    color: #2563eb;
}

body.light-mode .resol-notes-textarea {
    background: #ffffff;
    border-color: #d9e4ef;
    color: #243b53;
}

@media (max-width: 767px) {
    .resol-overlay {
        padding: 10px;
    }

    .resol-modal {
        max-height: 92vh;
        border-radius: 12px;
    }

    .resol-modal-header,
    .resol-modal-footer {
        padding: 10px 12px;
    }

    .resol-modal-header {
        position: relative;
        flex-direction: row;
        align-items: flex-start;
        padding-right: 56px;
    }

    .resol-modal-header-left {
        width: 100%;
        min-width: 0;
        align-items: flex-start;
    }

    .resol-modal-close {
        position: absolute;
        top: 10px;
        right: 12px;
        margin-left: 0;
        flex-shrink: 0;
    }

    .resol-steps-bar {
        padding: 9px 12px;
    }

    .resol-modal-body {
        padding: 12px;
    }

    .resol-canvas {
        height: 190px;
    }
}

@media (max-width: 991px) {
    .repair-order-professional {
        overflow-x: hidden;
    }

    .repair-order-professional__container {
        padding-left: 10px;
        padding-right: 10px;
    }

    .repair-order-professional__hero {
        margin-bottom: 12px;
    }

    .repair-order-professional__hero-right,
    .repair-order-professional__actions {
        width: 100%;
    }

    .repair-order-professional__actions {
        gap: 8px;
    }

    .repair-order-professional__timeline-card {
        padding: 12px;
        overflow: hidden;
    }

    .repair-order-professional__timeline-head {
        margin: -12px -12px 0;
        padding: 12px;
        gap: 12px;
    }

    .repair-order-professional__timeline-meta {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
    }

    .repair-order-professional__timeline-meta-item {
        width: auto;
        margin: 0;
        padding: 9px 10px;
        border: 1px solid var(--rop-border);
        border-radius: 10px;
        background: rgba(15, 23, 42, 0.18);
    }

    .repair-order-professional__timeline-meta-item:last-child {
        padding-right: 10px;
        border-right: 1px solid var(--rop-border);
    }

    .repair-order-professional__timeline-state--whatsapp,
    .repair-order-professional__timeline-state--whatsapp .repair-order-professional__wa-btn {
        width: 100%;
    }

    .repair-order-professional__timeline-state--whatsapp .repair-order-professional__wa-btn {
        justify-content: center;
    }

    .repair-order-professional__step-topbar {
        margin-left: -12px;
        margin-right: -12px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .repair-order-professional__step-track {
        display: flex !important;
        grid-template-columns: none !important;
        gap: 10px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 2px 2px 10px;
        margin: 0 -2px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .repair-order-professional__step-track::-webkit-scrollbar {
        height: 6px;
    }

    .repair-order-professional__step-track::-webkit-scrollbar-thumb {
        background: rgba(148, 163, 184, 0.38);
        border-radius: 8px;
    }

    .rop-step {
        flex: 0 0 220px;
        min-height: 92px;
        padding: 13px 12px 12px;
        scroll-snap-align: start;
    }

    .rop-step__icon {
        top: 12px;
        left: 12px;
        width: 36px;
        height: 36px;
    }

    .rop-step__name {
        padding: 0 26px 0 42px;
        min-height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .rop-step__duration,
    .rop-step__status {
        padding-left: 42px;
        padding-right: 18px;
    }

    .rop-card__section-body {
        padding: 14px;
    }

    .taller-top-grid,
    .cc-bottom-grid,
    .pres-signature-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .repair-order-professional .table-responsive,
    .rop-workshop-parts-table-wrap,
    .rop-workshop-services-table-wrap {
        max-height: none;
        overflow: visible;
    }

    .repair-order-professional .pres-table,
    .repair-order-professional .pres-abonos-table,
    .repair-order-professional .taller-table,
    .repair-order-professional .taller-svc-table,
    .repair-order-professional .cc-table,
    .repair-order-professional .rop-card .table {
        display: block;
        width: 100%;
    }

    .repair-order-professional .pres-table thead,
    .repair-order-professional .pres-abonos-table thead,
    .repair-order-professional .taller-table thead,
    .repair-order-professional .taller-svc-table thead,
    .repair-order-professional .cc-table thead,
    .repair-order-professional .rop-card .table thead {
        display: none;
    }

    .repair-order-professional .pres-table tbody,
    .repair-order-professional .pres-abonos-table tbody,
    .repair-order-professional .taller-table tbody,
    .repair-order-professional .taller-svc-table tbody,
    .repair-order-professional .cc-table tbody,
    .repair-order-professional .rop-card .table tbody {
        display: block;
    }

    .repair-order-professional .pres-table tr,
    .repair-order-professional .pres-abonos-table tr,
    .repair-order-professional .taller-table tr,
    .repair-order-professional .taller-svc-table tr,
    .repair-order-professional .cc-table tr,
    .repair-order-professional .rop-card .table tr {
        display: block;
        margin: 10px 12px;
        padding: 10px 12px;
        border: 1px solid rgba(148, 163, 184, 0.18);
        border-radius: 12px;
        background: rgba(15, 23, 42, 0.3);
    }

    .repair-order-professional .pres-table tr:nth-child(even),
    .repair-order-professional .pres-abonos-table tr:nth-child(even),
    .repair-order-professional .taller-table tr:nth-child(even),
    .repair-order-professional .taller-svc-table tr:nth-child(even),
    .repair-order-professional .cc-table tr:nth-child(even),
    .repair-order-professional .rop-card .table tr:nth-child(even) {
        background: rgba(30, 64, 105, 0.28);
    }

    .repair-order-professional .pres-table td,
    .repair-order-professional .pres-abonos-table td,
    .repair-order-professional .taller-table td,
    .repair-order-professional .taller-svc-table td,
    .repair-order-professional .cc-table td,
    .repair-order-professional .rop-card .table td {
        display: flex;
        width: 100% !important;
        min-width: 0 !important;
        align-items: flex-start;
        justify-content: space-between;
        gap: 14px;
        padding: 8px 0;
        border-bottom: 1px solid rgba(148, 163, 184, 0.1);
        background: transparent !important;
        text-align: right !important;
        white-space: normal;
    }

    .repair-order-professional .pres-table td:last-child,
    .repair-order-professional .pres-abonos-table td:last-child,
    .repair-order-professional .taller-table td:last-child,
    .repair-order-professional .taller-svc-table td:last-child,
    .repair-order-professional .cc-table td:last-child,
    .repair-order-professional .rop-card .table td:last-child {
        border-bottom: 0;
    }

    .repair-order-professional table td::before {
        content: attr(data-rop-label);
        flex: 0 0 42%;
        max-width: 42%;
        color: var(--rop-text-soft);
        font-size: 11px;
        font-weight: 800;
        line-height: 1.35;
        text-align: left;
        text-transform: uppercase;
        letter-spacing: 0.25px;
    }

    .repair-order-professional table td[data-rop-label=""] {
        justify-content: flex-start;
        text-align: left !important;
    }

    .repair-order-professional table td[data-rop-label=""]::before,
    .repair-order-professional table td[colspan]::before {
        content: none;
    }

    .repair-order-professional table td[colspan] {
        display: block;
        text-align: center !important;
    }

    .pres-table-approval-cell .pres-svc-aprobacion {
        justify-content: flex-end;
    }

    .pres-servicio-row--labels {
        display: none !important;
    }

    .pres-servicio-block {
        border-bottom: 0;
    }

    .pres-servicio-row,
    .pres-servicio-row--compact,
    .pres-servicio-row--budget-no-operational,
    .pres-servicio-row--budget-no-operational-no-approval,
    .pres-servicio-row--ready,
    .pres-servicio-row--headline {
        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr) !important;
        gap: 8px 12px !important;
        margin: 10px 12px !important;
        padding: 12px !important;
        border: 1px solid rgba(148, 163, 184, 0.18) !important;
        border-radius: 12px !important;
        background: rgba(15, 23, 42, 0.3) !important;
    }

    .pres-avatar {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    .pres-svc-name {
        grid-column: 2;
        min-width: 0;
    }

    .pres-svc-mecanico,
    .pres-svc-col,
    .pres-svc-aprobacion {
        grid-column: 1 / -1 !important;
        width: 100%;
    }

    .pres-svc-mecanico,
    .pres-svc-col {
        display: flex;
        justify-content: space-between;
        gap: 14px;
        padding-top: 7px;
        border-top: 1px solid rgba(148, 163, 184, 0.1);
        text-align: right;
    }

    .pres-svc-mecanico::before,
    .pres-svc-col::before,
    .pres-svc-aprobacion::before {
        content: attr(data-rop-mobile-label);
        color: var(--rop-text-soft);
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.25px;
        text-align: left;
    }

    .pres-svc-aprobacion {
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding-top: 8px;
        border-top: 1px solid rgba(148, 163, 184, 0.1);
    }

    .pres-productos-block,
    .pres-productos-block--service,
    .pres-productos-block--standalone {
        margin: 10px 12px 12px !important;
        padding: 0 !important;
        border-left: 0 !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }

    .pres-productos-context {
        padding: 10px 12px;
        margin: 0;
        flex-wrap: wrap;
    }

    .pres-productos-context strong {
        margin-left: 0;
        width: 100%;
    }

    .pres-resumen,
    .rop-step-panel[data-step-panel="6"] .pres-resumen {
        padding: 12px !important;
    }

    .rop-budget-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rop-budget-summary-table-wrap {
        padding: 12px;
    }

    .rop-budget-summary-table tbody tr td:first-child {
        width: 58%;
    }

    .rop-budget-summary-table tbody tr td:last-child {
        width: 42%;
    }

    .rop-budget-summary-item--balance {
        grid-column: 1 / -1;
    }

    .resol-cta-card,
    .retiro-encuesta-header {
        gap: 12px;
    }

    body.light-mode .repair-order-professional__timeline-meta-item,
    body.light-mode .repair-order-professional .pres-table tr,
    body.light-mode .repair-order-professional .pres-abonos-table tr,
    body.light-mode .repair-order-professional .taller-table tr,
    body.light-mode .repair-order-professional .taller-svc-table tr,
    body.light-mode .repair-order-professional .cc-table tr,
    body.light-mode .repair-order-professional .rop-card .table tr,
    body.light-mode .pres-servicio-row,
    body.light-mode .pres-servicio-row--compact,
    body.light-mode .pres-servicio-row--budget-no-operational,
    body.light-mode .pres-servicio-row--budget-no-operational-no-approval,
    body.light-mode .pres-servicio-row--ready,
    body.light-mode .pres-servicio-row--headline {
        background: #ffffff !important;
        border-color: #d9e4ef;
    }

    body.light-mode .repair-order-professional .pres-table tr:nth-child(even),
    body.light-mode .repair-order-professional .pres-abonos-table tr:nth-child(even),
    body.light-mode .repair-order-professional .taller-table tr:nth-child(even),
    body.light-mode .repair-order-professional .taller-svc-table tr:nth-child(even),
    body.light-mode .repair-order-professional .cc-table tr:nth-child(even),
    body.light-mode .repair-order-professional .rop-card .table tr:nth-child(even) {
        background: #f7fbff !important;
    }
}

@media (max-width: 767px) {
    .repair-order-professional__container {
        padding-left: 8px;
        padding-right: 8px;
    }

    .repair-order-professional__title {
        gap: 6px;
        line-height: 1.15;
    }

    .repair-order-professional__stats-grid {
        display: flex;
        grid-template-columns: none;
        gap: 10px;
        margin-left: -8px;
        margin-right: -8px;
        padding: 0 8px 8px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .repair-order-professional__stats-grid::-webkit-scrollbar {
        height: 5px;
    }

    .repair-order-professional__stats-grid::-webkit-scrollbar-thumb {
        background: rgba(148, 163, 184, 0.35);
        border-radius: 8px;
    }

    .repair-order-professional__stat-card {
        flex: 0 0 252px;
        max-width: 252px;
        min-height: 0;
        padding: 9px 10px;
        scroll-snap-align: start;
    }

    .repair-order-professional__stat-head {
        margin-bottom: 5px;
    }

    .repair-order-professional__stat-label {
        font-size: 12px;
    }

    .repair-order-professional__stat-value,
    .repair-order-professional__stat-main,
    .repair-order-professional__stat-secondary,
    .repair-order-professional__stat-separator {
        font-size: 24px;
        line-height: 1.05;
    }

    .repair-order-professional__stat-note {
        padding: 6px 9px;
        font-size: 11px;
    }

    .repair-order-professional__stat-popover-btn {
        padding: 5px 8px;
        font-size: 11px;
    }

    .repair-order-professional__stat-actions {
        gap: 6px;
    }

    .repair-order-professional__stat-actions .btn {
        padding: 5px 9px;
        font-size: 11px;
    }

    .repair-order-professional__icon {
        width: 34px;
        height: 34px;
        font-size: 17px;
    }

    .repair-order-professional__timeline-meta {
        grid-template-columns: 1fr;
    }

    .repair-order-professional__timeline-meta-item {
        align-items: center;
    }

    .repair-order-professional__timeline-meta-text {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: baseline;
        gap: 5px;
        min-width: 0;
        width: 100%;
    }

    .repair-order-professional__timeline-meta-label {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .repair-order-professional__timeline-meta-value {
        flex: 1 1 auto;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .repair-order-professional__step-title {
        letter-spacing: 0.8px;
    }

    .repair-order-professional__step-complete {
        font-size: 11px !important;
        padding: 4px 8px;
    }

    .rop-step {
        flex-basis: min(82vw, 270px);
        min-height: 88px !important;
    }

    .rop-step__name {
        min-height: 30px;
        font-size: 12px !important;
    }

    .rop-step__duration,
    .rop-step__status {
        font-size: 11px !important;
    }

    .rop-card__title--budget-order-details,
    .resol-cta-card,
    .retiro-encuesta-header {
        flex-direction: column;
        align-items: stretch;
    }

    .rop-budget-approve-all-btn,
    .resol-cta-btn {
        width: 100%;
        justify-content: center;
    }

    .rop-budget-summary-grid {
        grid-template-columns: 1fr;
    }

    .rop-budget-summary-table-wrap {
        padding: 10px;
    }

    .rop-budget-summary-table tbody tr td {
        display: block;
        width: 100% !important;
        text-align: left !important;
        padding: 8px 10px;
    }

    .rop-budget-summary-table tbody tr td:last-child {
        padding-top: 0;
        padding-bottom: 10px;
        text-align: right !important;
    }

    .repair-order-professional .pres-table tr,
    .repair-order-professional .pres-abonos-table tr,
    .repair-order-professional .taller-table tr,
    .repair-order-professional .taller-svc-table tr,
    .repair-order-professional .cc-table tr,
    .repair-order-professional .rop-card .table tr,
    .pres-servicio-row,
    .pres-servicio-row--compact,
    .pres-servicio-row--budget-no-operational,
    .pres-servicio-row--budget-no-operational-no-approval,
    .pres-servicio-row--ready,
    .pres-servicio-row--headline,
    .pres-productos-block,
    .pres-productos-block--service,
    .pres-productos-block--standalone {
        margin-left: 0;
        margin-right: 0;
    }

    .repair-order-professional .pres-table td,
    .repair-order-professional .pres-abonos-table td,
    .repair-order-professional .taller-table td,
    .repair-order-professional .taller-svc-table td,
    .repair-order-professional .cc-table td,
    .repair-order-professional .rop-card .table td {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        text-align: right !important;
    }

    .repair-order-professional table td::before {
        flex: 0 0 auto;
        max-width: 48%;
    }

    .pres-svc-mecanico,
    .pres-svc-col {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 5px;
        text-align: right;
    }

    .pres-svc-aprobacion {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        text-align: left;
    }

    .pres-approval-options {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .pres-lock-chip {
        align-self: flex-start;
    }

    .taller-foto-row {
        flex-direction: column;
        align-items: stretch;
    }

    .taller-arrow {
        transform: rotate(90deg);
        align-self: center;
    }

    .chat-input-row {
        gap: 6px;
    }

    .chat-input {
        min-width: 0;
    }
}

@media (max-width: 767px) {
    .repair-order-professional .rop-card {
        border-radius: 12px;
        overflow: hidden;
    }

    .repair-order-professional .rop-card>.rop-card__title,
    .repair-order-professional .rop-card--sectioned .rop-card__title,
    .repair-order-professional .rop-card--signatures .rop-card__title {
        margin: 0;
        padding: 11px 14px;
        border-radius: 0;
        background: rgba(148, 163, 184, 0.12);
        font-size: 14px;
    }

    .repair-order-professional .rop-card--sectioned>.rop-company,
    .repair-order-professional .rop-card--sectioned>.rop-vehicle {
        margin: 14px;
    }

    .repair-order-professional .rop-company {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .repair-order-professional .rop-company__logo {
        width: 96px;
        min-width: 96px;
        height: 96px;
        border: 0;
        background: rgba(148, 163, 184, 0.08);
    }

    .repair-order-professional .rop-company__info {
        width: 100%;
    }

    .repair-order-professional .rop-company__info h5 {
        margin-bottom: 14px;
        text-align: center;
        font-size: 18px;
        letter-spacing: 0.3px;
    }

    .repair-order-professional .rop-company__details {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .repair-order-professional .rop-company__col,
    .repair-order-professional .rop-vehicle__list,
    .repair-order-professional .rop-vehicle__qr {
        border: 1px solid rgba(148, 163, 184, 0.1);
        border-radius: 10px;
        background: rgba(15, 23, 42, 0.24);
        padding: 10px 12px;
    }

    .repair-order-professional .rop-company__info p,
    .repair-order-professional .rop-vehicle__list p,
    .repair-order-professional .rop-insurance p {
        display: grid;
        grid-template-columns: max-content minmax(0, 1fr);
        gap: 10px;
        align-items: start;
        margin: 0;
        padding: 7px 0;
        border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    }

    .repair-order-professional .rop-company__info p:last-child,
    .repair-order-professional .rop-vehicle__list p:last-child,
    .repair-order-professional .rop-insurance p:last-child {
        border-bottom: 0;
    }

    .repair-order-professional .rop-company__info p span,
    .repair-order-professional .rop-vehicle__list p span,
    .repair-order-professional .rop-insurance p span {
        min-width: 0;
        color: var(--rop-text);
        font-weight: 700;
        text-align: right;
        overflow-wrap: anywhere;
    }

    .repair-order-professional .rop-company__phone-separator {
        display: none;
    }

    .repair-order-professional .rop-company__phone-link {
        display: block;
        text-align: right;
    }

    .repair-order-professional .rop-vehicle {
        display: block;
    }

    .repair-order-professional .rop-vehicle__photo {
        width: 96px;
        height: 96px;
        margin: 4px auto 14px;
        border: 0;
        background: rgba(148, 163, 184, 0.08);
    }

    .repair-order-professional .rop-vehicle__list {
        margin-bottom: 10px;
    }

    .repair-order-professional .rop-vehicle__qr {
        min-height: 0;
        margin-top: 10px;
        padding: 14px 12px;
        max-width: 190px;
        margin-left: auto;
        margin-right: auto;
    }

    .repair-order-professional .rop-vehicle__qr img {
        width: 150px;
        height: 150px;
        margin-bottom: 10px;
    }

    .repair-order-professional .pres-abonos-table tr {
        position: relative;
        display: flex;
        flex-direction: column;
        min-height: 0;
        padding: 14px 16px 14px 66px;
        border-radius: 12px;
        box-shadow: 0 8px 20px rgba(2, 6, 23, 0.18);
    }

    .repair-order-professional .pres-abonos-table tr::before {
        content: "\eb3d";
        position: absolute;
        top: 16px;
        left: 16px;
        width: 38px;
        height: 38px;
        border-radius: 8px;
        background: linear-gradient(135deg, #06b6d4, #0891b2);
        color: #ffffff;
        font-family: boxicons !important;
        font-size: 20px;
        line-height: 38px;
        text-align: center;
    }

    .repair-order-professional .pres-abonos-table td {
        padding-left: 0;
        padding-right: 0;
    }

    .repair-order-professional .pres-abonos-table td:nth-child(3) {
        order: 1;
        padding-top: 0;
        padding-bottom: 2px;
        border-bottom: 0;
        color: var(--rop-title);
        font-size: 16px;
        font-weight: 800;
    }

    .repair-order-professional .pres-abonos-table td:nth-child(1) {
        order: 2;
        padding-top: 0;
        padding-bottom: 10px;
        color: var(--rop-text-soft);
        font-size: 11px;
        border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    }

    .repair-order-professional .pres-abonos-table td:nth-child(2) {
        order: 3;
        margin-top: 8px;
    }

    .repair-order-professional .pres-abonos-table td:nth-child(4) {
        order: 4;
        color: #22c55e;
        font-weight: 800;
    }

    .repair-order-professional .pres-abonos-table td:nth-child(5) {
        order: 5;
    }

    .repair-order-professional .pres-abonos-table td:nth-child(6) {
        order: 6;
    }

    .repair-order-professional .pres-abonos-table td:nth-child(7) {
        order: 7;
        align-items: flex-start;
    }

    .repair-order-professional .pres-abonos-table td:nth-child(1)::before,
    .repair-order-professional .pres-abonos-table td:nth-child(3)::before {
        content: none;
    }

    .repair-order-professional .pres-table tr {
        display: grid;
        grid-template-columns: 50px minmax(0, 1fr);
        gap: 8px 12px;
        padding: 14px 16px;
        border-radius: 12px;
        box-shadow: 0 8px 20px rgba(2, 6, 23, 0.16);
    }

    .repair-order-professional .pres-table td:nth-child(1) {
        grid-column: 1;
        grid-row: 1 / span 2;
        align-self: start;
        padding: 0;
        border-bottom: 0;
    }

    .repair-order-professional .pres-table td:nth-child(2) {
        grid-column: 2;
        padding: 0 0 10px;
        border-bottom: 1px solid rgba(148, 163, 184, 0.18);
        color: var(--rop-title);
        font-size: 15px;
        font-weight: 800;
        line-height: 1.2;
    }

    .repair-order-professional .pres-table td:nth-child(3),
    .repair-order-professional .pres-table td:nth-child(4),
    .repair-order-professional .pres-table td:nth-child(5),
    .repair-order-professional .pres-table td:nth-child(6),
    .repair-order-professional .pres-table td[colspan] {
        grid-column: 1 / -1;
    }

    .repair-order-professional .pres-table td:nth-child(1)::before,
    .repair-order-professional .pres-table td:nth-child(2)::before {
        content: none;
    }

    .repair-order-professional .pres-table td[colspan] {
        grid-row: auto;
        padding: 10px 0;
        text-align: center !important;
    }

    .repair-order-professional .pres-table td[colspan]::before,
    .repair-order-professional .pres-table-approval-cell::before {
        content: none;
    }

    .repair-order-professional .pres-product-thumb {
        width: 42px;
        height: 42px;
        border-radius: 8px;
    }

    .repair-order-professional .pres-product-name-cell {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px;
    }

    .repair-order-professional .pres-table-approval-cell,
    .repair-order-professional .pres-svc-aprobacion {
        border: 1px solid rgba(148, 163, 184, 0.16);
        border-radius: 8px;
        background: rgba(15, 23, 42, 0.2);
        padding: 10px;
    }

    .repair-order-professional .pres-table-approval-cell {
        display: block !important;
        margin-top: 4px;
        text-align: left !important;
    }

    .repair-order-professional .pres-table-approval-cell .pres-svc-aprobacion {
        border: 0;
        background: transparent;
        padding: 0;
    }

    .repair-order-professional .pres-servicio-row,
    .repair-order-professional .pres-servicio-row--compact,
    .repair-order-professional .pres-servicio-row--budget-no-operational,
    .repair-order-professional .pres-servicio-row--budget-no-operational-no-approval,
    .repair-order-professional .pres-servicio-row--ready,
    .repair-order-professional .pres-servicio-row--headline {
        grid-template-columns: 50px minmax(0, 1fr) !important;
        padding: 14px 16px;
        border-radius: 12px;
        box-shadow: 0 8px 20px rgba(2, 6, 23, 0.16);
    }

    .repair-order-professional .pres-avatar {
        width: 42px;
        height: 42px;
        grid-row: 1;
        align-self: start;
        border-radius: 8px;
        font-size: 14px;
    }

    .repair-order-professional .pres-svc-name {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px;
        min-height: 42px;
        padding-bottom: 10px;
        border-bottom: 1px solid rgba(148, 163, 184, 0.18);
        color: var(--rop-title);
        font-size: 15px;
        font-weight: 800;
        line-height: 1.2;
    }

    .repair-order-professional .pres-svc-mecanico,
    .repair-order-professional .pres-svc-col {
        padding-top: 8px;
    }

    .repair-order-professional .rop-wa-modal__chip {
        flex-wrap: nowrap;
        align-items: center;
    }

    .repair-order-professional .rop-wa-modal__chip b {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .repair-order-professional .rop-wa-modal__chip span {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .repair-order-professional .taller-svc-table td:nth-child(5) {
        display: block;
        width: 100% !important;
        padding-top: 10px;
        text-align: left !important;
    }

    .repair-order-professional .taller-svc-table td:nth-child(5)::before {
        display: block;
        max-width: none;
        margin-bottom: 8px;
        color: var(--rop-text-soft);
        font-size: 11px;
        font-weight: 800;
        line-height: 1.25;
        text-align: left;
        text-transform: uppercase;
        letter-spacing: 0.25px;
    }

    .repair-order-professional .taller-svc-table td:nth-child(5) .taller-foto-row {
        display: block;
        width: 100%;
    }

    .repair-order-professional .taller-svc-table td:nth-child(5) .taller-foto-group {
        width: 100%;
        min-width: 0;
        padding: 8px;
        border: 1px solid rgba(148, 163, 184, 0.14);
        border-radius: 10px;
        background: rgba(15, 23, 42, 0.18);
    }

    .repair-order-professional .taller-svc-table td:nth-child(5) .taller-foto-label {
        margin-bottom: 6px;
        font-size: 10px;
        line-height: 1;
    }

    .repair-order-professional .taller-svc-table td:nth-child(5) .svc-mini-strip {
        width: 100%;
        max-width: none;
        gap: 6px;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .repair-order-professional .taller-svc-table td:nth-child(5) .svc-foto-thumb {
        width: 50px;
        height: 50px;
        border-radius: 8px;
    }

    .repair-order-professional .taller-svc-table td:nth-child(5) .taller-arrow {
        display: block;
        width: 24px;
        margin: 8px auto;
        transform: rotate(90deg);
        text-align: center;
        line-height: 1;
    }

    .repair-order-professional .pres-svc-aprobacion::before {
        margin-bottom: 2px;
        color: var(--rop-title);
        font-size: 12px;
    }

    .repair-order-professional .pres-approval-options {
        width: 100%;
        justify-content: space-between;
        gap: 10px;
    }

    body.light-mode .repair-order-professional .rop-card>.rop-card__title,
    body.light-mode .repair-order-professional .rop-card--sectioned .rop-card__title,
    body.light-mode .repair-order-professional .rop-card--signatures .rop-card__title {
        background: #ececec;
        border-bottom-color: #eceff3;
    }

    body.light-mode .repair-order-professional .rop-company__col,
    body.light-mode .repair-order-professional .rop-vehicle__list,
    body.light-mode .repair-order-professional .rop-vehicle__qr,
    body.light-mode .repair-order-professional .taller-svc-table td:nth-child(5) .taller-foto-group,
    body.light-mode .repair-order-professional .pres-table-approval-cell,
    body.light-mode .repair-order-professional .pres-svc-aprobacion {
        background: #f8fafc;
        border-color: #edf1f5;
    }

    body.light-mode .repair-order-professional .pres-abonos-table tr,
    body.light-mode .repair-order-professional .pres-table tr,
    body.light-mode .repair-order-professional .pres-servicio-row,
    body.light-mode .repair-order-professional .pres-servicio-row--compact,
    body.light-mode .repair-order-professional .pres-servicio-row--budget-no-operational,
    body.light-mode .repair-order-professional .pres-servicio-row--budget-no-operational-no-approval,
    body.light-mode .repair-order-professional .pres-servicio-row--ready,
    body.light-mode .repair-order-professional .pres-servicio-row--headline {
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    }

    body.light-mode .repair-order-professional .rop-company__logo,
    body.light-mode .repair-order-professional .rop-vehicle__photo {
        background: #f8fafc;
    }
}

@media (max-width: 1199px) {
    .repair-order-professional .pres-servicio-row--labels {
        display: none !important;
    }
}

.repair-order-professional textarea,
.repair-order-professional .rop-note-textarea,
.repair-order-professional .informe-textarea,
.repair-order-professional .rop-wa-modal__message,
.repair-order-professional .resol-notes-textarea {
    min-height: 200px !important;
    max-height: 600px !important;
    resize: vertical !important;
    overflow: auto;
}

/* Stats Cards Visual Polish */
.repair-order-professional__stat-card {
    border-radius: 12px;
    border-color: rgba(148, 163, 184, 0.28);
    background: linear-gradient(160deg, rgba(30, 41, 59, 0.96), rgba(24, 34, 50, 0.96));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 8px 18px rgba(2, 8, 23, 0.16);
    padding: 10px 12px 11px;
    min-height: 106px;
}

.repair-order-professional__stat-card--reminder {
    background: linear-gradient(160deg, rgba(31, 43, 62, 0.97), rgba(22, 33, 49, 0.97));
}

.repair-order-professional__stat-head--compact,
.repair-order-professional__stat-head--reminder {
    gap: 7px;
}

.repair-order-professional__stat-label {
    font-size: 13px !important;
    font-weight: 700;
    letter-spacing: 0.1px;
}

.repair-order-professional__stat-value,
.repair-order-professional__stat-main {
    font-size: 22px !important;
    font-weight: 700;
}

.repair-order-professional__stat-secondary {
    font-size: 18px !important;
}

.repair-order-professional__stat-separator {
    font-size: 15px !important;
    opacity: 0.9;
}

.repair-order-professional__icon {
    width: 31px;
    height: 31px;
    font-size: 15px !important;
}

.repair-order-professional__stat-main-row {
    justify-content: space-between;
    margin-top: 5px;
    gap: 6px;
}

.repair-order-professional__stat-main-row--quotes {
    align-items: center;
    gap: 10px;
}

.repair-order-professional__stat-actions {
    gap: 5px;
}

.repair-order-professional__stat-actions .badge {
    font-size: 10.5px;
    padding: 4px 8px;
    letter-spacing: 0.1px;
}

.repair-order-professional__quote-bars {
    margin-top: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 8px;
    flex: 1 1 auto;
    min-width: 0;
}

.repair-order-professional__quote-row {
    font-size: 11px;
    margin-bottom: 0;
    grid-template-columns: 56px minmax(34px, 1fr) 18px;
    gap: 4px;
}

body.light-mode .repair-order-professional__stat-card {
    background: linear-gradient(165deg, #ffffff, #f9fcff);
    border-color: #d7e1eb;
    box-shadow: 0 7px 16px rgba(15, 23, 42, 0.07);
}

body.light-mode .repair-order-professional__stat-card--reminder {
    background: linear-gradient(165deg, #ffffff, #f4f9ff);
}

body.light-mode .repair-order-professional__stat-label {
    color: #5b6b7d;
}

body.light-mode .repair-order-professional__stat-value,
body.light-mode .repair-order-professional__stat-main {
    color: #2b3a4f;
}

@media (max-width: 767px) {

    .repair-order-professional__stat-value,
    .repair-order-professional__stat-main {
        font-size: 19px !important;
    }

    .repair-order-professional__stat-secondary {
        font-size: 16px !important;
    }

    .repair-order-professional__stat-card {
        min-height: 102px;
    }

    .repair-order-professional__stat-main-row--quotes {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .repair-order-professional__stat-main-row--quotes .repair-order-professional__quote-bars {
        width: 100%;
        grid-template-columns: 1fr;
    }
}

/* Stats Cards Redesign */
.repair-order-professional__stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 12px;
    align-items: stretch;
}

.repair-order-professional__stat-card {
    --rop-stat-accent: var(--rop-info);
    position: relative;
    overflow: hidden;
    min-height: 0;
    padding: 11px 12px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.08), transparent 42%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.92) 0%, rgba(30, 41, 59, 0.98) 100%);
    box-shadow: 0 18px 34px rgba(2, 8, 23, 0.22);
}

.repair-order-professional__stat-card:before {
    display: none;
}

.repair-order-professional__stat-card--reminder {
    --rop-stat-accent: #fbbf24;
    background:
        radial-gradient(circle at top right, rgba(251, 191, 36, 0.16), transparent 46%),
        linear-gradient(180deg, rgba(45, 34, 18, 0.94) 0%, rgba(30, 41, 59, 0.98) 100%);
}

.repair-order-professional__stat-card--orders {
    --rop-stat-accent: #4f8cff;
    background:
        radial-gradient(circle at top right, rgba(79, 140, 255, 0.16), transparent 46%),
        linear-gradient(180deg, rgba(18, 30, 56, 0.94) 0%, rgba(30, 41, 59, 0.98) 100%);
}

.repair-order-professional__stat-card--appointments {
    --rop-stat-accent: #18d399;
    background:
        radial-gradient(circle at top right, rgba(24, 211, 153, 0.16), transparent 46%),
        linear-gradient(180deg, rgba(14, 42, 33, 0.94) 0%, rgba(30, 41, 59, 0.98) 100%);
}

.repair-order-professional__stat-card--quotes {
    --rop-stat-accent: #22b9e7;
    background:
        radial-gradient(circle at top right, rgba(34, 185, 231, 0.16), transparent 46%),
        linear-gradient(180deg, rgba(15, 39, 48, 0.94) 0%, rgba(30, 41, 59, 0.98) 100%);
}

.repair-order-professional__stat-shell {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
}

.repair-order-professional__stat-topline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.repair-order-professional__stat-head--compact,
.repair-order-professional__stat-head--reminder {
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
}

.repair-order-professional__stat-heading {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.repair-order-professional__stat-heading--reminder {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.repair-order-professional__stat-label {
    margin: 0;
    color: rgba(226, 232, 240, 0.86);
    font-size: 11px !important;
    font-weight: 700;
    letter-spacing: 0.16px;
    line-height: 1.2;
}

.repair-order-professional__icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    font-size: 16px !important;
    box-shadow: none;
}

.repair-order-professional__stat-content {
    display: grid;
    grid-template-columns: minmax(72px, auto) minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 54px;
}

.repair-order-professional__stat-content--reminder {
    grid-template-columns: 1fr;
    gap: 8px;
}

.repair-order-professional__stat-content--quotes {
    grid-template-columns: minmax(72px, auto) minmax(0, 1fr);
}

.repair-order-professional__stat-primary {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 7px;
}

.repair-order-professional__stat-primary--reminder {
    gap: 8px;
}

.repair-order-professional__stat-side {
    min-width: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.repair-order-professional__stat-side--reminder,
.repair-order-professional__stat-side--quotes {
    align-self: stretch;
}

.repair-order-professional__stat-side--reminder {
    justify-content: flex-start;
}

.repair-order-professional__stat-value,
.repair-order-professional__stat-main {
    margin: 0;
    color: var(--rop-title);
    font-size: 28px !important;
    font-weight: 800;
    line-height: 0.92;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.repair-order-professional__stat-secondary {
    color: rgba(226, 232, 240, 0.68);
    font-size: 18px !important;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.repair-order-professional__stat-separator {
    color: rgba(226, 232, 240, 0.45);
    font-size: 14px !important;
    font-weight: 700;
    line-height: 1;
}

.repair-order-professional__stat-rich {
    margin-top: 0;
    display: flex;
    align-items: flex-end;
    gap: 5px;
    min-width: 0;
    flex-wrap: wrap;
}

.repair-order-professional__stat-rich--title {
    flex: 0 0 auto;
    align-items: baseline;
    gap: 3px;
    flex-wrap: nowrap;
}

.repair-order-professional__stat-rich--title .repair-order-professional__stat-main {
    font-size: 22px !important;
}

.repair-order-professional__stat-rich--title .repair-order-professional__stat-secondary {
    font-size: 15px !important;
}

.repair-order-professional__stat-rich--title .repair-order-professional__stat-separator {
    font-size: 12px !important;
}

.repair-order-professional__stat-meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.repair-order-professional__pill {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 8px;
    background: rgba(251, 191, 36, 0.16);
    border: 1px solid rgba(251, 191, 36, 0.32);
    color: #ffe08a;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.repair-order-professional__services-counter {
    margin-top: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: rgba(226, 232, 240, 0.72);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
}

.repair-order-professional__services-counter strong {
    color: var(--rop-title);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.repair-order-professional__stat-popover-wrap {
    margin-top: 0;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
}

.repair-order-professional__stat-popover-btn {
    width: 100%;
    min-height: 34px;
    padding: 6px 8px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.06);
    color: var(--rop-title);
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.repair-order-professional__stat-card--reminder .repair-order-professional__stat-popover-btn {
    width: 100%;
    min-height: 34px;
    padding: 6px 8px;
}

.repair-order-professional__stat-popover-meta {
    gap: 7px;
    min-width: 0;
}

.repair-order-professional__stat-popover-label {
    color: var(--rop-title);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.15;
    text-align: left;
    white-space: normal;
}

.repair-order-professional__stat-popover-count-badge {
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    background: rgba(59, 130, 246, 0.18);
    border-color: rgba(96, 165, 250, 0.35);
    color: #bfdbfe;
    font-size: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.repair-order-professional__stat-popover-meta .bx {
    color: #bfdbfe;
    font-size: 15px;
}

.repair-order-professional__stat-actions {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    width: 100%;
}

.repair-order-professional__stat-action {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 27px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.08);
    color: var(--rop-title) !important;
    font-size: 10px !important;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
    text-decoration: none;
    box-shadow: none;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.repair-order-professional__stat-action:hover,
.repair-order-professional__stat-action:focus {
    transform: translateY(-1px);
    text-decoration: none;
}

.repair-order-professional__stat-action--info {
    border-color: rgba(96, 165, 250, 0.3);
    background: rgba(59, 130, 246, 0.18);
    color: #dbeafe !important;
}

.repair-order-professional__stat-action--success {
    border-color: rgba(52, 211, 153, 0.3);
    background: rgba(16, 185, 129, 0.18);
    color: #d1fae5 !important;
}

.repair-order-professional__stat-action--neutral {
    border-color: rgba(148, 163, 184, 0.22);
    background: rgba(100, 116, 139, 0.16);
    color: #e2e8f0 !important;
}

.repair-order-professional__quote-bars {
    width: 100%;
    margin-top: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.repair-order-professional__quote-row {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
    font-size: 10px;
    color: rgba(226, 232, 240, 0.76);
}

.repair-order-professional__quote-row b {
    min-width: 14px;
    color: var(--rop-title);
    text-align: right;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.repair-order-professional__bar {
    height: 7px;
    background: rgba(148, 163, 184, 0.18);
}

.repair-order-professional__bar span {
    transition: width 0.25s ease;
}

body.light-mode .repair-order-professional__stat-card {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.7), transparent 44%),
        linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%);
    border-color: rgba(148, 163, 184, 0.28);
    box-shadow: 0 10px 20px rgba(148, 163, 184, 0.14);
}

body.light-mode .repair-order-professional__stat-card--reminder {
    background:
        radial-gradient(circle at top right, rgba(251, 191, 36, 0.18), transparent 44%),
        linear-gradient(180deg, #ffffff 0%, #fff8ea 100%);
}

body.light-mode .repair-order-professional__stat-card--orders {
    background:
        radial-gradient(circle at top right, rgba(79, 140, 255, 0.18), transparent 44%),
        linear-gradient(180deg, #ffffff 0%, #f0f5ff 100%);
}

body.light-mode .repair-order-professional__stat-card--appointments {
    background:
        radial-gradient(circle at top right, rgba(24, 211, 153, 0.18), transparent 44%),
        linear-gradient(180deg, #ffffff 0%, #f0fff9 100%);
}

body.light-mode .repair-order-professional__stat-card--quotes {
    background:
        radial-gradient(circle at top right, rgba(34, 185, 231, 0.18), transparent 44%),
        linear-gradient(180deg, #ffffff 0%, #f0faff 100%);
}

body.light-mode .repair-order-professional__stat-label,
body.light-mode .repair-order-professional__services-counter,
body.light-mode .repair-order-professional__quote-row {
    color: #59687a;
}

body.light-mode .repair-order-professional__stat-separator {
    color: #7a8797;
}

body.light-mode .repair-order-professional__stat-value,
body.light-mode .repair-order-professional__stat-main,
body.light-mode .repair-order-professional__stat-secondary,
body.light-mode .repair-order-professional__services-counter strong,
body.light-mode .repair-order-professional__quote-row b,
body.light-mode .repair-order-professional__stat-popover-label {
    color: #223047;
}

body.light-mode .repair-order-professional__stat-popover-btn {
    background: #eef3f9;
    border-color: #c7d4e2;
    color: #223047;
}

body.light-mode .repair-order-professional__pill {
    background: rgba(251, 191, 36, 0.18);
    color: #8a5b00;
    border-color: rgba(217, 119, 6, 0.24);
}

body.light-mode .repair-order-professional__stat-popover-count-badge {
    background: #dce9ff;
    border-color: #9fc0f7;
    color: #2557b7;
}

body.light-mode .repair-order-professional__stat-popover-meta .bx {
    color: #2557b7;
}

body.light-mode .repair-order-professional__stat-action {
    border-color: #c9d6e4;
    background: #eef3f8;
    color: #2a3d58 !important;
}

body.light-mode .repair-order-professional__stat-action--info {
    border-color: #abc7f7;
    background: #deebff;
    color: #2855b2 !important;
}

body.light-mode .repair-order-professional__stat-action--success {
    border-color: #9adfcd;
    background: #e2faf2;
    color: #187657 !important;
}

body.light-mode .repair-order-professional__stat-action--neutral {
    border-color: #cbd5e1;
    background: #f1f5f9;
    color: #334155 !important;
}

body.light-mode .repair-order-professional__bar {
    background: #e2e8f0;
}

@media (max-width: 1199px) {
    .repair-order-professional__stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .repair-order-professional__stat-card {
        padding: 13px 14px;
    }

    .repair-order-professional__stat-content--reminder {
        grid-template-columns: 1fr;
    }

    .repair-order-professional__stat-side--reminder {
        justify-content: flex-start;
    }

    .repair-order-professional__stat-popover-wrap {
        justify-content: flex-start;
    }
}

@media (max-width: 767px) {
    .repair-order-professional__stats-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        margin: 0 0 12px;
        padding: 0;
        overflow: visible;
    }

    .repair-order-professional__stat-card {
        flex: initial;
        max-width: none;
        padding: 13px 13px 12px;
        border-radius: 16px;
    }

    .repair-order-professional__stat-content,
    .repair-order-professional__stat-content--quotes {
        grid-template-columns: 1fr;
        gap: 10px;
        min-height: 0;
    }

    .repair-order-professional__stat-value,
    .repair-order-professional__stat-main {
        font-size: 30px !important;
    }

    .repair-order-professional__stat-secondary {
        font-size: 18px !important;
    }

    .repair-order-professional__stat-side,
    .repair-order-professional__stat-side--quotes {
        justify-content: flex-start;
    }

    .repair-order-professional__stat-actions {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        gap: 6px;
    }

    .repair-order-professional__stat-action {
        min-height: 28px;
        padding: 0 11px;
        font-size: 10.5px !important;
    }

    .repair-order-professional__stat-popover-wrap,
    .repair-order-professional__stat-popover-btn {
        width: 100%;
    }

    .repair-order-professional__quote-row {
        grid-template-columns: 62px minmax(0, 1fr) auto;
        gap: 6px;
    }
}

@media (max-width: 420px) {

    .repair-order-professional__stat-head--compact,
    .repair-order-professional__stat-head--reminder {
        gap: 8px;
    }

    .repair-order-professional__icon {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
        font-size: 16px !important;
    }

    .repair-order-professional__stat-value,
    .repair-order-professional__stat-main {
        font-size: 28px !important;
    }

    .repair-order-professional__stat-rich {
        gap: 4px;
    }

    .repair-order-professional__quote-row {
        grid-template-columns: 58px minmax(0, 1fr) auto;
        font-size: 10.5px;
    }
}

.repair-order-professional__timeline-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.repair-order-professional__actions--timeline {
    width: auto;
    order: 1;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.repair-order-professional__actions--timeline .btn {
    margin-left: 0 !important;
}

.repair-order-professional__timeline-actions .repair-order-professional__wa-btn {
    order: 2;
    width: auto;
    justify-content: center;
}

.repair-order-professional__stats-carousel-nav {
    display: none;
}

@media (max-width: 991px) {
    .repair-order-professional__timeline-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 767px) {
    .repair-order-professional__stats-grid {
        display: flex !important;
        grid-template-columns: none !important;
        gap: 12px;
        margin: 0 -8px 12px;
        padding: 0 8px 10px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 8px;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    .repair-order-professional__stats-grid::-webkit-scrollbar {
        height: 5px;
    }

    .repair-order-professional__stats-grid::-webkit-scrollbar-thumb {
        background: rgba(148, 163, 184, 0.35);
        border-radius: 999px;
    }

    .repair-order-professional__stat-card {
        flex: 0 0 clamp(280px, 88vw, 330px) !important;
        width: clamp(280px, 88vw, 330px);
        max-width: clamp(280px, 88vw, 330px);
        min-height: 0;
        margin-bottom: 0;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .repair-order-professional__stats-carousel-nav {
        margin: -2px 0 12px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
    }

    .repair-order-professional__stats-carousel-nav.is-hidden {
        display: none;
    }

    .repair-order-professional__stats-carousel-btn {
        width: 34px;
        height: 34px;
        border-radius: 999px;
        border: 1px solid rgba(148, 163, 184, 0.28);
        background: rgba(255, 255, 255, 0.06);
        color: var(--rop-title);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        box-shadow: 0 6px 14px rgba(15, 23, 42, 0.18);
    }

    .repair-order-professional__stats-carousel-btn i {
        font-size: 18px;
        line-height: 1;
    }

    .repair-order-professional__stats-carousel-btn:disabled {
        opacity: 0.42;
    }
}

/* ==========================================================================
   WHATSAPP STYLE WORKSHOP CHAT SYSTEM (Strict border-radius: 8px max)
   ========================================================================== */

#ropWorkshopChatMessages {
    background-color: #50616c66 !important;
    background-image:
        radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 0),
        radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 0) !important;
    background-size: 16px 16px !important;
    background-position: 0 0, 8px 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 16px 20px !important;
    display: flex;
    flex-direction: column;
    gap: 12px !important;
    border-radius: 8px !important;
    /* Strict max 8px */
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    max-height: 420px !important;
}

body.light-mode #ropWorkshopChatMessages {
    background-color: #efeae2 !important;
    /* WhatsApp Light Wallpaper */
    background-image:
        radial-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 0),
        radial-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 0) !important;
    border: 1px solid #e1e9eb !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

/* WhatsApp Custom Sleek Scrollbar */
#ropWorkshopChatMessages::-webkit-scrollbar {
    width: 6px;
}

#ropWorkshopChatMessages::-webkit-scrollbar-track {
    background: transparent;
}

#ropWorkshopChatMessages::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}

body.light-mode #ropWorkshopChatMessages::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
}

/* Chat Message Containers */
#ropWorkshopChatMessages .chat-msg {
    margin-bottom: 2px;
}

/* WhatsApp Style Chat Bubbles */
#ropWorkshopChatMessages .chat-bubble {
    position: relative;
    max-width: 75% !important;
    padding: 8px 12px 6px !important;
    /* Proper bottom padding */
    border-radius: 8px !important;
    /* Strict max 8px */
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.18) !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 430px !important;
    /* Ensure min-width holds metadata nicely */
    border: none !important;
}

/* Flex items ordering to place content at top and metadata at bottom */
#ropWorkshopChatMessages .chat-bubble-text,
#ropWorkshopChatMessages .chat-attachments {
    order: 1 !important;
}

#ropWorkshopChatMessages .chat-time {
    order: 2 !important;
    align-self: flex-end !important;
    margin-top: 4px !important;
    font-size: 9px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-weight: normal !important;
    white-space: nowrap !important;
}

/* Outgoing Bubble (Sent / Right Aligned) */
#ropWorkshopChatMessages .chat-bubble.out {
    background: #005c4b !important;
    /* WhatsApp Dark Green Outgoing Bubble */
    color: #e9edef !important;
    border-top-right-radius: 0px !important;
    /* Sharp corner style */
    margin-left: auto;
}

body.light-mode #ropWorkshopChatMessages .chat-bubble.out {
    background: #d9fdd3 !important;
    /* WhatsApp Light Green Outgoing Bubble */
    color: #111b21 !important;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12) !important;
}

/* Incoming Bubble (Received / Left Aligned) */
#ropWorkshopChatMessages .chat-bubble.in {
    background: #202c33 !important;
    /* WhatsApp Dark Gray Incoming Bubble */
    color: #e9edef !important;
    border-top-left-radius: 0px !important;
    /* Sharp corner style */
    margin-right: auto;
}

body.light-mode #ropWorkshopChatMessages .chat-bubble.in {
    background: #ffffff !important;
    /* WhatsApp Light White Incoming Bubble */
    color: #111b21 !important;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) !important;
}

/* WhatsApp Meta: Time & Checks */
#ropWorkshopChatMessages .chat-bubble.out .chat-time {
    padding-right: 18px !important;
    /* Space for the absolute checkmarks */
}

#ropWorkshopChatMessages .chat-bubble.in .chat-time {
    padding-right: 0 !important;
}

#ropWorkshopChatMessages .chat-check {
    position: absolute;
    bottom: 4px;
    right: 8px;
    font-size: 12px !important;
    color: #53bdeb !important;
    /* WhatsApp iconic double blue checks */
    line-height: 1 !important;
    font-weight: bold !important;
    display: inline-block !important;
}

body.light-mode #ropWorkshopChatMessages .chat-time {
    color: rgba(17, 27, 33, 0.45) !important;
}

/* WhatsApp Style Voice Notes & Audio Attachments */
#ropWorkshopChatMessages .chat-attachment--audio {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-top: 4px;
    width: 100%;
}

#ropWorkshopChatMessages .chat-attachment-audio-shell {
    background: rgba(0, 0, 0, 0.18) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px !important;
    /* Strict max 8px */
    padding: 8px 10px !important;
    display: flex;
    align-items: center;
    gap: 12px !important;
}

body.light-mode #ropWorkshopChatMessages .chat-attachment-audio-shell {
    background: rgba(0, 0, 0, 0.04) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* Audio Player Play/Pause button */
#ropWorkshopChatMessages .chat-attachment-audio-icon {
    background: #128c7e !important;
    /* WhatsApp classic green theme */
    color: #ffffff !important;
    border-radius: 50% !important;
    width: 34px !important;
    height: 34px !important;
    border: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Audio open action button */
#ropWorkshopChatMessages .chat-attachment-audio-open {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #e9edef !important;
    border-radius: 6px !important;
    width: 28px !important;
    height: 28px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.light-mode #ropWorkshopChatMessages .chat-attachment-audio-open {
    background: rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #111b21 !important;
}

/* Audio Player control elements overrides */
#ropWorkshopChatMessages .chat-attachment-audio {
    flex: 1 1 auto;
    height: 32px !important;
}

/* Voice Note Metadata block */
#ropWorkshopChatMessages .chat-attachment-audio-meta {
    margin-top: 5px;
    display: flex;
    justify-content: space-between;
    font-size: 10px !important;
    color: rgba(255, 255, 255, 0.45) !important;
}

body.light-mode #ropWorkshopChatMessages .chat-attachment-audio-meta {
    color: rgba(17, 27, 33, 0.5) !important;
}

#ropWorkshopChatMessages .chat-attachment-kind {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* WhatsApp Document & File Attachments */
#ropWorkshopChatMessages .chat-attachment {
    background: rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px !important;
    /* Strict max 8px */
    padding: 8px 12px !important;
    margin-top: 4px;
}

body.light-mode #ropWorkshopChatMessages .chat-attachment {
    background: rgba(0, 0, 0, 0.03) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

#ropWorkshopChatMessages .chat-attachment-link {
    color: #34b7f1 !important;
    /* WhatsApp blue info link */
    font-weight: 700;
    font-size: 11px !important;
    text-decoration: none;
}

#ropWorkshopChatMessages .chat-attachment-link:hover {
    text-decoration: underline;
}

#ropWorkshopChatMessages .chat-attachment-name {
    font-size: 11px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    margin-top: 2px;
}

body.light-mode #ropWorkshopChatMessages .chat-attachment-name {
    color: rgba(17, 27, 33, 0.8) !important;
}

/* ==========================================================================
   WORKSHOP CHAT COMPOSER AND DARK/LIGHT POLISH
   ========================================================================== */

#ropWorkshopChatMessages .chat-empty-state {
    border: 1px dashed rgba(134, 150, 160, 0.24);
    border-radius: 8px;
    background: rgba(17, 27, 33, 0.82);
    color: #8696a0;
}

#ropWorkshopChatMessages .chat-attachment-head,
#ropWorkshopChatMessages .chat-attachment-audio-meta .chat-attachment-name {
    color: rgba(233, 237, 239, 0.68) !important;
}

#ropWorkshopChatMessages .chat-attachment-image {
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}

#ropWorkshopChatMessages .chat-attachment-audio {
    color-scheme: dark;
}

#ropWorkshopChatPendingFiles {
    margin-bottom: 2px;
    border-style: dashed;
    border-color: rgba(134, 150, 160, 0.28);
    background: linear-gradient(180deg, rgba(17, 27, 33, 0.96) 0%, rgba(14, 21, 27, 0.96) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

#ropWorkshopChatPendingFiles .chat-pending-files-title {
    color: #e9edef;
    letter-spacing: 0.02em;
}

#ropWorkshopChatPendingFiles .chat-pending-file-item {
    background: rgba(32, 44, 51, 0.92);
    border-color: rgba(134, 150, 160, 0.22);
    color: #d1d7db;
}

#ropWorkshopChatPendingFiles .chat-pending-file-remove {
    color: #ff8696;
}

.chat-input-row {
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 8px;
    background: linear-gradient(180deg, rgba(17, 27, 33, 0.96) 0%, rgba(11, 20, 26, 0.96) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

#ropWorkshopChatInput {
    min-height: 40px;
    border-color: rgba(134, 150, 160, 0.2);
    background: #202c33;
    color: #e9edef;
    box-shadow: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

#ropWorkshopChatInput::placeholder {
    color: #8696a0;
}

#ropWorkshopChatInput:focus {
    border-color: rgba(83, 189, 235, 0.45);
    background: #22323a;
    box-shadow: 0 0 0 3px rgba(83, 189, 235, 0.14);
    outline: none;
}

#ropWorkshopChatAttach,
#ropWorkshopChatMic,
#ropWorkshopChatSend {
    flex: 0 0 38px;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

#ropWorkshopChatAttach,
#ropWorkshopChatMic {
    background: #202c33;
    border-color: rgba(134, 150, 160, 0.2);
    color: #aebac1;
}

#ropWorkshopChatSend {
    border-color: rgba(0, 168, 132, 0.5);
    background: linear-gradient(135deg, #00a884 0%, #017561 100%);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(0, 168, 132, 0.18);
}

#ropWorkshopChatAttach:hover,
#ropWorkshopChatAttach:focus,
#ropWorkshopChatMic:hover,
#ropWorkshopChatMic:focus {
    background: #26343c;
    border-color: rgba(83, 189, 235, 0.36);
    color: #d8e1e6;
    outline: none;
}

#ropWorkshopChatSend:hover,
#ropWorkshopChatSend:focus {
    background: linear-gradient(135deg, #0abf9a 0%, #02836c 100%);
    border-color: rgba(0, 168, 132, 0.72);
    color: #ffffff;
    transform: translateY(-1px);
    outline: none;
}

#ropWorkshopChatMic.is-recording {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.28) 0%, rgba(185, 28, 28, 0.32) 100%);
    border-color: rgba(248, 113, 113, 0.52);
    color: #ffe2e2;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.16);
}

body.light-mode #ropWorkshopChatMessages .chat-empty-state {
    border-color: rgba(17, 27, 33, 0.12);
    background: rgba(255, 255, 255, 0.86);
    color: #667781;
}

body.light-mode #ropWorkshopChatMessages .chat-attachment-head,
body.light-mode #ropWorkshopChatMessages .chat-attachment-audio-meta .chat-attachment-name {
    color: rgba(17, 27, 33, 0.58) !important;
}

body.light-mode #ropWorkshopChatMessages .chat-attachment-image {
    border-color: rgba(17, 27, 33, 0.08);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

body.light-mode #ropWorkshopChatMessages .chat-attachment-audio {
    color-scheme: light;
}

body.light-mode #ropWorkshopChatPendingFiles {
    border-color: rgba(17, 27, 33, 0.12);
    background: linear-gradient(180deg, rgba(244, 247, 250, 0.98) 0%, rgba(255, 255, 255, 0.98) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

body.light-mode #ropWorkshopChatPendingFiles .chat-pending-files-title {
    color: #111b21;
}

body.light-mode #ropWorkshopChatPendingFiles .chat-pending-file-item {
    background: #ffffff;
    border-color: rgba(17, 27, 33, 0.08);
    color: #41525d;
}

body.light-mode .chat-input-row {
    border-color: rgba(17, 27, 33, 0.08);
    background: linear-gradient(180deg, #f0f2f5 0%, #ffffff 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

body.light-mode #ropWorkshopChatInput {
    border-color: rgba(17, 27, 33, 0.1);
    background: #ffffff;
    color: #111b21;
}

body.light-mode #ropWorkshopChatInput::placeholder {
    color: #7b8794;
}

body.light-mode #ropWorkshopChatInput:focus {
    border-color: rgba(37, 99, 235, 0.34);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

body.light-mode #ropWorkshopChatAttach,
body.light-mode #ropWorkshopChatMic {
    background: #ffffff;
    border-color: rgba(17, 27, 33, 0.1);
    color: #52606d;
}

body.light-mode #ropWorkshopChatAttach:hover,
body.light-mode #ropWorkshopChatAttach:focus,
body.light-mode #ropWorkshopChatMic:hover,
body.light-mode #ropWorkshopChatMic:focus {
    background: #f8fbff;
    border-color: rgba(37, 99, 235, 0.22);
    color: #1f3c88;
}

body.light-mode #ropWorkshopChatSend {
    border-color: rgba(16, 185, 129, 0.2);
    background: linear-gradient(135deg, #25d366 0%, #17b455 100%);
    box-shadow: 0 8px 18px rgba(37, 211, 102, 0.16);
}

body.light-mode #ropWorkshopChatSend:hover,
body.light-mode #ropWorkshopChatSend:focus {
    border-color: rgba(16, 185, 129, 0.3);
    background: linear-gradient(135deg, #31de73 0%, #18be59 100%);
}

/* ==========================================================================
   Collapsible Warning Box Component Styles & Ripple pulse wave
   ========================================================================== */
.resol-warning-box.collapsible {
    display: block !important;
    padding: 0 !important;
    overflow: visible !important;
    border-radius: 7px !important;
    /* Max 7px border radius as per user feedback */
    transition: all 0.3s ease;
}

.resol-warning-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 14px;
    cursor: pointer;
    user-select: none;
}

.resol-warning-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.resol-warning-header-left .resol-warning-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    color: #fbbf24;
    font-size: 22px;
}

.resol-warning-header-left .resol-warning-title {
    margin: 0 !important;
    color: var(--rop-title);
    font-size: 14px;
    font-weight: 800;
}

/* Expandable body container and spacing */
.resol-warning-collapse-body {
    border-top: 1px solid rgba(234, 179, 8, 0.15);
    background: rgba(0, 0, 0, 0.05);
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
}

.resol-warning-collapse-body .resol-warning-content {
    padding: 14px 14px 14px 48px;
}

.resol-warning-collapse-body .resol-warning-content .resol-warning-text {
    margin-bottom: 8px;
    line-height: 1.5;
}

.resol-warning-collapse-body .resol-warning-content .resol-warning-text:last-child {
    margin-bottom: 0;
}

/* Pulsing chevron arrow button */
.resol-warning-toggle-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(234, 179, 8, 0.18);
    color: #fbbf24;
    cursor: pointer;
    font-size: 20px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1;
    overflow: visible !important;
}

/* Concentric water wave ripple pulse effect */
.resol-warning-toggle-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(251, 191, 36, 0.85);
    box-shadow: 0 0 6px rgba(251, 191, 36, 0.45);
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    animation: rop-warning-pulse 2.2s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;
}

.resol-warning-toggle-btn i {
    transition: transform 0.3s ease;
}

.resol-warning-box.is-expanded .resol-warning-toggle-btn i {
    transform: rotate(180deg);
}

@keyframes rop-warning-pulse {
    0% {
        inset: 0;
        border-radius: 50%;
        opacity: 0.8;
    }

    100% {
        inset: -10px;
        border-radius: 50%;
        opacity: 0;
    }
}

/* Light Mode Overrides */
body.light-mode .resol-warning-box.collapsible {
    border-radius: 7px !important;
}

body.light-mode .resol-warning-collapse-body {
    border-top-color: rgba(251, 211, 141, 0.4);
    background: rgba(0, 0, 0, 0.02);
}

body.light-mode .resol-warning-toggle-btn {
    background: rgba(251, 191, 36, 0.22);
}

@media (prefers-reduced-motion: reduce) {
    .resol-warning-toggle-btn::after {
        animation: none !important;
    }
}