/* ═══════════════════════════════════════════════════════════════════
   AgendaPro — BASE E COMPONENTES
   Depende de tokens.css. Nenhum valor literal de cor/espaçamento aqui.
   ═══════════════════════════════════════════════════════════════════ */

/* ── RESET ─────────────────────────────────────────────────────── */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Escala de 75% no desktop: só funciona porque todo CSS de conteúdo usa
   rem/em. Em tablet e mobile volta a 100% — reduzir num alvo de toque
   prejudica a legibilidade e o acerto do dedo. */
@media (min-width: 992px) {
  html { font-size: 75%; }
}

body {
  margin: 0;
  font-family: var(--fonte-base);
  font-size: var(--txt-base);
  line-height: var(--altura-normal);
  color: var(--texto-normal);
  background-color: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--transicao-media), color var(--transicao-media);
  /* Regra sem exceção: a página nunca rola horizontalmente. Conteúdo
     largo (tabela, gráfico) rola dentro do próprio contêiner. */
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--texto-forte);
  font-weight: var(--peso-semi);
  line-height: var(--altura-apertada);
  letter-spacing: -0.011em;
}

h1 { font-size: var(--txt-2xl); }
h2 { font-size: var(--txt-xl); }
h3 { font-size: var(--txt-lg); }
h4 { font-size: var(--txt-md); }

p { margin: 0 0 var(--esp-3); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--texto-link);
  text-decoration: none;
  transition: color var(--transicao-rapida);
}
a:hover { color: var(--cor-primaria-hover); text-decoration: underline; }

img, svg, video { max-width: 100%; height: auto; display: block; }

hr {
  border: 0;
  border-top: 1px solid var(--borda);
  margin: var(--esp-5) 0;
}

/* `hidden` vence qualquer display. Sem isto, todo componente com
   `display: flex` (alerta, campo, modal) ignora o atributo e aparece
   vazio na tela. */
[hidden] { display: none !important; }

/* Foco de teclado sempre visível. `outline: none` sem substituto é
   proibido — quem navega por teclado perde a referência de onde está. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--foco-cor);
  outline-offset: 2px;
  border-radius: var(--raio-sm);
}

::selection {
  background: var(--cor-primaria);
  color: var(--cor-primaria-contraste);
}

/* Scrollbar discreta, coerente nos dois temas */
* { scrollbar-width: thin; scrollbar-color: var(--borda-forte) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--borda-forte);
  border-radius: var(--raio-full);
  border: 3px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--texto-tenue); background-clip: content-box; }

/* Quem prefere menos movimento, recebe menos movimento. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── UTILITÁRIOS ───────────────────────────────────────────────── */

.ap-visualmente-oculto {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ap-texto-fraco  { color: var(--texto-fraco); }
.ap-texto-forte  { color: var(--texto-forte); }
.ap-texto-aviso  { color: var(--cor-aviso-texto); font-weight: var(--peso-medio); }
.ap-texto-xs     { font-size: var(--txt-xs); }
.ap-texto-sm     { font-size: var(--txt-sm); }
.ap-numero       { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* Conteúdo largo rola dentro do próprio contêiner — a página nunca
   rola horizontalmente. */
.ap-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── BOTÕES ────────────────────────────────────────────────────── */

.ap-btn {
  --btn-bg: var(--bg-superficie);
  --btn-bg-hover: var(--bg-hover);
  --btn-texto: var(--texto-normal);
  --btn-borda: var(--borda);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  padding: var(--esp-2) var(--esp-4);
  min-height: 2.5rem;
  border: 1px solid var(--btn-borda);
  border-radius: var(--raio-md);
  background: var(--btn-bg);
  color: var(--btn-texto);
  font-family: inherit;
  font-size: var(--txt-base);
  font-weight: var(--peso-medio);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--transicao-rapida),
              border-color var(--transicao-rapida),
              color var(--transicao-rapida),
              box-shadow var(--transicao-rapida),
              transform var(--transicao-rapida);
}

.ap-btn:hover:not(:disabled) { background: var(--btn-bg-hover); text-decoration: none; }
.ap-btn:active:not(:disabled) { transform: translateY(1px); }
.ap-btn:focus-visible { outline: none; box-shadow: var(--foco-anel); }

.ap-btn:disabled,
.ap-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.ap-btn i { font-size: 1.05em; line-height: 1; }

.ap-btn--primario {
  --btn-bg: var(--cor-primaria);
  --btn-bg-hover: var(--cor-primaria-hover);
  --btn-texto: var(--cor-primaria-contraste);
  --btn-borda: transparent;
  box-shadow: var(--sombra-marca);
}

.ap-btn--perigo {
  --btn-bg: var(--cor-perigo);
  --btn-bg-hover: var(--cor-perigo-hover);
  --btn-texto: #FFFFFF;
  --btn-borda: transparent;
}

.ap-btn--sucesso {
  --btn-bg: var(--cor-sucesso);
  --btn-bg-hover: var(--cor-sucesso-hover);
  --btn-texto: #FFFFFF;
  --btn-borda: transparent;
}

.ap-btn--fantasma {
  --btn-bg: transparent;
  --btn-bg-hover: var(--bg-hover);
  --btn-borda: transparent;
}

/* Botão que ocupa a linha inteira: usado no rodapé do comprovante, nas
   telas de login/cadastro e em qualquer ação principal de coluna única.
   `min-height` de 3rem porque quase sempre é o botão que a pessoa toca
   no celular. Estava duplicado em agendar.css, com a versão de lá mais
   completa — as telas de auth pegavam a pobre. */
.ap-btn--bloco {
  width: 100%;
  justify-content: center;
  min-height: 3rem;
}
.ap-btn--grande { min-height: 3rem; padding: var(--esp-3) var(--esp-5); font-size: var(--txt-md); }
.ap-btn--pequeno { min-height: 2rem; padding: var(--esp-1) var(--esp-3); font-size: var(--txt-sm); }

/* Botão só de ícone — alvo de toque de 44px no mobile */
.ap-btn--icone {
  padding: var(--esp-2);
  min-width: 2.5rem;
  aspect-ratio: 1;
}

/* Estado de carregando: troca o rótulo por spinner sem mudar a largura,
   evitando o "pulo" da interface. */
.ap-btn[data-carregando="true"] {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.ap-btn[data-carregando="true"]::after {
  content: '';
  position: absolute;
  width: 1rem; height: 1rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--btn-texto);
  animation: ap-girar 0.6s linear infinite;
}

@keyframes ap-girar { to { transform: rotate(360deg); } }

/* ── CARD ──────────────────────────────────────────────────────── */

.ap-card {
  background: var(--bg-superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-sutil);
  overflow: hidden;
}

.ap-card__cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  padding: var(--esp-4) var(--esp-5);
  border-bottom: 1px solid var(--borda-sutil);
}

