/* ==========================================================================
   Cominatto Semi Joias - sistema de design
   --------------------------------------------------------------------------
   Nenhuma cor literal aparece abaixo desta seção. Tudo consome as variáveis
   geradas em app/core/tema.php a partir do banco. Trocar a paleta em
   Configurações repinta a interface inteira sem editar este arquivo.
   ========================================================================== */

/* Valores de emergência. Quando o bloco vindo do banco não carrega, a
   interface continua legível em vez de aparecer sem cor nenhuma. */
:root {
  --marca: #6B2740;
  --marca-forte: #5C2237;
  --marca-suave: rgba(107, 39, 64, .08);
  --marca-borda: rgba(107, 39, 64, .28);
  --marca-texto: #FFFFFF;
  --realce: #C2A15B;
  --realce-suave: rgba(194, 161, 91, .16);
  --fundo: #F7F4F2;
  --superficie: #FFFFFF;
  --superficie-alt: #FAF8F7;
  --borda: #E8E1DC;
  --borda-forte: #D9CFC8;
  --texto: #241E22;
  --texto-suave: #6B6167;
  --texto-fraco: #948A90;
  --ok: #2E7D5B;
  --ok-suave: rgba(46, 125, 91, .12);
  --alerta: #B7791F;
  --alerta-suave: rgba(183, 121, 31, .14);
  --erro: #C2413B;
  --erro-suave: rgba(194, 65, 59, .12);
  --menu-fundo: #30111C;
  --menu-texto: rgba(255, 255, 255, .72);
  --menu-texto-forte: #FFFFFF;
  --menu-ativo: rgba(255, 255, 255, .10);
  --menu-borda: rgba(255, 255, 255, .12);
  --raio: 12px;
  --raio-sm: 8px;
  --raio-lg: 18px;
  --espaco-celula: 14px;
  --altura-linha: 54px;
  --sombra: 0 1px 2px rgba(36, 30, 34, .04), 0 8px 24px rgba(36, 30, 34, .06);

  --largura-menu: 264px;
  --largura-menu-fechado: 76px;
  --altura-topo: 68px;
  --fonte-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-titulo: "Fraunces", Georgia, "Times New Roman", serif;
  --transicao: 180ms cubic-bezier(.4, 0, .2, 1);
}

/* Ponte com o Bootstrap: os componentes prontos passam a usar nossa paleta. */
:root {
  --bs-primary: var(--marca);
  --bs-primary-rgb: 107, 39, 64;
  --bs-body-bg: var(--fundo);
  --bs-body-color: var(--texto);
  --bs-border-color: var(--borda);
  --bs-border-radius: var(--raio);
  --bs-font-sans-serif: var(--fonte-ui);
  --bs-link-color: var(--marca);
  --bs-link-hover-color: var(--marca-forte);
}

/* ==========================================================================
   Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte-ui);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv05" 1, "ss01" 1;
}

h1, h2, h3, h4, h5 { margin: 0; font-weight: 600; color: var(--texto); line-height: 1.25; }

a { color: var(--marca); text-decoration: none; }
a:hover { color: var(--marca-forte); }

img { max-width: 100%; display: block; }

/* Foco visível em qualquer elemento navegável pelo teclado. */
:focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: 2px;
  border-radius: var(--raio-sm);
}

