/* FinanzApp Control — Tickets premium layer
   Se carga después de styles.css y premium-ui.css. Solo capa visual del
   módulo Soporte: bandejas, KPIs, detalle y composer de respuesta. */

/* ---------- Bandejas ---------- */
.ticket-queue-switcher { border-color: var(--premium-line, var(--border-strong)); box-shadow: var(--premium-shadow, none); }
.ticket-queue-tabs { gap: 2px; }
.ticket-queue-tabs button { transition: background .16s ease, color .16s ease, box-shadow .16s ease; }
.ticket-queue-tabs button:not(.active):hover { color: var(--text-primary); background: color-mix(in srgb, var(--text-primary) 7%, transparent); }
.ticket-queue-tabs button:focus-visible, .kpi-card.is-clickable:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.kpi-card.is-clickable { cursor: pointer; position: relative; transition: transform .16s ease, border-color .16s ease, box-shadow .2s ease; }
.kpi-card.is-clickable::after {
    content: "Ver →"; position: absolute; right: 14px; bottom: 11px;
    color: var(--brand); font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
    opacity: 0; transform: translateX(-4px); transition: opacity .16s ease, transform .16s ease;
}
.kpi-card.is-clickable:hover { transform: translateY(-2px); border-color: var(--brand-ring); box-shadow: var(--premium-shadow-hover, 0 12px 30px rgba(0,0,0,.25)); }
.kpi-card.is-clickable:hover::after, .kpi-card.is-clickable:focus-visible::after { opacity: 1; transform: none; }
.kpi-card.is-clickable:active { transform: translateY(0); }

.ticket-queue-alert {
    display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 11px 14px;
    border: 1px solid color-mix(in srgb, var(--warning) 42%, var(--border)); border-radius: var(--r-md);
    background: linear-gradient(100deg, var(--warning-soft), transparent 70%);
    color: var(--text-secondary); font-size: 12.5px; line-height: 1.45;
}
.ticket-queue-alert[hidden] { display: none; }
.ticket-queue-alert svg { width: 17px; height: 17px; flex: none; color: var(--warning); }
.ticket-queue-alert b { color: var(--text-primary); }
.ticket-queue-panel .panel-head { flex-wrap: wrap; gap: 6px 14px; }
.ticket-queue-meta { margin-left: auto; color: var(--text-muted); font-family: var(--font-mono); font-size: 11px; }
.ticket-chip-clear {
    display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; padding: 2px 8px;
    border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--border)); border-radius: 999px;
    background: var(--danger-soft); color: var(--danger); font: 700 10.5px var(--font-sans, inherit); cursor: pointer;
}
.ticket-chip-clear svg { width: 11px; height: 11px; }

.ticket-row td { vertical-align: middle; }
.ticket-row.is-finished td:not(:last-child) { opacity: .6; }
.ticket-row:hover.is-finished td:not(:last-child) { opacity: .95; }
.ticket-row .btn-secondary { transition: transform .12s ease, border-color .15s ease, background .15s ease; }
.ticket-row .btn-secondary:hover { transform: translateY(-1px); border-color: var(--brand-ring); background: var(--brand-soft); color: var(--brand); }
.ticket-assignee-label { display: inline-flex; align-items: center; gap: 4px; }
.ticket-assignee-label svg { width: 11px; height: 11px; }
.ticket-assignee-label.is-none { color: var(--text-muted); font-weight: 600; }
.ticket-rel { display: block; margin-top: 2px; color: var(--text-muted); font-size: 10.5px; }

.ticket-empty { display: grid; justify-items: center; gap: 6px; padding: 18px 12px; color: var(--text-muted); }
.ticket-empty svg { width: 30px; height: 30px; color: var(--brand); opacity: .75; }
.ticket-empty strong { color: var(--text-primary); font-size: 14px; }
.ticket-empty span { max-width: 420px; font-size: 12.5px; line-height: 1.5; }
.ticket-empty b { color: var(--text-secondary); }
.ticket-empty.is-error svg { color: var(--danger); }
.ticket-skeleton { display: grid; gap: 12px; padding: 14px 8px; }
.ticket-skeleton i {
    display: block; height: 16px; border-radius: 6px;
    background: linear-gradient(90deg, var(--bg-elevated) 25%, color-mix(in srgb, var(--text-primary) 9%, var(--bg-elevated)) 50%, var(--bg-elevated) 75%);
    background-size: 200% 100%; animation: ticket-shimmer 1.3s linear infinite;
}
.ticket-skeleton i:nth-child(2) { width: 82%; }
.ticket-skeleton i:nth-child(3) { width: 64%; }
@keyframes ticket-shimmer { to { background-position: -200% 0; } }

