/*
  Estilo do FintechMed BPO — CSS puro, um arquivo só, sem framework e sem fonte remota.

  Três decisões que explicam quase tudo aqui:

  1) FONTE DO SISTEMA (`system-ui`). Nenhuma fonte é baixada: a tela pinta na primeira
     passada, funciona offline e não sai requisição nenhuma para fora — que é contrato do
     projeto (zero dependência externa) e também higiene de privacidade.

  2) COR COM SIGNIFICADO ÚNICO. Vermelho é prazo vencido, âmbar é vence hoje/amanhã, verde é
     concluído. Nenhum botão decorativo usa essas cores, senão a equipe aprende a ignorá-las.
     E a cor nunca é a ÚNICA pista: todo cartão traz também o texto ("atrasada 3 dias"), para
     quem não distingue vermelho de verde.

  3) TEMA CLARO FIXO. É um sistema de trabalho de escritório, usado em sala com luz. Um tema
     escuro meia-boca custaria o dobro de manutenção e entregaria contraste pior.
*/

/* ------------------------------------------------------------------ variáveis */

:root {
  --tinta: #101828;          /* texto principal */
  --tinta-fraca: #667085;    /* texto secundário */
  --linha: #e4e7ec;
  --fundo: #f4f6f9;
  --papel: #ffffff;
  --azul: #1c64f2;
  --azul-escuro: #1650c4;
  --azul-fraco: #eaf0fe;

  --vermelho: #d92d20;
  --vermelho-fraco: #fef3f2;
  --ambar: #b54708;
  --ambar-fraco: #fffaeb;
  --verde: #027a48;
  --verde-fraco: #ecfdf3;

  --raio: 10px;
  --raio-g: 14px;
  --sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .1);
  --sombra-alta: 0 8px 24px rgba(16, 24, 40, .14);
  --topo-altura: 60px;
}

/* ------------------------------------------------------------------ base */

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

body.travado { overflow: hidden; } /* enquanto o modal está aberto */

h1, h2, h3 { margin: 0; line-height: 1.25; letter-spacing: -.01em; }
h1 { font-size: 1.4rem; }
h2 { font-size: 1.05rem; }
h3 { font-size: .95rem; }
p { margin: 0; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88em; background: #f2f4f7; padding: 1px 5px; border-radius: 5px; }

[hidden] { display: none !important; }
.escondido { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; border-radius: 4px; }

/* ------------------------------------------------------------------ cortina de carga */

.cortina {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  background: var(--fundo);
  color: var(--tinta-fraca);
}
.cortina-caixa { display: grid; gap: 14px; justify-items: center; }
.girador {
  width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid var(--linha); border-top-color: var(--azul);
  animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .girador { animation-duration: 3s; } }

.aviso-noscript {
  margin: 24px auto; max-width: 640px; padding: 14px 16px;
  background: var(--ambar-fraco); color: var(--ambar);
  border: 1px solid #fedf89; border-radius: var(--raio);
}

/* ------------------------------------------------------------------ marca */

.marca {
  display: inline-flex; align-items: center; gap: 10px;
  color: inherit; text-decoration: none; font-weight: 600;
}
.marca b { font-weight: 800; }
.marca-selo {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--azul); color: #fff;
  font-size: .72rem; font-weight: 800; letter-spacing: .02em;
}
.marca-grande { font-size: 1.3rem; }
.marca-grande .marca-selo { width: 38px; height: 38px; border-radius: 10px; font-size: .85rem; }

