/* ====================================================================
   CGL Fundações — Sistema de Gestão | Folha de Estilo Premium
   ==================================================================== */

/* --------------------------------------------------------------------
   PALETA ÚNICA

   Antes desta versão conviviam duas paletas: a declarada aqui (um azul
   3b82f6, verde esmeralda, vermelho vivo) e a que os módulos escreviam
   à mão (o azul institucional 1B5FA8, verde 2D7D46, vermelho C0392B).
   Resultado: dois azuis diferentes na mesma tela. Ficou valendo a
   institucional — a que os módulos já usavam.

   Regra: nenhuma cor nova em hex fora deste bloco. Se falta um tom,
   ele nasce aqui. Os nomes antigos (--azul-accent, --danger, ...)
   seguem existindo como apelidos para não quebrar o que já usa.
   -------------------------------------------------------------------- */
:root {
  /* ---- Marca ---- */
  --marca-50:  #f0f6fc;   /* fundo de realce muito leve */
  --marca-100: #dde9f6;   /* fundo de item selecionado */
  --marca-200: #b9d2ea;   /* borda de realce */
  --marca-500: #2b7ad1;   /* hover de ações */
  --marca-600: #1B5FA8;   /* AZUL CGL — ações, links, aba ativa */
  --marca-700: #164c88;   /* pressionado */
  --marca-900: #1A2E44;   /* azul escuro — títulos, barra lateral */

  --marca-laranja: #E67E22;   /* laranja do logo, usar com parcimônia */

  /* ---- Superfícies ---- */
  --sup-0: #ffffff;   /* cartão */
  --sup-1: #f8fafc;   /* fundo da aplicação */
  --sup-2: #f6f9fc;   /* bloco sutil dentro do cartão */
  --sup-3: #eef2f6;   /* cabeçalho de tabela, faixa */

  /* ---- Traços ---- */
  --borda:       #e2e8f0;
  --borda-forte: #cbd5e1;

  /* ---- Texto ---- */
  --txt:       #0f172a;   /* principal */
  --txt-sec:   #475569;   /* secundário */
  --txt-fraco: #64748b;   /* rótulos, meta */
  --txt-sutil: #94a3b8;   /* placeholder e travessão de célula vazia — 2,4:1,
                             abaixo do mínimo de leitura: nunca use para
                             informação que o usuário precise ler */
  --txt-sobre: #ffffff;   /* sobre fundo colorido */

  /* ---- Estados: cor sólida / fundo / texto sobre o fundo ---- */
  --sucesso:     #2D7D46;
  --sucesso-bg:  #e6f4ea;
  --sucesso-txt: #1b5e2a;

  --perigo:      #C0392B;
  --perigo-bg:   #fdecec;
  --perigo-txt:  #8a2020;

  --aviso:       #F4A020;   /* só preenchimento e borda; como texto tem 2:1 */
  --aviso-bg:    #fff3cd;
  --aviso-txt:   #856404;   /* é este que se usa para texto em laranja */

  --info:        #1B5FA8;
  --info-bg:     #e7f3ff;
  --info-txt:    #164c88;

  --neutro:      #64748b;
  --neutro-bg:   #eef2f6;
  --neutro-txt:  #475569;

  /* ---- Cores de domínio: planta de estacas (js/estacas.js) ----
     Os outros status da estaca reusam --aviso / --sucesso / --perigo;
     estes dois não têm equivalente semântico na paleta de interface. */
  --estaca-prevista: #B4B2A9;   /* ainda não executada — cinza terroso */
  --estaca-hoje:     #378ADD;   /* executada hoje — realce no mapa */

  /* ---- Escala de espaçamento (múltiplos de 4) ---- */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 20px;
  --esp-6: 24px;
  --esp-8: 32px;

  /* ---- Tipografia ---- */
  --font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --txt-xs: 11px;   /* rótulo de chip, meta */
  --txt-sm: 12px;   /* tabela, filtros */
  --txt-md: 13px;   /* corpo */
  --txt-lg: 15px;   /* título de bloco */
  --txt-xl: 20px;   /* título de seção */

  /* ---- Formas e profundidade ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.06);
  --shadow-premium: 0 20px 25px -5px rgba(15, 23, 42, 0.05), 0 8px 10px -6px rgba(15, 23, 42, 0.05);

  --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Apelidos dos nomes antigos (não usar em código novo) ---- */
  --azul-primary: var(--marca-900);
  --azul-primary-dark: var(--marca-900);
  --azul-accent: var(--marca-600);
  --azul-accent-hover: var(--marca-700);
  --ambar: var(--aviso);
  --ambar-esc: var(--aviso-txt);
  --ambar-light: var(--aviso-bg);
  --success: var(--sucesso);
  --success-bg: var(--sucesso-bg);
  --success-text: var(--sucesso-txt);
  --danger: var(--perigo);
  --danger-bg: var(--perigo-bg);
  --danger-text: var(--perigo-txt);
  --warning: var(--aviso);
  --warning-bg: var(--aviso-bg);
  --warning-text: var(--aviso-txt);
  --info-text: var(--info-txt);
  --radius: var(--radius-md);   /* era usada em 3 regras sem nunca ter sido definida */
  --muted: var(--neutro);
  --muted-bg: var(--neutro-bg);
  --muted-text: var(--neutro-txt);
  --bg-body: var(--sup-1);
  --bg-card: var(--sup-0);
  --border-color: var(--borda);
  --text-main: var(--txt);
  --text-sec: var(--txt-fraco);
}

/* Reset Geral */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family);
  background-color: var(--bg-body);
  color: var(--text-main);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  transition: var(--transition);
}

input, select, textarea {
  font-family: inherit;
  font-size: 14px;
  color: var(--text-main);
  transition: var(--transition);
}

/* --------------------------------------------------------------------
   TÍTULOS

   Antes não havia regra alguma para h2/h3/h4 — só `.card h3`. Como o
   reset zera as margens, cada tela acertava tamanho e espaçamento no
   próprio HTML, e nenhuma ficava igual à outra. Aqui fica o ritmo
   padrão; quem precisar de exceção usa `.sub-titulo` ou `.titulo-bloco`.
   -------------------------------------------------------------------- */
h2 {
  font-size: var(--txt-xl);
  font-weight: 700;
  color: var(--marca-900);
  letter-spacing: -0.015em;
  margin: 0 0 var(--esp-5);
}
h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--marca-900);
  margin: 0 0 var(--esp-4);
}
h4 {
  font-size: var(--txt-md);
  font-weight: 700;
  color: var(--marca-900);
  margin: 0 0 var(--esp-2);
}

/* Título que divide blocos dentro de um formulário longo
   (Origem / Destino / Preço de referência...) */
.titulo-bloco {
  font-size: var(--txt-md);
  font-weight: 700;
  color: var(--marca-600);
  margin: var(--esp-5) 0 var(--esp-3);
  padding-top: var(--esp-3);
  border-top: 1px solid var(--borda);
}

