#modal_comprobante {
    --mc-ink: #16241f;
    --mc-muted: #6b7a74;
    --mc-paper: #fbfbf9;
    --mc-line: #dfe4e0;
    --mc-icon-bg: #ffffff;
    --mc-accent: #12b76a;
    --mc-accent-dark: #0b4f3f;
    --mc-accent-mid: #12805c;
    --mc-danger: #e4572e;
    --mc-danger-dark: #7a2e1d;
    --mc-danger-mid: #c1502b;
    --mc-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;
}

/* Modo oscuro nativo de Bootstrap: data-bs-theme="dark" puede ir en <html>,
    <body> o cualquier contenedor — como el modal es descendiente, basta con
    redefinir aquí las mismas variables con tonos oscuros; ninguna otra regla
    del componente necesita tocarse. El degradado del header no cambia: es un
    color de marca/estado, no de superficie, así que se ve bien en ambos modos. */
[data-bs-theme="dark"] #modal_comprobante {
    --mc-ink: #edf2f0;
    --mc-muted: #98a6a0;
    --mc-paper: #1b2420;
    --mc-line: #33403a;
    --mc-icon-bg: #24322c;
}

#modal_comprobante .modal-comprobante-content {
    border: none;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 60px -12px rgba(15, 30, 25, .35);
}

/* --- Encabezado --- */
#modal_comprobante .modal-comprobante-header {
    background: linear-gradient(135deg, var(--mc-accent-dark) 0%, var(--mc-accent-mid) 100%);
    color: #fff;
    padding: 1.1rem 1.35rem 1.9rem;
    position: relative;
}

#modal_comprobante.modal-comprobante--rechazo .modal-comprobante-header {
    background: linear-gradient(135deg, var(--mc-danger-dark) 0%, var(--mc-danger-mid) 100%);
}

#modal_comprobante .modal-comprobante-header .modal-title {
    font-size: 1.05rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: .5rem;
}

#modal_comprobante .btn-close {
    filter: brightness(0) invert(1);
    opacity: .85;
}

#modal_comprobante .btn-close:hover {
    opacity: 1;
}

/* Perforado tipo "recibo" entre el header y el cuerpo */
#modal_comprobante .modal-comprobante-scallop {
    height: 16px;
    margin-top: -16px;
    background-image: radial-gradient(circle at 10px 8px, transparent 8px, var(--mc-paper) 8.5px);
    background-size: 22px 16px;
    background-repeat: repeat-x;
    background-position: center top;
}

/* --- Cuerpo / voucher --- */
#modal_comprobante .modal-comprobante-voucher {
    background: var(--mc-paper);
    color: var(--mc-ink);
    padding: 1.5rem 1.5rem 1.25rem;
}

#modal_comprobante .modal-comprobante-status .modal-comprobante-icon-wrap {
    width: 68px;
    height: 68px;
    margin: -2.9rem auto 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    background: var(--mc-icon-bg);
    color: var(--mc-accent);
    box-shadow: 0 6px 18px -4px rgba(15, 30, 25, .35);
    animation: mc-pop .45s cubic-bezier(.34, 1.56, .64, 1);
}

#modal_comprobante.modal-comprobante--rechazo .modal-comprobante-icon-wrap {
    color: var(--mc-danger);
}

@keyframes mc-pop {
    from {
        transform: scale(0);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    #modal_comprobante .modal-comprobante-icon-wrap {
        animation: none;
    }
}

#modal_comprobante .modal-comprobante-estado {
    font-weight: 700;
    font-size: 1.15rem;
    margin: .75rem 0 .15rem;
}

#modal_comprobante .modal-comprobante-mensaje {
    color: var(--mc-muted);
    font-size: .875rem;
}

#modal_comprobante .modal-comprobante-dashed {
    border: none;
    border-top: 1.5px dashed var(--mc-line);
    margin: 1.1rem 0;
}

#modal_comprobante .modal-comprobante-section-title {
    font-size: .78rem;
    font-weight: 600;
    color: var(--mc-muted);
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .6rem;
}

#modal_comprobante .modal-comprobante-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: .18rem 0;
    font-size: .9rem;
}

#modal_comprobante .modal-comprobante-row .label {
    color: var(--mc-muted);
}

#modal_comprobante .modal-comprobante-row .value {
    font-weight: 600;
    text-align: right;
    word-break: break-word;
}

#modal_comprobante .modal-comprobante-row .value.font-monospace {
    font-family: var(--mc-mono);
    font-weight: 500;
    letter-spacing: .2px;
}

#modal_comprobante .modal-comprobante-copy-btn {
    background: none;
    border: none;
    padding: 0 0 0 .35rem;
    color: var(--mc-muted);
    line-height: 1;
}

#modal_comprobante .modal-comprobante-copy-btn:hover {
    color: var(--mc-ink);
}

#modal_comprobante .modal-comprobante-monto-row .value {
    font-size: 1.15rem;
    color: var(--mc-accent-dark);
}

#modal_comprobante.modal-comprobante--rechazo .modal-comprobante-monto-row .value {
    color: var(--mc-danger-mid);
}

#modal_comprobante .modal-comprobante-folio {
    font-size: .72rem;
    color: var(--mc-muted);
    text-align: center;
    margin: 0;
}

#modal_comprobante .modal-comprobante-barcode {
    height: 30px;
    max-width: 220px;
    margin: .6rem auto 0;
    opacity: .55;
    background: repeating-linear-gradient(90deg,
            var(--mc-ink) 0 2px, transparent 2px 5px,
            var(--mc-ink) 5px 6px, transparent 6px 11px,
            var(--mc-ink) 11px 13px, transparent 13px 18px,
            var(--mc-ink) 18px 20px, transparent 20px 24px);
}

/* --- Footer --- */
#modal_comprobante .modal-comprobante-footer {
    background: var(--mc-paper);
    border-top: 1px dashed var(--mc-line);
    padding: 1rem 1.5rem 1.35rem;
    gap: .6rem;
}

#modal_comprobante .modal-comprobante-footer .btn {
    flex: 1 1 auto;
}

@media (max-width: 420px) {
    #modal_comprobante .modal-comprobante-footer {
        flex-direction: column-reverse;
    }

    #modal_comprobante .modal-comprobante-footer .btn {
        width: 100%;
    }

    #modal_comprobante .modal-comprobante-voucher {
        padding: 1.25rem 1.1rem 1rem;
    }
}

/* --- Impresión / descarga como PDF (diálogo nativo del navegador) ---
    Sin importar el data-bs-theme activo en pantalla, el papel impreso
    siempre debe verse igual: fondo blanco y texto oscuro. Redeclarar las
    variables aquí gana sobre la versión "dark" porque @media print se
    evalúa aparte del modo de color de la página. */
@media print {
    #modal_comprobante {
        --mc-ink: #16241f;
        --mc-muted: #6b7a74;
        --mc-paper: #ffffff;
        --mc-line: #dfe4e0;
        --mc-icon-bg: #ffffff;
    }

    body * {
        visibility: hidden;
    }

    #modal_comprobante_voucher,
    #modal_comprobante_voucher * {
        visibility: visible;
    }

    #modal_comprobante_voucher {
        position: fixed;
        inset: 0;
        margin: 0;
        padding: 32px;
        background: #fff;
        color: var(--mc-ink);
        color-scheme: light;
    }

    #modal_comprobante .modal-comprobante-icon-wrap {
        box-shadow: none;
    }
}