/* KYRON Studios — conceito cliente aprovado v2.
   Camada isolada da área cliente; herda tema claro/escuro e as quatro cores do negócio. */

.cliente-app {
  --cliente-raio: 20px;
  --cliente-sombra: 0 18px 44px color-mix(in srgb, var(--client-text) 10%, transparent);
  width: min(100%, 500px) !important;
  min-height: 100dvh;
  margin: 0 auto !important;
  padding: 0 18px calc(118px + env(safe-area-inset-bottom)) !important;
  background: var(--client-bg) !important;
  color: var(--client-text) !important;
}
.cliente-app *,
.cliente-auth-shell * { box-sizing: border-box; }
.cliente-icone {
  width: 24px;
  height: 24px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cliente-auth-card [data-alternar-pin="login-pin"] {
  min-width: 50px;
  display: grid;
  place-items: center;
  padding: 10px;
}
.cliente-auth-card [data-alternar-pin="login-pin"] .cliente-icone {
  width: 21px;
  height: 21px;
}

/* Marca e início */
.cliente-app-topbar {
  min-height: 88px !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 0 14px !important;
  border-bottom: 1px solid var(--client-border);
  background: var(--client-bg) !important;
}
.cliente-app-marca {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.cliente-app-logo {
  width: 52px !important;
  height: 52px !important;
  flex: 0 0 52px;
  border: 1px solid var(--brand-primary);
  border-radius: 16px !important;
  background-color: color-mix(in srgb, var(--brand-primary) 10%, var(--client-surface)) !important;
  background-size: cover !important;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand-primary) 7%, transparent);
}
.cliente-app-marca small {
  display: block;
  margin-bottom: 3px;
  color: var(--brand-primary) !important;
  font-size: .59rem !important;
  font-weight: 900;
  letter-spacing: .14em;
}
.cliente-app-marca strong {
  display: block;
  overflow: hidden;
  color: var(--client-text) !important;
  font-size: 1.02rem !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cliente-app-avatar {
  width: 44px !important;
  height: 44px !important;
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  overflow: hidden;
  border: 1px solid var(--client-border);
  border-radius: 50%;
  background: var(--client-surface-alt);
  color: var(--brand-primary);
  text-decoration: none;
  font-weight: 900;
}
.cliente-app-avatar img { width: 100%; height: 100%; object-fit: cover; }

.cliente-inicio { display: grid; gap: 16px; padding-top: 20px; }
.cliente-confirmacao-recente {
  display: grid;
  gap: 6px;
  padding: 14px 15px;
  border: 1px solid #a77a2d;
  border-radius: 16px;
  background: #241d10;
  color: #fff8e8;
}
.cliente-confirmacao-recente strong { color: #ffd477; font-size: .82rem; }
.cliente-confirmacao-recente p { margin: 0; color: #fff8e8; font-size: .74rem; line-height: 1.5; }
.cliente-confirmacao-recente a { color: #ffd477; font-size: .74rem; font-weight: 900; }
.cliente-inicio-hero {
  display: grid !important;
  gap: 20px;
  padding: 4px 0 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.cliente-inicio-hero > div { display: grid; gap: 8px; }
.cliente-inicio-hero p {
  margin: 0 !important;
  color: var(--brand-primary) !important;
  font-size: .9rem !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}
.cliente-inicio-hero h1 {
  max-width: 380px;
  margin: 0 !important;
  color: var(--client-text) !important;
  font-size: clamp(2rem, 9vw, 2.75rem) !important;
  line-height: 1.06 !important;
  letter-spacing: -.035em;
}
.cliente-inicio-hero > div > span {
  color: var(--client-muted) !important;
  font-size: .9rem !important;
  line-height: 1.45;
}
#cliente-iniciar-agendamento {
  width: 100%;
  min-height: 58px !important;
  display: flex !important;
  align-items: center;
  justify-content: center !important;
  gap: 10px;
  margin: 0 !important;
  padding: 12px 18px !important;
  border: 0 !important;
  border-radius: 15px !important;
  background: var(--brand-primary) !important;
  color: var(--brand-primary-text) !important;
  box-shadow: 0 14px 28px var(--brand-glow);
  font-size: .94rem;
  font-weight: 950;
}
#cliente-iniciar-agendamento .cliente-icone { width: 22px; height: 22px; }

.cliente-proximo-card,
.cliente-card {
  margin: 0 !important;
  padding: 18px !important;
  border: 1px solid var(--client-border) !important;
  border-radius: var(--cliente-raio) !important;
  background: var(--client-surface) !important;
  color: var(--client-text) !important;
  box-shadow: var(--cliente-sombra) !important;
}
.cliente-secao-cabecalho {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
}
.cliente-secao-cabecalho small {
  color: var(--brand-primary) !important;
  font-size: .58rem !important;
  font-weight: 950;
  letter-spacing: .11em;
}
.cliente-secao-cabecalho h2 {
  margin: 3px 0 0 !important;
  color: var(--client-text) !important;
  font-size: 1.02rem !important;
}
.cliente-secao-cabecalho a { color: var(--brand-primary) !important; font-size: .7rem; font-weight: 850; }

.cliente-proximo-agendamento {
  display: grid !important;
  grid-template-columns: 62px minmax(0,1fr) 30px !important;
  align-items: center;
  gap: 12px;
}
.cliente-proximo-data {
  min-height: 70px;
  display: grid !important;
  place-content: center;
  justify-items: center;
  border-radius: 17px !important;
  background: color-mix(in srgb, var(--brand-primary) 12%, var(--client-surface-alt)) !important;
  color: var(--brand-primary) !important;
}
.cliente-proximo-data .cliente-icone { width: 21px; height: 21px; margin-bottom: 3px; }
.cliente-proximo-data strong { color: inherit !important; font-size: .92rem !important; line-height: 1; }
.cliente-proximo-data span { color: inherit !important; font-size: .52rem !important; }
.cliente-proximo-agendamento > div:nth-child(2) { min-width: 0; }
.cliente-proximo-agendamento small { color: var(--brand-primary) !important; font-size: .55rem !important; font-weight: 950; }
.cliente-proximo-agendamento > div:nth-child(2) > strong {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: var(--client-text) !important;
  font-size: 1.06rem !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cliente-proximo-agendamento p { margin: 4px 0 0 !important; color: var(--client-muted) !important; font-size: .73rem !important; }
.cliente-proximo-agendamento > a { color: var(--brand-primary) !important; }
.cliente-proximo-agendamento > a .cliente-icone { width: 22px; height: 22px; }

.cliente-proximo-vazio { grid-template-columns: 52px minmax(0,1fr) !important; }
.cliente-proximo-vazio > span {
  width: 52px !important;
  height: 52px !important;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: var(--client-surface-alt);
  color: var(--brand-primary);
}
.cliente-proximo-vazio > span .cliente-icone { width: 24px; height: 24px; }
.cliente-proximo-vazio button { background: var(--brand-primary) !important; color: var(--brand-primary-text) !important; }

.cliente-acesso-rapido { display: grid; gap: 10px; }
.cliente-acesso-rapido h2 { margin: 2px 0 0; color: var(--client-text); font-size: .9rem; }
.cliente-atalhos {
  display: grid !important;
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  gap: 9px !important;
}
.cliente-atalhos > * {
  min-width: 0;
  min-height: 100px !important;
  display: grid !important;
  place-content: center;
  justify-items: center;
  gap: 10px;
  padding: 12px 7px !important;
  border: 1px solid var(--client-border) !important;
  border-radius: 17px !important;
  background: var(--client-surface) !important;
  color: var(--client-text) !important;
  text-align: center;
  text-decoration: none;
  box-shadow: none !important;
}
.cliente-atalhos > *:active { transform: scale(.97); }
.cliente-atalhos .cliente-icone { width: 28px; height: 28px; color: var(--brand-primary); }
.cliente-atalhos strong { color: var(--client-text) !important; font-size: .66rem !important; line-height: 1.2; }

.sugestao-corte-cliente > span { color: var(--brand-primary); }
.sugestao-corte-cliente .cliente-icone { width: 28px; height: 28px; }

/* Fluxo de agendamento */
.cliente-app.modo-agendamento { padding-bottom: 28px !important; }
.cliente-fluxo { min-height: calc(100dvh - 28px) !important; }
.cliente-fluxo-topo {
  top: 0;
  min-height: 82px !important;
  grid-template-columns: 44px minmax(0,1fr) 44px !important;
  padding: 10px 0 !important;
  background: color-mix(in srgb, var(--client-bg) 96%, transparent) !important;
}
.cliente-fluxo-topo button,
.cliente-subtopo > a {
  border: 1px solid var(--client-border) !important;
  border-radius: 14px !important;
  background: var(--client-surface) !important;
  color: var(--client-text) !important;
  box-shadow: none !important;
}
.cliente-fluxo-topo small { color: var(--brand-primary) !important; }
.cliente-fluxo-topo h1 { color: var(--client-text) !important; font-size: 1.22rem !important; }
.cliente-fluxo-progresso { height: 4px !important; margin-bottom: 24px !important; background: var(--client-surface-alt) !important; }
.cliente-fluxo-progresso span { background: var(--brand-primary) !important; }
.cliente-etapa-instrucao { margin-bottom: 16px !important; color: var(--client-muted) !important; font-size: .78rem !important; }

/* Serviços idênticos ao conceito: lista vertical, ícone, conteúdo e seleção. */
.cliente-fluxo .lista-servicos {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}
.cliente-fluxo .servico-card {
  min-height: 106px !important;
  display: grid !important;
  grid-template-columns: 58px minmax(0,1fr) 34px !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 15px !important;
  border: 1px solid var(--client-border) !important;
  border-radius: 18px !important;
  background: var(--client-surface) !important;
  color: var(--client-text) !important;
  text-align: left;
  box-shadow: none !important;
}
.cliente-fluxo .servico-card-icone {
  width: 58px;
  height: 58px;
  display: grid !important;
  place-items: center;
  border-radius: 50%;
  background: var(--client-surface-alt);
  color: var(--brand-primary);
}
.cliente-fluxo .servico-card-icone .cliente-icone { width: 31px; height: 31px; }
.cliente-fluxo .servico-card-conteudo { min-width: 0; display: block !important; }
.cliente-fluxo .servico-card-conteudo strong {
  display: block;
  overflow: hidden;
  color: var(--client-text) !important;
  font-size: .98rem !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cliente-fluxo .servico-card-conteudo small { margin-top: 5px !important; color: var(--client-muted) !important; font-size: .7rem !important; }
.cliente-fluxo .servico-card-conteudo b { display: block; margin-top: 7px !important; color: var(--client-text) !important; font-size: .82rem !important; }
.cliente-fluxo .servico-card-selecao {
  width: 28px;
  height: 28px;
  display: grid !important;
  place-items: center;
  border: 2px solid var(--client-muted);
  border-radius: 50%;
  color: transparent;
}
.cliente-fluxo .servico-card-selecao .cliente-icone { width: 16px; height: 16px; }
.cliente-fluxo .servico-card.selecionado {
  border-color: var(--brand-primary) !important;
  background: color-mix(in srgb, var(--brand-primary) 7%, var(--client-surface)) !important;
  color: var(--client-text) !important;
  box-shadow: 0 12px 30px var(--brand-glow) !important;
}
.cliente-fluxo .servico-card.selecionado .servico-card-selecao {
  border-color: var(--brand-primary);
  background: var(--brand-primary);
  color: var(--brand-primary-text);
}

/* Datas e horários */
.cliente-fluxo #lista-datas { gap: 9px !important; }
.cliente-fluxo .botao-data {
  min-width: 78px !important;
  min-height: 94px !important;
  display: grid !important;
  place-content: center;
  gap: 2px;
  border: 1px solid var(--client-border) !important;
  border-radius: 17px !important;
  background: var(--client-surface) !important;
  color: var(--client-text) !important;
}
.cliente-fluxo .botao-data span { color: var(--client-muted) !important; font-size: .66rem !important; text-transform: capitalize; }
.cliente-fluxo .botao-data strong { margin: 0 !important; color: var(--client-text); font-size: 1.32rem !important; }
.cliente-fluxo .botao-data small { color: var(--client-muted); font-size: .6rem; text-transform: capitalize; }
.cliente-fluxo .botao-data.selecionado,
.cliente-fluxo .botao-horario.selecionado {
  border-color: var(--brand-primary) !important;
  background: color-mix(in srgb, var(--brand-primary) 8%, var(--client-surface)) !important;
  color: var(--brand-primary) !important;
  box-shadow: 0 10px 26px var(--brand-glow) !important;
}
.cliente-fluxo .botao-data.selecionado strong,
.cliente-fluxo .botao-data.selecionado span,
.cliente-fluxo .botao-data.selecionado small { color: var(--brand-primary) !important; opacity: 1 !important; }
.cliente-fluxo #lista-horarios {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 10px !important;
}
.cliente-fluxo .botao-horario {
  min-height: 74px !important;
  display: grid;
  place-content: center;
  gap: 4px;
  border: 1px solid var(--client-border) !important;
  border-radius: 16px !important;
  background: var(--client-surface) !important;
  color: var(--client-text) !important;
}
.cliente-fluxo .botao-horario strong { color: inherit; font-size: 1rem !important; }
.cliente-fluxo .botao-horario small { color: var(--client-muted) !important; font-size: .64rem !important; }
.cliente-fluxo .cliente-pausa-horario {
  border-style: dashed !important;
  background: var(--client-surface-alt) !important;
  color: var(--client-muted) !important;
  box-shadow: none !important;
}
.cliente-fluxo #lista-horarios > .botao-horario:last-child:nth-child(odd) { grid-column: 1/-1; }

/* Revisão */
.cliente-etapa-revisao { max-width: 560px; margin: 0 auto; }
.cliente-revisao-card {
  gap: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid var(--brand-primary) !important;
  border-radius: 22px !important;
  background: var(--client-surface) !important;
  color: var(--client-text) !important;
  box-shadow: var(--cliente-sombra) !important;
}
.cliente-revisao-data,
.cliente-confirmacao-ticket-data {
  display: grid;
  grid-template-columns: 46px minmax(0,1fr);
  align-items: center;
  gap: 12px;
  padding: 18px;
  border-bottom: 1px solid var(--client-border);
}
.cliente-revisao-icone,
.cliente-confirmacao-ticket-data > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: color-mix(in srgb, var(--brand-primary) 13%, var(--client-surface-alt));
  color: var(--brand-primary);
}
.cliente-revisao-icone .cliente-icone,
.cliente-confirmacao-ticket-data .cliente-icone { width: 23px; height: 23px; }
.cliente-revisao-data small,
.cliente-confirmacao-ticket-data small { display: block; color: var(--client-muted); font-size: .74rem; line-height: 1.35; }
.cliente-revisao-data strong,
.cliente-confirmacao-ticket-data strong { display: block; margin-top: 3px; color: var(--brand-primary); font-size: 1.58rem; line-height: 1; }
.cliente-revisao-detalhes,
.cliente-confirmacao-ticket dl { margin: 0; padding: 4px 18px; }
.cliente-revisao-detalhes > div,
.cliente-confirmacao-ticket dl > div {
  display: grid;
  grid-template-columns: minmax(90px,.8fr) minmax(0,1.2fr);
  align-items: center;
  gap: 12px;
  min-height: 58px;
  border-bottom: 1px solid var(--client-border);
}
.cliente-revisao-detalhes > div:last-child,
.cliente-confirmacao-ticket dl > div:last-child { border-bottom: 0; }
.cliente-revisao-detalhes dt,
.cliente-confirmacao-ticket dt { color: var(--client-muted); font-size: .72rem; }
.cliente-revisao-detalhes dd,
.cliente-confirmacao-ticket dd { margin: 0; color: var(--client-text); font-size: .86rem; font-weight: 900; text-align: right; }
.cliente-revisao-detalhes > div:last-child dd { color: var(--brand-primary); font-size: 1.08rem; }
.cliente-revisao-card .pagamento-previsto { margin: 0 !important; padding: 15px 18px 18px; border-top: 1px solid var(--client-border); color: var(--client-muted) !important; }
.cliente-revisao-card select { border-color: var(--client-border) !important; background: var(--client-surface-alt) !important; color: var(--client-text) !important; }
.cliente-intervalo-resumo {
  min-height: 46px;
  display: flex;
  align-items: center;
  margin: 12px 0 0;
  padding: 10px 14px;
  border: 1px solid var(--client-border);
  border-radius: 14px;
  background: var(--client-surface-alt);
  color: var(--client-muted);
  font-size: .74rem;
  font-weight: 800;
}
.cliente-intervalo-resumo::before { content: "◷"; margin-right: 9px; color: var(--brand-primary); font-size: 1rem; }
.cliente-confirmar {
  min-height: 56px !important;
  border-radius: 15px !important;
  background: var(--brand-primary) !important;
  color: var(--brand-primary-text) !important;
}
.cliente-revisao-alterar { color: var(--client-muted) !important; }

/* Confirmação */
.cliente-confirmacao-app { max-width: 560px; margin: 0 auto; padding-top: 38px !important; }
.cliente-confirmacao-icone {
  width: 76px !important;
  height: 76px !important;
  border: 2px solid var(--brand-primary);
  background: transparent !important;
  color: var(--brand-primary) !important;
  box-shadow: 0 0 0 10px var(--brand-glow) !important;
}
.cliente-confirmacao-icone .cliente-icone { width: 38px; height: 38px; stroke-width: 2.2; }
.cliente-confirmacao-app h1 { margin-top: 18px !important; color: var(--client-text) !important; }
.cliente-confirmacao-app > p { color: var(--client-muted) !important; }
.cliente-confirmacao-ticket {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--brand-primary);
  border-radius: 22px;
  background: linear-gradient(135deg,color-mix(in srgb,var(--brand-primary) 8%,transparent),transparent 52%),var(--client-surface);
  color: var(--client-text);
  text-align: left;
  box-shadow: var(--cliente-sombra);
}
.cliente-confirmacao-ticket dl > div { min-height: 48px; }
.cliente-confirmacao-ticket dd b {
  display: inline-flex;
  padding: 6px 10px;
  border: 1px solid var(--brand-primary);
  border-radius: 999px;
  color: var(--brand-primary);
  font-size: .68rem;
}
.cliente-confirmacao-ticket > p { margin: 0; padding: 12px 18px; border-top: 1px solid var(--client-border); color: var(--client-muted); font-size: .68rem; text-align: center; }
.cliente-confirmacao-cancelamento {
  width: 100%;
  margin-top: 12px;
  padding: 14px 15px;
  border: 1px solid #985057;
  border-radius: 16px;
  background: #261719;
  color: #fff2f2;
  text-align: left;
}
.cliente-confirmacao-cancelamento strong { color: #ff9fa5; font-size: .8rem; }
.cliente-confirmacao-cancelamento p { margin: 5px 0 0; color: #fff2f2; font-size: .74rem; line-height: 1.5; }
.cliente-confirmacao-cancelamento .cliente-confirmacao-multa {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid color-mix(in srgb,#d45858 30%,transparent);
  color: var(--client-text);
}
.cliente-confirmacao-cancelamento .cliente-confirmacao-multa b { color: #ff9fa5; }

.cliente-app .aviso-taxa-falta {
  border-color: #a77a2d !important;
  background: #241d10 !important;
  color: #fff8e8 !important;
}
.cliente-app .aviso-taxa-falta strong { color: #ffd477 !important; }
.cliente-app .aviso-taxa-falta p { color: #fff8e8 !important; }
.cliente-app .sugestao-corte-cliente {
  border-color: #47729f !important;
  background: #111f2d !important;
  color: #edf6ff !important;
}
.cliente-app .sugestao-corte-cliente strong,
.cliente-app .sugestao-corte-cliente p { color: #edf6ff !important; }
.cliente-botao-sair {
  width: 100%;
  min-height: 48px;
  margin-top: 2px;
  border: 1px solid #985057 !important;
  border-radius: 14px !important;
  background: #261719 !important;
  color: #ffb4b8 !important;
  font-size: .76rem;
  font-weight: 900;
}
.cliente-botao-sair:disabled { opacity: .65; }
.cliente-confirmacao-acoes-novas { grid-template-columns: 1fr !important; }
.cliente-confirmacao-acoes-novas a {
  width: 100%;
  min-height: 52px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  text-decoration: none;
  font-size: .78rem;
  font-weight: 900;
}
.cliente-confirmacao-acoes-novas .acao-principal { background: var(--brand-primary) !important; color: var(--brand-primary-text) !important; }
.cliente-confirmacao-acoes-novas .acao-contato { border: 1px solid var(--client-border); background: var(--client-surface); color: var(--client-text); }
.cliente-confirmacao-acoes-novas .acao-cancelamento { min-height: 42px; background: transparent; color: #d45858; }
.cliente-confirmacao-regras { border-color: var(--client-border) !important; background: var(--client-surface) !important; color: var(--client-text); }
.cliente-confirmacao-regras summary,
.cliente-confirmacao-regras strong { color: var(--client-text) !important; }
.cliente-confirmacao-regras p { color: var(--client-muted) !important; }

/* Histórico e perfil no mesmo sistema visual */
.cliente-subtopo { min-height: 82px; align-items: center; border-bottom: 1px solid var(--client-border); }
.cliente-subtopo small { color: var(--brand-primary) !important; }
.cliente-subtopo h1 { color: var(--client-text) !important; }
.cliente-historico-filtros { border-color: var(--client-border) !important; background: var(--client-surface-alt) !important; }
.cliente-historico-filtros button { color: var(--client-muted) !important; }
.cliente-historico-filtros button.ativo { background: var(--client-surface) !important; color: var(--client-text) !important; }
.cliente-horario-card,
.cliente-perfil-app .cliente-card,
.cliente-lista-vazia { border-color: var(--client-border) !important; background: var(--client-surface) !important; color: var(--client-text) !important; }
.cliente-horario-card h2,
.cliente-horario-card strong,
.cliente-perfil-app h2,
.cliente-lista-vazia h2 { color: var(--client-text) !important; }
.cliente-horario-card p,
.cliente-perfil-app p,
.cliente-lista-vazia p { color: var(--client-muted) !important; }

/* Redes e navegação */
.cliente-contatos-app {
  margin: 18px 0 0 !important;
  padding: 15px !important;
  border: 1px solid var(--client-border) !important;
  border-radius: 18px !important;
  background: var(--client-surface) !important;
}
.cliente-contatos-publicos > span {
  color: var(--client-muted);
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.cliente-contatos-publicos .contatos-negocio {
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 9px;
}
.cliente-contatos-publicos .contato-negocio {
  gap: 8px;
  color: var(--client-text);
}
.cliente-contatos-publicos .icone-rede-social {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--brand-primary);
}
.cliente-app-nav {
  position: fixed !important;
  z-index: 90 !important;
  right: auto !important;
  bottom: calc(8px + env(safe-area-inset-bottom)) !important;
  left: 50% !important;
  width: min(calc(100% - 16px), 484px) !important;
  min-height: 78px !important;
  display: grid !important;
  grid-template-columns: repeat(4,1fr) !important;
  gap: 3px !important;
  padding: 8px !important;
  border: 1px solid var(--client-border) !important;
  border-radius: 24px !important;
  background: color-mix(in srgb,var(--client-surface) 94%,transparent) !important;
  box-shadow: 0 18px 48px color-mix(in srgb,#000 42%,transparent) !important;
  backdrop-filter: blur(18px);
  transform: translateX(-50%);
}
.cliente-app-nav a {
  min-width: 0;
  min-height: 60px !important;
  display: grid !important;
  place-content: center;
  justify-items: center;
  gap: 5px;
  padding: 7px 2px !important;
  border: 1px solid transparent !important;
  border-radius: 16px !important;
  color: var(--client-muted) !important;
  text-decoration: none;
}
.cliente-app-nav a.ativo {
  border-color: color-mix(in srgb,var(--brand-primary) 28%,transparent) !important;
  background: color-mix(in srgb,var(--brand-primary) 11%,var(--client-surface-alt)) !important;
  color: var(--brand-primary) !important;
}
.cliente-app-nav .cliente-icone { width: 25px !important; height: 25px !important; }
.cliente-app-nav span { font-size: .62rem !important; font-weight: 850; }

/* Estados de interação e acessibilidade */
.cliente-app button,
.cliente-app a { -webkit-tap-highlight-color: transparent; }
.cliente-app button:focus-visible,
.cliente-app a:focus-visible,
.cliente-app select:focus-visible,
.cliente-app input:focus-visible {
  outline: 3px solid color-mix(in srgb,var(--brand-primary) 58%,transparent) !important;
  outline-offset: 2px;
}
.cliente-app button:disabled { cursor: not-allowed; opacity: .48; }
.cliente-app button:not(:disabled):active,
.cliente-app a:active { transform: scale(.98); }

@media (max-width: 380px) {
  .cliente-app { padding-right: 14px !important; padding-left: 14px !important; }
  .cliente-atalhos { gap: 7px !important; }
  .cliente-atalhos > * { min-height: 92px !important; }
  .cliente-revisao-detalhes > div,
  .cliente-confirmacao-ticket dl > div { grid-template-columns: 84px minmax(0,1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .cliente-app *,
  .cliente-app *::before,
  .cliente-app *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}
/* Tour do cliente acompanha a identidade do estabelecimento com contraste protegido. */
.onboarding-camada .onboarding-balao {
  color: var(--client-text) !important;
  background: var(--client-surface) !important;
  border-color: var(--brand-primary) !important;
  box-shadow: 0 16px 42px color-mix(in srgb, var(--client-text) 24%, transparent) !important;
}
.onboarding-camada .onboarding-seta {
  background: var(--client-surface) !important;
  border-color: var(--brand-primary) !important;
}
.onboarding-camada .onboarding-topo small,
.onboarding-camada .onboarding-balao h2 {
  color: var(--brand-ink) !important;
}
.onboarding-camada .onboarding-balao p,
.onboarding-camada .onboarding-nao-mostrar {
  color: var(--client-muted) !important;
}
.onboarding-camada .onboarding-acoes .botao-auth {
  background: var(--brand-primary) !important;
  color: var(--brand-primary-text) !important;
}
.onboarding-camada .onboarding-acoes .botao-discreto {
  border-color: var(--client-border) !important;
  background: var(--client-surface-alt) !important;
  color: var(--client-text) !important;
}
.onboarding-destaque {
  outline-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand-primary) 20%, transparent) !important;
}