/* amplify.css — tema Amplify do AmpliClaw (v0, 17/10/2026).
   Fonte: Design System Amplify Universal (raw/amplify-design-system.md do vault; tokens iguais ao
   src/app/globals.css do Amplify Intelligence). Escuro sempre; charcoal e sálvia nas superfícies,
   bronze como assinatura; EB Garamond nos títulos, DM Sans no corpo; vidro (Liquid Glass) só no
   cabeçalho, na barra de escrever, no menu e nos cartões que flutuam; sem sombra fora do vidro.

   Carregado por ÚLTIMO em cada página (injetado por amplify/aplicar.mjs antes de </head>).
   Regra da camada: este arquivo só SOBRESCREVE; nunca editar os .css do DG Claw.
   v0 (17/10): Conversa, cabeçalho e menu comuns (casca) e Login.
   v1 (17/10): Mesa, Lembretes, Avisos, painel do agente, tutorial, criação de agente, modo
   foco e faixa de lembrete; fontes servidas pela própria VPS (§8 a §13). */

/* Fontes servidas pela própria VPS (/amplify/fontes), sem Google Fonts: @fontsource 5.3.0,
   subconjunto latino (cobre o português), licença SIL OFL 1.1 junto dos arquivos. */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/amplify/fontes/dm-sans-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/amplify/fontes/dm-sans-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/amplify/fontes/dm-sans-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('/amplify/fontes/eb-garamond-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('/amplify/fontes/eb-garamond-latin-600-normal.woff2') format('woff2')}

/* ── 1. Tokens ─────────────────────────────────────────────────────────────── */
:root{
  color-scheme:dark;
  --amp-base:#0a0d09;
  --amp-aside:#161a15;
  --amp-surface:#1a1f19;
  --amp-elevated:#1f2620;
  --amp-overlay:#252d24;
  --amp-sage-900:#1a2e20;
  --amp-sage-700:#2d4a36;
  --amp-sage-500:#45624e;
  --amp-sage-400:#5b8769;
  --amp-sage-300:#7aaa8a;
  --amp-sage-100:#c8e0cf;
  --amp-texto:#f0ebe1;
  --amp-texto-2:#d8d1c3;
  --amp-texto-3:#b8a88a;
  --amp-texto-fraco:#8a7d68;
  --amp-bronze-400:#c9a47a;
  --amp-bronze-500:#a67c52;
  --amp-linha:rgba(255,255,255,.08);
  --amp-linha-2:rgba(255,255,255,.13);
  --amp-perigo:#9c3b30;
  --amp-serif:'EB Garamond',Georgia,serif;
  --amp-sans:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  /* Vidro, nos valores do DS (§7.3; sidebar e barra inferior: rgba(10,14,10,.42) + blur 40 + saturate 180).
     v0 usava .78-.86 e ficava opaco (Owner, 17/10/2026). */
  --amp-vidro-fundo:rgba(10,14,10,.42);
  --amp-vidro-filtro:blur(40px) saturate(180%);
  --amp-vidro-brilho:linear-gradient(180deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,0) 65%);
  --amp-vidro-sombra:0 1px 0 rgba(255,255,255,.07) inset,0 8px 32px rgba(0,0,0,.35);
  /* cartões que flutuam sobre a conversa (modal/toast do DS: .62-.82 + blur 28 + saturate 160) */
  --amp-vidro-cartao:rgba(14,20,15,.62);
  --amp-vidro-cartao-filtro:blur(28px) saturate(160%) brightness(1.03);

  /* Variáveis que o próprio DG Claw usa (chat.css, login.css, menu-lado.css).
     --header fica SÓLIDO: o DG Claw o usa também em painéis sem desfoque (ex.: Compartilhados),
     onde vidro a 42% deixaria texto sobre a conversa ilegível. O vidro vai explícito no §3. */
  --header:var(--amp-aside);
  --bub-in:var(--amp-surface);
  --bub-out:var(--amp-sage-700);
  --txt:var(--amp-texto);
  --muted:var(--amp-texto-3);
  --time:var(--amp-texto-fraco);
  --line:var(--amp-linha);
  --ml-painel:var(--amp-aside);
  --ml-fundo2:var(--amp-elevated);
  --ml-linha:var(--amp-linha);
  --ml-texto:var(--amp-texto);
  --ml-fraco:var(--amp-texto-fraco);
  --ml-a1:var(--amp-bronze-400);
  --ml-a2:var(--amp-bronze-500);
  /* Cor por agente, minimalista (decisão do Owner, 17/10/2026). O DG Claw pinta --accent com a
     cor de cada agente direto no <html>. Aqui ela é guardada em --amp-agente (resolvida no <html>)
     e, logo abaixo, o <body> devolve --accent à sálvia do sistema: as dezenas de regras do DG Claw
     que usam --accent (botões, foco, abas) ficam no sistema, e a cor do agente aparece só onde o
     tema escolhe (§8): avatar do cabeçalho, anel da foto no menu e um fio no topo do cabeçalho. */
  --amp-agente:var(--accent);
  --amp-agente-suave:color-mix(in srgb,var(--accent) 62%,#111411);
}
body{--accent:var(--amp-sage-500)}

/* ── 2. Fundo e tipografia ─────────────────────────────────────────────────── */
html,body{
  background-color:var(--amp-base);
  background-image:
    radial-gradient(ellipse 72% 58% at 18% -6%,rgba(20,52,17,.72) 0%,transparent 62%),
    radial-gradient(ellipse 55% 48% at 88% 96%,rgba(92,64,22,.38) 0%,transparent 62%);
  background-repeat:no-repeat;
  background-attachment:fixed;
}
body{font-family:var(--amp-sans);color:var(--amp-texto)}
#chat{background:transparent}
.bub a,.lc a{color:var(--amp-bronze-400)}

/* ── 3. Cabeçalho (Conversa e casca comum): vidro ──────────────────────────── */
header#cabecalho,html.casca #cabecalho{
  background:var(--amp-vidro-brilho),var(--amp-vidro-fundo);
  -webkit-backdrop-filter:var(--amp-vidro-filtro);backdrop-filter:var(--amp-vidro-filtro);
  border-top:1px solid rgba(255,255,255,.10);
  border-bottom:1px solid rgba(255,255,255,.06);
  /* fio de 2px no topo, na cor do agente (suavizada), + a sombra do vidro */
  box-shadow:inset 0 2px 0 var(--amp-agente-suave),var(--amp-vidro-sombra);
  color:var(--amp-texto);
}
.who b,html.casca #cabecalho .who b{font-family:var(--amp-serif);font-weight:600;font-size:17.9px;letter-spacing:.01em}
.who span,html.casca #cabecalho .who span{color:var(--amp-sage-300)}
.av,html.casca #cabecalho .av{background:var(--amp-agente-suave);color:var(--amp-texto)}
.btn,html.casca #cabecalho .btn{
  background:rgba(240,235,225,.04);color:var(--amp-texto-2);border-color:var(--amp-linha-2);
}
.btn.on{background:var(--amp-sage-500);color:var(--amp-texto)}
.btn.ghost,html.casca #cabecalho .btn.ghost{background:transparent;border-color:transparent;color:var(--amp-texto-3)}

