/* Aurora — painel: transporte
   Arquivo EXCLUSIVO deste grupo. Carrega depois do kit e antes do
   aurora-legacy-reset.css (que segue sendo a ultima camada antidoto).

   Duas familias de regra convivem aqui:

   (A) CONTRATO DE RUNTIME — classes que o JS de public/index.html (arquivo
       intocavel) injeta ou alterna sozinho. Vieram do <style> que morava dentro
       de public/views/transporte.html. Nao podem ser renomeadas nem removidas:
         .ts-center-overlay/.show    showCenterAlert() / abrirCancelar()
         .ts-alert / .ts-alert-*     showAlertTS() reescreve o className inteiro
         .ts-ac-* / .open            modulo tsAc
         .ts-invalid                 _validarObrigatorios()
         .ts-proto-tag / .empty-row  linhas de tabela geradas por template string
         .tsv-chip / .on             limparForm() faz classList.remove('on')
         .criterio-item              radio-pilula lida via input:checked

   (B) COMPOSICAO NOVA — a estrutura reconstruida do painel (barra de comando,
       barra de confirmacao fixa, medidores dos KPIs, grades de conteudo).

   Cores: nenhum hex hardcoded — tudo que e superficie, texto ou borda sai de
   token do kit, entao o tema escuro vem de graca. A excecao consciente sao os
   VEUS translucidos em rgba() literal (fundos de chip, halo de erro, hover de
   autocomplete, sombras), herdados sem alteracao do <style> que morava dentro
   de public/views/transporte.html: sao camadas de baixa opacidade POR CIMA de
   superficie tokenizada, portanto acompanham o tema mesmo sem ser token.
   ============================================================================ */

/* ===========================================================================
   (A) CONTRATO DE RUNTIME
   =========================================================================== */

/* --- Overlays (aviso central e cancelamento) ---------------------------------
   O JS TELEPORTA #ts-center-alert e #ts-cancel-modal para o document.body, por
   isso estas regras NAO podem ser prefixadas por #view-transporte e cada overlay
   carrega class="aur" no proprio elemento. O position:fixed precisa vencer o
   position:relative que .aur aplica nele mesmo — dai .aur.ts-center-overlay
   (especificidade 0,2,0 contra 0,1,0). */
.aur.ts-center-overlay{
  position:fixed; inset:0; z-index:10050; display:none;
  align-items:center; justify-content:center;
  background:rgba(26,32,16,.55); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  padding:20px;
}
.aur.ts-center-overlay.show{ display:flex; animation:tsFadeIn .16s ease }
.ts-center-box{
  max-width:460px; width:100%; padding:30px 28px 24px; text-align:center;
  animation:tsPop .24s cubic-bezier(.34,1.56,.64,1);
}
.ts-center-box.ts-center-box-form{ text-align:left }
.ts-center-icon{
  width:64px; height:64px; border-radius:50%; margin:0 auto 16px;
  display:flex; align-items:center; justify-content:center;
  font-size:34px; font-weight:800; line-height:1;
}
.ts-center-overlay[data-type="warn"]    .ts-center-icon{ background:rgba(198,138,44,.16); color:var(--warn) }
.ts-center-overlay[data-type="error"]   .ts-center-icon{ background:rgba(226,58,109,.16); color:var(--err) }
.ts-center-overlay[data-type="success"] .ts-center-icon{ background:rgba(63,157,106,.16); color:var(--ok) }
.ts-center-title{ font-size:19px; font-weight:700; color:var(--ink); margin-bottom:8px }
.ts-center-msg{ font-size:14.5px; color:var(--ink-soft); line-height:1.55; margin-bottom:22px }
.ts-center-msg ul{ margin:10px 0 0; padding:0; list-style:none; text-align:left; display:grid; gap:6px }
.ts-center-msg li{
  display:flex; align-items:center; gap:8px;
  background:rgba(198,138,44,.12); border:1px solid var(--line); color:var(--warn);
  border-radius:8px; padding:7px 11px; font-weight:600; font-size:13px;
}
.ts-center-msg li::before{
  content:"!"; flex:0 0 18px; height:18px; border-radius:50%;
  background:var(--warn); color:rgba(255,255,255,.96);
  font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center;
}
.ts-center-ok{ min-width:140px; justify-content:center }
/* centralizacoes internas do modal de cancelamento (antes eram style= inline) */
.ts-center-box-form .ts-center-icon-wrap,
.ts-center-box-form .ts-center-title,
.ts-center-box-form .ts-center-lead{ text-align:center }
.ts-center-lead{ margin:0 0 14px }
.ts-center-actions{ justify-content:flex-end; margin-top:16px }
@keyframes tsFadeIn{ from{opacity:0} to{opacity:1} }
@keyframes tsPop{ from{opacity:0;transform:translateY(12px) scale(.96)} to{opacity:1;transform:none} }

