/* estilo.css, a cara da fabrica.
 *
 * Uma regra guiou tudo aqui: quem se cadastra tem que reconhecer a casa quando
 * entrar nela. Entao o fundo, o verde, a carta escura e o REATOR (os dois aneis
 * com o nucleo aceso) sao os mesmos do primeiro acesso do produto. Nao e
 * decoracao repetida, e continuidade: a pessoa ve o mesmo objeto na hora de se
 * cadastrar e na hora de entrar.
 *
 * Nada de folha externa, nada de fonte baixada: a politica de seguranca da
 * pagina so aceita o que vem desta mesma casa.
 */

:root {
  --fundo:        #04050a;
  --carta:        #0d1117;
  --carta-borda:  #1f2937;
  --campo:        #0d1320;
  --campo-borda:  #283548;
  --tinta:        #e7edf5;
  --tinta-media:  #9fb0c4;
  --tinta-fraca:  #7b8ba1;
  --verde:        #34d399;
  --verde-fundo:  #06281c;
  --verde-fraco:  rgba(52, 211, 153, .12);
  --vermelho:     #fca5a5;
  --ambar:        #fbbf24;

  --raio:      12px;
  --raio-carta: 18px;

  /* uma escala so, sem numero solto no meio do caminho */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 24px; --e6: 32px; --e7: 48px;

  --curva: cubic-bezier(.22, 1, .36, 1);

  --z-fundo: 0;
  --z-conteudo: 10;
  --z-flutuante: 20;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--fundo);
  color: var(--tinta);
  font-family: -apple-system, "SF Pro Text", "Segoe UI", Inter, Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body.palco {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--e5) var(--e4);
  padding-top: max(var(--e5), env(safe-area-inset-top));
  padding-bottom: max(var(--e5), env(safe-area-inset-bottom));
  background-image: radial-gradient(ellipse at 50% 0%, rgba(52, 211, 153, .08), transparent 58%);
  background-attachment: fixed;
}

/* ---------- o reator ---------- */

.reator {
  position: relative;
  width: 46px;
  height: 46px;
  margin: 0 auto var(--e4);
  flex: none;
}
.reator::before,
.reator::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(52, 211, 153, .5);
}
.reator::after {
  inset: 7px;
  border-color: rgba(52, 211, 153, .92);
  border-right-color: transparent;
  animation: gira 3.2s linear infinite;
}
.reator i {
  position: absolute;
  inset: 15px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #34d399, #0b3b2b);
  box-shadow: 0 0 12px rgba(52, 211, 153, .55);
}
.reator.pequeno { width: 30px; height: 30px; margin: 0; }
.reator.pequeno::after { inset: 5px; }
.reator.pequeno i { inset: 10px; }

@keyframes gira { to { transform: rotate(360deg); } }

/* ---------- a carta ---------- */

.carta {
  position: relative;
  z-index: var(--z-conteudo);
  width: 100%;
  max-width: 448px;
  background: var(--carta);
  border: 1px solid var(--carta-borda);
  border-radius: var(--raio-carta);
  padding: var(--e6) var(--e5) var(--e5);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .7),
              inset 0 0 0 1px rgba(52, 211, 153, .04);
  animation: sobe .45s var(--curva) both;
}

@keyframes sobe {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

h1 {
  margin: 0 0 var(--e2);
  font-size: 23px;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: #f6f9fc;
  text-wrap: balance;
}

.sub {
  margin: 0 0 var(--e5);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--tinta-media);
  text-wrap: pretty;
}

/* ---------- formulario ---------- */

label {
  display: block;
  margin: var(--e4) 0 var(--e1);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--tinta);
}
label:first-of-type { margin-top: 0; }

