/* ================================================================
   procuos.css
   Shared UI primitives used across modules
   ================================================================ */

.cfg-layout {
    display: flex;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,.07), 0 4px 20px rgba(0,0,0,.05);
    overflow: hidden;
    min-height: 280px;
}

.cfg-sidebar {
    width: 210px;
    flex-shrink: 0;
    background: #f5f5f5;
    border-right: 1px solid #e8eaed;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cfg-sidebar__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 18px;
    font-size: 13.5px;
    color: #6b7280;
    cursor: pointer;
    border-bottom: 1px solid #eef0f5;
    transition: background .12s, color .12s;
    user-select: none;
}

.cfg-sidebar__item:last-child {
    border-bottom: none;
}

.cfg-sidebar__item:hover {
    background: #eef0f4;
    color: #333;
}

.cfg-sidebar__item--active {
    background: #fff;
    color: #5b9bd1;
    font-weight: 700;
    border-left: 3px solid #5b9bd1;
    padding-left: 15px;
}

.cfg-sidebar__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #5b9bd1;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    padding: 0 6px;
    line-height: 1;
    flex-shrink: 0;
}

.cfg-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.cfg-content__body {
    flex: 1;
}

.cfg-content__footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 13px 20px;
    background: #fafbfc;
    border-top: 1px solid #e5e9f2;
}

.cfg-hint {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 13px 22px;
    background: #f9f9f9;
    border-bottom: 1px solid #e8eaed;
    font-size: 12.5px;
    color: #777;
    line-height: 1.5;
}

.cfg-hint .fa {
    margin-top: 2px;
    flex-shrink: 0;
    color: #5b9bd1;
}

.cfg-empty {
    padding: 52px 24px;
    text-align: center;
    color: #b8c2d0;
}

.cfg-empty .fa {
    font-size: 38px;
    display: block;
    margin-bottom: 12px;
}

.cfg-empty p {
    display: block;
    margin: 0;
    font-size: 13.5px;
}

.cfg-name {
    font-weight: 600;
    color: #1e2d3d;
}

.cfg-email {
    font-size: 12px;
    color: #9aaab8;
    margin-left: 7px;
}

.cfg-muted {
    color: #9aaab8;
}

.cfg-order {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.cfg-order__num {
    font-size: 15px;
    font-weight: 800;
    color: #5b9bd1;
    line-height: 1;
}

.cfg-order__btns {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cfg-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,.07), 0 4px 20px rgba(0,0,0,.05);
    overflow: hidden;
    margin-bottom: 0;
}

#solicitudes-form .cfg-card,
#ordenes-form .cfg-card {
    overflow: visible;
}

.cfg-card__head {
    padding: 18px 22px 14px;
    border-bottom: 1px solid #e8eaed;
}

.cfg-card__head h4 {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
    color: #2c3e50;
}

.cfg-card__head h4 .fa,
.cfg-card__head h4 i[class^="fa-"],
.cfg-card__head h4 i[class*=" fa-"] {
    color: #5b9bd1;
    margin-right: 7px;
}

.cfg-card__head p {
    margin: 0;
    font-size: 13px;
    color: #9aaab8;
}

.cfg-card__body {
    padding: 20px 22px;
}

.cfg-card__head--collapsible {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.proc-history-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid #d8e0ea;
    background: #f7f9fc;
    color: #5f6f82;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background .14s, border-color .14s, color .14s;
}

.proc-history-toggle .fa {
    color: #5b9bd1;
}

.proc-history-toggle:hover {
    background: #eef4fb;
    border-color: #c9d9eb;
    color: #465a71;
}

.proc-history-scroll {
    max-height: 360px;
    overflow-y: auto;
    padding-right: 6px;
}

.proc-history-scroll::-webkit-scrollbar {
    width: 8px;
}

.proc-history-scroll::-webkit-scrollbar-thumb {
    background: #ccd7e4;
    border-radius: 8px;
}

.cfg-pill {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2px;
}

