/**
 * CADNEA Skills Analyzer — CSS completo reescrito
 * Corrige conflitos com tema WordPress/Elementor
 * Largura: 1200px
 */

/* ── ISOLAMENTO TOTAL do wrap ─────────────────────────────────────────────── */
#cadnea-quiz-wrap,
#cadnea-quiz-wrap * {
    box-sizing: border-box !important;
    border-style: none !important;
    line-height: 1.5 !important;
}

#cadnea-quiz-wrap {
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    max-width: 1200px;
    margin: 0 auto;
    color: #262626;
    background: #fff;
    padding: 0 24px;
}

/* ── ECRÃS ────────────────────────────────────────────────────────────────── */
.cq-screen { display: none !important; }
.cq-screen.active { display: block !important; }
#cq-screen-loading.active {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 320px;
}

/* ══════════════════════════════════════════════════════════════════════════
   ECRÃ 1 — INTRO
══════════════════════════════════════════════════════════════════════════ */
#cq-screen-intro { padding: 40px 1000; }

.cq-intro-header h2 {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin: 0 0 12px 0 !important;
    line-height: 1.3 !important;
}

.cq-intro-header p {
    font-size: 1rem !important;
    color: #555 !important;
    line-height: 1.6 !important;
    margin: 0 0 24px 0 !important;
    max-width: 700px;
}

.cq-intro-meta {
    list-style: none !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    margin: 0 0 36px 0 !important;
    padding: 0 !important;
}

.cq-intro-meta li {
    font-size: 0.9rem !important;
    color: #444 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
}

/* Dados pessoais */
.cq-form-section {
    border-top: 1px solid #e8e8e8 !important;
    padding: 28px 0 0 0 !important;
    margin: 0 0 32px 0 !important;
}

.cq-form-section h3 {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    margin: 0 0 20px 0 !important;
}

.cq-field-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    margin: 0 0 28px 0 !important;
}

@media (max-width: 640px) {
    .cq-field-row { grid-template-columns: 1fr !important; }
}

.cq-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.cq-field label {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin: 0 !important;
}

.cq-field input {
    display: block !important;
    width: 100% !important;
    padding: 10px 14px !important;
    border: 1px solid #ccc !important;
    border-style: solid !important;
    border-radius: 4px !important;
    font-size: 0.95rem !important;
    color: #1a1a1a !important;
    outline: none !important;
    background: #fff !important;
    transition: border-color 0.15s !important;
    margin: 0 !important;
}

.cq-field input:focus {
    border-color: #3e64de !important;
    border-style: solid !important;
    box-shadow: 0 0 0 3px rgba(62,100,222,0.1) !important;
}

.cq-field input.cq-error {
    border-color: #f15f48 !important;
    border-style: solid !important;
}

.cq-field-error {
    font-size: 0.78rem !important;
    color: #f15f48 !important;
    display: none !important;
    margin: 0 !important;
}

.cq-field input.cq-error ~ .cq-field-error {
    display: block !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   BOTÕES
══════════════════════════════════════════════════════════════════════════ */
.cq-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 12px 28px !important;
    border-radius: 4px !important;
    border: 1px solid transparent !important;
    border-style: solid !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    line-height: 1 !important;
    transition: background 0.15s !important;
    white-space: nowrap !important;
}

.cq-btn-primary {
    background: #3e64de !important;
    color: #fff !important;
    border-color: #3e64de !important;
}

.cq-btn-primary:hover {
    background: #2f52c7 !important;
    border-color: #2f52c7 !important;
    color: #fff !important;
}

.cq-btn-secondary {
    background: #fff !important;
    color: #333 !important;
    border-color: #ccc !important;
    border-style: solid !important;
}

.cq-btn-secondary:hover:not(:disabled) {
    border-color: #999 !important;
    color: #1a1a1a !important;
}

.cq-btn:disabled {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   ECRÃ 2 — QUIZ
══════════════════════════════════════════════════════════════════════════ */

/* Barra de topo */
.cq-quiz-topbar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 16px 0 14px !important;
    border-bottom: 1px solid #e8e8e8 !important;
    border-style: solid !important;
    margin-bottom: 0 !important;
}

.cq-quiz-topbar span:first-child {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: #444 !important;
}

#cq-timer {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    font-variant-numeric: tabular-nums !important;
}

/* Progresso */
.cq-progress-wrap {
    padding: 0 !important;
    margin: 0 0 36px 0 !important;
}

.cq-progress-bar {
    height: 5px !important;
    background: #e8e8e8 !important;
    width: 100% !important;
    overflow: hidden !important;
    border: none !important;
}