::selection { background: var(--marca-suave); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Números de dinheiro sempre alinhados na vertical. */
.numero, .dinheiro, td.dinheiro, .kpi-valor {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Só para leitor de tela. */
.apenas-leitor {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.pular-para-conteudo {
  position: absolute; left: -999px; top: 8px; z-index: 999;
  background: var(--marca); color: var(--marca-texto);
  padding: 10px 16px; border-radius: var(--raio-sm);
}
.pular-para-conteudo:focus { left: 8px; color: var(--marca-texto); }

/* ==========================================================================
   Estrutura
   ========================================================================== */

.app { display: flex; min-height: 100vh; }

.conteudo {
  flex: 1;
  min-width: 0;
  margin-left: var(--largura-menu);
  display: flex;
  flex-direction: column;
  transition: margin-left var(--transicao);
}
.app.menu-fechado .conteudo { margin-left: var(--largura-menu-fechado); }

.area { padding: 24px 28px 40px; flex: 1; }

.cabecalho-pagina {
  display: flex; flex-wrap: wrap; gap: 16px;
  align-items: flex-end; justify-content: space-between;
  margin-bottom: 22px;
}
.cabecalho-pagina h1 {
  font-family: var(--fonte-titulo);
  font-size: 22px;
  line-height: 31px;
  font-weight: 700;
}
.cabecalho-pagina .caminho {
  font-size: 12px; color: var(--texto-fraco); margin-top: 3px;
  display: flex; gap: 7px; align-items: center;
}
.cabecalho-pagina .caminho a { color: var(--texto-suave); }
.cabecalho-pagina .caminho a:hover { color: var(--marca); }

.grade { display: grid; gap: 18px; }
.grade-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.grade-1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }

/* ==========================================================================
   Menu lateral
   ========================================================================== */

.menu {
  position: fixed; inset: 0 auto 0 0; z-index: 40;
  width: var(--largura-menu);
  background: var(--menu-fundo);
  color: var(--menu-texto);
  display: flex; flex-direction: column;
  border-right: 1px solid var(--menu-borda);
  transition: width var(--transicao);
}
.app.menu-fechado .menu { width: var(--largura-menu-fechado); }

.menu-marca {
  height: var(--altura-topo);
  display: flex; align-items: center; gap: 11px;
  padding: 0 20px;
  border-bottom: 1px solid var(--menu-borda);
  flex-shrink: 0;
}
.menu-marca .selo {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 9px;
  display: grid; place-items: center;
  background: var(--realce);
  color: var(--realce-texto, #241E22);
  font-family: var(--fonte-titulo);
  font-size: 17px; font-weight: 700;
}
.menu-marca .nome {
  font-family: var(--fonte-titulo);
  font-size: 19px; font-weight: 600; letter-spacing: -.01em;
  color: var(--menu-texto-forte);
  white-space: nowrap;
}
.menu-marca .nome small {
  display: block; font-family: var(--fonte-ui);
  font-size: 10.5px; font-weight: 500; letter-spacing: .09em;
  text-transform: uppercase; color: var(--menu-texto);
}
.app.menu-fechado .menu-marca { padding: 0 21px; }
.app.menu-fechado .menu-marca .nome { display: none; }

.menu-rolagem { flex: 1; overflow-y: auto; padding: 16px 12px 24px; }
.menu-rolagem::-webkit-scrollbar { width: 6px; }
.menu-rolagem::-webkit-scrollbar-thumb { background: var(--menu-borda); border-radius: 3px; }

.menu-grupo {
  font-size: 10.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--menu-texto);
  opacity: .6; padding: 18px 12px 8px;
}
.menu-grupo:first-child { padding-top: 2px; }
.app.menu-fechado .menu-grupo { text-align: center; font-size: 0; padding: 14px 0 6px; }
.app.menu-fechado .menu-grupo::after {
  content: ""; display: block; height: 1px; background: var(--menu-borda); margin: 0 14px;
}

.menu-item {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; margin-bottom: 2px;
  border-radius: var(--raio-sm);
  color: var(--menu-texto);
  font-size: 14px; font-weight: 500;
  white-space: nowrap;
  transition: background var(--transicao), color var(--transicao);
}
.menu-item:hover { background: var(--menu-ativo); color: var(--menu-texto-forte); }
.menu-item .ico { width: 20px; height: 20px; flex-shrink: 0; stroke-width: 1.7; }
.menu-item .rotulo { flex: 1; overflow: hidden; text-overflow: ellipsis; }

.menu-item.ativo { background: var(--menu-ativo); color: var(--menu-texto-forte); font-weight: 600; }
.menu-item.ativo::before {
  content: ""; position: absolute; left: -12px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 22px;
  background: var(--realce);
  border-radius: 0 3px 3px 0;
}

.menu-item .contador {
  font-size: 11px; font-weight: 600;
  padding: 2px 7px; border-radius: 20px;
  background: var(--erro); color: #fff;
}

.app.menu-fechado .menu-item { justify-content: center; padding: 11px 0; }
.app.menu-fechado .menu-item .rotulo,
.app.menu-fechado .menu-item .contador { display: none; }
.app.menu-fechado .menu-item.ativo::before { left: 0; }

/* Rótulo flutuante quando o menu está fechado. */
.app.menu-fechado .menu-item:hover::after {
  content: attr(data-titulo);
  position: absolute; left: calc(100% + 10px); top: 50%;
  transform: translateY(-50%);
  background: var(--texto); color: var(--fundo);
  padding: 6px 11px; border-radius: var(--raio-sm);
  font-size: 12.5px; font-weight: 500; white-space: nowrap;
  box-shadow: var(--sombra); z-index: 60;
}

.menu-rodape { padding: 14px 12px; border-top: 1px solid var(--menu-borda); flex-shrink: 0; }
.menu-usuaria {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 10px; border-radius: var(--raio-sm);
  color: var(--menu-texto-forte);
}
.menu-usuaria:hover { background: var(--menu-ativo); color: var(--menu-texto-forte); }
.menu-usuaria .avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--menu-ativo); border: 1px solid var(--menu-borda);
  font-size: 13px; font-weight: 600;
}
.menu-usuaria .dados { min-width: 0; line-height: 1.3; }
.menu-usuaria .dados strong { display: block; font-size: 13.5px; font-weight: 600; }
.menu-usuaria .dados span { font-size: 11.5px; color: var(--menu-texto); }
.app.menu-fechado .menu-usuaria .dados { display: none; }
.app.menu-fechado .menu-usuaria { justify-content: center; padding: 8px 0; }

