/* ═══════════════════════════════════════════════════════════════════════
   ZÉ DOIDO — visual da tela do robô (aba do painel admin)
   Tudo escopado em #ze-palco pra não vazar no resto do JRS.
   ═══════════════════════════════════════════════════════════════════════ */

#ze-palco{
  --ze-verde:#3d8b37; --ze-verde-vivo:#5fc255;
  --ze-ambar:#c46a00; --ze-ouro:#e0a020; --ze-vermelho:#A32D2D;
  --ze-fundo:#0f1c2e; --ze-linha:#24405f; --ze-texto:#c8d8e8; --ze-apagado:#6d84a0;
  position:relative; display:flex; flex-direction:column; align-items:center;
  gap:18px; padding:26px 16px 20px; min-height:520px; max-width:520px;
  background:var(--ze-fundo); border-radius:14px; color:var(--ze-texto);
  font-family:Arial,sans-serif;
}

/* ── rosto ───────────────────────────────────────────────────────────── */
#ze-rosto{
  position:relative; width:min(62vw,250px); aspect-ratio:200/250;
  filter:drop-shadow(0 0 26px rgba(87,201,79,.45)) drop-shadow(0 18px 34px rgba(0,0,0,.55));
  transition:filter .3s;
}
.ze-ouvindo #ze-rosto{ filter:drop-shadow(0 0 30px rgba(95,194,85,.5)) }
.ze-pensando #ze-rosto{ filter:drop-shadow(0 0 26px rgba(196,106,0,.45)) }
.ze-falando  #ze-rosto{ filter:drop-shadow(0 0 28px rgba(224,160,32,.5)) }
.ze-erro     #ze-rosto{ filter:drop-shadow(0 0 26px rgba(163,45,45,.5)) }

