/* Painel do BlueBot. Sem framework de CSS, como o resto do projeto. */

:root {
  --fundo: #f6f7f9;
  --papel: #ffffff;
  --borda: #e2e5ea;
  --texto: #1a1d21;
  --fraco: #6b7280;
  --azul: #1f5fd0;
  --verde: #12854a;
  --ambar: #9a6700;
  --vermelho: #b42318;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #14171c; --papel: #1c2027; --borda: #2c313a;
    --texto: #e8eaed; --fraco: #9aa1ab; --azul: #6fa0f5;
    --verde: #4ac585; --ambar: #e0b341; --vermelho: #f0736a;
  }
}

* { box-sizing: border-box; }

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

.escondido { display: none !important; }

.centro { display: flex; justify-content: center; align-items: center; padding: 20px; }

/* ─── tela de entrada ─── */
.entrada { position: relative; min-height: 100vh; display: flex; align-items: center; }
.entrada-fundo {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(160deg, #131d3d 0%, #0e1633 45%, #0a1027 100%);
}
/* A FOTO, quando existe, é o fundo do elemento — e as estrelas desenhadas
   continuam por cima, no ::before. Antes a foto SUBSTITUÍA o desenho, e o
   resultado era um céu borrado: a origem tem 589 px de altura, e numa tela de
   1400 ela é esticada 2,4 vezes. Estrela é ponto de luz — é justamente onde o
   olho percebe o borrão. Foto embaixo (a nebulosa, que borrão não estraga) e
   estrelas nítidas por cima resolve os dois. */
.entrada-fundo.com-foto {
  background-image: var(--fundo-login);
  background-size: cover; background-repeat: no-repeat; background-position: center;
}
.entrada-fundo::before {
  content: ""; position: absolute; inset: 0;
  /* Céu desenhado, não foto recortada.
     A captura que temos traz o céu já com o cartão e o logo por cima, e o
     pedaço limpo que sobra tem 173 px de largura — ampliado para tela cheia
     sairia borrado, e borrado numa tela de login é a primeira impressão que a
     aplicação dá. Isto é nítido em qualquer tamanho, pesa nada, e é
     substituído no instante em que existir um fundo.jpg na pasta da marca.

     Cada radial-gradient desenha UMA estrela. Para virar céu, cada camada
     precisa de um `background-size` menor que a tela e se REPETIR — a primeira
     montagem tinha doze gradientes cobrindo tudo, e o resultado foram doze
     pontos perdidos numa tela preta. */
  background-image:
    /* névoa, sem repetição */
    radial-gradient(ellipse 55% 45% at 76% 58%, rgba(122,88,170,.30), transparent 70%),
    radial-gradient(ellipse 60% 50% at 20% 32%, rgba(54,86,160,.28),  transparent 72%),
    /* três camadas de estrelas, tamanhos e densidades diferentes: o céu ganha
       profundidade e o padrão da repetição deixa de saltar aos olhos */
    radial-gradient(1.6px 1.6px at 32px 44px,  rgba(255,255,255,.95), transparent 100%),
    radial-gradient(1.4px 1.4px at 148px 92px, rgba(255,255,255,.75), transparent 100%),
    radial-gradient(1.8px 1.8px at 96px 176px, rgba(255,255,255,.9),  transparent 100%),
    radial-gradient(1.2px 1.2px at 205px 24px, rgba(255,255,255,.7),  transparent 100%),
    radial-gradient(1px 1px     at 18px 132px, rgba(255,255,255,.6),  transparent 100%),
    radial-gradient(1px 1px     at 62px 208px, rgba(255,255,255,.55), transparent 100%),
    radial-gradient(1.1px 1.1px at 121px 61px, rgba(255,255,255,.65), transparent 100%),
    radial-gradient(1.3px 1.3px at 178px 149px,rgba(255,255,255,.8),  transparent 100%),
    linear-gradient(160deg, #131d3d 0%, #0e1633 45%, #0a1027 100%);
  background-size:
    100% 100%, 100% 100%,
    240px 240px, 240px 240px, 240px 240px, 240px 240px,
    170px 170px, 170px 170px, 310px 310px, 310px 310px,
    100% 100%;
  background-repeat:
    no-repeat, no-repeat,
    repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat,
    no-repeat;
}
/* Sobre a foto, as estrelas desenhadas entram só como reforço: a foto já tem
   as dela, e as duas em cheio viram poeira. O degradê de base sai daqui,
   senão taparia a foto inteira. */
.entrada-fundo.com-foto::before {
  opacity: .5;
  background-image:
    radial-gradient(1.6px 1.6px at 32px 44px,  rgba(255,255,255,.95), transparent 100%),
    radial-gradient(1.4px 1.4px at 148px 92px, rgba(255,255,255,.75), transparent 100%),
    radial-gradient(1.8px 1.8px at 96px 176px, rgba(255,255,255,.9),  transparent 100%),
    radial-gradient(1.2px 1.2px at 205px 24px, rgba(255,255,255,.7),  transparent 100%),
    radial-gradient(1px 1px     at 18px 132px, rgba(255,255,255,.6),  transparent 100%),
    radial-gradient(1px 1px     at 62px 208px, rgba(255,255,255,.55), transparent 100%),
    radial-gradient(1.1px 1.1px at 121px 61px, rgba(255,255,255,.65), transparent 100%),
    radial-gradient(1.3px 1.3px at 178px 149px,rgba(255,255,255,.8),  transparent 100%);
  background-size:
    240px 240px, 240px 240px, 240px 240px, 240px 240px,
    170px 170px, 170px 170px, 310px 310px, 310px 310px;
  background-repeat: repeat;
}
/* Véu por cima do fundo: foto bonita e texto legível raramente coexistem sem
   ele, e sem véu o cartão branco "flutua" num contraste que cansa. */
.entrada-fundo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(6,10,24,.62) 0%, rgba(6,10,24,.28) 50%, rgba(6,10,24,.66) 100%);
}

