/* ==========================================================================
   RECURSO FLOW — layout compacto para recurso.php / recurso3.php /
   recurso4.php / recurso5.php

   Tudo aqui é ESCOPADO (sob body.recurso-flow-page, .rf-*, ou dentro de
   .rf-card) para não alterar a aparência de nenhuma outra página do site.
   Nenhuma regra global (.form-control, .form-card, .page-header, etc.)
   é sobrescrita fora desse escopo.
   ========================================================================== */

/* Trava a altura da página nesse fluxo: nav + header + footer fixos,
   e a área central (.rf-main) é a única que rola, e só se precisar. */
body.recurso-flow-page {
  height: 100vh;
  overflow: hidden;
}

/* ---------- Header do fluxo (substitui o .page-header padrão) ---------- */
.rf-header {
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--dark-bg), var(--darker-bg));
  color: #fff;
}

.rf-header-bg {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(37, 99, 235, .10) 1px, transparent 1px),
                     linear-gradient(90deg, rgba(37, 99, 235, .10) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: .45;
  pointer-events: none;
}

.rf-header-w {
  position: relative;
  z-index: 1;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 9px 28px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.rf-header-text h1 {
  font-size: 18.5px;
  font-weight: 800;
  letter-spacing: -.3px;
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  color: #fff;
}

.rf-header-text h1 i {
  font-size: 14px;
  color: #60A5FA;
}

.rf-header-text h1 .rf-step-label {
  font-weight: 500;
  color: rgba(255, 255, 255, .5);
  font-size: .82em;
}

.rf-steps {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  list-style: none;
}

.rf-step {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rf-step-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.rf-step-pill.is-done {
  background: rgba(255, 255, 255, .08);
  color: #fff;
  border-color: rgba(255, 255, 255, .16);
  cursor: pointer;
}

.rf-step-pill.is-done:hover {
  background: rgba(255, 255, 255, .16);
}

.rf-step-pill.is-active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 4px 14px -2px rgba(37, 99, 235, .6);
}

.rf-step-pill.is-todo {
  background: transparent;
  color: rgba(255, 255, 255, .42);
  border-color: rgba(255, 255, 255, .12);
}

.rf-step-ico {
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  font-size: 9px;
  flex-shrink: 0;
}

.rf-step-pill.is-active .rf-step-ico { background: rgba(255, 255, 255, .22); }
.rf-step-pill.is-todo .rf-step-ico { background: rgba(255, 255, 255, .06); }

.rf-step-sep {
  width: 14px;
  height: 1px;
  background: rgba(255, 255, 255, .14);
  flex-shrink: 0;
}

.rf-progress {
  position: relative;
  height: 3px;
  width: 100%;
  background: rgba(255, 255, 255, .08);
}

.rf-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), #60A5FA);
  transition: width .35s ease;
}

/* ---------- Área principal (só essa rola, se precisar) ---------- */
.rf-main {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 0 6px;
}

.rf-main-w {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 28px;
}

.rf-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}

/* Corrige o bug clássico de grid: inputs/selects/textareas têm uma
   largura mínima "intrínseca" no navegador (não é 0) que pode forçar
   a coluna a crescer além do espaço reservado, "empurrando" o card
   vizinho e desalinhando o topo dos dois. min-width:0 libera o encolhimento. */
.rf-grid-2 > .rf-card,
.rf-row,
.rf-field {
  min-width: 0;
}

.rf-grid-2 > .rf-card {
  align-self: stretch;
  margin-top: 0;
}

.rf-card .form-control {
  min-width: 0;
}

/* ---------- Cartão ---------- */
.rf-card {
  background: var(--bg-card);
  border: 1.5px solid #E8ECF2;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 17px 21px;
}

/* Espaçamento entre cards quando EMPILHADOS verticalmente (use a classe
   .rf-card-stack no contêiner pai). Removido o antigo seletor
   ".rf-card + .rf-card", que também acertava os cards lado a lado do
   recurso3.php e os empurrava para baixo, desalinhando o topo. */
.rf-card-stack > .rf-card + .rf-card { margin-top: 10px; }

.rf-card-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}

.rf-card-ico {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 16px;
  flex-shrink: 0;
}

.rf-card-head h2 {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 1px;
}

.rf-card-head p {
  font-size: 12.5px;
  color: var(--text-muted);
  font-weight: 400;
}

.rf-divider {
  border: none;
  border-top: 1px dashed #E5E9F0;
  margin: 10px 0 12px;
}

.rf-section-label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

/* ---------- Campos compactos ---------- */
.rf-row {
  display: grid;
  gap: 10px;
  margin-bottom: 10px;
}

.rf-row:last-child { margin-bottom: 0; }

.rf-field label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 4px;
}

/* Sobrescreve .form-control SOMENTE dentro de .rf-card (não afeta
   login, fale-conosco e demais páginas que usam a mesma classe) */
.rf-card .form-control {
  padding: 9px 12px;
  font-size: 14px;
  border-radius: 8px;
  height: 38px;
}

