/* Portal KZA — tokens visuais num só lugar (trocar aqui quando chegar a identidade oficial). */

@font-face { font-family: "Bricolage"; src: url("/fontes/bricolage-grotesque-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Bricolage"; src: url("/fontes/bricolage-grotesque-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Atkinson"; src: url("/fontes/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson"; src: url("/fontes/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --veludo: #1A1220;        /* fundo */
  --camarim: #261B2F;       /* superfícies */
  --camarim-alto: #33263D;  /* superfícies destacadas, bordas */
  --texto: #F3EDF7;
  --texto-suave: #B9ABC4;
  --ambar: #FFB547;         /* luz de palco: o único destaque */
  --ambar-escuro: #C98419;
  --ultravioleta: #A68BFF;  /* foco e links */
  --papel: #F4E9D4;         /* a comanda */
  --papel-tinta: #2B1F12;
  --perigo: #FF7A7A;
  --ok: #8FE3B0;

  --titulo: "Bricolage", "Arial Narrow", system-ui, sans-serif;
  --corpo: "Atkinson", system-ui, -apple-system, "Segoe UI", sans-serif;
  --raio: 14px;
  --raio-pequeno: 8px;
  --largura: 760px;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--veludo); color: var(--texto); }
body {
  font-family: var(--corpo);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}
a { color: var(--ultravioleta); }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--ultravioleta); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

.carregando { padding: 40px 20px; color: var(--texto-suave); }

/* Estrutura ---------------------------------------------------------------- */

.pagina { max-width: var(--largura); margin: 0 auto; padding: 16px 16px calc(32px + env(safe-area-inset-bottom)); }

.topo {
  display: flex; align-items: center; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  max-width: var(--largura); margin: 0 auto;
}
.marca { font-family: var(--titulo); font-weight: 800; font-size: 20px; letter-spacing: -0.02em; color: var(--texto); text-decoration: none; }
.marca span { color: var(--ambar); }
.topo .espaco { flex: 1; }
.topo .discreto { font-size: 15px; white-space: nowrap; padding: 8px 6px; }
.marca { white-space: nowrap; }
.topo small { white-space: nowrap; }
@media (max-width: 520px) { .topo .so-largo { display: none; } }

h1, h2, h3 { font-family: var(--titulo); line-height: 1.1; letter-spacing: -0.02em; margin: 0; }
h1 { font-weight: 800; font-size: clamp(34px, 9vw, 52px); }
h2 { font-weight: 600; font-size: 21px; margin-bottom: 12px; }

.saudacao { margin: 18px 0 6px; }
.subtitulo { color: var(--texto-suave); margin: 0 0 22px; }

/* Botões e campos ------------------------------------------------------------ */

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px; border-radius: 999px; border: 0;
  background: var(--ambar); color: #241605; font-weight: 700; cursor: pointer; text-decoration: none;
}
.botao:hover { background: #FFC56E; }
.botao:disabled { opacity: .55; cursor: default; }
.botao.secundario { background: transparent; color: var(--texto); border: 1.5px solid var(--camarim-alto); }
.botao.secundario:hover { border-color: var(--texto-suave); }
.botao.perigo { background: transparent; color: var(--perigo); border: 1.5px solid #5a2f3a; }
.discreto { background: none; border: 0; color: var(--texto-suave); cursor: pointer; padding: 8px; text-decoration: none; }
.discreto:hover { color: var(--texto); }

.campo { display: grid; gap: 6px; margin-bottom: 16px; }
.campo label { font-weight: 700; font-size: 15px; }
.campo input, .campo select, .campo textarea {
  min-height: 50px; padding: 12px 14px; border-radius: var(--raio-pequeno);
  background: var(--camarim); border: 1.5px solid var(--camarim-alto); color: var(--texto);
}
.campo input:focus, .campo select:focus { border-color: var(--ultravioleta); outline: none; }
.ajuda { font-size: 14px; color: var(--texto-suave); }
.erro { color: var(--perigo); margin: 0 0 14px; }
.aviso { background: var(--camarim); border-left: 4px solid var(--ambar); padding: 14px 16px; border-radius: var(--raio-pequeno); margin: 0 0 16px; }

/* Entrada e cadastro --------------------------------------------------------- */

.porta { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.porta-caixa { width: 100%; max-width: 400px; }
.porta h1 { font-size: clamp(44px, 14vw, 72px); margin-bottom: 4px; }
.porta h1 span { color: var(--ambar); }
.porta .subtitulo { margin-bottom: 28px; }
.porta .botao { width: 100%; }
.porta .rodape { margin-top: 18px; text-align: center; color: var(--texto-suave); }

/* A comanda: pedido para a IA da casa --------------------------------------- */

.comanda {
  position: relative;
  background: var(--papel); color: var(--papel-tinta);
  border-radius: 4px var(--raio) var(--raio) 4px;
  padding: 16px 16px 14px 26px;
  margin: 6px 0 30px;
  box-shadow: 0 14px 40px -18px rgba(255, 181, 71, .45);
}
/* serrilhado de destacar, à esquerda */
.comanda::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 12px;
  background: radial-gradient(circle at 0 10px, var(--veludo) 5px, transparent 5.5px) 0 0 / 12px 20px repeat-y;
}
.comanda::after {
  content: ""; position: absolute; left: 14px; top: 12px; bottom: 12px;
  border-left: 2px dashed rgba(43, 31, 18, .25);
}
.comanda label { display: block; font-family: var(--titulo); font-weight: 800; font-size: 22px; margin-bottom: 8px; }
.comanda textarea {
  width: 100%; min-height: 76px; resize: vertical; border: 0; background: transparent;
  color: var(--papel-tinta); font-size: 18px; line-height: 1.45; padding: 0;
}
.comanda textarea::placeholder { color: rgba(43, 31, 18, .55); }
.comanda textarea:focus { outline: none; }
.comanda .linha { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.comanda .botao { background: var(--papel-tinta); color: var(--papel); }
.comanda .botao:hover { background: #47341f; }
.modelos { display: inline-flex; border: 1.5px solid rgba(43, 31, 18, .25); border-radius: 999px; padding: 3px; }
.modelos button {
  border: 0; background: transparent; color: var(--papel-tinta); padding: 6px 12px; border-radius: 999px; cursor: pointer; font-size: 15px;
}
.modelos button[aria-pressed="true"] { background: var(--papel-tinta); color: var(--papel); }

/* Apps ----------------------------------------------------------------------- */

.apps { list-style: none; padding: 0; margin: 0 0 30px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.app {
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 104px;
  padding: 14px; border-radius: var(--raio); background: var(--camarim); color: var(--texto); text-decoration: none;
  border: 1.5px solid transparent;
}
a.app:hover { border-color: var(--ambar); }
.app strong { font-family: var(--titulo); font-weight: 600; font-size: 19px; }
.app small { color: var(--texto-suave); font-size: 14px; }
.app.em-breve { opacity: .6; }

/* Listas --------------------------------------------------------------------- */

.lista { list-style: none; padding: 0; margin: 0 0 30px; }
.lista li + li { border-top: 1px solid var(--camarim-alto); }
.lista a { display: flex; justify-content: space-between; gap: 12px; padding: 13px 2px; color: var(--texto); text-decoration: none; }
.lista a:hover strong { color: var(--ambar); }
.lista strong { font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista small { color: var(--texto-suave); white-space: nowrap; }
.vazio { color: var(--texto-suave); margin: 0 0 30px; }

/* Uso do mês ------------------------------------------------------------------ */

.uso { margin: 0 0 30px; }
.uso .barra { height: 10px; background: var(--camarim-alto); border-radius: 999px; overflow: hidden; margin: 8px 0 6px; }
.uso .barra i { display: block; height: 100%; background: var(--ambar); border-radius: 999px; }
.uso .barra i.alto { background: var(--perigo); }
.uso p { margin: 0; color: var(--texto-suave); font-size: 15px; }

/* Chat ------------------------------------------------------------------------ */

.chat { display: flex; flex-direction: column; min-height: 100dvh; }
.chat .topo { width: 100%; position: sticky; top: 0; background: var(--veludo); z-index: 2; border-bottom: 1px solid var(--camarim); }
.chat .titulo-conversa { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.falas { flex: 1; width: 100%; max-width: var(--largura); margin: 0 auto; padding: 18px 16px 8px; }
.fala { margin: 0 0 18px; }
.fala.voce { background: var(--camarim); border-radius: var(--raio) var(--raio) 4px var(--raio); padding: 12px 14px; margin-left: 12%; white-space: pre-wrap; }
.fala.ia { padding: 0 2px; }
.fala.ia p { margin: 0 0 10px; }
.fala.ia ul, .fala.ia ol { margin: 0 0 10px; padding-left: 22px; }
.fala.ia code { background: var(--camarim); padding: 1px 6px; border-radius: 4px; font-size: .92em; }
.fala.ia pre { background: var(--camarim); padding: 12px; border-radius: var(--raio-pequeno); overflow-x: auto; }
.fala.ia h3, .fala.ia h4 { font-family: var(--titulo); font-weight: 600; margin: 14px 0 6px; }
.consulta {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 6px 10px 0; padding: 5px 12px; border-radius: 999px;
  background: transparent; border: 1px solid var(--camarim-alto); color: var(--texto-suave); font-size: 14px;
}
.consulta::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ambar); }
.pensando { color: var(--texto-suave); }
.pensando::after { content: "…"; animation: pisca 1.2s steps(4) infinite; }
@keyframes pisca { 0% { opacity: .2 } 50% { opacity: 1 } 100% { opacity: .2 } }

.compositor {
  position: sticky; bottom: 0; background: linear-gradient(to top, var(--veludo) 75%, transparent);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
}
.compositor form { max-width: var(--largura); margin: 0 auto; display: flex; gap: 10px; align-items: flex-end; }
.compositor textarea {
  flex: 1; min-height: 52px; max-height: 40vh; resize: none; padding: 13px 16px; border-radius: 26px;
  background: var(--camarim); border: 1.5px solid var(--camarim-alto); color: var(--texto);
}
.compositor textarea:focus { outline: none; border-color: var(--ultravioleta); }
.compositor .botao { min-height: 52px; }

/* Aprovações e segurança --------------------------------------------------------- */

.cartao { background: var(--camarim); border-radius: var(--raio); padding: 16px; margin-bottom: 14px; }
.cartao h3 { font-size: 19px; font-weight: 600; margin-bottom: 2px; }
.cartao .email { color: var(--texto-suave); margin: 0 0 14px; word-break: break-all; }
.escolha { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.escolha label {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  border: 1.5px solid var(--camarim-alto); cursor: pointer;
}
.escolha label:has(input:checked) { border-color: var(--ambar); color: var(--ambar); }
.escolha input { accent-color: var(--ambar); }
.acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.qr { background: #fff; padding: 12px; border-radius: var(--raio-pequeno); width: 220px; max-width: 100%; }
.qr svg { width: 100%; height: auto; display: block; }
.segredo { font-family: ui-monospace, monospace; word-break: break-all; color: var(--texto-suave); }

@media (min-width: 700px) {
  .pagina { padding-top: 28px; }
  .apps { grid-template-columns: repeat(4, 1fr); }
}