/* COMPONENTES — as regras de FORMA do Astro Hellenic (valem para TODOS os temas).

   Aqui não existe cor escrita. Toda cor vem das variáveis de temas.css (e o papiro, de papiro.css).
   O que existe num tema e não existe em outro (ex.: sombra, borda quebrada do papiro) é DO TEMA, não daqui.
   Ferramenta nova usa estas classes; ela não escreve contorno, sombra nem cor por conta própria.

   Este arquivo ainda NÃO está ligado ao software (nenhuma tela usa estas classes hoje). Ele entra quando a
   migração começar, uma ferramenta por vez. Ver o guia de design. */

:root {
    --divisa-espessura: 4px;   /* a linha dupla = duas linhas finas (border-style: double) */
    --contorno-fino: 1px;      /* contorno dos cartões menores */
}

/* CANTOS RETOS EM TUDO. Na época não se usava canto arredondado. */
.painel, .cartao, .botao-icone, .janela, .selo-fatos {
    margin-left: 8px; padding: 0 8px; background: transparent; cursor: pointer; font-family: inherit; font-size: 10px; font-weight: 700; color: var(--ocre);
    border: 0; border-top: var(--contorno-fino) solid var(--ocre); border-bottom: var(--contorno-fino) solid var(--ocre); border-radius: 0; vertical-align: middle;
}
.selo { border-radius: 0; }

/* PAINEL POR BAIXO — toda ferramenta ocupa um painel. Claro/escuro: cor lisa; papiro: o fundo do papiro. */
.painel {
    background: var(--fundo-creme);
    color: var(--preto-tinta);
    padding: 20px;
    box-sizing: border-box;
}

/* DIVISA — linha dupla entre as partes da ferramenta. SEM moldura em volta da ferramenta.
   Uso: no topo da ferramenta, no fim do cabeçalho, entre cada bloco e no final. */
.divisa {
    border: 0;
    border-top: var(--divisa-espessura) double var(--azul-egipcio-claro);
    margin: 18px 0;
}
.divisa-fim {
    border: 0;
    border-bottom: var(--divisa-espessura) double var(--azul-egipcio-claro);
    margin: 18px 0;
}

/* CARTÃO MENOR (selos, cartões de L1/L2, linhas da linha do tempo): SÓ uma linha fina em cima e uma embaixo, SEM os lados
   (decidido: o canto remete mais à época quando some, e fica leve e moderno). Nunca borda de 2px, nunca arredondado. */
.cartao {
    background: transparent;
    border: 0;
    border-top: var(--contorno-fino) solid var(--azul-egipcio-claro);     /* sempre a mesma cor das linhas duplas (divisa) */
    border-bottom: var(--contorno-fino) solid var(--azul-egipcio-claro);
    box-shadow: var(--sombra, none);   /* a sombra é do tema: cada tema define a sua em --sombra */
    padding: 14px;
}

/* BOTÃO — só o ícone sobre o painel, sem moldura própria. */
.botao-icone {
    background: transparent;
    border: 0;
    padding: 0;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: var(--azul-egipcio-escuro);
}
.botao-icone:hover { color: var(--azul-egipcio-claro); }
.botao-icone .icone { width: 22px; height: 22px; }
.aviso-icone { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; cursor: help; color: var(--terracota); }

/* MENU FLUTUANTE (ex.: escolher o planeta inicial) — folha reta com a linha fina em cima e embaixo, sem sombra de caixa. */
.menu-flutuante {
    background: var(--fundo-creme);
    border: 0;
    border-top: var(--contorno-fino) solid var(--azul-egipcio-claro);
    border-bottom: var(--contorno-fino) solid var(--azul-egipcio-claro);
    box-shadow: var(--sombra-janela, none);   /* janela que flutua por cima: precisa de sombra pra se ver que está afastada do que está atrás */
    padding: 4px;
}

