/* base.css — reset, tipografia, layout da casca, utilitarios e animacoes.
 *
 * Recorte das linhas 13-15, 35-40, 65-69, 78-83, 147-161 do monolito.
 * Nenhum valor foi alterado, exceto onde ha comentario dizendo o contrario.
 */

* { box-sizing: border-box; margin: 0; padding: 0 }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--fonte-corpo);
  overflow-x: hidden;
}

::-webkit-scrollbar { width: 4px }
::-webkit-scrollbar-track { background: var(--bg) }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px }

/* ---------------------------------------------------------- casca da aplicacao */

#app { display: none; height: 100vh; overflow: hidden; flex-direction: row }
#app.visible { display: flex }

#main { flex: 1; display: flex; flex-direction: column; overflow: hidden }

/* #content agora e <main>. O seletor por id continua igual. */
#content { flex: 1; overflow-y: auto; padding: 32px 36px }

/* ------------------------------------------------------------------- botoes */

.btn {
  background: linear-gradient(135deg, var(--petroleo), var(--petroleo2));
  border: none; border-radius: var(--rsm); padding: 10px 20px;
  color: #fff; cursor: pointer;
  font-family: var(--fonte-corpo); font-size: 13.5px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px; transition: .2s;
}
.btn:hover { opacity: .88; transform: translateY(-1px) }
.btn:disabled { opacity: .45; pointer-events: none }

.btn-ghost {
  background: transparent; border: 1px solid var(--border2);
  border-radius: var(--rsm); padding: 9px 18px; color: var(--text2);
  cursor: pointer; font-family: var(--fonte-corpo); font-size: 13px;
  transition: .2s;
}
.btn-ghost:hover { border-color: var(--petroleo); color: var(--petroleo) }

/* ------------------------------------------------------------------ layouts */

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px }
.grid-pass { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px }

/* .page-title era uma <div>. Agora e <h1> (tarefa 1.6). O `margin: 0 0 6px`
 * zera a margem que o navegador da a um <h1> por padrao e repoe os 6px do
 * original. Sem line-height, pelo mesmo motivo de .auth-title. */
.page-title {
  font-family: var(--fonte-titulo);
  font-size: 32px; font-weight: 700; color: var(--text);
  margin: 0 0 6px; letter-spacing: -.5px;
}
.page-sub { font-size: 13.5px; color: var(--text3); margin-bottom: 28px }
.section-bar { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 22px }

/* -------------------------------------------------------- estados e feedback */

.loading {
  display: flex; align-items: center; justify-content: center;
  padding: 60px; color: var(--text3); gap: 12px; font-size: 13.5px;
}
.spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--border); border-top-color: var(--petroleo);
  border-radius: 50%; animation: spin .8s linear infinite; flex-shrink: 0;
}
.empty { text-align: center; padding: 60px 20px; color: var(--text3) }
.empty .e-icon { font-size: 48px; margin-bottom: 16px; opacity: .4 }
/* O titulo do estado vazio aparece em DOIS niveis, e os dois sao corretos.
 *
 * Nas telas de lista (Empresas, Passageiros, Fornecedores) ele fica direto sob
 * o <h1> da tela, entao e nivel 2. No painel inicial ele fica DENTRO da secao
 * "Empresas Recentes", que e <h2>, entao ali e nivel 3.
 *
 * O nivel segue a posicao na arvore, nunca a aparencia -- que e por isso que
 * esta regra veste os dois com o mesmo desenho. Trocar tudo para <h2> so
 * porque parecem iguais criaria no painel um <h2> dentro de outro <h2>, que e
 * o mesmo defeito de hierarquia da WCAG 1.3.1, invertido. */
.empty h2,
.empty h3 { font-family: var(--fonte-titulo); font-size: 22px; color: var(--text2); margin-bottom: 8px }
.empty p { font-size: 13.5px; line-height: 1.6 }

#toast {
  position: fixed; bottom: 28px; right: 28px;
  background: var(--bg3); border: 1px solid var(--green);
  border-radius: var(--rsm); padding: 13px 20px;
  color: var(--text); font-size: 13.5px; z-index: 999;
  display: flex; align-items: center; gap: 10px;
  opacity: 0; transform: translateY(8px); transition: .3s; pointer-events: none;
}
#toast.show { opacity: 1; transform: translateY(0) }

/* Texto que so o leitor de tela le. Usado nos <label> dos campos que, no
 * desenho, nao tem rotulo visivel (busca do topo e entrada do assistente).
 * Tecnica padrao; nao usa display:none, que remove do leitor tambem. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------- animacoes */

@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes slideUp { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: translateY(0) } }
@keyframes dotPulse { 0%, 100% { opacity: .3; transform: scale(.8) } 50% { opacity: 1; transform: scale(1.2) } }
@keyframes spin { to { transform: rotate(360deg) } }
@keyframes reveal { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: translateY(0) } }

.page { animation: reveal .3s ease }

/* ------------------------------------------------------------------- mobile */

/* CAMPO COM FONTE MENOR QUE 16px FAZ O iOS AMPLIAR A PAGINA SOZINHO.
 *
 * Ao tocar num input, select ou textarea cuja fonte computada seja menor que
 * 16px, o Safari do iPhone da zoom para "ajudar a ler" -- e NAO desfaz o zoom
 * quando o campo perde o foco. O usuario fica preso numa pagina ampliada,
 * rolando de lado, e precisa fechar o zoom na mao. E o defeito de iPhone mais
 * comum que existe, e nenhum teste de desktop o encontra.
 *
 * No portal eram quatro campos: #l-email e #l-pass a 14px, #search e #ai-input
 * a 13px. Medido por tools/testar_webkit.py em viewport de iPhone 13.
 *
 * O conserto vale SO abaixo de 768px, porque so ali o problema existe -- no
 * desktop nada muda de aparencia. E fica em cada arquivo de componente, ao lado
 * da regra que ele corrige, porque as regras originais usam seletor de classe
 * ou id e o base.css e carregado ANTES deles: uma regra generica aqui perderia
 * a disputa de especificidade e nao teria efeito nenhum. Melhor local e obvio
 * do que central e silenciosamente inerte.
 *
 * A regra abaixo cobre o caso restante: campo que nenhum componente estiliza.
 *
 * NAO E ESCOLHA DE DESIGN, e contorno de comportamento do iOS. Nao conflita com
 * a decisao M8 (manter os tamanhos originais), que veio do manual de marca e
 * trata de legibilidade.
 */
@media (max-width: 768px) {
  #content { padding: 20px 16px }
  .grid-2, .grid-auto, .grid-pass { grid-template-columns: 1fr }
  input, select, textarea { font-size: 16px }
  /* A .section-bar nunca teve regra de tela estreita: e flex sem wrap, entao
   * titulo e controles disputavam a mesma linha e o que nao coubesse saia pela
   * borda. Ficou visivel a 360px quando a tela de fornecedores ganhou o
   * alternador de filtro -- o botao "So preferenciais" era cortado pela borda
   * direita e o alternador se sobrepunha ao titulo.
   *
   * Vale para TODAS as barras (empresas, passageiros, painel), que espremiam do
   * mesmo jeito antes; ali a folga so aparece quando o titulo e longo. */
  .section-bar { flex-wrap: wrap; gap: 12px }
}