/* ==========================================================================
   Folha de estilo CENTRAL.

   Regra do projeto: NENHUMA pagina declara CSS proprio. Precisou de algo novo,
   o lugar e aqui. Estilo espalhado por pagina foi o que tornou impossivel
   mudar a aparencia do produto sem abrir vinte arquivos.

   Estrutura espelhada do painel da Central PBX.
   ========================================================================== */

:root {
    color-scheme: light;

    --fundo:        #f4f5f7;
    --superficie:   #ffffff;
    --borda:        #e1e4e9;
    --texto:        #1d2027;
    --texto-fraco:  #5b6472;
    --primaria:     #17a2b8;
    --primaria-esc: #12808f;
    --perigo:       #d1453b;
    --perigo-esc:   #b3291f;
    --ok:           #1a5d33;
    --ok-fundo:     #e9f7ee;
    --ok-borda:     #a8d5b9;
    --erro:         #96271c;
    --erro-fundo:   #fdecea;
    --erro-borda:   #f0b3ad;
    --info:         #1c4083;
    --info-fundo:   #eef3fd;
    --info-borda:   #b9ccf3;
    --sidebar:      #1e2430;
    --sidebar-txt:  #c7cedb;
    --raio:         8px;
}

* { box-sizing: border-box; }

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

/* ---------------------------------------------------------------- layout */

.layout { display: flex; min-height: 100vh; }

.sidebar {
    width: 230px;
    flex: 0 0 230px;
    background: var(--sidebar);
    color: var(--sidebar-txt);
    padding: 0 0 24px;
    padding-top: env(safe-area-inset-top, 0px);
}

