:root {
  --fundo: #0B0B0B;
  --superficie: #151515;
  --superficie-alta: #1C1C1C;
  --superficie-topo: #232323;
  --borda: #242424;
  --borda-forte: #333333;
  --acento: #E11D2E;
  --acento-escuro: #B31624;
  --texto: #FFFFFF;
  --texto-fraco: #9A9A9A;
  --raio: 8px;
  --raio-peq: 5px;
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  background: var(--fundo);
  color: var(--texto);
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2C2C2C; border-radius: 6px; border: 2px solid var(--fundo); }
::-webkit-scrollbar-thumb:hover { background: #3A3A3A; }

.texto-fraco { color: var(--texto-fraco); }
.erro { color: var(--acento); }

/* ---------- cabeçalho ---------- */

.topo {
  flex: 0 0 auto;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 16px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
  user-select: none;
}

.topo-marca { display: flex; align-items: center; gap: 10px; }

.topo-traco {
  width: 3px;
  height: 18px;
  border-radius: 2px;
  background: var(--acento);
}

.topo h1 { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: 0.2px; }

.topo-nav { display: flex; gap: 4px; }

.aba {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--texto-fraco);
  font: inherit;
  padding: 5px 12px;
  border-radius: var(--raio-peq);
  cursor: pointer;
}

.aba:hover:not(:disabled) { background: var(--superficie-alta); color: var(--texto); }

.aba.ativa {
  background: var(--superficie-alta);
  border-color: var(--borda);
  color: var(--texto);
  box-shadow: inset 0 -2px 0 var(--acento);
}

.aba:disabled { opacity: 0.3; cursor: default; }

/* ---------- área de conteúdo ---------- */

.conteudo { flex: 1 1 auto; overflow: hidden; display: flex; }

.tela-simples { flex: 1 1 auto; overflow: auto; padding: 20px; }

.painel {
  max-width: 820px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 18px 20px 20px;
}

.painel-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
}

.painel-titulo { margin: 0 0 3px; font-size: 15px; font-weight: 600; }
.painel-sub { margin: 0; color: var(--texto-fraco); max-width: 62ch; }

.secao-titulo {
  margin: 22px 0 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--texto-fraco);
}

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

.botao {
  appearance: none;
  font: inherit;
  color: var(--texto);
  background: var(--superficie-alta);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-peq);
  padding: 6px 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}

.botao:hover:not(:disabled) { background: var(--superficie-topo); border-color: #444; }
.botao:active:not(:disabled) { transform: translateY(1px); }
.botao:disabled { opacity: 0.4; cursor: default; }

.botao-principal {
  background: var(--acento);
  border-color: var(--acento);
  font-weight: 600;
}
.botao-principal:hover:not(:disabled) { background: #F02338; border-color: #F02338; }

.botao-perigo { background: var(--acento-escuro); border-color: var(--acento-escuro); font-weight: 600; }
.botao-perigo:hover:not(:disabled) { background: var(--acento); border-color: var(--acento); }

.botao-pequeno { padding: 3px 9px; font-size: 12px; }
.botao-largo { width: 100%; }

.botao-icone {
  appearance: none;
  font: inherit;
  line-height: 1;
  color: var(--texto-fraco);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  width: 22px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.botao-icone:hover:not(:disabled) { background: var(--superficie-topo); color: var(--texto); }
.botao-icone:disabled { opacity: 0.25; cursor: default; }

.contador-caixa { display: inline-flex; }

.contador {
  background: var(--acento);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 999px;
}

/* ---------- formulário ---------- */

.formulario { display: flex; flex-direction: column; gap: 12px; }
.formulario-par { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.campo { display: flex; flex-direction: column; gap: 4px; }

.campo-rotulo {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--texto-fraco);
}

.campo-dica { font-size: 11px; color: var(--texto-fraco); }

.entrada {
  font: inherit;
  color: var(--texto);
  background: var(--fundo);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-peq);
  padding: 6px 9px;
  width: 100%;
  outline: none;
}

.entrada::placeholder { color: #5C5C5C; }
.entrada:focus { border-color: var(--acento); }
.area { resize: vertical; min-height: 62px; }

.busca { margin: 0 0 8px; }

/* ---------- cor ---------- */

.cor-escolha { display: flex; align-items: center; gap: 10px; }
.cor-amostras { display: flex; flex-wrap: wrap; gap: 5px; }

.cor-amostra {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid transparent;
  box-shadow: 0 0 0 1px var(--borda-forte);
  cursor: pointer;
  padding: 0;
}
.cor-amostra.ativa { border-color: var(--fundo); box-shadow: 0 0 0 2px var(--texto); }

.cor-nativa {
  width: 34px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--borda-forte);
  border-radius: 4px;
  background: var(--fundo);
  cursor: pointer;
}

/* ---------- tela com lateral ---------- */

.tela-lateral {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 0;
}

.lateral {
  border-right: 1px solid var(--borda);
  background: var(--superficie);
  padding: 12px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.lateral-topo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }

.lista-clientes {
  flex: 1 1 auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 -4px;
  padding: 0 4px;
}

.item-cliente {
  appearance: none;
  font: inherit;
  text-align: left;
  background: transparent;
  color: var(--texto);
  border: 1px solid transparent;
  border-left: 2px solid transparent;
  border-radius: var(--raio-peq);
  padding: 6px 9px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.item-cliente:hover { background: var(--superficie-alta); }

.item-cliente.ativo {
  background: var(--superficie-alta);
  border-color: var(--borda-forte);
  border-left-color: var(--acento);
}

.item-cliente-nome { font-weight: 600; }
.item-cliente-arroba { font-size: 11px; color: var(--texto-fraco); }

.detalhe { overflow-y: auto; padding: 20px 24px; }

.detalhe-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--borda);
}

.detalhe-nome { margin: 0; font-size: 20px; font-weight: 600; }
.detalhe-acoes { display: flex; gap: 6px; }

.grade-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.info {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-peq);
  padding: 9px 11px;
}

.info-rotulo {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--texto-fraco);
  margin-bottom: 2px;
}

.info-valor { white-space: pre-wrap; word-break: break-word; }
.info-vazia { color: #5C5C5C; font-style: italic; }

.bloco-observacoes {
  margin-top: 10px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-peq);
  padding: 9px 11px;
}

.rodape-detalhe { margin-top: 16px; font-size: 12px; }

/* ---------- tags ---------- */

.lista-tags-cadastro { display: flex; flex-direction: column; gap: 4px; }

.linha-tag {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--superficie-alta);
  border: 1px solid var(--borda);
  border-radius: var(--raio-peq);
  padding: 6px 10px;
}

.linha-tag-inativa { opacity: 0.6; }
.linha-tag-ordem { display: flex; flex-direction: column; gap: 1px; }
.linha-tag-nome { flex: 1 1 auto; font-weight: 600; }
.linha-tag-acoes { display: flex; gap: 5px; }

.ponto-tag {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--texto-fraco);
}

/* ---------- arquivados ---------- */

.lista-arquivados { display: flex; flex-direction: column; gap: 4px; }

.linha-arquivado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--superficie-alta);
  border: 1px solid var(--borda);
  border-radius: var(--raio-peq);
  padding: 7px 11px;
}

.linha-arquivado-nome { font-weight: 600; }

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

.estado-vazio { padding: 22px 6px; text-align: center; }
.estado-vazio-titulo { color: var(--texto-fraco); font-weight: 600; }
.estado-vazio-texto { color: #5C5C5C; font-size: 12px; margin-top: 3px; }

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

.modal-fundo {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.66);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  z-index: 100;
  animation: aparecer 0.1s ease-out;
}

.modal-fundo.saindo { opacity: 0; transition: opacity 0.09s ease-in; }

.modal {
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  width: 100%;
  max-width: 560px;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px 12px 16px;
  border-bottom: 1px solid var(--borda);
}

.modal-titulo { margin: 0; font-size: 14px; font-weight: 600; }

.modal-fechar { width: 26px; height: 26px; font-size: 17px; }

.modal-corpo { padding: 16px; overflow-y: auto; }

.modal-rodape {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  padding: 12px 16px;
  border-top: 1px solid var(--borda);
  background: var(--fundo);
}

@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }

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

.avisos {
  position: fixed;
  bottom: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 200;
  pointer-events: none;
}

.aviso {
  background: var(--superficie-topo);
  border: 1px solid var(--borda-forte);
  border-left: 3px solid var(--texto-fraco);
  border-radius: var(--raio-peq);
  padding: 8px 13px;
  max-width: 380px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  animation: entrarAviso 0.14s ease-out;
}

.aviso-erro { border-left-color: var(--acento); }
.aviso.saindo { opacity: 0; transform: translateX(8px); transition: all 0.18s ease-in; }

@keyframes entrarAviso {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ================================================================== *
 * Barra de navegação das telas de calendário                          *
 * ================================================================== */

.tela-cheia {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.barra {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 14px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
}

.barra-esquerda { display: flex; align-items: center; gap: 6px; }
.barra-direita { display: flex; align-items: center; gap: 14px; }

.barra-periodo {
  margin-left: 8px;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}

.legenda {
  display: flex;
  gap: 11px;
  color: var(--texto-fraco);
  font-size: 11px;
}

.legenda-item { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }

.legenda-ponto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

/* ================================================================== *
 * Grade semanal                                                       *
 * ================================================================== */

.gs-rolagem {
  flex: 1 1 auto;
  overflow: auto;
  background: var(--fundo);
}

.gs-grade {
  display: grid;
  grid-template-columns: 190px repeat(7, minmax(160px, 1fr));
  min-width: 1290px;
  align-items: stretch;
}

.gs-grade.gs-sem-grade { display: block; min-width: 0; }

.gs-celula {
  border-right: 1px solid var(--borda);
  border-bottom: 1px solid var(--borda);
  min-width: 0;
}

.gs-cabeca {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--superficie-alta);
  border-bottom: 1px solid var(--borda-forte);
  padding: 7px 10px;
  user-select: none;
}

.gs-canto {
  left: 0;
  z-index: 3;
  border-right: 1px solid var(--borda-forte);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--texto-fraco);
  display: flex;
  align-items: center;
}

.gs-dia { display: flex; align-items: baseline; gap: 6px; }
.gs-dia-nome { font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--texto-fraco); }
.gs-dia-numero { font-size: 16px; font-weight: 700; }
.gs-dia-mes { font-size: 11px; color: var(--texto-fraco); }

.gs-cabeca.gs-hoje { background: #241016; box-shadow: inset 0 -2px 0 var(--acento); }
.gs-cabeca.gs-hoje .gs-dia-numero { color: var(--acento); }

.gs-cliente {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--superficie);
  border-right: 1px solid var(--borda-forte);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
}