/* OCUPA A TELA. Era `max-width: 1040px` fixo — numa tela de 3500 px o conjunto
   virava uma ilha de mil pixels no meio de um campo escuro, e é isso que se lê
   como "não ocupa a tela toda". O teto agora acompanha a janela: 88vw até
   1520 px, que é onde a marca e o cartão param de se afastar a ponto de o olho
   ter de viajar entre os dois. */
.entrada-conteudo {
  position: relative; z-index: 1;
  width: 100%; max-width: min(1520px, 88vw); margin: 0 auto;
  padding: clamp(24px, 4vw, 56px) clamp(20px, 3vw, 48px);
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(40px, 6vw, 96px);
}

.entrada-marca { display: flex; align-items: center; gap: 22px; flex: 0 1 auto; }
/* Com logo por extenso, o ícone ao lado seria o mesmo "b" duas vezes — o logo
   já traz a marca dentro. O ícone só aparece quando não há logo. */
.entrada-marca.tem-logo .entrada-icone { display: none; }
.entrada-icone { width: clamp(104px, 9vw, 176px); height: clamp(104px, 9vw, 176px); flex: 0 0 auto; }
.entrada-icone img, .entrada-icone svg {
  width: 100%; height: 100%; object-fit: contain; border-radius: 22%;
}
/* Na referência a marca é o elemento dominante da tela. Com teto fixo de
   300 px ela encolhia visualmente a cada polegada a mais de monitor. */
/* `width`, não só `max-width`. Dentro do flex a caixa encolhia para o tamanho
   natural do arquivo (222 px) e o clamp nunca valia: o `width: 100%` da imagem
   media 100% de uma caixa que media a própria imagem. */