/* ---------- Detalle del ticket ---------- */
.ticket-detail-card { border-radius: 18px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 0 1px var(--border); }
.ticket-detail-card .modal-header {
    position: relative; padding: 20px 26px 18px;
    background: radial-gradient(900px 220px at 0% -40%, color-mix(in srgb, var(--brand) 20%, transparent), transparent 62%), var(--bg-card-solid);
}
.ticket-detail-card .modal-header::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: linear-gradient(90deg, var(--brand-ring), transparent 70%); }
.ticket-detail-card .modal-header h2 { font-size: 22px; letter-spacing: -.02em; line-height: 1.25; }
.ticket-detail-scroll { padding: 20px 26px 22px; background: color-mix(in srgb, var(--bg-sidebar) 92%, black); scroll-behavior: smooth; }

.ticket-stepper { display: flex; flex-wrap: wrap; align-items: center; row-gap: 6px; margin-top: 4px; }
.ticket-step { display: inline-flex; align-items: center; color: var(--text-muted); font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.ticket-step i { flex: none; width: 10px; height: 10px; margin-right: 7px; border: 2px solid var(--border-strong); border-radius: 50%; }
.ticket-step + .ticket-step::before { content: ""; width: 26px; height: 2px; margin: 0 9px; border-radius: 2px; background: var(--border-strong); }
.ticket-step.is-done { color: var(--text-secondary); }
.ticket-step.is-done i, .ticket-step.is-current i { border-color: var(--brand); background: var(--brand); }
.ticket-step.is-done + .ticket-step::before { background: var(--brand); }
.ticket-step.is-current { color: var(--brand); }
.ticket-step.is-current i { box-shadow: 0 0 0 4px var(--brand-soft), 0 0 12px var(--brand-glow); }
.ticket-stepper.is-rejected .ticket-step i { border-color: var(--danger); background: var(--danger); box-shadow: 0 0 0 4px var(--danger-soft); }
.ticket-stepper.is-rejected .ticket-step { color: var(--danger); }

.ticket-description-card, .ticket-properties-card, .ticket-attachments-card {
    border-color: var(--premium-line, var(--border)); border-radius: 14px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--text-primary) 3%, var(--bg-elevated)), var(--bg-elevated));
    box-shadow: inset 0 1px 0 var(--premium-highlight, rgba(255,255,255,.05));
}
.ticket-detail-description { font-size: 13.5px; line-height: 1.6; color: var(--text-primary); }
.ticket-detail-section-title { margin-top: 6px; font-size: 13px; letter-spacing: .01em; }

/* Timeline */
.ticket-comments-list { gap: 12px; padding-left: 0; }
.ticket-comment-card {
    grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; padding: 12px 14px; border-radius: 14px;
    border-color: var(--premium-line, var(--border));
    background: color-mix(in srgb, var(--text-primary) 3.5%, var(--bg-elevated));
    transition: border-color .16s ease, transform .16s ease;
}
.ticket-comment-card:hover { border-color: var(--border-strong); }
.ticket-comment-card::before { left: 29px; }
.ticket-comment-avatar {
    width: 34px; height: 34px; font-size: 11.5px; font-weight: 800; letter-spacing: .02em;
    border: 1px solid var(--border-strong); background: linear-gradient(135deg, var(--bg-input), var(--bg-elevated)); color: var(--text-secondary);
}
.ticket-comment-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.ticket-comment-meta strong { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13px; }
.ticket-comment-meta time { flex: none; color: var(--text-muted); font-family: var(--font-mono); font-size: 10.5px; }
.ticket-comment-text { margin: 0; color: var(--text-primary); font-size: 13.5px; line-height: 1.6; overflow-wrap: anywhere; white-space: pre-wrap; }
.ticket-comment-card.is-mine { border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); background: linear-gradient(135deg, var(--brand-soft), transparent 70%), var(--bg-elevated); }
.ticket-comment-card.is-internal {
    border-style: dashed; border-color: color-mix(in srgb, var(--accent-violet) 55%, var(--border));
    background: linear-gradient(135deg, var(--accent-violet-soft), transparent 75%), var(--bg-elevated);
}
.ticket-own-badge, .ticket-note-badge {
    display: inline-flex; align-items: center; margin: 0; padding: 2px 7px; border-radius: 999px;
    font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}
