/* ================================================================
   SKIN "CLIMA" — variante do V3 Clean (29/10/26, branch feat/skin-clima)
   O fundo do CRM e o céu REAL de fora do escritório: hora do dia, tempo, vento, lua.
   Nível aprovado: "Marcante" (céu + sol/lua + nuvens + chuva + paisagem na base).
   Os paineis (cabeçalho, menu, cards) viram vidro por cima do céu; o texto continua opaco o bastante
   para ler. Camadas do JS: #cl-sky (atrás do conteúdo) e #cl-fx (chuva/raio, por cima, pointer-events:none).
   <html data-skin="v3-clean" data-skin-variant="clima">
   ================================================================ */
html[data-skin="v3-clean"][data-skin-variant="clima"]:not(.adventure-mode),
html[data-skin="v3-clean"][data-skin-variant="clima"]:not(.adventure-mode) body { background: transparent !important; }
html[data-skin="v3-clean"][data-skin-variant="clima"]:not(.adventure-mode) .app-shell,
html[data-skin="v3-clean"][data-skin-variant="clima"]:not(.adventure-mode) .app-main { background: transparent !important; }

/* tokens: vidro (alpha) no escuro e no claro */
html[data-skin="v3-clean"][data-skin-variant="clima"]:not(.adventure-mode) {
  --bg-surface: rgba(12,18,32,.68); --bg-sidebar: rgba(10,16,30,.72); --bg-card: rgba(14,22,38,.72); --bg-card-hover: rgba(26,38,60,.78);
  --border: rgba(160,185,230,.20); --border-light: rgba(160,185,230,.32);
  --brand: #4da3ff; --on-brand: #06121f; --brand-subtle: rgba(77,163,255,.16);
  --text-primary: #eef3fb; --text-secondary: #c3d0e4; --text-muted: #aebcd5;
  --bg-void: rgba(8,12,22,.8); --bg-elevated: rgba(26,38,60,.9); --bg-hover: rgba(40,58,90,.7);
  --border-subtle: rgba(160,185,230,.20); --border-accent: rgba(160,185,230,.32); --border-brand: rgba(77,163,255,.4); --brand-dim: rgba(77,163,255,.16);
}
html[data-skin="v3-clean"][data-skin-variant="clima"]:not(.adventure-mode)[data-theme="light"] {
  --bg-surface: rgba(255,255,255,.76); --bg-sidebar: rgba(255,255,255,.78); --bg-card: rgba(255,255,255,.78); --bg-card-hover: rgba(247,250,255,.86);
  --border: rgba(40,70,120,.16); --border-light: rgba(40,70,120,.26);
  --brand: #1f6fd0; --on-brand: #ffffff; --brand-subtle: rgba(31,111,208,.10);
  --text-primary: #14213a; --text-secondary: #34445f; --text-muted: #4a5b77;
  --bg-void: rgba(255,255,255,.8); --bg-elevated: rgba(244,248,255,.96); --bg-hover: rgba(225,236,252,.8);
  --border-subtle: rgba(40,70,120,.16); --border-accent: rgba(40,70,120,.26); --border-brand: rgba(31,111,208,.34); --brand-dim: rgba(31,111,208,.10);
}
html[data-skin="v3-clean"][data-skin-variant="clima"]:not(.adventure-mode).comfort-mode { --text-secondary: #d2ddee; --text-muted: #bac7dd; }
html[data-skin="v3-clean"][data-skin-variant="clima"]:not(.adventure-mode).comfort-mode[data-theme="light"] { --text-secondary: #2a3955; --text-muted: #3a4a66; }

/* vidro no cabeçalho e no menu */
html[data-skin="v3-clean"][data-skin-variant="clima"]:not(.adventure-mode) .app-header,
html[data-skin="v3-clean"][data-skin-variant="clima"]:not(.adventure-mode) .app-sidebar {
  -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
}

/* ---------------- camadas do céu ---------------- */
#cl-sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
#cl-sky .cl-grad { position: absolute; inset: 0; transition: background 1.2s linear; }
#cl-sky .cl-stars, #cl-sky .cl-clouds, #cl-sky .cl-land { position: absolute; inset: 0; }
#cl-sky .cl-star { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; animation: cl-tw 4s ease-in-out infinite; }
@keyframes cl-tw { 0%,100% { opacity: var(--o,.8); } 50% { opacity: calc(var(--o,.8) * .35); } }
#cl-sky .cl-sun, #cl-sky .cl-moon { position: absolute; left: 0; top: 0; will-change: transform; }
#cl-sky .cl-sun { width: 70px; height: 70px; margin: -35px 0 0 -35px; border-radius: 50%;
  background: radial-gradient(circle, #fffbe6 0 30%, var(--cl-sun,#ffe08a) 31% 46%, rgba(255,224,138,.28) 47% 62%, transparent 72%); filter: drop-shadow(0 0 22px var(--cl-sunglow,rgba(255,214,120,.65))); }
#cl-sky .cl-moon { width: 76px; height: 76px; margin: -38px 0 0 -38px; filter: drop-shadow(0 0 16px rgba(230,236,255,.45)); }
#cl-sky .cl-moon svg { display: block; width: 100%; height: 100%; }
#cl-sky .cl-cloud { position: absolute; left: 0; top: 0; will-change: transform; filter: blur(1.3px) drop-shadow(0 5px 7px rgba(20,30,60,.18)); }
#cl-sky .cl-cloud i { position: absolute; border-radius: 50%; }
#cl-sky .cl-cloud i.pf { background: radial-gradient(ellipse 70% 70% at 50% 34%, var(--cl-cloud,#fff) 0, var(--cl-cloud,#fff) 38%, var(--cl-cloud2,#dfe7f2) 82%, rgba(255,255,255,0) 100%); }
#cl-sky .cl-cloud i.base { background: radial-gradient(ellipse 50% 60% at 50% 40%, var(--cl-cloud2,#dfe7f2), rgba(255,255,255,0) 100%); border-radius: 50%; opacity: .95; }
#cl-sky .cl-land svg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 34%; display: block; }
@property --wd { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --wa { syntax: '<number>'; inherits: true; initial-value: .6; }
/* [02/11/26] sem transicao nas variaveis de vento: animar --wd/--wa recalculava o estilo de toda a paisagem a cada quadro (custava ~20 quadros/s); o JS agora so atualiza quando muda de verdade */
#cl-sky .cl-tree { transform-box: fill-box; transform-origin: 50% 100%; animation: cl-sway var(--sd,3.4s) ease-in-out infinite alternate; animation-delay: var(--dl,0s); }
@keyframes cl-sway { from { transform: skewX(calc(var(--wd,0) * -7deg + var(--wa,.6) * 1.5deg)); } to { transform: skewX(calc(var(--wd,0) * -7deg - var(--wa,.6) * 1.5deg)); } }
#cl-sky .cl-win rect { transition: opacity 5s ease-in-out; }
@media (prefers-reduced-motion: reduce) { #cl-sky .cl-tree { animation: none; } }
#cl-sky .cl-fog { position: absolute; left: 0; right: 0; bottom: 0; height: 55%; opacity: 0; transition: opacity 2s; background: linear-gradient(to top, rgba(220,226,236,.88) 0, rgba(220,226,236,.55) 45%, rgba(220,226,236,0) 100%); }
#cl-sky.fog .cl-fog { opacity: 1; }

#cl-fx { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
#cl-fx canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#cl-fx .cl-flash { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at var(--bx,50%) 0, rgba(215,225,255,.75), rgba(150,170,230,.22) 60%, transparent 85%); opacity: 0; }
#cl-fx .cl-flash.go { animation: cl-flash 1.1s linear 1; }
@keyframes cl-flash { 0% { opacity: 0 } 4% { opacity: .9 } 9% { opacity: .2 } 15% { opacity: .05 } 22% { opacity: .6 } 30% { opacity: .1 } 100% { opacity: 0 } }
#cl-fx .cl-bolt { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
#cl-fx .cl-bolt.go { animation: cl-boltA .5s linear 1; }
@keyframes cl-boltA { 0% { opacity: 0 } 6% { opacity: 1 } 22% { opacity: .3 } 34% { opacity: .9 } 100% { opacity: 0 } }

/* ---------------- selo no cabeçalho ---------------- */
.cl-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; margin-right: 8px; border-radius: 14px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-primary); font: 600 12px/1 var(--font-sans, system-ui); white-space: nowrap; cursor: pointer; }
.cl-chip svg { width: 16px; height: 16px; flex: none; }
.cl-chip span { color: var(--text-secondary); font-weight: 500; }
.cl-chip:hover { background: var(--bg-card-hover); }

@media (prefers-reduced-motion: reduce) {
  #cl-sky .cl-star { animation: none; }
  #cl-fx .cl-flash.go, #cl-fx .cl-bolt.go { animation: none; }
}
html[data-fx-critters="off"] #cl-sky .cl-car, html[data-fx-critters="off"] #cl-sky .cl-plane { display: none; }

/* cards como vidro fosco: o céu (sol/lua/nuvens) aparece por trás, desfocado, e o texto continua legível (marcados pelo JS: data-cl-glass) */
html[data-skin="v3-clean"][data-skin-variant="clima"]:not(.adventure-mode) [data-cl-glass] {
  -webkit-backdrop-filter: blur(9px) saturate(1.1); backdrop-filter: blur(9px) saturate(1.1);
}

/* nesta skin o tema vem do céu (dia/noite): os botoes de tema claro/escuro saem do cabeçalho */
html[data-skin="v3-clean"][data-skin-variant="clima"]:not(.adventure-mode):not([data-clima-auto="off"]) #btn-theme-light,
html[data-skin="v3-clean"][data-skin-variant="clima"]:not(.adventure-mode):not([data-clima-auto="off"]) #btn-theme-dark { display: none !important; }

/* luz do sol/lua por cima de tudo (bem fraca) */
#cl-wash { position: fixed; inset: 0; z-index: 88; pointer-events: none; transition: background 1.5s linear; }
/* aves e estrela cadente */
#cl-sky .cl-birds { position: absolute; inset: 0; }
#cl-sky .cl-bird { position: absolute; left: 0; top: 0; width: 20px; height: 10px; color: #1c2a44; opacity: 0; }
#cl-sky .cl-bird svg { display: block; width: 100%; height: 100%; }
#cl-fx .cl-shoot { position: absolute; left: var(--sx,50%); top: var(--sy,10%); width: 120px; height: 2px; opacity: 0; transform-origin: 100% 50%; transform: rotate(var(--ang,.5rad));
  background: linear-gradient(to left, rgba(255,255,255,.95), rgba(255,255,255,0)); border-radius: 2px; filter: drop-shadow(0 0 4px #cfd8ff); }
#cl-fx .cl-shoot.go { animation: cl-shoot 1s ease-out 1; }
@keyframes cl-shoot { 0% { opacity: 0; translate: 0 0; } 10% { opacity: 1; } 100% { opacity: 0; translate: 260px 130px; } }
/* paisagem: reflexo no lago e fumaça da chaminé */
#cl-sky .cl-refl { animation: cl-ripple 3.4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 0; }
@keyframes cl-ripple { 0%,100% { transform: scaleX(1); } 50% { transform: scaleX(.55) scaleY(1.1); } }
#cl-sky .cl-smoke circle { fill: rgba(220,226,238,.55); animation: cl-smoke 7s linear infinite; transform-box: fill-box; transform-origin: 50% 50%; }
#cl-sky .cl-smoke circle:nth-child(2) { animation-delay: 2.3s; } #cl-sky .cl-smoke circle:nth-child(3) { animation-delay: 4.6s; }
@keyframes cl-smoke { 0% { opacity: 0; transform: translate(0,0) scale(.6); } 15% { opacity: .65; } 100% { opacity: 0; transform: translate(calc(14px + var(--wd,0) * 10px),-62px) scale(2.6); } }
html[data-fx-critters="off"] #cl-sky .cl-birds,html[data-fx-critters="off"] #cl-fx .cl-shoot { display: none; }
@media (prefers-reduced-motion: reduce) { #cl-sky .cl-refl, #cl-sky .cl-smoke circle, #cl-fx .cl-shoot.go { animation: none; } }
#cl-sky .cl-wire { fill: none; stroke-width: 1; }
#cl-sky .cl-furrow { fill: none; stroke: rgba(255,255,255,.07); stroke-width: 1.6; }
#cl-sky .cl-win { filter: drop-shadow(0 0 5px rgba(255,200,110,.9)); }

/* tempo fechado: teto de nuvens procedural (mascara de ruido fractal; a cor vem do JS) */
#cl-sky .cl-ovc { position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 52%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0, #000 52%, transparent 100%); }
#cl-sky .cl-ov { position: absolute; left: 0; height: 100%; will-change: transform; -webkit-mask-size: 1600px 100%; mask-size: 1600px 100%; -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; }
#cl-sky .cl-ov.far { background: var(--cl-ovf, #7d8799); }
#cl-sky .cl-ov.dk { background: var(--cl-ovd, #4a5366); }
#cl-sky .cl-ov.lt { background: var(--cl-ovl, #7a8499); }

/* ---- pacote de realismo ---- */
#cl-sky .cl-rays, #cl-sky .cl-bow { position: absolute; inset: 0; opacity: 0; transition: opacity 2.5s linear; pointer-events: none; }
#cl-sky .cl-rays { mix-blend-mode: screen; }
#cl-sky .cl-bow { filter: blur(1.4px); }
#cl-sky .cl-plane { position: absolute; left: 0; top: 0; width: 26px; height: 12px; opacity: 0; will-change: transform; color: rgba(255,255,255,.92); }
#cl-sky .cl-plane svg { display: block; width: 26px; height: 12px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
#cl-sky .cl-plane .tr { position: absolute; right: 23px; top: 5px; width: 190px; height: 2px; background: linear-gradient(to left, rgba(255,255,255,.6), rgba(255,255,255,0)); border-radius: 2px; }
#cl-sky .cl-plane .lt { position: absolute; width: 2.4px; height: 2.4px; border-radius: 50%; }
#cl-sky .cl-plane .lt.r { left: 12px; top: 1px; background: #ff3b30; box-shadow: 0 0 5px 1px #ff3b30; animation: cl-blink 2.2s steps(1) infinite; }
#cl-sky .cl-plane .lt.g { left: 12px; top: 9px; background: #30e070; box-shadow: 0 0 5px 1px #30e070; animation: cl-blink 2.2s steps(1) infinite .4s; }
#cl-sky .cl-plane .lt.w { left: 0; top: 5px; background: #fff; box-shadow: 0 0 6px 2px #fff; animation: cl-strobe 1.6s steps(1) infinite; }
@keyframes cl-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .15; } }
@keyframes cl-strobe { 0%, 8% { opacity: 1; } 9%, 100% { opacity: 0; } }
/* trânsito */
#cl-sky .cl-car { animation: cl-drive var(--cd, 26s) linear infinite; animation-delay: var(--cdl, 0s); }
#cl-sky .cl-car.rev { animation-name: cl-driveR; }
@keyframes cl-drive { from { transform: translateX(-140px); } to { transform: translateX(1740px); } }
@keyframes cl-driveR { from { transform: translateX(1740px); } to { transform: translateX(-140px); } }
#cl-sky .cl-lite { opacity: var(--nl, 0); transition: opacity 3s; }
#cl-sky .cl-steam { opacity: var(--st, 0); transition: opacity 3s; }
#cl-sky .cl-steam circle { fill: rgba(235,240,250,.55); }
/* aviso */
.cl-toast { position: fixed; top: 62px; right: 18px; z-index: 95; max-width: 300px; padding: 9px 14px; border-radius: 10px; background: var(--bg-card); border: 1px solid var(--border-light, var(--border)); color: var(--text-primary); font: 600 13px/1.3 var(--font-sans, system-ui); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); opacity: 0; transform: translateY(-6px); transition: opacity .5s, transform .5s; pointer-events: none; box-shadow: 0 6px 22px rgba(0,0,0,.28); }
.cl-toast.on { opacity: 1; transform: none; }
html.comfort-mode .cl-toast { font-size: 15px; max-width: 360px; }
@media (prefers-reduced-motion: reduce) { #cl-sky .cl-car, #cl-sky .cl-plane .lt { animation: none; } }

/* legibilidade: nas telas de trabalho a chuva, as gotas no vidro e a luz do sol ficam mais discretas por cima do texto */
body:has(.app-shell) #cl-fx canvas { opacity: .55; }
body:has(.app-shell) #cl-wash { opacity: .6; }
/* efeitos leves (PC lento): sem carros, avião, calor, raios nem aves */
html[data-fx-lite="on"] #cl-sky .cl-car, html[data-fx-lite="on"] #cl-sky .cl-plane, html[data-fx-lite="on"] #cl-sky .cl-rays, html[data-fx-lite="on"] #cl-sky .cl-birds, html[data-fx-lite="on"] #cl-fx .cl-shoot { display: none; }
html[data-fx-lite="on"] #cl-sky .cl-tree, html[data-fx-lite="on"] #cl-sky .cl-smoke circle, html[data-fx-lite="on"] #cl-sky .cl-refl { animation: none; }

/* selo com dado velho ou sem conexão */
.cl-chip.old { border-color: rgba(240,160,48,.7); }
.cl-chip .cl-old { color: #e08a1a; font-weight: 700; }
html[data-theme="dark"] .cl-chip .cl-old { color: #ffb454; }

/* rolando/digitando: pausa as animações CSS do fundo */
#cl-sky.busy .cl-tree, #cl-sky.busy .cl-car, #cl-sky.busy .cl-smoke circle, #cl-sky.busy .cl-star, #cl-sky.busy .cl-refl { animation-play-state: paused; }
/* selo maior no Modo Conforto (assessor sênior): temperatura em destaque */
html.comfort-mode .cl-chip { height: 40px; padding: 0 14px; gap: 8px; font-size: 17px; border-radius: 20px; }
html.comfort-mode .cl-chip svg { width: 22px; height: 22px; }
html.comfort-mode .cl-chip span { font-size: 14px; }

/* tabelas largas (Completar Base etc.): celulas com vidro proprio, o skyline nunca passa atras do texto */
html[data-skin-variant="clima"] .cb-table tbody td { background: var(--bg-card); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
html[data-skin-variant="clima"] .cb-table tbody td.cb-cell.vazia { background: linear-gradient(rgba(239,68,68,.10), rgba(239,68,68,.10)), var(--bg-card); }
html[data-skin-variant="clima"] .cb-table tbody td.cb-cell.modificada { background: linear-gradient(rgba(245,158,11,.16), rgba(245,158,11,.16)), var(--bg-card) !important; }
html[data-skin-variant="clima"] .cb-table tbody td.cb-cell.editando { background: linear-gradient(rgba(59,158,255,.16), rgba(59,158,255,.16)), var(--bg-card) !important; }

/* gavetas laterais (fila do Painel do Dia): quase opacas, o conteudo de tras nao pode vazar pelo texto */
html[data-skin-variant="clima"] .fila-drawer { background: rgba(14,22,38,.97); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
html[data-skin-variant="clima"][data-theme="light"] .fila-drawer { background: rgba(250,252,255,.98); }

/* botoes que usam --brand-glow como fundo inline (Detalhes, Preencher, Ver Gaps): na base v3-clean o glow e transparente e o texto some */
html[data-skin-variant="clima"] .btn-concluir[style*="brand-glow"] { background: var(--brand) !important; }

/* menus suspensos do cabecalho (Skin, Exibicao): quase opacos, o texto da pagina nao pode aparecer por tras */
html[data-skin-variant="clima"] #skin-menu, html[data-skin-variant="clima"] #exib-menu { background: rgba(14,22,38,.97); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
html[data-skin-variant="clima"][data-theme="light"] #skin-menu, html[data-skin-variant="clima"][data-theme="light"] #exib-menu { background: rgba(255,255,255,.98); }

/* resultados da busca global: opacos (o titulo da pagina nao pode aparecer por tras) */
html[data-skin-variant="clima"] #busca-global-results { background: rgba(14,22,38,.97) !important; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
html[data-skin-variant="clima"][data-theme="light"] #busca-global-results { background: rgba(255,255,255,.98) !important; }

/* paineis laterais e popovers (missao lateral, gaveta da Agenda, scan rapido, resultados de busca): quase opacos */
html[data-skin-variant="clima"] .side-panel, html[data-skin-variant="clima"] .ag-drawer, html[data-skin-variant="clima"] .hud-quick-scan, html[data-skin-variant="clima"] .search-results-dropdown { background: rgba(14,22,38,.97); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
html[data-skin-variant="clima"][data-theme="light"] .side-panel, html[data-skin-variant="clima"][data-theme="light"] .ag-drawer, html[data-skin-variant="clima"][data-theme="light"] .hud-quick-scan, html[data-skin-variant="clima"][data-theme="light"] .search-results-dropdown { background: rgba(255,255,255,.98); }

/* qualquer lista de resultados de busca (Sala de Estrategias, Central de Documentos, etc.): opaca */
html[data-skin-variant="clima"] [id$="-busca-results"] { background: rgba(14,22,38,.97) !important; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
html[data-skin-variant="clima"][data-theme="light"] [id$="-busca-results"] { background: rgba(255,255,255,.98) !important; }
html[data-skin-variant="clima"] #js-results, html[data-skin-variant="clima"] #js-intl-cliente-results, html[data-skin-variant="clima"] #js-conjuge-results { background: rgba(14,22,38,.97) !important; }
html[data-skin-variant="clima"][data-theme="light"] #js-results, html[data-skin-variant="clima"][data-theme="light"] #js-intl-cliente-results, html[data-skin-variant="clima"][data-theme="light"] #js-conjuge-results { background: rgba(255,255,255,.98) !important; }

/* tooltip do Mapa de Calor: opaco para ler o valor sobre qualquer fundo */
html[data-skin-variant="clima"] #tooltip.tooltip { background: rgba(14,22,38,.97) !important; }
html[data-skin-variant="clima"][data-theme="light"] #tooltip.tooltip { background: rgba(255,255,255,.98) !important; }

/* caixas de modal: opacas (sobre o fundo escuro do modal, 76% de opacidade vira uma faixa cinza no tema claro) */
html[data-skin-variant="clima"] .modal-box, html[data-skin-variant="clima"] .modal-backdrop > [class*="modal"] { background: rgba(14,22,38,.98) !important; }
html[data-skin-variant="clima"][data-theme="light"] .modal-box, html[data-skin-variant="clima"][data-theme="light"] .modal-backdrop > [class*="modal"] { background: rgba(250,252,255,.99) !important; }

/* modais com fundo inline (sem classe): a caixa tambem precisa ser opaca */
html[data-skin-variant="clima"] [id^="modal-"][style*="position:fixed"] > div, html[data-skin-variant="clima"] [id^="modal-"][style*="position: fixed"] > div { background: rgba(14,22,38,.98) !important; }
html[data-skin-variant="clima"][data-theme="light"] [id^="modal-"][style*="position:fixed"] > div, html[data-skin-variant="clima"][data-theme="light"] [id^="modal-"][style*="position: fixed"] > div { background: rgba(250,252,255,.99) !important; }

/* gaveta de categoria do Painel do Dia: opaca como a da fila */
html[data-skin-variant="clima"] .categoria-drawer { background: rgba(14,22,38,.97) !important; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
html[data-skin-variant="clima"][data-theme="light"] .categoria-drawer { background: rgba(250,252,255,.98) !important; }

/* opcoes dos selects nativos: fundo e texto explicitos (o popup do navegador nao herda o vidro) */
html[data-skin-variant="clima"] select option, html[data-skin-variant="clima"] select optgroup { background-color: #0e1626; color: #eef3fb; }
html[data-skin-variant="clima"][data-theme="light"] select option, html[data-skin-variant="clima"][data-theme="light"] select optgroup { background-color: #ffffff; color: #14213a; }

/* [29/10/26] enquanto a pagina carrega, as animacoes do cenario (arvores, fumaca, carros, estrelas) ficam em pausa: o navegador esta ocupado montando a tela */
#cl-sky.cl-hold *, #cl-sky.cl-hold { animation-play-state: paused !important; }

/* ================================================================
   [02/11/26] "Ver o tempo": controle de transparencia do vidro (--cl-k, 1 = padrao) e modo contemplacao (html.cl-zen).
   Prototipo da branch feat/clima-ver-o-tempo.
   ================================================================ */
.cl-ctl { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 6px 0 10px; margin-right: 8px; border-radius: 14px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary); font: 600 11px/1 var(--font-sans, system-ui); white-space: nowrap; }
.cl-ctl svg { width: 15px; height: 15px; flex: none; }
.cl-ctl input[type=range] { -webkit-appearance: none; appearance: none; width: 78px; height: 4px; border-radius: 2px; background: var(--border-light, rgba(160,185,230,.4)); outline: none; cursor: pointer; margin: 0; }
.cl-ctl input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 13px; height: 13px; border-radius: 50%; background: var(--brand); border: 2px solid var(--bg-card); cursor: pointer; }
.cl-ctl input[type=range]::-moz-range-thumb { width: 11px; height: 11px; border-radius: 50%; background: var(--brand); border: 2px solid var(--bg-card); cursor: pointer; }
.cl-ctl button { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 22px; padding: 0; border: 0; border-radius: 11px; background: transparent; color: var(--text-primary); cursor: pointer; }
.cl-ctl button:hover { background: var(--bg-hover); }

/* vidro mais ou menos transparente: mesmos tons, alfa e desfoque multiplicados por --cl-k */
html[data-skin="v3-clean"][data-skin-variant="clima"]:not(.adventure-mode)[data-cl-vidro]:not([data-theme="light"]) {
  --bg-surface: rgba(12,18,32,calc(.68 * var(--cl-k,1))); --bg-sidebar: rgba(10,16,30,calc(.72 * var(--cl-k,1))); --bg-card: rgba(14,22,38,calc(.72 * var(--cl-k,1))); --bg-card-hover: rgba(26,38,60,calc(.78 * var(--cl-k,1)));
}
html[data-skin="v3-clean"][data-skin-variant="clima"]:not(.adventure-mode)[data-cl-vidro][data-theme="light"] {
  --bg-surface: rgba(255,255,255,calc(.76 * var(--cl-k,1))); --bg-sidebar: rgba(255,255,255,calc(.78 * var(--cl-k,1))); --bg-card: rgba(255,255,255,calc(.78 * var(--cl-k,1))); --bg-card-hover: rgba(247,250,255,calc(.86 * var(--cl-k,1)));
}
html[data-skin="v3-clean"][data-skin-variant="clima"]:not(.adventure-mode)[data-cl-vidro] .app-header,
html[data-skin="v3-clean"][data-skin-variant="clima"]:not(.adventure-mode)[data-cl-vidro] .app-sidebar { -webkit-backdrop-filter: blur(calc(14px * var(--cl-k,1))) saturate(1.15); backdrop-filter: blur(calc(14px * var(--cl-k,1))) saturate(1.15); }
html[data-skin="v3-clean"][data-skin-variant="clima"]:not(.adventure-mode)[data-cl-vidro] [data-cl-glass],
html[data-skin="v3-clean"][data-skin-variant="clima"]:not(.adventure-mode)[data-cl-vidro] .cb-table tbody td { -webkit-backdrop-filter: blur(calc(9px * var(--cl-k,1))) saturate(1.1); backdrop-filter: blur(calc(9px * var(--cl-k,1))) saturate(1.1); }
/* com o vidro muito transparente o texto ganha uma sombra suave para continuar legivel */
html[data-cl-vidro][data-cl-vt]:not([data-theme="light"]) .app-main, html[data-cl-vidro][data-cl-vt]:not([data-theme="light"]) .app-sidebar { text-shadow: 0 1px 3px rgba(0,0,0,.65), 0 0 8px rgba(0,0,0,.35); }
html[data-cl-vidro][data-cl-vt][data-theme="light"] .app-main, html[data-cl-vidro][data-cl-vt][data-theme="light"] .app-sidebar { text-shadow: 0 1px 2px rgba(255,255,255,.9), 0 0 8px rgba(255,255,255,.7); }

/* modo contemplacao: tudo some devagar, fica so o tempo; mexer o mouse, clicar ou apertar uma tecla traz de volta */
html.cl-zen body > *:not(#cl-sky):not(#cl-fx):not(#cl-wash):not(.cl-zenbar),
html.cl-zen-out body > *:not(#cl-sky):not(#cl-fx):not(#cl-wash):not(.cl-zenbar) { transition: opacity 1.4s ease !important; }
html.cl-zen body > *:not(#cl-sky):not(#cl-fx):not(#cl-wash):not(.cl-zenbar) { opacity: 0 !important; pointer-events: none !important; }
.cl-zenbar { position: fixed; left: 44px; bottom: 38px; z-index: 89; pointer-events: none; opacity: 0; transition: opacity 1.6s ease .5s; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.45); font-family: var(--font-sans, system-ui); }
html.cl-zen .cl-zenbar { opacity: 1; }
.cl-zenbar .t { font-size: 64px; font-weight: 200; letter-spacing: -1px; line-height: 1; }
.cl-zenbar .w { margin-top: 8px; font-size: 16px; font-weight: 500; opacity: .85; }
.cl-zenbar .h { margin-top: 14px; font-size: 12px; opacity: 0; transition: opacity 1s ease; }
.cl-zenbar .h.on { opacity: .6; }
/* [31/10/26] olho para sair da contemplacao (fixa): discreto, canto inferior direito */
.cl-zenbar .e { position: fixed; right: 34px; bottom: 32px; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.12); color: #fff; cursor: pointer; opacity: .4; pointer-events: none; transition: opacity .25s ease, background .25s ease; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cl-zenbar .e svg { width: 20px; height: 20px; }
html.cl-zen .cl-zenbar .e { pointer-events: auto; }
.cl-zenbar .e:hover, .cl-zenbar .e:focus-visible { opacity: 1; background: rgba(255,255,255,.26); }
/* giro do selo do tempo enquanto atualiza */
.cl-chip.spin svg { animation: clspin .9s linear infinite; }
@keyframes clspin { to { transform: rotate(360deg); } }