/* Fase 9.4 — CSS verbatim de los bloques de estilo de Pages/DocumentosElectronicos/Pages/CentroAdminDocElecMain.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. */
/* =====================================================================
   TOKENS — tema claro elegante, sin azul cobalto.
   Neutros con sesgo verde-pizarra. Los semánticos son independientes del
   acento: cambiar --de-acc no altera la lectura de los estados.
   ===================================================================== */
:root {
    --de-ground: #f6f7f6;
    --de-surface: #ffffff;
    --de-surface-2: #fbfcfb;
    --de-surface-3: #eef1ef;
    --de-line: #e2e7e4;
    --de-line-strong: #cfd6d2;
    --de-ink: #17211f;
    --de-ink-2: #3d4a47;
    --de-muted: #6b7a76;
    --de-faint: #93a09c;
    --de-acc: #0f6b5c;
    --de-acc-deep: #0a4f44;
    --de-acc-soft: #e7f1ee;
    --de-acc-line: #bcd8d1;
    --de-ok: #157f47;
    --de-ok-bg: #e6f4ec;
    --de-ok-line: #b4dcc4;
    --de-warn: #a35a06;
    --de-warn-bg: #fdf1e1;
    --de-warn-line: #f0d3a8;
    --de-err: #b3253f;
    --de-err-bg: #fceaee;
    --de-err-line: #f2c2cd;
    /* alerta: el documento sí se envió, pero SUNAT lo rechazó */
    --de-alert: #c2410c;
    --de-alert-bg: #fff2ea;
    --de-alert-line: #f6c9ab;
    --de-prog: #5b4bbd;
    --de-prog-bg: #eeecfb;
    --de-prog-line: #cfc8f0;
    --de-shadow: 0 1px 2px rgba(20,36,32,.05), 0 8px 24px -12px rgba(20,36,32,.18);
    --de-radius: 10px;
    /* VDateRangePicker hereda el acento del módulo */
    --vdr-primary: #0f6b5c;
    --vdr-primary-dark: #0a4f44;
    --vdr-primary-light: #e7f1ee;
}

.de-shell {
    background: var(--de-ground);
    color: var(--de-ink);
    font-family: "Libre Franklin", -apple-system, "Segoe UI", Arial, sans-serif;
    font-size: 13.5px;
    line-height: 1.5;
    min-height: 100vh;
}

/* Embebido en WinForms la ventana ya define el ancho útil: encajonar el
   contenido en 1320 px deja dos franjas muertas a los lados. Se usa todo,
   con un tope alto para que en un monitor ancho la tabla no se estire
   hasta volverse ilegible. */
.de-wrap {
    max-width: 2200px;
    margin: 0 auto;
    padding: 0 18px;
    padding-block: 16px 40px;
}

.de-mono {
    font-family: "IBM Plex Mono", Consolas, monospace;
    font-variant-numeric: tabular-nums;
}

.de-num {
    font-variant-numeric: tabular-nums;
}

/* ---------- encabezado de módulo ---------- */
.de-modhead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.de-eyebrow {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--de-acc);
}

.de-modhead h1 {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.02em;
    margin: 2px 0 2px;
}

.de-sub {
    color: var(--de-muted);
    font-size: 12.5px;
}

.de-ctx {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.de-ctx-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--de-surface);
    border: 1px solid var(--de-line);
    border-radius: 7px;
    padding: 6px 10px;
    font-size: 12px;
    color: var(--de-ink-2);
}

    .de-ctx-chip b {
        font-weight: 600;
        color: var(--de-ink);
    }

.de-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--de-acc);
    flex: none;
}

/* ---------- cambio rápido de sucursal / punto de emisión ---------- */
.de-switcher {
    position: relative;
}

