/* Rev. 3.5.0 — ajustes da revisão 3.5 (chamados, portal, agenda técnica, tarefas programadas, empresas e integrações).
   Fica depois de relatorios.css; segue as variáveis e o padrão compacto do sistema. */

/* Chamados: lápis ao lado do assunto (editar dados da abertura) e envio de arquivos com progresso na conversa */
.ticket-title { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ticket-title-edit { color: var(--ink-3); }
.ticket-title-edit:hover { color: var(--petrol); }
.composer .ticket-uploader { padding: 0 12px 8px; }
.composer .ticket-uploader .uploader-list { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }

/* Relatórios técnicos: assinatura no computador desabilitada por padrão (habilitar em Configurações › Visitas).
   “Computador” = tela larga com mouse; celular e tablet (toque) continuam assinando normalmente. */
.tr-sign-desk-note, .tr-sign-desk-empty { display: none; }
@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  .tr-sign-touch { display: none !important; }
  .tr-sign-desk-off .tr-sign-desk-note { display: flex; align-items: center; gap: 6px; margin: 0; padding: 10px 14px 0; }
  .tr-sign-desk-off .tr-sign-desk-empty { display: block; margin: 0; }
}

/* Fluxo de status: matriz com primeira coluna e cabeçalho fixos e botão Salvar sempre visível */
.wf-wrap { max-height: calc(100vh - 260px); overflow: auto; }
.wf-matrix { border-collapse: separate; border-spacing: 0; }
.wf-matrix th, .wf-matrix td { white-space: nowrap; }
.wf-matrix td.wf-to, .wf-matrix td.wf-free-col, .wf-matrix th.wf-free-col { text-align: center; }
.wf-matrix thead th { position: sticky; top: 0; z-index: 2; background: var(--surface); }
.wf-matrix .wf-from { position: sticky; left: 0; z-index: 1; background: var(--panel); min-width: 190px; box-shadow: 1px 0 0 var(--line-2); }
.wf-matrix thead .wf-from { z-index: 3; background: var(--surface); }
.wf-foot { position: sticky; bottom: 0; z-index: 4; background: var(--panel); gap: 12px; flex-wrap: wrap; }
@media (max-width: 700px) { .wf-matrix .wf-from { min-width: 150px; } .wf-wrap { max-height: none; } }

