/* Casa3D · entrada, conta e administração no mesmo padrão do Estúdio (src/ui.css):
   preto e dourado, octógonos de canto pequeno, colmeia de hexágonos, faixa de destaques e barra inferior. */
:root {
 color-scheme: dark;
 --fundo: #050607;
 --fundo-2: #0a0b0d;
 --superficie: #0f1113;
 --superficie-2: #15181b;
 --superficie-3: #1d2125;
 --linha: rgba(240,196,92,.12);
 --linha-2: rgba(240,196,92,.32);
 --canto: rgba(240,196,92,.75);
 --texto: #f1f3f5;
 --suave: #a59f92;
 --fraco: #6f6a5f;
 --acento: #ffe39a;
 --acento-2: #d4a845;
 --claro: #fff4d6;
 --erro: #ff8a7a;
 --prata: linear-gradient(135deg,#fff1c2,#f2c15a 55%,#c8962f);
 --holo: linear-gradient(180deg,#fff8e4 25%,#e9bd5c 100%);
 --display: Bahnschrift,"Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;
 --mono: Consolas,"Cascadia Mono",monospace;
 --sombra: 0 14px 34px -16px rgba(0,0,0,.95);
 --c: 8px;
 --octogono: polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c));
 --hexagono: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
 --flor: polygon(90% 50%,100% 33.333%,90% 16.667%,70% 16.667%,60% 0,40% 0,30% 16.667%,10% 16.667%,0 33.333%,10% 50%,0 66.667%,10% 83.333%,30% 83.333%,40% 100%,60% 100%,70% 83.333%,90% 83.333%,100% 66.667%);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-top: 72px; }
