:root {
  --azul: #0b3c5d;
  --azul-claro: #e0f2fe;
  --cinza: #e5e7eb;
  --cinza-escuro: #4b5563;
  --verde: #16a34a;
  --vermelho: #b91c1c;
}

/* ================================================================
   DESIGN SYSTEM — TOKENS BASE (P-UX-DESIGN-SYSTEM-TOKENS-BASE-01)
   Somente adições — não remove nem altera tokens existentes acima.
   ================================================================ */
:root {
  /* Primários */
  --ds-navy:      #0b3c5d;
  --ds-navy-dark: #072b43;
  --ds-sky:       #0ea5e9;
  --ds-sky-light: #e0f2fe;

  /* Semânticos */
  --ds-success: #10b981;
  --ds-warning: #f59e0b;
  --ds-danger:  #ef4444;
  --ds-info:    #0ea5e9;

  /* Fundos */
  --ds-surface:     #ffffff;
  --ds-bg:          #f8fafc;
  --ds-bg-muted:    #f1f5f9;
  --ds-bg-elevated: #ffffff;

  /* Texto */
  --ds-text:           #0f172a;
  --ds-text-muted:     #64748b;
  --ds-text-secondary: #475569;
  --ds-text-inverse:   #ffffff;

  /* Bordas */
  --ds-border:        #e2e8f0;
  --ds-border-med:    #cbd5e1;
  --ds-border-strong: #94a3b8;

  /* Sombras */
  --ds-shadow-sm: 0 1px 3px rgba(15, 23, 42, .06);
  --ds-shadow-md: 0 4px 12px rgba(15, 23, 42, .10);
  --ds-shadow-lg: 0 10px 24px rgba(15, 23, 42, .14);

  /* Raios de borda */
  --ds-radius-sm: 4px;
  --ds-radius-md: 8px;
  --ds-radius-lg: 12px;
  --ds-radius-xl: 16px;

  /* Espaçamento */
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-space-8: 32px;

  /* Tipografia */
  --ds-font-family:        Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ds-font-size-xs:       12px;
  --ds-font-size-sm:       13px;
  --ds-font-size-md:       14px;
  --ds-font-size-lg:       16px;
  --ds-font-size-xl:       20px;
  --ds-line-height-tight:  1.2;
  --ds-line-height-normal: 1.5;

  /* Workspace-first: métricas de densidade */
  --ds-header-height-compact:    48px;
  --ds-control-height-sm:        32px;
  --ds-control-height-md:        38px;
  --ds-table-row-height-compact: 36px;
  --ds-card-padding-compact:     12px;
  --ds-card-padding-default:     16px;

  /* Z-index */
  --ds-z-dropdown: 1000;
  --ds-z-modal:    9000;
  --ds-z-toast:    99999;

  /* Aliases para tokens usados pelo analitico.css (eram indefinidos globalmente) */
  --color-primary:       var(--ds-navy);
  --color-primary-light: var(--ds-sky-light);
  --bg-surface:          var(--ds-bg);
  --border-light:        var(--ds-border);
  --border-medium:       var(--ds-border-med);
  --text-main:           var(--ds-text);
  --shadow-md:           var(--ds-shadow-md);
  --radius-md:           var(--ds-radius-md);
}

* { box-sizing: border-box; }

/* ================================================================
   P-UX-DESIGN-SYSTEM-FUNDACAO-VISUAL-RESPONSIVA-01
   Fundação global: tipografia via tokens DS + rede de segurança
   contra estouro horizontal no mobile. Somente adições/ajustes
   pontuais — nenhuma tela, ID, classe de componente ou lógica JS
   foi tocada. Ver index.html (webfont Inter) e blocos @media abaixo.
   ================================================================ */
html {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

img, table, video, iframe, canvas, svg {
  max-width: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--ds-font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: var(--ds-line-height-normal);
  background: radial-gradient(circle at top left, #e5e7eb 0, #f9fafb 40%, #e5e7eb 100%);
  min-height: 100vh;
  overflow-x: hidden;
  display: flex;
  justify-content: center;
  align-items: stretch;
  color: var(--ds-text);
}

/* P-UX-DESIGN-SYSTEM-CASCA-COMUM-01: .aba-conteudo é o container
   compartilhado pelas 8 abas (#aba-projetos, #aba-orcamento,
   #aba-memorial, #aba-cronograma, #aba-auditoria — que também
   contém o Fechamento aninhado —, #aba-analitico, #aba-medicao,
   #aba-reequilibrio). Nenhuma delas tinha CSS próprio aqui.
   Problema real: #app tem height:98vh fixo, mas .aba-conteudo (filho
   flex) não tinha min-height:0 — conteúdo mais alto que a tela
   estourava a caixa do #app e fazia a PÁGINA INTEIRA rolar,
   escondendo header/#abas-nav. Resultado: cada aba "sentia" diferente
   (algumas cabiam em 98vh, outras não) e a navegação sumia da tela ao
   rolar. Handlers position:fixed já existentes no app (tooltip do
   Gantt, overlay do Admin) não dependem da rolagem da página — não
   são afetados por esta mudança. Só contenção de scroll: nenhum
   padding/cor/conteúdo interno de aba foi alterado aqui. */
.aba-conteudo {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

#app {
  width: 100%;
  max-width: 1280px; /* Levemente aumentado para caber melhor os botões */
  min-width: 0; /* impede que filhos sem wrap (ex.: nav de abas) empurrem a página inteira */
  background: rgba(243, 244, 246, 0.98);
  margin: 10px;
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15);
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 98vh; /* Ocupa quase toda a tela */
}

/* ================= HEADER ================= */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(0,0,0,0.08);
  flex-shrink: 0;
}

#titulo { font-size: 20px; font-weight: 800; color: var(--azul); letter-spacing: -0.01em; }
#sub { font-size: 13px; color: var(--cinza-escuro); font-weight: 500; }

#logo-fake {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 11px;
  color: #0b3c5d;
  background: transparent;
  text-align: left;
}
#logo-fake img { height: 55px; display: block; }

#logo-texto { display: flex; flex-direction: column; line-height: 1.2; }
#logo-texto div:first-child { font-weight: 600; font-size: 13px; }
#logo-texto div:last-child { font-size: 11px; opacity: 0.9; }

/* ================= RESUMO FIXO TOPO (AZUL) ================= */
#resumo-fixo-topo {
  background-color: var(--azul);
  color: white;
  padding: 10px 20px;
  border-radius: var(--ds-radius-md);
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  box-shadow: var(--ds-shadow-md);
  flex-shrink: 0;
}

/* ================= DADOS DA OBRA ================= */
#dados-obra {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 12px;
  padding: 14px 16px;
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  box-shadow: var(--ds-shadow-sm);
  font-size: 12px;
  flex-shrink: 0;
  align-items: end;
}

#dados-obra label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: #4b5563;
  font-weight: bold;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

#dados-obra input {
  padding: 7px 9px;
  border-radius: var(--ds-radius-sm);
  border: 1px solid var(--ds-border-med);
  font-size: 12px;
  width: 100%;
  min-width: 0;
  max-width: none;
  box-sizing: border-box;
  transition: border-color .13s ease, box-shadow .13s ease;
}

#dados-obra input:focus {
  outline: none;
  border-color: var(--ds-sky);
  box-shadow: 0 0 0 3px var(--ds-sky-light);
}

/* Observações ocupa as colunas 3 e 4 da segunda linha */
#dados-obra .obra-observacoes {
  grid-column: 3 / 5;
  width: 100%;
}

/* Mantém adm/mobilização nas duas primeiras colunas da terceira linha */
#dados-obra label[for="obra-perc-adm"],
#dados-obra label:has(#obra-perc-adm) {
  grid-column: 1 / 2;
}

#dados-obra label[for="obra-perc-mob"],
#dados-obra label:has(#obra-perc-mob) {
  grid-column: 2 / 3;
}

/* Logo fica nas colunas 3 e 4 da terceira linha, em faixa horizontal */
#dados-obra .obra-logo-pdf-card {
  grid-column: 3 / 5;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 7px 10px;
  border: 1px solid #dbe4ee;
  border-radius: 6px;
  background: #f8fafc;
  box-sizing: border-box;
}

#dados-obra .obra-logo-pdf-info {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}

#dados-obra .obra-logo-pdf-label {
  font-size: 12px;
  font-weight: 800;
  color: #0b3c5d;
  line-height: 1.2;
  white-space: nowrap;
}

#dados-obra .obra-logo-pdf-status {
  font-size: 12px;
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.25;
  min-width: 0;
}

#dados-obra .obra-logo-pdf-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex: 0 0 auto;
  min-width: 0;
}

#dados-obra .obra-logo-pdf-actions button {
  border-radius: 6px;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.1;
}

#obra-logo-pdf-selecionar {
  background: #0ea5e9;
  color: white;
  border: 1px solid #0284c7;
}

