/* ============================================================================
   OUTUBRO ROSA (prevenção do câncer de mama). SAZONAL, tudo aqui e em
   js/app/outubro.js. Só aparece em outubro: o script liga html.outubro-rosa
   apenas quando o mês é outubro, então em 1º de novembro some sozinho.
   Para remover de vez: apague este arquivo, js/app/outubro.js, o <link> e o
   <script> no index.html, o .or-jardim e o .or-faixa em views/login.html e as
   duas linhas marcadas "OUTUBRO ROSA" em js/app/auth.js.
   Mesmo desenho do Setembro Amarelo (girassóis), agora com flores e fitas rosa.
   ============================================================================ */
:root{
  --or-rosa:#ec4899; --or-rosa-forte:#be185d; --or-rosa-claro:#fce7f3;
  --or-f1:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2230%22%20rx%3D%2215%22%20ry%3D%2221%22%20fill%3D%22%23f9a8d4%22%20transform%3D%22rotate%280.0%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2230%22%20rx%3D%2215%22%20ry%3D%2221%22%20fill%3D%22%23f9a8d4%22%20transform%3D%22rotate%2872.0%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2230%22%20rx%3D%2215%22%20ry%3D%2221%22%20fill%3D%22%23f9a8d4%22%20transform%3D%22rotate%28144.0%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2230%22%20rx%3D%2215%22%20ry%3D%2221%22%20fill%3D%22%23f9a8d4%22%20transform%3D%22rotate%28216.0%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2230%22%20rx%3D%2215%22%20ry%3D%2221%22%20fill%3D%22%23f9a8d4%22%20transform%3D%22rotate%28288.0%2050%2050%29%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2212%22%20fill%3D%22%23be185d%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%227%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.6%22%20opacity%3D%22.5%22%2F%3E%3C%2Fsvg%3E");
  --or-f2:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2230%22%20rx%3D%2215%22%20ry%3D%2221%22%20fill%3D%22%23f472b6%22%20transform%3D%22rotate%280.0%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2230%22%20rx%3D%2215%22%20ry%3D%2221%22%20fill%3D%22%23f472b6%22%20transform%3D%22rotate%2860.0%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2230%22%20rx%3D%2215%22%20ry%3D%2221%22%20fill%3D%22%23f472b6%22%20transform%3D%22rotate%28120.0%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2230%22%20rx%3D%2215%22%20ry%3D%2221%22%20fill%3D%22%23f472b6%22%20transform%3D%22rotate%28180.0%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2230%22%20rx%3D%2215%22%20ry%3D%2221%22%20fill%3D%22%23f472b6%22%20transform%3D%22rotate%28240.0%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2230%22%20rx%3D%2215%22%20ry%3D%2221%22%20fill%3D%22%23f472b6%22%20transform%3D%22rotate%28300.0%2050%2050%29%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2212%22%20fill%3D%22%239d174d%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%227%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.6%22%20opacity%3D%22.5%22%2F%3E%3C%2Fsvg%3E");
  --or-f3:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2230%22%20rx%3D%2215%22%20ry%3D%2221%22%20fill%3D%22%23fbcfe8%22%20transform%3D%22rotate%280.0%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2230%22%20rx%3D%2215%22%20ry%3D%2221%22%20fill%3D%22%23fbcfe8%22%20transform%3D%22rotate%2872.0%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2230%22%20rx%3D%2215%22%20ry%3D%2221%22%20fill%3D%22%23fbcfe8%22%20transform%3D%22rotate%28144.0%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2230%22%20rx%3D%2215%22%20ry%3D%2221%22%20fill%3D%22%23fbcfe8%22%20transform%3D%22rotate%28216.0%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2230%22%20rx%3D%2215%22%20ry%3D%2221%22%20fill%3D%22%23fbcfe8%22%20transform%3D%22rotate%28288.0%2050%2050%29%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2212%22%20fill%3D%22%23db2777%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%227%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.6%22%20opacity%3D%22.5%22%2F%3E%3C%2Fsvg%3E");
  --or-fita:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23ec4899%22%20stroke-width%3D%224.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9.1%2021.4%2014.0%2011.6%22%2F%3E%3Cpath%20d%3D%22M14.9%2021.4%2010.0%2011.6%22%2F%3E%3Cpath%20d%3D%22M12%2012.6C8.4%208.8%207.7%206.0%209.2%204.2%2010.4%202.7%2013.6%202.7%2014.8%204.2c1.5%201.8.8%204.6-2.8%208.4z%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M12%2011.2C9.6%208.5%209.2%206.6%2010.1%205.4%22%20fill%3D%22none%22%20stroke%3D%22%23fbcfe8%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.9%22%2F%3E%3C%2Fsvg%3E");
}
.or-jardim, .or-faixa, .or-splash, .or-selo, .or-fab{ display:none }
html.outubro-rosa .or-jardim, html.outubro-rosa .or-splash{ display:block }
html.outubro-rosa .or-faixa, html.outubro-rosa .or-selo{ display:flex }
html.outubro-rosa .or-fab{ display:grid }

