/*
 * CONTRASTE.
 *
 * A primeira versao usava cinzas suaves para o texto secundario, e no tema escuro
 * ficou apagado: rotulo de campo e detalhe da atividade sao textos pequenos, e texto
 * pequeno precisa de MAIS contraste, nao menos. Os tons abaixo foram escurecidos no
 * tema claro e clareados no escuro ate passarem folgado do minimo de leitura.
 */
:root {
  --fundo: #f6f6f4;
  --papel: #ffffff;
  --borda: #d9d7d1;
  --texto: #1c1b18;
  --texto-fraco: #5c5a53;
  --destaque: #2f6f4e;
  --destaque-fraco: #e8f1eb;
  --alerta: #a8452c;
  --alerta-fraco: #fbece8;
  --andamento: #1f6a8c;
  --andamento-fraco: #eef5f9;
  --alta: #a8452c;
  --media: #9a7b2f;
  --baixa: #5c5a53;
}

/*
 * O tema escuro, definido uma vez so e usado em dois casos.
 *
 * Sao tres situacoes possiveis, e por isso as duas regras abaixo:
 *   - a pessoa escolheu ESCURO      -> [data-tema="escuro"]
 *   - a pessoa escolheu CLARO       -> nao entra em nenhuma das duas
 *   - a pessoa nao escolheu nada    -> segue o computador dela
 *
 * A regra do computador vem guardada por :not([data-tema="claro"]) de proposito:
 * sem isso, quem escolhe claro num computador escuro nao consegue — a preferencia
 * do sistema venceria a escolha da pessoa.
 */
:root[data-tema='escuro'],
:root:not([data-tema='claro']) {
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) {
    --fundo: #191917;
    --papel: #232321;
    --borda: #3c3b36;
    --texto: #f2f0ea;
    --texto-fraco: #b5b1a6;
    --destaque: #6fbf92;
    --destaque-fraco: #23342b;
    --alerta: #e08d75;
    --alerta-fraco: #34241f;
    --andamento: #74b8d6;
    --andamento-fraco: #1e2a30;
    --alta: #e08d75;
    --media: #d5b463;
    --baixa: #b5b1a6;
  }
}

:root[data-tema='escuro'] {
  --fundo: #191917;
  --papel: #232321;
  --borda: #3c3b36;
  --texto: #f2f0ea;
  --texto-fraco: #b5b1a6;
  --destaque: #6fbf92;
  --destaque-fraco: #23342b;
  --alerta: #e08d75;
  --alerta-fraco: #34241f;
  --andamento: #74b8d6;
  --andamento-fraco: #1e2a30;
  --alta: #e08d75;
  --media: #d5b463;
  --baixa: #b5b1a6;
}

* {
  box-sizing: border-box;
}

/*
 * Esconder tem que ganhar de tudo.
 *
 * O atributo `hidden` do HTML esconde aplicando display:none — mas qualquer regra
 * nossa que defina display (flex, grid, block) vence esse padrao e o elemento
 * reaparece. Foi assim que os tres formularios da tela de entrada apareceram juntos.
 * Esta linha faz `hidden` significar escondido em qualquer caso.
 */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  padding: 0 0 4rem;
  background: var(--fundo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

/*
 * A LARGURA DE TRABALHO.
 *
 * Uma coluna estreita no meio de um monitor grande faz o sistema parecer um documento
 * perdido na tela. A barra do topo ocupa a largura inteira e ancora a pagina; o
 * conteudo respira ate 76rem e para ali — linha de texto larga demais cansa de ler,
 * e a lista de atividades e texto.
 */
:root {
  --largura-de-trabalho: 76rem;
}

/* A barra atravessa a tela inteira e fica grudada no topo ao rolar. */
.barra-do-topo {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--papel);
  border-bottom: 1px solid var(--borda);
  padding: 0.85rem 1.5rem;
}

.barra-do-topo .interno {
  max-width: var(--largura-de-trabalho);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.marca {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}

.marca h1 {
  margin: 0;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}

.marca .logo {
  margin-bottom: 0;
  max-height: 2.2rem;
}

main {
  max-width: var(--largura-de-trabalho);
  margin: 0 auto;
  padding: 1.5rem;
}

.instalar-app {
  border-color: var(--andamento);
  color: var(--andamento);
}

.tela-de-entrada > .instalar-app {
  position: fixed;
  right: 4rem;
  top: 1rem;
  z-index: 2;
}

.aviso-offline {
  text-align: center;
}

.aviso-offline img {
  border-radius: 1rem;
  margin-inline: auto;
}

/* ---------- a chave do tema ---------- */

.chave-tema {
  border: 1px solid var(--borda);
  border-radius: 50%;
  background: transparent;
  color: var(--texto-fraco);
  width: 1.7rem;
  height: 1.7rem;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}

.chave-tema:hover {
  border-color: var(--destaque);
  color: var(--destaque);
}

/* Na tela de entrada não há barra de atalhos: a chave fica no canto da página. */
.chave-solta {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 2;
}

/* ---------- a marca da empresa ---------- */

/*
 * A logo entra num quadro claro de propósito. Logo com letra escura some no tema
 * escuro, e a maioria das logos é feita para fundo branco — o quadro resolve isso
 * sem precisar de duas versões do arquivo.
 */
.logo {
  display: block;
  max-height: 2.6rem;
  max-width: 15rem;
  width: auto;
  margin-bottom: 0.6rem;
  background: #fff;
  border-radius: 6px;
  padding: 0.35rem 0.55rem;
}

.logo-entrada {
  max-height: 6rem;
  max-width: 12rem;
  margin: 0 auto 1rem;
  padding: 0.6rem;
}

/* ---------- tela de entrada ---------- */

.tela-de-entrada {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 1rem;
}

.caixa-de-entrada {
  width: 100%;
  max-width: 24rem;
}

.caixa-de-entrada h1 {
  margin: 0 0 1.25rem;
  font-size: 1.4rem;
  text-align: center;
}

.entrada {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 1.25rem;
}

.entrada label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.entrada label > span {
  font-size: 0.8rem;
  color: var(--texto-fraco);
}

.entrada small {
  color: var(--texto-fraco);
  font-size: 0.72rem;
  line-height: 1.35;
}

.entrada input {
  border: 1px solid var(--borda);
  border-radius: 6px;
  background: var(--fundo);
  color: var(--texto);
  font-family: inherit;
  font-size: 0.95rem;
  padding: 0.5rem 0.6rem;
}

.entrada input:focus {
  outline: none;
  border-color: var(--destaque);
}

.entrada button {
  margin-top: 0.35rem;
  border: 0;
  border-radius: 6px;
  background: var(--destaque);
  color: #fff;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.6rem 1rem;
  cursor: pointer;
}

.entrada button:hover {
  filter: brightness(1.08);
}

.explicacao {
  margin: 0 0 0.25rem;
  color: var(--texto-fraco);
  font-size: 0.85rem;
  line-height: 1.45;
}

.tela-de-entrada .aviso {
  margin-top: 1rem;
}

/* ---------- topo ---------- */

.topo {
  margin-bottom: 1.5rem;
}

.topo-linha {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.quem-sou {
  text-align: right;
  font-size: 0.85rem;
  color: var(--texto-fraco);
}

.atalhos {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.35rem;
}

.atalhos a,
.atalhos button {
  border: 0;
  background: none;
  padding: 0;
  color: var(--destaque);
  font-family: inherit;
  font-size: 0.85rem;
  text-decoration: none;
  cursor: pointer;
}

.atalhos a:hover,
.atalhos button:hover {
  text-decoration: underline;
}

.aviso-bom {
  background: var(--destaque-fraco);
  color: var(--destaque);
}

.marcador {
  flex-direction: row !important;
  align-items: center;
  gap: 0.4rem !important;
}

.marcador span {
  font-size: 0.8rem !important;
}

/* ---------- histórico por mês ---------- */

.mes {
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--papel);
  margin-bottom: 0.5rem;
  overflow: hidden;
}

.mes > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  color: var(--texto);
  font-size: 0.95rem;
  font-weight: 600;
  list-style: none;
  user-select: none;
}

