/* Agenda WeManage — agenda de secretária, um dia por página. Primeiro o telemóvel. */

@font-face {
  font-family: "Caveat";
  src: url("fontes/caveat.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "Lora";
  src: url("fontes/lora.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --papel: #fcfaf4;
  --papel-fundo: #f3efe4;
  --regua: #ded8c9;
  --regua-forte: #c9c2ae;
  --tinta: #24231f;
  --tinta-fraca: #8b857a;
  --azul: #1b4a8f;
  --capa: #13325f;
  --ferrugem: #b4552d;
  --laranja: #eea13c;
  --altura-hora: 52px;
  --seguro-topo: env(safe-area-inset-top, 0px);
  --seguro-base: env(safe-area-inset-bottom, 0px);
  --mola: cubic-bezier(.22, .68, .32, 1);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { height: 100%; }

body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--capa);
  color: var(--tinta);
  font-family: "Segoe UI", Roboto, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  display: flex;
  flex-direction: column;
}

/* ---------------- barra de cima ---------------- */

.topo {
  flex: none;
  z-index: 30;
  padding: calc(var(--seguro-topo) + 8px) 12px 8px;
  background: linear-gradient(180deg, #13325f, #17396c);
  color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .22);
}

.topo-linha { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.periodo { min-width: 0; }

.periodo strong {
  display: block;
  font-family: "Lora", Georgia, serif;
  font-size: 19px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.periodo span {
  font-size: 11px;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .6);
  font-variant-numeric: tabular-nums;
}

.topo-dir { display: flex; align-items: center; gap: 7px; flex: none; }

.icone {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .08);
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .2s var(--mola), background .2s;
}

.icone svg { width: 19px; height: 19px; }
.icone:active { transform: scale(.9); background: rgba(255, 255, 255, .2); }

.pilula {
  border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font: inherit;
  font-size: 13px;
  border-radius: 999px;
  padding: 8px 13px;
  min-height: 38px;
  cursor: pointer;
  transition: background .2s, transform .2s var(--mola);
}

.pilula:active { transform: scale(.94); background: rgba(255, 255, 255, .2); }
.pilula[hidden] { display: none !important; }
#btn-instalar { border-color: var(--laranja); background: var(--laranja); color: #2b1a05; font-weight: 600; }

/* modos: dia, semana, mês */

.modos {
  position: relative;
  display: flex;
  margin-top: 9px;
  background: rgba(0, 0, 0, .22);
  border-radius: 999px;
  padding: 3px;
}

.modo {
  position: relative;
  z-index: 2;
  flex: 1;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, .72);
  font: inherit;
  font-size: 14px;
  padding: 9px 4px;
  min-height: 40px;
  border-radius: 999px;
  cursor: pointer;
  transition: color .24s;
}

.modo.ativo { color: var(--capa); font-weight: 600; }

.indicador {
  position: absolute;
  z-index: 1;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc((100% - 6px) / 3);
  background: var(--papel);
  border-radius: 999px;
  transition: transform .3s var(--mola);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}

/* ---------------- páginas ---------------- */

.palco {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: var(--papel-fundo);
  touch-action: pan-y;
}

.carril {
  display: flex;
  width: 300%;
  height: 100%;
  transform: translate3d(-33.3333%, 0, 0);
}

.carril.a-deslizar { transition: transform .32s var(--mola); }

.pagina {
  width: 33.3333%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--papel);
  border-right: 1px solid var(--regua-forte);
  padding-bottom: calc(118px + var(--seguro-base));
  position: relative;
}

/* cabeçalho do dia */

.cabeca {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 16px 16px 10px;
  border-bottom: 2px solid var(--azul);
  position: sticky;
  top: 0;
  background: linear-gradient(180deg, var(--papel) 82%, rgba(252, 250, 244, .9));
  z-index: 3;
}

.cabeca .numero {
  font-family: "Lora", Georgia, serif;
  font-size: 54px;
  font-weight: 700;
  line-height: .86;
  color: var(--azul);
  letter-spacing: -.02em;
}

.cabeca.fim-de-semana .numero { color: var(--ferrugem); }
.cabeca .nomes { padding-bottom: 4px; flex: 1; min-width: 0; }

