/* Destaque especial para plano Barro */
.plano-barro {
  color: #a0522d !important;
  font-weight: 900;
  text-shadow: 0 1px 8px #a0522da0, 0 0 2px #fff;
  letter-spacing: 1px;
}
/* Valor Mensal da tabela de entradas em verde claro */
#tabela-entradas td:nth-child(2) {
  background: linear-gradient(90deg, #d6ffd6 0%, #eaffea 100%);
  color: #1b5e20;
  font-weight: bold;
  border-radius: 6px;
}
#tabela-entradas td:nth-child(1) {
  background: none;
  color: inherit;
  font-weight: normal;
  border-radius: 0;
}
/* Removed stray CSS properties at the top of the file */
/* TOPBAR GLOBAL */
.topbar-global {
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  width: 100vw;
  margin-left: 0;
  height: 1.5cm;
  background: linear-gradient(135deg, #232526 0%, #414345 100%);
  z-index: 200;
  display: flex;
  align-items: center;
  position: relative;
}
.topbar-content {
  display: flex;
  align-items: center;
  height: 100%;
  padding-left: var(--sidebar-width);
  padding-right: 2rem;
  width: 100%;
}
.topbar-logo {
  font-size: 1.6em;
  font-weight: 900;
  color: #6dd5fa;
  letter-spacing: 2px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: var(--sidebar-width);
  text-align: center;
  z-index: 201;
}
/* Centralização e espaçamento padrão para títulos e barra de ferramentas dos módulos */
.module-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  margin-top: 1.2cm;
  position: relative;
}

.module-header h2 {
  text-align: left;
  margin: 0;
  padding-left: 0.5cm;
  position: static;
  top: auto;
  left: auto;
  transform: none;
  width: 100%;
  z-index: auto;
}

.table-tools {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  gap: 10px;
  align-items: center;
  margin-top: 0;
  margin-bottom: 1rem;
}
/* global.css - Estilos globais para DELITE Web App */
:root { --sidebar-width: 220px; }

body {
  margin: 0;
  padding: 0;
  /* padding-top removido para topbar ficar colada no topo */
  font-family: 'Montserrat', Arial, sans-serif;
  background: #f6fafd;
  color: #222;
}

/*TAMANHO PADRÃO PLACEHOLDERS*/
input::placeholder {
  font-size: 11px;
}

/* FONTE PADRÃO DO CRM */
html { font-size: 14px; }

/* GARANTE AFASTAMENTO DO CONTEÚDO DA BARRA SIDEBAR */
body.module-page { padding-left: var(--sidebar-width); }

/* TÍTULOS PADRÃO */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', Arial, sans-serif;
  color: #f8f9fa;
}

/* LINKS */
a {
  color: #b92929;
  text-decoration: none;
  transition: color 0.2s;
}
a:hover {
  color: #000203;
}

/* ELEMENTOS DE FORMULÁRIO */
input, button, select, textarea {
  font-family: inherit;
  font-size: 1em;
  border-radius: 8px;
  border: 1px solid #b2bec3;
  outline: none;
  transition: border 0.2s;
}

/* ESTILOS DE FOCUS */
input:focus, select:focus, textarea:focus {
  border: 1.5px solid #2980b9;
}