.entrada-logo { width: clamp(260px, 26vw, 460px); flex: 0 0 auto; }
.entrada-logo img { width: 100%; height: auto; object-fit: contain; }
/* Sem logo cadastrado, o nome escrito — nunca uma marca inventada. */
.entrada-logo .escrito { font-size: clamp(30px, 3.4vw, 52px); font-weight: 700; letter-spacing: -.02em; color: #fff; }
.entrada-logo .escrito .sufixo { color: var(--marca, #1f5fd0); }
.entrada-logo .sub {
  margin-top: 4px; font-size: 11.5px; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255,255,255,.62);
}

.cartao {
  background: var(--papel); border: 1px solid var(--borda); border-radius: 12px;
  padding: clamp(24px, 2.2vw, 34px); width: 100%; max-width: clamp(360px, 30vw, 440px);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}
.cartao h1 { margin: 0 0 18px; font-size: 21px; }

/* ─── o cartão do login (§4 + a referência da Blue) ───────────────────────────
 *
 * Tudo aqui é ESCOPADO em `.entrada`. Os mesmos campos aparecem dentro do
 * painel — filtros, cadastro de número, usuários — e lá a caixa com borda é
 * certa: são formulários densos, com muitos campos lado a lado, onde a régua
 * de baixo some. Mudar `input` global levaria este desenho para lá junto.
 *
 * O RÓTULO FLUTUANTE, e por que não é enfeite: com o campo vazio ele ocupa o
 * lugar do texto; ao digitar, sobe e vira etiqueta. É o que deixa o cartão
 * limpo sem perder o nome do campo — que um placeholder puro perde no instante
 * em que a pessoa começa a escrever, e aí ela não sabe mais o que estava
 * preenchendo. Depende de `placeholder=" "` no HTML: sem placeholder o
 * `:placeholder-shown` nunca casa e o rótulo nunca desce.
 */
.entrada .cartao {
  /* Cantos quase retos e sem borda, como na referência: a sombra já separa o
     cartão do céu, e a borda somada à sombra faz duas linhas de contorno. */
  border: 0; border-radius: 3px;
  padding: clamp(40px, 5vw, 60px) clamp(26px, 2.4vw, 34px);
  max-width: clamp(340px, 27vw, 404px);
  box-shadow: 0 14px 46px rgba(0, 0, 0, .38);
}
.entrada .cartao h1 {
  margin: 0 0 26px;
  font-size: 22px; font-weight: 400; letter-spacing: -.01em;
  color: var(--texto);
}

.entrada .campo {
  position: relative; display: block; margin: 0 0 26px;
}
.entrada .campo input {
  width: 100%; margin: 0; padding: 20px 0 7px;
  background: transparent; border: 0; border-radius: 0;
  border-bottom: 1px solid var(--borda);
  font-size: 15px; color: var(--texto);
}
/* A régua de foco tem 2 px e é desenhada por baixo, com transform, para o
   campo não pular 1 px quando ganha foco — trocar a espessura da borda
   empurraria tudo o que vem abaixo. */
.entrada .campo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--azul); transform: scaleX(0); transition: transform 160ms ease;
}
.entrada .campo:focus-within::after { transform: scaleX(1); }
.entrada .campo input:focus { outline: 0; }

.entrada .campo .rotulo {
  position: absolute; left: 0; top: 20px;
  font-size: 15px; color: var(--fraco); pointer-events: none;
  transition: top 140ms ease, font-size 140ms ease, color 140ms ease;
}
.entrada .campo input:focus + .rotulo,
.entrada .campo input:not(:placeholder-shown) + .rotulo {
  top: 0; font-size: 11.5px; letter-spacing: .02em;
}
.entrada .campo input:focus + .rotulo { color: var(--azul); }

/* O olho da senha. Fica DENTRO do rótulo <label>, então o clique nele
   ativaria o campo e roubaria o foco — daí o `type="button"` no HTML e o
   `preventDefault` no mousedown, em app.js. */
