/* ========================================= */
/* ESTILO GERAL - INSPIRAÇÃO MODERNA/WEB (Corrigido: Sem NBSP) */
/* ========================================= */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
  /* Paleta de Cores e Estilos Modernos */
  --color-background: #f4f7f6; /* Fundo suave, ligeiramente fora do branco */
  --color-surface: #ffffff; /* Branco puro para cartões/superfícies */
  --color-border: #e0e0e0; /* Borda muito suave */
  --color-shadow: rgba(0, 0, 0, 0.08); /* Sombra de elevação suave */
  --color-primary: #007bff; /* Azul vibrante (Bootstrap-like) */
  --color-primary-dark: #0056b3;
  --color-text: #212529; /* Texto escuro */
  --color-text-secondary: #6c757d; /* Texto secundário */
  --color-success: #28a745;
  --color-error: #dc3545;
  --font-family: "Inter";
  --border-radius: 6px;
  --spacing: 15px; /* Espaçamento padrão */
}

body {
  font-family: var(--font-family);
  margin: 0;
  padding: 0;
  background-color: var(--color-background);
  color: var(--color-text);
  font-size: 15px; /* Leve aumento para melhor legibilidade */
  line-height: 1.5;
}

/* ========================================= */
/* LAYOUT E CABEÇALHO */
/* ========================================= */

.header-app {
  background-color: var(--color-surface); /* Cabeçalho claro */
  color: var(--color-text);
  padding: var(--spacing) calc(2 * var(--spacing));
  /* Borda removida, substituída por sombra */
  box-shadow: 0 2px 4px var(--color-shadow);
  position: sticky; /* Opcional: Para cabeçalho fixo */
  top: 0;
  z-index: 50;
}
.header-app h1 {
  font-size: 1.6em;
  margin: 0;
  font-weight: 500;
}

footer {
  margin-left: 220px;
}

.container {
  display: flex;
  min-height: 100vh;
  padding-left: 220px; /* reserva espaço para o sidebar fixo */
}

/* ========================================= */
/* SIDEBAR (MENU) - Estilo Elevado/Clean */
/* ========================================= */

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 220px;
  height: 100vh;
  z-index: 200;
  background-color: var(--color-surface);
  padding: var(--spacing);
  border-right: 1px solid var(--color-border);
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05);
  overflow-y: auto;
}

.sidebar h2 {
  font-size: 1.1em;
  color: var(--color-text-secondary); /* Título do grupo mais discreto */
  padding: 5px 0;
  margin-top: 0;
  margin-bottom: 15px;
  border-bottom: 1px solid var(--color-border); /* Separador limpo */
}

.sidebar nav ul {
  list-style: none;
  padding: 0;
}

/* Garantir que cada item de menu ocupe uma linha e seja visível */
.sidebar nav ul li {
  display: block;
}
.sidebar nav ul li a {
  white-space: nowrap;
}

.sidebar nav ul li a {
  display: flex; /* Para melhor alinhamento */
  align-items: center;
  padding: 8px 10px; /* Mais espaço */
  text-decoration: none;
  color: var(--color-text);
  margin-bottom: 5px;
  border-radius: var(--border-radius);
  transition:
    background-color 0.2s,
    color 0.2s;
}

.sidebar nav ul li a:hover {
  background-color: #f0f0f0; /* Hover suave */
}

.sidebar nav ul li a.active {
  background-color: var(--color-primary);
  color: white;
  font-weight: 500;
  box-shadow: 0 2px 5px rgba(0, 123, 255, 0.3); /* Sombra para o item ativo */
}

/* MENU FINANCEIRO — visual igual aos demais itens, com pequeno indicador de submenu */
.sidebar .menu-group {
  margin: 8px 0;
}

/* botão do grupo (parecido com os links do menu) */
.sidebar .menu-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: none;
  color: var(--color-text);
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--border-radius);
  transition:
    background-color 0.18s,
    box-shadow 0.18s,
    color 0.18s;
  text-align: left;
}

/* hover igual aos links */
.sidebar .menu-toggle:hover {
  background-color: #f0f0f0;
}

/* quando expandido parecer ativo (como os links ativos) */
.sidebar .menu-toggle[aria-expanded="true"] {
  background-color: var(--color-primary);
  color: #fff;
  box-shadow: 0 2px 5px rgba(0, 123, 255, 0.18);
}

/* pequeno indicativo de submenu (seta) — discreto, à direita */
.sidebar .menu-toggle .chev {
  font-size: 12px;
  opacity: 0.75;
  margin-left: 8px;
  line-height: 1;
}

/* submenu: links com mesma aparência dos itens, porém recuados */
.sidebar .submenu {
  list-style: none;
  padding: 6px 0 6px 10px;
  margin: 6px 0 0 0;
}

.sidebar .submenu .submenu-link {
  display: block;
  padding: 6px 8px;
  text-decoration: none;
  color: var(--color-text);
  border-radius: calc(var(--border-radius) - 2px);
  font-weight: 500;
}

/* hover e ativo do submenu seguem o padrão dos links principais */
.sidebar .submenu .submenu-link:hover {
  background-color: #f0f0f0;
}