input[type=text], input[type=email], input[type=password], input[type=number],
select {
  width: 100%;
  font: inherit;
  font-size: 16px;            /* 16px trava o zoom automatico do iPhone */
  color: var(--tinta);
  background: var(--campo);
  border: 1px solid var(--campo-borda);
  border-radius: var(--raio);
  padding: 11px 12px;
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
select { min-height: 46px; }        /* mesma altura do campo de texto ao lado */
input::placeholder { color: #5d6b80; }
input:hover:not(:disabled), select:hover:not(:disabled) { border-color: #3a4d68; }
input:focus-visible, select:focus-visible {
  border-color: var(--verde);
  box-shadow: 0 0 0 3px var(--verde-fraco);
}
input:disabled, select:disabled { opacity: .55; cursor: default; }
input[aria-invalid="true"] { border-color: rgba(248, 113, 113, .6); }

.com-botao { position: relative; }
.com-botao input { padding-right: 76px; }
.espiar {
  position: absolute;
  right: var(--e1);
  top: 50%;
  transform: translateY(-50%);
  min-height: 36px;
  padding: 0 var(--e3);
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--tinta-media);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: color .16s ease, background-color .16s ease;
}
.espiar:hover { color: var(--tinta); background: rgba(255, 255, 255, .06); }
.espiar:focus-visible { outline: 2px solid var(--verde); outline-offset: 1px; }

/* a linha que vai dizendo como fica o endereco.
   O endereco em si pode ser comprido e precisa poder quebrar em qualquer letra,
   mas a FRASE ao lado dele nao: quebrar palavra no meio de um texto normal deixa
   a leitura tropecando ("...vai ca / minhar"). Por isso a regra dura vale so
   dentro do <b>. */
.eco {
  display: block;
  margin: var(--e2) 0 0;
  min-height: 20px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--tinta-fraca);
  overflow-wrap: break-word;
}
.eco b { color: var(--tinta); font-weight: 600; overflow-wrap: anywhere; }
.eco.livre { color: var(--verde); }
.eco.ocupado { color: var(--vermelho); }
.eco.pensando { color: var(--tinta-fraca); }

.dica {
  margin: var(--e2) 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--tinta-fraca);
}

/* ---------- botoes ---------- */

.principal, .secundario {
  display: block;
  width: 100%;
  min-height: 46px;
  margin-top: var(--e5);
  padding: 12px;
  border-radius: var(--raio);
  font: inherit;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease,
              border-color .16s ease, transform .1s ease;
}
.principal {
  border: none;
  background: var(--verde);
  color: var(--verde-fundo);
  font-size: 14.5px;
  font-weight: 700;
}
.principal:hover:not(:disabled) { background: #4ade9f; }
.principal:active:not(:disabled) { transform: translateY(1px); }
/* botao desligado nao pode so estar mais claro: ele tem que PARECER outra coisa,
   senao a pessoa clica, nada acontece, e ela acha que o sitio quebrou */
.principal:disabled {
  background: #1a2431;
  color: #6b7c92;
  cursor: not-allowed;
}
.secundario {
  margin-top: var(--e3);
  border: 1px solid var(--campo-borda);
  background: transparent;
  color: var(--tinta);
  font-size: 13.5px;
  font-weight: 500;
}
.secundario:hover { border-color: #3a4d68; background: rgba(255, 255, 255, .04); }
.principal:focus-visible, .secundario:focus-visible {
  outline: 2px solid var(--verde);
  outline-offset: 2px;
}

/* ---------- avisos ---------- */

/* O motivo de a porta estar fechada e a segunda coisa que a pessoa le, logo
   depois do titulo. Ele vem ANTES do campo de aviso, entao precisa de ar
   embaixo para nao colar no rotulo e virar legenda dele. */
#motivoFechada { margin: 0 0 var(--e5); }

/* A confirmacao de "anotei o seu e-mail" e a de "o link esta a caminho"
   substituem o formulario inteiro, entao cada uma fica sendo o unico elemento
   aceso da carta e nasce sem margem de topo. */
#anotado, #pedidoFeito { margin-top: 0; }

/* O recado que chega pela barra de endereco na porta de entrada ("esse link
   venceu"). Mesma regra do motivo de porta fechada: ele e a primeira coisa que
   a pessoa le, entao precisa de ar embaixo para nao colar no titulo. */
#avisoPorta { margin: 0 0 var(--e5); }

.erro, .nota {
  margin-top: var(--e4);
  padding: 10px 12px;
  border-radius: var(--raio);
  font-size: 12.5px;
  line-height: 1.5;
}
.erro {
  color: var(--vermelho);
  background: rgba(248, 113, 113, .08);
  border: 1px solid rgba(248, 113, 113, .35);
}
.nota {
  color: var(--tinta-media);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--carta-borda);
}
.nota.atencao {
  color: #fcd77f;
  background: rgba(251, 191, 36, .08);
  border-color: rgba(251, 191, 36, .3);
}
/* deu certo. Mesma familia da nota, so que verde: a cor de acento desta casa so
   aparece quando ha estado bom para mostrar, nunca de enfeite */
.nota.bom {
  color: #86efc4;
  background: var(--verde-fraco);
  border-color: rgba(52, 211, 153, .35);
}

/* ---------- os passos da obra ---------- */

.passos { margin: var(--e5) 0 0; padding: 0; list-style: none; }
.passo {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: 11px 2px;
  border-top: 1px solid var(--carta-borda);
  font-size: 13.5px;
  color: var(--tinta-fraca);
  transition: color .2s ease;
}
.passo:first-child { border-top: none; }
.passo .marca {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #263449;
  position: relative;
}
.passo[data-estado="fazendo"] { color: var(--tinta); }
.passo[data-estado="fazendo"] .marca {
  border-color: #263449;
  border-top-color: var(--verde);
  animation: gira .8s linear infinite;
}
.passo[data-estado="feito"] { color: var(--tinta-media); }
.passo[data-estado="feito"] .marca {
  border-color: var(--verde);
  background: var(--verde);
}
.passo[data-estado="feito"] .marca::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid var(--verde-fundo);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.passo[data-estado="falhou"] { color: var(--vermelho); }
.passo[data-estado="falhou"] .marca {
  border-color: var(--vermelho);
  background: rgba(248, 113, 113, .2);
}

/* ---------- o endereco pronto ---------- */

.endereco-pronto {
  display: block;
  margin: var(--e5) 0 0;
  padding: var(--e4);
  border: 1px solid rgba(52, 211, 153, .35);
  border-radius: var(--raio);
  background: var(--verde-fraco);
  color: var(--verde);
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  word-break: break-all;
  transition: background-color .16s ease;
}
.endereco-pronto:hover { background: rgba(52, 211, 153, .18); }
.endereco-pronto:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }

