/* sistemo — painel da loja de apps
   Marca: teal #1D9E75 · tinta #101413 · papel #F7F7F5
   A variável --acento é injetada por app (config['app']['cor']),
   então o mesmo CSS serve barbearia, odonto, gastos, etc. */

:root{
  --tinta:#101413; --papel:#F7F7F5; --branco:#FFFFFF;
  --acento:#1D9E75; --acento-escuro:#0F6E56; --acento-claro:#E1F5EE;
  --fumaca:#6B706E; --linha:#E4E5E2; --alerta:#A32D2D;
  --r:8px; --sombra:0 1px 2px rgba(16,20,19,.05), 0 8px 24px rgba(16,20,19,.05);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--papel); color:var(--tinta);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
a{color:var(--tinta)}
h1,h2,h3{font-family:'Space Grotesk','Inter',sans-serif; font-weight:500; letter-spacing:-.02em; margin:0}
h1{font-size:24px} h2{font-size:18px} h3{font-size:15px}

/* ---- topo ---- */
.topo{background:var(--tinta); color:var(--papel)}
.topo-in{max-width:1080px; margin:0 auto; padding:12px 20px; display:flex; align-items:center; gap:20px}
.marca{display:flex; align-items:center; gap:9px; text-decoration:none}
.marca .nome{font-family:'Space Grotesk','Inter',sans-serif; font-size:20px; font-weight:700; letter-spacing:-.04em}
.marca .modulo{font-size:13px; color:#9AA09D; padding-left:9px; border-left:1px solid #363B39}
.menu{display:flex; gap:16px; margin-left:auto; flex-wrap:wrap}
.menu a{color:#A8AEAB; text-decoration:none; font-size:14px; padding:4px 0; border-bottom:2px solid transparent}
.menu a:hover{color:var(--branco)}
.menu a.on{color:var(--branco); border-bottom-color:var(--acento)}
.regua{height:3px; background:var(--acento)}

.conteudo{max-width:1080px; margin:0 auto; padding:26px 20px 60px}
.cabeca{display:flex; align-items:baseline; gap:14px; margin-bottom:18px; flex-wrap:wrap}
.cabeca .sub{color:var(--fumaca); font-size:13px}

/* ---- blocos ---- */
.cartao{background:var(--branco); border:1px solid var(--linha); border-radius:12px; box-shadow:var(--sombra)}
.cartao-pad{padding:20px}
.grade{display:grid; gap:16px}
@media(min-width:760px){ .grade-3{grid-template-columns:repeat(3,1fr)} .grade-2{grid-template-columns:1fr 1fr} }

.numero{font-family:'Space Grotesk','Inter',sans-serif; font-size:30px; font-weight:500; letter-spacing:-.02em; line-height:1.2}
.rotulo{font-size:12px; color:var(--fumaca)}

/* ---- tabela ---- */
table{width:100%; border-collapse:collapse; background:var(--branco)}
th{font-size:12px; color:var(--fumaca); font-weight:500; text-align:left; padding:10px 14px; border-bottom:1px solid var(--linha)}
td{padding:12px 14px; border-bottom:1px solid var(--linha)}
tr:last-child td{border-bottom:0}
.vazio{padding:34px 20px; text-align:center; color:var(--fumaca)}

/* ---- formulário ---- */
label{display:block; font-size:13px; color:var(--fumaca); margin:0 0 5px}
input,select,textarea{
  width:100%; padding:10px 12px; font:inherit; color:var(--tinta);
  background:var(--branco); border:1px solid var(--linha); border-radius:var(--r);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--acento); outline-offset:1px; border-color:var(--acento)}
.campo{margin-bottom:14px}
.linha-campos{display:grid; gap:14px}
@media(min-width:620px){ .linha-campos{grid-template-columns:1fr 1fr} }

.botao{
  display:inline-block; padding:10px 20px; border:0; border-radius:var(--r); cursor:pointer;
  background:var(--tinta); color:var(--papel); font:inherit; font-weight:500; text-decoration:none;
}
.botao:hover{background:#25302D}
.botao-acento{background:var(--acento); color:#04241B}
.botao-acento:hover{background:var(--acento-escuro); color:#FFFFFF}
.botao-fino{background:transparent; color:var(--tinta); border:1px solid var(--linha); padding:7px 14px; font-size:13px}
.botao-fino:hover{background:var(--papel); border-color:var(--tinta)}

/* ---- etiquetas de status ---- */
.tag{display:inline-block; padding:3px 10px; border-radius:99px; font-size:12px}
.tag-agendado{background:#EDEEEC; color:var(--fumaca)}
.tag-atendido{background:var(--acento-claro); color:#085041}
.tag-faltou{background:#FCEBEB; color:var(--alerta)}
.tag-cancelado{background:#EDEEEC; color:#9AA09D; text-decoration:line-through}

/* ---- avisos ---- */
.aviso{padding:12px 16px; border-radius:var(--r); margin-bottom:18px; border:1px solid}
.aviso-ok{background:var(--acento-claro); border-color:#9FE1CB; color:#085041}
.aviso-erro{background:#FCEBEB; border-color:#F7C1C1; color:var(--alerta)}
.faixa-teste{background:var(--acento-claro); border-bottom:1px solid #9FE1CB; padding:9px 20px; font-size:13px; text-align:center; color:#085041}
.faixa-teste a{color:#085041}

/* ---- entrada (login/cadastro) ---- */
.portao{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px}
.portao-caixa{width:100%; max-width:400px}
.portao-marca{display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:22px}
.portao-marca .nome{font-family:'Space Grotesk','Inter',sans-serif; font-size:34px; font-weight:700; letter-spacing:-.045em}
.portao-marca .tag-linha{color:var(--fumaca); font-size:14px}
.rodape-portao{text-align:center; margin-top:16px; font-size:13px; color:var(--fumaca)}

@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* ============================================================
   Vitrine da loja
   ============================================================ */

.hero{padding:52px 0 40px; max-width:640px}
.hero h1{font-family:'Space Grotesk','Inter',sans-serif; font-size:38px; font-weight:700;
  letter-spacing:-.035em; line-height:1.12; margin:0 0 16px}
.hero-sub{font-size:17px; line-height:1.55; color:var(--fumaca); margin:0 0 26px}
.hero-acoes{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px}
.hero-nota{font-size:13px; color:var(--fumaca); margin:0}
@media(max-width:620px){ .hero{padding:34px 0 28px} .hero h1{font-size:30px} .hero-sub{font-size:16px} }

.secao{padding:36px 0; border-top:1px solid var(--linha)}
.secao .cabeca{margin-bottom:20px}

.app-card{display:flex; flex-direction:column}
.app-card h3{font-size:17px}
.app-desc{font-size:14px; color:var(--fumaca); line-height:1.5; margin:6px 0 14px; flex:1}
.app-preco{font-family:'Space Grotesk','Inter',sans-serif; font-size:23px; font-weight:500;
  letter-spacing:-.02em; margin:0 0 14px}
.app-preco span{font-size:14px; font-weight:400; color:var(--fumaca); letter-spacing:0}
.app-breve{opacity:.62}
.app-card .botao{align-self:flex-start}
.app-card .botao + .botao{margin-top:8px}

.passo{width:30px; height:30px; border-radius:99px; background:var(--acento-claro); color:#085041;
  display:flex; align-items:center; justify-content:center; font-weight:600; font-size:14px; margin-bottom:12px}

.chamada{text-align:center; padding:44px 0 24px}
.chamada h2{font-size:24px; margin-bottom:8px}
.chamada p{color:var(--fumaca); margin:0 0 20px}

.rodape{border-top:1px solid var(--linha); background:var(--branco); margin-top:40px}
.rodape-in{max-width:1080px; margin:0 auto; padding:20px; display:flex; gap:16px;
  flex-wrap:wrap; font-size:13px; color:var(--fumaca)}
.rodape-in a{margin-left:auto; color:var(--fumaca)}