.de-sw-trg {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--de-surface);
    border: 1px solid var(--de-line);
    border-radius: 8px;
    padding: 6px 10px;
    font: inherit;
    font-size: 12px;
    color: var(--de-ink-2);
    cursor: pointer;
    text-align: left;
}

    .de-sw-trg:hover {
        border-color: var(--de-acc);
    }

    .de-sw-trg .stack2 {
        display: flex;
        flex-direction: column;
        line-height: 1.25;
    }

    .de-sw-trg .l {
        font-size: 9.5px;
        font-weight: 600;
        letter-spacing: .09em;
        text-transform: uppercase;
        color: var(--de-faint);
    }

    .de-sw-trg .v {
        font-weight: 600;
        color: var(--de-ink);
        font-size: 12.5px;
    }

.de-sw-pop {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 40;
    width: 300px;
    background: var(--de-surface);
    border: 1px solid var(--de-line);
    border-radius: 10px;
    box-shadow: 0 14px 38px -14px rgba(10,22,20,.34);
    overflow: hidden;
    animation: de-pop .14s ease-out;
}

.de-sw-sec {
    padding: 9px 11px 4px;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--de-faint);
}

.de-sw-opt {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    border: none;
    background: transparent;
    font: inherit;
    font-size: 12.5px;
    color: var(--de-ink-2);
    padding: 7px 11px;
    cursor: pointer;
    text-align: left;
}

    .de-sw-opt:hover {
        background: var(--de-surface-2);
    }

    .de-sw-opt[aria-checked="true"] {
        background: var(--de-acc-soft);
        color: var(--de-acc-deep);
        font-weight: 600;
    }

    .de-sw-opt .rd {
        width: 14px;
        height: 14px;
        flex: none;
        border-radius: 50%;
        border: 1.5px solid var(--de-line-strong);
        position: relative;
    }

    .de-sw-opt[aria-checked="true"] .rd {
        border-color: var(--de-acc);
    }

        .de-sw-opt[aria-checked="true"] .rd::after {
            content: "";
            position: absolute;
            inset: 2.5px;
            border-radius: 50%;
            background: var(--de-acc);
        }

    .de-sw-opt .cd {
        font-family: "IBM Plex Mono", Consolas, monospace;
        font-size: 11px;
        color: var(--de-faint);
    }

.de-sw-div {
    height: 1px;
    background: var(--de-line);
    margin: 5px 0;
}

.de-sw-foot {
    padding: 8px 11px;
    border-top: 1px solid var(--de-line);
    background: var(--de-surface-2);
    font-size: 11px;
    color: var(--de-muted);
}

@keyframes de-pop {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

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

/* ---------- barra de filtros ---------- */
.de-filters {
    background: var(--de-surface);
    border: 1px solid var(--de-line);
    border-radius: var(--de-radius);
    padding: 11px 12px;
    display: flex;
    gap: 9px;
    align-items: center;
    flex-wrap: wrap;
    box-shadow: var(--de-shadow);
    margin-bottom: 14px;
}

.de-ctl {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 11px;
    background: var(--de-surface);
    border: 1px solid var(--de-line-strong);
    border-radius: 7px;
    font: inherit;
    font-size: 12.5px;
    color: var(--de-ink);
    cursor: pointer;
}

    .de-ctl:hover {
        border-color: var(--de-acc);
    }

select.de-ctl {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 26px;
    background-image: linear-gradient(45deg,transparent 50%,var(--de-faint) 50%),linear-gradient(135deg,var(--de-faint) 50%,transparent 50%);
    background-position: calc(100% - 14px) 15px, calc(100% - 9px) 15px;
    background-size: 5px 5px,5px 5px;
    background-repeat: no-repeat;
}

.de-search {
    flex: 1;
    min-width: 180px;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 11px;
    border: 1px solid var(--de-line-strong);
    border-radius: 7px;
    background: var(--de-surface);
}

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

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

.de-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 13px;
    border: none;
    border-radius: 7px;
    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);
}

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

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

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

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

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