.brand {
    padding: 18px 18px 14px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.nav-grupo {
    padding: 16px 18px 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #7d8799;
}

.nav-item {
    display: block;
    padding: 9px 18px;
    color: var(--sidebar-txt);
    text-decoration: none;
    font-size: 13.5px;
    border-left: 3px solid transparent;
}
.nav-item:hover { background: rgba(255,255,255,.05); color: #fff; }
.nav-item.ativo {
    background: rgba(23,162,184,.16);
    border-left-color: var(--primaria);
    color: #fff;
    font-weight: 600;
}

.conteudo { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: var(--superficie);
    border-bottom: 1px solid var(--borda);
    padding: 14px 24px;
    padding-top: calc(14px + env(safe-area-inset-top, 0px));
}
.topo h1 { font-size: 18px; margin: 0; }
.usuario { display: flex; align-items: center; gap: 12px; color: var(--texto-fraco); font-size: 13px; }
.inline { display: inline; }

.corpo { padding: 22px 24px 60px; }

@media (max-width: 860px) {
    .layout { flex-direction: column; }
    .sidebar { width: 100%; flex: none; padding-bottom: 8px; }
    .corpo { padding: 16px; }
}

/* ----------------------------------------------------------------- cards */

.card {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 18px;
    margin-bottom: 16px;
}
.card h2 {
    font-size: 13px;
    margin: 0 0 14px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--texto-fraco);
}

/* Subtitulo dentro do card. Sem esta regra o h3 caia no default do navegador
   (24px, negrito) e ficava maior que o proprio titulo do card. */
.card h3 {
    font-size: 13px;
    margin: 22px 0 10px;
    color: var(--texto);
}
.card h3:first-of-type { margin-top: 14px; }

.grade { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.metrica { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 16px; }
.metrica .valor { font-size: 26px; font-weight: 700; line-height: 1.2; }
.metrica .rotulo { color: var(--texto-fraco); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; margin-top: 4px; }

/* ------------------------------------------------------------ formulario */

label { display: block; font-weight: 600; margin: 12px 0 4px; font-size: 13px; }

/* Lista explicita de tipos, e nao `input:not([type=checkbox])`, para nao
   estragar o desenho nativo de radio e arquivo. Consequencia: tipo que nao
   estiver aqui cai no visual do navegador e destoa do resto — foi o que
   aconteceu com datetime-local, que ficou menor e com borda diferente no meio
   do formulario de campanha. */
input[type=text], input[type=password], input[type=email], input[type=number],
input[type=date], input[type=datetime-local], input[type=time],
input[type=tel], input[type=url], input[type=search],
textarea, select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ccd1d8;
    border-radius: 6px;
    font: inherit;
    background: #fff;
    color: var(--texto);
}
input:focus, textarea:focus, select:focus {
    outline: 2px solid rgba(23,162,184,.35);
    outline-offset: 1px;
    border-color: var(--primaria);
}
textarea { min-height: 90px; resize: vertical; }

.linha { display: flex; gap: 14px; flex-wrap: wrap; }
.linha > div { flex: 1 1 210px; min-width: 0; }

.dica { color: var(--texto-fraco); font-size: 12px; margin-top: 4px; }

.btn {
    display: inline-block;
    margin-top: 14px;
    margin-right: 8px;
    padding: 9px 16px;
    border-radius: 6px;
    border: 1px solid #c3c8d0;
    background: #fff;
    color: var(--texto);
    font: inherit;
    cursor: pointer;
    text-decoration: none;
}
.btn:hover { background: #f7f8fa; }
.btn-primario { background: var(--primaria); border-color: var(--primaria); color: #fff; font-weight: 600; }
.btn-primario:hover { background: var(--primaria-esc); }
.btn-perigo { border-color: var(--perigo); color: var(--perigo-esc); }
.btn-perigo:hover { background: #fdf2f1; }
.btn-plano { margin-top: 0; padding: 5px 12px; font-size: 12.5px; }

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

.aviso { padding: 10px 14px; border-radius: var(--raio); margin-bottom: 16px; border: 1px solid; }
.aviso.ok   { background: var(--ok-fundo);   border-color: var(--ok-borda);   color: var(--ok); }
.aviso.erro { background: var(--erro-fundo); border-color: var(--erro-borda); color: var(--erro); }
.aviso.info { background: var(--info-fundo); border-color: var(--info-borda); color: var(--info); }

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

.tabela-rolavel { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #e8eaee; vertical-align: top; }
th {
    color: var(--texto-fraco);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
}
tbody tr:hover { background: #fafbfc; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

code {
    background: #eef0f3;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 12px;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
}
pre {
    background: #12151b;
    color: #dfe4ec;
    padding: 12px;
    border-radius: var(--raio);
    overflow-x: auto;
    font-size: 12px;
}

/* ---------------------------------------------------------------- selos */

.selo {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    border: 1px solid;
}
.selo.ok       { background: var(--ok-fundo);   border-color: var(--ok-borda);   color: var(--ok); }
.selo.andando  { background: var(--info-fundo); border-color: var(--info-borda); color: var(--info); }
.selo.parado   { background: #f1f2f4; border-color: #dcdfe4; color: var(--texto-fraco); }
.selo.falha    { background: var(--erro-fundo); border-color: var(--erro-borda); color: var(--erro); }

.vazio { color: var(--texto-fraco); padding: 18px; text-align: center; }

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

.login-tela {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}
.login-caixa {
    width: 100%;
    max-width: 380px;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: 12px;
    padding: 28px 26px 30px;
    box-shadow: 0 12px 40px rgba(0,0,0,.08);
}
.login-caixa .btn { width: 100%; margin-right: 0; }

/* ----------------------------------------------------------------- logo */

/* Logo da AGIL. Os arquivos vem do painel da Central PBX (1181x443), entao a
   largura manda e a altura acompanha — nunca fixar as duas, que distorce. */

.brand { display: flex; flex-direction: column; gap: 8px; }
.brand img { width: 140px; height: auto; display: block; }
.brand span {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8792a6;
}

.login-logo {
    display: block;
    width: 170px;
    height: auto;
    margin: 0 auto 18px;
}

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

/* Tela com muita informacao se divide em abas: cada uma responde UMA pergunta.
   Navegacao por link (?aba=), nao por JS — funciona com o botao voltar, pode
   ser favoritada e sobrevive ao POST que recarrega a pagina. */

.abas {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--borda);
}
.aba {
    padding: 9px 16px;
    color: var(--texto-fraco);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    margin-bottom: -1px;
}
.aba:hover { color: var(--texto); background: #eceef1; }
.aba.ativa {
    background: var(--superficie);
    border-color: var(--borda);
    border-bottom-color: var(--superficie);
    color: var(--primaria-esc);
}

/* ------------------------------------------------------ faixa simulacao */

.faixa-simulacao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    background: #fff3cd;
    border-bottom: 2px solid #e0a800;
    color: #6b4c00;
    padding: 10px 24px;
    font-size: 13px;
}

/* --------------------------------------------------------------- grafico */

/* SVG desenhado no SERVIDOR. Nao ha biblioteca de grafico: a CSP nao permite
   script inline nem CDN externo, e trazer uma dependencia inteira para
   desenhar barras nao se paga. */

.gr-barras { width: 100%; height: auto; display: block; }
.gr-barras .eixo    { stroke: #d8dce2; stroke-width: 1; }
.gr-barras .grade   { stroke: #eef0f3; stroke-width: 1; }
.gr-barras .rotulo  { fill: #5b6472; font-size: 9px; }
.gr-barras .b-env   { fill: #17a2b8; }
.gr-barras .b-fal   { fill: #d1453b; }
.gr-barras .b-bil   { fill: #1a5d33; }

.legenda { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: var(--texto-fraco); margin: 10px 0 4px; }
.legenda span::before {
    content: "";
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 3px;
    margin-right: 6px;
    background: currentColor;
}
.legenda .l-env { color: #17a2b8; }
.legenda .l-fal { color: #d1453b; }
.legenda .l-bil { color: #1a5d33; }

/* --------------------------------------------------------------- barrinha */

.barra { background: #eceef1; border-radius: 4px; height: 8px; overflow: hidden; min-width: 90px; }
.barra > i { display: block; height: 100%; background: var(--primaria); }
.barra.alerta > i { background: #e0a800; }
.barra.critico > i { background: var(--perigo); }

/* --------------------------------------------------------- caixa segredo */

/* Valor que so aparece UMA vez (token, codigo de recuperacao). Destacado
   porque quem fechar a tela sem copiar nao ve de novo. */
.segredo {
    background: #12151b;
    color: #7fe3a1;
    padding: 12px 14px;
    border-radius: var(--raio);
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 13px;
    word-break: break-all;
    user-select: all;
}
.segredo-lista { columns: 2; column-gap: 24px; margin: 0; padding-left: 18px; }

.acoes-linha { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

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

/* <dialog> nativo do navegador. Nao ha biblioteca: o elemento ja traz foco
   preso dentro da caixa, fechar com Esc e fundo inerte — tres coisas que
   qualquer modal caseiro erra e que importam para quem navega por teclado. */

dialog.modal {
    width: min(920px, 94vw);
    border: 1px solid var(--borda);
    border-radius: 12px;
    padding: 0;
    background: var(--superficie);
    color: var(--texto);
    box-shadow: 0 24px 70px rgba(0,0,0,.22);
}
dialog.modal::backdrop { background: rgba(20,24,31,.45); }

.modal-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--borda);
}
.modal-topo h2 { margin: 0; font-size: 13px; text-transform: uppercase;
                 letter-spacing: .06em; color: var(--texto-fraco); }
.modal-corpo { padding: 18px 20px 4px; max-height: 70vh; overflow-y: auto; }
.modal-rodape {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
    padding: 14px 20px 18px;
}
.modal-rodape .btn { margin-top: 0; margin-right: 0; }

.modal-fechar {
    border: 0;
    background: none;
    font-size: 22px;
    line-height: 1;
    color: var(--texto-fraco);
    cursor: pointer;
    padding: 0 4px;
}
.modal-fechar:hover { color: var(--texto); }

/* Cabecalho de card com acao a direita (ex.: "Contas" + botao "Nova conta"). */
.card-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.card-topo h2 { margin: 0; }
.card-topo .btn { margin-top: 0; margin-right: 0; }

/* --------------------------------------------------------------- previa */

/* Balao como o aparelho mostra. Serve para perceber ANTES do disparo que a
   mensagem ficou truncada, com variavel nao substituida ou com o link colado
   na palavra anterior — depois de enviada nao ha conserto. */

.previa-fone {
    max-width: 300px;
    background: #e9edf2;
    border: 1px solid var(--borda);
    border-radius: 14px;
    padding: 14px 12px;
    min-height: 150px;
}
.previa-tela { max-width: 250px; }
.previa-remetente {
    font-size: 11px;
    font-weight: 700;
    color: var(--texto-fraco);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 6px;
}
.previa-balao {
    background: #fff;
    border: 1px solid #dfe3e9;
    border-radius: 4px 14px 14px 14px;
    padding: 10px 12px;
    font-size: 13.5px;
    line-height: 1.45;
    /* pre-wrap preserva a quebra de linha do autor sem deixar o texto vazar:
       mensagem de RCS quebra linha de proposito e ver isso importa. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.previa-vazio { color: #9aa3b0; font-style: italic; }
.previa-hora { font-size: 11px; color: #8b93a1; margin-top: 4px; }

/* ------------------------------------------------- formulario + previa */

/* Em monitor largo, campo que se estica sem limite vira uma linha de 1.500px
   para digitar "teste" — dificil de ler e cansativo de percorrer com o olho.
   O formulario para de crescer; a LISTA, essa sim, usa a tela toda. */
/* O formulario usa a largura toda, como o resto das telas. O que impede o campo
   de virar uma linha gigante e o `flex-basis` de cada coluna dentro de .linha,
   nao um teto na pagina. */
.card-form { max-width: none; }

/* A coluna do texto cresce; a da previa NAO. Sem o `0 0`, a previa acompanha a
   largura da tela e o balao de celular fica do tamanho de um outdoor. */
.col-mensagem { flex: 1 1 400px; min-width: 0; }
.col-previa   { flex: 0 0 300px; max-width: 300px; }

.col-mensagem textarea { min-height: 150px; }

@media (max-width: 760px) {
    /* Telefone: a previa vai para baixo e ocupa a largura disponivel. */
    .col-previa { flex: 1 1 100%; max-width: none; }
}

.modal-topo a.modal-fechar { text-decoration: none; }

/* Ficha de cliente: larga e de ALTURA FIXA.
   Deixar a altura seguir o conteudo faz a caixa pular a cada troca de aba —
   uma aba com duas linhas encolhe tudo, a seguinte com vinte estica de novo, e
   as abas mudam de lugar debaixo do cursor. Altura travada, rolagem por dentro.

   O display so vale com [open]: <dialog> fechado e display:none, e declarar
   flex sem a condicao deixaria a caixa visivel o tempo todo. */
dialog.modal.modal-largo { width: min(1180px, 96vw); }

dialog.modal.modal-largo[open] {
    display: flex;
    flex-direction: column;
    height: min(86vh, 860px);
}
dialog.modal.modal-largo .modal-topo,
dialog.modal.modal-largo .modal-rodape { flex: 0 0 auto; }

/* O corpo e quem rola. min-height:0 e obrigatorio: sem ele, item de flex nao
   encolhe abaixo do conteudo e a rolagem nunca aparece. */
dialog.modal.modal-largo .modal-corpo {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
}

/* As abas ficam paradas no topo do corpo enquanto a tabela rola por baixo. */
dialog.modal.modal-largo .abas {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--superficie);
    padding-top: 4px;
}

/* ------------------------------------------------------------------ QR */

.qr-coluna { flex: 0 0 230px; max-width: 230px; }
.qr-manual { flex: 1 1 320px; min-width: 0; }

/* Fundo branco e margem sao parte do codigo, nao enfeite: leitor de QR precisa
   da zona de silencio em volta, e contraste invertido nao le. */
.qr-caixa {
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: 8px;
    padding: 10px;
    width: 210px;
}
.qr-caixa svg { display: block; width: 100%; height: auto; }

/* O atributo hidden tem de vencer o display que o layout aplicar: dentro de um
   .linha (flex), regra de autor sobrepoe o display:none do navegador e o campo
   "escondido" reapareceria. */
[hidden] { display: none !important; }

/* Estado de falha do indicador de atualizacao. Classe, nao style inline: o CSS
   deste projeto vive todo no arquivo central. */
#atualizado-em.falhou { color: var(--erro); font-weight: 600; }