/* Acabamento visual — proposta de 14/10/2026 (camada POR CIMA de interface-visual.css).
   Mesmo padrão das camadas anteriores: só age dentro de .interface-visual, usa só as
   variáveis de tema (--primary, --border, --card-bg...) e não mexe em IDs, eventos,
   permissões, .hidden nem na geometria da foto/câmera. */

/* 1) Topo igual em todas as telas: título à esquerda; Aparência e operador sempre à direita, na mesma ordem. */
.interface-visual .topbar > :first-child { margin-right: auto; }
.interface-visual .topbar .unidade-topbar-operacoes { order: 1; }
.interface-visual .topbar .aparencia-rapida { order: 2; margin-left: 0; }
.interface-visual .topbar #auth-usuario-logado {
  order: 3;
  padding: 4px 4px 4px 12px; min-height: 34px; box-sizing: border-box;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 999px;
}
.interface-visual .topbar .aparencia-rapida-gatilho { min-height: 34px; border-radius: 999px; }
.interface-visual .topbar h1 { letter-spacing: -0.01em; }

/* 2) Cartões de bloco/unidade: fundo do próprio cartão (antes cinza dentro de branco),
   nome com indicador na cor de destaque e números alinhados. */
.interface-visual .unidade-card {
  background: var(--card-bg);
  border-color: var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 5%, transparent);
}
.interface-visual .unidade-card-nome { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.interface-visual .unidade-card-nome::before {
  content: ""; width: 4px; height: 16px; border-radius: 4px; background: var(--primary); flex: 0 0 auto;
}
.interface-visual .unidade-card-contagens { padding: 8px 0; border-top: 1px dashed var(--border); border-bottom: 1px dashed var(--border); }
.interface-visual .unidade-card-contagem-item strong { font-variant-numeric: tabular-nums; }

/* 3) "Remover" discreto na lista (vermelho só no texto); o fundo vermelho aparece ao passar o mouse.
   Continua vermelho — o significado não muda, só deixa de gritar em todos os cartões ao mesmo tempo. */
.interface-visual .unidade-card-acoes button,
.interface-visual .unidade-card > button {
  background: transparent; border-color: var(--border); color: var(--text-muted);
}
.interface-visual .unidade-card-acoes button:hover { background: var(--accent-dim); color: var(--accent-text); border-color: var(--primary); }
.interface-visual .unidade-card-acoes button.danger { color: var(--red-text); border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); }
.interface-visual .unidade-card-acoes button.danger:hover { background: var(--red-bg); border-color: var(--danger); color: var(--red-text); }

/* 4) Configurações: as 10 categorias numa linha só (antes eram 9 colunas e "Aparência" caía sozinha). */
.interface-visual .config-nav { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); }
.interface-visual .config-nav-btn { min-height: 68px; font-size: 11px; }
.interface-visual .config-nav-btn span { overflow-wrap: normal; }
.interface-visual .config-nav-btn:not(.active) { background: var(--card-bg); }

/* 5) Seletor de período (Painel) e abas: texto nunca quebra em duas linhas ("Este mês"). */
.interface-visual .seg-btn { white-space: nowrap; padding-left: 10px; padding-right: 10px; }
.interface-visual #painel-periodo .seg-btn { font-size: 11.5px; padding-top: 8px; padding-bottom: 8px; }

/* 6) Indicadores do Painel com acento de cor, mesmo padrão do item ativo do menu. */
.interface-visual .painel-tile { position: relative; overflow: hidden; }
.interface-visual .painel-tile::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--primary);
}
.interface-visual .painel-tile-valor { font-size: 32px; letter-spacing: -0.02em; }

/* 7) Campos com a mesma altura (texto, lista, data e hora lado a lado ficavam com 36, 38 e 40 px).
   Fora da tela de Cadastro de propósito: lá a altura acima da câmera é protegida (ver cadastro-visual.css). */
.interface-visual:not(.cadastro-visual) input[type="text"],
.interface-visual:not(.cadastro-visual) input[type="date"],
.interface-visual:not(.cadastro-visual) input[type="time"],
.interface-visual:not(.cadastro-visual) input[type="number"],
.interface-visual:not(.cadastro-visual) input[type="password"],
.interface-visual:not(.cadastro-visual) select { min-height: 38px; }
.interface-visual input:focus,
.interface-visual select:focus,
.interface-visual textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}

/* 8) Cabeçalho das tabelas com fundo próprio, linhas com respiro. */
.interface-visual table thead th,
.interface-visual .historico-tabela thead th { background: var(--surface-2); }
.interface-visual table thead th:first-child { border-top-left-radius: 8px; }
.interface-visual table thead th:last-child { border-top-right-radius: 8px; }

/* 9) Ícone "i" de informações da unidade: era emoji azul; vira o mesmo ícone de linha do resto. */
.interface-visual .unidade-info-btn {
  font-size: 0; width: 20px; height: 20px; padding: 0; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent-text); background: var(--accent-dim); border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border));
  opacity: 1; vertical-align: middle;
}
.interface-visual .unidade-info-btn::before { content: "i"; font: 700 11px/1 Georgia, serif; }

/* 10) Foto e Câmera da unidade: espaço entre ícone e texto. */
.interface-visual #unidade-upload-toolbar,
.interface-visual #unidade-camera-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.interface-visual #unidade-upload-toolbar svg,
.interface-visual #unidade-camera-btn svg { width: 14px; height: 14px; flex: 0 0 auto; }

/* 11) Pessoa sem foto: silhueta discreta no lugar do quadrado vazio. */
.interface-visual .avatar-vazio { position: relative; }
.interface-visual .avatar-vazio::after {
  content: ""; position: absolute; inset: 22%;
  background: var(--text-3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E") center / contain no-repeat;
}