/* ===========================================================================
   BEEHAUS UI KIT — design system reutilizável
   Tokens extraídos das telas reais do Studio (ai-studio.html).
   CSS puro, framework-agnostic (funciona com ou sem Tailwind).
   Use estas classes em TODA tela/seção nova pra manter a linguagem visual.
   Ref: BEEHAUS_UI.md
   =========================================================================== */

/* Tokens (cores, raio, sombra, easing, tipografia) vêm de beehaus-tokens.css
   — FONTE ÚNICA. Este kit apenas os consome. Requer <link beehaus-tokens.css>
   ANTES deste arquivo. Ciclo 1: Outfit aposentada, --bh-font = Inter.
   Tokens locais de container que não são de marca ficam aqui: */
:root {
  --bh-bg: var(--bh-dark);                 /* fundo base (escuro) */
  --bh-bg-panel: rgba(255, 255, 255, .02); /* painel/card container */
  --bh-bg-field: rgba(0, 0, 0, .2);        /* inputs e cards de seleção */
}

/* Fundo de seção: escuro + glows azul/navy + textura de pontos (igual ao Studio) */
.bh-bg {
  background-color: var(--bh-bg);
  background-image:
    radial-gradient(60vw 60vw at 100% 0%, rgba(0, 160, 242, .07), transparent 55%),
    radial-gradient(50vw 50vw at 0% 100%, rgba(18, 55, 89, .30), transparent 55%),
    radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 32px 32px;
  background-repeat: no-repeat, no-repeat, repeat;
  background-attachment: fixed, fixed, fixed;
  color: #d4d4d4;
  font-family: var(--bh-font);
}

/* Painel (container arredondado com blur) */
.bh-panel {
  background: var(--bh-bg-panel);
  border: 1px solid var(--bh-border);
  border-radius: var(--bh-radius-lg);
  padding: 40px 32px;
  backdrop-filter: blur(16px);
  box-shadow: var(--bh-shadow-soft);
}

/* Eyebrow / super-título (azul, caixa alta, espaçado) */
.bh-eyebrow {
  font-size: 12px;
  letter-spacing: .2em;
  font-weight: 600;
  color: var(--bh-blue);
  text-transform: uppercase;
}

/* Título e subtítulo */
.bh-title {
  font-size: clamp(1.9rem, 5vw, 3rem);
  font-weight: 700;
  color: var(--bh-fg);
  letter-spacing: -.02em;
  line-height: 1.1;
  margin: 0;
}
.bh-sub {
  color: var(--bh-fg-soft);
  font-size: 14px;
  margin: 10px 0 0;
}

/* Card de seleção (clicável) */
.bh-card {
  background: var(--bh-bg-field);
  border: 1px solid var(--bh-border);
  border-radius: var(--bh-radius);
  padding: 22px 18px;
  cursor: pointer;
  color: #d4d4d4;
  transition: all .3s var(--bh-ease);
  box-shadow: var(--bh-shadow-inset);
  text-align: center;
}
.bh-card:hover { border-color: var(--bh-blue); background: rgba(255, 255, 255, .05); }
.bh-card.is-selected { border-color: var(--bh-blue); background: rgba(0, 160, 242, .1); }
.bh-card svg { color: var(--bh-teal); }
.bh-card-title { display: block; font-size: 15px; font-weight: 600; color: var(--bh-fg); }
.bh-card-desc { display: block; font-size: 10px; color: var(--bh-fg-mute); text-transform: uppercase; letter-spacing: .1em; font-weight: 500; }

/* Campo de formulário */
.bh-input {
  width: 100%;
  background: var(--bh-bg-field);
  border: 1px solid var(--bh-border);
  border-radius: var(--bh-radius);
  padding: 14px 16px;
  color: var(--bh-fg);
  font-size: 15px;
  font-weight: 500;
  font-family: var(--bh-font);
  box-shadow: var(--bh-shadow-inset);
  transition: all .2s;
}
.bh-input:focus { outline: none; border-color: var(--bh-blue); background: rgba(0, 160, 242, .05); }
.bh-label { display: block; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .6); margin-bottom: 8px; }

/* Botões */
.bh-btn-primary {
  background: var(--bh-blue);
  color: #fff;
  border: none;
  border-radius: var(--bh-radius);
  padding: 15px 20px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--bh-font);
  box-shadow: var(--bh-shadow-blue);
  transition: all .3s var(--bh-ease);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.bh-btn-primary:hover { background: var(--bh-blue-hover); box-shadow: var(--bh-shadow-blue-hover); transform: translateY(-1px); }
.bh-btn-primary:disabled { opacity: .6; cursor: default; transform: none; }

.bh-btn-ghost {
  background: transparent;
  color: var(--bh-fg-soft);
  border: none;
  border-radius: var(--bh-radius);
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--bh-font);
  transition: all .2s;
}
.bh-btn-ghost:hover { background: rgba(255, 255, 255, .05); color: #fff; }

/* Badge / pill (ex.: "Recomendação baseada em regras") */
.bh-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 160, 242, .1);
  border: 1px solid rgba(0, 160, 242, .2);
  color: var(--bh-blue);
  border-radius: var(--bh-radius-pill);
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
}

/* Mensagem de erro */
.bh-error { color: var(--bh-error); font-size: 13px; min-height: 18px; }

/* Logo (deixa o SVG navy branco no fundo escuro) */
.bh-logo-light { filter: brightness(0) invert(1); }