.ticket-own-badge { border: 1px solid var(--brand-ring); background: var(--brand-soft); color: var(--brand); }
.ticket-note-badge { border: 1px solid color-mix(in srgb, var(--accent-violet) 50%, transparent); background: var(--accent-violet-soft); color: var(--accent-violet); }

.ticket-event-card {
    display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px; align-items: center;
    margin: 0; padding: 2px 4px 2px 12px; border: 0; background: transparent; box-shadow: none;
}
.ticket-event-card::after { content: none; }
.ticket-event-card::before { left: 22px; }
.ticket-event-card:hover { border-color: transparent; }
.ticket-event-dot { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--bg-card-solid); color: var(--text-muted); z-index: 1; }
.ticket-event-dot svg { width: 11px; height: 11px; }
.ticket-event-card .ticket-comment-meta { grid-column: 2; margin: 0; }
.ticket-event-text { color: var(--text-secondary); font-size: 12px; font-weight: 500; }
.ticket-event-text b { color: var(--text-primary); font-weight: 700; }
.ticket-event-card.is-internal { border: 0; background: transparent; }
.ticket-event-card.is-internal .ticket-event-dot { color: var(--accent-violet); border-color: color-mix(in srgb, var(--accent-violet) 45%, var(--border)); }

/* Panel de gestión */
.ticket-properties-card { padding: 16px; position: sticky; top: 0; }
.ticket-properties-title { margin: 0 0 12px; }
.ticket-detail-field { border-radius: 10px; background: color-mix(in srgb, var(--bg-input) 70%, transparent); transition: border-color .15s ease; }
.ticket-detail-field:focus-within { border-color: var(--brand-ring); }
.ticket-detail-controls.is-locked { opacity: .72; }
.ticket-detail-controls.is-locked .ticket-detail-field { pointer-events: none; }

/* ---------- Composer ---------- */
.ticket-reply-full {
    position: sticky; bottom: -22px; z-index: 3; margin-top: 20px; padding: 12px; gap: 10px;
    border: 1px solid var(--border-strong); border-radius: 16px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--text-primary) 4%, var(--bg-card-solid)), var(--bg-card-solid));
    box-shadow: 0 -14px 34px rgba(0,0,0,.35), 0 0 0 1px var(--border);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.ticket-reply-full:focus-within { border-color: var(--brand); box-shadow: 0 -14px 34px rgba(0,0,0,.35), 0 0 0 3px var(--brand-soft); }
.ticket-reply-full.is-internal {
    border-color: color-mix(in srgb, var(--accent-violet) 60%, var(--border));
    background: linear-gradient(180deg, var(--accent-violet-soft), var(--bg-card-solid) 70%);
}
.ticket-reply-full.is-internal:focus-within { border-color: var(--accent-violet); box-shadow: 0 -14px 34px rgba(0,0,0,.35), 0 0 0 3px var(--accent-violet-soft); }
.ticket-reply-full.is-dragging { border-style: dashed; border-color: var(--brand); background: var(--brand-soft); }
.ticket-reply-full.is-dragging::after {
    content: "Soltá los archivos para adjuntarlos"; position: absolute; inset: 0; display: grid; place-items: center;
    border-radius: inherit; background: color-mix(in srgb, var(--bg-card-solid) 80%, transparent);
    color: var(--brand); font-weight: 800; font-size: 13px; pointer-events: none;
}

