/*
  Interface densa, nao bonitinha: a tela util deste painel e uma tabela cheia de
  OS que o gestor varre com o olho. Por isso 13-14px de base, linha baixa e zero
  animacao - movimento aqui so atrapalha quem esta procurando um numero.

  color-scheme: dark faz o proprio navegador desenhar <select>, <input type=date>
  e a barra de rolagem no escuro. Sem isso, os controles nativos aparecem brancos
  no meio do tema e queimam a vista.
*/

:root {
  color-scheme: dark;

  --bg: #0f1115;
  --painel: #151920;
  --painel2: #1a1f28;
  --borda: #242a35;
  --borda-forte: #333c4b;
  --texto: #e6e8ec;
  --fraco: #8b93a1;
  --fraco2: #6b7280;

  --acento: #4c8dff;
  --acento-bg: #1c2941;

  --verde: #4ade80;
  --vermelho: #f87171;
  --ambar: #fbbf24;
  --laranja: #fb923c;
  --roxo: #a78bfa;
  --ciano: #22d3ee;
  --azul: #60a5fa;
  --agua: #2dd4bf;
  --cinza: #9ca3af;

  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--texto);
  font: 14px/1.45 var(--fonte);
  -webkit-text-size-adjust: 100%;
}

a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }

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

.topo {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0 1rem;
  height: 46px;
  background: var(--painel);
  border-bottom: 1px solid var(--borda);
  position: sticky;
  top: 0;
  z-index: 20;
}

