:root {
  color-scheme: light dark;
  --fundo: #f4f5f7;
  --cartao: #ffffff;
  --texto: #1c2430;
  --suave: #5d6878;
  --borda: #d9dee6;
  --destaque: #1f6f54;
  --destaque-texto: #ffffff;
  --perigo: #b3402e;
  --aviso-fundo: #fff6d8;
  --aviso-borda: #e3c556;
  --ok-fundo: #e3f4ec;
  --erro-fundo: #fbe6e2;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #12161c;
    --cartao: #1b212a;
    --texto: #e6eaf0;
    --suave: #98a3b3;
    --borda: #2e3743;
    --destaque: #3aa57f;
    --destaque-texto: #0c1410;
    --perigo: #e0705d;
    --aviso-fundo: #3a3214;
    --aviso-borda: #8a7424;
    --ok-fundo: #173527;
    --erro-fundo: #41201b;
  }
}

* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--fundo); color: var(--texto); }
a { color: var(--destaque); }

.topo { display: flex; align-items: center; gap: 1.5rem; padding: .8rem 1.5rem; background: var(--cartao); border-bottom: 1px solid var(--borda); }
.marca { font-weight: 700; letter-spacing: .01em; text-decoration: none; color: var(--texto); }
.marca span { color: var(--destaque); }
.topo nav { display: flex; gap: 1.2rem; flex: 1; flex-wrap: wrap; }
.topo nav a { text-decoration: none; color: var(--suave); }
.topo nav a:hover, .topo nav a.atual { color: var(--texto); }
.topo form { margin: 0; }

main { max-width: 60rem; margin: 0 auto; padding: 1.5rem; }
h1 { font-size: 1.4rem; margin: 0 0 1rem; }
h2 { font-size: 1.1rem; margin: 0 0 .8rem; }
.cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.cabecalho h1 { margin: 0; }
.suave { color: var(--suave); }
.pequeno { font-size: .875rem; }

.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: .6rem; padding: 1.2rem; margin-bottom: 1.2rem; }

.botao { display: inline-block; font: inherit; padding: .5rem .9rem; border-radius: .45rem; border: 1px solid var(--borda); background: var(--cartao); color: var(--texto); cursor: pointer; text-decoration: none; }
.botao.principal { background: var(--destaque); border-color: transparent; color: var(--destaque-texto); font-weight: 600; }
.botao.perigo { color: var(--perigo); }
.botao.discreto { border-color: transparent; background: none; color: var(--suave); padding-inline: 0; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--borda); vertical-align: middle; }
th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); font-weight: 600; }
tr:last-child td { border-bottom: 0; }
td.numero, th.numero { text-align: right; font-variant-numeric: tabular-nums; }
.rolagem { overflow-x: auto; }

.selo { display: inline-block; font-size: .78rem; padding: .1rem .5rem; border-radius: 1rem; border: 1px solid var(--borda); color: var(--suave); }
.selo.ativo { color: var(--destaque); border-color: var(--destaque); }

.campo { margin-bottom: 1rem; }
.campo label { display: block; font-weight: 600; margin-bottom: .25rem; }
.campo input[type=text], .campo input[type=password], .campo input[type=number], .campo select, .campo textarea { width: 100%; font: inherit; padding: .5rem .7rem; border: 1px solid var(--borda); border-radius: .45rem; background: var(--fundo); color: var(--texto); }
.campo textarea { resize: vertical; }
.campo.marcar label { display: inline; font-weight: 400; }
.campo .ajuda { font-size: .875rem; color: var(--suave); margin-top: .25rem; }
.campo .erro, .errorlist { color: var(--perigo); font-size: .875rem; margin: .25rem 0 0; padding: 0; list-style: none; }
.em-linha { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; }
.em-linha .campo { flex: 1; min-width: 14rem; margin: 0; }

.mensagem { padding: .7rem 1rem; border-radius: .45rem; margin-bottom: 1rem; background: var(--ok-fundo); }
.mensagem.error { background: var(--erro-fundo); }

.chave-nova { background: var(--aviso-fundo); border: 1px solid var(--aviso-borda); border-radius: .6rem; padding: 1.2rem; margin-bottom: 1.2rem; }
.chave-nova dl { margin: .8rem 0 0; display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1rem; align-items: center; }
.chave-nova dt { font-weight: 600; }
.chave-nova dd { margin: 0; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
code { font: .9rem/1.4 ui-monospace, Consolas, monospace; word-break: break-all; }

.entrada { max-width: 22rem; margin: 12vh auto 0; }
.entrada h1 { text-align: center; }
.entrada .botao { width: 100%; }

.botao.pequeno { padding: .25rem .6rem; font-size: .875rem; }

/* Abas do cliente. */
.abas { display: flex; gap: .3rem; border-bottom: 1px solid var(--borda); margin-bottom: 1.2rem; flex-wrap: wrap; }
.abas a { padding: .5rem .9rem; text-decoration: none; color: var(--suave); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.abas a:hover { color: var(--texto); }
.abas a.atual { color: var(--texto); border-bottom-color: var(--destaque); font-weight: 600; }

/* Formulários dos cadastros: duas colunas, com os campos largos ocupando a linha inteira. */
.grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.2rem; }
.grade .campo.varios, .grade .campo.largo, .grade .campo.marcar { grid-column: 1 / -1; }
.com-botao { display: flex; gap: .6rem; align-items: flex-start; }
.com-botao > :first-child { flex: 1; min-width: 0; }
.com-botao .botao { white-space: nowrap; }
/* Lista de caixas de marcar (ramais que tocam, codecs, números). */
.campo.varios .com-botao > div:first-child { display: flex; flex-wrap: wrap; gap: .4rem .6rem; }
.campo.varios .com-botao > div:first-child > div label { display: inline-flex; align-items: center; gap: .35rem; font-weight: 400; margin: 0; padding: .3rem .7rem; border: 1px solid var(--borda); border-radius: 1rem; cursor: pointer; }
.campo.varios .com-botao > div:first-child > div label:has(input:checked) { border-color: var(--destaque); color: var(--destaque); }
.acoes { display: flex; gap: .6rem; margin-top: .4rem; }
form.excluir { margin: -0.4rem 0 1.2rem; text-align: right; }

/* Janela do botão "incluir". */
.janela { width: min(44rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); border: 1px solid var(--borda); border-radius: .6rem; padding: 1.2rem; background: var(--cartao); color: var(--texto); }
.janela::backdrop { background: #0008; }

@media (max-width: 640px) {
  .grade { grid-template-columns: 1fr; }
  .com-botao { flex-wrap: wrap; }
  main { padding: 1rem; }
  .chave-nova dl { grid-template-columns: 1fr; }
}