/* =====================================================================
   Agenda para barbearia – demonstração
   Estilos compartilhados (site do cliente + painel do barbeiro)
   ===================================================================== */

@font-face {
  font-family: "Inter";
  src: url("inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --tinta: #171310;
  --tinta-2: #2a2420;
  --tinta-3: #3b332d;
  --papel: #f7f3ed;
  --papel-2: #efe8de;
  --cartao: #ffffff;
  --linha: #e6ddd1;
  --linha-forte: #d6cbbd;
  --texto: #221c18;
  --suave: #6b6057;
  --suave-2: #8d8178;
  --latao: #c8894a;
  --latao-claro: #e2ab70;
  --latao-escuro: #8f5a26;
  --latao-fundo: #f6e9da;
  --ok: #1d7a4a;
  --ok-fundo: #e2f2e8;
  --aviso: #a6501c;
  --aviso-fundo: #fbeadf;
  --perigo: #b3261e;
  --perigo-fundo: #fbe9e7;
  --whats: #14803c;
  --whats-escuro: #0f6a31;
  --raio: 18px;
  --raio-m: 14px;
  --raio-p: 10px;
  --sombra: 0 1px 2px rgba(23, 19, 16, .05), 0 8px 28px rgba(23, 19, 16, .08);
  --sombra-forte: 0 18px 50px rgba(23, 19, 16, .22);
  --faixa-h: 30px;
  --topo-h: 60px;
  --fonte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  padding-top: var(--faixa-h);
  font-family: var(--fonte);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--texto);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { margin: 0; line-height: 1.15; letter-spacing: -.02em; }
p { margin: 0 0 .75em; }
p:last-child { margin-bottom: 0; }
:focus-visible { outline: 3px solid var(--latao); outline-offset: 2px; border-radius: 6px; }
.ic { width: 1.25em; height: 1.25em; flex: none; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.container { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.container--estreito { max-width: 640px; }
@media (min-width: 700px) { .container { padding: 0 24px; } }

/* ---------- Faixa "Demonstração" ---------- */
.faixa-demo {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  height: var(--faixa-h);
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 0 12px;
  background: repeating-linear-gradient(-45deg, #1d1814 0 12px, #231d18 12px 24px);
  color: #e9c79f;
  font-size: .75rem; font-weight: 600; letter-spacing: .02em;
  border-bottom: 1px solid #3a2f26;
}
.faixa-demo__txt { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.faixa-demo__ponto { width: 6px; height: 6px; border-radius: 50%; background: var(--latao-claro); box-shadow: 0 0 0 3px rgba(226, 171, 112, .2); }
.faixa-demo__reset {
  border: 0; background: none; padding: 4px 2px; color: #b9a48e;
  font-size: .72rem; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap;
}
.faixa-demo__reset:hover { color: #fff; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px;
  border-radius: var(--raio-m); border: 1px solid transparent;
  font-weight: 650; font-size: 1rem; letter-spacing: -.01em; line-height: 1.1;
  text-decoration: none; text-align: center;
  transition: transform .12s ease, background-color .15s ease, box-shadow .15s ease, border-color .15s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.btn:active { transform: scale(.98); }
.btn[disabled], .btn.is-desligado { opacity: .45; pointer-events: none; }
.btn-escuro { background: var(--tinta); color: #fff; }
.btn-escuro:hover { background: var(--tinta-3); }
.btn-latao { background: var(--latao); color: var(--tinta); box-shadow: 0 8px 22px rgba(200, 137, 74, .35); }
.btn-latao:hover { background: var(--latao-claro); }
.btn-whats { background: var(--whats); color: #fff; }
.btn-whats:hover { background: var(--whats-escuro); }
.btn-claro { background: var(--cartao); color: var(--texto); border-color: var(--linha-forte); }
.btn-claro:hover { border-color: var(--tinta); }
.btn-perigo { background: var(--perigo); color: #fff; }
.btn-perigo:hover { background: #8f1d17; }
.btn-texto { min-height: 40px; padding: 0 10px; background: none; color: var(--texto); font-weight: 600; }
.btn-texto:hover { background: var(--papel-2); }
.btn-grande { min-height: 58px; font-size: 1.08rem; padding: 0 28px; border-radius: 16px; }
.btn-p { min-height: 38px; padding: 0 12px; font-size: .88rem; border-radius: 11px; gap: 6px; }
.btn-bloco { width: 100%; }
.btn-ic { width: 42px; min-height: 42px; padding: 0; border-radius: 12px; }

/* ---------- Topo (cliente) ---------- */
.topo {
  position: sticky; top: var(--faixa-h); z-index: 50;
  height: var(--topo-h);
  background: rgba(247, 243, 237, .88);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid rgba(214, 203, 189, .6);
}
.topo__in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.marca__selo {
  width: 36px; height: 36px; flex: none; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--tinta); color: var(--latao-claro);
  font-size: .82rem; font-weight: 800; letter-spacing: .02em;
  box-shadow: inset 0 0 0 1.5px rgba(226, 171, 112, .35);
}
.marca__nome { font-weight: 750; font-size: 1.02rem; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.marca__sub { display: block; font-size: .72rem; color: var(--suave); font-weight: 500; letter-spacing: 0; }
.topo__nav { display: flex; align-items: center; gap: 4px; }
.topo__link {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 10px; border-radius: 11px;
  font-size: .9rem; font-weight: 600; text-decoration: none; color: var(--texto);
  background: none; border: 0;
}
.topo__link:hover, .topo__link.is-ativo { background: var(--papel-2); }
.topo__link .ic { width: 20px; height: 20px; }
@media (max-width: 559px) { .topo__link .rot { display: none; } .topo__link { padding: 0 9px; } }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--latao-fundo); color: var(--latao-escuro); font-weight: 750; font-size: .8rem;
}

/* ---------- Capa (página da barbearia) ---------- */
.capa {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(560px, 74svh);
  display: flex; align-items: flex-end;
  color: #fff; background: var(--tinta);
}
.capa__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.capa::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(23, 19, 16, .15) 0%, rgba(23, 19, 16, .35) 40%, rgba(23, 19, 16, .92) 100%),
    linear-gradient(90deg, rgba(23, 19, 16, .55), rgba(23, 19, 16, 0) 70%);
}
.capa__conteudo { padding-top: 64px; padding-bottom: 36px; }
.capa h1 { font-size: clamp(2.3rem, 10vw, 4.2rem); font-weight: 800; letter-spacing: -.035em; line-height: 1; margin: 14px 0 10px; }
.capa__frase { font-size: clamp(1.05rem, 3.6vw, 1.3rem); color: rgba(255, 255, 255, .86); max-width: 30ch; margin-bottom: 26px; }
.capa__nota { margin-top: 12px; font-size: .86rem; color: rgba(255, 255, 255, .7); }
.capa .btn-grande { width: 100%; max-width: 360px; }
.selo-status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-size: .8rem; font-weight: 600;
}
.selo-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #d0a77e; }
.selo-status.is-aberto::before { background: #4ade80; box-shadow: 0 0 0 4px rgba(74, 222, 128, .2); }

/* ---------- Seções e cartões ---------- */
.secao { padding: 28px 0; }
.secao--colada { padding-top: 0; }
.secao__titulo { font-size: 1.35rem; font-weight: 750; margin-bottom: 14px; }
.secao__sub { color: var(--suave); margin: -8px 0 16px; font-size: .95rem; }
.cartao {
  background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio);
  box-shadow: var(--sombra);
}
.cartao--pad { padding: 20px; }
.grade-info { display: grid; gap: 14px; margin-top: -26px; position: relative; z-index: 2; }
@media (min-width: 760px) {
  .grade-info { grid-template-columns: 1fr 1.25fr; margin-top: -40px; align-items: start; }
  .capa__conteudo { padding-bottom: 76px; }
}
.info { padding: 18px 20px; }
.info__cab { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-weight: 700; }
.info__cab .ic { color: var(--latao-escuro); width: 22px; height: 22px; }
.info__end { font-size: 1.02rem; font-weight: 600; margin-bottom: 2px; }
.info__suave { color: var(--suave); font-size: .92rem; }
.horas { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.horas li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 10px; border-radius: 9px; font-size: .94rem; }
.horas li.is-hoje { background: var(--latao-fundo); font-weight: 700; }
.horas .folga { color: var(--suave-2); }
.horas__nota { margin-top: 10px; font-size: .86rem; color: var(--suave); display: flex; gap: 6px; align-items: center; }
.horas__nota .ic { width: 16px; height: 16px; }

/* Lista de serviços */
.servicos { display: grid; gap: 10px; }
@media (min-width: 760px) { .servicos--2 { grid-template-columns: 1fr 1fr; } }
.servico {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 16px 16px 16px 18px;
  background: var(--cartao); border: 1.5px solid var(--linha); border-radius: var(--raio-m);
  text-decoration: none; text-align: left;
  transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.servico:hover { border-color: var(--linha-forte); box-shadow: var(--sombra); }
.servico:active { transform: scale(.99); }
.servico.is-sel { border-color: var(--tinta); box-shadow: 0 0 0 3px rgba(23, 19, 16, .08); }
.servico__ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--papel-2); color: var(--tinta-3); flex: none; }
.servico__ic .ic { width: 22px; height: 22px; }
.servico__txt { flex: 1; min-width: 0; }
.servico__nome { display: block; font-weight: 700; font-size: 1.04rem; }
.servico__dur { display: inline-flex; align-items: center; gap: 5px; color: var(--suave); font-size: .88rem; }
.servico__dur .ic { width: 15px; height: 15px; }
.servico__preco { font-weight: 750; font-size: 1.06rem; white-space: nowrap; }
.servico__seta { color: var(--suave-2); }

/* Atalhos */
.atalhos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.atalho {
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px; border-radius: var(--raio-m);
  background: var(--cartao); border: 1px solid var(--linha);
  text-decoration: none;
}
.atalho:hover { border-color: var(--linha-forte); }
.atalho .ic { width: 26px; height: 26px; color: var(--latao-escuro); }
.atalho strong { font-size: .98rem; }
.atalho span { font-size: .84rem; color: var(--suave); }

/* ---------- Fluxo de agendamento ---------- */
.fluxo { padding-top: 18px; padding-bottom: 120px; }
.passos { display: flex; gap: 6px; margin: 4px 0 18px; }
.passo { flex: 1; }
.passo__barra { height: 4px; border-radius: 4px; background: var(--linha); }
.passo.is-feito .passo__barra, .passo.is-atual .passo__barra { background: var(--tinta); }
.passo__rot { margin-top: 6px; font-size: .75rem; font-weight: 600; color: var(--suave-2); }
.passo.is-atual .passo__rot { color: var(--texto); }
.fluxo__titulo { font-size: 1.6rem; font-weight: 800; letter-spacing: -.03em; margin-bottom: 6px; }
.fluxo__sub { color: var(--suave); margin-bottom: 18px; }
.voltar { display: inline-flex; align-items: center; gap: 4px; margin-left: -8px; margin-bottom: 4px; color: var(--suave); font-weight: 600; font-size: .92rem; text-decoration: none; padding: 6px 8px; border-radius: 9px; }
.voltar:hover { background: var(--papel-2); color: var(--texto); }
.voltar .ic { width: 18px; height: 18px; }

.escolhido {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 18px;
  background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio-m);
}
.escolhido__txt { flex: 1; min-width: 0; }
.escolhido__txt strong { display: block; }
.escolhido__txt span { color: var(--suave); font-size: .88rem; }
.escolhido a { font-size: .88rem; font-weight: 650; color: var(--latao-escuro); }

.aviso-remarcar {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; margin-bottom: 16px; border-radius: var(--raio-m);
  background: var(--latao-fundo); color: #5d3a17; font-size: .92rem;
}
.aviso-remarcar .ic { margin-top: 1px; }

/* Dias */
.dias {
  display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity;
  margin: 0 -16px 18px; padding: 2px 16px 10px;
  scrollbar-width: thin;
}
.dias::-webkit-scrollbar { height: 6px; }
.dias::-webkit-scrollbar-thumb { background: var(--linha-forte); border-radius: 6px; }
@media (min-width: 700px) { .dias { margin: 0 0 18px; padding: 2px 0 10px; flex-wrap: wrap; overflow: visible; } }
.dia {
  flex: none; scroll-snap-align: start;
  width: 68px; padding: 10px 4px 9px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: var(--cartao); border: 1.5px solid var(--linha); border-radius: 14px;
  transition: border-color .15s ease, background-color .15s ease;
}
.dia:hover { border-color: var(--linha-forte); }
.dia__sem { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); }
.dia__num { font-size: 1.35rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
.dia__mes { font-size: .72rem; color: var(--suave); }
.dia__sit { margin-top: 4px; font-size: .66rem; font-weight: 650; color: var(--ok); white-space: nowrap; }
.dia.is-fechado { background: transparent; border-style: dashed; }
.dia.is-fechado .dia__num, .dia.is-fechado .dia__sem, .dia.is-fechado .dia__mes { color: var(--suave-2); }
.dia.is-fechado .dia__sit { color: var(--suave-2); }
.dia.is-sel { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.dia.is-sel .dia__sem, .dia.is-sel .dia__mes { color: rgba(255, 255, 255, .7); }
.dia.is-sel .dia__sit { color: var(--latao-claro); }

/* Horários */
.turno { margin-bottom: 18px; }
.turno__rot { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); margin-bottom: 8px; }
.horarios { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (min-width: 560px) { .horarios { grid-template-columns: repeat(6, 1fr); } }
.hora {
  min-height: 46px; border-radius: 12px;
  background: var(--cartao); border: 1.5px solid var(--linha);
  font-weight: 650; font-size: .98rem; font-variant-numeric: tabular-nums;
  transition: border-color .12s ease, background-color .12s ease;
}
.hora:hover { border-color: var(--tinta); }
.hora.is-sel { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.vazio {
  text-align: center; padding: 34px 20px; color: var(--suave);
  background: var(--cartao); border: 1px dashed var(--linha-forte); border-radius: var(--raio);
}
.vazio .ic { width: 34px; height: 34px; margin: 0 auto 10px; color: var(--suave-2); }
.vazio strong { display: block; color: var(--texto); margin-bottom: 4px; font-size: 1.04rem; }
.vazio .btn { margin-top: 16px; }

/* Barra fixa de continuar */
.barra-acao {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--linha);
  transform: translateY(110%); transition: transform .25s ease;
}
.barra-acao.is-visivel { transform: none; }
.barra-acao__in { max-width: 640px; margin: 0 auto; display: flex; align-items: center; gap: 12px; }
.barra-acao__txt { flex: 1; min-width: 0; font-size: .9rem; line-height: 1.3; }
.barra-acao__txt strong { display: block; font-size: 1rem; }
.barra-acao__txt span { color: var(--suave); }

/* Resumo / confirmação */
.resumo { padding: 4px 0; }
.resumo__linha { display: flex; gap: 14px; align-items: center; padding: 14px 20px; }
.resumo__linha + .resumo__linha { border-top: 1px solid var(--linha); }
.resumo__linha .ic { color: var(--latao-escuro); width: 22px; height: 22px; }
.resumo__linha small { display: block; color: var(--suave); font-size: .8rem; }
.resumo__linha strong { font-size: 1.02rem; }
.resumo__valor { margin-left: auto; font-weight: 750; }

.campo { display: grid; gap: 6px; margin-bottom: 14px; }
.campo label, .campo__rot { font-weight: 650; font-size: .92rem; }
.campo__ajuda { font-size: .84rem; color: var(--suave); }
.entrada {
  width: 100%; min-height: 50px; padding: 0 14px;
  border: 1.5px solid var(--linha-forte); border-radius: 12px; background: #fff;
  font-size: 1rem;
}
.entrada:focus { outline: none; border-color: var(--tinta); box-shadow: 0 0 0 3px rgba(23, 19, 16, .1); }
.entrada.is-erro { border-color: var(--perigo); box-shadow: 0 0 0 3px rgba(179, 38, 30, .1); }
.erro-txt { color: var(--perigo); font-size: .86rem; font-weight: 600; }
select.entrada { appearance: none; -webkit-appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23221c18' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.entrada-p { min-height: 42px; padding: 0 10px; border-radius: 10px; font-size: .95rem; }

.nota {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--raio-m);
  background: var(--papel-2); color: var(--tinta-3); font-size: .9rem;
}
.nota .ic { margin-top: 1px; color: var(--latao-escuro); }
.nota--azul { background: #eaf0fb; color: #23375e; }
.nota--azul .ic { color: #3a5ea8; }

/* Login simulado (Google) */
.login { text-align: center; padding: 30px 22px; }
.login__ic { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 20px; display: grid; place-items: center; background: var(--tinta); color: var(--latao-claro); }
.login__ic .ic { width: 30px; height: 30px; }
.login h1 { font-size: 1.5rem; font-weight: 800; margin-bottom: 8px; }
.login p { color: var(--suave); }
.btn-google {
  width: 100%; max-width: 340px; margin: 18px auto 0;
  background: #fff; color: #1f1f1f; border: 1px solid #c9c4be; font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}
.btn-google:hover { background: #f8f6f3; border-color: #a9a39c; }
.g-logo { width: 20px; height: 20px; }

/* Confirmado */
.feito { text-align: center; padding: 26px 0 8px; }
.feito__ic {
  width: 76px; height: 76px; margin: 0 auto 16px; border-radius: 50%;
  display: grid; place-items: center; background: var(--ok); color: #fff;
  box-shadow: 0 0 0 10px var(--ok-fundo);
  animation: pulo .5s cubic-bezier(.2, 1.4, .4, 1) both;
}
.feito__ic .ic { width: 38px; height: 38px; stroke-width: 2.4; }
@keyframes pulo { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.feito h1 { font-size: 1.7rem; font-weight: 800; margin-bottom: 6px; }
.feito p { color: var(--suave); }
.pilha { display: grid; gap: 10px; }
.email-nota { display: flex; gap: 8px; align-items: center; justify-content: center; color: var(--suave); font-size: .9rem; margin: 16px 0 6px; text-align: center; }
.email-nota .ic { width: 18px; height: 18px; flex: none; }
.email-nota span { text-align: left; }
.mini-nota { font-size: .78rem; color: var(--suave-2); text-align: center; }

/* Meus agendamentos */
.meu {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 16px;
}
.meu__data {
  width: 62px; border-radius: 14px; padding: 8px 0; text-align: center;
  background: var(--tinta); color: #fff; align-self: start;
}
.meu__data small { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--latao-claro); font-weight: 700; }
.meu__data strong { display: block; font-size: 1.5rem; line-height: 1.1; font-weight: 800; }
.meu__data span { font-size: .72rem; color: rgba(255, 255, 255, .7); }
.meu__info strong { font-size: 1.06rem; display: block; }
.meu__info span { color: var(--suave); font-size: .92rem; }
.meu__acoes { grid-column: 1 / -1; display: flex; gap: 8px; }
.meu__acoes .btn { flex: 1; }
.meu__prazo { grid-column: 1 / -1; font-size: .86rem; color: var(--aviso); background: var(--aviso-fundo); padding: 10px 12px; border-radius: 10px; }
.meu__prazo a { font-weight: 700; color: inherit; }

/* Cartão fidelidade */
.fid {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 22px 20px 20px; border-radius: 22px; color: #fff;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(200, 137, 74, .35), transparent 55%),
    linear-gradient(160deg, #2a221c, #15110e 70%);
  box-shadow: var(--sombra-forte);
}
.fid::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .07;
  background-image: repeating-linear-gradient(45deg, #fff 0 1px, transparent 1px 10px);
}
.fid__topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 18px; }
.fid__marca { font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; }
.fid__marca small { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--latao-claro); margin-top: 2px; }
.fid__dono { text-align: right; font-size: .78rem; color: rgba(255, 255, 255, .65); }
.fid__dono strong { display: block; color: #fff; font-size: .92rem; }
.carimbos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.carimbo {
  aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px dashed rgba(255, 255, 255, .28);
  color: rgba(255, 255, 255, .3); font-size: .78rem; font-weight: 700;
}
.carimbo.is-feito {
  border: 0; color: var(--tinta);
  background: radial-gradient(circle at 35% 30%, #f0c391, var(--latao) 60%, #a66b31);
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .12), 0 3px 10px rgba(0, 0, 0, .35);
  transform: rotate(-8deg);
}
.carimbo.is-feito .ic { width: 52%; height: 52%; stroke-width: 2.2; }
.carimbo.is-premio { border-color: var(--latao-claro); color: var(--latao-claro); }
.carimbo.is-premio .ic { width: 50%; height: 50%; }
.fid__texto { margin-top: 18px; font-size: 1.05rem; font-weight: 650; }
.fid__texto strong { color: var(--latao-claro); }
.barra-prog { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .14); margin-top: 10px; overflow: hidden; }
.barra-prog i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--latao), var(--latao-claro)); }

/* ---------- Rodapé ---------- */
.rodape { padding: 26px 0 30px; color: var(--suave); font-size: .86rem; border-top: 1px solid var(--linha); margin-top: 24px; }
.rodape__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
.rodape a { color: var(--texto); font-weight: 650; text-underline-offset: 3px; }
.rodape__links { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.rodape button { border: 0; background: none; padding: 0; color: var(--suave); text-decoration: underline; text-underline-offset: 3px; font-size: inherit; }
.rodape button:hover { color: var(--texto); }

/* ---------- Avisos (toast) ---------- */
.toasts {
  position: fixed; z-index: 120; left: 12px; right: 12px; top: calc(var(--faixa-h) + 10px);
  display: grid; gap: 8px; pointer-events: none; justify-items: center;
}
@media (min-width: 700px) { .toasts { left: auto; right: 18px; top: calc(var(--faixa-h) + 16px); justify-items: end; } }
.toast {
  pointer-events: auto; width: 100%; max-width: 400px;
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 12px 13px 14px; border-radius: 16px;
  background: var(--tinta); color: #fff; box-shadow: var(--sombra-forte);
  opacity: 0; transform: translateY(-10px) scale(.98); transition: opacity .25s ease, transform .25s ease;
}
.toast.is-visivel { opacity: 1; transform: none; }
.toast__ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--ok); }
.toast--aviso .toast__ic { background: var(--latao); color: var(--tinta); }
.toast--erro .toast__ic { background: var(--perigo); }
.toast__ic .ic { width: 18px; height: 18px; }
.toast__txt { flex: 1; min-width: 0; font-size: .9rem; line-height: 1.35; }
.toast__txt strong { display: block; font-size: .95rem; margin-bottom: 1px; }
.toast__txt span { color: rgba(255, 255, 255, .82); }
.toast__txt small { display: block; margin-top: 6px; font-size: .76rem; color: var(--latao-claro); }
.toast__fechar { border: 0; background: none; color: rgba(255, 255, 255, .55); padding: 2px; border-radius: 8px; }
.toast__fechar:hover { color: #fff; }
.toast__fechar .ic { width: 18px; height: 18px; }

/* ---------- Janela (modal) ---------- */
.janela-fundo {
  position: fixed; inset: 0; z-index: 110;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(23, 19, 16, .5); opacity: 0; transition: opacity .2s ease;
}
.janela-fundo.is-visivel { opacity: 1; }
.janela {
  position: relative; width: 100%; max-width: 460px; max-height: calc(100svh - 50px); overflow-y: auto;
  padding: 26px 20px calc(18px + env(safe-area-inset-bottom));
  background: #fff; border-radius: 24px 24px 0 0;
  transform: translateY(30px); transition: transform .25s ease;
}
.janela-fundo.is-visivel .janela { transform: none; }
@media (min-width: 600px) {
  .janela-fundo { align-items: center; padding: 20px; }
  .janela { border-radius: 24px; padding: 28px 26px 22px; }
}
.janela__fechar { position: absolute; top: 12px; right: 12px; border: 0; background: var(--papel); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--suave); }
.janela__fechar:hover { color: var(--texto); }
.janela__fechar .ic { width: 18px; height: 18px; }
.janela__ic { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; margin-bottom: 14px; background: var(--papel-2); color: var(--tinta-3); }
.janela__ic--perigo { background: var(--perigo-fundo); color: var(--perigo); }
.janela__ic--ok { background: var(--ok-fundo); color: var(--ok); }
.janela__ic .ic { width: 24px; height: 24px; }
.janela__titulo { font-size: 1.28rem; font-weight: 800; margin-bottom: 8px; padding-right: 36px; }
.janela__corpo { color: var(--suave); font-size: .96rem; }
.janela__corpo strong { color: var(--texto); }
.janela__acoes { display: flex; flex-direction: column-reverse; gap: 8px; margin-top: 20px; }
@media (min-width: 600px) { .janela__acoes { flex-direction: row; justify-content: flex-end; } .janela__acoes .btn { flex: 1; } }

/* ---------- Etiquetas ---------- */
.etq { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; font-size: .74rem; font-weight: 700; background: var(--papel-2); color: var(--tinta-3); white-space: nowrap; }
.etq--ok { background: var(--ok-fundo); color: var(--ok); }
.etq--aviso { background: var(--aviso-fundo); color: var(--aviso); }
.etq--perigo { background: var(--perigo-fundo); color: var(--perigo); }
.etq--latao { background: var(--latao-fundo); color: var(--latao-escuro); }
.etq .ic { width: 13px; height: 13px; }

/* =====================================================================
   PAINEL DO BARBEIRO
   ===================================================================== */
.painel { background: #f3efe9; }
.p-topo {
  position: sticky; top: var(--faixa-h); z-index: 50; height: var(--topo-h);
  background: var(--tinta); color: #fff;
}
.p-topo .container { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; max-width: 1240px; }
.p-topo .marca__sub { color: rgba(255, 255, 255, .55); }
.p-topo .marca__selo { background: var(--latao); color: var(--tinta); box-shadow: none; }
.p-topo__acoes { display: flex; gap: 4px; align-items: center; }
.p-topo__acoes .topo__link { color: rgba(255, 255, 255, .85); }
.p-topo__acoes .topo__link:hover { background: rgba(255, 255, 255, .1); }

.p-corpo { max-width: 1240px; margin: 0 auto; padding: 18px 16px 110px; }
@media (min-width: 960px) {
  .p-corpo { display: grid; grid-template-columns: 220px 1fr; gap: 28px; padding: 24px 24px 50px; align-items: start; }
}
.p-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  background: #fff; border-top: 1px solid var(--linha);
  box-shadow: 0 -6px 24px rgba(23, 19, 16, .06);
}
.p-nav a {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 2px; border-radius: 12px;
  font-size: .7rem; font-weight: 650; color: var(--suave); text-decoration: none;
}
.p-nav a .ic { width: 23px; height: 23px; }
.p-nav a.is-ativo { color: var(--tinta); }
.p-nav a.is-ativo .ic { color: var(--latao-escuro); }
.p-nav__bolha { position: relative; }
.p-nav__bolha b { position: absolute; top: -4px; right: -8px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--latao); color: var(--tinta); font-size: .64rem; display: grid; place-items: center; }
@media (min-width: 960px) {
  .p-nav {
    position: sticky; top: calc(var(--faixa-h) + var(--topo-h) + 24px);
    display: flex; flex-direction: column; gap: 4px; padding: 10px;
    border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra);
  }
  .p-nav a { flex-direction: row; gap: 12px; padding: 12px 14px; font-size: .95rem; }
  .p-nav a.is-ativo { background: var(--papel); }
  .p-nav__bolha b { top: -6px; }
}
.p-cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.p-cab h1 { font-size: 1.55rem; font-weight: 800; letter-spacing: -.03em; }
.p-cab p { color: var(--suave); margin: 4px 0 0; font-size: .94rem; }

/* Controles da agenda */
.ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.navdata { display: flex; align-items: center; gap: 4px; background: #fff; border: 1px solid var(--linha); border-radius: 14px; padding: 4px; }
.navdata button { border: 0; background: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; }
.navdata button:hover { background: var(--papel); }
.navdata__rot { min-width: 150px; text-align: center; font-weight: 700; font-size: .95rem; padding: 0 4px; }
.navdata__rot small { display: block; font-size: .74rem; color: var(--suave); font-weight: 600; }
.alterna { display: inline-flex; background: var(--papel-2); border-radius: 12px; padding: 3px; }
.alterna button { border: 0; background: none; padding: 8px 14px; border-radius: 9px; font-weight: 650; font-size: .9rem; color: var(--suave); }
.alterna button.is-ativo { background: #fff; color: var(--texto); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.ctrl__hoje { margin-left: auto; }

.numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.numero { background: #fff; border: 1px solid var(--linha); border-radius: 14px; padding: 10px 12px; }
.numero small { display: block; font-size: .74rem; color: var(--suave); font-weight: 600; }
.numero strong { font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; }

/* Item da agenda */
.ags { display: grid; gap: 8px; }
.ag {
  display: grid; grid-template-columns: 64px 1fr; gap: 4px 12px;
  padding: 14px; background: #fff; border: 1px solid var(--linha); border-radius: 16px;
  border-left: 4px solid var(--tinta);
}
.ag--atendido { border-left-color: var(--ok); }
.ag--faltou { border-left-color: var(--aviso); }
.ag--cancelado { border-left-color: var(--linha-forte); opacity: .62; }
.ag--cancelado .ag__nome { text-decoration: line-through; }
.ag__hora { font-weight: 800; font-size: 1.08rem; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ag__hora small { display: block; font-size: .78rem; font-weight: 600; color: var(--suave); }
.ag__info { min-width: 0; }
.ag__nome { font-weight: 700; font-size: 1.02rem; }
.ag__det { color: var(--suave); font-size: .9rem; }
.ag__etqs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.ag__acoes { grid-column: 1 / -1; display: flex; gap: 6px; margin-top: 8px; }
.ag__acoes .btn { flex: 1; }
.ag__acoes .btn-ic { flex: none; }
@media (min-width: 700px) {
  .ag { grid-template-columns: 70px 1fr auto; align-items: center; }
  .ag__acoes { grid-column: auto; margin-top: 0; }
  .ag__acoes .btn { flex: none; }
}
.btn-ok { background: var(--ok-fundo); color: var(--ok); }
.btn-ok:hover { background: #cfe9d9; }
.btn-falta { background: var(--aviso-fundo); color: var(--aviso); }
.btn-falta:hover { background: #f6dcc9; }
.linha-almoco {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px;
  color: var(--suave); font-size: .84rem; font-weight: 600;
}
.linha-almoco::before, .linha-almoco::after { content: ""; flex: 1; border-top: 1px dashed var(--linha-forte); }

/* Semana */
.semana { display: grid; gap: 10px; }
@media (min-width: 1100px) { .semana { grid-template-columns: repeat(7, 1fr); gap: 8px; } }
.sdia { background: #fff; border: 1px solid var(--linha); border-radius: 16px; overflow: hidden; }
.sdia.is-hoje { border-color: var(--tinta); box-shadow: 0 0 0 1px var(--tinta); }
.sdia__cab {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; border: 0; background: var(--papel); text-align: left;
}
.sdia__cab:hover { background: var(--papel-2); }
.sdia__cab strong { font-size: .95rem; }
.sdia__cab span { font-size: .78rem; color: var(--suave); font-weight: 600; }
.sdia__lista { list-style: none; margin: 0; padding: 6px; display: grid; gap: 2px; }
.sdia__lista li { display: flex; gap: 8px; padding: 6px; border-radius: 8px; font-size: .84rem; }
.sdia__lista li b { font-variant-numeric: tabular-nums; flex: none; }
.sdia__lista li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sdia__lista li.is-atendido b { color: var(--ok); }
.sdia__lista li.is-faltou b { color: var(--aviso); }
.sdia__vazio { padding: 12px; font-size: .84rem; color: var(--suave-2); }
@media (min-width: 1100px) { .sdia__lista li { flex-direction: column; gap: 0; } .sdia__cab { flex-direction: column; align-items: flex-start; gap: 0; } }

/* Lembrar amanhã */
.lembrar { display: flex; align-items: center; gap: 12px; padding: 14px; background: #fff; border: 1px solid var(--linha); border-radius: 16px; }
.lembrar .avatar { width: 42px; height: 42px; font-size: .9rem; }
.lembrar__txt { flex: 1; min-width: 0; }
.lembrar__txt strong { display: block; }
.lembrar__txt span { color: var(--suave); font-size: .9rem; }
.lembrar .btn { flex: none; }
@media (max-width: 420px) { .lembrar { flex-wrap: wrap; } .lembrar .btn { width: 100%; } }

/* Formulários do painel */
.bloco { padding: 18px; margin-bottom: 14px; }
.bloco__titulo { font-size: 1.08rem; font-weight: 750; margin-bottom: 4px; }
.bloco__sub { font-size: .88rem; color: var(--suave); margin-bottom: 14px; }
.lin { display: grid; gap: 10px; }
@media (min-width: 640px) { .lin--2 { grid-template-columns: 1fr 1fr; } .lin--3 { grid-template-columns: repeat(3, 1fr); } }
.sv-linha {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 12px; border: 1px solid var(--linha); border-radius: 14px; margin-bottom: 8px; background: var(--papel);
}
.sv-linha .sv-nome { grid-column: 1 / -1; }
.sv-linha label { font-size: .76rem; font-weight: 650; color: var(--suave); display: grid; gap: 4px; }
.sv-linha__pe { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
@media (min-width: 760px) {
  .sv-linha { grid-template-columns: 2fr 1fr 1fr auto; align-items: end; }
  .sv-linha .sv-nome { grid-column: auto; }
  .sv-linha__pe { grid-column: auto; }
}
.chk { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 600; cursor: pointer; }
.chk input { width: 20px; height: 20px; accent-color: var(--tinta); }
.dia-linha {
  display: grid; grid-template-columns: 1fr auto; gap: 8px 10px; align-items: center;
  padding: 10px 0; border-top: 1px solid var(--linha);
}
.dia-linha:first-of-type { border-top: 0; }
.dia-linha__horas { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }
.dia-linha__horas .entrada { flex: 1; }
.dia-linha.is-folga .dia-linha__horas { display: none; }
@media (min-width: 640px) {
  .dia-linha { grid-template-columns: 140px 130px 1fr; }
  .dia-linha__horas { grid-column: auto; }
  .dia-linha.is-folga .dia-linha__horas { display: flex; visibility: hidden; }
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 6px 6px 12px; border-radius: 999px; background: var(--papel-2); font-size: .86rem; font-weight: 600; }
.chip button { border: 0; background: rgba(0, 0, 0, .06); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; }
.chip button .ic { width: 14px; height: 14px; }
.chips__vazio { font-size: .86rem; color: var(--suave-2); }
.salvar-fixo {
  position: sticky; bottom: 78px; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; margin-top: 8px;
  background: var(--tinta); color: #fff; border-radius: 16px; box-shadow: var(--sombra-forte);
}
.salvar-fixo span { font-size: .88rem; color: rgba(255, 255, 255, .75); }
@media (min-width: 960px) { .salvar-fixo { bottom: 16px; } }
.erros { margin-bottom: 14px; padding: 12px 14px; border-radius: 14px; background: var(--perigo-fundo); color: var(--perigo); font-size: .9rem; font-weight: 600; }
.erros ul { margin: 6px 0 0; padding-left: 18px; }

/* Resumo do mês */
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 760px) { .kpis { grid-template-columns: repeat(3, 1fr); } }
.kpi { padding: 16px; background: #fff; border: 1px solid var(--linha); border-radius: 16px; }
.kpi__rot { display: flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 650; color: var(--suave); }
.kpi__rot i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.kpi__num { display: block; margin-top: 4px; font-size: 1.8rem; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.kpi__sub { font-size: .8rem; color: var(--suave); }
.kpi--destaque { grid-column: 1 / -1; background: var(--tinta); color: #fff; border-color: var(--tinta); }
.kpi--destaque .kpi__rot, .kpi--destaque .kpi__sub { color: rgba(255, 255, 255, .7); }
.kpi--destaque .kpi__num { color: var(--latao-claro); font-size: 2.2rem; }
.barras { display: grid; gap: 10px; }
.barra-linha { display: grid; grid-template-columns: 110px 1fr 70px; gap: 10px; align-items: center; font-size: .88rem; }
.barra-linha__trilho { height: 10px; border-radius: 6px; background: var(--papel-2); overflow: hidden; }
.barra-linha__trilho i { display: block; height: 100%; border-radius: inherit; background: var(--tinta); }
.barra-linha b { text-align: right; font-variant-numeric: tabular-nums; }

/* Login do painel */
.p-login { min-height: calc(100svh - var(--faixa-h)); display: grid; place-items: center; padding: 30px 16px; background: var(--tinta); }
.p-login__caixa { width: 100%; max-width: 400px; background: #fff; border-radius: 24px; padding: 30px 24px; box-shadow: var(--sombra-forte); }
.p-login__caixa .marca { margin-bottom: 22px; }
.p-login h1 { font-size: 1.45rem; font-weight: 800; margin-bottom: 6px; }
.p-login p { color: var(--suave); font-size: .94rem; }
.p-login__rodape { margin-top: 18px; text-align: center; font-size: .82rem; color: rgba(255, 255, 255, .55); }
.p-login__rodape a { color: rgba(255, 255, 255, .85); }

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

/* =====================================================================
   SISTEMA REAL – ajustes sobre o visual da demonstração
   ===================================================================== */
:root { --faixa-h: 0px; }
body { padding-top: 0; }
.pular { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--latao); color: var(--tinta); padding: 10px 16px; font-weight: 700; }
.pular:focus { left: 10px; top: 10px; }

/* Animação segura: visível por padrão; só anima com JS; fail-safe 1,5 s; respeita "reduzir movimento" */
@media (prefers-reduced-motion: no-preference) {
  .anim-on .entra { animation: entra .45s cubic-bezier(.2, .7, .3, 1) both; }
  .anim-on .entra:nth-child(2) { animation-delay: .05s; }
  .anim-on .entra:nth-child(3) { animation-delay: .1s; }
  .anim-on .entra:nth-child(4) { animation-delay: .15s; }
}
@keyframes entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.anim-fim .entra { animation: none !important; opacity: 1 !important; transform: none !important; }

/* Topo da página da barbearia (sem foto) */
.capa-simples {
  color: #fff; padding: 34px 0 30px;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(200, 137, 74, .32), transparent 55%),
    linear-gradient(160deg, #2a221c, #15110e 70%);
}
.capa-simples h1 { font-size: clamp(2rem, 8.5vw, 3rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; margin-bottom: 8px; }
.capa-simples__end { color: rgba(255, 255, 255, .78); display: flex; gap: 8px; align-items: flex-start; margin-bottom: 18px; }
.capa-simples__end .ic { color: var(--latao-claro); margin-top: 2px; }
.capa-simples .btn-grande { width: 100%; max-width: 380px; }
.capa-simples .selo-status { margin-bottom: 14px; }
.carregando { color: rgba(255, 255, 255, .7); }
.cliente .vazio .btn { margin-top: 16px; }

.topo__link span { white-space: nowrap; }
@media (max-width: 380px) { .topo .marca__nome { font-size: .95rem; } .topo__link { font-size: .84rem; padding: 0 8px; } }

/* Profissional */
.prof__ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--tinta); color: var(--latao-claro); font-weight: 750; flex: none; }
.prof__ic--qualquer { background: var(--papel-2); color: var(--tinta-3); }

/* Código do agendamento */
.codigo {
  margin: 18px 0; padding: 16px; text-align: center;
  border: 2px dashed var(--latao); border-radius: var(--raio); background: var(--latao-fundo);
}
.codigo small { display: block; font-size: .82rem; font-weight: 650; color: var(--latao-escuro); }
.codigo strong { display: block; font-size: 2.1rem; font-weight: 800; letter-spacing: .2em; font-variant-numeric: tabular-nums; margin: 2px 0 4px; padding-left: .2em; }
.codigo span { font-size: .86rem; color: #5d3a17; }

.etq--cancel { background: var(--perigo-fundo); color: var(--perigo); }
.campo-erro { color: var(--perigo); font-size: .86rem; font-weight: 600; }

/* ---------- Painel ---------- */
.p-nav { grid-template-columns: repeat(4, 1fr); }
.filtro-prof { display: flex; gap: 6px; overflow-x: auto; margin: 0 -16px 12px; padding: 0 16px 4px; }
.filtro-prof button {
  flex: none; border: 1.5px solid var(--linha); background: #fff; border-radius: 999px; padding: 7px 14px;
  font-weight: 650; font-size: .88rem; color: var(--suave);
}
.filtro-prof button.is-ativo { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.ag__pro { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 700; color: var(--latao-escuro); }
.ag--cancelado { border-left-color: var(--perigo); }
.ag--passado { opacity: .7; }
.alerta-cancel {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin-bottom: 12px;
  border-radius: 14px; background: var(--perigo-fundo); color: var(--perigo); font-weight: 650; text-decoration: none;
}
.alerta-cancel .ic { flex: none; }
.alerta-cancel span { flex: 1; }
.etq--novo { background: var(--perigo); color: #fff; }
.cancel-item { display: grid; gap: 6px; padding: 14px; background: #fff; border: 1px solid var(--linha); border-radius: 16px; }
.cancel-item.is-novo { border-color: var(--perigo); box-shadow: 0 0 0 1px var(--perigo); }
.cancel-item__top { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.cancel-item__det { color: var(--suave); font-size: .9rem; }
.cancel-item .btn { justify-self: start; }
.p-nav__bolha b { background: var(--perigo); color: #fff; }

.lin-form { display: grid; gap: 10px; }
@media (min-width: 640px) { .lin-form--2 { grid-template-columns: 1fr 1fr; } .lin-form--3 { grid-template-columns: repeat(3, 1fr); } }
.item-lista { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid var(--linha); }
.item-lista:first-of-type { border-top: 0; }
.item-lista__txt { flex: 1; min-width: 0; }
.item-lista__txt strong { display: block; }
.item-lista__txt span { color: var(--suave); font-size: .88rem; }
.item-lista.is-inativo .item-lista__txt { opacity: .55; }
.dias-folga { display: flex; flex-wrap: wrap; gap: 6px; }
.dias-folga label { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 999px; background: var(--papel); font-size: .84rem; font-weight: 600; cursor: pointer; }
.dias-folga input { accent-color: var(--tinta); }
.abas-ajuste { display: flex; gap: 6px; overflow-x: auto; margin: 0 -16px 14px; padding: 0 16px 4px; }
.abas-ajuste a { flex: none; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--linha); font-weight: 650; font-size: .88rem; text-decoration: none; color: var(--suave); }
.abas-ajuste a.is-ativo { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.senha-gerada { font-family: ui-monospace, Consolas, monospace; font-size: 1.15rem; font-weight: 700; background: var(--papel-2); padding: 12px; border-radius: 12px; text-align: center; user-select: all; word-break: break-all; color: var(--texto); }

/* Admin */
.adm-loja { display: grid; gap: 8px; padding: 14px; background: #fff; border: 1px solid var(--linha); border-radius: 16px; }
.adm-loja__top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.adm-loja__acoes { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-loja.is-off { opacity: .65; }