/* ============================================================
   HUGIINE APP
   Global Application Styles
   ============================================================ */


/* ============================================================
   1. DESIGN SYSTEM
   ============================================================ */

:root {
    --navy: #06162f;
    --navy-soft: #0c284e;

    --blue: #1769e8;
    --blue-dark: #105ac8;
    --purple: #7042f4;

    --text: #0b1739;
    --text-secondary: #53617d;
    --text-muted: #7c879d;

    --background: #f5f8fc;
    --surface: #ffffff;
    --surface-soft: #f8faff;

    --border: #dce4ef;
    --border-soft: #e9eef5;

    --green: #22a65a;
    --orange: #ef8a17;

    --radius: 14px;
    --radius-small: 9px;

    --shadow:
        0 3px 12px rgba(18, 43, 78, 0.04);

    /* Cross-browser viewport / safe-area primitives. */
    --app-viewport-height: 100vh;
    --app-safe-area-top: env(safe-area-inset-top, 0px);
    --app-safe-area-right: env(safe-area-inset-right, 0px);
    --app-safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --app-safe-area-left: env(safe-area-inset-left, 0px);

    /*
     * Current Android geometry is preserved. app_header.php may update this
     * variable with the measured mobile top-row height when available.
     */
    --app-mobile-nav-offset: 72px;


    /* ========================================================
       GLOBAL TYPOGRAPHY
       Evolution page = visual reference
       ======================================================== */

    --font-family-app:
        Inter,
        Arial,
        Helvetica,
        sans-serif;

    --font-size-page-title: 29px;
    --font-size-page-subtitle: 15px;

    --font-size-title: 15px;
    --font-size-text: 13px;
    --font-size-secondary: 12px;
    --font-size-meta: 11px;

    --line-height-page-title: 1.15;
    --line-height-title: 1.45;
    --line-height-text: 1.60;
    --line-height-secondary: 1.50;

    /* Typography weights — lighter, more refined hierarchy */
    --font-weight-page-title: 500;
    --font-weight-title: 500;
    --font-weight-subtitle: 400;
    --font-weight-label: 600;
    --font-weight-strong: 600;
}


/* Prefer the dynamic viewport on browsers that implement it correctly. */
@supports (height: 100dvh) {
    :root {
        --app-viewport-height: 100dvh;
    }
}


/* ============================================================
   2. RESET
   ============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}


html,
body {
    margin: 0;
    padding: 0;

    width: 100%;
    min-width: 0;
    min-height: 100%;

    overflow-x: hidden;
}

@supports (overflow: clip) {
    html,
    body {
        overflow-x: clip;
    }
}


body {
    font-family:
        var(--font-family-app);

    font-size:
        var(--font-size-text);

    line-height:
        var(--line-height-text);

    color:
        var(--text);

    background:
        var(--background);
}


a {
    color: var(--blue);
    text-decoration: none;
}


img,
svg,
canvas,
video {
    max-width: 100%;
}

img,
video {
    height: auto;
}


button,
input,
select,
textarea {
    font-family:
        var(--font-family-app);

    font-size:
        var(--font-size-text);
}


/* ============================================================
   GLOBAL APP TYPOGRAPHY
   ============================================================ */

/*
|--------------------------------------------------------------------------
| Internal titles
|--------------------------------------------------------------------------
*/

.app-main h2,
.app-main h3 {
    font-family:
        var(--font-family-app);

    font-weight:
        var(--font-weight-title);
}


.app-main h3 {
    font-size:
        var(--font-size-title);

    line-height:
        var(--line-height-title);

    font-weight:
        var(--font-weight-title);
}


/*
|--------------------------------------------------------------------------
| Normal paragraphs
|--------------------------------------------------------------------------
*/

.app-main p {
    font-size:
        var(--font-size-text);

    line-height:
        var(--line-height-text);
}


/*
|--------------------------------------------------------------------------
| Supporting text
|--------------------------------------------------------------------------
*/

.app-help,
.app-note,
.app-secondary,
.app-evidence {
    font-size:
        var(--font-size-secondary);

    line-height:
        var(--line-height-secondary);
}


/*
|--------------------------------------------------------------------------
| Meta / small
|--------------------------------------------------------------------------
*/

.app-main small,
.app-meta,
.app-confidence {
    font-size:
        var(--font-size-meta);

    line-height:
        var(--line-height-secondary);
}


/*
|--------------------------------------------------------------------------
| Generic chart typography
|--------------------------------------------------------------------------
*/

.chart-title,
.graph-title {
    font-family:
        var(--font-family-app);

    font-size:
        var(--font-size-title);

    line-height:
        var(--line-height-title);

    font-weight:
        var(--font-weight-title);
}


.chart-text,
.graph-text {
    font-family:
        var(--font-family-app);

    font-size:
        var(--font-size-text);

    line-height:
        var(--line-height-text);
}


.chart-label,
.chart-legend,
.graph-label,
.graph-legend {
    font-family:
        var(--font-family-app);

    font-size:
        var(--font-size-secondary);

    line-height:
        var(--line-height-secondary);
}


.chart-meta,
.graph-meta {
    font-family:
        var(--font-family-app);

    font-size:
        var(--font-size-meta);

    line-height:
        var(--line-height-secondary);
}


/* ============================================================
   3. APP SHELL
   ============================================================ */

.app-shell {
    display: flex;

    width: 100%;
    min-height: var(--app-viewport-height, 100vh);

    background: var(--background);
}


.app-main {
    flex: 1;
    min-width: 0;
    min-height: var(--app-viewport-height, 100vh);

    padding:
        26px
        clamp(28px, 3vw, 52px)
        60px;

    display: flex;
    flex-direction: column;
}