.sidebar .submenu .submenu-link.active {
  background-color: var(--color-primary);
  color: #fff;
  box-shadow: 0 2px 5px rgba(0, 123, 255, 0.18);
}

/* garantir consistência visual com os demais itens do menu */
.sidebar .menu-toggle,
.sidebar .submenu .submenu-link {
  box-shadow: none;
}

/* Área de usuário logado + botão de sair */
.menu-user-area {
  margin-top: 20px;
  padding: 12px 10px 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.menu-user-name {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-bottom: 8px;
  word-break: break-all;
  font-weight: 500;
}

.menu-logout-btn {
  width: 100%;
  padding: 7px 10px;
  background: #fff0f0;
  color: #dc3545;
  border: 1px solid #f5c6cb;
  border-radius: 5px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: background 0.2s, color 0.2s;
}

.menu-logout-btn:hover {
  background: #dc3545;
  color: #fff;
}

/* ========================================= */
/* ÁREA DE CONTEÚDO */
/* ========================================= */

#content-area {
  flex-grow: 1;
  min-width: 0; /* evita overflow em flex */
  padding: calc(2 * var(--spacing));
  background-color: var(--color-background);
}

.title-area {
  font-size: 1.8em;
  font-weight: 600;
  color: var(--color-text);
  border-bottom: none; /* Remoção da borda */
  margin-top: 0;
  margin-bottom: 20px;
}

/* --- FIELDSETS E AGRUPAMENTOS (Cartões) --- */
.form-fieldset {
  border: none; /* Remoção da borda de fieldset */
  padding: var(--spacing);
  margin-bottom: 20px;
  background-color: var(--color-surface);
  border-radius: var(--border-radius); /* Borda arredondada */
  box-shadow: 0 4px 8px var(--color-shadow); /* Sombra de cartão (elevação) */
}

.form-legend {
  /* Estilo de título de cartão */
  padding: 0;
  font-size: 1.2em;
  font-weight: 600;
  color: var(--color-primary-dark);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 8px;
}

.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.lookup-input-group {
  display: flex;
  gap: 8px;
}
.lookup-name-input {
  flex-grow: 1;
  cursor: pointer;
}

/* ========================================= */
/* ESTILO DE COMPONENTES (INPUTS/SELECTS) - Clean Look */
/* ========================================= */

#content-area form label {
  display: block;
  margin-top: 15px;
  margin-bottom: 5px;
  font-weight: 500;
  color: var(--color-text);
}

#content-area form input[type="text"],
#content-area form input[type="email"],
#content-area form input[type="number"],
#content-area form input[type="date"],
#content-area form select,
#content-area form textarea {
  width: 100%;
  padding: 8px 12px; /* Aumento do padding */
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius); /* Bordas arredondadas */
  box-sizing: border-box;
  background-color: var(--color-surface);
  font-size: 15px;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
  /* Removido o efeito 3D (sombra interna) */
}

/* Foco */
#content-area form input:focus,
#content-area form select:focus,
#content-area form textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25); /* Foco moderno (outline-like) */
}

/* Checkbox (Manteve-se simples) */
#content-area form input[type="checkbox"] {
  width: auto;
}

/* ========================================= */
/* BOTÕES (Modern Buttons) */
/* ========================================= */

.btn,
.btn-primary,
.btn-secondary,
.btn-delete {
  padding: 8px 16px; /* Padding aprimorado */
  border: none; /* Remoção de borda manual */
  border-radius: var(--border-radius);
  cursor: pointer;
  font-family: var(--font-family);
  font-weight: 600; /* Um pouco mais de peso */
  font-size: 14px;

  /* Estilo moderno: Fundo sólido com sombra de elevação */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition:
    background-color 0.2s,
    box-shadow 0.2s,
    transform 0.1s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  vertical-align: middle;
  min-height: 36px;
  padding-left: 12px;
  padding-right: 12px;
}

.btn:hover,
button:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-delete:hover {
  background-color: #e9ecef; /* Hover padrão suave */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Sombra mais elevada no hover */
}

