/* =====================================================
   Atleta25 DISC – Stylesheet
   ===================================================== */

:root {
  --a25-primary:   #e85d04;
  --a25-primary-d: #c94e00;
  --a25-dark:      #1a1a2e;
  --a25-mid:       #16213e;
  --a25-light:     #f8f4f0;
  --a25-text:      #2d2d2d;
  --a25-muted:     #666;
  --a25-radius:    14px;
  --a25-shadow:    0 4px 24px rgba(0,0,0,.10);

  /* DISC colors */
  --a25-D: #e84040;
  --a25-I: #f7a325;
  --a25-S: #27ae60;
  --a25-C: #2980b9;
}

/* Container principal */
#a25-disc-app {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--a25-text);
  max-width: 820px;
  margin: 0 auto;
  padding: 0 16px 60px;
}

/* ─── Seções ──────────────────────────────── */
.a25-section { animation: a25FadeIn .4s ease both; }
@keyframes a25FadeIn {
  from { opacity:0; transform:translateY(12px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ─── HERO ────────────────────────────────── */
.a25-hero {
  background: linear-gradient(135deg, var(--a25-dark) 0%, #0f3460 100%);
  color: #fff;
  border-radius: var(--a25-radius);
  padding: 48px 40px;
  text-align: center;
  margin-bottom: 32px;
  position: relative;
  overflow: hidden;
}
.a25-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.a25-badge {
  display: inline-block;
  background: var(--a25-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 50px;
  margin-bottom: 20px;
}
.a25-titulo {
  font-size: clamp(22px, 4vw, 34px);
  font-weight: 800;
  margin: 0 0 12px;
  line-height: 1.2;
}
.a25-subtitulo {
  font-size: 16px;
  opacity: .85;
  max-width: 520px;
  margin: 0 auto 28px;
}
.a25-stats {
  display: flex;
  justify-content: center;
  gap: 32px;
}
.a25-stat { text-align: center; }
.a25-stat strong {
  display: block;
  font-size: 28px;
  font-weight: 800;
  color: var(--a25-primary);
}
.a25-stat span { font-size: 13px; opacity: .7; }

/* ─── Cards de perfil na intro ────────────── */
.a25-perfis-preview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 32px;
}
@media (max-width: 640px) {
  .a25-perfis-preview { grid-template-columns: repeat(2, 1fr); }
}
.a25-perfil-card {
  background: #fff;
  border-radius: var(--a25-radius);
  padding: 20px 16px;
  text-align: center;
  box-shadow: var(--a25-shadow);
  border-top: 4px solid var(--a25-primary);
  transition: transform .2s;
}
.a25-perfil-card:hover { transform: translateY(-4px); }
.a25-perfil-card[data-tipo="D"] { border-color: var(--a25-D); }
.a25-perfil-card[data-tipo="I"] { border-color: var(--a25-I); }
.a25-perfil-card[data-tipo="S"] { border-color: var(--a25-S); }
.a25-perfil-card[data-tipo="C"] { border-color: var(--a25-C); }
.a25-perfil-letra {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  margin-bottom: 10px;
  background: var(--a25-primary);
}
.a25-perfil-card[data-tipo="D"] .a25-perfil-letra { background: var(--a25-D); }
.a25-perfil-card[data-tipo="I"] .a25-perfil-letra { background: var(--a25-I); }
.a25-perfil-card[data-tipo="S"] .a25-perfil-letra { background: var(--a25-S); }
.a25-perfil-card[data-tipo="C"] .a25-perfil-letra { background: var(--a25-C); }
.a25-perfil-card strong { display: block; font-size: 14px; margin-bottom: 6px; }
.a25-perfil-card p { font-size: 12px; color: var(--a25-muted); margin: 0; }

/* ─── Formulário de cadastro ──────────────── */
.a25-form-cadastro {
  background: #fff;
  border-radius: var(--a25-radius);
  padding: 32px;
  box-shadow: var(--a25-shadow);
}
.a25-form-cadastro h3 { margin: 0 0 24px; font-size: 18px; }
.a25-field { margin-bottom: 20px; }
.a25-field label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 6px;
  color: var(--a25-text);
}
.a25-field input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 15px;
  transition: border-color .2s;
  box-sizing: border-box;
}
.a25-field input:focus {
  outline: none;
  border-color: var(--a25-primary);
}
.a25-field small { display: block; margin-top: 6px; color: var(--a25-muted); font-size: 12px; }

/* ─── Botões ──────────────────────────────── */
.a25-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--a25-primary);
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 15px 36px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s, transform .15s;
  width: 100%;
  justify-content: center;
}
.a25-btn-primary:hover {
  background: var(--a25-primary-d);
  transform: translateY(-1px);
}
.a25-btn-sec {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--a25-primary);
  border: 2px solid var(--a25-primary);
  border-radius: 50px;
  padding: 11px 28px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  margin: 6px;
}
.a25-btn-sec:hover {
  background: var(--a25-primary);
  color: #fff;
}