.mes > summary::-webkit-details-marker {
  display: none;
}

/* A setinha que gira: fechada aponta para o lado, aberta aponta para baixo. */
.mes > summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 0.5rem;
  color: var(--texto-fraco);
  transition: transform 0.15s ease;
}

.mes[open] > summary::before {
  transform: rotate(90deg);
}

.mes > summary:hover {
  background: var(--destaque-fraco);
}

.contagem-do-mes {
  margin-left: auto;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--texto-fraco);
}

.mes > .lista {
  padding: 0 0.6rem 0.6rem;
}

@media (prefers-reduced-motion: reduce) {
  .mes > summary::before {
    transition: none;
  }
}

/* ---------- aba equipe ---------- */

.aba-equipe {
  margin-left: auto;
}

.pessoa {
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  margin-bottom: 0.6rem;
}

.pessoa h2 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

.resumo-da-pessoa {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--texto-fraco);
}

.lista-da-pessoa {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.lista-da-pessoa li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.pessoa:has(h2) .acoes-do-mural {
  display: inline-flex;
  gap: 0.3rem;
  flex: none;
}

.acoes-do-mural button,
.retorno {
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: transparent;
  color: var(--destaque);
  font-family: inherit;
  font-size: 0.76rem;
  padding: 0.25rem 0.55rem;
  cursor: pointer;
}

.acoes-do-mural button:hover,
.retorno:hover {
  border-color: var(--destaque);
  background: var(--destaque-fraco);
}

.etiqueta-retorno {
  color: var(--andamento);
}

.etiqueta-cronometro-esquecido,
.etiqueta-entrega-atrasada {
  border: 1px solid var(--alerta);
  border-radius: 999px;
  color: var(--alerta);
  font-weight: 600;
  padding: 0.12rem 0.45rem;
}

.lista-da-pessoa .marca {
  color: var(--texto-fraco);
}

.lista-da-pessoa .titulo {
  overflow-wrap: anywhere;
}

.lista-da-pessoa .meta {
  margin-left: auto;
  flex: none;
  font-size: 0.78rem;
  color: var(--texto-fraco);
}

.lista-da-pessoa .fazendo .marca {
  color: var(--andamento);
}

.lista-da-pessoa .atrasada .meta {
  color: var(--alerta);
}

/* ---------- ocultar dos colegas ---------- */

.ocultar {
  border: 0;
  background: none;
  padding: 0;
  color: var(--texto-fraco);
  font-family: inherit;
  font-size: 0.8rem;
  text-decoration: underline dotted;
  cursor: pointer;
}

.ocultar:hover {
  color: var(--texto);
}

.ocultar.ativa {
  color: var(--media);
  font-weight: 600;
  text-decoration: none;
}

.etiqueta-delegada {
  color: var(--andamento);
}

/* ---------- relatorios ---------- */

/* Os relatorios usam a mesma largura do resto: uma tela so, uma medida so. */
main.largo {
  max-width: var(--largura-de-trabalho);
}

.filtros-relatorio .registrar-detalhes {
  margin-top: 0;
}

.atalhos-de-periodo {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.85rem;
}

.atalhos-de-periodo button {
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: transparent;
  color: var(--texto-fraco);
  font-family: inherit;
  font-size: 0.82rem;
  padding: 0.28rem 0.8rem;
  cursor: pointer;
}

.atalhos-de-periodo button:hover {
  color: var(--destaque);
  border-color: var(--destaque);
}

.cartoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1rem;
}

.cartao {
  flex: 1 1 8rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 0.65rem 0.8rem;
}

.cartao strong {
  font-size: 1.15rem;
  font-weight: 600;
}

.cartao span {
  font-size: 0.75rem;
  color: var(--texto-fraco);
}

.cartao.tom-alerta strong {
  color: var(--alerta);
}

.cartao.tom-andamento strong {
  color: var(--andamento);
}

.pessoa .cartoes {
  margin-bottom: 0.5rem;
}

.nota-de-rodape {
  margin: 0 0 0.6rem;
  font-size: 0.78rem;
  color: var(--texto-fraco);
  line-height: 1.4;
}

details {
  margin-top: 0.4rem;
}

summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--destaque);
  padding: 0.2rem 0;
}

details .lista-da-pessoa {
  margin-top: 0.4rem;
  padding-left: 0.75rem;
  border-left: 2px solid var(--borda);
}

.lista-da-pessoa .clicavel {
  cursor: pointer;
  border-radius: 4px;
  padding: 0.15rem 0.3rem;
  margin-left: -0.3rem;
}

.lista-da-pessoa .clicavel:hover {
  background: var(--destaque-fraco);
}

/* ---------- tempo medio por atividade ---------- */

.titulo-de-secao {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 1.5rem 0 0.6rem;
}

.titulo-de-secao h2 {
  margin: 0;
  font-size: 1.05rem;
}

.agrupar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.agrupar span {
  font-size: 0.78rem;
  color: var(--texto-fraco);
}

.controles-da-media,
.somente-recorrentes {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.somente-recorrentes {
  gap: 0.35rem;
  color: var(--texto-fraco);
  font-size: 0.78rem;
}

.somente-recorrentes input {
  accent-color: var(--destaque);
}

@media (max-width: 720px) {
  .controles-da-media {
    align-items: flex-start;
    flex-direction: column;
  }
}

.rolagem {
  overflow-x: auto;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--papel);
}

.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.tabela th,
.tabela td {
  text-align: left;
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--borda);
  white-space: nowrap;
}

.tabela th {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--texto-fraco);
}

.tabela tbody tr:last-child td {
  border-bottom: 0;
}

.tabela td:first-child {
  white-space: normal;
  min-width: 12rem;
}

.tabela .destaque {
  font-weight: 600;
}

.tabela .fora-da-curva {
  color: var(--alerta);
  font-weight: 600;
}

.tabela .quem {
  color: var(--texto-fraco);
  white-space: normal;
}

/* ---------- ficha de uma atividade ---------- */

dialog#ficha {
  width: min(34rem, calc(100vw - 2rem));
  border: 1px solid var(--borda);
  border-radius: 12px;
  background: var(--papel);
  color: var(--texto);
  padding: 1.5rem;
}

dialog#ficha::backdrop {
  background: rgba(0, 0, 0, 0.55);
}

dialog#ficha h2 {
  margin: 0 0 0.9rem;
  font-size: 1.15rem;
  padding-right: 1.5rem;
}

dialog#ficha h3 {
  margin: 1.1rem 0 0.4rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--texto-fraco);
}

.fechar-ficha {
  position: absolute;
  top: 0.9rem;
  right: 1rem;
  border: 0;
  background: none;
  color: var(--texto-fraco);
  font-size: 1rem;
  cursor: pointer;
}

.fechar-ficha:hover {
  color: var(--texto);
}

.linha-da-ficha {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--borda);
  font-size: 0.87rem;
}