.btn:active,
button:active,
.btn-primary:active,
.btn-secondary:active,
.btn-delete:active {
  /* Efeito de click: Levemente pressionado */
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Botão Padrão */
.btn {
  background-color: #f8f9fa;
  color: var(--color-text);
  border: 1px solid #ced4da;
}

/* Botão Primário */
.btn-primary,
button[type="submit"] {
  background-color: var(--color-primary);
  color: white;
  box-shadow: 0 4px 6px rgba(0, 123, 255, 0.3);
}

.btn-primary:hover,
button[type="submit"]:hover {
  background-color: var(--color-primary-dark);
  box-shadow: 0 6px 10px rgba(0, 123, 255, 0.4);
}

/* Botão Secundário */
.btn-secondary {
  background-color: #6c757d;
  color: white;
}
.btn-secondary:hover {
  background-color: #5a6268;
}

/* Botão de Excluir */
.btn-delete {
  background-color: var(--color-error);
  color: white;
}

.btn-delete:hover {
  background-color: #bd2130;
}

/* Botão de ação em tabela (menor) */
.btn-table-action {
  margin-top: 0;
  font-size: 13px;
  font-weight: 600;
  border-radius: 6px;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
}
.btn-table-action:hover {
  box-shadow: none;
}

/* ======= PADRÃO UNIFICADO PARA BOTÕES EM TABELAS ======= */
/* Garante que todos os botões dentro de .data-table tenham aparência/medidas idênticas */
.data-table .btn,
.data-table button,
.data-table .btn-table-action {
  padding: 8px 12px; /* topo/baixo 8px, esquerda/direita 12px */
  min-width: 86px; /* largura mínima consistente */
  font-size: 13px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: none;
  height: 36px; /* padroniza altura visual */
}

/* pequenas variações específicas (se ainda houverem classes) devem herdar o padrão */
.data-table .btn-edit,
.data-table .btn-delete,
.data-table .btn-details {
  padding: inherit;
  min-width: inherit;
  height: inherit;
}

/* Variantes dentro da tabela - forçar cores e remover bordas inconsistentes */
.data-table .btn-secondary,
.data-table a.btn-secondary {
  background-color: #6c757d;
  color: #fff;
  border: none !important;
}
.data-table .btn-success,
.data-table a.btn-success {
  background-color: var(--color-success);
  color: #fff;
  border: none !important;
}
.data-table .btn-delete,
.data-table a.btn-delete {
  background-color: var(--color-error);
  color: #fff;
  border: none !important;
}

/* Anchors used as buttons should behave the same */
.data-table a.btn-table-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
}

/* Normalização global de caixas e botões */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Garantir que anchors usados como botões tenham comportamento idêntico aos elementos <button> */
a.btn,
a.btn-primary,
a.btn-secondary,
a.btn-delete,
a.btn-table-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: none;
  box-shadow: none;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  min-width: 86px;
  height: 36px;
  border-radius: 6px;
  box-sizing: border-box;
  vertical-align: middle;
}

/* Forçar medidas idênticas para botões de ação em qualquer tabela */
.data-table a.btn-table-action,
.data-table button.btn-table-action,
.data-table a.btn,
.data-table button {
  padding: 8px 12px !important;
  min-width: 86px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  border: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

/* Garantir uniformidade mesmo quando templates não adicionam classes */
.data-table td a,
.data-table td button {
  padding: 8px 12px !important;
  min-width: 86px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  border: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
}

/* Remover necessidade de regras por página específicas (usaremos seletores globais acima) */

/* Garantir largura uniforme para botões de ação Editar e Excluir */
.btn-edit,
.btn-delete {
  min-width: 86px; /* largura mínima consistente */
  padding: 8px 12px; /* topo/baixo 8px, esquerda/direita 12px */
  justify-content: center; /* centralizar texto/ícones */
}

/* Tornar .btn-secondary igual a .btn-delete (mesmo tamanho) */
.btn-secondary {
  min-width: 86px;
  padding: 8px 12px;
}

/* ======= UTILITÁRIOS GLOBAIS ======= */
/* Colunas com largura fixa usadas em tabelas e formulários */
.col-w-80 {
  width: 80px;
}
.col-w-90 {
  width: 90px;
}
.col-w-100 {
  width: 100px;
}
.col-w-110 {
  width: 110px;
}
.col-w-120 {
  width: 120px;
}
.col-w-130 {
  width: 130px;
}
.col-w-140 {
  width: 140px;
}

/* Inputs compactos usados nos filtros */
.input-compact {
  padding: 6px;
  box-sizing: border-box;
  min-width: 100px;
}

/* pequenas helpers para espaçamento e alinhamento em formulários */
.form-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.form-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.flex-1 {
  flex: 1 1 auto;
}
.h-right {
  display: flex;
  justify-content: flex-end;
}

/* ========================================= */
/* TABELAS (Clean Data Grid) */
/* ========================================= */

.data-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  overflow: hidden; /* Para garantir que o border-radius funcione */
}

.data-table th,
.data-table td {
  padding: 5px 12px; /* Espaçamento aumentado para maior leitura */
  border: none; /* Remoção de bordas internas rígidas */
  border-bottom: 1px solid #e9ecef; /* Apenas linha divisória inferior */
  text-align: left;
  font-size: 14px;
  line-height: 1.6; /* Mais espaço entre linhas */
}

.data-table thead th {
  background-color: #e9ecef; /* Fundo mais claro e limpo */
  color: var(--color-text);
  font-weight: 600;
  border-bottom: 2px solid var(--color-border);
}

.data-table tr:nth-child(even) {
  background-color: var(--color-surface); /* Linhas pares brancas */
}

.data-table tr:hover {
  background-color: #f7f7f7; /* Hover suave para destacar a linha */
}

/* Linha de total no orçamento */
.total-geral {
  margin-top: 20px;
  padding: var(--spacing);
  font-size: 1.3em;
  font-weight: 700;
  color: var(--color-primary-dark);
  background-color: #e6f0ff; /* Fundo azul claro para destaque */
  border: 1px solid #b3cde6;
  border-radius: var(--border-radius);
}

