/*
 * Área da FlyData. Visual fixo, sem variáveis vindas do banco — nenhuma
 * identidade de cliente alcança esta folha. É o que garante que uma cor mal
 * cadastrada por um cliente não consiga quebrar (nem disfarçar) esta tela.
 *
 * As cores são as da marca, tiradas do flydata.com.br: o azul dos botões, o
 * azul-noite do topo do site e o cinza claro das seções.
 */

:root {
  --azul: #0162a4;
  --azul-escuro: #014c80;
  --azul-claro: #639ff4;
  --noite: #111820;
  --fundo: #edf2f4;
  --superficie: #ffffff;
  --borda: #dbe3e8;
  --texto: #222222;
  --texto-suave: #69727d;
  --ok: #0f8b5f;
  --erro: #b3261e;
  --raio: 10px;
}

* { box-sizing: border-box; }

/* Mesma escala do portal, e pelo mesmo motivo: `rem` é relativo à raiz, então é
   daqui que a interface inteira cresce em monitor grande. Ver portal.css. */
html { font-size: 15.5px; }

@media (min-width: 1500px) { html { font-size: 16.5px; } }
@media (min-width: 1900px) { html { font-size: 17.5px; } }
@media (min-width: 2400px) { html { font-size: 19.5px; } }
@media (min-width: 3200px) { html { font-size: 21px; } }

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--fundo);
  color: var(--texto);
  font-size: 1rem;
  line-height: 1.55;
}

a { color: var(--azul); }

/* ---------- topo ---------- */

.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
  color: var(--texto);
}

/* A logo da FlyData tem o texto escuro, então o topo é claro. A versão de
   texto branco existe no site, mas usar as duas exigiria escolher qual servir
   em cada superfície — e este painel é todo claro. */
.topo .marca {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--texto);
  text-decoration: none;
  font-weight: 600;
  min-width: 0;
}

.topo .marca img { height: 30px; width: auto; }

.topo .marca .secao {
  padding-left: 14px;
  border-left: 1px solid var(--borda);
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--texto-suave);
  white-space: nowrap;
}

.topo .sair { color: var(--texto-suave); text-decoration: none; font-size: 0.9rem; }
.topo .sair:hover { color: var(--azul); }

.subtopo {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 20px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
  overflow-x: auto;
}

.subtopo .nome-cliente {
  font-weight: 600;
  margin-right: 16px;
  padding: 12px 0;
  white-space: nowrap;
}

.subtopo a {
  padding: 12px 14px;
  text-decoration: none;
  color: var(--texto-suave);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.subtopo a.ativo { color: var(--azul); border-bottom-color: var(--azul); font-weight: 600; }
.subtopo a.externo { margin-left: auto; }

/* flex:1 empurra o rodape para o fim da janela; width:100% e o que mantem
   a coluna centralizada dentro do corpo flex. */
main {
  flex: 1;
  width: 100%;
  max-width: 68rem;
  margin: 0 auto;
  padding: 24px 20px 48px;
}

/* ---------- cabeçalho e cartões ---------- */

.cabecalho-pagina {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.cabecalho-pagina h1 { margin: 0; font-size: 1.5rem; }
.endereco { color: var(--texto-suave); }

.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 20px;
  margin-bottom: 20px;
}

.cartao h2 { margin: 0 0 16px; font-size: 1.05rem; }
.cartao.vazio { text-align: center; padding: 40px 20px; }

.colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }

.abas {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--borda);
  overflow-x: auto;
}

.abas a {
  padding: 10px 14px;
  text-decoration: none;
  color: var(--texto-suave);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.abas a.ativo { color: var(--azul); border-bottom-color: var(--azul); font-weight: 600; }

/* ---------- formulários ---------- */

label { display: block; margin-bottom: 6px; font-size: 0.86rem; font-weight: 500; }

label.caixa {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  margin: 12px 0 4px;
}

label.caixa input { width: auto; margin: 0; }

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="file"], select, textarea {
  width: 100%;
  padding: 9px 11px;
  margin-bottom: 14px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
}

input[type="color"] {
  width: 100%;
  height: 42px;
  padding: 3px;
  margin-bottom: 14px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--superficie);
}

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--azul);
  outline-offset: 1px;
  border-color: var(--azul);
}

.linha { display: flex; gap: 12px; flex-wrap: wrap; }
.campo { flex: 1 1 160px; min-width: 0; }
.campo.cresce { flex: 2 1 240px; }
.campo.estreito { flex: 0 1 140px; }

.ajuda { margin: -8px 0 16px; font-size: 0.82rem; color: var(--texto-suave); }
.ajuda.destaque { margin: 0 0 20px; }