.entrada .campo.com-botao input { padding-right: 40px; }
.entrada .campo .olho {
  position: absolute; right: -6px; bottom: 1px;
  width: 34px; height: 34px; padding: 7px;
  background: none; border: 0; border-radius: 50%;
  color: var(--fraco); line-height: 0;
}
.entrada .campo .olho:hover { color: var(--texto); background: color-mix(in srgb, var(--texto) 8%, transparent); }
.entrada .campo .olho svg { width: 20px; height: 20px; display: block; }

.entrada .cartao .principal {
  margin-top: 6px; padding: 13px;
  border-radius: 4px; background: var(--entrada-botao, #4b6ab2);
  font-size: 14px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .07em;
}
.entrada .cartao .principal:hover:not(:disabled) {
  background: color-mix(in srgb, var(--entrada-botao, #4b6ab2) 88%, #000);
}
/* Alinhado à esquerda, colado no botão — como na referência. O centralizado
   de largura total lia como um segundo botão. */
.entrada .cartao .link.voltar {
  width: auto; margin: 14px 0 0; padding: 0;
  text-align: left; font-size: 13.5px; color: var(--entrada-botao, #4b6ab2);
}
.entrada .cartao .ajuda { margin: -14px 0 22px; }
.entrada .cartao .recado { margin-top: 16px; }

.ajuda { margin: 8px 0 0; font-size: 12.5px; color: var(--fraco); }
.link.voltar {
  display: block; width: 100%; margin-top: 10px; padding: 8px;
  font-size: 12.5px; text-align: center;
}

@media (max-width: 860px) {
  .entrada-conteudo { flex-direction: column; gap: 28px; justify-content: center; }
  .entrada-marca { flex-direction: column; text-align: center; gap: 14px; }
  .entrada-icone { width: 96px; height: 96px; }
  .entrada-fundo::after { background: rgba(6,10,24,.68); }
}
.sub { margin: 4px 0 20px; color: var(--fraco); font-size: 14px; }

.abas { display: flex; gap: 4px; margin-bottom: 18px; }
.aba {
  flex: 1; padding: 8px; font-size: 13px; cursor: pointer;
  background: transparent; color: var(--fraco);
  border: 1px solid var(--borda); border-radius: 8px;
}
.aba.ativa { background: var(--azul); border-color: var(--azul); color: #fff; }

.forma label, .filtros label { display: block; margin-bottom: 12px; font-size: 13px; color: var(--fraco); }

input, select {
  width: 100%; margin-top: 4px; padding: 9px 10px; font: inherit;
  background: var(--fundo); color: var(--texto);
  border: 1px solid var(--borda); border-radius: 8px;
}
input:focus, select:focus { outline: 2px solid var(--azul); outline-offset: -1px; }

button { font: inherit; cursor: pointer; }
.principal {
  width: 100%; padding: 10px; border: 0; border-radius: 8px;
  background: var(--azul); color: #fff; font-weight: 600;
}
.principal:disabled { opacity: .55; cursor: default; }
.secundario {
  padding: 8px 16px; border: 1px solid var(--borda); border-radius: 8px;
  background: var(--papel); color: var(--texto);
}

/* `.link` nunca teve regra própria: os dois botões marcados assim — "usar outro
   e-mail" no login e "voltar ao degradê padrão" na Aparência — apareciam com o
   contorno cinza que o navegador dá a todo <button>. Pareciam botão secundário,
   que é exatamente o peso que não deviam ter. */
.link {
  background: none; border: 0; padding: 0;
  color: var(--azul); font-size: 13px; text-align: left;
}
.link:hover { text-decoration: underline; }

.recado { margin-top: 14px; font-size: 13px; min-height: 18px; color: var(--fraco); }
.recado.erro { color: var(--vermelho); }
.recado.bom  { color: var(--verde); }

/* ─── barra lateral (§4) ─── */

#painel { display: flex; min-height: 100vh; }

.barra-lateral {
  width: 256px; flex: 0 0 256px;
  /* 300ms ease-in-out: o §4 fixa isto. Mais rápido pisca, mais lento arrasta. */
  transition: width 300ms ease-in-out, flex-basis 300ms ease-in-out;
  display: flex; flex-direction: column;
  /* Sem corFundo configurada, degradê escuro FIXO. Não se gera degradê a partir
     da cor primária: escurecer um tom arbitrário acerta em algumas marcas e
     erra feio em outras. */
  background: var(--barra-fundo, linear-gradient(180deg, #101728 0%, #0b1020 100%));
  color: #e8eaed;
  position: sticky; top: 0; height: 100vh; overflow: hidden;
}
.barra-lateral.fechada { width: 72px; flex-basis: 72px; }

.cabecalho {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 16px; background: none; border: 0; color: inherit;
  text-align: left; cursor: pointer; width: 100%;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.cabecalho:hover { background: rgba(255,255,255,.04); }

/* 38px fechada, como manda o §4 — e é por isso que o ícone precisa ser um
   desenho quadrado, não o logo por extenso espremido. */
.marca-icone { width: 38px; height: 38px; flex: 0 0 38px; display: block; }
.marca-icone img, .marca-icone svg {
  width: 100%; height: 100%; object-fit: contain; border-radius: 22%;
}
/* 44px de altura na barra aberta */
.barra-lateral:not(.fechada) .marca-icone { width: 44px; height: 44px; flex-basis: 44px; }

.marca-texto { display: flex; flex-direction: column; min-width: 0; }

/* O NOME NUMA LINHA SÓ, ao lado do ícone: "BLUE" cheio e "PROJECTS" leve e
   espaçado, que é o desenho da marca. Antes aqui entrava o logo por extenso —
   um bloco de duas linhas que, no cabeçalho de 256 px, reduzia o texto a 9 px.
   Texto renderiza nítido em qualquer zoom; PNG de 222 px, não. */
.marca-nome {
  font-size: 20px; font-weight: 800; letter-spacing: .01em;
  white-space: nowrap; line-height: 1.05;
}
.marca-nome .sufixo {
  font-weight: 300; letter-spacing: .07em;
  /* Branco, NÃO a cor primária. No logotipo da Blue as duas palavras são
     brancas — pintar "PROJECTS" de azul inventaria uma marca que não existe, e
     na barra escura o azul primário ainda parece link clicável. */
  color: rgba(255,255,255,.82);
}
.marca-sub {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.55); white-space: nowrap; margin-top: 2px;
}
.barra-lateral.fechada .marca-texto { display: none; }

.navegacao { flex: 1; overflow-y: auto; padding: 12px 0; }

.secao-rotulo {
  padding: 14px 18px 6px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.38);
}
/* O rótulo da seção some com a barra fechada — sem espaço, viraria sopa. */
.barra-lateral.fechada .secao-rotulo { display: none; }
.barra-lateral.fechada .navegacao > div + div { border-top: 1px solid rgba(255,255,255,.07); margin-top: 6px; padding-top: 6px; }

.item-menu {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 10px 18px; border: 0; background: none;
  color: rgba(255,255,255,.78); font: inherit; font-size: 14px;
  text-align: left; cursor: pointer;
  border-left: 3px solid transparent;
}
.item-menu:hover { background: rgba(255,255,255,.06); color: #fff; }
.item-menu.ativa {
  background: rgba(255,255,255,.09); color: #fff; font-weight: 600;
  border-left-color: var(--marca, #6fa0f5);
}
.item-menu .ico {
  width: 20px; flex: 0 0 20px; text-align: center; font-size: 15px; opacity: .9;
}
.barra-lateral.fechada .item-menu { justify-content: center; padding: 11px 0; }
.barra-lateral.fechada .item-menu .rotulo { display: none; }

.rodape-barra { border-top: 1px solid rgba(255,255,255,.08); padding: 12px; }

.cracha { display: flex; align-items: center; gap: 10px; padding: 6px; min-width: 0; }
.iniciais {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%;
  background: var(--marca, #1f5fd0); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 700;
}
.cracha-texto { display: flex; flex-direction: column; min-width: 0; }
.cracha-nome  { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cracha-email { font-size: 11.5px; color: rgba(255,255,255,.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cracha-perfil {
  font-size: 10.5px; margin-top: 2px; color: var(--marca, #6fa0f5);
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.barra-lateral.fechada .cracha-texto { display: none; }
.barra-lateral.fechada .cracha { justify-content: center; }

.sair {
  display: flex; align-items: center; gap: 12px; width: 100%;
  margin-top: 6px; padding: 9px 12px; border: 0; border-radius: 8px;
  background: none; color: rgba(255,255,255,.6); font: inherit; font-size: 13.5px;
  cursor: pointer;
}
.sair:hover { background: rgba(255,255,255,.07); color: #fff; }
.sair .ico { width: 20px; flex: 0 0 20px; text-align: center; }
.barra-lateral.fechada .sair { justify-content: center; padding: 9px 0; }
.barra-lateral.fechada .sair .rotulo { display: none; }

.area { flex: 1; min-width: 0; background: var(--fundo); }

/* sem acesso (§5) */
.sem-acesso {
  max-width: 480px; margin: 12vh auto; text-align: center;
  background: var(--papel); border: 1px solid var(--borda);
  border-radius: 12px; padding: 36px 28px;
}
.sem-acesso h1 { margin: 0 0 10px; font-size: 20px; }
.sem-acesso p { margin: 0 0 8px; font-size: 14px; }
.sem-acesso .detalhe { color: var(--fraco); font-size: 13px; }

/* perfis */
.colunas-perfis { display: grid; gap: 16px; grid-template-columns: minmax(240px, 320px) 1fr; align-items: start; }
@media (max-width: 800px) { .colunas-perfis { grid-template-columns: 1fr; } }

.perfil-linha {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 12px 14px; margin-bottom: 6px; text-align: left;
  background: var(--papel); border: 1px solid var(--borda);
  border-radius: 10px; color: var(--texto); font: inherit; cursor: pointer;
}
.perfil-linha.ativa { border-color: var(--azul); box-shadow: 0 0 0 1px var(--azul) inset; }
.perfil-linha .conta { margin-left: auto; }

.grupo-permissao { margin-bottom: 18px; }
.grupo-permissao h3 {
  margin: 0 0 8px; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fraco);
}
.permissao {
  background: var(--papel); border: 1px solid var(--borda);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 8px;
}
.permissao > label { display: flex; align-items: center; gap: 9px; margin: 0; font-weight: 600; font-size: 14px; }
.permissao .acoes-lista { margin: 8px 0 0 26px; display: flex; flex-direction: column; gap: 7px; }
.permissao .acoes-lista label { display: flex; align-items: baseline; gap: 9px; margin: 0; font-size: 13px; font-weight: 400; color: var(--fraco); }
.permissao .acoes-lista label.desligada { opacity: .45; }
.permissao input[type=checkbox] { width: auto; margin: 0; flex: 0 0 auto; }
.permissao .ajuda-acao { display: block; font-size: 11.5px; color: var(--fraco); }

.pagina { padding: 20px; max-width: 1100px; margin: 0 auto; }

/* bots */
.grade { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.bot {
  background: var(--papel); border: 1px solid var(--borda); border-radius: 12px; padding: 18px;
}
.bot h2 { margin: 0 0 2px; font-size: 17px; }
.bot .numero { font-family: var(--mono); font-size: 13px; color: var(--fraco); }

.selo {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 12px 0; padding: 4px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600;
}
.selo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.selo.on      { color: var(--verde);    background: color-mix(in srgb, var(--verde) 12%, transparent); }
.selo.off     { color: var(--vermelho); background: color-mix(in srgb, var(--vermelho) 12%, transparent); }
.selo.duvida  { color: var(--ambar);    background: color-mix(in srgb, var(--ambar) 14%, transparent); }
.selo.pausado { color: var(--ambar);    background: color-mix(in srgb, var(--ambar) 14%, transparent); }

.detalhe { font-size: 12.5px; color: var(--fraco); margin: 6px 0 0; }
.acoes { margin-top: 16px; display: flex; gap: 8px; }
.acoes button { flex: 1; }
.perigo { background: var(--vermelho); }

/* filtros */
.filtros {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: end;
  background: var(--papel); border: 1px solid var(--borda);
  border-radius: 12px; padding: 16px; margin-bottom: 16px;
}
.filtros label { margin: 0; flex: 1 1 150px; }
.filtros .principal { width: auto; flex: 0 0 auto; padding: 9px 20px; }

/* log */
.log {
  background: var(--papel); border: 1px solid var(--borda); border-radius: 12px;
  overflow: hidden;
}
.linha {
  display: grid; grid-template-columns: 84px 92px 1fr; gap: 12px;
  padding: 7px 14px; border-top: 1px solid var(--borda);
  font-family: var(--mono); font-size: 12.5px;
}
.linha:first-child { border-top: 0; }
.linha .hora { color: var(--fraco); }
.linha .origem { color: var(--azul); }
/* pre-wrap: o log tem quebra de linha significativa (resumo de e-mail, JSON) */
.linha .txt { white-space: pre-wrap; word-break: break-word; }

.dia-marco {
  padding: 8px 14px; border-top: 1px solid var(--borda);
  background: var(--fundo); font-size: 12px; font-weight: 700;
  color: var(--fraco); text-transform: uppercase; letter-spacing: .04em;
}

table { width: 100%; border-collapse: collapse; background: var(--papel); border-radius: 12px; overflow: hidden; }
th, td { padding: 10px 14px; text-align: left; border-top: 1px solid var(--borda); font-size: 13.5px; }
th { background: var(--fundo); font-size: 12px; color: var(--fraco); text-transform: uppercase; letter-spacing: .04em; }

@media (max-width: 600px) {
  .linha { grid-template-columns: 68px 1fr; }
  .linha .origem { display: none; }
  .barra-lateral { position: fixed; z-index: 20; }
  .barra-lateral:not(.fechada) { box-shadow: 0 0 0 100vmax rgba(0,0,0,.45); }
  .area { margin-left: 72px; }
}

/* atividade */
.grupo { margin-bottom: 26px; }
.grupo h2 {
  margin: 0 0 10px; font-size: 15px; display: flex; align-items: center; gap: 8px;
}
.conta {
  padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: var(--fundo); border: 1px solid var(--borda); color: var(--fraco);
}
.conta.tem { background: var(--azul); border-color: var(--azul); color: #fff; }

.item {
  background: var(--papel); border: 1px solid var(--borda);
  border-radius: 10px; padding: 13px 15px; margin-bottom: 8px;
}
.item .linha1 { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.item .quando { font-weight: 600; font-size: 13.5px; }
.item .quem { color: var(--fraco); font-size: 13px; }
/* pre-wrap: o texto de cobrança tem quebras de linha que fazem parte da mensagem */
.item .corpo { margin-top: 6px; font-size: 13.5px; white-space: pre-wrap; word-break: break-word; }
.item .rodape { margin-top: 8px; font-size: 12px; color: var(--fraco); }
.item.encerrado { opacity: .58; }

.etiqueta {
  padding: 1px 7px; border-radius: 5px; font-size: 11.5px; font-weight: 600;
  background: var(--fundo); border: 1px solid var(--borda); color: var(--fraco);
}
.etiqueta.viva  { color: var(--verde);  border-color: currentColor; }
.etiqueta.atras { color: var(--vermelho); border-color: currentColor; }

.caixa { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.caixa input { width: auto; margin: 0; }
.vazio { color: var(--fraco); font-size: 13.5px; padding: 4px 0 12px; }

.link.perigoso { color: var(--vermelho); padding: 4px 10px; margin-left: -10px; }
.link.perigoso:hover { background: color-mix(in srgb, var(--vermelho) 10%, transparent); }
.link.perigoso:disabled { opacity: .5; cursor: default; }

/* cadastro de bot */
.barra { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.barra h1 { margin: 0; font-size: 19px; }
.principal.estreito { width: auto; padding: 9px 20px; }

.cartao-largo {
  background: var(--papel); border: 1px solid var(--borda);
  border-radius: 12px; padding: 20px; margin-bottom: 16px;
}
.cartao-largo h2 { margin: 0 0 4px; font-size: 15.5px; }
.cartao-largo .resumo { margin: 0 0 16px; font-size: 13px; color: var(--fraco); }

.campos { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.campos label { margin: 0; color: var(--texto); font-size: 13.5px; font-weight: 500; }
.campos small {
  display: block; margin-top: 5px; font-size: 12px; line-height: 1.45;
  color: var(--fraco); font-weight: 400;
}
.campos small strong { color: var(--texto); }

.onde {
  display: block; margin-top: 5px; font-size: 12px; line-height: 1.45;
  padding: 7px 9px; border-radius: 7px;
  background: var(--fundo); border: 1px solid var(--borda); color: var(--fraco);
}
.onde b { color: var(--texto); font-weight: 600; }
.onde a { color: var(--azul); }

.guardado { font-size: 11.5px; color: var(--verde); margin-top: 4px; font-family: var(--mono); }
.opcional { font-size: 11.5px; font-weight: 600; color: var(--fraco); }
.nota-grupo {
  margin: 14px 0 0; padding: 10px 12px; border-radius: 8px; font-size: 12.5px;
  background: color-mix(in srgb, var(--ambar) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--ambar) 35%, transparent);
}
.caixa-url {
  margin-top: 12px; padding: 12px; border-radius: 8px;
  background: var(--fundo); border: 1px solid var(--borda);
  font-family: var(--mono); font-size: 12.5px; word-break: break-all;
}

/* aparência */
.colunas-aparencia { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.par-cor { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.par-cor input[type=color] {
  width: 44px; height: 38px; padding: 2px; flex: 0 0 44px; cursor: pointer;
}
.par-cor input[type=text] { margin-top: 0; font-family: var(--mono); }

/* Grudada no rodapé: numa tela com muitos campos, o botão no fim de uma coluna
   longa some da vista e a pessoa edita sem achar como gravar. */
.barra-salvar {
  position: sticky; bottom: 0; z-index: 4;
  display: flex; align-items: center; gap: 12px;
  margin: 16px -20px -20px; padding: 14px 20px;
  background: var(--papel); border-top: 1px solid var(--borda);
}
.barra-salvar .recado { margin: 0; }

/* ── autorização da agenda ──
   Bloco dentro do grupo "Google Agenda": é a única credencial que não se
   digita, então precisa de um botão onde os outros têm um campo. */
.bloco-agenda {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--borda);
  border-radius: 10px;
  /* Tons do tema, não rgba fixo: rgba(255,255,255,…) some no tema claro,
     que é o padrão — o bloco ficaria invisível para quem não usa modo escuro. */
  background: var(--fundo);
}
.bloco-agenda .onde { margin: 0 0 .6rem; }
.bloco-agenda code {
  font-family: var(--mono);
  font-size: .85em;
  padding: .1rem .35rem;
  border-radius: 5px;
  background: var(--papel);
  border: 1px solid var(--borda);
  /* URI longa não pode empurrar a coluna e criar barra horizontal na página. */
  word-break: break-all;
}
.bloco-agenda .situacao-agenda { margin: .2rem 0 .9rem; font-size: .94em; }
.bloco-agenda .situacao-agenda.bom::before { content: '\2713\00a0\00a0'; }
.bloco-agenda .situacao-agenda.bom { color: var(--verde); }
.bloco-agenda .situacao-agenda.pendente { color: var(--fraco); }
.bloco-agenda .nota-grupo { margin: .2rem 0 .8rem; }
.bloco-agenda .aviso { margin: 0 0 .8rem; color: var(--vermelho); }