#obra-logo-pdf-remover {
  display: none;
  background: white;
  color: #0b3c5d;
  border: 1px solid #94a3b8;
}

/* ================= NAVEGAÇÃO ABAS ================= */
#abas-nav {
  display: flex; gap: 8px; margin-top: 6px; margin-bottom: 4px;
  border-bottom: 1px solid #e5e7eb; padding: 0 2px 4px 2px; flex-shrink: 0;
}
.aba-btn {
  border: none; background: #e5e7eb; color: #374151;
  padding: 6px 14px; border-radius: 999px;
  font-size: 11px; cursor: pointer; font-weight: bold;
}
.aba-btn.ativo {
  background: var(--azul); color: #f9fafb;
  box-shadow: 0 2px 6px rgba(15,23,42,0.3);
}

/* ================= ÁREA DO ORÇAMENTO (MELHORIA 2) ================= */
/* Unifiquei as regras duplicadas aqui */
.orcamento-tabela-container {
  flex-grow: 1;           /* Ocupa o resto do espaço vertical */
  height: 70vh;           /* Altura forçada grande */
  min-height: 400px;
  overflow-y: auto;       /* Rolagem vertical */
  overflow-x: auto;       /* Rolagem horizontal se necessário */
  border: 1px solid #0b3c5d;
  margin-top: 5px;
  border-radius: 4px;
  background: white;
}

#orcamento-table { width: 100%; border-collapse: collapse; font-size: 13px; }

/* Cabeçalho fixo da tabela */
#orcamento-table thead th {
  position: sticky; top: 0; z-index: 10;
  background: #e5e7eb; color: #4b5563;
  padding: 8px 7px; border-bottom: 2px solid #d1d5db;
  text-transform: uppercase; font-size: 11px; letter-spacing: 0.06em;
}

#orcamento-table td {
  padding: 4px 7px; border-bottom: 1px solid #e5e7eb; vertical-align: middle;
}

.num { text-align: right; white-space: nowrap; }

/* Linha do Grupo (Achata a altura para ficar elegante) */
.grupo-row td {
  background: var(--azul-claro) !important;
  font-weight: 600;
  height: 40px !important;
  line-height: 1.2;
}

/* ================= BOTÕES PADRONIZADOS (MELHORIA 3) ================= */
/* Grid 2x2 para os botões ficarem em quadrado */
.acoes-grid-2x2 {
  display: grid;
  grid-template-columns: 28px 28px;
  grid-template-rows: 28px 28px;
  gap: 4px;
  justify-content: center;
  width: 60px; /* Garante largura fixa */
}

/* Estilo padrão de TODOS os botões de ação (Grupo e Item) */
.btn-acao-padrao {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  border: 1px solid #cbd5e1;
  background: #fff;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: 0.2s;
}

.btn-acao-padrao:hover { background: #f3f4f6; border-color: var(--azul); }

/* Cores específicas */
.btn-remover { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; }
.btn-remover:hover { background: #fecaca; }

.btn-copiar { background: #fef3c7; border-color: #fcd34d; color: #b45309; }
.btn-copiar:hover { background: #fde68a; }

/* Botões do Rodapé (PDF/Salvar) */
#btn-limpar, #btn-pdf, #btn-word, #btn-salvar-arquivo, #btn-carregar-arquivo, #btn-cronograma-pdf {
  border-radius: 999px; border: none; padding: 6px 14px;
  font-size: 11px; cursor: pointer; color: #f9fafb; font-weight: bold; margin-right: 5px;
}
#btn-limpar { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; }
#btn-salvar-arquivo, #btn-carregar-arquivo { background: var(--azul); }
#btn-pdf, #btn-word, #btn-cronograma-pdf { background: var(--verde); }

/* ================= MEMORIAL E BUSCA ================= */
#busca-area {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px; border-radius: 12px;
  background: #f9fafb; border: 1px solid #d1d5db;
}
#campo-busca {
  flex: 1; min-width: 220px; padding: 7px 10px;
  border-radius: 999px; border: 1px solid #d1d5db; font-size: 13px;
}
#resultados {
  max-height: 260px; overflow-y: auto;
  border-radius: 10px; border: 1px solid #e5e7eb; background: #f9fafb;
}

/* Card do Memorial */
.mem-item-card {
  border: 1px solid #ddd; padding: 15px; margin-bottom: 10px;
  border-radius: 8px; background: #fff;
}
.mem-input-num { width: 60px; text-align: right; padding: 4px; border: 1px solid #ccc; border-radius: 4px;}

/* Áreas roláveis das outras abas */
#aba-memorial, #aba-cronograma {
  flex-grow: 1;
  overflow-y: auto;
  padding-right: 4px;
}

/* ================= CRONOGRAMA ================= */
.cron-tabela-wrapper { width: 100%; overflow-x: auto; }
.cron-tabela { width: 100%; border-collapse: collapse; font-size: 11px; }
.cron-tabela th, .cron-tabela td {
  border-bottom: 1px solid #e5e7eb; padding: 4px 6px; white-space: nowrap;
}
/* Coluna de DESCRIÇÃO do cronograma */
.cron-tabela th:nth-child(3), .cron-tabela td:nth-child(3) {
  white-space: normal; max-width: 260px;
}
.cron-grupo-row { background: var(--azul-claro); font-weight: 600; }