body {
 margin: 0; min-height: 100vh; display: flex; flex-direction: column;
 color: var(--texto); font: 14px/1.45 "Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;
 background: radial-gradient(55% 45% at 50% 40%,rgba(240,196,92,.07),transparent 70%),radial-gradient(40% 35% at 0% 100%,rgba(240,196,92,.04),transparent 70%),#060504;
}
.icones { position: absolute; width: 0; height: 0; overflow: hidden; }
h1, h2, h3, p { margin: 0; }
p { color: var(--suave); }
a { color: var(--acento); }
input, select, button { font: inherit; color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

/* ---------- peças base (iguais ao Estúdio) ---------- */
.sobrelinha { display: inline-flex; align-items: center; gap: 7px; font: 700 10px var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--acento-2); }
.sobrelinha::before { content: ""; width: 6px; height: 6px; background: var(--acento-2); clip-path: polygon(0 0,100% 50%,0 100%); }
button {
 --c: 7px; min-height: 34px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
 border: 1px solid var(--linha-2); background: rgba(255,255,255,.04); color: var(--texto); cursor: pointer; clip-path: var(--octogono);
 font: 600 11.5px var(--display); letter-spacing: .08em; text-transform: uppercase; transition: background-color .12s, border-color .12s, filter .12s;
}
button:hover:not(:disabled) { background: rgba(240,196,92,.1); border-color: var(--acento-2); }
button:disabled { opacity: .45; cursor: not-allowed; }
button[aria-busy="true"] { cursor: progress; }
button.principal { border-color: transparent; color: #1a1204; background: var(--prata); }
button.principal:hover:not(:disabled) { background: var(--prata); filter: brightness(1.08); }
button.pequeno { --c: 6px; min-height: 30px; padding: 0 11px; font-size: 11px; }
button.perigo { color: var(--erro); }
.pilula {
 --c: 6px; height: 32px; min-height: 32px; padding: 0 12px; display: inline-flex; align-items: center; border: 1px solid var(--linha-2); background: var(--superficie-2);
 color: var(--texto); text-decoration: none; clip-path: var(--octogono); font: 700 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.pilula:hover { border-color: var(--acento-2); }
.pilula.principal { color: #1a1204; background: var(--prata); border-color: transparent; }
.chip { --c: 5px; display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; clip-path: var(--octogono); background: rgba(8,9,11,.85); border: 1px solid var(--linha-2); font: 700 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--suave); }
.chip::before { content: ""; width: 5px; height: 5px; transform: rotate(45deg); background: var(--acento-2); }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
kbd { --c: 5px; min-width: 24px; text-align: center; padding: 2px 6px; clip-path: var(--octogono); background: var(--superficie-3); border: 1px solid var(--linha-2); color: var(--texto); font: 700 10.5px/1.5 var(--mono); }

/* ---------- barra superior ---------- */
.topbar {
 position: sticky; top: 0; z-index: 30; height: 60px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 16px;
 background: linear-gradient(180deg,#0a0b0d,rgba(5,6,7,.96)); border-bottom: 1px solid var(--linha);
}
.marca { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; white-space: nowrap; }
.marca > svg { width: 34px; height: 34px; }
.marca:hover > svg { filter: drop-shadow(0 0 6px rgba(255,227,154,.7)); }
.marca .nome { display: flex; align-items: center; gap: 8px; font: italic 600 25px/.95 var(--display); letter-spacing: .02em; }
.marca .nome i { background: var(--holo); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 2px; }
.marca .nome em { font: 800 10px var(--mono); letter-spacing: .24em; color: #1a1204; background: var(--prata); padding: 3px 7px 3px 9px; clip-path: polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px); }
.marca small { display: block; margin-top: 5px; font: 700 9px var(--mono); letter-spacing: .3em; color: var(--acento-2); text-transform: uppercase; }
.espaco { flex: 1; }
.relogio { --c: 6px; display: flex; align-items: center; height: 32px; padding: 0 12px; clip-path: var(--octogono); border: 1px solid var(--linha); background: var(--fundo-2); font: 600 11px var(--mono); color: var(--suave); white-space: nowrap; }
.menu-topo { display: flex; align-items: center; gap: 6px; }

/* aviso flutuante (como #aviso do Estúdio) */
#estado {
 --c: 8px; position: fixed; left: 50%; top: 74px; z-index: 40; transform: translateX(-50%); max-width: min(720px,calc(100vw - 32px));
 padding: 11px 16px; clip-path: var(--octogono); background: var(--superficie-3); border: 1px solid var(--linha-2); box-shadow: inset 3px 0 0 var(--acento-2), var(--sombra);
 color: var(--claro); font-weight: 600; overflow-wrap: anywhere; transition: opacity .3s, transform .3s;
}
#estado:empty { display: none; }
#estado.a-sair { opacity: 0; transform: translate(-50%,-8px); pointer-events: none; }

/* ---------- ecrã de entrada: três colunas como o menu do Estúdio ---------- */
.ecra {
 flex: 1; display: grid; grid-template-columns: minmax(17em,22em) minmax(0,1fr) minmax(17em,22em); gap: 18px; align-items: center;
 width: 100%; max-width: 1680px; margin: 0 auto; padding: 18px 16px;
}
.lado { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.bloco-lado { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bloco-lado > .sobrelinha { padding-left: 6px; }
.cartao-lado {
 --c: 14px; position: relative; display: flex; flex-direction: column; gap: 12px; padding: 18px; clip-path: var(--octogono); min-width: 0;
 border: 1px solid var(--linha); background: linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.01) 60%),var(--superficie);
}
.cartao-lado::after {
 content: ""; position: absolute; inset: 0; pointer-events: none; --b: var(--canto); --l: 22px; opacity: .55; transition: opacity .12s;
 background:
  linear-gradient(var(--b),var(--b)) left 10px top / var(--l) 2px no-repeat, linear-gradient(var(--b),var(--b)) left top 10px / 2px var(--l) no-repeat,
  linear-gradient(var(--b),var(--b)) right 10px bottom / var(--l) 2px no-repeat, linear-gradient(var(--b),var(--b)) right bottom 10px / 2px var(--l) no-repeat;
}
.cartao-lado:hover::after, .cartao-lado:focus-within::after { opacity: 1; }
.cartao-lado > p, .cartao-lado li { font-size: 12.5px; line-height: 1.5; }
.proj-casa { display: flex; align-items: center; gap: 12px; min-width: 0; }
.proj-casa > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.proj-casa b, .proj-casa h2 { font: 600 16px/1.2 var(--display); color: var(--texto); }
.proj-casa small { font: 600 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--acento-2); }
.proj-ic { flex: none; display: grid; place-items: center; width: 44px; height: 38px; clip-path: var(--hexagono); background: rgba(240,196,92,.25); color: var(--acento); }
.proj-ic svg { width: 18px; height: 18px; }
.lista-privado { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; font-size: 12px; color: var(--texto); }
.lista-privado li { position: relative; padding-left: 18px; line-height: 1.35; }
.lista-privado li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 7px; height: 7px; transform: rotate(45deg); background: var(--acento-2); }
.etapas { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.etapas li, .passo { display: flex; align-items: center; gap: 11px; padding: 8px 10px; background: var(--superficie-2); border: 1px solid var(--linha); clip-path: polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px); }
.etapas .n, .passo .n { flex: none; width: 34px; height: 30px; display: grid; place-items: center; clip-path: var(--hexagono); background: rgba(240,196,92,.22); color: var(--acento); font: 800 11px var(--mono); }
.etapas div, .passo div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.etapas b, .passo b { font: italic 600 13px var(--display); text-transform: uppercase; letter-spacing: .02em; }
.etapas small, .passo span:not(.n) { font: 600 9.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--suave); }