/* ==========================================================================
   Barra superior
   ========================================================================== */

.topo {
  position: sticky; top: 0; z-index: 30;
  height: var(--altura-topo); flex-shrink: 0;
  display: flex; align-items: center; gap: 16px;
  padding: 0 28px;
  background: color-mix(in srgb, var(--superficie) 88%, transparent);
  backdrop-filter: saturate(150%) blur(8px);
  border-bottom: 1px solid var(--borda);
}

.botao-menu {
  width: 38px; height: 38px; flex-shrink: 0;
  display: grid; place-items: center;
  border: 1px solid var(--borda); border-radius: var(--raio-sm);
  background: var(--superficie); color: var(--texto-suave);
  cursor: pointer; transition: var(--transicao);
}
.botao-menu:hover { color: var(--marca); border-color: var(--marca-borda); }

.busca { position: relative; flex: 1; max-width: 460px; }
.busca input {
  width: 100%; height: 40px;
  padding: 0 14px 0 42px;
  border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--superficie-alt); color: var(--texto);
  font-family: inherit; font-size: 13.5px;
  transition: var(--transicao);
}
.busca input::placeholder { color: var(--texto-fraco); }
.busca input:focus {
  outline: none; background: var(--superficie);
  border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-suave);
}
.busca .ico {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--texto-fraco); pointer-events: none;
}

.topo-acoes { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.acao-icone {
  position: relative;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid transparent; border-radius: var(--raio-sm);
  background: var(--superficie-alt); color: var(--texto-suave);
  cursor: pointer; transition: var(--transicao);
}
.acao-icone:hover { color: var(--marca); border-color: var(--marca-borda); background: var(--marca-suave); }
.acao-icone .ponto {
  position: absolute; top: 8px; right: 9px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--erro); border: 2px solid var(--superficie);
}

/* ==========================================================================
   Cartões
   ========================================================================== */

.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  overflow: hidden;
}

.cartao-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 18px 20px 0;
}
.cartao-topo h2, .cartao-topo h3 {
  font-family: var(--fonte-titulo);
  font-size: 18px; line-height: 25px; font-weight: 700;
}
.cartao-topo .apoio { font-size: 12px; line-height: 15px; color: var(--texto-fraco); margin-top: 3px; }
.cartao-corpo { padding: 18px 20px; }
.cartao-rodape {
  padding: 14px 20px; border-top: 1px solid var(--borda);
  background: var(--superficie-alt);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 13px;
}

/* Indicador de desempenho. O fio dourado no topo é a assinatura visual. */
.kpi {
  position: relative;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 20px;
  overflow: hidden;
}
.kpi::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--realce), transparent 78%);
}
.kpi-titulo {
  display: flex; align-items: center; gap: 9px;
  font-size: 14px; line-height: 20px; font-weight: 400; color: var(--texto-suave);
}
.kpi-titulo .ico { width: 16px; height: 16px; color: var(--marca); }
.kpi-valor {
  font-family: var(--fonte-titulo);
  font-size: 21px; line-height: 28px; font-weight: 700;
  margin: 10px 0 4px;
}
.kpi-nota { font-size: 12px; line-height: 15px; color: var(--texto-fraco); }
.kpi-nota strong { color: var(--texto-suave); font-weight: 700; }
.kpi-nota.positiva strong { color: var(--ok); }
.kpi-nota.negativa strong { color: var(--erro); }

/* ==========================================================================
   Tabelas
   ========================================================================== */

.tabela-rolagem { overflow-x: auto; }

