/* ------------------------------------------------------------------
   Camada visual do PL Mulher Serra/ES.

   Fundo azul bebê no tema claro, acabamento mais macio, e as cores da
   marca mantidas: azul e rosa da logo, verde e amarelo da bandeira.

   Carrega por último, depois de style.css, brasil.css, rosa.css e
   logo.css, para vencer sem precisar de !important.
------------------------------------------------------------------ */

:root {
  /* Azul bebê: o fundo da casa. Bem lavado, para o texto escuro respirar. */
  --papel: #E8F1FB;
  --superficie: #FFFFFF;
  --superficie2: #F2F7FD;
  --linha: #CFE0F2;

  /* Tinta com viés azulado, para conversar com o fundo em vez de brigar. */
  --tinta: #12233A;
  --tinta2: #3E5570;
  --tinta3: #7089A6;

  /* O azul da logo entra como cor institucional. */
  --azul-logo: #1268B3;
  --rosa-logo: #FF6EA8;

  --sombra-1: 0 1px 2px rgba(18, 35, 58, .06), 0 2px 8px rgba(18, 35, 58, .06);
  --sombra-2: 0 2px 4px rgba(18, 35, 58, .07), 0 8px 24px rgba(18, 35, 58, .09);
  --curva: 12px;
}

/* No escuro o azul bebê vira azul-noite: mesma família, outro peso. */
@media (prefers-color-scheme: dark) {
  :root {
    --papel: #0C1622;
    --superficie: #14212F;
    --superficie2: #1A2937;
    --linha: #26394D;
    --tinta: #E6EEF7;
    --tinta2: #A9BDD2;
    --tinta3: #7C93AB;
    --azul-logo: #6FB2EF;
    --rosa-logo: #FF8FBC;
    --sombra-1: 0 1px 2px rgba(0, 0, 0, .3);
    --sombra-2: 0 8px 24px rgba(0, 0, 0, .38);
  }
}

:root[data-theme='dark'] {
  --papel: #0C1622;
  --superficie: #14212F;
  --superficie2: #1A2937;
  --linha: #26394D;
  --tinta: #E6EEF7;
  --tinta2: #A9BDD2;
  --tinta3: #7C93AB;
  --azul-logo: #6FB2EF;
  --rosa-logo: #FF8FBC;
  --sombra-1: 0 1px 2px rgba(0, 0, 0, .3);
  --sombra-2: 0 8px 24px rgba(0, 0, 0, .38);
}

:root[data-theme='light'] {
  --papel: #E8F1FB;
  --superficie: #FFFFFF;
  --superficie2: #F2F7FD;
  --linha: #CFE0F2;
  --tinta: #12233A;
  --tinta2: #3E5570;
  --tinta3: #7089A6;
  --azul-logo: #1268B3;
  --rosa-logo: #FF6EA8;
  --sombra-1: 0 1px 2px rgba(18, 35, 58, .06), 0 2px 8px rgba(18, 35, 58, .06);
  --sombra-2: 0 2px 4px rgba(18, 35, 58, .07), 0 8px 24px rgba(18, 35, 58, .09);
}

/* ---------- respiro ---------- */

body { background: var(--papel); }

/* ---------- cartões e superfícies ---------- */

.cartao-login,
.pm-cartao,
.pm-relatorio,
.painel > .conteudo,
.caixa-pesquisa {
  border-radius: var(--curva);
  box-shadow: var(--sombra-1);
  border-color: var(--linha);
}

.cartao-login {
  border-radius: 18px;
  box-shadow: var(--sombra-2);
  padding-block: 2rem;
}

.pm-tile {
  border-radius: 10px;
  box-shadow: var(--sombra-1);
  border-color: var(--linha);
  transition: transform .16s ease, box-shadow .16s ease;
}

.pm-tile:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); }

/* ---------- topo ---------- */

.topo {
  background: var(--superficie);
  border-bottom: 1px solid var(--linha);
  box-shadow: var(--sombra-1);
}

.marca { color: var(--azul-logo); letter-spacing: .01em; }
.marca span { color: var(--rosa-logo); }

/* ---------- abas ---------- */

.aba, .subaba, .assunto { border-radius: 999px; transition: all .16s ease; }

.aba.ativa { box-shadow: var(--sombra-1); }

.subaba:hover, .aba:hover { transform: translateY(-1px); }

/* ---------- botões ---------- */

.botao, button.act {
  border-radius: 9px;
  box-shadow: var(--sombra-1);
  transition: transform .14s ease, box-shadow .14s ease, opacity .14s ease;
}

.botao:hover, button.act:hover { transform: translateY(-1px); box-shadow: var(--sombra-2); }
.botao:active, button.act:active { transform: translateY(0); }

/* ---------- campos ---------- */

input, select, textarea {
  border-radius: 8px;
  background: var(--superficie);
  transition: border-color .14s ease, box-shadow .14s ease;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--azul-logo);
  box-shadow: 0 0 0 3px rgba(18, 104, 179, .16);
  outline: none;
}

@media (prefers-color-scheme: dark) {
  input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px rgba(111, 178, 239, .22); }
}

/* ---------- tabelas ---------- */

.pm-tabela { border-radius: 10px; overflow: auto; background: var(--superficie); box-shadow: var(--sombra-1); }
.pm-tabela thead th { background: var(--superficie2); position: sticky; top: 0; z-index: 1; }
.pm-tabela tbody tr { transition: background .12s ease; }
.pm-tabela tbody tr:hover { background: var(--superficie2); }

/* ---------- formulários em bloco ---------- */

.pm-form {
  border-radius: 10px;
  border-style: solid;
  border-color: var(--linha);
  background: var(--superficie2);
}

/* ---------- avisos ---------- */

.pm-alerta, .pm-nota, .aviso-backup { border-radius: 8px; }
.pm-nota { background: var(--superficie); }

/* ---------- a faixa do topo da página ---------- */
/* Mantém as quatro cores pedidas, só mais fina e discreta. */
body::before { height: 4px; }

/* ---------- movimento suave ---------- */

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .pm-tile:hover, .botao:hover, .aba:hover, .subaba:hover { transform: none; }
}

/* ---------- sem florzinha ---------- */
/* O rosa.css põe um ❀ animado ao lado da marca. A logo já é a marca:
   não precisa de enfeite ao lado dela. */
.marca-bloco::after { content: none !important; animation: none !important; }