/* Fase 9.3 — CSS verbatim de los bloques de estilo de Pages/Common/Comunicaciones/ModalEnviarSunat.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. */
/* ---------- shell del modal ---------- */
/* ⚠ SIN backdrop-filter — ES LA CAUSA DEL OVERLAY MAL PINTADO
           En WebView2, un elemento con backdrop-filter crea un "Backdrop Root":
           Chromium tiene que promoverlo a su propia capa compositada y rehacer
           el orden de pintado de lo que queda detrás. Ahí es donde se rompía:
           elementos del modal de cobranza (los botones verdes de la pantalla de
           resultado) terminaban dibujándose POR ENCIMA de este diálogo, aunque
           su z-index fuera muy inferior. Por eso subir z-index nunca lo arregló
           — no era un problema de orden declarado, sino de capas de composición.
           Sin el blur, el apilamiento vuelve a respetar el z-index, y de paso la
           aplicación de fondo deja de verse lavada. */
.dme-scrim {
    /* ══════════════════════════════════════════════════════════════════
           PALETA LOCAL — AQUÍ ESTABA EL BUG DEL "OVERLAY"

           Este modal pintaba su caja con  background: var(--de-surface).
           Esos tokens --de-* vienen del Centro de Administración de Documentos
           Electrónicos, que los declara en SU página. Invocado desde el POS,
           esa hoja no está cargada: la variable no existe, la declaración es
           inválida y el fondo queda TRANSPARENTE.

           Eso es lo que se veía y lo que yo interpreté mal durante varias
           vueltas: el diálogo SÍ estaba por encima — el z-index siempre estuvo
           bien — pero como no tenía fondo, la pantalla de cobranza se veía A
           TRAVÉS de él. Los botones verdes y el texto del resultado parecían
           "pisar" el diálogo cuando en realidad se transparentaban.

           Subir el z-index no podía arreglarlo nunca, porque el orden de
           apilamiento no era el problema.

           Ahora los tokens se declaran ACÁ, sobre el propio telón. El modal ya
           no depende de ninguna hoja externa: donde sea que se invoque, se ve
           igual. Si la página anfitriona también los define, estos ganan por
           estar más cerca en el árbol — que es justamente lo que queremos para
           mantener un estándar uniforme.
           ══════════════════════════════════════════════════════════════════ */
    --de-surface: #ffffff;
    --de-surface-2: #f6f8fb;
    --de-surface-3: #eef2f8;
    --de-ink: #16202e;
    --de-ink-2: #33404f;
    --de-muted: #6b7a8d;
    --de-faint: #8d9aab;
    --de-line: #e9eef5;
    --de-line-strong: #cbd5e1;
    --de-acc: #1a4fba;
    --de-acc-deep: #123a91;
    --de-acc-soft: #f2f7fe;
    --de-acc-line: #cfe0f7;
    --de-ok: #0f7a4d;
    --de-ok-bg: #e6f5ee;
    --de-ok-line: #bfe3d2;
    --de-err: #b42318;
    --de-err-bg: #fdeceb;
    --de-err-line: #f5cdc9;
    position: fixed;
    inset: 0;
    background: rgba(14,26,23,.42);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    /* Se abre desde el modal de cobranza (10100). */
    z-index: var(--z-modal-4);
}

.dme-modal {
    /* Literal, no token: esta caja JAMÁS puede quedar transparente. */
    background: #ffffff;
    border-radius: 3px;
    box-shadow: 0 24px 60px -20px rgba(10,20,18,.5);
    width: 100%;
    max-width: 430px;
    overflow: hidden;
    animation: dme-pop .18s ease-out;
}

