/* Painel da empresa Kinta Marcha. Cores e tipografia do design guide: marinho, azul elétrico, brisa, Urbanist. */

@font-face {
  font-family: 'Urbanist'; src: url('fontes/Urbanist-latin.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Urbanist'; src: url('fontes/Urbanist-Italic-latin.woff2') format('woff2');
  font-weight: 100 900; font-style: italic; font-display: swap;
}

:root {
  --marinho: #0b1533;
  --azul: #1467ff;
  --ciano: #33d1ff;
  --brisa: #eef3ff;
  --fundo: #f6f8fd;
  --superficie: #ffffff;
  --superficie-2: #fbfcfe;
  --texto: #0b1533;
  --texto-2: #56617a;
  --texto-3: #8b94a9;
  --borda: #d5dcea;
  --borda-forte: #c3ccdf;
  --bom: #127a50;
  --alerta: #9a5800;
  --critico: #c0283a;
  --raio: 12px;
  --raio-p: 10px;
  --sombra: 0 1px 2px rgb(11 21 51 / .06), 0 4px 16px rgb(11 21 51 / .06);
  --sombra-alta: 0 18px 44px rgb(11 21 51 / .22);
  --fonte: 'Urbanist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fundo); color: var(--texto); font-family: var(--fonte); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 25px; font-weight: 800; font-style: italic; letter-spacing: -.025em; line-height: 1.15; }
h2 { font-size: 17px; font-weight: 700; letter-spacing: -.015em; }
h3 { font-size: 14.5px; font-weight: 700; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
.sub { color: var(--texto-2); }
.pequeno { font-size: 13px; color: var(--texto-3); }
.num { font-variant-numeric: tabular-nums; }
.icone { width: 1.25em; height: 1.25em; flex: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
.carregando-tela { min-height: 100dvh; display: grid; place-items: center; color: var(--texto-3); }
.carregando { padding: 56px 0; text-align: center; color: var(--texto-3); }

/* ---------- botões e campos ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px;
  border-radius: var(--raio-p); border: 1px solid transparent; font-weight: 600; font-size: 14px; cursor: pointer;
  text-decoration: none; white-space: nowrap; transition: background .12s, border-color .12s, opacity .12s;
}
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primario { background: var(--azul); color: #fff; }
.btn-primario:hover:not(:disabled) { background: #0d55d8; }
.btn-secundario { background: var(--superficie); border-color: var(--borda-forte); color: var(--texto); }
.btn-secundario:hover:not(:disabled) { background: var(--brisa); border-color: var(--azul); }
.btn-fantasma { background: transparent; color: var(--texto-2); padding: 0 10px; }
.btn-fantasma:hover:not(:disabled) { background: rgb(11 21 51 / .06); color: var(--texto); }
.btn-perigo { background: var(--critico); color: #fff; }
.btn-perigo:hover:not(:disabled) { background: #a51f30; }
.btn-perigo-suave { background: transparent; color: var(--critico); }
.btn-perigo-suave:hover:not(:disabled) { background: #fbeaec; }
.btn-p { min-height: 32px; padding: 0 10px; font-size: 13px; }
.btn-bloco { width: 100%; }
.btn-icone { width: 36px; min-height: 36px; padding: 0; }

.campo { display: block; min-width: 0; }
.campo > span { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.campo > small { display: block; font-size: 12.5px; color: var(--texto-3); margin-top: 4px; }
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="search"], input[type="url"],
input[type="date"], input[type="datetime-local"], input[type="number"], input:not([type]), select, textarea {
  width: 100%; min-height: 42px; padding: 0 12px; background: var(--superficie); border: 1px solid var(--borda-forte);
  border-radius: var(--raio-p); font-size: 15px; appearance: none;
}
textarea { padding: 10px 12px; min-height: 92px; resize: vertical; line-height: 1.45; }
select {
  padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2356617a' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--azul); outline-offset: -1px; border-color: transparent; }
input::placeholder, textarea::placeholder { color: #a3aabd; }
.grade-campos { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade-campos .largo { grid-column: 1 / -1; }
@media (min-width: 720px) { .grade-campos.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.marcar { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 14.5px; }
.marcar input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--azul); flex: none; }
.erro-form { background: #fbeaec; color: #8d1826; border-radius: var(--raio-p); padding: 10px 12px; font-size: 14px; font-weight: 500; }

/* ---------- selos e chips ---------- */
.selo { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 3px 9px 3px 8px; border-radius: 999px; background: var(--brisa); white-space: nowrap; }
.selo i { width: 7px; height: 7px; border-radius: 50%; background: var(--texto-3); }
.selo-bom { background: #e4f4ec; color: #0e5c3c; } .selo-bom i { background: var(--bom); }
.selo-alerta { background: #fdf1dc; color: #7d4700; } .selo-alerta i { background: #c07000; }
.selo-critico { background: #fbeaec; color: #8d1826; } .selo-critico i { background: var(--critico); }
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--texto-2); background: var(--brisa); padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.chip .icone { width: 13px; height: 13px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--marinho); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
.avatar.p { width: 24px; height: 24px; font-size: 10px; }

/* ---------- casca ---------- */
.casca { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100dvh; }
.lateral { background: var(--marinho); color: #a8b2cb; display: flex; flex-direction: column; padding: 18px 12px; position: sticky; top: 0; height: 100dvh; }
.marca { display: flex; align-items: center; gap: 10px; padding: 2px 8px 18px; }
.marca .selo-km { width: 34px; height: 34px; border-radius: 10px; background: var(--azul); color: #fff; display: grid; place-items: center; font-weight: 800; font-style: italic; font-size: 15px; flex: none; }
.marca strong { display: block; color: #fff; font-size: 14.5px; line-height: 1.2; }
.marca small { font-size: 12px; }
.lateral nav { display: grid; gap: 2px; }
.lateral nav a, .lateral-pe a, .lateral-pe button {
  display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: var(--raio-p); text-decoration: none;
  font-weight: 500; font-size: 14.5px; color: #a8b2cb; background: none; border: 0; cursor: pointer; width: 100%; text-align: left;
}
.lateral nav a:hover, .lateral-pe a:hover, .lateral-pe button:hover { background: #17224a; color: #fff; }
.lateral nav a[aria-current] { background: #1b2750; color: #fff; font-weight: 700; }
.lateral nav .contador { margin-left: auto; background: var(--azul); color: #fff; font-size: 11.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.lateral nav .contador.perigo { background: var(--critico); }
.lateral-pe { margin-top: auto; border-top: 1px solid #1b2750; padding-top: 10px; display: grid; gap: 2px; }
.lateral-pe .quem { display: flex; align-items: center; gap: 10px; }
.lateral-pe .quem strong { display: block; color: #fff; font-size: 13.5px; }
.lateral-pe .quem small { font-size: 11.5px; }
.sinal { display: flex; align-items: center; gap: 6px; font-size: 11.5px; padding: 6px 10px; }
.sinal i { width: 7px; height: 7px; border-radius: 50%; background: var(--bom); flex: none; }
.sinal.off i { background: #6b7590; }

main { padding: 26px 28px 60px; min-width: 0; }
.cabeca { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.cabeca .direita { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* campo dentro do cabeçalho não ocupa a linha inteira: senão busca, filtro e botão empilham um por linha */
.cabeca .direita input, .cabeca .direita select { width: auto; }
.cabeca .direita .campo { display: flex; align-items: center; }
@media (max-width: 640px) {
  .cabeca .direita { width: 100%; }
  .cabeca .direita input, .cabeca .direita select { flex: 1 1 140px; min-width: 0; }
}
.abas-pe { display: none; }

@media (max-width: 900px) {
  .casca { grid-template-columns: 1fr; }
  .lateral { display: none; }
  main { padding: 16px 16px 84px; }
  .abas-pe {
    display: grid; grid-auto-flow: column; position: fixed; left: 0; right: 0; bottom: 0; background: var(--superficie);
    border-top: 1px solid var(--borda); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); z-index: 30;
  }
  .abas-pe a { display: grid; justify-items: center; gap: 2px; padding: 6px 0; font-size: 11px; font-weight: 600; color: var(--texto-3); text-decoration: none; }
  .abas-pe a[aria-current] { color: var(--azul); }
  .abas-pe .icone { width: 22px; height: 22px; }
}

/* ---------- cartões ---------- */
.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 16px; }
.cartao + .cartao { margin-top: 14px; }
.cartao > header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.cartao > header .direita { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.blocos { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.blocos.dois { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.metrica { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px 16px; box-shadow: var(--sombra); }
.metrica .rotulo { font-size: 12.5px; font-weight: 700; color: var(--texto-2); text-transform: uppercase; letter-spacing: .04em; display: flex; align-items: center; gap: 6px; }
.metrica .valor { font-size: 27px; font-weight: 800; letter-spacing: -.03em; margin-top: 6px; font-variant-numeric: tabular-nums; }
.metrica .valor.p { font-size: 21px; }
.metrica .apoio { font-size: 12.5px; color: var(--texto-3); margin-top: 2px; }
.metrica.destaque { background: var(--marinho); border-color: var(--marinho); color: #fff; }
.metrica.destaque .rotulo { color: var(--ciano); }
.metrica.destaque .apoio { color: #a8b2cb; }
.variacao { font-size: 12.5px; font-weight: 700; }
.variacao.sobe { color: var(--bom); } .variacao.cai { color: var(--critico); }

/* ---------- tabelas ---------- */
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th { text-align: left; font-size: 12px; font-weight: 700; color: var(--texto-2); text-transform: uppercase; letter-spacing: .04em; padding: 0 10px 8px; white-space: nowrap; }
.tabela td { padding: 10px; border-top: 1px solid var(--borda); vertical-align: middle; }
.tabela tr:hover td { background: var(--superficie-2); }
.tabela .dir { text-align: right; font-variant-numeric: tabular-nums; }
.tabela .clicavel { cursor: pointer; }
.rolar { overflow-x: auto; margin: 0 -16px; padding: 0 16px; }

/* ---------- gráfico ---------- */
.grafico { width: 100%; height: 190px; }
.grafico .barra { fill: var(--azul); }
.grafico .barra.fraca { fill: #b7cdfb; }
.grafico .linha { fill: none; stroke: var(--marinho); stroke-width: 2; }
.grafico .eixo { stroke: var(--borda); stroke-width: 1; }
.grafico .rotulo { font-size: 10px; fill: var(--texto-3); }
.legenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--texto-2); margin-top: 8px; }
.legenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 5px; }

.barra-cat { display: grid; gap: 8px; }
.barra-cat .linha-cat { display: grid; grid-template-columns: 130px 1fr auto; gap: 10px; align-items: center; font-size: 13.5px; }
.barra-cat .trilha { background: var(--brisa); border-radius: 999px; height: 10px; overflow: hidden; }
.barra-cat .trilha i { display: block; height: 100%; background: var(--azul); border-radius: 999px; }

/* ---------- quadro (kanban) ---------- */
.quadro { display: grid; gap: 12px; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); overflow-x: auto; padding-bottom: 8px; align-items: start; }
.coluna { background: var(--superficie-2); border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px; min-height: 120px; }
.coluna > header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13px; font-weight: 700; }
.coluna > header .n { margin-left: auto; color: var(--texto-3); font-weight: 600; }
.ficha {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-p); padding: 10px; margin-bottom: 8px;
  cursor: pointer; box-shadow: 0 1px 1px rgb(11 21 51 / .04);
}
.ficha:hover { border-color: var(--azul); }
.ficha strong { display: block; font-size: 14px; line-height: 1.3; }
.ficha .meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.ficha.alta { border-left: 3px solid var(--critico); }
.ficha.media { border-left: 3px solid var(--alerta); }
.ficha.baixa { border-left: 3px solid var(--borda-forte); }
.arrastando { opacity: .5; }
.coluna.alvo { border-color: var(--azul); background: var(--brisa); }

/* ---------- avisos ---------- */
.aviso-linha { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-top: 1px solid var(--borda); font-size: 14px; }
.aviso-linha:first-child { border-top: 0; }
.aviso-linha .icone { margin-top: 2px; }
.aviso-linha.critico .icone { color: var(--critico); }
.aviso-linha.alerta .icone { color: var(--alerta); }
.vazio { text-align: center; padding: 40px 16px; color: var(--texto-2); }
.vazio h2 { margin-bottom: 6px; }

#avisos { position: fixed; z-index: 60; left: 50%; transform: translateX(-50%); bottom: 22px; display: grid; gap: 8px; }
.aviso { display: flex; align-items: center; gap: 8px; background: var(--marinho); color: #fff; padding: 10px 14px; border-radius: 999px; box-shadow: var(--sombra-alta); font-size: 14px; font-weight: 600; }
.aviso-erro { background: var(--critico); }
.aviso-na-janela { position: static; transform: none; margin: 10px auto 0; }

/* ---------- janela ---------- */
dialog {
  border: 0; border-radius: 16px; padding: 0; background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-alta);
  width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 48px);
}
dialog.larga { width: min(860px, calc(100vw - 24px)); }
dialog::backdrop { background: rgb(11 21 51 / .5); }
.janela-corpo { padding: 20px; display: grid; gap: 14px; overflow: auto; max-height: calc(100dvh - 48px); }
.janela-acoes { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.janela-acoes .esquerda { margin-right: auto; }

/* ---------- linha do tempo ---------- */
.tempo-linha { display: grid; gap: 12px; }
.tempo-item { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 14px; }
.tempo-item .bolinha { width: 9px; height: 9px; border-radius: 50%; background: var(--azul); margin: 6px 0 0 6px; }
.tempo-item.sistema .bolinha { background: var(--borda-forte); }
.tempo-item small { display: block; color: var(--texto-3); font-size: 12px; }

.entrar { min-height: 100dvh; display: grid; place-items: center; background: var(--marinho); padding: 20px; }
.entrar-caixa { background: var(--superficie); border-radius: 18px; padding: 26px; width: min(400px, 100%); box-shadow: var(--sombra-alta); display: grid; gap: 14px; }
.entrar-caixa .marca-topo { display: flex; align-items: center; gap: 10px; }
.entrar-caixa .selo-km { width: 38px; height: 38px; border-radius: 11px; background: var(--azul); color: #fff; display: grid; place-items: center; font-weight: 800; font-style: italic; }

.dica { position: absolute; z-index: 70; background: var(--marinho); color: #fff; font-size: 12.5px; padding: 7px 10px; border-radius: 8px; max-width: 260px; white-space: pre-line; pointer-events: none; box-shadow: var(--sombra-alta); }