.ticket-reply-modes { display: flex; align-items: center; gap: 4px; padding: 0; border: 0; }
.ticket-reply-modes button {
    display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 13px;
    border: 1px solid transparent; border-radius: 9px; background: transparent;
    color: var(--text-secondary); font: 700 12px var(--font-sans, inherit); cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.ticket-reply-modes button svg { width: 14px; height: 14px; }
.ticket-reply-modes button:hover { color: var(--text-primary); background: color-mix(in srgb, var(--text-primary) 7%, transparent); }
.ticket-reply-modes button.is-active[data-reply-mode="public"] { color: var(--brand); border-color: var(--brand-ring); background: var(--brand-soft); }
.ticket-reply-modes button.is-active[data-reply-mode="internal"] { color: var(--accent-violet); border-color: color-mix(in srgb, var(--accent-violet) 50%, transparent); background: var(--accent-violet-soft); }
.ticket-reply-hint { margin-left: auto; color: var(--text-muted); font-size: 10.5px; }

.ticket-reply-full .ticket-reply-textarea {
    min-height: 84px; max-height: 240px; padding: 12px 14px; resize: none;
    border: 1px solid var(--border); border-radius: 11px; background: var(--bg-input);
    font-size: 13.5px; line-height: 1.55; transition: border-color .15s ease, background .15s ease;
}
.ticket-reply-full .ticket-reply-textarea:focus { background: var(--bg-input-focus); border-color: var(--border-strong); box-shadow: none; outline: 0; }
.ticket-reply-full.is-internal .ticket-reply-textarea:focus { border-color: color-mix(in srgb, var(--accent-violet) 55%, var(--border)); }
.ticket-reply-full .ticket-reply-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 0; border: 0; }
.ticket-reply-full .ticket-reply-footer { display: none; }
.ticket-upload-btn { flex: none; min-height: 38px; padding: 0 14px; border-radius: 10px; font-size: 12.5px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.ticket-file-status { display: flex; flex: 1 1 160px; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; color: var(--text-muted); font-size: 11.5px; }
.ticket-file-chip {
    display: inline-flex; align-items: center; gap: 7px; max-width: 220px; padding: 3px 4px 3px 10px;
    border: 1px solid var(--brand-ring); border-radius: 999px; background: var(--brand-soft); color: var(--text-primary); font-size: 11.5px; font-weight: 600;
}
.ticket-file-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-file-chip small { flex: none; color: var(--text-muted); font-family: var(--font-mono); font-size: 10px; }
.ticket-file-chip button { display: grid; place-items: center; flex: none; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-secondary); cursor: pointer; }
.ticket-file-chip button:hover { background: var(--danger-soft); color: var(--danger); }
.ticket-file-chip button svg { width: 11px; height: 11px; }
.ticket-send-btn { margin-left: auto; min-height: 38px; padding: 0 20px; border-radius: 10px; font-weight: 800; }
.ticket-reply-full.is-internal .ticket-send-btn { background: var(--accent-violet); border-color: var(--accent-violet); color: #1e1b4b; box-shadow: 0 6px 18px color-mix(in srgb, var(--accent-violet) 35%, transparent); }

.ticket-reply-locked {
    margin-top: 20px; padding: 16px 18px; border-radius: 16px;
    border: 1px dashed color-mix(in srgb, var(--warning) 45%, var(--border));
    background: linear-gradient(100deg, var(--warning-soft), transparent 70%);
}

/* El composer del canal vive dentro de un contenedor: el sticky va en el contenedor. */
#cs-det-reply-container { position: sticky; bottom: -22px; z-index: 3; margin-top: 20px; }
#cs-det-reply-container .ticket-reply-full { position: relative; bottom: auto; margin-top: 0; }

@media (max-width: 860px) {
    .ticket-detail-card .modal-header { padding: 16px; }
    .ticket-detail-scroll { padding: 14px; }
    .ticket-properties-card { position: static; }
    .ticket-reply-full, #cs-det-reply-container { position: static; }
    .ticket-reply-hint { display: none; }
    .ticket-reply-modes button span { font-size: 11.5px; }
    .ticket-send-btn { flex: 1 1 100%; }
    .ticket-queue-meta { margin-left: 0; flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .kpi-card.is-clickable, .ticket-skeleton i { transition: none; animation: none; }
}

.ticket-msg-icon { width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; color: var(--warning); }