/* DESAPEGO EMOCIONAL — V1.6 COMPLETE VISUAL SYSTEM
 * Stages 2–8: reusable components, navigation, home, features, blog, journey and QA polish.
 * The app remains vanilla JS; daisyUI 5 supplies the component vocabulary while these tokens
 * preserve the brand-specific visual language.
 */
:root{
  --de-blue:#5B9ED6;--de-blue-deep:#397DB6;--de-blue-soft:#EAF4FC;
  --de-action:#C85C72;--de-action-dark:#B64C63;--de-action-light:#D9788C;--de-action-soft:#FBECEF;--de-action-glow:rgba(200,92,114,.22);
  --de-rose:#DCA6B8;--de-rose-soft:#F9EEF2;--de-lavender:#AFA3D8;--de-lavender-soft:#F2EFFA;
  --de-sage:#86A995;--de-sage-soft:#EDF5EF;--de-cream:#FCFAF8;--de-ink:#28313A;
  --de-border:#E8DFDA;--de-shadow:0 8px 28px rgba(55,72,88,.075);--de-shadow-soft:0 4px 18px rgba(55,72,88,.055);
  --de-radius:22px;--de-radius-sm:14px;
}

/* 2 — COMPONENT FOUNDATION */
.btn,.btn-primary,.btn-secondary,.btn-outline{min-height:46px;border-radius:16px;padding:12px 18px;font-weight:700;letter-spacing:.01em;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease}
.btn-primary{background:linear-gradient(135deg,var(--de-action),var(--de-action-light))!important;border:1px solid var(--de-action)!important;box-shadow:0 8px 18px var(--de-action-glow)!important;color:#fff!important}
.btn-primary:hover{background:linear-gradient(135deg,var(--de-action-dark),var(--de-action))!important;transform:translateY(-1px);box-shadow:0 11px 22px rgba(200,92,114,.28)!important}
.btn-secondary{background:rgba(255,255,255,.72)!important;border:1px solid var(--de-border)!important;color:var(--de-ink)!important;box-shadow:none!important}
.btn-secondary:hover{background:var(--de-action-soft)!important;border-color:rgba(200,92,114,.35)!important;transform:translateY(-1px)}
.card,.section-card,.tool-card,.quick-action,.protocol-card,.letter-card{border-radius:var(--de-radius)!important;border:1px solid var(--de-border)!important;background:rgba(255,255,255,.84)!important;box-shadow:var(--de-shadow-soft)!important}
.card{padding:20px}
input,textarea,select{border-radius:16px!important;border-color:var(--de-border)!important;background:rgba(255,255,255,.78)!important}
input:focus,textarea:focus,select:focus{border-color:var(--de-blue)!important;box-shadow:0 0 0 4px rgba(91,158,214,.12)!important}
.badge{background:var(--de-blue-soft);color:var(--de-blue-deep);border:1px solid rgba(91,158,214,.15)}

/* 3 — HOME */
#view-home{padding:18px 16px 28px}
.home-hero{padding:26px 18px 22px!important;border:1px solid rgba(91,158,214,.13)!important;border-radius:28px!important;background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(234,244,252,.72))!important;box-shadow:var(--de-shadow)!important}
.home-hero-badge{display:inline-flex;padding:7px 11px;border-radius:999px;background:rgba(91,158,214,.10);color:var(--de-blue-deep)!important;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.home-slogan{font-family:var(--font-serif)!important;font-weight:500!important;font-size:27px!important;line-height:1.28!important;color:var(--de-ink)!important;margin:16px 0 10px!important}
.home-intro{max-width:440px;margin:0 auto 18px!important;color:#66717B!important;line-height:1.7!important}
.btn-emergency-main{border-radius:18px!important;background:linear-gradient(135deg,var(--de-action-dark),var(--de-action-light))!important;box-shadow:0 10px 24px rgba(200,92,114,.24)!important;padding:15px 18px!important;color:#fff!important;font-weight:800!important}
.home-section-subtitle{margin:26px 4px 12px!important;font-size:13px!important;letter-spacing:.07em;text-transform:uppercase;color:#66717B!important}
.crisis-shortcuts{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px!important}
.crisis-btn{min-height:92px!important;padding:15px 12px!important;border-radius:20px!important;border:1px solid var(--de-border)!important;background:rgba(255,255,255,.86)!important;box-shadow:var(--de-shadow-soft)!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:7px!important;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease!important}
.crisis-btn:hover{transform:translateY(-2px);border-color:rgba(91,158,214,.28)!important;box-shadow:var(--de-shadow)!important}
.crisis-icon{font-size:25px!important}.crisis-label{font-size:12px!important;font-weight:700!important;line-height:1.3!important;color:var(--de-ink)!important}
.home-strengthen{margin-top:24px!important}.home-strengthen-head{margin-bottom:12px!important}.home-strengthen-head h2{font-size:20px!important}.home-strengthen-quote.card{background:linear-gradient(145deg,#fff, var(--de-lavender-soft))!important}.home-strengthen-quote-text{font-size:19px!important}.home-strengthen-reflection.card{background:linear-gradient(145deg,#fff,var(--de-rose-soft))!important}

/* 4 — NAVIGATION */
.app-header{padding:12px 16px!important;background:rgba(252,250,248,.88)!important;border-bottom:1px solid rgba(232,223,218,.85)!important}
.brand-logo-image{width:40px!important;height:40px!important}.brand-title{color:var(--de-blue-deep)!important;font-size:17px!important}.brand-subtitle{font-size:11px!important}
.icon-btn{width:42px!important;height:42px!important;border:1px solid var(--de-border)!important;background:rgba(255,255,255,.72)!important}
.bottom-nav{height:78px!important;border-top:1px solid var(--de-border)!important;background:rgba(255,255,255,.90)!important;box-shadow:0 -8px 24px rgba(55,72,88,.06)!important;padding:7px 8px!important}
.nav-item{border-radius:16px!important;gap:3px!important;font-size:10.5px!important}.nav-item.active{background:var(--de-blue-soft)!important;color:var(--de-blue-deep)!important}.nav-item.active .nav-icon{transform:translateY(-1px)!important}.nav-item .nav-icon{font-size:19px!important}

/* 5 — INTERNAL EXPERIENCES */
.view-section{padding:20px 16px 28px!important}.section-title{font-size:23px!important;line-height:1.25!important}.section-desc{line-height:1.7!important}
.roda-intro-card,.roda-question-card,.roda-result-card,.sos-card-item,.pause-mode,.saudade-step,.saudade-intro-card,.roulette-box{border-radius:22px!important;box-shadow:var(--de-shadow-soft)!important}
.sos-card-item,.menu-link-card{min-height:62px!important;border-radius:18px!important;border:1px solid var(--de-border)!important;background:rgba(255,255,255,.84)!important;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease!important}
.sos-card-item:hover,.menu-link-card:hover{transform:translateY(-1px);border-color:rgba(91,158,214,.28)!important;box-shadow:var(--de-shadow-soft)!important}
.roda-score{border-radius:12px!important}.roda-score.selected{background:var(--de-blue)!important;border-color:var(--de-blue)!important}

/* 6 — BLOG */
.blog-wrap{padding-bottom:28px!important}.blog-hero{padding:10px 4px 24px!important}.blog-main-icon{filter:drop-shadow(0 5px 10px rgba(91,158,214,.16))}
.blog-author{border-color:rgba(91,158,214,.18)!important;background:var(--de-blue-soft)!important}
.blog-card{border-radius:22px!important;border:1px solid var(--de-border)!important;background:rgba(255,255,255,.88)!important;box-shadow:var(--de-shadow-soft)!important;padding:19px!important;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease!important}
.blog-card:hover{transform:translateY(-2px);box-shadow:var(--de-shadow)!important;border-color:rgba(91,158,214,.25)!important}.blog-card h3{font-size:18px!important}.blog-read-btn{min-height:44px!important}
.blog-category-section{border-top:1px solid var(--de-border)!important}.blog-category-heading h3{font-family:var(--font-serif);font-weight:500}.blog-article-card{border-radius:24px!important;box-shadow:var(--de-shadow)!important}

/* 7 — JOURNEY / PROGRESS / FEEDBACK */
.home-dashboard,.journey-card,.home-care,.home-favorites,.resume-journey,.progress-card,.checkin-card{border-radius:24px!important;box-shadow:var(--de-shadow-soft)!important}
.progress-bar,.dashboard-progress-track,.journey-progress{border-radius:999px!important;overflow:hidden}.progress-bar span,.dashboard-progress-track span,.journey-progress span{background:linear-gradient(90deg,var(--de-blue),var(--de-lavender))!important}
.toast-alert{background:var(--de-ink)!important;color:#fff!important;border:1px solid rgba(255,255,255,.1)!important;box-shadow:0 14px 34px rgba(40,49,58,.22)!important}

/* 8 — FINAL RESPONSIVE / ACCESSIBILITY POLISH */
:focus-visible{outline:3px solid rgba(91,158,214,.38)!important;outline-offset:3px!important}
button:disabled{cursor:not-allowed!important}
@media (max-width:390px){#view-home{padding-left:13px;padding-right:13px}.home-slogan{font-size:24px!important}.crisis-shortcuts{gap:8px!important}.crisis-btn{min-height:88px!important;padding:12px 8px!important}.crisis-label{font-size:11.5px!important}.bottom-nav{height:74px!important}}
@media (min-width:521px){body{background:linear-gradient(135deg,#f4eff0,#edf5fb)}#app-container{box-shadow:0 0 60px rgba(55,72,88,.08)}}
@media (prefers-reduced-motion:reduce){.crisis-btn:hover,.blog-card:hover,.menu-link-card:hover,.sos-card-item:hover,.btn-primary:hover,.btn-secondary:hover{transform:none!important}}