/*
 * Simulador ATM — página imersiva (/ATM/Simulador).
 *
 * Aspeto do protótipo «Simulador ATM H22V» partilhado pelo banco, portado tal e qual para o
 * portal: o mesmo desenho, mas em CSS simples (o protótipo era React/Tailwind) para não trazer
 * Node nem cadeia de build. Tudo está debaixo de .atm-lab-app para não tocar no resto do site.
 *
 * A GEOMETRIA sobre a fotografia (ecrã, teclas laterais, leitor, teclado, notas, recibo) não está
 * fixa aqui: vem das definições do backoffice em variáveis --lab-*, porque muda com a fotografia.
 */

.atm-lab-app { --lab-line: #dce0e3; color: #202a32; }
.atm-lab-app button { font: inherit; cursor: pointer; transition: background .15s, transform .15s; }
.atm-lab-app button:disabled { cursor: default; opacity: .45; }
.atm-lab-app button:active { transform: translateY(1px); }
.atm-lab-app button:focus-visible, .atm-lab-app a:focus-visible { outline: 3px solid #55a9df; outline-offset: 3px; }

/* ---------------------------------------------------------------- barra do simulador */
.atm-lab-app .topbar { height: 86px; display: flex; align-items: center; padding: 0 4%; border-bottom: 1px solid var(--lab-line); background: #fff; gap: 42px; }
.atm-lab-app .brand { font-weight: 900; font-size: 30px; font-style: italic; letter-spacing: -1.4px; color: #125a91; }
.atm-lab-app .brand small { font-size: 10px; font-style: normal; letter-spacing: 2px; margin-left: 12px; border-left: 1px solid #ccc; padding-left: 12px; color: #7b8389; }
.atm-lab-app .top-title { font-size: 14px; font-weight: 600; }
.atm-lab-app .top-title span { display: block; font-size: 12px; color: #7d858a; margin-top: 5px; font-weight: 400; }
.atm-lab-app .sandbox { margin-left: auto; display: flex; gap: 8px; align-items: center; color: #657069; font-size: 12px; }
.atm-lab-app .sandbox i, .atm-lab-app .session-state i { width: 6px; height: 6px; background: #579274; border-radius: 50%; }

.atm-lab-app .workspace { display: grid; grid-template-columns: 290px minmax(430px, 1fr) 235px; max-width: 1560px; margin: auto; padding: 0 4%; gap: 22px; }

/* ---------------------------------------------------------------- coluna de apoio */
.atm-lab-app .guide { padding-top: 57px; }
.atm-lab-app .eyebrow { font-size: 10px; letter-spacing: 2px; font-weight: 700; color: #848b92; }
.atm-lab-app .guide h1 { font-size: 38px; line-height: 1.13; letter-spacing: -1.6px; font-weight: 500; margin: 19px 0; }
.atm-lab-app .guide h1 span { color: #90989e; }
.atm-lab-app .guide > p { color: #768087; font-size: 14px; line-height: 1.7; max-width: 240px; }
.atm-lab-app .steps { margin: 30px 0; }
.atm-lab-app .steps > div { display: flex; gap: 15px; margin: 22px 0; color: #9aa0a5; }
.atm-lab-app .steps b { font-size: 11px; width: 25px; height: 25px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid #d6dbdf; border-radius: 50%; }
.atm-lab-app .steps span { font-size: 14px; font-weight: 600; }
.atm-lab-app .steps small { display: block; font-size: 12px; font-weight: 400; margin-top: 6px; }
.atm-lab-app .steps .current { color: #26323b; }
.atm-lab-app .steps .current b { color: #fff; border-color: #1767a6; background: #1767a6; }
.atm-lab-app .steps strong { color: #1767a6; letter-spacing: 1px; }

.atm-lab-app .demo-card { width: 237px; height: 153px; color: #fff; background: linear-gradient(125deg, #237ab1, #073866); border: 1px solid #488bb8; border-radius: 11px; padding: 17px; text-align: left; box-shadow: 0 14px 22px #103f6b30; transform: rotate(-4deg); transition: transform .4s, opacity .4s; }
.atm-lab-app .demo-card:hover { transform: rotate(0) translateY(-4px); }
.atm-lab-app .demo-card.inserted { transform: rotate(0); opacity: .6; }
.atm-lab-app .demo-card > span:first-child { display: block; font-size: 19px; font-style: normal; font-weight: 700; letter-spacing: 1.5px; }
.atm-lab-app .demo-card small { float: right; font-style: normal; font-size: 9px; letter-spacing: 2px; margin-top: 8px; }
.atm-lab-app .demo-card > svg { margin: 10px 0 5px; color: #c7ddeb; }
.atm-lab-app .card-number { display: block; font-size: 13px; letter-spacing: 1px; }
.atm-lab-app .card-bottom { display: flex; align-items: center; justify-content: space-between; font-size: 8px; letter-spacing: .6px; margin-top: 10px; }
.atm-lab-app .card-network { font-size: 16px; font-style: italic; font-weight: 700; letter-spacing: -.8px; color: #d6efff; }
.atm-lab-app .card-caption { font-size: 11px; text-align: center; width: 237px; margin-top: 20px; }
.atm-lab-app .safe-note { font-size: 11px; color: #8c949a; line-height: 1.8; margin-top: 26px; }

/* ---------------------------------------------------------------- palco / máquina */
.atm-lab-app .stage { position: relative; min-height: 730px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.atm-lab-app .stage-grid { position: absolute; inset: 0 -10px; background: radial-gradient(ellipse at 50% 50%, #d4e2ed 0, transparent 68%); pointer-events: none; }
.atm-lab-app .model-label { position: absolute; top: 27px; left: 8%; font-size: 12px; letter-spacing: 2px; color: #a4abb1; }
.atm-lab-app .model-label span { display: block; font-size: 8px; letter-spacing: 1.5px; margin-top: 5px; }

.atm-lab-app .perspective { perspective: 1400px; width: 356px; height: 616px; margin: 20px 0 12px; transition: transform .4s; }
.atm-lab-app .machine { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
/* A frente NÃO leva transformação 3D: com `translateZ(38px)` sob `perspective: 1400px` o
   browser desenhava a camada ao tamanho real e ampliava-a 2,8% depois — era isso que tirava
   nitidez a todo o texto do ecrã. A profundidade da caixa passou para os lados (sem texto).
   O `translateZ(0)` (escala 1, sem desfoque) é OBRIGATÓRIO: achata a frente num só plano. Sem
   ele, o teclado — inclinado com rotateX — entrava na cena 3D da máquina e a metade de cima
   ficava ATRÁS da fotografia: as teclas 1 a 6, anular e corrigir deixavam de responder. */
.atm-lab-app .front { position: absolute; inset: 0; transform: translateZ(0); transform-style: flat; background: #ccc; box-shadow: 12px 18px 24px #1d29352b; }
.atm-lab-app .photo { position: absolute; inset: 0; overflow: hidden; }
.atm-lab-app .photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.atm-lab-app .side { position: absolute; top: 0; width: 76px; height: 100%; background: linear-gradient(90deg, #a7aaad, #dadcde 12%, #b3b6b9 90%, #eff0f1); border: 1px solid #999; }
.atm-lab-app .side.left { left: -38px; transform: translateZ(-38px) rotateY(-90deg); }
.atm-lab-app .side.right { right: -38px; transform: translateZ(-38px) rotateY(90deg); }

/* Geometria vinda do backoffice (Admin › Simulador ATM). */
/* O ecrã é o contentor de medida do seu próprio texto: tudo lá dentro está em `cqw` (por cento
   da largura do ecrã). Assim o texto acompanha o tamanho da máquina em vez de ficar cravado em
   px minúsculos — os valores foram calibrados para dar exatamente os tamanhos anteriores na
   medida de hoje (ecrã de ~177 px). */
.atm-lab-app .screen { container-type: inline-size; position: absolute; left: var(--lab-screen-x, 25.1%); top: var(--lab-screen-y, 38.1%); width: var(--lab-screen-w, 49.8%); height: var(--lab-screen-h, 21.5%); background: #f4f7f7; color: #173846; border: 2px solid #171e22; box-shadow: inset 0 0 12px #06374920; display: flex; flex-direction: column; overflow: hidden; font-size: 8px; }
.atm-lab-app .screen-top { height: max(19px, 10.7cqw); flex-shrink: 0; padding: 2px 7px; background: #125a91; color: #fff; font-size: max(12px, 6.8cqw); font-style: italic; font-weight: 700; }
.atm-lab-app .screen-top span { float: right; font-size: max(5px, 2.8cqw); font-style: normal; letter-spacing: 1px; margin-top: .45em; }
/* A medida base vive AQUI e não no `.screen`: dentro do próprio contentor as unidades cqw
   resolvem-se contra o contentor de fora (dava 72 px numa janela de 1600). */
.atm-lab-app .screen-content { padding: 5px 7px; flex: 1; overflow: auto; scrollbar-width: thin; font-size: max(8px, 4.5cqw); }
.atm-lab-app .screen h2 { font-size: max(9px, 5.1cqw); line-height: 1.25; font-weight: 700; margin: 0 0 6px; }
.atm-lab-app .screen p { font-size: max(8px, 4.5cqw); line-height: 1.4; margin: 4px 0; }
.atm-lab-app .screen button { border: 0; background: #e1e9eb; color: #214553; font-size: max(7px, 4cqw); padding: 4px; border-radius: 2px; }
.atm-lab-app .screen button:hover { background: #d2dfe2; }
.atm-lab-app .screen .welcome { text-align: center; padding: 2px; }
.atm-lab-app .welcome > svg { height: max(17px, 9.6cqw); margin: 0 auto 3px; color: #1767a6; display: block; }
.atm-lab-app .welcome h2 { font-size: max(14px, 7.9cqw); margin-bottom: 2px; }
.atm-lab-app .welcome button { margin-top: 3px; display: inline-flex; gap: 5px; align-items: center; }
.atm-lab-app .options { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.atm-lab-app .options button { display: flex; align-items: center; justify-content: space-between; min-height: max(16px, 9cqw); text-align: left; font-size: max(7px, 4cqw); line-height: 1.1; }
.atm-lab-app .screen-back { flex-shrink: 0; display: flex; align-items: center; gap: 4px; text-align: left; background: #e8edef; font-size: max(6px, 3.4cqw); border-radius: 0; padding: 2px 7px; border: 0; color: #214553; }
.atm-lab-app .pin-view { text-align: center; }
.atm-lab-app .pin-dots { display: flex; gap: 8px; justify-content: center; margin: 12px 0; }
.atm-lab-app .pin-dots span { width: 7px; height: 7px; border: 1px solid #83959d; border-radius: 50%; }
.atm-lab-app .pin-dots .filled { background: #173846; }
.atm-lab-app .screen label { display: block; font-size: max(6px, 3.4cqw); margin: 3px 0; }
.atm-lab-app .screen input { display: block; width: 100%; background: #fff; border: 1px solid #aebfc5; border-radius: 1px; font-size: max(8px, 4.5cqw); padding: 3px; color: #173846; }
.atm-lab-app .screen form > button { width: 100%; margin-top: 2px; }
.atm-lab-app .screen .confirmation small { display: block; font-size: max(6px, 3.4cqw); line-height: 1.5; overflow-wrap: anywhere; }
.atm-lab-app .confirmation strong { display: block; font-size: max(13px, 7.3cqw); margin: 5px 0; }
.atm-lab-app .confirmation button { margin-top: 4px; display: block; width: 100%; background: #d3e6da; }
.atm-lab-app .screen .text-btn { background: transparent; font-size: max(6px, 3.4cqw); }
.atm-lab-app .success { text-align: center; }
.atm-lab-app .success > svg { width: max(23px, 13cqw); height: max(23px, 13cqw); color: #377d58; margin: 0 auto 5px; display: block; }
.atm-lab-app .success button { display: block; width: 100%; margin-top: 4px; }
.atm-lab-app .error { color: #a12320; background: #ffe7e2; font-size: max(6px, 3.4cqw); padding: 3px; margin-top: 3px; }
.atm-lab-app .info p { white-space: pre-line; }
.atm-lab-app .history > button { width: 100%; display: flex; justify-content: space-between; gap: 5px; text-align: left; margin-bottom: 3px; font-size: max(6px, 3.4cqw); }
.atm-lab-app .history small { display: block; color: #74838b; font-size: max(5px, 2.8cqw); margin-top: 2px; }
.atm-lab-app .history b { white-space: nowrap; font-size: max(6px, 3.4cqw); }

/* Cada tecla é colocada EXATAMENTE sobre a tecla da fotografia (posições do backoffice).
   O contentor não tem caixa própria (display: contents) para os botões se posicionarem
   em relação à frente da máquina. */
.atm-lab-app .physical { display: contents; }
.atm-lab-app .p-left button { left: var(--lab-keys-left, 18.2%); }
.atm-lab-app .p-right button { left: var(--lab-keys-right, 78.3%); }
.atm-lab-app .physical button:nth-child(1) { top: var(--lab-keys-top, 47.6%); }
.atm-lab-app .physical button:nth-child(2) { top: calc(var(--lab-keys-top, 47.6%) + var(--lab-keys-step, 3.6%)); }
.atm-lab-app .physical button:nth-child(3) { top: calc(var(--lab-keys-top, 47.6%) + 2 * var(--lab-keys-step, 3.6%)); }
.atm-lab-app .physical button:nth-child(4) { top: calc(var(--lab-keys-top, 47.6%) + 3 * var(--lab-keys-step, 3.6%)); }
/* As teclas verdadeiras são as da FOTOGRAFIA: aqui ficam só as áreas clicáveis por cima
   delas (desenhá-las outra vez dava duas filas de teclas na mesma máquina). */
.atm-lab-app .physical button { position: absolute; width: 5.5%; height: 2.4%; min-height: 10px; transform: translate(-50%, -50%); border: 0; background: transparent; padding: 0; border-radius: 2px; }
.atm-lab-app .physical button:not(:disabled) { cursor: pointer; }
/* nunca esbatidas: são áreas transparentes sobre a fotografia, não botões desenhados */
.atm-lab-app .physical button:disabled { opacity: 1; background: transparent; box-shadow: none; }
/* só ao passar o rato (ou com o foco do teclado) é que a tecla se assinala */
.atm-lab-app .physical button:not(:disabled):hover,
.atm-lab-app .physical button:not(:disabled):focus-visible { background: rgba(105, 199, 223, .45); box-shadow: 0 0 0 2px rgba(105, 199, 223, .5); }

.atm-lab-app .reader { position: absolute; left: var(--lab-reader-x, 64.5%); top: var(--lab-reader-y, 65%); width: 16%; height: 5%; border: 0; background: transparent; transform: translate(-50%, -50%); }
.atm-lab-app .reader i { position: absolute; width: 40%; height: 3px; left: 12%; top: 32%; background: #61ee99; box-shadow: 0 0 6px #50fdb8; animation: lab-pulse 2s infinite; }
.atm-lab-app .reader.occupied i { background: #e4a34b; animation: none; }

.atm-lab-app .keypad { position: absolute; left: var(--lab-keypad-x, 40%); top: var(--lab-keypad-y, 66.6%); width: var(--lab-keypad-w, 20%); height: var(--lab-keypad-h, 6.5%); display: grid; grid-template-columns: 1fr 1fr 1fr 1.25fr; grid-template-rows: repeat(4, 1fr); gap: 1px; transform: perspective(130px) rotateX(22deg); background: #252c32; padding: 2px; }
.atm-lab-app .keypad button { padding: 0; border: 0; border-radius: 1px; background: linear-gradient(#e6e7e6, #aeb2b4); font-size: 6px; font-weight: 700; line-height: 1; color: #17212a; }
.atm-lab-app .keypad .cancel { background: #c6493e; }
.atm-lab-app .keypad .clear { background: #deb961; }
.atm-lab-app .keypad .enter { background: #67a77f; grid-row: span 2; }
.atm-lab-app .keypad button:hover { filter: brightness(1.3); }

.atm-lab-app .cash { position: absolute; left: var(--lab-cash-x, 50%); top: var(--lab-cash-y, 85%); width: 34%; height: 7.5%; transform: translate(-50%, -50%) rotate(-3deg); border: 1px solid #aaa985; background: repeating-linear-gradient(0deg, #cad5aa 0 4px, #e2e7c9 5px 7px); box-shadow: 0 7px 8px #0005; animation: lab-dispense .6s ease-out; padding: 6px; color: #495c40; }
.atm-lab-app .cash span { display: block; font-size: 5px; letter-spacing: 2px; }
.atm-lab-app .cash b { display: block; font-size: 12px; margin: 3px; }
.atm-lab-app .cash small { font-size: 6px; }
.atm-lab-app .paper { position: absolute; left: var(--lab-paper-x, 20%); top: var(--lab-paper-y, 66.4%); width: 20%; transform: translate(-50%, 0); background: #fffff4; border: 1px solid #ddd; box-shadow: 1px 6px 8px #0004; padding: 5px; display: flex; align-items: center; gap: 5px; font-size: 6px; animation: lab-dispense .6s; }

.atm-lab-app .view-controls { display: flex; align-items: center; gap: 9px; position: relative; background: #fff; border: 1px solid #dce0e4; border-radius: 30px; padding: 5px 10px; box-shadow: 0 4px 8px #00000010; }
.atm-lab-app .view-controls button { border: 0; background: none; color: #5a6670; padding: 5px; display: grid; place-items: center; }
.atm-lab-app .view-controls span { display: flex; align-items: center; gap: 7px; font-size: 11px; }
.atm-lab-app .view-controls i { height: 17px; width: 1px; background: #ddd; }
.atm-lab-app .stage.zoomed .perspective { transform: scale(1.65); transform-origin: 50% 55%; margin-top: 230px; margin-bottom: 230px; }

/* ---------------------------------------------------------------- painel da sessão */
.atm-lab-app .session { border-left: 1px solid #dde1e5; padding: 40px 0 0 24px; margin: 35px 0 40px; }
.atm-lab-app .session-heading { display: flex; justify-content: space-between; align-items: center; font-size: 10px; letter-spacing: 1.8px; color: #7d888f; }
.atm-lab-app .session-heading button { background: none; border: 0; padding: 4px; color: #7e898f; }
.atm-lab-app .account { margin-top: 35px; }
.atm-lab-app .account > span { font-size: 12px; color: #8b949a; }
.atm-lab-app .account > strong { font-size: 27px; font-weight: 500; letter-spacing: -.7px; display: block; margin: 10px 0 18px; white-space: nowrap; }
.atm-lab-app .account strong small { font-size: 11px; letter-spacing: 0; margin-left: 8px; color: #8d969b; }
.atm-lab-app .account p { font-size: 11px; display: flex; justify-content: space-between; color: #959ca1; }
.atm-lab-app .session-state { display: flex; gap: 8px; align-items: center; border-top: 1px solid var(--lab-line); border-bottom: 1px solid var(--lab-line); padding: 18px 0; font-size: 11px; color: #748078; margin-top: 22px; }
.atm-lab-app .activity { padding-top: 25px; }
.atm-lab-app .activity h3 { font-size: 12px; font-weight: 500; }
.atm-lab-app .activity > p { font-size: 12px; color: #929ca3; line-height: 1.7; margin: 15px 0; }
.atm-lab-app .activity > div { display: flex; align-items: center; gap: 10px; font-size: 11px; margin: 18px 0; }
.atm-lab-app .activity svg { color: #5b9177; flex: 0 0 auto; }
.atm-lab-app .activity small { display: block; margin-top: 4px; color: #88939a; }
.atm-lab-app .receipt-link { background: none; border: 0; padding: 12px 0; font-size: 11px; display: flex; gap: 6px; color: #1767a6; }
.atm-lab-app .keyboard-help { margin-top: 70px; color: #8b949c; font-size: 10px; }
.atm-lab-app .keyboard-help > span { font-size: 8px; letter-spacing: 1px; }
.atm-lab-app .keyboard-help p { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.atm-lab-app kbd { border: 1px solid #cfd5da; border-radius: 3px; min-width: 28px; padding: 3px; text-align: center; font-size: 9px; }

.atm-lab-app .lab-footer { height: 42px; display: flex; align-items: center; justify-content: space-between; padding: 0 4%; border-top: 1px solid var(--lab-line); font-size: 9px; letter-spacing: 1px; color: #949da4; }
.atm-lab-app .lab-footer a { letter-spacing: 0; }
.atm-lab-app .lab-footer i { display: inline-block; width: 3px; height: 3px; background: #aaa; margin: 2px 9px; }

.atm-lab-app .guide, .atm-lab-app .session { animation: lab-appear .6s ease-out; }
.atm-lab-app .perspective { animation: lab-appear .9s ease-out; }
@keyframes lab-appear { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
@keyframes lab-pulse { 50% { opacity: .35; } }
@keyframes lab-dispense { from { opacity: 0; translate: 0 -15px; } to { opacity: 1; translate: 0 0; } }

/* Máquina maior nos ecrãs largos: o texto do ecrã acompanha sozinho (está em cqw), por isso
   não é preciso repetir aqui tamanho a tamanho como antes. */
@media (min-width: 1280px) {
  .atm-lab-app .perspective { width: 400px; height: 692px; }
  .atm-lab-app .stage { min-height: 780px; }
}
@media (min-width: 1500px) {
  .atm-lab-app .perspective { width: 440px; height: 761px; }
  .atm-lab-app .stage { min-height: 840px; }
}
@media (max-width: 1100px) {
  .atm-lab-app .workspace { grid-template-columns: 230px minmax(360px, 1fr); gap: 0; }
  /* O painel da sessão (saldo, atividade) passa para baixo, a toda a largura, em vez de
     desaparecer: sem ele perdia-se o saldo e o resultado das operações. */
  .atm-lab-app .session { grid-column: 1 / -1; border-left: 0; border-top: 1px solid #dde1e5; margin: 10px 0 30px; padding: 24px 0 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 32px; align-items: start; }
  .atm-lab-app .session-heading { grid-column: 1 / -1; }
  .atm-lab-app .account { margin-top: 16px; }
  .atm-lab-app .keyboard-help { margin-top: 25px; }
  .atm-lab-app .guide h1 { font-size: 32px; }
  .atm-lab-app .demo-card { width: 215px; }
  .atm-lab-app .topbar { padding: 0 25px; }
  .atm-lab-app .stage { min-height: 725px; }
}
@media (max-width: 650px) {
  .atm-lab-app .topbar { height: 66px; gap: 20px; padding: 0 18px; }
  .atm-lab-app .brand { font-size: 20px; white-space: nowrap; }
  .atm-lab-app .brand small { margin-left: 8px; padding-left: 8px; letter-spacing: 1px; }
  /* sem espaço ao lado da marca (ficava em quatro linhas apertadas); o título da página explica */
  .atm-lab-app .top-title { display: none; }
  .atm-lab-app .sandbox { display: none; }
  .atm-lab-app .workspace { display: flex; flex-direction: column; padding: 0 10px; }
  .atm-lab-app .guide { padding: 24px 16px 0; }
  .atm-lab-app .guide h1 { font-size: 26px; margin: 10px 0; }
  /* o <br> do título fica: escondido, «ATM.» e «Em simulação.» apareciam colados */
  /* Textos explicativos, passos e cartão de demonstração mantêm-se (compactos): sem eles o
     visitante no telemóvel via só a máquina, sem saber o PIN nem por onde começar. */
  .atm-lab-app .guide > p { max-width: none; font-size: 13px; line-height: 1.55; margin: 0 0 4px; }
  .atm-lab-app .steps { margin: 14px 0 6px; }
  .atm-lab-app .steps > div { margin: 10px 0; gap: 12px; }
  .atm-lab-app .steps span { font-size: 13px; }
  .atm-lab-app .steps small { font-size: 12px; margin-top: 3px; }
  .atm-lab-app .demo-card { width: 100%; max-width: 280px; height: auto; min-height: 120px; margin: 8px auto 0; display: block; transform: none; padding: 14px 16px; }
  .atm-lab-app .demo-card:hover { transform: none; }
  .atm-lab-app .card-caption { width: 100%; margin: 10px 0 0; }
  /* painel da sessão por baixo da máquina; sem atalhos de teclado físico no telemóvel */
  .atm-lab-app .session { display: block; margin: 0 16px 24px; padding: 20px 0 0; }
  .atm-lab-app .keyboard-help { display: none; }
  /* ecrã de boas-vindas pequeno: sem o ícone e com o título mais contido, para o botão caber */
  .atm-lab-app .welcome > svg { display: none; }
  .atm-lab-app .welcome h2 { font-size: max(11px, 6.4cqw); }
  .atm-lab-app .welcome p { margin: 2px 0; }
  .atm-lab-app .safe-note { margin: 4px 0 0; font-size: 10px; }
  .atm-lab-app .stage { min-height: 715px; }
  .atm-lab-app .perspective { width: 340px; height: 588px; margin-top: 28px; }
  .atm-lab-app .model-label { display: none; }
  .atm-lab-app .lab-footer { font-size: 7px; padding: 0 18px; gap: 20px; height: 50px; }
  .atm-lab-app .stage.zoomed .perspective { transform: scale(1); margin: 30px 0; }
  .atm-lab-app .stage.zoomed .screen { position: fixed; left: 2%; top: 36%; width: 96%; height: 35%; z-index: 5; font-size: 14px; }
  .atm-lab-app .stage.zoomed .screen h2 { font-size: 16px; }
  .atm-lab-app .stage.zoomed .screen p, .atm-lab-app .stage.zoomed .screen button,
  .atm-lab-app .stage.zoomed .screen label, .atm-lab-app .stage.zoomed .screen input { font-size: 14px; }
  .atm-lab-app .stage.zoomed .screen-content { padding: 10px; }
  .atm-lab-app .stage.zoomed .options { gap: 6px; }
  .atm-lab-app .stage.zoomed .options button { min-height: 32px; }
  .atm-lab-app .stage.zoomed .screen-top { height: 25px; }
  .atm-lab-app .view-controls { margin-top: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .atm-lab-app *, .atm-lab-app *::before, .atm-lab-app *::after { animation: none !important; transition: none !important; }
}

/* Entrada de dados no ecrã da máquina (montante, referência, telemóvel…). */
.atm-lab-app .lab-entry { margin: 6px 0; padding: 4px 6px; background: #e9eff1; border: 1px solid #b8c8cf; border-radius: 2px; font-size: max(11px, 6.2cqw); font-weight: 700; letter-spacing: .12em; text-align: center; color: #173846; }

/* As oito operações (4 x 2) têm de caber no ecrã da máquina sem rolar: o corpo passa a coluna
   flexível, a grelha ocupa o que sobra e as linhas repartem-se por igual. Rótulos com duas
   linhas são recortados em vez de empurrarem o resto para fora. */
.atm-lab-app .screen-content { display: flex; flex-direction: column; overflow: hidden; }
.atm-lab-app .screen-content > h2 { margin-bottom: 3px; }
/* Os botões têm a altura do seu conteúdo. Só quando o ecrã fica cheio (sete ou mais
   operações) é que as linhas se repartem pelo espaço todo — de outro modo, quatro opções
   ficavam com botões enormes. */
.atm-lab-app .options { flex: 0 0 auto; min-height: 0; grid-auto-rows: auto; align-content: start; }
.atm-lab-app .options[data-densa] { flex: 1 1 auto; grid-auto-rows: 1fr; align-content: stretch; }
.atm-lab-app .options button { min-height: 0; line-height: 1.05; overflow: hidden; }
/* até três linhas: com a linha apertada cabem na altura da própria linha da grelha, e
   rótulos longos («Apresentação eletrónica de faturas») deixam de ser cortados */
.atm-lab-app .options button > span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.atm-lab-app .options button { padding: 2px 3px; gap: 2px; }

/* Comprovativo mostrado no ecrã (em vez de descarregar um ficheiro). */
.atm-lab-app .lab-receipt { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(8, 20, 38, .55); padding: 1rem; }
.atm-lab-app .lab-receipt-paper { width: min(340px, 100%); background: #fffff6; border-radius: 4px; padding: 1.1rem 1.2rem 1rem; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); border-top: 6px dashed #e6e3d2; border-bottom: 6px dashed #e6e3d2; }
.atm-lab-app .lab-receipt-paper h3 { margin: 0 0 .6rem; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: #7d858a; }
.atm-lab-app .lab-receipt-paper pre { margin: 0; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .78rem; line-height: 1.6; white-space: pre-wrap; color: #1d2a33; }
.atm-lab-app .lab-receipt-actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1rem; }
.atm-lab-app .lab-receipt-actions button { border: 1px solid #cfd8e2; background: #fff; color: #1767a6; border-radius: 6px; padding: .45rem .9rem; font-size: .82rem; }
.atm-lab-app .lab-receipt-actions button.is-primary { background: #1767a6; border-color: #1767a6; color: #fff; }

/* Ecrã informativo (consultas): o texto e a lista de movimentos ocupam o espaço livre e rolam
   dentro da sua área; as ações («Imprimir», «Terminar») ficam sempre à vista, alinhadas com as
   teclas laterais. */
.atm-lab-app .screen-content > .info { flex: 1 1 auto; min-height: 0; overflow: auto; }
.atm-lab-app .info .history { margin-top: 3px; }
.atm-lab-app .info + .options { flex: 0 0 auto; margin-top: 3px; }

/* Tarja de PRÉ-VISUALIZAÇÃO (só aparece quando a página é aberta com uma senha de rascunho
   vinda do backoffice). Deliberadamente destacada: quem está a ver isto tem de perceber, sem
   ler nada, que aquela configuração ainda não está no ar. */
.atm-lab-draft {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .75rem;
  margin: 0 auto 1rem;
  max-width: 1240px;
  padding: .7rem 1rem;
  border: 1px solid #f0c36d;
  border-left: 5px solid #e0a020;
  border-radius: 10px;
  background: #fff8e6;
  color: #5a4212;
  font-size: .92rem;
  line-height: 1.4;
}
.atm-lab-draft strong { text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; }

/* Opções do ecrã alinhadas com as teclas laterais da fotografia: a grelha começa meia tecla acima
   da 1.ª tecla e cada linha tem a altura de um passo entre teclas (valores calculados na página a
   partir de Admin › Simulador ATM). Antes as linhas seguiam-se ao título e ficavam desfasadas. */
.atm-lab-app .screen .options[data-alinhada] {
  position: absolute; left: 7px; right: 7px; top: var(--lab-rows-top, 33%); bottom: 0;
  grid-template-rows: var(--lab-rows, 25% 25% 25% 25%); grid-auto-rows: 0;
  align-content: stretch; row-gap: 0; column-gap: 4px;
}
.atm-lab-app .screen .options[data-alinhada] button { margin: 1px 0; min-height: 0; }
/* 4.ª linha: a tecla fica quase no bordo do ecrã; o botão encosta ao fundo com a altura que o
   deixa centrado na tecla. */
.atm-lab-app .screen .options[data-alinhada] button:nth-child(n+7) { align-self: end; height: calc(var(--lab-row4-h, 100%) - 2px); }