/* v5 =====================================================================
   Condomínio — folha de estilo
   Mobile-first (referência 360px). Uma família tipográfica, escala fixa.
   O terracota (--acao) é reservado para o que exige ação de alguém.
   ===================================================================== */
:root{
  /* Paleta derivada da logo do Solar Bezerra de Menezes:
     copa (verdes), "SOLAR" (ocre/terracota), caligrafia (marrom), fundo (creme). */
  --verde-escuro:#4F6420;    /* topo, navegação, títulos */
  --verde:#6E8A26;           /* interativo */
  --verde-suave:#EEF2DF;     /* fundos de apoio */
  --acao:#C2621C;            /* pendências: usar com parcimônia */
  --acao-fundo:#FBEDE0;
  --acao-texto:#8F460F;
  --ok:#4F6420;
  --ok-fundo:#EEF2DF;
  --erro:#A33323;
  --erro-fundo:#FAEBE8;
  --tela:#F5F2EA;
  --papel:#FFFFFF;
  --tinta:#33291B;
  --tinta-media:#6B6152;
  --linha:#E4DFD2;

  /* Compatibilidade com nomes antigos usados no restante da folha */
  --azul-fundo:var(--verde-escuro);
  --azul:var(--verde);
  --azul-suave:var(--verde-suave);

  /* Cor por módulo — só para o que o morador usa no dia a dia.
     Administração fica em cinza de propósito: cor é para achar rápido, não decoração. */
  --m-coral:#A8501A;  --m-coral-bg:#FDEAD9;
  --m-azul:#185FA5;   --m-azul-bg:#DDEBF7;
  --m-verde:#3B6D11;  --m-verde-bg:#E4F0DB;
  --m-roxo:#534AB7;   --m-roxo-bg:#EEE9F7;
  --m-rosa:#993556;   --m-rosa-bg:#FBE6EC;
  --m-teal:#0F6E56;   --m-teal-bg:#E6F3EE;
  --m-ambar:#854F0B;  --m-ambar-bg:#FAEEDA;
  --m-cinza:#5F5E5A;  --m-cinza-bg:#F1EFE8;

  --verde-profundo:#2C3F14;

  --r-g:16px; --r-m:12px; --r-p:8px;
  --sombra:0 1px 2px rgba(51,41,27,.07), 0 4px 12px rgba(51,41,27,.06);
  --topo-h:64px; --nav-h:64px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:16px; line-height:1.5;
  background:var(--tela); color:var(--tinta);
}
a{color:var(--azul);text-decoration:none}
h1,h2,h3{margin:0 0 10px;line-height:1.25;letter-spacing:-.01em;color:var(--azul-fundo)}
h2{font-size:1.25rem} h3{font-size:1.0625rem;font-weight:650}
p{margin:0 0 8px}
:focus-visible{outline:3px solid var(--azul);outline-offset:2px;border-radius:4px}

.ico{width:22px;height:22px;display:block}
.ico-g{width:26px;height:26px;display:block}

/* ---------- Topo ---------- */
.topo{
  position:sticky;top:0;z-index:30;background:var(--azul-fundo);color:#fff;
  padding-top:env(safe-area-inset-top);
}
.topo-linha{display:flex;align-items:center;justify-content:space-between;
  gap:12px;min-height:var(--topo-h);padding:8px 16px}
