:root {

    --navy: #17365d;
    --navy-dark: #102843;

    --blue: #3b82f6;
    --blue-light: #eaf2ff;

    --coral: #f26745;
    --coral-dark: #db5235;

    --cyan: #19c6e5;

    --background: #eef3f8;
    --surface: #ffffff;

    --border: #d7e0e9;

    --text: #18304a;
    --muted: #708399;

    --viewer: #17202d;
    --viewer-soft: #202b3a;
}


* {

    box-sizing: border-box;
}


body {

    margin: 0;

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

    background:
        var(--background);

    color:
        var(--text);
}


button,
select,
input {

    font: inherit;
}


button {

    cursor: pointer;
}


.app {

    width: 100%;
}


/* =========================================================
   HEADER
   ========================================================= */

.header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 24px;

    padding:
        18px 26px;

    background:
        linear-gradient(
            135deg,
            var(--navy-dark),
            var(--navy)
        );

    color: white;
}


.brand {

    display: flex;

    align-items: center;

    gap: 14px;

    min-width: 270px;
}


.logo {

    width: 48px;
    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

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

    font-weight: 800;

    letter-spacing: 1px;
}


.brand h1 {

    margin: 0;

    font-size: 22px;
}


.brand p {

    margin:
        4px 0 0;

    color:
        #bed0e5;

    font-size: 13px;
}


.warning {

    max-width: 610px;

    display: flex;

    flex-direction: column;

    gap: 3px;

    padding:
        10px 16px;

    border:
        1px solid
        rgba(
            255,
            188,
            80,
            0.55
        );

    border-radius: 8px;

    background:
        rgba(
            107,
            56,
            12,
            0.35
        );

    color:
        #ffd799;

    font-size: 12px;
}


/* =========================================================
   WORKSPACE
   ========================================================= */

.workspace {

    display: grid;

    grid-template-columns:
        minmax(
            280px,
            330px
        )
        minmax(
            0,
            1fr
        );

    gap: 16px;

    padding: 16px;

    max-width: 1700px;

    margin:
        0 auto;
}


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

.sidebar {

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 14px;
}


.panel {

    background:
        var(--surface);

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

    border-radius:
        12px;

    padding:
        16px;
}


.panel h2 {

    margin:
        0 0 16px;

    font-size:
        18px;
}


.panel h3 {

    margin:
        0 0 14px;

    font-size:
        15px;
}


.control-group {

    padding:
        14px 0;

    border-top:
        1px solid
        #e6ecf2;
}


.control-group:first-of-type {

    border-top: 0;

    padding-top: 0;
}


.control-group > label {

    display: block;

    margin-bottom:
        8px;

    font-size:
        12px;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        0.05em;
}


select {

    width: 100%;

    min-height:
        42px;

    padding:
        0 10px;

    border:
        1px solid
        #becbdd;

    border-radius:
        7px;

    background:
        white;

    color:
        var(--text);
}


.button-row {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        8px;

    margin-top:
        8px;
}


button {

    min-height:
        40px;

    padding:
        8px 12px;

    border-radius:
        7px;

    border:
        1px solid
        #c7d3e0;

    background:
        #f8fafc;

    color:
        var(--text);

    font-weight:
        600;
}


button:hover {

    filter:
        brightness(0.98);
}


button.primary {

    border-color:
        var(--coral);

    background:
        var(--coral);

    color:
        white;
}


button.primary:hover {

    background:
        var(--coral-dark);
}


.sequence-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        8px;
}


.sequence-grid button.active {

    border-color:
        var(--blue);

    background:
        var(--blue);

    color:
        white;
}


.label-line {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap:
        12px;
}


.value-badge {

    padding:
        4px 8px;

    border-radius:
        6px;

    background:
        var(--blue-light);

    color:
        #215fb2;

    font-size:
        12px;

    font-weight:
        700;
}


input[type="range"] {

    width: 100%;

    accent-color:
        var(--coral);
}


.range-labels {

    display: flex;

    justify-content:
        space-between;

    color:
        #95a3b6;

    font-size:
        10px;
}


