:root,
html[data-theme="foc-azul"] {
    --layout-gutter: 1.5rem;
    --altura-cabecalho: 108px;
    --espaco-topo-conteudo: 2rem;
    --bg: #eff4fb;
    --bg-soft: #e6eef9;
    --surface: #ffffff;
    --surface-2: #f7faff;
    --text: #16233a;
    --text-soft: #5d6f8e;
    --primary: #1f4f9a;
    --primary-strong: #163f7d;
    --primary-soft: #e6efff;
    --border: #d4e1f7;
    --shadow: 0 22px 60px -40px rgba(13, 39, 88, 0.45);
    --hero-gradient: linear-gradient(135deg, #1f4f9a 0%, #326dc0 52%, #8db5ee 100%);
}

html[data-theme="noite-premium"] {
    --bg: #0b111e;
    --bg-soft: #131c2c;
    --surface: #151f32;
    --surface-2: #1b2840;
    --text: #f5f8ff;
    --text-soft: #a8b7d8;
    --primary: #78a7ff;
    --primary-strong: #95bbff;
    --primary-soft: #19294d;
    --border: #2a3a5b;
    --shadow: 0 30px 70px -45px rgba(0, 0, 0, 0.9);
    --hero-gradient: linear-gradient(135deg, #1b2c4f 0%, #233c73 52%, #365794 100%);
}

html[data-theme="verde-sereno"] {
    --bg: #f1f8f5;
    --bg-soft: #e7f1ec;
    --surface: #ffffff;
    --surface-2: #f8fcfa;
    --text: #1d2d2a;
    --text-soft: #5c7670;
    --primary: #2d7f71;
    --primary-strong: #23695d;
    --primary-soft: #e4f5f1;
    --border: #cde6df;
    --shadow: 0 22px 60px -42px rgba(18, 61, 54, 0.35);
    --hero-gradient: linear-gradient(135deg, #2d7f71 0%, #3f9687 50%, #8ec8bb 100%);
}

html[data-theme="lilas-elegante"] {
    --bg: #f6f3fb;
    --bg-soft: #eee8f8;
    --surface: #ffffff;
    --surface-2: #faf7ff;
    --text: #2a2240;
    --text-soft: #756892;
    --primary: #6b4fa5;
    --primary-strong: #583f8d;
    --primary-soft: #eee6fd;
    --border: #ddd0f2;
    --shadow: 0 22px 58px -42px rgba(50, 34, 86, 0.36);
    --hero-gradient: linear-gradient(135deg, #6b4fa5 0%, #8062bc 52%, #b39be0 100%);
}

html {
    font-size: 15px;
    position: relative;
    min-height: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    background: radial-gradient(circle at top right, var(--bg-soft), var(--bg));
    color: var(--text);
    font-family: "Inter", "Segoe UI", Roboto, sans-serif;
}

a {
    color: var(--primary);
}

.app-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-header {
    position: sticky;
    top: 0;
    z-index: 30;
    backdrop-filter: blur(10px);
}

.app-navbar {
    background-color: color-mix(in srgb, var(--surface) 88%, transparent);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
    min-height: var(--altura-cabecalho);
}

.app-navbar-container {
    align-items: center;
    gap: 1rem;
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
    padding-left: var(--layout-gutter);
    padding-right: var(--layout-gutter);
}

.app-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    min-height: 82px;
    text-decoration: none;
    color: var(--text);
}

.brand-logo-wrap {
    display: none;
    width: 82px;
    height: 82px;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    background-color: transparent;
    border: 0;
    overflow: hidden;
}

html.brand-assets-ready .brand-logo-wrap {
    display: inline-flex;
}

.brand-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.brand-logo-dark {
    display: none;
}

html[data-theme="noite-premium"].brand-assets-ready .brand-logo-light {
    display: none;
}

html[data-theme="noite-premium"].brand-assets-ready .brand-logo-dark {
    display: block;
}

html.brand-assets-ready .brand-icon {
    display: none;
}

.brand-icon {
    width: 82px;
    height: 82px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    color: #ffffff;
    font-weight: 700;
    font-size: 1.5rem;
    background: var(--hero-gradient);
}

.brand-text-group {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.brand-title {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.brand-subtitle {
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--text-soft);
}

.app-nav-link {
    color: var(--text-soft);
    font-weight: 500;
    border-radius: 10px;
    padding: 0.4rem 0.75rem !important;
}

.app-nav-link:hover,
.app-nav-link:focus-visible {
    color: var(--primary);
    background-color: var(--primary-soft);
}

.theme-switcher {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.header-user-summary {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.4rem 0.55rem;
    border-radius: 14px;
    border: 1px solid var(--border);
    background-color: color-mix(in srgb, var(--surface) 88%, transparent);
}

.header-user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--primary);
    background-color: var(--primary-soft);
}

.header-user-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.header-user-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
}

.header-user-role {
    font-size: 0.72rem;
    color: var(--text-soft);
}

.theme-switcher-label {
    font-size: 0.82rem;
    color: var(--text-soft);
    margin-bottom: 0;
}

.theme-selector {
    min-width: 190px;
    border-color: var(--border);
    background-color: var(--surface-2);
    color: var(--text);
}

.theme-selector:focus,
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--primary) 30%, transparent);
    border-color: var(--primary);
}