/* RÓTULO DO GLIFO (nome do planeta ou do signo) ao lado do ícone — ajuda quem não conhece os símbolos. */
.com-nome { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.com-nome .nome-glifo { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }

/* ÍCONE — sempre monoline: só traço, sem preenchimento. A cor vem do pai (currentColor). Grade 64, traço 3. */
.icone {
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* TÍTULOS E TEXTO — como se destacava no século II: tinta vermelha (terracota), letras maiúsculas espaçadas, nada de fundo pintado. */
.titulo-ferramenta {
    font-family: 'Cinzel', serif; font-weight: 800; font-size: 18px; letter-spacing: .2em;
    text-transform: uppercase; text-align: center; color: var(--terracota); margin: 0 0 12px;
}
.titulo-secao {
    font-family: 'Cinzel', serif; font-weight: 800; font-size: 14px; letter-spacing: .2em;
    text-transform: uppercase; color: var(--terracota); margin: 6px 0 12px;
}
.rotulo {
    font-family: 'Cinzel', serif; font-weight: 700; font-size: 10px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--terracota);
}
.texto-apagado { color: var(--preto-tinta); opacity: .75; }

/* SELO (ex.: "129 meses") — sem fundo e sem arredondar: texto com uma linha fina em cima e outra embaixo. */
.selo {
    display: inline-block; white-space: nowrap; padding: 1px 8px; font-weight: 700; font-size: 11px; color: var(--azul-egipcio-escuro);
    border-top: var(--contorno-fino) solid var(--azul-egipcio-claro); border-bottom: var(--contorno-fino) solid var(--azul-egipcio-claro);
}

/* CARTÕES EM GRADE, CABEÇA E LINHA DE INFORMAÇÃO */
.grade-cartoes { display: flex; flex-wrap: wrap; gap: 14px; }
.grade-cartoes > .cartao { flex: 1; min-width: 260px; }
.cabeca-cartao { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.linha-info { font-size: 11px; color: var(--preto-tinta); border-top: var(--contorno-fino) solid var(--azul-egipcio-claro); padding-top: 8px; }
.cartao.ativo { border-left: 3px solid var(--terracota); }   /* marca na margem do item ativo */
.cartao.ativo .nome-nivel { color: var(--terracota); }
.nome-nivel { font-family: 'Cinzel', serif; font-weight: 800; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--azul-egipcio-escuro); }

/* TABELA — sem caixa em volta, sem faixa pintada: a barra de cima são só as palavras em maiúsculas espaçadas com uma linha
   embaixo (como um título de coluna num papiro). As linhas têm a MESMA cor da divisa. Item ativo: marca na margem + letra em terracota. */
.envolve-tabela { padding: 0; }
.tabela-epoca { width: 100%; border-collapse: collapse; border: 0; background: transparent; font-size: 12.5px; }
.tabela-epoca th {
    padding: 10px 12px; text-align: left; font-family: 'Cinzel', serif; font-weight: 800; font-size: 11px; letter-spacing: .18em;
    text-transform: uppercase; color: var(--azul-egipcio-escuro); background: transparent; border: 0;
    border-bottom: var(--contorno-fino) solid var(--azul-egipcio-claro);
}
.tabela-epoca td {
    padding: 10px 12px; color: var(--preto-tinta); background: transparent; border: 0;
    border-bottom: var(--contorno-fino) solid var(--azul-egipcio-claro);
}
.tabela-epoca .centro { text-align: center; }
.tabela-epoca td.encaixe { padding: 0; }
.tabela-epoca tr.clicavel { cursor: pointer; }
.tabela-epoca tr > :first-child { border-left: 3px solid transparent; }   /* reserva o espaço da marca na margem */
.tabela-epoca tr.ativa > td { color: var(--terracota); }
.tabela-epoca tr.ativa > :first-child { border-left-color: var(--terracota); }
.tabela-epoca tr.aberta > td { font-weight: 700; }
.tabela-epoca small { opacity: .75; }

/* linha de texto com glifos e rótulos no meio ("Lua em ♏ ESCORPIÃO 21°00'"): tudo alinhado pelo centro */
.linha-glifo { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }

/* MENU LATERAL — o logo fica entre duas divisas duplas; tudo que vem depois (ações, pastas, busca, lista) é UM bloco só,
   dividido por linhas simples. Linha dupla = entre blocos principais; linha simples = dentro do mesmo bloco. */
#sidebar { background: var(--fundo-creme); color: var(--preto-tinta); border-right: 0; box-shadow: var(--sombra, none); }
.sidebar-header {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin-top: 10px; padding: 14px 16px; background: transparent;
    border-top: var(--divisa-espessura) double var(--azul-egipcio-claro);
    border-bottom: var(--divisa-espessura) double var(--azul-egipcio-claro);
}
.sidebar-title { font-family: 'Cinzel', serif; font-size: 18px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--terracota); margin: 0; }
.sidebar-nome-pasta { font-family: 'Cinzel', serif; font-size: 13px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--terracota); }
.menu-list { list-style: none; margin: 0; padding: 0; }
.menu-item, .menu-pasta {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; cursor: pointer;
    font-size: 13px; line-height: 20px; font-weight: 600; color: var(--azul-egipcio-escuro); background: transparent;
    border: 0; border-left: 3px solid transparent; border-bottom: var(--contorno-fino) solid var(--azul-egipcio-claro);
}
.menu-item:hover, .menu-item.active, .menu-pasta:hover { color: var(--terracota); }
.menu-item .icone, .menu-pasta .icone { width: 20px; height: 20px; flex: 0 0 auto; }
.menu-pasta .nome-pasta { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.menu-pasta .acoes-pasta { display: flex; align-items: center; gap: 4px; }
.menu-pasta .acoes-pasta .botao-icone { width: 28px; height: 28px; }
.menu-pasta .acoes-pasta .botao-icone .icone { width: 16px; height: 16px; }
.menu-pasta .botao-apagar, .botao-icone.botao-apagar { color: var(--terracota); }
.menu-rotulo-linha {
    display: flex; align-items: center; justify-content: space-between; padding: 10px 16px;
    border-bottom: var(--contorno-fino) solid var(--azul-egipcio-claro);
}
.database-section { flex: 1; display: flex; flex-direction: column; overflow: hidden; padding: 0; background: transparent; }
.folders-container { display: flex; gap: 16px; align-items: center; overflow-x: auto; padding: 10px 16px; border-bottom: var(--contorno-fino) solid var(--azul-egipcio-claro); }
.folder-tab-btn, .add-folder-btn {
    background: transparent; border: 0; border-bottom: 3px solid transparent; border-radius: 0; padding: 4px 0; cursor: pointer; white-space: nowrap;
    font-family: 'Cinzel', serif; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--azul-egipcio-escuro);
    display: flex; align-items: center; gap: 6px;
}
.folder-tab-btn:hover, .add-folder-btn:hover { color: var(--terracota); }
.folder-tab-btn.active { color: var(--terracota); border-bottom-color: var(--terracota); background: transparent; }
.folder-action-icon { font-size: 10px; opacity: .6; padding: 2px; }
.folder-action-icon:hover { opacity: 1; }
.search-box-container { display: flex; align-items: center; gap: 6px; padding: 8px 16px; border-bottom: var(--contorno-fino) solid var(--azul-egipcio-claro); margin: 0; }
.client-search-input, .menu-select {
    flex: 1; min-width: 0; width: 100%; padding: 6px 0; font-size: 12px; outline: none; color: var(--preto-tinta);
    background: transparent; border: 0; border-bottom: var(--contorno-fino) solid var(--azul-egipcio-claro); border-radius: 0;
}
.client-search-input::placeholder { color: var(--preto-tinta); opacity: .55; }
.menu-select { width: auto; font-size: 11px; }
#searchStatusFeedback { padding: 0 16px; font-size: 10px; font-weight: 600; min-height: 0; color: var(--terracota); }
#searchStatusFeedback:empty { display: none; }
.client-list-container { flex: 1; overflow-y: auto; border: 0; border-radius: 0; background: transparent; }
.menu-vazio { padding: 16px; text-align: center; font-size: 12px; color: var(--preto-tinta); opacity: .75; }
.client-card-item {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 16px 10px 13px; margin: 0; cursor: pointer;
    background: transparent; border: 0; border-left: 3px solid transparent; border-bottom: var(--contorno-fino) solid var(--azul-egipcio-claro); border-radius: 0;
}
.client-card-item:hover .client-name, .client-card-item.selected .client-name { color: var(--terracota); }
.client-card-item.selected { border-left-color: var(--terracota); background: transparent; }
.client-corpo { flex: 1; cursor: pointer; min-width: 0; }
.client-name { font-size: 12px; font-weight: 700; color: var(--azul-egipcio-escuro); }
.client-name .client-tipo { font-size: 10px; font-weight: 600; color: var(--ocre); margin-left: 6px; }
.client-meta { font-size: 10px; font-weight: 500; color: var(--preto-tinta); opacity: .75; margin-top: 2px; }
.card-actions { display: flex; align-items: center; gap: 2px; }
.action-record-btn { background: transparent; border: 0; cursor: pointer; padding: 6px; font-size: 12px; color: var(--azul-egipcio-escuro); }
.action-record-btn:hover { color: var(--terracota); }
.action-record-btn.whats-btn { color: var(--verde); }
.action-record-btn.meet-btn { color: var(--ocre); }
.action-record-btn.email-btn { color: var(--azul-egipcio-claro); }
.action-record-btn.delete-btn { color: var(--terracota); }
.map-select-cb { margin-right: 10px; cursor: pointer; width: 16px; height: 16px; accent-color: var(--terracota); }
.barra-selecao {
    display: none; padding: 8px 16px; justify-content: space-between; align-items: center;
    border-bottom: var(--contorno-fino) solid var(--azul-egipcio-claro);
}
.barra-selecao label { font-size: 11px; font-weight: 700; color: var(--terracota); display: flex; align-items: center; gap: 6px; cursor: pointer; }
.botao-texto {
    background: transparent; cursor: pointer; padding: 3px 10px; font-size: 11px; font-weight: 700; color: var(--terracota);
    border: 0; border-top: var(--contorno-fino) solid var(--terracota); border-bottom: var(--contorno-fino) solid var(--terracota); border-radius: 0;
}
.sidebar-header .botao-icone, .sidebar-header .botao-icone:hover { width: 32px; height: 32px; }
.sidebar-header img { height: 38px; width: auto; }
.sidebar-title { line-height: 38px; }