.cabeca .nomes strong {
  display: block;
  font-family: "Lora", Georgia, serif;
  font-size: 19px;
  font-weight: 600;
}

.cabeca .nomes span {
  display: block;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  margin-top: 2px;
}

.selo-hoje {
  align-self: center;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6a3c12;
  background: var(--laranja);
  border-radius: 999px;
  padding: 4px 9px;
  animation: aparecer .4s var(--mola) both;
}

/* aviso de sobreposição */

.choque {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 10px 16px 0;
  padding: 10px 12px;
  background: #fdf0e6;
  border: 1px solid #e8c4a5;
  border-left: 4px solid var(--ferrugem);
  border-radius: 10px;
  font-size: 13px;
  color: #7c3d18;
  animation: aparecer .35s var(--mola) both;
}

.choque b { font-weight: 700; }

/* horas */

.horas { padding: 4px 0 0; }

.hora-linha {
  display: flex;
  align-items: stretch;
  gap: 10px;
  min-height: var(--altura-hora);
  padding: 0 16px 0 0;
  border-bottom: 1px solid var(--regua);
  position: relative;
  cursor: pointer;
  transition: background .2s;
}

.hora-linha::after {
  content: "";
  position: absolute;
  left: 52px;
  right: 16px;
  top: 50%;
  border-bottom: 1px dotted var(--regua);
  opacity: .8;
  pointer-events: none;
}

.hora-linha.tem-marcacao::after { opacity: 0; }
.hora-linha:active { background: rgba(27, 74, 143, .05); }

.hora-linha .etiqueta {
  width: 52px;
  flex: none;
  text-align: right;
  padding: 7px 8px 0 0;
  font-family: "Lora", Georgia, serif;
  font-size: 13px;
  color: var(--tinta-fraca);
  font-variant-numeric: tabular-nums;
}

.hora-linha.agora .etiqueta { color: var(--ferrugem); font-weight: 700; }

.hora-linha .conteudo {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 6px 0;
  min-width: 0;
}

/* marcação */

.marcacao {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  padding: 4px 6px;
  border-radius: 8px;
  cursor: pointer;
  animation: escrever .34s var(--mola) both;
  transition: background .18s, transform .18s var(--mola), opacity .25s;
}

.marcacao:active { transform: scale(.985); background: rgba(27, 74, 143, .06); }

.marcacao .risca {
  flex: none;
  width: 3px;
  align-self: stretch;
  min-height: 22px;
  border-radius: 3px;
  background: var(--azul);
  opacity: .75;
}

.marcacao.tarefa .risca { display: none; }

.caixa {
  flex: none;
  width: 21px;
  height: 21px;
  margin-top: 3px;
  border: 1.6px solid var(--azul);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: background .2s, transform .18s var(--mola);
}

.caixa::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform .2s var(--mola);
}

.marcacao.feita .caixa { background: var(--azul); }
.marcacao.feita .caixa::after { transform: rotate(45deg) scale(1); }
.caixa:active { transform: scale(.88); }

.marcacao .texto {
  font-family: "Caveat", "Segoe Script", cursive;
  font-size: 23px;
  line-height: 1.12;
  color: #1c3157;
  word-break: break-word;
}

.marcacao .minutos {
  font-family: "Lora", Georgia, serif;
  font-size: 12px;
  color: var(--tinta-fraca);
  font-variant-numeric: tabular-nums;
  flex: none;
  padding-top: 5px;
}

.marcacao .nota {
  display: block;
  font-family: "Segoe UI", Roboto, sans-serif;
  font-size: 12px;
  color: var(--tinta-fraca);
}

.marcacao .simbolos { flex: none; display: flex; gap: 4px; padding-top: 5px; }

.simbolo {
  font-size: 11px;
  line-height: 1;
  color: var(--tinta-fraca);
}

.simbolo.choca { color: var(--ferrugem); }

.marcacao.passou .texto, .marcacao.feita .texto {
  color: var(--tinta-fraca);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

@keyframes escrever {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: none; }
}

@keyframes aparecer {
  from { opacity: 0; transform: scale(.8); }
  to   { opacity: 1; transform: none; }
}

/* notas do dia */

.notas-dia { padding: 14px 16px 30px; }

.notas-dia h4 {
  margin: 0 0 6px;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  font-weight: 600;
}

