/* PqrsKanban - modulo PQRS (R-02): CSS movido desde el <style> inline del componente
   a un modulo global (patron de tareas.css). Enlazado en App.razor. Sin cambios de reglas. */
    .pk-page { padding: 22px 28px; font-family: var(--propia-font-base, 'Lexend', sans-serif); }
    .pk-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 16px; flex-wrap: wrap; }
    .pk-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
    @media (max-width: 640px) {
        .pk-head-actions { justify-content: flex-start; width: 100%; }
        .pk-seg { width: 100%; }
        .pk-seg-btn { flex: 1 1 0; justify-content: center; }
    }
    .pk-title { font-size: 27px; font-weight: 800; letter-spacing: -0.6px; color: var(--propia-text-h1); margin: 0; }
    .pk-sub { font-size: 14px; color: var(--propia-text-muted); margin: 4px 0 0; }
    .pk-cta-brand { display: inline-flex; align-items: center; gap: 8px; padding: 11px 17px; border-radius: 10px; background: var(--propia-brand, var(--propia-brand)); color: var(--propia-text-inverse); font-size: 13.5px; font-weight: 700; border: 0; cursor: pointer; box-shadow: 0 6px 16px rgba(109,79,227,.32); }
    .pk-cta-brand:hover { background: var(--propia-brand-hover, var(--propia-brand-hover)); }
    .pk-empty { background: var(--propia-bg-app); border: 1px dashed var(--propia-border-input); border-radius: 12px; padding: 30px; text-align: center; color: var(--propia-text-faint); }

    .pk-tabs { display: flex; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid var(--propia-border-divider); }
    .pk-tab { border: 0; background: transparent; padding: 8px 16px; font-size: 13px; font-weight: 700; color: var(--propia-text-muted); cursor: pointer; border-bottom: 2px solid transparent; font-family: inherit; }
    .pk-tab--on { color: var(--propia-brand, var(--propia-brand)); border-bottom-color: var(--propia-brand, var(--propia-brand)); }

    .pk-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; margin-bottom: 10px; }
    /* Tarjeta KPI estandar del sistema: icono cuadrado con fondo pastel + numero oscuro (como Contratos). */
    .pk-kpi { display: flex; align-items: center; gap: 9px; background: var(--propia-bg-card); border: 1px solid var(--propia-border-card); border-radius: 11px; padding: 7px 11px; }
    .pk-kpi-ic { width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
    .pk-kpi-ic--brand { background: var(--propia-brand-soft); color: var(--propia-brand); }
    .pk-kpi-ic--mute { background: #F0F3F8; color: var(--propia-text-secondary); }
    .pk-kpi-ic--ok { background: var(--propia-ok-soft); color: #0F8A4F; }
    .pk-kpi-ic--warn { background: #FEF3C7; color: #B45309; }
    .pk-kpi-ic--err { background: #FEE2E2; color: #B91C1C; }
    .pk-kpi-val { font-size: 17px; font-weight: 800; color: var(--propia-text-h1); letter-spacing: -0.3px; line-height: 1.1; }
    .pk-kpi-lbl { font-size: 10.5px; color: var(--propia-text-muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .pk-kpi--warn .pk-kpi-val { color: #B45309; }
    .pk-kpi--err .pk-kpi-val { color: #DC2626; }
    .pk-kpi--alert .pk-kpi-val { color: #DC2626; }

    .pk-toolbar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 14px; }
    .pk-filters-spacer { flex: 1 1 auto; min-width: 8px; }
    .pk-seg { display: inline-flex; background: var(--propia-bg-hover); border-radius: 9px; padding: 3px; }
    .pk-seg-btn { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; padding: 7px 12px; border-radius: 7px; font-size: 12.5px; font-weight: 700; color: var(--propia-text-muted); cursor: pointer; font-family: inherit; }
    .pk-seg-btn--on { background: var(--propia-bg-card); color: var(--propia-brand, var(--propia-brand)); box-shadow: 0 1px 3px rgba(45,62,80,.1); }

    .pk-input { border: 1px solid var(--propia-border-card); border-radius: 9px; padding: 9px 11px; font-size: 13px; color: var(--propia-text-body); background: var(--propia-bg-card); outline: none; font-family: inherit; min-width: 231px; }
    .pk-input--sm { min-width: 150px; }
    .pk-input:focus { border-color: var(--propia-brand, var(--propia-brand)); }
    .pk-input-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border-radius: 9px; border: 1px solid var(--propia-border-card); background: var(--propia-bg-card); font-size: 12.5px; font-weight: 600; color: var(--propia-text-secondary); cursor: pointer; font-family: inherit; }
    .pk-input-btn:hover { border-color: var(--propia-brand, var(--propia-brand)); color: var(--propia-brand, var(--propia-brand)); }

    .pk-menu-wrap { position: relative; }
    .pk-pop { position: absolute; top: calc(100% + 5px); left: 0; z-index: 60; background: var(--propia-bg-card); border: 1px solid var(--propia-border-card); border-radius: 11px; box-shadow: 0 12px 32px rgba(45,62,80,.16); padding: 6px; min-width: 190px; }
    .pk-pop--wide { min-width: 230px; max-height: 340px; overflow-y: auto; }
    .pk-pop-item { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 8px 11px; border-radius: 7px; font-size: 12.5px; color: var(--propia-text-body); cursor: pointer; font-family: inherit; }
    .pk-pop-item:hover { background: var(--propia-bg-hover); }
    .pk-pop-item--on { color: var(--propia-brand, var(--propia-brand)); font-weight: 700; background: var(--propia-brand-soft, var(--propia-brand-soft)); }
    .pk-pop-h { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--propia-text-faint); padding: 8px 10px 4px; }
    .pk-pop-chk { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 12.5px; color: var(--propia-text-body); cursor: pointer; }
    .pk-pop-chk:hover { background: var(--propia-bg-hover); border-radius: 6px; }
    .pk-pop-chk--sep { border-top: 1px solid var(--propia-border-divider); margin-top: 4px; padding-top: 9px; }
    .pk-pop-row { display: flex; align-items: center; gap: 4px; }
    .pk-pop-row .pk-pop-chk { flex: 1; }
    .pk-pop-ord { display: flex; flex-direction: column; padding-left: 4px; }
    .pk-pop-mv { border: 0; background: transparent; color: var(--propia-text-faint); cursor: pointer; font-size: 9px; line-height: 1; padding: 1px; }
    .pk-pop-mv:disabled { opacity: .3; cursor: default; }
    .pk-pop-acts { display: flex; gap: 6px; border-top: 1px solid var(--propia-border-divider); margin-top: 6px; padding: 8px 6px 4px; }
    .pk-pop-act { flex: 1; border: 1px solid var(--propia-border-card); background: var(--propia-bg-card); border-radius: 7px; padding: 6px 8px; font-size: 11.5px; font-weight: 700; color: var(--propia-text-secondary); cursor: pointer; font-family: inherit; }
    .pk-pop-act:hover { border-color: var(--propia-brand, var(--propia-brand)); color: var(--propia-brand, var(--propia-brand)); }

    /* ===== Constructor de filtros (boton compacto + panel de reglas) ===== */
    .pk-input-btn--on { border-color: var(--propia-brand, var(--propia-brand)); background: var(--propia-brand-soft, var(--propia-brand-soft)); color: var(--propia-brand, var(--propia-brand)); }
    .pk-filter-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 5px; margin-left: 2px; border-radius: 9px; background: var(--propia-brand, var(--propia-brand)); color: var(--propia-text-inverse); font-size: 10.5px; font-weight: 800; }
    .pk-filterpop-bd { position: fixed; inset: 0; z-index: 58; }
    .pk-filterpop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; width: min(680px, 92vw); background: var(--propia-bg-card); border: 1px solid var(--propia-border-card); border-radius: 12px; box-shadow: 0 16px 40px rgba(27,42,58,.2); padding: 12px; }
    .pk-filterpop-empty { font-size: 12.5px; color: var(--propia-text-muted); text-align: center; padding: 14px 8px 16px; line-height: 1.5; }
    .pk-frule { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
    .pk-frule-lead { flex: 0 0 58px; font-size: 12px; font-weight: 700; color: var(--propia-text-muted); text-align: right; }
    select.pk-frule-lead.pk-frule-logic { flex: 0 0 58px; text-align: left; border: 1px solid var(--propia-border-card); border-radius: 8px; padding: 5px 6px; background: var(--propia-bg-table-head); color: var(--propia-brand, var(--propia-brand)); font-weight: 800; cursor: pointer; outline: none; }
    .pk-frule-f, .pk-frule-op, .pk-frule-v { font-size: 12.5px; font-weight: 600; color: var(--propia-text-body); border: 1px solid var(--propia-border-card); border-radius: 8px; padding: 6px 8px; background: var(--propia-bg-card); outline: none; min-width: 0; font-family: inherit; }
    .pk-frule-f { flex: 0 0 150px; }
    .pk-frule-op { flex: 0 0 130px; color: var(--propia-text-secondary); }
    .pk-frule-v { flex: 1 1 auto; min-width: 90px; }
    .pk-frule-f:focus, .pk-frule-op:focus, .pk-frule-v:focus, select.pk-frule-logic:focus { border-color: var(--propia-brand, var(--propia-brand)); }
    .pk-frule-del { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--propia-border-card); background: var(--propia-bg-card); color: var(--propia-text-muted); cursor: pointer; font-size: 17px; line-height: 1; }
    .pk-frule-del:hover { background: var(--propia-danger-soft); color: #D7263D; border-color: #F2CFC9; }
    .pk-filterpop-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--propia-border-divider); }
    .pk-filter-add { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--propia-brand, var(--propia-brand)); background: var(--propia-brand-soft, var(--propia-brand-soft)); border: 0; border-radius: 8px; padding: 7px 12px; cursor: pointer; font-family: inherit; }
    .pk-filter-clear { font-size: 12px; font-weight: 700; color: #C0383C; background: transparent; border: 0; border-radius: 8px; padding: 7px 10px; cursor: pointer; font-family: inherit; }
    .pk-filter-clear:hover { background: var(--propia-danger-soft); }
    [data-bs-theme="dark"] .pk-filterpop { background: var(--propia-bg-card-soft); border-color: var(--propia-text-body); }
    [data-bs-theme="dark"] .pk-frule-f, [data-bs-theme="dark"] .pk-frule-op, [data-bs-theme="dark"] .pk-frule-v,
    [data-bs-theme="dark"] select.pk-frule-logic, [data-bs-theme="dark"] .pk-frule-del { background: var(--propia-bg-card); border-color: var(--propia-text-body); color: var(--propia-border-card-2); }

    /* ===== Vista Calendario ===== */
    .pk-cal { border: 1px solid var(--propia-border-card); border-radius: 14px; overflow: hidden; background: var(--propia-bg-card); margin-bottom: 30px; }
    .pk-cal-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--propia-border-divider); }
    .pk-cal-nav { font-size: 18px; border: 1px solid var(--propia-border-card); border-radius: 8px; width: 30px; height: 30px; }
    .pk-cal-title { font-size: 15px; font-weight: 800; color: var(--propia-text-h1); min-width: 150px; }
    .pk-cal-hoy { padding: 6px 12px; }
    .pk-cal-hint { margin-left: auto; font-size: 11.5px; color: var(--propia-text-faint); }
    .pk-cal-head { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--propia-bg-table-head); border-bottom: 1px solid var(--propia-border-divider); }
    .pk-cal-dow { padding: 8px 10px; font-size: 10px; font-weight: 800; letter-spacing: .4px; color: var(--propia-text-faint); text-align: left; }
    .pk-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--propia-border-divider); }
    .pk-cal-cell { background: var(--propia-bg-card); min-height: 92px; padding: 6px 7px; display: flex; flex-direction: column; gap: 3px; }
    .pk-cal-cell--off { background: #FBFCFE; }
    .pk-cal-cell--off .pk-cal-daynum { color: var(--propia-text-faint); }
    .pk-cal-cell--hoy { background: #F6F3FE; }
    .pk-cal-daynum { font-size: 11.5px; font-weight: 700; color: var(--propia-text-secondary); }
    .pk-cal-cell--hoy .pk-cal-daynum { color: var(--propia-brand, var(--propia-brand)); }
    .pk-cal-ev { font-size: 10.5px; font-weight: 700; color: var(--propia-ok); background: var(--propia-ok-soft); border-radius: 5px; padding: 2px 6px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .pk-cal-ev:hover { filter: brightness(.96); }
    .pk-cal-ev--warn { color: #B45309; background: #FEF3C7; }
    .pk-cal-ev--err { color: #B91C1C; background: #FEE2E2; }
    .pk-cal-more { font-size: 10px; font-weight: 700; color: var(--propia-text-muted); padding: 1px 4px; }
    [data-bs-theme="dark"] .pk-cal { background: var(--propia-bg-card-soft); border-color: var(--propia-text-body); }
    [data-bs-theme="dark"] .pk-cal-cell { background: var(--propia-bg-card-soft); }
    [data-bs-theme="dark"] .pk-cal-cell--off { background: var(--propia-bg-card); }
    [data-bs-theme="dark"] .pk-cal-grid { background: var(--propia-text-body); }
    [data-bs-theme="dark"] .pk-cal-head { background: var(--propia-bg-card); }

    .pk-chip-section { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
    .pk-chip-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
    .pk-chip-lbl { font-size: 10.5px; font-weight: 700; color: var(--propia-text-faint); text-transform: uppercase; letter-spacing: .4px; min-width: 70px; }
    .pk-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--propia-border-card); background: var(--propia-bg-card); font-size: 11.5px; font-weight: 600; color: var(--propia-text-secondary); cursor: pointer; font-family: inherit; }
    .pk-chip:hover { border-color: var(--propia-brand, var(--propia-brand)); color: var(--propia-brand, var(--propia-brand)); }
    .pk-chip--on { background: var(--propia-brand, var(--propia-brand)); border-color: var(--propia-brand, var(--propia-brand)); color: var(--propia-text-inverse); }
    .pk-chip-num { font-size: 10px; font-weight: 800; background: rgba(255,255,255,.25); color: inherit; padding: 1px 6px; border-radius: 5px; min-width: 18px; text-align: center; }
    .pk-chip:not(.pk-chip--on) .pk-chip-num { background: var(--propia-bg-hover); color: var(--propia-text-secondary); }

    .pk-board { display: grid; gap: 12px; margin-bottom: 30px; overflow-x: auto; padding-bottom: 8px; }
    .pk-col { background: var(--propia-bg-app); border: 1px solid var(--propia-border-divider); border-radius: 14px; min-height: 200px; display: flex; flex-direction: column; }
    .pk-col-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--propia-border-divider); }
    .pk-col-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
    .pk-col-name { font-size: 13px; font-weight: 700; color: var(--propia-text-h1); flex: 1; }
    .pk-col-count { font-size: 11px; font-weight: 700; background: var(--propia-bg-card); color: var(--propia-text-secondary); padding: 2px 8px; border-radius: 7px; }
    .pk-col-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 100px; }
    .pk-col-empty { font-size: 12px; color: var(--propia-text-faint); padding: 14px 4px; text-align: center; }

    .pk-add-card { display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: 100%; border: 1px dashed #D3DEE9; background: transparent; color: var(--propia-text-muted); padding: 8px; border-radius: 9px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }
    .pk-add-card:hover { border-color: var(--propia-brand, var(--propia-brand)); color: var(--propia-brand, var(--propia-brand)); }
    .pk-composer { background: var(--propia-bg-card); border: 1.5px solid var(--propia-brand, var(--propia-brand)); border-radius: 11px; padding: 10px; display: flex; flex-direction: column; gap: 7px; }
    .pk-comp-input { border: 1px solid var(--propia-border-card); border-radius: 8px; padding: 8px; font-size: 12.5px; font-family: inherit; outline: none; }
    .pk-comp-row { display: flex; gap: 6px; }
    .pk-comp-sel { flex: 1; min-width: 0; border: 1px solid var(--propia-border-card); border-radius: 8px; padding: 6px; font-size: 11.5px; font-family: inherit; }
    .pk-comp-actions { display: flex; gap: 6px; }
    .pk-comp-ok { background: var(--propia-brand, var(--propia-brand)); color: var(--propia-text-inverse); border: 0; border-radius: 8px; padding: 7px 14px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; }
    .pk-comp-ok:disabled { opacity: .5; cursor: not-allowed; }
    .pk-comp-x { background: var(--propia-bg-hover); color: var(--propia-text-secondary); border: 0; border-radius: 8px; padding: 7px 12px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }

    /* Card */
    .pk-card { background: var(--propia-bg-card); border: 1px solid var(--propia-border-card); border-radius: 11px; padding: 11px 13px; cursor: grab; box-shadow: 0 1px 2px rgba(45,62,80,.04); transition: box-shadow .15s, transform .1s; position: relative; }
    .pk-card:hover { box-shadow: 0 4px 12px rgba(45,62,80,.10); transform: translateY(-1px); }
    .pk-card--tutela { border-left: 3px solid #DC2626; }
    .pk-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
    .pk-card-num { font-size: 10.5px; font-weight: 700; color: var(--propia-text-faint); }
    .pk-sem { display: inline-flex; align-items: center; gap: 5px; font-size: 9.5px; font-weight: 700; padding: 2px 7px; border-radius: 5px; text-transform: uppercase; letter-spacing: .3px; }
    .pk-sem-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
    .pk-sem--verde { color: var(--propia-ok); background: var(--propia-ok-soft); }
    .pk-sem--amarillo { color: var(--propia-warn); background: var(--propia-warn-soft); }
    .pk-sem--rojo { color: var(--propia-danger); background: var(--propia-danger-soft); }
    .pk-sem--negro { color: var(--propia-text-inverse); background: #111827; }
    .pk-sem--tutela { color: var(--propia-text-inverse); background: #DC2626; }
    /* Dias al lado del estado SLA (en la columna Estado de la tabla) */
    .pk-sem-dias { margin-left: 7px; font-size: 11px; font-weight: 700; color: var(--propia-text-muted); white-space: nowrap; }
    .pk-sem-dias:empty { display: none; }
    .pk-sem-dias--warn { color: #B45309; }
    .pk-sem-dias--err { color: #B91C1C; }
    .pk-card-tipo { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
    .pk-tipo-pill { font-size: 10px; font-weight: 700; color: var(--propia-brand, var(--propia-brand)); background: var(--propia-brand-soft, var(--propia-brand-soft)); padding: 2px 8px; border-radius: 5px; }
    .pk-cat { font-size: 10.5px; color: var(--propia-text-muted); font-weight: 600; }
    .pk-card-desc { font-size: 12px; color: var(--propia-text-secondary); line-height: 1.4; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .pk-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 10.5px; color: var(--propia-text-muted); }
    .pk-radicador { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
    .pk-rsv { color: #DC2626; font-weight: 700; }
    .pk-vence { font-weight: 700; }
    .pk-vence-warn { color: #B45309; }
    .pk-vence-err { color: #DC2626; }
    .pk-card-flags { display: flex; gap: 5px; margin-top: 7px; flex-wrap: wrap; }
    .pk-flag { font-size: 9.5px; font-weight: 700; padding: 2px 7px; border-radius: 5px; }
    .pk-flag--tutela { color: var(--propia-text-inverse); background: #DC2626; }
    .pk-flag--comite { color: var(--propia-brand, var(--propia-brand)); background: var(--propia-brand-soft, var(--propia-brand-soft)); }
    .pk-card-arch { position: absolute; top: 8px; right: 8px; opacity: 0; transition: opacity .1s; }
    .pk-card:hover .pk-card-arch { opacity: 1; }

    /* Tabla */
    /* Caja externa (borde/radio/overflow:hidden) que integra tabla + footer; el scroll va en el wrap interno. */
    .pk-tablebox { border: 1px solid var(--propia-border-card); border-radius: 12px; overflow: hidden; margin-bottom: 30px; background: var(--propia-bg-card); }
    .pk-table-wrap { overflow: auto; max-height: calc(100vh - 300px); background: var(--propia-bg-card); }

    /* Doble scroll horizontal: barra superior espejo (sincronizada por JS con la tabla). */
    .pk-topscroll { overflow-x: auto; overflow-y: hidden; height: 14px; margin-bottom: 7px; border-radius: 8px; }
    .pk-topscroll > div { height: 1px; }
    .pk-topscroll::-webkit-scrollbar { height: 10px; }
    .pk-topscroll::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 8px; }
    .pk-topscroll::-webkit-scrollbar-thumb:hover { background: var(--propia-text-faint); }
    .pk-topscroll::-webkit-scrollbar-track { background: var(--propia-bg-hover); border-radius: 8px; }

    /* Encabezado ordenable (clic ordena; reclic invierte). */
    .pk-table th.pk-th-sort { cursor: pointer; user-select: none; }
    .pk-table th.pk-th-sort:hover { color: var(--propia-brand); }
    .pk-th-lbl { display: inline-flex; align-items: center; }

    /* Color por columna: boton en el encabezado + paleta + color personalizado. */
    .pk-colcolor-wrap { position: relative; display: inline-flex; align-items: center; margin-left: 6px; vertical-align: middle; }
    .pk-colcolor-btn { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid #CBD5E1; background: transparent; cursor: pointer; padding: 0; opacity: 0; transition: opacity .12s; }
    .pk-table th:hover .pk-colcolor-btn, .pk-colcolor-btn:focus { opacity: 1; }
    .pk-colcolor-btn[style*="transparent"] { border-style: dashed; }
    .pk-colorpop-bd { position: fixed; inset: 0; z-index: 45; }
    .pk-colorpop { position: absolute; top: 20px; right: 0; z-index: 46; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; background: var(--propia-bg-card); border: 1px solid var(--propia-border-card); border-radius: 10px; box-shadow: 0 10px 30px rgba(16,24,40,.16); padding: 9px; width: 170px; }
    .pk-coloropt { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid rgba(0,0,0,.06); cursor: pointer; padding: 0; position: relative; }
    .pk-coloropt.on { outline: 2px solid var(--propia-brand); outline-offset: 1px; }
    .pk-coloropt-none { background: var(--propia-bg-card); }
    .pk-coloropt-none::after { content: ""; position: absolute; left: 3px; right: 3px; top: 50%; height: 2px; background: #E4506D; transform: rotate(-45deg); }
    .pk-coloropt-custom { overflow: hidden; padding: 0; background: conic-gradient(from 0deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); display: inline-flex; }
    .pk-coloropt-custom input[type=color] { opacity: 0; width: 100%; height: 100%; border: 0; padding: 0; margin: 0; cursor: pointer; }
    [data-bs-theme="dark"] .pk-colorpop { background: var(--propia-bg-card-soft); border-color: var(--propia-text-body); }
    .pk-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
    .pk-table th { text-align: left; padding: 11px 12px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--propia-text-faint); border-bottom: 1px solid var(--propia-border-divider); background: #FBFCFE; white-space: nowrap; position: sticky; top: 0; z-index: 3; }
    .pk-table td { padding: 10px 12px; border-bottom: 1px solid var(--propia-border-divider); color: var(--propia-text-body); vertical-align: middle; }
    /* Anchos minimos para que quepan los datos. */
    .pk-table .pk-col-radicado { min-width: 140px; }
    .pk-table .pk-col-asunto { min-width: 280px; }
    .pk-table .pk-col-tipo { min-width: 120px; }
    .pk-table .pk-col-semaforo { min-width: 155px; }
    .pk-table .pk-col-unidad { min-width: 170px; }
    .pk-table .pk-col-radicador { min-width: 240px; }
    .pk-table .pk-col-asunto .pk-td-muted { max-width: 380px; }
    .pk-tr { cursor: pointer; }
    .pk-tr:hover td { background: var(--propia-bg-hover); }
    /* Fila recien agregada: resaltada (verde suave) y fijada al final hasta refrescar, para que el
       usuario confirme visualmente que su registro se creo y no lo pierda de vista. */
    .pk-tr-nuevo td { background: var(--propia-ok-soft) !important; }
    .pk-tr-nuevo td.pk-td-pin { background: var(--propia-ok-soft) !important; box-shadow: inset 3px 0 0 #34C759; }
    /* Columna expander (primera, 34px): icono que aparece al hover y abre la ficha (patron Tableros). */
    .pk-th-exp, .pk-td-exp { width: 34px; text-align: center; padding: 0 4px; }
    .pk-exp { width: 24px; height: 24px; border: 0; border-radius: 6px; background: var(--propia-brand-soft); color: var(--propia-brand, var(--propia-brand)); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity .12s, background .12s; }
    .pk-tr:hover .pk-exp { opacity: 1; }
    .pk-exp:hover { background: var(--propia-brand-soft); }
    .pk-tr-new .pk-exp-fijo { opacity: 1; }
    .pk-exp-fijo:disabled { opacity: .3; cursor: default; }
    /* Boton "Agregar" de la fila de alta: mismo estilo que Zonas Comunes (zc-row-add): violeta suave. */
    .pk-newrow-save {
        display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; flex: 0 0 auto;
        font-size: 11.5px; font-weight: 700; color: var(--propia-brand, var(--propia-brand));
        background: var(--propia-brand-soft); border: 1px solid var(--propia-brand-border); border-radius: 7px; padding: 6px 10px;
        cursor: pointer; font-family: inherit;
    }
    .pk-newrow-save:hover:not(:disabled) { background: var(--propia-brand-soft); }
    .pk-newrow-save:disabled { opacity: .5; cursor: default; }
    .pk-td-muted { color: var(--propia-text-muted); }
    .pk-td-pin { position: sticky; left: 0; background: var(--propia-bg-card); z-index: 2; }
    /* Esquina superior izquierda: fija en ambos ejes, por encima del header y de la columna.
       Selector con la misma especificidad que `.pk-table th` para que el z-index no se pise. */
    .pk-table th.pk-th-pin { position: sticky; left: 0; top: 0; background: #FBFCFE; z-index: 6; }
    .pk-table--pin .pk-th-pin { background: #FBFCFE; }
    .pk-grp-row td { background: var(--propia-bg-hover); font-weight: 700; padding: 7px 12px; }
    .pk-grp-lead { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--propia-text-h1); }
    .pk-grp-num { font-size: 10px; font-weight: 800; background: var(--propia-bg-card); color: var(--propia-text-secondary); padding: 1px 7px; border-radius: 5px; }
    /* Columna de acciones: va AL FINAL, NO fija (regla de homogenizacion). Se alcanza con el scroll
       horizontal, igual que en Tareas. El header sigue fijo solo en vertical (top). */
    .pk-th-actions, .pk-td-actions { width: 116px; min-width: 116px; text-align: right; padding-right: 12px; }
    .pk-icon-btn { border: 0; background: transparent; cursor: pointer; font-size: 15px; color: var(--propia-text-muted); padding: 3px 6px; border-radius: 6px; }
    .pk-icon-btn:hover { background: var(--propia-bg-hover); color: var(--propia-brand, var(--propia-brand)); }
    .pk-tr-new td { background: #FBFCFE; }
    /* Fila de alta: estilo canonico de Tareas (.tb-nf-inp): punteado gris en reposo, violeta al focus. */
    .pk-cell-input { width: 100%; border: 1px dashed var(--propia-border-input); border-radius: 7px; padding: 6px 8px; font-size: 12px; font-family: inherit; color: var(--propia-text-body); background: var(--propia-bg-card); outline: none; box-sizing: border-box; }
    .pk-cell-input:focus { border-style: solid; border-color: var(--propia-brand); box-shadow: 0 0 0 2px rgba(109,79,227,.12); }

    .pk-toast { position: fixed; bottom: 24px; right: 28px; padding: 12px 18px; border-radius: 10px; font-size: 13px; font-weight: 600; box-shadow: 0 8px 24px rgba(45,62,80,.18); z-index: 200; }
    .pk-toast--ok { background: var(--propia-success); color: var(--propia-text-inverse); }
    .pk-toast--err { background: #DC2626; color: var(--propia-text-inverse); }

    /* Config columnas */
    .pk-cfg-backdrop { position: fixed; inset: 0; background: rgba(20,30,45,.45); z-index: 300; display: flex; align-items: center; justify-content: center; }
    .pk-cfg { background: var(--propia-bg-card); border-radius: 16px; width: 920px; max-width: 94vw; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; }
    .pk-cfg-tabs { display: flex; gap: 2px; padding: 0 18px; border-bottom: 1px solid var(--propia-border-divider); flex-shrink: 0; }
    .pk-cfg-tab { border: 0; background: transparent; padding: 11px 15px; font-size: 13px; font-weight: 700; color: var(--propia-text-muted); cursor: pointer; border-bottom: 2px solid transparent; font-family: inherit; }
    .pk-cfg-tab:hover { color: var(--propia-text-body); }
    .pk-cfg-tab.on { color: var(--propia-brand, var(--propia-brand)); border-bottom-color: var(--propia-brand, var(--propia-brand)); }
    .pk-cfg-chk--row { display: flex; align-items: center; gap: 9px; padding: 9px 2px; font-size: 13.5px; font-weight: 600; color: var(--propia-text-body); cursor: pointer; border-bottom: 1px solid var(--propia-bg-hover); }
    .pk-cfg-chk--row input { width: 17px; height: 17px; cursor: pointer; }
    .pk-share { width: 600px; }
    .pk-share-intro { font-size: 12.5px; color: #5B6B7B; line-height: 1.55; margin: 0 0 6px; }
    .pk-share-warn { font-size: 13px; color: #B45309; background: #FEF3C7; border-radius: 8px; padding: 10px 12px; margin: 0; }
    .pk-share-lbl { font-size: 11px; font-weight: 700; color: #6B7B8B; text-transform: uppercase; letter-spacing: .3px; margin-top: 6px; }
    .pk-share-row { display: flex; align-items: stretch; gap: 8px; }
    .pk-share-input { flex: 1; border: 1px solid var(--propia-border-card); border-radius: 8px; padding: 9px 11px; font-size: 12.5px; font-family: inherit; color: var(--propia-text-h1); background: var(--propia-bg-app); outline: none; }
    .pk-share-ta { resize: vertical; font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; }
    .pk-share-btns { display: flex; gap: 8px; flex-wrap: wrap; }
    .pk-share-chip { text-decoration: none; border: 1px solid var(--propia-border-card); border-radius: 8px; padding: 8px 14px; font-size: 12.5px; font-weight: 600; color: var(--propia-text-body); background: var(--propia-bg-card); }
    .pk-share-chip:hover { background: var(--propia-border-divider); }
    .pk-share-wa { border-color: #cdeccd; color: #128C4B; background: #F2FBF5; }
    .pk-share-mail { border-color: #d3e2f7; color: #2563EB; background: #F4F8FE; }
    .pk-share-ok { font-size: 12px; color: #128C4B; background: #F2FBF5; border-radius: 8px; padding: 7px 11px; }
    .pk-cfg-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--propia-border-divider); }
    .pk-cfg-head h3 { font-size: 16px; font-weight: 800; color: var(--propia-text-h1); margin: 0; }
    .npq-close { width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--propia-text-muted); cursor: pointer; font-size: 20px; }
    .pk-cfg-body { padding: 18px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
    .pk-cfg-row { display: flex; align-items: center; gap: 9px; }
    .pk-cfg-color { width: 34px; height: 34px; border: 1px solid var(--propia-border-card); border-radius: 8px; padding: 2px; cursor: pointer; }
    .pk-cfg-name { flex: 1; border: 1px solid var(--propia-border-card); border-radius: 8px; padding: 8px 10px; font-size: 13px; font-family: inherit; outline: none; }
    .pk-cfg-badge { font-size: 9.5px; font-weight: 700; color: #B45309; background: #FEF3C7; padding: 2px 7px; border-radius: 20px; }
    .pk-cfg-ord { display: flex; flex-direction: column; }
    .pk-cfg-del { border: 1px solid #FECACA; background: var(--propia-bg-card); color: #DC2626; border-radius: 8px; padding: 6px 11px; font-size: 11.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
    .pk-cfg-del:hover { background: #FEE2E2; }
    .pk-cfg-add { display: flex; align-items: center; gap: 9px; border-top: 1px dashed var(--propia-border-card); padding-top: 14px; margin-top: 4px; }
    .pk-cfg-msg { font-size: 12px; color: #B91C1C; font-weight: 600; }
    .pk-cfg-sec-t { font-size: 13px; font-weight: 800; color: var(--propia-text-body); margin-top: 16px; border-top: 1px solid var(--propia-border-divider); padding-top: 14px; }
    .pk-cfg-sec-hint { font-size: 11.5px; color: var(--propia-text-faint); margin-bottom: 6px; }
    .pk-cfg-clasif { border: 1px solid var(--propia-border-card); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; font-family: inherit; color: var(--propia-text-body); outline: none; background: var(--propia-bg-card); }
    .pk-cfg-dias { width: 62px; border: 1px solid var(--propia-border-card); border-radius: 8px; padding: 8px 8px; font-size: 12.5px; font-family: inherit; color: var(--propia-text-body); outline: none; text-align: center; }
    .pk-cfg-chk { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--propia-text-secondary); white-space: nowrap; }

    /* Reorden de campos fijos del formulario publico */
    .pk-fld-order { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; }
    .pk-fld-row { display: flex; align-items: center; gap: 10px; border: 1px solid var(--propia-border-card); border-radius: 9px; padding: 7px 10px; background: var(--propia-bg-card); }
    .pk-fld-idx { width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: var(--propia-brand); background: var(--propia-brand-soft); border-radius: 6px; }
    .pk-fld-name { flex: 1; font-size: 12.5px; font-weight: 600; color: var(--propia-text-body); }
    .pk-fld-opt { font-size: 9.5px; font-weight: 800; color: var(--propia-text-muted); background: var(--propia-bg-hover); padding: 2px 6px; border-radius: 5px; margin-left: 7px; text-transform: uppercase; }
    .pk-fld-arrows { display: flex; gap: 3px; flex-shrink: 0; }
    .pk-fld-arrow { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--propia-border-card); background: var(--propia-bg-card); border-radius: 6px; color: var(--propia-text-secondary); cursor: pointer; }
    .pk-fld-arrow:hover:not(:disabled) { border-color: var(--propia-brand); color: var(--propia-brand); }
    .pk-fld-arrow:disabled { opacity: .35; cursor: not-allowed; }

    [data-bs-theme="dark"] .pk-title { color: var(--propia-text-body); }
    [data-bs-theme="dark"] .pk-kpi, [data-bs-theme="dark"] .pk-card, [data-bs-theme="dark"] .pk-table-wrap { background: var(--propia-bg-card-soft); border-color: var(--propia-text-body); }
    [data-bs-theme="dark"] .pk-kpi-val { color: var(--propia-text-body); }
    [data-bs-theme="dark"] .pk-col { background: var(--propia-bg-card); border-color: var(--propia-text-body); }
    [data-bs-theme="dark"] .pk-table th { background: var(--propia-bg-card); }
    [data-bs-theme="dark"] .pk-table td { color: var(--propia-border-card-2); }
    [data-bs-theme="dark"] .pk-td-pin, [data-bs-theme="dark"] .pk-th-pin { background: var(--propia-bg-card-soft); }
    /* === Movil (hasta 640px): colapsar KPIs densos, reducir padding, permitir scroll del calendario === */
    @media (max-width: 640px) {
        .pk-page { padding: 14px 12px; }
        .pk-kpis { grid-template-columns: repeat(2, 1fr); }
        .pk-cal { overflow-x: auto; }
        .pk-cal-grid { min-width: 620px; }
        /* Modales de configurar columnas / compartir a pantalla completa */
        .pk-cfg-backdrop { padding: 0; align-items: stretch; }
        .pk-cfg { width: 100%; max-width: 100%; max-height: 100dvh; border-radius: 0; }
    }