/* ========================================= */
/* MENSAGENS DE FEEDBACK */
/* ========================================= */
/* Cores mais claras e iconografia implícita */

.info-message,
.success-message,
.error-message {
  padding: 12px 15px;
  border: 1px solid;
  border-radius: var(--border-radius);
  margin-top: 15px;
  font-weight: 500;
}

.error-message {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}

.success-message {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
}

.info-message {
  color: #0c5460;
  background-color: #d1ecf1;
  border-color: #bee5eb;
}

/* ========================================= */
/* LOOKUP MODAL (SIMULAÇÃO DE JDIALOG) */
/* ========================================= */

.lookup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Fundo um pouco mais escuro */
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.lookup-modal {
  background: var(--color-surface);
  width: 90%;
  max-width: 650px; /* Levemente maior */
  max-height: 90vh;
  overflow-y: auto;
  padding: 20px;
  border: none;
  border-radius: var(--border-radius);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Sombra de elevação de janela (destaque) */
}

.lookup-modal-header {
  font-size: 1.2em;
  font-weight: 600;
  color: var(--color-primary);
  border-bottom: 2px solid var(--color-primary); /* Linha de destaque */
  padding-bottom: 10px;
  margin-bottom: 15px;
}

.lookup-search-input {
  margin-bottom: 15px;
}

/* --- ESTILOS PARA GRUPO DE FILTROS --- */
.filter-controls-group {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.filter-controls-group h3 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #333;
  border-bottom: 2px solid #eee;
  padding-bottom: 5px;
}

.filter-controls-group label {
  display: block;
  font-weight: 600;
  margin-top: 10px;
  margin-bottom: 5px;
}

/* Alinhar os botões de ação dos filtros com os campos (nome/categoria) */
.filter-actions {
  display: flex;
  gap: 8px;
  align-items: flex-end; /* alinha os botões com o campo de input/select */
  align-self: flex-end; /* posiciona o grupo de botões na base da linha do formulário */
}

.filter-action-item {
  display: flex;
  align-items: center;
}

/* Ajuste visual para botões dentro do grupo de filtros */
.filter-actions .btn,
.filter-actions a.btn,
.filter-actions .btn-primary,
.filter-actions .btn-secondary {
  height: 36px;
  padding: 6px 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Garante que os inputs dentro do grid tenham largura total */
.filter-controls-group .form-grid-2 input[type="text"],
.filter-controls-group .form-grid-2 input[type="date"],
.filter-controls-group .form-grid-2 select {
  width: 100%;
}

/* --- ESTILOS PARA OS BOTÕES DE FILTRO DE TIPO (Toggle) --- */

.tipo-filter-buttons {
  display: flex; /* Alinha os botões horizontalmente */
  gap: 5px;
  margin-top: 5px;
  margin-bottom: 10px;
}

.btn-toggle {
  flex-grow: 1; /* Permite que os botões se expandam igualmente */
  padding: 10px 15px;
  border: 1px solid #ccc;
  background-color: #fff;
  color: #555;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s;
  font-weight: bold;
}

.btn-toggle:hover {
  background-color: #eee;
}

/* Estilo para o botão ATIVO (selecionado) */
.btn-toggle.active {
  border-color: #007bff; /* Borda azul para o ativo */
  background-color: #007bff;
  color: #fff;
}

/* Estilos específicos para Pagar/Receber */
.btn-toggle.pagar.active {
  background-color: #dc3545; /* Vermelho para Pagar */
  border-color: #dc3545;
}

.btn-toggle.receber.active {
  background-color: #28a745; /* Verde para Receber */
  border-color: #28a745;
}

/* Estilo para o botão padrão (TODAS) quando ativo */
.btn-toggle:not(.pagar):not(.receber).active {
  background-color: #6c757d; /* Cinza para Todos */
  border-color: #6c757d;
}

/* Estilos específicos para o select de Situação e input de Vencimento */
.filter-controls-group select#filtro-situacao,
.filter-controls-group input#filtro-vencimento {
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(16, 24, 40, 0.08);
  background: linear-gradient(180deg, #ffffff, #fbfdff);
  box-shadow:
    inset 0 1px 2px rgba(16, 24, 40, 0.03),
    0 2px 6px rgba(16, 24, 40, 0.04);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.06s ease;
  font-size: 14px;
  color: var(--color-text);
}

/* foco mais visível e acessível */
.filter-controls-group select#filtro-situacao:focus,
.filter-controls-group input#filtro-vencimento:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 6px 18px rgba(0, 123, 255, 0.1);
  transform: translateY(-1px);
}

/* seta customizada para o select de situação */
.filter-controls-group select#filtro-situacao {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10' fill='none'><path d='M1 1l6 6 6-6' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
}

/* ícone de calendário para o input de data */
.filter-controls-group input#filtro-vencimento {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none'><rect x='3' y='5' width='18' height='16' rx='2' stroke='%236c757d' stroke-width='1.5'/><path d='M16 3v4M8 3v4' stroke='%236c757d' stroke-width='1.5' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
  cursor: pointer;
}

/* garante contraste suave do placeholder */
.filter-controls-group input::placeholder {
  color: rgba(33, 37, 41, 0.45);
}

