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

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at top left, #e5e7eb 0, #f9fafb 40%, #e5e7eb 100%);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: stretch;
  color: #111827;
}

#app {
  width: 100%;
  max-width: 1280px; /* Levemente aumentado para caber melhor os botões */
  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: 700; color: var(--azul); }
#sub { font-size: 13px; color: var(--cinza-escuro); }

#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: 6px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  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: 8px;
  background: #f9fafb;
  border: 1px solid #d1d5db;
  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: 6px;
  border: 1px solid #d1d5db;
  font-size: 12px;
  width: 100%;
  min-width: 0;
  max-width: none;
  box-sizing: border-box;
}

#dados-obra input:focus {
  outline: 2px solid var(--azul-claro);
  border-color: var(--azul);
}

/* 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; }
}
#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;
}