/* =========================================================================
   Central de Comunicados — Sistema de Tema (claro/escuro + 6 cores)
   Compartilhado por todas as páginas (index + comunicados).
   - Tema:  html[data-theme="light" | "dark"]
   - Cor :  html[data-accent="verde" | "azul" | "teal" | "roxo" | "laranja" | "vermelho"]
   Os valores são aplicados via variáveis CSS; o controle fica no botão
   flutuante injetado por theme.js. A escolha é salva em localStorage.
   ========================================================================= */

/* ===== Tokens base (tema claro · cor verde padrão) ===== */
:root{
  /* superfícies — variam com claro/escuro */
  --fundo:#eef1ef;
  --surface:#ffffff;
  --surface-2:#f5f8f6;
  --texto:#2a3d2f;
  --text-soft:#6e8074;
  --tinta:#1b2e21;
  --linha:#e3ece5;
  --footer-bg:linear-gradient(105deg, var(--side-3) 0%, var(--side-2) 55%, var(--side-1) 100%);
  --footer-text:#a9c2b2;
  --card-shadow:0 6px 24px rgba(0,40,20,.08);
  --item-glow:0 4px 16px rgba(34,184,101,.14);

  /* cor de destaque (accent) — sobrescrita por [data-accent] */
  --verde:#22B865;          /* accent vivo: ícones, títulos de seção, marcadores */
  --verde-esc:#1d8a4e;      /* accent forte: links e textos pequenos */
  --accent-bright:#2fd47a;  /* hover de elementos accent */
  --accent-soft:#EAF6EC;    /* fundo suave de tags / botões / callout-marca */
  --accent-soft-h:#dcefe2;  /* hover do fundo suave */
  --accent-soft-bd:#cfe6d6; /* borda do fundo suave */

  /* sidebar (sempre escura) — degradê varia com o accent */
  --side-1:#00481f; --side-2:#00391c; --side-3:#002b13;

  /* callouts semânticos (mantêm o significado independente do accent) */
  --co-blue-bg:#E5F0FA; --co-orange-bg:#FDF4E2; --co-red-bg:#FBEAEA;
}

/* ===== Cores de destaque ===== */
html[data-accent="azul"]{
  --verde:#2F86D6; --verde-esc:#1f6fb5; --accent-bright:#4f9fe6;
  --accent-soft:#E8F1FB; --accent-soft-h:#d7e8f8; --accent-soft-bd:#c5dcf0;
  --side-1:#073a63; --side-2:#06304f; --side-3:#04233b;
  --item-glow:0 4px 16px rgba(47,134,214,.16);
}
html[data-accent="teal"]{
  --verde:#16B3A6; --verde-esc:#0e8c82; --accent-bright:#2ad0c2;
  --accent-soft:#E3F6F4; --accent-soft-h:#cdeeea; --accent-soft-bd:#bfe6e1;
  --side-1:#064b45; --side-2:#053b37; --side-3:#042c29;
  --item-glow:0 4px 16px rgba(22,179,166,.16);
}
html[data-accent="roxo"]{
  --verde:#8257E5; --verde-esc:#6b46c9; --accent-bright:#9d78f0;
  --accent-soft:#EFEAFB; --accent-soft-h:#e1d8f6; --accent-soft-bd:#d6c9f2;
  --side-1:#34215e; --side-2:#2a1a4e; --side-3:#1f133b;
  --item-glow:0 4px 16px rgba(130,87,229,.18);
}
html[data-accent="laranja"]{
  --verde:#F08A24; --verde-esc:#c96f12; --accent-bright:#ff9f3f;
  --accent-soft:#FDF1E2; --accent-soft-h:#fae3c8; --accent-soft-bd:#f5d6b0;
  --side-1:#5e3408; --side-2:#4d2a05; --side-3:#3a2004;
  --item-glow:0 4px 16px rgba(240,138,36,.18);
}
html[data-accent="vermelho"]{
  --verde:#E24D4D; --verde-esc:#c43b3b; --accent-bright:#f06a6a;
  --accent-soft:#FCEAEA; --accent-soft-h:#f8d8d8; --accent-soft-bd:#f2c6c6;
  --side-1:#5e1717; --side-2:#4d1212; --side-3:#3a0d0d;
  --item-glow:0 4px 16px rgba(226,77,77,.18);
}

/* ===== Tema escuro ===== */
/* (declarado depois dos accents: --verde-esc passa a usar o accent vivo,
    que tem melhor contraste sobre superfícies escuras) */