/* BOTÕES */
button {
  background: linear-gradient(90deg, #6dd5fa 0%, #2980b9 100%);
  color: #fff;
  font-weight: 700;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(44,62,80,0.08);
  transition: background 0.2s;
}
button:hover {
  background: linear-gradient(90deg, #2980b9 0%, #6dd5fa 100%);
}

/* MEDIA QUERIES - ADAPTAÇÃO PARA CELULAR */
@media (max-width: 480px) {
  body {
    font-size: 0.98em;
  }
  h1 {
    font-size: 1.5em;
  }
}

/* SIDEBAR E EFEITOS DO MENU */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-width);
  height: 100vh;
  background: linear-gradient(135deg, #232526 0%, #414345 100%);
  box-shadow: 2px 0 24px rgba(0,0,0,0.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 1.8em;
  z-index: 100;
}

/* LOGO DA SIDEBAR */
.sidebar-logo {
  font-size: 1.9rem;
  font-weight: 990;
  color: #ffffff;
  margin-bottom: 1.6rem;
  letter-spacing: 2px;
}

/* MENU DA SIDEBAR */
.sidebar-menu { width: 100%; display:flex; flex-direction:column; gap:0.6rem; padding:0 0.6rem; }
.sidebar-menu a{
  display:flex; align-items:center; gap:0.6rem;
  padding:0.7rem 0.9rem; border-radius:10px; color:#fff; text-decoration:none; font-weight:600;
  transition: transform 200ms ease, background 200ms ease, box-shadow 200ms ease;
}
.sidebar-menu a span { font-size:1.05rem; }
.sidebar-menu a:hover{ transform:translateX(6px); background:rgba(255,255,255,0.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02); }
.sidebar-menu a.active{ background: linear-gradient(90deg,#6dd5fa, #2980b9); color:#111; box-shadow:0 6px 20px rgba(45,130,210,0.18); }
.sidebar-footer{ margin-top:auto; padding:1.2rem 0; color:#b2bec3; font-size:0.9rem; }

.sidebar--fallback { opacity: 0.92; box-shadow: 0 0 0 3px rgba(255,200,200,0.02) inset; }

/* Espaçamento das páginas: garante que o conteúdo do módulo comece 0.5cm distante do sidebar */
.module-wrapper { padding: 2rem; }

/* Tabelas "charmosas" usadas nos módulos */
.charm-table {
  width: calc(100% - 2rem);
  margin-left: 0.5cm;
  border-collapse: collapse;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
  transition: box-shadow 0.2s, background 0.2s;
}
.combo-row td:first-child {
  background: linear-gradient(90deg,#43e97b 0%, #38f9d7 100%);
  color: #111;
  font-weight: 700;
  letter-spacing: 1px;
  box-shadow: 0 2px 18px rgba(67,233,123,0.18);
}

/* Destaque global para cabeçalhos de todas as tabelas */
table thead th {
  background: linear-gradient(90deg,#6dd5fa 0%, #2980b9 100%);
  color: #fff;
  text-align: center;
  padding: 0.9rem 1rem;
  font-weight: 700;
  letter-spacing: 1px;
  border-bottom: 2px solid #2980b9;
  box-shadow: 0 2px 12px rgba(44,62,80,0.08);
}

table tbody td {
  text-align: center;
}

.charm-table thead th {
  /* Mantém o padrão, mas agora herda o destaque global */
  color: #6dd5fa;
}
.charm-table tbody td { padding:0.85rem 1rem; color:#e9eef5; border-top:1px solid rgba(255,255,255,0.03); }
.charm-table tbody td {
  transition: background 0.2s, color 0.2s;
}
.charm-table tbody td:hover {
  background: rgba(109,213,250,0.16);
  color: #6dd5fa;
}
.charm-table tbody tr:hover {
  background: rgba(109,213,250,0.08);
  box-shadow: 0 2px 12px rgba(109,213,250,0.08);
}

/* Barra de utilitários acima da tabela: busca + botão */
.table-tools { display:flex; gap:0.75rem; align-items:center; margin-bottom:1rem; }
.table-tools .search { padding:0.6rem 0.8rem; border-radius:8px; border:1px solid rgba(255,255,255,0.06); background:rgba(255,255,255,0.02); color:#fff; min-width:220px }
/* Botão pesquisar segue padrão btn-primary do CRM */
.pesquisar-btn {
  padding: 0.6rem 1rem;
  border-radius: 8px;
  background: linear-gradient(90deg,#6dd5fa,#2980b9);
  color: #111;
  font-weight: 700;
  border: none;
  box-shadow: 0 2px 8px rgba(44,62,80,0.08);
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}
.pesquisar-btn:hover {
  background: linear-gradient(90deg,#2980b9,#6dd5fa);
  color: #fff;
  box-shadow: 0 2px 12px rgba(109,213,250,0.18);
  transform: translateY(-2px) scale(1.04);
}
.table-tools .search {
  transition: box-shadow 0.2s, border-color 0.2s, background 0.2s;
  background: linear-gradient(90deg,#232526 0%, #414345 100%);
  color: #6dd5fa;
  font-weight: 700;
  border: 1.5px solid #6dd5fa;
  box-shadow: 0 2px 12px rgba(109,213,250,0.10);
  outline: none;
}
.table-tools .search:hover,
.table-tools .search:focus {
  box-shadow: 0 4px 18px rgba(109,213,250,0.18);
  border-color: #2980b9;
  background: linear-gradient(90deg,#2980b9,#6dd5fa);
  color: #fff;
}
.table-tools .search:hover,
.table-tools .btn-primary { padding:0.6rem 1rem; border-radius:8px; background:linear-gradient(90deg,#6dd5fa,#2980b9); color:#111; font-weight:700; border:none; cursor:pointer }

/* Modal padrão do formulário */
.modal-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,0.6); display:none; align-items:center; justify-content:center; z-index:9999 !important; }
.modal{
  background:#0f1720;
  color:#fff;
  padding:1.6rem;
  border-radius:12px;
  width:720px; /* increased modal width for more comfortable forms */
  max-width:96vw;
  max-height:85vh; /* allow modal to use more vertical space but not exceed viewport */
  overflow:auto; /* enable scrolling inside modal when content is tall */
  box-shadow:0 18px 60px rgba(0,0,0,0.6);
  transition: box-shadow 0.2s, background 0.2s, transform 0.2s;
  position: relative;
  margin: 0 auto;
}
.modal select[multiple] option {
.modal select[multiple] {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  outline: none;
  background: #13263a;
  color: #fff;
  border: 1.5px solid #6dd5fa;
  box-shadow: 0 2px 12px rgba(109,213,250,0.10);
}
  background: #13263a;
  color: #fff;
  transition: background 0.2s, color 0.2s;
}
.modal select[multiple]:focus option:checked,
.modal select[multiple] option:checked {
  background: linear-gradient(90deg,#1b8a4a 0%, #6dd5fa 100%);
  color: #fff;
}
.modal h3{ margin-top:0; color:#6dd5fa }
.modal form{ display:flex; flex-direction:column; gap:0.8rem }
.modal input{ padding:0.7rem; border-radius:8px; border:1px solid rgba(255,255,255,0.06); background:rgba(255,255,255,0.02); color:#fff }
.modal .actions{ display:flex; gap:0.6rem; justify-content:flex-end; margin-top:0.5rem }
.btn-ghost{ background:transparent; border:1px solid rgba(255,255,255,0.06); color:#fff; padding:0.5rem 0.8rem; border-radius:8px; cursor:pointer }
.modal:hover {
  box-shadow: 0 18px 48px rgba(109,213,250,0.18);
  background: #13263a;
}

/* EFEITOS HOVER GLOBAIS */
button, .btn-primary, .cadastro-btn, .pesquisar-btn {
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}
button:hover, .btn-primary:hover, .cadastro-btn:hover, .pesquisar-btn:hover {
  background: linear-gradient(90deg,#2980b9,#6dd5fa);
  color: #fff;
  box-shadow: 0 2px 12px rgba(109,213,250,0.18);
  transform: translateY(-2px) scale(1.04);
}
input, button, select, textarea {
  transition: border 0.2s, box-shadow 0.2s;
}
.cadastro-form:hover, .edicao-form:hover, .modal form:hover {
  box-shadow: 0 2px 16px rgba(109,213,250,0.12);
  border-color: #6dd5fa;
}

@media (max-width: 900px){
  .module-wrapper{ padding:1rem }
}

@media (max-width: 600px){
  .sidebar{ position:relative; width:100%; height:auto; flex-direction:row; gap:0.5rem; padding:0.6rem; }
  .sidebar-menu{ flex-direction:row; overflow:auto; padding:0 0.4rem }
  body.module-page { padding-left: 0 }
  .module-wrapper{ margin-left:0 }
}