.notas-dia .linhas {
  background: repeating-linear-gradient(180deg, transparent 0 33px, var(--regua) 33px 34px);
  min-height: 68px;
  padding-top: 2px;
}

.vazio {
  font-family: "Caveat", cursive;
  font-size: 20px;
  color: #b9b2a3;
  padding: 4px 6px;
}

/* ---------------- vista da semana ---------------- */

.semana-lista { padding: 6px 0 20px; }

.dia-bloco {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--regua);
  cursor: pointer;
  animation: escrever .3s var(--mola) both;
  transition: background .2s;
}

.dia-bloco:active { background: rgba(27, 74, 143, .05); }
.dia-bloco.e-hoje { background: rgba(238, 161, 60, .1); }

.dia-bloco .lado {
  flex: none;
  width: 46px;
  text-align: center;
}

.dia-bloco .lado .n {
  display: block;
  font-family: "Lora", Georgia, serif;
  font-size: 25px;
  font-weight: 700;
  color: var(--azul);
  line-height: 1;
}

.dia-bloco.domingo .lado .n, .dia-bloco.sabado .lado .n { color: var(--ferrugem); }

.dia-bloco .lado .s {
  display: block;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  margin-top: 3px;
}

.dia-bloco .itens { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; justify-content: center; }

.item-semana {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 14px;
  min-width: 0;
}

.item-semana .h {
  font-family: "Lora", Georgia, serif;
  font-size: 12px;
  color: var(--tinta-fraca);
  width: 40px;
  flex: none;
  font-variant-numeric: tabular-nums;
}

.item-semana .t {
  font-family: "Caveat", cursive;
  font-size: 20px;
  color: #1c3157;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-semana.feita .t, .item-semana.passou .t { color: var(--tinta-fraca); text-decoration: line-through; }
.item-semana .marca { color: var(--ferrugem); font-size: 11px; }

/* ---------------- vista do mês ---------------- */

.mes-grelha {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(72px, 1fr);
  border-top: 1px solid var(--regua);
}

.pagina.modo-mes { display: flex; flex-direction: column; }
.pagina.modo-mes .mes-grelha { flex: 1; }

.mes-nomes {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 8px 0 6px;
  position: sticky;
  top: 0;
  background: var(--papel);
  z-index: 2;
}

.mes-nomes div {
  text-align: center;
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--tinta-fraca);
}

.mes-celula {
  border-right: 1px solid var(--regua);
  border-bottom: 1px solid var(--regua);
  min-height: 78px;
  padding: 4px 4px 3px;
  background: transparent;
  text-align: left;
  font: inherit;
  cursor: pointer;
  overflow: hidden;
  animation: entrar-celula .3s var(--mola) both;
  transition: background .2s;
}