/* --- Faixas de aviso do formulario -------------------------------------------
   showAlertTS() reescreve o className inteiro ("ts-alert ts-alert-<tipo> show"),
   entao todo o visual precisa vir daqui. */
#view-transporte .ts-alert{ display:none }
#view-transporte .ts-alert.show{
  display:block; border:1px solid var(--line); border-radius:12px;
  padding:11px 14px; font-size:12px; font-weight:600;
}
#view-transporte .ts-alert-success.show{ background:rgba(63,157,106,.14); color:var(--ok) }
#view-transporte .ts-alert-warn.show{    background:rgba(198,138,44,.14); color:var(--warn) }
#view-transporte .ts-alert-error.show{   background:rgba(226,58,109,.14); color:var(--err) }

/* --- Autocomplete (itens gerados pelo modulo tsAc) --------------------------- */
#view-transporte .ts-ac-wrap{ position:relative }
#view-transporte .ts-ac-wrap input{ padding-right:30px }
#view-transporte .ts-ac-arrow{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  color:var(--ink-soft); cursor:pointer; pointer-events:auto;
}
#view-transporte .ts-ac-dropdown{
  position:absolute; z-index:40; left:0; right:0; top:calc(100% + 4px);
  background:var(--glass); backdrop-filter:blur(22px) saturate(1.5); -webkit-backdrop-filter:blur(22px) saturate(1.5);
  border:1px solid var(--glass-brd); border-radius:12px; box-shadow:var(--shadow);
  max-height:220px; overflow-y:auto; display:none;
}
#view-transporte .ts-ac-dropdown.open{ display:block }
#view-transporte .ts-ac-item{
  padding:9px 13px; font-size:12px; color:var(--ink); cursor:pointer;
  border-bottom:1px solid var(--line);
}
#view-transporte .ts-ac-item:last-child{ border-bottom:none }
#view-transporte .ts-ac-item:hover{ background:rgba(92,111,58,.12); color:var(--brand) }

/* --- Campo reprovado na validacao ------------------------------------------- */
#view-transporte .ts-invalid{
  border-color:var(--err) !important;
  box-shadow:0 0 0 3px rgba(226,58,109,.18) !important;
  background:rgba(226,58,109,.08) !important;
}
#view-transporte .criterio-box.ts-invalid{ outline:2px solid var(--err); outline-offset:3px; border-radius:12px }

/* --- Pilula de protocolo e linha vazia (HTML por template string no JS) ------ */
#view-transporte .ts-proto-tag{
  display:inline-block; font-size:10.5px; font-weight:700; color:var(--brand);
  background:rgba(92,111,58,.12); border:1px solid var(--line);
  padding:3px 10px; border-radius:16px; white-space:nowrap;
}
#view-transporte .empty-row td{ color:var(--ink-soft); text-align:center; padding:26px }

/* --- Chips que alimentam os <select> nativos ---------------------------------
   A classe de selecao PRECISA ser "on": limparForm() (index.html) faz
   classList.remove('on') nos filhos DIRETOS de #ts-pass-chips / #ts-casa-chips.
   Os chips sao <button type="button"> por semantica e acessibilidade (foco pelo
   teclado e papel de botao no leitor de tela) — nenhum ponto do JS os desabilita,
   por isso NAO existe aqui regra :disabled. Como o UA nao herda cor nem fonte
   para <button>, o reset de aparencia mora aqui. */