/* Mobile */
@media (max-width: 600px) {
  #app { margin: 0; border-radius: 0; box-shadow: none; height: 100vh; }
  header { flex-direction: column; align-items: flex-start; }
  #logo-fake { align-self: flex-end; }
  #dados-obra { grid-template-columns: 1fr 1fr; }
  /* #dados-obra passa a ter só 2 colunas aqui em cima, mas .obra-observacoes
     e .obra-logo-pdf-card ainda pedem "grid-column: 3 / 5" (definido para o
     grid de 4 colunas do desktop). Colunas 3 e 4 não existem neste grid de
     2 colunas — o grid cria colunas implícitas extras para satisfazer o
     posicionamento, e é isso que empurra a tela para fora no celular. */
  #dados-obra .obra-observacoes,
  #dados-obra .obra-logo-pdf-card {
    grid-column: 1 / -1;
  }
}
#btn-novo-grupo {
    background-color: #ffffff !important;   /* Fundo Branco */
    color: #0b3c5d !important;              /* Texto Azul Escuro */
    border: 1px solid #0b3c5d !important;   /* Borda fina Azul */
    font-weight: bold;
    cursor: pointer;
}
/* --- RODAPÉ ORGANIZADO E AFASTADO --- */
.footer-actions {
    margin-top: 30px;
    padding-top: 20px;
    padding-bottom: 60px; /* AQUI: Afasta 60px do fim da página */
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-right {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Padrão Visual dos Botões do Rodapé */
.btn-footer {
    padding: 10px 20px;
    border-radius: 6px;
    border: none;
    font-weight: bold;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: transform 0.1s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.btn-footer:active { transform: translateY(1px); }

/* Cores */
.btn-danger  { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; }
.btn-primary { background: #0b3c5d; color: white; }
.btn-success { background: #16a34a; color: white; }

/* Mobile: empilha se a tela for pequena */
@media (max-width: 700px) {
    .footer-actions { flex-direction: column; gap: 15px; }
    .footer-right { flex-wrap: wrap; justify-content: center; }
}
/* Dashboard Cronograma Styles */
.cron-container-dashboard {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 10px;
}

.cron-item-card {
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    padding: 15px;
}

.cron-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 8px;
    margin-bottom: 12px;
}

.cron-meses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
}

.cron-mes-input-group {
    background: #f8fafc;
    padding: 8px;
    border-radius: 6px;
    text-align: center;
    border: 1px solid #cbd5e1;
}

.cron-val-reais {
    display: block;
    font-size: 10px;
    color: #64748b;
    margin-top: 4px;
}

.status-pill {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: bold;
}

.btn-warning {
  background: #eab308;
  color: #111827;
}
.btn-warning:hover {
  background: #d97706;
}
.btn-ghost-danger {
  background: transparent;
  color: var(--vermelho);
  border: none;
}
.btn-ghost-danger:hover {
  background: #fee2e2;
}
/* ================= SISTEMA DE BOTÕES PADRONIZADO (MODERNO) ================= */
/* Base para todos os botões novos */
.btn-sys {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  line-height: 1.4;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.btn-sys:active { transform: translateY(1px); box-shadow: none; }

/* 1. Botão Azul Suave (Para Adicionar Memória, etc) */
.btn-sys-primary {
  background-color: #f0f9ff;
  color: #0284c7;
  border-color: #bae6fd;
}
.btn-sys-primary:hover { background-color: #e0f2fe; border-color: #7dd3fc; }

/* 2. Botão Vermelho Suave (Para Descontos e Excluir) */
.btn-sys-danger {
  background-color: #fef2f2;
  color: #dc2626;
  border-color: #fecaca;
}
.btn-sys-danger:hover { background-color: #fee2e2; border-color: #fca5a5; }

/* 3. Botão Amarelo/Laranja Suave (Para Editar e CPU) */
.btn-sys-warning {
  background-color: #fffbeb;
  color: #d97706;
  border-color: #fde68a;
}
.btn-sys-warning:hover { background-color: #fef3c7; border-color: #fcd34d; }

/* 4. Botão Neutro/Branco (Para Mover Cima/Baixo e Copiar) */
.btn-sys-default {
  background-color: #ffffff;
  color: #475569;
  border-color: #cbd5e1;
}
.btn-sys-default:hover { background-color: #f8fafc; border-color: #94a3b8; color: #0f172a; }

/* Tamanho reduzido para ícones pequenos (✖, ⬆️, ⬇️) */
.btn-sys-icon {
  padding: 4px 8px;
  font-size: 13px;
}

/* ================================================================
   DESIGN SYSTEM — HEADER COMPACT (P-UX-DESIGN-SYSTEM-HEADER-COMPACT-01)
   Workspace-first: recupera ~90px de área útil.
   Somente adições — não remove nem altera regras acima.
   ================================================================ */

/* Userbar compacto */
#siao-auth-userbar { padding: 4px 10px; }
.siao-auth-logout  { padding: 3px 8px; }

/* Header compacto — !important necessário: inline style no index.html vence CSS sem ele */
#app > header  { padding: 6px 20px !important; }
#logo-fake img { height: 36px !important; }

/* Abas compactas */
#abas-nav { margin-top: 2px; margin-bottom: 2px; gap: 4px; }
.aba-btn  { padding: 4px 10px; }

/* Footer compacto */
.footer-actions { padding-bottom: 16px; margin-top: 16px; padding-top: 12px; }

/* ================================================================
   DESIGN SYSTEM — COMPONENTS BASE (P-UX-DESIGN-SYSTEM-COMPONENTS-BASE-01)
   Classes novas com prefixo ds-. Somente adições.
   Não aplicar em módulos ainda — biblioteca disponível para uso futuro.
   ================================================================ */

/* ---- ds-btn: botão base ---- */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
  height: var(--ds-control-height-md);
  padding: 0 var(--ds-space-4);
  font-family: var(--ds-font-family);
  font-size: var(--ds-font-size-sm);
  font-weight: 700;
  line-height: var(--ds-line-height-tight);
  border-radius: var(--ds-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: var(--ds-shadow-sm);
  transition: background 0.13s, border-color 0.13s, box-shadow 0.13s;
}
.ds-btn:active      { transform: translateY(1px); box-shadow: none; }
.ds-btn:focus-visible { outline: 2px solid var(--ds-sky); outline-offset: 2px; }

.ds-btn--primary   { background: var(--ds-navy);     color: var(--ds-text-inverse); border-color: var(--ds-navy-dark); }
.ds-btn--primary:hover   { background: var(--ds-navy-dark); }

.ds-btn--secondary { background: var(--ds-bg-muted); color: var(--ds-text);         border-color: var(--ds-border-med); }
.ds-btn--secondary:hover { background: var(--ds-border); }

.ds-btn--ghost     { background: transparent;        color: var(--ds-navy);         border-color: var(--ds-border-med); box-shadow: none; }
.ds-btn--ghost:hover     { background: var(--ds-bg-muted); }

.ds-btn--danger    { background: var(--ds-surface);  color: var(--ds-danger);       border-color: var(--ds-danger); }
.ds-btn--danger:hover    { background: var(--ds-bg-muted); }

.ds-btn--sm { height: var(--ds-control-height-sm); padding: 0 var(--ds-space-3); font-size: var(--ds-font-size-xs); }
.ds-btn--lg { height: calc(var(--ds-control-height-md) + 8px); padding: 0 var(--ds-space-6); font-size: var(--ds-font-size-md); }

/* ---- ds-card ---- */
.ds-card {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  padding: var(--ds-card-padding-default);
  box-shadow: var(--ds-shadow-sm);
}
.ds-card--compact { padding: var(--ds-card-padding-compact); border-radius: var(--ds-radius-sm); }

/* ---- ds-badge ---- */
.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-1);
  padding: 2px var(--ds-space-2);
  font-family: var(--ds-font-family);
  font-size: var(--ds-font-size-xs);
  font-weight: 700;
  line-height: var(--ds-line-height-tight);
  border-radius: 999px;
  background: var(--ds-bg-muted);
  color: var(--ds-text-secondary);
  border: 1px solid var(--ds-border);
}
.ds-badge--success { background: #d1fae5; color: #065f46; border-color: #6ee7b7; }
.ds-badge--warning { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.ds-badge--danger  { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.ds-badge--info    { background: var(--ds-sky-light); color: var(--ds-navy); border-color: var(--ds-sky); }

/* ---- ds-empty ---- */
.ds-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-3);
  padding: var(--ds-space-8) var(--ds-space-6);
  text-align: center;
  color: var(--ds-text-muted);
  font-size: var(--ds-font-size-sm);
  background: var(--ds-bg);
  border: 1px dashed var(--ds-border-med);
  border-radius: var(--ds-radius-md);
}

/* ---- ds-toolbar ---- */
.ds-toolbar {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: var(--ds-space-2) var(--ds-space-3);
  background: var(--ds-bg-muted);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  flex-wrap: wrap;
}

/* ---- ds-section-title ---- */
.ds-section-title {
  margin: 0;
  font-family: var(--ds-font-family);
  font-size: var(--ds-font-size-md);
  font-weight: 800;
  color: var(--ds-navy);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  line-height: var(--ds-line-height-tight);
}

/* ================================================================
   P-UX-DESIGN-SYSTEM-FUNDACAO-VISUAL-CAMADA-02
   Camada visual perceptível sobre classes GLOBAIS já usadas em
   todas as telas (botões .btn-primary/.btn-success/.btn-danger,
   inputs Bootstrap .form-control/.form-select, cards Bootstrap
   .card). Não introduz classes novas no HTML/JS, não remove nem
   renomeia nada — só refina cor de base já existente com sombra,
   raio, borda e estados de hover/foco consistentes. Efeito é
   automaticamente herdado em qualquer tela que já usa essas
   classes (inclusive módulos com CSS próprio como Fechamento/
   Medição), pois nenhuma dessas classes teve override de cor,
   raio ou sombra até agora — zero conflito de especificidade.
   ================================================================ */

/* ---- Botões globais: .btn-primary / .btn-success / .btn-danger ----
   Cores de base preservadas (identidade do sistema intacta).
   Adicionado: borda sutil, sombra discreta, raio DS, hover/active
   com filter (funciona para qualquer cor sem precisar de tokens
   novos por variante) e foco visível para acessibilidade. */
.btn-primary,
.btn-success,
.btn-danger {
  border-radius: var(--ds-radius-sm);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: var(--ds-shadow-sm);
  transition: filter .15s ease, box-shadow .15s ease, transform .15s ease;
}

.btn-primary:hover,
.btn-success:hover,
.btn-danger:hover {
  filter: brightness(0.94);
  box-shadow: var(--ds-shadow-md);
}

.btn-primary:active,
.btn-success:active,
.btn-danger:active {
  filter: brightness(0.9);
  box-shadow: none;
  transform: translateY(1px);
}

.btn-primary:focus-visible,
.btn-success:focus-visible,
.btn-danger:focus-visible,
.btn-sys-default:focus-visible {
  outline: 2px solid var(--ds-sky);
  outline-offset: 2px;
}

.btn-sys-default {
  border-radius: var(--ds-radius-sm);
  box-shadow: var(--ds-shadow-sm);
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

/* ---- Rodapé de ações (.btn-footer): já tinha padding/raio/sombra
   próprios — só adiciona hover, que faltava. ---- */
.btn-footer:hover {
  filter: brightness(0.95);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14);
}

/* ---- Inputs/selects globais (Bootstrap .form-control/.form-select):
   ~140 ocorrências no app (Orçamento, Fechamento, Medição, Bases,
   Admin) sem nenhum override prévio — hoje usam só o padrão do
   Bootstrap. Aqui só refinamos borda, raio e foco com tokens DS;
   altura/padding do Bootstrap são preservados. ---- */
.form-control,
.form-select {
  border-color: var(--ds-border-med);
  border-radius: var(--ds-radius-sm);
  font-family: var(--ds-font-family);
  transition: border-color .13s ease, box-shadow .13s ease;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--ds-sky);
  box-shadow: 0 0 0 3px var(--ds-sky-light);
}

/* ---- Cards Bootstrap genéricos (.card/.card-header): usados em
   modais e painéis (Fechamento, Orçamento, wizards de importação).
   Sem override prévio — refino de raio/sombra apenas; ".border-0"
   já usado em vários deles continua funcionando (só zera a borda,
   não o raio nem a sombra). ---- */
.card {
  border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-shadow-sm);
}

.card-header {
  border-top-left-radius: var(--ds-radius-md);
  border-top-right-radius: var(--ds-radius-md);
}

/* ================================================================
   DESIGN SYSTEM — APPLY ORCAMENTO HEADER
   (P-UX-DESIGN-SYSTEM-APPLY-ORCAMENTO-HEADER-01)
   Aplica tokens --ds-* no cabeçalho e toolbar da aba Orçamento.
   Somente adições — nenhuma regra existente removida ou alterada.
   Não toca em tabela, #orcamento-body, .grupo-row, cálculo,
   autosave, busca de bases, JS ou HTML.
   ================================================================ */

/* 1 — Resumo fixo topo: propriedades não sobrepostas por JS.
   ui.js:1251 injeta background, color, padding, borderRadius, marginTop
   e display como inline style. As propriedades abaixo não são cobertas
   pelo JS — CSS vence sem !important. */
#resumo-fixo-topo {
  font-family:    var(--ds-font-family);
  font-size:      var(--ds-font-size-sm);
  gap:            var(--ds-space-3);
  box-shadow:     var(--ds-shadow-md);
  border-left:    4px solid var(--ds-sky);
  letter-spacing: 0.3px;
}

/* 2 — Parâmetros da obra: acento esquerdo navy + margens compactas.
   !important necessário: <details> tem border, margin-top e margin-bottom
   como inline style no HTML (venceriam qualquer CSS sem !important). */
#aba-orcamento details {
  font-family:   var(--ds-font-family);
  border-left:   4px solid var(--ds-navy) !important;
  margin-top:    8px !important;
  margin-bottom: 8px !important;
}

/* Summary: font-family e letter-spacing ausentes do inline style — sem !important. */
#aba-orcamento details summary {
  font-family:    var(--ds-font-family);
  letter-spacing: 0.2px;
}

/* 3 — Toolbar "Itens do Orçamento": acento sky + sombra DS.
   !important necessário: div tem border (cobre border-left) e box-shadow
   como inline style no HTML. */
#orcamento-area > div:first-child {
  border-left: 4px solid var(--ds-sky) !important;
  box-shadow:  var(--ds-shadow-sm) !important;
}

/* Título h3: font-family (não inline) + letter-spacing positivo.
   !important necessário: inline tem letter-spacing: -0.5px. */
#orcamento-area > div:first-child h3 {
  font-family:    var(--ds-font-family);
  letter-spacing: 0.3px !important;
}