/* ============================================================
   4. SIDEBAR
   Light Scientific Theme
   ============================================================ */

.app-sidebar {
    flex: 0 0 250px;

    width: 250px;
    min-height: var(--app-viewport-height, 100vh);

    padding: 4px 17px 20px;

    display: flex;
    flex-direction: column;

    /*
     * Contraste subtil com o branco #FFFFFF da Home.
     */
    color: #0b1739;

    background:
        linear-gradient(
            180deg,
            #f1f6fd 0%,
            #f7faff 52%,
            #eef4fc 100%
        );

    border-right:
        1px solid
        #dce7f5;
}


/* ============================================================
   SIDEBAR BRAND
   ============================================================ */

.sidebar-brand {
    width: 100%;

    margin: 0 0 38px;
}


.sidebar-brand a {
    display: block;
}


.sidebar-logo {
    display: block;

    width: 170px;
    max-width: 100%;
    height: auto;

    margin: 15px auto;
}

/* ============================================================
   5. PUBLIC SIDEBAR
   ============================================================ */

.public-sidebar {
    min-height: var(--app-viewport-height, 100vh);
}


.public-sidebar .sidebar-brand {
    margin-bottom: 0;
}


/* ============================================================
   6. SIDEBAR NAV
   ============================================================ */

.app-sidebar > a {
    min-height: 48px;

    margin-bottom: 6px;
    padding: 9px 11px;

    display: flex;
    align-items: center;

    border: 1px solid transparent;
    border-radius: 10px;

    color: #0b1739;

    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}


/* ============================================================
   TEXTO
   ============================================================ */

.app-sidebar > a > span:not(.nav-icon) {
    color: #0b1739;
}


/* ============================================================
   HOVER
   ============================================================ */

.app-sidebar > a:hover {
    color: #0b1739;

    background: rgba(255, 255, 255, 0.72);

    border-color: #dce7f5;
}

.app-sidebar > a:hover > span:not(.nav-icon) {
    color: #0b1739;
}


/* ============================================================
   ACTIVE
   ============================================================ */

.app-sidebar > a.active {
    color: #0b1739;

    background: #ffffff;

    border-color: #cfe0f7;

    box-shadow:
        0 4px 14px
        rgba(23, 105, 232, 0.07);

    font-weight: 600;
}

.app-sidebar > a.active > span:not(.nav-icon) {
    color: #0b1739;
}


/* ============================================================
   NAV ICON
   ============================================================ */

.app-sidebar > a .nav-icon {
    flex: 0 0 30px;

    width: 30px;
    height: 30px;

    margin-right: 11px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(23, 105, 232, 0.16);

    border-radius: 50%;

    background:
        rgba(23, 105, 232, 0.07);

    color: #1769e8;
}


/* ============================================================
   ACTIVE ICON
   ============================================================ */

.app-sidebar > a.active .nav-icon {
    border-color:
        rgba(23, 105, 232, 0.24);

    background:
        rgba(23, 105, 232, 0.11);

    color: #1769e8;
}


/* ============================================================
   LOGOUT
   ============================================================ */

.app-sidebar > a.sidebar-logout,
.app-sidebar > a.sidebar-logout > span:not(.nav-icon) {
    color: #0b1739;
}

/* ============================================================
   7. SIDEBAR HELP / NOTES
   ============================================================ */

.sidebar-help,
.sidebar-learning-note,
.sidebar-unlock-note {
    margin-top: 14px;

    padding: 14px;

    border:
        1px solid
        #d7e5f5;

    border-radius: 11px;

    background:
        rgba(
            255,
            255,
            255,
            0.58
        );

    color: #53617d;

    font-size:
        var(--font-size-secondary);

    line-height: 1.55;
}


/* Empurra o primeiro bloco inferior para baixo */

.sidebar-help:first-of-type,
.sidebar-learning-note:first-of-type {
    margin-top: auto;
}


/* ============================================================
   NOTE TITLES
   ============================================================ */

.sidebar-help strong,
.sidebar-learning-note strong,
.sidebar-unlock-note strong {
    display: block;

    margin-bottom: 4px;

    color: #0b1739;

    font-weight:
        var(--font-weight-strong);
}


/* ============================================================
   NOTE TEXT
   ============================================================ */

.sidebar-learning-note p,
.sidebar-unlock-note p {
    margin: 0;

    color: #66758e;

    font-size:
        var(--font-size-secondary);

    line-height: 1.55;
}


/* ============================================================
   UNLOCK NOTE
   Slight blue distinction
   ============================================================ */

.sidebar-unlock-note {
    border-color:
        rgba(
            23,
            105,
            232,
            0.18
        );

    background:
        rgba(
            23,
            105,
            232,
            0.045
        );
}


.sidebar-unlock-note strong {
    color: #1769e8;
}

/* ============================================================
   8. TOP BAR
   ============================================================ */

.app-topbar {
    width: 100%;
    max-width: 1240px;

    margin: 0 auto 28px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}


.app-topbar h1 {
    margin: 0;

    color:
        var(--text);

    font-size:
        var(--font-size-page-title);

    line-height:
        var(--line-height-page-title);

    letter-spacing:
        -0.5px;

    font-weight:
        var(--font-weight-page-title);
}


.app-topbar p {
    margin:
        5px
        0
        0;

    color:
        var(--blue);

    font-size:
        var(--font-size-page-subtitle);

    line-height:
        1.5;

    font-weight:
        var(--font-weight-subtitle);
}