.mes-celula:nth-child(7n) { border-right: 0; }
.mes-celula:active { background: rgba(27, 74, 143, .06); }
.mes-celula.fora { background: #f7f4ec; }
.mes-celula.fora .n { color: #c6c1b4; }

@keyframes entrar-celula {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}

.mes-celula .n {
  font-family: "Lora", Georgia, serif;
  font-size: 14px;
  color: var(--tinta);
  display: inline-block;
  min-width: 21px;
  text-align: center;
  line-height: 21px;
  border-radius: 50%;
}

.mes-celula.domingo .n { color: var(--ferrugem); }
.mes-celula.hoje .n { background: var(--laranja); color: #4a2a06; font-weight: 700; }
.mes-celula.escolhido { background: rgba(27, 74, 143, .07); }

.mes-item {
  display: block;
  font-size: 11px;
  line-height: 1.35;
  color: #1c3157;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-left: 2px solid var(--azul);
  padding-left: 3px;
  margin-top: 2px;
}

.mes-item.tarefa { border-left-color: var(--tinta-fraca); }
.mes-item.choca { border-left-color: var(--ferrugem); color: var(--ferrugem); }
.mes-mais { font-size: 10px; color: var(--tinta-fraca); margin-top: 2px; display: block; }

/* ---------------- barra de baixo ---------------- */

.barra {
  flex: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 28;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 10px 16px calc(12px + var(--seguro-base));
  background: linear-gradient(180deg, rgba(252, 250, 244, 0), rgba(252, 250, 244, .96) 42%);
}

.botao-redondo, .mais {
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--azul);
  font-size: 24px;
  line-height: 1;
  box-shadow: 0 3px 10px rgba(19, 50, 95, .18);
  cursor: pointer;
  transition: transform .2s var(--mola);
}

.mais { font-size: 28px; font-weight: 300; }
.botao-redondo:active, .mais:active { transform: scale(.9); }

.microfone {
  position: relative;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 0;
  background: radial-gradient(circle at 32% 26%, #2f6ab9, var(--azul));
  color: #fff;
  box-shadow: 0 8px 22px rgba(19, 50, 95, .38);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s var(--mola), background .3s;
}

.microfone:active { transform: scale(.93); }
.microfone svg { width: 30px; height: 30px; position: relative; z-index: 2; }
.microfone.a-ouvir { background: radial-gradient(circle at 32% 26%, #f6c078, var(--laranja)); }

.microfone.a-ouvir::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(238, 161, 60, .6);
  animation: onda 1.4s infinite;
}

@keyframes onda {
  0%   { transform: scale(.9); opacity: .9; }
  100% { transform: scale(1.45); opacity: 0; }
}

.ondas { position: absolute; display: none; gap: 3px; align-items: center; height: 26px; z-index: 1; }
.microfone.a-ouvir .ondas { display: flex; }
.microfone.a-ouvir svg { display: none; }

.ondas i {
  width: 3px;
  height: 8px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .9);
  animation: barra .9s infinite ease-in-out;
}

.ondas i:nth-child(2) { animation-delay: .12s; }
.ondas i:nth-child(3) { animation-delay: .24s; }
.ondas i:nth-child(4) { animation-delay: .36s; }
.ondas i:nth-child(5) { animation-delay: .48s; }

@keyframes barra {
  0%, 100% { height: 8px; }
  50% { height: 24px; }
}

/* ---------------- janelas ---------------- */

.fundo {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(19, 50, 95, .42);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: escurecer .22s ease both;
}

.fundo[hidden] { display: none !important; }
.fundo.a-fechar { animation: clarear .2s ease both; }
.fundo.a-fechar .janela { animation: descer .2s var(--mola) both; }

@keyframes escurecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes clarear { to { opacity: 0; } }

.janela {
  width: 100%;
  max-width: 520px;
  background: var(--papel);
  border-radius: 20px 20px 0 0;
  padding: 10px 18px calc(18px + var(--seguro-base));
  max-height: 92dvh;
  overflow-y: auto;
  box-shadow: 0 -10px 34px rgba(0, 0, 0, .3);
  animation: subir .3s var(--mola) both;
}

.janela.alta { min-height: 70dvh; }

@keyframes subir { from { transform: translateY(100%); } to { transform: none; } }
@keyframes descer { to { transform: translateY(100%); } }

.puxador {
  width: 42px;
  height: 4px;
  border-radius: 4px;
  background: var(--regua-forte);
  margin: 4px auto 12px;
}

.janela h3 {
  font-family: "Lora", Georgia, serif;
  font-size: 21px;
  color: var(--azul);
  margin: 0 0 6px;
}

.entendido {
  background: #eef3fa;
  border: 1px solid #cddcf0;
  border-radius: 12px;
  padding: 10px 12px;
  margin: 8px 0 4px;
  animation: aparecer .3s var(--mola) both;
}

.entendido .ouvi {
  display: block;
  font-family: "Caveat", cursive;
  font-size: 20px;
  color: var(--tinta-fraca);
  line-height: 1.15;
}

.entendido strong { display: block; font-size: 14px; color: var(--azul); margin-top: 4px; }

.aviso-conflito {
  background: #fdf0e6;
  border: 1px solid #e8c4a5;
  border-radius: 12px;
  padding: 10px 12px;
  margin: 8px 0 4px;
  font-size: 13px;
  color: #7c3d18;
}

.aviso-conflito[hidden], .entendido[hidden] { display: none !important; }

.tipos {
  display: flex;
  gap: 8px;
  background: #ece7da;
  border-radius: 999px;
  padding: 4px;
  margin-top: 12px;
}

.tipo {
  flex: 1;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: var(--tinta-fraca);
  padding: 9px;
  min-height: 42px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .24s var(--mola), color .24s, box-shadow .24s;
}

.tipo.ativo { background: #fff; color: var(--azul); font-weight: 600; box-shadow: 0 2px 6px rgba(19, 50, 95, .12); }

label {
  display: block;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  margin: 14px 0 5px;
}

input[type="text"], input[type="date"], input[type="time"], textarea, select {
  width: 100%;
  font: inherit;
  color: var(--tinta);
  background: #fff;
  border: 1px solid var(--regua-forte);
  border-radius: 12px;
  padding: 12px;
  min-height: 48px;
  transition: border-color .2s, box-shadow .2s;
}

select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--azul) 50%), linear-gradient(135deg, var(--azul) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px; background-size: 6px 6px; background-repeat: no-repeat; }

input:focus, textarea:focus, select:focus {
  outline: 0;
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(27, 74, 143, .14);
}

textarea { min-height: 72px; resize: vertical; }

.linha-campos { display: flex; gap: 10px; }
.linha-campos > div { flex: 1; }

.acoes { display: flex; gap: 10px; margin-top: 18px; }
.acoes.coluna { flex-direction: column; }

.botao {
  flex: 1;
  border: 0;
  border-radius: 14px;
  background: #fff;
  color: var(--azul);
  font: inherit;
  font-weight: 600;
  padding: 13px 14px;
  min-height: 50px;
  box-shadow: 0 2px 8px rgba(19, 50, 95, .14);
  cursor: pointer;
  transition: transform .18s var(--mola), background .2s;
}

.botao:active { transform: scale(.97); }
.botao.principal { background: var(--azul); color: #fff; }
.botao.perigo { background: #fff; color: #b4443a; }
.acoes:not(.coluna) .botao.perigo { flex: 0 0 auto; padding: 13px 18px; }

.ouvinte { text-align: center; }

.transcricao {
  font-family: "Caveat", cursive;
  font-size: 27px;
  min-height: 62px;
  padding: 8px 4px;
  line-height: 1.2;
  color: var(--tinta);
}

.dica { color: var(--tinta-fraca); font-size: 13px; line-height: 1.6; margin: 4px 0 0; }
.passos { color: var(--tinta); font-size: 15px; line-height: 1.6; padding-left: 20px; margin: 6px 0; }
.passos li { margin-bottom: 6px; }

/* resultados da pesquisa */

.resultados { list-style: none; margin: 10px 0 0; padding: 0; }

.resultados li { animation: escrever .26s var(--mola) both; }

.resultado {
  display: flex;
  gap: 12px;
  align-items: baseline;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  font: inherit;
  padding: 11px 6px;
  min-height: 52px;
  border-bottom: 1px solid var(--regua);
  cursor: pointer;
  border-radius: 8px;
  transition: background .2s;
}

.resultado:active { background: rgba(27, 74, 143, .06); }

.resultado .quando {
  flex: none;
  width: 96px;
  font-size: 12px;
  color: var(--tinta-fraca);
  font-variant-numeric: tabular-nums;
}

.resultado .o-que { font-family: "Caveat", cursive; font-size: 21px; color: #1c3157; }
.resultado .o-que small { display: block; font-family: inherit; font-size: 12px; color: var(--tinta-fraca); }

.aviso {
  position: fixed;
  left: 50%;
  bottom: calc(108px + var(--seguro-base));
  z-index: 50;
  background: var(--capa);
  color: #fff;
  padding: 11px 16px;
  border-radius: 12px;
  font-size: 14px;
  max-width: 88%;
  text-align: center;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .32);
  animation: aviso-entra .3s var(--mola) both;
}

.aviso[hidden] { display: none !important; }
.aviso.a-sair { animation: aviso-sai .25s ease both; }

@keyframes aviso-entra {
  from { opacity: 0; transform: translate(-50%, 14px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes aviso-sai {
  from { opacity: 1; transform: translate(-50%, 0); }
  to   { opacity: 0; transform: translate(-50%, 10px); }
}

@media (min-width: 620px) {
  .topo, .palco, .barra { max-width: 560px; margin-inline: auto; }
  .barra { left: 50%; right: auto; transform: translateX(-50%); width: 100%; }
}

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