.slider-control {

    margin:
        12px 0;
}


.slider-control .label-line {

    margin-bottom:
        4px;

    font-size:
        12px;
}


.checkbox-line {

    display: flex !important;

    align-items: center;

    gap:
        8px;

    text-transform:
        none !important;

    font-size:
        13px !important;

    letter-spacing:
        0 !important;

    margin-top:
        16px;
}


.checkbox-line input {

    width:
        18px;

    height:
        18px;
}


.actions {

    display: grid;

    gap:
        8px;

    margin-top:
        6px;
}


.info-panel dl {

    margin: 0;
}


.info-panel dl div {

    display: flex;

    justify-content:
        space-between;

    align-items:
        flex-start;

    gap:
        12px;

    padding:
        6px 0;

    border-bottom:
        1px solid
        #edf1f5;
}


.info-panel dl div:last-child {

    border-bottom: 0;
}


dt {

    color:
        var(--muted);

    font-size:
        12px;
}


dd {

    margin: 0;

    text-align:
        right;

    font-size:
        12px;

    font-weight:
        700;
}


/* =========================================================
   VIEWER
   ========================================================= */

.viewer-area {

    min-width: 0;

    background:
        var(--surface);

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

    border-radius:
        12px;

    padding:
        14px;
}


.viewer-header {

    display: flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        14px;

    margin-bottom:
        12px;
}


.viewer-header h2 {

    margin: 0;

    font-size:
        18px;
}


.viewer-header p {

    margin:
        4px 0 0;

    color:
        var(--muted);

    font-size:
        12px;
}


.viewer-tags {

    display: flex;

    gap:
        7px;

    flex-wrap:
        wrap;
}


.viewer-tags span {

    padding:
        5px 9px;

    background:
        #eef4fb;

    border:
        1px solid
        #d2deeb;

    border-radius:
        6px;

    font-size:
        11px;

    font-weight:
        700;
}


.viewer-grid {

    display: grid;

    grid-template-columns:
        minmax(
            0,
            1fr
        )
        minmax(
            220px,
            34%
        );

    gap:
        12px;
}


.image-card {

    min-width: 0;

    overflow:
        hidden;

    background:
        var(--viewer);

    border:
        1px solid
        #344155;

    border-radius:
        9px;

    color:
        white;
}


.image-card-header {

    padding:
        10px 12px;

    border-bottom:
        1px solid
        #334154;
}


.image-card-header div {

    display: flex;

    flex-direction:
        column;

    gap:
        2px;
}


.image-card-header strong {

    color:
        #8dc4ff;

    font-size:
        12px;

    letter-spacing:
        0.08em;
}


.image-card-header span {

    color:
        #8fa4bb;

    font-size:
        10px;
}


.canvas-wrapper,
.sagittal-wrapper {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    background:
        #121a25;
}


.canvas-wrapper {

    min-height:
        620px;
}


#axialCanvas {

    display: block;

    width: min(
        100%,
        700px
    );

    height: auto;

    background:
        #000;
}


.sagittal-wrapper {

    min-height:
        620px;

    padding:
        16px;
}


#sagittalImage {

    display: block;

    width: 100%;

    max-height:
        560px;

    object-fit:
        contain;
}


.slice-line {

    position:
        absolute;

    left:
        8%;

    right:
        8%;

    height:
        3px;

    top:
        50%;

    background:
        var(--cyan);

    box-shadow:
        0 0 8px
        rgba(
            25,
            198,
            229,
            0.75
        );

    pointer-events:
        none;
}


.loading {

    position:
        absolute;

    inset: 0;

    display: none;

    align-items: center;

    justify-content: center;

    background:
        rgba(
            10,
            17,
            26,
            0.74
        );

    color:
        #d7e8f8;

    font-size:
        13px;

    z-index:
        3;
}


.loading.visible {

    display: flex;
}


/* =========================================================
   VIEWER INFO
   ========================================================= */

.viewer-info {

    display: grid;

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

    gap:
        10px;

    margin-top:
        12px;

    padding:
        12px;

    background:
        #f5f8fc;

    border:
        1px solid
        #dbe4ed;

    border-radius:
        8px;
}