.cfg-pill--active { background: #d1f5e3; color: #157a43; }
.cfg-pill--inactive { background: #ebebeb; color: #888; }
.cfg-pill--neutral { background: #eef1f4; color: #5f6c77; }
.cfg-pill--explicit-inherited { background: #eef1f4; color: #5f6c77; }
.cfg-pill--explicit-allowed { background: #d1f5e3; color: #157a43; }
.cfg-pill--explicit-blocked { background: #fde3e5; color: #b4232c; }

.proc-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 4px;
}

.proc-col-2 { flex: 2 1 100px; min-width: 100px; }
.proc-col-3 { flex: 3 1 140px; min-width: 140px; }
.proc-col-4 { flex: 4 1 160px; min-width: 160px; }
.proc-col-5 { flex: 5 1 190px; min-width: 190px; }
.proc-col-6 { flex: 6 1 220px; min-width: 220px; }
.proc-col-8 { flex: 8 1 260px; min-width: 260px; }
.proc-col-12 { flex: 0 0 100%; }

@media (max-width: 991px) {
    .cfg-sidebar {
        width: 170px;
    }
}

@media (max-width: 767px) {
    .cfg-layout {
        flex-direction: column;
    }

    .cfg-sidebar {
        width: 100%;
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        border-right: none;
        border-bottom: 1px solid #e8eaed;
        -webkit-overflow-scrolling: touch;
    }

    .cfg-sidebar__item {
        flex-direction: row;
        flex-shrink: 0;
        border-bottom: none;
        border-right: 1px solid #eef0f5;
        padding: 11px 16px;
        gap: 7px;
    }

    .cfg-sidebar__item:last-child {
        border-right: none;
    }

    .cfg-sidebar__item--active {
        border-left: none;
        border-bottom: 3px solid #5b9bd1;
        padding-left: 16px;
        padding-bottom: 8px;
    }

    .cfg-content__footer {
        padding: 12px 16px;
    }

    .cfg-card__head {
        flex-direction: column;
        gap: 10px;
    }

    .cfg-card__head--collapsible {
        flex-direction: row;
        align-items: center;
    }
}


/* ================================================================
   Shared proc- styles — moved from solicitudes/index.css
   Used across: solicitudes, ordenes, facturas, helpdesk
   ================================================================ */

[v-cloak] { display: none; }

.proc-view-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.proc-card--full {
    grid-column: 1 / -1;
}

/* ── Breadcrumb ───────────────────────────────────────────────── */
.proc-breadcrumb {
    font-size: 13px;
    color: #888;
    margin-bottom: 15px;
}

/* Consistent spacing after the page-level chevron breadcrumb on view pages.
   projects/index.css overrides this to 0 for its own index page. */
#breadcrumb {
    margin-bottom: 16px;
}

.proc-breadcrumb a {
    color: #5b9bd1;
    text-decoration: none;
}

.proc-breadcrumb a:hover { text-decoration: underline; }

/* ── Filters ─────────────────────────────────────────────────── */
.proc-filters .box { margin-bottom: 15px; }

.proc-filters__row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

/* ── Status pills ────────────────────────────────────────────── */
.proc-status-row {
    background: #fff;
    border-bottom: 1px solid #e8eef4;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 16px 12px;
}
.proc-status-row .proc-status-pills {
    gap: 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.proc-status-row .proc-pill {
    border-radius: 0;
    border: none;
    border-right: 1px solid #e2e8f0;
    padding: 5px 14px;
    font-size: 12.5px;
    color: #64748b;
    gap: 6px;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.proc-status-row .proc-pill:last-child { border-right: none; }
.proc-status-row .proc-pill__count {
    font-size: 10px;
    border-radius: 3px;
    padding: 1px 5px;
    transition: background .12s, color .12s;
}

/* neutral / "Todos" — usar proc-pill--neutral en el HTML */
.proc-status-row .proc-pill--neutral:hover {
    background: #f1f5f9; color: #1e293b;
}
.proc-status-row .proc-pill--neutral.proc-pill--active {
    background: #cbd5e1; color: #1e293b; font-weight: 600;
}
.proc-status-row .proc-pill--neutral.proc-pill--active .proc-pill__count {
    background: rgba(0,0,0,.12); color: #1e293b;
}

/* azul (sent / registradas) */
.proc-status-row .proc-pill--sent:hover { background: #eff6ff; color: #1e40af; }
.proc-status-row .proc-pill--sent.proc-pill--active {
    background: #bfdbfe; color: #1e3a8a; font-weight: 600;
}
.proc-status-row .proc-pill--sent:hover .proc-pill__count,
.proc-status-row .proc-pill--sent.proc-pill--active .proc-pill__count {
    background: rgba(37,99,235,.2); color: #1e3a8a;
}

/* rojo (withdrawn / sin registrar) */
.proc-status-row .proc-pill--withdrawn .proc-pill__count {
    background: #fca5a5; color: #991b1b;
}
.proc-status-row .proc-pill--withdrawn:hover { background: #fef2f2; color: #dc2626; }
.proc-status-row .proc-pill--withdrawn.proc-pill--active {
    background: #fecaca; color: #7f1d1d; font-weight: 600;
}
.proc-status-row .proc-pill--withdrawn:hover .proc-pill__count,
.proc-status-row .proc-pill--withdrawn.proc-pill--active .proc-pill__count {
    background: rgba(220,38,38,.2); color: #7f1d1d;
}

/* verde (complete / compradores) */
.proc-status-row .proc-pill--complete:hover { background: #f0fdf4; color: #166534; }
.proc-status-row .proc-pill--complete.proc-pill--active {
    background: #bbf7d0; color: #14532d; font-weight: 600;
}
.proc-status-row .proc-pill--complete:hover .proc-pill__count,
.proc-status-row .proc-pill--complete.proc-pill--active .proc-pill__count {
    background: rgba(16,185,129,.2); color: #14532d;
}

/* ámbar (partial / proveedores / pendiente) */
.proc-status-row .proc-pill--partial:hover,
.proc-status-row .proc-pill--pending:hover { background: #fffbeb; color: #92400e; }
.proc-status-row .proc-pill--partial.proc-pill--active,
.proc-status-row .proc-pill--pending.proc-pill--active {
    background: #fde68a; color: #78350f; font-weight: 600;
}
.proc-status-row .proc-pill--partial:hover .proc-pill__count,
.proc-status-row .proc-pill--partial.proc-pill--active .proc-pill__count,
.proc-status-row .proc-pill--pending:hover .proc-pill__count,
.proc-status-row .proc-pill--pending.proc-pill--active .proc-pill__count {
    background: rgba(245,158,11,.2); color: #78350f;
}
.proc-status-row .proc-pill--pending .proc-pill__count { background: #fcd34d; color: #78350f; }

/* gris (draft / cancelled) */
.proc-status-row .proc-pill--draft .proc-pill__count,
.proc-status-row .proc-pill--cancelled .proc-pill__count { background: #cbd5e1; color: #475569; }
.proc-status-row .proc-pill--draft:hover,
.proc-status-row .proc-pill--cancelled:hover { background: #f1f5f9; color: #1e293b; }
.proc-status-row .proc-pill--draft.proc-pill--active,
.proc-status-row .proc-pill--cancelled.proc-pill--active {
    background: #cbd5e1; color: #1e293b; font-weight: 600;
}
.proc-status-row .proc-pill--draft:hover .proc-pill__count,
.proc-status-row .proc-pill--draft.proc-pill--active .proc-pill__count,
.proc-status-row .proc-pill--cancelled:hover .proc-pill__count,
.proc-status-row .proc-pill--cancelled.proc-pill--active .proc-pill__count {
    background: rgba(0,0,0,.12); color: #1e293b;
}

/* verde (approved) */
.proc-status-row .proc-pill--approved .proc-pill__count { background: #86efac; color: #14532d; }
.proc-status-row .proc-pill--approved:hover { background: #f0fdf4; color: #166534; }
.proc-status-row .proc-pill--approved.proc-pill--active {
    background: #bbf7d0; color: #14532d; font-weight: 600;
}
.proc-status-row .proc-pill--approved:hover .proc-pill__count,
.proc-status-row .proc-pill--approved.proc-pill--active .proc-pill__count {
    background: rgba(16,185,129,.2); color: #14532d;
}

/* rojo (rejected) */
.proc-status-row .proc-pill--rejected .proc-pill__count { background: #fca5a5; color: #991b1b; }
.proc-status-row .proc-pill--rejected:hover { background: #fef2f2; color: #dc2626; }
.proc-status-row .proc-pill--rejected.proc-pill--active {
    background: #fecaca; color: #7f1d1d; font-weight: 600;
}
.proc-status-row .proc-pill--rejected:hover .proc-pill__count,
.proc-status-row .proc-pill--rejected.proc-pill--active .proc-pill__count {
    background: rgba(220,38,38,.2); color: #7f1d1d;
}

/* púrpura (finalized) */
.proc-status-row .proc-pill--finalized .proc-pill__count { background: #a78bfa; color: #4c1d95; }
.proc-status-row .proc-pill--finalized:hover { background: #ede9fe; color: #4c1d95; }
.proc-status-row .proc-pill--finalized.proc-pill--active {
    background: #ddd6fe; color: #3b0764; font-weight: 600;
}
.proc-status-row .proc-pill--finalized:hover .proc-pill__count,
.proc-status-row .proc-pill--finalized.proc-pill--active .proc-pill__count {
    background: rgba(124,58,237,.2); color: #4c1d95;
}

/* primary (pending / aprobación…) */
.proc-status-row .proc-pill--primary:hover { background: #eff6ff; color: #1e40af; }
.proc-status-row .proc-pill--primary.proc-pill--active {
    background: #bfdbfe; color: #1e3a8a; font-weight: 600;
}
.proc-status-row .proc-pill--primary:hover .proc-pill__count,
.proc-status-row .proc-pill--primary.proc-pill--active .proc-pill__count {
    background: rgba(37,99,235,.2); color: #1e3a8a;
}

/* danger (rejected / rechazada…) */
.proc-status-row .proc-pill--danger:hover { background: #fef2f2; color: #dc2626; }
.proc-status-row .proc-pill--danger.proc-pill--active {
    background: #fecaca; color: #7f1d1d; font-weight: 600;
}
.proc-status-row .proc-pill--danger:hover .proc-pill__count,
.proc-status-row .proc-pill--danger.proc-pill--active .proc-pill__count {
    background: rgba(220,38,38,.2); color: #7f1d1d;
}

/* success (approved / aprobada…) */
.proc-status-row .proc-pill--success:hover { background: #f0fdf4; color: #166534; }
.proc-status-row .proc-pill--success.proc-pill--active {
    background: #bbf7d0; color: #14532d; font-weight: 600;
}
.proc-status-row .proc-pill--success:hover .proc-pill__count,
.proc-status-row .proc-pill--success.proc-pill--active .proc-pill__count {
    background: rgba(16,185,129,.2); color: #14532d;
}

/* warning (draft / borrador…) */
.proc-status-row .proc-pill--warning:hover { background: #fffbeb; color: #92400e; }
.proc-status-row .proc-pill--warning.proc-pill--active {
    background: #fde68a; color: #78350f; font-weight: 600;
}
.proc-status-row .proc-pill--warning:hover .proc-pill__count,
.proc-status-row .proc-pill--warning.proc-pill--active .proc-pill__count {
    background: rgba(245,158,11,.2); color: #78350f;
}

/* ── E2: KPI bar con acento de color arriba por celda ───────────── */
.proc-status-row--e2 {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0;
    justify-content: stretch;
    overflow: hidden;
    gap: 0;
}
.proc-status-row--e2 .proc-status-pills {
    width: 100%;
    gap: 0;
    flex-wrap: wrap;
}
.proc-status-row--e2 .proc-pill {
    flex: 1 1 0;
    min-width: 130px;
    border-radius: 0;
    border: none;
    border-right: 1px solid #f1f5f9;
    border-top: 3px solid #e2e8f0;
    background: transparent;
    padding: 12px 18px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: #475569;
    cursor: pointer;
    transition: background .12s, border-top-color .12s;
    text-align: center;
}
.proc-status-row--e2 .proc-pill:last-child { border-right: none; }
.proc-status-row--e2 .proc-pill:hover      { background: #f8fafc; }
.proc-status-row--e2 .proc-pill__icon {
    font-size: 13px;
    color: #94a3b8;
    margin-bottom: 2px;
}
.proc-status-row--e2 .proc-pill__count {
    background: none;
    color: #1e293b;
    font-size: 17px;
    font-weight: 700;
    border-radius: 0;
    padding: 0;
    line-height: 1;
}
.proc-status-row--e2 .proc-pill__kpi-label {
    font-size: 10px;
    color: #94a3b8;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: .3px;
}
/* color accent por variante */
.proc-status-row--e2 .proc-pill--active            { background: #f9fafb; }
.proc-status-row--e2 .proc-pill--active.proc-pill  { border-top-color: #94a3b8; }
.proc-status-row--e2 .proc-pill--active .proc-pill__count { color: #334155; }
.proc-status-row--e2 .proc-pill--sent              { border-top-color: #3b82f6; }
.proc-status-row--e2 .proc-pill--sent .proc-pill__count   { color: #2563eb; }
.proc-status-row--e2 .proc-pill--sent .proc-pill__icon    { color: #3b82f6; }
.proc-status-row--e2 .proc-pill--withdrawn         { border-top-color: #d07a2a; }
.proc-status-row--e2 .proc-pill--withdrawn .proc-pill__count { color: #92400e; }
.proc-status-row--e2 .proc-pill--withdrawn .proc-pill__icon  { color: #d07a2a; }
.proc-status-row--e2 .proc-pill--complete          { border-top-color: #10b981; }
.proc-status-row--e2 .proc-pill--complete .proc-pill__count  { color: #065f46; }
.proc-status-row--e2 .proc-pill--complete .proc-pill__icon   { color: #10b981; }
.proc-status-row--e2 .proc-pill--partial           { border-top-color: #f59e0b; }
.proc-status-row--e2 .proc-pill--partial .proc-pill__count   { color: #92400e; }
.proc-status-row--e2 .proc-pill--partial .proc-pill__icon    { color: #f59e0b; }
@media (max-width: 600px) { .proc-status-row--e2 .proc-pill { flex: 1 1 40%; border-bottom: 1px solid #f1f5f9; } }
@media (max-width: 380px) { .proc-status-row--e2 .proc-pill { flex: 1 1 100%; border-right: none; } }

/* ── E3: KPI bar compacta — count + label inline, centrada, sin icono ── */
.proc-status-row--e3 {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0;
    justify-content: stretch;
    overflow: hidden;
    gap: 0;
}
.proc-status-row--e3 .proc-status-pills {
    width: 100%;
    gap: 0;
    flex-wrap: wrap;
}
.proc-status-row--e3 .proc-pill {
    flex: 1 1 0;
    min-width: 110px;
    border-radius: 0;
    border: none;
    border-right: 1px solid #f1f5f9;
    background: transparent;
    padding: 10px 16px;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    color: #475569;
    cursor: pointer;
    transition: background .12s;
}
.proc-status-row--e3 .proc-pill:last-child { border-right: none; }
.proc-status-row--e3 .proc-pill:hover      { background: #f8fafc; }
.proc-status-row--e3 .proc-pill--active    { background: #f0f6ff !important; }
.proc-status-row--e3 .proc-pill__count {
    background: none;
    color: #1e293b;
    font-size: 18px;
    font-weight: 800;
    border-radius: 0;
    padding: 0;
    line-height: 1;
}
.proc-status-row--e3 .proc-pill--active .proc-pill__count { color: #2563eb; }
.proc-status-row--e3 .proc-pill__kpi-label {
    font-size: 12px;
    color: #64748b;
    white-space: nowrap;
}
.proc-status-row--e3 .proc-pill--active .proc-pill__kpi-label { color: #3b82f6; }
@media (max-width: 600px) { .proc-status-row--e3 .proc-pill { flex: 1 1 40%; border-bottom: 1px solid #f1f5f9; } }
@media (max-width: 380px) { .proc-status-row--e3 .proc-pill { flex: 1 1 100%; border-right: none; } }

.proc-status-row__label {
    font-size: 10px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .5px;
    flex-shrink: 0;
    margin-right: 4px;
}

/* ── Variante E: KPI bar (cada filtro = celda con icono + número + etiqueta) ── */
.proc-status-row--e {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0;
    justify-content: stretch;
    overflow: hidden;
    gap: 0;
}
.proc-status-row--e .proc-status-pills {
    width: 100%;
    gap: 0;
    flex-wrap: wrap;
}
.proc-status-row--e .proc-pill {
    flex: 1 1 0;
    min-width: 130px;
    border-radius: 0;
    border: none;
    border-right: 1px solid #f1f5f9;
    background: transparent;
    padding: 11px 18px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    color: #475569;
    cursor: pointer;
    transition: background .12s;
}
.proc-status-row--e .proc-pill:last-child { border-right: none; }
.proc-status-row--e .proc-pill:hover      { background: #f8fafc; }
.proc-status-row--e .proc-pill--active    { background: #f0f6ff !important; border-color: transparent !important; }
.proc-status-row--e .proc-pill__icon {
    font-size: 15px;
    color: #94a3b8;
    flex-shrink: 0;
    width: 18px;
    text-align: center;
}
.proc-status-row--e .proc-pill--active .proc-pill__icon { color: #3b82f6; }
.proc-status-row--e .proc-pill__kpi {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
    gap: 2px;
}
.proc-status-row--e .proc-pill__count {
    background: none;
    color: #1e293b;
    font-size: 15px;
    font-weight: 700;
    border-radius: 0;
    padding: 0;
    line-height: 1;
}
.proc-status-row--e .proc-pill--active .proc-pill__count { color: #2563eb; }
.proc-status-row--e .proc-pill__kpi-label {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 400;
    white-space: nowrap;
}
.proc-status-row--e .proc-pill--active .proc-pill__kpi-label { color: #60a5fa; }
/* Responsive: < 600px apila en 2 columnas, < 400px 1 columna */
@media (max-width: 600px) {
    .proc-status-row--e .proc-pill { flex: 1 1 40%; border-bottom: 1px solid #f1f5f9; }
}
@media (max-width: 380px) {
    .proc-status-row--e .proc-pill { flex: 1 1 100%; border-right: none; border-bottom: 1px solid #f1f5f9; }
}

.proc-status-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.proc-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border: 2px solid #ddd;
    background: #f8f8f8;
    color: #666;
    transition: all 0.15s;
    user-select: none;
}

.proc-pill:hover { border-color: #aaa; }

.proc-pill--active             { background: #eee; border-color: #999; color: #333; }
.proc-pill--draft.proc-pill--active   { background: #e8e8e8; border-color: #999;    color: #333; }
.proc-pill--pending.proc-pill--active { background: #fff3cd; border-color: #ffc107; color: #856404; }
.proc-pill--approved.proc-pill--active{ background: #d4edda; border-color: #28a745; color: #155724; }
.proc-pill--rejected.proc-pill--active{ background: #f8d7da; border-color: #dc3545; color: #721c24; }
.proc-pill--withdrawn.proc-pill--active  { background: #fde8d0; border-color: #d07a2a; color: #7a3e00; }

/* Ordenes status pill active colors */
.proc-pill--sent.proc-pill--active       { background: #dbeafe; border-color: #3b82f6; color: #1d4ed8; }
.proc-pill--partial.proc-pill--active    { background: #fef3c7; border-color: #f59e0b; color: #92400e; }
.proc-pill--complete.proc-pill--active   { background: #d1fae5; border-color: #10b981; color: #065f46; }
.proc-pill--cancelled.proc-pill--active  { background: #f3f4f6; border-color: #9ca3af; color: #374151; }
.proc-pill--finalized.proc-pill--active  { background: #ede9fe; border-color: #7c3aed; color: #5b21b6; }

.proc-pill--draft .proc-pill__count      { background: #94a3b8; color: #fff; }
.proc-pill--pending .proc-pill__count    { background: #f39c12; color: #fff; }
.proc-pill--approved .proc-pill__count   { background: #27ae60; color: #fff; }
.proc-pill--rejected .proc-pill__count   { background: #e74c3c; color: #fff; }
.proc-pill--withdrawn .proc-pill__count  { background: #d07a2a; color: #fff; }
.proc-pill--sent .proc-pill__count       { background: #3b82f6; color: #fff; }
.proc-pill--partial .proc-pill__count    { background: #f59e0b; color: #fff; }
.proc-pill--complete .proc-pill__count   { background: #10b981; color: #fff; }
.proc-pill--cancelled .proc-pill__count  { background: #9ca3af; color: #fff; }
.proc-pill--finalized .proc-pill__count  { background: #7c3aed; color: #fff; }

.proc-pill__count {
    background: rgba(0,0,0,0.08);
    border-radius: 10px;
    padding: 0 6px;
    font-size: 11px;
    min-width: 18px;
    text-align: center;
}

/* ── Search ──────────────────────────────────────────────────── */
.proc-search {
    position: relative;
    width: 260px;
}

.proc-search__icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #5b9bd1;
    font-size: 13px;
    pointer-events: none;
    transition: color .15s;
    z-index: 1;
}

.proc-search__input {
    padding-left: 32px !important;
    height: 34px;
    border: 1.5px solid #c8d6e5;
    border-radius: 7px;
    background: #fff;
    color: #2d4a6b;
    transition: border-color .15s, box-shadow .15s;
}

.proc-search__input:focus {
    border-color: #5b9bd1;
    box-shadow: 0 0 0 3px rgba(91, 155, 209, .15);
    outline: none;
}

.proc-search:focus-within .proc-search__icon {
    color: #5b9bd1;
}

/* ════════════════════════════════════════════════════════════════
   GLOBAL TABLE STYLES (bd-*)
   Shared across Workitems, Helpdesk, Solicitudes, Ordenes, Facturas
   ════════════════════════════════════════════════════════════════ */

.bd-table-wrap {
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
}

.bd-table-shell {
    overflow: visible;
}

.bd-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-bottom: 0;
}

.bd-table thead th {
    padding: 10px 14px;
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    color: #6b7280;
    background: #f8fafc;
    border-bottom: 2px solid #e5e7eb;
    white-space: nowrap;
    user-select: none;
}

.bd-th--sortable {
    cursor: pointer;
}

.bd-th--sortable:hover {
    color: #2563eb;
}

.bd-th--title {
    width: 45%;
    min-width: 220px;
}

.bd-row {
    border-bottom: 1px solid #f0f2f6;
    transition: background .1s;
}

.bd-row:last-child {
    border-bottom: none;
}

.bd-row:hover td {
    background: #f8fafc;
}

.bd-row:hover .bd-name {
    color: #5b9bd1;
}

.bd-table tbody td,
.bd-table tfoot td {
    padding: 9px 14px;
    vertical-align: middle;
}

.bd-td--title {
    max-width: 0;
    width: 45%;
}

.bd-td--date {
    white-space: nowrap;
    color: #94a3b8;
    font-size: 12px;
}

.bd-td--actions {
    white-space: nowrap;
    width: 130px;
    min-width: 130px;
    text-align: right;
}

.bd-td--actions .btn {
    margin-right: 4px;
}

.bd-ref {
    font-family: monospace;
    font-size: 13px;
    color: #4a90d9;
    white-space: nowrap;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
}

.bd-ref:hover {
    color: #2563b0;
    text-decoration: underline;
}

.bd-name {
    font-weight: 500;
    color: #111827;
    font-size: 14px;
}

.bd-date {
    font-size: 13px;
    color: #7a8a9e;
    white-space: nowrap;
}

.bd-amount {
    font-weight: 700;
    color: #1e2d3d;
    font-size: 14px;
}

.bd-items-count {
    display: block;
    font-size: 11px;
    color: #b0b8c5;
    margin-top: 2px;
}

.bd-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.bd-empty {
    text-align: center;
    padding: 32px 24px;
    color: #9ca3af;
    font-size: 14px;
}

/* ── Table action column ─────────────────────────────────────── */
.bd-actions-group {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 50px;
    gap: 4px;
    align-items: center;
    width: max-content;
    margin-left: auto;
}

.bd-actions-group__slot {
    display: block;
    width: 34px;
    height: 34px;
}

/* ── Table toolbar & pagination (generic, bd-prefix) ──────────────────── */
.bd-list-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px 14px 10px;
    border-bottom: 1px solid #f0f2f6;
}
.bd-list-count {
    font-size: 13px;
    color: #6b7280;
}
.bd-list-toolbar__right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
.bd-list-per-page {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #6b7280;
}
.bd-list-per-page__select {
    width: 86px;
    min-width: 86px;
}
.bd-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-top: 1px solid #f0f2f6;
    padding: 10px 14px;
}
.bd-pagination__info {
    font-size: 12px;
    color: #6b7280;
}
.bd-pagination__controls {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.bd-pagination__page {
    font-size: 12px;
    color: #6b7280;
    min-width: 120px;
    text-align: center;
}
.bd-page-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #e5e7eb;
    background: #fff;
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 12px;
    color: #374151;
    cursor: pointer;
    transition: background .1s, color .1s;
}
.bd-page-btn:hover { background: #f3f4f6; }
.bd-page-btn:disabled { cursor: default; opacity: .45; background: #f9fafb; }
@media (max-width: 768px) {
    .bd-list-toolbar__right { width: 100%; margin-left: 0; justify-content: space-between; }
    .bd-pagination { flex-direction: column; align-items: stretch; }
    .bd-pagination__controls { justify-content: space-between; }
    .bd-pagination__page { min-width: 0; }
}

.proc-picker { position: relative; min-width: 180px; }
.proc-picker__trigger {
    width: 100%;
    height: 34px;
    min-height: 34px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    background: #fff;
    color: #333;
    text-align: left;
    cursor: pointer;
    box-shadow: none;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.proc-picker__trigger:hover { border-color: #999; }
.proc-picker__trigger:focus { border-color: #999; outline: none; }
.proc-picker__trigger .fa { color: #444; font-size: 12px; margin-left: auto; flex-shrink: 0; }
.proc-picker__dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}
.proc-picker__dot--none { background: #e2e8f0; border: 1.5px solid #b0bec5; }
.proc-picker__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: #333; }
.proc-picker__label--none { color: #777; }
.proc-picker__menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 40;
    padding: 5px;
    border: 1px solid #dbe3ef;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15,23,42,.14);
    max-height: 220px;
    overflow-y: auto;
}
.proc-picker__option {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #0f172a;
    cursor: pointer;
    text-align: left;
    font-size: 14px;
}
.proc-picker__option:hover { background: #f8fafc; }
.proc-picker__option.is-selected { background: #eff6ff; color: #1d4ed8; }
.proc-picker__option .fa-check { color: #2563eb; margin-left: auto; flex-shrink: 0; }
.proc-picker__option-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Status badge color variants (proc modules) ──────────────── */
.proc-badge--0 { background: #ebebeb; color: #555; }
.proc-badge--1 { background: #fff3cd; color: #8a6200; }
.proc-badge--2 { background: #d4edda; color: #155724; }
.proc-badge--3 { background: #f8d7da; color: #721c24; }
.proc-badge--4 { background: #fde8d0; color: #7a3e00; }



/* ── Status labels ───────────────────────────────────────────── */
.proc-status-label {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 3px;
}

.proc-status-label--lg {
    font-size: 13px;
    padding: 5px 12px;
}

.proc-subtitle-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.6;
}

.proc-subtitle-badge--sol-0,
.proc-subtitle-badge--ord-0,
.proc-subtitle-badge--fact-0 {
    background: #f1f5f9;
    color: #64748b;
}

.proc-subtitle-badge--sol-1,
.proc-subtitle-badge--ord-1 {
    background: #dbeafe;
    color: #1d4ed8;
}

.proc-subtitle-badge--ord-2,
.proc-subtitle-badge--fact-1,
.proc-subtitle-badge--fact-2 {
    background: #fef3c7;
    color: #b45309;
}

.proc-subtitle-badge--sol-2,
.proc-subtitle-badge--ord-3,
.proc-subtitle-badge--fact-3 {
    background: #dcfce7;
    color: #15803d;
}

.proc-subtitle-badge--sol-3,
.proc-subtitle-badge--ord-4,
.proc-subtitle-badge--fact-5 {
    background: #fee2e2;
    color: #b91c1c;
}

.proc-subtitle-badge--sol-4 {
    background: #ffedd5;
    color: #c2410c;
}

.proc-subtitle-badge--ord-5,
.proc-subtitle-badge--fact-4 {
    background: #ede9fe;
    color: #6d28d9;
}

.proc-subtitle-badge--ord-6 {
    background: #e2e8f0;
    color: #334155;
}

/* ── Loading / Empty ─────────────────────────────────────────── */
.proc-loading {
    text-align: center;
    padding: 40px;
    color: #aaa;
}

/* -- Pending actions panel ------------------------------------------------- */
.proc-action-panel {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    overflow: hidden;
    margin-bottom: 20px;
}

.proc-action-panel__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    border-bottom: 1px solid #eef2f7;
    font-size: 14px;
    font-weight: 700;
    color: #334155;
}

.proc-action-panel__head i {
    color: #5b9bd1;
}

.proc-action-panel__body {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.proc-action-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    line-height: 1.45;
}

.proc-action-item__content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.proc-action-item__content strong {
    font-size: 13px;
    font-weight: 700;
}

.proc-action-item__reason {
    margin-top: 8px;
    padding: 9px 11px;
    border-radius: 8px;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(148,163,184,0.28);
}

.proc-action-item__reason-label {
    display: block;
    margin-bottom: 3px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .82;
}

.proc-action-item i {
    flex-shrink: 0;
    font-size: 15px;
    margin-top: 1px;
}

.proc-action-item--status {
    padding: 12px 14px;
    border-left-width: 4px;
}

.proc-action-item--warning {
    background: #fffbeb;
    color: #92400e;
    border-left: 3px solid #f59e0b;
}

.proc-action-item--warning i {
    color: #f59e0b;
}

.proc-action-item--warning .proc-action-item__reason {
    background: #fff7dd;
    border-color: #f6d48c;
}

.proc-action-item--info {
    background: #eff6ff;
    color: #1e40af;
    border-left: 3px solid #3b82f6;
}

.proc-action-item--info i {
    color: #3b82f6;
}

.proc-action-item--success {
    background: #ecfdf5;
    color: #166534;
    border-left: 3px solid #22c55e;
}

.proc-action-item--success i {
    color: #22c55e;
}

.proc-action-item--success .proc-action-item__reason {
    background: #f3fff8;
    border-color: #98e2b1;
}

.proc-action-item--danger {
    background: #fef2f2;
    color: #b91c1c;
    border-left: 3px solid #ef4444;
}

.proc-action-item--danger i {
    color: #ef4444;
}

.proc-action-item--danger .proc-action-item__reason {
    background: #fff1f1;
    border-color: #f4b3b3;
}

.proc-action-item--muted {
    background: #f8fafc;
    color: #374151;
    border-left: 3px solid #94a3b8;
}

.proc-action-item--muted i {
    color: #94a3b8;
}


/* ── Items table ─────────────────────────────────────────────── */
.proc-items-table thead th {
    background: aliceblue;
    border-bottom: 1px solid #d0e4f7;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #7a9ab8;
}

.proc-item-row:hover { background: #f9fbff; }

.proc-item-name {
    font-weight: 500;
    color: #333;
}

.proc-item-desc {
    font-size: 11px;
    margin-top: 2px;
    color: #94a3b8;
}

.proc-items-total-row td {
    padding: 10px 14px;
    border-top: 2px solid #e5e7eb;
    color: #374151;
    font-size: 13px;
    background: #f8fafc;
}

.proc-total {
    font-size: 15px;
    color: #1e293b;
}

/* ── Documents ───────────────────────────────────────────────── */
.proc-documents {
    margin-bottom: 12px;
}

.proc-doc-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f5f6fa;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 4px 10px;
    margin: 0 6px 6px 0;
    font-size: 13px;
}

.proc-doc-item .fa { color: #5b9bd1; }
.proc-doc-item a { color: #333; text-decoration: none; }
.proc-doc-item a:hover { text-decoration: underline; }

/* ── Document rows (form) ────────────────────────────────── */
.proc-doc-list {
    margin-bottom: 0;
}

.proc-doc-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid #e8ecf0;
    border-radius: 6px;
    background: #f8f9fb;
    margin-bottom: 6px;
    transition: background 0.1s;
}

.proc-doc-row:last-child {
    margin-bottom: 0;
}

.proc-doc-row:hover { background: #f0f4f8; }

.proc-doc-row__icon {
    font-size: 16px;
    color: #5b9bd1;
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}

.proc-doc-row__name {
    flex: 1;
    color: #333;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.proc-doc-row__name:hover { text-decoration: underline; }

.proc-doc-row__size {
    font-size: 11px;
    color: #aaa;
    flex-shrink: 0;
    white-space: nowrap;
}

.proc-doc-row__del {
    flex-shrink: 0;
}

.proc-doc-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.proc-doc-card__head h4 {
    margin: 0;
}

.proc-doc-card__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.proc-doc-card__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.proc-doc-empty {
    padding: 16px 0;
}

/* ── Drop zone ───────────────────────────────────────────── */
.proc-dropzone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px 20px;
    border: 2px dashed #d0d7e2;
    border-radius: 8px;
    background: #fafbfc;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.proc-dropzone:hover,
.proc-dropzone--over {
    border-color: #5b9bd1;
    background: #f0f7ff;
}

.proc-dropzone--uploading {
    pointer-events: none;
    opacity: 0.7;
}

.proc-dropzone__icon {
    font-size: 22px;
    color: #bbb;
    flex-shrink: 0;
    transition: color 0.15s;
}

.proc-dropzone:hover .proc-dropzone__icon,
.proc-dropzone--over .proc-dropzone__icon {
    color: #5b9bd1;
}

.proc-dropzone__label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    flex-wrap: nowrap;
}

.proc-dropzone__text {
    font-size: 13px;
    font-weight: 600;
    color: #5b9bd1;
}

.proc-dropzone__btn {
    background: none;
    border: none;
    color: #5b9bd1;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    padding: 0;
}

.proc-dropzone__btn:hover { text-decoration: underline; }
.proc-dropzone__btn:disabled { color: #aaa; cursor: not-allowed; }

.proc-dropzone__hint {
    font-size: 12px;
    color: #aaa;
}

/* ── Proveedor combobox ──────────────────────────────────────── */
.proc-combobox {
    position: relative;
}

.proc-combobox__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    background: #fff;
    border: 1px solid #d0d7e2;
    border-top: none;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.13);
    list-style: none;
    margin: 0;
    padding: 4px 0;
    max-height: 240px;
    overflow-y: auto;
}

.proc-combobox__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    cursor: pointer;
    font-size: 13px;
    color: #333;
    transition: background 0.1s;
}

.proc-combobox__item:hover {
    background: #eef4ff;
    color: #1d4ed8;
}

.proc-combobox__item:hover .proc-combobox__icon {
    color: #1d4ed8;
}

.proc-combobox__avatar {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid #e0e0e0;
    background: #f5f5f5;
}

.proc-combobox__icon {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f0f2f5;
    border-radius: 50%;
    color: #aaa;
    font-size: 13px;
}

.proc-combobox__name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.proc-combobox__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 14px;
    color: #9ca3af;
    font-size: 13px;
    gap: 6px;
    list-style: none;
}

/* ── Supplier avatar (table + combobox) ──────────────────────── */
.proc-supplier-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

.proc-supplier-avatar {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 50%;
}

.proc-supplier-icon {
    color: #aaa;
    width: 22px;
    text-align: center;
}

/* ── Items table action column ───────────────────────────────── */
.proc-items-table td.proc-item-actions {
    white-space: nowrap;
    vertical-align: middle;
}

.proc-items-table .btn-group {
    display: inline-flex;
    vertical-align: middle;
}

.bd-td--actions .btn-group {
    display: inline-flex;
    vertical-align: middle;
}

/* Estilos de modales de confirmación movidos a confirm-modals.css (global) */

/* ── Save indicator ──────────────────────────────────────────── */
.proc-saving-indicator {
    font-size: 12px;
    color: #888;
    margin-top: 6px;
    transition: opacity 0.3s;
}

.proc-saving-indicator--ok { color: #28a745; }

/* ── Action buttons bar ──────────────────────────────────────── */
.proc-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}


/* ── Chat (solicitudes) — shares ord-chat-* class names ─────── */

/* Chat toggle button */
.ord-chat-btn { position: relative !important; }
.ord-chat-btn__badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 50%;
    min-width: 17px;
    height: 17px;
    line-height: 17px;
    text-align: center;
    padding: 0 3px;
    pointer-events: none;
}

/* Row alert dot (lupa / chat button) */
.ord-btn-with-dot {
    position: relative !important;
    overflow: visible !important;
}
.ord-row-dot {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 10px;
    height: 10px;
    background: #ef4444;
    border-radius: 50%;
    border: 2px solid #fff;
    pointer-events: none;
    display: block;
    z-index: 1;
}

/* Chat panel */
.ord-chat-panel {
    position: fixed;
    top: 50px;
    right: -390px;
    bottom: 80px;
    width: 370px;
    background: #fff;
    border-left: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    border-bottom-left-radius: 8px;
    box-shadow: -4px 0 24px rgba(0,0,0,.1);
    display: flex;
    flex-direction: column;
    z-index: 1050;
    transition: right .3s cubic-bezier(.4,0,.2,1);
}
.ord-chat-panel--open { right: 0; }

.ord-chat-panel__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}
.ord-chat-panel__head-main {
    min-width: 0;
    flex: 1;
}
.ord-chat-panel__title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ord-chat-panel__title i { color: #5b9bd1; }
.ord-chat-panel__context {
    margin-top: 4px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ord-chat-panel__ref {
    font-weight: 600;
    color: #1e293b;
}
.ord-chat-panel__sep {
    margin: 0 4px;
}
.ord-chat-panel__name {
    color: #64748b;
}
.ord-chat-panel__count {
    background: #5b9bd1;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 10px;
    padding: 1px 7px;
}
.ord-chat-panel__close .btn { padding: 4px 8px; }

.ord-chat-panel__messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scroll-behavior: smooth;
}
.ord-chat-panel__empty {
    color: #9ca3af;
    font-size: 13px;
    text-align: center;
    margin: auto;
    padding: 24px 0;
}

/* Bubbles */
.ord-chat__bubble-wrap {
    display: flex;
    flex-direction: column;
    max-width: 80%;
}
.ord-chat__bubble-wrap--mine  { align-self: flex-end; align-items: flex-end; }
.ord-chat__bubble-wrap--other { align-self: flex-start; align-items: flex-start; }
.ord-chat__bubble {
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.5;
    word-break: break-word;
    white-space: pre-wrap;
}
.ord-chat__bubble-wrap--mine  .ord-chat__bubble { background: #dbeafe; color: #1e3a5f; border-bottom-right-radius: 3px; }
.ord-chat__bubble-wrap--other .ord-chat__bubble { background: #f3f4f6; color: #111827; border-bottom-left-radius: 3px; }
.ord-chat__meta { font-size: 11px; color: #9ca3af; margin-top: 3px; padding: 0 2px; }

/* Compose area */
.ord-chat-panel__compose {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid #e2e8f0;
    align-items: flex-end;
    flex-shrink: 0;
}
.ord-chat-panel__compose textarea {
    flex: 1;
    min-height: 38px;
    max-height: 100px;
    resize: none;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 13px;
    border: 1px solid #d1d5db;
}
.ord-chat-panel__compose textarea:focus { outline: none; border-color: #5b9bd1; box-shadow: 0 0 0 2px rgba(91,155,209,.15); }

/* Backdrop (mobile only) */
.ord-chat-backdrop { display: none; }

@media (max-width: 767px) {
    .ord-chat-panel {
        top: auto;
        right: 0;
        bottom: -75vh;
        width: 100%;
        height: 75vh;
        border-left: none;
        border-top: 2px solid #e2e8f0;
        border-radius: 16px 16px 0 0;
        transition: bottom .3s cubic-bezier(.4,0,.2,1);
    }
    .ord-chat-panel--open { bottom: 0; right: 0; }
    .ord-chat-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.3);
        z-index: 1049;
    }
}


/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 767px) {
.proc-filters__row { flex-direction: column; align-items: flex-start; }
    .proc-search { width: 100%; }
    .proc-status-pills { gap: 4px; }
    .proc-view-grid { grid-template-columns: 1fr; }
    .proc-card--full { grid-column: 1; }
    .proc-view-header { flex-direction: column; }
    .proc-actions { flex-direction: column; }
    .proc-actions .btn { width: 100%; }
}


/* ── Timeline (shared activity log) ──────────────────────────── */
.proc-timeline {
    position: relative;
    padding: 4px 0;
}
.proc-timeline::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #e8eaed;
}
.proc-timeline__entry {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 8px 0;
    position: relative;
    font-size: 13px;
}
.proc-timeline__icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #fff;
    background: #adb5bd;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 0 3px #fff;
}
.proc-timeline__icon--creada              { background: #5b9bd1; }
.proc-timeline__icon--modificada          { background: #e6a817; }
.proc-timeline__icon--enviada_aprobacion  { background: #5b9bd1; }
.proc-timeline__icon--aprobada            { background: #27ae60; }
.proc-timeline__icon--rechazada           { background: #e74c3c; }
.proc-timeline__icon--retirada            { background: #95a5a6; }
.proc-timeline__icon--nivel_aprobado      { background: #27ae60; }
.proc-timeline__icon--orden_creada        { background: #5b9bd1; }
.proc-timeline__icon--email_enviado       { background: #27ae60; }
.proc-timeline__icon--recepcion_registrada{ background: #8e44ad; }
.proc-timeline__icon--completada          { background: #155724; }
.proc-timeline__icon--finalizada          { background: #475569; }
.proc-timeline__icon--cancelada           { background: #e74c3c; }
.proc-timeline__icon--orden_completada    { background: #155724; }
.proc-timeline__icon--pending             { background: #f0ad4e; }
.proc-timeline__icon--queued              { background: #dee2e6; color: #6c757d; }
/* Generic semantic variants (used by projects module) */
.proc-timeline__icon--add                 { background: #3b82f6; }
.proc-timeline__icon--update              { background: #e6a817; }
.proc-timeline__icon--delete              { background: #e74c3c; }
.proc-timeline__icon--success             { background: #16a34a; }
.proc-timeline__icon--danger              { background: #dc2626; }
.proc-timeline__body {
    flex: 1;
    padding-top: 7px;
    color: #555;
    line-height: 1.45;
}
.proc-timeline__actor {
    font-weight: 600;
    color: #2c3e50;
    margin-right: 4px;
}
.proc-timeline__detail {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    color: #999;
    font-style: italic;
}
.proc-timeline__meta {
    flex-shrink: 0;
    text-align: right;
    padding-top: 7px;
    font-size: 11px;
    color: #888;
    white-space: nowrap;
    min-width: 90px;
}
.proc-timeline__fromnow {
    color: #bbb;
    margin-top: 2px;
}


.proc-nif-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.proc-nif-wrap .form-control {
    padding-right: 32px;
}
.proc-nif-icon {
    position: absolute;
    right: 10px;
    font-size: 15px;
    pointer-events: none;
}
.proc-nif-icon--ok   { color: #27ae60; }
.proc-nif-icon--warn { color: #f39c12; cursor: help; }

/* Approval inbox hierarchy */

/* ── cfg-general layout (shared: solicitudes/config + workitems/administrator) ── */
.cfg-general                     { padding: 22px; }
.cfg-general__row                { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
.cfg-general__field              { flex: 1; min-width: 160px; }
.cfg-general__field--wide        { flex: 2; min-width: 260px; }
.cfg-general__field--check       { flex: 0 0 auto; min-width: 180px; }
.cfg-general__field label        { display: block; font-size: 13px; font-weight: 600; color: #4a5568; margin-bottom: 6px; }
.cfg-general__field small        { display: block; margin-top: 4px; font-size: 11px; color: #9aaab8; }
.cfg-general__textarea           { resize: vertical; min-height: 72px; font-size: 13px; }
.cfg-general__row--pdf           { margin-bottom: 12px; }
.cfg-general__footer             { padding-top: 8px; border-top: 1px solid #edf0f3; text-align: right; }

/* ── cfg-toggle switch (shared) ── */
.cfg-toggle                      { display: flex; align-items: center; margin-top: 4px; }
.cfg-toggle input[type="checkbox"] { display: none; }
.cfg-toggle label                { position: relative; width: 44px; height: 24px; background: #d1d5db; border-radius: 12px; cursor: pointer; transition: background .2s; margin: 0; }
.cfg-toggle label::after         { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.cfg-toggle input:checked + label                { background: #5b9bd1; }
.cfg-toggle input:checked + label::after         { transform: translateX(20px); }

/* ── Shared KPI row (wi-kpi-*) — used across modules ── */
.wi-kpi-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.wi-kpi-card { flex: 1 1 120px; background: #fff; border: 1px solid #e5e7eb; border-top: 3px solid #e5e7eb; border-radius: 10px; padding: 16px 14px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.05); transition: border-top-color .2s; }
.wi-kpi-card--success { border-top-color: #22c55e; }
.wi-kpi-card--danger  { border-top-color: #ef4444; }
.wi-kpi-card--warning { border-top-color: #f59e0b; }
.wi-kpi-card--info    { border-top-color: #3b82f6; }
.wi-kpi-card__value   { font-size: 34px; font-weight: 700; line-height: 1; color: #111827; }
.wi-kpi-card__label   { font-size: 11px; color: #6b7280; margin-top: 6px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.wi-kpi-card__meta    { font-size: 11px; color: #9ca3af; margin-top: 3px; }

/* ── proc-page-layout (2-column flex, main + chat sidebar) ── */
.proc-page-layout     { display: flex; gap: 16px; align-items: flex-start; }
.proc-page-main       { flex: 1 1 0; min-width: 0; }
.proc-page-chat       { width: 300px; flex-shrink: 0; position: sticky; top: 16px; }
@media (max-width: 900px) {
    .proc-page-layout { flex-direction: column; }
    .proc-page-main   { width: 100%; }
    .proc-page-chat   { width: 100%; position: static; }
}

/* ── proy-member-row (sidebar member list) ── */
.proy-member-row { display: flex; align-items: center; justify-content: space-between; padding: 5px 8px; border-radius: 6px; font-size: 13px; color: #374151; }
.proy-member-row:hover { background: #f9fafb; }
.proy-member-row__name { flex: 1; font-weight: 500; }

/* ── proy-chat (project messages panel) ── */
.proy-chat__messages { height: 320px; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.proy-chat__empty    { flex: 1; display: flex; align-items: center; justify-content: center; color: #9ca3af; font-size: 12px; padding: 20px; text-align: center; }
.proy-chat__wrap          { display: flex; flex-direction: column; }
.proy-chat__wrap--mine    { align-items: flex-end; }
.proy-chat__wrap--other   { align-items: flex-start; }
.proy-chat__bubble        { max-width: 88%; padding: 7px 11px; border-radius: 14px; font-size: 13px; line-height: 1.45; word-break: break-word; }
.proy-chat__wrap--mine  .proy-chat__bubble { background: #3b82f6; color: #fff; border-bottom-right-radius: 4px; }
.proy-chat__wrap--other .proy-chat__bubble { background: #f3f4f6; color: #111827; border-bottom-left-radius: 4px; }
.proy-chat__meta { font-size: 10px; color: #9ca3af; margin-top: 3px; padding: 0 2px; }
.proy-chat__input { display: flex; gap: 8px; padding: 8px 10px; border-top: 1px solid #f3f4f6; align-items: flex-end; }
.proy-chat__input textarea { flex: 1; resize: none; border: 1px solid #e5e7eb; border-radius: 8px; padding: 7px 10px; font-size: 13px; font-family: inherit; line-height: 1.4; min-height: 36px; max-height: 100px; outline: none; overflow-y: auto; }
.proy-chat__input textarea:focus { border-color: #3b82f6; }

/* ── Inline filter label + icon button (global) ── */
.proc-filter-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.proc-filter-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 8px;
    background: #fef3c7;
    color: #b45309;
    cursor: pointer;
    transition: background-color .15s ease, transform .15s ease;
}
.proc-filter-icon-btn:hover { background: #fde68a; transform: translateY(-1px); }
.proc-filter-inline-control { display: flex; align-items: stretch; gap: 8px; }
.proc-filter-inline-control .proc-tree-dropdown { flex: 1 1 auto; }
.proc-filter-icon-btn--inline { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 4px; transform: none; }
.proc-filter-icon-btn--inline:hover { transform: none; }
.proc-filter-field--category .proc-filter-label .proc-filter-icon-btn:not(.proc-filter-icon-btn--inline) { display: none; }


/* ── Status Stepper (proc-stepper) ────────────────────────────────────────
   Chevron breadcrumb-style status bar. Reusable across any module.

   HTML pattern:
     <div class="proc-stepper">
       (v-for each step)
       <div class="proc-stepper__step proc-stepper__step--{done|current|future}"
            style="--step-color: #hexcolor">
         <div class="proc-stepper__dot">
           <i class="fa-solid fa-circle-check">    ← done
           <i class="fa-regular fa-circle-dot">    ← current
         </div>
         <div class="proc-stepper__label">Label</div>
       </div>
       (no proc-stepper__line needed — lines not used in this style)
     </div>

   Rules:
   · Set --step-color on EVERY step (each state has its own color)
   · Lines between steps are hidden automatically
   · Steps 1-6 supported via nth-child z-index stacking
   ────────────────────────────────────────────────────────────────────── */
.proc-stepper {
    display: flex;
    align-items: stretch;
    width: 100%;
    margin: 0 0 18px;
    gap: 4px;
    overflow: visible;
}

/* Hide connector lines — not used in chevron style */
.proc-stepper__line { display: none; }

/* Base step — middle shape (left indent + right arrow) */
.proc-stepper__step {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 24px 11px 30px;
    background: #e8edf2;
    color: #64748b;
    clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%);
    margin-right: -15px;
    position: relative;
    cursor: default;
    transition: background .18s, filter .18s;
}
.proc-stepper__step:first-child {
    clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
    padding-left: 18px;
    border-radius: 8px 0 0 8px;
}
.proc-stepper__step:last-child {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 15px 50%);
    margin-right: 0;
    border-radius: 0 8px 8px 0;
}
/* Increasing z-index left→right: each step's clipped indent reveals
   the arrow of the step behind it                                     */
.proc-stepper__step:nth-child(1)  { z-index: 1; }
.proc-stepper__step:nth-child(2)  { z-index: 2; }
.proc-stepper__step:nth-child(3)  { z-index: 3; }
.proc-stepper__step:nth-child(4)  { z-index: 4; }
.proc-stepper__step:nth-child(5)  { z-index: 5; }
.proc-stepper__step:nth-child(6)  { z-index: 6; }
.proc-stepper__step:nth-child(7)  { z-index: 7; }
.proc-stepper__step:nth-child(8)  { z-index: 8; }

/* Icon dot */
.proc-stepper__dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 17px;
    flex-shrink: 0;
    color: #cbd5e1;
}

/* Label */
.proc-stepper__label {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    color: #94a3b8;
}

/* ── States ── */

/* Done: always green, show only big checkmark */
.proc-stepper__step--done {
    background: #16a34a;
    cursor: default;
}
.proc-stepper__step--done .proc-stepper__dot { color: #fff; font-size: 22px; }
.proc-stepper__step--done .proc-stepper__label { display: none; color: #fff; }

/* Done hover: swap icon for label */
.proc-stepper__step--done:hover .proc-stepper__dot   { display: none; }
.proc-stepper__step--done:hover .proc-stepper__label { display: block; font-weight: 700; }

/* Current: app blue (or semantic color for terminal states), label only */
.proc-stepper__step--current {
    background: var(--step-color);
}
.proc-stepper__step--current .proc-stepper__dot   { display: none; }
.proc-stepper__step--current .proc-stepper__label { color: #fff; font-weight: 700; }

/* Future: grey background is already set, label only */
.proc-stepper__step--future .proc-stepper__dot   { display: none; }
.proc-stepper__step--future .proc-stepper__label { color: #94a3b8; }

/* ── Clickable steps (Completado / Cancelado) ── */
.proc-stepper__step--clickable { cursor: pointer; }
.proc-stepper__step--clickable:hover { filter: brightness(1.12); }

/* Responsive */
@media (max-width: 600px) {
    .proc-stepper__step { padding: 9px 18px 9px 22px; gap: 5px; }
    .proc-stepper__step:first-child { padding-left: 12px; }
    .proc-stepper__label { font-size: 10px; }
    .proc-stepper__dot { font-size: 14px; width: 14px; height: 14px; }
}