.linha-da-ficha span {
  color: var(--texto-fraco);
}

.linha-da-ficha strong {
  font-weight: 600;
  text-align: right;
}

dialog#ficha .cartoes {
  margin: 1rem 0 0;
}

.trechos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
}

.trechos li {
  padding-left: 0.6rem;
  border-left: 2px solid var(--borda);
}

.trechos .correndo {
  border-left-color: var(--andamento);
  color: var(--andamento);
  font-weight: 600;
}

.topo h1 {
  margin: 0;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}

.data-de-hoje {
  margin: 0.15rem 0 0;
  color: var(--texto-fraco);
  font-size: 0.9rem;
}

/* A linha do tempo produtivo, agora abaixo da barra, dentro da área de trabalho. */
.tempos {
  margin: 0 0 1rem;
  padding: 0.5rem 0.85rem;
  background: var(--andamento-fraco);
  border: 1px solid var(--borda);
  border-radius: 8px;
  color: var(--andamento);
  font-size: 0.85rem;
}

/* ---------- registrar ---------- */

.registrar {
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 1rem;
  margin-bottom: 1.25rem;
}

/* ---------- ditar em vez de digitar ---------- */

.campo-com-voz {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.campo-com-voz input {
  flex: 1;
  min-width: 0;
}

.voz {
  flex: none;
  border: 1px solid var(--borda);
  border-radius: 50%;
  background: transparent;
  width: 2.1rem;
  height: 2.1rem;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.voz:hover {
  border-color: var(--destaque);
}

.voz.ouvindo {
  border-color: var(--alerta);
  background: var(--alerta-fraco);
  animation: pulsando 1.2s ease-in-out infinite;
}

@keyframes pulsando {
  50% {
    opacity: 0.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  .voz.ouvindo {
    animation: none;
  }
}

.dica-voz {
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
  color: var(--texto-fraco);
}

.dica-voz.boa {
  color: var(--destaque);
}

.dica-voz.ruim {
  color: var(--alerta);
}

.registrar input[type="text"] {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--borda);
  background: transparent;
  color: var(--texto);
  font-size: 1.05rem;
  font-family: inherit;
  padding: 0.4rem 0 0.6rem;
}

.registrar input[type="text"]:focus {
  outline: none;
  border-bottom-color: var(--destaque);
}

.campo-observacao {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--borda);
  background: transparent;
  color: var(--texto-fraco);
  font-family: inherit;
  font-size: 0.9rem;
  padding: 0.5rem 0 0.5rem;
}

.campo-observacao:focus {
  outline: none;
  color: var(--texto);
  border-bottom-color: var(--destaque);
}

.registrar-detalhes {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  margin-top: 0.9rem;
}

.registrar-detalhes label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  /* Uma dica abaixo de um campo não pode empurrar a caixa dele para cima. */
  align-self: flex-start;
}

.registrar-detalhes span {
  font-size: 0.75rem;
  color: var(--texto-fraco);
}

.registrar-detalhes small {
  font-size: 0.7rem;
  color: var(--texto-fraco);
  line-height: 1.3;
}

.registrar-detalhes small a {
  color: var(--destaque);
}

.registrar-detalhes select:disabled {
  opacity: 0.7;
}

/*
 * Todos os campos de escolha seguem o tema.
 *
 * Antes a lista era so [type="date"] e select, e o campo de HORA ficava de fora:
 * ele caía no branco padrão do navegador e brilhava no tema escuro. Em vez de
 * listar tipo por tipo — e esquecer o próximo —, a regra agora pega qualquer
 * input do formulário que não seja caixinha de marcar.
 */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="number"],
input[type="search"],
input[type="file"],
select,
textarea {
  border: 1px solid var(--borda);
  border-radius: 6px;
  background: var(--fundo);
  color: var(--texto);
  font-family: inherit;
  font-size: 0.9rem;
  padding: 0.4rem 0.5rem;
}

/*
 * O reloginho e o calendário que o navegador desenha dentro do campo vêm pretos
 * por padrão — invisíveis no fundo escuro. `invert` os deixa claros, e só no
 * tema escuro, porque no claro eles já aparecem.
 */
:root[data-tema='escuro'] ::-webkit-calendar-picker-indicator {
  filter: invert(0.85);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) ::-webkit-calendar-picker-indicator {
    filter: invert(0.85);
  }
}

.registrar-detalhes button {
  margin-left: auto;
  border: 0;
  border-radius: 6px;
  background: var(--destaque);
  color: #fff;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.5rem 1.25rem;
  cursor: pointer;
}

.registrar-detalhes button:hover {
  filter: brightness(1.08);
}

/* ---------- aviso ---------- */

.aviso {
  margin: 0 0 1rem;
  padding: 0.6rem 0.85rem;
  border-radius: 8px;
  background: var(--alerta-fraco);
  color: var(--alerta);
  font-size: 0.9rem;
}

/* ---------- filtros ---------- */

/* Com dez abas, uma linha só não cabe mais nem no computador: elas quebram. */
.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.85rem;
}

.filtros button {
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: var(--papel);
  color: var(--texto-fraco);
  font-family: inherit;
  font-size: 0.88rem;
  padding: 0.32rem 0.9rem;
  cursor: pointer;
}

.filtros button:hover {
  color: var(--texto);
}

.filtros button.ativo {
  background: var(--destaque-fraco);
  border-color: var(--destaque);
  color: var(--destaque);
  font-weight: 600;
}

/* ---------- lembretes ---------- */

.lembretes {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.lembrete {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  background: var(--andamento-fraco);
  border: 1px solid var(--andamento);
  border-radius: 8px;
  padding: 0.6rem 0.85rem;
  font-size: 0.9rem;
}

.lembrete.atrasado {
  background: var(--alerta-fraco);
  border-color: var(--alerta);
}

.lembrete strong {
  font-size: 1rem;
  color: var(--andamento);
}

.lembrete.atrasado strong {
  color: var(--alerta);
}

.lembrete .titulo {
  flex: 1;
  min-width: 8rem;
  overflow-wrap: anywhere;
}

.lembrete .quando {
  font-size: 0.8rem;
  color: var(--texto-fraco);
}

.lembrete button {
  flex: none;
  border: 0;
  border-radius: 6px;
  background: var(--destaque);
  color: #fff;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.35rem 0.8rem;
  cursor: pointer;
}

.lembrete button:hover {
  filter: brightness(1.08);
}

.etiqueta-repete {
  color: var(--media);
}

/* Marca da atividade que eu pedi para outra pessoa: acompanho, não mexo. */
.marca-de-pedido {
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
  display: grid;
  place-items: center;
  color: var(--andamento);
  font-size: 0.95rem;
}

/* ---------- busca ---------- */

.barra-de-busca {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.barra-de-busca input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--borda);
  border-radius: 6px;
  background: var(--papel);
  color: var(--texto);
  font-family: inherit;
  font-size: 0.9rem;
  padding: 0.45rem 0.65rem;
}

.barra-de-busca input:focus {
  outline: none;
  border-color: var(--destaque);
}

.contagem {
  flex: none;
  font-size: 0.78rem;
  color: var(--texto-fraco);
}

.ver-mais {
  display: flex;
  justify-content: center;
  margin-top: 0.3rem;
}

.ver-mais button {
  border: 1px dashed var(--borda);
  border-radius: 8px;
  background: transparent;
  color: var(--destaque);
  font-family: inherit;
  font-size: 0.85rem;
  padding: 0.55rem 1.2rem;
  cursor: pointer;
  width: 100%;
}