/* ── 4. Conversa ───────────────────────────────────────────────────────────── */
.dia span{background:rgba(240,235,225,.06);color:var(--amp-texto-3);border:1px solid var(--amp-linha)}
.bub{box-shadow:none;border:1px solid rgba(255,255,255,.06);color:var(--amp-texto)}
.row.me .bub{border-color:rgba(122,170,138,.18)}
.meta{color:var(--amp-texto-fraco)}

/* Barra de escrever: vidro */
.barra{
  background:var(--amp-vidro-brilho),var(--amp-vidro-fundo);
  -webkit-backdrop-filter:var(--amp-vidro-filtro);backdrop-filter:var(--amp-vidro-filtro);
  border-top:1px solid rgba(255,255,255,.12);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset;
}
#entrada{background:var(--amp-elevated);color:var(--amp-texto);border-color:var(--amp-linha-2)}
#entrada:focus{background:var(--amp-elevated);border-color:var(--amp-sage-400)}
#entrada::placeholder{color:var(--amp-texto-fraco)}
#btnEnviar,#btnMic{background:var(--amp-sage-500);color:var(--amp-texto)}
#btnMic.gravando{background:var(--amp-perigo)}
#btnAnexo{background:var(--amp-elevated);color:var(--amp-texto-2);border-color:var(--amp-linha-2)}

