/* ==========================================================================
   App da Catedral da Sé — TEMA CLARO (só para funcionários; build/conta/PROJETO-tema-claro.md, 12/11/2026)
   Carregado DEPOIS do conta.css. TODAS as regras ficam debaixo de :root[data-tema="claro"]: sem esse atributo
   este arquivo não faz nada e o escuro de sempre continua idêntico.
   Mesma identidade: Marcellus nos títulos, Mulish no texto, o ouro como destaque (escurecido para ser lido no claro).
   Fundo pergaminho, cartões claros com linha fina e sombra leve, texto em tinta. Contraste medido no DOM real:
   texto >= 4,5:1 (grande >= 3:1); ícones e contornos de controle >= 3:1.
   ILHAS ESCURAS (continuam como no escuro; dentro delas as variáveis do escuro voltam): a abertura, as capas com foto
   (com os números e o selo da conta), o topo enquanto está sobre a capa, as miniaturas de vídeo, os cartões com foto de
   Visitar, o tour, o player do Ao vivo e o das folhas, o recorte da foto e o aviso flutuante.
   LOGO (regra do Théo): só a branca oficial, sem filtro nem cor nova. Ela só aparece com o topo sobre a capa escura, com
   a faixa escura que já existe atrás dela (.ap-topo::before); quando o topo fica sólido (claro) a logo some e entra o
   título, como no escuro. A capa curta garante escuro atrás da logo até esse instante (seção 2).
   Cores que vêm do JS: as etiquetas da agenda (app.js, style="color:#...") e o "Atenção" da folha Excluir (conta.js)
   são ajustadas aqui por seletor de atributo (com !important, porque o estilo vem na própria marcação).
   ========================================================================== */

/* ---------- 1. as variáveis ---------- */
:root[data-tema="claro"]{
  --tinta:#f6f2e9;--tinta2:#fbf8f1;--tinta3:#ffffff;--vidro:rgba(251,248,241,.86);
  --ouro:#7d5f1a;--ouro-claro:#6f5418;--ouro-fundo:rgba(161,126,44,.10);
  --texto:#1c1a16;--dim:#5f5a4e;--mute:#6a655a;--linha:rgba(138,106,31,.30);--sutil:rgba(28,26,22,.11);
  --vivo:#0f7c76;--vivo-claro:#0d6e69;--verde:#2f8a4c;--roxo:#7a4bb5;--vermelho:#b8322b;--branco:#f3ead2;--rosa:#c0577e;
  /* só do claro: cartão, borda de controle (3:1 com o fundo), sombra leve e o vermelho dos erros */
  --cartao:#fffdf8;--linha-ctl:#8a7a55;
  --sombra:0 1px 2px rgba(60,45,20,.06),0 10px 26px -16px rgba(60,45,20,.30);
  --erro:#a3302a;--erro-forte:#8f2a24;--erro-borda:#b8463e;
  color-scheme:light;
}
:root[data-tema="claro"] ::selection{background:rgba(161,126,44,.26);color:inherit}

/* ---------- 2. as ilhas escuras: dentro delas voltam as variáveis do escuro (e a cor do texto herdado) ---------- */
:root[data-tema="claro"] .ap-abertura,
:root[data-tema="claro"] .ap-topo:not(.solido),
:root[data-tema="claro"] .ap-capa,
:root[data-tema="claro"] .ap-midia .th,
:root[data-tema="claro"] .ap-lugar,
:root[data-tema="claro"] .ap-tour,
:root[data-tema="claro"] .ap-tela-player,
:root[data-tema="claro"] .ap-player,
:root[data-tema="claro"] .cc-crop-area,
:root[data-tema="claro"] .ap-aviso{
  --tinta:#05070c;--tinta2:#0a0e17;--tinta3:#111725;--vidro:rgba(10,14,23,.78);
  --ouro:#c9a24b;--ouro-claro:#ecd095;--ouro-fundo:rgba(201,162,75,.10);
  --texto:#efe9dc;--dim:#b3ae9f;--mute:#80827a;--linha:rgba(201,162,75,.24);--sutil:rgba(255,255,255,.08);
  --vivo:#2da49f;--vivo-claro:#5cc6bd;--verde:#3f9b5a;--roxo:#8d5fc6;--vermelho:#cc463e;--branco:#f3ead2;--rosa:#e79bb6;
  color-scheme:dark;color:var(--texto);
}
/* a capa: o MESMO véu do escuro (dentro da ilha, var(--tinta) volta a ser #05070c, então ela termina no mesmo escuro);
   como embaixo agora é o pergaminho, a borda de baixo ganha cantos arredondados em vez de se fundir ao fundo */