#cq-progress-fill {
    height: 5px !important;
    background: #3e64de !important;
    transition: width 0.35s ease !important;
    display: block !important;
}

#cq-progress-label {
    display: block !important;
    font-size: 0.78rem !important;
    color: #888 !important;
    margin: 8px 0 0 0 !important;
}

/* Área da pergunta */
#cq-question-wrap {
    min-height: 300px !important;
    padding: 0 0 24px 0 !important;
}

.cq-question-category {
    display: block !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    color: #3e64de !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    margin: 0 0 10px 0 !important;
}

.cq-question-text {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    line-height: 1.55 !important;
    margin: 0 0 28px 0 !important;
    display: block !important;
    width: 100% !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

.cq-question-image-wrap {
    margin: 0 0 24px 0 !important;
    text-align: right !important;
}

.cq-question-image-wrap img {
    max-width: 300px !important;
    max-height: 220px !important;
    border: 1px solid #e8e8e8 !important;
    border-style: solid !important;
    border-radius: 4px !important;
}

/* ── OPÇÕES ── ponto crítico ──────────────────────────────────────────────── */
.cq-options-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    margin: 0 0 36px 0 !important;
    width: 100% !important;
}

@media (max-width: 640px) {
    .cq-options-grid { grid-template-columns: 1fr !important; }
}

.cq-option {
    /* Reset total — o tema corrompe buttons */
    all: unset !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 16px 18px !important;
    background: #fff !important;
    border: 1px solid #d4d4d4 !important;
    border-style: solid !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    text-align: left !important;
    font-size: 0.92rem !important;
    color: #333 !important;
    line-height: 1.5 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: border-color 0.15s, background 0.15s !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    min-height: 56px !important;
    font-family: inherit !important;
}

.cq-option:hover {
    border-color: #3e64de !important;
    background: #f5f8ff !important;
    cursor: pointer !important;
}

.cq-option.selected {
    border-color: #3e64de !important;
    background: #fff !important;
}

/* Radio circle */
.cq-option-letter {
    flex-shrink: 0 !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    border-radius: 50% !important;
    border: 2px solid #ccc !important;
    border-style: solid !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: border-color 0.15s, background 0.15s !important;
    position: relative !important;
    margin-top: 2px !important;
}

.cq-option.selected .cq-option-letter {
    border-color: #3e64de !important;
    background: #3e64de !important;
}

.cq-option.selected .cq-option-letter::after {
    content: '' !important;
    display: block !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #fff !important;
    position: absolute !important;
}

.cq-option-text {
    flex: 1 !important;
    min-width: 0 !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    font-size: 0.92rem !important;
    line-height: 1.5 !important;
    color: #333 !important;
}

/* Navegação */
.cq-quiz-nav {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 16px 0 0 0 !important;
    border-top: 1px solid #e8e8e8 !important;
    border-style: solid !important;
}

/* Transição */
@keyframes cqFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.cq-fade-in { animation: cqFadeIn 0.2s ease both !important; }

/* ══════════════════════════════════════════════════════════════════════════
   ECRÃ 3 — LOADING
══════════════════════════════════════════════════════════════════════════ */
.cq-loading-inner { text-align: center !important; }

.cq-loading-inner p {
    margin: 20px 0 0 0 !important;
    color: #666 !important;
    font-size: 0.95rem !important;
}

.cq-spinner {
    width: 44px !important;
    height: 44px !important;
    border: 3px solid #e8e8e8 !important;
    border-style: solid !important;
    border-top-color: #3e64de !important;
    border-radius: 50% !important;
    animation: cqSpin 0.75s linear infinite !important;
    margin: 0 auto !important;
    display: block !important;
}

@keyframes cqSpin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════════════════════════════════
   ECRÃ 4 — REPORT
══════════════════════════════════════════════════════════════════════════ */
.cq-report-email-banner {
    background: #f0f4ff !important;
    border: 1px solid #d0dafb !important;
    border-style: solid !important;
    border-radius: 4px !important;
    padding: 12px 16px !important;
    font-size: 0.85rem !important;
    color: #444 !important;
    margin: 0 0 32px 0 !important;
}

.cq-report-score-wrap {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 48px !important;
    align-items: start !important;
    margin: 0 0 40px 0 !important;
    padding: 0 0 40px 0 !important;
    border-bottom: 1px solid #e8e8e8 !important;
    border-style: solid !important;
}

@media (max-width: 640px) {
    .cq-report-score-wrap { grid-template-columns: 1fr !important; }
}

.cq-report-score-left h2 {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin: 0 0 12px 0 !important;
}