/* Título que encabeça um bloco com ações à direita, ou o topo de um
   diálogo: o espaçamento vem do contêiner, não do título. */
.titulo-linha { margin: 0; }

/* ---------- TELA DE LOGIN TEMA GRADIENTE ---------- */
#tela-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at top right, #1e293b 0%, #0f172a 100%);
  padding: 24px;
  position: relative;
  overflow: hidden;
}

/* Elementos gráficos abstratos no fundo do Login */
#tela-login::before, #tela-login::after {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  filter: blur(100px);
  z-index: 0;
}
#tela-login::before {
  background: rgba(59, 130, 246, 0.15); /* blue */
  top: -10%;
  right: -5%;
}
#tela-login::after {
  background: rgba(217, 119, 6, 0.1); /* amber */
  bottom: -10%;
  left: -5%;
}

.login-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  z-index: 10;
  position: relative;
}

.login-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.login-logo svg {
  width: 48px;
  height: 48px;
  color: var(--azul-accent);
}

.login-card h1 {
  font-size: 26px;
  font-weight: 700;
  color: var(--azul-primary-dark);
  text-align: center;
}
.login-card .sub {
  text-align: center;
  color: var(--text-sec);
  font-size: 14px;
  margin: 6px 0 28px;
  font-weight: 400;
}

.campo {
  margin-bottom: 18px;
}
.campo label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--azul-primary);
}
.campo input, .campo select, .campo textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background-color: var(--sup-0);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--azul-accent);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.campo textarea {
  resize: vertical;
  min-height: 80px;
}

.senha-wrap {
  position: relative;
}
.senha-wrap input {
  padding-right: 80px;
}
.senha-wrap .ver-senha {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-sec);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 4px;
}
.senha-wrap .ver-senha:hover {
  background: var(--sup-3);
  color: var(--azul-accent);
}

/* O padrão é o botão ter a largura do próprio conteúdo. Era 100%, o que
   servia à tela de login e obrigava cada contexto a desfazer — quem não
   desfazia (o header de ações das fichas) ficava com um Salvar gigante. */
.btn {
  background: var(--azul-accent);
  color: var(--txt-sobre);
  border-radius: var(--radius-sm);
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: var(--shadow-sm);
}
/* No login o botão acompanha a largura do cartão */
#form-login .btn { width: 100%; }
.btn:hover {
  background: var(--azul-accent-hover);
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.2);
}
.btn:active {
  transform: translateY(1px);
}
.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.btn-sec {
  background: var(--sup-0);
  color: var(--azul-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.btn-sec:hover {
  background: var(--sup-1);
  border-color: var(--azul-accent);
  color: var(--azul-accent);
}

.aviso {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 20px;
  display: none;
  animation: slideDown 0.3s ease;
}
.aviso.erro {
  background: var(--perigo-bg);
  border-left: 4px solid var(--danger);
  color: var(--danger-text);
  display: block;
}
.aviso.ok {
  background: var(--sucesso-bg);
  border-left: 4px solid var(--success);
  color: var(--success-text);
  display: block;
}

/* ---------- APLICAÇÃO (LAYOUT COM SIDEBAR) ---------- */
#tela-app {
  display: none; /* Controlado via JS */
  min-height: 100vh;
  flex-direction: row;
}

/* Sidebar Estilos */
#app-sidebar {
  width: 280px;
  background-color: var(--azul-primary-dark);
  color: var(--sup-3);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  z-index: 100;
  transition: var(--transition);
}

.sidebar-header {
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.sidebar-header .marca {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--txt-sobre);
}
.sidebar-header .marca span {
  color: var(--azul-accent);
}

.sidebar-nav {
  flex: 1;
  padding: 16px 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-nav button {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-radius: var(--radius-sm);
  color: var(--txt-sutil);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  width: 100%;
}
.sidebar-nav button:hover {
  background-color: rgba(255, 255, 255, 0.04);
  color: var(--txt-sobre);
}
.sidebar-nav button.ativo {
  background-color: var(--azul-accent);
  color: var(--txt-sobre);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
}

.nav-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: var(--transition);
}
.sidebar-nav button:hover .nav-icon {
  transform: scale(1.05);
}
.sidebar-nav button.ativo .nav-icon {
  stroke: var(--sup-0);
}

.sidebar-footer {
  padding: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.usuario-perfil {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
}
.usuario-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--borda-forte);
  flex-shrink: 0;
}
.usuario-avatar svg {
  width: 18px;
  height: 18px;
}
.usuario-detalhes {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.usuario-detalhes span {
  font-size: 13px;
  font-weight: 600;
  color: var(--txt-sobre);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.btn-logout {
  padding: 8px;
  border-radius: var(--radius-sm);
  color: var(--txt-sutil);
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-logout:hover {
  background: rgba(239, 68, 68, 0.1);
  color: var(--perigo);
}

/* Viewport do Conteúdo */
#app-viewport {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100vh;
  overflow: hidden;
}

#app-header {
  height: 70px;
  border-bottom: 1px solid var(--border-color);
  background-color: var(--sup-0);
  display: flex;
  align-items: center;
  padding: 0 32px;
  flex-shrink: 0;
}

.header-esquerda {
  display: flex;
  align-items: center;
  gap: 16px;
}

#btn-menu-toggle {
  display: none;
  color: var(--azul-primary);
}
#btn-menu-toggle svg {
  width: 24px;
  height: 24px;
}

#app-secao-titulo {
  font-size: 22px;
  font-weight: 700;
  color: var(--azul-primary-dark);
}

#app-viewport main {
  flex: 1;
  padding: 32px;
  overflow-y: auto;
  max-width: 100%;
}

.secao {
  display: none;
  animation: fadeIn 0.25s ease;
}
.secao.ativa {
  display: block;
}

/* ---------- COMPONENTES REUTILIZÁVEIS ---------- */

/* Cards Modernos */
.card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.card:hover {
  box-shadow: var(--shadow-md);
}
.card h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--azul-primary-dark);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Formulários em Grid */
.grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.grade .campo.largo {
  grid-column: 1 / -1;
}
.form-acoes {
  margin-top: 24px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.form-acoes .btn {
  width: auto;
  padding: 11px 24px;
}

/* Tabelas Premium */
.tabela-rola {
  overflow-x: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: var(--sup-0);
}
th, td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}
th {
  background-color: var(--sup-1);
  color: var(--text-sec);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
tr:last-child td {
  border-bottom: none;
}
tr:hover td {
  background-color: var(--sup-1);
}
tr.linha-clicavel {
  cursor: pointer;
}
tr.linha-clicavel:hover td {
  background-color: var(--sup-3);
}
td.num, th.num {
  text-align: right;
}
.vazio {
  color: var(--text-sec);
  text-align: center;
  padding: 24px !important;
}

/* Tags de Status Harmonizadas */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 50px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.tag.ok, .tag.verde {
  background-color: var(--success-bg);
  color: var(--success-text);
}
.tag.baixo, .tag.vermelho {
  background-color: var(--danger-bg);
  color: var(--danger-text);
}
.tag.cinza {
  background-color: var(--muted-bg);
  color: var(--muted-text);
}
.tag.azul {
  background-color: var(--info-bg);
  color: var(--info-text);
}
.tag.ambar {
  background-color: var(--warning-bg);
  color: var(--warning-text);
}

/* Indicadores / Dashboard Widgets */
.indicadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}
.ind {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: var(--transition);
}
.ind:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(59, 130, 246, 0.3);
}
.ind .num {
  font-size: 28px;
  font-weight: 800;
  color: var(--azul-primary-dark);
  line-height: 1.2;
}
.ind .rot {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-sec);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 6px;
}

