/* Alpha Dev — seção do escritório 3D (#escritorio). Depende dos tokens de site.css.
   As variáveis --esc-* são lidas pelo escritorio3d.js para pintar a sala; mudam com o tema. */

.escritorio{
  --esc-palco:var(--ceu,#E3E7FF);
  --esc-palco-noite:#0E1645;
  --esc-noite:0;           /* 0 de dia, 1 de madrugada: o JS acompanha a hora de São Paulo */
  --esc-piso:#E9ECF6;
  --esc-piso-linha:rgba(38,56,232,.16);
  --esc-base:#2638E8;
  --esc-parede:#FFFFFF;
  --esc-parede-topo:#0B1238;
  --esc-rodape:#2638E8;
  --esc-mesa:#FFFFFF;
  --esc-mesa-lado:#D6DBEC;
  --esc-movel:#0B1238;
  --esc-tapete:#DCE1FA;
  --esc-cartao:#FFFFFF;
  --esc-cartao-texto:var(--tinta,#0B1238);
  --esc-cartao-apoio:var(--grafite,#535A78);
  padding:clamp(72px,11vh,140px) var(--borda,20px) clamp(88px,13vh,160px);
}
:root[data-tema="escuro"] .escritorio{
  --esc-palco-noite:#050821;
  --esc-piso:#28336F;
  --esc-piso-linha:rgba(238,240,251,.07);
  --esc-base:#2638E8;
  --esc-parede:#38448C;
  --esc-parede-topo:#060A22;
  --esc-rodape:#4A5CFF;
  --esc-mesa:#4954A6;
  --esc-mesa-lado:#2C377A;
  --esc-movel:#070B26;
  --esc-tapete:#303C84;
  --esc-cartao:#10173D;
  --esc-cartao-texto:#E8EBFA;
  --esc-cartao-apoio:#A2A9CC;
}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]) .escritorio{
    --esc-palco-noite:#050821;
    --esc-piso:#28336F;
    --esc-piso-linha:rgba(238,240,251,.07);
    --esc-base:#2638E8;
    --esc-parede:#38448C;
    --esc-parede-topo:#060A22;
    --esc-rodape:#4A5CFF;
    --esc-mesa:#4954A6;
    --esc-mesa-lado:#2C377A;
    --esc-movel:#070B26;
    --esc-tapete:#303C84;
    --esc-cartao:#10173D;
    --esc-cartao-texto:#E8EBFA;
    --esc-cartao-apoio:#A2A9CC;
  }
}

.escritorio__cabeca{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:20px clamp(24px,4vw,72px);align-items:end;margin-bottom:clamp(28px,5vh,56px)}

.escritorio__palco{position:relative;margin:0;border-radius:var(--raio-g,32px);background:var(--esc-palco);background:color-mix(in srgb,var(--esc-palco-noite) calc(var(--esc-noite) * 100%),var(--esc-palco));overflow:hidden}
.escritorio__cena{position:relative;width:100%;aspect-ratio:16/9;max-height:min(80vh,760px);min-height:320px;overflow:hidden}
.escritorio__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;cursor:grab;-webkit-tap-highlight-color:transparent;opacity:0;transition:opacity .6s var(--suave,ease)}
.escritorio__canvas.arrastando{cursor:grabbing}
.escritorio--3d .escritorio__canvas{opacity:1}

