/* Tema de fim de ano (tema_sazonal.py): campanha "Fim de ano no azul", em três fases (.tema-natal, .tema-ano-novo,
   .tema-janeiro). O site carrega este arquivo só com o tema ligado; o app o carrega sempre, e tudo aqui depende da
   classe .tema-fim-de-ano que web/tema.js põe no html. Detalhes discretos na paleta da marca: ouro (#ffc861),
   verde-limão, marfim e argila. Textos com contraste AA. */

/* Site: selo da fase na entrada */
.tema-fim-de-ano .tema-selo{display:inline-flex;align-items:center;gap:9px;padding:7px 15px 7px 11px;border:1px solid #ffc8614d;border-radius:999px;background:#ffc86112;color:#ffd99a;letter-spacing:.12em}
.tema-fim-de-ano .tema-selo::before{content:"";flex:none;width:12px;height:12px;background:#ffc861;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.tema-fim-de-ano .tema-selo b{color:#ffc861;font-weight:800;letter-spacing:.08em}
.tema-janeiro .tema-selo{border-color:#d8efc24d;background:#d8efc20d;color:#e3f3d3}
.tema-janeiro .tema-selo::before{display:none}
.tema-calendario{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tema-calendario .tema-calendario-dia{fill:#ea7a58;stroke:none}

/* Site: brilhos em volta da tela do produto, só decorativos. No Natal, nas quatro cores; na virada, ouro e marfim;
   em janeiro, nenhum (visual limpo). */
.tema-brilhos{position:absolute;inset:-28px -12px auto;height:calc(100% + 56px);pointer-events:none;z-index:3}
.tema-brilhos i{position:absolute;display:block;width:12px;height:12px;background:#ffc861;opacity:.8;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%)}
.tema-brilhos i:nth-child(1){top:2%;left:6%;width:16px;height:16px}
.tema-brilhos i:nth-child(2){top:9%;right:4%;width:10px;height:10px;background:#d8efc2}
.tema-brilhos i:nth-child(3){bottom:12%;left:-1%;width:9px;height:9px;background:#faf9f5}
.tema-brilhos i:nth-child(4){bottom:3%;right:10%;width:14px;height:14px;background:#ea7a58}
.tema-brilhos i:nth-child(5){top:46%;right:-2%;width:8px;height:8px}
.tema-ano-novo .tema-brilhos i:nth-child(1){width:22px;height:22px}
.tema-ano-novo .tema-brilhos i:nth-child(2),.tema-ano-novo .tema-brilhos i:nth-child(3){background:#faf9f5}
.tema-ano-novo .tema-brilhos i:nth-child(4){background:#ffc861;width:18px;height:18px}
.tema-janeiro .tema-brilhos{display:none}
@media(prefers-reduced-motion:no-preference){
  .tema-brilhos i{animation:tema-brilho 4.8s ease-in-out infinite}
  .tema-brilhos i:nth-child(2){animation-delay:-1.2s}.tema-brilhos i:nth-child(3){animation-delay:-2.6s}
  .tema-brilhos i:nth-child(4){animation-delay:-3.4s}.tema-brilhos i:nth-child(5){animation-delay:-.6s}
  .tema-ano-novo .tema-brilhos i{animation-duration:3.2s}
}
@keyframes tema-brilho{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:.95;transform:scale(1)}}
@media(max-width:767px){.tema-brilhos{inset:-18px -4px auto}.tema-brilhos i:nth-child(5){display:none}}
@media(forced-colors:active){.tema-brilhos{display:none}.tema-fim-de-ano .tema-selo::before{background:CanvasText}}

/* App: marca da fase na barra de cima e aviso na tela inicial */
.tema-fim-de-ano .brand .brand-mark-tema{width:42px;height:42px;margin:-3px -2px -1px}
.tema-fim-de-ano .login-story .brand-mark-tema{width:50px;height:50px}
.tema-aviso{display:flex;align-items:center;gap:12px;margin:0 0 20px;padding:8px 8px 8px 14px;border:1px solid #ffc86140;border-radius:18px;background:linear-gradient(100deg,#ea7a5826,#ffc86112 55%,#ffffff08);color:#f5f4ed}
.tema-aviso>img{flex:none;width:30px;height:30px}
.tema-aviso>.tema-calendario{width:26px;height:26px;color:#d8efc2}
.tema-janeiro .tema-aviso{border-color:#d8efc240;background:#ffffff0a}
.tema-aviso-abrir{flex:1;min-height:44px;padding:6px 0;border:0;background:none;color:inherit;font:inherit;font-size:14px;font-weight:650;line-height:1.4;text-align:left;cursor:pointer;text-decoration:underline;text-decoration-color:#ffc86199;text-underline-offset:4px}
.tema-janeiro .tema-aviso-abrir{text-decoration-color:#d8efc299}
.tema-aviso-abrir:hover{text-decoration-color:#ffc861}
.tema-aviso-abrir:focus-visible{outline:2px solid #ffd28a;outline-offset:3px;border-radius:6px}
.tema-aviso-fechar{flex:none}
@media(forced-colors:active){.tema-aviso{background:Canvas;border-color:CanvasText}}