.ver-mais button:hover {
  border-color: var(--destaque);
  background: var(--destaque-fraco);
}

/* ---------- lista ---------- */

.lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--papel);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--borda);
  border-radius: 8px;
  padding: 0.7rem 0.85rem;
}

.item.prioridade-alta {
  border-left-color: var(--alta);
}
.item.prioridade-media {
  border-left-color: var(--media);
}
.item.prioridade-baixa {
  border-left-color: var(--baixa);
}

.item.feita .titulo {
  text-decoration: line-through;
  color: var(--texto-fraco);
}

.item.fazendo {
  background: var(--andamento-fraco);
}

.marcar {
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
  border: 1.5px solid var(--borda);
  border-radius: 50%;
  background: transparent;
  color: var(--destaque);
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.marcar:hover {
  border-color: var(--destaque);
  background: var(--destaque-fraco);
}

.marcar.concluida {
  border-color: var(--destaque);
  background: var(--destaque-fraco);
}

/* Clicar de novo desmarca: no hover o certo some, para a volta ficar visível. */
.marcar.concluida:hover {
  border-color: var(--texto-fraco);
  background: transparent;
  color: transparent;
}

.corpo {
  flex: 1;
  min-width: 0;
}

.titulo {
  display: block;
  overflow-wrap: anywhere;
}

.detalhes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.15rem;
  font-size: 0.8rem;
  color: var(--texto-fraco);
}

.detalhes .p-alta {
  color: var(--alta);
  font-weight: 600;
}
.detalhes .p-media {
  color: var(--media);
}

.etiqueta-atrasada {
  color: var(--alerta);
  font-weight: 600;
}

/* Duas semanas paradas é outro problema: ganha fundo, não só cor de texto. */
.etiqueta-atrasada.muito-atrasada {
  background: var(--alerta-fraco);
  border-radius: 4px;
  padding: 0.05rem 0.35rem;
}

/* O número do ticket: presente, mas discreto — quem procura acha, quem não, não tropeça. */
.ticket {
  color: var(--texto-fraco);
  font-variant-numeric: tabular-nums;
}

.ticket-da-ficha {
  margin-left: 0.6rem;
  color: var(--texto-fraco);
  font-size: 0.85rem;
  font-weight: 400;
}

/* A aba de atrasadas carrega o número na própria etiqueta. */
.aba-atrasadas {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.contador-atrasadas {
  display: inline-grid;
  place-items: center;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--alerta);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
}

.etiqueta-fazendo {
  color: var(--andamento);
  font-weight: 600;
}

.andamento {
  flex: none;
  border: 1px solid var(--borda);
  border-radius: 6px;
  background: transparent;
  color: var(--texto-fraco);
  font-family: inherit;
  font-size: 0.82rem;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
}

.andamento:hover {
  color: var(--andamento);
  border-color: var(--andamento);
}

.andamento.ativo {
  border-color: var(--andamento);
  color: var(--andamento);
  font-weight: 600;
}

.observacao {
  margin: 0.35rem 0 0;
  padding-left: 0.6rem;
  border-left: 2px solid var(--borda);
  color: var(--texto-fraco);
  font-size: 0.85rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.campo-nota {
  display: block;
  width: 100%;
  margin-top: 0.4rem;
  border: 1px solid var(--destaque);
  border-radius: 6px;
  background: var(--fundo);
  color: var(--texto);
  font-family: inherit;
  font-size: 0.85rem;
  padding: 0.4rem 0.5rem;
  resize: vertical;
}

.campo-nota:focus {
  outline: none;
}

.nota {
  flex: none;
  border: 1px solid var(--borda);
  border-radius: 6px;
  background: transparent;
  color: var(--texto-fraco);
  font-family: inherit;
  font-size: 0.82rem;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
}

.nota:hover {
  color: var(--texto);
  border-color: var(--texto-fraco);
}

.nota.preenchida {
  border-color: var(--destaque);
  color: var(--destaque);
  font-weight: 600;
}

.adiar {
  flex: none;
  border: 1px solid var(--borda);
  border-radius: 6px;
  background: transparent;
  color: var(--texto-fraco);
  font-family: inherit;
  font-size: 0.82rem;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
}

.adiar:hover {
  color: var(--texto);
  border-color: var(--texto-fraco);
}

/* Edição direta no Admin: funciona também em navegadores que não oferecem prompt(). */
.item.em-edicao {
  border-left-color: var(--destaque);
}

.editor-na-lista {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  min-width: 0;
}

.editor-na-lista label {
  display: flex;
  flex: 1 1 14rem;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.editor-na-lista label span {
  color: var(--texto-fraco);
  font-size: 0.78rem;
  font-weight: 500;
}

.editor-na-lista input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--borda);
  border-radius: 6px;
  background: var(--fundo);
  color: var(--texto);
  font-family: inherit;
  font-size: 0.95rem;
  padding: 0.5rem 0.6rem;
}

.editor-na-lista input:focus {
  border-color: var(--destaque);
  outline: 2px solid var(--destaque-fraco);
}

.acoes-do-editor {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
}

.editor-na-lista .salvar-edicao {
  border: 1px solid var(--destaque);
  border-radius: 6px;
  background: var(--destaque);
  color: #fff;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.3rem 0.75rem;
  cursor: pointer;
}

.editor-na-lista button:disabled {
  cursor: wait;
  opacity: 0.65;
}

/* ---------- vazio ---------- */

.vazio {
  margin: 1.5rem 0 0;
  padding: 2rem 1rem;
  border: 1px dashed var(--borda);
  border-radius: 10px;
  text-align: center;
  color: var(--texto-fraco);
}

/* ============================================================
   CELULAR E TELA ESTREITA

   O sistema vai ser usado no celular — pela equipe em campo, e por voce
   conferindo o dia fora do escritorio. Abaixo de 720px de largura, tudo que
   estava lado a lado passa a empilhar, e os alvos de toque crescem: dedo
   nao acerta botao de 24 pixels.
   ============================================================ */