.ap-card__titulo {
  font-size: var(--txt-md);
  font-weight: var(--peso-semi);
  color: var(--texto-forte);
  margin: 0;
}

.ap-card__subtitulo {
  font-size: var(--txt-sm);
  color: var(--texto-fraco);
  margin: var(--esp-1) 0 0;
}

.ap-card__corpo { padding: var(--esp-5); }
.ap-card__rodape {
  padding: var(--esp-4) var(--esp-5);
  border-top: 1px solid var(--borda-sutil);
  background: var(--bg-sutil);
}

.ap-card--clicavel { cursor: pointer; transition: box-shadow var(--transicao-rapida), transform var(--transicao-rapida); }
.ap-card--clicavel:hover { box-shadow: var(--sombra-media); transform: translateY(-2px); }

/* ── FORMULÁRIO ────────────────────────────────────────────────── */

.ap-campo { margin-bottom: var(--esp-4); }

.ap-rotulo {
  display: block;
  margin-bottom: var(--esp-2);
  font-size: var(--txt-sm);
  font-weight: var(--peso-medio);
  color: var(--texto-forte);
}

.ap-rotulo__obrigatorio { color: var(--cor-perigo); margin-left: 2px; }

.ap-input,
.ap-select,
.ap-textarea {
  display: block;
  width: 100%;
  padding: var(--esp-3);
  min-height: 2.75rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
  background: var(--bg-superficie);
  color: var(--texto-forte);
  font-family: inherit;
  font-size: var(--txt-base);
  line-height: var(--altura-normal);
  transition: border-color var(--transicao-rapida), box-shadow var(--transicao-rapida);
}

.ap-input::placeholder,
.ap-textarea::placeholder { color: var(--texto-tenue); }

.ap-input:hover:not(:disabled),
.ap-select:hover:not(:disabled),
.ap-textarea:hover:not(:disabled) { border-color: var(--borda-forte); }

.ap-input:focus,
.ap-select:focus,
.ap-textarea:focus {
  outline: none;
  border-color: var(--cor-primaria);
  box-shadow: var(--foco-anel);
}

.ap-input:disabled,
.ap-select:disabled,
.ap-textarea:disabled {
  background: var(--bg-sutil);
  color: var(--texto-fraco);
  cursor: not-allowed;
}

.ap-textarea { min-height: 6rem; resize: vertical; }

.ap-select {
  appearance: none;
  padding-right: var(--esp-7);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2371717A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--esp-3) center;
  background-size: 1rem;
}

[data-tema="escuro"] .ap-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238B92A0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
}

/* Campo com ícone à esquerda */
.ap-campo--icone { position: relative; }
.ap-campo--icone .ap-input { padding-left: var(--esp-7); }
.ap-campo__icone {
  position: absolute;
  left: var(--esp-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--texto-tenue);
  pointer-events: none;
  font-size: var(--txt-md);
}

/* Botão mostrar/ocultar senha */
.ap-campo--senha { position: relative; }
.ap-campo--senha .ap-input { padding-right: var(--esp-7); }
.ap-btn-olho {
  position: absolute;
  right: var(--esp-2);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem; height: 2.25rem;
  border: 0;
  border-radius: var(--raio-sm);
  background: transparent;
  color: var(--texto-fraco);
  cursor: pointer;
  transition: color var(--transicao-rapida), background-color var(--transicao-rapida);
}
.ap-btn-olho:hover { color: var(--texto-forte); background: var(--bg-hover); }
.ap-btn-olho:focus-visible { box-shadow: var(--foco-anel); }

/* Medidor de força de senha (`AP.ativarForcaSenha`). Veio do auth.css em
   09/10/2026: a redefinição de senha E o "Meus dados" do painel usam. */
.ap-forca {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  margin-top: var(--esp-2);
}

.ap-forca__barras {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--esp-1);
}

.ap-forca__barra {
  height: 3px;
  border-radius: var(--raio-full);
  background: var(--borda);
  transition: background-color var(--transicao-media);
}

.ap-forca__barra[data-ativa="fraca"]  { background: var(--cor-perigo); }
.ap-forca__barra[data-ativa="media"]  { background: var(--cor-aviso); }
.ap-forca__barra[data-ativa="boa"]    { background: var(--cor-info); }
.ap-forca__barra[data-ativa="forte"]  { background: var(--cor-sucesso); }

.ap-forca__texto { font-size: var(--txt-xs); color: var(--texto-fraco); }

/* Duas colunas no desktop, empilhado no mobile. `--largo` ocupa 2fr. */
.ap-grade-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--esp-4);
}

.ap-grade-form .ap-campo--largo { grid-column: span 1; }

@media (min-width: 640px) {
  .ap-grade-form { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  /* Colunas iguais: quando os dois lados são selects do mesmo peso
     (serviço e com quem, dia e período), o 2:1 cortava o texto do menor. */
  .ap-grade-form--igual { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 479px) {
  .ap-grade-form { grid-template-columns: minmax(0, 1fr); }
}

/* Campo com botão colado (CEP + buscar) */
.ap-campo-com-botao {
  display: flex;
  gap: var(--esp-2);
  align-items: stretch;
}

.ap-campo-com-botao .ap-input { flex: 1; min-width: 0; }
.ap-campo-com-botao .ap-btn { flex-shrink: 0; min-height: 2.75rem; }

@media (max-width: 479px) {
  .ap-campo-com-botao .ap-btn span { display: none; }
}

/* ── SELEÇÃO MÚLTIPLA ──────────────────────────────────────────── */
/* Checkboxes como "chips": mais legível que uma lista vertical quando
   são muitos itens curtos (quem atende, em quais unidades). */

.ap-selecao {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  margin-bottom: var(--esp-2);
}

.ap-selecao__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-2) var(--esp-3);
  min-height: 2.5rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-full);
  background: var(--bg-superficie);
  color: var(--texto-normal);
  font-size: var(--txt-sm);
  font-weight: var(--peso-medio);
  cursor: pointer;
  user-select: none;
  transition: border-color var(--transicao-rapida),
              background-color var(--transicao-rapida),
              color var(--transicao-rapida);
}

