/* =============================================================================
 * Questionário público — lipedema.life
 * Redesign clínico/limpo. Consome tokens de /css/tokens.css.
 * ========================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font-sans);
    background: var(--color-page);
    min-height: 100vh;
    padding: var(--space-5) var(--space-4) var(--space-8);
    color: var(--color-text);
    line-height: var(--leading-normal);
    -webkit-font-smoothing: antialiased;
}

/* --- Marca (topo de todas as telas) --- */
.brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 640px;
    margin: var(--space-3) auto var(--space-5);
}

.brand-mark {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
}

.brand-name {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--color-text);
}

.brand-tag {
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
    border-left: 1px solid var(--color-border-strong);
    padding-left: 10px;
    margin-left: 2px;
}

/* --- Card principal --- */
.container {
    max-width: 640px;
    margin: 0 auto;
    background: var(--color-surface);
    padding: var(--space-10);
    border-radius: 20px;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
}

/* --- Cabeçalho de página (eyebrow + título + subtítulo) --- */
.page-head { margin-bottom: var(--space-6); }

.page-eyebrow {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-primary);
    margin-bottom: var(--space-2);
}

h1 {
    color: var(--color-text);
    font-size: 27px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: var(--leading-tight);
    margin-bottom: var(--space-2);
}

h2, .page-subtitle {
    color: var(--color-text-muted);
    font-size: 15.5px;
    font-weight: 400;
    line-height: var(--leading-relaxed);
}

/* Título fora de .page-head (licença e páginas estáticas) */
.container > h1 { margin-top: 0; }
.container > h2 { margin-bottom: var(--space-5); }

/* --- Formulários --- */
.form-group { margin-bottom: var(--space-5); }

label {
    display: block;
    margin-bottom: var(--space-2);
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--color-text);
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
textarea,
select {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-family: inherit;
    background: var(--color-surface);
    color: var(--color-text);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input::placeholder, textarea::placeholder { color: var(--color-text-subtle); }

input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

textarea { min-height: 110px; resize: vertical; }

.input-readonly {
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    border-style: dashed;
}

.help-text {
    display: block;
    margin-top: 6px;
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
    line-height: var(--leading-normal);
}

.field-note { display: block; margin-top: 6px; font-size: var(--text-xs); }
.field-note-success { color: var(--color-success-text); font-weight: 600; }

.email-suggestion {
    display: none;
    margin-top: 8px;
    padding: 10px 12px;
    background: var(--color-info-bg);
    border: 1px solid var(--color-info-border);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--color-info-text);
}

.email-suggestion a { color: inherit; font-weight: 700; }

.link-primary { color: var(--color-primary); font-weight: 600; }
.link-primary:hover { text-decoration: underline; }

/* Checkbox em linha com texto */
.check-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-weight: 400;
    font-size: var(--text-sm);
    color: var(--color-text);
    cursor: pointer;
}

.check-label input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex: none;
    accent-color: var(--color-primary);
    cursor: pointer;
}

/* --- Botões --- */
button, .btn {
    background: var(--color-primary);
    color: var(--color-on-primary);
    padding: 14px 28px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: var(--text-base);
    font-family: inherit;
    font-weight: 600;
    transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

button:hover, .btn:hover {
    background: var(--color-primary-hover);
    box-shadow: var(--shadow-md);
}

button:active, .btn:active { transform: translateY(1px); }

button:focus-visible, .btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

button:disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.btn-secondary {
    background: transparent;
    color: var(--color-text-muted);
    border: 1.5px solid var(--color-border-strong);
}

.btn-secondary:hover {
    background: var(--color-surface-alt);
    color: var(--color-text);
    border-color: var(--color-text-subtle);
    box-shadow: none;
}

.button-group {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-8);
}

.button-group .btn-secondary { flex: none; }

/* CTA principal de início (tela inicial) */
.btn-cta {
    width: 100%;
    padding: 16px 28px;
    font-size: 17px;
}

/* --- Indicador de etapas (partials/etapas) --- */
.etapas { margin: 0 0 var(--space-6); }

.etapas-track { display: flex; gap: 4px; }

.etapas-seg {
    flex: 1;
    height: 5px;
    border-radius: var(--radius-full);
    background: var(--color-border);
    transition: background .3s ease;
}

.etapas-seg.is-done { background: var(--color-primary); }

.etapas-seg.is-current { box-shadow: 0 0 0 2px var(--color-primary-border); }

.etapas-label {
    margin-top: 8px;
    text-align: right;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-subtle);
    letter-spacing: 0.02em;
}

/* --- Barra de progresso (perguntas 1-15) --- */
.progress-bar {
    width: 100%;
    height: 6px;
    background: var(--color-border);
    border-radius: var(--radius-full);
    margin-bottom: var(--space-6);
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--color-primary);
    border-radius: var(--radius-full);
    transition: width .5s ease;
}

