/* PAPIRO GLOBAL (Tema Céu) — a ÚNICA definição das cores e das camadas do papiro do software inteiro.
   Quem pinta qualquer coisa de papiro (barra superior, menu lateral, folhas das ferramentas, botões,
   janelinhas, login, formulários…) usa estas variáveis, nunca um degradê copiado. Pra mudar o papiro
   em todo lugar, é só mexer AQUI (e regerar o JPEG do Relatório: papiro-folha.js).
   O JS lê estas mesmas variáveis (papiro.js), então imagens salvas/PDF acompanham a tela.
   Mesmo papiro do site Falando de Astrologia (mais claro = mais contraste pra tinta). */
:root {
    --papiro-topo: #e6d3a0;
    --papiro-meio: #dcc590;
    --papiro-base: #d2b980;
    /* cor chapada (usada onde o recorte automático de imagem precisa achar a borda) */
    --papiro-chapado: var(--papiro-meio);
    --papiro-gradiente: linear-gradient(180deg, var(--papiro-topo) 0%, var(--papiro-meio) 50%, var(--papiro-base) 100%);
    /* folhas grandes: luz no canto, sombra no canto oposto, fibras horizontais e verticais */
    --papiro-fundo:
        radial-gradient(ellipse at 12% 6%, rgba(255,244,210,0.6) 0%, transparent 40%),
        radial-gradient(ellipse at 90% 96%, rgba(110,70,30,0.22) 0%, transparent 45%),
        repeating-linear-gradient(0deg, rgba(120,85,40,0.07) 0px, rgba(120,85,40,0.07) 1px, transparent 1px, transparent 6px),
        repeating-linear-gradient(90deg, rgba(150,110,60,0.05) 0px, rgba(150,110,60,0.05) 2px, transparent 2px, transparent 27px),
        var(--papiro-gradiente);
    /* peças pequenas (botões, janelinhas, menus): só um brilho leve e as fibras horizontais */
    --papiro-fundo-simples:
        radial-gradient(ellipse at 15% 20%, rgba(255,244,210,0.45) 0%, transparent 50%),
        repeating-linear-gradient(0deg, rgba(120,85,40,0.07) 0px, rgba(120,85,40,0.07) 1px, transparent 1px, transparent 6px),
        var(--papiro-gradiente);
}

/* TEMA CÉU — o PAPEL (só aqui é do tema): o painel de qualquer ferramenta migrada e os menus flutuantes viram folha de papiro
   com a borda rasgada. As formas e as cores do conteúdo vêm de componentes.css + temas.css. */
body.tema-ceu .painel {
    background: var(--papiro-fundo) !important;
    clip-path: polygon(0 4px, 6% 0, 15% 3px, 27% 0, 38% 4px, 50% 1px, 63% 4px, 75% 0, 88% 3px, 95% 0, 100% 4px, calc(100% - 3px) 3%, 100% 8%, calc(100% - 4px) 14%, 100% 20%, calc(100% - 3px) 27%, 100% 34%, calc(100% - 4px) 42%, 100% 50%, calc(100% - 3px) 58%, 100% 66%, calc(100% - 4px) 74%, 100% 82%, calc(100% - 3px) 90%, 100% calc(100% - 4px), 93% calc(100% - 1px), 82% 100%, 70% calc(100% - 4px), 57% calc(100% - 1px), 45% 100%, 33% calc(100% - 4px), 20% calc(100% - 1px), 9% 100%, 0 calc(100% - 4px), 4px 92%, 0 82%, 3px 70%, 0 58%, 4px 46%, 0 34%, 3px 22%, 0 10%);
}
/* Menu flutuante no Céu: o papel (com a borda quebrada) é o ::after; a SOMBRA é um drop-shadow do menu inteiro, que acompanha a forma recortada
   (clip-path no próprio elemento cortaria a sombra, por isso o recorte fica só no papel). */