.ap-selecao__item:hover { border-color: var(--borda-forte); background: var(--bg-hover); }

/* O input real fica oculto, mas focável: o :has abaixo reage a ele. */
.ap-selecao__item input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ap-selecao__marca {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.125rem; height: 1.125rem;
  border: 1.5px solid var(--borda-forte);
  border-radius: var(--raio-sm);
  color: transparent;
  font-size: 0.7rem;
  transition: background-color var(--transicao-rapida),
              border-color var(--transicao-rapida),
              color var(--transicao-rapida);
}

.ap-selecao__item:has(input:checked) {
  border-color: var(--cor-primaria);
  background: var(--cor-primaria-suave);
  color: var(--cor-primaria);
}

.ap-selecao__item:has(input:checked) .ap-selecao__marca {
  background: var(--cor-primaria);
  border-color: var(--cor-primaria);
  color: var(--cor-primaria-contraste);
}

.ap-selecao__item:has(input:focus-visible) { box-shadow: var(--foco-anel); }

@media (max-width: 767px) {
  .ap-selecao__item { min-height: 2.75rem; }   /* alvo de toque */
}

/* ── SELETOR DE COR ────────────────────────────────────────────── */

.ap-cores {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  margin-bottom: var(--esp-2);
}

.ap-cor {
  position: relative;
  display: block;
  width: 2rem; height: 2rem;
  border-radius: var(--raio-full);
  background: var(--cor-opcao);
  cursor: pointer;
  /* Anel de seleção "por fora": não muda o tamanho do círculo ao marcar,
     então a linha não dança quando o usuário troca de cor. */
  box-shadow: 0 0 0 2px var(--bg-superficie), 0 0 0 2px transparent;
  transition: box-shadow var(--transicao-rapida), transform var(--transicao-rapida);
}

.ap-cor:hover { transform: scale(1.08); }

.ap-cor input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ap-cor:has(input:checked) {
  box-shadow: 0 0 0 2px var(--bg-superficie), 0 0 0 4px var(--cor-opcao);
}

.ap-cor:has(input:focus-visible) {
  box-shadow: 0 0 0 2px var(--bg-superficie), 0 0 0 4px var(--cor-opcao), var(--foco-anel);
}

@media (max-width: 767px) {
  .ap-cor { width: 2.5rem; height: 2.5rem; }   /* alvo de toque */
}

/* Texto de ajuda — sempre visível, nunca escondido em tooltip */
.ap-ajuda {
  display: block;
  margin-top: var(--esp-2);
  font-size: var(--txt-xs);
  color: var(--texto-fraco);
  line-height: var(--altura-normal);
}

/* Erro no próprio campo, dizendo como corrigir */
.ap-campo--erro .ap-input,
.ap-campo--erro .ap-select,
.ap-campo--erro .ap-textarea { border-color: var(--cor-perigo); }

.ap-erro-campo {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-1);
  margin-top: var(--esp-2);
  font-size: var(--txt-xs);
  color: var(--cor-perigo-texto);
}

/* Checkbox e radio */
.ap-check {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  cursor: pointer;
  user-select: none;
}

.ap-check input[type="checkbox"],
.ap-check input[type="radio"] {
  flex-shrink: 0;
  width: 1.15rem; height: 1.15rem;
  margin: 0.15rem 0 0;
  accent-color: var(--cor-primaria);
  cursor: pointer;
}

.ap-check__texto { font-size: var(--txt-sm); color: var(--texto-normal); line-height: var(--altura-normal); }

/* ── ALERTA ────────────────────────────────────────────────────── */

.ap-alerta {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  border: 1px solid transparent;
  border-radius: var(--raio-md);
  font-size: var(--txt-sm);
  line-height: var(--altura-normal);
}

.ap-alerta i { flex-shrink: 0; font-size: 1.1em; margin-top: 0.1em; }
.ap-alerta a { text-decoration: underline; font-weight: var(--peso-medio); }

.ap-alerta--erro    { background: var(--cor-perigo-suave);  color: var(--cor-perigo-texto);  border-color: var(--cor-perigo); }
.ap-alerta--sucesso { background: var(--cor-sucesso-suave); color: var(--cor-sucesso-texto); border-color: var(--cor-sucesso); }
.ap-alerta--aviso   { background: var(--cor-aviso-suave);   color: var(--cor-aviso-texto);   border-color: var(--cor-aviso); }
.ap-alerta--info    { background: var(--cor-info-suave);    color: var(--cor-info-texto);    border-color: var(--cor-info); }

.ap-alerta--erro a    { color: var(--cor-perigo-texto); }
.ap-alerta--info a    { color: var(--cor-info-texto); }

/* ⚠️ BOTÃO DENTRO DE ALERTA NÃO É LINK DE TEXTO. As duas regras acima
   pintam todo <a> do alerta com a cor do texto dele — e um `.ap-btn
   --perigo` dentro de um alerta de erro ficava vermelho sobre vermelho
   (achado no "Responder agora" da Início, 08/10/2026; o mesmo valia para
   a faixa da assinatura em atraso, que nunca tinha sido vista assim). */
.ap-alerta a.ap-btn {
  color: var(--btn-texto);
  text-decoration: none;
}

/* ── O AVISO DA MENSALIDADE ──────────────────────────────────────────
   Topo de toda tela do painel da empresa (assinatura/aviso.php): fim do
   teste, fatura aberta, atraso. Título e explicação em linhas próprias —
   "termina em 3 dias" sozinho assusta; o que acontece depois é o que
   acalma. O botão vai à direita e desce para baixo do texto no celular.
   A Central de Conversas (altura fixa) mede a própria altura em JS, então
   o aviso acima dela entra na conta sozinho. */

.ap-aviso-conta {
  align-items: center;
  margin-bottom: var(--esp-5);
}

.ap-aviso-conta__texto {
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  flex: 1;
  min-width: 0;
}

.ap-aviso-conta__texto strong { font-weight: var(--peso-semi); }

.ap-aviso-conta .ap-aviso-conta__acao {
  flex-shrink: 0;
  text-decoration: none;
}