/* flores e fitas nas bordas do painel da marca (o centro fica para o título e os cartões) */
.or-jardim{ position:absolute !important; inset:0; z-index:0 !important; pointer-events:none; overflow:hidden }
.or-jardim i{ position:absolute; background:center / contain no-repeat; transform:rotate(var(--g, 0deg)); animation:or-balanca 7s ease-in-out infinite; filter:drop-shadow(0 4px 8px rgba(0,0,0,.18)) }
.or-jardim i:nth-child(1){ left:4%; top:14%; width:40px; height:40px; background-image:var(--or-f1); --g:-14deg; opacity:0.55; animation-delay:-0.7s }
.or-jardim i:nth-child(2){ left:70%; top:9%; width:30px; height:30px; background-image:var(--or-fita); --g:18deg; opacity:0.5; animation-delay:-1.4s }
.or-jardim i:nth-child(3){ left:86%; top:22%; width:46px; height:46px; background-image:var(--or-f2); --g:8deg; opacity:0.5; animation-delay:-2.1s }
.or-jardim i:nth-child(4){ left:88%; top:46%; width:28px; height:28px; background-image:var(--or-f3); --g:-20deg; opacity:0.45; animation-delay:-2.8s }
.or-jardim i:nth-child(5){ left:80%; top:70%; width:52px; height:52px; background-image:var(--or-f1); --g:12deg; opacity:0.5; animation-delay:-3.5s }
.or-jardim i:nth-child(6){ left:90%; top:88%; width:34px; height:34px; background-image:var(--or-fita); --g:-8deg; opacity:0.55; animation-delay:-4.2s }
.or-jardim i:nth-child(7){ left:62%; top:93%; width:30px; height:30px; background-image:var(--or-f2); --g:22deg; opacity:0.45; animation-delay:-4.9s }
.or-jardim i:nth-child(8){ left:30%; top:95%; width:44px; height:44px; background-image:var(--or-f3); --g:-12deg; opacity:0.5; animation-delay:-5.6s }
.or-jardim i:nth-child(9){ left:6%; top:84%; width:36px; height:36px; background-image:var(--or-f2); --g:16deg; opacity:0.5; animation-delay:-6.3s }
.or-jardim i:nth-child(10){ left:3%; top:62%; width:26px; height:26px; background-image:var(--or-fita); --g:-6deg; opacity:0.45; animation-delay:-7.0s }
.or-jardim i:nth-child(11){ left:46%; top:4%; width:26px; height:26px; background-image:var(--or-f3); --g:10deg; opacity:0.4; animation-delay:-7.7s }
.or-jardim i:nth-child(12){ left:93%; top:6%; width:26px; height:26px; background-image:var(--or-f1); --g:-18deg; opacity:0.45; animation-delay:-8.4s }
@keyframes or-balanca{ 0%, 100%{ transform:rotate(var(--g, 0deg)) translateY(0) } 50%{ transform:rotate(calc(var(--g, 0deg) + 8deg)) translateY(-5px) } }