/* Corrige overflow do painel de filtros e garante que o input de data fique visível em telas pequenas */
.filter-controls-group .form-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  align-items: center;
}

/* Inputs e selects ocupam toda a coluna e respeitam box-sizing */
.filter-controls-group input[type="date"],
.filter-controls-group input[type="text"],
.filter-controls-group select {
  width: 100%;
  box-sizing: border-box;
}

/* Permite que os botões de tipo quebrem linha em telas pequenas */
.tipo-filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Ajuste dos toggles para não forçar overflow */
.tipo-filter-buttons .btn-toggle {
  min-width: 96px;
  flex: 1 1 auto;
}

/* Lookup (filtro de pessoa) responsivo: botão e input compartilham espaço e quebram quando necessário */
.lookup-input-group {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.lookup-input-group .lookup-name-input {
  flex: 1 1 160px;
  min-width: 0; /* importante para que o input encolha corretamente em grid/flex */
}

/* Pequeno ajuste para garantir ícone do date dentro do input sem criar overflow */
.filter-controls-group input#filtro-vencimento {
  padding-right: 40px; /* já tinha, mantem espaço para o ícone */
  max-width: 100%;
}

/* ======= FILTROS COMPACTOS (contas.html) ======= */
.filter-controls-compact {
  border-radius: 8px;
  padding: 8px 10px;
  background: linear-gradient(180deg, #ffffff, #fbfbff);
  border: 1px solid rgba(16, 24, 40, 0.04);
}

/* cabeçalho com título + ações */
.filter-controls-compact .filters-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.filter-controls-compact .filters-header h3 {
  margin: 0;
  font-size: 13px;
  color: var(--color-text);
}

.filter-controls-compact .filters-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* linha de filtros: grid compacto */
.filter-controls-compact .filters-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  align-items: center;
}

/* cada filtro ocupa menos espaço */
.filter-controls-compact .filter-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* labels pequenos */
.filter-controls-compact .filter-label {
  font-size: 12px;
  color: rgba(33, 37, 41, 0.8);
  font-weight: 600;
}

/* inputs e selects menores */
.filter-controls-compact input[type="date"],
.filter-controls-compact input[type="text"],
.filter-controls-compact select {
  padding: 6px 8px;
  font-size: 13px;
  border-radius: 8px;
  border: 1px solid rgba(16, 24, 40, 0.06);
  background: #fff;
  width: 100%;
  box-sizing: border-box;
}

/* lookup compacto (botão menor) */
.lookup-input-group.compact {
  display: flex;
  gap: 8px;
  align-items: center;
}

.lookup-input-group.compact .lookup-name-input {
  flex: 1 1 100px;
  min-width: 0;
}

/* Ações específicas dentro da linha de filtros (ex: botão Limpar) */
.filter-actions-compact {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

/* botões pequenos */
.btn-secondary.small,
.btn-primary.small,
.btn-toggle.small {
  padding: 6px 8px;
  font-size: 13px;
  border-radius: 8px;
}

/* compacta os toggles de tipo */
.tipo-filter-buttons.compact {
  display: flex;
  gap: 6px;
  align-items: center;
}
.tipo-filter-buttons.compact .btn-toggle {
  padding: 6px 8px;
  font-weight: 600;
}

/* quando o painel está recolhido escondemos a linha de filtros */
.filter-controls-compact.collapsed .filters-row {
  display: none;
}

/* responsivo: em telas muito pequenas, o painel inicia recolhido */
@media (max-width: 520px) {
  .filter-controls-compact {
    padding: 8px;
  }
  .filter-controls-compact .filters-row {
    display: none;
  }

  /* ========================================= */
  /* UTILITÁRIOS (margens, linhas, helpers) */
  /* ========================================= */
  .row {
    display: flex;
    gap: 8px;
    align-items: center;
  }
  .row-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
  }
  .mt-small {
    margin-top: 8px;
  }
  .mb-small {
    margin-bottom: 8px;
  }
  .mt-10 {
    margin-top: 10px;
  }
  .mt-12 {
    margin-top: 12px;
  }
  .mb-12 {
    margin-bottom: 12px;
  }
  .mt-md {
    margin-top: 16px;
  }
  .ml-small {
    margin-left: 8px;
  }
  .ml-medium {
    margin-left: 10px;
  }
  .text-right {
    text-align: right;
  }
  .font-bold {
    font-weight: 700;
  }
  .text-center {
    text-align: center;
  }
  .hidden {
    display: none !important;
  }

  /* botão com altura maior usado em filtros/pesquisas */
  .btn-tall {
    min-height: 38px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  /* título compacto usado em painéis de filtro */
  .filter-title {
    margin: 0;
    font-size: 14px;
  }

  /* linha de formulário/filtros compactos usada por várias telas */
  .form-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    flex-wrap: wrap;
  }

  /* utilitário para elementos que crescem */
  .flex-1 {
    flex: 1;
  }
  .justify-end {
    justify-content: flex-end;
  }
  .filter-controls-compact.collapsed .filters-row {
    display: none;
  }
  .filter-controls-compact.collapsed + .data-table {
    margin-top: 6px;
  }
}