@media (max-width: 767px) {
  .ap-aviso-conta { flex-wrap: wrap; align-items: flex-start; }
  .ap-aviso-conta__texto { flex-basis: calc(100% - 2.5rem); }
  .ap-aviso-conta .ap-aviso-conta__acao { width: 100%; }
}

/* ── BADGE ─────────────────────────────────────────────────────── */

.ap-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  padding: 0.15rem var(--esp-2);
  border-radius: var(--raio-full);
  font-size: var(--txt-xs);
  font-weight: var(--peso-medio);
  line-height: 1.5;
  white-space: nowrap;
}

/* Cor nunca é o único indicador: o badge sempre carrega texto. */
.ap-badge--neutro  { background: var(--bg-hover);            color: var(--texto-normal); }
.ap-badge--sucesso { background: var(--cor-sucesso-suave);   color: var(--cor-sucesso-texto); }
.ap-badge--aviso   { background: var(--cor-aviso-suave);     color: var(--cor-aviso-texto); }
.ap-badge--perigo  { background: var(--cor-perigo-suave);    color: var(--cor-perigo-texto); }
.ap-badge--info    { background: var(--cor-info-suave);      color: var(--cor-info-texto); }
.ap-badge--marca   { background: var(--cor-primaria-suave);  color: var(--cor-primaria); }

/* ── MARCAS DE LINHA ───────────────────────────────────────────────
   Sinais pequenos dentro de uma célula de tabela: "3 faltas", "tem aviso
   fixado", "poucas avaliações ainda". Menores que um badge de propósito —
   qualificam a informação principal em vez de competir com ela.

   ⚠️ Moravam em `clientes.css` e vieram para cá em 2026-09-10, quando a
   tela de avaliações precisou das mesmas marcas. Duas telas usando a
   mesma classe definida no CSS de UMA delas é como a segunda passa a
   depender da ordem de carregamento do arquivo da primeira. */

.ap-marcas {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  margin-top: var(--esp-1);
}

.ap-marca-alerta,
.ap-marca-aviso {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--txt-xs);
  font-weight: var(--peso-semi);
}

.ap-marca-alerta { color: var(--cor-perigo); }
.ap-marca-aviso  { color: var(--cor-destaque-hover); }

/* Marca que explica uma ressalva ao passar o mouse (`title`). */
.ap-marca-aviso[title] { cursor: help; }

/* ── AVATAR ────────────────────────────────────────────────────── */

.ap-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem; height: 2.25rem;
  border-radius: var(--raio-full);
  background: var(--cor-primaria-suave);
  color: var(--cor-primaria);
  font-size: var(--txt-sm);
  font-weight: var(--peso-semi);
  overflow: hidden;
  user-select: none;
}

.ap-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ap-avatar--grande { width: 3rem; height: 3rem; font-size: var(--txt-md); }
.ap-avatar--pequeno { width: 1.75rem; height: 1.75rem; font-size: var(--txt-xs); }

/* ── CAMPO DE HORA ─────────────────────────────────────────────── */
/* Variante de campo, não componente de horários: a grade de horários usa,
   e o modal de encaixe da agenda também. Preso em horarios.css, no
   encaixe ele aparecia sem largura nem alinhamento. */

.ap-input--hora {
  width: auto;
  min-width: 7rem;
  min-height: 2.25rem;
  padding: var(--esp-2) var(--esp-3);
  font-variant-numeric: tabular-nums;
}

/* Ícone nativo do seletor de hora: legível no tema escuro */
[data-tema="escuro"] .ap-input--hora::-webkit-calendar-picker-indicator {
  filter: invert(0.7);
}

@media (max-width: 767px) {
  .ap-input--hora { min-height: 2.75rem; }
}

/* ── BOTÃO DE AÇÃO DE LINHA ────────────────────────────────────── */
/* O ícone clicável de editar/excluir/ver. Usado nas listas com
   DataTables, mas também em horários (bloqueios e feriados), níveis de
   acesso, na ficha do cliente e nos modais. Mora aqui porque é de todo
   mundo — preso em datatable.css, as telas que não o carregam mostravam
   o botão cru do navegador. */

.ap-acoes-linha {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--esp-1);
}

.ap-acao-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--raio-sm);
  background: transparent;
  color: var(--texto-fraco);
  cursor: pointer;
  transition: background-color var(--transicao-rapida), color var(--transicao-rapida);
}

.ap-acao-btn:hover { background: var(--bg-hover); color: var(--texto-forte); }
.ap-acao-btn:focus-visible { box-shadow: var(--foco-anel); outline: none; }
.ap-acao-btn--perigo:hover { background: var(--cor-perigo-suave); color: var(--cor-perigo); }

/* No celular o alvo cresce: 32px é confortável para o mouse, não para
   o dedo. */
@media (max-width: 767px) {
  .ap-acao-btn { width: 2.75rem; height: 2.75rem; }
}

/* ── LINK PÚBLICO ──────────────────────────────────────────────── */
/* Campo somente-leitura com os botões colados: o link é para copiar,
   não para digitar. */

.ap-link-publico {
  display: flex;
  gap: var(--esp-2);
  flex-wrap: wrap;
  align-items: stretch;
}

.ap-link-publico .ap-input {
  flex: 1 1 16rem;
  min-width: 0;
  font-family: var(--fonte-mono);
  font-size: var(--txt-sm);
  background: var(--bg-sutil);
}

/* ── UPLOAD DE LOGO ────────────────────────────────────────────── */

.ap-logo-upload {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-5);
  flex-wrap: wrap;
}

.ap-logo-previa {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 6rem;
  height: 6rem;
  border-radius: var(--raio-lg);
  background: var(--bg-sutil);
  border: 2px dashed var(--borda);
  overflow: hidden;
}

/* Com logo, a borda tracejada de "vazio" some. */
.ap-logo-previa[data-tem-logo="true"] {
  border-style: solid;
  border-color: var(--borda);
  background: var(--bg-superficie);
}

.ap-logo-previa img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ap-logo-previa__letra {
  font-size: var(--txt-2xl);
  font-weight: var(--peso-forte);
  color: var(--texto-tenue);
  text-transform: uppercase;
}

.ap-logo-acoes {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--esp-3);
  flex: 1 1 14rem;
  min-width: 0;
}

.ap-logo-acoes .ap-ajuda {
  margin: 0;
}