.gs-cliente-nome {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gs-cliente-arroba { font-size: 11px; color: var(--texto-fraco); }
.gs-cliente-total { font-size: 10px; color: #5C5C5C; margin-top: 2px; }

.gs-caixa {
  background: var(--fundo);
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 78px;
  position: relative;
}

.gs-caixa.gs-fds { background: #0E0E0E; }
.gs-caixa.gs-hoje { background: #120A0C; }
.gs-caixa:hover { background: #131313; }
.gs-caixa.gs-fds:hover { background: #151515; }

.gs-adicionar {
  appearance: none;
  border: 1px dashed var(--borda-forte);
  background: transparent;
  color: var(--texto-fraco);
  border-radius: var(--raio-peq);
  height: 20px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.08s;
  padding: 0;
}

.gs-caixa:hover .gs-adicionar { opacity: 1; }
.gs-adicionar:hover { border-color: var(--acento); color: var(--acento); }
.gs-adicionar:focus-visible { opacity: 1; }

/* ================================================================== *
 * Card de demanda                                                     *
 * ================================================================== */

.cartao-demanda {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-peq);
  padding: 5px 6px 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: relative;
}

.cartao-demanda:hover { border-color: var(--borda-forte); background: var(--superficie-alta); }

.cartao-topo { display: flex; align-items: center; gap: 5px; min-width: 0; }

/* ================================================================== *
 * Os dois chips do card: status e tag                                 *
 *                                                                     *
 * A métrica é declarada uma vez para os dois. Mesma altura, mesmo      *
 * padding, mesmo raio, mesma fonte: é o que faz eles parecerem um par  *
 * e não dois elementos que por acaso ficaram do lado um do outro.      *
 *                                                                     *
 * `flex: 0 0 auto` dá a cada um a largura do próprio conteúdo, sem     *
 * esticar e sem encolher — é isso que garante que a tag quebre para a  *
 * linha de baixo em vez de ser truncada quando não cabe.               *
 * ================================================================== */

.chip-status,
.pilula-tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border: 1px solid;
  border-radius: 999px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.05em;
  white-space: nowrap;
  flex: 0 0 auto;
  max-width: 100%;
}

/*
 * A tag é neutra. A cor saiu porque um card com várias tags virava várias
 * cores disputando atenção, e a única cor que muda o que a pessoa faz — a do
 * estado — se perdia no meio. A cor da tag continua viva na visão Mensal e no
 * cadastro, que é onde ela resolve alguma coisa.
 */
.pilula-tag {
  gap: 5px;
  border-color: var(--borda-forte);
  background: var(--superficie-topo);
  color: var(--texto);
}

/* só no cadastro de tags: a amostra da cor escolhida */
.pilula-ponto { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }

.cartao-ferramentas {
  margin-left: auto;
  display: flex;
  gap: 1px;
  opacity: 0;
  transition: opacity 0.08s;
}

.cartao-demanda:hover .cartao-ferramentas { opacity: 1; }
.cartao-ferramentas .botao-icone { width: 18px; height: 17px; font-size: 11px; }
.botao-icone-perigo:hover:not(:disabled) { color: var(--acento); }

.cartao-cliente {
  font-weight: 600;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cartao-data { font-size: 11px; color: var(--texto-fraco); }

.cartao-tema {
  font-size: 12px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.cartao-tema-vazio { color: #4F4F4F; font-style: italic; }

.cartao-link { display: flex; align-items: center; gap: 3px; min-height: 19px; }

.botao-link {
  appearance: none;
  font: inherit;
  font-size: 11px;
  line-height: 1;
  color: var(--texto);
  background: var(--superficie-topo);
  border: 1px solid var(--borda-forte);
  border-radius: 4px;
  padding: 3px 8px;
  cursor: pointer;
}

.botao-link:hover { border-color: var(--acento); color: var(--acento); }

.link-vazio {
  appearance: none;
  font: inherit;
  font-size: 11px;
  line-height: 1;
  color: #5C5C5C;
  background: transparent;
  border: none;
  padding: 3px 2px;
  cursor: pointer;
}

.link-vazio:hover { color: var(--texto-fraco); text-decoration: underline; }

.lapis-link { opacity: 0; width: 18px; height: 17px; font-size: 11px; }
.cartao-demanda:hover .lapis-link { opacity: 1; }

.entrada-inline { font-size: 11px; padding: 2px 6px; }

/* ================================================================== *
 * Visão mensal                                                        *
 * ================================================================== */

.barra-dica { font-size: 11px; }

.vm-rolagem {
  flex: 1 1 auto;
  overflow: auto;
  padding: 10px;
  display: flex;
}

.vm-grade {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  min-width: 780px;
  min-height: 0;
}

.vm-cabeca {
  padding: 4px 6px 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--texto-fraco);
  text-align: center;
  user-select: none;
}

.vm-dia {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-peq);
  padding: 4px 5px 5px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 0;
  overflow: hidden;
  cursor: pointer;
}

.vm-dia:hover { border-color: var(--borda-forte); background: var(--superficie-alta); }

.vm-fds { background: #101010; }
.vm-fora { opacity: 0.42; }

.vm-hoje { border-color: var(--acento); }
.vm-hoje .vm-dia-numero { color: var(--acento); }

.vm-dia-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex: 0 0 auto;
}

.vm-dia-numero { font-size: 13px; font-weight: 700; line-height: 1.2; }

.vm-dia-total {
  font-size: 10px;
  color: var(--texto-fraco);
  background: var(--superficie-topo);
  border-radius: 999px;
  padding: 0 5px;
  line-height: 15px;
}

.vm-dia-lista {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vm-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  line-height: 1.4;
  background: var(--superficie-alta);
  border-radius: 3px;
  padding: 0 5px;
  min-width: 0;
  white-space: nowrap;
}

.vm-ponto { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }

.vm-item-tag { color: var(--texto); flex: 0 0 auto; }

.vm-item-cliente {
  color: var(--texto-fraco);
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.vm-mais {
  flex: 0 0 auto;
  font-size: 10px;
  color: var(--texto-fraco);
  padding-left: 5px;
  line-height: 15px;
}

/* lista dentro do modal do dia */

.dia-lista { display: flex; flex-direction: column; gap: 6px; }
.dia-lista .cartao-demanda { padding: 7px 8px 8px; }
.dia-lista .cartao-ferramentas { opacity: 1; }
.dia-lista .lapis-link { opacity: 1; }
.dia-lista .cartao-tema { font-size: 12.5px; }

/* ================================================================== *
 * Arrastar e soltar                                                   *
 * ================================================================== */

.cartao-demanda[draggable="true"],
.vm-item[draggable="true"] { cursor: grab; }

.cartao-demanda.arrastando,
.vm-item.arrastando { opacity: 0.3; }

body.arrastando-algo .cartao-demanda,
body.arrastando-algo .vm-item { cursor: grabbing; }

/* enquanto arrasta, os filhos não devem roubar os eventos da célula */
body.arrastando-algo .cartao-demanda *,
body.arrastando-algo .vm-item * { pointer-events: none; }

.gs-caixa.alvo-ativo {
  background: #1C0E12;
  box-shadow: inset 0 0 0 2px var(--acento);
}

.vm-dia.alvo-ativo {
  background: #1C0E12;
  border-color: var(--acento);
  box-shadow: inset 0 0 0 1px var(--acento);
}

/* resumo dentro do modal de duplicar */

.resumo-copia {
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: var(--raio-peq);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.resumo-copia-linha { display: flex; align-items: center; gap: 8px; }

/* ================================================================== *
 * Planejador em lote                                                  *
 * ================================================================== */

.pl-rolagem { flex: 1 1 auto; overflow: auto; padding: 14px 16px 24px; }

.pl-campo-inicial { display: flex; align-items: center; gap: 7px; font-size: 11px; }
.pl-inicial { width: 138px; padding: 4px 7px; }
.pl-total { font-size: 12px; white-space: nowrap; }

.pl-aviso {
  background: #16100F;
  border: 1px solid var(--borda-forte);
  border-left: 3px solid var(--acento);
  border-radius: var(--raio-peq);
  padding: 8px 12px;
  color: var(--texto-fraco);
  margin-bottom: 14px;
  max-width: 100%;
}

.pl-aviso strong { color: var(--texto); }

.pl-corpo { display: flex; flex-direction: column; gap: 14px; }

.pl-semana {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
}

.pl-semana-topo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px 7px 12px;
  background: var(--superficie-alta);
  border-bottom: 1px solid var(--borda);
}

.pl-semana-rotulo {
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.pl-semana-datas { color: var(--texto-fraco); flex: 1 1 auto; }
.pl-remover:hover:not(:disabled) { color: var(--acento); }

.pl-grade {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: var(--borda);
}

.pl-dia {
  background: var(--fundo);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 92px;
  cursor: pointer;
}

.pl-dia:hover { background: #121212; }
.pl-fds { background: #0E0E0E; }
.pl-hoje { box-shadow: inset 0 2px 0 var(--acento); }

.pl-dia-topo { display: flex; align-items: baseline; gap: 3px; pointer-events: none; }
.pl-dia-nome { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--texto-fraco); }
.pl-dia-numero { font-size: 14px; font-weight: 700; margin-left: 2px; }
.pl-dia-mes { font-size: 10px; color: var(--texto-fraco); }

.pl-ja-tem {
  margin-left: auto;
  font-size: 9px;
  color: #6B6B6B;
  border: 1px solid var(--borda);
  border-radius: 999px;
  padding: 0 5px;
  line-height: 14px;
  pointer-events: auto;
}

.pl-dia-lista { display: flex; flex-direction: column; gap: 4px; }

.pl-cartao {
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-peq);
  padding: 4px 5px 5px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  cursor: default;
}

.pl-cartao-topo { display: flex; align-items: center; gap: 4px; }
.pl-ponto { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }

.pl-select {
  padding: 2px 4px;
  font-size: 11px;
  flex: 1 1 auto;
  min-width: 0;
}

.pl-titulo {
  font-size: 11px;
  padding: 3px 5px;
  resize: vertical;
  min-height: 34px;
  line-height: 1.35;
}

.pl-adicionar {
  appearance: none;
  border: 1px dashed var(--borda-forte);
  background: transparent;
  color: var(--texto-fraco);
  border-radius: var(--raio-peq);
  height: 20px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  margin-top: auto;
  opacity: 0.35;
  transition: opacity 0.08s;
}

.pl-dia:hover .pl-adicionar { opacity: 1; }
.pl-adicionar:hover { border-color: var(--acento); color: var(--acento); }

.pl-rodape { margin-top: 14px; display: flex; justify-content: center; }

/* ================================================================== *
 * Exportação em PDF e histórico                                       *
 * ================================================================== */

.linha-arquivado-info { flex: 1 1 auto; min-width: 0; }
.linha-arquivado .botao { flex: 0 0 auto; }

.exp-corpo { display: flex; flex-direction: column; gap: 8px; }

.exp-cliente {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--borda);
  margin-bottom: 4px;
}

.exp-nome { font-size: 17px; font-weight: 600; }

.exp-selo {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--texto-fraco);
  border: 1px solid var(--borda-forte);
  border-radius: 999px;
  padding: 1px 7px;
}

.periodo-caixa {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--fundo);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-peq);
  padding: 8px 10px;
  min-height: 52px;
}

.periodo-texto { flex: 1 1 auto; min-width: 0; }
.periodo-valor { font-weight: 600; }
.periodo-dias { font-size: 11px; color: var(--texto-fraco); margin-top: 1px; }

.lapis-periodo { opacity: 0; flex: 0 0 auto; }
.periodo-caixa:hover .lapis-periodo,
.lapis-periodo:focus-visible { opacity: 1; }

.periodo-edicao { display: flex; align-items: flex-end; gap: 8px; width: 100%; }
.periodo-campo { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; }
.periodo-botoes { display: flex; gap: 2px; padding-bottom: 3px; }

.exp-contagem { font-size: 12px; }

.exp-nota {
  font-size: 11px;
  line-height: 1.45;
  background: var(--superficie-alta);
  border: 1px solid var(--borda);
  border-radius: var(--raio-peq);
  padding: 8px 10px;
}

.hist-corpo { display: flex; flex-direction: column; gap: 2px; }

.hist-resumo { font-size: 12px; margin-bottom: 6px; }

.hist-mes {
  margin: 12px 0 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--texto-fraco);
  border-bottom: 1px solid var(--borda);
  padding-bottom: 3px;
}

.hist-linha {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px;
}

.hist-data {
  flex: 0 0 42px;
  font-variant-numeric: tabular-nums;
  color: var(--texto-fraco);
  font-size: 12px;
}

.hist-tema {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.hist-status {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* ================================================================== *
 * Menu do app                                                         *
 * ================================================================== */

.topo-divisor {
  width: 1px;
  height: 18px;
  background: var(--borda-forte);
  margin: 0 4px;
}

.menu-caixa { position: relative; display: inline-flex; }

.menu-botao {
  appearance: none;
  font: inherit;
  font-size: 16px;
  line-height: 1;
  color: var(--texto-fraco);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--raio-peq);
  padding: 4px 10px;
  cursor: pointer;
}

.menu-botao:hover { background: var(--superficie-alta); color: var(--texto); }

.menu-suspenso {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 90;
  min-width: 268px;
  background: var(--superficie-alta);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55);
  padding: 5px;
  animation: aparecer 0.09s ease-out;
}

.menu-secao {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--texto-fraco);
  padding: 5px 8px 4px;
}

.menu-item {
  appearance: none;
  font: inherit;
  text-align: left;
  width: 100%;
  background: transparent;
  color: var(--texto);
  border: none;
  border-radius: var(--raio-peq);
  padding: 6px 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.menu-item:hover { background: var(--superficie-topo); }
.menu-item-rotulo { font-weight: 600; }
.menu-item-descricao { font-size: 11px; color: var(--texto-fraco); }

/* ---------- modal de importação ---------- */

.imp-corpo { display: flex; flex-direction: column; gap: 12px; }

.imp-alerta {
  background: #1C0E12;
  border: 1px solid var(--acento-escuro);
  border-radius: var(--raio-peq);
  padding: 9px 11px;
  line-height: 1.45;
}

.imp-alerta strong { color: var(--acento); }

.imp-arquivo {
  background: var(--fundo);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-peq);
  padding: 8px 10px;
}

.imp-nome { font-weight: 600; word-break: break-all; }

.imp-tabela {
  border: 1px solid var(--borda);
  border-radius: var(--raio-peq);
  overflow: hidden;
}

.imp-linha {
  display: grid;
  grid-template-columns: 1fr 60px 22px 60px;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-bottom: 1px solid var(--borda);
}

.imp-linha:last-child { border-bottom: none; }

.imp-cabeca {
  background: var(--superficie-alta);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--texto-fraco);
}

.imp-rotulo { font-weight: 600; }
.imp-agora, .imp-depois { text-align: right; font-variant-numeric: tabular-nums; }
.imp-agora { color: var(--texto-fraco); }
.imp-seta { text-align: center; color: var(--texto-fraco); }
.imp-mudou { color: var(--acento); font-weight: 700; }

.imp-nota { font-size: 11px; line-height: 1.45; }

/* ================================================================== *
 * Chip de status                                                      *
 * ================================================================== */

.chip-status {
  appearance: none;
  position: relative;
  text-transform: uppercase;
  cursor: pointer;
}

