/* ═══════════════════════════════════════════════════════════════
   gtk-custom.css — GTK HablaIP · Design System
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. XENESIS compatibility ────────────────────────────────── */
:root {
    --xen-border:  #e7e7e8; --xen-border2: #d4d3ff;
    --xen-text:    #5d596c; --xen-muted:   #a5b1bb;
    --xen-dim:     #c0bfd0; --xen-cyan:    #696cff;
    --xen-cyan2:   #696cff; --xen-green:   #71dd37;
    --xen-green2:  #56bb2e;
}

/* ── 2. Design Tokens ───────────────────────────────────────── */
:root {
    --gtk-primary:     #696cff;
    --gtk-rgb:         105, 108, 255;
    --gtk-radius:      12px;
    --gtk-radius-sm:   7px;
    --gtk-radius-xs:   4px;
    --gtk-dur:         .16s;
    --gtk-ease:        cubic-bezier(.25, .46, .45, .94);

    /* Shadows — light mode */
    --gtk-sh-xs:  0 1px 4px rgba(0,0,0,.06);
    --gtk-sh-sm:  0 2px 10px rgba(105,108,255,.07), 0 1px 2px rgba(0,0,0,.04);
    --gtk-sh-md:  0 6px 24px rgba(105,108,255,.13), 0 2px 6px rgba(0,0,0,.05);
    --gtk-sh-lg:  0 12px 40px rgba(105,108,255,.18), 0 4px 12px rgba(0,0,0,.07);

    /* Borders */
    --gtk-border:      rgba(0,0,0,.07);
    --gtk-border-mid:  rgba(0,0,0,.11);

    /* Priority accent colors */
    --gtk-prio-alta:    #ff4444;
    --gtk-prio-mediana: #ffab00;
    --gtk-prio-baja:    #03c3ec;
    --gtk-prio-sc:      #a5b1bb;
}

html.dark-style {
    --gtk-sh-xs:  0 1px 4px rgba(0,0,0,.2);
    --gtk-sh-sm:  0 2px 10px rgba(0,0,0,.28), 0 1px 2px rgba(0,0,0,.18);
    --gtk-sh-md:  0 6px 24px rgba(0,0,0,.38), 0 2px 6px rgba(0,0,0,.22);
    --gtk-sh-lg:  0 12px 40px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.3);
    --gtk-border:     rgba(255,255,255,.07);
    --gtk-border-mid: rgba(255,255,255,.11);
}

/* ── 3a. KPI CARDS ISSUES ───────────────────────────────────── */
.tk-kpi {
    background: var(--bs-card-bg);
    border: 1.5px solid var(--gtk-border);
    border-radius: var(--gtk-radius);
    padding: 1rem 1.1rem .8rem;
    box-shadow: var(--gtk-sh-sm);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition:
        transform    var(--gtk-dur) var(--gtk-ease),
        box-shadow   var(--gtk-dur) var(--gtk-ease),
        border-color var(--gtk-dur) var(--gtk-ease);
    user-select: none;
}

.tk-kpi::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    border-radius: var(--gtk-radius) var(--gtk-radius) 0 0;
    opacity: 0;
    transition: opacity var(--gtk-dur);
}

.tk-kpi:hover,
.tk-kpi.kpi-active {
    transform: translateY(-3px);
    box-shadow: var(--gtk-sh-md);
}

.tk-kpi.kpi-active {
    border-width: 1.5px;
}

.tk-kpi.kpi-active::before { opacity: 1; }