/* ⚠️ O <input type="file"> nativo é feio e o texto dele não é
   traduzível. Escondemos SEM `display:none`: assim ele continua
   focável pelo teclado e o <label> funciona como botão. */
.ap-arquivo-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* O <label> vira botão: precisa mostrar o foco do teclado como um. */
.ap-arquivo-oculto:focus-visible + label,
label:has(> .ap-arquivo-oculto:focus-visible) {
  box-shadow: var(--foco-anel);
}

/* ── PALETA DE CORES ───────────────────────────────────────────── */

.ap-cores {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
}

.ap-cor {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 3px solid transparent;
  border-radius: var(--raio-full);
  background: var(--esta-cor);
  cursor: pointer;
  transition: transform var(--transicao-rapida), box-shadow var(--transicao-rapida);
}

.ap-cor i {
  color: #FFFFFF;
  font-size: var(--txt-md);
  opacity: 0;
  transition: opacity var(--transicao-rapida);
}

.ap-cor--ativa {
  /* O anel usa a cor do fundo da página, não branco: no tema escuro,
     um anel branco brigaria com o resto. */
  border-color: var(--bg-superficie);
  box-shadow: 0 0 0 2px var(--esta-cor);
}

.ap-cor--ativa i { opacity: 1; }

.ap-cor:hover { transform: scale(1.08); }

.ap-cor:focus-visible {
  outline: 0;
  box-shadow: var(--foco-anel);
}

/* ── PRÉVIA DA PÁGINA PÚBLICA ──────────────────────────────────── */
/* Não é a página real: é uma miniatura fiel do topo, para a pessoa
   decidir a cor sem salvar e abrir outra aba. */

.ap-previa-publica {
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
  overflow: hidden;
  max-width: 26rem;
}

.ap-previa-publica__topo {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-4);
  background: var(--cor-previa, var(--cor-primaria));
  color: #FFFFFF;
  transition: background var(--transicao-media);
}

.ap-previa-publica__logo {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--raio-sm);
  object-fit: cover;
  background: rgb(255 255 255 / 0.18);
}

.ap-previa-publica__logo--letra {
  display: grid;
  place-items: center;
  font-weight: var(--peso-forte);
  text-transform: uppercase;
}

.ap-previa-publica__texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ap-previa-publica__texto strong {
  font-size: var(--txt-base);
  overflow-wrap: anywhere;
}

.ap-previa-publica__texto small {
  font-size: var(--txt-xs);
  opacity: 0.9;
  line-height: var(--altura-normal);
  /* Descrição longa não pode esticar a miniatura sem fim. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ap-previa-publica__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  padding: var(--esp-4);
  background: var(--bg-app);
}

.ap-previa-publica__falso-titulo {
  font-size: var(--txt-sm);
  font-weight: var(--peso-semi);
  color: var(--texto-forte);
}

/* Barras cinzas sugerindo os serviços, sem inventar conteúdo. */
.ap-previa-publica__falso-item {
  height: 2.5rem;
  border-radius: var(--raio-sm);
  background: var(--bg-superficie);
  border: 1px solid var(--borda-sutil);
}

/* ── HORÁRIOS E CHIPS ──────────────────────────────────────────── */
/* Usados pela agenda do painel E pela página pública de agendamento.
   Componente compartilhado mora aqui, não no CSS de um módulo. */

.ap-horarios {
  padding: var(--esp-3);
  background: var(--bg-sutil);
  border: 1px solid var(--borda-sutil);
  border-radius: var(--raio-md);
  min-height: 4.5rem;
}

.ap-horarios__instrucao {
  margin: 0;
  font-size: var(--txt-sm);
  color: var(--texto-fraco);
}

/* Explica por que a lista começa onde começa — sem isso, uma lista que
   pula a manhã inteira parece defeito. */
.ap-horarios__nota {
  margin: 0 0 var(--esp-3);
  font-size: var(--txt-xs);
  color: var(--texto-fraco);
  line-height: var(--altura-normal);
}

.ap-horarios__lista,
.ap-horarios__carregando,
.ap-horarios__proximas-lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
}

.ap-chip-hora {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--esp-2) var(--esp-4);
  font-size: var(--txt-base);
  font-weight: var(--peso-medio);
  font-variant-numeric: tabular-nums;
  color: var(--texto-normal);
  background: var(--bg-superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-full);
  cursor: pointer;
  transition: all var(--transicao-rapida);
  /* ⚠️ Alvo de toque: 44px é o mínimo confortável para o dedo. Vale
     especialmente na tela pública, usada no celular por quem tem pressa. */
  min-height: 2.75rem;
}

.ap-chip-hora:hover {
  border-color: var(--cor-primaria);
  color: var(--cor-primaria);
}

.ap-chip-hora:focus-visible {
  outline: 0;
  box-shadow: var(--foco-anel);
}

.ap-chip-hora--ativo {
  background: var(--cor-primaria);
  border-color: var(--cor-primaria);
  color: var(--cor-primaria-contraste);
  box-shadow: var(--sombra-marca);
}

.ap-chip-hora--data {
  background: var(--cor-destaque-suave);
  border-color: var(--cor-destaque);
  color: var(--cor-destaque-hover);
}

.ap-horarios__vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-4);
  text-align: center;
  color: var(--texto-fraco);
}

.ap-horarios__vazio > i {
  font-size: var(--txt-2xl);
  color: var(--texto-tenue);
}

.ap-horarios__vazio-texto {
  margin: 0;
  font-size: var(--txt-sm);
  max-width: 28rem;
}

.ap-horarios__proximas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-2);
  margin-top: var(--esp-2);
}

/* ── CARTÃO DE NÚMERO ──────────────────────────────────────────── */
/* Um número grande com rótulo embaixo, borda colorida à esquerda. A
   agenda usa no resumo do dia; os clientes, no resumo da carteira. Fica
   aqui porque é componente compartilhado — preso no CSS de um módulo,
   a outra tela renderizava os cartões desmontados. */

.ap-resumo-item {
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  padding: var(--esp-4);
  background: var(--bg-superficie);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--cor-primaria);
  border-radius: var(--raio-md);
  min-width: 0;
}

.ap-resumo-item--sucesso  { border-left-color: var(--cor-sucesso); }
.ap-resumo-item--perigo   { border-left-color: var(--cor-perigo); }
.ap-resumo-item--destaque { border-left-color: var(--cor-destaque); }
.ap-resumo-item--info     { border-left-color: var(--cor-info); }
.ap-resumo-item--aviso    { border-left-color: var(--cor-aviso); }
.ap-resumo-item--marca    { border-left-color: var(--cor-primaria); }

