:root {
  --fundo: #f6f5f2;
  --superficie: #ffffff;
  --texto: #1d1c1a;
  --suave: #6b6862;
  --borda: #e3e0da;
  --primaria: #1f5f4a;
  --primaria-texto: #ffffff;
  --alerta: #b4381f;
  --alerta-fundo: #fbebe7;
  --aviso: #8a5a00;
  --aviso-fundo: #fdf3dc;
  --ok: #1f7a4d;
  --info-fundo: #e8f1ee;
  --raio: 10px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #161615;
    --superficie: #201f1d;
    --texto: #ecebe7;
    --suave: #a19d95;
    --borda: #34322e;
    --primaria: #5fb595;
    --primaria-texto: #0d1f18;
    --alerta: #f08a73;
    --alerta-fundo: #3a1f19;
    --aviso: #e8bd62;
    --aviso-fundo: #352a12;
    --ok: #6fcf9c;
    --info-fundo: #1d2c27;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

h1 { font-size: 1.15rem; margin: 0; }
a { color: var(--primaria); }

button, .botao, select, input, textarea {
  font: inherit;
  color: inherit;
}

button, .botao {
  border: 1px solid var(--borda);
  background: var(--superficie);
  border-radius: 8px;
  padding: 7px 12px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;
}
button:disabled { opacity: .5; cursor: progress; }
button.primario { background: var(--primaria); color: var(--primaria-texto); border-color: var(--primaria); font-weight: 600; }
button.discreto { color: var(--suave); }
button.aviso { background: var(--aviso-fundo); color: var(--aviso); border-color: transparent; }
button.link { border: 0; background: none; color: var(--suave); text-decoration: underline; padding: 4px; }

select, input[type=search], input[type=email], input:not([type]), input[inputmode] {
  border: 1px solid var(--borda);
  background: var(--superficie);
  border-radius: 8px;
  padding: 8px 10px;
  min-width: 0;
}

.msg { margin: 8px 0; min-height: 1.2em; color: var(--suave); }
.msg.erro { color: var(--alerta); }
.msg.aviso { color: var(--aviso); }

/* Login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.cartao-login {
  width: 100%; max-width: 360px; background: var(--superficie);
  border: 1px solid var(--borda); border-radius: 14px; padding: 28px 24px;
}
.cartao-login .sub { color: var(--suave); margin: 4px 0 20px; }
.cartao-login form { display: grid; gap: 8px; }
.cartao-login label { font-weight: 600; font-size: .9rem; }
.cartao-login button.primario { margin-top: 6px; padding: 10px; }
.aviso-codigo { margin: 0 0 8px; color: var(--suave); }
#codigo { letter-spacing: .3em; font-size: 1.2rem; text-align: center; }

/* Fila */
#tela-fila { max-width: 1100px; margin: 0 auto; padding: 16px; }

.topo { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.marca { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.equipe { font-size: .85rem; color: var(--suave); }
.equipe.on { color: var(--ok); }
.usuario { display: flex; align-items: center; gap: 10px; font-size: .9rem; }
.pilula { border-radius: 999px; padding: 4px 12px; font-size: .85rem; color: var(--suave); }
.pilula.on { color: var(--ok); border-color: var(--ok); }

.resumo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.numero { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px 14px; }
.numero span { display: block; font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.numero small { color: var(--suave); }

.filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filtros input[type=search] { flex: 1 1 180px; }
.check { display: flex; gap: 6px; align-items: center; color: var(--suave); font-size: .9rem; }

.lista { display: grid; gap: 8px; }
.cartao {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto;
  grid-template-areas: "quem tempo acoes" "obs obs obs";
  gap: 6px 16px;
  align-items: center;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-left: 4px solid var(--borda);
  border-radius: var(--raio);
  padding: 12px 14px;
}
.cartao.aguardando { border-left-color: var(--aviso); }
.cartao.em_atendimento { border-left-color: var(--primaria); }
.cartao.finalizado { opacity: .75; }
.cartao.alerta { border-left-color: var(--alerta); background: var(--alerta-fundo); }
.cartao.esquecido { border-left-color: var(--alerta); }

.quem { grid-area: quem; min-width: 0; }
.nome { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-weight: 600; }
.nome a { text-decoration: none; overflow-wrap: anywhere; }
.sem { color: var(--suave); font-weight: 400; }
.detalhe { color: var(--suave); font-size: .88rem; overflow-wrap: anywhere; }

.tempo { grid-area: tempo; display: grid; font-size: .88rem; }
.espera { font-weight: 600; font-variant-numeric: tabular-nums; }
.alerta .espera { color: var(--alerta); }
.entrada { color: var(--suave); }
.status-em_atendimento { color: var(--primaria); }

.acoes { grid-area: acoes; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }

.selo { font-size: .75rem; font-weight: 600; border-radius: 999px; padding: 2px 8px; }
.selo.cliente { background: var(--info-fundo); color: var(--ok); }
.selo.nova { background: var(--aviso-fundo); color: var(--aviso); }
.selo.esquecido { background: var(--alerta-fundo); color: var(--alerta); justify-self: start; margin-top: 2px; }

.obs {
  grid-area: obs; width: 100%; resize: vertical; min-height: 34px;
  border: 1px dashed var(--borda); background: transparent; border-radius: 8px; padding: 6px 8px; font-size: .88rem;
}
.obs:focus { border-style: solid; outline: none; border-color: var(--primaria); }

.vazio { text-align: center; color: var(--suave); padding: 40px 0; }

@media (max-width: 720px) {
  #tela-fila { padding: 12px 16px; }
  .resumo { grid-template-columns: repeat(2, 1fr); }
  .cartao { grid-template-columns: 1fr; grid-template-areas: "quem" "tempo" "acoes" "obs"; }
  .acoes { justify-content: stretch; }
  .acoes > * { flex: 1 1 auto; text-align: center; }
  .filtros select { flex: 1 1 45%; }
}

/* Abas */
.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--borda); margin-bottom: 14px; }
.aba { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--suave); padding: 8px 14px; }
.aba.ativa { color: var(--texto); border-bottom-color: var(--primaria); font-weight: 600; }

.msg.ok { color: var(--ok); }
h2 { font-size: 1rem; margin: 0 0 10px; }

/* Painel */
.periodos { display: flex; gap: 6px; flex-wrap: wrap; }
.pilula.ativa { color: var(--primaria-texto); background: var(--primaria); border-color: var(--primaria); }
.data { display: flex; align-items: center; gap: 6px; color: var(--suave); font-size: .9rem; }
.data input { border: 1px solid var(--borda); background: var(--superficie); border-radius: 8px; padding: 6px 8px; }
.resumo-painel { margin-top: 14px; }
.bloco { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px; margin-bottom: 12px; overflow-x: auto; }
.bloco table, #equipe table { width: 100%; border-collapse: collapse; font-size: .9rem; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--borda); white-space: nowrap; }
thead th { color: var(--suave); font-weight: 600; font-size: .8rem; }
tbody th { font-weight: 600; }
tr:last-child > * { border-bottom: 0; }
td.quebra { white-space: normal; overflow-wrap: anywhere; }
tr.inativo { opacity: .55; }
.nota { color: var(--suave); font-size: .85rem; margin: 10px 0 0; }
.vazio-tabela { color: var(--suave); text-align: center; }

/* Equipe */
.convite { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px; margin-bottom: 8px; }
.convite h2 { flex-basis: 100%; }
.convite input { flex: 1 1 200px; }
#equipe { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); overflow-x: auto; }

/* Diálogo de offline */
dialog { border: 1px solid var(--borda); border-radius: 14px; background: var(--superficie); color: var(--texto); padding: 22px; width: min(360px, calc(100vw - 32px)); }
dialog::backdrop { background: rgb(0 0 0 / .4); }
dialog form { display: grid; gap: 8px; }
.acoes-dialogo { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }

@media (max-width: 720px) {
  .data { flex: 1 1 45%; }
  .convite button { flex: 1 1 100%; }
}

/* Na automação */
.resumo { grid-template-columns: repeat(5, 1fr); }
.resumo-painel { grid-template-columns: repeat(4, 1fr); }
button.numero.clicavel { text-align: left; font: inherit; color: inherit; cursor: pointer; padding: 10px 14px; white-space: normal; }
button.numero.clicavel:hover { border-color: var(--primaria); }
.cartao.na_automacao { border-left-color: var(--borda); opacity: .9; }
@media (max-width: 720px) {
  .resumo, .resumo-painel { grid-template-columns: repeat(2, 1fr); }
}