.rf-card textarea.form-control {
  height: auto;
  min-height: 58px;
  padding: 9px 12px;
}

/* Caixa de destaque azul-claro (notificação / dica) */
.rf-info-box {
  background: #F8FAFF;
  border: 1px solid #E8ECF2;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
}

.rf-info-box .rf-info-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-main);
}

.rf-info-box .rf-info-value {
  color: var(--primary);
  font-weight: 700;
  font-size: 14px;
  margin-top: 3px;
}

.rf-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  background: var(--primary-light);
  border: 1px solid var(--primary-border);
  border-radius: 9px;
  padding: 10px 12px;
  margin-top: 10px;
}

.rf-note-ico {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: rgba(37, 99, 235, .12);
  color: var(--primary);
  font-size: 13px;
  flex-shrink: 0;
}

.rf-note p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-main);
  margin: 0;
}

.rf-note strong { font-weight: 700; }

.rf-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 5px;
  margin-bottom: 6px;
}

/* Linhas de pergunta com radio (recurso4) */
.rf-radio-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 13px;
  background: #F8FAFF;
  border: 1px solid #E8ECF2;
  border-radius: 9px;
  margin-bottom: 8px;
  font-size: 13.5px;
}

.rf-radio-row:last-child { margin-bottom: 0; }

.rf-radio-row .rf-radio-q {
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
}

.rf-radio-row label.rf-radio-opt {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  margin: 0;
}

.rf-radio-row input[type="radio"] {
  accent-color: var(--primary);
  width: 14px;
  height: 14px;
}

.rf-radio-result {
  margin-left: auto;
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
}

/* Lista de argumentos pré-cadastrados (recurso.php) */
.rf-arg-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rf-arg-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1.5px solid #E8ECF2;
  border-radius: 9px;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-main);
  font-weight: 500;
  text-decoration: none;
}

.rf-arg-item:hover {
  border-color: var(--primary);
  background: var(--primary-light);
}

.rf-arg-ico {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: #EFF6FF;
  color: var(--primary);
  font-size: 13px;
  flex-shrink: 0;
}

.rf-arg-item input {
  margin-top: 2px;
  accent-color: var(--primary);
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

/* Checkbox de concordância (recurso5) */
.rf-agree {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  margin-bottom: 12px;
}

.rf-agree input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--primary);
  flex-shrink: 0;
}

.rf-agree span {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.45;
}

.rf-points {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.rf-points p {
  font-size: 13.5px;
  color: var(--text-main);
  line-height: 1.55;
  margin: 0;
}

.rf-points i {
  color: var(--primary);
  margin-right: 5px;
}

.rf-alert {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 9px;
  font-size: 13.5px;
  margin-bottom: 14px;
}

.rf-alert-error { background: var(--danger-light); border: 1px solid #FECACA; color: #B91C1C; }
.rf-alert-warning { background: var(--warning-light); border: 1px solid #FDE68A; color: #B45309; }

/* ---------- Rodapé fixo do fluxo (substitui o footer.php nessas páginas) ---------- */
.rf-footer {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  padding: 6px 16px 10px;
  background: transparent;
}

.rf-footer-w {
  max-width: 540px;
  width: 100%;
  margin: 0;
  padding: 6px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
  background: rgba(255, 255, 255, .98);
  backdrop-filter: blur(6px);
  border: 1px solid #E8ECF2;
  border-radius: 14px;
  box-shadow: 0 14px 32px -10px rgba(15, 23, 42, .16), 0 2px 8px -2px rgba(15, 23, 42, .06);
}

.rf-footer-info {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.rf-footer-ico {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 13px;
  flex-shrink: 0;
}

.rf-footer-info-text p {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.2;
}

.rf-footer-info-text span {
  font-size: 11.5px;
  color: var(--text-muted);
}

.rf-footer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.rf-btn-back {
  height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1.5px solid #E2E8F0;
  background: #fff;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-main);
  text-decoration: none;
  transition: all var(--transition-fast);
  cursor: pointer;
}

.rf-btn-back:hover { background: #F8FAFC; border-color: #CBD5E1; }

.rf-footer-actions .btn-nav-cta {
  height: 32px;
  padding: 0 18px;
  font-size: 14px;
}

.rf-footer-actions .btn-nav-cta:disabled,
.rf-footer-actions .btn-nav-cta.is-disabled {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

/* ---------- Responsivo ---------- */
@media (max-width: 900px) {
  .rf-grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .rf-header-w { padding: 10px 20px 9px; gap: 10px; }
  .rf-step-name { display: none; }
  .rf-step-sep { display: none; }
  .rf-main-w { padding: 0 20px; }
  .rf-footer { padding: 8px 14px 14px; }
  .rf-footer-w { padding: 8px 16px; }
  .rf-footer-info-text span { display: none; }
}

@media (max-width: 480px) {
  .rf-header-text h1 { font-size: 14.5px; }
  .rf-footer-w { padding: 8px 14px; }
  .rf-footer-actions .btn-nav-cta { padding: 0 16px; font-size: 12.5px; }
  .rf-footer-info-text { display: none; }
}