/* Quando o número é um filtro: precisa parecer botão e mostrar qual
   está ativo — senão a pessoa acha que a lista veio incompleta.
   Vive aqui (e não em clientes.css) porque a carteira e as conversas
   usam os dois. */
.ap-resumo-item--clicavel {
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: border-color var(--transicao-rapida), box-shadow var(--transicao-rapida);
}

.ap-resumo-item--clicavel:hover {
  border-color: var(--cor-primaria);
  box-shadow: var(--sombra-media);
}

.ap-resumo-item--clicavel:focus-visible {
  outline: 0;
  box-shadow: var(--foco-anel);
}

/* A borda esquerda continua sendo a da variante de cor. */
.ap-resumo-item--clicavel[aria-pressed="true"] {
  background: var(--cor-primaria-suave);
  border-color: var(--cor-primaria);
}

/* A grade dos cartões de resumo. Os dois nomes são o MESMO componente:
   `ap-carteira-resumo` é o nome histórico (clientes), `ap-resumo-grade`
   o nome neutro para telas novas. Manter o antigo evita renomear o HTML
   e os testes que já o verificam. */
.ap-carteira-resumo,
.ap-resumo-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: var(--esp-3);
  margin-bottom: var(--esp-4);
}

/* 767px: o mesmo ponto de quebra do resto do projeto. */
@media (max-width: 767px) {
  .ap-carteira-resumo,
  .ap-resumo-grade { grid-template-columns: repeat(2, 1fr); gap: var(--esp-2); }
}

.ap-resumo-item__valor {
  font-size: var(--txt-2xl);
  font-weight: var(--peso-forte);
  color: var(--texto-forte);
  line-height: var(--altura-apertada);
  /* Números longos (R$ 12.345,00) não podem estourar o cartão. */
  overflow-wrap: anywhere;
}

.ap-resumo-item__rotulo {
  font-size: var(--txt-xs);
  color: var(--texto-fraco);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: var(--peso-medio);
}

/* ── BARRA DE FILTROS DE LISTA ─────────────────────────────────────
   O cabeçalho de card que carrega os filtros de uma listagem: rótulo em
   caixa alta, select estreito, e a "etiqueta" do filtro ativo com o X
   para limpar.

   ⚠️ Moravam em `clientes.css` e vieram para cá em 2026-09-10, quando a
   tela de avaliações passou a usar os mesmos filtros. Foi a QUINTA vez
   que aquele arquivo guardava um componente de mais de uma tela — o
   sintoma é sempre o mesmo: a segunda tela renderiza desmontada porque
   não carrega o CSS da primeira. */

.ap-card__cabecalho--filtros {
  flex-wrap: wrap;
  gap: var(--esp-3);
}

.ap-filtros {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  flex-wrap: wrap;
}

.ap-filtro {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  min-width: 0;
}

.ap-filtro__rotulo {
  font-size: var(--txt-xs);
  color: var(--texto-fraco);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: var(--peso-medio);
  white-space: nowrap;
}

/* ⚠️ O padding da direita é a casa da seta: o atalho `padding: a b` a
   apagava, e a seta ficava por cima do texto ("Em aberto⌄"). */
.ap-select--pequeno {
  padding: var(--esp-1) var(--esp-6) var(--esp-1) var(--esp-3);
  background-position: right var(--esp-2) center;
  font-size: var(--txt-sm);
  max-width: 11rem;
}

.ap-filtro__check .ap-check__texto {
  font-size: var(--txt-sm);
}

/* A etiqueta do filtro ativo: diz o que está filtrando e como desfazer.
   Sem ela, uma lista curta parece uma lista vazia. */
.ap-filtro-ativo {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-1) var(--esp-2) var(--esp-1) var(--esp-3);
  background: var(--cor-primaria-suave);
  color: var(--cor-primaria);
  border-radius: var(--raio-full);
  font-size: var(--txt-sm);
  font-weight: var(--peso-medio);
}

/* ── ESQUELETO DE CONTEÚDO ─────────────────────────────────────── */
/* Peças reutilizáveis: a agenda usa na grade e nos chips de horário; a
   ficha do cliente usa nas linhas. Ficam aqui, e não no CSS de um
   módulo, porque quem carrega só clientes.css também precisa delas. */

.ap-detalhe-carregando {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
}

.ap-esqueleto-linha {
  height: 3.5rem;
  border-radius: var(--raio-md);
  background: linear-gradient(90deg,
    var(--bg-sutil) 25%, var(--bg-hover) 50%, var(--bg-sutil) 75%);
  background-size: 200% 100%;
  animation: ap-esqueleto 1.4s var(--curva) infinite;
}

.ap-esqueleto-chip {
  display: inline-block;
  width: 4rem;
  height: 2.25rem;
  border-radius: var(--raio-full);
  background: linear-gradient(90deg,
    var(--bg-sutil) 25%, var(--bg-hover) 50%, var(--bg-sutil) 75%);
  background-size: 200% 100%;
  animation: ap-esqueleto 1.4s var(--curva) infinite;
}

@keyframes ap-esqueleto {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* Movimento constante incomoda quem tem sensibilidade vestibular. */
@media (prefers-reduced-motion: reduce) {
  .ap-esqueleto-linha,
  .ap-esqueleto-chip { animation: none; }
}

/* ── SKELETON (carregando) ─────────────────────────────────────── */
/* Tem a forma do conteúdo real — não um spinner solto no meio da tela. */

.ap-skeleton {
  background: linear-gradient(90deg,
    var(--bg-hover) 25%,
    var(--borda-sutil) 50%,
    var(--bg-hover) 75%);
  background-size: 200% 100%;
  border-radius: var(--raio-sm);
  animation: ap-brilho 1.4s ease-in-out infinite;
}

@keyframes ap-brilho {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.ap-skeleton--texto  { height: 0.85rem; margin-bottom: var(--esp-2); }
.ap-skeleton--titulo { height: 1.4rem; width: 40%; margin-bottom: var(--esp-3); }
.ap-skeleton--card   { height: 7rem; border-radius: var(--raio-lg); }

/* ── ESTADO VAZIO ──────────────────────────────────────────────── */
/* Nunca só "nenhum registro": explica e oferece o próximo passo. */

.ap-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--esp-7) var(--esp-5);
}