/* cliente com histórico: o histórico substitui o «Como funciona» */
.lado-esq:has(#historico-conta:not([hidden])) #etapas-pagamento { display: none; }
/* sessão iniciada: as ações da conta estão na barra de cima; o cartão de entrada sai do meio */
body:has(#sair:not([hidden])) #acesso-conta { display: none; }
/* administrador: a página da conta é só a administração (o Estúdio abre-se pela barra de cima) */
body:has(#abrir-administracao:not([hidden])) .ecra { display: none; }
body:has(#abrir-administracao:not([hidden])) .ecra-admin { flex: 1; margin-top: 18px; }

/* ---------- colmeia central ---------- */
.centro { min-width: 0; display: grid; place-items: center; }
.colmeia-entrada {
 position: relative; container-type: inline-size; width: min(100%,calc((100svh - 220px) * 1.155),860px); min-width: 0; aspect-ratio: 8 / 6.928;
}
.hex {
 position: absolute; padding: 0; border: 0; color: var(--texto); background: rgba(240,196,92,.38); clip-path: var(--hexagono);
 transition: transform .12s, background-color .12s;
}
.hex-in {
 position: absolute; inset: 1.5px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6cqw; text-align: center; padding: 0 16%;
 clip-path: var(--hexagono); background: radial-gradient(80% 70% at 50% 20%,rgba(255,255,255,.07),transparent 70%),linear-gradient(180deg,#16191c,#0d0f11);
}
.celula { width: 25%; height: 25%; transform: scale(.955); }
.pos-esq { left: 0; top: 37.5%; }
.pos-dir { left: 75%; top: 37.5%; }
.pos-cima { left: 56.25%; top: 0; }
.pos-baixo { left: 18.75%; top: 75%; }
.hex-ic { width: max(16px,3cqw); height: max(16px,3cqw); color: var(--acento-2); }
.celula b { font: 600 max(11px,1.9cqw)/1.1 var(--display); }
.celula small { font: 600 max(8px,1.05cqw) var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--suave); }
.info { background: rgba(240,196,92,.16); }
.info .hex-in { background: repeating-linear-gradient(135deg,rgba(240,196,92,.035) 0 8px,transparent 8px 16px),#0d0c09; }
.info b { color: #d6d0c2; }
/* planos: células clicáveis com brilho dourado */
.preco { cursor: pointer; background: var(--acento-2); }
.preco .hex-in { gap: .35cqw; background: radial-gradient(70% 60% at 50% 30%,rgba(255,214,120,.16),transparent 70%),linear-gradient(180deg,#1a160f,#0d0b08); }
.preco-indice { font: 700 max(7.5px,1cqw) var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--acento-2); }
.preco b { font: 600 max(12px,2cqw)/1.1 var(--display); }
.preco strong { font: 600 max(16px,3.3cqw)/1 var(--display); background: var(--holo); -webkit-background-clip: text; background-clip: text; color: transparent; padding: .06em .04em 0 0; }
.preco small { color: var(--acento); }
.preco:hover:not(:disabled), .preco:focus-visible { background: var(--acento); transform: scale(1); z-index: 2; outline: none; }
.preco:hover:not(:disabled) .hex-in, .preco:focus-visible .hex-in { background: radial-gradient(70% 60% at 50% 35%,rgba(255,214,120,.26),transparent 72%),linear-gradient(180deg,#1c1810,#0e0c08); }
.preco:hover:not(:disabled) b { color: var(--claro); }
.preco:disabled { opacity: 1; background: rgba(240,196,92,.2); }
#planos { display: contents; }
/* núcleo em flor (7 células), como o EXPLORAR do Estúdio */
.nucleo { left: 18.75%; top: 12.5%; width: 62.5%; height: 75%; clip-path: var(--flor); background: var(--acento-2); z-index: 1; }
.nucleo .hex-in { inset: 2px; padding: 0; clip-path: var(--flor); background: #0d0f11; }
.hex-arte { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(rgba(240,196,92,.05) 1px,transparent 1px) 0 0 / 28px 28px,linear-gradient(90deg,rgba(240,196,92,.05) 1px,transparent 1px) 0 0 / 28px 28px,radial-gradient(60% 55% at 50% 45%,#1a1710,#0b0a08); }
.hex-arte::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 55% at 50% 55%,rgba(4,5,6,.6),rgba(4,5,6,.2) 75%),linear-gradient(0deg,rgba(4,5,6,.85),rgba(4,5,6,.2) 60%); }
.hex-arte svg { width: 78%; opacity: .35; }
.planta-parede { stroke: #eed788b3; stroke-width: 3; }
.planta-detalhe { stroke: #a59f9275; stroke-width: 1.5; }
.planta-cota { stroke: #d4a845bf; stroke-width: 1; }
.hex-conteudo { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 1.2cqw; padding: 0 14%; max-width: 100%; }
.nucleo .sobrelinha { font-size: max(8.5px,1.25cqw); letter-spacing: .2em; color: var(--acento); }
.nucleo h1, .hex-titulo { margin: 0; font: italic 600 max(26px,6.2cqw)/.95 var(--display); letter-spacing: .04em; text-transform: uppercase; background: var(--holo); -webkit-background-clip: text; background-clip: text; color: transparent; padding: .08em .1em 0 0; }
.nucleo h1 small { display: block; margin-bottom: .25em; font-size: .38em; letter-spacing: .24em; }
.hex-desc { max-width: 30em; color: #c9ced4; font-size: max(11.5px,1.7cqw); line-height: 1.4; }
.cta {
 --c: 7px; display: inline-flex; align-items: center; gap: 9px; height: 38px; min-height: 38px; padding: 0 16px; margin-top: .4cqw; border: 0; clip-path: var(--octogono);
 color: #1a1204; background: var(--prata); text-decoration: none; font: 600 13px var(--display); letter-spacing: .1em; text-transform: uppercase; transition: filter .12s, transform .12s;
}
.cta svg { width: 15px; height: 15px; }
.cta:hover, .cta:hover:not(:disabled) { background: var(--prata); filter: brightness(1.08); transform: translateY(-2px); }
.dica-plano { display: none; font: 700 max(9px,1.2cqw) var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--acento); }
.dica-plano::before { content: "◂  "; }
.dica-plano::after { content: "  ▸"; }
body:has(#sair:not([hidden])) #heroi .cta { display: none; }
body:has(#sair:not([hidden])) #heroi .dica-plano { display: block; }
.colmeia-entrada:has(#estudio:not([hidden])) #heroi { display: none; }
#estado-estudio:empty { display: none; }
@keyframes hex-entra { from { opacity: 0; transform: scale(.9); } }
.colmeia-entrada .hex { animation: hex-entra .3s ease both; }
.colmeia-entrada .pos-esq { animation-delay: 40ms; } .colmeia-entrada .pos-dir { animation-delay: 80ms; }
.colmeia-entrada .pos-cima { animation-delay: 120ms; } .colmeia-entrada .pos-baixo { animation-delay: 160ms; }

/* ---------- conta e formulários ---------- */
.separadores { --c: 7px; display: flex; gap: 2px; padding: 3px; clip-path: var(--octogono); background: var(--fundo-2); border: 1px solid var(--linha); }
.separadores button { --c: 5px; flex: 1; min-height: 26px; height: 26px; padding: 0 8px; border: 0; background: transparent; color: var(--suave); font: 700 10px var(--mono); letter-spacing: .12em; }
.separadores button:hover:not(:disabled) { color: var(--texto); background: rgba(255,255,255,.05); }
.separadores button[aria-pressed="true"] { background: var(--prata); color: #1a1204; }
form { display: flex; flex-direction: column; gap: 10px; margin: 0; }
label { display: grid; gap: 4px; font: 600 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--suave); }
input:not([type="checkbox"]):not([type="file"]) {
 --c: 6px; width: 100%; min-width: 0; height: 36px; padding: 0 10px; clip-path: var(--octogono); border: 1px solid var(--linha-2); background: var(--fundo-2);
 color: var(--texto); font: 600 13px "Segoe UI",sans-serif; letter-spacing: 0; text-transform: none;
}
input:not([type="checkbox"]):focus-visible { outline: none; border-color: var(--acento); box-shadow: inset 0 0 0 1px var(--acento); }
input[type="file"] { width: 100%; padding: 8px; border: 1px dashed var(--linha-2); background: rgba(255,255,255,.02); color: var(--suave); font: 12px "Segoe UI",sans-serif; letter-spacing: 0; text-transform: none; }
input[type="file"]::file-selector-button { margin-right: 10px; padding: 6px 10px; border: 1px solid var(--linha-2); background: var(--superficie-2); color: var(--texto); font: 700 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
input[type="checkbox"] { accent-color: var(--acento-2); width: 16px; height: 16px; margin: 0; }
.campo-password { display: grid; gap: 4px; }
.campo-password > label { display: block; }
.entrada-password { display: grid; grid-template-columns: minmax(0,1fr) 40px; gap: 4px; }
.ver-password { min-height: 36px; padding: 0; color: var(--acento); }
.ver-password svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ver-password[aria-pressed="true"] { background: rgba(240,196,92,.16); }
form button.principal { min-height: 38px; margin-top: 2px; }
.pilula.sair { gap: 7px; }
.pilula.sair svg { width: 14px; height: 14px; color: var(--acento-2); }
.pilula.sair:hover svg { color: var(--acento); }

/* histórico do cliente */
#resumo-acesso { display: grid; gap: 6px; padding: 12px; background: var(--superficie-2); border: 1px solid var(--linha); clip-path: polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px); }
#acesso { font-size: 12px; }
#tempo-restante { font: 600 15px/1.25 var(--mono); color: var(--claro); font-variant-numeric: tabular-nums; }
#tempo-restante:empty { display: none; }
.lista-pedidos, .lista-notificacoes { display: grid; gap: 6px; max-height: 300px; overflow-y: auto; overscroll-behavior: contain; }
.pedido, .lista-notificacoes p { display: grid; gap: 6px; padding: 10px 12px; background: var(--superficie-2); border: 1px solid var(--linha); box-shadow: inset 3px 0 0 var(--acento-2); clip-path: polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px); }
.pedido-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pedido h3 { font: 600 14px var(--display); }
.pedido button { justify-self: start; }
.lista-notificacoes p { font-size: 12px; color: var(--texto); }
.estado-pedido.estado-aprovado { color: #1a1204; background: var(--prata); border-color: transparent; }
.estado-pedido.estado-aprovado::before { background: #1a1204; }
.estado-pedido.estado-em_analise { color: var(--acento); }
.estado-pedido.estado-rejeitado { color: var(--erro); }
.estado-pedido.estado-rejeitado::before { background: var(--erro); }
#atualizar { align-self: flex-start; }

/* pagamento Multibanco */
.pagamento-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#pagamento-montante { font: 600 24px var(--display); white-space: nowrap; background: var(--holo); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 2px; }
#estado-pagamento { font-size: 12px; }
.dados-pagamento { display: grid; grid-template-columns: auto 1fr; gap: 6px; margin: 0; }
.dados-pagamento > div { display: flex; flex-direction: column; gap: 3px; padding: 9px 11px; min-width: 0; background: var(--superficie-2); border: 1px solid var(--linha-2); clip-path: polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px); }
.dados-pagamento dt { font: 600 9px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--acento-2); }
.dados-pagamento dd { margin: 0; font: 600 19px var(--mono); letter-spacing: .03em; color: var(--claro); font-variant-numeric: tabular-nums; white-space: nowrap; }
#comprovativo fieldset { display: flex; flex-direction: column; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
.limite-ficheiro { font-size: 11px; color: var(--fraco); }
#estado-envio { font-size: 12px; color: var(--acento); }
#estado-envio:empty { display: none; }

/* ---------- administração: como o ecrã do Estúdio (passos + conteúdo) ---------- */
.ecra-admin {
 display: grid; grid-template-columns: 250px minmax(0,1fr); width: calc(100% - 32px); max-width: 1648px; margin: 0 auto 18px;
 border: 1px solid var(--linha); background: radial-gradient(60% 50% at 75% -10%,rgba(240,196,92,.05),transparent 70%),var(--fundo);
 clip-path: polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px);
}
.passos { padding: 18px 12px; display: flex; flex-direction: column; gap: 6px; border-right: 1px solid var(--linha); background: radial-gradient(90% 40% at 0% 0%,rgba(240,196,92,.06),transparent 70%),var(--fundo-2); }
.passos h3 { margin: 4px 8px 12px; font: 700 10px var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--acento-2); }
.passo { background: transparent; border-color: transparent; padding: 11px 12px; }
.ecra-admin:not(:has(#decisao:not([hidden]))) .p-fila, .ecra-admin:has(#decisao:not([hidden])) .p-banco, .ecra-admin:has(#decisao:not([hidden])) .p-decidir { background: var(--superficie-2); border-color: var(--linha-2); box-shadow: inset 3px 0 0 var(--acento-2); }
.ecra-admin:not(:has(#decisao:not([hidden]))) .p-fila .n, .ecra-admin:has(#decisao:not([hidden])) .p-decidir .n { background: var(--prata); color: #1a1204; }
.rodape-passos { margin-top: auto; padding: 10px; font-size: 11.5px; color: var(--suave); background: var(--superficie); border: 1px solid var(--linha); clip-path: polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px); }
.conteudo { padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.conteudo > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.conteudo > header h2 { font: italic 600 28px/1 var(--display); text-transform: uppercase; letter-spacing: .01em; background: var(--holo); -webkit-background-clip: text; background-clip: text; color: transparent; padding: .08em .06em 0 0; }
#resumo-administracao { margin-top: 4px; font-size: 13px; }
.instrucao { padding: 9px 12px; background: var(--superficie-2); border: 1px solid var(--linha-2); box-shadow: inset 3px 0 0 var(--acento); color: var(--texto); font-weight: 600; font-size: 13px; clip-path: var(--octogono); --c: 8px; }
.colunas { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: 12px; align-items: start; }
.painel { --c: 14px; display: flex; flex-direction: column; gap: 10px; padding: 14px; min-width: 0; clip-path: var(--octogono); border: 1px solid var(--linha); background: linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.01) 60%),var(--superficie); }
.painel h4 { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 10px var(--mono); color: var(--acento-2); text-transform: uppercase; letter-spacing: .22em; }
.painel h4::before { content: ""; width: 6px; height: 6px; background: var(--acento-2); clip-path: polygon(0 0,100% 50%,0 100%); }
.lista-fila { display: grid; gap: 8px; }
.item-fila { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 12px; align-items: center; padding: 12px 14px; background: var(--superficie-2); border: 1px solid var(--linha); clip-path: polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px); }
.item-fila.selecionado { border-color: var(--acento-2); box-shadow: inset 3px 0 0 var(--acento); }
.item-fila h3 { font: 600 15px var(--display); }
.item-fila .detalhe { grid-column: 1 / -1; font: 600 10.5px var(--mono); letter-spacing: .04em; color: var(--suave); }
.item-fila .acoes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.fila-vazia { padding: 18px; text-align: center; color: var(--fraco); border: 1px dashed var(--linha-2); font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
#pagamento-em-decisao { font: 600 18px var(--display); color: var(--claro); }
.confirmar { display: flex; align-items: center; gap: 8px; font: 13px "Segoe UI",sans-serif; letter-spacing: 0; text-transform: none; color: var(--texto); }
.acoes-decisao { display: flex; flex-wrap: wrap; gap: 8px; }
.vazio { padding: 18px; text-align: center; color: var(--fraco); border: 1px dashed var(--linha-2); font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
#decisao:not([hidden]) + .vazio { display: none; }
#estado-decisao { color: var(--acento); font-size: 13px; }
#estado-decisao:empty { display: none; }
#reenviar-email { align-self: flex-start; }

/* ---------- faixa de destaques + barra inferior ---------- */
.faixa { flex: none; display: flex; align-items: center; gap: 14px; height: 32px; margin: 0 16px; overflow: hidden; border: 1px solid var(--linha); background: var(--fundo-2); }
.faixa .rotulo { height: 100%; display: inline-flex; align-items: center; padding: 0 16px 0 12px; font: 800 10.5px var(--mono); letter-spacing: .16em; color: #1a1204; background: var(--prata); clip-path: polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%); white-space: nowrap; }
.faixa .dica { flex: 1; min-width: 0; font-size: 13px; color: #c9ced4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.faixa .dica b { margin-right: 10px; font: 800 10px var(--mono); letter-spacing: .16em; color: var(--acento-2); }
.faixa .contador { padding: 0 12px; font: 700 10.5px var(--mono); color: var(--fraco); }
.rodape { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; min-height: 38px; padding: 6px 16px; font: 600 12px var(--mono); color: var(--suave); }
.rodape span { display: inline-flex; align-items: center; gap: 7px; }
.rodape .direita { display: block; margin-left: auto; color: var(--fraco); }
.rodape b { color: var(--suave); font-weight: 600; }

/* ---------- ecrãs mais pequenos ---------- */
@media (max-width: 1250px) {
 .relogio, .marca small { display: none; }
 .ecra { grid-template-columns: minmax(0,1fr) minmax(17em,21em); align-items: start; }
 .centro { grid-row: 1; grid-column: 1; }
 .lado-dir { grid-row: 1; grid-column: 2; }
 .lado-esq { grid-row: 2; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,20em),1fr)); align-items: start; }
 .colmeia-entrada { width: min(100%,760px); }
}
@media (max-width: 860px) {
 .ecra { grid-template-columns: minmax(0,1fr); }
 .centro, .lado-dir, .lado-esq { grid-column: 1; grid-row: auto; }
 .centro { order: 1; } .lado-dir { order: 2; } .lado-esq { order: 3; }
 .ecra-admin { grid-template-columns: 64px minmax(0,1fr); }
 .passo div, .passos h3, .rodape-passos { display: none; }
 .passo { padding: 8px 4px; justify-content: center; }
 .colunas { grid-template-columns: minmax(0,1fr); }
 .rodape .direita { margin-left: 0; }
}
@media (max-width: 600px) {
 .topbar { gap: 8px; padding: 0 10px; }
 .marca .nome em { display: none; }
 .marca .nome { font-size: 21px; }
 .menu-topo .pilula { padding: 0 9px; font-size: 10px; }
 .pilula.sair span { display: none; }
 body:has(#sair:not([hidden])) .marca > span { display: none; }
 .topbar { overflow-x: auto; scrollbar-width: none; }
 .topbar > * { flex-shrink: 0; }
 .ecra { padding: 14px 12px; gap: 14px; }
 /* a colmeia vira núcleo + duas células lado a lado */
 .colmeia-entrada { width: 100%; aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
 .colmeia-entrada > .nucleo, .colmeia-entrada .celula { position: relative; left: auto; top: auto; transform: none; }
 .nucleo { grid-column: 1 / -1; width: 100%; height: auto; min-height: 330px; clip-path: var(--octogono); --c: 22px; }
 .nucleo .hex-in { clip-path: var(--octogono); --c: 21px; }
 .nucleo .hex-conteudo { position: absolute; inset: 0; justify-content: center; padding: 24px 20px; gap: 10px; }
 .nucleo h1, .hex-titulo { font-size: 34px; }
 .nucleo .sobrelinha { font-size: 9px; }
 .hex-desc { font-size: 13px; }
 .celula { width: 100%; height: auto; aspect-ratio: 2 / 1.732; }
 .info { display: none; }
 .preco-indice { font-size: 8px; } .preco b { font-size: 14px; } .preco strong { font-size: 22px; } .celula small { font-size: 9px; }
 .ecra-admin { width: calc(100% - 24px); }
 .conteudo { padding: 14px; }
 .faixa { margin: 0 12px; }
 .faixa .contador { display: none; }
 .rodape span:not(.direita) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
 *, *::before, *::after { animation: none !important; transition: none !important; }
}