/* Paginação compacta (substituir regras antigas) */
.pagination-controls {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 6px;
  justify-content: flex-start;
  font-size: 13px;
}

/* ========================================= */
/* ORÇAMENTOS - Barra de Pesquisa (Alinhamento)
   Regras específicas e pouco invasivas para a tela
   de orçamentos; forçam consistência sem alterar
   outros componentes globais.
*/
#orcamento-filter-form {
  display: flex;
  gap: 12px;
  align-items: flex-end; /* alinha botões ao fundo dos campos */
  flex-wrap: wrap;
}

#orcamento-filter-form > div {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  align-items: flex-start !important;
}

#orcamento-filter-form .lookup-input-group,
#orcamento-filter-form .lookup-input-group > * {
  align-items: center;
}

/* Campos de entrada na barra de pesquisa: padding e altura uniforme */
#orcamento-filter-form input[type="text"],
#orcamento-filter-form input[type="date"] {
  padding: 8px 12px !important;
  min-width: 120px !important;
  height: 36px !important;
  box-sizing: border-box !important;
  border-radius: 6px !important;
  border: 1px solid var(--color-border) !important;
  background: var(--color-surface) !important;
  font-size: 14px !important;
}

/* Lookup name input precisa parecer clicável mesmo sendo readonly */
#orcamento-filter-form .lookup-name-input[readonly] {
  cursor: pointer;
  background: #fff !important;
}

/* Botões de ação na barra de pesquisa devem seguir o padrão de botões */
#orcamento-filter-form .btn-primary,
#orcamento-filter-form .btn-secondary {
  min-width: 86px !important;
  height: 36px !important;
  padding: 6px 12px !important;
  box-shadow: none !important;
  align-self: flex-end !important;
}

/* Variante compacta do botão Buscar do lookup (menor) */
#orcamento-filter-form .btn-primary.small {
  min-width: 72px !important;
  height: 32px !important;
  padding: 6px 10px !important;
  font-size: 13px !important;
}

/* Garantir que .btn-tall usado na tela respeite a altura padrão */
#orcamento-filter-form .btn-tall {
  min-height: 36px !important;
  height: 36px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* Ajustes responsivos: empilhar campos em telas pequenas */
@media (max-width: 680px) {
  #orcamento-filter-form {
    align-items: flex-start;
  }
  #orcamento-filter-form input[type="text"],
  #orcamento-filter-form input[type="date"] {
    min-width: 140px !important;
    width: 100% !important;
  }
  #orcamento-filter-form .lookup-input-group {
    width: 100%;
    gap: 8px;
  }
}

/* Melhorias para modais de lookup/obra */
.lookup-overlay {
  z-index: 2000; /* garantir sobreposição */
  padding: 20px; /* dá espaço em dispositivos pequenos */
}

.lookup-modal {
  width: 100%;
  max-width: 760px; /* aumentar um pouco para formulários */
  margin: 0 12px; /* espaço lateral em telas pequenas */
  box-sizing: border-box;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lookup-modal .lookup-modal-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lookup-modal .lookup-modal-content input[type="text"],
.lookup-modal .lookup-modal-content input[type="date"],
.lookup-modal .lookup-modal-content input[type="hidden"],
.lookup-modal .lookup-modal-content select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
  box-sizing: border-box;
}

.lookup-modal .lookup-modal-content label {
  font-weight: 600;
}

.lookup-modal .lookup-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.lookup-modal .close-modal-btn {
  background: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--color-text-secondary);
}

/* botões dentro do modal alinhados à direita quando necessário */
.lookup-modal .modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

@media (max-width: 520px) {
  .lookup-modal {
    max-width: 100%;
    padding: 12px;
  }
  .lookup-modal .lookup-modal-header {
    font-size: 1em;
  }
}

.pagination-controls .btn-toggle,
.pagination-controls .btn-secondary {
  padding: 4px 6px;
  min-width: 36px;
  height: 30px;
  line-height: 18px;
  font-size: 12px;
  border-radius: 6px;
  box-shadow: none;
  cursor: pointer;
}

.pagination-controls .btn-toggle {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #333;
  padding: 4px 6px;
}

.pagination-controls .btn-toggle.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.pagination-controls .btn-secondary {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.06);
  color: var(--color-text-secondary);
  padding: 4px 8px;
}

/* desabilitado fica menor e sem pointer */
.pagination-controls .btn-secondary[disabled],
.pagination-controls .btn-toggle[disabled] {
  opacity: 0.45;
  pointer-events: none;
}

/* informação de paginação mais discreta */
.pagination-info {
  margin-left: 8px;
  color: rgba(0, 0, 0, 0.55);
  font-size: 12px;
  white-space: nowrap;
}

/* em telas pequenas escondemos a informação verbose para economizar espaço */
@media (max-width: 480px) {
  .pagination-info {
    display: none;
  }
  .pagination-controls .btn-toggle {
    min-width: 30px;
    padding: 3px 6px;
    height: 28px;
    font-size: 11px;
  }
  .pagination-controls {
    gap: 4px;
    margin-top: 6px;
  }
}

