/* Rev. 10/10/2026 — CSS de IndicadorReenvio (igual al ERP de escritorio; @@ → @). */
    .dri {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        height: 38px;
        padding: 0 12px 0 10px;
        border-radius: 10px;
        border: 1px solid var(--de-line);
        background: var(--de-surface);
        color: var(--de-ink-2);
        font: inherit;
        font-size: 12px;
        cursor: pointer;
        text-align: left;
        transition: border-color .15s, box-shadow .15s;
        max-width: 280px;
    }

        .dri:hover {
            border-color: var(--de-acc-line);
            box-shadow: 0 2px 8px -4px rgba(15,107,92,.35);
        }

        .dri .ic {
            width: 24px;
            height: 24px;
            border-radius: 7px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex: none;
            background: var(--de-surface-3);
            color: var(--de-muted);
        }

        .dri .tx {
            display: flex;
            flex-direction: column;
            line-height: 1.2;
            min-width: 0;
        }

        .dri .l {
            font-size: 10px;
            font-weight: 700;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: var(--de-faint);
        }

        .dri .v {
            font-weight: 600;
            color: var(--de-ink);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .dri.prog {
            border-color: var(--de-acc-line);
            background: var(--de-acc-soft);
        }

            .dri.prog .ic { background: var(--de-acc); color: #fff; }
            .dri.prog .l { color: var(--de-acc-deep); }

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

            .dri.run .ic { background: var(--de-prog); color: #fff; }
            .dri.run .l { color: var(--de-prog); }

        .dri.pausa .ic { background: var(--de-warn-bg); color: var(--de-warn); }

        .dri .bar {
            height: 3px;
            border-radius: 2px;
            background: rgba(91,75,189,.18);
            margin-top: 3px;
            overflow: hidden;
        }

            .dri .bar span {
                display: block;
                height: 100%;
                background: var(--de-prog);
                transition: width .6s ease;
            }

    .dri-icon {
        width: 13px;
        height: 13px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .dri-spin {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        border: 2px solid currentColor;
        border-right-color: transparent;
        animation: dri-spin .7s linear infinite;
    }

    .dri-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #7ee2c6;
        box-shadow: 0 0 0 3px rgba(255,255,255,.35);
        animation: dri-pulse 1.6s ease-in-out infinite;
    }

    @keyframes dri-spin { to { transform: rotate(360deg); } }
    @keyframes dri-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

    @media (prefers-reduced-motion: reduce) {
        .dri-spin, .dri-dot { animation: none; }
    }