/* ---------- o caminho de quem esqueceu a senha ----------

   Um link de TEXTO, e nao um botao: ele leva a outra tela, e o navegador ja sabe
   desenhar isso. Tres decisoes que nao sao gosto:

   1. sublinhado SEMPRE aceso. Link que so aparece quando o mouse passa por cima
      nao existe num telefone, e telefone e onde a maior parte das pessoas
      descobre que esqueceu a senha.
   2. cor --tinta-media, e nao --tinta-fraca. Ele fica logo abaixo do botao
      verde, que e a acao principal desta tela; discreto sim, apagado nao.
   3. alvo de 44px de altura em tela de dedo, do mesmo jeito que .atalho ja faz.
      Um link de 13px no meio de uma carta e alvo de unha, nao de polegar. */
.linha-link { margin: var(--e4) 0 0; text-align: center; }
.link-quieto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 6px;
  color: var(--tinta-media);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(159, 176, 196, .45);
  transition: color .16s ease, text-decoration-color .16s ease;
}
.link-quieto:hover { color: var(--tinta); text-decoration-color: currentColor; }
.link-quieto:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }

@media (pointer: coarse) {
  .link-quieto { min-height: 44px; }
}

/* ---------- rodape e idioma ---------- */

.rodape {
  z-index: var(--z-conteudo);
  margin-top: var(--e5);
  display: flex;
  align-items: center;
  gap: var(--e2);
  font-size: 12px;
  color: var(--tinta-fraca);
}
/* a marca nao e um botao; o tracinho a separa das duas linguas, que sao */
.rodape #marca { letter-spacing: .1em; opacity: .7; }
.rodape #marca::after { content: ""; display: inline-block; width: 1px; height: 10px;
  margin-left: var(--e3); background: currentColor; opacity: .4; vertical-align: -1px; }
.rodape a, .rodape button {
  background: none;
  border: none;
  padding: 6px 4px;
  font: inherit;
  font-size: 12px;
  color: var(--tinta-fraca);
  text-decoration: none;
  cursor: pointer;
  border-radius: 6px;
}
.rodape a:hover, .rodape button:hover { color: var(--tinta); }
.rodape a:focus-visible, .rodape button:focus-visible {
  outline: 2px solid var(--verde);
  outline-offset: 2px;
}
.rodape [aria-current="true"] { color: var(--verde); }

[hidden] { display: none !important; }

/* ---------- painel do dono ---------- */