/* Link-mini / Actions inside Headers */
.link-mini {
  color: var(--azul-accent);
  font-size: 12px;
  font-weight: 600;
}
.link-mini:hover {
  color: var(--azul-accent-hover);
  text-decoration: underline;
}

/* ---------- LISTA + FICHA VIEW TEMPLATE ---------- */
.lista-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.lista-topo h3 {
  margin-bottom: 0;
}
.lista-topo .btn {
  width: auto;
  padding: 9px 18px;
}
.contador {
  font-size: 12px;
  font-weight: 500;
  background-color: var(--bg-body);
  padding: 4px 8px;
  border-radius: 4px;
  color: var(--text-sec);
  margin-left: 8px;
}
.busca {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  margin-bottom: 20px;
  background-color: var(--sup-0);
}
.busca:focus {
  outline: none;
  border-color: var(--azul-accent);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.ficha-topo {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.ficha-topo h3 {
  margin-bottom: 0;
}
.ficha-topo .btn-sec {
  padding: 8px 12px;
  font-size: 12px;
}

/* ---------- ORÇAMENTO ITEMS EDITOR ---------- */
.itens-tabela input, .itens-tabela select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 13px;
  background-color: var(--sup-0);
}
.itens-tabela input:focus, .itens-tabela select:focus {
  outline: none;
  border-color: var(--azul-accent);
}
.itens-tabela td {
  vertical-align: middle;
}
.itens-tabela .col-acao {
  width: 50px;
  text-align: center;
}
.btn-rem {
  background: var(--perigo-bg);
  color: var(--danger);
  border-radius: var(--radius-sm);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
}
.btn-rem:hover {
  background: var(--danger);
  color: var(--txt-sobre);
}
.itens-total {
  margin-top: 20px;
  text-align: right;
  font-size: 16px;
  font-weight: 700;
  color: var(--azul-primary-dark);
}
.itens-total span {
  color: var(--aviso-txt);
  margin-left: 8px;
}

/* ---------- CHECKBOX & RADIOS ---------- */
.check-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  padding: 8px 0;
  cursor: pointer;
}
.check-inline input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--azul-accent);
  cursor: pointer;
}

/* ---------- MOBILE INTERACTION LAYOUT (MEDIA QUERIES) ---------- */
#sidebar-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(4px);
  z-index: 95;
  animation: fadeIn 0.2s ease;
}

@media (max-width: 991px) {
  /* Sidebar colapsável */
  #app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    transform: translateX(-100%);
    box-shadow: none;
  }
  
  #tela-app.sidebar-aberta #app-sidebar {
    transform: translateX(0);
    box-shadow: var(--shadow-lg);
  }
  
  #tela-app.sidebar-aberta #sidebar-overlay {
    display: block;
  }
  
  #btn-menu-toggle {
    display: block;
  }
  
  #app-header {
    padding: 0 20px;
  }
  
  #app-viewport main {
    padding: 20px;
  }
}

.mobile-only {
  display: none;
}
@media (max-width: 991px) {
  .mobile-only {
    display: inline-flex;
  }
}

/* ---------- ANIMAÇÕES ---------- */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

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

/* ---------- CATÁLOGO DE SERVIÇOS ---------- */
.serv-views {
  display: inline-flex;
  background: var(--bg-body);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 2px;
}
.serv-view-btn {
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-sec);
  border-radius: 5px;
}
.serv-view-btn:hover { color: var(--azul-accent); }
.serv-view-btn.ativo {
  background: var(--sup-0);
  color: var(--azul-primary-dark);
  box-shadow: var(--shadow-sm);
}

.serv-filtros {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}
.serv-filtros input,
.serv-filtros select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--sup-0);
}
.serv-filtros input:focus,
.serv-filtros select:focus {
  outline: none;
  border-color: var(--azul-accent);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
@media (max-width: 760px) {
  .serv-filtros { grid-template-columns: 1fr 1fr; }
}

/* Kanban */
.serv-kanban {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
}
.serv-kan-col {
  flex: 0 0 264px;
  background: var(--bg-body);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px;
}
.serv-kan-col-head {
  font-size: 13px;
  font-weight: 700;
  color: var(--azul-primary-dark);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 4px 12px;
}
.serv-kan-col-head span {
  background: var(--azul-accent);
  color: var(--txt-sobre);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 50px;
}
.serv-kan-card {
  background: var(--sup-0);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-sm);
}
.serv-kan-card-nome {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 8px;
}
.serv-kan-card-meta { margin-bottom: 10px; }
.serv-kan-card-rod {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-sec);
  border-top: 1px solid var(--border-color);
  padding-top: 8px;
}
.serv-kan-card-rod strong { color: var(--aviso-txt); }  /* laranja puro reprova contraste como texto */

/* Catálogo (agrupado por categoria) */
.serv-cat-grupo { margin-bottom: 28px; }
.serv-cat-head {
  font-size: 15px;
  font-weight: 700;
  color: var(--azul-primary-dark);
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 2px solid var(--azul-accent);
}
.serv-cat-head span {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-sec);
}
.serv-serv-card {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 14px;
  background: var(--sup-0);
}
.serv-serv-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.serv-serv-head strong {
  display: block;
  font-size: 14px;
  color: var(--azul-primary-dark);
}
.serv-caminho {
  display: block;
  font-size: 12px;
  color: var(--text-sec);
  margin-top: 2px;
}

/* Contexto da ficha de serviço */
.serv-contexto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  background: var(--bg-body);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 20px;
}
.serv-contexto div { display: flex; flex-direction: column; gap: 3px; }
.serv-contexto span {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-sec);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.serv-contexto strong {
  font-size: 13px;
  color: var(--text-main);
}

