/* ==================================================================
   Bahamas — Gestao de Transporte | CSS do prototipo (v2 — redesenho)
   Identidade: vermelho Bahamas sobre base neutra, chrome escuro fixo.
   Regras do redesenho:
     - escala tipografica de 5 degraus: 40 / 26 / 16 / 13 / 11
     - o vermelho e ACAO (botao primario, nav ativa, alerta de marca).
       Nao usar em KPI, barra de ocupacao ou contador.
     - duas densidades: desktop (linha 60px) e tablet de patio (alvo 58px)
   ================================================================== */

:root {
  /* Marca */
  --bh-vermelho: #D2232A;
  --bh-vermelho-esc: #A81A20;
  --bh-vermelho-cla: #F04A50;

  /* Chrome escuro — barra superior das tres telas */
  --ink:   #101820;
  --ink-2: #1A2330;
  --ink-3: #2A3340;
  --ink-txt:  #E8EDF5;
  --ink-txt-2:#9AA3B0;
  --ink-txt-3:#7C8698;

  /* Base clara */
  --bg:    #F4F6F9;
  --bg-2:  #FFFFFF;
  --bg-3:  #F2F4F7;
  --linha: #E0E5EC;
  --linha-2:#EDF0F4;
  --txt:   #101820;
  --txt-2: #5A6879;
  --txt-3: #8C97A6;
  --txt-4: #A8B1BD;

  /* Status operacionais — versoes escurecidas para contraste AA sobre branco */
  --st-azul:    #2F80ED;
  --st-roxo:    #7C4DEF;
  --st-amarelo: #B08915;
  --st-laranja: #D9701F;
  --st-ciano:   #0E96AB;
  --st-verde:   #1F7A57;
  --st-verde-cla: #2FB380;
  --st-cinza:   #8C97A6;
  --st-erro:    #C4383C;

  --raio:   10px;
  --raio-g: 14px;
  --raio-gg:16px;
  --sombra:   0 1px 3px rgba(16,24,32,.05);
  --sombra-f: 0 4px 12px rgba(16,24,32,.07), 0 18px 50px rgba(16,24,32,.09);
  --fonte: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  font-family: var(--fonte);
  background: var(--bg);
  color: var(--txt);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ==================================================================
   Topo — chrome escuro, identico nas tres telas
   ================================================================== */
.topo {
  height: 58px;
  background: var(--ink);
  display: flex; align-items: center; gap: 22px;
  padding: 0 20px; flex-shrink: 0;
}
.marca { display: inline-flex; align-items: center; gap: 13px; flex-shrink: 0; }
.marca-img { height: 26px; width: auto; display: block; border-radius: 3px; }
.marca-txt {
  font-size: 11px; font-weight: 700; color: var(--ink-txt-3);
  letter-spacing: .06em; text-transform: uppercase;
  padding-left: 13px; border-left: 1px solid var(--ink-3);
}

.topo-nav { display: flex; gap: 2px; background: var(--ink-2); border-radius: 9px; padding: 3px; }
.topo-nav a {
  padding: 7px 15px; border-radius: 7px;
  font-size: 13px; font-weight: 600; color: var(--ink-txt-2);
  transition: background .15s, color .15s;
}
.topo-nav a:hover { color: var(--ink-txt); }
.topo-nav a.on { background: var(--bh-vermelho); color: #fff; font-weight: 700; }

.topo-dir { margin-left: auto; display: flex; align-items: center; gap: 14px; }

.busca {
  display: flex; align-items: center; gap: 9px;
  background: var(--ink-2); border: 1px solid var(--ink-3);
  border-radius: 9px; padding: 7px 8px 7px 7px; width: 360px;
  color: var(--ink-txt-3); font-size: 13px;
}

/* Escopo da busca embutido no proprio campo: o usuario escolhe onde
   procurar antes de digitar, em vez de caçar em uma lista de tudo */
/* Seletor maior que a especificidade de `.fsel select`, que vive no
   <style> da página e por isso venceria na cascata */
.busca .fsel-escopo { flex-shrink: 0; }
.busca .fsel-escopo select {
  width: auto; max-width: 118px;
  background: var(--ink-3); color: var(--ink-txt);
  border: none; border-radius: 6px;
  padding: 5px 21px 5px 9px;
  font-size: 12px; font-weight: 700;
  box-shadow: none;
}
.busca .fsel-escopo select:hover { background: #39445A; }
.busca .fsel-escopo select:focus { box-shadow: 0 0 0 2px rgba(210,35,42,.4); }
.busca .fsel-escopo::after { right: 7px; color: var(--ink-txt-2); font-size: 10px; }
.busca .fsel-escopo.ativo select { background: var(--bh-vermelho); color: #fff; }

.limpa-busca {
  flex-shrink: 0; background: none; border: none;
  color: var(--ink-txt-3); font-size: 16px; line-height: 1;
  padding: 2px 4px; border-radius: 5px;
}
.limpa-busca:hover { color: #fff; background: var(--ink-3); }
.busca input {
  background: none; border: none; outline: none;
  color: var(--ink-txt); font-family: inherit; font-size: 13px;
  flex: 1; min-width: 0;   /* sem isso o select empurra o campo para fora */
}
.busca input::placeholder { color: var(--ink-txt-3); }

/* ------------------------------------------------------------------
   Indicadores de saude do sistema — sempre visiveis no topo.
   Verde nao e enfeite: e a resposta a "posso confiar no que vejo?".
   Clicar leva ao diagnostico completo em Integracoes.
   ------------------------------------------------------------------ */
.status-sis { display: flex; align-items: center; gap: 4px; }
.ind {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--ink-2); border: 1px solid var(--ink-3);
  border-radius: 8px; padding: 6px 11px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .01em;
  color: var(--ink-txt-2); white-space: nowrap;
  transition: border-color .15s, color .15s;
}
.ind:hover { border-color: #46536A; color: var(--ink-txt); }
.ind i { width: 7px; height: 7px; border-radius: 50%; display: block; flex-shrink: 0; }

.ind.on     i { background: #2FB380; box-shadow: 0 0 0 3px rgba(47,179,128,.22); }
.ind.alerta i { background: #E8B531; box-shadow: 0 0 0 3px rgba(232,181,49,.22); }
.ind.erro   i { background: #E5484D; box-shadow: 0 0 0 3px rgba(229,72,77,.24); animation: bat 1.4s infinite; }
.ind.off    i { background: #6B7688; }

.ind.alerta { color: #F0C75E; border-color: rgba(232,181,49,.35); }
.ind.erro   { color: #FF8A8E; border-color: rgba(229,72,77,.4); }

/* O ponto verde pulsa devagar: sinal de vivo, nao de alarme */
.ind.on i { animation: respira 2.6s ease-in-out infinite; }
@keyframes respira { 50% { opacity: .45; } }
@keyframes bat     { 50% { opacity: .3; } }

/* A busca cede espaço aos poucos. Abaixo de 1240px o seletor de escopo
   sai antes do campo de texto: espremer o input a 20px seria pior que
   perder o escopo, que volta a valer "tudo". */
@media (max-width: 1420px) {
  .busca { width: 280px; }
}
@media (max-width: 1240px) {
  .busca { width: 190px; }
  .busca .fsel-escopo { display: none; }
  .usuario > div { display: none; }   /* mantem so o avatar */
}
@media (max-width: 1150px) {
  .ind span { display: none; }
  .ind { padding: 7px 9px; }
}

.usuario { display: flex; align-items: center; gap: 9px; }
.usuario-av {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--ink-3); color: #C7CEDA;
  display: grid; place-items: center; font-weight: 700; font-size: 11px;
}
.usuario b { display: block; font-size: 12.5px; color: var(--ink-txt); }
.usuario span { color: var(--ink-txt-3); font-size: 11px; }

.pilula-alerta {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; color: #FF7A7E;
  background: rgba(229,72,77,.14); border-radius: 20px; padding: 6px 12px;
}
.pilula-alerta i { width: 7px; height: 7px; border-radius: 50%; background: #E5484D; display: block; }

/* ==================================================================
   Layout — sidebar fixa a esquerda + coluna de conteudo
   Mesma estrutura do TrackIO (CoreUI): marca no topo da sidebar,
   navegacao vertical, item ativo em vermelho.
   ================================================================== */
.app { display: flex; height: 100vh; overflow: hidden; }
.col-principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.corpo { flex: 1; display: flex; min-height: 0; }
.principal { flex: 1; min-width: 0; position: relative; }
.rolagem { flex: 1; overflow-y: auto; padding: 22px 24px 30px; }

/* ---------- Sidebar ---------- */
.menu {
  width: 232px; flex-shrink: 0;
  background: var(--ink);
  display: flex; flex-direction: column;
  z-index: 1000;
}
.menu-brand {
  height: 58px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0 18px;
  border-bottom: 1px solid var(--ink-3);
}
.menu-brand img { height: 28px; width: auto; display: block; border-radius: 3px; }

.menu-nav { flex: 1; overflow-y: auto; padding: 14px 12px; }
.menu-rot {
  font-size: 9.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: #5D6879;
  padding: 0 10px; margin: 4px 0 8px;
}
.menu-nav a {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 12px; margin-bottom: 3px;
  border-radius: 9px;
  font-size: 13.5px; font-weight: 600;
  color: var(--ink-txt-2);
  transition: background .15s, color .15s;
}
.menu-nav a:hover { background: var(--ink-2); color: var(--ink-txt); }
.menu-nav a.on { background: var(--bh-vermelho); color: #fff; font-weight: 700; }
/* Vale para todo SVG da sidebar — o "Sair" fica fora do .menu-nav e
   sem isso o icone herda o tamanho do viewBox e estoura o rodape */
.menu svg { width: 17px; height: 17px; flex-shrink: 0; }
.menu-nav a .badge-menu {
  margin-left: auto; background: var(--bh-vermelho); color: #fff;
  border-radius: 10px; padding: 1px 7px; font-size: 10.5px; font-weight: 800;
}
.menu-nav a.on .badge-menu { background: rgba(255,255,255,.25); }

.menu-pe {
  border-top: 1px solid var(--ink-3);
  padding: 12px;
}
.menu-user {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 9px;
}
.menu-user:hover { background: var(--ink-2); }
.menu-user b { display: block; font-size: 12.5px; color: var(--ink-txt); }
.menu-user span { font-size: 10.5px; color: var(--ink-txt-3); }
.menu-sair {
  display: flex; align-items: center; gap: 10px;
  padding: 10px; margin-top: 4px; border-radius: 9px;
  font-size: 12.5px; font-weight: 600; color: var(--ink-txt-3);
}
.menu-sair:hover { background: var(--ink-2); color: #FF8A8E; }

/* Titulo da tela no topo, no lugar da marca que subiu para a sidebar */
.topo-titulo { font-size: 15px; font-weight: 800; letter-spacing: -.02em; color: var(--ink-txt); }
.topo-titulo small {
  display: block; font-size: 11px; font-weight: 600;
  color: var(--ink-txt-3); letter-spacing: .02em; margin-top: 1px;
}

/* Tablet de patio e notebook estreito: sidebar so com icones */
@media (max-width: 1100px) {
  .menu { width: 62px; }
  .menu-nav a span, .menu-rot, .menu-user > div, .menu-sair span { display: none; }
  .menu-nav a { justify-content: center; padding: 12px 0; }
  .menu-user { justify-content: center; padding: 8px 0; }
  .menu-sair { justify-content: center; }

  /* A marca por extenso tem 397x66: reduzida pela altura, ela ainda mede
     ~130px e vaza por cima do título da tela. Aqui mostramos só o selo
     circular, que ocupa a extremidade esquerda da arte. */
  .menu-brand { padding: 0; overflow: hidden; }
  .menu-brand img {
    height: 30px; width: 30px;
    object-fit: cover; object-position: left center;
    border-radius: 6px;
  }
}

/* ==================================================================
   Titulos de secao
   ================================================================== */
.secao { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; }
.secao h3 { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.secao p  { margin: 0; font-size: 12.5px; color: var(--txt-3); }
.secao .dir { margin-left: auto; display: flex; gap: 6px; }

/* ==================================================================
   Botoes
   ================================================================== */
.btn {
  border: 1px solid var(--linha); background: var(--bg-2); color: var(--txt-2);
  border-radius: var(--raio); padding: 11px 19px;
  font-size: 14px; font-weight: 600;
  transition: border-color .15s, color .15s;
}
.btn:hover { border-color: var(--txt-4); color: var(--txt); }
.btn-p { background: var(--bh-vermelho); border-color: var(--bh-vermelho); color: #fff; font-weight: 700; }
.btn-p:hover { background: var(--bh-vermelho-esc); border-color: var(--bh-vermelho-esc); }
.btn-escuro { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 700; }
.btn-escuro:hover { background: #1D2836; border-color: #1D2836; }
.btn-ok { background: var(--st-verde-cla); border-color: var(--st-verde-cla); color: #fff; font-weight: 700; }
.btn-bloco { width: 100%; }

.chip {
  border: 1px solid var(--linha); background: var(--bg-2); color: var(--txt-2);
  border-radius: 7px; padding: 5px 11px; font-size: 11.5px; font-weight: 600;
}
.chip.on { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 700; }

/* ==================================================================
   Tags de status — fundo suave, texto escurecido (contraste AA)
   ================================================================== */
.tag {
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 5px;
  text-transform: uppercase; letter-spacing: .05em; white-space: nowrap;
}
.tag-azul    { background: #EAF2FD; color: #2668BE; }
.tag-roxo    { background: #F2EDFE; color: #6A3BD8; }
.tag-amarelo { background: #FDF5E0; color: #B08915; }
.tag-laranja { background: #FDF0E6; color: #C4681E; }
.tag-ciano   { background: #E6F7FA; color: #0E7F91; }
.tag-verde   { background: #E7F6F0; color: #1F7A57; }
.tag-cinza   { background: #F2F4F7; color: #8C97A6; }
.tag-erro    { background: #FDECEC; color: #C4383C; }

/* ==================================================================
   Paineis e tabelas
   ================================================================== */
.painel {
  background: var(--bg-2); border: 1px solid var(--linha);
  border-radius: var(--raio-gg); overflow: hidden;
}
table { width: 100%; border-collapse: collapse; }
thead th {
  background: #F7F9FB; border-bottom: 1px solid var(--linha);
  font-size: 10.5px; font-weight: 800; color: var(--txt-3);
  text-transform: uppercase; letter-spacing: .06em;
  text-align: left; padding: 11px 16px;
}
tbody td { padding: 13px 16px; font-size: 13px; border-bottom: 1px solid #F2F4F7; }
tbody tr:last-child td { border-bottom: none; }

/* ==================================================================
   Estado vazio — sempre diz o que acontece a seguir
   ================================================================== */
.vazio {
  border: 1px dashed #D6DBE3; border-radius: var(--raio-g);
  padding: 26px 16px; text-align: center;
  font-size: 12.5px; color: var(--txt-4); line-height: 1.5;
}

.mono { font-family: var(--mono); }
.placa { font-family: var(--mono); font-weight: 700; letter-spacing: .02em; }

/* ==================================================================
   Toast
   ================================================================== */
.toast {
  position: fixed; bottom: 22px; left: 50%;
  transform: translateX(-50%) translateY(90px);
  background: var(--ink); color: #fff;
  padding: 14px 26px; border-radius: 30px;
  font-size: 15px; font-weight: 700;
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
  z-index: 3000; transition: transform .3s cubic-bezier(.2,.9,.3,1.2);
}
.toast.on { transform: translateX(-50%) translateY(0); }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--linha); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--txt-4); }