#view-transporte .tsv-chips{
  display:inline-flex; gap:6px; background:rgba(92,111,58,.08);
  border:1px solid var(--line); border-radius:13px; padding:5px;
}
#view-transporte .tsv-chip{
  font:inherit; text-align:center; padding:8px 16px; border:none; border-radius:10px;
  background:transparent; font-size:12px; font-weight:700; color:var(--ink-soft);
  cursor:pointer; user-select:none; transition:.16s;
}
#view-transporte .tsv-chip.on{ background:linear-gradient(135deg,var(--brand),var(--brand2)); color:rgba(255,255,255,.96) }

/* --- Radio-pilula de criterio ------------------------------------------------ */
#view-transporte .criterio-item{
  display:inline-flex; align-items:center; gap:6px; padding:8px 12px;
  border-radius:10px; border:1px solid var(--line); background:rgba(92,111,58,.06);
  color:var(--ink-soft); font-size:12px; font-weight:700; cursor:pointer;
  user-select:none; transition:.16s;
}
#view-transporte .criterio-item input{ position:absolute; opacity:0; width:0; height:0 }
#view-transporte .criterio-item:has(input:checked){
  background:rgba(92,111,58,.16); border-color:rgba(92,111,58,.38); color:var(--brand);
}
#view-transporte .criterio-box{ flex-wrap:wrap; gap:8px }

/* ===========================================================================
   (B) COMPOSICAO NOVA
   =========================================================================== */

/* --- Topo: identidade enxuta. Nenhuma acao operacional mora aqui — elas moram
       no corpo de cada pagina. O relogio ficou porque a mesa de transporte
       confere horario de embarque o tempo todo, mas em tamanho de metadado. -- */
#view-transporte .ts-topbar .brand-txt p{ margin:0 }
#view-transporte #ts-clock{ font-variant-numeric:tabular-nums; letter-spacing:.04em }

/* --- Abas ------------------------------------------------------------------
   "Adicionar acompanhante" deixou de ser aba de primeiro nivel: e uma acao
   SOBRE um agendamento existente, alcancada de dentro da lista. Como
   showPage() so acende a aba que recebe por parametro, a aba "Agendamentos"
   segue acesa por :has() enquanto a subpagina estiver aberta.
   Precisa de !important e de especificidade maior que (1,1,0) porque
   aurora-panels.css:441 zera .op-tr-tab com !important. */
#view-transporte:has(#op-tr-page-add-acomp:not(.hidden)) .op-tr-tab[data-page="agendamentos"]{
  color:rgba(255,255,255,.96) !important;
  background:linear-gradient(135deg,var(--brand),var(--brand2)) !important;
  box-shadow:0 8px 20px -8px rgba(78,98,44,.7) !important;
}

/* --- Barra de comando -------------------------------------------------------
   Padrao do portal: o campo que INICIA a tarefa ocupa a largura toda, em vez de
   um cartaozinho perdido no meio do formulario. Emitir passagem comeca no CPF;
   o comprovante comeca no protocolo. */
#view-transporte .ts-cmd{ padding:16px 18px; display:grid; gap:10px }
#view-transporte .ts-cmd-row{ display:grid; grid-template-columns:1fr auto; gap:12px; align-items:end }
#view-transporte .ts-cmd .au-fld input{ font-size:16px; padding-top:11px; padding-bottom:11px }
#view-transporte .ts-cmd-btn{ height:42px }
/* protocolo sempre em caixa alta (o JS compara com .toUpperCase()) */
#view-transporte .ts-upper{ text-transform:uppercase }

/* Espacamento de secao SEM herdar o layout de .au-sec: `.aur .au-sec` declara
   display:flex/column depois de `.aur .filters` no aurora-core, entao juntar as
   duas classes no mesmo elemento empilharia a barra de filtros em coluna. */
#view-transporte .ts-mb{ margin-bottom:18px }

/* --- Cartoes de formulario -------------------------------------------------- */
#view-transporte .ts-card{ padding:18px 20px }
#view-transporte .ts-card .au-form + .au-form{ margin-top:12px }
#view-transporte .ts-form-inline{ grid-template-columns:1fr auto; align-items:end }
#view-transporte .ts-form-actions{ justify-content:flex-end; margin-top:4px }

/* --- Barra de confirmacao ---------------------------------------------------
   O aviso de erro nascia no topo da pagina e o botao que o dispara ficava uma
   rolagem inteira abaixo — por isso existiam DOIS mecanismos de aviso para o
   mesmo evento. Agora aviso e acao sao o mesmo bloco, colado no rodape da area
   de trabalho. */