/* ---------- HISTÓRICO (chatter) ---------- */
.historico {
  margin-top: 8px;
  border-top: 1px solid var(--border-color);
}
.historico h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--azul-primary-dark);
  margin-bottom: 14px;
}
.hist-compositor {
  background: var(--bg-body);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 20px;
}
.hist-abas { display: flex; gap: 6px; margin-bottom: 10px; }
.hist-aba {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-sec);
  border: 1px solid var(--border-color);
  background: var(--sup-0);
  border-radius: 50px;
}
.hist-aba.ativo {
  background: var(--azul-accent);
  color: var(--txt-sobre);
  border-color: var(--azul-accent);
}
.hist-compositor textarea {
  width: 100%;
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--sup-0);
  resize: vertical;
}
.hist-compositor textarea:focus {
  outline: none;
  border-color: var(--azul-accent);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.hist-compositor-acoes {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.hist-compositor-acoes .btn { width: auto; padding: 8px 22px; }

.hist-timeline {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hist-item {
  border-left: 2px solid var(--border-color);
  padding: 1px 0 1px 14px;
}
.hist-item.hist-msg { border-left-color: var(--azul-accent); }
.hist-item-topo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-sec);
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.hist-item-topo strong { color: var(--text-main); font-size: 13px; }
.hist-quando { margin-left: auto; }
.hist-item-corpo { font-size: 13px; color: var(--text-main); line-height: 1.5; }
.hist-seta { color: var(--azul-accent); font-weight: 700; }
.hist-msg .hist-item-corpo {
  background: var(--sup-0);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}


/* ========== Movimentações ========== */
.autocomplete-lista {
  position: relative;
  max-height: 240px;
  overflow-y: auto;
  background: var(--sup-0);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  margin-top: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.autocomplete-lista .resultado-item {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  border-bottom: 1px solid var(--sup-3);
}
.autocomplete-lista .resultado-item:hover { background: var(--marca-50); }
.autocomplete-lista .resultado-item.vazio { cursor: default; color: var(--txt-sutil); font-style: italic; }
.linha-clicavel { cursor: pointer; }
.linha-clicavel:hover { background: var(--sup-2); }
.btn-sm { padding: 2px 8px !important; font-size: 12px !important; }

/* Badges de confiança da reconciliação de estacas */
.rec-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
  min-width: 50px;
  text-align: center;
}
.rec-badge-alta  { background: var(--sucesso-bg); color: var(--sucesso-txt); }
.rec-badge-media { background: var(--aviso-bg); color: var(--aviso-txt); }
.rec-badge-baixa { background: var(--perigo-bg); color: var(--perigo-txt); }
.rec-badge-zero  { background: var(--sup-3); color: var(--txt-fraco); font-style: italic; }

/* Badge ALTERADO/REFURO nas linhas de estaca (estilo Maya Fundações) */
.badge-alterado {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 3px 9px;
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  background: var(--sucesso-bg);
  color: var(--sucesso-txt);
  border: 1px solid var(--sucesso);
  vertical-align: middle;
  text-transform: uppercase;
  cursor: help;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.badge-alterado-suspeito {
  background: var(--aviso-bg);
  color: var(--aviso-txt);
  border-color: var(--aviso);
  animation: pulso-alterado 2s ease-in-out infinite;
}

/* Dashboard / Home */
.dash-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 1000px) { .dash-cards { grid-template-columns: repeat(2, 1fr); } }
.dash-card {
  background: var(--sup-0);
  border: 1px solid var(--borda);
  border-radius: 6px;
  padding: 14px 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
/* Indicadores/itens clicáveis do dashboard (levam ao fluxo correspondente) */
.clicavel { cursor: pointer; }
.dash-card.clicavel { transition: background .15s, box-shadow .15s; }
.dash-card.clicavel:hover { background: var(--sup-2); box-shadow: 0 2px 6px rgba(0,0,0,0.08); }
.dash-pendencia-item.clicavel:hover,
.dash-linha-obra.clicavel:hover,
.dash-ativ-item.clicavel:hover { background: var(--sup-2); }
.dash-pend-seta { color: var(--txt-sutil); font-size: 18px; font-weight: 700; margin-left: 6px; }
.dash-card-rot {
  font-size: 11px;
  color: var(--txt-sutil);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.dash-card-num {
  font-size: 22px;
  font-weight: 700;
  color: var(--marca-900);
  line-height: 1.1;
}
.dash-card-sub {
  font-size: 11px;
  color: var(--txt-sutil);
  margin-top: 6px;
}
.dash-pendencia-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--sup-3);
  font-size: 12px;
}
.dash-pendencia-item:last-child { border-bottom: 0; }
.dash-pendencia-icone {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
}

/* Drag & drop em kanbans (genérico) */
.serv-kan-card[draggable="true"]:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.10); transform: translateY(-1px); }
.serv-kan-card.kan-dragging { opacity: 0.5; cursor: grabbing; transform: rotate(-1deg); }
.serv-kan-col.kan-drop-target {
  background: var(--info-bg);
  outline: 2px dashed var(--marca-600);
  outline-offset: -4px;
  border-radius: 6px;
}
.serv-kan-col.kan-drop-target .serv-kan-col-head { background: var(--marca-600); color: var(--txt-sobre); }

/* Badge de origem do preço (medicao_itens) */
.badge-origem {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  cursor: help;
}
@keyframes pulso-alterado {
  0%,100% { box-shadow: 0 1px 2px rgba(244, 160, 32, 0.2); }
  50%     { box-shadow: 0 1px 6px rgba(244, 160, 32, 0.5); }
}


/* ========== Padrão Odoo (statusbar, header actions, notebook) ========== */
.odoo-actions-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 16px;
  background: var(--sup-2);
  border-bottom: 1px solid var(--border-color);
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}
.odoo-actions-header .actions-left {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
}
.odoo-actions-header .actions-right {
  margin-left: auto; display: flex; gap: 6px; align-items: center;
}

.odoo-statusbar {
  display: flex;
  align-items: stretch;
  padding: 0;
  background: var(--sup-0);
  border-bottom: 1px solid var(--border-color);
  overflow-x: auto;
}
.odoo-statusbar .stage {
  flex: 0 0 auto;
  padding: 10px 18px;
  font-size: 12px;
  font-weight: 600;
  color: var(--txt-sutil);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  cursor: pointer;
  position: relative;
  background: var(--sup-0);
  border-right: 1px solid var(--sup-3);
  white-space: nowrap;
  user-select: none;
}
.odoo-statusbar .stage:hover { background: var(--sup-2); }
.odoo-statusbar .stage.atual {
  color: var(--txt-sobre);
  background: var(--marca-600);
}
.odoo-statusbar .stage.atual::after {
  content: "";
  position: absolute;
  right: -12px; top: 50%;
  width: 0; height: 0;
  transform: translateY(-50%);
  border-left: 12px solid var(--marca-600);
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  z-index: 2;
}
.odoo-statusbar .stage.passada { color: var(--sucesso); }
.odoo-statusbar .stage.cancelada {
  color: var(--txt-sobre); background: var(--perigo);
}

