/* ============================================================
   Camada Brasil — bandeira no topo, cor nos elementos e botões
   mais didáticos. Carregada depois do style.css nos dois sistemas.
   ============================================================ */

:root {
  --br-verde: #009739;
  --br-amarelo: #FEDD00;
  --br-azul: #012169;
  --br-rosa: #E0407B;
  --br-verde-escuro: #00713C;
  --br-amarelo-escuro: #C9A400;
}
@media (prefers-color-scheme: dark) {
  :root {
    --br-verde: #2FBF6B;
    --br-amarelo: #FFD84D;
    --br-azul: #5B8DEF;
    --br-rosa: #FF7FAE;
    --br-verde-escuro: #2FBF6B;
    --br-amarelo-escuro: #FFD84D;
  }
}

/* ---------- bandeira no topo ---------- */
.bandeira {
  width: 40px; height: 28px; border-radius: 3px; flex: none;
  box-shadow: 0 1px 4px rgba(0,0,0,.22);
  display: block;
}
.marca-bloco { display: flex; align-items: center; gap: .7rem; }

/* faixa mais viva e com brilho passando devagar */
body::before {
  height: 5px !important;
  background: linear-gradient(90deg,
    var(--br-verde) 0 25%, var(--br-amarelo) 25% 50%,
    var(--br-azul) 50% 75%, var(--br-rosa) 75% 100%) !important;
}
body::after {
  content: ""; position: fixed; top: 0; left: -30%; width: 30%; height: 5px; z-index: 51;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
  animation: brilho 7s linear infinite; pointer-events: none;
}
@keyframes brilho { to { left: 130%; } }
@media (prefers-reduced-motion: reduce) { body::after { animation: none; display: none; } }

/* ---------- botões didáticos ---------- */
.botao {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--br-verde) !important; color: #fff !important;
  border-radius: 6px !important; padding: .7rem 1.15rem !important;
  box-shadow: 0 2px 0 var(--br-verde-escuro);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.botao:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--br-verde-escuro); filter: brightness(1.06); }
.botao:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--br-verde-escuro); }
.botao::before { content: attr(data-icone); font-size: 1.05em; line-height: 1; }

/* variações por tipo de ação, para a pessoa reconhecer pela cor */
.botao.b-azul     { background: var(--br-azul) !important;   box-shadow: 0 2px 0 #00174d; }
.botao.b-azul:hover  { box-shadow: 0 4px 0 #00174d; }
.botao.b-amarelo  { background: var(--br-amarelo) !important; color: #3A2E00 !important; box-shadow: 0 2px 0 var(--br-amarelo-escuro); }
.botao.b-amarelo:hover { box-shadow: 0 4px 0 var(--br-amarelo-escuro); }
.botao.b-rosa     { background: var(--br-rosa) !important;   box-shadow: 0 2px 0 #a82558; }
.botao.b-rosa:hover  { box-shadow: 0 4px 0 #a82558; }
.botao.b-neutro   { background: var(--superficie2) !important; color: var(--tinta) !important; box-shadow: 0 2px 0 var(--linha); }

/* legenda embaixo do botão, explicando o que ele faz */
.acao-explicada { display: inline-flex; flex-direction: column; gap: .22rem; align-items: flex-start; }
.acao-explicada small { color: var(--tinta3); font-size: .72rem; line-height: 1.25; max-width: 22ch; }

/* ---------- abas coloridas ---------- */
.aba {
  border-radius: 6px; font-weight: 600;
  border-bottom: 3px solid transparent; transition: all .15s ease;
}
.aba:hover { border-bottom-color: var(--br-amarelo); }
.aba.ativa { background: var(--br-azul) !important; color: #fff !important; border-bottom-color: var(--br-amarelo); }

.subaba {
  border-radius: 999px !important; transition: all .15s ease;
}
.subaba:hover { background: var(--superficie2); }
.subaba.ativa { background: var(--br-verde) !important; color: #fff !important; }

/* ---------- cartões do painel, cada um com sua cor ---------- */
.pm-cartao, .pm-card, .cartao {
  border-top: 4px solid var(--br-verde);
  transition: transform .12s ease, box-shadow .12s ease;
}
.pm-cartao:hover, .pm-card:hover, .cartao:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.10); }
.pm-cartoes > *:nth-child(4n+2), .grade > *:nth-child(4n+2) { border-top-color: var(--br-amarelo); }
.pm-cartoes > *:nth-child(4n+3), .grade > *:nth-child(4n+3) { border-top-color: var(--br-azul); }
.pm-cartoes > *:nth-child(4n+4), .grade > *:nth-child(4n+4) { border-top-color: var(--br-rosa); }

/* números grandes com a cor da bandeira */
.pm-num, .pm-numero { color: var(--br-azul); font-weight: 800; }

/* ---------- barras de progresso ---------- */
.pm-barra { background: var(--superficie2); border-radius: 999px; overflow: hidden; }
.pm-barra > div {
  background: linear-gradient(90deg, var(--br-verde), var(--br-amarelo));
  transition: width .4s ease;
}

/* ---------- avisos ---------- */
.pm-aviso { border-left: 4px solid var(--br-amarelo); border-radius: 0 5px 5px 0; }
.pm-aviso.grave { border-left-color: var(--br-rosa); }

/* ---------- ajuda (i) mais visível ---------- */
.ajuda {
  border-color: var(--br-azul) !important; color: var(--br-azul) !important;
  font-weight: 800; transition: all .15s ease;
}
.ajuda:hover { background: var(--br-azul) !important; color: #fff !important; transform: scale(1.12); }

/* ---------- login com cara de Brasil ---------- */
.cartao-login { border-top: 5px solid var(--br-verde); }
.cartao-login h1 span { color: var(--br-verde); }
.cartao-login .bandeira { margin-inline: auto; width: 56px; height: 39px; }

.carregando { color: var(--br-azul); font-weight: 600; }

/* ============================================================
   Detalhes em rosa — o rosa deixa de ser só a quarta faixa e
   aparece nos contornos, marcadores e pequenos gestos da tela.
   ============================================================ */

::selection { background: color-mix(in srgb, var(--br-rosa) 30%, transparent); }

/* barra de rolagem */
* { scrollbar-color: var(--br-rosa) transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--br-rosa) 65%, transparent);
  border-radius: 999px; border: 2px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--br-rosa); background-clip: content-box; }

/* títulos de seção com um traço rosa embaixo */
.cabeca h2 { position: relative; padding-bottom: .4rem; }
.cabeca h2::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 2.4rem; height: 3px;
  border-radius: 999px; background: linear-gradient(90deg, var(--br-rosa), var(--br-amarelo));
}

/* marcadores de lista em rosa */
.resposta ul, .painel-lateral ul { list-style: none; padding-left: 1.1rem; }
.resposta ul li, .painel-lateral ul li { position: relative; padding-left: .3rem; }
.resposta ul li::before, .painel-lateral ul li::before {
  content: "◆"; position: absolute; left: -.95rem; color: var(--br-rosa); font-size: .7em; top: .35em;
}

/* campos com foco rosa */
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--br-rosa) !important; outline-offset: 1px;
  border-color: var(--br-rosa) !important;
}

