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

.dwa-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: 520px;
    overflow: hidden;
    animation: dwa-pop .18s ease-out;
}

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

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

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

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

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

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

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

.dwa-b {
    padding: 17px;
}

.dwa-lbl {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--de-muted);
    margin-bottom: 7px;
}

/* ---------- número en dos casillas ---------- */
.dwa-tel {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.dwa-pais {
    position: relative;
    flex: none;
    width: 104px;
}

    .dwa-pais .plus {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 13px;
        color: var(--de-faint);
        pointer-events: none;
    }

    .dwa-pais input {
        width: 100%;
        height: 38px;
        padding: 0 10px 0 22px;
        border: 1px solid var(--de-line-strong);
        border-radius: 3px;
        font: inherit;
        font-size: 13.5px;
        font-family: "IBM Plex Mono", Consolas, monospace;
        color: var(--de-ink);
        background: var(--de-surface);
    }

.dwa-num {
    flex: 1;
    min-width: 0;
}

    .dwa-num input {
        width: 100%;
        height: 38px;
        padding: 0 11px;
        border: 1px solid var(--de-line-strong);
        border-radius: 3px;
        font: inherit;
        font-size: 13.5px;
        font-family: "IBM Plex Mono", Consolas, monospace;
        letter-spacing: .04em;
        color: var(--de-ink);
        background: var(--de-surface);
    }

.dwa-tel input:focus {
    outline: none;
    border-color: var(--de-acc);
    box-shadow: 0 0 0 3px var(--de-acc-soft);
}

.dwa-tel input.malo {
    border-color: var(--de-err-line);
    background: var(--de-err-bg);
}

.dwa-hint {
    font-size: 11.5px;
    color: var(--de-muted);
    margin-top: 7px;
    line-height: 1.5;
}

.dwa-err {
    font-size: 11.5px;
    color: var(--de-err);
    margin-top: 7px;
    font-weight: 500;
}

.dwa-ok {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    padding: 3px 9px;
    border-radius: 3px;
    background: var(--de-ok-bg);
    color: var(--de-ok);
    border: 1px solid var(--de-ok-line);
    margin-top: 8px;
}

/* ---------- resultado ---------- */
.dwa-e164 {
    font-family: "IBM Plex Mono", Consolas, monospace;
    font-size: 13px;
    font-weight: 600;
    color: var(--de-acc-deep);
    background: var(--de-acc-soft);
    border: 1px solid var(--de-acc-line);
    border-radius: 3px;
    padding: 7px 10px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .dwa-e164 span.l {
        font-family: inherit;
        font-size: 10px;
        letter-spacing: .08em;
        color: var(--de-muted);
        font-weight: 400;
    }

/* ---------- mensaje ---------- */
.dwa-msg {
    margin-top: 16px;
    border: 1px solid var(--de-line);
    border-radius: 3px;
    overflow: hidden;
}

    .dwa-msg .cab {
        background: var(--de-surface-2);
        border-bottom: 1px solid var(--de-line);
        padding: 7px 11px;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .09em;
        text-transform: uppercase;
        color: var(--de-muted);
    }

    .dwa-msg .cuerpo {
        padding: 11px;
        font-size: 12.5px;
        line-height: 1.55;
        color: var(--de-ink-2);
        white-space: pre-wrap;
        word-break: break-word;
        max-height: 26vh;
        overflow: auto;
    }

/* ---------- pie con las dos rutas ---------- */
.dwa-f {
    padding: 13px 17px;
    border-top: 1px solid var(--de-line);
    background: var(--de-surface-2);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}

.dwa-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 14px;
    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);
}

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

    .dwa-btn:disabled {
        opacity: .5;
        cursor: not-allowed;
    }

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

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

.dwa-btn-wa {
    background: #1f9d55;
}

    .dwa-btn-wa:hover:not(:disabled) {
        background: #177744;
    }

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

.dwa-nota {
    flex: 1;
    min-width: 180px;
    font-size: 10.5px;
    color: var(--de-faint);
    line-height: 1.45;
}

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