.viewer-info div {

    min-width: 0;
}


.info-label {

    display: block;

    color:
        var(--muted);

    font-size:
        10px;

    margin-bottom:
        3px;
}


.viewer-info strong {

    font-size:
        12px;
}


.legend {

    display: flex;

    gap:
        22px;

    flex-wrap:
        wrap;

    margin-top:
        12px;

    color:
        var(--muted);

    font-size:
        11px;
}


.legend span {

    display: flex;

    align-items: center;

    gap:
        7px;
}


.legend-red {

    width:
        12px;

    height:
        12px;

    display:
        inline-block;

    background:
        #ff4a4a;
}


.legend-cyan {

    width:
        24px;

    height:
        3px;

    display:
        inline-block;

    background:
        var(--cyan);
}


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

footer {

    padding:
        15px;

    text-align:
        center;

    color:
        #788a9d;

    font-size:
        11px;
}


/* =========================================================
   RESPONSIVO
   ========================================================= */

@media (
    max-width: 1000px
) {

    .header {

        flex-direction:
            column;

        align-items:
            flex-start;
    }


    .warning {

        max-width:
            none;
    }


    .workspace {

        grid-template-columns:
            1fr;
    }


    .viewer-grid {

        grid-template-columns:
            1fr;
    }


    .canvas-wrapper,
    .sagittal-wrapper {

        min-height:
            auto;
    }


    #sagittalImage {

        max-height:
            420px;
    }


    .viewer-info {

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

}


@media (
    max-width: 520px
) {

    .workspace {

        padding:
            8px;
    }


    .header {

        padding:
            14px;
    }


    .sequence-grid,
    .button-row {

        grid-template-columns:
            1fr;
    }


    .viewer-info {

        grid-template-columns:
            1fr 1fr;
    }

}


/* =========================================================
   AUTOR NO CABEÇALHO
   ========================================================= */

.warning-area {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-left: auto;
}


.author-header {

    min-width: 150px;

    color: #dce8f5;

    font-size: 12px;

    line-height: 1.35;

    text-align: right;

    white-space: nowrap;
}


.author-header strong {

    color: #ffffff;

    font-size: 13px;
}


@media (max-width: 1000px) {

    .warning-area {

        width: 100%;

        flex-direction: column;

        align-items: stretch;

        margin-left: 0;
    }


    .author-header {

        text-align: left;
    }

}


/* EXERCICIO_VISIONMR_CSS */

.exercise-section {

    max-width: 1700px;

    margin:
        0 auto 20px;

    padding:
        0 16px;
}


.exercise-header {

    display: flex;

    justify-content:
        space-between;

    align-items:
        flex-start;

    gap:
        20px;

    margin-bottom:
        12px;
}


.exercise-header h2 {

    margin:
        0 0 5px;

    color:
        var(--text);

    font-size:
        20px;
}


.exercise-header p {

    margin: 0;

    color:
        var(--muted);

    font-size:
        13px;
}


.score-card {

    display: flex;

    flex-wrap: wrap;

    gap:
        8px;

    justify-content:
        flex-end;
}


.score-card span {

    padding:
        7px 10px;

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

    border-radius:
        7px;

    background:
        var(--surface);

    color:
        var(--muted);

    font-size:
        12px;
}


.score-card strong {

    color:
        var(--text);
}


.question-card {

    padding:
        20px;

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

    border-radius:
        12px;

    background:
        var(--surface);
}


.question-card h3 {

    margin:
        0 0 16px;

    font-size:
        17px;
}


.answer-options {

    display: grid;

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

    gap:
        10px;
}


.answer-options label {

    display: flex;

    align-items: center;

    gap:
        8px;

    min-height:
        48px;

    padding:
        10px 12px;

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

    border-radius:
        8px;

    background:
        #f8fafc;

    cursor:
        pointer;

    font-size:
        13px;
}


.answer-options label:hover {

    border-color:
        var(--blue);
}


.answer-options input {

    width:
        18px;

    height:
        18px;

    accent-color:
        var(--blue);
}