.cq-score-pct { color: #3e64de !important; }

.cq-report-score-left p {
    font-size: 0.9rem !important;
    color: #555 !important;
    line-height: 1.6 !important;
    margin: 0 0 16px 0 !important;
}

.cq-report-meta {
    font-size: 0.85rem !important;
    color: #666 !important;
    margin: 0 !important;
}

/* Gráfico */
.cq-chart { width: 100% !important; }

.cq-chart-legend {
    font-size: 0.75rem !important;
    color: #999 !important;
    margin: 0 0 8px 0 !important;
    text-align: right !important;
}

.cq-chart-bars {
    display: flex !important;
    align-items: flex-end !important;
    gap: 8px !important;
    height: 180px !important;
    border-left: 1px solid #e8e8e8 !important;
    border-bottom: 1px solid #e8e8e8 !important;
    border-style: solid !important;
    padding: 0 4px 0 8px !important;
}

.cq-chart-bar-wrap {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    height: 100% !important;
    justify-content: flex-end !important;
    min-width: 0 !important;
}

.cq-chart-bar-outer {
    width: 100% !important;
    height: 150px !important;
    display: flex !important;
    align-items: flex-end !important;
}

.cq-chart-bar-fill {
    width: 100% !important;
    background: #b8c8f0 !important;
    border-radius: 2px 2px 0 0 !important;
    min-height: 3px !important;
    transition: height 0.6s ease !important;
}

.cq-chart-bar-pct {
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    color: #3e64de !important;
    margin: 4px 0 2px 0 !important;
    text-align: center !important;
}

.cq-chart-bar-label {
    font-size: 0.62rem !important;
    color: #888 !important;
    text-align: center !important;
    line-height: 1.2 !important;
    word-break: break-word !important;
    white-space: normal !important;
    max-width: 100% !important;
}

/* Secções report */
.cq-report-section { margin: 0 0 40px 0 !important; }

.cq-report-section-title {
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin: 0 0 8px 0 !important;
}

.cq-report-section-sub {
    font-size: 0.875rem !important;
    color: #666 !important;
    margin: 0 0 20px 0 !important;
}

/* Cursos recomendados */
.cq-rec-list {
    border-top: 1px solid #e8e8e8 !important;
    border-style: solid !important;
}

.cq-rec-item {
    padding: 14px 0 !important;
    border-bottom: 1px solid #e8e8e8 !important;
    border-style: solid !important;
}

.cq-rec-titulo {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    margin: 0 0 4px 0 !important;
}

.cq-rec-link {
    font-size: 0.85rem !important;
    color: #3e64de !important;
    text-decoration: none !important;
}

.cq-rec-link:hover { text-decoration: underline !important; }

/* ══════════════════════════════════════════════════════════════════════════
   INTRO — layout 2 colunas, imagem estica até à borda direita da página
══════════════════════════════════════════════════════════════════════════ */

/* O ecrã intro sai do max-width do wrap */
#cq-screen-intro {
    position: relative !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    width: 100vw !important;
    padding: 0 !important;
}

.cq-intro-layout {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    align-items: stretch !important;
    min-height: 520px !important;
}

.cq-intro-content {
    padding: 60px 48px 60px calc(50vw - 600px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    background: #fff !important;
}

/* fallback para viewports pequenos */
@media (max-width: 1200px) {
    .cq-intro-content {
        padding: 60px 48px !important;
    }
}

@media (max-width: 860px) {
    #cq-screen-intro {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }
    .cq-intro-layout {
        grid-template-columns: 1fr !important;
    }
    .cq-intro-image { display: none !important; }
    .cq-intro-content {
        padding: 40px 24px !important;
    }
}

.cq-intro-content h2 {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin: 0 0 12px 0 !important;
    line-height: 1.3 !important;
}

.cq-intro-content p {
    font-size: 1rem !important;
    color: #555 !important;
    line-height: 1.6 !important;
    margin: 0 0 24px 0 !important;
}

.cq-intro-image {
    overflow: hidden !important;
}

.cq-intro-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    border-radius: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   REPORT — resultado por categoria
══════════════════════════════════════════════════════════════════════════ */
.cq-cat-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.cq-cat-item {
    border-left: 4px solid #ccc !important;
    border-style: solid !important;
    border-radius: 0 6px 6px 0 !important;
    padding: 16px 20px !important;
}

.cq-cat-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin: 0 0 6px 0 !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.cq-cat-nome {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

.cq-cat-score {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
}

.cq-cat-msg {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    margin: 0 0 8px 0 !important;
    font-weight: 500 !important;
}

.cq-cat-curso {
    font-size: 0.82rem !important;
    color: #444 !important;
    margin: 0 !important;
}

.cq-cat-curso a {
    color: #3e64de !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.cq-cat-curso a:hover { text-decoration: underline !important; }