body.tema-ceu .menu-flutuante {
    background: transparent !important; box-shadow: none; position: absolute; filter: drop-shadow(3px 6px 6px rgba(0, 0, 10, .75));
}
body.tema-ceu .menu-flutuante::after {
    content: ''; position: absolute; inset: -1px 0; z-index: -1; pointer-events: none; background: var(--papiro-fundo-simples);
    clip-path: polygon(0 4px, 8% 0, 22% 3px, 38% 0, 55% 4px, 70% 1px, 85% 3px, 100% 0, calc(100% - 3px) 30%, 100% 60%, calc(100% - 3px) 100%, 85% calc(100% - 3px), 65% 100%, 45% calc(100% - 4px), 25% 100%, 8% calc(100% - 3px), 0 100%, 3px 60%, 0 30%);
}

/* TEMA CÉU — barras de botões (superior e os dois grupos flutuantes da mandala): o papiro é UMA folha por barra, MAIOR que ela, e passa POR FORA
   das linhas duplas — a borda quebrada fica sempre por fora. O papel vai no ::before; as linhas duplas no ::after (por cima do papel). */
body.tema-ceu #top-bar, body.tema-ceu #mandala-actions-overlay, body.tema-ceu #mandala-controls-overlay, body.tema-ceu #cabecalho-barra-mandala, body.tema-ceu #barra-inferior-mandala, body.tema-ceu .rel-editor-tabs, body.tema-ceu .rel-toolbar {
    background: transparent; overflow: visible; border-top-color: transparent; border-bottom-color: transparent;
}
body.tema-ceu:not(.topbar-fixo) #top-bar { position: relative; }
body.tema-ceu #top-bar::before, body.tema-ceu #mandala-actions-overlay::before, body.tema-ceu #mandala-controls-overlay::before, body.tema-ceu #cabecalho-barra-mandala::before, body.tema-ceu #barra-inferior-mandala::before, body.tema-ceu .rel-editor-tabs::before, body.tema-ceu .rel-toolbar::before {
    content: ''; position: absolute; inset: -9px; z-index: -1; pointer-events: none;
    background: var(--papiro-fundo);
    clip-path: polygon(
                0 5px, 2% 0, 9% 3px, 17% 0, 26% 4px, 35% 1px, 46% 4px, 58% 0, 69% 3px, 80% 0, 90% 4px, 97% 1px, 100% 5px,
                calc(100% - 3px) 30%, 100% 55%, calc(100% - 4px) 80%, 100% calc(100% - 4px),
                98% calc(100% - 1px), 90% 100%, 80% calc(100% - 4px), 69% calc(100% - 1px), 58% 100%, 46% calc(100% - 4px), 35% calc(100% - 1px), 24% 100%, 14% calc(100% - 4px), 5% calc(100% - 1px), 0 calc(100% - 4px),
                4px 70%, 0 45%, 3px 22%);
}
body.tema-ceu #top-bar::after, body.tema-ceu #mandala-actions-overlay::after, body.tema-ceu #mandala-controls-overlay::after, body.tema-ceu #cabecalho-barra-mandala::after, body.tema-ceu #barra-inferior-mandala::after, body.tema-ceu .rel-editor-tabs::after, body.tema-ceu .rel-toolbar::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
    border-top: var(--divisa-espessura) double var(--azul-egipcio-claro);
    border-bottom: var(--divisa-espessura) double var(--azul-egipcio-claro);
}

/* NUNCA PAPIRO EM CIMA DE PAPIRO — onde o fundo já é papiro, a peça de papiro quebrado some e ficam só as linhas duplas / o conteúdo.
   - Mandala em papiro (botão céu/papiro): a folha cobre o palco inteiro, então a barra superior e os dois grupos de botões perdem o papiro próprio.
   - Menus flutuantes abertos dentro de um painel (já papiro): continuam com o fundo (precisa cobrir o texto de trás), mas sem a borda quebrada. */