/* ---------- KPIs ---------- */
.de-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(170px,1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.de-kpi {
    background: var(--de-surface);
    border: 1px solid var(--de-line);
    border-radius: var(--de-radius);
    padding: 12px 13px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    position: relative;
    overflow: hidden;
}

    .de-kpi::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: var(--de-line-strong);
    }

    .de-kpi.is-ok::before {
        background: var(--de-ok);
    }

    .de-kpi.is-warn::before {
        background: var(--de-warn);
    }

    .de-kpi.is-err::before {
        background: var(--de-err);
    }

    .de-kpi.is-prog::before {
        background: var(--de-prog);
    }

    .de-kpi.is-acc::before {
        background: var(--de-acc);
    }

.de-kpi-l {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--de-muted);
}

.de-kpi-v {
    font-size: 25px;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.05;
}

.de-kpi-f {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11.5px;
    color: var(--de-faint);
    display: flex;
    align-items: center;
    gap: 6px;
}

.de-spark {
    display: block;
    width: 100%;
    height: 26px;
    margin-top: 2px;
}

.de-meter {
    height: 5px;
    border-radius: 3px;
    background: var(--de-surface-3);
    overflow: hidden;
}

    .de-meter i {
        display: block;
        height: 100%;
        background: var(--de-ok);
    }

/* ---------- panel y tabla ---------- */
.de-panel {
    background: var(--de-surface);
    border: 1px solid var(--de-line);
    border-radius: var(--de-radius);
    box-shadow: var(--de-shadow);
    overflow: hidden;
}

.de-panel-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 13px;
    border-bottom: 1px solid var(--de-line);
    background: var(--de-surface-2);
    flex-wrap: wrap;
}

.de-tabs {
    display: flex;
    gap: 2px;
    align-self: stretch;
}

/* El tab activo se marca con subrayado grueso además del tinte: el color
   solo se pierde de vista cuando hay cuatro pestañas seguidas. */
.de-tab {
    border: none;
    border-bottom: 3px solid transparent;
    background: transparent;
    font: inherit;
    font-size: 12.5px;
    color: var(--de-muted);
    padding: 9px 14px 7px;
    border-radius: 6px 6px 0 0;
    cursor: pointer;
    margin-bottom: -1px;
}

    .de-tab[aria-selected="true"] {
        background: var(--de-acc-soft);
        border-bottom-color: var(--de-acc);
        color: var(--de-acc-deep);
        font-weight: 700;
    }

    .de-tab:hover:not([aria-selected="true"]) {
        color: var(--de-ink);
    }

.de-tcount {
    font-size: 11.5px;
    color: var(--de-faint);
}

.de-tscroll {
    overflow-x: auto;
}

.de-panel table {
    width: 100%;
    border-collapse: collapse;
    min-width: 1020px;
}

.de-panel thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--de-surface-2);
    text-align: left;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--de-muted);
    padding: 9px 10px;
    border-bottom: 1px solid var(--de-line);
    white-space: nowrap;
}

    .de-panel thead th.r {
        text-align: right;
    }

/* Encabezados ordenables (Tipo, Serie/Número, Emisión, Cliente). El
   agrupado por día no cambia -- solo el orden DENTRO de cada día. */
.de-panel thead th.de-sort {
    cursor: pointer;
    user-select: none;
}

    .de-panel thead th.de-sort:hover {
        color: var(--de-ink);
    }

.de-sort-ico {
    display: inline-block;
    margin-left: 3px;
    opacity: .5;
}

    .de-sort-ico.activo {
        opacity: 1;
        color: var(--de-acc);
    }

.de-panel tbody td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--de-line);
    vertical-align: middle;
    font-size: 12.5px;
    color: var(--de-ink-2);
}

    .de-panel tbody td.r {
        text-align: right;
    }

.de-panel tbody tr.de-row {
    cursor: pointer;
}

    .de-panel tbody tr.de-row:hover > td {
        background: var(--de-surface-2);
    }

    .de-panel tbody tr.de-row.open > td {
        background: var(--de-acc-soft);
    }