#ze-cabeca{ position:absolute; inset:0; width:100%; height:100%; overflow:visible }
.ze-pele{ fill:#57c94f; stroke:#1f5c26; stroke-width:3; transition:fill .3s }
.ze-dormindo .ze-pele{ fill:#3f9139 }
.ze-luzinha{ fill:#8ce87f; opacity:.45 }
.ze-narina{ fill:#2b6b2c; opacity:.85 }

.ze-olho{ fill:#12203a; stroke:#0b1526; stroke-width:2.5;
  transform-box:fill-box; transform-origin:center; transition:transform .13s }
.ze-brilho{ fill:#eaf6ea; opacity:.92; transition:fill .25s, opacity .25s }
.ze-ouvindo  .ze-brilho{ fill:#c4ffb8; opacity:.95 }
.ze-pensando .ze-brilho{ fill:var(--ze-ambar); opacity:.95 }
.ze-falando  .ze-brilho{ fill:var(--ze-ouro); opacity:.95 }
.ze-erro     .ze-brilho{ fill:var(--ze-vermelho); opacity:.95 }
.ze-dormindo .ze-olho, .ze-piscando .ze-olho{ transform:scaleY(.07) }
.ze-dormindo .ze-brilho, .ze-piscando .ze-brilho{ opacity:0 }
.ze-pensando #ze-olhos{ animation:ze-vasculha 1.6s ease-in-out infinite }
@keyframes ze-vasculha{ 0%,100%{transform:translateX(-6px)} 50%{transform:translateX(6px)} }

#ze-boca{
  position:absolute; top:83%; left:50%; transform:translate(-50%,-50%);
  width:42px; height:6px; background:#1d4a22; border-radius:9px;
  transition:height .09s linear, width .09s linear;
}
.ze-pensando #ze-boca{ width:23px }
.ze-dormindo #ze-boca{ height:4px; opacity:.6 }
.ze-erro     #ze-boca{ background:var(--ze-vermelho) }

/* ── status ──────────────────────────────────────────────────────────── */
#ze-status{ text-align:center; min-height:64px }
#ze-rotulo{ font-size:9pt; letter-spacing:.2em; text-transform:uppercase;
  font-weight:700; color:var(--ze-apagado) }
#ze-legenda{ font-size:12pt; line-height:1.3; margin-top:6px }

/* ── barra ───────────────────────────────────────────────────────────── */
#ze-barra{ display:flex; gap:8px; align-items:center; width:100%; max-width:460px }
#ze-barra button{
  font-family:inherit; font-size:10pt; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; background:transparent; color:var(--ze-texto);
  border:0.5px solid var(--ze-linha); border-radius:10px;
  padding:12px 16px; cursor:pointer; flex:0 0 auto;
}
#ze-barra button:active{ background:var(--ze-linha) }
#ze-barra button:focus-visible{ outline:2px solid var(--ze-ouro); outline-offset:3px }
#ze-ligar{ border-color:var(--ze-verde); color:var(--ze-verde-vivo) }
#ze-microfone.ze-gravando{ border-color:var(--ze-verde-vivo); background:rgba(95,194,85,.16) }
#ze-digitado{
  flex:1 1 auto; min-width:0; font-family:inherit; font-size:11pt;
  background:#16283f; color:var(--ze-texto); border:0.5px solid var(--ze-linha);
  border-radius:10px; padding:12px; box-sizing:border-box;
}
#ze-digitado::placeholder{ color:var(--ze-apagado) }

/* ── ajustes ─────────────────────────────────────────────────────────── */
#ze-gaveta{
  position:absolute; inset:0; background:rgba(8,15,25,.97);
  padding:22px 18px; display:none; flex-direction:column; gap:8px;
  overflow-y:auto; border-radius:14px; z-index:5;
}
#ze-gaveta.ze-aberta{ display:flex }
#ze-gaveta h2{ font-size:14pt; margin:0 0 6px }
#ze-gaveta label{ font-size:9pt; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ze-apagado); margin-top:8px }
#ze-gaveta input, #ze-gaveta textarea, #ze-gaveta select{
  width:100%; font-family:inherit; font-size:11pt; background:#16283f;
  color:var(--ze-texto); border:0.5px solid var(--ze-linha);
  border-radius:8px; padding:10px; box-sizing:border-box;
}
#ze-gaveta input[type=range]{ padding:0 }
#ze-gaveta textarea{ min-height:90px; resize:vertical }
#ze-gaveta button{
  font-family:inherit; font-size:11pt; margin-top:10px; background:transparent;
  color:var(--ze-texto); border:0.5px solid var(--ze-linha);
  border-radius:10px; padding:12px; cursor:pointer;
}
.ze-dica{ font-size:9pt; color:var(--ze-apagado); line-height:1.4; margin:4px 0 0 }
.ze-dica code{ color:var(--ze-ouro); font-family:ui-monospace,monospace; font-size:9pt }

@media (prefers-reduced-motion:reduce){
  #ze-palco *{ animation:none!important; transition:none!important }
}

/* ═══════════════════════════════════════════════════════════════════════
   MODO TABLET — trava o tablet na tela do Zé.
   Esconde topbar, abas e título; o palco ocupa a tela toda. Sair pede PIN.
   ═══════════════════════════════════════════════════════════════════════ */

body.ze-tablet #admin-topbar,
body.ze-tablet #admin-tabs-bar,
body.ze-tablet #admin-ze-panel > .dash-header{ display:none !important }

body.ze-tablet .dash{ padding:0 !important; margin:0 !important; max-width:none !important }
body.ze-tablet #s-admin{ background:#0f1c2e }

/* [TELA CHEIA ago/26] O palco herdava a largura da coluna do painel e
   sobrava fundo dos dois lados. Estes overrides quebram os limitadores de
   largura de todos os avos ate o palco — sem isso o !important do .dash
   sozinho nao resolve, porque quem aperta e o container acima dele. */