/* faixa no cartão de entrar */
.or-faixa{ align-items:center; gap:var(--l-e3); margin-top:var(--l-e2); padding:12px 14px; border-radius:var(--l-raio-3); background:var(--or-rosa-claro); border:1px solid #f9a8d4 }
.or-faixa-fita{ flex:none; width:38px; height:38px; border-radius:50%; background:#fff var(--or-fita) center / 24px no-repeat; box-shadow:0 2px 6px rgba(190,24,93,.2) }
.or-faixa-txt{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.or-faixa-txt b{ font-size:var(--l-t-peq); font-weight:700; color:var(--or-rosa-forte) }
.or-faixa-txt span{ font-size:12px; line-height:1.45; color:#831843 }
body.theme-dark .or-faixa{ background:#3b1027; border-color:#831843 }
body.theme-dark .or-faixa-txt span{ color:#fbcfe8 } body.theme-dark .or-faixa-txt b{ color:#f9a8d4 }

/* transição de entrada: flores nas bordas do painel e o selo sob a saudação */
.or-splash{ position:absolute; inset:0; pointer-events:none; overflow:hidden }
.or-splash i{ position:absolute; background:center / contain no-repeat; opacity:.5; transform:rotate(var(--g, 0deg)) }
.or-splash i:nth-child(1){ left:3%; top:8%; width:56px; height:56px; background-image:var(--or-f1); --g:-12deg }
.or-splash i:nth-child(2){ left:12%; top:78%; width:44px; height:44px; background-image:var(--or-fita); --g:10deg }
.or-splash i:nth-child(3){ right:5%; top:12%; width:64px; height:64px; background-image:var(--or-f2); --g:14deg }
.or-splash i:nth-child(4){ right:9%; top:64%; width:48px; height:48px; background-image:var(--or-f3); --g:-8deg }
.or-splash i:nth-child(5){ right:22%; top:86%; width:38px; height:38px; background-image:var(--or-fita); --g:-18deg }
.or-splash i:nth-child(6){ left:40%; top:5%; width:34px; height:34px; background-image:var(--or-f3); --g:20deg }
.or-splash i:nth-child(7){ left:58%; top:90%; width:42px; height:42px; background-image:var(--or-f1); --g:6deg }
.or-splash i:nth-child(8){ right:32%; top:4%; width:30px; height:30px; background-image:var(--or-f2); --g:-6deg }
.or-selo{ align-items:center; gap:8px; width:max-content; margin-top:var(--l-e6); padding:6px 14px 6px 8px; border-radius:999px; background:rgba(255,255,255,.14); font-size:var(--l-t-peq); font-weight:600; color:#fff }
.or-selo i{ width:22px; height:22px; border-radius:50%; background:#fff var(--or-fita) center / 15px no-repeat }

/* fita fixa no canto, ao lado da acessibilidade; clicar faz chover flores */
.or-fab{ position:fixed; right:84px; bottom:24px; z-index:880; place-items:center; width:46px; height:46px; padding:0; border:1px solid #f9a8d4; border-radius:50%; background:#fff; box-shadow:var(--l-sombra-flutua); cursor:pointer; transition:transform var(--l-rapido) }
.or-fab:hover{ transform:translateY(-2px) rotate(-6deg) }
.or-fab:focus-visible{ outline:3px solid var(--or-rosa); outline-offset:2px }
.or-fab i{ width:30px; height:30px; background:var(--or-fita) center / contain no-repeat }
.or-chuva{ position:fixed; inset:0; z-index:9000; pointer-events:none; overflow:hidden }
.or-chuva i{ position:absolute; top:-90px; background:center / contain no-repeat; animation:or-cai linear forwards }
@keyframes or-cai{ to{ transform:translate(var(--or-desvio, 0px), 112vh) rotate(var(--or-giro, 360deg)) } }
.or-aviso-reduzido{ position:fixed; left:50%; bottom:90px; z-index:9001; transform:translateX(-50%); padding:10px 18px; border-radius:999px; background:var(--or-rosa-forte); color:#fff; font-weight:600 }

@media (prefers-reduced-motion:reduce){ .or-jardim i{ animation:none } }
body.reduced-motion .or-jardim i{ animation:none }
@media (max-width:640px){ .or-fab{ right:74px; bottom:16px } }
/* na tela de entrar o rodapé ocupa o canto: a fita sobe e fica acima da acessibilidade */
html.auth-anon .or-fab, body:has(#view-login.active) .or-fab{ right:24px; bottom:140px }
/* TV, totem e senhas emitidas: sem sino ao lado, o laço encosta no canto */
body:has(:is(#view-tv, #view-totem, #view-issued).active) .or-fab{ right:24px }
/* Totem: o laço vai para a faixa do rodapé, à esquerda, longe dos botões de toque. */
body:has(#view-totem.active) .or-fab{ right:auto; left:4vw; bottom:8px }