tr.de-anulado td .de-serie {
    text-decoration: line-through;
    color: var(--de-faint);
}

.de-tdoc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 20px;
    padding: 0 5px;
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 600;
    background: var(--de-surface-3);
    color: var(--de-ink-2);
}

.de-serie {
    font-weight: 500;
    color: var(--de-ink);
    letter-spacing: .01em;
}

.de-cli {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

    .de-cli b {
        font-weight: 500;
        color: var(--de-ink);
        font-size: 12.5px;
    }

    .de-cli span {
        font-size: 11px;
        color: var(--de-faint);
    }

/* ---------- chips de estado ---------- */
.de-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 9px 0 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid transparent;
    white-space: nowrap;
    position: relative;
}

    .de-chip i {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
        flex: none;
        position: relative;
    }

    .de-chip.ok {
        background: var(--de-ok-bg);
        color: var(--de-ok);
        border-color: var(--de-ok-line);
    }

    .de-chip.warn {
        background: var(--de-warn-bg);
        color: var(--de-warn);
        border-color: var(--de-warn-line);
    }

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

    .de-chip.alert {
        background: var(--de-alert-bg);
        color: var(--de-alert);
        border-color: var(--de-alert-line);
        font-weight: 700;
    }

        /* El signo hace el trabajo que el color solo no puede: distingue el
           rechazo de un simple pendiente aunque se imprima en blanco y negro. */
        .de-chip.alert::after {
            content: "!";
            font-weight: 800;
            font-size: 11px;
            line-height: 1;
            margin-left: 1px;
            padding: 1px 5px;
            border-radius: 999px;
            background: var(--de-alert);
            color: #fff;
        }

    .de-chip.prog {
        background: var(--de-prog-bg);
        color: var(--de-prog);
        border-color: var(--de-prog-line);
    }

    .de-chip.neutral {
        background: var(--de-surface-3);
        color: var(--de-muted);
        border-color: var(--de-line);
    }

    /* No enviado y Rechazado: onda de radar — piden atención */
    .de-chip.radar i::after {
        content: "";
        position: absolute;
        inset: -3px;
        border-radius: 50%;
        border: 1.5px solid currentColor;
        animation: de-radar 1.8s ease-out infinite;
    }

@keyframes de-radar {
    0% {
        transform: scale(.55);
        opacity: .9;
    }

    100% {
        transform: scale(2.1);
        opacity: 0;
    }
}

/* En resumen: respiración sobria, no compite con el radar */
.de-chip.breathe i {
    animation: de-breathe 1.8s ease-in-out infinite;
}

@keyframes de-breathe {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: .25;
    }
}

/* ---------- condición de venta ---------- */
.de-cdv {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 20px;
    padding: 0 8px;
    border-radius: 5px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .03em;
    border: 1px solid var(--de-line);
    background: var(--de-surface-3);
    color: var(--de-muted);
    white-space: nowrap;
}

    .de-cdv.contado {
        background: var(--de-acc-soft);
        color: var(--de-acc-deep);
        border-color: var(--de-acc-line);
    }

    .de-cdv.credito {
        background: var(--de-prog-bg);
        color: var(--de-prog);
        border-color: var(--de-prog-line);
    }

    .de-cdv.vencido {
        background: var(--de-err-bg);
        color: var(--de-err);
        border-color: var(--de-err-line);
    }

    .de-cdv .cuo {
        font-family: "IBM Plex Mono", Consolas, monospace;
        font-weight: 500;
        opacity: .8;
    }

/* ---------- respuesta recortada + ojito ---------- */
.de-resp {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 250px;
}

    .de-resp .txt {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 11.5px;
        color: var(--de-muted);
    }

    .de-resp .code {
        font-family: "IBM Plex Mono", Consolas, monospace;
        font-size: 10px;
        font-weight: 600;
        padding: 1px 4px;
        border-radius: 3px;
        background: var(--de-surface-3);
        color: var(--de-muted);
        flex: none;
    }

        .de-resp .code.e {
            background: var(--de-err-bg);
            color: var(--de-err);
        }

        .de-resp .code.o {
            background: var(--de-ok-bg);
            color: var(--de-ok);
        }