#view-transporte .ts-commit{
  position:sticky; bottom:0; z-index:20;
  display:grid; gap:10px; padding:12px 16px; margin-top:4px; border-radius:16px;
}
#view-transporte .ts-commit-actions{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end;
}
#view-transporte .ts-commit-note{ margin-right:auto; font-size:12px; color:var(--ink-soft) }

/* --- Acompanhante: cabecalho com interruptor -------------------------------- */
#view-transporte .ts-switch{ cursor:pointer; gap:10px }
#view-transporte .ts-switch input{ width:18px; height:18px; margin:0; accent-color:var(--brand); cursor:pointer }
#view-transporte .ts-switch strong{ font-size:14.5px }

/* --- Barra de contexto das subpaginas ---------------------------------------
   Toda subpagina tem caminho de volta explicito (antes o comprovante caia numa
   tela sem aba acesa e sem retorno). */
#view-transporte .ts-ctx{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 14px; border-radius:14px;
}
#view-transporte .ts-ctx h3{ margin:0; font-size:14.5px; font-weight:700 }
#view-transporte .ts-ctx p{ margin:0; font-size:12px; color:var(--ink-soft) }
#view-transporte .ts-ctx-txt{ display:grid; gap:2px; margin-right:auto }

/* --- Grades de conteudo ----------------------------------------------------- */
#view-transporte .ts-grid-3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px }
#view-transporte .ts-grid-2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(420px,1fr)); gap:16px }
#view-transporte .ts-chart{ padding:0 18px 16px }
#view-transporte .ts-tablebox{ padding:0 10px 10px }
#view-transporte .ts-tablebox-solo{ padding:10px }

/* cabecalho de tabela que carrega o proprio filtro: o campo governa SO esta
   tabela — antes morava na barra de periodo, quatro blocos acima, fingindo
   governar os KPIs e os graficos. */
#view-transporte .ts-head-filter{ display:flex; align-items:center; gap:8px }
#view-transporte .ts-head-filter label{
  font-size:10.5px; font-weight:700; color:var(--ink-soft);
  text-transform:uppercase; letter-spacing:.06em;
}
#view-transporte .ts-head-filter input{
  font:inherit; font-size:12px; padding:6px 10px; border-radius:10px;
  border:1px solid var(--line); background:var(--glass); color:var(--ink);
}

/* --- KPIs: uma faixa, duas series -------------------------------------------
   Antes eram DUAS secoes ("Paciente" e "Acompanhante") repetindo o mesmo trio
   agendada/concluida/faltou: 6 cartoes e 2 titulos para uma matriz 2x3, nenhum
   com microvisualizacao. Agora cada cartao e UM estado e carrega as duas series,
   com medidor proporcional pintado em runtime pelo script da view. Os 6 ids
   originais foram REALOCADOS, nunca renomeados. */
#view-transporte .ts-kpi-2nd{
  display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  font-size:12px; color:var(--ink-soft);
}
#view-transporte .ts-kpi-2nd strong{ font-size:14.5px; font-weight:700; color:var(--ink) }
#view-transporte .ts-meter{ height:6px; border-radius:6px; background:rgba(77,90,54,.12); overflow:hidden }
#view-transporte .ts-meter i{
  display:block; height:100%; width:0; border-radius:6px;
  background:linear-gradient(90deg,var(--brand),var(--brand2)); transition:width .35s ease;
}
#view-transporte .ts-meter-alt i{ background:linear-gradient(90deg,var(--lilac),var(--brand2)) }
#view-transporte .ts-kpi-legend{ font-size:10.5px; color:var(--ink-soft) }

/* --- Lista de agendamentos elegiveis do "+ acompanhante" (HTML vem do JS) ---- */
#view-transporte #aa-result{ display:grid; gap:8px }

/* --- Responsivo -------------------------------------------------------------- */
@media (max-width:720px){
  #view-transporte .ts-cmd-row{ grid-template-columns:1fr }
  #view-transporte .ts-form-inline{ grid-template-columns:1fr }
  #view-transporte .ts-commit{ position:static }
}