/* ─────────────────────────────────────────────────────────────────────────────
   plataforma.css  •  Aiyra Cloud
   Padrão visual e de componentes para telas internas (KISS • acessível • neutro)

   OBJETIVO
   Unificar layout, tipografia, botões, formulários, tabelas, feedbacks e
   interações (incl. HTMX) usando somente a paleta neutra (preto/cinza/branco),
   garantindo consistência, legibilidade e fluidez sem JS adicional.

   PRINCÍPIOS
   • KISS: classes previsíveis (.two-pane, .panel, .btn, .table, .form-grid…).
   • Acessibilidade: foco visível, contraste ≥ 4.5:1, espaçamentos generosos.
   • Tokens SEMPRE: nada de cores “soltas”; use var(--ink/--line/--hover/…).
   • HTMX-first: respostas parciais bem-comportadas, sem “piscar” a página.

   ESTRUTURA & ESQUELETO
   • Página com shell:
        <div class="layout">
          <aside class="sidebar">…</aside>
          <main id="content" class="content">…</main>
        </div>
   • Subpáginas carregadas pela sidebar/HTMX DEVEM vir embrulhadas em:
        <main class="content">…</main>
     (Compatível com hx-select="main.content" + hx-target="#content".)

   GRID “TWO-PANE” (LISTA + DETALHE)
   • Contêiner:
        <div class="two-pane"> <aside class="panel pane-left">…</aside>
                               <section class="panel pane-right">…</section> </div>
   • Largura da lista por tela (se necessário):
        .two-pane { --pane-left: 640px; }
   • Sticky opcional no desktop:
        <div class="two-pane sticky-left">…</div>

   BOTÕES & ESTADOS
   • .btn (primário), .btn-outline (secundário), .btn-ghost (terciário), .btn-danger (neutro escuro).
   • Foco: :focus-visible com halo neutro (var(--focus-ring)).
   • Durante requisições HTMX: .htmx-request aplica feedback suave (sem JS extra).

   FORMULÁRIOS
   • Grid responsivo:
        <form class="form-grid">…</form>  +  .full para ocupar a linha inteira
   • Campos: .input (ou seletores nativos) herdam tokens, foco visível neutro
   • Ações: .form-actions para alinhar botões com gap consistente

   TABELAS
   • .table com cabeçalho cinza claro e hover sutil em linhas
   • Evite larguras fixas; tabelas devem se ajustar ao painel

   BADGES & ALERTS
   • Badges: .badge (contorno) e .badge-soft (sólido claro)
   • Alertas neutros:
        .notice, .notice-ok, .notice-warn, .notice-err
     (todas em escala de cinza; sem cores de status saturadas)

   MODAIS / POP-UPS
   • Estrutura:
        <div class="pop-wrap" id="...">
          <div class="pop-backdrop"></div>
          <div class="pop-card">…</div>
        </div>
     Feche com ESC/backdrop no shell JS. Visual neutro pronto no CSS.
   • Modal de vozes (IA): largura reduzida com seletor de gênero (F/M).
     Regra específica: #ai-voices-modal .pop-card { width:min(520px,70vw) … }

   PADRÕES HTMX (IMPORTANTE)
   • Navegação lateral:
        <aside class="sidebar" hx-boost="true" hx-target="#content" hx-select="main.content" hx-swap="innerHTML">
     → As páginas DEVEM responder com <main class="content">…</main>.
   • Atualização da lista após salvar (UX fluida):
     No POST de “salvar”, além do painel de detalhe atualizado, retorne a lista
     com atributo hx-swap-oob="true" no <aside id="…"> correspondente.
   • Indicadores / spinner de carregamento:
     – Para formulários e ações hx-post/hx-get que devem mostrar “processando”,
       insira próximo ao botão principal (geralmente o primeiro .btn):
         <span class="htmx-indicator btn-spinner" aria-hidden="true"></span>
     – Em estados de carregamento inicial (ex.: “Carregando…” de um painel),
       você pode usar apenas .btn-spinner (sem .htmx-indicator), visível desde o começo.
     – O HTMX aplica .htmx-request no contêiner (form, painel, etc.); essa classe
       faz o .htmx-indicator aparecer automaticamente enquanto a requisição estiver ativa.
   • Auto-refresh em cartões IA:
     – Status (ex.: embeddings): hx-trigger="every 2s"
     – Listas (ex.: embeddings):  hx-trigger="every 15s"

   UTILITÁRIOS
   • Margens/espaçamentos: .mt-*, .mb-*, .p-*, .gap-* (básicos inclusos)
   • Flex helpers: .flex, .items-center, .justify-between
   • Acessibilidade: .sr-only para textos auxiliares visuais

   SEÇÃO IA (INTELIGÊNCIA ARTIFICIAL)
   • Grid .cards-2x2 para 4 cartões superiores e um cartão grande de Embeddings.
   • Espaçamento inferior da grade garantido por margin-bottom.
   • Indicadores de status (.status-dot):
       st-ok   = VERDE   (conectado)
       st-wait = AMARELO (disponível/aguardando)
       st-bad  = VERMELHO (desconectado/erro)
   • Switch (toggle) com alto contraste:
       ativo = PRETO (#111) para acessibilidade.

   RESUMO DE BOAS PRÁTICAS
   1) Sempre embrulhe subpáginas em <main class="content">…</main>.
   2) Use OOB swap (hx-swap-oob) para refrescar listas após salvar.
   3) Nunca use cores “hard-coded”; apenas tokens :root.
   4) Prefira .two-pane para listas/detalhes e .panel para cartões.
   5) Deixe inputs e botões com foco visível; nada de outline: none isolado.
   6) Evite JS para feedback: .htmx-request, .notice-* e o spinner .btn-spinner
      (via .htmx-indicator) cobrem o essencial na maioria dos fluxos.

   Este arquivo define apenas tokens/estilos. Continue seguindo-o nos HTMLs
   para garantir uma experiência consistente, fluida e acessível.
   ─────────────────────────────────────────────────────────────────────────── */

