/*
 * Identidade visual do Grupo HOSA
 * Azul institucional + verde de ação, Montserrat nos títulos, Roboto no texto,
 * botões em pílula e cartões brancos bem arredondados.
 */
:root {
  --azul: #0066cc;
  --azul-escuro: #0052a3;
  --azul-titulo: #0063b8;
  --azul-marinho: #324995;
  --azul-claro: #e6f0fa;
  --verde: #99cc33;
  --verde-escuro: #86b32a;
  --verde-claro: #eef7dc;

  --fundo: #f6f6f6;
  --superficie: #ffffff;
  --borda: #e1e7ef;
  --texto: #333333;
  --texto-suave: #6b7785;

  --perigo: #c62828;
  --perigo-claro: #fdecea;
  --sucesso: #4d7a0f;
  --sucesso-claro: #eef7dc;
  --aviso: #a15c00;
  --aviso-claro: #fff4dc;
  --ferias: #9c2a6b;
  --ferias-claro: #fce8f3;

  --degrade: linear-gradient(135deg, #0077e6 0%, #0066cc 45%, #324995 100%);
  --raio: 10px;
  --raio-cartao: 18px;
  --pilula: 50px;
  --sombra: 0 2px 6px rgba(0, 51, 102, .06), 0 8px 24px rgba(0, 51, 102, .06);

  --fonte-titulo: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --fonte-texto: "Roboto", "Segoe UI", system-ui, sans-serif;
  font-family: var(--fonte-texto);
  color: var(--texto);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); font-size: 14px; }
h1, h2, h3 { margin: 0; font-family: var(--fonte-titulo); font-weight: 800; color: var(--azul-titulo); }
button, input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* Enquanto o sistema conversa com o servidor: cursor de espera e barra animada no topo */
html.carregando, html.carregando * { cursor: progress !important; }
html.carregando::after {
  content: ""; position: fixed; top: 0; left: 0; height: 3px; width: 35%; z-index: 100;
  background: var(--verde); border-radius: 0 3px 3px 0; animation: carregando 1s ease-in-out infinite;
}
@keyframes carregando { from { transform: translateX(-100%); } to { transform: translateX(300%); } }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 20px; border-radius: var(--pilula); border: 1.5px solid var(--borda);
  background: var(--superficie); cursor: pointer; font-weight: 500; white-space: nowrap; text-decoration: none;
  transition: background .15s, border-color .15s, transform .1s;
}
.btn:hover { border-color: var(--azul); color: var(--azul); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .6; cursor: default; }

