/* =========================================================
Briefing Wizard • Escopo isolado por seletor (#briefing-root)
Sem uso de "all: initial/unset". Compatível com Elementor.
========================================================= */

/* Variáveis do tema, escopadas no wrapper */
#briefing-root {
  --bg1:#0F1115;
  --bg2:#161A20;
  --text:#E7EAEE;
  --muted:#9BA3AF;
  --accent:#B6FF3D;
  --accent-soft:#54E38E;
  --border:#2A2F37;

  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
  color: var(--text);
}

/* Garantias básicas dentro do escopo */
#briefing-root *, 
#briefing-root *::before, 
#briefing-root *::after { box-sizing: border-box; }
#briefing-root h1, 
#briefing-root h2, 
#briefing-root h3, 
#briefing-root p { margin: 0; }

/* ====== Layout geral ====== */
#briefing-root .briefing-wrap{
  max-width: 72rem; /* ~1152px */
  margin: 2rem auto;
  padding: 2rem;
  background: color-mix(in srgb, var(--bg2) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  border-radius: 20px;
  backdrop-filter: blur(10px);
  box-shadow: 0 0 30px rgba(182,255,61,.06);
}

/* Header */
#briefing-root .briefing-header h1{
  font-family: "Sora", ui-sans-serif, Inter, sans-serif;
  letter-spacing:-0.2px;
  margin:0 0 .5rem;
  font-size: clamp(1.6rem, 2.5vw, 2.4rem);
}
#briefing-root .briefing-header p{
  color:var(--muted);
  margin:0 0 1.25rem;
}

/* Barra de progresso */
#briefing-root .progress{
  height:.5rem;
  background:#11161B;
  border:1px solid #1b2027;
  border-radius:999px;
  overflow:hidden;
  margin: 0 0 1rem;
}
#briefing-root .progress-bar{
  height:100%;
  width:0;
  background: linear-gradient(90deg, var(--accent), var(--accent-soft));
  transition:width .2s cubic-bezier(.2,.8,.2,1);
}

/* Títulos de seção */
#briefing-root h2{
  font-size:1.25rem;
  margin:1.5rem 0 .75rem;
  color:var(--accent-soft);
  border-bottom:1px solid color-mix(in srgb, var(--border) 50%, transparent);
  padding-bottom:.25rem;
}

/* Grid de campos */
#briefing-root .grid{
  display:grid;
  gap:1rem;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
#briefing-root .col-span-2{ grid-column: span 2; }

/* Campos */
#briefing-root .form-group{ display:flex; flex-direction:column; }
#briefing-root label{ font-weight:600; margin-bottom:.35rem; color:var(--text); }
#briefing-root input,
#briefing-root textarea{
  width:100%;
  background:#11161B;
  color:var(--text);
  border:1px solid var(--border);
  border-radius:16px;
  padding:.9rem 1rem;
  font-size:1rem;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
#briefing-root input::placeholder,
#briefing-root textarea::placeholder{ color:#7C8694; }
#briefing-root input:focus,
#briefing-root textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}
#briefing-root input:hover,
#briefing-root textarea:hover{
  border-color: color-mix(in srgb, var(--border) 80%, white 0%);
}
#briefing-root .helper{ min-height:1.1rem; font-size:.82rem; color:#F59E0B; }

/* Etapas */
#briefing-root .step{ display:none; animation: fadeUp .25s ease forwards; }
#briefing-root .step.active{ display:block; }
@keyframes fadeUp{ from{opacity:.3; transform: translateY(8px)} to{opacity:1; transform:none} }

/* Resumo */
#briefing-root .resumo{
  background: #11161B;
  border:1px solid var(--border);
  border-radius:16px;
  padding:1rem;
}
#briefing-root .resumo dl{
  display:grid;
  grid-template-columns: 1fr 2fr;
  gap:.5rem 1rem;
  margin:0;
}
#briefing-root .resumo dt{ color:var(--muted); }
#briefing-root .resumo dd{ margin:0; color:var(--text); }