/* ============================================================
   TOP BAR ACTIONS
   ============================================================ */

.topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    margin-left: auto;
}


/* ============================================================
   9. LANGUAGES
   ============================================================ */

.language-pills {
    display: flex;
    align-items: center;

    gap: 5px;

    margin-right: 16px;
}


.language-pill-form {
    margin: 0;
    padding: 0;
}


.language-pills button {
    min-width: 46px;

    margin: 0;
    padding: 8px 10px;

    text-align: center;

    border: 1px solid var(--border);
    border-radius: 8px;

    background: #ffffff;

    color: #263551;

    cursor: pointer;

    font-family:
        var(--font-family-app);

    font-size:
        var(--font-size-secondary);

    font-weight:
        var(--font-weight-label);

    line-height: normal;

    appearance: none;
    -webkit-appearance: none;
}


.language-pills button.active {
    color: var(--blue);

    border-color: #78a9f4;

    background: #f5f9ff;
}


.language-pills button:hover {
    border-color: #a9c6ef;

    background: #f8fbff;
}


.language-pills button:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}


/* ============================================================
   10. USER / AVATAR
   ============================================================ */

.user-chip {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    margin: 0;
    padding: 0;
}


.user-chip .avatar {
    flex: 0 0 38px;

    width: 38px;
    height: 38px;

    margin: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #e9f1ff;

    color: var(--blue);

    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}


/* ============================================================
   11. SHARED CARDS
   ============================================================ */

.card,
.function-card,
.function-ready,
.function-intro,
.learning-flow {
    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius);

    background:
        var(--surface);

    box-shadow:
        var(--shadow);
}


/* ============================================================
   12. PROFILE PAGE WRAPPER
   ============================================================ */

.profile-content {
    width: 100%;
    max-width: 1240px;

    margin: 0 auto;

    padding:
        0
        0
        30px;
}


/* ============================================================
   13. PROFILE CARDS
   ============================================================ */

.profile-content > .card {
    margin:
        0
        0
        22px;

    padding:
        26px
        28px;
}


.profile-content > .card:last-child {
    margin-bottom: 0;
}


/* ============================================================
   14. PROFILE SUMMARY
   ============================================================ */

.profile-summary {
    padding:
        26px
        28px !important;
}


.profile-summary-main {
    display: flex;
    align-items: center;

    margin-bottom: 22px;
}


.profile-avatar-large {
    flex: 0 0 58px;

    width: 58px;
    height: 58px;

    margin-right: 15px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--blue),
            var(--purple)
        );

    color: #ffffff;

    font-size: 20px;
    font-weight: 600;
}


.profile-summary-copy h2 {
    margin:
        0
        0
        3px;

    font-size:
        var(--font-size-title);

    line-height:
        var(--line-height-title);

    font-weight:
        var(--font-weight-title);
}


.profile-summary-copy p {
    margin: 0;

    color:
        var(--text-muted);

    font-size:
        var(--font-size-text);

    line-height:
        var(--line-height-text);
}


.profile-complete,
.profile-incomplete {
    display: inline-block;

    margin-top: 8px;

    padding:
        4px
        9px;

    border-radius: 20px;

    font-size:
        var(--font-size-meta);

    font-weight: 600;
}


.profile-complete {
    background: #eaf8f0;

    color: #19884e;
}


.profile-incomplete {
    background: #fff5e3;

    color: #bb7500;
}


/* ============================================================
   15. PROFILE STATUS
   ============================================================ */

.status-row {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    margin:
        0
        0
        18px;

    border-top:
        1px solid
        var(--border-soft);
}


.status-row > div {
    padding:
        17px
        22px
        0
        0;
}


.status-row .label {
    display: block;

    margin-bottom: 4px;

    color:
        var(--text-muted);

    font-size:
        var(--font-size-meta);

    font-weight: 600;
}


.status-row strong {
    color:
        var(--text);

    font-size:
        var(--font-size-text);
}


.confidence-medium {
    color:
        var(--orange) !important;
}


.primary-link {
    display: inline-block;

    margin-top: 3px;

    color:
        var(--blue);

    font-size:
        var(--font-size-secondary);

    font-weight:
        var(--font-weight-strong);
}


/* ============================================================
   16. CARD HEADERS
   ============================================================ */

.card-title {
    margin-bottom: 24px;
}


.card-title h3 {
    margin:
        0
        0
        4px;

    color:
        var(--text);

    font-size:
        var(--font-size-title);

    line-height:
        var(--line-height-title);

    font-weight:
        var(--font-weight-title);
}


.card-title span {
    color:
        var(--text-muted);

    font-size:
        var(--font-size-secondary);

    line-height:
        var(--line-height-secondary);
}


/* ============================================================
   17. PROFILE FORM
   ============================================================ */

.profile-form {
    width: 100%;
}


.form-two {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        18px
        24px;

    margin-bottom: 18px;
}


.form-two > div {
    min-width: 0;
}


.profile-form label {
    display: block;

    margin-bottom: 7px;

    color: #14203d;

    font-size:
        var(--font-size-secondary);

    font-weight:
        var(--font-weight-label);
}


.profile-form input,
.profile-form select {
    display: block;

    width: 100%;
    height: 44px;

    padding:
        0
        13px;

    border:
        1px solid
        #d4deeb;

    border-radius: 9px;

    outline: none;

    background: #ffffff;

    color:
        var(--text);

    font-size:
        var(--font-size-text);

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}


.profile-form input:focus,
.profile-form select:focus {
    border-color: #5795ec;

    box-shadow:
        0 0 0 3px rgba(23, 105, 232, 0.08);
}