table.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }

table.tabela thead th {
  text-align: left; font-size: 14px; line-height: 20px; font-weight: 700;
  color: var(--texto);
  padding: 12px var(--espaco-celula);
  background: var(--superficie-alt);
  border-bottom: 1px solid var(--borda);
  white-space: nowrap;
}
table.tabela thead th:first-child { padding-left: 20px; }
table.tabela thead th:last-child { padding-right: 20px; }

table.tabela tbody td {
  padding: var(--espaco-celula);
  border-bottom: 1px solid var(--borda);
  vertical-align: middle;
  height: var(--altura-linha);
}
table.tabela tbody td:first-child { padding-left: 20px; }
table.tabela tbody td:last-child { padding-right: 20px; }
table.tabela tbody tr:last-child td { border-bottom: none; }
table.tabela tbody tr { transition: background var(--transicao); }
table.tabela tbody tr:hover { background: var(--superficie-alt); }

table.tabela .direita, .direita { text-align: right; }
table.tabela .principal { font-weight: 700; color: var(--texto); }
table.tabela .secundario { font-size: 12px; color: var(--texto-fraco); }

.celula-dupla { line-height: 1.35; }
.celula-dupla strong { display: block; font-weight: 700; }
.celula-dupla span { font-size: 12px; color: var(--texto-fraco); }

/* ==========================================================================
   Etiquetas de situação
   ========================================================================== */

.etiqueta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 20px;
  font-size: 12px; line-height: 15px; font-weight: 600; white-space: nowrap;
  background: var(--superficie-alt); color: var(--texto-suave);
  border: 1px solid var(--borda);
}
.etiqueta::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}
.etiqueta.sem-ponto::before { display: none; }
.etiqueta.ok { background: var(--ok-suave); color: var(--ok); border-color: transparent; }
.etiqueta.alerta { background: var(--alerta-suave); color: var(--alerta); border-color: transparent; }
.etiqueta.erro { background: var(--erro-suave); color: var(--erro); border-color: transparent; }
.etiqueta.marca { background: var(--marca-suave); color: var(--marca); border-color: transparent; }
.etiqueta.realce { background: var(--realce-suave); color: var(--realce); border-color: transparent; }

/* ==========================================================================
   Botões
   ========================================================================== */

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 18px;
  border: 1px solid transparent; border-radius: var(--raio-sm);
  font-family: inherit; font-size: 14px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
  transition: var(--transicao);
}
/* svg.ico eleva a especificidade para 0,0,2,1. Assim o ícone do botão mantém
   o tamanho certo mesmo dentro de blocos que definem ícones maiores. */
.botao svg.ico, .botao svg.ico-acao { width: 17px; height: 17px; flex-shrink: 0; }
/* Usada pelo botão do estado vazio. Classe separada para que nenhuma regra
   de contexto, nem uma versão antiga desta folha, consiga redimensioná-la. */
.ico-acao { width: 17px; height: 17px; flex-shrink: 0; }
.botao:disabled { opacity: .55; cursor: not-allowed; }

.botao-principal { background: var(--marca); color: var(--marca-texto); }
.botao-principal:hover { background: var(--marca-forte); color: var(--marca-texto); }

.botao-contorno { background: var(--superficie); color: var(--texto); border-color: var(--borda-forte); }
.botao-contorno:hover { border-color: var(--marca); color: var(--marca); background: var(--marca-suave); }

.botao-suave { background: var(--marca-suave); color: var(--marca); }
.botao-suave:hover { background: var(--marca); color: var(--marca-texto); }

.botao-texto { background: transparent; color: var(--texto-suave); padding: 0 10px; }
.botao-texto:hover { color: var(--marca); background: var(--marca-suave); }