/* Ação principal (salvar, cadastrar, entrar): verde */
.btn-primario {
  background: var(--verde); border-color: var(--verde); color: #fff;
  font-family: var(--fonte-titulo); font-weight: 700;
}
.btn-primario:hover { background: var(--verde-escuro); border-color: var(--verde-escuro); color: #fff; }
/* Ação secundária de destaque: azul */
.btn-azul { background: var(--azul); border-color: var(--azul); color: #fff; }
.btn-azul:hover { background: var(--azul-escuro); border-color: var(--azul-escuro); color: #fff; }
.btn-perigo { background: var(--perigo); border-color: var(--perigo); color: #fff; font-weight: 700; }
.btn-perigo:hover { background: #a61f1f; border-color: #a61f1f; color: #fff; }

.btn-link {
  border: none; background: none; padding: 5px 10px; border-radius: var(--pilula);
  color: var(--azul); font-weight: 500; cursor: pointer;
}
.btn-link:hover { background: var(--azul-claro); }
.btn-link.perigo { color: var(--perigo); }
.btn-link.perigo:hover { background: var(--perigo-claro); }

/* ---------- Campos ---------- */
.campo { display: flex; flex-direction: column; gap: 5px; }
.campo label { font-weight: 500; font-size: 13px; }
.campo .dica, .dica { color: var(--texto-suave); font-size: 12px; }
.obrigatorio::after { content: " *"; color: var(--perigo); }
input[type=text], input[type=password], input[type=email], input[type=search], input[type=tel],
input[type=date], input[type=time], input[type=number], select {
  width: 100%; padding: 10px 14px; border: 1.5px solid var(--borda); border-radius: var(--raio); background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(0, 102, 204, .15); }
.btn:focus-visible, .btn-link:focus-visible, .menu a:focus-visible { outline: 3px solid rgba(0, 102, 204, .35); outline-offset: 2px; }
.checkbox { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.checkbox input { accent-color: var(--azul); width: 16px; height: 16px; }

.alerta { padding: 10px 14px; border-radius: var(--raio); font-size: 13px; }
.alerta-erro { background: var(--perigo-claro); color: var(--perigo); }
.alerta-aviso { background: var(--aviso-claro); color: var(--aviso); }
.alerta-info { background: var(--azul-claro); color: var(--azul-escuro); }

textarea {
  width: 100%; padding: 10px 14px; border: 1.5px solid var(--borda); border-radius: var(--raio); background: #fafbfd;
  font: inherit; resize: vertical; line-height: 1.5;
}
textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(0, 102, 204, .15); }

/* Sub-abas dentro de uma aba (ex.: Usuários | Perfis de acesso) */
.sub-abas {
  display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin-bottom: 18px; background: var(--superficie);
  border: 1px solid var(--borda); border-radius: var(--raio-cartao); box-shadow: var(--sombra);
}
.sub-abas a {
  padding: 8px 16px; border-radius: var(--pilula); text-decoration: none; color: var(--texto-suave); font-weight: 500;
  white-space: nowrap;
}
.sub-abas a:hover { color: var(--azul); }
.sub-abas a.ativa { background: var(--azul); color: #fff; font-weight: 700; }
/* Abas da aba (Financeiro/Faturamento): ficam no topo da página, antes dos filtros */
.abas-topo {
  margin: -4px 0 14px; padding: 0; gap: 0; background: none; border: 0; box-shadow: none;
  border-bottom: 2px solid var(--borda);
}
.abas-topo a {
  padding: 10px 20px 12px; border-radius: 0; font-size: 14.5px; font-weight: 600; position: relative; top: 2px;
  border-bottom: 3px solid transparent;
}
.abas-topo a:hover { color: var(--azul); }
.abas-topo a.ativa {
  background: none; color: var(--azul-titulo); font-weight: 700; border-bottom-color: var(--verde);
}

/* Lista de abas liberadas no formulário de perfil */
.lista-permissoes { display: flex; flex-direction: column; gap: 8px; }
/* "Marcar todas / Desmarcar todas" ao lado do título da lista de abas do perfil */
.acoes-permissoes { float: right; display: inline-flex; align-items: center; gap: 10px; font-weight: 400; }
.acoes-permissoes .dica { margin: 0; }
.checkbox.permissao {
  align-items: flex-start; padding: 12px 14px; border: 1.5px solid var(--borda); border-radius: var(--raio);
}
.checkbox.permissao:has(input:checked) { border-color: var(--azul); background: var(--azul-claro); }
.checkbox.permissao input { margin-top: 2px; }
.checkbox.permissao .dica { display: block; }

/* ---------- Marca ---------- */
.marca { display: flex; align-items: center; gap: 12px; }
.marca img { width: 44px; height: 44px; flex: none; }
.marca .nome { font-family: var(--fonte-titulo); font-weight: 900; font-size: 20px; line-height: 1.05; color: var(--azul); letter-spacing: -.01em; }
.marca .nome b { font-weight: 900; color: var(--verde); }
.marca .sub { display: block; color: var(--texto-suave); font-size: 12px; margin-top: 2px; }

/* ---------- Login ---------- */
.pagina-login {
  min-height: 100vh; display: grid; place-items: center; padding: 16px;
  background: var(--degrade) fixed; position: relative; overflow: hidden;
}
/* Anéis decorativos ao fundo, lembrando a íris */
.pagina-login::before, .pagina-login::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
  border: 60px solid rgba(255, 255, 255, .06);
}
.pagina-login::before { width: 720px; height: 720px; top: -260px; right: -220px; }
.pagina-login::after { width: 520px; height: 520px; bottom: -240px; left: -180px; border-color: rgba(153, 204, 51, .12); }

.cartao-login {
  position: relative; z-index: 1; width: 100%; max-width: 400px; background: var(--superficie);
  border-radius: 24px; padding: 36px 32px 32px; box-shadow: 0 24px 60px rgba(0, 30, 80, .35);
}
.cartao-login .marca { justify-content: center; }
.cartao-login .faixa {
  margin: 22px 0 4px; text-align: center; font-family: var(--fonte-titulo); font-weight: 800;
  font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--azul-marinho);
}
.cartao-login form { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.cartao-login .btn-primario { padding: 12px; margin-top: 6px; font-size: 15px; }
.rodape-login { position: relative; z-index: 1; margin-top: 18px; text-align: center; color: rgba(255, 255, 255, .75); font-size: 12px; }

/* ---------- Estrutura do sistema ---------- */
.app { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
.lateral { background: var(--degrade); color: #fff; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.lateral::after {
  content: ""; position: absolute; width: 360px; height: 360px; left: -120px; bottom: -140px; border-radius: 50%;
  border: 40px solid rgba(255, 255, 255, .06); pointer-events: none;
}
.lateral .marca { padding: 22px 20px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.lateral .marca img { width: 40px; height: 40px; box-shadow: 0 0 0 3px rgba(255, 255, 255, .9); border-radius: 50%; }
.lateral .marca .nome { color: #fff; }
.lateral .marca .sub { color: rgba(255, 255, 255, .75); }

.menu { list-style: none; margin: 0; padding: 16px 12px; display: flex; flex-direction: column; gap: 4px; position: relative; z-index: 1; }
.menu a {
  display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: var(--pilula);
  color: rgba(255, 255, 255, .88); text-decoration: none; font-weight: 500;
}
.menu a:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.menu a.ativo { background: #fff; color: var(--azul); font-weight: 700; box-shadow: 0 4px 12px rgba(0, 20, 60, .2); }
.menu svg { width: 19px; height: 19px; flex: none; }

.principal { display: flex; flex-direction: column; min-width: 0; }
.topo {
  height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 28px; background: var(--superficie); border-bottom: 3px solid var(--verde);
  /* NADA PASSA DA TELA: sem o min-width:0 os dois lados se recusam a encolher e a barra
     empurra a página inteira, criando rolagem para os lados em TODA aba. */
  min-width: 0;
}
.topo > * { min-width: 0; }
/* O nome da aba fica com a sobra da barra e NUNCA parte no meio da palavra ("Agendamento/s"):
   quebra só entre palavras; se for uma palavra só, a letra diminui em vez de partir. */
.topo h1 { font-size: 20px; flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; line-height: 1.15; }
.usuario-logado { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 0 0 auto; }
.usuario-logado .quem { text-align: right; line-height: 1.25; }
.usuario-logado .quem strong { font-weight: 500; }
.usuario-logado .quem small { display: block; color: var(--texto-suave); }
.avatar {
  width: 38px; height: 38px; border-radius: 50%; background: var(--azul); color: #fff;
  display: grid; place-items: center; font-family: var(--fonte-titulo); font-weight: 800; font-size: 13px;
}
.conteudo { padding: 28px; }
.botao-menu { display: none; }

/* ---------- Componentes das abas ---------- */
.painel { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-cartao); box-shadow: var(--sombra); }
.barra-ferramentas { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px; border-bottom: 1px solid var(--borda); }
.barra-ferramentas .busca { flex: 1 1 240px; }
.barra-ferramentas select { width: auto; min-width: 150px; }

.tabela-rolagem { overflow-x: auto; }
/* Tabela que NAO rola de lado: o que nao cabe quebra a linha. Para tabela de poucas colunas com
   texto longo (RH > Ferias a dar), que numa rolagem lateral esconde justamente o aviso do prazo. */
.tabela-livre { overflow-x: visible; }
.tabela-livre table { width: 100%; }
/* .tabela-densa poe nowrap no th, no td E no .secundario. Aqui tudo quebra — os seletores
   precisam ser mais especificos que os de la, senao o nowrap continua valendo. */
.tabela-livre .tabela-densa th, .tabela-livre .tabela-densa td { white-space: normal; }
.tabela-livre .tabela-densa .secundario { white-space: normal; }
.tabela-livre .tabela-densa .sem-quebra { white-space: normal; }
.tabela-livre .acoes-periodo .btn, .tabela-livre .acoes-periodo .btn-link { white-space: nowrap; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
th {
  font-family: var(--fonte-titulo); font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--azul-marinho); font-weight: 800; background: #f8fafd;
}
/* Clicar no título ordena a lista (js/ordenar-tabela.js) */
thead th { position: relative; }
table:not(.grade-semana):not(.grade-tarefas):not(.tabela-grau) thead th:not(:empty) { cursor: pointer; }
table:not(.grade-semana):not(.grade-tarefas):not(.tabela-grau) thead th:not(:empty):hover { color: var(--azul); }
thead th.ordenado { color: var(--azul); }
thead th.ordenado::after {
  content: '▲'; font-size: 8px; margin-left: 5px; vertical-align: middle; opacity: .8;
}
thead th.ordenado[data-ordem="desc"]::after { content: '▼'; }
tbody tr:hover { background: #fafcff; }
tr:last-child td { border-bottom: none; }
td .secundario { display: block; color: var(--texto-suave); font-size: 12px; }
td.acoes { text-align: right; white-space: nowrap; }
td.sem-quebra { white-space: nowrap; }
td.situacao { white-space: nowrap; }
.btn-copiar-link {
  margin-left: 6px; font-size: 12px; padding: 3px 10px; border: 1.5px solid var(--azul); font-weight: 700;
}
.btn-copiar-link:disabled { opacity: .6; cursor: progress; }
.vazio { padding: 48px; text-align: center; color: var(--texto-suave); }

.selo { white-space: nowrap; display: inline-block; padding: 3px 11px; border-radius: var(--pilula); font-size: 12px; font-weight: 500; }
.selo-sucesso { background: var(--sucesso-claro); color: var(--sucesso); }
.selo-neutro { background: #eef1f5; color: var(--texto-suave); }
.selo-perigo { background: var(--perigo-claro); color: var(--perigo); }
.selo-aviso { background: var(--aviso-claro); color: var(--aviso); }
.selo-azul { background: var(--azul-claro); color: var(--azul); }

/* Cartões de atalho: ícone em círculo azul + título em caixa alta */
.cartao { padding: 26px 22px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
a.cartao { text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s; }
a.cartao:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0, 51, 102, .14); }
.cartao h3 { font-size: 16px; text-transform: uppercase; letter-spacing: .02em; }
.cartao p { margin: 0; color: var(--texto-suave); line-height: 1.45; }
.cartao.desativado { opacity: .65; }
.icone-circulo {
  width: 64px; height: 64px; border-radius: 50%; background: var(--azul); color: #fff;
  display: grid; place-items: center; box-shadow: 0 0 0 6px var(--azul-claro);
}
.icone-circulo svg { width: 28px; height: 28px; }
.cartao.desativado .icone-circulo { background: #9fb3c8; box-shadow: 0 0 0 6px #eef1f5; }

.boas-vindas {
  padding: 22px 26px; margin-bottom: 18px; border-radius: var(--raio-cartao); color: #fff;
  background: var(--degrade); position: relative; overflow: hidden; box-shadow: var(--sombra);
}
.boas-vindas::after {
  content: ""; position: absolute; width: 260px; height: 260px; right: -60px; top: -90px; border-radius: 50%;
  border: 36px solid rgba(255, 255, 255, .08);
}
.boas-vindas .faixa {
  display: inline-block; background: var(--verde); color: #fff; font-family: var(--fonte-titulo); font-weight: 800;
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em; padding: 3px 10px; border-radius: 4px; margin-bottom: 8px;
}
.boas-vindas h2 { font-size: 24px; font-weight: 900; color: #fff; margin-bottom: 4px; }
.boas-vindas p { margin: 0; color: rgba(255, 255, 255, .85); }

/* Espaço reservado para funções futuras (ex.: Minhas tarefas no Início) */
.em-breve {
  padding: 48px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px;
  border-style: dashed;
}
.em-breve h3 { font-size: 18px; text-transform: uppercase; letter-spacing: .02em; }
.em-breve p { margin: 0; color: var(--texto-suave); }

/* ---------- Modal ---------- */
.modal-fundo {
  position: fixed; inset: 0; background: rgba(20, 35, 80, .55); display: grid; place-items: center;
  padding: 16px; z-index: 50;
}
.modal {
  background: var(--superficie); border-radius: 20px; width: 100%; max-width: 580px; max-height: calc(100vh - 32px);
  display: flex; flex-direction: column; box-shadow: 0 24px 60px rgba(0, 20, 60, .35); overflow: hidden;
}
.modal-cabecalho {
  padding: 18px 22px; border-bottom: 3px solid var(--verde); display: flex; justify-content: space-between; align-items: center;
}
.modal-cabecalho h2 { font-size: 18px; }
.modal-corpo { padding: 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.modal-rodape { padding: 14px 22px; border-top: 1px solid var(--borda); display: flex; justify-content: flex-end; gap: 8px; background: #fafbfd; }
.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.secao-modal {
  font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--azul-marinho);
  padding-bottom: 6px; border-bottom: 1px solid var(--borda);
}
.secao-modal:not(:first-child) { margin-top: 8px; }
.secao-modal .dica { text-transform: none; letter-spacing: 0; font-family: var(--fonte-texto); font-weight: 400; }
.valor-fixo {
  padding: 10px 14px; border: 1.5px dashed var(--borda); border-radius: var(--raio); color: var(--texto-suave);
  background: #fafbfd;
}

/* ---------- Avisos rápidos ---------- */
.avisos { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 60; }
.aviso {
  padding: 12px 18px; border-radius: var(--raio); color: #fff; background: var(--azul-marinho);
  box-shadow: 0 8px 24px rgba(0, 20, 60, .25); max-width: 360px; animation: entrar .2s ease-out; font-weight: 500;
}
.aviso.sucesso { background: var(--sucesso); }
.aviso.erro { background: var(--perigo); }
@keyframes entrar { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Telas pequenas ---------- */
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .lateral { position: fixed; inset: 0 auto 0 0; width: 250px; z-index: 40; transform: translateX(-100%); transition: transform .2s; }
  .app.menu-aberto .lateral { transform: none; box-shadow: 0 0 40px rgba(0, 0, 0, .4); }
  .botao-menu { display: inline-flex; padding: 8px 12px; }
  /* Barra de topo do celular: cabe o nome da aba inteiro, sem partir palavra e sem empurrar a tela */
  .topo { height: auto; min-height: 60px; padding: 8px 12px; }
  .topo h1 { font-size: 15px; }
  .conteudo { padding: 16px; }
  .usuario-logado .quem, .avatar { display: none; }
  .usuario-logado .btn { padding: 8px 12px; white-space: nowrap; }
  .topo { padding: 0 12px; gap: 8px; }
  .grade-2 { grid-template-columns: 1fr; }
  .cartao-login { padding: 28px 22px; }
}

/* Aviso de pendência no Início (ex.: CRM não informado) */
.pendencia {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-bottom: 22px; padding: 14px 18px; font-size: 14px;
}

/* Destaque do usuário (login) na página de criar senha */
.usuario-destaque {
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  padding: 14px 16px; border: 2px solid var(--azul); border-radius: var(--raio-cartao); background: var(--azul-claro);
}
.usuario-destaque .rotulo {
  font-family: var(--fonte-titulo); font-weight: 800; font-size: 11px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--azul-marinho);
}
.usuario-destaque strong {
  font-family: var(--fonte-titulo); font-weight: 900; font-size: 24px; color: var(--azul); word-break: break-all;
}

.grade-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.btn-texto-perigo { color: var(--perigo); border-color: transparent; background: none; }
.btn-texto-perigo:hover { background: var(--perigo-claro); border-color: var(--perigo-claro); color: var(--perigo); }

/* ---------- Configurações: Grupo HOSA > empresas > unidades ---------- */
.grupo-raiz { padding: 18px 20px; margin-bottom: 16px; background: var(--degrade); border: none; color: #fff; }
.grupo-raiz-cabecalho { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.grupo-raiz-cabecalho img { width: 46px; height: 46px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255, 255, 255, .9); }
.grupo-raiz-cabecalho > div { flex: 1; }
.grupo-raiz h2 { color: #fff; font-size: 22px; font-weight: 900; }
.grupo-raiz .dica { color: rgba(255, 255, 255, .85); }
/* Botão neutro sobre o fundo azul: translúcido com borda clara (o texto branco vem do cartão) */
.grupo-raiz .btn:not(.btn-primario) { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .7); color: #fff; }
.grupo-raiz .btn:not(.btn-primario):hover { background: rgba(255, 255, 255, .26); }
.arvore-empresas { display: flex; flex-direction: column; gap: 14px; padding-left: 22px; border-left: 3px solid var(--verde); margin-left: 22px; }
.empresa { padding: 0; overflow: hidden; }
.empresa-cabecalho {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 14px 18px; border-bottom: 1px solid var(--borda); background: #f8fafd;
}
.empresa-cabecalho h3 { font-size: 17px; text-transform: uppercase; letter-spacing: .02em; }
.empresa-cabecalho .acoes { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.lista-unidades { list-style: none; margin: 0; padding: 0; }
.lista-unidades li { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--borda); flex-wrap: wrap; }
.lista-unidades li:last-child { border-bottom: none; }
.lista-unidades .sigla {
  min-width: 58px; text-align: center; padding: 6px 10px; border-radius: var(--raio); background: var(--azul);
  color: #fff; font-family: var(--fonte-titulo); font-weight: 800; letter-spacing: .04em;
}
.lista-unidades .dados { flex: 1; min-width: 180px; display: flex; flex-direction: column; }
.lista-unidades .acoes { display: flex; gap: 2px; }

.seletor-cor { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.amostra-cor { width: 30px; height: 30px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1.5px var(--borda); cursor: pointer; }
.amostra-cor:hover { box-shadow: 0 0 0 2px var(--azul); }
.seletor-cor input[type=color] { width: 44px; height: 34px; border: 1.5px solid var(--borda); border-radius: var(--raio); background: #fff; padding: 2px; cursor: pointer; }

/* ---------- Escala Médica ---------- */
.escala-barra { align-items: center; }
.navegacao-mes { display: flex; align-items: center; gap: 8px; }
.navegacao-mes h2 { font-size: 18px; min-width: 190px; text-align: center; }
.navegacao-mes .btn { padding: 8px 14px; }
.filtros-escala { display: flex; gap: 8px; flex: 1; flex-wrap: wrap; justify-content: flex-end; }
.filtros-escala select { width: auto; min-width: 150px; max-width: 220px; }
.resumo-escala {
  display: flex; gap: 18px; flex-wrap: wrap; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--borda);
  color: var(--texto-suave); font-size: 13px;
}
.resumo-escala strong { color: var(--azul-titulo); font-family: var(--fonte-titulo); }
.legenda-tipos { display: flex; gap: 12px; flex-wrap: wrap; margin-left: auto; }
.legenda-tipos i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; }
.legenda-tipos > span { display: inline-flex; align-items: center; }
.legenda-tipos i.tom { border-radius: 50%; }
.legenda-separador { width: 1px; align-self: stretch; background: var(--borda); }

.calendario { padding: 10px; }
.cal-cabecalho, .cal-grade { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.cal-cabecalho div {
  text-align: center; padding: 6px 0; font-family: var(--fonte-titulo); font-weight: 800; font-size: 12px;
  text-transform: uppercase; letter-spacing: .06em; color: var(--azul-marinho);
}
.cal-dia {
  min-height: 118px; border: 1px solid var(--borda); border-radius: var(--raio); padding: 6px; background: #fff;
  display: flex; flex-direction: column; gap: 6px;
}
.cal-dia.fora { background: transparent; border: 0; }
.cal-dia.hoje { border: 2px solid var(--verde); }
.cal-dia-topo { display: flex; align-items: center; gap: 6px; }
.cal-numero { font-family: var(--fonte-titulo); font-weight: 800; font-size: 15px; color: var(--azul-titulo); }
.cal-semana { display: none; font-size: 11px; text-transform: uppercase; }
.cal-total { font-size: 11px; color: var(--texto-suave); }
.cal-mais {
  margin-left: auto; width: 24px; height: 24px; border-radius: 50%; border: 1.5px dashed var(--borda); background: none;
  color: var(--azul); font-weight: 700; cursor: pointer; line-height: 1; opacity: .5;
}
.cal-dia:hover .cal-mais { opacity: 1; border-color: var(--azul); }
.cal-mais:hover { background: var(--azul); color: #fff; border-style: solid; }
.cal-periodo { display: flex; flex-direction: column; gap: 4px; }
.cal-periodo-nome {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-suave);
  border-bottom: 1px solid var(--borda); padding-bottom: 2px;
}
.cal-item {
  display: flex; flex-direction: column; text-align: left; width: 100%; padding: 5px 7px; border-radius: 6px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--cor) 45%, transparent); border-left: 5px solid var(--cor);
  background: color-mix(in srgb, var(--cor) 20%, #fff); font-size: 12px; line-height: 1.3; color: var(--texto);
}
.cal-item:hover { background: color-mix(in srgb, var(--cor) 30%, #fff); }
.cal-item-linha, .cal-item-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Quem lê procura primeiro o médico: nome em destaque, horário e local logo abaixo */
.cal-item-nome { font-family: var(--fonte-titulo); font-weight: 800; font-size: 12.5px; color: var(--azul-titulo); }
.cal-item .dica { font-size: 11px; }

.caixa-repetir { padding: 12px 14px; border: 1.5px dashed var(--borda); border-radius: var(--raio); display: flex; flex-direction: column; gap: 12px; }
.repetir-opcoes { display: flex; flex-direction: column; gap: 12px; }
.dias-semana, .escolha-turno { display: flex; gap: 6px; flex-wrap: wrap; }
.dia-semana input { position: absolute; opacity: 0; pointer-events: none; }
.dia-semana span {
  display: inline-block; padding: 7px 14px; border-radius: var(--pilula); border: 1.5px solid var(--borda); cursor: pointer; font-weight: 500;
}
.dia-semana input:checked + span { background: var(--azul); border-color: var(--azul); color: #fff; }
.dia-semana input:focus-visible + span { outline: 3px solid rgba(0, 102, 204, .35); }
.aplicar-em { gap: 8px; padding: 12px 14px; background: var(--azul-claro); border-radius: var(--raio); }

@media (max-width: 1100px) {
  .filtros-escala { justify-content: flex-start; }
}
@media (max-width: 860px) {
  .grade-3 { grid-template-columns: 1fr; }
  .arvore-empresas { margin-left: 8px; padding-left: 12px; }
  /* No celular o calendário vira lista de dias */
  .cal-cabecalho { display: none; }
  .cal-grade { grid-template-columns: 1fr; }
  .cal-dia { min-height: 0; }
  .cal-dia.fora { display: none; }
  .cal-semana { display: inline; }
  .navegacao-mes h2 { min-width: 0; font-size: 16px; }
}

/* Os botoes descem para a linha de baixo em vez de empurrar a tela (celular) */
.acoes-escala { display: flex; gap: 8px; flex-wrap: wrap; }
.previa-copia { padding: 12px 14px; border-radius: var(--raio); background: var(--azul-claro); color: var(--azul-escuro); font-size: 13px; }
.previa-copia ul { margin: 6px 0 0; padding-left: 18px; }
.previa-copia .perigo { color: var(--perigo); font-weight: 500; }

/* ---------- Espelho da escala (Início) ---------- */
.espelho { margin-bottom: 18px; padding: 0; overflow: hidden; }
.espelho > .espelho-resumo { padding: 10px 16px 0; }
.espelho-cabecalho {
  display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap;
  padding: 12px 16px; border-bottom: 1px solid var(--borda); background: var(--fundo);
  border-radius: var(--raio-cartao) var(--raio-cartao) 0 0;
}
.espelho-titulo { display: flex; align-items: center; gap: 10px; }
.espelho-titulo h3 { font-size: 17px; }
.espelho-controles {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto;
  background: #fff; border: 1px solid var(--borda); border-radius: var(--pilula); padding: 4px 8px;
}
.espelho-controles select { border: none; background: none; font-size: 13px; }
.espelho-controles .alternar-modo { border: none; padding: 0; }
.espelho-controles input[type=date], .espelho-controles select { width: auto; }
.espelho-data { min-width: 230px; text-align: center; font-family: var(--fonte-titulo); color: var(--azul-titulo); }
.espelho-data.hoje { color: var(--sucesso); }
.alternar-modo { display: inline-flex; border: 1.5px solid var(--borda); border-radius: var(--pilula); padding: 3px; }
.alternar-modo button {
  border: none; background: none; padding: 6px 14px; border-radius: var(--pilula); cursor: pointer; font-weight: 500; color: var(--texto-suave);
}
.alternar-modo button.ativo { background: var(--azul); color: #fff; }
.espelho-dia { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 14px; }
.espelho-periodo h4 {
  margin: 0 0 6px; font-family: var(--fonte-titulo); font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; color: var(--azul-marinho);
}
.espelho-item {
  display: grid; grid-template-columns: 110px minmax(180px, 1.6fr) minmax(140px, 1.2fr) minmax(110px, 1fr) 70px;
  align-items: center; gap: 12px; padding: 9px 12px; margin-bottom: 6px; border-radius: var(--raio);
  border: 1px solid color-mix(in srgb, var(--cor) 45%, transparent); border-left: 5px solid var(--cor);
  background: color-mix(in srgb, var(--cor) 16%, #fff);
}
.espelho-hora { font-weight: 700; }
.espelho-medico { font-weight: 500; }
.espelho-tipo i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--cor); margin-right: 6px; }
.espelho-pacientes { text-align: right; color: var(--texto-suave); }
.espelho-obs { grid-column: 1 / -1; }
.cal-dia.clicavel { cursor: pointer; }
.cal-dia.clicavel:hover { border-color: var(--azul); }
div.cal-item { cursor: inherit; }

/* ---------- Auditoria ---------- */
.filtros-auditoria { align-items: center; }
.filtro-data { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--texto-suave); }
.filtro-data input { width: auto; }
.tabela-auditoria td { vertical-align: top; }
.mudancas { margin-top: 6px; }
.mudancas summary { cursor: pointer; color: var(--azul); font-size: 12px; }
.mudancas ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
.mudancas s { color: var(--texto-suave); }
.mais-auditoria { padding: 12px; text-align: center; border-top: 1px solid var(--borda); }
.autoria { margin: -4px 0 0; }

@media (max-width: 860px) {
  .espelho-item { grid-template-columns: 1fr auto; gap: 4px 10px; }
  .espelho-medico, .espelho-unidade, .espelho-tipo { grid-column: 1 / -1; }
  .espelho-data { min-width: 0; }
}

/* ---------- Pacientes ---------- */
.total-pacientes { margin: 0; padding: 10px 16px 0; }
.linha-clicavel { cursor: pointer; }
.linha-clicavel:hover td, .linha-clicavel:focus td { background: var(--azul-claro); }
.linha-clicavel:focus { outline: none; }
.prontuario { font-family: var(--fonte-titulo); color: var(--azul-marinho); letter-spacing: .03em; }
.tabela-pacientes td:nth-child(2) { min-width: 220px; }
.nome-paciente { font-weight: 700; color: var(--texto); text-decoration: none; }
.nome-paciente:hover { color: var(--azul); }

.voltar { display: inline-block; margin-bottom: 12px; color: var(--azul); font-weight: 500; text-decoration: none; }
.voltar:hover { text-decoration: underline; }

/* Cabeçalho da ficha: mesmo fundo azul com anel decorativo das boas-vindas */
.ficha-cabecalho {
  display: flex; align-items: center; gap: 20px; padding: 24px 28px; margin-bottom: 18px;
  border-radius: var(--raio-cartao); color: #fff; background: var(--degrade); position: relative; overflow: hidden;
  box-shadow: var(--sombra);
}
.ficha-cabecalho::after {
  content: ""; position: absolute; width: 240px; height: 240px; right: -60px; top: -90px; border-radius: 50%;
  border: 34px solid rgba(255, 255, 255, .08);
}
.ficha-avatar {
  flex: none; width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .16); border: 2px solid rgba(255, 255, 255, .5);
  font-family: var(--fonte-titulo); font-weight: 900; font-size: 24px;
}
.ficha-identificacao { position: relative; z-index: 1; min-width: 0; }
.ficha-identificacao .faixa {
  display: inline-block; background: var(--verde); color: #fff; font-family: var(--fonte-titulo); font-weight: 800;
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em; padding: 3px 10px; border-radius: 4px; margin-bottom: 6px;
}
.ficha-identificacao h2 { font-size: 22px; font-weight: 900; color: #fff; margin: 0 0 4px; }
.ficha-registro { margin: 0 0 4px; color: rgba(255, 255, 255, .8); font-size: 13px; }
.ficha-dados { display: flex; flex-wrap: wrap; gap: 6px 18px; color: rgba(255, 255, 255, .9); font-size: 14px; }

/* Formulário de dados pessoais */
.ficha-form { padding: 6px 22px 18px; }
.ficha-form fieldset { border: 0; border-bottom: 1px solid var(--borda); margin: 0; padding: 16px 0 6px; }
.ficha-form legend {
  font-family: var(--fonte-titulo); font-weight: 800; color: var(--azul-titulo); font-size: 13px;
  text-transform: uppercase; letter-spacing: .04em; padding: 0; margin-bottom: 10px; float: left; width: 100%;
}
.ficha-form fieldset > div { clear: both; }
.ficha-form .grade-2, .ficha-form .grade-3, .ficha-form .grade-endereco, .ficha-form .grade-endereco-2 { margin-bottom: 12px; }
.grade-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.grade-endereco { display: grid; grid-template-columns: 150px 1fr 110px; gap: 14px; }
.grade-endereco-2 { display: grid; grid-template-columns: 1fr 1fr 1fr 90px; gap: 14px; }
.ficha-form textarea { width: 100%; }
.ficha-form .alerta { margin-top: 14px; }
.ficha-rodape { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 16px; }

/* Sub-abas ainda em construção */
.ficha-em-breve { overflow: hidden; }
.ficha-em-breve-topo { display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px; border-bottom: 1px solid var(--borda); }
.ficha-em-breve-topo .icone-circulo { flex: none; }
.ficha-em-breve-topo h3 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 17px; margin: 0 0 6px; }
.ficha-em-breve-topo p { margin: 0; color: var(--texto-suave); max-width: 760px; }
.resumo-financeiro { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 16px; }
.resumo-financeiro div { padding: 14px 16px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--fundo); }
.resumo-financeiro span { display: block; font-size: 12px; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .04em; }
.resumo-financeiro strong { font-family: var(--fonte-titulo); font-size: 20px; color: var(--azul-marinho); }
.linha-tempo-vazia { position: relative; padding: 10px 22px 10px 52px; }
.linha-tempo-vazia span { position: absolute; left: 32px; top: 16px; bottom: 16px; border-left: 2px dashed var(--borda); }
.midias-vazio { margin: 16px; border: 2px dashed var(--borda); border-radius: var(--raio); }
/* Aviso de que as mídias ficam dentro da aba médica, em cada atendimento */
.previa-midias {
  display: flex; align-items: center; gap: 12px; margin: 0 16px 16px; padding: 12px 14px;
  border: 1px dashed var(--borda); border-radius: var(--raio); background: var(--fundo);
}
.icone-circulo.pequeno { width: 34px; height: 34px; flex: 0 0 34px; }
.icone-circulo.pequeno svg { width: 17px; height: 17px; }

@media (max-width: 860px) {
  .grade-3, .grade-endereco, .grade-endereco-2, .resumo-financeiro { grid-template-columns: 1fr; }
  .ficha-cabecalho { padding: 20px; gap: 14px; }
  .ficha-avatar { width: 52px; height: 52px; font-size: 19px; }
  .ficha-form { padding: 4px 16px 16px; }
}

/* Unidade / tipo de agenda desativados (continuam nas agendas antigas) */
.lista-unidades li.inativo .sigla, .lista-unidades li.inativo .dados, tr.inativo td:first-child { opacity: .55; }

/* ---------- Escala de Funcionários ---------- */
.barra-semana { padding: 14px 18px; margin-bottom: 16px; }
.barra-semana-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.navegacao-semana, .acoes-semana { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.navegacao-semana h2 { margin: 0 4px; font-size: 17px; white-space: nowrap; }
.barra-semana .btn { padding: 7px 13px; font-size: 14px; }
.acoes-semana select { width: auto; min-width: 0; padding-top: 7px; padding-bottom: 7px; font-size: 14px; }
.barra-semana .dica { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--borda); font-size: 12.5px; }
@media (max-width: 700px) { .navegacao-semana h2 { min-width: 0; font-size: 16px; } }
.bloco-unidade { margin-bottom: 20px; overflow: hidden; }
.bloco-unidade-topo { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--borda); }
.bloco-unidade-topo .sigla {
  font-family: var(--fonte-titulo); font-weight: 900; color: #fff; background: var(--degrade);
  padding: 6px 12px; border-radius: var(--raio); letter-spacing: .04em;
}
.bloco-unidade-topo h3 { margin: 0; font-size: 16px; }

/* NUNCA usar border-collapse: collapse nesta grade.
   Com as bordas coladas, o Chrome pinta o FUNDO da célula por cima da linha divisória: era por isso
   que as linhas azuis dos dias sumiam ao passar o mouse (o realce é um fundo). Com "separate" cada
   célula desenha a própria borda ACIMA do próprio fundo, e a linha não some nunca.
   Para não dobrar linha, cada célula só tem borda à ESQUERDA e EMBAIXO (a da direita fica só na última). */
.grade-semana, .grade-tarefas {
  font-size: 11px; width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0;
}
.grade-semana th, .grade-semana td, .grade-tarefas th, .grade-tarefas td {
  padding: 4px 2px; border: 0; border-left: 1px solid var(--borda); border-bottom: 1px solid var(--borda);
  text-align: center; overflow-wrap: anywhere; line-height: 1.25;
}
.grade-semana tr > *:last-child, .grade-tarefas tr > *:last-child { border-right: 1px solid var(--borda); }
.grade-semana thead tr:first-child > *, .grade-tarefas thead tr:first-child > * { border-top: 1px solid var(--borda); }
.grade-semana thead th, .grade-tarefas thead th { background: var(--azul-marinho); color: #fff; font-size: 11.5px; letter-spacing: 0; }
.grade-semana thead th span, .grade-tarefas thead th span { font-weight: 400; opacity: .85; }
.grade-semana thead th.periodo { background: var(--azul-claro); color: var(--azul-marinho); font-size: 10.5px; }
.grade-semana thead th.hoje { background: var(--azul); color: #fff; }
/* 142px e não 128: 14px são do × que tira a pessoa do setor. Tirar esse espaço do NOME fazia
   "Carla Patricia" quebrar em duas linhas, e a linha inteira da grade crescia junto. */
.grade-semana .col-nome, .grade-tarefas .col-nome { width: 142px; text-align: left; font-weight: 500; padding-left: 8px; }
/* Fundos da grade em CAMADAS: realce do mouse, coluna de hoje e a marca da própria célula
   (barra da outra unidade). Tudo na mesma propriedade se apaga; por isso cada uma tem a sua. */
.grade-semana th, .grade-semana td, .grade-tarefas th, .grade-tarefas td {
  background-image: var(--camada-mouse, none), var(--camada-hoje, none), var(--camada-celula, none);
}
.linha-medicos th, .linha-medicos td {
  background-color: var(--aviso-claro); font-weight: 700; color: var(--azul-marinho);
}
.linha-medicos th { text-align: left; padding-left: 8px; }
.linha-medicos td span { display: block; font-size: 11px; }
.linha-setor th {
  text-align: left; background: var(--fundo); color: var(--azul-titulo); font-family: var(--fonte-titulo); font-weight: 800;
  font-size: 12px; text-transform: uppercase; letter-spacing: .04em; padding: 7px 8px;
}
.linha-setor .btn-link { margin-left: 12px; text-transform: none; letter-spacing: 0; font-family: var(--fonte-texto); font-size: 12.5px; }
.vazio-setor { color: var(--texto-suave); font-style: italic; }
/* Em telas estreitas a semana não cabe: rola para o lado */
@media (max-width: 1100px) { .grade-semana, .grade-tarefas { min-width: 1000px; } }

/* Leitura da grade: dias separados, dia de hoje realçado, linhas alternadas e nome sempre visível */
.grade-semana th.dia, .grade-tarefas th.dia, .grade-semana .dia-inicio, .grade-tarefas .dia-inicio {
  border-left: 2px solid var(--azul-marinho) !important;
}
/* Realce por cima da cor da célula (férias, outra unidade...) em CAMADAS de fundo, para um não
   apagar o outro. A divisória do dia é borda da célula (com border-collapse: separate) e fica por cima. */
.grade-semana .col-hoje, .grade-tarefas .col-hoje {
  --camada-hoje: linear-gradient(rgba(0, 102, 204, .06), rgba(0, 102, 204, .06));
}
.grade-semana tbody .linha-pessoa:nth-of-type(even) > .col-nome,
.grade-semana tbody .linha-pessoa:nth-of-type(even) > .celula.vazia,
.grade-semana tbody .linha-pessoa:nth-of-type(even) > .celula.turno { background-color: #f5f8fc; }
.grade-semana tbody tr:hover > *, .grade-tarefas tbody tr:hover > * {
  --camada-mouse: linear-gradient(rgba(0, 102, 204, .1), rgba(0, 102, 204, .1));
}
/* Rolando a semana para o lado, o nome da pessoa continua à vista (só na tela) */
.tabela-rolagem { position: relative; }
.grade-semana .col-nome, .grade-tarefas .col-nome { position: sticky; left: 0; z-index: 1; background-color: #fff; }
.grade-semana thead .col-nome, .grade-tarefas thead .col-nome { z-index: 2; background-color: var(--azul-marinho); }
/* O título do setor ocupa a linha toda: quem cola é o texto dentro dela, para continuar à vista */
.grade-semana .linha-setor th > span { position: sticky; left: 8px; display: inline-block; }
.grade-semana .linha-medicos > th:first-child {
  position: sticky; left: 0; z-index: 1; background-color: var(--aviso-claro);
}

.celula { cursor: pointer; }
/* Horário: numa linha quando cabe; senão quebra só no traço (ver faixaHtml) */
.celula.turno { overflow-wrap: normal; letter-spacing: -.01em; }
.celula:hover { outline: 2px solid var(--azul); outline-offset: -2px; }
.celula.vazia:hover::after { content: "+"; color: var(--azul); font-weight: 700; }
/* "Está em outra unidade": cor da unidade + barrinha lateral feita de fundo (sombra cobriria a divisória do dia) */
.celula.em-outro {
  color: var(--azul-marinho); font-weight: 700;
  background-color: color-mix(in srgb, var(--cor, #0066cc), #fff 82%);
  --camada-celula: linear-gradient(to right, var(--cor, #0066cc) 0 3px, transparent 3px);
}
.celula.ausencia, .selo.aus-ferias, .selo.aus-folga, .selo.aus-atestado, .selo.aus-falta, .selo.aus-outro {
  font-weight: 800; text-transform: uppercase; font-size: 11px; letter-spacing: .04em;
}
/* Folga de meio período: ocupa só a célula do turno, com a borda marcando que é meia falta */
.celula.ausencia.meio-periodo { font-size: 10px; }
.aus-ferias { background: var(--ferias-claro); color: var(--ferias); }
.aus-folga { background: var(--sucesso-claro); color: var(--sucesso); }
.aus-atestado, .aus-falta { background: var(--perigo-claro); color: var(--perigo); }
.aus-outro { background: var(--aviso-claro); color: var(--aviso); }
.celula.tarefa span { display: block; font-weight: 500; }

.turno-form { border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px 12px; margin: 0; }
.turno-campos { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.turno-campos select { flex: 1 1 200px; width: auto; }
.turno-campos input[type=time] { width: 110px; }
.turno-campos.desligado { opacity: .4; pointer-events: none; }
.lista-marcar { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.lista-ausencias { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lista-ausencias li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--borda); border-radius: var(--raio); }
.lista-ausencias li > div { flex: 1; display: flex; flex-direction: column; }

/* Setores dentro de cada unidade (Configurações › Unidades) */
.setores-unidade { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 0 4px 0; }
.setores-unidade .selo { font-weight: 500; }
.setores-unidade .selo.inativo { text-decoration: line-through; opacity: .6; }
.lista-setores { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lista-setores li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--borda); border-radius: var(--raio); }
.lista-setores li > span:nth-child(2) { flex: 1; }
.lista-setores li.inativo > span:nth-child(2) { opacity: .55; }
.mover-setor { display: flex; flex-direction: column; gap: 0; }
.mover-setor .btn-link { padding: 0 4px; font-size: 11px; line-height: 1.3; }
.mover-setor .btn-link:disabled { opacity: .25; cursor: default; }

/* Impressão da escala: prévia na tela (camada por cima de tudo) e 2 folhas A4 deitadas no papel */
.impressao-escala { position: fixed; inset: 0; z-index: 50; background: #5f6b7a; display: flex; flex-direction: column; }
.impressao-barra {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 18px; background: var(--superficie);
  border-bottom: 3px solid var(--verde);
}
.impressao-barra strong { font-family: var(--fonte-titulo); color: var(--azul-titulo); }
.impressao-barra .dica { flex: 1; }
.impressao-folhas { flex: 1; overflow: auto; padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.folha-moldura { box-shadow: 0 6px 24px rgba(0, 0, 0, .35); }
/* A4 deitado a 96 dpi = 1122,5 × 793,7 px (1 px a menos para nunca sobrar uma página em branco) */
/* O pé é maior de propósito: é onde mora a legenda das cores, e ela tem de caber inteira.
   Sem essa reserva a última linha do calendário raspava nela quando a semana estava cheia. */
.folha { width: 1122px; height: 793px; background: #fff; padding: 18px 20px 30px; overflow: hidden; }
/* O conteúdo ocupa a folha toda: os blocos crescem e as linhas ficam mais altas, sem sobra no pé da página */
.folha-conteudo { width: 1083px; display: flex; flex-direction: column; }
/* A MESMA folha, EM PÉ (a Escala Médica imprime assim): 41% mais altura, que é o que um mês pede */
.impressao-escala.em-pe .folha { width: 793px; height: 1122px; }
.impressao-escala.em-pe .folha-conteudo { width: 754px; }
.folha-topo { flex: none; }
.folha-conteudo > .bloco-unidade { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.folha-conteudo > .bloco-unidade > .bloco-unidade-topo { flex: none; }
.folha-conteudo > .bloco-unidade > .tabela-rolagem { flex: none; }
.folha-conteudo > .bloco-unidade > .tabela-rolagem:has(> .grade-semana) { flex: 1 1 auto; display: flex; min-height: 0; }
.folha-conteudo > .bloco-unidade > .tabela-rolagem > .grade-semana { height: 100%; }
/* min-height: min-content, e NÃO 0: com 0 o calendário aceitava ficar menor que o próprio
   conteúdo, e a última linha de agendas saía por cima da legenda do rodapé. Assim ele nunca
   encolhe abaixo do que tem dentro — e quem faz caber é o zoom, que é o papel dele. */
.folha-conteudo > .calendario { flex: 1 1 auto; display: flex; flex-direction: column; min-height: min-content; }
/* O CALENDÁRIO NÃO ESTICA. Com "1fr" as linhas cresciam para encher a folha, e aí o que era
   medido (solto) não batia com o que era desenhado (esticado): a conta do zoom errava e a última
   linha de agendas saía cortada ou por cima da legenda. Com min-content, medido e desenhado são
   a MESMA coisa e a conta fecha de primeira. Sobra branco no pé quando a semana é fraca — e
   branco sobrando é melhor que agenda cortada. */
.folha-conteudo > .calendario > .cal-grade { flex: 0 0 auto; grid-auto-rows: min-content; }
/* Nada rola dentro do papel: a grade aparece inteira (o zoom da folha é quem faz caber) */
.folha .tabela-rolagem { overflow: visible; }
/* Enquanto o tamanho está sendo medido, a folha não estica */
/* MEDINDO: solta a altura para o conteúdo dizer o tamanho verdadeiro dele.
   NÃO troca o display para bloco — era o que estragava tudo: em bloco as margens dos irmãos
   COLAPSAM e em flex não, então o medido nunca batia com o desenhado e a última linha saía
   cortada. Medir e desenhar têm de acontecer no mesmo layout. */
.folha-conteudo.medindo { height: auto !important; }
.folha-conteudo.medindo .grade-semana { height: auto; }
.folha-topo { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 3px solid var(--verde); }
.folha-topo h1 { flex: 1; margin: 0; font-size: 18px; color: var(--azul-titulo); }
.folha-topo > span { font-size: 11px; color: var(--texto-suave); }
.marca-folha { display: flex; align-items: center; gap: 6px; color: var(--azul-titulo); font-family: var(--fonte-titulo); }
.marca-folha img { width: 26px; height: 26px; }
.folha .bloco-unidade { box-shadow: none; border-radius: 8px; margin-bottom: 8px; border-color: #b8c2cf; }
.folha .bloco-unidade-topo { padding: 5px 10px; }
.folha .bloco-unidade-topo h3 { font-size: 13px; }
.folha .grade-semana, .folha .grade-tarefas { width: 100%; min-width: 0; table-layout: fixed; font-size: 10.5px; }
.folha .grade-semana th, .folha .grade-semana td, .folha .grade-tarefas th, .folha .grade-tarefas td { padding: 2px 3px; border-color: #b8c2cf; }
.folha .linha-setor th { padding: 3px 6px; font-size: 10.5px; }
.folha .celula:hover { outline: none; }
.folha * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

@media print {
  @page { size: A4 landscape; margin: 0; }
  body.imprimindo-escala > *:not(.impressao-escala) { display: none !important; }
  body.imprimindo-escala { background: #fff; }
  .impressao-escala { position: static; background: none; display: block; }
  .impressao-barra { display: none; }
  .impressao-folhas { display: block; padding: 0; overflow: visible; }
  .folha-moldura { box-shadow: none; zoom: 1 !important; }
  .folha { break-after: page; page-break-after: always; }
  .folha-moldura:last-child .folha { break-after: auto; page-break-after: auto; }
}

/* Legenda no pé de cada folha impressa */
.folha-rodape {
  flex: none; margin: 6px 0 0; padding-top: 5px; border-top: 1px solid var(--borda); justify-content: flex-start;
  font-size: 9.5px; color: var(--texto-suave); gap: 10px; row-gap: 2px;
}
.folha-rodape i { width: 9px; height: 9px; }
.folha-rodape i.feriado { background: var(--aviso); }
.folha-rodape i.fechado { background: var(--perigo); }
.folha-rodape i.aus-ferias { background: var(--ferias); }
.folha-rodape i.aus-folga { background: var(--sucesso); }
.folha-rodape i.aus-atestado { background: var(--perigo); }
.folha-rodape i.em-outro { background: var(--azul-claro); box-shadow: inset 3px 0 0 var(--azul); }
/* No papel não há mouse nem rolagem: nada de realce de linha nem coluna colada */
.folha .grade-semana tbody tr:hover > *, .folha .grade-tarefas tbody tr:hover > * { --camada-mouse: none; }
.folha .col-nome, .folha .linha-medicos > th:first-child { position: static; }

/* Tom dos tipos de agenda (Configurações › Tipos de agenda) */
.amostras-tom { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.amostra-tom {
  display: inline-block; min-width: 38px; padding: 2px 6px; border-radius: 5px; color: #fff; text-align: center;
  font-family: var(--fonte-titulo); font-size: 10.5px; font-weight: 800; letter-spacing: .03em;
}
.opcoes-tom { display: flex; flex-direction: column; gap: 6px; }
.opcao-tom { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1.5px solid var(--borda); border-radius: var(--raio); cursor: pointer; }
.opcao-tom:has(input:checked) { border-color: var(--azul); background: var(--azul-claro); }
.opcao-tom-nome { flex: 1; font-weight: 500; }
.lista-setores .recebe-medicos { display: flex; font-size: 12.5px; margin-top: 4px; font-weight: 400; }
.linha-medicos th small { font-weight: 500; font-size: 10px; color: var(--aviso); }
.sigla-mini {
  display: inline-block; min-width: 42px; text-align: center; padding: 2px 8px; border-radius: 6px; color: #fff;
  font-family: var(--fonte-titulo); font-weight: 800; font-size: 12px;
}

/* Agenda fechada: feriado (âmbar) e fechamento (vermelho) */
.faixa-fechamento {
  display: block; width: 100%; text-align: left; padding: 4px 8px; border-radius: 6px; border: 1px dashed;
  font-size: 11.5px; font-weight: 700; line-height: 1.3; font-family: var(--fonte-texto);
}
button.faixa-fechamento { cursor: pointer; }
.faixa-fechamento.feriado { background: var(--aviso-claro); color: var(--aviso); border-color: var(--aviso); }
.faixa-fechamento.fechado { background: var(--perigo-claro); color: var(--perigo); border-color: var(--perigo); }
.espelho-fechamentos { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px 0; }
.espelho-fechamentos .faixa-fechamento { font-size: 13px; padding: 8px 12px; }
.grade-semana thead th.dia.fechado { background: var(--aviso); }
.marca-fechado { display: block; font-size: 9.5px; font-weight: 700; text-transform: none; letter-spacing: 0; }
.opcoes-fechamento { display: flex; gap: 8px; flex-wrap: wrap; }
.opcoes-fechamento .opcao-tom { flex: 1 1 160px; }
.celula-fechada {
  font-weight: 800; text-transform: uppercase; font-size: 10.5px; letter-spacing: .04em; cursor: not-allowed;
  background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(0, 0, 0, .04) 6px 12px);
}
.celula-fechada.feriado { color: var(--aviso); background-color: var(--aviso-claro); }
.celula-fechada.fechado { color: var(--perigo); background-color: var(--perigo-claro); }
.cal-dia.fechado { background: repeating-linear-gradient(135deg, #fff 0 8px, var(--fundo) 8px 16px); }
.folha .celula-fechada { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

/* Espelho da Escala de Funcionários no Início: a grade não é clicável */
.espelho-funcionarios { padding: 0 14px 14px; }
.espelho-funcionarios .bloco-unidade { box-shadow: none; border-color: var(--borda); margin-bottom: 12px; }
.espelho-funcionarios .celula { cursor: default; }
.espelho-funcionarios .celula:hover { outline: none; }
.espelho-funcionarios .celula.vazia:hover::after { content: none; }

/* Calendário dentro da folha impressa: sempre 6 colunas (seg–sáb), sem as regras de tela estreita */
.folha .calendario { padding: 0; }
.folha .cal-cabecalho { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; }
.folha .cal-grade { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; }
/* CADA PIXEL AQUI VALE UMA FOLHA. Num dia com 16 médicos, o espaço ENTRE as agendas (4px do
   .cal-periodo da tela) sozinho somava 60px — mais que duas agendas inteiras. Apertando o vão,
   o respiro do dia e o cabeçalho, a semana emagrece ~60px e passam a caber DUAS por folha. */
.folha .cal-dia { min-height: 60px; padding: 3px 2px; gap: 1px; }
.folha .cal-dia.fora { display: block; }
.folha .cal-dia-topo { gap: 4px; }
.folha .cal-periodo { gap: 1px; }
.folha .cal-numero { font-size: 10px; }
.folha .cal-total { font-size: 8px; }
.folha .cal-periodo-nome { font-size: 8px; padding-bottom: 1px; }

/* A AGENDA IMPRESSA É UMA LINHA SÓ.
   Na tela cada agenda tem três linhas (nome, horário + local, tipo + pacientes) porque lá sobra
   espaço e dá para clicar. No papel isso era o que fazia a folha encolher: um dia com 16 médicos
   virava 800px de altura, o mês pedia cinco folhas e, para caber, a letra diminuía até não dar
   para ler. Em uma linha o mesmo dia ocupa ~380px — daí o mês cabe em duas folhas COM A LETRA
   GRANDE, que é o que a folha pendurada na parede precisa ter.
   Nada é cortado: o que não couber na largura desce para a linha de baixo. */
.folha .cal-item.compacto { padding: 0 3px; line-height: 1.13; gap: 0; border-left-width: 3px; }
.folha .cal-item.compacto .cal-item-nome,
.folha .cal-item.compacto .cal-item-hora {
  white-space: normal; overflow: visible; text-overflow: clip;   /* nada cortado: o que não cabe desce */
}
/* Linha de cima: MÉDICO e UNIDADE. Linha de baixo: horário, tipo de agenda e pacientes. */
.folha .cal-item.compacto .cal-item-quem {
  display: flex; align-items: baseline; justify-content: space-between; gap: 3px; flex-wrap: wrap;
}
.folha .cal-item.compacto .cal-item-nome { font-size: 9px; }
.folha .cal-item.compacto .cal-item-uni {
  font-size: 7px; font-weight: 700; color: var(--texto-suave); white-space: nowrap;
}
.folha .cal-item.compacto .cal-item-hora { font-size: 6.8px; color: var(--texto-suave); }
.folha .faixa-fechamento { font-size: 9px; padding: 2px 5px; }

/* Espelho da Escala de Funcionários: visão do dia (quem trabalha em cada setor) */
.dia-setores { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; padding: 12px 14px; }
.dia-setor { border: 1px solid var(--borda); border-radius: var(--raio); padding: 8px 10px; }
.dia-setor h4 {
  margin: 0 0 6px; font-size: 12px; color: var(--azul-titulo); text-transform: uppercase; letter-spacing: .04em;
}
.dia-setor.tarefa span { font-weight: 500; }
.lista-turnos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.lista-turnos li { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.lista-turnos .nome { font-weight: 500; }
.lista-turnos .horas { color: var(--texto-suave); white-space: nowrap; }
.dia-ausentes { margin: 0; padding: 0 14px 12px; }

/* Agenda por bloco (ordem de chegada), no formulário da Escala Médica */
.campo-bloco { background: var(--fundo); border-radius: var(--raio); padding: 10px 12px; gap: 8px; }
.campo-bloco .campo { margin: 0; max-width: 220px; }

/* ---------- Agendamentos: grade única do dia (uma linha por horário, uma coluna por médico) ---------- */
/* Barra do dia: sem caixa, controles discretos — só a informação */
#barra-agendamentos { display: block; margin: 0 0 14px; }
.topo-agenda { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nav-dia { display: flex; gap: 2px; }
.titulo-dia {
  margin: 0; font-size: 16px; color: var(--azul-titulo); white-space: nowrap; letter-spacing: -.01em;
  background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 10px;
  font: inherit; font-family: var(--fonte-titulo); text-align: left;
}
.titulo-dia svg { width: 17px; height: 17px; opacity: .5; }
.titulo-dia:hover { color: var(--azul); }
.titulo-dia:hover svg { opacity: 1; }
.titulo-dia small {
  margin-left: 8px; font-family: var(--fonte-texto); font-size: 11.5px; font-weight: 600; color: var(--sucesso);
  text-transform: uppercase; letter-spacing: .06em;
}
.acoes-dia { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.acoes-dia .btn, .acoes-dia select, .acoes-dia input[type="date"] {
  height: 32px; padding: 0 10px; font-size: 13px; width: auto; margin: 0; border-radius: var(--raio);
  border: 1px solid var(--borda); background: var(--superficie); color: var(--texto-suave);
}
.acoes-dia .btn:hover:not([disabled]), .acoes-dia select:hover { border-color: var(--azul); color: var(--azul); }
.acoes-dia .btn[disabled] { opacity: .4; cursor: default; }
.btn-circulo {
  width: 30px; height: 30px; border-radius: 50%; border: 0; background: none;
  color: var(--texto-suave); font-size: 20px; line-height: 1; cursor: pointer;
}
.btn-circulo:hover { background: var(--azul-claro); color: var(--azul); }

/* Segunda linha da barra de Agendamentos: médicos do dia à esquerda, resumo à direita — sem moldura.
   NÃO usar o nome .linha-medicos: esse é o <tr> da Escala de Funcionários. */
.linha-medicos-dia { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.resumo-dia { margin-left: auto; white-space: nowrap; font-size: 12.5px; }
.resumo-dia strong { color: var(--azul-marinho); }
.filtro-medicos { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* As UNIDADES filtram igual aos médicos: clicando para ligar e desligar, várias de uma vez.
   Ficam numa linha própria, ACIMA dos médicos, porque a unidade é que manda em quem aparece. */
.filtro-unidades {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 0 0; border-top: 1px solid var(--borda); margin-top: 8px;
}
.chip {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--borda); background: var(--superficie);
  color: var(--texto-suave); padding: 4px 11px; border-radius: var(--pilula); font-size: 12.5px; font-weight: 500;
  cursor: pointer;
}
.chip:hover { border-color: var(--azul); color: var(--azul); }
.chip.ativo { background: var(--azul); border-color: var(--azul); color: #fff; font-weight: 600; }
.chip-contador { color: var(--azul-marinho); font-size: 11px; font-weight: 700; opacity: .75; }
.chip.ativo .chip-contador { color: #fff; }

/* A grade é a única caixa da tela; linhas internas bem leves */
/* Uma coluna por médico, lado a lado: cada um com a SUA régua de horários.
   A rolagem é a da página (as colunas só rolam de lado quando não cabem). */
/* A GRADE DO DIA: até 4 médicos eles dividem a largura da tela; a partir do 5º cada coluna fica
   no TAMANHO BOM DE LER e a grade anda de lado, com a barra do navegador.
   Espremer 16 colunas numa tela só deixava tudo ilegível. */
.colunas-medicos {
  --linha: color-mix(in srgb, var(--borda), white 45%);
  --aperto: 0;
  --larg-hora: 70px;
  --corpo: 13px;
  --miudo: 11px;
  --largura-coluna: 300px;
  display: grid; grid-template-columns: repeat(var(--colunas, 1), minmax(0, 1fr));
  gap: 14px; align-items: start; padding-bottom: 6px;
}
/* Mais de 4 médicos: largura fixa e confortável, e a grade rola de lado COM A BARRA DO
   NAVEGADOR, a de sempre — nem enfeitada, nem escondida, nem espelhada por outra.
   Já tentamos as duas coisas e ficaram piores que a de fábrica: enfeitada ela sai pela metade,
   e uma barra nossa em cima, copiando a rolagem, sempre responde um passo atrás.
   A BARRA FICA EM CIMA de um jeito que não mexe nela: a grade é virada de cabeça para baixo
   (rotateX), o que joga a barra do navegador para o topo, e cada coluna é virada de volta para
   o conteúdo aparecer direito. É a MESMA barra nativa — arrasta, roda e responde igual. */
.colunas-medicos[data-rolando="sim"] {
  grid-template-columns: repeat(var(--colunas, 1), var(--largura-coluna));
  overflow-x: auto;
  transform: rotateX(180deg);
  /* A grade está virada, então o "fim" é que aparece EM CIMA. Sem isto, as colunas mais baixas
     ficam penduradas pelo rodapé e cada cabeçalho de médico começa numa altura diferente. */
  align-items: end;
}
.colunas-medicos[data-rolando="sim"] > .coluna-medico { transform: rotateX(180deg); }

/* Coluna estreita (poucos médicos num celular): encolhe a hora e as letras, e o nome abrevia
   (nomeAbreviado, no js). Com a grade rolando as colunas já têm tamanho bom, então o aperto é 0. */
.colunas-medicos[data-aperto="1"] { --larg-hora: 54px; --corpo: 12.5px; --miudo: 10.5px; gap: 10px; }
.colunas-medicos[data-aperto="2"] { --larg-hora: 46px; --corpo: 12px; --miudo: 10px; gap: 8px; }
.colunas-medicos[data-aperto="2"] .avatar-medico { display: none; }
.colunas-medicos[data-aperto="3"] { --larg-hora: 40px; --corpo: 11.5px; --miudo: 9.5px; gap: 6px; }
.colunas-medicos[data-aperto="3"] .avatar-medico,
.colunas-medicos[data-aperto="3"] .cabecalho-texto .dica { display: none; }

.coluna-medico {
  min-width: 0;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-cartao);
  box-shadow: var(--sombra); overflow: hidden;
}
.coluna-medico .vazio { padding: 18px; }
.tabela-agenda { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; }

/* Cabeçalho: médico, local e horário — o resto em letra miúda */
.tabela-agenda th { text-transform: none; letter-spacing: 0; font-family: var(--fonte-texto); font-weight: 500; }
.tabela-agenda thead th {
  position: sticky; top: 0; z-index: 3; background: var(--superficie); text-align: left; vertical-align: top;
  padding: 14px 10px 12px; border-bottom: 1px solid var(--borda); box-shadow: inset 0 3px 0 var(--cor, var(--azul));
}
.cabecalho-medico { display: flex; align-items: flex-start; gap: 10px; }
.avatar-medico {
  flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--cor, #0066cc), white 85%); color: var(--azul-marinho);
  font-family: var(--fonte-titulo); font-weight: 800; font-size: 11.5px;
}
.cabecalho-texto { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cabecalho-texto .medico {
  font-family: var(--fonte-titulo); font-weight: 800; font-size: calc(var(--corpo, 13px) + 1px);
  color: var(--azul-titulo); line-height: 1.2; overflow-wrap: anywhere;
}
.cabecalho-texto .dica { font-size: var(--miudo, 11px); line-height: 1.3; overflow-wrap: anywhere; }
.cabecalho-acoes { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
/* A contagem e o "+ Encaixe" descem para uma linha propria embaixo, em vez de espremer o nome
   e o horario numa coluninha de 150px. Vale na grade que rola e na coluna estreita. */
.colunas-medicos[data-rolando="sim"] .cabecalho-medico,
.colunas-medicos[data-aperto="1"] .cabecalho-medico,
.colunas-medicos[data-aperto="2"] .cabecalho-medico,
.colunas-medicos[data-aperto="3"] .cabecalho-medico { flex-wrap: wrap; gap: 4px 10px; }
/* flex-basis 0 para o texto encolher e FICAR NA MESMA LINHA da bolinha, em vez de empurrá-la */
.colunas-medicos[data-rolando="sim"] .cabecalho-texto,
.colunas-medicos[data-aperto="1"] .cabecalho-texto,
.colunas-medicos[data-aperto="2"] .cabecalho-texto,
.colunas-medicos[data-aperto="3"] .cabecalho-texto { flex: 1 1 0; min-width: 0; }
.colunas-medicos[data-rolando="sim"] .cabecalho-acoes,
.colunas-medicos[data-aperto="1"] .cabecalho-acoes,
.colunas-medicos[data-aperto="2"] .cabecalho-acoes,
.colunas-medicos[data-aperto="3"] .cabecalho-acoes {
  margin-left: 0; flex: 1 0 100%; flex-direction: row; align-items: center;
  justify-content: space-between; flex-wrap: wrap;
  border-top: 1px solid var(--linha); padding-top: 6px; margin-top: 2px;
}
.contagem { color: var(--texto-suave); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.contagem.cheia { color: var(--sucesso); }
.botao-encaixe { font-size: 11.5px; color: var(--texto-suave); white-space: nowrap; font-weight: 500; }
.botao-encaixe:hover { color: var(--aviso); }

/* Régua de horários: hora cheia em destaque, os minutos no meio bem leves */
.tabela-agenda th.col-hora {
  width: var(--larg-hora, 70px); text-align: right; color: var(--texto-suave);
  font-size: var(--miudo, 11.5px); font-weight: 500;
  background: var(--superficie); position: sticky; left: 0; z-index: 2; vertical-align: top;
  padding: 10px 12px 0 8px; border-bottom: 1px solid var(--linha);
}
.tabela-agenda thead th.col-hora { z-index: 4; box-shadow: none; border-bottom-color: var(--borda); }
.tabela-agenda tr.hora-cheia th.col-hora { color: var(--azul-marinho); font-weight: 700; font-size: 12.5px; }
.tabela-agenda tr.hora-cheia > * { border-top: 1px solid var(--linha); }

/* Traço de "agora" no dia de hoje */
.tabela-agenda tr.linha-agora > * { border-top: 1px solid var(--perigo); }
.tabela-agenda tr.linha-agora th.col-hora { color: var(--perigo); font-weight: 700; }

.celula-agenda {
  border-bottom: 1px solid var(--linha); border-left: 1px solid var(--linha); padding: 0; vertical-align: top;
}
.celula-agenda.fora { background: color-mix(in srgb, var(--fundo), white 40%); }
.celula-agenda.livre:hover, .celula-agenda.entre:hover { background: color-mix(in srgb, var(--azul-claro), white 45%); }

/* Horário livre: vazio de verdade; o "+ Agendar" só aparece com o mouse em cima */
.btn-agendar {
  width: 100%; min-height: 40px; border: 0; background: none; color: var(--azul); font: inherit;
  font-size: var(--miudo, 12.5px); cursor: pointer; text-align: left; padding: 6px 10px;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.btn-agendar .texto-agendar { opacity: 0; transition: opacity .12s ease-in; }
.celula-agenda:hover .btn-agendar .texto-agendar, .btn-agendar:focus-visible .texto-agendar { opacity: 1; }
.btn-agendar.encaixe { color: var(--aviso); }
.vagas-bloco { margin-left: auto; color: var(--texto-suave); font-size: 11px; font-weight: 600; opacity: .6; }

/* Paciente marcado */
.paciente-agendado {
  width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 6px; text-align: left;
  background: none; border: 0; border-left: 3px solid var(--cor-situacao, var(--azul));
  padding: 8px 10px; cursor: pointer; font: inherit;
}
.paciente-agendado:hover { background: color-mix(in srgb, var(--fundo), white 30%); }
/* Cancelado ou reagendado: continua à vista (nada se perde), mas não ocupa a vaga */
.paciente-agendado.sem-vaga { opacity: .6; }
.paciente-agendado.sem-vaga .nome { text-decoration: line-through; }
.paciente-agendado .nome {
  font-weight: 600; font-size: var(--corpo, 13px); line-height: 1.25; color: var(--texto);
  overflow-wrap: anywhere; min-width: 0;
}
.paciente-agendado .nome small {
  font-weight: 400; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--aviso);
}
.paciente-agendado .dica { grid-column: 1; font-size: var(--miudo, 11px); overflow-wrap: anywhere; }
.selo.situacao { font-size: 10px; padding: 1px 8px; align-self: start; background: none; }

/* Bloco (ordem de chegada): vários pacientes na mesma linha de horário */
.celula-agenda.bloco { padding: 2px 0; }
.celula-agenda.bloco .paciente-agendado { padding: 5px 10px; }
.celula-agenda.bloco .paciente-agendado + .paciente-agendado { border-top: 1px solid var(--linha); }
.celula-agenda.bloco .btn-agendar { min-height: 28px; }

/* Cor de cada situação do atendimento */
.sit-agendado { --cor-situacao: var(--azul); }
.sit-esperando { --cor-situacao: var(--aviso); }
.sit-em_atendimento { --cor-situacao: var(--azul-marinho); }
.sit-finalizado { --cor-situacao: var(--sucesso); }
.sit-reagendado { --cor-situacao: var(--texto-suave); }
.sit-cancelado, .sit-faltou { --cor-situacao: var(--perigo); }
.selo.sit-agendado { color: var(--azul); }
.selo.sit-esperando { color: var(--aviso); }
.selo.sit-em_atendimento { color: var(--azul-marinho); }
.selo.sit-finalizado { color: var(--sucesso); }
.selo.sit-reagendado { color: var(--texto-suave); }
.selo.sit-cancelado, .selo.sit-faltou { color: var(--perigo); }

/* Janela do agendamento: paciente · situação e horário · procedimentos · observação */
.linha-situacao { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 12px; align-items: start; }
.linha-situacao .campo { margin: 0; }
.destaque-agenda { background: var(--fundo); border-radius: var(--raio); padding: 8px 12px; margin: 0; font-size: 12px; }

.modal.modal-largo { max-width: 720px; }

/* Barra dos modelos de documento (receita, atestado, declaração): escolher um pronto */
.barra-modelos {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--fundo); border-radius: var(--raio); padding: 8px 12px; margin-bottom: 12px;
}
.barra-modelos label { font-size: 12px; font-weight: 700; color: var(--texto-suave); margin: 0; }
.barra-modelos select { flex: 1 1 200px; min-width: 160px; }

/* Modelos no título de cada campo da consulta (queixa, exame, hipótese, conduta) */
.acoes-campo { float: right; display: inline-flex; align-items: center; gap: 8px; font-weight: 400; }
.acoes-campo select {
  padding: 2px 6px; font-size: 12px; max-width: 170px; border-radius: 999px; height: auto;
}
.acoes-campo .btn-link { font-size: 12px; }

/* Prévia da importação do arquivo da contabilidade: uma linha por período, com quem é quem */
.modal.modal-enorme { max-width: min(1200px, 96vw); }

/* Repasse médico: escolher vários (médicos, procedimentos, convênios) dentro da janela da regra */
.grade-escolhas { align-items: start; }
.escolha-multi .lista-multi {
  border: 1.5px solid var(--borda); border-radius: var(--raio); padding: 6px;
  max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px;
}
.escolha-multi .lista-multi .checkbox { padding: 4px 6px; border-radius: var(--raio); font-size: 13px; }
.escolha-multi .lista-multi .checkbox:hover { background: var(--fundo); }
.escolha-multi .opcao-inativa { opacity: .6; }
/* Tabela de pagamento: cada convênio marcado com o SEU mês (quem paga é que diz qual) */
.lista-convenios-mes {
  display: flex; flex-direction: column; gap: 6px;
  border: 1.5px solid var(--borda); border-radius: var(--raio); padding: 8px;
  max-height: 260px; overflow-y: auto;
}
.linha-convenio-mes {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
  padding: 6px 8px; border-radius: var(--raio); cursor: pointer;
}
.linha-convenio-mes:hover { background: var(--fundo); }
.linha-convenio-mes:has(input[type=checkbox]:checked) { background: var(--azul-claro); }
.linha-convenio-mes .nome-convenio { display: flex; flex-direction: column; font-weight: 600; }
.linha-convenio-mes input[type=month] { height: 30px; padding: 0 8px; font-size: 13px; }
.linha-convenio-mes input[type=month]:disabled { opacity: .45; }

/* Aviso de responsabilidade na criação de senha: o acesso é pessoal e auditado */
.aviso-responsabilidade {
  border: 1.5px solid var(--aviso); background: var(--aviso-claro); color: var(--aviso);
  border-radius: var(--raio); padding: 12px 14px; font-size: 13px; line-height: 1.45;
}
.aviso-responsabilidade strong { color: inherit; }
.aviso-responsabilidade p { margin: 6px 0 0; }
.escolha-multi .busca-multi {
  height: 26px; padding: 0 8px; font-size: 12px; border: 1px solid var(--borda); border-radius: var(--pilula);
}
/* A linha que abre os atendimentos de um médico na apuração */
.linha-detalhe > td { background: var(--fundo); padding: 8px 12px; }
.tabela-detalhe { background: var(--superficie); border-radius: var(--raio); }
.cartao-resumo.cartao-aviso { --cor-cartao: var(--aviso); }
.tabela-importacao select { width: 100%; min-width: 180px; padding: 4px 6px; font-size: 13px; }
.tabela-importacao select.campo-pendente { border-color: var(--perigo); background: var(--perigo-claro); }
.conferencia-ok { color: var(--sucesso); font-weight: 700; }
.conferencia-atencao { color: var(--aviso); font-weight: 700; }
.conferencia-erro { color: var(--perigo); font-weight: 700; }
/* ---------- Atendimento médico: a agenda do próprio médico ---------- */
.cartao-espera { --cor-cartao: var(--aviso); }
.cartao-atendendo { --cor-cartao: var(--azul-marinho); }
.cartao-finalizado { --cor-cartao: var(--sucesso); }
.cartao-repasse { --cor-cartao: var(--texto-suave); }
.cartao-resumo .valor-grande .selo { font-size: 12px; vertical-align: middle; }

.fila-atendimento { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.linha-atendimento {
  display: flex; align-items: center; gap: 14px; padding: 12px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--borda), white 40%); border-left: 3px solid transparent;
}
.linha-atendimento:last-child { border-bottom: 0; }
.linha-atendimento.sit-esperando { border-left-color: var(--aviso); background: color-mix(in srgb, var(--aviso-claro), white 55%); }
.linha-atendimento.atendendo { border-left-color: var(--azul); background: var(--azul-claro); }
.linha-atendimento.fora { opacity: .55; }
.hora-atendimento {
  font-family: var(--fonte-titulo); font-size: 15px; font-weight: 800; color: var(--azul-titulo);
  min-width: 52px; font-variant-numeric: tabular-nums;
}
.dados-atendimento {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; text-align: left;
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit;
}
.dados-atendimento strong { font-size: 14.5px; }
.dados-atendimento:hover strong { color: var(--azul); text-decoration: underline; }
.dados-atendimento .secundario { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tempo-espera {
  font-size: 12.5px; font-weight: 700; color: var(--aviso); white-space: nowrap;
  background: var(--aviso-claro); padding: 3px 10px; border-radius: var(--pilula);
}
.acoes-atendimento { display: flex; align-items: center; gap: 8px; margin-left: auto; white-space: nowrap; }

/* ---------- Consulta do médico: prontuário, documentos e anexos ---------- */
.barra-consulta { gap: 18px; }
.paciente-consulta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.paciente-consulta strong { font-size: 16px; color: var(--azul-titulo); }
.grade-consulta { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); gap: 14px; }
.grade-consulta .painel { margin: 0; }
.coluna-consulta { display: flex; flex-direction: column; gap: 14px; }
.grade-consulta textarea { resize: vertical; }
@media (max-width: 1000px) { .grade-consulta { grid-template-columns: 1fr; } }

.botoes-documento { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.lista-documentos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lista-documentos li {
  display: flex; align-items: center; gap: 10px; padding: 9px 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--borda), white 40%);
}
.lista-documentos li:last-child { border-bottom: 0; }
.lista-documentos li > div { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lista-documentos .vazio { display: block; padding: 12px 6px; }
.grau-olho {
  border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px 14px 4px; margin: 0 0 12px;
}
.grau-olho legend { font-size: 12px; font-weight: 700; color: var(--azul-marinho); padding: 0 6px; }
.grade-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 700px) { .grade-4 { grid-template-columns: repeat(2, 1fr); } }

/* Histórico clínico do paciente (aba Prontuários) */
.linha-tempo-clinica { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--borda); }
.linha-tempo-clinica li { position: relative; padding: 0 0 22px 14px; }
.linha-tempo-clinica li::before {
  content: ''; position: absolute; left: -25px; top: 4px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--azul); box-shadow: 0 0 0 3px var(--azul-claro);
}
.tempo-cabecalho { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.tempo-cabecalho > div { display: flex; flex-direction: column; gap: 1px; }
.tempo-cabecalho strong { font-size: 14.5px; color: var(--azul-titulo); }
.tempo-cabecalho .selo { margin-left: auto; }
.bloco-consulta { margin-bottom: 10px; }
.bloco-consulta p { margin: 2px 0 0; white-space: pre-wrap; font-size: 13.5px; }
.linha-tempo-clinica li.atual::before { background: var(--verde); box-shadow: 0 0 0 3px var(--verde-claro); }
.documentos-historico { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.documentos-historico .chip { cursor: pointer; }
.galeria-midias {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin-top: 6px;
}
.galeria-midias .midia {
  display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--texto-suave);
  border: 1px solid var(--borda); border-radius: var(--raio); padding: 6px; background: var(--superficie);
}
.galeria-midias .midia:hover { border-color: var(--azul); color: var(--azul); }
.galeria-midias img { width: 100%; height: 78px; object-fit: cover; border-radius: 6px; background: var(--fundo); }
.galeria-midias .midia.arquivo svg {
  width: 100%; height: 78px; padding: 18px; color: var(--azul); background: var(--fundo); border-radius: 6px;
}
.galeria-midias.grande { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; }
.midia-cartao {
  margin: 0; display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 8px; background: var(--superficie);
}
.midia-cartao:hover { border-color: var(--azul); }
.midia-cartao .midia { border: 0; padding: 0; }
.midia-cartao img, .midia-cartao .midia.arquivo svg { height: 118px; }
.midia-cartao figcaption { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.midia-cartao figcaption strong {
  font-size: 12.5px; color: var(--azul-titulo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.midia-cartao figcaption .dica { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.midia-cartao .btn-link { align-self: flex-start; font-size: 12px; padding: 2px 0; }
/* O arquivo escolhido, no alto da janela de envio */
.arquivo-escolhido {
  display: flex; align-items: center; gap: 14px; padding: 10px 12px; margin-bottom: 4px;
  background: var(--fundo); border-radius: var(--raio);
}
.arquivo-escolhido img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--raio); }
.arquivo-escolhido > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.arquivo-escolhido strong { color: var(--azul-titulo); overflow-wrap: anywhere; }
.galeria-midias .midia span {
  font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#abas-consulta { margin-top: 4px; }
.historico-consulta { max-height: 420px; overflow-y: auto; padding-right: 4px; }
.historico-consulta .linha-tempo-clinica { padding-left: 14px; }
.historico-consulta li { padding-bottom: 16px; }

/* Documento em folha A4 em pé (receita, atestado, declaração) */
.impressao-documento {
  position: fixed; inset: 0; z-index: 90; background: #e9eef5; overflow: auto;
  display: flex; flex-direction: column; align-items: center;
}
.impressao-documento .impressao-barra {
  position: sticky; top: 0; align-self: stretch; display: flex; align-items: center; gap: 12px;
  padding: 10px 18px; background: var(--superficie); border-bottom: 1px solid var(--borda); z-index: 2;
}
.impressao-documento .impressao-barra .dica { flex: 1; }
.folha-doc-moldura { padding: 22px; }
.folha-doc {
  width: 210mm; min-height: 297mm; background: #fff; padding: 22mm 20mm; box-shadow: var(--sombra);
  display: flex; flex-direction: column; color: #222;
}
.folha-doc-topo {
  display: flex; align-items: center; gap: 16px; border-bottom: 3px solid var(--verde); padding-bottom: 12px;
}
.folha-doc-topo h1 {
  margin-left: auto; font-size: 18px; text-transform: uppercase; letter-spacing: .06em; color: var(--azul-titulo);
}
.folha-doc-paciente {
  display: flex; gap: 28px; margin: 18px 0 10px; padding-bottom: 12px; border-bottom: 1px solid #dde3ec;
}
.folha-doc-paciente > div { display: flex; flex-direction: column; gap: 2px; }
.folha-doc-paciente span { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: #6b7785; }
.folha-doc-corpo { flex: 1; font-size: 14px; line-height: 1.7; }
.folha-doc-corpo p { margin: 0 0 10px; }
.tabela-grau { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.tabela-grau th, .tabela-grau td { border: 1px solid #c9d2de; padding: 8px 10px; text-align: center; font-size: 13px; }
.tabela-grau thead th { background: #f2f6fb; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.tabela-grau tbody th { text-align: left; background: #f8fafd; }
.lista-receita { margin: 0 0 12px; padding-left: 20px; }
.lista-receita li { margin-bottom: 8px; }
.folha-doc-assinatura { margin-top: 30px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.linha-assinatura { display: block; width: 260px; margin: 0 auto 6px; border-top: 1px solid #222; }
.folha-doc-assinatura span:last-child { font-size: 12px; color: #6b7785; }

@media print {
  /* A escala imprime deitada; os documentos do médico, em pé */
  body.imprimindo-documento { --nada: 0; }
  body.imprimindo-documento > *:not(.impressao-documento) { display: none !important; }
  body.imprimindo-documento { background: #fff; }
  .impressao-documento { position: static; background: none; display: block; overflow: visible; }
  .impressao-documento .impressao-barra { display: none; }
  .folha-doc-moldura { padding: 0; }
  .folha-doc { width: auto; min-height: auto; box-shadow: none; padding: 12mm 14mm; }
}
@page doc { size: A4 portrait; margin: 0; }

/* Visualização do agendamento (clicar no paciente na grade do dia) */
.resumo-agendamento {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px;
  padding: 14px 16px; margin-bottom: 14px; background: var(--fundo); border-radius: var(--raio-cartao);
}
.resumo-agendamento > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.resumo-agendamento strong { font-size: 14.5px; color: var(--azul-titulo); }
.historico-paciente { margin-top: 16px; }
.lista-agendamentos-paciente { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lista-agendamentos-paciente li {
  display: flex; align-items: center; gap: 12px; padding: 8px 6px; font-size: 13px;
  border-bottom: 1px solid color-mix(in srgb, var(--borda), white 40%);
}
.lista-agendamentos-paciente li:last-child { border-bottom: 0; }
.lista-agendamentos-paciente li.atual { background: var(--azul-claro); border-radius: var(--raio); }
.lista-agendamentos-paciente .linha-nome {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px;
}
.lista-agendamentos-paciente .linha-nome, .lista-agendamentos-paciente .dica {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lista-agendamentos-paciente strong { color: var(--azul-titulo); font-variant-numeric: tabular-nums; }
.tabela-itens { border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; }
.cabecalho-itens, .linha-item {
  display: grid; grid-template-columns: 2fr 1.4fr 1.2fr 96px 30px; gap: 8px; align-items: center;
  padding: 6px 10px;
}
.cabecalho-itens {
  background: var(--fundo); font-family: var(--fonte-titulo); font-size: 10.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em; color: var(--azul-marinho);
}
.linha-item + .linha-item { border-top: 1px solid var(--borda); }
.linha-item select, .linha-item input { margin: 0; height: 34px; padding: 0 8px; font-size: 13px; }
.linha-item input[data-campo="valor"] { text-align: right; }
.linha-item select:disabled { background: var(--fundo); color: var(--texto-suave); }
.linha-item .btn-link { padding: 0; font-size: 15px; line-height: 1; }
.linha-item .btn-link[disabled] { opacity: .25; cursor: default; }
.rodape-itens { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0 4px; }
.total-atendimento { color: var(--texto-suave); font-size: 13px; }
.total-atendimento strong { font-family: var(--fonte-titulo); font-size: 17px; color: var(--azul-titulo); margin-left: 6px; }

/* Confirmação ao mandar o paciente esperar */
.confirma-paciente { margin: 0 0 8px; }
.confirma-itens { list-style: none; margin: 0; padding: 0; }
.confirma-itens li {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 0;
  border-bottom: 1px solid var(--borda);
}
.confirma-itens li > span:first-child { grid-column: 1; grid-row: 1; font-weight: 500; }
.confirma-itens .dica { grid-column: 1; grid-row: 2; font-size: 11.5px; }
.confirma-itens strong { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 14px; }
.confirma-total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 12px 0 4px;
  font-family: var(--fonte-titulo); color: var(--azul-titulo);
}
.confirma-total strong { font-size: 20px; }
.paciente-escolhido {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  background: var(--azul-claro); border-radius: var(--raio); padding: 10px 12px; margin: 0;
}
.resultado-busca { list-style: none; margin: 6px 0 0; padding: 0; max-height: 190px; overflow-y: auto; }
.resultado-busca li { border-bottom: 1px solid var(--borda); }
.resultado-busca li:last-child { border-bottom: 0; }
.resultado-busca .btn-link { display: block; width: 100%; text-align: left; padding: 7px 4px; }

/* ---------- Financeiro e Faturamento: filtros, cartões de total e tabela do período ---------- */
/* Barra de cima: período, filtros e a ação da sub-aba — tudo numa linha só */
#barra-filtros { display: block; margin-bottom: 14px; }
.barra-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; margin: 0; }
.separador-filtros { width: 1px; height: 22px; background: var(--borda); margin: 0 2px; }
.barra-topo .btn-link { font-size: 12.5px; }
.acao-topo { margin-left: auto; display: inline-flex; gap: 8px; align-items: center; }
.acao-topo .btn { height: 34px; padding: 0 16px; font-size: 13.5px; }
.acao-topo .filtro-multi svg { width: 14px; height: 14px; }

/* "Vendo como": só o DEV enxerga, para abrir a tela do jeito que aquele médico vê */
.ver-como { display: inline-flex; align-items: center; gap: 8px; }
.ver-como .rotulo-cartao { margin: 0; }
.ver-como select {
  height: 34px; padding: 0 12px; border: 1.5px solid var(--azul); border-radius: var(--pilula);
  background: var(--azul-claro); color: var(--azul); font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; max-width: 260px;
}
.ver-como select:hover { background: var(--azul); color: #fff; }
.botao-periodo {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; cursor: pointer;
  border: 1.5px solid var(--azul); border-radius: var(--pilula); background: var(--azul-claro); color: var(--azul);
  font: inherit; font-size: 13px; font-weight: 600;
}
.botao-periodo:hover { background: var(--azul); color: #fff; }
.botao-periodo svg { width: 15px; height: 15px; }

/* Filtro de várias opções (Unidades · 2) */
.filtro-multi {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; cursor: pointer;
  border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie);
  color: var(--texto-suave); font: inherit; font-size: 13px;
}
.filtro-multi:hover { border-color: var(--azul); color: var(--azul); }
.filtro-multi.escolhido { border-color: var(--azul); background: var(--azul-claro); color: var(--azul); font-weight: 600; }
.filtro-seta { font-size: 10px; opacity: .6; }
.filtro-contador {
  background: var(--azul); color: #fff; border-radius: var(--pilula); padding: 0 7px; font-size: 11px; font-weight: 700;
}
.painel-multi {
  position: absolute; z-index: 60; width: 260px; background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio-cartao); box-shadow: 0 12px 32px rgba(15, 35, 70, .18); overflow: hidden;
}
.multi-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px;
  border-bottom: 1px solid var(--borda); background: var(--fundo);
}
.multi-topo strong { font-family: var(--fonte-titulo); font-size: 13px; color: var(--azul-titulo); }
.multi-busca { margin: 8px 12px 0; width: calc(100% - 24px); height: 32px; font-size: 13px; }
.multi-lista { max-height: 260px; overflow-y: auto; padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; }
.multi-lista .checkbox { padding: 5px 6px; border-radius: var(--raio); font-size: 13px; }
.multi-lista .checkbox:hover { background: var(--azul-claro); }
.multi-rodape {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px;
  border-top: 1px solid var(--borda);
}
.multi-rodape .btn { height: 30px; padding: 0 14px; font-size: 13px; }

/* Sub-abas do Financeiro */
#sub-abas-financeiro { margin-bottom: 14px; }

/* Gráficos do resumo: SVG desenhado em js/graficos.js, no tamanho real do painel */
.grade-graficos { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; }
.grade-graficos .grafico-painel { margin-bottom: 0; }
.grafico-painel { padding: 18px 20px 16px; margin-bottom: 14px; }
.grafico-largo { grid-column: 1 / -1; }
.grafico-topo {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--borda);
}
.grafico-topo h3 {
  margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--azul-marinho);
}
.grafico-resumo {
  font-size: 13px; color: var(--texto-suave); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.grafico-resumo strong { color: var(--azul-titulo); }
.grafico-area { width: 100%; }
.caixa-grafico { width: 100%; overflow: hidden; }

/* Linha do período */
.svg-grafico { display: block; max-width: 100%; height: auto; font-family: var(--fonte-texto); }
.eixo-linha { stroke: var(--borda); stroke-width: 1; stroke-dasharray: 3 5; }
.eixo-linha.eixo-base { stroke-dasharray: none; stroke: color-mix(in srgb, var(--borda), var(--texto-suave) 25%); }
.eixo-texto { fill: var(--texto-suave); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.serie-linha { fill: none; stroke: var(--azul); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.serie-ponto { fill: var(--superficie); stroke: var(--azul); stroke-width: 2; }
.ponto-ativo { fill: var(--azul); stroke: var(--superficie); stroke-width: 3; transition: opacity .12s; }
.guia-mouse { stroke: var(--azul); stroke-width: 1; stroke-dasharray: 4 4; opacity: .5; transition: opacity .12s; }
.area-leitura { fill: transparent; }
.valor-ponto {
  fill: var(--azul-titulo); font-size: 11.5px; font-weight: 700; font-family: var(--fonte-titulo);
  font-variant-numeric: tabular-nums;
}

/* Etiqueta que segue o mouse na linha do tempo */
.etiqueta-grafico {
  position: absolute; z-index: 70; pointer-events: none; opacity: 0; transition: opacity .12s;
  background: var(--azul-marinho); color: #fff; border-radius: var(--raio); padding: 8px 12px;
  box-shadow: 0 10px 26px rgba(15, 35, 70, .28); display: flex; flex-direction: column; gap: 1px;
}
.etiqueta-grafico strong { font-size: 12px; opacity: .85; font-weight: 600; }
.etiqueta-grafico span {
  font-family: var(--fonte-titulo); font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.etiqueta-grafico small { font-size: 11px; opacity: .8; }

/* Rosca com legenda */
.rosca-com-legenda { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.svg-rosca { width: 200px; height: 200px; flex: 0 0 200px; }
.svg-rosca .fatia {
  fill: var(--cor-situacao, var(--azul)); transition: transform .15s ease, filter .15s ease;
  transform-origin: 110px 110px;
}
.svg-rosca .fatia.realce, .svg-rosca .fatia:hover { transform: scale(1.04); filter: brightness(1.06); }
.rosca-numero {
  fill: var(--azul-titulo); font-family: var(--fonte-titulo); font-size: 34px; font-weight: 800;
}
.rosca-rotulo { fill: var(--texto-suave); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.legenda-rosca { list-style: none; margin: 0; padding: 0; flex: 1 1 200px; display: flex; flex-direction: column; }
.legenda-rosca li {
  display: grid; grid-template-columns: 10px 1fr auto auto auto; gap: 10px; align-items: center;
  font-size: 13px; padding: 7px 8px; border-radius: var(--raio); cursor: default;
}
.legenda-rosca li.realce, .legenda-rosca li:hover { background: var(--fundo); }
.ponto-serie {
  width: 10px; height: 10px; border-radius: 3px; background: var(--cor-situacao, var(--azul)); display: inline-block;
}
.legenda-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto); }
.legenda-parte { color: var(--texto-suave); font-size: 12px; font-variant-numeric: tabular-nums; }
.legenda-numero {
  font-weight: 700; color: var(--azul-titulo); font-variant-numeric: tabular-nums; min-width: 22px; text-align: right;
}
.legenda-valor {
  color: var(--texto-suave); font-size: 12.5px; min-width: 82px; text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Lista ranqueada (convênios, médicos, procedimentos...) */
.lista-ranque { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ranque-topo { display: flex; align-items: baseline; gap: 10px; }
.ranque-posicao {
  width: 20px; height: 20px; flex: 0 0 20px; border-radius: 6px; background: var(--fundo); color: var(--texto-suave);
  font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
.ranque-nome {
  flex: 1; font-size: 13.5px; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ranque-valor {
  font-family: var(--fonte-titulo); font-size: 14px; font-weight: 700; color: var(--azul-titulo);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ranque-barra { height: 6px; border-radius: var(--pilula); background: var(--fundo); margin: 6px 0 4px; overflow: hidden; }
.ranque-barra span {
  display: block; height: 100%; border-radius: var(--pilula);
  background: linear-gradient(90deg, var(--azul-marinho), var(--azul));
  animation: crescerBarra .5s ease-out;
}
@keyframes crescerBarra { from { width: 0 !important; } }
.ranque-rodape { font-size: 11.5px; color: var(--texto-suave); }
.valor-zerado { color: var(--texto-suave); }

/* Cores de série, quando a lista não tem cor própria (a de situação vem de --cor-situacao) */
.serie-1 { --cor-situacao: var(--azul); }
.serie-2 { --cor-situacao: var(--azul-marinho); }
.serie-3 { --cor-situacao: var(--verde-escuro); }
.serie-4 { --cor-situacao: #f0a500; }
.serie-5 { --cor-situacao: #7c5cd6; }
.serie-6 { --cor-situacao: #2aa8a8; }

/* Cabeçalho dos painéis com tabela */
.cabecalho-tabela {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--borda);
}
.cabecalho-tabela h3 { margin: 0; font-size: 15px; }
/* Tabela do período: uma linha por lançamento, sem quebrar texto (rola de lado quando precisa) */
.tabela-densa th, .tabela-densa td { white-space: nowrap; padding-left: 12px; padding-right: 12px; }
.tabela-densa .secundario { white-space: nowrap; }

/* Conferência de caixa (Financeiro) e das guias (Faturamento) */
.grupo-dia { padding: 0; overflow: hidden; margin-bottom: 14px; }
.dia-topo {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 14px 18px;
  border-bottom: 1px solid var(--borda); background: color-mix(in srgb, var(--fundo), white 45%);
}
.dia-titulo h3 { margin: 0 0 2px; font-size: 15.5px; }
.dia-titulo h3::first-letter { text-transform: uppercase; }
.dia-progresso { margin-left: auto; display: flex; flex-direction: column; gap: 6px; min-width: 190px; }
.dia-progresso .dica { text-align: right; font-variant-numeric: tabular-nums; }
.dia-progresso strong { color: var(--azul-titulo); }
.barra-progresso { display: block; height: 5px; border-radius: var(--pilula); background: var(--borda); overflow: hidden; }
.barra-progresso span {
  display: block; height: 100%; border-radius: var(--pilula); background: var(--verde); transition: width .3s;
}
.dia-topo .btn-link { font-size: 12.5px; white-space: nowrap; }

/* Tabela da conferência: duas linhas por célula, sem excesso de colunas */
.tabela-conferencia { width: 100%; }
.tabela-conferencia th, .tabela-conferencia td { white-space: nowrap; vertical-align: middle; }
.tabela-conferencia td { padding-top: 9px; padding-bottom: 9px; }
.tabela-conferencia tbody tr + tr { border-top: 1px solid color-mix(in srgb, var(--borda), white 40%); }
.tabela-conferencia .celula-marca { width: 34px; }
.tabela-conferencia .secundario { display: block; }
.situacao-texto { color: var(--cor-situacao, var(--texto-suave)); font-weight: 600; }
.sit-andamento { --cor-situacao: var(--sucesso); }
.sit-programada { --cor-situacao: var(--azul); }
.sit-encerrada { --cor-situacao: var(--texto-suave); }
.sit-cancelada { --cor-situacao: var(--perigo); }

/* Card "sem horário nesta semana": quem está na escala e ninguém lançou o turno */
.aviso-sem-horario { border-left: 5px solid var(--aviso); }
.aviso-sem-horario h3 { margin: 0 0 2px; display: flex; align-items: center; gap: 8px; }
.aviso-sem-horario .contagem {
  font-family: var(--fonte-texto); font-size: 12px; font-weight: 700; color: #fff;
  background: var(--aviso); border-radius: 999px; padding: 1px 9px;
}
.lista-sem-horario { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
/* Um bloco por DIA: o dia é o título, e embaixo quem está sem horário nele */
.dia-sem-horario { margin-top: 12px; }
.dia-sem-horario > summary {
  margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; cursor: pointer;
  color: var(--azul-marinho); font-family: var(--fonte-titulo); font-weight: 800;
  display: flex; align-items: center; gap: 8px; list-style: none; padding: 2px 0;
}
.dia-sem-horario > summary::-webkit-details-marker { display: none; }
.dia-sem-horario > summary::before {
  content: '▸'; font-size: 10px; color: var(--texto-suave); transition: transform .12s;
}
.dia-sem-horario[open] > summary::before { transform: rotate(90deg); }
.dia-sem-horario > summary:hover { color: var(--azul); }
.dia-sem-horario > summary .contagem { background: var(--borda); color: var(--texto-suave); }
.chip-sem-horario {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left;
  padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--borda); background: #fff;
  cursor: pointer; font: inherit; color: var(--texto);
}
button.chip-sem-horario:hover { border-color: var(--azul); background: var(--azul-claro); }
/* No card das 44 horas o nome é só informação: não abre nada, então nem mão nem realce */
div.chip-sem-horario { cursor: default; }
.chip-sem-horario strong { font-size: 13px; }
.chip-sem-horario span { font-size: 11px; color: var(--texto-suave); }

/* Card das 44 horas: quem passou (vermelho) e quem não chegou (amarelo) */
.aviso-horas { border-left: 5px solid var(--azul); }
.aviso-horas h3 { margin: 0 0 2px; display: flex; align-items: center; gap: 8px; }
.aviso-horas h3 .contagem {
  font-family: var(--fonte-texto); font-size: 12px; font-weight: 700; color: #fff;
  background: var(--azul); border-radius: 999px; padding: 1px 9px;
}
.grupo-horas { margin-top: 12px; }
.grupo-horas > summary {
  margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; cursor: pointer;
  font-family: var(--fonte-titulo); font-weight: 800;
  display: flex; align-items: center; gap: 8px; list-style: none; padding: 2px 0;
}
.grupo-horas > summary::-webkit-details-marker { display: none; }
.grupo-horas > summary::before { content: '▸'; font-size: 10px; color: var(--texto-suave); transition: transform .12s; }
.grupo-horas[open] > summary::before { transform: rotate(90deg); }
.grupo-horas > summary .contagem {
  font-family: var(--fonte-texto); font-size: 11px; font-weight: 700;
  border-radius: 999px; padding: 1px 8px;
}
.grupo-acima > summary { color: var(--perigo); }
.grupo-acima > summary .contagem { background: var(--perigo-claro); color: var(--perigo); }
.grupo-abaixo > summary { color: var(--aviso); }
.grupo-abaixo > summary .contagem { background: var(--aviso-claro); color: var(--aviso); }
.chip-acima { border-color: color-mix(in srgb, var(--perigo) 35%, #fff); }
button.chip-acima:hover { border-color: var(--perigo); background: var(--perigo-claro); }
.chip-abaixo { border-color: color-mix(in srgb, var(--aviso) 45%, #fff); }
button.chip-abaixo:hover { border-color: var(--aviso); background: var(--aviso-claro); }

/* O × que tira a pessoa do setor.
   FICA FORA DO FLUXO DO TEXTO (absolute): dentro da linha ele empurrava o nome e criava uma
   segunda linha na célula, bagunçando a altura da grade inteira. O espaço dele já está reservado
   no padding-right do nome, então nada fica por baixo. Some até o mouse chegar na linha. */
.linha-pessoa .col-nome { position: relative; padding-right: 16px; }
.linha-pessoa .nome-pessoa { display: inline; }
.btn-tirar {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  border: 0; background: none; color: var(--texto-suave); cursor: pointer;
  font-size: 13px; line-height: 1; padding: 0 3px; border-radius: 4px; opacity: 0;
  transition: opacity .12s;
}
.linha-pessoa:hover .btn-tirar { opacity: .45; }
.btn-tirar:hover { opacity: 1; background: var(--perigo-claro); color: var(--perigo); }
.btn-tirar:focus-visible { opacity: 1; outline: 2px solid var(--azul); }
/* No celular não há mouse: aparece sempre, fraquinho */
@media (hover: none) { .btn-tirar { opacity: .4; } }
/* Cancelada continua na lista, mas apagada: o registro fica, o lançamento não vale mais */
.linha-cancelada { opacity: .6; }
.linha-cancelada td:first-child, .linha-cancelada .selo { text-decoration: line-through; }
.sit-sem-carteira { --cor-situacao: var(--aviso); }

/* ---------- RH: horas, controle de funcionários, férias e arquivos ---------- */
.btn-pequeno { height: 30px; padding: 0 14px; font-size: 12.5px; }
/* Banco de horas: o lançamento pode ser a mais (+) ou a menos (−) */
.campo-com-sinal { display: flex; gap: 8px; }
.campo-com-sinal select { width: auto; flex: 0 0 120px; margin: 0; }
.campo-com-sinal input { flex: 1; margin: 0; }
.horas-negativas { color: var(--perigo); }
.ranque-barra span.negativa { background: linear-gradient(90deg, var(--perigo), #e57373); }
.escondido { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cabecalho-tabela .grafico-resumo {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; white-space: normal; text-align: right;
}
.alerta-registro { border-left: 3px solid var(--aviso); }
.chips-pessoas {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; max-height: 108px; overflow-y: auto;
  padding-right: 4px;
}
.chips-pessoas .chip { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
/* Nome do funcionário nas tabelas do RH: largura fixa, o que não cabe vira "…" (o nome inteiro fica na dica) */
.celula-pessoa { max-width: 230px; }
.celula-pessoa strong, .celula-pessoa .secundario {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.celula-saldo { min-width: 150px; }
.celula-saldo .barra-progresso { margin: 4px 0 2px; }
.celula-saldo strong { font-family: var(--fonte-titulo); font-size: 15px; color: var(--azul-titulo); }
.celula-saldo strong.valor-zerado { color: var(--texto-suave); }
.lista-arquivos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.lista-arquivos li {
  display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: var(--raio);
  border-bottom: 1px solid color-mix(in srgb, var(--borda), white 40%);
}
.lista-arquivos li:last-child { border-bottom: 0; }
.lista-arquivos li:hover { background: var(--fundo); }
.lista-arquivos svg { width: 22px; height: 22px; color: var(--azul); flex: 0 0 22px; }
.lista-arquivos div { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lista-arquivos a { color: var(--azul-titulo); text-decoration: none; }
.lista-arquivos a:hover { text-decoration: underline; }
.lista-arquivos .vazio { display: block; padding: 14px 8px; }
.marca-conferido { color: var(--sucesso); font-weight: 600; }
.linha-conferida { background: color-mix(in srgb, var(--sucesso-claro), white 55%); }
.linha-conferida .celula-marca { box-shadow: inset 3px 0 0 var(--verde); }

/* Mini calendário do período (abre ancorado no botão) */
.painel-periodo {
  position: absolute; z-index: 60; display: flex; gap: 0; background: var(--superficie);
  border: 1px solid var(--borda); border-radius: var(--raio-cartao); box-shadow: 0 12px 32px rgba(15, 35, 70, .18);
  overflow: hidden;
}
.periodo-atalhos {
  display: flex; flex-direction: column; gap: 2px; padding: 10px; background: var(--fundo);
  border-right: 1px solid var(--borda); min-width: 140px;
}
.periodo-atalhos .btn-link { text-align: left; padding: 6px 8px; border-radius: var(--raio); font-size: 13px; }
.periodo-atalhos .btn-link:hover { background: var(--azul-claro); }
.periodo-calendario { padding: 10px 12px 12px; }
.periodo-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.periodo-topo strong { font-family: var(--fonte-titulo); font-size: 14px; color: var(--azul-titulo); }
.periodo-semana, .periodo-dias { display: grid; grid-template-columns: repeat(7, 34px); gap: 2px; }
.periodo-semana span {
  text-align: center; font-size: 11px; text-transform: uppercase; color: var(--texto-suave); padding-bottom: 4px;
}
.periodo-dias button {
  height: 32px; border: 0; background: none; border-radius: var(--raio); cursor: pointer; font: inherit;
  font-size: 13px; color: var(--texto); font-variant-numeric: tabular-nums;
}
.periodo-dias button:hover { background: var(--azul-claro); color: var(--azul); }
.periodo-dias button.fora { color: var(--texto-suave); opacity: .5; }
.periodo-dias button.hoje { font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--borda); }
.periodo-dias button.dentro { background: var(--azul-claro); color: var(--azul); border-radius: 0; }
.periodo-dias button.inicio, .periodo-dias button.fim {
  background: var(--azul); color: #fff; font-weight: 700;
}
.periodo-dias button.inicio { border-radius: var(--raio) 0 0 var(--raio); }
.periodo-dias button.fim { border-radius: 0 var(--raio) var(--raio) 0; }
.periodo-dias button.inicio.fim { border-radius: var(--raio); }
.periodo-rodape {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--borda);
}
.periodo-rodape .btn { height: 30px; padding: 0 14px; font-size: 13px; }

.cartoes-resumo {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 16px;
}
.cartao-resumo {
  padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 4px; margin: 0;
  border-top: 3px solid var(--cor-cartao, var(--azul));
}
.rotulo-cartao {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--cor-cartao, var(--azul));
}
.cartao-recebido { --cor-cartao: var(--verde-escuro, var(--verde)); }
.cartao-receber { --cor-cartao: var(--azul); }
.cartao-caixa { --cor-cartao: var(--azul-marinho); }
.cartao-zerado { --cor-cartao: var(--texto-suave); }
.cartao-zerado .valor-grande { color: var(--texto-suave); }
.cartao-resumo.cartao-largo { grid-column: span 2; }
.valor-grande { font-family: var(--fonte-titulo); font-size: 24px; color: var(--azul-titulo); line-height: 1.1; }
.lista-totais { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.lista-totais li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13px;
  border-bottom: 1px dashed var(--borda); padding-bottom: 3px;
}
.lista-totais li:last-child { border-bottom: 0; }
.lista-totais .dica { margin-left: auto; }
.campo-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--texto-suave); }
.campo-inline input { width: auto; }
td.direita, th.direita { text-align: right; }
@media (max-width: 700px) { .cartao-resumo.cartao-largo { grid-column: span 1; } }

/* ===== Orientação Cirúrgica ==================================================
   Acompanhamento: um QUADRO com uma coluna por fase (as fases são cadastro) e o
   paciente dentro da coluna. Arrastar o cartão ou as setas ‹ › movem de fase.
   Mapa cirúrgico: um bloco por dia + cirurgião, que vira UMA folha A4 deitada. */
/* As fases ficam SEMPRE lado a lado, uma coluna cada (nunca uma embaixo da outra).
   Cada coluna mostra todos os pacientes da fase e rola por dentro; se as colunas não couberem
   na largura, o quadro rola de lado. */
.quadro-fases {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(215px, 1fr);
  gap: 12px; align-items: stretch; overflow-x: auto; padding-bottom: 6px;
}
.coluna-fase {
  background: var(--fundo); border: 1px solid var(--borda); border-radius: var(--raio);
  display: flex; flex-direction: column; min-height: 140px;
}
/* A rolagem é a da PÁGINA: a coluna cresce à vontade e o cabeçalho acompanha, grudado no topo */
.coluna-fase > header { position: sticky; top: 0; z-index: 2; }
.coluna-fase .faltam {
  padding: 0 10px 8px; font-size: 11.5px; color: var(--texto-suave); text-align: center;
}
.coluna-fase .faltam:empty { display: none; }
.coluna-fase > header {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  border-bottom: 2px solid var(--verde); background: #fff; border-radius: var(--raio) var(--raio) 0 0;
}
.coluna-fase > header strong {
  font-family: var(--fonte-titulo); font-size: 12.5px; color: var(--azul-titulo);
  text-transform: uppercase; letter-spacing: .3px; line-height: 1.2;
}
.coluna-fase.encerra > header { border-bottom-color: var(--borda); }
.contador-fase {
  margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
  background: var(--azul-claro); color: var(--azul); font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.coluna-fase.alvo { outline: 2px dashed var(--azul); outline-offset: 2px; background: var(--azul-claro); }
.cartoes-fase { display: flex; flex-direction: column; gap: 8px; padding: 10px; min-height: 60px; flex: 1; }
/* Sem isto o flex ESPREME os cartões até sumirem quando a coluna tem muita gente */
.cartoes-fase > * { flex: 0 0 auto; }

/* "Ver todos": a fase inteira, de página em página (o quadro fica embaixo) */
.lista-fase .cabecalho-tabela .btn-link { margin-left: auto; }
.paginacao { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 12px 0 2px; }
.busca-topo {
  height: 34px; min-width: 240px; padding: 0 14px; border: 1.5px solid var(--borda);
  border-radius: var(--pilula); background: #fff; font: inherit; font-size: 13px;
}
.busca-topo:focus { border-color: var(--azul); outline: none; }
.vazio-coluna { margin: 0; padding: 12px 4px; text-align: center; color: var(--texto-suave); font-size: 12.5px; }

.cartao-paciente-fase {
  background: #fff; border: 1px solid var(--borda); border-radius: 10px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05); cursor: grab;
}
.cartao-paciente-fase.arrastando { opacity: .5; }
.cartao-paciente-fase.marcada { border-left: 4px solid var(--verde); }
.cartao-paciente-fase .corpo-cartao {
  display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 10px 12px;
  border: 0; background: none; font: inherit; text-align: left; cursor: pointer;
}
.cartao-paciente-fase .corpo-cartao:hover { background: var(--azul-claro); }
.cartao-paciente-fase strong { font-size: 13.5px; color: var(--azul-titulo); }
.cartao-paciente-fase .cirurgia-cartao { font-size: 12.5px; font-weight: 600; color: var(--texto); }
.cartao-paciente-fase .obs-cartao {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cartao-paciente-fase .selo { align-self: flex-start; margin-top: 2px; }
.cartao-paciente-fase footer {
  display: flex; align-items: center; gap: 4px; padding: 4px 6px; border-top: 1px solid var(--borda);
  background: var(--fundo);
}
.cartao-paciente-fase footer .btn-link { font-size: 11.5px; padding: 2px 6px; }
.cartao-paciente-fase footer .btn-link.seta { font-size: 16px; line-height: 1; padding: 0 6px; }
.cartao-paciente-fase footer .btn-link.seta:first-child { margin-right: auto; }
.cartao-paciente-fase footer .btn-link.seta:last-child { margin-left: auto; }
.anotacao-cirurgia { margin: 2px 0 0; font-size: 13.5px; white-space: pre-wrap; }
.linha-tempo-clinica.cirurgia li::before { background: var(--azul-marinho); }
.caixa-linha { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--texto-suave); }
.caixa-linha input { width: auto; }

/* Mapa cirúrgico */
.bloco-mapa { padding: 0; overflow: hidden; }
.cabecalho-mapa {
  display: flex; align-items: center; gap: 28px; padding: 14px 18px; background: var(--azul-claro);
  border-bottom: 2px solid var(--verde);
}
.cabecalho-mapa > div { display: flex; flex-direction: column; gap: 1px; }
.cabecalho-mapa strong { font-size: 16px; color: var(--azul-titulo); font-family: Montserrat, sans-serif; }
.cabecalho-mapa .dica { margin-left: auto; }
.mapa-cirurgico td.observacao, .mapa-cirurgico td.lio { white-space: normal; }
.mapa-cirurgico td.olho { font-weight: 700; text-align: center; }

/* Na folha impressa (A4 deitada) o mapa ocupa a largura toda e a letra encolhe um pouco */
.folha-mapa { display: flex; flex-direction: column; gap: 10px; }
.folha-mapa .cabecalho-mapa.impresso { background: none; padding: 0 0 8px; gap: 40px; }
.folha-mapa table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 11px; }
.folha-mapa th, .folha-mapa td {
  border: 1px solid #99a; padding: 4px 6px; text-align: left; vertical-align: top; word-wrap: break-word;
}
.folha-mapa th { background: #eef3fb; font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px; }
.folha-mapa .secundario { display: block; font-size: 10px; color: #555; }
.cirurgias-historico { margin: 8px 0; padding: 8px 10px; border-left: 3px solid var(--verde); background: var(--fundo); border-radius: 6px; }
.cirurgias-historico .linha-cirurgia { display: flex; flex-direction: column; gap: 1px; margin: 4px 0 0; }
.tabela-densa tr.destacada > td { background: var(--azul-claro); }

/* Selo do agendamento que veio da Orientação Cirúrgica (é um agendamento normal, só marcado) */
.selo-cirurgia { background: var(--verde-claro, #eaf5d5); color: #4a7a08; font-size: 10.5px; }

/* Escala Médica: os blocos da agenda (hora + quantos pacientes em cada um) */
.lista-blocos { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; padding-right: 4px; }
.linha-bloco { display: grid; grid-template-columns: 34px 1fr 90px auto; gap: 8px; align-items: center; }
.linha-bloco .numero-bloco { font-size: 12px; color: var(--texto-suave); font-weight: 700; }
.linha-bloco input { width: 100%; }

/* ===== Chamados (pedidos do dia a dia) ======================================
   Todo mundo abre pelo Início; quem tem a aba responde. */
.cartoes-chamados { margin-bottom: 14px; }
.cartao-chamado {
  border: 1px solid var(--borda); cursor: pointer; text-align: left; font: inherit;
  display: flex; flex-direction: column; gap: 2px;
}
.cartao-chamado:hover { border-color: var(--azul); }
.cartao-chamado.escolhido { border-color: var(--azul); box-shadow: 0 0 0 2px var(--azul-claro); }
.cartao-chamado.aberto .valor-grande { color: var(--aviso); }
.cartao-chamado.em_andamento .valor-grande { color: var(--azul); }
.cartao-chamado.concluido .valor-grande { color: var(--verde-escuro, #4a7a08); }
.cartao-chamado.negado .valor-grande { color: var(--texto-suave); }

.lista-chamados { display: flex; flex-direction: column; gap: 12px; }
.cartao-chamado-linha { padding: 14px 18px; border-left: 4px solid var(--borda); }
.cartao-chamado-linha.sit-aberto { border-left-color: var(--aviso); }
.cartao-chamado-linha.sit-recebido { border-left-color: var(--azul); }
.cartao-chamado-linha.sit-em_andamento { border-left-color: var(--azul-marinho); }
.cartao-chamado-linha.sit-concluido { border-left-color: var(--verde); }
.cartao-chamado-linha.sit-negado { border-left-color: #b9c2cf; }
.cartao-chamado-linha.urgente { background: #fff8f3; }
.cartao-chamado-linha > header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cartao-chamado-linha .tipo-chamado {
  font-family: var(--fonte-titulo); font-weight: 800; font-size: 13px; color: var(--azul-titulo);
}
.cartao-chamado-linha .quando { margin-left: auto; }
.texto-chamado { margin: 8px 0 0; font-size: 14px; white-space: pre-wrap; }
.resposta-chamado {
  margin: 8px 0 0; padding: 8px 12px; background: var(--fundo); border-radius: 8px; font-size: 13.5px;
}
.resposta-chamado .dica { display: block; }
.cartao-chamado-linha > footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }

/* Selos das situações */
.selo.chamado-aberto { background: var(--aviso-claro); color: var(--aviso); }
.selo.chamado-recebido { background: var(--azul-claro); color: var(--azul); }
.selo.chamado-em_andamento { background: #e6ecff; color: var(--azul-marinho); }
.selo.chamado-concluido { background: #eaf5d5; color: #4a7a08; }
.selo.chamado-negado { background: #eef1f5; color: #61708a; }

/* Bloco "Meus chamados" no Início */
.bloco-meus-chamados { margin-bottom: 22px; }
.bloco-meus-chamados .cabecalho-tabela .btn { margin-left: auto; }
.lista-meus-chamados { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lista-meus-chamados li {
  display: flex; align-items: flex-start; gap: 12px; padding: 10px 14px; border: 1px solid var(--borda);
  border-radius: 10px; background: var(--fundo); border-left: 4px solid var(--borda);
}
.lista-meus-chamados li.sit-aberto { border-left-color: var(--aviso); }
.lista-meus-chamados li.sit-recebido, .lista-meus-chamados li.sit-em_andamento { border-left-color: var(--azul); }
.lista-meus-chamados li.sit-concluido { border-left-color: var(--verde); }
.lista-meus-chamados li.sit-negado { border-left-color: #b9c2cf; }
.lista-meus-chamados li > div { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.lista-meus-chamados .texto-chamado { margin: 2px 0 0; font-size: 13.5px; color: var(--texto-suave); }
.lista-meus-chamados .resposta { color: var(--texto); }
/* "Acompanhar": o botao nao pode esticar na coluna do texto */
.lista-meus-chamados .btn-link { align-self: flex-start; margin-top: 4px; }

/* Início: cabeçalho com a data de um lado e o acesso do outro */
.boas-vindas { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.boas-vindas-texto { flex: 1; min-width: 220px; }
.boas-vindas-quem {
  position: relative; z-index: 1; display: flex; flex-direction: column; gap: 2px; text-align: right;
  color: #fff; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 12px; padding: 10px 16px; backdrop-filter: blur(2px);
}
.boas-vindas-quem .rotulo-cartao { color: rgba(255, 255, 255, .75); }
.boas-vindas-quem strong { font-family: var(--fonte-titulo); font-size: 15px; }
.boas-vindas-quem span:last-child { font-size: 12.5px; color: rgba(255, 255, 255, .85); }

/* ===== Ficha do convênio (Configurações > Convênios > abrir) ================== */
/* A logo da guia: quadrado fixo, a imagem cabe inteira dentro (nunca corta a logo) */
.foto-convenio {
  width: 72px; height: 72px; flex: 0 0 auto; object-fit: contain; background: var(--fundo);
  border: 1px solid var(--borda); border-radius: var(--raio); padding: 6px; cursor: pointer;
}
.foto-convenio.sem-foto {
  display: flex; align-items: center; justify-content: center; color: var(--texto-suave);
  font-size: 12px; border-style: dashed;
}
/* Os blocos da ficha: o .painel só dá fundo e borda, o espaço por dentro é daqui.
   Sem isto o conteúdo encosta na borda e um bloco gruda no outro. */
.bloco-ficha { padding: 18px 20px; }
.bloco-ficha + .bloco-ficha { margin-top: 16px; }
.bloco-ficha .cabecalho-tabela { margin-bottom: 14px; }
.bloco-ficha .tabela-rolagem table { margin-bottom: 0; }

/* O bloco da guia: a logo e o lembrete de como ela é feita */
.grade-guia { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
.dado-guia { display: flex; flex-direction: column; gap: 6px; }
.dado-guia.crescer { flex: 1 1 260px; min-width: 0; }
.dado-guia strong { font-size: 15px; }
.texto-guia { margin: 0; font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }
.codigo-procedimento { width: 100%; max-width: 180px; }

/* Rotulo de "Enviar arquivo" enquanto um arquivo esta subindo: um por vez */
.btn.desabilitado { pointer-events: none; opacity: .6; }
/* Os periodos aquisitivos de uma pessoa, na ordem, dentro da linha dela */
.periodos-previa { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.periodos-previa li { font-size: 13px; }
.periodos-previa .selo { margin-left: 6px; }
/* ===== Repasse > Cirurgias: montar o pagamento a partir do mapa ================ */
/* UM CARTAO POR CIRURGIA, nao uma tabela larga: com 8 colunas, "Comissao" e "Saldo" ficavam
   fora da vista e ninguem achava o campo. Aqui os quatro valores ficam numa grade que quebra
   na largura que tiver - nada escondido e sem rolagem para os lados. */
.lista-cirurgias { display: flex; flex-direction: column; gap: 12px; max-height: 52vh; overflow-y: auto; }
.cartao-cirurgia {
  border: 1px solid var(--borda); border-left: 4px solid var(--borda); border-radius: var(--raio);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; background: var(--superficie);
}
.cartao-cirurgia.marcada { border-left-color: var(--azul); background: color-mix(in srgb, var(--azul-claro), white 62%); }
.cartao-cirurgia.inativo { opacity: .55; }
.cartao-cirurgia > header { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.cartao-cirurgia > header .caixa-linha { flex: 1 1 260px; border: 0; background: none; padding: 0; align-items: flex-start; }
.cartao-cirurgia > header .caixa-linha > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.saldo-cirurgia { margin-left: auto; text-align: right; display: flex; flex-direction: column; gap: 1px; }
.saldo-cirurgia strong { font-size: 16px; color: var(--azul-titulo); }
.valores-lancados { display: flex; flex-direction: column; gap: 2px; }
.valores-lancados .item-valor { border: 0; background: none; padding: 2px 0; font-size: 13px; }
/* Os quatro valores: quebram em 2 ou 1 coluna conforme a largura, nunca somem para o lado */
.grade-repasse { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 10px 14px; }
.grade-repasse .campo { gap: 4px; }
.grade-repasse label { font-size: 12px; }
.dupla-repasse { display: flex; gap: 6px; }
.dupla-repasse > :first-child { flex: 1 1 auto; min-width: 0; }
.valor-repasse { width: 100%; text-align: right; }
.dupla-repasse .valor-repasse { width: 92px; flex: none; }

/* As ferias ja marcadas de uma pessoa, cada uma com o X para tirar ali mesmo */
.ferias-marcadas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ferias-marcadas li { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.ferias-marcadas .btn-link { padding: 0 4px; font-size: 13px; line-height: 1; }
.periodos-previa .secundario { white-space: normal; }
/* Os dois quadros de "onde e com quem atende" */
.cartao-lista {
  border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.cartao-lista-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ficha-convenio-topo { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ficha-convenio-dados { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 6px; }
.ficha-convenio-dados h2 { margin: 0; font-family: var(--fonte-titulo); font-size: 20px; color: var(--azul-titulo); }
.ficha-convenio-dados .dica { margin: 0; }
.selos-convenio { display: flex; gap: 6px; flex-wrap: wrap; }
.valor-procedimento { width: 110px; text-align: right; }
/* Busca dentro do cabecalho da tabela: nao pode tomar a linha inteira e empurrar o botao */
.cabecalho-tabela .busca { flex: 1 1 180px; max-width: 320px; min-width: 150px; }
/* Lista de caixinhas das janelas (médicos, unidades): rola dentro da janela, nao da pagina */
.lista-escolha { display: flex; flex-direction: column; gap: 4px; max-height: 50vh; overflow-y: auto; }

/* ===== Comissões (sub-aba do Financeiro) ===================================== */
.tabela-densa tr.sem-comissao td { color: var(--texto-suave); }
.tabela-densa tr.linha-total td {
  background: var(--azul-claro); border-top: 2px solid var(--azul); color: var(--azul-titulo);
}
.tabela-densa tr.inativo td { opacity: .6; }
h4.secao-modal { margin: 18px 0 8px; font-family: var(--fonte-titulo); font-size: 13px; color: var(--azul-titulo); }
h4.secao-modal .dica { font-family: var(--fonte); font-weight: 400; }

/* Cabeçalho da planilha aberta: nome, números grandes e as ações */
.painel-comissao { padding-top: 0; }
.cabecalho-comissao {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin: 0 -18px 4px; padding: 14px 18px;
  background: var(--fundo); border-bottom: 2px solid var(--verde); border-radius: var(--raio-cartao) var(--raio-cartao) 0 0;
}
.cabecalho-comissao h3 { margin: 2px 0; }
.numeros-comissao { display: flex; gap: 22px; margin-left: auto; }
.numeros-comissao > div { display: flex; flex-direction: column; gap: 1px; text-align: right; }
.numeros-comissao strong { font-family: var(--fonte-titulo); font-size: 18px; color: var(--azul-titulo); }
.numeros-comissao .destaque strong { color: var(--verde-escuro, #4a7a08); font-size: 22px; }
.acoes-comissao { display: inline-flex; align-items: center; gap: 10px; }

/* A tabela em si: números alinhados, zebra leve e barrinha de proporção */
.tabela-comissao td.numero, .tabela-comissao th.direita { font-variant-numeric: tabular-nums; }
.tabela-comissao td.valor { font-weight: 600; color: var(--azul-titulo); }
.tabela-comissao tbody tr:nth-child(even) > td { background: color-mix(in srgb, var(--fundo) 55%, #fff); }
.tabela-comissao tbody tr:hover > td { background: var(--azul-claro); }
.tabela-comissao tbody tr.destacada > td { background: var(--azul-claro); }
.tabela-comissao tbody tr.linha-total:hover > td { background: var(--azul-claro); }
.barra-comissao {
  display: block; height: 5px; margin-top: 4px; border-radius: 3px; background: var(--borda); overflow: hidden;
  max-width: 260px;
}
.barra-comissao i { display: block; height: 100%; background: var(--verde); }

/* O quadro: uma coluna por médico, uma linha por quem agendou */
.quadro-comissao { font-size: 13px; }
.quadro-comissao th.coluna-faixa {
  text-align: right; vertical-align: bottom; padding: 8px; line-height: 1.25; max-width: 190px;
}
.quadro-comissao th.coluna-faixa span { display: block; font-size: 14px; color: var(--azul-titulo); }
.quadro-comissao th.coluna-faixa small {
  display: block; font-weight: 400; font-size: 10.5px; color: var(--texto-suave); text-transform: none;
  white-space: normal;
}
.quadro-comissao td.coluna-pessoa, .quadro-comissao th.coluna-pessoa {
  position: sticky; left: 0; background: #fff; z-index: 1; min-width: 210px;
}
.quadro-comissao tbody tr:nth-child(even) > td.coluna-pessoa { background: color-mix(in srgb, var(--fundo) 55%, #fff); }
.quadro-comissao tr.linha-total > td.coluna-pessoa { background: var(--azul-claro); }
.quadro-comissao td.zero { color: var(--borda); }
.quadro-comissao td, .quadro-comissao th { padding-left: 8px; padding-right: 8px; }
.bloco-erros { display: block; }
.bloco-erros table { margin-top: 10px; background: #fff; border-radius: 8px; }

/* Folha impressa: o quadro inteiro numa página (colunas estreitas, letra menor) */
.quadro-folha { font-size: 10px; }
.quadro-folha th, .quadro-folha td { padding: 3px 4px; }
.quadro-folha th { text-align: center; vertical-align: bottom; line-height: 1.15; }
.quadro-folha th span { display: block; font-size: 9.5px; }
.quadro-folha th small { display: block; font-weight: 400; font-size: 8px; text-transform: none; }
.quadro-folha td.esquerda, .quadro-folha th.esquerda { text-align: left; }
.quadro-folha td.centro { text-align: center; font-variant-numeric: tabular-nums; }

/* Folha impressa (A4 deitada) */
.folha-comissao { display: flex; flex-direction: column; gap: 12px; }
.cabecalho-folha { display: flex; gap: 36px; padding-bottom: 8px; border-bottom: 2px solid #99a; }
.cabecalho-folha > div { display: flex; flex-direction: column; gap: 1px; }
.cabecalho-folha span { font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; color: #667; }
.cabecalho-folha strong { font-family: var(--fonte-titulo); font-size: 14px; color: #123; }
/* Linha de resumo no topo da folha (tabela de pagamento do repasse) */
.cabecalho-folha-linha { margin: 0 0 10px; font-size: 12px; color: #123; }
.tabela-folha { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 11.5px; }
.tabela-folha th, .tabela-folha td {
  border: 1px solid #99a; padding: 5px 7px; text-align: left; vertical-align: top; word-wrap: break-word;
}
.tabela-folha th {
  background: #eef3fb; font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px;
}
.tabela-folha td.direita { text-align: right; font-variant-numeric: tabular-nums; }
.tabela-folha td.centro { text-align: center; }
.tabela-folha tr.total td { background: #eef3fb; font-weight: 700; }

/* ===== Segundo fator (Minha conta) ==========================================
   A chave fica em fonte de largura fixa e QUEBRA A LINHA: são 32 caracteres e,
   no celular, sem quebrar ela furaria a janela. */
.segundo-fator { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.passos-2fa { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 8px; font-size: 13px; color: var(--texto); }
.passos-2fa strong { color: var(--azul-titulo); }
.chave-2fa {
  display: inline-block; margin-top: 4px; padding: 6px 10px; border-radius: 8px;
  background: var(--azul-claro); border: 1px solid var(--borda);
  font-family: ui-monospace, Consolas, monospace; font-size: 13px; letter-spacing: 1px;
  /* quebra nos espaços primeiro, para os grupos de 4 não partirem no meio; o endereço do QR,
     que não tem espaço, ainda quebra onde couber */
  overflow-wrap: anywhere; max-width: 100%; user-select: all;
}

/* ===== Tabela que vira cartão no celular ====================================
   Tabela de poucas colunas mas com texto (a lista dos backups) não cabe numa tela
   de 375px: o mínimo dela é maior que a tela e nasce a barra de rolagem lateral, que
   o dono não quer em lugar nenhum. Aqui, abaixo de 620px, cada LINHA vira um bloco e
   cada célula ganha o nome da coluna na frente (vem do data-coluna do <td>).
   Nada é escondido — só muda de forma. */
@media (max-width: 620px) {
  .tabela-cartoes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabela-cartoes table, .tabela-cartoes tbody, .tabela-cartoes tr, .tabela-cartoes td { display: block; width: auto; }
  .tabela-cartoes tr { border-bottom: 1px solid var(--borda); padding: 10px 0; }
  .tabela-cartoes tr:last-child { border-bottom: 0; }
  .tabela-cartoes td { border: 0; padding: 3px 0; display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
  /* o texto de apoio desce para a própria linha, alinhado com o valor de cima */
  .tabela-cartoes td .secundario { flex: 0 0 calc(100% - 104px); margin-left: 104px; }
  .tabela-cartoes td::before {
    content: attr(data-coluna); flex: 0 0 96px; font-family: var(--fonte-titulo); font-size: 10px;
    text-transform: uppercase; letter-spacing: .06em; color: var(--azul-marinho); font-weight: 800;
  }
  .tabela-cartoes td:empty, .tabela-cartoes td[data-coluna=""]::before { display: none; }
  .tabela-cartoes td.vazio { display: block; }
  .tabela-cartoes td.vazio::before { display: none; }
}

/* ===== "Sou eu" na Escala de Funcionários ===================================
   Numa grade com 57 pessoas, achar a própria linha é o que mais se faz. O realce
   fica no NOME e numa barra à esquerda — e NÃO no fundo das células dos dias, que
   já tem três camadas disputando espaço (mouse, hoje, marca da célula). */
.linha-pessoa.sou-eu > .col-nome {
  color: var(--azul-titulo); font-weight: 700;
  box-shadow: inset 3px 0 0 var(--verde);
}
.linha-pessoa.sou-eu > .col-nome::after {
  content: "você"; display: inline-block; margin-left: 6px; padding: 1px 6px;
  border-radius: var(--pilula); background: var(--verde-claro); color: var(--sucesso);
  font-family: var(--fonte-texto); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; vertical-align: middle;
}
@media print { .linha-pessoa.sou-eu > .col-nome::after { display: none; } }
/* O mesmo destaque na visão POR DIA do Início, que é a que abre primeiro */
.lista-turnos li.sou-eu .nome { color: var(--azul-titulo); font-weight: 700; }
.lista-turnos li.sou-eu .nome::after {
  content: "você"; display: inline-block; margin-left: 6px; padding: 1px 6px;
  border-radius: var(--pilula); background: var(--verde-claro); color: var(--sucesso);
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  vertical-align: middle;
}

/* A ANOTAÇÃO aparece no cartão, como a resposta. Quem pediu não deve precisar abrir a linha do
   tempo para descobrir que já responderam alguma coisa. Cor diferente da resposta: anotação é
   andamento ("o técnico vem amanhã"), resposta é o fecho. */
.anotacao-chamado {
  margin: 8px 0 0; padding: 8px 12px; border-radius: var(--raio);
  background: var(--aviso-claro); border-left: 3px solid var(--aviso); font-size: 13px;
}
.anotacao-chamado strong { color: var(--aviso); }
.anotacao-chamado .dica { display: block; margin-top: 2px; }
.lista-meus-chamados .dica.anotacao { color: var(--aviso); }

/* ===== Anexos do chamado ====================================================
   A foto do problema. Miniatura para imagem (é o que se quer ver de relance) e
   botão com o nome para o resto. */
.anexos-chamado { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.anexo-foto {
  display: block; width: 86px; height: 86px; border-radius: var(--raio);
  overflow: hidden; border: 1px solid var(--borda); background: var(--fundo);
}
.anexo-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.anexo-foto:hover { border-color: var(--azul); }
.anexo-arquivo { padding: 6px 12px; font-size: 13px; gap: 6px; }
.selo-anexos { font-size: 11px; }