/* Hub Financeiro · identidade visual
   Neutros profundos, cor principal (azul-escuro) e um destaque quente (laranja) usado com moderação.
   As duas cores base vêm de "tema" em config/sistemas.json ou da engrenagem; os demais tons são calculados a partir delas. */
:root {
  --cor-principal: #0f2a5c;
  --cor-destaque: #f07c1b;

  /* Neutros */
  --fundo: color-mix(in srgb, var(--cor-principal) 4%, #f6f6f3);
  --superficie: #ffffff;
  --superficie-2: color-mix(in srgb, var(--cor-principal) 3%, #f9f9f7);
  --superficie-3: color-mix(in srgb, var(--cor-principal) 6%, #f3f3f0);
  --borda: color-mix(in srgb, var(--cor-principal) 9%, transparent);
  --borda-forte: color-mix(in srgb, var(--cor-principal) 20%, transparent);
  --texto: color-mix(in srgb, var(--cor-principal) 55%, #0b0d12);
  --texto-2: color-mix(in srgb, var(--cor-principal) 40%, #6b6f78);
  --texto-3: color-mix(in srgb, var(--cor-principal) 22%, #73777f); /* 4,5:1 ou mais sobre os fundos claros */

  /* Cor principal */
  --marinho: var(--cor-principal);
  --marinho-claro: color-mix(in srgb, var(--cor-principal) 82%, #ffffff);
  --marinho-escuro: color-mix(in srgb, var(--cor-principal) 72%, #000000);
  --sobre-marinho: #ffffff;
  --destaque: var(--cor-principal);
  --destaque-fundo: color-mix(in srgb, var(--cor-principal) 8%, #ffffff);
  --destaque-texto: var(--cor-principal);

  /* Cor de destaque */
  --laranja: var(--cor-destaque);
  --laranja-suave: color-mix(in srgb, var(--cor-destaque) 22%, transparent);
  --laranja-fundo: color-mix(in srgb, var(--cor-destaque) 10%, #ffffff);
  --laranja-texto: color-mix(in srgb, var(--cor-destaque) 68%, #1a0d00);

  /* Paciente inicial no caixa (azul claro, pedido do usuário) */
  --inicial: #4aa3df;
  --inicial-fundo: #e3f2fc;
  --inicial-texto: #1c6aa3;

  /* Estados */
  --verde-fundo: #e8f3ec;
  --verde-texto: #1f6a45;
  --verde-borda: #c9e4d3;
  --vermelho-fundo: #fbeceb;
  --vermelho-texto: #a33a36;
  --vermelho-borda: #f1cfcc;
  --amarelo-fundo: #fdf3d7;
  --amarelo-texto: #7a5a00;
  --amarelo-borda: #f0dc9c;
  /* Cores cheias de estado (bolinhas, faixas, cartões em destaque) e o texto que vai em cima delas */
  --verde: #3fa46a;
  --vermelho: #c0392b;
  --amarelo: #d9a400;
  --azul: #1e6fd9;
  --sobre-cor: #ffffff;
  --sobre-cor-2: rgba(255, 255, 255, 0.78);

  /* Profundidade */
  --sombra: 0 1px 1px color-mix(in srgb, var(--cor-principal) 4%, transparent),
            0 2px 6px color-mix(in srgb, var(--cor-principal) 4%, transparent),
            0 12px 28px -12px color-mix(in srgb, var(--cor-principal) 12%, transparent);
  --sombra-flutuante: 0 2px 4px color-mix(in srgb, var(--cor-principal) 6%, transparent),
                      0 18px 44px -10px color-mix(in srgb, var(--cor-principal) 28%, transparent);
  /* Anel de foco bem visível (teclado): uma volta da cor do fundo e outra laranja */
  --anel-foco: 0 0 0 2px var(--superficie), 0 0 0 4px color-mix(in srgb, var(--cor-destaque) 85%, #1a0d00);
  --perigo: #b3261e; /* fundo dos botões de excluir: texto branco legível nos dois temas */

  /* Forma e movimento */
  --raio: 10px;
  --raio-card: 18px;
  --suave: cubic-bezier(0.22, 1, 0.36, 1);
  --fonte: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --fonte-titulo: "Segoe UI Variable Display", "Segoe UI Semibold", "Segoe UI", system-ui, sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: color-mix(in srgb, var(--cor-principal) 28%, #07090d);
    --superficie: color-mix(in srgb, var(--cor-principal) 30%, #0e1117);
    --superficie-2: color-mix(in srgb, var(--cor-principal) 36%, #121620);
    --superficie-3: color-mix(in srgb, var(--cor-principal) 44%, #161b26);
    --borda: rgba(255, 255, 255, 0.07);
    --borda-forte: rgba(255, 255, 255, 0.16);
    --texto: #eceef2;
    --texto-2: color-mix(in srgb, var(--cor-principal) 18%, #b3b8c2);
    --texto-3: color-mix(in srgb, var(--cor-principal) 18%, #9aa0ab);
    --marinho: color-mix(in srgb, var(--cor-principal) 78%, #05070b);
    --marinho-claro: color-mix(in srgb, var(--cor-principal) 70%, #5a6680);
    --marinho-escuro: color-mix(in srgb, var(--cor-principal) 50%, #000000);
    --destaque: color-mix(in srgb, var(--cor-principal) 35%, #ffffff);
    --destaque-fundo: color-mix(in srgb, var(--cor-principal) 70%, #2c3445);
    --destaque-texto: color-mix(in srgb, var(--cor-principal) 18%, #ffffff);
    --laranja: color-mix(in srgb, var(--cor-destaque) 88%, #ffffff);
    --laranja-suave: color-mix(in srgb, var(--cor-destaque) 30%, transparent);
    --laranja-fundo: color-mix(in srgb, var(--cor-destaque) 18%, #0e1117);
    --laranja-texto: color-mix(in srgb, var(--cor-destaque) 50%, #ffffff);
    --inicial: #6fb9ea;
    --inicial-fundo: #14283a;
    --inicial-texto: #a9d6f5;
    --verde-fundo: #13291e;
    --verde-texto: #8fd3ad;
    --verde-borda: #1f4431;
    --vermelho-fundo: #2e1515;
    --vermelho-texto: #f1a7a2;
    --vermelho-borda: #4d2321;
    --amarelo-fundo: #2e2610;
    --amarelo-texto: #f0d47a;
    --amarelo-borda: #4d3f12;
    --sombra: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 10px 28px -14px rgba(0, 0, 0, 0.7);
    --sombra-flutuante: 0 24px 60px -12px rgba(0, 0, 0, 0.75);
  }
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  padding: 16px;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* O brilho do fundo fica numa camada fixa própria: com background-attachment: fixed o navegador redesenhava a página
   inteira a cada rolagem (travava em computador mais fraco). */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1200px 600px at 100% -10%, color-mix(in srgb, var(--cor-destaque) 5%, transparent), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, color-mix(in srgb, var(--cor-principal) 6%, transparent), transparent 60%);
}

::selection { background: var(--laranja-suave); }

button, input, select { font: inherit; color: inherit; }

input {
  height: 34px;
  padding: 0 10px;
  border-radius: var(--raio);
  border: 1px solid var(--borda);
  background: var(--superficie-2);
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}
input::placeholder { color: var(--texto-3); }
input:hover { border-color: var(--borda-forte); }
input:focus { border-color: var(--laranja); box-shadow: var(--anel-foco); background: var(--superficie); }

/* Botões do hub (use estes antes de criar um estilo novo):
   button = padrão · .botao-principal = a ação principal da tela/janela · .botao-perigo = excluir/apagar ·
   .botao-pequeno = ação secundária dentro de cartões e listas · .redondo (+ .pequeno) = só ícone ·
   .remover-x = fechar janela · .botao-link = ação em forma de link · .link-discreto = link no título de um cartão ·
   .pilula = situação que muda ao clicar (pago/pendente).
   Cores: os tokens do :root (--verde, --vermelho, --amarelo, --sobre-cor…), nunca o código da cor direto na regra. */
button {
  cursor: pointer;
  border: 1px solid var(--borda-forte);
  background: var(--superficie);
  border-radius: var(--raio);
  height: 34px;
  padding: 0 10px;
  transition: background 0.18s, border-color 0.18s, box-shadow 0.18s, transform 0.12s, color 0.18s;
}
button:hover { background: var(--superficie-2); border-color: color-mix(in srgb, var(--cor-principal) 30%, transparent); }
button:active { transform: scale(0.97); }
button:focus-visible, select:focus-visible, input[type="checkbox"]:focus-visible { outline: none; box-shadow: var(--anel-foco); }
button:disabled { cursor: not-allowed; opacity: 0.7; }

input[type="checkbox"] { accent-color: var(--laranja); cursor: pointer; }

/* Barras de rolagem discretas nas listas */
.lista-rolagem { scrollbar-width: thin; scrollbar-color: var(--borda-forte) transparent; }

/* ---------- Cartões e rótulos ---------- */
.card {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-card);
  padding: 14px;
  box-shadow: var(--sombra);
}

.rotulo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--texto-2);
}
.rotulo > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.rotulo .ti { color: var(--laranja); }
.rotulo > span:last-child:not(:first-child),
.rotulo-acoes > span:first-child { font-weight: 500; color: var(--texto-3); font-variant-numeric: tabular-nums; }

/* ---------- Barra superior ---------- */
.topo {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 10px 16px;
  border-radius: var(--raio-card);
  background:
    radial-gradient(420px 120px at 12% -40%, rgba(255, 255, 255, 0.12), transparent 70%),
    linear-gradient(135deg, var(--marinho-claro), var(--marinho) 45%, var(--marinho-escuro));
  color: var(--sobre-marinho);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, var(--sombra-flutuante);
}
.topo::after {
  content: "";
  position: absolute; left: 18px; right: 18px; bottom: 0; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--laranja) 30%, var(--laranja) 70%, transparent);
  opacity: 0.55;
  pointer-events: none;
}
.topo h1 { font-family: var(--fonte-titulo); font-size: 16px; font-weight: 600; letter-spacing: 0.01em; margin: 0; color: var(--sobre-marinho); }
.marca {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, color-mix(in srgb, var(--cor-destaque) 80%, #ffffff), var(--cor-destaque));
  color: var(--sobre-cor); font-size: 20px;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12), 0 4px 12px -2px color-mix(in srgb, var(--cor-destaque) 60%, transparent);
}
#busca { margin-left: auto; width: 280px; }
.topo #busca {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--sobre-marinho);
}
.topo #busca::placeholder { color: rgba(255, 255, 255, 0.55); }
.topo #busca:hover { border-color: rgba(255, 255, 255, 0.28); }
.topo #busca:focus { background: rgba(255, 255, 255, 0.13); border-color: var(--laranja); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor-destaque) 28%, transparent); }
.data, .relogio { font-size: 13px; }
.topo .data { color: var(--sobre-cor-2); }
.relogio { font-family: var(--fonte-titulo); font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }
.topo .relogio { color: var(--sobre-marinho); font-weight: 600; }
.topo button { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.22); color: var(--sobre-marinho); }
.topo button:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.36); }

.google-barra { display: flex; align-items: center; gap: 8px; }

/* ---------- Seletor de unidade ---------- */
.unidade-abrir { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border-radius: 999px; font-weight: 600; max-width: 220px; }
.unidade-abrir span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topo .unidade-abrir.sem-unidade { border-color: var(--laranja); }
.unidade-busca { width: 100%; margin-bottom: 12px; }
.unidade-lista { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-height: 55vh; overflow-y: auto; }
.unidade-item { display: flex; align-items: center; gap: 8px; height: auto; padding: 10px 12px; text-align: left; font-size: 13px; font-weight: 500; border-color: var(--borda); }
.unidade-item:hover { border-color: var(--borda-forte); }
.unidade-item.ativa { border: 2px solid var(--laranja); box-shadow: 0 0 0 3px var(--laranja-suave); }
.selo { font-size: 12px; padding: 4px 10px; border-radius: 999px; }
.selo.ok { background: var(--verde-fundo); color: var(--verde-texto); }
.selo.alerta { background: var(--vermelho-fundo); color: var(--vermelho-texto); }
.botao-pequeno { height: 30px; font-size: 12px; }
.redondo { width: 36px; height: 36px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.redondo.pequeno { width: 30px; height: 30px; }
.girando i { animation: girar 0.9s linear infinite; color: var(--laranja); }
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- Estrutura ---------- */
.principal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 14px;
}
.lateral { display: flex; flex-direction: column; gap: 14px; }

.inferior {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  margin-top: 14px;
}
.inferior.quatro { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* ---------- Anel de categorias ---------- */
.anel { position: relative; height: 420px; }
.anel::before {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 330px; height: 300px; margin: -150px 0 0 -165px;
  border-radius: 50%;
  border: 1px dashed var(--borda-forte);
  opacity: 0.7;
  pointer-events: none;
}

/* Ícones de vidro em 3D (27/10/2026, referência mandada pelo Bruno): o desenho vem pronto de src/icones-vidro.js;
   aqui ficam só o tamanho, a sombra que solta o ícone do fundo e o glifo Phosphor dos ícones sem desenho próprio. */
.icone-vidro { position: relative; display: block; flex: none; width: 44px; height: 44px; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.28)); }
.icone-vidro svg { display: block; width: 100%; height: 100%; overflow: visible; }
.icone-vidro i { position: absolute; left: 45.8%; top: 56.2%; transform: translate(-50%, -50%); font-size: 0.42em; color: var(--sobre-cor); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25)); }
.cat .icone-vidro { width: 50px; height: 50px; font-size: 50px; }
.centro .icone-vidro { width: 60px; height: 60px; font-size: 60px; }
.sub-icone .icone-vidro { width: 54px; height: 54px; font-size: 54px; }

.centro {
  position: absolute; left: 50%; top: 50%;
  width: 124px; height: 124px; margin: -62px 0 0 -62px;
  border-radius: 50%; border: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: radial-gradient(circle at 35% 25%, var(--marinho-claro), var(--marinho) 55%, var(--marinho-escuro));
  color: var(--sobre-marinho);
  font-family: var(--fonte-titulo); font-size: 13px; font-weight: 600; text-align: center;
  box-shadow: 0 0 0 7px var(--destaque-fundo), 0 0 0 8px var(--borda), 0 16px 32px -10px color-mix(in srgb, var(--cor-principal) 55%, transparent);
  transition: transform 0.35s var(--suave), box-shadow 0.35s var(--suave);
}
.centro:hover {
  transform: scale(1.05);
  background: radial-gradient(circle at 35% 25%, var(--marinho-claro), var(--marinho) 55%, var(--marinho-escuro));
  border-color: transparent;
  box-shadow: 0 0 0 7px var(--destaque-fundo), 0 0 0 8px var(--laranja-suave), 0 20px 40px -10px color-mix(in srgb, var(--cor-principal) 60%, transparent);
}

.cat {
  position: absolute;
  width: 88px; height: 88px; margin: -44px 0 0 -44px;
  border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: linear-gradient(180deg, var(--superficie), var(--superficie-2));
  border: 1px solid var(--borda);
  color: var(--texto-2); font-size: 12px; font-weight: 500; line-height: 1.15; text-align: center; padding: 0 6px;
  box-shadow: var(--sombra);
  transition: transform 0.35s var(--suave), border-color 0.25s, color 0.25s, box-shadow 0.35s var(--suave);
  animation: surgir 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.cat .icone-vidro { transition: transform 0.35s var(--suave); }
.cat:hover {
  transform: scale(1.1);
  background: linear-gradient(180deg, var(--superficie), var(--superficie-2));
  border-color: color-mix(in srgb, var(--cor-destaque) 45%, transparent);
  color: var(--texto);
  box-shadow: 0 0 0 4px var(--laranja-suave), var(--sombra-flutuante);
}
.cat:hover .icone-vidro { transform: translateY(-2px) scale(1.04); }
.cat.ativa {
  transform: scale(1.14);
  border: 2px solid var(--laranja);
  color: var(--destaque-texto);
  box-shadow: 0 0 0 5px var(--laranja-suave), var(--sombra-flutuante);
}
.cat.ativa .icone-vidro { transform: scale(1.06); }

@keyframes surgir {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; transform: scale(1); }
}

/* ---------- Submenu ---------- */
.submenu-area { border-top: 1px solid var(--borda); padding-top: 12px; }
.submenu { display: flex; flex-wrap: wrap; gap: 12px; min-height: 96px; }

.sub {
  width: 90px; height: auto; padding: 4px 0; border: none; background: transparent;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 500; color: var(--texto-2); text-align: center; line-height: 1.2;
  animation: subir 0.35s var(--suave) both;
}
.sub:hover { background: transparent; color: var(--texto); border-color: transparent; }
.sub:active { transform: none; }
.sub.sem-link { opacity: .5; }
.sub:active .sub-icone { transform: translateY(-2px) scale(0.96); }
.sub-icone {
  display: flex; align-items: center; justify-content: center;
  width: 58px; height: 58px;
  transition: transform 0.3s var(--suave);
}
.sub:hover .sub-icone { transform: translateY(-4px); }
.sub-tipo { color: var(--texto-3); font-size: 11px; font-weight: 400; }

@keyframes subir {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.vazio { color: var(--texto-3); font-size: 13px; }

/* ---------- Conferência do caixa ---------- */
.campo-valor {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 8px; font-size: 13px; color: var(--texto-2);
}
.periodo { display: inline-flex; padding: 2px; border-radius: 999px; background: var(--superficie-2); box-shadow: inset 0 0 0 1px var(--borda); }
.periodo button { height: 22px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; font-size: 11px; font-weight: 600; color: var(--texto-3); }
.periodo button[aria-pressed="true"] { background: var(--cor-principal); color: var(--sobre-cor); }
.campo-valor input { width: 130px; text-align: right; font-variant-numeric: tabular-nums; }
.campo-valor-api { display: inline-flex; align-items: center; gap: 4px; }
.botao-mini { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--texto-3); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.botao-mini:hover { color: var(--texto-2); background: var(--superficie-2); }
.campo-valor-info { margin: -4px 0 8px; font-size: 11px; color: var(--texto-3); text-align: right; }
.campo-valor-info.alerta { color: var(--texto-2); }

.diferenca {
  border-radius: var(--raio); padding: 10px 12px; margin-top: 10px;
  transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}
.diferenca p { margin: 0; }
.diferenca-valor { font-family: var(--fonte-titulo); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.diferenca-texto { font-size: 12px; }
.diferenca .diferenca-texto { font-weight: 500; }
.diferenca.ok { background: var(--superficie-2); color: var(--texto-2); box-shadow: inset 0 0 0 1px var(--borda); }
.diferenca.falta-planilha { background: var(--vermelho-fundo); color: var(--vermelho-texto); box-shadow: inset 0 0 0 1px var(--vermelho-borda); }
.diferenca.falta-eclinicas { background: var(--verde-fundo); color: var(--verde-texto); box-shadow: inset 0 0 0 1px var(--verde-borda); }

/* ---------- Números em destaque ---------- */
.contador { display: flex; align-items: center; justify-content: space-between; }
.contador-numero {
  width: 68px; height: 68px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 25%, var(--marinho-claro), var(--marinho) 60%, var(--marinho-escuro));
  color: var(--sobre-marinho);
  font-family: var(--fonte-titulo); font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 4px var(--destaque-fundo), 0 10px 20px -8px color-mix(in srgb, var(--cor-principal) 55%, transparent);
}
.comparativo-numeros { display: flex; justify-content: space-around; margin-bottom: 8px; }
.comparativo-item { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; color: var(--texto-2); }
.boletos-data { height: auto; padding: 0; border: 0; border-radius: 0; background: none; font: inherit; font-weight: 500; color: var(--texto-3); font-variant-numeric: tabular-nums; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.boletos-data:hover { color: var(--texto-2); }
.boletos-filtro { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin: -4px 0 8px; }
.boletos-filtro[hidden] { display: none; }
.boletos-dia { width: auto; height: 24px; padding: 0 6px; font-size: 11px; }
.boletos-comparar {
  display: block; margin: 8px auto 0; height: 22px; padding: 0 12px;
  border: none; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.01em;
  background: linear-gradient(160deg, var(--marinho-claro), var(--marinho)); color: var(--sobre-marinho);
  box-shadow: 0 3px 8px -3px color-mix(in srgb, var(--cor-principal) 60%, transparent);
  transition: filter 0.15s;
}
.boletos-comparar:hover { filter: brightness(1.12); }
.boletos-comparar:disabled { opacity: 0.6; filter: none; }
.boletos-acoes { display: flex; justify-content: center; gap: 6px; }
.boletos-acoes .boletos-comparar { margin: 8px 0 0; }
.boletos-lista { margin-top: 8px; max-height: 160px; overflow-y: auto; font-size: 12px; }
.boletos-lista-titulo { margin: 6px 0 2px; font-weight: 600; color: var(--texto-2); }
.boletos-lista-nome { margin: 0; padding: 2px 0; color: var(--texto-2); border-bottom: 1px solid var(--borda); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.boletos-lista-nome > span:first-child { flex: 1; min-width: 0; }
.boletos-lista-valor { font-variant-numeric: tabular-nums; color: var(--texto-3); }
.boletos-lista-ja { flex-basis: 100%; font-size: 11px; color: var(--texto-3); }
.texto-ok { color: var(--verde-texto); margin: 0; text-align: center; }
.texto-alerta { color: var(--vermelho-texto); margin: 0; text-align: center; }

/* ---------- Linhas e listas ---------- */
.linha {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; margin-bottom: 8px;
}
.linha:last-child { margin-bottom: 0; }
.linha > .ti { color: var(--texto-3); font-size: 16px; }

.feito { color: var(--texto-3); text-decoration: line-through; text-decoration-color: var(--borda-forte); }

.valor { margin-left: auto; color: var(--texto-2); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.total { border-top: 1px solid var(--borda); padding-top: 8px; margin-top: 8px; font-weight: 600; }
.total .valor { color: var(--texto); font-weight: 600; }
.erro { color: var(--vermelho-texto); font-size: 13px; margin: 4px 0; min-height: 4px; }

.lista-rolagem { max-height: 340px; overflow-y: auto; padding-right: 4px; }
.conta {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--borda);
  font-size: 13px;
  transition: background 0.15s;
}
.conta:hover { background: linear-gradient(90deg, transparent, var(--superficie-2) 12%, var(--superficie-2) 88%, transparent); }
.conta:last-child { border-bottom: none; }
.conta > .ti { font-size: 18px; color: var(--texto-3); }
.conta-texto { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.conta-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.conta-detalhe { font-size: 11px; color: var(--texto-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dia-bolinha {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--marinho-claro), var(--marinho));
  color: var(--sobre-marinho);
  font-family: var(--fonte-titulo); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
  box-shadow: 0 3px 8px -3px color-mix(in srgb, var(--cor-principal) 60%, transparent);
}
.conta.atrasada .dia-bolinha { background: var(--vermelho-fundo); color: var(--vermelho-texto); box-shadow: inset 0 0 0 1px var(--vermelho-borda); }

/* ---------- Pílulas e situações ---------- */
.pilula {
  flex: none; margin-left: auto;
  height: 26px; padding: 0 12px;
  border: none; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.01em;
  transition: filter 0.15s, box-shadow 0.15s, transform 0.12s;
}
.pilula:hover { filter: brightness(0.97); }
.pilula.pago { background: var(--verde-fundo); color: var(--verde-texto); box-shadow: inset 0 0 0 1px var(--verde-borda); }
.pilula.pendente { background: var(--vermelho-fundo); color: var(--vermelho-texto); box-shadow: inset 0 0 0 1px var(--vermelho-borda); }
.pilula:not(.pago):not(.pendente) {
  background: var(--laranja-fundo); color: var(--laranja-texto);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cor-destaque) 25%, transparent);
}
.pilula:not(.pago):not(.pendente):hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cor-destaque) 45%, transparent); }

.situacao {
  flex: none; height: 28px; padding: 0 8px; font-size: 12px; font-weight: 600;
  border-radius: 999px; border: none; cursor: pointer;
  background: var(--superficie-3); color: var(--texto-2);
  box-shadow: inset 0 0 0 1px var(--borda);
  transition: box-shadow 0.15s, filter 0.15s;
}
.situacao:hover { filter: brightness(0.97); }
.situacao option { background: var(--superficie); color: var(--texto); font-weight: 400; }
.situacao-pago { background: var(--verde-fundo); color: var(--verde-texto); box-shadow: inset 0 0 0 1px var(--verde-borda); }
.situacao-pendente, .situacao-verificar { background: var(--vermelho-fundo); color: var(--vermelho-texto); box-shadow: inset 0 0 0 1px var(--vermelho-borda); }
.situacao-impresso { background: var(--destaque-fundo); color: var(--destaque-texto); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cor-principal) 18%, transparent); }

/* ---------- Aviso ---------- */
.aviso {
  position: fixed; left: 50%; bottom: 24px;
  transform: translate(-50%, 20px);
  background: var(--marinho-escuro); color: var(--sobre-marinho);
  padding: 10px 16px; border-radius: var(--raio);
  border-left: 4px solid var(--laranja);
  font-size: 13px; font-weight: 500;
  box-shadow: var(--sombra-flutuante);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s var(--suave), transform 0.35s var(--suave);
  z-index: 40; max-width: min(560px, calc(100vw - 24px)); line-height: 1.4;
}
.aviso.visivel { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; cursor: pointer; }
.aviso.aviso-erro { background: var(--perigo); border-left-color: #ffd7d3; }
/* Confirmação do hub (src/base.js, no lugar da caixa do navegador) */
.confirmar-fundo { z-index: 30; }
.confirmar { width: 420px; }
.confirmar-texto { margin: 0 0 14px; font-size: 14px; line-height: 1.45; }

/* ---------- Painel de cores (engrenagem) ---------- */
.painel-tema {
  position: fixed; top: 76px; right: 24px; z-index: 10;
  width: 300px;
  box-shadow: var(--sombra-flutuante);
  animation: subir 0.25s var(--suave) both;
}
.remover-x { height: 26px; width: 26px; padding: 0; border: none; background: transparent; color: var(--texto-3); border-radius: 50%; }
.remover-x:hover { background: var(--superficie-3); color: var(--texto); }
.campo-cor {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; margin-bottom: 10px;
}
.campo-cor input[type="color"] {
  width: 56px; height: 32px; padding: 3px; cursor: pointer;
  border: 1px solid var(--borda-forte); border-radius: var(--raio); background: var(--superficie);
}
.campo-cor input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.campo-cor input[type="color"]::-webkit-color-swatch { border: none; border-radius: 6px; }
.tema-prontos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.tema-pronto {
  height: auto; padding: 8px; display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 500; text-align: left; border-color: var(--borda);
}
.tema-pronto:hover { border-color: var(--borda-forte); }
.tema-pronto.ativo { border: 2px solid var(--laranja); box-shadow: 0 0 0 3px var(--laranja-suave); }
.amostra { display: flex; flex: none; }
.amostra span { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--superficie); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); }
.amostra span + span { margin-left: -6px; }
.botao-largo { width: 100%; }

/* ---------- Janela de nova conta ---------- */
.rotulo-acoes { display: flex; align-items: center; gap: 10px; }
.rotulo .pilula { height: 24px; font-size: 12px; }
.modal-fundo {
  position: fixed; inset: 0; z-index: 20;
  background: color-mix(in srgb, var(--marinho-escuro) 40%, transparent);
  backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 16px; overflow-y: auto; /* janela mais alta que a tela rola, sem cortar os botões */
}
.modal { width: 520px; max-width: calc(100vw - 32px); margin: auto; box-shadow: var(--sombra-flutuante); animation: subir 0.25s var(--suave) both; }
.modal:focus { outline: none; }
.ajuda { font-size: 12px; color: var(--texto-3); margin: -4px 0 12px; }
.campos-linha { display: flex; gap: 10px; }
.campo { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 500; color: var(--texto-2); margin-bottom: 10px; }
.campo input, .campo select { width: 100%; font-size: 14px; font-weight: 400; color: var(--texto); }
.campo select {
  height: 34px; border-radius: var(--raio); border: 1px solid var(--borda); background: var(--superficie-2); padding: 0 8px;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.campo select:hover { border-color: var(--borda-forte); }
.campo select:focus { outline: none; border-color: var(--laranja); box-shadow: var(--anel-foco); }
.campos-linha .campo:first-child { width: 110px; flex: none; }
.campo-largo { flex: 1; min-width: 0; }
.acoes-modal { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.botao-principal {
  background: linear-gradient(160deg, var(--marinho-claro), var(--marinho));
  color: var(--sobre-marinho);
  border-color: var(--marinho);
  box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--cor-principal) 60%, transparent);
}
.botao-principal:hover { background: linear-gradient(160deg, var(--marinho), var(--marinho-escuro)); border-color: var(--marinho-escuro); }
.botao-principal:disabled { opacity: 0.7; }

/* ---------- Tela do caixa diário ---------- */
body.com-tela { overflow: hidden; }
.tela {
  position: fixed; inset: 0; z-index: 15;
  display: flex; flex-direction: column; gap: 14px;
  padding: 16px;
  background:
    radial-gradient(1200px 600px at 100% -10%, color-mix(in srgb, var(--cor-destaque) 5%, transparent), transparent 60%),
    var(--fundo);
  animation: subir 0.25s var(--suave) both;
}
.tela-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tela-titulo { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.tela-titulo h2 { font-family: var(--fonte-titulo); font-size: 18px; font-weight: 600; margin: 0; }
.campo-dia { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texto-2); }
.tela-topo button .ti { vertical-align: -2px; }

.caixa-totais { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.caixa-tile {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px;
  padding: 10px 14px; box-shadow: var(--sombra);
  display: flex; flex-direction: column; gap: 2px;
}
.caixa-tile span { font-size: 12px; color: var(--texto-2); }
.caixa-tile strong { font-family: var(--fonte-titulo); font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.caixa-tile.destaque { background: linear-gradient(160deg, var(--marinho-claro), var(--marinho)); border-color: transparent; }
.caixa-tile.destaque span { color: var(--sobre-cor-2); }
.caixa-tile.destaque strong { color: var(--sobre-marinho); }
.caixa-tile.conversao-baixa { background: var(--vermelho); border-color: #ef5350; }
.caixa-tile.conversao-baixa span { color: var(--sobre-cor-2); }
.caixa-tile.conversao-baixa strong { color: var(--sobre-cor); }
.caixa-tile.conversao-alta { background: var(--azul); border-color: #4a9bff; box-shadow: 0 0 0 3px color-mix(in srgb, #4a9bff 35%, transparent); }
.caixa-tile.conversao-alta span { color: var(--sobre-cor-2); }
.caixa-tile.conversao-alta strong { color: var(--sobre-cor); }

.caixa-tabela-card { flex: 1; min-height: 0; padding: 0; overflow: hidden; display: flex; }
.caixa-tabela { flex: 1; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--borda-forte) transparent; }
.caixa-tabela > .vazio { padding: 16px; }
.caixa-tabela table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.caixa-tabela th {
  position: sticky; top: 0; z-index: 1;
  background: var(--superficie-2); color: var(--texto-2);
  font-size: 12px; font-weight: 600; text-align: left; white-space: nowrap;
  padding: 10px 12px; border-bottom: 1px solid var(--borda-forte);
}
.caixa-tabela td { padding: 9px 12px; border-bottom: 1px solid var(--borda); white-space: nowrap; }
.caixa-tabela tbody tr { transition: background 0.15s; }
.caixa-tabela tbody tr:hover { background: var(--superficie-2); }
.caixa-tabela .num { text-align: right; font-variant-numeric: tabular-nums; }
.caixa-tabela td.acoes { padding: 4px 8px; text-align: right; }
/* Paciente inicial (STATUS "AGUARDANDO"): destaque só no hub, a planilha não é pintada. */
.caixa-tabela tbody tr.paciente-inicial { background: var(--inicial-fundo); }
.caixa-tabela tbody tr.paciente-inicial td:first-child { box-shadow: inset 4px 0 0 var(--inicial); }
.caixa-tabela tbody tr.paciente-inicial:hover { background: color-mix(in srgb, var(--inicial) 20%, var(--superficie)); }
.caixa-tabela td.acoes .remover-x:hover { background: var(--vermelho-fundo); color: var(--vermelho-texto); }

/* ---------- Formulário de lançamento ---------- */
.modal-largo { width: 880px; max-height: calc(100vh - 48px); overflow-y: auto; scrollbar-width: thin; }
.lanc-campos { display: flex; flex-direction: column; gap: 12px; }
.grupo-lanc { border: 1px solid var(--borda); border-radius: 14px; padding: 10px 14px 4px; margin: 0; }
.grupo-lanc legend { padding: 0 6px; font-size: 12px; font-weight: 600; color: var(--laranja-texto); letter-spacing: 0.02em; }
.grade-lanc { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 12px; }
.grade-lanc .campo-largo { grid-column: span 2; }
.campo input.num { text-align: right; font-variant-numeric: tabular-nums; }
.lanc-calculos {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px;
  padding: 10px 14px; border-radius: 14px; background: var(--destaque-fundo);
}
.lanc-calculos div { display: flex; flex-direction: column; gap: 2px; }
.lanc-calculos span { font-size: 12px; color: var(--texto-2); }
.lanc-calculos strong { font-family: var(--fonte-titulo); font-size: 16px; font-weight: 600; color: var(--destaque-texto); font-variant-numeric: tabular-nums; }

/* Configurações: planilha do mês */
.separador { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--borda); }
.linha-link { display: flex; gap: 8px; }
.linha-link input { flex: 1; min-width: 0; }

/* Respeita quem prefere menos movimento no Windows */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
.conta-detalhe.texto-alerta { text-align: left; }

/* ---------- Atividades do sistema (rodapé, recolhido) ---------- */
.diario-abrir {
  position: fixed; left: 12px; bottom: 12px; z-index: 16;
  height: 26px; padding: 0 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; color: var(--texto-2);
  background: var(--superficie); border: 1px solid var(--borda);
  opacity: 0.85; transition: opacity 0.18s, color 0.18s;
}
.diario-abrir:hover, .diario-abrir[aria-expanded="true"] { opacity: 1; color: var(--texto); }
.diario-abrir .ti { vertical-align: -2px; }
.diario-abrir.com-erro { opacity: 1; color: var(--vermelho-texto); border-color: var(--vermelho-borda); background: var(--vermelho-fundo); }
.diario {
  position: fixed; left: 12px; right: 12px; bottom: 46px; z-index: 16;
  height: min(40vh, 380px); display: flex; flex-direction: column;
  box-shadow: var(--sombra-flutuante);
}
.diario[hidden] { display: none; }
.diario .rotulo > span:first-child { gap: 10px; }
.diario-lista { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; font-size: 12px; }
.diario-item {
  display: grid; grid-template-columns: 112px 70px minmax(0, 1fr) auto; gap: 10px; align-items: baseline;
  padding: 5px 4px; border-top: 1px solid var(--borda);
}
.diario-item time, .diario-origem { color: var(--texto-3); font-variant-numeric: tabular-nums; }
.diario-texto { overflow-wrap: anywhere; }
.diario-texto small { display: block; color: var(--texto-2); font-size: 11px; }
.diario-selo { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--texto-3); }
.diario-registro .diario-selo, .diario-planilha .diario-selo { color: var(--destaque-texto); }
.diario-aviso .diario-selo { color: var(--laranja-texto); }
.diario-erro .diario-selo, .diario-erro .diario-texto { color: var(--vermelho-texto); }
.diario-vazio { color: var(--texto-3); padding: 10px 4px; }

/* ---------- Alterar e excluir lançamento do caixa ---------- */
.caixa-tabela td.acoes { white-space: nowrap; }
.caixa-tabela td.acoes .remover-x.editar:hover { background: var(--destaque-fundo); color: var(--destaque-texto); }
.campo textarea {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 52px;
  padding: 8px 10px; border-radius: var(--raio); border: 1px solid var(--borda); background: var(--superficie-2);
  font: inherit; font-size: 14px; font-weight: 400; color: var(--texto); outline: none;
}
.campo textarea:focus { border-color: var(--laranja); box-shadow: var(--anel-foco); }
.excluir-resumo { font-size: 14px; font-weight: 600; margin: 0 0 10px; }
.botao-perigo { background: var(--perigo); color: var(--sobre-cor); border-color: var(--perigo); }
.botao-perigo:hover { background: color-mix(in srgb, var(--perigo) 85%, #000); border-color: var(--perigo); }

/* ---------- Tela de estornos e cancelamentos ---------- */
.tela-rolagem { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--borda-forte) transparent; }
.tela-rolagem > * { flex: none; }
.mes-nav { display: flex; align-items: center; gap: 8px; }
.mes-nav strong { font-family: var(--fonte-titulo); font-size: 14px; font-weight: 600; min-width: 140px; text-align: center; }
.caixa-tile.tile-ok strong { color: var(--verde-texto); }
.caixa-tile.tile-alerta { background: var(--vermelho-fundo); border-color: var(--vermelho-borda); }
.caixa-tile.tile-alerta span, .caixa-tile.tile-alerta strong { color: var(--vermelho-texto); }

.estorno-linha { padding: 9px 0; }
.estorno-linha.pago .conta-nome { color: var(--texto-2); }
.estorno-linha.previsto { opacity: 0.8; }
.estorno-parcela { flex: none; width: 110px; font-size: 12px; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.estorno-valor { flex: none; width: 110px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.estorno-linha .pilula, .estorno-pago-em { flex: none; width: 150px; margin-left: 0; }
.estorno-pago-em { font-size: 12px; color: var(--texto-3); text-align: right; }
.estorno-linha .pilula .ti { vertical-align: -2px; }

.selo-estorno {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-width: 76px; height: 22px; padding: 0 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
}
.selo-estorno.pago { background: var(--verde-fundo); color: var(--verde-texto); box-shadow: inset 0 0 0 1px var(--verde-borda); }
.selo-estorno.pendente { background: var(--vermelho-fundo); color: var(--vermelho-texto); box-shadow: inset 0 0 0 1px var(--vermelho-borda); }
.selo-estorno.aberto { background: var(--laranja-fundo); color: var(--laranja-texto); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cor-destaque) 25%, transparent); }
.selo-estorno.previsto { background: var(--superficie-3); color: var(--texto-2); }

.estornos-acordos-card { flex-direction: column; padding: 14px 0 0; }
.estornos-acordos-card > .rotulo { padding: 0 14px; }
.estornos-acordos-card .caixa-tabela { overflow-x: auto; }
.caixa-tabela tr.quitado td { color: var(--texto-3); }
.caixa-tabela td.estorno-nome { font-weight: 500; }
.estorno-progresso { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.estorno-barra { width: 70px; height: 6px; border-radius: 999px; background: var(--superficie-3); overflow: hidden; }
.estorno-barra > span { display: block; height: 100%; border-radius: 999px; background: var(--laranja); }
.quitado .estorno-barra > span { background: var(--verde-texto); opacity: 0.6; }
.estorno-planilha { font-size: 13px; color: var(--texto-2); margin: 0 0 12px; }
.estorno-conferir { font-size: 12px; font-weight: 600; color: var(--laranja-texto); cursor: help; }
.estorno-conferir .ti { vertical-align: -2px; }

.modal-medio { width: 640px; }
/* Tokens eClínicas por unidade (só ADM principal) */
#eclinica-token.modal-medio { width: 760px; max-height: calc(100vh - 48px); overflow-y: auto; scrollbar-width: thin; }
.et-lista { display: flex; flex-direction: column; gap: 6px; }
.et-linha { display: grid; grid-template-columns: 150px 110px minmax(0, 1fr) auto auto auto; align-items: center; gap: 8px; }
.et-nome { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.et-situacao { font-size: 11px; color: var(--texto-3); }
.et-situacao.ok { color: var(--verde-texto); font-weight: 600; }
.et-linha input { width: 100%; }
.et-linha [hidden] { display: none; }
.grade-devolucao { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 12px; }
.grade-devolucao .campo-largo { grid-column: span 2; }
.nd-previa { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; font-size: 12px; color: var(--texto-2); margin: 2px 0 6px; }
.nd-previa .texto-ok { color: var(--verde-texto); }

/* ---------- Tela de notas emitidas ---------- */
.notas-card { width: 100%; max-width: 900px; margin: 0 auto; }
.notas-meta { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; margin-bottom: 18px; }
.meta-numeros { display: flex; align-items: baseline; gap: 6px; }
.meta-numeros strong { font-family: var(--fonte-titulo); font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.meta-numeros span, .meta-texto { font-size: 12px; color: var(--texto-2); }
.meta-texto.texto-alerta { color: var(--vermelho-texto); font-weight: 600; }
.meta-barra { height: 8px; border-radius: 999px; background: var(--superficie-3); overflow: hidden; }
.meta-barra > span { display: block; height: 100%; border-radius: 999px; background: var(--verde-texto); transition: width 0.4s var(--suave); }
.meta-barra.perto > span { background: var(--laranja); }
.meta-barra.passou > span { background: var(--vermelho-texto); }
.nota-numero { flex: none; width: 48px; font-family: var(--fonte-titulo); font-weight: 600; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.nota-acoes { flex: none; display: flex; gap: 2px; opacity: 0.85; transition: opacity 0.15s; }
.nota-linha:hover .nota-acoes, .nota-acoes:focus-within { opacity: 1; }
.nota-acoes .remover-x:hover { background: var(--vermelho-fundo); color: var(--vermelho-texto); }
.nota-acoes .remover-x.editar:hover { background: var(--destaque-fundo); color: var(--destaque-texto); }
.nota-linha.cancelada .conta-nome, .nota-linha.cancelada .estorno-valor { text-decoration: line-through; color: var(--texto-3); }

/* ---------- Tela de empréstimos entre unidades ---------- */
/* Uma cor por direção, igual no selo, na borda do bloco e na conferência. */
.dir-corp-clinica { --cor-dir: #2f6fb5; }
.dir-clinica-corp { --cor-dir: #6a5acd; }
.dir-2f-clinica { --cor-dir: #1f8a5b; }
.dir-2f-corp { --cor-dir: #b7791f; }
.dir-outros-clinica { --cor-dir: #12827f; }

.emp-card { width: 100%; max-width: 1100px; margin: 0 auto; }
.emp-card.caixa-tabela-card, .emp-card .caixa-tabela { overflow-x: auto; }
.emp-card .caixa-tabela td { white-space: normal; }
#emp-totais { width: 100%; max-width: 1100px; margin: 0 auto; }
.emp-direcoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 12px; }
.emp-direcao {
  border: 1px solid var(--borda); border-left: 4px solid var(--cor-dir);
  border-radius: 12px; padding: 8px 12px 4px; background: var(--superficie-2);
}
.emp-direcao-topo { display: flex; align-items: center; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--borda); }
.emp-direcao > .vazio { margin: 8px 0; font-size: 12px; }
.emp-frase { flex: 1; }
.emp-total { font-family: var(--fonte-titulo); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.emp-selo {
  flex: none; display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
  color: var(--cor-dir); background: color-mix(in srgb, var(--cor-dir) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cor-dir) 30%, transparent);
}
.emp-tipo {
  flex: none; display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.emp-tipo.aporte { background: var(--verde-fundo); color: var(--verde-texto); box-shadow: inset 0 0 0 1px var(--verde-borda); }
.emp-tipo.transferencia { background: var(--superficie-3); color: var(--texto-2); box-shadow: inset 0 0 0 1px var(--borda-forte); }
.emp-linha { padding: 6px 0; }
.emp-linha:last-child { border-bottom: none; }
.emp-id {
  flex: none; display: inline-block; min-width: 62px;
  font-family: Consolas, "Cascadia Mono", monospace; font-size: 11px; font-weight: 600; color: var(--texto-2);
}
.emp-linha .nota-acoes { opacity: 0.85; }
.emp-linha:hover .nota-acoes { opacity: 1; }
.emp-pct { display: block; font-size: 11px; color: var(--texto-3); font-weight: 400; }
.emp-confere { color: var(--verde-texto); font-weight: 600; }
.emp-diferenca { color: var(--vermelho-texto); font-weight: 600; }
.emp-total-errado { color: var(--laranja-texto); font-size: 12px; }
.emp-confere .ti, .emp-diferenca .ti { vertical-align: -2px; }
.emp-aviso-mes { margin: 0; }
.caixa-tabela tr.emp-rodape td { font-weight: 600; border-top: 1px solid var(--borda-forte); border-bottom: none; background: var(--superficie-2); }
.caixa-tabela tr.emp-nao-fecha td { background: var(--vermelho-fundo); }
.botao-link { height: auto; padding: 0; border: none; background: none; color: var(--destaque-texto); font-size: 12px; font-weight: 600; text-decoration: underline; cursor: pointer; }
.botao-link .ti { vertical-align: -2px; }
.emp-f-tipo { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--texto-2); margin: -4px 0 10px; min-height: 20px; }
.emp-campo-data { width: 170px; flex: none; }
.campos-linha .campo.emp-campo-data:first-child { width: 170px; }
.rat-partes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.rat-partes-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rat-partes[hidden] { display: none; }
.rat-previa {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  padding: 10px 12px; margin: 0 0 10px; border-radius: 10px; background: var(--superficie-2); border: 1px solid var(--borda);
  font-size: 12px; min-height: 20px;
}
.rat-previa-parte { display: flex; align-items: baseline; gap: 6px; }
.rat-previa-parte strong { font-variant-numeric: tabular-nums; }
.rat-previa-parte .emp-pct { display: inline; }
.rat-previa-soma { margin-left: auto; font-weight: 600; }
.rat-previa-cobrar { flex-basis: 100%; font-weight: 600; color: var(--laranja-texto); }
.campos-linha .campo.rat-metade { flex: 1; width: auto; min-width: 0; }
.emp-pago { min-width: 200px; }
.emp-pagador { display: block; font-size: 12px; font-weight: 600; color: var(--texto-2); }
.emp-cobrar { display: block; font-size: 12px; font-weight: 600; color: var(--laranja-texto); }
.emp-cobrar-lista { display: flex; flex-wrap: wrap; gap: 10px; }
.emp-cobrar-item {
  display: flex; flex-direction: column; gap: 2px; min-width: 220px; padding: 10px 14px; border-radius: 12px;
  background: var(--laranja-fundo); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cor-destaque) 25%, transparent);
}
.emp-cobrar-item strong { font-family: var(--fonte-titulo); font-size: 18px; font-variant-numeric: tabular-nums; }
.emp-cobrar-quem { font-size: 12px; font-weight: 700; color: var(--laranja-texto); }
.emp-sem-pagador { margin: 10px 0 0; text-align: left; }
.dir-clinica-2f { --cor-dir: #b14a6f; }
.dir-corp-2f { --cor-dir: #8a6d3b; }
.emp-cobrar-item { border-left: 4px solid var(--cor-dir, transparent); }
.emp-saldo { margin: 10px 0 0; font-size: 12px; font-weight: 600; color: var(--texto-2); }
.emp-saldo .ti { vertical-align: -2px; color: var(--laranja); }
.emp-composicao { margin: 4px 0 0; font-size: 11px; color: var(--texto-3); text-align: right; font-variant-numeric: tabular-nums; }
.emp-tag-rateio {
  display: inline-flex; align-items: center; height: 16px; padding: 0 6px; border-radius: 5px; vertical-align: 1px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.05em;
  background: var(--laranja-fundo); color: var(--laranja-texto); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cor-destaque) 25%, transparent);
}
.emp-linha-rateio .conta-nome { font-weight: 500; }
.emp-editar-rateio { flex: none; font-size: 12px; white-space: nowrap; opacity: 0.85; }
.emp-linha-rateio:hover .emp-editar-rateio { opacity: 1; }
.emp-despesa { display: block; margin-top: 4px; font-size: 11px; font-weight: 600; }
.emp-despesa.ok { color: var(--verde-texto); }
.emp-despesa.alerta { color: var(--vermelho-texto); }
.emp-despesa .ti, .emp-despesa-botao .ti { vertical-align: -2px; }
.emp-despesa-botao { display: inline-flex; align-items: center; gap: 2px; margin: 6px 0 0; }
.rd-aviso { font-size: 12px; font-weight: 600; color: var(--laranja-texto); background: var(--laranja-fundo); border-radius: 8px; padding: 8px 10px; margin: 0 0 10px; }

/* ---------- Tela de plantões dos médicos ---------- */
.plantao-grade { display: grid; grid-template-columns: auto minmax(300px, 1fr); gap: 14px; align-items: stretch; }
.plantao-cal-card { padding: 14px 16px 16px; }

.plantao-calendario { display: grid; grid-template-columns: repeat(7, clamp(84px, 8vw, 112px)); gap: 5px; }
.plantao-semana {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--texto-3); padding: 0 8px 6px;
}
.plantao-semana.fim { color: var(--laranja-texto); }
.plantao-dia {
  position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 3px;
  aspect-ratio: 1; min-height: 0; height: auto; overflow: hidden; padding: 6px; border-radius: 10px; text-align: left;
  background: var(--superficie-2); border: 1px solid transparent; color: var(--texto);
  font: inherit; cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, opacity 0.2s;
}
.plantao-dia:hover { background: var(--superficie); border-color: var(--borda-forte); box-shadow: var(--sombra); }
.plantao-dia:active { transform: none; }
.plantao-dia:focus-visible { outline: none; border-color: var(--laranja); box-shadow: var(--anel-foco); }
.plantao-dia.fora { background: transparent; cursor: default; }
.plantao-dia.fim { background: color-mix(in srgb, var(--cor-destaque) 4%, var(--superficie-2)); }
.plantao-dia.sem-plantao { background: transparent; border: 1px dashed var(--borda); }
.plantao-num {
  align-self: flex-start; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--fonte-titulo); font-size: 12px; font-weight: 600; color: var(--texto-2); font-variant-numeric: tabular-nums;
}
.sem-plantao .plantao-num { color: var(--texto-3); font-weight: 500; }
.plantao-dia.hoje .plantao-num { background: var(--laranja); color: var(--sobre-cor); }
.plantao-chip {
  display: block; padding: 2px 7px; border-radius: 6px;
  font-size: 11.5px; font-weight: 600; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: color-mix(in srgb, var(--cor-medico) 70%, var(--texto));
  background: color-mix(in srgb, var(--cor-medico) 14%, transparent);
}
.plantao-calendario.com-foco .plantao-dia:not(.em-foco):not(.fora) { opacity: 0.25; }
.plantao-calendario.com-foco .plantao-dia.em-foco { background: var(--superficie); border-color: var(--borda-forte); box-shadow: var(--sombra); }
.plantao-sem-escala { grid-column: 1 / -1; text-align: center; margin: 8px 0 0; }

.plantao-resumo { display: flex; flex-direction: column; min-height: 0; }
.plantao-totais { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.plantao-total {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px;
  background: linear-gradient(160deg, var(--marinho-claro), var(--marinho));
}
.plantao-total strong { font-family: var(--fonte-titulo); font-size: 24px; font-weight: 600; line-height: 1.1; color: var(--sobre-marinho); font-variant-numeric: tabular-nums; }
.plantao-total span { font-size: 11px; color: var(--sobre-cor-2); }
.plantao-total.ok { background: var(--verde-fundo); }
.plantao-total.ok strong { color: var(--verde-texto); }
.plantao-total.ok span { color: var(--verde-texto); opacity: 0.8; }
.plantao-medicos { display: flex; flex-direction: column; }
.plantao-medico {
  display: grid; grid-template-columns: minmax(0, 1fr) 58px 64px; align-items: center; gap: 4px;
  padding: 8px 6px; border-radius: 8px; font-size: 13px; transition: background 0.15s;
}
.plantao-medico:not(.cabecalho):hover { background: var(--superficie-2); }
.plantao-medico + .plantao-medico:not(.cabecalho) { border-top: 1px solid var(--borda); }
.plantao-medico.cabecalho { padding-top: 0; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--texto-3); }
.plantao-medico > :not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.plantao-medico strong { font-family: var(--fonte-titulo); font-size: 15px; font-weight: 600; }
.plantao-medico-nome { display: inline-flex; align-items: center; min-width: 0; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plantao-medico.fora-da-escala { color: var(--texto-3); }
.plantao-ponto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--cor-medico); margin-right: 8px; flex: none; }

@media (max-width: 1100px) {
  .plantao-grade { grid-template-columns: 1fr; }
  .plantao-calendario { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

.plantao-pacientes { flex: 1; min-height: 120px; display: flex; flex-direction: column; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--borda); }
.plantao-pac-dica { margin: 0; }
.plantao-pac-titulo { display: flex; align-items: center; margin: 0 0 8px; font-size: 13px; font-weight: 600; }
.plantao-pac-titulo > span:last-child { margin-left: auto; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.plantao-pac-lista { list-style: none; margin: 0; padding: 0; flex: 1; min-height: 0; max-height: 420px; overflow-y: auto; }
.plantao-pac-lista li {
  display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 8px; align-items: baseline;
  padding: 5px 4px; font-size: 12px; border-top: 1px solid var(--borda);
}
.plantao-pac-lista li:first-child { border-top: none; }
.plantao-pac-data { color: var(--texto-3); font-variant-numeric: tabular-nums; }
.plantao-pac-nome { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plantao-pac-status { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--texto-3); }

.pd-medicos { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; max-height: 300px; overflow-y: auto; scrollbar-width: thin; }
.pd-linha { display: flex; align-items: center; gap: 14px; padding: 6px 4px; border-bottom: 1px solid var(--borda); }
.pd-nome { flex: 1; min-width: 0; display: inline-flex; align-items: center; font-size: 14px; font-weight: 500; }
.pd-turno { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--texto-2); cursor: pointer; }
.pd-novo { margin-bottom: 6px; }
.pi-dias { flex: 1; min-width: 0; font-size: 12px; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.pi-total { flex: none; font-size: 13px; font-variant-numeric: tabular-nums; }
.pi-alerta {
  font-size: 12px; margin: 0 0 10px; padding: 8px 10px; border-radius: var(--raio);
  background: var(--laranja-fundo); color: var(--laranja-texto);
}

/* ---------- Conferência caixa x eClínicas ---------- */
.conferencia-card { flex-direction: column; padding: 14px 0 0; min-height: 220px; }
.conferencia-card > .rotulo { padding: 0 14px; }
.conferencia-dia { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--texto-2); }
.conferencia-dia[hidden] { display: none; }
.conferencia-dia select {
  height: 28px; padding: 0 8px; border-radius: var(--raio);
  border: 1px solid var(--borda); background: var(--superficie-2); font-size: 12px;
}
.caixa-tabela td.conferencia-dif { font-weight: 600; }
.caixa-tile.conferencia-atencao { grid-column: 1 / -1; }
.caixa-tile.conferencia-atencao strong { font-family: inherit; font-size: 13px; font-weight: 500; }
.conferencia-obs { padding: 0 4px; font-size: 12px; color: var(--texto-3); }
.conferencia-obs summary { cursor: pointer; width: fit-content; }
.conferencia-obs summary:hover { color: var(--texto-2); }
.conferencia-obs ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 4px 16px; }
.conferencia-obs li { display: flex; gap: 8px; font-variant-numeric: tabular-nums; }
.conferencia-obs-nome { color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 170px; }
.conferencia-obs .caixa-tabela { margin-top: 8px; max-width: 560px; }

/* ---------- Tela de pedidos de notas ---------- */
.pedido-data { width: 56px; }
.pedido-linha .selo-estorno { min-width: 70px; }
.pedido-linha.cancelada .conta-nome, .pedido-linha.cancelada .estorno-valor { text-decoration: line-through; color: var(--texto-3); }
.pedidos-atrasados { font-size: 12px; font-weight: 600; color: var(--laranja-texto); margin: -4px 0 10px; }
.pedidos-atrasados button { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }

/* ---------- Tela de despesas diárias ---------- */
.despesas-resumo { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.despesas-total { min-width: 230px; justify-content: center; }
.despesas-total strong { font-size: 24px; }
.despesas-total small { font-size: 11px; color: var(--sobre-cor-2); }
.despesas-total small:empty { display: none; }
.despesas-grupos { flex: 1; display: flex; flex-wrap: wrap; gap: 8px; align-content: center; }
.despesa-grupo {
  height: auto; padding: 8px 12px; display: flex; align-items: center; gap: 10px; text-align: left;
  border-radius: 14px; border-color: var(--borda); background: var(--superficie); box-shadow: var(--sombra);
}
.despesa-grupo.ativo { border: 2px solid var(--laranja); box-shadow: 0 0 0 3px var(--laranja-suave); }
.despesa-grupo.sem-linhas { opacity: 0.55; }
.despesa-grupo-texto { display: flex; flex-direction: column; line-height: 1.25; }
.despesa-grupo-nome { font-size: 12px; color: var(--texto-2); }
.despesa-grupo strong { font-size: 14px; font-variant-numeric: tabular-nums; }
.despesa-grupo small { font-size: 10px; color: var(--texto-3); }
.despesa-amostra {
  flex: none; width: 18px; height: 18px; border-radius: 5px;
  border: 2px solid rgba(0, 0, 0, 0.25); background: #ffffff;
}
.despesa-amostra.sem-cor { background: #ffffff; border-color: var(--borda-forte); }

.despesas-card { flex-direction: column; padding: 14px 0 0; }
.despesas-card > .rotulo { padding: 0 14px; flex-wrap: wrap; gap: 8px; }
.despesas-card .caixa-tabela { overflow: auto; }
.despesas-card .conferencia-dia select { max-width: 240px; }
.link-discreto { height: 26px; padding: 0 8px; border: none; background: transparent; font-size: 12px; color: var(--texto-2); }
.link-discreto:hover { color: var(--destaque-texto); background: var(--superficie-2); }
.caixa-tabela tr.despesa-linha.colorida td { background: var(--linha-fundo); color: var(--linha-texto); border-bottom-color: rgba(0, 0, 0, 0.12); }
.caixa-tabela tr.despesa-linha.colorida:hover td { filter: brightness(0.95); }
.caixa-tabela tr.despesa-linha.negrito td { font-weight: 700; }
.caixa-tabela td.despesa-fornecedor { font-weight: 500; }
.caixa-tabela td.despesa-total-linha { font-weight: 600; }
.caixa-tabela tr.despesa-bloco td {
  padding: 14px 12px 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.03em;
  color: var(--laranja-texto); background: var(--superficie-2);
}

.despesa-aporte { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texto-2); margin: 2px 0 8px; }
.despesa-cor-previa { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--texto-2); margin: 0 0 6px; }

/* ---------- Tela de lembrete de contas ---------- */
#lembretes-resumo[hidden], #lembretes-filtros[hidden] { display: none; }
.caixa-tile.destaque.com-atrasados { background: linear-gradient(160deg, var(--vermelho), #922b21); }
.lembrete-etiqueta, .lembrete-situacao {
  border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase;
}
.lembrete-etiqueta { flex: none; padding: 3px 9px; }
.lembrete-etiqueta.sem-etiqueta, .lembrete-situacao.sem-etiqueta { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); }
.lembrete-situacao.sem-etiqueta, .lembrete-etiqueta.sem-etiqueta { background: rgba(255, 255, 255, 0.85) !important; }
.lembrete-situacao { height: 26px; padding: 0 8px; border: none; cursor: pointer; }
.lembrete-situacao option { background: var(--superficie); color: var(--texto); font-weight: 400; }
.caixa-tabela tr.lembrete-linha td { background: var(--linha-fundo); color: var(--linha-texto); border-bottom-color: rgba(0, 0, 0, 0.12); white-space: normal; }
.caixa-tabela tr.lembrete-linha:hover td { filter: brightness(0.95); }
.caixa-tabela tr.lembrete-linha.negrito td { font-weight: 700; }
.caixa-tabela td.lembrete-conta { font-weight: 500; }
.caixa-tabela td.lembrete-dia { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
.caixa-tabela tr.prazo-atrasada td.lembrete-dia { box-shadow: inset 4px 0 0 var(--vermelho); }
.caixa-tabela tr.prazo-hoje td.lembrete-dia { box-shadow: inset 4px 0 0 var(--laranja); }
.lembrete-prazo {
  margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; text-transform: uppercase;
  background: #ffffff; color: var(--vermelho); box-shadow: inset 0 0 0 1px var(--vermelho);
}
.prazo-hoje .lembrete-prazo { color: var(--laranja-texto); box-shadow: inset 0 0 0 1px var(--laranja); }
.dec-resumo { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.dec-resumo:empty { display: none; }
.dec-lista { max-height: 55vh; border: 1px solid var(--borda); border-radius: 12px; margin-bottom: 8px; }
.dec-lista td { vertical-align: middle; }
.dec-nota { display: block; margin-top: 3px; font-size: 11px; color: var(--texto-3); white-space: normal; max-width: 260px; }
.dec-sobras-ajuda { margin: 10px 12px; }
.dec-soma { margin-right: auto; align-self: center; font-size: 12px; color: var(--texto-2); }
.lp-lista { max-height: 55vh; border: 1px solid var(--borda); border-radius: 12px; margin-bottom: 8px; }
.lp-lista td { vertical-align: middle; }
.lp-lista input:not([type="checkbox"]), .lp-lista select { width: 100%; min-width: 0; font-size: 13px; color: var(--texto); }
.lp-lista select { height: 34px; border-radius: var(--raio); border: 1px solid var(--borda); background: var(--superficie-2); padding: 0 8px; }
.lp-lista select:focus { outline: none; border-color: var(--laranja); box-shadow: var(--anel-foco); }
.lp-lista input.lp-dia { width: 64px; }
.lp-lista td:nth-child(4) { min-width: 240px; }
.lp-lista td:nth-child(6) { min-width: 200px; }
.lp-arquivo { max-width: 180px; }
.lp-arquivo span { display: block; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.lp-arquivo small { color: var(--texto-3); font-size: 11px; }
.caixa-tabela tr.lp-linha-avisos td { padding-top: 0; }
.caixa-tabela tbody tr:has(+ .lp-linha-avisos:not([hidden])) td { border-bottom: none; }
.lp-avisos { white-space: normal; }
.lp-avisos span { display: inline-block; margin: 0 6px 4px 0; padding: 2px 8px; border-radius: 999px; font-size: 11px; background: var(--vermelho-fundo); color: var(--vermelho-texto); }

.dc-lista { display: flex; flex-direction: column; gap: 10px; max-height: 52vh; overflow-y: auto; scrollbar-width: thin; margin-bottom: 10px; }
.dc-regra { border: 1px solid var(--borda); border-radius: 14px; padding: 10px 12px 4px; }
.dc-linha { display: grid; grid-template-columns: 1.4fr 1fr 56px 56px 26px; gap: 0 10px; align-items: center; }
.dc-linha .remover-x { margin-top: 8px; }
.dc-cor input[type="color"] {
  width: 56px; height: 34px; padding: 3px; cursor: pointer;
  border: 1px solid var(--borda-forte); border-radius: var(--raio); background: var(--superficie);
}
.dc-opcoes { display: flex; gap: 16px; font-size: 12px; color: var(--texto-2); margin-bottom: 8px; }
.dc-opcoes label { display: flex; align-items: center; gap: 6px; }
.dc-amostra { padding: 3px 12px; border-radius: 6px; font-size: 12px; border: 1px solid rgba(0, 0, 0, 0.15); }
.dc-padrao { margin-right: auto; }

/* ---------- DRE da unidade ---------- */
#tela-dre .caixa-totais, #dre-aviso { width: 100%; max-width: 1100px; margin: 0 auto; }
#dre-aviso { margin-top: -4px; }
.caixa-tabela tr.dre-grupo { cursor: pointer; }
.caixa-tabela tr.dre-grupo td:first-child { white-space: normal; }
.caixa-tabela tr.dre-grupo .ti { color: var(--texto-3); vertical-align: -2px; }
.caixa-tabela tr.dre-grupo.aberto td { background: var(--superficie-2); border-bottom-color: transparent; }
.caixa-tabela tr.dre-cancel .dre-nome { color: var(--texto-2); }
.dre-nome { font-weight: 500; }
.dre-uso { display: flex; align-items: center; gap: 8px; min-width: 160px; }
.dre-barra { flex: 1; height: 8px; border-radius: 99px; background: var(--superficie-3); overflow: hidden; }
.dre-barra > span { display: block; height: 100%; border-radius: 99px; background: var(--verde-texto); }
.dre-barra.perto > span { background: var(--laranja); }
.dre-barra.estourado > span { background: var(--vermelho-texto); }
.dre-uso-pct { width: 64px; text-align: right; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--verde-texto); }
.dre-uso-pct.perto { color: var(--laranja-texto); }
.dre-uso-pct.estourado { color: var(--vermelho-texto); }
.caixa-tabela tr.dre-detalhe-linha td { background: var(--superficie-2); padding-top: 0; white-space: normal; }
.dre-detalhe { display: flex; flex-direction: column; gap: 8px; padding: 0 0 4px 22px; }
.dre-codigos { display: flex; flex-wrap: wrap; gap: 6px; }
.dre-codigo { font-size: 11px; padding: 2px 8px; border-radius: 99px; background: var(--superficie); color: var(--texto-2); box-shadow: inset 0 0 0 1px var(--borda); }
.dre-despesas { width: 100%; border-collapse: collapse; font-size: 12px; }
.dre-despesas td { padding: 4px 8px; border-bottom: 1px solid var(--borda); white-space: nowrap; }
.dre-despesas td.conta-detalhe { white-space: normal; max-width: 420px; font-size: 11px; }
.dre-despesas td.num { text-align: right; font-variant-numeric: tabular-nums; }
.dre-detalhe > .vazio { margin: 0; font-size: 12px; }
.dre-resultado { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.dre-resultado-item { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 12px; background: var(--superficie-2); }
.dre-resultado-item span { font-size: 12px; color: var(--texto-2); }
.dre-resultado-item strong { font-family: var(--fonte-titulo); font-size: 16px; font-variant-numeric: tabular-nums; }
.dre-resultado-item.saldo strong { color: var(--verde-texto); }
.dre-check { grid-column: 1 / -1; margin: 0; white-space: normal; }
.dre-resultado-item.saldo.negativo strong { color: var(--vermelho-texto); }

/* ---------- Obras ---------- */
/* Tudo numa coluna só, da mesma largura: topo, unidades, resumo e listas alinhados. */
.obras-pagina { width: 100%; max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.obras-pagina > * { flex: none; }

.obras-abas { display: inline-flex; padding: 4px; gap: 4px; border-radius: 999px; background: var(--superficie-2); border: 1px solid var(--borda); }
.obras-abas button {
  height: 32px; padding: 0 14px; border-radius: 999px; border: none; background: transparent;
  font-size: 13px; font-weight: 600; color: var(--texto-2);
}
.obras-abas button:hover { background: var(--superficie); color: var(--texto); }
.obras-abas button.ativa { background: linear-gradient(160deg, var(--marinho-claro), var(--marinho)); color: var(--sobre-marinho); box-shadow: var(--sombra); }

/* Faixa de unidades: sete cartões iguais lado a lado. */
.obras-unidades { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.obras-unidade {
  height: auto; padding: 12px 10px; border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: var(--superficie); border: 1px solid var(--borda); box-shadow: var(--sombra);
  color: var(--texto-2); font-size: 13px; font-weight: 600;
  animation: subir 0.35s var(--suave) both;
  transition: transform 0.25s var(--suave), border-color 0.2s, box-shadow 0.25s var(--suave), color 0.2s;
}
.obras-unidade:hover { transform: translateY(-2px); color: var(--texto); border-color: color-mix(in srgb, var(--cor-destaque) 45%, transparent); box-shadow: var(--sombra-flutuante); }
.obras-unidade-icone {
  width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: var(--laranja-fundo); color: var(--laranja-texto); font-size: 20px;
}
.obras-unidade.ativa { color: var(--texto); border: 2px solid var(--laranja); box-shadow: 0 0 0 3px var(--laranja-suave), var(--sombra-flutuante); }
.obras-unidade.ativa .obras-unidade-icone { background: var(--laranja); color: var(--sobre-cor); }
.obras-unidade-nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

.obras-trava {
  margin: 0; padding: 9px 14px; border-radius: 12px; font-size: 13px;
  background: var(--superficie-2); border: 1px dashed var(--borda-forte); color: var(--texto-2);
  display: flex; align-items: center; gap: 6px;
}
.obras-trava.alerta { background: var(--vermelho-fundo); border: 1px solid var(--vermelho-borda); color: var(--vermelho-texto); }

.obras-conteudo { display: flex; flex-direction: column; gap: 14px; }

.obras-vazio { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 40px 20px; text-align: center; color: var(--texto-2); font-size: 13px; }
.obras-vazio strong { font-family: var(--fonte-titulo); font-size: 16px; color: var(--texto); }
.obras-vazio-icone { width: 52px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 26px; background: var(--laranja-fundo); color: var(--laranja-texto); margin-bottom: 4px; }
.obras-vazio-icone.erro-icone { background: var(--vermelho-fundo); color: var(--vermelho-texto); }

/* Resumo: o número principal à esquerda, os outros três à direita. */
.obras-resumo { display: grid; grid-template-columns: minmax(280px, 1.1fr) 2fr; gap: 0; padding: 0; overflow: hidden; }
.obras-resumo-principal {
  padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; justify-content: center;
  background: linear-gradient(160deg, var(--marinho-claro), var(--marinho)); color: var(--sobre-marinho);
}
.obras-resumo-principal .obras-numero-rotulo, .obras-resumo-principal .obras-numero-nota { color: var(--sobre-cor-2); }
.obras-valor-grande { font-family: var(--fonte-titulo); font-size: 30px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.5px; }
.obras-resumo-principal .obras-barra { background: rgba(255, 255, 255, 0.18); }
.obras-resumo-principal .obras-barra > span { background: var(--laranja); }
.obras-resumo-lado { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.obras-numero { padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; justify-content: center; border-left: 1px solid var(--borda); }
.obras-numero strong { font-family: var(--fonte-titulo); font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.obras-numero.positivo strong { color: var(--verde-texto); }
.obras-numero.negativo strong { color: var(--vermelho-texto); }
.obras-numero-rotulo { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--texto-3); }
.obras-numero-nota { font-size: 12px; color: var(--texto-3); }

.obras-barra { height: 8px; border-radius: 999px; background: var(--superficie-3); overflow: hidden; }
.obras-barra > span { display: block; height: 100%; border-radius: 999px; background: var(--laranja); transition: width 0.5s var(--suave); }
.obras-resumo-principal .obras-barra.perto > span { background: #f5b14a; }
.obras-resumo-principal .obras-barra.estourou > span { background: #ff7b72; }

/* Para onde foi o dinheiro: centros de custo em duas colunas, cada um com a sua barra. */
.obras-centros-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 4px 18px; }
.obras-centro {
  height: auto; padding: 8px 10px; border: 1px solid transparent; border-radius: 10px; background: transparent;
  display: grid; grid-template-columns: 1fr auto 52px; align-items: center; gap: 4px 10px; text-align: left; font-size: 13px;
}
.obras-centro:hover { background: var(--superficie-2); border-color: var(--borda); }
.obras-centro.ativo { background: var(--laranja-fundo); border-color: var(--laranja); }
.obras-centro .obras-barra { grid-column: 1 / -1; height: 6px; }
.obras-centro-nome { font-weight: 600; color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.obras-centro-valor { font-variant-numeric: tabular-nums; color: var(--texto); }
.obras-centro-pct { font-size: 12px; color: var(--texto-3); text-align: right; font-variant-numeric: tabular-nums; }

/* Listas (despesas, sócios, investidores). */
.obras-lista { padding-bottom: 6px; }
.obras-lista-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.obras-lista-topo .rotulo { margin: 0; gap: 12px; justify-content: flex-start; }
.obras-ferramentas { display: flex; align-items: center; gap: 8px; }
.obras-ferramentas .botao-principal { height: 34px; }
.obras-busca { width: 260px; height: 34px; }
.obras-filtro { height: 30px; }
.obras-tabela { max-height: 560px; border: 1px solid var(--borda); border-radius: 12px; }
.obras-tabela th { position: sticky; top: 0; z-index: 1; }
.obras-tabela td { white-space: nowrap; }
.obras-tabela td.obras-descricao { white-space: normal; min-width: 220px; font-weight: 500; color: var(--texto); }
.obras-data { color: var(--texto-2); font-variant-numeric: tabular-nums; }
.obras-valor { font-weight: 600; color: var(--texto); }
.obras-obs { font-size: 12px; color: var(--texto-3); white-space: normal !important; }
.obras-linha { font-size: 11px; color: var(--texto-3); }
.obras-aberto { color: var(--vermelho-texto); font-weight: 600; }
.obras-etiqueta {
  display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600;
  background: var(--destaque-fundo); color: var(--destaque-texto); border: 1px solid var(--borda);
}
.obras-status { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.3px; border: 1px solid transparent; }
.obras-status.pago { background: var(--verde-fundo); color: var(--verde-texto); border-color: var(--verde-borda); }
.obras-status.parcial { background: var(--laranja-fundo); color: var(--laranja-texto); border-color: var(--laranja-suave); }
.obras-status.pendente { background: var(--vermelho-fundo); color: var(--vermelho-texto); border-color: var(--vermelho-borda); }
.obras-status.neutro { background: var(--superficie-3); color: var(--texto-2); border-color: var(--borda); }
.obras-pagamentos { display: flex; flex-wrap: wrap; gap: 4px; }
.obras-pagamento { padding: 1px 8px; border-radius: 6px; font-size: 11px; background: var(--superficie-2); border: 1px solid var(--borda); color: var(--texto-2); font-variant-numeric: tabular-nums; }
.obras-pagamento.aberto { background: var(--vermelho-fundo); border-color: var(--vermelho-borda); color: var(--vermelho-texto); }

@media (max-width: 1100px) {
  .obras-resumo { grid-template-columns: 1fr; }
  .obras-numero { border-left: none; border-top: 1px solid var(--borda); }
}

/* ---------- Compras: pedidos das unidades e novo pedido ---------- */
.compras-pagina { width: 100%; max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.compras-pagina > * { flex: none; }
.compras-conteudo { display: flex; flex-direction: column; gap: 14px; }
.compras-espaco { flex: 1; }

.compras-vazio { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 40px 20px; text-align: center; color: var(--texto-2); font-size: 13px; }
.compras-vazio strong { font-family: var(--fonte-titulo); font-size: 16px; color: var(--texto); }
.compras-vazio-icone { width: 52px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 26px; background: var(--laranja-fundo); color: var(--laranja-texto); margin-bottom: 4px; }
.compras-vazio-icone.erro-icone { background: var(--vermelho-fundo); color: var(--vermelho-texto); }
.compras-vazio-icone .ti-loader-2 { animation: girar 0.9s linear infinite; }
.compras-trava { margin: 0; padding: 9px 14px; border-radius: 12px; font-size: 13px; background: var(--superficie-2); border: 1px dashed var(--borda-forte); color: var(--texto-2); display: flex; align-items: center; gap: 6px; }

/* Cores da situação, as mesmas da planilha */
.compras-situacao { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.compras-situacao.verde { background: var(--verde-fundo); color: var(--verde-texto); box-shadow: inset 0 0 0 1px var(--verde-borda); }
.compras-situacao.vermelho { background: var(--vermelho-fundo); color: var(--vermelho-texto); box-shadow: inset 0 0 0 1px var(--vermelho-borda); }
.compras-situacao.amarelo { background: var(--amarelo-fundo); color: var(--amarelo-texto); box-shadow: inset 0 0 0 1px var(--amarelo-borda); }
.compras-situacao.branco { background: var(--laranja-fundo); color: var(--laranja-texto); box-shadow: inset 0 0 0 1px var(--laranja-suave); }
.compras-situacao.concluido { background: var(--destaque-fundo); color: var(--destaque-texto); box-shadow: inset 0 0 0 1px var(--borda-forte); }
.compras-bolinha { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 2px; }
.compras-bolinha.verde { background: var(--verde); }
.compras-bolinha.vermelho { background: var(--vermelho); }
.compras-bolinha.amarelo { background: var(--amarelo); }
.compras-bolinha.concluido { background: var(--marinho-claro); }
.compras-bolinha.branco { background: var(--laranja); }

/* Filtros */
.compras-filtros { display: flex; flex-direction: column; gap: 10px; }
.compras-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.compras-chip { height: 32px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--texto-2); background: var(--superficie-2); display: inline-flex; align-items: center; gap: 4px; }
.compras-chip > span:last-child { font-weight: 500; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.compras-chip.ativo { background: linear-gradient(160deg, var(--marinho-claro), var(--marinho)); border-color: var(--marinho); color: var(--sobre-marinho); }
.compras-chip.ativo > span:last-child { color: var(--sobre-cor-2); }
.compras-ferramentas { display: flex; gap: 8px; }
.compras-busca { flex: 1; height: 36px; }
.compras-unidade { width: 240px; height: 36px; padding: 0 10px; border-radius: var(--raio); border: 1px solid var(--borda); background: var(--superficie-2); color: var(--texto); font: inherit; font-size: 13px; }

/* Lista: um pedido por linha */
.compras-tabela-card { padding: 6px; }
.compras-tabela { width: 100%; border-collapse: separate; border-spacing: 0 4px; font-size: 13px; }
.compras-tabela th { text-align: left; padding: 8px 12px 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--texto-3); }
.compras-linha { cursor: pointer; }
.compras-linha td { padding: 11px 12px; background: var(--superficie-2); border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); transition: background 0.15s; }
.compras-linha td:first-child { border-left: 4px solid var(--laranja); border-radius: 10px 0 0 10px; }
.compras-linha td:last-child { border-right: 1px solid var(--borda); border-radius: 0 10px 10px 0; }
.compras-linha.verde td { background: color-mix(in srgb, var(--verde-fundo) 70%, transparent); }
.compras-linha.verde td:first-child { border-left-color: var(--verde); }
.compras-linha.vermelho td { background: color-mix(in srgb, var(--vermelho-fundo) 70%, transparent); }
.compras-linha.vermelho td:first-child { border-left-color: var(--vermelho); }
.compras-linha.amarelo td { background: color-mix(in srgb, var(--amarelo-fundo) 60%, transparent); }
.compras-linha.amarelo td:first-child { border-left-color: var(--amarelo); }
.compras-linha.concluido td { background: var(--superficie-2); color: var(--texto-2); }
.compras-linha.concluido td:first-child { border-left-color: var(--marinho-claro); }
.compras-linha.branco td { background: var(--superficie); font-weight: 600; }
.compras-linha:hover td, .compras-linha:focus td { background: var(--laranja-fundo); }
.compras-linha:focus { outline: none; }
.compras-quando { color: var(--texto-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.compras-unidade-nome { color: var(--texto); font-weight: 600; white-space: nowrap; }
.compras-quem { color: var(--texto-2); max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compras-qtd { color: var(--texto-2); white-space: nowrap; }
.compras-chevron { width: 24px; color: var(--texto-3); text-align: right; }
.compras-mais { width: 100%; margin-top: 4px; height: 36px; }

/* Janela do pedido */
.compras-janela { width: 760px; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.compras-janela-topo { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--borda); }
.compras-janela-topo h3 { margin: 0 auto 0 0; font-family: var(--fonte-titulo); font-size: 18px; }
.compras-pedido-icone { width: 38px; height: 38px; flex: none; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; background: var(--destaque-fundo); color: var(--destaque-texto); }
.compras-janela-corpo { padding: 16px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; scrollbar-width: thin; }
.compras-janela-corpo .rotulo { margin: 4px 0 0; }
.compras-dados { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.compras-dado { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 12px; background: var(--superficie-2); border: 1px solid var(--borda); min-width: 0; }
.compras-dado > span { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--texto-3); }
.compras-dado > strong { font-size: 14px; color: var(--texto); overflow-wrap: anywhere; }
.compras-dado.largo { grid-column: 1 / -1; }
.compras-endereco { height: auto; padding: 0; border: none; background: none; display: flex; align-items: flex-start; gap: 8px; text-align: left; font-size: 14px; font-weight: 600; color: var(--texto); }
.compras-endereco span { flex: 1; }
.compras-endereco .ti { color: var(--texto-3); margin-top: 2px; }
.compras-endereco:hover { background: none; color: var(--laranja-texto); }
.compras-itens-tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.compras-itens-tabela th { text-align: left; padding: 6px 10px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--texto-3); border-bottom: 1px solid var(--borda); }
.compras-itens-tabela td { padding: 6px 10px; border-bottom: 1px dashed var(--borda); color: var(--texto); }
.compras-itens-tabela .num { text-align: right; width: 1%; white-space: nowrap; }
.compras-item-qtd { font-weight: 700; color: var(--laranja-texto); font-variant-numeric: tabular-nums; }
.compras-outros { padding: 10px 12px; border-radius: 12px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; white-space: pre-line; background: var(--laranja-fundo); color: var(--laranja-texto); }
.compras-janela-compra { padding: 14px 20px 16px; border-top: 1px solid var(--borda); background: var(--superficie-2); }
.compras-janela-compra .campos-linha .campo:first-child { width: auto; flex: 1; }
.compras-janela-compra .ajuda { margin: 0; }
.compras-janela-compra .acoes-modal { align-items: center; }
.compras-janela-compra .acoes-modal button { white-space: nowrap; }

/* Novo pedido */
.cn-capa {
  display: flex; align-items: center; gap: 24px; padding: 22px 26px; border-radius: var(--raio-card);
  background: linear-gradient(140deg, var(--marinho-claro), var(--marinho)); color: var(--sobre-marinho); box-shadow: var(--sombra);
}
.cn-capa-texto { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--sobre-cor-2); }
.cn-capa-rotulo { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--sobre-cor-2); }
.cn-capa-texto strong { font-family: var(--fonte-titulo); font-size: 24px; font-weight: 600; color: var(--sobre-cor); }
.cn-capa-passos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
.cn-capa-passos li { display: flex; align-items: center; gap: 8px; }
.cn-capa-passos b { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; background: var(--laranja); color: var(--sobre-cor); }

.cn-secao { display: flex; flex-direction: column; gap: 14px; }
.cn-passo { display: flex; align-items: flex-start; gap: 12px; }
.cn-passo > div { flex: 1; }
.cn-passo h3 { margin: 0; font-family: var(--fonte-titulo); font-size: 17px; }
.cn-passo p { margin: 2px 0 0; font-size: 13px; color: var(--texto-2); }
.cn-passo-n { width: 32px; height: 32px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--fonte-titulo); font-size: 16px; font-weight: 700; background: var(--laranja); color: var(--sobre-cor); box-shadow: 0 0 0 4px var(--laranja-suave); }

.cn-dados { display: grid; grid-template-columns: 170px 1fr 1.4fr; gap: 12px; }
.cn-campo { margin: 0; }
.cn-campo.largo { width: 100%; }
.cn-campo-rotulo { font-size: 12px; font-weight: 600; color: var(--texto); }
.cn-campo-rotulo em { font-style: normal; font-weight: 500; color: var(--laranja-texto); font-size: 11px; }
.cn-campo input, .cn-campo textarea { font-size: 14px; }
.cn-campo.faltando input, .cn-campo.faltando textarea { border-color: var(--vermelho-texto); box-shadow: 0 0 0 3px var(--vermelho-borda); }

.cn-ferramentas { display: flex; align-items: center; gap: 8px; }
.cn-busca { width: 300px; height: 36px; }
.cn-so-escolhidos { height: 34px; }
.cn-so-escolhidos.ativo { background: var(--laranja); color: var(--sobre-cor); box-shadow: none; }

.cn-produtos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.cn-produto[hidden] { display: none; }
.cn-produto {
  position: relative; display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 16px;
  background: var(--superficie); border: 2px solid var(--borda); box-shadow: var(--sombra);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s var(--suave);
}
.cn-produto:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--cor-destaque) 40%, transparent); }
.cn-produto.escolhido { border-color: var(--laranja); box-shadow: 0 0 0 4px var(--laranja-suave), var(--sombra); }
.cn-produto-foto { position: relative; aspect-ratio: 1 / 1; border-radius: 12px; background: #fff; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.cn-produto-foto img { width: 100%; height: 100%; object-fit: contain; }
.cn-produto-sem-foto { font-size: 40px; color: #b8bcc6; }
.cn-produto-selo {
  position: absolute; top: 8px; right: 8px; display: none; align-items: center; gap: 4px; height: 28px; padding: 0 10px;
  border-radius: 999px; background: var(--laranja); color: var(--sobre-cor); font-size: 12px; font-weight: 700; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.cn-produto.escolhido .cn-produto-selo { display: inline-flex; }
.cn-produto-nome { font-size: 13px; font-weight: 700; line-height: 1.25; color: var(--texto); min-height: 2.5em; }
.cn-opcoes { display: flex; flex-wrap: wrap; gap: 4px; }
.cn-opcao { height: 30px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--superficie-2); }
.cn-opcao:hover { border-color: var(--laranja); color: var(--laranja-texto); }
.cn-opcao.ativa { background: var(--laranja); border-color: var(--laranja); color: var(--sobre-cor); }

.cn-barra {
  position: sticky; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border-radius: var(--raio-card); background: var(--superficie); border: 1px solid var(--borda-forte); box-shadow: var(--sombra-flutuante);
}
.cn-barra-resumo { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.cn-barra-resumo > div { display: flex; flex-direction: column; min-width: 0; }
.cn-barra-resumo strong { font-family: var(--fonte-titulo); font-size: 15px; color: var(--texto); }
.cn-barra-resumo span#cn-itens { font-size: 12px; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-barra-icone { width: 40px; height: 40px; flex: none; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; background: var(--laranja-fundo); color: var(--laranja-texto); }
.cn-barra .erro { margin: 0; max-width: 260px; text-align: right; }
.cn-barra button { height: 40px; white-space: nowrap; }
.cn-enviar {
  height: 44px; padding: 0 22px; border-radius: 12px; font-size: 15px; font-weight: 700;
  background: linear-gradient(160deg, color-mix(in srgb, var(--cor-destaque) 85%, #fff), var(--laranja)); border-color: var(--laranja); color: var(--sobre-cor);
  box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--cor-destaque) 70%, transparent);
}
.cn-barra .cn-enviar { height: 44px; }
.cn-enviar:hover { filter: brightness(1.05); background: linear-gradient(160deg, color-mix(in srgb, var(--cor-destaque) 85%, #fff), var(--laranja)); border-color: var(--laranja); }
.cn-enviar:disabled { opacity: 0.55; cursor: not-allowed; filter: none; }
.cn-enviar .ti-loader-2 { animation: girar 0.9s linear infinite; }

.cn-enviado { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 24px; text-align: center; }
.cn-enviado-icone { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 40px; background: var(--verde-fundo); color: var(--verde-texto); }
.cn-enviado h3 { margin: 6px 0 0; font-family: var(--fonte-titulo); font-size: 24px; }
.cn-enviado p { margin: 0; color: var(--texto-2); }
.cn-enviado-lista { list-style: none; margin: 10px 0 14px; padding: 12px 16px; border-radius: 12px; background: var(--superficie-2); text-align: left; font-size: 13px; min-width: 360px; white-space: pre-line; }
.cn-enviado-lista li { padding: 3px 0; }
.cn-enviado-lista b { color: var(--laranja-texto); margin-right: 4px; }

@media (max-width: 1100px) {
  .compras-dados { grid-template-columns: repeat(2, 1fr); }
  .cn-dados { grid-template-columns: 1fr; }
  .cn-capa { flex-direction: column; align-items: flex-start; }
  .cn-passo { flex-wrap: wrap; }
}

/* Painel AUDITAR (menu Sistemas, só o ADM principal): rankings em tabela, mesma largura das outras telas. */
.auditar-pagina { width: 100%; max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.auditar-pagina > * { flex: none; }
.auditar-abas { align-self: flex-start; }
.auditar-contador { margin-left: 6px; padding: 0 7px; border-radius: 999px; font-size: 11px; background: var(--vermelho-fundo); color: var(--vermelho-texto); }
.auditar-conteudo { display: flex; flex-direction: column; gap: 14px; }
.auditar-filtros { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; }
.auditar-filtros:empty { display: none; }
.auditar-nota { margin: -4px 0 10px; }
.auditar-tabela { max-height: 620px; border: 1px solid var(--borda); border-radius: 12px; }
.auditar-tabela th { position: sticky; top: 0; z-index: 1; }
.auditar-tabela th.auditar-ordenar { cursor: pointer; user-select: none; }
.auditar-tabela th.auditar-ordenar.ativa { color: var(--texto); }
.auditar-tabela td.auditar-posicao { color: var(--texto-3); width: 1%; }
.auditar-tabela td.auditar-nome { font-weight: 600; color: var(--texto); }
.auditar-tabela td.auditar-largo { white-space: normal; min-width: 200px; color: var(--texto-2); }
.auditar-tabela td.auditar-apagado { color: var(--texto-3); font-style: italic; }
.auditar-tabela td.auditar-negativo { color: var(--vermelho-texto); font-weight: 600; }
.auditar-grupo + .auditar-grupo { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--borda); }
.auditar-alertas { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.auditar-linhas { color: var(--texto-3); }
/* Repique (menu Sistemas) */
.repique-pagina { max-width: 1280px; }
.repique-unidades { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.repique-unidade { gap: 4px; align-items: stretch; text-align: left; }
.repique-unidade .obras-barra { width: 100%; margin-top: 4px; }
.repique-unidade-nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; color: var(--texto-2); }
.repique-unidade-total { font-family: var(--fonte-titulo); font-size: 22px; color: var(--texto); line-height: 1.1; }
.repique-unidade-nota { font-size: 11px; font-weight: 500; color: var(--texto-3); }
.repique-avisos { align-items: flex-start; }
.repique-duas { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 14px; }
.repique-tabela-curta { max-height: 360px; }
.repique-motivos-partes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.repique-motivos { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.repique-motivos li span { color: var(--texto); }
.repique-motivos li b { margin-left: 8px; color: var(--texto-3); font-weight: 600; }
.repique-filtros { padding: 0 0 10px; }
.repique-etiqueta { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--superficie-2); color: var(--texto-2); }
.repique-etiqueta.aderiu { background: var(--verde-fundo); color: var(--verde-texto); }
.repique-etiqueta.nao-aderiu { background: var(--vermelho-fundo); color: var(--vermelho-texto); }
.repique-etiqueta.outro { background: var(--laranja-fundo); color: var(--laranja-texto); }
.repique-etiqueta.pendente { background: transparent; color: var(--texto-3); border: 1px dashed var(--borda-forte); }
/* Aba Pacientes */
.auditar-progresso { width: min(420px, 100%); height: 8px; border-radius: 999px; background: var(--borda); overflow: hidden; }
.auditar-progresso span { display: block; height: 100%; width: 0; background: var(--cor-principal); transition: width .3s; }
.auditar-tabela tr.auditar-clicavel { cursor: pointer; }
.auditar-tabela tr.auditar-clicavel:hover td, .auditar-tabela tr.auditar-clicavel.ativa td { background: color-mix(in srgb, var(--cor-principal) 8%, transparent); }
.auditar-resumo-pac { max-height: 320px; }
.auditar-pacientes td { white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.auditar-filtros .pilula.auditar-atalho { margin-left: 0; }
.auditar-problemas { margin-top: 10px; font-size: 13px; color: var(--texto-2); }
.auditar-problemas summary { cursor: pointer; margin-bottom: 6px; }
.auditar-paciente-partes { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }
.auditar-dados { display: grid; grid-template-columns: minmax(110px, auto) 1fr; gap: 4px 12px; margin: 0; font-size: 13px; }
.auditar-dados dt { color: var(--texto-3); }
.auditar-dados dd { margin: 0; color: var(--texto); word-break: break-word; }

/* Paciente do eClínicas no lançamento do caixa (só Sorocaba) */
.campo-com-sugestoes { position: relative; }
.eclinicas-sugestoes { position: absolute; top: 100%; left: 0; right: 0; z-index: 5; margin-top: 4px; padding: 4px; border-radius: 10px; background: var(--superficie); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 0 0 1px var(--borda); max-height: 260px; overflow-y: auto; }
.eclinicas-sugestoes[hidden] { display: none; }
.eclinicas-sugestao { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; height: auto; padding: 6px 8px; border: 0; border-radius: 8px; background: transparent; text-align: left; }
.eclinicas-sugestao:hover { background: var(--superficie-2); }
.eclinicas-sugestao strong { font-size: 13px; font-weight: 600; }
.eclinicas-sugestao span, .eclinicas-sugestoes-aviso { font-size: 11px; color: var(--texto-3); margin: 0; }
.do-eclinicas { box-shadow: inset 3px 0 0 var(--cor-principal); }
.lanc-busca { margin: 0 0 12px; }
.lanc-busca[hidden] { display: none; }
.lanc-busca input { width: 100%; }
#lanc-lupa { vertical-align: middle; margin-left: 4px; }
.dica-eclinicas { display: block; margin-top: 3px; font-size: 11px; color: var(--texto-3); }

/* Controle de taxas das unidades (menu Comprovantes, só o ADM principal) */
.taxas-card.com-atraso { border-color: var(--vermelho-borda); }
.taxas-card-nota { font-size: 11px; font-weight: 600; color: var(--texto-3); }
.taxas-card-nota.atraso { color: var(--vermelho-texto); }
.taxas-card-nota.hoje { color: var(--laranja-texto); }
.taxas-card-nota.ok { color: var(--verde-texto); }
.taxas-filtro { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--texto-2); cursor: pointer; text-transform: none; letter-spacing: 0; }
.taxas-legenda { display: flex; gap: 14px; flex-wrap: wrap; margin: 0 0 10px; font-size: 12px; color: var(--texto-3); }
.taxas-legenda > span { display: inline-flex; align-items: center; gap: 6px; }
.taxas-ponto { width: 10px; height: 10px; border-radius: 999px; border: 1px solid var(--borda-forte); background: var(--superficie); }
.taxas-tabela { max-height: 620px; border: 1px solid var(--borda); border-radius: 12px; }
.taxas-tabela th { position: sticky; top: 0; z-index: 1; }
.taxas-tabela th.taxas-col, .taxas-tabela td.taxas-col { text-align: center; }
.taxas-marcas { display: inline-flex; gap: 4px; }
.taxa-marca {
  width: 28px; height: 28px; min-width: 28px; padding: 0; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
  background: var(--superficie); color: var(--texto-3); border: 1px solid var(--borda-forte);
  transition: transform 0.15s var(--suave), background 0.15s, border-color 0.15s;
}
.taxa-marca:hover { transform: scale(1.1); border-color: var(--laranja); }
.taxa-marca .ti { font-size: 15px; }
.taxa-marca.pago, .taxas-ponto.pago { background: var(--verde-fundo); color: var(--verde-texto); border-color: var(--verde-borda); }
.taxa-marca.atrasado, .taxas-ponto.atrasado { background: var(--vermelho-fundo); color: var(--vermelho-texto); border-color: var(--vermelho-borda); }
.taxa-marca.hoje, .taxas-ponto.hoje { background: var(--laranja-fundo); color: var(--laranja-texto); border-color: var(--laranja); }
.taxa-marca.breve { border-style: dashed; border-color: var(--laranja); }
.caixa-tabela tr.taxas-linha-atraso td:first-child { box-shadow: inset 4px 0 0 var(--vermelho-texto); }
.taxas-atrasos { color: var(--vermelho-texto); font-weight: 700; }
.taxas-pendencias-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 6px 18px; }
.taxas-pendencia { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; font-size: 13px; }
.taxas-pendencia.atrasado { background: var(--vermelho-fundo); }
.taxas-pendencia.hoje { background: var(--laranja-fundo); }
.taxas-pendencia-nome { flex: 1; font-weight: 600; color: var(--texto); }
.taxas-pendencia-situacao { font-size: 12px; color: var(--texto-3); white-space: nowrap; }
.taxas-pendencia.atrasado .taxas-pendencia-situacao { color: var(--vermelho-texto); font-weight: 600; }
.taxas-pendencia.hoje .taxas-pendencia-situacao { color: var(--laranja-texto); font-weight: 600; }
.taxas-pendencias-dica { margin: 10px 0 0; font-size: 12px; color: var(--texto-3); }
.caixa-tabela td.taxas-nome-unidade { cursor: pointer; transition: color 0.15s; }
.caixa-tabela td.taxas-nome-unidade:hover { color: var(--laranja-texto); text-decoration: underline; text-underline-offset: 3px; }
.caixa-tabela tr.taxas-linha-ativa td { background: color-mix(in srgb, var(--cor-principal) 10%, transparent); }
.caixa-tabela tr.taxas-linha-ativa td.taxas-nome-unidade { color: var(--laranja-texto); }
.taxas-card-nota.breve { color: var(--laranja-texto); }
.taxas-card.ativa { border-color: var(--laranja); }

/* ---------- Prova Real (extrato bancário × despesas) ---------- */
.pr-pagina { max-width: 1320px; }
.pr-pagina, .pr-janela {
  --pr-verde-fundo: var(--verde-fundo); --pr-verde-texto: var(--verde-texto); --pr-verde-borda: var(--verde-borda);
  --pr-amarelo-fundo: #fdf6dd; --pr-amarelo-texto: #8a6100; --pr-amarelo-borda: #efdfa3;
  --pr-vermelho-fundo: var(--vermelho-fundo); --pr-vermelho-texto: var(--vermelho-texto); --pr-vermelho-borda: var(--vermelho-borda);
  --pr-laranja-fundo: var(--laranja-fundo); --pr-laranja-texto: var(--laranja-texto);
  --pr-lilas-fundo: #f2edfb; --pr-lilas-texto: #5b3f99; --pr-lilas-borda: #ddd2f2;
  --pr-azul-fundo: #e5f0fa; --pr-azul-texto: #1f5a92; --pr-azul-borda: #c7dcf0;
  --pr-cinza-fundo: var(--superficie-2); --pr-cinza-texto: var(--texto-2); --pr-cinza-borda: var(--borda-forte);
}
@media (prefers-color-scheme: dark) {
  .pr-pagina, .pr-janela {
    --pr-amarelo-fundo: #2b2410; --pr-amarelo-texto: #f0d27a; --pr-amarelo-borda: #4a3d16;
    --pr-lilas-fundo: #221b33; --pr-lilas-texto: #c9b5f5; --pr-lilas-borda: #3b2f57;
    --pr-azul-fundo: #142638; --pr-azul-texto: #a5cdf2; --pr-azul-borda: #24405c;
  }
}
.pr-arquivo { margin: 0; font-size: 12px; color: var(--texto-3); display: flex; align-items: center; gap: 4px; }
.pr-resumo { display: grid; grid-template-columns: minmax(260px, 1fr) 3fr; gap: 14px; }
.pr-principal {
  display: flex; flex-direction: column; gap: 8px; justify-content: center;
  background: linear-gradient(160deg, var(--marinho-claro), var(--marinho)); color: var(--sobre-marinho);
}
.pr-principal .pr-cartao-rotulo, .pr-principal .pr-cartao-nota { color: var(--sobre-cor-2); }
.pr-principal .obras-barra { background: rgba(255, 255, 255, 0.18); }
.pr-principal .obras-barra > span { background: var(--laranja); }
.pr-percentual { font-family: var(--fonte-titulo); font-size: 34px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pr-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.pr-cartao {
  height: auto; padding: 12px 14px; border-radius: 14px; text-align: left;
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  background: var(--superficie); border: 1px solid var(--borda); box-shadow: var(--sombra);
  border-left: 4px solid var(--borda-forte);
}
button.pr-cartao:hover { transform: translateY(-1px); box-shadow: var(--sombra-flutuante); }
.pr-cartao strong { font-family: var(--fonte-titulo); font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--texto); }
.pr-cartao-rotulo { font-size: 12px; font-weight: 600; color: var(--texto-2); }
.pr-cartao-nota { font-size: 11.5px; color: var(--texto-3); }
.pr-cartao.verde { border-left-color: var(--pr-verde-texto); background: color-mix(in srgb, var(--pr-verde-fundo) 55%, var(--superficie)); }
.pr-cartao.amarelo { border-left-color: var(--pr-amarelo-texto); background: color-mix(in srgb, var(--pr-amarelo-fundo) 55%, var(--superficie)); }
.pr-cartao.vermelho { border-left-color: var(--pr-vermelho-texto); background: color-mix(in srgb, var(--pr-vermelho-fundo) 55%, var(--superficie)); }
.pr-cartao.laranja { border-left-color: var(--laranja); background: color-mix(in srgb, var(--pr-laranja-fundo) 55%, var(--superficie)); }
.pr-cartao.lilas { border-left-color: var(--pr-lilas-texto); background: color-mix(in srgb, var(--pr-lilas-fundo) 55%, var(--superficie)); }
.pr-abas { flex-wrap: wrap; border-radius: 18px; }
.pr-aba { display: inline-flex; align-items: center; gap: 6px; }
.pr-aba-n { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--superficie-3); color: var(--texto-2); }
.pr-aba.ativa .pr-aba-n { background: rgba(255, 255, 255, 0.2); color: inherit; }
.pr-ponto { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.pr-ponto.verde { background: var(--pr-verde-texto); }
.pr-ponto.amarelo { background: var(--amarelo); }
.pr-ponto.vermelho { background: var(--pr-vermelho-texto); }
.pr-ponto.laranja { background: var(--laranja); }
.pr-ponto.lilas { background: #8a6bd1; }
.pr-ponto.cinza { background: var(--texto-3); }
.pr-filtros { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pr-conteudo-aba { border-top: 4px solid var(--borda-forte); }
.pr-conteudo-aba.verde { border-top-color: var(--pr-verde-texto); }
.pr-conteudo-aba.amarelo { border-top-color: var(--amarelo); }
.pr-conteudo-aba.vermelho { border-top-color: var(--pr-vermelho-texto); }
.pr-conteudo-aba.laranja { border-top-color: var(--laranja); }
.pr-conteudo-aba.lilas { border-top-color: #8a6bd1; }
.pr-conteudo-aba.cinza { border-top-color: var(--texto-3); }
.pr-ajuda { font-size: 12.5px; color: var(--texto-3); margin: 0 0 10px; }
.pr-secao-itens + .pr-secao-itens { margin-top: 18px; }
.pr-secao-titulo { font-family: var(--fonte-titulo); font-size: 14px; font-weight: 600; margin: 4px 0 6px; color: var(--texto); }
.pr-tabela { max-height: 70vh; }
.pr-tabela th { position: sticky; top: 0; z-index: 1; background: var(--superficie-2); }
.pr-tabela td { vertical-align: top; }
.pr-tabela tr.pr-linha td { border-bottom: none; padding-bottom: 2px; }
.pr-tabela tr.pr-sub td { padding-top: 0; padding-bottom: 8px; font-size: 11.5px; color: var(--texto-3); white-space: normal; line-height: 1.4; }
.pr-tabela tr.par td { background: color-mix(in srgb, var(--superficie-2) 70%, transparent); }
.pr-tabela tbody tr:hover td { background: var(--superficie-3); }
.pr-tabela tr.pr-linha.apagada td { opacity: 0.6; }
.pr-tabela tfoot td { position: sticky; bottom: 0; font-weight: 600; background: var(--superficie-2); border-top: 1px solid var(--borda-forte); }
.pr-tabela td.pr-data { width: 56px; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.pr-favorecido { max-width: 320px; }
.pr-favorecido strong { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.pr-meta { display: block; font-size: 11px; color: var(--texto-3); white-space: normal; }
.pr-cruz-texto { display: inline; white-space: normal; }
.pr-valor { font-weight: 600; }
.pr-tabela td.pr-despesa { max-width: 340px; overflow: hidden; text-overflow: ellipsis; color: var(--texto-2); }
.pr-chip {
  display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; white-space: nowrap; margin-right: 4px;
  background: var(--pr-cinza-fundo); color: var(--pr-cinza-texto); border: 1px solid var(--pr-cinza-borda);
}
.pr-chip.conferido { background: var(--pr-verde-fundo); color: var(--pr-verde-texto); border-color: var(--pr-verde-borda); }
.pr-chip.mesAnterior { background: var(--pr-azul-fundo); color: var(--pr-azul-texto); border-color: var(--pr-azul-borda); }
.pr-chip.divergencia { background: var(--pr-amarelo-fundo); color: var(--pr-amarelo-texto); border-color: var(--pr-amarelo-borda); }
.pr-chip.naoLancado { background: var(--pr-vermelho-fundo); color: var(--pr-vermelho-texto); border-color: var(--pr-vermelho-borda); }
.pr-chip.naoNoBanco { background: var(--pr-laranja-fundo); color: var(--pr-laranja-texto); border-color: var(--laranja-suave); }
.pr-chip.rateio, .pr-chip.soEclinicas { background: var(--pr-lilas-fundo); color: var(--pr-lilas-texto); border-color: var(--pr-lilas-borda); }
.pr-chip.anotado { background: var(--destaque-fundo); color: var(--destaque-texto); border-color: var(--borda-forte); }
.pr-col-nota { width: 72px; text-align: center; }
.pr-nota.tem { color: var(--laranja); background: var(--laranja-fundo); }
.pr-cartao.azul { border-left-color: var(--pr-azul-texto); background: color-mix(in srgb, var(--pr-azul-fundo) 55%, var(--superficie)); }
.pr-ponto.azul { background: #4a8fd1; }
.pr-conteudo-aba.azul { border-top-color: #4a8fd1; }
.pr-conteudo-aba > .rotulo > span:last-child { font-size: 12px; font-weight: 400; color: var(--texto-3); text-transform: none; letter-spacing: 0; text-align: right; }
@media (max-width: 1100px) { .pr-resumo { grid-template-columns: 1fr; } }

/* ---------- Painel da unidade (parte de baixo da tela inicial) ----------
   Cores da empresa: azul-marinho #012351, bege #C3B8B2 e branco. Séries dos gráficos na ordem fixa (paleta validada para daltonismo),
   com tons próprios no tema escuro. */
.painel-unidade {
  --pu-marinho: #012351; --pu-bege: #c3b8b2;
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s5: #e87ba4; --s6: #008300; --s7: #6250d6; --s8: #e34948;
  --pu-bom: #1f8a55; --pu-atencao: #c77700; --pu-ruim: #c8413c;
  margin-top: 14px; display: flex; flex-direction: column; gap: 14px;
}
@media (prefers-color-scheme: dark) {
  .painel-unidade {
    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767;
    --pu-bom: #4cc38a; --pu-atencao: #e8a33d; --pu-ruim: #ef7d77;
  }
}
.pu-cabecalho {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; border-radius: var(--raio-card); color: var(--sobre-cor);
  background: linear-gradient(120deg, var(--pu-marinho) 0%, color-mix(in srgb, var(--pu-marinho) 78%, #2a5a9a) 100%);
  border: 1px solid color-mix(in srgb, var(--pu-bege) 25%, transparent); box-shadow: var(--sombra);
}
.pu-sobretitulo { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pu-bege); }
.pu-titulo { margin: 2px 0 0; font-family: var(--fonte-titulo); font-size: 22px; font-weight: 600; }
.pu-cabecalho-acoes { display: flex; align-items: center; gap: 10px; }
.pu-atualizado { font-size: 12px; color: color-mix(in srgb, var(--pu-bege) 85%, #fff); }
.pu-atualizar { background: rgba(255, 255, 255, 0.1); color: var(--sobre-cor); border-color: rgba(255, 255, 255, 0.2); }

.pu-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.pu-kpi {
  display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 16px;
  background: var(--superficie); border: 1px solid var(--borda); box-shadow: var(--sombra);
  border-top: 3px solid var(--pu-bege);
}
.pu-kpi.destaque { border-top-color: var(--s1); }
.pu-kpi-rotulo { font-size: 12px; font-weight: 600; color: var(--texto-2); }
.pu-kpi-rotulo .ti { color: var(--texto-3); }
.pu-kpi-valor { font-family: var(--fonte-titulo); font-size: 22px; font-weight: 600; color: var(--texto); font-variant-numeric: tabular-nums; }
.pu-kpi-nota { font-size: 11.5px; color: var(--texto-3); }
.pu-variacao { font-size: 12px; font-weight: 600; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.pu-variacao.bom { color: var(--pu-bom); }
.pu-variacao.ruim { color: var(--pu-ruim); }
.pu-variacao-vs { font-weight: 400; color: var(--texto-3); }

.pu-grade-cartoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pu-cartao { min-width: 0; }
.pu-cartao.largo { grid-column: span 2; }
.pu-total-cartao { font-size: 13px; font-weight: 600; color: var(--texto-2); text-transform: none; letter-spacing: 0; font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) {
  .pu-grade-cartoes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .pu-grade-cartoes { grid-template-columns: minmax(0, 1fr); }
  .pu-cartao.largo { grid-column: auto; }
}

/* Gráficos */
.pu-svg { display: block; width: 100%; height: auto; overflow: visible; }
.pu-grade line { stroke: var(--borda); stroke-width: 1; }
.pu-grade text, .pu-eixo { font-size: 10px; fill: var(--texto-3); font-variant-numeric: tabular-nums; }
.pu-fundo-alvo { fill: transparent; }
.pu-alvo:hover .pu-fundo-alvo { fill: color-mix(in srgb, var(--texto) 5%, transparent); }
.pu-alvo.hoje .pu-eixo { fill: var(--texto); font-weight: 700; }
.pu-barra { fill: var(--s1); }
.pu-alvo:hover .pu-barra { filter: brightness(1.12); }
.pu-linha { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.pu-linha.s1 { stroke: var(--s1); }
.pu-linha.s2 { stroke: var(--s2); }
.pu-ponto { stroke: var(--superficie); stroke-width: 2; }
.pu-ponto.s1 { fill: var(--s1); }
.pu-ponto.s2 { fill: var(--s2); }
.pu-guia-linha { stroke: var(--texto-3); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; }
.pu-guia:hover .pu-guia-linha { opacity: 1; }
.pu-guia:hover .pu-fundo-alvo { fill: transparent; }

.painel-unidade .s1 { --cor: var(--s1); }
.painel-unidade .s2 { --cor: var(--s2); }
.painel-unidade .s3 { --cor: var(--s3); }
.painel-unidade .s4 { --cor: var(--s4); }
.painel-unidade .s5 { --cor: var(--s5); }
.painel-unidade .s6 { --cor: var(--s6); }
.painel-unidade .s7 { --cor: var(--s7); }
.painel-unidade .s8 { --cor: var(--s8); }
.pu-fatia { fill: var(--cor); stroke: none; transition: opacity 0.15s; }
.pu-rosca-desenho svg:hover .pu-fatia:not(:hover) { opacity: 0.55; }
.pu-rosca { display: flex; align-items: center; gap: 16px; }
.pu-rosca-desenho { position: relative; flex: none; width: 160px; height: 160px; }
.pu-rosca-centro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; text-align: center; }
.pu-rosca-centro strong { font-family: var(--fonte-titulo); font-size: 15px; font-weight: 600; color: var(--texto); font-variant-numeric: tabular-nums; }
.pu-rosca-centro span { font-size: 10.5px; color: var(--texto-3); }
.pu-legenda { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pu-legenda li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 38px; align-items: center; gap: 8px; font-size: 12.5px; }
.pu-legenda-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto); }
.pu-legenda-valor { color: var(--texto-2); font-variant-numeric: tabular-nums; }
.pu-legenda-pct { text-align: right; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.pu-marca { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--cor); }
.pu-marca.linha { width: 14px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 6px; }
.pu-marca.claro { background: color-mix(in srgb, var(--cor) 45%, var(--superficie)); }
.pu-legenda-linha { display: flex; gap: 16px; font-size: 12px; color: var(--texto-2); margin-bottom: 6px; }
.pu-legenda-linha .pu-marca:not(.linha) { margin-right: 6px; vertical-align: -1px; }

/* Barras deitadas (mídias, médicos) e uso do teto */
.pu-barras, .pu-tetos { display: flex; flex-direction: column; gap: 8px; }
.pu-barras-linha, .pu-teto { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 12.5px; }
.pu-barras-nome, .pu-teto-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto); }
.pu-barras-trilho, .pu-teto-trilho { position: relative; height: 10px; border-radius: 4px; background: var(--superficie-3); overflow: hidden; }
.pu-barras-cheio { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0 4px 4px 0; background: var(--s1); }
.pu-barras-cheio.claro { background: color-mix(in srgb, var(--s1) 45%, var(--superficie)); }
.pu-barras-valor, .pu-teto-pct { min-width: 44px; text-align: right; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.pu-teto-cheio { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0 4px 4px 0; }
.pu-teto-cheio.dentro { background: var(--pu-bom); }
.pu-teto-cheio.perto { background: var(--pu-atencao); }
.pu-teto-cheio.estourado { background: var(--pu-ruim); }
.pu-teto-pct.estourado { color: var(--pu-ruim); font-weight: 600; }
.pu-teto-pct.perto { color: var(--pu-atencao); }
.pu-cartao.largo .pu-barras-linha, .pu-cartao.largo .pu-teto { grid-template-columns: minmax(0, 220px) minmax(0, 1fr) auto; }
.pu-barras-linha:hover, .pu-teto:hover, .pu-legenda li:hover { background: var(--superficie-2); border-radius: 6px; }

.pu-dica {
  position: fixed; z-index: 60; pointer-events: none; max-width: 280px;
  display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px;
  background: var(--superficie); color: var(--texto); border: 1px solid var(--borda-forte); box-shadow: var(--sombra-flutuante);
  font-size: 12px; font-variant-numeric: tabular-nums;
}
.pu-dica[hidden] { display: none !important; }
.pu-dica strong { font-size: 12.5px; }
.pu-dica span { color: var(--texto-2); }

/* ---------- Conferência do caixa e Boletos baixados no estilo do painel da unidade ----------
   Faixa bege no topo, título em caixa-alta, valores em linhas de extrato, quadro da diferença com barra de situação
   e os números do Caixa e do eClinicas lado a lado (pedido do usuário em 26/10/2026: mais corporativo, mesmo conteúdo). */
.cartao-corp {
  --corp-bege: #c3b8b2; --corp-azul: #2a78d6;
  --corp-bom: #1f8a55; --corp-ruim: #c8413c;
  border-top: 3px solid var(--corp-bege); border-radius: 16px; padding: 14px 16px 16px;
}
@media (prefers-color-scheme: dark) {
  .cartao-corp { --corp-azul: #3987e5; --corp-bom: #4cc38a; --corp-ruim: #ef7d77; }
}
.cartao-corp > .rotulo {
  margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--borda);
  font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-2);
}
.cartao-corp > .rotulo > span:first-child { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cartao-corp > .rotulo .ti { color: var(--corp-bege); font-size: 15px; }
.cartao-corp .periodo { margin-left: 4px; border-radius: 8px; text-transform: none; letter-spacing: 0; }
.cartao-corp .periodo button { border-radius: 6px; }
.cartao-corp .periodo button[aria-pressed="true"] { background: var(--corp-azul); color: var(--sobre-cor); }
.cartao-corp #caixa-salvo { font-size: 10.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--texto-3); }

/* Linhas de valor: rótulo à esquerda, valor à direita, separadas por uma linha fina */
.cartao-corp .campo-valor {
  margin: 0; padding: 8px 0; border-bottom: 1px dashed var(--borda-forte);
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-3);
}
.cartao-corp .campo-valor input {
  width: 150px; height: 30px; padding: 0 2px; border: 0; border-radius: 0; background: transparent; box-shadow: none;
  font-family: var(--fonte-titulo); font-size: 16px; font-weight: 600; letter-spacing: 0; color: var(--texto);
}
.cartao-corp .campo-valor input:focus { outline: none; box-shadow: inset 0 -2px 0 var(--corp-azul); }
.cartao-corp .campo-valor-info { margin: 4px 0 0; }

/* Quadro da diferença: fundo neutro, barra colorida à esquerda e o valor na cor da situação */
.cartao-corp .diferenca {
  position: relative; margin-top: 12px; padding: 12px 14px 12px 18px; border-radius: 10px;
  background: var(--superficie-2); box-shadow: inset 0 0 0 1px var(--borda); color: var(--texto-2);
}
.cartao-corp .diferenca::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0; background: var(--borda-forte); }
.cartao-corp .diferenca-rotulo { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-3); }
.cartao-corp .diferenca-valor { margin: 2px 0; font-size: 24px; color: var(--texto); }
.cartao-corp .diferenca.ok::before { background: var(--corp-bom); }
.cartao-corp .diferenca.falta-planilha, .cartao-corp .diferenca.falta-eclinicas { background: var(--superficie-2); box-shadow: inset 0 0 0 1px var(--borda); }
.cartao-corp .diferenca.falta-planilha::before { background: var(--corp-ruim); }
.cartao-corp .diferenca.falta-planilha .diferenca-valor, .cartao-corp .diferenca.falta-planilha .diferenca-texto { color: var(--corp-ruim); }
.cartao-corp .diferenca.falta-eclinicas::before { background: var(--corp-bom); }
.cartao-corp .diferenca.falta-eclinicas .diferenca-valor, .cartao-corp .diferenca.falta-eclinicas .diferenca-texto { color: var(--corp-bom); }
.cartao-corp .diferenca.ok .diferenca-texto { color: var(--corp-bom); }

/* Boletos: Caixa e eClinicas lado a lado, como dois indicadores */
.cartao-corp .boletos-data {
  padding: 2px 8px; border-radius: 6px; background: var(--superficie-2); box-shadow: inset 0 0 0 1px var(--borda);
  font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-decoration: none; color: var(--texto-2);
}
.cartao-corp .comparativo-numeros {
  display: grid; grid-template-columns: 1fr 1fr; margin: 0 0 10px;
  border-radius: 10px; background: var(--superficie-2); box-shadow: inset 0 0 0 1px var(--borda); overflow: hidden;
}
.cartao-corp .comparativo-numeros:has(> :only-child) { grid-template-columns: 1fr; }
.cartao-corp .comparativo-item {
  flex-direction: column-reverse; align-items: flex-start; gap: 2px; padding: 10px 14px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-3);
}
.cartao-corp .comparativo-item + .comparativo-item { border-left: 1px solid var(--borda); }
.cartao-corp .contador-numero {
  width: auto; height: auto; border-radius: 0; background: none; box-shadow: none;
  font-size: 28px; line-height: 1.1; letter-spacing: 0; color: var(--texto);
}
.cartao-corp .comparativo-item:first-child .contador-numero { color: var(--corp-azul); }
.cartao-corp .texto-ok, .cartao-corp .texto-alerta {
  display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0;
  font-size: 12px; font-weight: 600;
}
.cartao-corp .texto-ok::before, .cartao-corp .texto-alerta::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.cartao-corp .texto-ok { color: var(--corp-bom); }
.cartao-corp .texto-alerta { color: var(--corp-ruim); }
.cartao-corp .boletos-acoes { gap: 8px; margin-top: 10px; }
.cartao-corp .boletos-acoes .boletos-comparar, .cartao-corp .boletos-comparar {
  margin: 0; height: 28px; padding: 0 14px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--borda-forte);
  background: var(--superficie); color: var(--texto); font-size: 12px; font-weight: 600;
}
.cartao-corp .boletos-acoes .boletos-comparar:first-child { background: var(--corp-azul); color: var(--sobre-cor); box-shadow: none; }
.cartao-corp .boletos-acoes .boletos-comparar:hover { filter: brightness(1.08); }
.cartao-corp #boletos > .campo-valor-info { margin-top: 8px; text-align: center; }
.cartao-corp .campo-valor-api input { width: 124px; }

/* ---------- Obrigações de hoje (checklist da tela inicial) ----------
   Pedido do usuário em 26/10/2026: estilo do painel com cara de obrigação. O que falta fica em destaque com a etiqueta
   "Obrigatório" e a barra mostra quanto do dia já foi fechado; o que foi feito fica discreto. */
.checklist-selo { padding: 2px 8px; border-radius: 6px; background: color-mix(in srgb, var(--corp-ruim) 14%, transparent); color: var(--corp-ruim); font-size: 11.5px; font-weight: 700; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.checklist-selo.completo { background: color-mix(in srgb, var(--corp-bom) 14%, transparent); color: var(--corp-bom); }
.checklist-progresso { margin-bottom: 12px; }
.checklist-barra { display: block; height: 6px; border-radius: 4px; background: var(--superficie-3); overflow: hidden; }
.checklist-barra > span { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--corp-azul); transition: width 0.3s var(--suave); }
.checklist-aviso { display: flex; align-items: center; gap: 4px; margin: 8px 0 0; font-size: 12px; font-weight: 600; color: var(--corp-ruim); }
.checklist-aviso.completo { color: var(--corp-bom); }
.checklist-aviso .ti { font-size: 15px; }
.checklist .checklist-item {
  position: relative; margin: 0 0 6px; padding: 9px 10px 9px 14px; border-radius: 8px; cursor: pointer;
  background: var(--superficie-2); box-shadow: inset 0 0 0 1px var(--borda); transition: background 0.15s;
}
.checklist .checklist-item:last-child { margin-bottom: 0; }
.checklist .checklist-item::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--corp-ruim); }
.checklist .checklist-item:hover { background: var(--superficie-3); }
.checklist .checklist-item input { accent-color: var(--corp-azul); width: 16px; height: 16px; margin: 0; flex: none; }
.checklist-nome { flex: 1; min-width: 0; font-weight: 600; color: var(--texto); }
.checklist-etiqueta { flex: none; padding: 1px 7px; border-radius: 5px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--corp-ruim); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--corp-ruim) 45%, transparent); }
.checklist .checklist-item.feito-item { background: transparent; }
.checklist .checklist-item.feito-item::before { background: var(--corp-bom); }
.checklist .checklist-item.feito-item .checklist-nome { font-weight: 500; color: var(--texto-3); }
.checklist .checklist-item.feito-item .checklist-etiqueta { color: var(--corp-bom); box-shadow: none; background: color-mix(in srgb, var(--corp-bom) 12%, transparent); }

/* Olhinho da Conferência do caixa: com os valores ocultos, cada número vira bolinhas (pedido do usuário em 26/10/2026) */
.caixa-olho { color: var(--texto-2); font-size: 16px; text-transform: none; }
.caixa-olho[aria-pressed="true"] { color: var(--corp-azul); }
.valores-ocultos .campo-valor input, .valores-ocultos .diferenca-valor, .valores-ocultos .campo-valor-info { -webkit-text-security: disc; letter-spacing: 0.08em; }
.valores-ocultos .campo-valor input::placeholder { -webkit-text-security: none; }

/* Pendências do fechamento (menu Fechamento no topo, só o ADM principal; 28/10/2026) */
.menu-suspenso { position: relative; }
.menu-suspenso[hidden] { display: none; }
.menu-suspenso-lista { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 340px; padding: 6px; box-shadow: var(--sombra-flutuante); }
.topo .menu-suspenso-lista button { height: auto; min-height: 0; line-height: 1.3; display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--texto); text-align: left; }
.topo .menu-suspenso-lista button:hover { background: var(--superficie-2); }
.menu-suspenso-lista button .ti { color: var(--laranja); margin-top: 2px; }
.menu-suspenso-lista button span { display: flex; flex-direction: column; gap: 2px; }
.menu-suspenso-lista small { color: var(--texto-2); font-size: 12px; }
.fech-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.fech-cartao { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--superficie); border: 1px solid var(--borda); }
.fech-cartao span { font-size: 12px; color: var(--texto-2); }
.fech-cartao strong { font-family: var(--fonte-titulo); font-size: 22px; }
.fech-cartao small { font-size: 11px; color: var(--texto-3); }
.fech-cartao.vermelho { background: var(--vermelho-fundo); border-color: var(--vermelho-borda); }
.fech-cartao.vermelho strong { color: var(--vermelho-texto); }
.fech-cartao.verde { background: var(--verde-fundo); border-color: var(--verde-borda); }
.fech-cartao.verde strong { color: var(--verde-texto); }
.fech-cartao.cinza strong { color: var(--texto-2); }
.fech-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 12px; white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.fech-chip.ok { background: var(--verde-fundo); color: var(--verde-texto); }
.fech-chip.pendente { background: var(--vermelho-fundo); color: var(--vermelho-texto); font-weight: 600; }
.fech-chip.sem { background: var(--superficie-2); color: var(--texto-3); }
.auditar-tabela tr.fech-detalhe td { background: var(--superficie-2); white-space: normal; padding: 12px; }
.fech-frentes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.fech-frente { background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.fech-frente .ajuda { margin: 2px 0 6px; }
.fech-itens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; max-height: 340px; overflow-y: auto; }
.fech-itens li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--borda); font-size: 13px; }
.fech-data { color: var(--texto-3); font-size: 12px; }
.fech-nome { display: flex; flex-direction: column; min-width: 0; }
.fech-nome strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.fech-nome small { color: var(--texto-2); font-size: 11px; }
.fech-valor { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Fase 3: no programa instalado, faixa nas telas que agora são oficiais na web */
.oficial-na-web { margin: 0; padding: 10px 14px; font-size: 13px; color: var(--texto); background: color-mix(in srgb, var(--cor-destaque) 14%, var(--superficie)); border-left: 4px solid var(--cor-destaque); }

/* ---------- Responsivo (28/10/2026, pedido do usuário: o hub inteiro na web, também no celular) ----------
   Até 1100 px: uma coluna só na tela principal. Até 760 px: celular (topo em linhas, anel menor, janelas na tela toda,
   grades em uma ou duas colunas). Tabelas largas continuam com rolagem para o lado dentro do próprio cartão. */
.topo .selo { white-space: nowrap; }
.emp-direcoes { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.repique-duas { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.conferencia-obs ul, .obras-centros-lista { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.auditar-paciente-partes { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.taxas-pendencias-lista { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.inferior.quatro { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }

@media (max-width: 1100px) {
  .principal { grid-template-columns: minmax(0, 1fr); }
  .obras-resumo { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  body { padding: 8px; }
  .topo { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .topo #busca { order: 10; flex: 1 1 100%; width: 100%; min-width: 0; }
  .inferior { grid-template-columns: minmax(0, 1fr); }
  .anel { transform: scale(0.8); transform-origin: 50% 0; margin-bottom: -84px; }
  .tela { padding: 10px; gap: 10px; }
  .tela-titulo h2 { font-size: 16px; }
  .tela-topo { gap: 6px; }
  .modal-fundo { padding: 8px; align-items: flex-start; }
  .modal, .modal-largo, .modal-medio { width: 100%; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow-y: auto; }
  .et-linha { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cn-dados { grid-template-columns: minmax(0, 1fr); }
  .grade-lanc { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
  .caixa-totais, .fech-resumo, .dre-resultado { grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); }
  .pu-cartao.largo .pu-barras-linha, .pu-cartao.largo .pu-teto { grid-template-columns: minmax(0, 110px) minmax(0, 1fr) auto; }
  .caixa-tabela { -webkit-overflow-scrolling: touch; }
  .diario-item { grid-template-columns: 70px minmax(0, 1fr); }
  .diario-item > :nth-child(2) { display: none; }
  .tela-titulo, .tela-titulo > div { min-width: 0; }
  .tela-titulo .conta-detalhe { white-space: normal; }
  .obras-abas { display: flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .obras-abas button { flex: none; }
  .conta { flex-wrap: wrap; }
  .estorno-linha .conta-texto { flex: 1 1 55%; }
  .estorno-parcela, .estorno-valor, .estorno-linha .pilula, .estorno-pago-em { width: auto; }
  .estorno-linha .pilula, .estorno-pago-em { margin-left: auto; }
  .rotulo, .rotulo-acoes { flex-wrap: wrap; }
  table.dre-despesas, table.compras-tabela { display: block; max-width: 100%; overflow-x: auto; }
  .compras-ferramentas { flex-wrap: wrap; }
  .compras-unidade { width: 100%; }
  .compras-busca { min-width: 0; flex: 1 1 100%; }
  .tela select { max-width: 100%; }
}

/* ---------- Revisão de uso (29/10/2026) ---------- */
/* Linhas e títulos de tabela clicáveis: dá para chegar pelo teclado e ver onde está */
[tabindex="0"]:focus-visible { outline: 2px solid color-mix(in srgb, var(--cor-destaque) 85%, #1a0d00); outline-offset: -2px; }
.topo h1 { white-space: nowrap; }
.topo .data { white-space: nowrap; }
/* Sem mouse (celular, tablet): editar e excluir sempre visíveis e alvos maiores para o dedo */
@media (hover: none) {
  .nota-acoes, .emp-linha .nota-acoes, .emp-editar-rateio { opacity: 1; }
}
@media (pointer: coarse) {
  .remover-x { width: 36px; height: 36px; }
  .redondo.pequeno { width: 36px; height: 36px; }
  .botao-pequeno, .pilula, .link-discreto, .botao-mini, .boletos-comparar { min-height: 36px; }
  .taxa-marca { min-width: 32px; min-height: 32px; }
}

@media (max-width: 760px) {
  body { padding-bottom: 56px; } /* o botão Atividades não cobre o fim da página */
  .aviso { left: 12px; right: 12px; max-width: none; transform: translateY(20px); }
  .aviso.visivel { transform: none; pointer-events: none; } /* no celular o aviso não segura o toque nos botões de baixo */
  /* Topo das telas: o X fica no canto, junto do título, e os outros botões quebram embaixo */
  .tela-topo { position: relative; padding-right: 56px; }
  .tela-topo > [id$="-fechar"] { position: absolute; top: 10px; right: 10px; }
  /* Listas de notas e pedidos: o nome ganha a linha toda; valor e botões vão para baixo, à direita */
  .nota-linha { flex-wrap: wrap; row-gap: 2px; }
  .nota-linha .conta-texto { flex: 1 1 calc(100% - 90px); }
  .nota-linha .conta-texto + * { margin-left: auto; }
  .nota-linha .conta-nome { white-space: normal; }
  .emp-cobrar-item { flex: 1 1 100%; }
  .lanc-calculos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade-devolucao { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modal, .modal-largo, .modal-medio { max-height: none; overflow: visible; }
  .painel-tema { left: 8px; right: 8px; width: auto; max-height: calc(100dvh - 90px); overflow-y: auto; }
}

@media (max-width: 420px) {
  .anel { transform: scale(0.7); margin-bottom: -126px; }
  .caixa-tile strong { font-size: 16px; }
}

/* Erro de preenchimento junto do campo (erroNoCampo em src/base.js) */
[aria-invalid="true"] { border-color: var(--vermelho-texto) !important; }
.erro-campo { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; line-height: 1.35; color: var(--vermelho-texto); }

/* Pessoa da unidade (na web): presa à própria unidade; o que é só do ADM some da tela (o servidor também recusa) */
.papel-unidade .so-adm, .papel-unidade [id$="-sheets"], .papel-unidade #despesas-pintar, .papel-unidade #despesas-cores, .papel-unidade #conferencia-token, .papel-unidade #diario-abrir, .papel-unidade #diario, .papel-unidade #cfg-trazer, .papel-unidade #compras-sheets,
.papel-unidade #cp-voltar, .papel-unidade #cp-nao, .papel-unidade #cp-comprado, .papel-unidade #cp-salvar,
.papel-unidade .compras-janela-compra .campos-linha, .papel-unidade #unidade-abrir .ti-chevron-down { display: none !important; }
.papel-unidade #unidade-abrir { cursor: default; }