/* Cartões que flutuam na conversa (conectar a conta, permissão): vidro */
.lc,.pc{
  background:var(--amp-vidro-brilho),var(--amp-vidro-cartao);color:var(--amp-texto);
  -webkit-backdrop-filter:var(--amp-vidro-cartao-filtro);backdrop-filter:var(--amp-vidro-cartao-filtro);
  border:1px solid var(--amp-linha-2);border-top-color:rgba(255,255,255,.16);
  box-shadow:var(--amp-vidro-sombra);
}
.lc-texto{color:var(--amp-texto-3)}
.lc-btn{background:rgba(240,235,225,.05);color:var(--amp-texto-2);border-color:var(--amp-linha-2)}

/* ── 5. Menu lateral (casca comum): vidro, item ativo em bronze ────────────── */
/* O menu-lado.css e o casca.css definem as variáveis NO PRÓPRIO menu e cabeçalho (não na raiz);
   por isso elas são redefinidas aqui, no mesmo escopo, para vencer. */
aside#menu,html.casca #cabecalho{
  --ml-painel:var(--amp-aside);
  --ml-fundo2:var(--amp-elevated);
  --ml-linha:var(--amp-linha);
  --ml-texto:var(--amp-texto);
  --ml-fraco:var(--amp-texto-fraco);
  --ml-a1:var(--amp-agente);
  --ml-a2:var(--amp-agente-suave);
  --line:var(--amp-linha);
  --muted:var(--amp-texto-3);
  --txt:var(--amp-texto);
}
.ml-foto{background:var(--amp-agente-suave);color:var(--amp-texto);box-shadow:none}
.gm-tut,.pe .sair{background:rgba(240,235,225,.05);color:var(--amp-texto-2);border-color:var(--amp-linha-2)}
aside#menu{
  background:var(--amp-vidro-brilho),var(--amp-vidro-fundo);
  -webkit-backdrop-filter:var(--amp-vidro-filtro);backdrop-filter:var(--amp-vidro-filtro);
  border-right:1px solid rgba(255,255,255,.07);
  color:var(--amp-texto);
}
.ml-nome{font-family:var(--amp-serif);font-weight:600;letter-spacing:.01em}
.ml-tab{color:rgba(247,245,240,.62)}
.ml-tab:hover{color:rgba(247,245,240,.86);background:rgba(247,245,240,.04)}
.ml-tab.ativo{color:var(--amp-bronze-400);background:rgba(166,124,82,.08);box-shadow:inset 2px 0 0 var(--amp-bronze-400)}
#overlayMenu{background:rgba(5,8,5,.55)}

/* ── 6. Login e primeiro acesso ────────────────────────────────────────────── */
/* main.cartao: só o cartão de login e de primeiro acesso (a classe .cartao também é usada nas
   tarefas da Mesa e nos cartões do painel, que têm regra própria no §9 e no §12). */
main.cartao{
  background:var(--amp-vidro-brilho),var(--amp-vidro-cartao);color:var(--amp-texto);
  -webkit-backdrop-filter:var(--amp-vidro-cartao-filtro);backdrop-filter:var(--amp-vidro-cartao-filtro);
  border:1px solid var(--amp-linha-2);border-top-color:rgba(255,255,255,.16);
  border-radius:20px;box-shadow:var(--amp-vidro-sombra);
}
main.cartao h1,.marca b,.marca strong{font-family:var(--amp-serif);font-weight:600}
label{color:var(--amp-texto-3)}
/* Marca: o "A" oficial do kit Amplify Health (icone_avatar_sage, sem recolorir) no lugar da lagosta do DG Claw. */
.marca .emoji{font-size:0;line-height:0}
.marca .emoji::before{content:"";display:block;width:40px;height:40px;border-radius:10px;
  background:url("/amplify/marca-a.png") center/cover no-repeat}