.profile-form input:disabled {
    background: #f4f6f9;

    color: #7b879c;
}


.profile-form select {
    cursor: pointer;
}


/* ============================================================
   18. PROFILE INFORMATION NOTE
   ============================================================ */

.profile-content .learning-note {
    margin:
        24px
        0
        22px;

    padding:
        17px
        19px;

    border:
        1px solid
        #dce7f7;

    border-radius: 10px;

    background: #f7faff;
}


.profile-content .learning-note strong {
    display: block;

    margin-bottom: 5px;

    color: #152341;

    font-size:
        var(--font-size-secondary);
}


.profile-content .learning-note p {
    margin: 0;

    max-width: 100%;

    color:
        var(--text-secondary);

    font-size:
        var(--font-size-secondary);

    line-height:
        1.6;
}


/* ============================================================
   19. BUTTONS
   ============================================================ */

.btn-primary,
.btn-secondary {
    min-height: 40px;

    padding:
        0
        17px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    font-size:
        var(--font-size-secondary);

    font-weight:
        var(--font-weight-label);

    cursor: pointer;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        transform 0.15s ease;
}


.btn-primary {
    border: 0;

    background:
        var(--blue);

    color: #ffffff;
}


.btn-primary:hover {
    background:
        var(--blue-dark);

    transform:
        translateY(-1px);
}


.btn-secondary {
    border:
        1px solid
        #d4deeb;

    background: #ffffff;

    color: #15335d;
}


.btn-secondary:hover {
    border-color: #aebcd0;

    background: #f9fbfe;
}


.profile-form > .btn-primary {
    margin-top: 2px;
}


/* ============================================================
   20. ENGINE STATISTICS
   ============================================================ */

.engine-stats {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    margin:
        6px
        0
        0;

    border:
        1px solid
        var(--border-soft);

    border-radius: 11px;

    overflow: hidden;

    background: #fafcff;
}


.engine-stats > div {
    padding:
        20px
        12px;

    text-align: center;

    border-right:
        1px solid
        var(--border-soft);
}


.engine-stats > div:last-child {
    border-right: 0;
}


.engine-stats strong {
    display: block;

    color:
        var(--blue);

    font-size: 21px;

    line-height: 1;
}


.engine-stats span {
    display: block;

    margin-top: 6px;

    color:
        var(--text-muted);

    font-size:
        var(--font-size-meta);
}


/* ============================================================
   21. SETTINGS / PRIVACY
   ============================================================ */

.settings-list {
    margin-top: 6px;

    border:
        1px solid
        var(--border-soft);

    border-radius: 11px;

    overflow: hidden;
}


.settings-list > div {
    min-height: 76px;

    padding:
        17px
        20px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 28px;

    border-bottom:
        1px solid
        var(--border-soft);

    background: #ffffff;
}


.settings-list > div:last-child {
    border-bottom: 0;
}


.settings-list > div > div:first-child {
    flex: 1;

    min-width: 0;
}


.settings-list strong {
    display: block;

    margin-bottom: 4px;

    color: #15213d;

    font-size:
        var(--font-size-secondary);
}


.settings-list span {
    display: block;

    color:
        var(--text-muted);

    font-size:
        var(--font-size-meta);

    line-height:
        var(--line-height-secondary);
}


/* ============================================================
   22. SETTINGS BUTTON GROUP
   ============================================================ */

.privacy-links {
    flex: 0 0 auto;

    display: flex;
    align-items: center;

    gap: 10px;
}


.privacy-links .btn-secondary {
    min-width: 88px;
}


/* ============================================================
   23. SWITCH
   ============================================================ */

.switch {
    flex: 0 0 auto;

    cursor: pointer;
}


.switch input {
    display: none;
}


.switch span {
    position: relative;

    display: block;

    width: 40px;
    height: 22px;

    border-radius: 20px;

    background: #cfd8e5;

    transition:
        background 0.2s ease;
}


.switch span::after {
    content: "";

    position: absolute;

    top: 3px;
    left: 3px;

    width: 16px;
    height: 16px;

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.18);

    transition:
        transform 0.2s ease;
}


.switch input:checked + span {
    background:
        var(--blue);
}


.switch input:checked + span::after {
    transform:
        translateX(18px);
}


/* ============================================================
   LOCKED SWITCH
   ============================================================ */

.switch-locked {
    cursor: default;
}


.switch-locked input:disabled + span {
    background:
        var(--blue);

    opacity: 1;

    cursor: default;
}


.switch-locked input:disabled + span::after {
    transform:
        translateX(18px);

    background: #ffffff;
}


/* ============================================================
   24. MESSAGES
   ============================================================ */

.profile-message {
    margin-bottom: 18px;

    padding:
        12px
        15px;

    border-radius: 8px;

    font-size:
        var(--font-size-secondary);

    line-height:
        var(--line-height-secondary);
}


.profile-message.success {
    color: #197047;

    border:
        1px solid
        #bee5ce;

    background: #effaf4;
}


.profile-message.error {
    color: #a42b3a;

    border:
        1px solid
        #efc8ce;

    background: #fff4f5;
}


.profile-message ul {
    margin:
        7px
        0
        0;

    padding-left: 18px;
}


/* ============================================================
   25. FUNCTION INTRO
   ============================================================ */

.function-intro {
    display: flex;
    align-items: center;

    max-width: 1240px;

    margin:
        0
        auto
        18px;

    padding:
        18px
        20px;
}


.function-intro > div:first-child {
    flex: 1;
}


.function-intro p {
    margin: 0;

    color: #344666;

    font-size:
        var(--font-size-text);

    line-height:
        1.55;
}