.app-content {
    flex: 1;
}

.app-content > .container-fluid {
    padding-top: var(--espaco-topo-conteudo) !important;
    padding-left: var(--layout-gutter) !important;
    padding-right: var(--layout-gutter) !important;
}

.app-main-layout {
    display: block;
    position: relative;
}

.app-sidebar {
    position: fixed;
    top: calc(var(--altura-cabecalho) + var(--espaco-topo-conteudo));
    left: var(--layout-gutter);
    width: 280px;
    padding: 1rem;
    max-height: calc(100vh - (var(--altura-cabecalho) + var(--espaco-topo-conteudo) + 1.5rem));
    overflow: hidden;
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.sidebar-title {
    margin-bottom: 0;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-soft);
}

.sidebar-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.58rem;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--primary);
    background-color: var(--primary-soft);
    border: 1px solid color-mix(in srgb, var(--primary) 24%, transparent);
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: calc(100vh - 185px);
    overflow: auto;
    padding-right: 0.35rem;
}

.sidebar-nav::-webkit-scrollbar {
    width: 8px;
}

.sidebar-nav::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 24%, transparent);
}

.sidebar-item,
.sidebar-group-header {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    text-decoration: none;
    color: var(--text-soft);
    padding: 0.62rem 0.72rem;
    border-radius: 12px;
    font-weight: 550;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.sidebar-item:hover,
.sidebar-item:focus-visible {
    background-color: var(--surface-2);
    color: var(--primary);
}

.sidebar-item.active {
    background-color: var(--primary-soft);
    color: var(--primary);
    border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
}

.sidebar-item-icon {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    line-height: 1;
    color: var(--primary);
    background-color: color-mix(in srgb, var(--primary) 14%, transparent);
}

.sidebar-group {
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    border-radius: 14px;
    background-color: color-mix(in srgb, var(--surface-2) 64%, transparent);
    overflow: hidden;
}

.sidebar-group-header {
    color: var(--text);
    font-weight: 600;
    background-color: color-mix(in srgb, var(--surface) 80%, transparent);
}

.sidebar-group-toggle {
    width: 100%;
    border: 0;
    text-align: left;
    cursor: pointer;
}

.sidebar-group-chevron {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--text-soft);
    transform: rotate(-90deg);
    transition: transform 0.2s ease;
}

.sidebar-group.expanded .sidebar-group-chevron {
    transform: rotate(0deg);
    color: var(--primary);
}

.sidebar-group.active .sidebar-group-header {
    color: var(--primary);
    border-bottom: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
}

.sidebar-group-muted {
    opacity: 0.78;
}

.sidebar-submenu {
    display: grid;
    gap: 0.3rem;
    padding: 0.45rem;
}

.sidebar-collapsible-group .sidebar-submenu {
    max-height: 0;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    transition: max-height 0.24s ease, padding 0.24s ease, opacity 0.2s ease;
}

