/* O KIT DE MARCA vem de `marca.css`, que é a fonte única dos tokens
   desde 04/09/2026 — inclusive o @import das fontes, que mora lá.
   Antes o `:root` estava AQUI, misturado ao layout do app do morador, e
   quem escrevia uma tela nova sem querer esse layout também não pegava
   as cores: foi assim que a tela do porteiro nasceu azul. */
@import url('/app/marca.css');
/* =====================================================================
   APP DO MORADOR — identidade VIVIUM ACCESS
   =====================================================================
   Os mesmos tokens das telas do servidor (servidor-local/public/app.css):
   VERMELHO VIVIUM #d22225 na marca e no destaque, GRAFITE #1f252d no que
   precisa de peso. Regra que veio junto e continua valendo: o destaque
   aparece em NO MÁXIMO 2 elementos por tela (CTA + ícone ativo); tela
   interna é sempre clara.

   ATENÇÃO AO VERMELHO, que aqui carrega DUAS funções.
   A regra antiga dizia "vermelho só significa erro, nunca botão" — e
   ela caiu quando a marca virou vermelha. O que a substitui:
     · `--brand` (#d22225, bordô) é botão e ícone ativo. SÓLIDO.
     · `--erro`  (#DC2626, vivo) é mensagem de erro. Sempre sobre
       `--erro-bg` claro, sempre acompanhado de texto dizendo o que
       houve.
   Botão bordô cheio e aviso vermelho claro com texto não se confundem.
   Igualar os dois "para simplificar" é o que não pode acontecer.

   É CSS puro com variáveis — sem Tailwind, sem build. O mesmo padrão do
   servidor local: o que se lê é o que roda.
   ==================================================================== */

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  /* O FUNDO DO APP É O `--color-canvas` (#edf0f3), não mais o #F8F8F8.
     Com o cinza antigo, o cartão branco e a página ficavam a um passo
     de distância: na home nova dá para ver a "Atividade recente"
     desenhada num cartão que não parece cartão. #edf0f3 é o mesmo fundo
     do sistema de mesa — e ali ele existe pela mesma razão. */
  background: var(--color-canvas);
  color: var(--n900);
  font-family: Inter, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px; line-height: 1.45;
  -webkit-tap-highlight-color: transparent;
}

/* O app é uma coluna de celular mesmo no desktop — testar no monitor da
   integradora não pode dar um layout diferente do que o morador vê. */
.app {
  max-width: 480px; margin: 0 auto; min-height: 100vh;
  padding-bottom: calc(var(--nav-h) + 16px);
  position: relative;
}

/* ---------- cabeçalho da home ---------- */
.topo {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 20px 16px 8px;
}
.topo h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.3px; }
.topo .sub { color: var(--n500); font-size: 13px; margin-top: 2px; }

.sino {
  position: relative; border: 0; background: var(--card);
  width: 42px; height: 42px; border-radius: 50%;
  box-shadow: var(--sombra-sm); cursor: pointer; font-size: 18px;
}
.sino .badge {
  position: absolute; top: -3px; right: -3px;
  background: var(--brand); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 1;
  padding: 3px 6px; border-radius: 999px;
}

/* ---------- card hero ---------- */
.hero {
  margin: 10px 16px; border-radius: var(--r-xl); overflow: hidden;
  position: relative; min-height: 150px; display: flex; align-items: flex-end;
  /* O guia MAZA não usa gradiente colorido; este é de um tom só
     (carbono → bordô) e faz o papel da foto do condomínio que ainda
     não existe. Some no dia em que o condomínio subir a imagem dele. */
  background: linear-gradient(160deg, var(--carbono), var(--vivium-fechado) 78%);
  box-shadow: var(--sombra-md);
}
.hero .texto {
  padding: 16px; color: #fff; font-weight: 600; font-size: 15px;
  text-shadow: 0 1px 3px rgba(0,0,0,.5); width: 100%;
  background: linear-gradient(transparent, rgba(0,0,0,.45));
}
.hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- seções ---------- */
.secao { padding: 14px 16px 4px; display: flex; justify-content: space-between; align-items: baseline; }
.secao h2 { margin: 0; font-size: 16px; font-weight: 600; }
.secao a { color: var(--brand); font-size: 13px; font-weight: 600; text-decoration: none; }

