/* Instrumentos do A320 desenhados pelo app: o PFD em SVG, a tela do MCDU e o MCDU de foto. Vale no app
   (antes do styles.css, que ajusta o resto) e na página de apresentação. */
@keyframes blink { 50% { opacity: 0.35; } }
.pfd-svg { display: block; width: 100%; height: auto; }
.pfd-fma { font-family: var(--avionic); font-size: 11px; text-anchor: middle; }
.pfd-fma.g { fill: #39e639; }
.pfd-fma.w { fill: #fff; }
.pfd-fma.c { fill: #3fd2ff; }
.pfd-fma.blink { animation: blink 0.8s infinite; }
.pfd-tape { font-family: var(--avionic); font-size: 13px; fill: #fff; }
.pfd-ladder { font-family: var(--avionic); font-size: 9px; fill: #fff; }
.pfd-readout { font-family: var(--avionic); font-size: 16px; font-weight: 700; fill: #39e639; }
.pfd-v1 { font-family: var(--avionic); font-size: 15px; font-weight: 700; fill: #3fd2ff; }
.pfd-ra { font-family: var(--avionic); font-size: 15px; font-weight: 700; fill: #39e639; }

.mcdu-screen { display: grid; grid-template-rows: repeat(14, var(--rowh)); padding: 7px 8px; font-size: var(--big); border: 3px solid #121518; border-radius: 6px; background: #000; font-family: "B612 Mono", ui-monospace, monospace; font-weight: 700; }
.mcdu-screen.off .mr span { color: transparent; }
.mr { display: grid; grid-template-columns: repeat(24, 0.64em); align-items: center; }
.mr span { font-size: var(--big); line-height: 1; text-align: center; color: #fff; }
.mr span.s { font-size: var(--small); }
.mr .w { color: #ffffff; } .mr .b { color: #3fd2ff; } .mr .g { color: #39e639; } .mr .a { color: #ff9d2e; }
.mr .y { color: #f2f20f; } .mr .m { color: #ff59ff; } .mr .d { color: #5d6670; }

/* PFD do Airbus: FMA em 3 linhas, centena da altitude grande e tambor das dezenas */
.pfd-svg.ab .pfd-fma { font-size: 10px; }
.pfd-alt { font-family: var(--avionic); font-size: 17px; font-weight: 700; fill: #39e639; }
.pfd-drum { font-family: var(--avionic); font-size: 11px; font-weight: 700; fill: #39e639; }
.pfd-vsl { font-family: var(--avionic); font-size: 9px; fill: #fff; }
.pfd-vsd { font-family: var(--avionic); font-size: 9px; font-weight: 700; fill: #39e639; }

/* PFD da tela inteira (por cima da tela da foto e no canto): letras do tamanho das do PFD da foto, Mach, QNH/STD,
   altitude do FCU e a proa */
.pfd-bg { fill: #05070a; }
.pfd-svg.scr .pfd-fma { font-size: 11.5px; }
.pfd-svg.scr .pfd-tape { font-size: 14px; }
.pfd-svg.scr .pfd-ladder { font-size: 10px; }
.pfd-svg.scr .pfd-alt { font-size: 19px; }
.pfd-svg.scr .pfd-drum { font-size: 12px; }
.pfd-svg.scr .pfd-vsl, .pfd-svg.scr .pfd-vsd { font-size: 10px; }
.pfd-ra.a, .pfd-alt.a, .pfd-drum.a { fill: #ff9d2e; }
.pfd-mach { font-family: var(--avionic); font-size: 15px; font-weight: 700; fill: #39e639; }
.pfd-baro { font-family: var(--avionic); font-size: 14px; font-weight: 700; fill: #fff; }
.pfd-baro .c, .pfd-sel { fill: #3fd2ff; }
.pfd-sel { font-family: var(--avionic); font-size: 14px; font-weight: 700; }
.pfd-hdg { font-family: var(--avionic); font-size: 14px; fill: #fff; text-anchor: middle; }
/* ISIS (tela inteira, 320×320) */
.isis-tape { font-family: var(--avionic); font-size: 21px; fill: #fff; }
.isis-ladder { font-family: var(--avionic); font-size: 19px; fill: #fff; }
.isis-alt { font-family: var(--avionic); font-size: 25px; font-weight: 700; fill: #4fb877; }
.isis-drum { font-family: var(--avionic); font-size: 15px; font-weight: 700; fill: #4fb877; }
.isis-m { font-family: var(--avionic); font-size: 20px; fill: #4fb877; }
.isis-mu { font-family: var(--avionic); font-size: 18px; fill: #58b0c4; }
.isis-baro { font-family: var(--avionic); font-size: 20px; fill: #58b0c4; }
/* E/WD (tela inteira, 320×320) */
.ewd-svg text { font-family: var(--avionic); }
.ewd-scale { font-size: 9px; fill: #fff; }
.ewd-n1 { font-size: 13px; fill: #39e639; }
.ewd-n1.a { fill: #ff9d2e; }
.ewd-egt { font-size: 11px; fill: #39e639; }
.ewd-num { font-size: 13px; fill: #39e639; }
.ewd-label { font-size: 11px; fill: #fff; }
.ewd-unit { font-size: 8.5px; fill: #3fd2ff; }
.ewd-lim { font-size: 13px; fill: #3fd2ff; }
.ewd-limv { font-size: 13px; fill: #39e639; }
.ewd-top { font-size: 12px; fill: #39e639; }
.ewd-sf { font-size: 10px; fill: #fff; }
.ewd-flap { font-size: 10px; fill: #39e639; }
.ewd-fob { font-size: 13px; fill: #fff; }
.ewd-fobv { font-size: 13px; fill: #39e639; }
.ewd-memo { font-size: 11.5px; white-space: pre; }
.ewd-memo .mg { fill: #39e639; }
.ewd-memo .mc { fill: #3fd2ff; }
.ewd-memo .ma { fill: #ff9d2e; }
.ewd-memo .mm { fill: #ff4fd8; }
.ewd-memo .mr { fill: #ff3b30; }
.ewd-memo .mu { text-decoration: underline; }
/* ND em ARC (tela inteira, 320×320) */
.nd-svg text { font-family: var(--avionic); }
.nd-ring { fill: none; stroke: #fff; stroke-width: 1.5; stroke-dasharray: 7 6; }
.nd-arc, .nd-tick { fill: none; stroke: #fff; stroke-width: 1.8; }
.nd-hdg { font-size: 11px; fill: #fff; }
.nd-hdg.big { font-size: 15px; }
.nd-range { font-size: 11px; fill: #3fd2ff; }
.nd-fpln { fill: none; stroke: #39e639; stroke-width: 2; }
.nd-miss { fill: none; stroke: #3fd2ff; stroke-width: 2; }
.nd-wpt { fill: none; stroke: #39e639; stroke-width: 1.5; }
.nd-wpt.to { stroke: #fff; }
.nd-wpt.miss { stroke: #3fd2ff; }
.nd-id { font-size: 10px; fill: #39e639; }
.nd-id.to { fill: #fff; }
.nd-id.miss { fill: #3fd2ff; }
.nd-rwy { stroke: #fff; stroke-width: 3; }
.nd-mark { stroke: #fff; stroke-width: 1.8; }
.nd-mark.c { stroke: #3fd2ff; }
.nd-lbl { font-size: 9px; fill: #fff; }
.nd-val { font-size: 13px; fill: #39e639; }
.nd-wind { font-size: 11.5px; fill: #39e639; }
.nd-ils { font-size: 12px; fill: #39e639; }
.nd-to { font-size: 11.5px; fill: #fff; }
.nd-val2 { font-size: 11.5px; fill: #39e639; }
.nd-unit { font-size: 9px; fill: #3fd2ff; }

/* MCDU em foto real (A320, captura do simulador): a tela é desenhada no vidro da foto e as teclas são
   pontos de toque em cima das teclas da foto (apertar escurece um instante, como a tecla afundando) */
.mcdu.mcdu-photo { user-select: none; -webkit-user-select: none; touch-action: manipulation; position: relative; width: 100%; max-width: 440px; aspect-ratio: 700 / 1052; padding: 0; border: 0; border-radius: 14px; background: #2a3038; overflow: hidden; container-type: inline-size; box-shadow: 0 24px 48px -24px #000; }
.mcdu-photo .mcdu-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.mcdu-photo .mcdu-screen { position: absolute; padding: 0; border: 0; border-radius: 0; background: transparent; grid-template-rows: repeat(14, 1fr); font-size: 3.7cqw; }
.mcdu-photo .mr { grid-template-columns: repeat(24, 1fr); }
.mcdu-photo .mr span { font-size: 3.7cqw; }
.mcdu-photo .mr span.s { font-size: 2.75cqw; }
.mcdu-photo button { position: absolute; z-index: 1; min-height: 0; padding: 0; border: 0; border-radius: 9px; background: transparent; box-shadow: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color 0.12s; }
.mcdu-photo button.round { border-radius: 50%; }
.mcdu-photo button:hover { background: rgba(255, 255, 255, 0.06); }
.mcdu-photo button:active, .mcdu-photo button.hit { background: rgba(0, 0, 0, 0.34); }
.mcdu-photo button:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) { .mcdu-photo button { transition: none; } }