.ap-vazio__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem; height: 4rem;
  margin-bottom: var(--esp-4);
  border-radius: var(--raio-full);
  background: var(--cor-primaria-suave);
  color: var(--cor-primaria);
  font-size: var(--txt-2xl);
}

.ap-vazio__titulo {
  font-size: var(--txt-md);
  font-weight: var(--peso-semi);
  color: var(--texto-forte);
  margin-bottom: var(--esp-2);
}

.ap-vazio__texto {
  font-size: var(--txt-sm);
  color: var(--texto-fraco);
  max-width: 26rem;
  margin-bottom: var(--esp-5);
  line-height: var(--altura-solta);
}

/* Os botões do estado vazio. Vive aqui junto do resto do componente:
   preso em clientes.css, os botões da tela de Conversas apareciam
   empilhados e desalinhados — o defeito que a varredura pega. */
.ap-vazio__acoes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-3);
  flex-wrap: wrap;
  margin-top: var(--esp-4);
}

/* ── DIVISOR COM TEXTO ─────────────────────────────────────────── */

.ap-divisor {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  margin: var(--esp-5) 0;
  color: var(--texto-tenue);
  font-size: var(--txt-xs);
}
.ap-divisor::before,
.ap-divisor::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--borda);
}

/* ── ALTERNADOR DE TEMA ────────────────────────────────────────── */

.ap-tema-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem; height: 2.5rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
  background: var(--bg-superficie);
  color: var(--texto-normal);
  cursor: pointer;
  transition: background-color var(--transicao-rapida), color var(--transicao-rapida), border-color var(--transicao-rapida);
}
.ap-tema-btn:hover { background: var(--bg-hover); color: var(--texto-forte); }
.ap-tema-btn:focus-visible { box-shadow: var(--foco-anel); }

/* O ícone visível depende do tema: mostra o destino, não o estado atual */
.ap-tema-btn .ap-icone-escuro { display: none; }
[data-tema="escuro"] .ap-tema-btn .ap-icone-claro  { display: none; }
[data-tema="escuro"] .ap-tema-btn .ap-icone-escuro { display: inline-flex; }

/* ── TOAST ─────────────────────────────────────────────────────── */

.ap-toasts {
  position: fixed;
  top: var(--esp-4);
  right: var(--esp-4);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  max-width: min(24rem, calc(100vw - var(--esp-6)));
  pointer-events: none;
}

.ap-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--cor-info);
  border-radius: var(--raio-md);
  background: var(--bg-elevado);
  box-shadow: var(--sombra-elevada);
  color: var(--texto-normal);
  font-size: var(--txt-sm);
  pointer-events: auto;
  animation: ap-toast-entra 250ms var(--curva);
}

.ap-toast--sucesso { border-left-color: var(--cor-sucesso); }
.ap-toast--erro    { border-left-color: var(--cor-perigo); }
.ap-toast--aviso   { border-left-color: var(--cor-aviso); }

.ap-toast i { flex-shrink: 0; font-size: 1.1em; margin-top: 0.1em; }
.ap-toast--sucesso i { color: var(--cor-sucesso); }
.ap-toast--erro i    { color: var(--cor-perigo); }
.ap-toast--aviso i   { color: var(--cor-aviso); }
.ap-toast--info i    { color: var(--cor-info); }

.ap-toast[data-saindo="true"] { animation: ap-toast-sai 200ms var(--curva) forwards; }

@keyframes ap-toast-entra {
  from { opacity: 0; transform: translateX(1rem); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes ap-toast-sai {
  to { opacity: 0; transform: translateX(1rem); }
}

@media (max-width: 767px) {
  .ap-toasts {
    top: auto;
    bottom: calc(var(--tabbar-altura) + var(--esp-3));
    left: var(--esp-3);
    right: var(--esp-3);
    max-width: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   ABAS — componente genérico (configurações, guia, futuras telas)
   ═══════════════════════════════════════════════════════════════════ */

.ap-abas {
  display: flex;
  gap: var(--esp-1);
  margin-bottom: var(--esp-5);
  padding: var(--esp-1);
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
  background: var(--bg-superficie);
  overflow-x: auto;
}

.ap-aba {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-2) var(--esp-4);
  min-height: 2.5rem;
  border: 0;
  border-radius: var(--raio-sm);
  background: transparent;
  color: var(--texto-fraco);
  font-family: inherit;
  font-size: var(--txt-base);
  font-weight: var(--peso-medio);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--transicao-rapida), color var(--transicao-rapida);
}

.ap-aba:hover { background: var(--bg-hover); color: var(--texto-forte); }
.ap-aba:focus-visible { box-shadow: var(--foco-anel); }

.ap-aba[aria-selected="true"] {
  background: var(--cor-primaria);
  color: var(--cor-primaria-contraste);
}


.ap-aba-painel[hidden] { display: none; }

@media (max-width: 767px) {
  .ap-aba { padding: var(--esp-2) var(--esp-3); }
}


/* ═══════════════════════════════════════════════════════════════════
   SELETOR DE SEGMENTO — usado no cadastro e nas configurações
   ═══════════════════════════════════════════════════════════════════ */

.ap-segmentos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: var(--esp-2);
  max-height: 17rem;
  overflow-y: auto;
  padding: var(--esp-1);
}

.ap-segmento {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  padding: var(--esp-3) var(--esp-2);
  min-height: 4.75rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
  background: var(--bg-superficie);
  color: var(--texto-normal);
  font-size: var(--txt-xs);
  font-weight: var(--peso-medio);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transicao-rapida),
              background-color var(--transicao-rapida),
              color var(--transicao-rapida);
}

.ap-segmento i { font-size: var(--txt-lg); color: var(--texto-fraco); transition: color var(--transicao-rapida); }
.ap-segmento:hover { border-color: var(--borda-forte); background: var(--bg-hover); }

.ap-segmento input { position: absolute; opacity: 0; pointer-events: none; }

.ap-segmento:has(input:checked) {
  border-color: var(--cor-primaria);
  background: var(--cor-primaria-suave);
  color: var(--cor-primaria);
}
.ap-segmento:has(input:checked) i { color: var(--cor-primaria); }
.ap-segmento:has(input:focus-visible) { box-shadow: var(--foco-anel); }