:root{
  /* Paleta neutra */
  --bg:#ffffff;            /* fundo geral */
  --surface:#ffffff;       /* cartões/superfícies */
  --ink:#111111;           /* texto principal */
  --muted:#6b6b6b;         /* texto secundário */
  --line:#e5e5e5;          /* linhas/bordas */

  /* Interações */
  --hover:#f3f3f3;         /* hover cinza claro */
  --active:#eeeeee;        /* seleção/ativo */
  --focus-ring:rgba(17,17,17,.25); /* foco (preto translúcido) */

  /* “Marca” neutra (apenas tons) */
  --jj-brand:#000000;
  --jj-brand2:#4b4b4b;

  /* Dimensões & sombra */
  --radius:10px;
  --radius-sm:8px;
  --shadow:0 6px 14px rgba(0,0,0,.12);

  /* Grid two-pane (lista + detalhe) */
  --pane-left:610px;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:14px/1.45 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}

/* Tipografia padronizada */
h1,h2,h3,h4,h5,h6{margin:0 0 .5rem 0; line-height:1.2; color:var(--ink)}
h1{font-size:clamp(22px,2.5vw,28px); font-weight:700}
h2{font-size:clamp(18px,2vw,22px);   font-weight:700}
h3{font-size:16px;                   font-weight:700}
h4{font-size:15px;                   font-weight:600}
.subtitle{font-size:14px;color:#333;margin-top:-.25rem;margin-bottom:.75rem}
.lead{font-size:15px;color:#2b2b2b}
.muted{color:var(--muted)}
.small{font-size:12px;color:var(--muted)}

/* Topbar e layout geral */
.topbar{
  height:56px; display:flex; align-items:center; justify-content:space-between;
  padding:0 16px; background:var(--surface); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:40;
}
.layout{
  display:grid; grid-template-columns:260px 1fr;
  min-height:calc(100vh - 56px);
}

/* Sidebar */
.sidebar{
  background:var(--surface); border-right:1px solid var(--line); padding:12px;
}
.group{margin-bottom:14px}
.group-title{font-weight:600; margin:6px 0 6px 2px}
.sidebar ul{list-style:none; margin:0; padding:0}
.sidebar li{margin:6px 0}
.sidebar a{
  display:block; padding:6px 8px; border-radius:8px;
}
.sidebar a:hover{ background:var(--hover); text-decoration:none }
.sidebar a[aria-current="page"], .sidebar a.active{
  background:var(--active); text-decoration:none; box-shadow: inset 0 0 0 1px #d9d9d9;
}
.sidebar a:focus-visible{
  outline:none; border-radius:8px; box-shadow:0 0 0 3px var(--focus-ring);
}

/* Conteúdo */
.content{padding:16px}

/* Painéis (cartões) */
.panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
  box-shadow:var(--shadow);
}
.panel h3{margin:0 0 10px 0}

/* Grid “two-pane” (lista + detalhe) */
.two-pane{
  display:grid;
  grid-template-columns:var(--pane-left) 1fr;
  gap:16px;
}
.two-pane .pane-left,.two-pane .pane-right{min-width:0; overflow:visible}
@media (max-width:1200px){
  .two-pane{grid-template-columns:1fr}
  .two-pane .pane-left{order:1}
  .two-pane .pane-right{order:2}
}
/* Sticky opcional (desktop) */
.two-pane.sticky-left .pane-left{
  position:sticky; top:12px; height:calc(100vh - 120px); overflow:auto;
}
.two-pane.sticky-left .pane-right{ min-height:calc(100vh - 120px) }
@media (max-width:1200px){
  .two-pane.sticky-left .pane-left{ position:static; height:auto; overflow:visible }
  .two-pane.sticky-left .pane-right{ min-height:auto }
}

/* Botões (neutros) */
button{ -webkit-appearance:none; appearance:none; border:0; background:none; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border-radius:var(--radius-sm);
  background:#111; color:#fff; font-weight:600; cursor:pointer;
  box-shadow:0 2px 0 rgba(0,0,0,.08);
  transition:transform .06s ease, filter .12s ease, box-shadow .12s ease;
}
.btn:hover{ filter:brightness(.96) }
.btn:active{ transform:translateY(1px) scale(.99); box-shadow:0 1px 0 rgba(0,0,0,.08) }
.btn:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--focus-ring) }
.btn:disabled{ opacity:.6; cursor:not-allowed }