/* Paginação compacta — override mais específico para forçar botões menores */
.pagination-controls {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 6px;
  justify-content: flex-start;
  font-size: 12px;
}

#content-area .pagination-controls,
.pagination-controls {
  gap: 4px !important;
  margin-top: 6px !important;
  font-size: 12px !important;
}

#content-area .pagination-controls button.btn-toggle,
#content-area .pagination-controls button.btn-toggle span,
.pagination-controls button.btn-toggle,
.pagination-controls button.btn-toggle span {
  padding: 2px 6px !important;
  min-width: 28px !important;
  height: 26px !important;
  line-height: 1 !important;
  font-size: 11px !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
}

/* prev/next */
#content-area .pagination-controls button.btn-secondary,
.pagination-controls button.btn-secondary {
  padding: 2px 6px !important;
  height: 26px !important;
  font-size: 11px !important;
}

/* botão ativo */
#content-area .pagination-controls button.btn-toggle.active,
.pagination-controls button.btn-toggle.active {
  background: var(--color-primary) !important;
  color: #fff !important;
  border-color: var(--color-primary) !important;
}

/* esconder texto extra em mobile */
@media (max-width: 480px) {
  .pagination-info {
    display: none !important;
  }
  .pagination-controls button.btn-toggle {
    min-width: 22px !important;
    height: 24px !important;
    font-size: 10px !important;
    padding: 1px 4px !important;
  }
}

/* Pedidos - alinhar barra de filtros e padronizar botões */
#pedido-filter-form {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}

#pedido-filter-form > div {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  align-items: flex-start !important;
}

#pedido-filter-form input[type="text"],
#pedido-filter-form input[type="date"] {
  padding: 8px 12px !important;
  min-width: 120px !important;
  height: 36px !important;
  box-sizing: border-box !important;
  border-radius: 6px !important;
  border: 1px solid var(--color-border) !important;
  background: var(--color-surface) !important;
  font-size: 14px !important;
}

/* Ações do filtro (Pesquisar / Limpar) */
.filter-actions {
  margin-left: 0 !important;
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  flex-wrap: nowrap !important; /* keep buttons on one row */
}

.filter-actions > div {
  display: flex !important;
  align-items: center !important;
}

/* Forçar filhos de .filter-actions a ficarem em linha mesmo com estilos inline em templates */
.filter-actions > * {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Garantir que anchors dentro do grupo tenham altura e alinhamento consistentes */
.filter-actions a.btn-primary,
.filter-actions a.btn-secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 36px !important;
  min-width: 86px !important;
  padding: 6px 12px !important;
}

.filter-actions .btn-primary,
.filter-actions .btn-secondary {
  min-width: 86px !important;
  height: 36px !important;
  padding: 6px 12px !important;
  box-shadow: none !important;
  align-self: flex-end !important;
}

/* Específico: garantir que o container de ações dos filtros fique em linha
   mesmo que exista uma regra mais genérica que force coluna nos filhos */
#orcamento-filter-form > .filter-actions,
#pedido-filter-form > .filter-actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}

@media (max-width: 680px) {
  #pedido-filter-form {
    align-items: flex-start;
  }
  #pedido-filter-form input[type="text"],
  #pedido-filter-form input[type="date"] {
    min-width: 140px !important;
    width: 100% !important;
  }
  #pedido-filter-form .lookup-input-group {
    width: 100%;
    gap: 8px;
  }
  .filter-actions {
    width: 100%;
    justify-content: flex-start;
    gap: 8px;
  }
}

/* Helpers para os campos de filtro (substituem estilos inline em templates) */
.filter-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  flex: 0 0 auto;
}
.filter-field--wide {
  min-width: 260px;
}
.filter-field--mid {
  min-width: 140px;
}
.filter-action-item {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
}

/* inputs compactos usados nos filtros (aplica padding/width uniforme) */
.input-compact {
  padding: 8px 12px;
  min-width: 120px;
  height: 36px;
  box-sizing: border-box;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: 14px;
}

@media (max-width: 680px) {
  .filter-field--wide {
    min-width: 140px;
    width: 100%;
  }
  .input-compact {
    width: 100%;
    min-width: 0;
  }
}

/* Form action helpers (used in form footers) */
.form-actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.form-actions--right {
  justify-content: flex-end;
}

/* helpers for lookup and modal footers */
.lookup-hidden {
  display: none;
  margin-top: 15px;
}
.form-actions--large {
  margin-top: 20px;
}

/* ========================================= */
/* CALENDÁRIO DE OBRAS                       */
/* ========================================= */