.de-eye {
    width: 22px;
    height: 22px;
    flex: none;
    border: 1px solid var(--de-line);
    border-radius: 5px;
    background: var(--de-surface);
    color: var(--de-faint);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

    .de-eye:hover {
        color: var(--de-acc-deep);
        border-color: var(--de-acc-line);
        background: var(--de-acc-soft);
    }

/* ---------- columna de opciones ---------- */
.de-ops {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
}

.de-op {
    width: 27px;
    height: 27px;
    border: 1px solid var(--de-line);
    border-radius: 6px;
    background: var(--de-surface);
    color: var(--de-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

    .de-op:hover:not(:disabled) {
        color: var(--de-acc-deep);
        border-color: var(--de-acc-line);
        background: var(--de-acc-soft);
    }

    .de-op:disabled {
        opacity: .32;
        cursor: not-allowed;
    }

.de-caret {
    transition: transform .18s ease;
    color: var(--de-faint);
}

tr.open .de-caret {
    transform: rotate(90deg);
    color: var(--de-acc);
}

/* ---------- fila expandida ---------- */
tr.de-detail > td {
    padding: 0;
    border-bottom: 1px solid var(--de-line);
    background: var(--de-surface-2);
}

.de-dtabs {
    display: flex;
    gap: 2px;
    padding: 0 11px;
    border-bottom: 1px solid var(--de-line);
    background: var(--de-surface-2);
}

.de-dtab {
    border: none;
    background: transparent;
    font: inherit;
    font-size: 11.5px;
    color: var(--de-muted);
    padding: 8px 10px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

    .de-dtab[aria-selected="true"] {
        color: var(--de-acc-deep);
        border-bottom-color: var(--de-acc);
        font-weight: 600;
    }

.de-dpad {
    padding: 14px 16px 16px;
    display: grid;
    grid-template-columns: minmax(0,1.15fr) minmax(0,1fr);
    gap: 16px;
}

@media (max-width: 900px) {
    .de-dpad {
        grid-template-columns: 1fr;
    }
}

.de-dpad.full {
    grid-template-columns: 1fr;
}

.de-blk {
    background: var(--de-surface);
    border: 1px solid var(--de-line);
    border-radius: 8px;
    overflow: hidden;
}

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

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

.de-blk-b {
    padding: 11px;
}

.de-kv {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 5px 14px;
    font-size: 12px;
    margin: 0;
}

    .de-kv dt {
        color: var(--de-muted);
    }

    .de-kv dd {
        margin: 0;
        text-align: right;
        color: var(--de-ink);
        font-weight: 500;
    }

.de-msg {
    border-left: 3px solid var(--de-ok);
    background: var(--de-ok-bg);
    color: var(--de-ok);
    border-radius: 0 6px 6px 0;
    padding: 9px 11px;
    font-size: 12px;
    font-weight: 500;
}

    .de-msg.e {
        border-left-color: var(--de-err);
        background: var(--de-err-bg);
        color: var(--de-err);
    }

    .de-msg.w {
        border-left-color: var(--de-warn);
        background: var(--de-warn-bg);
        color: var(--de-warn);
    }

    .de-msg .code {
        font-family: "IBM Plex Mono", Consolas, monospace;
        font-size: 11px;
        opacity: .85;
        display: block;
        margin-bottom: 2px;
    }

.de-hash {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 9px;
    background: var(--de-surface-3);
    border-radius: 6px;
    padding: 7px 9px;
}

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

.de-files {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 10px;
}

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

    .de-file:hover {
        border-color: var(--de-acc);
        color: var(--de-acc-deep);
    }

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

/* ---------- timeline de trazabilidad ---------- */
.de-tl {
    list-style: none;
    margin: 0;
    padding: 0 0 0 6px;
}

    .de-tl li {
        position: relative;
        padding: 0 0 14px 20px;
        border-left: 1.5px solid var(--de-line);
    }

        .de-tl li:last-child {
            padding-bottom: 0;
            border-left-color: transparent;
        }

        .de-tl li::before {
            content: "";
            position: absolute;
            left: -5.5px;
            top: 3px;
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: var(--de-surface);
            border: 2px solid var(--de-line-strong);
        }

        .de-tl li.ok::before {
            border-color: var(--de-ok);
        }

        .de-tl li.err::before {
            border-color: var(--de-err);
        }

        .de-tl li.warn::before {
            border-color: var(--de-warn);
        }

        .de-tl li.acc::before {
            border-color: var(--de-acc);
            background: var(--de-acc);
        }

.de-tl-t {
    font-size: 12px;
    font-weight: 600;
    color: var(--de-ink);
}

.de-tl-m {
    font-size: 11.5px;
    color: var(--de-muted);
}

.de-tl-d {
    font-size: 10.5px;
    color: var(--de-faint);
    font-family: "IBM Plex Mono", Consolas, monospace;
    margin-top: 1px;
}

/* ---------- tabla de detalle ---------- */
.de-panel table.de-mini {
    min-width: 0;
    width: 100%;
}

    .de-panel table.de-mini th {
        position: static;
        font-size: 10px;
        padding: 6px 8px;
    }

    .de-panel table.de-mini td {
        padding: 6px 8px;
        font-size: 11.5px;
    }

/* ---------- estados vacío y cargando ---------- */
.de-empty {
    padding: 46px 20px;
    text-align: center;
    color: var(--de-muted);
}

    .de-empty .t {
        font-size: 14px;
        font-weight: 600;
        color: var(--de-ink);
        margin-bottom: 4px;
    }

    .de-empty .d {
        font-size: 12.5px;
    }

.de-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 46px 20px;
    color: var(--de-muted);
    font-size: 12.5px;
}

.de-spinner {
    width: 22px;
    height: 22px;
    border: 2.5px solid var(--de-acc-soft);
    border-top-color: var(--de-acc);
    border-radius: 50%;
    animation: de-spin .8s linear infinite;
}

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

.de-toast {
    position: fixed;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--de-ink);
    color: #fff;
    font-size: 12.5px;
    padding: 9px 15px;
    border-radius: 8px;
    box-shadow: 0 10px 28px -10px rgba(0,0,0,.5);
    z-index: var(--z-toast);
    animation: de-pop .16s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .de-chip.radar i::after, .de-chip.breathe i, .de-spinner, .de-sw-pop, .de-toast {
        animation: none;
    }

    .de-chip.radar i::after {
        opacity: .35;
        transform: scale(1.5);
    }

    .de-caret {
        transition: none;
    }
}

.de-shell :focus-visible {
    outline: 2px solid var(--de-acc);
    outline-offset: 2px;
}
/* ========================================================================
   Corte por día en la bandeja
   ------------------------------------------------------------------------
   Scopeado bajo .de-panel igual que el resto de reglas de la tabla: sin ese
   prefijo, ".de-panel tbody td" le gana al padding por especificidad y el
   corte se pinta con el relleno de una celda normal.

   El degradado ancla la franja al bloque que abre —el color se apaga hacia
   las filas en vez de cortarlas con una banda plana— y el pulso usa los
   mismos colores semánticos que los chips de estado, así que no hay una
   segunda leyenda que aprender.
   ======================================================================== */
.de-panel tbody tr.de-daygroup > td {
    padding: 0;
    background: linear-gradient(180deg, var(--de-acc-soft), transparent);
    border-top: 1px solid var(--de-acc-line);
    border-bottom: 1px solid var(--de-line);
}

/* La primera del listado no necesita raya arriba: ya está el thead. */
.de-panel tbody tr.de-daygroup:first-child > td {
    border-top: none;
}

.de-daygroup-in {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 9px 14px;
}

/* ---- la fecha ---- */
.de-daygroup-in .dg-f {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--de-acc-deep);
    white-space: nowrap;
}

/* ---- el pulso del día ---- */
.de-daygroup-in .dg-pulso {
    display: flex;
    flex: none;
    width: 132px;
    height: 6px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--de-surface-3);
}

    .de-daygroup-in .dg-pulso > span {
        display: block;
        height: 100%;
    }

    .de-daygroup-in .dg-pulso .s-ok { background: var(--de-ok); }
    .de-daygroup-in .dg-pulso .s-al { background: var(--de-alert); }
    .de-daygroup-in .dg-pulso .s-pe { background: var(--de-err); }
    .de-daygroup-in .dg-pulso .s-an { background: var(--de-line-strong); }

