/* Estoile — área logada (painel, plano e admin): menu lateral, barra do topo e conteúdo.
   Usa as cores e fontes de site.css. */

.app { display: grid; grid-template-columns: 252px 1fr; min-height: 100vh; background: var(--paper); }

/* ---------- Menu lateral ---------- */
.sb { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 4px; padding: 20px 14px; background: var(--sf2, #f6f6f2); border-right: 1px solid var(--borda, #DFDBCB); }
.sb-topo { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 18px 10px; }
.sb-brand { display: flex; align-items: center; gap: 9px; font: 600 21px var(--sans); letter-spacing: -.02em; text-decoration: none; color: var(--green); }
.sb-recolher { border: 0; background: none; color: var(--ink-3); width: 32px; height: 32px; border-radius: 9px; cursor: pointer; display: grid; place-items: center; }
.sb-recolher:hover { background: var(--tint); color: var(--ink); }
.sb-recolher svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.sb-brand img { width: 26px; height: 26px; }
.sb-nav { display: grid; gap: 2px; }
.sb-nav a { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 11px; font: 500 14.5px var(--sans); color: var(--ink-2); text-decoration: none; transition: background .15s, color .15s; }
.sb-nav a:hover { background: var(--tint); color: var(--ink); }
.sb-nav a[aria-current="page"] { background: var(--sf, #FBFAF5); color: var(--green); box-shadow: 0 1px 3px rgba(18,38,92,.10), 0 0 0 1px var(--borda, #DFDBCB); }
.sb-nav svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sb-sec { font: 600 11.5px var(--sans); text-transform: uppercase; letter-spacing: .09em; color: var(--ink-4); padding: 18px 11px 6px; }
.sb-sec .tag { margin-left: 6px; font-size: 10px; padding: 2px 7px; border-radius: 999px; background: var(--green); color: var(--sobre-verde-lima, var(--lime)); letter-spacing: .04em; }
.sb-fim { margin-top: auto; position: relative; }
.sb-user { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: 14px; background: var(--sf, #FBFAF5); box-shadow: 0 0 0 1px var(--borda, #DFDBCB); cursor: pointer; text-align: left; font: inherit; color: inherit; }
.sb-user:hover, .sb-user[aria-expanded="true"] { box-shadow: 0 0 0 1px var(--olive); }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--green) center / cover no-repeat; color: var(--sobre-verde-lima, var(--lime)); font: 600 14px var(--sans); text-transform: uppercase; overflow: hidden; }
.avatar.com-foto { color: transparent; }
.sb-user .info { min-width: 0; flex: 1; display: grid; }
.sb-user .mail { font: 500 14px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user .plano { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user .seta svg { width: 16px; height: 16px; stroke: var(--ink-3); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.sb-user[aria-expanded="false"] .seta svg { transform: rotate(180deg); }
.sb-menu { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); padding: 6px; border-radius: 14px; background: var(--sf, #FBFAF5); box-shadow: 0 0 0 1px var(--borda, #DFDBCB), 0 14px 40px rgba(18,38,92,.14); display: grid; gap: 2px; z-index: 5; }
.sb-menu a, .sb-menu button { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: 10px; background: none; font: 500 14px var(--sans); color: var(--ink-2); text-decoration: none; cursor: pointer; text-align: left; }
.sb-menu a:hover, .sb-menu button:hover { background: var(--tint); color: var(--ink); }
.sb-menu .sair { color: #b3261e; }
.sb-menu .sair:hover { background: #fbeceb; color: #b3261e; }
.sb-menu svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Menu recolhido (só ícones), guardado no navegador. */
@media (min-width: 901px) {
  .menu-recolhido .app { grid-template-columns: 76px 1fr; }
  .menu-recolhido .sb { padding: 20px 12px; }
  .menu-recolhido .sb-topo { flex-direction: column; gap: 10px; padding: 4px 0 14px; }
  .menu-recolhido .sb-brand span, .menu-recolhido .sb-nav a span, .menu-recolhido .sb-sec, .menu-recolhido .sb-user .info, .menu-recolhido .sb-user .seta { display: none; }
  .menu-recolhido .sb-recolher svg { transform: rotate(180deg); }
  .menu-recolhido .sb-nav a { justify-content: center; padding: 10px 0; }
  .menu-recolhido .sb-user { justify-content: center; padding: 8px 0; box-shadow: none; background: none; }
  .menu-recolhido .sb-menu { right: auto; width: 210px; }
  .menu-recolhido .carregando { left: 76px; }
}

/* ---------- Topo e conteúdo ---------- */
.app-body { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; padding: 18px 36px; background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid transparent; }
.topbar.rolou { border-bottom-color: var(--borda); }
.topbar h1 { font: 400 30px/1.1 var(--serif); letter-spacing: -.02em; margin: 0; flex: 1; }
.topbar .sub { font: 400 14px var(--sans); color: var(--ink-3); margin-top: 3px; }
.burger { display: none; border: 0; background: var(--tint); width: 38px; height: 38px; border-radius: 10px; cursor: pointer; place-items: center; }
.burger svg { width: 20px; height: 20px; stroke: var(--ink); fill: none; stroke-width: 2; stroke-linecap: round; }
.app-main { padding: 10px 36px 70px; max-width: 1240px; width: 100%; opacity: 0; transition: opacity .25s; }
body.pronto .app-main { opacity: 1; }
.carregando { position: fixed; inset: 0 0 auto 252px; height: 2px; background: linear-gradient(90deg, transparent, var(--olive), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: carregar 1s linear infinite; }
body.pronto .carregando { display: none; }
@keyframes carregar { from { background-position: -40% 0; } to { background-position: 140% 0; } }
.hidden { display: none !important; }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sb-recolher { display: none; }
  .sb { position: fixed; z-index: 50; left: 0; top: 0; width: 272px; transform: translateX(-102%); transition: transform .25s cubic-bezier(.2,.8,.2,1); }
  .app.menu-aberto .sb { box-shadow: 0 0 60px rgba(0,0,0,.18); }
  .app.menu-aberto .sb { transform: none; }
  .app.menu-aberto::after { content: ""; position: fixed; inset: 0; z-index: 40; background: rgba(12,26,66,.35); }
  .burger { display: grid; }
  .topbar { padding: 14px 16px; }
  .topbar h1 { font-size: 24px; }
  .app-main { padding: 6px 16px 60px; }
  .carregando { left: 0; }
}

/* Botão de gravar no topo do menu */
.sb-nav a.sb-gravar { background: var(--green); color: var(--sobre-verde, #fff); margin-bottom: 8px; box-shadow: 0 8px 20px -12px rgba(18,38,92,.8); }
.sb-nav a.sb-gravar:hover { background: var(--green-deep); color: #fff; }
.sb-nav a.sb-gravar[aria-current="page"] { background: var(--green-deep); color: var(--lime); box-shadow: none; }
.rec-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #D93A2B; box-shadow: 0 0 0 4px rgba(217,58,43,.22); flex: none; }
.menu-recolhido .sb-nav a.sb-gravar { padding: 12px 0; }

/* Botão de busca no menu e contador */
.sb-busca { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 11px; margin-bottom: 8px; border: 1px solid var(--borda, #DFDBCB); border-radius: 11px; background: var(--sf, #FBFAF5); font: 500 14px var(--sans); color: var(--ink-3); cursor: pointer; text-align: left; }
.sb-busca:hover { border-color: var(--olive); color: var(--ink); }
.sb-busca svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; }
.sb-busca span { flex: 1; }
.sb-busca kbd, .busca kbd { font: 500 11px var(--mono, ui-monospace, monospace); padding: 2px 6px; border-radius: 6px; background: var(--bg-soft); color: var(--ink-3); border: 1px solid var(--borda, #e4e4de); }
.sb-sec:not([data-admin]) { padding-top: 14px; }
.menu-recolhido .sb-busca { justify-content: center; padding: 9px 0; }
.menu-recolhido .sb-busca span, .menu-recolhido .sb-busca kbd { display: none; }

/* Busca rápida (⌘K) */
.busca { position: fixed; inset: 0; z-index: 100; background: rgba(12,26,66,.32); backdrop-filter: blur(3px); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; }
.busca-in { width: min(620px, 100%); background: var(--sf, #FBFAF5); border-radius: 18px; box-shadow: 0 30px 80px -20px rgba(12,26,66,.55), 0 0 0 1px rgba(18,38,92,.08); overflow: hidden; }
.busca input { width: 100%; border: 0; border-bottom: 1px solid var(--borda, #efefea); padding: 18px 20px; font: 400 17px var(--sans); color: var(--ink); outline: none; }
.busca-lista { max-height: 52vh; overflow: auto; padding: 6px; }
.busca-sec { font: 600 11.5px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); padding: 10px 12px 6px; }
.busca-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--ink); font-size: 15px; }
.busca-item small { color: var(--ink-3); font-size: 13px; white-space: nowrap; }
.busca-item.ativo { background: var(--lime-soft); color: var(--green-deep); }
.busca-item.ativo small { color: inherit; opacity: .7; }
.busca-vazio { padding: 18px 14px; color: var(--ink-3); font-size: 14.5px; }
.busca-rodape { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--borda, #efefea); font-size: 12.5px; color: var(--ink-3); background: var(--sf2, #fafaf7); }
.busca-rodape kbd { margin-right: 3px; }
.sb-nav a .sb-cont { margin-left: auto; font: 600 12px var(--sans); font-style: normal; color: var(--ink-3); }
.sb-nav a .sb-cont:empty { display: none; }
.menu-recolhido .sb-nav a .sb-cont { display: none; }

/* Barra de navegação do celular (estilo app nativo) */
.tab-bar { display: none; }
@media (max-width: 900px) {
  .tab-bar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: rgba(251,252,248,.92); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-top: 1px solid var(--borda, #DFDBCB); }
  .tab-bar a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0 4px; min-height: 48px; text-decoration: none; color: var(--ink-3); font: 500 11px var(--sans); border-radius: 12px; -webkit-tap-highlight-color: transparent; }
  .tab-bar a svg { width: 23px; height: 23px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .tab-bar a[aria-current="page"] { color: var(--green); }
  .tab-bar a[aria-current="page"] svg { stroke-width: 2.2; }
  .tab-bar a.tab-gravar { justify-content: center; }
  .tab-bar a.tab-gravar .rec-dot { width: 46px; height: 46px; margin-top: -20px; background: var(--green); box-shadow: 0 10px 22px -10px rgba(18,38,92,.9), 0 0 0 4px var(--paper, #F3F1E6); position: relative; }
  .tab-bar a.tab-gravar .rec-dot::after { content: ""; position: absolute; inset: 15px; border-radius: 50%; background: #D93A2B; }
  .tab-bar a.tab-gravar[aria-current="page"] .rec-dot { background: var(--green-deep); }
  .app-main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .topbar { padding-top: calc(14px + env(safe-area-inset-top)); }
  /* Toques confortáveis: campos com 16px não dão zoom no iPhone. */
  input, select, textarea { font-size: 16px; }
  .busca { padding-top: calc(10px + env(safe-area-inset-top)); }
}
@media (display-mode: standalone) { body { overscroll-behavior-y: none; } }
@media (max-width: 900px) { .app-body { min-width: 0; overflow-x: clip; } }

/* Avisos rápidos */
.avisos { position: fixed; z-index: 120; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.aviso { pointer-events: auto; display: flex; align-items: center; gap: 14px; max-width: min(420px, calc(100vw - 32px)); padding: 11px 12px 11px 16px; border-radius: 14px; background: var(--green-deep, #163C94); color: #fff; font: 500 14.5px/1.35 var(--sans); box-shadow: 0 16px 40px -16px rgba(12,26,66,.7); animation: aviso-entra .22s cubic-bezier(.2,.8,.2,1); }
.aviso.erro { background: #8f1f17; }
.aviso button { border: 0; background: none; color: var(--lime, #F3F1E6); font: 600 14px var(--sans); padding: 4px 6px; border-radius: 8px; cursor: pointer; }
.aviso button:hover { background: rgba(255,255,255,.08); }
.aviso.saindo { opacity: 0; transform: translateY(6px); transition: .2s; }
@keyframes aviso-entra { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@media (max-width: 900px) { .avisos { left: 16px; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); align-items: stretch; } .aviso { max-width: none; } }
.msg:empty { display: none; }

/* Esqueletos de carregamento */
.esq { display: grid; gap: 10px; }
.esq i { display: block; height: 64px; border-radius: 14px; background: linear-gradient(90deg, var(--borda, #efefea) 0%, #f7f7f4 40%, var(--borda, #efefea) 80%) 0 0 / 300% 100%; animation: esq 1.3s ease-in-out infinite; }
.esq i:nth-child(2) { opacity: .8; } .esq i:nth-child(3) { opacity: .6; } .esq i:nth-child(4) { opacity: .4; }
.esq.cartoes { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); grid-column: 1 / -1; }
.esq.cartoes i { height: 190px; border-radius: 18px; }
@keyframes esq { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .esq i, .aviso { animation: none; } }

/* Telas vazias com ação */
.vazio-acao { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 56px 24px; border-radius: 20px; background: var(--bg-soft, #f6f6f2); }
.vazio-acao .vz-icone { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--sf, #FBFAF5); box-shadow: 0 0 0 1px var(--borda, #DFDBCB); margin-bottom: 16px; }
.vazio-acao .vz-icone svg { width: 26px; height: 26px; stroke: var(--green); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vazio-acao h3 { font: 400 24px/1.2 var(--serif); color: var(--ink); margin: 0 0 6px; }
.vazio-acao p { margin: 0 0 18px; color: var(--ink-3); max-width: 380px; font-size: 15px; }
.vazio-acao .vz-sec { margin-top: 12px; font-size: 13.5px; color: var(--ink-3); }

/* Convite para instalar o app */
.convite { position: fixed; z-index: 60; left: 12px; right: 12px; bottom: calc(80px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 18px; background: var(--sf, #FBFAF5); box-shadow: 0 18px 50px -18px rgba(12,26,66,.55), 0 0 0 1px var(--borda, #DFDBCB); animation: aviso-entra .3s cubic-bezier(.2,.8,.2,1); }
.convite img { width: 44px; height: 44px; border-radius: 11px; flex: none; }
.convite div { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; color: var(--ink-3); line-height: 1.3; }
.convite b { color: var(--ink); font-size: 15px; font-weight: 600; }
.convite .c-sim { border: 0; background: var(--green); color: var(--sobre-verde, #fff); font: 600 14px var(--sans); padding: 9px 14px; border-radius: 999px; cursor: pointer; }
.convite .c-nao { border: 0; background: none; color: var(--ink-4); font-size: 16px; padding: 6px; cursor: pointer; }

/* ---------- Tokens do sistema (uma escala só para todas as telas) ---------- */
:root {
  --sf: #FBFAF5; --sf2: #ECE9DB; --borda: #DFDBCB;
  --r-sm: 10px; --r-md: 14px; --r-lg: 20px;
  --sombra-1: 0 1px 2px rgba(18,38,92,.06), 0 0 0 1px var(--borda);
  --sombra-2: 0 18px 50px -18px rgba(12,26,66,.45), 0 0 0 1px var(--borda);
  color-scheme: light;
}

body { background: var(--paper); }
.sb { background: var(--sf2); border-right-color: var(--borda); }
.tab-bar { background: color-mix(in srgb, var(--paper) 90%, transparent); }
.esq i { background-image: linear-gradient(90deg, var(--sf2) 0%, var(--sf) 40%, var(--sf2) 80%); }


/* Atalhos de teclado */
.atalhos dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; margin: 4px 0 0; font-size: 15px; }
.atalhos dt { text-align: right; } .atalhos dd { margin: 0; color: var(--ink-2); }
.cartao-sub { color: var(--ink-3); margin: 4px 0 16px; font-size: 14.5px; }

/* Início do painel */
.inicio { margin: 0 0 22px; }
.inicio h2 { font: 400 clamp(26px, 4vw, 34px)/1.15 var(--serif); letter-spacing: -.02em; margin: 0 0 14px; color: var(--ink); }
.inicio-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.6fr); gap: 10px; }
.inicio-cards:empty { display: none; }
.ic { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: var(--r-md); background: var(--sf); box-shadow: var(--sombra-1); text-decoration: none; color: var(--ink-3); font-size: 13.5px; transition: box-shadow .15s, transform .15s; min-width: 0; }
.ic:hover { box-shadow: 0 0 0 1px var(--olive); }
.ic b { font: 500 26px/1.1 var(--sans); color: var(--ink); letter-spacing: -.02em; }
.ic.alerta b { color: #e5533f; }
.ic.ultima b { font: 400 19px/1.25 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 700px) { .inicio-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ic.ultima { grid-column: 1 / -1; } .ic b { font-size: 22px; } }
dialog.atalhos { border: 0; border-radius: var(--r-lg); padding: 26px 28px; width: min(360px, calc(100vw - 32px)); background: var(--sf); color: var(--ink); box-shadow: var(--sombra-2); }
dialog.atalhos::backdrop { background: rgba(12,26,66,.35); }
dialog.atalhos h2 { font: 400 26px var(--serif); margin: 0 0 14px; }
dialog.atalhos kbd { font: 500 12px var(--mono); padding: 3px 8px; border-radius: 6px; background: var(--sf2); border: 1px solid var(--borda); }
dialog.atalhos .acts { margin-top: 20px; display: flex; justify-content: flex-end; }


/* Escolha de idioma */
.temas { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--sf2); box-shadow: inset 0 0 0 1px var(--borda); }
.temas button { border: 0; background: none; padding: 8px 16px; border-radius: 999px; font: 500 14px var(--sans); color: var(--ink-3); cursor: pointer; }
.temas button[aria-pressed="true"] { background: var(--sf); color: var(--ink); box-shadow: var(--sombra-1); }

/* ---------- Celular: a página não escorrega e o que é fixo fica fixo ---------- */
html, body { overflow-x: clip; -webkit-tap-highlight-color: transparent; }
a, button, label, summary, [role="button"], input, select, textarea { touch-action: manipulation; }
.app { min-height: 100dvh; }
.sb { height: 100dvh; overflow-y: auto; overscroll-behavior: contain; }
.app-main { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 900px) {
  /* Sem o "puxa e volta" que arrastava o topo e a barra de baixo junto com a página. */
  html, body { overscroll-behavior-y: none; }
  /* Com o menu lateral aberto, a página de trás não rola. */
  body:has(.app.menu-aberto) { overflow: hidden; }
  .busca-lista { max-height: 60dvh; overscroll-behavior: contain; }
  .tab-bar { transform: translateZ(0); }
}

/* Navegar sem parar a gravação: barra fixa no topo e as outras páginas numa camada (iframe) por baixo dela. */
.nav-gravando { position: fixed; z-index: 96; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: calc(8px + env(safe-area-inset-top)) 16px 8px; background: #163C94; color: #fff; font: 500 14px var(--sans); box-shadow: 0 6px 18px -10px rgba(10,24,64,.7); }
.nav-gravando .ng-status { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.nav-gravando .ng-ponto { width: 10px; height: 10px; border-radius: 50%; background: #FF5A4A; box-shadow: 0 0 0 0 rgba(255,90,74,.6); animation: ng-pulsa 1.6s infinite; }
.nav-gravando.pausado .ng-ponto { background: #F2B544; animation: none; }
.nav-gravando .ng-tempo { font-variant-numeric: tabular-nums; opacity: .85; }
.nav-gravando .ng-espaco { flex: 1; }
.nav-gravando .ng-btn { border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08); color: #fff; font: 600 14px var(--sans); padding: 8px 14px; min-height: 36px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.nav-gravando .ng-btn:hover { background: rgba(255,255,255,.16); }
.nav-gravando .ng-voltar { background: #F3F1E6; color: #163C94; border-color: transparent; }
@keyframes ng-pulsa { 70% { box-shadow: 0 0 0 8px rgba(255,90,74,0); } 100% { box-shadow: 0 0 0 0 rgba(255,90,74,0); } }
.nav-camada { position: fixed; z-index: 95; left: 0; right: 0; bottom: 0; top: calc(52px + env(safe-area-inset-top)); background: var(--paper, #F3F1E6); }
.nav-camada iframe { display: block; width: 100%; height: 100%; border: 0; }
html.navegando, html.navegando body { overflow: hidden; }
@media (max-width: 520px) {
  .nav-gravando { gap: 8px; padding-left: 12px; padding-right: 12px; }
  .nav-gravando .ng-btn { padding: 8px 11px; font-size: 13px; }
  .nav-gravando .ng-rotulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}