/* Navegação */
#briefing-root .wizard-nav{
  display:flex;
  gap:.5rem;
  align-items:center;
  margin-top:1rem;
}
#briefing-root .status{ margin-left:auto; color:var(--muted); }

/* Botões */
#briefing-root .btn{
  appearance:none;
  border:none;
  cursor:pointer;
  user-select:none;
  border-radius:30px;
  padding:.8rem 1.2rem;
  font-weight:700;
  letter-spacing:.2px;
  background: color-mix(in srgb, #222 60%, var(--bg2));
  color:var(--text);
  border:1px solid var(--border);
  transition: transform .15s, box-shadow .2s, background .2s, border-color .2s;
}
#briefing-root .btn:hover{
  transform: translateY(-2px);
  box-shadow:0 0 14px rgba(182,255,61,.18);
}
#briefing-root .btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}
#briefing-root .btn[disabled]{ opacity:.5; pointer-events:none; }
#briefing-root .btn.primary{
  background: var(--accent);
  color:#0b0d0f;
  border-color: transparent;
}
#briefing-root .btn.primary:hover{ box-shadow:0 0 16px rgba(182,255,61,.45); }
#briefing-root .btn.ghost{ background: transparent; }
#briefing-root .btn.outline{
  background: transparent;
  border-color: var(--accent-soft);
  color:var(--accent-soft);
}

/* Modal */
#briefing-root .modal{ position:fixed; inset:0; display:none; }
#briefing-root .modal[aria-hidden="false"]{ display:block; }
#briefing-root .modal-backdrop{
  position:absolute; inset:0;
  background: rgba(2,4,8,.6);
  backdrop-filter: blur(3px);
}
#briefing-root .modal-content{
  position:relative; z-index:1;
  margin: 12vh auto 0;
  width:min(36rem, 92vw);
  background: color-mix(in srgb, var(--bg2) 80%, transparent);
  border:1px solid color-mix(in srgb, var(--border) 60%, transparent);
  border-radius:20px;
  padding:1.25rem 1.25rem 1rem;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}
#briefing-root .modal-content h3{ margin:.25rem 0 .5rem; font-size:1.2rem; }
#briefing-root .modal-content p{ color:var(--muted); margin:0 0 1rem; }

/* ====== Responsivo ====== */
@media (max-width: 880px){
  #briefing-root .grid{ grid-template-columns: 1fr; }
  #briefing-root .col-span-2{ grid-column:auto; }
}
@media (max-width: 480px){
  #briefing-root .btn{ width:100%; text-align:center; }
  #briefing-root .briefing-wrap{ padding: 1.25rem; }
}

/* ===== Patch de tema e alinhamento (colar no final do arquivo) ===== */

/* Fundo geral do bloco */
#briefing-root { 
  background: var(--bg1);
}

/* Cartão com efeito vidro (mais escuro) */
#briefing-root .briefing-wrap {
  background: rgba(22,26,32,.86);              /* antes estava mais claro */
  border: 1px solid #2A2F37;
}

/* Tipografia do título e subcabeçalho */
#briefing-root .briefing-header h1 { color: #E7EAEE; }
#briefing-root .briefing-header p  { color: #9BA3AF; }

/* Campos: fundo realmente dark e texto claro */
#briefing-root input,
#briefing-root textarea {
  background: #0F1115;                         /* garante fundo escuro real */
  color: #E7EAEE;
}

/* Labels mais legíveis e com melhor compasso vertical */
#briefing-root label{
  color: #E7EAEE;
  font-size: .9rem;
  line-height: 1.2;
}

/* Alinhamento dos blocos no grid (evita "descer" no meio da linha) */
#briefing-root .grid{ 
  align-items: start;                           /* força topo */
}

/* Barra de progresso um pouco mais forte */
#briefing-root .progress{
  background:#0E1217;
  border-color:#1E232B;
}