/* Fase 9.3 — CSS verbatim de los bloques de estilo de Pages/Common/Payment/MdCobranza.razor. Igual que hoy, es global mientras el componente está en pantalla:
   se enlaza con <link> donde estaba el bloque. Cambios: @@ → @ y capas D-51. */
    /* ── base ───────────────────────────────────────────────────────────
                   ESTRUCTURA DE VENTANA

                   .vm-root  = telón (backdrop). Ocupa toda la pantalla y oscurece lo de
                               atrás. NO contiene el layout: solo centra al panel.
                   .vm-panel = la ventana propiamente dicha. En Android ocupa el 100%
                               (pantalla completa, que es lo correcto en un teléfono); en
                               escritorio se recorta a una ventana centrada con borde y
                               sombra, así deja de estirarse a todo lo ancho del monitor.

                   Esto además arregla el overlay que se comía la pantalla entera: las
                   pantallas de "procesando" y "resultado" (.vm-full) son position:absolute
                   inset:0, y su ancestro posicionado ahora es .vm-panel, no la ventana.
                   ─────────────────────────────────────────────────────────────────── */
    .vm-root {
        position: fixed;
        inset: 0;
        z-index: var(--z-modal-3);
        background: rgba(14,22,36,.52);
        display: flex;
        align-items: stretch;
        justify-content: center;
        font-family: "Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
        font-size: 14px;
        color: #33404f;
        overscroll-behavior: contain
    }

    .vm-panel {
        /* isolation:isolate obliga a .vm-panel a crear su PROPIO contexto de
                   apilamiento. Sin esto, sus hijos posicionados (.vm-full con z-20,
                   .vm-toasts con z-40) se resuelven contra el contexto de .vm-root y
                   quedan a merced de cómo el compositor reordene las capas. Con el
                   contexto propio, nada de adentro puede salir por encima del modal
                   de envío pase lo que pase. */
        isolation: isolate;
        z-index: 0;
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        min-height: 0;
        background: #fff;
        overflow: hidden
    }

    .vm-root * {
        box-sizing: border-box
    }

    /* ══════════════════════════════════════════════════════════════════
                   EL OVERLAY DE LOS ENVÍOS — UN SOLO TELÓN

                   El problema nunca fue el apilamiento: era que se sumaban DOS telones.
                   El del modal de cobranza (rgba .52) y el del diálogo de envío
                   (rgba .42 + blur), uno encima del otro. De ahí el gris sucio.

                   Ocultar el modal entero tampoco servía: la ventana de cobranza
                   desaparecía de golpe y el cajero perdía el contexto de lo que estaba
                   haciendo.

                   Ahora, mientras hay un diálogo de envío arriba, el modal de cobranza
                   APAGA SU PROPIO TELÓN y se queda quieto detrás. Queda un solo velo,
                   el del diálogo, que es el comportamiento normal de cualquier diálogo
                   apilado.

                   Importante: el modal nunca se oculta. Si por lo que fuera el aviso de
                   cierre del diálogo no llegara, lo peor que pasa es que el modal quede
                   un instante sin telón — no que desaparezca y no vuelva.
                   ══════════════════════════════════════════════════════════════════ */
    .vm-root--envio {
        background: transparent
    }

        .vm-root--envio .vm-panel {
            box-shadow: none
        }
    /* ⚠ Acá estaba el botón con letras negras.
                   ".vm-root button" tiene especificidad 0-1-1 y ".vm-btn--pri" solo 0-1-0,
                   así que el color:inherit de esta regla le ganaba al color:#fff del botón
                   y el texto salía del color del body (#33404f) sobre el azul. Se deja el
                   inherit solo para los campos de formulario, que sí lo necesitan, y el
                   botón se queda con el color que le da su propia clase. */
    .vm-root input, .vm-root select, .vm-root textarea {
        font-family: inherit;
        color: inherit
    }

    .vm-root button {
        font-family: inherit
    }
    /* 16px evita el zoom automático de iOS al enfocar un campo */
    .vm-root input, .vm-root select, .vm-root textarea {
        font-size: 16px
    }

    /* ── barra superior fija ────────────────────────────────────────── */
    .vm-top {
        flex-shrink: 0;
        background: #fff;
        border-bottom: 1px solid #dbe2ec;
        padding-top: env(safe-area-inset-top)
    }

    .vm-top__bar {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 14px
    }

    .vm-top__x {
        width: 38px;
        height: 38px;
        flex-shrink: 0;
        border: 1px solid #dbe2ec;
        background: #fff;
        border-radius: 3px;
        color: #6b7a8d;
        font-size: 16px;
        line-height: 1
    }

    .vm-top__t {
        font-size: 14px;
        font-weight: 600;
        color: #16202e;
        line-height: 1.2
    }

    .vm-top__s {
        font-size: 11.5px;
        color: #8d9aab
    }

    .vm-neto {
        display: flex;
        align-items: baseline;
        gap: 8px;
        padding: 0 14px 10px
    }

        .vm-neto .vm-lbl {
            font-size: 10px;
            text-transform: uppercase;
            letter-spacing: .7px;
            color: #8d9aab;
            font-weight: 600
        }

        .vm-neto .vm-cur {
            font-size: 14px;
            font-weight: 600;
            color: #123a91;
            font-family: Consolas,monospace
        }

        .vm-neto .vm-val {
            margin-left: auto;
            font-family: Consolas,monospace;
            font-size: 26px;
            font-weight: 600;
            color: #123a91;
            letter-spacing: -.8px;
            font-variant-numeric: tabular-nums;
            line-height: 1
        }

    /* ── resumen de cobro en la barra fija ──────────────────────────── */
    .vm-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        padding: 0 14px 10px
    }

    .vm-chip {
        font-size: 11px;
        font-weight: 600;
        line-height: 1;
        padding: 5px 9px;
        border-radius: 3px;
        border: 1px solid transparent;
        white-space: nowrap
    }

    .vm-chip--pay {
        background: #eef2f8;
        border-color: #dbe2ec;
        color: #4d5a6b
    }

    .vm-chip--ok {
        background: #e6f5ee;
        border-color: #bfe3d2;
        color: #0f7a4d
    }

    .vm-chip--warn {
        background: #fdf3e2;
        border-color: #f0dcb4;
        color: #8a5a00
    }

    .vm-chip--bad {
        background: #fdeceb;
        border-color: #f5cdc9;
        color: #b42318
    }

    .vm-chip--ded {
        background: #f2f7fe;
        border-color: #cfe0f7;
        color: #1b4a8f
    }

    /* ── avisos momentáneos (toast) ─────────────────────────────────────
                   Para lo que ACABA DE PASAR — enviado, impreso, falló el envío — y
                   que no necesita quedarse en pantalla. Lo permanente va en los chips
                   de arriba, no acá.
                   ─────────────────────────────────────────────────────────────────── */
    .vm-toasts {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        z-index: 40;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 7px;
        padding: 12px 14px 0;
        pointer-events: none
    }

    .vm-toast {
        pointer-events: auto;
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        max-width: 440px;
        padding: 11px 13px;
        border-radius: 3px;
        font-size: 13px;
        font-weight: 500;
        line-height: 1.4;
        box-shadow: 0 10px 28px rgba(12,22,40,.20);
        animation: vm-toast-in .18s ease-out
    }

        .vm-toast em {
            font-style: normal;
            font-size: 15px;
            line-height: 1;
            flex-shrink: 0
        }

        .vm-toast span {
            flex: 1;
            min-width: 0
        }

        .vm-toast button {
            flex-shrink: 0;
            border: none;
            background: transparent;
            color: inherit;
            opacity: .6;
            font-size: 13px;
            line-height: 1;
            cursor: pointer;
            padding: 2px
        }

            .vm-toast button:hover {
                opacity: 1
            }

    .vm-toast--ok {
        background: #0f7a4d;
        color: #fff
    }

    .vm-toast--bad {
        background: #b42318;
        color: #fff
    }

    .vm-toast--info {
        background: #1a4fba;
        color: #fff
    }

    .vm-toast--warn {
        background: #8a5a00;
        color: #fff
    }

    @keyframes vm-toast-in {
        from {
            opacity: 0;
            transform: translateY(-8px)
        }

        to {
            opacity: 1;
            transform: none
        }
    }

    @media (prefers-reduced-motion:reduce) {
        .vm-toast {
            animation: none
        }
    }

    /* ── pasos ──────────────────────────────────────────────────────── */
    .vm-steps {
        display: flex;
        border-top: 1px solid #e9eef5
    }

    .vm-step {
        flex: 1;
        padding: 9px 4px 8px;
        border: none;
        background: #fff;
        border-bottom: 2px solid transparent;
        font-size: 11px;
        font-weight: 600;
        color: #8d9aab;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px
    }

        .vm-step .vm-n {
            width: 19px;
            height: 19px;
            border-radius: 3px;
            background: #eef2f8;
            color: #8d9aab;
            font-size: 10.5px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: Consolas,monospace;
            font-weight: 700
        }

        .vm-step.vm-on {
            color: #1a4fba;
            border-bottom-color: #1a4fba
        }

            .vm-step.vm-on .vm-n {
                background: #1a4fba;
                color: #fff
            }

        .vm-step.vm-done .vm-n {
            background: #e6f5ee;
            color: #0f7a4d
        }

        .vm-step.vm-bad .vm-n {
            background: #fdeceb;
            color: #b42318
        }

    /* ── cuerpo con scroll ──────────────────────────────────────────── */
    .vm-body {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 14px;
        display: flex;
        flex-direction: column;
        gap: 14px;
        background: #f6f8fb
    }

    .vm-card {
        background: #fff;
        border: 1px solid #dbe2ec;
        border-radius: 3px;
        overflow: hidden
    }

    .vm-card__hd {
        padding: 9px 13px;
        border-bottom: 1px solid #e9eef5;
        background: #f6f8fb
    }

        .vm-card__hd h3 {
            margin: 0;
            font-size: 10.5px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: .7px;
            color: #6b7a8d
        }

    .vm-card__bd {
        padding: 13px;
        display: flex;
        flex-direction: column;
        gap: 12px
    }

    /* ── campos ─────────────────────────────────────────────────────── */
    .vm-f {
        display: flex;
        flex-direction: column;
        gap: 5px
    }

        .vm-f > label {
            font-size: 10.5px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: .6px;
            color: #8d9aab
        }

    .vm-in, .vm-sel, .vm-ta {
        height: 44px;
        padding: 0 12px;
        border: 1px solid #dbe2ec;
        border-radius: 3px;
        background: #fff;
        color: #16202e;
        width: 100%
    }

    .vm-ta {
        height: 88px;
        padding: 10px 12px;
        resize: none;
        line-height: 1.45
    }

        .vm-in:focus, .vm-sel:focus, .vm-ta:focus {
            border-color: #1a4fba;
            box-shadow: 0 0 0 2px #e7eefb;
            outline: none
        }

        .vm-in[readonly], .vm-in:disabled, .vm-sel:disabled, .vm-ta[readonly] {
            background: #eef2f8;
            color: #6b7a8d
        }

    .vm-sel {
        appearance: none;
        -webkit-appearance: none;
        padding-right: 30px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='6'%3E%3Cpath d='M0 0l5.5 6L11 0z' fill='%238d9aab'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center
    }

    .vm-num {
        font-family: Consolas,monospace;
        font-variant-numeric: tabular-nums;
        text-align: right
    }

    .vm-row2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px
    }

    /* ── botones: radius 3px, alto táctil ───────────────────────────── */
    .vm-btn {
        height: 44px;
        padding: 0 16px;
        border: 1px solid transparent;
        border-radius: 3px;
        font-size: 14px;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        white-space: nowrap
    }

    .vm-btn--pri {
        background: #1a4fba;
        color: #fff
    }

        .vm-btn--pri:active {
            background: #123a91
        }

    .vm-btn--ghost {
        background: #fff;
        border-color: #dbe2ec;
        color: #33404f
    }

        .vm-btn--ghost:active {
            background: #f2f6fd;
            border-color: #1a4fba;
            color: #1a4fba
        }

    .vm-btn--ok {
        background: #0f7a4d;
        color: #fff
    }

        .vm-btn--ok:active {
            background: #0c6440
        }

    .vm-btn:disabled {
        opacity: .45
    }

    .vm-btn--block {
        width: 100%
    }

    .vm-inline {
        display: flex;
        gap: 8px
    }

        .vm-inline .vm-in {
            flex: 1;
            min-width: 0
        }

        .vm-inline .vm-btn {
            flex-shrink: 0
        }

    /* ── segmented táctil ───────────────────────────────────────────── */
    .vm-seg {
        display: flex;
        border: 1px solid #dbe2ec;
        border-radius: 3px;
        overflow: hidden;
        background: #fff
    }

        .vm-seg button {
            flex: 1;
            border: none;
            background: transparent;
            height: 44px;
            font-size: 14px;
            font-weight: 600;
            color: #6b7a8d;
            border-right: 1px solid #dbe2ec
        }

            .vm-seg button:last-child {
                border-right: none
            }

            .vm-seg button.vm-on {
                background: #1a4fba;
                color: #fff
            }

            .vm-seg button:disabled {
                opacity: .4;
                background: #f6f8fb;
                color: #8d9aab
            }

    /* ── medios de pago ─────────────────────────────────────────────── */
    .vm-medios {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 9px
    }

    .vm-medio {
        height: 64px;
        border: 1px solid #dbe2ec;
        border-radius: 3px;
        background: #fff;
        color: #6b7a8d;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        font-size: 12.5px;
        font-weight: 600
    }

        .vm-medio em {
            font-style: normal;
            font-size: 19px;
            line-height: 1
        }

        .vm-medio.vm-on {
            border-color: #1a4fba;
            background: #e7eefb;
            color: #123a91;
            box-shadow: inset 0 0 0 1px #1a4fba
        }

    .vm-medio--wide {
        grid-column: 1/3
    }

    .vm-cash {
        height: 58px;
        font-size: 24px;
        font-weight: 700;
        text-align: center;
        font-family: Consolas,monospace;
        font-variant-numeric: tabular-nums
    }

    .vm-bills {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 8px
    }

    .vm-bill {
        height: 44px;
        border: 1px solid #dbe2ec;
        border-radius: 3px;
        background: #fff;
        font-size: 14px;
        font-weight: 600;
        color: #33404f;
        font-family: Consolas,monospace
    }

        .vm-bill:active {
            background: #f2f6fd;
            border-color: #1a4fba;
            color: #1a4fba
        }

    .vm-vuelto {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 3px;
        padding: 12px 14px;
        border: 1px solid #86d3ae;
        background: #e6f5ee
    }

        .vm-vuelto span {
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .6px;
            color: #0f7a4d
        }

        .vm-vuelto strong {
            font-size: 24px;
            color: #0f7a4d;
            font-family: Consolas,monospace;
            font-variant-numeric: tabular-nums
        }

    .vm-vuelto--falta {
        border-color: #eda9a2;
        background: #fdeceb
    }

        .vm-vuelto--falta span, .vm-vuelto--falta strong {
            color: #b42318
        }

    /* ── avisos ─────────────────────────────────────────────────────── */
    .vm-note {
        padding: 11px 13px;
        border: 1px solid #dbe2ec;
        border-left: 3px solid #6b7a8d;
        border-radius: 3px;
        background: #f6f8fb;
        font-size: 13px;
        line-height: 1.5
    }

        .vm-note b {
            color: #16202e
        }

    .vm-note--info {
        border-left-color: #1a4fba;
        background: #f2f6fd
    }

    .vm-note--warn {
        border-left-color: #9a6206;
        background: #fdf3e2;
        color: #9a6206
    }

        .vm-note--warn b {
            color: #9a6206
        }

    .vm-note--bad {
        border-left-color: #b42318;
        background: #fdeceb;
        color: #b42318
    }

        .vm-note--bad b {
            color: #b42318
        }

    .vm-note--ok {
        border-left-color: #0f7a4d;
        background: #e6f5ee;
        color: #0f7a4d
    }

        .vm-note--ok b {
            color: #0f7a4d
        }

    /* ── estado de deuda ────────────────────────────────────────────── */
    .vm-debt {
        border: 1px solid #dbe2ec;
        border-radius: 3px;
        overflow: hidden
    }

    .vm-debt__hd {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 11px 13px;
        font-size: 13px;
        font-weight: 600
    }

        .vm-debt__hd .vm-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: currentColor;
            flex-shrink: 0
        }

    .vm-debt--none .vm-debt__hd {
        background: #f6f8fb;
        color: #8d9aab
    }

    .vm-debt--ok .vm-debt__hd {
        background: #e6f5ee;
        color: #0f7a4d
    }

    .vm-debt--warn .vm-debt__hd {
        background: #fdf3e2;
        color: #9a6206
    }

    .vm-debt--bad .vm-debt__hd {
        background: #fdeceb;
        color: #b42318
    }

    .vm-debt__bd {
        display: grid;
        grid-template-columns: 1fr 1fr;
        background: #e9eef5;
        gap: 1px
    }

        .vm-debt__bd > div {
            background: #fff;
            padding: 10px 13px
        }

        .vm-debt__bd dt {
            font-size: 10px;
            text-transform: uppercase;
            letter-spacing: .5px;
            color: #8d9aab;
            margin: 0 0 3px
        }

        .vm-debt__bd dd {
            margin: 0;
            font-family: Consolas,monospace;
            font-size: 15px;
            font-weight: 600;
            color: #16202e;
            font-variant-numeric: tabular-nums
        }

            .vm-debt__bd dd.vm-neg {
                color: #b42318
            }

    /* ── cuotas como tarjetas ───────────────────────────────────────── */
    .vm-cuotas {
        display: flex;
        flex-direction: column;
        gap: 9px
    }

    .vm-cuota {
        border: 1px solid #dbe2ec;
        border-radius: 3px;
        padding: 11px 13px;
        display: flex;
        flex-direction: column;
        gap: 9px
    }

    .vm-cuota__hd {
        display: flex;
        align-items: center;
        gap: 9px
    }

    .vm-cuota__n {
        width: 28px;
        height: 28px;
        border-radius: 3px;
        background: #eef2f8;
        color: #6b7a8d;
        font-size: 12px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: Consolas,monospace;
        flex-shrink: 0
    }

    .vm-cuota__d {
        font-size: 13px;
        font-weight: 600;
        color: #16202e
    }

    .vm-cuota__i {
        margin-left: auto;
        font-family: Consolas,monospace;
        font-size: 16px;
        font-weight: 600;
        color: #123a91;
        font-variant-numeric: tabular-nums
    }

    .vm-cuota__bd {
        display: grid;
        grid-template-columns: 1fr 1.4fr;
        gap: 9px
    }

        .vm-cuota__bd label {
            font-size: 10px;
            text-transform: uppercase;
            letter-spacing: .5px;
            color: #8d9aab;
            font-weight: 600;
            display: block;
            margin-bottom: 4px
        }

        .vm-cuota__bd input {
            height: 40px;
            padding: 0 10px;
            border: 1px solid #dbe2ec;
            border-radius: 3px;
            width: 100%;
            background: #fff
        }

    .vm-step-num {
        display: flex;
        align-items: center;
        border: 1px solid #dbe2ec;
        border-radius: 3px;
        overflow: hidden
    }

        .vm-step-num button {
            width: 48px;
            height: 44px;
            border: none;
            background: #f6f8fb;
            color: #33404f;
            font-size: 20px;
            font-weight: 600
        }

            .vm-step-num button:active {
                background: #e7eefb;
                color: #1a4fba
            }

        .vm-step-num input {
            flex: 1;
            height: 44px;
            border: none;
            border-left: 1px solid #dbe2ec;
            border-right: 1px solid #dbe2ec;
            text-align: center;
            font-family: Consolas,monospace;
            font-weight: 700;
            background: #fff;
            min-width: 0
        }

    /* ── resumen ────────────────────────────────────────────────────── */
    .vm-sum__r {
        display: flex;
        align-items: baseline;
        gap: 10px;
        padding: 6px 0;
        font-size: 14px
    }

        .vm-sum__r span {
            color: #6b7a8d
        }

        .vm-sum__r b {
            margin-left: auto;
            font-family: Consolas,monospace;
            font-variant-numeric: tabular-nums;
            font-weight: 500;
            color: #16202e
        }

    .vm-sum__r--sub {
        border-top: 1px solid #e9eef5;
        margin-top: 5px;
        padding-top: 10px
    }

        .vm-sum__r--sub span, .vm-sum__r--sub b {
            color: #16202e;
            font-weight: 700
        }

    .vm-sum__r--ded span, .vm-sum__r--ded b {
        color: #9a6206
    }

    .vm-sum__r--mut span, .vm-sum__r--mut b {
        color: #8d9aab;
        font-size: 13px
    }

    .vm-toggle {
        display: flex;
        align-items: center;
        gap: 11px;
        font-size: 14px;
        color: #33404f;
        min-height: 44px
    }

        .vm-toggle input {
            width: 20px;
            height: 20px;
            accent-color: #1a4fba;
            margin: 0;
            flex-shrink: 0
        }

    /* NUEVO -- Naranja Sobrio: acento para controles nuevos de este módulo
       (checkbox "generar guía"), a pedido de Ivan -- ya no Cobalt acá. */
    .vm-toggle--naranja input {
        accent-color: #c2661a
    }

    .vm-hint--naranja {
        color: #9c5015
    }

    .vm-errs {
        display: flex;
        flex-direction: column;
        gap: 7px
    }

    .vm-err {
        display: flex;
        gap: 9px;
        font-size: 13px;
        color: #b42318;
        line-height: 1.45
    }

        .vm-err::before {
            content: "!";
            font-family: Consolas,monospace;
            font-weight: 700;
            flex-shrink: 0
        }

    /* ── barra inferior fija ────────────────────────────────────────── */
    .vm-foot {
        flex-shrink: 0;
        border-top: 1px solid #dbe2ec;
        background: #fff;
        padding: 11px 14px;
        padding-bottom: calc(11px + env(safe-area-inset-bottom));
        display: flex;
        gap: 9px
    }

        .vm-foot .vm-btn {
            flex: 1
        }

        .vm-foot .vm-btn--back {
            flex: 0 0 34%
        }

    /* ── pantallas de proceso y resultado ───────────────────────────── */
    .vm-full {
        position: absolute;
        inset: 0;
        background: #fff;
        z-index: 20;
        display: flex;
        flex-direction: column;
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom)
    }
    /* La columna del resultado se limita: en las capturas los botones
                   "Reintentar", "Enviar por correo" y "Enviar por WhatsApp" salían como
                   franjas de borde a borde de la ventana. */
    .vm-full__bd {
        flex: 1;
        overflow-y: auto;
        padding: 20px 16px;
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 100%;
        max-width: 560px;
        margin-inline: auto
    }

    .vm-center {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 16px;
        text-align: center;
        padding: 24px 16px
    }

    .vm-spin {
        width: 44px;
        height: 44px;
        border: 3px solid #e7eefb;
        border-top-color: #1a4fba;
        border-radius: 50%;
        animation: vm-spin .85s linear infinite
    }

    @keyframes vm-spin {
        to {
            transform: rotate(360deg)
        }
    }

    @media (prefers-reduced-motion:reduce) {
        .vm-spin {
            animation-duration: 3s
        }
    }

    .vm-proc-t {
        font-size: 16px;
        font-weight: 600;
        color: #16202e
    }

    .vm-log {
        width: 100%;
        font-family: Consolas,monospace;
        font-size: 12.5px;
        line-height: 1.9;
        display: flex;
        flex-direction: column;
        text-align: left;
        background: #f6f8fb;
        border: 1px solid #e9eef5;
        border-radius: 3px;
        padding: 11px 13px;
        max-height: 220px;
        overflow-y: auto
    }

        .vm-log .vm-l-run {
            color: #1a4fba
        }

        .vm-log .vm-l-ok {
            color: #0f7a4d
        }

        .vm-log .vm-l-err {
            color: #b42318
        }

    .vm-res__icon {
        width: 64px;
        height: 64px;
        border-radius: 3px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32px;
        flex-shrink: 0
    }

    .vm-res__icon--ok {
        background: #e6f5ee;
        color: #0f7a4d
    }

    .vm-res__icon--err {
        background: #fdeceb;
        color: #b42318
    }

    .vm-res__k {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .8px;
        color: #6b7a8d;
        font-weight: 600
    }

    .vm-res__n {
        font-family: Consolas,monospace;
        font-size: 28px;
        font-weight: 700;
        color: #16202e;
        letter-spacing: .5px
    }

    .vm-res__m {
        font-size: 13px;
        color: #6b7a8d;
        line-height: 1.5
    }

    .vm-detalle {
        border: 1px solid #dbe2ec;
        border-radius: 3px;
        background: #f6f8fb
    }

        .vm-detalle summary {
            padding: 9px 12px;
            font-size: 12.5px;
            font-weight: 600;
            color: #6b7a8d;
            cursor: pointer
        }

        .vm-detalle pre {
            margin: 0;
            padding: 0 12px 12px;
            font-family: Consolas,monospace;
            font-size: 11px;
            line-height: 1.6;
            color: #4d5a6b;
            white-space: pre-wrap;
            word-break: break-word;
            max-height: 240px;
            overflow: auto
        }

    .vm-res__acts {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 9px
    }


    /* ══════════════════════════════════════════════════════════════════
               PANTALLA DE RESULTADO (.rs)

               Antes eran un número y cuatro botones al centro de 1020×760: el
               cajero acababa de cobrar y la pantalla no le decía qué vendió, a
               quién ni cómo. El vacío se llena con la venta, no con adorno.

               Izquierda: cliente, medio de pago, detalle e importes.
               Derecha:   qué hacer ahora, agrupado por intención.
               ══════════════════════════════════════════════════════════════════ */
    .rs {
        position: absolute;
        inset: 0;
        z-index: 20;
        background: #fff;
        display: flex;
        flex-direction: column;
        padding-top: env(safe-area-inset-top)
    }

    .rs__top {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 14px 18px;
        border-bottom: 1px solid #dbe2ec
    }

    .rs__sello {
        width: 44px;
        height: 44px;
        border-radius: 3px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px
    }

    .rs__sello--ok {
        background: #e6f5ee;
        color: #0f7a4d
    }

    .rs__sello--warn {
        background: #fdf3e2;
        color: #8a5a00
    }

    .rs__sello--bad {
        background: #fdeceb;
        color: #b42318
    }

    .rs__id {
        flex: 1;
        min-width: 0
    }

    .rs__tipo {
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: .09em;
        text-transform: uppercase;
        color: #6b7a8d
    }

    .rs__num {
        font-family: Consolas,monospace;
        font-size: 24px;
        font-weight: 600;
        color: #16202e;
        letter-spacing: .4px;
        line-height: 1.15
    }

    .rs__pill {
        flex-shrink: 0;
        padding: 4px 10px;
        border-radius: 3px;
        border: 1px solid;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase
    }

    .rs__pill--ok {
        background: #e6f5ee;
        border-color: #bfe3d2;
        color: #0f7a4d
    }

    .rs__pill--warn {
        background: #fdf3e2;
        border-color: #f0dcb4;
        color: #8a5a00
    }

    .rs__pill--bad {
        background: #fdeceb;
        border-color: #f5cdc9;
        color: #b42318
    }

    .rs__body {
        flex: 1;
        min-height: 0;
        display: grid;
        grid-template-columns: 1fr 320px;
        background: #f6f8fb
    }

    .rs__det {
        min-height: 0;
        overflow-y: auto;
        padding: 14px 18px;
        display: flex;
        flex-direction: column;
        gap: 12px
    }

    .rs__meta {
        display: grid;
        grid-template-columns: repeat(4,1fr);
        gap: 1px;
        background: #e9eef5;
        border: 1px solid #dbe2ec;
        border-radius: 3px;
        overflow: hidden
    }

        .rs__meta > div {
            background: #fff;
            padding: 8px 11px;
            min-width: 0
        }

        .rs__meta dt {
            margin: 0 0 2px;
            font-size: 9.5px;
            font-weight: 700;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: #8d9aab
        }

        .rs__meta dd {
            margin: 0;
            font-size: 13px;
            font-weight: 600;
            color: #16202e;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap
        }

            .rs__meta dd.mono {
                font-family: Consolas,monospace;
                font-variant-numeric: tabular-nums
            }

    @media (max-width:760px) {
        .rs__meta {
            grid-template-columns: 1fr 1fr
        }
    }

    .rs__items {
        border: 1px solid #dbe2ec;
        border-radius: 3px;
        background: #fff;
        overflow: hidden
    }

    .rs__items__hd {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 7px 11px;
        background: #f6f8fb;
        border-bottom: 1px solid #e9eef5
    }

        .rs__items__hd h3 {
            margin: 0;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: .09em;
            text-transform: uppercase;
            color: #6b7a8d
        }

        .rs__items__hd span {
            margin-left: auto;
            font-family: Consolas,monospace;
            font-size: 11px;
            color: #8d9aab
        }

    .rs__t {
        width: 100%;
        border-collapse: collapse;
        font-size: 12.5px
    }

        .rs__t th {
            padding: 6px 11px;
            text-align: left;
            font-size: 9.5px;
            font-weight: 700;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: #8d9aab;
            border-bottom: 1px solid #e9eef5
        }

        .rs__t td {
            padding: 6px 11px;
            border-bottom: 1px solid #f0f4f9;
            color: #33404f
        }

        .rs__t tr:last-child td {
            border-bottom: none
        }

        .rs__t .n {
            text-align: right;
            font-family: Consolas,monospace;
            font-variant-numeric: tabular-nums
        }

    .rs__tot {
        border: 1px solid #dbe2ec;
        border-radius: 3px;
        background: #fff;
        overflow: hidden
    }

        .rs__tot > div {
            display: flex;
            align-items: baseline;
            gap: 12px;
            padding: 6px 13px;
            border-bottom: 1px solid #f0f4f9;
            font-size: 13px
        }

            .rs__tot > div:last-child {
                border-bottom: none
            }

        .rs__tot span {
            color: #6b7a8d
        }

        .rs__tot b {
            margin-left: auto;
            font-family: Consolas,monospace;
            font-variant-numeric: tabular-nums;
            font-weight: 500;
            color: #16202e
        }

        .rs__tot .rs__ded span, .rs__tot .rs__ded b {
            color: #9a6206
        }

        .rs__tot .rs__neto {
            background: #f2f7fe;
            border-top: 1px solid #cfe0f7
        }

            .rs__tot .rs__neto span {
                color: #123a91;
                font-weight: 700;
                font-size: 11px;
                letter-spacing: .07em;
                text-transform: uppercase
            }

            .rs__tot .rs__neto b {
                font-size: 20px;
                font-weight: 600;
                color: #123a91
            }

    .rs__acc {
        border-left: 1px solid #dbe2ec;
        background: #fff;
        overflow-y: auto;
        padding: 14px 16px;
        display: flex;
        flex-direction: column;
        gap: 14px
    }

    .rs__grupo {
        display: flex;
        flex-direction: column;
        gap: 7px
    }

        .rs__grupo h4 {
            margin: 0;
            font-size: 9.5px;
            font-weight: 700;
            letter-spacing: .09em;
            text-transform: uppercase;
            color: #8d9aab
        }

    .rs__b {
        display: flex;
        align-items: center;
        gap: 9px;
        width: 100%;
        height: 38px;
        padding: 0 11px;
        border: 1px solid #dbe2ec;
        border-radius: 3px;
        background: #fff;
        color: #33404f;
        font: inherit;
        font-size: 13px;
        font-weight: 600;
        text-align: left
    }

        .rs__b em {
            font-style: normal;
            width: 16px;
            flex: none;
            text-align: center;
            font-size: 13px;
            color: #6b7a8d
        }

        .rs__b small {
            margin-left: auto;
            font-weight: 400;
            font-size: 11px;
            color: #8d9aab;
            font-family: Consolas,monospace;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 44%
        }

        .rs__b:disabled {
            opacity: .45
        }

    .rs__b--pri {
        background: #1a4fba;
        border-color: #1a4fba;
        color: #fff
    }

        .rs__b--pri em, .rs__b--pri small {
            color: rgba(255,255,255,.82)
        }

    .rs__b--warn {
        border-color: #f0dcb4;
        color: #8a5a00;
        background: #fdf9f1
    }

        .rs__b--warn em {
            color: #8a5a00
        }

    .rs__nota {
        font-size: 11.5px;
        line-height: 1.5;
        color: #8d9aab
    }

        .rs__nota b {
            color: #6b7a8d
        }

    .rs__foot {
        flex-shrink: 0;
        display: flex;
        gap: 9px;
        padding: 11px 18px;
        padding-bottom: calc(11px + env(safe-area-inset-bottom));
        background: #fff;
        border-top: 1px solid #dbe2ec
    }

        .rs__foot .vm-btn {
            flex: 1
        }

        .rs__foot .vm-btn--back {
            flex: 0 0 32%
        }

    /* Teléfono: una sola columna, las acciones debajo del detalle. */
    @media (max-width:820px),(pointer:coarse) and (max-width:1000px) {
        .rs__body {
            grid-template-columns: 1fr;
            grid-template-rows: auto auto
        }

        .rs__acc {
            border-left: none;
            border-top: 1px solid #dbe2ec
        }

        .rs__b {
            height: 44px;
            font-size: 14px
        }
    }

    @media (hover:hover) and (pointer:fine) {
        .rs__b:hover {
            border-color: #1a4fba;
            color: #1a4fba
        }

            .rs__b:hover em {
                color: #1a4fba
            }

        .rs__b--pri:hover {
            background: #123a91;
            border-color: #123a91;
            color: #fff
        }
    }

    /* ══════════════════════════════════════════════════════════════════
                   FIX — TARJETAS CORTADAS A LA MITAD

                   .vm-body es un flex column y sus hijos traen flex-shrink:1 por
                   defecto. Cuando el contenido no entra, las tarjetas se COMPRIMEN en
                   vez de desbordar; y como .vm-card tiene overflow:hidden, lo comprimido
                   se recorta — se ve una fila partida al medio y el scroll nunca aparece,
                   porque nada llega a desbordar.

                   No es un problema de escritorio: en Android pasa igual con pantalla
                   corta o con el teclado abierto.
                   ══════════════════════════════════════════════════════════════════ */
    .vm-body > * {
        flex-shrink: 0
    }

    /* Teléfono en dos casillas: código de país y número. */
    .vm-tel {
        display: flex;
        gap: 8px;
        align-items: center
    }

    .vm-tel__pais {
        position: relative;
        flex: 0 0 92px
    }

    .vm-tel__plus {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 14px;
        color: #8d9aab;
        pointer-events: none
    }

    .vm-tel__pais .vm-in {
        padding-left: 22px;
        text-align: left
    }

    .vm-tel > .vm-in {
        flex: 1;
        min-width: 0
    }

    .vm-hint {
        font-size: 11.5px;
        color: #8d9aab;
        margin-top: 2px
    }

    /* Ubigeo en tres selects encadenados. */
    .vm-ubi {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 8px
    }

    @media (max-width:520px) {
        .vm-ubi {
            grid-template-columns: 1fr
        }
    }

    /* Cinturón y tirantes: si alguna vez una tarjeta sí se comprime, que el
                   contenido se vea igual en lugar de quedar cortado. */
    .vm-card {
        min-height: fit-content
    }

    /* ══════════════════════════════════════════════════════════════════
                   FIX — NO SE PODÍA ASIGNAR UN CLIENTE EXISTENTE

                   UcBuscarCliente despliega su autocompletado con position:absolute y
                   z-index 10200. La tarjeta que lo contiene tiene overflow:hidden, así
                   que la lista de coincidencias quedaba RECORTADA contra el borde de la
                   tarjeta: se escribía y no aparecía nada que poder elegir.

                   La tarjeta del cliente se marca con .vm-card--flow para que deje salir
                   el desplegable. El botón "Buscar" del propio componente (que abre la
                   grilla UcBuscarClienteModal) no se toca: se reutiliza tal cual.
                   ══════════════════════════════════════════════════════════════════ */
    .vm-card--flow,
    .vm-card--flow .vm-card__bd {
        overflow: visible
    }

    .vm-card--flow {
        position: relative;
        z-index: 5
    }

    /* Línea informativa del cliente seleccionado. Solo informa y ofrece
                   quitarlo; no es un control del que dependa nada. */
    .vm-sel-cli {
        display: flex;
        align-items: center;
        gap: 9px;
        margin-top: 7px;
        padding: 7px 10px;
        border: 1px solid #cfe0f7;
        background: #f2f7fe;
        border-radius: 3px
    }

    .vm-sel-cli__k {
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: .7px;
        color: #6b7a8d;
        font-weight: 600;
        flex-shrink: 0
    }

    .vm-sel-cli__n {
        font-size: 13px;
        font-weight: 600;
        color: #16202e;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .vm-sel-cli__d {
        font-family: Consolas,monospace;
        font-size: 12px;
        color: #1a4fba;
        flex-shrink: 0
    }

    .vm-sel-cli__x {
        margin-left: auto;
        flex-shrink: 0;
        width: 24px;
        height: 24px;
        border-radius: 3px;
        border: 1px solid #cfe0f7;
        background: #fff;
        color: #6b7a8d;
        font-size: 11px;
        line-height: 1;
        cursor: pointer
    }

        .vm-sel-cli__x:hover {
            border-color: #b42318;
            color: #b42318
        }

    @media (max-width:520px) {
        .vm-sel-cli {
            flex-wrap: wrap
        }

        .vm-sel-cli__n {
            flex: 1 1 100%;
            order: 3
        }
    }

    .vm-buscar {
        display: flex;
        gap: 7px;
        align-items: stretch
    }

        .vm-buscar .vm-in {
            flex: 1;
            min-width: 0
        }

        .vm-buscar .vm-btn {
            flex: 0 0 auto
        }

        .vm-buscar .vm-in[readonly] {
            background: #f6f8fb;
            color: #33404f
        }

    /* ══════════════════════════════════════════════════════════════════
                   DENSIDAD DE ESCRITORIO

                   Todo lo de arriba es el diseño táctil y NO se toca: es el que usa
                   Android. Este bloque solo entra cuando hay ventana ancha Y puntero
                   fino con hover — o sea, mouse. Un teléfono o una tablet Android
                   nunca lo activan, aunque estén en horizontal, porque su puntero es
                   "coarse" y no tienen hover real.

                   No cambia estructura ni flujo: baja la densidad y centra el contenido
                   en una columna legible, para que en un monitor ancho la ventana no
                   estire todo a lo largo con controles de 44px.
                   ══════════════════════════════════════════════════════════════════ */
    @media (min-width:900px) and (hover:hover) and (pointer:fine) {
        /* ── VENTANA MODAL ──
                       En escritorio deja de ser pantalla completa: se convierte en una
                       ventana centrada sobre el telón. Ya no hace falta centrar cada
                       franja por separado (era lo que hacía que la pantalla de resultado
                       saliera de borde a borde mientras el resto quedaba en columna). */
        .vm-root {
            align-items: center;
            padding: 24px
        }

        .vm-panel {
            width: min(1020px,100%);
            height: min(820px,100%);
            border: 1px solid #c9d4e2;
            border-radius: 3px;
            box-shadow: 0 18px 46px rgba(12,22,40,.26),0 2px 8px rgba(12,22,40,.14)
        }
        /* Los 16px de los inputs solo hacen falta en iOS, para evitar el
                       zoom automático al enfocar. Con mouse no aplica. */
        .vm-root input, .vm-root select, .vm-root textarea {
            font-size: 13px
        }

        .vm-in, .vm-sel {
            height: 31px;
            padding: 0 9px
        }

        .vm-ta {
            height: 70px;
            padding: 8px 9px
        }

        .vm-btn {
            height: 31px;
            font-size: 13px;
            padding: 0 13px
        }

        .vm-seg button {
            height: 31px;
            font-size: 13px
        }

        .vm-medio {
            height: 48px;
            font-size: 12px
        }

            .vm-medio em {
                font-size: 16px
            }

        .vm-bill {
            height: 32px;
            font-size: 13px
        }

        .vm-cash {
            height: 44px;
            font-size: 20px
        }

        .vm-step-num button {
            width: 34px;
            height: 31px;
            font-size: 17px
        }

        .vm-step-num input {
            height: 31px
        }

        .vm-toggle {
            min-height: 30px;
            font-size: 13px
        }

            .vm-toggle input {
                width: 16px;
                height: 16px
            }

        .vm-top__t {
            font-size: 13.5px
        }

        .vm-neto .vm-val {
            font-size: 22px
        }

        .vm-neto {
            padding-bottom: 8px
        }

        .vm-body {
            padding: 12px;
            gap: 12px
        }

        .vm-card__bd {
            padding: 11px;
            gap: 10px
        }

        .vm-cuota {
            padding: 10px 11px;
            gap: 8px
        }

        .vm-cuota__i {
            font-size: 15px
        }

        .vm-debt__hd {
            padding: 9px 11px;
            font-size: 12.5px
        }

        .vm-debt__bd > div {
            padding: 8px 11px
        }

        .vm-debt__bd dd {
            font-size: 13.5px
        }

        .vm-vuelto {
            padding: 10px 12px
        }

            .vm-vuelto strong {
                font-size: 20px
            }

        .vm-note {
            padding: 9px 11px;
            font-size: 12.5px
        }

        .vm-res__n {
            font-size: 24px
        }

        .vm-res__icon {
            width: 56px;
            height: 56px;
            font-size: 28px
        }
        /* El puntero fino permite objetivos más chicos y hover visible. */
        .vm-medio:hover, .vm-bill:hover {
            border-color: #2d6ae0
        }

        .vm-btn--ghost:hover {
            border-color: #1a4fba;
            color: #1a4fba
        }
    }

    /* ══════════════════════════════════════════════════════════════════
                   PANTALLA MUY BAJA (Android con el teclado abierto)

                   Con el teclado desplegado quedan ~300px de alto útil. Se achican la
                   barra superior y el footer para que el cuerpo conserve espacio y el
                   campo enfocado no quede tapado.
                   ══════════════════════════════════════════════════════════════════ */
    @media (max-height:520px) {
        .vm-neto {
            padding-bottom: 6px
        }

            .vm-neto .vm-val {
                font-size: 20px
            }

        .vm-step {
            padding: 6px 4px 5px;
            font-size: 10px
        }

            .vm-step .vm-n {
                width: 16px;
                height: 16px;
                font-size: 9.5px
            }

        .vm-body {
            padding: 10px;
            gap: 10px
        }

        .vm-foot {
            padding: 8px 14px;
            padding-bottom: calc(8px + env(safe-area-inset-bottom))
        }

        .vm-btn {
            height: 40px
        }
    }

    /* ══════════════════════════════════════════════════════════════════
                   PANTALLA ANGOSTA (teléfonos chicos, 360px y menos)
                   ══════════════════════════════════════════════════════════════════ */
    @media (max-width:380px) {
        .vm-row2 {
            grid-template-columns: 1fr
        }

        .vm-medios {
            grid-template-columns: 1fr
        }

        .vm-medio--wide {
            grid-column: auto
        }

        .vm-bills {
            grid-template-columns: repeat(2,1fr)
        }

        .vm-res__acts {
            grid-template-columns: 1fr
        }

        .vm-step {
            font-size: 10px
        }

        .vm-cuota__bd {
            grid-template-columns: 1fr
        }
    }

    /* ══════════════════════════════════════════════════════════════════
                   TABLET ANDROID EN HORIZONTAL

                   Puntero grueso, así que los controles siguen táctiles: solo se centra
                   el contenido para que no quede una línea de texto de 1000px de ancho.
                   ══════════════════════════════════════════════════════════════════ */
    @media (min-width:820px) and (pointer:coarse) {
        .vm-top__bar,
        .vm-neto,
        .vm-steps,
        .vm-body,
        .vm-foot {
            width: 100%;
            max-width: 760px;
            margin-left: auto;
            margin-right: auto
        }
    }


