/* ===========================================================================
   TAREFIX — fundação de interface
   ===========================================================================

   Este arquivo tem UM trabalho: ser a única definição da "casca" de uma
   página — a largura, o cabeçalho em faixa roxa e o card branco.

   Por que ele existe: antes dele, `.cad-page` estava escrita à mão em 10
   templates, `.cad-hero` em 11 e o degradê da marca em 17 arquivos. Cada
   cópia foi feita a partir da anterior, com o comentário "mesmo padrão
   visual de empresas.html" — e mesmo assim as larguras já tinham divergido
   para 1100, 1200 e 1280. Não é possível manter um padrão que mora em onze
   lugares.

   REGRA PARA PÁGINA NOVA: use `.pagina` + `.pagina-hero` + `.cartao`.
   `<style>` inline no template é para o que é exclusivo daquela tela
   (uma grade, um estado, uma tabela própria), nunca para a casca.

   Carregado DEPOIS do style.css e do obrigacoes.css, de propósito: quem
   vier por último vence, e é aqui que o padrão deve ser decidido.

   Cuidado ao mexer: `.central-card` (style.css:3369) e `.st-card` (o CSS do
   BackOffice) NÃO estão nas regras abaixo, e isso é intencional. Os dois já
   têm definição própria, diferente desta; incluí-los aqui mudaria em
   silêncio a Central de Mensagens, os Lembretes, a Ajuda e todo o painel
   staff — telas que ninguém pediu para mexer.
   =========================================================================== */

:root {
  /* --- Cores da marca ---
     O style.css tem um :root antigo com 7 variáveis, mas NENHUM roxo entre
     elas — daí as centenas de hexadecimais soltos pelo projeto. Os roxos
     entram aqui.

     Atenção: hoje convivem DOIS roxos. #4c2882 é o do sistema do cliente e
     é o que vira oficial nas variáveis abaixo; #4D3693 é o do BackOffice e
     da Central de Ajuda. São próximos o bastante para parecerem o mesmo e
     diferentes o bastante para não serem. Unificar é dívida assumida, não
     assunto deste arquivo — quem for fazer isso precisa passar nas duas
     interfaces de uma vez. */
  --roxo: #4c2882;
  --roxo-escuro: #3b1f66;
  --roxo-claro: #5e3d91;

  /* O degradê que estava copiado à mão em 17 arquivos. */
  --degrade-marca: linear-gradient(120deg, var(--roxo-escuro) 0%, var(--roxo) 55%, var(--roxo-claro) 100%);

  /* --- Larguras ---
     Fluida com teto: em tela menor a página ocupa o que tem, em tela grande
     para de crescer. A folga lateral NÃO entra aqui — ela já vem do
     `padding` do <main> (style.css). Somar as duas daria margem dobrada. */
  --largura-pagina: 1280px;
  --largura-leitura: 820px;

  /* --- Superfície --- */
  --raio-cartao: 14px;
  --borda-cartao: 1px solid #eceaf2;
  --sombra-cartao: 0 4px 18px rgba(30, 20, 60, .06);
  --sombra-hero: 0 8px 24px rgba(76, 40, 130, .25);
}

/* ===========================================================================
   Casca da página
   ===========================================================================
   Os nomes `.cad-*` que aparecem junto são os LEGADOS: estão no HTML de dez
   telas que nasceram copiando umas às outras. Ficam aqui para o CSS
   duplicado poder ser apagado dos templates sem precisar reescrever todos
   os `class=` no mesmo commit — em `ver_empresa.html`, por exemplo,
   `.cad-card` aparece onze vezes.

   Enquanto o `<style>` inline de um template existir, ele continua vencendo
   (inline vem depois do <link>). Ou seja: adicionar este arquivo não muda
   nada sozinho. A mudança acontece quando o bloco inline é apagado.
   =========================================================================== */

.pagina,
.cad-page {
  max-width: var(--largura-pagina);
  margin: 0 auto;
  padding: 20px 22px 40px;
}

/* Texto corrido (artigos da ajuda). Linha longa demais cansa: o olho perde
   o começo da linha seguinte e a pessoa relê sem saber por quê. */
.pagina--leitura { max-width: var(--largura-leitura); }

/* Para tela que precisa da largura toda (uma grade grande, um split). */
.pagina--cheia { max-width: none; }

/* ===========================================================================
   Cabeçalho de página — a faixa roxa
   =========================================================================== */

.pagina-hero,
.cad-hero {
  background: var(--degrade-marca);
  border-radius: var(--raio-cartao);
  padding: 22px 26px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  box-shadow: var(--sombra-hero);
}

.pagina-hero h1,
.cad-hero h1 {
  margin: 0;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: .2px;
  display: flex;
  align-items: center;
  gap: 10px;
  /* Vinha só nas telas cujo título é nome de empresa ou de pessoa, que é
     onde estoura. Vale para todas: não muda nada em título curto e evita o
     texto vazar do cabeçalho quando é longo. */
  word-break: break-word;
}

/* O ícone é sempre laranja: é o contraste que faz o cabeçalho ser da marca
   e não uma faixa roxa qualquer. */
.pagina-hero h1 i,
.cad-hero h1 i {
  color: var(--laranja, #f7941d);
  font-size: 19px;
}

.pagina-hero-sub,
.cad-hero .cad-sub {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .75);
}

.pagina-hero-sub b,
.cad-hero .cad-sub b { color: #fdba74; }

/* Bloco de botões à direita do título. */
.pagina-hero-acoes,
.cad-acoes {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* ===========================================================================
   Card
   ===========================================================================
   A base é só a superfície. O espaçamento interno fica nas variantes porque
   os dois usos pedem coisas opostas: card que embrulha TABELA precisa de
   `overflow: hidden` (para a tabela não vazar sobre o canto arredondado) e
   nenhum padding; card que embrulha FORMULÁRIO precisa de padding e não
   pode ter overflow escondido, senão corta dropdown e popover.
   =========================================================================== */

.cartao,
.cad-card {
  background: #fff;
  border: var(--borda-cartao);
  border-radius: var(--raio-cartao);
  box-shadow: var(--sombra-cartao);
}

.cartao--tabela { overflow: hidden; }

.cartao--formulario {
  padding: 20px 24px;
  margin-top: 18px;
}

/* ===========================================================================
   Celular
   ===========================================================================
   O mesmo bloco estava repetido nos dez templates, sempre com o mesmo
   breakpoint (720px) e o mesmo valor.
   =========================================================================== */

@media (max-width: 720px) {
  .pagina,
  .cad-page { padding: 14px 14px 32px; }

  .pagina-hero,
  .cad-hero { padding: 18px; }
}