/* =====================================================================
   OASIS — O TEMA E AS DATAS FESTIVAS (1.03.91)

   As cores do tema chegam como variáveis `--t-*` no `:root`
   (partials/aparencia-head.php). As folhas de cada tela já usam
   `var(--t-cor, <a cor de antes>)`: sem tema, nada muda.

   Aqui ficam:
     1. o tema do DONO dentro do perfil (`.tema-local`)
     2. o fundo com a cor do tema (`html[data-fundo="suave"]`)
     3. a logo, a faixa, a pré-visualização e as bandeirinhas das datas
     4. os ícones enviados pelo admin (imagem no lugar do desenho)
   ===================================================================== */

/* ── 1. O perfil de outra pessoa com o tema DELA ──────────────────────
   O elemento raiz do perfil recebe as `--t-*` do dono no `style`. As
   variáveis de cada tela que moram no `:root` já foram calculadas com o
   tema de quem VISITA; declaradas de novo aqui, elas passam a valer com
   as `--t-*` do dono para todo o miolo do perfil. */
.tema-local {
  --ag-azul: var(--t-cor, #1D5EF6); --ag-azul-esc: var(--t-cor, #1448D8); --ag-azul-claro: var(--t-50, #ECF1FE);
  --cm-azul: var(--t-cor, #1454FD); --cm-azul-esc: var(--t-cor, #0B3FD6); --cm-azul-claro: var(--t-50, #EAF1FE);
  --gl-azul: var(--t-cor, #0156FD); --gl-azul-esc: var(--t-cor, #0044D8); --gl-azul-claro: var(--t-50, #EAF1FF);
  --mp-azul: var(--t-cor, #0550F8); --mp-azul-bolha: var(--t-cor, #0F58F4); --mp-azul-txt: var(--t-cor, #0B47EE); --mp-azul-claro: var(--t-100, #E5EEFE);
  --mu-roxo: var(--t-cor, #2B24F6); --mu-roxo-bt: var(--t-cor, #5659FB); --mu-roxo-claro: var(--t-50, #F1F3FE); --mu-tag: var(--t-50, #F3F5FE);
  --nx-azul: var(--t-cor, #1D4ED8); --nx-azul-claro: var(--t-50, #EEF3FF);
  --oa-azul: var(--t-cor, #1D4ED8); --oa-azul-esc: var(--t-cor, #1E40AF); --oa-azul-50: var(--t-50, #EFF6FF); --oa-azul-100: var(--t-100, #DBEAFE);
  --trb-azul: var(--t-cor, #1D4ED8); --trb-azul2: var(--t-cor, #2563EB); --trb-azul-f: var(--t-50, #E8EFFE);
  --vf-blue: var(--t-cor, #2563eb); --vf-blue-dark: var(--t-cor, #1d4ed8); --vf-blue-light: var(--t-50, #eff6ff); --vf-indigo: var(--t-cor, #4f46e5);
  --blue: var(--t-cor, #2563eb);
}
/* (A capa do perfil sem foto já usa `--t-capa`: segue o tema do dono sozinha.) */

/* ── 2. O fundo, a barra do topo e o modo escuro (1.03.92) ─────────────
   `data-fundo`, `data-barra`, `data-letras` e `data-modo` chegam no <html>
   pelo aparencia-head.php. As cores são as --t-* do tema da pessoa. */

/* O fundo das telas (e a coluna da esquerda na web). */
html[data-fundo] {
  --oa-bg: var(--t-fundo); --ag-fundo: var(--t-fundo); --mp-fundo: var(--t-fundo); --trb-fundo: var(--t-fundo);
  --mu-fundo: var(--t-fundo); --cm-fundo: var(--t-fundo); --pf2-fundo: var(--t-fundo);
}
html[data-fundo] body,
html[data-fundo] body:has(.ow-shell) { background: var(--t-fundo) !important; }
@media (min-width: 1024px) {
  html[data-fundo] .ow-shell,
  html[data-fundo] .ow-shell.ow-shell--pf2 { background: transparent !important; }
  html[data-fundo] .ow-shell > .ow-lado { background: var(--t-fundo-lado) !important; }
}

/* A barra do topo: web (.ow-topo), celular (.oa-topo) e as telas antigas
   (.vf-topbar). Letras, busca e botões seguem a cor da barra. */
html[data-barra] .ow-topo,
html[data-barra] .oa-topo,
html[data-barra] .vf-topbar {
  background: var(--t-barra) !important; color: var(--t-barra-tx);
  border-bottom-color: var(--t-barra-linha) !important;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-barra] .ow-topo__marca b,
html[data-barra] .oa-topo__nome,
html[data-barra] .vf-topbar-brand-name { color: var(--t-barra-tx) !important; }
html[data-barra] .oa-topo__assinatura { color: var(--t-barra-tx) !important; opacity: .74; }
html[data-barra] .oa-topo__acao,
html[data-barra] .oa-topo__eu { color: var(--t-barra-tx) !important; }
html[data-barra] .ow-busca { background: var(--t-barra-campo); color: var(--t-barra-campo-tx); }
html[data-barra] .ow-busca input { color: var(--t-barra-tx); }
html[data-barra] .ow-busca input::placeholder { color: var(--t-barra-campo-tx); opacity: 1; }
html[data-barra] .ow-busca kbd { background: transparent; border-color: var(--t-barra-campo-tx); color: var(--t-barra-campo-tx); opacity: .8; }
html[data-barra] .ow-busca:focus-within { background: var(--t-sup, #fff); border-color: var(--t-barra-criar); color: var(--t-tx3, #94A3B8); }
html[data-barra] .ow-busca:focus-within input { color: var(--t-tx, #0F172A); }
html[data-barra] .ow-icone { background: var(--t-barra-bt); color: var(--t-barra-tx); }
html[data-barra] .ow-icone:hover { background: var(--t-barra-bt); filter: brightness(1.12); }
html[data-barra] .ow-icone__ponto,
html[data-barra] .oa-topo__ponto { border-color: var(--t-barra) !important; }
html[data-barra] .ow-eu { border-color: var(--t-barra-bt); color: var(--t-barra-tx); }
html[data-barra] .ow-eu:hover { background: var(--t-barra-bt); }
html[data-barra] .ow-criar__bt { background: var(--t-barra-criar) !important; color: var(--t-barra-criar-tx) !important; box-shadow: none; }
html[data-barra] .ow-criar__bt:hover { filter: brightness(1.06); }

/* O modo escuro: os neutros vêm das --t-* (codemod da 1.03.92); aqui
   ficam os controles do navegador e o que não é cor de folha. */
html[data-modo="escuro"] { color-scheme: dark; }
html[data-modo="escuro"] body { color: var(--t-tx); }
html[data-modo="escuro"] ::selection { background: var(--t-200); color: var(--t-tx); }
html[data-modo="escuro"] input::placeholder,
html[data-modo="escuro"] textarea::placeholder { color: var(--t-tx4); }
html[data-modo="escuro"] .oa-avatar { background-color: var(--t-100); color: var(--t-cor-tx); }
/* Fotos e logos com fundo branco não "acendem" no escuro. */
html[data-modo="escuro"] img:not([src$=".svg"]):not(.fx-img) { filter: brightness(.94); }
html[data-modo="escuro"] .fx-logo > img, html[data-modo="escuro"] .ow-topo__marca img { filter: none; }

/* ── 3. As datas festivas ─────────────────────────────────────────── */

/* A logo com o enfeite da data por cima (gorro, máscara, orelhas…). */
.fx-logo { position: relative; display: inline-block; flex: 0 0 auto; width: var(--fx-logo, 34px); height: var(--fx-logo, 34px); line-height: 0; }
.fx-logo > img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: contain; }
.fx-logo__acess {
  position: absolute; z-index: 1; pointer-events: none; display: block;
  right: calc(var(--fx-logo, 34px) * -.42); top: calc(var(--fx-logo, 34px) * -.46);
  width: calc(var(--fx-logo, 34px) * .98); height: calc(var(--fx-logo, 34px) * .74);
}
.fx-logo__acess svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 1px 1px rgba(15, 23, 42, .18)); }
.ow-topo__marca .fx-logo, .oa-topo__marca .fx-logo { border-radius: 10px; }
.oa-topo__marca .fx-logo { border-radius: 11px; }

/* Ícone desenhado da data: as cores vêm de --fx-1/--fx-2 (o `style` de
   cada forma); o traço segue a cor do texto, como os outros ícones. */
.fx-ic { overflow: visible; }
/* Ícone enviado pelo admin (imagem). */
img.fx-img { display: block; flex: 0 0 auto; object-fit: contain; }
.ow-shell > .ow-lado .ow-nav > a img.fx-img { width: 21px; height: 21px; }

/* A faixa da data: logo abaixo do topo, fecha no ×. */
.fx-faixa {
  position: relative; z-index: 30;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 42px; padding: 7px 48px 7px 16px;
  background: var(--fx-faixa, linear-gradient(90deg, var(--fx-1), var(--fx-2)));
  color: #fff; font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 13.5px; line-height: 1.35;
}
.fx-faixa[hidden] { display: none !important; }
.fx-faixa__ic { display: grid; place-items: center; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 9px; background: rgba(255, 255, 255, .94); color: #1F2A44; }
.fx-faixa__ic svg { display: block; width: 19px; height: 19px; }
.fx-faixa__txt { display: block; min-width: 0; font-weight: 600; text-shadow: 0 1px 1px rgba(0, 0, 0, .18); overflow-wrap: anywhere; }
.fx-faixa__link {
  display: inline-flex; align-items: center; flex: 0 0 auto; height: 28px; padding: 0 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .96); color: #1F2A44 !important; font-size: 12.5px; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.fx-faixa__link:hover { background: #fff; }
.fx-faixa__fechar {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 9px;
  background: transparent; color: #fff; cursor: pointer;
}
.fx-faixa__fechar:hover, .fx-faixa__fechar:focus-visible { background: rgba(255, 255, 255, .18); outline: none; }
.fx-faixa__enf {
  display: inline; flex: 0 0 auto; padding: 0; border: 0; background: none; font: inherit; font-size: 12px; font-weight: 600;
  color: rgba(255, 255, 255, .92); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; white-space: nowrap;
}

/* Na web a faixa fica presa embaixo do topo, e a coluna da esquerda
   (fixa) desce junto: nada fica escondido atrás dela. */
@media (min-width: 1024px) {
  .fx-faixa { position: sticky; top: var(--ow-topo-h, 64px); z-index: 60; }
  .ow-shell > .ow-lado { top: calc(var(--ow-topo-h, 64px) + var(--fx-faixa-h, 0px)); }
}

/* A pré-visualização (o admin vendo uma data antes dela chegar). */
.fx-previa {
  position: fixed; left: 50%; bottom: 16px; z-index: 95; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 24px);
  padding: 8px 8px 8px 14px; border-radius: 999px; background: #0F172A; color: #fff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .35); font: 600 13px/1.3 'Plus Jakarta Sans', system-ui, sans-serif;
}
.fx-previa b { display: inline; color: #FDE68A; }
.fx-previa span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-previa a { display: inline-flex; align-items: center; flex: 0 0 auto; height: 30px; padding: 0 12px; border-radius: 999px; background: #fff; color: #0F172A !important; font-weight: 700; text-decoration: none; }
html.mu-tem-player .fx-previa { bottom: 88px; }

/* O desenho dos enfeites (festa.js). Nunca atrapalha o clique. */
.fx-tela { position: fixed; inset: 0; z-index: 45; pointer-events: none; }

/* Bandeirinhas: um varal embaixo do topo. */
.fx-varal {
  position: fixed; left: 0; right: 0; top: var(--fx-varal-top, 64px); z-index: 44; height: 30px;
  pointer-events: none; overflow: hidden;
}
.fx-varal svg { display: block; width: 100%; height: 30px; }
.fx-varal .fx-band { transform-origin: 50% 0; animation: fx-balanca 3.6s ease-in-out infinite alternate; }
.fx-varal .fx-band:nth-child(3n) { animation-delay: -1.2s; }
.fx-varal .fx-band:nth-child(3n+1) { animation-delay: -2.4s; }
@keyframes fx-balanca { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@media (max-width: 1023px) { .fx-varal { top: var(--fx-varal-top-m, 65px); } }

@media (max-width: 640px) {
  .fx-faixa { justify-content: flex-start; gap: 10px; padding: 8px 44px 8px 12px; font-size: 12.8px; }
  .fx-faixa__ic { width: 26px; height: 26px; }
  .fx-faixa__enf { display: none; }
}
@media (max-width: 440px) {
  .fx-faixa { flex-wrap: wrap; row-gap: 6px; }
  .fx-faixa__txt { flex: 1 1 calc(100% - 40px); min-width: 0; }
  .fx-faixa__link { margin-left: 38px; }
}
@media (max-width: 360px) {
  .fx-faixa { font-size: 12.3px; }
  .fx-previa { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-varal .fx-band { animation: none; }
}
@media print {
  .fx-faixa, .fx-previa, .fx-tela, .fx-varal { display: none !important; }
}