/* linhas de tabela reagindo em rosa */
.pm-tabela tbody tr { transition: background .12s ease; }
.pm-tabela tbody tr:hover { background: color-mix(in srgb, var(--br-rosa) 8%, transparent); }
.pm-tabela thead th { border-bottom: 2px solid color-mix(in srgb, var(--br-rosa) 45%, transparent); }

/* botões pequenos ganham rosa no hover */
.mini:hover { border-color: var(--br-rosa) !important; color: var(--br-rosa) !important; }

/* caixas de escrever */
.caixa-pesquisa { border-top: 3px solid var(--br-rosa); }
.etiqueta-especialista {
  color: var(--br-rosa) !important; border-color: var(--br-rosa) !important;
  background: color-mix(in srgb, var(--br-rosa) 10%, transparent);
}

/* histórico */
.historico h3 { color: var(--br-rosa); }
.historico li { border-bottom-color: color-mix(in srgb, var(--br-rosa) 25%, transparent); }
.historico button:hover { color: var(--br-rosa); }

/* caixinhas de marcar */
input[type="checkbox"] { accent-color: var(--br-rosa); width: 1.05rem; height: 1.05rem; }

/* rodapé do cartão de login */
.cartao-login { border-bottom: 3px solid var(--br-rosa); }

/* ============================================================
   Fábrica de conteúdo — o botão na notícia e a janela do post
   ============================================================ */