/* --- Alertas --- */
.alert {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-5);
    font-size: var(--text-sm);
    scroll-margin-top: var(--space-5);
}

.alert-success {
    background: var(--color-success-bg);
    color: var(--color-success-text);
    border: 1px solid var(--color-success-border);
}

.alert-error {
    background: var(--color-error-bg);
    color: var(--color-error-text);
    border: 1px solid var(--color-error-border);
}

/* --- Caixas de conteúdo (info, aviso, outline) --- */
.box {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin: var(--space-6) 0;
}

.box-info {
    background: var(--color-info-bg);
    border: 1px solid var(--color-info-border);
    border-left: 4px solid var(--color-info-text);
}

.box-warning {
    background: var(--color-warning-bg);
    border: 1px solid var(--color-warning-border);
    border-left: 4px solid var(--color-warning-text);
    font-size: var(--text-sm);
    color: var(--color-warning-text);
}

.box-outline {
    background: var(--color-surface);
    border: 1.5px solid var(--color-border-strong);
}

.box-heading {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--space-3);
}

.box-heading-primary {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-primary-hover);
    margin-bottom: var(--space-3);
}

.box-info .box-heading-primary { color: var(--color-info-text); }

.box-list { margin-left: var(--space-5); font-size: var(--text-sm); }
.box-list li { margin-bottom: 6px; line-height: var(--leading-relaxed); }
.box-list li:last-child { margin-bottom: 0; }

.box p { font-size: var(--text-sm); line-height: var(--leading-relaxed); }

/* Caixa rolável dos termos */
.terms-scroll {
    max-height: 320px;
    overflow-y: auto;
    background: var(--color-surface);
}

.terms-heading {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-text);
    margin: var(--space-4) 0 var(--space-2);
}

/* --- Texto da pergunta (perguntas 1-15) --- */
.question-text {
    font-size: 21px;
    font-weight: 600;
    color: var(--color-text);
    margin: var(--space-4) 0 var(--space-6);
    line-height: var(--leading-relaxed);
}

/* --- Escala 0-10 por botões (questionario/perguntas) --- */
.scale {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    border: 0;
    padding: 0;
    margin: 0 0 6px;
    justify-content: center;
}

.scale-option { position: relative; flex: 1 1 52px; min-width: 52px; }

.scale-option input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.scale-option span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    border: 1.5px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-text);
    background: var(--color-surface);
    transition: all var(--transition-fast);
    user-select: none;
}

.scale-option input:checked + span {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-on-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.scale-option input:focus-visible + span {
    outline: 3px solid var(--color-primary-border);
    outline-offset: 2px;
}

@media (hover: hover) {
    .scale-option:hover span {
        border-color: var(--color-primary);
        background: var(--color-primary-soft);
    }
    .scale-option:hover input:checked + span { background: var(--color-primary-hover); }
}

.slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--color-text-muted);
    margin-top: 10px;
}

.scale-hint {
    text-align: center;
    color: var(--color-text-subtle);
    font-size: var(--text-sm);
    margin: var(--space-4) 0 0;
}

/* --- Slider legado (custom questions do tipo scale) --- */
.slider-container {
    margin: var(--space-6) 0;
    padding: var(--space-5);
    background: var(--color-surface-alt);
    border-radius: var(--radius-lg);
}

.slider {
    width: 100%;
    height: 8px;
    border-radius: var(--radius-sm);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    background: var(--color-border);
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-primary);
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-primary);
    cursor: pointer;
    border: none;
}

.slider-value {
    text-align: center;
    font-size: 48px;
    font-weight: bold;
    color: var(--color-primary);
    margin-bottom: var(--space-4);
}

/* --- Slider bipolar (custom questions) --- */
.bipolar-slider {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    height: 28px;
}

.bipolar-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-surface);
    border: 3px solid #95a5a6;
    box-shadow: var(--shadow-md);
    cursor: grab;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.bipolar-slider::-webkit-slider-thumb:active {
    cursor: grabbing;
    box-shadow: var(--shadow-lg);
}

.bipolar-slider::-moz-range-thumb {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-surface);
    border: 3px solid #95a5a6;
    box-shadow: var(--shadow-md);
    cursor: grab;
}

.bipolar-slider::-moz-range-track {
    background: transparent;
    border: none;
    height: 0;
}