/* ══════════ TEMA «Verde guía y mostaza» (07/10/2026) — agregado al final, SOLO CSS.
   Para volver al cobalto anterior basta con borrar desde esta línea hasta el final del archivo. ══════════ */
/* ══════════════════════════════════════════════════════════════════════════
   MdCobranza — TEMA «Verde guía y mostaza» (propuesta, SOLO CSS, sin azules)
   · No cambia markup ni funcionalidad: re-colorea y refina las mismas clases.
   · Se carga DESPUÉS de MdCobranza.css. Todo va prefijado con html:not(#vt-tema)
     (+1 ID) para ganar a las hojas de los modales hijos y al CSS aislado del buscador.
   · Para volver al diseño actual basta con quitar este archivo.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --vc-pri:#0e8a70;      --vc-pri-dk:#0a6b57;   --vc-pri-lt:#34b090;   --vc-pri-rgb:14,138,112;
  --vc-pri-50:#edf8f4;   --vc-pri-100:#d9f0e8;  --vc-pri-200:#b0dfcf;  --vc-pri-300:#7fc8b0;
  --vc-err:#b3253f;      --vc-err-50:#fceaee;   --vc-err-200:#f2c2cd;
  --vc-acc:#d9a21b;      --vc-acc-50:#fdf6e1;   --vc-acc-dk:#7f5b05;   --vc-acc-rgb:217,162,27;
  --vc-ink:#17211f;      --vc-tx:#3d4a47;       --vc-mut:#6b7a76;      --vc-faint:#93a09c;
  --vc-line:#e2e7e4;     --vc-line-2:#cfd6d2;
  --vc-sf:#f6f8f7;       --vc-sf-2:#eef1ef;
  --vc-ok:#157f47;       --vc-ok-dk:#0f6236;    --vc-ok-50:#e6f4ec;    --vc-ok-200:#b4dcc4;
  --vc-warn:#a8680c;     --vc-warn-50:#fdf6e6;  --vc-warn-200:#f0dbb0;
  --vc-sh-rgb:20,34,30;  --vc-ov-rgb:16,28,25;
  --vc-r:10px; --vc-r-sm:7px; --vc-r-lg:16px;
  --vc-sh-1:0 1px 2px rgba(20,34,30,.06),0 1px 3px rgba(20,34,30,.05);
  --vc-sh-2:0 4px 14px rgba(20,34,30,.09),0 1px 3px rgba(20,34,30,.06);
  --vc-sh-pri:0 4px 12px rgba(var(--vc-pri-rgb),.30),inset 0 1px 0 rgba(255,255,255,.18);
  --vc-grad-pri:linear-gradient(180deg,var(--vc-pri-lt) -40%,var(--vc-pri) 100%);
  --vc-grad-pri-h:linear-gradient(180deg,var(--vc-pri-lt) 0%,var(--vc-pri) 100%);
  --vc-grad-hd:linear-gradient(135deg,var(--vc-pri) 0%,var(--vc-pri-dk) 100%);
  --vc-grad-ok:linear-gradient(135deg,#ecf7f0 0%,#ddf1e5 100%);
}


/* ═════ 1. RECOLOR (generado desde el CSS original, mismos selectores, solo color) ═════ */
/* ── color: MdCobranza.css (174 reglas) ── */
html:not(#vt-tema) .vm-root{background:rgba(var(--vc-ov-rgb),.52);color:var(--vc-tx)}
html:not(#vt-tema) .vm-panel{background:#fff}
html:not(#vt-tema) .vm-root--envio{background:transparent}
html:not(#vt-tema) .vm-root--envio .vm-panel{box-shadow:none}
html:not(#vt-tema) .vm-root input,
html:not(#vt-tema) .vm-root select,
html:not(#vt-tema) .vm-root textarea{color:inherit}
html:not(#vt-tema) .vm-top{background:#fff;border-bottom:1px solid var(--vc-line)}
html:not(#vt-tema) .vm-top__x{border:1px solid var(--vc-line);background:#fff;color:var(--vc-mut)}
html:not(#vt-tema) .vm-top__t{color:var(--vc-ink)}
html:not(#vt-tema) .vm-top__s{color:var(--vc-faint)}
html:not(#vt-tema) .vm-neto .vm-lbl{color:var(--vc-faint)}
html:not(#vt-tema) .vm-neto .vm-cur{color:var(--vc-pri-dk)}
html:not(#vt-tema) .vm-neto .vm-val{color:var(--vc-pri-dk)}
html:not(#vt-tema) .vm-chip{border:1px solid transparent}
html:not(#vt-tema) .vm-chip--pay{background:var(--vc-sf-2);border-color:var(--vc-line);color:var(--vc-tx)}
html:not(#vt-tema) .vm-chip--ok{background:var(--vc-ok-50);border-color:var(--vc-ok-200);color:var(--vc-ok)}
html:not(#vt-tema) .vm-chip--warn{background:var(--vc-warn-50);border-color:var(--vc-warn-200);color:var(--vc-warn)}
html:not(#vt-tema) .vm-chip--bad{background:var(--vc-err-50);border-color:var(--vc-err-200);color:var(--vc-err)}
html:not(#vt-tema) .vm-chip--ded{background:var(--vc-pri-50);border-color:var(--vc-pri-200);color:var(--vc-pri-dk)}
html:not(#vt-tema) .vm-toast{box-shadow:0 10px 28px rgba(var(--vc-sh-rgb),.20)}
html:not(#vt-tema) .vm-toast button{border:none;background:transparent;color:inherit}
html:not(#vt-tema) .vm-toast--ok{background:var(--vc-ok);color:#fff}
html:not(#vt-tema) .vm-toast--bad{background:var(--vc-err);color:#fff}
html:not(#vt-tema) .vm-toast--info{background:var(--vc-pri);color:#fff}
html:not(#vt-tema) .vm-toast--warn{background:var(--vc-warn);color:#fff}
html:not(#vt-tema) .vm-steps{border-top:1px solid var(--vc-sf-2)}
html:not(#vt-tema) .vm-step{border:none;background:#fff;border-bottom:2px solid transparent;color:var(--vc-faint)}
html:not(#vt-tema) .vm-step .vm-n{background:var(--vc-sf-2);color:var(--vc-faint)}
html:not(#vt-tema) .vm-step.vm-on{color:var(--vc-pri);border-bottom-color:var(--vc-pri)}
html:not(#vt-tema) .vm-step.vm-on .vm-n{background:var(--vc-pri);color:#fff}
html:not(#vt-tema) .vm-step.vm-done .vm-n{background:var(--vc-ok-50);color:var(--vc-ok)}
html:not(#vt-tema) .vm-step.vm-bad .vm-n{background:var(--vc-err-50);color:var(--vc-err)}
html:not(#vt-tema) .vm-body{background:var(--vc-sf)}
html:not(#vt-tema) .vm-card{background:#fff;border:1px solid var(--vc-line)}
html:not(#vt-tema) .vm-card__hd{border-bottom:1px solid var(--vc-sf-2);background:var(--vc-sf)}
html:not(#vt-tema) .vm-card__hd h3{color:var(--vc-mut)}
html:not(#vt-tema) .vm-f > label{color:var(--vc-faint)}
html:not(#vt-tema) .vm-in,
html:not(#vt-tema) .vm-sel,
html:not(#vt-tema) .vm-ta{border:1px solid var(--vc-line);background:#fff;color:var(--vc-ink)}
html:not(#vt-tema) .vm-in:focus,
html:not(#vt-tema) .vm-sel:focus,
html:not(#vt-tema) .vm-ta:focus{border-color:var(--vc-pri);box-shadow:0 0 0 2px var(--vc-pri-100);outline:none}
html:not(#vt-tema) .vm-in[readonly],
html:not(#vt-tema) .vm-in:disabled,
html:not(#vt-tema) .vm-sel:disabled,
html:not(#vt-tema) .vm-ta[readonly]{background:var(--vc-sf-2);color:var(--vc-mut)}
html:not(#vt-tema) .vm-sel{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='6'%3E%3Cpath d='M0 0l5.5 6L11 0z' fill='%238d9aab'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
html:not(#vt-tema) .vm-btn{border:1px solid transparent}
html:not(#vt-tema) .vm-btn--pri{background:var(--vc-pri);color:#fff}
html:not(#vt-tema) .vm-btn--pri:active{background:var(--vc-pri-dk)}
html:not(#vt-tema) .vm-btn--ghost{background:#fff;border-color:var(--vc-line);color:var(--vc-tx)}
html:not(#vt-tema) .vm-btn--ghost:active{background:var(--vc-pri-50);border-color:var(--vc-pri);color:var(--vc-pri)}
html:not(#vt-tema) .vm-btn--ok{background:var(--vc-ok);color:#fff}
html:not(#vt-tema) .vm-btn--ok:active{background:var(--vc-ok-dk)}
html:not(#vt-tema) .vm-seg{border:1px solid var(--vc-line);background:#fff}
html:not(#vt-tema) .vm-seg button{border:none;background:transparent;color:var(--vc-mut);border-right:1px solid var(--vc-line)}
html:not(#vt-tema) .vm-seg button:last-child{border-right:none}
html:not(#vt-tema) .vm-seg button.vm-on{background:var(--vc-pri);color:#fff}
html:not(#vt-tema) .vm-seg button:disabled{background:var(--vc-sf);color:var(--vc-faint)}
html:not(#vt-tema) .vm-medio{border:1px solid var(--vc-line);background:#fff;color:var(--vc-mut)}
html:not(#vt-tema) .vm-medio.vm-on{border-color:var(--vc-pri);background:var(--vc-pri-100);color:var(--vc-pri-dk);box-shadow:inset 0 0 0 1px var(--vc-pri)}
html:not(#vt-tema) .vm-bill{border:1px solid var(--vc-line);background:#fff;color:var(--vc-tx)}
html:not(#vt-tema) .vm-bill:active{background:var(--vc-pri-50);border-color:var(--vc-pri);color:var(--vc-pri)}
html:not(#vt-tema) .vm-vuelto{border:1px solid var(--vc-ok-200);background:var(--vc-ok-50)}
html:not(#vt-tema) .vm-vuelto span{color:var(--vc-ok)}
html:not(#vt-tema) .vm-vuelto strong{color:var(--vc-ok)}
html:not(#vt-tema) .vm-vuelto--falta{border-color:var(--vc-err-200);background:var(--vc-err-50)}
html:not(#vt-tema) .vm-vuelto--falta span,
html:not(#vt-tema) .vm-vuelto--falta strong{color:var(--vc-err)}
html:not(#vt-tema) .vm-note{border:1px solid var(--vc-line);border-left:3px solid var(--vc-mut);background:var(--vc-sf)}
html:not(#vt-tema) .vm-note b{color:var(--vc-ink)}
html:not(#vt-tema) .vm-note--info{border-left-color:var(--vc-pri);background:var(--vc-pri-50)}
html:not(#vt-tema) .vm-note--warn{border-left-color:var(--vc-warn);background:var(--vc-warn-50);color:var(--vc-warn)}
html:not(#vt-tema) .vm-note--warn b{color:var(--vc-warn)}
html:not(#vt-tema) .vm-note--bad{border-left-color:var(--vc-err);background:var(--vc-err-50);color:var(--vc-err)}
html:not(#vt-tema) .vm-note--bad b{color:var(--vc-err)}
html:not(#vt-tema) .vm-note--ok{border-left-color:var(--vc-ok);background:var(--vc-ok-50);color:var(--vc-ok)}
html:not(#vt-tema) .vm-note--ok b{color:var(--vc-ok)}
html:not(#vt-tema) .vm-debt{border:1px solid var(--vc-line)}
html:not(#vt-tema) .vm-debt__hd .vm-dot{background:currentColor}
html:not(#vt-tema) .vm-debt--none .vm-debt__hd{background:var(--vc-sf);color:var(--vc-faint)}
html:not(#vt-tema) .vm-debt--ok .vm-debt__hd{background:var(--vc-ok-50);color:var(--vc-ok)}
html:not(#vt-tema) .vm-debt--warn .vm-debt__hd{background:var(--vc-warn-50);color:var(--vc-warn)}
html:not(#vt-tema) .vm-debt--bad .vm-debt__hd{background:var(--vc-err-50);color:var(--vc-err)}
html:not(#vt-tema) .vm-debt__bd{background:var(--vc-sf-2)}
html:not(#vt-tema) .vm-debt__bd > div{background:#fff}
html:not(#vt-tema) .vm-debt__bd dt{color:var(--vc-faint)}
html:not(#vt-tema) .vm-debt__bd dd{color:var(--vc-ink)}
html:not(#vt-tema) .vm-debt__bd dd.vm-neg{color:var(--vc-err)}
html:not(#vt-tema) .vm-cuota{border:1px solid var(--vc-line)}
html:not(#vt-tema) .vm-cuota__n{background:var(--vc-sf-2);color:var(--vc-mut)}
html:not(#vt-tema) .vm-cuota__d{color:var(--vc-ink)}
html:not(#vt-tema) .vm-cuota__i{color:var(--vc-pri-dk)}
html:not(#vt-tema) .vm-cuota__bd label{color:var(--vc-faint)}
html:not(#vt-tema) .vm-cuota__bd input{border:1px solid var(--vc-line);background:#fff}
html:not(#vt-tema) .vm-step-num{border:1px solid var(--vc-line)}
html:not(#vt-tema) .vm-step-num button{border:none;background:var(--vc-sf);color:var(--vc-tx)}
html:not(#vt-tema) .vm-step-num button:active{background:var(--vc-pri-100);color:var(--vc-pri)}
html:not(#vt-tema) .vm-step-num input{border:none;border-left:1px solid var(--vc-line);border-right:1px solid var(--vc-line);background:#fff}
html:not(#vt-tema) .vm-sum__r span{color:var(--vc-mut)}
html:not(#vt-tema) .vm-sum__r b{color:var(--vc-ink)}
html:not(#vt-tema) .vm-sum__r--sub{border-top:1px solid var(--vc-sf-2)}
html:not(#vt-tema) .vm-sum__r--sub span,
html:not(#vt-tema) .vm-sum__r--sub b{color:var(--vc-ink)}
html:not(#vt-tema) .vm-sum__r--ded span,
html:not(#vt-tema) .vm-sum__r--ded b{color:var(--vc-warn)}
html:not(#vt-tema) .vm-sum__r--mut span,
html:not(#vt-tema) .vm-sum__r--mut b{color:var(--vc-faint)}
html:not(#vt-tema) .vm-toggle{color:var(--vc-tx)}
html:not(#vt-tema) .vm-toggle input{accent-color:var(--vc-pri)}
html:not(#vt-tema) .vm-toggle--naranja input{accent-color:var(--vc-warn)}
html:not(#vt-tema) .vm-hint--naranja{color:var(--vc-warn)}
html:not(#vt-tema) .vm-err{color:var(--vc-err)}
html:not(#vt-tema) .vm-foot{border-top:1px solid var(--vc-line);background:#fff}
html:not(#vt-tema) .vm-full{background:#fff}
html:not(#vt-tema) .vm-spin{border:3px solid var(--vc-pri-100);border-top-color:var(--vc-pri)}
html:not(#vt-tema) .vm-proc-t{color:var(--vc-ink)}
html:not(#vt-tema) .vm-log{background:var(--vc-sf);border:1px solid var(--vc-sf-2)}
html:not(#vt-tema) .vm-log .vm-l-run{color:var(--vc-pri)}
html:not(#vt-tema) .vm-log .vm-l-ok{color:var(--vc-ok)}
html:not(#vt-tema) .vm-log .vm-l-err{color:var(--vc-err)}
html:not(#vt-tema) .vm-res__icon--ok{background:var(--vc-ok-50);color:var(--vc-ok)}
html:not(#vt-tema) .vm-res__icon--err{background:var(--vc-err-50);color:var(--vc-err)}
html:not(#vt-tema) .vm-res__k{color:var(--vc-mut)}
html:not(#vt-tema) .vm-res__n{color:var(--vc-ink)}
html:not(#vt-tema) .vm-res__m{color:var(--vc-mut)}
html:not(#vt-tema) .vm-detalle{border:1px solid var(--vc-line);background:var(--vc-sf)}
html:not(#vt-tema) .vm-detalle summary{color:var(--vc-mut)}
html:not(#vt-tema) .vm-detalle pre{color:var(--vc-tx)}
html:not(#vt-tema) .rs{background:#fff}
html:not(#vt-tema) .rs__top{border-bottom:1px solid var(--vc-line)}
html:not(#vt-tema) .rs__sello--ok{background:var(--vc-ok-50);color:var(--vc-ok)}
html:not(#vt-tema) .rs__sello--warn{background:var(--vc-warn-50);color:var(--vc-warn)}
html:not(#vt-tema) .rs__sello--bad{background:var(--vc-err-50);color:var(--vc-err)}
html:not(#vt-tema) .rs__tipo{color:var(--vc-mut)}
html:not(#vt-tema) .rs__num{color:var(--vc-ink)}
html:not(#vt-tema) .rs__pill{border:1px solid}
html:not(#vt-tema) .rs__pill--ok{background:var(--vc-ok-50);border-color:var(--vc-ok-200);color:var(--vc-ok)}
html:not(#vt-tema) .rs__pill--warn{background:var(--vc-warn-50);border-color:var(--vc-warn-200);color:var(--vc-warn)}
html:not(#vt-tema) .rs__pill--bad{background:var(--vc-err-50);border-color:var(--vc-err-200);color:var(--vc-err)}
html:not(#vt-tema) .rs__body{background:var(--vc-sf)}
html:not(#vt-tema) .rs__meta{background:var(--vc-sf-2);border:1px solid var(--vc-line)}
html:not(#vt-tema) .rs__meta > div{background:#fff}
html:not(#vt-tema) .rs__meta dt{color:var(--vc-faint)}
html:not(#vt-tema) .rs__meta dd{color:var(--vc-ink)}
html:not(#vt-tema) .rs__items{border:1px solid var(--vc-line);background:#fff}
html:not(#vt-tema) .rs__items__hd{background:var(--vc-sf);border-bottom:1px solid var(--vc-sf-2)}
html:not(#vt-tema) .rs__items__hd h3{color:var(--vc-mut)}
html:not(#vt-tema) .rs__items__hd span{color:var(--vc-faint)}
html:not(#vt-tema) .rs__t th{color:var(--vc-faint);border-bottom:1px solid var(--vc-sf-2)}
html:not(#vt-tema) .rs__t td{border-bottom:1px solid var(--vc-sf);color:var(--vc-tx)}
html:not(#vt-tema) .rs__t tr:last-child td{border-bottom:none}
html:not(#vt-tema) .rs__tot{border:1px solid var(--vc-line);background:#fff}
html:not(#vt-tema) .rs__tot > div{border-bottom:1px solid var(--vc-sf)}
html:not(#vt-tema) .rs__tot > div:last-child{border-bottom:none}
html:not(#vt-tema) .rs__tot span{color:var(--vc-mut)}
html:not(#vt-tema) .rs__tot b{color:var(--vc-ink)}
html:not(#vt-tema) .rs__tot .rs__ded span,
html:not(#vt-tema) .rs__tot .rs__ded b{color:var(--vc-warn)}
html:not(#vt-tema) .rs__tot .rs__neto{background:var(--vc-pri-50);border-top:1px solid var(--vc-pri-200)}
html:not(#vt-tema) .rs__tot .rs__neto span{color:var(--vc-pri-dk)}
html:not(#vt-tema) .rs__tot .rs__neto b{color:var(--vc-pri-dk)}
html:not(#vt-tema) .rs__acc{border-left:1px solid var(--vc-line);background:#fff}
html:not(#vt-tema) .rs__grupo h4{color:var(--vc-faint)}
html:not(#vt-tema) .rs__b{border:1px solid var(--vc-line);background:#fff;color:var(--vc-tx)}
html:not(#vt-tema) .rs__b em{color:var(--vc-mut)}
html:not(#vt-tema) .rs__b small{color:var(--vc-faint)}
html:not(#vt-tema) .rs__b--pri{background:var(--vc-pri);border-color:var(--vc-pri);color:#fff}
html:not(#vt-tema) .rs__b--pri em,
html:not(#vt-tema) .rs__b--pri small{color:rgba(255,255,255,.82)}
html:not(#vt-tema) .rs__b--warn{border-color:var(--vc-warn-200);color:var(--vc-warn);background:var(--vc-warn-50)}
html:not(#vt-tema) .rs__b--warn em{color:var(--vc-warn)}
html:not(#vt-tema) .rs__nota{color:var(--vc-faint)}
html:not(#vt-tema) .rs__nota b{color:var(--vc-mut)}
html:not(#vt-tema) .rs__foot{background:#fff;border-top:1px solid var(--vc-line)}
@media (max-width:820px),(pointer:coarse) and (max-width:1000px){
  html:not(#vt-tema) .rs__acc{border-left:none;border-top:1px solid var(--vc-line)}
}
@media (hover:hover) and (pointer:fine){
  html:not(#vt-tema) .rs__b:hover{border-color:var(--vc-pri);color:var(--vc-pri)}
  html:not(#vt-tema) .rs__b:hover em{color:var(--vc-pri)}
  html:not(#vt-tema) .rs__b--pri:hover{background:var(--vc-pri-dk);border-color:var(--vc-pri-dk);color:#fff}
}
html:not(#vt-tema) .vm-tel__plus{color:var(--vc-faint)}
html:not(#vt-tema) .vm-hint{color:var(--vc-faint)}
html:not(#vt-tema) .vm-sel-cli{border:1px solid var(--vc-pri-200);background:var(--vc-pri-50)}
html:not(#vt-tema) .vm-sel-cli__k{color:var(--vc-mut)}
html:not(#vt-tema) .vm-sel-cli__n{color:var(--vc-ink)}
html:not(#vt-tema) .vm-sel-cli__d{color:var(--vc-pri)}
html:not(#vt-tema) .vm-sel-cli__x{border:1px solid var(--vc-pri-200);background:#fff;color:var(--vc-mut)}
html:not(#vt-tema) .vm-sel-cli__x:hover{border-color:var(--vc-err);color:var(--vc-err)}
html:not(#vt-tema) .vm-buscar .vm-in[readonly]{background:var(--vc-sf);color:var(--vc-tx)}
@media (min-width:900px) and (hover:hover) and (pointer:fine){
  html:not(#vt-tema) .vm-panel{border:1px solid var(--vc-line);box-shadow:0 18px 46px rgba(var(--vc-sh-rgb),.26),0 2px 8px rgba(var(--vc-sh-rgb),.14)}
  html:not(#vt-tema) .vm-medio:hover,
html:not(#vt-tema) .vm-bill:hover{border-color:var(--vc-pri)}
  html:not(#vt-tema) .vm-btn--ghost:hover{border-color:var(--vc-pri);color:var(--vc-pri)}
}

/* ── color: ModalSeleccionarFormatoImpresion.css (12 reglas) ── */
html:not(#vt-tema) .msfi-ov{background:rgba(var(--vc-pri-rgb),.28)}
html:not(#vt-tema) .msfi-card{background:#fff;box-shadow:0 18px 48px rgba(var(--vc-pri-rgb),.28)}
html:not(#vt-tema) .msfi-hd{background:linear-gradient(135deg, var(--vc-pri-dk), var(--vc-pri));color:#fff}
html:not(#vt-tema) .msfi-x{border:none;background:rgba(255,255,255,.15);color:#fff}
html:not(#vt-tema) .msfi-x:hover{background:rgba(255,255,255,.28)}
html:not(#vt-tema) .msfi-fmt{border:1px solid var(--vc-pri-200);background:var(--vc-pri-50);color:var(--vc-tx)}
html:not(#vt-tema) .msfi-fmt i{color:var(--vc-pri)}
html:not(#vt-tema) .msfi-fmt--sel{border-color:var(--vc-pri);background:var(--vc-pri-100);box-shadow:0 0 0 2px rgba(var(--vc-pri-rgb),.18)}
html:not(#vt-tema) .msfi-ft{border-top:1px solid var(--vc-pri-100)}
html:not(#vt-tema) .msfi-b{border:none;background:var(--vc-pri-100);color:var(--vc-tx)}
html:not(#vt-tema) .msfi-b--pri{background:var(--vc-pri);color:#fff}
html:not(#vt-tema) .msfi-b--ghost{background:transparent;border:1px solid var(--vc-pri-200)}

/* ── color: ModalCliente.css (24 reglas) ── */
html:not(#vt-tema) .mc-overlay{background:rgba(var(--vc-sh-rgb),0.45)}
html:not(#vt-tema) .mc-modal{background:#ffffff;border:0.5px solid var(--vc-line-2);box-shadow:0 8px 32px rgba(var(--vc-sh-rgb),0.18)}
html:not(#vt-tema) .mc-header{background:var(--vc-pri-dk)}
html:not(#vt-tema) .mc-header-title{color:#ffffff}
html:not(#vt-tema) .mc-btn-close{background:rgba(255, 255, 255, 0.15);border:none;color:#ffffff}
html:not(#vt-tema) .mc-btn-close:hover{background:rgba(255, 255, 255, 0.28)}
html:not(#vt-tema) .mc-section-label{color:var(--vc-pri-dk)}
html:not(#vt-tema) .mc-field label{color:var(--vc-tx)}
html:not(#vt-tema) .mc-req{color:var(--vc-pri)}
html:not(#vt-tema) .mc-opt{color:var(--vc-faint)}
html:not(#vt-tema) .mc-input{border:0.5px solid var(--vc-line-2);background:var(--vc-sf);color:var(--vc-ink);outline:none}
html:not(#vt-tema) .mc-input:focus{border-color:var(--vc-pri);box-shadow:0 0 0 3px rgba(var(--vc-pri-rgb),0.12);background:#ffffff}
html:not(#vt-tema) .mc-error{color:var(--vc-err)}
html:not(#vt-tema) .mc-ubigeo-slot{background:var(--vc-sf);border:0.5px dashed var(--vc-pri-300);color:var(--vc-mut)}
html:not(#vt-tema) .mc-divider{border:none;border-top:0.5px solid var(--vc-line)}
html:not(#vt-tema) .mc-btn-buscar{border:0.5px solid var(--vc-pri-200);background:var(--vc-pri-50);color:var(--vc-pri-dk)}
html:not(#vt-tema) .mc-btn-buscar:hover{background:var(--vc-pri-100)}
html:not(#vt-tema) .mc-alert-error{background:var(--vc-err-50);border:0.5px solid var(--vc-err-200);color:var(--vc-err)}
html:not(#vt-tema) .mc-footer{border-top:0.5px solid var(--vc-line);background:var(--vc-sf)}
html:not(#vt-tema) .mc-btn-retornar{border:0.5px solid var(--vc-line-2);background:#ffffff;color:var(--vc-tx)}
html:not(#vt-tema) .mc-btn-retornar:hover{background:var(--vc-sf);color:var(--vc-ink)}
html:not(#vt-tema) .mc-btn-guardar{border:none;background:var(--vc-pri-dk);color:#ffffff}
html:not(#vt-tema) .mc-btn-guardar:hover{background:var(--vc-pri-dk)}
html:not(#vt-tema) .mc-btn-guardar:disabled{background:var(--vc-pri-300)}

/* ── color: ModalEnviarSunat.css (34 reglas) ── */
html:not(#vt-tema) .dme-scrim{--de-surface:#ffffff;--de-surface-2:var(--vc-sf);--de-surface-3:var(--vc-sf-2);--de-ink:var(--vc-ink);--de-ink-2:var(--vc-tx);--de-muted:var(--vc-mut);--de-faint:var(--vc-faint);--de-line:var(--vc-sf-2);--de-line-strong:var(--vc-line-2);--de-acc:var(--vc-pri);--de-acc-deep:var(--vc-pri-dk);--de-acc-soft:var(--vc-pri-50);--de-acc-line:var(--vc-pri-200);--de-ok:var(--vc-ok);--de-ok-bg:var(--vc-ok-50);--de-ok-line:var(--vc-ok-200);--de-err:var(--vc-err);--de-err-bg:var(--vc-err-50);--de-err-line:var(--vc-err-200);background:rgba(var(--vc-ov-rgb),.42)}
html:not(#vt-tema) .dme-modal{background:#ffffff;box-shadow:0 24px 60px -20px rgba(var(--vc-ov-rgb),.5)}
html:not(#vt-tema) .dme-h{border-bottom:1px solid var(--de-line);background:var(--de-surface-2)}
html:not(#vt-tema) .dme-h h3{color:var(--de-ink)}
html:not(#vt-tema) .dme-sub{color:var(--de-muted)}
html:not(#vt-tema) .dme-f{border-top:1px solid var(--de-line);background:var(--de-surface-2)}
html:not(#vt-tema) .dme-x{border:none;background:transparent;color:var(--de-faint)}
html:not(#vt-tema) .dme-x:hover{color:var(--de-ink);background:var(--de-surface-3)}
html:not(#vt-tema) .dme-btn{border:none;color:#fff;background:var(--de-acc);box-shadow:0 1px 2px rgba(0,0,0,.08)}
html:not(#vt-tema) .dme-btn:hover{background:var(--de-acc-deep)}
html:not(#vt-tema) .dme-btn-ghost{background:var(--de-surface);color:var(--de-ink-2);border:1px solid var(--de-line-strong)}
html:not(#vt-tema) .dme-btn-ghost:hover{background:var(--de-surface-3);color:var(--de-ink)}
html:not(#vt-tema) .dme-icon{stroke:currentColor;fill:none}
html:not(#vt-tema) .dme-step{color:var(--de-faint)}
html:not(#vt-tema) .dme-step .dme-mk{border:1.5px solid var(--de-line-strong);color:transparent}
html:not(#vt-tema) .dme-step-run{color:var(--de-ink)}
html:not(#vt-tema) .dme-step-run .dme-mk{border-color:var(--de-acc);border-right-color:transparent}
html:not(#vt-tema) .dme-step-done{color:var(--de-ink-2)}
html:not(#vt-tema) .dme-step-done .dme-mk{border-color:var(--de-ok);background:var(--de-ok);color:#fff}
html:not(#vt-tema) .dme-step-fail{color:var(--de-err)}
html:not(#vt-tema) .dme-step-fail .dme-mk{border-color:var(--de-err);background:var(--de-err);color:#fff}
html:not(#vt-tema) .dme-seal{background:var(--de-ok-bg);color:var(--de-ok);border:1.5px solid var(--de-ok-line)}
html:not(#vt-tema) .dme-seal.warn{background:var(--vc-warn-50);color:var(--vc-warn);border-color:var(--vc-warn-200)}
html:not(#vt-tema) .dme-badge{background:var(--vc-warn-50);border:1px solid var(--vc-warn-200);color:var(--vc-warn)}
html:not(#vt-tema) .dme-obs{border:1px solid var(--vc-warn-200);border-left:3px solid #d99b1c;background:var(--vc-warn-50);color:#6b5a33}
html:not(#vt-tema) .dme-seal.bad{background:var(--de-err-bg);color:var(--de-err);border-color:var(--de-err-line)}
html:not(#vt-tema) .dme-result h4{color:var(--de-ink)}
html:not(#vt-tema) .dme-result p{color:var(--de-muted)}
html:not(#vt-tema) .dme-errbox{border:1px solid var(--de-err-line);background:var(--de-err-bg)}
html:not(#vt-tema) .dme-errbox .c{color:var(--de-err)}
html:not(#vt-tema) .dme-errbox .t{color:var(--de-ink-2)}
html:not(#vt-tema) .dme-errbox .fix{color:var(--de-muted);border-top:1px dashed var(--de-err-line)}
html:not(#vt-tema) .dme-hash{background:var(--de-surface-3)}
html:not(#vt-tema) .dme-hash code{color:var(--de-ink-2)}

/* ── color: ModalEnviarCorreo.css (31 reglas) ── */
html:not(#vt-tema) .dec-scrim{--de-surface:#ffffff;--de-surface-2:var(--vc-sf);--de-surface-3:var(--vc-sf-2);--de-ink:var(--vc-ink);--de-ink-2:var(--vc-tx);--de-muted:var(--vc-mut);--de-faint:var(--vc-faint);--de-line:var(--vc-sf-2);--de-line-strong:var(--vc-line-2);--de-acc:var(--vc-pri);--de-acc-deep:var(--vc-pri-dk);--de-acc-soft:var(--vc-pri-50);--de-acc-line:var(--vc-pri-200);--de-ok:var(--vc-ok);--de-ok-bg:var(--vc-ok-50);--de-ok-line:var(--vc-ok-200);--de-err:var(--vc-err);--de-err-bg:var(--vc-err-50);--de-err-line:var(--vc-err-200);background:rgba(var(--vc-ov-rgb),.42)}
html:not(#vt-tema) .dec-modal{background:#ffffff;box-shadow:0 24px 60px -20px rgba(var(--vc-ov-rgb),.5)}
html:not(#vt-tema) .dec-h{border-bottom:1px solid var(--de-line);background:var(--de-surface-2)}
html:not(#vt-tema) .dec-h h3{color:var(--de-ink)}
html:not(#vt-tema) .dec-sub{color:var(--de-muted)}
html:not(#vt-tema) .dec-f{border-top:1px solid var(--de-line);background:var(--de-surface-2)}
html:not(#vt-tema) .dec-x{border:none;background:transparent;color:var(--de-faint)}
html:not(#vt-tema) .dec-x:hover{color:var(--de-ink);background:var(--de-surface-3)}
html:not(#vt-tema) .dec-btn{border:none;color:#fff;background:var(--de-acc);box-shadow:0 1px 2px rgba(0,0,0,.08)}
html:not(#vt-tema) .dec-btn:hover:not(:disabled){background:var(--de-acc-deep)}
html:not(#vt-tema) .dec-btn-ghost{background:var(--de-surface);color:var(--de-ink-2);border:1px solid var(--de-line-strong)}
html:not(#vt-tema) .dec-btn-ghost:hover{background:var(--de-surface-3);color:var(--de-ink)}
html:not(#vt-tema) .dec-icon{stroke:currentColor;fill:none}
html:not(#vt-tema) .dec-label{color:var(--de-muted)}
html:not(#vt-tema) .dec-field{border:1px solid var(--de-line-strong);background:var(--de-surface)}
html:not(#vt-tema) .dec-field:focus-within{border-color:var(--de-acc)}
html:not(#vt-tema) .dec-field.bad{border-color:var(--de-err)}
html:not(#vt-tema) .dec-field input{border:none;outline:none;background:transparent;color:var(--de-ink)}
html:not(#vt-tema) .dec-field input::placeholder{color:var(--de-faint)}
html:not(#vt-tema) .dec-hint{color:var(--de-muted)}
html:not(#vt-tema) .dec-error{color:var(--de-err)}
html:not(#vt-tema) .dec-prefill{color:var(--de-acc-deep);background:var(--de-acc-soft);border:1px solid var(--de-acc-line)}
html:not(#vt-tema) .dec-adj{border-top:1px solid var(--de-line)}
html:not(#vt-tema) .dec-adj-t{color:var(--de-muted)}
html:not(#vt-tema) .dec-file{border:1px solid var(--de-line);background:var(--de-surface-2);color:var(--de-ink-2)}
html:not(#vt-tema) .dec-file .tag{background:var(--de-surface-3);color:var(--de-muted)}
html:not(#vt-tema) .dec-seal{background:var(--de-ok-bg);color:var(--de-ok);border:1.5px solid var(--de-ok-line)}
html:not(#vt-tema) .dec-seal.bad{background:var(--de-err-bg);color:var(--de-err);border-color:var(--de-err-line)}
html:not(#vt-tema) .dec-result h4{color:var(--de-ink)}
html:not(#vt-tema) .dec-result p{color:var(--de-muted)}
html:not(#vt-tema) .dec-spin{border:2px solid rgba(255,255,255,.4);border-top-color:#fff}

/* ── color: ModalEnviarWhatsApp.css (30 reglas) ── */
html:not(#vt-tema) .dwa-scrim{--de-surface:#ffffff;--de-surface-2:var(--vc-sf);--de-surface-3:var(--vc-sf-2);--de-ink:var(--vc-ink);--de-ink-2:var(--vc-tx);--de-muted:var(--vc-mut);--de-faint:var(--vc-faint);--de-line:var(--vc-sf-2);--de-line-strong:var(--vc-line-2);--de-acc:var(--vc-pri);--de-acc-deep:var(--vc-pri-dk);--de-acc-soft:var(--vc-pri-50);--de-acc-line:var(--vc-pri-200);--de-ok:var(--vc-ok);--de-ok-bg:var(--vc-ok-50);--de-ok-line:var(--vc-ok-200);--de-err:var(--vc-err);--de-err-bg:var(--vc-err-50);--de-err-line:var(--vc-err-200);background:rgba(var(--vc-ov-rgb),.42)}
html:not(#vt-tema) .dwa-modal{background:#ffffff;box-shadow:0 24px 60px -20px rgba(var(--vc-ov-rgb),.5)}
html:not(#vt-tema) .dwa-h{border-bottom:1px solid var(--de-line);background:var(--de-surface-2)}
html:not(#vt-tema) .dwa-h h3{color:var(--de-ink)}
html:not(#vt-tema) .dwa-sub{color:var(--de-muted)}
html:not(#vt-tema) .dwa-x{border:none;background:transparent;color:var(--de-faint)}
html:not(#vt-tema) .dwa-x:hover{color:var(--de-ink);background:var(--de-surface-3)}
html:not(#vt-tema) .dwa-lbl{color:var(--de-muted)}
html:not(#vt-tema) .dwa-pais .plus{color:var(--de-faint)}
html:not(#vt-tema) .dwa-pais input{border:1px solid var(--de-line-strong);color:var(--de-ink);background:var(--de-surface)}
html:not(#vt-tema) .dwa-num input{border:1px solid var(--de-line-strong);color:var(--de-ink);background:var(--de-surface)}
html:not(#vt-tema) .dwa-tel input:focus{outline:none;border-color:var(--de-acc);box-shadow:0 0 0 3px var(--de-acc-soft)}
html:not(#vt-tema) .dwa-tel input.malo{border-color:var(--de-err-line);background:var(--de-err-bg)}
html:not(#vt-tema) .dwa-hint{color:var(--de-muted)}
html:not(#vt-tema) .dwa-err{color:var(--de-err)}
html:not(#vt-tema) .dwa-ok{background:var(--de-ok-bg);color:var(--de-ok);border:1px solid var(--de-ok-line)}
html:not(#vt-tema) .dwa-e164{color:var(--de-acc-deep);background:var(--de-acc-soft);border:1px solid var(--de-acc-line)}
html:not(#vt-tema) .dwa-e164 span.l{color:var(--de-muted)}
html:not(#vt-tema) .dwa-msg{border:1px solid var(--de-line)}
html:not(#vt-tema) .dwa-msg .cab{background:var(--de-surface-2);border-bottom:1px solid var(--de-line);color:var(--de-muted)}
html:not(#vt-tema) .dwa-msg .cuerpo{color:var(--de-ink-2)}
html:not(#vt-tema) .dwa-f{border-top:1px solid var(--de-line);background:var(--de-surface-2)}
html:not(#vt-tema) .dwa-btn{border:none;color:#fff;background:var(--de-acc);box-shadow:0 1px 2px rgba(0,0,0,.08)}
html:not(#vt-tema) .dwa-btn:hover:not(:disabled){background:var(--de-acc-deep)}
html:not(#vt-tema) .dwa-btn-ghost{background:var(--de-surface);color:var(--de-ink-2);border:1px solid var(--de-line-strong)}
html:not(#vt-tema) .dwa-btn-ghost:hover:not(:disabled){background:var(--de-surface-3);color:var(--de-ink)}
html:not(#vt-tema) .dwa-btn-wa{background:var(--vc-ok)}
html:not(#vt-tema) .dwa-btn-wa:hover:not(:disabled){background:var(--vc-ok)}
html:not(#vt-tema) .dwa-icon{stroke:currentColor;fill:none}
html:not(#vt-tema) .dwa-nota{color:var(--de-faint)}

/* ── color: BuscadorEntidadModal.razor.css (31 reglas) ── */
html:not(#vt-tema) .vvt-modal-backdrop{background:rgba(var(--vc-ov-rgb),0.40)}
html:not(#vt-tema) .vvt-modal{background:#ffffff;border:1px solid var(--vc-pri-200);box-shadow:0 8px 32px rgba(var(--vc-sh-rgb),0.18)}
html:not(#vt-tema) .vvt-modal-header{background:linear-gradient(135deg, var(--vc-pri) 0%, var(--vc-pri) 100%)}
html:not(#vt-tema) .vvt-modal-header h2{color:#ffffff}
html:not(#vt-tema) .vvt-modal-close{background:rgba(255,255,255,0.15);border:none;color:#ffffff}
html:not(#vt-tema) .vvt-modal-close:hover{background:rgba(255,255,255,0.28)}
html:not(#vt-tema) .vvt-search-row{border:1.5px solid var(--vc-pri-200);background:#fff;box-shadow:0 1px 4px rgba(var(--vc-pri-rgb),0.07)}
html:not(#vt-tema) .vvt-search-row:focus-within{border-color:var(--vc-pri)}
html:not(#vt-tema) .vvt-search-input{border:none;outline:none;color:var(--vc-ink);background:transparent}
html:not(#vt-tema) .vvt-search-input::placeholder{color:var(--vc-pri-300)}
html:not(#vt-tema) .vvt-search-btn{background:var(--vc-pri);border:none;color:#ffffff}
html:not(#vt-tema) .vvt-search-btn:hover{background:var(--vc-pri-dk)}
html:not(#vt-tema) .vvt-table-wrap{border:1px solid var(--vc-pri-200)}
html:not(#vt-tema) .vvt-table thead tr{background:var(--vc-pri-100)}
html:not(#vt-tema) .vvt-table thead th{color:var(--vc-pri-dk);border-bottom:1.5px solid var(--vc-pri-200)}
html:not(#vt-tema) .vvt-table thead th:hover{background:var(--vc-pri-200)}
html:not(#vt-tema) .vvt-sort-icon.active{color:var(--vc-pri)}
html:not(#vt-tema) .vvt-table tbody tr{border-bottom:1px solid var(--vc-pri-50)}
html:not(#vt-tema) .vvt-table tbody tr:nth-child(even){background:var(--vc-pri-50)}
html:not(#vt-tema) .vvt-table tbody tr:hover{background:var(--vc-pri-50)}
html:not(#vt-tema) .vvt-table tbody tr.vvt-selected{background:var(--vc-pri-200) !important}
html:not(#vt-tema) .vvt-cell-doc{color:var(--vc-pri-dk)}
html:not(#vt-tema) .vvt-cell-name{color:var(--vc-ink)}
html:not(#vt-tema) .vvt-cell-muted{color:var(--vc-mut)}
html:not(#vt-tema) .vvt-cell-email{color:var(--vc-mut)}
html:not(#vt-tema) .vvt-empty-row td{color:var(--vc-mut)}
html:not(#vt-tema) .vvt-count-label{color:var(--vc-mut)}
html:not(#vt-tema) .vvt-pager button{border:1px solid var(--vc-pri-200);background:#ffffff;color:var(--vc-pri)}
html:not(#vt-tema) .vvt-pager button:hover:not(:disabled){background:var(--vc-pri-100)}
html:not(#vt-tema) .vvt-pager button.vvt-page-active{background:var(--vc-pri);color:#ffffff;border-color:var(--vc-pri)}
html:not(#vt-tema) .vvt-pager-ellipsis{color:var(--vc-pri-300)}

/* ── color: ModalValidacion.razor.css (24 reglas) ── */
html:not(#vt-tema) .vm-overlay{background:rgba(8, 24, 56, 0.52)}
html:not(#vt-tema) .vm-modal{background:#ffffff;box-shadow:0 12px 40px rgba(14, 45, 100, 0.20), 0 2px 8px rgba(14, 45, 100, 0.08)}
html:not(#vt-tema) .vm-header{border-bottom:1px solid var(--vc-sf)}
html:not(#vt-tema) .vm-icon-danger{background:#fee2e2;color:var(--vc-err)}
html:not(#vt-tema) .vm-icon-warning{background:#fef3c7;color:#d97706}
html:not(#vt-tema) .vm-icon-primary{background:var(--vc-pri-100);color:var(--vc-pri)}
html:not(#vt-tema) .vm-icon-info{background:var(--vc-pri-100);color:var(--vc-pri)}
html:not(#vt-tema) .vm-icon-success{background:#dcfce7;color:#16a34a}
html:not(#vt-tema) .vm-title{color:var(--vc-ink)}
html:not(#vt-tema) .vm-msg{color:var(--vc-tx)}
html:not(#vt-tema) .vm-error-list{background:#fff7ed;border:1px solid #fed7aa}
html:not(#vt-tema) .vm-error-item{color:#9a3412}
html:not(#vt-tema) .vm-error-item i{color:#ea580c}
html:not(#vt-tema) .vm-btn{border:none;outline:none}
html:not(#vt-tema) .vm-btn-secondary{background:var(--vc-sf);color:var(--vc-tx);border:1.5px solid var(--vc-line)}
html:not(#vt-tema) .vm-btn-secondary:hover{background:var(--vc-sf-2)}
html:not(#vt-tema) .vm-btn-secondary i{color:var(--vc-tx)}
html:not(#vt-tema) .vm-btn-accion{color:#ffffff}
html:not(#vt-tema) .vm-btn-accion i{color:#ffffff}
html:not(#vt-tema) .vm-btn-danger{background:#ef4444}
html:not(#vt-tema) .vm-btn-warning{background:#f59e0b}
html:not(#vt-tema) .vm-btn-primary{background:var(--vc-pri)}
html:not(#vt-tema) .vm-btn-info{background:var(--vc-pri)}
html:not(#vt-tema) .vm-btn-success{background:#22c55e}

/* ═════ 2. REFINAMIENTO (forma, profundidad, jerarquía) ═════ */
/* — Ventana y telón — */
html:not(#vt-tema) .vm-root{background:rgba(var(--vc-ov-rgb),.42);-webkit-backdrop-filter:blur(3px) saturate(120%);backdrop-filter:blur(3px) saturate(120%);font-family:Inter,"Segoe UI",system-ui,-apple-system,Roboto,sans-serif}
@media (min-width:768px){
  html:not(#vt-tema) .vm-panel{border-radius:var(--vc-r-lg);border-color:var(--vc-line);box-shadow:0 24px 60px rgba(var(--vc-sh-rgb),.22),0 4px 14px rgba(var(--vc-sh-rgb),.10)}
}
html:not(#vt-tema) .vm-body{background:var(--vc-sf)}

/* — Cabecera: tinte suave y monto protagonista — */
html:not(#vt-tema) .vm-top{background:linear-gradient(180deg,var(--vc-pri-50) 0%,#fff 78%);border-bottom-color:var(--vc-line)}
html:not(#vt-tema) .vm-top__x{border-radius:var(--vc-r-sm);border-color:var(--vc-line);transition:background .15s,color .15s,border-color .15s}
html:not(#vt-tema) .vm-top__x:hover{background:var(--vc-err-50);border-color:var(--vc-err-200);color:var(--vc-err)}
html:not(#vt-tema) .vm-top__t{font-weight:700;letter-spacing:-.1px}
html:not(#vt-tema) .vm-neto .vm-val{color:var(--vc-ink);font-weight:700}
html:not(#vt-tema) .vm-neto .vm-cur{color:var(--vc-pri)}
html:not(#vt-tema) .vm-chip{border-radius:999px;padding-left:10px;padding-right:10px}

/* — Stepper: píldoras numeradas, hecho = check menta — */
html:not(#vt-tema) .vm-steps{border-top-color:var(--vc-line);background:transparent}
html:not(#vt-tema) .vm-step{background:transparent;transition:color .15s,border-color .2s}
html:not(#vt-tema) .vm-step:hover{color:var(--vc-tx)}
html:not(#vt-tema) .vm-step .vm-n{border-radius:999px;transition:background .2s,box-shadow .2s}
html:not(#vt-tema) .vm-step.vm-on{border-bottom-width:3px}
html:not(#vt-tema) .vm-step.vm-on .vm-n{background:var(--vc-grad-pri);box-shadow:0 0 0 3px var(--vc-pri-100)}
html:not(#vt-tema) .vm-step.vm-done{color:var(--vc-ok)}
html:not(#vt-tema) .vm-step.vm-done .vm-n{background:var(--vc-ok);color:#fff}

/* — Tarjetas — */
html:not(#vt-tema) .vm-card{border-radius:var(--vc-r);border-color:var(--vc-line);box-shadow:var(--vc-sh-1)}
html:not(#vt-tema) .vm-card__hd{background:#fff;border-bottom-color:var(--vc-sf-2)}
html:not(#vt-tema) .vm-card__hd h3{color:var(--vc-pri-dk);font-weight:700;display:flex;align-items:center;gap:7px}
html:not(#vt-tema) .vm-card__hd h3::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--vc-pri-lt);flex:none}
html:not(#vt-tema) .vm-note{border-radius:var(--vc-r-sm)}

/* — Campos — */
html:not(#vt-tema) .vm-in,html:not(#vt-tema) .vm-sel,html:not(#vt-tema) .vm-ta{border-radius:var(--vc-r-sm);border-color:var(--vc-line-2);transition:border-color .15s,box-shadow .15s}
html:not(#vt-tema) .vm-in:hover,html:not(#vt-tema) .vm-sel:hover{border-color:var(--vc-pri-300)}
html:not(#vt-tema) .vm-in:focus,html:not(#vt-tema) .vm-sel:focus,html:not(#vt-tema) .vm-ta:focus{box-shadow:0 0 0 3px var(--vc-pri-100)}
html:not(#vt-tema) .vm-root label{color:var(--vc-mut)}

/* — Botones — */
html:not(#vt-tema) .vm-btn{border-radius:var(--vc-r-sm);transition:transform .08s,box-shadow .15s,background .15s,border-color .15s,color .15s}
html:not(#vt-tema) .vm-btn--pri{background:var(--vc-grad-pri);box-shadow:var(--vc-sh-pri)}
html:not(#vt-tema) .vm-btn--pri:hover{background:var(--vc-grad-pri-h);box-shadow:0 6px 16px rgba(var(--vc-pri-rgb),.32),inset 0 1px 0 rgba(255,255,255,.2)}
html:not(#vt-tema) .vm-btn--pri:active{transform:translateY(1px);background:var(--vc-pri-dk)}
html:not(#vt-tema) .vm-btn--ok{background:linear-gradient(180deg,#1f9a6e 0%,#14805a 100%);box-shadow:0 4px 12px rgba(23,138,98,.26)}
html:not(#vt-tema) .vm-btn--ghost{border-color:var(--vc-line-2)}
html:not(#vt-tema) .vm-btn--ghost:hover{background:var(--vc-pri-50)}
html:not(#vt-tema) .vm-btn:disabled{box-shadow:none;filter:grayscale(.3)}

/* — Medios de pago y billetes — */
html:not(#vt-tema) .vm-medio{border-radius:var(--vc-r);border-color:var(--vc-line);box-shadow:var(--vc-sh-1);transition:border-color .15s,background .15s,transform .08s,box-shadow .15s}
html:not(#vt-tema) .vm-medio em{color:var(--vc-pri-lt)}
html:not(#vt-tema) .vm-medio:hover{transform:translateY(-1px);box-shadow:var(--vc-sh-2)}
html:not(#vt-tema) .vm-medio.vm-on{background:linear-gradient(180deg,var(--vc-pri-50) 0%,var(--vc-pri-100) 100%);box-shadow:inset 0 0 0 1px var(--vc-pri),0 4px 12px rgba(var(--vc-pri-rgb),.14)}
html:not(#vt-tema) .vm-medio.vm-on em{color:var(--vc-pri)}
html:not(#vt-tema) .vm-bill{border-radius:999px;border-color:var(--vc-line-2);transition:background .15s,border-color .15s,color .15s}
html:not(#vt-tema) .vm-bill:hover{background:var(--vc-acc-50);border-color:var(--vc-acc);color:var(--vc-acc-dk)}
html:not(#vt-tema) .vm-vuelto{border-radius:var(--vc-r);background:var(--vc-grad-ok);border-color:var(--vc-ok-200);box-shadow:inset 4px 0 0 var(--vc-ok)}
html:not(#vt-tema) .vm-vuelto--falta{background:var(--vc-err-50);box-shadow:inset 4px 0 0 var(--vc-err)}
html:not(#vt-tema) .vm-seg button{border-radius:var(--vc-r-sm)}

/* — Pie — */
html:not(#vt-tema) .vm-foot{border-top-color:var(--vc-line);box-shadow:0 -6px 16px rgba(var(--vc-sh-rgb),.04)}

/* — Pantalla de resultado — */
html:not(#vt-tema) .rs__top{background:linear-gradient(180deg,#f2faf6 0%,#fff 90%)}
html:not(#vt-tema) .rs__sello{border-radius:999px}
html:not(#vt-tema) .rs__sello--ok{background:var(--vc-ok);color:#fff;box-shadow:0 0 0 5px var(--vc-ok-50)}
html:not(#vt-tema) .rs__pill{border-radius:999px}
html:not(#vt-tema) .rs__num{color:var(--vc-ink)}
html:not(#vt-tema) .rs__body{background:var(--vc-sf)}
html:not(#vt-tema) .rs__meta,html:not(#vt-tema) .rs__items,html:not(#vt-tema) .rs__tot{border-radius:var(--vc-r);overflow:hidden;box-shadow:var(--vc-sh-1);border-color:var(--vc-line)}
html:not(#vt-tema) .rs__tot .rs__neto{background:linear-gradient(90deg,var(--vc-pri-50),#fff)}
html:not(#vt-tema) .rs__tot .rs__neto b{color:var(--vc-ink);font-weight:700}
html:not(#vt-tema) .rs__b{border-radius:var(--vc-r-sm);transition:background .15s,border-color .15s,color .15s,transform .08s}
html:not(#vt-tema) .rs__b:hover{background:var(--vc-pri-50)}
html:not(#vt-tema) .rs__b--pri{background:var(--vc-grad-pri);box-shadow:var(--vc-sh-pri)}
html:not(#vt-tema) .rs__b--pri:hover{background:var(--vc-pri-dk)}

/* — Modal Imprimir (msfi) y envíos SUNAT / correo / WhatsApp — */
html:not(#vt-tema) .msfi-ov{background:rgba(var(--vc-ov-rgb),.42);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
html:not(#vt-tema) .msfi-card{border-radius:var(--vc-r-lg);overflow:hidden;box-shadow:0 20px 50px rgba(var(--vc-sh-rgb),.24),0 3px 10px rgba(var(--vc-sh-rgb),.10);border-color:var(--vc-line)}
html:not(#vt-tema) .msfi-hd{background:var(--vc-grad-hd)}
html:not(#vt-tema) .msfi-x{border-radius:var(--vc-r-sm)}
html:not(#vt-tema) .msfi-fmt{border-radius:var(--vc-r);transition:transform .1s,box-shadow .15s,border-color .15s}
html:not(#vt-tema) .msfi-fmt:hover{transform:translateY(-2px);box-shadow:var(--vc-sh-2)}
html:not(#vt-tema) .msfi-fmt--sel{box-shadow:0 0 0 3px var(--vc-pri-100),var(--vc-sh-2)}
html:not(#vt-tema) .msfi-b{border-radius:var(--vc-r-sm)}
html:not(#vt-tema) .msfi-b--pri{background:var(--vc-grad-pri);box-shadow:var(--vc-sh-pri)}
html:not(#vt-tema) .msfi-ft{background:var(--vc-sf)}

/* — Nuevo cliente (mc) — */
html:not(#vt-tema) .mc-overlay{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
html:not(#vt-tema) .mc-modal{border-radius:var(--vc-r-lg);overflow:hidden;box-shadow:0 20px 50px rgba(var(--vc-sh-rgb),.24)}
html:not(#vt-tema) .mc-header{background:var(--vc-grad-hd)}
html:not(#vt-tema) .mc-input,html:not(#vt-tema) .mc-textarea{border-radius:var(--vc-r-sm)}
html:not(#vt-tema) .mc-btn-guardar,html:not(#vt-tema) .mc-btn-retornar,html:not(#vt-tema) .mc-btn-close{border-radius:var(--vc-r-sm)}
html:not(#vt-tema) .mc-btn-guardar{background:var(--vc-grad-pri);box-shadow:var(--vc-sh-pri)}

/* — Buscador de clientes (vvt) — */
html:not(#vt-tema) .vvt-modal{border-radius:var(--vc-r-lg);overflow:hidden;box-shadow:0 20px 50px rgba(var(--vc-sh-rgb),.24)}
html:not(#vt-tema) .vvt-modal-header{background:var(--vc-grad-hd)}
html:not(#vt-tema) .vvt-search-input{border-radius:var(--vc-r-sm) 0 0 var(--vc-r-sm)}
html:not(#vt-tema) .vvt-search-btn{border-radius:0 var(--vc-r-sm) var(--vc-r-sm) 0}
html:not(#vt-tema) .vvt-table tbody tr{transition:background .12s}
html:not(#vt-tema) .vvt-table tbody tr:hover{background:var(--vc-pri-50)}

@media (prefers-reduced-motion:reduce){
  html:not(#vt-tema) .vm-root *{transition:none!important}
}

/* — Acento en lo seleccionado: paso activo, medio de pago, formato y foco — */
html:not(#vt-tema) .vm-step.vm-on{border-bottom-color:var(--vc-acc)}
html:not(#vt-tema) .vm-step.vm-on .vm-n{box-shadow:0 0 0 3px var(--vc-acc-50),0 0 0 4px var(--vc-acc)}
html:not(#vt-tema) .vm-medio.vm-on{box-shadow:inset 0 0 0 2px var(--vc-acc),0 4px 12px rgba(var(--vc-acc-rgb),.18);background:var(--vc-acc-50);border-color:var(--vc-acc)}
html:not(#vt-tema) .vm-medio.vm-on,html:not(#vt-tema) .vm-medio.vm-on em{color:var(--vc-acc-dk)}
html:not(#vt-tema) .msfi-fmt--sel{border-color:var(--vc-acc);background:var(--vc-acc-50);box-shadow:0 0 0 2px var(--vc-acc),var(--vc-sh-2)}
html:not(#vt-tema) .vm-in:focus,html:not(#vt-tema) .vm-sel:focus,html:not(#vt-tema) .vm-ta:focus{border-color:var(--vc-acc);box-shadow:0 0 0 3px var(--vc-acc-50)}
html:not(#vt-tema) .vm-bill:hover{background:var(--vc-acc-50);border-color:var(--vc-acc);color:var(--vc-acc-dk)}