/* ===== BPO RMais =====
   Identidade visual R+, a mesma da Plataforma de Pagamentos: dourado sobre
   off-white, títulos em serifa, cantos generosos. As fontes são servidas daqui
   (assets/fontes) e não do Google: a CSP do app é `default-src 'self'` e
   bloquearia qualquer host externo. */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fontes/cormorant-garamond-500-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fontes/cormorant-garamond-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fontes/cormorant-garamond-600-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fontes/cormorant-garamond-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fontes/outfit-400-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fontes/outfit-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fontes/outfit-500-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fontes/outfit-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fontes/outfit-600-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fontes/outfit-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Paleta R+ — os mesmos valores da Plataforma de Pagamentos. */
  --tinta: #1a1814;         /* texto */
  --tinta-fraca: #6b6760;   /* texto de apoio */
  --linha: #e8e4dc;         /* bordas */
  --fundo: #f9f7f4;         /* off-white do fundo */
  --papel: #ffffff;
  --acento: #b8912a;        /* dourado — detalhes, bordas, foco */
  --acento-forte: #8a6510;  /* dourado profundo — fundo de botão, links */
  --acento-escuro: #6f4f0c; /* dourado escuro — hover de botão */
  --dourado-suave: #a89060;
  --creme: #f7edd8;         /* faixas, cabeçalhos de tabela, destaques */
  --perigo: #b91c1c;
  --perigo-fundo: #fbe6e6;
  --alerta-fundo: #fdf3e0;
  --ok: #2f7d32;
  --ok-fundo: #e6f4e7;

  /* Estado da pendência. Os três precisam se distinguir de relance numa
     grade cheia — na legenda eram três quase-brancos, indistinguíveis.
     O tom forte marca; o fundo é uma tinta leve do mesmo tom, para o
     calendário não virar um mosaico gritante. */
  --estado-atrasada:  #c62828;
  --estado-andamento: #b06a00;
  --estado-concluida: #1b5e20;
  --tinta-atrasada:   #fdeaea;
  --tinta-andamento:  #fdf1de;
  --tinta-concluida:  #ecf5ec;
  --raio: 12px;
  --raio-sm: 8px;
  --sombra-sm: 0 1px 2px rgba(26,24,20,.04), 0 1px 3px rgba(26,24,20,.06);
  --sombra-md: 0 4px 12px rgba(26,24,20,.06), 0 2px 6px rgba(26,24,20,.05);
  --sombra-lg: 0 18px 50px rgba(26,24,20,.18);
  --ease: cubic-bezier(.4,0,.2,1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 15px/1.5 "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--tinta);
  /* O halo dourado no topo direito é a assinatura da marca. */
  background:
    radial-gradient(1200px 500px at 100% -10%, rgba(184,145,42,.06), transparent 60%),
    var(--fundo);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--acento-forte); transition: color .15s var(--ease); }
a:hover { color: var(--acento); }

h1, h2, h3, legend {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600; letter-spacing: .2px;
}
h1 { font-size: 30px; margin: 0 0 14px; }
h2 { font-size: 22px; margin: 22px 0 10px; }
h3 { font-size: 18px; margin: 16px 0 8px; }
code { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 13px; }