.learning-flow {
    min-width: 330px;

    margin-left: 22px;

    padding:
        14px
        17px;

    background: #f7faff;
}


.learning-flow strong,
.learning-flow span {
    display: block;
}


.learning-flow strong {
    font-size:
        var(--font-size-secondary);
}


.learning-flow span {
    margin-top: 4px;

    color: #5d6f8c;

    font-size:
        var(--font-size-meta);
}


/* ============================================================
   26. PROGRESS
   ============================================================ */

.progress-area {
    max-width: 1240px;

    margin:
        20px
        auto;
}


.progress-label {
    display: flex;
    justify-content: space-between;

    margin-bottom: 7px;

    font-size:
        var(--font-size-secondary);
}


.progress-track {
    height: 4px;

    overflow: hidden;

    border-radius: 8px;

    background: #e2e8f1;
}


.progress-track div {
    height: 100%;

    background:
        var(--blue);
}


/* ============================================================
   27. FUNCTION CARDS
   ============================================================ */

.function-card {
    position: relative;

    max-width: 1240px;

    margin:
        0
        auto
        14px;

    padding: 20px;

    display: flex;
}


.section-number {
    flex: 0 0 30px;

    width: 30px;
    height: 30px;

    margin-right: 14px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #ffffff;

    font-size:
        var(--font-size-text);

    font-weight: 600;
}


.green {
    background:
        var(--green);
}


.blue {
    background:
        var(--blue);
}


.orange {
    background:
        var(--orange);
}


.purple {
    background:
        var(--purple);
}


.section-content {
    flex: 1;

    min-width: 0;
}


.section-heading {
    margin-bottom: 16px;

    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}


.section-heading h2 {
    margin:
        0
        0
        3px;

    font-size:
        var(--font-size-title);

    line-height:
        var(--line-height-title);

    font-weight:
        var(--font-weight-title);
}


.section-heading p {
    margin: 0;

    color:
        var(--text-muted);

    font-size:
        var(--font-size-meta);

    line-height:
        var(--line-height-secondary);
}


.scale-note {
    padding:
        6px
        9px;

    border-radius: 7px;

    background: #eef5ff;

    color: #3267b1;

    font-size: 10px;
}


/* ============================================================
   28. DIMENSIONS
   ============================================================ */

.dimension-row,
.range-question {
    min-height: 39px;

    display: flex;
    align-items: center;
}


.dimension-row label,
.range-question label {
    width: 190px;

    font-size:
        var(--font-size-secondary);

    font-weight: 600;
}


.range-input {
    flex: 1;
}


.dimension-row output,
.range-question output,
.tradeoff-row output {
    width: 46px;

    margin-left: 12px;

    padding: 5px;

    text-align: center;

    border:
        1px solid
        #dce3ed;

    border-radius: 6px;

    background: #ffffff;

    font-size:
        var(--font-size-meta);
}


/* ============================================================
   29. CHOICE / RISK
   ============================================================ */

.choice-grid,
.risk-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 15px;
}


.choice-question,
.range-question {
    width: auto;

    margin: 0;
}


.choice-question strong {
    display: block;

    margin-bottom: 6px;

    font-size:
        var(--font-size-secondary);
}


/* ============================================================
   30. SEGMENTED CONTROL
   ============================================================ */

.segmented {
    display: flex;
}


.segmented label {
    flex: 1;
}


.segmented input {
    display: none;
}


.segmented span {
    display: block;

    margin-right: -1px;

    padding: 7px;

    text-align: center;

    border:
        1px solid
        #d8e0eb;

    font-size:
        var(--font-size-meta);

    cursor: pointer;
}


.segmented label:first-child span {
    border-radius:
        6px
        0
        0
        6px;
}


.segmented label:last-child span {
    border-radius:
        0
        6px
        6px
        0;
}


.segmented input:checked + span {
    color: #ffffff;

    border-color:
        var(--blue);

    background:
        var(--blue);
}


/* ============================================================
   31. TRADE OFF
   ============================================================ */

.tradeoff-row {
    min-height: 46px;

    display: flex;
    align-items: center;
}


.tradeoff-row > span {
    width: 170px;

    font-size:
        var(--font-size-secondary);

    font-weight: 600;
}


.tradeoff-row > span:nth-of-type(2) {
    padding-left: 14px;
}


/* ============================================================
   32. FUNCTION READY
   ============================================================ */

.function-ready {
    max-width: 1240px;

    margin:
        16px
        auto
        0;

    padding:
        17px
        20px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-color: #b9ddc5;

    background: #f8fffa;
}


.function-ready strong {
    font-size:
        var(--font-size-title);

    line-height:
        var(--line-height-title);

    font-weight:
        var(--font-weight-title);
}


.function-ready p {
    margin:
        4px
        0
        0;

    color: #5c6d82;

    font-size:
        var(--font-size-meta);

    line-height:
        var(--line-height-secondary);
}


.confidence-box {
    min-width: 210px;

    padding-left: 26px;

    border-left:
        1px solid
        #dbe8df;
}


.confidence-box span,
.confidence-box strong {
    display: block;
}


.confidence-box span {
    font-size:
        var(--font-size-meta);
}


.confidence-box strong {
    margin-top: 3px;

    color:
        var(--orange);

    font-size:
        var(--font-size-title);

    font-weight:
        var(--font-weight-title);
}


/* ============================================================
   33. FORM ACTIONS
   ============================================================ */

.form-actions {
    max-width: 1240px;

    margin:
        18px
        auto
        0;

    display: flex;
    align-items: center;
    justify-content: space-between;
}