body.ze-tablet #s-admin,
body.ze-tablet #s-admin > .dash,
body.ze-tablet #admin-ze-panel{
  width:100% !important; max-width:none !important;
  margin:0 !important; padding:0 !important;
}

body.ze-tablet #ze-palco{
  width:100% !important; max-width:none !important;
  min-height:100vh; min-height:100dvh; border-radius:0;
  justify-content:center; padding:16px 12px;
}

/* Com a tela toda disponivel o Ze pode crescer. A conta e por altura (vh),
   nao largura, pra ele nao estourar pra fora em tablet deitado. */
/* [ENQUADRAMENTO ago/26] Deitado, o cenario aparece inteiro ("meet") e as
   faixas de fundo esticadas cobrem as laterais. O Ze cresce e desce ate
   pisar no tablado; legenda e caixa de texto sobem por cima do assoalho em
   vez de empurrar tudo pra cima. */
body.ze-tablet #ze-rosto{ width:min(52vw,min(60vh,520px)) }
body.ze-tablet #ze-palco{ justify-content:flex-end; padding:0 12px 10px; gap:6px }
body.ze-tablet #ze-figura{ margin-top:auto; margin-bottom:-2vh }
body.ze-tablet #ze-status{ min-height:0 }
body.ze-tablet #ze-legenda{ font-size:15pt;
  background:rgba(10,20,34,.55); border-radius:10px; padding:4px 14px; display:inline-block }
body.ze-tablet #ze-rotulo{ opacity:.85 }
body.ze-tablet #ze-legenda{ font-size:16pt }
body.ze-tablet #ze-barra{ max-width:640px; width:92% }

/* cadeado discreto no canto — é a saída do modo tablet */
#ze-destravar{
  position:absolute; top:10px; right:10px; z-index:6;
  display:none; background:transparent; border:0.5px solid var(--ze-linha);
  color:var(--ze-apagado); border-radius:10px; padding:8px 10px;
  font-size:13pt; cursor:pointer; opacity:.35; transition:opacity .2s;
}
#ze-destravar:hover, #ze-destravar:focus-visible{ opacity:1 }
body.ze-tablet #ze-destravar{ display:block }

/* no modo tablet o ⚙ some: nada de mexer em ajustes sem destravar */
body.ze-tablet #ze-config{ display:none }

/* ── ESCUTANDO VOCÊ: o Zé ouviu o nome e está capturando a frase ──────── */
.ze-atento #ze-rosto{ filter:drop-shadow(0 0 40px rgba(95,194,85,.85)) }
.ze-atento .ze-pele{ fill:#7fe070 }
.ze-atento .ze-brilho{ fill:#eaffe4; opacity:1 }
.ze-atento #ze-boca{ background:#2f7a2a }
.ze-atento #ze-rotulo{
  color:#ff4d4d; font-size:14pt; font-weight:700; letter-spacing:.3em;
  text-shadow:0 0 14px rgba(255,77,77,.55);
  animation:ze-pulsa 1.1s ease-in-out infinite;
}
.ze-atento #ze-legenda{ color:#c4ffb8 }
@keyframes ze-pulsa{ 0%,100%{opacity:1} 50%{opacity:.4} }

/* anel de escuta em volta do palco */
.ze-atento{ box-shadow:inset 0 0 0 3px rgba(255,77,77,.5) }

/* ── OLHOS VIVOS: enquanto espera ser chamado, ele observa a sala ─────── */
.ze-ouvindo #ze-olhos{ animation:ze-observa 9s ease-in-out infinite }
@keyframes ze-observa{
  0%, 14%   { transform:translateX(0) }
  22%, 34%  { transform:translateX(-7px) }
  42%, 52%  { transform:translateX(0) }
  60%, 72%  { transform:translateX(7px) }
  80%, 100% { transform:translateX(0) }
}
/* respiração levíssima da cabeça — tira o ar de figura parada */
.ze-ouvindo #ze-rosto, .ze-atento #ze-rosto{
  animation:ze-respira 4.5s ease-in-out infinite;
}
@keyframes ze-respira{
  0%,100% { transform:translateY(0) scale(1) }
  50%     { transform:translateY(-3px) scale(1.012) }
}


