/* O estilo da área de administração da SalesMode (12/10/2026). É um painel à parte do painel da Sarah, com o próprio
   estilo, mas com o mesmo desenho: as cores, as fontes e as medidas são as do guia (docs/DESIGN-SYSTEM.md), com os
   mesmos nomes e os mesmos valores de tela/painel.css (a bateria lib/teste-cores-das-telas.js recusa a diferença).
   As peças que existem nos dois lugares levam o mesmo nome (.btn, .campo, .tabela, .janela); o que é só daqui leva o
   prefixo adm-. Nada muda de tamanho nem de lugar sob o mouse ou com o foco. */
:root{
  --paper:#FFFFFF; --paper-2:#F4F4F6;
  --ink:#0A0A0A; --ink-2:#404040; --ink-3:#6B6B66;
  --rule:#DDD9D0;
  --primary:#0620F3; --primary-hover:#0518C4; --primary-soft:rgba(6,32,243,.07);
  --etapa-fora-bg:#E7E7EB;
  --warning:#B45309; --warning-bg:#FFF8E1; --error:#DC2626; --ok:#15803D;
  --font-display:"Bricolage Grotesque","Geist",system-ui,sans-serif;
  --font-body:"Geist",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  --ease:cubic-bezier(.4,0,.2,1); --dur:200ms;
  --pad-x:16px; --topo-h:52px; --campo-h:36px; --toque:44px; --lateral-w:256px;
}
@media (min-width:768px){ :root{ --pad-x:32px; } }
*{box-sizing:border-box}
html{color-scheme:light;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background-color:var(--paper-2);
  background-image:radial-gradient(circle,rgba(100,100,96,.22) .8px,transparent 1.1px);background-size:20px 20px;
  color:var(--ink);font-family:var(--font-body);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
button,input{font:inherit;color:inherit}
button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
input:focus-visible{outline-offset:1px}
[hidden]{display:none!important}

/* As peças comuns, como no painel */
.titulo{margin:0;font-family:var(--font-display);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.label{margin:0;font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.caption{margin:0;font-size:12px;color:var(--ink-3)}
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:12px;background:var(--primary);color:var(--paper);border:0;border-radius:4px;
  font-weight:500;font-size:13px;padding:0 14px;min-height:38px;cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background 150ms ease}
.btn:hover,.btn:focus-visible{background:var(--primary-hover)}
.btn:disabled{opacity:.45;cursor:default}
.btn.sec{background:var(--paper);color:var(--ink);border:1px solid var(--rule)}
.btn.sec:hover,.btn.sec:focus-visible{background:var(--paper-2)}
.link-seta{display:inline-flex;align-items:center;gap:10px;background:none;border:0;border-bottom:1px solid var(--primary);padding:6px 0;min-height:32px;
  cursor:pointer;color:var(--primary);font-size:13px;font-weight:500;text-decoration:none;white-space:nowrap;transition:color 150ms ease,border-color 150ms ease}
.link-seta:hover,.link-seta:focus-visible{color:var(--primary-hover);border-bottom-color:var(--primary-hover)}
.btn > span[aria-hidden="true"]:last-child{transition:transform var(--dur) var(--ease)}
.btn:hover:not(:disabled) > span[aria-hidden="true"]:last-child,.btn:focus-visible > span[aria-hidden="true"]:last-child{transform:translateX(4px)}
.campo{display:flex;flex-direction:column;gap:4px}
.campo .label{color:var(--ink-2)}
input[type=text],input[type=email],input[type=tel],input[type=password]{
  border:1px solid var(--rule);border-radius:0;padding:0 10px;background:var(--paper);height:var(--campo-h);min-height:var(--campo-h);color:var(--ink);font-size:13px;width:100%;
  -webkit-appearance:none;appearance:none}
input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
input::placeholder{color:var(--ink-3)}
.aviso{border:1px solid rgba(220,38,38,.4);background:var(--paper);color:var(--error);padding:10px 12px;font-size:13px;margin:0}
.vazio{color:var(--ink-3);font-size:13px;padding:14px 0;margin:0}

/* Cabeçalho: o logotipo da Sarah e "Administração" à esquerda, quem entrou e o Sair à direita (16/10, pedido do
   Renato: o logotipo no lugar do logo da SalesMode, com a medida do alto do menu do painel) */
header.topo{position:sticky;top:0;z-index:5;background:rgba(255,255,255,.97);border-bottom:1px solid var(--rule);
  padding:0 var(--pad-x);min-height:var(--topo-h);display:flex;align-items:center;gap:18px}
.marca{display:flex;align-items:center;gap:12px}
.marca img{height:28px;width:auto;display:block}
.marca .barra{width:1px;height:22px;background:var(--rule)}
.produto{font-family:var(--font-display);font-weight:800;font-size:22px;letter-spacing:-.03em;line-height:1;color:var(--ink);white-space:nowrap}
.adm-quem{margin-left:auto;display:flex;align-items:center;gap:16px;min-width:0}
.adm-quem .caption{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* O login: um cartão no meio da página, como a tela de entrada do painel */
.adm-login{display:flex;justify-content:center;padding:56px var(--pad-x) 32px}
.adm-cartao{width:100%;max-width:400px;background:var(--paper);border:1px solid var(--rule);padding:28px 28px 24px;display:flex;flex-direction:column;gap:14px}
.adm-cartao h1{margin:0;font-family:var(--font-display);font-weight:800;font-size:30px;line-height:1.05;letter-spacing:-.03em;color:var(--ink)}
.adm-cartao h1 span{color:var(--primary)}
.adm-apoio{margin:0 0 4px;color:var(--ink-2)}
.adm-entrar{min-height:48px;padding:0 16px;font-size:14px;margin-top:2px}
/* O lugar da frase de erro existe desde o começo: quando ela aparece, nada desce. */
.adm-erro{margin:0;min-height:20px;font-size:13px;line-height:20px;color:var(--error)}

/* Por dentro: o menu da administração ao lado, a página no resto */
.adm-dentro{display:flex;align-items:stretch;min-height:calc(100vh - var(--topo-h) - 1px)}
.adm-menu{flex:none;width:var(--lateral-w);background:var(--paper);border-right:1px solid var(--rule);padding:18px 0;display:flex;flex-direction:column;gap:2px}
.adm-menu .label{padding:0 var(--pad-x) 8px}
.adm-item{display:flex;align-items:center;min-height:38px;padding:0 var(--pad-x);color:var(--ink-2);font-size:13px;font-weight:500;text-decoration:none;border-left:2px solid transparent;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.adm-item:hover,.adm-item:focus-visible{background:var(--paper-2);color:var(--ink)}
.adm-item.atual{background:var(--primary-soft);color:var(--primary);border-left-color:var(--primary)}
.adm-pagina{flex:1;min-width:0;padding:20px var(--pad-x) 40px;display:flex;flex-direction:column;gap:14px}
.filtros{display:flex;gap:10px;align-items:center;flex-wrap:wrap;min-height:38px}
.filtros .nova{margin-left:auto;min-height:var(--campo-h)}

/* O recado de uma empresa recém-criada: diz o que fazer com ela. É um bloco que entra na página. */
.adm-recado{margin:0;padding:12px 14px;background:var(--paper);border:1px solid var(--rule);border-left:2px solid var(--ok);color:var(--ink-2);font-size:13px;display:flex;gap:6px 16px;align-items:flex-start;flex-wrap:wrap}
.adm-recado p{margin:0;flex:1 1 320px}
.adm-recado strong{color:var(--ink);font-weight:600}

/* A lista das empresas: tabela, como as listas do painel */
.tabela{overflow-x:auto;border-top:1px solid var(--ink)}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--rule);white-space:nowrap;vertical-align:top}
th:first-child,td:first-child{padding-left:0}
th{font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);background:var(--paper-2)}
td{color:var(--ink-2)}
td:first-child{color:var(--ink);font-weight:500}
td.corta{max-width:280px;overflow:hidden;text-overflow:ellipsis}
td .caption{display:block}
.adm-nao{color:var(--ink-3)}
/* Os selos: o de empresa de teste (cinza) e o de atenção (âmbar) */
.adm-selo{display:inline-block;margin-left:8px;padding:1px 6px;border-radius:2px;font-size:11px;font-weight:500;line-height:16px;background:var(--etapa-fora-bg);color:var(--ink-2);vertical-align:1px}
.adm-selo.atencao{background:var(--warning-bg);color:var(--warning)}
.adm-situacao{font-weight:500}
.adm-situacao.liberada{color:var(--ok)}
.adm-situacao.em_analise{color:var(--warning)}
.adm-situacao.pausada,.adm-situacao.recusada{color:var(--ink-3)}

/* A janela de criar a empresa de teste */
.janela{border:1px solid var(--rule);padding:22px 22px 18px;width:calc(100% - 32px);max-width:520px;background:var(--paper);color:var(--ink-2);
  box-shadow:0 24px 60px -24px rgba(10,10,10,.45)}
.janela::backdrop{background:rgba(10,10,10,.4)}
.janela h2{margin:0 0 6px;font-family:var(--font-display);font-weight:800;font-size:20px;line-height:1.15;letter-spacing:-.02em;color:var(--ink)}
.janela > form > p{margin:0 0 14px;font-size:13px}
.form-bloco{display:flex;flex-direction:column;gap:12px}
.rodape-form{display:flex;justify-content:flex-end;align-items:center;gap:10px;flex-wrap:wrap}
.rodape-form .btn{min-height:var(--campo-h);padding:0 16px}

/* O aviso flutuante: o que deu certo, no canto de baixo, à direita */
.aviso-feito{position:fixed;right:var(--pad-x);bottom:12px;z-index:13;max-width:min(440px,calc(100vw - 2 * var(--pad-x)));
  padding:12px 16px;background:var(--paper);border:1px solid var(--rule);box-shadow:0 12px 28px -12px rgba(10,10,10,.35);color:var(--ink);font-size:13px;line-height:1.4;
  visibility:hidden;opacity:0;pointer-events:none;transform:translateY(24px) scale(.92);transform-origin:50% 100%;
  transition:opacity 280ms ease-in-out,transform 280ms ease-in-out,visibility 0s linear 280ms}
.aviso-feito.aberto{visibility:visible;opacity:1;pointer-events:auto;transform:none;transition-delay:0s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important}
}