.marca {
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.marca span { color: var(--fraco2); font-weight: 400; font-size: 12px; }

.nav { display: flex; gap: .25rem; flex: 1; overflow-x: auto; }
.nav a {
  padding: .35rem .6rem;
  border-radius: 4px;
  color: var(--fraco);
  font-weight: 500;
  white-space: nowrap;
}
.nav a:hover { background: var(--painel2); color: var(--texto); text-decoration: none; }
.nav a.ativo { background: var(--acento-bg); color: #cfe0ff; }

.nav .contador {
  display: inline-block;
  margin-left: .35rem;
  background: var(--vermelho);
  color: #1a0d0d;
  font-size: 11px;
  font-weight: 700;
  border-radius: 8px;
  padding: 0 5px;
}

.topo .quem { color: var(--fraco); font-size: 12px; white-space: nowrap; }

/* --------------------------------------------------------------- estrutura */

main { padding: 1rem; max-width: 1700px; }

.cabecalho-tela {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  flex-wrap: wrap;
  margin: 0 0 .75rem;
}
.cabecalho-tela h1 { font-size: 16px; margin: 0; letter-spacing: -.01em; }
.cabecalho-tela .sub { color: var(--fraco); font-size: 12px; }

.painel {
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: 5px;
  margin-bottom: 1rem;
}
.painel > h2 {
  font-size: 13px;
  margin: 0;
  padding: .55rem .75rem;
  border-bottom: 1px solid var(--borda);
  color: var(--fraco);
  text-transform: uppercase;
  letter-spacing: .05em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
}
.painel .corpo { padding: .75rem; }

.linha-botoes { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* ---------------------------------------------------------------- filtros */

.filtros {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: flex-end;
  padding: .65rem .75rem;
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: 5px;
  margin-bottom: .6rem;
}
.filtros .campo { min-width: 8rem; }
.filtros .campo.largo { min-width: 16rem; flex: 1; }

.atalhos { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .6rem; }

/* --------------------------------------------------------------- controles */

.campo { display: flex; flex-direction: column; gap: .2rem; }
.campo > label {
  font-size: 11px;
  color: var(--fraco);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.campo .dica { font-size: 11px; color: var(--fraco2); }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=datetime-local], input[type=search], select, textarea {
  background: #10141a;
  color: var(--texto);
  border: 1px solid var(--borda-forte);
  border-radius: 4px;
  padding: .35rem .45rem;
  font: inherit;
  font-size: 13px;
  width: 100%;
  min-width: 0;
}
textarea { resize: vertical; min-height: 4.5rem; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--acento); outline-offset: -1px; }
input:disabled, select:disabled, textarea:disabled { opacity: .5; }
select option:disabled { color: var(--fraco2); }

.checkbox {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}
.checkbox input { width: auto; accent-color: var(--acento); }

.btn {
  background: var(--painel2);
  color: var(--texto);
  border: 1px solid var(--borda-forte);
  border-radius: 4px;
  padding: .35rem .7rem;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover:not(:disabled) { background: #222834; border-color: #445064; }
.btn:disabled { opacity: .45; cursor: default; }
.btn.primario { background: var(--acento-bg); border-color: #35558c; color: #d6e5ff; }
.btn.primario:hover:not(:disabled) { background: #24365a; }
.btn.perigo { color: var(--vermelho); border-color: #5b2b2b; }
.btn.perigo:hover:not(:disabled) { background: #2a1818; }
.btn.pequeno { padding: .15rem .45rem; font-size: 12px; }
.btn.link {
  background: none;
  border: none;
  color: var(--acento);
  padding: 0;
  text-decoration: underline;
}

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

/*
  A tabela nao encolhe: em notebook pequeno ela rola na horizontal dentro do
  .rolagem. Quebrar coluna em varias linhas destruiria a leitura em varredura,
  que e justamente o que essa tela serve pra fazer.
*/
.rolagem { overflow-x: auto; }

table.tabela { border-collapse: collapse; width: 100%; font-size: 13px; }
table.tabela th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--fraco);
  font-weight: 600;
  padding: .4rem .5rem;
  border-bottom: 1px solid var(--borda-forte);
  background: var(--painel);
  position: sticky;
  top: 46px;
  z-index: 5;
  white-space: nowrap;
}
table.tabela td {
  padding: .35rem .5rem;
  border-bottom: 1px solid var(--borda);
  vertical-align: top;
}
table.tabela tbody tr:hover { background: var(--painel2); }
table.tabela td.num { font-family: var(--mono); font-size: 12px; white-space: nowrap; }
table.tabela td.acoes { white-space: nowrap; text-align: right; }
table.tabela td.apertado, table.tabela th.apertado { white-space: nowrap; }
table.tabela .secundario { display: block; color: var(--fraco2); font-size: 11px; }

.paginacao {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .75rem;
  border-top: 1px solid var(--borda);
  font-size: 12px;
  color: var(--fraco);
}

/* --------------------------------------------------------------- estados */

.carregando {
  padding: 1rem;
  color: var(--fraco);
  font-size: 13px;
}
.carregando::before { content: "\00b7\00b7\00b7 "; }

.vazio {
  padding: 1.5rem 1rem;
  color: var(--fraco2);
  text-align: center;
  font-size: 13px;
}

.erro {
  border: 1px solid #5b2b2b;
  background: #1d1315;
  border-left-width: 3px;
  border-radius: 4px;
  padding: .55rem .7rem;
  margin: .5rem 0;
  font-size: 13px;
}
.erro strong { display: block; color: var(--vermelho); font-size: 12px; margin-bottom: .15rem; }
.erro p { margin: 0; color: #e8d3d3; white-space: pre-wrap; word-break: break-word; }
/*
  502 = o IXC recusou ou engoliu a escrita. Fica com destaque proprio porque a
  frase que vem no detail e a do ERP, e e ela que diz o que aconteceu de fato.
*/
.erro.do-ixc { border-color: #6b4a1f; background: #1e1810; }
.erro.do-ixc strong { color: var(--ambar); }

.aviso {
  border: 1px solid #5b4a1f;
  background: #1b1810;
  border-left-width: 3px;
  border-radius: 4px;
  padding: .5rem .7rem;
  margin: .5rem 0;
  font-size: 13px;
  color: #ecdfc0;
}

/* --------------------------------------------------------------- badges */

.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid currentColor;
  background: rgba(255, 255, 255, .04);
  white-space: nowrap;
}
.c-verde { color: var(--verde); }
.c-vermelho { color: var(--vermelho); }
.c-ambar { color: var(--ambar); }
.c-laranja { color: var(--laranja); }
.c-roxo { color: var(--roxo); }
.c-ciano { color: var(--ciano); }
.c-azul { color: var(--azul); }
.c-agua { color: var(--agua); }
.c-cinza { color: var(--cinza); }

.tag {
  display: inline-block;
  font-size: 11px;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--painel2);
  border: 1px solid var(--borda);
  color: var(--fraco);
}

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

.tela-login { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.tela-login form { width: min(22rem, 100%); }
.tela-login h1 { font-size: 18px; margin: 0 0 .15rem; }
.tela-login .sub { color: var(--fraco2); font-size: 12px; margin: 0 0 1.25rem; }
.tela-login .campo { margin-bottom: .7rem; }
.tela-login .btn { width: 100%; padding: .5rem; }

/* --------------------------------------------------------------- detalhe */

.colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1rem; }

dl.kv { margin: 0; display: grid; grid-template-columns: minmax(7rem, auto) 1fr; gap: .2rem .75rem; font-size: 13px; }
dl.kv dt { color: var(--fraco); font-size: 12px; }
dl.kv dd { margin: 0; word-break: break-word; }
dl.kv dd.mono { font-family: var(--mono); font-size: 12px; }

.texto-longo {
  white-space: pre-wrap;
  word-break: break-word;
  background: #10141a;
  border: 1px solid var(--borda);
  border-radius: 4px;
  padding: .5rem;
  font-size: 13px;
  max-height: 24rem;
  overflow: auto;
}

details.cru { margin-top: .5rem; }
details.cru > summary { cursor: pointer; color: var(--fraco); font-size: 12px; padding: .25rem 0; }
details.cru table { font-size: 12px; font-family: var(--mono); }

/* ---------------------------------------------------------------- agenda */

.cartao-tecnico { break-inside: avoid; }
.cartao-tecnico .carga { font-size: 11px; color: var(--fraco); font-weight: 400; text-transform: none; letter-spacing: 0; }
.slot {
  display: flex;
  gap: .5rem;
  padding: .4rem .5rem;
  border-bottom: 1px solid var(--borda);
  font-size: 13px;
}
.slot:last-child { border-bottom: none; }
.slot .hora { font-family: var(--mono); font-size: 12px; color: var(--ambar); min-width: 3.2rem; }
.slot .corpo-slot { flex: 1; min-width: 0; }
.slot .corpo-slot .cli { display: block; }
.slot .corpo-slot .ass { display: block; color: var(--fraco2); font-size: 11px; }

/* ------------------------------------------------------------------ ctos */

.cartao-cto { border: 1px solid var(--borda); border-radius: 5px; background: var(--painel); padding: .7rem; }
.cartao-cto h3 { margin: 0 0 .35rem; font-size: 14px; font-family: var(--mono); }
.coord { font-family: var(--mono); font-size: 12px; color: var(--fraco); }

/* ------------------------------------------------------------------ abas */

.abas {
  display: flex;
  gap: .25rem;
  border-bottom: 1px solid var(--borda-forte);
  margin-bottom: 1rem;
  overflow-x: auto;
}
.abas a {
  padding: .4rem .75rem;
  color: var(--fraco);
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  margin-bottom: -1px;
  white-space: nowrap;
}
.abas a:hover { color: var(--texto); text-decoration: none; }
.abas a.ativo {
  background: var(--painel);
  border-color: var(--borda-forte);
  border-bottom-color: var(--painel);
  color: var(--texto);
}

.rodape-licenca {
  padding: .6rem .75rem;
  border-top: 1px solid var(--borda);
  color: var(--fraco2);
  font-size: 11px;
}

.status-conexao { display: flex; align-items: center; gap: .5rem; font-size: 14px; }
.bolinha { width: 10px; height: 10px; border-radius: 50%; background: var(--cinza); flex: none; }
.bolinha.verde { background: var(--verde); }
.bolinha.ambar { background: var(--ambar); }
.bolinha.vermelho { background: var(--vermelho); }

.qrcode {
  background: #fff;
  padding: .5rem;
  border-radius: 4px;
  width: 264px;
  max-width: 100%;
  image-rendering: pixelated;
  display: block;
}

/* ----------------------------------------------------------------- modal */

.modal-fundo {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .65);
  display: grid;
  place-items: center;
  padding: 1rem;
  z-index: 50;
  overflow: auto;
}
.modal {
  background: var(--painel);
  border: 1px solid var(--borda-forte);
  border-radius: 6px;
  width: min(34rem, 100%);
  max-height: calc(100vh - 2rem);
  display: flex;
  flex-direction: column;
}
.modal.largo { width: min(52rem, 100%); }
.modal > header {
  padding: .6rem .75rem;
  border-bottom: 1px solid var(--borda);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.modal > header h2 { font-size: 14px; margin: 0; }
.modal > .conteudo { padding: .75rem; overflow: auto; }
.modal > footer {
  padding: .6rem .75rem;
  border-top: 1px solid var(--borda);
  display: flex;
  gap: .5rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.modal .campo { margin-bottom: .65rem; }
.modal .par { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }

.fechar-x {
  background: none;
  border: none;
  color: var(--fraco);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 .25rem;
}
.fechar-x:hover { color: var(--texto); }

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

#avisos {
  position: fixed;
  right: .75rem;
  bottom: .75rem;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  max-width: min(26rem, calc(100vw - 1.5rem));
}
.toast {
  background: var(--painel2);
  border: 1px solid var(--borda-forte);
  border-left: 3px solid var(--acento);
  border-radius: 4px;
  padding: .5rem .7rem;
  font-size: 13px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
  word-break: break-word;
}
.toast.ok { border-left-color: var(--verde); }
.toast.ruim { border-left-color: var(--vermelho); }

/* ------------------------------------------------------------ responsivo */

@media (max-width: 720px) {
  main { padding: .6rem; }
  .topo { gap: .6rem; padding: 0 .6rem; }
  .topo .quem { display: none; }
  .modal .par { grid-template-columns: 1fr; }
  table.tabela th { position: static; }
}