.sidebar-collapsible-group.expanded .sidebar-submenu {
    max-height: 380px;
    opacity: 1;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}

.sidebar-subitem {
    margin-left: 1.55rem;
    display: block;
    text-decoration: none;
    color: var(--text-soft);
    border-radius: 10px;
    padding: 0.42rem 0.72rem;
    border-left: 2px solid color-mix(in srgb, var(--border) 80%, transparent);
    font-size: 0.93rem;
}

.sidebar-subitem:hover,
.sidebar-subitem:focus-visible {
    background-color: color-mix(in srgb, var(--surface) 88%, transparent);
    color: var(--primary);
}

.sidebar-subitem.active {
    border-left-color: var(--primary);
    color: var(--primary);
    background-color: color-mix(in srgb, var(--primary-soft) 70%, transparent);
    font-weight: 600;
}

.sidebar-subitem-disabled {
    pointer-events: none;
    user-select: none;
    color: color-mix(in srgb, var(--text-soft) 70%, transparent);
}

.app-page-content {
    min-width: 0;
    margin-left: calc(280px + 1.25rem);
}

.app-footer {
    border-top: 1px solid var(--border);
    padding: 1rem 0 1.25rem;
    color: var(--text-soft);
    background: color-mix(in srgb, var(--surface) 85%, transparent);
}

.app-footer a {
    text-decoration: none;
}

.surface-card {
    border: 1px solid var(--border);
    background-color: var(--surface);
    border-radius: 20px;
    box-shadow: var(--shadow);
}

.hero-card {
    border-radius: 26px;
    color: #ffffff;
    background: var(--hero-gradient);
    box-shadow: var(--shadow);
    padding: 2rem;
}

.section-title {
    font-size: 1.28rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

.chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
    background-color: var(--primary-soft);
    color: var(--primary);
    border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
}

.configuracao-bloco-suave {
    margin: 0;
    padding: 1rem;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
    background-color: color-mix(in srgb, var(--primary-soft) 35%, var(--surface));
}

.aluno-foto-perfil {
    width: 78px;
    height: 78px;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
    background-color: color-mix(in srgb, var(--primary-soft) 55%, transparent);
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-weight: 700;
    font-size: 1.5rem;
}

.aluno-foto-perfil img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.abas-aluno .nav-link,
.abas-gradus .nav-link {
    color: var(--text-soft);
    font-weight: 500;
}

.abas-aluno .nav-link.active,
.abas-gradus .nav-link.active {
    color: var(--primary-strong);
    font-weight: 700;
    border-color: color-mix(in srgb, var(--primary) 42%, transparent) color-mix(in srgb, var(--primary) 42%, transparent) var(--surface);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--primary-soft) 82%, var(--surface)) 0%,
        color-mix(in srgb, var(--primary-soft) 66%, var(--surface)) 100%);
}

.conteudo-aba-aluno,
.conteudo-aba-gradus {
    border-color: color-mix(in srgb, var(--primary) 25%, transparent) !important;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--primary-soft) 46%, var(--surface)) 0%,
        color-mix(in srgb, var(--primary-soft) 18%, var(--surface)) 48%,
        var(--surface) 100%);
    box-shadow: 0 12px 24px -24px color-mix(in srgb, var(--primary) 55%, transparent);
}


@media (max-width: 991.98px) {
    :root {
        --layout-gutter: 1rem;
        --altura-cabecalho: auto;
        --espaco-topo-conteudo: 1rem;
    }

    .brand-logo-wrap,
    .brand-icon {
        width: 62px;
        height: 62px;
    }

    .brand-title {
        font-size: 1.15rem;
    }

    .app-main-layout {
        display: block;
    }

    .app-sidebar {
        position: static;
        top: auto;
        left: auto;
        width: auto;
        max-height: none;
        margin-bottom: 1rem;
    }

    .app-page-content {
        margin-left: 0;
    }

    .sidebar-nav {
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }

    .theme-switcher {
        margin-top: 0.8rem;
    }

    .header-user-meta {
        display: none;
    }

    .brand-subtitle {
        display: none;
    }
}