/* Os botões de ação do topo (novo mapa, importar) são um bloco à parte: fechados por divisa dupla, não por linha simples */
.menu-acoes { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 16px; border-bottom: var(--divisa-espessura) double var(--azul-egipcio-claro); }
.menu-list { border-bottom: var(--divisa-espessura) double var(--azul-egipcio-claro); }
.menu-list .menu-item:last-child { border-bottom: 0; }
/* cores dos ícones de ação: editar = cinza (ar), WhatsApp = verde, e-mail = azul egípcio claro, apagar = terracota */
.action-record-btn.edit-btn { color: var(--cinza); }
.action-record-btn.edit-btn:hover { color: var(--terracota); }
.action-record-btn.email-btn:hover { color: var(--terracota); }
/* tabela que abre dentro de outra: mesma marca terracota na margem da tabela de fora */
.tabela-epoca tr > td.encaixe:first-child { border-left-color: var(--terracota); }

/* BARRA SUPERIOR — entre duas linhas duplas (sem moldura em volta, sem cantos). Ícones em azul egípcio escuro; hover/ativo em terracota. */
#top-bar {
    background: var(--fundo-creme);
    border: 0;
    border-top: var(--divisa-espessura) double var(--azul-egipcio-claro);
    border-bottom: var(--divisa-espessura) double var(--azul-egipcio-claro);
    border-radius: 0;
    box-shadow: var(--sombra, none);
}
#top-bar .menu-toggle-btn, #top-bar .icon-btn {
    background: transparent; border: 0; border-radius: 0; color: var(--azul-egipcio-escuro);
    display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 6px 8px; flex-shrink: 0;
}
#top-bar .menu-toggle-btn { margin-right: 4px; }
#top-bar .menu-toggle-btn:hover, #top-bar .icon-btn:hover { background: transparent; color: var(--terracota); }
#top-bar .icon-btn.matriz-visibilidade-ativa, #top-bar .icon-btn.ativo { background: transparent; color: var(--terracota); }
.action-record-btn { display: flex; align-items: center; justify-content: center; }
.action-record-btn .icone { display: block; }

/* GRUPOS DE BOTÕES FLUTUANTES DA MANDALA — cada grupo é UMA barra, igual à barra superior: fundo creme, linhas duplas em cima e embaixo,
   botões sem moldura nem cor própria. (No Céu o papiro é da barra, ver papiro.css.) */
#mandala-actions-overlay, #mandala-controls-overlay, #cabecalho-barra-mandala {
    position: relative; z-index: 0;
    background: var(--fundo-creme);
    border: 0;
    border-top: var(--divisa-espessura) double var(--azul-egipcio-claro);
    border-bottom: var(--divisa-espessura) double var(--azul-egipcio-claro);
    border-radius: 0;
    box-shadow: var(--sombra, none);
    padding: 2px 12px;
}
#mandala-actions-overlay .icon-btn, #mandala-controls-overlay .icon-btn {
    background: transparent; border: 0; border-radius: 0; color: var(--azul-egipcio-escuro);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
#mandala-actions-overlay .icon-btn:hover, #mandala-controls-overlay .icon-btn:hover { background: transparent; color: var(--terracota); }
#mandala-actions-overlay .icon-btn.matriz-visibilidade-ativa, #mandala-actions-overlay .icon-btn.mandala-papiro-ativa { background: transparent; color: var(--terracota); }
#mandala-controls-overlay .time-select { background: transparent; border: 0; color: var(--azul-egipcio-escuro); }
#mandala-controls-overlay .icone { fill: none; stroke: currentColor; }
#mandala-actions-overlay .icon-btn svg, #mandala-controls-overlay .icon-btn svg { flex-shrink: 0; }
/* Os dois grupos ficam na BARRA INFERIOR (junto do cabeçalho, ver posicionarBarrasInferioresMandala em mandala.js): os menus que abrem deles abrem pra CIMA. */
#mandala-actions-overlay .menu-flutuante, #mandala-controls-overlay .menu-flutuante { top: auto !important; bottom: calc(100% + 10px) !important; }

/* BARRA INFERIOR DA MANDALA — UMA barra só (esquerda | cabeçalho | direita), igual à barra superior: fundo e linhas duplas são DA BARRA, contínuos de ponta a ponta;
   os três pedaços não têm fundo/linha próprios. Na tela estreita (≤ 1190px: celular, iPad em pé) as três peças não cabem, então a barra ROLA para os
   lados, cabeçalho junto, como a de cima, e setinhas nas pontas avisam que tem mais (rolarBarraInferiorMandala/atualizarSetasBarraMandala, mandala.js).
   O cabeçalho é desenhado em JS (atualizarBarraInferiorMandala). A rolagem fica numa camada de dentro pra o papiro e as linhas não rolarem. */
