/* TareasKanban - CSS extraido del <style> inline (R-02 auditoria: fuera del render tree, servido/cacheado una vez). */

    /* Igualado a Unidades: sin max-width ni centrado, y SIN padding horizontal propio (el gutter lateral lo da
       el .app-wrapper del shell, igual que dst-* en Distribucion). Asi la tabla usa el mismo espacio a los lados. */
    .tb-wrap { width: 100%; max-width: none; margin: 0; padding: 6px 0 60px; font-family: 'Lexend', sans-serif; box-sizing: border-box; }
    .tb-head, .tb-board-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 12px; }
    .tb-head { justify-content: space-between; }
    /* El header del tablero envuelve: si no cabe, las acciones bajan a otra linea en vez de machucar el titulo. */
    .tb-board-head { flex-wrap: wrap; align-items: center; row-gap: 10px; }
    .tb-board-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; }
    /* Distribucion estilo PQRSD: controles arriba y CTA principal en su propia linea, alineados a la derecha. */
    .tb-board-actions--col { flex-direction: column; align-items: flex-end; gap: 10px; }
    .tb-actions-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
    .tb-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); font-family: inherit; }
    .tb-cta-brand:hover { background: var(--propia-brand-hover, var(--propia-brand-hover)); }
    /* KPIs del tablero (mismas tarjetas blancas minimalistas de PQRSD). */
    .tb-bkpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; margin-bottom: 10px; }
    /* Tarjeta KPI estandar: icono cuadrado con fondo pastel + numero oscuro (como Contratos). */
    .tb-bkpi { 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; }
    .tb-bkpi-ic { width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
    .tb-bkpi-ic--brand { background: var(--propia-brand-soft); color: var(--propia-brand); }
    .tb-bkpi-ic--warn { background: #FEF3C7; color: #B45309; }
    .tb-bkpi-ic--err { background: #FEE2E2; color: #B91C1C; }
    .tb-bkpi-val { font-size: 17px; font-weight: 800; color: var(--propia-text-h1); letter-spacing: -0.3px; line-height: 1.1; }
    .tb-bkpi-lbl { font-size: 10.5px; color: var(--propia-text-faint); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .tb-bkpi--warn .tb-bkpi-val { color: #B45309; }
    .tb-bkpi--err .tb-bkpi-val { color: #DC2626; }
    /* Pestanas Activos/Cerrados + buscador */
    .tb-board-tabs { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--propia-border-divider); margin-bottom: 10px; }
    .tb-btab { 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; }
    .tb-btab.on { color: var(--propia-brand, var(--propia-brand)); border-bottom-color: var(--propia-brand, var(--propia-brand)); }
    .tb-search { border: 1px solid var(--propia-border-card); border-radius: 9px; padding: 8px 12px; font-size: 13px; color: var(--propia-text-body); background: var(--propia-bg-card); outline: none; font-family: inherit; min-width: 231px; }
    .tb-search:focus { border-color: var(--propia-brand, var(--propia-brand)); }
    .tb-search--sm { min-width: 210px; }
    .tb-search:focus { border-color: var(--propia-brand); }
    /* Modal cerrar tarea */
    .tb-cierre { background: var(--propia-bg-card); border-radius: 14px; width: min(440px, 94vw); padding: 20px; box-shadow: 0 20px 60px rgba(20,40,70,.3); align-self: center; }
    .tb-cierre-h { font-size: 16px; font-weight: 800; color: var(--propia-text-h1); }
    .tb-cierre-sub { font-size: 12.5px; color: var(--propia-text-muted); margin-top: 2px; }
    .tb-cierre-lbl { display: block; font-size: 11px; font-weight: 700; color: var(--propia-text-muted); margin: 14px 0 5px; }
    .tb-cierre-sel { width: 100%; box-sizing: border-box; border: 1px solid var(--propia-border-card); border-radius: 9px; padding: 9px 11px; font-size: 13px; color: var(--propia-text-body); outline: none; font-family: inherit; background: var(--propia-bg-card); }
    .tb-cierre-hint { font-size: 11.5px; color: var(--propia-text-faint); margin: 8px 0 0; }
    .tb-cierre-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
    .tbcfg-hint { font-size: 11.5px; color: var(--propia-text-faint); margin: -4px 0 8px; }
    .tb-head-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

    /* Selector de copropiedad (prototipo v2) */
    .tb-cosel { position: relative; flex-shrink: 0; }
    .tb-cosel-btn { display: flex; align-items: center; gap: 8px; background: var(--propia-bg-card); border: 1px solid var(--propia-border-card); border-radius: 10px; padding: 9px 12px; font-size: 13px; font-weight: 700; color: var(--propia-text-body); cursor: pointer; }
    .tb-cosel-btn:hover:not(:disabled) { border-color: var(--propia-brand); }
    .tb-cosel-btn.tb-cosel-single { cursor: default; }
    .tb-cosel-nom { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .tb-cosel-caret { color: var(--propia-text-muted); flex-shrink: 0; }
    .tb-cosel-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 250px; background: var(--propia-bg-card); border: 1px solid var(--propia-border-card); border-radius: 12px; box-shadow: 0 12px 30px rgba(45,62,80,.16); padding: 6px; z-index: 60; max-height: 340px; overflow-y: auto; }
    .tb-cosel-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: transparent; border: 0; border-radius: 8px; padding: 9px 10px; font-size: 13px; font-weight: 600; color: var(--propia-text-body); cursor: pointer; }
    .tb-cosel-item:hover:not(:disabled) { background: var(--propia-bg-app); }
    .tb-cosel-item.on { color: var(--propia-brand); background: var(--propia-brand-soft); }
    .tb-cosel-item > span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .tb-cosel-check { color: var(--propia-brand); flex-shrink: 0; }
    .tb-title { font-size: 27px; font-weight: 800; letter-spacing: -.6px; color: var(--propia-text-h1); margin: 0; }
    .tb-sub { font-size: 14px; color: var(--propia-text-muted); margin: 4px 0 0; }
    .tb-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 10px; font-size: 13px; font-weight: 700; border: 0; cursor: pointer; white-space: nowrap; }
    .tb-btn-primary { background: var(--propia-brand); color: var(--propia-text-inverse); box-shadow: 0 6px 16px rgba(109,79,227,.3); }
    .tb-btn-primary:hover { background: var(--propia-brand-hover); color: var(--propia-text-inverse); }
    .tb-btn-primary:disabled { opacity: .6; cursor: default; }
    .tb-btn-soft { background: var(--propia-brand-soft); color: var(--propia-brand); border: 1px solid var(--propia-brand-border); }
    .tb-btn-soft:hover { background: #E6DEFA; }
    .tb-btn-ghost { background: var(--propia-bg-card); color: var(--propia-text-secondary); border: 1px solid var(--propia-border-card); }
    .tb-btn-ghost:hover { border-color: var(--propia-text-faint); }
    .tb-btn-danger { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: #D7263D; padding: 9px 13px; border-radius: 9px; border: 1px solid #FBD5D5; background: var(--propia-bg-card); cursor: pointer; }
    .tb-btn-danger:hover { background: var(--propia-bg-card)5F5; }
    .tb-flex { flex: 1; }

    /* Indicadores (KPIs) del modulo, prototipo v2 */
    .tb-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin-bottom: 20px; }
    /* Tarjeta blanca estandar del sistema: borde suave + icono cuadrado con fondo pastel. */
    .tb-kpi { display: flex; align-items: center; gap: 12px; background: var(--propia-bg-card); border: 1px solid var(--propia-border-card); border-radius: 12px; padding: 12px 16px; box-shadow: 0 1px 2px rgba(45,62,80,.05); }
    .tb-kpi-ic { width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
    .tb-kpi--brand .tb-kpi-ic { background: var(--propia-brand-soft); color: var(--propia-brand); }
    .tb-kpi--ok .tb-kpi-ic { background: var(--propia-ok-soft); color: #0F8A4F; }
    .tb-kpi--warn .tb-kpi-ic { background: #FEF3C7; color: #B45309; }
    .tb-kpi--err .tb-kpi-ic { background: #FEE2E2; color: #B91C1C; }
    .tb-kpi--err .tb-kpi-n { color: #B91C1C; }
    .tb-kpi--warn .tb-kpi-n { color: #B45309; }
    .tb-kpi-body { min-width: 0; }
    .tb-kpi-label { font-size: 11.5px; font-weight: 700; color: var(--propia-text-secondary); margin-top: 1px; }
    .tb-kpi-n { font-size: 20px; font-weight: 800; letter-spacing: -0.3px; color: var(--propia-text-h1); line-height: 1.1; }
    .tb-kpi-sub { font-size: 10.5px; font-weight: 600; color: var(--propia-text-faint); margin-top: 1px; }
    @media (max-width: 1100px) { .tb-kpis { grid-template-columns: repeat(2, 1fr); } }

    .tb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
    .tb-card { background: var(--propia-bg-card); border: 1px solid var(--propia-border-card); border-radius: 15px; overflow: hidden; box-shadow: 0 1px 2px rgba(45,62,80,.05); }
    .tb-card-bar { height: 7px; }
    .tb-card-body { padding: 17px 18px; }
    .tb-card-top { display: flex; align-items: flex-start; gap: 10px; }
    .tb-card-id { flex: 1; min-width: 0; }
    .tb-card-nom { font-size: 15.5px; font-weight: 800; color: var(--propia-text-h1); letter-spacing: -.2px; }
    .tb-card-desc { font-size: 12px; color: var(--propia-text-muted); margin-top: 3px; line-height: 1.45; }
    .tb-card-edit { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--propia-text-faint); border: 1px solid var(--propia-border-card); background: var(--propia-bg-card); flex-shrink: 0; cursor: pointer; }
    .tb-card-edit:hover { border-color: var(--propia-brand); color: var(--propia-brand); }
    .tb-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 15px; }
    .tb-avatars { display: flex; align-items: center; }
    .tb-ava { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg,#8366F0,var(--propia-brand-hover)); color: var(--propia-text-inverse); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; border: 2px solid var(--propia-bg-card); margin-right: -8px; }
    .tb-ava-more { background: var(--propia-border-divider); color: var(--propia-text-secondary); }
    .tb-avatars-lg .tb-ava { width: 30px; height: 30px; }
    .tb-card-count { font-size: 11px; font-weight: 700; color: var(--propia-text-muted); background: var(--propia-bg-app); border: 1px solid var(--propia-border-card); padding: 3px 10px; border-radius: 20px; }
    .tb-card-open { width: 100%; margin-top: 15px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 9px; border-radius: 9px; background: var(--propia-brand-soft); color: var(--propia-brand); font-size: 12.5px; font-weight: 700; border: 0; cursor: pointer; }
    .tb-card-open:hover { background: #E6DEFA; }
    .tb-card-new { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; min-height: 180px; border: 1.5px dashed var(--propia-border-input); border-radius: 15px; background: var(--propia-bg-card-soft); color: var(--propia-text-muted); font-size: 12.5px; font-weight: 700; cursor: pointer; }
    .tb-card-new:hover { border-color: var(--propia-brand); color: var(--propia-brand); background: var(--propia-brand-soft-2); }
    .tb-card-new-ic { width: 42px; height: 42px; border-radius: 12px; background: var(--propia-brand-soft); color: var(--propia-brand); display: flex; align-items: center; justify-content: center; }

    .tb-icon-btn { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--propia-text-secondary); border: 1px solid var(--propia-border-card); background: var(--propia-bg-card); flex-shrink: 0; cursor: pointer; margin-top: 3px; }
    .tb-icon-btn:hover { border-color: var(--propia-brand); color: var(--propia-brand); }
    .tb-board-color { width: 8px; height: 38px; border-radius: 5px; flex-shrink: 0; margin-top: 3px; }
    .tb-board-id { flex: 1 1 240px; min-width: 190px; }
    .tb-board-nom { font-size: 24px; font-weight: 800; letter-spacing: -.5px; color: var(--propia-text-h1); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .tb-board-desc { font-size: 13px; color: var(--propia-text-muted); margin: 2px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .tb-modeswitch { display: flex; align-items: center; gap: 2px; background: var(--propia-bg-hover); border: 1px solid var(--propia-border-card); border-radius: 9px; padding: 3px; flex-shrink: 0; margin-top: 3px; }
    .tb-mode { display: flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 7px; font-size: 12px; font-weight: 700; color: var(--propia-text-muted); background: transparent; border: 0; cursor: pointer; }
    .tb-mode.on { color: var(--propia-brand); background: var(--propia-bg-card); box-shadow: 0 1px 2px rgba(45,62,80,.12); }

    /* Barra de acciones de la vista Tablero (ordenar / agrupar) */
    .tb-cardbar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
    .tb-menuwrap { position: relative; }
    .tb-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; min-width: 190px; background: var(--propia-bg-card); border: 1px solid var(--propia-border-card); border-radius: 11px; box-shadow: 0 12px 34px rgba(45,62,80,.16); padding: 6px; }
    .tb-menu-it { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; font-size: 12.5px; font-weight: 600; color: var(--propia-text-body); cursor: pointer; }
    .tb-menu-it:hover { background: var(--propia-bg-app); }
    .tb-menu-it.on { background: var(--propia-brand-soft); color: var(--propia-brand); font-weight: 800; }
    /* Vista Tablero agrupada por dimension */
    .tb-groups { display: flex; flex-direction: column; gap: 16px; }
    .tb-gsec { background: var(--propia-bg-app); border: 1px solid #ECEEF2; border-radius: 14px; padding: 13px 14px; }
    .tb-gsec-head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
    .tb-gsec-nom { font-size: 13px; font-weight: 800; color: var(--propia-text-h1); letter-spacing: -.2px; }
    .tb-gsec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 11px; }
    .tb-gsec-grid .tb-tcard { cursor: pointer; }
    .tb-etapa-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
    .tb-groups-empty { padding: 40px; text-align: center; color: var(--propia-text-muted); font-size: 13px; font-weight: 600; }
    .tb-kanban { display: grid; gap: 13px; align-items: start; overflow-x: auto; padding-bottom: 8px; }
    .tb-col { background: var(--propia-bg-app); border: 1px solid #ECEEF2; border-radius: 14px; padding: 12px; transition: background .12s, border-color .12s; }
    .tb-col--off { opacity: .5; }
    .tb-col-drop { border-color: #B9AEF3; border-style: dashed; background: #F3F0FE; }
    .tb-col-head { display: flex; align-items: center; gap: 8px; padding: 4px 6px 12px; }
    .tb-col-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
    .tb-col-nom { font-size: 13px; font-weight: 700; color: var(--propia-text-body); flex: 1; }
    .tb-col-count { font-size: 11.5px; font-weight: 700; color: var(--propia-text-muted); background: var(--propia-bg-card); border: 1px solid var(--propia-border-card); padding: 1px 8px; border-radius: 20px; }
    .tb-col-body { display: flex; flex-direction: column; gap: 9px; }
    .tb-tcard { display: block; width: 100%; text-align: left; background: var(--propia-bg-card); border: 1px solid var(--propia-border-card); border-left: 3px solid var(--propia-brand); border-radius: 11px; padding: 12px 13px; box-shadow: 0 1px 2px rgba(45,62,80,.04); cursor: grab; position: relative; }
    .tb-tcard-copy { position: absolute; top: 7px; right: 7px; width: 24px; height: 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--propia-text-muted); background: var(--propia-border-divider); opacity: 0; transition: opacity .12s; cursor: pointer; }
    .tb-tcard:hover .tb-tcard-copy { opacity: 1; }
    .tb-tcard-copy:hover { color: var(--propia-brand); background: var(--propia-brand-soft); }
    .tb-tcard:active { cursor: grabbing; }
    .tb-tcard:hover { border-color: var(--propia-brand); box-shadow: 0 6px 16px rgba(109,79,227,.12); }
    .tb-tcard-tit { font-size: 13px; font-weight: 700; color: var(--propia-text-body); line-height: 1.35; }
    .tb-tcard-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
    .tb-prio { font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 6px; }
    .tb-due { font-size: 11px; color: var(--propia-text-faint); }
    .tb-due.venc { color: #C0383C; font-weight: 700; }
    .tb-tcard-foot { display: flex; align-items: center; gap: 8px; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--propia-border-divider); }
    .tb-tcard-resp { font-size: 11px; color: var(--propia-text-muted); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .tb-chip { font-size: 10px; font-weight: 700; color: var(--propia-brand); background: var(--propia-brand-soft); padding: 2px 7px; border-radius: 6px; }
    .tb-tcard-age { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 700; color: #8595A6; background: var(--propia-border-divider); padding: 2px 6px; border-radius: 6px; flex-shrink: 0; white-space: nowrap; }
    .tb-tcard-age svg { opacity: .8; }
    .tb-col-add { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 9px; border-radius: 9px; border: 1px dashed var(--propia-border-input); background: transparent; color: var(--propia-text-faint); font-size: 11.5px; font-weight: 700; cursor: pointer; }
    .tb-col-add:hover { border-color: var(--propia-brand); color: var(--propia-brand); background: var(--propia-brand-soft-2); }

    .tb-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
    .tb-filter { font-size: 12px; font-weight: 600; color: var(--propia-text-secondary); border: 1px solid var(--propia-border-card); border-radius: 9px; padding: 7px 10px; background: var(--propia-bg-card); outline: none; }
    .tb-filter:focus { border-color: var(--propia-brand); }
    .tb-filter-clear { font-size: 12px; font-weight: 700; color: #C0383C; padding: 7px 10px; border-radius: 9px; border: 0; background: transparent; cursor: pointer; }
    .tb-filter-clear:hover { background: var(--propia-danger-soft); }
    .tb-filter-btn { display: flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 9px; border: 1px solid var(--propia-border-card); background: var(--propia-bg-card); font-size: 12px; font-weight: 700; color: var(--propia-text-secondary); cursor: pointer; }
    .tb-filter-btn.on { border-color: var(--propia-brand); background: var(--propia-brand-soft); color: var(--propia-brand); }
    .tb-filters { position: relative; }

    /* ===== Constructor de filtros (boton compacto + panel de reglas) ===== */
    .tb-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); color: var(--propia-text-inverse); font-size: 10.5px; font-weight: 800; }
    .tb-filterpop-bd { position: fixed; inset: 0; z-index: 44; }
    .tb-filterpop { position: absolute; top: 44px; left: 0; z-index: 45; 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; }
    .tb-filterpop-empty { font-size: 12.5px; color: var(--propia-text-muted); text-align: center; padding: 14px 8px 16px; line-height: 1.5; }
    .tb-frule { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
    .tb-frule-lead { flex: 0 0 60px; font-size: 12px; font-weight: 700; color: var(--propia-text-muted); text-align: right; }
    select.tb-frule-lead.tb-frule-logic { flex: 0 0 60px; 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); font-weight: 800; cursor: pointer; outline: none; }
    .tb-frule-f, .tb-frule-op, .tb-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; }
    .tb-frule-f { flex: 0 0 150px; }
    .tb-frule-op { flex: 0 0 130px; color: var(--propia-text-secondary); }
    .tb-frule-v { flex: 1 1 auto; min-width: 90px; }
    .tb-frule-f:focus, .tb-frule-op:focus, .tb-frule-v:focus, select.tb-frule-logic:focus { border-color: var(--propia-brand); }
    .tb-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); display: flex; align-items: center; justify-content: center; cursor: pointer; }
    .tb-frule-del:hover { background: var(--propia-danger-soft); color: #D7263D; border-color: #F2CFC9; }
    .tb-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); }
    .tb-filter-add { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--propia-brand); background: var(--propia-brand-soft); border: 0; border-radius: 8px; padding: 7px 12px; cursor: pointer; }
    .tb-filter-add:hover { background: var(--propia-brand-soft); }
    .tb-filter-clear2 { font-size: 12px; font-weight: 700; color: #C0383C; background: transparent; border: 0; border-radius: 8px; padding: 7px 10px; cursor: pointer; }
    .tb-filter-clear2:hover { background: var(--propia-danger-soft); }
    [data-bs-theme="dark"] .tb-filterpop { background: var(--propia-bg-card); border-color: var(--propia-border-card); }
    [data-bs-theme="dark"] .tb-frule-f, [data-bs-theme="dark"] .tb-frule-op, [data-bs-theme="dark"] .tb-frule-v,
    [data-bs-theme="dark"] select.tb-frule-logic { background: var(--propia-bg-app); border-color: var(--propia-border-card); color: #C7C7D6; }
    [data-bs-theme="dark"] .tb-frule-del { background: var(--propia-bg-app); border-color: var(--propia-border-card); }
    [data-bs-theme="dark"] .tb-filter-add { background: #2f2a52; }
    .tb-colsmenu { position: absolute; top: 44px; right: 0; z-index: 20; width: 256px; max-height: 380px; overflow-y: auto; background: var(--propia-bg-card); border: 1px solid var(--propia-border-card); border-radius: 12px; box-shadow: 0 12px 30px rgba(27,42,58,.16); padding: 8px; }
    .tb-colsmenu-h { font-size: 10px; letter-spacing: .4px; color: var(--propia-text-faint); font-weight: 700; padding: 5px 8px; }
    .tb-colsmenu-i { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 5px 8px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--propia-text-body); }
    .tb-colsmenu-i:hover { background: var(--propia-bg-app); }
    .tb-colsmenu-off { opacity: .5; }
    /* Reordenar columnas: mini flechas arriba/abajo por fila. */
    .tb-colord { display: inline-flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
    .tb-colord-b { width: 19px; height: 13px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--propia-border-card); background: var(--propia-bg-card); color: var(--propia-text-muted); border-radius: 4px; cursor: pointer; padding: 0; }
    .tb-colord-b:hover:not(:disabled) { background: var(--propia-brand-soft); color: var(--propia-brand); border-color: #B9AEF3; }
    .tb-colord-b:disabled { opacity: .3; cursor: default; }
    .tb-chk-btn { background: none; border: 0; padding: 0; cursor: pointer; display: flex; flex-shrink: 0; }
    .tb-chk-lock { border-style: dashed; background: var(--propia-bg-app); cursor: default; }
    .tb-colsmenu-lbl { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .tb-colsmenu-sep { font-size: 10px; letter-spacing: .4px; color: var(--propia-text-faint); font-weight: 700; padding: 8px 8px 4px; border-top: 1px solid var(--propia-border-divider); margin-top: 4px; }
    .tb-colsmenu-acts { display: flex; gap: 6px; padding: 8px 4px 2px; border-top: 1px solid var(--propia-border-divider); margin-top: 6px; }
    .tb-colsmenu-act { flex: 1; padding: 6px 8px; border: 1px solid var(--propia-border-card); border-radius: 8px; background: var(--propia-bg-card); font-size: 11.5px; font-weight: 700; color: var(--propia-text-secondary); cursor: pointer; font-family: inherit; }
    .tb-colsmenu-act:hover { background: var(--propia-brand-soft); border-color: var(--propia-brand-border); color: var(--propia-brand, var(--propia-brand)); }
    .tb-chk { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--propia-text-faint); background: var(--propia-bg-card); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .tb-chk.on { border-color: var(--propia-brand); background: var(--propia-brand); }
    .tb-lc-etiq { flex: 0 0 160px; width: 160px; }
    /* La celda de etiquetas nunca debe desbordarse sobre columnas vecinas: ancho fijo,
       chips que hacen wrap dentro de la celda (crecen hacia abajo, no hacia los lados). */
    /* Etiquetas: maximo ~2 lineas de chips para que una tarea con muchas etiquetas no estire la fila. */
    /* Las etiquetas envuelven y la fila crece para acomodarlas (sin recortarlas ni apenuscar). */
    .tb-row-etiq { flex: 0 0 160px; width: 160px; display: flex; gap: 4px; flex-wrap: wrap; align-content: center; align-items: center; padding: 4px 0; }
    /* Etiqueta rellena con su color (fondo completo), texto en contraste (blanco/oscuro segun luminancia). */
    .tb-tag { position: relative; display: inline-flex; align-items: center; gap: 4px; max-width: 100%; font-size: 10px; font-weight: 700; color: var(--propia-text-inverse); background: var(--propia-brand); border: 1px solid transparent; padding: 2px 4px 2px 8px; border-radius: 7px; box-sizing: border-box; }
    .tb-tag-tx { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: text; }
    .tb-tag-inp { width: 82px; max-width: 82px; border: 0; border-radius: 5px; padding: 0 4px; font-size: 10px; font-weight: 700; color: var(--propia-text-h1); outline: none; background: var(--propia-bg-card); font-family: inherit; box-sizing: border-box; }
    /* Botita para abrir el selector de color: circulo blanco translucido, visible sobre cualquier color. */
    .tb-tag-sw { width: 12px; height: 12px; flex-shrink: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.85); cursor: pointer; padding: 0; background: rgba(255,255,255,.35); }
    .tb-tag-sw:hover { transform: scale(1.12); }
    .tb-tagpop-bd { position: fixed; inset: 0; z-index: 1118; background: transparent; }
    .tb-tag-colors { position: absolute; top: calc(100% + 5px); right: 0; z-index: 1120; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; padding: 7px; background: var(--propia-bg-card); border: 1px solid var(--propia-border-card); border-radius: 10px; box-shadow: 0 12px 30px rgba(45,62,80,.2); }
    /* Editores de lista anclados al header (Estados/Etiquetas): el selector de color abre hacia la DERECHA
       (el punto/pildora va a la izquierda del popover), para no salirse por el borde izquierdo y recortarse. */
    .tb-listpop .tb-tag-colors { left: 0; right: auto; }
    .tb-tag-copt { width: 20px; height: 20px; border-radius: 6px; border: 2px solid transparent; cursor: pointer; padding: 0; box-shadow: 0 1px 2px rgba(0,0,0,.15); }
    .tb-tag-copt.on { border-color: var(--propia-text-h1); }
    .tb-tag-copt:hover { transform: scale(1.08); }
    /* Ola C: picker de etiquetas (alta y fila). Chip pequeno + boton "+" + popover de seleccion. */
    .tb-etq-cell { position: relative; }
    .tb-tag-sm { font-size: 11px; font-weight: 700; padding: 3px 9px; }
    .tb-etq-add { width: 18px; height: 18px; flex-shrink: 0; border: 1px dashed var(--propia-border-input); border-radius: 5px; background: transparent; color: var(--propia-text-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; opacity: .6; transition: opacity .12s, color .12s, border-color .12s; }
    .tb-row:hover .tb-etq-add, .tb-newrow:hover .tb-etq-add, .tb-etq-add:focus { opacity: 1; }
    .tb-etq-add:hover { color: var(--propia-brand); border-color: var(--propia-brand); background: var(--propia-brand-soft); }
    .tb-etqpop { position: fixed; z-index: 1120; min-width: 200px; max-width: 220px; max-height: 270px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; padding: 6px; background: var(--propia-bg-card); border: 1px solid var(--propia-border-card); border-radius: 10px; box-shadow: 0 16px 40px rgba(27,42,58,.22); }
    .tb-etqopt { display: flex; align-items: center; gap: 7px; width: 100%; border: 0; background: transparent; border-radius: 7px; padding: 6px 8px; font-size: 12.5px; font-weight: 600; color: var(--propia-text-body); cursor: pointer; text-align: left; }
    .tb-etqopt:hover { background: var(--propia-bg-hover); }
    .tb-etqopt.on { color: var(--propia-brand); font-weight: 700; }
    .tb-etqopt-dot { width: 11px; height: 11px; flex-shrink: 0; border-radius: 50%; }
    .tb-etqopt-tx { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .tb-etqopt-ck { flex-shrink: 0; color: var(--propia-brand); }
    .tb-etqpop-empty { padding: 8px; font-size: 12px; color: var(--propia-text-muted); }
    /* Columna Titulo fijada: el left debe igualar el padding-left de las filas (18px) para que
       NO salte al hacer scroll horizontal; la sombra derecha marca la columna congelada. */
    /* Columna Titulo fijada: se ancla en left:0 con padding-left:18px (no en left:18px) para que su
       fondo OPACO cubra tambien la franja izquierda; si no, al hacer scroll se veian los datos/colores
       de las celdas que pasan por detras. box-sizing preserva el ancho de columna. z-index alto para
       quedar por encima de toda la fila. */
    /* La columna de titulo se fija a 72px: justo despues del checkbox (38px) + el expander (34px), que ahora
       tambien se congelan (ver .tb-row-selc/.tb-row-exp abajo). Antes el titulo anclaba en 0 y, como el
       checkbox/expander NO estaban fijos, al scrollear el titulo se desplazaba ~72px antes de pegarse. */
    .tb-pin { position: sticky; left: 72px; padding-left: 18px; box-sizing: border-box; z-index: 5; background: var(--propia-bg-card); box-shadow: 9px 0 10px -8px rgba(45,62,80,.16); }
    .tb-pin-h { position: sticky; left: 72px; padding-left: 18px; box-sizing: border-box; z-index: 9; background: var(--propia-bg-table-head); box-shadow: 9px 0 10px -8px rgba(45,62,80,.16); }
    .tb-glead { display: inline-flex; align-items: center; gap: 8px; }
    /* lead del grupo fijado: ancla en 72px (tras el grupo checkbox+expander) con padding-left 18px. */
    .tb-pin-g { left: 72px; padding-left: 18px; background: var(--propia-bg-app); padding-right: 10px; }
    /* Grupo fijo a la izquierda: checkbox (38px, left 0) + expander (34px, left 38) congelados junto al titulo,
       para que el bloque se quede quieto al scrollear horizontal (no solo el titulo). Fondo opaco por tipo de
       fila para cubrir las celdas que pasan por detras. */
    .tb-row-selc, .tb-list-hdr .tb-lc-sel { position: sticky; left: 0; z-index: 5; background: var(--propia-bg-card); }
    .tb-row-exp, .tb-list-hdr .tb-lc-exp { position: sticky; left: 38px; z-index: 5; background: var(--propia-bg-card); }
    .tb-list-hdr .tb-lc-sel, .tb-list-hdr .tb-lc-exp { z-index: 9; background: var(--propia-bg-table-head); }
    /* Checkbox + expander + titulo van PEGADOS (como la tabla real de Unidades): se colapsan los dos gaps de
       12px del flex de la fila (checkbox<->expander y expander<->titulo) con margin negativo, dejando el bloque
       en 72px (38+34) en vez de 96px. Ademas alinea el left de la columna congelada (0/38/72) con el flujo. */
    .tb-row-exp, .tb-list-hdr .tb-lc-exp, .tb-row-tit, .tb-list-hdr .tb-lc-tit { margin-left: -12px; }
    .tb-newrow .tb-row-selc, .tb-newrow .tb-row-exp { background: var(--propia-brand-soft-2); }
    /* Las celdas fijas (checkbox 38, expander 34, titulo) se estiran a TODA la altura de la fila: la fila es
       flex align-items:center y sin esto cada celda media solo su contenido (16-29px), por lo que su fondo
       opaco cubria solo la franja central y el contenido de las columnas que pasan por debajo al scrollear en
       horizontal se asomaba arriba/abajo del checkbox (el "glitch" que se veia). Con stretch el fondo cubre
       toda la celda. El contenido sigue centrado por el align-items:center propio de cada celda. */
    .tb-row-selc, .tb-row-exp, .tb-row-tit.tb-pin { align-self: stretch; }
    /* El fondo opaco de las celdas fijas sigue el estado de la fila (hover / seleccionada / subtarea); si no,
       quedaria una banda blanca fija mientras el resto de la fila se tinta. */
    .tb-row:hover .tb-row-selc, .tb-row:hover .tb-row-exp, .tb-row:hover .tb-row-tit.tb-pin { background: var(--propia-brand-soft-2); }
    .tb-row-ischk .tb-row-selc, .tb-row-ischk .tb-row-exp, .tb-row-ischk .tb-row-tit.tb-pin { background: var(--propia-brand-soft); }
    .tb-row-child .tb-row-selc, .tb-row-child .tb-row-exp, .tb-row-child .tb-row-tit.tb-pin { background: var(--propia-bg-card-soft); }

    /* Alto acotado + scroll interno para que la fila de encabezados quede fija (sticky top)
       cuando se baja por las tareas: los titulos de columna se "congelan" arriba. */
    /* Densidad compacta: filas mas bajas y mas alto util para ver ~el doble de registros por pantalla. */
    /* Caja externa (borde/radio/overflow:hidden) que integra tabla + footer; el scroll va en .tb-list. */
    .tb-listbox { position: relative; background: var(--propia-bg-card); border: 1px solid var(--propia-border-card); border-radius: 14px; box-shadow: 0 1px 2px rgba(45,62,80,.05); overflow: hidden; }
    .tb-list { background: var(--propia-bg-card); overflow: auto; max-height: calc(100vh - 190px); overflow-anchor: none; }
    /* FAB flotante sobre el footer canonico (Ola A). */
    .tb-listbox .tbl-fab { bottom: 54px; }
    /* border-left 3px transparente = el mismo que lleva .tb-row (acento de estado): sin el, el header
       quedaba 3px a la izquierda del cuerpo y los separadores no caian en el borde real de la columna. */
    /* padding-left:0: la 1a columna (checkbox) arranca pegada al borde como Unidades. */
    /* altura 47px (= Unidades); antes padding 10px -> 44px. */
    .tb-list-hdr { display: flex; align-items: center; gap: 12px; height: 47px; box-sizing: border-box; padding: 0 18px 0 0; border-bottom: 1px solid var(--propia-border-card); border-left: 3px solid transparent; background: var(--propia-bg-table-head); min-width: 860px; position: sticky; top: 0; z-index: 10; }
    .tb-lc-sort { cursor: pointer; user-select: none; }
    .tb-lc-sort:hover { color: var(--propia-brand); }
    /* Tipografia canonica del header (= Unidades / tabla-base.css): 11.5/700 uppercase, color text-secondary. */
    .tb-lc { font-size: 11.5px; letter-spacing: .4px; font-weight: 700; color: var(--propia-text-secondary); text-transform: uppercase; }
    /* Separadores de columna estilo Unidades, SOLO en el header (no en la fila de sumatoria .tb-list-sum).
       align-self:stretch -> la celda llena el alto de la fila y la linea es completa (la fila es flex con
       align-items:center); el border-right cae en el borde real de la columna (mismos anchos + gap que el
       cuerpo). Solo border-right (sin inset box-shadow): en flex el borde no se clipa como en una tabla
       sticky, y el inset pisaria la sombra lateral de la columna fijada (.tb-pin-h). Expander, acciones
       y ultima: sin separador. */
    /* Sin fondo por celda: la OPACIDAD del header la da la barra padre (.tb-list-hdr, fondo
       bg-table-head + z-index 20); eso ya cubre las filas que pasan por debajo al hacer scroll
       (el cuerpo esta en z<=9). Poner fondo por celda ademas de la barra, con gap:12px entre
       celdas, dejaba ver un "escalon" entre columnas (regresion cazada por Alex 2026-10-12);
       la columna fijada .tb-pin-h ya trae su propio fondo para el scroll horizontal. */
    .tb-list-hdr > .tb-lc { display: flex; align-items: center; align-self: stretch; gap: 4px; border-right: 1px solid var(--propia-border-card); }
    /* El expander (tb-lc-exp) SI lleva divisor: aisla el bloque de controles de la 1a columna de datos
       (homogeneo en todos los modulos, decision Alex 2026-10-08). La seleccion (tb-lc-sel) queda limpia. */
    .tb-list-hdr > .tb-lc-sel, .tb-list-hdr > .tb-lc-acc, .tb-list-hdr > .tb-lc:last-child { border-right: 0; }
    /* Columna del expansor (primera, fija 34px) + columna Codigo. */
    .tb-lc-exp, .tb-row-exp { width: 34px; flex: 0 0 34px; display: flex; align-items: center; justify-content: center; }
    /* Columna de seleccion (canon 38px) + checkbox + fila marcada + barra de accion masiva. */
    .tb-lc-sel, .tb-row-selc { width: 38px; flex: 0 0 38px; display: flex; align-items: center; justify-content: center; }
    /* Label de la celda de seleccion (renombrado de .tb-chk para NO colisionar con el checkbox falso
       del kanban .tb-chk de la linea ~215, que le metia un borde/caja y encogia el input a ~14px). */
    .tb-selchk { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; margin: 0; }
    .tb-selchk input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--propia-brand); }
    .tb-row-ischk { background: var(--propia-brand-soft); }
    .tb-selbar { display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: var(--propia-brand-soft); border: 1px solid var(--propia-brand-border, var(--propia-border-card)); border-radius: 10px; margin-bottom: 10px; }
    .tb-selbar-n { font-size: 12.5px; font-weight: 800; color: var(--propia-brand); }
    .tb-selbar-del { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--propia-danger-soft); background: var(--propia-bg-card); color: var(--propia-danger); font-size: 12px; font-weight: 700; cursor: pointer; border-radius: 8px; padding: 5px 11px; font-family: inherit; margin-left: auto; }
    .tb-selbar-del:hover:not(:disabled) { background: var(--propia-danger-soft); }
    .tb-selbar-del:disabled { opacity: .6; cursor: default; }
    .tb-selbar-x { border: 0; background: transparent; color: var(--propia-brand); font-size: 12px; font-weight: 700; cursor: pointer; text-decoration: underline; }
    .tb-lc-cod { width: 110px; flex-shrink: 0; } .tb-row-cod { width: 110px; flex-shrink: 0; display: flex; align-items: center; }
    /* Expansor: se ve solo al pasar el mouse por la fila (o al escribir en la fila de alta). */
    /* expander icono pelado (= .tbl-exp-btn de Unidades): transparente, pad 6, radius 7, color muted; fondo al hover. */
    .tb-exp-fijo { border: 0; padding: 6px; border-radius: 7px; background: transparent; color: var(--propia-text-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity .12s, background .12s, color .12s; }
    .tb-row:hover .tb-exp-fijo, .tb-newrow:hover .tb-exp-fijo, .tb-newrow:focus-within .tb-exp-fijo { opacity: 1; }
    .tb-exp-fijo:hover { color: var(--propia-brand); background: var(--propia-brand-soft); }
    .tb-exp-fijo:disabled { opacity: 0; cursor: default; }
    .tb-newrow:hover .tb-exp-fijo:disabled, .tb-newrow:focus-within .tb-exp-fijo:disabled { opacity: .35; }
    .tb-lc-tit { width: 300px; flex-shrink: 0; } .tb-lc-est { width: 130px; flex-shrink: 0; } .tb-lc-resp { width: 150px; flex-shrink: 0; }
    .tb-lc-prog { width: 140px; flex-shrink: 0; } .tb-lc-prio { width: 90px; flex-shrink: 0; } .tb-lc-due { flex: 1; min-width: 70px; }
    .tb-list-group { display: flex; align-items: center; gap: 12px; padding: 6px 18px; background: var(--propia-bg-app); border-bottom: 1px solid var(--propia-border-divider); min-width: 860px; }
    .tb-group-nom { font-size: 12px; font-weight: 800; color: var(--propia-text-body); letter-spacing: .2px; }
    .tb-group-add { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--propia-brand); border: 0; background: transparent; cursor: pointer; }
    /* Encabezado de grupo alineado a columnas: la celda-titulo lleva punto+nombre+conteo+Agregar; las celdas numericas llevan el total bajo su columna. */
    .tb-grp-lead { display: flex; align-items: center; gap: 8px; }
    .tb-grp-tot { color: var(--propia-text-body) !important; font-weight: 800 !important; font-size: 12px !important; letter-spacing: 0 !important; }
    /* Agrupacion N-niveles (vista Lista): indent del nombre + fondo por profundidad para leer la jerarquia. */
    .tb-grp-indent { display: inline-block; flex: 0 0 auto; }
    .tb-grp-lvl1 { background: var(--propia-bg-card-soft); }
    .tb-grp-lvl2 { background: var(--propia-bg-card); }
    /* Alto minimo comodo (como Zonas) y la fila crece si las etiquetas ocupan varias lineas. */
    .tb-row { display: flex; align-items: center; gap: 12px; padding: 8px 18px 8px 0; min-height: 44px; border-bottom: 1px solid var(--propia-border-divider); min-width: 860px; border-left: 3px solid transparent; }
    .tb-row:hover { background: var(--propia-brand-soft-2); }
    .tb-row-tit { width: 300px; flex-shrink: 0; min-width: 0; display: flex; align-items: center; gap: 5px; }
    /* Codigo de la tarea como primer elemento de la fila (chip discreto, estilo Airtable/Linear). */
    .tb-row-num { flex-shrink: 0; font-size: 10px; font-weight: 800; letter-spacing: .02em; color: #7C8A9C; background: #F0F3F8; border: 1px solid #E4EAF1; border-radius: 6px; padding: 1px 6px; font-variant-numeric: tabular-nums; }
    .cod-key { font-weight: 700; color: var(--propia-brand-text); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
    /* El chip del codigo es un boton: abre la tarea (reemplazo del ojito). */
    .tb-row-num-btn { cursor: pointer; font-family: inherit; }
    .tb-row-num-btn:hover { color: var(--propia-brand); background: var(--propia-brand-soft); border-color: var(--propia-brand-border); }
    .tb-exp { width: 20px; height: 20px; flex-shrink: 0; border-radius: 5px; display: flex; align-items: center; justify-content: center; color: var(--propia-brand); background: var(--propia-brand-soft); border: 0; cursor: pointer; }
    .tb-row-child { background: var(--propia-bg-card-soft); }
    /* Rama de subtarea: marca gruesa color de marca (Ola C). */
    .tb-row-kidmark { width: 20px; flex-shrink: 0; display: flex; justify-content: center; align-items: center; color: var(--propia-brand); font-weight: 800; font-size: 15px; line-height: 1; }
    /* Alta inline de subtarea: fila fantasma al pie de las hijas. */
    .tb-subadd-row .tb-row-tit { display: flex; align-items: center; gap: 2px; }
    .tb-subadd-inp { border: 1px dashed transparent !important; background: transparent !important; color: var(--propia-text-muted); }
    .tb-subadd-inp:hover { border-color: var(--propia-border-input) !important; }
    .tb-subadd-inp:focus { border-style: solid !important; border-color: var(--propia-brand) !important; background: var(--propia-bg-card) !important; color: var(--propia-text-body); }
    /* Pestana Sub-tareas del modal = tabla completa (Ola C). */
    .tbc-subtbl-wrap { display: flex; flex-direction: column; }
    .tbc-subtbl { min-width: 0; width: 100%; border: 1px solid var(--propia-border-card); border-radius: 10px; overflow: hidden; }
    .tbc-subtbl td.nom { white-space: normal; font-weight: 600; }
    .tbc-subtr { cursor: pointer; }
    .tbc-subtr:hover td { background: var(--propia-bg-hover); }
    .tb-row-titbtn { text-align: left; flex: 1; min-width: 0; background: none; border: 0; cursor: pointer; padding: 0; }
    .tb-row-titbtn:hover .tb-row-t { color: var(--propia-brand); }
    .tb-row-t { font-size: 13px; font-weight: 600; color: var(--propia-text-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .tb-row-addsub { width: 20px; height: 20px; flex-shrink: 0; border-radius: 5px; display: flex; align-items: center; justify-content: center; color: #B7A6F0; background: transparent; border: 0; cursor: pointer; opacity: .55; transition: opacity .12s; }
    .tb-row:hover .tb-row-addsub { opacity: 1; color: var(--propia-brand); }
    .tb-row-addsub:hover { background: var(--propia-brand-soft); }
    /* Control unificado de subtareas en la columna del titulo (no es el expander de abrir el modal).
       Contador: siempre visible, expande/colapsa y deja agregar inline. +: solo al hover (filas sin hijas),
       abre la linea de alta inline. El slot reserva su ancho para que el titulo no salte. */
    .tb-subctl { flex-shrink: 0; height: 20px; border: 0; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--propia-brand); background: var(--propia-brand-soft); transition: opacity .12s, background .12s, color .12s; }
    .tb-subctl-count { gap: 2px; min-width: 20px; padding: 0 5px 0 3px; font-size: 11px; font-weight: 800; line-height: 1; }
    .tb-subctl-count .tb-subctl-car { transition: transform .12s; }
    .tb-subctl-count.open .tb-subctl-car { transform: rotate(90deg); }
    .tb-subctl-count:hover { background: var(--propia-brand-soft-2); }
    .tb-subctl-add { width: 20px; background: transparent; opacity: 0; }
    .tb-row:hover .tb-subctl-add { opacity: 1; }
    .tb-subctl-add:hover { background: var(--propia-brand-soft); }
    .tb-prog-bar { flex: 1; height: 6px; border-radius: 4px; background: var(--propia-border-divider); overflow: hidden; }
    .tb-prog-fill { height: 100%; border-radius: 4px; }
    .tb-est-sel { width: 130px; flex-shrink: 0; font-size: 11.5px; font-weight: 700; color: var(--propia-text-inverse); border: 0; border-radius: 7px; padding: 3px 7px; outline: none; cursor: pointer; }
    .tb-row-resp { width: 150px; flex-shrink: 0; font-size: 12px; color: var(--propia-text-secondary); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .tb-row-prog { width: 140px; flex-shrink: 0; display: flex; align-items: center; gap: 7px; }
    .tb-row-prog input { flex: 1; cursor: pointer; }
    .tb-row-progv { font-size: 11px; font-weight: 700; width: 32px; text-align: right; }
    .tb-row-prio { width: 90px; flex-shrink: 0; }
    .tb-row-due { flex: 1; min-width: 70px; font-size: 12px; color: var(--propia-text-muted); }
    .tb-subtag { font-size: 10px; font-weight: 700; color: var(--propia-text-muted); background: var(--propia-border-divider); padding: 3px 8px; border-radius: 6px; }

    /* ===== Tabla editable inline (vista Lista tipo Excel) ===== */
    .tb-list { overflow-x: auto; }
    /* max-content (en vez de un ancho fijo) para que la fila crezca hasta abarcar TODAS las columnas,
       incluidas las dinamicas; asi el fondo del encabezado/grupo/total cubre tambien esas columnas.
       OJO: este comentario DEBE ser comentario CSS, nunca Razor. Este archivo es un .css plano: un
       comentario Razor (arroba-asterisco ... asterisco-arroba) se parsea como un at-rule invalido que
       se COME la regla siguiente (este min-width: max-content), dejando el header en min-width:860px =
       ancho del viewport; su fondo entonces NO cubre las columnas dinamicas al scrollear en horizontal
       y se ven "transparentes". Bug cazado por Alex 2026-10-12. */
    .tb-list-hdr, .tb-row, .tb-list-group, .tb-newrow, .tb-list-sum { min-width: max-content; }

    /* Fila-resumen de totales por grupo (estilo Airtable): alineada a las columnas de la Lista. */
    .tb-list-sum { display: flex; align-items: center; gap: 12px; padding: 7px 18px; background: #F6F3FE; border-bottom: 1px solid var(--propia-border-divider); }
    .tb-list-sum .tb-lc { color: var(--propia-text-body); font-weight: 700; letter-spacing: 0; }
    .tb-sum-lead { color: var(--propia-brand) !important; font-size: 10.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; }
    .tb-sum-total { background: #EEE9FC; border-top: 1px solid var(--propia-brand-border); }
    .tb-sum-total .tb-sum-lead { font-size: 11px; }
    .tb-agg { position: relative; }
    .tb-agg-fn { font-size: 9px; font-weight: 800; color: #A78BFA; text-transform: uppercase; letter-spacing: .3px; margin-right: 4px; }
    .tb-agg-val { font-size: 12px; font-weight: 700; color: var(--propia-text-body); }
    .tb-agg-btn { display: inline-flex; align-items: baseline; gap: 4px; background: none; border: 0; cursor: pointer; padding: 2px 5px; border-radius: 6px; font-family: inherit; }
    .tb-agg-btn:hover { background: var(--propia-brand-soft); }
    .tb-agg-menu { position: absolute; top: 100%; left: 0; margin-top: 4px; z-index: 30; background: var(--propia-bg-card); border: 1px solid var(--propia-border-card); border-radius: 8px; box-shadow: 0 8px 24px rgba(16,24,40,.14); padding: 4px; min-width: 132px; }
    .tb-agg-it { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 6px 10px; font-size: 12px; color: var(--propia-text-body); cursor: pointer; border-radius: 6px; font-family: inherit; }
    .tb-agg-it:hover { background: var(--propia-brand-soft); }
    .tb-agg-it.on { color: var(--propia-brand); font-weight: 700; }
    .tb-group-clear { display: inline-flex; align-items: center; gap: 5px; }

    /* Scroll horizontal superior (espejo del de abajo), justo debajo del titulo. */
    .tb-topscroll { overflow-x: auto; overflow-y: hidden; margin-bottom: 7px; height: 14px; border-radius: 8px; }
    .tb-topscroll > div { height: 1px; }
    .tb-topscroll::-webkit-scrollbar { height: 10px; }
    .tb-topscroll::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 8px; }
    .tb-topscroll::-webkit-scrollbar-thumb:hover { background: var(--propia-text-faint); }
    .tb-topscroll::-webkit-scrollbar-track { background: var(--propia-bg-hover); border-radius: 8px; }

    /* Color por columna: boton en el encabezado + paleta pastel. */
    .tb-lc-colorwrap { position: relative; display: inline-flex; align-items: center; margin-left: 5px; }
    .tb-lc-color { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid #CBD5E1; background: transparent; cursor: pointer; padding: 0; opacity: 0; transition: opacity .12s; }
    .tb-lc:hover .tb-lc-color, .tb-lc-color:focus, .tb-lc-colorwrap:hover .tb-lc-color { opacity: 1; }
    .tb-lc-color[style*="transparent"] { border-style: dashed; }
    .tb-colorpop-bd { position: fixed; inset: 0; z-index: 45; }
    .tb-colorpop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 46; display: grid; grid-template-columns: repeat(5, 20px); gap: 6px; padding: 9px; background: var(--propia-bg-card); border: 1px solid var(--propia-border-card); border-radius: 10px; box-shadow: 0 12px 32px rgba(45,62,80,.2); }
    .tb-coloropt { width: 20px; height: 20px; border-radius: 6px; border: 1px solid rgba(0,0,0,.08); cursor: pointer; padding: 0; transition: transform .1s; }
    .tb-coloropt:hover { transform: scale(1.14); }
    .tb-coloropt.on { box-shadow: 0 0 0 2px var(--propia-brand); }
    .tb-coloropt-none { background: var(--propia-bg-card) !important; position: relative; }
    .tb-coloropt-none::after { content: ""; position: absolute; left: 2px; right: 2px; top: 9px; height: 2px; background: #E5484D; transform: rotate(-45deg); }
    .tb-coloropt-custom { overflow: hidden; padding: 0; display: inline-flex; background: conic-gradient(from 0deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
    .tb-coloropt-custom input[type=color] { opacity: 0; width: 100%; height: 100%; border: 0; padding: 0; margin: 0; cursor: pointer; }

    /* Totales por grupo en la vista Tablero (Kanban agrupado). */
    .tb-gsec-tot { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: 10px; }
    .tb-gsec-chip { font-size: 10.5px; color: #6E7A8A; background: var(--propia-border-divider); border-radius: 6px; padding: 2px 8px; }
    .tb-gsec-chip b { color: var(--propia-text-body); }

    /* Totales en el titulo del grupo (vista Lista): chips compactos junto al nombre del grupo. */
    .tb-glt { display: inline-flex; align-items: baseline; gap: 4px; flex-shrink: 0; margin-left: 8px; font-size: 10.5px; font-weight: 600; color: #6E7A8A; background: var(--propia-border-divider); border-radius: 6px; padding: 2px 9px; white-space: nowrap; }
    .tb-glt b { color: var(--propia-text-body); font-weight: 800; }
    .tb-lc-desc { width: 200px; flex-shrink: 0; } .tb-row-desc { width: 200px; flex-shrink: 0; position: relative; }
    .tb-lc-etiq { width: 160px; flex: 0 0 160px; padding-left: 14px; box-sizing: border-box; } .tb-row-etiq { width: 160px; flex: 0 0 160px; padding-left: 14px; box-sizing: border-box; display: flex; gap: 4px; flex-wrap: wrap; align-content: flex-start; }
    .tb-lc-valor { width: 132px; flex-shrink: 0; } .tb-row-valor { width: 132px; flex-shrink: 0; position: relative; font-size: 12px; color: #1E7A50; font-weight: 700; }
    .tb-lc-orig { width: 250px; flex-shrink: 0; } .tb-row-orig { width: 250px; flex-shrink: 0; display: flex; gap: 4px; align-items: center; }
    .tb-orig-tsel { flex: 0 0 84px; font-size: 11px; font-weight: 600; color: var(--propia-text-secondary); border: 1px solid var(--propia-border-card); border-radius: 6px; padding: 4px 5px; outline: none; background: var(--propia-bg-table-head); cursor: pointer; }
    .tb-orig-rsel { flex: 1; min-width: 0; font-size: 11px; font-weight: 600; color: var(--propia-text-body); border: 1px solid var(--propia-border-card); border-radius: 6px; padding: 4px 5px; outline: none; background: var(--propia-bg-card); cursor: pointer; }
    .tb-orig-tsel:focus, .tb-orig-rsel:focus { border-color: var(--propia-brand); }
    /* Selector buscable de origen (reemplaza el datalist tipo tooltip) */
    .sor-wrap { position: relative; flex: 1 1 auto; min-width: 0; }
    .sor-input { width: 100%; box-sizing: border-box; }
    .sor-list { position: absolute; z-index: 60; top: calc(100% + 3px); left: 0; right: 0;
                max-height: 260px; overflow-y: auto; background: var(--propia-bg-card); border: 1px solid var(--propia-border-input);
                border-radius: 8px; box-shadow: 0 10px 28px rgba(20,40,70,.16); padding: 4px; }
    .sor-item { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%;
                text-align: left; border: 0; background: transparent; cursor: pointer;
                padding: 6px 9px; border-radius: 6px; font-family: inherit; }
    .sor-item:hover { background: var(--propia-brand-soft); }
    .sor-item-main { font-size: 12px; font-weight: 700; color: #29384A; }
    .sor-item-sub { font-size: 11px; font-weight: 500; color: var(--propia-text-muted); }
    .sor-more { width: 100%; text-align: center; border: 0; background: var(--propia-bg-card-soft); cursor: pointer;
                padding: 6px; border-radius: 6px; font-size: 11px; font-weight: 700; color: var(--propia-brand);
                margin-top: 2px; font-family: inherit; }
    .sor-more:hover { background: #ECE7FB; }
    .sor-empty { padding: 8px 10px; font-size: 12px; color: #94A7BA; }
    [data-bs-theme="dark"] .sor-list { background: var(--propia-bg-card); border-color: var(--propia-border-card); box-shadow: 0 10px 28px rgba(0,0,0,.5); }
    [data-bs-theme="dark"] .sor-item:hover { background: #2A2350; }
    [data-bs-theme="dark"] .sor-item-main { color: #E5E9F0; }
    [data-bs-theme="dark"] .sor-item-sub { color: #94A7BA; }
    [data-bs-theme="dark"] .sor-more { background: var(--propia-bg-card); color: #B9A9F0; }
    .tb-composer-orig { display: flex; flex-direction: column; gap: 6px; }
    /* Columna de acciones NO fija (va al final de la fila, con el scroll). */
    .tb-lc-acc { width: 92px; flex-shrink: 0; text-align: right; }
    /* El "+" de crear campo va CENTRADO en su celda del header, igual que Unidades Privadas (tbl-addcol). */
    .tb-list-hdr > .tb-lc-acc { justify-content: center; }
    .tb-row-acc { width: 92px; flex-shrink: 0; display: flex; gap: 4px; justify-content: flex-end; opacity: 0; transition: opacity .12s; }
    .tb-row:hover .tb-row-acc { opacity: 1; }
    .tb-row-cell-est { width: 130px; flex-shrink: 0; }
    .tb-row-cell-est .tb-est-sel { width: 100%; }
    .tb-row-due, .tb-row-campo { position: relative; }
    .tb-editable { cursor: text; border-radius: 6px; padding: 3px 6px; min-height: 22px; border: 1px solid transparent; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .tb-editable:hover { background: var(--propia-brand-soft-2); border-color: #E1DAF7; }
    .tb-row-desc-prev { color: var(--propia-text-muted); font-size: 12px; }
    .tb-cell-inp, .tb-cell-area { width: 100%; border: 1px solid var(--propia-brand); border-radius: 6px; padding: 4px 7px; font-size: 12.5px; color: var(--propia-text-body); outline: none; box-shadow: 0 0 0 2px rgba(109,79,227,.12); box-sizing: border-box; font-family: inherit; }
    /* position:fixed anclado al clic (no absolute): el contenedor con scroll de la tabla (.tb-list overflow:auto
       + .tb-listbox overflow:hidden) recortaba este editor cuando se abria en la ultima/unica fila. Mismo patron
       que .tb-etqpop; las coords (left/top) las fija el markup con _edPopX/_edPopY. */
    .tb-cell-area { position: fixed; z-index: 1120; width: 340px; min-width: 0; min-height: 74px; background: var(--propia-bg-card); box-shadow: 0 16px 40px rgba(27,42,58,.22); resize: vertical; }
    .tb-row-open { width: 22px; height: 22px; flex-shrink: 0; border-radius: 5px; display: flex; align-items: center; justify-content: center; color: var(--propia-text-muted); background: transparent; border: 0; cursor: pointer; opacity: 1; }
    .tb-row:hover .tb-row-open { color: var(--propia-brand); }
    .tb-row-open:hover { background: var(--propia-border-divider); color: var(--propia-brand); }
    .tb-prio-sel { width: 100%; font-size: 11px; font-weight: 700; border: 0; border-radius: 7px; padding: 3px 7px; outline: none; cursor: pointer; }
    .tb-acc-btn { width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: var(--propia-text-muted); background: transparent; border: 1px solid var(--propia-border-card); cursor: pointer; }
    .tb-acc-btn:hover { background: var(--propia-brand-soft-2); color: var(--propia-brand); border-color: #B9AEF3; }
    .tb-acc-del:hover { background: var(--propia-danger-soft); color: #D7263D; border-color: #F2CFC9; }
    .tb-row-resp { display: flex; align-items: center; gap: 3px; position: relative; }
    .tb-row-resp-empty { color: var(--propia-text-faint); font-style: italic; }
    .tb-ava-more { font-size: 10px; font-weight: 700; color: var(--propia-text-muted); }
    /* Asignado: pildora con avatar + nombre (el circulo solo no se entendia). El avatar va sin borde para
       quedar a ras del fondo de la pildora; el nombre se trunca con elipsis. */
    .tb-asig-pill { display: inline-flex; align-items: center; gap: 6px; max-width: 170px; background: var(--propia-brand-soft-2); border: 1px solid var(--propia-border-input); border-radius: 999px; padding: 2px 10px 2px 2px; }
    .tb-asig-pill .tb-ava { border: 0; }
    .tb-asig-pill-nom { font-size: 12px; font-weight: 600; color: var(--propia-text-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .tb-asig-more { font-size: 11px; font-weight: 700; color: var(--propia-text-secondary); background: var(--propia-border-divider); border-radius: 999px; padding: 2px 7px; }
    /* position:fixed anclado al clic: igual que .tb-cell-area, para que el contenedor con scroll no lo recorte
       cuando el asignado se abre en una fila baja. Coords via _asigX/_asigY en el markup. */
    .tb-asig-drop { position: fixed; z-index: 1120; width: 235px; background: var(--propia-bg-card); border: 1px solid var(--propia-border-card); border-radius: 10px; box-shadow: 0 16px 40px rgba(27,42,58,.22); padding: 5px; max-height: 270px; overflow-y: auto; }
    .tb-asig-item { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: var(--propia-bg-card); border-radius: 7px; padding: 6px 8px; cursor: pointer; font-size: 12.5px; color: var(--propia-text-body); text-align: left; }
    .tb-asig-item:hover { background: var(--propia-brand-soft-2); }
    .tb-asig-item.on { background: var(--propia-brand-soft); }
    .tb-asig-chk { width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid var(--propia-text-faint); flex-shrink: 0; }
    .tb-asig-chk.on { background: var(--propia-brand); border-color: var(--propia-brand); box-shadow: inset 0 0 0 2px var(--propia-bg-card); }
    .tb-asig-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .tb-asig-close { width: 100%; margin-top: 4px; border: 0; background: var(--propia-text-body); color: var(--propia-text-inverse); border-radius: 7px; padding: 6px; font-size: 12px; font-weight: 700; cursor: pointer; }
    /* Mismo borde izquierdo que .tb-row (padding-left 0 + border-left 3px transparente) para que la fila de
       alta/ayuda alinee con las filas de datos y no sobresalga ~15px a la derecha. */
    .tb-newrow { display: flex; align-items: center; gap: 12px; padding: 5px 18px 5px 0; border-bottom: 1px solid var(--propia-border-divider); border-left: 3px solid transparent; background: var(--propia-brand-soft-2); }
    /* La fila de ayuda ("Tab o clic fuera...") ahora renderiza las MISMAS celdas de columna (vacias) que la
       fila de alta, asi que mide lo mismo que las filas de datos (ancho completo) y su banda violeta cubre toda
       la tabla sin blanco al scrollear. El texto de la ayuda vive en la celda de titulo y puede desbordar a la
       celda vecina (vacia) sin recortarse. */
    .tbl-nf-hintrow .tb-row-tit { overflow: visible; }
    .tbl-nf-hintrow .tbl-nf-hint-txt { white-space: nowrap; }
    /* Homogeneidad con Unidades (opcion B): en la FILA DE ALTA la columna de titulo fija (.tb-pin) NO usa
       el fondo blanco de las filas de datos ni su sombra, sino el mismo tinte violeta de la banda de alta,
       para que el input de titulo no resalte como una "caja blanca" y quede plano como en Unidades. */
    .tb-newrow--alta .tb-pin { background: var(--propia-brand-soft-2); box-shadow: none; }
    /* CTA de alta canon (.row-add--sm) al pie de la vista tabla: ocupa el ancho del cuerpo, a la izquierda. */
    .tb-nf-ctacell { flex: 1; display: flex; align-items: center; }
    .tb-cta-row { cursor: default; }
    .tb-nf-inp { width: 100%; box-sizing: border-box; border: 1px solid transparent; border-radius: 8px; padding: 10px 12px; font-size: 13px; color: var(--propia-text-body); outline: none; background: transparent; font-family: inherit; transition: border-color .12s, box-shadow .12s; }
    .tb-nf-inp:focus { border: 1.5px solid var(--propia-brand); box-shadow: 0 0 0 3px rgba(109,79,227,.14); }
    .tb-nf-tit { flex: 1; min-width: 0; }
    .tb-nf-mut { color: var(--propia-text-faint); font-size: 12px; }
    /* Ola C-2: campos dinamicos editables en el alta (inputs compactos + checkbox centrado). */
    .tb-row-campo .tb-nf-inp { padding: 6px 8px; font-size: 12.5px; }
    .tb-nf-chk { display: flex; align-items: center; justify-content: center; height: 100%; }
    .tb-nf-chk input { width: 15px; height: 15px; accent-color: var(--propia-brand); cursor: pointer; }
    /* Ola C-3: Origen editable en el alta: tipo + referencia apilados en la celda. */
    .tb-orig-cell { display: flex; flex-direction: column; gap: 3px; justify-content: center; }
    .tb-orig-cell .tb-nf-inp { padding: 6px 8px; font-size: 12.5px; }
    /* Boton de alta estandar "+ Agregar" (estilo zc-row-add, violeta suave) al final de la fila. */
    .tb-nf-acts { width: 92px; min-width: 92px; flex: 0 0 92px; justify-content: flex-end; opacity: 1; }
    .tb-nf-acts > * { opacity: 1; }  /* el "+ Agregar" de la alta siempre visible (no hover) */
    .tb-nf-crear { 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; white-space: nowrap; }
    .tb-nf-crear:hover:not(:disabled) { background: var(--propia-brand-soft); }
    .tb-nf-crear:disabled { opacity: .5; cursor: default; }
    /* Acciones de la fila de alta: crear + expander "crear y abrir" (estilo Airtable). */
    .tb-nf-acts { display: flex; gap: 4px; align-items: center; }
    .tb-nf-abrir { background: var(--propia-brand-soft); color: var(--propia-brand); }
    .tb-nf-abrir:hover { background: var(--propia-brand-soft); }
    .tb-nf-abrir:disabled { background: #F0F3F8; color: #C3CEDA; }
    /* Compositor rapido en tarjetas (kanban) */
    .tb-composer { background: var(--propia-bg-card); border: 1.5px solid var(--propia-brand); border-radius: 11px; padding: 9px; box-shadow: 0 4px 14px rgba(109,79,227,.15); display: flex; flex-direction: column; gap: 7px; }
    .tb-composer-inp { width: 100%; border: 0; outline: none; font-size: 13px; color: var(--propia-text-body); font-weight: 600; background: transparent; box-sizing: border-box; }
    .tb-composer-sub, .tb-composer-sel { width: 100%; box-sizing: border-box; border: 1px solid var(--propia-border-card); border-radius: 7px; padding: 6px 9px; font-size: 12.5px; color: var(--propia-text-body); outline: none; background: var(--propia-bg-table-head); font-family: inherit; }
    .tb-composer-sub:focus, .tb-composer-sel:focus { border-color: var(--propia-brand); background: var(--propia-bg-card); box-shadow: 0 0 0 2px rgba(109,79,227,.12); }
    .tb-composer-appear { animation: tbComposerIn .18s ease; }
    @keyframes tbComposerIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
    .tb-composer-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 1px; }
    .tb-composer-hint { font-size: 10px; color: var(--propia-text-faint); }
    .tb-composer-btn { border: 0; background: var(--propia-brand); color: var(--propia-text-inverse); border-radius: 7px; padding: 5px 12px; font-size: 11.5px; font-weight: 700; cursor: pointer; }
    .tb-composer-btn:disabled { opacity: .5; cursor: default; }

    .tb-soon { background: var(--propia-bg-card); border: 1.5px dashed var(--propia-border-input); border-radius: 16px; padding: 50px 24px; text-align: center; }
    .tb-soon-ic { width: 60px; height: 60px; border-radius: 16px; background: var(--propia-brand-soft); color: var(--propia-brand); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
    .tb-soon-t { font-size: 17px; font-weight: 800; color: var(--propia-text-h1); }
    .tb-soon-s { font-size: 13px; color: var(--propia-text-muted); margin-top: 5px; max-width: 440px; margin-left: auto; margin-right: auto; }

    .tb-modal-bd { position: fixed; inset: 0; z-index: 1090; background: rgba(27,42,58,.55); display: flex; align-items: flex-start; justify-content: center; padding: 32px 20px; overflow-y: auto; }
    .tb-modal { width: 540px; max-width: 100%; background: var(--propia-bg-card); border-radius: 18px; box-shadow: 0 30px 70px rgba(27,42,58,.4); margin: auto; overflow: hidden; }
    .tb-modal-head { display: flex; align-items: center; gap: 12px; padding: 18px 24px; border-bottom: 1px solid var(--propia-border-divider); }
    .tb-modal-tt { flex: 1; }
    .tb-modal-h { font-size: 16.5px; font-weight: 800; letter-spacing: -.3px; color: var(--propia-text-h1); }
    .tb-modal-s { font-size: 12px; color: var(--propia-text-muted); }
    .tb-modal-x { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: var(--propia-text-muted); border: 1px solid var(--propia-border-card); background: var(--propia-bg-card); cursor: pointer; }
    .tb-modal-body { padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; }
    .tb-modal-foot { display: flex; align-items: center; gap: 9px; padding: 16px 24px; border-top: 1px solid var(--propia-border-divider); }
    .tb-fld { display: flex; flex-direction: column; }
    .tb-fld label { font-size: 11px; color: var(--propia-text-muted); font-weight: 700; margin-bottom: 5px; }
    .tb-fld input, .tb-fld select, .tb-fld textarea { width: 100%; border: 1px solid var(--propia-border-card); border-radius: 9px; padding: 10px 12px; font-size: 13.5px; color: var(--propia-text-body); outline: none; background: var(--propia-bg-card); box-sizing: border-box; }
    .tb-fld input:focus, .tb-fld select:focus, .tb-fld textarea:focus { border-color: var(--propia-brand); }
    .tb-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .tb-colors { display: flex; gap: 8px; flex-wrap: wrap; }
    .tb-color { width: 30px; height: 30px; border-radius: 8px; border: 3px solid transparent; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.1); }
    .tb-color.on { border-color: var(--propia-text-h1); }
    .tb-userlist { display: flex; flex-direction: column; gap: 7px; max-height: 230px; overflow-y: auto; }
    .tb-user { display: flex; align-items: center; gap: 11px; text-align: left; border: 1px solid var(--propia-border-card); background: var(--propia-bg-card); border-radius: 10px; padding: 9px 12px; cursor: pointer; }
    .tb-user.on { border-color: var(--propia-brand); background: var(--propia-brand-soft-2); }
    .tb-user .tb-ava { margin-right: 0; }
    .tb-user-nom { flex: 1; font-size: 13px; font-weight: 600; color: var(--propia-text-body); }
    /* Buscador de miembros con autocompletado (reemplaza la lista de checkboxes) */
    .tb-userpick { display: flex; flex-direction: column; gap: 9px; }
    .tb-chips { display: flex; flex-wrap: wrap; gap: 7px; }
    .tb-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--propia-brand-soft-2); border: 1px solid var(--propia-brand-border); border-radius: 20px; padding: 3px 8px 3px 4px; font-size: 12.5px; font-weight: 600; color: var(--propia-text-body); }
    .tb-chip-ava { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; border: 2px solid var(--propia-bg-card); flex-shrink: 0; }
    .tb-ava-sm { width: 24px; height: 24px; font-size: 9px; margin-right: 0; }
    .tb-chip-nom { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .tb-chip-x { border: none; background: transparent; color: #8B7BD8; font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px; }
    .tb-search-wrap { position: relative; }
    .tb-search-drop { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20; background: var(--propia-bg-card); border: 1px solid var(--propia-border-card); border-radius: 10px; box-shadow: 0 8px 24px rgba(45,62,80,.14); max-height: 240px; overflow-y: auto; padding: 4px; }
    .tb-search-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: none; background: var(--propia-bg-card); border-radius: 8px; padding: 7px 9px; cursor: pointer; }
    .tb-search-item:hover { background: var(--propia-brand-soft-2); }
    .tb-search-nom { flex: 1; font-size: 13px; font-weight: 600; color: var(--propia-text-body); }
    .tb-search-doc { font-size: 11.5px; color: var(--propia-text-muted); }
    .tb-search-empty { padding: 9px 11px; font-size: 12.5px; color: var(--propia-text-muted); font-style: italic; }
    .tb-note { font-size: 11.5px; color: #7C5CE8; background: var(--propia-brand-soft-2); border: 1px dashed var(--propia-brand-border); border-radius: 9px; padding: 9px 11px; }
    .tb-invite { border-top: 1px dashed var(--propia-border-card); padding-top: 14px; }
    .tb-invite-hint { font-size: 11.5px; color: var(--propia-text-muted); margin: -3px 0 8px; }
    .tb-invite-grid { display: grid; grid-template-columns: 1.3fr 1fr .8fr auto; gap: 8px; align-items: center; }
    .tb-invite-grid .tb-input { min-width: 0; }
    .tb-invite-msg { margin-top: 9px; font-size: 12.5px; font-weight: 600; border-radius: 9px; padding: 8px 11px; }
    .tb-invite-msg.ok { color: #1E7A50; background: #EAF7F0; border: 1px solid #C6EAD6; }
    .tb-invite-msg.err { color: #B4453B; background: #FCEEEC; border: 1px solid #F2CFC9; }
    .tb-invite-link { display: flex; gap: 8px; align-items: center; margin-top: 9px; }
    .tb-invite-link .tb-input { flex: 1; font-size: 12px; color: #5A6B7B; background: #F7FAFC; }
    @media (max-width: 620px) { .tb-invite-grid { grid-template-columns: 1fr 1fr; } }

    /* ===== Modal de tarjeta rico (3 columnas) ===== */
    /* Alto FIJO para que el modal no cambie de tamano al alternar entre las pestanas Detalle y Archivos. */
    /* Frame milimetrico a la maqueta (Ola D): 1056 / 86vh / radio 12, ALTURA FIJA. */
    .tbc-modal { width: 1056px; max-width: 96vw; height: 86vh; background: var(--propia-bg-card); border: 1px solid var(--propia-border-card); border-radius: 12px; box-shadow: var(--propia-shadow-modal); margin: auto; overflow: hidden; display: flex; flex-direction: column; max-height: min(86vh, 880px); }
    /* Modal apilado: al abrir una subtarea sobre el modal del padre, el padre queda como tarjeta
       "fantasma" atenuada y en diagonal detras (arriba-izquierda); la subtarea manda en primer plano
       (abajo-derecha). Asi se ven las dos y no se pierde el contexto de jerarquia. */
    .tb-modal-bd.tbc-stacked .tbc-modal-front,
    .tb-modal-bd.tbc-stacked .tbc-modal-fondo { position: absolute; left: 50%; top: 50%; margin: 0; }
    .tb-modal-bd.tbc-stacked .tbc-modal-front { transform: translate(-50%, -50%) translate(22px, 16px); z-index: 1; }
    .tb-modal-bd.tbc-stacked .tbc-modal-fondo { transform: translate(-50%, -50%) translate(-22px, -16px) scale(.985); transform-origin: center; z-index: 0; opacity: .5; filter: grayscale(.35); pointer-events: none; }
    .tbc-padre-pill { display: inline-flex; align-items: center; font-size: 9.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--propia-brand); background: var(--propia-brand-soft); padding: 3px 8px; border-radius: 6px; }
    /* Cabecera BLANCA (milimetrico a la maqueta): breadcrumb arriba + titulo oscuro debajo; sin barra de color. */
    .tbc-head { display: flex; align-items: flex-start; gap: 12px; padding: 15px 18px; flex-shrink: 0; background: var(--propia-bg-card); border-bottom: 1px solid var(--propia-border-divider); }
    .tbc-head-id { flex: 1; min-width: 0; }
    .tbc-head-bc { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--propia-text-muted); margin-bottom: 3px; }
    .tbc-head-bc svg { flex-shrink: 0; }
    .tbc-head-tt { font-size: 17px; font-weight: 800; letter-spacing: -.2px; color: var(--propia-text-h1); display: flex; align-items: center; gap: 9px; }
    .tbc-proy { display: inline-flex; align-items: center; gap: 5px; font-size: 9.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--propia-brand); background: var(--propia-brand-soft); padding: 3px 8px; border-radius: 6px; }
    .tbc-sep { opacity: .7; }
    .tbc-bold { font-weight: 800; }
    .tbc-head-btn { display: flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 8px; border: 1px solid var(--propia-border-card); background: var(--propia-bg-card); font-size: 12px; font-weight: 700; color: var(--propia-text-secondary); cursor: pointer; flex-shrink: 0; }
    .tbc-head-btn:hover { background: var(--propia-bg-hover); border-color: var(--propia-brand); color: var(--propia-brand); }
    .tbc-head-x { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--propia-text-muted); border: 0; background: transparent; cursor: pointer; flex-shrink: 0; }
    .tbc-head-x:hover { background: var(--propia-bg-hover); color: var(--propia-text-body); }

    /* El cuerpo ya no scrollea como un todo: cada columna hace su propio scroll (independiente),
       asi el contenido largo de la izquierda no arrastra ni rompe el layout de las demas. */
    /* .tbc-body = contenedor del contenido de la pestana (flex). La pestana Detalle mete un .tbc-detail
       (grid 2 col); las demas pestanas (Sub-tareas) meten una sola columna a ancho completo. */
    .tbc-body { flex: 1; min-height: 0; overflow: hidden; display: flex; }
    .tbc-detail { flex: 1; min-width: 0; min-height: 0; display: grid; grid-template-columns: 1.55fr 1fr; }
    .tbc-col { flex: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; box-sizing: border-box; padding: 16px 18px; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--propia-text-faint) transparent; }
    .tbc-detail > .tbc-col { flex: initial; }
    .tbc-col::-webkit-scrollbar { width: 7px; }
    .tbc-col::-webkit-scrollbar-track { background: transparent; }
    .tbc-col::-webkit-scrollbar-thumb { background: var(--propia-text-faint); border-radius: 4px; }
    .tbc-col::-webkit-scrollbar-thumb:hover { background: var(--propia-text-faint); }
    .tbc-col-act { border-left: 1px solid var(--propia-border-card); background: var(--propia-bg-card-soft); padding: 3px 12px; gap: 10px; overflow: hidden; }
    .tbc-fld { display: flex; flex-direction: column; }
    .tbc-fld > label, .tbc-lbl { font-size: 11px; color: var(--propia-text-muted); font-weight: 700; margin-bottom: 6px; }
    .tbc-mut { color: var(--propia-text-faint); font-weight: 600; }
    .tbc-fld input, .tbc-fld select, .tbc-fld textarea { width: 100%; border: 1px solid var(--propia-border-card); border-radius: 9px; padding: 9px 11px; font-size: 12.5px; color: var(--propia-text-body); outline: none; background: var(--propia-bg-card); box-sizing: border-box; font-family: inherit; }
    .tbc-fld textarea { line-height: 1.5; resize: vertical; }
    .tbc-fld input:focus, .tbc-fld select:focus, .tbc-fld textarea:focus { border-color: var(--propia-brand); }
    .tbc-grow { flex: 1; min-width: 140px; }
    .tbc-w80 { width: 84px; flex-shrink: 0; }
    .tbc-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    /* Inicio + Hora + Fin + Hora (se conserva la hora; layout de la maqueta) */
    .tbc-row4 { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 8px; align-items: end; }
    .tbc-row4 .tbc-w80 { width: 78px; }
    /* Subtitulo de seccion (Origen de la tarea / Campos personalizados) */
    .tbc-sec-lbl { font-size: 10.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--propia-text-faint); margin-top: 4px; }
    /* Valor (COP) con prefijo $ */
    .tbc-money { position: relative; }
    .tbc-money-sym { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-size: 13px; font-weight: 700; color: var(--propia-text-muted); pointer-events: none; }
    .tbc-money input { padding-left: 23px; }
    /* Campos personalizados: pill de tipo + nota (se muestran/diligencian; NO se crean desde el modal) */
    .tbc-cf-tag { font-size: 9px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; color: var(--propia-brand); background: var(--propia-brand-soft); border-radius: 5px; padding: 1px 6px; margin-left: 6px; vertical-align: middle; }
    .tbc-cf-note { font-size: 11.5px; color: var(--propia-text-faint); margin-top: 8px; line-height: 1.4; }

    .tbc-origen { background: var(--propia-brand-soft-2); border: 1px solid var(--propia-brand-border); border-radius: 11px; padding: 13px 14px; display: flex; flex-direction: column; gap: 11px; }
    .tbc-origen-h { font-size: 10.5px; letter-spacing: .4px; color: var(--propia-brand); font-weight: 800; }
    .tbc-origen-row { display: flex; gap: 10px; flex-wrap: wrap; }
    .tbc-origen-sel { color: var(--propia-brand-hover) !important; font-weight: 600; border-color: var(--propia-brand-border) !important; }

    .tbc-sublist { display: flex; flex-direction: column; gap: 6px; }
    .tbc-sub { display: flex; align-items: center; gap: 9px; border: 1px solid var(--propia-border-card); border-radius: 9px; padding: 8px 11px; background: var(--propia-bg-card-soft); }
    .tbc-chk { width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--propia-text-faint); background: var(--propia-bg-card); display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; padding: 0; }
    .tbc-chk.on { border-color: #1A8754; background: #1A8754; }
    .tbc-sub-t { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--propia-text-body); }
    .tbc-sub-t.done { color: var(--propia-text-faint); text-decoration: line-through; }
    .tbc-sub-x { width: 24px; height: 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--propia-text-faint); flex-shrink: 0; border: 0; background: transparent; cursor: pointer; }
    .tbc-sub-x:hover { background: var(--propia-danger-soft); color: #D7263D; }
    .tbc-subtask { cursor: pointer; }
    .tbc-subtask:hover { border-color: #B9AEF3; background: var(--propia-brand-soft-2); }
    .tbc-sub-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
    .tbc-sub-est { font-size: 10.5px; font-weight: 700; color: var(--propia-text-muted); background: var(--propia-border-divider); border-radius: 20px; padding: 2px 8px; flex-shrink: 0; }
    .tbc-sub-add { display: flex; gap: 7px; }
    .tbc-sub-add input { flex: 1; min-width: 0; border: 1px solid var(--propia-border-card); border-radius: 8px; padding: 8px 11px; font-size: 12.5px; color: var(--propia-text-body); outline: none; background: var(--propia-bg-card); box-sizing: border-box; }
    .tbc-sub-add input:focus { border-color: var(--propia-brand); }
    .tbc-add-btn { display: flex; align-items: center; gap: 5px; padding: 8px 13px; border-radius: 8px; border: 1px solid var(--propia-brand-border); background: var(--propia-brand-soft); color: var(--propia-brand); font-size: 12px; font-weight: 700; flex-shrink: 0; cursor: pointer; }
    .tbc-add-btn:hover { background: #E6DEFA; }
    .tbc-sub-newbar { margin-top: 12px; display: flex; justify-content: flex-start; }

    .tbc-estados { display: flex; flex-direction: column; gap: 5px; }
    .tbc-est { text-align: left; font-size: 12px; font-weight: 700; padding: 8px 11px; border-radius: 8px; border: 1px solid var(--propia-border-card); color: var(--propia-text-secondary); background: var(--propia-bg-card); cursor: pointer; }
    .tbc-est:hover { border-color: var(--propia-brand); }
    .tbc-est.on { border-color: var(--propia-brand); color: var(--propia-text-inverse); background: var(--propia-brand); }
    .tbc-prios { display: flex; gap: 5px; }
    .tbc-prio2 { flex: 1; font-size: 11.5px; font-weight: 700; padding: 8px 4px; border-radius: 8px; border: 1px solid var(--propia-border-card); color: var(--propia-text-secondary); background: var(--propia-bg-card); cursor: pointer; }
    .tbc-prio2:hover { border-color: var(--propia-brand); }
    .tbc-prio2.on { border-color: var(--propia-brand); color: var(--propia-text-inverse); background: var(--propia-brand); }

    /* Progreso en el modal */
    .tbc-prog-edit, .tbc-prog-ro { display: flex; align-items: center; gap: 10px; }
    .tbc-prog-edit input[type=range] { flex: 1; }
    .tbc-prog-v { font-size: 12.5px; font-weight: 700; width: 42px; text-align: right; }

    /* Etiquetas (tags) en el modal */
    .tbc-tags { display: flex; flex-wrap: wrap; gap: 6px; }
    .tbc-tag { font-size: 11.5px; font-weight: 700; padding: 4px 11px; border-radius: 20px; border: 1px solid var(--propia-border-card); color: var(--propia-text-secondary); background: var(--propia-bg-card); cursor: pointer; }
    .tbc-tag:hover { border-color: var(--propia-brand); }
    .tbc-tag.on { color: var(--propia-text-inverse); }
    .tbc-tag-add { display: flex; gap: 6px; margin-top: 8px; }
    .tbc-tag-add input { flex: 1; border: 1px solid var(--propia-border-card); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; color: var(--propia-text-body); outline: none; }
    .tbc-tag-add input:focus { border-color: var(--propia-brand); }

    .tbc-resps { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 7px; }
    .tbc-resp { display: flex; align-items: center; gap: 6px; background: var(--propia-bg-app); border: 1px solid var(--propia-border-card); border-radius: 20px; padding: 3px 9px 3px 3px; }
    .tbc-resp .tb-ava { width: 24px; height: 24px; font-size: 10px; border: 0; }
    .tbc-resp-nm { font-size: 11.5px; font-weight: 600; color: var(--propia-text-body); }
    .tbc-resp-x { display: flex; color: var(--propia-text-faint); border: 0; background: transparent; cursor: pointer; padding: 0; }
    .tbc-resp-x:hover { color: #D7263D; }
    .tbc-resp-add { display: flex; gap: 6px; }
    /* Solicitante (persona del directorio) */
    .tbc-solic { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
    .tbc-solic .tb-ava, .tbc-solic-ava { width: 26px; height: 26px; font-size: 10px; border: 0; margin: 0; }
    .tbc-solic-nm { font-size: 12.5px; font-weight: 700; color: var(--propia-text-body); }
    .tbc-solic-sel { display: block; }
    .tbc-solic-hint { font-size: 11.5px; color: var(--propia-text-faint); margin-bottom: 7px; }
    .tbc-resp-add select { flex: 1; min-width: 0; border: 1px solid var(--propia-border-card); border-radius: 9px; padding: 8px 11px; font-size: 12.5px; color: var(--propia-text-body); outline: none; background: var(--propia-bg-card); box-sizing: border-box; }
    .tbc-resp-add select:focus { border-color: var(--propia-brand); }
    .tbc-add-sq { width: 34px; flex-shrink: 0; border-radius: 9px; background: var(--propia-brand); color: var(--propia-text-inverse); display: flex; align-items: center; justify-content: center; border: 0; cursor: pointer; }
    .tbc-add-sq:hover { background: var(--propia-brand-hover); }

    .tbc-log { display: flex; flex-direction: column; }
    .tbc-log-i { display: flex; gap: 9px; padding-bottom: 10px; }
    .tbc-log-rail { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
    .tbc-log-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--propia-brand); margin-top: 3px; }
    .tbc-log-line { width: 2px; flex: 1; background: var(--propia-border-divider); margin-top: 2px; }
    .tbc-log-t { font-size: 11.5px; font-weight: 600; color: var(--propia-text-body); line-height: 1.4; }
    .tbc-log-d { font-size: 10px; color: var(--propia-text-faint); }

    .tbc-adjs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .tbc-adj { position: relative; border: 1px solid var(--propia-border-card); border-radius: 10px; overflow: hidden; background: var(--propia-bg-card); }
    .tbc-adj-th { aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg,var(--propia-brand-soft-2),#E6DEFA); color: var(--propia-brand); }
    .tbc-adj-th img { width: 100%; height: 100%; object-fit: cover; }
    .tbc-adj-nm { padding: 6px 8px; font-size: 10px; font-weight: 600; color: var(--propia-text-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .tbc-adj-x { position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--propia-text-inverse); background: rgba(27,42,58,.55); border: 0; cursor: pointer; }
    .tbc-adj-x:hover { background: #D7263D; }
    .tbc-adj-up { aspect-ratio: 1/1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 1px dashed var(--propia-border-input); border-radius: 10px; cursor: pointer; font-size: 10.5px; font-weight: 700; color: var(--propia-brand); background: var(--propia-brand-soft-2); text-align: center; }
    .tbc-adj-up:hover { border-color: var(--propia-brand); background: var(--propia-brand-soft-2); }
    .tbc-adj-up-t { font-size: 10px; }
    .tbc-adj-hint { grid-column: 1 / -1; font-size: 11px; color: var(--propia-text-faint); background: var(--propia-bg-app); border: 1px dashed var(--propia-border-input); border-radius: 10px; padding: 11px; text-align: center; line-height: 1.4; }

    .tbc-foot { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--propia-border-card); flex-shrink: 0; }
    .tbc-foot .tbc-spacer { flex: 1; }

    /* ===== Pestanas del modal de tarjeta ===== */
    .tbc-tabs { display: flex; align-items: center; gap: 2px; padding: 0 16px; border-bottom: 1px solid var(--propia-border-card); flex-shrink: 0; }
    .tbc-tab { display: inline-flex; align-items: center; gap: 6px; padding: 12px 14px; border: 0; background: transparent; font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--propia-text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
    .tbc-tab:hover { color: var(--propia-brand); }
    .tbc-tab.on { color: var(--propia-brand); border-bottom-color: var(--propia-brand); }
    .tbc-tab-badge { font-size: 10px; font-weight: 800; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; background: var(--propia-brand-soft); color: var(--propia-brand); display: inline-flex; align-items: center; justify-content: center; }
    .tbc-tab.on .tbc-tab-badge { background: var(--propia-brand); color: var(--propia-text-inverse); }

    /* ===== Pestana Archivos: miniaturas + visor grande ===== */
    .tbc-files { flex: 1; min-height: 0; padding: 16px 22px; display: flex; gap: 16px; }
    .tbc-files-hint { flex: 1; align-self: center; text-align: center; font-size: 12.5px; color: var(--propia-text-faint); background: var(--propia-bg-app); border: 1px dashed var(--propia-border-input); border-radius: 10px; padding: 22px; }
    .tbc-thumbs { width: 216px; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; padding-right: 3px; }
    .tbc-thumb { position: relative; display: flex; align-items: center; gap: 9px; border: 1px solid var(--propia-border-card); border-radius: 10px; padding: 7px 9px; background: var(--propia-bg-card); cursor: pointer; }
    .tbc-thumb:hover { border-color: #B9AEF3; background: var(--propia-brand-soft-2); }
    .tbc-thumb.on { border-color: var(--propia-brand); background: var(--propia-brand-soft-2); box-shadow: 0 0 0 1px var(--propia-brand); }
    .tbc-thumb-ic { width: 44px; height: 44px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg,var(--propia-brand-soft-2),#E6DEFA); color: var(--propia-brand); overflow: hidden; }
    .tbc-thumb-ic img { width: 100%; height: 100%; object-fit: cover; }
    .tbc-thumb-nm { flex: 1; min-width: 0; font-size: 11.5px; font-weight: 600; color: var(--propia-text-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .tbc-thumb-x { width: 24px; height: 24px; flex-shrink: 0; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--propia-text-faint); border: 0; background: transparent; cursor: pointer; }
    .tbc-thumb-x:hover { background: var(--propia-danger-soft); color: #D7263D; }
    .tbc-thumb-up { display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px dashed var(--propia-border-input); border-radius: 10px; padding: 12px; cursor: pointer; font-size: 11.5px; font-weight: 700; color: var(--propia-brand); background: var(--propia-brand-soft-2); flex-shrink: 0; }
    .tbc-thumb-up:hover { border-color: var(--propia-brand); background: var(--propia-brand-soft-2); }
    .tbc-thumb-up-t { font-size: 11.5px; }
    .tbc-viewer { flex: 1; min-width: 0; border: 1px solid var(--propia-border-card); border-radius: 12px; background: var(--propia-bg-hover); display: flex; flex-direction: column; overflow: hidden; }
    .tbc-viewer-imgwrap { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 14px; background: var(--propia-bg-hover); overflow: auto; }
    .tbc-viewer-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; box-shadow: 0 4px 16px rgba(27,42,58,.15); }
    .tbc-viewer-pdfwrap { flex: 1; min-height: 460px; display: flex; background: #525659; }
    .tbc-viewer-pdf { flex: 1; width: 100%; height: 100%; min-height: 460px; border: 0; }
    .tbc-viewer-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--propia-border-divider); background: var(--propia-bg-card); }
    .tbc-viewer-nm { font-size: 12px; font-weight: 700; color: var(--propia-text-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .tbc-viewer-open { font-size: 11.5px; font-weight: 700; color: var(--propia-brand); text-decoration: none; border: 1px solid var(--propia-brand-border); border-radius: 8px; padding: 6px 13px; background: var(--propia-brand-soft); flex-shrink: 0; }
    .tbc-viewer-open:hover { background: #E6DEFA; }
    .tbc-viewer-empty, .tbc-viewer-file { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; color: var(--propia-text-faint); text-align: center; padding: 24px; }
    .tbc-viewer-empty p, .tbc-viewer-file p { font-size: 13.5px; font-weight: 700; color: var(--propia-text-secondary); margin: 0; max-width: 320px; word-break: break-word; }
    .tbc-viewer-empty span { font-size: 11.5px; color: var(--propia-text-faint); max-width: 300px; }
    .tbc-viewer-file { color: var(--propia-brand); }

    /* ===== Pestana Actividad: reportar + comentarios + historial ===== */
    .tbc-activity { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 22px; display: flex; flex-direction: column; gap: 16px; }
    .tbc-act-report { display: flex; flex-direction: column; gap: 8px; }
    .tbc-act-input { width: 100%; box-sizing: border-box; border: 1px solid var(--propia-border-card); border-radius: 9px; padding: 10px 12px; font-size: 12.5px; color: var(--propia-text-body); outline: none; resize: vertical; font-family: inherit; line-height: 1.5; }
    .tbc-act-input:focus { border-color: var(--propia-brand); }
    .tbc-act-actions { display: flex; align-items: center; gap: 9px; }
    .tbc-act-cols { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px 20px; align-items: start; }
    .tbc-act-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
    .tbc-act-empty { font-size: 12px; color: var(--propia-text-faint); font-style: italic; background: var(--propia-bg-app); border: 1px dashed var(--propia-border-card); border-radius: 9px; padding: 12px; text-align: center; }
    .tbc-cmts { display: flex; flex-direction: column; gap: 10px; }
    .tbc-cmt { display: flex; gap: 10px; }
    .tbc-cmt-ava { width: 30px; height: 30px; font-size: 11px; flex-shrink: 0; border: 0; margin-right: 0; }
    .tbc-cmt-body { flex: 1; min-width: 0; background: var(--propia-bg-app); border: 1px solid var(--propia-border-divider); border-radius: 10px; padding: 9px 12px; }
    .tbc-cmt-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 3px; }
    .tbc-cmt-au { font-size: 12px; font-weight: 700; color: var(--propia-text-body); }
    .tbc-cmt-dt { font-size: 10.5px; color: var(--propia-text-faint); font-weight: 600; flex-shrink: 0; }
    .tbc-cmt-tx { font-size: 12.5px; color: var(--propia-text-body); line-height: 1.5; white-space: pre-wrap; word-break: break-word; }

    /* ===== Registro de actividad estilo CHAT (dos tonos, avatar a ambos lados, nombre+hora arriba, separador de dia) ===== */
    .tbc-chat { display: flex; flex-direction: column; gap: 12px; padding: 2px; }
    /* Separador de dia centrado (Hoy / Ayer / fecha) */
    .tbc-daysep { display: flex; align-items: center; justify-content: center; margin: 2px 0; }
    .tbc-daysep span { font-size: 10.5px; font-weight: 800; color: #8598AE; background: #EEF2F7; border-radius: 20px; padding: 3px 12px; }
    /* Cada mensaje: avatar + (nombre/hora arriba, burbuja abajo). Entrante a la izquierda, propio a la derecha. */
    .tbc-msg { display: flex; gap: 8px; align-items: flex-end; max-width: 90%; align-self: flex-start; }
    .tbc-msg.mine { align-self: flex-end; flex-direction: row-reverse; }
    .tbc-msg-ava { width: 28px; height: 28px; font-size: 10.5px; flex-shrink: 0; border: 0; margin: 0; }
    .tbc-msg-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
    .tbc-msg.mine .tbc-msg-col { align-items: flex-end; }
    .tbc-msg-meta { display: flex; align-items: baseline; gap: 7px; padding: 0 4px; }
    .tbc-msg-au { font-size: 11.5px; font-weight: 800; color: var(--propia-text-body); }
    .tbc-msg.mine .tbc-msg-au { color: #4B6FD1; }
    .tbc-msg-dt { font-size: 10.5px; color: var(--propia-text-faint); font-weight: 600; }
    /* Burbuja: entrante = crema, propia = azul; esquina "cola" hacia su avatar */
    .tbc-bubble { min-width: 0; max-width: 100%; background: #FEF8E6; border: 1px solid #F5EBC7; border-radius: 14px 14px 14px 4px; padding: 9px 12px; }
    .tbc-msg.mine .tbc-bubble { background: #E9F1FD; border-color: #D2E1F7; border-radius: 14px 14px 4px 14px; }
    .tbc-bubble.has-file { max-width: 260px; }
    .tbc-bubble-tx { font-size: 13px; color: #2B3B4E; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }

    /* ===== Actividad como CHAT (columna 3 del tab Detalle): timeline arriba + compositor abajo ===== */
    .tbc-actchat { display: flex; flex-direction: column; min-height: 0; height: 100%; gap: 8px; }
    .tbc-actchat-h { display: flex; align-items: baseline; gap: 8px; }
    /* Sin caja: el chat es solo el area con las burbujas (sin borde/fondo/sombra). */
    .tbc-chat-scroll { flex: 1 1 auto; min-height: 120px; overflow-y: auto; overflow-x: hidden; padding: 2px 2px 6px; background: transparent; border: 0; }
    .tbc-chat-scroll::-webkit-scrollbar { width: 6px; }
    .tbc-chat-scroll::-webkit-scrollbar-thumb { background: #CBD6E2; border-radius: 4px; }
    .tbc-chat-composer { display: flex; align-items: flex-end; gap: 6px; border: 1px solid var(--propia-border-card); border-radius: 24px; padding: 5px 6px; background: var(--propia-bg-card); box-shadow: 0 1px 3px rgba(27,42,58,.05); }
    .tbc-chat-composer:focus-within { border-color: var(--propia-brand); box-shadow: 0 0 0 3px rgba(109,79,227,.12); }
    .tbc-chat-clip { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; color: var(--propia-brand); background: #F3F0FE; cursor: pointer; flex-shrink: 0; }
    .tbc-chat-clip:hover { background: #E7E0FC; }
    .tbc-chat-clip-load { font-size: 15px; font-weight: 800; color: var(--propia-brand); }
    .tbc-chat-input { flex: 1 1 auto; border: 0; outline: none; resize: none; font-family: inherit; font-size: 13px; color: var(--propia-text-body); line-height: 1.5; padding: 8px 6px; max-height: 96px; background: transparent; }
    .tbc-chat-send { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--propia-brand); color: var(--propia-text-inverse); cursor: pointer; flex-shrink: 0; }
    .tbc-chat-send:disabled { background: #C7CEDA; cursor: not-allowed; }
    /* Compositor: contenedor relativo para anclar el popover de menciones y el chip de archivo. */
    .tbc-composerwrap { position: relative; display: flex; flex-direction: column; gap: 6px; }
    /* Chip del archivo pendiente (se sube junto con el comentario) */
    .tbc-pendfile { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; max-width: 100%; background: #F3F0FE; border: 1px solid #DED4FB; color: #4B3AA6; border-radius: 10px; padding: 6px 10px; font-size: 12px; font-weight: 700; }
    .tbc-pendfile-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
    .tbc-pendfile-x { display: inline-flex; border: 0; background: transparent; color: #7C6BC7; cursor: pointer; padding: 0; }
    .tbc-pendfile-x:hover { color: #4B3AA6; }
    /* Caption de un archivo (texto que acompana al adjunto dentro de la burbuja) */
    .tbc-bubble-cap { margin-top: 4px; }
    /* Popover de menciones (arroba usuario) */
    .tbc-mencion-pop { position: absolute; bottom: calc(100% + 6px); left: 0; right: 0; max-height: 210px; overflow-y: auto; background: var(--propia-bg-card); border: 1px solid var(--propia-border-card); border-radius: 12px; box-shadow: 0 10px 30px rgba(27,42,58,.16); padding: 5px; z-index: 40; }
    .tbc-mencion-it { display: flex; align-items: center; gap: 9px; width: 100%; border: 0; background: transparent; padding: 7px 9px; border-radius: 8px; cursor: pointer; text-align: left; font-family: inherit; }
    .tbc-mencion-it:hover { background: #F3F0FE; }
    .tbc-mencion-ava { width: 26px; height: 26px; font-size: 10px; flex-shrink: 0; border: 0; margin: 0; }
    .tbc-mencion-nm { font-size: 12.5px; font-weight: 700; color: var(--propia-text-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    [data-bs-theme="dark"] .tbc-mencion-pop { background: #1a1a35; border-color: var(--propia-border-card); }
    [data-bs-theme="dark"] .tbc-mencion-it:hover { background: #262647; }
    [data-bs-theme="dark"] .tbc-mencion-nm { color: #d5d9f0; }
    [data-bs-theme="dark"] .tbc-pendfile { background: #262647; border-color: var(--propia-border-card); color: #b9a8f5; }
    /* Burbuja con archivo adjunto dentro del chat: previsualizacion (imagen o PDF) + chip con el nombre */
    .tbc-bubble-img { margin: 2px 0 5px; border-radius: 8px; overflow: hidden; cursor: zoom-in; max-width: 100%; }
    .tbc-bubble-img img { display: block; width: 100%; max-height: 220px; object-fit: cover; }
    .tbc-bubble-pdf { position: relative; display: block; margin: 2px 0 5px; border: 1px solid #E7EDF3; border-radius: 8px; overflow: hidden; height: 160px; background: var(--propia-bg-card); cursor: pointer; }
    .tbc-bubble-pdf-fr { width: 100%; height: 100%; border: 0; pointer-events: none; background: var(--propia-bg-card); }
    .tbc-bubble-pdf-hint { position: absolute; right: 6px; bottom: 6px; font-size: 10px; font-weight: 800; color: var(--propia-text-inverse); background: rgba(27,42,58,.72); border-radius: 12px; padding: 2px 9px; }
    .tbc-bubble-file { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: #4B3AA6; background: rgba(109,79,227,.08); border: 1px solid rgba(109,79,227,.18); border-radius: 8px; padding: 5px 9px; font-size: 12px; font-weight: 700; max-width: 100%; }
    .tbc-bubble-file:hover { background: rgba(109,79,227,.15); }
    .tbc-bubble-fnm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* ===== Tab Historial ===== */
    .tbc-histtab { padding: 12px 18px 14px 20px; overflow-y: auto; }

    /* ===== Bandeja CERRADOS: tabla de consulta plana (sin diseno de tablero) ===== */
    .tb-cerr { overflow-x: auto; }
    .tb-cerr-empty { font-size: 13px; color: #90A4BC; background: var(--propia-bg-app); border: 1px dashed #DCE6EF; border-radius: 12px; padding: 34px; text-align: center; }
    .tb-cerr-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
    .tb-cerr-tbl thead th { text-align: left; font-size: 10.5px; letter-spacing: .4px; text-transform: uppercase; color: #90A4BC; font-weight: 800; padding: 8px 12px; border-bottom: 2px solid var(--propia-border-divider); white-space: nowrap; }
    .tb-cerr-row { cursor: pointer; border-bottom: 1px solid var(--propia-bg-hover); }
    .tb-cerr-row:hover { background: var(--propia-bg-app); }
    .tb-cerr-tbl td { padding: 10px 12px; color: var(--propia-text-body); vertical-align: middle; }
    .tb-cerr-num { font-weight: 800; color: var(--propia-brand); white-space: nowrap; }
    .tb-cerr-tit { font-weight: 700; }
    .tb-cerr-prio { font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: 20px; background: var(--propia-border-divider); color: #64748B; }
    .tb-cerr-prio-Urgente { background: var(--propia-danger-soft); color: #D8443C; }
    .tb-cerr-prio-Alta { background: #FEF0E1; color: #C77B18; }
    .tb-cerr-prio-Normal { background: #E7EEFB; color: #3B62C0; }
    .tb-cerr-prio-Baja { background: #EAF5EE; color: #2F8B54; }
    .tb-cerr-est { display: inline-block; font-size: 11px; font-weight: 700; color: var(--propia-text-inverse); padding: 3px 9px; border-radius: 7px; white-space: nowrap; }
    .tb-cerr-mot { color: #5A6B7E; }
    .tb-cerr-dt { color: #90A4BC; white-space: nowrap; }
    .tb-cerr-act { text-align: right; white-space: nowrap; }
    .tb-cerr-reab { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--propia-border-card); background: var(--propia-bg-card); color: #4B3AA6; font-size: 11.5px; font-weight: 800; padding: 5px 10px; border-radius: 8px; cursor: pointer; }
    .tb-cerr-reab:hover { background: #F3F0FE; border-color: #C9BCF7; }
    [data-bs-theme="dark"] .tbc-chat-scroll { background: transparent; border: 0; }
    [data-bs-theme="dark"] .tbc-chat-composer { background: #1a1a35; border-color: var(--propia-border-card); }
    [data-bs-theme="dark"] .tbc-chat-input { color: #d5d9f0; }
    [data-bs-theme="dark"] .tb-cerr-tbl td { color: #c5cae0; }
    [data-bs-theme="dark"] .tb-cerr-row { border-bottom-color: #24243f; }
    [data-bs-theme="dark"] .tb-cerr-row:hover { background: #1c1c38; }
    [data-bs-theme="dark"] .tb-cerr-reab { background: #1a1a35; border-color: var(--propia-border-card); color: #b9a8f5; }

    /* ===== Etiqueta "subido por" en adjuntos ===== */
    .tbc-thumb-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
    .tbc-thumb-by { display: inline-flex; align-items: center; gap: 3px; font-size: 9.5px; font-weight: 700; color: var(--propia-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .tbc-viewer-meta { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
    .tbc-viewer-by { font-size: 10.5px; font-weight: 700; color: var(--propia-text-muted); }

    /* ===== Visor de imagen ampliable + lightbox a pantalla completa ===== */
    .tbc-viewer-imgwrap--zoom { position: relative; cursor: zoom-in; }
    .tbc-viewer-zoom { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; color: var(--propia-text-inverse); background: rgba(27,42,58,.72); border-radius: 20px; padding: 5px 11px; pointer-events: none; }
    .tbc-lightbox { position: fixed; inset: 0; z-index: 3200; background: rgba(8,12,20,.9); display: flex; align-items: center; justify-content: center; padding: 30px; cursor: zoom-out; }
    .tbc-lightbox-img { max-width: 94vw; max-height: 94vh; object-fit: contain; border-radius: 8px; box-shadow: 0 12px 60px rgba(0,0,0,.5); cursor: default; }
    .tbc-lightbox-x { position: fixed; top: 18px; right: 22px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: var(--propia-text-inverse); display: flex; align-items: center; justify-content: center; cursor: pointer; }
    .tbc-lightbox-x:hover { background: rgba(255,255,255,.28); }

    /* Traza de copias */
    .tbc-copia-bc { display: inline-flex; align-items: center; gap: 4px; border: 0; background: rgba(255,255,255,.22); color: var(--propia-text-inverse); font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 20px; cursor: pointer; }
    .tbc-copia-bc:hover { background: rgba(255,255,255,.35); }
    .tbc-copia-ic { width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--propia-brand); background: var(--propia-brand-soft); border-radius: 6px; }
    /* Mini-modal copiar tarea */
    .tbcopy { width: min(460px, 94vw); background: var(--propia-bg-card); border-radius: 16px; box-shadow: 0 24px 60px rgba(45,62,80,.28); overflow: hidden; display: flex; flex-direction: column; }
    .tbcopy-h { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border-bottom: 1px solid var(--propia-border-divider); }
    .tbcopy-h span { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 800; color: var(--propia-text-body); }
    .tbcopy-bd { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
    .tbcopy-src { font-size: 12px; color: var(--propia-text-muted); }
    .tbcopy-src b { color: var(--propia-text-body); }
    .tbcopy-row { display: flex; gap: 10px; }
    .tbcopy-grow { flex: 1; }
    .tbcopy-cant { width: 84px; flex-shrink: 0; }
    .tbcopy-bd input, .tbcopy-bd select { width: 100%; box-sizing: border-box; border: 1px solid var(--propia-border-input); border-radius: 8px; padding: 7px 10px; font-size: 13px; color: var(--propia-text-body); outline: none; }
    .tbcopy-bd input:focus, .tbcopy-bd select:focus { border-color: var(--propia-brand); }
    .tbcopy-tglbl { font-size: 11px; font-weight: 700; letter-spacing: .3px; color: var(--propia-text-faint); }
    .tbcopy-toggles { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 12px; }
    .tbcopy-tg { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--propia-text-secondary); font-weight: 600; cursor: pointer; }
    .tbcopy-tg input { width: auto !important; accent-color: var(--propia-brand); }
    .tbcopy-note { font-size: 11.5px; color: var(--propia-text-muted); background: var(--propia-bg-table-head); border-radius: 8px; padding: 8px 10px; }
    .tbcopy-foot { display: flex; align-items: center; justify-content: flex-end; gap: 9px; padding: 14px 18px; border-top: 1px solid var(--propia-border-divider); }

    /* ===== Modal Configurar tablero ===== */
    .tbcfg-h { font-size: 11px; letter-spacing: .5px; color: var(--propia-text-faint); font-weight: 700; margin-bottom: 10px; }
    .tbcfg-list { display: flex; flex-direction: column; gap: 7px; margin-bottom: 10px; }
    .tbcfg-est { display: flex; align-items: center; gap: 10px; border: 1px solid var(--propia-border-card); border-radius: 10px; padding: 10px 12px; }
    .tbcfg-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
    .tbcfg-est-nom { flex: 1; font-size: 13px; font-weight: 700; color: var(--propia-text-body); }
    .tbcfg-est-cnt { font-size: 11px; color: var(--propia-text-faint); }
    .tbcfg-del { width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: var(--propia-text-faint); border: 0; background: transparent; cursor: pointer; flex-shrink: 0; }
    .tbcfg-del:hover { background: var(--propia-danger-soft); color: #D7263D; }
    .tbcfg-add { display: flex; gap: 7px; }
    .tbcfg-add input { flex: 1; min-width: 0; border: 1px solid var(--propia-border-card); border-radius: 8px; padding: 9px 11px; font-size: 13px; color: var(--propia-text-body); outline: none; background: var(--propia-bg-card); box-sizing: border-box; }
    .tbcfg-add input:focus { border-color: var(--propia-brand); }
    .tbcfg-add .tb-btn { flex-shrink: 0; }
    /* Etiquetas en Configurar tablero */
    .tbcfg-tags { display: flex; flex-direction: column; gap: 7px; margin-bottom: 10px; }
    .tbcfg-tag { display: flex; align-items: center; gap: 8px; }
    .tbcfg-tag .tb-tag { position: relative; }
    .tbcfg-tag-glob { font-size: 9px; font-weight: 800; color: var(--propia-text-secondary); background: var(--propia-border-divider); border-radius: 5px; padding: 2px 6px; text-transform: uppercase; }
    .tbcfg-tag-cnt { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--propia-text-faint); }
    /* Hint en el modal de tarjeta (las etiquetas ya no se crean ahi) */
    .tbc-tag-hint { margin-top: 8px; font-size: 11.5px; color: var(--propia-text-muted); }
    .tbc-linkbtn { border: 0; background: transparent; color: var(--propia-brand); font-weight: 700; cursor: pointer; padding: 0; font: inherit; text-decoration: underline; }
    [data-bs-theme="dark"] .tbcfg-tag-glob { background: var(--propia-bg-card); color: #C7C7D6; }
    .tbcfg-help { font-size: 11.5px; color: var(--propia-text-muted); margin-bottom: 10px; line-height: 1.45; }
    .tbcfg-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
    .tbcfg-chip { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--propia-text-secondary); background: var(--propia-bg-app); border: 1px solid var(--propia-border-card); padding: 6px 11px; border-radius: 8px; }
    .tbcfg-chip button { display: flex; color: var(--propia-text-faint); border: 0; background: transparent; cursor: pointer; padding: 0; }
    .tbcfg-chip button:hover { color: #D7263D; }

    /* ===== Vista Calendario ===== */
    .tcal { background: var(--propia-bg-card); border: 1px solid var(--propia-border-card); border-radius: 14px; box-shadow: 0 1px 2px rgba(45,62,80,.05); overflow: hidden; }
    .tcal-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--propia-border-divider); }
    .tcal-nav { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--propia-border-card); background: var(--propia-bg-card); color: var(--propia-text-secondary); display: flex; align-items: center; justify-content: center; cursor: pointer; }
    .tcal-nav:hover { border-color: var(--propia-brand); color: var(--propia-brand); }
    .tcal-title { font-size: 15px; font-weight: 800; color: var(--propia-text-h1); min-width: 150px; }
    .tcal-today { font-size: 12px; font-weight: 700; color: var(--propia-brand); background: var(--propia-brand-soft); border: 1px solid var(--propia-brand-border); border-radius: 8px; padding: 6px 12px; cursor: pointer; }
    .tcal-today:hover { background: #E6DEFA; }
    .tcal-count { font-size: 11.5px; font-weight: 700; color: var(--propia-brand); background: var(--propia-brand-soft); padding: 4px 11px; border-radius: 20px; }
    .tcal-grid-h { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--propia-bg-table-head); border-bottom: 1px solid var(--propia-border-divider); }
    .tcal-dow { padding: 8px 10px; font-size: 10.5px; letter-spacing: .4px; font-weight: 700; color: var(--propia-text-faint); }
    .tcal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--propia-border-divider); }
    .tcal-cell { background: var(--propia-bg-card); min-height: 106px; display: flex; flex-direction: column; padding: 6px 7px; }
    .tcal-cell.tcal-finde { background: var(--propia-bg-card-soft); }
    .tcal-cell.tcal-out { background: var(--propia-bg-table-head); }
    .tcal-cell.tcal-out .tcal-daynum { color: var(--propia-text-faint); }
    .tcal-daynum { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 800; color: var(--propia-text-body); align-self: flex-end; }
    .tcal-daynum.tcal-hoy { background: var(--propia-brand); color: var(--propia-text-inverse); }
    .tcal-events { display: flex; flex-direction: column; gap: 4px; margin-top: 3px; min-width: 0; }
    .tcal-ev { display: block; width: 100%; text-align: left; font-size: 10.5px; font-weight: 700; color: var(--propia-text-body); line-height: 1.25; background: var(--propia-bg-app); border: 0; border-left: 3px solid var(--propia-brand); border-radius: 6px; padding: 4px 7px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .tcal-ev:hover { background: var(--propia-brand-soft); }
    .tcal-ev.venc { background: var(--propia-danger-soft); color: #C0383C; }
    .tcal-more { font-size: 9.5px; color: var(--propia-text-faint); font-weight: 700; padding-left: 3px; }
    .tcal-modes { display: flex; align-items: center; gap: 2px; background: var(--propia-bg-hover); border: 1px solid var(--propia-border-card); border-radius: 9px; padding: 3px; }
    .tcal-mode { padding: 6px 13px; border-radius: 7px; font-size: 12px; font-weight: 700; color: var(--propia-text-muted); background: transparent; border: 0; cursor: pointer; }
    .tcal-mode.on { color: var(--propia-brand); background: var(--propia-bg-card); box-shadow: 0 1px 2px rgba(45,62,80,.12); }
    /* vista semana */
    .tcal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--propia-border-divider); }
    .tcal-wcol { background: var(--propia-bg-card); min-height: 220px; display: flex; flex-direction: column; }
    .tcal-whead { padding: 9px 10px; border-bottom: 1px solid var(--propia-border-divider); background: var(--propia-bg-table-head); }
    .tcal-whead.hoy { background: var(--propia-brand-soft); }
    .tcal-wdow { font-size: 10px; font-weight: 700; color: var(--propia-text-faint); letter-spacing: .3px; }
    .tcal-wnum { font-size: 15px; font-weight: 800; color: var(--propia-text-h1); }
    .tcal-whead.hoy .tcal-wnum { color: var(--propia-brand); }
    .tcal-wmes { font-size: 10px; color: var(--propia-text-faint); font-weight: 600; }
    .tcal-wbody { padding: 8px; display: flex; flex-direction: column; gap: 6px; }
    .tcal-wev { display: block; width: 100%; text-align: left; border: 1px solid var(--propia-border-card); border-left: 3px solid var(--propia-brand); border-radius: 8px; padding: 7px 9px; background: var(--propia-bg-card); cursor: pointer; }
    .tcal-wev:hover { border-color: var(--propia-brand); background: var(--propia-brand-soft-2); }
    .tcal-wev-t { font-size: 11.5px; font-weight: 700; color: var(--propia-text-body); line-height: 1.3; }
    .tcal-wev-r { font-size: 10px; color: var(--propia-text-faint); margin-top: 2px; }
    .tcal-wempty { font-size: 10.5px; color: var(--propia-text-faint); text-align: center; padding: 14px 0; }

    /* ===== Vista Gantt ===== */
    .tg { background: var(--propia-bg-card); border: 1px solid var(--propia-border-card); border-radius: 14px; box-shadow: 0 1px 2px rgba(45,62,80,.05); overflow: hidden; }
    .tg-titlebar { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--propia-border-divider); }
    .tg-title { font-size: 15px; font-weight: 800; color: var(--propia-text-h1); }
    .tg-scroll { overflow-x: auto; }
    .tg-inner { min-width: 100%; }
    .tg-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--propia-border-divider); }
    .tg-row:last-child { border-bottom: 0; }
    .tg-head { background: var(--propia-bg-table-head); border-bottom: 1px solid var(--propia-border-divider); position: sticky; top: 0; z-index: 3; }
    .tg-left { width: 240px; flex-shrink: 0; position: sticky; left: 0; z-index: 2; background: var(--propia-bg-card); border-right: 1px solid var(--propia-border-divider); display: flex; align-items: center; gap: 8px; padding: 0 12px; }
    .tg-head-left { background: var(--propia-bg-table-head); font-size: 10.5px; letter-spacing: .4px; font-weight: 700; color: var(--propia-text-faint); padding: 10px 12px; }
    .tg-task { text-align: left; border: 0; cursor: pointer; min-height: 40px; }
    .tg-task:hover .tg-task-t { color: var(--propia-brand); }
    .tg-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
    .tg-task-t { font-size: 12.5px; font-weight: 600; color: var(--propia-text-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .tg-task-btn { flex: 1; min-width: 0; text-align: left; background: none; border: 0; cursor: pointer; padding: 0; overflow: hidden; }
    .tg-task-btn:hover .tg-task-t { color: var(--propia-brand); }
    .tg-exp { width: 18px; height: 18px; flex-shrink: 0; border-radius: 5px; display: flex; align-items: center; justify-content: center; color: var(--propia-brand); background: var(--propia-brand-soft); border: 0; cursor: pointer; padding: 0; }
    .tg-exp:hover { background: #E6DEFA; }
    .tg-exp-sp { width: 18px; flex-shrink: 0; display: inline-block; }
    .tg-time { display: flex; position: relative; }
    .tg-daycol { flex-shrink: 0; padding: 5px 0; text-align: center; border-right: 1px solid var(--propia-border-divider); }
    .tg-daycol.tg-we { background: var(--propia-bg-card-soft); }
    .tg-daycol.tg-today { background: var(--propia-brand-soft); }
    .tg-dow { font-size: 8.5px; letter-spacing: .3px; font-weight: 700; color: var(--propia-text-faint); text-transform: uppercase; }
    .tg-dnum { font-size: 11px; font-weight: 700; color: var(--propia-text-secondary); margin-top: 1px; }
    .tg-dnum-hoy { color: var(--propia-brand); }
    .tg-lane { min-height: 40px; }
    .tg-cell { flex-shrink: 0; border-right: 1px solid var(--propia-border-divider); }
    .tg-cell.tg-we { background: var(--propia-bg-card-soft); }
    .tg-cell.tg-today { background: var(--propia-brand-soft-2); }
    .tg-bar { position: absolute; top: 8px; height: 24px; border-radius: 7px; border: 0; cursor: pointer; overflow: hidden; display: flex; align-items: center; box-shadow: 0 1px 3px rgba(27,42,58,.18); }
    .tg-bar:hover { filter: brightness(1.05); }
    .tg-bar-cl { border-top-left-radius: 0; border-bottom-left-radius: 0; } /* recortada por la izquierda (continua antes) */
    .tg-bar-cr { border-top-right-radius: 0; border-bottom-right-radius: 0; } /* recortada por la derecha (continua despues) */
    .tg-bar-rest { position: absolute; top: 0; bottom: 0; right: 0; background: rgba(255,255,255,.5); }
    .tg-bar-lbl { position: relative; z-index: 1; font-size: 10.5px; font-weight: 700; color: var(--propia-text-inverse); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 8px; text-shadow: 0 1px 1px rgba(0,0,0,.15); }
    .tg-note { font-size: 11.5px; color: var(--propia-text-faint); padding: 11px 18px; border-top: 1px solid var(--propia-border-divider); background: var(--propia-bg-card-soft); }

    @media (max-width: 880px) { .tcal-cell { min-height: 76px; } }
    @media (max-width: 880px) { .tbc-detail { display: block; overflow-y: auto; } .tbc-col { overflow: visible; min-height: auto; height: auto; padding-right: 0; } .tbc-actchat { height: auto; } .tbc-act-cols { grid-template-columns: 1fr; } .tbc-col-act { border-left: 0; padding-left: 0; border-top: 1px solid var(--propia-border-divider); padding-top: 14px; } .tbc-files { flex-direction: column; } .tbc-thumbs { width: auto; flex-direction: row; flex-wrap: wrap; } .tbc-viewer { min-height: 320px; } .tbc-row2 { flex-wrap: wrap; } .tbc-row2 .tbc-grow { min-width: 120px; } .tbc-row4 { grid-template-columns: 1fr auto; } }
    /* Movil (hasta 640px): el editor de tarea a pantalla completa, header/tabs/footer adaptados */
    @media (max-width: 640px) {
        .tb-modal-bd { padding: 10px; align-items: center; }
        .tbc-modal { width: 100%; max-width: 100%; height: auto; max-height: calc(100dvh - 20px); border-radius: 14px; }
        .tbc-head { flex-wrap: wrap; padding: 12px 14px; }
        .tbc-tabs { overflow-x: auto; padding: 0 10px; }
        .tbc-tab { flex: 0 0 auto; }
        .tbc-body { padding: 14px; }
        .tbc-foot { flex-wrap: wrap; padding: 12px 14px; }
        .tbc-foot .tb-flex { display: none; }
    }
    /* ----- Campos personalizados: lista (columnas) ----- */
    .tb-lc-due { flex: 0 0 100px; min-width: 100px; }
    .tb-row-due { flex: 0 0 100px; min-width: 100px; }
    .tb-lc-campo { width: 120px; flex-shrink: 0; }
    .tb-row-campo { width: 120px; flex-shrink: 0; font-size: 12px; color: var(--propia-text-secondary); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    /* Columnas numericas (Valor + campos Numero/Moneda): alineadas a la derecha, digitos tabulares y un poco mas anchas. */
    .tb-lc-campo.tb-num, .tb-row-campo.tb-num { width: 132px; }
    .tb-num { text-align: right; font-variant-numeric: tabular-nums; }
    .tb-num .tb-editable { text-align: right; }
    .tb-num .tb-cell-inp, .tb-num .tb-nf-inp { text-align: right; }
    .tb-lc.tb-num { justify-content: flex-end; }

    /* ----- Campos personalizados: modal de tarjeta ----- */
    .tbc-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
    .tbc-campos-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
    .tbc-addcampo { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--propia-brand, var(--propia-brand)); border: 1px solid var(--propia-brand-border); background: var(--propia-brand-soft-2); border-radius: 8px; padding: 4px 9px; cursor: pointer; font-family: inherit; }
    .tbc-addcampo:hover { background: #EDE7FD; }
    .tbc-campoeditor { margin-bottom: 10px; border: 1px solid var(--propia-brand-border); border-radius: 10px; padding: 10px; background: var(--propia-brand-soft-2); display: flex; flex-direction: column; gap: 8px; }
    .tbc-campo { display: flex; flex-direction: column; gap: 4px; }
    .tbc-campo.full { grid-column: 1 / -1; }
    .tbc-campo-lbl { font-size: 11px; font-weight: 700; color: var(--propia-text-secondary); }
    /* Lapiz para editar la DEFINICION del campo (nombre/tipo/opciones), desde la ficha y la parrilla. */
    .tbc-campo-lblrow { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
    .tbc-campo-ed2 { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 0; background: transparent; color: var(--propia-text-faint); cursor: pointer; border-radius: 5px; opacity: .5; flex-shrink: 0; font-family: inherit; }
    .tbc-campo-ed2:hover { color: var(--propia-brand, var(--propia-brand)); background: var(--propia-brand-soft); opacity: 1; }
    .tbc-campo-acts { display: flex; align-items: center; gap: 1px; flex-shrink: 0; }
    .tbc-campo-mv { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 0; background: transparent; color: var(--propia-text-faint); cursor: pointer; border-radius: 5px; opacity: .5; font-family: inherit; }
    .tbc-campo-mv:hover { color: var(--propia-brand, var(--propia-brand)); background: var(--propia-brand-soft); opacity: 1; }
    .tbc-campo-del { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 0; background: transparent; color: var(--propia-text-faint); cursor: pointer; border-radius: 5px; opacity: .5; flex-shrink: 0; font-family: inherit; }
    .tbc-campo-del:hover { color: #D7263D; background: var(--propia-danger-soft); opacity: 1; }
    /* Chevron del header siempre visible + al borde derecho (1:1 Unidades). .tb-lc es flex. */
    /* padding:0 es CLAVE: sin el (el navegador aplica el padding por defecto de <button> ~1px 6px y, con
       box-sizing border-box y width fijo 18px, la caja de contenido queda en 6px y aplasta el SVG de 11px a
       6px de ancho -> el chevron se veia como una rayita. flex-shrink:0 en el svg lo blinda por si acaso. */
    .tb-lc-ed { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; border: 0; background: transparent; color: var(--propia-text-muted); cursor: pointer; border-radius: 4px; opacity: 1; margin-left: auto; margin-right: 12px; vertical-align: middle; transition: background .12s, color .12s; }
    .tb-lc-ed svg { flex-shrink: 0; }
    .tb-lc-campo:hover .tb-lc-ed { opacity: 1; }
    /* Hover 1:1 con el canon de Unidades (.tbl-th-edit:hover): fondo violeta suave + color brand (la "sombra
       violeta" del chevron). Antes solo cambiaba el color del icono; Tareas era el unico modulo sin el fondo. */
    .tb-lc-ed:hover { color: var(--propia-brand); background: var(--propia-brand-soft); opacity: 1; }
    /* El chevron del titulo va al borde derecho de su columna, igual que el resto (margin-left:auto heredado).
       Antes se anclaba junto a la etiqueta porque el icono salia aplastado y "perdido"; ya corregido el svg
       (padding:0), al borde derecho queda consistente con las demas columnas (pedido de Alex). */
    .tbc-req { color: #D7263D; font-weight: 800; }
    .tbc-sep { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .4px; color: var(--propia-brand, var(--propia-brand)); text-transform: uppercase; border-top: 1px solid var(--propia-border-card); padding-top: 9px; margin-top: 4px; }
    .tbc-total { background: var(--propia-brand-soft-2); font-weight: 700; color: var(--propia-text-body); }
    .tbc-cardmsg { font-size: 12px; font-weight: 600; color: #D7263D; align-self: center; margin-right: 8px; }
    .tbcfg-suma { border: 1px solid var(--propia-border-card); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; }
    .tbcfg-suma-h { font-size: 10.5px; font-weight: 700; letter-spacing: .3px; color: var(--propia-text-muted); }
    .tbcfg-suma-empty { font-size: 11.5px; color: var(--propia-text-faint); }
    .tbc-campo input, .tbc-campo select, .tbc-campo textarea { border: 1px solid var(--propia-border-card); border-radius: 8px; padding: 7px 9px; font-size: 12.5px; color: var(--propia-text-body); outline: none; background: var(--propia-bg-card); box-sizing: border-box; width: 100%; font-family: inherit; }
    .tbc-campo input:focus, .tbc-campo select:focus, .tbc-campo textarea:focus { border-color: var(--propia-brand); }
    .tbc-campo-bool { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--propia-text-secondary); font-weight: 600; }
    .tbc-campo-bool input { width: auto; }

    /* ----- Editor de campos en Configurar tablero ----- */
    .tbcfg-campos { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
    .tbcfg-campo { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid var(--propia-border-card); border-radius: 9px; background: var(--propia-bg-card); }
    .tbcfg-campo.on { border-color: var(--propia-brand); background: var(--propia-brand-soft-2); }
    .tbcfg-campo-id { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .tbcfg-campo-nom { font-size: 13px; font-weight: 700; color: var(--propia-text-body); }
    .tbcfg-campo-tipo { font-size: 10px; font-weight: 700; color: var(--propia-brand); background: var(--propia-brand-soft); padding: 2px 8px; border-radius: 6px; }
    .tbcfg-campo-filt { font-size: 10px; font-weight: 700; color: #1A8754; background: var(--propia-ok-soft); padding: 2px 8px; border-radius: 6px; }
    .tbcfg-campo-ed { width: 28px; height: 28px; flex-shrink: 0; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: var(--propia-text-faint); border: 1px solid var(--propia-border-card); background: var(--propia-bg-card); cursor: pointer; }
    .tbcfg-campo-ed:hover { color: var(--propia-brand); border-color: var(--propia-brand); }
    /* Campos archivados (retirados sin perder datos) */
    .tbcfg-arch { margin-top: 12px; border: 1px dashed var(--propia-border-input); border-radius: 10px; padding: 11px 12px; background: var(--propia-bg-app); }
    .tbcfg-arch-h { font-size: 11px; letter-spacing: .5px; color: var(--propia-text-faint); font-weight: 700; margin-bottom: 6px; }
    .tbcfg-arch-h span { color: var(--propia-text-muted); }
    .tbcfg-arch-it { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-top: 1px solid var(--propia-border-divider); }
    .tbcfg-arch-it:first-of-type { border-top: 0; }
    .tbcfg-arch-restore { font-size: 12px; font-weight: 700; color: var(--propia-brand); border: 1px solid var(--propia-brand-border); background: var(--propia-brand-soft); border-radius: 8px; padding: 5px 12px; cursor: pointer; flex-shrink: 0; }
    .tbcfg-arch-restore:hover { background: #E6DEFA; }
    .tbcfg-editor { border: 1px dashed var(--propia-border-input); border-radius: 10px; padding: 12px; background: var(--propia-bg-card-soft); display: flex; flex-direction: column; gap: 8px; }
    .tbcfg-editor-h { font-size: 11px; font-weight: 800; letter-spacing: .3px; color: var(--propia-text-muted); }
    .tbcfg-erow { display: flex; gap: 8px; align-items: center; }
    .tbcfg-erow-end { justify-content: flex-end; }
    .tbcfg-in { flex: 1; min-width: 0; border: 1px solid var(--propia-border-card); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; color: var(--propia-text-body); outline: none; background: var(--propia-bg-card); box-sizing: border-box; font-family: inherit; }
    .tbcfg-in:focus { border-color: var(--propia-brand); }
    .tbcfg-in-sm { flex: 0 0 160px; }
    .tbcfg-chkl { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--propia-text-secondary); font-weight: 600; flex: 1; }
    /* Editor de campo flotante + boton "+ Campo" del encabezado de la tabla */
    /* Editor de campo como POPOVER anclado al boton (nace del boton, con flechita). */
    .tbfld-bd { position: fixed; inset: 0; z-index: 1118; background: transparent; }
    .tbfld-pop { position: fixed; z-index: 1120; width: 360px; max-width: calc(100vw - 24px); background: var(--propia-bg-card); border: 1px solid #E6ECF1; border-radius: 13px; box-shadow: 0 18px 50px rgba(27,42,58,.28); display: flex; flex-direction: column; overflow: hidden; transform-origin: top right; animation: tbfldIn .12s ease-out; }
    .tbfld-pop::before { content: ''; position: absolute; top: -7px; right: 18px; width: 13px; height: 13px; background: var(--propia-bg-card); border-left: 1px solid #E6ECF1; border-top: 1px solid #E6ECF1; transform: rotate(45deg); }
    .tbfld-pop-up { transform-origin: bottom right; animation: tbfldInUp .12s ease-out; }
    .tbfld-pop-up::before { top: auto; bottom: -7px; border-left: none; border-top: none; border-right: 1px solid #E6ECF1; border-bottom: 1px solid #E6ECF1; }
    @keyframes tbfldIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
    @keyframes tbfldInUp { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
    .tbfld-pop-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--propia-bg-card-soft); font-size: 13.5px; font-weight: 800; color: var(--propia-text-h1); flex-shrink: 0; }
    .tbfld-x { width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--propia-border-card); background: var(--propia-bg-card); color: var(--propia-text-muted); cursor: pointer; flex-shrink: 0; }
    .tbfld-x:hover { border-color: var(--propia-brand); color: var(--propia-brand); }
    .tbfld-pop-b { padding: 13px 14px; overflow-y: auto; display: flex; flex-direction: column; gap: 11px; }
    .tbfld-pop-f { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 11px 14px; border-top: 1px solid var(--propia-bg-card-soft); flex-shrink: 0; }
    .tbfld-field { display: flex; flex-direction: column; gap: 4px; }
    .tbfld-lbl { font-size: 11px; font-weight: 700; color: var(--propia-text-secondary); letter-spacing: .2px; }
    .tb-hdr-addcampo { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; color: var(--propia-brand, var(--propia-brand)); border: 1px solid var(--propia-brand-border); background: var(--propia-brand-soft-2); border-radius: 6px; padding: 2px 7px; cursor: pointer; font-family: inherit; }
    .tb-hdr-addcampo:hover { background: #EDE7FD; }

    /* ============================================================================
       TEMA OSCURO del area de trabajo de Tareas.
       El resto de la app activa el modo oscuro con html[data-bs-theme="dark"]
       (ver wwwroot/js/propia-ui.js). Aqui reescribimos los fondos/contraste de las
       clases tb-*/tbc-*/tcal-*/tg- (solo del modulo Tareas) porque usan colores
       claros fijos que quedaban ilegibles. Se reutilizan los tokens de dark de
       wwwroot/css/propia-tokens.css cuando aplica.
       ============================================================================ */
    /* ---- Cabeceras / titulos ---- */
    [data-bs-theme="dark"] .tb-title,
    [data-bs-theme="dark"] .tb-board-nom,
    [data-bs-theme="dark"] .tb-card-nom,
    [data-bs-theme="dark"] .tb-soon-t,
    [data-bs-theme="dark"] .tb-modal-h,
    [data-bs-theme="dark"] .tcal-title,
    [data-bs-theme="dark"] .tcal-wnum,
    [data-bs-theme="dark"] .tg-title { color: var(--propia-text-h1, #F0F0F5); }
    [data-bs-theme="dark"] .tb-sub,
    [data-bs-theme="dark"] .tb-board-desc,
    [data-bs-theme="dark"] .tb-card-desc,
    [data-bs-theme="dark"] .tb-modal-s,
    [data-bs-theme="dark"] .tb-soon-s { color: var(--propia-text-muted, #8888A0); }

    /* ---- Selector copropiedad + botones neutros de la barra ---- */
    [data-bs-theme="dark"] .tb-cosel-btn,
    [data-bs-theme="dark"] .tb-btn-ghost,
    [data-bs-theme="dark"] .tb-icon-btn,
    [data-bs-theme="dark"] .tcal-nav { background: var(--propia-bg-card, var(--propia-bg-card)); border-color: var(--propia-border-card, var(--propia-border-card)); color: var(--propia-text-body, var(--propia-text-body)); }
    [data-bs-theme="dark"] .tb-cosel-menu { background: var(--propia-bg-card); border-color: var(--propia-border-card); }
    [data-bs-theme="dark"] .tb-cosel-item { color: var(--propia-text-body, var(--propia-text-body)); }
    [data-bs-theme="dark"] .tb-cosel-item:hover:not(:disabled) { background: var(--propia-bg-card-soft); }

    /* ---- Fila-resumen de totales (tema oscuro) ---- */
    [data-bs-theme="dark"] .tb-list-sum { background: #241f3a; border-bottom-color: var(--propia-border-divider); }
    [data-bs-theme="dark"] .tb-sum-total { background: #2a244a; border-top-color: var(--propia-border-card); }
    [data-bs-theme="dark"] .tb-list-sum .tb-lc { color: var(--propia-text-body); }
    [data-bs-theme="dark"] .tb-agg-val { color: var(--propia-text-body); }
    [data-bs-theme="dark"] .tb-agg-btn:hover { background: #34305a; }
    [data-bs-theme="dark"] .tb-agg-menu { background: var(--propia-bg-card); border-color: var(--propia-border-card); }
    [data-bs-theme="dark"] .tb-agg-it { color: #C7C7D6; }
    [data-bs-theme="dark"] .tb-agg-it:hover { background: var(--propia-bg-card-soft); }
    [data-bs-theme="dark"] .tb-gsec-chip { background: var(--propia-bg-card-soft); color: #A8A8BC; }
    [data-bs-theme="dark"] .tb-gsec-chip b { color: var(--propia-text-body); }
    [data-bs-theme="dark"] .tb-glt { background: var(--propia-bg-card-soft); color: #A8A8BC; }
    [data-bs-theme="dark"] .tb-glt b { color: var(--propia-text-body); }

    /* ---- Conmutador de vistas ---- */
    [data-bs-theme="dark"] .tb-modeswitch { background: #1f1f3a; border-color: var(--propia-border-card); }
    [data-bs-theme="dark"] .tb-mode { color: #A8A8BC; }
    [data-bs-theme="dark"] .tb-mode.on { background: #2f2f55; color: #B9A9F5; box-shadow: none; }

    /* ---- Grilla de tableros ---- */
    [data-bs-theme="dark"] .tb-card { background: var(--propia-bg-card); border-color: var(--propia-border-card); box-shadow: none; }
    [data-bs-theme="dark"] .tb-card-edit { background: var(--propia-bg-card); border-color: var(--propia-border-card); color: #8888A0; }
    [data-bs-theme="dark"] .tb-card-count { background: #1f1f3a; border-color: var(--propia-border-card); color: #A8A8BC; }
    [data-bs-theme="dark"] .tb-card-new { background: #1f1f3a; border-color: var(--propia-border-card); color: #8888A0; }

    /* ---- Filtros y menus ---- */
    [data-bs-theme="dark"] .tb-filter,
    [data-bs-theme="dark"] .tb-filter-btn { background: var(--propia-bg-card); border-color: var(--propia-border-card); color: #C7C7D6; }
    [data-bs-theme="dark"] .tb-colsmenu,
    [data-bs-theme="dark"] .tb-menu { background: var(--propia-bg-card); border-color: var(--propia-border-card); }
    [data-bs-theme="dark"] .tb-colsmenu-i,
    [data-bs-theme="dark"] .tb-menu-it { color: var(--propia-text-body); }
    [data-bs-theme="dark"] .tb-colsmenu-i:hover,
    [data-bs-theme="dark"] .tb-menu-it:hover { background: var(--propia-bg-card-soft); }
    [data-bs-theme="dark"] .tb-colsmenu-act { background: var(--propia-bg-card); border-color: var(--propia-border-card); color: #C7C7D6; }

    /* ---- Vista Tablero (Kanban): columnas + tarjetas ---- */
    [data-bs-theme="dark"] .tb-kanban .tb-col,
    [data-bs-theme="dark"] .tb-gsec { background: #1f1f3a; border-color: #33335a; }
    /* T-01 (auditoria): el nombre de columna en dark quedaba con contraste 1.35 sobre el fondo #1f1f3a.
       Se usa el color de encabezado (mas claro) para superar AA. */
    [data-bs-theme="dark"] .tb-col-nom,
    [data-bs-theme="dark"] .tb-gsec-nom { color: var(--propia-text-h1); }
    [data-bs-theme="dark"] .tb-col-count { background: var(--propia-bg-card); border-color: var(--propia-border-card); color: #A8A8BC; }
    [data-bs-theme="dark"] .tb-tcard { background: #26264a; border-color: var(--propia-border-card); box-shadow: none; }
    [data-bs-theme="dark"] .tb-tcard-tit { color: #E6E6F0; }
    [data-bs-theme="dark"] .tb-tcard-foot { border-top-color: #33335a; }
    [data-bs-theme="dark"] .tb-tcard-resp { color: #9a9ab2; }
    [data-bs-theme="dark"] .tb-tcard-age { background: var(--propia-bg-card-soft); color: #A8A8BC; }
    [data-bs-theme="dark"] .tb-col-add { border-color: var(--propia-border-card); color: #8888A0; }

    /* ---- Vista Lista (tabla) ---- */
    [data-bs-theme="dark"] .tb-list { background: var(--propia-bg-card); border-color: var(--propia-border-card); }
    [data-bs-theme="dark"] .tb-list-hdr { background: #1f1f3a; border-bottom-color: var(--propia-border-divider); }
    [data-bs-theme="dark"] .tb-list-group { background: #26264a; border-bottom-color: var(--propia-border-divider); }
    [data-bs-theme="dark"] .tb-group-nom { color: var(--propia-text-body); }
    [data-bs-theme="dark"] .tb-row { border-bottom-color: var(--propia-border-divider); }
    [data-bs-theme="dark"] .tb-row:hover { background: var(--propia-bg-card-soft); }
    [data-bs-theme="dark"] .tb-row-child { background: #202038; }
    [data-bs-theme="dark"] .tb-row-t { color: var(--propia-text-body); }
    [data-bs-theme="dark"] .tb-row-resp { color: #A8A8BC; }
    [data-bs-theme="dark"] .tb-row-due,
    [data-bs-theme="dark"] .tb-row-campo,
    [data-bs-theme="dark"] .tb-row-desc-prev { color: #9a9ab2; }
    [data-bs-theme="dark"] .tb-pin,
    [data-bs-theme="dark"] .tb-pin-h { background: var(--propia-bg-card); }
    [data-bs-theme="dark"] .tb-pin-g { background: #26264a; }
    [data-bs-theme="dark"] .tb-prog-bar { background: #33335a; }
    [data-bs-theme="dark"] .tb-editable:hover { background: #2f2f55; border-color: #4a3f78; }
    [data-bs-theme="dark"] .tb-newrow { background: #202038; border-bottom-color: var(--propia-border-divider); }
    [data-bs-theme="dark"] .tb-newrow:focus-within { background: #262648; }
    /* Opcion B en dark: el pin de la fila de alta sigue el fondo de la banda (no el blanco de datos). */
    [data-bs-theme="dark"] .tb-newrow--alta .tb-pin { background: #202038; }
    [data-bs-theme="dark"] .tb-newrow--alta:focus-within .tb-pin { background: #262648; }
    [data-bs-theme="dark"] .tb-nf-inp { background: var(--propia-bg-card); border-color: var(--propia-border-card); color: var(--propia-text-body); }
    [data-bs-theme="dark"] .tb-cell-inp,
    [data-bs-theme="dark"] .tb-cell-area { background: var(--propia-bg-card); color: #E6E6F0; }
    [data-bs-theme="dark"] .tb-cell-area { box-shadow: 0 12px 32px rgba(0,0,0,.5); }
    [data-bs-theme="dark"] .tb-asig-drop { background: var(--propia-bg-card); border-color: var(--propia-border-card); }
    [data-bs-theme="dark"] .tb-asig-item { background: transparent; color: var(--propia-text-body); }
    [data-bs-theme="dark"] .tb-asig-item:hover,
    [data-bs-theme="dark"] .tb-asig-item.on { background: var(--propia-bg-card-soft); }
    [data-bs-theme="dark"] .tb-orig-tsel,
    [data-bs-theme="dark"] .tb-orig-rsel { background: var(--propia-bg-card); border-color: var(--propia-border-card); color: #C7C7D6; }
    /* Chip de etiqueta editable: fondo transparente para que el color de la etiqueta destaque. */
    [data-bs-theme="dark"] .tb-tag { background: transparent; }
    [data-bs-theme="dark"] .tb-tag-inp { background: var(--propia-bg-card); }
    [data-bs-theme="dark"] .tb-tag-colors { background: var(--propia-bg-card); border-color: var(--propia-border-card); }

    /* ---- Vista Calendario ---- */
    [data-bs-theme="dark"] .tcal { background: var(--propia-bg-card); border-color: var(--propia-border-card); }
    [data-bs-theme="dark"] .tcal-head,
    [data-bs-theme="dark"] .tcal-grid-h,
    [data-bs-theme="dark"] .tcal-whead { border-color: var(--propia-border-divider); }
    [data-bs-theme="dark"] .tcal-grid-h,
    [data-bs-theme="dark"] .tcal-whead { background: #1f1f3a; }
    [data-bs-theme="dark"] .tcal-grid,
    [data-bs-theme="dark"] .tcal-week { background: var(--propia-border-divider); }
    [data-bs-theme="dark"] .tcal-cell,
    [data-bs-theme="dark"] .tcal-wcol { background: var(--propia-bg-card); }
    [data-bs-theme="dark"] .tcal-cell.tcal-out { background: #1f1f3a; }
    [data-bs-theme="dark"] .tcal-cell.tcal-finde { background: #202038; }
    [data-bs-theme="dark"] .tcal-daynum { color: var(--propia-text-body); }
    [data-bs-theme="dark"] .tcal-ev { background: var(--propia-bg-card-soft); color: var(--propia-text-body); }

    /* ---- Vista Gantt ---- */
    [data-bs-theme="dark"] .tg { background: var(--propia-bg-card); border-color: var(--propia-border-card); }
    [data-bs-theme="dark"] .tg-titlebar { border-bottom-color: var(--propia-border-divider); }
    [data-bs-theme="dark"] .tg-head,
    [data-bs-theme="dark"] .tg-head-left { background: #1f1f3a; }
    [data-bs-theme="dark"] .tg-left { background: var(--propia-bg-card); border-right-color: var(--propia-border-divider); }
    [data-bs-theme="dark"] .tg-task-t { color: var(--propia-text-body); }
    [data-bs-theme="dark"] .tg-row { border-bottom-color: var(--propia-border-divider); }
    [data-bs-theme="dark"] .tg-daycol,
    [data-bs-theme="dark"] .tg-cell { border-right-color: var(--propia-border-divider); }

    /* ---- Modales de Tareas (para que no queden en blanco cegador en dark) ---- */
    [data-bs-theme="dark"] .tb-modal,
    [data-bs-theme="dark"] .tbc-modal,
    [data-bs-theme="dark"] .tbcopy { background: var(--propia-bg-card); }
    [data-bs-theme="dark"] .tb-modal-head,
    [data-bs-theme="dark"] .tb-modal-foot,
    [data-bs-theme="dark"] .tbc-foot,
    [data-bs-theme="dark"] .tbc-tabs,
    [data-bs-theme="dark"] .tbcopy-h,
    [data-bs-theme="dark"] .tbcopy-foot { border-color: var(--propia-border-divider); }
    [data-bs-theme="dark"] .tbc-col-act { border-left-color: var(--propia-border-divider); }
    [data-bs-theme="dark"] .tbc-fld > label,
    [data-bs-theme="dark"] .tbc-lbl,
    [data-bs-theme="dark"] .tb-fld label,
    [data-bs-theme="dark"] .tbc-campo-lbl { color: #9a9ab2; }
    [data-bs-theme="dark"] .tbc-tab { color: #A8A8BC; }
    [data-bs-theme="dark"] .tbc-sub-t,
    [data-bs-theme="dark"] .tbc-resp-nm,
    [data-bs-theme="dark"] .tbc-cmt-au,
    [data-bs-theme="dark"] .tbc-cmt-tx,
    [data-bs-theme="dark"] .tbc-log-t { color: var(--propia-text-body); }
    [data-bs-theme="dark"] .tbc-sub,
    [data-bs-theme="dark"] .tbc-resp,
    [data-bs-theme="dark"] .tbc-cmt-body { background: #1f1f3a; border-color: var(--propia-border-card); }
    [data-bs-theme="dark"] .tbc-msg-au,
    [data-bs-theme="dark"] .tbc-bubble-tx { color: var(--propia-text-body); }
    [data-bs-theme="dark"] .tbc-bubble { background: #33301f; border-color: #524b2e; }
    [data-bs-theme="dark"] .tbc-bubble-tx { color: #E6E1CE; }
    [data-bs-theme="dark"] .tbc-msg.mine .tbc-bubble { background: #1f2a44; border-color: #33456e; }
    [data-bs-theme="dark"] .tbc-msg.mine .tbc-bubble .tbc-bubble-tx { color: #DCE6F5; }
    [data-bs-theme="dark"] .tbc-msg.mine .tbc-msg-au { color: #9db8f0; }
    [data-bs-theme="dark"] .tbc-daysep span { background: #24243f; color: #9aa8bd; }
    [data-bs-theme="dark"] .tb-fld input,
    [data-bs-theme="dark"] .tb-fld select,
    [data-bs-theme="dark"] .tb-fld textarea,
    [data-bs-theme="dark"] .tbc-fld input,
    [data-bs-theme="dark"] .tbc-fld select,
    [data-bs-theme="dark"] .tbc-fld textarea,
    [data-bs-theme="dark"] .tbc-campo input,
    [data-bs-theme="dark"] .tbc-campo select,
    [data-bs-theme="dark"] .tbc-campo textarea,
    [data-bs-theme="dark"] .tbc-act-input,
    [data-bs-theme="dark"] .tbc-sub-add input,
    [data-bs-theme="dark"] .tbc-tag-add input,
    [data-bs-theme="dark"] .tbc-resp-add select,
    [data-bs-theme="dark"] .tbcfg-in,
    [data-bs-theme="dark"] .tbfld-pop .tbcfg-in { background: #1f1f3a; border-color: var(--propia-border-card); color: #E6E6F0; }
    [data-bs-theme="dark"] .tbc-tag { background: #1f1f3a; border-color: var(--propia-border-card); color: #C7C7D6; }
    [data-bs-theme="dark"] .tbfld-pop { background: var(--propia-bg-card); border-color: var(--propia-border-card); }
    [data-bs-theme="dark"] .tbfld-pop::before { background: var(--propia-bg-card); border-color: var(--propia-border-card); }
    [data-bs-theme="dark"] .tbfld-pop-h { color: #F0F0F5; border-bottom-color: var(--propia-border-divider); }

    /* Movil: sin padding horizontal propio (igual que Unidades); el gutter lo da el .app-wrapper del shell. */
    @media (max-width: 640px) { .tb-wrap { padding-left: 0; padding-right: 0; } }

/* ---- (segundo bloque: config de columnas / invitacion) ---- */
    /* Config de columnas editable + invitacion cross-tenant + espejo */
    .tbcfg-dot-btn { border: 0; cursor: pointer; padding: 0; width: 14px; height: 14px; border-radius: 50%; }
    .tbcfg-est-nom-edit { cursor: pointer; }
    .tbcfg-est-nom-edit:hover { text-decoration: underline dotted; }
    .tbcfg-est-inp { border: 1px solid #D9D2F6; border-radius: 7px; padding: 3px 8px; font-size: 13px; min-width: 140px; }
    .tbcfg-ord { display: inline-flex; gap: 2px; margin-left: 6px; }
    .tbcfg-ordbtn { border: 0; background: transparent; color: #9AABBE; cursor: pointer; font-size: 10px; padding: 2px 4px; border-radius: 5px; line-height: 1; }
    .tbcfg-ordbtn:hover { background: var(--propia-brand-soft); color: var(--propia-brand); }
    .tbcfg-ordbtn:disabled { opacity: .3; cursor: default; }
    /* Toggle "estado de cierre" (EsTerminal) en el editor de estados. Apagado: pildora contorno tenue;
       encendido: relleno violeta suave (el estado al que, al llegar, se le pide motivo de cierre). */
    .tbcfg-cierre { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--propia-border-card); background: transparent; color: var(--propia-text-faint); cursor: pointer; line-height: 1; }
    .tbcfg-cierre svg { opacity: .8; }
    .tbcfg-cierre:hover { border-color: var(--propia-brand-border); color: var(--propia-brand); }
    .tbcfg-cierre.on { background: var(--propia-brand-soft); color: var(--propia-brand); border-color: var(--propia-brand-border); }
    .tbcfg-cierre:disabled { opacity: .5; cursor: default; }
    /* Lista de "estado de cierre" dentro del editor del campo Etapa (modal EditarCampoSistemaModal, slot). */
    .ecs-cierre-estados { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
    .ecs-cierre-est { display: flex; align-items: center; gap: 8px; padding: 4px 2px; }
    .ecs-cierre-nom { flex: 1; font-size: 13px; font-weight: 600; color: var(--propia-text-body); }
    .ecs-cierre-err { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--propia-danger); background: var(--propia-danger-soft); border: 1px solid var(--propia-danger); border-radius: 9px; padding: 8px 11px; margin-top: 8px; }
    .ecs-cierre-err svg { flex-shrink: 0; margin-top: 1px; }
    .tbcfg-cross { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--propia-text-muted); margin-bottom: 6px; cursor: pointer; }
    .tbcfg-cross input { accent-color: var(--propia-brand); }
    .tb-copro-chip { display: inline-flex; align-items: center; font-size: 10px; font-weight: 800; background: var(--propia-brand-soft); color: var(--propia-brand); border-radius: 9px; padding: 1px 8px; margin-bottom: 5px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
    .tbcfg-copro-chip { margin-left: auto; font-size: 10.5px; font-weight: 700; background: var(--propia-brand-soft); color: var(--propia-brand); border-radius: 10px; padding: 2px 8px; white-space: nowrap; }
    .tbcfg-porcorreo { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--propia-border-card); }
    .tbcfg-porcorreo-lbl { display: block; font-size: 11.5px; color: var(--propia-text-muted); font-weight: 600; margin-bottom: 6px; }
    .tbcfg-porcorreo-row { display: flex; gap: 8px; align-items: center; }
    .tbcfg-porcorreo-row .tb-input { flex: 1; min-width: 0; }
    .tbcfg-porcorreo-msg { margin-top: 7px; font-size: 12px; padding: 7px 10px; border-radius: 8px; }
    .tbcfg-porcorreo-msg.ok { background: var(--propia-ok-soft); color: #1B7A44; }
    .tbcfg-porcorreo-msg.err { background: var(--propia-danger-soft); color: #B02121; }

/* ===== Modo embebido (tablero de Tareas dentro de un modal, ej. PQRSD) ===== */
.tb-embed { padding: 0; max-width: none; }
.tb-embed .tb-kanban { max-height: 58vh; overflow-y: auto; }
.tb-embed .tb-list-scroll, .tb-embed .tb-list { max-height: 58vh; }
/* El menu de columnas y el editor flotante deben quedar por encima del ModalHost (~1050+). */
.tb-embed .tb-colsmenu { z-index: 5000; }