/* Empresas: prioridade de acionamento dos contatos */
.contact-prio { display: inline-grid; place-items: center; min-width: 22px; height: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px; font-size: 11px; font-weight: 700; background: var(--petrol-100, #e6eef0); color: var(--petrol, #0e5a63); vertical-align: 1px; }
/* Importação de empresas: coluna de seleção */
.import-pick { width: 34px; }
.import-skipped { margin: 8px 0 12px; }
.import-skipped summary { cursor: pointer; }

/* Integração IMVICTUS: registros com erro */
.imv-err-table td { vertical-align: top; }
.imv-tech { margin-top: 4px; }
.imv-tech summary { cursor: pointer; color: var(--ink-3); font-size: 11.5px; }
.imv-tech code { display: block; white-space: pre-wrap; word-break: break-word; font-size: 11px; color: var(--ink-3); margin-top: 2px; }
tr.is-current td { background: var(--petrol-50, rgba(14, 90, 99, .06)); }

/* Agenda técnica: empresa, profissional e “adicionado por” no calendário; arrastar e soltar */
.ag-info { display: flex; flex-direction: column; gap: 0; margin-top: 1px; min-width: 0; }
.ag-info > span { display: flex; align-items: center; gap: 3px; color: var(--ink-3); font-size: 10.8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ag-info > span svg { flex: none; opacity: .75; }
.ag-info .ag-co { color: var(--ink-2); font-weight: 600; }
.ag-info .ag-by { font-style: italic; }
.ag-ev .ag-title { font-weight: 500; }
.ag-ev.ag-short .ag-info .ag-by, .ag-ev.ag-short .ag-info .ag-who { display: none; }
.ag-chip .ag-info { margin-top: 0; }
.ag-chip small.ag-chip-co { display: block; color: var(--ink-3); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-movable { cursor: grab; touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.ag-is-dragging, .ag-is-dragging * { cursor: grabbing !important; }
.ag-dragging { opacity: .35; }
.ag-ghost { box-shadow: 0 10px 26px rgba(0, 0, 0, .22); opacity: .95; transform: rotate(-1deg); }
.ag-ghost-time { position: absolute; right: 4px; top: 2px; font-size: 11px; font-weight: 700; color: #fff; background: var(--c, var(--petrol)); border-radius: 4px; padding: 0 5px; }
.ag-ghost-time:empty { display: none; }
.ag-drop-on { outline: 2px dashed var(--petrol); outline-offset: -2px; background: color-mix(in srgb, var(--petrol) 6%, transparent) !important; }
.ag-saving { opacity: .5; pointer-events: none; }
.ag-drag-hint { color: var(--ink-3); }
.ag-team .selector-scroll { max-height: 170px; }
.ag-team .selector-item.is-main { opacity: .45; }
.ag-form-actions { position: static; border-top: 1px solid var(--line-2); margin-top: 8px; }

/* Portal do Cliente: agenda técnica */
.portal-agenda .ag-chip.pag-ticket { border-left-style: dashed; }
.portal-agenda span.ag-chip { cursor: default; }
.portal-agenda .ag-mnum { cursor: default; }
.portal-agenda .pag-list-head { border-top: 1px solid var(--line); }
.ag-ev .ag-line { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-ev.ag-tall .ag-line { white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

/* Rev. 3.5.1 — seleção múltipla compacta (etiquetas dentro do campo, lista flutuante com filtro) */
.tp { position: relative; }
.tp-field { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: var(--ctl-h, 30px); padding: 2px 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: text; }
.tp-field:focus-within { border-color: var(--petrol); box-shadow: 0 0 0 3px color-mix(in srgb, var(--petrol) 18%, transparent); }
.tp-chips { display: contents; }
.tp-chip { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 4px 0 8px; border-radius: 11px; font-size: 12px; font-weight: 600; background: var(--petrol-100, #e6eef0); color: var(--petrol, #0e5a63); white-space: nowrap; }
.tp-chip button { border: 0; background: transparent; color: inherit; font-size: 15px; line-height: 1; width: 18px; height: 18px; border-radius: 50%; cursor: pointer; padding: 0; }
.tp-chip button:hover { background: color-mix(in srgb, var(--petrol) 18%, transparent); }
.tp-q { flex: 1 1 140px; min-width: 120px; border: 0 !important; outline: 0; background: transparent !important; box-shadow: none !important; height: 24px !important; padding: 0 2px !important; font: inherit; color: var(--ink); }
.tp-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); max-height: 220px; overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 24px rgba(0, 0, 0, .12); padding: 4px; }
.tp-opt { padding: 6px 10px; border-radius: 6px; font-size: 13px; cursor: pointer; }
.tp-opt:hover, .tp-opt.is-active { background: var(--hover, var(--petrol-50)); color: var(--ink); }
.tp-none { padding: 8px 10px; font-size: 12.5px; color: var(--ink-3); }

/* Rev. 3.5.1 — efeito de carregamento (skeleton) padrão: blocos cinza com brilho suave; tema escuro e “reduzir movimento” */
.skel { display: block; position: relative; overflow: hidden; border-radius: 6px; background: color-mix(in srgb, var(--ink, #14232b) 11%, var(--panel, #fff)); }
.skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--panel, #fff) 55%, transparent), transparent); animation: skel-shine 1.3s ease-in-out infinite; }
[data-theme="dark"] .skel { background: color-mix(in srgb, #fff 9%, var(--panel, #16202a)); }
[data-theme="dark"] .skel::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .07), transparent); }
@keyframes skel-shine { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skel::after { animation: none; } }
.skel-wrap { display: flex; flex-direction: column; gap: 10px; padding: 6px 0; }
.skel-line { height: 11px; }
.skel-title { height: 22px; width: 42%; border-radius: 7px; }
.skel-avatar { width: 32px; height: 32px; border-radius: 50%; flex: none; }
.skel-item { display: flex; gap: 10px; align-items: center; }
.skel-col { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 0; }
.skel-tr { display: flex; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.skel-cell { height: 12px; }
.skel-card { height: 78px; border-radius: 10px; }
.skel-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.notif-list .skel-wrap, .cchat-dialog-body .skel-wrap { padding: 12px 14px; }
.thread-skel { padding: 8px 14px; }
/* troca de página: o esqueleto cobre a área de conteúdo enquanto a próxima tela carrega */
main.is-loading-page { position: relative; }
main.is-loading-page > :not(.skel-overlay) { visibility: hidden; }
.skel-overlay { position: absolute; inset: 0; z-index: 20; padding: inherit; animation: skel-in .15s ease-out; }
@keyframes skel-in { from { opacity: 0; } to { opacity: 1; } }
.skel-page { display: flex; flex-direction: column; gap: 18px; max-width: 100%; }
.skel-page-head { display: flex; flex-direction: column; gap: 10px; }
.skel-page-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.skel-page-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px 16px; }
@media (max-width: 700px) { .skel-page-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .skel-page-cards .skel-card:nth-child(n+3) { display: none; } }

/* Rev. 3.5.1 — importação de empresas: conferência com seleção mais visível */
.import-select-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 16px; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); background: var(--petrol-50, rgba(14, 90, 99, .05)); }
.import-select-info { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }
.import-select-info b { color: var(--petrol); font-size: 14px; }
.import-pick { width: 72px; }
.import-pick-head { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 600; }
.import-pick input[type=checkbox] { width: 17px; height: 17px; cursor: pointer; accent-color: var(--petrol); }
.import-pick input[disabled] { cursor: not-allowed; opacity: .45; }
.import-preview tr[data-action="create"], .import-preview tr[data-action="update"] { cursor: pointer; }
.import-preview tr.is-unpicked td:not(.import-pick) { opacity: .5; }
.tickets-table th[data-col="comments"], .tickets-table td[data-col="comments"] { width: 44px; padding-left: 4px; padding-right: 4px; }
.th-ico { display: inline-flex; color: var(--ink-3); vertical-align: middle; }