/* Matriz de cores suaves para diferenciar os períodos na listagem de disciplinas.
   Cada cor é misturada com a superfície do tema atual (via color-mix), mantendo
   contraste e suavidade tanto em temas claros quanto escuros. */
.linha-periodo {
    --periodo-cor: var(--primary);
    --bs-table-bg: color-mix(in srgb, var(--periodo-cor) 17%, var(--surface));
    --bs-table-hover-bg: color-mix(in srgb, var(--periodo-cor) 26%, var(--surface));
}

.linha-periodo > td:first-child {
    box-shadow: inset 4px 0 0 0 color-mix(in srgb, var(--periodo-cor) 70%, transparent);
}

.linha-periodo .badge-periodo {
    background-color: color-mix(in srgb, var(--periodo-cor) 38%, var(--surface));
    color: var(--text);
    border: 1px solid color-mix(in srgb, var(--periodo-cor) 60%, transparent);
    font-weight: 600;
}

/* Matizes espalhados pela roda de cores: períodos vizinhos sempre contrastam. */
.linha-periodo-1 { --periodo-cor: #2f6fc4; }   /* azul */
.linha-periodo-2 { --periodo-cor: #e08a1e; }   /* âmbar */
.linha-periodo-3 { --periodo-cor: #1f9e84; }   /* teal */
.linha-periodo-4 { --periodo-cor: #c64f93; }   /* magenta */
.linha-periodo-5 { --periodo-cor: #7d9e2f; }   /* verde-oliva */
.linha-periodo-6 { --periodo-cor: #8060c8; }   /* roxo */
.linha-periodo-7 { --periodo-cor: #d9583f; }   /* coral */
.linha-periodo-8 { --periodo-cor: #2f9bb5; }   /* ciano */
.linha-periodo-9 { --periodo-cor: #a06a3c; }   /* marrom */
.linha-periodo-10 { --periodo-cor: #5566b0; }  /* índigo */

/* Linhas de subtotal por período e total geral da matriz curricular. */
.linha-subtotal-periodo {
    --bs-table-bg: color-mix(in srgb, var(--primary) 8%, var(--surface));
    --bs-table-hover-bg: color-mix(in srgb, var(--primary) 12%, var(--surface));
    color: var(--text-muted, var(--text));
}

.linha-total-geral {
    --bs-table-bg: color-mix(in srgb, var(--primary) 20%, var(--surface));
    --bs-table-hover-bg: color-mix(in srgb, var(--primary) 24%, var(--surface));
    border-top: 2px solid color-mix(in srgb, var(--primary) 55%, transparent);
}

/* Componente de tabela padrão do sistema (listagens). */
.tabela-gradus-wrap {
    border: 1px solid var(--border);
    border-radius: 0.7rem;
    overflow: hidden;
    box-shadow: 0 10px 30px -24px rgba(13, 39, 88, 0.35);
}

.tabela-gradus {
    border-collapse: separate;
    border-spacing: 0;
}

.tabela-gradus > thead > tr > th {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--primary) 14%, var(--surface)),
        color-mix(in srgb, var(--primary) 8%, var(--surface)));
    color: color-mix(in srgb, var(--primary-strong) 72%, var(--text));
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 0.9rem 0.85rem;
    border-bottom: 2px solid color-mix(in srgb, var(--primary) 32%, transparent);
    white-space: nowrap;
}

.tabela-gradus > tbody > tr > td {
    padding: 0.7rem 0.85rem;
    border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.tabela-gradus > tbody > tr:first-child > td {
    border-top: 0;
}

/* Coluna de ações padronizada no sistema */
.tabela-gradus > thead > tr > th:last-child,
.tabela-gradus > tbody > tr > td:last-child {
    text-align: right;
    white-space: nowrap;
}

.badge-status-uniforme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 8.5rem;
    text-align: center;
    white-space: nowrap;
}

/* Calendário padrão do sistema (Flatpickr) integrado às variáveis de tema.
   Renderiza igual em qualquer navegador e acompanha os temas claro/escuro. */
.flatpickr-calendar {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.7rem;
    box-shadow: 0 18px 50px -28px rgba(13, 39, 88, 0.45);
    color: var(--text);
}

.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after {
    border-bottom-color: var(--surface);
}

.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after {
    border-top-color: var(--surface);
}

.flatpickr-months,
.flatpickr-weekdays {
    background: transparent;
}

.flatpickr-months .flatpickr-month,
.flatpickr-current-month,
.flatpickr-weekday {
    color: var(--text);
    fill: var(--text);
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    color: var(--text);
    font-weight: 600;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    color: var(--text);
    fill: var(--text);
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--primary);
}

.flatpickr-day {
    color: var(--text);
    border-radius: 0.5rem;
}

.flatpickr-day:hover,
.flatpickr-day:focus {
    background: var(--primary-soft);
    border-color: var(--primary-soft);
    color: var(--text);
}

.flatpickr-day.today {
    border-color: var(--primary);
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: var(--text-soft);
    opacity: 0.55;
}

.flatpickr-calendar .numInputWrapper span:hover {
    background: var(--primary-soft);
}

/* Cards de formulário (cadastro/edição) com cabeçalho colorido por seção */
.form-card {
    border: 1px solid var(--border);
    border-radius: 16px;
    background-color: var(--surface);
    box-shadow: 0 14px 40px -30px rgba(13, 39, 88, 0.55);
    overflow: hidden;
    height: 100%;
}

.form-card-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--primary) 18%, var(--surface)),
        color-mix(in srgb, var(--primary) 4%, var(--surface)));
}

.form-card-header .form-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1rem;
    color: #ffffff;
    background: var(--primary);
    box-shadow: 0 6px 16px -8px var(--primary);
}

.form-card-header .form-card-title {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text);
}

