/* ─────────────────────────────────────────────────────────────
   /home/jamjoy/site/static/css/app.css
   Padrões Jamjoy para novas telas (KISS)

   1) Layout de duas colunas (lista + detalhe)
      • Use SEMPRE o contêiner:  <div class="two-pane">…</div>
      • Painéis internos:
            <aside  class="panel pane-left">…</aside>
            <section class="panel pane-right">…</section>
      • Largura padrão da coluna esquerda vem de :root → --pane-left
        (valor único para o app). Se precisar customizar numa tela:
            .two-pane { --pane-left: 640px; }

   2) Sticky (lista fixa no desktop)
      • NÃO é padrão. Só ative quando fizer sentido:
            <div class="two-pane sticky-left">…</div>
      • Em <1200px o sticky é automaticamente desativado (empilha colunas).

   3) HTMX – boas práticas
      • Preferir hx-trigger padrão (click). Evite "revealed" para botões
        de navegação/fechar — isso causa auto-carregamento e “pisca”.
      • Para carregamento inicial do painel: use hx-trigger="load" no
        contêiner de destino (ex.: <aside id="list" hx-trigger="load">).
      • Em links hx-get, deixe href="#" para impedir navegação tradicional.
      • Mantenha hx-target apontando para o painel correto (#pane-right,
        #u-detail, #cp-detail, etc.).

   4) Botões (feedback e consistência)
      • Use .btn (primário) ou .btn-outline (secundário).
      • O CSS já implementa "efeito clique" e estado .htmx-request
        (aperta levemente, escurece discretamente).
      • Acessibilidade: .btn:focus-visible com outline.

   5) Responsividade
      • .two-pane empilha em <1200px (lista acima, detalhe abaixo).
      • Evite heights fixos. Quando sticky não for necessário, deixe
        o fluxo natural (sem overflow na left).

   6) Espaçamento e grids
      • Estruture formulários com .form-grid (duas colunas) e use
        .full para campos que devem ocupar a linha inteira.
      • Ações agrupadas usam .form-actions (gap consistente).
      • Tabelas: .table com cabeçalho colado e hover suave.

   7) Acessibilidade
      • Sempre rotule inputs com <label> visível.
      • Botões que executam algo via HTMX devem ter type="button"
        quando não enviarem <form>.
      • Links “falsos” com hx-get recebem href="#" e role="button"
        quando necessário.

   8) Nomeação e organização
      • Classes de layout:  .two-pane, .pane-left, .pane-right.
      • Painéis: sempre .panel com título <h3>.
      • Evite estilos inline; quando precisar exceção, crie utilitários
        (ex.: .mt-8, .mb-10) ou sobrescreva variáveis CSS.

   9) Cores, raios e sombras
      • Não usar cores “soltas”. Sempre via tokens:
        var(--jj-brand), var(--jj-brand2), var(--line), var(--ink).
      • Bordas e cantos respeitam --radius; sombra usa --shadow.

   10) Estrutura mínima de página (exemplo)
      <section>
        <h2>Título da área</h2>
        <p class="muted">Descrição curta.</p>

        <div class="two-pane">
          <aside  id="list"   class="panel pane-left"
                  hx-get="/m/area/mod/lista" hx-trigger="load"
                  hx-target="#list" hx-swap="outerHTML">
            <div class="muted">Carregando…</div>
          </aside>

          <section id="detail" class="panel pane-right">
            <div class="muted">Selecione um item à esquerda.</div>
          </section>
        </div>
      </section>

   11) Erros comuns a evitar
      • Não aplicar sticky direto em #u-list, #cp-list, etc.
        (deixe o sticky controlado por .two-pane.sticky-left).
      • Não usar hx-trigger="revealed" em botões de navegação.
      • Não definir larguras fixas nas colunas; sempre use variáveis.

   12) Variáveis úteis (podem ser sobrescritas por tela)
      :root {
        --pane-left: 610px; /* largura padrão da lista */