.topo-condominio{font-size:.75rem;color:#C7D69B;line-height:1.2}
.topo-titulo{font-size:1.125rem;font-weight:650;letter-spacing:-.01em}
.topo-acoes{display:flex;align-items:center;gap:4px}
.icone-botao{position:relative;display:grid;place-items:center;width:42px;height:42px;
  border:0;background:none;color:#fff;border-radius:50%;cursor:pointer;padding:0}
.icone-botao:active{background:rgba(255,255,255,.14)}
.icone-botao.escuro{color:var(--azul-fundo)}
.badge{position:absolute;top:6px;right:6px;min-width:17px;height:17px;padding:0 4px;
  background:var(--acao);color:#FFF;border-radius:9px;font-size:.65rem;font-weight:700;
  display:grid;place-items:center;border:2px solid var(--azul-fundo)}

/* ---------- Conteúdo ---------- */
.conteudo{padding:16px;padding-bottom:calc(var(--nav-h) + 32px);max-width:640px;margin:0 auto}
.saudacao{color:var(--tinta-media);font-size:.9375rem;margin:0 0 14px}

/* ---------- Navegação inferior ---------- */
.navbar{
  position:fixed;bottom:0;left:0;right:0;z-index:30;display:flex;
  background:var(--papel);border-top:1px solid var(--linha);
  padding-bottom:env(safe-area-inset-bottom);
}
.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;min-height:var(--nav-h);border:0;background:none;cursor:pointer;
  color:var(--tinta-media);font-size:.6875rem;font-weight:600;font-family:inherit}
.nav-item span{line-height:1}
.nav-item.ativo{color:var(--azul-fundo)}
.nav-item.ativo .ico{transform:translateY(-1px)}
.nav-item:active{background:var(--tela)}

/* ---------- Cartões ---------- */
.cartao{background:var(--papel);border-radius:var(--r-g);padding:16px;margin-bottom:12px;
  box-shadow:var(--sombra)}
.cartao.centro{text-align:center}
.cartao.vazio{background:none;box-shadow:none;border:1px dashed var(--linha);
  color:var(--tinta-media);text-align:center}
.cartao.aviso{border-left:4px solid var(--acao)}
details.cartao summary{cursor:pointer;font-weight:650;color:var(--azul-fundo);
  list-style:none;display:flex;align-items:center;gap:8px}
details.cartao summary::-webkit-details-marker{display:none}
details.cartao summary::before{content:"";width:20px;height:20px;flex:none;border-radius:50%;
  background:var(--azul-suave) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E8A26' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/13px no-repeat}
details[open].cartao summary::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E8A26' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E")}
details.cartao[open] summary{margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--linha)}

/* ---------- Indicadores ---------- */
.indicadores{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.ind{background:var(--papel);border-radius:var(--r-m);padding:16px 14px;box-shadow:var(--sombra)}
.ind-num{display:block;font-size:2rem;font-weight:700;line-height:1;color:var(--azul-fundo);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ind-rot{display:block;margin-top:6px;font-size:.75rem;color:var(--tinta-media);font-weight:500}
.ind.pendente .ind-num{color:var(--acao)}
.ind.pendente{box-shadow:var(--sombra),inset 0 0 0 1.5px var(--acao)}

/* ---------- Atalhos em grade ---------- */
.atalhos-grade{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.atalho{display:flex;align-items:center;gap:10px;background:var(--papel);
  border-radius:var(--r-m);padding:16px 14px;box-shadow:var(--sombra);
  color:var(--azul-fundo);font-weight:600;font-size:.9375rem}
.atalho .ico,.atalho .ico-g{color:var(--azul);flex:none}
.atalho:active{background:var(--azul-suave)}

/* ---------- Menu em grade ---------- */
.menu-mais{position:fixed;inset:0;z-index:40}
.menu-fundo{position:absolute;inset:0;background:rgba(16,49,79,.5)}
.menu-painel{position:absolute;bottom:0;left:0;right:0;background:var(--papel);
  border-radius:20px 20px 0 0;padding:8px 16px calc(20px + env(safe-area-inset-bottom));
  max-height:82vh;overflow-y:auto;animation:sobe .2s ease-out}
@keyframes sobe{from{transform:translateY(14px)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.menu-painel{animation:none}}
.menu-cabecalho{display:flex;align-items:center;justify-content:space-between;
  padding:8px 0 14px;position:sticky;top:0;background:var(--papel)}
.menu-cabecalho h2{margin:0}
.menu-grade{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.menu-item{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;text-align:center;padding:16px 6px;border-radius:var(--r-m);
  background:var(--tela);color:var(--tinta);font-size:.75rem;font-weight:600;line-height:1.2;
  min-height:92px}
.menu-item .ico-g{color:var(--azul)}
.menu-item:active{background:var(--azul-suave)}
.menu-item.destaque{background:var(--azul-fundo);color:#fff}
.menu-item.destaque .ico-g{color:#fff}

/* ---------- Formulários ---------- */
label{display:block;margin-bottom:14px;font-size:.8125rem;font-weight:600;color:var(--tinta-media)}
input,select,textarea{width:100%;padding:12px 13px;margin-top:5px;font-size:16px;
  font-family:inherit;color:var(--tinta);background:var(--papel);
  border:1.5px solid var(--linha);border-radius:var(--r-p)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--azul);
  box-shadow:0 0 0 3px rgba(110,138,38,.2)}
textarea{resize:vertical;line-height:1.5}
.linha{display:flex;gap:10px}
.linha label{flex:1}
.linha .curto{max-width:112px}
.checkbox{display:flex;align-items:center;gap:9px;color:var(--tinta);font-weight:500}
.checkbox input{width:20px;height:20px;margin:0;flex:none;accent-color:var(--azul)}
select.mini,input.mini{padding:7px 9px;font-size:.8125rem;width:auto;margin-top:0}

.botao{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:12px 18px;border:1.5px solid var(--linha);border-radius:var(--r-p);
  background:var(--papel);color:var(--azul);font-size:.9375rem;font-weight:650;
  font-family:inherit;cursor:pointer;text-align:center}
.botao:active{background:var(--tela)}
.botao-primario{background:var(--azul-fundo);border-color:var(--azul-fundo);color:#fff;width:100%}
.botao-primario:active{background:#3D4E18}
.botao-perigo{color:var(--erro);border-color:#E7C6BF;background:var(--papel)}
.botao-mini{padding:7px 12px;font-size:.8125rem;width:auto}
.botao[disabled]{opacity:.45;cursor:not-allowed}
.inline{display:inline}
.atalhos{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- Mensagens ---------- */
.flash{padding:13px 15px;border-radius:var(--r-m);margin-bottom:14px;font-size:.9375rem;
  font-weight:500;border-left:4px solid}
.flash-sucesso{background:var(--ok-fundo);color:#3D4E18;border-color:var(--ok)}
.flash-erro{background:var(--erro-fundo);color:#8A2A1C;border-color:var(--erro)}
.flash-aviso{background:var(--acao-fundo);color:var(--acao-texto);border-color:var(--acao)}

/* ---------- Listas ---------- */
.ajuda{color:var(--tinta-media);font-size:.8125rem;margin:3px 0}
.link-secundario{display:block;text-align:center;margin-top:12px;font-size:.875rem;font-weight:600}
.lista-simples{list-style:none;margin:0;padding:0}
.lista-simples li{padding:12px 0;border-bottom:1px solid var(--linha)}
.lista-simples li:last-child{border-bottom:none}
.lista-simples li:first-child{padding-top:0}
.lista-simples .ajuda{display:block;margin-top:3px}
.lista-cartoes{list-style:none;margin:0;padding:0}
.item-morador{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;
  padding:14px 0;border-bottom:1px solid var(--linha);flex-wrap:wrap}
.item-morador:last-child{border-bottom:none}
.item-morador .acoes{display:flex;gap:6px;flex-wrap:wrap;align-items:center}

/* ---------- Etiquetas de estado ---------- */
.tag{display:inline-block;font-size:.6875rem;font-weight:650;padding:3px 9px;border-radius:20px;
  background:var(--tela);color:var(--tinta-media);margin:3px 3px 0 0;letter-spacing:.01em}
.tag-ativo,.tag-resolvida,.tag-confirmada,.tag-concluida{background:var(--ok-fundo);color:var(--ok)}
.tag-convidado,.tag-aberta,.tag-pendente,.tag-importante{background:var(--acao-fundo);color:var(--acao-texto)}
.tag-urgente{background:var(--erro-fundo);color:var(--erro)}
.tag-em_andamento,.tag-em_analise,.tag-aberta2{background:var(--azul-suave);color:var(--azul)}
.tag-cancelada,.tag-recusada,.tag-rascunho,.tag-sem,.tag-encerrada{background:var(--tela);color:var(--tinta-media)}

/* ---------- Conteúdo diverso ---------- */
.texto{line-height:1.6;margin:12px 0;max-width:66ch}
.miniatura{max-width:100%;border-radius:var(--r-m);margin-top:10px;display:block}
.timeline{list-style:none;margin:0;padding:0 0 0 18px;border-left:2px solid var(--linha)}
.timeline li{margin-bottom:16px;position:relative}
.timeline li::before{content:"";position:absolute;left:-24px;top:6px;width:9px;height:9px;
  border-radius:50%;background:var(--azul);border:2px solid var(--papel)}
.timeline li.interno::before{background:var(--acao)}
.timeline li.interno{background:var(--acao-fundo);border-radius:var(--r-p);padding:8px 10px;margin-left:-10px}

.barra-linha{margin-bottom:14px}
.barra{height:9px;background:var(--tela);border-radius:9px;overflow:hidden;margin-top:5px}
.barra-preenchida{height:100%;background:var(--azul);border-radius:9px}

.tabela-rolagem{overflow-x:auto;background:var(--papel);border-radius:var(--r-g);
  margin-bottom:12px;box-shadow:var(--sombra)}
.tabela{width:100%;border-collapse:collapse;font-size:.8125rem;min-width:520px}
.tabela th,.tabela td{padding:11px 12px;text-align:left;border-bottom:1px solid var(--linha)}
.tabela th{background:var(--tela);color:var(--tinta-media);font-weight:650;
  position:sticky;top:0}
.tabela tr:last-child td{border-bottom:none}
.linha-erro td{background:var(--erro-fundo)}

.passos{padding-left:22px;margin:0}
.passos li{margin-bottom:10px}

/* ---------- QR e portaria ---------- */
.qr{display:flex;justify-content:center;margin:16px 0}
.qr svg{max-width:100%;height:auto;border-radius:var(--r-p)}
.codigo-grande{font-size:2rem;font-weight:700;letter-spacing:.14em;color:var(--azul-fundo);
  margin:8px 0;font-variant-numeric:tabular-nums}
.painel-liberado{border-left:5px solid var(--ok);background:var(--ok-fundo)}
.painel-liberado h3{color:var(--ok)}
.painel-negado{border-left:5px solid var(--erro);background:var(--erro-fundo)}
.painel-negado h3{color:var(--erro)}

/* ---------- Login ---------- */
.tela-login{max-width:400px;margin:0 auto;padding-top:40px}
.marca{text-align:center;margin-bottom:24px}
.marca-logo{max-width:160px;height:auto;display:block;margin:0 auto}
.marca h1{font-size:1.125rem;margin:16px 0 0;color:var(--verde-escuro);font-weight:600}
.erro-codigo{font-size:3.5rem;margin:0;color:var(--azul-fundo);letter-spacing:-.03em}
.filtro{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.filtro label{flex:1;margin-bottom:0;min-width:120px}

@media (min-width:560px){
  .indicadores,.atalhos-grade{grid-template-columns:repeat(4,1fr)}
  .menu-grade{grid-template-columns:repeat(4,1fr)}
}

/* ---------- Blocos de edição dentro de listas ---------- */
.editor{margin-top:10px}
.editor>summary{cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  font-size:.8125rem;font-weight:650;color:var(--verde);list-style:none;
  padding:5px 11px;border:1.5px solid var(--linha);border-radius:var(--r-p);background:var(--papel)}
.editor>summary::-webkit-details-marker{display:none}
.editor[open]>summary{margin-bottom:14px;background:var(--verde-suave);border-color:var(--verde-suave)}
.editor[open]{background:var(--tela);border-radius:var(--r-m);padding:12px;margin-bottom:4px}
.editor form+form{margin-top:12px;padding-top:12px;border-top:1px solid var(--linha)}
.acoes-linha{display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  margin-top:12px;padding-top:12px;border-top:1px solid var(--linha)}

/* ---------- Checklist da portaria ---------- */
.item-check{padding:14px 16px}
.item-check.problema{border-left:4px solid var(--erro)}
.opcoes-check{display:flex;gap:8px;margin:12px 0;flex-wrap:wrap}
.opcao-check{flex:1;min-width:96px;margin:0;display:flex;align-items:center;justify-content:center;
  gap:6px;padding:11px 8px;border:1.5px solid var(--linha);border-radius:var(--r-p);
  background:var(--papel);font-size:.8125rem;font-weight:650;color:var(--tinta-media);
  cursor:pointer;text-align:center}
.opcao-check input{width:16px;height:16px;margin:0;flex:none;accent-color:var(--verde)}
.opcao-check.marcada{border-color:var(--verde);background:var(--verde-suave);color:var(--verde-escuro)}
.opcao-check:has(input[value="problema"]:checked){border-color:var(--erro);
  background:var(--erro-fundo);color:var(--erro)}

/* ---------- Prioridade dos chamados ---------- */
.prio{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:6px;
  font-size:.8125rem;font-weight:800;color:#fff;margin-right:6px;vertical-align:middle}
.prio-A{background:var(--erro)}
.prio-B{background:var(--acao)}
.prio-C{background:var(--tinta-media)}
.legenda-prio{display:flex;flex-wrap:wrap;gap:12px;font-size:.75rem;color:var(--tinta-media)}
.legenda-prio span{display:flex;align-items:center}
.botao-ativo{background:var(--verde-escuro);color:#fff;border-color:var(--verde-escuro)}

/* ---------- Itens com foto (achados, encomendas) ---------- */
.achado{display:flex;gap:12px;align-items:flex-start}
.achado-foto{width:64px;height:64px;object-fit:cover;border-radius:var(--r-p);flex:none;
  border:1px solid var(--linha)}
.achado-info{flex:1;min-width:0}
.achado-info .codigo-grande{font-size:1.4rem;margin:2px 0}


/* ===================== Direção visual: Blocos ===================== */

/* Cabeçalho alto, com a árvore da logo em marca d'água */
.topo{background:var(--verde-profundo);position:relative;overflow:hidden}
.topo::after{content:"";position:absolute;right:-28px;top:-18px;width:170px;height:170px;
  background:url("/icons/logo.png") no-repeat center/contain;opacity:.07;pointer-events:none}
.topo-linha{position:relative;z-index:1;align-items:flex-start;padding:14px 16px 30px}
.topo-condominio{color:#9FBF6B;font-size:.75rem}
.topo-titulo{font-size:1.375rem;font-weight:600;letter-spacing:-.02em;margin-top:2px}
.badge{border-color:var(--verde-profundo)}

/* O conteúdo sobe por cima do cabeçalho */
.conteudo{margin-top:-18px;position:relative;z-index:2}

/* Indicadores agrupados num cartão só */
.indicadores{background:var(--papel);border-radius:14px;box-shadow:var(--sombra);
  display:flex;padding:4px;gap:0;margin-bottom:14px}
.ind{flex:1;background:none;box-shadow:none;padding:12px 8px;text-align:center;
  border-radius:0;border-right:1px solid var(--linha)}
.ind:last-child{border-right:none}
.ind.pendente{box-shadow:none}
.ind.pendente .ind-num{color:var(--acao)}

/* Atalhos e menu: ícone em bloco colorido */
.atalhos-grade{grid-template-columns:repeat(3,1fr);gap:8px}
.atalho{flex-direction:column;gap:7px;text-align:center;padding:14px 6px;
  font-size:.75rem;font-weight:600;line-height:1.2;color:var(--tinta)}
.chip{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex:none;
  background:var(--m-cinza-bg);color:var(--m-cinza)}
.chip .ico,.chip .ico-g{width:22px;height:22px}
.menu-item{background:none;padding:12px 4px;min-height:auto;gap:7px}
.menu-item:active{background:none}
.menu-item:active .chip{transform:scale(.94)}
.menu-item.destaque{background:none;color:var(--tinta)}
.menu-item.destaque .chip{background:var(--verde-profundo);color:#fff}
.menu-grade{gap:6px}

/* Paleta por módulo */
.c-coral{background:var(--m-coral-bg);color:var(--m-coral)}
.c-azul{background:var(--m-azul-bg);color:var(--m-azul)}
.c-verde{background:var(--m-verde-bg);color:var(--m-verde)}
.c-roxo{background:var(--m-roxo-bg);color:var(--m-roxo)}
.c-rosa{background:var(--m-rosa-bg);color:var(--m-rosa)}
.c-teal{background:var(--m-teal-bg);color:var(--m-teal)}
.c-ambar{background:var(--m-ambar-bg);color:var(--m-ambar)}
.c-cinza{background:var(--m-cinza-bg);color:var(--m-cinza)}

/* Telas vazias com a árvore ao fundo */
.cartao.vazio{background:url("/icons/logo.png") no-repeat center/70px;padding:30px 16px}
.cartao.vazio p{background:rgba(255,255,255,.82);display:inline-block;padding:4px 10px;border-radius:6px}

@media (min-width:560px){
  .atalhos-grade{grid-template-columns:repeat(6,1fr)}
}

/* ---------- Liberação de áreas ---------- */
.modulo-linha{padding:14px 0;border-bottom:1px solid var(--linha)}
.modulo-linha:last-child{border-bottom:none}
.modulo-cab{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.modulo-cab .checkbox{margin:0}
.papeis-linha{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.papel-chip{display:inline-flex;align-items:center;gap:5px;margin:0;padding:5px 10px;
  border:1.5px solid var(--linha);border-radius:20px;font-size:.75rem;font-weight:600;
  color:var(--tinta-media);background:var(--papel);cursor:pointer}
.papel-chip input{width:14px;height:14px;margin:0;accent-color:var(--verde)}
.papel-chip:has(input:checked){border-color:var(--verde);background:var(--verde-suave);color:var(--verde-escuro)}

/* ---------- Link de convite ---------- */
.convite-link{background:var(--acao-fundo);border-radius:var(--r-m);padding:12px;margin-top:10px}
.campo-link{font-size:.75rem;font-family:var(--font-mono,monospace);margin-bottom:8px;
  background:var(--papel);word-break:break-all}