/* 4 — Total geral: tipografia DS.
   Inline tem apenas margin-top, text-align, font-weight — sem conflito
   com font-family, font-size, color, letter-spacing, padding-top. */
#total-geral {
  font-family:    var(--ds-font-family);
  font-size:      var(--ds-font-size-lg);
  color:          var(--ds-navy);
  letter-spacing: 0.3px;
  padding-top:    var(--ds-space-3);
  border-top:     1px solid var(--ds-border);
}

/* ================================================================
   DESIGN SYSTEM — APPLY ORCAMENTO ACTIONS
   (P-UX-DESIGN-SYSTEM-APPLY-ORCAMENTO-ACTIONS-01)
   Aplica tokens --ds-* nos botões e áreas de ação do Orçamento.
   Somente adições. Zero remoções ou alterações de regras acima.
   Escopo: #aba-orcamento e IDs únicos da aba.
   ================================================================ */

/* ---- Botões do rodapé: DS unificado ----
   !important em border-radius e box-shadow: .btn-footer tem inline styles no HTML
   (border-radius: 6px, box-shadow, transition). font-family e letter-spacing
   não estão nos inline styles — CSS vence sem !important.
   Hover via filter: JS onmouseover manipula apenas transform e boxShadow;
   filter não é tocado pelo JS e permanece sob controle do CSS. */
#aba-orcamento .btn-footer {
  font-family:    var(--ds-font-family);
  letter-spacing: 0.2px;
  border-radius:  var(--ds-radius-sm) !important;
  box-shadow:     var(--ds-shadow-sm) !important;
  transition:     background 0.13s, filter 0.13s, box-shadow 0.13s !important;
}

#aba-orcamento .btn-footer:hover        { filter: brightness(1.08); }
#aba-orcamento .btn-footer:active       { box-shadow: none !important; }
#aba-orcamento .btn-footer:focus-visible {
  outline:        2px solid var(--ds-sky);
  outline-offset: 2px;
}

/* ---- Select de grupo: fonte DS ----
   font-family ausente do inline style de #grupo-orcamento — sem !important. */
#grupo-orcamento {
  font-family: var(--ds-font-family);
}

/* ---- Botões de logo PDF: DS compact ----
   Duplo ID (#dados-obra + ID do botão) supera especificidade de
   #dados-obra .obra-logo-pdf-actions button (1,1,1) sem precisar de !important.
   Os botões não têm inline style no HTML. */
#dados-obra #obra-logo-pdf-selecionar,
#dados-obra #obra-logo-pdf-remover {
  font-family:    var(--ds-font-family);
  height:         var(--ds-control-height-sm);
  border-radius:  var(--ds-radius-sm);
  letter-spacing: 0.2px;
  transition:     background 0.13s, filter 0.13s;
}
#dados-obra #obra-logo-pdf-selecionar:hover           { filter: brightness(1.1); }
#dados-obra #obra-logo-pdf-selecionar:focus-visible,
#dados-obra #obra-logo-pdf-remover:focus-visible {
  outline:        2px solid var(--ds-sky);
  outline-offset: 2px;
}

/* ---- Focus nos inputs de parâmetros: DS tokens ----
   Mesma especificidade do bloco anterior, posterior no arquivo → vence.
   Substitui var(--azul-claro)/#e0f2fe por var(--ds-sky)/#0ea5e9 —
   maior contraste e alinhamento ao token de foco DS. */
#dados-obra input:focus,
#dados-obra select:focus {
  outline:        2px solid var(--ds-sky);
  outline-offset: 1px;
  border-color:   var(--ds-sky);
}

/* ================================================================
   DESIGN SYSTEM — APPLY ORCAMENTO WORKSPACE
   (P-UX-DESIGN-SYSTEM-APPLY-ORCAMENTO-WORKSPACE-01)
   Somente adições. Escopo: #aba-orcamento, #orcamento-cards-view
   e IDs únicos da aba. Zero remoções. Não toca em JS, HTML,
   cálculo, autosave, busca, importação, exportação ou módulos
   externos (Medição, Fechamento, Admin, Billing, Compliance).
   ================================================================ */

/* 1. Tipografia base: herança para toda a aba, incluindo conteúdo
   JS-gerado em #orcamento-cards-view que não define font-family
   inline — CSS font-family é propriedade herdada. */
#aba-orcamento {
  font-family: var(--ds-font-family);
}

/* 2. Área de orçamento: fundo DS-bg unifica espaço entre toolbar
   e tabela. Inline tem apenas margin-top:5px — sem conflito.
   Ampliado nesta sessão (padding/border/shadow) para que a seção
   inteira (título+seletor, tabela, total) leia como um card único,
   em vez de um fundo solto sem moldura. */
#orcamento-area {
  background:    var(--ds-bg);
  border:        1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  box-shadow:    var(--ds-shadow-sm);
  padding:       var(--ds-space-4);
}

/* 3. Container da tabela: sombra DS mais pronunciada.
   Especificidade (1,1,0) supera .orcamento-tabela-container (0,1,0). */
#aba-orcamento .orcamento-tabela-container {
  box-shadow: var(--ds-shadow-md);
}

/* 4. Cards view: numerais tabulares para alinhamento de colunas
   de valor (Qtd, Unit, Total). JS define marginTop e width
   como inline — sem conflito. */
#orcamento-cards-view {
  font-variant-numeric: tabular-nums;
}

/* 5. Cabeçalho do cards view: JS define inline background #0b3c5d,
   color white, padding, border-radius, font-weight e font-size.
   Adicionados: font-family e letter-spacing (ausentes no inline). */
#orcamento-cards-view > div:first-child {
  font-family:    var(--ds-font-family);
  letter-spacing: 0.06em;
}

/* 6. Botões de ação (.btn-icon-small e .btn-del): sem nenhum CSS
   definido em style.css até este bloco. Dois botões têm color
   e/ou font-weight inline — não conflitamos essas propriedades.
   background, border, border-radius, cursor, transition: livres. */
#orcamento-cards-view .btn-icon-small {
  padding:         2px 5px;
  border-radius:   var(--ds-radius-sm);
  border:          1px solid var(--ds-border-med);
  background:      var(--ds-surface);
  cursor:          pointer;
  line-height:     1;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  transition:      background 0.13s, border-color 0.13s, box-shadow 0.13s;
  box-shadow:      none;
}

#orcamento-cards-view .btn-icon-small:hover {
  background:   var(--ds-bg-muted);
  border-color: var(--ds-border-strong);
  box-shadow:   var(--ds-shadow-sm);
}

