:root {
    --navy: #17325f;
    --blue: #4f7cff;
    --teal: #17b8a6;
    --orange: #ff914d;
    --pink: #f65f9a;
    --yellow: #ffd45c;
    --soft: #f4f8ff;
    --ink: #26354d;
}

body {
    min-height: 100vh;
    color: var(--ink);
    background:
        radial-gradient(circle at 10% 5%, rgba(255,212,92,.23), transparent 23rem),
        radial-gradient(circle at 95% 12%, rgba(246,95,154,.15), transparent 22rem),
        #f7faff;
}

.app-navbar { background: linear-gradient(100deg, var(--navy), #3f68d8); }
.hero-section { color: #fff; background: linear-gradient(135deg, #315ed4 0%, #714bd4 55%, #f65f9a 120%); }
.hero-badge { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.35); }
.hero-card { padding: 1.25rem; border-radius: 1.5rem; background: rgba(255,255,255,.14); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.26); }
.mini-feature { min-height: 110px; display:flex; flex-direction:column; justify-content:center; gap:.35rem; border-radius:1rem; color:#fff; }
.mini-feature small { display:block; opacity:.85; font-size:.75rem; }
.mini-feature.visual { background:#4f7cff; }
.mini-feature.auditori { background:#17b8a6; }
.mini-feature.kinestetik { background:#ff914d; }

.survey-shell, .result-shell, .print-result { max-width: 1120px; margin: auto; border-radius: 1.5rem; overflow: hidden; background: #fff; }
.survey-header { display:flex; gap:2rem; justify-content:space-between; align-items:center; padding:1.5rem 1.75rem; border-bottom:1px solid #e8edf5; }
.progress-box { min-width: 280px; }
.progress { height: .65rem; background:#e7edf8; }
.progress-bar { background:linear-gradient(90deg,var(--teal),var(--blue)); transition:width .3s ease; }
#assessmentForm { padding:1.75rem; }
.survey-step { display:none; animation:fadeIn .25s ease; }
.survey-step.active { display:block; }
@keyframes fadeIn { from {opacity:0; transform:translateY(8px)} to {opacity:1; transform:none} }
.form-control { border-radius:.9rem; border-color:#dbe3ef; }
.form-control:focus { border-color:var(--blue); box-shadow:0 0 0 .25rem rgba(79,124,255,.14); }
.scale-legend { display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem; padding:1rem; background:var(--soft); border-radius:1rem; }
.scale-legend div { display:flex; align-items:center; gap:.55rem; font-size:.85rem; }
.scale-legend span { width:2rem; height:2rem; display:grid; place-items:center; color:#fff; background:var(--navy); border-radius:50%; font-weight:700; }
.section-title { display:flex; justify-content:space-between; align-items:end; padding-bottom:1rem; border-bottom:1px solid #edf1f6; }
.section-title span { color:var(--blue); font-weight:700; font-size:.85rem; text-transform:uppercase; }
.question-card { display:flex; gap:1rem; padding:1.2rem; margin-bottom:1rem; background:#fff; border:1px solid #e2e8f1; border-radius:1.1rem; transition:.2s ease; }
.question-card:hover { border-color:#b8c8e7; box-shadow:0 8px 22px rgba(31,65,120,.07); }
.question-card.question-missing { border-color:#e54a4a; box-shadow:0 0 0 .2rem rgba(229,74,74,.1); }
.question-number { flex:0 0 2.4rem; height:2.4rem; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,var(--blue),#8457e8); border-radius:.8rem; font-weight:800; }
.question-content { flex:1; }
.question-text { font-weight:600; margin:.35rem 0 1rem; }
.answer-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.65rem; }
.answer-option { position:relative; cursor:pointer; }
.answer-option input { position:absolute; opacity:0; pointer-events:none; }
.answer-option > span { display:block; }
.answer-score { width:2rem; height:2rem; margin:0 auto .35rem; display:grid!important; place-items:center; border-radius:50%; background:#eaf0fb; color:var(--navy); font-weight:800; }
.answer-label { padding:.65rem .4rem; min-height:54px; text-align:center; font-size:.78rem; border:1px solid #e0e7f1; border-radius:.8rem; background:#f9fbff; }
.answer-option input:checked + .answer-score { color:#fff; background:var(--blue); box-shadow:0 0 0 .25rem rgba(79,124,255,.14); }
.answer-option input:checked ~ .answer-label { color:var(--navy); border-color:var(--blue); background:#edf2ff; font-weight:700; }
.survey-actions { display:flex; gap:.75rem; padding-top:1.5rem; margin-top:1.5rem; border-top:1px solid #edf1f6; }
.btn { border-radius:.8rem; font-weight:700; }
.btn-primary { background:var(--blue); border-color:var(--blue); }

.result-hero, .print-result-header { padding:2rem; color:#fff; background:linear-gradient(135deg,var(--navy),var(--blue)); }
.result-icon { width:4rem; height:4rem; margin:0 auto 1rem; display:grid; place-items:center; border-radius:50%; color:var(--navy); background:var(--yellow); font-size:2rem; font-weight:900; }
.score-card { padding:1.25rem; color:#fff; border-radius:1.1rem; text-align:center; }
.score-card span, .score-card small { display:block; }
.score-card strong { display:block; font-size:2.5rem; line-height:1.1; margin:.3rem 0; }
.score-card.visual { background:linear-gradient(135deg,#4f7cff,#3153c9); }
.score-card.auditori { background:linear-gradient(135deg,#17b8a6,#0c8c80); }
.score-card.kinestetik { background:linear-gradient(135deg,#ff914d,#e66924); }
.profile-highlight { padding:1.5rem; border-radius:1.1rem; background:linear-gradient(135deg,#fff7cf,#fff1b1); border-left:7px solid var(--yellow); }
.recommendation-card { padding:1.35rem; border-radius:1.1rem; background:#eef3ff; border-top:5px solid var(--blue); }
.recommendation-card.universal { background:#eafaf7; border-top-color:var(--teal); }
.recommendation-list { padding-left:1.3rem; }
.recommendation-list li { margin-bottom:.7rem; line-height:1.5; }
.result-note { padding:1rem 1.1rem; border-radius:.9rem; color:#675318; background:#fff6d6; }
.result-page { background:#eef4ff; }
.print-result-header { display:flex; justify-content:space-between; align-items:center; }
.identity-item { padding:1rem; border-radius:.9rem; background:var(--soft); }
.identity-item small, .identity-item strong { display:block; }
.identity-item small { color:#72809a; text-transform:uppercase; font-weight:700; font-size:.7rem; }

@media (max-width: 767.98px) {
    .survey-header { display:block; }
    .progress-box { min-width:0; margin-top:1rem; }
    #assessmentForm { padding:1rem; }
    .scale-legend { grid-template-columns:1fr 1fr; }
    .question-card { padding:1rem; }
    .answer-grid { grid-template-columns:1fr 1fr; }
    .answer-label { min-height:48px; }
    .print-result-header { display:block; }
    .print-result-header .no-print { margin-top:1rem; }
}

@media print {
    body { background:#fff; }
    .no-print { display:none!important; }
    .container { max-width:none; padding:0!important; }
    .print-result { box-shadow:none!important; border-radius:0; }
    .recommendation-card { break-inside:avoid; }
}