/* ══════════════════════════════════════════════════════════════════════════
   Central de Chamados: "Transferir chamado" (aba de Atendimento).
   Seletor de pessoas no modal padrao (transferir.js, uma ou mais), etiqueta
   "Recebido de X" na fila, os botoes na ficha e o X que tira o tecnico. Usa os tokens --cht-* de chamados-base.css.

   O modal e anexado ao <body>, fora de .cht-tec: por isso o prefixo proprio
   (.chtr-*) e nenhum seletor dependente da view. A busca segue o padrao do
   modal de permissoes da Requisicao: a "caixa" mora no wrapper e o <input> e
   pelado por um seletor de 3 classes, que vence `.modal-card input[type=search]`
   sem !important.

   A carga de cada pessoa (chamados abertos) aparece em barras de altura
   crescente: vazio e verde ("livre"), cheio esquenta para alerta. O texto ao
   lado diz o numero, a cor nunca e o unico sinal.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Modal ─────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .modal-card:has(.chtr) { width: min(540px, 94vw); }
}

.chtr {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  font-family: var(--cht-fu);
}

.chtr-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Busca ─────────────────────────────────────────────────────────────────── */
.chtr-busca {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 42px;
  padding: 0 12px;
  box-sizing: border-box;
  border: 1.5px solid var(--cht-line-2);
  border-radius: var(--cht-r-sm);
  background: var(--cht-surface);
  color: var(--cht-ink-4);
  transition: border-color var(--cht-dur) var(--cht-ease), box-shadow var(--cht-dur) var(--cht-ease);
}
.chtr-busca:focus-within { border-color: var(--cht-accent); box-shadow: var(--cht-glow); color: var(--cht-accent); }
.chtr-busca svg { flex: none; width: 17px; height: 17px; }
.modal-card .chtr-busca .chtr-busca-in {
  flex: 1;
  min-width: 0;
  min-height: 0;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
  font: 500 14px var(--cht-fu);
  color: var(--cht-ink);
  -webkit-appearance: none;
  appearance: none;
}
.modal-card .chtr-busca .chtr-busca-in::-webkit-search-cancel-button { cursor: pointer; }

/* ── Lista ─────────────────────────────────────────────────────────────────── */
.chtr-lista {
  max-height: min(44vh, 360px);
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0 -4px;
  padding: 0 4px 2px;
  scrollbar-width: thin;
}

.chtr-grupo + .chtr-grupo { margin-top: 6px; }
.chtr-grupo[hidden], .chtr-pessoa[hidden], .chtr-vazio[hidden] { display: none; }

/* Titulo da equipe preso no topo enquanto a lista rola. */
.chtr-grupo-tt {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 6px 6px;
  background: var(--cht-surface);
  font: 700 10.5px var(--cht-fu);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--cht-ink-3);
}
.chtr-grupo-tag {
  font: 600 10px var(--cht-fu);
  letter-spacing: .02em;
  text-transform: none;
  color: var(--cht-accent-ink);
  background: var(--cht-accent-weak);
  border: 1px solid var(--cht-accent-line);
  padding: 1px 7px;
  border-radius: var(--cht-r-pill);
}

/* ── Pessoa ────────────────────────────────────────────────────────────────── */
.chtr-pessoa {
  position: relative;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 7px 10px 7px 8px;
  border-radius: var(--cht-r-sm);
  cursor: pointer;
  transition: background var(--cht-dur) var(--cht-ease), box-shadow var(--cht-dur) var(--cht-ease);
  animation: chtr-entra var(--cht-dur-3) var(--cht-ease-out) both;
  animation-delay: calc(min(var(--chtr-i, 0), 12) * 22ms);
}
.chtr-pessoa:hover { background: var(--cht-surface-2); }
.chtr-pessoa .cht-av { width: 30px; height: 30px; font-size: 10.5px; }

.chtr-pessoa.is-sel,
.chtr-pessoa:has(.chtr-check:checked) {
  background: var(--cht-accent-weak);
  box-shadow: inset 0 0 0 1px var(--cht-accent-line), inset 3px 0 0 var(--cht-accent);
}
.chtr-pessoa:has(.chtr-check:focus-visible) {
  outline: 2px solid var(--cht-accent);
  outline-offset: 1px;
}

/* Caixa de marcar nativa restilizada: continua focavel e anunciada pelo leitor
   de tela. min-height/padding zerados: no celular, components.css da 44px e
   padding a todo input (alvo de toque), e a caixa virava uma pilula. O alvo de
   toque aqui e a linha inteira (o <label>, 48px). */
.chtr-check {
  -webkit-appearance: none;
  appearance: none;
  display: grid;
  place-content: center;
  width: 18px; height: 18px;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: 1.5px solid var(--cht-line-3);
  border-radius: 5px;
  background: var(--cht-surface);
  cursor: inherit;
  transition: border-color var(--cht-dur) var(--cht-ease), background var(--cht-dur) var(--cht-ease);
}
.chtr-check::before {
  content: '';
  width: 4px; height: 8px;
  margin-top: -2px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform var(--cht-dur-2) var(--cht-ease-spring);
}
.chtr-check:checked { border-color: var(--cht-accent); background: var(--cht-accent); }
.chtr-check:checked::before { transform: rotate(45deg) scale(1); }
.chtr-check:focus-visible { outline: none; }

/* Quem sai do chamado com a selecao atual (o resto do time e desmarcado). */
.chtr-saem {
  margin: 0;
  min-height: 18px;
  font: 500 12px var(--cht-fu);
  color: var(--cht-ink-3);
}
.chtr-saem:empty { display: none; }