#orcamento-cards-view .btn-icon-small:active {
  background: var(--ds-bg);
  box-shadow: none;
}

#orcamento-cards-view .btn-icon-small:focus-visible {
  outline:        2px solid var(--ds-sky);
  outline-offset: 2px;
}

/* 7. Botão deletar (.btn-del): variante perigo sem !important.
   Especificidade (1,2,0) supera .btn-icon-small (1,1,0). */
#orcamento-cards-view .btn-icon-small.btn-del {
  border-color: #fca5a5;
  background:   #fff1f1;
}

#orcamento-cards-view .btn-icon-small.btn-del:hover {
  background:   #fee2e2;
  border-color: var(--ds-danger);
}

/* 8. Footer da aba: borda e fundo DS tokenizados.
   Especificidade (1,1,0) supera .footer-actions (0,1,0).
   border-top substitui #e5e7eb por var(--ds-border) — mesma família. */
#aba-orcamento .footer-actions {
  border-top:  1px solid var(--ds-border);
  background:  var(--ds-bg);
}

/* 9. Botões injetados na toolbar (Importar, Desfazer, Novo Grupo,
   Comp. Própria): re-criados por renderOrcamento() mas IDs são
   estáveis. font-family e letter-spacing ausentes do style.cssText
   do JS (que define background, border, border-radius, padding,
   font-size, font-weight, color, cursor, display, box-shadow,
   transition) — CSS vence sem !important. */
#btn-import-excel-injetado,
#btn-undo-injetado,
#btn-novo-grupo-orc-injetado,
#btn-nova-cpu-injetado {
  font-family:    var(--ds-font-family);
  letter-spacing: 0.3px;
}

/* ================================================================
   DESIGN SYSTEM — APPLY ORCAMENTO TABLE
   (P-UX-DESIGN-SYSTEM-APPLY-ORCAMENTO-TABLE-01)
   Moderniza visualmente a tabela/listagem do Orçamento.
   CSS-only. Escopo: #aba-orcamento. Sem alteração de JS, HTML,
   cálculo, autosave, busca, importação, exportação ou módulos
   externos (Medição, Fechamento, Admin, Billing, Compliance).
   ================================================================ */

/* 1. Container: borda neutra DS + acento navy no topo + radius DS.
   Especificidade (1,1,1) supera .orcamento-tabela-container (0,1,0)
   — sem !important. A borda all-around navy (#0b3c5d) é substituída
   por var(--ds-border-med) (#cbd5e1) mais limpa; border-top 3px
   navy mantém o acento de identidade. Border-radius 4px → 8px DS. */
#aba-orcamento .orcamento-tabela-container {
  border:        1px solid var(--ds-border-med);
  border-top:    3px solid var(--ds-navy);
  border-radius: var(--ds-radius-md);
}

/* 2. Scrollbar: thumb neutro DS, track bg-muted. */
#aba-orcamento .orcamento-tabela-container::-webkit-scrollbar             { width: 6px; height: 6px; }
#aba-orcamento .orcamento-tabela-container::-webkit-scrollbar-track       { background: var(--ds-bg-muted); border-radius: 4px; }
#aba-orcamento .orcamento-tabela-container::-webkit-scrollbar-thumb       { background: var(--ds-border-strong); border-radius: 4px; }
#aba-orcamento .orcamento-tabela-container::-webkit-scrollbar-thumb:hover { background: var(--ds-text-muted); }

/* 3. Tabela legada (#orcamento-table): oculta por JS (display:none)
   mas permanece no DOM. CSS DS aplicado para documentação do padrão
   e compatibilidade com eventual re-exibição ou fallback.
   font-size: var(--ds-font-size-sm) = 13px (igual ao original). */
#aba-orcamento #orcamento-table {
  font-family: var(--ds-font-family);
  font-size:   var(--ds-font-size-sm);
}

/* 3a. Cabeçalho DS: navy profissional em vez de cinza #e5e7eb.
   position:sticky, top:0, z-index:10 e text-transform:uppercase
   herdados da regra original (spec menor) sem conflito.
   Especificidade (2,0,2) supera #orcamento-table thead th (1,0,2). */
#aba-orcamento #orcamento-table thead th {
  background:    var(--ds-navy);
  color:         var(--ds-text-inverse);
  font-family:   var(--ds-font-family);
  font-size:     var(--ds-font-size-xs);
  font-weight:   700;
  padding:       10px 8px;
  border-bottom: 2px solid var(--ds-navy-dark);
}

/* 3b. Células: DS font, numerais tabulares, padding 6px (era 4px).
   vertical-align:middle herdado da regra original — sem conflito.
   Especificidade (2,0,2) supera #orcamento-table td (1,0,2). */
#aba-orcamento #orcamento-table td {
  font-family:          var(--ds-font-family);
  font-variant-numeric: tabular-nums;
  font-size:            var(--ds-font-size-xs);
  padding:              6px 8px;
}

/* 3c. Zebra leve: linhas pares em bg-muted para legibilidade.
   Seguro: não oculta conteúdo, não afeta inputs nem botões. */
#aba-orcamento #orcamento-table tbody tr:nth-child(even) td {
  background: var(--ds-bg-muted);
}

/* 3d. Hover na tabela legada: realce sky-light sutil.
   JS não manipula hover na tabela legada — CSS vence. */
#aba-orcamento #orcamento-table tbody tr:hover td {
  background: var(--ds-sky-light);
}

/* 3e. Linha de grupo legada: DS navy como texto + font-family.
   color não conflita com background:!important da regra original. */
#aba-orcamento .grupo-row td {
  color:          var(--ds-navy);
  font-family:    var(--ds-font-family);
  letter-spacing: 0.2px;
}

/* 4. Botões de ação legados (.btn-acao-padrao): DS tokens.
   Usados na tabela legada (oculta). font-family e border-radius
   ausentes da regra original — sem !important. */
#aba-orcamento .btn-acao-padrao {
  font-family:   var(--ds-font-family);
  border-radius: var(--ds-radius-sm);
  border-color:  var(--ds-border-med);
  transition:    background 0.13s, border-color 0.13s, box-shadow 0.13s;
}
#aba-orcamento .btn-acao-padrao:focus-visible {
  outline:        2px solid var(--ds-sky);
  outline-offset: 2px;
}

/* 5. Cards view (view ativa): letter-spacing DS profissional.
   font-family e font-variant-numeric já definidos em WORKSPACE-01.
   letter-spacing é adição nova — ausente naquele bloco. */
#aba-orcamento #orcamento-cards-view {
  letter-spacing: 0.1px;
}

/* 6. Linhas não-header do cards view: font-variant-numeric explícito.
   A propriedade é herdada de #orcamento-cards-view (WORKSPACE-01)
   mas re-declarada nos filhos diretos para garantir cobertura
   em células que recebem inline style sem font-variant-numeric. */
#orcamento-cards-view > div:not(:first-child) {
  font-variant-numeric: tabular-nums;
}

/* ================================================================
   P-UX-DESIGN-SYSTEM-APPLY-AUTH-PUBLIC-WORKSPACE-01
   Moderniza visualmente a tela pública/login do SIAOOBRAS.
   CSS-only. Escopado em #tela-login (spec 1,x,x) para superar
   auth.css (carregado depois de style.css, spec 0,x,x).
   Zero alteração de formulário, auth, CSRF, endpoints ou HTML.
   ================================================================ */

/* 1. Font DS em toda a tela pública. auth.css não declara font-family
   em nenhum seletor — cascata livre para todos os descendentes. */
#tela-login {
  font-family: var(--ds-font-family);
}

/* 2. Card de login: acento navy no topo + DS radius-lg.
   auth.css: .siao-login-card { border-radius:12px } (0,1,0) → (1,1,0) vence. */
#tela-login .siao-login-card {
  border-top:    3px solid var(--ds-navy);
  border-radius: var(--ds-radius-lg);
}

/* 3. Ícone de marca: DS radius-md (era 10px literal). */
#tela-login .siao-login-mark {
  border-radius: var(--ds-radius-md);
}

/* 4. Tabs: DS tokens em vez de literais #f1f5f9 e #e2e8f0.
   auth.css: .siao-auth-tabs { background:#f1f5f9; border:1px solid #e2e8f0 } (0,1,0). */
#tela-login .siao-auth-tabs {
  background:    var(--ds-bg-muted);
  border:        1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
}

/* 5. Tab ativa: DS navy + DS shadow-sm + DS radius-sm. */
#tela-login .siao-auth-tabs button.ativo {
  color:         var(--ds-navy);
  border-radius: var(--ds-radius-sm);
  box-shadow:    var(--ds-shadow-sm);
}

/* 6. Labels dos campos: DS text-secondary. */
#tela-login .siao-auth-field label {
  color: var(--ds-text-secondary);
}