.bipolar-slider.positive::-webkit-slider-thumb { border-color: #2ecc71; }
.bipolar-slider.negative::-webkit-slider-thumb { border-color: #e74c3c; }
.bipolar-slider.positive::-moz-range-thumb { border-color: #2ecc71; }
.bipolar-slider.negative::-moz-range-thumb { border-color: #e74c3c; }

/* --- Página inicial --- */
.welcome-text {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-5);
}

.lang-select-label {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-subtle);
}

.citation-box {
    margin-top: var(--space-8);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
    line-height: var(--leading-relaxed);
}

.citation-box a { color: var(--color-primary); }

.citation-box-compact { margin-top: var(--space-6); }

.footer-links {
    display: flex;
    justify-content: center;
    gap: var(--space-5);
    margin-top: var(--space-5);
    font-size: var(--text-xs);
}

.footer-links a {
    color: var(--color-text-subtle);
    text-decoration: none;
    font-weight: 600;
}

.footer-links a:hover { color: var(--color-primary); }

/* --- Página de resultado --- */
.score-hero {
    text-align: center;
    padding: var(--space-8) var(--space-5);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    margin: var(--space-6) 0;
}

.score-hero-label {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-subtle);
}

.score-hero-value {
    font-size: 72px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--color-primary);
    margin: var(--space-2) 0;
}

.score-hero-max {
    font-size: var(--text-sm);
    color: var(--color-text-subtle);
}

.result-level {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
}

.result-level p { margin-top: 6px; }

.result-level-success {
    background: var(--color-success-bg);
    border: 1px solid var(--color-success-border);
    color: var(--color-success-text);
}

.result-level-warning {
    background: var(--color-warning-bg);
    border: 1px solid var(--color-warning-border);
    color: var(--color-warning-text);
}

.result-level-error {
    background: var(--color-error-bg);
    border: 1px solid var(--color-error-border);
    color: var(--color-error-text);
}

/* Celebração de melhora (evolução) */
.congrats-box {
    text-align: center;
    padding: var(--space-8) var(--space-5);
    background: var(--color-success-bg);
    border: 1px solid var(--color-success-border);
    border-radius: var(--radius-xl);
    margin: var(--space-6) 0;
}

.congrats-emoji { font-size: 40px; margin-bottom: var(--space-2); }

.congrats-title {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-success-text);
    margin-bottom: var(--space-2);
}

.congrats-text { color: var(--color-success-text); font-size: var(--text-sm); }

.congrats-panel {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin: var(--space-5) 0;
    font-size: var(--text-sm);
    color: var(--color-text);
}

.congrats-line { margin-bottom: 4px; }

.congrats-delta {
    margin-top: var(--space-2);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-success-text);
}

.congrats-note {
    font-size: var(--text-xs);
    color: var(--color-success-text);
    opacity: .85;
    line-height: var(--leading-relaxed);
}

.result-thanks {
    text-align: center;
    margin-top: var(--space-8);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* --- Anúncios (resultado) --- */
.ads-box { margin: var(--space-6) 0; }

.ads-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-subtle);
    margin-bottom: var(--space-2);
    text-align: center;
}

.ad-link { text-decoration: none; color: inherit; display: block; }
.ad-link-spaced { margin-bottom: var(--space-3); }

.ad-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.ad-card:hover {
    border-color: var(--color-primary-border);
    box-shadow: var(--shadow-md);
}

.ad-card-padded { padding: var(--space-4); }

.ad-card-img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    flex: none;
}

.ad-card-body { padding: var(--space-3) var(--space-3) var(--space-3) 0; }
.ad-card-padded .ad-card-body { padding: 0; }

.ad-card-title {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 2px;
}

.ad-card-desc {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: var(--leading-normal);
}

/* --- Licença --- */
.legal-box h3 { margin-top: var(--space-6); }
.legal-box h3:first-child { margin-top: 0; }

.legal-citation {
    background: var(--color-surface-alt);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin: var(--space-3) 0 var(--space-5);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}

.legal-citation a { color: var(--color-primary); }

.legal-allowed {
    background: var(--color-success-bg);
    border: 1px solid var(--color-success-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-5);
    color: var(--color-success-text);
}

.legal-prohibited {
    background: var(--color-error-bg);
    border: 1px solid var(--color-error-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-5);
    color: var(--color-error-text);
}

/* --- Rodapé --- */
.page-footer {
    text-align: center;
    padding: var(--space-5) var(--space-5) 0;
    max-width: 640px;
    margin: 0 auto;
}

.page-footer p {
    font-size: 11px;
    color: var(--color-text-subtle);
    line-height: var(--leading-normal);
}

.page-footer a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
}

.page-footer a:hover { text-decoration: underline; }

/* --- Utilitários --- */
.u-center { text-align: center; }

/* --- Mobile --- */
@media (max-width: 768px) {
    body { padding: var(--space-3) var(--space-3) var(--space-6); }
    .brand { margin-bottom: var(--space-4); }
    .container { padding: var(--space-6) var(--space-5); border-radius: var(--radius-xl); }
    h1 { font-size: 23px; }
    .question-text { font-size: 19px; }
    .slider-value { font-size: 36px; }
    .score-hero-value { font-size: 56px; }

    /* CTAs empilhados: ação principal em cima, voltar embaixo */
    .button-group { flex-direction: column-reverse; }
    .button-group .btn,
    .button-group button { width: 100%; }
}