main.cartao .sub{color:var(--amp-texto-3)}
input[type=text],input[type=password]{background:var(--amp-elevated);color:var(--amp-texto);border-color:var(--amp-linha-2)}
input[type=text]:focus,input[type=password]:focus{background:var(--amp-elevated);border-color:var(--amp-sage-400)}
main.cartao button{background:var(--amp-sage-500);color:var(--amp-texto)}

/* ══ v1 (17/10/2026): Mesa, Lembretes, Avisos, painel e componentes ═════════════════════
   Estados (esperando, travada, parada, fazendo, fechada) nas cores do DS: bronze, risco
   crítico, risco alto, sálvia e texto fraco. O texto de cada estado é a cor do DS clareada
   com o pergaminho (color-mix), para ter contraste no escuro sem sair da paleta. */

/* ── 8. Tokens das telas que já têm modo escuro (Mesa e painel) ─────────────── */
/* Mesmo seletor do DG Claw (html[data-tema="escuro"]), carregado depois: vence. */
html[data-tema="escuro"]{
  --txt:var(--amp-texto);--muted:var(--amp-texto-3);--line:var(--amp-linha);--header:var(--amp-aside);
  /* Mesa */
  --fundo:var(--amp-base);--cartao:var(--amp-surface);--suave:var(--amp-elevated);
  --c-esperando:var(--amp-bronze-400);--b-esperando:rgba(166,124,82,.16);
  --c-travada:color-mix(in srgb,#9c3b30 55%,#f0ebe1);--b-travada:#2a1212;
  --c-parada:color-mix(in srgb,#b86e2d 60%,#f0ebe1);--b-parada:#2a1a0a;
  --c-fazendo:var(--amp-sage-300);--b-fazendo:var(--amp-sage-900);
  --c-fechada:var(--amp-texto-fraco);--b-fechada:var(--amp-elevated);
  /* Painel do agente (panel/public/css/main.css): sai o roxo, entra o sistema; sem sombra (DS §1.5) */
  --bg:var(--amp-base);--painel:var(--amp-surface);--fundo2:var(--amp-elevated);--linha:var(--amp-linha);
  --texto:var(--amp-texto);--fraco:var(--amp-texto-3);--sombra:none;
  --acento1:var(--amp-sage-500);--acento2:var(--amp-sage-400);
  --ok:var(--amp-sage-300);--erro:color-mix(in srgb,#9c3b30 55%,#f0ebe1);
  --espera:color-mix(in srgb,#b86e2d 60%,#f0ebe1);--neutro:var(--amp-texto-fraco);
}
a{color:var(--amp-bronze-400)}

/* ── 9. Mesa ───────────────────────────────────────────────────────────────── */
/* Os cartões de tarefa usam var(--cartao) e var(--line); nada a mais por enquanto. */

/* ── 10. Lembretes (body.lp) e a faixa de lembrete na conversa (.lf) ───────── */
body.lp{--lp-txt:var(--amp-texto);--lp-fraco:var(--amp-texto-3);--lp-linha:var(--amp-linha-2);
  --lp-acento:var(--amp-sage-500);--lp-fundo:transparent}
.lp-sec{background:var(--amp-surface);border-color:var(--amp-linha)}
.lp-sec h2{font-family:var(--amp-serif);font-weight:600;font-size:18.9px}
.lp-btn{background:rgba(240,235,225,.05);color:var(--amp-texto-2);border-color:var(--amp-linha-2)}
.lp-btn.pri{background:var(--amp-sage-500);border-color:var(--amp-sage-500);color:var(--amp-texto)}
.lp-btn.perigo{background:transparent;color:color-mix(in srgb,#9c3b30 55%,#f0ebe1);border-color:rgba(156,59,48,.55)}
.lp-form input,.lp-form select,.lp-form textarea,.lp-filtros select{background:var(--amp-elevated);color:var(--amp-texto);border-color:var(--amp-linha-2)}
.lp-chip{background:var(--amp-sage-900);color:var(--amp-sage-300)}
.lp-chip.pausado,.lp-chip.adiada{background:#2a1a0a;color:color-mix(in srgb,#b86e2d 60%,#f0ebe1)}
.lp-chip.encerrado,.lp-chip.feito,.lp-chip.cancelada,.lp-chip.perdida{background:var(--amp-elevated);color:var(--amp-texto-fraco)}
.lp-chip.insistindo,.lp-chip.sem_resposta{background:#2a1212;color:color-mix(in srgb,#9c3b30 55%,#f0ebe1)}
.lp-hist td{background:var(--amp-elevated)}
.lp-tabela tr{border-color:var(--amp-linha)}
@media (max-width:700px){.lp-tabela tr{background:var(--amp-surface)}}
.lf{background:rgba(166,124,82,.12);border-bottom-color:rgba(201,164,122,.25);color:var(--amp-texto-2)}
.lf-item{border-top-color:rgba(201,164,122,.2)}
.lf button{background:rgba(240,235,225,.05);color:var(--amp-bronze-400);border-color:rgba(201,164,122,.35)}

/* ── 11. Quadro de avisos (.av-raiz) ───────────────────────────────────────── */
.av-raiz{--av-linha:var(--amp-linha-2);--av-texto:var(--amp-texto);--av-fraco:var(--amp-texto-3);
  --av-fundo2:var(--amp-elevated);--av-acento:var(--amp-sage-500)}
.av-sec,.av-aviso{background:var(--amp-surface)}
.av-sec h2{color:var(--amp-texto-3)}
.av-btn{background:rgba(240,235,225,.05);color:var(--amp-texto-2)}
.av-primario{background:var(--amp-sage-500);border-color:var(--amp-sage-500);color:var(--amp-texto)}
.av-primario:hover{background:var(--amp-sage-400)}
.av-perigo{background:#9c3b30;border-color:#9c3b30;color:var(--amp-texto)}
.av-raiz select,.av-raiz input[type=text],.av-raiz input[type=url],.av-raiz textarea{background:var(--amp-elevated);color:var(--amp-texto)}
.av-resposta{background:var(--amp-sage-900);color:var(--amp-sage-300)}
.av-erro,.av-erro-bloco,.av-e-falha{color:color-mix(in srgb,#9c3b30 55%,#f0ebe1)}
/* Cor por tipo de aviso: mantém a distinção do DG Claw, suavizada como a cor dos agentes */
.av-t-decisao{--av-cor:color-mix(in srgb,#2f6fd0 55%,#1a1f19)}
.av-t-preferencia{--av-cor:color-mix(in srgb,#8e44ad 55%,#1a1f19)}
.av-t-entrega{--av-cor:var(--amp-sage-500)}
.av-t-aprendizado{--av-cor:var(--amp-bronze-500)}
.av-t-referencia{--av-cor:color-mix(in srgb,#16a0a0 55%,#1a1f19)}
.av-t-pedido{--av-cor:color-mix(in srgb,#b86e2d 75%,#1a1f19)}
.av-t-resumo_do_dia{--av-cor:var(--amp-texto-fraco)}
.av-tipo{color:var(--amp-texto)}

/* ── 12. Painel do agente: cartões ─────────────────────────────────────────── */
/* O painel pinta quase tudo por variáveis (§8). Os cartões dele também usam a classe .cartao. */
.cartao:not(main){box-shadow:none}

/* ── 13. Componentes comuns ────────────────────────────────────────────────── */
/* Botões redondos de ajuda ("?") */
.lp-ajuda,.av-ajuda{background:rgba(240,235,225,.05);color:var(--amp-texto-2);border-color:var(--amp-linha-2)}
.av-ajuda:hover{background:var(--amp-elevated);color:var(--amp-texto)}
.lf-ajuda{background:rgba(240,235,225,.05);color:var(--amp-bronze-400);border-color:rgba(201,164,122,.35)}
/* Tutorial (visita guiada), nas três folhas que o definem */
#tourCaixa,html.casca #tourCaixa,body.lp #tourCaixa{
  background:var(--amp-vidro-brilho),var(--amp-vidro-cartao);color:var(--amp-texto);
  -webkit-backdrop-filter:var(--amp-vidro-cartao-filtro);backdrop-filter:var(--amp-vidro-cartao-filtro);
  border:1px solid var(--amp-linha-2);border-top-color:rgba(255,255,255,.16);box-shadow:var(--amp-vidro-sombra)}
#tourCaixa p b,body.lp #tourCaixa p b{color:var(--amp-bronze-400)}
#tourCaixa button,body.lp #tourCaixa button{background:rgba(240,235,225,.05);color:var(--amp-texto-2);border-color:var(--amp-linha-2)}
#tourCaixa button.pri,body.lp #tourCaixa button.pri{background:var(--amp-sage-500);border-color:var(--amp-sage-500);color:var(--amp-texto)}
body.lp #tourLuz{outline-color:var(--amp-bronze-400)}
/* Botões do menu nas telas da casca (o casca.css usa aside#menu .pe .sair) */
aside#menu .gm-tut,aside#menu .pe .sair{background:rgba(240,235,225,.05);color:var(--amp-texto-2);border-color:var(--amp-linha-2)}
/* Criação de agente (onboarding "nascimento") */
.nascimento,.nas-caixa{--nas-verde:var(--amp-sage-400);background:var(--amp-vidro-brilho),var(--amp-vidro-cartao);color:var(--amp-texto);
  border-color:var(--amp-linha-2);box-shadow:var(--amp-vidro-sombra)}
.nas-caixa{-webkit-backdrop-filter:var(--amp-vidro-cartao-filtro);backdrop-filter:var(--amp-vidro-cartao-filtro)}
.nas-caixa .nascimento{background:none;box-shadow:none}
.nascimento input:not([type=file]),.nascimento textarea,.nascimento select{background:var(--amp-elevated);color:var(--amp-texto);border-color:var(--amp-linha-2)}
.nascimento button{background:rgba(240,235,225,.05);color:var(--amp-texto-2);border-color:var(--amp-linha-2)}
/* Modo foco (faixa e painel) */
.foco,.foco-faixa .foco-corpo{background:var(--amp-surface);color:var(--amp-texto)}
.foco-barra{background:rgba(255,255,255,.08)}
.foco-tique:hover{background:rgba(240,235,225,.04)}
.foco-aviso{background:#2a1212;color:color-mix(in srgb,#9c3b30 55%,#f0ebe1)}

/* ── 7. Movimento reduzido ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* Botão de olho nos campos de senha (amplify/tema/senha.js). */
.amp-senha{position:relative;display:block}
.amp-senha>input{width:100%;box-sizing:border-box;padding-right:44px}
.amp-senha button.amp-senha-olho{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:36px;height:36px;
  margin:0;padding:0;min-height:0;display:flex;align-items:center;justify-content:center;background:transparent;
  border:0;border-radius:8px;color:var(--amp-texto-fraco);cursor:pointer;box-shadow:none}
.amp-senha button.amp-senha-olho:hover,.amp-senha button.amp-senha-olho[aria-pressed=true]{color:var(--amp-texto);background:transparent;filter:none}
.amp-senha button.amp-senha-olho:focus-visible{outline:2px solid var(--amp-sage-400);outline-offset:1px}

/* Menu lateral no iPhone: o menu-lado.css do DG Claw não reserva a barra de status nem a barra de
   início (só o botão de fechar reserva), e a foto subia para baixo do relógio. */
aside#menu{padding-top:calc(22px + env(safe-area-inset-top));padding-bottom:calc(10px + env(safe-area-inset-bottom))}

/* App instalado no iPhone: o iOS não deixa a página pintar uma faixa embaixo da barra de escrever
   e a pinta com a cor de fundo do <html>. Com o fundo do tema, a faixa ficava escura sob a barra
   clara, e o chat parecia subido. A barra fica sólida e o <html> leva a mesma cor, então a barra
   desce visualmente até a borda (mesma ideia do DG Claw de 20/10, html{background:var(--header)}). */
html.pwa{background:var(--amp-surface)}
html.pwa .barra{background:var(--amp-surface);-webkit-backdrop-filter:none;backdrop-filter:none}