/*
 * A área de clique cresce sem mexer na altura visual.
 *
 * O chip tem 22px; um alvo de 22px é pequeno para o mouse e pequeno demais
 * para o polegar. Este pseudo-elemento estende a região clicável para 32px no
 * desktop (44px no celular, no bloco responsivo) por cima e por baixo, e o
 * chip continua desenhado com a mesma altura.
 *
 * Ele fica atrás dos irmãos seguintes na ordem do DOM, então a sobra que
 * avança sobre a linha do responsável não rouba o toque do avatar.
 */
.chip-status::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 32px;
  transform: translateY(-50%);
}

/*
 * Pendente em vermelho, concluído em verde: fundo com a cor em baixa
 * opacidade, borda na cor cheia.
 *
 * O texto do pendente é um tom acima da borda, e não a cor cheia, por causa
 * do contraste: #E11D2E sobre este fundo dá 3,44:1, abaixo dos 4,5 que texto
 * pequeno pede, e "PENDENTE" é o rótulo que mais aparece na tela. O tom mais
 * claro sobe para 5,98:1 e continua lendo como o mesmo vermelho ao lado da
 * borda. O verde não precisa disso: cheio já dá 6,15:1.
 */
.chip-status[data-status="0"] {
  border-color: var(--acento);
  color: #FF6B78;
  background: rgba(225, 29, 46, 0.16);
}

.chip-status[data-status="1"] {
  border-color: #22C55E;
  color: #22C55E;
  background: rgba(34, 197, 94, 0.16);
}

.chip-status:hover:not(.chip-status-leitura) { filter: brightness(1.25); }
.chip-status:active:not(.chip-status-leitura) { transform: translateY(1px); }

.chip-status:focus-visible {
  outline: 2px solid var(--texto);
  outline-offset: 2px;
}

/* cargo somente leitura: continua informando, deixa de prometer clique */
.chip-status-leitura { cursor: default; }
.chip-status-leitura::after { content: none; }

/*
 * Na tela da demanda o chip não cresce.
 *
 * Ele divide a linha com a tag ali também, e um status maior que a tag
 * quebraria a regra de que os dois têm a mesma altura. O que a tela da demanda
 * ganha é só um pouco mais de respiro lateral.
 */
.chip-status-grande { padding: 0 12px; }

/* ---------- card com título ---------- */

.cartao-linha-tag { display: flex; min-width: 0; }