/* ── CHAPÉU DE COWBOY ─────────────────────────────────────────────────── */
.ze-aba  { fill:#a4682f; stroke:#5d3616; stroke-width:2.5 }
.ze-copa { fill:#8b552a; stroke:#5d3616; stroke-width:2.5 }
.ze-fita { fill:#63391a; stroke:#4a2a12; stroke-width:1.5 }

/* o chapéu acompanha o clima: esquenta quando ele está escutando */
.ze-atento .ze-fita{ fill:#8f2222 }

/* ── medidor de voz do gatilho próprio ────────────────────────────────── */
#ze-gat-medidor{
  height:6px; background:#16283f; border-radius:6px;
  overflow:hidden; margin:6px 0 4px;
}
#ze-gat-medidor i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,#3d8b37,#5fc255);
  transition:width .06s linear, opacity .2s;
}

/* ═══════════════════════════════════════════════════════════════════════
   CORPO INTEIRO
   A cabeça continua sendo o mesmo #ze-rosto de sempre — o corpo é um SVG
   separado atrás dela. Assim nada da lógica de boca, olhos e piscada mudou.
   Em tela estreita o corpo some e volta só a cabeça: num celular, corpo
   inteiro deixaria o rosto pequeno demais pra ler os estados.
   ═══════════════════════════════════════════════════════════════════════ */

#ze-figura{
  position:relative;
  width:min(62vw,250px);
  /* A conta que fecha o encaixe, pra não voltar a sobrar vão:
     cabeça = 62% da largura → caixa dela tem 0,775W de altura, e o queixo
     está a 93,6% dessa caixa, ou seja a 0,726W do topo.
     corpo  = largura cheia → 1,5W de altura, e começa em 0,70W (um pouco
     ACIMA do queixo, pra sobrepor em vez de encostar).
     total  = 0,70W + 1,5W = 2,2W  →  200 x 440 */
  aspect-ratio:200/420;
  filter:drop-shadow(0 0 26px rgba(87,201,79,.35)) drop-shadow(0 18px 30px rgba(0,0,0,.5));
}
/* Cabeça em 62% da largura: em 100% ela ficava do tamanho do tronco
   inteiro e o boneco virava um cabeção com um corpinho pendurado. */
/* [CENTRO 05/08/2026] Centralizado por "left", NÃO por translateX(-50%).
   A animação de respirar (estados de olho/escutando) escreve transform no
   mesmo elemento e apagava o translate — a cabeça pulava meia largura pro
   lado e o pescoço aparecia de fora. Com left:19% ((100-62)/2) o centro não
   depende de transform nenhum. */
#ze-figura #ze-rosto{
  position:absolute; top:0; left:19%;
  width:62%; filter:none;           /* o brilho passa a ser da figura toda */
  z-index:2;
}
/* O corpo sobe bem mais do que a conta exigiria, e o pescoço comprido
   sobe junto. A cabeça (z-index maior) cobre a sobra. Preferi sobrepor de
   propósito a tentar encostar no milímetro: encostar erra pra qualquer lado
   e deixa vão; sobrepor só some por trás da cabeça. */
#ze-corpo{
  position:absolute; top:27%; left:0;
  width:100%; height:68.2%;
  overflow:visible; z-index:1;
}