@media (max-width: 720px) {
  main {
    padding: 1rem 0.75rem 0;
  }

  /* A barra do topo empilha: nome e atalhos descem para baixo do título. */
  .barra-do-topo {
    padding: 0.7rem 0.75rem;
  }

  .barra-do-topo .interno {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .quem-sou {
    text-align: left;
    width: 100%;
  }

  .atalhos {
    margin-top: 0;
    flex-wrap: wrap;
    gap: 1rem;
  }

  /* Cada campo do formulario ocupa a linha inteira: dois por linha aperta demais. */
  .registrar-detalhes {
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
  }

  /*
   * Campo ocupa a linha inteira — MENOS a caixinha de marcar.
   * Sem o :not, o checkbox tambem esticava para 100% e empurrava o texto
   * "Ocultar dos colegas" para a outra ponta da tela.
   */
  .registrar-detalhes label,
  .registrar-detalhes input:not([type='checkbox']),
  .registrar-detalhes select {
    width: 100%;
  }

  .registrar-detalhes input[type='checkbox'] {
    width: 1.1rem;
    height: 1.1rem;
    flex: none;
  }

  .registrar-detalhes button {
    margin-left: 0;
    width: 100%;
    padding: 0.7rem 1rem;
  }

  .marcador {
    justify-content: flex-start;
  }

  /*
   * As abas viram uma faixa que rola de lado, em vez de quebrarem em tres linhas.
   * Sao sete abas: empilhadas, empurrariam a lista para fora da tela.
   */
  .filtros {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 0.3rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .filtros::-webkit-scrollbar {
    display: none;
  }

  .filtros button {
    flex: none;
    padding: 0.45rem 0.9rem;
  }

  .aba-equipe {
    margin-left: 0;
  }

  .barra-de-busca {
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .barra-de-busca input {
    flex: 1 1 100%;
    padding: 0.6rem 0.7rem;
  }

  /*
   * A linha da atividade vira duas: o texto em cima, os botoes embaixo.
   * Titulo espremido em 40% da largura nao se le.
   */
  .item {
    flex-wrap: wrap;
    row-gap: 0.6rem;
  }

  .corpo {
    flex: 1 1 calc(100% - 2.4rem);
  }

  .item .andamento,
  .item .adiar,
  .item .nota,
  .item .ocultar {
    padding: 0.45rem 0.8rem;
    font-size: 0.85rem;
  }

  .editor-na-lista label,
  .acoes-do-editor {
    flex-basis: 100%;
    width: 100%;
  }

  .acoes-do-editor button {
    flex: 1;
    padding: 0.65rem 0.8rem;
  }

  /* O dedo precisa de alvo maior que o mouse. */
  .marcar {
    width: 1.7rem;
    height: 1.7rem;
  }

  .lembrete {
    align-items: flex-start;
  }

  .lembrete button {
    width: 100%;
    padding: 0.5rem;
  }

  /* Cartoes de relatorio: dois por linha em vez de cinco espremidos. */
  .cartao {
    flex: 1 1 calc(50% - 0.25rem);
  }

  .atalhos-de-periodo {
    flex-wrap: wrap;
  }

  .pessoa h2 {
    font-size: 0.95rem;
  }

  .lista-da-pessoa li {
    flex-wrap: wrap;
  }

  .lista-da-pessoa .meta {
    margin-left: 0;
    flex-basis: 100%;
  }

  dialog#ficha {
    padding: 1.1rem;
  }

  .chave-solta {
    top: 0.6rem;
    right: 0.6rem;
  }
}

/* Telas bem estreitas: um cartao por linha. */
@media (max-width: 420px) {
  .cartao {
    flex: 1 1 100%;
  }

  .topo h1 {
    font-size: 1.25rem;
  }
}

/* ============================================================
   LEGIBILIDADE

   Ajustes feitos depois de ver a tela de verdade: o texto secundario estava
   apagado demais. Rotulo de campo e detalhe de atividade sao textos pequenos,
   e texto pequeno precisa de MAIS contraste, nao menos.
   ============================================================ */

/* O texto de dica dentro dos campos vinha quase invisivel no tema escuro. */
::placeholder {
  color: var(--texto-fraco);
  opacity: 1;
}

/* Rotulos e detalhes: um pouco maiores e com peso, para nao sumirem. */
.registrar-detalhes span,
.registrar-detalhes small {
  font-size: 0.78rem;
  font-weight: 500;
}

.detalhes {
  font-size: 0.82rem;
}

.contagem,
.contagem-do-mes,
.resumo-da-pessoa,
.nota-de-rodape,
.quem-sou {
  font-weight: 500;
}

/* O titulo da atividade e o que se le primeiro: merece corpo e peso. */
.item .titulo {
  font-size: 1rem;
  font-weight: 500;
}

/* A observacao e leitura corrida, nao etiqueta: ganha o tom cheio do texto. */
.observacao {
  color: var(--texto);
  opacity: 0.85;
}

/* Os campos do formulario: texto do mesmo tamanho do resto, nao menor. */
.registrar input[type='text'],
.registrar-detalhes input,
.registrar-detalhes select,
.barra-de-busca input {
  font-size: 0.95rem;
}

.campo-observacao {
  color: var(--texto);
}

/* ---------- conversa da atividade ---------- */

.conversa {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--borda);
  border-radius: 6px;
  background: transparent;
  color: var(--texto-fraco);
  font-family: inherit;
  font-size: 0.82rem;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
}

.conversa:hover {
  color: var(--andamento);
  border-color: var(--andamento);
}

.conversa.com-novas {
  border-color: var(--alerta);
  color: var(--texto);
  font-weight: 600;
}

.bolinha-de-novas {
  display: inline-grid;
  place-items: center;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: var(--alerta);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
}

.janela-conversa {
  width: min(34rem, calc(100vw - 2rem));
  max-height: 85vh;
  border: 1px solid var(--borda);
  border-radius: 12px;
  background: var(--papel);
  color: var(--texto);
  padding: 1.4rem;
}

.janela-conversa::backdrop {
  background: rgba(0, 0, 0, 0.55);
}

.janela-conversa h2 {
  margin: 0 1.5rem 1rem 0;
  font-size: 1rem;
  line-height: 1.4;
}

.mensagens {
  max-height: 50vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-right: 0.3rem;
}

.mensagem {
  border-left: 2px solid var(--borda);
  padding-left: 0.7rem;
}

/* A minha mensagem tem a cor do sistema: dá para varrer a conversa e saber quem falou. */
.mensagem.minha {
  border-left-color: var(--destaque);
}

.quem-falou {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--texto-fraco);
}

.texto-da-mensagem {
  margin: 0.15rem 0 0;
  font-size: 0.9rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.escrever {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--borda);
}

.escrever textarea {
  flex: 1;
  border: 1px solid var(--borda);
  border-radius: 6px;
  background: var(--fundo);
  color: var(--texto);
  font-family: inherit;
  font-size: 0.9rem;
  padding: 0.5rem 0.6rem;
  resize: vertical;
}

.escrever textarea:focus {
  outline: none;
  border-color: var(--destaque);
}

/*
 * SO o botao de enviar leva a cor cheia.
 *
 * Antes esta regra dizia ".escrever button" e pintava tudo de verde — inclusive o
 * clipe e o microfone, que viraram bolinhas verdes com o desenho ilegivel por cima.
 * Regra larga demais em CSS pega o que nao devia.
 */
.escrever button[type='submit'] {
  flex: none;
  border: 0;
  border-radius: 6px;
  background: var(--destaque);
  color: #fff;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.55rem 1.1rem;
  cursor: pointer;
}

.escrever button[type='submit']:hover {
  filter: brightness(1.08);
}

/* ---------- modelos de atividade ---------- */

.atalhos-de-modelo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding-bottom: 0.85rem;
  margin-bottom: 0.35rem;
  border-bottom: 1px solid var(--borda);
}

.rotulo-de-modelo {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--texto-fraco);
}