#barra-inferior-mandala {
    position: absolute; left: 0; right: 0; bottom: 12px; z-index: 20; box-sizing: border-box;
    background: var(--fundo-creme);
    border-top: var(--divisa-espessura) double var(--azul-egipcio-claro);
    border-bottom: var(--divisa-espessura) double var(--azul-egipcio-claro);
    box-shadow: var(--sombra, none);
    padding: 2px 12px;
}
#barra-inferior-rolagem { display: flex; align-items: center; width: 100%; box-sizing: border-box; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
#barra-inferior-rolagem::-webkit-scrollbar { display: none; }
#barra-inferior-mandala #mandala-actions-overlay, #barra-inferior-mandala #mandala-controls-overlay, #barra-inferior-mandala #cabecalho-barra-mandala {
    background: none; border: 0; box-shadow: none; padding: 0; flex: 0 0 auto;
}
/* Botões da barra inferior mais juntos (sobra mais espaço pro cabeçalho): sem vão entre eles e com pouca folga em volta de cada ícone. */
#barra-inferior-mandala #mandala-actions-overlay, #barra-inferior-mandala #mandala-controls-overlay { gap: 0 !important; }
#barra-inferior-mandala #mandala-actions-overlay .icon-btn { padding: 6px 5px; }
#barra-inferior-mandala #mandala-controls-overlay .time-stepper, #barra-inferior-mandala #mandalaZoomContainer { gap: 0 !important; }
#barra-inferior-mandala #mandala-controls-overlay .icon-btn:not(.botao-icone) { width: 30px !important; }
#barra-inferior-mandala #lotRotationBtnContainer { margin-right: 0 !important; }
#barra-inferior-mandala #lotRotationBtnContainer > div > .icon-btn { width: 38px !important; }
#barra-inferior-mandala #mandala-controls-overlay .time-select { padding: 2px 2px; }
#cabecalho-barra-mandala { min-width: 0; overflow: hidden; margin: 0 6px; }
/* tela larga não rola: a camada de dentro não pode cortar os menus que abrem pra cima dos botões */
@media (min-width: 1191px) { #barra-inferior-mandala #cabecalho-barra-mandala { flex: 1 1 0; } #barra-inferior-rolagem { overflow: visible; } }
@media (max-width: 1190px) {
    /* tela estreita: a ordem é sempre botões da esquerda | cabeçalho | botões da direita; o cabeçalho tem a largura da tela e a barra abre CENTRALIZADA nele
       (centralizarCabecalhoNaBarra, mandala.js); os botões ficam cada um do seu lado, rolando pro lado */
    #barra-inferior-mandala #mandala-actions-overlay { margin-right: 16px; }
    #barra-inferior-mandala #mandala-controls-overlay { margin-left: 16px; }
}
.barra-seta { display: none; position: absolute; top: 0; bottom: 0; z-index: 3; width: 34px; padding: 0; border: 0; cursor: pointer; align-items: center; color: var(--terracota); }
.barra-seta.visivel { display: flex; }
#barra-seta-esq, .barra-seta-esq { left: 0; justify-content: flex-start; padding-left: 4px; background: linear-gradient(to right, var(--fundo-creme) 40%, transparent); }
#barra-seta-dir, .barra-seta-dir { right: 0; justify-content: flex-end; padding-right: 4px; background: linear-gradient(to left, var(--fundo-creme) 40%, transparent); }
body.tema-ceu .barra-seta { background: transparent !important; }
/* Papiro: nada de "luzinha" (degradê) atrás das setinhas, só a seta (as duas barras, de cima e de baixo, iguais). */

/* TÍTULO DA FERRAMENTA + SEUS BOTÕES NA MESMA LINHA — dentro do painel: o título fica centralizado e os botões (seletor, salvar na galeria,
   enviar ao relatório) na ponta direita da mesma linha. No celular os botões descem para uma linha logo abaixo do título. */
.cabeca-ferramenta { position: relative; z-index: 30; display: flex; align-items: center; justify-content: center; margin: 0 0 12px; }
.cabeca-ferramenta .titulo-ferramenta { margin: 0; padding: 0 130px; }
.acoes-ferramenta { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px; }
@media (max-width: 700px) {
    .cabeca-ferramenta { flex-direction: column; }
    .cabeca-ferramenta .titulo-ferramenta { padding: 0; }
    .acoes-ferramenta { position: static; transform: none; margin-top: 8px; justify-content: center; }
}

/* ITENS DE MENU FLUTUANTE (lista de anos, opções do relatório...): texto azul egípcio escuro, uma linha fina entre os itens; o ativo/ao passar fica terracota. */
.item-menu { padding: 10px 14px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--azul-egipcio-escuro); border-bottom: var(--contorno-fino) solid var(--azul-egipcio-claro); border-left: 3px solid transparent; }
.item-menu:last-child { border-bottom: 0; }
.item-menu:hover { color: var(--terracota); }
.item-menu.ativa { color: var(--terracota); border-left-color: var(--terracota); }
.item-menu.cabeca-menu { cursor: default; color: var(--preto-tinta); }
.item-menu.cabeca-menu:hover { color: var(--preto-tinta); }
/* linha "Ano Profectado" com as setas de trocar o ano */
.linha-ano-profectado { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 16px; font-size: 13px; color: var(--preto-tinta); }

/* SALTO (Liberação): o mesmo selo, em terracota */
.selo.salto { color: var(--terracota); border-top-color: var(--terracota); border-bottom-color: var(--terracota); }
.tabela-epoca tr.aberta > td { font-weight: 700; }

/* CAIXINHA DE MARCAR — sem preenchimento nenhum (o papiro/painel aparece por baixo): só o contorno em azul egípcio escuro e, marcada, o tique em terracota. */
.painel input[type="checkbox"], .barra-selecao input[type="checkbox"], #clientsListContainer input[type="checkbox"] {
    -webkit-appearance: none; appearance: none; background: transparent; width: 16px; height: 16px; margin: 0; cursor: pointer; flex: 0 0 auto;
    border: 1.5px solid var(--azul-egipcio-escuro); border-radius: 0; position: relative;
}
.painel input[type="checkbox"]:checked::after, .barra-selecao input[type="checkbox"]:checked::after, #clientsListContainer input[type="checkbox"]:checked::after {
    content: ''; position: absolute; left: 4px; top: 0; width: 4px; height: 9px;
    border: solid var(--terracota); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
