/* ═══════════════════════════════════════════════════════════════════
   assets/css/style.css  —  Sistema de Controle de Acesso
   Tema claro (padrão) + Tema escuro/contraste (.dark-mode no <html>)
   Totalmente responsivo: mobile-first, 768 px breakpoint
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 1. VARIÁVEIS DE TEMA ─────────────────────────────────────── */
:root {
  /* Superfícies */
  --bg:               #F3F4F6;
  --panel:            #ffffff;
  --panel-alt:        #f9fafb;
  --border:           #e5e7eb;
  --border-strong:    #d1d5db;

  /* Texto */
  --text:             #111827;
  --muted:            #6b7280;
  --text-inv:         #ffffff;

  /* Acento */
  --accent:           #0f62fe;

  /* Sombra / raio */
  --radius:           12px;
  --card-shadow:      0 6px 18px rgba(15,22,39,0.06);

  /* Botões */
  --btn-primary-bg:   #0f62fe;
  --btn-primary-text: #ffffff;
  --btn-success-bg:   #15803d;
  --btn-success-text: #ffffff;
  --btn-info-bg:      #0369a1;
  --btn-info-text:    #ffffff;
  --btn-warning-bg:   #c2410c;
  --btn-warning-text: #ffffff;
  --btn-danger-bg:    #dc2626;
  --btn-danger-text:  #ffffff;
  --btn-secondary-bg:    #f3f4f6;
  --btn-secondary-text:  #111827;
  --btn-secondary-border:#d1d5db;
  --btn-export-bg:    #0f766e;
  --btn-export-text:  #ffffff;
  --btn-pdf-bg:       #991b1b;
  --btn-pdf-text:     #ffffff;
  --btn-agendar-bg:   #6d28d9;
  --btn-agendar-text: #ffffff;

  /* Tabelas */
  --table-head-bg:    #eef2f7;
  --table-row-alt:    #f9fafb;
  --table-row-hover:  #f3f4f6;

  /* Modal */
  --modal-bg:         #ffffff;

  /* Header */
  --header-bg-start:  rgba(255,255,255,0.6);
  --header-bg-end:    rgba(255,255,255,0.85);
  --header-border:    rgba(0,0,0,0.04);

  /* Apelidos usados por telas antigas. Eram referenciados com um fallback
     claro sem nunca terem sido definidos, então o fallback vencia SEMPRE, inclusive
     no modo escuro (fundo branco em input e texto sumindo no hover). */
  --text-muted:       var(--muted);
  --input-bg:         var(--panel);
  --panel-alt-hover:  #eef1f5;
  --brand:            var(--accent);
  --success:          var(--btn-success-bg);
  --danger:           var(--btn-danger-bg);

  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--text);
}

/* ─── TEMA ESCURO / MODO CONTRASTE ────────────────────────────── */
html.dark-mode {
  --bg:               #0f1117;
  --panel:            #1a1d27;
  --panel-alt:        #22263a;
  --border:           #2e3347;
  --border-strong:    #404563;

  --text:             #e8eaf0;
  --muted:            #9ca3af;
  --text-inv:         #0f1117;

  --accent:           #4fa3ff;

  --card-shadow:      0 6px 18px rgba(0,0,0,0.35);

  --btn-primary-bg:   #1d72ff;
  --btn-secondary-bg:    #2e3347;
  --btn-secondary-text:  #e8eaf0;
  --btn-secondary-border:#404563;

  --table-head-bg:    #22263a;
  --table-row-alt:    #1e2130;
  --table-row-hover:  #252941;

  --modal-bg:         #1a1d27;

  --header-bg-start:  rgba(15,17,23,0.85);
  --header-bg-end:    rgba(26,29,39,0.95);
  --header-border:    rgba(255,255,255,0.04);

  /* Contraparte escura dos apelidos acima. */
  --panel-alt-hover:  #2b3048;

  color: var(--text);
}

/* ─── 2. RESET / BASE ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* O atributo hidden do HTML vale para QUALQUER elemento.
   Sem esta regra, qualquer classe que defina "display" (.btn, .badge, .modal…)
   vence o padrão do navegador e o elemento continua visível mesmo com
   hidden — foi o que motivou os remendos ".alert-box[hidden]",
   ".pdf-modal[hidden]" e "#pdfModal[hidden]" espalhados mais abaixo. */
[hidden] { display: none !important; }
html, body {
  height: 100%; margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
}
img { max-width: 100%; height: auto; }
a { color: var(--accent); }

/* ─── 3. HEADER / MENU ─────────────────────────────────────────── */
/* Layout em 3 linhas empilhadas: (1) logo, (2) menu de navegação,
   (3) "Logado como" + botões padrão (perfil/contraste/suporte/sair). */
.header {
  min-height: 64px;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 24px 12px;
  background: linear-gradient(180deg, var(--header-bg-start), var(--header-bg-end));
  box-shadow: 0 1px 0 var(--header-border);
  position: relative;
  z-index: 100;
  backdrop-filter: blur(6px);
}

/* Linha 1: logo + botão de ocultar/mostrar o menu, sempre juntos e
   visíveis em qualquer largura de tela. */
.header-top-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
}

.logo {
  height: 38px;
  flex-shrink: 0;
}
.header a { text-decoration: none; }

/* Linha 2: menu de navegação, centralizado e limitado à largura do
   container. Com muitas categorias os itens quebram em novas linhas
   (flex-wrap) mantendo-se sempre centralizados. */
.nav-top {
  display: flex;
  gap: 2px;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  justify-content: center;
}

/* Linha 3: ações do usuário, separadas do menu por um divisor sutil,
   também limitadas à mesma largura do container para alinhar com o menu */
.header-user {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 10px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 8px;
  border-top: 1px dashed var(--header-border);
}
.header-user-label {
  font-size: 13.5px;
  color: var(--muted);
  white-space: nowrap;
  margin-right: 2px;
}
.header-user-label strong { color: var(--text); font-weight: 600; }

/* Menu ocultado: clicando no botão ao lado da logo, some com o menu de
   navegação e a linha de ações do usuário, deixando só a logo visível.
   Funciona em qualquer largura de tela. */
#main-header.nav-collapsed .nav-top,
#main-header.nav-collapsed .header-user {
  display: none;
}

/* Otimização de espaço para monitores médios/notebooks (até 1280px) */
@media (max-width: 1280px) {
  .header {
    padding: 10px 14px 8px;
    gap: 6px;
  }
  .nav-top {
    gap: 2px;
  }
  .nav-top .menu-dropdown .dropdown-toggle {
    padding: 6px 10px;
    font-size: 13px;
  }
  .header-user .btn {
    padding: 6px 10px;
    font-size: 13px;
  }
}

/* Botão contraste / perfil / suporte no header — pastilhas circulares para
   um conjunto de ações mais leve e equilibrado ao lado do "Sair" */
.btn-contrast {
  background: none !important;
  border: 1.5px solid var(--border-strong) !important;
  color: var(--text) !important;
  font-size: 16px !important;
  width: 34px;
  height: 34px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50% !important;
  cursor: pointer;
  line-height: 1;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.btn-contrast:hover {
  background: var(--panel-alt) !important;
  border-color: var(--accent) !important;
  transform: translateY(-1px);
}

/* ── Botão de ocultar/mostrar o menu (ícone ao lado da logo) ──
   Reaproveita o visual de .btn-contrast; o SVG usa currentColor, então
   acompanha a cor do botão (e o modo escuro) automaticamente. */
#menu-collapse-btn svg {
  color: inherit;
}
#menu-collapse-btn.is-active {
  background: var(--panel-alt) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* ── Responsivo: ≤ 768 px ── */
@media (max-width: 768px) {
  .header {
    height: auto;
    padding: 10px 16px;
    gap: 0;
  }
  .header-top-row {
    justify-content: space-between;
  }

  .nav-top,
  .header-user {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 8px 0 12px;
    border-top: 1px solid var(--border);
    margin-top: 8px;
  }
  .header-user {
    padding-top: 8px;
    border-top: 1px dashed var(--border);
    flex-direction: row;
    flex-wrap: wrap;
  }
  .header-user-label { white-space: normal; width: 100%; margin-bottom: 4px; }
  .nav-top .btn, .header .btn { margin: 2px 0; width: 100%; text-align: left; }
}

/* ─── 4. LAYOUT ────────────────────────────────────────────────── */
.container {
  max-width: 1200px;
  margin: 20px auto;
  padding: 20px;
}
@media (max-width: 768px) {
  .container { padding: 12px; margin: 10px auto; }
}

.card {
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  padding: 18px;
  margin-bottom: 16px;
}
@media (max-width: 480px) {
  .card { padding: 12px; border-radius: 8px; }
}

/* Cantos arredondados do cabeçalho de um card (ex.: card-header colorido em
   relatorios_requisicoes.php) acompanhando o mesmo var(--radius) usado pelo
   .card - definido aqui de forma global em vez de um valor fixo (0.5rem)
   repetido/dessincronizado em cada página que usar .card-header. */
.card-header:first-child {
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}

/* ─── 5. BOTÕES ────────────────────────────────────────────────── */
.btn, a.btn, button.btn, input.btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  padding: 8px 14px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  box-sizing: border-box;
  margin: 4px 6px;
  vertical-align: middle;
  transition: background-color .15s ease, filter .15s ease;
  white-space: nowrap;
}
.btn:hover, a.btn:hover, button.btn:hover { filter: brightness(.92); }
.btn:disabled, .btn[disabled] { opacity: .55; cursor: not-allowed; filter: none; }

.btn-sm { padding: 5px 10px; font-size: 13px; border-radius: 8px; }

a.btn-primary,button.btn-primary,.btn.btn-primary { background-color:var(--btn-primary-bg)!important; color:var(--btn-primary-text)!important; border:none!important; }
a.btn-success,button.btn-success,.btn.btn-success { background-color:var(--btn-success-bg)!important; color:var(--btn-success-text)!important; border:none!important; }
a.btn-success:hover,button.btn-success:hover,.btn.btn-success:hover { background-color:#166534!important; filter:none; }
a.btn-info,button.btn-info,.btn.btn-info { background-color:var(--btn-info-bg)!important; color:var(--btn-info-text)!important; border:none!important; }
a.btn-info:hover,button.btn-info:hover,.btn.btn-info:hover { background-color:#075985!important; filter:none; }
a.btn-warning,button.btn-warning,.btn.btn-warning { background-color:var(--btn-warning-bg)!important; color:var(--btn-warning-text)!important; border:none!important; }
a.btn-warning:hover,button.btn-warning:hover,.btn.btn-warning:hover { background-color:#9a3412!important; filter:none; }
a.btn-danger,button.btn-danger,.btn.btn-danger { background-color:var(--btn-danger-bg)!important; color:var(--btn-danger-text)!important; border:none!important; }
a.btn-danger:hover,button.btn-danger:hover,.btn.btn-danger:hover { background-color:#b91c1c!important; filter:none; }
a.btn-secondary,button.btn-secondary,.btn.btn-secondary { background-color:var(--btn-secondary-bg)!important; color:var(--btn-secondary-text)!important; border:1px solid var(--btn-secondary-border)!important; }
a.btn-secondary:hover,button.btn-secondary:hover,.btn.btn-secondary:hover { filter: brightness(.95); }
a.btn-export,button.btn-export,.btn.btn-export { background-color:var(--btn-export-bg)!important; color:var(--btn-export-text)!important; border:none!important; }
a.btn-export:hover,button.btn-export:hover,.btn.btn-export:hover { background-color:#115e59!important; filter:none; }
a.btn-pdf,button.btn-pdf,.btn.btn-pdf { background-color:var(--btn-pdf-bg)!important; color:var(--btn-pdf-text)!important; border:none!important; }
a.btn-agendar,button.btn-agendar,.btn.btn-agendar { background-color:var(--btn-agendar-bg)!important; color:var(--btn-agendar-text)!important; border:none!important; }
a.btn-agendar:hover,button.btn-agendar:hover,.btn.btn-agendar:hover { background-color:#5b21b6!important; filter:none; }
a.btn-pdf:hover,button.btn-pdf:hover,.btn.btn-pdf:hover { background-color:#7f1d1d!important; filter:none; }

.btn-link {
  background: none; border: none; color: var(--accent);
  cursor: pointer; text-decoration: underline;
  padding: 8px 0; font-size: 14px; margin: 4px 6px;
}
.btn-link:hover { filter: brightness(.85); }

.nav-top .btn, .header .btn { margin: 0; }

/* ─── 6. FORMULÁRIOS ───────────────────────────────────────────── */
.filter-row, .filter-form, .pdf-modal-actions, .monitor-actions {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.form-row {
  display: flex; gap: 10px 14px; flex-wrap: wrap;
  margin-bottom: 10px; align-items: center;
}
.form-row .btn { margin: 4px 0; }

/* Coluna fixa para o rótulo e coluna elástica para o campo: sem isto cada
   input assumia a própria largura natural e a coluna de campos saía
   desalinhada de linha para linha. O limite de 560px evita o campo esticado
   de ponta a ponta em telas largas. */
.form-row > label {
  flex: 0 0 190px; min-width: 190px; align-self: center;
  color: var(--muted); line-height: 1.3;
}
.form-row > .input,
.form-row > input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),
.form-row > select,
.form-row > textarea,
.form-row > .inline,
.form-row > div:not(.video-wrap) {
  flex: 1 1 320px; min-width: 0; max-width: 560px;
}
.form-row > textarea { min-height: 84px; }

/* Blocos largos (câmera, pré-visualizações) ocupam a linha inteira. */
.form-row > .video-wrap { flex: 1 1 100%; max-width: none; }

/* Linha só com botões: nada de esticar o botão para 320px. */
.form-row > .btn, .form-row > button, .form-row > a.btn { flex: 0 0 auto; }

.input, input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),
select, textarea {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  min-width: 180px;
  max-width: 100%;
  background: var(--panel);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
}
input::placeholder, textarea::placeholder { color: var(--muted); }
select option { background: var(--panel); color: var(--text); }

@media (max-width: 900px) {
  /* Rótulo acima do campo antes de a coluna fixa apertar o input. */
  .form-row > label { flex: 1 1 100%; min-width: 0; }
  .form-row > .input,
  .form-row > input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),
  .form-row > select,
  .form-row > textarea,
  .form-row > .inline,
  .form-row > div:not(.video-wrap) { flex: 1 1 100%; max-width: none; }
}

@media (max-width: 600px) {
  .form-row { flex-direction: column; align-items: stretch; gap: 6px; }
  /* align-self:center do desktop centraliza o rótulo quando a linha vira
     coluna; no empilhado ele volta a encostar na margem esquerda. */
  .form-row label, .form-row > label { min-width: unset; flex: none; align-self: stretch; }
  .form-row > .btn, .form-row > button, .form-row > a.btn { width: 100%; }
  .input, input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),
  select, textarea { min-width: 0; width: 100%; }
  .filter-row, .filter-form { flex-direction: column; align-items: stretch; }
  .filter-row .btn, .filter-form .btn { width: 100%; text-align: center; margin: 0; }
}

.inline { display: flex; gap: 8px; align-items: center; }
.text-muted { font-size: 13px; color: var(--muted); }
.small:not(.btn) { font-size: 13px; color: var(--muted); }

/* ─── 7. TABELAS ───────────────────────────────────────────────── */
.table-wrap, .table-wrapper, .table-responsive {
  overflow-x: auto;
  margin-top: 16px;
  -webkit-overflow-scrolling: touch;
}

.table,
table.tabela,
.card table:not(.table-form),
.container table:not(.table-form) {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: var(--panel);
  min-width: 400px; /* evita esmagamento — rola horizontalmente */
}

.table thead th,
table.tabela thead th,
.card table:not(.table-form) thead th,
.container table:not(.table-form) thead th {
  background: var(--table-head-bg);
  color: var(--text);
  font-weight: 600;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 2px solid var(--border-strong);
  vertical-align: middle;
  white-space: nowrap;
}

.table tbody td,
table.tabela tbody td,
.card table:not(.table-form) tbody td,
.container table:not(.table-form) tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  text-align: left;
  color: var(--text);
}

.table tbody tr:nth-child(even),
table.tabela tbody tr:nth-child(even),
.card table:not(.table-form) tbody tr:nth-child(even),
.container table:not(.table-form) tbody tr:nth-child(even) { background: var(--table-row-alt); }

.table tbody tr:hover,
table.tabela tbody tr:hover,
.card table:not(.table-form) tbody tr:hover,
.container table:not(.table-form) tbody tr:hover { background: var(--table-row-hover); }

.table .btn, .table a.btn, .table button.btn { margin: 2px 4px; }

/* Tabela de formulário — layout de rótulo/campo, não é tabela de dados. */
.table-form, table.table-form { border: none; background: transparent; }
.table-form td, .table-form th { border: none; padding: 5px 0; background: transparent; color: var(--text); }
.table-form tbody tr:nth-child(even), .table-form tbody tr:hover { background: transparent; }
.table-form .tf-rotulo { width: 30%; }
.table-form .tf-rotulo--topo { vertical-align: top; }
.table-form .tf-acoes { text-align: right; padding-top: 0; }
.table-form td > input, .table-form td > select, .table-form td > textarea { width: 100%; }

/* Fotos */
.table-photo-sm  { width:50px;height:50px;object-fit:cover;border-radius:8%;border:1px solid var(--border);display:block; }
.table-photo     { width:60px;height:60px;object-fit:cover;border-radius:6px;border:1px solid var(--border);display:block; }
.table-photo-md  { width:70px;height:70px;object-fit:cover;border-radius:8%;border:1px solid var(--border);display:block; }
.table td.td-photo, .table th.th-photo { width:1%;white-space:nowrap;text-align:center; }

/* ─── 8. PAGINAÇÃO ─────────────────────────────────────────────── */
/* Barra única do sistema. O visual de referência é o de contas a pagar
   (.pagination-controls, gerada por App.paginacao — seção 31.13). As classes
   .pagination/.paginacao abaixo são a marcação antiga (table_pagination.php e
   tablepagination.js), mantida em telas ainda não migradas: aqui elas recebem
   o MESMO visual, reordenadas por flex order para "seletor à esquerda,
   páginas à direita". Alterar o visual em um lugar só, nunca em dois. */
.pagination, .paginacao, .table-pagination-footer .pagination {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: flex-start; align-items: center;
  margin-top: 15px; padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 13px; color: var(--muted);
}
.table-pagination-footer { margin: 0; }
.table-pagination-footer .pagination { margin-top: 15px; }

/* Ordem visual: [Exibir N por página] [contagem] ......... [1 2 3] */
.pagination-per-page, .paginacao .pagination-per-page {
  order: 1; margin-left: 0;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--muted);
}
.pagination-label, .paginacao-label {
  order: 2; flex: 0 1 auto; margin: 0 auto 0 0; text-align: left;
  font-size: 13px; color: var(--muted);
}
.pagination-page, .pagination .btn, .paginacao .btn { order: 3; margin: 0; }

.pagination-per-page-label { white-space: nowrap; }
.pagination-per-page-select {
  padding: 4px 8px; border-radius: 8px; border: 1px solid var(--border-strong);
  font-size: 13px; background: var(--panel); color: var(--text); min-width: 0;
}

/* Botão de página idêntico ao .paginacao-btn da seção 31.13. O !important
   neutraliza as classes .btn/.btn-secondary que o helper antigo ainda emite. */
.pagination .pagination-page, .paginacao .pagination-page {
  padding: 5px 10px !important;
  border: 1px solid var(--border-strong) !important;
  background: var(--panel) !important;
  color: var(--text) !important;
  border-radius: 8px !important;
  cursor: pointer; font-weight: 600;
  font-size: 13px; font-family: inherit;
}
.pagination .pagination-page:hover, .paginacao .pagination-page:hover {
  background: var(--table-row-hover) !important;
}
.pagination .btn-sm.is-active,
.pagination .pagination-page.is-active,
.paginacao .pagination-page.is-active {
  background: var(--btn-primary-bg) !important;
  color: var(--btn-primary-text) !important;
  border-color: var(--btn-primary-bg) !important;
  cursor: default;
}
@media (max-width: 520px) {
  .pagination-label, .paginacao-label { flex: 1 1 100%; margin: 0; }
}

/* ─── 9. IMAGENS / VÍDEO ───────────────────────────────────────── */
.avatar { width:96px;height:96px;border-radius:8px;object-fit:cover;border:1px solid var(--border); }
.monitor-card .avatar { width:160px;height:160px;border-radius:0; }
.selectedPessoa { display:flex;align-items:center;gap:10px;margin:6px 0; }
.selectedPessoa img { width:40px;height:40px;object-fit:cover;border-radius:5%;border:1px solid var(--border); }
.search-result-photo { width:80px;height:80px;object-fit:cover;border-radius:5%;border:1px solid var(--border);vertical-align:middle;margin-right:8px; }

.video-wrap { display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap; }
.video-wrap video, .video-wrap canvas {
  width: 100%; max-width: 320px; height: auto;
  aspect-ratio: 4/3;
  border-radius: 8px; border: 1px solid var(--border);
}
@media (max-width: 480px) {
  .video-wrap { flex-direction: column; }
  .video-wrap video, .video-wrap canvas { max-width: 100%; }
}

/* ─── 10. MODAIS ───────────────────────────────────────────────── */
.modal {
  position: fixed; left:0; top:0; width:100%; height:100%;
  display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.5);
  z-index: 9000; padding: 12px; box-sizing: border-box;
}
.modal.is-open, .modal[style*="flex"] { display: flex !important; }

.modal-content, .modal .panel {
  background: var(--modal-bg);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
  max-width: 920px; width: 100%;
  max-height: 92vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.modal .panel { max-width: 600px; }

.modal-header { padding: 16px 20px 8px; border-bottom: 1px solid var(--border); flex-shrink: 0; position: relative; }
.modal-header h3 { margin:0; font-size:18px; color:var(--text); padding-right: 28px; }
.modal-body { padding: 16px 20px; overflow-y: auto; flex: 1 1 auto; }
.modal-body .table { margin-top: 0; }
.modal-filters { display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px;align-items:center; }
.modal-filters .input { flex:1 1 200px; min-width:140px; margin:0; }
.modal-footer {
  padding: 12px 20px 16px; border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; flex-shrink: 0;
}
.modal-footer .btn { margin: 0; }
.modal-table-wrap, .modal-body .table-wrap { overflow-x: auto; margin:0; }
.modal-pessoa-preview { margin-top:10px; text-align:center; }
.modal-pessoa-preview img { max-width:120px; border-radius:8px; border:1px solid var(--border); }

/* ─── PADRÃO DE POPUP ──────────────────────────────────────────────
   Regras aplicadas a todo popup do sistema, em conjunto com
   assets/js/popup-padrao.js. Ver o cabeçalho daquele arquivo.        */

/* 1. A página atrás do popup não rola: acaba o scroll duplo, em que a
      roda do mouse movia o fundo em vez do conteúdo do popup. */
body.popup-aberto { overflow: hidden; }

/* 2. O X é o único jeito de fechar. Fica sempre no canto superior direito
      do popup, com área de clique confortável e visível nos dois contrastes
      (usa as variáveis de tema, então acompanha o modo escuro). */
.popup-x {
  position: absolute; top: 10px; right: 12px;
  width: 32px; height: 32px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1;
  background: transparent; color: var(--muted);
  border: 1px solid transparent; border-radius: 8px;
  cursor: pointer; z-index: 3;
}
.popup-x:hover, .popup-x:focus-visible {
  background: var(--panel-alt); color: var(--text); border-color: var(--border);
}
.modal-content, .modal .panel, .ea-modal-box, .modal-etiqueta-box { position: relative; }
.modal-header.popup-tem-x h3, .modal-header.popup-tem-x h2 { padding-right: 44px; }

/* O X que a própria tela já tinha é REAPROVEITADO (popup-padrao.js marca com
   .popup-x--proprio) e só recebe a posição padrão. Antes esses botões eram
   escondidos e um X novo era injetado — quando o script não reconhecia a
   classe do botão da tela, sobravam dois X no mesmo canto, que é o que
   acontecia no popup "Gerenciamento de Setores Organizacionais".
   Os !important existem porque vários desses botões trazem position/top/right
   no atributo style, que só perde para !important. */
.popup-x--proprio {
  position: absolute !important;
  top: 10px !important; right: 12px !important;
  left: auto !important; bottom: auto !important;
  width: 32px !important; height: 32px !important;
  margin: 0 !important; padding: 0 !important;
}

/* 3. Botões que só fechavam (Fechar / Cancelar / Voltar) saem de cena. */
.popup-so-fecha { display: none !important; }

/* 4. Evita scroll desnecessário: o popup cresce com o conteúdo e só ganha
      rolagem quando de fato passa da altura da tela. A barra fica em UM
      lugar só (o corpo), nunca em dois níveis ao mesmo tempo. */
.modal-content, .modal .panel, .ea-modal-box { max-height: min(92vh, 100%); }
.modal-body { overscroll-behavior: contain; }
.modal-body > .table-wrap, .modal-body > .modal-table-wrap { overflow-y: visible; }

/* 5. Alinhamento interno dos campos dentro do popup: rótulo em cima, campo
      embaixo. Em coluna estreita o .form-row padrão (rótulo fixo de 190px,
      lado a lado) quebrava o campo para a linha seguinte e cada um parava
      numa altura diferente. */
.modal .form-row, .ea-modal-overlay .form-row {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 0; margin-bottom: 14px;
}
.modal .form-row > label, .ea-modal-overlay .form-row > label {
  flex: 0 0 auto; min-width: 0; width: 100%;
  margin: 0 0 6px; align-self: stretch;
  font-size: 13px; font-weight: 600; line-height: 1.25;
}

/* ATENÇÃO — este bloco resolve o "campo gigante" dentro do popup.
   A regra base (.form-row > …, mais acima neste arquivo) dá
   "flex: 1 1 320px" a TODO filho da linha, inclusive `div` e `.inline`.
   Numa linha em LINHA, 320px é largura. Aqui a linha virou COLUNA — e em
   coluna o flex-basis passa a valer como ALTURA: cada div virava um bloco de
   320px de altura, que é o que aparecia nos popups de contas a pagar e a
   receber. Por isso a lista abaixo precisa cobrir TODOS os filhos que a regra
   base atinge, não só input/select/textarea.
   E a cadeia de :not() abaixo é repetida INTEIRA de propósito: em CSS cada
   :not([atributo]) soma especificidade, então a regra base vale (0,6,1) para
   um <input>. Uma versão encurtada aqui perderia para ela mesmo estando
   depois no arquivo — foi exatamente o que deixou o campo com 320px de
   altura na primeira tentativa desta correção. */
.modal .form-row > .input,
.modal .form-row > input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),
.modal .form-row > select,
.modal .form-row > textarea,
.modal .form-row > .inline,
.modal .form-row > div,
.ea-modal-overlay .form-row > .input,
.ea-modal-overlay .form-row > input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),
.ea-modal-overlay .form-row > select,
.ea-modal-overlay .form-row > textarea,
.ea-modal-overlay .form-row > .inline,
.ea-modal-overlay .form-row > div {
  flex: 0 0 auto; width: 100%; min-width: 0;
}

/* Campo de uma linha não precisa atravessar um popup largo: 480px é o
   suficiente para data, valor, documento e nome. Textarea e blocos largos
   (câmera, pré-visualização) continuam ocupando tudo. */
.modal .form-row > .input,
.modal .form-row > input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),
.modal .form-row > select,
.ea-modal-overlay .form-row > .input,
.ea-modal-overlay .form-row > input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),
.ea-modal-overlay .form-row > select {
  max-width: 480px;
}
.modal .form-row > textarea,
.modal .form-row > .video-wrap,
.ea-modal-overlay .form-row > textarea { max-width: none; }

/* Campo aninhado dentro de um div da linha: sem isto ele herda o
   "flex: 1 1 320px" da regra base e reaparece o bloco alto. */
.modal .form-row .inline > .input,
.modal .form-row .inline > select,
.modal .form-row div > .input,
.modal .form-row div > select,
.modal .form-row div > input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]) {
  flex: 1 1 auto; min-width: 0;
}

/* Linhas só de botões continuam lado a lado. */
.modal .form-row.form-row-botoes { flex-direction: row; flex-wrap: wrap; align-items: center; }
.modal .form-row > .btn, .modal .form-row > button { flex: 0 0 auto; width: auto; }

@media (max-width: 600px) {
  .modal { padding: 8px; }
  .modal-content, .modal .panel { max-height: 96vh; border-radius: 10px; }
  .modal-header { padding: 12px 14px 8px; }
  .modal-body { padding: 12px 14px; }
  .modal-footer { padding: 10px 14px 14px; }
  .modal-footer .btn { flex: 1 1 auto; text-align: center; }
}

/* ─── 11. APP DIALOG ───────────────────────────────────────────── */
#app-dialog-root {
  position: fixed; inset: 0; z-index: 10000;
  display: none; align-items: center; justify-content: center; padding: 16px;
  pointer-events: none;
}
#app-dialog-root.is-open { display: flex; pointer-events: auto; }
#app-dialog-root.app-dialog-root--locked .app-dialog-backdrop { cursor: default; }
body.app-dialog-open { overflow: hidden; }
.app-dialog-backdrop { position: absolute; inset: 0; background: rgba(17,24,39,0.45); }
.app-dialog {
  position: relative; z-index: 1;
  background: var(--modal-bg);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0,0,0,0.22);
  width: 100%; max-width: 420px; overflow: hidden; font-size: 14px;
}
@media (max-width: 480px) {
  .app-dialog { max-width: 100%; margin: 0 4px; }
}
.app-dialog-header { display:flex;align-items:center;gap:12px;padding:18px 20px 10px; }
.app-dialog-header--success .app-dialog-icon { background:#dcfce7; color:#15803d; }
.app-dialog-header--error   .app-dialog-icon { background:#fee2e2; color:#dc2626; }
.app-dialog-header--info    .app-dialog-icon,
.app-dialog-header--confirm .app-dialog-icon { background:#e0e7ff; color:#1e40af; }
.app-dialog-header--warning .app-dialog-icon { background:#fef3c7; color:#b45309; }
.app-dialog-icon {
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:18px; flex-shrink:0;
}
.app-dialog-title { margin:0; font-size:17px; font-weight:600; color:var(--text); }
.app-dialog-body  { padding:4px 20px 16px; color:var(--text); line-height:1.5; }
.app-dialog-body p { margin:0; }
.app-dialog-message-pre { white-space:pre-wrap; word-break:break-word; }
.app-dialog-footer { padding:0 20px 18px; display:flex; justify-content:flex-end; gap:8px; }
.app-dialog-footer--split { justify-content:stretch; }
.app-dialog-footer--split .btn { flex:1; }

/* ─── 12. AVISOS / BANNERS ──────────────────────────────────────── */
.sistema-aviso-banner {
  background:#eff6ff; border:1px solid #93c5fd; color:#1e3a8a;
  padding:12px 16px; border-radius:8px; margin:0 0 16px; line-height:1.5;
}
.sistema-aviso-banner--login { max-width:720px; margin:16px auto; }
.sistema-manutencao-banner {
  background:#fef3c7; border:1px solid #fbbf24; color:#92400e;
  padding:12px 16px; border-radius:8px; margin:0 0 16px; line-height:1.5; max-width:720px;
}
.sistema-manutencao-banner .small { display:block; margin-top:6px; font-size:12px; opacity:.9; }
.login-error {
  background:#fee2e2; border:1px solid #fca5a5; color:#991b1b;
  padding:10px 12px; border-radius:6px; margin-bottom:12px; font-size:14px;
}
.sistema-status-badge {
  display:inline-block; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:600;
}
.sistema-status-badge--on  { background:#dcfce7; color:#166534; }
.sistema-status-badge--off { background:var(--panel-alt); color:var(--muted); }
.badge { display:inline-block; padding:6px 10px; border-radius:999px; background:#eef2ff; color:#1e3a8a; }

/* dark mode adjustments para banners */
html.dark-mode .sistema-aviso-banner     { background:#1e3050; border-color:#3b6ea8; color:#93c5fd; }
html.dark-mode .sistema-manutencao-banner{ background:#2d2200; border-color:#a16207; color:#fbbf24; }
html.dark-mode .login-error              { background:#3b0f0f; border-color:#dc2626; color:#fca5a5; }
html.dark-mode .badge                    { background:#1e2a4a; color:#93c5fd; }

/* ─── 13. RODAPÉ ────────────────────────────────────────────────── */
.site-footer {
  margin-top: 32px;
  padding: 16px 20px 24px;
  background: linear-gradient(180deg, var(--header-bg-start), var(--header-bg-end));
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}
.site-footer-inner { max-width:1200px; margin:0 auto; text-align:center; }
.site-footer a { color:var(--accent); text-decoration:none; }
.site-footer a:hover { text-decoration:underline; }
.site-footer p { margin:0 0 8px; }
.site-footer p:last-child { margin-bottom:0; }

/* ─── 14. EDITOR DE RODAPÉ ──────────────────────────────────────── */
.footer-editor-wrap { max-width:720px; margin-bottom:12px; }
.footer-editor-wrap .ql-container { min-height:140px; font-family:inherit; font-size:14px; border-bottom-left-radius:8px; border-bottom-right-radius:8px; }
.footer-editor-wrap .ql-toolbar { border-top-left-radius:8px; border-top-right-radius:8px; background:var(--panel-alt); }
.footer-preview-box { max-width:720px; padding:14px 16px; margin-top:8px; border:1px dashed var(--border-strong); border-radius:8px; background:var(--panel-alt); }

/* ─── 15. DASHBOARD / CHARTS ────────────────────────────────────── */
.charts-container { display:flex; flex-wrap:wrap; gap:20px; margin-top:20px; }
.chart-card { flex:1 1 280px; padding:20px; background:var(--panel); border-radius:10px; box-shadow:var(--card-shadow); }
.chart-card-full { flex:1 1 100%; padding:20px; background:var(--panel); border-radius:10px; box-shadow:var(--card-shadow); }
.filter-form { margin-top:20px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.filter-form input { padding:5px 10px; border-radius:5px; border:1px solid var(--border-strong); background:var(--panel); color:var(--text); }
@media (max-width: 600px) {
  .charts-container { gap: 12px; }
  .chart-card, .chart-card-full { padding: 12px; }
  .filter-form { flex-direction:column; align-items:stretch; }
}

/* ─── 16. MONITOR (monitor.php) ─────────────────────────────────────
   Consolidado a partir do bloco <style> que existia inline em
   monitor.php. As variáveis usadas ali (--bg-elevated, --text-color,
   --text-muted, --brand, --brand-contrast, --brand-hover, --focus-ring,
   --bg-hover, --overlay-bg, --muted-contrast, --muted-hover) NÃO
   existem no design system (seção 1) — o navegador ignorava a
   variável e sempre aplicava o valor de fallback fixo, então a tela
   de Monitor nunca respeitava o modo escuro/contraste. Corrigido
   abaixo usando os tokens reais (--panel, --text, --muted, --accent,
   --btn-primary-*, --btn-secondary-*) e o padrão de hover
   `filter: brightness(.92)` já usado no restante do sistema (seção 5). */
.monitor-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:12px; }
.monitor-card {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:14px; margin-bottom:10px;
  background:var(--panel); color:var(--text);
  border:1px solid var(--border-strong); border-radius:var(--radius);
  box-shadow:var(--card-shadow);
}
.monitor-actions .btn { margin-left:6px; }
.filters { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:10px; align-items:flex-end; }

/* Botão de toque — quadrado e grande.
   A portaria opera esta tela num tablet, muitas vezes de luva. O botão padrão
   tem ~32px de altura; o mínimo recomendado para alvo de toque é 44px, e aqui
   vai bem além porque errar o alvo significa registrar saída de quem acabou de
   chegar. O quadrado também separa visualmente os dois botões, que antes
   ficavam colados e pareciam um controle só.

   O seletor é .btn.btn-toque, e não .btn-toque sozinho: a regra base lá em cima
   é ".btn, a.btn, button.btn, input.btn", e o "button.btn" dela tem
   especificidade maior que uma classe só — era ele que impunha o padding de
   14px e o peso 500 aqui dentro, espremendo o texto em 64px úteis e cortando
   "Encaminhado" no meio.

   A medida de 118px vem do texto: "Encaminhado" em negrito de 14px ocupa ~92px,
   e sobram 102px úteis (118 menos os 8px de padding de cada lado) — folga de
   ~11% para a fonte do Windows renderizar um pouco mais larga que a daqui. */
.btn.btn-toque {
  width:118px; height:118px; padding:8px; flex:0 0 auto;
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; text-align:center; line-height:1.15;
  font-size:14px; font-weight:700; border-radius:12px;
  /* Rede de segurança: se numa máquina a fonte vier ainda mais larga, a palavra
     quebra em duas linhas em vez de ser cortada. Cortar esconde informação em
     silêncio; quebrar só fica feio. */
  white-space:normal; overflow-wrap:anywhere; hyphens:auto;
}
/* O disabled precisa ser visível à distância: num telão de portaria o
   opacity padrão de .btn:disabled some. */
.btn.btn-toque:disabled { opacity:.38; }
.monitor-actions .btn.btn-toque { margin-left:0; }
.monitor-actions { gap:12px; }

@media (max-width: 480px) {
  /* Na tela do celular os dois botões dividem a largura em vez de encolher:
     continuam sendo alvos grandes, e a linha não quebra no meio. */
  .btn.btn-toque { width:auto; flex:1 1 0; min-width:118px; height:104px; }
}

/* Filtro padrão por usuário.
   Fica na mesma linha dos selects, mas separado por uma borda à esquerda para
   deixar claro que são controles SOBRE o filtro, não mais um filtro. */
.filtro-padrao {
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  padding-left:12px; margin-left:4px;
  border-left:1px solid var(--border);
}
.filtro-padrao-aviso {
  font-size:12px; color:var(--muted); line-height:1.3;
  flex:1 1 auto; min-width:0;
}
@media (max-width: 640px) {
  /* Espremido, o bloco vira uma linha própria e perde a borda lateral, que
     nessa largura só confunde. */
  .filtro-padrao {
    flex:1 1 100%; padding-left:0; margin-left:0; border-left:0;
    padding-top:8px; border-top:1px solid var(--border);
  }
}

/* Botão flutuante de leitura de código de barras/QR e submenu de opções */
.btn-flutuante-wrapper { position:fixed; bottom:25px; right:25px; display:flex; gap:12px; z-index:1000; }
.menu-flutuante-container { position:relative; display:inline-block; }
.btn-flutuante {
  width:60px; height:60px; border:none; border-radius:50%; flex-shrink:0;
  background-color:var(--btn-primary-bg); color:var(--btn-primary-text);
  box-shadow:0 4px 8px rgba(0,0,0,.3); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s, filter .2s;
}
.btn-flutuante:hover, .btn-flutuante:focus-visible { transform:scale(1.05); filter:brightness(.92); }
.btn-flutuante:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }

.submenu-barras {
  display:none; position:absolute; bottom:70px; right:0; min-width:190px; overflow:hidden;
  background:var(--panel); border:1px solid var(--border-strong); border-radius:8px;
  box-shadow:0 4px 12px rgba(0,0,0,.15); z-index:1002;
  animation:fadeInSubmenu .2s ease-out;
}
@keyframes fadeInSubmenu { from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }
.submenu-barras.active { display:block; }
.submenu-barras button {
  width:100%; padding:12px 16px; border:none; background:transparent; color:var(--text);
  text-align:left; font-size:14px; cursor:pointer; display:flex; align-items:center; gap:8px;
  transition:background .2s;
}
.submenu-barras button:hover, .submenu-barras button:focus-visible { background:var(--panel-alt); }

/* Modal de bipagem (leitor USB / câmera) */
.modal-barcode {
  display:none; position:fixed; inset:0; background-color:rgba(0,0,0,.5);
  z-index:1001; align-items:center; justify-content:center; padding:16px; box-sizing:border-box;
}
.modal-content-barcode {
  background:var(--modal-bg); color:var(--text); padding:25px; border-radius:8px;
  max-width:400px; width:85%; text-align:center; box-shadow:0 4px 15px rgba(0,0,0,.2);
  box-sizing:border-box; max-height:90vh; overflow-y:auto;
}
.modal-content-barcode h3 { margin:0 0 10px; color:var(--text); }
.modal-content-barcode form { margin:0; padding:0; width:100%; }
.modal-content-barcode input {
  width:100%; max-width:280px; padding:12px; margin:20px auto; font-size:20px; text-align:center;
  border:2px solid var(--accent); border-radius:6px; box-sizing:border-box; display:block;
  background:var(--panel); color:var(--text);
}
.modal-close-btn {
  background:var(--btn-secondary-bg); color:var(--btn-secondary-text); border:1px solid var(--btn-secondary-border);
  padding:10px 20px; border-radius:4px; cursor:pointer; font-size:14px; margin-top:10px;
}
.modal-close-btn:hover, .modal-close-btn:focus-visible { filter:brightness(.92); }

@media (max-width: 768px) {
  .filters { flex-direction:column; align-items:flex-start; gap:10px; }
  .monitor-card { align-items:flex-start; }
  .monitor-actions { margin-left:0 !important; width:100%; }
  .monitor-actions .btn { margin-left:0; }
}
@media (max-width: 480px) {
  .btn-flutuante-wrapper { bottom:14px; right:14px; gap:10px; }
  .btn-flutuante { width:50px; height:50px; }
  .btn-flutuante svg { width:26px; height:26px; }
  .modal-content-barcode { padding:18px; width:92%; }
  .modal-content-barcode input { font-size:18px; }
  .submenu-barras { bottom:60px; min-width:160px; }
}

/* ─── 17. ETIQUETA EDITOR ───────────────────────────────────────── */
#etiqueta-preview-wrap { background:var(--panel-alt); border:1px dashed var(--border-strong); border-radius:8px; padding:16px; overflow:auto; }
.etiqueta-el { position:absolute; border:1px dashed transparent; padding:2px 4px; box-sizing:border-box; cursor:move; user-select:none; line-height:1.2; overflow:hidden; }
#etiqueta-props .form-row { margin-bottom:8px; }

/* ─── 18. PDF MODAL ─────────────────────────────────────────────── */
/* O visual do popup está na seção 38, por classe (.pdf-modal / .pdf-modal-
   painel). O que existia aqui era o bloco antigo, por id, de quando o popup
   era aberto com style.display='flex' no JS. O "#pdfModal { display:none }"
   daquele bloco tinha especificidade de id e vencia o ".pdf-modal
   { display:flex }" da seção 38: o popup nunca aparecia e, sem ele, nenhum
   PDF era gerado. Sobra só o fechamento por atributo, para o caso de alguma
   tela ainda montar o popup sem a classe. */
#pdfModal[hidden] { display: none !important; }

/* ─── 19. UTILITÁRIOS ───────────────────────────────────────────── */
.filter-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.modal .panel .btn, .modal .modal-content .btn { margin:6px 8px; }

/* Botão circular "i" de legenda (ex.: cores da tabela de Gestão de Requisições) */
.btn-legenda-cores {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  background: var(--panel);
  color: var(--muted);
  font-size: 13px;
  font-style: italic;
  font-weight: 700;
  font-family: Georgia, "Times New Roman", serif;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  line-height: 1;
  transition: background .15s, color .15s;
}
.btn-legenda-cores:hover, .btn-legenda-cores:focus-visible { background: var(--panel-alt); color: var(--text); }

/* Legenda de cores dentro do modal (bolinha de cor + descrição) */
.legenda-cores-lista { display: flex; flex-direction: column; gap: 12px; }
.legenda-cores-item { display: flex; align-items: flex-start; gap: 12px; }
.legenda-cores-swatch {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 5px;
  border: 1px solid var(--border-strong); margin-top: 2px;
}
.legenda-cores-item strong { display: block; font-size: 14px; color: var(--text); }
.legenda-cores-item span { font-size: 13px; color: var(--muted); }

/* Headings e parágrafos herdam cor */
h1,h2,h3,h4,h5,h6 { color: var(--text); }
p { color: var(--text); }
label { color: var(--text); }

/* ─── 20. LOGIN ─────────────────────────────────────────────────── */
.login-captcha-row { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:4px; }
.login-captcha-row img { border:1px solid var(--border-strong); border-radius:8px; width:140px; height:44px; display:block; background:var(--panel-alt); }
.login-captcha-row .input { max-width:140px; letter-spacing:.12em; text-transform:uppercase; }
@media (max-width:480px) {
  .login-captcha-row { flex-direction:column; align-items:flex-start; }
}
/* ─── 21. DROPDOWNS DO MENU PRINCIPAL (abertura por clique) ──────
   IMPORTANTE — por que NÃO usamos :hover para abrir:
   O comportamento antigo (`.menu-dropdown:hover .dropdown-items`) só
   funciona com um mouse "de verdade", parado sobre o elemento. Ele quebra em:
     • telas de toque / notebooks com touchscreen — o toque gera um :hover
       falso que some assim que o dedo se move, fechando a caixa antes do
       clique registrar;
     • navegação com zoom do navegador, onde o ponteiro "pula" pixels;
     • trackpads com toque acidental;
     • teclado e leitores de tela, que não têm hover nenhum.
   Em todos esses casos o resultado é exatamente o problema relatado: a caixa
   fecha no meio do caminho e o clique cai no elemento de trás — a segunda
   linha de botões do menu. A abertura passa a ser por CLIQUE (classe
   .is-open aplicada via JS), que é determinística: a caixa só fecha quando o
   usuário fecha. O hover continua existindo apenas como conveniência para
   TROCAR de categoria depois que o menu já foi aberto no clique. */
.menu-dropdown {
  position: relative;
  display: inline-block;
}

/* A categoria aberta sobe de camada: garante que a caixa fique acima das
   linhas de baixo do próprio menu quando ele quebra em 2+ linhas, para que
   nenhum clique atravesse para o botão que está atrás. */
.menu-dropdown.is-open {
  z-index: 1200;
}

/* Botão de categoria: pílula discreta (em vez do azul sólido do .btn
   padrão), para não competir visualmente com ações reais como "Sair" */
.menu-dropdown .dropdown-toggle {
  background: transparent !important;
  color: var(--text) !important;
  border: 1px solid transparent !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  font-weight: 500;
  font-size: 14px;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.menu-dropdown .dropdown-toggle:hover,
.menu-dropdown .dropdown-toggle:focus-visible,
.menu-dropdown.is-open .dropdown-toggle {
  background: var(--panel-alt) !important;
  border-color: var(--border) !important;
  color: var(--accent) !important;
}

.menu-dropdown .dropdown-toggle .arrow {
  font-size: 10px;
  margin-left: 6px;
  display: inline-block;
  opacity: .6;
  transition: transform 0.25s ease;
}

/* Caixa das subopções.
   Fechada: invisível E inerte (visibility:hidden + pointer-events:none), para
   nunca interceptar um clique destinado ao conteúdo da página.
   Aberta: tamanho final imediato — só opacidade e um leve deslize animam.
   Nada de animar max-height: isso fazia a caixa "crescer" por ~250ms e o
   cursor chegava ao subitem antes de a caixa existir ali. */
.menu-dropdown .dropdown-items {
  position: absolute;
  top: calc(100% + 6px);      /* Abre logo abaixo do botão */
  left: 0;
  max-height: min(380px, 70vh);
  overflow-y: auto;
  overscroll-behavior: contain; /* rolar dentro da caixa não rola a página */
  background-color: var(--panel);
  min-width: 230px;
  box-shadow: var(--card-shadow);
  border: 1px solid transparent;
  border-radius: 12px;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease,
              border-color .16s ease, visibility 0s linear .16s;
}

/* Estado aberto — o MESMO em desktop e mobile, controlado pelo JS. */
.menu-dropdown.is-open > .dropdown-items {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  border-color: var(--border);
  transition: opacity .16s ease, transform .16s ease,
              border-color .16s ease, visibility 0s;
}

.menu-dropdown.is-open .dropdown-toggle .arrow {
  transform: rotate(180deg);
  opacity: 1;
}

/* Quando a caixa ficaria para fora da borda direita da janela, o JS marca a
   categoria com .align-right e ela passa a alinhar pela direita do botão. */
.menu-dropdown.align-right > .dropdown-items {
  left: auto;
  right: 0;
}

/* A "ponte" do HTML antigo não é mais usada. */
.menu-dropdown .dropdown-bridge {
  display: none;
}

/* Ponte do vão de 6px entre o botão e a caixa.

   Sem ela, quem está atrás desse vão quando o menu quebra em duas linhas é
   o botão de categoria da linha de baixo. Ao descer o ponteiro para escolher
   um subitem, ele cruzava o vão, entrava no botão de trás e a caixa aberta
   era trocada — o usuário via a caixa "fechar sozinha" antes do clique.

   A faixa é invisível, pertence à categoria aberta (que está em z-index
   1200) e cobre a largura da caixa, não só a do botão, para o trajeto
   diagonal também ficar protegido. */
.menu-dropdown.is-open::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: max(100%, 230px);
  height: 8px;
}
.menu-dropdown.is-open.align-right::after {
  left: auto;
  right: 0;
}

@media (prefers-reduced-motion: reduce) {
  .menu-dropdown .dropdown-items { transition: none; transform: none; }
  .menu-dropdown.is-open > .dropdown-items { transform: none; }
}

/* Links internos do Dropdown */
.menu-dropdown .dropdown-items a {
  color: var(--text);
  padding: 10px 14px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.15s, color 0.15s;
  white-space: nowrap;
  display: block;
  border-radius: 8px;
}

.menu-dropdown .dropdown-items a:hover {
  background-color: var(--table-row-hover);
  color: var(--accent);
}

/* ── Responsivo ≤ 768px: a caixa deixa de flutuar e vira um acordeão em
   fluxo normal, empurrando o resto do menu para baixo. Como não flutua sobre
   nada, é impossível um clique atravessar para o item de trás. O estado
   continua sendo o mesmo .is-open do desktop. ── */
@media (max-width: 768px) {
  .menu-dropdown {
    width: 100%;
  }
  .menu-dropdown .dropdown-toggle {
    width: 100%;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .menu-dropdown .dropdown-items,
  .menu-dropdown.align-right > .dropdown-items {
    position: relative;
    top: 0;
    left: 0;
    right: auto;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    box-shadow: none;
    border: none;
    border-left: 2px solid var(--border-strong);
    border-radius: 0;
    background: transparent;
    padding: 0 0 0 10px;
    transform: none;
    transition: max-height .22s ease-out, padding .18s ease, opacity .18s ease;
  }
  .menu-dropdown.is-open > .dropdown-items {
    max-height: 70vh;
    overflow-y: auto;
    padding-top: 4px;
    padding-bottom: 4px;
    border-color: var(--border-strong);
  }
}

/* ─── 22. GESTÃO DE REQUISIÇÕES (ALMOXARIFADO) ──────────────────── */
/* Migrado do <style> embutido em almoxarifado/gestao_requisicoes.php
   para centralizar toda a folha de estilos do sistema neste arquivo. */
  /* Timelines de auditoria interna baseados na paleta do Tema */
  .log-timeline { 
      max-height: 130px; 
      overflow-y: auto; 
      font-size: 12px; 
      background: var(--panel-alt); 
      padding: 8px; 
      border-radius: 6px;
      border: 1px solid var(--border);
  }
  .log-item {
      padding: 4px 0;
      border-bottom: 1px dashed var(--border);
  }
  .log-item:last-child { border-bottom: none; }

  /* Ajustes finos de inputs dentro de grids de formulários nativos do style.css */
  .form-grid-4 {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
      gap: 14px;
      margin-bottom: 12px;
  }
  .form-group-custom {
      display: flex;
      flex-direction: column;
      gap: 5px;
  }
  .form-group-custom label {
      font-size: 13px;
      font-weight: 600;
      color: var(--muted);
  }
  .form-group-custom .input {
      width: 100%;
      min-width: 0;
  }
  .actions-row-right {
      display: flex;
      justify-content: flex-end;
      margin-top: 10px;
  }

  /* Evita quebras absurdas e vazamentos na tabela de gerenciamento */
  .table td select.form-control-sm {
      padding: 4px 6px;
      font-size: 13px;
      border-radius: 6px;
      border: 1px solid var(--border-strong);
      background: var(--panel);
      color: var(--text);
      max-width: 100%;
  }
  .td-left-aligned { text-align: left !important; }
  .td-center-aligned { text-align: center !important; }

  /* Estilizações para Foto do Produto e Quebra de Linha do Fornecedor */
  .img-produto-preview {
      width: 45px;
      height: 45px;
      object-fit: cover;
      border-radius: 4px;
      cursor: pointer;
      border: 1px solid var(--border);
      transition: opacity 0.2s;
  }
  .img-produto-preview:hover {
      opacity: 0.8;
  }
  .celula-quebra-texto {
      word-wrap: break-word;
      white-space: normal !important;
      word-break: break-all;
      max-width: 220px;
  }

  /* Campo de busca de fornecedor por CPF/CNPJ (AJAX) */
  .fornecedor-busca-wrap {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 160px;
  }
  .fornecedor-nome-atual {
      font-size: 12px;
      font-weight: 600;
      color: var(--text);
      word-break: break-word;
  }
  .fornecedor-busca-input {
      width: 100%;
  }
  .fornecedor-resultados {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      z-index: 20;
      background: var(--panel);
      border: 1px solid var(--border-strong);
      border-radius: 6px;
      max-height: 180px;
      overflow-y: auto;
      box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  }
  .fornecedor-resultado-item {
      padding: 6px 8px;
      font-size: 12px;
      cursor: pointer;
      border-bottom: 1px dashed var(--border);
  }
  .fornecedor-resultado-item:last-child { border-bottom: none; }
  .fornecedor-resultado-item:hover { background: var(--panel-alt); }
  .fornecedor-resultado-vazio {
      cursor: default;
      color: var(--muted);
      font-style: italic;
  }
  .fornecedor-limpar-btn {
      font-size: 11px !important;
      padding: 2px 6px !important;
      margin: 0 !important;
      align-self: flex-start;
  }

  /* Botões minimalistas da coluna "Mais Detalhes" */
  .wrap-mais-detalhes {
      display: flex;
      gap: 6px;
      justify-content: center;
      align-items: center;
  }
  .btn-detalhe-info, .btn-detalhe-alerta {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      border: 1px solid var(--border-strong);
      background: var(--panel);
      color: var(--text);
      font-size: 12px;
      font-weight: 700;
      line-height: 1;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      transition: all 0.15s ease;
  }
  .btn-detalhe-info:hover {
      background: var(--accent);
      color: #fff;
      border-color: var(--accent);
  }
  .btn-detalhe-alerta {
      color: #fff;
      background: var(--btn-danger-bg, #dc3545);
      border-color: var(--btn-danger-bg, #dc3545);
  }
  .btn-detalhe-alerta:hover {
      opacity: 0.85;
  }

  /* Popup de histórico de logs: exibe 3 linhas e libera scroll acima disso */
  .logs-popup-scroll {
      max-height: 118px;
      overflow-y: auto;
      border: 1px solid var(--border);
      border-radius: 6px;
  }
  .table-logs-popup {
      width: 100%;
      border-collapse: collapse;
      font-size: 12px;
  }
  .table-logs-popup th {
      position: sticky;
      top: 0;
      background: var(--table-head-bg);
      padding: 6px 8px;
      text-align: left;
      border-bottom: 1px solid var(--border-strong);
  }
  .table-logs-popup td {
      padding: 6px 8px;
      border-bottom: 1px dashed var(--border);
  }
  .table-logs-popup tbody tr:last-child td {
      border-bottom: none;
  }

  /* Popup de problema reportado */
  .problema-registro-bloco {
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 10px 12px;
      margin-bottom: 10px;
      background: var(--panel-alt);
  }
  .problema-registro-bloco:last-child { margin-bottom: 0; }
  .problema-registro-header {
      font-size: 12px;
      color: var(--muted);
      margin-bottom: 6px;
  }
  .problema-registro-obs {
      font-size: 13px;
      margin-bottom: 10px;
      white-space: pre-wrap;
  }
  .problema-fotos-wrap {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
  }
  .img-problema-thumb {
      width: 60px;
      height: 60px;
      object-fit: cover;
      border-radius: 6px;
      cursor: pointer;
      border: 1px solid var(--border);
      transition: opacity 0.2s;
  }
  .img-problema-thumb:hover { opacity: 0.8; }
  .btn-excluir-problema {
      margin-top: 4px !important;
  }

  /* Destaque temporário da linha do item ao chegar via "Revisar" no popup de alertas */
  @keyframes destaquePiscaProblema {
      0%, 100% { background: rgba(220, 53, 69, 0.28); }
      50% { background: rgba(220, 53, 69, 0.08); }
  }
  #corpoItensGestao tr.linha-destaque-problema {
      animation: destaquePiscaProblema 1s ease-in-out 3;
  }

  /* Popup de alertas de pedidos entregues com problema reportado */
  .table-alertas-problema {
      width: 100%;
      border-collapse: collapse;
      font-size: 12px;
  }
  .table-alertas-problema th {
      position: sticky;
      top: 0;
      background: var(--table-head-bg);
      padding: 6px 8px;
      text-align: left;
      border-bottom: 1px solid var(--border-strong);
  }
  .table-alertas-problema td {
      padding: 6px 8px;
      border-bottom: 1px dashed var(--border);
      vertical-align: top;
  }
  .table-alertas-problema tbody tr:last-child td { border-bottom: none; }
  .alertas-problema-scroll {
      max-height: 360px;
      overflow-y: auto;
      border: 1px solid var(--border);
      border-radius: 6px;
  }

  /* Popup de resultados de busca de fornecedor (evita clipping dentro de tabelas com scroll) */
  .resultados-fornecedor-popup-scroll {
      max-height: 320px;
      overflow-y: auto;
  }

  /* Painel de visualização financeira / aprovação */
  .input-valor-unitario, .input-valor-frete {
      width: 100px;
      text-align: right;
      padding: 4px 6px;
      font-size: 13px;
      border-radius: 6px;
      border: 1px solid var(--border-strong);
      background: var(--panel);
      color: var(--text);
  }
  .resumo-financeiro-requisicao {
      margin-top: 16px;
      padding: 14px 18px;
      background: var(--panel-alt);
      border: 1px solid var(--border);
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      max-width: 360px;
      margin-left: auto;
  }
  .resumo-financeiro-linha {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      font-size: 13px;
      color: var(--muted);
  }
  .resumo-financeiro-linha strong { color: var(--text); }
  .resumo-financeiro-linha-destaque {
      border-top: 1px solid var(--border-strong);
      padding-top: 8px;
      font-size: 14px;
  }
  .resumo-financeiro-linha-destaque span, .resumo-financeiro-linha-destaque strong {
      color: var(--accent);
      font-weight: 700;
  }
  .acao-coluna-empilhada {
      display: flex;
      flex-direction: column;
      gap: 6px;
      align-items: stretch;
  }

  /* Cores das linhas da tabela de Gestão de Requisições, conforme prazo/urgência/status dos itens */
  #corpoTabelaGestao tr.linha-branca { background: var(--panel); }
  #corpoTabelaGestao tr.linha-amarela { background: rgba(255, 221, 87, 0.28); }
  #corpoTabelaGestao tr.linha-laranja { background: rgba(255, 152, 60, 0.25); }
  #corpoTabelaGestao tr.linha-vermelha { background: rgba(220, 53, 69, 0.18); }
  #corpoTabelaGestao tr.linha-verde { background: rgba(40, 167, 69, 0.18); }
  #corpoTabelaGestao tr.linha-amarela:hover,
  #corpoTabelaGestao tr.linha-laranja:hover,
  #corpoTabelaGestao tr.linha-vermelha:hover,
  #corpoTabelaGestao tr.linha-verde:hover { filter: brightness(0.96); }

  .badge-status-entrega {
      display: inline-block;
      padding: 4px 10px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 600;
  }
  .badge-entrega-parcial { background: rgba(255, 152, 60, 0.25); color: #b35400; }
  .badge-entrega-total { background: rgba(40, 167, 69, 0.22); color: #1e7e34; }
  .input-qtd-entrega {
      width: 100%;
      text-align: right;
      padding: 4px 6px;
      font-size: 13px;
      border-radius: 6px;
      border: 1px solid var(--border-strong);
      background: var(--panel);
      color: var(--text);
      margin-bottom: 6px;
  }

/* ─── 22.1 GESTÃO DE REQUISIÇÕES: botão flutuante da fila de impressão e
   componentes que ainda estavam num <style> da própria tela. Migrado para
   cá; as cores fixas viraram variáveis do tema. ──────────────────────── */
.fab-fila-impressao {
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--btn-primary-bg, var(--accent, #2f6fed));
    color: var(--panel);
    border: none;
    box-shadow: 0 4px 14px rgba(0,0,0,0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1000;
    padding: 0;
    transition: transform .15s ease, box-shadow .15s ease;
}
.fab-fila-impressao:hover {
    transform: scale(1.06);
    box-shadow: 0 6px 18px rgba(0,0,0,0.34);
}
.fab-fila-impressao svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.fab-fila-impressao .fab-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    border-radius: 50%;
    background: var(--btn-danger-bg, #dc3545);
    color: var(--panel);
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--panel);
    display: none;
}
@media (max-width: 640px) {
    .fab-fila-impressao { right: 16px; bottom: 16px; width: 52px; height: 52px; }
}

/* -------------------------------------------------------------------------
   AJUSTE DO WIDGET DE MULTISSELEÇÃO (.multiselect-option) NESTA PÁGINA
   ---------------------------------------------------------------------
   Quando o texto de uma opção quebra em duas linhas, o checkbox encolhia e
   ficava desalinhado (o flex do label espremia o <input> junto com o <span>
   de texto). As regras abaixo fixam o tamanho do checkbox (evitando que o
   flex o encolha) e alinham o topo do checkbox com a primeira linha do
   texto, deixando o padrão igual ao das opções de uma única linha.
------------------------------------------------------------------------- */
.multiselect-option {
    align-items: flex-start !important;
}
.multiselect-option input[type="checkbox"] {
    flex: 0 0 auto !important;
    width: 14px !important;
    height: 14px !important;
    margin-top: 3px !important;
}

/* O input de busca herdava min-width/padding da classe genérica ".input" (usada em
   filtros de largura maior), fazendo-o ultrapassar a largura do painel do multiselect,
   que costuma ser mais estreito (largura do botão de toggle). Força o campo a ocupar
   exatamente 100% da largura interna do painel, sem vazar para fora dele. */
.multiselect-panel {
    box-sizing: border-box !important;
    overflow: hidden !important;
}
.multiselect-panel .multiselect-search {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}

/* ─── 23. APROVAÇÃO DE REQUISIÇÕES (ALMOXARIFADO) ───────────────── */
/* Migrado do <style> embutido em almoxarifado/aprovacao_requisicoes.php
   para centralizar toda a folha de estilos do sistema neste arquivo. */

  /* Filtros de pesquisa */
  .filtros-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
      gap: 1.5rem 1.75rem;
  }
  .filtros-grid .campo {
      display: flex;
      flex-direction: column;
      gap: .4rem;
  }
  .filtros-acoes {
      display: flex;
      justify-content: flex-end;
      gap: .75rem;
      margin-top: 1.75rem;
      padding-top: 1.25rem;
      border-top: 1px solid var(--border);
  }

  /* Cards de item enviado para aprovação */
  /* Cores do selo de prazo e dos valores destacados. Antes vinham de classes
     do Bootstrap (bg-success, text-danger…), que este projeto não carrega. */
  .badge-prazo--ok        { background: rgba(21,128,61,.12);  color: var(--btn-success-bg); }
  .badge-prazo--danger    { background: rgba(220,38,38,.12);  color: var(--btn-danger-bg); }
  .badge-prazo--info      { background: rgba(37,99,235,.12);  color: #2563eb; }
  .badge-prazo--secondary { background: var(--panel-alt);     color: var(--muted); }
  .item-detail-value--total     { color: var(--btn-success-bg); }
  .item-detail-value--danger    { color: var(--btn-danger-bg); }
  .item-detail-value--info      { color: #2563eb; }
  .item-detail-value--secondary { color: var(--muted); }

  /* Rodapé do campo de observação do popup de status. */
  .aprov-obs-rodape { display: flex; justify-content: space-between; gap: 10px; margin-top: 4px; }
  .aprov-obs-aviso  { color: var(--btn-danger-bg); }

  .item-card { border-left: 4px solid var(--border-strong); }
  .item-card.vencido { border-left-color: var(--btn-danger-bg); }
  .item-card.aprovado { border-left-color: var(--btn-success-bg); }
  .item-card .card-body { padding: 1.5rem; }

  .item-card-layout {
      display: grid;
      grid-template-columns: 100px 1fr;
      gap: 1.75rem;
      align-items: start;
  }
  @media (max-width: 480px) {
      .item-card-layout { grid-template-columns: 1fr; }
  }

  .item-foto, .item-foto-placeholder {
      width: 100px;
      height: 100px;
      border-radius: .5rem;
  }
  .item-foto { object-fit: cover; border: 1px solid var(--border); }
  .item-foto-placeholder {
      border: 1px dashed var(--border-strong);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .7rem;
      color: var(--muted);
      text-align: center;
  }

  .item-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: .75rem;
      margin-bottom: 1rem;
  }
  .item-header .item-origem { color: var(--muted); }
  .badge-prazo { font-size: .75rem; padding: .4rem .7rem; }

  .item-descricao { margin-bottom: 1rem; line-height: 1.5; }

  .item-fornecedor {
      background: var(--panel-alt);
      border: 1px solid var(--border);
      border-radius: .4rem;
      padding: .6rem .9rem;
      margin-bottom: 1.25rem;
      display: inline-block;
  }
  .item-fornecedor-nome { font-weight: 600; font-size: .9rem; }
  .item-fornecedor-doc { font-weight: 700; font-size: .72rem; color: var(--muted); }

  .item-details-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: 1.25rem 2rem;
      margin-bottom: 1.5rem;
  }
  .item-detail-label {
      font-size: .7rem;
      text-transform: uppercase;
      letter-spacing: .04em;
      color: var(--muted);
      margin-bottom: .25rem;
  }
  .item-detail-value { font-weight: 600; font-size: .95rem; }

  .item-actions-row {
      display: flex;
      flex-wrap: wrap;
      gap: .75rem;
      align-items: center;
      padding-top: 1.25rem;
      border-top: 1px solid var(--border);
  }
  .item-actions-row .btn { min-width: 150px; }

  /* Lançamentos do usuário logado para o item */
  .meus-lancamentos {
      margin-top: 1.25rem;
      padding: .75rem 1rem;
      background: rgba(255, 193, 7, 0.12);
      border: 1px solid rgba(255, 193, 7, 0.35);
      border-radius: .4rem;
  }
  .meus-lancamentos-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: .5rem;
      margin-bottom: .5rem;
  }
  .meus-lancamentos-titulo {
      font-size: .78rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .03em;
      color: var(--muted);
  }
  .meus-lancamentos-lista {
      list-style: none;
      padding: 0;
      margin: 0;
      font-size: .82rem;
      color: var(--muted);
  }
  .meus-lancamentos-lista li {
      padding: .2rem 0;
      display: flex;
      justify-content: space-between;
      gap: .75rem;
      flex-wrap: wrap;
  }
  .meus-lancamentos-lista li + li { border-top: 1px dashed var(--border); }
  .meus-lancamentos-vazio {
      font-size: .82rem;
      color: var(--muted);
      font-style: italic;
  }

  /* Modal de histórico completo do item */
  #tabelaHistoricoItem td, #tabelaHistoricoItem th { font-size: .85rem; }

  /* Ajustes complementares ao padrão de modal já definido na seção 10
     (.modal / .modal-content / .modal-header / .modal-body / .modal-footer / .is-open) */
  #modalSelecionarStatus .modal-content { max-width: 460px; }
  #modalSelecionarStatusSelect { width: 100%; margin: 0; }
  .js-hidden { display: none !important; }
  .texto-central-muted { text-align: center; color: var(--muted); margin: 12px 0; }
/* ─── 24. REQUISIÇÕES DE MATERIAIS – PORTAL DO SOLICITANTE (ALMOXARIFADO) ── */
/* Migrado do <style> embutido em almoxarifado/requisicoes.php para
   centralizar toda a folha de estilos do sistema neste arquivo.
   OBS: .form-grid-4 / .form-group-custom / .actions-row-right /
   .td-left-aligned / .td-center-aligned já existem na seção 22 e por isso
   NÃO foram duplicados aqui — o bloco inline original redefinia essas
   mesmas classes com valores levemente diferentes (bug de especificidade
   dependente da ordem de carregamento); a versão da seção 22 passou a ser
   a única fonte de verdade. */
  .secao-itens-container {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 16px;
      box-sizing: border-box;
  }
  .modal-form-row {
      display: grid;
      grid-template-columns: 110px 140px 1fr;
      gap: 12px;
      margin-bottom: 12px;
      width: 100%;
  }
  .modal-form-row-two {
      display: grid;
      grid-template-columns: 240px 1fr;
      gap: 12px;
      margin-bottom: 12px;
      width: 100%;
  }
  @media(max-width: 768px) {
      .form-grid-4, .modal-form-row, .modal-form-row-two { grid-template-columns: 1fr; }
  }

  /* Grid para deixar dois botões em cima e dois embaixo (ações em lote) */
  .grid-gerenciar-botoes {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4px;
      width: 250px;
      margin: 0 auto;
  }

  /* Melhoria visual da tabela contra textos extremamente longos */
  .td-texto-longo {
      max-width: 220px;
      white-space: normal;
      word-wrap: break-word;
      word-break: break-word;
  }
  .btn-link-tabela {
      display: inline-block;
      padding: 4px 8px;
      background-color: var(--accent);
      color: #fff !important;
      text-decoration: none;
      border-radius: 4px;
      font-size: 11px;
      font-weight: bold;
      text-align: center;
  }
  .btn-link-tabela:hover {
      filter: brightness(0.9);
  }

  /* Estilos de seleção coletiva em lote */
  .linha-selecionavel {
      cursor: pointer;
      transition: background 0.15s ease;
  }
  .linha-selecionavel:hover {
      background-color: rgba(2, 132, 199, 0.05) !important;
  }
  .linha-selecionada {
      background-color: rgba(2, 132, 199, 0.12) !important;
      border-left: 3px solid var(--accent) !important;
  }
  .panel-acoes-lote {
      background: var(--panel-alt);
      border: 1px dashed var(--accent);
      padding: 14px;
      border-radius: 8px;
      margin-bottom: 4px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
  }

  /* Destaque de linhas do histórico de requisições por condição dos itens.
     O fundo é o próprio sinal, então continua claro nos dois temas — mas o
     texto precisa vir fixo em escuro: no modo contraste ele herdava a cor
     clara do tema e sumia dentro da faixa. */
  tr.linha-cor-laranja > td,
  tr.linha-cor-amarelo > td,
  tr.linha-cor-verde   > td { color: #1f2937 !important; }
  tr.linha-cor-laranja > td { background-color: #ffe3bf !important; }
  tr.linha-cor-amarelo > td { background-color: #fff3b0 !important; }
  tr.linha-cor-verde   > td { background-color: #cdf2dd !important; }
  tr.linha-cor-laranja > td a, tr.linha-cor-amarelo > td a, tr.linha-cor-verde > td a,
  tr.linha-cor-laranja > td strong, tr.linha-cor-amarelo > td strong,
  tr.linha-cor-verde > td strong { color: inherit; }

  /* Estado atual do item + botão de histórico */
  .celula-estado-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
  }
  .btn-ver-historico {
      padding: 2px 6px !important;
      font-size: 10px !important;
      margin: 0 !important;
      line-height: 1.4;
  }

  /* Tabela de histórico de status (scroll a partir de 3 linhas) */
  .tabela-historico-status-wrap {
      max-height: 150px;
      overflow-y: auto;
      border: 1px solid var(--border);
      border-radius: 6px;
  }

  /* Popup de confirmação de recebimento pendente */
  .linha-popup-confirmacao {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      padding: 10px;
      border-bottom: 1px solid var(--border);
      flex-wrap: wrap;
  }
  .linha-popup-confirmacao:last-child { border-bottom: 0; }
/* ─── LIBERAÇÃO DE ACESSO - EVENTOS ────────────────────────────────
   Movido de dentro de liberacao_acesso.php (estava em <style> inline).
   Regras já cobertas de forma genérica pelo design system (.card,
   .modal, .modal-content, .table-responsive) NÃO foram duplicadas aqui;
   apenas o que é específico desta tela permanece. ────────────────── */

input.valid { border: 2px solid var(--success, green); }
input.invalid { border: 2px solid var(--danger, red); }

/* Modais desta tela (Vincular Participante, Listar/Remover Pessoas,
   Check-in, Importar CSV) não usam a estrutura .modal-header/.modal-body/
   .modal-footer que o .modal-content genérico (acima, seção 10) pressupõe
   — aquele não tem padding próprio, ele conta com os filhos pra isso.
   Sem essa estrutura, o conteúdo ficava colado nas bordas e cortado pelo
   overflow:hidden. Restauramos aqui padding, arredondamento e rolagem
   interna, escopados só nestes IDs pra não afetar outras telas que usam
   .modal-content junto com a estrutura header/body/footer padrão. */
#modal-adicionar .modal-content,
#modal-excluir .modal-content,
#modal-entrada .modal-content,
#modal-importar-csv .modal-content {
    display: block;
    padding: 20px;
    border-radius: 10px;
    max-height: 85vh;
    overflow-y: auto;
}

#tabela-eventos tbody tr { cursor: pointer; transition: background 0.15s ease; }
#tabela-eventos tbody tr:hover { background-color: var(--panel-alt, #f1f3f5); }
#tabela-eventos tbody tr.linha-selecionada { background-color: var(--brand, #0d6efd) !important; color: #fff !important; font-weight: bold; }
#tabela-eventos tbody tr.linha-selecionada td { color: #fff !important; }
#tabela-eventos tbody tr.linha-selecionada .btn { border-color: #fff; }

.print-section-container {
    background: var(--panel-alt, #fdfdfd);
    border: 1px solid var(--border-strong, #e0e0e0);
    color: inherit;
    padding: 15px;
    border-radius: 6px;
    margin-top: 15px;
}

.modal-erro-copia { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.6); z-index: 10000; }
.modal-erro-copia-content { background: var(--modal-bg); padding: 25px; border-radius: 8px; max-width: 600px; width: 90%; text-align: left; box-shadow: 0 4px 15px rgba(0,0,0,0.3); border-top: 5px solid #dc3545; }
.modal-erro-copia-content h3 { margin-top: 0; color: #dc3545; display: flex; align-items: center; gap: 8px; }
.modal-erro-copia-content textarea { width: 100%; height: 180px; font-family: monospace; font-size: 12px; margin: 15px 0; padding: 10px; border: 1px solid var(--border-strong); background: var(--panel-alt); resize: vertical; user-select: text !important; -webkit-user-select: text !important; }

/* Botão flutuante de impressão de etiqueta e popup de modelos
   (usado em nova.php). Usa variáveis de tema (em vez de cores fixas)
   para funcionar corretamente também no modo escuro/contraste. */
.btn-flutuante-etiqueta {
    position: fixed; bottom: 25px; right: 25px; z-index: 9999;
    background-color: var(--btn-success-bg); color: var(--btn-success-text); border: none; border-radius: 50%;
    width: 55px; height: 55px; font-size: 24px; cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center;
}
.modal-etiqueta-custom {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); display: none; align-items: center; justify-content: center; z-index: 10200;
}
.modal-etiqueta-box {
    background: var(--modal-bg); color: var(--text); padding: 25px; border-radius: 8px; max-width: 400px; width: 90%;
    box-sizing: border-box;
}

/* ─── NOVA OCORRÊNCIA (nova.php) ───────────────────────────────────
   Regras específicas desta tela, antes definidas em um bloco <style>
   inline dentro do próprio nova.php. Centralizadas aqui para evitar
   CSS duplicado/divergente entre arquivos. ────────────────────────── */

.form-row { margin-bottom: 8px; }
body.modal-observacoes-open { overflow: hidden; }

/* Modal de observações da pessoa selecionada */
.modal-observacoes-locked {
    z-index: 10050;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
}
.modal-observacoes-locked .panel {
    background: var(--modal-bg, #fff);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    max-width: 480px;
    width: 95%;
}
#observacoesModalMsg { white-space: pre-wrap; word-break: break-word; margin: 12px 0 0; line-height: 1.5; }

/* Autocomplete de motivos (busca por texto ou ID, sem sobrepor o layout) */
.motivo-dropdown-container { position: relative; flex: 1; min-width: 180px; }
.motivo-dropdown-container .input { width: 100%; }
.motivo-dropdown-list {
    display: none; background: var(--modal-bg); border: 1px solid var(--border-strong);
    width: 100%; max-height: 220px; overflow-y: auto; position: absolute;
    top: 100%; left: 0; margin-top: 4px; z-index: 999;
    box-shadow: inset 0px 1px 3px rgba(0,0,0,0.05); border-radius: 4px;
}
.motivo-item { padding: 8px; cursor: pointer; border-bottom: 1px solid var(--border); }
.motivo-item:hover { background-color: var(--panel-alt); color: var(--text); }
/* "Nenhum motivo encontrado": mesma caixa, sem cara de opção clicável. */
.motivo-vazio { padding: 8px; color: var(--muted); }

/* Linhas de botões de ação na tabela de eventos */
.acoes-container { display: flex; flex-direction: column; gap: 6px; width: 100%; min-width: 140px; }
.acoes-linha { display: flex; gap: 6px; width: 100%; }
.acoes-linha .btn { flex: 1; white-space: nowrap; padding: 4px 8px; font-size: 12px; }

/* Cartões de informação de pessoa (busca por CPF / check-in) */
.cartao-pessoa-info {
    text-align: center;
    margin-top: 15px;
    padding: 10px;
    border: 1px solid var(--border-strong, #ddd);
    border-radius: 8px;
    background: var(--panel-alt, rgba(0,0,0,0.02));
}
.texto-muted-tema { color: var(--text-muted, #666); }
.foto-mini-lista { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border-strong, #ccc); }
.checkin-status { font-weight: bold; }
.checkin-status.checkin-sim { color: var(--success, #28a745); }
.checkin-status.checkin-nao { color: var(--text-muted, #777); font-weight: normal; }

.entrada-cpf-linha { display: flex; gap: 6px; align-items: stretch; }
.entrada-cpf-linha .input { flex: 1 1 auto; min-width: 0; }
.btn-scan-mini {
    flex-shrink: 0; width: 42px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: var(--panel-alt, #f5f5f5);
    color: inherit;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background-color 0.15s ease, transform 0.15s ease;
}
.btn-scan-mini:hover,
.btn-scan-mini:focus-visible { background: var(--border-strong); transform: scale(1.03); }
.btn-scan-mini:focus-visible { outline: 2px solid var(--brand, #0d6efd); outline-offset: 2px; }
.btn-scan-mini.btn-scan-qr svg { color: #28a745; }
.btn-scan-mini.btn-scan-barcode svg { color: var(--brand, #0d6efd); }

/* Modal de leitura de código de barras / QR Code do CPF (Check-in) */
.modal-scan-cpf {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.55);
    z-index: 10300;
    align-items: center; justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}
.modal-scan-cpf-content {
    background: var(--modal-bg);
    color: inherit;
    padding: 24px;
    border-radius: 8px;
    max-width: 380px;
    width: 90%;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    box-sizing: border-box;
    max-height: 90vh;
    overflow-y: auto;
}
.modal-scan-cpf-content h3 { margin-top: 0; margin-bottom: 8px; }
.modal-scan-cpf-content p { color: var(--text-muted, #666); margin: 0 0 6px; }
.modal-scan-cpf-content input {
    width: 100%;
    max-width: 260px;
    padding: 10px;
    margin: 16px auto;
    font-size: 18px;
    text-align: center;
    border: 2px solid var(--brand, #0d6efd);
    border-radius: 6px;
    box-sizing: border-box;
    display: block;
    background: var(--panel-alt, #fff);
    color: inherit;
}

/* Responsividade da tela de Liberação de Acesso */
@media (max-width: 768px) {
    .print-section-container > div[style*="display: flex"] { flex-direction: column; }
    .print-section-container div[style*="border-left"] { border-left: none !important; padding-left: 0 !important; border-top: 1px solid var(--border-strong, #ccc); padding-top: 12px; margin-top: 4px; }
    #eventos_search { max-width: 100% !important; width: 100%; margin-left: 0 !important; margin-top: 8px; }
    #filtro_status { width: 100%; }
    .table-form { width: 100% !important; }
}
@media (max-width: 480px) {
    .btn-flutuante-etiqueta { bottom: 15px; right: 15px; width: 48px; height: 48px; font-size: 20px; }
    .modal-scan-cpf-content { padding: 16px; }
    .acoes-linha .btn { font-size: 11px; padding: 4px 6px; }
}

/* ==========================================================================
   Módulo de Usuários (usuarios.php)
   Reaproveita os tokens já definidos em :root (seção 1) e os componentes
   .card / .modal / .table / .badge já existentes. Este bloco cobre apenas
   o que é específico deste módulo: cabeçalho de card com toolbar, grade de
   formulário em seções, campos de e-mail/celular e a tabela em linha única
   por usuário com detalhe de permissões colapsável.
   ========================================================================== */

/* --- Cabeçalho de card com título + subtítulo (o .card genérico não define
   tipografia própria para h4/h5, então padronizamos aqui) --- */
.card-title { margin: 0 0 4px; font-size: 18px; font-weight: 700; }
.card-subtitle { margin: 0 0 18px; font-size: 13px; color: var(--muted); }

/* --- Barra de ferramentas acima da tabela (busca + contador) --- */
.usu-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.usu-toolbar .input { margin: 0; max-width: 360px; flex: 1 1 260px; }
.usu-toolbar-count { font-size: 13px; color: var(--muted); white-space: nowrap; }

/* Licenças da empresa: quantos usuários ativos cabem no limite contratado no
   painel /adm_emp. Fica no topo da lista de usuários para o administrador ver
   quanto resta antes de tentar cadastrar. */
.usu-licencas {
  margin: 0 0 14px; padding: 10px 14px; border-radius: 8px;
  font-size: 13.5px; line-height: 1.5;
  background: rgba(29, 78, 216, .08); border: 1px solid rgba(29, 78, 216, .20);
}
.usu-licencas.is-lotado {
  background: rgba(185, 28, 28, .08); border-color: rgba(185, 28, 28, .25);
}

/* --- Seções do formulário (cadastro e edição) --- */
.usu-fieldset { margin-bottom: 24px; }
.usu-fieldset:last-of-type { margin-bottom: 0; }
.usu-fieldset-title {
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--border);
}

/* --- Grade responsiva de 2 colunas para os campos --- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.form-grid .field-full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field > label { font-size: 13px; font-weight: 600; color: var(--text); }
.field input, .field select { margin: 0; width: 100%; }
@media (max-width: 700px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* --- Campos de checkbox apresentados como cartão pequeno, lado a lado --- */
.checkbox-field {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel-alt);
}
/* width:auto anula o `.field input { width:100% }`: dentro de um .field o
   checkbox era esticado para a largura toda e empurrava o texto. */
.checkbox-field input[type="checkbox"] { margin: 3px 0 0; width: auto; flex: 0 0 auto; }

/* Respiro entre blocos de formulário empilhados.
   .form-grid tem margem embaixo, mas não em cima, e .checkbox-field não tem
   nenhuma: duas caixas de marcar seguidas, ou uma caixa colada num grid,
   ficavam com as bordas encostadas — parecia uma tabela sem linhas.
   A exceção existe porque DENTRO de um grid o espaçamento é o gap dele; uma
   margem ali empurraria a segunda coluna para baixo e desalinharia a linha. */
.checkbox-field + .checkbox-field,
.checkbox-field + .form-grid,
.field + .form-grid,
.field + .checkbox-field { margin-top: 12px; }
.form-grid > .checkbox-field + .checkbox-field,
.form-grid > .field + .checkbox-field,
.form-grid > .checkbox-field + .field { margin-top: 0; }
.checkbox-field label { font-size: 13px; color: var(--text); cursor: pointer; line-height: 1.35; }

/* --- Tabela: célula usuário (login + nome), status em pill, ações em linha --- */
.usu-user-cell strong { display: block; }
.usu-user-cell .text-muted { display: block; }

.badge-status-ativo { background: rgba(21,128,61,.12); color: var(--btn-success-bg); }
.badge-status-inativo { background: rgba(220,38,38,.12); color: var(--btn-danger-bg); }

/* Grupo de botões dentro da célula de ações. .table-actions é o nome genérico
   para telas novas; .usu-table-actions fica como apelido do que já existe. */
.table-actions, .usu-table-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-start; }
.table-actions form, .usu-table-actions form { margin: 0; }
.table-actions .btn, .usu-table-actions .btn { margin: 0; }

/* Linha de detalhe de permissões: colapsada por padrão, some com [hidden]
   nativo do HTML — evita duplicar visualmente uma linha inteira por usuário. */
.usu-perm-row td { background: var(--panel-alt); padding: 14px 16px; }
.usu-perm-toggle {
  background: none; border: 1px solid var(--border-strong); border-radius: 999px;
  padding: 4px 12px; font-size: 12px; cursor: pointer; color: var(--text);
}
.usu-perm-toggle:hover, .usu-perm-toggle:focus-visible { background: var(--panel-alt); }

.badge-perm {
    margin: 2px 5px 2px 0;
    padding: 3px 8px;
    border-radius: 12px;
    color: #fff;
    display: inline-block;
    font-size: 12px;
    background: #555;
}
.badge-perm.badge-perm-none { background: #999; }

.perm-form-title {
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 4px;
}
.perm-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; }
.perm-table th, .perm-table td { border: 1px solid var(--border); padding: 6px 8px; text-align: center; }
.perm-table th { background: var(--panel-alt); }
.perm-table td:first-child, .perm-table th:first-child { text-align: left; font-weight: 600; }
.perm-hint { font-size: 12px; color: var(--muted); margin: 4px 0 0; }

/* Cabeçalho de cada menu dentro da grade de permissões.
   A linha precisa se destacar das telas que vêm abaixo dela — é ela que
   responde "de qual menu é esta tela?". Daí o fundo mais forte, o texto em
   caixa alta e um respiro acima de cada grupo (menos do primeiro, que já
   encosta no cabeçalho da tabela). */
.perm-grupo-titulo th {
  background: var(--panel-alt);
  border-top: 2px solid var(--border-strong);
  text-align: left;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 8px;
}
.perm-grupo-rotulo {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0; cursor: pointer; font-weight: 700;
}
/* A grade fica dentro de um .field em alguns formulários, e ".field input
   { width: 100% }" também pega caixa de marcar: sem isto a caixa do grupo
   vira uma barra larga e empurra o nome do menu para longe. */
.perm-grupo-rotulo input[type="checkbox"] { width: auto; flex: 0 0 auto; margin: 0; }

.d-inline { display: inline-block; }

/* --- Botão "x" de fechar modal (o .modal-header genérico não tem um) ---
   Posicionado em absolute porque .modal-header já é position:relative e o
   h3 já reserva o espaço (padding-right:28px) esperando este botão aqui. */
.usu-close-btn {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none; border: none; font-size: 1.3rem; cursor: pointer; line-height: 1; color: var(--muted);
  padding: 4px;
  z-index: 1;
}
.usu-close-btn:hover, .usu-close-btn:focus-visible { color: var(--text); }

/* Campo de confirmação de e-mail: colar é bloqueado via JS para reforçar digitação manual */
.input-no-paste { background: var(--panel-alt); }

.usu-field-hint { font-size: 12px; color: var(--muted); margin: 2px 0 0; }
.usu-field-erro { font-size: 12px; color: var(--btn-danger-bg); margin: 2px 0 0; display: none; }
.usu-field-erro.is-visible { display: block; }

.usu-2fa-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 2px 8px; border-radius: 10px; }
.usu-2fa-status.ativo { background: rgba(21,128,61,.12); color: var(--btn-success-bg); }
.usu-2fa-status.inativo { background: rgba(108,117,125,.12); color: var(--muted); }

/* ─── 25. GRUPOS DE RÁDIO (componente genérico, reutilizável) ───── */
.radio-group { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; min-height: 38px; }
.radio-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; color: var(--text); cursor: pointer; white-space: nowrap;
}
.radio-item input { margin: 0; cursor: pointer; }

/* ─── 26. FILTRO DE MULTISSELEÇÃO (componente genérico, reutilizável) ───
   Dropdown com checkboxes + busca interna, usado sempre que um filtro
   precisar permitir mais de um valor selecionado ao mesmo tempo. */
.multiselect { position: relative; min-width: 0; }
.multiselect-toggle {
  width: 100%; text-align: left; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.multiselect-toggle::after { content: '▾'; color: var(--muted); font-size: 11px; flex-shrink: 0; }
.multiselect-toggle.is-active::after { content: '▴'; }
.multiselect-panel {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60;
  background: var(--panel); border: 1px solid var(--border-strong); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,.18); padding: 10px;
}
.multiselect-panel.is-open { display: block; }
.multiselect-search { width: 100%; margin: 0 0 8px; }
.multiselect-options { max-height: 210px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.multiselect-option {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  border-radius: 6px; font-size: 13px; color: var(--text); cursor: pointer;
}
.multiselect-option:hover { background: var(--panel-alt); }
.multiselect-option input { margin: 0; width: auto; min-width: 0; cursor: pointer; }
.multiselect-empty { padding: 10px 4px; font-size: 13px; color: var(--muted); text-align: center; }
.multiselect-actions { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); text-align: right; }
.multiselect-actions .btn-link { padding: 2px 0; margin: 0; font-size: 12px; }

/* ─── 27. PREVISÃO ORÇAMENTÁRIA (previsao_orcamentaria.php) ──────
   A página reaproveita .card, .btn, .input/select, .table, .table-wrap,
   .pagination, .modal, .field, .form-grid, .form-grid-4, .usu-toolbar,
   .badge-status-ativo/inativo, .sistema-aviso-banner, .login-error e o
   popup padrão do sistema (#app-dialog-root); este bloco cobre apenas o
   que é específico do gráfico de consumo e dos badges de NF. */
.orcamento-badge-nf-sim { background: rgba(21,128,61,.12); color: var(--btn-success-bg); }
.orcamento-badge-nf-nao { background: var(--panel-alt); color: var(--muted); }
.orcamento-link-pdf { color: var(--accent); text-decoration: none; margin-left: 8px; font-size: 13px; font-weight: 600; }
.orcamento-link-pdf:hover { text-decoration: underline; }

.orcamento-chart-actions { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }

.orcamento-bar-row { margin-bottom: 18px; }
.orcamento-bar-row:last-child { margin-bottom: 0; }
.orcamento-bar-label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 14px; margin-bottom: 6px; gap: 12px; flex-wrap: wrap;
}
.orcamento-bar-label strong { font-size: 15px; color: var(--text); }
.orcamento-bar-label span { color: var(--muted); }
.orcamento-bar-track {
  position: relative; width: 100%; height: 22px;
  background: var(--panel-alt); border-radius: 6px; overflow: hidden;
  border: 1px solid var(--border);
}
.orcamento-bar-fill { height: 100%; border-radius: 5px 0 0 5px; transition: width .4s ease; }
.orcamento-bar-fill.ok         { background: linear-gradient(90deg, #2e7d32, #66bb6a); }
.orcamento-bar-fill.aviso      { background: linear-gradient(90deg, #e65100, #ffa726); }
.orcamento-bar-fill.estourado  { background: linear-gradient(90deg, #b71c1c, #e53935); }
.orcamento-bar-fill.sem-orcamento {
  background: repeating-linear-gradient(45deg, #b71c1c, #b71c1c 8px, #c62828 8px, #c62828 16px);
}
.orcamento-empty-text { color: var(--muted); font-style: italic; font-size: 14px; text-align: center; padding: 10px 0; }

@media (max-width: 700px) {
  .multiselect-panel { left: 0; right: 0; }
}

/* ─── 28. ASSINATURA DIGITAL DE DOCUMENTOS (assinatura.php) ──────
   Migrado do <style> embutido em assinatura.php. A página reaproveita
   .modal/.is-open, .btn, .card, .table, .badge já definidos globalmente
   neste arquivo; os blocos abaixo cobrem apenas os ajustes específicos
   da tela de assinatura (não depende de nenhuma biblioteca externa
   Bootstrap/jQuery). */

.assinatura-topo { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
.assinatura-topo h3 { margin:0; }

/* Fechar modal (o .modal-header genérico não tem um botão "x" próprio -
   cada tela cadastra o seu, como o próprio menu_main.php faz para os
   popups de perfil/suporte). */
.modal-close {
  position:absolute; top:14px; right:16px; background:none; border:none;
  font-size:1.5rem; line-height:1; opacity:.6; cursor:pointer; color:inherit; padding:2px 6px; border-radius:6px;
}
.modal-close:hover { opacity:1; background:rgba(0,0,0,.08); }

/* Badges de status coloridos (a classe .badge global é neutra/azul) */
.badge-pendente { background:#eef2ff; color:#1e3a8a; }
.badge-aguardando { background:#fff3cd; color:#856404; }
.badge-assinado { background:#d4edda; color:#1e7e34; }
.badge-cancelado { background:#fde3e3; color:#a12727; }

/* Botão de excluir documento (vermelho, para se destacar como ação destrutiva) */
.btn-excluir { background:#dc3545; border-color:#dc3545; color:#fff; }
.btn-excluir:hover { background:#b02a37; border-color:#b02a37; }
.btn-msg-aviso {
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; margin-right:4px; padding:0;
  border-radius:50%; border:1px solid #856404; background:#fff3cd;
  color:#856404; font-weight:700; font-size:13px; line-height:1;
  cursor:pointer; vertical-align:middle;
}
.btn-msg-aviso:hover { background:#ffe8a1; }

/* Grade dos modelos de assinatura (thumbnails) */
.modelos-grid { display:flex; flex-wrap:wrap; gap:12px; }
.modelos-grid-item { width:120px; text-align:center; }
.modelo-thumb { border:2px solid var(--border-strong); border-radius:8px; padding:6px; cursor:pointer; background:#f8f9fa repeating-conic-gradient(#eee 0% 25%, transparent 0% 50%) 50% / 14px 14px; transition:.15s; }
.modelo-thumb.selecionado { border-color: var(--accent); box-shadow:0 0 0 2px rgba(15,98,254,.25); }
.modelo-thumb img { max-width:100%; max-height:60px; display:block; margin:0 auto; }

/* Abas "Enviar PNG" / "Desenhar assinatura" dentro do modal de modelos */
.assin-tabs { display:flex; border-bottom:1px solid var(--border); margin-bottom:14px; }
.assin-tab-btn { flex:1; background:none; border:none; padding:10px 6px; cursor:pointer; font-size:.9rem; color:inherit; opacity:.65; border-bottom:2px solid transparent; }
.assin-tab-btn.is-active { opacity:1; border-bottom-color: var(--accent); font-weight:600; }
.assin-tab-pane { display:none; }
.assin-tab-pane.is-active { display:block; }

/* Modal de posicionamento precisa ser bem maior que o modal padrão (920px) */
#modalPosicionar .modal-content { max-width:96vw; width:96vw; max-height:96vh; }
#modalPosicionar .modal-body { display:flex; flex-direction:column; align-items:center; }
.posicionar-barra { display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:center; margin-bottom:14px; }
#pdfPageWrapperOuter { width:100%; max-width:100%; max-height:calc(96vh - 230px); overflow:auto; display:flex; justify-content:center; }
#pdfPageWrapper { position:relative; display:inline-block; background:#525659; line-height:0; }
#pdfCanvas { display:block; }
#sigBox { position:absolute; cursor:move; border:1px dashed var(--accent); touch-action:none; user-select:none; }
#sigBox img { width:100%; height:100%; display:block; pointer-events:none; }
#sigResizeHandle { position:absolute; right:-8px; bottom:-8px; width:16px; height:16px; background: var(--accent); border-radius:50%; cursor:nwse-resize; touch-action:none; }
#sigDataHoraPreview { position:absolute; left:0; right:0; top:100%; font-size:10px; text-align:center; color:var(--accent); white-space:nowrap; }
#drawCanvas { border:1px solid var(--border-strong); border-radius:8px; touch-action:none; background:repeating-conic-gradient(#eee 0% 25%, transparent 0% 50%) 50% / 14px 14px; max-width:100%; }

@media (max-width: 600px) {
  #modalPosicionar .modal-content { max-width:100vw; width:100vw; max-height:100vh; border-radius:0; }
}

/* ─── 28.1 ASSINATURA: recorte da assinatura física e combo de múltipla
   seleção. Migrado dos dois <style> que ainda restavam em assinatura.php.
   As cores fixas viraram variáveis do tema, então o modo escuro passa a
   funcionar nestes componentes. ─────────────────────────────────────── */
#tabFisica .fisica-crop-wrapper {
  position: relative;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  line-height: 0;
  background: #222;
  border-radius: 4px;
}
#tabFisica .fisica-crop-wrapper img {
  display: block;
  max-width: 100%;
  max-height: 360px;
  user-select: none;
  -webkit-user-drag: none;
}
#tabFisica .fisica-crop-box {
  position: absolute;
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .5);
  cursor: move;
  touch-action: none;
}
#tabFisica .fisica-crop-handle {
  position: absolute;
  right: -7px;
  bottom: -7px;
  width: 16px;
  height: 16px;
  background: var(--accent);
  border: 2px solid var(--input-bg);
  border-radius: 3px;
  cursor: nwse-resize;
  touch-action: none;
}
#tabFisica .fisica-canvas-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 10px;
}
#tabFisica .fisica-canvas-box {
  flex: 1 1 220px;
  min-width: 180px;
}
#tabFisica .fisica-canvas-box canvas {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
}
#tabFisica .fisica-checker {
  background-image:
    linear-gradient(45deg, #ccc 25%, transparent 25%),
    linear-gradient(-45deg, #ccc 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ccc 75%),
    linear-gradient(-45deg, transparent 75%, #ccc 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  border-radius: 4px;
}
.multi-selectbox { position: relative; width: 100%; max-width: 360px; }
.multi-selectbox-toggle {
  width: 100%; text-align: left; padding: 8px 10px; border: 1px solid var(--border-strong);
  border-radius: 4px; background: var(--input-bg); cursor: pointer; font-size: 14px;
}
.multi-selectbox-toggle:hover { border-color: var(--accent); }
.multi-selectbox-panel {
  display: none; position: absolute; z-index: 40; top: calc(100% + 4px); left: 0;
  width: 100%; min-width: 260px; max-height: 260px; overflow-y: auto;
  background: var(--input-bg); border: 1px solid var(--border-strong); border-radius: 4px;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}
.multi-selectbox.is-open .multi-selectbox-panel { display: block; }
.multi-selectbox-search {
  width: 100%; box-sizing: border-box; border: none; border-bottom: 1px solid #eee;
  padding: 8px 10px; position: sticky; top: 0; background: var(--input-bg);
}
.multi-selectbox-lista { padding: 4px 0; }
.multi-selectbox-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px; cursor: pointer; font-size: 14px;
}
/* Sem token, o hover claro apagava o texto no modo contraste. */
.multi-selectbox-item:hover { background: var(--table-row-hover); }
.assinatura-filtros {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 12px;
}
.assinatura-filtros .form-row { min-width: 160px; }
.assinatura-filtros label { display:block; font-size: 12px; color: #667085; margin-bottom: 2px; }
.assinatura-filtros input, .assinatura-filtros select {
  width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid var(--border-strong); border-radius: 4px;
}
.assinatura-prazo-vencido { color: #dc2626; }
.assinatura-prazos { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.assinatura-prazo-item { display: inline-flex; align-items: center; gap: 4px; cursor: default; }
.assinatura-prazo-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.assinatura-prazo-dot.envio { background: var(--accent); }
.assinatura-prazo-dot.assinatura { background: #eab308; }
.assinatura-prazo-dot.visualizacao { background: #dc2626; }
/* A barra de paginação própria desta tela (".assinatura-paginacao", com
   "« Anterior / 1 2 3 / Próxima »") saiu: a lista de documentos usa a
   .pagination-controls do App.paginacao, como as demais telas. */

/* ─── 29. RELATÓRIOS DINÂMICOS DE REQUISIÇÕES (relatorios_requisicoes.php) ───
   A tela usa .container/.card/.painel-filtros/.form-grid/.field/.grafico-grid
   já definidos acima. O bloco anterior dependia de classes do Bootstrap
   (col-*, form-control, card-header), que este projeto não carrega: as regras
   ficavam sem efeito e o layout dos filtros e dos gráficos não montava.
   Restam aqui só o ajuste do select2 (biblioteca externa) e a altura do
   canvas. */

.chart-container { position: relative; height: 320px; width: 100%; }
.grafico-box--largo .chart-container { height: 380px; }
@media (max-width: 768px) { .chart-container { height: 280px; } }

/* select2 alinhado aos campos do sistema (a biblioteca traz o próprio CSS). */
.select2-container { width: 100% !important; }
.select2-container--default .select2-selection--multiple {
  border: 1px solid var(--border-strong); border-radius: 10px;
  background: var(--input-bg); min-height: 38px; padding: 2px 4px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--btn-primary-bg); border: none; color: var(--btn-primary-text);
  border-radius: 6px; padding: 2px 8px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: var(--btn-primary-text); }
.select2-dropdown { border-color: var(--border-strong); background: var(--panel); color: var(--text); }

/* ─── 30. CADASTRO DE PESSOAS FÍSICAS E JURÍDICAS (pessoa_fisica.php / pessoa_juridica.php) ───
   Migrado dos <style> embutidos em pessoa_fisica.php e pessoa_juridica.php. Ambas as páginas
   reaproveitam .card, .btn, .input/select/textarea, .form-row, .inline, .video-wrap, .avatar,
   .table/.table-wrap, .table-photo/.td-photo, .pagination, .badge e o padrão genérico de modal
   (.modal/.modal-content/.modal-header/.modal-body/.modal-footer/.is-open, seção 10) já
   definidos acima. O popup próprio ("#popup-overlay/#popup-content") e o modal de erro fixo
   ("#error-modal") que existiam em pessoa_juridica.php foram eliminados: o primeiro virou um
   .modal padrão (#modalFuncionarios) e o segundo, que nunca era usado, foi removido - erros
   passaram a usar AppDialog.error(). Os blocos abaixo cobrem só o que é específico destas telas. */

/* Bloco de importação em lote via CSV (pessoa_fisica.php) */
.import-box { background: var(--panel-alt); border: 2px dashed var(--border-strong); padding: 15px; margin-bottom: 25px; border-radius: 6px; }
.import-title { font-size: 16px; margin-bottom: 10px; font-weight: bold; color: var(--text); }
.import-actions { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; }
.import-actions input[type="file"] { padding: 5px; }
.info-alert-import { margin-top: 10px; font-size: 13px; color: var(--text); background: var(--panel-alt); padding: 8px; border-left: 4px solid var(--accent); border-radius: 4px; }
@media (max-width: 600px) {
  .import-actions { flex-direction: column; align-items: stretch; }
  .import-actions .btn { width: 100%; text-align: center; margin: 2px 0; }
}

/* Card "Cadastros Recentes" com respiro extra e cabeçalho menor (pessoa_fisica.php) */
.pessoas-recentes-card { margin-top: 30px; }
.pessoas-recentes-card h3 { margin-bottom: 10px; font-size: 18px; }

/* Campo de busca por nome com largura contida (pessoa_fisica.php) */
#search_name { max-width: 420px; margin-bottom: 10px; }

/* Mensagem de erro da busca de empresa vinculada (pessoa_fisica.php) */
#empresa_msg { color: var(--btn-danger-bg); font-size: 14px; margin-top: 4px; display: none; }

/* Validação visual de CPF/CNPJ digitado - classes aplicadas via JS, sem tocar no CSS base
   de .input (pessoa_fisica.php e pessoa_juridica.php) */
.input.is-valid   { border-color: var(--btn-success-bg); }
.input.is-invalid { border-color: var(--btn-danger-bg); }

/* Modal "Pessoas físicas vinculadas" precisa de um pouco mais de largura que o modal padrão
   (pessoa_juridica.php) */
#modalFuncionarios .modal-content { max-width: 820px; }

/* Filtro de busca de empresas (pessoa_juridica.php) */
#search-box { max-width: 280px; margin-bottom: 10px; }
@media (max-width: 600px) {
  #search-box { max-width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════
   31. COMPONENTES PADRÃO DE PÁGINA
   Substitui os blocos <style> repetidos nas telas (estoque, escalas e
   demais módulos). Toda cor sai de variável do tema, então o modo escuro
   funciona sem regra extra. Os nomes antigos ficam como apelido na mesma
   regra para que nenhuma tela ainda não migrada quebre.
   ═══════════════════════════════════════════════════════════════════ */

/* --- 31.1 Cabeçalho da página (título + ações) --- */
.page-header,
.estoque-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--border);
}
.page-header h1, .page-header h2, .page-header h3, .page-header h4,
.estoque-header h4, .estoque-header h5 {
  margin: 0;
  font-size: 1.2rem;
  color: var(--text);
}
.page-header-sub, .page-header small, .estoque-header small {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
}
.page-header-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.page-header-acoes .btn { margin: 0; }

/* Título de bloco dentro do card (sem a borda dupla do cabeçalho) */
.secao-titulo {
  font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--accent); border-bottom: 1px solid var(--border);
  padding-bottom: 6px; margin: 26px 0 14px;
}

/* --- 31.2 Grade de formulário --- */
.form-grid,
.estoque-grid,
.filtros-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 15px;
  margin-bottom: 15px;
}
.form-grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.form-grid .col-2, .estoque-grid .col-2 { grid-column: span 2; }
@media (max-width: 640px) {
  .form-grid .col-2, .estoque-grid .col-2 { grid-column: span 1; }
}

.field,
.estoque-form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.field > label,
.estoque-form-group > label {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
}
.field-hint { font-size: 12px; color: var(--muted); }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible,
.estoque-form-group input:focus-visible,
.estoque-form-group select:focus-visible,
.estoque-form-group textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
}
.input-erro, .campo-invalido {
  border-color: var(--btn-danger-bg) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--btn-danger-bg) 22%, transparent) !important;
}

/* Painel de filtros acima de uma tabela */
.painel-filtros,
.card-filtros {
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 15px;
  margin-bottom: 20px;
}
.painel-filtros .form-grid,
.card-filtros .filtros-grid { margin-bottom: 0; align-items: end; }
/* Barra de filtros de uma linha acima da tabela — o padrão de contas a
   pagar. .cap-filtros é o nome usado naquela tela; mesma regra, um lugar só. */
.filtros-bar, .cap-filtros {
  display: flex; flex-wrap: wrap; gap: 10px;
  align-items: center; margin-bottom: 14px;
}
.filtros-bar .input, .filtros-bar select, .filtros-bar .btn,
.cap-filtros .input, .cap-filtros select, .cap-filtros .btn { margin: 0; }
.filtros-bar input[type="text"], .cap-filtros input[type="text"] { flex: 1 1 260px; max-width: 340px; }

/* --- 31.3 Tabelas ---
   As medidas (10px 12px de célula, 14px de fonte, cabeçalho fixo à esquerda)
   são as mesmas já definidas na seção 7; aqui só apelidamos os nomes antigos
   para que todas as telas caiam na MESMA tabela, sem redeclarar padding. */
.custom-table,
table.custom-table,
.tabela-padrao {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: var(--panel);
  min-width: 400px;
}
.custom-table thead th, .tabela-padrao thead th {
  background: var(--table-head-bg);
  color: var(--text);
  font-weight: 600;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 2px solid var(--border-strong);
  vertical-align: middle;
  white-space: nowrap;
}
.custom-table tbody td, .tabela-padrao tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--text);
}
.custom-table tbody tr:nth-child(even) td,
.tabela-padrao tbody tr:nth-child(even) td { background: var(--table-row-alt); }
.custom-table tbody tr:hover td,
.tabela-padrao tbody tr:hover td { background: var(--table-row-hover); }

/* Colunas de uso frequente — largura e alinhamento só onde são necessários.
   A lista de seletores repete a das regras base de .table logo acima: sem
   isso, o "text-align:left" daquelas regras é mais específico e vence. */
.col-num, .table .col-num, table.tabela .col-num,
.card table:not(.table-form) .col-num,
.container table:not(.table-form) .col-num {
  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.col-centro, .table .col-centro, table.tabela .col-centro,
.card table:not(.table-form) .col-centro,
.container table:not(.table-form) .col-centro {
  text-align: center;
}
.col-acoes, .table .col-acoes, table.tabela .col-acoes,
.card table:not(.table-form) .col-acoes,
.container table:not(.table-form) .col-acoes {
  width: 1%; white-space: nowrap; text-align: right;
}
.col-acoes .btn { margin: 2px 0 2px 4px; }
/* .col-acoes encolhe a coluna (width:1%); um grupo flex dentro dela quebraria
   os botões em duas linhas. O .table-responsive já rola na horizontal. */
.col-acoes .usu-table-actions, .col-acoes .table-actions { flex-wrap: nowrap; }
.col-data, .table .col-data, table.tabela .col-data,
.card table:not(.table-form) .col-data,
.container table:not(.table-form) .col-data {
  width: 1%; white-space: nowrap; font-variant-numeric: tabular-nums;
}
/* Coluna de código/ID: estreita como a de data, alinhada como número. */
.col-id, .table .col-id, table.tabela .col-id,
.card table:not(.table-form) .col-id,
.container table:not(.table-form) .col-id {
  width: 1%; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums;
}

/* Linha de tabela vazia */
.tabela-vazia td {
  text-align: center;
  color: var(--muted);
  padding: 22px 12px !important;
  background: transparent !important;
}

/* Campos editáveis dentro da célula (inventário) */
.input-contagem {
  width: 110px; padding: 6px 8px; min-width: 0;
  font-weight: 700; text-align: right;
}
.input-motivo { width: 100%; min-width: 160px; padding: 6px 8px; font-size: 13px; }

/* --- 31.4 Emblemas de status --- */
.status-badge,
.badge-status, .badge-div, .badge-tipo {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}
.status-badge--ok,      .badge-success, .badge-sobra, .badge-entrada { background: #dcfce7; color: #15803d; }
.status-badge--alerta,  .badge-warning                              { background: #fef9c3; color: #a16207; }
.status-badge--erro,    .badge-danger, .badge-falta, .badge-saida   { background: #fee2e2; color: #b91c1c; }
.status-badge--info,    .badge-info, .badge-ajuste                  { background: #e0f2fe; color: #0369a1; }
.status-badge--neutro,  .badge-zero, .badge-neutro                  { background: var(--panel-alt); color: var(--muted); }

html.dark-mode .status-badge--ok,     html.dark-mode .badge-success,
html.dark-mode .badge-sobra,          html.dark-mode .badge-entrada { background:#14331f; color:#86efac; }
html.dark-mode .status-badge--alerta, html.dark-mode .badge-warning { background:#3a2c07; color:#fde68a; }
html.dark-mode .status-badge--erro,   html.dark-mode .badge-danger,
html.dark-mode .badge-falta,          html.dark-mode .badge-saida   { background:#3b1414; color:#fca5a5; }
html.dark-mode .status-badge--info,   html.dark-mode .badge-info,
html.dark-mode .badge-ajuste                                        { background:#12293f; color:#93c5fd; }

/* --- 31.5 Caixas de aviso em linha (não bloqueiam a tela) --- */
.alert-box {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 15px;
  border: 1px solid transparent;
}
.alert-box[hidden] { display: none !important; }
.alert-info    { background:#e0f2fe; color:#0369a1; border-color:#bae6fd; }
.alert-warning { background:#fef3c7; color:#92400e; border-color:#fde68a; }
.alert-danger  { background:#fee2e2; color:#991b1b; border-color:#fca5a5; }
.alert-success { background:#dcfce7; color:#166534; border-color:#bbf7d0; }
html.dark-mode .alert-info    { background:#12293f; color:#93c5fd; border-color:#1e4976; }
html.dark-mode .alert-warning { background:#3a2c07; color:#fde68a; border-color:#78550a; }
html.dark-mode .alert-danger  { background:#3b1414; color:#fca5a5; border-color:#7f1d1d; }
html.dark-mode .alert-success { background:#14331f; color:#86efac; border-color:#166534; }

/* Painel de destaque (ex.: produtos em alerta de compra) */
.painel-alerta,
.card-alertas {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 5px solid var(--btn-danger-bg);
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 25px;
}
.painel-alerta > h5, .card-alertas > h5 {
  margin: 0 0 10px;
  color: var(--btn-danger-bg);
  display: flex; align-items: center; gap: 8px;
}
.painel-alerta > p, .card-alertas > p { font-size: 14px; color: var(--muted); margin: 0 0 12px; }

/* --- 31.6 Indicadores (KPIs) --- */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.kpi, .kpi-card {
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--panel);
  min-width: 0;
}
.kpi .valor, .kpi-card .val { font-size: 1.3rem; font-weight: 800; color: var(--text); line-height: 1.1; }
.kpi .rotulo, .kpi-card .lbl {
  font-size: 11px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--muted); font-weight: 700; margin-top: 3px;
}

/* --- 31.7 Chips e ponto colorido --- */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--border); background: var(--panel);
  border-radius: 999px; padding: 6px 14px;
  font-size: 13px; font-weight: 600; color: var(--text);
}
.chip .chip-sub { color: var(--muted); font-weight: 500; font-size: 12px; }
.chip-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.ponto-cor { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* --- 31.8 Abas --- */
.tabs, .tabs-container {
  display: flex; flex-wrap: wrap; gap: 4px;
  border-bottom: 2px solid var(--border);
  margin-top: 25px;
}
.tab-btn {
  padding: 10px 18px; border: none; background: none;
  font-weight: 600; font-size: 14px; color: var(--muted);
  cursor: pointer; border-bottom: 3px solid transparent;
  font-family: inherit;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.is-active, .tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-pane, .tab-content { display: none; padding-top: 20px; }
.tab-pane.is-active, .tab-content.active { display: block; }
/* Rede de proteção: o lugar do painel é FORA da faixa .tabs, junto dos irmãos.
   Dentro dela ele vira item do flex e se espreme numa coluna ao lado dos
   botões. Estas duas regras devolvem a linha inteira e o empurram para baixo
   dos botões, mesmo que a marcação esteja errada. */
.tabs > .tab-pane, .tabs > .tab-content { flex: 1 1 100%; min-width: 0; order: 1; }
.tabs > .tab-pane.is-active, .tabs > .tab-content.active { display: block; }

/* --- 31.9 Busca preditiva --- */
.busca-preditiva, .search-box-container { position: relative; margin-bottom: 20px; }
.busca-resultados, .search-results-dropdown {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 0 0 8px 8px;
  box-shadow: var(--card-shadow);
  max-height: 280px; overflow-y: auto; overscroll-behavior: contain;
  z-index: 1200;
}
.busca-resultados[hidden], .search-results-dropdown[hidden] { display: none !important; }
.busca-item, .search-result-item {
  padding: 10px 15px; border-bottom: 1px solid var(--border);
  cursor: pointer; display: flex; justify-content: space-between;
  align-items: center; gap: 12px;
}
.busca-item:last-child, .search-result-item:last-child { border-bottom: none; }
.busca-item:hover, .busca-item.is-active,
.search-result-item:hover { background: var(--table-row-hover); }
.busca-item-sub { font-size: 12px; color: var(--muted); }

/* --- 31.10 Registro em destaque (item selecionado) --- */
.registro-destaque, .card-produto-destaque {
  background: var(--panel-alt);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 20px; margin-bottom: 20px;
  display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
}
.registro-foto, .card-produto-foto {
  width: 90px; height: 90px; border-radius: 6px;
  background: var(--border); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--muted); flex-shrink: 0;
}
.registro-foto img, .card-produto-foto img { width: 100%; height: 100%; object-fit: cover; }
.registro-info, .card-produto-info { flex: 1 1 250px; min-width: 0; }
.registro-saldo, .card-saldo-badge {
  background: var(--text); color: var(--panel);
  padding: 12px 20px; border-radius: 8px; text-align: center; flex-shrink: 0;
}
.registro-saldo .valor, .card-saldo-badge .valor {
  font-size: 1.5rem; font-weight: 800; display: block;
  font-variant-numeric: tabular-nums;
}
.registro-saldo .rotulo, .card-saldo-badge .rotulo {
  font-size: 11px; text-transform: uppercase; letter-spacing: .5px; opacity: .8;
}

/* --- 31.11 Pré-visualização de imagem e linhas repetíveis --- */
.img-preview, .img-preview-box {
  width: 100px; height: 100px;
  border: 2px dashed var(--border-strong); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: var(--panel-alt); flex-shrink: 0;
  font-size: 12px; color: var(--muted); text-align: center;
}
.img-preview img, .img-preview-box img { width: 100%; height: 100%; object-fit: cover; }

.repeater-row, .supplier-row {
  display: flex; gap: 10px; margin-bottom: 8px; align-items: center; flex-wrap: wrap;
}
.repeater-row input, .supplier-row input { flex: 1 1 180px; min-width: 0; }

/* Bloco agrupador dentro do formulário */
.bloco-form {
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 15px; margin-bottom: 20px;
}
.bloco-form-topo {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
}

/* --- 31.12 Cartões de opção (rádio/checkbox) --- */
.opcao-card, .radio-card {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; margin-bottom: 8px;
  border: 1px solid var(--border-strong); border-radius: 6px;
  font-size: 14px; cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.opcao-card:hover, .radio-card:hover { background: var(--panel-alt); border-color: var(--accent); }
.opcao-card input, .radio-card input { margin-top: 3px; min-width: 0; }
.opcao-card-sub { font-size: 12px; color: var(--muted); }

.check-grid, .checkbox-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px; margin-top: 8px; padding: 12px;
  background: var(--panel-alt); border: 1px solid var(--border); border-radius: 6px;
}
.check-label, .chk-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text); cursor: pointer;
}
.check-label input, .chk-label input { min-width: 0; }

/* --- 31.13 Paginação: apelidos das barras antigas ---
   O visual é o da seção 8; aqui só ligamos os nomes usados nas telas de estoque. */
.pagination-controls, .paginacao-bar, .paginacao-container {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px;
  margin-top: 15px; padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 13px; color: var(--muted);
}
.pagination-nav, .paginacao-controles {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.paginacao-btn, .btn-paginacao {
  padding: 5px 10px; border: 1px solid var(--border-strong);
  background: var(--panel); color: var(--text);
  border-radius: 8px; cursor: pointer; font-weight: 600;
  font-size: 13px; font-family: inherit;
}
.paginacao-btn:hover:not(:disabled), .btn-paginacao:hover:not(:disabled) { background: var(--table-row-hover); }
.paginacao-btn:disabled, .btn-paginacao:disabled { opacity: .45; cursor: not-allowed; }
.paginacao-btn.is-active, .paginacao-btn.active, .btn-paginacao.is-active {
  background: var(--btn-primary-bg); color: var(--btn-primary-text);
  border-color: var(--btn-primary-bg); cursor: default;
}
.select-paginacao {
  padding: 4px 8px; border-radius: 8px; border: 1px solid var(--border-strong);
  font-size: 13px; background: var(--panel); color: var(--text); min-width: 0;
}

/* --- 31.14 Gráficos --- */
.grafico-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px; width: 100%;
}
.grafico-box {
  min-width: 0; background: var(--panel); padding: 10px;
  border: 1px solid var(--border); border-radius: 8px;
}
.grafico-box h6 {
  text-align: center; color: var(--text);
  margin: 0 0 10px; font-weight: 600; font-size: 14px;
}
.grafico-area { position: relative; height: 260px; width: 100%; }
/* Gráfico que ocupa a linha inteira da grade (séries temporais). */
.grafico-box--largo { grid-column: 1 / -1; }
/* Título à esquerda, botões de exportação à direita, na mesma linha. */
.grafico-header {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 8px; margin-bottom: 10px;
}
.grafico-header h6 { margin: 0; text-align: left; }
.grafico-acoes { display: flex; gap: 6px; }
.grafico-acoes .btn { margin: 0; }
/* Aviso sob o gráfico ("mostrando os últimos N de M", ou a dica do tooltip).
   Encosta na moldura do .grafico-box sem o respiro; a altura do gráfico é
   fixa, então a linha extra não empurra nada. */
.grafico-aviso { margin-top: 8px; line-height: 1.4; }


/* ═══════════════════════════════════════════════════════════════════
   32. BOTÕES POR FUNCIONALIDADE
   Regra única do sistema: a COR do botão indica o que ele faz, nunca
   onde ele está. Ao criar uma tela nova, escolha pela ação:

     Ação                              Classe            Cor
     ─────────────────────────────────────────────────────────────────
     Ação principal / Novo / Filtrar   .btn-primary      azul
     Salvar / Confirmar / Cadastrar    .btn-success      verde
     Editar / Ver detalhes             .btn-info         azul-petróleo
     Atenção (comprar, ajustar)        .btn-warning      laranja
     Excluir / Baixa / Bloquear        .btn-danger       vermelho
     Cancelar / Voltar / Fechar        .btn-secondary    cinza
     Exportar CSV / Excel              .btn-export       verde-azulado
     Gerar PDF / Imprimir              .btn-pdf          vinho
     Programar / agendar disparo       .btn-agendar      roxo

   As cores saem de --btn-*-bg (seção 1), então mudar a identidade do
   sistema inteiro é mudar uma variável. As definições estão na seção 5;
   aqui ficam apenas os apelidos das classes antigas, para que telas ainda
   não migradas continuem com a cor certa.
   ═══════════════════════════════════════════════════════════════════ */

.btn-custom {
  font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.25;
  padding: 8px 14px; border-radius: 10px; border: none; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
  box-sizing: border-box; vertical-align: middle; white-space: nowrap;
  background-color: var(--btn-primary-bg); color: var(--btn-primary-text);
  transition: background-color .15s ease, filter .15s ease;
}
.btn-custom:hover { filter: brightness(.92); }
.btn-custom:disabled, .btn-custom[disabled] { opacity: .55; cursor: not-allowed; filter: none; }

.btn-primary-custom   { background-color: var(--btn-primary-bg)   !important; color: var(--btn-primary-text)   !important; }
.btn-success-custom   { background-color: var(--btn-success-bg)   !important; color: var(--btn-success-text)   !important; }
.btn-info-custom      { background-color: var(--btn-info-bg)      !important; color: var(--btn-info-text)      !important; }
.btn-warning-custom   { background-color: var(--btn-warning-bg)   !important; color: var(--btn-warning-text)   !important; }
.btn-danger-custom    { background-color: var(--btn-danger-bg)    !important; color: var(--btn-danger-text)    !important; }
.btn-secondary-custom { background-color: var(--btn-secondary-bg) !important; color: var(--btn-secondary-text) !important;
                        border: 1px solid var(--btn-secondary-border) !important; }
.btn-report-custom    { background-color: var(--btn-pdf-bg)       !important; color: var(--btn-pdf-text)       !important; }

/* Botão com ícone: mantém o alinhamento do emoji/SVG com o texto */
.btn.btn-icone, .btn-custom { display: inline-flex; align-items: center; gap: 6px; }

/* Foco visível para navegação por teclado — obrigatório em todos os botões */
.btn:focus-visible, .btn-custom:focus-visible,
.paginacao-btn:focus-visible, .tab-btn:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}


/* ═══════════════════════════════════════════════════════════════════
   33. POPUP PADRÃO — botão fechar e tamanhos
   Complementa a seção 11. O popup só fecha pelo "✕" ou por um botão do
   rodapé: clique no fundo e tecla Esc são ignorados (ver appdialog.js).
   ═══════════════════════════════════════════════════════════════════ */

.app-dialog { padding-top: 4px; }
.app-dialog--md { max-width: 640px; }
.app-dialog--lg { max-width: 860px; }
.app-dialog--full { max-width: 1100px; }
.app-dialog-body { max-height: 70vh; overflow-y: auto; overscroll-behavior: contain; }

/* Botão fechar — canto superior direito, sempre acima do conteúdo.

   CONTRASTE É REQUISITO, NÃO ENFEITE
   Este botão já era o ÚNICO jeito de fechar o popup (fundo e Esc não fecham),
   mas era desenhado com background:var(--panel) e color:var(--muted): um "✕"
   cinza-claro, dentro de um círculo branco, sobre o fundo branco do próprio
   popup, separado só por uma borda de 1px quase invisível. Em monitor de
   portaria, com brilho baixo, ele simplesmente não era visto — e o usuário
   ficava sem saber como sair da tela. Agora ele tem fundo próprio e traço
   escuro, e some do fundo só no hover (invertendo para o vermelho de ação
   destrutiva, como o resto do sistema). */
.app-dialog-close {
  position: absolute; top: 10px; right: 10px; z-index: 5;
  width: 34px; height: 34px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1; font-family: inherit; font-weight: 700;
  border: 1px solid var(--border-strong); border-radius: 50%;
  background: var(--panel-alt); color: var(--text);
  box-shadow: 0 1px 3px rgba(16,24,40,.10);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.app-dialog-close:hover {
  background: #dc2626;
  color: #fff;
  border-color: #b91c1c;
}
.app-dialog-close:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* O título não pode passar por baixo do "✕" */
.app-dialog-header { padding-right: 52px; }

/* O fundo escuro não responde ao cursor: deixa claro que não fecha por ali */
.app-dialog-backdrop { cursor: default; }

@media (max-width: 480px) {
  .app-dialog--md, .app-dialog--lg, .app-dialog--full { max-width: 100%; }
  .app-dialog-body { max-height: 62vh; }
}


/* ═══════════════════════════════════════════════════════════════════
   34. MINHA ESCALA (escala_trabalho.php)
   Migrado do <style> da página. O CSS de IMPRESSÃO (.jp-*) continua na
   própria página: aquela view é um documento A4 independente que não
   carrega esta folha de estilos.
   ═══════════════════════════════════════════════════════════════════ */

.me-destaque {
  border: 1px solid var(--border);
  border-left: 5px solid var(--accent);
  background: var(--panel-alt);
  border-radius: var(--radius);
  padding: 16px 18px; margin-bottom: 22px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.me-destaque--agora { border-left-color: var(--btn-success-bg); }
.me-destaque-corpo { flex: 1 1 240px; min-width: 0; }
.me-destaque-local { font-size: 1.4rem; font-weight: 800; line-height: 1.15; margin: 0; color: var(--text); overflow-wrap: anywhere; }
.me-destaque-quando { font-size: 14px; color: var(--muted); margin-top: 4px; }
.me-destaque-horario {
  text-align: center; padding-left: 18px;
  border-left: 1px solid var(--border); flex: 0 0 auto; min-width: 130px;
}
.me-destaque-horario .h {
  font-size: 1.5rem; font-weight: 800; color: var(--text);
  line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.me-destaque-horario .l {
  font-size: 11px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--muted); font-weight: 700;
}
.me-selo {
  display: inline-block; margin-bottom: 7px; padding: 3px 11px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase;
  background: var(--btn-primary-bg); color: var(--btn-primary-text);
}
.me-destaque--agora .me-selo { background: var(--btn-success-bg); color: var(--btn-success-text); }

.me-lista-dias { display: flex; flex-direction: column; gap: 8px; }
.me-dia {
  display: flex; align-items: stretch; gap: 14px;
  border: 1px solid var(--border); border-radius: 9px;
  padding: 10px 14px; background: var(--panel);
}
.me-dia--hoje { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--panel-alt); }
.me-dia--folga { background: var(--panel-alt); }
.me-dia-data {
  flex: 0 0 118px; display: flex; flex-direction: column; justify-content: center;
  border-right: 1px solid var(--border); padding-right: 12px;
}
.me-dia-data .dw { font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); }
.me-dia--hoje .me-dia-data .dw { color: var(--accent); }
.me-dia-data .dd { font-size: 16px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }

.me-dia-turnos { flex: 1; display: flex; flex-wrap: wrap; gap: 7px; align-items: center; min-width: 0; }
.me-turno {
  display: inline-flex; align-items: center; gap: 9px; flex-wrap: wrap;
  border: 1px solid var(--border); border-left: 4px solid var(--accent);
  border-radius: 7px; padding: 6px 12px; background: var(--panel); min-width: 0;
}
.me-turno .hora { font-size: 14px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.me-turno .local { font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
.me-turno .obs { font-size: 12px; color: var(--muted); }
.me-dia-horas { flex: 0 0 auto; align-self: center; font-size: 13px; font-weight: 800; color: var(--accent); white-space: nowrap; }
.me-folga-txt { font-size: 14px; color: var(--muted); font-style: italic; align-self: center; }

/* Origem do turno: mesma paleta dos emblemas de status */
.me-origem-base    { background:#dbeafe; color:#1d4ed8; }
.me-origem-excecao { background:#fee2e2; color:#b91c1c; }
.me-origem-avulsa  { background: var(--panel-alt); color: var(--muted); }
html.dark-mode .me-origem-base    { background:#12293f; color:#93c5fd; }
html.dark-mode .me-origem-excecao { background:#3b1414; color:#fca5a5; }

@media (max-width: 640px) {
  .me-destaque-horario { border-left: none; padding-left: 0; text-align: left; }
  .me-dia { flex-direction: column; gap: 8px; }
  .me-dia-data {
    flex: none; border-right: none; border-bottom: 1px solid var(--border);
    padding: 0 0 7px; flex-direction: row; gap: 8px; align-items: baseline;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   35. CONFIGURAÇÃO DE ESCALAS (configuracao_escala.php)
   Migrado do <style> da página. O CSS de IMPRESSÃO do relatório continua
   na própria página: aquele documento A4 não carrega esta folha de estilos.
   ═══════════════════════════════════════════════════════════════════ */
/* =====================================================================
   DESIGN SYSTEM PRÓPRIO — sem dependência de Bootstrap ou qualquer outro
   framework externo. Todas as classes abaixo são específicas desta tela.
   ===================================================================== */
/* A tela de escalas tem o próprio conjunto de tokens. Todos eram claros e
   fixos, sem contraparte para o modo escuro — por isso o card saía branco
   enquanto os campos, que usam os tokens globais, saíam escuros. Agora todo
   fundo/borda/texto sai daqui, e o bloco html.dark-mode logo abaixo troca o
   conjunto inteiro de uma vez. */
.escala-app {
  --cor-primaria: #2563eb; --cor-primaria-escura: #1d4ed8;
  --cor-perigo: #dc2626; --cor-perigo-escura: #b91c1c;
  --cor-sucesso: #16a34a; --cor-aviso: #d97706;
  --cor-texto: #1f2937; --cor-texto-suave: #6b7280;
  --cor-borda: #e2e5ea; --cor-borda-forte: #d1d5db;
  --cor-superficie: #ffffff; --cor-fundo-suave: #f7f8fa;
  --cor-tint-azul: #f5f8ff;      --cor-tint-azul-borda: #dbe4ff;
  --cor-tint-vermelho: #fff6f6;  --cor-tint-vermelho-borda: #ffd9d9;
  --cor-tint-ambar: #fffbeb;     --cor-tint-ambar-borda: #fde68a;  --cor-tint-ambar-texto: #78350f;
  --cor-tint-verde: #f0fdf4;     --cor-tint-verde-borda: #bbf7d0;  --cor-tint-verde-texto: #14532d;
  --raio: 10px; --raio-sm: 6px;
  color: var(--cor-texto); font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

html.dark-mode .escala-app {
  --cor-texto: var(--text); --cor-texto-suave: var(--muted);
  --cor-borda: var(--border); --cor-borda-forte: var(--border-strong);
  --cor-superficie: var(--panel); --cor-fundo-suave: var(--panel-alt);
  --cor-tint-azul: rgba(37,99,235,.14);      --cor-tint-azul-borda: rgba(37,99,235,.38);
  --cor-tint-vermelho: rgba(220,38,38,.14);  --cor-tint-vermelho-borda: rgba(220,38,38,.40);
  --cor-tint-ambar: rgba(217,119,6,.16);     --cor-tint-ambar-borda: rgba(217,119,6,.42);  --cor-tint-ambar-texto: #fcd34d;
  --cor-tint-verde: rgba(22,163,74,.14);     --cor-tint-verde-borda: rgba(22,163,74,.40);  --cor-tint-verde-texto: #86efac;
}
.escala-app * { box-sizing: border-box; }
.escala-app .ea-wrap { max-width: 1320px; margin: 24px auto; padding: 0 16px; }
.escala-app .ea-panel { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio); box-shadow: 0 1px 3px rgba(16,24,40,0.06); padding: 28px; }

/* Cabeçalho */
.escala-app .ea-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--cor-borda); padding-bottom: 20px; margin-bottom: 24px; }
.escala-app .ea-header h1 { font-size: 1.4rem; font-weight: 800; margin: 0 0 4px; }
.escala-app .ea-header p { margin: 0; color: var(--cor-texto-suave); font-size: 0.92rem; }
.escala-app .ea-stats { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.escala-app .ea-stat { display: flex; align-items: center; gap: 10px; background: var(--cor-fundo-suave); border: 1px solid var(--cor-borda); border-radius: var(--raio-sm); padding: 10px 16px; min-width: 160px; }
.escala-app .ea-stat .ic { font-size: 1.3rem; line-height: 1; }
.escala-app .ea-stat .num { font-weight: 800; font-size: 1.15rem; line-height: 1.1; color: var(--cor-texto); }
.escala-app .ea-stat .lbl { font-size: 0.74rem; color: var(--cor-texto-suave); line-height: 1.2; }
.escala-app .ea-stat.alerta { background: var(--cor-tint-vermelho); border-color: var(--cor-tint-vermelho-borda); }
.escala-app .ea-stat.alerta .num { color: var(--cor-perigo); }

/* Botões */
.escala-app .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid transparent;
  border-radius: var(--raio-sm); padding: 9px 16px; font-size: 0.86rem; font-weight: 700; cursor: pointer; transition: all .15s ease; line-height: 1.2; white-space: nowrap; }
.escala-app .btn:disabled { opacity: 0.6; cursor: not-allowed; }
.escala-app .btn-sm { padding: 5px 10px; font-size: 0.78rem; }
.escala-app .btn-primary { background: var(--cor-primaria); color: #fff; }
.escala-app .btn-primary:hover { background: var(--cor-primaria-escura); }
.escala-app .btn-danger { background: var(--cor-perigo); color: #fff; }
.escala-app .btn-danger:hover { background: var(--cor-perigo-escura); }
.escala-app .btn-dark { background: #1f2937; color: #fff; }
.escala-app .btn-dark:hover { background: #111827; }
.escala-app .btn-outline { background: var(--cor-superficie); color: var(--cor-primaria); border-color: var(--cor-tint-azul-borda); }
.escala-app .btn-outline:hover { background: var(--cor-tint-azul); }
.escala-app .btn-outline-danger { background: var(--cor-superficie); color: var(--cor-perigo); border-color: var(--cor-tint-vermelho-borda); }
.escala-app .btn-outline-danger:hover { background: var(--cor-tint-vermelho); }
.escala-app .btn-outline-secondary { background: var(--cor-superficie); color: var(--cor-texto-suave); border-color: var(--cor-borda); }
.escala-app .btn-outline-secondary:hover { background: var(--cor-fundo-suave); }
.escala-app .btn-block { width: 100%; }

/* Formulários — layout horizontal em grid (nunca sobrepõe: se não couber, quebra linha) */
.escala-app .ea-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px 18px; align-items: end; }
.escala-app .ea-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.escala-app .ea-field.grow2 { grid-column: span 2; }
.escala-app .ea-field.fixed-btn { min-width: 0; }
.escala-app .ea-field.fixed-btn > .btn { width: 100%; height: 38px; }
.escala-app .ea-field label { font-size: 0.76rem; font-weight: 700; color: var(--cor-texto-suave); text-transform: uppercase; letter-spacing: .02em; }
.escala-app .ea-field input, .escala-app .ea-field select { box-sizing: border-box; border: 1px solid var(--cor-borda-forte); border-radius: var(--raio-sm); padding: 8px 10px; font-size: 0.86rem; color: var(--cor-texto); background: var(--cor-superficie); height: 38px; width: 100%; min-width: 0; }
.escala-app .ea-field input:focus, .escala-app .ea-field select:focus { outline: none; border-color: var(--cor-primaria); box-shadow: 0 0 0 3px rgba(37,99,235,0.15); }
.escala-app .ea-field input[type=color] { padding: 3px; height: 38px; cursor: pointer; max-width: 90px; }
.escala-app .ea-field input[type=time], .escala-app .ea-field input[type=date] { padding-right: 6px; }
.escala-app .ea-hint { font-size: 0.78rem; color: var(--cor-tint-ambar-texto); background: var(--cor-tint-ambar); border: 1px dashed var(--cor-tint-ambar-borda); border-radius: var(--raio-sm); padding: 8px 12px; margin-top: 12px; }


/* Blocos de formulário (Base / Exceção lado a lado, cada um horizontal por dentro) */
.escala-app .ea-form-block { border: 1px solid var(--cor-borda); border-radius: var(--raio); padding: 18px 20px; margin-bottom: 16px; }
.escala-app .ea-form-block.base { background: var(--cor-tint-azul); border-color: var(--cor-tint-azul-borda); }
.escala-app .ea-form-block.excecao { background: var(--cor-tint-vermelho); border-color: var(--cor-tint-vermelho-borda); }
.escala-app .ea-form-title { font-weight: 800; font-size: 0.98rem; margin: 0 0 4px; display: flex; align-items: center; gap: 8px; }
.escala-app .ea-form-desc { font-size: 0.82rem; color: var(--cor-texto-suave); margin: 0 0 14px; }

/* Painéis de seção / listagens */
.escala-app .ea-section-title { font-weight: 800; font-size: 1rem; margin: 28px 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--cor-borda); display: flex; align-items: center; gap: 8px; }
.escala-app .ea-section-title:first-child { margin-top: 0; }
.escala-app .ea-card { border: 1px solid var(--cor-borda); border-radius: var(--raio); margin-bottom: 14px; overflow: hidden; }
.escala-app .ea-card-head { background: var(--cor-fundo-suave); padding: 10px 16px; font-weight: 800; font-size: 0.92rem; border-bottom: 1px solid var(--cor-borda); display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.escala-app .ea-card-body { padding: 14px 16px; }
.escala-app .ea-card.accent { border-left: 4px solid var(--cor-primaria); }
.escala-app .ea-subtitle { font-weight: 800; font-size: 0.8rem; margin: 14px 0 8px; text-transform: uppercase; letter-spacing: .02em; color: var(--cor-texto-suave); }
.escala-app .ea-subtitle:first-child { margin-top: 0; }
.escala-app .ea-empty { font-size: 0.82rem; color: #9ca3af; text-align: center; padding: 10px 0; font-style: italic; }

/* Linha de lançamento */
.escala-app .ea-row { border: 1px solid var(--cor-borda); border-radius: var(--raio-sm); padding: 9px 12px; margin-bottom: 7px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; background: var(--cor-superficie); }
.escala-app .ea-row .ea-row-info { font-size: 0.85rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.escala-app .ea-row .ea-row-actions { display: flex; gap: 6px; flex-shrink: 0; }
.escala-app .ea-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }

/* Tags/etiquetas — CONTRASTE GARANTIDO (texto sempre branco sobre fundo forte) */
.escala-app .ea-tag { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 0.7rem; font-weight: 800; color: #ffffff !important; letter-spacing: .01em; line-height: 1.4; }
.escala-app .ea-tag-base { background: #2563eb; }
.escala-app .ea-tag-excecao { background: #dc2626; }
.escala-app .ea-tag-avulsa { background: #4b5563; }
.escala-app .ea-tag-count { background: #dc2626; margin-left: 6px; }

/* Seletor de múltiplos dias da semana (checkboxes em formato de pílula) */
.escala-app .ea-dias-semana { display: flex; flex-wrap: wrap; gap: 6px; }
.escala-app .ea-dias-semana .ea-dia-pill { position: relative; }
.escala-app .ea-dias-semana .ea-dia-pill input[type=checkbox] { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.escala-app .ea-dias-semana .ea-dia-pill span { display: flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 8px; border: 1px solid var(--cor-borda-forte); border-radius: var(--raio-sm); font-size: 0.78rem; font-weight: 700; color: var(--cor-texto-suave); background: var(--cor-superficie); user-select: none; transition: all .1s ease; }
.escala-app .ea-dias-semana .ea-dia-pill input[type=checkbox]:checked + span { background: var(--cor-primaria); border-color: var(--cor-primaria); color: #fff; }
.escala-app .ea-dias-semana .ea-dia-pill input[type=checkbox]:focus-visible + span { outline: none; box-shadow: 0 0 0 3px rgba(37,99,235,0.25); }

/* Alertas */
.escala-app .ea-alert { display: flex; align-items: flex-start; gap: 10px; border-radius: var(--raio); padding: 14px 16px; margin-bottom: 20px; font-size: 0.88rem; }
.escala-app .ea-alert-aviso { background: var(--cor-tint-ambar); border: 1px solid var(--cor-tint-ambar-borda); color: var(--cor-tint-ambar-texto); }
.escala-app .ea-alert-sucesso { background: var(--cor-tint-verde); border: 1px solid var(--cor-tint-verde-borda); color: var(--cor-tint-verde-texto); font-size: 0.85rem; }
.escala-app .ea-alert .ea-alert-close { margin-left: auto; background: none; border: none; font-size: 1.1rem; line-height: 1; cursor: pointer; color: inherit; opacity: 0.6; }
.escala-app .ea-alert .ea-alert-close:hover { opacity: 1; }

/* Grid genérico */
.escala-app .ea-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 900px) { .escala-app .ea-grid-2 { grid-template-columns: 1fr; } }

/* Abas */
.escala-app .ea-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--cor-borda); margin-bottom: 22px; flex-wrap: wrap; }
.escala-app .ea-tab-btn { padding: 11px 18px; border: none; background: none; font-size: 0.9rem; font-weight: 700; color: var(--cor-texto-suave); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; transition: all .15s ease; }
.escala-app .ea-tab-btn:hover { color: var(--cor-primaria); }
.escala-app .ea-tab-btn.active { color: var(--cor-primaria); border-bottom-color: var(--cor-primaria); }
.escala-app .ea-tab-content { display: none; }
.escala-app .ea-tab-content.active { display: block; }

/* Modal (custom, sem dependência de framework) */
.escala-app .ea-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(17,24,39,0.55); z-index: 1000; align-items: center; justify-content: center; padding: 20px; }
.escala-app .ea-modal-overlay.is-open { display: flex; }
.escala-app .ea-modal-box { background: var(--cor-superficie); border-radius: var(--raio); max-width: 620px; width: 100%; max-height: 88vh; display: flex; flex-direction: column; box-shadow: 0 10px 40px rgba(0,0,0,0.25); }
.escala-app .ea-modal-box.lg { max-width: 760px; }
.escala-app .ea-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--cor-borda); }
.escala-app .ea-modal-head h3 { margin: 0; font-size: 1.05rem; font-weight: 800; }
.escala-app .ea-modal-close { background: none; border: none; font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--cor-texto-suave); padding: 0 4px; }
.escala-app .ea-modal-close:hover { color: var(--cor-texto); }
.escala-app .ea-modal-body { padding: 20px; overflow-y: auto; }

/* Filtro/relatório */
.escala-app .ea-filter-bar { background: var(--cor-fundo-suave); border: 1px solid var(--cor-borda); border-radius: var(--raio); padding: 16px 18px; margin-bottom: 18px; }

/* Calendário / Visão por Local */
.escala-app .ea-cal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.escala-app .ea-cal-card { border: 1px solid var(--cor-borda); border-radius: var(--raio); overflow: hidden; }
.escala-app .ea-cal-head { background: var(--cor-fundo-suave); padding: 9px 14px; font-weight: 800; font-size: 0.85rem; border-bottom: 1px solid var(--cor-borda); display: flex; justify-content: space-between; align-items: center; }
.escala-app .ea-cal-body { padding: 12px 14px; }
.escala-app .ea-timeline { position: relative; height: 28px; border-radius: 5px; background: var(--cor-fundo-suave); border: 1px solid var(--cor-borda-forte); overflow: hidden; display: flex; }
.escala-app .ea-timeline-seg { height: 100%; position: relative; border-right: 1px solid rgba(255,255,255,0.6); }
.escala-app .ea-legend { font-size: 0.76rem; display: flex; align-items: center; gap: 6px; margin-top: 5px; }

/* =====================================================================
   NOVO: barra de seção (título + ações em lote), seletor de quantidade,
   caixas de seleção nas linhas e paginação das listas.
   ===================================================================== */
.escala-app .ea-section-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin: 28px 0 14px; padding-bottom: 8px;
  border-bottom: 2px solid var(--cor-borda);
}
.escala-app .ea-section-bar .ea-section-bar-titulo {
  font-size: 1rem; font-weight: 800; color: var(--cor-texto); margin: 0;
}
.escala-app .ea-section-bar .ea-section-bar-acoes {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

/* Seletor "Exibir N por página" */
.escala-app .ea-qtd-box {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.78rem; font-weight: 700; color: var(--cor-texto-suave);
  white-space: nowrap;
}
.escala-app .ea-qtd-box select {
  padding: 5px 8px; border: 1px solid var(--cor-borda-forte); border-radius: var(--raio-sm);
  font-size: 0.78rem; font-weight: 700; color: var(--cor-texto); background: var(--cor-superficie);
  font-family: inherit; cursor: pointer;
}

/* Contador de selecionados no botão */
.escala-app .ea-contador {
  display: inline-block; min-width: 18px; padding: 0 5px;
  background: rgba(255,255,255,0.25); border-radius: 20px;
  font-size: 0.7rem; font-weight: 800; margin-left: 4px;
}
.escala-app .btn-outline-danger .ea-contador { background: rgba(220,38,38,0.14); }

/* Caixa de seleção dentro de cada linha e no cabeçalho do card */
.escala-app .ea-chk {
  width: 15px; height: 15px; flex-shrink: 0; cursor: pointer;
  accent-color: var(--cor-perigo); margin-right: 2px;
}
.escala-app .ea-row.ea-row-marcada { background: var(--cor-tint-vermelho); border-color: var(--cor-tint-vermelho-borda); }
.escala-app .ea-card-head .ea-chk-todos {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.72rem; font-weight: 700; color: var(--cor-texto-suave);
  cursor: pointer; user-select: none; margin-left: auto; white-space: nowrap;
}

/* "Ver mais" dentro de uma lista longa do card */
.escala-app .ea-ver-mais {
  border: 1px dashed var(--cor-borda); background: var(--cor-fundo-suave);
  color: var(--cor-primaria); border-radius: var(--raio-sm);
  padding: 6px 12px; font-size: 0.76rem; font-weight: 700; cursor: pointer;
  width: 100%; margin-top: 4px; font-family: inherit;
}
.escala-app .ea-ver-mais:hover { background: var(--cor-tint-azul); border-color: var(--cor-primaria); }

/* Paginação das listas de cards */
.escala-app .ea-paginacao {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; flex-wrap: wrap; margin: 16px 0 4px;
}
.escala-app .ea-paginacao button {
  min-width: 32px; padding: 6px 10px;
  border: 1px solid var(--cor-borda); background: var(--cor-superficie);
  border-radius: var(--raio-sm); cursor: pointer;
  font-size: 0.8rem; font-weight: 700; color: var(--cor-texto);
  font-family: inherit;
}
.escala-app .ea-paginacao button:hover:not(:disabled) { background: var(--cor-fundo-suave); }
.escala-app .ea-paginacao button:disabled { opacity: 0.4; cursor: not-allowed; }
.escala-app .ea-paginacao button.ativa {
  background: var(--cor-primaria); border-color: var(--cor-primaria); color: #fff;
}
.escala-app .ea-paginacao .ea-paginacao-info {
  font-size: 0.76rem; color: var(--cor-texto-suave); margin: 0 10px; font-weight: 600;
}

@media (max-width: 640px) {
  .escala-app .ea-panel { padding: 18px; }
  .escala-app .ea-form-row { grid-template-columns: 1fr; }
  .escala-app .ea-field { min-width: 0; }
  .escala-app .ea-section-bar { align-items: flex-start; flex-direction: column; }
}


/* ═══════════════════════════════════════════════════════════════════
   36. FINANCEIRO — CONTAS A PAGAR / RECEBER / RELATÓRIOS
   Migrado dos <style> das páginas do módulo financeiro.
   ═══════════════════════════════════════════════════════════════════ */

/* Indicador de entrada (verde) e de saída (vermelho) */
.kpi--entrada { border-left-color: var(--btn-success-bg); }
.kpi--entrada .valor { color: var(--btn-success-bg); }
.kpi--saida   { border-left-color: var(--btn-danger-bg); }
.kpi--saida .valor { color: var(--btn-danger-bg); }

/* Emblemas do fluxo financeiro */
.badge-pago,     .status-badge--pago     { background:#fee2e2; color:#991b1b; }
.badge-recebido, .status-badge--recebido { background:#dcfce7; color:#166534; }
html.dark-mode .badge-pago,     html.dark-mode .status-badge--pago     { background:#3b1414; color:#fca5a5; }
html.dark-mode .badge-recebido, html.dark-mode .status-badge--recebido { background:#14331f; color:#86efac; }

/* Situação de um vencimento */
.status-badge--pendente { background:#e0f2fe; color:#0369a1; }
.status-badge--agendado { background:#ede9fe; color:#5b21b6; }
.status-badge--atrasado { background:#fee2e2; color:#b91c1c; }
.status-badge--quitado  { background:#dcfce7; color:#15803d; }
html.dark-mode .status-badge--pendente { background:#12293f; color:#93c5fd; }
html.dark-mode .status-badge--agendado { background:#241a45; color:#c4b5fd; }
html.dark-mode .status-badge--atrasado { background:#3b1414; color:#fca5a5; }
html.dark-mode .status-badge--quitado  { background:#14331f; color:#86efac; }

/* Valores monetários: alinhados à direita e com dígitos de mesma largura */
.valor-moeda { text-align:right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.valor-entrada { color: var(--btn-success-bg); font-weight: 700; }
.valor-saida   { color: var(--btn-danger-bg);  font-weight: 700; }

/* Caixa de filtros legada do financeiro — apelido do .painel-filtros */
.filter-box {
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 15px;
  margin-bottom: 20px;
}
.filter-box label { font-size: 13px; margin-bottom: 6px; display: block; font-weight: 600; }

/* Cartão de resumo legado — apelido do .kpi */
.stat-card {
  border: 1px solid var(--border);
  border-left: 5px solid var(--accent);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
  background: var(--panel);
}
.stat-card.recebido { border-left-color: var(--btn-success-bg); }
.stat-card.pago     { border-left-color: var(--btn-danger-bg); }
.stat-card.saldo    { border-left-color: var(--accent); }

/* ═══════════════════════════════════════════════════════════════════
   37. IMPRESSÃO DE TELA
   Vale para qualquer página do sistema impressa direto do navegador
   (as views A4 dedicadas trazem o próprio CSS e não passam por aqui).
   ═══════════════════════════════════════════════════════════════════ */
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  html, body { background: #fff !important; color: #000; }
  body { font-size: 10pt; }

  /* Margem garantida por padding do conteúdo: sobrevive a "Margens: Nenhuma". */
  .container { max-width: none !important; width: auto !important; margin: 0 !important; padding: 4mm !important; }
  .card { border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 0 8mm !important; background: #fff !important; }

  .no-print, .header, #main-header, .site-footer,
  .page-header-acoes, .painel-filtros, .filter-box,
  .pagination-controls, .paginacao-bar, #app-dialog-root { display: none !important; }

  .table-responsive { overflow: visible !important; }
  .table { width: 100% !important; border-collapse: collapse !important; font-size: 9pt !important; }
  .table thead { display: table-header-group; }
  .table thead th { background: #eef2f7 !important; color: #000 !important; border: 1px solid #cbd5e1 !important; padding: 5px 7px !important; }
  .table tbody td { border: 1px solid #cbd5e1 !important; padding: 5px 7px !important; color: #000 !important; background: #fff !important; }
  .table tr { page-break-inside: avoid; break-inside: avoid; }

  .kpi-row { display: grid !important; grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
  .kpi, .status-badge, .alert-box { page-break-inside: avoid; break-inside: avoid; }
  a[href]::after { content: none !important; }   /* não imprime a URL depois do link */
}

/* A view "?export=pdf" abre sem menu e sem rodapé: só o conteúdo. */
body.modo-impressao .header,
body.modo-impressao .site-footer { display: none; }
body.modo-impressao .container { margin-top: 12px; }


/* ═══════════════════════════════════════════════════════════════════
   38. POPUP DE COLUNAS DO PDF (relatorios.php)
   Migrado do <style> da página. Segue a regra do popup padrão: fecha
   apenas pelo botão, nunca por clique no fundo ou tecla Esc.
   ═══════════════════════════════════════════════════════════════════ */
.pdf-modal {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.pdf-modal[hidden] { display: none !important; }
.pdf-modal-fundo { position: absolute; inset: 0; background: rgba(17,24,39,.45); cursor: default; }
.pdf-modal-painel {
  position: relative; z-index: 1;
  background: var(--modal-bg); color: var(--text);
  border-radius: var(--radius); box-shadow: 0 12px 40px rgba(0,0,0,.22);
  max-width: 640px; width: 100%; max-height: 90vh; overflow: auto;
  padding: 20px 20px 18px;
}
.pdf-modal-painel h3 { margin: 0 0 4px; padding-right: 44px; }
#pdfModalColunas {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px; margin: 16px 0; max-height: 320px; overflow-y: auto;
  padding: 12px; background: var(--panel-alt);
  border: 1px solid var(--border); border-radius: 8px;
}
.pdf-col-check { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.pdf-modal-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 12px; }
@media (max-width: 480px) {
  #pdfModalColunas { grid-template-columns: 1fr 1fr; }
  .pdf-modal-actions .btn { flex: 1; text-align: center; }
}


/* ═══════════════════════════════════════════════════════════════════
   39. GERENCIADOR DE RECIBOS (contas_recibos.php)
   Migrado do <style> da página. As cores fixas viraram variáveis do tema,
   então o modo contraste passa a funcionar nesta tela.
   ═══════════════════════════════════════════════════════════════════ */
    /* ---- Layout específico desta página (reaproveita .container/.card/.btn/
       .table/.modal/.form-grid/.field já globais do style.css do site;
       este bloco cobre só o que é específico do Gerenciador de Recibos) ---- */
    .recibos-toolbar { display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; align-items:center; margin-bottom:20px; }
    .recibos-toolbar h2 { margin:0; }

    .recibos-tabs { display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:18px; }
    .recibos-tab-btn {
      background:none; border:none; padding:10px 16px; margin:0; cursor:pointer;
      font-size:14px; font-weight:600; color:var(--muted); border-bottom:2px solid transparent;
    }
    .recibos-tab-btn.is-active { color:var(--text); border-bottom-color:var(--accent); }
    .recibos-tab-pane { display:none; }
    .recibos-tab-pane.is-active { display:block; }

    .recibos-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
    .recibos-model-card { display:flex; flex-direction:column; }
    .recibos-model-card h3 { margin:0 0 6px; font-size:17px; }
    .recibos-model-actions { margin-top:auto; padding-top:10px; display:flex; flex-wrap:wrap; gap:6px; }
    .recibos-empty { padding:24px; text-align:center; color:var(--muted); }
    td.recibos-empty { padding:16px; }

    .recibos-filtros { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; margin-bottom:16px; }
    .recibos-filtros .field { min-width:170px; }
    .recibos-filtros .field label { font-size:12px; }

    .recibos-vars-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px 14px; margin:10px 0; }
    .field textarea { width:100%; margin:0; }
    .recibos-img-preview {
      display: block;
      align-self: flex-start;
      width: auto;
      max-width: 100%;
      max-height: 90px;
      object-fit: contain;
      margin-top: 6px;
    }

    .recibos-usuarios-lista { max-height:260px; overflow-y:auto; border:1px solid var(--border); border-radius:8px; padding:10px; }
    .recibos-usuarios-lista label { display:flex; align-items:center; gap:8px; padding:6px 4px; font-weight:400; }

    .recibo { position:relative; min-height:430px; overflow:hidden; padding:32px; background:var(--panel); border:1px solid var(--border); }
    .recibo__marca { position:absolute; z-index:0; top:50%; left:50%; max-width:80%; max-height:80%; opacity:.12; transform:translate(-50%,-50%); pointer-events:none; }
    .recibo__conteudo { position:relative; z-index:1; }
    .recibo__cabecalho { display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:2px solid var(--text); padding-bottom:16px; margin-bottom:28px; }
    .recibo__cabecalho h3 { margin:0; }
    .recibo__logo { max-width:200px; max-height:72px; object-fit:contain; }
    .recibo__texto { white-space:pre-wrap; font-size:1.1rem; line-height:1.8; }
    .recibo__assinatura { margin-top:34px; text-align:center; }
    .recibo__assinatura img { display:block; max-height:65px; max-width:220px; margin:0 auto 4px; }
    .recibo__rodape { position:relative; z-index:1; margin-top:28px; padding-top:14px; border-top:1px solid var(--border); display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; align-items:flex-end; }
    .codigo { font-family:monospace; font-weight:700; letter-spacing:2px; }

    /* ---- Impressão do recibo (tela e "Salvar como PDF" do navegador) ----
       Todo o bloco é restrito a body.pagina-recibos: este é o CSS único do
       sistema, e sem escopo estas regras afetariam a impressão de todas as
       telas. */
    @media print {
      /* A4 RETRATO, sempre. A seção 37 define paisagem como padrão do sistema
         (telas de relatório são largas); aqui a página nomeada sobrepõe isso
         só para o recibo, sem mexer no restante. */
      @page recibo { size: A4 portrait; margin: 10mm; }
      body.pagina-recibos .recibo { page: recibo; }

      /* Só o recibo vai ao papel. display:none nos irmãos, e não
         visibility:hidden: o elemento invisível continuava ocupando espaço e
         empurrava o recibo para baixo. */
      body.pagina-recibos > *:not(#modalVisualizar) { display: none !important; }

      body.pagina-recibos #modalVisualizar {
        display: block !important;
        position: static !important;
        left: auto !important; top: auto !important;
        width: auto !important; height: auto !important;
        margin: 0 !important; padding: 0 !important;
        background: none !important; overflow: visible !important;
      }

      /* Era aqui que o recibo saía cortado: .modal-content tem max-height:92vh
         com overflow:hidden e .modal-body tem overflow-y:auto — na impressão o
         vh vale a altura de UMA página, então tudo que passava disso sumia. No
         papel o conteúdo precisa fluir por quantas páginas forem necessárias. */
      body.pagina-recibos #modalVisualizar .modal-content,
      body.pagina-recibos #modalVisualizar .modal-body,
      body.pagina-recibos #areaImpressao {
        display: block !important;
        width: auto !important; max-width: 100% !important;
        height: auto !important; max-height: none !important;
        min-height: 0 !important;
        overflow: visible !important;
        margin: 0 !important; padding: 0 !important;
        border: 0 !important; border-radius: 0 !important;
        box-shadow: none !important; background: #fff !important;
      }

      /* Margem de segurança garantida pelo padding do próprio recibo, e não
         só pela margem da página: quando o usuário escolhe "Margens: Nenhuma"
         no diálogo de impressão, a margem do @page é descartada e o conteúdo
         iria encostar na borda do papel. É a mesma regra da seção 37. */
      body.pagina-recibos #areaImpressao {
        padding: 10mm !important;
        /* clone repete o padding em cada fatia quando o recibo passa de uma
           página; sem isso a página 2 começaria colada no topo do papel. */
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
      }

      body.pagina-recibos .recibo__conteudo,
      body.pagina-recibos .recibo__rodape { break-inside: auto; }
      body.pagina-recibos .recibo__cabecalho,
      body.pagina-recibos .recibo__assinatura { break-inside: avoid; }
      /* A marca d'água é posicionada em relação ao recibo; sem isso ela
         reaparece sobre cada página. */
      body.pagina-recibos .recibo__marca { position: absolute !important; }
    }


/* ═══════════════════════════════════════════════════════════════════
   40. CADASTRO DE USUÁRIOS (usuarios.php)
   Migrado do <style> da página.
   ═══════════════════════════════════════════════════════════════════ */
/* O modal tem altura máxima e só o corpo rola: sem isso a grade de
   permissões extrapola a tela e o excesso é cortado, em vez de rolar. */
#editModal .modal-content{
  max-height:90vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
/* O formulário (#editForm) fica entre .modal-content e .modal-body no HTML.
   Sem isso, o <form> é o filho direto do container flex mas não participa
   do layout flex: ele cresce até a altura do conteúdo, estoura o
   max-height do modal e o excesso é cortado (overflow:hidden do
   .modal-content) em vez de rolar dentro do .modal-body. */
#editModal .modal-content > form{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
}
#editModal .modal-body{
  overflow-y:auto;
  overflow-x:hidden;
  flex:1 1 auto;
  min-height:0;
}
/* Listas internas dos modais de setores e modelos: rolagem vertical própria,
   para o modal não crescer sem limite. Substitui o style inline no wrapper. */
.table-responsive.table-scroll-sm { max-height: 250px; overflow-y: auto; }
.table-responsive.table-scroll-md { max-height: 300px; overflow-y: auto; }
/* Tabelas dentro de modal: rolam na vertical e ganham a moldura do bloco. */
.table-responsive.table-scroll-xs { max-height: 150px; overflow-y: auto; }
.table-responsive.table-em-modal {
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-top: 0;
}
.table-responsive.table-em-modal table.table { margin: 0; min-width: 0; }
.gestao-tabela-espaco { margin-bottom: 18px; }
.usu-2fa-resend{ margin-top:6px; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.usu-2fa-resend #edit_email_codigo_wrap{ display:flex; align-items:center; gap:6px; }
.usu-2fa-resend #edit_email_codigo{ width:140px; margin:0; }
/* A tabela de permissões (A/C/E/X por módulo) pode ficar mais larga que
   o modal em telas menores; isso garante rolagem lateral só nela, sem
   afetar o restante do formulário. */
/* A grade de permissões rola de lado pelo contêiner (.perm-table-wrap), e a
   tabela continua sendo UMA tabela. A versão antiga transformava a própria
   tabela em display:block dentro do popup, o que fazia thead e tbody virarem
   duas tabelas independentes: cada uma media as colunas sozinha e o cabeçalho
   A/C/E/X saía deslocado das caixas de marcar — 227px de diferença na primeira
   coluna de ação, medido no popup de edição. */
.usu-licencas-suporte { display: block; margin-top: 4px; font-size: 12px; opacity: .85; }

.perm-table-wrap{ margin-top:8px; }
.perm-table{ min-width:520px; }
.perm-table th:not(:first-child),
.perm-table td:not(:first-child){ width:58px; }
/* Barra "Aplicar modelo de permissões" / "Salvar como modelo" acima da
   grade de permissões — presente tanto no cadastro quanto na edição. */
.usu-perm-modelo-bar{
  display:flex;
  gap:10px;
  align-items:flex-end;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.usu-perm-modelo-select-field{
  flex:1;
  min-width:220px;
  margin:0;
}
.usu-perm-modelo-gerenciar-link{
  font-size:11px;
  text-decoration:none;
  color:var(--accent);
  font-weight:600;
  margin-left:auto;
  align-self:center;
}


/* ═══════════════════════════════════════════════════════════════════
   41. CONTAS A PAGAR (contas_apagar.php)
   Migrado do <style> da página.
   ═══════════════════════════════════════════════════════════════════ */
/* ── Contas a Pagar — ajustes específicos desta tela ──────────────
   Reaproveita .card, .btn, .table, .table-wrap, .modal, .field,
   .form-grid, .usu-toolbar, .badge, .pagination, .checkbox-field,
   .radio-group já definidos globalmente em style.css. */

.cap-resumo-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.cap-resumo-topo .field { margin: 0; min-width: 200px; }
.cap-resumo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
@media (max-width: 900px) { .cap-resumo-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .cap-resumo-grid { grid-template-columns: 1fr; } }
.cap-resumo-card { padding: 14px 16px; }
.cap-resumo-card .label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 6px; }
.cap-resumo-card .valor { font-size: 22px; font-weight: 700; margin: 0; }
.cap-resumo-card.cap-atrasado .valor { color: var(--btn-danger-bg); }
.cap-resumo-card.cap-pendente .valor { color: var(--btn-warning-bg); }
.cap-resumo-card.cap-pago .valor { color: var(--btn-success-bg); }

/* .cap-filtros é definido junto de .filtros-bar na seção 31.1 — uma regra só. */

.cap-cat-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.cap-cartao-badge { background: var(--panel-alt); border: 1px solid var(--border); border-radius: 6px; padding: 2px 8px; font-size: 12px; color: var(--muted); }
.cap-tipo-badge { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 999px; margin-left: 6px; background: var(--panel-alt); border: 1px solid var(--border); color: var(--muted); vertical-align: middle; }

.badge-status-pendente { background: rgba(194,65,12,.12); color: var(--btn-warning-bg); }
.badge-status-pago { background: rgba(21,128,61,.12); color: var(--btn-success-bg); }
.badge-status-atrasado { background: rgba(220,38,38,.12); color: var(--btn-danger-bg); }
.badge-status-agendado { background: rgba(37,99,235,.12); color: #2563eb; }
.badge-status-cancelado { background: var(--panel-alt); color: var(--muted); }

.cap-anexos-lista { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.cap-anexo-item { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-alt); font-size: 13px; }
.cap-anexo-item a { text-decoration: none; }
.cap-anexo-item .tipo-tag { font-size: 11px; color: var(--muted); text-transform: uppercase; margin-left: 6px; }
.cap-anexo-item-acoes { display: flex; gap: 6px; flex-shrink: 0; }
.cap-substituir-anexo-label { cursor: pointer; margin: 0; }
.cap-anexo-escopo { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  padding: 1px 7px; border-radius: 999px; background: var(--panel-alt); border: 1px solid var(--border); color: var(--muted); }
.cap-anexo-escopo-principal { background: rgba(37,99,235,.12); border-color: rgba(37,99,235,.3); color: #2563eb; }

.cap-tipo-opcoes { display: flex; gap: 16px; margin: 6px 0 14px; flex-wrap: wrap; }
.cap-tipo-opcoes label { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }

.cap-rec-opcoes, .cap-parc-opcoes, .cap-lembrete-opcoes { display: none; margin-top: 10px; padding: 12px; border: 1px dashed var(--border-strong); border-radius: 8px; background: var(--panel-alt); }
.cap-rec-opcoes.is-visible, .cap-parc-opcoes.is-visible, .cap-lembrete-opcoes.is-visible { display: block; }
.cap-rec-aviso { font-size: 12px; color: var(--muted); margin-top: 8px; }

.cap-parcelas-tabela { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13px; }
.cap-parcelas-tabela th, .cap-parcelas-tabela td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left; }
.cap-parcelas-tabela input { width: 100%; box-sizing: border-box; }

.cap-sino-btn { position: relative; }
.cap-sino-contador {
  position: absolute; top: -6px; right: -6px; background: var(--btn-danger-bg); color: #fff;
  font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
.cap-lembrete-item { padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 13px; }
.cap-lembrete-item:last-child { border-bottom: none; }
.cap-lembrete-item strong { display: block; margin-bottom: 2px; }
.cap-categorias-lista { display: flex; flex-direction: column; gap: 8px; }
.cap-categoria-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; }
.cap-categoria-item input[type=color] { width: 32px; height: 32px; padding: 0; border: none; border-radius: 6px; cursor: pointer; }
.cap-categoria-item .nome-input { flex: 1; margin: 0; }

.cap-logs-lista { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; margin-top: 6px; }
.cap-log-item { font-size: 12px; padding: 6px 8px; border-radius: 6px; background: var(--panel-alt); }
.cap-log-item .data { color: var(--muted); margin-right: 6px; }
.cap-log-item .cap-log-usuario { color: var(--muted); font-style: italic; }


.cap-loading { text-align: center; padding: 24px; color: var(--muted); }

/* ── Forma de pagamento: dado do cartão embaixo, não na frente ──── */
.cap-forma-cel { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; line-height: 1.3; }
.cap-forma-cel .cap-cartao-badge { margin: 0; }

/* ── Status: data agendada abaixo do rótulo "Agendado" ───────────── */
.cap-status-cel { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.cap-status-data-agendada { font-size: 11px; color: var(--muted); }

/* ── Botão de anexos (clipe azul minimalista) ────────────────────── */
.cap-btn-anexos {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px; border: none; cursor: pointer;
  background: #2563eb; color: #fff; transition: background .15s ease;
}
.cap-btn-anexos:hover { background: #1d4ed8; }
.cap-btn-anexos:disabled { background: var(--panel-alt); color: var(--muted); cursor: default; }
.cap-btn-anexos svg { width: 16px; height: 16px; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cap-btn-anexos .cap-anexos-contador {
  position: absolute; top: -6px; right: -6px; background: var(--btn-danger-bg); color: #fff;
  font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; padding: 0 3px;
}

.cap-anexos-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.cap-anexo-thumb { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; cursor: pointer; background: var(--panel-alt); text-decoration: none; color: inherit; display: block; transition: transform .12s ease, box-shadow .12s ease; }
.cap-anexo-thumb:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.12); }
.cap-anexo-thumb .thumb-imgbox { width: 100%; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; background: #fff; overflow: hidden; }
.cap-anexo-thumb .thumb-imgbox img { width: 100%; height: 100%; object-fit: cover; }
.cap-anexo-thumb .thumb-imgbox .thumb-pdf-icon { font-size: 34px; }
.cap-anexo-thumb .thumb-label { display: block; padding: 6px 8px; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-top: 1px solid var(--border); }

/* ── Múltiplos métodos de pagamento (split) ──────────────────────── */
.cap-metodos-opcoes { margin-top: 10px; padding: 12px; border: 1px dashed var(--border-strong); border-radius: 8px; background: var(--panel-alt); max-width: 100%; box-sizing: border-box; overflow: hidden; }

/* Cada método fica num "cartão" próprio, com os campos em FLEXBOX (em vez de
   grid auto-fill). Cada campo tem uma largura mínima e pode crescer/encolher
   (flex: 1 1 <base>), quebrando para a linha de baixo quando não couber —
   isso evita tanto o vazamento horizontal quanto a sobreposição de textos
   longos (ex.: a dica de parcelamento) por cima de campos vizinhos, porque
   cada campo é dono da sua própria largura real, não de uma fração de grid
   calculada. */
.cap-metodo-linha { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-bottom: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 6px; box-sizing: border-box; max-width: 100%; }
.cap-metodo-linha > div { flex: 1 1 150px; min-width: 150px; max-width: 100%; box-sizing: border-box; }
.cap-metodo-linha select, .cap-metodo-linha input { width: 100%; margin: 0; box-sizing: border-box; min-width: 0; }

/* Botão Remover e dica de parcelamento SEMPRE em linha própria, ocupando
   100% da largura do cartão — assim nunca ficam espremidos/cortados nem
   sobrepostos a outro campo, independente de quantos campos couberem antes
   deles na tela. */
.cap-metodo-linha > .cap-metodo-remover-wrap,
.cap-metodo-linha > .cap-metodo-dica-wrap { flex: 1 1 100%; min-width: 100%; box-sizing: border-box; }
.cap-metodo-remover-wrap { display: flex; justify-content: flex-end; }

/* Modo "simples" (confirmação de pagamento): só Método, Valor e Remover —
   modal mais estreito, então usamos uma base menor por campo. */
.cap-metodo-linha--simples > div { flex-basis: 140px; min-width: 140px; }

.cap-metodo-linha label { font-size: 11px; color: var(--muted); display: block; margin-bottom: 2px; }
.cap-metodo-dica-wrap { margin-top: -4px; }
.metodo-parcelas-dica { display: block; font-size: 11px; color: var(--muted); line-height: 1.4; overflow-wrap: break-word; word-break: break-word; }
.cap-metodos-total { font-size: 12px; margin: 6px 0 0; font-weight: 600; }
.cap-metodos-total.ok { color: var(--btn-success-bg); }
.cap-metodos-total.erro { color: var(--btn-danger-bg); }
.cap-info-tip { display: inline-block; cursor: help; color: #2563eb; font-weight: 700; }

/* Em telas estreitas cada campo ocupa a linha inteira — mais legível do que
   colunas espremidas. */
@media (max-width: 560px) {
  .cap-metodo-linha > div,
  .cap-metodo-linha--simples > div { flex-basis: 100%; min-width: 100%; }
}

/* Rede de segurança contra vazamento horizontal nos modais em geral: nada
   dentro do corpo do modal deve conseguir ultrapassar a largura do cartão,
   e o corpo rola verticalmente por conta própria se o conteúdo for maior
   que a tela (em vez de "vazar" pra fora do modal). */
.modal-content { box-sizing: border-box; max-width: min(720px, 94vw); }
.modal-body { box-sizing: border-box; overflow-x: hidden; overflow-y: auto; max-height: calc(85vh - 120px); }
.modal-body * { max-width: 100%; box-sizing: border-box; }
.modal-body input, .modal-body select, .modal-body textarea { min-width: 0; }
.cap-metodo-linha select:focus, .cap-metodo-linha input:focus { outline: 2px solid #2563eb; outline-offset: 1px; border-color: #2563eb; }

/* ── Modal "Confirmar pagamento": alinhamento dos campos ──────────
   O modal é estreito (420px) e reaproveita classes globais (.form-grid,
   .field, .checkbox-field). Aqui a gente escopa só o que precisa pra
   arrumar: os campos do topo (Data / Comprovante) empilhados em largura
   total, o(s) cartão(ões) de método (modo "simples") em duas colunas
   iguais, e o botão Remover encolhido e alinhado à direita — antes ele
   vinha esticado por causa do width:100% do .btn global. */
/* Data e Comprovante empilhados (1 coluna): o modal tem só 420px, e o
   controle nativo de <input type="file"> não encolhe — texto nele
   ("Escolher arquivo | Nenhum arquivo escolhido") só cabe sem cortar se
   tiver a largura inteira do modal, não meia largura. */
#modalPagamento #pagCamposTopo {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#modalPagamento #pagCamposTopo .field { margin: 0; min-width: 0; max-width: 100%; }
#modalPagamento #pagCamposTopo .field label { display: block; margin-bottom: 5px; }
#modalPagamento #pagCamposTopo input[type="date"] { width: 100%; box-sizing: border-box; }
#modalPagamento #pagComprovante {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-size: 13px;
}
#modalPagamento .checkbox-field {
  margin: 14px 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cap-metodo-linha--simples {
  display: grid;
  grid-template-columns: minmax(110px, 0.85fr) minmax(150px, 1.15fr);
  align-items: start;
  gap: 12px 16px;
}
.cap-metodo-linha--simples > div { min-width: 0; max-width: 100%; }
.cap-metodo-linha--simples > .cap-metodo-remover-wrap { grid-column: 1 / -1; }
/* A label "Valor TOTAL deste método (R$)" é bem mais longa que "Método" e
   pode quebrar em 2 linhas numa coluna estreita; sem isso, o campo de
   valor ficava empurrado mais pra baixo que o select, desalinhando as
   duas caixas. Reservando a mesma altura mínima (2 linhas) pras duas
   labels, os campos sempre começam na mesma altura, quebrando ou não. */
.cap-metodo-linha--simples > div:not(.cap-metodo-remover-wrap) {
  display: flex;
  flex-direction: column;
}
.cap-metodo-linha--simples > div:not(.cap-metodo-remover-wrap) label {
  min-height: 30px;
  display: flex;
  align-items: flex-end;
  margin-bottom: 4px;
}
/* O .btn global vem com width:100% (por isso o botão esticava a linha
   inteira); aqui a gente restringe pra ele encolher ao conteúdo e o
   justify-content:flex-end do wrapper conseguir empurrá-lo pra direita. */
.cap-metodo-linha--simples .cap-metodo-remover-wrap .btn {
  width: auto;
  flex: 0 0 auto;
}

@media (max-width: 480px) {
  .cap-metodo-linha--simples { grid-template-columns: 1fr; }
}

/* Ações em duas linhas dentro da coluna .col-acoes. */
.cap-acoes-linha { display: flex; flex-wrap: wrap; gap: 4px; }
.cap-acoes-linha:first-child { margin-bottom: 4px; }
.cap-acoes-linha .btn { margin: 0; white-space: nowrap; }
.cap-acoes-linha:empty { display: none; }

/* As regras próprias de .table-wrap e da paginação #capPaginacao foram
   removidas: a tela usa .table-responsive + .table (seção 7) e a barra
   .pagination-controls (seção 31.13). Manter cópias divergentes aqui era
   o que fazia a mesma tabela mudar de aparência entre telas. */


/* ═══════════════════════════════════════════════════════════════════
   42. CONTAS A RECEBER (contas_areceber.php)
   Migrado do <style> da página. O CSS do comprovante impresso continua
   embutido: aquele documento abre em janela nova, sem esta folha.
   ═══════════════════════════════════════════════════════════════════ */
/* ─────────────────────────────────────────────────────────────────
   Contas a Receber — estilos específicos desta página.
   Reaproveita integralmente os componentes globais do style.css
   (.card, .btn, .input/select, .table, .table-wrap, .pagination,
   .modal/.panel, .form-row, .filter-row, .radio-group, .badge) e
   define aqui apenas o que é próprio desta tela, sempre usando as
   variáveis de tema (var(--...)) para funcionar em modo claro/escuro.
   ───────────────────────────────────────────────────────────────── */

.car-topo {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: center; gap: 12px;
}
.car-topo h2 { margin: 0; font-size: 20px; }
.car-topo-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.car-topo-acoes .btn { margin: 0; }

/* Cards de resumo */
.car-resumo-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px; margin-bottom: 16px;
}
.car-resumo-item {
  background: var(--panel); border-radius: var(--radius); box-shadow: var(--card-shadow);
  padding: 14px 16px; border-left: 4px solid var(--accent);
}
.car-resumo-item.pendente { border-left-color: var(--btn-primary-bg); }
.car-resumo-item.atrasado { border-left-color: var(--btn-danger-bg); }
.car-resumo-item.pago     { border-left-color: var(--btn-success-bg); }
.car-resumo-item.hoje     { border-left-color: var(--btn-warning-bg); }
.car-resumo-label { font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.car-resumo-valor { font-size: 21px; font-weight: 700; color: var(--text); }

/* Abas (mesmo padrão visual já usado em assinatura.php: .assin-tabs) */
/* Configuração bancária desativada: fica visível mas apagada na lista. */
.car-linha-inativa { opacity: .55; }
.car-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.car-tab-btn {
  background: none; border: none; padding: 10px 16px; cursor: pointer;
  font-size: 14px; font-family: inherit; color: var(--muted);
  border-bottom: 2px solid transparent; margin: 0;
}
.car-tab-btn.is-active { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }
.car-tab-pane { display: none; }
.car-tab-pane.is-active { display: block; }

/* Linha de cobrança em atraso, destacada na tabela */
.car-linha-atrasada td { background: rgba(220, 38, 38, 0.08); }

/* Badges de status desta tela (mesmo padrão de cores de .badge / seção 12) */
.car-badge { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.car-badge-pendente  { background: #eef2ff; color: #1e3a8a; }
.car-badge-atrasado  { background: #fee2e2; color: #991b1b; }
.car-badge-pago      { background: #dcfce7; color: #15803d; }
.car-badge-cancelado { background: var(--panel-alt); color: var(--muted); }
html.dark-mode .car-badge-pendente  { background: #1e2a4a; color: #93c5fd; }
html.dark-mode .car-badge-atrasado  { background: #3b0f0f; color: #fca5a5; }
html.dark-mode .car-badge-pago      { background: #0f2f1c; color: #4ade80; }

/* Chips de pessoas/membros selecionados */
.car-chips { margin-top: 8px; }
.car-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: #eef2ff; border: 1px solid #c7d2fe; color: #1e3a8a;
  border-radius: 999px; padding: 4px 6px 4px 12px; margin: 3px 6px 3px 0; font-size: 13px;
}
.car-chip button {
  border: none; background: none; color: #1e3a8a; font-weight: 700;
  font-size: 15px; line-height: 1; cursor: pointer; padding: 2px 4px;
}
html.dark-mode .car-chip { background: #1e2a4a; border-color: #3b6ea8; color: #93c5fd; }
html.dark-mode .car-chip button { color: #93c5fd; }

/* Autocomplete de pessoas */
.car-relative { position: relative; }
.car-autocomplete {
  position: absolute; z-index: 500; left: 0; right: 0; margin-top: 2px;
  background: var(--panel); border: 1px solid var(--border-strong); border-radius: 8px;
  max-height: 220px; overflow-y: auto; box-shadow: 0 8px 24px rgba(0,0,0,.15); display: none;
}
.car-autocomplete.is-open { display: block; }
.car-autocomplete .item { padding: 8px 12px; cursor: pointer; font-size: 14px; color: var(--text); }
.car-autocomplete .item:hover { background: var(--panel-alt); }
.car-autocomplete .item.text-muted { cursor: default; }

/* Aviso de valor com desconto (mesmo tom do .sistema-aviso-banner, adaptado a card) */
.car-preview {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px;
  background: var(--panel-alt); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 14px; margin: 4px 0 14px; font-size: 14px;
}
.car-preview-valor { font-size: 19px; font-weight: 700; color: var(--btn-success-bg); }

/* Linhas de desconto por forma de pagamento, no cadastro de Finalidade */
.car-desconto-linha {
  display: grid; grid-template-columns: minmax(0,1fr) 90px 130px; gap: 8px; align-items: center; margin-bottom: 8px;
}
.car-desconto-linha > span { font-size: 14px; color: var(--text); }
/* Os campos de desconto ficam dentro de colunas estreitas do grid. O seletor
   global de input (#input:not(...):not(...)...) tem especificidade maior que
   uma simples regra de classe, então sem !important ele "ganha" e força
   min-width:180px de volta — foi isso que fazia os campos vazarem o popup e
   gerar barra de rolagem horizontal no rodapé. */
.car-desconto-linha select,
.car-desconto-linha input {
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
@media (max-width: 560px) {
  .car-desconto-linha { grid-template-columns: 1fr; }
}

/* Bloco de juros por ajuste (fixo único + percentual por dia), na Finalidade */
.car-juros-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-top: 4px;
}
.car-juros-grid .form-row { margin-bottom: 0; }
.car-juros-grid input { min-width: 0 !important; width: 100% !important; box-sizing: border-box !important; }
.car-juros-grid .small { margin-top: 2px; }
@media (max-width: 560px) {
  .car-juros-grid { grid-template-columns: 1fr; }
}

/* ─────────── Refinamento geral dos campos dentro dos popups desta tela ───────────
   O seletor global de input tem alta especificidade (5 :not()), então sem
   !important nossas regras de layout perdem para ele e os campos ficam
   ora largos demais, ora estreitos demais, gerando desalinhamento entre
   rótulo e campo dentro do mesmo .form-row. Esta regra unifica o
   comportamento em todos os popups desta tela (Cobrança, Editar, Pagamento,
   Finalidade, Grupo): todo campo dentro de um .form-row ocupa o espaço
   disponível da linha e nunca ultrapassa a largura do popup. Campos que
   precisam ser mais estreitos (ex: "A cada X dias") continuam respeitando o
   max-width definido inline neles. */
.modal-content .form-row > input,
.modal-content .form-row > select,
.modal-content .form-row > textarea,
.modal .panel .form-row > input,
.modal .panel .form-row > select,
.modal .panel .form-row > textarea {
  flex: 1 1 auto;
  min-width: 0 !important;
  width: auto;
  box-sizing: border-box !important;
}
.modal-body { overflow-x: hidden; }
.modal-content .form-row,
.modal .panel .form-row {
  margin-bottom: 12px;
}
.modal-content .form-row:last-child,
.modal .panel .form-row:last-child {
  margin-bottom: 0;
}

/* Aviso de juros ao adiar a data de vencimento (edição de cobrança) */
.car-preview-juros {
  display: none; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px;
  background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; border-radius: 8px;
  padding: 10px 14px; margin: 4px 0 14px; font-size: 14px;
}
.car-preview-juros.is-visible { display: flex; }
.car-preview-juros strong { color: #9a3412; }
html.dark-mode .car-preview-juros { background: #3a1f0a; border-color: #7c3f0f; color: #fdba74; }
html.dark-mode .car-preview-juros strong { color: #fdba74; }

/* Upload de comprovante de pagamento */
.car-upload-comprovante {
  display: flex; flex-direction: column; gap: 6px; flex: 1;
}
.car-upload-comprovante input[type=file] { width: 100%; }
.car-campo-readonly {
  background: var(--panel-alt) !important; color: var(--muted) !important; cursor: not-allowed;
}

/* ─────────── Importação de arquivo bancário (baixa em lote) ─────────── */
.car-modal-importacao .modal-body { max-width: 620px; }
.car-importacao-formato {
  background: var(--panel-alt); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 14px; font-size: 13px; color: var(--text);
}
.car-importacao-formato code {
  display: inline-block; background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  padding: 4px 8px; margin-bottom: 8px; font-size: 13px;
}
.car-importacao-formato ul { margin: 4px 0 0; padding-left: 18px; }
.car-importacao-formato li { margin-bottom: 2px; font-size: 13px; }
.car-importacao-resumo {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-bottom: 16px;
}
.car-importacao-resumo-item {
  display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center;
  border: 1px solid var(--border); border-radius: 8px; padding: 12px 8px;
}
.car-importacao-resumo-item.ok .car-detalhe-valor { color: var(--btn-success-bg); }
.car-importacao-resumo-item.erro .car-detalhe-valor { color: #b91c1c; }
.car-importacao-log-cabecalho {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 8px; flex-wrap: wrap;
}
.car-importacao-log { max-height: 260px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; }
.car-importacao-log table { width: 100%; margin: 0; }
.car-importacao-log td { font-size: 13px; vertical-align: top; }
.car-importacao-log td:first-child { width: 60px; color: var(--muted); white-space: nowrap; }
.car-importacao-log td:last-child { color: #b91c1c; }

/* ─────────── Modal de detalhes, refinado ─────────── */
.car-detalhe-cabecalho {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  flex-wrap: wrap; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border);
}
.car-detalhe-titulo { font-size: 17px; font-weight: 700; color: var(--text); margin: 0 0 4px; }
.car-detalhe-sub { font-size: 13px; color: var(--muted); margin: 0; }
.car-detalhe-secao {
  margin-bottom: 16px;
}
.car-detalhe-secao:last-child { margin-bottom: 0; }
.car-detalhe-secao-titulo {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--muted); margin: 0 0 8px;
}
.car-detalhe-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px 20px;
}
@media (max-width: 560px) {
  .car-detalhe-grid { grid-template-columns: 1fr; }
}
.car-detalhe-item { display: flex; flex-direction: column; gap: 2px; }
.car-detalhe-label { font-size: 12px; color: var(--muted); }
.car-detalhe-valor { font-size: 14px; color: var(--text); font-weight: 600; word-break: break-word; }
.car-detalhe-valor.destaque { font-size: 18px; color: var(--btn-success-bg); }
.car-detalhe-comprovante-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 4px;
}
.car-detalhe-footer { justify-content: space-between !important; }

/* Tabela de detalhes (reaproveita .table-form já definido globalmente) */
#carDetalheTabela td:first-child { color: var(--muted); width: 40%; white-space: nowrap; }

/* Toasts próprios da página (não depende de nenhum JS externo) */
#carToastBox { position: fixed; top: 16px; right: 16px; z-index: 10050; display: flex; flex-direction: column; gap: 8px; }
.car-toast {
  padding: 10px 16px; border-radius: 8px; font-size: 14px; max-width: 320px;
  box-shadow: 0 6px 18px rgba(0,0,0,.18); border: 1px solid transparent;
}
.car-toast.ok  { background: #dcfce7; color: #15803d; border-color: #86efac; }
.car-toast.err { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
html.dark-mode .car-toast.ok  { background: #0f2f1c; color: #4ade80; border-color: #15803d; }
html.dark-mode .car-toast.err { background: #3b0f0f; color: #fca5a5; border-color: #991b1b; }

@media (max-width: 600px) {
  .car-topo-acoes { width: 100%; }
  .car-topo-acoes .btn { flex: 1 1 auto; text-align: center; }
}

/* ─── 41. RATEIO DA NF ENTRE SETORES (previsao_orcamentaria.php) ───
   Uma NF/recibo pode ser dividida entre vários setores; cada linha do bloco
   vira um lançamento próprio. O resumo compara a soma das parcelas com o
   valor total e é o que habilita ou bloqueia o botão "Lançar". */
.rateio-bloco {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel-alt);
}
.rateio-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
/* O título aqui já está dentro de um bloco com borda: dispensa a margem
   superior larga e a linha divisória do .secao-titulo solto no card. */
.rateio-cabecalho .rateio-titulo {
  margin: 0;
  border-bottom: none;
  padding-bottom: 0;
}
.rateio-cabecalho .btn { margin: 0; }
.rateio-bloco .table-responsive { margin-top: 10px; }
.rateio-bloco table.table { background: transparent; min-width: 0; }
.rateio-bloco .col-num .input { width: 160px; text-align: right; }

.rateio-resumo {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--border);
  color: var(--text);
}
.rateio-resumo.is-neutro { color: var(--muted); }
.rateio-resumo.is-ok {
  color: var(--btn-success-bg);
  border-color: var(--btn-success-bg);
  background: rgba(22, 101, 52, 0.10);
}
.rateio-resumo.is-erro {
  color: var(--btn-danger-bg);
  border-color: var(--btn-danger-bg);
  background: rgba(185, 28, 28, 0.10);
}

@media (max-width: 640px) {
  .rateio-bloco .col-num .input { width: 100%; }
}

/* ─── 42. SUGESTÃO DE FORNECEDOR VINCULADA A PESSOA (produtos_cadastro.php) ───
   A sugestão pode ser texto livre ou um vínculo com uma pessoa física ou
   jurídica já cadastrada. O vínculo é escolhido em dois passos, dentro do
   AppDialog: origem e, depois, a busca. */

/* Passo 1: os três caminhos, um por linha, cada um com a explicação embaixo. */
.escolha-origem { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.escolha-origem .btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; margin: 0; text-align: left; padding: 12px 14px; line-height: 1.3;
}
.escolha-origem .btn small { font-weight: 400; font-size: 12px; opacity: .85; }

/* Passo 2: a lista de resultados da busca. */
.resultado-pessoas {
  margin-top: 12px; max-height: 300px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 8px; padding: 6px;
  background: var(--panel);
}
.resultado-pessoas:empty { display: none; }
.resultado-pessoa {
  display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left;
  padding: 8px 10px; border: 0; border-radius: 6px; cursor: pointer;
  background: transparent; color: var(--text); font: inherit;
}
.resultado-pessoa + .resultado-pessoa { border-top: 1px solid var(--border); }
.resultado-pessoa:hover, .resultado-pessoa:focus-visible {
  background: var(--table-row-hover); outline: none;
}
.resultado-pessoa small { font-size: 12px; color: var(--muted); }

/* A linha da sugestão já vinculada, dentro do formulário do produto. */
.repeater-row--vinculo { align-items: stretch; }
.vinculo-pessoa {
  display: flex; align-items: flex-start; gap: 8px;
  flex: 2 1 280px; min-width: 0;
  padding: 8px 10px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--panel);
}
.vinculo-pessoa-texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.vinculo-pessoa-texto strong { word-break: break-word; }
.vinculo-pessoa-texto small { font-size: 12px; }
.vinculo-perdido { color: var(--btn-warning-bg); }

@media (max-width: 600px) {
  .vinculo-pessoa { flex: 1 1 100%; }
}
/* Selo de tipo da sugestão: menor que o .badge normal e sem cor de status. */
.vinculo-tipo { padding: 3px 9px; font-size: 11px; font-weight: 600; white-space: nowrap; flex: 0 0 auto; }

/* Contato da sugestão vinculada: vem do cadastro da pessoa, só de leitura. */
.vinculo-contato {
  display: flex; flex-direction: column; gap: 4px; justify-content: center;
  flex: 1 1 220px; min-width: 0; font-size: 13px;
}
.vinculo-contato-item { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.vinculo-contato-rotulo {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); flex: 0 0 auto;
}
.vinculo-contato-item span:not(.vinculo-contato-rotulo) { word-break: break-word; }
.vinculo-sem-contato { color: var(--muted); font-style: italic; line-height: 1.35; }

/* ─── 43. IMPORTAÇÃO DE PRODUTOS EM LOTE (produtos_cadastro.php) ───
   Três passos dentro do AppDialog: escolher o arquivo, correlacionar as
   colunas com os campos e ver o resultado. */
.importar-arquivo {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 14px 0 6px; padding: 14px;
  border: 1px dashed var(--border-strong); border-radius: 8px;
  background: var(--panel-alt);
}
.importar-arquivo .btn { margin: 0; flex: 0 0 auto; }
.importar-arquivo span { min-width: 0; word-break: break-all; font-size: 13px; }

/* Números do que foi lido e do que foi descartado. */
.importar-resumo {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px; margin-bottom: 14px;
}
.importar-resumo > div {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--panel-alt);
}
.importar-resumo strong { font-size: 20px; line-height: 1.1; color: var(--text); }
.importar-resumo small { font-size: 11px; color: var(--muted); }
.importar-descartadas { margin: -6px 0 14px; }
.importar-mapa { margin-bottom: 6px; }
.importar-ignorar { margin: 10px 0 4px; }
/* Uma linha da prévia sem nome não entra na importação: fica esmaecida. */
#tabelaPrevia .linha-sem-nome td { opacity: .55; }
.obrigatorio { color: var(--btn-danger-bg); }

/* --- 44. Extrato de movimentações: filtros com busca preditiva ------------
   O .busca-preditiva já existe (seção 31.9) e é ele que ancora a caixa de
   sugestões (position:absolute; top:100%). Dentro de um .form-grid ele precisa
   perder a margem inferior própria, senão a linha de filtros fica desalinhada
   dos campos vizinhos. */
.busca-inline { margin-bottom: 0; }
/* A caixa de sugestões destes dois campos entra NO FLUXO, não sobreposta.
   Sobreposta (que é o padrão de .busca-resultados) ela cobria todo o resto do
   painel — tipo de operação, datas, o checkbox e os próprios botões Filtrar e
   Limpar — e o clique do usuário caía num item da lista em vez de no controle
   que ele estava mirando. No fluxo, o painel cresce enquanto se pesquisa e
   nada fica coberto. */
.busca-inline > .busca-resultados {
  position: static;
  margin-top: 4px;
  max-height: 240px;
  border-radius: 8px;
  border-color: var(--border-strong);
}

/* O checkbox "somente sem fornecedor" desabilita o campo de nome: o estado
   precisa ficar visível, senão parece que o filtro digitado ainda vale. */
.busca-inline input:disabled {
  background: var(--panel-alt); color: var(--muted); cursor: not-allowed;
}

/* Grade de filtro enxuta: com dois campos o auto-fit esticaria a caixa de
   número até metade do cartão. Usada no período dos produtos parados. */
.form-grid--enxuto { grid-template-columns: minmax(200px, 260px) auto; justify-content: start; }
@media (max-width: 640px) { .form-grid--enxuto { grid-template-columns: 1fr; } }

/* --- 45. Campo de seleção múltipla (produto e fornecedor do extrato) -----
   As fichas ficam DENTRO da caixa do campo, como um input de etiquetas, e não
   empilhadas acima dele: assim o filtro continua parecendo um campo só, cresce
   para baixo em vez de empurrar a linha inteira, e as duas colunas ficam com o
   mesmo formato. */
.campo-fichas {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
  padding: 5px 8px; min-height: 38px;
  border: 1px solid var(--border-strong); border-radius: 8px;
  background: var(--panel); cursor: text; max-width: 100%;
}
.campo-fichas:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
}
/* A regra base de input do sistema (seção 3) é um seletor de especificidade
   alta — `input:not([type=checkbox]):not(…)` — e venceria qualquer classe. Por
   isso o !important aqui: é o campo de dentro que não pode ter moldura própria,
   nem a largura mínima de 180px, que quebraria a linha das fichas. */
.campo-fichas .campo-fichas-entrada {
  flex: 1 1 130px;
  min-width: 90px !important;
  border: none !important;
  background: transparent !important;
  padding: 3px 2px !important;
  box-shadow: none !important;
  outline: none;
  font-size: 14px; color: var(--text); font-family: inherit;
}
.fichas { display: contents; }

.ficha {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--panel-alt); border: 1px solid var(--border-strong);
  border-radius: 999px; padding: 2px 5px 2px 10px;
  font-size: 12.5px; line-height: 1.35; color: var(--text); max-width: 100%;
}
.ficha-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 24ch; }
.ficha-x {
  border: none; background: none; cursor: pointer; padding: 0;
  width: 17px; height: 17px; border-radius: 50%; flex: 0 0 auto;
  font-size: 14px; line-height: 1; color: var(--muted); font-family: inherit;
}
.ficha-x:hover, .ficha-x:focus-visible { background: var(--border); color: var(--text); }
/* A etiqueta PF/PJ dentro da ficha, para não confundir com fornecedor digitado. */
.ficha-tipo {
  font-size: 10px; font-weight: 700; letter-spacing: .3px; color: var(--muted);
  border: 1px solid var(--border-strong); border-radius: 999px; padding: 0 5px;
}

/* Sugestão que já está na seleção: continua visível, mas não responde ao clique. */
.busca-item--escolhido { opacity: .55; cursor: default; }
.busca-item--escolhido:hover { background: none; }

/* PF/PJ na lista de sugestões de fornecedor. */
.etiqueta-tipo {
  flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: .3px;
  padding: 2px 7px; border-radius: 999px;
  background: var(--panel-alt); border: 1px solid var(--border-strong); color: var(--muted);
}

/* Grade dos filtros do extrato: quatro colunas previsíveis, com produto e
   fornecedor ocupando duas cada. O auto-fit genérico embaralhava a ordem
   conforme a largura e deixava a linha desalinhada. */
.filtros-extrato {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 16px; align-items: end; margin-bottom: 0;
}
.filtros-extrato .campo-2 { grid-column: span 2; }
.filtros-extrato .campo-4 { grid-column: 1 / -1; }
.filtros-extrato .checkbox-field { align-self: end; }
@media (max-width: 900px) {
  .filtros-extrato { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .filtros-extrato { grid-template-columns: 1fr; }
  .filtros-extrato .campo-2 { grid-column: span 1; }
}

/* Botões da linha de filtros, alinhados à direita na sua própria faixa. */
.filtro-acoes {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end;
}
.filtro-acoes .btn { margin: 0; }

/* Linha de explicação sob os filtros. */
.filtro-dica {
  margin: 12px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.45;
}

/* Grade de filtro enxuta: com dois campos o auto-fit esticaria a caixa de
   número até metade do cartão. Usada no período dos produtos parados. */
.form-grid--enxuto { grid-template-columns: minmax(200px, 260px) auto; justify-content: start; }
@media (max-width: 640px) { .form-grid--enxuto { grid-template-columns: 1fr; } }

/* --- 45. Fichas de seleção múltipla (filtro de produto do extrato) --------
   O filtro aceita vários produtos: cada escolhido vira uma ficha com o ✕ para
   sair. Ficam ACIMA do campo, dentro do .field, para não empurrar a caixa de
   sugestões (que é ancorada no fim do .busca-preditiva). */
.fichas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 2px; }
.ficha {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--panel-alt); border: 1px solid var(--border-strong);
  border-radius: 999px; padding: 3px 6px 3px 11px;
  font-size: 12.5px; line-height: 1.3; color: var(--text); max-width: 100%;
}
.ficha-x {
  border: none; background: none; cursor: pointer; padding: 0;
  width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto;
  font-size: 15px; line-height: 1; color: var(--muted); font-family: inherit;
}
.ficha-x:hover, .ficha-x:focus-visible { background: var(--border); color: var(--text); }

/* Sugestão de produto que já está na seleção: continua visível para o usuário
   saber que está lá, mas sem responder ao clique. */
.busca-item--escolhido { opacity: .55; cursor: default; }
.busca-item--escolhido:hover { background: none; }

/* PF/PJ na lista de fornecedores: distingue a pessoa cadastrada do fornecedor
   que só existe como texto digitado na entrada. */
.etiqueta-tipo {
  flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: .3px;
  padding: 2px 7px; border-radius: 999px;
  background: var(--panel-alt); border: 1px solid var(--border-strong); color: var(--muted);
}

/* Explicação sob a linha de "nenhum resultado", quando o motivo do vazio não é
   óbvio (ex.: fornecedor vinculado a produto mas sem entrada em nome dele). */
.vazio-dica {
  display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.45;
  color: var(--muted); max-width: 70ch; margin-inline: auto;
}

/* "Somente sem fornecedor" desabilita a escolha de fornecedores: o estado
   precisa ficar visível, senão parece que a seleção ainda vale. */
.campo-fichas--off { background: var(--panel-alt); opacity: .6; cursor: not-allowed; }

/* ═══════════════════════════════════════════════════════════════════
   44. LISTA DE COMPRAS E ENTRADA MÚLTIPLA (entradas_estoque.php)
   Dois popups grandes: "Lista de compras" e "Registrar entrada".
   Ambos usam o diálogo padrão (#app-dialog-root) em versão larga, com
   as áreas roláveis POR DENTRO — o popup em si nunca rola, senão o
   rodapé com os botões sai da tela.
   ═══════════════════════════════════════════════════════════════════ */

/* --- 44.0 Popup de conteúdo (largura maior, altura pelo conteúdo) --
   O .app-dialog nasce com max-width:420px (seção 11). Um popup com
   formulário, tabela ou lista não cabe nisso: o conteúdo era cortado na
   horizontal e cada caixa interna ganhava a própria barra de rolagem.

   Estas duas classes só alargam e limitam a altura à janela. Quem rola,
   quando precisa, é o corpo do diálogo — uma barra só, nunca uma dentro
   da outra. Use size:'md' ou size:'wide' no AppDialog.show(). */
.app-dialog--md   { max-width: 680px; }
.app-dialog--wide { max-width: 920px; }
.app-dialog--md,
.app-dialog--wide {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 32px);
}
.app-dialog--md > .app-dialog-header, .app-dialog--wide > .app-dialog-header,
.app-dialog--md > .app-dialog-footer, .app-dialog--wide > .app-dialog-footer { flex: 0 0 auto; }
.app-dialog--md > .app-dialog-body,
.app-dialog--wide > .app-dialog-body { flex: 1 1 auto; min-height: 0; overflow: auto; }

/* --- 44.1 Diálogo em painel (altura fixa, rolagem nas caixas internas)
   Usado pela lista de compras e pela entrada múltipla, onde as duas
   colunas precisam rolar de forma independente. */
.app-dialog--lg { max-width: 900px; }
.app-dialog--xl { max-width: 1180px; }
.app-dialog--lg,
.app-dialog--xl {
  display: flex;
  flex-direction: column;
  height: min(86vh, 820px);
}
.app-dialog--lg > .app-dialog-header, .app-dialog--xl > .app-dialog-header,
.app-dialog--lg > .app-dialog-footer, .app-dialog--xl > .app-dialog-footer { flex: 0 0 auto; }
.app-dialog--lg > .app-dialog-body,
.app-dialog--xl > .app-dialog-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;      /* quem rola são as caixas internas */
  display: flex;
  padding-bottom: 4px;
}
.app-dialog--lg .app-dialog-footer,
.app-dialog--xl .app-dialog-footer { padding-top: 12px; border-top: 1px solid var(--border); }

/* --- 44.2 Estrutura de duas colunas -------------------------------- */
.lc-wrap { flex: 1 1 auto; display: flex; min-width: 0; min-height: 0; }
.lc-form { flex: 1 1 auto; display: flex; flex-direction: column; gap: 14px; min-width: 0; min-height: 0; }
.lc-grid {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
}
.lc-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 0;
}
.lc-col--saida { border-left: 1px solid var(--border); padding-left: 18px; }

/* --- 44.3 Abas ------------------------------------------------------ */
.lc-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); flex: 0 0 auto; }
.lc-tab {
  appearance: none; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--muted);
  padding: 8px 12px; margin-bottom: -1px;
  border-bottom: 2px solid transparent; border-radius: 8px 8px 0 0;
}
.lc-tab:hover { background: var(--table-row-hover); color: var(--text); }
.lc-tab.is-ativa { color: var(--accent); border-bottom-color: var(--accent); }
.lc-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.lc-painel { flex: 1 1 auto; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.lc-painel[hidden] { display: none !important; }

/* --- 44.4 Linha de busca e caixas roláveis -------------------------- */
.lc-busca { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex: 0 0 auto; }
/* !important: a regra global de inputs impõe min-width:180px com
   especificidade maior (cinco :not()), o que estoura estas colunas. */
.lc-busca input[type="search"],
.lc-busca input[type="text"] { flex: 1 1 180px; min-width: 0 !important; margin: 0; }
.lc-busca .btn { margin: 0; flex: 0 0 auto; }
.lc-check-inline {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--muted); white-space: nowrap;
}
.lc-check-inline input { margin: 0; width: 15px; height: 15px; }

.lc-caixa {
  flex: 1 1 auto;
  min-height: 110px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-alt);
}
.lc-caixa--fixa { flex: 0 0 auto; max-height: 190px; }

.lc-opcao {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 9px 12px; cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.lc-opcao:last-child { border-bottom: 0; }
.lc-opcao:hover { background: var(--table-row-hover); }
.lc-opcao input { margin: 3px 0 0; width: 16px; height: 16px; flex: 0 0 auto; }
.lc-opcao-txt { flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 1.4; color: var(--text); }
.lc-opcao-txt small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.lc-opcao--usado { opacity: .55; cursor: default; }
.lc-opcao--usado:hover { background: none; }

.lc-vazio { padding: 18px 14px; text-align: center; font-size: 13px; color: var(--muted); line-height: 1.5; }
.lc-hint { flex: 0 0 auto; margin: 0; font-size: 12px; color: var(--muted); line-height: 1.45; }

/* --- 44.5 Cabeçalho da coluna de saída ----------------------------- */
.lc-cabecalho {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}
.lc-cabecalho h4 { margin: 0; font-size: 14px; font-weight: 700; color: var(--text); }
.lc-cabecalho .btn { margin: 0; }
.lc-contador { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.lc-aviso { flex: 0 0 auto; margin: 0; padding: 9px 12px; font-size: 13px; }

/* --- 44.6 Tabela de itens escolhidos -------------------------------- */
/* Mesma linguagem visual da .table (seção 7) — cabeçalho, cores e zebra
   idênticos; só o espaçamento é menor, porque a grade fica dentro do popup
   e o cabeçalho acompanha a rolagem. */
.lc-tabela { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--panel); }
.lc-tabela thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--table-head-bg); color: var(--text);
  font-size: 13px; font-weight: 600;
  text-align: left; padding: 8px 10px; border-bottom: 2px solid var(--border-strong); white-space: nowrap;
}
.lc-tabela tbody td {
  padding: 8px 10px; border-bottom: 1px solid var(--border);
  color: var(--text); vertical-align: middle;
}
.lc-tabela tbody tr:last-child td { border-bottom: 0; }
.lc-tabela tbody tr:nth-child(even) { background: var(--table-row-alt); }
.lc-tabela tbody tr:hover { background: var(--table-row-hover); }
.lc-tabela .lc-num { text-align: right; white-space: nowrap; }
.lc-tabela .lc-produto { min-width: 130px; }
.lc-tabela .lc-fornecedor { max-width: 130px; overflow-wrap: anywhere; }
.lc-tabela .lc-produto strong { display: block; font-weight: 600; line-height: 1.3; }
.lc-tabela .lc-produto small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.lc-tabela input[type="number"] {
  /* idem: sem o !important o campo fica com 180px e empurra a coluna. */
  width: 92px; min-width: 0 !important; margin: 0; padding: 5px 7px; font-size: 13px; text-align: right;
}
.lc-tabela .status-badge { font-size: 10.5px; padding: 3px 7px; }
.lc-remover {
  appearance: none; background: none; border: 0; cursor: pointer;
  color: var(--btn-danger-bg); font-size: 16px; line-height: 1; padding: 2px 6px; border-radius: 6px;
}
.lc-remover:hover { background: var(--table-row-hover); }
.lc-col-x { width: 1%; }

/* --- 44.7 Campos comuns do lote (popup de entrada) ------------------ */
.lc-rodape-campos {
  flex: 0 0 auto;
  border-top: 1px solid var(--border);
  padding-top: 12px;
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.lc-rodape-campos .field { margin: 0; }
.lc-rodape-campos .lc-campo-largo { grid-column: 1 / -1; }
.lc-rodape-campos textarea { min-height: 54px; resize: vertical; }

/* --- 44.8 Telas estreitas ------------------------------------------
   Abaixo de 900px as colunas empilham; aí o corpo do diálogo passa a
   rolar e as caixas ganham altura fixa, senão colapsam para nada. */
@media (max-width: 900px) {
  .app-dialog--lg, .app-dialog--xl { max-width: 100%; height: min(92vh, 900px); }
  .app-dialog--lg > .app-dialog-body,
  .app-dialog--xl > .app-dialog-body { overflow: auto; display: block; }
  .lc-wrap, .lc-form, .lc-grid { display: block; height: auto; }
  .lc-grid { display: grid; grid-template-columns: 1fr; }
  .lc-col { min-height: 0; }
  .lc-col--saida { border-left: 0; padding-left: 0; border-top: 1px solid var(--border); padding-top: 14px; }
  .lc-caixa { flex: 0 0 auto; max-height: 230px; }
  .lc-tabela { min-width: 620px; }
  .lc-caixa--itens { overflow-x: auto; }
}
@media (max-width: 600px) {
  .app-dialog--lg .app-dialog-footer,
  .app-dialog--xl .app-dialog-footer { flex-wrap: wrap; }
  .app-dialog--lg .app-dialog-footer .btn,
  .app-dialog--xl .app-dialog-footer .btn { flex: 1 1 140px; }
}


/* ═══════════════════════════════════════════════════════════════════
   45. FOLHA A4 — LISTA DE COMPRAS (janela de impressão / "Salvar como PDF")
   A janela aberta pelo botão "Imprimir/Gerar PDF" carrega ESTE mesmo
   arquivo, então o layout do papel se mantém aqui e não dentro do PHP.
   Tudo escopado em body.folha-compras: sem isso, a seção 37 (impressão
   de tela, A4 paisagem) valeria também para esta folha.
   ═══════════════════════════════════════════════════════════════════ */
body.folha-compras {
  margin: 0;
  background: #e5e7eb;
  color: #111827;
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.45;
}
body.folha-compras .lcp-folha {
  box-sizing: border-box;
  width: 210mm;
  min-height: 297mm;
  margin: 16px auto;
  padding: 14mm 13mm 16mm;
  background: #fff;
  box-shadow: 0 6px 24px rgba(15, 22, 39, .18);
}

/* --- 45.1 Cabeçalho da folha ---------------------------------------- */
body.folha-compras .lcp-topo {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 20px;
  padding-bottom: 10px; margin-bottom: 14px;
  border-bottom: 2.5px solid #0f62fe;
}
body.folha-compras .lcp-topo h1 {
  margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -.2px; color: #0b2e6f;
}
body.folha-compras .lcp-sistema { margin: 2px 0 0; font-size: 12px; color: #6b7280; }
body.folha-compras .lcp-meta { text-align: right; font-size: 11.5px; color: #4b5563; line-height: 1.6; }
body.folha-compras .lcp-meta b { color: #111827; font-weight: 600; }

/* --- 45.2 Faixa de resumo ------------------------------------------- */
body.folha-compras .lcp-resumo {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px;
}
body.folha-compras .lcp-cartao {
  border: 1px solid #d1d5db; border-radius: 6px; padding: 7px 10px; background: #f9fafb;
}
body.folha-compras .lcp-cartao span {
  display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: .5px; color: #6b7280;
}
body.folha-compras .lcp-cartao strong { display: block; font-size: 15px; font-weight: 700; margin-top: 1px; }
body.folha-compras .lcp-cartao--critico strong { color: #b91c1c; }

/* --- 45.3 Blocos por fornecedor ------------------------------------- */
body.folha-compras .lcp-grupo { margin-bottom: 14px; break-inside: auto; }
body.folha-compras .lcp-grupo-titulo {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  margin: 0 0 5px; padding: 6px 10px;
  background: #eef2f7; border-left: 4px solid #0f62fe; border-radius: 3px;
  font-size: 13.5px; font-weight: 700; color: #0b2e6f;
  break-after: avoid;
}
body.folha-compras .lcp-grupo-info { font-size: 11px; font-weight: 400; color: #4b5563; text-align: right; }

body.folha-compras .lcp-tabela { width: 100%; border-collapse: collapse; table-layout: fixed; }
body.folha-compras .lcp-tabela thead { display: table-header-group; }
body.folha-compras .lcp-tabela th {
  background: #f3f4f6; border: 1px solid #cbd5e1; padding: 5px 6px;
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .2px;
  color: #374151; text-align: left; line-height: 1.25; overflow-wrap: break-word;
}
/* Larguras fixas por coluna: sem isto o nome do produto quebra em 4 linhas
   enquanto "Marca / Modelo" sobra espaço. A ordem das colunas é a da folha. */
body.folha-compras .lcp-tabela th:nth-child(1), body.folha-compras .lcp-tabela td:nth-child(1) { width: 3%; }
body.folha-compras .lcp-tabela th:nth-child(2), body.folha-compras .lcp-tabela td:nth-child(2) { width: 23%; }
body.folha-compras .lcp-tabela th:nth-child(3), body.folha-compras .lcp-tabela td:nth-child(3) { width: 13%; }
body.folha-compras .lcp-tabela th:nth-child(4), body.folha-compras .lcp-tabela td:nth-child(4) { width: 11%; }
body.folha-compras .lcp-tabela th:nth-child(5), body.folha-compras .lcp-tabela td:nth-child(5) { width: 9%; }
body.folha-compras .lcp-tabela th:nth-child(6), body.folha-compras .lcp-tabela td:nth-child(6) { width: 10%; }
body.folha-compras .lcp-tabela th:nth-child(7), body.folha-compras .lcp-tabela td:nth-child(7) { width: 12%; }
body.folha-compras .lcp-tabela th:nth-child(8), body.folha-compras .lcp-tabela td:nth-child(8) { width: 11%; }
body.folha-compras .lcp-tabela th:nth-child(9), body.folha-compras .lcp-tabela td:nth-child(9) { width: 8%; }
body.folha-compras .lcp-tabela .lcp-subtotal td:first-child { width: auto; }
body.folha-compras .lcp-tabela td {
  border: 1px solid #cbd5e1; padding: 5px 7px; font-size: 11.5px; vertical-align: middle;
  overflow-wrap: anywhere;
}
body.folha-compras .lcp-tabela tbody tr { break-inside: avoid; page-break-inside: avoid; }
body.folha-compras .lcp-tabela tbody tr:nth-child(even) td { background: #fafbfc; }
body.folha-compras .lcp-tabela .n { text-align: right; }
body.folha-compras .lcp-tabela td.n { white-space: nowrap; }   /* o th ainda pode quebrar */
body.folha-compras .lcp-tabela .c { text-align: center; }
body.folha-compras .lcp-tabela .lcp-ck { width: 16px; text-align: center; font-size: 13px; color: #6b7280; }
body.folha-compras .lcp-tabela .lcp-item strong { font-weight: 700; }
body.folha-compras .lcp-tabela .lcp-item small { display: block; font-size: 10px; color: #6b7280; }
body.folha-compras .lcp-tabela .lcp-qtd { font-size: 13px; font-weight: 700; }
body.folha-compras .lcp-tabela .lcp-anotar { width: 68px; background: #fffdf5; }
body.folha-compras .lcp-tabela .lcp-subtotal td {
  background: #f3f4f6; font-size: 11px; font-weight: 700;
}

body.folha-compras .lcp-selo {
  display: inline-block; padding: 1px 5px; border-radius: 999px;
  font-size: 8.5px; font-weight: 700; letter-spacing: .2px; border: 1px solid;
  white-space: nowrap; overflow-wrap: normal;   /* não pode quebrar em "COMP/RAR" */
}
body.folha-compras .lcp-selo--critico { background: #fee2e2; border-color: #dc2626; color: #991b1b; }
body.folha-compras .lcp-selo--alerta  { background: #fef3c7; border-color: #b45309; color: #92400e; }
body.folha-compras .lcp-selo--ok      { background: #dcfce7; border-color: #15803d; color: #166534; }

/* --- 45.4 Fecho da folha -------------------------------------------- */
body.folha-compras .lcp-total {
  display: flex; justify-content: space-between; gap: 16px;
  margin-top: 16px; padding: 9px 12px;
  border: 1px solid #9ca3af; border-radius: 6px; background: #f9fafb;
  font-size: 12px; break-inside: avoid;
}
body.folha-compras .lcp-assinaturas {
  display: flex; gap: 44px; margin-top: 34px; break-inside: avoid;
}
body.folha-compras .lcp-assinaturas div {
  flex: 1; border-top: 1px solid #374151; padding-top: 4px;
  text-align: center; font-size: 10.5px; color: #4b5563;
}
body.folha-compras .lcp-rodape {
  margin-top: 16px; padding-top: 8px; border-top: 1px solid #e5e7eb;
  font-size: 9.5px; color: #9ca3af; text-align: center;
}
body.folha-compras .lcp-dica {
  width: 210mm; margin: 0 auto 16px; padding: 10px 14px; box-sizing: border-box;
  background: #fef3c7; border: 1px solid #fbbf24; border-radius: 6px;
  font-size: 12.5px; color: #92400e;
}

/* --- 45.5 Impressão ------------------------------------------------- */
@media print {
  /* Página nomeada: sobrepõe o A4 paisagem padrão da seção 37 sem afetá-la. */
  @page folhaCompras { size: A4 portrait; margin: 12mm 11mm 14mm; }
  body.folha-compras .lcp-folha { page: folhaCompras; }

  body.folha-compras { background: #fff !important; font-size: 11.5pt; }
  body.folha-compras .lcp-folha {
    width: auto; min-height: 0; margin: 0; box-shadow: none;
    /* Margem mínima garantida mesmo se o usuário escolher "Margens: nenhuma". */
    padding: 3mm 4mm 2mm;
  }
  body.folha-compras .lcp-dica,
  body.folha-compras .nao-imprimir { display: none !important; }

  /* Fecho mais compacto: com as margens da tela o rodapé escorregava
     sozinho para uma segunda página. */
  body.folha-compras .lcp-topo { margin-bottom: 10px; }
  body.folha-compras .lcp-resumo { margin-bottom: 11px; }
  body.folha-compras .lcp-grupo { margin-bottom: 10px; }
  body.folha-compras .lcp-total { margin-top: 10px; }
  body.folha-compras .lcp-assinaturas { margin-top: 20px; }
  body.folha-compras .lcp-rodape { margin-top: 9px; padding-top: 5px; }
  /* orphans/widows padrão (2) empurram um parágrafo de UMA linha para a
     página seguinte mesmo com espaço sobrando — foi o que jogava o rodapé
     sozinho para a página 2. */
  body.folha-compras, body.folha-compras p { orphans: 1; widows: 1; }

  /* Fundos e selos precisam sair no papel; sem isto o Chrome descarta as cores. */
  body.folha-compras * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.folha-compras a[href]::after { content: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   46. MÓDULO DE RONDAS (definicoes_ronda / monitor_ronda / nova_ronda)
   Substitui os três blocos <style> que existiam dentro das páginas.
   Estrutura, tabelas, botões e popups vêm das seções anteriores; aqui
   fica só o que é específico de ronda.
   ═══════════════════════════════════════════════════════════════════ */

/* --- 46.1 Convenção de cor dos botões por funcionalidade -----------
   Vale para todo o sistema; documentada aqui por ser o ponto onde a
   padronização foi aplicada.

     btn-primary    ação principal da tela (novo cadastro, filtrar)
     btn-success    confirmar / salvar / concluir
     btn-danger     excluir / encerrar / cancelar um processo
     btn-warning    ação que exige atenção antes de seguir
     btn-info       visualizar / detalhes / imprimir
     btn-secondary  neutro: cancelar diálogo, editar, voltar, auxiliar
     btn-export     exportar planilha        btn-pdf  gerar PDF
     btn-sm         variação compacta usada dentro de tabela            */

/* --- 46.2 Variações de destaque do indicador (KPI) ------------------
   O .kpi já existe na seção 31.6; estas classes só trocam a cor da
   borda e do número, para o painel comunicar gravidade sem texto. */
.kpi--ok      { border-left-color: var(--btn-success-bg); }
.kpi--ok      .valor { color: var(--btn-success-bg); }
.kpi--alerta  { border-left-color: var(--btn-warning-bg); }
.kpi--alerta  .valor { color: var(--btn-warning-bg); }
.kpi--erro    { border-left-color: var(--btn-danger-bg); }
.kpi--erro    .valor { color: var(--btn-danger-bg); }
.kpi--info    { border-left-color: var(--btn-info-bg); }
.kpi--info    .valor { color: var(--btn-info-bg); }

/* Identificador técnico (QR do ponto, código de validação). */
.codigo {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; letter-spacing: .04em; word-break: break-all;
}

/* --- 46.3 Painel de monitoramento ---------------------------------- */
.rd-auto-refresh {
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}
.rd-auto-refresh input { margin: 0; }

/* Miniatura da foto do ponto: clicável, abre ampliada no popup. */
.rd-foto { cursor: zoom-in; margin: 0 auto; }
.rd-foto-ampliada { text-align: center; }
.rd-foto-ampliada img {
  max-width: 100%; max-height: 65vh;
  border-radius: 8px; border: 1px solid var(--border);
}

/* --- 46.4 Detalhes da execução (dentro do popup) ------------------- */
.rd-detalhe { display: flex; flex-direction: column; gap: 14px; min-width: min(88vw, 820px); }
.rd-detalhe .alert-box { margin: 0; white-space: pre-line; }
.rd-detalhe-tabela .table { margin-top: 0; }
.rd-detalhe-tabela thead th { position: sticky; top: 0; z-index: 1; }

/* --- 46.5 Configuração da rota ------------------------------------- */
.rd-rota { display: flex; flex-direction: column; gap: 12px; min-width: min(88vw, 720px); }
.rd-rota .painel-filtros { margin: 0; }
.rd-rota .filtros-grid { margin-bottom: 0; align-items: end; }
/* A regra global de inputs impõe min-width:180px, que estoura a coluna. */
.rd-input-tempo { width: 96px; min-width: 0 !important; margin: 0; text-align: right; }

/* --- 46.6 QR Code do ponto ----------------------------------------- */
.rd-qr { text-align: center; padding: 8px 4px; }
.rd-qr h4 { margin: 0 0 12px; font-size: 16px; color: var(--text); }
.rd-qr-canvas {
  display: inline-block; padding: 12px;
  background: #fff; border: 1px solid var(--border-strong); border-radius: 8px;
}
.rd-qr-canvas img, .rd-qr-canvas canvas { display: block; }
.rd-qr .codigo { display: block; margin-top: 12px; color: var(--muted); }

/* Folha de impressão da etiqueta: só o QR, centralizado. */
body.folha-qr { background: #fff; }
body.folha-qr .rd-qr { padding: 0; }
body.folha-qr .rd-qr h4 { font-size: 18px; }

/* --- 46.7 Execução da ronda (tela do vigilante) -------------------- */
.rd-execucao { max-width: 620px; margin-inline: auto; }
.rd-execucao [hidden] { display: none !important; }

.rd-cronometro {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 30px; font-weight: 700; letter-spacing: .06em;
  text-align: center; padding: 12px;
  border-radius: var(--radius);
  background: var(--panel-alt); color: var(--text);
  border: 1px solid var(--border);
  margin-bottom: 16px;
}

.rd-scanner {
  position: relative;
  max-width: 420px; margin: 0 auto 18px;
  border-radius: var(--radius); overflow: hidden;
  background: #000; border: 1px solid var(--border-strong);
}
.rd-scanner video { display: block; width: 100%; height: 260px; object-fit: cover; }
.rd-scanner-status {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, .72); color: #fff;
  font-size: 12.5px; text-align: center; padding: 8px 10px; line-height: 1.35;
}

.rd-ponto {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; margin-bottom: 8px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel);
}
.rd-ponto.is-lido { background: var(--panel-alt); border-color: var(--btn-success-bg); }
.rd-ponto-ordem {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--btn-secondary-bg); color: var(--btn-secondary-text);
  border: 1px solid var(--btn-secondary-border);
  font-size: 13px; font-weight: 700;
}
.rd-ponto.is-lido .rd-ponto-ordem {
  background: var(--btn-success-bg); color: var(--btn-success-text); border-color: transparent;
}
.rd-ponto-nome { flex: 1 1 auto; min-width: 0; font-weight: 600; }

/* Botão de largura total das ações principais da tela do vigilante. */
.rd-btn-bloco { display: block; width: 100%; margin: 18px 0 0; padding: 12px; font-size: 15px; }

@media (max-width: 600px) {
  .rd-detalhe, .rd-rota { min-width: 0; }
  .rd-cronometro { font-size: 26px; }
  .rd-scanner video { height: 220px; }
}


/* ═══════════════════════════════════════════════════════════════════
   47. AGENDA DE RESERVAS (ocorrencias/agenda.php)
   Migrado do <style> da página. As cores fixas viraram variáveis do
   tema, então o modo escuro e o modo contraste passam a valer aqui.
   ═══════════════════════════════════════════════════════════════════ */

/* --- 47.1 Barra de navegação e modos -------------------------------- */
.ag-barra {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-bottom: 16px;
}
.ag-navegacao {
  display: flex; align-items: center; gap: 4px;
  background: var(--panel-alt); border: 1px solid var(--border);
  border-radius: 10px; padding: 4px;
}
.ag-navegacao .btn { margin: 0; }
.ag-periodo {
  font-weight: 700; font-size: 15px; color: var(--text);
  min-width: 210px; text-align: center; padding: 0 10px;
  white-space: nowrap;
}
.ag-modos {
  display: flex; gap: 4px;
  background: var(--panel-alt); border: 1px solid var(--border);
  border-radius: 10px; padding: 4px;
}
.ag-modos .btn { margin: 0; }

/* --- 47.2 Legenda de locais (também é o filtro) --------------------- */
.ag-legenda { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.ag-legenda-item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--panel);
  color: var(--text); font: inherit; font-size: 13px;
  cursor: pointer; user-select: none;
}
.ag-legenda-item:hover { background: var(--table-row-hover); }
.ag-legenda-item.is-inativo { opacity: .38; }
.ag-legenda-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- 47.3 Grade de mês e de semana ---------------------------------- */
.ag-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.ag-grade-cabecalho { margin-bottom: 6px; }
.ag-grade-cabecalho > div {
  font-size: 11.5px; font-weight: 700; text-align: center;
  text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
}
.ag-grade-cabecalho > div.is-hoje { color: var(--accent); }

.ag-dia {
  display: flex; flex-direction: column; gap: 4px;
  min-height: 112px; padding: 6px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel); min-width: 0;
}
.ag-dia.is-fora { background: var(--panel-alt); }
.ag-dia.is-fora .ag-dia-numero { color: var(--muted); }
.ag-dia.is-hoje { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.ag-dia-semana { min-height: 340px; }

.ag-dia-numero {
  align-self: flex-start;
  background: none; border: 0; font: inherit; font-size: 13px; font-weight: 700;
  color: var(--text); cursor: pointer; padding: 1px 6px; border-radius: 5px;
}
.ag-dia-numero:hover { background: var(--table-row-hover); }

.ag-dia-eventos { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ag-chip {
  display: block; width: 100%; text-align: left;
  border: 0; border-radius: 5px; padding: 2px 6px;
  font: inherit; font-size: 11px; line-height: 1.35; color: #fff;
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ag-chip:hover { filter: brightness(.92); }
.ag-chip[hidden] { display: none !important; }
.ag-mais {
  align-self: flex-start;
  background: none; border: 0; padding: 0; font: inherit; font-size: 11px;
  color: var(--muted); text-decoration: underline; cursor: pointer;
}
.ag-vazio { padding: 46px 0; text-align: center; color: var(--muted); font-size: 14px; }

/* --- 47.4 Visualização por dia -------------------------------------- */
.ag-cartao-dia {
  display: block; width: 100%; text-align: left;
  border: 1px solid var(--border); border-left: 4px solid var(--accent);
  border-radius: 8px; background: var(--panel-alt);
  padding: 12px 16px; margin-bottom: 10px; cursor: pointer; font: inherit;
}
.ag-cartao-dia:hover { background: var(--table-row-hover); }
.ag-cartao-hora { display: block; font-size: 12px; font-weight: 700; color: var(--muted); }
.ag-cartao-nome { display: block; font-size: 16px; font-weight: 700; color: var(--text); margin: 3px 0; }
.ag-cartao-local {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 13px; color: var(--muted);
}

/* --- 47.5 Visualização por ano -------------------------------------- */
.ag-ano { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ag-mini-mes { border: 1px solid var(--border); border-radius: 8px; padding: 10px; background: var(--panel); }
.ag-mini-titulo {
  font-weight: 700; font-size: 13px; text-align: center;
  margin-bottom: 8px; color: var(--text);
}
.ag-mini-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.ag-mini-dia {
  position: relative; border: 0; background: none; font: inherit;
  font-size: 10px; text-align: center; color: var(--text);
  padding: 4px 0 7px; border-radius: 4px; cursor: pointer;
}
.ag-mini-dia:hover { background: var(--table-row-hover); }
.ag-mini-dia.is-fora { color: var(--muted); opacity: .5; }
.ag-mini-dia.is-hoje { background: var(--accent); color: #fff; font-weight: 700; }
.ag-mini-marca {
  position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--btn-danger-bg);
}
.ag-mini-dia.is-hoje .ag-mini-marca { background: #fff; }

/* --- 47.6 Popups da agenda ------------------------------------------ */
.ag-resumo { display: flex; flex-direction: column; gap: 12px; min-width: min(86vw, 440px); }
.ag-resumo .table-form th { width: 110px; text-align: left; color: var(--muted); font-weight: 600; vertical-align: top; }
.ag-cronograma { display: flex; flex-direction: column; gap: 4px; min-width: min(86vw, 640px); }
.ag-cronograma .form-grid { margin-bottom: 6px; }
/* Sem max-height: a lista cresce e quem rola, se precisar, é o corpo do
   popup. Uma caixinha rolando dentro do popup é o que incomodava. */
.ag-crono-locais {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 16px;
  border: 1px solid var(--border); border-radius: 8px; padding: 10px;
  background: var(--panel-alt);
}
.ag-crono-locais .checkbox-field { margin: 0; align-items: center; }
.ag-crono-locais .checkbox-field > span {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; min-width: 0; overflow-wrap: anywhere;
}
.ag-cronograma .alert-box { margin: 0; }

/* --- 47.7 Folha A4 do cronograma (janela de impressão) -------------- */
body.ag-folha { background: #fff; color: #111827; padding: 10mm; }
body.ag-folha .ag-folha-topo {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 20px;
  border-bottom: 2.5px solid #0f62fe; padding-bottom: 8px; margin-bottom: 14px;
}
body.ag-folha h1 { margin: 0; font-size: 19px; color: #0b2e6f; }
body.ag-folha .ag-folha-topo p { margin: 3px 0 0; font-size: 11.5px; color: #4b5563; }
body.ag-folha .ag-folha-meta { font-size: 10.5px; color: #4b5563; text-align: right; line-height: 1.6; }
body.ag-folha thead { display: table-header-group; }
body.ag-folha th { background: #f3f4f6; text-transform: uppercase; font-size: 9.5px; letter-spacing: .3px; }
body.ag-folha tbody tr { break-inside: avoid; page-break-inside: avoid; }
body.ag-folha tbody tr:nth-child(even) td { background: #fafbfc; }
body.ag-folha td.n, body.ag-folha th.n { text-align: right; white-space: nowrap; }
body.ag-folha .ponto-cor { border: 1px solid #9ca3af; }
body.ag-folha .ag-folha-rodape { margin-top: 12px; font-size: 10px; color: #6b7280; }
@media print {
  body.ag-folha { padding: 3mm 4mm 2mm; }
  body.ag-folha * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.ag-folha, body.ag-folha p { orphans: 1; widows: 1; }
}

/* --- 47.8 Telas estreitas ------------------------------------------- */
@media (max-width: 900px) {
  .ag-ano { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ag-dia { min-height: 84px; }
  .ag-dia-semana { min-height: 200px; }
  .ag-periodo { min-width: 0; font-size: 14px; }
  .ag-resumo, .ag-cronograma { min-width: 0; }
}
@media (max-width: 640px) {
  .ag-barra { gap: 8px; }
  .ag-modos, .ag-navegacao { flex: 1 1 100%; justify-content: center; }
  .ag-grade { gap: 3px; }
  .ag-chip { font-size: 10px; }
}


/* ═══════════════════════════════════════════════════════════════════
   48. LIBERAÇÃO DE ACESSO — EVENTOS (ocorrencias/eventos.php)
   Migrado dos quatro blocos <style> que ficavam dentro da página. As
   cores fixas viraram variáveis do tema, então os popups desta tela
   passam a acompanhar o modo escuro e o modo contraste.
   ═══════════════════════════════════════════════════════════════════ */

/* --- 48.1 Base comum dos popups desta tela ------------------------- */
#modal-contagens .modal-content,
#modal-gerenciar-locais .modal-content { width: 560px; max-width: 95%; padding: 22px 26px; }
#modal-registrar-contagem .modal-content { width: 480px; max-width: 95%; padding: 22px 26px; }
#modal-ver-evento .modal-content { width: 620px; max-width: 95%; padding: 24px 28px; }

#modal-contagens h3,
#modal-gerenciar-locais h3 {
  margin: 0 0 16px; padding-bottom: 12px;
  border-bottom: 1px solid var(--border-strong);
}

/* Caixa de formulário dentro do popup. */
#modal-contagens .contagens-form-box,
#modal-gerenciar-locais .locais-form-box {
  border: 1px solid var(--border-strong); border-radius: 8px;
  padding: 16px; margin-bottom: 18px; background: var(--panel-alt);
}
#modal-contagens .form-row,
#modal-gerenciar-locais .form-row { margin-bottom: 12px; }
#modal-contagens .form-row label,
#modal-gerenciar-locais .form-row label {
  display: block; margin-bottom: 5px;
  font-size: 13px; font-weight: 600; color: var(--muted);
}
#modal-contagens .form-row .input,
#modal-gerenciar-locais .form-row .input {
  width: 100%; padding: 8px 10px;
  border: 1px solid var(--border-strong); border-radius: 5px;
  background: var(--panel); color: var(--text);
}
#modal-contagens .contagens-form-actions,
#modal-gerenciar-locais .locais-form-actions {
  display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px;
}
#modal-contagens .contagens-footer,
#modal-gerenciar-locais .locais-footer,
#modal-ver-evento .ve-footer {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border-strong);
}

/* --- 48.2 Contagens do evento -------------------------------------- */
#modal-contagens .contagens-checkbox-row { display: flex; align-items: center; gap: 8px; }
#modal-contagens .contagens-checkbox-row input { margin: 0; }
#modal-contagens .contagens-lista-titulo,
#modal-gerenciar-locais .locais-lista-titulo {
  font-size: 13px; font-weight: 600; color: var(--muted); margin: 0 0 8px 2px;
}
/* Estes ficam dentro do .modal próprio da página, que tem altura fixa:
   a lista precisa de um teto. Em vez de 280px fixos, usa o que a janela
   oferece, então a barra só aparece quando a lista é realmente longa. */
#modal-contagens #lista_contagens_evento,
#modal-gerenciar-locais #lista_locais_admin {
  max-height: min(46vh, 420px); overflow-y: auto;
  border: 1px solid var(--border-strong); border-radius: 8px; padding: 6px;
}
#modal-contagens .contagem-item,
#modal-gerenciar-locais .local-item {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; padding: 10px 12px; border-radius: 6px;
}
#modal-contagens .contagem-item + .contagem-item,
#modal-gerenciar-locais .local-item + .local-item {
  margin-top: 2px; padding-top: 12px; border-top: 1px solid var(--border);
}
#modal-contagens .contagem-item:hover,
#modal-gerenciar-locais .local-item:hover { background: var(--table-row-hover); }
#modal-contagens .contagem-nome { font-weight: 600; color: var(--text); }
#modal-contagens .contagem-meta { font-size: 12px; color: var(--muted); }
#modal-contagens .contagem-acoes,
#modal-gerenciar-locais .local-item .local-acoes { display: flex; gap: 6px; white-space: nowrap; }

/* Emblema "aceita múltiplos registros" da contagem. */
#modal-contagens .contagem-badge-multiplos {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700;
}
#modal-contagens .contagem-badge-multiplos.sim { background: #dcfce7; color: #15803d; }
#modal-contagens .contagem-badge-multiplos.nao { background: var(--panel-alt); color: var(--muted); }
html.dark-mode #modal-contagens .contagem-badge-multiplos.sim { background: #14331f; color: #86efac; }

/* --- 48.3 Registro na fila da contagem ------------------------------ */
#modal-registrar-contagem h3 { margin: 0 0 4px; }
#modal-registrar-contagem .rc-subtitulo { margin: 0 0 16px; font-size: 13px; color: var(--muted); }
#modal-registrar-contagem .rc-log {
  max-height: min(32vh, 300px); overflow-y: auto; margin-top: 14px;
  border: 1px solid var(--border-strong); border-radius: 8px;
  padding: 8px 10px; font-size: 13px;
}
#modal-registrar-contagem .rc-log-item { padding: 4px 0; border-bottom: 1px dashed var(--border); }
#modal-registrar-contagem .rc-log-item:last-child { border-bottom: 0; }
#modal-registrar-contagem .rc-log-item.ok   { color: var(--btn-success-bg); }
#modal-registrar-contagem .rc-log-item.erro { color: var(--btn-danger-bg); }

/* --- 48.4 Detalhes do evento ---------------------------------------- */
#modal-ver-evento .ve-header {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--border-strong);
}
#modal-ver-evento .ve-header h3 { margin: 0; font-size: 19px; line-height: 1.3; }
#modal-ver-evento .ve-status {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  background: var(--panel-alt); color: var(--muted);
}
#modal-ver-evento .ve-status-concluido    { background: var(--panel-alt); color: var(--muted); }
#modal-ver-evento .ve-status-futuro       { background: #e0f2fe; color: #0369a1; }
#modal-ver-evento .ve-status-em-andamento { background: #dcfce7; color: #15803d; }
html.dark-mode #modal-ver-evento .ve-status-futuro       { background: #12293f; color: #93c5fd; }
html.dark-mode #modal-ver-evento .ve-status-em-andamento { background: #14331f; color: #86efac; }

#modal-ver-evento .ve-grid {
  display: grid; grid-template-columns: 130px minmax(0, 1fr);
  column-gap: 16px; row-gap: 11px; font-size: 14px; align-items: start;
}
#modal-ver-evento .ve-label {
  color: var(--muted); font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: .03em; padding-top: 2px;
}
#modal-ver-evento .ve-valor { color: var(--text); word-break: break-word; }
#modal-ver-evento .ve-sep { color: var(--muted); padding: 0 4px; }
#modal-ver-evento .ve-linha-fina { grid-column: 1 / -1; border-top: 1px solid var(--border); }

/* --- 48.4a Formulário do evento (migrado dos style= inline) --------- */
.table-form--evento { width: 60%; min-width: 420px; }
.ev-linha-locais { display: flex; align-items: flex-start; gap: 6px; }
.ev-select-locais { width: 100%; min-height: 90px; }
.ev-btn-locais { font-weight: 700; }
.ev-textarea { width: 100%; resize: vertical; }
.ev-anexo-info { margin-top: 4px; font-size: 13px; }
@media (max-width: 900px) {
  .table-form--evento { width: 100%; min-width: 0; }
}

/* --- 48.4b Tabela de eventos (migrada do <style> da página) ---------- */
/* Célula de data/horário empilhada: início em cima, término embaixo,
   num único td. Convive com .col-data, que dá a largura e o nowrap. */
#tabela-eventos .celula-periodo { line-height: 1.35; }
#tabela-eventos .celula-periodo .periodo-inicio { color: var(--text); }
#tabela-eventos .celula-periodo .periodo-fim { color: var(--muted); font-size: 12px; }
#tabela-eventos .celula-periodo .periodo-fim::before { content: "↳ "; }
/* Na linha selecionada o fundo é escuro: as cores acima são mais
   específicas que a regra da linha, então precisam ser forçadas aqui. */
#tabela-eventos tr.linha-selecionada .celula-periodo .periodo-inicio,
#tabela-eventos tr.linha-selecionada .celula-periodo .periodo-fim { color: #fff; }

/* Botão de anexo: quadrado vermelho com clipe branco; abre o PDF do BLOB. */
.btn-anexo-pdf {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 7px;
  background: var(--btn-danger-bg); text-decoration: none; line-height: 0;
}
.btn-anexo-pdf:hover { filter: brightness(.92); }
.btn-anexo-pdf svg { width: 14px; height: 14px; }

/* --- 48.5 Conteúdo livre dentro do popup padrão ---------------------

   O QUE ESTE BLOCO RESOLVE
   O popup "Sugestão de aplicação e uso" mostra uma tabela de medidas e uma
   imagem de 1536x1024. Ele passou por duas tentativas antes desta: a primeira
   deixava a imagem em tamanho natural e o popup inteiro ganhava barra de
   rolagem; a segunda trocou a barra por corte — a última linha da tabela e a
   base da imagem sumiam.

   O problema que sobrou depois dessas duas era HORIZONTAL, não vertical: a
   tabela tinha largura natural (table-layout automático) e, em janela estreita,
   ficava mais larga que a caixa; o .table-responsive então desenhava uma barra
   no pé — a "barra embaixo" que continuava aparecendo. Havia ainda um
   min-width:min(86vw,520px) no conteúdo que, abaixo de ~600px de janela, era
   maior que a largura útil do diálogo e empurrava tudo para fora.

   O DESENHO DE AGORA, em uma frase: o conteúdo é uma coluna que cabe na altura
   útil do diálogo e NUNCA é mais larga que ele. A tabela tem largura fixa e
   quebra o texto; a imagem é exibida em tamanho de tela e ocupa a sobra. Não há
   rolagem horizontal em largura nenhuma. Se a janela for muito baixa, quem rola
   é só a caixa da tabela, por dentro — cortar, nunca. */

/* O corpo do diálogo vira caixa flex para o conteúdo poder encolher até caber.
   A classe é posta pelo próprio mostrarPopupHtml() em vez de :has(): o :has()
   só existe em navegador recente, e isto não pode depender da versão do Chrome
   instalada na portaria. */
.app-dialog-body--flex {
  display: flex;
  /* Vertical em "auto" (se um dia não couber, rola em vez de cortar);
     horizontal travado, porque largura que estoura é sempre defeito de
     layout, não conteúdo que o usuário precise alcançar rolando. */
  overflow-x: hidden;
  overflow-y: auto;
  /* O corpo nasce com max-height:70vh (seção 33). Aqui isso sobrava espaço à
     toa: o diálogo já para em 100vh-32px, e a diferença virava faixa vazia
     embaixo enquanto o conteúdo era espremido em cima. */
  max-height: none;
}

.ev-popup-conteudo {
  /* Sem min-width: a largura vem do diálogo (.app-dialog--md = 640px), e em
     janela estreita ele já encolhe sozinho. O min-width de antes era o que
     estourava a caixa no celular. */
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: flex; flex-direction: column; gap: 12px;
  /* Item único do corpo flex: esticado pelo align-items:stretch, recebe
     exatamente a altura útil do corpo — altura definida, ao contrário do
     "max-height:100%" de uma versão anterior, que o Chrome resolvia como
     "none" porque a altura do corpo é indefinida (flex: 1 1 auto). */
  flex: 1 1 auto;
  min-height: 0;
}
.ev-popup-conteudo > .secao-titulo { margin-top: 0; flex: 0 0 auto; }

/* A tabela aparece inteira enquanto couber. Só quando passa de 46% da altura
   da janela é que para de crescer e rola por dentro, na vertical, em vez de
   empurrar a imagem para fora. O teto é 46vh e não 38vh porque a conta do caso
   comum não fechava: oito modelos pedem ~275px, e 38% de uma janela de 700px
   dá 266 — faltavam 9px e aparecia barra para quase nada. Horizontal nunca:
   table-layout fixo faz as colunas caberem e o texto longo quebrar. */
.ev-popup-conteudo > .table-responsive {
  flex: 0 1 auto; min-height: 76px; max-height: 46vh;
  overflow-x: hidden; overflow-y: auto;
  width: 100%; min-width: 0;
  margin-top: 0;
}
.ev-popup-conteudo table {
  width: 100%; max-width: 100%;
  table-layout: fixed; border-collapse: collapse;
  /* A regra geral de tabela do sistema (seção 6) tem min-width:400px para a
     listagem não ser esmagada numa tela pequena — lá a barra horizontal é a
     saída certa. Dentro do popup não é: a largura útil do diálogo no celular
     fica em torno de 280–310px, e esses 400px eram exatamente a "barra
     embaixo" que continuava aparecendo. Aqui a tabela cabe e o texto quebra. */
  min-width: 0;
}
.ev-popup-conteudo table th,
.ev-popup-conteudo table td { overflow-wrap: anywhere; word-break: break-word; }
/* Nome do modelo fica com a sobra; largura e altura são números curtos. */
.ev-popup-conteudo table th:not(:first-child),
.ev-popup-conteudo table td:not(:first-child) { width: 22%; }

.ev-sugestao-imagem {
  /* A imagem tem 1536x1024: à vontade ela pede uns 430px de altura dentro do
     popup, e essa fome espremia a tabela — era por isso que a tabela ganhava
     barra mesmo em tela grande, onde cabia inteira. O max-height dá a ela um
     tamanho de EXIBIÇÃO (38% da altura da janela) em vez do tamanho do arquivo;
     o min-height evita o contrário, a imagem virar uma faixa de poucos pixels
     numa tela baixa — aí quem cede é a tabela, que rola por dentro. */
  flex: 1 1 auto; min-height: 104px; max-height: 38vh;
  display: flex; align-items: center; justify-content: center;
  margin: 0; background: var(--panel-alt); padding: 10px;
  border-radius: var(--radius); min-width: 0; overflow: hidden;
}
.ev-sugestao-imagem img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto; object-fit: contain;
  border: 1px solid var(--border); border-radius: var(--radius);
}
/* Aviso de imagem ausente: ocupa o lugar dela sem mudar a altura da caixa. */
.ev-sugestao-imagem .ev-sugestao-erro {
  color: var(--danger, #d9534f); font-size: 13px; text-align: center; padding: 0 10px;
}

/* --- 48.6 Folha de impressão dos detalhes do evento ----------------- */
body.ev-folha { background: #fff; color: #111827; padding: 14mm 12mm; font-family: Arial, Helvetica, sans-serif; }
body.ev-folha h1 { font-size: 20px; margin: 0 0 4px; color: #0b2e6f; }
body.ev-folha .ev-folha-sub { color: #6b7280; margin: 0 0 20px; font-size: 13px; }
body.ev-folha table { width: 100%; border-collapse: collapse; }
body.ev-folha td { padding: 9px 6px; border-bottom: 1px solid #e5e7eb; vertical-align: top; font-size: 13.5px; }
body.ev-folha td:first-child { width: 160px; color: #4b5563; font-weight: 600; }
@media print {
  @page { size: A4 portrait; margin: 12mm 11mm 14mm; }
  body.ev-folha { padding: 3mm 4mm 2mm; }
  body.ev-folha * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.ev-folha, body.ev-folha p { orphans: 1; widows: 1; }
}

@media (max-width: 640px) {
  #modal-ver-evento .ve-grid { grid-template-columns: 1fr; row-gap: 4px; }
  #modal-ver-evento .ve-label { padding-top: 8px; }
  .ev-popup-conteudo { min-width: 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   49. EMBARQUE E PEDESTRE
   Migrado dos blocos <style> de cadastro_embarque.php,
   movimentacao_embarque.php, monitor_embarque.php,
   movimentacao_pedestre.php e monitor_pedestre.php.

   Tabelas, botões, popups, abas e paginação dessas telas usam os
   componentes globais (.table, .btn, .app-dialog, .tabs,
   .pagination-controls). Aqui fica só o que é próprio do domínio:
   os painéis de chamada, a grade de vagas e a lista de veículos.

   Cor de botão por função (convenção do sistema):
     primary   ação principal do formulário / confirmar
     success   concluir, liberar para seguir, adicionar item
     danger    excluir, liberar vaga, limpar fila
     info      editar / detalhar
     secondary cancelar, fechar, ações auxiliares
   ═══════════════════════════════════════════════════════════════════ */

/* --- 49.1 Painel de chamada (monitor_embarque e monitor_pedestre) --- */
/* Tela de parede: ocupa a altura da janela e não rola. */
.mon-painel {
  display: flex; flex-direction: column; box-sizing: border-box;
  height: calc(100vh - 100px); min-height: 420px;
  margin: 12px auto 16px; padding: 16px 20px;
  width: min(1600px, calc(100% - 24px));
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.mon-painel:fullscreen {
  width: 100vw; height: 100vh; margin: 0; padding: 16px; border-radius: 0;
}

.mon-header-bar {
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: space-between; align-items: center; flex-shrink: 0;
  padding-bottom: 10px; margin-bottom: 12px;
  border-bottom: 2px solid var(--border-strong);
}
.mon-title { margin: 0; font-size: clamp(1.2rem, 2.2vw, 2rem); font-weight: 800; }
.mon-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.mon-select {
  width: auto; min-width: 160px; margin: 0;
  font-weight: 600; font-size: 14px;
}

.mon-grid {
  display: grid; gap: 16px; flex: 1; min-height: 0;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
.mon-carregando {
  grid-column: 1 / -1; align-self: center;
  text-align: center; font-size: 1.4rem; color: var(--muted);
}

.mon-card {
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  background: var(--panel); color: var(--text);
  border: 3px solid var(--border-strong); border-radius: 12px;
}
.mon-card.is-ocupado { border-color: var(--btn-warning-bg, #d97706); }
.mon-card.is-saida   { border-color: var(--btn-primary-bg); }

.mon-card-header {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  flex-shrink: 0; padding: 10px 16px;
  background: var(--table-head-bg); border-bottom: 2px solid var(--border);
  font-weight: 800; font-size: clamp(1rem, 1.4vw, 1.5rem);
}
.mon-badge {
  padding: 5px 12px; border-radius: 20px;
  font-size: .85rem; font-weight: 800; white-space: nowrap;
}
.mon-badge--livre   { background: var(--btn-success-bg); color: var(--btn-success-text); }
.mon-badge--ocupado { background: var(--btn-danger-bg);  color: var(--btn-danger-text); }
.mon-badge--saida   { background: var(--btn-primary-bg); color: var(--btn-primary-text); }

.mon-card-body {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex: 1; min-height: 0; overflow: hidden; padding: 14px 18px;
}
.mon-card-info {
  display: flex; flex-direction: column; justify-content: space-evenly;
  flex: 1; min-width: 0; height: 100%; overflow: hidden;
}

/* Placa no padrão Mercosul: cores fixas de propósito — é a reprodução de
   um objeto físico, não um elemento de tema. */
.mon-placa {
  display: inline-flex; flex-direction: column; align-self: flex-start; flex-shrink: 0;
  width: 190px; overflow: hidden; user-select: none;
  background: #fff; border: 2.5px solid #000; border-radius: 6px;
}
.mon-placa-topo {
  display: flex; justify-content: space-between; align-items: center;
  height: 20px; padding: 1px 8px; box-sizing: border-box;
  background: #003399; color: #fff;
  font-size: .7rem; font-weight: 800; letter-spacing: 1px;
}
.mon-placa-numero {
  padding: 2px 0; text-align: center; text-transform: uppercase;
  background: #fff; color: #000;
  font-family: 'Consolas', 'Liberation Mono', 'Courier New', monospace;
  font-size: 1.9rem; font-weight: 800; letter-spacing: 1.5px; line-height: 1.1;
}

/* -webkit-line-clamp corta em 2 linhas; a classe de escala vem do JS,
   escolhida pelo comprimento do nome, para o cartão não estourar. */
.mon-nome {
  margin: 0; font-weight: 800; line-height: 1.15; word-break: break-word;
  font-size: 2.2rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mon-nome--md { font-size: 1.9rem; }
.mon-nome--sm { font-size: 1.65rem; }
.mon-nome--xs { font-size: 1.35rem; }

.mon-detalhe {
  font-size: 1.2rem; font-weight: 600; color: var(--text); opacity: .9;
  word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mon-detalhe strong { color: var(--accent); }

.mon-foto-caixa { display: flex; align-items: center; justify-content: center; flex-shrink: 0; height: 100%; }
.mon-foto {
  width: 155px; height: 195px; max-height: 100%;
  object-fit: cover; border-radius: 10px;
  border: 3px solid var(--border-strong); background: var(--panel-alt);
}

.mon-vazio {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; height: 100%; opacity: .45; text-align: center;
}
.mon-vazio-titulo { font-size: 2.4rem; font-weight: 900; letter-spacing: 1px; }
.mon-vazio-sub { font-size: 1.3rem; font-weight: 600; }

/* Alto contraste: cores absolutas de propósito — é recurso de acessibilidade
   para telas de parede vistas de longe, não uma variação de tema. */
.mon-painel.mon-alto-contraste { background: #000; color: #fff; border: 2px solid #fff; }
.mon-painel.mon-alto-contraste .mon-header-bar { border-bottom-color: #fff; }
/* !important porque as regras de .btn-* da seção 5 também usam !important. */
.mon-painel.mon-alto-contraste .mon-select,
.mon-painel.mon-alto-contraste .btn {
  background-color: #000 !important; color: #fff !important; border: 2px solid #fff !important;
}
.mon-painel.mon-alto-contraste .mon-card { background: #000; border-color: #fff; color: #fff; }
.mon-painel.mon-alto-contraste .mon-card.is-ocupado,
.mon-painel.mon-alto-contraste .mon-card.is-saida { background: #111; border-width: 3px; }
.mon-painel.mon-alto-contraste .mon-card-header { background: #1e293b; color: #fff; border-bottom-color: #fff; }
.mon-painel.mon-alto-contraste .mon-nome,
.mon-painel.mon-alto-contraste .mon-detalhe,
.mon-painel.mon-alto-contraste .mon-detalhe strong { color: #fff; opacity: 1; }
.mon-painel.mon-alto-contraste .mon-foto { border-color: #fff; }
.mon-painel.mon-alto-contraste .mon-badge--livre { background: #0f0; color: #000; }
.mon-painel.mon-alto-contraste .mon-badge--ocupado { background: #f00; color: #fff; }
.mon-painel.mon-alto-contraste .mon-badge--saida { background: #ff0; color: #000; }

@media (max-width: 1100px) {
  .mon-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); }
  .mon-placa { width: 150px; }
  .mon-placa-numero { font-size: 1.5rem; }
  .mon-foto { width: 110px; height: 140px; }
}
@media (max-width: 700px) {
  .mon-painel { height: auto; }
  .mon-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .mon-card { min-height: 200px; }
}

/* --- 49.2 Grade de vagas (movimentacao_embarque) -------------------- */
.emb-grid {
  display: grid; gap: 16px; margin-top: 16px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.emb-grid-aviso {
  grid-column: 1 / -1; padding: 30px;
  text-align: center; color: var(--muted);
}

.emb-vaga {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--panel); border: 2px solid var(--border-strong); border-radius: var(--radius);
}
.emb-vaga.is-ocupada { border-color: var(--btn-warning-bg, #d97706); }
.emb-vaga.is-livre   { border-color: var(--btn-success-bg); }

.emb-vaga-header {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 10px 14px; background: var(--table-head-bg);
  border-bottom: 1px solid var(--border); font-weight: 700;
}
.emb-vaga-body { display: flex; flex-direction: column; gap: 6px; padding: 14px; }
.emb-vaga-body--livre { align-items: center; justify-content: center; min-height: 130px; }
.emb-vaga-livre-texto { font-weight: 700; color: var(--btn-success-bg); }
.emb-btn-bloco { width: 100%; margin: 8px 0 0; }

.emb-placa {
  align-self: flex-start;
  padding: 4px 10px; border-radius: 6px;
  background: var(--panel-alt); border: 2px solid var(--border-strong); color: var(--text);
  font-family: 'Consolas', 'Liberation Mono', 'Courier New', monospace;
  font-size: 1.25rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
}
.emb-placa--sm { font-size: 1rem; padding: 2px 8px; }
.emb-nome { margin: 4px 0 0; font-size: 1.05rem; font-weight: 700; }
.emb-detalhe { font-size: 13px; color: var(--muted); }

/* --- 49.3 Leitura de código e escolha em popup ---------------------- */
.emb-linha-leitura, .ped-leitura-campos { display: flex; gap: 8px; align-items: stretch; }
.emb-input-leitura, .ped-leitura-input {
  flex: 1 1 auto; min-width: 0 !important;   /* a regra global de input força 180px */
  text-align: center; text-transform: uppercase;
  font-size: 1.1rem; font-weight: 700; letter-spacing: 1px;
}

.ped-leitura {
  padding: 16px; margin-bottom: 18px;
  background: var(--panel-alt);
  border: 2px dashed var(--border-strong); border-radius: var(--radius);
}
.ped-leitura > label { display: block; margin-bottom: 8px; font-weight: 700; }
.ped-leitura > small { display: block; margin-top: 8px; }

.emb-opcoes, .ped-opcoes { display: flex; flex-direction: column; gap: 8px; }
.emb-opcao, .ped-opcao {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--panel);
}
.emb-opcao:hover, .ped-opcao:hover { border-color: var(--accent); background: var(--table-row-hover); }
.emb-opcao:has(input:checked), .ped-opcao:has(input:checked) {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
/* Sem o reset, a regra global de .field faria o radio/checkbox ocupar 100%. */
.emb-opcao input, .ped-opcao input { width: auto; min-width: 0; margin: 0; flex: 0 0 auto; }
.emb-opcao-dados, .ped-opcao-dados { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.emb-opcao-dados .status-badge { align-self: flex-start; }

.emb-camera, .ped-camera { text-align: center; }
#emb-qr-reader, #ped-qr-reader { width: 100%; max-width: 320px; margin: 0 auto; }

/* --- 49.4 Lista de veículos do passageiro (cadastro_embarque) -------- */
.emb-veiculos {
  padding: 14px; margin: 0 0 16px;
  background: var(--panel-alt); border: 1px solid var(--border); border-radius: var(--radius);
}
.emb-veiculos-topo {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  flex-wrap: wrap; margin-bottom: 6px;
}
.emb-veiculos-titulo { font-weight: 700; }
.emb-veiculos .text-muted { margin: 0 0 10px; }

.emb-veiculo-linha {
  display: grid; align-items: center; gap: 8px; margin-bottom: 8px;
  grid-template-columns: 28px 130px 1fr 1fr 110px auto;
}
.emb-veiculo-linha input { margin: 0; min-width: 0 !important; }
.emb-veiculo-placa { text-transform: uppercase; font-weight: 700; letter-spacing: .5px; }
.emb-veiculo-ordem {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 12px; font-weight: 700;
}
.emb-veiculo-remover { margin: 0; }
.emb-veiculo-remover:disabled { opacity: .4; cursor: not-allowed; }

.emb-placa-tag {
  display: inline-block; margin: 0 4px 4px 0; padding: 2px 7px;
  background: var(--panel-alt); border: 1px solid var(--border-strong); border-radius: 4px;
  font-family: 'Consolas', 'Liberation Mono', 'Courier New', monospace;
  font-size: 12px; font-weight: 700; letter-spacing: .5px;
}
.emb-placa-tag.is-principal { border-color: var(--accent); color: var(--accent); }
/* Contador "N veículos" abaixo das placas, não emendado na última tag. */
.emb-placa-tag + small { display: block; margin-top: 2px; }

.emb-cpf-aviso { display: block; min-height: 15px; margin-top: 4px; font-size: 12px; color: var(--muted); }
.emb-cpf-aviso.is-ok     { color: var(--btn-success-bg); }
.emb-cpf-aviso.is-alerta { color: var(--btn-warning-bg, #d97706); }
.emb-cpf-aviso.is-erro   { color: var(--btn-danger-bg); }

/* Campo que ocupa a linha inteira do .form-grid. */
.field--largo { grid-column: 1 / -1; }

@media (max-width: 820px) {
  .emb-veiculo-linha { grid-template-columns: 28px 1fr 1fr; }
  .emb-veiculo-remover { grid-column: 1 / -1; }
}

/* =====================================================================
   50. CADASTROS DE PESSOAS, VEÍCULOS, MOVIMENTAÇÃO E AVISOS
   ---------------------------------------------------------------------
   Blocos migrados dos <style> inline de pessoa_fisica.php,
   pessoa_juridica.php, cadastro_veiculos.php, movimentacao.php,
   acessos.php e avisos.php. As telas reaproveitam .card, .table,
   .form-grid, .field, .btn, .chip, .alert-box e .pagination-controls
   já definidos acima; aqui ficam só os blocos próprios delas.
   ===================================================================== */

/* --- 50.1 Blocos recolhíveis e grade de campos (prefixo px-) --------- */

.px-bloco {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  margin-bottom: 16px;
  overflow: hidden;
}

.px-bloco-head {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 12px 14px;
  background: var(--panel-alt);
  border: 0; border-bottom: 1px solid var(--border);
  font-size: 14px; font-weight: 700; color: var(--text);
  text-align: left; cursor: pointer;
}
.px-bloco-head:hover { background: var(--panel-alt-hover); }

.px-seta { display: inline-block; font-size: 11px; transition: transform .15s ease; }
.px-bloco.is-open .px-seta { transform: rotate(90deg); }

.px-badge {
  margin-left: auto; padding: 2px 9px; border-radius: 999px;
  background: rgba(37, 99, 235, .12); color: #2563eb;
  font-size: 11px; font-weight: 700;
}
.px-badge.vazio { background: var(--panel-alt); color: var(--muted); }

.px-bloco-body { display: none; padding: 16px 14px; }
.px-bloco.is-open .px-bloco-body { display: block; }

.px-hint { margin: 0 0 12px; font-size: 12px; color: var(--muted); }

.px-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 16px; }
.px-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.px-campo.col-2 { grid-column: span 2; }
.px-campo label { font-size: 12px; font-weight: 600; color: var(--muted); }

@media (max-width: 700px) {
  .px-grid { grid-template-columns: 1fr; }
  .px-campo.col-2 { grid-column: span 1; }
}

/* --- 50.1b Linhas repetíveis de telefone / e-mail e busca de CEP ------
   Vinha de um <style> dentro de includes/pessoa_contatos_form.php, que
   redefinia as mesmas classes .px-* desta seção. Como o bloco inline ficava
   depois da folha, ele vencia — e era ali que estava o hover claro que fazia
   o texto sumir no modo escuro. Agora existe só esta definição. */

.px-cep-status { font-size: 12px; margin-top: 5px; min-height: 14px; }
.px-cep-status--buscando { color: var(--muted); }
.px-cep-status--ok   { color: var(--btn-success-bg); }
.px-cep-status--erro { color: var(--btn-danger-bg); }

.px-linha {
  display: grid; grid-template-columns: 26px 1.4fr 1fr 1fr 1fr 34px;
  gap: 9px; align-items: center; padding: 9px; margin-bottom: 8px;
  border: 1px solid var(--border); border-radius: 6px; background: var(--panel);
}
.px-linha.principal { border-left: 4px solid var(--accent); }
.px-linha input {
  padding: 7px 9px; border: 1px solid var(--border-strong); border-radius: 4px;
  font-size: 13px; width: 100%; box-sizing: border-box; font-family: inherit;
  background: var(--panel); color: var(--text);
}
.px-radio-wrap { display: flex; align-items: center; justify-content: center; }
.px-radio-wrap input[type=radio] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent); }

.px-remover {
  border: 1px solid transparent; border-radius: 4px;
  background: rgba(220, 38, 38, .14); color: var(--btn-danger-bg);
  width: 30px; height: 30px; font-size: 16px; font-weight: 700; cursor: pointer; line-height: 1;
}
.px-remover:hover { background: rgba(220, 38, 38, .26); }

.px-add {
  border: 1px dashed var(--border-strong); background: var(--panel-alt);
  color: var(--accent); border-radius: 5px; padding: 8px 14px; font-size: 13px;
  font-weight: 700; cursor: pointer; font-family: inherit; margin-top: 2px;
}
.px-add:hover { background: var(--panel-alt-hover); border-color: var(--accent); }

.px-legenda { font-size: 12px; color: var(--muted); margin-top: 8px; }

@media (max-width: 760px) {
  .px-linha { grid-template-columns: 26px 1fr 1fr; }
  .px-linha .px-remover { grid-column: 3 / -1; justify-self: end; }
}

/* --- 50.2 Popup de visualização de pessoa (PF e PJ) ------------------ */

.px-view-body { display: flex; flex-direction: column; gap: 16px; }

.px-view-topo { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.px-view-avatar { width: 84px; height: 84px; border-radius: 10px; flex-shrink: 0; }

.px-view-secao {
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.px-view-secao > h4 {
  margin: 0 0 8px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
}

.px-view-linha {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 5px 0; border-bottom: 1px dashed var(--border);
}
.px-view-linha:last-child { border-bottom: 0; }

.px-view-label { flex: 0 0 150px; font-size: 12px; font-weight: 600; color: var(--muted); }
.px-view-valor { flex: 1 1 200px; min-width: 0; font-size: 13px; color: var(--text); word-break: break-word; }
.px-view-obs   { margin: 0; font-size: 13px; color: var(--text); white-space: pre-wrap; }
.px-view-vazio { margin: 0; font-size: 13px; color: var(--muted); }

.px-view-tag {
  padding: 2px 8px; border-radius: 999px;
  background: var(--panel-alt); border: 1px solid var(--border);
  font-size: 11px; color: var(--muted);
}

@media (max-width: 600px) {
  .px-view-label { flex: 1 1 100%; }
}

/* --- 50.3 Cadastro de veículos --------------------------------------- */

.veic-placa { text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }

.veic-busca { position: relative; }
.veic-busca #searchResults {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 240px; overflow-y: auto; margin-top: 6px;
}

.veic-resultado {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel); cursor: pointer;
}
.veic-resultado:hover { background: var(--panel-alt); border-color: var(--accent); }
.veic-resultado.is-vazio { justify-content: center; color: var(--muted); cursor: default; }
.veic-resultado.is-vazio:hover { background: var(--panel); border-color: var(--border); }

.veic-pessoa {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px; margin-bottom: 6px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--panel-alt);
}
.veic-pessoa > span { flex: 1 1 auto; min-width: 0; font-size: 13px; }
.veic-pessoa .btn { margin: 0; }

/* --- 50.4 Movimentação veicular -------------------------------------- */

/* Select + botão lado a lado, sem estourar a largura do .field. */
.mov-motivo-linha { display: flex; gap: 8px; align-items: center; }
/* max-width junto do min-width:0 — sem ele o select fechado cresce até caber o
   nome mais longo da lista e empurra o botão "Motivos" para fora do cartão. */
.mov-motivo-linha > select,
.mov-motivo-linha > input { flex: 1 1 auto; min-width: 0; max-width: 100%; text-overflow: ellipsis; }
.mov-motivo-linha > .btn { margin: 0; flex: 0 0 auto; }

.mov-motivos-lista { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.mov-motivos-lista .motivo-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-alt);
  font-size: 13px;
}

.mov-pessoas { margin: 14px 0; }
.mov-pessoas-titulo { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 700; color: var(--muted); }
.mov-pessoas-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }

.mov-pessoa {
  display: flex; align-items: center; gap: 10px;
  padding: 10px; border: 2px solid var(--border); border-radius: 8px;
  background: var(--panel); cursor: pointer; user-select: none;
  opacity: .55; transition: border-color .15s ease, background .15s ease, opacity .15s ease;
}
.mov-pessoa.is-ativa { opacity: 1; border-color: var(--btn-success-bg, #15803d); background: rgba(21, 128, 61, .08); }
.mov-pessoa-foto { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.mov-pessoa-nome {
  margin: 0; flex: 1 1 auto; min-width: 0;
  font-size: 13px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Destaque temporário do formulário ao entrar em edição. */
.focado-edicao { box-shadow: 0 0 0 3px rgba(37, 99, 235, .35); transition: box-shadow .3s ease; }

/* --- 50.5 Quadro de avisos ------------------------------------------- */

.avs-blocos { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.avs-blocos > .card { min-width: 0; margin-bottom: 0; }
@media (max-width: 1100px) { .avs-blocos { grid-template-columns: 1fr; } }

.avs-filtros-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px 18px; margin-bottom: 14px; }

.avs-anexos {
  padding: 14px; margin-bottom: 14px;
  border: 1px dashed var(--border-strong); border-radius: 10px; background: var(--panel-alt);
}

/* Listas de seleção com busca (destinatários, setores, filtros). */
.checklist-box {
  height: 150px; overflow-y: auto; padding: 6px;
  border: 1px solid var(--border-strong); border-radius: 8px; background: var(--panel);
}
.checklist-item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 7px; border-radius: 6px;
  font-size: 13px; color: var(--text); cursor: pointer; user-select: none;
}
.checklist-item:hover { background: var(--panel-alt); }
.checklist-item input[type="checkbox"] { width: 15px; height: 15px; flex-shrink: 0; cursor: pointer; }
.checklist-item span { min-width: 0; word-break: break-word; }
.checklist-toggle-btns { display: flex; gap: 6px; margin-top: 6px; }
.checklist-toggle-btns .btn { margin: 0; }

/* Anexos: miniaturas e arquivos de vídeo. */
.midia-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.midia-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.midia-item .btn { margin: 0; }
.midia-thumb {
  width: 90px; height: 90px; object-fit: cover;
  border: 1px solid var(--border); border-radius: 6px; display: block;
}
.midia-video { max-width: 320px; border-radius: 6px; border: 1px solid var(--border); }
.midia-arquivo {
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--panel-alt); font-size: 12px; color: var(--text);
}

.setor-tag {
  display: inline-block; margin: 2px 4px 2px 0; padding: 2px 8px;
  border: 1px solid var(--border-strong); border-radius: 999px;
  background: var(--panel-alt); color: var(--muted);
  font-size: 11px; max-width: 100%; word-break: break-word;
}

.status-pill {
  display: inline-block; margin: 2px 3px 2px 0; padding: 3px 10px;
  border: 1px solid transparent; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; max-width: 100%; word-break: break-word;
}
.status-pill.st-concluido { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
.status-pill.st-cancelado { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
.status-pill.st-contato   { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.status-pill.st-neutro    { background: var(--panel-alt); color: var(--muted); border-color: var(--border); }

.aviso-secao-label {
  display: block; margin: 14px 0 8px;
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted);
}
.aviso-conteudo-box {
  padding: 14px; min-height: 70px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--panel-alt);
  font-size: 13.5px; line-height: 1.55; color: var(--text); white-space: pre-wrap;
}

html.dark-mode .status-pill.st-concluido { background: rgba(21,128,61,.18);  color: #86efac; border-color: #166534; }
html.dark-mode .status-pill.st-cancelado { background: rgba(185,28,28,.18);  color: #fca5a5; border-color: #7f1d1d; }
html.dark-mode .status-pill.st-contato   { background: rgba(146,64,14,.22);  color: #fde68a; border-color: #78550a; }
html.dark-mode .px-badge                 { background: rgba(147,197,253,.16); color: #93c5fd; }

/* Lista de observações da pessoa dentro do popup (AppDialog.show). O texto
   vem do banco e é escapado no JS; a formatação fica por conta destas
   classes, não de HTML embutido na mensagem. */
.obs-lista { display: flex; flex-direction: column; gap: 10px; }
.obs-item {
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 12px; border-left: 3px solid var(--btn-warning-bg, #d97706);
  border-radius: 0 8px 8px 0; background: var(--panel-alt);
}
.obs-item strong { font-size: 13px; color: var(--text); }
.obs-item span { font-size: 13px; color: var(--muted); white-space: pre-wrap; }

/* --- Rodapé informativo abaixo de uma tabela --------------------------
   Usado pela tela de Acessos para dizer em quantos dias o registro é
   excluído automaticamente. Classe própria em vez de style embutido, para
   as demais telas poderem usar a mesma linha sem copiar cor e espaçamento. */
.tabela-rodape-info {
  display: block; margin-top: 10px;
  font-size: 12.5px; line-height: 1.5; color: var(--muted);
}

/* --- Relatórios de Embarque e Saídas ----------------------------------- */
.rel-emb-filtros {
  display: grid; gap: 12px 16px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.rel-emb-listas {
  display: grid; gap: 16px; margin-top: 6px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.rel-emb-lista > label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; }
.rel-emb-lista .input-sm { margin-bottom: 6px; }
/* A caixa rola sozinha: com centenas de passageiros, a lista inteira empurraria
   os botões de exportar para fora da tela. */
.rel-emb-caixa {
  max-height: 190px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 10px; background: var(--panel);
}
.rel-emb-item {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 3px 0; font-size: 13.5px; line-height: 1.35; cursor: pointer;
}
.rel-emb-item input { margin-top: 3px; flex: 0 0 auto; }
.rel-emb-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

/* --- Check-in / check-out do evento (eventos/checks.php) ---------------
   Tela e conceito próprios: contagem conta quantas vezes algo aconteceu;
   check registra quem entrou e quem saiu num momento. Por isso este bloco
   NÃO fica dentro de #modal-contagens. */
.check-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.check-item:last-of-type { border-bottom: 0; }
.check-badge {
  display: inline-block; margin-right: 8px; padding: 2px 8px;
  border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .4px;
}
.check-badge.entrada { background: #dbeafe; color: #1d4ed8; }
.check-badge.saida   { background: #fee2e2; color: #b91c1c; }
html.dark-mode .check-badge.entrada { background: #17233f; color: #93c5fd; }
html.dark-mode .check-badge.saida   { background: #3a1b1b; color: #fca5a5; }
.check-meta { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.check-pessoas { padding: 4px 0 14px; }

/* Retorno de cada leitura de CPF, o mais recente no topo. */
.check-log { margin-top: 14px; max-height: 220px; overflow-y: auto; }
.check-log-linha {
  padding: 7px 10px; margin-bottom: 6px; border-radius: 7px;
  font-size: 13px; line-height: 1.4;
}
.check-log-linha.ok    { background: rgba(22,163,74,.10);  border: 1px solid rgba(22,163,74,.28); }
.check-log-linha.aviso { background: rgba(217,119,6,.10);  border: 1px solid rgba(217,119,6,.28); }
.check-log-linha.erro  { background: rgba(185,28,28,.10);  border: 1px solid rgba(185,28,28,.28); }

/* --- Sorteios do evento (eventos/sorteio.php) --------------------------- */
.sort-grid {
  display: grid; gap: 12px 18px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.sort-sub { margin: 22px 0 10px; font-size: 15px; }
/* Seletor de cor: o <input type="color"> nasce com tamanho de botão do sistema
   operacional, diferente em cada um. Aqui ele fica com a mesma altura dos
   outros campos da grade, para a linha não ficar desalinhada. */
.sort-cor {
  width: 100%; height: 42px; padding: 3px; cursor: pointer;
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--panel);
}
.sort-checks {
  border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; max-height: 180px; overflow-y: auto; background: var(--panel);
}
.sort-checks-titulo {
  display: block; margin-bottom: 6px;
  font-size: 12px; font-weight: 800; letter-spacing: .4px; color: var(--muted);
}
.sort-premio-linha { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sort-premio-num { flex: 0 0 34px; text-align: right; color: var(--muted); font-size: 13px; }
/* A cadeia de :not() é repetida de propósito: a regra base do .input usa
   input:not(...) cinco vezes, e em CSS cada :not([atributo]) soma
   especificidade. Sem repetir, o max-width abaixo perde para ela e o campo
   atravessa a tela inteira. Mesmo motivo explicado no bloco de popups. */
.sort-premio-linha > input.input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]) { flex: 1 1 auto; max-width: 460px; }
.sort-link {
  margin-top: 12px; padding: 12px 14px; border-radius: 8px;
  background: rgba(15,118,110,.08); border: 1px solid rgba(15,118,110,.22);
}
.sort-link-rotulo { display: block; font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.sort-link-linha { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sort-link-linha > input.input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]) { flex: 1 1 320px; min-width: 0; max-width: none; }

/* ===========================================================================
   Utilitários de formulário compartilhados com o painel /adm_emp
   ---------------------------------------------------------------------------
   As classes .ae-* nasceram em adm_emp/adm_emp.css. As telas novas do sistema
   (Relatórios de Embarque e Saídas, Sorteios do Evento) usam o mesmo desenho
   de campo — rótulo em cima, campo embaixo, dentro de um grid que se ajusta à
   largura. Repetir a definição aqui é o que faz essas telas ficarem iguais às
   demais sem carregar o CSS do painel, que tem menu e cores próprios.

   Por que não usar .form-row: lá o rótulo é uma coluna fixa de 190px ao lado
   do campo. Numa coluna estreita de grid isso quebra o campo para a linha de
   baixo e cada célula para numa altura diferente.

   O adm_emp.css continua carregado DEPOIS deste arquivo no painel, então lá
   as definições dele continuam valendo — não há conflito.
   =========================================================================== */
.ae-grid {
  display: grid; gap: 16px 20px; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.ae-f { display: flex; flex-direction: column; align-items: stretch; margin: 0; min-width: 0; }
.ae-f > label {
  min-height: 2.5em;                 /* cabe rótulo de uma ou duas linhas */
  display: flex; align-items: flex-end;
  margin: 0 0 6px; padding: 0;
  font-size: 13px; font-weight: 600; line-height: 1.25; color: var(--muted);
}
.ae-f > .input, .ae-f > input, .ae-f > select, .ae-f > textarea {
  width: 100%; max-width: none; min-width: 0; flex: 0 0 auto;
}
.ae-f > textarea { min-height: 90px; }
.ae-dica { font-size: 12px; line-height: 1.4; opacity: .75; margin: 6px 0 0; }
.ae-form-rodape { margin-top: 20px; display: flex; gap: 8px; flex-wrap: wrap; }
.ae-barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 22px;
  padding-bottom: 14px; border-bottom: 1px solid var(--border);
}
.ae-acoes { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ae-mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }
.ae-tag {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.ae-tag-ativa    { background: #dcfce7; color: #166534; }
.ae-tag-suspensa { background: #fee2e2; color: #991b1b; }
.ae-tag-vencida  { background: #fef3c7; color: #92400e; }
html.dark-mode .ae-tag-ativa    { background: #14331f; color: #86efac; }
html.dark-mode .ae-tag-suspensa { background: #3a1b1b; color: #fca5a5; }
html.dark-mode .ae-tag-vencida  { background: #3a2f14; color: #fcd34d; }

/* --- Escolha do momento antes de ler o CPF (botão "Check" do evento) ----
   Botões largos e empilhados: quem opera está na portaria, muitas vezes com
   uma mão no leitor de crachá, e precisa acertar o alvo sem mirar. */
#modal-escolher-check .escolher-check-item {
  display: block; width: 100%; margin: 0 0 8px;
  padding: 12px 14px; text-align: left; font-size: 14.5px;
}
#modal-escolher-check .escolher-check-item small { opacity: .8; font-weight: 400; }
#modal-escolher-check .escolher-check-titulo {
  margin: 16px 0 8px; font-size: 11.5px; font-weight: 800;
  letter-spacing: .6px; text-transform: uppercase; color: var(--muted);
}

/* --- Opções do relatório de ganhadores do sorteio ---------------------- */
.sort-rel-grupo { margin-bottom: 18px; }
.sort-rel-cabecalho {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px;
}
.sort-rel-cabecalho .btn { margin: 0; }
#modalRelatorioSorteio .sort-checks { max-height: 220px; }
#modalRelatorioSorteio .rel-emb-item small { color: var(--muted); }

/* ═══════════════════════════════════════════════════════════════════
   52. DASHBOARD EM BLOCOS (home.php)
   A tela inicial deixou de ser só os gráficos de acesso: cada módulo a
   que a pessoa tem acesso pode colocar ali um resumo do que espera por
   ela. Os blocos são cartões iguais aos do resto do sistema, em grade
   que se reacomoda sozinha — em tela estreita viram uma coluna só.
   ═══════════════════════════════════════════════════════════════════ */

/* Contadores do topo. Número grande, rótulo pequeno: o olho pega o
   número primeiro, que é o que interessa em dois segundos de olhada. */
.dash-resumo {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px;
}
.dash-resumo-item {
  display: flex; align-items: baseline; gap: 8px;
  padding: 10px 14px; border-radius: var(--radius);
  background: var(--panel-alt); border-left: 4px solid var(--accent);
}
.dash-resumo-item .n { font-size: 22px; font-weight: 700; line-height: 1; }
.dash-resumo-item .r { font-size: 13px; color: var(--muted); }
.dash-cor-aviso  { border-left-color: #b45309; }
.dash-cor-doc    { border-left-color: #1e40af; }
.dash-cor-escala { border-left-color: #15803d; }
.dash-cor-req    { border-left-color: #7c3aed; }
.dash-cor-conta  { border-left-color: #dc2626; }

.dash-vazio { color: var(--muted); margin: 14px 0 0; }

/* UMA COLUNA, sempre.
   A grade de duas colunas parecia melhor no desenho e ficava pior na tela: os
   blocos têm alturas diferentes (dois avisos de um lado, cinco turnos do
   outro), e o que sobra é um degrau no meio da página. Em coluna única cada
   bloco começa onde o anterior terminou, e o olho percorre a tela de cima para
   baixo, na ordem de prioridade.

   Sem "gap" aqui: o espaço entre os blocos é a margem que TODO cartão do
   sistema já tem (.card, margin-bottom:16px). Era isso que estava fora do
   padrão — a grade zerava a margem do cartão e punha um gap próprio, então a
   distância entre os blocos da dashboard não batia com a do resto do site. */
.dash-grade { display: block; }
.dash-bloco { margin-bottom: 16px; }

.dash-bloco-topo {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 10px;
}
.dash-bloco-topo h3 { margin: 0; font-size: 16px; }
.dash-link { font-size: 12.5px; white-space: nowrap; }
.dash-nada { color: var(--muted); font-size: 13.5px; margin: 0; }

.dash-lista { list-style: none; margin: 0; padding: 0; }
.dash-lista > li {
  padding: 9px 0; border-bottom: 1px solid var(--border);
  font-size: 13.5px; line-height: 1.45;
}
.dash-lista > li:last-child { border-bottom: 0; padding-bottom: 0; }
.dash-linha-topo {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.dash-linha-topo strong { font-weight: 600; }
.dash-quando, .dash-valor { font-size: 12px; color: var(--muted); white-space: nowrap; }
.dash-valor { font-weight: 600; color: var(--text); }
.dash-sub { font-size: 12.5px; color: var(--muted); }
.dash-fraco { opacity: 0.85; }
.dash-mais { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); }

.dash-selo {
  display: inline-block; padding: 1px 7px; border-radius: 999px;
  background: var(--panel-alt); border: 1px solid var(--border);
  font-size: 11.5px; margin-right: 6px;
}
.dash-selo-alerta { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; }

/* Turnos: a data fica numa coluna estreita e fixa à esquerda, para os
   locais começarem todos na mesma linha vertical. */
.dash-turnos > li { display: flex; gap: 12px; align-items: flex-start; }
.dash-dia {
  flex: 0 0 46px; text-align: center; line-height: 1.2;
  padding: 4px 0; border-radius: 8px; background: var(--panel-alt);
}
.dash-dia em { display: block; font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--muted); }
.dash-dia span { font-size: 12.5px; font-weight: 600; }
/* Destaque do turno de HOJE.
   O fundo é uma cor fixa (o azul é o próprio sinal), então a cor do texto
   precisa vir fixa junto. Antes só o "HOJE" tinha cor própria; a DATA herdava
   a cor do tema e, no modo contraste, saía branca em cima do azul claro.
   Regra geral: fundo fixo e cor de texto herdada não convivem. */
.dash-dia.hoje { background: #dbeafe; color: #1e3a8a; }
.dash-dia.hoje em,
.dash-dia.hoje span { color: #1e40af; }

/* No modo escuro o par inteiro troca, para o destaque continuar sendo um
   destaque em vez de uma mancha clara no meio da lista. */
html.dark-mode .dash-dia.hoje { background: #12293f; color: #bfdbfe; }
html.dark-mode .dash-dia.hoje em,
html.dark-mode .dash-dia.hoje span { color: #93c5fd; }
.dash-turno-corpo { min-width: 0; }
.dash-turno-corpo strong { display: block; font-weight: 600; }
.dash-ponto {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 6px; vertical-align: baseline;
}

/* Escolha dos blocos. Diálogo próprio e pequeno: a tela inicial não
   carrega o appdialog.js, e puxar a biblioteca inteira só por causa
   desta caixa custaria mais do que ela. */
.dash-modal { position: fixed; inset: 0; z-index: 9999; display: none; }
.dash-modal.is-open { display: flex; align-items: center; justify-content: center; padding: 16px; }
.dash-modal-fundo { position: absolute; inset: 0; background: rgba(17,24,39,0.45); }
.dash-modal-caixa {
  position: relative; background: var(--panel); color: var(--text);
  width: 100%; max-width: 520px; max-height: calc(100vh - 32px);
  border-radius: var(--radius); box-shadow: 0 10px 40px rgba(0,0,0,.25);
  display: flex; flex-direction: column;
}
.dash-modal-topo {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border); flex: 0 0 auto;
}
.dash-modal-topo h3 { margin: 0; font-size: 17px; }
.dash-modal-x {
  background: none; border: 0; font-size: 24px; line-height: 1;
  cursor: pointer; color: inherit; padding: 2px 8px; border-radius: 6px;
}
.dash-modal-x:hover { background: rgba(128,128,128,.18); }
.dash-modal-caixa form { display: flex; flex-direction: column; min-height: 0; }
.dash-modal-corpo { padding: 14px 18px; overflow: auto; flex: 1 1 auto; min-height: 0; }
.dash-modal-rodape {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 18px; border-top: 1px solid var(--border); flex: 0 0 auto;
}
.dash-opcao {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 9px 0; border-bottom: 1px solid var(--border); cursor: pointer;
}
.dash-opcao:last-child { border-bottom: 0; }
.dash-opcao input { margin-top: 3px; flex: 0 0 auto; }
.dash-opcao strong { display: block; font-size: 14px; }
.dash-opcao small { color: var(--muted); font-size: 12.5px; }

@media (max-width: 640px) {
  /* A grade já é de uma coluna em qualquer largura; aqui só os contadores do
     topo, que em tela estreita ficam melhor um por linha. */
  .dash-resumo-item { flex: 1 1 100%; }
}

/* =========================================================================
   53. AVISO DE EXCLUSÃO AUTOMÁTICA NO PÉ DAS TABELAS
   =========================================================================
   Uma linha discreta abaixo da listagem dizendo em quanto tempo aquele tipo
   de dado some sozinho. Fica fora da tabela (não é uma linha dela) para não
   entrar na paginação nem na exportação, e não sai na impressão: num
   relatório impresso a regra de retenção é ruído. */
.rodape-limpeza {
  margin: 10px 0 0;
  padding-top: 9px;
  border-top: 1px dashed var(--border);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
  display: flex;
  gap: 7px;
  align-items: baseline;
}
.rodape-limpeza span[aria-hidden] { flex: 0 0 auto; opacity: .75; }
@media print { .rodape-limpeza { display: none !important; } }

/* =========================================================================
   54. ORDEM DOS BLOCOS DA DASHBOARD (modal "Escolher o que aparece")
   =========================================================================
   Cada pessoa monta a própria ordem. A lista é arrastável no mouse e tem
   botões ▲▼ para toque e teclado — arrastar HTML5 não funciona no celular,
   e uma tela de configuração que só funciona no desktop não serve. */
.dash-ordem { list-style: none; margin: 0; padding: 0; }
.dash-ordem-item {
  display: flex; align-items: flex-start; gap: 8px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}
.dash-ordem-item:last-child { border-bottom: 0; }
.dash-ordem-item .dash-opcao { flex: 1 1 auto; min-width: 0; border-bottom: 0; }

/* O pegador é o que diz "isto se arrasta". Só ele mostra o cursor de mover:
   no resto da linha o cursor continua sendo o de clicar na caixinha. */
.dash-ordem-pegador {
  flex: 0 0 auto; align-self: center;
  padding: 4px 2px 4px 0;
  font-size: 17px; line-height: 1; color: var(--muted);
  cursor: grab; user-select: none;
}
.dash-ordem-item.is-arrastando { opacity: .45; }
.dash-ordem-item.is-arrastando .dash-ordem-pegador { cursor: grabbing; }

.dash-ordem-botoes { flex: 0 0 auto; align-self: center; display: flex; flex-direction: column; gap: 2px; }
.dash-ordem-btn {
  width: 26px; height: 20px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; line-height: 1; font-family: inherit;
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--panel-alt); color: var(--text);
  cursor: pointer;
}
.dash-ordem-btn:hover { background: var(--table-row-hover); border-color: var(--border-strong); }
.dash-ordem-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Primeiro e último item: o botão que não leva a lugar nenhum fica apagado
   em vez de sumir, para a coluna de botões não mudar de largura. */
.dash-ordem-item:first-child .dash-ordem-btn[data-mover="cima"],
.dash-ordem-item:last-child .dash-ordem-btn[data-mover="baixo"] {
  opacity: .3; pointer-events: none;
}

/* =========================================================================
   55. CONFIGURAÇÕES DE ACESSO (acessos/configuracoes.php)
   =========================================================================
   Motivos, vínculo motivo × usuário e locais. Estas regras viviam dentro do
   <style> de admin/configuracoes.php; vieram para cá quando os três cards
   mudaram de tela, para não existirem duas cópias divergindo com o tempo. */
.motivo-search-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.motivo-search-wrap .input { max-width: 320px; }
.motivo-search-count { font-size: .82em; color: var(--muted); }
.motivo-search-empty { padding: 10px; color: var(--muted); font-size: .9em; }

/* Grade de seleção dos motivos. O teto de altura é o que impede a lista de
   empurrar o botão "Salvar vínculos" para fora da tela numa instalação com
   muitos motivos — passando disso, ela rola por dentro. */
.grid-selecao {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px; padding: 10px; margin-bottom: 12px;
  background: var(--panel-alt); border: 1px solid var(--border-strong); border-radius: 6px;
  max-height: 220px; overflow-y: auto;
}
.grid-selecao-item { display: flex; align-items: center; gap: 8px; font-weight: normal; cursor: pointer; margin-bottom: 0; }
/* A grade fica dentro de um .field, e ".field input { width: 100% }" (seção 21)
   também pega caixa de marcar: as caixinhas viravam retângulos de 130px, com o
   texto do motivo jogado para longe. Aqui elas voltam ao tamanho natural. */
.grid-selecao input[type="checkbox"] { width: auto; flex: 0 0 auto; margin: 0; }
.grid-selecao-item.is-hidden-by-search { display: none !important; }

/* "Motivos disponíveis" (Vincular Motivos a Usuários): uma lista de uma
   coluna só, não uma grade de 5 — com tanto motivo cadastrado, 5 colunas
   viravam uma parede de caixinhas pequenas difícil de escanear com o olho.
   A pessoa clica na LINHA (o clique já funciona em qualquer ponto do
   <label>, checkbox incluído) e ela muda de cor — sem precisar mirar numa
   caixinha de marcar minúscula. */
.motivos-grid-vinculo {
  display: flex; flex-direction: column; gap: 2px; padding: 6px;
  margin-bottom: 12px; background: var(--panel-alt);
  border: 1px solid var(--border-strong); border-radius: 6px;
  max-height: 320px; overflow-y: auto;
}
.motivo-item-chk {
  display: flex; align-items: center; gap: 8px; font-weight: normal;
  cursor: pointer; margin-bottom: 0; padding: 7px 10px; border-radius: 5px;
  transition: background-color .1s ease;
}
.motivo-item-chk:hover { background: var(--panel); }
.motivo-item-chk.is-selecionado { background: var(--accent, #0f62fe); color: #fff; }
.motivo-item-chk.is-selecionado .motivo-item-categoria { background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.35); }
/* O checkbox continua existindo (é ele que o formulário envia) mas some da
   vista — a cor da linha já diz o que está marcado. */
.motivo-item-chk input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.motivo-item-chk.is-hidden-by-search { display: none !important; }
.motivo-item-categoria {
  font-size: .78em; color: var(--muted); background: var(--panel);
  border: 1px solid var(--border-strong); border-radius: 4px; padding: 1px 6px;
  margin-left: auto;
}

/* O botão Campainha e o "Chamou X vezes" logo abaixo dele, na tabela de
   Registro — pequeno e em azul de destaque, pra quem clicou enxergar de
   relance que o aviso já foi registrado, sem precisar contar de cabeça. */
.campainha-bloco { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; align-self: flex-start; }
.campainha-contagem { font-size: .72em; font-weight: 600; color: var(--accent, #0f62fe); white-space: nowrap; }

/* =========================================================================
   56. Situação do acesso — registro de acessos
   ========================================================================= */
/* Rótulo + select de situação dentro da barra de filtros.
   O rótulo fica AO LADO do campo, não acima: a barra alinha os itens pelo
   centro (align-items:center), então um rótulo empilhado empurrava o select
   para baixo e ele deixava de bater com a caixa de busca ao lado. */
.filtro-situacao {
  display: flex; flex-direction: row; align-items: center; gap: 8px;
  flex: 0 1 auto; margin: 0; white-space: nowrap;
}
.filtro-situacao > .small { color: var(--muted); }
.filtro-situacao .input { width: auto; min-width: 220px; margin: 0; }

/* O emblema fica ABAIXO do motivo, não ao lado: na largura útil da coluna o
   texto "Entrada + Autorizado / Encaminhado" espremeria o nome do motivo. */
.td-motivo .badge-situacao { display: block; width: fit-content; margin-top: 4px; }
/* O emblema mais largo não cabe numa linha só em telas estreitas; aqui ele
   pode quebrar, ao contrário do status-badge padrão. */
.badge-situacao { white-space: normal; }


/* =========================================================================
   57. Tarefas e rotinas
   ========================================================================= */
/* Reaproveita .card, .table, .filtros-bar, .modal, .status-badge, .kpi-row e a
   grade de seleção da seção 55. O que está aqui é só o que não existia. */

/* Título das seções dentro do formulário de cadastro. Separa "quando",
   "quem faz" e "devolutiva" sem precisar de três cards — o pedido foi manter
   tudo dentro do mesmo container. */
.tarefa-secao {
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted);
  margin: 22px 0 10px; padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* Uma linha por dia da semana: caixa de marcar, nome e a faixa de horas DAQUELE
   dia. O horário fica na mesma linha do dia de propósito — numa tabela
   separada, a pessoa teria que cruzar de cabeça qual horário é de qual dia. */
.tarefa-dias { display: flex; flex-direction: column; gap: 6px; }
.tarefa-dia-linha {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel-alt);
}
.tarefa-dia-nome {
  display: flex; align-items: center; gap: 8px;
  min-width: 130px; margin: 0; font-weight: 600; cursor: pointer;
}
/* Anula o ".field input { width:100% }" da seção 21: sem isto a caixa de marcar
   vira uma barra larga e empurra o nome do dia para longe. */
.tarefa-dia-nome input[type="checkbox"] { width: auto; flex: 0 0 auto; margin: 0; }
.tarefa-dia-hora { width: 120px; margin: 0; }
.tarefa-dia-hora:disabled { opacity: .45; }
.tarefa-dia-ate { color: var(--muted); font-size: 13px; }

/* Prévia das próximas datas, ao lado do botão que a calcula. */
.tarefa-previa { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0 4px; }
.tarefa-previa-texto { font-size: 12px; color: var(--muted); flex: 1 1 260px; min-width: 0; }

/* Coluna "Quando" do quadro: início previsto em cima, fim previsto embaixo.
   O rótulo fica estreito e de largura fixa para as duas datas alinharem. */
.quadro-quando { display: grid; gap: 2px; font-size: 13px; line-height: 1.3; }
.quadro-quando-rotulo {
  display: inline-block; min-width: 40px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted);
}

/* Barra de busca acima de uma grade de seleção. */
.grid-selecao-busca { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.grid-selecao-busca .input { max-width: 260px; margin: 0; }
.grid-selecao-contagem { font-size: 12px; color: var(--muted); }

/* Blocos do popup da ocorrência. */
.ocor-resumo { margin: 0 0 4px; font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ocor-descricao { margin: 0 0 12px; font-size: 13px; }
.ocor-bloco { padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--border); }
.ocor-bloco:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }
.ocor-bloco h4 {
  margin: 0 0 8px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
}

/* Nota de 0 a 10: régua + o número grande ao lado, para o valor escolhido ser
   legível sem a pessoa precisar interpretar a posição do cursor. */
.nota-linha { display: flex; align-items: center; gap: 14px; }
.nota-linha input[type="range"] { flex: 1 1 auto; width: auto; margin: 0; accent-color: var(--accent); }
.nota-valor {
  flex: 0 0 auto; min-width: 46px; text-align: center;
  font-size: 20px; font-weight: 800; color: var(--text);
  padding: 4px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-alt);
}

/* Contadores do bloco de requisições no prazo limite. O número vem antes da
   lista porque é o que se lê primeiro ao abrir a dashboard. */
.dash-contadores { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.dash-contador {
  display: flex; align-items: baseline; gap: 6px;
  padding: 8px 12px; border-radius: 8px;
  background: var(--panel-alt); border: 1px solid var(--border);
}
.dash-contador strong { font-size: 20px; font-weight: 800; line-height: 1; }
.dash-contador span { font-size: 12px; color: var(--muted); }
/* Fundo e cor andam juntos: um sem o outro quebra no modo escuro. */
.dash-contador--erro   { background: #fee2e2; border-color: #fca5a5; }
.dash-contador--erro strong, .dash-contador--erro span { color: #b91c1c; }
.dash-contador--alerta { background: #fef9c3; border-color: #fde68a; }
.dash-contador--alerta strong, .dash-contador--alerta span { color: #a16207; }
html.dark-mode .dash-contador--erro   { background: #3b1414; border-color: #7f1d1d; }
html.dark-mode .dash-contador--erro strong, html.dark-mode .dash-contador--erro span { color: #fca5a5; }
html.dark-mode .dash-contador--alerta { background: #3a2c07; border-color: #78350f; }
html.dark-mode .dash-contador--alerta strong, html.dark-mode .dash-contador--alerta span { color: #fde68a; }

/* =========================================================================
   58. Meu orçamento
   ========================================================================= */
/* Barra de consumo do orçamento. O trilho é neutro e só o preenchimento muda
   de cor, para a leitura ser "quanto já foi" e não "que cor é essa". */
.orc-barra {
  height: 10px; border-radius: 999px; overflow: hidden;
  background: var(--panel-alt); border: 1px solid var(--border);
  margin: 4px 0 6px;
}
.orc-barra-preenchida { height: 100%; border-radius: 999px; transition: width .25s ease; }
.orc-barra--ok     { background: var(--btn-success-bg); }
.orc-barra--alerta { background: #d97706; }
.orc-barra--erro   { background: var(--btn-danger-bg); }
.orc-barra--neutro { background: var(--muted); }
.orc-barra-legenda { margin: 0 0 4px; }

/* Nota em que a pessoa é solicitante mas o valor saiu de OUTRO setor: fica na
   lista (ela precisa saber que existe) mas recuada, para não ser confundida
   com o que consumiu o orçamento dela. */
.orc-outro-setor > td { opacity: .72; }

/* =========================================================================
   59. Assembleias e votações
   ========================================================================= */
/* Três telas usam esta seção: montar a votação, votar e apurar. A tela
   pública (votar.php) carrega o MESMO style.css — foi por isso que nada aqui
   depende do menu ou do container das telas internas. */

/* ---- Montagem: perguntas e itens ---------------------------------------- */
.asm-secao {
  margin: 18px 0 8px; padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 15px;
}
.asm-pergunta {
  border: 1px solid var(--border); border-radius: 10px;
  padding: 12px; margin-bottom: 12px; background: var(--panel-alt);
}
.asm-pergunta-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 8px;
}
.asm-pergunta-numero { font-weight: 700; font-size: 13px; color: var(--muted); }
.asm-itens { display: grid; gap: 8px; margin-top: 8px; }
.asm-item {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: 10px; align-items: start;
  padding: 8px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel);
}
/* A coluna estreita guarda só a miniatura (e a opção de tirar a foto). O
   seletor de arquivo mora na coluna larga: com a largura natural dele, perto
   de 180px, ele cobria o campo do lado aqui. */
.asm-item-midia { display: grid; gap: 6px; min-width: 0; }
.asm-item-foto {
  width: 100%; height: 76px; border-radius: 6px; object-fit: cover;
  background: var(--panel-alt); border: 1px solid var(--border);
}
.asm-item-foto--vazia {
  display: flex; align-items: center; justify-content: center;
  border-style: dashed; color: var(--muted); font-size: 11px;
}
.asm-item-envio { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.asm-item-arquivo { width: 100%; max-width: 100%; min-width: 0; font-size: 12px; padding: 5px; }
.asm-item-tirar {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--muted); cursor: pointer;
}
.asm-item-tirar input { width: auto; flex: 0 0 auto; margin: 0; }
.asm-item-campos { display: grid; gap: 6px; min-width: 0; }
@media (max-width: 640px) {
  .asm-item { grid-template-columns: 1fr; }
  .asm-item-foto { height: 120px; }
}

/* ---- Cédula: como o votante vê ------------------------------------------ */
.asm-cedula { display: grid; gap: 14px; }
.asm-bloco {
  border: 1px solid var(--border); border-radius: 12px;
  padding: 14px; background: var(--panel);
}
.asm-bloco.is-bloqueado { opacity: .55; }
.asm-bloco h3 { margin: 0 0 4px; font-size: 16px; }
.asm-bloco-aviso { margin: 6px 0 0; font-size: 13px; color: var(--muted); }

.asm-opcoes { display: grid; gap: 10px; margin-top: 10px; }
/* Duas colunas a partir do tablet: com foto, uma coluna só deixa a cédula
   comprida demais para comparar os itens sem rolar a página inteira. */
@media (min-width: 720px) { .asm-opcoes { grid-template-columns: 1fr 1fr; } }

.asm-opcao {
  display: flex; gap: 10px; align-items: flex-start;
  border: 2px solid var(--border); border-radius: 10px;
  padding: 10px; cursor: pointer; background: var(--panel-alt);
  transition: border-color .15s ease, background .15s ease;
}
.asm-opcao:hover { border-color: var(--btn-primary-bg); }
.asm-opcao.is-escolhida {
  border-color: var(--btn-primary-bg);
  background: color-mix(in srgb, var(--btn-primary-bg) 12%, transparent);
}
.asm-opcao input { margin-top: 3px; flex: 0 0 auto; }
.asm-opcao-corpo { min-width: 0; }
.asm-opcao-titulo { font-weight: 600; }
.asm-opcao-descricao { font-size: 13px; color: var(--muted); margin-top: 2px; }
.asm-opcao-foto {
  display: block; width: 100%; max-width: 100%; height: auto;
  margin-top: 8px; border-radius: 8px; border: 1px solid var(--border);
}

/* ---- Andamento / apuração ----------------------------------------------- */
.asm-resultado { display: grid; gap: 8px; margin-top: 10px; }
.asm-linha-resultado { display: grid; gap: 4px; }
.asm-linha-topo {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 14px; align-items: baseline;
}
.asm-linha-votos { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; }
.asm-barra {
  height: 10px; border-radius: 999px; overflow: hidden;
  background: var(--panel-alt); border: 1px solid var(--border);
}
.asm-barra-preenchida {
  height: 100%; border-radius: 999px;
  background: var(--btn-primary-bg); transition: width .25s ease;
}
.asm-barra-preenchida.is-lider { background: var(--btn-success-bg); }

/* ---- Tela pública ------------------------------------------------------- */
/* A imagem de fundo vem de cada assembleia, então ela é aplicada no HTML por
   variável; aqui fica só a moldura que não muda. */
.asm-publica {
  min-height: 100vh; padding: 24px 16px;
  background-size: cover; background-position: center; background-attachment: fixed;
}
.asm-publica-caixa {
  max-width: 820px; margin: 0 auto;
  background: var(--panel); border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
  padding: 22px;
}
.asm-publica-logo {
  display: block; max-width: 260px; max-height: 120px;
  margin: 0 auto 14px; object-fit: contain;
}
.asm-publica-titulo { text-align: center; margin: 0 0 4px; }
.asm-publica-sub { text-align: center; color: var(--muted); margin: 0 0 16px; font-size: 14px; }

/* ---- Foto da câmera ----------------------------------------------------- */
.asm-camera { display: grid; gap: 10px; justify-items: center; }
.asm-camera video, .asm-camera img {
  width: 100%; max-width: 320px; border-radius: 10px;
  border: 1px solid var(--border); background: #000;
}
.asm-camera-acoes { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* ===========================================================================
   60. PAINEL DE AVISOS E PUBLICIDADE (campanhas)

   A tela usa o mesmo .card, .table, .form-grid e .filtros-bar de todo o
   sistema. O que entra aqui é só o que é desta tela: a barra de consumo, as
   linhas da agenda e os cartões de aprovação.
   =========================================================================== */

.camp-oculto { display: none; }

/* A explicação embaixo de um campo. Menor e apagada: explica sem competir com
   o rótulo, que é o que a pessoa procura ao correr o olho. */
.campanha-ajuda { font-size: 12.5px; color: var(--muted); margin: 4px 0 0; line-height: 1.45; }

/* --- Barra de consumo da cota ------------------------------------------- */
.camp-cota { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }

.camp-cota-barra {
  height: 14px; border-radius: 999px; overflow: hidden;
  background: var(--panel-alt); border: 1px solid var(--border);
}
.camp-cota-preenchido {
  height: 100%; background: #2563eb; border-radius: 999px;
  transition: width .3s ease;
}
/* Acima de 90% a barra muda de cor: é o aviso de que o próximo envio grande
   não vai caber, dado antes de a pessoa escolher o arquivo. */
.camp-cota-preenchido.is-cheio { background: #dc2626; }

.camp-cota-texto { font-size: 14px; }
.camp-cota-acoes { display: flex; gap: 8px; flex-wrap: wrap; }

/* --- Agenda (dias e horários) -------------------------------------------- */
/* Cada faixa é uma linha: dia, começo, fim e o botão de remover. Em tela
   estreita os campos quebram, e o botão acompanha — daí o wrap. */
.camp-agenda { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.camp-faixa { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.camp-faixa .input { max-width: 170px; }

.camp-divisor { border: 0; border-top: 1px solid var(--border); margin: 22px 0 16px; }

/* Campo pequeno dentro da tabela de arquivos (ordem, áudio casado). */
.camp-mini { max-width: 150px; padding: 4px 6px; font-size: 13px; }

/* O endereço do link, para ser lido e copiado sem erro de leitura. */
.camp-mono { font-family: ui-monospace, Consolas, "Courier New", monospace; font-size: 13px; }

.camp-links { margin-top: 14px; }

/* --- Histórico de aprovação ---------------------------------------------- */
.camp-historico { list-style: none; margin: 8px 0 0; padding: 0; }
.camp-historico li {
  padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13.5px;
}
.camp-historico li:last-child { border-bottom: 0; }

/* O texto que uma pessoa escreveu para a outra. Recuado e com barra à
   esquerda, para se distinguir do que o sistema escreveu sozinho. */
.camp-obs {
  margin-top: 6px; padding: 8px 10px; border-left: 3px solid var(--border);
  background: var(--panel-alt); border-radius: 0 6px 6px 0;
  font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere;
}

/* --- Cartões da tela de aprovação ---------------------------------------- */
.camp-aprovacao {
  border: 1px solid var(--border); border-radius: 10px;
  padding: 16px 18px; margin-bottom: 14px;
}
.camp-aprovacao h3 { margin: 0 0 4px; font-size: 16px; }

/* Campanha que está voltando pela segunda vez. A borda amarela existe para
   quem aprova perceber, ANTES de ler, que já viu isto antes — e que o motivo
   da recusa anterior está logo abaixo. */
.camp-aprovacao.is-reenvio { border-color: #f59e0b; }
.camp-reenvio-aviso {
  background: rgba(245, 158, 11, .12); border: 1px solid rgba(245, 158, 11, .4);
  border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; font-size: 13.5px;
}

/* --- Aviso da dashboard --------------------------------------------------- */
.camp-dash-aviso { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* O aviso de que quem limita o tamanho do envio é o php.ini, e não o módulo.
   Fica em destaque porque é acionável: diz o que mexer e onde. */
.camp-aviso-limite {
  border-left: 3px solid #f59e0b;
  background: rgba(245, 158, 11, .10);
  padding: 8px 10px; border-radius: 0 6px 6px 0; margin-top: 8px;
}

/* --- Arrastar para ordenar os arquivos ------------------------------------
   A alça é o que se pega; a linha inteira é arrastável, mas o cursor só vira
   "mão" sobre ela — assim dá para selecionar o nome do arquivo com o mouse
   sem começar um arrasto sem querer. */
.camp-ordem { white-space: nowrap; }
.camp-alca {
  cursor: grab; user-select: none; opacity: .55;
  font-size: 1.05rem; line-height: 1; margin-right: 6px;
}
.camp-alca:active { cursor: grabbing; }
.camp-pos { font-variant-numeric: tabular-nums; }
.camp-setas { display: inline-flex; gap: 2px; margin-left: 6px; }
.camp-setas .btn { padding: 1px 6px; line-height: 1.2; min-width: 0; }
/* A linha em trânsito fica translúcida: é o único sinal de qual delas está na
   mão, já que o navegador desenha a "sombra" sozinho. */
tr.camp-arrastando { opacity: .45; }
#tabelaMidias tbody tr { transition: opacity .12s ease; }

/* O recado de ordem gravada. Discreto de propósito: um popup a cada arrasto
   seria insuportável — erro, esse sim, continua em popup. */
.camp-ordem-aviso {
  margin-top: 8px; font-size: .85rem; color: var(--sucesso, #16a34a);
}

/* ---------------- Cadastros comuns: locais e motivos --------------------- */
/* O seletor de cor numa .form-row: sem largura fixa ele estica e empurra o
   resto da linha, porque o input[type=color] não tem largura natural. */
.input-cor { width: 46px; min-width: 46px; padding: 2px; cursor: pointer; }

/* "Ativo" ao lado dos campos, e não embaixo: é uma chave de uma linha, não
   um campo com rótulo em cima como os demais. */
.checkbox-inline {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; white-space: nowrap; cursor: pointer;
}
.checkbox-inline input { margin: 0; }

/* Uma opção por linha (ex.: Anti-Cola em avaliacoes.php), em vez do
   inline-flex padrão do .checkbox-inline que deixa 2-3 lado a lado e some
   com a leitura quando o texto é longo. */
.aval-opcoes-lista { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.aval-opcao-linha { white-space: normal; }
.aval-opcao-linha span { flex: 1 1 auto; }
.btn-info-opcao {
  flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--border-strong);
  background: var(--panel-alt); color: var(--muted); font-size: 11px; font-style: italic; font-weight: 700;
  line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.btn-info-opcao:hover { background: var(--accent, #0f62fe); color: #fff; border-color: transparent; }

/* A amostra da cor do local na tabela. */
.amostra-cor {
  display: inline-block; width: 22px; height: 14px; border-radius: 3px;
  border: 1px solid var(--border, #e4e8ee); vertical-align: -2px;
}

/* =========================================================================
   61. Links personalizados (Admin › Links personalizados)
   ========================================================================= */
/* O campo do endereço mostra a base do site colada no campo, para ficar claro
   que o que se digita é só o final — e não o endereço inteiro. */
.link-endereco{ display:flex; align-items:stretch; gap:0; max-width:520px; }
.link-endereco-base{
  display:flex; align-items:center; padding:0 10px;
  background:var(--panel-alt); border:1px solid var(--border); border-right:0;
  border-radius:8px 0 0 8px; color:var(--muted);
  font-size:13px; white-space:nowrap;
}
.link-endereco .input{ border-radius:0 8px 8px 0; min-width:0; }

/* A resposta da conferência de disponibilidade, embaixo do campo. */
.field-hint.texto-ok{ color:#15803d; font-weight:600; }
.field-hint.texto-erro{ color:#b91c1c; font-weight:600; }

/* O destino pode ser uma URL enorme: corta com reticências e mostra inteiro no
   title, em vez de esticar a tabela até a barra de rolagem horizontal. */
.link-destino{
  max-width:320px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
@media (max-width: 700px){
  .link-destino{ max-width:180px; }
  .link-endereco{ flex-wrap:wrap; }
  .link-endereco-base{ border-right:1px solid var(--border); border-radius:8px 8px 0 0; width:100%; }
  .link-endereco .input{ border-radius:0 0 8px 8px; }
}

/* =========================================================================
   62. Avaliações (montar prova, revisar, corrigir e relatório)
   ========================================================================= */

/* ---- ficha da avaliação: pendências e etapas -------------------------- */
/* A lista de pendências é o primeiro bloco da tela porque é a resposta de
   quem chegou aqui: "por que ainda não dá para gerar a prova?". */
.aval-pendencias{
  background:#fffbeb; border:1px solid #fde68a; border-radius:8px;
  padding:12px 14px; margin:10px 0 4px; font-size:14px;
}
.aval-pendencias ul{ margin:6px 0 0; padding-left:20px; }
.aval-pendencias li{ margin:2px 0; }
.aval-tudo-certo{ color:#15803d; font-weight:600; margin:10px 0 4px; }

.aval-etapas{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }

/* ---- credenciais do link público -------------------------------------- */
/* Aparecem uma única vez, então precisam saltar aos olhos: a senha não pode
   ser mostrada de novo (é guardada com hash) e quem fechar a tela sem copiar
   terá de gerar outro link. */
.aval-credenciais{
  background:var(--panel-alt); border:1px solid var(--border);
  border-radius:8px; padding:14px 16px; margin-bottom:14px;
}
.aval-credenciais-linha{
  display:flex; gap:10px; align-items:baseline; margin-top:8px; flex-wrap:wrap;
}
.aval-credenciais-linha span{ min-width:74px; color:var(--muted); font-size:12.5px; }
.aval-credenciais-linha code{
  background:var(--panel); border:1px solid var(--border); border-radius:6px;
  padding:4px 9px; font-size:14px; letter-spacing:.06em; word-break:break-all;
}
.aval-aprovada{ color:#15803d; }

/* ---- revisão das questões --------------------------------------------- */
/* A faixa colorida na lateral diz, de longe, em que estado está a questão:
   vermelha trava a prova, âmbar é um aviso que pode ser aceito ou ignorado. */
.aval-questao{ border-left:4px solid transparent; }
.aval-questao--impede{ border-left-color:#dc2626; }
.aval-questao--avisa{ border-left-color:#d97706; }

.aval-sino{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:50%;
  background:#fef3c7; color:#b45309; font-weight:800; font-size:13px;
  margin-left:6px; vertical-align:middle;
}

.aval-alertas{ margin:4px 0 12px; }
.aval-alerta{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  border-radius:8px; padding:9px 12px; margin-top:6px; font-size:13.5px;
}
.aval-alerta--impede{ background:#fef2f2; border:1px solid #fecaca; color:#991b1b; }
.aval-alerta--avisa{ background:#fffbeb; border:1px solid #fde68a; color:#92400e; }
.aval-alerta-icone{
  flex:0 0 auto; width:20px; height:20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; background:rgba(0,0,0,.07);
}
.aval-alerta-texto{ flex:1 1 220px; }

/* O campo que acabou de receber uma correção fica marcado até salvar: é o que
   mostra o que mudou quando a pessoa acata três sugestões seguidas. */
.aval-campo-corrigido{ background:#ecfdf5 !important; border-color:#6ee7b7 !important; }
html.dark-mode .aval-campo-corrigido{ background:#064e3b !important; }
.btn-pulsa{ animation:aval-pulsa 1.4s ease-in-out infinite; }
@keyframes aval-pulsa{ 0%,100%{ opacity:1; } 50%{ opacity:.62; } }

/* ---- alternativas ------------------------------------------------------ */
.aval-opcoes{ margin:6px 0 4px; }
.aval-opcao{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:6px; }
.aval-opcao-correta{ display:flex; align-items:center; margin:0; }
.aval-opcao-letra{ font-weight:700; min-width:18px; color:var(--muted); }
.aval-opcao-texto{ flex:1 1 auto; min-width:0; }
/* Empurra a imagem da alternativa (quando existe) pra linha de baixo, dentro
   da MESMA .aval-opcao — flex-wrap acima é o que permite isso sem precisar
   de um elemento-pai novo em volta da linha inteira. */
.aval-opcao-imagem-bloco{ flex:1 0 100%; margin-top:4px; padding-left:26px; }
.aval-opcao-imagem-bloco .aval-imagem img{ max-height:160px; }

.aval-imagem img{
  max-width:100%; max-height:280px; margin-top:10px;
  border:1px solid var(--border); border-radius:8px; display:block;
}
.aval-imagem .btn{ margin-top:8px; }

/* ---- recorte de imagem do PDF ------------------------------------------ */
.aval-recorte-area{
  position:relative; margin-top:10px; max-height:60vh; overflow:auto;
  border:1px solid var(--border); border-radius:8px; background:var(--panel-alt);
}
.aval-recorte-area canvas{ display:block; max-width:100%; cursor:crosshair; }
.aval-recorte-marca{
  position:absolute; border:2px dashed #2563eb; background:rgba(37,99,235,.14);
  pointer-events:none;
}

/* ---- correção ---------------------------------------------------------- */
.aval-progresso{ margin-top:12px; }
.aval-progresso-barra{
  height:8px; background:var(--panel-alt); border-radius:99px; overflow:hidden;
  border:1px solid var(--border);
}
.aval-progresso-barra span{
  display:block; height:100%; width:0; background:#2563eb; transition:width .2s ease;
}

/* A conferência põe a folha escaneada e o que foi lido lado a lado: é o único
   jeito de conferir bolha por bolha sem trocar de janela. */
.aval-conferencia{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; }
.aval-conferencia-imagem{
  max-height:66vh; overflow:auto; border:1px solid var(--border);
  border-radius:8px; background:var(--panel-alt);
}
.aval-conferencia-imagem img{ width:100%; display:block; }
.aval-conferencia-dados{ min-width:0; }

.aval-token-campo{
  text-transform:uppercase; letter-spacing:.34em; font-size:18px; font-weight:700;
}

.aval-respostas{ margin-top:12px; max-height:44vh; overflow:auto; }
.aval-resposta-linha{
  display:flex; align-items:center; gap:5px; padding:3px 6px; border-radius:6px;
}
/* Em dúvida = a leitura não teve certeza. É a linha em que o olho de quem
   confere precisa parar, então ela é a única colorida. */
.aval-resposta-linha--duvida{ background:#fffbeb; }
.aval-resposta-linha--vazia .aval-resposta-num{ color:#b91c1c; }
.aval-resposta-num{ min-width:26px; text-align:right; font-size:12.5px; color:var(--muted); }
.aval-resposta-letra{
  width:26px; height:26px; border-radius:50%; border:1px solid var(--border);
  background:var(--panel); color:var(--muted); font-size:12px; font-weight:700;
  cursor:pointer; padding:0; line-height:1;
}
.aval-resposta-letra:hover{ border-color:#2563eb; }
.aval-resposta-letra.is-marcada{ background:#1f2937; border-color:#1f2937; color:#fff; }
.aval-resposta-limpar{
  width:24px; height:24px; border:0; background:transparent; color:var(--muted);
  cursor:pointer; font-size:14px; line-height:1;
}

/* ---- relatório: os números e as barras --------------------------------- */
.aval-indicadores{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px;
  background:var(--border); border:1px solid var(--border); border-radius:10px;
  overflow:hidden; margin-top:10px;
}
.aval-indicador{ background:var(--panel); padding:14px 12px; text-align:center; }
.aval-indicador span{ display:block; font-size:11.5px; color:var(--muted); text-transform:uppercase; }
.aval-indicador strong{ display:block; font-size:22px; margin-top:4px; }

.aval-barra-bloco{ margin-top:12px; }
.aval-barra-topo{ display:flex; justify-content:space-between; gap:12px; font-size:14px; }
.aval-barra-topo span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.aval-barra{
  height:8px; background:var(--panel-alt); border-radius:99px; overflow:hidden;
  margin-top:4px; border:1px solid var(--border);
}
.aval-barra span{ display:block; height:100%; }
/* As três faixas são as mesmas do PDF, para a tela e o papel contarem a mesma
   história: abaixo de 50% vermelho, até 70% âmbar, acima verde. */
.aval-barra--ruim{ background:#dc2626; }
.aval-barra--media{ background:#d97706; }
.aval-barra--boa{ background:#059669; }

.aval-token{ font-size:15px; letter-spacing:.14em; font-weight:700; }

/* O modal largo é o da conferência e o do recorte: os dois mostram imagem. */
.modal-content--lg{ max-width:1100px; width:min(96vw,1100px); }

@media (max-width: 900px){
  .aval-conferencia{ grid-template-columns:1fr; }
  .aval-conferencia-imagem{ max-height:40vh; }
}
@media (max-width: 700px){
  .aval-etapas .btn{ flex:1 1 100%; }
  .aval-indicador strong{ font-size:19px; }
}

/* ---- Avaliações: dissertativa com itens, peso e recorte guiado --------- */
/* (complemento da seção 62, acrescentado com o tipo "dissertativa com itens") */

.aval-peso{ font-size:13px; font-weight:600; color:var(--muted); margin-left:4px; }

/* Cada item é uma pergunta inteira, então ele tem caixa de texto e não uma
   linha só — diferente da alternativa de múltipla escolha, que cabe numa. */
.aval-itens{ margin:8px 0 4px; }
.aval-item{ display:flex; gap:8px; align-items:flex-start; margin-top:10px; }
.aval-item-letra{ font-weight:700; color:var(--muted); min-width:20px; padding-top:9px; }
.aval-item-corpo{ flex:1 1 auto; min-width:0; }
.aval-item-linhas{
  display:flex; align-items:center; gap:8px; margin-top:6px;
  font-size:12.5px; color:var(--muted); font-weight:400;
}
.aval-item-linhas .input{ width:80px; }

/* O enunciado de uma questão importada guarda as linhas da tabela; sem isto o
   navegador colapsaria tudo numa linha só e a tabela sumiria da tela. */
.aval-questao textarea[data-campo=enunciado]{ white-space:pre-wrap; font-family:inherit; }
.aval-item-corpo .aval-item-texto{ width:100%; display:block; }

/* ---- Avaliações: prévia da fórmula como ela vai sair impressa --------- */
/* A caixa de texto mostra "(√3x-15)/(x-5)", que é como a fórmula fica
   guardada; esta prévia mostra a mesma coisa empilhada, que é como ela sai no
   papel. Sem ela a pessoa só descobre o resultado depois de imprimir. */
.aval-previa{
  margin-top:6px; padding:8px 10px; border:1px dashed var(--border);
  border-radius:8px; background:var(--panel-alt);
  font-size:14.5px; line-height:2.1; color:var(--text);
}
.aval-previa-rotulo{
  display:block; font-size:11px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--muted); margin-bottom:2px; line-height:1.4;
}
.aval-frac{
  display:inline-flex; flex-direction:column; align-items:center;
  vertical-align:middle; margin:0 3px; line-height:1.15;
}
.aval-frac-cima{ padding:0 4px; }
.aval-frac-baixo{ padding:0 4px; border-top:1px solid currentColor; }

/* A imagem de um item fica dentro do corpo dele, menor que a da questão:
   ela ilustra uma pergunta, não a questão inteira. */
.aval-item-imagem img{
  max-width:100%; max-height:200px; margin-top:8px; display:block;
  border:1px solid var(--border); border-radius:8px;
}
.aval-item-imagem .btn{ margin-top:6px; }
.aval-item-corpo > .btn{ margin-top:8px; }

/* Estoque por box: linha de título de cada box nas tabelas agrupadas. */
.mov-box-titulo td { background: var(--panel-alt, #f3f4f6); font-weight: 700; }

/* ---- movido de includes/menu_main.php ---- */
.header-user{ display:flex; align-items:center; gap:8px; }
.perfil-modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.5);
  display:none; align-items:center; justify-content:center;
  z-index:9999; padding:16px;
}
.perfil-modal-overlay.is-open{ display:flex; }
.perfil-modal{
  background:var(--panel,#fff); color:var(--text,inherit);
  width:100%; max-width:440px; max-height:90vh; overflow:hidden;
  border-radius:10px; box-shadow:0 10px 40px rgba(0,0,0,.25);
  display:flex; flex-direction:column;
}
.perfil-modal-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid var(--border,#e0e0e0);
  flex:0 0 auto;
}
.perfil-modal-header h3{ margin:0; font-size:1.1rem; }
.perfil-modal-close{
  background:none; border:none; font-size:1.4rem; line-height:1; cursor:pointer;
  color:inherit; padding:4px 8px; border-radius:6px;
}
.perfil-modal-close:hover{ background:rgba(128,128,128,.18); }
.perfil-modal-tabs{ display:flex; border-bottom:1px solid var(--border,#e0e0e0); flex:0 0 auto; }
.perfil-tab-btn{
  flex:1; background:none; border:none; padding:10px 6px; cursor:pointer;
  font-size:.9rem; color:inherit; opacity:.65; border-bottom:2px solid transparent;
}
.perfil-tab-btn.is-active{ opacity:1; border-bottom-color:currentColor; font-weight:600; }
.perfil-modal-body{ padding:16px 18px 20px; overflow-y:auto; flex:1 1 auto; min-height:0; }
.perfil-tab-pane{ display:none; flex-direction:column; gap:12px; }
.perfil-tab-pane.is-active{ display:flex; }
.perfil-label{ display:flex; flex-direction:column; gap:4px; font-size:.85rem; }
.perfil-input{
  padding:8px 10px; border:1px solid var(--border,#ccc); border-radius:6px;
  font-size:.95rem; background:var(--panel-alt,#fff); color:var(--text,inherit);
}
.perfil-submit{ align-self:flex-start; margin-top:2px; }
.perfil-atual{ font-size:.85rem; margin:0 0 4px; }
.perfil-badge{ font-size:.72rem; padding:2px 6px; border-radius:10px; margin-left:6px; }
.perfil-badge-warn{ background:#fff3cd; color:#856404; }
.perfil-verificacao{ display:none; flex-direction:column; gap:10px; margin-top:4px; }
.perfil-verificacao.is-visible{ display:flex; }
.perfil-hr{ border:none; border-top:1px solid var(--border,#e0e0e0); margin:2px 0; }
.perfil-aviso-codigo{ font-size:.85rem; margin:0; }
.perfil-codigo-linha{ display:flex; gap:8px; }
.perfil-input-codigo{ width:120px; letter-spacing:2px; text-align:center; }
.perfil-btn-link{
  background:none; border:none; color:var(--accent,#0d6efd); cursor:pointer;
  font-size:.85rem; text-decoration:underline; padding:0; align-self:flex-start;
}
.perfil-btn-link:disabled{ opacity:.5; cursor:not-allowed; text-decoration:none; }
.perfil-msg{ font-size:.85rem; margin-bottom:8px; min-height:1.1em; }
.perfil-msg.is-erro{ color:#c0392b; }
.perfil-msg.is-sucesso{ color:#1e7e34; }

/* ── Popup Suporte técnico ── */
.suporte-modal{ max-width:520px; }
.suporte-lista{ display:flex; flex-direction:column; gap:8px; }
.suporte-lista-vazia{ font-size:.9rem; opacity:.7; }
.suporte-item{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:10px 12px; border:1px solid var(--border,#e0e0e0); border-radius:8px;
  cursor:pointer; background:var(--panel,#fff); font-size:.88rem;
}
.suporte-item:hover{ background:rgba(128,128,128,.12); }
.suporte-item-titulo{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.suporte-status{ font-size:.72rem; padding:3px 8px; border-radius:10px; font-weight:600; white-space:nowrap; }
.suporte-status-enviado{ background:#dbeafe; color:#1e40af; }
.suporte-status-recebido{ background:#fde3e3; color:#a12727; }
.suporte-status-em_analise{ background:#ffe6c2; color:#8a4b00; }
.suporte-status-em_tratativa{ background:#fff3cd; color:#856404; }
.suporte-status-concluido{ background:#d4edda; color:#1e7e34; }
.suporte-status-inconsistente{ background:#e2d4f0; color:#5a2a8a; }

/* Botão "Voltar" da aba Meus chamados */
.suporte-btn-voltar{ margin-bottom:14px; }

/* Campos de leitura (título, status, descrição, resposta) */
.suporte-campo-leitura{ display:flex; flex-direction:column; gap:4px; margin-bottom:12px; }
.suporte-campo-rotulo{ font-size:.78rem; font-weight:600; opacity:.7; }
.suporte-campo-valor{
  padding:9px 11px; border:1px solid var(--border,#e0e0e0); border-radius:6px;
  background:var(--panel-alt,#f9fafb); font-size:.9rem; color:var(--text,inherit);
}
.suporte-campo-valor-pre{ white-space:pre-wrap; word-break:break-word; }

.suporte-campo-arquivo{ font-size:.82rem; }
.suporte-ajuda{ font-size:.75rem; opacity:.7; margin:2px 0 0; }
.suporte-status-select{ margin-top:10px; }

/* Miniaturas de mídia (fotos/vídeos) */
.suporte-midia-lista{ display:flex; flex-wrap:wrap; gap:10px; margin-top:4px; }
.suporte-midia-vazio{ font-size:.82rem; opacity:.65; }
.suporte-midia-thumb{
  position:relative; width:86px; height:86px; border-radius:8px; overflow:hidden;
  border:1px solid var(--border,#ddd); cursor:pointer; background:var(--panel-alt,#f3f3f3);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.suporte-midia-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.suporte-midia-thumb:hover{ filter:brightness(0.92); }
.suporte-midia-thumb-video{ background:#1a1d27; }
.suporte-midia-play{
  width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.92);
  display:flex; align-items:center; justify-content:center; color:#1a1d27; font-size:.9rem;
}
.suporte-midia-nome{
  position:absolute; left:0; right:0; bottom:0; padding:2px 4px; font-size:.62rem;
  background:rgba(0,0,0,.55); color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Lightbox de visualização de mídia */
.suporte-lightbox{
  position:fixed; inset:0; background:rgba(0,0,0,.8); z-index:10050;
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.suporte-lightbox-conteudo{ position:relative; max-width:92vw; max-height:88vh; }
.suporte-lightbox-conteudo img,
.suporte-lightbox-conteudo video{ max-width:92vw; max-height:88vh; border-radius:8px; display:block; }
.suporte-lightbox-fechar{
  position:absolute; top:-14px; right:-14px; width:32px; height:32px; border-radius:50%;
  background:#fff; color:#1a1d27; border:none; font-size:1.2rem; cursor:pointer; line-height:1;
}

/* Ajustes de contraste dos badges de status no modo escuro */
html.dark-mode .suporte-status-enviado{ background:#1e3a6e; color:#bfdbfe; }
html.dark-mode .suporte-status-recebido{ background:#5c1f1f; color:#fca5a5; }
html.dark-mode .suporte-status-em_analise{ background:#5a3b0d; color:#fdd8a4; }
html.dark-mode .suporte-status-em_tratativa{ background:#544612; color:#fde68a; }
html.dark-mode .suporte-status-concluido{ background:#173d24; color:#86efac; }
html.dark-mode .suporte-status-inconsistente{ background:#3d2359; color:#d8b4fe; }

/* ---- movido de admin/configuracoes.php ---- */
.etiqueta-editor-grid{display:grid;grid-template-columns:minmax(280px,1fr) minmax(260px,360px);gap:20px;align-items:start;}
@media(max-width:900px){.etiqueta-editor-grid{grid-template-columns:1fr;}}
#etiqueta-preview-wrap{background:var(--panel-alt);border:1px dashed #b8c4d4;border-radius:8px;padding:16px;overflow:auto;}
#etiqueta-preview nudge{position:relative;background:var(--modal-bg);border:1px solid var(--border-strong);box-shadow:0 2px 8px rgba(0,0,0,.08);}
.etiqueta-el{position:absolute;border:1px dashed transparent;padding:2px 4px;box-sizing:border-box;cursor:move;user-select:none;line-height:1.2;overflow:hidden;}
.etiqueta-el.is-selected{border-color:#2563eb;background:rgba(37,99,235,.08);}
.etiqueta-el--barcode{background:repeating-linear-gradient(90deg,#111 0 2px,transparent 2px 4px);color:transparent;font-size:8px!important;min-height:24px;}
.etiqueta-list-item{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;border:1px solid #e2e8f0;border-radius:6px;margin-bottom:6px;cursor:pointer;}
.etiqueta-list-item.is-selected{border-color:#2563eb;background:rgba(37,99,235,.10);}
.etiqueta-list-actions{display:flex;gap:4px;}
.etiqueta-toolbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;position:relative;}
#etiqueta-props .form-row{margin-bottom:8px;}
#etiqueta-props label{display:block;font-size:.9em;margin-bottom:4px;}
#etiqueta-props .form-row-checks{display:flex;flex-wrap:wrap;gap:10px;}
#etiqueta-props .form-row-checks label{display:inline-flex;align-items:center;gap:4px;font-size:.9em;margin-bottom:0;}
/* Inputs pequenos de raio por canto/vértice (formas com 3 ou 4 cantos) */
.etiqueta-cantos-grid{display:grid;gap:8px;margin-top:2px;}
.etiqueta-cantos-grid--4{grid-template-columns:repeat(2,1fr);}
.etiqueta-cantos-grid--3{grid-template-columns:repeat(3,1fr);}
.etiqueta-canto-mini{display:flex;flex-direction:column;gap:3px;font-size:.78em;font-weight:normal;color:#64748b;margin-bottom:0;}
.etiqueta-canto-mini input{width:100%;padding:4px 6px;font-size:.9em;}
.etiqueta-add-elementos-wrap{position:relative;display:inline-block;}
#etiqueta-formas-menu{display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:50;background:var(--modal-bg,#fff);border:1px solid var(--border-strong,#cbd5e1);border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.15);padding:10px;gap:8px;flex-wrap:wrap;width:260px;}
#etiqueta-formas-menu button{display:flex;flex-direction:column;align-items:center;gap:4px;width:72px;font-size:.75em;padding:6px 4px;}
#etiqueta-formas-menu button svg{width:26px;height:26px;}
.etiqueta-testar-box{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-top:16px;padding:12px;border:1px dashed var(--border-strong,#cbd5e1);border-radius:8px;background:var(--panel-alt,#f8fafc);}
.etiqueta-testar-box label{display:block;font-size:.85em;margin-bottom:4px;}
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: attr(data-value) !important;
}

.retention-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.retention-row label { flex: 1; min-width: 280px; margin-bottom: 0; }
.retention-info { font-size: 0.85em; color: #64748b; min-width: 180px; }
/* Faixa de módulo: com 22 prazos na mesma tela, sem o agrupamento a pessoa
   perde de vista onde termina um assunto e começa o outro. */
.retention-grupo { font-size: .74rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted, #64748b); border-bottom: 1px solid var(--border-strong); padding-bottom: 5px;
  margin: 22px 0 12px; }
.retention-grupo:first-of-type { margin-top: 6px; }


/* Administração de etiquetas por usuário — layout refinado */
.etiqueta-admin-box{background:var(--panel-alt);border:1px solid var(--border-strong);border-radius:8px;padding:16px 18px;margin-bottom:16px;}
.etiqueta-admin-box h3{margin-top:0;margin-bottom:14px;}
.etiqueta-admin-selecionar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px dashed var(--border-strong);}
.etiqueta-admin-selecionar .etiqueta-admin-field{flex:1;min-width:240px;}
.etiqueta-admin-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 16px;margin-top:14px;padding-top:14px;border-top:1px dashed var(--border-strong);}
.etiqueta-admin-form:first-of-type{margin-top:0;padding-top:0;border-top:none;}
.etiqueta-admin-field{display:flex;flex-direction:column;gap:6px;min-width:170px;}
.etiqueta-admin-field label{font-size:.85em;font-weight:600;margin-bottom:0;white-space:nowrap;}
.etiqueta-admin-field .input{width:100%;}
.etiqueta-admin-field--num{min-width:110px;}
.etiqueta-admin-arrow{display:flex;align-items:center;height:38px;color:#64748b;font-weight:600;padding:0 2px;}
.etiqueta-admin-box .table{margin-top:18px;margin-bottom:0;}

/* Estilização para as Abas de Etiquetas */
.etiqueta-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--border-strong); margin-bottom: 16px; margin-top: 10px; }
.etiqueta-tab-btn { padding: 10px 20px; background: var(--panel-alt); border: 1px solid var(--border-strong); border-bottom: none; border-radius: 6px 6px 0 0; cursor: pointer; font-weight: bold; color: var(--muted); transition: all 0.2s; }
.etiqueta-tab-btn:hover { background: var(--panel-alt-hover); color: var(--text); }
.etiqueta-tab-btn.is-active { background: #2563eb; color: #ffffff; border-color: #2563eb; margin-bottom: -2px; }

/* Botão de informação (i) das regras de exclusão automática */
.btn-info-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: #2563eb; color: #ffffff; font-size: 12px; font-weight: bold;
  font-style: italic; font-family: Georgia, 'Times New Roman', serif;
  border: none; cursor: pointer; margin-left: 6px; padding: 0;
  line-height: 1; vertical-align: middle;
}
.btn-info-icon:hover { background: #1d4ed8; }
.btn-info-icon:focus { outline: 2px solid #93c5fd; outline-offset: 2px; }

/* Pesquisa de motivos no formulário de vínculo */

/* Controles de "exibir por página" das tabelas de locais e motivos */
.table-perpage-controls {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px; margin-bottom: 10px; padding: 8px 10px;
  background: var(--panel-alt); border: 1px solid var(--border-strong); border-radius: 6px;
}
.table-perpage-left { display: flex; align-items: center; gap: 8px; }
.table-perpage-label { display: flex; align-items: center; gap: 6px; font-weight: normal; font-size: 0.9em; margin-bottom: 0; }
.table-perpage-select { padding: 3px 6px; border-radius: 4px; border: 1px solid var(--border-strong); }
.table-perpage-right { display: flex; align-items: center; gap: 10px; }
.table-perpage-info { font-size: 0.85em; color: #64748b; white-space: nowrap; }

/* Popup personalizado de notificações e informações */
.config-popup-overlay {
  position: fixed; inset: 0; background: rgba(15, 23, 42, .45);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 90px; z-index: 9999; opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.config-popup-overlay.is-visible { opacity: 1; pointer-events: auto; }
.config-popup-box {
  background: var(--modal-bg, #fff); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.22);
  max-width: 440px; width: calc(100% - 32px);
  padding: 18px 20px; transform: translateY(-16px);
  transition: transform .2s ease; border-left: 5px solid #2563eb;
}
.config-popup-overlay.is-visible .config-popup-box { transform: translateY(0); }
.config-popup-box.popup-success { border-left-color: #16a34a; }
.config-popup-box.popup-error   { border-left-color: #dc2626; }
.config-popup-box.popup-info    { border-left-color: #2563eb; }
.config-popup-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.config-popup-title { font-weight: bold; font-size: 1.02em; color: #1e293b; }
.config-popup-close { background: none; border: none; font-size: 20px; line-height: 1; cursor: pointer; color: #64748b; padding: 0 4px; }
.config-popup-close:hover { color: #1e293b; }
.config-popup-message { font-size: 0.92em; color: #334155; line-height: 1.5; white-space: pre-line; }

/* Preview do logo/favicon lidos direto do banco, com fallback cinza quando falha a leitura */
.config-img-preview-wrap { display: inline-flex; align-items: center; gap: 8px; }
.config-img-preview { display: inline-block; vertical-align: middle; }
.config-img-preview img { display: block; vertical-align: middle; border-radius: 4px; }
.config-img-preview--logo img { max-width: 120px; max-height: 60px; }
.config-img-preview--favicon img { width: 32px; height: 32px; }
.config-img-fallback {
  display: none; align-items: center; justify-content: center;
  background: var(--panel-alt); color: var(--muted); font-size: 11px; font-weight: bold;
  border-radius: 4px; text-transform: lowercase;
}
.config-img-preview--logo .config-img-fallback { width: 120px; height: 60px; }
.config-img-preview--favicon .config-img-fallback { width: 32px; height: 32px; font-size: 14px; }

/* ---- movido de estoque/gerenciamento_box.php ---- */
.box-form { align-items:start; }
.box-form > .field { margin:0; }
.box-form .field > label { display:block; min-height:1.3em; }
.box-form .field > .btn { width:100%; height:38px; margin:0; box-sizing:border-box; }
.box-form .input { height:38px; box-sizing:border-box; }
.box-form .input::placeholder { text-transform:none; }
.box-selecao { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 10px; }
.box-selecao .btn { margin:0; height:38px; }
.box-selecao span { flex:1 1 200px; }
#tabelaBoxes .col-check { width:38px; text-align:center; }
#tabelaBoxes .col-check input { width:18px; height:18px; cursor:pointer; margin:0; vertical-align:middle; }
#tabelaBoxes tr.is-sel td { background:var(--panel-alt,#eef2ff); }

/* ---- movido de estoque/movimentacao_estoque.php ---- */
.mov-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; align-items:start; }
.mov-grid > .field, .mov-grid > .busca-preditiva { margin:0; }
.mov-grid .field > label { display:block; min-height:1.3em; }
.mov-grid .field > .btn { width:100%; }
.mov-grid input.input, .mov-linha-box .input, .mov-linha-box .btn { height:42px; box-sizing:border-box; margin:0; }
.mov-grid .field > .btn { margin:0; }
.mov-linha-box input::placeholder, #gBox::placeholder, #cBox::placeholder, #bCodigo::placeholder { text-transform:none; }
.mov-linha-box { display:flex; gap:6px; align-items:stretch; }
.mov-linha-box .input { flex:1; }
.mov-sel { border:1px solid var(--border,#d1d5db); border-radius:8px; padding:8px 12px; margin:8px 0; }
.mov-scan video { width:100%; max-height:55vh; background:#000; border-radius:8px; }
.mov-codigo-grande { font-size:1.6rem; font-weight:700; letter-spacing:.08em; }
.mov-box-titulo { background:var(--panel-alt,#f3f4f6); font-weight:700; }

/* ---- movido de eventos/reservas.php ---- */
.rs-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; align-items:start; }
.rs-grid > .field { margin:0; }
.rs-grid .field > label { display:block; min-height:1.3em; }
.rs-grid .input { height:38px; box-sizing:border-box; }
.rs-grid textarea.input { height:auto; }
.rs-locais { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:10px; }
.rs-local { display:block; border:1px solid var(--borda,#d7dce3); border-radius:8px; padding:10px 12px; cursor:pointer; }
.rs-local:has(input:checked) { border-color:#1d4ed8; background:rgba(29,78,216,.07); }
.rs-local small { display:block; color:#667085; margin-top:2px; }
.rs-dia { display:grid; grid-template-columns:minmax(150px,1.2fr) minmax(110px,1fr) minmax(110px,1fr) auto; gap:10px; align-items:end; margin-bottom:8px; }
.rs-dia .field { margin:0; }
.rs-dia .input, .rs-dia .btn { height:38px; box-sizing:border-box; margin:0; }
.rs-dia .field { padding-bottom:0; }
.rs-dia label { display:block; min-height:1.3em; }
.rs-info { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px 18px; margin-bottom:12px; }
.rs-info dt { font-size:.78rem; color:#667085; margin:0; }
.rs-info dd { margin:0 0 2px; font-weight:600; }
.rs-conversa { display:flex; flex-direction:column; gap:8px; max-height:380px; overflow:auto; padding:4px 2px; margin-bottom:10px; }
.rs-msg { max-width:82%; padding:8px 12px; border-radius:10px; background:#eef2f7; }
.rs-msg--eu { align-self:flex-end; background:#dbeafe; }
.rs-msg small { display:block; color:#667085; margin-bottom:2px; }
.rs-msg--decisao { border-left:4px solid #1d4ed8; }
@media (max-width:640px) { .rs-dia { grid-template-columns:1fr 1fr; } .rs-dia .field:first-child { grid-column:1 / -1; } .rs-msg { max-width:100%; } }

/* ---- movido de eventos/reservas_gestao.php ---- */
.rg-filtros { display:grid; grid-template-columns:minmax(200px,1fr) minmax(220px,2fr); gap:12px; align-items:start; margin-bottom:10px; }
.rg-filtros .field { margin:0; }
.rg-filtros label { display:block; min-height:1.3em; }
.rg-filtros .input { height:38px; box-sizing:border-box; }
.rg-info { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px 18px; margin-bottom:12px; }
.rg-info dt { font-size:.78rem; color:#667085; margin:0; }
.rg-info dd { margin:0 0 2px; font-weight:600; }
.rg-alerta { border:1px solid #f59e0b; background:rgba(245,158,11,.1); border-radius:8px; padding:10px 12px; margin-bottom:12px; }
.rg-alerta ul { margin:6px 0 0 18px; padding:0; }
.rg-valor { width:130px; height:34px; box-sizing:border-box; }
.rg-conversa { display:flex; flex-direction:column; gap:8px; max-height:380px; overflow:auto; padding:4px 2px; margin-bottom:10px; }
.rg-msg { max-width:82%; padding:8px 12px; border-radius:10px; background:#eef2f7; }
.rg-msg--eu { align-self:flex-end; background:#dbeafe; }
.rg-msg small { display:block; color:#667085; margin-bottom:2px; }
.rg-msg--decisao { border-left:4px solid #1d4ed8; }
.rg-acoes { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
@media (max-width:640px) { .rg-filtros { grid-template-columns:1fr; } .rg-msg { max-width:100%; } }

/* ---- movido de eventos/reservas_locais.php ---- */
.rl-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; align-items:start; }
.rl-grid > .field { margin:0; }
.rl-grid .field > label { display:block; min-height:1.3em; }
.rl-grid .input, .rl-grid select { height:38px; box-sizing:border-box; }
.rl-checks { display:flex; gap:18px; flex-wrap:wrap; margin:6px 0 10px; }
.rl-apoio { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; align-items:start; }
.rl-apoio .field { margin:0; }
.rl-apoio .input { height:38px; box-sizing:border-box; }

/* Atalho para o cadastro de locais/motivos (visível só ao administrador) */
.atalho-cadastro { margin-left:8px; font-size:.78rem; font-weight:600; text-decoration:none; white-space:nowrap; }
.atalho-cadastro:hover { text-decoration:underline; }

/* Eventos: ações da linha em um seletor + botão IR */
.acoes-select { display:flex; align-items:center; gap:6px; min-width:210px; }
.acoes-select .acoes-select-campo { flex:1 1 auto; min-width:0; height:32px; box-sizing:border-box; margin:0; padding:2px 8px; font-size:.85rem; }
.acoes-select .acoes-ir { flex:0 0 auto; height:32px; box-sizing:border-box; margin:0; padding:0 16px; font-weight:700; }

/* Avaliações › Cadastros acadêmicos */
.cad-ano { display:flex; align-items:end; gap:10px; flex-wrap:wrap; }
.cad-ano label { margin:0; font-size:.8rem; color:#667085; align-self:center; }
.cad-ano .input { height:38px; box-sizing:border-box; margin:0; width:auto; min-width:90px; }
.cad-ano .btn { height:38px; box-sizing:border-box; margin:0; }
.cad-abas { display:flex; gap:6px; flex-wrap:wrap; border-bottom:1px solid #d7dce3; margin:12px 0 14px; }
.cad-aba { border:0; background:none; padding:10px 16px; font-weight:600; color:#667085; cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-1px; }
.cad-aba:hover { color:#1d4ed8; }
.cad-aba.is-ativa { color:#1d4ed8; border-bottom-color:#1d4ed8; }
.cad-barra { display:grid; grid-template-columns:minmax(220px,2fr) minmax(180px,1fr) auto; gap:12px; align-items:end; margin-bottom:12px; }
.cad-barra .field { margin:0; }
.cad-barra .field[hidden] { display:none; }
.cad-barra label { display:block; min-height:1.3em; }
.cad-barra .input, .cad-barra .btn { height:38px; box-sizing:border-box; margin:0; }
.cad-barra-acoes { display:flex; gap:8px; }
.cad-resumo { display:flex; gap:18px; flex-wrap:wrap; margin:10px 0; }
.cad-ok strong { color:#15803d; }
.cad-erro strong { color:#b91c1c; }
.cad-alerta { border:1px solid #f59e0b; background:rgba(245,158,11,.1); border-radius:8px; padding:8px 12px; margin:8px 0; font-size:.88rem; }
.cad-alerta--erro { border-color:#dc2626; background:rgba(220,38,38,.08); }
@media (max-width:760px) { .cad-barra { grid-template-columns:1fr; } }

/* Avaliações › ficha: turmas, modo (cheia/selecionados) e popup de alunos */
.av-turma-modo { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:8px; }
.av-turma-modo .btn { height:32px; box-sizing:border-box; margin:0; }
.av-pk, .dlg-coluna { display:flex; flex-direction:column; gap:12px; width:100%; min-height:0; overflow:auto; box-sizing:border-box; }
.dlg-coluna .form-grid { width:100%; }

/* Campainha Virtual (APK): compatibilidade em destaque e bloco de download. */
.apk-compat { border:2px solid var(--btn-info-bg, #2563eb); background:rgba(37,99,235,.08); border-radius:12px; padding:14px 18px; margin:6px 0 18px; }
.apk-compat-titulo { font-weight:800; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:#1d4ed8; margin-bottom:8px; }
.apk-versoes { display:flex; flex-wrap:wrap; gap:8px; }
.apk-ver { background:#1d4ed8; color:#fff; font-weight:800; padding:7px 14px; border-radius:999px; font-size:.95rem; }
.apk-compat-nao { margin-top:8px; font-size:.84rem; color:var(--muted); }
.apk-download { border:1px solid var(--border-strong); border-radius:12px; background:var(--panel); padding:16px 18px; display:flex; flex-direction:column; gap:12px; }
.apk-info { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
.apk-info > div { display:flex; flex-direction:column; gap:2px; }
.apk-rotulo { font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700; }
.apk-download code { word-break:break-all; font-size:.78rem; }
.apk-lista { margin:0; padding-left:20px; line-height:1.6; }

/* Avaliações: orientações impressas com texto formatado. */
.orient-previa { border:1px solid var(--border-strong); border-left:4px solid var(--btn-info-bg, #2563eb); border-radius:8px; background:var(--panel); padding:12px 16px; font-size:.86rem; line-height:1.5; max-height:260px; overflow:auto; }
.orient-previa p { margin:0 0 6px; }
.orient-previa ul, .orient-previa ol { margin:0 0 6px; padding-left:22px; }
.orient-barra { display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:8px; border:1px solid var(--border-strong); border-radius:8px; background:var(--panel-alt); }
.orient-barra .btn { margin:0; min-width:34px; }
.orient-barra select { width:auto; height:31px; margin:0; }
.orient-cor { display:inline-flex; align-items:center; gap:6px; font-size:.82rem; color:var(--muted); }
.orient-cor input { width:34px; height:28px; padding:0; border:1px solid var(--border-strong); border-radius:6px; background:none; cursor:pointer; }
.orient-editor { min-height:260px; max-height:52vh; overflow:auto; border:1px solid var(--border-strong); border-radius:8px; background:#fff; color:#1f2937; padding:16px 18px; font-family:Helvetica,Arial,sans-serif; font-size:12.3px; line-height:1.5; outline:none; }
.orient-editor:focus { border-color:var(--accent, #2563eb); box-shadow:0 0 0 3px rgba(37,99,235,.15); }
.orient-editor p { margin:0 0 6px; }
.orient-editor ul, .orient-editor ol { margin:0 0 6px; padding-left:24px; }

/* Linha que acabou de mudar (Registro de Acessos): azul suave entra, fica ~2 s e sai. */
@keyframes linha-atualizada-fade { 0% { background-color: transparent; } 20% { background-color: rgba(59,130,246,.16); } 80% { background-color: rgba(59,130,246,.16); } 100% { background-color: transparent; } }
tr.linha-atualizada > td { animation: linha-atualizada-fade 2s ease-in-out; }
@media (prefers-reduced-motion: reduce) { tr.linha-atualizada > td { animation: none; background-color: rgba(59,130,246,.16); } }

/* Patrimônio: barra de filtros, fornecedor com busca e rateio. */
.pat-barra { display:grid; grid-template-columns:minmax(220px,2fr) minmax(160px,1fr) minmax(160px,1fr) auto; gap:12px; align-items:end; margin-bottom:12px; }
.pat-barra .field { margin:0; }
.pat-barra .field[hidden] { display:none; }
.pat-barra .input, .pat-barra .btn { height:38px; box-sizing:border-box; margin:0; }
.pat-barra--rateio { grid-template-columns:minmax(220px,1fr) auto; }
.pat-forn-wrap { position:relative; }
.pat-rel { margin:0; }
.pat-rel .btn { margin-top:6px; }
.pat-retorno { padding:10px 14px; border-radius:8px; margin:0 0 12px; font-weight:600; border:1px solid var(--border); background:var(--panel-alt); }
.pat-retorno--ok { background:#dcfce7; color:#15803d; border-color:#86efac; }
.pat-retorno--aviso { background:#fef9c3; color:#a16207; border-color:#fde047; }
.pat-retorno--erro { background:#fee2e2; color:#b91c1c; border-color:#fca5a5; }
.pat-chips { display:flex; flex-wrap:wrap; gap:6px; }
.pat-chip { display:inline-flex; align-items:center; gap:6px; padding:4px 6px 4px 10px; border-radius:999px; background:var(--panel-alt); border:1px solid var(--border-strong); font-size:13px; }
.pat-chip button { border:0; background:none; cursor:pointer; font-size:16px; line-height:1; color:var(--muted); }
.pat-forn { display:grid; grid-template-columns:170px 1fr auto; gap:8px; align-items:center; }
.pat-forn .input, .pat-forn .btn { height:38px; box-sizing:border-box; margin:0; }
.pat-forn-wrap .motivo-dropdown-list { top:42px; }
@media (max-width: 720px) {
  .pat-barra { grid-template-columns:1fr; }
  .pat-forn { grid-template-columns:1fr; }
}
.av-pk .field { margin:0; }
.av-pk-barra { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.av-pk-busca { flex:1 1 220px; min-width:0; }
.av-pk-acoes { display:flex; gap:8px; }
.av-pk-contagem { margin-left:auto; white-space:nowrap; }
.av-pk-lista { width:100%; max-height:min(52vh,420px); overflow:auto; box-sizing:border-box; }
.av-pk-turma { font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:#1d4ed8; padding:8px 4px 4px; border-bottom:1px solid #e4e8ee; margin-top:6px; }
.checklist-acoes { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:6px 0; }

/* Avaliações › painel de métricas com filtros de múltipla escolha */
.rp-filtros { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:14px; align-items:start; }
.rp-filtro { margin:0; }
.rp-filtro > label { display:block; min-height:1.3em; }
.rp-filtro .input { height:34px; box-sizing:border-box; margin:0 0 6px; }
.rp-box { height:150px; max-height:150px; overflow:auto; }
.rp-contagem { font-weight:400; color:#667085; font-size:.8rem; }
.rp-acoes { justify-content:flex-start; margin-top:12px; }
.rp-barra { display:flex; align-items:center; gap:10px; }
.rp-barra .aval-barra { flex:1 1 auto; min-width:90px; }
.rp-barra strong { flex:0 0 auto; min-width:52px; text-align:right; }


/* ==========================================================================
   CSS das páginas que antes tinham <style> próprio (um bloco por página)
   ========================================================================== */
/* --- Página: admin/aplicativos.php --- */
.apps-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:16px;margin-top:6px;}
  .app-item{border:1px solid var(--border);border-radius:12px;padding:18px 18px 16px;display:flex;flex-direction:column;gap:10px;background:var(--card-bg,#fff);}
  .app-item h3{margin:0;font-size:18px;}
  .app-item .app-serve{margin:0;color:var(--muted);line-height:1.5;}
  .app-versao{font-size:12.5px;color:var(--muted);}
  .app-req{display:inline-block;font-size:12px;font-weight:700;padding:2px 10px;border-radius:999px;background:rgba(29,78,216,.10);color:#1d4ed8;align-self:flex-start;}
  .app-botoes{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px;}
  .app-item h4{margin:8px 0 0;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);}
  .app-item ol,.app-item ul{margin:0;padding-left:20px;line-height:1.55;font-size:14px;}
  .app-item details{font-size:14px;line-height:1.5;}
  .app-item summary{cursor:pointer;font-weight:600;}
  .app-indisponivel{color:var(--muted);font-style:italic;margin:0;}

/* --- Página: arquivo/arquivo.php --- */
.av-lista{display:flex;flex-direction:column;gap:10px;margin-top:14px;}
  .av-item{border:1px solid var(--border);border-radius:10px;padding:14px 16px;background:var(--card-bg,#fff);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;}
  .av-item:hover{border-color:var(--primary,#1d4ed8);}
  .av-cat{display:inline-block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--primary,#1d4ed8);background:#eff6ff;border-radius:20px;padding:2px 10px;margin-bottom:4px;}
  #visualizadorOverlay{position:fixed;inset:0;background:#111827;z-index:9999;display:none;flex-direction:column;}
  #visualizadorOverlay.is-open{display:flex;}
  .av-vis-topo{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px;background:#1f2937;color:#fff;}
  .av-vis-titulo{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .av-vis-fechar{background:transparent;border:1px solid #4b5563;color:#fff;border-radius:8px;padding:8px 14px;cursor:pointer;font-size:14px;}
  .av-vis-corpo{flex:1;overflow:auto;display:flex;justify-content:center;padding:16px;user-select:none;}
  .av-vis-corpo canvas{box-shadow:0 4px 18px rgba(0,0,0,.4);background:#fff;max-width:100%;}
  .av-vis-rodape{display:flex;align-items:center;justify-content:center;gap:16px;padding:10px;background:#1f2937;color:#fff;}
  .av-vis-rodape button{background:#374151;border:0;color:#fff;border-radius:8px;padding:8px 16px;cursor:pointer;font-size:14px;}
  .av-vis-rodape button:disabled{opacity:.4;cursor:not-allowed;}
  .av-vis-aviso{font-size:12px;color:#9ca3af;text-align:center;padding:4px 16px 0;}

/* --- Página: entregas/cofres.php --- */
.jp-folha ol{padding-left:22px;margin:0;} .jp-folha li{margin:0 0 14px;font-size:1.02rem;line-height:1.5;} .jp-folha li strong{color:var(--jp-primaria);} .jp-passos-link{margin-top:22px;padding:12px 14px;border:1px dashed var(--jp-borda);border-radius:8px;font-size:.85rem;color:var(--jp-suave);word-break:break-all;}
.jp-qr-area{text-align:center;padding:20px 0;} #jpQrCode{display:inline-block;padding:14px;background:#fff;border:1px solid var(--jp-borda);border-radius:10px;} .jp-qr-link{margin-top:18px;font-family:"Courier New",Courier,monospace;font-size:1.05rem;font-weight:700;word-break:break-all;} .jp-qr-nota{margin-top:8px;font-size:.85rem;color:var(--jp-suave);}

/* --- Página: entregas/entregas.php --- */
.entregas-fotos-grade{display:flex;flex-wrap:wrap;gap:8px;}
  .entregas-fotos-grade img{width:110px;height:82px;object-fit:cover;border-radius:6px;border:1px solid var(--border);cursor:pointer;}

/* --- Página: entregas/minhas.php --- */
.cp-destaque{text-align:center;padding:22px 16px;border:2px solid var(--primary,#1d4ed8);border-radius:12px;background:var(--card-bg,#fff);margin-top:14px;}
  .cp-destaque .cp-rotulo{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0;}
  .cp-destaque .cp-codigo{font-family:'Courier New',Courier,monospace;font-size:48px;font-weight:800;letter-spacing:.25em;margin:8px 0;color:var(--primary,#1d4ed8);}
  .cp-destaque .cp-nome{font-size:17px;font-weight:700;margin:2px 0 0;}
  .cp-destaque .cp-dica{font-size:13px;color:var(--muted);margin-top:8px;}
  .me-lista{display:flex;flex-direction:column;gap:12px;margin-top:18px;}
  .me-card{border:1px solid var(--border);border-radius:10px;padding:16px;background:var(--card-bg,#fff);}
  .me-card .me-linha{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;}
  .me-card .me-info p{margin:2px 0;font-size:14px;}
  .me-card .me-senha{font-family:'Courier New',Courier,monospace;font-weight:700;font-size:16px;}

/* --- Página: entregas/painel.php --- */
.cofres-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:14px;}
  /* Cards de status sempre vermelho/verde sólido, em qualquer tema (normal ou alto contraste) — por
     isso o texto é sempre branco aqui dentro, com !important: sem isto, o CSS do modo de alto
     contraste sobrescrevia a cor e o texto ficava escuro sobre o fundo escuro, ilegível. */
  .cofre-card, .cofre-card *{color:#fff !important;}
  .cofre-card{border-radius:10px;padding:16px;box-shadow:0 1px 3px rgba(0,0,0,.15);}
  .cofre-card.livre{background:#15803d;}
  .cofre-card.ocupado{background:#b91c1c;cursor:pointer;}
  .cofre-card .cofre-codigo{font-size:22px;font-weight:700;margin:0;}
  .cofre-card .cofre-local{font-size:12.5px;opacity:.92;margin:0 0 8px;}
  .cofre-card .cofre-status{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;}
  .cofre-card .cofre-info{margin-top:8px;font-size:13.5px;font-weight:600;line-height:1.6;background:rgba(255,255,255,.22);border-radius:6px;padding:8px 10px;}
  .cofres-vazio{color:var(--muted);padding:24px 0;}

/* --- Página: ht/admin.php --- */
.ht-led{display:inline-block;width:13px;height:13px;border-radius:50%;flex:none;vertical-align:-1px;margin-right:6px;box-shadow:0 0 0 3px rgba(0,0,0,.06);}
  .ht-led--on{background:#22c55e;} .ht-led--off{background:#ef4444;} .ht-led--ferias{background:#3b82f6;} .ht-led--fora{background:#f59e0b;}
  .ht-modo{display:inline-block;font-size:11px;font-weight:700;padding:1px 8px;border-radius:999px;background:rgba(0,0,0,.08);margin-left:6px;}
  .ht-modo--ferias{background:rgba(59,130,246,.15);color:#1d4ed8;} .ht-modo--fora{background:rgba(245,158,11,.18);color:#b45309;}
  .ht-agente{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;border-radius:10px;margin-bottom:14px;border:1px solid var(--border);}
  .ht-agente--off{background:rgba(239,68,68,.10);border-color:#ef4444;}
  .ht-agente--on{background:rgba(34,197,94,.10);border-color:#22c55e;}
  .ht-agente strong{font-size:15px;}
  .ht-botoes{display:flex;gap:6px;flex-wrap:wrap;}
  .ht-botao{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;letter-spacing:.5px;padding:2px 8px;border-radius:999px;color:#111;}
  .ht-membros-box{display:flex;flex-direction:column;gap:10px;}
  .ht-membros-ajuda{margin:0;color:var(--muted);font-size:13.5px;}
  .ht-membros-barra{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
  .ht-membros-barra .input{flex:1 1 180px;min-width:0;}
  .ht-membros-lista{max-height:42vh;overflow:auto;border:1px solid var(--border);border-radius:8px;}
  .ht-membros{margin:0;width:100%;}
  .ht-membros th{position:sticky;top:0;background:var(--panel, #fff);z-index:1;}
  .ht-membros td, .ht-membros th{padding:8px 12px;}
  .ht-membros input[type=checkbox]{width:18px;height:18px;cursor:pointer;}
  .ht-m-nome{font-weight:600;}
  .ht-membros-resumo{margin:0;font-size:12.5px;color:var(--muted);}
  .ht-player{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:10px 14px;margin-bottom:12px;border:1px solid var(--border);border-radius:10px;background:rgba(29,78,216,.06);}
  .ht-player audio{flex:1 1 280px;min-width:240px;}
  .ht-acao-audio{display:inline-flex;align-items:center;justify-content:center;min-width:36px;}
  .ht-canal-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;letter-spacing:.5px;padding:2px 9px;border-radius:999px;color:#111;}
  .ht-setor{font-size:11px;font-weight:600;color:var(--accent);background:rgba(37,99,235,.10);padding:1px 8px;border-radius:999px;margin-left:6px;}

/* --- Página: index.php --- */
.login-captcha-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:4px;}
.login-captcha-row img{border:1px solid var(--btn-secondary-border,#d1d5db);border-radius:8px;width:140px;height:44px;display:block;background:#f3f4f6;}
.login-captcha-row .input{max-width:140px;letter-spacing:.12em;text-transform:uppercase;}
.login-chave{text-transform:lowercase;}

/* --- Página: ocorrencias/ocorrencias.php --- */
.oc-protocolo{font-family:'Courier New',Courier,monospace;font-weight:700;white-space:nowrap;}
  .oc-texto{white-space:pre-wrap;word-break:break-word;}
  .oc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px 18px;margin:10px 0;}
  .oc-grid dt{font-size:12.5px;color:var(--muted);margin:0;}
  .oc-grid dd{margin:0 0 4px;font-weight:600;}
  .oc-linha-tempo{display:flex;flex-direction:column;gap:8px;margin-top:8px;}
  .oc-evento{border-left:3px solid var(--primary,#1d4ed8);padding:4px 10px;}
  .oc-evento .oc-meta{font-size:12.5px;color:var(--muted);}
  .oc-anexo-item{display:inline-flex;flex-direction:column;gap:4px;align-items:flex-start;}
  .oc-form-rodape{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;}
  .oc-dica{font-size:12.5px;color:var(--muted);}

/* --- Página: ouvidoria/abrir.php --- */
.ov-lista{display:flex;flex-direction:column;gap:12px;margin-top:14px;}
  .ov-card{border:1px solid var(--border);border-radius:10px;padding:14px 16px;background:var(--card-bg,#fff);cursor:pointer;}
  .ov-card:hover{border-color:var(--primary,#1d4ed8);}
  .ov-card .ov-linha{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;}
  .ov-protocolo{font-family:'Courier New',Courier,monospace;font-weight:700;}
  .ov-texto{white-space:pre-wrap;word-break:break-word;}
  .ov-conversa{display:flex;flex-direction:column;gap:10px;margin-top:10px;}
  .ov-msg{border:1px solid var(--border);border-radius:10px;padding:10px 12px;max-width:92%;}
  .ov-msg.ouv{align-self:flex-start;background:rgba(29,78,216,.07);}
  .ov-msg.eu{align-self:flex-end;}
  .ov-msg .ov-meta{font-size:12.5px;color:var(--muted);margin-bottom:4px;}
  .ov-anonimo{display:flex;gap:8px;align-items:flex-start;}
  .ov-anonimo input{margin-top:4px;}

/* --- Página: servicos/servicos.php --- */
.sv-fotos-preview{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
  .sv-fotos-preview img{width:72px;height:54px;object-fit:cover;border-radius:6px;border:1px solid var(--border);}
  .sv-timeline{border-left:2px solid var(--border);margin:10px 0 0 6px;padding-left:16px;}
  .sv-timeline-item{margin-bottom:14px;}
  .sv-timeline-item .sv-tl-meta{font-size:12.5px;color:var(--muted);}

/* --- Página: servicos/solicitar.php --- */
.sv-lista{display:flex;flex-direction:column;gap:12px;margin-top:14px;}
  .sv-card{border:1px solid var(--border);border-radius:10px;padding:14px 16px;background:var(--card-bg,#fff);cursor:pointer;}
  .sv-card:hover{border-color:var(--primary,#1d4ed8);}
  .sv-card .sv-linha{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;}
  .sv-protocolo{font-family:'Courier New',Courier,monospace;font-weight:700;}
  .sv-fotos-preview{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
  .sv-fotos-preview img{width:72px;height:54px;object-fit:cover;border-radius:6px;border:1px solid var(--border);}
  .sv-timeline{border-left:2px solid var(--border);margin:10px 0 0 6px;padding-left:16px;}
  .sv-timeline-item{margin-bottom:14px;}
  .sv-timeline-item .sv-tl-meta{font-size:12.5px;color:var(--muted);}
  .sv-estrelas{display:flex;gap:4px;margin:8px 0;}
  .sv-estrelas button{border:1px solid var(--border);background:#fff;border-radius:6px;width:34px;height:34px;cursor:pointer;font-weight:700;}
  .sv-estrelas button.sel{background:var(--primary,#1d4ed8);color:#fff;border-color:var(--primary,#1d4ed8);}

/* --- Página: eventos/eventos.php --- */
@media print{table.jp-tabela{break-inside:avoid;page-break-inside:avoid;} .jp-secao{break-after:avoid;}}

/* --- Página: patrimonio/contagem.php --- */
@media print{.jp-secao{break-after:avoid;} .jp-assinaturas{margin-top:18mm;}}

/* --- Página: ouvidoria/ouvidoria.php --- */
.ov-texto-g{white-space:pre-wrap;word-break:break-word;}
  .ov-conversa-g{display:flex;flex-direction:column;gap:10px;margin-top:10px;}
  .ov-msg-g{border:1px solid var(--border);border-radius:10px;padding:10px 12px;max-width:92%;}
  .ov-msg-g.ouv-g{align-self:flex-end;background:rgba(29,78,216,.07);}
  .ov-msg-g.sol-g{align-self:flex-start;}
  .ov-msg-g .ov-meta-g{font-size:12.5px;color:var(--muted);margin-bottom:4px;}
  .ov-pendentes-g{margin:0 0 12px;padding:8px 12px;border-radius:8px;background:rgba(29,78,216,.08);border:1px solid rgba(29,78,216,.2);font-size:13.5px;}

/* --- Página: ht/ht.php --- */
.ht-status-m{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 4px;}
  .ht-led-m{display:inline-block;width:14px;height:14px;border-radius:50%;flex:none;box-shadow:0 0 0 3px rgba(0,0,0,.06);}
  .ht-led--on-m{background:#22c55e;} .ht-led--off-m{background:#ef4444;}
  .ht-canais-m{display:grid;gap:12px;margin-top:8px;}
  .ht-canal-m{display:grid;grid-template-columns:170px minmax(180px,1fr) minmax(130px,170px);gap:12px;align-items:end;
            padding:12px 14px;border:1px solid var(--border);border-radius:10px;}
  .ht-canal-m .field-m{min-width:0;}
  .ht-canal-m .input-m{width:100%;box-sizing:border-box;}
  .ht-canal-cor-m{display:flex;align-items:center;gap:10px;font-weight:600;}
  .ht-bolota-m{width:30px;height:30px;border-radius:50%;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18),0 1px 3px rgba(0,0,0,.3);flex:none;}
  .ht-rotulo-m{text-transform:uppercase;letter-spacing:1px;font-weight:700;}
  .ht-escuta-m{display:flex;gap:16px;flex-wrap:wrap;margin:8px 0;}
  .ht-escuta-m label{display:flex;align-items:center;gap:6px;}
  .ht-escuta-cores-m{display:flex;gap:14px;flex-wrap:wrap;margin-left:26px;}
  .ht-aviso-m{background:var(--surface-2, #f3f4f6);border-radius:8px;padding:10px 14px;margin-top:10px;font-size:13.5px;}
  @media (max-width:720px){.ht-canal-m{grid-template-columns:1fr;}}


/* ==========================================================================
   Modo contraste (html.dark-mode): rede de segurança para cores fixas escritas em style=""
   nas telas. Fundo claro fixo vira superfície escura; texto escuro fixo passa a usar --text.
   ========================================================================== */
html.dark-mode :is([style*="background:#fff" i],
  [style*="background: #fff" i],
  [style*="background-color:#fff" i],
  [style*="background-color: #fff" i],
  [style*="background:#ffffff" i],
  [style*="background: #ffffff" i],
  [style*="background-color:#ffffff" i],
  [style*="background-color: #ffffff" i],
  [style*="background:white" i],
  [style*="background: white" i],
  [style*="background-color:white" i],
  [style*="background-color: white" i],
  [style*="background:#f9fafb" i],
  [style*="background: #f9fafb" i],
  [style*="background-color:#f9fafb" i],
  [style*="background-color: #f9fafb" i],
  [style*="background:#f3f4f6" i],
  [style*="background: #f3f4f6" i],
  [style*="background-color:#f3f4f6" i],
  [style*="background-color: #f3f4f6" i],
  [style*="background:#f8fafc" i],
  [style*="background: #f8fafc" i],
  [style*="background-color:#f8fafc" i],
  [style*="background-color: #f8fafc" i],
  [style*="background:#f1f5f9" i],
  [style*="background: #f1f5f9" i],
  [style*="background-color:#f1f5f9" i],
  [style*="background-color: #f1f5f9" i],
  [style*="background:#eef2f7" i],
  [style*="background: #eef2f7" i],
  [style*="background-color:#eef2f7" i],
  [style*="background-color: #eef2f7" i],
  [style*="background:#eff6ff" i],
  [style*="background: #eff6ff" i],
  [style*="background-color:#eff6ff" i],
  [style*="background-color: #eff6ff" i],
  [style*="background:#fef2f2" i],
  [style*="background: #fef2f2" i],
  [style*="background-color:#fef2f2" i],
  [style*="background-color: #fef2f2" i],
  [style*="background:#fffbeb" i],
  [style*="background: #fffbeb" i],
  [style*="background-color:#fffbeb" i],
  [style*="background-color: #fffbeb" i],
  [style*="background:#fff7ed" i],
  [style*="background: #fff7ed" i],
  [style*="background-color:#fff7ed" i],
  [style*="background-color: #fff7ed" i],
  [style*="background:#f0fdf4" i],
  [style*="background: #f0fdf4" i],
  [style*="background-color:#f0fdf4" i],
  [style*="background-color: #f0fdf4" i],
  [style*="background:#fef3c7" i],
  [style*="background: #fef3c7" i],
  [style*="background-color:#fef3c7" i],
  [style*="background-color: #fef3c7" i],
  [style*="background:#fee2e2" i],
  [style*="background: #fee2e2" i],
  [style*="background-color:#fee2e2" i],
  [style*="background-color: #fee2e2" i],
  [style*="background:#dcfce7" i],
  [style*="background: #dcfce7" i],
  [style*="background-color:#dcfce7" i],
  [style*="background-color: #dcfce7" i],
  [style*="background:#e0f2fe" i],
  [style*="background: #e0f2fe" i],
  [style*="background-color:#e0f2fe" i],
  [style*="background-color: #e0f2fe" i],
  [style*="background:#ede9fe" i],
  [style*="background: #ede9fe" i],
  [style*="background-color:#ede9fe" i],
  [style*="background-color: #ede9fe" i],
  [style*="background:#fafafa" i],
  [style*="background: #fafafa" i],
  [style*="background-color:#fafafa" i],
  [style*="background-color: #fafafa" i],
  [style*="background:#f5f5f5" i],
  [style*="background: #f5f5f5" i],
  [style*="background-color:#f5f5f5" i],
  [style*="background-color: #f5f5f5" i],
  [style*="background:#f7f8fa" i],
  [style*="background: #f7f8fa" i],
  [style*="background-color:#f7f8fa" i],
  [style*="background-color: #f7f8fa" i],
  [style*="background:#ecfdf5" i],
  [style*="background: #ecfdf5" i],
  [style*="background-color:#ecfdf5" i],
  [style*="background-color: #ecfdf5" i],
  [style*="background:#fdf2f8" i],
  [style*="background: #fdf2f8" i],
  [style*="background-color:#fdf2f8" i],
  [style*="background-color: #fdf2f8" i]) {
  background-color: var(--panel-alt) !important;
  color: var(--text) !important;
}
html.dark-mode :is([style*=";color:#111" i], [style^="color:#111" i],
  [style*=";color: #111" i], [style^="color: #111" i],
  [style*=";color:#111827" i], [style^="color:#111827" i],
  [style*=";color: #111827" i], [style^="color: #111827" i],
  [style*=";color:#1f2937" i], [style^="color:#1f2937" i],
  [style*=";color: #1f2937" i], [style^="color: #1f2937" i],
  [style*=";color:#374151" i], [style^="color:#374151" i],
  [style*=";color: #374151" i], [style^="color: #374151" i],
  [style*=";color:#000" i], [style^="color:#000" i],
  [style*=";color: #000" i], [style^="color: #000" i],
  [style*=";color:#000000" i], [style^="color:#000000" i],
  [style*=";color: #000000" i], [style^="color: #000000" i],
  [style*=";color:#222" i], [style^="color:#222" i],
  [style*=";color: #222" i], [style^="color: #222" i],
  [style*=";color:#333" i], [style^="color:#333" i],
  [style*=";color: #333" i], [style^="color: #333" i],
  [style*=";color:#0f172a" i], [style^="color:#0f172a" i],
  [style*=";color: #0f172a" i], [style^="color: #0f172a" i],
  [style*=";color:#1e293b" i], [style^="color:#1e293b" i],
  [style*=";color: #1e293b" i], [style^="color: #1e293b" i],
  [style*=";color:#212529" i], [style^="color:#212529" i],
  [style*=";color: #212529" i], [style^="color: #212529" i]) {
  color: var(--text) !important;
}
html.dark-mode .app-req { color: #93c5fd; }
html.dark-mode .ht-modo--ferias { color: #93c5fd; }
html.dark-mode .ht-modo--fora { color: #fcd34d; }

/* Botões de destaque que antes levavam cor em style="". */
a.btn-aviso,button.btn-aviso,.btn.btn-aviso { background-color:#b45309!important; color:#fff!important; border:none!important; }
a.btn-aviso:hover,button.btn-aviso:hover,.btn.btn-aviso:hover { background-color:#92400e!important; filter:none; }
a.btn-roxo,button.btn-roxo,.btn.btn-roxo { background-color:#7c3aed!important; color:#fff!important; border:none!important; }
a.btn-roxo:hover,button.btn-roxo:hover,.btn.btn-roxo:hover { background-color:#6d28d9!important; filter:none; }