/* ---- la leyenda ---- */
.de-daygroup-in .dg-leyenda {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    color: var(--de-muted);
    white-space: nowrap;
}

    .de-daygroup-in .dg-leyenda .k {
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    .de-daygroup-in .dg-leyenda b {
        font-weight: 600;
        color: var(--de-ink-2);
        font-variant-numeric: tabular-nums;
    }

    .de-daygroup-in .dg-leyenda .k i {
        width: 7px;
        height: 7px;
        border-radius: 2px;
        flex: none;
    }

    .de-daygroup-in .dg-leyenda .k.ok i { background: var(--de-ok); }
    .de-daygroup-in .dg-leyenda .k.al i { background: var(--de-alert); }
    .de-daygroup-in .dg-leyenda .k.pe i { background: var(--de-err); }
    .de-daygroup-in .dg-leyenda .k.an i { background: var(--de-line-strong); }

/* ---- la línea que empuja los totales a la derecha ---- */
.de-daygroup-in .dg-line {
    flex: 1;
    height: 1px;
    background: var(--de-line);
    min-width: 16px;
}

/* ---- los totales, uno por moneda ---- */
.de-daygroup-in .dg-t {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--de-ink);
    background: var(--de-surface);
    border: 1px solid var(--de-acc-line);
    border-radius: 999px;
    padding: 2px 9px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 980px) {
    .de-daygroup-in .dg-line {
        display: none;
    }

    .de-daygroup-in {
        gap: 10px;
        padding: 9px 12px;
    }
}

