/* ---------------------------------------------------------------- fonte
   Open Sans, a mesma do Mautic — pedido do Rafael, e ela e boa para tabela
   densa: altura de x grande e numeros legiveis em 12px.

   Vendorizada, nao puxada do Google Fonts: a convencao do projeto e nao ter
   dependencia externa, e fonte remota adiciona um terceiro no caminho de
   carregamento do painel. Arquivo unico por subconjunto porque a v44 e
   variavel — um woff2 cobre de 300 a 800.

   swap: o texto aparece na fonte de sistema e troca quando a Open Sans
   chega, em vez de a tela ficar em branco esperando 47 KB. */
@font-face{
  font-family:"Open Sans";
  font-style:normal;
  font-weight:300 800;
  font-display:swap;
  src:url("/static/vendor/fonts/open-sans-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Open Sans";
  font-style:normal;
  font-weight:300 800;
  font-display:swap;
  src:url("/static/vendor/fonts/open-sans-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
    U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
    U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* SendAC — tema sobre Bootstrap 5.3
   Estrutura: sidebar fixa a esquerda, conteudo a direita. Sem barra
   superior. Sobrescrevemos as variaveis do Bootstrap para que botao,
   tabela, form e badge herdem a paleta sem regra duplicada. */

:root {
  --petrol-950:#042725; --petrol-900:#06322F; --petrol-850:#073B38;
  --petrol-800:#084C48; --petrol-700:#0A5C57; --petrol-600:#0E756E;
  --petrol-500:#128D85; --accent:#2DD4BF;
  --cinza:#6B7280; --cinza-claro:#F5F7F8;

  --bs-primary:#0A5C57; --bs-primary-rgb:10,92,87;
  --bs-link-color:#0E756E; --bs-link-hover-color:#084C48;
  --bs-border-color:#E5EBEA;
  --bs-body-bg:var(--cinza-claro);
  --bs-body-color:#16211F;
  --bs-body-font-family:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --bs-body-font-size:.9375rem;

  /* 260 -> 208 (20% a menos) ficou apertado demais; 229px e o meio termo
     que o Rafael pediu -- 12% mais estreito que o original. */
  --side-w:229px;
}

.btn-primary{
  --bs-btn-bg:var(--petrol-700);        --bs-btn-border-color:var(--petrol-700);
  --bs-btn-hover-bg:var(--petrol-600);  --bs-btn-hover-border-color:var(--petrol-600);
  --bs-btn-active-bg:var(--petrol-800); --bs-btn-active-border-color:var(--petrol-800);
  --bs-btn-disabled-bg:var(--petrol-700); --bs-btn-disabled-border-color:var(--petrol-700);
}
.btn-outline-primary{
  --bs-btn-color:var(--petrol-700); --bs-btn-border-color:var(--bs-border-color);
  --bs-btn-hover-bg:var(--petrol-700); --bs-btn-hover-border-color:var(--petrol-700);
}
.form-control:focus,.form-select:focus,.form-check-input:focus{
  border-color:var(--petrol-500); box-shadow:0 0 0 .2rem rgba(18,141,133,.18);
}
.form-check-input:checked{background-color:var(--petrol-700);border-color:var(--petrol-700)}
.page-link{color:var(--petrol-700)}
.page-item.active .page-link{background:var(--petrol-700);border-color:var(--petrol-700)}
.text-brand{color:var(--petrol-700)!important}
code{color:var(--petrol-700);background:rgba(10,92,87,.07);padding:.0625rem .3125rem;border-radius:.25rem}

/* ==================== LOGIN ==================== */
.login-wrap{
  min-height:100vh;display:grid;place-items:center;padding:1.5rem;
  background:
    radial-gradient(1100px 620px at 12% -10%,var(--petrol-600) 0%,transparent 58%),
    radial-gradient(900px 560px at 108% 112%,var(--petrol-500) 0%,transparent 52%),
    linear-gradient(158deg,var(--petrol-950) 0%,var(--petrol-850) 52%,var(--petrol-900) 100%);
}
.login-card{
  width:100%;max-width:25rem;padding:2.5rem 2.125rem 2rem;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  border-radius:1rem;box-shadow:0 18px 50px rgba(4,39,37,.3);backdrop-filter:blur(12px);
}
.login-card .form-label{color:rgba(255,255,255,.62);font-size:.7rem;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase}
.login-card .form-control{color:#fff;background:rgba(0,0,0,.26);border-color:rgba(255,255,255,.15)}
.login-card .form-control::placeholder{color:rgba(255,255,255,.3)}

/* Placeholder tem de PARECER sugestao, nao valor digitado.
   O padrao do Bootstrap e --bs-secondary-color, que resolve para
   rgba(33,37,41,.75) -- contraste 6,58:1 contra o campo, ou 42% do
   contraste do texto de verdade. Perto demais: o Rafael olhou um
   formulario de banco e nao soube dizer se "root" e "mt_xxxxx" eram
   sugestao ou coisa que ele tinha escrito.
   #9CA6AB da 2,31:1 no campo cinza e 2,48:1 no branco -- 15% do
   contraste do texto digitado, escolha do Rafael em 23/09 depois de
   ver a versao de 21%.
   Fica ABAIXO do 3:1 que se recomenda para texto nao essencial, e isso
   e deliberado: o objetivo aqui e nao confundir sugestao com valor
   digitado, e o texto continua visivel. Vale lembrar que placeholder
   nunca deve carregar informacao que so existe nele -- o rotulo do
   campo e que informa.
   Nao usa opacity: opacity apaga tambem o que estiver por tras em
   campo com fundo proprio, e o resultado muda de tela para tela. */
.form-control::placeholder,
.form-select::placeholder,
textarea::placeholder{color:#9CA6AB;opacity:1}

/* Campo readonly/disabled NAO recua mais. Eu tinha escrito uma regra
   apagando esses ainda mais, e ela estava errada: em broads.html o
   campo de remetente e readonly e o placeholder dele diz "escolha o
   dominio ao lado" -- instrucao que a pessoa precisa ler, nao enfeite.
   Em migracao.html os campos desabilitados trazem o exemplo do id que
   vale quando forem habilitados. Apagar isso para 2,10:1 esconderia
   justamente onde o placeholder mais trabalha. */
.login-card .form-control:focus{background:rgba(0,0,0,.3);color:#fff;border-color:var(--accent)}
.brand-mark{display:inline-grid;place-items:center;width:3.375rem;height:3.375rem;
  border-radius:.875rem;background:linear-gradient(140deg,var(--accent),var(--petrol-600));
  box-shadow:0 8px 22px rgba(45,212,191,.3)}
.brand-name{font-size:1.55rem;font-weight:650;letter-spacing:-.02em;color:#fff;margin:0}
.brand-name span{color:var(--accent)}

/* ==================== SIDEBAR ==================== */
.sidebar{
  position:fixed;top:0;left:0;width:var(--side-w);height:100vh;z-index:1000;
  display:flex;flex-direction:column;padding:1.5rem 1.0625rem 0;
  background:linear-gradient(180deg,var(--petrol-950) 0%,var(--petrol-850) 100%);
  transition:transform .3s ease;
}
.sidebar-logo{
  display:block;font-size:1.375rem;font-weight:700;letter-spacing:-.02em;
  color:#fff;text-decoration:none;margin-bottom:1.5rem;
}
.sidebar-logo span{color:var(--accent)}

.sidebar-client{margin-bottom:1.5rem}
.sidebar-client label{
  display:block;margin-bottom:.375rem;font-size:.6875rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.38);
}
.sidebar-client select{
  width:100%;padding:.5rem .625rem;font-size:.875rem;font-family:inherit;color:#fff;
  background-color:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  border-radius:.5rem;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff88' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat:no-repeat;background-position:right .6rem center;background-size:12px;
  -webkit-appearance:none;appearance:none;padding-right:2rem;
}
.sidebar-client select:focus{outline:none;border-color:var(--accent)}
.sidebar-client option{color:#16211F;background:#fff}

.sidebar nav{flex:1;overflow-y:auto;margin-bottom:.5rem}
.sidebar nav::-webkit-scrollbar{width:4px}
.sidebar nav::-webkit-scrollbar-track{background:transparent}
.sidebar nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:2px}

.sidebar-section{
  margin:1.25rem 0 .5rem;padding-left:.75rem;font-size:.6563rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.32);
}
/* Cabeçalho de grupo que abre e fecha. Herda a tipografia do
   .sidebar-section para parecer o mesmo rótulo de antes — o que mudou é
   a seta e o fato de responder ao clique. */
.sidebar-grupo{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  width:100%;background:none;border:0;cursor:pointer;text-align:left;
  padding:0 .75rem 0 .75rem;
}
.sidebar-grupo:hover{color:rgba(255,255,255,.6)}
.sidebar-grupo .seta{font-size:.75rem;opacity:.7}
.sidebar-grupo:focus-visible{outline:2px solid rgba(255,255,255,.4);outline-offset:2px;border-radius:.25rem}

.sidebar nav a{
  display:flex;align-items:center;gap:.6875rem;margin-bottom:.125rem;
  padding:.5625rem .6875rem;border-radius:.5rem;
  font-size:.875rem;color:rgba(255,255,255,.7);text-decoration:none;
  transition:background .12s,color .12s;
}
.sidebar nav a i{font-size:1.0625rem;width:1.25rem;text-align:center;opacity:.9}
.sidebar nav a:hover{background:rgba(255,255,255,.1);color:#fff}
.sidebar nav a.active{background:var(--petrol-600);color:#fff;font-weight:560}

.sidebar-footer{
  margin:0 -1.25rem;padding:1rem 1.25rem;
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.18);
}
.sidebar-user{display:flex;align-items:center;gap:.625rem}
.sidebar-user-avatar{
  flex:none;width:2.125rem;height:2.125rem;display:grid;place-items:center;
  border-radius:50%;background:var(--accent);color:var(--petrol-950);
  font-weight:700;font-size:.8125rem;
}
/* Avatar do Gravatar. Fica escondido ate carregar: se a pessoa nao tem
   conta no Gravatar a resposta e 404, o onerror remove a imagem e o
   circulo com as iniciais que esta atras aparece. */
.avatar-img{
  flex:none;border-radius:50%;object-fit:cover;background:var(--petrol-700);
}
.avatar-wrap{position:relative;flex:none;line-height:0}
/* O estado do broad e clicavel: o botao some e sobra a etiqueta. */
.btn-estado{border:0;background:none;padding:0;line-height:1}
.btn-estado:hover{filter:brightness(.95)}
/* Icone de estado ao lado do nome do broad: mesma altura do interruptor,
   para a coluna nao dancar de uma linha para a outra. */
.ic-estado{font-size:1rem;display:block;width:1.75rem;text-align:center}
/* Cores do Mautic, a pedido do Rafael, com UMA correcao.
   Ele usa a paleta contextual do Bootstrap 3, e os valores exatos dela
   ficam abaixo do minimo de 3:1 que a WCAG pede para componente
   grafico: o amber #F0AD4E da 1,95:1 sobre branco e o verde #5CB85C da
   2,48:1. Icone que nao se enxerga nao cumpre a funcao de dizer o
   estado do broad de relance.
   Guardado o MATIZ do Mautic e escurecida so a luminosidade necessaria
   para chegar a 3:1. De perto e o mesmo tom; de longe, enxerga-se. */
.ic-pendente{color:#D08112}   /* matiz do text-warning  3,07:1 */
.ic-expirado{color:#D9534F}   /* text-danger exato      3,96:1 */
.ic-enviando{color:#49A749}   /* matiz do text-success  3,04:1 */
.ic-concluido{color:#49A749}
/* Interruptor desligado usa o mesmo text-danger de expirado: no
   Mautic e a mesma cor, e sao a mesma familia de recado -- "este
   broad nao vai sair". */
.ic-desligado{color:#D9534F}
/* Broad concluido, falhado ou cancelado nao alterna. Cinza, nao
   vermelho: vermelho ali sugeriria problema onde so ha fim de
   linha. Componente inativo esta fora do minimo de contraste da
   WCAG justamente por isso. */
.btn-estado:disabled{cursor:not-allowed}
.btn-estado:disabled .ic-estado{color:#A7B4B4}

/* Grupo de selecao + acoes da linha, no formato do Mautic: dois botoes
   colados, a caixa e a setinha. A acao fica escondida no menu porque em
   uma lista de 50 broads o que se olha e o nome, nao a fileira de
   icones que se repete 50 vezes. */
.grupo-linha{display:inline-flex;align-items:stretch}
.grupo-linha .gl-check,.grupo-linha .gl-seta{
  display:grid;place-items:center;width:2rem;height:1.875rem;margin:0;
  /* Cinza bem claro, como no Mautic: o grupo se le como um controle e
     nao some no branco da linha. */
  border:1px solid #E3E8E8;background:#F5F7F7;color:#64748B;
}
.grupo-linha .gl-check{border-radius:.3125rem 0 0 .3125rem;cursor:pointer}
.grupo-linha .gl-seta{border-radius:0 .3125rem .3125rem 0;border-left:0;font-size:.75rem}
.grupo-linha .gl-check:hover,.grupo-linha .gl-seta:hover{background:#E8EDED;color:var(--petrol-950)}
.grupo-linha .gl-seta.show{background:#DCE3E3}
.grupo-linha .gl-vazia{background:transparent;border-color:transparent}
.grupo-linha .form-check-input{margin:0;float:none}
.grupo-linha .dropdown-menu .dropdown-item{display:flex;align-items:center;gap:.5rem}
.grupo-linha .dropdown-menu form{margin:0}

/* No cabecalho escuro, a moldura do grupo vira um retangulo branco no
   meio do verde. La a caixa aparece sozinha, sem moldura nem espaco
   reservado para a setinha que nao existe. */
/* height:auto e o essencial aqui, nao a aparencia. A caixa mede 1.875rem
   para casar com a setinha ao lado NO CORPO da tabela; no cabecalho a
   setinha nao existe e essa altura sobrava, esticando a faixa verde para
   50px com um texto de 12px dentro. A moldura sumia e a altura ficava. */
.table-solid>thead .grupo-linha .gl-check{
  background:transparent;border:0;width:auto;height:auto;
}
.table-solid>thead .grupo-linha .gl-vazia{display:none}
.table-solid>thead .form-check-input{
  background-color:rgba(255,255,255,.16);border-color:rgba(255,255,255,.55);
}
.table-solid>thead .form-check-input:checked{
  background-color:var(--accent);border-color:var(--accent);
}

.badge-pend{background:#FEF9C3;color:#A16207;font-weight:600;padding:.1875rem .4375rem;border-radius:.25rem;font-size:.7656rem}

.avatar-wrap .avatar-img{position:absolute;inset:0;width:100%;height:100%}
.sidebar-user-info{min-width:0;flex:1}
.sidebar-user-name{
  font-size:.8125rem;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sidebar-user-role{font-size:.6875rem;color:rgba(255,255,255,.4)}
.sidebar-logout{
  flex:none;width:2rem;height:2rem;display:grid;place-items:center;
  border:0;border-radius:.4375rem;background:transparent;color:rgba(255,255,255,.55);
}
.sidebar-logout:hover{background:rgba(255,255,255,.12);color:#fff}

.sidebar-toggle{
  position:fixed;top:.875rem;left:.875rem;z-index:1100;display:none;
  width:2.5rem;height:2.5rem;place-items:center;
  border:0;border-radius:.5rem;background:var(--petrol-800);color:#fff;font-size:1.125rem;
}

/* ==================== CONTEUDO ==================== */
.main-content{margin-left:var(--side-w);min-height:100vh;padding:2rem}

.page-header{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1rem;margin-bottom:2rem;
}
.page-header h1{
  margin:0;font-size:2rem;font-weight:700;line-height:1.15;
  letter-spacing:-.025em;color:var(--petrol-800);
}
.page-header .sub{margin:.3rem 0 0;font-size:.9375rem;color:var(--cinza)}
.page-header .actions{display:flex;align-items:center;gap:.625rem}
.btn-action{padding:.6875rem 1.3125rem;border-radius:.625rem;font-weight:600;
  font-size:.9375rem;white-space:nowrap}

/* ==================== CARDS E TABELAS ==================== */
.card{background:#fff;border:none;border-radius:16px;box-shadow:0 1px 3px rgba(4,39,37,.06)}

/* O modal precisa ser SUPERFICIE, nao fundo.
   O Bootstrap monta --bs-modal-bg a partir de --bs-body-bg, e nos
   trocamos --bs-body-bg pelo cinza-claro da pagina. O resultado e um
   modal pintado exatamente da cor do que esta atras dele: ele deixa de
   parecer uma caixa e passa a parecer um buraco, e foi assim que o
   Rafael o descreveu -- "meio transparente".
   Toda superficie do painel e branca (.card acima). O modal segue a
   mesma regra, com o mesmo raio, e ganha sombra forte porque flutua
   sobre o conteudo em vez de assentar nele. */
.modal{--bs-modal-bg:#fff;--bs-modal-border-radius:16px;--bs-modal-border-width:0}
.modal-content{box-shadow:0 24px 60px rgba(4,39,37,.28)}
.card-header{background:#fff;border-bottom:1px solid var(--bs-border-color);
  font-weight:620;font-size:.9375rem;padding:1rem 1.5rem;border-radius:16px 16px 0 0}
.card-footer{background:#fff;border-top:1px solid var(--bs-border-color);
  padding:.875rem 1.5rem;border-radius:0 0 16px 16px}

.card-toolbar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.875rem;padding:1rem 1.5rem;border-bottom:1px solid var(--bs-border-color);
}
.card-toolbar .tb-left,.card-toolbar .tb-right{
  display:flex;align-items:center;gap:.625rem;font-size:.875rem;color:var(--cinza);
}
.card-toolbar .form-select-sm{width:auto}
.card-toolbar .search-input{min-width:17rem}

/* Tabela densa, na medida do Mautic.
   O que fazia a nossa cansar nao era a fonte: era 16px de respiro vertical
   e 15px de texto em cada celula. Com vinte registros na tela isso vira
   rolagem, e listagem que exige rolar e listagem que nao se le. 13px de
   texto e 8px de respiro cabem o dobro de linhas sem apertar. */
.table{margin-bottom:0}
/* .8125rem -> .875rem. A tabela e a tela onde se passa o dia; o ganho de
   legibilidade vale as poucas linhas a menos por rolagem. */
.table-solid{font-size:.875rem}
.table-solid>thead>tr>th{
  background:var(--petrol-700);color:#fff;border-bottom:0;
  font-size:.75rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  /* Menos folga que a linha de dados, de proposito: o cabecalho se le
     uma vez e as linhas se leem cinquenta. Faixa de cor cheia que a
     pessoa mais ve e a que menos informa e peso mal gasto. */
  padding:.4375rem .875rem;white-space:nowrap;line-height:1.35;
}
.table-solid>tbody>tr>td{padding:.5625rem .875rem;vertical-align:middle;border-color:#E2E9E8}
.table-solid>tbody>tr:last-child>td{border-bottom:0}
/* Zebra de verdade. Com a linha quase branca e a divisoria de baixo
   contraste, uma tabela de vinte linhas vira um monte de texto solto --
   o olho perde a horizontal e le o valor da linha de cima. */
.table-solid>tbody>tr:nth-of-type(even)>td{background:#F4F8F8}
.table-solid .small,.table-solid small{font-size:.8125rem}
.table-solid>tbody>tr:hover>td{background:#E6F0EF}

/* Link dentro de tabela nao se pinta de azul nem se sublinha.
   Numa lista onde metade das celulas e clicavel, a cor vira ruido: o
   olho passa a procurar o texto preto no meio do azul. Como no Mautic,
   o que avisa que da para clicar e o cursor, e o texto so escurece ao
   passar o mouse. */
.table-solid a{color:inherit;text-decoration:none}
.table-solid a:hover,.table-solid a:focus{color:var(--petrol-700);text-decoration:none}
/* A segunda linha da célula "Quem", na janela de quem abriu/clicou: é
   link igual à de cima, mas continua cinza para não competir com o nome.
   A regra acima tem `a` no seletor e venceria o .text-muted sozinho. */
.table-solid a.ev-sub{color:#6c757d}
.titulo-broad{cursor:pointer}

/* Terminal de entrega. Fundo escuro e fonte de largura fixa porque e
   exatamente isso que a pessoa espera de um log rolando -- e o e-mail
   alinhado em coluna se le muito mais rapido. */
.terminal{
  max-height:22rem;overflow-y:auto;padding:.75rem 1rem;
  background:#0b1f1e;color:#cfe8e4;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.78rem;line-height:1.55;
}
.terminal-vazio{opacity:.5}
.terminal-linha{display:flex;gap:.5rem;white-space:nowrap}
.terminal-linha .hora{opacity:.45;flex:none}
.terminal-linha .marca{flex:none;width:1ch;text-align:center}
.terminal-linha .quem{flex:none;min-width:22rem;overflow:hidden;text-overflow:ellipsis}
.terminal-linha .oque{opacity:.6;overflow:hidden;text-overflow:ellipsis}
.terminal-linha.ok .marca{color:#4ade80}
.terminal-linha.falha{color:#fca5a5}
.terminal-linha.falha .marca{color:#f87171}

/* Tela de espera: escurece tudo e bloqueia clique enquanto a pagina nao
   volta. 90% de opacidade a pedido do Rafael -- o suficiente para
   deixar claro que a tela esta ocupada sem apagar o contexto. */
.tela-espera{
  position:fixed;inset:0;z-index:20000;display:grid;place-items:center;
  background:rgba(4,39,37,.9);color:#fff;
  animation:aparecer .12s ease-out;
}
@keyframes aparecer{from{opacity:0}to{opacity:1}}

/* Caminho do disparo: etapa feita fica verde, a atual pulsa, as
   seguintes ficam apagadas. E a mesma leitura de um rastreio de
   encomenda, que e o que o operador quer saber -- em que pe esta. */
.caminho{list-style:none;margin:0;padding:0}
.caminho li{display:flex;gap:.75rem;padding:.5rem 0;position:relative;opacity:.45}
.caminho li + li{border-top:1px solid #F1F4F4}
.caminho li.feita,.caminho li.agora{opacity:1}
.caminho .ponto{
  flex:none;width:.875rem;height:.875rem;margin-top:.25rem;border-radius:50%;
  background:#CBD5D5;
}
.caminho li.feita .ponto{background:#15803D}
.caminho li.agora .ponto{background:var(--petrol-600);box-shadow:0 0 0 0 rgba(14,117,110,.5);
  animation:pulso 1.4s infinite}
@keyframes pulso{
  70%{box-shadow:0 0 0 .5rem rgba(14,117,110,0)}
  100%{box-shadow:0 0 0 0 rgba(14,117,110,0)}
}

/* Campo de data e hora: o Safari/Chrome pintam o texto do proprio
   seletor num cinza clarissimo, e a hora fica ilegivel sobre o branco. */
input[type="datetime-local"],input[type="date"]{
  color:var(--bs-body-color);-webkit-text-fill-color:var(--bs-body-color);
  background-color:#fff;opacity:1;
}
/* O Safari e o Chrome nao pintam o valor pela propriedade `color`: cada
   pedaco do seletor (dia, mes, ano, hora, minuto) e um campo proprio, e
   o que vale nele e o -webkit-text-fill-color. Sem estas linhas a hora
   fica num cinza clarissimo sobre o branco. */
input[type="datetime-local"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit{
  color:var(--bs-body-color);-webkit-text-fill-color:var(--bs-body-color);
}
input[type="datetime-local"]::-webkit-datetime-edit-day-field,
input[type="datetime-local"]::-webkit-datetime-edit-month-field,
input[type="datetime-local"]::-webkit-datetime-edit-year-field,
input[type="datetime-local"]::-webkit-datetime-edit-hour-field,
input[type="datetime-local"]::-webkit-datetime-edit-minute-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-year-field{
  color:var(--bs-body-color);-webkit-text-fill-color:var(--bs-body-color);
  font-weight:600;
}
input[type="datetime-local"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-text{
  color:#64748B;-webkit-text-fill-color:#64748B;padding:0 .0625rem;
}
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator{opacity:.7;cursor:pointer}
/* Dentro da linha escura da barra de selecao a regra se inverte. */
.barra-lote a{color:#fff}


.icon-btn{
  width:2.125rem;height:2.125rem;padding:0;display:inline-grid;place-items:center;
  border-radius:.5rem;border:1.5px solid;background:#fff;font-size:.875rem;
  text-decoration:none;transition:background .12s,color .12s;
}
.icon-btn.ib-view{color:#0EA5E9;border-color:#BAE6FD}
.icon-btn.ib-view:hover{background:#0EA5E9;color:#fff}
.icon-btn.ib-edit{color:#475569;border-color:#CBD5E1}
.icon-btn.ib-edit:hover{background:#475569;color:#fff}
.icon-btn.ib-del{color:#DC2626;border-color:#FECACA}
.icon-btn.ib-del:hover{background:#DC2626;color:#fff}
.acoes{display:flex;gap:.375rem;justify-content:flex-end}

.badge-ativo{background:#DCFCE7;color:#15803D;font-weight:600;padding:.1875rem .4375rem;border-radius:.25rem;font-size:.7656rem}
.badge-off  {background:#F1F5F5;color:#64748B;font-weight:600;padding:.1875rem .4375rem;border-radius:.25rem;font-size:.7656rem}
.badge-warn {background:#FEF3C7;color:#B45309;font-weight:600;padding:.1875rem .4375rem;border-radius:.25rem;font-size:.7656rem}
.badge-err  {background:#FEE2E2;color:#B91C1C;font-weight:600;padding:.1875rem .4375rem;border-radius:.25rem;font-size:.7656rem}
.badge-brand{background:var(--petrol-700);color:#fff;font-weight:600;padding:.1875rem .4375rem;border-radius:.25rem;font-size:.7656rem}
/* Os numeros do broad ficam lado a lado e nao podem quebrar a linha da
   tabela quando a tela encolhe. Sem rotulo escrito: o icone diz o que e e
   o title explica, o que encolhe a coluna sem perder o significado. */
.stats-broad{display:flex;flex-wrap:nowrap;gap:.25rem;align-items:center}

/* Cores do Mautic, a pedido do Rafael: fundo solido e numero branco em
   negrito, em vez do pastel com texto colorido. Em tabela densa o bloco
   solido se le de longe; o pastel some. */
.stats-broad>span,.stats-broad>button{
  display:inline-flex;align-items:center;gap:.25rem;
  padding:.1875rem .375rem;border-radius:.1875rem;
  /* 700/.8rem deixava o numero gordo demais na tabela densa; 600 e
     .765rem mantem a leitura de longe sem pesar a linha. */
  color:#fff;font-weight:600;font-size:.765rem;line-height:1.15;
  font-variant-numeric:tabular-nums;  /* numero nao dança entre as linhas */
  cursor:default;
  border:0;  /* os clicáveis são <button>: o contorno padrão estragaria o bloco */
}

/* Número que se abre. Só abertura e clique: são os dois que têm pessoa e
   hora guardadas. O realce no hover é o que diz que ali dá para clicar —
   o badge sozinho parece enfeite. */
.stats-broad>button{cursor:pointer}
.stats-broad>button:hover{filter:brightness(1.12);box-shadow:0 0 0 2px rgba(0,0,0,.14)}
.stats-broad>button:focus-visible{outline:2px solid #fff;outline-offset:1px}

.stats-broad i{font-size:.8125rem;opacity:.9}
.stats-broad small{font-size:.7rem;font-weight:500;opacity:.85}

.st-pend {background:#95A0A9}  /* cinza-azulado — ainda não saiu       */
.st-env  {background:#F0B03E}  /* âmbar        — entregue ao servidor   */
.st-abr  {background:#4BAE9C}  /* verde-água   — abriu                  */
.st-clique{background:#7C5CBF}  /* roxo         — clicou                 */
/* .st-taxa saiu: o percentual agora vive dentro do badge do seu
   proprio numero. Dois percentuais soltos no mesmo badge nao diziam
   qual era qual. */
/* Âmbar escuro e não vermelho: clicar sem abrir não é falha, é sinal.
   Vermelho ao lado do vermelho de bounce confundiria as duas coisas. */
.st-spam {background:#B45309}  /* âmbar escuro — clicou sem abrir       */
.st-falha{background:#E0443E}  /* vermelho     — falha na entrega       */
.stats-broad .badge-ativo,.stats-broad .badge-off,.stats-broad .badge-warn,
.stats-broad .badge-err,.stats-broad .badge-brand{white-space:nowrap}

/* tiles */
.tile{display:block;text-decoration:none;color:inherit;transition:box-shadow .12s,transform .08s}
a.tile:hover{box-shadow:0 6px 18px rgba(4,39,37,.1);transform:translateY(-2px)}
.tile .k{font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--cinza)}
.tile .v{font-size:1.875rem;font-weight:700;letter-spacing:-.025em;color:var(--petrol-800);
  font-variant-numeric:tabular-nums;line-height:1.15;margin-top:.375rem}
.tile .n{font-size:.78rem;color:var(--cinza);margin-top:.1875rem}
.tile-icon{
  float:right;width:2.75rem;height:2.75rem;display:grid;place-items:center;
  border-radius:.75rem;background:rgba(10,92,87,.09);color:var(--petrol-700);font-size:1.25rem;
}

fieldset{border:1px solid var(--bs-border-color);border-radius:.75rem;
  padding:.25rem 1.25rem 0;margin-bottom:1.25rem;background:#FCFDFD}
fieldset legend{float:none;width:auto;padding:0 .5rem;margin-bottom:.875rem;
  font-size:.7rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--petrol-600)}
.empty-state{padding:3rem 1.5rem;text-align:center;color:var(--cinza)}
.empty-state strong{display:block;margin-bottom:.375rem;color:#16211F}
.empty-state i{display:block;font-size:2.25rem;color:#C9D6D5;margin-bottom:.75rem}

@media (max-width:991.98px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.active{transform:translateX(0);box-shadow:0 0 40px rgba(0,0,0,.4)}
  .sidebar-toggle{display:grid}
  .main-content{margin-left:0;padding:4rem 1rem 2rem}
  .page-header h1{font-size:1.5rem}
  .card-toolbar .search-input{min-width:0;width:100%}
  .card-toolbar .tb-right{width:100%}
}

/* Alinhamento de formulario em linha.
   Um campo com texto de ajuda embaixo tem altura maior; com align-items-end
   ele subia e desalinhava os rotulos vizinhos. Alinhando pelo TOPO e dando
   a mesma altura a todo rotulo, os inputs ficam na mesma linha sempre. */
.row > [class^="col"] > .form-label,
.row > [class*=" col"] > .form-label { min-height: 1.3125rem; margin-bottom: .375rem; }
.form-text { min-height: 1.125rem; }

/* Paginacao com 21 numeros (10 antes + atual + 10 depois).
   Numeros de 5 digitos em 21 itens estouram a linha no padrao do Bootstrap,
   entao apertamos o respiro horizontal e usamos tabular-nums para os
   digitos ficarem alinhados e com largura previsivel. */
.pagination-sm .page-link{
  padding:.25rem .4rem;font-size:.78rem;min-width:1.75rem;text-align:center;
  font-variant-numeric:tabular-nums;
}
.pagination.flex-wrap{gap:.1rem;row-gap:.25rem}
.pagination .page-item.active .page-link{font-weight:700}
.pagination .page-item.disabled .page-link{opacity:.45}

/* Barra de acoes em lote: some quando nada esta marcado, para nao ocupar
   espaco nem sugerir acao sem alvo. */
.barra-lote{
  display:none;align-items:center;gap:.75rem;
  padding:.625rem .875rem;margin-bottom:.75rem;border-radius:.5rem;
  background:var(--petrol-950,#042725);color:#fff;font-size:.875rem;
}
.barra-lote.ativa{display:flex}
.barra-lote .conta{font-weight:600}
.barra-lote .btn{padding:.25rem .625rem;font-size:.8125rem}

/* Lista de segmentos do modal de leads: rolavel, porque um cliente com
   doze segmentos nao pode empurrar os botoes do modal para fora da tela. */
.lista-seg{max-height:16rem;overflow-y:auto;border:1px solid var(--bs-border-color);border-radius:.375rem}
.item-seg{display:flex;align-items:center;gap:.25rem;width:100%;margin:0;padding:.5rem .75rem;cursor:pointer}
.item-seg + .item-seg{border-top:1px solid #F1F4F4}
.item-seg:hover{background:#F9FBFB}
.item-seg .form-check-input{margin:0;float:none}

/* ---------------------------------------------- campo de tags (segmentos)
   Com dez ou doze segmentos, uma grade de checkbox ocupa meia tela e
   obriga a procurar. O campo de tags mostra só o que foi escolhido e
   esconde o resto atrás de um clique. */
.campo-tags{
  display:flex;flex-wrap:wrap;gap:.375rem;align-items:center;
  min-height:2.625rem;padding:.4375rem .625rem;cursor:text;
  border:1px solid var(--bs-border-color);border-radius:.5rem;background:#fff;
}
.campo-tags:focus,.campo-tags.aberto{
  outline:0;border-color:var(--petrol-500);
  box-shadow:0 0 0 .2rem rgba(18,141,133,.18);
}
.tags-vazio{color:var(--cinza);font-size:.875rem}
.tag-chip{
  display:inline-flex;align-items:center;gap:.375rem;
  padding:.1875rem .5rem;border-radius:.375rem;
  background:var(--petrol-700);color:#fff;font-size:.8125rem;font-weight:600;
}
.tag-chip button{
  border:0;background:none;color:#fff;opacity:.75;padding:0;line-height:1;
  cursor:pointer;font-size:.9375rem;
}
.tag-chip button:hover{opacity:1}

.tags-menu{
  position:relative;z-index:5;margin-top:.375rem;padding:.625rem;
  border:1px solid var(--bs-border-color);border-radius:.5rem;background:#fff;
  box-shadow:0 .5rem 1.25rem rgba(0,0,0,.08);
}
.tags-opcoes{max-height:14rem;overflow-y:auto}
.tags-opcao{
  display:flex;justify-content:space-between;align-items:center;gap:.75rem;
  width:100%;text-align:left;border:0;background:none;
  padding:.4375rem .5rem;border-radius:.375rem;font-size:.875rem;
}
.tags-opcao:hover{background:#F1F5F5}
.tags-opcao[hidden]{display:none}
.tags-opcao.escolhido{opacity:.4;pointer-events:none}

/* --------------------------------------------------- miniatura da copy
   Um iframe de 1200px encolhido por transform: o e-mail e desenhado para
   600px, e mostrar so o canto superior esquerdo nao diria qual copy e.
   A tampa transparente impede clique e rolagem dentro do iframe -- o
   cartao inteiro deve se comportar como um cartao. */
.miniatura{
  position:relative;height:11rem;overflow:hidden;
  border-bottom:1px solid var(--bs-border-color);
  border-radius:16px 16px 0 0;background:#fff;
}
.miniatura iframe{
  width:1200px;height:1500px;border:0;
  transform:scale(.30);transform-origin:top left;pointer-events:none;
}
.miniatura-tampa{position:absolute;inset:0;background:transparent}

/* ------------------------------------------------ cartão de copy no broad */
.cartao-copy{
  border:1px solid var(--bs-border-color);border-radius:.5rem;background:#fff;
  padding:0;overflow:hidden;text-align:left;transition:border-color .12s,box-shadow .12s;
}
.cartao-copy:hover{border-color:var(--petrol-500);box-shadow:0 .25rem .75rem rgba(0,0,0,.08)}
.mini-copy{display:block;position:relative;height:6.5rem;overflow:hidden;background:#fff}
.mini-copy iframe{width:1200px;height:1400px;border:0;transform:scale(.18);
  transform-origin:top left;pointer-events:none}
.mini-tampa{position:absolute;inset:0;background:transparent}

/* Modal do broad quase em tela cheia: com duas colunas ele cabe inteiro
   sem rolagem, que era o ponto de dividir. */
.modal-quase-cheio{max-width:96vw;margin:1rem auto}
.modal-quase-cheio .modal-content{max-height:94vh}
@media (max-width:991px){ .modal-quase-cheio{max-width:100vw;margin:.5rem auto} }

/* Bloco de número da Visão geral. Não é o .tile: aquele é um cartão que
   leva para outra tela, este é só o número. Mesma família tipográfica
   para a página não parecer duas. */
.num-bloco{padding:.25rem 0}
.num-bloco .k{font-size:.75rem;font-weight:600;color:var(--petrol-700);
  text-transform:uppercase;letter-spacing:.04em}
.num-bloco .v{font-size:1.75rem;font-weight:600;line-height:1.1;margin:.15rem 0;
  font-variant-numeric:tabular-nums}
.num-bloco .n{font-size:.75rem;color:#6c757d;line-height:1.35}

/* ---- Visão geral: estado da operação, saúde e gráfico ---------------- */

/* Broad em voo. A barra usa a cor de destaque porque é a única coisa da
   tela que muda sozinha enquanto se olha. */
.voo{border:1px solid var(--bs-border-color);border-radius:.5rem;padding:.7rem .85rem}
.voo + .voo{margin-top:.5rem}
.voo .nome{font-weight:600}
.voo .barra{height:.5rem;background:#E5EBEA;border-radius:.25rem;overflow:hidden;margin:.45rem 0 .3rem}
.voo .barra > span{display:block;height:100%;background:var(--petrol-600);
  transition:width .6s ease}
.voo .meta{font-size:.78rem;color:#6c757d;font-variant-numeric:tabular-nums}

/* Taxa de saúde. A cor é o recado: quem passa os olhos tem de ver o
   problema sem ler o número. */
.taxa{padding:.25rem 0}
.taxa .k{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  color:var(--petrol-700)}
.taxa .v{font-size:1.6rem;font-weight:600;line-height:1.15;margin:.15rem 0;
  font-variant-numeric:tabular-nums}
.taxa .n{font-size:.75rem;color:#6c757d;line-height:1.35}
.taxa .lim{font-size:.72rem;color:#8b9391}
.taxa.boa     .v{color:#15803D}
.taxa.atencao .v{color:#B45309}
.taxa.ruim    .v{color:#B91C1C}
.taxa .pip{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;
  margin-right:.3rem;vertical-align:.05rem}
.taxa.boa     .pip{background:#15803D}
.taxa.atencao .pip{background:#B45309}
.taxa.ruim    .pip{background:#B91C1C}

/* Gráfico. width:100% + height:auto com o viewBox intacto: escala
   inteiro, sem esticar a espessura dos traços. */
.gr{width:100%;height:auto;display:block;overflow:visible}
.gr-grade{stroke:#E5EBEA;stroke-width:1}
.gr-env{fill:var(--petrol-600);opacity:.85}
.gr-abr{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;
  stroke-linecap:round}
.gr-cli{fill:none;stroke:#B45309;stroke-width:2;stroke-linejoin:round;
  stroke-linecap:round;stroke-dasharray:4 3}
/* Faixa invisível de leitura: pega o ponteiro no dia inteiro, inclusive
   onde não houve envio e portanto não há barra. */
.gr-alvo{fill:transparent}
.gr-alvo:hover{fill:var(--petrol-600);fill-opacity:.07}
.gr-rot{font-size:11px;fill:#8b9391;font-variant-numeric:tabular-nums}
.gr-rot-e{text-anchor:end}
.gr-rot-d{text-anchor:start}
.gr-legenda{font-size:.78rem;color:#6c757d}
.gr-legenda .amostra{display:inline-block;width:1.1rem;height:0;
  border-top-width:3px;border-top-style:solid;vertical-align:.25rem;margin-right:.3rem}
.gr-legenda .amostra.env{border-top-color:var(--petrol-600);border-top-width:9px;
  vertical-align:.1rem}
.gr-legenda .amostra.abr{border-top-color:var(--accent)}
.gr-legenda .amostra.cli{border-top-color:#B45309;border-top-style:dashed}

/* ---- Editor em tela cheia -------------------------------------------- */

/* z-index acima do modal do Bootstrap (1055): o editor vive DENTRO do
   modal do broad, e sem isso a tela cheia apareceria por baixo dele. */
.tela-cheia{
  position:fixed;inset:0;z-index:2050;
  background:#fff;padding:1rem 1.25rem;
  overflow:auto;
  display:flex;flex-direction:column;
}
.tela-cheia .CodeMirror{flex:1 1 auto}
/* Em tela cheia a barra de botões gruda no topo: é por ela que se sai. */
.tela-cheia > .d-flex:first-child{
  position:sticky;top:0;background:#fff;z-index:1;
  padding-bottom:.5rem;margin-bottom:.5rem!important;
  border-bottom:1px solid var(--bs-border-color);
}
/* Rede de segurança para o mesmo problema: se algum JS falhar, o
   seletor ainda anula o transform do modal enquanto houver tela cheia
   dentro dele. */
.modal-dialog:has(.tela-cheia){transform:none!important}

/* Cabeçalho que ordena. Só ganha cor quando é ele que está ordenando:
   seta em toda coluna vira ruído e some justamente a que importa. */
/* O cabeçalho de .table-solid é petrol-700 com texto BRANCO. A primeira
   versão pintava o hover de petrol-600 -- verde escuro sobre verde
   escuro --, e o nome da coluna sumia debaixo do ponteiro.
   Aqui as cores saem do lado claro da paleta. */
/* O cabeçalho de .table-solid é petrol-700 com texto BRANCO. A primeira
   versão pintava o hover de petrol-600 -- verde escuro sobre verde
   escuro, contraste 1,41:1 --, e o nome da coluna sumia debaixo do
   ponteiro.
   O texto fica BRANCO nos três estados (7,83:1). Quem sinaliza é o
   sublinhado e a seta, não a cor: trocar a cor num cabeçalho escuro só
   tem para onde ir para baixo. A seta usa o accent, e ali os 4,2:1
   bastam porque é glifo ao lado de texto legível, não o texto. */
/* Prefixados com .table-solid de propósito, e isto é o que faz a regra
   valer: a linha 301 tem `.table-solid a:hover{color:var(--petrol-700)}`,
   que é (0,2,1). Um `.th-ord:hover` solto é (0,2,0) e PERDE dela, por
   mais que venha 400 linhas depois -- especificidade ganha de ordem.
   Era ela repintando o link de verde escuro sobre o cabeçalho verde
   escuro. Com o .table-solid na frente viram (0,3,0) e ganham.

   Sem sublinhado e sem troca de cor: pedido do Rafael. O cabeçalho já
   é curto e em caixa alta, e qualquer enfeite no hover mexe com o
   texto embaixo do ponteiro. Quem diz "dá para clicar" é o cursor, e
   quem diz "está ordenando por aqui" é a seta. */
.table-solid .th-ord{color:#fff;text-decoration:none;white-space:nowrap;cursor:pointer}
.table-solid .th-ord:hover,
.table-solid .th-ord:focus,
.table-solid .th-ord:focus-visible{color:#fff;text-decoration:none}
.table-solid .th-ord-on{color:#fff;text-decoration:none}
.table-solid .th-ord .bi{font-size:.8em;margin-left:.15rem}
.table-solid .th-ord-on .bi{color:var(--accent)}
/* A seta da coluna que NÃO ordena fica apagada: ela está ali para dizer
   "dá para clicar", não para competir com o título. Sobe um pouco no
   hover para responder ao ponteiro sem mexer no texto. */
.table-solid .th-ord-sem{opacity:.35;transition:opacity .15s}
.table-solid .th-ord:hover .th-ord-sem{opacity:.8}
/* Separador entre os dois links de data no mesmo cabeçalho. Fica
   apagado porque não é clicável: dar a ele o mesmo peso dos links faria
   parecer uma terceira opção. */
.table-solid .th-sep{opacity:.4;margin:0 .1rem;font-weight:400}

/* ---- Reports -------------------------------------------------------
   As cores e as medidas sao as do relatorio que o time ja usa, copiadas
   do original a pedido do Rafael: "mantenha o mesmo layout as mesmas
   cores tudo igual". O motivo e bom -- essa tela e lida todo dia, e
   reaprender posicao de coluna custa mais que qualquer ganho estetico.
   Por isso as variaveis abaixo sao as DE LA, nao as da marca. */
.rep{
  --rep-petroleo:#006D6F;
  --rep-verde-claro:#90EE90;
  --rep-verde-medio:#3CB371;
  --rep-cinza-claro:#f8f9fa;
  --rep-cinza-medio:#e9ecef;
  --rep-cinza-escuro:#6c757d;
  font-size:13px;
}
.rep-painel{background:#fff;border:1px solid #ddd;border-radius:4px;overflow:hidden}
.rep-cabeca{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:10px 15px;background:#fff;border-bottom:2px solid var(--rep-petroleo);
}
.rep-titulo{color:var(--rep-petroleo);font-size:1.3em;font-weight:bold}
.rep-tag{font-size:.8em;padding:3px 8px;border-radius:4px;color:#fff}
.rep-tag-on{background:#5cb85c}
.rep-tag-off{background:#f0ad4e}
.rep-refresh{color:var(--rep-cinza-escuro);text-decoration:none;font-size:.85em}
.rep-refresh:hover{color:var(--rep-petroleo)}

.rep-datas{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto}
.rep-data{
  display:flex;flex-direction:column;align-items:center;line-height:1.15;
  min-width:50px;padding:4px 10px;border:1px solid var(--rep-petroleo);
  border-radius:4px;color:var(--rep-petroleo);text-decoration:none;
  font-size:.85em;transition:all .2s;
}
.rep-data:hover{background:var(--rep-petroleo);color:#fff}
.rep-data.on{background:var(--rep-petroleo);color:#fff;font-weight:bold}

.rep-tab{width:100%;border-collapse:collapse}
.rep-tab td,.rep-tab th{padding:4px 8px;line-height:1.2;vertical-align:middle}

/* Faixa do cliente: verde claro com a barra petroleo a esquerda. */
.rep-tab tr.rep-grupo td{
  background:var(--rep-verde-claro);border-left:4px solid var(--rep-petroleo);
  padding:6px 12px;white-space:nowrap;
}
.rep-cli{
  font-weight:bold;font-size:1.1em;color:var(--rep-petroleo);
  background:rgba(255,255,255,.3);padding:2px 8px;border-radius:4px;
  border-left:3px solid var(--rep-petroleo);margin-right:10px;
  display:inline-block;
}
.rep-url{color:var(--rep-petroleo);font-size:.9em;text-decoration:none}
.rep-url:hover{color:var(--rep-verde-medio)}
.rep-erro{color:#B91C1C;font-size:.85em;margin-left:10px}

/* Cabecalho de colunas: repete a cada cliente, como no original. */
.rep-tab tr.rep-colunas th{
  background:var(--rep-cinza-medio);color:var(--rep-petroleo);
  padding:6px 8px;border-bottom:2px solid #ddd;font-weight:bold;
}
.rep-pais{width:50px;text-align:center}
.rep-flag{font-size:1.15em}
.rep-hora-h{width:60px}
.rep-hora{white-space:nowrap;font-variant-numeric:tabular-nums}
.rep-dir{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}

.rep-tab tbody tr:not(.rep-grupo):not(.rep-colunas):not(.rep-sub):not(.rep-geral){
  border-bottom:1px solid #f0f0f0;
}
.rep-email{font-size:.95em}
.rep-ed{color:var(--rep-petroleo);text-decoration:none;margin-right:2px}
.rep-ed:hover{color:var(--rep-verde-medio)}
.rep-sender{font-size:.85em;color:var(--rep-cinza-escuro);font-style:italic}
.rep-forte{font-weight:500}
.rep-fraco{color:var(--rep-cinza-escuro)}
.rep-v{font-weight:bold;color:var(--rep-petroleo)}
.rep-n{font-size:.9em;color:var(--rep-petroleo);margin-left:2px}
.rep-selo{background:#FEF9C3;color:#A16207;border-radius:3px;padding:0 4px;
  margin-left:4px;font-style:normal;font-weight:600}
.rep-falha{background:#FEE2E2;color:#B91C1C;border-radius:3px;padding:0 4px;
  margin-left:4px;font-style:normal;font-weight:600}

.rep-tab tr.rep-sub td{
  background:var(--rep-cinza-medio);font-weight:bold;color:var(--rep-cinza-escuro);
  border-top:2px solid var(--rep-cinza-escuro);
}
.rep-tab tr.rep-sub .rep-v,.rep-tab tr.rep-sub .rep-n{color:var(--rep-petroleo)}

.rep-tab tr.rep-geral td{
  background:var(--rep-petroleo);color:#fff;font-weight:bold;
  padding:8px 8px;font-size:1.05em;
}
.rep-tab tr.rep-geral .rep-v,.rep-tab tr.rep-geral .rep-n{color:#fff}
.rep-vazio{padding:2rem;text-align:center;color:var(--rep-cinza-escuro)}

/* Janela de monitor: sem barra lateral, conteudo ocupando tudo. */
.rep-cheia{background:var(--rep-cinza-claro,#f8f9fa)}
.rep-cheia-main{padding:12px;max-width:none}
.rep-cheia-rodape{margin-top:10px;font-size:11px;color:#6c757d;text-align:center}
/* Botão da atualização automática. Mostra a conta regressiva porque
   recarga sem aviso parece defeito -- a pessoa vê a tela piscar e não
   sabe se foi ela, se caiu, ou se o número mudou. */
.rep-auto{
  border:1px solid var(--rep-petroleo,#006D6F);background:#fff;
  color:var(--rep-petroleo,#006D6F);border-radius:4px;
  padding:3px 8px;font-size:.8em;line-height:1.2;cursor:pointer;
  font-variant-numeric:tabular-nums;min-width:4.75rem;
}
.rep-auto.on{background:var(--rep-petroleo,#006D6F);color:#fff}
.rep-auto:hover{opacity:.85}
/* Broad parado no meio do disparo. Laranja e não vermelho: não é erro,
   é decisão de quem operou -- mas precisa saltar, porque a linha tem
   números grandes e seria lida como um envio que terminou. */
.rep-parado{background:#FFEDD5;color:#9A3412;border-radius:3px;padding:0 5px;
  margin-left:4px;font-style:normal;font-weight:600;white-space:nowrap}
/* Perfil na lista de usuários. Administrador em petróleo e copy em
   cinza: o que precisa saltar é quem tem acesso a tudo, não quem tem
   acesso a pouco. */
.badge-perfil-admin{background:var(--petrol-700);color:#fff;font-weight:600;
  padding:.1875rem .4375rem;border-radius:.25rem;font-size:.7656rem}
.badge-perfil-copy{background:var(--cinza-claro);color:var(--cinza);font-weight:600;
  padding:.1875rem .4375rem;border-radius:.25rem;font-size:.7656rem;
  border:1px solid var(--bs-border-color)}

/* ------------------------------------------------- painel inicial
   Depois do login a primeira pergunta e sempre "em qual cliente eu vou
   mexer?". O cartao inteiro responde e e o link -- nao ha um botao
   pequeno para acertar dentro dele. */
.secao-titulo{
  font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#5C6B6B;margin:0 0 .6rem;
}
.grade-clientes{
  display:grid;gap:.85rem;
  /* auto-fill com minimo de 250px: em telas largas enfileira varios, no
     celular cai para um por linha sozinho, sem media query. */
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
}
.cli-card{
  display:flex;flex-direction:column;gap:.7rem;
  padding:1rem 1.1rem;background:#fff;border:1px solid var(--bs-border-color);
  border-radius:10px;text-decoration:none;color:inherit;
  transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.cli-card:hover{
  border-color:var(--petrol-500);box-shadow:0 4px 14px rgba(4,39,37,.10);
  transform:translateY(-1px);color:inherit;
}
.cli-card:focus-visible{outline:2px solid var(--petrol-500);outline-offset:2px}

.cli-topo{display:flex;align-items:center;gap:.65rem}
.cli-inicial{
  width:38px;height:38px;flex-shrink:0;border-radius:9px;
  display:grid;place-items:center;
  background:var(--petrol-700);color:#fff;font-weight:700;font-size:1.05rem;
}
.cli-id{display:flex;flex-direction:column;min-width:0;flex:1}
.cli-nome{
  font-weight:600;font-size:.95rem;
  /* nome longo de cliente nao pode esticar o cartao e quebrar a grade */
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cli-slug{font-size:.75rem;color:#5C6B6B}

.cli-nums{display:flex;flex-direction:column;gap:.15rem}
.cli-num{font-size:.8125rem;color:#3F4C4B}
.cli-num b{font-size:.95rem;font-weight:700}
.cli-num.sec{color:#5C6B6B}
/* 7,3:1 no branco -- o unico numero desta tela que pede acao agora nao
   pode ser o mais dificil de ler. */
.cli-num.voando{color:#0A5C57;font-weight:600}

.cli-entrar{
  margin-top:auto;font-size:.8125rem;font-weight:600;color:var(--petrol-600);
  display:flex;align-items:center;gap:.3rem;
}
.cli-card:hover .cli-entrar i{transform:translateX(2px)}
.cli-entrar i{transition:transform .15s ease}