/* ------------------------------------------------------------------ botões */

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 14px; min-height: 38px;
  border: 1px solid var(--linha); border-radius: var(--raio);
  background: var(--papel); color: var(--tinta);
  font: inherit; font-weight: 600; font-size: .9rem;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.botao:hover { background: #f9fafb; }
.botao:disabled { opacity: .55; cursor: not-allowed; }

.botao-primario { background: var(--azul); border-color: var(--azul); color: #fff; }
.botao-primario:hover { background: var(--azul-escuro); border-color: var(--azul-escuro); }
.botao-discreto { background: transparent; }
.botao-discreto:hover { background: #f2f4f7; }
.botao-perigo { color: var(--vermelho); border-color: #fda29b; background: var(--papel); }
.botao-perigo:hover { background: var(--vermelho-fraco); }
.botao-largo { width: 100%; }

.botao-icone {
  display: inline-grid; place-items: center;
  width: 28px; height: 28px; padding: 0;
  border: 1px solid transparent; border-radius: 7px;
  background: transparent; color: var(--tinta-fraca);
  font: inherit; font-size: 1.1rem; line-height: 1;
  cursor: pointer;
}
.botao-icone:hover:not(:disabled) { background: #eef1f5; color: var(--tinta); }
.botao-icone:disabled { opacity: .3; cursor: default; }

/* ------------------------------------------------------------------ campos */

.campo { display: grid; gap: 5px; min-width: 0; }
.campo-rotulo { font-size: .8rem; font-weight: 600; color: var(--tinta-fraca); }
.campo-dica { font-size: .78rem; color: var(--tinta-fraca); }
.campo-botao { align-self: end; }

input[type="text"], input[type="password"], input[type="search"], input[type="date"], select, textarea {
  width: 100%;
  padding: 9px 11px; min-height: 40px;
  border: 1px solid #d0d5dd; border-radius: var(--raio);
  background: var(--papel); color: var(--tinta);
  font: inherit; font-size: .92rem;
}
textarea { resize: vertical; min-height: 76px; }
input:disabled, select:disabled, textarea:disabled { background: #f2f4f7; color: var(--tinta-fraca); }
input::placeholder, textarea::placeholder { color: #98a2b3; }

.erro-inline {
  padding: 9px 11px; border-radius: var(--raio);
  background: var(--vermelho-fraco); color: var(--vermelho);
  border: 1px solid #fecdca; font-size: .88rem;
}

.alternador { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--tinta-fraca); cursor: pointer; }
.alternador input { width: auto; min-height: 0; }

/* ------------------------------------------------------------------ login */

.login {
  min-height: 100dvh;
  display: grid; align-content: center; justify-items: center; gap: 18px;
  padding: 32px 18px;
}
.login-cartao {
  width: 100%; max-width: 380px;
  padding: 28px;
  background: var(--papel);
  border: 1px solid var(--linha); border-radius: var(--raio-g);
  box-shadow: var(--sombra);
  display: grid; gap: 16px;
}
.login-sub { color: var(--tinta-fraca); font-size: .9rem; }
.login-cartao form { display: grid; gap: 14px; }
.login-nota { font-size: .82rem; color: var(--tinta-fraca); border-top: 1px solid var(--linha); padding-top: 14px; }
.login-rodape { font-size: .78rem; color: #98a2b3; }

/* ------------------------------------------------------------------ topo e menu */

.topo {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 18px;
  min-height: var(--topo-altura); padding: 0 20px;
  background: var(--papel); border-bottom: 1px solid var(--linha);
}
.menu { display: flex; gap: 4px; flex: 1; overflow-x: auto; scrollbar-width: thin; }
.menu-item {
  padding: 7px 12px; border-radius: 8px; white-space: nowrap;
  color: var(--tinta-fraca); text-decoration: none; font-weight: 600; font-size: .9rem;
}
.menu-item:hover { background: #f2f4f7; color: var(--tinta); }
.menu-item.ativo { background: var(--azul-fraco); color: var(--azul); }

.topo-usuario { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.topo-nome {
  color: var(--tinta); text-decoration: none; font-weight: 600; font-size: .88rem;
  max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topo-nome:hover { color: var(--azul); }

.conteudo { padding: 22px 20px 56px; }
.conteudo:focus { outline: none; }

/* ------------------------------------------------------------------ tela e cabeçalho */

.tela { max-width: 1400px; margin: 0 auto; display: grid; gap: 16px; }
.cabecalho { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.cabecalho-sub { color: var(--tinta-fraca); font-size: .88rem; margin-top: 4px; }
.cabecalho-acoes { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.vazio {
  padding: 28px; text-align: center; color: var(--tinta-fraca);
  background: var(--papel); border: 1px dashed var(--linha); border-radius: var(--raio-g);
}
.nota { color: var(--tinta-fraca); font-size: .85rem; }
.sub { color: var(--tinta-fraca); font-size: .82rem; margin-top: 2px; }

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

.filtros {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  padding: 14px;
  background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio-g);
}

/* ------------------------------------------------------------------ quadro kanban */

.quadro {
  display: grid; gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
}
.coluna {
  display: flex; flex-direction: column; min-height: 180px;
  background: #eef1f5; border: 1px solid var(--linha); border-radius: var(--raio-g);
  transition: background .12s ease, box-shadow .12s ease;
}
/* Realce do alvo enquanto se arrasta: sem ele, ninguém sabe onde o cartão vai cair. */
.coluna.alvo { background: var(--azul-fraco); box-shadow: inset 0 0 0 2px var(--azul); }

.coluna-topo {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; border-bottom: 1px solid var(--linha);
}
.coluna-topo h2 { font-size: .88rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-fraca); }
.contador {
  margin-left: auto; min-width: 24px; padding: 1px 7px;
  background: var(--papel); border: 1px solid var(--linha); border-radius: 999px;
  font-size: .78rem; font-weight: 700; color: var(--tinta-fraca); text-align: center;
}
.coluna-corpo { display: grid; gap: 10px; padding: 12px; align-content: start; }
.coluna-vazia { color: #98a2b3; font-size: .84rem; text-align: center; padding: 10px 0; }

/* faixa lateral por coluna: dá uma segunda pista além da posição */
.coluna-a-fazer .coluna-topo { box-shadow: inset 3px 0 0 #98a2b3; }
.coluna-fazendo .coluna-topo { box-shadow: inset 3px 0 0 var(--azul); }
.coluna-aguardando .coluna-topo { box-shadow: inset 3px 0 0 #dc6803; }
.coluna-concluida .coluna-topo { box-shadow: inset 3px 0 0 var(--verde); }

/* ------------------------------------------------------------------ cartão */

.cartao {
  display: grid; gap: 7px; padding: 12px;
  background: var(--papel); border: 1px solid var(--linha); border-left: 4px solid #d0d5dd;
  border-radius: var(--raio); box-shadow: var(--sombra);
  cursor: grab;
}
.cartao:hover { border-color: #b3bcc9; }
.cartao.arrastando { opacity: .45; cursor: grabbing; }

.cartao-topo { display: flex; align-items: flex-start; gap: 8px; }
.cartao-titulo { flex: 1; font-size: .92rem; font-weight: 650; overflow-wrap: anywhere; }
.cartao-cliente { font-size: .84rem; color: var(--tinta-fraca); overflow-wrap: anywhere; }
.cartao-rodape { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .8rem; }
.pessoa { display: inline-flex; align-items: center; gap: 6px; color: var(--tinta-fraca); min-width: 0; }
.pessoa > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar {
  display: grid; place-items: center; flex: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--azul-fraco); color: var(--azul);
  font-size: .66rem; font-weight: 800;
}
.prazo { font-weight: 650; color: var(--tinta-fraca); white-space: nowrap; }
.cartao-situacao { font-size: .78rem; color: var(--tinta-fraca); }

.cartao-mover { display: flex; justify-content: flex-end; gap: 2px; margin-top: -2px; }

/* prioridade: só o que foge do normal ganha etiqueta */
.etiqueta { flex: none; padding: 1px 8px; border-radius: 999px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.etiqueta-alta { background: var(--vermelho-fraco); color: var(--vermelho); }
.etiqueta-baixa { background: #f2f4f7; color: var(--tinta-fraca); }
.cartao.prio-alta { border-left-color: var(--vermelho); }
.cartao.prio-baixa { border-left-color: #d0d5dd; }
.cartao.prio-normal { border-left-color: var(--azul); }

/* prazo: vermelho vencido, âmbar hoje/amanhã (ESPECIFICACAO.md) — sobrepõe a prioridade,
   porque data estourada é a informação mais urgente do cartão */
.cartao.prazo-vencido { border-left-color: var(--vermelho); background: var(--vermelho-fraco); }
.cartao.prazo-perto { border-left-color: #dc6803; background: var(--ambar-fraco); }
.cartao.prazo-feito { opacity: .82; }
.cartao.prazo-feito .cartao-titulo { text-decoration: line-through; text-decoration-color: #b3bcc9; }

.prazo-vencido .prazo, .situacao-vencido, .prazo.prazo-vencido { color: var(--vermelho); }
.prazo-perto .prazo, .situacao-perto, .prazo.prazo-perto { color: var(--ambar); }
.situacao-feito, .prazo.prazo-feito { color: var(--verde); }

/* ------------------------------------------------------------------ calendário

   Grade de sete colunas (domingo → sábado, como o calendário de parede daqui e como o
   `diaSemana` da API, em que 0 é domingo). As células têm altura MÍNIMA, não fixa: um dia com
   seis vencimentos precisa crescer, e cortar o sexto item seria esconder trabalho.

   No celular a grade vira uma lista de dias (ver o @media lá embaixo): sete colunas numa tela
   de 360px dariam 50px por dia, onde não cabe nem o título de uma atividade. */

.calendario-barra { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.calendario-navegacao { display: flex; align-items: center; gap: 8px; }
.calendario-mes { min-width: 190px; text-align: center; font-size: 1.05rem; }

.calendario-rotulos {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px;
  padding: 0 2px;
}
.calendario-rotulo {
  font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tinta-fraca); text-align: center;
}

.calendario-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }

.dia {
  display: flex; flex-direction: column; gap: 6px; min-height: 108px;
  padding: 8px; background: var(--papel);
  border: 1px solid var(--linha); border-radius: var(--raio);
}
.dia-fim-de-semana { background: #fbfcfd; }
.dia-fora { background: transparent; border-color: transparent; min-height: 0; }

/* O dia de hoje é o ponto de referência da tela inteira: anel azul, e não só uma cor de
   fundo, para continuar visível quando o dia também estiver cheio de fichas. */
.dia-hoje { border-color: var(--azul); box-shadow: inset 0 0 0 1px var(--azul); }
.dia-hoje .dia-numero { background: var(--azul); color: #fff; }

.dia-topo { display: flex; align-items: center; gap: 6px; }
.dia-numero {
  min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 700; color: var(--tinta-fraca);
}
.dia-semana-mini { display: none; font-size: .8rem; color: var(--tinta-fraca); }
.dia-itens { display: grid; gap: 5px; }

/* A ficha é o cartão do quadro em miniatura: título, cliente e a MESMA cor de prazo. */
.ficha {
  display: grid; gap: 1px; width: 100%; text-align: left;
  padding: 5px 7px; cursor: pointer;
  background: #f7f8fa; border: 1px solid var(--linha); border-left: 3px solid var(--azul);
  border-radius: 7px; font: inherit; color: inherit;
}
.ficha:hover { border-color: #b3bcc9; background: #f2f4f7; }
.ficha-titulo { font-size: .8rem; font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }
.ficha-cliente { font-size: .74rem; color: var(--tinta-fraca); overflow-wrap: anywhere; }

.ficha.prio-alta { border-left-color: var(--vermelho); }
.ficha.prio-baixa { border-left-color: #d0d5dd; }
.ficha.prazo-vencido { border-left-color: var(--vermelho); background: var(--vermelho-fraco); }
.ficha.prazo-perto { border-left-color: #dc6803; background: var(--ambar-fraco); }
.ficha.prazo-feito { border-left-color: var(--verde); opacity: .8; }
.ficha.prazo-feito .ficha-titulo { text-decoration: line-through; text-decoration-color: #b3bcc9; }

/* ------------------------------------------------------------------ minhas atividades */

.grupo { display: grid; gap: 10px; }
.grupo-titulo { display: flex; align-items: center; gap: 8px; font-size: .9rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-fraca); }
.grupo-titulo .contador { margin-left: 0; }
.grupo-vencido { color: var(--vermelho); }
.grupo-perto { color: var(--ambar); }
.grupo-feito { color: var(--verde); }

.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.linha {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--papel); border: 1px solid var(--linha); border-left: 4px solid #d0d5dd;
  border-radius: var(--raio); box-shadow: var(--sombra);
}
.linha.prazo-vencido { border-left-color: var(--vermelho); }
.linha.prazo-perto { border-left-color: #dc6803; }
.linha.prazo-feito { border-left-color: var(--verde); opacity: .85; }
.linha select { width: auto; min-width: 140px; }
.linha-abrir {
  flex: 1; min-width: 200px; display: grid; gap: 2px; text-align: left;
  padding: 0; border: 0; background: none; font: inherit; cursor: pointer; color: inherit;
}
.linha-titulo { font-weight: 650; }
.linha-abrir:hover .linha-titulo { color: var(--azul); }
.linha-cliente { font-size: .82rem; color: var(--tinta-fraca); }

/* ------------------------------------------------------------------ tabelas */

.tabela-rolagem { overflow-x: auto; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio-g); }
.tabela { width: 100%; border-collapse: collapse; min-width: 640px; }
.tabela th, .tabela td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linha); }
.tabela th { font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-fraca); background: #fbfcfd; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tr.inativo { background: #fbfcfd; color: var(--tinta-fraca); }
.tabela td.acoes { text-align: right; white-space: nowrap; }
.tabela td.acoes .botao { margin-left: 6px; padding: 5px 10px; min-height: 32px; font-size: .82rem; }

.selo { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .74rem; font-weight: 700; }
.selo-on { background: var(--verde-fraco); color: var(--verde); }
.selo-off { background: #f2f4f7; color: var(--tinta-fraca); }
.selo-eu { margin-left: 6px; background: var(--azul-fraco); color: var(--azul); }

/* ------------------------------------------------------------------ painéis e formulários */

.cartao-painel {
  display: grid; gap: 12px; padding: 20px;
  background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio-g);
  box-shadow: var(--sombra);
}
.dados { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin: 0; }
.dados dt { font-size: .78rem; font-weight: 600; color: var(--tinta-fraca); }
.dados dd { margin: 3px 0 0; font-weight: 600; }

.formulario { display: grid; gap: 14px; }
.formulario-estreito { max-width: 380px; }
.formulario-acoes { display: flex; gap: 8px; }
.duas-colunas { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }

/* ------------------------------------------------------------------ modal */

.modal-fundo {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  background: rgba(16, 24, 40, .45);
  overflow-y: auto;
}
.modal {
  width: 100%; max-width: 560px; max-height: 92dvh;
  display: flex; flex-direction: column;
  background: var(--papel); border-radius: var(--raio-g);
  box-shadow: var(--sombra-alta);
}
.modal-topo { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--linha); }
.modal-topo h2 { flex: 1; }
.modal-corpo { padding: 18px; overflow-y: auto; }
.modal-acoes {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap;
  padding: 14px 18px; border-top: 1px solid var(--linha); background: #fbfcfd;
  border-radius: 0 0 var(--raio-g) var(--raio-g);
}
.modal-info { margin-right: auto; display: flex; gap: 5px; flex-wrap: wrap; font-size: .78rem; color: var(--tinta-fraca); }

/* ------------------------------------------------------------------ avisos */

.avisos {
  position: fixed; z-index: 70; top: 14px; right: 14px;
  display: grid; gap: 8px; max-width: min(380px, calc(100vw - 28px));
}
.aviso {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 12px;
  background: var(--papel); border: 1px solid var(--linha); border-left: 4px solid var(--azul);
  border-radius: var(--raio); box-shadow: var(--sombra-alta);
  font-size: .88rem;
}
.aviso span { flex: 1; }
.aviso-ok { border-left-color: var(--verde); }
.aviso-erro { border-left-color: var(--vermelho); color: #912018; }

/* ------------------------------------------------------------------ responsivo */

@media (max-width: 1000px) {
  /*
    Celular e tablet: as 4 colunas viram uma faixa que rola na horizontal, com encaixe.
    A metáfora do kanban sobrevive (colunas lado a lado), e cada coluna ocupa quase a tela
    inteira, que é o único jeito de o cartão continuar legível. Como arrastar-e-soltar do
    HTML5 não existe no toque, cada cartão traz as setas ‹ › — mesmo efeito do arrastar.
  */
  .quadro {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(86vw, 340px);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 6px;
  }
  .coluna { scroll-snap-align: start; }
}

@media (max-width: 860px) {
  /*
    Celular: a grade de sete colunas vira uma LISTA por dia. Num aparelho de 360px cada
    coluna teria 50px, onde não cabe o título de nenhuma atividade — e um calendário ilegível
    não é calendário. Os dias sem nada (e as células de enchimento das pontas) somem: a lista
    passa a responder "o que tem para fazer neste mês", que é a pergunta de quem está no
    corredor do cliente com o celular na mão. A grade completa continua no computador.
  */
  .calendario-rotulos { display: none; }
  .calendario-grade { grid-template-columns: 1fr; gap: 6px; }
  .dia { min-height: 0; flex-direction: row; align-items: flex-start; gap: 10px; }
  .dia-fora, .dia-sem-itens { display: none; }
  /* Depois da regra acima, e de propósito: HOJE fica na lista mesmo sem nada marcado — é a
     âncora que diz onde a pessoa está no mês, e um "nada para hoje" é informação. */
  .dia-hoje { display: flex; }
  .dia-topo { flex: none; width: 120px; flex-wrap: wrap; }
  .dia-semana-mini { display: inline; }
  .dia-itens { flex: 1; }
  .calendario-mes { min-width: 0; flex: 1; }
}

@media (max-width: 720px) {
  .topo { flex-wrap: wrap; gap: 10px; padding: 10px 14px; }
  .menu { order: 3; width: 100%; flex: none; padding-bottom: 2px; }
  .topo-usuario { margin-left: auto; }
  .marca-texto { font-size: .95rem; }
  .conteudo { padding: 16px 14px 48px; }
  .duas-colunas { grid-template-columns: 1fr; }
  .cabecalho-acoes { margin-left: 0; width: 100%; }
  .cabecalho-acoes .botao { flex: 1; }
  .avisos { top: auto; bottom: 14px; left: 14px; right: 14px; max-width: none; }
  .tabela td.acoes { text-align: left; }
  .tabela td.acoes .botao { margin: 3px 6px 3px 0; }
}

/* ------------------------------------------------------------------ F5: contador do menu */

/*
  Contador vermelho de atrasadas, no item "Quadro" do menu e no topo da faixa.
  Vermelho aqui é o MESMO vermelho de prazo vencido do resto do sistema — é a mesma
  informação, vista de longe. Ele só existe quando é maior que zero (a SPA nem cria o nó),
  porque um contador cravado em 0 a semana inteira deixa de ser lido.
*/
.selo-contador {
  display: inline-block; min-width: 20px; margin-left: 6px; padding: 0 6px;
  background: var(--vermelho); color: #fff; border-radius: 999px;
  font-size: .74rem; font-weight: 800; line-height: 18px; text-align: center;
}

/* ------------------------------------------------------------------ F5: faixa de atrasadas */

.faixa {
  background: var(--vermelho-fraco);
  border: 1px solid #fda29b; border-radius: var(--raio-g);
  overflow: hidden;
}
.faixa-topo {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 12px 14px; border: 0; background: transparent;
  color: var(--vermelho); font: inherit; font-weight: 700; text-align: left; cursor: pointer;
}
.faixa-topo:hover { background: #fee4e2; }
.faixa-seta { font-size: .8rem; }
.faixa-topo .selo-contador { margin-left: 0; }
.faixa-dica { margin-left: auto; color: var(--tinta-fraca); font-weight: 500; font-size: .8rem; }

.faixa-lista { list-style: none; margin: 0; padding: 0 10px 10px; display: grid; gap: 6px; }
.faixa-abrir {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border: 1px solid #fecdca; border-radius: var(--raio);
  background: var(--papel); color: var(--tinta); font: inherit; text-align: left; cursor: pointer;
}
.faixa-abrir:hover { border-color: var(--vermelho); }
.faixa-dias {
  flex: none; min-width: 68px; padding: 2px 8px;
  background: var(--vermelho); color: #fff; border-radius: 999px;
  font-size: .76rem; font-weight: 800; text-align: center;
}
.faixa-titulo { font-weight: 600; }
.faixa-cliente, .faixa-pessoa, .faixa-prazo { color: var(--tinta-fraca); font-size: .84rem; }
.faixa-prazo { margin-left: auto; white-space: nowrap; }

/* ------------------------------------------------------------------ F5: carga da equipe */

.carga { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.carga-linha {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 12px 14px; border: 1px solid var(--linha); border-radius: var(--raio-g);
  background: var(--papel); color: var(--tinta); font: inherit; text-align: left; cursor: pointer;
}
.carga-linha:hover { border-color: var(--azul); background: #fbfcfe; }
.carga-pessoa { display: flex; align-items: center; gap: 8px; min-width: 190px; }
.carga-nome { font-weight: 600; }

/* A barra compara com quem tem MAIS atividades abertas; o trecho vermelho é a fatia vencida. */
.carga-barra { flex: 1; height: 12px; background: #eef1f5; border-radius: 999px; overflow: hidden; }
.carga-barra-total { display: block; height: 100%; background: var(--azul); border-radius: 999px; }
.carga-barra-atraso { display: block; height: 100%; background: var(--vermelho); border-radius: 999px 0 0 999px; }

.carga-numeros { display: flex; gap: 16px; flex: none; }
.carga-num { display: grid; justify-items: center; min-width: 62px; font-size: 1.1rem; font-weight: 700; }
.carga-num small { color: var(--tinta-fraca); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.carga-num.carga-atraso { color: var(--vermelho); }
.carga-num.carga-perto { color: var(--ambar); }

/* ------------------------------------------------------------------ F5: conversa e linha do tempo */

.modal-secoes { display: grid; gap: 18px; }
.bloco { border-top: 1px solid var(--linha); padding-top: 14px; display: grid; gap: 10px; }
.bloco-titulo { display: flex; align-items: center; gap: 8px; color: var(--tinta-fraca); text-transform: uppercase; font-size: .78rem; letter-spacing: .04em; }
.bloco-titulo .contador { margin-left: 0; }

.conversa { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.conversa-item { background: #f9fafb; border: 1px solid var(--linha); border-radius: var(--raio); padding: 10px 12px; }
.conversa-topo { display: flex; align-items: center; gap: 8px; font-size: .85rem; }
.conversa-quando { color: var(--tinta-fraca); font-size: .78rem; }
.conversa-topo .botao-icone { margin-left: auto; }
/* `pre-wrap` para a quebra de linha que a pessoa digitou continuar existindo. */
.conversa-texto { margin-top: 6px; white-space: pre-wrap; overflow-wrap: anywhere; }
.conversa-envio { display: flex; gap: 8px; align-items: flex-start; }
.conversa-entrada { flex: 1; }

.linha-tempo { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.linha-tempo-item {
  display: flex; align-items: baseline; gap: 10px;
  padding-left: 12px; border-left: 2px solid var(--linha); font-size: .86rem;
}
.linha-tempo-quando { margin-left: auto; color: var(--tinta-fraca); font-size: .78rem; white-space: nowrap; }

/* Marca de conversa no cartão do quadro. */
.cartao-conversa { color: var(--tinta-fraca); font-size: .78rem; margin-top: 4px; }

/* ------------------------------------------------------------------ F5: alerta de senha inicial */

.alerta {
  padding: 14px 16px; border-radius: var(--raio-g);
  background: var(--ambar-fraco); border: 1px solid #fedf89; color: var(--ambar);
  display: grid; gap: 6px;
}
.alerta p { font-size: .88rem; color: #93370d; }

/* ------------------------------------------------------------------ F6: diário da equipe */

/* A barra do dia: navegação ‹ hoje › à esquerda e o filtro de pessoa à direita. */
.diario-barra { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.diario-barra .campo { margin-left: auto; min-width: 220px; }
.diario-dia { font-size: 1.05rem; min-width: 190px; text-align: center; }

.diario-grupo { gap: 8px; }
.diario-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }

/* Uma linha por ação: hora, frase e cliente. A faixa colorida à esquerda separa o que é
   criação, o que é conclusão e o que é exclusão sem precisar de ícone nenhum. */
.diario-item {
  display: flex; align-items: baseline; gap: 12px; font-size: .88rem;
  padding: 6px 10px; border-left: 3px solid var(--linha); border-radius: 0 var(--raio) var(--raio) 0;
  background: var(--papel);
}
.diario-hora { color: var(--tinta-fraca); font-variant-numeric: tabular-nums; white-space: nowrap; }
.diario-texto { flex: 1; overflow-wrap: anywhere; }
.diario-cliente { color: var(--tinta-fraca); font-size: .8rem; white-space: nowrap; }

.diario-item.diario-criou { border-left-color: var(--azul); }
.diario-item.diario-concluiu { border-left-color: var(--verde); }
/* Exclusão em vermelho, e é a única linha que o diário destaca de propósito: é a ação que não
   deixa nada para trás no quadro, e quem lê o dia precisa bater o olho nela. */
.diario-item.diario-excluiu,
.diario-item.diario-excluiu-recorrencia { border-left-color: var(--vermelho); background: var(--vermelho-fraco); }

@media (max-width: 860px) {
  .diario-barra .campo { margin-left: 0; width: 100%; }
  .diario-item { flex-wrap: wrap; gap: 6px; }
  .carga-linha { flex-wrap: wrap; }
  .carga-barra { order: 3; width: 100%; flex-basis: 100%; }
  .carga-numeros { margin-left: auto; }
  .faixa-abrir { flex-wrap: wrap; }
  .faixa-prazo { margin-left: 0; }
}

@media print {
  .topo, .filtros, .cartao-mover, .cabecalho-acoes, .avisos,
  .calendario-navegacao .botao, .calendario-navegacao .botao-icone { display: none !important; }
  body { background: #fff; }
  .coluna, .cartao, .linha, .dia { box-shadow: none; }
}