body.tema-ceu.mandala-papiro-tela #top-bar::before,
body.tema-ceu.mandala-papiro-tela #mandala-actions-overlay::before,
body.tema-ceu.mandala-papiro-tela #mandala-controls-overlay::before,
body.tema-ceu.mandala-papiro-tela #cabecalho-barra-mandala::before,
body.tema-ceu.mandala-papiro-tela #barra-inferior-mandala::before { display: none; }
/* BARRA INFERIOR DA MANDALA: o papiro e as linhas duplas são UM só, da barra inteira (em qualquer largura) — os três pedaços de dentro não têm papiro próprio. */
body.tema-ceu #barra-inferior-mandala #mandala-actions-overlay::before, body.tema-ceu #barra-inferior-mandala #mandala-actions-overlay::after,
body.tema-ceu #barra-inferior-mandala #mandala-controls-overlay::before, body.tema-ceu #barra-inferior-mandala #mandala-controls-overlay::after,
body.tema-ceu #barra-inferior-mandala #cabecalho-barra-mandala::before, body.tema-ceu #barra-inferior-mandala #cabecalho-barra-mandala::after { display: none; }
/* Menu aberto DENTRO de um painel (já é papiro): sem borda quebrada, então não precisa do recorte — o papel é o próprio fundo e a sombra é um box-shadow comum
   (mais firme que o drop-shadow nos navegadores do iPad). */
body.tema-ceu .painel .menu-flutuante { background: var(--papiro-fundo-simples) !important; filter: none; box-shadow: 0 6px 16px rgba(30, 20, 5, .6); }
body.tema-ceu .painel .menu-flutuante::after { display: none; }
/* Ferramenta aberta DENTRO da mandala em papiro (ex.: Matriz de Visibilidade): o painel dela não leva papiro próprio — a folha da mandala já é o papel. */
body.tema-ceu.mandala-papiro-tela #mandala-container .painel { background: transparent !important; clip-path: none; }

/* TEMA CÉU — janela (caixa de diálogo): o papel é o ::before, MAIOR que a janela, e passa por fora das linhas duplas (a borda quebrada fica por fora);
   a sombra é um drop-shadow da janela inteira, que acompanha o recorte. */
body.tema-ceu .janela { background: transparent; box-shadow: none; isolation: isolate; filter: drop-shadow(3px 6px 6px rgba(0, 0, 10, .75)); }
body.tema-ceu .janela::before {
    content: ''; position: absolute; inset: -9px; z-index: -1; pointer-events: none; background: var(--papiro-fundo);
    clip-path: polygon(0 5px, 2% 0, 9% 3px, 17% 0, 26% 4px, 35% 1px, 46% 4px, 58% 0, 69% 3px, 80% 0, 90% 4px, 97% 1px, 100% 5px, calc(100% - 3px) 30%, 100% 55%, calc(100% - 4px) 80%, 100% calc(100% - 4px), 98% calc(100% - 1px), 90% 100%, 80% calc(100% - 4px), 69% calc(100% - 1px), 58% 100%, 46% calc(100% - 4px), 35% calc(100% - 1px), 24% 100%, 14% calc(100% - 4px), 5% calc(100% - 1px), 0 calc(100% - 4px), 4px 70%, 0 45%, 3px 22%);
}
body.tema-ceu .janela-sugestoes { background: var(--papiro-fundo-simples); }
body.tema-ceu .janela { border-top-color: transparent; border-bottom-color: transparent; }
body.tema-ceu .janela::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
    border-top: var(--divisa-espessura) double var(--azul-egipcio-claro); border-bottom: var(--divisa-espessura) double var(--azul-egipcio-claro);
}

/* EDITOR DO RELATÓRIO: a folha é MUITO alta (todas as páginas do modelo numa coluna só). Um recorte de borda quebrada (clip-path) numa folha desse
   tamanho estoura o limite de camada do Safari do iPad: ao tocar fora do texto a tela aparece "dividida na metade" até o próximo toque.
   Aqui a folha do editor fica sem o recorte (bordas retas, mesmo papiro); as barras e janelas, que são pequenas, mantêm a borda quebrada. */
body.tema-ceu .rel-editor-tela { clip-path: none !important; }