/* Color themes */
.tk-kpi.kpi-c-total::before   { background: linear-gradient(90deg,#696cff,#9b9dff); }
.tk-kpi.kpi-c-sc::before      { background: linear-gradient(90deg,#8a9299,#b0bec5); }
.tk-kpi.kpi-c-nuevo::before   { background: linear-gradient(90deg,#696cff,#c7b8ff); }
.tk-kpi.kpi-c-abierto::before { background: linear-gradient(90deg,#71dd37,#06d6a0); }
.tk-kpi.kpi-c-pausado::before { background: linear-gradient(90deg,#ffab00,#ff8800); }

.tk-kpi.kpi-active.kpi-c-total   { border-color: rgba(var(--gtk-rgb),.3); }
.tk-kpi.kpi-active.kpi-c-sc      { border-color: rgba(138,146,153,.3); }
.tk-kpi.kpi-active.kpi-c-nuevo   { border-color: rgba(var(--gtk-rgb),.3); }
.tk-kpi.kpi-active.kpi-c-abierto { border-color: rgba(113,221,55,.35); }
.tk-kpi.kpi-active.kpi-c-pausado { border-color: rgba(255,171,0,.35); }

.tk-kpi-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: .5rem;
}

.tk-kpi-lbl {
    font-size: .63rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--bs-secondary-color);
}

.tk-kpi-ico {
    width: 30px; height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.kpi-c-total   .tk-kpi-ico { background: rgba(var(--gtk-rgb),.1); color: var(--gtk-primary); }
.kpi-c-sc      .tk-kpi-ico { background: rgba(138,146,153,.1);    color: #8a9299; }
.kpi-c-nuevo   .tk-kpi-ico { background: rgba(var(--gtk-rgb),.1); color: var(--gtk-primary); }
.kpi-c-abierto .tk-kpi-ico { background: rgba(113,221,55,.12);    color: #3fa82b; }
.kpi-c-pausado .tk-kpi-ico { background: rgba(255,171,0,.12);     color: #b87900; }

html.dark-style .kpi-c-abierto .tk-kpi-ico { color: #71dd37; }
html.dark-style .kpi-c-pausado .tk-kpi-ico { color: #ffab00; }

.tk-kpi-num {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
    margin-bottom: .65rem;
}

.kpi-c-total   .tk-kpi-num { color: var(--gtk-primary); }
.kpi-c-sc      .tk-kpi-num { color: #8a9299; }
.kpi-c-nuevo   .tk-kpi-num { color: var(--gtk-primary); }
.kpi-c-abierto .tk-kpi-num { color: #3fa82b; }
.kpi-c-pausado .tk-kpi-num { color: #b87900; }

html.dark-style .kpi-c-abierto .tk-kpi-num { color: #71dd37; }
html.dark-style .kpi-c-pausado .tk-kpi-num { color: #ffab00; }

.tk-kpi-bar {
    height: 3px;
    background: var(--gtk-border);
    border-radius: 3px;
    overflow: hidden;
}

.tk-kpi-fill {
    height: 100%;
    border-radius: 3px;
    transition: width .6s var(--gtk-ease);
}

.kpi-c-total   .tk-kpi-fill { background: linear-gradient(90deg,#696cff,#9b9dff); }
.kpi-c-sc      .tk-kpi-fill { background: linear-gradient(90deg,#8a9299,#b0bec5); }
.kpi-c-nuevo   .tk-kpi-fill { background: linear-gradient(90deg,#696cff,#c7b8ff); }
.kpi-c-abierto .tk-kpi-fill { background: linear-gradient(90deg,#71dd37,#06d6a0); }
.kpi-c-pausado .tk-kpi-fill { background: linear-gradient(90deg,#ffab00,#ff8800); }

/* ── 3a. STAT CHIPS (header de Issues) ─────────────────────── */
.tk-stat-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .22rem .7rem;
    border-radius: 20px;
    font-size: .71rem;
    font-weight: 600;
    border: 1.5px solid transparent;
    letter-spacing: .01em;
}

.tk-stat-chip.chip-total {
    background: rgba(var(--gtk-rgb), .08);
    color: var(--gtk-primary);
    border-color: rgba(var(--gtk-rgb), .18);
}

.tk-stat-chip.chip-sc {
    background: rgba(165, 177, 187, .12);
    color: #8a9299;
    border-color: rgba(165,177,187,.25);
}

.tk-stat-chip.chip-nuevo {
    background: rgba(var(--gtk-rgb), .08);
    color: var(--gtk-primary);
    border-color: rgba(var(--gtk-rgb), .2);
}

.tk-stat-chip.chip-abierto {
    background: rgba(113, 221, 55, .1);
    color: #3fa82b;
    border-color: rgba(113,221,55,.25);
}

html.dark-style .tk-stat-chip.chip-abierto { color: #71dd37; }

.tk-stat-chip.chip-pausado {
    background: rgba(255, 171, 0, .1);
    color: #b87900;
    border-color: rgba(255,171,0,.25);
}

html.dark-style .tk-stat-chip.chip-pausado { color: #ffab00; }

/* ── 3. FILTROS ─────────────────────────────────────────────── */

/* Dot de color dentro del chip */
.fc-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}

/* Colores de dot — Prioridad */
.fc-alta    .fc-dot { background: var(--gtk-prio-alta); }
.fc-mediana .fc-dot { background: var(--gtk-prio-mediana); }
.fc-baja    .fc-dot { background: var(--gtk-prio-baja); }
.fc-sc      .fc-dot { background: var(--gtk-prio-sc); }

/* Colores de dot — Estado */
.fc-e-sc      .fc-dot { background: #8a9299; }
.fc-e-nuevo   .fc-dot { background: var(--gtk-primary); }
.fc-e-abierto .fc-dot { background: #71dd37; }
.fc-e-pausado .fc-dot { background: #ffab00; }

/* Colores de dot — Tiempo */
.fc-t-ok     .fc-dot { background: #71dd37; }
.fc-t-warn   .fc-dot { background: #ffab00; }
.fc-t-danger .fc-dot { background: #ff4444; }

/* Active coloreados por tipo */
.fc-alta.active    { background: var(--gtk-prio-alta);    border-color: var(--gtk-prio-alta);    box-shadow: 0 3px 10px rgba(255,68,68,.3); }
.fc-mediana.active { background: var(--gtk-prio-mediana); border-color: var(--gtk-prio-mediana); box-shadow: 0 3px 10px rgba(255,171,0,.3); color: #1a1a1a; }
.fc-baja.active    { background: var(--gtk-prio-baja);    border-color: var(--gtk-prio-baja);    box-shadow: 0 3px 10px rgba(3,195,236,.3); }
.fc-sc.active      { background: var(--gtk-prio-sc);      border-color: var(--gtk-prio-sc); }

.fc-e-sc.active      { background: #8a9299;            border-color: #8a9299; }
.fc-e-nuevo.active   { background: var(--gtk-primary); border-color: var(--gtk-primary); box-shadow: 0 3px 10px rgba(var(--gtk-rgb),.3); }
.fc-e-abierto.active { background: #3fa82b;            border-color: #3fa82b; box-shadow: 0 3px 10px rgba(113,221,55,.3); }
.fc-e-pausado.active { background: #b87900;            border-color: #b87900; box-shadow: 0 3px 10px rgba(255,171,0,.3); }

.fc-t-ok.active     { background: #3fa82b; border-color: #3fa82b; }
.fc-t-warn.active   { background: #b87900; border-color: #b87900; color: #fff; }
.fc-t-danger.active { background: #cc2c2c; border-color: #cc2c2c; }

/* Hide dot when chip active (white text, dot disappears) */
.fc-alta.active .fc-dot, .fc-mediana.active .fc-dot,
.fc-baja.active .fc-dot, .fc-sc.active .fc-dot,
.fc-e-sc.active .fc-dot, .fc-e-nuevo.active .fc-dot,
.fc-e-abierto.active .fc-dot, .fc-e-pausado.active .fc-dot,
.fc-t-ok.active .fc-dot, .fc-t-warn.active .fc-dot, .fc-t-danger.active .fc-dot {
    background: rgba(255,255,255,.6);
}

/* Hover coloreados */
.fc-alta:not(.active):hover    { border-color: var(--gtk-prio-alta);    color: var(--gtk-prio-alta);    background: rgba(255,68,68,.06); }
.fc-mediana:not(.active):hover { border-color: var(--gtk-prio-mediana); color: var(--gtk-prio-mediana); background: rgba(255,171,0,.06); }
.fc-baja:not(.active):hover    { border-color: var(--gtk-prio-baja);    color: var(--gtk-prio-baja);    background: rgba(3,195,236,.06); }
.fc-e-abierto:not(.active):hover { border-color: #71dd37; color: #3fa82b; background: rgba(113,221,55,.06); }
.fc-e-pausado:not(.active):hover { border-color: #ffab00; color: #b87900; background: rgba(255,171,0,.06); }
.fc-t-danger:not(.active):hover  { border-color: #ff4444; color: #cc2c2c; background: rgba(255,68,68,.06); }

/* Contenedor principal del panel de filtros */
.tk-filter-bar {
    background: var(--bs-card-bg);
    border: 1.5px solid var(--gtk-border);
    border-radius: var(--gtk-radius);
    box-shadow: var(--gtk-sh-xs);
    overflow: hidden;
}

.tk-filter-row {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0;
    padding: .9rem 1.1rem;
}

.tk-filter-group {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    min-width: 0;
}

.tk-filter-label {
    font-size: .6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--bs-secondary-color);
    display: flex;
    align-items: center;
    gap: .3rem;
}

.tk-filter-sep {
    width: 1px;
    background: var(--gtk-border-mid);
    margin: 0 1rem;
    align-self: stretch;
    min-height: 48px;
}

.tk-filter-cat-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
    padding: .65rem 1.1rem .9rem;
    border-top: 1px solid var(--gtk-border);
    background: rgba(0,0,0,.015);
}

html.dark-style .tk-filter-cat-row {
    background: rgba(255,255,255,.018);
}

/* Priority-colored chips */
.filter-chip.chip-prio-alta.active    { background: var(--gtk-prio-alta);    border-color: var(--gtk-prio-alta);    box-shadow: 0 3px 10px rgba(255,68,68,.35); }
.filter-chip.chip-prio-mediana.active { background: var(--gtk-prio-mediana); border-color: var(--gtk-prio-mediana); box-shadow: 0 3px 10px rgba(255,171,0,.35); }
.filter-chip.chip-prio-baja.active    { background: var(--gtk-prio-baja);    border-color: var(--gtk-prio-baja);    box-shadow: 0 3px 10px rgba(3,195,236,.35); }
.filter-chip.chip-prio-sc.active      { background: var(--gtk-prio-sc);      border-color: var(--gtk-prio-sc);      }

.filter-chip.chip-prio-alta:not(.active):hover    { border-color: var(--gtk-prio-alta);    color: var(--gtk-prio-alta);    background: rgba(255,68,68,.06); }
.filter-chip.chip-prio-mediana:not(.active):hover { border-color: var(--gtk-prio-mediana); color: var(--gtk-prio-mediana); background: rgba(255,171,0,.06); }
.filter-chip.chip-prio-baja:not(.active):hover    { border-color: var(--gtk-prio-baja);    color: var(--gtk-prio-baja);    background: rgba(3,195,236,.06); }

.filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    align-items: center;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    padding: .22rem .75rem;
    border-radius: 20px;
    font-size: .71rem;
    font-weight: 500;
    cursor: pointer;
    border: 1.5px solid var(--gtk-border-mid);
    background: transparent;
    color: var(--bs-secondary-color);
    transition: all var(--gtk-dur) var(--gtk-ease);
    user-select: none;
    white-space: nowrap;
    letter-spacing: .015em;
}

.filter-chip:hover {
    border-color: rgba(var(--gtk-rgb), .5);
    color: var(--gtk-primary);
    background: rgba(var(--gtk-rgb), .05);
}

.filter-chip.active {
    background: var(--gtk-primary);
    border-color: var(--gtk-primary);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 3px 10px rgba(var(--gtk-rgb), .32);
}

/* ── 4. TICKET CARDS ────────────────────────────────────────── */
.tk-card {
    background: var(--bs-card-bg);
    border: 1.5px solid var(--gtk-border);
    border-left: 3.5px solid var(--gtk-prio-sc);
    border-radius: var(--gtk-radius);
    box-shadow: var(--gtk-sh-sm);
    cursor: pointer;
    transition:
        transform      var(--gtk-dur) var(--gtk-ease),
        box-shadow     var(--gtk-dur) var(--gtk-ease),
        border-color   var(--gtk-dur) var(--gtk-ease);
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Priority accent — left border */
.tk-card.tk-p-alta    { border-left-color: var(--gtk-prio-alta); }
.tk-card.tk-p-mediana { border-left-color: var(--gtk-prio-mediana); }
.tk-card.tk-p-baja    { border-left-color: var(--gtk-prio-baja); }
.tk-card.tk-p-sc      { border-left-color: var(--gtk-prio-sc); }

.tk-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--gtk-sh-md);
    border-color: rgba(var(--gtk-rgb), .3);
}

.tk-card.tk-p-alta:hover    { border-left-color: var(--gtk-prio-alta); }
.tk-card.tk-p-mediana:hover { border-left-color: var(--gtk-prio-mediana); }
.tk-card.tk-p-baja:hover    { border-left-color: var(--gtk-prio-baja); }

.tk-card:active { transform: translateY(-1px); }

.tk-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .6rem .9rem;
    border-bottom: 1px solid var(--gtk-border);
    background: rgba(0,0,0,.02);
}

html.dark-style .tk-card-header { background: rgba(255,255,255,.025); }

.tk-folio {
    font-family: 'SF Mono', 'Fira Code', ui-monospace, monospace;
    font-size: .67rem;
    font-weight: 700;
    color: var(--gtk-primary);
    background: rgba(var(--gtk-rgb), .1);
    padding: .17rem .48rem;
    border-radius: var(--gtk-radius-xs);
    letter-spacing: .04em;
    white-space: nowrap;
}

.tk-card-body {
    padding: .8rem .9rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.tk-title {
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--bs-body-color);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tk-cat {
    font-size: .7rem;
    color: var(--bs-secondary-color);
    display: flex;
    align-items: center;
    gap: .3rem;
}

.tk-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .5rem .9rem;
    border-top: 1px solid var(--gtk-border);
    font-size: .7rem;
}

.tk-agent {
    color: var(--bs-secondary-color);
    display: flex;
    align-items: center;
    gap: .3rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 55%;
}

.tk-date {
    color: var(--bs-secondary-color);
    white-space: nowrap;
    flex-shrink: 0;
}

.tk-ht {
    font-size: .63rem;
    font-weight: 700;
    padding: .13rem .4rem;
    border-radius: var(--gtk-radius-xs);
    white-space: nowrap;
    letter-spacing: .02em;
    flex-shrink: 0;
}

.tk-ht.ok     { background: rgba(71,222,55,.13);  color: #3fa82b; }
.tk-ht.warn   { background: rgba(255,171,0,.15);   color: #b87900; }
.tk-ht.danger { background: rgba(255,68,68,.14);   color: #cc2c2c; }

html.dark-style .tk-ht.ok     { background: rgba(113,221,55,.18);  color: #71dd37; }
html.dark-style .tk-ht.warn   { background: rgba(255,171,0,.2);    color: #ffab00; }
html.dark-style .tk-ht.danger { background: rgba(255,68,68,.2);    color: #ff4444; }

/* ── Estado badge propio (Issues cards) ────────────────────── */
.tk-estado-badge {
    display: inline-flex;
    align-items: center;
    font-size: .65rem;
    font-weight: 700;
    padding: .18rem .55rem;
    border-radius: 20px;
    letter-spacing: .03em;
    white-space: nowrap;
    flex-shrink: 0;
}

.tk-estado-badge.s-sc      { background: rgba(165,177,187,.15); color: #8a9299; }
.tk-estado-badge.s-nuevo   { background: rgba(var(--gtk-rgb),.12); color: var(--gtk-primary); }
.tk-estado-badge.s-abierto { background: rgba(113,221,55,.14); color: #3fa82b; }
.tk-estado-badge.s-proceso { background: rgba(3,195,236,.14);  color: #0295b5; }
.tk-estado-badge.s-pausado { background: rgba(255,171,0,.14);  color: #b87900; }
.tk-estado-badge.s-cerrado { background: rgba(35,52,70,.12);   color: #435971; }

html.dark-style .tk-estado-badge.s-sc      { background: rgba(165,177,187,.1);  color: #a5b1bb; }
html.dark-style .tk-estado-badge.s-nuevo   { background: rgba(var(--gtk-rgb),.15); color: #9b9dff; }
html.dark-style .tk-estado-badge.s-abierto { background: rgba(113,221,55,.15);  color: #71dd37; }
html.dark-style .tk-estado-badge.s-proceso { background: rgba(3,195,236,.15);   color: #03c3ec; }
html.dark-style .tk-estado-badge.s-pausado { background: rgba(255,171,0,.15);   color: #ffab00; }
html.dark-style .tk-estado-badge.s-cerrado { background: rgba(67,89,113,.18);   color: #7a9cb8; }

/* Prioridad chip en card lista */
.tk-prio-chip {
    display: inline-flex;
    align-items: center;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .03em;
    padding: .15rem .4rem;
    border-radius: 4px;
    text-transform: uppercase;
    flex-shrink: 0;
}
.tk-prio-chip.tk-prio-alta    { background: rgba(255,68,68,.12);    color: var(--gtk-prio-alta); }
.tk-prio-chip.tk-prio-mediana { background: rgba(255,171,0,.12);    color: #b87900; }
.tk-prio-chip.tk-prio-baja    { background: rgba(3,195,236,.12);    color: var(--gtk-prio-baja); }
.tk-prio-chip.tk-prio-sc      { background: rgba(138,146,153,.12);  color: #8a9299; }
html.dark-style .tk-prio-chip.tk-prio-mediana { color: #ffab00; }
.tk-av-unassigned { background: #d0d5da !important; color: #6c7b87 !important; }

/* Categoría chip */
.tk-cat-chip {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    font-size: .68rem;
    color: var(--bs-secondary-color);
    background: rgba(0,0,0,.04);
    border: 1px solid var(--gtk-border);
    border-radius: 5px;
    padding: .14rem .48rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 0;
}

html.dark-style .tk-cat-chip { background: rgba(255,255,255,.04); }

.tk-cat-sep {
    opacity: .35;
    margin: 0 .15rem;
}

/* Agent avatar */
.tk-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .62rem;
    font-weight: 800;
    flex-shrink: 0;
    color: #fff;
    background: var(--gtk-primary);
}

.tk-avatar.tk-av-alta    { background: var(--gtk-prio-alta); }
.tk-avatar.tk-av-mediana { background: var(--gtk-prio-mediana); color: #1a1a1a; }
.tk-avatar.tk-av-baja    { background: var(--gtk-prio-baja); }
.tk-avatar.tk-av-sc      { background: var(--gtk-prio-sc); }

.tk-agent-name {
    font-size: .72rem;
    color: var(--bs-secondary-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── 5. DRT ANALYTICS ───────────────────────────────────────── */

/* KPI Cards */
.drt-kpi {
    border: none !important;
    border-radius: var(--gtk-radius) !important;
    box-shadow: var(--gtk-sh-sm) !important;
    position: relative;
    overflow: hidden;
    transition:
        transform   var(--gtk-dur) var(--gtk-ease),
        box-shadow  var(--gtk-dur) var(--gtk-ease);
}

.drt-kpi:hover {
    transform: translateY(-3px);
    box-shadow: var(--gtk-sh-md) !important;
}

/* Top gradient strip */
.drt-kpi::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
}

/* Large background icon */
.drt-kpi::after {
    content: '';
    position: absolute;
    inset: auto -10px -10px auto;
    width: 72px; height: 72px;
    border-radius: 50%;
    opacity: .07;
}

.drt-kpi.k-primary::before  { background: linear-gradient(90deg,#696cff,#9b9dff); }
.drt-kpi.k-info::before     { background: linear-gradient(90deg,#03c3ec,#28d8a8); }
.drt-kpi.k-success::before  { background: linear-gradient(90deg,#71dd37,#3bab12); }
.drt-kpi.k-warning::before  { background: linear-gradient(90deg,#ffab00,#ff8800); }
.drt-kpi.k-dark::before     { background: linear-gradient(90deg,#435971,#233446); }

.drt-kpi.k-primary::after   { background: #696cff; }
.drt-kpi.k-info::after      { background: #03c3ec; }
.drt-kpi.k-success::after   { background: #71dd37; }
.drt-kpi.k-warning::after   { background: #ffab00; }
.drt-kpi.k-dark::after      { background: #435971; }

.drt-kpi-lbl {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.drt-kpi-num {
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
}

.drt-section-title {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--bs-secondary-color);
    margin-bottom: .8rem;
    display: flex;
    align-items: center;
    gap: .4rem;
}

/* Progress bar */
.progress-stacked-bar {
    border-radius: var(--gtk-radius-sm);
    overflow: hidden;
    gap: 2px;
    background: var(--gtk-border);
}

.progress-stacked-bar .progress-bar {
    font-size: .7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.2rem;
    transition: width .55s var(--gtk-ease);
}

/* DRT compact table */
.drt-table {
    font-size: .82rem;
}

.drt-table thead th {
    font-size: .63rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--bs-secondary-color);
    padding: .65rem .85rem;
    border-bottom: 1.5px solid var(--gtk-border-mid) !important;
    white-space: nowrap;
    background: rgba(0,0,0,.015);
}

html.dark-style .drt-table thead th {
    background: rgba(255,255,255,.02);
}

.drt-table tbody tr {
    transition: background var(--gtk-dur);
}

.drt-table tbody tr:hover {
    background: rgba(var(--gtk-rgb), .04);
}

.drt-table tbody td {
    padding: .55rem .85rem;
    border-color: var(--gtk-border) !important;
    vertical-align: middle;
}

/* ── 6. DUC PORTAL ──────────────────────────────────────────── */

/* KPI Cards */
.duc-kpi-card {
    border: none !important;
    border-radius: var(--gtk-radius) !important;
    box-shadow: var(--gtk-sh-sm) !important;
    transition:
        transform  var(--gtk-dur) var(--gtk-ease),
        box-shadow var(--gtk-dur) var(--gtk-ease);
    position: relative;
    overflow: hidden;
}

.duc-kpi-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
}

.duc-kpi-card.kpi-primary::before { background: linear-gradient(90deg,#696cff,#9b9dff); }
.duc-kpi-card.kpi-warning::before { background: linear-gradient(90deg,#ffab00,#ff8800); }
.duc-kpi-card.kpi-info::before    { background: linear-gradient(90deg,#03c3ec,#28d8a8); }
.duc-kpi-card.kpi-success::before { background: linear-gradient(90deg,#71dd37,#3bab12); }

.duc-kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--gtk-sh-md) !important;
}

.duc-kpi-label {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.duc-kpi-num {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
}

/* Folio pill en tabla */
.folio-pill {
    font-family: 'SF Mono', 'Fira Code', ui-monospace, monospace;
    font-size: .68rem;
    font-weight: 700;
    color: var(--gtk-primary);
    background: rgba(var(--gtk-rgb), .09);
    padding: .18rem .52rem;
    border-radius: var(--gtk-radius-xs);
    white-space: nowrap;
    letter-spacing: .04em;
    display: inline-block;
}

/* Search input */
.search-box {
    position: relative;
    display: flex;
    align-items: center;
}

.search-box .search-icon {
    position: absolute;
    left: .65rem;
    color: var(--bs-secondary-color);
    font-size: .95rem;
    pointer-events: none;
    z-index: 1;
}

.search-box .form-control { padding-left: 2rem; }

/* ── 7. VER TICKET — Timeline ───────────────────────────────── */
.vtk-section-title {
    font-size: .63rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--bs-secondary-color);
    margin-bottom: .9rem;
    display: flex;
    align-items: center;
    gap: .4rem;
    padding-bottom: .55rem;
    border-bottom: 1.5px solid var(--gtk-border);
}

.vtk-field-label {
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--bs-secondary-color);
    margin-bottom: .18rem;
}

.vtk-field-value {
    font-size: .875rem;
    font-weight: 500;
    color: var(--bs-body-color);
}

.vtk-timeline { padding-left: 1.4rem; }

.vtk-tl-item {
    position: relative;
    padding-bottom: 1.3rem;
}

.vtk-tl-item:last-child { padding-bottom: 0; }

.vtk-tl-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: -1.04rem;
    top: 1.2rem;
    bottom: 0;
    width: 2px;
    background: var(--gtk-border-mid);
    border-radius: 2px;
}

.vtk-tl-dot {
    position: absolute;
    left: -1.45rem;
    top: .32rem;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--gtk-primary);
    border: 2.5px solid var(--bs-body-bg);
    box-shadow: 0 0 0 2.5px rgba(var(--gtk-rgb), .25);
}

.vtk-tl-dot.first {
    background: var(--bs-card-bg);
    border-color: var(--gtk-primary);
    box-shadow: 0 0 0 2.5px rgba(var(--gtk-rgb), .18);
}

.vtk-tl-card {
    background: var(--bs-body-bg);
    border: 1px solid var(--gtk-border);
    border-radius: var(--gtk-radius-sm);
    padding: .7rem .95rem;
}

.vtk-tl-item:first-child .vtk-tl-card {
    border-color: rgba(var(--gtk-rgb), .28);
    background: rgba(var(--gtk-rgb), .035);
}

.vtk-tl-meta {
    font-size: .67rem;
    color: var(--bs-secondary-color);
    margin-top: .4rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .15rem;
}

/* ── 8. LOGIN CORPORATIVO ───────────────────────────────────── */
.corp-left {
    background: linear-gradient(155deg, #111529 0%, #1e2550 35%, #2a3580 65%, #3d4bc7 100%);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2.5rem;
    min-height: 100vh;
}

/* Decorative circles */
.corp-deco {
    position: absolute;
    width: 420px; height: 420px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.06);
    top: -120px; right: -120px;
    pointer-events: none;
}

.corp-deco::after {
    content: '';
    position: absolute;
    inset: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.05);
}

.corp-deco2 {
    position: absolute;
    width: 280px; height: 280px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.05);
    bottom: 60px; left: -90px;
    pointer-events: none;
}

.corp-left-content {
    position: relative;
    z-index: 1;
    max-width: 460px;
    margin: 2.5rem 0;
}

.corp-logo {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-bottom: 3rem;
}

.corp-logo-icon {
    width: 48px; height: 48px;
    border-radius: 13px;
    background: rgba(255,255,255,.12);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(0,0,0,.25);
}

.corp-logo-text {
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.025em;
    line-height: 1;
}

.corp-logo-sub {
    font-size: .7rem;
    color: rgba(255,255,255,.5);
    margin-top: .2rem;
    letter-spacing: .03em;
}

.corp-headline {
    font-size: 2.4rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.18;
    letter-spacing: -.03em;
    margin-bottom: .8rem;
}

.corp-headline em {
    font-style: normal;
    background: linear-gradient(90deg, #a5b4fc 20%, #e0c3fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.corp-tagline {
    color: rgba(255,255,255,.55);
    font-size: .875rem;
    line-height: 1.7;
    margin-bottom: 2.2rem;
}

.corp-features {
    list-style: none;
    padding: 0; margin: 0;
    display: flex;
    flex-direction: column;
    gap: .9rem;
}

.corp-features li {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    color: rgba(255,255,255,.7);
    font-size: .85rem;
    line-height: 1.55;
}

.feat-icon {
    flex-shrink: 0;
    width: 32px; height: 32px;
    border-radius: 9px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .88rem;
    color: rgba(255,255,255,.85);
}

.corp-footer {
    position: relative;
    z-index: 1;
    color: rgba(255,255,255,.3);
    font-size: .7rem;
    letter-spacing: .04em;
}

/* Panel derecho */
.corp-right {
    background: var(--bs-body-bg);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 1.25rem 2rem;
    position: relative;
}

.corp-form-wrap {
    width: 100%;
    max-width: 400px;
    margin: auto;
    padding: 1.5rem 0;
}

.corp-form-logo { margin-bottom: 2rem; }

.corp-form-logo .brand {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--bs-body-color);
    letter-spacing: -.015em;
}

.corp-welcome {
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -.03em;
    margin-bottom: .3rem;
    color: var(--bs-body-color);
    line-height: 1.1;
}

.corp-sub {
    font-size: .875rem;
    color: var(--bs-secondary-color);
    margin-bottom: 2rem;
}

.corp-label {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--bs-secondary-color);
    margin-bottom: .38rem;
    display: block;
}

.corp-input {
    border: 1.5px solid var(--gtk-border-mid);
    border-radius: var(--gtk-radius-sm);
    font-size: .9rem;
    padding: .62rem .85rem;
    transition:
        border-color var(--gtk-dur) var(--gtk-ease),
        box-shadow   var(--gtk-dur) var(--gtk-ease);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
}

.corp-input:focus {
    border-color: var(--gtk-primary);
    box-shadow: 0 0 0 3.5px rgba(var(--gtk-rgb), .14);
    outline: none;
}

.corp-btn {
    padding: .7rem 1rem;
    border-radius: var(--gtk-radius-sm);
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .025em;
    transition:
        box-shadow var(--gtk-dur) var(--gtk-ease),
        transform  var(--gtk-dur) var(--gtk-ease);
}

.corp-btn:hover {
    box-shadow: 0 5px 18px rgba(var(--gtk-rgb), .42);
    transform: translateY(-1px);
}

.corp-right .input-group .corp-input:not(:last-child) {
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.corp-right .input-group-text {
    border: 1.5px solid var(--gtk-border-mid);
    border-left: none;
    border-radius: 0 var(--gtk-radius-sm) var(--gtk-radius-sm) 0;
    background: var(--bs-body-bg);
    color: var(--bs-secondary-color);
    cursor: pointer;
    transition: color var(--gtk-dur);
}

.corp-right .input-group-text:hover { color: var(--gtk-primary); }

.corp-divider {
    font-size: .7rem;
    color: var(--bs-secondary-color);
    letter-spacing: .04em;
}

.corp-version {
    font-size: .63rem;
    color: var(--bs-secondary-color);
    opacity: .5;
    letter-spacing: .06em;
}

/* ── 9. TABLAS GLOBALES ─────────────────────────────────────── */
.table th {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--bs-secondary-color);
    padding-top: .7rem;
    padding-bottom: .7rem;
    border-color: var(--gtk-border-mid) !important;
    white-space: nowrap;
}

.table td {
    vertical-align: middle;
    border-color: var(--gtk-border) !important;
    font-size: .875rem;
}

.table-hover tbody tr:hover {
    background: rgba(var(--gtk-rgb), .03);
}

/* ── 10. CARDS GLOBALES ─────────────────────────────────────── */
.card {
    border-color: var(--gtk-border) !important;
    border-radius: var(--gtk-radius) !important;
}

.card-header {
    border-color: var(--gtk-border) !important;
}

.card-footer {
    border-color: var(--gtk-border) !important;
}

/* ── 11. BADGES ─────────────────────────────────────────────── */
.badge {
    font-size: .7rem;
    letter-spacing: .02em;
    font-weight: 600;
}

/* ── 12. BOTONES ────────────────────────────────────────────── */
.btn {
    border-radius: var(--gtk-radius-sm);
    letter-spacing: .01em;
    transition:
        background     var(--gtk-dur) var(--gtk-ease),
        border-color   var(--gtk-dur) var(--gtk-ease),
        box-shadow     var(--gtk-dur) var(--gtk-ease),
        transform      var(--gtk-dur) var(--gtk-ease);
}

.btn-primary:not(:disabled):hover {
    box-shadow: 0 4px 16px rgba(var(--gtk-rgb), .42);
    transform: translateY(-1px);
}

.btn-primary:not(:disabled):active { transform: none; }

/* ── 13. EMPTY STATES ───────────────────────────────────────── */
.gtk-empty-icon {
    opacity: .14;
    font-size: 4rem;
    display: block;
    text-align: center;
    line-height: 1;
}

/* ── 14. MODAL TICKET (EditaTicket) ─────────────────────────── */

.tk-modal-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .85rem 1.25rem;
    border-bottom: 1px solid var(--gtk-border);
    background: var(--bs-card-bg);
    border-left: 4px solid var(--gtk-prio-sc);
}
.tk-modal-hd.tk-p-alta    { border-left-color: var(--gtk-prio-alta); }
.tk-modal-hd.tk-p-mediana { border-left-color: var(--gtk-prio-mediana); }
.tk-modal-hd.tk-p-baja    { border-left-color: var(--gtk-prio-baja); }

.tk-modal-title-bar {
    padding: .5rem 1.25rem .5rem calc(1.25rem + 4px);
    font-size: .91rem;
    font-weight: 600;
    background: var(--bs-tertiary-bg, rgba(0,0,0,.02));
    border-bottom: 1px solid var(--gtk-border);
    color: var(--bs-body-color);
    letter-spacing: -.01em;
}

.tk-modal-body-row { min-height: 60vh; }

.tk-modal-right {
    border-left: 1px solid var(--gtk-border);
    background: var(--bs-tertiary-bg, rgba(0,0,0,.015));
}
.tk-modal-right .card {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.tk-modal-right .card-header {
    background: transparent;
    border-bottom: 1px solid var(--gtk-border);
    padding: .9rem 1rem;
}

.tk-ms {
    background: var(--bs-card-bg);
    border: 1px solid var(--gtk-border);
    border-radius: var(--gtk-radius-sm);
    padding: .95rem 1rem;
    box-shadow: var(--gtk-sh-xs);
}
.tk-ms-hd {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--bs-secondary-color);
    margin-bottom: .8rem;
}
.tk-ms-hd i { font-size: .88rem; }

.tk-form-label {
    font-size: .69rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    margin-bottom: .18rem;
    display: block;
    letter-spacing: .02em;
}

.tk-prio-pill {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .66rem;
    font-weight: 700;
    padding: .17em .6em;
    border-radius: 30px;
    text-transform: uppercase;
    letter-spacing: .07em;
}
.tk-prio-pill.prio-alta    { background: rgba(255,68,68,.12);   color: var(--gtk-prio-alta); }
.tk-prio-pill.prio-mediana { background: rgba(255,171,0,.12);   color: #b87900; }
.tk-prio-pill.prio-baja    { background: rgba(3,195,236,.12);   color: var(--gtk-prio-baja); }
.tk-prio-pill.prio-sc      { background: rgba(138,146,153,.12); color: #8a9299; }
html.dark-style .tk-prio-pill.prio-mediana { color: #ffab00; }

.tk-kfp-bar {
    display: flex;
    align-items: center;
    gap: .28rem;
    flex-wrap: wrap;
}
.tk-kfp-lbl {
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--bs-secondary-color);
    flex-shrink: 0;
}
.tk-kfp-btn {
    border: 1px solid var(--gtk-border-mid);
    background: var(--bs-card-bg);
    color: var(--bs-body-color);
    padding: .2em .5em;
    border-radius: 5px;
    font-size: .67rem;
    font-weight: 600;
    cursor: pointer;
    line-height: 1.4;
    transition: all var(--gtk-dur) var(--gtk-ease);
}
.tk-kfp-btn:hover {
    background: var(--gtk-primary);
    border-color: var(--gtk-primary);
    color: #fff;
    box-shadow: 0 2px 8px rgba(var(--gtk-rgb),.35);
}

.tk-adj-card {
    background: var(--bs-tertiary-bg, rgba(0,0,0,.02));
    border: 1px solid var(--gtk-border);
    border-radius: var(--gtk-radius-sm);
    overflow: hidden;
    text-align: center;
    transition: box-shadow var(--gtk-dur);
}
.tk-adj-card:hover { box-shadow: var(--gtk-sh-sm); }
.tk-adj-thumb {
    width: 100%;
    height: 80px;
    object-fit: cover;
    display: block;
}
.tk-adj-icon {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--bs-secondary-color);
}
.tk-adj-name {
    font-size: .67rem;
    font-weight: 500;
    padding: .3rem .5rem .1rem;
    color: var(--bs-body-color);
}
.tk-adj-dl {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    font-size: .67rem;
    font-weight: 600;
    padding: .35rem;
    color: var(--gtk-primary);
    text-decoration: none;
    border-top: 1px solid var(--gtk-border);
    transition: background var(--gtk-dur);
}
.tk-adj-dl:hover { background: rgba(var(--gtk-rgb),.07); }

/* ── 15. VER TICKET — adjuntos con preview ───────────────────── */
.vtk-adj-row {
    display: flex;
    align-items: center;
    gap: .7rem;
    border: 1px solid var(--gtk-border);
    border-radius: var(--gtk-radius-sm);
    padding: .6rem .8rem;
    background: var(--bs-card-bg);
    transition: box-shadow var(--gtk-dur);
}
.vtk-adj-row:hover { box-shadow: var(--gtk-sh-xs); }
.vtk-adj-icon { font-size: 1.6rem; }

/* Modal preview — sin scroll interno, iframe llena el espacio */
#modalPreview .modal-content { overflow: hidden; border-radius: var(--gtk-radius); }
#modalPreview .modal-header  { border-bottom: 1px solid var(--gtk-border); }
#pvBody iframe { display: block; }
#pvBody img    { display: block; }

/* ── 16. VER TICKET — rediseño completo ─────────────────────── */

/* breadcrumb */
.vtk-breadcrumb { display:flex; align-items:center; gap:.4rem; font-size:.8rem; }
.vtk-bc-link { color:var(--bs-secondary-color); text-decoration:none; display:flex; align-items:center; gap:.3rem; transition:color var(--gtk-dur); }
.vtk-bc-link:hover { color:var(--gtk-primary); }
.vtk-bc-sep { color:var(--gtk-border-mid); font-size:.7rem; }
.vtk-bc-current { font-weight:700; color:var(--gtk-primary); font-family:monospace; }

/* hero header */
.vtk-hero {
    background: var(--bs-card-bg);
    border: 1px solid var(--gtk-border);
    border-left: 4px solid var(--gtk-prio-sc);
    border-radius: var(--gtk-radius);
    padding: 1.1rem 1.35rem 1rem;
    box-shadow: var(--gtk-sh-xs);
}
.vtk-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .6rem;
}
.vtk-hero-time {
    font-size: .72rem;
    color: var(--bs-secondary-color);
    display: flex;
    align-items: center;
    gap: .3rem;
}
.vtk-folio-badge {
    font-family: monospace;
    font-weight: 700;
    font-size: .78rem;
    padding: .2em .65em;
    background: rgba(var(--gtk-rgb), .1);
    color: var(--gtk-primary);
    border-radius: 5px;
    border: 1px solid rgba(var(--gtk-rgb), .2);
}
.vtk-hero-title {
    font-size: 1.1rem;
    font-weight: 800;
    margin: 0 0 .35rem;
    line-height: 1.3;
    letter-spacing: -.01em;
}
.vtk-hero-cat {
    font-size: .75rem;
    color: var(--bs-secondary-color);
    display: flex;
    align-items: center;
    gap: .35rem;
}
.vtk-prio-pill {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .67rem;
    font-weight: 700;
    padding: .22em .7em;
    border-radius: 30px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.vtk-prio-alta    { background: rgba(255,68,68,.12);  color: var(--gtk-prio-alta); }
.vtk-prio-mediana { background: rgba(255,171,0,.12); color: #b87900; }
.vtk-prio-baja    { background: rgba(3,195,236,.12);  color: var(--gtk-prio-baja); }
.vtk-prio-sc      { background: rgba(138,146,153,.12); color: #8a9299; }

/* status stepper */
.vtk-stepper {
    display: flex;
    align-items: center;
    overflow-x: auto;
    padding-bottom: .25rem;
}
.vtk-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    flex-shrink: 0;
    position: relative;
}
.vtk-step-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid var(--gtk-border-mid);
    background: var(--bs-card-bg);
    color: var(--bs-secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    font-weight: 700;
    transition: all var(--gtk-dur);
}
.vtk-step-label {
    font-size: .6rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
    font-weight: 600;
    letter-spacing: .02em;
}
.vtk-step-line {
    flex: 1;
    height: 2px;
    background: var(--gtk-border-mid);
    min-width: 18px;
    margin: 0 .1rem;
    margin-bottom: 18px;
    border-radius: 2px;
    transition: background var(--gtk-dur);
}
.vtk-step-line-done { background: rgba(var(--gtk-rgb), .4); }
.vtk-step-done .vtk-step-circle {
    background: rgba(var(--gtk-rgb), .1);
    border-color: var(--gtk-primary);
    color: var(--gtk-primary);
}
.vtk-step-done .vtk-step-label { color: var(--gtk-primary); }
.vtk-step-active .vtk-step-circle {
    background: var(--gtk-primary);
    border-color: var(--gtk-primary);
    color: #fff;
    box-shadow: 0 0 0 3px rgba(var(--gtk-rgb), .2);
}
.vtk-step-active .vtk-step-label { color: var(--gtk-primary); font-weight:700; }

/* descripción */
.vtk-desc-box {
    background: var(--bs-tertiary-bg, rgba(0,0,0,.025));
    border: 1px solid var(--gtk-border);
    border-radius: var(--gtk-radius-sm);
    padding: .85rem 1rem;
    font-size: .84rem;
    line-height: 1.65;
    white-space: pre-wrap;
    color: var(--bs-body-color);
}

/* adjunto mejorado */
.vtk-adj-icon-wrap {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.vtk-adj-img  { background:rgba(3,195,236,.1);  color:#03c9ec; }
.vtk-adj-pdf  { background:rgba(255,68,68,.1);   color:var(--gtk-prio-alta); }
.vtk-adj-file { background:rgba(138,146,153,.1); color:#8a9299; }

/* timeline: primer item destacado */
.vtk-tl-card-first {
    border-left: 3px solid var(--gtk-primary) !important;
    background: rgba(var(--gtk-rgb), .035) !important;
}
.vtk-tl-sep { margin: 0 .2rem; }

/* métricas lado derecho */
.vtk-metric {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: var(--bs-tertiary-bg, rgba(0,0,0,.02));
    border: 1px solid var(--gtk-border);
    border-radius: var(--gtk-radius-sm);
    padding: .6rem .7rem;
}
.vtk-metric-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.vtk-metric-val { min-width: 0; }

/* info-row (solicitante / detalle) */
.vtk-info-row {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--gtk-border);
    font-size: .83rem;
}
.vtk-info-row:last-child { border-bottom: 0; padding-bottom: 0; }
.vtk-info-row > .ti { margin-top: .12rem; font-size: .95rem; flex-shrink: 0; }

.vtk-detail-grid { display: flex; flex-direction: column; }

/* ── 17. Issues — empresa y solicitante en card ─────────────── */
.tk-client-info {
    margin-top: .5rem;
    display: flex;
    flex-direction: column;
    gap: .22rem;
}
.tk-client-row {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-size: .68rem;
    color: var(--bs-secondary-color);
    overflow: hidden;
}
.tk-client-row .ti { font-size: .8rem; flex-shrink: 0; color: var(--gtk-primary); opacity: .7; }
.tk-client-row-user .ti { color: #71dd37; }
.tk-client-name { font-weight: 600; color: var(--bs-body-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
.tk-rut-chip {
    font-family: monospace;
    font-size: .6rem;
    font-weight: 600;
    padding: .1em .4em;
    background: rgba(var(--gtk-rgb), .08);
    color: var(--gtk-primary);
    border-radius: 4px;
    flex-shrink: 0;
    white-space: nowrap;
}
.tk-rut-user { background: rgba(113,221,55,.1); color: #3fa82b; }

/* ── Issues — Solicitante hero (ancho completo, sobre Gestión) ── */
.tk-sol-hero {
    background: linear-gradient(135deg, rgba(var(--gtk-rgb),.12) 0%, rgba(var(--gtk-rgb),.05) 100%);
    border-top: 1px solid rgba(var(--gtk-rgb),.15);
    border-bottom: 3px solid rgba(var(--gtk-rgb),.3);
    padding: .8rem 1.25rem;
}
.tk-sol-hero-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.tk-sol-hero-info { display: flex; align-items: center; gap: 1rem; flex: 1; min-width: 0; }
.tk-sol-hero-label {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-size: .65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--gtk-primary);
    white-space: nowrap;
    flex-shrink: 0;
}
.tk-sol-hero-label .ti { font-size: .9rem; }
.tk-sol-hero-rows { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.tk-sol-empresa-row, .tk-sol-user-row {
    display: flex;
    align-items: center;
    gap: .35rem;
    overflow: hidden;
}
.tk-sol-empresa-row .ti { color: var(--gtk-primary); font-size: .95rem; flex-shrink: 0; }
.tk-sol-user-row .ti    { color: #71dd37; font-size: .85rem; flex-shrink: 0; }
.tk-sol-empresa-nombre {
    font-weight: 700;
    font-size: .9rem;
    color: var(--bs-body-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tk-sol-user-row span:not([class]) { font-size: .8rem; color: var(--bs-secondary-color); }
.tk-sol-hero-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .75rem;
    font-weight: 600;
    padding: .4rem .85rem;
    border-radius: 6px;
    border: 1.5px solid var(--gtk-primary);
    background: transparent;
    color: var(--gtk-primary);
    cursor: pointer;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.tk-sol-hero-btn:hover { background: var(--gtk-primary); color: #fff; }
.tk-sol-hero-btn .ti { font-size: .9rem; }
.tk-sol-adj-btn { border-color: rgba(113,221,55,.6); color: #3fa82b; }
.tk-sol-adj-btn:hover { background: #3fa82b; border-color: #3fa82b; color: #fff; }
.tk-sol-adj-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: currentColor;
    color: #fff;
    border-radius: 20px;
    font-size: .62rem;
    font-weight: 800;
    min-width: 1.2rem;
    height: 1.2rem;
    padding: 0 .3rem;
    line-height: 1;
}
.tk-sol-adj-btn .tk-sol-adj-badge { background: #3fa82b; color: #fff; }
.tk-sol-adj-btn:hover .tk-sol-adj-badge { background: rgba(255,255,255,.3); }
.tk-adj-clickable { cursor: pointer; }
.tk-adj-clickable:hover { border-color: var(--gtk-primary); box-shadow: 0 0 0 2px rgba(var(--gtk-rgb),.2); }

/* ── Issues ficha — referencia de cliente (legacy, mantenido) ─── */
.tk-cliente-ref {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: rgba(var(--gtk-rgb), .06);
    border: 1px solid rgba(var(--gtk-rgb), .18);
    border-radius: 8px;
    padding: .55rem .85rem;
}
.tk-cliente-ref-info { display: flex; flex-direction: column; gap: .22rem; flex: 1; min-width: 0; }
.tk-cliente-ref-row {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .75rem;
    overflow: hidden;
}
.tk-cliente-ref-row .ti { color: var(--gtk-primary); font-size: .9rem; flex-shrink: 0; }
.tk-cliente-ref-row.tk-cliente-ref-user .ti { color: #71dd37; }
.tk-cliente-ref-nombre { font-weight: 700; font-size: .8rem; color: var(--bs-body-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-cliente-ref-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .72rem;
    font-weight: 600;
    padding: .3rem .65rem;
    border-radius: 6px;
    border: 1px solid rgba(var(--gtk-rgb), .4);
    background: transparent;
    color: var(--gtk-primary);
    cursor: pointer;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.tk-cliente-ref-btn:hover { background: var(--gtk-primary); color: #fff; }
.tk-cliente-ref-btn .ti { font-size: .85rem; }

/* ── Modal datos del cliente ─────────────────────────────────── */
.tk-cdc-label {
    font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--bs-secondary-color);
}
.tk-cdc-section { padding: .75rem 0; border-bottom: 1px solid rgba(var(--bs-body-color-rgb),.07); }
.tk-cdc-section:last-child { border-bottom: none; }

/* tabla de campos label / value */
.tk-cdc-table { border-collapse: collapse; }
.tk-cdc-tr td { padding: .28rem .3rem; vertical-align: middle; }
.tk-cdc-td-icon { color: var(--bs-secondary-color); font-size: .85rem; width: 1.5rem; text-align: center; }
.tk-cdc-td-lbl  { font-size: .72rem; font-weight: 600; color: var(--bs-secondary-color); white-space: nowrap; padding-right: .6rem; }
.tk-cdc-td-val  { font-size: .82rem; word-break: break-word; }

/* card solicitante */
.tk-cdc-sol-card {
    background: rgba(var(--gtk-rgb),.05);
    border: 1px solid rgba(var(--gtk-rgb),.15);
    border-radius: 8px;
    padding: .65rem .75rem;
}
.tk-cdc-link { color: var(--gtk-primary); text-decoration: none; }
.tk-cdc-link:hover { text-decoration: underline; }

/* ── 18. DUC Index — badge antigüedad ───────────────────────── */
.duc-elapsed {
    display: inline-flex;
    align-items: center;
    font-size: .67rem;
    font-weight: 700;
    padding: .18em .55em;
    border-radius: 20px;
    margin-top: .25rem;
    letter-spacing: .01em;
}