@keyframes dme-pop {
    from {
        opacity: 0;
        transform: translateY(6px) scale(.985);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.dme-h {
    padding: 14px 17px;
    border-bottom: 1px solid var(--de-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--de-surface-2);
}

    .dme-h h3 {
        margin: 0;
        font-size: 14.5px;
        font-weight: 600;
        color: var(--de-ink);
    }

.dme-sub {
    font-size: 11.5px;
    color: var(--de-muted);
    font-family: "IBM Plex Mono", Consolas, monospace;
}

.dme-b {
    padding: 20px 17px;
}

.dme-f {
    padding: 12px 17px;
    border-top: 1px solid var(--de-line);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    background: var(--de-surface-2);
}

.dme-x {
    border: none;
    background: transparent;
    color: var(--de-faint);
    cursor: pointer;
    padding: 4px;
    border-radius: 3px;
    display: flex;
}

    .dme-x:hover {
        color: var(--de-ink);
        background: var(--de-surface-3);
    }

.dme-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 13px;
    border: none;
    border-radius: 3px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    color: #fff;
    background: var(--de-acc);
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
}

    .dme-btn:hover {
        background: var(--de-acc-deep);
    }

.dme-btn-ghost {
    background: var(--de-surface);
    color: var(--de-ink-2);
    border: 1px solid var(--de-line-strong);
    font-weight: 500;
}

    .dme-btn-ghost:hover {
        background: var(--de-surface-3);
        color: var(--de-ink);
    }

.dme-icon {
    width: 14px;
    height: 14px;
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- stepper ---------- */
.dme-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dme-step {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 4px;
    font-size: 12.5px;
    color: var(--de-faint);
    transition: color .2s;
}

    .dme-step .dme-mk {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 1.5px solid var(--de-line-strong);
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
        color: transparent;
    }

.dme-step-run {
    color: var(--de-ink);
    font-weight: 500;
}

    .dme-step-run .dme-mk {
        border-color: var(--de-acc);
        border-right-color: transparent;
        animation: dme-spin .7s linear infinite;
    }

.dme-step-done {
    color: var(--de-ink-2);
}

    .dme-step-done .dme-mk {
        border-color: var(--de-ok);
        background: var(--de-ok);
        color: #fff;
    }

.dme-step-fail {
    color: var(--de-err);
    font-weight: 500;
}

    .dme-step-fail .dme-mk {
        border-color: var(--de-err);
        background: var(--de-err);
        color: #fff;
    }

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

/* ---------- resultado ---------- */
.dme-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 6px 0;
}

.dme-seal {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--de-ok-bg);
    color: var(--de-ok);
    border: 1.5px solid var(--de-ok-line);
}

    /* ══════════════════════════════════════════════════════════════
           ACEPTADO CON OBSERVACIONES

           SUNAT lo acepta (BitAceptado = true) pero deja una observación en
           el CDR. Verde de "todo bien" es engañoso: el comprobante es válido,
           y a la vez hay algo que corregir antes del próximo. Estado propio,
           en ámbar, para que no se confunda con ninguno de los dos extremos.
           ══════════════════════════════════════════════════════════════ */
    .dme-seal.warn {
        background: #fdf3e2;
        color: #8a5a00;
        border-color: #f0dcb4;
    }

.dme-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 3px;
    background: #fdf3e2;
    border: 1px solid #f0dcb4;
    color: #8a5a00;
}

.dme-obs {
    width: 100%;
    text-align: left;
    border: 1px solid #f0dcb4;
    border-left: 3px solid #d99b1c;
    background: #fdf9f1;
    border-radius: 3px;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.5;
    color: #6b5a33;
}

.dme-seal.bad {
    background: var(--de-err-bg);
    color: var(--de-err);
    border-color: var(--de-err-line);
}

.dme-seal .dme-icon {
    width: 26px;
    height: 26px;
}

.dme-result h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--de-ink);
}

.dme-result p {
    margin: 0;
    font-size: 12.5px;
    color: var(--de-muted);
    max-width: 42ch;
}

.dme-errbox {
    width: 100%;
    text-align: left;
    border: 1px solid var(--de-err-line);
    background: var(--de-err-bg);
    border-radius: 3px;
    padding: 10px 12px;
    margin-top: 4px;
}

    .dme-errbox .c {
        font-family: "IBM Plex Mono", Consolas, monospace;
        font-size: 10.5px;
        font-weight: 600;
        color: var(--de-err);
        letter-spacing: .04em;
    }

    .dme-errbox .t {
        font-size: 12px;
        color: var(--de-ink-2);
        margin-top: 3px;
    }

    .dme-errbox .fix {
        font-size: 11.5px;
        color: var(--de-muted);
        margin-top: 7px;
        padding-top: 7px;
        border-top: 1px dashed var(--de-err-line);
    }

.dme-hash {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: var(--de-surface-3);
    border-radius: 3px;
    padding: 7px 9px;
}

    .dme-hash code {
        font-family: "IBM Plex Mono", Consolas, monospace;
        font-size: 10.5px;
        color: var(--de-ink-2);
        word-break: break-all;
        flex: 1;
        text-align: left;
    }

@media (prefers-reduced-motion: reduce) {
    .dme-modal {
        animation: none;
    }

    .dme-step-run .dme-mk {
        animation: none;
    }
}