/* ─── Progress Bar ────────────────────────── */
.a25-progress-wrap {
  margin-bottom: 28px;
}
.a25-progress-info {
  display: flex;
  justify-content: flex-end;
  font-size: 13px;
  color: var(--a25-muted);
  margin-bottom: 8px;
}
.a25-progress-info #a25-q-atual {
  font-weight: 700;
  color: var(--a25-primary);
}
.a25-progress-bar {
  height: 6px;
  background: #e8e8e8;
  border-radius: 50px;
  overflow: hidden;
}
#a25-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--a25-primary), #ff9a3c);
  border-radius: 50px;
  transition: width .4s ease;
}

/* ─── Questão ─────────────────────────────── */
.a25-questao {
  background: #fff;
  border-radius: var(--a25-radius);
  padding: 36px;
  box-shadow: var(--a25-shadow);
}
.a25-q-numero {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--a25-primary);
  margin-bottom: 14px;
}
.a25-q-texto {
  font-size: clamp(17px, 2.5vw, 22px);
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 28px;
  color: var(--a25-dark);
}
.a25-opcoes {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.a25-opcao {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--a25-light);
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 16px 20px;
  cursor: pointer;
  text-align: left;
  transition: all .2s;
  width: 100%;
  font-size: 15px;
}
.a25-opcao:hover {
  border-color: var(--a25-primary);
  background: #fff5f0;
  transform: translateX(4px);
}
.a25-opcao.a25-selecionada {
  border-color: var(--a25-primary);
  background: #fff5f0;
}
.a25-opcao-letra {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--a25-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}
.a25-opcao-texto { line-height: 1.5; padding-top: 4px; }
.a25-q-nav { margin-top: 20px; }

/* ─── Loading ─────────────────────────────── */
.a25-loading-inner {
  text-align: center;
  padding: 60px 20px;
}
.a25-spinner {
  width: 60px; height: 60px;
  border: 5px solid #f0f0f0;
  border-top-color: var(--a25-primary);
  border-radius: 50%;
  margin: 0 auto 28px;
  animation: a25Spin 1s linear infinite;
}
@keyframes a25Spin { to { transform: rotate(360deg); } }
.a25-loading-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 28px;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
.a25-step {
  padding: 10px 16px;
  border-radius: 8px;
  background: #f5f5f5;
  font-size: 14px;
  color: var(--a25-muted);
}
.a25-step.a25-step-done {
  background: #e8f5e9;
  color: #2e7d32;
  font-weight: 600;
}
.a25-step.a25-step-active {
  background: #fff3e0;
  color: #e65100;
  font-weight: 600;
}