/* Tablet e celular: o menu vira uma faixa no alto, a lista vira caixas, e o que se toca tem 44 px */
@media (max-width:900px){
  .adm-dentro{flex-direction:column}
  .adm-menu{width:auto;flex-direction:row;align-items:center;gap:0;padding:0 var(--pad-x);border-right:0;border-bottom:1px solid var(--rule);overflow-x:auto}
  .adm-menu .label{display:none}
  .adm-item{min-height:var(--toque);padding:0 12px;border-left:0;border-bottom:2px solid transparent}
  .adm-item.atual{border-bottom-color:var(--primary)}
  .btn,.link-seta{min-height:var(--toque)}
  .filtros .nova,.rodape-form .btn{min-height:var(--toque)}
  input[type=text],input[type=email],input[type=tel],input[type=password]{height:var(--toque);min-height:var(--toque)}
  .tabela{border-top:0;overflow-x:visible}
  table,tbody,tr,td{display:block;width:100%}
  thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  tbody tr{background:var(--paper);border:1px solid var(--rule);padding:10px 12px;margin-bottom:10px}
  td{border:0;padding:2px 0;white-space:normal}
  td.corta{max-width:none}
  td[data-rotulo]::before{content:attr(data-rotulo) ": ";color:var(--ink-3);font-size:12px}
  td:first-child{font-size:14px;padding-bottom:4px}
  td:first-child::before{content:none}
}
@media (max-width:640px){
  input[type=text],input[type=email],input[type=tel],input[type=password]{font-size:16px}
  .produto{font-size:18px}
  .marca img{height:24px}
  .adm-quem .caption{display:none}
  .adm-login{padding-top:24px}
  .adm-cartao{padding:22px 18px 20px}
}