/* BOLINHA DE MARCAR (caixinha que se comporta como a bolinha: pequena, redonda, ponto terracota quando marcada) — marcar linhas da Circumambulação. */
.painel input[type="checkbox"].bolinha-marcar { width: 11px; height: 11px; border-width: 1.5px; border-radius: 50%; }
.painel input[type="checkbox"].bolinha-marcar:checked::after {
    left: 50%; top: 50%; width: 5px; height: 5px; border: 0; border-radius: 50%; background: var(--terracota); transform: translate(-50%, -50%);
}
/* BOLINHA DE ESCOLHER (radio) — a mesma regra da caixinha: sem preenchimento nenhum (nada de "buraquinho branco" do navegador), só o contorno em azul egípcio escuro e, escolhida, um ponto em terracota. */
input[type="radio"] {
    -webkit-appearance: none; appearance: none; background: transparent; width: 16px; height: 16px; margin: 0; cursor: pointer; flex: 0 0 auto;
    border: 1.5px solid var(--azul-egipcio-escuro); border-radius: 50%; position: relative;
}
input[type="radio"]:checked::after {
    content: ''; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border-radius: 50%;
    background: var(--terracota); transform: translate(-50%, -50%);
}
/* Cabeça dos menus flutuantes: o rótulo ("Mapa Selecionado", "Retorno Solar"...) é só texto, em preto de tinta, sem destaque; o NOME do cliente é nome, não item de lista: terracota. */
.item-menu .rotulo { color: var(--preto-tinta); }
.item-menu.cabeca-menu .nome-nivel { color: var(--terracota); }
.item-menu .idade-ano { color: var(--preto-tinta); font-weight: 600; }   /* o ano é do item (azul/terracota); a idade é texto comum: preto de tinta */

/* SELETOR DE TEMPO (trânsito na Sinastria): setas + unidade + "agora", numa linha fina entre o cabeçalho e a mandala */
.passo-tempo { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 6px 0; margin-bottom: 8px; border-bottom: var(--contorno-fino) solid var(--azul-egipcio-claro); }
.passo-tempo .menu-select { flex: 0 0 auto; width: auto; padding: 4px 6px; }

/* GRADE DOS LOTES (Calculadora de Lotes): cartões lado a lado, quebrando linha sozinhos */
.grade-lotes { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 8px; }

/* HORAS PLANETÁRIAS: o bloco "agora" (Dia e Hora atuais) e a rolagem da tabela */
.horas-info { font-size: 12px; text-align: center; margin: 0 0 16px; opacity: .85; }
.horas-atual { display: flex; flex-direction: column; align-items: center; width: 100%; margin: 0 auto; padding: 6px 0 0; }
.horas-atual-linha { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 32px; margin: 0 0 6px; }
.horas-atual-periodo { font-size: 13px; font-weight: 500; }
.horas-table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; touch-action: manipulation; }
@media (max-width: 480px) { .horas-atual { padding: 12px; } .horas-atual-linha { gap: 16px; } .horas-table-scroll .tabela-epoca { font-size: 11px; } }

