/* Fase 9.3 — CSS verbatim de los bloques de estilo de Pages/Common/Comunicaciones/ModalEnviarCorreo.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. */
/* ⚠ 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. */
.dec-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);
}

.dec-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: dec-pop .18s ease-out;
}

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

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

.dec-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);
}

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

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

.dec-b {
    padding: 18px 17px;
}

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

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

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

.dec-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);
}

    .dec-btn:hover:not(:disabled) {
        background: var(--de-acc-deep);
    }

    .dec-btn:disabled {
        opacity: .55;
        cursor: not-allowed;
    }

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

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

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

/* ---------- campo ---------- */
.dec-label {
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--de-muted);
    margin-bottom: 6px;
}

.dec-field {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 11px;
    border: 1px solid var(--de-line-strong);
    border-radius: 3px;
    background: var(--de-surface);
    transition: border-color .12s ease;
}

    .dec-field:focus-within {
        border-color: var(--de-acc);
    }

    .dec-field.bad {
        border-color: var(--de-err);
    }

    .dec-field input {
        border: none;
        outline: none;
        background: transparent;
        font: inherit;
        font-size: 13px;
        color: var(--de-ink);
        width: 100%;
    }

        .dec-field input::placeholder {
            color: var(--de-faint);
        }

.dec-hint {
    font-size: 11.5px;
    color: var(--de-muted);
    margin-top: 6px;
}

.dec-error {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 11.5px;
    color: var(--de-err);
    margin-top: 6px;
}

.dec-prefill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--de-acc-deep);
    background: var(--de-acc-soft);
    border: 1px solid var(--de-acc-line);
    border-radius: 3px;
    padding: 3px 8px;
    margin-top: 8px;
}

/* ---------- adjuntos ---------- */
.dec-adj {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--de-line);
}

.dec-adj-t {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--de-muted);
    margin-bottom: 8px;
}

.dec-files {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.dec-file {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--de-line);
    border-radius: 3px;
    padding: 5px 9px;
    font-size: 11.5px;
    background: var(--de-surface-2);
    color: var(--de-ink-2);
}

    .dec-file .tag {
        font-family: "IBM Plex Mono", Consolas, monospace;
        font-size: 9.5px;
        font-weight: 600;
        letter-spacing: .05em;
        padding: 1px 4px;
        border-radius: 3px;
        background: var(--de-surface-3);
        color: var(--de-muted);
    }

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

.dec-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);
}

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

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

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

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

.dec-spin {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: dec-spin .7s linear infinite;
}

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

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

    .dec-spin {
        animation: none;
    }
}