/* ── peças ────────────────────────────────────────────────────────────── */
.ze-pele-corpo   { fill:#57c94f; stroke:#1f5c26; stroke-width:2.5 }
.ze-camisa       { fill:#2c4a70; stroke:#1a2e47; stroke-width:2.5 }
.ze-camisa-gola  { fill:#223a58; stroke:#1a2e47; stroke-width:2 }
.ze-colete       { fill:#8b552a; stroke:#5d3616; stroke-width:2.5 }
.ze-bolso        { fill:none;    stroke:#1a2e47; stroke-width:2 }
.ze-emblema      { fill:#3d8b37; stroke:#1f5c26; stroke-width:1.5 }
.ze-cinto        { fill:#5d3616; stroke:#3d2210; stroke-width:2 }
.ze-fivela       { fill:#d9a441; stroke:#8a6416; stroke-width:2 }
.ze-manga        { fill:#2c4a70; stroke:#1a2e47; stroke-width:2.5 }
.ze-jeans        { fill:#4a6c96; stroke:#2b4364; stroke-width:2.5 }
.ze-jeans-luz    { fill:#5c80ad; opacity:.55 }
.ze-bota         { fill:#8b552a; stroke:#4a2a12; stroke-width:2.5 }
.ze-bota-cano    { fill:#a4682f; stroke:#4a2a12; stroke-width:2 }

.ze-dormindo .ze-pele-corpo{ fill:#3f9139 }

/* ── movimento ────────────────────────────────────────────────────────── */
.ze-braco{ transform-box:fill-box; transform-origin:top center; transition:transform .3s ease }

/* de olho: respira e balança o peso de leve */
.ze-ouvindo #ze-figura{ animation:ze-peso 5.5s ease-in-out infinite }
@keyframes ze-peso{
  0%,100%{ transform:translateX(0) rotate(0deg) }
  50%    { transform:translateX(3px) rotate(.6deg) }
}
.ze-ouvindo .ze-braco-e{ animation:ze-braco-solto 5.5s ease-in-out infinite }
.ze-ouvindo .ze-braco-d{ animation:ze-braco-solto 5.5s ease-in-out infinite reverse }
@keyframes ze-braco-solto{
  0%,100%{ transform:rotate(0deg) }
  50%    { transform:rotate(3deg) }
}

/* escutando: inclina pra frente, como quem presta atenção */
.ze-atento #ze-figura{ transform:rotate(-1.5deg) scale(1.02); transition:transform .25s ease }

/* pensando: um gesto contido, de quem cocou o queixo e ficou pensando.
   [CORRIGIDO ago/26] Os -118deg de antes jogavam o braco na horizontal,
   fora do corpo — a rotacao gira em torno do ombro e o braco e comprido,
   entao angulo grande vira mangueira de bombeiro. */
.ze-pensando .ze-braco-d{ transform:rotate(-16deg) translateY(-4px) }
.ze-pensando .ze-braco-e{ transform:rotate(5deg) }

/* falando: gesticula e balança o tronco */
.ze-falando .ze-braco-e{ animation:ze-gesto-e .9s ease-in-out infinite }
.ze-falando .ze-braco-d{ animation:ze-gesto-d 1.1s ease-in-out infinite }
@keyframes ze-gesto-e{
  0%,100%{ transform:rotate(0deg) } 50%{ transform:rotate(-16deg) }
}
@keyframes ze-gesto-d{
  0%,100%{ transform:rotate(0deg) } 50%{ transform:rotate(14deg) }
}
.ze-falando #ze-tronco{ animation:ze-tronco-fala 1.3s ease-in-out infinite;
  transform-box:fill-box; transform-origin:bottom center }
@keyframes ze-tronco-fala{
  0%,100%{ transform:rotate(0deg) } 50%{ transform:rotate(1.2deg) }
}

/* deu ruim: encolhe os ombros */
.ze-erro .ze-braco-e{ transform:rotate(-10deg) }
.ze-erro .ze-braco-d{ transform:rotate(10deg) }

/* ── tela estreita: só a cabeça ───────────────────────────────────────── */
@media (max-width:700px){
  #ze-corpo{ display:none }
  #ze-figura{ aspect-ratio:200/250; width:min(62vw,250px) }
  #ze-figura #ze-rosto{ position:relative; left:auto; width:100% }
}

@media (prefers-reduced-motion:reduce){
  #ze-figura, .ze-braco, #ze-tronco{ animation:none!important; transition:none!important }
}

/* ═══════════════════════════════════════════════════════════════════════
   CENÁRIO — rua de velho oeste à noite, atrás do Zé.
   Regra que segui: fundo escuro e sem detalhe fino. O brilho verde dele é
   o ponto de atenção; cenário claro demais roubaria a cena e atrapalharia
   a leitura dos estados (o vermelho do ESCUTANDO, por exemplo).
   ═══════════════════════════════════════════════════════════════════════ */

#ze-palco{ overflow:hidden }

#ze-cenario{
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index:0; pointer-events:none;
  border-radius:14px;
}

/* tudo que é o Zé fica na frente do cenário */
#ze-figura, #ze-status, #ze-barra{ position:relative; z-index:1 }

.ze-janela{ fill:#f0b23c; opacity:.55 }
.ze-estrelas circle{ animation:ze-piscar-estrela 4s ease-in-out infinite }
.ze-estrelas circle:nth-child(2n){ animation-delay:1.3s }
.ze-estrelas circle:nth-child(3n){ animation-delay:2.6s }
@keyframes ze-piscar-estrela{ 0%,100%{opacity:.85} 50%{opacity:.25} }

.ze-lampiao{ animation:ze-chama 2.7s ease-in-out infinite }
@keyframes ze-chama{ 0%,100%{opacity:1} 45%{opacity:.72} 60%{opacity:.95} }

/* o cenário reage aos estados, bem de leve */
.ze-atento  #ze-cenario{ filter:saturate(1.15) brightness(1.06) }
.ze-dormindo #ze-cenario{ filter:brightness(.72) }

@media (prefers-reduced-motion:reduce){
  .ze-estrelas circle, .ze-lampiao{ animation:none!important }
}

/* crachá JRS no peito */
.ze-cracha-txt{
  fill:#ffffff; font-family:Arial,Helvetica,sans-serif;
  font-size:10px; font-weight:700; letter-spacing:.5px;
  text-anchor:middle; paint-order:stroke;
  stroke:#1f5c26; stroke-width:.6;     /* contorno fino: segura a leitura no verde */
}

/* ═══════════════════════════════════════════════════════════════════════
   MODO TABLET/CELULAR + CENÁRIO
   O palco em tela cheia esticava o cenário. O desenho é em pé (400x600) e
   estava configurado pra COBRIR o espaço: numa tela deitada isso amplia até
   caber na largura e corta tudo que é céu, sobrando só o assoalho — foi o
   marrom lavado que apareceu.
   Solução: o palco vira um painel centralizado com proporção controlada. A
   tela continua toda ocupada, mas com o fundo escuro em volta do quadro.
   ═══════════════════════════════════════════════════════════════════════ */

body.ze-tablet #s-admin{ display:flex; align-items:center; justify-content:center }

body.ze-tablet #ze-palco{
  width:min(96vw, 560px);
  height:min(94vh, 940px);
  min-height:0;
  margin:0 auto;
  border-radius:18px;
  justify-content:center;
  gap:14px;
}

/* a figura passa a ser medida pela ALTURA do palco: assim ela cresce junto
   com a tela em vez de ficar um bonequinho no meio do vazio */
body.ze-tablet #ze-figura{
  height:58%;
  width:auto;
  max-width:82%;
}

body.ze-tablet #ze-cenario{ border-radius:18px }
body.ze-tablet #ze-legenda{ font-size:15pt }
body.ze-tablet #ze-rotulo{ font-size:11pt }
body.ze-tablet #ze-barra{ max-width:88% }

/* tela deitada e baixa (tablet na horizontal): encolhe a figura pra sobrar
   espaço pra legenda e pros botões */
@media (max-height:620px){
  body.ze-tablet #ze-figura{ height:52% }
  body.ze-tablet #ze-legenda{ font-size:13pt }
}

/* ═══════════════════════════════════════════════════════════════════════
   CENARIO — cores da noite (padrao) e do dia (.ze-dia no #ze-palco).
   O JS troca a classe pelo relogio do aparelho: dia das 6h as 18h.
   Fills ficam AQUI e nao no atributo do SVG — e o que permite virar o
   cenario inteiro trocando uma classe so.
   ═══════════════════════════════════════════════════════════════════════ */

#ze-palco .cen-so-dia{ display:none }
#ze-palco.ze-dia .cen-so-dia{ display:inline }
#ze-palco.ze-dia .cen-so-noite{ display:none }

.cen-assina-txt{ font-family:'Segoe Script','Brush Script MT',cursive; font-size:26px;
  font-style:italic; fill:#e8c96a; opacity:.95 }
.cen-assina-tr{ stroke:#e8c96a; stroke-width:1.4; opacity:.75; stroke-linecap:round }
.cen-assina-pt{ fill:#e8c96a; opacity:.8 }

.cen-morro1{ fill:#0e1c2e }
.cen-morro2{ fill:#0c1929 }
.cen-morro-base{ fill:#1b2d45 }
.cen-nevoa{ fill:#8fa3ba; opacity:.05 }

.cen-predio{ fill:#233650 }
.cen-telhado{ fill:#182a40 }
.cen-telhado-l{ fill:#31486a }
.cen-poste{ fill:#33465e }
.cen-porta{ fill:#0e1a28 }
.cen-porta-v{ fill:#31486a }
.cen-chamine{ fill:#2c405c }
.cen-fumaca{ fill:#8fa3ba }

.cen-placa{ fill:#182a40; stroke:#31486a; stroke-width:1.5 }
.cen-placa-txt{ font-family:Georgia,serif; font-size:13px; fill:#e0a94a;
  letter-spacing:5px; text-anchor:middle }

.cen-janela{ fill:#e0a94a }
.cen-janela2{ fill:#101d2c }
.cen-caixilho{ stroke:#182a40; stroke-width:2.5 }
.cen-caixilho-l{ stroke:#182a40; stroke-width:1.6 }
.cen-dourado{ fill:#e0a94a }

.cen-barril{ fill:#6b4a28 }
.cen-aro{ stroke:#c98a2f; stroke-width:2 }
.cen-roda{ stroke:#6b4a28; stroke-width:2.4; opacity:.85 }

.cen-vidro{ fill:#e8a534 }
.cen-chama{ fill:#f6cf7e }

.cen-cacto rect{ fill:#2e5b3a }
.cen-flor{ fill:#d4547a }
.cen-flor-c{ fill:#f0a0bc }

.cen-rua{ fill:#1b2c40 }
.cen-rua-marca{ fill:#16273a }
.cen-assoalho{ fill:#2a1d12 }
.cen-tabua{ fill:#3d2c1b }
.cen-junta{ fill:#1d1309 }
.cen-prego{ fill:#523821 }
.cen-vinheta{ fill:#0b1626; opacity:.28 }

/* ── dia ──────────────────────────────────────────────────────────────── */
#ze-palco.ze-dia .cen-assina-txt{ fill:#a06a35 }
#ze-palco.ze-dia .cen-assina-tr{ stroke:#a06a35; opacity:.8 }
#ze-palco.ze-dia .cen-assina-pt{ fill:#a06a35 }

#ze-palco.ze-dia .cen-morro1{ fill:#c4ad8c }
#ze-palco.ze-dia .cen-morro2{ fill:#b39877 }
#ze-palco.ze-dia .cen-morro-base{ fill:#d8b98b }
#ze-palco.ze-dia .cen-nevoa{ fill:#e8d9bd; opacity:.3 }

#ze-palco.ze-dia .cen-predio{ fill:#8c6039 }
#ze-palco.ze-dia .cen-telhado{ fill:#6b4527 }
#ze-palco.ze-dia .cen-telhado-l{ fill:#a3764a }
#ze-palco.ze-dia .cen-poste{ fill:#5e3d26 }
#ze-palco.ze-dia .cen-porta{ fill:#3f2a1a }
#ze-palco.ze-dia .cen-porta-v{ fill:#8c6039 }
#ze-palco.ze-dia .cen-chamine{ fill:#6b4527 }
#ze-palco.ze-dia .cen-fumaca{ fill:#e8e2d4; opacity:.6 }

#ze-palco.ze-dia .cen-placa{ fill:#5e3d26; stroke:#a3764a }
#ze-palco.ze-dia .cen-placa-txt{ fill:#e8c96a }

#ze-palco.ze-dia .cen-janela,
#ze-palco.ze-dia .cen-janela2{ fill:#bcd8e8 }
#ze-palco.ze-dia .cen-caixilho,
#ze-palco.ze-dia .cen-caixilho-l{ stroke:#4a3320 }
#ze-palco.ze-dia .cen-dourado{ fill:#c98a2f }

#ze-palco.ze-dia .cen-barril{ fill:#8b5f33 }
#ze-palco.ze-dia .cen-roda{ stroke:#8b5f33; opacity:.9 }

#ze-palco.ze-dia .cen-vidro{ fill:#d9e2ea }
#ze-palco.ze-dia .cen-chama{ fill:#eef3f7 }

#ze-palco.ze-dia .cen-cacto rect{ fill:#4e8b46 }

#ze-palco.ze-dia .cen-rua{ fill:#d8b98b }
#ze-palco.ze-dia .cen-rua-marca{ fill:#c9a97f }
#ze-palco.ze-dia .cen-assoalho{ fill:#8a6239 }
#ze-palco.ze-dia .cen-tabua{ fill:#a3764a }
#ze-palco.ze-dia .cen-junta{ fill:#6f4c2b }
#ze-palco.ze-dia .cen-prego{ fill:#5c4326 }
#ze-palco.ze-dia .cen-vinheta{ fill:#f2e4c9; opacity:.10 }

/* ── figurino novo do Ze ──────────────────────────────────────────────── */
.ze-jeans-barra{ fill:#3f6d9c }
.ze-bota-sola{ fill:#5c3a1c }
.ze-espora{ stroke:#e0a020; stroke-width:1.8; stroke-linecap:round }

.ze-lenco-pano{ fill:#b03a3a }
.ze-lenco-ponta{ fill:#a83232 }
.ze-lenco-dobra{ stroke:#8f2e2e; stroke-width:1.4 }
.ze-lenco-no{ fill:#8f2e2e }

.ze-bigode-pelo{ fill:#6b4a28 }
.ze-bigode-luz{ fill:#8a6238 }
.ze-bigode-furo{ fill:#6fcf6f }

/* ═══ RELOGIO — so no modo tablet ═══════════════════════════════════════
   Fica a esquerda do cadeado pra nao brigar com ele. Sem segundos: o
   tablet fica horas ligado e nao precisa de um numero piscando a toa.  */
#ze-relogio{ display:none }
body.ze-tablet #ze-relogio{
  display:block; position:absolute; top:10px; right:56px; z-index:6;
  text-align:right; padding:6px 12px; border-radius:10px;
  background:rgba(10,20,34,.45); color:#e8eef6;
  font-family:Arial,sans-serif; line-height:1.15; pointer-events:none;
}
body.ze-tablet.ze-dia #ze-relogio,
body.ze-tablet #ze-palco.ze-dia #ze-relogio{ background:rgba(10,20,34,.32) }
#ze-hora{ font-size:20pt; font-weight:700; letter-spacing:.5px }
#ze-data{ font-size:9.5pt; opacity:.85; text-transform:capitalize }