/* 7. Inputs/selects/textareas: DS border-med + DS radius-md.
   auth.css: .siao-auth-field input { border:1px solid #cbd5e1; border-radius:8px } (0,2,0)
   #tela-login .siao-auth-field input (1,2,0) → vence. */
#tela-login .siao-auth-field input,
#tela-login .siao-auth-field select,
#tela-login .siao-auth-field textarea {
  border:        1px solid var(--ds-border-med);
  border-radius: var(--ds-radius-md);
}

/* 8. Botão principal: flat DS navy (substitui gradiente) + DS shadow-md + DS radius-md.
   auth.css: .siao-auth-button { background:linear-gradient(…) } (0,1,0) → (1,1,0) vence. */
#tela-login .siao-auth-button {
  background:     var(--ds-navy);
  box-shadow:     var(--ds-shadow-md);
  border-radius:  var(--ds-radius-md);
  letter-spacing: 0.2px;
}

/* 9. Hover do botão: DS navy-dark + DS shadow-lg.
   transform:translateY(-1px) do auth.css permanece (não sobrescrevemos). */
#tela-login .siao-auth-button:hover {
  background: var(--ds-navy-dark);
  box-shadow: var(--ds-shadow-lg);
}

/* 10. Focus-visible no botão principal (AUSENTE no auth.css — nova acessibilidade DS). */
#tela-login .siao-auth-button:focus-visible {
  outline:        2px solid var(--ds-sky);
  outline-offset: 2px;
}

/* 11. Focus-visible no olho de senha (AUSENTE no auth.css — nova acessibilidade DS). */
#tela-login .siao-auth-eye:focus-visible {
  outline:        2px solid var(--ds-sky);
  outline-offset: 2px;
}

/* 12. Links de auth: DS navy (mais autoridade que o #0369a1 literal). */
#tela-login .siao-auth-link {
  color: var(--ds-navy);
}

/* 13. Mensagens de feedback: DS radius-md.
   NÃO alteramos display, visibility, color ou background das mensagens. */
#tela-login .siao-auth-message {
  border-radius: var(--ds-radius-md);
}

/* 14. Copy side (apresentação SIAOOBRAS): DS font cascateia para a seção hero. */
#tela-login .siao-entry-copy h1,
#tela-login .siao-entry-product,
#tela-login .siao-entry-text,
#tela-login .siao-entry-subtitle {
  font-family: var(--ds-font-family);
}

/* 15. Kicker badge: DS font. Mantemos border-radius:999px (pill intencional). */
#tela-login .siao-entry-kicker {
  font-family: var(--ds-font-family);
}

/* 16. Points/chips da copy: DS font + DS radius-md. */
#tela-login .siao-entry-points span {
  font-family:   var(--ds-font-family);
  border-radius: var(--ds-radius-md);
}

/* 17. Footer público: DS font. */
#tela-login .siao-public-footer {
  font-family: var(--ds-font-family);
}

/* 18. Plano intent: DS radius-md. */
#tela-login .siao-auth-plan-intent {
  border-radius: var(--ds-radius-md);
}

/* 19. Userbar pós-login: DS font. */
#siao-auth-userbar {
  font-family: var(--ds-font-family);
}

/* ================================================================
   P-UX-DESIGN-SYSTEM-APPLY-MEMORIAL-AUDITORIA-WORKSPACE-01
   Moderniza visual de Memorial e Auditoria.
   Diagnostico:
   (1) Memorial: .mem-item-card sem presenca visual; .mem-input-num
       sem estado de foco DS; inline styles em 100% dos cards e
       secoes tornam CSS-only limitado - apenas classes sem conflito
       de inline sao estilizaveis sem a propriedade proibida.
   (2) Auditoria: .siao-wrapper usa background #f8f9fa e font Segoe
       UI - fora do DS; .drop-zone sem identidade DS; .painel-flutuante
       com radius 10px e sombra rgba(.20) abaixo do padrao DS;
       .abc-badge usa #0dcaf0 (cyan Bootstrap) - fora do palette
       navy/sky; .veredicto-bar background #151719 sem acento de borda.
   Solucao: CSS-only em style.css.
   Memorial: .mem-item-card e .mem-input-num + #memorial-lista.
   Auditoria: seletores prefixados com #aba-auditoria (spec 1,1,0)
   para superar estilos injetados por SIAO.injectStyles() (spec
   0,1,0) que chegam depois no cascade. IDs funcionais, handlers,
   calculo, auditoria e billing intocados.
   ================================================================ */

/* -- MEMORIAL ---------------------------------------------------- */

.mem-item-card {
  border:        1px solid var(--ds-border);
  border-left:   4px solid var(--ds-sky);
  padding:       14px 16px;
  margin-bottom: 12px;
  border-radius: var(--ds-radius-md);
  background:    #ffffff;
  box-shadow:    var(--ds-shadow-md);
  transition:    box-shadow 0.16s ease, transform 0.16s ease;
}

.mem-item-card:hover {
  box-shadow:   var(--ds-shadow-lg);
  transform:    translateY(-2px);
  border-color: var(--ds-border-med);
}

.mem-input-num {
  width:         66px;
  text-align:    right;
  padding:       5px 6px;
  border:        1px solid var(--ds-border-med);
  border-radius: var(--ds-radius-sm);
  font-size:     12px;
  font-weight:   700;
  color:         var(--ds-navy);
  background:    #ffffff;
}

.mem-input-num:focus {
  outline:      none;
  border-color: var(--ds-sky);
  box-shadow:   0 0 0 2px rgba(14, 165, 233, 0.18);
}

#memorial-lista {
  padding-bottom: 24px;
}

/* -- AUDITORIA / SIAO ------------------------------------------- */

#aba-auditoria .siao-wrapper {
  background:  var(--ds-bg-muted);
  padding:     16px;
  font-family: var(--ds-font-family);
}

#aba-auditoria .drop-zone {
  border:        2px dashed var(--ds-border-med);
  background:    var(--ds-bg-muted);
  border-radius: var(--ds-radius-md);
  transition:    border-color 0.18s ease, background 0.18s ease;
}

#aba-auditoria .drop-zone:hover {
  border-color: var(--ds-sky);
  background:   var(--ds-sky-light);
}

#aba-auditoria .drop-zone.loaded {
  border-color: #22c55e;
  background:   #f0fdf4;
  border-style: solid;
}

#aba-auditoria .painel-flutuante {
  border-radius: 14px;
  box-shadow:    0 16px 40px rgba(15, 23, 42, 0.34),
                 0 4px 12px rgba(15, 23, 42, 0.14);
  border:        1px solid #2d3a52;
}

#aba-auditoria .painel-block {
  padding: 12px 10px;
}

#aba-auditoria .painel-block.highlight {
  background: #2c3340;
}

#aba-auditoria .painel-block.center-audit {
  border-bottom-color: var(--ds-sky);
}

#aba-auditoria .audit-bar-fill {
  background: var(--ds-sky);
}

#aba-auditoria .abc-badge {
  background:    var(--ds-sky);
  border-radius: var(--ds-radius-sm);
  color:         #ffffff;
}

#aba-auditoria .abc-badge.pending {
  background: #f59e0b;
  color:      #000000;
}

#aba-auditoria .veredicto-bar {
  background: #141820;
  border-top: 1px solid #2d3a52;
}

#aba-auditoria .btn-detalhar {
  color:          rgba(148, 163, 184, 0.85);
  letter-spacing: 0.2px;
}

#aba-auditoria .btn-detalhar:hover {
  color: var(--ds-sky-light);
}

#aba-auditoria .encargo-row {
  border-bottom: 1px solid #3a4762;
}

#aba-auditoria .lbl-dark {
  color:       rgba(148, 163, 184, 0.72);
  font-size:   0.67rem;
  font-weight: 600;
}

#aba-auditoria .row-detail {
  border-left: 5px solid var(--ds-sky);
}

#aba-auditoria .inp-dark:focus {
  color:   var(--ds-sky-light);
  outline: none;
}

/* ================================================================
   P-UX-DESIGN-SYSTEM-APPLY-ABAS-NAV-01
   Moderniza navegação por abas (#abas-nav, .aba-btn) com tokens DS.
   Diagnostico: .aba-btn usava cores raw (#e5e7eb/#374151) e o token
   legado var(--azul); sem font-family DS, sem hover, sem focus ring.
   JS (ui.js/app.js) so alterna classList 'ativo'; workspace.js e
   auth_ui.js so setam opacity/pointerEvents inline - nenhuma cor,
   fonte, borda ou sombra é definida inline, portanto seguro
   sobrepor via CSS. IDs, onclick e forma pill (radius 999px)
   preservados.
   ================================================================ */
.aba-btn {
  font-family: var(--ds-font-family);
  background:  var(--ds-bg-muted);
  color:       var(--ds-text-secondary);
  transition:  background-color .15s ease, color .15s ease,
               transform .15s ease, box-shadow .15s ease;
}

.aba-btn:hover {
  background: var(--ds-border);
  transform:  translateY(-1px);
}