.lista-de-modelos {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.chip-de-modelo {
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: transparent;
  color: var(--texto);
  font-family: inherit;
  font-size: 0.82rem;
  padding: 0.28rem 0.8rem;
  cursor: pointer;
}

.chip-de-modelo:hover {
  border-color: var(--destaque);
  color: var(--destaque);
}

.chip-de-modelo.escolhido {
  background: var(--destaque-fraco);
  border-color: var(--destaque);
  color: var(--destaque);
  font-weight: 600;
}

.novo-modelo {
  border: 1px dashed var(--borda);
  border-radius: 999px;
  background: transparent;
  color: var(--texto-fraco);
  font-family: inherit;
  font-size: 0.8rem;
  padding: 0.28rem 0.7rem;
  cursor: pointer;
}

.novo-modelo:hover {
  color: var(--destaque);
  border-color: var(--destaque);
}

/* O cliente na linha da atividade: destacado, porque é por ele que se procura. */
.etiqueta-cliente {
  color: var(--texto);
  font-weight: 600;
}

/* ---------- anexos e voz ---------- */

.anexo {
  flex: none;
  border: 1px solid var(--borda);
  border-radius: 6px;
  background: transparent;
  color: var(--texto-fraco);
  font-family: inherit;
  font-size: 0.82rem;
  padding: 0.3rem 0.55rem;
  cursor: pointer;
}

.anexo:hover {
  border-color: var(--destaque);
}

.anexo.tem {
  border-color: var(--destaque);
  color: var(--destaque);
  font-weight: 600;
}

.lista-de-anexos {
  margin-top: 0.5rem;
  padding: 0.5rem 0.7rem;
  border-left: 2px solid var(--borda);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
}

.linha-de-anexo {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.linha-de-anexo a {
  color: var(--destaque);
  overflow-wrap: anywhere;
}

.linha-de-anexo span {
  font-size: 0.75rem;
  color: var(--texto-fraco);
}

/* Os botões da conversa ficam numa linha própria, embaixo do campo de texto. */
.escrever {
  flex-wrap: wrap;
}

.escrever textarea {
  flex: 1 1 100%;
}

.botoes-da-conversa {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.anexar {
  border: 1px solid var(--borda);
  border-radius: 50%;
  background: transparent;
  color: var(--texto-fraco);
  width: 2.1rem;
  height: 2.1rem;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}

.anexar:hover {
  border-color: var(--destaque);
  color: var(--destaque);
}

/* Gravando: o botão vira o relógio correndo e pulsa em vermelho. */
.anexar.gravando {
  width: auto;
  border-radius: 999px;
  padding: 0 0.7rem;
  border-color: var(--alerta);
  background: var(--alerta-fraco);
  color: var(--alerta);
  font-size: 0.82rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  animation: pulsando 1.2s ease-in-out infinite;
}

.audio-da-mensagem {
  display: block;
  margin-top: 0.4rem;
  max-width: 100%;
  height: 2.2rem;
}

.anexo-da-mensagem {
  display: inline-block;
  margin-top: 0.4rem;
  color: var(--destaque);
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}

.aviso-da-conversa {
  margin: 0.6rem 0 0;
  font-size: 0.82rem;
  color: var(--alerta);
}

.aviso-da-conversa.bom {
  color: var(--destaque);
}

/* ---------- editar a atividade ---------- */

.editar {
  flex: none;
  border: 1px solid var(--borda);
  border-radius: 6px;
  background: transparent;
  color: var(--texto-fraco);
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1;
  padding: 0.35rem 0.55rem;
  cursor: pointer;
}

.editar:hover {
  border-color: var(--destaque);
  color: var(--destaque);
}

.janela-editar {
  width: min(30rem, calc(100vw - 2rem));
  max-height: 88vh;
  border: 1px solid var(--borda);
  border-radius: 12px;
  background: var(--papel);
  color: var(--texto);
  padding: 1.4rem;
}

.janela-editar::backdrop {
  background: rgba(0, 0, 0, 0.55);
}

.janela-editar h2 {
  margin: 0 1.5rem 1rem 0;
  font-size: 1.05rem;
}

.formulario-de-edicao {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.formulario-de-edicao label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.formulario-de-edicao label > span {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--texto-fraco);
}

.formulario-de-edicao input[type='text'],
.formulario-de-edicao textarea {
  border: 1px solid var(--borda);
  border-radius: 6px;
  background: var(--fundo);
  color: var(--texto);
  font-family: inherit;
  font-size: 0.95rem;
  padding: 0.5rem 0.6rem;
}

.formulario-de-edicao input:focus,
.formulario-de-edicao select:focus,
.formulario-de-edicao textarea:focus {
  outline: none;
  border-color: var(--destaque);
}

/* Data com hora, e prioridade com tema: cada par ocupa uma linha. */
.linha-dupla {
  display: flex;
  gap: 0.75rem;
}

.linha-dupla label {
  flex: 1;
  min-width: 0;
}

.botoes-da-edicao {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 0.4rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--borda);
}

.botoes-da-edicao button[type='submit'] {
  border: 0;
  border-radius: 6px;
  background: var(--destaque);
  color: #fff;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.55rem 1.3rem;
  cursor: pointer;
}

.etiqueta-privacidade,
.participantes,
.historico {
  flex: none;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: transparent;
  color: var(--texto-fraco);
  font-family: inherit;
  font-size: 0.76rem;
  padding: 0.28rem 0.55rem;
}

button.etiqueta-privacidade,
.participantes,
.historico {
  cursor: pointer;
}

button.etiqueta-privacidade:hover,
.participantes:hover,
.historico:hover {
  border-color: var(--destaque);
  color: var(--destaque);
}

.privacidade-reservada {
  border-color: #c79a42;
  color: #c79a42;
}

.privacidade-oculta {
  border-color: #b96b79;
  color: #b96b79;
}

.etiqueta-participantes {
  color: var(--destaque);
}

.explicacao-curta {
  margin: 0 0 1rem;
  color: var(--texto-fraco);
  font-size: 0.86rem;
  line-height: 1.45;
}

.lista-de-participantes,
.lista-do-historico {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  max-height: 48vh;
  overflow: auto;
}

.linha-de-participante {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 0.65rem !important;
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 0.65rem 0.75rem;
}

.linha-de-participante > span {
  color: var(--texto) !important;
  font-size: 0.88rem !important;
}

.participante-encerrado {
  margin: 0;
  color: var(--texto-fraco);
  font-size: 0.82rem;
  padding: 0.45rem 0.75rem;
}

.evento-do-historico {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  border-left: 3px solid var(--destaque);
  background: color-mix(in srgb, var(--destaque) 7%, transparent);
  border-radius: 0 7px 7px 0;
  padding: 0.65rem 0.75rem;
}

.evento-do-historico strong {
  font-size: 0.88rem;
}

.evento-do-historico span {
  color: var(--texto-fraco);
  font-size: 0.76rem;
}

.evento-do-historico small {
  color: var(--texto);
  font-size: 0.8rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  .linha-dupla {
    flex-direction: column;
  }
}

/* ---------- @ para chamar alguém ---------- */

.campo-com-mencao {
  position: relative;
  flex: 1 1 100%;
}

.campo-com-mencao textarea {
  width: 100%;
}

/* A lista sobe por cima do campo: em janela baixa, embaixo ela ficaria cortada. */
.lista-de-mencao {
  position: absolute;
  bottom: calc(100% + 0.3rem);
  left: 0;
  right: 0;
  z-index: 10;
  background: var(--papel);
  border: 1px solid var(--destaque);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.opcao-de-mencao {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--texto);
  font-family: inherit;
  font-size: 0.88rem;
  padding: 0.5rem 0.7rem;
  cursor: pointer;
}

.opcao-de-mencao:hover,
.opcao-de-mencao.marcada {
  background: var(--destaque-fraco);
  color: var(--destaque);
  font-weight: 600;
}

/* O @Nome dentro da mensagem, para saltar aos olhos de quem foi chamado. */
.mencao {
  color: var(--destaque);
  font-weight: 600;
}

.quem-esta-na-conversa {
  margin: 0 0 0.7rem;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  background: var(--destaque-fraco);
  color: var(--destaque);
  font-size: 0.78rem;
  font-weight: 500;
}

/* ---------- título e cliente na mesma linha ---------- */

.campo-com-voz {
  gap: 0.75rem;
}

.campo-com-voz > input[type='text'] {
  flex: 2 1 16rem;
}

/*
 * O "para" antes do cliente faz a frase se ler sozinha:
 * "cálculo de seguro"  para  "Tiago Girão".
 * Sem ele, o segundo campo é só mais uma caixa e ninguém sabe o que vai ali.
 */
.campo-do-cliente {
  flex: 1 1 11rem;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  border-bottom: 1px solid var(--borda);
  min-width: 0;
}

.campo-do-cliente:focus-within {
  border-bottom-color: var(--destaque);
}

.prefixo-do-cliente {
  flex: none;
  font-size: 0.85rem;
  color: var(--texto-fraco);
}

.campo-do-cliente input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--texto);
  font-family: inherit;
  font-size: 1.05rem;
  padding: 0.4rem 0 0.6rem;
}

