/* Aparência da ferramenta.

   Tudo sai das variáveis abaixo: trocar uma cor aqui muda a ferramenta inteira.
   O tema escuro é o mesmo conjunto de variáveis com outros valores, ligado por
   data-tema="escuro" no <html>.

   A cor de destaque (--acento) é a da conta de quem está usando, e as variações
   dela saem sozinhas com color-mix — por isso qualquer cor escolhida continua
   funcionando sem precisar de uma paleta pronta. */

:root{
  --tinta:#18181d;
  --tinta-fraca:#51515f;
  --cinza:#7b7b8a;
  --linha:#e9e9ef;
  --linha-forte:#d9d9e3;
  --fundo:#f8f8fa;
  --papel:#ffffff;
  --papel-2:#f3f3f7;

  --acento:#e23b50;
  --acento-fraco:color-mix(in srgb, var(--acento) 12%, var(--papel));
  --acento-borda:color-mix(in srgb, var(--acento) 32%, var(--papel));
  --acento-escuro:color-mix(in srgb, var(--acento) 82%, #000);
  --acento-texto:var(--acento);

  --alerta:#8a5a00;      --alerta-fundo:#fdf6e6;  --alerta-borda:#f0e0bb;
  --erro:#b02a2a;        --erro-fundo:#fcedec;    --erro-borda:#f0cdcb;
  --ok:#1f7a4d;          --ok-fundo:#ebf6f0;      --ok-borda:#cfe3d8;

  --sombra-1:0 1px 2px rgba(18,18,28,.05);
  --sombra-2:0 6px 20px rgba(18,18,28,.08);
  --sombra-3:0 20px 54px rgba(18,18,28,.20);

  --r1:9px; --r2:13px; --r3:18px;
  --lateral:286px;
  --direita:420px;

  /* A lateral escura e os cartoes pastel sao os mesmos nos dois temas. */
  --escuro:#14141c;
  --escuro-2:#20202b;
  --escuro-linha:#2a2a38;
  --escuro-tinta:#eceaf2;
  --escuro-cinza:#9a99ab;
  --cartao-rosa:#fdf0f2;
  --cartao-azul:#eef4fd;
}

html[data-tema="escuro"]{
  --cartao-rosa:#241a1e;
  --cartao-azul:#16202e;
  --tinta:#f3f3f7;
  --tinta-fraca:#b9b9c8;
  --cinza:#8f8f9f;
  --linha:#2a2a34;
  --linha-forte:#3a3a46;
  --fundo:#0f0f14;
  --papel:#17171e;
  --papel-2:#1f1f28;

  --acento-fraco:color-mix(in srgb, var(--acento) 22%, var(--papel));
  --acento-borda:color-mix(in srgb, var(--acento) 45%, var(--papel));
  --acento-escuro:color-mix(in srgb, var(--acento) 78%, #fff);
  --acento-texto:color-mix(in srgb, var(--acento) 55%, #fff);

  --alerta:#f0c069;      --alerta-fundo:#2a2214;  --alerta-borda:#4a3c1e;
  --erro:#ff9a95;        --erro-fundo:#2c1817;    --erro-borda:#4d2523;
  --ok:#7fd3a6;          --ok-fundo:#13241b;      --ok-borda:#24402f;

  --sombra-1:0 1px 2px rgba(0,0,0,.4);
  --sombra-2:0 8px 24px rgba(0,0,0,.45);
  --sombra-3:0 24px 60px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Inter","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;
  background:var(--fundo);
  color:var(--tinta);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3{letter-spacing:-.015em;line-height:1.25}
a{color:var(--acento-texto)}

.escondido{display:none!important}
.cinza{color:var(--cinza)}
.miudo{font-size:13px}
.rotulo{font-size:11.5px;color:var(--cinza);text-transform:uppercase;letter-spacing:.6px;margin:24px 0 8px;font-weight:650}

/* O anel de foco aparece para quem navega pelo teclado e some para o mouse. */
:focus-visible{outline:2px solid var(--acento);outline-offset:2px;border-radius:4px}

/* ---------------------------------------------------------- campos */
.controles-fonte{display:flex;flex-direction:column;gap:9px}
.linha-fonte{display:flex;gap:8px}
select,input[type=text],input[type=password],input[type=email],textarea{
  padding:10px 12px;border:1px solid var(--linha-forte);border-radius:var(--r1);
  font:inherit;background:var(--papel);color:var(--tinta);width:100%;
  transition:border-color .15s ease, box-shadow .15s ease;
}
select:hover,input:hover:not(:disabled){border-color:var(--cinza)}
select:focus,input:focus,textarea:focus{
  outline:none;border-color:var(--acento);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--acento) 18%, transparent);
}
::placeholder{color:color-mix(in srgb, var(--cinza) 70%, transparent)}

.pilula{
  display:flex;align-items:center;gap:7px;white-space:nowrap;
  padding:9px 13px;border:1px solid var(--linha-forte);border-radius:999px;
  background:var(--papel);color:var(--tinta-fraca);font:inherit;font-size:13px;cursor:pointer;
  transition:all .15s ease;
}
.pilula:hover{border-color:var(--cinza)}
.pilula .ponto{width:8px;height:8px;border-radius:50%;background:var(--linha-forte);transition:background .15s ease}
.pilula.ligado{border-color:var(--acento-borda);color:var(--acento-texto);background:var(--acento-fraco)}
.pilula.ligado .ponto{background:var(--acento);box-shadow:0 0 0 3px color-mix(in srgb, var(--acento) 25%, transparent)}

/* ---------------------------------------------------------- botoes */
button{
  font:inherit;padding:9px 15px;border-radius:var(--r1);
  border:1px solid var(--linha-forte);background:var(--papel);color:var(--tinta);
  cursor:pointer;transition:all .15s ease;
}
button:hover:not(:disabled){border-color:var(--cinza);background:var(--papel-2)}
button:active:not(:disabled){transform:translateY(1px)}
button:disabled{opacity:.45;cursor:not-allowed}
button.principal{
  background:var(--acento);border-color:var(--acento);color:#fff;font-weight:600;
  box-shadow:0 1px 2px color-mix(in srgb, var(--acento) 40%, transparent);
}
button.principal:hover:not(:disabled){background:var(--acento-escuro);border-color:var(--acento-escuro)}
button.grande{padding:12px;width:100%;font-size:15px}
button.miudo{font-size:13px;padding:7px 11px;color:var(--tinta-fraca)}

/* ---------------------------------------------------------- lista */
.lista-topo{
  display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:var(--cinza);
  text-transform:uppercase;letter-spacing:.6px;font-weight:650;margin-top:8px;
}
.contagem{background:var(--papel-2);padding:2px 9px;border-radius:999px;letter-spacing:0;font-size:11px}
.busca{font-size:13.5px;padding:8px 11px}
.lista{flex:1;overflow-y:auto;margin:0 -6px;padding:0 6px}
.item{
  display:flex;gap:10px;align-items:flex-start;
  padding:11px;border-radius:var(--r1);cursor:pointer;margin-bottom:3px;
  border:1px solid transparent;transition:background .12s ease, border-color .12s ease;
}
.item:hover{background:var(--papel-2)}
.item.ativo{background:var(--acento-fraco);border-color:var(--acento-borda)}
.item input[type=checkbox]{margin:4px 0 0;width:auto;flex:0 0 auto;accent-color:var(--acento)}
.item-texto{min-width:0;flex:1}
.item-titulo{font-size:13.5px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.item-baixo{font-size:11.5px;color:var(--cinza);margin-top:4px;display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.selo{padding:2px 8px;border-radius:999px;font-size:10.5px;font-weight:650}
.selo.processando{background:var(--acento-fraco);color:var(--acento-texto)}
.selo.erro{background:var(--erro-fundo);color:var(--erro)}
.selo.conferir{background:var(--alerta-fundo);color:var(--alerta)}
.lista-vazia{font-size:13px;color:var(--cinza);padding:16px 4px}

/* ---------------------------------------------------------- avisos */
.aviso{padding:13px 15px;border-radius:var(--r1);font-size:14px;margin-bottom:20px;white-space:pre-wrap;border:1px solid transparent}
.aviso.erro{background:var(--erro-fundo);color:var(--erro);border-color:var(--erro-borda)}
.aviso.alerta{background:var(--alerta-fundo);color:var(--alerta);border-color:var(--alerta-borda)}
.aviso.ok{background:var(--ok-fundo);color:var(--ok);border-color:var(--ok-borda)}

/* ---------------------------------------------------------- gravando */
input.titulo-editavel{
  font-size:27px;font-weight:700;border:none;padding:4px 0;width:100%;
  background:transparent;letter-spacing:-.02em;color:var(--tinta);border-radius:0;
}
input.titulo-editavel:hover{border-color:transparent}
input.titulo-editavel:focus{outline:none;border-bottom:2px solid var(--acento);box-shadow:none}
.titulo-editavel::placeholder{color:color-mix(in srgb, var(--cinza) 55%, transparent)}
.medidor{height:8px;background:var(--papel-2);border-radius:999px;overflow:hidden;margin:22px 0 6px}
.medidor span{display:block;height:100%;width:0;background:var(--acento);transition:width .08s linear}
.campo-nota{padding:12px 14px;font-size:15px}
.notas{list-style:none;padding:0;margin:14px 0 0}
.notas li{padding:10px 0;border-bottom:1px solid var(--linha);font-size:14px;display:flex;gap:12px}
.notas li b{color:var(--acento-texto);font-variant-numeric:tabular-nums;font-weight:650;flex:0 0 auto}
.miniaturas{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.miniaturas figure{margin:0;width:132px}
.miniaturas img{width:100%;border:1px solid var(--linha);border-radius:var(--r1);display:block;box-shadow:var(--sombra-1)}
.miniaturas figcaption{font-size:11px;color:var(--cinza);text-align:center;margin-top:4px}

/* ---------------------------------------------------------- barra flutuante */
.barra-flutuante{
  position:fixed;left:50%;bottom:28px;transform:translateX(-50%);
  display:flex;align-items:center;gap:8px;
  background:rgba(20,20,26,.94);backdrop-filter:blur(10px);
  color:#fff;padding:10px 13px;border-radius:var(--r3);
  box-shadow:var(--sombra-3);z-index:50;
}
.barra-flutuante .relogio{font-variant-numeric:tabular-nums;font-weight:700;font-size:16.5px;padding:0 8px;letter-spacing:.5px}
.barra-flutuante button{background:rgba(255,255,255,.1);border:none;color:#fff;font-size:13px;padding:8px 14px;display:inline-flex;align-items:center;gap:6px}
.barra-flutuante button:hover{background:rgba(255,255,255,.2)}
.barra-flutuante button.parar{background:#d93a3a}
.barra-flutuante button.parar:hover{background:#ef4c4c}
.barra-flutuante button.print{background:var(--acento);font-weight:600}
.barra-flutuante button.print:hover{background:var(--acento-escuro)}
.barra-flutuante button.fixar{background:transparent;color:rgba(255,255,255,.65);font-size:12px;padding:8px 9px}
.barra-flutuante button.fixar:hover{background:rgba(255,255,255,.14);color:#fff}
.barra-status{font-size:12px;color:#cbbcff;min-width:0;white-space:nowrap}
.barra-status:empty{display:none}
.barra-som{font-size:12px;color:#ffcf66;font-weight:600;white-space:nowrap}
.barra-som:empty{display:none}

/* Quando a barra vai para a janelinha flutuante do Chrome, ela ocupa a janela
   inteira em vez de ficar presa no rodape da pagina. */
body.janela-barra{margin:0;background:#14141a;overflow:hidden}
.barra-flutuante.na-janela{
  position:static;transform:none;left:auto;bottom:auto;
  width:100vw;height:100vh;border-radius:0;box-shadow:none;backdrop-filter:none;
  justify-content:center;flex-wrap:wrap;padding:8px;
}
.barra-flutuante.na-janela .fixar{display:none}

/* ---------------------------------------------------------- ata */
.acoes-ata{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.corpo-ata{font-size:15.5px;line-height:1.7;max-width:72ch}
.corpo-ata h2{font-size:17px;margin:34px 0 12px;padding-top:22px;border-top:1px solid var(--linha);font-weight:650}
.corpo-ata h3{font-size:15px;margin:20px 0 6px}
.corpo-ata ul{padding-left:22px}
.corpo-ata li{margin:5px 0}
.corpo-ata table{width:100%;border-collapse:collapse;font-size:14px;margin-top:12px}
.corpo-ata th,.corpo-ata td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--linha);vertical-align:top}
.corpo-ata th{font-size:11.5px;color:var(--cinza);text-transform:uppercase;letter-spacing:.5px;font-weight:650}
.corpo-ata tr:hover td{background:var(--papel-2)}
.corpo-ata .data-ata{font-weight:650;margin:0 0 6px;color:var(--tinta-fraca)}

pre.transcricao{
  white-space:pre-wrap;font-family:ui-monospace,"Cascadia Code",Consolas,monospace;
  font-size:13px;line-height:1.8;background:var(--papel);border:1px solid var(--linha);
  padding:18px;border-radius:var(--r2);max-height:460px;overflow:auto;
}
details{margin-top:22px}
summary{cursor:pointer;font-weight:600;font-size:14px;color:var(--cinza)}
summary:hover{color:var(--tinta)}

.importar{margin-top:32px;padding-top:24px;border-top:1px solid var(--linha);display:flex;flex-direction:column;gap:10px;align-items:center}

/* ---------------------------------------------------------- analise em topicos */
.analise .tema{border-left:3px solid var(--acento);padding:2px 0 2px 16px;margin:18px 0}
.analise .tema h3{margin:0 0 8px;font-size:15.5px}
.analise .tema p{margin:7px 0;line-height:1.65}
.rotulo-analise{display:block;font-size:10.5px;font-weight:700;color:var(--acento-texto);text-transform:uppercase;letter-spacing:.6px;margin-bottom:2px}

/* ---------------------------------------------------------- entrada e contas */
.entrada{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--fundo)}
.caixa-entrada{
  background:var(--papel);border:1px solid var(--linha);border-radius:var(--r3);
  padding:34px 32px;width:100%;max-width:392px;box-shadow:var(--sombra-2);
}
.caixa-entrada h1{font-size:22px;margin:0 0 6px}
.caixa-entrada input{margin:0 0 11px}
.caixa-entrada button{width:100%}

.abas-entrada{display:flex;gap:4px;background:var(--papel-2);border-radius:var(--r1);padding:4px;margin:16px 0}
.abas-entrada .aba{flex:1;border:0;background:none;padding:8px;border-radius:7px;font:inherit;font-size:13.5px;color:var(--cinza);cursor:pointer}
.abas-entrada .aba:hover{background:transparent;color:var(--tinta)}
.abas-entrada .aba.atual{background:var(--papel);color:var(--tinta);font-weight:650;box-shadow:var(--sombra-1)}

.caixa-entrada .google{
  width:100%;display:flex;align-items:center;justify-content:center;gap:9px;
  padding:11px;border:1px solid var(--linha-forte);border-radius:var(--r1);
  background:var(--papel);font:inherit;font-size:14px;cursor:pointer;
}
.caixa-entrada .google .g{font-weight:700;color:#4285f4}
.caixa-entrada .separador{position:relative;text-align:center;margin:16px 0;color:var(--cinza);font-size:12px}
.caixa-entrada .separador::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px solid var(--linha)}
.caixa-entrada .separador span{position:relative;background:var(--papel);padding:0 12px}

.janela{position:fixed;inset:0;background:rgba(10,10,16,.5);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:20px;z-index:60}
.caixa-janela{background:var(--papel);border:1px solid var(--linha);border-radius:var(--r3);max-width:540px;width:100%;max-height:90vh;overflow:auto;box-shadow:var(--sombra-3)}
.topo-janela{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--linha);position:sticky;top:0;background:var(--papel)}
.topo-janela h2{margin:0;font-size:17px}
.corpo-janela{padding:22px 24px 28px}
.corpo-janela .rotulo{display:block;font-size:11.5px;color:var(--cinza);margin:16px 0 6px;font-weight:650}
.linha-cores{display:flex;gap:18px;align-items:flex-end;flex-wrap:wrap;margin-top:8px}
.linha-cores input[type=color]{width:58px;height:36px;padding:2px;border:1px solid var(--linha-forte);border-radius:var(--r1);background:var(--papel);cursor:pointer}
.linha-cores .amostra{padding:9px 18px;border-radius:999px;font-size:13px;font-weight:650;background:var(--acento);color:#fff}

.titulo-uso{font-size:14px;margin:28px 0 12px;font-weight:650}
.uso .barra-uso{height:8px;background:var(--papel-2);border-radius:999px;overflow:hidden;margin:7px 0 16px}
.uso .barra-uso span{display:block;height:100%;background:var(--acento);transition:width .3s ease}
.uso .barra-uso.cheia span{background:var(--erro)}
.uso .linha-uso{display:flex;justify-content:space-between;font-size:13px;gap:12px}
.uso .linha-uso b{font-weight:650}

.plano{display:flex;flex-direction:column;gap:10px;align-items:flex-start;
  background:var(--papel-2);border-radius:var(--r2);padding:16px}
.plano .principal{align-self:stretch}
.etiqueta-plano{
  display:inline-block;padding:3px 10px;border-radius:999px;font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;background:var(--acento);color:#fff;margin-right:6px;
}
.etiqueta-plano.gratis{background:var(--papel);color:var(--cinza);border:1px solid var(--linha-forte)}

/* ---------------------------------------------------------- compartilhar, audio, voz */
.caixa-link{margin:0 0 20px;padding:16px;border:1px solid var(--acento-borda);background:var(--acento-fraco);border-radius:var(--r2)}
.caixa-link .linha-link{display:flex;gap:8px;margin-top:10px}
.caixa-link input{font-size:13px}
.fila-envio{font-size:12px;color:var(--cinza);margin-top:10px}
.audios{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.audios audio{width:100%;height:38px}
button.perigo-texto{color:var(--erro);border-color:transparent;background:transparent}
button.perigo-texto:hover{border-color:var(--erro-borda);background:var(--erro-fundo)}

.voz{display:flex;align-items:center;gap:10px;margin-top:16px;flex-wrap:wrap}
.voz .ouvindo .ponto{animation:pulsar 1.4s ease-in-out infinite}
@keyframes pulsar{0%,100%{opacity:1}50%{opacity:.25}}
.toast{
  position:fixed;left:50%;top:24px;transform:translateX(-50%);
  background:rgba(20,20,26,.95);backdrop-filter:blur(8px);color:#fff;
  padding:11px 18px;border-radius:var(--r2);font-size:14px;
  box-shadow:var(--sombra-3);z-index:60;max-width:90vw;
}
.miniaturas figure.por-voz img{border-color:var(--acento)}

/* O video da captura nao pode ser display:none: o Chrome deixa de desenhar
   video escondido assim, e o print copiava um quadro vazio. Fica fora da
   vista, mas existindo. */
.quadro-oculto{position:fixed;left:-9999px;top:0;width:320px;height:180px;opacity:0;pointer-events:none}

/* ---------------------------------------------------------- video da reuniao */
.bloco-video{margin:18px 0 10px}
.bloco-video video{width:100%;max-height:520px;background:#000;border-radius:var(--r2);display:block}
.partes-video{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;align-items:center}
.partes-video button{font-size:12px;padding:5px 11px}
.partes-video button.atual{background:var(--acento);border-color:var(--acento);color:#fff}
.partes-video .cinza{margin-right:4px}

/* ================================================================ casca

   Barra lateral escura fixa, miolo claro com topo de busca, e uma coluna de
   cartões à direita. A lateral é escura nos dois temas: é a moldura do
   produto, e manter a cor dela firme dá o contraste que a tela precisa. */

.painel{display:flex;height:100vh;overflow:hidden;background:var(--fundo)}

/* ---------------------------------------------------------- lateral */
.lateral{
  width:var(--lateral);flex:0 0 var(--lateral);
  background:var(--escuro);color:var(--escuro-tinta);
  display:flex;flex-direction:column;gap:6px;padding:22px 16px 16px;
  border-right:1px solid var(--escuro-linha);
}
.marca{display:flex;gap:12px;align-items:center;padding:0 8px 20px}
.marca-icone{
  width:42px;height:42px;flex:0 0 42px;border-radius:13px;
  display:grid;place-items:center;color:var(--acento);
  background:color-mix(in srgb, var(--acento) 18%, transparent);
}
.marca-texto{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.marca-texto strong{font-size:17px;font-weight:700;letter-spacing:-.01em}
.marca-texto small{font-size:11.5px;color:var(--escuro-cinza)}

.menu{display:flex;flex-direction:column;gap:3px}
.menu-titulo{
  font-size:10.5px;letter-spacing:.9px;text-transform:uppercase;font-weight:700;
  color:var(--escuro-cinza);margin:22px 10px 8px;
}
.menu-item{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:transparent;border:1px solid transparent;color:var(--escuro-tinta);
  padding:11px 12px;border-radius:12px;font-size:14.5px;cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.menu-item:hover:not(:disabled){background:var(--escuro-2);border-color:transparent}
.menu-item.atual{
  background:color-mix(in srgb, var(--acento) 16%, var(--escuro));
  border-color:color-mix(in srgb, var(--acento) 28%, transparent);
  font-weight:600;
}
.menu-icone{
  width:30px;height:30px;flex:0 0 30px;border-radius:9px;display:grid;place-items:center;
  background:var(--escuro-2);color:var(--escuro-tinta);
}
.menu-item.atual .menu-icone{background:var(--acento);color:#fff}
.menu-item .contagem{margin-left:auto;background:var(--escuro-2);color:var(--escuro-cinza)}

.lateral-rodape{
  margin-top:auto;display:flex;align-items:center;gap:11px;
  border-top:1px solid var(--escuro-linha);padding-top:14px;
}
.lateral-rodape .avatar{
  width:38px;height:38px;flex:0 0 38px;border-radius:50%;display:grid;place-items:center;
  background:var(--escuro-2);color:var(--escuro-cinza);
}
.lateral-rodape .quem{display:flex;flex-direction:column;line-height:1.3;min-width:0;flex:1}
.lateral-rodape .quem strong{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lateral-rodape .quem small{font-size:11.5px;color:var(--escuro-cinza)}
.lateral-rodape button{
  background:transparent;border-color:var(--escuro-linha);color:var(--escuro-cinza);padding:6px 10px;
}
.lateral-rodape button:hover{background:var(--escuro-2);color:#fff;border-color:var(--escuro-linha)}

/* ---------------------------------------------------------- miolo e topo */
.miolo{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--fundo)}
.topo{
  display:flex;align-items:center;gap:12px;padding:16px 26px;
  border-bottom:1px solid var(--linha);background:var(--papel);
}
.busca-topo{
  flex:1;max-width:620px;display:flex;align-items:center;gap:10px;
  background:var(--papel-2);border:1px solid transparent;border-radius:999px;
  padding:9px 16px;color:var(--cinza);transition:border-color .15s ease, background .15s ease;
}
.busca-topo:focus-within{border-color:var(--acento);background:var(--papel)}
.busca-topo input{border:none;background:transparent;padding:0;font-size:14px}
.busca-topo input:focus{box-shadow:none;border:none}
.icone-topo,.avatar-topo{
  width:40px;height:40px;padding:0;display:grid;place-items:center;border-radius:50%;
  color:var(--tinta-fraca);flex:0 0 auto;
}
.avatar-topo{background:var(--papel-2);border-color:transparent;color:var(--cinza);margin-left:auto}
.icone-topo{margin-left:auto}
.icone-topo + .avatar-topo{margin-left:0}

.colunas{flex:1;display:flex;min-height:0;overflow:hidden}
.conteudo{flex:1;overflow-y:auto;padding:38px 40px 140px;min-width:0}
.coluna-direita{
  width:var(--direita);flex:0 0 var(--direita);overflow-y:auto;
  padding:26px 26px 60px;border-left:1px solid var(--linha);
  display:flex;flex-direction:column;gap:18px;background:var(--fundo);
}

/* ---------------------------------------------------------- chamada */
.chamada{font-size:46px;line-height:1.05;margin:6px 0 14px;font-weight:800;letter-spacing:-.03em}
.chamada span{color:var(--acento)}
.chamada-sub{font-size:16.5px;color:var(--tinta-fraca);max-width:52ch;margin:0 0 26px}
.botoes-chamada{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px}
button.grande-chamada{
  display:inline-flex;align-items:center;gap:10px;padding:15px 24px;
  font-size:15.5px;font-weight:600;border-radius:14px;
}
button.principal.grande-chamada{box-shadow:0 6px 18px color-mix(in srgb, var(--acento) 35%, transparent)}
button.principal.grande-chamada .menu-icone{background:rgba(255,255,255,.22);color:#fff;width:28px;height:28px;flex:0 0 28px}

.faixa-motor{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:var(--papel);border:1px solid var(--linha);border-radius:14px;
  padding:13px 16px;margin:22px 0;max-width:720px;
}
.pastilha{
  font-size:12px;color:var(--cinza);background:var(--papel-2);
  border-radius:999px;padding:4px 12px;white-space:nowrap;
}
#tela-vazia .controles-fonte{max-width:520px}
#tela-vazia .importar{max-width:720px;align-items:flex-start;text-align:left}

/* ---------------------------------------------------------- cartoes */
.cartao{
  background:var(--papel);border:1px solid var(--linha);border-radius:16px;
  padding:18px;box-shadow:var(--sombra-1);
}
.cartao-topo{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cartao-topo strong{font-size:15px}
.ver-todas{
  display:inline-flex;align-items:center;gap:5px;border:none;background:transparent;
  color:var(--acento);font-size:13px;font-weight:600;padding:4px 6px;
}
.ver-todas:hover{background:var(--acento-fraco)}
.cartao-destaque,.cartao-dica{display:flex;gap:14px;align-items:flex-start}
.cartao-destaque strong,.cartao-dica strong{display:block;font-size:14.5px;margin-bottom:3px}
.cartao-destaque p,.cartao-dica p{margin:0;font-size:13.5px;color:var(--tinta-fraca);line-height:1.5}
.cartao-destaque{background:var(--cartao-rosa);border-color:transparent}
.cartao-dica{background:var(--cartao-azul);border-color:transparent}
.cartao-icone{
  width:38px;height:38px;flex:0 0 38px;border-radius:12px;display:grid;place-items:center;
  background:var(--papel);
}
.cartao-icone.rosa{color:var(--acento)}
.cartao-icone.azul{color:#2f6fd0}

.coluna-direita .lista{max-height:none;margin:0;padding:0}
.coluna-direita .item{padding:12px;border:1px solid var(--linha);margin-bottom:8px;background:var(--papel)}
.coluna-direita .item:hover{background:var(--papel-2);border-color:var(--linha-forte)}
.coluna-direita .item.ativo{background:var(--acento-fraco);border-color:var(--acento-borda)}

/* ---------------------------------------------------------- telas estreitas */
@media (max-width:1180px){
  .coluna-direita{display:none}
}
@media (max-width:860px){
  .painel{flex-direction:column;height:auto;overflow:visible}
  .lateral{width:100%;flex:none;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px;padding:14px}
  .marca{padding:0;flex:1}
  .menu{flex-direction:row;flex-wrap:wrap}
  .menu-titulo{display:none}
  .menu-item{width:auto}
  .lateral-rodape{margin:0;border:none;padding:0}
  .colunas{flex-direction:column;overflow:visible}
  .conteudo{padding:24px 18px 140px}
  .chamada{font-size:34px}
  .topo{padding:12px 16px}
}

/* Sem os modelos de IA carregados, a faixa ficaria com uma pastilha solta. */
.faixa-motor:has(#estado-motor:empty){display:none}

/* ================================================================ minha conta */
.titulo-pagina{font-size:34px;font-weight:800;letter-spacing:-.03em;margin:4px 0 6px}
#tela-conta{max-width:980px}
#tela-conta .cartao{padding:24px;margin-bottom:18px}
.titulo-cartao{font-size:16px;display:block}

.bloco-conta{display:flex;gap:30px;align-items:flex-start;flex-wrap:wrap}
.lado-logo{flex:0 0 220px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.lado-logo .miudo{margin:0}
.lado-campos{flex:1;min-width:260px;border-left:1px solid var(--linha);padding-left:30px}
.lado-campos .rotulo:first-child{margin-top:0}
.logo-previa{
  width:104px;height:104px;border-radius:50%;display:grid;place-items:center;overflow:hidden;
  background:var(--acento-fraco);color:var(--acento);
}
.logo-previa img{width:100%;height:100%;object-fit:cover}
.logo-previa.tem-logo{background:var(--papel-2)}
#botao-logo{display:inline-flex;align-items:center;gap:7px}

#tela-conta .linha-cores{align-items:flex-end;gap:26px}
#tela-conta .linha-cores .previa{display:flex;flex-direction:column}
#tela-conta .linha-cores .rotulo{margin:0 0 6px}
#tela-conta .linha-cores .principal{margin-left:auto;display:inline-flex;align-items:center;gap:8px}
#tela-conta .amostra{background:var(--acento);color:#fff}

.cartao-plano{display:flex;align-items:center;gap:16px;background:var(--cartao-rosa);border-color:transparent;flex-wrap:wrap}
.cartao-plano .plano-texto{flex:1;min-width:220px}
.cartao-plano .plano-texto strong{display:block;font-size:15.5px;margin-bottom:4px}
.cartao-plano .plano-texto p{margin:0;color:var(--tinta-fraca)}
.cartao-plano .principal{display:inline-flex;align-items:center;gap:8px}
.etiqueta-plano{vertical-align:middle}

.item-uso{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--linha)}
.item-uso:last-child{border-bottom:none}
.icone-uso{
  width:36px;height:36px;flex:0 0 36px;border-radius:11px;display:grid;place-items:center;
  background:var(--acento-fraco);color:var(--acento);
}
.rotulo-uso{flex:0 0 200px;font-size:14px}
.medida-uso{flex:1;display:flex;flex-direction:column;gap:6px;align-items:flex-end;min-width:140px}
.medida-uso b{font-size:13px;font-weight:650}
.medida-uso .barra-uso{width:100%;height:7px;background:var(--papel-2);border-radius:999px;overflow:hidden;margin:0}

@media (max-width:760px){
  .lado-campos{border-left:none;padding-left:0}
  .rotulo-uso{flex:1}
  .item-uso{flex-wrap:wrap}
}

body.tela-cheia .coluna-direita{display:none}
body.tela-cheia .conteudo{padding-right:48px}

/* Link escrito como texto, dentro de uma frase. */
button.elo{background:none;border:none;padding:0;color:var(--acento);font:inherit;font-size:inherit;text-decoration:underline;cursor:pointer}
button.elo:hover{background:none;border:none;color:var(--acento-escuro)}

/* ================================================================ página do cliente

   É a ata que o cliente abre pelo link: cabeçalho com a marca de quem gravou,
   um bloco por assunto com ícone, e os atalhos dos temas à direita.
   Sempre clara — é documento, e vira PDF. */
.pagina-cliente{background:var(--fundo)}
.topo-cliente{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:16px 28px;background:var(--papel);border-bottom:1px solid var(--linha);
}
.marca-cliente{display:flex;align-items:center;gap:12px;font-size:17px}
.marca-cliente .marca-icone{width:40px;height:40px;flex:0 0 40px;border-radius:12px;overflow:hidden}
.marca-cliente .marca-icone.tem-logo{background:var(--papel-2)}
.marca-cliente .marca-icone img{width:100%;height:100%;object-fit:cover}
.acoes-cliente{display:flex;gap:8px}
.aviso-cliente{max-width:900px;margin:40px auto;padding:0 24px}

.colunas-cliente{display:flex;gap:24px;align-items:flex-start;max-width:1320px;margin:0 auto;padding:28px 24px 90px}
.colunas-cliente .cartao-ata{
  flex:1;min-width:0;background:var(--papel);border:1px solid var(--linha);
  border-radius:20px;padding:34px 38px;box-shadow:var(--sombra-1);
}
.coluna-cliente{width:380px;flex:0 0 380px;display:flex;flex-direction:column;gap:14px;position:sticky;top:24px}

.cabeca-ata{display:flex;gap:16px;align-items:flex-start;margin-bottom:24px}
.icone-ata{
  width:52px;height:52px;flex:0 0 52px;border-radius:15px;display:grid;place-items:center;
  background:var(--acento-fraco);color:var(--acento);
}
.cabeca-ata h1{font-size:26px;line-height:1.25;margin:0 0 8px}
.meta-ata{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0;font-size:13px;color:var(--cinza)}
.meta-ata span + span::before{content:"·";margin-right:10px}
.meta-ata .selo-reuniao{
  background:var(--papel-2);border-radius:999px;padding:3px 11px;color:var(--tinta-fraca);font-weight:600;
}
.meta-ata .selo-reuniao::before{content:none}

.corpo-ata .data-ata{display:flex;flex-direction:column;gap:2px;margin:0 0 26px;font-weight:650}
.corpo-ata .data-ata span{font-size:11.5px;color:var(--cinza);text-transform:uppercase;letter-spacing:.6px;font-weight:650}

.tema-ata{display:flex;gap:16px;align-items:flex-start;padding:22px 0;border-top:1px solid var(--linha)}
.tema-ata:first-of-type{border-top:none;padding-top:4px}
.tema-ata .texto-tema{min-width:0;flex:1}
.tema-ata h2{font-size:17px;margin:2px 0 8px;padding:0;border:none}
.tema-ata p{margin:0;line-height:1.7}
.tema-ata ul{margin:4px 0 0;padding-left:20px}
.icone-tema{
  width:38px;height:38px;flex:0 0 38px;border-radius:12px;display:grid;place-items:center;
  background:var(--acento-fraco);color:var(--acento);
}
.icone-tema.rosa{background:#fdeef1;color:#d6365a}
.icone-tema.roxo{background:#f0ecfd;color:#6b4ee0}
.icone-tema.verde{background:#e9f6ef;color:#1f7a4d}
.icone-tema.azul{background:#eaf2fd;color:#2f6fd0}
.icone-tema.laranja{background:#fdf2e6;color:#b4610a}

.atalhos-temas{display:flex;flex-direction:column;gap:8px}
.atalho-tema{
  display:flex;gap:12px;align-items:center;text-align:left;width:100%;
  background:var(--papel);border:1px solid var(--linha);border-radius:14px;padding:14px;
}
.atalho-tema:hover{border-color:var(--linha-forte);background:var(--papel)}
.atalho-texto{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.atalho-texto strong{font-size:14px;line-height:1.3}
.atalho-texto small{font-size:12.5px;color:var(--tinta-fraca);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.atalho-seta{color:var(--cinza);font-size:20px;line-height:1}

@media (max-width:1100px){
  .coluna-cliente{display:none}
  .colunas-cliente .cartao-ata{padding:26px 22px}
}
@media print{
  .pagina-cliente{background:#fff}
  .topo-cliente,.coluna-cliente,.bloco-video{display:none}
  .colunas-cliente{padding:0}
  .colunas-cliente .cartao-ata{border:none;box-shadow:none;padding:0}
}

/* ================================================================ planos */
#tela-planos{max-width:900px}
.planos{display:flex;gap:18px;flex-wrap:wrap;margin:24px 0 18px}
.plano-cartao{
  flex:1;min-width:280px;background:var(--papel);border:1px solid var(--linha);
  border-radius:18px;padding:26px;position:relative;box-shadow:var(--sombra-1);
}
.plano-cartao.destaque{border-color:var(--acento-borda);box-shadow:var(--sombra-2)}
.plano-cartao.atual{background:var(--papel)}
.etiqueta-atual{
  position:absolute;top:-11px;left:26px;background:var(--acento);color:#fff;
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  padding:4px 11px;border-radius:999px;
}
.plano-nome{font-size:15px;color:var(--tinta-fraca);font-weight:650}
.plano-preco{font-size:34px;font-weight:800;letter-spacing:-.03em;margin:8px 0 18px;line-height:1.1}
.plano-preco small{display:block;font-size:13px;font-weight:500;color:var(--cinza);letter-spacing:0;margin-top:4px}
.plano-lista{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-direction:column;gap:10px}
.plano-lista li{display:flex;gap:10px;font-size:14px;line-height:1.5}
.plano-lista li::before{
  content:"";flex:0 0 18px;height:18px;margin-top:2px;border-radius:50%;
  background:var(--acento-fraco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e23b50' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M20 7 9 18l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;
}
.plano-cartao .principal{width:100%}

/* A marca vira botão de voltar ao início, sem parecer um botão. */
button.marca{
  width:100%;background:none;border:none;text-align:left;color:inherit;
  padding:0 8px 20px;border-radius:12px;
}
button.marca:hover{background:none;border:none}
button.marca:hover .marca-texto strong{color:#fff}
button.marca:active{transform:none}

/* ================================================================ ajuda */
#tela-ajuda{max-width:1000px}
.bloco-ajuda{display:flex;gap:32px;flex-wrap:wrap;padding:26px}
.duvidas{flex:1;min-width:300px}
.duvidas details{margin:12px 0;border-bottom:1px solid var(--linha);padding-bottom:12px}
.duvidas summary{font-weight:600;color:var(--tinta);font-size:14.5px}
.duvidas details p{margin:8px 0 0;font-size:14px;color:var(--tinta-fraca);line-height:1.6}
.chamado{flex:1;min-width:300px;border-left:1px solid var(--linha);padding-left:32px;display:flex;flex-direction:column}
.chamado textarea{resize:vertical;font:inherit;line-height:1.6}
.chamado .principal{margin-top:16px}
@media (max-width:860px){ .chamado{border-left:none;padding-left:0} }

/* ================================================================ aba das reuniões */
#tela-reunioes{max-width:1000px}
.topo-reunioes{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.topo-reunioes .chamada-sub{margin-bottom:0}
.busca-pagina{max-width:420px;margin:20px 0 18px;padding:11px 14px}
.grade-reunioes{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.cartao-reuniao{
  display:flex;flex-direction:column;gap:7px;align-items:flex-start;text-align:left;
  background:var(--papel);border:1px solid var(--linha);border-radius:14px;padding:16px;
  box-shadow:var(--sombra-1);
}
.cartao-reuniao:hover{border-color:var(--linha-forte);background:var(--papel)}
.cartao-reuniao.atual{border-color:var(--acento-borda);background:var(--acento-fraco)}
.cartao-reuniao strong{font-size:14.5px;line-height:1.4;font-weight:650}
.cartao-reuniao .item-baixo{margin:0}

/* ---------------------------------------------------------- fichas de acesso */
.linha-ficha{display:flex;gap:10px;flex-wrap:wrap}
.linha-ficha input{flex:1;min-width:220px}
.fichas{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.ficha{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--papel-2);border-radius:var(--r1);padding:10px 14px}
.ficha span{display:flex;flex-direction:column}
.ficha small{font-size:12px;color:var(--cinza)}
code.ficha-nova{display:block;margin-top:8px;padding:10px 12px;background:var(--papel-2);
  border-radius:var(--r1);font-family:ui-monospace,Consolas,monospace;font-size:12.5px;word-break:break-all}

.quem-sou{display:inline-block;background:var(--papel-2);border-radius:999px;padding:6px 14px;
  font-size:13px;color:var(--tinta-fraca);margin:0 0 18px}

.linha-senha{display:flex;gap:10px;flex-wrap:wrap}
.linha-senha input{flex:1;min-width:170px}