html[data-theme="dark"]{
  --fundo:#0e1311;
  --surface:#161d19;
  --surface-2:#1d2723;
  --texto:#cdd8d0;
  --text-soft:#8ea096;
  --tinta:#e9f1ec;
  --linha:#26312b;
  --card-shadow:0 6px 24px rgba(0,0,0,.45);
  --item-glow:0 6px 20px rgba(0,0,0,.5);

  --verde-esc:var(--verde);        /* links/realces mais claros no escuro */
  --accent-soft:rgba(255,255,255,.06);
  --accent-soft-h:rgba(255,255,255,.12);
  --accent-soft-bd:rgba(255,255,255,.16);

  --co-blue-bg:rgba(59,138,207,.16);
  --co-orange-bg:rgba(232,161,58,.16);
  --co-red-bg:rgba(227,93,93,.18);
}

/* ===== Transição suave ao trocar de tema ===== */
body,.card,.item,.footer,.callout,.backbtn,.sidebar,.cal-panel a,.nav a,.tag{
  transition:background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
@media (prefers-reduced-motion:reduce){
  body,.card,.item,.footer,.callout,.backbtn,.sidebar,.cal-panel a,.nav a,.tag{transition:none;}
}

/* =========================================================================
   Header (masthead) em HTML — compartilhado pela Central e pelos comunicados.
   Acompanha tema e cor de destaque (mesmo degradê da sidebar).
   ========================================================================= */
.banner{position:relative; overflow:hidden;}
.masthead{
  position:relative; overflow:hidden; padding:30px 36px 34px; min-height:172px;
  background:linear-gradient(105deg, var(--side-3) 0%, var(--side-2) 42%, var(--side-1) 100%);
}
.masthead.has-icon{padding-right:150px;}
.masthead::before{ /* textura de pontos, esmaece para a direita */
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.7;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.4px);
  background-size:15px 15px;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,transparent 50%);
          mask-image:linear-gradient(90deg,#000 0%,transparent 50%);
}
.masthead::after{ /* brilho na cor de destaque, à direita */
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(135% 130% at 96% 24%, color-mix(in srgb, var(--verde) 42%, transparent), transparent 60%);
}
.masthead > *{position:relative; z-index:1;}
.masthead .mh-logo{display:block; width:96px; height:auto;}
.mh-kicker{margin:24px 0 0; font-size:11px; font-weight:bold; letter-spacing:1.8px;
  text-transform:uppercase; color:rgba(223,240,228,.72);}
.mh-kicker::before{content:"—  "; color:rgba(223,240,228,.5);}
.mh-title{margin:7px 0 0; font-size:clamp(27px,4.6vw,42px); font-weight:700;
  line-height:1.04; letter-spacing:-.5px; color:#fff;}
.mh-icon{position:absolute; top:50%; right:36px; transform:translateY(-50%); z-index:1;
  width:92px; height:92px; border-radius:50%; background:var(--verde);
  display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,.22);}
.mh-icon svg{width:46px; height:46px; stroke:#0e2417; stroke-width:1.8; fill:none;
  stroke-linecap:round; stroke-linejoin:round;}
@media (max-width:560px){
  .masthead{padding:22px 20px 26px; min-height:138px;}
  .masthead.has-icon{padding-right:92px;}
  .masthead .mh-logo{width:84px;}
  .mh-icon{width:60px; height:60px; right:18px;}
  .mh-icon svg{width:31px; height:31px;}
}

/* =========================================================================
   Aurora — manchas de cor suaves flutuando ao fundo (injetada por theme.js)
   Fica atrás de todo o conteúdo; acompanha o accent e o tema.
   ========================================================================= */
/* a cor base do fundo passa para o html; o body fica transparente para a
   aurora (fixa, z-index:-1) aparecer atrás do conteúdo da página. */
html{background-color:var(--fundo);}
body{background-color:transparent !important;}