.cartao-titulo {
  font-size: 12px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.cartao-titulo-vazio { color: #4F4F4F; font-style: italic; }

.cartao-demanda { cursor: pointer; }
.cartao-demanda:hover { border-color: var(--acento); }

/* ================================================================== *
 * Tela da demanda                                                     *
 * ================================================================== */

/*
 * A tela da demanda rola.
 *
 * Era `overflow: hidden`, e funcionava enquanto o cabeçalho cabia na tela.
 * Depois que ele ganhou prioridade, data da solicitação, data de conclusão,
 * responsáveis e a marca de extra, passou de 200 para 472px — e em 1366×768
 * sobravam 135px de conteúdo inalcançável, sem barra de rolagem para chegar
 * lá. Medi antes de mexer: 668px visíveis para 803px de conteúdo.
 *
 * O respiro lateral é o mesmo das telas de gestão, pela mesma conta, para a
 * demanda não ficar presa na borda esquerda enquanto o resto do app está
 * centralizado.
 */
.td-corpo {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 16px;
  padding-bottom: 24px;
  padding-left: max(var(--respiro-lateral), calc((100% - var(--largura-util)) / 2));
  padding-right: max(var(--respiro-lateral), calc((100% - var(--largura-util)) / 2));
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}

/* O teto de 1100px saiu: quem limita a largura agora é o container do corpo,
   que é o mesmo das telas de gestão. Dois tetos diferentes deixariam a demanda
   mais estreita que o resto do app sem motivo. */
.td-cabecalho {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.td-linha-status { display: flex; align-items: center; gap: 10px; }

.td-grade {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 12px;
}

.td-linha-link { display: flex; align-items: flex-end; gap: 8px; }
.td-campo-link { flex: 1 1 auto; }

/*
 * Com o corpo rolando, a descrição deixa de disputar altura com o cabeçalho.
 * `flex-shrink: 0` é o que importa aqui: sem ele, o flex espremeria o bloco
 * para caber, e a caixa de texto — o campo mais usado da tela — encolheria
 * até virar três linhas. Agora ela tem a altura que pede, e quem cede é a
 * rolagem.
 */
.td-bloco-descricao {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}

.td-descricao-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.td-dica { font-size: 11px; }

.td-descricao {
  flex: 0 0 auto;
  height: 340px;
  min-height: 280px;
  resize: none;
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 13.5px;
  line-height: 1.6;
  padding: 12px 14px;
  white-space: pre-wrap;
  overflow-y: auto;
  tab-size: 2;
}

.td-aviso { font-size: 11px; color: var(--texto-fraco); white-space: nowrap; }
.td-aviso-pendente { color: var(--acento); font-weight: 600; }

/* ================================================================== *
 * Importação de calendário                                            *
 * ================================================================== */

.acoes-topo { display: inline-flex; align-items: center; gap: 6px; }

.botao-importar,
.botao-exportar-conteudos { font-size: 12px; padding: 5px 12px; }

.imp-bloco {
  border: 1px solid var(--borda);
  border-radius: var(--raio-peq);
  overflow: hidden;
}

.imp-bloco-titulo {
  background: var(--superficie-alta);
  border-bottom: 1px solid var(--borda);
  padding: 7px 11px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--texto-fraco);
}

.imp-bloco-entra .imp-bloco-titulo { color: var(--texto); }
.imp-bloco-erro { border-color: var(--acento-escuro); }
.imp-bloco-erro .imp-bloco-titulo { background: #1C0E12; color: var(--acento); }
.imp-bloco-dup .imp-bloco-titulo { background: #17150D; color: #EAB308; }

.imp-resumo, .imp-resumo-final { display: flex; flex-direction: column; gap: 7px; padding: 11px; }

.imp-numero { display: flex; align-items: baseline; gap: 7px; }
.imp-numero strong { font-size: 19px; font-weight: 700; min-width: 26px; }
.imp-numero-fraco strong { color: var(--texto-fraco); font-size: 15px; }
.imp-periodo { font-size: 11px; }

.imp-nomes { display: flex; flex-wrap: wrap; gap: 4px; margin: -2px 0 4px 33px; }

.imp-nome-item {
  background: var(--superficie-alta);
  border: 1px solid var(--borda);
  border-radius: 999px;
  padding: 1px 9px;
  font-size: 11px;
}

.imp-explica { margin: 11px 11px 8px; color: var(--texto-fraco); font-size: 12px; line-height: 1.45; }

.imp-lista { display: flex; flex-direction: column; }

.imp-lista-dup { max-height: 320px; overflow-y: auto; }

.imp-linha-dup, .imp-linha-erro {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 11px;
  border-top: 1px solid var(--borda);
  font-size: 12px;
}

.imp-tipo {
  flex: 0 0 52px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--texto-fraco);
}

.imp-dup-data { flex: 0 0 42px; font-variant-numeric: tabular-nums; color: var(--texto-fraco); }
.imp-dup-cliente { flex: 0 0 auto; font-weight: 600; }
.imp-dup-tag { flex: 0 0 auto; color: var(--texto-fraco); }

.imp-dup-titulo {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.imp-dup-nome { font-weight: 600; }
.imp-motivo { font-size: 11px; }
.imp-onde { flex: 0 0 auto; color: var(--acento); font-weight: 600; }

.imp-mensagem-erro {
  background: var(--fundo);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-peq);
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ================================================================== *
 * Aba Dia                                                             *
 * ================================================================== */

.dia-rolagem { flex: 1 1 auto; overflow-y: auto; padding: 16px 20px 24px; }
.dia-corpo { display: flex; flex-direction: column; gap: 18px; max-width: 1000px; }

/* só a primeira letra: capitalize deixaria "31 De Agosto De 2026" */
.dia-titulo-topo::first-letter { text-transform: uppercase; }
.dia-titulo-topo.dia-hoje { color: var(--acento); }

.dia-contadores { display: inline-flex; gap: 8px; margin-left: 12px; }

.dia-contador {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: 11px;
  color: var(--texto-fraco);
  border: 1px solid var(--borda-forte);
  border-radius: 999px;
  padding: 2px 9px;
}

.dia-contador strong { font-size: 13px; }
.dia-contador-pendente strong { color: var(--acento); }
.dia-contador-concluida strong { color: #22C55E; }

.dia-grupo {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
}

.dia-grupo-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 14px;
  background: var(--superficie-alta);
  border-bottom: 1px solid var(--borda);
}

.dia-grupo-nome { margin: 0; font-size: 14px; font-weight: 600; }
.dia-grupo-total { font-size: 11px; }

.dia-itens { display: flex; flex-direction: column; }

.dia-linha {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-top: 1px solid var(--borda);
  cursor: pointer;
}

.dia-linha:first-child { border-top: none; }
.dia-linha:hover { background: var(--superficie-alta); }

.dia-titulo {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.dia-sem-link { font-size: 11px; flex: 0 0 auto; }

/* ================================================================== *
 * Filtros de exibição                                                 *
 * ================================================================== */

.filtro-caixa { position: relative; display: inline-flex; }

.filtro-botao { font-size: 12px; padding: 5px 10px; gap: 5px; }
.filtro-botao.filtro-ativo { border-color: var(--acento); color: var(--acento); }
.filtro-seta { font-size: 9px; opacity: 0.7; }

.filtro-painel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 90;
  min-width: 230px;
  background: var(--superficie-alta);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55);
  padding: 5px;
  animation: aparecer 0.09s ease-out;
}

.filtro-lista { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; }

.filtro-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: var(--raio-peq);
  cursor: pointer;
  font-size: 12.5px;
}

.filtro-item:hover { background: var(--superficie-topo); }
.filtro-cor { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }

.filtro-nome {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filtro-vazio { padding: 10px; font-size: 12px; }

.filtro-rodape {
  display: flex;
  gap: 5px;
  padding: 6px 4px 2px;
  margin-top: 4px;
  border-top: 1px solid var(--borda);
}

.filtro-rodape .botao { flex: 1 1 auto; }

/* ================================================================== *
 * Exportação seletiva de calendário                                   *
 * ================================================================== */

.exp-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.exp-acoes { display: inline-flex; gap: 5px; }

.exp-lista {
  border: 1px solid var(--borda);
  border-radius: var(--raio-peq);
  max-height: 240px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.exp-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 11px;
  border-top: 1px solid var(--borda);
  cursor: pointer;
  font-size: 12.5px;
}

.exp-item:first-child { border-top: none; }
.exp-item:hover { background: var(--superficie-alta); }
.exp-item-nome { font-weight: 600; }

.exp-periodo {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  cursor: pointer;
}

.exp-datas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.exp-resumo { font-size: 12px; }

.exp-nota {
  font-size: 11px;
  line-height: 1.45;
  background: var(--superficie-alta);
  border: 1px solid var(--borda);
  border-radius: var(--raio-peq);
  padding: 8px 10px;
}

.imp-alerta-nota {
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid var(--acento-escuro);
  font-size: 12px;
  line-height: 1.45;
  color: var(--texto-fraco);
}

.imp-alerta-nota strong { color: var(--texto); }

/* ================================================================== *
 * Login                                                               *
 * ================================================================== */

.corpo-login {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.login-caixa {
  width: 100%;
  max-width: 360px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 26px 24px 20px;
}

.login-marca { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.login-marca h1 { margin: 0; font-size: 15px; font-weight: 600; }

.login-form { display: flex; flex-direction: column; gap: 14px; }
.login-form .botao-largo { margin-top: 6px; padding: 9px 12px; }

.login-erro {
  background: #1C0E12;
  border: 1px solid var(--acento-escuro);
  border-radius: var(--raio-peq);
  padding: 8px 11px;
  font-size: 12.5px;
  color: var(--acento);
}

.login-nota { margin: 18px 0 0; font-size: 11px; line-height: 1.45; }

/* ================================================================== *
 * Usuários                                                            *
 * ================================================================== */

.lista-usuarios { display: flex; flex-direction: column; gap: 4px; }

.linha-usuario {
  display: grid;
  grid-template-columns: 1fr 140px 90px auto;
  align-items: center;
  gap: 12px;
  background: var(--superficie-alta);
  border: 1px solid var(--borda);
  border-radius: var(--raio-peq);
  padding: 8px 11px;
}

.linha-usuario-inativo { opacity: 0.55; }

.usuario-identidade { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.usuario-nome { font-weight: 600; }

.usuario-eu {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--texto-fraco);
  border: 1px solid var(--borda-forte);
  border-radius: 999px;
  padding: 0 6px;
}

.usuario-papel { font-size: 12px; color: var(--texto-fraco); }
.usuario-papel-admin { color: var(--acento); font-weight: 600; }
.usuario-situacao { font-size: 11px; color: var(--texto-fraco); }
.usuario-acoes { display: flex; gap: 5px; }

.menu-conta {
  padding: 8px 9px 10px;
  border-bottom: 1px solid var(--borda);
  margin-bottom: 4px;
}

.menu-conta-nome { font-weight: 600; }
.menu-conta-papel { font-size: 11px; color: var(--texto-fraco); }

.somente-leitura {
  opacity: 0.75;
  cursor: default;
  background: var(--superficie);
}

/* ================================================================== *
 * Folha de impressão                                                  *
 * ================================================================== */

/* Na tela ela não aparece: só existe para a impressão. */
#folha-impressao { display: none; }

/* ================================================================== *
 * Expansão: responsável, prazo, dashboard, lista e rotinas            *
 * ================================================================== */

/* ---------------- avatar e responsável no card ---------------- */

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border-radius: 50%;
  background: var(--superficie-topo);
  border: 1px solid var(--borda-forte);
  color: var(--texto);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.avatar-pequeno { width: 18px; height: 18px; flex-basis: 18px; font-size: 8px; }

/* Sem responsável não é erro, é estado: tom apagado, sem vermelho. */
.avatar-vago {
  background: transparent;
  border-style: dashed;
  color: var(--texto-fraco);
  font-weight: 400;
}

.cartao-responsavel {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-size: 11px;
}

.cartao-responsavel-nome {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cartao-responsavel-vago .cartao-responsavel-nome {
  color: var(--texto-fraco);
  font-style: italic;
}

/* ---------------- atraso e extra ---------------- */

/*
 * A borda esquerda marca o card atrasado, mas nunca sozinha: o selo abaixo
 * leva ícone e a palavra "atrasada", para quem não distingue vermelho.
 */
.cartao-atrasada {
  border-left: 3px solid var(--acento);
  padding-left: 7px;
}

.selo-atraso {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid #E11D2E66;
  background: #E11D2E1F;
  color: #FF8E99;
  font-size: 10px;
  font-weight: 600;
}

.selo-atraso-icone { font-size: 9px; }

.selo-extra {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid #F59E0B66;
  background: #F59E0B1F;
  color: #F5C56B;
  font-size: 10px;
  font-weight: 600;
  text-transform: lowercase;
}

/* ---------------- chip em leitura (espectador) ---------------- */

.chip-leitura { cursor: default; opacity: 0.85; }
.chip-leitura:hover { filter: none; }

/* ---------------- prioridade ---------------- */

.pilula-prioridade {
  display: inline-flex;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--borda-forte);
  font-size: 10px;
  font-weight: 600;
}

.pilula-prioridade-alta { border-color: #E11D2E66; background: #E11D2E1F; color: #FF8E99; }
.pilula-prioridade-media { border-color: var(--borda-forte); background: var(--superficie-topo); color: var(--texto); }
.pilula-prioridade-baixa { border-color: #3B82F655; background: #3B82F615; color: #9CC2F7; }

/* ---------------- indicador de prazo ---------------- */

.selo-prazo {
  display: inline-flex;
  padding: 1px 7px;
  border-radius: var(--raio-peq);
  border: 1px solid var(--borda-forte);
  background: var(--superficie-topo);
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

.selo-prazo-ok { border-color: #22C55E66; background: #22C55E1F; color: #86E5A6; }
.selo-prazo-atraso { border-color: #E11D2E66; background: #E11D2E1F; color: #FF8E99; }
.selo-prazo-hoje { border-color: #F59E0B66; background: #F59E0B1F; color: #F5C56B; }
.selo-prazo-perto { border-color: #F59E0B44; background: #F59E0B12; color: #E0B978; }
.selo-prazo-neutro { color: var(--texto-fraco); }

/* ---------------- campos novos do formulário ---------------- */

.campo-marca {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 11px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-peq);
  background: var(--superficie-alta);
  cursor: pointer;
}

.campo-marca input { margin-top: 2px; flex: 0 0 auto; }
.campo-marca > span { display: flex; flex-direction: column; gap: 1px; }
.campo-marca-titulo { font-weight: 600; }
.campo-marca.somente-leitura { cursor: default; opacity: 0.6; }

.td-grade-prazo { align-items: end; }
.td-concluido { font-size: 11px; }
.aviso-inline { color: #F5C56B; }

/* ---------------- painel em rolagem (dashboard e rotinas) ---------------- */

.painel-rolagem {
  flex: 1 1 auto;
  overflow: auto;
  padding: 16px 20px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.painel-secao { margin: 0; }
.carregando { padding: 18px 2px; }

/* ---------------- cartões de número ---------------- */

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.kpi {
  padding: 12px 14px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-peq);
  background: var(--superficie-alta);
}

.kpi-rotulo {
  color: var(--texto-fraco);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.kpi-valor { font-size: 26px; font-weight: 600; line-height: 1.2; margin-top: 3px; }
.kpi-detalhe { color: var(--texto-fraco); font-size: 11px; margin-top: 2px; }

.kpi-ok .kpi-valor { color: #86E5A6; }
.kpi-alerta { border-color: #E11D2E55; }
.kpi-alerta .kpi-valor { color: #FF8E99; }

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

.tabela-rolagem { overflow-x: auto; }
.tabela-rolagem-cheia { flex: 1 1 auto; overflow: auto; }

.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.tabela th,
.tabela td {
  padding: 7px 10px;
  text-align: left;
  border-bottom: 1px solid var(--borda);
  vertical-align: middle;
}

.tabela th {
  color: var(--texto-fraco);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  /* o cabeçalho acompanha a rolagem: tabela longa sem isso perde a
     referência de qual coluna é qual */
  position: sticky;
  top: 0;
  background: var(--superficie);
  z-index: 1;
}

.tabela tbody tr:hover { background: var(--superficie-alta); }
.tabela tbody tr:last-child td { border-bottom: none; }

.coluna-numero { text-align: right; white-space: nowrap; }
.coluna-posicao { width: 32px; color: var(--texto-fraco); }
.coluna-ampla { min-width: 240px; }

.tabela-vazia { padding: 6px 0; }
.linha-sem-pessoa td { color: var(--texto-fraco); }

/* atraso na linha: barra à esquerda, não fundo vermelho, para o texto
   continuar legível */
.linha-atrasada td:first-child { box-shadow: inset 3px 0 0 var(--acento); }

.numero-alerta { color: #FF8E99; font-weight: 600; }

/* ---------------- barra proporcional ---------------- */

.barra-mini {
  display: inline-block;
  width: 56px;
  height: 4px;
  border-radius: 999px;
  background: var(--superficie-topo);
  overflow: hidden;
  vertical-align: middle;
}

.barra-mini-larga { width: 120px; height: 6px; }

.barra-mini-preenchida { display: block; height: 100%; border-radius: 999px; }

.celula-com-barra {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  justify-content: flex-end;
}

/* ---------------- células de pessoa e cliente ---------------- */

.celula-pessoa { display: flex; align-items: center; gap: 8px; }
.celula-pessoa-nome { font-weight: 600; }
.celula-pessoa-cargo { font-size: 10px; }
.celula-pessoa-compacta { display: inline-flex; align-items: center; gap: 6px; }
.celula-cliente { display: flex; flex-direction: column; gap: 1px; }
.celula-marcas { display: inline-flex; gap: 4px; margin-left: 4px; }

.etiqueta {
  display: inline-flex;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.etiqueta-carga { border: 1px solid #F59E0B66; background: #F59E0B1F; color: #F5C56B; }
.etiqueta-prazo { border: 1px solid #22C55E66; background: #22C55E1F; color: #86E5A6; }

/* ---------------- tela de lista ---------------- */

.barra-alta { height: auto; min-height: 44px; padding-top: 7px; padding-bottom: 7px; }
.barra-esquerda-quebra { flex-wrap: wrap; row-gap: 6px; }

.lista-corpo { flex: 1 1 auto; overflow: auto; display: flex; flex-direction: column; }

.filtros-lista {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.filtro-grupo { display: inline-flex; align-items: center; gap: 5px; }
.filtro-rotulo { color: var(--texto-fraco); font-size: 11px; }

.filtro-marca {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-peq);
  background: var(--superficie-alta);
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
}

.entrada-compacta { padding: 3px 7px; font-size: 12px; width: auto; }
.tabela-lista td { font-size: 12px; }

.ordenar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.ordenar:hover { color: var(--texto); }
.ordenar-ativa { color: var(--texto); }
.ordenar-seta { width: 8px; font-size: 9px; }

.celula-titulo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: none;
  background: none;
  color: var(--texto);
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-bottom: 1px dotted var(--borda-forte);
}

.celula-titulo:hover { border-bottom-color: var(--acento); color: #FF8E99; }
.celula-titulo-vazio { color: var(--texto-fraco); font-style: italic; }

/* ---------------- pop-up da descrição ---------------- */

.popup-cabecalho { display: flex; flex-direction: column; gap: 10px; }
.popup-linha { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }

.popup-dados {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 12px;
  margin: 0;
  font-size: 12px;
}

.popup-dados dt { color: var(--texto-fraco); }
.popup-dados dd { margin: 0; }

.popup-descricao-caixa {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--borda);
}

/* pre preserva as quebras de linha que a descrição carrega */
.popup-descricao {
  margin: 6px 0 0;
  padding: 11px 13px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-peq);
  background: var(--fundo);
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 46vh;
  overflow: auto;
}

/* ---------------- rotinas ---------------- */

.rotina-lista { display: flex; flex-direction: column; gap: 3px; }

.rotina-progresso {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 10px;
  color: var(--texto-fraco);
  font-size: 12px;
}

.rotina-dono {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--borda);
  font-size: 12px;
  font-weight: 600;
}

.rotina-dono:first-child { margin-top: 0; }

.rotina-item {
  display: grid;
  grid-template-columns: auto 44px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--raio-peq);
  cursor: pointer;
}

.rotina-item:hover { background: var(--superficie-alta); border-color: var(--borda); }

.rotina-travada { cursor: default; opacity: 0.75; }
.rotina-travada:hover { background: none; border-color: transparent; }

.rotina-horario {
  color: var(--texto-fraco);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.rotina-tarefa { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rotina-frequencia { font-size: 11px; white-space: nowrap; }
.rotina-marcado { font-size: 10px; white-space: nowrap; }

/* feito recebe risco e tom apagado: o risco é o sinal que não depende de cor */
.rotina-feita .rotina-tarefa { text-decoration: line-through; color: var(--texto-fraco); }

.dias-semana { display: flex; flex-wrap: wrap; gap: 4px; }

.dia-marca {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-peq);
  background: var(--superficie-alta);
  font-size: 11px;
  cursor: pointer;
}

.lista-rotinas { display: flex; flex-direction: column; }

.linha-rotina-cadastro {
  display: grid;
  grid-template-columns: minmax(110px, auto) 44px 1fr auto auto auto;
  align-items: center;
  gap: 10px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--borda);
}

.linha-rotina-cadastro:last-child { border-bottom: none; }
.linha-inativa { opacity: 0.5; }

/* ---------------- cargo na lista de usuários ---------------- */

.usuario-cargo {
  padding: 2px 8px;
  border: 1px solid var(--borda-forte);
  border-radius: 999px;
  background: var(--superficie-alta);
  color: var(--texto-fraco);
  font-size: 11px;
  white-space: nowrap;
}

.usuario-cargo-espectador {
  border-color: #3B82F655;
  background: #3B82F615;
  color: #9CC2F7;
}

/* ---------------- telas estreitas ---------------- */

@media (max-width: 900px) {
  .rotina-item { grid-template-columns: auto 40px 1fr; row-gap: 3px; }
  .rotina-frequencia, .rotina-marcado { grid-column: 3; }
  .linha-rotina-cadastro { grid-template-columns: 1fr auto; row-gap: 5px; }
  .kpis { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
}

/* ================================================================== *
 * Ajustes: pilha de avatares e grades alinhadas                       *
 * ================================================================== */

/* ---------------- pilha de avatares ---------------- */

/*
 * O card distribui status, tag e ferramentas sem apertar nenhum dos dois.
 *
 * flex-wrap é o que cumpre a regra: quando os dois chips não cabem lado a
 * lado, a tag desce para a linha de baixo inteira, em vez de encolher até
 * virar reticências.
 */
.cartao-topo { gap: 6px; flex-wrap: wrap; row-gap: 4px; }
.cartao-topo .cartao-ferramentas { margin-left: auto; }

/* ---------------- pilha de avatares ---------------- */

.pilha-avatares {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.pilha-avatares .avatar { border-color: var(--superficie); }

/* Sobreposição só a partir de três: com dois, lado a lado lê melhor. */
.pilha-junta .avatar + .avatar { margin-left: -7px; }
.pilha-avatares .avatar + .avatar { margin-left: 2px; }
.pilha-junta .avatar { box-shadow: 0 0 0 1.5px var(--superficie); }

.celula-nomes {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------------- indicador de prazo na lista ---------------- */

.selo-prazo-caixa { display: inline-flex; align-items: center; gap: 6px; }
.selo-prazo-resta { font-size: 10px; white-space: nowrap; }

/* ---------------- escolha de responsáveis ---------------- */

.escolha-caixa { display: flex; flex-direction: column; gap: 6px; }

.escolha-pessoas {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.escolha-pessoa {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px 4px 7px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: var(--superficie-alta);
  cursor: pointer;
  font-size: 12px;
}

.escolha-pessoa:hover { border-color: var(--borda-forte); }
.escolha-pessoa.somente-leitura { cursor: default; opacity: 0.6; }
.escolha-pessoa.escolha-fora { opacity: 0.6; cursor: default; }
.escolha-cargo { font-size: 10px; }

.escolha-aviso { display: none; }
.escolha-aviso-visivel { display: block; }

/* ---------------- grades da tela de usuários ---------------- */

/*
 * Rolagem lateral só em janela estreita. Acima de 900px a grade cabe na
 * largura útil e não existe barra: `visible` em vez de `auto` é o que impede
 * a barra fantasma que aparecia mesmo com espaço sobrando.
 */
.grade-rolagem { overflow-x: visible; }

/*
 * Cada bloco é um grid, e cabeçalho e linhas usam a MESMA classe de grid — é
 * isso que garante que as colunas batam entre as linhas em vez de cada linha
 * se arranjar sozinha.
 *
 * A grade ocupa 100% do container, sem min-width: era o `min-width:
 * max-content` com colunas em px fixo que prendia os três blocos em ~1000px
 * encostados à esquerda, sobrando meia tela vazia e ainda assim cortando o
 * botão "Desativar".
 */
.grade { display: flex; flex-direction: column; width: 100%; }

.grade-linha {
  display: grid;
  align-items: center;        /* centro vertical em toda linha */
  gap: 14px;
  min-height: 56px;           /* respiro: a linha não aperta o conteúdo */
  padding: 8px 2px;
  border-bottom: 1px solid var(--borda);
  font-size: 15px;
}

.grade-linha:last-child { border-bottom: none; }

.grade-cabecalho {
  min-height: 0;
  border-bottom: 1px solid var(--borda-forte);
  padding: 0 2px 8px;
  color: var(--texto-fraco);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/*
 * As colunas flexíveis são `minmax(0, Nfr)`, e o zero é o que importa: com
 * `minmax(auto, 1fr)` a coluna nunca encolhe abaixo do conteúdo e a grade
 * estoura para a direita. Com zero, ela distribui a largura disponível de
 * verdade.
 *
 * A coluna de ações é px fixo, dimensionada para caber os botões inteiros:
 * "Editar"+"Senha"+"Desativar" no bloco de pessoas, e as setas de ordem mais
 * "Editar"+"Arquivar" no de tags. Ação cortada é pior que nome abreviado.
 */
.grade-cargos {
  grid-template-columns:
    minmax(0, 1.4fr) 86px 72px minmax(0, 0.95fr) minmax(0, 0.95fr) minmax(0, 0.85fr) 190px;
}

.grade-pessoas {
  grid-template-columns:
    minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.1fr) minmax(0, 0.9fr) 264px;
}

.grade-tags {
  grid-template-columns:
    minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 0.9fr) 236px;
}

.grade-nome { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; }
.grade-nome-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grade-login { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ações sempre na última coluna, à direita, e nunca comprimidas */
.grade-acoes {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: nowrap;
}

/* o botão não encolhe: é ele que define o mínimo da coluna */
.grade-acoes .botao {
  flex: 0 0 auto;
  font-size: 13px;
  padding: 5px 11px;
  white-space: nowrap;
}

.grade-acoes-cabecalho { text-align: right; }

/* linha desativada perde contraste mas não sai do lugar */
.grade-linha.linha-inativa { opacity: 0.45; }

/* ---------------- chips de largura estável ---------------- */

/*
 * O chip não encolhe e não trunca: `width: max-content` com `justify-self`
 * deixa ele do tamanho do próprio texto dentro de uma coluna que já foi
 * dimensionada para o maior nome. Era o "Gestor de tráfego" cortado.
 */
.chip-fixo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  padding: 2px 10px;
  border: 1px solid var(--borda-forte);
  border-radius: 999px;
  background: var(--superficie-alta);
  font-size: 11px;
  line-height: 1.5;
  white-space: nowrap;
}

.chip-neutro { color: var(--texto); }
.chip-admin { border-color: #E11D2E55; background: #E11D2E15; color: #FF9AA4; }
.chip-ativo { border-color: #22C55E55; background: #22C55E12; color: #86E5A6; }
.chip-inativo { color: var(--texto-fraco); }
.chip-vazio { border-style: dashed; color: var(--texto-fraco); }
.chip-leitura-marca { border-color: #3B82F655; background: #3B82F615; color: #9CC2F7; }

.painel-acoes { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.entrada-cor { padding: 2px; height: 30px; cursor: pointer; }

.nota-contagem { margin-top: 10px; }

/* ---------------- prévia da importação ---------------- */

.imp-alerta {
  padding: 9px 11px;
  margin-bottom: 10px;
  border: 1px solid #F59E0B55;
  border-radius: var(--raio-peq);
  background: #F59E0B12;
  color: #F5C56B;
  font-size: 12px;
}

.imp-atribuicao { display: flex; flex-direction: column; }

.imp-atribuicao-linha {
  display: grid;
  grid-template-columns: minmax(130px, 180px) 46px 1fr;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--borda);
  font-size: 12px;
}

.imp-atribuicao-linha:last-child { border-bottom: none; }
.imp-atribuicao-tag { font-weight: 600; }
.imp-atribuicao-pessoas { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.imp-sem-dono { color: #F5C56B; }

/* ---------------- telas estreitas ---------------- */

@media (max-width: 1100px) {
  /* a grade não quebra: rola dentro do próprio bloco */
  .grade-rolagem { overflow-x: auto; }
}

/* ================================================================== *
 * Largura útil: um container centralizado para todas as telas         *
 * ================================================================== */

/*
 * Em 1920px o conteúdo ficava encostado à esquerda com meia tela vazia. Agora
 * toda tela usa a mesma largura útil, centralizada, e todas alinham entre si:
 * trocar de aba não desloca as colunas.
 */
:root {
  --largura-util: 1400px;
  --respiro-lateral: 32px;
}

/*
 * O truque do padding: quando a janela é menor que a largura útil, o max()
 * escolhe o respiro de 32px; quando é maior, ele cresce para sobrar
 * exatamente (100% - 1400px) / 2 de cada lado.
 *
 * É isso em vez de um <div> a mais em volta: a barra precisa que a borda de
 * baixo atravesse a tela inteira, e só o conteúdo dela fique centralizado.
 * Um wrapper interno resolveria o mesmo, mas exigiria mexer no JavaScript de
 * cinco telas para um problema que é de apresentação.
 */
.barra,
.tela-simples,
.painel-rolagem,
.lista-corpo,
.tela-lateral {
  padding-left: max(var(--respiro-lateral), calc((100% - var(--largura-util)) / 2));
  padding-right: max(var(--respiro-lateral), calc((100% - var(--largura-util)) / 2));
}

/* o padding acima substitui o lateral que essas telas tinham; o vertical fica */
.tela-simples { padding-top: 20px; padding-bottom: 20px; }
.painel-rolagem { padding-top: 18px; padding-bottom: 32px; }

/*
 * Reserva o espaço da barra de rolagem vertical mesmo quando ela não aparece.
 * Sem isso, uma tela de conteúdo curto ficava 10px mais larga que uma de
 * conteúdo longo, e trocar de aba deslocava as colunas — justamente o
 * alinhamento entre telas que se quer aqui.
 */
.tela-simples,
.painel-rolagem,
.tabela-rolagem-cheia {
  scrollbar-gutter: stable;
}

/*
 * Na tela de clientes o container é o grid de duas colunas, e centralizar o
 * grid inteiro mantém a barra lateral colada no conteúdo em vez de largada na
 * borda esquerda da tela.
 */
.tela-lateral { grid-template-columns: 300px minmax(0, 1fr); }

/*
 * A lista é uma tabela larga: o container externo só dá o respiro lateral, e
 * quem rola é a tabela por dentro. `overflow: hidden` aqui é o que evita dois
 * scrollers encaixados — cada um reservava a sua calha e a tabela terminava
 * 10px mais estreita que os blocos das outras telas.
 */
.lista-corpo { padding-top: 0; padding-bottom: 0; overflow: hidden; }

/*
 * Cada bloco ocupa 100% do container, empilhado. O max-width aqui é rede de
 * segurança para o caso de algum bloco entrar num container sem o padding
 * acima.
 */
.painel-rolagem > * {
  width: 100%;
  max-width: var(--largura-util);
  margin-left: auto;
  margin-right: auto;
}

/* ---------------- tabelas ocupam a largura inteira ---------------- */

/*
 * table-layout: fixed distribui as colunas pela largura disponível em vez de
 * deixar a maior célula decidir. Sem isso, uma descrição longa numa linha
 * empurrava as colunas e desalinhava a tabela inteira.
 */
.tabela {
  width: 100%;
  table-layout: fixed;
  font-size: 15px;
}

.tabela th,
.tabela td {
  padding: 10px 12px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tabela tbody tr { min-height: 56px; }
.tabela tbody td { height: 56px; }

/* no dashboard a primeira coluna é sempre nome, e as outras são números */
.tabela th:first-child, .tabela td:first-child { width: auto; }

/* ---------------- a tabela da Lista ---------------- */

/*
 * Dez colunas: as de tamanho previsível levam largura fixa, e as duas de
 * texto livre (cliente e título) ficam com o que sobra. Com table-layout:
 * fixed, quem não tem largura divide o resto — então só preciso declarar as
 * previsíveis.
 */
.tabela-lista { min-width: 0; }
.tabela-lista td { font-size: 14px; }

.tabela-lista th:nth-child(1),  .tabela-lista td:nth-child(1)  { width: 100px; }  /* solicitado */
.tabela-lista th:nth-child(3),  .tabela-lista td:nth-child(3)  { width: 124px; }  /* tipo */
.tabela-lista th:nth-child(5),  .tabela-lista td:nth-child(5)  { width: 190px; }  /* responsáveis */
.tabela-lista th:nth-child(6),  .tabela-lista td:nth-child(6)  { width: 104px; }  /* prioridade */
.tabela-lista th:nth-child(7),  .tabela-lista td:nth-child(7)  { width: 108px; }  /* publicação */
.tabela-lista th:nth-child(8),  .tabela-lista td:nth-child(8)  { width: 116px; }  /* concluída em */
.tabela-lista th:nth-child(9),  .tabela-lista td:nth-child(9)  { width: 72px; }   /* status */
.tabela-lista th:nth-child(10), .tabela-lista td:nth-child(10) { width: 168px; }  /* indicador */

/* cliente tem um mínimo para não virar uma coluna de duas letras */
.tabela-lista th:nth-child(2), .tabela-lista td:nth-child(2) { width: 168px; }

/* o título fica com o resto e pode ter duas linhas antes de cortar */
.tabela-lista td:nth-child(4) { white-space: normal; }
.tabela-lista .celula-titulo { text-align: left; max-width: 100%; }
.tabela-lista .celula-titulo > span:first-child {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* o cabeçalho colado no topo acompanha a rolagem vertical */
.tabela-rolagem-cheia { overflow-x: visible; overflow-y: auto; }

/* ---------------- rolagem lateral só abaixo de 900px ---------------- */

/*
 * Acima de 900px nada rola na horizontal: a largura útil comporta as grades e
 * as tabelas. Abaixo, cada bloco rola dentro do próprio container, sem
 * quebrar a grade — colunas esmagadas até o texto partir no meio são piores
 * que uma barra de rolagem.
 */
@media (max-width: 899px) {
  :root { --respiro-lateral: 16px; }

  .grade-rolagem { overflow-x: auto; }
  .grade { min-width: 880px; }

  .tabela-rolagem-cheia { overflow-x: auto; }
  .tabela-lista { min-width: 1180px; }

  .tela-lateral { grid-template-columns: 1fr; }
}

/* telas médias: mantém tudo inteiro, só reduz o respiro */
@media (max-width: 1200px) {
  :root { --respiro-lateral: 20px; }
}


/* ---------------- Semanal: clientes sem trabalho visível ---------------- */

/*
 * Cliente sem nenhuma demanda visível desce para o fim da lista e perde
 * contraste. A linha divisória marca onde o grupo começa — sem ela, quem
 * rola a grade não sabe se chegou ao fim do trabalho ou se a semana está
 * vazia daquele ponto em diante.
 */
.gs-cliente-vazio .gs-cliente-nome { color: var(--texto-fraco); }
.gs-cliente-vazio .gs-cliente-total { opacity: 0.7; }

.gs-inicio-vazios { border-top: 2px solid var(--borda-forte); }

/* ---------------- mutirão: a lista da confirmação ---------------- */

.mutirao-lista {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--borda);
  border-radius: var(--raio-peq);
  overflow: hidden;
}

.mutirao-linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px 11px;
  border-bottom: 1px solid var(--borda);
  font-size: 13px;
}

.mutirao-linha:last-child { border-bottom: none; }
.mutirao-tag { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ================================================================== *
 * Celular e tablet                                                    *
 *                                                                     *
 * Tudo daqui para baixo está dentro de media query. O desktop não      *
 * enxerga nada disto: acima de 768px o app continua exatamente como    *
 * estava, e é assim que a versão de mesa fica a salvo desta rodada.    *
 *                                                                     *
 * Limites, os mesmos de public/js/dispositivo.js:                      *
 *   < 768px  celular                                                   *
 *   768–1023 tablet                                                    *
 *   >= 1024  desktop                                                   *
 * ================================================================== */

/* a barra de baixo só existe no celular */
.barra-inferior { display: none; }

/* ------------------------------------------------------------------ *
 * Tablet: as abas rolam de lado em vez de espremer                    *
 * ------------------------------------------------------------------ */

@media (min-width: 768px) and (max-width: 1023px) {
  .topo { flex-wrap: wrap; height: auto; padding-bottom: 6px; }

  /*
   * As nove abas não cabem em 768px, mas cabem numa faixa que rola. O
   * -webkit-overflow-scrolling e o scroll-snap deixam o gesto parecer nativo
   * em vez de arrastar solto.
   */
  .topo-nav {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .topo-nav::-webkit-scrollbar { display: none; }
  .aba { flex: 0 0 auto; scroll-snap-align: start; }
  .topo-marca h1 { font-size: 13px; }
}

/* ------------------------------------------------------------------ *
 * Celular                                                             *
 * ------------------------------------------------------------------ */

@media (max-width: 767px) {

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

  body {
    /* o app não rola como página: cada tela rola por dentro */
    overflow: hidden;
    overscroll-behavior-y: none;
  }

  /*
   * Nada de rolagem horizontal da página inteira. Quando algo precisa rolar
   * de lado — uma tabela, a faixa de dias — quem rola é o container, e é ele
   * que ganha overflow-x explícito mais abaixo.
   */
  html, body { max-width: 100%; overflow-x: hidden; }

  /*
   * 16px em todo campo de formulário. Abaixo disso o Safari do iPhone dá zoom
   * ao focar o campo, e a página fica torta até a pessoa fechar o teclado e
   * pinçar de volta. É a regra menos negociável desta folha.
   */
  .entrada,
  .entrada-compacta,
  input, select, textarea {
    font-size: 16px;
  }

  /* ---------------- cabeçalho compacto ---------------- */

  .topo {
    height: auto;
    min-height: 52px;
    padding: 0 14px;
    /* sob o notch: o conteúdo desce, o fundo preto continua subindo */
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: max(14px, env(safe-area-inset-left, 0px));
    padding-right: max(14px, env(safe-area-inset-right, 0px));
    flex: 0 0 auto;
  }

  .topo-marca { min-width: 0; }
  .topo-marca h1 {
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* as abas do topo dão lugar à barra de baixo */
  .topo-nav { display: none; }

  /* ---------------- barra de navegação inferior ---------------- */

  .barra-inferior {
    display: flex;
    flex: 0 0 auto;
    align-items: stretch;
    background: var(--superficie);
    border-top: 1px solid var(--borda);
    /* o respiro do indicador de gesto do iPhone entra como padding, para os
       botões não ficarem embaixo dele */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    z-index: 40;
  }

  .barra-item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    /* 52px de altura útil: acima do mínimo de 44 do alvo de toque */
    min-height: 52px;
    padding: 6px 2px;
    border: none;
    background: none;
    color: var(--texto-fraco);
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .barra-item-icone { font-size: 15px; line-height: 1; }
  .barra-item-rotulo { font-size: 10px; letter-spacing: 0.01em; }

  .barra-item.ativa { color: var(--texto); }
  .barra-item.ativa .barra-item-icone { color: var(--acento); }

  /* o traço em cima do item aceso, para o estado não depender só da cor */
  .barra-item.ativa::before {
    content: '';
    position: absolute;
    margin-top: -6px;
    width: 26px;
    height: 2px;
    border-radius: 0 0 2px 2px;
    background: var(--acento);
  }

  .barra-item { position: relative; }

  /* ---------------- painel "Mais" ---------------- */

  .mais-fundo,
  .modal-fundo {
    align-items: flex-end;     /* folha colada embaixo, não centralizada */
    padding: 0;
  }

  .mais-fundo {
    position: fixed;
    inset: 0;
    display: flex;
    background: rgba(0, 0, 0, 0.62);
    z-index: 60;
    animation: folha-entra 0.16s ease;
  }

  .mais-fundo.saindo { opacity: 0; transition: opacity 0.14s ease; }

  .mais-folha,
  .modal {
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    border-radius: 16px 16px 0 0;
    border-bottom: none;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    animation: folha-sobe 0.18s ease;
  }

  @keyframes folha-sobe {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }

  @keyframes folha-entra {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  /* o puxador: a dica de que a folha desce com o dedo */
  .folha-puxador {
    width: 36px;
    height: 4px;
    margin: 8px auto 2px;
    border-radius: 999px;
    background: var(--borda-forte);
    flex: 0 0 auto;
  }

  .mais-folha {
    display: flex;
    flex-direction: column;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-bottom: none;
    overflow: hidden;
  }

  .mais-titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 14px 10px;
    font-size: 15px;
    font-weight: 600;
    border-bottom: 1px solid var(--borda);
  }

  .mais-lista {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 6px 0;
  }

  .mais-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 56px;
    justify-content: center;
    padding: 10px 16px;
    border: none;
    border-bottom: 1px solid var(--borda);
    background: none;
    color: var(--texto);
    font: inherit;
    text-align: left;
    cursor: pointer;
  }

  .mais-item:last-child { border-bottom: none; }
  .mais-item:active { background: var(--superficie-alta); }
  .mais-item-rotulo { font-size: 15px; }
  .mais-item-descricao { font-size: 12px; color: var(--texto-fraco); }

  .mais-conta {
    border-top: 1px solid var(--borda-forte);
    padding: 12px 16px 16px;
    background: var(--fundo);
  }

  .mais-conta-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
  .mais-conta-nome { font-weight: 600; }
  .mais-conta-cargo { font-size: 12px; }
  .mais-conta-acoes { display: flex; flex-direction: column; gap: 6px; }

  /* ---------------- modais viram folha inferior ---------------- */

  .modal { display: flex; flex-direction: column; }
  .modal-topo { padding: 4px 14px 10px; }
  .modal-titulo { font-size: 15px; }
  .modal-corpo { padding: 12px 14px; overflow-y: auto; }

  .modal-rodape {
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    flex-wrap: wrap;
    gap: 8px;
  }

  /* botão de rodapé ocupa a linha: alvo grande e sem mira */
  .modal-rodape .botao { flex: 1 1 auto; min-height: 46px; }

  /* ---------------- alvos de toque ---------------- */

  /*
   * 44×44 é o mínimo. O chip de status continua com a mesma altura visual do
   * desktop — o que cresce é a área invisível em volta dele.
   */
  .botao { min-height: 44px; padding: 10px 14px; font-size: 14px; }
  .botao-pequeno { min-height: 40px; padding: 8px 12px; font-size: 13px; }
  .botao-icone { min-width: 44px; min-height: 44px; }

  .chip-status::after { height: 44px; }

  /* caixas de marcar maiores: rotina é a tela mais tocada do celular */
  input[type="checkbox"] { width: 22px; height: 22px; }

  /* ---------------- barras das telas ---------------- */

  .barra {
    height: auto;
    min-height: 52px;
    flex-wrap: wrap;
    row-gap: 6px;
    padding: 8px 14px;
  }

  .barra-esquerda, .barra-direita { flex-wrap: wrap; gap: 6px; }
  .barra-periodo { font-size: 13px; }

  /* o container centralizado do desktop vira respiro simples */
  .barra,
  .tela-simples,
  .painel-rolagem,
  .lista-corpo,
  .tela-lateral {
    padding-left: 14px;
    padding-right: 14px;
  }

  .painel-rolagem { padding-top: 12px; padding-bottom: 20px; gap: 10px; }
  .painel { padding: 12px; }
  .painel-topo { flex-direction: column; align-items: stretch; gap: 8px; }
  .painel-topo .botao { width: 100%; }
  .painel-acoes { flex-direction: column; }
  .painel-acoes .botao { width: 100%; }

  /* ---------------- aba Dia ---------------- */

  .dia-rolagem { padding: 0 14px 16px; }
  .dia-grupo { margin-bottom: 14px; }

  /*
   * A linha do dia era uma grade horizontal de chip, tag, título e link. Em
   * 375px isso espremia o título até sobrar uma palavra; empilhado, o título
   * fica inteiro e continua sendo o que se procura.
   */
  .dia-linha {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      'chip tag'
      'titulo titulo'
      'link link';
    align-items: center;
    gap: 6px 8px;
    padding: 12px;
    min-height: 44px;
  }

  .dia-linha > .chip-status { grid-area: chip; }
  .dia-linha > .pilula-tag { grid-area: tag; justify-self: start; }
  .dia-titulo { grid-area: titulo; white-space: normal; font-size: 15px; }
  .dia-linha > .botao-link, .dia-sem-link { grid-area: link; justify-self: start; }

  .dia-contadores { gap: 8px; }

  /* ---------------- Semanal ---------------- */

  /*
   * Quem rola é o container de fora, e só ele.
   *
   * Estava `overflow: hidden` aqui com `overflow-y: auto` no .sm-corpo de
   * dentro — e o de dentro não tinha altura limitada, então crescia com o
   * conteúdo, nunca rolava, e era este aqui que cortava o fim da lista sem
   * barra nenhuma para chegar lá. Com a rolagem no de fora, a faixa dos dias
   * gruda no topo (position: sticky) e as demandas rolam por baixo dela.
   */
  .gs-rolagem { display: block; overflow-x: hidden; overflow-y: auto; }
  .gs-grade { display: block; }

  /* a faixa dos sete dias, fixa no topo da tela */
  .sm-faixa {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    padding: 10px 14px;
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--fundo);
    border-bottom: 1px solid var(--borda);
  }

  .sm-dia {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-height: 58px;
    padding: 7px 2px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-peq);
    background: var(--superficie);
    color: var(--texto-fraco);
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .sm-dia-nome { font-size: 9px; letter-spacing: 0.04em; }
  .sm-dia-numero { font-size: 16px; font-weight: 600; color: var(--texto); }

  .sm-dia-contador {
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--acento);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
  }

  /* o espaço fica reservado mesmo sem demanda: sem isso os dias vazios
     encolhem e a faixa fica com alturas diferentes */
  .sm-dia-contador-vazio { background: none; }

  .sm-dia-hoje { border-color: var(--borda-forte); }
  .sm-dia-hoje .sm-dia-numero { color: var(--acento); }

  .sm-dia-ativo {
    background: var(--superficie-topo);
    border-color: var(--acento);
  }

  /* bloco simples: a rolagem é do .gs-rolagem, não daqui */
  .sm-corpo { padding: 12px 14px 16px; }
  .sm-grupo { margin-bottom: 16px; }

  .sm-grupo-topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 7px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--borda);
  }

  .sm-grupo-nome { margin: 0; font-size: 14px; font-weight: 600; }
  .sm-itens { display: flex; flex-direction: column; gap: 8px; }
  .sm-itens .cartao-demanda { width: 100%; }
  .sm-adicionar { margin-top: 8px; }

  /* ---------------- Mensal ---------------- */

  .vm-grade { gap: 3px; }

  .vm-dia {
    min-height: 62px;
    padding: 4px 3px;
    /* o alvo de toque é a célula inteira, bem acima de 44px */
  }

  .vm-dia-numero { font-size: 13px; }
  .vm-dia-total { font-size: 11px; font-weight: 700; }
  .vm-dia-lista { display: flex; align-items: flex-end; justify-content: center; }

  .vm-pontos {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    justify-content: center;
    padding-bottom: 2px;
  }

  .vm-ponto-tag {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: block;
  }

  .vm-ponto-mais { background: var(--texto-fraco); opacity: 0.6; }
  .vm-mais { display: none !important; }

  /* o cabeçalho de dias da semana encolhe para caber em 375px */
  .vm-cabeca { font-size: 10px; padding: 4px 0; }

  /* ---------------- Lista em cards ---------------- */

  .lista-corpo { overflow-y: auto; padding-bottom: 16px; }
  .lc-lista { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; }

  .lc-card {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 12px;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: var(--superficie);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .lc-card:active { background: var(--superficie-alta); }

  /* a barra à esquerda marca o atraso sem depender só da cor do selo */
  .lc-card-atraso { border-left: 3px solid var(--acento); padding-left: 9px; }

  .lc-topo { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
  .lc-prazo { margin-left: auto; }
  .lc-cliente { font-size: 12px; color: var(--texto-fraco); }
  .lc-titulo { font-size: 15px; line-height: 1.35; }

  .lc-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 6px;
    border-top: 1px solid var(--borda);
    font-size: 12px;
  }

  .lc-pessoas { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
  .lc-nomes { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lc-data { display: inline-flex; gap: 5px; white-space: nowrap; }

  /* painel de filtros e ordenação */
  .lf-painel { display: flex; flex-direction: column; gap: 10px; }
  .lf-painel .filtros-lista { flex-direction: column; align-items: stretch; }
  .lf-painel .filtros-lista > * { width: 100%; }
  .lf-painel .filtro-grupo { display: grid; grid-template-columns: auto 1fr; gap: 6px; align-items: center; }
  .lf-rotulo-ordem { margin-top: 4px; }

  .lf-ordem { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .lf-ordem-item { justify-content: space-between; min-height: 46px; }
  .lf-ordem-ativa { border-color: var(--acento); color: var(--texto); }

  /* ---------------- Dashboard ---------------- */

  /* duas colunas de indicadores: quatro caberiam, mas ilegíveis */
  .kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
  .kpi { padding: 10px 11px; }
  .kpi-valor { font-size: 21px; }
  .kpi-rotulo { font-size: 10px; }
  .kpi-detalhe { font-size: 10px; }

  /* o seletor de mês acompanha a rolagem */
  .painel-rolagem .barra { position: sticky; top: 0; z-index: 10; background: var(--fundo); }

  /*
   * As tabelas do dashboard viram listas empilhadas. Cada linha é um bloco, e
   * cada célula ganha o rótulo da coluna pelo data-rotulo — sem o cabeçalho da
   * tabela, "48%" sozinho não diz de quê.
   */
  .painel-rolagem .tabela,
  .painel-rolagem .tabela thead,
  .painel-rolagem .tabela tbody,
  .painel-rolagem .tabela tr,
  .painel-rolagem .tabela td {
    display: block;
    width: 100%;
  }

  .painel-rolagem .tabela thead { display: none; }

  .painel-rolagem .tabela tr {
    margin-bottom: 8px;
    padding: 10px 11px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-peq);
    background: var(--superficie-alta);
  }

  .painel-rolagem .tabela td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    height: auto;
    min-height: 32px;
    padding: 4px 0;
    border: none;
    text-align: left;
  }

  .painel-rolagem .tabela td::before {
    content: attr(data-rotulo);
    color: var(--texto-fraco);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }

  /* a primeira célula é o nome: sem rótulo e em destaque */
  .painel-rolagem .tabela td:first-child {
    padding-bottom: 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--borda);
    font-size: 14px;
  }

  .painel-rolagem .tabela td:first-child::before { content: none; }
  .painel-rolagem .tabela tbody tr:hover { background: var(--superficie-alta); }
  .painel-rolagem .coluna-numero { text-align: left; }
  .celula-com-barra { justify-content: flex-start; }

  /* ---------------- Rotinas ---------------- */

  .rotina-item {
    grid-template-columns: auto 52px 1fr;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 10px 8px;
    border-bottom: 1px solid var(--borda);
    border-radius: 0;
  }

  .rotina-item input[type="checkbox"] { width: 26px; height: 26px; }
  .rotina-tarefa { font-size: 15px; white-space: normal; }
  .rotina-horario { font-size: 13px; }
  .rotina-frequencia, .rotina-marcado { grid-column: 3; font-size: 11px; }
  .rotina-progresso { flex-wrap: wrap; }

  /* ---------------- Clientes e Usuários em cards ---------------- */

  .tela-lateral { grid-template-columns: 1fr; }
  .lateral { border-right: none; border-bottom: 1px solid var(--borda); }

  .grade-rolagem { overflow-x: visible; }
  .grade { min-width: 0; }

  /*
   * Cada linha da grade vira um card empilhado. As colunas somem porque em
   * 375px seis colunas dariam 60px cada, e chip de cargo não cabe em 60px.
   * O rótulo de cada campo vem do data-rotulo, como no dashboard.
   */
  /* as duas classes juntas: a regra .grade-linha abaixo é do mesmo peso e
     vem depois, então ganharia com um seletor de uma classe só */
  .grade-linha.grade-cabecalho { display: none; }

  .grade-linha {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
    min-height: 0;
    margin-bottom: 8px;
    padding: 12px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-peq);
    background: var(--superficie-alta);
    font-size: 14px;
    position: relative;
  }

  .grade-linha > .chip-fixo { align-self: flex-start; }

  /*
   * Sem o cabeçalho, "1" e "0" soltos no card não dizem de quê. O rótulo vem
   * do data-rotulo que a tela carimba, igual ao dashboard.
   */
  .grade-linha > [data-rotulo]::before {
    content: attr(data-rotulo) ' ';
    color: var(--texto-fraco);
    font-size: 11px;
    text-transform: lowercase;
    letter-spacing: 0;
  }

  .grade-linha > .coluna-numero { text-align: left; }

  .grade-nome { font-size: 15px; padding-right: 44px; }

  /* o menu de três pontos flutua no canto do card */
  .grade-acoes {
    position: absolute;
    top: 8px;
    right: 8px;
    justify-content: flex-end;
  }

  /* linha de chips lado a lado, para o card não virar uma coluna comprida */
  .grade-linha { flex-flow: row wrap; align-items: center; }
  .grade-linha > .grade-nome { flex: 1 1 100%; }

  .acoes-folha-lista { display: flex; flex-direction: column; }

  .acoes-folha-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
    min-height: 54px;
    justify-content: center;
    padding: 10px 4px;
    border: none;
    border-bottom: 1px solid var(--borda);
    background: none;
    color: var(--texto);
    font: inherit;
    font-size: 15px;
    text-align: left;
    cursor: pointer;
  }

  .acoes-folha-item:last-child { border-bottom: none; }
  .acoes-folha-item:disabled { opacity: 0.4; cursor: default; }
  .acoes-folha-perigo { color: #FF8E99; }
  .acoes-folha-descricao { font-size: 12px; color: var(--texto-fraco); }

  /* ---------------- cards e listas ---------------- */

  .cartao-demanda { padding: 11px; }
  .cartao-titulo { font-size: 14px; white-space: normal; }

  /* o lápis do link aparecia só no hover; no toque não há hover */
  .lapis-link, .cartao-ferramentas { opacity: 1 !important; }

  .cartao-ferramentas .botao-icone { min-width: 40px; min-height: 40px; }

  /* a bolinha de iniciais vira alvo de toque para mostrar o nome */
  .avatar-tocavel { cursor: pointer; }

  /* ---------------- formulários ---------------- */

  .formulario-par, .td-grade { grid-template-columns: 1fr; }
  .td-corpo { padding: 12px 14px; }
  .td-descricao { min-height: 180px; }
  .escolha-pessoa { min-height: 44px; }

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

  /* o aviso sobe acima da barra de navegação, senão fica atrás dela */
  .avisos {
    left: 12px;
    right: 12px;
    bottom: calc(68px + env(safe-area-inset-bottom, 0px));
  }

  .aviso { width: 100%; }
}

/* ------------------------------------------------------------------ *
 * Atalho instalado na tela inicial                                    *
 * ------------------------------------------------------------------ */

/*
 * Aberto em tela cheia não há barra de endereço do navegador, então o
 * cabeçalho encosta no relógio do sistema. O respiro extra vem daqui.
 */
@media (display-mode: standalone) and (max-width: 767px) {
  .topo { padding-top: calc(env(safe-area-inset-top, 0px) + 4px); }
}

/* ------------------------------------------------------------------ *
 * Exportar conteúdos: o modal                                         *
 * ------------------------------------------------------------------ */

/* A folha de impressão só existe para ser impressa. Na tela ela fica fora do
   caminho — sem isso, ela apareceria empilhada no fim da página no quadro
   entre o append e o diálogo de impressão. */
.folha-conteudos { display: none; }

.ec-formulario { gap: 18px; }

.ec-bloco {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--borda);
}

.ec-bloco:last-child { padding-bottom: 0; border-bottom: none; }

.ec-bloco-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.ec-atalhos { display: flex; gap: 6px; flex-wrap: wrap; }

/* uma escolha secundária não deve ter o peso de um campo */
.ec-marca-discreta {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-size: 12px;
}

.ec-marca-discreta input { margin: 0; }

/* Colunas em vez de lista corrida: com dez tags, uma coluna só empurraria o
   período para fora da vista. */
.ec-tags {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 6px 14px;
  max-height: 220px;
  overflow-y: auto;
}

.ec-tag {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  min-height: 28px;
}

.ec-tag input { margin: 0; flex: 0 0 auto; }
.ec-tag-arquivada { color: var(--texto-fraco); }

.ec-aviso {
  display: none;
  color: var(--acento);
  font-size: 12px;
}

.ec-aviso-visivel { display: block; }

/* o rodapé do modal alinha os botões à direita; a contagem fica à esquerda */
.ec-contagem { margin-right: auto; font-size: 12px; }

@media (max-width: 767px) {
  .ec-tags { max-height: none; grid-template-columns: 1fr 1fr; }
  .ec-tag { min-height: 44px; }
  .ec-marca-discreta { min-height: 44px; }
  .ec-contagem { width: 100%; margin: 0 0 4px; }
}

/* ------------------------------------------------------------------ *
 * Cofre de acessos                                                    *
 * ------------------------------------------------------------------ */

.bloco-acessos { margin-top: 20px; }

.bloco-acessos-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.bloco-titulo { margin: 0; font-size: 14px; font-weight: 600; }
.bloco-sub { font-size: 12px; margin-top: 2px; }

.ac-lista { display: flex; flex-direction: column; gap: 10px; }

.ac-linha {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  background: var(--superficie-alta);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}

.ac-arrastando { opacity: 0.45; }

.ac-principal { min-width: 0; flex: 1 1 auto; }

.ac-conta { font-size: 14px; font-weight: 600; margin-bottom: 6px; }

.ac-campo {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 26px;
  font-size: 13px;
}

.ac-rotulo {
  flex: 0 0 52px;
  font-size: 11px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

.ac-login { overflow-wrap: anywhere; }

/*
 * Tipografia de senha, não de texto.
 *
 * Senha se lê caractere a caractere para digitar em outro lugar, e numa fonte
 * proporcional o l minúsculo, o I maiúsculo e o 1 são o mesmo desenho. Aqui
 * são três desenhos.
 */
.ac-senha-valor {
  font-family: "Cascadia Mono", Consolas, "SF Mono", ui-monospace, monospace;
  letter-spacing: 1px;
  color: var(--texto-fraco);
}

.ac-senha-aberta {
  color: var(--texto);
  user-select: all;
  overflow-wrap: anywhere;
}

.ac-contador {
  font-size: 11px;
  color: var(--texto-fraco);
  font-variant-numeric: tabular-nums;
}

.ac-icone {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  font-size: 13px;
  line-height: 1;
}

.ac-obs {
  margin-top: 6px;
  font-size: 12px;
  color: var(--texto-fraco);
  overflow-wrap: anywhere;
}

.ac-marca { margin-top: 6px; font-size: 11px; }

.ac-acoes { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.ac-setas { display: flex; flex-direction: column; gap: 2px; }
.ac-seta { width: 26px; height: 22px; font-size: 12px; line-height: 1; }
.ac-botoes { display: flex; gap: 6px; }

.ac-vazio { padding: 10px 2px; font-size: 13px; }

.ac-historico { margin-top: 16px; }

.ac-historico-titulo {
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.ac-historico-linha { font-size: 12px; line-height: 1.7; }

.chip-cofre {
  background: rgba(225, 29, 46, 0.12);
  border-color: var(--acento-escuro);
  color: #FF6B78;
}

@media (max-width: 767px) {
  /* no celular a linha vira card: os campos empilham e as ações vão para
     baixo, com alvo de toque inteiro */
  .ac-linha { flex-direction: column; align-items: stretch; gap: 10px; }

  .ac-campo { flex-wrap: wrap; min-height: 44px; }
  .ac-rotulo { flex: 0 0 100%; }

  .ac-icone { width: 44px; height: 44px; font-size: 15px; }

  .ac-acoes {
    justify-content: space-between;
    border-top: 1px solid var(--borda);
    padding-top: 10px;
  }

  .ac-setas { flex-direction: row; gap: 6px; }
  .ac-seta { width: 44px; height: 44px; font-size: 14px; }
  .ac-botoes .botao { min-height: 44px; }

  .bloco-acessos-topo { flex-direction: column; }
  .bloco-acessos-topo .botao { min-height: 44px; }
}

/* ------------------------------------------------------------------ *
 * A demanda como modal                                                *
 * ------------------------------------------------------------------ */

/*
 * Mais larga que os outros modais porque o conteúdo é outro: aqui há uma
 * grade de três campos e uma descrição que pode ter dezenas de linhas.
 * A altura fica presa à janela e quem rola é o corpo, não a página — o
 * cabeçalho com cliente e data e o rodapé com as ações ficam onde estão.
 */
.modal-demanda { max-width: 900px; height: 100%; }

.td-titulo-modal {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.td-data-topo { font-size: 12px; white-space: nowrap; }

.modal-demanda .modal-corpo {
  padding: 16px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* a rolagem do corpo não escorrega para a grade atrás quando chega ao fim */
  overscroll-behavior: contain;
}

.td-corpo-modal {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.td-carregando { padding: 20px 2px; }

/* O rodapé do modal é o do UI, mas aqui ele carrega o aviso de alterações
   não salvas à esquerda e as ações à direita. */
.modal-demanda .modal-rodape {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.td-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  flex-wrap: wrap;
}

.td-rodape-acoes { display: flex; gap: 7px; margin-left: auto; }

/* ------------------------------------------------------------------ *
 * Copiar link e descrição                                             *
 * ------------------------------------------------------------------ */

/*
 * 24px de desenho, 32px de alvo: a área de toque cresce por padding, não por
 * tamanho, para o botão não engordar visualmente dentro de um card que já é
 * apertado. No celular o mesmo botão vai a 44px pela regra lá embaixo.
 */
.cartao-copiar {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  padding: 4px;
  font-size: 12px;
  line-height: 1;
  background: transparent;
  box-sizing: content-box;
}

.cartao-copiar-feito { color: #3FBF6A; border-color: #3FBF6A; }
.cartao-copiar-vazio { opacity: 0.3; cursor: default; }

/* No card da Semanal e da Mensal ele mora no canto de baixo, sobreposto, e só
   ganha corpo no hover: o card tem três linhas e nenhuma sobra de altura. */
.cartao-demanda .cartao-copiar {
  position: absolute;
  right: 3px;
  bottom: 3px;
  opacity: 0;
  transition: opacity 0.08s ease-out;
}

.cartao-demanda:hover .cartao-copiar,
.cartao-demanda .cartao-copiar:focus-visible,
.cartao-demanda .cartao-copiar-feito { opacity: 1; }

/* na linha do Dia e na tabela da Lista há coluna própria: nada de sobrepor */
.dia-linha .cartao-copiar,
.tabela-lista .cartao-copiar { position: static; opacity: 1; }

.coluna-acao { width: 46px; text-align: center; }

/* ------------------------------------------------------------------ *
 * Filtro de status                                                    *
 * ------------------------------------------------------------------ */

.filtro-painel-status { min-width: 160px; }

.estado-vazio-acao { margin-top: 12px; }

@media (max-width: 767px) {
  /*
   * Alvo de toque de 44px sem o botão ficar com cara de 44px.
   *
   * A regra geral de `.botao-icone` no celular já impõe 44px de mínimo, e
   * somar padding por cima dela dava 66px — um quadrado maior que o chip de
   * status dentro de um card de três linhas. Aqui a caixa é a de 44, o
   * preenchimento zera e a borda some: o que se vê é o ícone, o que se toca
   * é o quadrado inteiro.
   */
  .cartao-copiar {
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    padding: 0;
    font-size: 15px;
    border-color: transparent;
  }

  .cartao-copiar-feito { border-color: #3FBF6A; }

  .cartao-demanda .cartao-copiar { opacity: 1; }

  /* no celular o modal já é painel inferior; aqui ele sobe quase até o topo,
     porque o formulário é o mais longo do app */
  .modal-demanda { max-width: none; height: 94%; }

  .td-titulo-modal { flex-direction: column; align-items: flex-start; gap: 2px; }

  .td-rodape { flex-direction: column; align-items: stretch; }
  .td-rodape-acoes { margin-left: 0; flex-wrap: wrap; }
  .td-rodape-acoes .botao { flex: 1 1 auto; min-height: 44px; }

  .lc-card .cartao-copiar { position: absolute; right: 6px; bottom: 6px; }
  .lc-card { position: relative; }
}

@media print {
  @page { size: A4; margin: 14mm 13mm 12mm; }

  /* Fundo branco de propósito: o navegador desliga cor de fundo por padrão,
     e um documento preto sairia com texto branco em papel branco. */
  body.imprimindo > *:not(#folha-impressao) { display: none !important; }

  body.imprimindo {
    background: #FFFFFF;
    color: #000000;
    display: block;
    overflow: visible;
  }

  body.imprimindo #folha-impressao {
    display: block;
    background: #FFFFFF;
    color: #000000;
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 10.5pt;
    line-height: 1.45;
  }

  .folha-capa { margin-bottom: 16pt; }
  .folha-cliente { font-size: 22pt; font-weight: 700; margin: 0; }
  .folha-arroba { font-size: 11pt; color: #555555; margin-top: 1pt; }

  .folha-periodo {
    margin-top: 10pt;
    padding-top: 8pt;
    border-top: 1.5pt solid #000000;
    font-size: 9.5pt;
    color: #555555;
    display: flex;
    justify-content: space-between;
    gap: 16pt;
  }

  .folha-periodo strong { color: #000000; font-weight: 600; }

  /* uma semana nunca se parte entre páginas */
  .folha-semana {
    margin-top: 14pt;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .folha-semana-titulo {
    font-size: 8.5pt;
    text-transform: uppercase;
    letter-spacing: 1pt;
    color: #555555;
    padding-bottom: 4pt;
    border-bottom: 0.75pt solid #999999;
  }

  .folha-dia {
    display: flex;
    gap: 12pt;
    padding: 7pt 0;
    border-bottom: 0.5pt solid #DDDDDD;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .folha-dia:last-child { border-bottom: none; }

  .folha-dia-rotulo { flex: 0 0 62pt; text-align: right; padding-top: 1pt; }
  .folha-dia-nome { font-size: 8pt; letter-spacing: 0.8pt; color: #555555; display: block; }
  .folha-dia-data { font-size: 12pt; font-weight: 700; display: block; line-height: 1.15; }

  .folha-dia-itens { flex: 1 1 auto; display: flex; flex-direction: column; gap: 5pt; }
  .folha-item { display: flex; gap: 8pt; align-items: baseline; }

  .folha-tipo {
    flex: 0 0 auto;
    font-size: 8pt;
    letter-spacing: 0.6pt;
    text-transform: uppercase;
    border: 0.5pt solid #777777;
    border-radius: 20pt;
    padding: 1pt 7pt;
    white-space: nowrap;
  }

  .folha-titulo { flex: 1 1 auto; }
  .folha-vazio { color: #888888; font-style: italic; }

  .folha-vazio-total {
    margin-top: 24pt;
    padding: 18pt;
    border: 0.75pt solid #999999;
    text-align: center;
    color: #555555;
  }

  .folha-rodape {
    margin-top: 22pt;
    padding-top: 7pt;
    border-top: 0.5pt solid #DDDDDD;
    font-size: 8pt;
    color: #777777;
    display: flex;
    justify-content: space-between;
  }
  /* ---------------------------------------------------------------- *
   * Exportar conteúdos: o documento de produção                       *
   * ---------------------------------------------------------------- */

  /*
   * Página com nome próprio.
   *
   * O @page global acima é do calendário do cliente e não pode mudar. Uma
   * regra nomeada dá a este documento margens próprias — mais generosas,
   * porque são muitas páginas de roteiro lidas por horas — sem tocar na
   * exportação antiga. A margem inferior maior existe para abrigar o rodapé
   * repetido, que fica fora da área de conteúdo.
   */
  @page conteudos { size: A4; margin: 17mm 15mm 18mm; }

  body.imprimindo #folha-impressao.folha-conteudos {
    page: conteudos;
    font-size: 11pt;
    line-height: 1.5;
    /* preto no branco: o documento não é a interface, e cinza só separa */
    color: #000000;
  }

  /* ---------- cabeçalho da primeira página ---------- */

  .folha-conteudos .pc-capa {
    margin-bottom: 14pt;
    padding-bottom: 9pt;
    border-bottom: 1pt solid #000000;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .folha-conteudos .pc-cliente {
    font-size: 21pt;
    font-weight: 700;
    margin: 0;
    line-height: 1.15;
  }

  .folha-conteudos .pc-arroba { font-size: 11pt; color: #555555; margin-top: 2pt; }

  .folha-conteudos .pc-capa-dados {
    display: flex;
    flex-wrap: wrap;
    gap: 4pt 18pt;
    margin-top: 8pt;
    font-size: 10pt;
  }

  .folha-conteudos .pc-gerado { color: #777777; }
  .folha-conteudos .pc-rotulo { color: #666666; }

  .folha-conteudos .pc-resumo {
    margin-top: 8pt;
    font-size: 10pt;
    color: #444444;
  }

  /* ---------- a data ---------- */

  .folha-conteudos .pc-dia { margin-top: 16pt; }

  .folha-conteudos .pc-dia-abertura {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .folha-conteudos .pc-dia-titulo {
    margin: 0 0 8pt;
    padding-bottom: 3pt;
    border-bottom: 0.75pt solid #BBBBBB;
    display: flex;
    align-items: baseline;
    gap: 8pt;
    font-size: 13pt;
    font-weight: 700;
  }

  .folha-conteudos .pc-dia-semana {
    font-size: 9.5pt;
    font-weight: 400;
    color: #666666;
  }

  /* ---------- a peça ---------- */

  /*
   * Tabela de uma coluna. O break-inside mantém a peça inteira na mesma
   * página; quando o roteiro é maior que uma página e a quebra é inevitável,
   * o <thead> reaparece no topo da continuação.
   */
  .folha-conteudos .pc-peca {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 15pt;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .folha-conteudos .pc-peca:last-child { margin-bottom: 0; }

  /*
   * Um fio entre uma peça e a seguinte.
   *
   * Sem ele, o link da peça anterior encosta na tag da próxima e as duas
   * viram um bloco só — num documento de dezenas de páginas isso custa
   * caro. A primeira peça do dia não leva fio: ela já vem logo abaixo da
   * linha da data, e por isso está dentro de .pc-dia-abertura, fora do
   * alcance deste seletor de filho direto.
   */
  .folha-conteudos .pc-dia > .pc-peca { border-top: 0.5pt solid #E4E4E4; }
  .folha-conteudos .pc-dia > .pc-peca .pc-peca-cabecalho { padding-top: 11pt; }

  .folha-conteudos .pc-peca-cabecalho,
  .folha-conteudos .pc-peca-corpo {
    text-align: left;
    font-weight: 400;
    padding: 0;
    vertical-align: top;
  }

  .folha-conteudos .pc-peca-topo {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 3pt 7pt;
    font-size: 8pt;
    letter-spacing: 0.6pt;
    text-transform: uppercase;
  }

  .folha-conteudos .pc-tag { color: #444444; font-weight: 600; }

  /* o status é a única cor do documento, e só no texto */
  .folha-conteudos .pc-status { font-weight: 700; }
  .folha-conteudos .pc-status-0 { color: #C00014; }
  .folha-conteudos .pc-status-1 { color: #0A7A31; }

  .folha-conteudos .pc-etiqueta {
    color: #666666;
    font-weight: 600;
  }

  .folha-conteudos .pc-etiqueta::before { content: "· "; color: #AAAAAA; }

  .folha-conteudos .pc-titulo {
    font-size: 13.5pt;
    font-weight: 700;
    line-height: 1.25;
    margin: 3pt 0 2pt;
  }

  .folha-conteudos .pc-responsavel { font-size: 9.5pt; margin-bottom: 5pt; }

  /*
   * pre-wrap preserva as quebras de linha do roteiro; break-word evita que
   * uma palavra colada ou uma URL longa passe da margem. A fonte fica no
   * tamanho do corpo: é o texto que a pessoa vai ler de fato.
   */
  .folha-conteudos .pc-descricao {
    font-family: inherit;
    font-size: 11pt;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    margin: 0;
    padding-left: 7pt;
    border-left: 1pt solid #DDDDDD;
  }

  .folha-conteudos .pc-sem-descricao {
    font-size: 10pt;
    color: #999999;
    font-style: italic;
    padding-left: 7pt;
    border-left: 1pt solid #DDDDDD;
  }

  .folha-conteudos .pc-link {
    margin-top: 5pt;
    padding-left: 7pt;
    font-size: 9.5pt;
    color: #333333;
    overflow-wrap: break-word;
    word-break: break-all;
  }

  /* ---------- a tabela que segura o documento ---------- */

  /*
   * Uma tabela de uma célula em volta de tudo, só para poder ter <tfoot>.
   * O motor desconta a altura do <tfoot> de cada página antes de distribuir
   * o texto e o repete no pé de todas elas — que é exatamente o que um
   * rodapé precisa fazer, e o que `position: fixed` não faz: fixo desenha em
   * toda página mas não reserva espaço, e acaba por cima da última linha do
   * roteiro numa página cheia.
   */
  .folha-conteudos .pc-folha {
    width: 100%;
    border-collapse: collapse;
  }

  .folha-conteudos .pc-folha > tbody > tr > td,
  .folha-conteudos .pc-folha > tfoot > tr > td {
    padding: 0;
    text-align: left;
    vertical-align: top;
  }

  .folha-conteudos .pc-rodape {
    display: flex;
    justify-content: space-between;
    gap: 12pt;
    margin-top: 10pt;
    padding-top: 3pt;
    border-top: 0.5pt solid #DDDDDD;
    font-size: 8pt;
    color: #777777;
  }

}

/* Consulta autenticada de tráfego */
.trafego-filtros,.trafego-paginacao{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.trafego-canais{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}.trafego-relatorio{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #333}.trafego-relatorio>span{flex:1;min-width:210px}.trafego-tela h3{margin-top:24px}.trafego-filtros input,.trafego-filtros select{padding:10px;background:#181818;color:#eee;border:1px solid #444;border-radius:6px}.trafego-paginacao{margin-top:16px}