.odoo-contexto {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 14px 18px;
  background: var(--sup-0);
  border-bottom: 1px solid var(--border-color);
}
.odoo-contexto .chip {
  display: flex; flex-direction: column;
  font-size: 11px;
}
.odoo-contexto .chip span {
  color: var(--txt-sutil); text-transform: uppercase; letter-spacing: 0.4px;
}
.odoo-contexto .chip strong {
  font-size: 14px; color: var(--marca-900);
}

.odoo-notebook {
  display: flex;
  border-bottom: 1px solid var(--border-color);
  background: var(--sup-0);
  margin-top: 8px;
  overflow-x: auto;
}
.odoo-notebook button {
  background: none;
  border: none;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--txt-sec);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.odoo-notebook button:hover { color: var(--marca-600); background: var(--sup-2); }
.odoo-notebook button.ativo {
  color: var(--marca-600);
  border-bottom-color: var(--marca-600);
  font-weight: 600;
}

.odoo-tab {
  display: none;
  padding: 18px 0;
}
.odoo-tab.ativa { display: block; }

.odoo-sheet {
  background: var(--sup-0);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 16px;
}
.odoo-sheet > .odoo-body { padding: 0 18px 18px; }

/* ========== Planta SVG de estacas ========== */
.planta-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--borda);
  margin-bottom: 8px;
}
.planta-legenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--txt-sec); }
.planta-legenda span { display: inline-flex; align-items: center; gap: 5px; }
.planta-legenda i {
  display: inline-block; width: 12px; height: 12px;
  border-radius: 50%; border: 1px solid rgba(0,0,0,.15);
}
.planta-zoom { display: flex; gap: 4px; }
.planta-zoom button { min-width: 32px; padding: 4px 8px !important; font-size: 14px !important; }

#est-planta-svg-container {
  background:
    linear-gradient(var(--sup-3) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(90deg, var(--sup-3) 1px, transparent 1px) 0 0 / 20px 20px,
    var(--sup-2);
  border: 1px solid var(--borda-forte);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  touch-action: none;
  user-select: none;
  width: 100%;
  aspect-ratio: 3 / 2;
  max-height: 70vh;
}
#est-planta-svg {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
}
#est-planta-svg:active { cursor: grabbing; }
#est-planta-svg .estaca-circ {
  cursor: pointer;
  transition: transform .12s, stroke-width .12s;
  transform-origin: center;
  transform-box: fill-box;
}
#est-planta-svg .estaca-circ:hover {
  transform: scale(1.25);
  stroke-width: 2.5;
}
#est-planta-svg .estaca-label {
  pointer-events: none;
  font-family: Arial, sans-serif;
  font-size: 7.5px;
  fill: var(--sup-0);
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
}
#est-planta-svg .sem-coordenadas {
  font-family: Arial, sans-serif;
  font-size: 14px;
  fill: var(--txt-sutil);
  text-anchor: middle;
}

.planta-rodape { padding: 10px 0 4px; }
.planta-progresso { display: flex; align-items: center; gap: 12px; }
.planta-progresso-barra {
  flex: 1;
  height: 10px;
  background: var(--sup-3);
  border-radius: 5px;
  overflow: hidden;
}
.planta-progresso-barra #planta-progresso-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--sucesso), #2EC787);
  width: 0%;
  transition: width .3s;
}
.planta-progresso > span {
  font-size: 12px;
  color: var(--txt-sec);
  white-space: nowrap;
  font-weight: 600;
}

/* Tooltip da estaca (no canto da planta) */
#est-planta-tooltip {
  position: absolute;
  background: rgba(26,46,68,0.95);
  color: var(--txt-sobre);
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 4px;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  z-index: 100;
}

/* ========== Smart-buttons da ficha (Odoo style) ========== */
.odoo-smart-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 18px;
  background: var(--sup-2);
  border-bottom: 1px solid var(--border-color);
}
.sb-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 90px;
  padding: 6px 12px;
  background: var(--sup-0);
  border: 1px solid var(--borda-forte);
  border-radius: 6px;
  cursor: pointer;
  transition: all .12s;
  font-family: inherit;
}
.sb-btn:hover {
  border-color: var(--marca-600);
  background: var(--marca-50);
  transform: translateY(-1px);
}
.sb-btn .sb-num {
  font-size: 18px;
  font-weight: 700;
  color: var(--marca-600);
  line-height: 1;
}
.sb-btn .sb-icon { font-size: 16px; margin: 2px 0; }
.sb-btn .sb-lbl {
  font-size: 10px;
  color: var(--txt-sec);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 600;
}

/* ========== Timeline da obra ========== */
.tl-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--borda);
}
.tl-filtro {
  padding: 5px 12px;
  background: var(--sup-0);
  border: 1px solid var(--borda-forte);
  border-radius: 16px;
  font-size: 12px;
  cursor: pointer;
  color: var(--txt-sec);
  transition: all .12s;
  font-family: inherit;
}
.tl-filtro:hover { background: var(--marca-50); border-color: var(--marca-600); }
.tl-filtro.ativo {
  background: var(--marca-600);
  color: var(--txt-sobre);
  border-color: var(--marca-600);
}
.tl-lista {
  position: relative;
  padding-left: 8px;
}
.tl-lista::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 0; bottom: 0;
  width: 2px;
  background: var(--borda);
}
.tl-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 16px;
  position: relative;
}
.tl-icone {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--txt-sobre);
  font-size: 14px;
  flex-shrink: 0;
  border: 2px solid var(--sup-0);
  box-shadow: 0 0 0 1px var(--borda-forte);
  z-index: 1;
}
.tl-conteudo {
  flex: 1;
  background: var(--sup-0);
  border: 1px solid var(--borda);
  border-radius: 6px;
  padding: 10px 14px;
}
.tl-titulo { font-weight: 600; font-size: 13px; color: var(--marca-900); }
.tl-meta { font-size: 12px; color: var(--txt-sec); margin-top: 2px; }
.tl-data { font-size: 11px; color: var(--txt-sutil); margin-top: 4px; }
.tl-autor {
  display: inline-block;
  background: var(--sup-3);
  color: var(--marca-600);
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  margin-left: 4px;
  cursor: help;
}

/* ========== Conferência do Projeto — badges nas abas ========== */
.conf-badge {
  display: inline-block;
  min-width: 18px;
  background: var(--perigo);
  color: var(--txt-sobre);
  border-radius: 10px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
  margin-left: 4px;
  vertical-align: 1px;
}
.conf-badge:empty { display: none; }
.conf-badge.zero { background: var(--sucesso); }

/* ========== Funcionários — Fase 19 ========== */

