/* fontes das artes de marketing (servidas pelo próprio app; licença SIL OFL em /fonts/OFL.txt) */
@font-face { font-family: 'Bebas Neue'; src: url('/fonts/bebas-neue-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Oswald'; src: url('/fonts/oswald-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Oswald'; src: url('/fonts/oswald-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url('/fonts/playfair-display-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url('/fonts/playfair-display-latin-700-italic.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; }
/* fontes do app (servidas pelo próprio app, sem depender do Google) */
@font-face { font-family: Manrope; src: url('/fonts/manrope-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Manrope; src: url('/fonts/manrope-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: Manrope; src: url('/fonts/manrope-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: Manrope; src: url('/fonts/manrope-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: Manrope; src: url('/fonts/manrope-latin-800-normal.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: Sora; src: url('/fonts/sora-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: Sora; src: url('/fonts/sora-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: Sora; src: url('/fonts/sora-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
:root {
  --fundo: #141416;
  --cartao: #1e1e22;
  --cartao2: #26262b;
  --linha: #2f2f35;
  --texto: #f4f1ea;
  --suave: #a8a49c;
  --apagado: #6e6b66;
  --ouro: #d9a54e;
  --ouro-escuro: #1a1206;
  --ouro-fundo: #2a2216;
  --verde: #4cc38a;
  --verde-fundo: #173426;
  --coral: #ef8e6b;
  --raio: 16px;
  --abas: 84px;
}
[hidden] { display: none !important; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--fundo); color: var(--texto); font-family: Manrope, system-ui, -apple-system, sans-serif; font-size: 15px; }
body { min-height: 100dvh; }
main { max-width: 560px; margin: 0 auto; padding: max(20px, env(safe-area-inset-top)) 20px calc(var(--abas) + 28px); display: flex; flex-direction: column; gap: 16px; }
h1, h2, h3, .num { font-family: Sora, Manrope, sans-serif; margin: 0; }
h1 { font-size: 24px; font-weight: 600; }
h2 { font-size: 16px; font-weight: 600; }
a { color: var(--ouro); }
.logo-acesso { width: 88px; height: 88px; }
.logo-topo { width: 34px; height: 34px; flex: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.suave { color: var(--suave); }
.pequeno { font-size: 13px; }
.mini { font-size: 12px; }
.verde { color: var(--verde); }
.coral { color: var(--coral); }
.ouro { color: var(--ouro); }
.linha-flex { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pilha { display: flex; flex-direction: column; gap: 8px; }
.grade3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.grade2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.grade4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }

.cartao { background: var(--cartao); border: 1px solid var(--linha); border-radius: 20px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.cartao.destaque { background: var(--ouro); color: var(--ouro-escuro); border: none; }
.cartao.alerta { background: var(--ouro-fundo); border-color: #5a4520; }
.mini-cartao { background: var(--cartao); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.rotulo { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--suave); }
.destaque .rotulo { color: var(--ouro-escuro); }
.grande { font-family: Sora, sans-serif; font-size: 38px; font-weight: 700; letter-spacing: -.02em; }
.barra { height: 8px; border-radius: 4px; background: var(--linha); overflow: hidden; }
.barra > div { height: 100%; background: var(--ouro); border-radius: 4px; }
.barras { display: flex; height: 10px; border-radius: 5px; overflow: hidden; gap: 2px; background: var(--linha); }

.cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cabecalho .titulo { display: flex; flex-direction: column; gap: 2px; }
.avatar { width: 44px; height: 44px; border-radius: 22px; background: var(--cartao2); border: 1px solid var(--linha); display: flex; align-items: center; justify-content: center; font-family: Sora, sans-serif; font-weight: 600; font-size: 14px; flex: none; text-decoration: none; color: var(--texto); }

.item { display: flex; align-items: center; gap: 12px; background: var(--cartao); border-radius: 14px; padding: 12px 14px; border: 0; width: 100%; text-align: left; text-decoration: none; color: var(--texto); }
.item .corpo { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.item .corpo b, .item .corpo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icone { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: none; background: var(--cartao2); }
.icone svg { width: 18px; height: 18px; }
.icone.zap { background: var(--verde-fundo); color: var(--verde); }
.lista-linhas > * { border-bottom: 1px solid #232327; border-radius: 0; background: transparent; padding: 12px 0; }
.lista-linhas > *:last-child { border-bottom: 0; }

.botao { min-height: 48px; border-radius: 12px; border: none; background: var(--ouro); color: var(--ouro-escuro); font-weight: 800; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.botao.sec { background: transparent; border: 1px solid #3a3a41; color: var(--texto); font-weight: 700; }
.botao.escuro { background: var(--ouro-escuro); color: var(--texto); }
.botao.contorno-escuro { background: transparent; border: 1.5px solid var(--ouro-escuro); color: var(--ouro-escuro); }
.botao.zap { background: var(--verde-fundo); color: var(--verde); }
.botao.perigo { background: transparent; border: 1px solid #5a2e22; color: var(--coral); }
.botao:disabled { opacity: .5; }
.botao.cheio { width: 100%; }
.botoes { display: flex; gap: 8px; }
.botoes > * { flex: 1; }
.icone-btn { width: 44px; height: 44px; border-radius: 12px; border: none; background: var(--verde-fundo); color: var(--verde); display: flex; align-items: center; justify-content: center; flex: none; text-decoration: none; }
.icone-btn svg { width: 20px; height: 20px; }

.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.chip { min-height: 36px; padding: 0 14px; border-radius: 18px; border: 1px solid var(--linha); background: transparent; font-weight: 600; font-size: 13px; white-space: nowrap; }
.chip[aria-pressed="true"] { background: var(--texto); color: var(--fundo); border-color: var(--texto); font-weight: 700; }
.segmento { display: flex; background: var(--cartao); border-radius: 12px; padding: 4px; gap: 2px; }
.segmento button { min-height: 36px; padding: 0 12px; border-radius: 9px; border: none; background: transparent; color: var(--suave); font-weight: 600; font-size: 13px; }
.segmento button[aria-pressed="true"] { background: var(--texto); color: var(--fundo); font-weight: 700; }

.dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.dia { min-height: 60px; border-radius: 14px; border: 1px solid var(--linha); background: var(--cartao); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.dia small { font-size: 11px; color: var(--suave); font-weight: 700; }
.dia b { font-family: Sora, sans-serif; font-size: 18px; }
.dia[aria-pressed="true"] { background: var(--ouro); color: var(--ouro-escuro); border-color: var(--ouro); }
.dia[aria-pressed="true"] small { color: var(--ouro-escuro); }

.horario { display: flex; gap: 12px; align-items: stretch; }
.horario > time { width: 46px; padding-top: 13px; font-size: 13px; color: var(--apagado); font-weight: 600; flex: none; }
.horario .item { flex: 1; }
.horario.agora > time { color: var(--ouro); font-weight: 800; }
.horario.agora .item { background: var(--ouro-fundo); border: 1.5px solid var(--ouro); }
.horario.feito .item { opacity: .55; }
.livre { flex: 1; min-height: 46px; border: 1.5px dashed #3a3a41; border-radius: 14px; background: transparent; color: var(--suave); font-weight: 600; text-align: left; padding: 0 14px; }
.status { font-size: 12px; font-weight: 700; color: var(--suave); white-space: nowrap; }
.status.confirmado { color: var(--verde); }
.status.faltou { color: var(--coral); }

label.campo { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--suave); font-weight: 600; }
input, select, textarea { min-height: 48px; border-radius: 12px; border: 1px solid var(--linha); background: var(--cartao); padding: 0 14px; font-size: 16px; color: var(--texto); width: 100%; }
textarea { padding: 12px 14px; min-height: 80px; resize: vertical; }
input:focus, textarea:focus, select:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; }
.busca { display: flex; align-items: center; gap: 10px; background: var(--cartao); border: 1px solid var(--linha); border-radius: 14px; padding: 0 14px; color: var(--suave); }
.busca input { border: 0; background: transparent; padding: 0; }
.busca input:focus { outline: none; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.mic-area { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 12px 0 4px; }
.mic { width: 132px; height: 132px; border-radius: 66px; border: none; background: var(--ouro); color: var(--ouro-escuro); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 14px var(--ouro-fundo), 0 0 0 28px #1e1a14; touch-action: none; user-select: none; -webkit-user-select: none; }
.mic svg { width: 52px; height: 52px; }
.mic.gravando { background: var(--coral); box-shadow: 0 0 0 14px #3a2119, 0 0 0 28px #24160f; animation: pulsa 1.2s ease-in-out infinite; }
@keyframes pulsa { 50% { transform: scale(1.05); } }
.mic-texto { margin-top: 18px; font-family: Sora, sans-serif; font-weight: 600; font-size: 17px; }
.enviar { display: flex; gap: 8px; }
.enviar input { flex: 1; }
.enviar .botao { flex: none; }
.atalho { min-height: 72px; border-radius: 14px; border: 1px solid var(--linha); background: var(--cartao); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 12px; font-weight: 700; }
.atalho svg { width: 22px; height: 22px; }
.resumo { white-space: pre-line; line-height: 1.5; font-size: 15px; }
.campos-resumo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }

.abas { position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--abas) + env(safe-area-inset-bottom)); padding: 8px 8px env(safe-area-inset-bottom); background: #1a1a1e; border-top: 1px solid var(--linha); display: flex; align-items: flex-start; justify-content: space-around; z-index: 10; }
.abas a { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 64px; min-height: 44px; padding-top: 4px; text-decoration: none; color: var(--suave); font-size: 11px; font-weight: 600; }
.abas a[aria-current="page"] { color: var(--ouro); font-weight: 700; }
.abas a.mais { width: 60px; height: 60px; border-radius: 30px; background: var(--ouro); color: var(--ouro-escuro); justify-content: center; padding: 0; margin-top: -24px; box-shadow: 0 0 0 6px var(--fundo); }
.abas a.mais svg { width: 28px; height: 28px; stroke-width: 2.5; }
.abas a.mais[aria-current="page"] { background: var(--texto); color: var(--fundo); }

.folha-fundo { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 20; display: flex; align-items: flex-end; justify-content: center; }
.folha { width: 100%; max-width: 560px; background: #1a1a1e; border-radius: 24px 24px 0 0; padding: 20px 20px calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; max-height: 90dvh; overflow-y: auto; }
.folha .puxador { width: 40px; height: 4px; border-radius: 2px; background: var(--linha); align-self: center; }

.aviso { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--abas) + 20px + env(safe-area-inset-bottom)); background: var(--texto); color: var(--fundo); padding: 12px 18px; border-radius: 12px; font-weight: 700; z-index: 30; max-width: calc(100% - 40px); text-align: center; }
.aviso.erro { background: var(--coral); color: #1a0d07; }
.vazio { text-align: center; color: var(--suave); padding: 24px 8px; }
.qr { width: 240px; height: 240px; border-radius: 12px; background: #fff; padding: 8px; align-self: center; }
.badge { font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 8px; background: var(--cartao2); color: var(--suave); }
.badge.ok { background: var(--verde-fundo); color: var(--verde); }
.badge.ruim { background: #3a2119; color: var(--coral); }

.marca { font-family: Sora, sans-serif; font-weight: 700; font-size: 15px; letter-spacing: .02em; color: var(--ouro); text-transform: uppercase; }

.chat { display: flex; flex-direction: column; gap: 8px; background: #0f1513; border: 1px solid #24302b; border-radius: 18px; padding: 14px 12px; min-height: 320px; max-height: 52dvh; overflow-y: auto; }
.bolha { max-width: 84%; padding: 10px 12px; border-radius: 16px; font-size: 15px; line-height: 1.4; white-space: pre-line; }
.bolha.eu { align-self: flex-end; background: #1f5c40; border-bottom-right-radius: 4px; }
.bolha.bot { align-self: flex-start; background: var(--cartao); border-bottom-left-radius: 4px; }
.bolha small { display: block; font-size: 11px; color: #bfe3cf; margin-top: 4px; text-align: right; }

/* ---------- telas de entrada */
body.modo-acesso main { padding-bottom: 32px; }
body.modo-acesso { background:
  radial-gradient(120% 60% at 50% -10%, rgba(217, 165, 78, .10), transparent 60%),
  var(--fundo); }
.acesso { min-height: calc(100dvh - 64px); max-width: 400px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; gap: 28px; }
.acesso-marca { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.acesso-marca img { width: 72px; height: 72px; filter: drop-shadow(0 8px 24px rgba(217, 165, 78, .18)); }
.acesso-nome { font-family: Sora, sans-serif; font-weight: 700; font-size: 26px; letter-spacing: -.01em; }
.acesso-slogan { color: var(--suave); font-size: 14px; }
.acesso-cartao { background: var(--cartao); border: 1px solid var(--linha); border-radius: 24px; padding: 24px 20px; display: flex; flex-direction: column; gap: 20px; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.acesso-titulo { display: flex; flex-direction: column; gap: 6px; }
.acesso-titulo h1 { font-size: 22px; line-height: 1.2; }
.acesso-titulo p { margin: 0; color: var(--suave); font-size: 14px; line-height: 1.45; }
.acesso-rotulo { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--suave); }
.acesso-cartao input { background: var(--fundo); }
.acesso-rodape { margin: 0; text-align: center; font-size: 12px; color: var(--apagado); }
.dica { font-size: 12px; font-weight: 500; color: var(--apagado); }
.acesso-erro { margin: 0; padding: 10px 12px; border-radius: 10px; background: #2a1712; border: 1px solid #5a2e22; color: #f3b39b; font-size: 13px; font-weight: 600; }
.senha-caixa { position: relative; display: flex; }
.senha-caixa input { padding-right: 52px; }
.olho { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; background: transparent; color: var(--suave); display: flex; align-items: center; justify-content: center; border-radius: 10px; }
.olho svg { width: 20px; height: 20px; }
.olho:hover { color: var(--texto); }
.girando { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: gira .7s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.treme { animation: treme .35s; }
@keyframes treme { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@media (min-width: 720px) { .acesso-cartao { padding: 32px 28px; } }
@media (prefers-reduced-motion: reduce) { .treme, .girando { animation: none; } }

::selection { background: rgba(217, 165, 78, .35); color: var(--texto); }

.botao-link { background: none; border: 0; padding: 8px 4px; color: var(--ouro); font-weight: 700; font-size: 14px; min-height: 40px; }
.botao-link:disabled { color: var(--apagado); }
.acesso-troca { margin: 0; text-align: center; font-size: 14px; color: var(--suave); }
.acesso-aviso { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--ouro-fundo); border: 1px solid #5a4520; color: #f0d9a8; font-size: 13px; }
input.codigo { font-family: Sora, sans-serif; font-size: 26px; letter-spacing: .5em; text-align: center; padding-left: .5em; }
.item.escolha { background: var(--fundo); border: 1px solid var(--linha); }
.item:disabled { opacity: 1; cursor: default; }
.aviso-linha { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-radius: 10px; background: var(--ouro-fundo); color: #f0d9a8; }
.admin-caixa { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 12px; border: 1px dashed #3a3a41; }

/* ---------- meta do dia batida */
.cartao.meta-batida { position: relative; overflow: hidden; border-color: rgba(217, 165, 78, .55);
  background: radial-gradient(120% 90% at 100% 0%, rgba(217, 165, 78, .16), transparent 60%), var(--cartao);
  box-shadow: 0 0 0 1px rgba(217, 165, 78, .15), 0 12px 40px rgba(217, 165, 78, .12); }
.cartao.meta-batida .grande { color: #f3d79b; }
.selo-meta { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: 999px;
  background: var(--ouro); color: var(--ouro-escuro); font-size: 12px; font-weight: 800; letter-spacing: .02em; }
.selo-meta svg { width: 16px; height: 16px; stroke-width: 2.2; }
.barra.cheia > div { background: linear-gradient(90deg, #c8913c, #f0c873); }
.cartao.comemora::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 230, 170, .22) 45%, transparent 60%); transform: translateX(-100%); animation: brilho-meta 1.4s ease-out .2s 2; }
.cartao.comemora .selo-meta { animation: pulo-selo .6s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes brilho-meta { to { transform: translateX(100%); } }
@keyframes pulo-selo { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cartao.comemora::after, .cartao.comemora .selo-meta { animation: none; } }

.acesso-links { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }

/* faixa de status do bot (topo) */
.faixa-bot { position: sticky; top: 0; z-index: 25; display: flex; align-items: center; gap: 10px; padding: calc(8px + env(safe-area-inset-top)) 16px 8px; font-size: 13px; font-weight: 600; line-height: 1.35; }
.faixa-bot > span:not(.ponto) { flex: 1; }
.faixa-bot .ponto { width: 8px; height: 8px; border-radius: 50%; flex: none; background: currentColor; }
.faixa-bot a { color: inherit; font-weight: 800; text-decoration: underline; white-space: nowrap; }
.faixa-bot.erro { background: #3a1a12; color: #ffb59a; }
.faixa-bot.erro .ponto { animation: piscar 1.4s ease-in-out infinite; }
.faixa-bot.instavel { background: var(--ouro-fundo); color: #f0d9a8; }
.faixa-bot.neutra { background: var(--cartao2); color: var(--suave); justify-content: center; }
.faixa-bot:not([hidden]) + main { padding-top: 16px; }
@keyframes piscar { 50% { opacity: .25; } }

/* ======================================================================
   Telas de gestão (visão geral, cadastros, equipe, identidade, estoque,
   relatórios, admin) e layout de computador
   ====================================================================== */
.badge.ouro { background: var(--ouro-fundo); color: var(--ouro); }
.cabecalho-largo { flex-wrap: wrap; align-items: flex-end; }
.cabecalho-largo .titulo { flex: 1 1 260px; }
.acoes-topo { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.acoes-topo .botao { min-height: 42px; }
.acoes-topo svg, .botao svg { width: 18px; height: 18px; }

/* indicadores */
.grade-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.grade-kpis.menor .kpi-valor { font-size: 20px; }
.kpi { background: var(--cartao); border: 1px solid var(--linha); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kpi-rotulo { font-size: 12px; font-weight: 700; color: var(--suave); }
.kpi-valor { font-family: Sora, sans-serif; font-size: 24px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi.destaque-kpi { background: var(--ouro-fundo); border-color: #5a4520; }
.kpi.destaque-kpi .kpi-valor { color: #f3d79b; }

.duas-colunas { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.col-larga { flex: 999 1 480px; min-width: 0; }
.col-estreita { flex: 1 1 300px; min-width: 0; }
.grade-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.linha-datas { display: flex; gap: 10px; flex-wrap: wrap; }
.linha-datas .campo { flex: 1 1 140px; }

/* sugestões */
.sugestao { display: flex; gap: 12px; align-items: flex-start; background: var(--cartao); border: 1px solid var(--linha); border-radius: 14px; padding: 14px; }
.sugestao-sinal { flex: none; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font: 800 15px Sora, sans-serif; background: var(--ouro-fundo); color: var(--ouro); }
.sugestao.alerta .sugestao-sinal { background: #3a1a12; color: #ffb59a; }
.sugestao.positivo .sugestao-sinal { background: var(--verde-fundo); color: #8fe0b6; }

/* gráficos */
.grafico { position: relative; display: flex; align-items: flex-end; gap: 2px; border-bottom: 1px solid var(--linha); padding-top: 18px; }
.barra-col { flex: 1; min-width: 4px; height: 100%; display: flex; align-items: flex-end; border-radius: 4px 4px 0 0; outline-offset: 0; }
.barra-col:hover .barra-v, .barra-col:focus .barra-v { filter: brightness(1.2); }
.barra-v { width: 100%; border-radius: 4px 4px 0 0; transition: height .3s; }
.barra-v.acima { background: var(--ouro); }
.barra-v.abaixo { background: #5b5242; }
.barra-v.apagada { background: #2a2a30; }
.grafico-meta { position: absolute; left: 0; right: 0; border-top: 1.5px dashed #8d8980; pointer-events: none; z-index: 1; }
.grafico-meta span { position: absolute; right: 0; top: -18px; font-size: 11px; color: var(--suave); background: var(--cartao); padding: 0 4px; }
.grafico-eixo { display: flex; gap: 2px; font-size: 11px; color: var(--apagado); }
.grafico-eixo span { flex: 1; min-width: 4px; white-space: nowrap; overflow: visible; }
.ranking { display: flex; flex-direction: column; gap: 12px; }
.ranking-linha { display: flex; flex-direction: column; gap: 6px; }
.ranking-barra { height: 8px; border-radius: 4px; background: var(--linha); overflow: hidden; }
.ranking-barra > div { height: 100%; background: var(--ouro); border-radius: 4px; }
.empilhada { display: flex; height: 14px; border-radius: 6px; overflow: hidden; gap: 2px; background: var(--fundo); }
.legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--suave); align-items: center; }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.mapa { display: grid; gap: 4px; }
.mapa-dia { text-align: center; font-size: 11px; color: var(--suave); font-weight: 700; }
.mapa-hora { font-size: 11px; color: var(--apagado); display: flex; align-items: center; }
.mapa-cel { height: 24px; border-radius: 5px; }
.dica-flutuante { position: fixed; z-index: 60; pointer-events: none; background: var(--texto); color: var(--fundo); font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 8px; max-width: 260px; box-shadow: 0 6px 20px rgba(0,0,0,.35); }

/* tabelas */
.tabela-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th { text-align: left; font-size: 12px; font-weight: 700; color: var(--suave); padding: 12px 14px; white-space: nowrap; }
.tabela td { padding: 12px 14px; border-top: 1px solid #26262b; vertical-align: top; }
.tabela .d { text-align: right; } .tabela .c { text-align: center; }
.tabela-clicavel tbody tr { cursor: pointer; }
.tabela-clicavel tbody tr:hover, .tabela-clicavel tbody tr:focus { background: #222227; outline: none; }
.cartao > .tabela-rolagem .tabela th:first-child, .cartao > .tabela-rolagem .tabela td:first-child { padding-left: 18px; }
.cartao .tabela-rolagem:only-child, .cartao[style*="padding:0"] { overflow: hidden; }

/* cadastros */
.grade-tipos { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.tipo-cad { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 12px; text-decoration: none; color: var(--texto); }
.tipo-cad:hover, .tipo-cad.ativo { background: var(--ouro-fundo); }
.tipo-cad.em-breve { opacity: .55; }
.tipo-sigla { flex: none; width: 40px; height: 40px; border-radius: 10px; background: #26241f; color: var(--ouro); display: flex; align-items: center; justify-content: center; font: 700 14px Sora, sans-serif; }
.cartao-item { background: var(--cartao); border: 1px solid var(--linha); border-radius: 14px; cursor: pointer; }
.cartao-item svg { width: 18px; height: 18px; color: var(--apagado); }
.chip-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--texto); cursor: pointer; }
.chip-check input { width: 20px; height: 20px; min-height: 0; accent-color: var(--ouro); }
.chips .chip-check { border: 1px solid var(--linha); border-radius: 18px; padding: 0 12px; min-height: 36px; }
.opcao-radio { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--linha); border-radius: 12px; cursor: pointer; }
.opcao-radio:has(input:checked) { border-color: var(--ouro); background: var(--ouro-fundo); }
.opcao-radio input { width: 20px; height: 20px; min-height: 0; margin: 2px 0 0; accent-color: var(--ouro); flex: none; }
.opcao-radio > span { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }

/* identidade */
.grade-identidade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); gap: 16px; align-items: start; }
.col-ident { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.alinhar-topo { align-items: start; gap: 16px; }
.lista-feriados { max-height: 360px; overflow-y: auto; padding-right: 4px; }
/* horário: uma linha por dia (dia + liga/desliga | abre – fecha | pausa) */
#fHorarios .dia-linha { display: grid; grid-template-columns: 92px 52px minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: center; flex-wrap: nowrap; }
#fHorarios .dia-linha > b { width: auto; }
#fHorarios .dia-fechado { grid-column: 3 / -1; }
#fHorarios .dia-horas, #fHorarios .dia-pausa { min-width: 0; }
#fHorarios .dia-linha input[type=time] { width: 100%; min-width: 0; }
@media (max-width: 1279px) { .grade-identidade { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { #fHorarios .dia-linha { grid-template-columns: 1fr auto; } #fHorarios .dia-horas, #fHorarios .dia-pausa, #fHorarios .dia-fechado { grid-column: 1 / -1; } }
.logo-caixa { width: 72px; height: 72px; border-radius: 16px; border: 1px dashed #4a4a52; display: flex; align-items: center; justify-content: center; overflow: hidden; flex: none; background: var(--fundo); }
.logo-caixa img { width: 100%; height: 100%; object-fit: contain; }
.dia-linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid #26262b; font-size: 14px; }
.dia-linha > b { width: 76px; }
.dia-linha input[type=time] { min-height: 38px; width: 104px; padding: 0 8px; font-size: 14px; }
.dia-horas, .dia-pausa { display: inline-flex; align-items: center; gap: 6px; color: var(--suave); font-size: 13px; }
.interruptor { position: relative; display: inline-flex; width: 44px; height: 26px; flex: none; cursor: pointer; }
.interruptor input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; min-height: 0; cursor: pointer; }
.interruptor > span:first-of-type { position: absolute; inset: 0; border-radius: 13px; background: #3a3a42; transition: background .2s; }
.interruptor > span:first-of-type::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--texto); transition: transform .2s; }
.interruptor input:checked + span { background: var(--ouro); }
.interruptor input:checked + span::after { transform: translateX(18px); }
.interruptor input:focus-visible + span { outline: 2px solid var(--ouro); outline-offset: 2px; }
.feriado { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: #232329; border: 0; color: var(--texto); font-size: 14px; width: 100%; cursor: pointer; }
.feriado b { font-family: Sora, sans-serif; width: 46px; text-align: left; }
.linha-campo { display: flex; align-items: center; gap: 12px; justify-content: space-between; padding: 8px 0; border-top: 1px solid #26262b; font-size: 14px; }
.linha-campo select, .linha-campo input { width: auto; min-height: 40px; font-size: 14px; }

/* equipe */
.grade-pessoas { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 12px; }
.pessoa-cartao { background: var(--cartao); border: 1px solid var(--linha); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; color: var(--texto); text-align: left; width: 100%; }
.pessoa-cartao:not(:disabled):hover { border-color: #4a4a52; }
.pessoa-cartao:disabled { cursor: default; }
.papel { font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 99px; white-space: nowrap; }
.papel-dono { background: var(--ouro-fundo); color: var(--ouro); }
.papel-gerente { background: #1d2a3a; color: #9cc4ff; }
.papel-barbeiro { background: #232329; color: #c9c5bc; }
.papel-recepcao { background: #2a1d33; color: #d6b4ff; }
.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }
.etiquetas span { font-size: 12px; padding: 4px 10px; border-radius: 8px; background: #232329; color: #c9c5bc; }
.etiquetas .ok { background: var(--verde-fundo); color: #8fe0b6; font-weight: 700; }
.etiquetas .pendente { background: #3a1a12; color: #ffb59a; font-weight: 700; }
.permissoes .grupo td { padding-top: 18px; font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--apagado); border-top: 0; }
.perm { width: 32px; height: 32px; border-radius: 9px; border: 0; font-weight: 800; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; }
.perm.sim { background: var(--verde-fundo); color: #8fe0b6; }
.perm.parcial { background: var(--ouro-fundo); color: var(--ouro); }
.perm.nao { background: #202024; color: var(--apagado); }
.perm:not(:disabled):hover { outline: 2px solid #4a4a52; }
.perm:disabled { cursor: default; opacity: .85; }

/* estoque e listas de movimentos */
.mov { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid #26262b; }
.mov:first-child { border-top: 0; }
.mov-sinal { flex: none; width: 30px; height: 30px; border-radius: 9px; background: #232329; display: flex; align-items: center; justify-content: center; font-weight: 800; }

/* relatórios */
.modelo { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; text-align: left; padding: 18px; border-radius: 16px; background: var(--cartao); border: 1px solid var(--linha); color: var(--texto); cursor: pointer; }
.modelo svg { color: var(--ouro); }
.modelo.ativo { border-color: var(--ouro); background: var(--ouro-fundo); }
.modelo b { font-family: Sora, sans-serif; font-size: 16px; }

/* admin */
.abas-admin { align-self: flex-start; flex-wrap: wrap; }
.abas-admin .cont:not(:empty) { margin-left: 6px; background: #3a1a12; color: #ffb59a; border-radius: 99px; padding: 0 7px; font-size: 11px; font-weight: 800; }
.uptime { display: flex; gap: 3px; }
.uptime span { flex: 1; height: 26px; border-radius: 4px; background: #2a2a30; }
.uptime .ok { background: var(--verde); } .uptime .meio { background: var(--ouro); } .uptime .ruim { background: var(--coral); }
.alerta-linha { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 12px; background: #1a1a1e; }
.alerta-linha .ponto { flex: none; width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: var(--ouro); }
.alerta-linha.nivel-erro .ponto { background: var(--coral); }
.alerta-linha .botao-link { min-height: 0; padding: 0; white-space: nowrap; }
.codigo-bloco { margin: 0; padding: 12px; border-radius: 10px; background: #0d0d0f; border: 1px solid var(--linha); font: 12px/1.5 ui-monospace, Consolas, monospace; color: #d6d3cd; white-space: pre-wrap; word-break: break-word; max-height: 260px; overflow: auto; }

/* ---------- menu lateral e layout de computador */
.lateral { display: none; }
@media (min-width: 1024px) {
  body.com-lateral .lateral { display: flex; position: fixed; top: 0; bottom: 0; left: 0; width: 256px; flex-direction: column; gap: 10px; padding: 22px 14px 14px; background: #17171a; border-right: 1px solid #2a2a30; z-index: 15; overflow-y: auto; }
  body.com-lateral .abas { display: none; }
  body.com-lateral main { margin-left: 256px; max-width: 880px; padding: 28px 36px 48px; }
  body.com-lateral main.larga { max-width: none; }
  body.com-lateral .faixa-bot { margin-left: 256px; }
  body.com-lateral .aviso { bottom: 28px; left: calc(50% + 128px); }
  .folha-fundo { align-items: center; padding: 24px; }
  .folha { border-radius: 20px; max-height: 86dvh; }
  .folha .puxador { display: none; }
  .folha-fundo.lado-esquerda { justify-content: flex-start; align-items: stretch; padding: 0 0 0 256px; }
  .folha-fundo.lado-esquerda .folha { border-radius: 0; max-height: none; height: 100%; box-shadow: 24px 0 60px rgba(0,0,0,.45); border-right: 1px solid #2e2e35; }
  .grade-kpis { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}
.lat-topo { display: flex; align-items: center; gap: 10px; padding: 0 8px 10px; }
.lat-topo b { font-family: Sora, sans-serif; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lat-itens { display: flex; flex-direction: column; gap: 2px; }
.lat-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: #c9c5bc; text-decoration: none; font-weight: 600; font-size: 14px; border: 0; background: transparent; width: 100%; text-align: left; cursor: pointer; }
.lat-item svg { width: 18px; height: 18px; flex: none; }
.lat-item:hover { background: #202024; color: var(--texto); }
.lat-item[aria-current="page"] { background: var(--ouro-fundo); color: var(--texto); font-weight: 800; }
.lat-item[aria-current="page"] svg { color: var(--ouro); }
.lat-pai .lat-seta { width: 16px; height: 16px; margin-left: auto; transition: transform .18s; color: var(--apagado); }
.lat-pai[aria-expanded="true"] .lat-seta { transform: rotate(180deg); }
.lat-sub { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 4px 21px; padding-left: 12px; border-left: 1px solid var(--linha); }
.lat-sub[hidden] { display: none; }
.lat-subitem { padding: 7px 10px; border-radius: 8px; color: #b3afa6; text-decoration: none; font-size: 13.5px; font-weight: 600; }
.lat-subitem:hover { background: #202024; color: var(--texto); }
.lat-subitem[aria-current="page"] { color: var(--ouro); background: var(--ouro-fundo); font-weight: 800; }
.lat-grupo { font-size: 11px; font-weight: 800; letter-spacing: .08em; color: #8d8980; padding: 14px 12px 4px; }
.lat-rodape { margin-top: auto; padding: 12px; border-radius: 12px; display: flex; flex-direction: column; gap: 3px; }
.lat-rodape.ok { background: var(--verde-fundo); color: #b9d8c8; }
.lat-rodape.ruim { background: #3a1a12; color: #ffb59a; }
.lat-rodape.neutro { background: var(--cartao2); color: var(--suave); }
.lat-status { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; }
.lat-status i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.lat-rodape.ok .lat-status { color: #8fe0b6; }
.lat-usuario { display: flex; align-items: center; gap: 10px; padding: 8px; border-top: 1px solid #2a2a30; }
.lat-usuario b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icone-sair { width: 36px; height: 36px; border-radius: 10px; border: 0; background: transparent; color: var(--suave); display: flex; align-items: center; justify-content: center; }
.icone-sair:hover { background: #26262b; color: var(--texto); }
.icone-sair svg { width: 18px; height: 18px; }
@media (max-width: 560px) {
  .grade-identidade, .grade-cartoes, .grade-tipos { grid-template-columns: minmax(0, 1fr); }
  .grade-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-valor { font-size: 20px; }
  .acoes-topo { width: 100%; }
  .acoes-topo .segmento { width: 100%; overflow-x: auto; }
  .dia-linha > b { width: 100%; }
}

.meio-circulo { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ouro); background: linear-gradient(90deg, var(--ouro) 50%, transparent 50%); }
.tabela .d, .tabela th { white-space: nowrap; }
@media (max-width: 720px) { .tabela-rolagem > .tabela { min-width: 600px; } }

/* ======================================================================
   Rodada 3: celular × computador, ambientes, barras de rolagem do app
   ====================================================================== */

/* ---------- barras de rolagem desenhadas pelo app (nada da barra nativa) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background: #34343b; border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; min-height: 40px; }
::-webkit-scrollbar-thumb:hover { background-color: #55555e; }
::-webkit-scrollbar-thumb:active { background-color: var(--ouro); }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.lateral::-webkit-scrollbar, .chat::-webkit-scrollbar, .folha::-webkit-scrollbar { width: 6px; }
.lateral::-webkit-scrollbar-thumb, .chat::-webkit-scrollbar-thumb, .folha::-webkit-scrollbar-thumb { border-width: 1px; background-color: #2e2e35; }
.lateral:not(:hover)::-webkit-scrollbar-thumb { background-color: transparent; }
@supports (-moz-appearance: none) {
  html, .rolagem, .tabela-rolagem, .folha, .chat, .lateral, .codigo-bloco { scrollbar-width: thin; scrollbar-color: #3a3a42 transparent; }
}
.rolagem { overflow: auto; overscroll-behavior: contain; }

/* ---------- o que aparece só no celular ou só no computador */
@media (max-width: 1023px) { .so-pc { display: none !important; } }
@media (min-width: 1024px) { .so-celular { display: none !important; } }

/* ---------- largura útil: o app usa a tela toda no computador */
@media (min-width: 720px) and (max-width: 1023px) { main.larga { max-width: 920px; } }
@media (min-width: 1024px) { body.com-lateral main.larga { max-width: 1520px; } }
.branco { color: var(--texto); }
.linha-botoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.linha-botoes .botao { flex: 1 1 auto; }
.pequeno-btn { width: 34px; height: 34px; min-height: 0; }
.pequeno-btn svg { width: 16px; height: 16px; }

/* ---------- ambientes: plataforma tem identidade própria (azul), barbearia segue no dourado */
.lat-topo.trocador { width: 100%; border: 1px solid #2a2a30; background: #1d1d21; border-radius: 12px; padding: 10px; margin-bottom: 4px; color: var(--texto); text-align: left; cursor: pointer; }
.lat-topo.trocador:hover { background: #24242a; border-color: #3a3a42; }
.lat-cont { margin-left: auto; background: #3a1a12; color: #ffb59a; border-radius: 99px; padding: 1px 8px; font-size: 11px; font-weight: 800; }
.item.escolha.atual { border: 1.5px solid var(--ouro); background: var(--ouro-fundo); }
.item.escolha:not(:disabled):hover { border-color: #4a4a52; }
body[data-ambiente="plataforma"] .lateral { background: #13171d; border-right-color: #232a35; }
body[data-ambiente="plataforma"] .lat-topo.trocador { background: #18202b; border-color: #26324a; }
body[data-ambiente="plataforma"] .lat-topo .ouro { color: #9cc4ff !important; }
body[data-ambiente="plataforma"] .lat-item[aria-current="page"] { background: #1d2a3a; }
body[data-ambiente="plataforma"] .lat-item[aria-current="page"] svg { color: #9cc4ff; }
body[data-ambiente="plataforma"] .lat-item:hover { background: #1a212b; }

/* ---------- Hoje */
.hoje-grade { display: flex; flex-direction: column; gap: 16px; }
.mini-cartao.fundo { background: var(--fundo); }
.linha-ag { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 2px; border: 0; border-top: 1px solid #26262b; background: transparent; color: var(--texto); text-align: left; cursor: pointer; }
.linha-ag:first-child { border-top: 0; }
.linha-ag:hover { background: #222227; border-radius: 10px; }
.linha-ag time { width: 44px; flex: none; font: 600 13px Sora, sans-serif; color: var(--suave); }
.linha-ag.passou { opacity: .5; }
.item.linha-lanc { background: transparent; border-radius: 0; padding: 10px 0; border-top: 1px solid #26262b; }
.pilha > .item.linha-lanc:first-child { border-top: 0; }
@media (min-width: 1024px) {
  .hoje-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .hoje-c { grid-column: 1 / -1; }
}
@media (min-width: 1440px) {
  .hoje-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); }
  .hoje-c { grid-column: auto; }
}

/* ---------- Agenda */
.dia { cursor: pointer; color: var(--texto); }
.dia.eh-hoje:not([aria-pressed="true"]) { border-color: var(--ouro); }
.dia.eh-hoje:not([aria-pressed="true"]) small { color: var(--ouro); }
.agenda-grade { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 1024px) {
  .agenda-grade { display: grid; grid-template-columns: minmax(0, 1fr) 290px; align-items: start; }
  .agenda-lado { position: sticky; top: 20px; }
  .dias { max-width: 720px; }
}
.calendario { overflow: hidden; gap: 0; }
.cal-cab, .cal-corpo { display: grid; }
.cal-cab { border-bottom: 1px solid var(--linha); padding: 12px 0; }
.cal-prof { display: flex; align-items: center; gap: 10px; padding: 0 12px; min-width: 0; }
.cal-prof b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-prof .mini { margin-left: auto; white-space: nowrap; }
.cal-corpo { position: relative; max-height: calc(100dvh - 330px); min-height: 360px; padding-bottom: 8px; }
.cal-horas { position: relative; }
.cal-horas span { position: absolute; right: 10px; transform: translateY(4px); font: 600 11px Sora, sans-serif; color: var(--apagado); }
.cal-col { position: relative; border-left: 1px solid #26262b; background-image: repeating-linear-gradient(to bottom, #26262b 0 1px, transparent 1px 46px); }
.cal-pausa { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(135deg, #1b1b1f 0 8px, #202025 8px 16px); display: flex; align-items: center; justify-content: center; }
.cal-pausa span { font-size: 11px; font-weight: 700; color: var(--apagado); letter-spacing: .06em; text-transform: uppercase; }
.cal-livre { position: absolute; left: 4px; right: 4px; border: 1px dashed transparent; border-radius: 10px; background: transparent; color: var(--ouro); font-size: 12px; font-weight: 700; display: flex; align-items: center; padding: 0 10px; cursor: pointer; }
.cal-livre span { opacity: 0; transition: opacity .12s; }
.cal-livre:hover, .cal-livre:focus-visible { border-color: #5a4a2a; background: rgba(217, 165, 78, .06); }
.cal-livre:hover span, .cal-livre:focus-visible span { opacity: 1; }
.cal-ev { position: absolute; left: 6px; right: 6px; z-index: 2; border: 0; border-left: 3px solid var(--ouro); border-radius: 10px; background: #2a2318; color: var(--texto); padding: 6px 10px; display: flex; flex-direction: column; gap: 1px; text-align: left; overflow: hidden; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, .25); }
.cal-ev:hover { filter: brightness(1.12); }
.cal-ev b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev span { font-size: 12px; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev i { font-style: normal; font-size: 11px; font-weight: 800; color: var(--ouro); }
.cal-ev.confirmado { border-left-color: var(--verde); background: #17291f; }
.cal-ev.confirmado i { color: var(--verde); }
.cal-ev.concluido { border-left-color: var(--apagado); background: #222226; opacity: .7; }
.cal-ev.concluido i { color: var(--suave); }
.cal-ev.faltou { border-left-color: var(--coral); background: #2c1913; }
.cal-ev.faltou i { color: var(--coral); }
.cal-agora { position: absolute; left: 58px; right: 0; height: 0; border-top: 2px solid var(--coral); z-index: 3; pointer-events: none; }
.cal-agora::before { content: ''; position: absolute; left: -5px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--coral); }
.cal-agora span { position: absolute; left: -54px; top: -9px; font: 800 10px Sora, sans-serif; color: var(--coral); }

/* ---------- Lançar */
.lancar-grade { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 1024px) {
  .lancar-grade { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr); align-items: start; }
  .lancados { position: sticky; top: 20px; max-height: calc(100dvh - 120px); overflow: auto; }
}
.exemplos { display: flex; flex-wrap: wrap; gap: 6px; }
.exemplos .chip { color: var(--texto); cursor: pointer; white-space: normal; text-align: left; min-height: 34px; padding: 6px 12px; line-height: 1.3; }
.exemplos .chip:hover { border-color: var(--ouro); color: var(--ouro); }
.resumo-plano { border-color: #5a4a2a; }

/* ---------- Clientes e ficha */
.pacote-linha { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid #26262b; }
.pacote-linha:first-of-type { border-top: 0; }
.pacote-linha.inativo { opacity: .5; }
.pacote-saldo { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.pacote-saldo b { font: 700 22px Sora, sans-serif; color: var(--ouro); }
.grade-pacotes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.pacote-cartao { text-align: left; color: var(--texto); cursor: pointer; gap: 8px; min-height: 190px; }
.pacote-cartao:hover { border-color: #4a4a52; }
.pacote-preco { font: 700 26px Sora, sans-serif; }
@media (min-width: 1024px) {
  .duas-colunas { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); }
  .duas-colunas:has(> .col-larga:first-child) { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); }
  .duas-colunas > * { min-width: 0; }
}

/* ---------- Caixa */
.comissao-linha { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-top: 1px solid #26262b; }
.comissao-linha:first-of-type { border-top: 0; padding-top: 0; }

/* ---------- Simulador */
.simulador-grade { display: flex; flex-direction: column; gap: 16px; }
.telefone { display: flex; flex-direction: column; gap: 10px; }
.telefone-topo { display: flex; align-items: center; gap: 10px; padding: 4px 6px; }
@media (min-width: 1024px) {
  .simulador-grade { display: grid; grid-template-columns: minmax(360px, 430px) minmax(0, 1fr); align-items: start; gap: 28px; }
  .telefone { background: #0b0f0d; border: 1px solid #24302b; border-radius: 32px; padding: 14px; box-shadow: 0 30px 70px rgba(0, 0, 0, .45), inset 0 0 0 6px #121815; }
  .telefone .chat { height: min(62dvh, 620px); max-height: none; border: 0; background: #0f1513; }
}

/* ---------- Ajustes */
.grade-ajustes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 16px; align-items: start; }

/* ---------- entrada: formulário + novidades, com o N da marca ao fundo */
.acesso-grade { position: relative; z-index: 1; }
.acesso-novidades { max-width: 400px; margin: 8px auto 0; display: flex; flex-direction: column; gap: 14px; }
.acesso-novidades h2 { margin: 0; }
.acesso-novidades ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.acesso-novidades li { display: flex; flex-direction: column; gap: 3px; padding: 14px 0; border-top: 1px solid var(--linha); }
.acesso-novidades li b { font-size: 15px; }
.acesso-novidades li p { margin: 0; color: var(--suave); font-size: 13.5px; line-height: 1.5; }
.nov-plano { color: var(--ouro); font-weight: 700; }
@media (min-width: 1024px) {
  body.modo-acesso main { max-width: 1040px; }
  .acesso-grade { display: grid; grid-template-columns: minmax(380px, 420px) minmax(280px, 340px); justify-content: center; gap: 72px; align-items: center; min-height: calc(100dvh - 64px); }
  .acesso-grade .acesso { min-height: 0; margin: 0; }
  .acesso-novidades { margin: 0; }
}
.acesso-fundo { position: fixed; inset: 0; z-index: 0; pointer-events: none; display: grid; place-items: center; overflow: hidden; }
.acesso-fundo svg { width: min(86vh, 64vw); height: auto; opacity: .09; }
.acesso-fundo path { stroke-width: .9; stroke-dasharray: 1; vector-effect: none; }
.acesso-fundo .n-traco { stroke: #f4f1ea; animation: n-desenha 2.4s cubic-bezier(.22, 1, .36, 1) both; }
.acesso-fundo .n-barra { stroke: var(--ouro); fill: var(--ouro); fill-opacity: 0; animation: n-desenha 1s cubic-bezier(.22, 1, .36, 1) both, n-enche 1.2s ease-out both; animation-delay: calc(1.2s + var(--i) * .15s), calc(2s + var(--i) * .15s); }
.acesso-fundo::after { content: ''; position: absolute; inset: 0; background: radial-gradient(38% 34% at 50% 42%, rgba(217, 165, 78, .09), transparent 70%); opacity: .5; animation: n-respira 9s ease-in-out 2.4s infinite alternate; }
@keyframes n-desenha { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes n-enche { to { fill-opacity: .5; } }
@keyframes n-respira { to { opacity: 1; } }
@media (max-width: 1023px) { .acesso-fundo { place-items: start center; } .acesso-fundo svg { width: 130vw; margin-top: -6vh; opacity: .06; } }
@media (prefers-reduced-motion: reduce) { .acesso-fundo *, .acesso-fundo::after { animation: none !important; } }
.cabecalho-largo .acoes-topo:has(> .busca) { flex: 1 1 420px; max-width: 600px; flex-wrap: nowrap; justify-content: flex-end; }
.acoes-topo > .busca { flex: 1 1 260px; min-width: 0 !important; }
@media (max-width: 1023px) {
  /* topo com só o botão redondo (ajustes, voltar): fica na mesma linha do título */
  .acoes-topo:not(:has(> :not(.so-pc):not(.so-celular))) { width: auto !important; margin-left: auto; }
}
.cal-ev > * { flex: none; line-height: 1.3; }
.cal-ev.curto { flex-direction: row; align-items: center; gap: 8px; padding: 0 10px; }
.cal-ev.curto span { flex: 1 1 auto; min-width: 0; }
.cal-ev.curto b { max-width: 45%; }
.botao.pequeno-alto { min-height: 36px; padding: 0 12px; font-size: 13px; }

/* ---------- conta pelo nome no rodapé do menu, sino de notificações */
.lat-conta { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 6px; margin: -6px 0 -6px -6px; border-radius: 10px; color: var(--texto); text-decoration: none; }
.lat-conta:hover, .lat-conta[aria-current="page"] { background: #222227; }
.lat-conta b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sino { position: relative; border: 0; cursor: pointer; color: var(--suave); display: inline-flex; align-items: center; justify-content: center; }
.sino.avatar { color: var(--texto); }
.sino:hover { color: var(--texto); }
.sino svg { width: 20px; height: 20px; }
.sino-cont { position: absolute; top: 2px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--coral); color: #1a0d07; font: 800 10px/17px Manrope, sans-serif; text-align: center; box-shadow: 0 0 0 2px var(--fundo); }
.notif { display: flex; gap: 12px; align-items: flex-start; width: 100%; padding: 12px; border: 0; border-radius: 12px; background: transparent; color: var(--texto); cursor: pointer; }
.notif:hover { background: #232329; }
.notif-ponto { flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: transparent; }
.notif.nova { background: #1f1c17; }
.notif.nova .notif-ponto { background: var(--ouro); }
@media (min-width: 1024px) {
  .folha-fundo.lado-direita { justify-content: flex-end; align-items: stretch; padding: 0; }
  .folha-fundo.lado-direita .folha { border-radius: 0; max-height: none; height: 100%; box-shadow: -24px 0 60px rgba(0,0,0,.45); border-left: 1px solid #2e2e35; }
}
.lat-usuario { gap: 4px; }

.abas[data-ambiente="plataforma"] a[aria-current="page"] { color: #9cc4ff; }
.abas svg { width: 24px; height: 24px; }
.abas[data-ambiente="plataforma"] { justify-content: space-between; padding-left: 4px; padding-right: 4px; }
.abas[data-ambiente="plataforma"] a { width: auto; flex: 1; font-size: 10.5px; }
.pix-caixa { display: flex; gap: 16px; align-items: center; padding: 14px; border-radius: 16px; background: var(--fundo); border: 1px solid var(--linha); flex-wrap: wrap; }
.pix-caixa img { border-radius: 10px; background: #fff; flex: none; }
.pix-codigo { display: block; font: 11px/1.5 ui-monospace, Consolas, monospace; color: #d6d3cd; word-break: break-all; max-height: 96px; overflow: auto; padding: 8px; border-radius: 8px; background: #0d0d0f; }
@media (max-width: 560px) {
  .pix-caixa { flex-direction: column; align-items: stretch; }
  .pix-caixa img { align-self: center; }
}
@media (min-width: 1024px) { .grade-kpis.seis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1500px) { .grade-kpis.seis { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.marca-barb { object-fit: contain; background: #fff; flex: none; }
.citacao { display: block; border-left: 3px solid var(--ouro); padding: 1px 0 1px 8px; margin: 2px 0; color: #d6d3cd; }
.previsao-grade { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: 20px; align-items: start; }
@media (max-width: 900px) { .previsao-grade { grid-template-columns: minmax(0, 1fr); } }
.fluxo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; align-items: end; height: 220px; }
.fluxo-col { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; border-radius: 8px; padding: 4px 0; }
.fluxo-col.atual { background: #1d1d21; }
.fluxo-barra { width: 70%; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; }
.fluxo-barra i { display: block; border-radius: 4px; min-height: 3px; }
.fluxo-valor { font: 700 10px Sora, sans-serif; color: var(--suave); white-space: nowrap; }
@media (max-width: 560px) { .fluxo-valor { display: none; } .fluxo { height: 170px; gap: 3px; } }
/* barbearia pausada */
.pausa-topo { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pausa-selo { font-size: 12px; font-weight: 800; padding: 4px 12px; border-radius: 99px; background: var(--ouro-fundo); color: var(--ouro); }
.pausa-guardado { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pausa-guardado div { background: var(--fundo); border: 1px solid var(--linha); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 2px; }
.pausa-guardado b { font: 700 20px Sora, sans-serif; }
.pausa-guardado span { font-size: 12px; color: var(--suave); }
.via { display: inline-block; font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: 99px; margin-top: 6px; white-space: nowrap; }
.bolha .via { display: block; width: fit-content; }
.via-regras { background: #232329; color: #c9c5bc; }
.via-ia { background: #2a2216; color: var(--ouro); }
.via-aprendido { background: #16261d; color: #6fd39a; }
.apr-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 700px) { .apr-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.apr-linha { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--linha); }
.apr-linha:first-child { border-top: 0; }
.apr-tipo { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--cartao2); font-size: 16px; }
.apr-conf { display: inline-flex; gap: 3px; vertical-align: middle; }
.apr-conf i { width: 8px; height: 8px; border-radius: 50%; background: var(--linha); }
.apr-conf i.on { background: var(--ouro); }
.apr-filtros { display: flex; gap: 6px; flex-wrap: wrap; }
/* agendamento online */
.grade-online { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1023px) { .grade-online { grid-template-columns: minmax(0, 1fr); } }
.link-online { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.link-online img { border-radius: 12px; background: #fff; padding: 6px; flex: none; }

/* Marketing: modelos | arte | ajustes */
.mkt-grade { display: grid; grid-template-columns: 210px minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.mkt-modelos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; position: sticky; top: 12px; max-height: calc(100vh - 40px); overflow-y: auto; padding-right: 4px; }
.mkt-modelo { display: flex; flex-direction: column; gap: 6px; padding: 6px; border-radius: 12px; border: 1px solid var(--linha); background: var(--cartao); color: var(--texto); font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; text-align: center; line-height: 1.2; }
.mkt-modelo canvas { width: 100%; height: auto; border-radius: 8px; display: block; background: #111; }
.mkt-modelo[aria-pressed="true"] { border-color: var(--ouro); box-shadow: 0 0 0 2px var(--ouro) inset; }
.mkt-modelo:hover { border-color: var(--ouro); }
.mkt-palco { display: flex; justify-content: center; align-items: flex-start; position: sticky; top: 12px; }
.mkt-palco canvas { max-width: 100%; max-height: calc(100vh - 60px); width: auto; height: auto; border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.mkt-lado .campo, .mkt-lado .linha-campo { margin-bottom: 10px; }
.mkt-lado textarea { width: 100%; min-height: 120px; resize: vertical; }
@media (max-width: 1279px) { .mkt-grade { grid-template-columns: 180px minmax(0, 1fr) 320px; } }
@media (max-width: 1023px) {
  .mkt-grade { grid-template-columns: 1fr; }
  .mkt-modelos { position: static; max-height: none; display: flex; overflow-x: auto; padding-bottom: 6px; }
  .mkt-modelo { flex: 0 0 104px; }
  .mkt-palco { position: static; }
  .mkt-palco canvas { max-height: 70vh; }
}

.avatar-foto { object-fit: cover; padding: 0; border-radius: 50%; background: var(--cartao2); }
.foto-perfil { display: flex; gap: 14px; align-items: center; padding: 12px; border: 1px solid var(--linha); border-radius: 14px; margin: 4px 0 12px; }
.foto-perfil .avatar { width: 72px; height: 72px; flex: none; font-size: 22px; }
.zap-barbearia { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.zap-barbearia .qr { width: 220px; height: 220px; border-radius: 12px; background: #fff; padding: 8px; flex: none; }
.zap-passos { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.avatar-troca { display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; flex: none; }
.avatar-troca .avatar { width: 52px; height: 52px; }
.mkt-estilos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 4px; }
.mkt-estilos button { padding: 12px 8px; border-radius: 12px; border: 1px solid var(--linha); background: var(--fundo); color: var(--texto); font-size: 19px; cursor: pointer; line-height: 1; }
.mkt-estilos button[aria-pressed="true"] { border-color: var(--ouro); background: var(--ouro-fundo); color: var(--ouro); }
.chips-aviso { display: flex; flex-wrap: wrap; gap: 6px; }
.chips-aviso .chip-check { border: 1px solid var(--linha); border-radius: 18px; padding: 0 12px; min-height: 36px; font-size: 12.5px; }
/* relatórios: escolhas à esquerda, prévia em folha A4 à direita */
.rel-grade { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 18px; align-items: start; }
.modelo-linha { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 14px; border: 1px solid var(--linha); background: var(--fundo); color: var(--texto); text-align: left; cursor: pointer; font: inherit; }
.modelo-linha[aria-pressed="true"] { border-color: var(--ouro); background: var(--ouro-fundo); }
.modelo-ic { width: 38px; height: 38px; border-radius: 10px; background: var(--cartao2); display: grid; place-items: center; flex: none; color: var(--ouro); }
.modelo-ic svg { width: 18px; height: 18px; }
.per-opcoes { display: flex; flex-wrap: wrap; gap: 6px; }
.rel-previa { position: sticky; top: 16px; background: var(--cartao); border: 1px solid var(--linha); border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.rel-previa-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.rel-papel { background: #3a3a40; border-radius: 12px; padding: 14px; height: calc(100vh - 170px); min-height: 520px; }
.rel-papel iframe { width: 100%; height: 100%; border: 0; border-radius: 6px; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
@media (max-width: 1023px) {
  .rel-grade { grid-template-columns: minmax(0, 1fr); }
  .rel-previa { position: static; }
  .rel-papel { height: 70vh; min-height: 420px; padding: 8px; }
}

/* detalhe de lançamento */
.det-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; padding: 12px; border-radius: 14px; background: var(--fundo); border: 1px solid var(--linha); }
.det-grade > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.det-grade b { font-size: 14px; }
.det-itens { display: flex; flex-direction: column; gap: 8px; padding: 4px 2px; }
.det-itens .linha-flex { font-size: 14px; }
.det-msg { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-left: 3px solid var(--ouro); background: var(--ouro-fundo); border-radius: 0 10px 10px 0; }
.det-hist summary { cursor: pointer; color: var(--suave); font-weight: 700; }
.hist-linha { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-top: 1px solid var(--linha); }
/* lançar passo a passo */
.form-lancar { gap: 18px; }
.tipos-l { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.tipo-l { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; border-radius: 14px; border: 1px solid var(--linha); background: var(--fundo); color: var(--texto); font: 700 14px Manrope, sans-serif; cursor: pointer; }
.tipo-l svg { width: 20px; height: 20px; }
.tipo-l[aria-pressed="true"] { border-color: var(--ouro); background: var(--ouro-fundo); color: var(--ouro); }
.passo-l { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--linha); }
.passo-l-topo { display: flex; align-items: center; gap: 10px; }
.passo-l-topo h3 { font-size: 15px; font-weight: 800; }
.passo-n { width: 24px; height: 24px; border-radius: 50%; background: var(--cartao2); color: var(--ouro); display: grid; place-items: center; font: 800 12px Manrope, sans-serif; flex: none; }
.entrada-l { min-height: 48px; font-size: 15px; }
.profs-l { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.prof-l { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 12px; min-width: 84px; border-radius: 14px; border: 1px solid var(--linha); background: var(--fundo); color: var(--texto); font: 700 12.5px Manrope, sans-serif; cursor: pointer; }
.prof-l[aria-pressed="true"] { border-color: var(--ouro); background: var(--ouro-fundo); }
.itens-l { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.item-l { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--linha); background: var(--fundo); color: var(--texto); text-align: left; cursor: pointer; font: inherit; }
.item-l b { font-size: 13.5px; }
.item-l span { font-size: 12px; color: var(--suave); }
.item-l:hover { border-color: var(--ouro); }
.item-l[aria-pressed="true"] { border-color: var(--ouro); background: var(--ouro-fundo); }
.item-l.prod b::before { content: '🧴 '; }
.carrinho { display: flex; flex-direction: column; border: 1px solid var(--linha); border-radius: 12px; overflow: hidden; }
.carrinho-linha { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-top: 1px solid var(--linha); }
.carrinho-linha:first-child { border-top: 0; }
.qtd { display: inline-flex; align-items: center; gap: 8px; }
.qtd button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--linha); background: var(--cartao2); color: var(--texto); font-size: 16px; cursor: pointer; line-height: 1; }
.formas-l { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.forma-l { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 11px 6px; border-radius: 12px; border: 1px solid var(--linha); background: var(--fundo); color: var(--texto); font: 700 12.5px Manrope, sans-serif; cursor: pointer; }
.forma-l svg { width: 20px; height: 20px; }
.forma-l[aria-pressed="true"] { border-color: var(--ouro); background: var(--ouro-fundo); color: var(--ouro); }
.dias-l { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.dia-l { display: flex; flex-direction: column; align-items: center; min-width: 56px; padding: 8px 6px; border-radius: 12px; border: 1px solid var(--linha); background: var(--fundo); color: var(--texto); cursor: pointer; }
.dia-l small { font-size: 10.5px; font-weight: 800; color: var(--suave); }
.dia-l b { font: 700 18px Sora, sans-serif; }
.dia-l[aria-pressed="true"] { border-color: var(--ouro); background: var(--ouro-fundo); }
.horas-l { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
.hora-l { padding: 10px 4px; border-radius: 10px; border: 1px solid var(--linha); background: var(--fundo); color: var(--texto); font: 700 14px Sora, sans-serif; cursor: pointer; }
.hora-l[aria-pressed="true"] { border-color: var(--ouro); background: var(--ouro); color: var(--ouro-escuro); }
@media (max-width: 560px) { .formas-l { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .tipos-l { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tipo-l { flex-direction: column; gap: 4px; min-height: 62px; font-size: 12.5px; }
}

/* cartão fidelidade */
.selos-fid { display: grid; grid-template-columns: repeat(var(--n, 10), 14px); gap: 5px; margin: 2px 0 4px; }
.selos-fid i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px dashed #4a4a52; }
.selos-fid i.on { background: var(--ouro); border: 0; }
.fid-cartao-previa { border: 1px solid var(--linha); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; background: var(--fundo); }
.fid-cartao-previa .selos-fid { grid-template-columns: repeat(var(--n, 10), 22px); gap: 8px; }
.fid-cartao-previa .selos-fid i { width: 22px; height: 22px; }
.premio-fid { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--ouro); border-radius: 14px; }
#fFid select { min-width: 0; max-width: 62%; }

/* instalar o app na tela inicial */
.cartao.instalar-caixa { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; text-align: left; gap: 12px; padding: 14px; border: 1px solid var(--ouro-fundo); }
.instalar-caixa img { border-radius: 11px; flex: none; }
.icone-fechar { width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; color: var(--suave); font-size: 22px; line-height: 1; cursor: pointer; }
.instalar-item { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.guia-instalar { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 14px; }
.guia-instalar li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; font-size: 15px; line-height: 1.5; }
.guia-n { width: 30px; height: 30px; border-radius: 50%; background: var(--ouro-fundo); color: var(--ouro); display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.ic-guia { width: 20px; height: 20px; stroke: var(--ouro); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -4px; }
.acesso-extra { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 14px; font-size: 14px; }
.acesso-extra a { color: var(--suave); text-decoration: none; padding: 8px; }
.acesso-extra a b { color: var(--ouro); }

/* planos */
.bloqueio-plano { align-items: flex-start; gap: 12px; max-width: 560px; }
.bloqueio-plano h2 { font-size: 19px; }
.bloqueio-plano p { margin: 0; font-size: 14.5px; line-height: 1.55; }
.bloqueio-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--ouro-fundo); display: grid; place-items: center; }
.bloqueio-ic svg { width: 22px; height: 22px; stroke: var(--ouro); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.faixa-teste { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--ouro-fundo); text-decoration: none; color: var(--texto); }
.faixa-teste b { font-size: 14px; } .faixa-teste span { font-size: 12.5px; color: var(--suave); }
.faixa-teste .seta { margin-left: auto; color: var(--ouro); font-weight: 800; font-size: 13px; white-space: nowrap; }
.grade-planos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; align-items: stretch; }
.plano-app { background: var(--cartao); border: 1px solid var(--linha); border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.plano-app.atual { border-color: var(--verde); }
.plano-app.destaque { border-color: var(--ouro); }
.plano-app .topo-plano { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.plano-app .valor-plano { font: 600 28px Sora, sans-serif; font-variant-numeric: tabular-nums; }
.plano-app .valor-plano small { font: 500 13px Manrope, sans-serif; color: var(--suave); }
.plano-app .de { font-size: 13px; color: var(--suave); text-decoration: line-through; }
.plano-app ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13.5px; }
.plano-app li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start; }
.plano-app li svg { width: 16px; height: 16px; stroke: var(--ouro); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }
.plano-app li.nao { color: var(--apagado); } .plano-app li.nao svg { stroke: var(--apagado); }
.plano-app .botao { margin-top: auto; }
.uso-plano { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }

/* aviso de nova versão */
.nova-versao { position: fixed; left: 50%; bottom: calc(var(--abas) + 16px + env(safe-area-inset-bottom)); transform: translate(-50%, 12px); opacity: 0; z-index: 40; width: min(440px, calc(100% - 24px)); display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; background: var(--cartao2); border: 1px solid var(--ouro); border-radius: 16px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); transition: transform 250ms cubic-bezier(0.22, 1, 0.36, 1), opacity 250ms; }
.nova-versao.on { transform: translate(-50%, 0); opacity: 1; }
.nova-versao b { font-size: 14px; } .nova-versao span { font-size: 12.5px; color: var(--suave); }
.nova-versao .botao { margin-left: auto; flex: none; }
body.modo-acesso .nova-versao { bottom: 24px; }
@media (min-width: 1024px) { body.com-lateral .nova-versao { bottom: 24px; left: calc(50% + 128px); } }
@media (prefers-reduced-motion: reduce) { .nova-versao { transition: none; } }

/* listas que não podem cortar o texto (ex.: planos no Financeiro) */
.item.quebra .corpo b, .item.quebra .corpo span { white-space: normal; overflow: visible; text-overflow: clip; }
.item.quebra .corpo b { line-height: 1.45; }
.item.quebra .badge { white-space: nowrap; }
.acesso-rodape a { color: var(--suave); }
.espera-dia { gap: 10px; }
.chip-espera { display: inline-flex; gap: 6px; align-items: baseline; border: 1px solid var(--linha); border-radius: 99px; padding: 6px 12px; font-size: 13.5px; }

/* site da barbearia: prévia da foto de capa */
.capa-site { aspect-ratio: 16 / 7; border: 1px dashed var(--linha); border-radius: 14px; overflow: hidden; display: grid; place-items: center; background: var(--cartao2, transparent); }
.capa-site img { width: 100%; height: 100%; object-fit: cover; }

.bot-caixa { display: flex; flex-direction: column; gap: 12px; }