.btn-outline{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border-radius:var(--radius-sm);
  background:transparent; color:#111; border:1px solid var(--line);
  transition:transform .06s ease, background .12s ease, box-shadow .12s ease;
}
.btn-outline:hover{ background:var(--hover) }
.btn-outline:active{ transform:translateY(1px) scale(.99) }
.btn-outline:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--focus-ring) }

.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:8px 10px; border-radius:var(--radius-sm);
  background:transparent; color:#222;
}
.btn-ghost:hover{ background:var(--hover) }

.btn-danger{
  /* “perigoso” em neutro (sem vermelho): preto com hover mais claro */
  background:#222; color:#fff; border:1px solid #222;
}
.btn-danger:hover{ filter:brightness(.95) }

/* Spinner neutro para botões/requests (usado com .htmx-indicator) */
.btn-spinner{
  width:16px;
  height:16px;
  border-radius:999px;
  border:2px solid var(--line);
  border-top-color:#111;
  animation:btnSpin .7s linear infinite;
  flex-shrink:0;
  margin-left:6px;
}

/* Animação de rotação do spinner */
@keyframes btnSpin{
  to{ transform:rotate(360deg); }
}

/* Estados HTMX (feedback suave) */
/* Aplica apenas quando o PRÓPRIO botão dispara a requisição HTMX. */
.htmx-request.btn,
.htmx-request.btn-outline{
  transform:translateY(1px) scale(.98);
  filter:brightness(.95);
  cursor:default;
}

/* Tabelas */
.table{ width:100%; border-collapse:collapse; background:var(--surface) }
.table th,.table td{
  border-bottom:1px solid var(--line);
  padding:8px 6px; font-size:14px; text-align:left;
}