/* Portado tal cual de BandejaGuias.razor (pestaña de Guías del mismo Centro de Administración de Documentos Electrónicos) -- misma pestaña "Cadena del documento", mismo CSS, para Comprobantes. */

/* =====================================================================
   CADENA DE DOCUMENTOS — timeline horizontal.
   Solo referencial: cotización → pedido → guía → comprobante → NC.
   Las etapas sin documento se dibujan igual, en hueco: que no exista el
   pedido también es información.
   ===================================================================== */
.bg-cad {
    display: flex;
    align-items: stretch;
    gap: 0;
    overflow-x: auto;
    padding: 6px 2px 2px;
}

.bg-cad-e {
    flex: 1 1 0;
    min-width: 168px;
    position: relative;
    padding: 0 12px;
}

    /* la línea que une las etapas */
    .bg-cad-e::before {
        content: "";
        position: absolute;
        top: 11px;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--de-line);
    }

    .bg-cad-e:first-child::before {
        left: 50%;
    }

    .bg-cad-e:last-child::before {
        right: 50%;
    }

    .bg-cad-e.salto::before {
        background: repeating-linear-gradient(90deg, var(--de-line-strong) 0 4px, transparent 4px 9px);
    }

.bg-cad-n {
    position: relative;
    width: 24px;
    height: 24px;
    margin: 0 auto 9px;
    border-radius: 50%;
    background: var(--de-surface);
    border: 2px solid var(--de-line-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--de-faint);
    z-index: 1;
}