.form-card-header .form-card-subtitle {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-soft);
}

.form-card-body {
    padding: 1.25rem;
}

.form-card--identificacao .form-card-header {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--primary) 22%, var(--surface)),
        color-mix(in srgb, var(--primary) 5%, var(--surface)));
}

.form-card--contato .form-card-header {
    background: linear-gradient(135deg,
        color-mix(in srgb, #2d9d78 22%, var(--surface)),
        color-mix(in srgb, #2d9d78 5%, var(--surface)));
}

.form-card--contato .form-card-icon {
    background: #2d9d78;
    box-shadow: 0 6px 16px -8px #2d9d78;
}

.form-card--academico .form-card-header {
    background: linear-gradient(135deg,
        color-mix(in srgb, #6b4fa5 22%, var(--surface)),
        color-mix(in srgb, #6b4fa5 5%, var(--surface)));
}

.form-card--academico .form-card-icon {
    background: #6b4fa5;
    box-shadow: 0 6px 16px -8px #6b4fa5;
}

.form-card--situacao .form-card-header {
    background: linear-gradient(135deg,
        color-mix(in srgb, #d9943a 24%, var(--surface)),
        color-mix(in srgb, #d9943a 6%, var(--surface)));
}

.form-card--situacao .form-card-icon {
    background: #d9943a;
    box-shadow: 0 6px 16px -8px #d9943a;
}

/* Lista de seleção (titulações/unidades) dentro dos cards */
.selecao-lista {
    border: 1px solid var(--border);
    border-radius: 12px;
    background-color: var(--surface-2);
    padding: 0.85rem;
    max-height: 14rem;
    overflow-y: auto;
}

.selecao-lista .form-check {
    margin-bottom: 0.35rem;
}

/* Titulações exibidas lado a lado, conforme nomenclatura do INEP */
.selecao-lista--titulacoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    max-height: none;
    overflow: visible;
}

.selecao-lista--titulacoes .form-check {
    margin-bottom: 0;
}

.selecao-lista--titulacoes .titulacao-item {
    cursor: help;
}

.app-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--surface) 70%, transparent);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.app-loading-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

.app-loading-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    padding: 1.75rem 2.25rem;
    border-radius: 16px;
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
    box-shadow: 0 18px 40px -20px color-mix(in srgb, var(--primary) 55%, transparent);
}

.app-loading-text {
    font-weight: 600;
    color: var(--text-soft);
}