.kbr-aurora{
  position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
}
.kbr-aurora b{
  position:absolute; display:block; border-radius:50%;
  filter:blur(64px); opacity:.38; will-change:transform;
}
.kbr-aurora b:nth-child(1){
  width:48vw; height:48vw; top:-12%; left:-8%;
  background:var(--verde); animation:kbrFloatA 26s ease-in-out infinite;
}
.kbr-aurora b:nth-child(2){
  width:40vw; height:40vw; top:24%; left:62%;
  background:var(--accent-bright); animation:kbrFloatB 32s ease-in-out infinite;
}
.kbr-aurora b:nth-child(3){
  width:44vw; height:44vw; bottom:-16%; left:14%;
  background:var(--verde-esc); animation:kbrFloatC 30s ease-in-out infinite;
}
.kbr-aurora b:nth-child(4){
  width:30vw; height:30vw; top:48%; left:34%;
  background:var(--verde); opacity:.26; animation:kbrFloatB 38s ease-in-out infinite reverse;
}
/* no escuro as manchas brilham um pouco mais, com blur maior */
html[data-theme="dark"] .kbr-aurora b{opacity:.30; filter:blur(74px);}
html[data-theme="dark"] .kbr-aurora b:nth-child(4){opacity:.20;}

@keyframes kbrFloatA{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(6vw,4vh) scale(1.12);}}
@keyframes kbrFloatB{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-5vw,5vh) scale(1.08);}}
@keyframes kbrFloatC{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(4vw,-5vh) scale(1.15);}}

/* acessibilidade: sem movimento p/ quem desativa animações (manchas ficam estáticas) */
@media (prefers-reduced-motion:reduce){
  .kbr-aurora b{animation:none !important;}
}

/* =========================================================================
   Textura de fundo — favo de mel (abelhas Koppert) + grão sutil
   Duas camadas estáticas atrás de tudo, sobre a aurora. CSS puro.
   Acompanham o accent (favo usa var(--verde) via máscara) e o tema.
   --- Para DESLIGAR: defina  html[data-fx="off"]  ou comente este bloco. ---
   ========================================================================= */
/* Favo de mel: a camada é pintada na cor de destaque e revelada apenas nas
   linhas dos hexágonos por uma máscara SVG. Bem fraca, só dá textura. */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:var(--verde); opacity:.09;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cpath fill='%23fff' d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cpath fill='%23fff' d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/svg%3E");
  -webkit-mask-size:38px 66px; mask-size:38px 66px;
  -webkit-mask-repeat:repeat;  mask-repeat:repeat;
}
/* no escuro o favo aparece um pouco mais para não sumir no fundo */
html[data-theme="dark"] body::before{opacity:.12;}

/* Grão: ruído SVG bem fraco, com mistura suave, tira o "banding" dos degradês */
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  opacity:.04; mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}
html[data-theme="dark"] body::after{opacity:.06;}

/* interruptor: html[data-fx="off"] remove as duas camadas */
html[data-fx="off"] body::before, html[data-fx="off"] body::after{display:none;}

/* =========================================================================
   Botão flutuante + popover (injetados por theme.js)
   ========================================================================= */
/* z-index acima do seletor de idioma (.kbr-lang, z-index:80) para que o
   popover de tema fique na frente do botão de idioma e não tenha a última
   cor (swatch) coberta por ele. */
.kbr-theme{position:fixed; right:18px; bottom:18px; z-index:90; font-family:'Segoe UI',Arial,sans-serif;}