.aba-btn:focus-visible {
  outline:        2px solid var(--ds-sky);
  outline-offset: 2px;
}

.aba-btn.ativo {
  background:  var(--ds-navy);
  color:       var(--ds-text-inverse);
  box-shadow:  var(--ds-shadow-sm);
}

.aba-btn.ativo:hover {
  background: var(--ds-navy-dark);
  transform:  none;
}

/* ================================================================
   P-UX-DESIGN-SYSTEM-FUNDACAO-VISUAL-RESPONSIVA-01 — mobile
   #abas-nav é flex sem wrap e sem overflow-x controlado: com várias
   abas, a linha não cabe em telas pequenas e empurra a página para
   fora do viewport. Correção defensiva, só abaixo de 768px — desktop
   intocado. Nenhum ID, classe nova ou JS envolvido.
   ================================================================ */
@media (max-width: 768px) {
  #abas-nav {
    flex-wrap: wrap;
  }

  .footer-actions {
    flex-wrap: wrap;
  }

  /* #orcamento-area virou card com padding:16px nesta mesma sessão —
     em telas pequenas reduz para aproveitar melhor a largura útil. */
  #orcamento-area {
    padding: var(--ds-space-3);
  }

  /* Barra "Itens do Orçamento" + seletor de grupo: div interna tem
     display:flex inline (sem flex-wrap definido) — livre para quebrar
     linha no mobile sem conflito com o inline existente. */
  #orcamento-area > div:first-child {
    flex-wrap: wrap;
    gap: var(--ds-space-2);
  }

  /* #container-botoes-orcamento força flex-wrap:nowrap inline (JS/HTML,
     fora do escopo desta tarefa) — nowrap é a causa direta de estouro
     horizontal no celular quando os 4 botões injetados (Importar,
     Desfazer, Novo Grupo, Comp. Própria) mais o <select> de grupo não
     cabem na largura da tela. !important só aqui, só em mobile, e só
     nesta propriedade — desktop mantém o nowrap original do JS. */
  #container-botoes-orcamento {
    flex-wrap: wrap !important;
  }
}

/* ================================================================
   P-RESPONSIVIDADE-MOBILE-REAL-02 — Orçamento: #resumo-fixo-topo
   Card de resumo financeiro (CUSTO DIRETO / ADM / MOB / TOTAL GERAL)
   e os botões Excel/PDF são montados 100% via innerHTML em
   src/ui.js::renderOrcamento (const resumoHTML) — nunca tinham sido
   mapeados em ticket de responsividade anterior. Estrutura (sem
   classes, só estilo inline, por isso os seletores abaixo usam
   combinador de filho direto '>' e :first-child/:last-child, que
   não dependem de nenhum ID/classe novo nem tocam o JS):

     #resumo-fixo-topo
       > div                              (linha topo, já tem
                                            flex-wrap:wrap inline)
         > div:first-child                ("Visão Geral do Projeto",
                                            inline min-width:250px +
                                            max-width:45% — os dois
                                            juntos forçam 250px fixos
                                            mesmo em tela de 390px)
         > div:last-child                 (bloco direita: stats +
                                            botões, inline
                                            flex-wrap:wrap)
             > div:first-child            (CUSTO DIRETO/ADM/MOB/
                                            TOTAL GERAL — inline
                                            "display:flex; gap:20px"
                                            SEM flex-wrap: os 4 itens
                                            somados passam de 480px,
                                            e como não quebram linha,
                                            o TOTAL GERAL, que é o
                                            último, fica cortado pelo
                                            overflow-x:hidden global
                                            do body/html)
             > div:last-child             (botões Excel/PDF)

   Correção: abaixo de 768px, empilha os 3 blocos em coluna única,
   deixa a caixa de stats quebrar linha (2 itens por linha em vez de
   4 forçados numa só) e os botões ocupam a largura toda, lado a
   lado com wrap. !important só nas propriedades que têm equivalente
   inline definido pelo próprio template de ui.js. Nenhum onclick,
   função de export (gerarXLS/gerarPDFOrcamento) ou texto/valor foi
   alterado — só o arranjo visual dos mesmos elementos.
   ================================================================ */
@media (max-width: 768px) {
  #resumo-fixo-topo > div {
    flex-direction: column;
    align-items: stretch !important;
  }
  #resumo-fixo-topo > div > div:first-child {
    max-width: 100% !important;
    min-width: 0 !important;
  }
  #resumo-fixo-topo > div > div:last-child {
    width: 100%;
    justify-content: flex-start !important;
  }
  #resumo-fixo-topo > div > div:last-child > div:first-child {
    flex-wrap: wrap !important;
    width: 100%;
    row-gap: 10px !important;
  }
  #resumo-fixo-topo > div > div:last-child > div:first-child > div {
    flex: 1 1 45%;
    min-width: 0;
  }
  #resumo-fixo-topo > div > div:last-child > div:last-child {
    width: 100%;
    flex-wrap: wrap !important;
  }
  #resumo-fixo-topo > div > div:last-child > div:last-child button {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* ================================================================
   P-UX-DESIGN-SYSTEM-ORCAMENTO-LISTAGEM-CSS-01
   Migra a listagem de itens do Orçamento (#orcamento-cards-view,
   gerada em src/ui.js::renderOrcamento) de style.cssText/style=""
   inline para classes CSS. Mesma estrutura de DOM, mesmos IDs,
   mesmos onclick/onchange, mesmos dados — só a forma de aplicar
   aparência mudou (de inline para className). Os dois handlers
   row.onmouseover/onmouseout foram removidos e substituídos por
   :hover equivalente (autorizado explicitamente para este caso).
   Escopo: só a listagem em si. #resumo-fixo-topo (banner azul de
   totais) e os 4 botões de toolbar injetados não fazem parte desta
   migração — ficam como pendência registrada.
   ================================================================ */

/* Container: antes recebia margin-top/width 1x via JS, só na criação
   do elemento (nunca reaplicado nos re-renders seguintes). */
#orcamento-cards-view {
  margin-top: 10px;
  width: 100%;
}

/* Grid compartilhado por cabeçalho e linhas — mesmo valor que estava
   na constante `gridTemplate` do JS, agora só existe aqui. */
.orc-item-header,
.orc-item-row {
  display: grid;
  grid-template-columns: 0.4fr 0.8fr 3.5fr 0.4fr 0.6fr 0.8fr 0.8fr 0.9fr 1.2fr;
  gap: var(--ds-space-2);
  align-items: center;
}