/* ---------- grade de acesso rápido ---------- */
.grade {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; padding: 8px 16px;
}
.tile {
  background: var(--card); border: 1px solid var(--borda);
  border-radius: var(--r-lg); padding: 14px 8px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-decoration: none; color: var(--n700);
  font-size: 12.5px; font-weight: 500; text-align: center;
  box-shadow: var(--sombra-sm); position: relative;
}
.tile .icone {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--n100); display: grid; place-items: center; font-size: 19px;
}
.tile.ativo .icone { background: #fff1f2; }
.tile.breve { opacity: .55; }
.tile .em-breve {
  position: absolute; top: 6px; right: 6px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .4px;
  color: var(--n400); background: var(--n100);
  padding: 2px 6px; border-radius: 999px;
}

/* ---------- cards e listas ---------- */
.card {
  background: var(--card); border: 1px solid var(--borda);
  border-radius: var(--r-lg); padding: 14px; margin: 8px 16px;
  box-shadow: var(--sombra-sm);
}
.lista-item {
  display: flex; gap: 12px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--n100);
}
.lista-item:last-child { border-bottom: 0; padding-bottom: 0; }
.lista-item:first-child { padding-top: 0; }
.lista-item .icone {
  width: 38px; height: 38px; border-radius: var(--r-md); flex: none;
  background: var(--n100); display: grid; place-items: center; font-size: 17px;
}
.lista-item .corpo { flex: 1; min-width: 0; }
.lista-item .titulo { font-weight: 600; font-size: 14px; }
.lista-item .detalhe { color: var(--n500); font-size: 12.5px; margin-top: 1px; }

/* ---------- ações na própria linha (✎ 🗑) ----------
   Alvo de 40px: abaixo disso o dedo erra, e errar aqui é abrir a ficha
   errada ou pedir a exclusão de quem não era.

   `.apagado` é o estado "existe e não é para você". NÃO usa
   `pointer-events:none` nem `disabled` de propósito: o botão precisa
   continuar recebendo o toque para dizer o motivo. Em celular não há
   `hover`, então um `title` sozinho seria invisível — e botão que não
   reage ao toque é indistinguível de app travado. */
.acao-linha {
  flex: none; min-width: 40px; min-height: 40px;
  display: grid; place-items: center;
  background: none; border: 0; padding: 0;
  font-size: 17px; line-height: 1; cursor: pointer;
  border-radius: var(--r-md); color: var(--n500);
}
.acao-linha:hover { background: var(--n100); }
.acao-linha.apagado:hover { background: none; }

/* Genérico: serve tanto no ícone da linha quanto no `.botao` da ficha,
   que é o mesmo estado visto de outra distância. */
.apagado { opacity: .3; cursor: not-allowed; }

/* ---------- selos de status ---------- */
.selo {
  font-size: 11.5px; font-weight: 600; padding: 3px 9px;
  border-radius: 999px; white-space: nowrap;
}
.selo.ok     { color: var(--ok); background: var(--ok-bg); }
.selo.alerta { color: var(--alerta); background: var(--alerta-bg); }
.selo.erro   { color: var(--erro); background: var(--erro-bg); }
.selo.info   { color: var(--info); background: var(--info-bg); }
.selo.neutro { color: var(--n500); background: var(--n100); }

/* ---------- formulários ---------- */
label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .8px;
  text-transform: uppercase; color: var(--n500); margin: 14px 0 5px; }
input, select, textarea {
  width: 100%; height: 48px; padding: 0 12px;
  border: 1.5px solid var(--borda); border-radius: var(--r-md);
  background: var(--card); color: var(--n900);
  font: inherit; font-size: 15px;
}
textarea { height: auto; padding: 12px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand); outline-offset: -1px; border-color: transparent; }

.botao {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  /* ALTURA MÍNIMA, não fixa. Com `height: 48px` um rótulo de duas
     linhas ("Gerar link do cadastro" num aparelho estreito) vazava para
     fora do botão — foi o que o Marcelo viu em campo. */
  width: 100%; min-height: 48px; padding: 12px 14px;
  border: 0; border-radius: var(--r-md);
  background: var(--brand); color: #fff;
  font: inherit; font-size: 15px; font-weight: 600; line-height: 1.25;
  text-align: center; cursor: pointer;
}
.botao:disabled { opacity: .5; }
.botao.contorno { background: transparent; border: 1.5px solid var(--brand); color: var(--brand); }
.botao.fantasma { background: transparent; color: var(--brand); }

/**
 * PAR DE BOTÕES lado a lado (salvar + voltar).
 *
 * O `.botao` nasce com `width: 100%` porque quase sempre ele é o único
 * da linha. Dentro de um flex, esse 100% vira a largura BASE dos dois:
 * o navegador espreme o primeiro e deixa o segundo enorme — exatamente
 * o "Gerar link" espremido com o "Voltar" deslocado.
 *
 * Aqui a base volta a ser o conteúdo (`flex-basis: auto`), a ação
 * principal cresce e a secundária ocupa só o que precisa.
 */