/* ─────────────────────────────────────────────────────────────
   Padrão Jamjoy — Notificações EFÊMERAS (visual)
   --------------------------------------------------------------
   Objetivo
     Padronizar a área de mensagens de status (banners OK/ERR/WARN)
     para evitar “pisca-pisca” e salto de layout. Atenção aos workers gunicord, podem duplicar ações
     gerando erros de interpretação gráfica.

   Regras gerais
     1) Os banners usam as classes já padronizadas:
          .ok   → sucesso (fundo verde claro, borda verde)
          .warn → aviso  (fundo amarelo claro)
          .err  → erro   (fundo vermelho claro)
        (As classes já existem abaixo e não precisam de alteração.)
     2) O slot de notificação deve ter altura mínima para evitar pulo visual.
        Propriedade recomendada:
          min-height: 28px;  
        Ex.: <div id="emb-status" style="min-height:28px">…</div>
     3) Não utilizar timeouts em JS para esconder a mensagem. A expiração
        e limpeza são realizadas no servidor após o TTL (padrão 5s).
     4) Animação/entrada é opcional. Caso desejar, aplique transições leves
        por utilitários (ex.: opacidade) sem bloquear interações.
     5) Acessibilidade: quando possível, incluir `role="status"` e
        `aria-live="polite"` no container do banner.

   Estrutura recomendada (HTML + HTMX)
     <div id="feature-status"
          hx-get="/m/area/mod/status"
          hx-trigger="load delay:300ms, every 2s"
          hx-target="#feature-status" hx-swap="innerHTML"
          style="min-height:28px">
       <div class="small muted">Aguardando…</div>
     </div>

   Resultado esperado
     • Durante a operação: barra de progresso ou mensagem “processando…”
     • Conclusão (≤ 5s): banner .ok ou .err visível
     • Após 5s: volta automática ao estado neutro (sem banners residuais)
   -------------------------------------------------------------- */
        
:root{
  /* Cores base */
  --ink:#111827;
  --bg:#f8fafc;
  --line:#e5e7eb;

  /* Paleta Jamjoy (use sempre estas) */
  --jj-brand:#8B1A76;   /* roxo Jamjoy */
  --jj-brand2:#C1228E;  /* magenta de apoio */

  /* Tokens globais */
  --radius:10px;
  --shadow:0 6px 14px rgba(139,26,118,.18);

  /* Largura padrão global da coluna esquerda (lista) */
  --pane-left: 610px;  /* valor único para todo o app */
}

*{box-sizing:border-box}

/* Botões (padrão Jamjoy) */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 14px;border:0;border-radius:var(--radius);
  background:linear-gradient(90deg, var(--jj-brand), var(--jj-brand2));
  color:#fff;font-weight:600;cursor:pointer;box-shadow:var(--shadow);
  -webkit-appearance:none;appearance:none; /* evita botão azul padrão no Safari */
  transition:transform .06s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:hover{filter:brightness(.98)}