/* ── INTERRUPTOR (liga/desliga) ──────────────────────────────────
   Nasceu no WhatsApp (o robô responde) e foi para cá quando o menu do
   robô passou a usá-lo em cada opção: componente de duas telas mora
   aqui, senão uma delas renderiza sem estilo. */

.ap-switch {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  cursor: pointer;
}

/* O input real fica invisível mas ACESSÍVEL ao teclado e ao leitor de
   tela — `display:none` o tiraria da navegação por Tab. */
.ap-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.ap-switch__pista {
  position: relative;
  width: 2.5rem;
  height: 1.4rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
  background: var(--borda-forte);
  border-radius: var(--raio-full);
  transition: background var(--transicao-rapida);
}

.ap-switch__pista::after {
  content: '';
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: 1rem;
  height: 1rem;
  background: var(--cor-primaria-contraste);
  border-radius: 50%;
  transition: transform var(--transicao-rapida);
}

.ap-switch input:checked + .ap-switch__pista {
  background: var(--cor-sucesso);
}

.ap-switch input:checked + .ap-switch__pista::after {
  transform: translateX(1.1rem);
}

.ap-switch input:focus-visible + .ap-switch__pista {
  box-shadow: var(--foco-anel);
}

.ap-switch__texto {
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
}

.ap-switch__texto strong {
  color: var(--texto-forte);
  font-size: var(--txt-base);
}

.ap-switch__texto small {
  color: var(--texto-fraco);
  font-size: var(--txt-xs);
  line-height: 1.5;
}

/* ── CHIP (atalho clicável) ──────────────────────────────────────
   Nasceu nas Avaliações ("comece por…") e foi para cá quando as
   Respostas rápidas passaram a usá-lo para inserir variáveis. */

.ap-chip {
  padding: var(--esp-1) var(--esp-3);
  background: var(--bg-sutil);
  border: 1px solid var(--borda);
  border-radius: var(--raio-full);
  font: inherit;
  font-size: var(--txt-sm);
  color: var(--texto-normal);
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.ap-chip:hover {
  background: var(--bg-hover);
  border-color: var(--borda-forte);
}

.ap-chip:focus-visible {
  outline: 2px solid var(--texto-link);
  outline-offset: 2px;
}

/* ── A PRÉVIA DO WHATSAPP: a conversa como chega no celular ─────────
   Morava em menu-robo.css e veio para cá em 2026-10-07, quando a tela
   de Automações passou a mostrar a mesma prévia. Mesmo motivo de todos
   os outros componentes deste arquivo: preso no CSS de um módulo, a
   segunda tela renderizaria a conversa desmontada. */

.ap-zap {
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  overflow: hidden;
  background: var(--bg-sutil);
}

.ap-zap__topo {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-3);
  background: var(--bg-superficie);
  border-bottom: 1px solid var(--borda-sutil);
}

.ap-zap__nome {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--peso-semi);
  color: var(--texto-forte);
}

.ap-zap__conversa {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  padding: var(--esp-4) var(--esp-3);
}

.ap-zap__balao {
  max-width: 92%;
  padding: var(--esp-2) var(--esp-3);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra-sutil);
  color: var(--texto-forte);
  font-size: var(--txt-sm);
  line-height: var(--altura-normal);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ap-zap__balao--cliente {
  align-self: flex-end;
  background: var(--cor-sucesso-suave);
  border-bottom-right-radius: var(--raio-sm);
}

.ap-zap__balao--robo {
  align-self: flex-start;
  background: var(--bg-superficie);
  border-bottom-left-radius: var(--raio-sm);
}

/* ═══════════════════════════════════════════════════════════════════
   FORMULÁRIO COM CLIENTE — vieram de agenda.css (Fase 18): a Agenda e a
   Lista de espera usam o mesmo bloco, a mesma busca e o mesmo cartão de
   cliente escolhido. Componente de mais de uma tela mora aqui.
   ═══════════════════════════════════════════════════════════════════ */

/* ── BLOCO DE FORMULÁRIO ──────────────────────────────────────────── */

.ap-bloco-form {
  border: 1px solid var(--borda-sutil);
  border-radius: var(--raio-md);
  padding: var(--esp-4);
  margin: 0 0 var(--esp-4);
  min-width: 0;
}

.ap-bloco-form__titulo {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  width: auto;
  padding: 0 var(--esp-2);
  margin-left: calc(var(--esp-2) * -1);
  font-size: var(--txt-sm);
  font-weight: var(--peso-semi);
  color: var(--texto-fraco);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── BUSCA DE CLIENTE ─────────────────────────────────────────────── */

.ap-busca-cliente {
  position: relative;
}

.ap-busca-cliente__lista {
  position: absolute;
  top: calc(100% + var(--esp-1));
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  max-height: 15rem;
  overflow-y: auto;
  margin: 0;
  padding: var(--esp-1);
  list-style: none;
  background: var(--bg-elevado);
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra-elevada);
}

.ap-busca-cliente__item {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-2) var(--esp-3);
  border-radius: var(--raio-sm);
  cursor: pointer;
  min-width: 0;
}

.ap-busca-cliente__item:hover,
.ap-busca-cliente__item:focus-visible {
  background: var(--bg-hover);
  outline: 0;
}

.ap-busca-cliente__item strong {
  font-size: var(--txt-base);
  color: var(--texto-forte);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ap-busca-cliente__item small {
  font-size: var(--txt-xs);
  color: var(--texto-fraco);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
  white-space: nowrap;
}

.ap-busca-cliente__vazio {
  padding: var(--esp-3);
  font-size: var(--txt-sm);
  color: var(--texto-fraco);
  text-align: center;
}

.ap-cliente-escolhido {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-3);
  background: var(--cor-primaria-suave);
  border: 1px solid var(--cor-primaria);
  border-radius: var(--raio-md);
  min-width: 0;
}

.ap-cliente-escolhido__avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--raio-full);
  background: var(--cor-primaria);
  color: var(--cor-primaria-contraste);
  font-weight: var(--peso-forte);
}

.ap-cliente-escolhido__dados {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ap-cliente-escolhido__dados strong {
  color: var(--texto-forte);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ap-cliente-escolhido__dados small {
  font-size: var(--txt-xs);
  color: var(--texto-fraco);
}

.ap-cliente-escolhido .ap-acao-btn {
  margin-left: auto;
  flex: 0 0 auto;
}