body.painel {
  display: block;
  justify-content: initial;
  align-items: initial;
  padding: 0;
  background-image: none;
}
.barra {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e3) var(--e5);
  border-bottom: 1px solid var(--carta-borda);
  background: rgba(13, 17, 23, .9);
  position: sticky;
  top: 0;
  z-index: var(--z-flutuante);
  backdrop-filter: blur(8px);
}
.barra h1 { margin: 0; font-size: 15px; letter-spacing: .02em; }
.barra .contagem { color: var(--tinta-fraca); font-size: 12.5px; }
.barra .direita { margin-left: auto; display: flex; align-items: center; gap: var(--e2); }
.barra button {
  min-height: 34px;
  padding: 0 var(--e3);
  border: 1px solid var(--campo-borda);
  border-radius: 9px;
  background: transparent;
  color: var(--tinta);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.barra button:hover { border-color: #3a4d68; background: rgba(255, 255, 255, .04); }
.barra button:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }

.folha { max-width: 1080px; margin: 0 auto; padding: var(--e5) var(--e5) var(--e7); }

.secao { margin-top: var(--e6); }
.secao:first-child { margin-top: 0; }
/* o titulo de secao vale em qualquer lugar dentro dela, e nao so como filho
   direto: quando um selo de estado passou a viajar ao lado do titulo, ele desceu
   um nivel e caiu fora deste seletor. O resultado foi um h2 do tamanho do
   navegador no meio de uma pagina de h2 de 16px, num painel que so tem valor se
   parecer um so. */
.secao h2 {
  margin: 0 0 var(--e1);
  font-size: 16px;
  font-weight: 600;
  color: #f6f9fc;
}
/* texto corrido nao passa de ~72 caracteres por linha: numa tela larga, uma
   frase de 120 caracteres faz o olho perder a linha na volta */
.secao > .sub { margin-bottom: var(--e4); max-width: 72ch; }

/* a lista de inquilinos: linhas, nao cartoes */
.lista { border-top: 1px solid var(--carta-borda); }
.morador {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--e3);
  padding: var(--e3) var(--e1);
  border-bottom: 1px solid var(--carta-borda);
}
.morador .luz {
  width: 9px; height: 9px; border-radius: 50%;
  background: #3a4a5f;
}
.morador[data-estado="ativo"] .luz { background: var(--verde); box-shadow: 0 0 8px rgba(52,211,153,.6); }
.morador[data-estado="suspenso"] .luz { background: var(--ambar); }
.morador[data-estado="falhou"] .luz { background: #f87171; }
.morador[data-estado="criando"] .luz { background: var(--verde); animation: pisca 1.2s ease-in-out infinite; }
@keyframes pisca { 50% { opacity: .25; } }

.morador .quem { min-width: 0; }
.morador .quem a {
  position: relative;
  color: var(--tinta); text-decoration: none; font-weight: 600; font-size: 14px;
}
.morador .quem a:hover { color: var(--verde); }
/* ALVO DE DEDO. O nome do cliente e um link, e medido no telefone ele dava
   23x19 px: um terco do minimo de 44x44, na unica tela que se abre do celular.
   O alvo cresce por uma sombra invisivel centrada no texto, e nao por padding,
   porque padding aqui empurraria a linha de baixo e mudaria a altura de todas
   as sessenta linhas da lista. */
.morador .quem a::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  min-width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
.morador .quem .meta {
  display: block;
  font-size: 12px;
  color: var(--tinta-fraca);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* o aviso do que a remocao destroi nao pode ter a cor de nota de rodape */
.morador .meta.alarme { color: #f0a0a0; white-space: normal; margin-top: 2px; }

/* O ESTADO DO CONTEINER, quando o docker nao confirma que a casa esta de pe.
   Fora da `.meta`, porque la ele era o ultimo pedaco de uma linha com
   reticencia e sumia no telefone -- justamente o aviso, justamente na tela onde
   o dono mais olha. Selo proprio, que quebra linha e nunca e cortado. */
.morador .marca-conteiner { margin-top: 4px; white-space: normal; }
/* a luz mente se ficar verde: o livro diz "ativo", mas quem confirma que a casa
   esta de pe e o docker, e ele nao confirmou. Depois das regras por estado, de
   proposito, para vencer todas elas */
.morador[data-conteiner="ruim"] .luz {
  background: var(--ambar);
  box-shadow: none;
  animation: none;
}

.morador .acoes { display: flex; gap: var(--e2); flex-wrap: wrap; justify-content: flex-end; }
.morador .acoes button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--campo-borda);
  border-radius: 9px;
  background: transparent;
  color: var(--tinta-media);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}
.morador .acoes button:hover { color: var(--tinta); border-color: #3a4d68; }
.morador .acoes button:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }
.morador .acoes button.perigo { color: #f0a0a0; border-color: rgba(248, 113, 113, .3); }
.morador .acoes button.perigo:hover { color: #fecaca; border-color: rgba(248, 113, 113, .6); background: rgba(248,113,113,.08); }

/* o campo onde o dono datilografa o endereco para confirmar uma remocao */
.campo-confirma {
  max-width: 190px;
  min-height: 34px;
  padding: 6px 10px !important;
  font-size: 13px !important;
  border-color: rgba(248, 113, 113, .4) !important;
}

.vazio {
  padding: var(--e6) var(--e4);
  text-align: center;
  color: var(--tinta-fraca);
  font-size: 13.5px;
  border-bottom: 1px solid var(--carta-borda);
}

.esqueleto {
  height: 46px;
  border-bottom: 1px solid var(--carta-borda);
  background: linear-gradient(90deg, rgba(255,255,255,.02), rgba(255,255,255,.06), rgba(255,255,255,.02));
  background-size: 200% 100%;
  animation: varre 1.3s linear infinite;
}
@keyframes varre { to { background-position: -200% 0; } }

.forma-larga { max-width: 520px; }
.forma-larga label:first-of-type { margin-top: 0; }
.par { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 var(--e4); }

.selo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  border: 1px solid var(--campo-borda);
  color: var(--tinta-media);
}
.selo.bom { color: var(--verde); border-color: rgba(52, 211, 153, .35); background: var(--verde-fraco); }
.selo.ruim { color: var(--vermelho); border-color: rgba(248, 113, 113, .35); background: rgba(248,113,113,.08); }

.registro {
  margin-top: var(--e3);
  padding: var(--e3);
  max-height: 260px;
  overflow: auto;
  border: 1px solid var(--carta-borda);
  border-radius: var(--raio);
  background: #080b11;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--tinta-media);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Dedo nao e ponteiro de mouse. Onde o toque manda, todo botao cresce para os
   44px que a mao acerta sem errar o vizinho. Foi assim que um botao de acao
   virou inalcancavel num telefone antes: desenhado para o cursor. */
@media (pointer: coarse) {
  .morador .acoes button,
  .barra button,
  .espiar,
  .rodape button,
  .rodape a,
  /* o endereco de cada cliente e um link, e so nasce quando existe cliente:
     por isso as medidas de dedo anteriores passaram, elas rodaram com a lista
     vazia. Media a 390 px com toque: 131x19 px, um por cliente */
  .quem a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .campo-confirma { min-height: 44px; }
}

@media (max-width: 560px) {
  .folha { padding: var(--e4) var(--e4) var(--e6); }
  .barra { padding: var(--e3) var(--e4); flex-wrap: wrap; }
  .morador { grid-template-columns: 10px minmax(0, 1fr); }
  .morador .acoes { grid-column: 1 / -1; justify-content: flex-start; padding-left: 22px; }
}

/* Quem pediu menos movimento recebe menos movimento. O reator para de girar, os
   passos param de rodar, e o estado continua legivel porque a COR e a MARCA e
   que carregam a informacao, nunca so a animacao. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .passo[data-estado="fazendo"] .marca { border-top-color: var(--verde); border-right-color: var(--verde); }
}

/* ---------- atalhos: um LINK que se comporta como botao ----------

   Aparecem na barra da area de quem entrou (ir para a administracao, voltar
   para a area da pessoa) e na linha de cada casa (abrir). Sao links de verdade,
   nao botoes com javascript: abrem em aba nova com o meio do mouse, o teclado
   os alcanca na ordem, e continuam funcionando se o script nao rodar. */
.atalho {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--campo-borda);
  border-radius: 9px;
  color: var(--tinta-media);
  font-size: 12.5px;
  text-decoration: none;
  transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}
.atalho:hover { color: var(--tinta); border-color: #3a4d68; background: rgba(255, 255, 255, .04); }
.atalho:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }

/* na area da pessoa a lista nao tem botao de acao, entao a linha fica com duas
   colunas e o atalho encosta na direita */
.morador .acoes .atalho { margin-left: auto; }

@media (pointer: coarse) {
  .atalho { min-height: 44px; }
}