:root[data-tema="claro"] .ap-capa{border-radius:0 0 26px 26px}
/* LOGO (regra do Théo: só a branca oficial, sempre com escuro atrás). O topo só fica sólido (e a logo some) aos 32% da
   altura da tela (app.js); numa tela baixa, a capa curta acabaria rente à logo nesse instante e, no claro, logo abaixo
   já é o pergaminho. Nas telas de até 700 px de altura, a capa curta ganha a altura que deixa 20 px de capa escura
   embaixo da logo até o topo ficar sólido. Nas outras telas, nada muda. */
@media (max-height:700px){
  :root[data-tema="claro"] .ap-capa.curta{min-height:calc(32vh + 70px + var(--st))}
}

/* ---------- 3. página, coluna e fundo do computador ---------- */
:root[data-tema="claro"] .ap{box-shadow:0 0 0 1px rgba(28,26,22,.05)}
@media (min-width:700px){
  :root[data-tema="claro"] body{background:radial-gradient(ellipse 80% 60% at 50% 0%,#fffdf7,#e9e2d2 70%) fixed}
  :root[data-tema="claro"] .ap{box-shadow:0 0 90px rgba(70,52,20,.16),0 0 0 1px rgba(138,106,31,.16)}
}

/* ---------- 4. topo (claro só quando fica sólido; sobre a capa ele é ilha, com a faixa escura atrás da logo) ---------- */
/* quase opaco: sobre a capa escura, o vidro mais transparente acinzentava a barra e a borda dos botões ia abaixo de 3:1 */
:root[data-tema="claro"] .ap-topo.solido{background:rgba(246,242,233,.97);box-shadow:0 1px 0 var(--sutil),0 8px 24px -18px rgba(60,45,20,.35)}
:root[data-tema="claro"] .ap-topo.solido .ap-menu-bt,
:root[data-tema="claro"] .ap-topo.solido .ap-avatar{background:rgba(255,253,248,.82);border-color:var(--linha-ctl);color:var(--texto)}
:root[data-tema="claro"] .ap-topo.solido .ap-avatar.logado{border-color:var(--linha-ctl)}
:root[data-tema="claro"] .ap-topo.solido .ap-avatar.func{border-color:var(--ouro)}
:root[data-tema="claro"] .ap-topo.solido .ap-avatar.func::after{background:conic-gradient(from 0deg,rgba(161,126,44,0) 0 66%,rgba(161,126,44,.35) 86%,rgba(122,94,30,.95) 98%,rgba(161,126,44,0) 100%)}
/* as iniciais (sem foto), FORA das ilhas (no topo sólido e no cartão do Perfil), ganham a "moeda" clara do crachá gerado:
   o mesmo dourado e a mesma tinta do círculo do crachá. Na capa e no topo sobre a capa (ilhas), ficam como no escuro. */
:root[data-tema="claro"] .ap-topo.solido .ap-avatar .ap-av,
:root[data-tema="claro"] .cc-foto-card .cc-av .in{background:linear-gradient(140deg,#f7eed6 0%,#e7d3a1 100%);color:#5f4a16}

/* ---------- 5. abas de baixo ---------- */
:root[data-tema="claro"] .ap-abas{background:rgba(250,247,240,.93);box-shadow:0 -8px 24px -18px rgba(60,45,20,.35)}
:root[data-tema="claro"] .ap-aba[aria-current="page"]::before{box-shadow:0 0 10px rgba(161,126,44,.45)}

/* ---------- 6. cartões, botões e seções ---------- */
:root[data-tema="claro"] .ap-card{background:linear-gradient(180deg,#fffefb,#fcf9f2);box-shadow:var(--sombra)}
:root[data-tema="claro"] .ap-card.ouro{background:linear-gradient(160deg,#f5e9cc,#faf4e6 55%,#fffdf8)}
:root[data-tema="claro"] .ap-bt{background:rgba(255,253,248,.85);border-color:var(--linha-ctl)}
:root[data-tema="claro"] .ap-bt.cheio{background:linear-gradient(180deg,#e2c27a,#c9a24b);border-color:transparent;box-shadow:inset 0 -1px 0 rgba(90,64,10,.25),0 1px 2px rgba(90,64,10,.22),0 6px 16px -10px rgba(90,64,10,.55)}
:root[data-tema="claro"] .ap-bt.on{border-color:var(--ouro);background:linear-gradient(180deg,rgba(161,126,44,.22),rgba(161,126,44,.10))}
:root[data-tema="claro"] .ap-aovivo-card{border-color:rgba(15,124,118,.45)!important;background:linear-gradient(160deg,#d6eeeb,#ecf6f4 60%,#fffdf8)!important}
:root[data-tema="claro"] .ap-atalho{background:linear-gradient(180deg,#fffefb,#fcf9f2);box-shadow:var(--sombra)}
:root[data-tema="claro"] .ap-midia{background:var(--cartao);box-shadow:var(--sombra)}
:root[data-tema="claro"] .ap-midia.grande{background:none;box-shadow:none}
:root[data-tema="claro"] .ap-chip{background:var(--cartao);border-color:var(--linha-ctl)}
:root[data-tema="claro"] .ap-chip[aria-pressed="true"]{border-color:var(--ouro);background:#f3e8cd}
:root[data-tema="claro"] .ap-seg{background:rgba(28,26,22,.05)}
:root[data-tema="claro"] .ap-seg button[aria-selected="true"]{background:var(--cartao);box-shadow:0 1px 2px rgba(60,45,20,.14),0 0 0 1px rgba(138,106,31,.40)}
:root[data-tema="claro"] .ap-busca{background:var(--cartao);border-color:var(--linha-ctl)}
:root[data-tema="claro"] .ap-busca:focus-within{border-color:var(--ouro);box-shadow:0 0 0 3px rgba(161,126,44,.20)}
:root[data-tema="claro"] .ap-dia{background:var(--cartao)}
:root[data-tema="claro"] .ap-dia.hoje{background:#f6edd8}
:root[data-tema="claro"] .ap-ev{background:var(--cartao);box-shadow:var(--sombra)}
:root[data-tema="claro"] .ap-ev .add{border-color:var(--linha-ctl)}
:root[data-tema="claro"] .ap-ev .add.on{background:linear-gradient(180deg,rgba(161,126,44,.24),rgba(161,126,44,.12));border-color:var(--ouro)}
/* as etiquetas da agenda recebem a cor pelo app.js (style="color:#..."): o mesmo tom, escurecido para o claro */
:root[data-tema="claro"] .ap-ev .tg[style*="7fb7e6" i]{color:#2f6497!important}
:root[data-tema="claro"] .ap-ev .tg[style*="e8c77a" i]{color:#7d5f1a!important}
:root[data-tema="claro"] .ap-ev .tg[style*="b48ad6" i]{color:#6a43a8!important}
:root[data-tema="claro"] .ap-ev .tg[style*="5fc9c3" i]{color:#0d6e69!important}
:root[data-tema="claro"] .ap-fo{background:var(--cartao);box-shadow:var(--sombra)}
:root[data-tema="claro"] .ap-fo.prox{background:#f6edd8}
:root[data-tema="claro"] .ap-fo .ls a{border-color:var(--linha-ctl);background:rgba(255,253,248,.7)}
:root[data-tema="claro"] .ap-tela-player{box-shadow:0 22px 50px -22px rgba(40,30,10,.55),0 0 0 1px var(--linha)}
:root[data-tema="claro"] .ap-lugar{box-shadow:var(--sombra)}
:root[data-tema="claro"] .ap-tour{box-shadow:var(--sombra)}
:root[data-tema="claro"] .ap-instale{background:linear-gradient(160deg,#f5e9cc,#fbf6ea)}
:root[data-tema="claro"] .ap-rodape .redes a{border-color:var(--linha-ctl)}

/* ---------- 7. folhas, visor e avisos ---------- */
:root[data-tema="claro"] .ap-folha-fundo{background:rgba(36,30,18,.42)}
:root[data-tema="claro"] .ap-folha-caixa{background:linear-gradient(180deg,#fffdf8,#f7f3ea);box-shadow:0 -14px 40px rgba(40,30,10,.18)}
:root[data-tema="claro"] .ap-folha-pega{background:rgba(28,26,22,.22)}
:root[data-tema="claro"] .ap-pix code{background:rgba(28,26,22,.04)}
:root[data-tema="claro"] .ap-visor-bar{background:rgba(250,247,240,.97)}
:root[data-tema="claro"] .ap-visor-x{border-color:var(--linha-ctl)}
/* o visor mostra as páginas do SITE, que são escuras: o fundo do quadro fica escuro para não piscar claro ao carregar */
:root[data-tema="claro"] .ap-visor iframe{background:#05070c}
/* iPhone e iPad com o app INSTALADO: a barra do sistema é "black-translucent" (o relógio e a bateria são SEMPRE brancos e
   ficam por cima do app, numa faixa da altura de env(safe-area-inset-top), o --st). No claro, essa faixa continua escura
   atrás do topo sólido e da barra do visor, para o relógio seguir legível. Fora do app instalado no iPhone, o --st é 0 e a
   faixa não aparece (Android, computador e navegador ficam exatamente como estão). */
:root[data-tema="claro"] .ap-topo.solido,
:root[data-tema="claro"] .ap-visor-bar{background-image:linear-gradient(#05070c,#05070c);background-repeat:no-repeat;background-position:0 0;background-size:100% var(--st)}
/* a seta que aponta o botão do navegador continua no ouro claro (o --ouro-claro do claro é escuro demais para o ícone) */
:root[data-tema="claro"] .ap-seta{background:#ecd095;box-shadow:0 10px 30px rgba(40,30,10,.35)}
/* o aviso flutuante é ilha (escuro nos dois temas, como um "snackbar"): o fundo opaco dá a MESMA cor que ele tem sobre o
   escuro (#121826 a 96% sobre #05070c = #111725) e a sombra preta pesada do escuro vira sombra leve sobre o pergaminho */
:root[data-tema="claro"] .ap-aviso{background:#111725;box-shadow:0 12px 30px -10px rgba(40,30,10,.45)}

/* ---------- 8. Minha conta: cabeçalho, abas e blocos ---------- */
:root[data-tema="claro"] .cc-abas-wrap{background:linear-gradient(180deg,var(--tinta) 0 80%,rgba(246,242,233,0))}
:root[data-tema="claro"] .cc-aba{background:var(--cartao);border-color:var(--linha-ctl)}
:root[data-tema="claro"] .cc-aba[aria-selected="true"]{border-color:var(--ouro);background:linear-gradient(180deg,#f2e5c4,#f8f0dc)}
:root[data-tema="claro"] .cc-link{text-decoration-color:rgba(111,84,24,.45)}
:root[data-tema="claro"] .cc-voltar{border-color:var(--linha-ctl)}
/* o anel do funcionário na foto do Perfil (na capa ele continua como no escuro) */
:root[data-tema="claro"] .cc-foto-card .cc-av.anel::before{border-color:rgba(138,106,31,.85)}
:root[data-tema="claro"] .cc-foto-card .cc-av.anel::after{background:conic-gradient(from 0deg,rgba(161,126,44,0) 0 64%,rgba(161,126,44,.35) 84%,rgba(122,94,30,.95) 98%,rgba(161,126,44,0) 100%)}
:root[data-tema="claro"] .cc-benef .ic{background:rgba(161,126,44,.10)}

/* ---------- 9. formulários ---------- */
:root[data-tema="claro"] .cc-in{border-color:var(--linha-ctl);background:#fffefb}
:root[data-tema="claro"] .cc-in:focus-within{border-color:var(--ouro);background:#fff;box-shadow:0 0 0 3px rgba(161,126,44,.22)}
:root[data-tema="claro"] .cc-in select option{background:#fffdf8;color:var(--texto)}
:root[data-tema="claro"] .cc-campo.erro .cc-in{border-color:var(--erro-borda);box-shadow:0 0 0 3px rgba(184,50,43,.12)}
:root[data-tema="claro"] .cc-erro{color:var(--erro)}
:root[data-tema="claro"] .cc-forca i{background:rgba(28,26,22,.12)}
:root[data-tema="claro"] .cc-forca[data-n="1"] i:nth-child(1){background:#c2493f}
:root[data-tema="claro"] .cc-forca[data-n="1"] span{color:var(--erro)}
:root[data-tema="claro"] .cc-forca[data-n="2"] i:nth-child(-n+2){background:#c98a2e}
:root[data-tema="claro"] .cc-forca[data-n="2"] span{color:#8a5a0f}
:root[data-tema="claro"] .cc-check .bx{border-color:var(--linha-ctl);background:var(--cartao)}
:root[data-tema="claro"] .cc-check input:checked+.bx{background:var(--ouro);border-color:var(--ouro);color:#fff}
:root[data-tema="claro"] .cc-campo.erro .cc-check .bx{border-color:var(--erro-borda)}
:root[data-tema="claro"] .cc-op span{background:var(--cartao);border-color:var(--linha-ctl)}
:root[data-tema="claro"] .cc-op input:checked+span{border-color:var(--ouro);background:linear-gradient(180deg,#f2e5c4,#f8f0dc)}
:root[data-tema="claro"] .cc-msg.erro{color:var(--erro-forte);border-color:rgba(184,50,43,.40);background:#fbeceb}
:root[data-tema="claro"] .cc-msg.ok{color:#0b5f5a;border-color:rgba(15,124,118,.35);background:#e5f3f1}
:root[data-tema="claro"] .cc-msg.info{background:rgba(161,126,44,.08)}
:root[data-tema="claro"] .cc-perigo{border-color:var(--erro-borda)!important;color:var(--erro)!important;background:rgba(184,50,43,.05)!important}
:root[data-tema="claro"] .cc-perigo.cheio{background:linear-gradient(180deg,#b8433b,#a3352e)!important;color:#fff!important;border-color:transparent!important}
/* o "Atenção" da folha "Excluir a conta" vem com style="color:#f2a49c" do conta.js */
:root[data-tema="claro"] .ap-eyebrow[style*="f2a49c" i]{color:var(--erro)!important}

/* ---------- 10. listas, selos, vazios e "carregando" ---------- */
:root[data-tema="claro"] .cc-item{background:var(--cartao);box-shadow:var(--sombra)}
:root[data-tema="claro"] .cc-tx .cc-tag.t-missa{color:#0d6e69}
:root[data-tema="claro"] .cc-tx .cc-tag.t-agenda{color:#7d5f1a}
:root[data-tema="claro"] .cc-tx .cc-tag.t-reserva{color:#6a43a8}
:root[data-tema="claro"] .cc-ico-bt{border-color:var(--linha-ctl)}
:root[data-tema="claro"] .cc-ico-bt:hover,:root[data-tema="claro"] .cc-ico-bt:focus-visible{color:var(--erro);border-color:var(--erro-borda)}
:root[data-tema="claro"] .cc-conf button{border-color:var(--linha-ctl);background:var(--cartao)}
:root[data-tema="claro"] .cc-conf button.sim{border-color:var(--erro-borda);color:var(--erro)}
:root[data-tema="claro"] .cc-selo.nao_localizada,:root[data-tema="claro"] .cc-selo.cancelada,:root[data-tema="claro"] .cc-selo.recusada{color:var(--erro)}
:root[data-tema="claro"] .cc-vazio{background:rgba(255,253,248,.6)}
:root[data-tema="claro"] .cc-vazio .ic{background:rgba(161,126,44,.10)}
:root[data-tema="claro"] .cc-esq{background:linear-gradient(90deg,rgba(28,26,22,.045) 0%,rgba(28,26,22,.10) 45%,rgba(28,26,22,.045) 90%);background-size:220% 100%}
:root[data-tema="claro"] .cc-falha{border-color:rgba(184,50,43,.30);background:rgba(184,50,43,.04)}
:root[data-tema="claro"] .cc-dica{background:linear-gradient(160deg,#f5e9cc,#fbf6ea)}
:root[data-tema="claro"] .cc-dica>.ic{background:rgba(161,126,44,.14)}
:root[data-tema="claro"] .cc-sugestao{background:var(--cartao);box-shadow:var(--sombra)}

/* ---------- 11. mensagens e a conversa com a Administração ---------- */
:root[data-tema="claro"] .cc-conv{background:var(--cartao);box-shadow:var(--sombra)}
:root[data-tema="claro"] .cc-conv.nova{background:linear-gradient(160deg,#f6ecd3,#fffdf8)}
:root[data-tema="claro"] .cc-conv-ic{background:rgba(161,126,44,.10)}
:root[data-tema="claro"] .cc-conv-meta .pt{box-shadow:0 0 0 3px rgba(15,124,118,.16)}
:root[data-tema="claro"] .cc-dia{background:rgba(28,26,22,.05)}
:root[data-tema="claro"] .cc-bolha.eles{background:#f3eee3;border-color:rgba(28,26,22,.08)}
:root[data-tema="claro"] .cc-bolha.falhou{background:#fbe9e7;color:var(--erro-forte);border-color:rgba(184,50,43,.45)}
:root[data-tema="claro"] .cc-escrever{border-color:var(--linha-ctl);background:rgba(255,253,248,.97);box-shadow:0 12px 30px -12px rgba(60,45,20,.35)}
:root[data-tema="claro"] .cc-escrever:focus-within{border-color:var(--ouro)}
:root[data-tema="claro"] .ap-card .cc-escrever{background:#fbf8f1;box-shadow:none}

/* ---------- 12. doações, reservas e anexos (conta do fiel; ficam certos se aparecerem) ---------- */
:root[data-tema="claro"] .cc-pix code{background:rgba(28,26,22,.04)}
:root[data-tema="claro"] .cc-totais div{background:var(--cartao)}
:root[data-tema="claro"] .cc-totais div.conf{border-color:rgba(15,124,118,.30);background:linear-gradient(160deg,#dcefec,#f3f9f7)}
:root[data-tema="claro"] .cc-doa{background:var(--cartao);box-shadow:var(--sombra)}
:root[data-tema="claro"] .cc-doa .nota{background:rgba(28,26,22,.04)}
:root[data-tema="claro"] .cc-doa .acoes button,:root[data-tema="claro"] .cc-res .acoes button{border-color:var(--linha-ctl)}
:root[data-tema="claro"] .cc-doa .acoes button.apaga,:root[data-tema="claro"] .cc-res .acoes button.apaga{color:var(--erro)}
:root[data-tema="claro"] .cc-arquivo{background:rgba(255,253,248,.7)}
:root[data-tema="claro"] .cc-anexar{border-color:var(--linha-ctl);background:rgba(161,126,44,.06)}
:root[data-tema="claro"] .cc-res{background:var(--cartao);box-shadow:var(--sombra)}
:root[data-tema="claro"] .cc-res-ic{background:rgba(122,75,181,.10);border-color:rgba(122,75,181,.30);color:#6a43a8}

/* ---------- 13. avisos e perfil ---------- */
:root[data-tema="claro"] .cc-sw .ic{background:rgba(161,126,44,.10)}
:root[data-tema="claro"] .cc-sw .tg{background:#cdc5b3;box-shadow:inset 0 0 0 1px rgba(28,26,22,.10)}
:root[data-tema="claro"] .cc-sw .tg::after{background:#fff;box-shadow:0 1px 3px rgba(40,30,10,.35)}
:root[data-tema="claro"] .cc-sw input:checked~.tg{background:var(--ouro);box-shadow:none}
:root[data-tema="claro"] .cc-aparelho .ic{background:rgba(28,26,22,.05)}
:root[data-tema="claro"] .cc-aparelho.on .ic{background:rgba(15,124,118,.10);border-color:rgba(15,124,118,.40)}
:root[data-tema="claro"] .cc-aviso{background:var(--cartao);box-shadow:var(--sombra)}
:root[data-tema="claro"] .cc-aviso.novo{background:linear-gradient(160deg,#f6ecd3,#fffdf8)}
:root[data-tema="claro"] .cc-aviso .ic{background:rgba(161,126,44,.10)}
:root[data-tema="claro"] .cc-perigo-zona{border-color:rgba(184,50,43,.28);background:rgba(184,50,43,.035)}
:root[data-tema="claro"] .cc-perigo-zona h3{color:var(--erro)}
:root[data-tema="claro"] .cc-zoom button{border-color:var(--linha-ctl)}
:root[data-tema="claro"] .cc-ok-ic{background:rgba(15,124,118,.10);border-color:rgba(15,124,118,.40)}

/* ---------- 14. Área do Funcionário ---------- */
:root[data-tema="claro"] .cc-tempo div{background:linear-gradient(180deg,#fbf3df,#fffdf8)}
:root[data-tema="claro"] .cc-tempo-frase{background:linear-gradient(180deg,#fbf3df,#fffdf8)}
:root[data-tema="claro"] .cc-prox-folga{background:rgba(161,126,44,.07)}
:root[data-tema="claro"] .cc-cal{background:#fbf8f1}
:root[data-tema="claro"] .cc-cal-hd button{border-color:var(--linha-ctl)}
:root[data-tema="claro"] .cc-cal-g .d.ferias{background:rgba(15,124,118,.12)}
:root[data-tema="claro"] .cc-cal-g .d.ferias.pedida{background:none;border-color:rgba(15,124,118,.60)}
:root[data-tema="claro"] .cc-cal-g .d.folga.sel{box-shadow:0 0 0 3px #fbf8f1,0 0 0 5px var(--ouro)}
/* os dias que já passaram continuam mais apagados que os de agora, mas legíveis (4,5:1; no escuro era a opacidade .38) */
:root[data-tema="claro"] .cc-cal-g .d.passado{opacity:1;color:#77716a}
:root[data-tema="claro"] .cc-cal-g .d.folga.passado{background:linear-gradient(180deg,#f2e8cc,#e9d9ae);color:#5f4a16}
:root[data-tema="claro"] .cc-cal-g .d.ferias.passado{background:rgba(15,124,118,.07);color:#0d6e69}
:root[data-tema="claro"] .cc-cal-g .d.ferias.pedida.passado{background:none}
/* a legenda usa a MESMA cor dos dias (no escuro o --ouro era o próprio dourado das folgas) */
:root[data-tema="claro"] .cc-cal-leg .f{background:#c9a24b}
:root[data-tema="claro"] .cc-cal-leg .v{background:rgba(15,124,118,.35)}
:root[data-tema="claro"] .cc-cal-leg .vp{border-color:rgba(15,124,118,.70)}
:root[data-tema="claro"] .cc-cal-det{background:rgba(161,126,44,.08)}
:root[data-tema="claro"] .cc-tl::before{background:linear-gradient(180deg,rgba(161,126,44,.50),rgba(161,126,44,.12))}
:root[data-tema="claro"] .cc-tl li::before{background:var(--cartao)}
:root[data-tema="claro"] .cc-tl li.tirada::before{border-color:rgba(161,126,44,.50);background:rgba(161,126,44,.30)}
:root[data-tema="claro"] .cc-tl li.programada::before{background:var(--ouro)}
:root[data-tema="claro"] .cc-tl li.recusada::before{border-color:var(--erro-borda);background:var(--cartao)}
:root[data-tema="claro"] .cc-tl li.agora::before{background:var(--vivo);box-shadow:0 0 0 5px rgba(15,124,118,.18)}
:root[data-tema="claro"] .cc-tl li.marco-hoje::before{background:var(--texto)}
:root[data-tema="claro"] .cc-tl li.recusada .per{text-decoration-color:rgba(184,50,43,.55)}
:root[data-tema="claro"] .cc-tl .cancela{border-color:var(--erro-borda);color:var(--erro)}
:root[data-tema="claro"] .cc-fernando .ic,:root[data-tema="claro"] .cc-pedido-ok .ic{background:rgba(161,126,44,.12)}

/* ---------- 15. o crachá: o mesmo do painel (feito para o papel claro); só a cena ganha a sombra do painel ---------- */
:root[data-tema="claro"] .cc-cracha-pend .cc-cr,
:root[data-tema="claro"] .cc-meu-cr .cc-cracha-pend .cc-cr{box-shadow:0 1px 1px rgba(0,0,0,.07),0 calc(var(--w) * .09) calc(var(--w) * .2) calc(var(--w) * -.09) rgba(32,33,28,.45)}
:root[data-tema="claro"] .cc-cracha-sombra{background:radial-gradient(ellipse at center,rgba(40,30,10,.30),transparent 70%)}
:root[data-tema="claro"] .cc-cracha-palco.esq .cc-cr{box-shadow:none;background:linear-gradient(90deg,rgba(28,26,22,.045) 0%,rgba(28,26,22,.10) 45%,rgba(28,26,22,.045) 90%);background-size:220% 100%}

/* ---------- 16. convite (normalmente escuro: só fica claro num aparelho de funcionário que já escolheu o claro) ---------- */
:root[data-tema="claro"] .cc-cv-info li{background:var(--cartao)}
:root[data-tema="claro"] .cc-cv-estado .ic{background:rgba(161,126,44,.10)}
:root[data-tema="claro"] .cc-cv-estado.usado .ic,:root[data-tema="claro"] .cc-cv-estado.feito .ic,:root[data-tema="claro"] .cc-cv-estado.criado .ic{background:rgba(15,124,118,.10);border-color:rgba(15,124,118,.40)}
:root[data-tema="claro"] .cc-cv-estado.vencido .ic,:root[data-tema="claro"] .cc-cv-estado.nao .ic,:root[data-tema="claro"] .cc-cv-estado.temconta .ic,:root[data-tema="claro"] .cc-cv-estado.indisponivel .ic{background:rgba(184,50,43,.07);border-color:rgba(184,50,43,.40);color:var(--erro)}