/* ============================================================
   34. TABLET
   ============================================================ */

@media (max-width: 900px) {

    .app-sidebar {
        display: none;
    }


    .app-main {
        padding: 22px;
    }


    .app-topbar {
        display: block;
    }


    .topbar-actions {
        margin-top: 16px;
        margin-left: 0;
    }


    .form-two {
        grid-template-columns: 1fr;
    }


    .function-intro {
        display: block;
    }


    .learning-flow {
        min-width: 0;

        margin-top: 14px;
        margin-left: 0;
    }


    .choice-grid,
    .risk-grid {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   35. MOBILE
   ============================================================ */

@media (max-width: 620px) {

    .app-main {
        padding: 16px;
    }


    .app-topbar {
        margin-bottom: 20px;
    }


    .app-topbar h1 {
        font-size: 24px;
    }


    .app-topbar p {
        font-size:
            var(--font-size-page-subtitle);
    }


    .profile-content > .card {
        padding: 20px;
    }


    .status-row {
        grid-template-columns: 1fr;
    }


    .status-row > div {
        padding-top: 11px;
    }


    .engine-stats {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .engine-stats > div:nth-child(2) {
        border-right: 0;
    }


    .engine-stats > div:nth-child(-n+2) {
        border-bottom:
            1px solid
            var(--border-soft);
    }


    .settings-list > div {
        align-items: flex-start;

        gap: 14px;
    }


    .privacy-links {
        flex-direction: column;

        width: 100px;
    }


    .privacy-links .btn-secondary {
        width: 100%;
    }


    .section-heading,
    .function-ready,
    .form-actions {
        display: block;
    }


    .dimension-row,
    .tradeoff-row,
    .range-question {
        display: block;

        margin-bottom: 15px;
    }


    .dimension-row label,
    .range-question label,
    .tradeoff-row > span {
        display: block;

        width: 100%;

        margin-bottom: 6px;
    }


    .range-input {
        width: 75%;
    }


    .confidence-box {
        min-width: 0;

        margin-top: 15px;

        padding-top: 15px;
        padding-left: 0;

        border-top:
            1px solid
            #dbe8df;

        border-left: 0;
    }


    .form-actions > * {
        width: 100%;

        margin-bottom: 9px;
    }
}


/* ============================================================
   GLOBAL MOBILE FIXED HEADER + COMPACT SPACING
   ============================================================
   Em todas as views mobile mantém fixos no topo:
   - iFunction™;
   - notificações;
   - hamburger;
   - título da página.

   Ao mesmo tempo aproxima o conteúdo do título.

   Usa position: sticky em vez de fixed para evitar que o header
   tape o conteúdo e para não exigir padding artificial em cada view.

   Desktop / laptop permanece inalterado.
   ============================================================ */

@media (max-width: 850px) {

    :root {
        --app-mobile-nav-offset: 72px;
    }

    /*
    |--------------------------------------------------------------------------
    | MOBILE TOP ROW — ii / BELL / HAMBURGER
    |--------------------------------------------------------------------------
    */

    .app-main
    > .mobile-nav-row {
        position: sticky !important;

        top: 0 !important;

        z-index: 1700 !important;

        background:
            var(--background) !important;
    }


    /*
    |--------------------------------------------------------------------------
    | PAGE TITLE — FIXED BELOW MOBILE TOP ROW
    |--------------------------------------------------------------------------
    */

    .app-main
    > .app-topbar {
        position: sticky !important;

        top: var(--app-mobile-nav-offset, 72px) !important;

        z-index: 1690 !important;

        margin-bottom: 4px !important;
        padding-bottom: 8px !important;

        background:
            var(--background) !important;
    }
}


/*
|--------------------------------------------------------------------------
| SMALL MOBILE — SAME SAFE FIRST-PAINT OFFSET
|--------------------------------------------------------------------------
| The exact rendered value is published by app_header.php after layout.
|--------------------------------------------------------------------------
*/

@media (max-width: 520px) {

    :root {
        --app-mobile-nav-offset: 72px;
    }

    .app-main
    > .app-topbar {
        top: var(--app-mobile-nav-offset, 72px) !important;
    }
}


/* ============================================================
   GLOBAL MOBILE PAGE SUBTITLE
   ============================================================
   Em mobile, o título principal permanece visível e o texto
   imediatamente abaixo do título é ocultado em toda a aplicação.

   Desktop/laptop permanece inalterado.
   ============================================================ */

@media (max-width: 850px) {

    .app-topbar
    .topbar-title
    > p {
        display: none !important;
    }
}


/* ============================================================
   36. SITE FOOTER
   ============================================================ */

.site-footer {
    width:
        calc(
            100%
            +
            2
            *
            clamp(
                28px,
                3vw,
                52px
            )
        );

    min-height: 86px;

 margin:
    auto
    calc(
        -1
        *
        clamp(
            28px,
            3vw,
            52px
        )
    )
    -60px;

    padding: 0;

    border-top:
        1px solid
        #e5e8f1;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    color: #69728e;

    font-size: 14px;
    line-height: 1.5;

    text-align: center;
}


/* ============================================================
   FOOTER COMPANY INFORMATION
   ============================================================ */

.site-footer-company {
    margin-top: 2px;

    font-size:
        var(--font-size-meta);

    line-height:
        1.35;
}


.site-footer-company span,
.site-footer-company a {
    display: inline-block;

    margin-left: 2px;
    margin-right: 2px;
}


.site-footer-company a {
    color:
        var(--blue);

    text-decoration: none;

    transition:
        color 0.15s ease;
}


.site-footer-company a:hover {
    color:
        var(--blue);
}


/* ============================================================
   FOOTER ADDRESS
   ============================================================ */

.site-footer
.site-footer-company
.site-footer-address {
    font-size: 10px;
}


/* ============================================================
   FOOTER NAVIGATION
   ============================================================ */

.site-footer nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    margin-top: 8px;
}


.site-footer nav a,
.site-footer nav span {
    margin-left: 6px;
    margin-right: 6px;
}


.site-footer nav a {
    color:
        var(--blue);

    text-decoration: none;

    transition:
        color 0.15s ease;
}


.site-footer nav a:hover {
    color:
        var(--blue);
}


.site-footer nav span {
    color: #b5bfce;
}


/* ============================================================
   FOOTER MOBILE
   ============================================================ */

@media (max-width: 900px) {

    .site-footer {
        width:
            calc(
                100%
                +
                44px
            );

        margin-left: -22px;
        margin-right: -22px;
        margin-bottom: -22px;
    }
}


@media (max-width: 620px) {

    .site-footer {
        width:
            calc(
                100%
                +
                32px
            );

        min-height: auto;

        margin:
            auto
            -16px
            -16px;

        padding: 20px;

        text-align: center;
    }


    .site-footer-company {
        margin-top: 4px;

        font-size:
            var(--font-size-meta);

        line-height:
            1.5;
    }


    .site-footer
    .site-footer-company
    .site-footer-address {
        font-size: 10px;
    }


    .site-footer nav {
        display: block;

        margin-top: 8px;

        text-align: center;
    }


    .site-footer nav a,
    .site-footer nav span {
        display: inline-block;

        margin-top: 5px;
        margin-bottom: 5px;
    }
}
/* ============================================================
   IOS / IPADOS FORM FOCUS STABILITY
   ============================================================
   Safari can zoom the page when focusing a form control rendered below
   16 CSS px. Restrict this correction to WebKit touch environments so the
   current Chrome Android typography remains unchanged.
   ============================================================ */

@supports (-webkit-touch-callout: none) {

    @media (max-width: 850px) {

        input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
        select,
        textarea {
            font-size: 16px;
        }
    }
}


/* ============================================================
   GLOBAL MOBILE KEYBOARD STATE
   ============================================================
   O app_header.php deteta a abertura do teclado virtual e adiciona:

       body.mobile-keyboard-open

   Também disponibiliza:
       --app-mobile-visible-height
       --app-mobile-keyboard-height
       --app-mobile-viewport-offset-top

   Esta camada é GLOBAL e deliberadamente simples:
   - esconde o chrome superior da aplicação enquanto se escreve;
   - recupera esse espaço vertical;
   - mantém o conteúdo normal das páginas com scroll;
   - não tenta gerir cards/textarea específicos de cada view.

   Componentes com layout próprio (ex.: Chat Room) podem usar a mesma
   classe/variáveis para fazer o ajuste fino sem repetir a deteção JS.
   ============================================================ */

@media (max-width: 850px) {

    /*
    |--------------------------------------------------------------------------
    | HIDE GLOBAL MOBILE CHROME WHILE KEYBOARD IS OPEN
    |--------------------------------------------------------------------------
    |
    | A especificidade é propositadamente maior do que as regras inline do
    | app_header para garantir que o estado do teclado prevalece.
    |--------------------------------------------------------------------------
    */

    html
    body.mobile-keyboard-open
    .mobile-nav-row,

    html
    body.mobile-keyboard-open
    .app-topbar {
        display: none !important;
    }


    /*
    |--------------------------------------------------------------------------
    | MAIN APP AREA
    |--------------------------------------------------------------------------
    |
    | Remove o espaço que anteriormente pertencia ao header, mas não bloqueia
    | o scroll normal da página. Isto é importante para formulários comuns,
    | onde o browser ainda precisa de conseguir trazer o campo focado à vista.
    |--------------------------------------------------------------------------
    */

    html
    body.mobile-keyboard-open
    .app-main {
        min-height:
            var(
                --app-mobile-visible-height,
                100dvh
            ) !important;

        padding-top: 0 !important;
        padding-bottom:
            max(
                8px,
                var(--app-safe-area-bottom, env(safe-area-inset-bottom, 0px))
            ) !important;
    }


    html
    body.mobile-keyboard-open
    .app-shell {
        min-height:
            var(
                --app-mobile-visible-height,
                100dvh
            );
    }


    /*
    |--------------------------------------------------------------------------
    | FOOTER
    |--------------------------------------------------------------------------
    |
    | Normalmente o footer já não é renderizado depois do login. Esta regra
    | funciona como proteção adicional caso alguma página ainda o apresente.
    |--------------------------------------------------------------------------
    */

    html
    body.mobile-keyboard-open
    .site-footer {
        display: none !important;
    }


    /*
    |--------------------------------------------------------------------------
    | FOCUSED FIELDS
    |--------------------------------------------------------------------------
    |
    | Ajuda páginas de formulário normais a posicionar o campo focado sem o
    | colar à extremidade superior/inferior do viewport visível.
    |--------------------------------------------------------------------------
    */

    html
    body.mobile-keyboard-open
    input:focus,

    html
    body.mobile-keyboard-open
    textarea:focus,

    html
    body.mobile-keyboard-open
    select:focus,

    html
    body.mobile-keyboard-open
    [contenteditable="true"]:focus {
        scroll-margin-top: 12px;
        scroll-margin-bottom: 24px;
    }
}


/* ============================================================
   FINAL SIDEBAR COLORS
   MUST BE LAST RULES IN FILE
   ============================================================ */

/* Fundo da sidebar */

.app-sidebar {
    color: #0b1739 !important;

    background:
        linear-gradient(
            180deg,
            #f1f6fd 0%,
            #f7faff 52%,
            #eef4fc 100%
        ) !important;

    border-right:
        1px solid
        #dce7f5 !important;
}


/* ============================================================
   TODOS OS LINKS DO MENU
   ============================================================ */

.app-sidebar > a,
.app-sidebar > a:link,
.app-sidebar > a:visited,
.app-sidebar > a:hover,
.app-sidebar > a:active,
.app-sidebar > a:focus {
    color: #0b1739 !important;
}


/* ============================================================
   TEXTO DENTRO DOS LINKS
   ============================================================ */

.app-sidebar > a span,
.app-sidebar > a:link span,
.app-sidebar > a:visited span,
.app-sidebar > a:hover span,
.app-sidebar > a:active span,
.app-sidebar > a:focus span {
    color: #0b1739 !important;
}


/* ============================================================
   ESTADO NORMAL
   ============================================================ */

.app-sidebar > a {
    min-height: 48px;

    margin-bottom: 6px;
    padding: 9px 11px;

    display: flex;
    align-items: center;

    border: 1px solid transparent;
    border-radius: 10px;

    background: transparent;

    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}


/* ============================================================
   HOVER
   ============================================================ */

.app-sidebar > a:hover {
    color: #0b1739 !important;

    background:
        rgba(
            255,
            255,
            255,
            0.72
        ) !important;

    border-color:
        #dce7f5 !important;
}


/* ============================================================
   ACTIVE
   ============================================================ */

.app-sidebar > a.active {
    color: #0b1739 !important;

    background:
        #ffffff !important;

    border-color:
        #cfe0f7 !important;

    box-shadow:
        0 4px 14px
        rgba(
            23,
            105,
            232,
            0.07
        );

    font-weight: 600;
}


/* ============================================================
   TEXTO ACTIVE
   ============================================================ */

.app-sidebar > a.active span {
    color: #0b1739 !important;
}


/* ============================================================
   ÍCONES
   Estes ficam AZUIS
   ============================================================ */

.app-sidebar > a .nav-icon,
.app-sidebar > a:hover .nav-icon,
.app-sidebar > a.active .nav-icon {
    flex: 0 0 30px;

    width: 30px;
    height: 30px;

    margin-right: 11px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(
            23,
            105,
            232,
            0.18
        );

    border-radius: 50%;

    background:
        rgba(
            23,
            105,
            232,
            0.07
        ) !important;

    color:
        #1769e8 !important;
}


/* ============================================================
   ÍCONE ACTIVE
   ============================================================ */

.app-sidebar > a.active .nav-icon {
    background:
        rgba(
            23,
            105,
            232,
            0.12
        ) !important;

    color:
        #1769e8 !important;
}


/* ============================================================
   LOGOUT
   ============================================================ */

.app-sidebar > a.sidebar-logout,
.app-sidebar > a.sidebar-logout span {
    color:
        #0b1739 !important;
}


/* ============================================================
   CARDS INFERIORES
   ============================================================ */

.sidebar-learning-note,
.sidebar-unlock-note,
.sidebar-help {
    color:
        #53617d !important;

    background:
        rgba(
            255,
            255,
            255,
            0.58
        ) !important;

    border:
        1px solid
        #d7e5f5 !important;
}


/* Títulos */

.sidebar-learning-note strong,
.sidebar-unlock-note strong,
.sidebar-help strong {
    color:
        #0b1739 !important;
}


/* Texto */

.sidebar-learning-note p,
.sidebar-unlock-note p,
.sidebar-help p {
    color:
        #53617d !important;
}

/* ============================================================
   ACTIVITY — MAIN INDICATOR VALUES
   MUST REMAIN AT END OF GLOBAL APP CSS
   ============================================================
   Forces the Activity values to use the same visual scale as the
   +18% comparison value, even if an older Activity View still
   contains larger local rules.
   ============================================================ */

html body .app-main .activity-page
.activity-performance-indicator
.activity-performance-indicator-value,

html body .app-main .activity-page
.activity-performance-indicator
.activity-performance-indicator-value.text,

html body .app-main .activity-page
.activity-performance-indicator
.activity-performance-indicator-value--text,

html body .app-main .activity-page
.activity-performance-indicator
.activity-indicator-main-value,

html body .app-main .activity-page
.activity-performance-indicator
strong.activity-summary-value {
    font-family: var(--font-family-app) !important;
    font-size: 17px !important;
    line-height: 1.15 !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}

html body .app-main .activity-page
.activity-performance-indicator
.activity-performance-indicator-value small,

html body .app-main .activity-page
.activity-performance-indicator
.activity-indicator-main-value small,

html body .app-main .activity-page
.activity-performance-indicator
strong.activity-summary-value small {
    font-family: var(--font-family-app) !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
}


/* Mobile must use exactly the same value typography. */

@media (max-width: 850px) {

    html body .app-main .activity-page
    .activity-performance-indicator
    .activity-performance-indicator-value,

    html body .app-main .activity-page
    .activity-performance-indicator
    .activity-performance-indicator-value.text,

    html body .app-main .activity-page
    .activity-performance-indicator
    .activity-performance-indicator-value--text,

    html body .app-main .activity-page
    .activity-performance-indicator
    .activity-indicator-main-value,

    html body .app-main .activity-page
    .activity-performance-indicator
    strong.activity-summary-value {
        font-size: 17px !important;
        line-height: 1.15 !important;
        font-weight: 600 !important;
    }
}