.campo-do-cliente input:focus {
  outline: none;
}

/* O cliente na linha da atividade, colado no título: é ele que identifica o trabalho. */
.separador-do-cliente {
  color: var(--texto-fraco);
}

.cliente-no-titulo {
  color: var(--andamento);
  font-weight: 600;
}

.abrir-observacao {
  align-self: flex-start;
  border: 0;
  background: none;
  padding: 0.35rem 0 0;
  color: var(--texto-fraco);
  font-family: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}

.abrir-observacao:hover {
  color: var(--destaque);
}

@media (max-width: 720px) {
  .campo-com-voz {
    flex-wrap: wrap;
  }

  .campo-com-voz > input[type='text'],
  .campo-do-cliente {
    flex: 1 1 100%;
  }
}

/* ---------- mostrar a senha ---------- */

.campo-de-senha {
  position: relative;
  display: flex;
  align-items: center;
}

.campo-de-senha input {
  flex: 1;
  min-width: 0;
  padding-right: 2.4rem;
}

/*
 * O !important existe por um motivo concreto: no Admin este botao fica dentro de
 * .registrar-detalhes, cuja regra pinta TODO botao de verde. Sem isso, o olho virava
 * uma pastilha verde com o desenho sumindo dentro.
 */
.olho-da-senha {
  position: absolute;
  right: 0.35rem;
  display: grid;
  place-items: center;
  width: auto !important;
  margin: 0 !important;
  border: 0 !important;
  background: none !important;
  color: var(--texto-fraco) !important;
  padding: 0.25rem !important;
  line-height: 1;
  cursor: pointer;
}

.olho-da-senha:hover {
  color: var(--destaque) !important;
}

.olho-da-senha svg {
  display: block;
}

/* ---------- janela de adiar ---------- */

.janela-adiar {
  width: min(26rem, calc(100vw - 2rem));
  border: 1px solid var(--borda);
  border-radius: 12px;
  background: var(--papel);
  color: var(--texto);
  padding: 1.4rem;
}

.janela-adiar::backdrop {
  background: rgba(0, 0, 0, 0.55);
}

.janela-adiar h2 {
  margin: 0 1.5rem 1rem 0;
  font-size: 1.05rem;
}

.janela-adiar h2 span {
  font-weight: 400;
  color: var(--texto-fraco);
}

/* Quase todo adiamento é um destes quatro. Digitar a data para isso é trabalho à toa. */
.atalhos-de-adiar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.atalhos-de-adiar button {
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: transparent;
  color: var(--texto);
  font-family: inherit;
  font-size: 0.82rem;
  padding: 0.3rem 0.85rem;
  cursor: pointer;
}

.atalhos-de-adiar button:hover {
  border-color: var(--destaque);
  color: var(--destaque);
  background: var(--destaque-fraco);
}

/* ---------- enviar a logo ---------- */

.caixas-de-logo {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.caixa-de-logo {
  flex: 1 1 14rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 0.85rem;
}

.caixa-de-logo strong {
  font-size: 0.85rem;
}

/* O fundo claro da prévia mostra a logo como ela vai aparecer de verdade. */
.previa-da-logo {
  display: grid;
  place-items: center;
  min-height: 4.5rem;
  padding: 0.6rem;
  border: 1px dashed var(--borda);
  border-radius: 6px;
  background: #fff;
}

.previa-da-logo img {
  max-height: 3.5rem;
  max-width: 100%;
}

.sem-logo {
  color: #78766f;
  font-size: 0.78rem;
}

.acoes-da-logo {
  display: flex;
  gap: 0.4rem;
}

/* A miniatura identifica rapidamente a empresa sem transformar a lista num catálogo. */
.marca-da-empresa {
  display: grid;
  place-items: center;
  flex: 0 0 5.5rem;
  min-height: 3.25rem;
  padding: 0.3rem;
  border: 1px dashed var(--borda);
  border-radius: 6px;
  background: #fff;
}

.marca-da-empresa img {
  max-width: 5rem;
  max-height: 2.8rem;
}

.marca-da-empresa span {
  color: #78766f;
  font-size: 0.68rem;
  line-height: 1.2;
  text-align: center;
}

@media (max-width: 720px) {
  .marca-da-empresa {
    flex-basis: 4.25rem;
  }
}

/* ---------- esqueci minha senha ---------- */

.esqueci {
  align-self: center;
  margin-top: 0.2rem !important;
  border: 0 !important;
  background: none !important;
  color: var(--texto-fraco) !important;
  font-size: 0.8rem !important;
  font-weight: 400 !important;
  padding: 0.3rem !important;
  cursor: pointer;
}

.esqueci:hover {
  color: var(--destaque) !important;
  text-decoration: underline;
}

.comando-de-recuperar {
  display: block;
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: 6px;
  padding: 0.6rem 0.7rem;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.82rem;
  color: var(--texto);
  overflow-wrap: anywhere;
}

#ajuda-senha code {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.8rem;
  background: var(--fundo);
  padding: 0.1rem 0.3rem;
  border-radius: 4px;
}

/* ---------- aba Minhas ---------- */

/*
 * As faixas da aba Minhas reusam o visual do historico por mes (.mes): mesma
 * gaveta, mesma setinha, mesma contagem a direita. Duas caixas dobraveis com
 * aparencia diferente na mesma tela fariam a pessoa achar que sao coisas distintas.
 */
.explicacao-da-secao {
  margin: 0 0.9rem 0.4rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--texto-fraco);
}

/* ---------- calendario ---------- */

.barra-do-calendario {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.barra-do-calendario h2 {
  margin: 0;
  font-size: 1.05rem;
  min-width: 11rem;
  text-align: center;
}

.passo-de-mes {
  border: 1px solid var(--borda);
  border-radius: 6px;
  background: var(--papel);
  color: var(--texto);
  font-family: inherit;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.25rem 0.6rem;
  cursor: pointer;
}

.passo-de-mes:hover {
  border-color: var(--destaque);
  color: var(--destaque);
}

.voltar-para-hoje {
  margin-left: auto;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: var(--papel);
  color: var(--texto-fraco);
  font-family: inherit;
  font-size: 0.82rem;
  padding: 0.3rem 0.85rem;
  cursor: pointer;
}

.voltar-para-hoje:hover {
  border-color: var(--destaque);
  color: var(--destaque);
}

.grade-do-mes {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  background: var(--borda);
  border: 1px solid var(--borda);
  border-radius: 8px;
  overflow: hidden;
}

.nome-do-dia-da-semana {
  background: var(--papel);
  color: var(--texto-fraco);
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  padding: 0.4rem 0;
}

/*
 * O dia e um botao de verdade (nao uma div com clique) para o teclado alcancar:
 * quem navega por Tab passa pelos dias na ordem, e o Enter abre o dia.
 */
.dia-do-mes {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  min-height: 5.5rem;
  border: 0;
  background: var(--papel);
  color: var(--texto);
  font-family: inherit;
  text-align: left;
  padding: 0.3rem;
  cursor: pointer;
}

.dia-do-mes:hover {
  background: var(--destaque-fraco);
}

.dia-do-mes.fora-do-mes {
  background: var(--fundo);
}

.dia-do-mes.fora-do-mes .numero-do-dia {
  opacity: 0.45;
}

.dia-do-mes.escolhido {
  outline: 2px solid var(--destaque);
  outline-offset: -2px;
}

.numero-do-dia {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--texto-fraco);
}