/* rótulos das mesas (posicionados pelo JS) */
.escritorio__rotulos{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:0;transition:opacity .6s}
.escritorio--3d .escritorio__rotulos{opacity:1}
.escritorio__rotulo{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 7px;border-radius:999px;background:var(--esc-cartao);color:var(--esc-cartao-texto);font-size:.74rem;font-weight:620;font-stretch:104%;line-height:1.2;letter-spacing:-.003em;white-space:nowrap;box-shadow:0 1px 2px rgba(11,18,56,.10),0 6px 14px -8px rgba(11,18,56,.35);will-change:transform}
.escritorio__rotulo i{width:9px;height:9px;border-radius:50%;background:var(--c,#2638E8);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3);flex:none}
.escritorio__rotulo--pessoa{background:var(--esc-cartao-texto);color:var(--esc-cartao)}
.escritorio__rotulo--pessoa i{background:none;border:2px solid var(--vermelho,#E8432A)}

/* reserva: aparece sem JS, sem WebGL, ou enquanto o 3D não carrega */
.escritorio__reserva{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-content:center;gap:clamp(10px,1.6vw,18px);padding:clamp(20px,5vw,72px);margin:0;list-style:none;transition:opacity .5s}
.escritorio__reserva li{display:flex;align-items:center;gap:10px;min-height:64px;padding:14px 16px;border-radius:var(--raio-m,20px);background:var(--esc-cartao);color:var(--esc-cartao-texto);font-weight:640;font-stretch:106%;font-size:clamp(.9rem,1.3vw,1.05rem);line-height:1.25;box-shadow:0 1px 2px rgba(11,18,56,.08)}
.escritorio__reserva li::before{content:"";flex:none;width:22px;height:22px;border-radius:50% 50% 45% 45%;background:var(--c,#2638E8);box-shadow:inset 0 -6px 0 rgba(0,0,0,.12)}
.escritorio__reserva .escritorio__reserva-pessoa{grid-column:1/-1;justify-content:center;background:var(--esc-cartao-texto);color:var(--esc-cartao)}
.escritorio__reserva .escritorio__reserva-pessoa::before{background:none;border:3px solid var(--vermelho,#E8432A);box-shadow:none}
.escritorio--3d .escritorio__reserva{opacity:0;visibility:hidden;transition:none}

/* placar e relógio */
.escritorio__hud{position:absolute;left:clamp(14px,2vw,28px);bottom:clamp(14px,2vw,28px);z-index:2;display:grid;gap:2px;padding:14px 18px 13px;border-radius:var(--raio-m,20px);background:var(--esc-cartao);color:var(--esc-cartao-texto);box-shadow:0 1px 2px rgba(11,18,56,.08),0 14px 30px -18px rgba(11,18,56,.45);min-width:min(270px,100%);grid-template-columns:auto minmax(0,1fr);column-gap:10px;align-items:baseline;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .6s var(--suave,ease),background-color .4s,color .4s}
.escritorio--3d .escritorio__hud{opacity:1;transform:none}
.escritorio__conta{display:contents;font-size:.92rem;line-height:1.3;color:var(--esc-cartao-apoio)}
.escritorio__conta>span{font-size:.92rem;line-height:1.3}
.escritorio__conta output{font-size:1.7rem;font-weight:740;font-stretch:112%;letter-spacing:-.02em;line-height:1.1;color:var(--azul,#2638E8);font-variant-numeric:tabular-nums;justify-self:start}
.escritorio__conta--pessoa output{font-size:1.15rem;color:var(--vermelho,#E8432A)}
.escritorio__relogio{grid-column:1/-1;margin-top:6px;padding-top:8px;border-top:1px solid var(--linha,rgba(11,18,56,.13));font-size:.8rem;color:var(--esc-cartao-apoio);font-variant-numeric:tabular-nums}
.escritorio__relogio:empty{display:none}
.escritorio--espera .escritorio__relogio:empty{display:block}
.escritorio--espera .escritorio__relogio:empty::before{content:"\00a0"}

.escritorio__dica{position:absolute;right:clamp(14px,2vw,28px);bottom:clamp(14px,2vw,28px);z-index:2;margin:0;display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:var(--esc-cartao);color:var(--esc-cartao-apoio);font-size:.8rem;line-height:1.2;pointer-events:none;opacity:0;transition:opacity .5s}
.escritorio__dica::before{content:"";width:22px;height:10px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 10'%3E%3Cpath d='M1 5h20M5 1 1 5l4 4M17 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 10'%3E%3Cpath d='M1 5h20M5 1 1 5l4 4M17 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.escritorio--3d .escritorio__dica{opacity:1}
.escritorio__legenda{display:none}
.escritorio--sem3d .escritorio__hud,.escritorio--sem3d .escritorio__dica{display:none}
.escritorio--mexeu .escritorio__dica,.escritorio--parado .escritorio__dica{opacity:0}

@media (max-width:960px){
  .escritorio__cabeca{grid-template-columns:minmax(0,1fr)}
  .escritorio__cena{aspect-ratio:4/3}
}
@media (max-width:760px){
  .escritorio__cena{aspect-ratio:1/.84;min-height:0}
  .escritorio__rotulos{display:none}
  .escritorio--espera .escritorio__legenda,.escritorio--3d .escritorio__legenda{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0;padding:6px 18px 2px;list-style:none;font-size:.8rem;line-height:1.3;color:var(--esc-cartao-texto)}
  .escritorio__legenda li{display:inline-flex;align-items:center;gap:6px}
  .escritorio__legenda li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--c,#2638E8);box-shadow:0 0 0 1.5px rgba(255,255,255,.35)}
  .escritorio__legenda .escritorio__legenda-pessoa::before{background:none;border:2px solid var(--vermelho,#E8432A);width:6px;height:6px}
  .escritorio--noite .escritorio__legenda{color:#EEF0FB}
  /* no celular o placar sai de cima da sala e vira uma faixa embaixo */
  .escritorio__hud{position:static;min-width:0;border-radius:0;box-shadow:none;background:transparent;padding:10px 18px 18px;transform:none}
  .escritorio__relogio{margin-top:2px;border-top:0;padding-top:0}
  .escritorio__conta output{font-size:1.4rem}
  .escritorio__dica{display:none}
  .escritorio--noite .escritorio__hud{color:#EEF0FB}
  .escritorio--noite .escritorio__conta{color:#A8B0D8}
  .escritorio--noite .escritorio__conta output{color:#8C9BFF}
  .escritorio--noite .escritorio__conta--pessoa output{color:#FF7A62}
  .escritorio--noite .escritorio__relogio{color:#A8B0D8}
  .escritorio__reserva{grid-template-columns:repeat(2,minmax(0,1fr));padding:18px;gap:10px}
  .escritorio__reserva li{min-height:52px;padding:10px 12px}
}

@media (prefers-reduced-motion:reduce){
  .escritorio__canvas,.escritorio__rotulos,.escritorio__hud,.escritorio__reserva{transition:none}
  .escritorio__dica{display:none}
}