/* Layout painel: sidebar dept + conteúdo */
.func-painel-layout {
  display: flex;
  min-height: 260px;
}
.func-dept-sidebar {
  flex: 0 0 180px;
  border-right: 1px solid var(--border-color);
  background: var(--sup-2);
  padding: 6px 0;
  overflow-y: auto;
}
.func-dept-header {
  padding: 6px 12px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--txt-sutil);
  font-weight: 700;
}
.func-dept-item {
  padding: 6px 10px 6px 12px;
  font-size: 12px;
  color: var(--txt-sec);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  border-left: 3px solid transparent;
  line-height: 1.3;
}
.func-dept-item:hover { background: #eef3fa; }
.func-dept-item.ativo {
  background: #e6eef8;
  color: var(--marca-600);
  font-weight: 600;
  border-left-color: var(--marca-600);
}
.func-dept-item .dept-count {
  background: #e4e8ee;
  color: var(--txt-fraco);
  font-size: 10px;
  font-weight: 600;
  border-radius: 10px;
  padding: 1px 6px;
  flex-shrink: 0;
}
.func-dept-item.ativo .dept-count { background: #c5d9f0; color: var(--marca-600); }
.func-dept-item.dept-filho { padding-left: 22px; }
.func-dept-item.dept-neto  { padding-left: 34px; font-size: 11px; }
.func-conteudo-wrap { flex: 1; min-width: 0; padding: 8px; }

/* Avatar circular */
.func-kan-avatar {
  border-radius: 50%;
  background: var(--marca-600);
  color: var(--txt-sobre);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  overflow: hidden;
  flex-shrink: 0;
}
.func-kan-avatar img { width:100%; height:100%; object-fit:cover; }

/* Kanban card de funcionário */
.func-kan-card {
  background: var(--sup-0);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  transition: box-shadow .12s;
}
.func-kan-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.1); }
.func-kan-card-body { flex:1; min-width:0; }
.func-kan-card-nome {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.func-kan-card-funcao { font-size:11px; color:var(--text-sec); margin-bottom:6px; }
.func-kan-card-tags { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:6px; }
.func-kan-card-rod {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--txt-sutil);
  border-top: 1px solid var(--border-color);
  padding-top: 6px;
  margin-top: 4px;
}

/* Tag tipo de contrato */
.func-contrato-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

/* Foto circular na ficha */
.func-ficha-topo {
  display: flex;
  gap: 0;
  align-items: stretch;
  border-bottom: 1px solid var(--border-color);
}
.func-foto-wrap {
  position: relative;
  width: 96px;
  height: 96px;
  flex-shrink: 0;
  cursor: pointer;
  margin: 14px 0 14px 18px;
  align-self: center;
}
.func-foto-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--marca-600);
  color: var(--txt-sobre);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 700;
  overflow: hidden;
  border: 3px solid var(--sup-0);
  box-shadow: 0 1px 6px rgba(0,0,0,.12);
}
.func-foto-avatar img { width:100%; height:100%; object-fit:cover; }
.func-foto-overlay {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(0,0,0,.45);
  color: var(--txt-sobre);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  opacity: 0;
  transition: opacity .15s;
}
.func-foto-wrap:hover .func-foto-overlay { opacity: 1; }
.func-ficha-topo .odoo-contexto {
  border-bottom: none;
  flex: 1;
  align-content: flex-start;
}

/* Smart buttons de alerta */
.sb-btn.func-sb-alerta { border-color: var(--marca-laranja); }
.sb-btn.func-sb-alerta .sb-num { color: var(--marca-laranja); }

/* Tabela de documentos */
.func-docs-table { width:100%; border-collapse:collapse; font-size:13px; }
.func-docs-table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--txt-sutil);
  font-weight: 600;
  padding: 6px 8px;
  border-bottom: 2px solid var(--border-color);
}
.func-docs-table td { padding: 8px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.func-docs-table tr:hover td { background: var(--sup-1); }
.func-doc-vencido  { color: var(--perigo); font-weight: 600; }
.func-doc-vencendo { color: var(--marca-laranja); font-weight: 600; }
.func-doc-ok       { color: var(--sucesso); }
.func-doc-inline-form {
  margin-top: 14px;
  padding: 16px;
  background: var(--sup-1);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
}

@media (max-width: 760px) {
  .func-dept-sidebar { flex: 0 0 130px; }
  .func-foto-wrap { width:72px; height:72px; }
  .func-foto-avatar { font-size:22px; }
}


/* ========== RDO Boletim por Estaca (Estaca Raiz) ========== */
.rdo-boletim-row > td.rdo-boletim-cell {
  padding: 0;
  border-bottom: 2px solid var(--marca-600);
  border-top: 1px solid var(--borda-forte);
}
.rdo-boletim-conteudo {
  padding: 16px 20px;
  background: var(--info-bg);
}
.rdo-boletim-titulo {
  font-size: 12px;
  font-weight: 700;
  color: var(--marca-600);
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 1px solid var(--borda-forte);
  padding-bottom: 8px;
  margin-bottom: 14px;
}
.rdo-boletim-secao {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--txt-sec);
  margin: 16px 0 8px;
  padding-top: 8px;
  border-top: 1px solid var(--borda-forte);
}

/* ========== Fase 21 — Contratos de fornecedores ========== */

/* Texto de ajuda dentro de uma aba/ficha */
.ajuda-campo {
  font-size: 12px;
  color: var(--txt-fraco);
  background: var(--sup-2);
  border-left: 3px solid var(--marca-600);
  padding: 8px 12px;
  border-radius: 0 4px 4px 0;
  margin: 0 0 14px;
  line-height: 1.5;
}