button, .botao {
  display: inline-block;
  padding: 9px 16px;
  border: 0;
  border-radius: 8px;
  background: var(--azul);
  color: #fff;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

button:hover, .botao:hover { background: var(--azul-escuro); }
button:disabled { opacity: 0.5; cursor: default; }

button.secundario {
  background: var(--superficie);
  color: var(--azul);
  border: 1px solid var(--borda);
}

button.secundario:hover { background: var(--fundo); }

button.link, button.link-perigo {
  background: none;
  color: var(--azul);
  padding: 0;
  font-weight: 400;
  text-decoration: underline;
}

button.link-perigo { color: var(--erro); }
button.link:hover, button.link-perigo:hover { background: none; }

.cancelar { margin-left: 12px; color: var(--texto-suave); font-size: 0.9rem; }
.em-linha { display: flex; gap: 6px; align-items: center; }
.em-linha input { margin: 0; min-width: 130px; }

/* ---------- avisos ---------- */

.alerta { padding: 12px 14px; border-radius: 8px; margin-bottom: 20px; font-size: 0.9rem; }
.alerta.erro { background: rgba(179, 38, 30, 0.1); color: var(--erro); }
.alerta.ok { background: rgba(15, 139, 95, 0.1); color: var(--ok); }

.aviso-seguranca {
  padding: 12px 14px;
  margin: 4px 0 20px;
  border-left: 3px solid var(--azul);
  background: var(--fundo);
  border-radius: 0 8px 8px 0;
  font-size: 0.86rem;
}

/* ---------- tabelas ---------- */

.rolagem-tabela {
  overflow-x: auto;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  margin-bottom: 20px;
}

table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
th, td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--borda); }
thead th { background: var(--fundo); font-weight: 600; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
td form { margin: 0; }

code {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.88em;
  background: var(--fundo);
  padding: 1px 5px;
  border-radius: 4px;
}

.etiqueta {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  background: var(--fundo);
  color: var(--texto-suave);
}

.etiqueta.ok { background: rgba(15, 139, 95, 0.12); color: var(--ok); }
.etiqueta.inativo { background: rgba(179, 38, 30, 0.1); color: var(--erro); }
.etiqueta.papel-metrica { background: rgba(31, 111, 235, 0.12); color: var(--azul); }
.etiqueta.papel-data { background: rgba(217, 119, 6, 0.14); color: #92400e; }

.lista-objetos {
  list-style: none;
  margin: 16px 0 0;
  padding: 12px;
  max-height: 280px;
  overflow-y: auto;
  background: var(--fundo);
  border-radius: 8px;
  columns: 2;
}

.lista-objetos li { margin-bottom: 4px; break-inside: avoid; }

/* ---------- identidade visual ---------- */

.temas-prontos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }

.chip-tema {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.previa { border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; }

.previa-topo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-weight: 600;
}

.previa-topo img { height: 26px; max-width: 120px; object-fit: contain; }
.previa-corpo { padding: 16px; background: var(--fundo); }

.previa-balao-usuario,
.previa-balao-bot {
  padding: 10px 14px;
  border-radius: 12px;
  margin-bottom: 10px;
  font-size: 0.88rem;
  max-width: 85%;
}

.previa-balao-usuario { margin-left: auto; border-bottom-right-radius: 4px; }

.previa-balao-bot {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-bottom-left-radius: 4px;
  margin-bottom: 0;
}

/* ---------- login ---------- */

.tela-login { display: flex; align-items: center; justify-content: center; min-height: 100vh; }

.caixa-login {
  width: 100%;
  max-width: 23rem;
  padding: 32px 28px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}

.caixa-login h1 { margin: 0; font-size: 1.5rem; text-align: center; }
.caixa-login .subtitulo { margin: 2px 0 24px; text-align: center; color: var(--texto-suave); }
.caixa-login button { width: 100%; }

/* ---------- tablet e celular ---------- */

@media (max-width: 860px) {
  .colunas { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  main { padding: 16px 12px 48px; }
  .cartao { padding: 16px; }
  .lista-objetos { columns: 1; }
  .em-linha { flex-wrap: wrap; }
}

/* ---------- escolher objeto/coluna do banco do cliente ---------- */

.grade-objetos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.chip-objeto {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--superficie);
  color: var(--texto);
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.82rem;
  font-weight: 400;
}

.chip-objeto:hover:not(:disabled) {
  background: var(--fundo);
  border-color: var(--azul);
  color: var(--azul);
}

/* Já cadastrado continua visível, mas sem convidar ao clique: some da tarefa
   sem sumir da conferência. */
.chip-objeto.usado {
  opacity: 0.55;
  cursor: default;
  background: var(--fundo);
}

.chip-objeto small { color: var(--texto-suave); font-size: 0.72rem; }
.chip-objeto .marca-usado { color: var(--ok); font-weight: 700; }

/* Edição em linha da tabela de colunas: os campos precisam caber sem esticar
   a tabela até a rolagem horizontal ficar incômoda. */
td input[type="text"], td select {
  margin: 0;
  padding: 5px 7px;
  font-size: 0.85rem;
  min-width: 90px;
}

td input[type="text"] { width: 130px; }
.acoes-coluna { display: flex; gap: 8px; align-items: center; white-space: nowrap; }
.acoes-coluna button { padding: 5px 10px; font-size: 0.82rem; }

/* ---------- assinatura da FlyData ---------- */

.creditos {
  padding: 20px 16px 28px;
  text-align: center;
  font-size: 0.78rem;
  color: var(--texto-suave);
}

.creditos a {
  color: var(--azul);
  text-decoration: none;
  font-weight: 500;
}

.creditos a:hover { text-decoration: underline; }

/* Na caixa de login ela fica dentro do cartão, separada por um filete. */
.caixa-login .creditos {
  margin-top: 22px;
  padding: 14px 0 0;
  border-top: 1px solid var(--borda);
  font-size: 0.74rem;
}

.marca-login { margin-bottom: 22px; text-align: center; }
.marca-login img { height: 54px; width: auto; max-width: 100%; }

/* Mascote: ver static/robo.css. Aqui só os tamanhos desta área. */
.cartao.vazio .robo svg { width: 116px; margin-bottom: 8px; }