/* Cabeçalho azul da listagem (era headerDiv.style.cssText). */
.orc-item-header {
  background:     var(--ds-navy);
  color:          var(--ds-text-inverse);
  padding:        12px 10px;
  border-radius:  var(--ds-radius-md) var(--ds-radius-md) 0 0;
  font-family:    var(--ds-font-family);
  font-weight:    700;
  font-size:      var(--ds-font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Linha de item (era row.style.cssText). Hover abaixo substitui
   row.onmouseover/onmouseout. Zebra leve via .orc-item-row--alt,
   aplicada no JS por índice (idx % 2), reiniciando a cada grupo. */
.orc-item-row {
  padding:       10px;
  border-bottom: 1px solid var(--ds-border);
  background:    var(--ds-surface);
  font-family:   var(--ds-font-family);
  font-size:     var(--ds-font-size-xs);
  color:         var(--ds-text-secondary);
  transition:    background .15s ease;
}

.orc-item-row--alt {
  background: var(--ds-bg-muted);
}

.orc-item-row:hover,
.orc-item-row--alt:hover {
  background: var(--ds-sky-light);
}

/* Colunas/valores da linha (eram style="..." por célula). */
.orc-cell-num    { font-weight: 600; }
.orc-cell-codigo { font-size: var(--ds-font-size-xs); color: var(--ds-text-muted); }
.orc-cell-desc   { font-weight: 500; }
.orc-cell-center { text-align: center; }
.orc-cell-right  { text-align: right; }
.orc-cell-total  { text-align: right; font-weight: 700; color: var(--ds-navy); }

/* Badge de quantidade clicável (abre o Memorial do item) — era
   style inline com cursor/cor/fundo/padding/radius. */
.orc-cell-qtd {
  text-align:    right;
  font-weight:   700;
  cursor:        pointer;
  color:         #0284c7;
  background:    var(--ds-sky-light);
  padding:       2px 5px;
  border-radius: var(--ds-radius-sm);
}

.orc-cell-acoes {
  text-align:      center;
  display:         flex;
  justify-content: center;
  gap:             2px;
}

/* Grupo (era divGrupo.style.cssText + 2 spans + wrapper de ações). */
.orc-grupo-row {
  background:      var(--ds-bg-muted);
  padding:         8px 15px;
  border-left:     4px solid var(--ds-navy);
  margin-top:      2px;
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  border-bottom:   1px solid var(--ds-border);
}

.orc-grupo-titulo {
  font-weight: 700;
  color:       var(--ds-navy);
  font-size:   13px;
  display:     flex;
  align-items: center;
  gap:         12px;
}

.orc-grupo-total-badge {
  background:    var(--ds-sky-light);
  color:         #0369a1;
  padding:       3px 8px;
  border-radius: 6px;
  font-size:     12px;
  font-weight:   800;
  border:        1px solid #bae6fd;
  box-shadow:    var(--ds-shadow-sm);
}

.orc-grupo-acoes {
  display: flex;
  gap:     5px;
}

/* Modificadores de cor pontuais dos botões de ação por item (eram
   style="color:..." isolados em 2 dos 6 botões da linha). */
.orc-btn-promover { color: var(--ds-navy); font-weight: bold; }
.orc-btn-editar    { color: #d97706; }

/* Mobile: #orcamento-cards-view vive dentro de .orcamento-tabela-container,
   que já tem overflow-x/overflow-y:auto e altura contida — qualquer
   conteúdo mais largo que a tela rola dentro dessa caixa, nunca empurra
   a página. Aqui só reduzimos densidade (padding/fonte/gap); nenhuma
   coluna é ocultada ou removida do grid em nenhuma largura de tela. */
@media (max-width: 768px) {
  .orc-item-header,
  .orc-item-row {
    font-size: 11px;
    padding:   8px 6px;
    gap:       var(--ds-space-1);
  }
}

/* ================================================================
   P-UX-DESIGN-SYSTEM-MEMORIAL-MOBILE-01 (corrigido em
   P-RESPONSIVIDADE-MOBILE-REAL-02)
   #aba-memorial: grid do topo (.mem-topo-grid, index.html) tem
   "grid-template-columns: minmax(300px, 0.38fr) minmax(0, 1fr)" —
   a coluna esquerda nunca fica menor que 300px, o que estoura
   qualquer celular (viewport típico 320-414px). Abaixo de 768px
   as duas colunas empilham (1 por linha) em vez de forçar 300px
   lado a lado. Não altera IDs, onclick/onchange nem conteúdo
   dinâmico injetado por JS (mem-tabela-container, memorial-lista
   etc.) — só o grid estático do cabeçalho.

   BUG (achado em teste real de celular): a regra abaixo nunca teve
   efeito nenhum, em nenhum dispositivo, desde que foi criada. O
   grid-template-columns também está definido INLINE no HTML
   (index.html, .mem-topo-grid), e estilo inline sempre vence regra
   de stylesheet externo com a mesma especificidade — só perde para
   !important. Sem !important aqui, esta regra media query nunca
   sobrescrevia o inline, então o grid NUNCA colapsava para 1 coluna
   no celular; a coluna direita (busca/item em edição) ficava
   espremida contra o piso de 300px da coluna esquerda, o que também
   explica texto "quebrado letra por letra" (container com poucos
   pixels de largura útil). Corrigido adicionando !important.
   ================================================================ */
@media (max-width: 768px) {
  .mem-topo-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ================================================================
   P-RESPONSIVIDADE-GERAL-01 — Memorial: #busca-area (index.html)
   #campo-busca tem "flex:1; min-width:220px" (regra acima, linha
   ~455) aplicado ao <input> aninhado dentro de #busca-area (linha
   573 do index.html). Esse min-width não pode ser comprimido pelo
   flex-shrink e "vaza" para cima: soma-se ao rótulo "Busca / Troca"
   (nowrap) e ultrapassa ~400px de largura mínima, estourando
   qualquer celular (viewport 390-430px). Correção: abaixo de 600px
   (cobre os tamanhos de celular alvo, sem tocar tablet/desktop),
   #busca-area empilha os dois blocos (Base / Busca) em vez de
   colocá-los lado a lado, e o min-width de #campo-busca é reduzido.
   !important só nas duas propriedades que têm equivalente inline no
   HTML (flex-direction/height de #busca-area) — mesmo padrão já
   usado em #container-botoes-orcamento acima. Nenhum ID, onclick/
   onchange ou conteúdo injetado por JS foi alterado.
   ================================================================ */
@media (max-width: 600px) {
  #busca-area {
    flex-direction: column !important;
    height: auto !important;
  }
  #busca-area > div {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100%;
  }
  #busca-area > div:first-child {
    border-right: none !important;
    border-bottom: 1px solid #cbd5e1;
  }
  #campo-busca {
    min-width: 0;
  }
  #base-em-uso {
    max-width: 100% !important;
  }
}

/* ================================================================
   P-INST-UX-CONTEXTO-VISUAL-01 — faixa de contexto
   Puramente informativa: reflete tipo_usuario/projeto_ativo já
   resolvidos em auth_ui.js (resolverContextoVisual). Não decide
   permissão, não altera comportamento de aba/feature — apenas cor
   e texto. Escondida por padrão ([hidden]); auth_ui.js alterna.
   ================================================================ */
:root {
  --ds-institucional: #6d28d9;
  --ds-institucional-light: #ede9fe;
}

.siao-context-banner {
  display:         flex;
  flex-wrap:       wrap;
  align-items:     center;
  gap:             var(--ds-space-2, 8px);
  padding:         6px 16px;
  font-family:     var(--ds-font-family);
  font-size:       12.5px;
  border-bottom:   1px solid var(--ds-border);
  background:      var(--ds-bg-muted);
  color:           var(--ds-text-secondary);
}

.siao-context-banner[hidden] { display: none; }

.siao-context-banner__bloco {
  display:     flex;
  align-items: baseline;
  gap:         6px;
  flex-wrap:   wrap;
}

.siao-context-banner__titulo {
  font-weight:    800;
  letter-spacing: .02em;
}

.siao-context-banner__sub {
  color:     var(--ds-text-muted);
  font-size: 12px;
}

.siao-context-banner__bloco--projeto {
  padding-left:  12px;
  border-left:   1px solid var(--ds-border-med);
}

.siao-context-banner__chip {
  font-weight:     700;
  padding:         2px 8px;
  border-radius:   999px;
  background:      var(--ds-bg-elevated);
  border:          1px solid var(--ds-border-med);
  font-size:       11px;
}

/* Conta: admin */
body.siao-context-admin .siao-context-banner {
  background: #0f172a;
  color:      var(--ds-text-inverse);
  border-bottom-color: #0f172a;
}
body.siao-context-admin .siao-context-banner__sub { color: #94a3b8; }
body.siao-context-admin .siao-context-banner__chip {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.25);
  color: var(--ds-text-inverse);
}

/* Conta: pessoal (default acima já serve; título usa cor navy) */
body.siao-context-pessoal .siao-context-banner__titulo { color: var(--ds-navy); }

/* Conta: institucional puro */
body.siao-context-institucional .siao-context-banner {
  background: var(--ds-institucional-light);
  border-bottom-color: var(--ds-institucional);
}
body.siao-context-institucional .siao-context-banner__titulo { color: var(--ds-institucional); }

/* Conta: misto (pessoal + vínculo institucional) — mantém tom pessoal,
   mas com um acento institucional na borda para sinalizar o vínculo. */
body.siao-context-misto .siao-context-banner {
  border-bottom: 2px solid var(--ds-institucional);
}
body.siao-context-misto .siao-context-banner__titulo { color: var(--ds-navy); }

/* Projeto ativo: institucional ganha o mesmo acento roxo no chip */
body.siao-projeto-institucional .siao-context-banner__chip {
  background:   var(--ds-institucional-light);
  border-color: var(--ds-institucional);
  color:        var(--ds-institucional);
}
body.siao-projeto-pessoal .siao-context-banner__chip {
  background:   var(--ds-sky-light);
  border-color: var(--ds-sky);
  color:        #0369a1;
}

@media (max-width: 768px) {
  .siao-context-banner {
    font-size: 11.5px;
    padding:   6px 10px;
    gap:       4px 10px;
  }
  .siao-context-banner__bloco--projeto {
    padding-left: 0;
    border-left:  none;
    width:        100%;
    border-top:   1px dashed var(--ds-border-med);
    padding-top:  4px;
  }
}

/* ================================================================
   P-INST-ORCAMENTO-READONLY-UX-01 — banner de somente leitura
   Só aparece quando PersistenciaAutosave.somenteLeitura.ativo é
   definido a partir de um 403 já confirmado pelo backend. Puramente
   informativo — não decide nem altera permissão.
   ================================================================ */
.siao-orcamento-readonly-banner {
  display:       flex;
  align-items:   center;
  gap:           var(--ds-space-2);
  padding:       10px 16px;
  margin-bottom: 12px;
  border-radius: 8px;
  background:    #fff7ed;
  border:        1px solid var(--ds-warning);
  color:         #9a3412;
  font-family:   var(--ds-font-family);
  font-size:     13.5px;
  font-weight:   700;
}

.siao-orcamento-readonly-banner[hidden] { display: none; }

.siao-orcamento-readonly-banner i {
  color: var(--ds-warning);
}