/* Subtítulo de bloco dentro de uma aba */
.sub-titulo {
  font-size: 12px;
  font-weight: 700;
  color: var(--marca-600);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 20px 0 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

/* Badge numérico no botão de aba do notebook */
.aba-badge:empty { display: none; }
.aba-badge {
  display: inline-block;
  min-width: 16px;
  padding: 0 5px;
  margin-left: 4px;
  background: var(--marca-600);
  color: var(--txt-sobre);
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  vertical-align: middle;
}
.aba-badge.alerta { background: var(--perigo); }

/* Faixa de alerta de vencimento no painel de contratos */
.con-alerta {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  margin: 0 0 12px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.6;
  background: var(--aviso-bg);
  border: 1px solid var(--aviso);
  color: var(--aviso-txt);
}
.con-alerta.critico {
  background: var(--perigo-bg);
  border-color: var(--perigo);
  color: var(--perigo-txt);
}
.con-alerta .con-alerta-icone { font-size: 16px; line-height: 1.2; }
.con-alerta ul { margin: 4px 0 0; padding-left: 18px; }
.con-alerta li { margin-bottom: 2px; }
.con-alerta .con-alerta-link {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* Linha da lista de contratos: destaque de vencimento */
tr.con-vencendo td { background: var(--aviso-bg); }
tr.con-vencido td  { background: var(--perigo-bg); }
.con-dias-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  background: var(--aviso-bg);
  color: var(--aviso-txt);
}
.con-dias-tag.critico { background: var(--perigo-bg); color: var(--perigo-txt); border-color: var(--perigo); }

/* ====================================================================
   PADRÕES QUE ANTES ERAM ESTILO INLINE

   Cada classe abaixo substitui um style="..." que se repetia no HTML.
   Ao criar tela nova, use estas em vez de escrever estilo na marcação —
   é o que permite mudar a aparência do sistema inteiro num lugar só.
   ==================================================================== */

/* Ação destrutiva no header da ficha (Excluir) */
.acao-perigo { color: var(--perigo); }

/* Nome do registro aberto, à direita do header da ficha */
.ficha-titulo {
  font-size: var(--txt-lg);
  font-weight: 700;
  color: var(--marca-900);
}

/* Linha explicativa sob um título de bloco */
.texto-apoio {
  font-size: var(--txt-md);
  color: var(--txt-sec);
  line-height: 1.5;
  margin: 0 0 var(--esp-3);
}
.texto-apoio.compacto {
  font-size: var(--txt-sm);
  margin-bottom: var(--esp-2);
}

/* Fundo escurecido dos diálogos. O display fica inline porque é estado
   alternado pelo JS (none <-> flex), não aparência. */
.modal-fundo {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

/* Botão de confirmação positiva (concluir, aprovar) */
.btn.btn-sucesso { background: var(--sucesso); }
.btn.btn-sucesso:hover { background: var(--sucesso-txt); }

/* ---- Variantes compactas: mesmos componentes, dentro de abas e diálogos ---- */
.card.compacto      { padding: var(--esp-3); }
.lista-topo.compacta{ margin-bottom: var(--esp-2); }
.form-acoes.compacta{ margin-top: var(--esp-3); }

/* Legenda curta sob um campo ou bloco. Usa --txt-fraco (e não
   --txt-sutil) porque carrega informação que precisa ser lida. */
.nota {
  font-size: var(--txt-xs);
  color: var(--txt-fraco);
  line-height: 1.5;
  margin: var(--esp-2) 0 0;
}

/* ---- Texto auxiliar em listas e cartões ---- */

/* Linha pequena de apoio dentro de um card ou célula (categoria,
   documento, data secundária). Era font-size:11px;color:... repetido
   ~20 vezes nos módulos. */
.meta {
  font-size: var(--txt-xs);
  color: var(--txt-fraco);
}
.meta.bloco { display: block; }

/* Texto/ação em vermelho fora de botão */
.txt-perigo { color: var(--perigo); }

/* Coluna de kanban sem cartões */
.kan-vazio {
  padding: var(--esp-2);
  font-size: var(--txt-xs);
  color: var(--txt-sutil);
}

/* Larguras fixas de coluna em tabelas de lançamento (RDO, estacas).
   Existem porque a tabela é de digitação: a coluna não pode dançar
   conforme o conteúdo. */
.col-xs { width: 80px; }
.col-sm { width: 90px; }
.col-md { width: 100px; }
.col-lg { width: 155px; }
.col-xl { width: 160px; }

/* ====================================================================
   ACABAMENTO

   O sistema acumulava traços concorrentes: o cartão tinha borda E
   sombra, e a tabela dentro dele tinha a própria borda — três molduras
   aninhadas para delimitar a mesma coisa. Aqui fica uma só por nível,
   e a separação passa a vir do espaço.
   ==================================================================== */

/* O cartão se delimita pela borda; a sombra fica para o hover, como
   resposta à interação, não como decoração permanente. */
.card {
  box-shadow: none;
}
.card:hover {
  box-shadow: var(--shadow-sm);
}

/* Tabela dentro de cartão ou de aba não precisa de moldura própria —
   o contêiner já delimita. Descendente, e não filho direto: o conteúdo
   costuma vir embrulhado num #*-conteudo. */
.card .tabela-rola,
.odoo-tab .tabela-rola {
  border: none;
  border-radius: 0;
}

/* Cabeçalho de tabela: a distinção vem do peso do texto e de um traço
   mais firme embaixo, não de uma faixa cinza. */
th {
  background-color: transparent;
  border-bottom: 1px solid var(--borda-forte);
  padding-top: var(--esp-2);
  padding-bottom: var(--esp-2);
}

/* Campos de formulário com mais respiro entre si */
.grade {
  gap: var(--esp-5);
}

/* ====================================================================
   ACABAMENTO DA FICHA (padrão Odoo)

   Dois problemas: (1) header de ações, statusbar, chips de contexto,
   smart-buttons e notebook tinham cada um a sua linha divisória — cinco
   traços empilhados em pouco mais de 200px; (2) os paddings (10/14/18px)
   não seguiam escala nenhuma, então nada alinhava verticalmente.

   Aqui as faixas passam a se distinguir pelo fundo e pelo espaço, com
   linha só onde a separação é estrutural. Paddings vão para a escala.
   ==================================================================== */

.odoo-actions-header {
  gap: var(--esp-2);
  padding: var(--esp-3) var(--esp-4);
}
.odoo-actions-header .actions-left,
.odoo-actions-header .actions-right { gap: var(--esp-2); }

/* Statusbar encosta no header sem linha entre os dois: o degrau de
   fundo (cinza -> branco) já separa. */
.odoo-statusbar {
  border-bottom: none;
}
.odoo-statusbar .stage {
  padding: var(--esp-3) var(--esp-5);
  color: var(--txt-fraco);   /* era --txt-sutil: 2,4:1, ilegível */
}

/* Chips de contexto: sem linha embaixo, o notebook logo abaixo já traz
   a sua. Ganham respiro no lugar. */
.odoo-contexto {
  gap: var(--esp-5);
  padding: var(--esp-4) var(--esp-4) var(--esp-5);
  border-bottom: none;
}
.odoo-contexto .chip span {
  color: var(--txt-fraco);   /* rótulo do chip precisa ser legível */
}

.odoo-smart-buttons {
  gap: var(--esp-2);
  padding: var(--esp-3) var(--esp-4);
  border-bottom: none;
}

.odoo-notebook {
  margin-top: 0;
}
.odoo-notebook button {
  padding: var(--esp-3) var(--esp-4);
}

.odoo-tab { padding: var(--esp-5) 0; }
.odoo-sheet > .odoo-body { padding: 0 var(--esp-4) var(--esp-5); }

/* Rótulos e metadados que estavam em --txt-sutil (2,4:1) e carregam
   informação que o usuário precisa ler */
.dash-card-rot,
.dash-card-sub,
.tl-data,
.func-dept-header,
.func-kan-card-rod,
.func-docs-table th {
  color: var(--txt-fraco);
}

/* ====================================================================
   BARRAS DE ROLAGEM

   Os contêineres que rolam na horizontal (notebook de abas, tabelas
   largas, statusbar, kanban) mostravam a barra nativa do sistema —
   grossa, cinza e permanente, roubando a atenção logo abaixo das abas.
   Aqui ela fica fina e discreta, ganhando contraste ao passar o mouse.
   ==================================================================== */
.odoo-notebook,
.odoo-statusbar,
.tabela-rola,
.serv-kanban,
.odoo-smart-buttons {
  scrollbar-width: thin;                          /* Firefox */
  scrollbar-color: var(--borda-forte) transparent;
}
.odoo-notebook::-webkit-scrollbar,
.odoo-statusbar::-webkit-scrollbar,
.tabela-rola::-webkit-scrollbar,
.serv-kanban::-webkit-scrollbar,
.odoo-smart-buttons::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}
.odoo-notebook::-webkit-scrollbar-track,
.odoo-statusbar::-webkit-scrollbar-track,
.tabela-rola::-webkit-scrollbar-track,
.serv-kanban::-webkit-scrollbar-track,
.odoo-smart-buttons::-webkit-scrollbar-track {
  background: transparent;
}
.odoo-notebook::-webkit-scrollbar-thumb,
.odoo-statusbar::-webkit-scrollbar-thumb,
.tabela-rola::-webkit-scrollbar-thumb,
.serv-kanban::-webkit-scrollbar-thumb,
.odoo-smart-buttons::-webkit-scrollbar-thumb {
  background: var(--borda);
  border-radius: 3px;
}
.odoo-notebook:hover::-webkit-scrollbar-thumb,
.odoo-statusbar:hover::-webkit-scrollbar-thumb,
.tabela-rola:hover::-webkit-scrollbar-thumb,
.serv-kanban:hover::-webkit-scrollbar-thumb,
.odoo-smart-buttons:hover::-webkit-scrollbar-thumb {
  background: var(--borda-forte);
}

/* A seta da etapa atual é 1px mais alta que a faixa e provocava uma
   barra de rolagem vertical parasita na statusbar. */
.odoo-statusbar {
  overflow-y: hidden;
}

/* ====================================================================
   CAMPOS DENTRO DE TABELA

   As telas de lançamento (RDO, estacas, importação) montam a tabela em
   JS e os campos herdavam só o `input` base — sem padding (o reset zera)
   e com fonte de formulário, maior que a da tabela em volta. O editor de
   itens do orçamento já tinha o tratamento certo em `.itens-tabela`;
   aqui ele passa a valer para qualquer tabela.
   ==================================================================== */
table input:not([type="checkbox"]):not([type="radio"]),
table select,
table textarea {
  width: 100%;
  padding: var(--esp-1) var(--esp-2);
  border: 1px solid var(--borda);
  border-radius: var(--radius-sm);
  font-size: var(--txt-md);
  background-color: var(--sup-0);
}
/* Repete os :not() do seletor acima de propósito: sem eles esta regra
   fica menos específica que a base e o foco não pinta a borda. */
table input:not([type="checkbox"]):not([type="radio"]):focus,
table select:focus,
table textarea:focus {
  outline: none;
  border-color: var(--marca-600);
  box-shadow: 0 0 0 2px var(--marca-100);
}

/* Célula que hospeda um campo não precisa do respiro de célula de
   leitura — o campo já traz o seu. Mantém a linha mais baixa, que é o
   que importa numa tela de digitação. */
table td:has(> input),
table td:has(> select),
table td:has(> textarea) {
  padding: var(--esp-1) var(--esp-2);
}

/* ---- Caixa interna dos diálogos (o fundo é .modal-fundo) ---- */
.modal-caixa {
  background: var(--sup-0);
  max-width: 680px;
  width: 90%;
  max-height: 85vh;
  border-radius: var(--radius-md);
  padding: var(--esp-5);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

/* ---- Bloco de assinatura eletrônica (D4Sign) na ficha ---- */
.assin-bloco {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  background: var(--sup-2);
  border-radius: var(--radius-sm);
  margin-bottom: var(--esp-4);
  font-size: var(--txt-md);
}
.assin-bloco .assin-acoes {
  margin-left: auto;
  display: flex;
  gap: var(--esp-2);
  align-items: center;
}

/* ---- Carteira: controle de contratos & pendências ---- */
.cart-cliente {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
tr.cart-aberta td { background: var(--info-bg); }
.cart-detalhe-row td {
  background: var(--sup-2);
  padding: var(--esp-3) var(--esp-4);
}
.cart-detalhe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--esp-5);
  font-size: var(--txt-sm);
}
.cart-det-linha {
  display: flex;
  justify-content: space-between;
  gap: var(--esp-2);
  padding: 3px 0;
  border-bottom: 1px solid var(--borda);
}
.cart-det-linha:last-child { border-bottom: none; }

/* KPI clicável da carteira: leva direto à fila filtrada */
.ind-click { cursor: pointer; }
.ind-click:hover { border-color: var(--marca-600); box-shadow: var(--shadow-sm); }

/* Nº do contrato no sistema do cliente: trunca para a coluna
   Pendências caber na tela */
.cart-numcli {
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Caixa de novo comentário na timeline da obra (fase 23) ---- */
.tl-nova-caixa {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  align-items: center;
  padding: var(--esp-3);
  background: var(--sup-2);
  border-radius: var(--radius-sm);
  margin-bottom: var(--esp-4);
}
.tl-nova-caixa input {
  flex: 2 1 260px;
  padding: var(--esp-2) var(--esp-3);
  border: 1px solid var(--borda);
  border-radius: var(--radius-sm);
  font-size: var(--txt-md);
  background: var(--sup-0);
}
.tl-nova-caixa select {
  flex: 1 1 170px;
  padding: var(--esp-2);
  border: 1px solid var(--borda);
  border-radius: var(--radius-sm);
  font-size: var(--txt-md);
  background: var(--sup-0);
}
.tl-nova-caixa .btn { padding: 8px 16px; font-size: var(--txt-md); }

/* Link "Esqueci minha senha" na tela de login */
.link-esqueci {
  display: block;
  margin: var(--esp-3) auto 0;
  font-size: var(--txt-sm);
  color: var(--marca-600);
  text-decoration: underline;
  background: none;
  border: none;
}
.link-esqueci:hover { color: var(--marca-700); }
.link-esqueci:disabled { color: var(--txt-sutil); cursor: default; text-decoration: none; }

/* ---- Estacas: validação de distância na planta (fase 25) ---- */
.dist-aviso {
  font-size: var(--txt-sm);
  padding: var(--esp-2) var(--esp-3);
  border-radius: var(--radius-sm);
  margin-bottom: var(--esp-2);
  line-height: 1.5;
}
.dist-aviso.ok      { background: var(--sucesso-bg); color: var(--sucesso-txt); }
.dist-aviso.alerta  { background: var(--aviso-bg);   color: var(--aviso-txt); }
.dist-aviso.neutro  { background: var(--sup-2);      color: var(--txt-fraco); }
.dist-aviso ul { margin: var(--esp-1) 0 0; padding-left: 18px; }
.dist-aviso li { margin-bottom: 2px; }
.dist-aviso .meta { display: block; margin-top: 2px; }