.botao-perigo { background: var(--erro); color: #fff; }
.botao-perigo:hover { filter: brightness(.92); color: #fff; }

.botao-pequeno { height: 32px; padding: 0 12px; font-size: 12.5px; }
.botao-bloco { width: 100%; }

.acoes-linha { display: inline-flex; gap: 4px; }
.acao-tabela {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: none; border-radius: var(--raio-sm);
  background: transparent; color: var(--texto-fraco);
  cursor: pointer; transition: var(--transicao);
}
.acao-tabela:hover { background: var(--marca-suave); color: var(--marca); }
.acao-tabela.perigo:hover { background: var(--erro-suave); color: var(--erro); }
.acao-tabela .ico { width: 16px; height: 16px; }

/* ==========================================================================
   Formulários
   ========================================================================== */

.campo { margin-bottom: 16px; }
.campo label, .rotulo-campo {
  display: block; margin-bottom: 6px;
  font-size: 14px; line-height: 17px; font-weight: 600; color: var(--texto);
}
.campo .dica { font-size: 12px; line-height: 15px; color: var(--texto-fraco); margin-top: 5px; }
.campo .obrigatorio { color: var(--erro); }

.entrada, input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="search"], select, textarea {
  width: 100%; height: 42px;
  padding: 0 13px;
  border: 1px solid var(--borda-forte); border-radius: var(--raio-sm);
  background: var(--superficie); color: var(--texto);
  font-family: inherit; font-size: 14px;
  transition: var(--transicao);
}
textarea { height: auto; min-height: 96px; padding: 11px 13px; resize: vertical; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23948A90' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
  padding-right: 38px;
}
.entrada:focus, input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--marca);
  box-shadow: 0 0 0 3px var(--marca-suave);
}
input::placeholder, textarea::placeholder { color: var(--texto-fraco); }
input:disabled, select:disabled, textarea:disabled {
  background: var(--superficie-alt); color: var(--texto-fraco); cursor: not-allowed;
}

.linha-campos { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.linha-campos.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Interruptor.
   A regra .campo label define display:block e tem especificidade maior que
   .interruptor sozinho. Sem o seletor qualificado abaixo, o interruptor dentro
   de um .campo perde o inline-flex, o trilho volta a ser inline e a largura
   deixa de valer, virando um risco fino na tela. */
.interruptor,
label.interruptor,
.campo label.interruptor {
  display: inline-flex; align-items: center; gap: 11px;
  cursor: pointer; margin-bottom: 0; font-weight: 500;
}
.interruptor input { position: absolute; opacity: 0; width: 0; height: 0; }
.interruptor .trilho {
  display: block;
  width: 42px; min-width: 42px; height: 24px; flex-shrink: 0;
  background: var(--borda-forte); border-radius: 20px;
  position: relative; transition: var(--transicao);
}
/* Estado ligado precisa ser óbvio sem precisar comparar com outro. */
.interruptor .rotulo-estado { font-size: 14px; color: var(--texto); }
.interruptor .trilho::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; transition: var(--transicao);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
.interruptor input:checked + .trilho { background: var(--marca); }
.interruptor input:checked ~ span:not(.trilho) { font-weight: 600; }
.interruptor input:checked + .trilho::after { transform: translateX(18px); }
.interruptor input:focus-visible + .trilho { box-shadow: 0 0 0 3px var(--marca-suave); }

/* Seletor de cor com o valor ao lado. */
.campo-cor { display: flex; align-items: center; gap: 10px; }
.campo-cor input[type="color"] {
  width: 46px; height: 42px; padding: 3px;
  border: 1px solid var(--borda-forte); border-radius: var(--raio-sm);
  background: var(--superficie); cursor: pointer; flex-shrink: 0;
}
.campo-cor input[type="text"] { font-family: ui-monospace, "SF Mono", Menlo, monospace; text-transform: uppercase; }

/* Filtro em barra. */
.barra-filtros {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
  padding: 16px 20px; border-bottom: 1px solid var(--borda);
}
.barra-filtros .campo { margin-bottom: 0; }
.barra-filtros .campo label { font-size: 12px; font-weight: 600; color: var(--texto-suave); }

/* ==========================================================================
   Avisos
   ========================================================================== */

.aviso {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 16px; border-radius: var(--raio-sm);
  font-size: 14px; line-height: 20px; margin-bottom: 16px;
  border: 1px solid transparent;
}
.aviso .ico { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.aviso.ok { background: var(--ok-suave); color: var(--ok); }
.aviso.erro { background: var(--erro-suave); color: var(--erro); }
.aviso.alerta { background: var(--alerta-suave); color: var(--alerta); }
.aviso.info { background: var(--marca-suave); color: var(--marca); }
.aviso .fechar { margin-left: auto; background: none; border: none; color: inherit; cursor: pointer; opacity: .6; }
.aviso .fechar:hover { opacity: 1; }

/* Estado vazio. Convite para agir, nunca só um texto triste. */
.vazio { text-align: center; padding: 52px 24px; }
/* Filho direto de propósito: o botão de ação mora dentro de .vazio e o
   ícone dele não pode herdar este tamanho. */
.vazio > .ico {
  width: 46px; height: 46px; margin: 0 auto 14px;
  color: var(--texto-fraco); opacity: .55; stroke-width: 1.3;
}
.vazio h3 { font-family: var(--fonte-titulo); font-size: 18px; line-height: 25px; font-weight: 700; margin-bottom: 6px; }
.vazio p { color: var(--texto-fraco); font-size: 14px; line-height: 20px; margin: 0 auto 18px; max-width: 380px; }

/* ==========================================================================
   Gráficos
   ========================================================================== */

.grafico { width: 100%; min-height: 240px; }
.legenda { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 6px; }
.legenda span { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--texto-suave); }
.legenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* ==========================================================================
   Entrada no sistema
   ========================================================================== */

.tela-acesso {
  min-height: 100vh; display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--fundo);
}
.acesso-arte {
  position: relative; overflow: hidden;
  background: var(--menu-fundo); color: #fff;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 48px;
}
.acesso-arte::after {
  content: ""; position: absolute; right: -160px; bottom: -160px;
  width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, var(--realce-suave), transparent 68%);
}
.acesso-arte .marca {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--fonte-titulo); font-size: 22px; font-weight: 600;
  position: relative; z-index: 1;
}
.acesso-arte .marca .selo {
  width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--realce); color: var(--realce-texto, #241E22);
  font-size: 19px; font-weight: 700;
}
.acesso-frase {
  position: relative; z-index: 1;
  font-family: var(--fonte-titulo);
  font-size: 30px; font-weight: 500; line-height: 1.32;
  letter-spacing: -.02em; max-width: 440px;
}
.acesso-frase span { color: var(--realce); }
.acesso-nota { position: relative; z-index: 1; font-size: 13px; opacity: .62; }