.exercise-actions {

    display: flex;

    flex-wrap: wrap;

    gap:
        9px;

    margin-top:
        16px;
}


.answer-feedback {

    margin-top:
        14px;

    padding:
        12px 14px;

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

    border-radius:
        8px;

    background:
        #f5f8fc;

    color:
        var(--text);

    font-size:
        13px;

    min-height:
        44px;
}


.answer-feedback.correct {

    border-color:
        #79b98b;

    background:
        #edf8f0;

    color:
        #246238;
}


.answer-feedback.incorrect {

    border-color:
        #e69a83;

    background:
        #fff2ed;

    color:
        #9d4027;
}


.answer-feedback.reveal {

    border-color:
        #8fb7e8;

    background:
        #eef5ff;

    color:
        #24558f;
}


@media (
    max-width: 900px
) {

    .exercise-header {

        flex-direction:
            column;
    }


    .score-card {

        justify-content:
            flex-start;
    }


    .answer-options {

        grid-template-columns:
            1fr 1fr;
    }

}


@media (
    max-width: 520px
) {

    .answer-options {

        grid-template-columns:
            1fr;
    }

}



/* CONTROLES_SESSAO_CSS */

.session-controls {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-left: 12px;
}


.session-button {

    padding: 8px 14px;

    border: 1px solid #58769a;

    border-radius: 7px;

    background: transparent;

    color: #e7eef7;

    font-size: 12px;

    cursor: pointer;
}


.session-button:hover {

    background: rgba(
        255,
        255,
        255,
        0.08
    );
}


.help-modal {

    display: none;

    position: fixed;

    inset: 0;

    z-index: 9999;

    background: rgba(
        0,
        0,
        0,
        0.70
    );

    align-items: center;

    justify-content: center;

    padding: 20px;
}


.help-modal.active {

    display: flex;
}


.help-modal-content {

    position: relative;

    width: min(
        680px,
        95vw
    );

    max-height: 85vh;

    overflow-y: auto;

    padding: 28px;

    border-radius: 12px;

    background: #ffffff;

    color: #1c2733;

    box-shadow:
        0 20px 60px
        rgba(
            0,
            0,
            0,
            0.35
        );
}


.help-modal-content h2 {

    margin-top: 0;

    margin-bottom: 20px;

    font-size: 22px;
}


.help-modal-content ol {

    padding-left: 24px;

    line-height: 1.65;
}


.help-modal-content li {

    margin-bottom: 8px;
}


.help-close {

    position: absolute;

    top: 10px;

    right: 14px;

    border: none;

    background: transparent;

    font-size: 30px;

    cursor: pointer;

    color: #425466;
}


@media (
    max-width: 900px
) {

    .session-controls {

        width: 100%;

        margin-left: 0;

        margin-top: 10px;

        flex-wrap: wrap;
    }

}



/* AJUSTE AUTOR PARA O LADO DIREITO */

.author-header {
    margin-left: auto !important;
    text-align: right !important;
    min-width: 150px;
}

.warning-area {
    width: 100%;
    display: flex;
    align-items: center;
}



/* POSICIONAR AUTOR MAIS À DIREITA */

.warning-area {
    display: flex !important;
    align-items: center !important;
    flex: 1 !important;
}

.author-header {
    margin-left: auto !important;
    margin-right: 28px !important;
    text-align: right !important;
    min-width: 150px !important;
}

.session-controls {
    margin-left: 0 !important;
}



/* POSIÇÃO FINAL DO AUTOR */

.session-controls {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    margin-left: auto !important;
}

.author-header {
    margin: 0 !important;
    min-width: 145px !important;
    text-align: right !important;
    color: #ffffff !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
}

.author-header strong {
    color: #ffffff !important;
    font-size: 14px !important;
}



/* POSIÇÃO FINAL DO AUTOR */

.session-controls {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    margin-left: auto !important;
}

.author-header {
    margin: 0 !important;
    min-width: 145px !important;
    text-align: right !important;
    color: #ffffff !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
}

.author-header strong {
    color: #ffffff !important;
    font-size: 14px !important;
}