.chtr-nome {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 6px;
  min-width: 0;
  font-size: 13.5px;
  color: var(--cht-ink);
}
.chtr-nome b {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.chtr-pessoa.is-sel .chtr-nome b { color: var(--cht-accent-deep); }

.chtr-tag {
  flex: none;
  font: 600 9.5px var(--cht-fu);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--cht-ink-3);
  background: var(--cht-surface-3);
  padding: 2px 6px;
  border-radius: var(--cht-r-pill);
}
.chtr-tag--atual { color: var(--cht-atend); background: var(--cht-atend-weak); }

/* ── Carga (chamados abertos) ──────────────────────────────────────────────── */
.chtr-carga {
  --chtr-cor: var(--cht-accent);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  justify-self: end;
  font: 500 11.5px var(--cht-fu);
  color: var(--cht-ink-4);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.chtr-carga[data-nivel="0"] { --chtr-cor: var(--cht-ok); color: var(--cht-ok); font-weight: 600; }
.chtr-carga[data-nivel="3"],
.chtr-carga[data-nivel="4"] { --chtr-cor: var(--cht-prio-alta); }
.chtr-carga[data-nivel="5"] { --chtr-cor: var(--cht-breach); color: var(--cht-breach); }

.chtr-barras { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.chtr-barras i {
  width: 3px;
  border-radius: 1px;
  background: var(--cht-line-2);
  transition: background var(--cht-dur-2) var(--cht-ease);
}
.chtr-barras i:nth-child(1) { height: 5px; }
.chtr-barras i:nth-child(2) { height: 7px; }
.chtr-barras i:nth-child(3) { height: 9px; }
.chtr-barras i:nth-child(4) { height: 11px; }
.chtr-barras i:nth-child(5) { height: 14px; }
.chtr-barras i.on { background: var(--chtr-cor); }
.chtr-carga[data-nivel="0"] .chtr-barras i { background: color-mix(in srgb, var(--cht-ok) 28%, transparent); }

.chtr-vazio {
  margin: 0;
  padding: 22px 8px;
  text-align: center;
  font: 500 13px var(--cht-fu);
  color: var(--cht-ink-4);
}

@keyframes chtr-entra {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* Celular (o modal vira folha inferior): sem rolagem dentro de rolagem. A lista
   cresce e a folha inteira rola, sem nada preso (a lista e curta, e preso a
   busca deixava a fresta do padding da folha). */
@media (max-width: 767px) {
  .chtr-lista { max-height: none; overflow: visible; margin: 0; padding: 0; }
  .chtr-grupo-tt { position: static; }
}
@media (max-width: 420px) {
  .chtr-pessoa { gap: 8px; padding-right: 8px; }
  .chtr-carga { gap: 5px; font-size: 11px; }
}

/* ── Ficha: botoes no bloco "quem" ─────────────────────────────────────────── */
/* A variante pequena (--sm) de chamados-tecnico.css vem ANTES da regra base
   .cht-atrib-btn no arquivo e perde para ela (mesma especificidade): o botao
   pequeno saia grande e com gradiente. Aqui, dentro de .cht-whoacts, ela vence. */
.cht-tec .cht-whoacts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.cht-tec .cht-whoacts .cht-atrib-btn:not(.cht-atrib-btn--sm) { flex: 1 1 100%; }
.cht-tec .cht-whoacts .cht-atrib-btn--sm {
  width: auto;
  gap: 6px;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--cht-accent);
  background: var(--cht-surface);
  background-image: none;
  border: 1px solid var(--cht-line-2);
  box-shadow: none;
}
.cht-tec .cht-whoacts .cht-atrib-btn--sm:hover {
  background: var(--cht-accent-weak);
  border-color: var(--cht-accent-line);
  filter: none;
  transform: none;
  box-shadow: none;
}
.cht-tec .cht-whoacts .cht-atrib-btn--sm svg { width: 14px; height: 14px; }
.cht-tec .cht-whoacts .cht-transf-btn { color: var(--cht-ink-2); }
.cht-tec .cht-whoacts .cht-transf-btn svg { color: var(--cht-accent); }

/* ── Fila: chamado recebido e ainda nao aberto ─────────────────────────────── */
.cht-recebido {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  vertical-align: 1px;
  font: 600 10.5px var(--cht-fu);
  line-height: 1.5;
  color: var(--cht-novo);
  background: var(--cht-novo-weak);
  border: 1px solid color-mix(in srgb, var(--cht-novo) 30%, transparent);
  padding: 0 8px 0 6px;
  border-radius: var(--cht-r-pill);
  white-space: nowrap;
}
.cht-recebido::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cht-novo) 18%, transparent);
}

/* ── Ficha: um tecnico por linha, com o X que tira do chamado ─────────────── */
.cht-tec .cht-tecs {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cht-tec .cht-tecs .cht-whoval { display: flex; }
.cht-tec .cht-tec-x {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  min-height: 0;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--cht-ink-4);
  cursor: pointer;
  transition: background var(--cht-dur) var(--cht-ease), color var(--cht-dur) var(--cht-ease);
}
.cht-tec .cht-tec-x svg { width: 12px; height: 12px; }
.cht-tec .cht-tec-x:hover { color: var(--cht-breach); background: color-mix(in srgb, currentColor 10%, transparent); }
.cht-tec .cht-tec-x:focus-visible { outline: 2px solid var(--cht-accent); outline-offset: 1px; }
.cht-tec .cht-tec-x:disabled { opacity: .4; cursor: default; }
@media (pointer: coarse) {
  .cht-tec .cht-tec-x { width: 34px; height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .chtr-pessoa { animation: none; }
  .chtr-check,
  .chtr-check::before,
  .cht-tec .cht-tec-x,
  .chtr-busca,
  .chtr-barras i { transition: none; }
}