.acesso-formulario {
  display: grid; place-items: center; padding: 40px 24px;
}
.acesso-caixa { width: 100%; max-width: 380px; }
.acesso-caixa h1 {
  font-family: var(--fonte-titulo); font-size: 24px; line-height: 37px;
  font-weight: 700; margin-bottom: 6px;
}
.acesso-caixa .apoio { color: var(--texto-suave); font-size: 14px; line-height: 20px; margin-bottom: 26px; }
.acesso-caixa .rodape { margin-top: 22px; font-size: 13px; color: var(--texto-fraco); text-align: center; }

/* ==========================================================================
   Configuração de aparência
   ========================================================================== */

.predefinidos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.predefinido {
  border: 1px solid var(--borda); border-radius: var(--raio-sm);
  padding: 14px; background: var(--superficie);
  cursor: pointer; text-align: left; transition: var(--transicao);
  font-family: inherit;
}
.predefinido:hover { border-color: var(--marca); box-shadow: var(--sombra); }
.predefinido .amostras { display: flex; gap: 5px; margin-bottom: 10px; }
.predefinido .amostras i { width: 26px; height: 26px; border-radius: 7px; display: block; }
.predefinido strong { display: block; font-size: 13.5px; font-weight: 600; }
.predefinido span { font-size: 12px; color: var(--texto-fraco); }

/* ==========================================================================
   Responsivo
   ========================================================================== */

@media (max-width: 1200px) {
  .grade-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade-2-1, .grade-1-2 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 960px) {
  .tela-acesso { grid-template-columns: minmax(0, 1fr); }
  .acesso-arte { display: none; }
  .grade-3, .grade-2 { grid-template-columns: minmax(0, 1fr); }
  .linha-campos, .linha-campos.tres { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .menu { transform: translateX(-100%); transition: transform var(--transicao); }
  .app.menu-aberto .menu { transform: translateX(0); box-shadow: 0 0 60px rgba(0, 0, 0, .35); }
  .conteudo, .app.menu-fechado .conteudo { margin-left: 0; }
  .topo { padding: 0 16px; }
  .area { padding: 18px 16px 32px; }
  .grade-4 { grid-template-columns: minmax(0, 1fr); }
  .busca { max-width: none; }
  .cabecalho-pagina { align-items: flex-start; }

  .cortina {
    position: fixed; inset: 0; z-index: 35;
    background: rgba(0, 0, 0, .45);
    opacity: 0; pointer-events: none; transition: opacity var(--transicao);
  }
  .app.menu-aberto .cortina { opacity: 1; pointer-events: auto; }
}

@media print {
  .menu, .topo, .barra-filtros, .acoes-linha { display: none !important; }
  .conteudo { margin-left: 0 !important; }
  .cartao { box-shadow: none; break-inside: avoid; }
}