.kbr-fab{
  width:48px; height:48px; border-radius:50%; border:none; cursor:pointer;
  background:var(--verde); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.28); transition:transform .15s ease, background-color .25s ease;
}
.kbr-fab:hover{transform:translateY(-2px) scale(1.04);}
.kbr-fab svg{width:23px; height:23px; stroke:#fff; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round;}

.kbr-pop{
  position:absolute; right:0; bottom:60px; width:220px;
  background:var(--surface); color:var(--texto); border:1px solid var(--linha);
  border-radius:14px; padding:16px; box-shadow:0 12px 34px rgba(0,0,0,.30);
  transform-origin:bottom right; transition:opacity .16s ease, transform .16s ease;
}
.kbr-pop[hidden]{display:none;}
.kbr-pop.closing{opacity:0; transform:scale(.94); pointer-events:none;}

.kbr-label{font-size:10.5px; font-weight:bold; letter-spacing:1px; text-transform:uppercase;
  color:var(--text-soft); margin:0 0 8px;}

.kbr-modes{display:flex; gap:8px; margin-bottom:16px;}
.kbr-mode{
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 6px; border:1px solid var(--linha); border-radius:9px; cursor:pointer;
  background:transparent; color:var(--texto); font-size:13px; font-weight:600;
  transition:border-color .15s, background-color .15s;
}
.kbr-mode:hover{border-color:var(--verde);}
.kbr-mode.active{border-color:var(--verde); background:var(--accent-soft); color:var(--verde-esc);}
.kbr-mode svg{width:16px; height:16px; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round;}

.kbr-swatches{display:grid; grid-template-columns:repeat(6,1fr); gap:8px;}
.kbr-sw{
  width:100%; aspect-ratio:1/1; border-radius:50%; cursor:pointer; padding:0;
  background:var(--sw); border:2px solid transparent; outline:2px solid transparent;
  transition:transform .12s ease, outline-color .12s ease;
}
.kbr-sw:hover{transform:scale(1.12);}
.kbr-sw.active{outline-color:var(--sw); border-color:var(--surface);}

@media (max-width:560px){
  .kbr-theme{right:14px; bottom:14px;}
  .kbr-fab{width:44px; height:44px;}
}

/* =========================================================================
   Menu lateral compartilhado (Central + comunicados)
   Marcação injetada por sidebar.js. Icon rail recolhido que expande no
   hover/foco; fundo translúcido (vidro fosco) que acompanha o tema/accent.
   ========================================================================= */
:root{ --sidebar-w:264px; --sidebar-collapsed:74px; }

/* desloca o conteúdo para a direita do menu fixo (sem empurrar no hover) */
html[data-sidebar="on"] body{ padding-left:var(--sidebar-collapsed); }

.sidebar{
  position:fixed; top:0; left:0; bottom:0; width:var(--sidebar-collapsed);
  background:color-mix(in srgb, var(--surface) 72%, transparent);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  color:var(--texto); padding:26px 18px; display:flex; flex-direction:column;
  border-right:1px solid var(--linha);
  box-shadow:2px 0 18px rgba(0,30,12,.08); z-index:30;
  overflow:hidden; white-space:nowrap;
  transition:width .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s ease;
}
.sidebar:hover, .sidebar:focus-within{width:var(--sidebar-w); box-shadow:8px 0 30px rgba(0,30,12,.16);}

/* marca: ícone (broto) quando recolhido; logotipo quando expandido */
.brand{position:relative; display:flex; align-items:center; height:38px; margin:2px 0 24px; padding-left:1px;}
.logo-mark{flex:0 0 auto; width:38px; height:38px; display:flex; align-items:center; justify-content:center; transition:opacity .2s;}
.logo-mark svg{width:30px; height:30px; stroke:var(--verde-esc); stroke-width:1.7; fill:none; stroke-linecap:round; stroke-linejoin:round;}
.brand .logo{position:absolute; left:0; top:50%; transform:translateY(-50%); width:150px; height:auto; opacity:0;
  filter:brightness(0) opacity(.82); transition:opacity .25s;}
html[data-theme="dark"] .brand .logo{filter:none;}
.sidebar:hover .logo-mark, .sidebar:focus-within .logo-mark{opacity:0;}
.sidebar:hover .brand .logo, .sidebar:focus-within .brand .logo{opacity:1;}

.nav-label{font-size:10.5px; font-weight:bold; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--text-soft); margin:0 8px 10px; opacity:0; transition:opacity .2s;}
.sidebar:hover .nav-label, .sidebar:focus-within .nav-label{opacity:1;}
.nav{display:flex; flex-direction:column; gap:4px;}
.nav a{display:flex; align-items:center; gap:0; text-decoration:none; color:var(--texto);
  font-size:14.5px; padding:10px; border-radius:9px; transition:background .15s, color .15s, gap .2s, padding .2s;}
.nav a:hover{background:var(--accent-soft); color:var(--verde-esc);}
.nav a svg{flex:0 0 18px; width:18px; height:18px; stroke:var(--verde-esc); stroke-width:2; fill:none;
  stroke-linecap:round; stroke-linejoin:round; transition:stroke .15s;}
.nav a:hover svg{stroke:var(--verde);}
.nav a span{opacity:0; max-width:0; overflow:hidden; transition:opacity .2s, max-width .25s;}
.nav a .ext{margin-left:auto; opacity:.5; font-size:12px;}
.sidebar:hover .nav a, .sidebar:focus-within .nav a{gap:11px; padding:11px 12px;}
.sidebar:hover .nav a span, .sidebar:focus-within .nav a span{opacity:1; max-width:180px;}
.sidebar:hover .nav a .ext, .sidebar:focus-within .nav a .ext{opacity:.5;}
.side-foot{margin-top:auto; padding:14px 8px 0; font-size:11.5px; color:var(--text-soft); line-height:1.5;
  border-top:1px solid var(--linha); opacity:0; transition:opacity .2s;}
.sidebar:hover .side-foot, .sidebar:focus-within .side-foot{opacity:1;}