.table th{ font-weight:600; color:#333; background:#f2f2f2 }
.table tr:hover td{ background:#fafafa }

/* Formulários */
label{display:grid; gap:6px; font-size:14px}
.input, input[type="text"], input[type="email"], input[type="password"], input[type="search"], textarea, select{
  width:100%; background:var(--surface); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:10px 12px;
  transition:border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.input::placeholder, input::placeholder, textarea::placeholder{ color:#9a9a9a }
.input:focus, input:focus, textarea:focus, select:focus{
  outline:none; border-color:#cfcfcf; box-shadow:0 0 0 3px var(--focus-ring);
}
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
.form-grid .full{ grid-column:1 / -1 }
.form-actions{ display:flex; gap:8px; align-items:center; margin-top:8px }

/* Badges */
.badges{ display:flex; gap:6px; flex-wrap:wrap; margin:6px 0 }
.badge{
  display:inline-block; padding:3px 8px; border-radius:999px;
  border:1px solid var(--line); font-size:12px; color:#222; background:#fff;
}
.badge-soft{
  background:#f3f3f3; color:#2a2a2a; border:1px solid #e5e5e5;
}

/* Alerts / Notificações (neutros) */
.notice{
  padding:8px 10px; border-radius:8px; border:1px solid var(--line);
  background:#f7f7f7; color:#222; margin:8px 0;
}
.notice-ok{    background:#f6f6f6; border-color:#e0e0e0; color:#212121 }
.notice-warn{  background:#f5f5f5; border-color:#dcdcdc; color:#2b2b2b }
.notice-err{   background:#f4f4f4; border-color:#d6d6d6; color:#1f1f1f }

/* Switch (toggle) — cinza somente */
.switch{ position:relative; width:52px; height:28px; display:inline-block }
.switch input{ opacity:0; width:0; height:0 }
.switch .sl{
  position:absolute; inset:0; border-radius:28px;
  background:#e9e9e9; border:1px solid #d6d6d6;
  transition:background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.switch .sl::before{
  content:""; position:absolute; left:3px; bottom:3px; width:22px; height:22px;
  background:#fff; border-radius:50%; box-shadow:0 1px 2px rgba(0,0,0,.12);
  transition:transform .18s ease;
}
/* Ativo → PRETO (alto contraste) */
.switch input:checked + .sl{
  background:#111; border-color:#111; box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);
}
.switch input:checked + .sl::before{ transform:translateX(24px) }

/* Popover básico (ex.: menu do usuário, cartões flutuantes) */
.pop-wrap{ position:fixed; inset:0; z-index:60; pointer-events:none }
.pop-backdrop{ position:absolute; inset:0; background:rgba(17,17,17,.18); backdrop-filter:blur(1px); pointer-events:auto }
.pop-card{
  position:absolute; right:16px; top:64px; min-width:320px; max-width:380px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:12px; box-shadow:0 20px 40px rgba(0,0,0,.12); pointer-events:auto;
}

/* Utilitários rápidos (margens, flex, alinhamentos) */
.mt-8{margin-top:8px} .mt-12{margin-top:12px} .mt-16{margin-top:16px}
.mb-8{margin-bottom:8px} .mb-12{margin-bottom:12px} .mb-16{margin-bottom:16px}
.p-8{padding:8px} .p-12{padding:12px} .p-16{padding:16px}
.flex{display:flex} .items-center{align-items:center} .justify-between{justify-content:space-between}
.gap-6{gap:6px} .gap-8{gap:8px} .gap-12{gap:12px}
.hidden{display:none} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Estado de carregamento (htmx-indicator) */
.htmx-indicator{ display:none }
.htmx-request .htmx-indicator{ display:inline-flex }

/* Login (opcional) */
.login{ min-height:100svh; display:grid; place-items:center }
.card{ display:grid; gap:12px; min-width:280px; background:#fff; padding:24px;
       border:1px solid var(--line); border-radius:12px }

/* Tabela auxiliar (áreas/ACL, se necessário) */
.grid-areas{ width:100%; border-collapse:collapse; margin-top:6px }
.grid-areas th,.grid-areas td{ border-bottom:1px solid var(--line); padding:8px 6px; font-size:14px; text-align:left }
.grid-areas th{ background:#f2f2f2 }
.grid-areas .right{text-align:center}

/* Pills */
.pill{ display:inline-block; padding:3px 8px; border-radius:999px; background:#f3f3f3; border:1px solid var(--line); font-size:12px }

/* Logos dimensionadas */
.logo-top{height:28px;width:auto;display:block}
.logo-login{height:48px;width:auto;display:block}

/* ────────────────────────────────────────────────────────────────────
   IA – cartões e grid (Aiyracloud) - inteligencia artifical
   ─────────────────────────────────────────────────────────────────── */
.cards-2x2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-bottom:16px;     /* garante “respiro” abaixo da grade */
}
@media (max-width:1200px){
  .cards-2x2{ grid-template-columns:1fr }
}

.ai-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.ai-head{
  display:flex; align-items:center; gap:8px;
}
.ai-head .title{ font-weight:700; font-size:15px }
.ai-sub{ color:#333; font-size:14px; margin-top:-4px }
.ai-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.ai-actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:4px }

.status-dot{ width:10px; height:10px; border-radius:50%; display:inline-block; border:1px solid #cfcfcf }
/* Conectado = VERDE, Disponível/Aguardando = AMARELO, Desconectado = VERMELHO */
.status-dot.st-ok{   background:#16a34a; border-color:#15803d }  /* verde */
.status-dot.st-wait{ background:#facc15; border-color:#eab308 }  /* amarelo */
.status-dot.st-bad{  background:#ef4444; border-color:#dc2626 }  /* vermelho */

.gc-ai .ok{ padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:#f6f6f6 }
.gc-ai .err{ padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:#f4f4f4 }
.gc-ai .warn{ padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:#f5f5f5 }

/* Pequenos ajustes para inputs em cards */
.ai-card .field{ display:grid; gap:6px; font-size:14px }
.ai-card input[type="file"]{ font-size:13px }

/* Modal de vozes – largura reduzida e responsiva (força sobre a regra genérica) */
#ai-voices-modal .pop-card{
  width:min(520px,70vw) !important;
  min-width:320px !important;
  max-width:600px !important;
}

/* ────────────────────────────────────────────────────────────────────
   Aiyra • Chat-style landing (Início da IA) — inspirado no ChatGPT
   ─────────────────────────────────────────────────────────────────── */

.chat-hero{
  position:relative;
  min-height:calc(100vh - 56px);
  display:grid;
  align-content:start;                 /* começa mais alto que o centro */
  justify-content:center;
  padding-top:12vh;                     /* controla o quão “alto” fica */
  gap:16px;
  text-align:center;
}
@media (max-height:760px){ .chat-hero{ padding-top:6vh } }

.chat-brand{
  position:absolute; top:8px; left:8px;
  font-weight:600; font-size:14px; color:var(--muted);
}

.chat-title{
  font-size:clamp(24px,3.6vw,34px);
  font-weight:700; letter-spacing:.2px; margin-bottom:4px;
}

.chat-ask{
  width:min(920px,100%);
  margin:0 auto;
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--line);
  background:var(--surface);
  padding:6px 8px;
  border-radius:999px;
  box-shadow:var(--shadow);
}
.chat-ask .chat-input{
  -webkit-appearance:none; appearance:none;
  border:0 !important; outline:none !important; box-shadow:none !important;
  background:transparent; flex:1 1 auto; padding:12px 12px; font-size:15px;
}
.chat-ask .chat-input::placeholder{ color:#9a9a9a }
.chat-send{ border-radius:999px; padding:10px 16px }

.chat-suggestions{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:8px;
}
.chat-suggestions .pill{ cursor:pointer; user-select:none; padding:8px 12px; font-size:13px; background:#f6f6f6 }
.chat-suggestions .pill:hover{ background:var(--hover); text-decoration:none }

/* Modo “chat iniciado” */
.content.chat-started .chat-hero{ display:none }
.chat-screen{ display:none }
.content.chat-started .chat-screen{ display:block }

/* Feed estilo ChatGPT */
.chat-feed{
  width:min(880px,100%);
  margin:0 auto 96px auto;             /* espaço para o composer */
  display:flex; flex-direction:column; gap:12px;
}
.chat-item{ display:flex }
.chat-item.user{ justify-content:flex-end }
.chat-item.assistant{ justify-content:flex-start }
.chat-bubble{
  max-width:78ch;
  background:#f7f7f7; border:1px solid var(--line);
  border-radius:12px; padding:12px 14px;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
  text-align:left; white-space:pre-wrap;
}
.chat-item.user .chat-bubble{ background:#111; color:#fff; border-color:#111 }
.chat-meta{ font-size:11px; color:var(--muted); margin-top:6px }
.chat-details summary{ cursor:pointer }
.chat-details pre{ background:#fafafa; border:1px solid var(--line); border-radius:8px; padding:8px; overflow:auto }

/* Composer fixo no rodapé da subpágina */
.chat-composer{
  position:sticky; bottom:12px;
  width:min(920px,100%);
  margin:0 auto;
  display:flex; align-items:center; gap:8px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:999px;
  padding:6px 8px;
  box-shadow:0 10px 28px rgba(0,0,0,.08);
}
.chat-composer .chat-input{
  -webkit-appearance:none; appearance:none;
  border:0 !important; outline:none !important; box-shadow:none !important;
  background:transparent; flex:1 1 auto; padding:12px 12px; font-size:15px;
}
.chat-composer .chat-input::placeholder{ color:#9a9a9a }
.chat-composer .chat-send{ border-radius:999px; padding:10px 16px }

/* ────────────────────────────────────────────────────────────────────
   Kanban • Atendimento • Mensagens — elementos auxiliares
   ─────────────────────────────────────────────────────────────────── */
.k-resp-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--surface);
  font-size:11px;
  font-weight:700;
}
.k-chan-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:2px 6px;
  border-radius:999px;
  border:1px solid var(--line);
  font-size:10px;
  text-transform:uppercase;
  color:var(--muted);
}

/* Pulsar por SLA (cliente aguardando resposta) */
@keyframes kbPulseNow{
  0%{box-shadow:0 0 0 0 rgba(22,163,74,.50);}
  70%{box-shadow:0 0 0 10px rgba(22,163,74,0);}
  100%{box-shadow:0 0 0 0 rgba(22,163,74,0);}
}
@keyframes kbPulseWait{
  0%{box-shadow:0 0 0 0 rgba(239,68,68,.55);}
  70%{box-shadow:0 0 0 10px rgba(239,68,68,0);}
  100%{box-shadow:0 0 0 0 rgba(239,68,68,0);}
}
.pulse-now{
  border-color:#16a34a;
  animation:kbPulseNow 1.4s infinite;
}
.pulse-wait{
  border-color:#ef4444;
  animation:kbPulseWait 1.2s infinite;
}

/* ─────────────────────────────────────────────────────────────
   Modal de horário do Consultivo
   • Mantém o comportamento global de pop-up
   • Apenas aumenta e centraliza horizontalmente
   ───────────────────────────────────────────────────────────── */
#consultivo-horario .pop-card{
  /* continua position:absolute herdado da .pop-card global */
  left:50%;
  right:auto;
  transform:translateX(-50%);
  width:min(900px, calc(100vw - 32px)); /* largura confortável e responsiva */
  min-width:480px;                       /* não fica estreito demais no desktop */
  max-width:900px;
}

/* Alinhamento da primeira linha do modal de horário (Consultivo) */
#consultivo-horario .ch-top-row{
  align-items:flex-end;
}

/* Modal de horário de Serviços (profissionais / salas) — centralizado */
#servicos-horario-prof .pop-card,
#servicos-sala-horario .pop-card,
#servicos-prof-servicos .pop-card{
  left:50%;
  right:auto;
  transform:translateX(-50%);
  width:min(980px, calc(100vw - 32px));
  min-width:520px;
  max-width:980px;
}

/* Impede quebra de linha dentro dos botões */
.btn,
.btn-outline {
  white-space: nowrap;
}