.btn-conteudo {
  margin-top: .6rem; display: inline-flex; align-items: center; gap: .4rem;
  background: linear-gradient(135deg, var(--br-rosa), #ff8fb8);
  color: #fff; border: none; border-radius: 999px;
  padding: .42rem .95rem; font-size: .82rem; font-weight: 700;
  box-shadow: 0 2px 0 #a82558; transition: transform .12s ease, box-shadow .12s ease;
}
.btn-conteudo::before { content: attr(data-icone); }
.btn-conteudo:hover { transform: translateY(-1px); box-shadow: 0 4px 0 #a82558; }
.btn-conteudo:active { transform: translateY(1px); box-shadow: 0 1px 0 #a82558; }

.janela {
  position: fixed; inset: 0; z-index: 100; background: rgba(8,16,12,.55);
  display: grid; place-items: center; padding: 1rem; backdrop-filter: blur(3px);
}
.janela-caixa {
  background: var(--superficie); border-radius: 10px; position: relative;
  width: min(760px, 100%); max-height: 88vh; overflow-y: auto;
  padding: 1.6rem 1.5rem 1.4rem; border-top: 5px solid var(--br-rosa);
  box-shadow: 0 18px 60px rgba(0,0,0,.3);
}
.janela-fechar {
  position: absolute; top: .6rem; right: .8rem; background: none; border: none;
  font-size: 1.7rem; line-height: 1; color: var(--tinta3); padding: 0 .3rem;
}
.janela-fechar:hover { color: var(--br-rosa); }
.janela-titulo { margin: 0 0 .25rem; font-size: 1.25rem; }
.janela-sub { margin: 0 0 1.1rem; font-size: .85rem; color: var(--tinta3); }
.janela-sub a { color: var(--tinta2); }
.janela-acoes { margin-top: 1.2rem; display: flex; gap: .6rem; }

/* escolha do formato */
.formatos { display: grid; gap: .6rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .formatos { grid-template-columns: 1fr 1fr; } }
.formato {
  display: flex; flex-direction: column; gap: .2rem; text-align: left;
  background: var(--papel); border: 2px solid var(--linha); border-radius: 8px;
  padding: .9rem 1rem; transition: all .14s ease; color: var(--tinta);
}
.formato:hover { border-color: var(--br-rosa); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.08); }
.formato-icone { font-size: 1.5rem; }
.formato strong { font-size: 1rem; }
.formato small { color: var(--tinta3); font-size: .78rem; }

/* slides e cenas */
.slide { display: flex; gap: .8rem; padding: .8rem 0; border-bottom: 1px dashed var(--linha); }
.slide:last-of-type { border-bottom: none; }
.slide-num {
  flex: none; width: 3.1rem; text-align: center; font-weight: 800; font-size: 1.05rem;
  color: var(--br-rosa); display: flex; flex-direction: column; line-height: 1.15;
}
.slide-num small { font-size: .56rem; letter-spacing: .06em; color: var(--tinta3); font-weight: 600; }
.slide-txt strong { display: block; font-size: 1.02rem; margin-bottom: .15rem; }
.slide-txt p { margin: 0 0 .25rem; font-size: .9rem; color: var(--tinta2); }
.slide-corpo { font-size: .86rem !important; }
.slide-visual { display: block; font-size: .76rem; color: var(--tinta3); margin-top: .2rem; }

.bloco-copia {
  background: var(--superficie2); border-radius: 6px; padding: .85rem 1rem; margin-top: .8rem;
  border-left: 3px solid var(--br-amarelo);
}
.bloco-copia h4 { margin: 0 0 .35rem; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta3); }
.bloco-copia p { margin: 0; font-size: .9rem; white-space: pre-wrap; }

/* ============================================================
   Escolha do fundo — claro, escuro ou o do aparelho.
   O botão do usuário precisa ganhar da preferência do sistema,
   por isso os blocos data-theme vêm depois e repetem as cores.
   ============================================================ */

:root[data-theme="light"] {
  --papel: #F2F4F1; --superficie: #FFFFFF; --superficie2: #E8EDE7;
  --tinta: #10201A; --tinta2: #44544D; --tinta3: #6F8079; --linha: #CFD9CF;
  --alerta: #B03A2E;
  --br-verde: #009739; --br-amarelo: #FEDD00; --br-azul: #012169; --br-rosa: #E0407B;
  --br-verde-escuro: #00713C; --br-amarelo-escuro: #C9A400;
}
:root[data-theme="dark"] {
  --papel: #0A1410; --superficie: #101D18; --superficie2: #16241E;
  --tinta: #E7EFE9; --tinta2: #A5B7AE; --tinta3: #7D9088; --linha: #22352C;
  --alerta: #E3735E;
  --br-verde: #2FBF6B; --br-amarelo: #FFD84D; --br-azul: #5B8DEF; --br-rosa: #FF7FAE;
  --br-verde-escuro: #1F8F4E; --br-amarelo-escuro: #C9A400;
}

.troca-tema {
  display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px;
  background: var(--superficie2); border: 1px solid var(--linha); flex: none;
}
.troca-tema button {
  background: none; border: none; border-radius: 999px; padding: .28rem .5rem;
  font-size: .95rem; line-height: 1; opacity: .5; transition: all .14s ease;
}
.troca-tema button:hover { opacity: 1; transform: scale(1.12); }
.troca-tema button.ativa {
  opacity: 1; background: var(--br-rosa); box-shadow: 0 0 0 2px color-mix(in srgb, var(--br-rosa) 30%, transparent);
}

/* a janela de conteúdo também precisa acompanhar o fundo escolhido */
:root[data-theme="dark"] .janela { background: rgba(0,0,0,.65); }