/* calendário */
.cal{margin-top:24px; padding-top:18px; border-top:1px solid var(--linha); opacity:0; transition:opacity .2s;}
.sidebar:hover .cal, .sidebar:focus-within .cal{opacity:1;}
.cal-head{display:flex; align-items:center; justify-content:space-between; margin:0 2px 10px;}
.cal-title{font-size:11px; font-weight:bold; letter-spacing:.6px; text-transform:uppercase; color:var(--tinta); transition:opacity .2s ease;}
.cal-title.fade{opacity:0;}
.cal-nav{background:var(--accent-soft); border:none; color:var(--verde-esc); width:24px; height:24px;
  border-radius:6px; cursor:pointer; font-size:13px; line-height:1; display:flex; align-items:center; justify-content:center;}
.cal-nav:hover{background:var(--accent-soft-h);}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:2px; text-align:center;}
@keyframes calIn{from{opacity:0; transform:translateX(var(--cal-dx,0));} to{opacity:1; transform:translateX(0);}}
.cal-grid.anim{animation:calIn .26s cubic-bezier(.22,.61,.36,1);}
.cal-grid .dow{font-size:9px; color:var(--text-soft); font-weight:bold; padding:2px 0;}
.cal-grid .day{font-size:11.5px; color:var(--text-soft); padding:5px 0; border-radius:7px;}
.cal-grid .day.empty{color:transparent;}
.cal-grid .day.has{background:var(--verde); color:#fff; font-weight:bold; cursor:pointer;}
.cal-grid .day.has:hover{background:var(--accent-bright);}
.cal-grid .day.sel{box-shadow:0 0 0 2px var(--verde) inset;}
.cal-panel{margin-top:12px;}
.cal-panel .cp-date{font-size:9.5px; color:var(--text-soft); text-transform:uppercase; letter-spacing:.5px; margin:0 2px 6px;}
.cal-panel a{display:block; text-decoration:none; color:var(--texto); background:var(--accent-soft);
  border-radius:8px; padding:8px 10px; margin-bottom:6px; font-size:12.5px; line-height:1.35; transition:background .15s;}
.cal-panel a:hover{background:var(--accent-soft-h);}
.cal-panel a .cp-tag{display:block; font-size:8.5px; color:var(--verde-esc); text-transform:uppercase; letter-spacing:.4px; margin-bottom:2px;}

@media (prefers-reduced-motion:reduce){
  .cal-grid.anim{animation:none;}
  .cal-title{transition:none;}
  .sidebar,.brand .logo,.logo-mark,.nav a,.nav a span,.nav-label,.cal,.side-foot{transition:none;}
}

/* mobile: o menu vira uma barra no topo (desativa o icon rail) */
@media (max-width:860px){
  html[data-sidebar="on"] body{padding-left:0;}
  .sidebar{position:static; width:auto; flex-direction:column; padding:18px 16px;
    border-right:none; box-shadow:0 2px 14px rgba(0,30,12,.10); overflow:visible; white-space:normal;}
  /* no mobile a barra é fixa no topo: anula a expansão por hover/foco do icon rail */
  .sidebar:hover, .sidebar:focus-within{width:auto; box-shadow:0 2px 14px rgba(0,30,12,.10);}
  .logo-mark{display:none;}
  .brand{height:auto; margin:0 0 12px; padding-left:0;}
  .brand .logo{position:static; transform:none; opacity:1; width:140px;}
  .nav-label,.cal,.side-foot{opacity:1;}
  .nav{flex-direction:row; flex-wrap:wrap; gap:8px;}
  .nav a{gap:11px; padding:9px 12px; background:var(--accent-soft);}
  .nav a span{opacity:1; max-width:none; overflow:visible;}
  .nav a .ext{display:none;}
  .side-foot{display:none;}
  .cal{width:100%; max-width:300px; margin:16px auto 0;}
}
@media (max-width:560px){
  .nav a{font-size:13.5px;}
}

/* =========================================================================
   Mamangavas (bumblebees) voando no fundo — markup/animação em bee.js
   As abelhas ficam atrás do conteúdo: o cartão principal sobe para z-index:1.
   ========================================================================= */
.card{position:relative; z-index:1;}

.kbr-bee{position:fixed; left:0; top:0; z-index:0; width:42px; height:30px; pointer-events:none;
  will-change:transform; filter:drop-shadow(0 3px 4px rgba(0,0,0,.18));}
.kbr-bee svg{display:block; width:100%; height:100%; overflow:visible;}
.kbr-bee .bee-body{fill:var(--verde); transition:fill .25s ease;}  /* corpo acompanha a cor do tema */
.kbr-bee .wing{transform-box:fill-box; animation:beeWing .085s linear infinite;}
.kbr-bee .wing-t{transform-origin:50% 100%;}
.kbr-bee .wing-b{transform-origin:50% 0%;}
@keyframes beeWing{0%,100%{transform:scaleY(1);}50%{transform:scaleY(.5);}}
@media (prefers-reduced-motion:reduce){ .kbr-bee{display:none;} }

/* botão liga/desliga das abelhas (acima dos botões de tema e idioma) */
.kbr-bees{position:fixed; right:18px; bottom:138px; z-index:80; font-family:'Segoe UI',Arial,sans-serif;}
.kbr-bees .kbr-fab.off{background:var(--text-soft);}
.kbr-bees .kbr-fab.off svg{opacity:.85;}
@media (max-width:560px){ .kbr-bees{right:14px; bottom:122px;} }

/* =========================================================================
   Extras das páginas de comunicado (tempo de leitura + compartilhar) — comunicado.js
   ========================================================================= */
.doc-tools{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:14px 0 4px;}
.doc-read{display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--text-soft);}
.doc-read svg{width:15px; height:15px;}
.doc-read b{color:var(--texto); font-weight:700;}
.doc-share{display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  padding:7px 13px; border:1px solid var(--accent-soft-bd); border-radius:20px;
  background:var(--accent-soft); color:var(--verde-esc); font-size:13px; font-weight:600;
  font-family:inherit; transition:background-color .15s, border-color .15s, color .15s;}