/* ----- Topo ----- */
.topo {
  display: flex; align-items: center; gap: 18px;
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(140%) blur(8px);
  color: var(--tinta); padding: 12px 22px;
  border-bottom: 1px solid var(--linha);
  position: sticky; top: 0; z-index: 60;
}
.topo .marca { display: flex; align-items: center; text-decoration: none; }
.topo .marca img { height: 38px; width: auto; display: block; }
.topo nav { display: flex; gap: 16px; flex: 1; }
.topo nav a {
  color: var(--tinta-fraca); text-decoration: none; font-size: 14px; font-weight: 500;
  padding-bottom: 2px; border-bottom: 2px solid transparent;
}
.topo nav a:hover { color: var(--acento-forte); border-bottom-color: var(--acento); }
.busca-topo { display: block; margin: 0; }
.busca-topo input {
  margin: 0; width: 180px; padding: 6px 12px; font-size: 13px;
  background: var(--fundo);
}
.busca-topo input:focus { width: 260px; background: #fff; }
.topo .usuario { font-size: 13px; color: var(--tinta-fraca); }
.topo .usuario a { color: var(--acento-forte); margin-left: 8px; }

main {
  max-width: 1300px; margin: 0 auto; padding: 24px 20px;
  animation: entrada .45s var(--ease) both;
}
@keyframes entrada { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ----- Avisos ----- */
.flash {
  padding: 12px 16px; border-radius: var(--raio); margin-bottom: 14px;
  border-left-width: 4px; border-left-style: solid; box-shadow: var(--sombra-sm);
}
.flash-success { background: var(--ok-fundo);     border: 1px solid #c7e3c9; border-left-color: var(--ok); }
.flash-error   { background: var(--perigo-fundo); border: 1px solid #f0cccc; border-left-color: var(--perigo); }
.flash-aviso   { background: var(--alerta-fundo); border: 1px solid #f0ddb8; border-left-color: var(--acento); }

.ajuda { color: var(--tinta-fraca); font-size: 13px; }
.ok { color: var(--ok); }
.bolinha { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: middle; }

/* ----- Botões e formulários ----- */
/* O fundo é o dourado PROFUNDO, não o claro: branco sobre #b8912a dá 2,95:1,
   abaixo do mínimo de 4,5:1 para texto de 14px. Sobre #8a6510 dá 5,26:1.
   O hover escurece em vez de clarear: qualquer tom mais claro que o profundo
   volta a reprovar (o dourado claro daria 2,95, um meio-termo daria 3,95). */
/* O atributo `hidden` do HTML precisa vencer as regras de display daqui.
   Sem isto, um `button[hidden]` continuaria à mostra: a regra de autor
   abaixo bate a folha de estilo do navegador. */
[hidden] { display: none !important; }

button, .botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 18px; font: inherit; font-size: 14px; font-weight: 600;
  background: var(--acento-forte); color: #fff; border: 0; border-radius: var(--raio-sm);
  cursor: pointer; text-decoration: none; line-height: 1.2;
  box-shadow: var(--sombra-sm);
  transition: background .18s var(--ease), transform .08s var(--ease), box-shadow .18s var(--ease);
}
button:hover, .botao:hover { background: var(--acento-escuro); color: #fff; box-shadow: var(--sombra-md); }
button:active, .botao:active { transform: translateY(1px); }
button:focus-visible, .botao:focus-visible { outline: 2px solid var(--acento-forte); outline-offset: 2px; }
button.secundario, .botao.secundario {
  background: transparent; color: var(--acento-forte);
  border: 1px solid var(--linha); box-shadow: none;
}
button.secundario:hover, .botao.secundario:hover { background: var(--creme); color: var(--acento-forte); }
/* Abre o painel lateral: é ação, não navegação, então é <button>. Parece link
   porque vive dentro de listas e tabelas. */
button.link {
  background: none; color: var(--acento-forte); padding: 0; box-shadow: none;
  font-weight: 400; font-size: inherit; text-align: left; text-decoration: underline;
  text-underline-offset: 2px; display: inline;
}
button.link:hover { background: none; color: var(--acento); box-shadow: none; }

button.link-perigo {
  background: none; color: var(--perigo); padding: 0; font-size: 13px;
  text-decoration: underline; box-shadow: none; font-weight: 500;
}
button.link-perigo:hover { background: none; color: #8f1414; box-shadow: none; }
form { display: inline; }
.formulario { display: block; max-width: 640px; }

label { display: block; margin-bottom: 14px; font-size: 14px; color: var(--tinta-fraca); font-weight: 500; }
label.inline { display: flex; align-items: center; gap: 8px; color: var(--tinta); font-weight: 400; }
label.inline input { width: auto; }
input, select, textarea {
  width: 100%; padding: 10px 12px; font: inherit; font-size: 14px; color: var(--tinta);
  border: 1px solid var(--linha); border-radius: var(--raio-sm); background: #fff; margin-top: 5px;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
input:focus, select:focus, textarea:focus {
  outline: 0; border-color: var(--acento);
  box-shadow: 0 0 0 3px rgba(184,145,42,.15);
}
input[type="color"] { width: 60px; padding: 2px; height: 38px; }
input[type="checkbox"], input[type="radio"] { width: auto; margin: 0; accent-color: var(--acento); }
input[readonly], input:disabled { background: var(--creme); color: var(--tinta-fraca); }
textarea { resize: vertical; }
fieldset {
  border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 8px 18px 16px; margin-bottom: 16px; background: #fffdfa;
}
legend { font-size: 17px; font-weight: 600; padding: 0 8px; color: var(--acento-forte); }
#checklist input { margin-bottom: 6px; }

/* Caixinhas de responsável: em coluna na ficha da empresa, compactas na
   tabela de usuários, onde vivem dentro de um <details> por linha. */
fieldset.responsaveis label.inline { margin-bottom: 6px; }
td > details > summary { cursor: pointer; font-size: 13px; }
td > details > form { margin-top: 8px; min-width: 180px; }
td > details > form label.inline { margin-bottom: 4px; font-size: 13px; }
td > details > form button { margin-top: 6px; font-size: 13px; padding: 5px 12px; }

.linha { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 8px; }
.linha > * { flex: 1; min-width: 140px; margin-top: 0; }
.linha > button { flex: 0 0 auto; }
.busca { display: flex; gap: 8px; max-width: 480px; margin-bottom: 14px; }

details.avulsa {
  background: var(--papel); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 14px 16px; margin-bottom: 16px;
  box-shadow: var(--sombra-sm);
}
details.avulsa summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--acento-forte); }
details.avulsa form { display: block; margin-top: 12px; }

/* ----- Tabelas ----- */
.tabela {
  width: 100%; border-collapse: collapse; background: var(--papel);
  border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden;
  font-size: 14px; box-shadow: var(--sombra-sm);
}
.tabela th {
  text-align: left; padding: 11px 14px; background: var(--creme);
  font-size: 12px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--tinta); font-weight: 600;
}
.tabela td { padding: 11px 14px; border-top: 1px solid var(--linha); vertical-align: middle; }
.tabela tbody tr { transition: background .15s var(--ease); }
.tabela tbody tr:hover { background: #fdfaf3; }
.tabela tr.inativa, .tabela tr.feita { opacity: .55; }
.tabela tr.feita a { text-decoration: line-through; }
.acoes-linha { display: flex; gap: 10px; align-items: center; font-size: 13px; }

.abas { display: flex; gap: 6px; border-bottom: 1px solid var(--linha); margin-bottom: 16px; }
.abas a {
  padding: 8px 12px; text-decoration: none; color: var(--tinta-fraca);
  font-size: 14px; border-bottom: 2px solid transparent;
}
.abas a.ativa { color: var(--tinta); border-bottom-color: var(--acento); font-weight: 600; }

.etiqueta {
  font-size: 11px; padding: 2px 9px; border-radius: 999px; font-weight: 600;
  background: var(--creme); color: var(--acento-forte); text-transform: uppercase;
}
.etiqueta-email { background: var(--creme); color: var(--acento-forte); }
.etiqueta-avulsa { background: #efece4; color: var(--tinta-fraca); }
.etiqueta-alerta { background: var(--perigo); color: #fff; }

/* ----- Resumo do painel ----- */
.resumo {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px; margin-bottom: 20px;
  /* Sem isto todo bloco da linha estica até a altura do mais alto: abrir um
     deixava os outros três como caixas altas e vazias. */
  align-items: start;
}

/* A barra que governa os blocos: o botão que abre tudo e a régua da altura. */
.barra-resumo {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: 12px; color: var(--tinta-fraca); margin: 0 0 10px;
}
.expandir-tudo {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--acento-forte); font-weight: 600;
}
.expandir-tudo:hover { text-decoration: underline; }
.altura-blocos { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
/* A régua da altura.

   O `padding` e a borda existem porque `input, select, textarea` lá em cima
   valem para TODO input — e um <input type="range"> desenha a trilha dentro
   da área de conteúdo. Com 12px de padding de cada lado mais a borda, a
   trilha ficava encolhida por dentro da caixa e o botão parava a uns treze
   pixels de cada ponta: no mínimo e no máximo ele nunca chegava ao fim do
   curso. Zerar os três devolve a trilha inteira, e a régua passa a encostar
   nos dois extremos. */
.altura-blocos input[type="range"] {
  width: 140px; padding: 0; border: 0; margin: 0;
  background: none; accent-color: var(--acento-forte); cursor: pointer;
}
.altura-blocos input[type="range"]:disabled { cursor: default; }
/* A regra global dá foco de campo de texto — moldura mais halo — numa coisa
   que não tem moldura nenhuma. */
.altura-blocos input[type="range"]:focus { box-shadow: none; }
.altura-blocos:has(input:disabled) { opacity: .45; }

.bloco {
  border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px 18px;
  background: var(--papel); box-shadow: var(--sombra-sm);
  transition: box-shadow .25s var(--ease);
}
.bloco:hover { box-shadow: var(--sombra-md); }
.bloco.alerta { border-color: #e8c4c4; background: var(--perigo-fundo); }
.resumo h2 {
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 12px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--tinta-fraca); margin: 0 0 10px; font-weight: 600;
}
.contador {
  background: var(--creme); color: var(--acento-forte); border-radius: 999px;
  padding: 2px 9px; font-size: 13px; font-weight: 700;
}
/* Dentro do bloco vermelho o badge tinha quase a cor do próprio bloco e o
   número sumia. Fundo sólido resolve. */
.bloco.alerta .contador { background: var(--perigo); color: #fff; }

.numero-grande {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 34px; font-weight: 600; margin: 0; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.bloco.alerta .numero-grande { color: var(--perigo); }

.lista-compacta { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.lista-compacta li { padding: 2px 0; }
.lista-compacta li.feita a { text-decoration: line-through; opacity: .6; }
.lista-compacta .grupo > ul { list-style: none; padding-left: 14px; margin: 2px 0 6px; }

/* A lista rola DENTRO do bloco em vez de esticar a página. É o que mantém o
   painel do mesmo tamanho: sessenta ocorrências atrasadas não empurram mais o
   calendário três telas para baixo. A altura vem da régua da barra (ver
   assets/app.js); o valor aqui é só o padrão de quem nunca mexeu nela. */
.bloco .corpo {
  max-height: var(--altura-blocos, 260px); overflow-y: auto;
  /* Um respiro à direita para a barra de rolagem não encostar no texto. */
  scrollbar-width: thin; padding-right: 2px;
}

/* "Expandir tudo": o teto sai e as listas vão até onde precisarem. Serve para
   varrer o dia de enfiada, com a rolagem da página em vez de quatro rolagens
   separadas. */
#resumo-painel.expandido .bloco .corpo { max-height: none; overflow: visible; }


/* ----- Calendário ----- */
.barra-calendario { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
/* `capitalize` deixaria "Agosto De 2026" — só a primeira letra sobe. */
.barra-calendario h1 { margin: 0; flex: 1; }
.barra-calendario h1::first-letter { text-transform: uppercase; }
.barra-calendario h2 { margin: 0; }
.barra-calendario nav { display: flex; gap: 6px; }
/* A barra de ações do Modelo: todos os botões do mesmo tamanho.
   `.linha` não serve aqui — ela alinha pelo topo, então botão de duas linhas
   fica mais alto que os vizinhos, e deixa o texto quebrar. Aqui as colunas
   têm a mesma largura (flex-basis 0), o texto não quebra, e `stretch` faz
   todos terminarem na mesma altura. */
.acoes-modelo {
  display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 8px; align-items: stretch; margin: 0;
}
/* `1fr` em grid intrínseco iguala as colunas pela maior: os botões ficam do
   mesmo tamanho sem esticar até a borda da tela, que é o que `flex: 1` faria. */
.acoes-modelo > * { margin-top: 0; }
.acoes-modelo .botao,
.acoes-modelo > .menu-exportar > summary {
  width: 100%; height: 100%; white-space: nowrap; box-sizing: border-box;
}
/* O botão principal não tem borda e os secundários têm 1px: empilhados no
   telefone, isso deixava o primeiro 2px mais baixo que os outros. A borda
   transparente iguala sem mudar a aparência — e o `:not` preserva a borda
   que os secundários já têm. */
.acoes-modelo .botao:not(.secundario) { border: 1px solid transparent; }
.acoes-modelo > .menu-exportar > summary { display: inline-flex; }

/* O menu do "Exportar": um <details> em vez de JS.
   O <summary> vira o botão, e a lista abre logo abaixo. Sem script, o menu
   continua funcionando com o JS bloqueado — e sem estado para sincronizar. */
.menu-exportar { position: relative; display: inline-block; }
.menu-exportar > summary { list-style: none; cursor: pointer; user-select: none; }
.menu-exportar > summary::-webkit-details-marker { display: none; }
.menu-exportar > summary::after { content: " ▾"; }
.menu-exportar-itens {
  position: absolute; z-index: 20; top: calc(100% + 6px); left: 0;
  min-width: 300px; display: flex; flex-direction: column; gap: 2px;
  padding: 8px; border: 1px solid var(--linha); border-radius: 10px;
  background: var(--papel); box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
.menu-exportar-itens a {
  padding: 8px 10px; border-radius: 8px; text-decoration: none;
  font-size: 13px; color: var(--tinta);
}
.menu-exportar-itens a:hover, .menu-exportar-itens a:focus { background: var(--fundo); }

.filtro-empresa { display: block; margin: 0; }
.filtro-empresa select { width: auto; min-width: 200px; margin: 0; }

/* Sem isto, as cores do calendário e o arrastar não estão escritos em lugar
   nenhum — a pessoa tem que descobrir sozinha o que é vermelho e que o cartão
   se move. */
.legenda-calendario {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
  font-size: 12px; color: var(--tinta-fraca); margin: 0 0 10px;
}
.legenda-calendario > span { display: inline-flex; align-items: center; gap: 6px; }
.legenda-calendario .dica { margin-left: auto; font-style: italic; }
/* A amostra imita o cartão: tinta de fundo mais barra sólida do estado.
   Antes eram três quase-brancos, indistinguíveis num quadrado de 22 por 12.
   A barra sólida dá a cor, e o tamanho dela repete a estrutura do cartão —
   quem olha a legenda reconhece a mesma forma na grade.

   A cor não vem sozinha de propósito: vermelho e verde de luminância
   parecida são o caso clássico que o daltonismo vermelho-verde não separa.
   No cartão o estado também aparece no ponto, na tinta e no risco da
   concluída; aqui, na posição e na largura da barra. */
.amostra {
  width: 26px; height: 14px; border-radius: 3px; display: inline-block;
  border: 1px solid rgba(26,24,20,.14);
}
.amostra-atrasada {
  background: var(--tinta-atrasada); border-left: 6px solid var(--estado-atrasada);
}
.amostra-andamento {
  background: var(--tinta-andamento); border-left: 6px solid var(--estado-andamento);
}
.amostra-concluida {
  background: var(--tinta-concluida); border-left: 6px solid var(--estado-concluida);
}

.titulo-painel { margin-bottom: 16px; }
.mes-atual {
  font-size: 30px; margin: 0; flex: 1;
  font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600;
}
.mes-atual::first-letter { text-transform: uppercase; }

.acoes-empresa { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }

.calendario {
  width: 100%; border-collapse: collapse; table-layout: fixed;
  background: var(--papel); border: 1px solid var(--linha);
  border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra-sm);
}
/* Troca de mês em andamento. Discreto de propósito: a resposta costuma
   chegar em milissegundos, e um efeito forte piscaria a cada clique —
   justamente o que a troca sem recarregar veio evitar. */
.calendario.carregando { opacity: .55; }
.calendario.carregando .dia { pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .calendario { transition: opacity .12s var(--ease); }
}

.calendario th {
  padding: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--tinta-fraca); background: var(--creme); font-weight: 600;
}
.calendario td.dia {
  border: 1px solid var(--linha); vertical-align: top; height: 112px; padding: 5px;
}
.calendario td.dia.fora { background: #fbf9f6; color: #cfc9bf; }
.calendario td.dia.hoje { background: #fffdf6; box-shadow: inset 0 0 0 2px var(--acento); }
.calendario td.dia.alvo { background: var(--creme); outline: 2px dashed var(--acento); }
.calendario .numero { font-size: 11px; color: var(--tinta-fraca); }

.cartao {
  border-left: 4px solid var(--dourado-suave); background: #fff; border-radius: 6px;
  padding: 4px 7px; margin: 4px 0; font-size: 12px; cursor: grab;
  box-shadow: var(--sombra-sm); display: block;
  transition: box-shadow .18s var(--ease);
}
.cartao:hover { box-shadow: var(--sombra-md); }
.cartao:active { cursor: grabbing; }
.cartao.arrastando { opacity: .4; }
.cartao .titulo { display: block; }
.cartao .empresa { display: block; font-size: 10px; color: var(--tinta-fraca); }
.cartao .progresso { font-size: 10px; color: var(--acento-forte); font-weight: 600; }
/* O estado ganha um ponto sólido antes do título: a borda esquerda do
   cartão já carrega a cor da CLÍNICA, então a cor sozinha não podia
   distinguir as duas coisas. Ponto mais tinta de fundo mais o risco da
   concluída — três sinais, não um. */
.cartao .titulo::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 7px; height: 7px; border-radius: 50%; margin-right: 5px;
  background: var(--dourado-suave);
}
.cartao.atrasada { background: var(--tinta-atrasada); }
.cartao.atrasada .titulo { color: var(--estado-atrasada); font-weight: 600; }
.cartao.atrasada .titulo::before { background: var(--estado-atrasada); }

.cartao.em_andamento { background: var(--tinta-andamento); }
.cartao.em_andamento .titulo::before { background: var(--estado-andamento); }

/* D3: concluída fica no lugar, riscada, com o visto. */
.cartao.concluida { background: var(--tinta-concluida); opacity: .7; }
.cartao.concluida .titulo { text-decoration: line-through; }
.cartao.concluida .titulo::before { background: var(--estado-concluida); }
.cartao .check { color: var(--estado-concluida); font-weight: 700; }

/* Dia cheio: só os três primeiros, e um "+N mais" (ver o parcial da grade).
   Sem isso um dia com dezoito ocorrências esticava a linha inteira da semana,
   e as outras seis células viravam campo vazio. */
.cartoes.limitada > .cartao:nth-child(n+4) { display: none; }
.mais-dia {
  display: block; width: 100%; margin-top: 2px;
  background: none; border: 0; padding: 2px; cursor: pointer;
  font-size: 11px; color: var(--acento-forte); font-weight: 600; text-align: left;
}
.mais-dia:hover { text-decoration: underline; }
/* O botão da barra abre todos de uma vez. A classe mora na <table>, que a
   troca de mês não substitui — só o <tbody> —, então a escolha atravessa
   a navegação sem o JavaScript ter de refazê-la. */
.calendario.todos-abertos .cartoes.limitada > .cartao { display: block; }
.calendario.todos-abertos .mais-dia { display: none; }
.alternar-dias {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--acento-forte); font-weight: 600;
}
.alternar-dias:hover { text-decoration: underline; }

/* ----- Painel lateral ----- */
#painel-lateral {
  position: fixed; top: 0; right: 0; width: min(460px, 100%); height: 100%;
  background: var(--papel); box-shadow: var(--sombra-lg);
  overflow-y: auto; padding: 24px; transform: translateX(100%);
  transition: transform .22s var(--ease); z-index: 1000;
}
#painel-lateral.aberto { transform: translateX(0); }
#fundo-painel {
  position: fixed; inset: 0; background: rgba(26,24,20,.45); z-index: 990; display: none;
}
#fundo-painel.aberto { display: block; }

.painel-ocorrencia header { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.painel-ocorrencia .fechar-painel {
  margin-left: auto; background: none; color: var(--tinta-fraca); font-size: 22px;
  padding: 0 6px; box-shadow: none;
}
.painel-ocorrencia .fechar-painel:hover { background: none; color: var(--tinta); box-shadow: none; }
.painel-ocorrencia h2 { margin: 12px 0 6px; font-size: 24px; }
.painel-ocorrencia .meta { font-size: 13px; color: var(--tinta-fraca); }
.painel-ocorrencia .descricao {
  background: var(--fundo); padding: 14px; border-radius: var(--raio);
  margin: 14px 0; font-size: 14px; white-space: normal;
}
.email-origem { border-top: 1px solid var(--linha); padding-top: 14px; font-size: 13px; }
.corpo-email {
  max-height: 260px; overflow-y: auto; background: var(--fundo);
  padding: 12px; border-radius: var(--raio-sm); font-size: 13px;
}
.anexos { list-style: none; padding: 0; margin-top: 8px; font-size: 13px; }
.titulo-links { font-size: 13px; margin: 14px 0 6px; color: var(--tinta-fraca); }
.links-email { list-style: none; padding: 0; margin: 0; font-size: 13px; }
.links-email li { padding: 3px 0; }
/* URL crua de e-mail é longa e não tem espaço: sem isto ela estoura a caixa. */
.links-email a, .corpo-email a { overflow-wrap: anywhere; }
.checklist ul { list-style: none; padding: 0; }
.checklist li { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 14px; }
.checklist label { display: flex; align-items: center; gap: 8px; margin: 0; flex: 1; cursor: pointer; color: var(--tinta); }
.acoes {
  border-top: 1px solid var(--linha); margin-top: 18px; padding-top: 16px;
  display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap;
}
.comprovantes { border-top: 1px solid var(--linha); margin-top: 16px; padding-top: 12px; }
.comprovantes input[type="file"] { font-size: 13px; padding: 6px; }
.aviso-campo { color: var(--perigo); font-size: 13px; margin: 6px 0 0; }
.observacao-conclusao { margin-top: 16px; font-size: 13px; }
.acoes .mover { margin: 0; font-size: 13px; }
.acoes .mover input { width: auto; }

.entrada-diario {
  background: var(--papel); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 16px 18px; margin-bottom: 14px;
  box-shadow: var(--sombra-sm); transition: box-shadow .25s var(--ease);
}
.entrada-diario:hover { box-shadow: var(--sombra-md); }
.entrada-diario h2 { margin-top: 0; }

/* ----- Links e contatos úteis -----
   Uma lista de consulta rápida, não um bloco de leitura: cada item cabe numa
   linha, e o que distingue um do outro é o nome, não a decoração. */
.links-uteis { margin: 26px 0; }
.lista-links { list-style: none; padding: 0; margin: 0 0 12px; }
.lista-links li {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 8px 0; border-bottom: 1px solid var(--linha); font-size: 14px;
}
.lista-links li:last-child { border-bottom: 0; }
.contato-link {
  font-variant-numeric: tabular-nums; color: var(--tinta);
  background: var(--fundo); border-radius: var(--raio-sm); padding: 1px 8px;
}
/* Quem é o item do flex é o <form>, não o botão dentro dele: é nele que o
   empurrão para a direita tem efeito. */
.lista-links li > form { margin-left: auto; }

/* ----- Quadro do diário -----
   O caderno geral é a caixa de entrada; abaixo, as três colunas de trabalho.
   No celular elas viram uma embaixo da outra: três colunas de cartões de texto
   num telefone não se leem. */
.titulo-area {
  font-size: 15px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tinta-fraca); margin: 0 0 12px;
  display: flex; align-items: center; gap: 8px;
}
.titulo-area .contador {
  background: var(--creme); color: var(--acento-escuro);
  border-radius: 999px; padding: 1px 9px; font-size: 12px;
}
.caderno-geral { margin-top: 26px; }

.quadro-diario {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px; margin-top: 26px; align-items: start;
}
@media (max-width: 900px) { .quadro-diario { grid-template-columns: 1fr; } }

.coluna-diario {
  background: var(--fundo); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 14px; min-height: 140px;
}
.coluna-diario .entrada-diario { padding: 12px 14px; }
.coluna-diario .entrada-diario h2 { font-size: 16px; }

/* A zona inteira se acende ao receber o cartão arrastado — sem isso não há
   como saber onde ele vai cair. */
.zona-diario.sobre {
  outline: 2px dashed var(--acento); outline-offset: 3px;
  background: var(--creme);
}
.entrada-diario.arrastando { opacity: .45; }
.entrada-diario[draggable="true"] h2 { cursor: grab; }
.vazio-diario { margin: 6px 2px; font-style: italic; }

/* A seta de mover: some no cartão até ser procurada, e abre a lista de
   destinos logo abaixo. O destino atual não aparece — mover para onde já se
   está não é uma opção. */
.mover-diario { position: relative; display: inline-block; }
.mover-diario > summary {
  cursor: pointer; list-style: none; color: var(--tinta-fraca);
  font-size: 15px; line-height: 1; padding: 2px 4px; border-radius: var(--raio-sm);
}
.mover-diario > summary::-webkit-details-marker { display: none; }
.mover-diario > summary:hover,
.mover-diario[open] > summary { color: var(--acento-forte); background: var(--creme); }
.mover-diario > form {
  position: absolute; z-index: 20; top: 100%; left: 0; margin-top: 4px;
  display: flex; flex-direction: column; min-width: 150px;
  background: var(--papel); border: 1px solid var(--linha);
  border-radius: var(--raio-sm); box-shadow: var(--sombra-md); padding: 4px;
}
.mover-diario > form button {
  background: transparent; color: var(--tinta); border: 0;
  /* O botão do sistema centraliza e não estica: sem os dois, os destinos
     ficam tortos dentro do menu. */
  text-align: left; width: 100%; justify-content: flex-start;
  padding: 6px 10px; font-size: 13px; border-radius: var(--raio-sm); font-weight: 400;
}
.mover-diario > form button:hover { background: var(--creme); color: var(--acento-escuro); }

.mais-finalizadas > summary { cursor: pointer; color: var(--acento-forte); font-size: 13px; }
.etiqueta-situacao {
  background: var(--creme); color: var(--acento-escuro);
  border-radius: 999px; padding: 1px 9px; font-size: 12px; margin-left: 6px;
}

.senha-campo { display: inline-flex; align-items: center; gap: 8px; }
.senha-campo .valor { min-width: 96px; display: inline-block; }
.copiavel { cursor: pointer; border-bottom: 1px dotted var(--dourado-suave); }

/* ----- Avisos passageiros (toast) -----
   Mesmo padrão da Plataforma de Pagamentos. Substituem o reload que servia de
   confirmação: a pessoa continua onde estava no calendário. */
.pilha-avisos {
  position: fixed; top: 20px; right: 20px; z-index: 1100;
  display: flex; flex-direction: column; gap: 10px; max-width: 90vw;
}
.aviso {
  background: #fff; border: 1px solid var(--linha); border-left: 4px solid var(--ok);
  border-radius: var(--raio-sm); box-shadow: var(--sombra-lg);
  padding: 12px 18px; min-width: 240px; max-width: 380px; font-size: 14px;
  animation: avisoEntra .28s var(--ease) both;
}
.aviso-erro { border-left-color: var(--perigo); }
.aviso.saindo { animation: avisoSai .25s var(--ease) forwards; }
@keyframes avisoEntra { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes avisoSai   { to { opacity: 0; transform: translateX(24px); } }

@media (prefers-reduced-motion: reduce) {
  .aviso, .aviso.saindo, main { animation: none; }
  #painel-lateral { transition: none; }
}

/* ----- Login ----- */
.tela-login { display: grid; place-items: center; min-height: 100vh; padding: 20px; }
.cartao-login {
  display: block; background: var(--papel); padding: 32px;
  border: 1px solid var(--linha); border-radius: var(--raio);
  box-shadow: var(--sombra-lg); width: min(380px, 92vw);
  animation: entrada .45s var(--ease) both;
}
.cartao-login .marca { display: block; margin-bottom: 18px; }
.cartao-login .marca img { height: 44px; width: auto; display: block; }
.cartao-login h1 { margin-bottom: 2px; font-size: 26px; }
.cartao-login button { width: 100%; margin-top: 8px; }

/* ----- Relatório da clínica (tela e impressão) ----- */
.cabecalho-relatorio {
  display: flex; align-items: center; gap: 18px;
  border-bottom: 2px solid var(--linha); padding-bottom: 14px; margin-bottom: 20px;
}
.cabecalho-relatorio img { height: 46px; width: auto; }
.cabecalho-relatorio h2 { margin: 0; }
.relatorio h3 { font-size: 20px; margin-top: 26px; }

@media print {
  /* O relatório é a única coisa que vai para o papel. */
  .topo, .nao-imprime, #painel-lateral, #fundo-painel, .flash { display: none !important; }
  body { background: #fff; }
  main { padding: 0; max-width: 100%; animation: none; }
  .bloco, .tabela, .relatorio { box-shadow: none; break-inside: avoid; }
  a { color: var(--tinta); text-decoration: none; }
}

/* ----- Responsivo ----- */
@media (max-width: 720px) {
  .topo { flex-wrap: wrap; gap: 10px; padding: 10px 16px; }
  .topo nav { order: 3; width: 100%; overflow-x: auto; white-space: nowrap; padding-bottom: 4px; }
  /* A busca fixa em 180px espremia o logo e o nome do usuário no celular. */
  .busca-topo { order: 4; width: 100%; }
  .busca-topo input, .busca-topo input:focus { width: 100%; }
  .legenda-calendario .dica { margin-left: 0; flex-basis: 100%; }
  .acoes-empresa .botao { flex: 1 1 auto; justify-content: center; }
  main { padding: 18px 14px; }
  .resumo { grid-template-columns: 1fr; }
  .barra-calendario { flex-wrap: wrap; }
  .barra-calendario h1 { flex: 1 0 100%; }
  .tabela { display: block; overflow-x: auto; }
  .acoes-modelo { display: grid; grid-auto-flow: row; width: 100%; }
  .linha { flex-direction: column; }
  .linha > * { width: 100%; }
  .calendario td.dia { height: auto; min-height: 64px; }
  .cartao { font-size: 11px; }
  .cartao .empresa { display: none; }
  #painel-lateral { width: 100%; }
}

/* O comando do cron precisa poder ser selecionado inteiro sem quebrar: um
   caminho partido em duas linhas vira duas metades ao copiar. */
.comando-cron {
  background: var(--fundo); border: 1px solid var(--linha);
  border-left: 3px solid var(--acento); border-radius: var(--raio-sm);
  padding: 10px 12px; margin: 8px 0; font-size: 12.5px;
  font-family: ui-monospace, Consolas, monospace;
  overflow-x: auto; white-space: pre; user-select: all;
}

/* Endereço editável na prévia da importação: o prefixo e o domínio ficam
   como texto, e só o slug é campo — deixa claro o que dá para mudar. */
/* Endereço com prefixo e sufixo fixos. A caixa inteira se parece com um campo
   só, e só o miolo aceita digitação — que é a verdade: a caixa e o domínio vêm
   da configuração e ninguém os edita aqui. Sem a moldura, o campo ficava um
   input solto no meio de duas frases cinzas, e não se lia como um endereço. */
.endereco-campo {
  /* flex com width fit-content: pega a linha inteira para si, como todo campo
     do formulário, mas a moldura abraça o endereço. Esticada, o sufixo ia
     para a borda direita e o endereço se lia como dois pedaços distantes em
     vez de um endereço só. */
  display: flex; width: fit-content; align-items: center; flex-wrap: wrap;
  margin-top: 5px; padding: 0 10px; max-width: 100%;
  border: 1px solid var(--linha); border-radius: var(--raio-sm); background: #fff;
  font-family: ui-monospace, Consolas, monospace; font-size: 13px;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.endereco-campo:focus-within {
  border-color: var(--acento); box-shadow: 0 0 0 3px rgba(184,145,42,.15);
}
.endereco-campo .fixo { color: var(--tinta-fraca); white-space: nowrap; }
/* O aviso desce para a própria linha: colado ao lado do campo, a frase se
   emendava ao endereço e os dois viravam um parágrafo só. */
.endereco-campo + .ajuda { display: block; margin-top: 6px; }
.endereco-campo input {
  /* A largura vem do atributo "size", calculado do valor: assim a moldura
     acompanha o endereço e não sobra vão entre o nome e o "@dominio".
     O "field-sizing" faz o mesmo enquanto se digita, onde houver suporte. */
  flex: 0 1 auto; width: auto; field-sizing: content; min-width: 6ch; margin: 0;
  padding: 9px 2px; border: 0; background: transparent;
  font-family: inherit; font-size: 14px; color: var(--tinta);
}
/* Sem "field-sizing", ao menos ao digitar o campo abre espaço: nome longo não
   pode ficar rolando dentro de poucos caracteres enquanto se confere letra a
   letra. */
@supports not (field-sizing: content) {
  .endereco-campo input:focus { width: 24ch; }
}
.endereco-campo input:focus { outline: 0; border: 0; box-shadow: none; }
/* Dentro da tabela o controle encolhe: ali são vinte e uma linhas, e a
   moldura de cada uma somada vira ruído. */
.tabela .endereco-campo { margin-top: 0; padding: 0 8px; }
.tabela .endereco-campo input { padding: 5px 2px; font-size: 13px; }

.endereco-editavel { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; }
.endereco-editavel input {
  margin: 0; width: 14ch; min-width: 8ch; padding: 4px 7px; font-size: 13px;
  font-family: ui-monospace, Consolas, monospace;
}
.endereco-editavel input:focus { width: 22ch; }

/* Zona de perigo: separada do resto por borda e cor, para ninguém tropeçar
   nela enquanto rola a página da clínica. */
/* Fechada, é uma linha discreta; aberta, mostra o aviso inteiro em vermelho.
   O alarme aparece para quem foi procurar, não para quem passou por perto. */
.zona-perigo {
  margin-top: 32px; padding: 10px 14px;
  border: 1px solid var(--linha); border-radius: var(--raio);
  background: var(--papel);
}
.zona-perigo > summary {
  cursor: pointer; font-size: 13px; color: var(--tinta-fraca);
  list-style: none; display: flex; align-items: center; gap: 6px;
}
.zona-perigo > summary::-webkit-details-marker { display: none; }
.zona-perigo > summary::before { content: "▸"; font-size: 11px; }
.zona-perigo > summary:hover { color: var(--perigo); }
.zona-perigo[open] {
  padding: 16px 18px;
  border-color: #f0cccc; background: var(--perigo-fundo);
}
.zona-perigo[open] > summary {
  color: var(--perigo); font-weight: 600; font-size: 15px; margin-bottom: 10px;
}
.zona-perigo[open] > summary::before { content: "▾"; }
.zona-perigo input { max-width: 340px; }

/* Formulários lado a lado: <form> é bloco, e um botão por formulário empurra
   o vizinho para a linha de baixo (ou para longe, quando algo flutua). */
.acoes-linha-formularios { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.acoes-linha-formularios form { margin: 0; }

/* ----- Diálogo de confirmação -----
   Substitui o confirm() do navegador, que ignora a identidade do site e não
   deixa distinguir "excluir uma entrada do diário" de "apagar uma clínica
   inteira". Aqui a ação destrutiva é vermelha, o texto cabe em duas linhas e
   o botão seguro é o que recebe o foco. */
#fundo-dialogo {
  position: fixed; inset: 0; background: rgba(26,24,20,.45);
  z-index: 1100; display: grid; place-items: center; padding: 20px;
}
#fundo-dialogo[hidden] { display: none !important; }

.dialogo {
  background: var(--papel); border-radius: var(--raio);
  box-shadow: var(--sombra-lg); padding: 24px 26px;
  width: min(440px, 100%); animation: dialogoEntra .16s var(--ease);
}
@keyframes dialogoEntra { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .dialogo { animation: none; } }

.dialogo h2 {
  font-size: 20px; margin: 0 0 8px;
  /* Sem margem de topo: o título é a primeira coisa da caixa. */
}
.dialogo .corpo { color: var(--tinta-fraca); font-size: 14px; margin: 0 0 4px; }
.dialogo .corpo strong { color: var(--tinta); }
.dialogo ul { margin: 8px 0 0; padding-left: 18px; font-size: 13.5px; color: var(--tinta-fraca); }
.dialogo li { margin-bottom: 3px; }

.dialogo .acoes {
  display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px;
}
/* O destrutivo é botão de verdade, em vermelho — não um link discreto: quando
   ele É a ação principal, precisa parecer o que faz. Vale fora do diálogo
   também: a barra de seleção usa o mesmo botão. */
button.perigo, .botao.perigo { background: var(--perigo); }
button.perigo:hover, .botao.perigo:hover { background: #8f1414; }

/* ----- Seleção múltipla -----
   A coluna de marcar nasce escondida e só existe no modo de seleção: a lista
   é lida muito mais vezes do que editada, e uma coluna de caixas permanente
   compete com o que interessa ler. Sem JavaScript ela nunca aparece, o que
   está certo — sem JS não haveria como somar a seleção. */
.col-selecao { display: none; }
.tabela.com-selecao .col-selecao {
  display: table-cell; width: 34px; text-align: center;
}
.col-selecao input { margin: 0; }

.barra-selecao {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--creme); border: 1px solid var(--acento);
  border-radius: var(--raio-sm); padding: 10px 14px; margin-bottom: 10px;
}
.barra-selecao[hidden] { display: none !important; }
.barra-selecao .marcar-todas {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.barra-selecao .marcar-todas input { margin: 0; }
.barra-selecao button:disabled { opacity: .45; cursor: not-allowed; }
.barra-selecao button:disabled:hover { background: var(--perigo); }

/* O botão que liga o modo fica marcado enquanto ele dura. */
#alternar-selecao.ativo {
  background: var(--acento-forte); color: #fff; border-color: var(--acento-forte);
}

/* ----- Colunas da clínica (08/10/2026) -----
   Com as colunas que a Fernanda cria, a lista de Empresas pode passar da
   largura da tela: rola dentro da própria moldura, não a página. */
.tabela-rolavel {
  overflow-x: auto; border-radius: var(--raio); box-shadow: var(--sombra-sm);
  -webkit-overflow-scrolling: touch;
}
.tabela-rolavel > .tabela { box-shadow: none; }
.tabela-empresas th, .tabela-empresas td { white-space: nowrap; }
.sem-quebra { white-space: nowrap; }
.form-coluna { margin-top: 10px; min-width: 280px; }
.ficha-empresa {
  display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 4px 0 16px;
  font-size: 14px;
}
.ficha-empresa > div { display: flex; gap: 6px; }
.ficha-empresa dt { color: var(--tinta-fraca); }
.ficha-empresa dt::after { content: ':'; }
.ficha-empresa dd { margin: 0; color: var(--tinta); font-weight: 500; }

/* ----- Licenças ----- */
.selo-licenca {
  display: inline-block; font-size: 12px; font-weight: 600; white-space: nowrap;
  padding: 2px 10px; border-radius: 999px;
  background: var(--creme); color: var(--acento-escuro);
}
.selo-vencida  { background: var(--tinta-atrasada);  color: var(--estado-atrasada); }
.selo-renovar  { background: var(--tinta-andamento); color: var(--estado-andamento); }
.selo-em_dia   { background: var(--tinta-concluida); color: var(--estado-concluida); }
.selo-sem_data { background: #efece4; color: var(--tinta-fraca); }
.atalhos-situacao { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.atalhos-situacao a {
  padding: 6px 12px; border: 1px solid var(--linha); border-radius: 999px;
  text-decoration: none; color: var(--tinta-fraca); font-size: 14px; background: var(--papel);
}
.atalhos-situacao a.ativa { border-color: var(--acento); color: var(--tinta); font-weight: 600; background: var(--creme); }
.atalhos-situacao a.perigo .contador { background: var(--perigo); color: #fff; }
.filtros-licencas > select { max-width: 280px; }

/* ----- Métrica de atrasos ----- */
.metrica-atraso { font-size: 13px; color: var(--tinta-fraca); margin: 0 0 8px; }
.metricas-atraso { margin-top: 28px; }
.metricas-atraso .numero-grande small { font-size: 16px; color: var(--tinta-fraca); }
.faixas-atraso li { display: flex; justify-content: space-between; gap: 12px; }
.duas-colunas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px; align-items: start; margin-bottom: 20px;
}
.tendencia-atraso tr.mes-escolhido { background: var(--alerta-fundo); }
.barra-celula { width: 30%; }
.barra-pontualidade {
  display: block; height: 8px; border-radius: 999px; background: var(--acento);
  min-width: 2px;
}

/* ----- NPS (só no bpo2) ----- */
.nps-link {
  display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; justify-content: space-between;
  background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 16px 20px; margin-bottom: 16px; box-shadow: var(--sombra-sm);
}
.nps-link > div:first-child { flex: 1; min-width: 260px; }
.nps-link h2 { margin-top: 0; }
.nps-qr { width: 168px; }
.nps-qr svg { width: 100%; height: auto; display: block; }
.estrelas-tabela { color: #c99700; letter-spacing: 1px; white-space: nowrap; }

/* ----- Licenças sem clínica ----- */
.tabela-sem-clinica td { vertical-align: top; }
.tabela-sem-clinica .lista-compacta { margin: 0; }
.form-cnpj { display: flex; gap: 6px; align-items: center; margin: 0; min-width: 260px; }
.form-cnpj input { margin-top: 0; width: 180px; }
.form-cnpj button { padding: 8px 14px; }

/* ----- Licenças no calendário ("Mostrar: Licenças") -----
   O cartão é um link que abre a licença: não arrasta, e a cor diz a
   situação com os mesmos sinais das pendências (ponto e fundo). */
a.cartao-licenca { display: block; text-decoration: none; color: inherit; cursor: pointer; }
a.cartao-licenca:active { cursor: pointer; }
.cartao.sit-vencida { background: var(--tinta-atrasada); }
.cartao.sit-vencida .titulo { color: var(--estado-atrasada); font-weight: 600; }
.cartao.sit-vencida .titulo::before { background: var(--estado-atrasada); }
.cartao.sit-renovar { background: var(--tinta-andamento); }
.cartao.sit-renovar .titulo::before { background: var(--estado-andamento); }
.cartao.sit-em_dia { background: var(--tinta-concluida); }
.cartao.sit-em_dia .titulo::before { background: var(--estado-concluida); }

/* ----- Login do bpo2: a entrada é o botão; a senha fica recolhida ----- */
.cartao-login .entrar-principal { display: block; text-align: center; margin: 6px 0 14px; }
.senha-emergencia > summary { cursor: pointer; font-size: 13px; color: var(--tinta-fraca); margin-bottom: 10px; }
.atalho-instalacao { font-weight: 600; }

/* ----- Carteiras (09/10/2026) ----- */
.seletor-carteira { display: inline-flex; border: 1px solid var(--linha); border-radius: 999px; padding: 2px; margin: 0; background: var(--papel); }
.seletor-carteira button {
  background: transparent; color: var(--tinta-fraca); border: 0; box-shadow: none;
  padding: 5px 12px; font-size: 13px; border-radius: 999px; font-weight: 500;
}
.seletor-carteira button:hover { background: var(--creme); color: var(--acento-escuro); box-shadow: none; }
.seletor-carteira button.ativa { background: var(--acento-forte); color: #fff; font-weight: 600; }
/* Fora da carteira principal, sempre à vista. Azul, e não o dourado da
   marca: tem de destoar para ser notada. */
.faixa-carteira {
  background: #1f3a68; color: #fff; text-align: center; font-size: 13px;
  padding: 6px 16px; letter-spacing: .2px;
}
.form-carteira { margin: 0; align-items: center; }
.form-carteira input { margin-top: 0; max-width: 260px; }
/* Com o seletor, o topo ficou mais cheio: item do menu não quebra no meio
   ("Modelo de / Tarefas"); se não couber, o menu desce uma linha inteira. */
.topo nav { flex-wrap: wrap; row-gap: 6px; }
.topo nav a { white-space: nowrap; }