.acoes { display: flex; gap: 10px; margin-top: 16px; align-items: stretch; }
.acoes .botao { width: auto; flex: 1 1 auto; min-width: 0; }
.acoes .botao.contorno { flex: 0 0 auto; padding-left: 20px; padding-right: 20px; }

/* Texto de apoio embaixo de um campo: explica a REGRA sem virar aviso
   de erro (o horário do prestador vem do perfil, o rosto só abre dentro
   da faixa). Cinza e pequeno de propósito — é contexto, não alarme. */
.dica { font-size: 12.5px; color: var(--n500); margin-top: 6px; line-height: 1.4; }

/* ---------- barra inferior ---------- */
.nav {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px; height: var(--nav-h);
  background: var(--card); border-top: 1px solid var(--borda);
  display: grid; grid-template-columns: repeat(5, 1fr);
  align-items: center; z-index: 50;
  padding-bottom: env(safe-area-inset-bottom);
}
.nav a {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  text-decoration: none; color: var(--n400);
  font-size: 10.5px; font-weight: 500;
}
.nav a .ic { font-size: 20px; }
.nav a.ativo { color: var(--brand); }
/**
 * O BOTÃO REDONDO, E A SOMBRA TEAL QUE VIVEU MESES NELE (13/09/2026).
 *
 * `rgba(0,93,110,.45)` é o #005D6E da identidade ANTERIOR, escrito em
 * decimal. A guarda de paleta procurava a identidade morta pelo HEX, e
 * por isso ela sobreviveu embaixo do botão mais visível do app: um halo
 * esverdeado sob um botão vermelho. Guarda que procura uma grafia
 * protege uma grafia — `paleta.test.js` agora cobra as duas.
 *
 * O tamanho subiu de 48 para 56px junto com a direção A: é o botão que
 * o polegar procura sem olhar, e 56 é a medida do canvas aprovado.
 */
.nav .mais {
  width: 56px; height: 56px; margin: 0 auto; border-radius: 50%;
  background: var(--brand); color: var(--sobre-brand); line-height: 1;
  display: grid; place-items: center;
  box-shadow: 0 8px 18px rgba(229, 9, 20, .35);
  transform: translateY(-18px);
}

/* ---------- login (única tela escura — regra do design system) ---------- */
body.login { background: var(--brand-escuro); }
.login-topo {
  min-height: 34vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; color: #fff; gap: 6px;
}
.login-topo .marca { font-size: 30px; font-weight: 800; letter-spacing: 1px; }
.login-topo .marca small { font-weight: 400; opacity: .85; }
.login-topo .sub { font-size: 12px; opacity: .6; }
.login-card {
  background: var(--fundo); border-radius: 28px 28px 0 0;
  min-height: 66vh; padding: 26px 22px calc(26px + env(safe-area-inset-bottom));
  max-width: 480px; margin: 0 auto;
}
.login-card h2 { margin: 0 0 4px; font-size: 20px; }

/* ---------- avisos ---------- */
.faixa-demo {
  margin: 8px 16px 0; padding: 8px 12px; border-radius: var(--r-md);
  background: var(--alerta-bg); color: var(--alerta);
  font-size: 12px; font-weight: 600; text-align: center;
}
.erro-msg {
  margin-top: 12px; padding: 10px 12px; border-radius: var(--r-md);
  background: var(--erro-bg); color: var(--erro); font-size: 13px; display: none;
}
.erro-msg.ver { display: block; }

.vazio { text-align: center; color: var(--n400); padding: 28px 16px; font-size: 13.5px; }
.vazio .ic { font-size: 34px; display: block; margin-bottom: 8px; }

/* =====================================================================
   DIREÇÃO A — capa grafite + cartão que invade (13/09/2026)
   =====================================================================
   Aprovada pelo Marcelo no canvas de telas, depois de três correções:
   sem caixa cinza atrás dos botões do topo (sobre o grafite ela vira
   sombra e engole o traço), a capa e o cartão na MESMA caixa (o cartão
   sobe com margem negativa; irmão de um contêiner com `overflow:hidden`
   ele era aparado e comia metade da primeira fileira de ícones) e o
   degrau reduzido de 74/58 para 52/40.

   O QUE ESTA DIREÇÃO RESOLVE. O app de referência do mercado é todo
   branco: azulejo claro flutuando em fundo claro, busca em pílula,
   bolha redonda no topo. Bonito, e igual a todos. O que temos e ele não
   tem é o GRAFITE do sistema de mesa. Trazê-lo para o topo do celular
   faz três coisas de uma vez: a tela deixa de parecer com a dele já na
   primeira olhada, o app passa a parecer da mesma família do desktop, e
   o conteúdo ganha um degrau que organiza a leitura sem uma linha
   divisória sequer.

   TROCAS DELIBERADAS: busca em RETÂNGULO de 6px, não pílula; botão do
   topo em quadrado, não bolha; a marca é ARQUIVO (marca.svg), que é o
   que o kit VIVIUM manda — wordmark não se redigita.
   ==================================================================== */