/* ─── Resultado ───────────────────────────── */
.a25-resultado-header {
  background: linear-gradient(135deg, var(--a25-dark) 0%, #0f3460 100%);
  color: #fff;
  border-radius: var(--a25-radius);
  padding: 48px 40px;
  text-align: center;
  margin-bottom: 28px;
}
.a25-resultado-header h1 { font-size: 28px; margin: 0 0 20px; }
.a25-resultado-header h2 { font-size: 20px; font-weight: 400; margin: 12px 0 0; opacity: .9; }
.a25-perfil-destaque {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: var(--a25-primary);
  font-size: 48px;
  font-weight: 900;
  color: #fff;
  margin: 0 auto;
}

/* ─── Scores Grid ─────────────────────────── */
.a25-scores-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}
@media (max-width: 540px) {
  .a25-scores-grid { grid-template-columns: repeat(2, 1fr); }
}
.a25-score-item {
  background: #fff;
  border-radius: var(--a25-radius);
  padding: 20px 16px;
  box-shadow: var(--a25-shadow);
  text-align: center;
}
.a25-score-label {
  font-size: 24px;
  font-weight: 900;
  margin-bottom: 12px;
}
.a25-score-item[data-tipo="D"] .a25-score-label { color: var(--a25-D); }
.a25-score-item[data-tipo="I"] .a25-score-label { color: var(--a25-I); }
.a25-score-item[data-tipo="S"] .a25-score-label { color: var(--a25-S); }
.a25-score-item[data-tipo="C"] .a25-score-label { color: var(--a25-C); }
.a25-score-bar-wrap {
  height: 8px;
  background: #f0f0f0;
  border-radius: 50px;
  overflow: hidden;
  margin-bottom: 8px;
}
.a25-score-bar {
  height: 100%;
  border-radius: 50px;
  width: 0;
  transition: width 1s ease;
}
.a25-score-item[data-tipo="D"] .a25-score-bar { background: var(--a25-D); }
.a25-score-item[data-tipo="I"] .a25-score-bar { background: var(--a25-I); }
.a25-score-item[data-tipo="S"] .a25-score-bar { background: var(--a25-S); }
.a25-score-item[data-tipo="C"] .a25-score-bar { background: var(--a25-C); }
.a25-score-pct { font-size: 18px; font-weight: 700; }

/* ─── Devolutiva ──────────────────────────── */
.a25-devolutiva-box {
  background: #fff;
  border-radius: var(--a25-radius);
  padding: 36px;
  box-shadow: var(--a25-shadow);
  margin-bottom: 28px;
}
.a25-devolutiva-box h2 { margin: 0 0 24px; font-size: 20px; }
.a25-devolutiva-texto {
  font-size: 15px;
  line-height: 1.8;
  color: var(--a25-text);
}
.a25-devolutiva-texto h1,
.a25-devolutiva-texto h2 {
  font-size: 18px;
  color: var(--a25-primary);
  margin: 28px 0 10px;
  border-bottom: 2px solid #f5f5f5;
  padding-bottom: 8px;
}
.a25-devolutiva-texto h3 {
  font-size: 16px;
  color: var(--a25-dark);
  margin: 20px 0 8px;
}
.a25-devolutiva-texto p { margin: 0 0 14px; }
.a25-devolutiva-texto ul, .a25-devolutiva-texto ol {
  margin: 0 0 14px 20px;
}
.a25-devolutiva-texto li { margin-bottom: 6px; }
.a25-devolutiva-texto strong { color: var(--a25-dark); }

/* ─── Ações resultado ─────────────────────── */
.a25-acoes {
  text-align: center;
  padding: 20px 0;
}
.a25-email-info {
  font-size: 14px;
  color: var(--a25-muted);
  margin-bottom: 16px;
}

/* ─── Erro ────────────────────────────────── */
.a25-erro-inner {
  text-align: center;
  padding: 60px 20px;
  background: #fff;
  border-radius: var(--a25-radius);
  box-shadow: var(--a25-shadow);
}

/* ─── Print ───────────────────────────────── */
@media print {
  .a25-acoes, #wpadminbar, .a25-scores-grid { display: none; }
  .a25-devolutiva-box { box-shadow: none; padding: 0; }
}