.btn:active{ transform:translateY(1px) scale(.99); box-shadow:0 3px 10px rgba(139,26,118,.16); filter:brightness(.96) }
.btn:focus-visible{ outline:2px solid var(--jj-brand2); outline-offset:2px }
.btn:disabled{opacity:.6;cursor:not-allowed}
a.btn{color:#fff;text-decoration:none}

.btn-outline{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 14px;border-radius:var(--radius);
  background:transparent;color:var(--jj-brand);border:1px solid var(--jj-brand);
  cursor:pointer;transition:transform .06s ease, background .12s ease, box-shadow .12s ease;
}
.btn-outline:hover{background:rgba(139,26,118,.06)}
.btn-outline:active{ transform:translateY(1px) scale(.99) }
.btn-outline:focus-visible{ outline:2px solid var(--jj-brand); outline-offset:2px }
.btn-outline:disabled{opacity:.6;cursor:not-allowed}

/* ===== Feedback HTMX (requisição em andamento) — só efeito de clique ===== */
/* Escopo CORRETO: aplica o efeito apenas no elemento que está enviando a requisição,
   não em todos os botões descendentes de um contêiner em estado .htmx-request  */
.btn.htmx-request,
.btn-outline.htmx-request,
.badge.htmx-request{
  transform:translateY(1px) scale(.98);
  filter:brightness(.95);
  box-shadow:0 2px 8px rgba(139,26,118,.14);
}

/* Clique otimista (tap) — usado em todos os botões do card (IA, Resp., Assumir, Finalizar) */
.k-act.tap{
  box-shadow:0 0 0 0 rgba(139,26,118,.28), 0 2px 8px rgba(139,26,118,.18);
  animation: jjTap .22s ease;
}
@keyframes jjTap{
  0%  { box-shadow:0 0 0 0 rgba(139,26,118,.30), 0 3px 10px rgba(139,26,118,.22); transform:translateY(0)   scale(1);    }
  60% { box-shadow:0 0 0 6px rgba(139,26,118,0),  0 2px 8px  rgba(139,26,118,.18); transform:translateY(1px) scale(.985); }
  100%{ box-shadow:0 0 0 6px rgba(139,26,118,0),  0 2px 8px  rgba(139,26,118,.10); transform:translateY(0)   scale(1);    }
}

/* ===== KISS: “clique otimista” roxo para botões compactos dos cards (consolidado) ===== */
.k-act{
  transition: filter .12s ease, transform .06s ease, box-shadow .12s ease, background .18s ease;
}

/* pulso curto quando o botão é clicado (classe aplicada via onclick) */
.k-act.tap{
  background: rgba(139,26,118,.08);
  box-shadow: 0 0 0 3px rgba(139,26,118,.18) inset;
  animation: jjTapPulse .32s ease-out;
}

/* aplica o “aperto” apenas no PRÓPRIO botão em request (sem herdar do contêiner do board) */
.k-act.htmx-request{
  filter:brightness(.96);
  transform:translateY(1px) scale(.99);
  box-shadow:0 2px 8px rgba(139,26,118,.14);
}

/* keyframes jjTapPulse já aparece acima no arquivo; manter uma única definição */


/* Base */
body{margin:0;font-family:system-ui,Segoe UI,Roboto,Inter,Arial,sans-serif;color:var(--ink);background:var(--bg)}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}

/* Topbar */
.topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);background:#fff}
.topbar .user{opacity:.7}