.doc-share svg{width:15px; height:15px;}
.doc-share:hover{background:var(--accent-soft-h); border-color:var(--verde);}
.doc-share.ok{background:var(--verde); color:#fff; border-color:var(--verde);}

/* =========================================================================
   Impressão / salvar em PDF — esconde elementos de interface e limpa o layout
   ========================================================================= */
@media print{
  .sidebar, .kbr-theme, .kbr-lang, .kbr-bees, .kbr-bee, .kbr-aurora,
  .doc-tools, .backbtn, .featured{display:none !important;}
  html[data-sidebar="on"] body{padding-left:0 !important;}
  html, body{background:#fff !important;}
  body::before, body::after{display:none !important;}
  .card{box-shadow:none !important; background:#fff !important;
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;}
  .wrap{max-width:none !important; padding:0 !important;}
  .masthead{background:none !important; min-height:0 !important; padding:0 0 6px !important;}
  .masthead::before, .masthead::after{display:none !important;}
  .mh-kicker{color:#555 !important;}
  .mh-title{color:#000 !important;}
  .mh-logo{filter:brightness(0) !important;}
  .mh-icon{display:none !important;}
  .footer{background:none !important; border-top:1px solid #ccc;}
  .footer div{color:#000 !important;}
  a{color:#000 !important;}
}

/* =========================================================================
   Transição entre páginas (View Transitions API)
   Crossfade + leve deslize ao navegar entre páginas. Onde não há suporte,
   a navegação ocorre normalmente, sem efeito (degrada com segurança).
   ========================================================================= */
@view-transition{ navigation: auto; }
/* avanço: página atual sai para a esquerda, nova entra pela direita */
::view-transition-old(root){ animation: kbrSlideOut .30s cubic-bezier(.4,0,.2,1) both; }
::view-transition-new(root){ animation: kbrSlideIn .30s cubic-bezier(.4,0,.2,1) both; }
@keyframes kbrSlideOut{ from{ transform:translateX(0); } to{ transform:translateX(-100%); } }
@keyframes kbrSlideIn{ from{ transform:translateX(100%); } to{ transform:translateX(0); } }
/* voltar: sentido invertido (nova entra pela esquerda) */
:root[data-vt-back]::view-transition-old(root){ animation: kbrSlideOutBack .30s cubic-bezier(.4,0,.2,1) both; }
:root[data-vt-back]::view-transition-new(root){ animation: kbrSlideInBack .30s cubic-bezier(.4,0,.2,1) both; }
@keyframes kbrSlideOutBack{ from{ transform:translateX(0); } to{ transform:translateX(100%); } }
@keyframes kbrSlideInBack{ from{ transform:translateX(-100%); } to{ transform:translateX(0); } }
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root), ::view-transition-new(root){ animation:none; }
}