/* Stats row */
.calendar-stats-row {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.stat-card-skeleton {
  flex: 1 1 140px;
  min-height: 90px;
  background: linear-gradient(90deg, #e9ecef 25%, #f8f9fa 50%, #e9ecef 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--border-radius);
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.stat-card {
  flex: 1 1 140px;
  background: var(--color-surface);
  border-radius: var(--border-radius);
  box-shadow: 0 2px 8px var(--color-shadow);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  border-left: 4px solid transparent;
  transition:
    box-shadow 0.2s,
    transform 0.15s;
}

.stat-card:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.stat-icon {
  font-size: 20px;
  line-height: 1;
  margin-bottom: 2px;
}

.stat-value {
  font-size: 2em;
  font-weight: 700;
  line-height: 1;
  color: inherit;
}

.stat-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.stat-total {
  border-left-color: var(--color-primary);
  color: var(--color-primary);
}
.stat-andamento {
  border-left-color: #007bff;
  color: #007bff;
}
.stat-iniciar {
  border-left-color: #fd7e14;
  color: #fd7e14;
}
.stat-concluida {
  border-left-color: #28a745;
  color: #28a745;
}

/* Legend */
.calendar-legend {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--color-text-secondary);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* Loading state */
.calendar-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  font-size: 14px;
  color: var(--color-text-secondary);
}

.calendar-loading-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid #e0e0e0;
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
  flex-shrink: 0;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Calendar card wrapper */
.calendar-card {
  background: var(--color-surface);
  border-radius: var(--border-radius);
  box-shadow: 0 4px 12px var(--color-shadow);
  padding: 20px;
}

/* FullCalendar theme overrides */
.fc .fc-toolbar-title {
  font-size: 1.25em;
  font-weight: 700;
  color: var(--color-text);
}

.fc .fc-button {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary-dark) !important;
  color: #fff !important;
  font-size: 13px !important;
  padding: 5px 12px !important;
  border-radius: var(--border-radius) !important;
  box-shadow: none !important;
  text-transform: none !important;
  font-family: var(--font-family) !important;
  font-weight: 600 !important;
}

.fc .fc-button:hover {
  background-color: var(--color-primary-dark) !important;
}

.fc .fc-button-active,
.fc .fc-button:focus {
  background-color: var(--color-primary-dark) !important;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.3) !important;
  outline: none !important;
}

.fc .fc-col-header-cell {
  background-color: #f0f4ff;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
  padding: 8px 0;
}

.fc .fc-daygrid-day-number {
  font-size: 13px;
  padding: 4px 8px;
  color: var(--color-text);
}

.fc .fc-day-today {
  background-color: #eef4ff !important;
}

.fc .fc-day-today .fc-daygrid-day-number {
  background: var(--color-primary);
  color: #fff;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.fc .fc-daygrid-event {
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  padding: 2px 6px;
  margin-bottom: 2px;
  cursor: pointer;
  transition:
    filter 0.15s,
    transform 0.1s;
}

.fc .fc-daygrid-event:hover {
  filter: brightness(0.9);
  transform: translateY(-1px);
}

.fc .fc-event-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fc .fc-more-link {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-primary);
}

.fc .fc-list-event:hover td {
  background-color: #f0f4ff;
}

.fc .fc-list-day-cushion {
  background-color: #f0f4ff !important;
}

.fc .fc-list-event-title a {
  color: var(--color-text);
  text-decoration: none;
}

/* Event detail popup */
.obra-event-popup {
  position: fixed;
  z-index: 3000;
  background: var(--color-surface);
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
  width: 260px;
  overflow: hidden;
  animation: popup-appear 0.15s ease;
}

@keyframes popup-appear {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-6px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.obra-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 10px;
  background: var(--color-primary);
  color: #fff;
  gap: 8px;
}

.obra-popup-title {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.obra-popup-close {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.85);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  flex-shrink: 0;
  transition: color 0.15s;
}
.obra-popup-close:hover {
  color: #fff;
}

.obra-popup-body {
  padding: 12px 14px;
}

.obra-popup-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 20px;
  margin-bottom: 10px;
  color: #fff;
}

.obra-popup-badge.status-em-andamento {
  background: #007bff;
}
.obra-popup-badge.status-a-iniciar {
  background: #fd7e14;
}
.obra-popup-badge.status-concluida {
  background: #28a745;
}
.obra-popup-badge.status-sem-data {
  background: #adb5bd;
}

.obra-popup-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.obra-popup-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  line-height: 1.4;
}

.obra-popup-key {
  color: var(--color-text-secondary);
  font-weight: 500;
  flex-shrink: 0;
}

.obra-popup-val {
  color: var(--color-text);
  font-weight: 600;
  text-align: right;
  word-break: break-word;
}

@media (max-width: 600px) {
  .calendar-stats-row {
    gap: 10px;
  }
  .stat-card {
    flex: 1 1 calc(50% - 5px);
    padding: 12px 14px;
  }
  .calendar-card {
    padding: 10px;
  }
  .obra-event-popup {
    width: calc(100vw - 32px);
    max-width: 320px;
  }
}

/* ========================================= */
/* RESPONSIVO — SIDEBAR MOBILE               */
/* ========================================= */

.hamburger-btn {
  display: none;
}

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 199;
}

.sidebar {
  transition: transform 0.3s ease;
}

@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .sidebar-overlay.open {
    display: block;
  }

  .container {
    padding-left: 0;
  }

  footer {
    margin-left: 0;
  }

  .hamburger-btn {
    display: flex;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 400;
    width: 42px;
    height: 42px;
    background: var(--color-primary);
    border: none;
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    font-size: 22px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }

  #content-area {
    padding-top: 60px;
  }
}