/* Layout com sidebar */
.layout{display:grid;grid-template-columns:260px 1fr;min-height:calc(100vh - 54px)}
.sidebar{border-right:1px solid var(--line);padding:12px;background:#fff}
.sidebar .group{margin-bottom:14px}
.group-title{font-weight:600;margin:6px 0 6px 2px}
.sidebar ul{list-style:none;padding:0;margin:0}
.sidebar li{margin:6px 0}
.sidebar a{display:block;padding:6px 8px;border-radius:8px}
.sidebar a:hover{background:#f6eaf4}

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

/* Login – centraliza o bloco (logo + card + rodapé) no viewport */
.login{
  min-height:100svh;         /* usa viewport “small” para evitar barras do navegador */
  display:grid;
  place-items:center;        /* centraliza vertical e horizontal */
  padding:0;                 /* sem interferência de padding no body */
  gap:0;
}

.card{display:grid;gap:12px;min-width:280px;background:#fff;padding:24px;border:1px solid var(--line);border-radius:12px}
.card h1{margin:0 0 8px 0;font-size:20px}
label{display:grid;gap:6px;font-size:14px}
input{padding:10px 12px;border:1px solid var(--line);border-radius:8px}

/* Botão nativo – reset leve (o visual vem de .btn) */
button{
  padding:10px 12px;border:0;border-radius:var(--radius);cursor:pointer;
  -webkit-appearance:none;appearance:none; /* remove skin nativa em macOS/iOS */
}
button:hover{filter:brightness(.98)}

/* Alerts */
.error{color:#b91c1c;background:#fee2e2;border:1px solid #fecaca;padding:8px 10px;border-radius:8px}

/* Kanban stub */
.kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.kanban .col{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px}
.kanban .col h3{margin:0 0 8px 0}
.card-k{background:#f9fafb;border:1px solid var(--line);border-radius:8px;padding:8px;margin-bottom:8px}
.card-k .k-text{margin-top:6px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:1.25em;line-height:1.25em}

/* ===== Pulso de prioridade dos cards (padronizado; usar APENAS aqui) =====
   Mapeamento:
     .pulse-green  → OK / ≤ 60s            (borda verde)
     .pulse-mid    → SOON / até 5min       (borda amarela)
     .pulse-high   → LATE / > 5min         (borda vermelha)
   Observação:
     Não duplique este bloco em outras folhas/HTML; o UI deve apenas aplicar a classe. */
@keyframes jjPulseRed   { 0%{box-shadow:0 0 0 0 rgba(239,68,68,.45)}   70%{box-shadow:0 0 0 9px rgba(239,68,68,0)}   100%{box-shadow:0 0 0 0 rgba(239,68,68,0)} }
@keyframes jjPulseAmber { 0%{box-shadow:0 0 0 0 rgba(245,158,11,.35)}  70%{box-shadow:0 0 0 9px rgba(245,158,11,0)}  100%{box-shadow:0 0 0 0 rgba(245,158,11,0)} }
@keyframes jjPulseGreen { 0%{box-shadow:0 0 0 0 rgba(16,185,129,.32)}  70%{box-shadow:0 0 0 9px rgba(16,185,129,0)}  100%{box-shadow:0 0 0 0 rgba(16,185,129,0)} }

.pulse-high  { border-color:#ef4444;  animation: jjPulseRed   1.2s infinite;  }
.pulse-mid   { border-color:#f59e0b;  animation: jjPulseAmber 1.2s infinite;  }
.pulse-green { border-color:#10b981;  animation: jjPulseGreen 1.2s infinite;  }

/* Respiro entre seções em painéis */
.panel section + section{margin-top:16px}

/* ===== Usuários – listas, formulários e grades ===== */
.muted{color:#6b7280}
.ok{color:#065f46;background:#ecfdf5;border:1px solid #a7f3d0;padding:8px 10px;border-radius:8px;margin:8px 0}
.warn{color:#92400e;background:#fffbeb;border:1px solid #fde68a;padding:8px 10px;border-radius:8px;margin:8px 0}
.err{color:#991b1b;background:#fee2e2;border:1px solid #fecaca;padding:8px 10px;border-radius:8px;margin:8px 0}

/* ===== Layout padrão Jamjoy – duas colunas (lista à esquerda + detalhe à direita) ===== */
.two-pane{
  display:grid;
  grid-template-columns: var(--pane-left) 1fr; /* usa a largura global */
  gap:16px;
}

/* Responsivo: empilha sem sobreposição */
@media (max-width: 1200px){
  .two-pane{ grid-template-columns:1fr; }
  .two-pane .pane-left{ order:1; }
  .two-pane .pane-right{ order:2; }
}

/* Sem sticky por padrão (evita cobre/detale) */
.two-pane .pane-left,
.two-pane .pane-right{
  min-width:0;
  overflow:visible;
}

/* (Opcional) sticky-left: use APENAS quando quiser sticky explicitamente */
.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; }
}

.panel{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px}
.panel h3{margin:0 0 10px 0}

/* Neutraliza regras legadas: o comportamento passa a ser controlado por .two-pane */
#u-list, #u-detail{
  position:static;
  height:auto;
  min-height:auto;
  overflow:visible;
}

.table{width:100%;border-collapse:collapse}
.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:#374151;background:#f9fafb}
.table tr:hover td{background:#f9fafb}

.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}
.badge-admin{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.badge-colab{background:#eff6ff;border-color:#bfdbfe;color:#1e3a8a}
.badge-cliente{background:#ecfeff;border-color:#a5f3fc;color:#164e63}

.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}
input[type="text"], input[type="email"], input[type="password"], select{padding:10px 12px;border:1px solid var(--line);border-radius:8px}
.label{font-size:13px;color:#374151}

.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:#f9fafb}
.grid-areas .right{text-align:center}

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

/* ===== Pop-up leve (senha do usuário) ===== */
.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(16,11,33,.12);pointer-events:auto;
}
.pop-title{margin:0 0 8px 0;font-weight:700;color:var(--jj-brand)}
.pop-grid{display:grid;gap:8px}
.pop-actions{display:flex;gap:8px;align-items:center;margin-top:6px}

/* ===== Menu do usuário (dropdown legado – mantido se for reutilizar) ===== */
.usernav{display:flex;align-items:center;gap:8px}
.usernav .user{position:relative}
.usernav .user a{text-decoration:none;color:inherit}
.user-menu-panel{
  position:absolute;right:0;top:26px;z-index:20;min-width:220px;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;
  box-shadow:0 12px 24px rgba(0,0,0,.08)
}
.user-menu-panel a{display:block;padding:8px;border-radius:8px}
.user-menu-panel a:hover{background:#f6eaf4}
.user-menu-form{display:grid;gap:8px}
.user-menu-form label{display:grid;gap:6px;font-size:14px}
.user-menu-actions{display:flex;gap:8px;align-items:center;margin-top:6px}

/* Logos (tamanhos consistentes) */
.logo-top{height:28px;width:auto;display:block}   /* topo do app */
.logo-login{height:48px;width:auto;display:block} /* login acima do card */
.sidebrand{display:flex;align-items:center;justify-content:center;padding:10px}
.sidebrand img{height:36px;width:auto;display:block}

/* ===== Inteligência Artificial – grid e cartões ===== */
.cards-2x2{
  display:grid;
  grid-template-columns:repeat(2,minmax(280px,1fr));
  gap:14px;
  margin-bottom:14px;  /* ← respiro externo abaixo da grade */
}
@media (max-width: 980px){
  .cards-2x2{ grid-template-columns:1fr }
}

.ai-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px}
.ai-head{display:flex;align-items:center;gap:8px;margin:2px 0 8px}
.ai-head .title{font-weight:700}
.ai-sub{font-size:13px;color:#6b7280;margin:-2px 0 8px}
.ai-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:6px 0}
.ai-row .grow{flex:1}
.ai-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.status-dot{width:10px;height:10px;border-radius:999px;display:inline-block;margin-right:6px;border:1px solid #e5e7eb}
.st-ok{background:#10b981}
.st-wait{background:#f59e0b}
.st-bad{background:#ef4444}
.field{display:flex;flex-direction:column;gap:4px;min-width:160px}
.field input{width:100%}
.small{font-size:12px;color:#6b7280}

/* ===== Switch (toggle) para cartões compactos ===== */
.switch{position:relative;width:52px;height:28px}
.switch input{opacity:0;width:0;height:0}
.switch .sl{
  position:absolute;inset:0;border-radius:28px;
  background:#e5e7eb;transition:background .18s ease;
  border:1px solid #e5e7eb;
}
.switch .sl::before{
  content:"";position:absolute;left:3px;bottom:3px;width:22px;height:22px;
  background:#fff;border-radius:50%;transition:transform .18s ease;
  box-shadow:0 1px 2px rgba(0,0,0,.12);
}
.switch input:checked + .sl{background:linear-gradient(90deg,var(--jj-brand),var(--jj-brand2));border-color:transparent}
.switch input:checked + .sl::before{transform:translateX(24px)}