/* ISOPSEFIA (isopsefia.js): só forma; cores das variáveis do tema */
.iso-abas { display: flex; gap: 16px; padding: 4px 0; overflow-x: auto; }
.iso-linha-adicionar { display: flex; gap: 12px; align-items: center; }
.iso-campo { flex: 1; min-width: 0; width: 100%; box-sizing: border-box; padding: 6px 0; font-size: 14px; outline: none; color: var(--preto-tinta); background: transparent; border: 0; border-bottom: var(--contorno-fino) solid var(--azul-egipcio-claro); border-radius: 0; }
.iso-campo::placeholder { color: var(--preto-tinta); opacity: .55; }
.iso-vazio { padding: 20px; text-align: center; font-size: 12px; color: var(--preto-tinta); opacity: .75; }
.iso-nome { font-weight: 700; color: var(--azul-egipcio-escuro); }
.iso-grego { font-family: serif; font-size: 16px; font-weight: 700; color: var(--terracota); }
.iso-grego-grande { font-size: 28px; margin: 8px 0; }
.iso-mono { font-family: monospace; }
.iso-duas-colunas { display: flex; gap: 24px; flex-wrap: wrap; }
.iso-coluna-larga { flex: 2; min-width: 280px; }
.iso-coluna-estreita { flex: 1; min-width: 240px; }
.iso-coluna-estreita .iso-resultado { margin-bottom: 0; }
.iso-coluna-larga .iso-campo { margin-top: 6px; font-weight: 600; }
.iso-passo { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-size: 13px; border-bottom: var(--contorno-fino) solid var(--azul-egipcio-claro); }
.iso-resultado { text-align: center; margin-bottom: 12px; border: 0; padding-top: 0; }
.iso-soma-resto { display: flex; justify-content: space-around; margin-top: 12px; padding-top: 10px; border-top: var(--contorno-fino) solid var(--azul-egipcio-claro); }
.iso-soma-resto strong { font-size: 18px; }
.iso-grade-letras { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.iso-letra { display: flex; align-items: center; justify-content: space-between; }
.iso-letra small { font-size: 10px; opacity: .75; }
#isopsefia-container .rotulo { color: var(--preto-tinta); }
/* ISOPSEFIA: a coluna do signo alinha pelo ÍCONE (um embaixo do outro); o nome vem depois */
.tabela-epoca .iso-col-glifo { text-align: left; padding-left: 28px; }
.tabela-epoca td.iso-col-glifo .com-nome { display: flex; justify-content: flex-start; }
.iso-coluna-estreita .iso-passo { justify-content: flex-start; gap: 12px; }
.iso-coluna-estreita .iso-passo > .rotulo { min-width: 120px; }

/* HORAS: a coluna do regente alinha pelo ÍCONE (um embaixo do outro, na mesma vertical); o nome vem depois do ícone */
.tabela-epoca .horas-regente { text-align: left; padding-left: 28px; }
.tabela-epoca td.horas-regente .com-nome { display: flex; justify-content: flex-start; }

/* TABELAS (Profecção, Liberação, Decênios): a coluna centraliza pelo ÍCONE (planeta ou signo); o nome fica ao lado, fora do cálculo do centro */
.tabela-epoca td.centro .com-nome { position: relative; display: inline-flex; justify-content: center; gap: 0; }
.tabela-epoca td.centro .com-nome .nome-glifo { position: absolute; left: 100%; margin-left: 8px; }
/* Profecção Mensal: o ícone do planeta sem nome também é inline-block (como o do signo), pra imagem salva (html2canvas) centralizar igual à tela */
#profMensalTable td.centro > svg { display: inline-block; vertical-align: middle; }

/* AGENDA (agendamento.js): só forma; cores das variáveis do tema */
.ag-nota { font-size: 12px; text-align: center; margin: 0 0 4px; opacity: .85; }
.ag-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 24px 0; }
.ag-bloco { min-width: 0; padding: 0 24px; }
.ag-bloco + .ag-bloco { border-left: var(--divisa-espessura) double var(--azul-egipcio-claro); }
.ag-bloco:first-child { padding-left: 0; }
.ag-bloco:last-child { padding-right: 0; }
@media (max-width: 760px) {
    .ag-bloco { padding: 0; }
    .ag-bloco + .ag-bloco { border-left: 0; border-top: var(--divisa-espessura) double var(--azul-egipcio-claro); padding-top: 18px; }
}
.ag-rotulo { display: block; margin: 12px 0 2px; color: var(--preto-tinta); }
#agenda-container select, #agenda-container input {
    box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; display: block; padding: 6px 0; font-family: inherit; font-size: 13px; outline: none;
    color: var(--preto-tinta); background: transparent; border: 0; border-bottom: var(--contorno-fino) solid var(--azul-egipcio-claro); border-radius: 0;
}
#agenda-container input[type="date"] { -webkit-appearance: none; appearance: none; min-height: 36px; }
#agenda-container select:focus, #agenda-container input:focus { border-bottom-color: var(--terracota); }
.ag-acoes { margin-top: 18px; }
.ag-aviso { font-size: 11.5px; line-height: 1.4; padding: 8px 0; margin-bottom: 4px; border-top: var(--contorno-fino) solid var(--ocre); border-bottom: var(--contorno-fino) solid var(--ocre); }
.ag-aviso a { color: var(--terracota); font-weight: 700; }
.ag-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0; border-bottom: var(--contorno-fino) solid var(--azul-egipcio-claro); }
.ag-item-corpo { min-width: 0; }
.ag-dia { padding-bottom: 6px; border-bottom: var(--divisa-espessura) double var(--azul-egipcio-claro); }
.ag-dia:last-child { border-bottom: 0; }
.ag-dia .ag-item:last-child { border-bottom: 0; }
.ag-dia-titulo { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--terracota); margin: 14px 0 2px; }
.ag-item-nome { font-size: 12px; font-weight: 700; color: var(--azul-egipcio-escuro); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-item-det { font-size: 11px; margin-top: 2px; opacity: .8; }

/* FINANCEIRO (financeiro.js): só forma; cores das variáveis do tema */
.fin-coluna { max-width: 640px; margin: 0 auto; }
.fin-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.fin-mes { display: flex; align-items: center; justify-content: space-between; }
.fin-total-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.acoes-fin { display: flex; gap: 6px; }
.fin-total { font-size: 26px; font-weight: 800; color: var(--terracota); margin: 2px 0 8px; }
.fin-area { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; padding: 5px 0; border-bottom: var(--contorno-fino) solid var(--azul-egipcio-claro); }
.fin-area:last-child { border-bottom: 0; }
.fin-pct { opacity: .75; }
.fin-area strong { color: var(--azul-egipcio-escuro); }
.fin-linha { display: grid; grid-template-columns: 62px 1fr auto; gap: 10px; align-items: center; padding: 10px 4px; border-bottom: var(--contorno-fino) solid var(--azul-egipcio-claro); cursor: pointer; }
.fin-linha:hover .fin-nome { color: var(--terracota); }
.fin-data { font-size: 12px; opacity: .8; }
.fin-nome { font-size: 13px; font-weight: 700; color: var(--azul-egipcio-escuro); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-det { font-size: 11px; opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-valor { font-size: 13px; font-weight: 700; white-space: nowrap; }
#financeiro-container input, #financeiro-container select { box-sizing: border-box; max-width: 100%; min-width: 0; }
.fin-linha:last-child { border-bottom: 0; }

/* RELATÓRIO — telas de configuração e edição (relatorio.js). Só forma; cores das variáveis do tema. O documento (folhas/PDF) tem CSS próprio. */
.re-coluna { max-width: 720px; margin: 0 auto; }
.re-bloco { padding: 2px 0; }
.re-bloco-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 4px; }
.re-rotulo { display: block; margin: 12px 0 2px; color: var(--preto-tinta); }
.re-bloco > .re-rotulo:first-child { margin-top: 0; }
.re-ajuda { font-size: 11.5px; line-height: 1.5; margin: 4px 0 10px; opacity: .85; }
.re-ajuda a, .re-nota a { color: var(--terracota); font-weight: 700; }
.re-nota { font-size: 11.5px; line-height: 1.5; margin: 8px 0; color: var(--terracota); }
.re-nota .icone, .re-inline-icone .icone { vertical-align: -3px; }
.re-acoes { margin-top: 16px; }
.re-grupo { margin-bottom: 10px; }
.re-cliente { font-size: 12px; font-weight: 700; color: var(--terracota); margin: 8px 0 2px; }
.re-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0 8px 9px; border-left: 3px solid transparent; border-bottom: var(--contorno-fino) solid var(--azul-egipcio-claro); cursor: pointer; }
.re-item.atual { border-left-color: var(--terracota); }
.re-item-simples { cursor: default; padding-left: 0; border-left: 0; }
.re-item-nome { font-size: 12.5px; font-weight: 700; color: var(--azul-egipcio-escuro); }
.re-item:not(.re-item-simples):hover .re-item-nome { color: var(--terracota); }
.re-item-acoes { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.re-add { padding-left: 0; border-left: 0; }
.re-aviso-curto { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); padding: 10px 18px; font: 700 13px Montserrat, sans-serif; z-index: 100000; color: var(--terracota); }

/* linhas do editor (bloco de texto / página de ferramenta): linha em cima e embaixo, como o cartão */
.re-linha { border-top: var(--contorno-fino) solid var(--azul-egipcio-claro); border-bottom: var(--contorno-fino) solid var(--azul-egipcio-claro); margin-bottom: 10px; padding: 10px 0; }
.re-linha-topo { display: flex; align-items: center; gap: 10px; }
.re-setas { display: flex; flex-direction: column; flex-shrink: 0; }
.re-setas .botao-icone { width: 26px; height: 20px; }
.re-linha-nome { flex: 1; font-size: 13px; font-weight: 700; color: var(--azul-egipcio-escuro); }
.re-linha-nome.custom { font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--terracota); }
.re-linha-indice, .re-linha-campos { padding: 4px 0 0 38px; }
.re-linha-campos .modal-input { margin-bottom: 8px; }
.re-etiqueta { font-size: 11px; font-weight: 700; color: var(--azul-egipcio-claro); white-space: nowrap; flex-shrink: 0; }
.re-etiqueta.falta { color: var(--ocre); }
.re-opcoes-linha { display: flex; gap: 18px; flex-wrap: wrap; }
.re-opcao-radio { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--azul-egipcio-escuro); cursor: pointer; }
.re-linha-check { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 10px; border-top: var(--contorno-fino) solid var(--azul-egipcio-claro); }
.re-linha-check label { font-size: 12px; font-weight: 700; color: var(--azul-egipcio-escuro); cursor: pointer; }
.re-cores-custom { margin-top: 12px; display: flex; gap: 16px; flex-wrap: wrap; }
.re-cor { width: 44px; height: 32px; padding: 0; border: var(--contorno-fino) solid var(--azul-egipcio-claro); background: transparent; cursor: pointer; }
.re-previa-capa { margin-top: 10px; }
.re-miniatura { max-width: 160px; max-height: 160px; display: block; border-top: var(--contorno-fino) solid var(--azul-egipcio-claro); border-bottom: var(--contorno-fino) solid var(--azul-egipcio-claro); }
.rel-capa-swatches { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.rel-capa-swatch { position: relative; width: 68px; cursor: pointer; text-align: center; }
.rel-capa-swatch-cor { width: 100%; height: 44px; border: var(--contorno-fino) solid var(--azul-egipcio-claro); display: flex; align-items: center; justify-content: center; font-family: 'Cinzel', serif; font-weight: 800; font-size: 13px; }
.rel-capa-swatch-custom-icone { color: var(--azul-egipcio-escuro); }
.rel-capa-swatch.ativa .rel-capa-swatch-cor { outline: 2px solid var(--terracota); outline-offset: 1px; }
.rel-capa-swatch-nome { font-size: 9.5px; font-weight: 700; margin-top: 4px; line-height: 1.3; }
.rel-capa-swatch.ativa .rel-capa-swatch-nome { color: var(--terracota); }
.rel-capa-swatch-check { position: absolute; top: -8px; right: -6px; display: inline-flex; color: var(--terracota); background: var(--fundo-creme); }

/* barras fixas do módulo (editor: Voltar/Editar/Prévia/Salvar; relatório pronto: Voltar/Editar/Baixar PDF): entre duas linhas duplas, como a barra superior */
.rel-editor-tabs, .rel-toolbar {
    position: fixed; top: calc(var(--topbar-topo) + var(--topbar-altura) + var(--topbar-folga)); left: 10px; right: 10px; z-index: 50; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 0; row-gap: 0;
    background: var(--fundo-creme); padding: 8px 14px; border: 0;
    border-top: var(--divisa-espessura) double var(--azul-egipcio-claro); border-bottom: var(--divisa-espessura) double var(--azul-egipcio-claro);
}
.rel-toolbar { justify-content: center; gap: 18px; }
.rel-toolbar .botao-texto, .rel-editor-btn-salvar { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
/* tudo junto, num grupo só: Voltar, Editar, Prévia, Salvar — e ao lado, o grupo da formatação; os dois centralizados na barra */
.rel-editor-tabs-conteudo { flex: 0 0 auto; display: flex; align-items: center; gap: 18px; }
.rel-editor-tabs-grupo { display: flex; gap: 18px; }
.rel-editor-tab.ativa { color: var(--terracota); border-bottom-color: var(--terracota); }
.rel-previa-aviso { max-width: 720px; margin: 0 auto 16px auto; padding: 8px 0; font-size: 12px; font-weight: 700; color: var(--terracota); border-top: var(--contorno-fino) solid var(--ocre); border-bottom: var(--contorno-fino) solid var(--ocre); }
.rel-previa-aviso .icone { vertical-align: -3px; }

/* texto: Quill é o "papel" do relatório; só a moldura segue o sistema */
.rel-quill-mount .ql-toolbar.ql-snow, .rel-quill-mount .ql-container.ql-snow { border: var(--contorno-fino) solid var(--azul-egipcio-claro); }
.rel-quill-mount .ql-toolbar.ql-snow { border-bottom: 0; }
.rel-editor-tela input[type="text"], .rel-setup-tela select, .rel-editor-tela select {
    box-sizing: border-box; width: 100%; padding: 6px 0; font-family: inherit; font-size: 13px; outline: none;
    color: var(--preto-tinta); background: transparent; border: 0; border-bottom: var(--contorno-fino) solid var(--azul-egipcio-claro); border-radius: 0;
}
.rel-editor-tela .ql-container input[type="text"] { width: auto; }
.rel-editor-tela .ql-toolbar input[type="text"] { width: auto; padding: 0; border: 0; }

/* janela "Inserir imagem de uma captura" */
#relSeletorImagemOverlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 23, 42, 0.5); display: flex; align-items: center; justify-content: center; z-index: 2000; padding: 20px; }
.rel-seletor-imagem-lista { display: flex; flex-direction: column; gap: 16px; }
.rel-seletor-imagem-grupo-titulo { font-family: 'Cinzel', serif; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--preto-tinta); margin-bottom: 6px; }
.rel-seletor-imagem-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.rel-seletor-imagem-item { overflow: hidden; cursor: pointer; border-top: var(--contorno-fino) solid var(--azul-egipcio-claro); border-bottom: var(--contorno-fino) solid var(--azul-egipcio-claro); }
.rel-seletor-imagem-item:hover { border-color: var(--terracota); }
.rel-seletor-imagem-item img { width: 100%; height: 80px; object-fit: cover; display: block; }
.re-grupo .re-item:last-child { border-bottom: 0; }
.re-grupo { margin-bottom: 0; }

/* JANELA (caixa de diálogo que abre por cima da tela): folha reta entre duas linhas duplas, com sombra; a borda é da janela e o
   conteúdo rola dentro de .janela-corpo. Campos só com a linha embaixo; botões de texto; rótulos pequenos em preto de tinta. */
.janela {
    position: relative; box-sizing: border-box; max-width: 100%;
    background: var(--fundo-creme); color: var(--preto-tinta);
    border: 0; border-top: var(--divisa-espessura) double var(--azul-egipcio-claro); border-bottom: var(--divisa-espessura) double var(--azul-egipcio-claro);
    box-shadow: var(--sombra-janela, none); font-family: 'Montserrat', sans-serif;
}
.janela-corpo { box-sizing: border-box; max-height: 88vh; overflow-y: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 4px; }
.janela-corpo > * { flex-shrink: 0; }
.janela label { display: block; margin: 10px 0 0; font-family: 'Cinzel', serif; font-weight: 700; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--preto-tinta); }
.janela .modal-input, .janela .modal-select, .janela input[type="text"], .janela input[type="date"] {
    box-sizing: border-box; width: 100%; padding: 6px 0; font-family: inherit; font-size: 13px; outline: none;
    color: var(--preto-tinta); background: transparent; border: 0; border-bottom: var(--contorno-fino) solid var(--azul-egipcio-claro); border-radius: 0;
}
.janela input[type="date"] { -webkit-appearance: none; appearance: none; min-height: 36px; }
.janela .modal-input:focus, .janela .modal-select:focus { border-bottom-color: var(--terracota); }
.janela .modal-input::placeholder { color: var(--preto-tinta); opacity: .55; }
.janela input[type="checkbox"] {
    -webkit-appearance: none; appearance: none; background: transparent; width: 16px; height: 16px; margin: 0; cursor: pointer; flex: 0 0 auto;
    border: 1.5px solid var(--azul-egipcio-escuro); border-radius: 0; position: relative;
}
.janela input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 4px; top: 0; width: 4px; height: 9px; border: solid var(--terracota); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.janela .janela-check { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-family: inherit; font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--azul-egipcio-escuro); font-weight: 700; cursor: pointer; }
.janela-acoes { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 18px; }
.janela-linha-botoes { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.janela-linha-botoes .botao-texto { text-align: center; padding: 8px 10px; }
.janela .botao-texto.janela-sec { color: var(--azul-egipcio-escuro); border-top-color: var(--azul-egipcio-escuro); border-bottom-color: var(--azul-egipcio-escuro); }
.janela .botao-texto.janela-apagar { color: var(--terracota); }
.janela-subbloco { margin-top: 8px; padding: 6px 0 10px; border-top: var(--contorno-fino) solid var(--azul-egipcio-claro); border-bottom: var(--contorno-fino) solid var(--azul-egipcio-claro); }
.janela-linha { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: var(--contorno-fino) solid var(--azul-egipcio-claro); }
.janela-linha-nome { font-size: 13px; font-weight: 700; color: var(--azul-egipcio-escuro); }
.janela-linha-det { font-size: 11px; margin-top: 2px; opacity: .8; }
.janela-linha-acoes { display: flex; gap: 2px; flex-shrink: 0; }
.janela-linha-check { justify-content: flex-start; gap: 10px; margin: 0; font-family: inherit; font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: 700; color: var(--azul-egipcio-escuro); cursor: pointer; }
.janela-sugestoes { margin-top: 4px; max-height: 220px; overflow-y: auto; border-top: var(--contorno-fino) solid var(--azul-egipcio-claro); border-bottom: var(--contorno-fino) solid var(--azul-egipcio-claro); background: var(--fundo-creme); }
.janela-sugestao { padding: 9px 4px; font-size: 13px; cursor: pointer; border-bottom: var(--contorno-fino) solid var(--azul-egipcio-claro); }
.janela-sugestao:last-child { border-bottom: 0; }
.janela-sugestao:hover { color: var(--terracota); }
.janela-msg { font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.janela-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 6px; margin-bottom: 4px; border-bottom: var(--contorno-fino) solid var(--azul-egipcio-claro); }
.janela-rotulo-linha { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.janela-rotulo-linha .botao-texto { padding: 2px 8px; }
.janela textarea, .janela .modal-textarea {
    box-sizing: border-box; width: 100%; height: 160px; padding: 6px 8px; font-family: monospace; font-size: 12px; outline: none; resize: vertical;
    color: var(--preto-tinta); background: transparent; border: var(--contorno-fino) solid var(--azul-egipcio-claro); border-radius: 0;
}
.janela .modal-textarea::placeholder { color: var(--preto-tinta); opacity: .55; }
.janela .city-results { max-height: 140px; overflow-y: auto; border-top: var(--contorno-fino) solid var(--azul-egipcio-claro); border-bottom: var(--contorno-fino) solid var(--azul-egipcio-claro); border-left: 0; border-right: 0; border-radius: 0; background: var(--fundo-creme); }
.janela .city-item { padding: 8px 4px; font-size: 12px; cursor: pointer; border-bottom: var(--contorno-fino) solid var(--azul-egipcio-claro); }
.janela .city-item:last-child { border-bottom: 0; }
.janela .city-item:hover { background: transparent; color: var(--terracota); }
.janela-corpo > div { min-width: 0; }
.janela .re-ajuda { margin: 0 0 4px; }
.janela .titulo-secao { margin: 0 0 4px; }
/* botão de texto em foco (ex.: o OK das caixas de aviso, que já abre focado): sem o quadrado do navegador — o botão já tem as linhas, não precisa de moldura de foco */
.botao-texto:focus, .btn-submit:focus, .btn-primary:focus, .btn-secondary:focus { outline: none; }

/* BARRA DE FORMATAÇÃO DO TEXTO (Quill): segunda linha da barra fixa Editar/Prévia/Salvar (relatorio.js, ativarBarraFlutuanteQuill).
   Mesmo papel da barra de cima: sem fundo próprio, só tinta (azul-noite) e terracota no que está ativo. */
.rel-barra-formatacao { flex: 0 1 auto; display: flex; align-items: center; min-width: 0; padding-left: 18px; }
.rel-barra-formatacao .ql-toolbar.ql-snow { border: 0; background: transparent; padding: 0; width: auto; text-align: left; font-family: inherit; }
.rel-barra-formatacao .ql-snow .ql-stroke { stroke: var(--preto-tinta); }
.rel-barra-formatacao .ql-snow .ql-fill, .rel-barra-formatacao .ql-snow .ql-stroke.ql-fill { fill: var(--preto-tinta); }
.rel-barra-formatacao .ql-snow .ql-picker { color: var(--preto-tinta); }
.rel-barra-formatacao .ql-snow button:hover .ql-stroke, .rel-barra-formatacao .ql-snow button.ql-active .ql-stroke,
.rel-barra-formatacao .ql-snow .ql-picker-label:hover .ql-stroke, .rel-barra-formatacao .ql-snow .ql-picker-label.ql-active .ql-stroke { stroke: var(--terracota); }
.rel-barra-formatacao .ql-snow button:hover .ql-fill, .rel-barra-formatacao .ql-snow button.ql-active .ql-fill { fill: var(--terracota); }
.rel-barra-formatacao .ql-snow .ql-picker-label:hover, .rel-barra-formatacao .ql-snow .ql-picker-label.ql-active,
.rel-barra-formatacao .ql-snow .ql-picker-item:hover, .rel-barra-formatacao .ql-snow .ql-picker-item.ql-selected { color: var(--terracota); }
.rel-barra-formatacao .ql-snow .ql-picker-options { background: var(--fundo-creme); border: var(--contorno-fino) solid var(--azul-egipcio-claro); box-shadow: none; }
.rel-barra-formatacao .ql-snow .ql-picker-label { border-color: transparent; }

/* o vão a mais entre a barra do sistema e a do relatório (20px em vez de 10px) também vale pro espaço reservado do conteúdo */
#relEditorEspacadorBarra, #relToolbarEspacador { margin-top: 10px; }