.bg-cad-e.hay .bg-cad-n {
    border-color: var(--de-acc);
    color: var(--de-acc-deep);
    background: var(--de-acc-soft);
}

.bg-cad-e.actual .bg-cad-n {
    border-color: var(--de-acc-deep);
    background: var(--de-acc-deep);
    color: #fff;
    box-shadow: 0 0 0 4px var(--de-acc-soft);
}

.bg-cad-b {
    text-align: center;
    padding: 0 4px;
}

.bg-cad-et {
    font-size: 9.5px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--de-faint);
    margin-bottom: 3px;
}

.bg-cad-d {
    font-family: "IBM Plex Mono", Consolas, monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--de-ink);
}

.bg-cad-e.vacio .bg-cad-d {
    font-family: inherit;
    font-weight: 400;
    font-size: 11.5px;
    color: var(--de-faint);
    font-style: italic;
}

.bg-cad-f {
    font-size: 10.5px;
    color: var(--de-muted);
    margin-top: 2px;
}

.bg-cad-x {
    display: inline-block;
    margin-top: 5px;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--de-warn-bg);
    color: var(--de-warn);
    border: 1px solid var(--de-warn-line);
}

.bg-cad-i {
    display: inline-block;
    margin-top: 5px;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--de-surface-3);
    color: var(--de-muted);
}

.bg-cad-nota {
    font-size: 11px;
    color: var(--de-faint);
    padding: 8px 2px 0;
}

    /* ---- [Reenvío 10/10/2026] botón «Reenvío masivo» y KPI de pendientes clicable ---- */
    .de-btn-reenvio {
        position: relative;
        background: var(--de-surface);
        color: var(--de-ink-2);
        border: 1px solid var(--de-line-strong);
        font-weight: 600;
        box-shadow: none;
    }

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

        .de-btn-reenvio .n {
            min-width: 20px;
            height: 18px;
            padding: 0 6px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: var(--de-surface-3);
            color: var(--de-muted);
        }

        .de-btn-reenvio.hay {
            background: var(--de-alert);
            border-color: var(--de-alert);
            color: #fff;
            animation: de-reenvio-late 2.2s ease-in-out infinite;
        }

            .de-btn-reenvio.hay:hover { background: #9a3409; }
            .de-btn-reenvio.hay .n { background: #fff; color: var(--de-alert); }

    @keyframes de-reenvio-late {
        0%, 100% { box-shadow: 0 0 0 0 rgba(194,65,12,0); }
        50% { box-shadow: 0 0 0 5px rgba(194,65,12,.18); }
    }

    .de-kpi.de-kpi-accion { cursor: pointer; transition: box-shadow .15s, transform .15s; }
    .de-kpi.de-kpi-accion:hover { box-shadow: 0 6px 18px -10px rgba(163,90,6,.55); transform: translateY(-1px); }

    .de-kpi-cta {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        margin-top: 6px;
        font-size: 11.5px;
        font-weight: 700;
        color: var(--de-alert);
    }

    @media (prefers-reduced-motion: reduce) {
        .de-btn-reenvio.hay { animation: none; }
    }

/* ---- [12/10/2026] enlace «Novedades» junto a «¿Cómo funciona?» ---- */
.de-btn-nov {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--de-acc-line);
    border-radius: 7px;
    background: var(--de-acc-soft);
    color: var(--de-acc-deep);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

    .de-btn-nov:hover { background: #d9ebe6; }
    .de-btn-nov .st { font-size: 11px; color: var(--de-acc); }

/* Baja aceptada en SUNAT · falta anular en el sistema */
.de-baja-pend {
    display: flex;
    width: max-content;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid #f2c27a;
    background: #fff6e6;
    color: #8a4b00;
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

    .de-baja-pend:hover { background: #ffedcc; border-color: #e0a24a; }
    .de-baja-pend .de-icon { width: 12px; height: 12px; }