/* O dia de hoje ganha a bolinha do sistema no numero, nao o fundo inteiro:
   pintar a celula toda brigaria com a cor das atividades dentro dela. */
.dia-do-mes.e-hoje .numero-do-dia {
  display: inline-grid;
  place-items: center;
  align-self: flex-start;
  min-width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  background: var(--destaque);
  color: #fff;
}

.evento {
  display: block;
  font-size: 0.7rem;
  line-height: 1.35;
  padding: 0.1rem 0.3rem;
  border-radius: 4px;
  background: var(--destaque-fraco);
  color: var(--texto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.evento.p-alta {
  background: var(--alerta-fraco);
  color: var(--alta);
  font-weight: 600;
}

.evento.p-baixa {
  background: var(--fundo);
  color: var(--texto-fraco);
}

/* O previsto e desenhado com o contorno tracejado porque ele AINDA NAO EXISTE.
   Um item previsto igual a um real faria a pessoa tentar concluir o que nao nasceu. */
.evento.previsto {
  background: transparent;
  border: 1px dashed var(--borda);
  color: var(--texto-fraco);
  font-weight: 400;
}

.evento.concluido {
  text-decoration: line-through;
  opacity: 0.5;
}

.mais-do-dia {
  font-size: 0.68rem;
  color: var(--texto-fraco);
  padding-left: 0.3rem;
}

.dia-aberto {
  margin-top: 1rem;
  border-top: 1px solid var(--borda);
  padding-top: 0.85rem;
}

.dia-aberto h3 {
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
}

.dia-aberto h3::first-letter {
  text-transform: uppercase;
}

.lista-de-previstos {
  list-style: none;
  margin: 0;
  padding: 0 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.lista-de-previstos li {
  border: 1px dashed var(--borda);
  border-radius: 6px;
  background: transparent;
  color: var(--texto-fraco);
  font-size: 0.85rem;
  padding: 0.4rem 0.6rem;
}

/*
 * No celular a celula nao cabe texto nenhum: sete colunas numa tela de 375px dao
 * menos de 50px por dia. As atividades viram barrinhas coloridas — da para ver que
 * o dia tem coisa e quanta, que e o que o mes precisa responder. O detalhe vem ao
 * tocar no dia, que abre a lista inteira embaixo.
 */
@media (max-width: 640px) {
  .dia-do-mes {
    min-height: 3.6rem;
  }

  .dia-do-mes .evento {
    height: 0.32rem;
    padding: 0;
    font-size: 0;
    border-radius: 999px;
  }

  .barra-do-calendario h2 {
    min-width: 0;
    flex: 1;
    font-size: 0.95rem;
  }
}

/* ---------- chamar gente para a conversa ---------- */

.linha-de-convidados {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.8rem;
}

.linha-de-convidados .quem-esta-na-conversa {
  margin: 0;
  flex: 1;
}

.chamar-gente {
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: transparent;
  color: var(--texto-fraco);
  font-family: inherit;
  font-size: 0.78rem;
  padding: 0.25rem 0.7rem;
  cursor: pointer;
}

.chamar-gente:hover {
  border-color: var(--andamento);
  color: var(--andamento);
}

.escolher-gente {
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--fundo);
  padding: 0.7rem 0.8rem;
  margin-bottom: 0.8rem;
}

.explicacao-de-chamar {
  margin: 0 0 0.6rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--texto-fraco);
}

.gente-para-chamar {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  max-height: 11rem;
  overflow-y: auto;
}

.pessoa-para-chamar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  padding: 0.25rem 0.2rem;
  border-radius: 4px;
  cursor: pointer;
}

.pessoa-para-chamar:hover {
  background: var(--destaque-fraco);
}

/* Especifico de proposito: `.escolher-gente input` esticaria a caixinha de marcar,
   que foi exatamente o que ja aconteceu no formulario de registrar. */
.pessoa-para-chamar input[type='checkbox'] {
  flex: none;
  width: auto;
  margin: 0;
}

.pessoa-para-chamar:has(input:disabled) {
  cursor: default;
  color: var(--texto-fraco);
}

.ja-esta {
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--texto-fraco);
  background: var(--papel);
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
}

.botoes-de-chamar {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.7rem;
}

.cancelar-chamada {
  border: 1px solid var(--borda);
  border-radius: 6px;
  background: transparent;
  color: var(--texto-fraco);
  font-family: inherit;
  font-size: 0.85rem;
  padding: 0.35rem 0.8rem;
  cursor: pointer;
}

.confirmar-chamada {
  border: 0;
  border-radius: 6px;
  background: var(--destaque);
  color: #fff;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.35rem 0.9rem;
  cursor: pointer;
}

.confirmar-chamada:hover {
  filter: brightness(1.08);
}


/* ---------- experiência móvel: atividades primeiro ---------- */

.abrir-registro-movel {
  display: none;
}

@media (max-width: 720px) {
  main {
    padding: 0.75rem;
  }

  .barra-do-topo {
    position: static;
    padding: 0.6rem 0.75rem;
  }

  .barra-do-topo .interno {
    gap: 0.45rem;
  }

  .marca {
    width: 100%;
    gap: 0.6rem;
  }

  .marca h1 {
    font-size: 1rem;
  }

  .marca .logo {
    max-height: 2rem;
    max-width: 8rem;
  }

  .data-de-hoje {
    margin-top: 0.1rem;
    font-size: 0.72rem;
  }

  .quem-sou {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }

  #meu-nome {
    font-size: 0.78rem;
  }

  .atalhos {
    width: 100%;
    flex-wrap: nowrap;
    gap: 0.35rem;
    overflow-x: auto;
    padding-bottom: 0.1rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .atalhos::-webkit-scrollbar {
    display: none;
  }

  .atalhos a,
  .atalhos button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--borda);
    border-radius: 999px;
  }

  .atalhos a:hover,
  .atalhos button:hover {
    text-decoration: none;
    background: var(--destaque-fraco);
  }

  .atalhos .chave-tema {
    width: 44px;
    height: 44px;
    padding: 0;
  }

  .ux-movel-pronta .abrir-registro-movel {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    margin: 0 0 0.75rem;
    border: 0;
    border-radius: 9px;
    background: var(--destaque);
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
  }

  .ux-movel-pronta .registrar {
    display: none;
  }

  .ux-movel-pronta.formulario-aberto .registrar {
    display: block;
    margin-bottom: 0.75rem;
  }

  .registrar input[type='text'],
  .registrar-detalhes input,
  .registrar-detalhes select,
  .barra-de-busca input {
    min-height: 44px;
    font-size: 16px;
  }

  .registrar-detalhes button,
  .barra-de-busca input {
    min-height: 48px;
  }

  .filtros {
    margin-top: 0;
    margin-bottom: 0.6rem;
    scroll-snap-type: x proximity;
  }

  .filtros button {
    min-height: 44px;
    scroll-snap-align: start;
  }
}

@media (max-width: 420px) {
  main {
    padding: 0.6rem;
  }

  .registrar {
    padding: 0.8rem;
  }
}