/* ---------- ícone de traço (Lucide, servido de `icones.svg`) ----------
   Classe `.ico` e não `.ic`: `.ic` já existe nesta folha para os SPANS
   de emoji (`.nav a .ic`, `.vazio .ic`) e herdaria `font-size` em cima
   de um <svg>, que ignora, enquanto o `stroke` daqui não chegaria neles.
   Dois desenhos diferentes não dividem o mesmo nome. */
.ico { flex: none; vertical-align: middle; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- a capa ---------- */
.capa {
  background: linear-gradient(180deg, var(--color-graphite-800), var(--color-graphite-900));
  color: var(--color-sobre-grafite);
  /* 52px de barriga: é o que o cartão invade depois. Mexer aqui sem
     mexer no `-40px` do cartão desfaz o degrau. */
  padding: 14px 16px 52px;
}
.capa-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.capa-marca { display: flex; align-items: center; gap: 9px; min-width: 0; }
.capa-marca .nome {
  font-family: var(--fonte-titulo); font-size: 15px; font-weight: 700;
  letter-spacing: .08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* SEM CAIXA ATRÁS DO ÍCONE (Marcelo, 13/09): o alvo de 44px continua —
   é o polegar que manda —, o que sai é o retângulo, não a área. */
.capa-bt {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; background: none; padding: 0; position: relative; cursor: pointer;
  color: var(--color-sobre-grafite); text-decoration: none;
}
.capa-bt .badge {
  position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 20px; background: var(--brand); color: var(--sobre-brand);
  font-size: 10.5px; font-weight: 700; line-height: 1; display: grid; place-items: center;
}
.capa-ola { margin: 18px 0 0; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.capa-sub { font-size: 13.5px; color: var(--color-sobre-grafite-fraco); margin-top: 4px; }

/* ---------- o cartão que invade ---------- */
.cartao-sobe {
  margin: -40px 16px 0; padding: 16px 15px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--r-lg); box-shadow: var(--sombra-alta);
  position: relative; z-index: 1;
}

/* ---------- grade de azulejos ---------- */
.grade2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 0; }
.azulejo {
  position: relative; min-height: 88px; padding: 12px 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none; color: var(--color-text); border-radius: var(--r-md);
}
.azulejo:active { background: var(--color-surface-soft); }
.azulejo .ic-bg { width: 44px; height: 44px; border-radius: var(--r-md); display: grid; place-items: center; }
.azulejo .rot { font-size: 12.5px; font-weight: 600; text-align: center; line-height: 1.25; }
/* "Em breve" não é botão desligado: continua recebendo o toque para
   DIZER que ainda não abriu. Botão que não reage é app travado. */
.azulejo.breve { opacity: .5; }
.azulejo .cadeado {
  position: absolute; top: 6px; right: 6px; width: 20px; height: 20px;
  border-radius: var(--r-sm); background: var(--color-warn-soft);
  color: var(--color-warn); display: grid; place-items: center;
}

/* tinta do azulejo — a cor diz a FAMÍLIA da função, não a marca */
.tin-brand  { background: var(--color-brand-soft);   color: var(--brand); }
.tin-warn   { background: var(--color-warn-soft);    color: var(--color-warn); }
.tin-ok     { background: var(--color-ok-soft);      color: var(--color-ok); }
.tin-info   { background: var(--color-info-soft);    color: var(--color-info); }
.tin-neutro { background: var(--color-surface-soft); color: var(--color-graphite-600); }

/* ---------- faixa de pendência, logo abaixo do cartão ----------
   Borda superior grossa na cor do assunto: é o mesmo vocabulário do
   cartão de indicador do sistema de mesa. */
.aviso-topo {
  margin: 14px 16px 0; padding: 13px 15px;
  display: flex; align-items: center; gap: 11px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-warn); border-radius: var(--r-md);
  box-shadow: var(--sombra-cartao); text-decoration: none; color: var(--color-text);
}
.aviso-topo .corpo { flex: 1; min-width: 0; }
.aviso-topo .titulo { font-size: 15px; font-weight: 600; }
.aviso-topo .detalhe { font-size: 12.5px; color: var(--color-text-muted); margin-top: 2px; }

/* ---------- a barra inferior, com ícone de traço ---------- */
.nav a .ico { margin-bottom: 2px; }