/* Portal do Aluno - Uni+
   Camada propria sobre o Bootstrap 5. Mobile-first: o padrao � o celular, as media queries acrescentam o que so faz sentido em tela grande. */

/* ----------------------------------------------------------------- tokens */
:root {
    --cor-fundo:            #f4f7fc;
    --cor-superficie:       #ffffff;
    --cor-borda:            #e5eaf3;
    --cor-borda-forte:      #d3dbe8;

    --cor-texto:            #1e293b;
    --cor-texto-suave:      #64748b;
    --cor-texto-fraco:      #94a3b8;
    --cor-texto-placeholder: #aab7c7;

    --cor-primaria:         #2563eb;
    --cor-primaria-escura:  #1d4ed8;
    --cor-primaria-clara:   #eff4ff;

    --cor-sucesso:          #16a34a;
    --cor-sucesso-clara:    #ecfdf3;
    --cor-sucesso-escura:   #15803d;
    --cor-alerta:           #d97706;
    --cor-alerta-clara:     #fffaeb;
    --cor-perigo:           #dc2626;
    --cor-perigo-clara:     #fef2f2;
    --cor-info:             #7c3aed;
    --cor-info-clara:       #f5f3ff;

    --raio:                 14px;
    --raio-pequeno:         10px;
    --raio-pilula:          999px;

    --sombra:               0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
    --sombra-elevada:       0 4px 12px rgba(16, 24, 40, .08);

    --esp-1: .25rem;  --esp-2: .5rem;   --esp-3: .75rem;
    --esp-4: 1rem;    --esp-5: 1.5rem;  --esp-6: 2rem;

    --largura-menu:         264px;
    --altura-topo:          60px;

    --fonte: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/*	Placeholder num tom próprio, mais fraco que o texto auxiliar: no tom do texto o campo
	parece preenchido. O opacity zera o padrão do Firefox, que aplica 0.54 por conta própria.	*/
::placeholder {
	color: var(--cor-texto-placeholder);
	opacity: 1;
}

/* ------------------------------------------------------------------- base */
body {
    margin: 0;
    background: var(--cor-fundo);
    color: var(--cor-texto);
    font-family: var(--fonte);
    font-size: .95rem;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--cor-primaria); text-decoration: none; }
a:hover { color: var(--cor-primaria-escura); text-decoration: underline; }

h1, h2, h3, h4, h5 { color: var(--cor-texto); font-weight: 600; margin: 0; }

.texto-suave { color: var(--cor-texto-suave); }
.texto-fraco { color: var(--cor-texto-fraco); }

/* ------------------------------------------------------------ estrutura */
.portal { min-height: 100vh; }

.portal-conteudo {
    padding: var(--esp-4);
    padding-top: calc(var(--altura-topo) + var(--esp-4));
}

/* Alvo de link com # (ex: perfil.php#documentos) parava embaixo do .topo, que e fixed no celular.
   Vale para qualquer id do conteudo, para nao ter que lembrar disso a cada ancora nova. */
.portal-conteudo [id] { scroll-margin-top: calc(var(--altura-topo) + var(--esp-3)); }

@media (min-width: 992px) {
    .portal-conteudo {
        margin-left: var(--largura-menu);
        padding: var(--esp-5) var(--esp-6);
        padding-top: var(--esp-5);
    }
    /* no desktop o .topo some, entao so' sobra a folga */
    .portal-conteudo [id] { scroll-margin-top: var(--esp-3); }
}

/* ---------------------------------------------------------------- topo */
/* No celular o topo � fixo e carrega o menu; no desktop ele so existe para a faixa de matriz, que fica dentro do proprio conteudo. */
.topo {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1030;
    height: var(--altura-topo);
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    padding: 0 var(--esp-4);
    background: var(--cor-superficie);
    border-bottom: 1px solid var(--cor-borda);
}

.topo-marca {
    display: flex;
    align-items: center;
    gap: var(--esp-2);
    font-weight: 600;
    color: var(--cor-texto);
    text-decoration: none;
}
.topo-marca:hover { text-decoration: none; color: var(--cor-texto); }
.topo-marca img { height: 48px; }

.botao-menu {
    border: 1px solid var(--cor-borda);
    background: var(--cor-superficie);
    border-radius: var(--raio-pequeno);
    width: 38px; height: 38px;
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--cor-texto-suave);
}
.botao-sair:hover { border-color: var(--cor-perigo); color: var(--cor-perigo); background: var(--cor-perigo-clara); }

.acoes-topo { display: flex; align-items: center; gap: var(--esp-2); }

@media (min-width: 992px) {
    .topo { display: none; }
}

/* --------------------------------------------------------------- menu */
.menu {
    width: var(--largura-menu);
    background: var(--cor-superficie);
    border-right: 1px solid var(--cor-borda);
    display: flex;
    flex-direction: column;
}

@media (min-width: 992px) {
    .menu {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        z-index: 1020;
        overflow-y: auto;
    }
}

.menu-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-2);
    padding-right: var(--esp-3);
}

.menu-marca {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    padding: var(--esp-5) var(--esp-4);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--cor-texto);
    text-decoration: none;
}
.menu-marca:hover { text-decoration: none; color: var(--cor-texto); }
.menu-marca img { height: 100px; max-width: 100%; }

.menu-lista { list-style: none; margin: 0; padding: 0 var(--esp-3); flex: 1; }

.menu-item {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    padding: .6rem var(--esp-3);
    margin-bottom: 2px;
    border-radius: var(--raio-pequeno);
    color: var(--cor-texto-suave);
    font-weight: 500;
    text-decoration: none;
}
.menu-item:hover { background: var(--cor-fundo); color: var(--cor-texto); text-decoration: none; }
.menu-item.ativo { background: var(--cor-primaria-clara); color: var(--cor-primaria); font-weight: 600; }
.menu-item .icone { width: 20px; text-align: center; flex-shrink: 0; }

/* grupo que abre e fecha */
.menu-grupo > .menu-item { justify-content: space-between; }
/*  o titulo do grupo vai embrulhado num <span> para o space-between empurrar so a seta - e ali dentro
    o icone volta a ser inline, perde a largura fixa e o texto sobe 12px a esquerda do dos itens
    simples. Repetindo o flex aqui, os dois tipos de item alinham na mesma coluna. */
.menu-grupo > .menu-item > span:first-child { display: flex; align-items: center; gap: var(--esp-3); }
.menu-grupo .seta { margin-left: auto; transition: transform .15s ease; font-size: .7rem; }
.menu-grupo > .menu-item[aria-expanded="true"] .seta { transform: rotate(180deg); }

.menu-sublista { list-style: none; margin: 0 0 var(--esp-2); padding: 0; }
.menu-subitem {
    display: block;
    padding: .4rem var(--esp-3) .4rem 3.1rem;
    border-radius: var(--raio-pequeno);
    color: var(--cor-texto-suave);
    font-size: .9rem;
    text-decoration: none;
}
.menu-subitem:hover { background: var(--cor-fundo); color: var(--cor-texto); text-decoration: none; }
.menu-subitem.ativo { color: var(--cor-primaria); font-weight: 600; }
.menu-subitem { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-2); }

/* avisa que o item sai do portal (FEPO, pesquisa institucional) antes do clique */
.menu-subitem .menu-externo { font-size: .75rem; opacity: .55; flex: none; }

/* Balao de novidade no menu: e' o que faz o aluno saber que chegou mensagem sem abrir a tela.
   Repetido no grupo, porque ele nasce fechado e esconderia o aviso do item. */
.menu-direita { display: inline-flex; align-items: center; gap: var(--esp-2); margin-left: auto; }
.menu-direita .seta { margin-left: 0; }
.menu-contador {
    min-width: 20px; height: 20px;
    padding: 0 6px;
    border-radius: var(--raio-pilula);
    background: var(--cor-primaria);
    color: #fff;
    font-size: .7rem; font-weight: 700; line-height: 20px;
    text-align: center;
    flex: none;
}

.menu-ajuda {
    margin: var(--esp-4) var(--esp-3);
    padding: var(--esp-4);
    background: var(--cor-fundo);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    font-size: .85rem;
    color: var(--cor-texto-suave);
}

/* bloco do usuario, no pe do menu (o .menu e flex-column e a lista tem flex:1, entao ele encosta embaixo) */
.menu-usuario {
    border-top: 1px solid var(--cor-borda);
    padding: var(--esp-3) var(--esp-4);
    display: flex;
    align-items: center;
    gap: var(--esp-2);
}

.menu-usuario-dados { display: flex; align-items: center; gap: var(--esp-2); min-width: 0; flex: 1; }

.menu-usuario-avatar {
    width: 34px; height: 34px; flex-shrink: 0;
    border-radius: var(--raio-pilula);
    background: var(--cor-primaria-clara);
    color: var(--cor-primaria);
    display: flex; align-items: center; justify-content: center;
}

.menu-usuario-texto { min-width: 0; }
.menu-usuario-texto .nome {
    font-size: .85rem; font-weight: 600;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.menu-usuario-texto .matricula { font-size: .75rem; color: var(--cor-texto-suave); }

.menu-usuario-sair {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: var(--esp-1);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-pequeno);
    padding: .3rem .6rem;
    font-size: .8rem;
    color: var(--cor-texto-suave);
}
.menu-usuario-sair:hover { border-color: var(--cor-perigo); color: var(--cor-perigo); text-decoration: none; background: var(--cor-perigo-clara); }

/* ------------------------------------------------------- faixa da matriz */
.faixa-topo {
    display: flex;
    flex-direction: column;
    gap: var(--esp-4);
    margin-bottom: var(--esp-5);
}

@media (min-width: 992px) {
    .faixa-topo { flex-direction: row; align-items: flex-start; justify-content: space-between; }
}

.saudacao h1 { font-size: 1.6rem; }
.saudacao p { margin: var(--esp-1) 0 0; color: var(--cor-texto-suave); }

/* --- avisos da home: faixa entre a saudacao e os cartoes (layout/avisos.php) --- */
.aviso {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    flex-wrap: wrap;
    border: 1px solid transparent;
    border-radius: var(--raio);
    padding: var(--esp-3) var(--esp-4);
    margin-bottom: var(--esp-4);
}
/* fundo e' o token; texto e borda sao um tom mais escuro que --cor-alerta/--cor-info, que
   sozinhos nao dao contraste suficiente para texto corrido (mesma escolha da .faixa-prototipo) */
.aviso-alerta { background: var(--cor-alerta-clara); border-color: #fde68a; color: #92400e; }
.aviso-info   { background: var(--cor-info-clara);   border-color: #ddd6fe; color: #5b21b6; }

/* no login o cartao e' centralizado e estreito: o aviso volta a alinhar a esquerda e nao
   precisa da largura minima do texto, que so' o faria quebrar em duas linhas a toa */
.aviso-login { text-align: left; margin-top: var(--esp-4); margin-bottom: 0; }
.aviso-login .aviso-texto { min-width: 0; }

.aviso-icone { font-size: 1.4rem; flex-shrink: 0; }
.aviso-texto { flex: 1; min-width: 12rem; font-size: .9rem; }
.aviso-texto strong { display: block; }
.aviso-acao { flex-shrink: 0; }

/* escondido de saida: o portal.js revela o que o aluno ainda nao dispensou, e um aviso
   ja dispensado nao pode piscar na tela antes de sumir */
.aviso-dispensavel { display: none; }

.aviso-fechar {
    background: none;
    border: 0;
    color: inherit;
    opacity: .6;
    padding: 0 var(--esp-1);
    line-height: 1;
}
.aviso-fechar:hover { opacity: 1; }

.seletor-matriz {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    padding: var(--esp-3) var(--esp-4);
    box-shadow: var(--sombra);
    width: 100%;
}
@media (min-width: 992px) {
    .seletor-matriz { width: 340px; }      /* largura fixa: o nome do curso nao empurra o layout */
}
.seletor-matriz label { font-size: .75rem; color: var(--cor-texto-suave); display: block; margin-bottom: var(--esp-1); }

.seletor-matriz .dropdown { width: 100%; }

.seletor-matriz-botao {
    display: flex;
    align-items: center;
    gap: var(--esp-2);
    width: 100%;
    border: 1px solid var(--cor-borda-forte);
    border-radius: var(--raio-pequeno);
    background: var(--cor-superficie);
    color: var(--cor-texto);
    padding: .4rem var(--esp-3);
    text-align: left;
}
.seletor-matriz-botao:hover { border-color: var(--cor-primaria); }
/* o truncamento mora aqui: uma linha so, reticencias no fim, nome inteiro no title */
.seletor-matriz-botao .rotulo {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.seletor-matriz-botao .bi { flex-shrink: 0; font-size: .75rem; color: var(--cor-texto-suave); }

.seletor-matriz-unica {
    padding: .4rem 0 0;
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* a lista aberta pode ser mais larga que o botao e quebrar linha - ali o nome aparece inteiro */
.seletor-matriz-lista {
    min-width: 100%;
    max-width: min(28rem, calc(100vw - 2rem));
    border-color: var(--cor-borda);
    box-shadow: var(--sombra-elevada);
}
.seletor-matriz-lista .dropdown-item {
    white-space: normal;
    word-break: break-word;
    padding: .45rem var(--esp-4);
    font-size: .9rem;
}
.seletor-matriz-lista .dropdown-item.active { background: var(--cor-primaria-clara); color: var(--cor-primaria); font-weight: 600; }

/*  aviso de parcela vencida: sem ele, um cartão que só lista "a vencer" faz o aluno com atraso concluir que está tudo em dia  */
.aviso-vencido {
    display: flex;
    align-items: flex-start;
    gap: var(--esp-3);
    background: var(--cor-perigo-clara);
    border: 1px solid #fecaca;
    color: #991b1b;
    border-radius: var(--raio-pequeno);
    padding: var(--esp-3);
    margin-bottom: var(--esp-4);
    font-size: .85rem;
}
.aviso-vencido .bi { font-size: 1.1rem; flex-shrink: 0; }

/* --------------------------------------------------------- barra de filtros */
/*  Filtros da tela (semestre, disciplina, situacao). Fica acima da lista  */
.barra-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--esp-2) var(--esp-3);
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: var(--esp-3) var(--esp-4);
    margin-bottom: var(--esp-4);
}
.barra-filtros label { font-size: .8rem; color: var(--cor-texto-suave); margin: 0 !important; }
.barra-filtros select { width: auto; min-width: 140px; }
/* modo "focado": a barra deixa de filtrar e vira a volta para a listagem inteira */
.filtro-voltar { font-size: .85rem; }
.filtro-foco {
    font-size: .82rem; color: var(--cor-texto-suave);
    padding-left: var(--esp-3);
    border-left: 1px solid var(--cor-borda);
}

@media (max-width: 575.98px) {
    .barra-filtros { align-items: stretch; flex-direction: column; }
    .barra-filtros select { width: 100%; }
}

/* ------------------------------------------------------------- cartoes */
.cartao {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: var(--esp-4);
    height: 100%;
}

.cartao-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-3);
    margin-bottom: var(--esp-4);
}
.cartao-cabecalho h2 { font-size: 1.05rem; }
.cartao-cabecalho .contador { color: var(--cor-texto-fraco); font-weight: 400; }
.cartao-cabecalho a { font-size: .85rem; }

/* disciplina */
.disciplina { border: 1px solid var(--cor-borda); border-radius: var(--raio); padding: var(--esp-4); height: 100%; }
.disciplina-topo { display: flex; gap: var(--esp-3); align-items: center; margin-bottom: var(--esp-3); }
.disciplina-sigla {
    width: 52px; height: 52px; flex-shrink: 0;
    border-radius: var(--raio-pequeno);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1rem;
    background: var(--cor-disciplina-clara, var(--cor-primaria-clara));
    color: var(--cor-disciplina, var(--cor-primaria));
}

/*  Cada disciplina tem sua cor, derivada do id (ver buscarCorDisciplina): a mesma disciplina
    aparece sempre na mesma cor, e é isso que faz o aluno reconhecer o cartão de relance.
    A cor pinta a sigla, a barra de progresso e um fio no topo do cartão - o resto continua
    neutro, senão a tela vira um mostruário.  */
.disciplina-cor-1 { --cor-disciplina: #2563eb; --cor-disciplina-clara: #eff4ff; }
.disciplina-cor-2 { --cor-disciplina: #16a34a; --cor-disciplina-clara: #ecfdf3; }
.disciplina-cor-3 { --cor-disciplina: #7c3aed; --cor-disciplina-clara: #f5f3ff; }
.disciplina-cor-4 { --cor-disciplina: #d97706; --cor-disciplina-clara: #fffaeb; }
.disciplina-cor-5 { --cor-disciplina: #db2777; --cor-disciplina-clara: #fdf2f8; }
.disciplina-cor-6 { --cor-disciplina: #0d9488; --cor-disciplina-clara: #f0fdfa; }
.disciplina-cor-7 { --cor-disciplina: #ea580c; --cor-disciplina-clara: #fff7ed; }
.disciplina-cor-8 { --cor-disciplina: #4f46e5; --cor-disciplina-clara: #eef2ff; }

.disciplina[class*="disciplina-cor-"] { border-top: 3px solid var(--cor-disciplina); }
.disciplina .progresso-preenchido { background: var(--cor-disciplina, var(--cor-primaria)); }
.disciplina-nome { font-weight: 600; line-height: 1.25; }
.disciplina-professor { font-size: .85rem; color: var(--cor-texto-suave); }
.disciplina-proxima { font-size: .85rem; margin-top: var(--esp-3); }
.disciplina-proxima span { display: block; color: var(--cor-texto-suave); }
/* trilha percorrida com obrigatório sem resposta: o mesmo âmbar das pendências no cabeçalho da trilha */
.disciplina-pendente .progresso-preenchido { background: var(--cor-alerta); }
.disciplina-pendencia { font-size: .85rem; margin-top: var(--esp-2); padding: var(--esp-2) var(--esp-3); border-radius: var(--raio-pequeno); background: var(--cor-alerta-clara); color: #92400e; }

/* barra de progresso */
.progresso { display: flex; align-items: center; gap: var(--esp-3); }
.progresso-trilho { flex: 1; height: 7px; border-radius: var(--raio-pilula); background: var(--cor-borda); overflow: hidden; }
.progresso-preenchido { height: 100%; border-radius: var(--raio-pilula); background: var(--cor-primaria); }
.progresso-valor { font-size: .85rem; font-weight: 600; color: var(--cor-texto-suave); }

/* etiquetas */
.etiqueta {
    display: inline-block;
    padding: .15rem .6rem;
    border-radius: var(--raio-pilula);
    font-size: .75rem;
    font-weight: 600;
}
.etiqueta-sucesso { background: var(--cor-sucesso-clara); color: var(--cor-sucesso); }
/*  verde mais fechado, para distinguir de .etiqueta-sucesso quando as duas aparecem na mesma lista (é o caso de "Cursando" e "Aprovado" na situação da disciplina)  */
.etiqueta-sucesso-forte { background: #d4f4e0; color: var(--cor-sucesso-escura); }
.etiqueta-alerta  { background: var(--cor-alerta-clara);  color: var(--cor-alerta); }
.etiqueta-perigo  { background: var(--cor-perigo-clara);  color: var(--cor-perigo); }
.etiqueta-info    { background: var(--cor-info-clara);    color: var(--cor-info); }
.etiqueta-neutra  { background: var(--cor-fundo);         color: var(--cor-texto-suave); }

/* lista de itens (compromissos, pendencias, avisos) */
.lista { list-style: none; margin: 0; padding: 0; }
.lista > li {
    display: flex;
    gap: var(--esp-3);
    align-items: flex-start;
    padding: var(--esp-3) 0;
    border-bottom: 1px solid var(--cor-borda);
}
.lista > li:last-child { border-bottom: 0; padding-bottom: 0; }
.lista > li:first-child { padding-top: 0; }

.data-bloco {
    width: 46px; flex-shrink: 0;
    text-align: center;
    background: var(--cor-fundo);
    border-radius: var(--raio-pequeno);
    padding: var(--esp-2) 0;
    line-height: 1.1;
}
.data-bloco .dia { display: block; font-size: 1.05rem; font-weight: 700; }
.data-bloco .mes { display: block; font-size: .7rem; text-transform: uppercase; color: var(--cor-texto-suave); }

.item-titulo { font-weight: 600; }
.item-detalhe { font-size: .85rem; color: var(--cor-texto-suave); }

.icone-redondo {
    width: 36px; height: 36px; flex-shrink: 0;
    border-radius: var(--raio-pequeno);
    display: flex; align-items: center; justify-content: center;
}

/* atalhos de servico */
.atalhos { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--esp-3); }
@media (min-width: 576px) and (max-width: 767.98px) { .atalhos { grid-template-columns: repeat(3, 1fr); } }

/*  A partir do tablet o cartao dos atalhos vai para a coluna estreita da home: eles empilham numa
    coluna so e dividem entre si a altura do cartao, que acompanha a do mural ao lado. Sem o
    grid-auto-rows: 1fr sobraria um vao embaixo, com quatro atalhos espremidos no topo. */
@media (min-width: 768px) {
    .atalhos { grid-template-columns: 1fr; }
    .cartao-atalhos { display: flex; flex-direction: column; }
    .cartao-atalhos .atalhos { flex: 1; grid-auto-rows: 1fr; }
}

.atalho {
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    padding: var(--esp-4) var(--esp-2);
    text-align: center;
    color: var(--cor-texto-suave);
    font-size: .8rem;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.atalho:hover { border-color: var(--cor-primaria); color: var(--cor-primaria); text-decoration: none; }
.atalho .icone { display: block; font-size: 1.3rem; margin-bottom: var(--esp-2); }

/* filtros do card "O que vem pela frente" */
.chips { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-bottom: var(--esp-4); }

/* a agenda pode trazer dezenas de itens; sem limite o cartao empurra o resto da home para baixo */
.listaAgenda { max-height: 26rem; overflow-y: auto; padding-right: var(--esp-2); }

/* recado longo no mural esticava a linha inteira da home, levando junto os atalhos e o financeiro */
.listaMuralHome, .listaFinanceiroHome { max-height: 22rem; overflow-y: auto; padding-right: var(--esp-2); }
.chip {
    border: 1px solid var(--cor-borda-forte);
    background: var(--cor-superficie);
    border-radius: var(--raio-pilula);
    padding: .2rem .8rem;
    font-size: .8rem;
    color: var(--cor-texto-suave);
    cursor: pointer;
}
.chip:hover { border-color: var(--cor-primaria); color: var(--cor-primaria); }
.chip.ativo { background: var(--cor-primaria); border-color: var(--cor-primaria); color: #fff; }

/* destaque institucional (banner ou video da IES) */
.destaque-midia {
    position: relative;
    width: 100%;
    padding-top: 56.25%;              /* 16:9 */
    border-radius: var(--raio-pequeno);
    overflow: hidden;
    background: var(--cor-fundo);
    margin-bottom: var(--esp-3);
}
.destaque-midia iframe, .destaque-midia img {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    border: 0;
    object-fit: cover;
}

/* estado vazio / em desenvolvimento */
.estado-vazio {
    text-align: center;
    padding: var(--esp-6) var(--esp-4);
    color: var(--cor-texto-suave);
}
.estado-vazio .icone { font-size: 2.2rem; color: var(--cor-texto-fraco); margin-bottom: var(--esp-3); }
.estado-vazio h3 { font-size: 1.05rem; margin-bottom: var(--esp-2); }

/* retorno do processaForms: a mensagem depois de enviar um formulario. O processaForms.js troca a
   classe conforme o tipo do retorno e chama closeAlert() alguns segundos depois. */
.retornoForm {
    display: none;
    border-radius: var(--raio-pequeno);
    padding: var(--esp-3) var(--esp-4);
    margin-bottom: var(--esp-4);
    font-size: .9rem;
    border: 1px solid transparent;
}
.retornoForm.alert-success { display: block; background: var(--cor-sucesso-clara); border-color: var(--cor-sucesso); color: #166534; }
.retornoForm.alert-warning { display: block; background: var(--cor-alerta-clara); border-color: var(--cor-alerta); color: #92400e; }
.retornoForm.alert-error   { display: block; background: var(--cor-perigo-clara); border-color: var(--cor-perigo); color: #991b1b; }

/* sino de notificacoes */
.sino { position: relative; }
.sino .marcador {
    position: absolute; top: -4px; right: -4px;
    min-width: 18px; height: 18px;
    border-radius: var(--raio-pilula);
    background: var(--cor-primaria);
    color: #fff;
    font-size: .65rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    padding: 0 4px;
}
.sino[disabled] { opacity: .55; }

/* painel do sino: as ultimas notificacoes ali mesmo, sem sair da tela. A lista rola por dentro para
   o cabecalho e o rodape ficarem sempre a` vista, e os itens vao de ponta a ponta.
   Todas as pecas sao escritas dentro de .painel-notificacoes: os nomes curtos (topo, lista, rodape)
   so dizem a que pertencem por causa desse escopo. */
.painel-notificacoes {
    width: 450px; max-width: calc(100vw - var(--esp-4) * 2);
    padding: 0;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra-elevada);
    overflow: hidden;                 /* o fundo do cabecalho acompanha o canto arredondado */
}
.painel-notificacoes .painel-topo {
    display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3);
    flex-wrap: wrap;
    padding: var(--esp-3) var(--esp-4);
    /* um tom acima do fundo das nao lidas, senao cabecalho e lista viram a mesma faixa azul */
    background: #e4ecfb;
    border-bottom: 1px solid var(--cor-borda);
}
.painel-notificacoes .painel-topo strong { text-transform: uppercase; letter-spacing: .04em; font-size: .85rem; }
.painel-notificacoes .painel-chips { display: flex; gap: var(--esp-2); margin: 0; }
.painel-notificacoes .painel-chips .chip { padding: .1rem .7rem; font-size: .75rem; }

.painel-notificacoes .painel-lista { max-height: 60vh; overflow-y: auto; padding: 0; }
.painel-notificacoes .painel-lista > li { padding: var(--esp-3) var(--esp-4); }
.painel-notificacoes .painel-lista > li[data-id] { cursor: pointer; }
.painel-notificacoes .painel-lista > li[data-id]:hover { background: var(--cor-fundo); }
.painel-notificacoes .painel-lista > li.nao-lida:hover { background: #e3ecfd; }
.painel-notificacoes .item-titulo { display: block; }
.painel-notificacoes .item-detalhe .bi-clock { font-size: .75rem; margin-right: 2px; }
/* o texto do aviso cabe em duas linhas: o painel e' a chamada, a tela cheia tem o conteudo */
.painel-notificacoes .texto-curto {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; overflow-wrap: anywhere;
}
.painel-notificacoes .painel-vazio {
    display: block; padding: var(--esp-5) var(--esp-4);
    color: var(--cor-texto-suave); font-size: .875rem; text-align: center;
}

/* marcar como lida e excluir sem abrir o aviso: e' o motivo de o item nao ser so um link */
.painel-notificacoes .painel-acoes { flex: none; display: flex; flex-direction: column; gap: var(--esp-1); }
.painel-notificacoes .painel-acao {
    border: 0; background: transparent; padding: 0;
    width: 26px; height: 26px; line-height: 1;
    border-radius: var(--raio-pilula);
    font-size: 1.05rem; opacity: .5;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.painel-notificacoes .painel-acao:hover         { opacity: 1; }
.painel-notificacoes .painel-acao-lida          { color: var(--cor-sucesso); }
.painel-notificacoes .painel-acao-lida:hover    { background: var(--cor-sucesso-clara); }
.painel-notificacoes .painel-acao-excluir       { color: var(--cor-perigo); }
.painel-notificacoes .painel-acao-excluir:hover { background: var(--cor-perigo-clara); }

.painel-notificacoes .painel-rodape {
    display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3);
    padding: var(--esp-2) var(--esp-3);
    border-top: 1px solid var(--cor-borda);
}
/* no rodape as duas acoes sao texto, nao icone - por isso .painel-link, e nao .painel-acao */
.painel-notificacoes .painel-link {
    border: 0; background: transparent;
    padding: var(--esp-2);
    font-size: .8rem; font-weight: 600;
    color: var(--cor-primaria); text-decoration: none;
    border-radius: var(--raio-pequeno);
    cursor: pointer;
}
.painel-notificacoes .painel-link:hover { background: var(--cor-primaria-clara); color: var(--cor-primaria-escura); }

/* ------------------------------------------------------------- rodape */
.rodape {
    margin-top: var(--esp-6);
    padding: var(--esp-5) 0 var(--esp-4);
    color: var(--cor-texto-suave);
    font-size: .8rem;
    text-align: center;
}
.rodape img { height: 46px; margin-bottom: var(--esp-3); }

/*  alinha o conteudo do rodape com a coluna da tela, sem herdar o escopo do legado.css  */
.rodape-conteudo { padding: 0 var(--esp-4); }
@media (min-width: 992px) {
    .rodape-conteudo { margin-left: var(--largura-menu); padding: 0 var(--esp-6); }
}
.rodape .link-legado { color: var(--cor-texto-fraco); font-size: .75rem; }

/* ---------------------------------------------------------------- login */
.pagina-login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--esp-4);
}

.login-caixa { width: 100%; max-width: 420px; }

.login-cartao {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra-elevada);
    padding: var(--esp-6) var(--esp-5);
    text-align: center;
}
.login-cartao h1 { font-size: 1.3rem; margin-bottom: var(--esp-1); }
.login-cartao p { font-size: .9rem; }
.login-cartao form { text-align: left; margin-top: var(--esp-5); }
.login-cartao .form-label { font-size: .8rem; color: var(--cor-texto-suave); margin-bottom: var(--esp-1); }

.login-logo { max-width: 190px; margin-bottom: var(--esp-4); }

.login-erro {
    background: var(--cor-perigo-clara);
    border: 1px solid #fecaca;
    color: #991b1b;
    border-radius: var(--raio-pequeno);
    padding: var(--esp-3);
    font-size: .85rem;
    text-align: left;
    margin-top: var(--esp-4);
}
.login-erro a { color: #991b1b; text-decoration: underline; }

.login-rodape {
    text-align: center;
    margin-top: var(--esp-5);
    color: var(--cor-texto-suave);
    font-size: .8rem;
}
.login-rodape img { height: 46px; margin-bottom: var(--esp-3); }

/* --------------------------------------------------------------- legado
   Fragmento da versao antiga carregado dentro da casca nova. O CSS velho
   entra junto e vaza; este wrapper e o limite. */
.legado {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    padding: var(--esp-4);
    overflow-x: auto;
}
.legado table { max-width: 100%; }

/* ---------------------------------------------- espera e botao ocupado
   Estado enquanto uma chamada esta em voo. Sem 'cursor: wait' em lugar
   nenhum: o cursor so' e' repintado quando o mouse se move, entao ele fica
   de ampulheta depois de a acao terminar, ate' a pessoa mexer o mouse -
   parece que ainda esta carregando. Quem avisa e' o spinner. */
.botao-ocupado { pointer-events: none; }
.botao-ocupado .spinner-border { vertical-align: -.125em; }

/* camada da espera geral, criada pelo portal.js. z-index acima do offcanvas (1045) e do
   modal (1055) do Bootstrap, senao o menu aberto no celular passa por cima dela.
   Aparece por classe, e nao por fadeIn: o fadeIn grava display:block inline e desmancha a
   centralizacao do flex. */
.camada-espera {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .65);
    opacity: 0;
    visibility: hidden;
    transition: opacity .12s ease, visibility .12s;
}
.camada-espera.visivel { opacity: 1; visibility: visible; }
.camada-espera .spinner-border {
    width: 2.5rem;
    height: 2.5rem;
    color: var(--cor-primaria);
}

/* -------------------------------------------------------------- utilidades */
.faixa-prototipo {
    background: var(--cor-alerta-clara);
    border: 1px solid #fde68a;
    color: #92400e;
    border-radius: var(--raio-pequeno);
    padding: var(--esp-2) var(--esp-3);
    font-size: .8rem;
    margin-bottom: var(--esp-4);
}

/* ================================================================== disciplina */

/* capa: a cor da disciplina e a mesma do cartao na home, entao o aluno reconhece onde entrou */
.capa-disciplina {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-top: 4px solid var(--cor-disciplina, var(--cor-primaria));
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: var(--esp-4);
    margin-bottom: var(--esp-4);
}
.capa-voltar {
    display: inline-block;
    color: var(--cor-texto-suave);
    text-decoration: none;
    font-size: .82rem;
    margin-bottom: var(--esp-3);
}
.capa-voltar:hover { color: var(--cor-disciplina, var(--cor-primaria)); }
.capa-corpo { display: flex; align-items: center; gap: var(--esp-4); flex-wrap: wrap; }
.capa-texto { flex: 1 1 260px; min-width: 0; }
.capa-codigo {
    display: inline-block;
    font-size: .72rem; font-weight: 700; letter-spacing: .06em;
    color: var(--cor-disciplina, var(--cor-primaria));
    background: var(--cor-disciplina-clara, var(--cor-primaria-clara));
    border-radius: var(--raio-pilula);
    padding: 2px 10px;
    margin-bottom: var(--esp-2);
}
.capa-texto h1 { font-size: 1.5rem; line-height: 1.2; margin: 0; }
.capa-meta { color: var(--cor-texto-suave); font-size: .85rem; margin: var(--esp-2) 0 0; }
.capa-selos { display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-2); min-width: 0; }
.capa-professor { color: var(--cor-texto-suave); font-size: .82rem; overflow-wrap: anywhere; }
.capa-texto h1, .capa-meta { overflow-wrap: anywhere; }

/* coluna do grid: sem isto o .cartao{height:100%} estica cada cartao ate a altura da linha inteira */
.coluna-disciplina { display: flex; flex-direction: column; gap: var(--esp-4); min-width: 0; }
.coluna-disciplina > .cartao { height: auto; min-width: 0; }

/* cabecalho de cartao com icone: e o que tira a tela do preto sobre branco */
.titulo-cartao { display: flex; align-items: center; gap: var(--esp-3); min-width: 0; }
.titulo-cartao h2 { font-size: 1.05rem; margin: 0; }
.icone-cartao {
    width: 34px; height: 34px; flex: none;
    border-radius: var(--raio-pequeno);
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
}
.ic-azul    { background: #eff4ff; color: #2563eb; }
.ic-verde   { background: #ecfdf3; color: #16a34a; }
.ic-roxo    { background: #f5f3ff; color: #7c3aed; }
.ic-laranja { background: #fff7ed; color: #ea580c; }
.ic-teal    { background: #f0fdfa; color: #0d9488; }
.ic-rosa    { background: #fdf2f8; color: #db2777; }
.ic-indigo  { background: #eef2ff; color: #4f46e5; }
.ic-vermelho{ background: var(--cor-perigo-clara); color: var(--cor-perigo); }
.ic-cinza   { background: var(--cor-fundo); color: var(--cor-texto-suave); }
.resumo-cabecalho { color: var(--cor-texto-suave); font-size: .82rem; white-space: nowrap; }
.resumo-cabecalho strong { color: var(--cor-texto); font-size: .95rem; }

/* aneis de progresso */
.painel-indicadores { display: flex; align-items: center; gap: var(--esp-5); flex-wrap: wrap; }
.donut { position: relative; width: 108px; height: 108px; flex: none; text-align: center; }
.donut svg { width: 108px; height: 108px; transform: rotate(-90deg); }
.donut circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.donut-trilho { stroke: var(--cor-fundo); }
.donut-valor  { stroke: var(--cor-texto-fraco); }
.donut-bom     .donut-valor { stroke: var(--cor-sucesso); }
.donut-atencao .donut-valor { stroke: var(--cor-alerta); }
.donut-ruim    .donut-valor { stroke: var(--cor-perigo); }
.donut-bom     .donut-centro { color: var(--cor-sucesso); }
.donut-atencao .donut-centro { color: var(--cor-alerta); }
.donut-ruim    .donut-centro { color: var(--cor-perigo); }
.donut-centro {
    position: absolute; top: 38px; left: 0; right: 0;
    font-size: 1.35rem; font-weight: 700; line-height: 1;
}
.donut-rotulo {
    position: absolute; top: 62px; left: 0; right: 0;
    font-size: .72rem; color: var(--cor-texto-suave);
}
.painel-legenda { flex: 1 1 180px; font-size: .82rem; color: var(--cor-texto-suave); }
.painel-legenda p { margin: 0 0 var(--esp-1); }
.painel-legenda strong { color: var(--cor-texto); }

/* notas: a faixa do nivel separa os blocos, a pilula colorida da o recado da nota */
.nivel + .nivel { margin-top: var(--esp-4); }
.nivel-faixa {
    display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3);
    background: var(--cor-fundo);
    border-radius: var(--raio-pequeno);
    padding: var(--esp-2) var(--esp-3);
    margin-bottom: var(--esp-2);
}
.nivel-nome { font-weight: 600; font-size: .9rem; }
.nivel-lado { display: flex; align-items: center; gap: var(--esp-3); }
.nivel-peso { color: var(--cor-texto-suave); font-size: .78rem; }
.nivel-media { font-weight: 700; font-size: 1rem; }

.avaliacao {
    display: flex; align-items: center; gap: var(--esp-3);
    padding: var(--esp-3) var(--esp-3) var(--esp-3) 0;
    border-bottom: 1px solid var(--cor-borda);
}
.avaliacao:last-child { border-bottom: 0; }
.avaliacao-data {
    flex: none; width: 74px;
    font-size: .78rem; color: var(--cor-texto-suave);
    padding-left: var(--esp-3);
}
.avaliacao-nome { flex: 1 1 auto; min-width: 0; font-size: .9rem; overflow-wrap: anywhere; }
.avaliacao-nome small { display: block; color: var(--cor-texto-fraco); font-size: .75rem; }
.nota-pilula {
    flex: none; min-width: 54px; text-align: center;
    border-radius: var(--raio-pilula);
    padding: 5px 12px;
    font-weight: 700; font-size: .95rem;
    background: var(--cor-fundo); color: var(--cor-texto);
}
.nota-pilula.bom     { background: var(--cor-sucesso-clara); color: var(--cor-sucesso); }
.nota-pilula.atencao { background: var(--cor-alerta-clara);  color: var(--cor-alerta); }
.nota-pilula.ruim    { background: var(--cor-perigo-clara);  color: var(--cor-perigo); }
.nota-pilula.aguardando {
    background: transparent; color: var(--cor-texto-fraco);
    border: 1px dashed var(--cor-borda-forte);
    font-weight: 400; font-size: .75rem;
}

/* frequencia aula a aula */
.tabela-rolagem { overflow-x: auto; }
.tabela-frequencia { width: 100%; border-collapse: collapse; font-size: .85rem; }
.tabela-frequencia th {
    text-align: left; white-space: nowrap;
    color: var(--cor-texto-suave); font-weight: 600; font-size: .78rem;
    text-transform: uppercase; letter-spacing: .03em;
    padding: var(--esp-2);
    border-bottom: 1px solid var(--cor-borda);
}
.tabela-frequencia td { padding: var(--esp-2); border-bottom: 1px solid var(--cor-borda); vertical-align: top; }
.tabela-frequencia tr:last-child td { border-bottom: 0; }
.tabela-frequencia .col-data { font-weight: 600; white-space: nowrap; }
.tabela-frequencia .col-chamada { white-space: nowrap; }
.tabela-frequencia .conteudo-aula { color: var(--cor-texto-suave); min-width: 220px; }

.marca-chamada { display: inline-block; width: 13px; height: 13px; border-radius: 50%; margin-right: 3px; vertical-align: middle; }
.marca-chamada.presente    { background: var(--cor-sucesso); }
.marca-chamada.ausente     { background: var(--cor-perigo); }
.marca-chamada.justificada { background: var(--cor-alerta); }
.marca-chamada.sem         { background: var(--cor-borda-forte); }
.legenda-chamada { color: var(--cor-texto-suave); font-size: .78rem; margin: 0 0 var(--esp-3); }
.legenda-chamada .marca-chamada { margin: 0 3px 0 var(--esp-3); }
.legenda-chamada .marca-chamada:first-child { margin-left: 0; }

/* plano de ensino */
.secao-plano { border-bottom: 1px solid var(--cor-borda); }
.secao-plano:last-of-type { border-bottom: 0; }
.secao-plano summary {
    cursor: pointer;
    padding: var(--esp-3) 0;
    font-size: .875rem; font-weight: 600;
    list-style: none;
    display: flex; align-items: center; justify-content: space-between;
}
.secao-plano summary::-webkit-details-marker { display: none; }
.secao-plano summary::after {
    content: "\f282";
    font-family: "bootstrap-icons";
    font-weight: 400; font-size: .75rem;
    color: var(--cor-texto-fraco);
    transition: transform .2s ease;
}
.secao-plano[open] summary::after { transform: rotate(180deg); }
.texto-plano {
    color: var(--cor-texto-suave);
    font-size: .85rem; line-height: 1.65;
    padding: 0 0 var(--esp-3);
}
.texto-plano p:last-child { margin-bottom: 0; }

.aceite-plano {
    background: var(--cor-primaria-clara);
    border: 1px solid #dbe6ff;
    border-radius: var(--raio-pequeno);
    padding: var(--esp-3);
    margin-top: var(--esp-4);
    font-size: .85rem;
}
.aceite-plano label { display: flex; gap: var(--esp-2); align-items: flex-start; cursor: pointer; margin: 0; }
.aceite-plano input { margin-top: 3px; flex: none; }
.retorno-aceite { margin: var(--esp-2) 0 0; font-size: .8rem; color: var(--cor-texto-suave); }
.retorno-aceite.erro { color: var(--cor-perigo); }
.aceite-feito {
    display: flex; align-items: center; gap: var(--esp-2);
    background: var(--cor-sucesso-clara); color: var(--cor-sucesso);
    border-radius: var(--raio-pequeno);
    padding: var(--esp-2) var(--esp-3);
    margin: var(--esp-4) 0 0;
    font-size: .82rem;
}

/*  planosEnsino.php: com um plano por disciplina na mesma tela, as seções de todas abertas de uma
    vez viram uma parede. O plano inteiro fica atrás de um botão; as seções continuam abrindo uma a
    uma lá dentro, como na disciplina.php.  */
/*  fase, creditos, carga horaria e professores: identificacao da disciplina na matriz, visivel
    mesmo com o plano fechado  */
.meta-plano {
    display: flex; flex-wrap: wrap;
    gap: var(--esp-1) var(--esp-4);
    margin-top: var(--esp-2);
    font-size: .82rem;
    color: var(--cor-texto-suave);
}
.meta-plano i { margin-right: var(--esp-1); }

.abrirPlano { margin-top: var(--esp-2); }
.abrirPlano .seta-plano { transition: transform .2s ease; margin-left: var(--esp-1); font-size: .75rem; }
.abrirPlano[aria-expanded="true"] .seta-plano { transform: rotate(180deg); }
.conteudo-plano { margin-top: var(--esp-3); }

/* lista rotulo/valor do cartao "A disciplina" */
.lista-info { list-style: none; margin: 0; padding: 0; font-size: .875rem; }
.lista-info li {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--esp-3);
    padding: var(--esp-2) 0;
    border-bottom: 1px solid var(--cor-borda);
}
.lista-info li:last-child { border-bottom: 0; }
.lista-info span { color: var(--cor-texto-suave); flex: none; }
.lista-info strong { font-weight: 600; text-align: right; min-width: 0; overflow-wrap: anywhere; }

/* item de lista que leva para a tela da ferramenta */
.item-link { flex: 1 1 auto; min-width: 0; text-decoration: none; color: inherit; }
.item-link:hover .item-titulo { color: var(--cor-primaria); }

.cartao-bloqueio {
    display: flex; gap: var(--esp-4); align-items: flex-start;
    background: var(--cor-alerta-clara);
    border-color: #fde68a;
    margin-bottom: var(--esp-4);
}
.cartao-bloqueio .icone-redondo { background: #fff; color: var(--cor-alerta); flex: none; }
.cartao-bloqueio h2 { font-size: 1rem; margin: 0 0 var(--esp-1); }
.cartao-bloqueio p  { color: var(--cor-texto-suave); font-size: .875rem; }

@media (max-width: 767px) {
    .capa-texto h1 { font-size: 1.2rem; }
    .capa-corpo { gap: var(--esp-3); }
    .painel-indicadores { gap: var(--esp-4); justify-content: center; }
    .painel-legenda { flex-basis: 100%; }
    /* cabecalho de cartao empilha: o resumo a direita nao cabe na mesma linha do titulo */
    .cartao-cabecalho { flex-wrap: wrap; row-gap: var(--esp-2); }
    .resumo-cabecalho { white-space: normal; }
    .avaliacao-data { width: 58px; padding-left: 0; }
    .avaliacao { gap: var(--esp-2); padding-right: 0; }
    .nota-pilula { min-width: 46px; padding: 4px 9px; font-size: .88rem; }
    .nivel-faixa { flex-wrap: wrap; row-gap: var(--esp-1); }
    .lista-info li { flex-direction: column; align-items: flex-start; gap: 2px; }
    .lista-info strong { text-align: left; }
}

/* ================================== telas de ferramenta (materiais, foruns, getToWork) */
/*  As tres listam a mesma coisa: as disciplinas do semestre, cada uma com os seus itens.
    O que muda e' o item, entao a moldura fica aqui e cada tela acrescenta so o seu. */

.bloco-disciplina { margin-bottom: var(--esp-4); }

/* cabecalho com a sigla colorida, para o aluno achar a disciplina de relance na lista */
.cabecalho-disciplina {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    padding-bottom: var(--esp-3);
    margin-bottom: var(--esp-2);
    border-bottom: 1px solid var(--cor-borda);
}
.cabecalho-disciplina-texto { flex: 1 1 auto; min-width: 0; }
.cabecalho-disciplina-texto .item-titulo { display: block; overflow-wrap: anywhere; }
.cabecalho-disciplina-texto a.item-titulo { color: var(--cor-texto); text-decoration: none; }
.cabecalho-disciplina-texto a.item-titulo:hover { color: var(--cor-disciplina, var(--cor-primaria)); }
.contagem-itens {
    flex: none;
    font-size: .8rem;
    color: var(--cor-texto-suave);
    text-align: right;
}

.sem-itens { color: var(--cor-texto-fraco); font-size: .85rem; margin: var(--esp-2) 0 0; }
.aviso-bloqueio {
    display: flex; align-items: center; gap: var(--esp-2);
    background: var(--cor-alerta-clara); color: #92400e;
    border-radius: var(--raio-pequeno);
    padding: var(--esp-2) var(--esp-3);
    margin: var(--esp-2) 0 0;
    font-size: .82rem;
}

@media (max-width: 575px) {
    .cabecalho-disciplina { flex-wrap: wrap; row-gap: var(--esp-2); }
    .contagem-itens { flex-basis: 100%; text-align: left; }
}

/*  A estrelinha do portal antigo: marca o que ainda espera uma acao do aluno — material que ele
    nao baixou, forum em que nao postou, trabalho que nao entregou. */
.marca-novo { color: var(--cor-alerta); font-size: .8rem; vertical-align: baseline; }

/* --- materiais de apoio: observacao que o professor deixa junto do arquivo --- */
.material-obs {
    margin-top: var(--esp-1);
    font-size: .8rem;
    color: var(--cor-texto-suave);
    border-left: 2px solid var(--cor-borda-forte);
    padding-left: var(--esp-2);
    overflow-wrap: anywhere;
}

/* --- cursos livres: a vitrine. Cada cartao e' um botao, porque abre o detalhe na mesma tela --- */
.grade-cursos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--esp-4);
}
.cartao-curso {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: var(--esp-2);
    text-align: left;
    cursor: pointer;
    font: inherit;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
.cartao-curso:hover {
    border-color: var(--cor-primaria);
    box-shadow: var(--sombra-elevada);
    transform: translateY(-2px);
}
.curso-titulo { font-size: 1rem; font-weight: 600; color: var(--cor-texto); overflow-wrap: anywhere; }
.curso-infos { display: flex; flex-wrap: wrap; gap: var(--esp-1) var(--esp-3); font-size: .8rem; color: var(--cor-texto-suave); }
.curso-infos i { margin-right: var(--esp-1); }
.curso-valor {
    margin-top: auto;
    font-size: .95rem; font-weight: 700;
    color: var(--cor-texto);
}
.curso-valor.gratuito { color: var(--cor-sucesso); }

/* --- bibliotecas digitais: catalogo de acervos, cada um com o proprio logo --- */
.grade-bibliotecas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--esp-3);
}
.cartao-biblioteca {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--esp-2);
    min-height: 120px;
    padding: var(--esp-3);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-pequeno);
    background: var(--cor-superficie);
    text-align: center;
    text-decoration: none;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
.cartao-biblioteca:hover {
    border-color: var(--cor-primaria);
    box-shadow: var(--sombra-elevada);
    transform: translateY(-2px);
    text-decoration: none;
}
/*  os logos vem de fontes diferentes, com proporcoes e fundos diferentes: a altura fixa com
    object-fit e' o que os alinha numa grade  */
.cartao-biblioteca img { max-width: 100%; height: 46px; object-fit: contain; }
.cartao-biblioteca span {
    font-size: .78rem; line-height: 1.3;
    color: var(--cor-texto-suave);
    overflow-wrap: anywhere;
}

/* --- frequencias e notas: o panorama do semestre. O detalhe fica na disciplina.php --- */
.resumo-semestre { margin-bottom: var(--esp-4); }
.resumo-numeros {
    display: flex; flex-wrap: wrap;
    gap: var(--esp-5);
    margin-top: var(--esp-3);
}
.resumo-valor { display: block; font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.resumo-rotulo { font-size: .8rem; color: var(--cor-texto-suave); }

.indicadores-disciplina {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: var(--esp-5);
    margin-top: var(--esp-3);
}
.indicadores-disciplina .btn { margin-left: auto; }
.indicador { min-width: 0; }
.indicador-valor { display: block; font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.indicador-valor.bom     { color: var(--cor-sucesso); }
.indicador-valor.atencao { color: var(--cor-alerta); }
.indicador-valor.ruim    { color: var(--cor-perigo); }
.indicador-rotulo { display: block; font-size: .82rem; color: var(--cor-texto-suave); }
.indicador-meta   { display: block; font-size: .72rem; color: var(--cor-texto-fraco); }

@media (max-width: 575px) {
    .indicadores-disciplina { gap: var(--esp-4); }
    .indicadores-disciplina .btn { margin-left: 0; flex-basis: 100%; }
    .resumo-numeros { gap: var(--esp-4); }
}

/* --- evidencias de extensao: a lista por disciplina e o formulario de anexacao --- */
/* o "anexar" fica logo abaixo dos dados da turma, ainda dentro do cabecalho: abaixo da linha
   divisoria ele pareceria pertencer as evidencias ja enviadas, e ao lado passava despercebido */
.abrirFormEvidencia { margin-top: var(--esp-2); }
.conteudo-evidencia { flex: 1 1 auto; min-width: 0; }
.link-evidencia { margin-top: var(--esp-1); font-size: .82rem; }
.link-evidencia a { text-decoration: none; }
.link-evidencia a:hover { text-decoration: underline; }

/* etiqueta de situacao e o excluir andam juntos, encostados na direita da linha */
.acoes-item {
    flex: none;
    display: flex; align-items: center;
    gap: var(--esp-2);
}

.form-evidencia {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--esp-3) var(--esp-4);
    margin-top: var(--esp-3);
}
.campo-evidencia.campo-largo,
.linha-campos-evidencia,
.explicacao-evidencia,
.acoes-evidencia-form,
.acoes-solicitacao-estagio { grid-column: 1 / -1; }
.campo-evidencia label {
    display: block;
    font-size: .82rem; font-weight: 600;
    color: var(--cor-texto-suave);
    margin-bottom: var(--esp-1);
}
.explicacao-evidencia {
    font-size: .82rem;
    color: var(--cor-texto-suave);
    background: var(--cor-fundo);
    border-radius: var(--raio-pequeno);
    padding: var(--esp-2) var(--esp-3);
    margin: 0;
}
.acoes-evidencia-form { display: flex; gap: var(--esp-3); }

@media (max-width: 575px) {
    .form-evidencia { grid-template-columns: minmax(0, 1fr); }
    .acoes-item { flex-basis: 100%; justify-content: flex-end; }
}

/* --- protocolo digital: a lista, a linha do tempo de cada um e a escolha do tipo --- */
.conteudo-protocolo { flex: 1 1 auto; min-width: 0; }
.numero-protocolo {
    font-size: .75rem; font-weight: 500;
    color: var(--cor-texto-suave);
    border: 1px solid var(--cor-borda-forte);
    border-radius: var(--raio-pilula);
    padding: 0 .45rem;
    margin-left: var(--esp-1);
    white-space: nowrap;
}
.taxa-aberta { color: var(--cor-perigo); font-weight: 600; }

/* a linha do tempo: uma coluna so, com o fio ligando as etapas pela marca da esquerda */
.linha-tempo {
    margin-top: var(--esp-3);
    padding-top: var(--esp-3);
    border-top: 1px dashed var(--cor-borda-forte);
}
.passo { display: flex; gap: var(--esp-3); position: relative; padding-bottom: var(--esp-4); }
.passo:last-child { padding-bottom: 0; }
/* o fio nasce da marca e vai ate o proximo passo; o ultimo nao tem para onde ir */
.passo:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 11px; top: 22px; bottom: 0;
    width: 2px;
    background: var(--cor-borda);
}
.passo-marca { flex: none; width: 24px; text-align: center; line-height: 1; font-size: 1.15rem; }
.passo-corpo { flex: 1 1 auto; min-width: 0; padding-top: 1px; }
.passo-topo { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--esp-2); }
.passo-data { font-size: .78rem; color: var(--cor-texto-fraco); }
.passo-nome { font-size: .82rem; color: var(--cor-texto-suave); }
.passo-texto { font-size: .85rem; margin-top: var(--esp-1); overflow-wrap: anywhere; }
.passo-anexos { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-top: var(--esp-2); }

.etapa-ok      .passo-marca { color: var(--cor-sucesso); }
.etapa-negada  .passo-marca { color: var(--cor-perigo); }
.etapa-analise .passo-marca { color: var(--cor-alerta); }
.etapa-pendente .passo-marca { color: var(--cor-texto-fraco); }
.etapa-pendente .passo-corpo { color: var(--cor-texto-fraco); }

/* os tipos disponiveis: cada cartao e' um botao, porque abre o formulario na mesma tela */
.grade-tipos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: var(--esp-3);
    margin-top: var(--esp-3);
}
.cartao-tipo {
    display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-2);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    background: var(--cor-superficie);
    padding: var(--esp-4);
    text-align: left;
    min-width: 0;
}
.cartao-tipo:hover { border-color: var(--cor-primaria); box-shadow: var(--sombra-elevada); }
.tipo-icone { color: var(--cor-primaria); font-size: 1.3rem; line-height: 1; }
.tipo-titulo { font-weight: 600; overflow-wrap: anywhere; }
.tipo-valor { font-size: .82rem; color: var(--cor-texto-suave); margin-top: auto; }
.tipo-valor.gratuito { color: var(--cor-sucesso); font-weight: 600; }

.valor-protocolo { margin: var(--esp-3) 0 0; font-size: .9rem; }
.valor-protocolo.valor-pago { color: var(--cor-perigo); }
.aviso-boleto { color: var(--cor-texto-suave); font-size: .82rem; font-style: italic; }
.explicacao-protocolo {
    font-size: .85rem;
    color: var(--cor-texto-suave);
    background: var(--cor-fundo);
    border-radius: var(--raio-pequeno);
    padding: var(--esp-2) var(--esp-3);
    margin: var(--esp-2) 0 0;
}

.form-protocolo { margin-top: var(--esp-3); }
.campo-protocolo { margin-bottom: var(--esp-3); }
.campo-protocolo label {
    display: block;
    font-size: .82rem; font-weight: 600;
    color: var(--cor-texto-suave);
    margin-bottom: var(--esp-1);
}
.anexos-protocolo { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-top: var(--esp-2); }
.anexo-protocolo {
    display: inline-flex; align-items: center; gap: var(--esp-1);
    background: var(--cor-fundo);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-pilula);
    padding: .15rem .3rem .15rem .6rem;
    font-size: .8rem;
    max-width: 100%;
    overflow-wrap: anywhere;
}
.btn-remover-anexo {
    border: 0; background: transparent;
    color: var(--cor-texto-suave);
    line-height: 1; padding: 0 .15rem;
}
.btn-remover-anexo:hover { color: var(--cor-perigo); }
.acoes-form-protocolo { display: flex; gap: var(--esp-3); }

/* --- ACCs: o resumo com donut, a lista de atividades e o formulario de cadastro --- */
.resumo-accs {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: var(--esp-5);
    margin-bottom: var(--esp-4);
}
.numeros-accs { display: flex; flex-wrap: wrap; gap: var(--esp-5); }
.resumo-accs .sem-itens,
.aviso-cumprido { flex-basis: 100%; margin: 0; }
.aviso-cumprido {
    display: flex; align-items: center; gap: var(--esp-2);
    background: var(--cor-sucesso-clara); color: var(--cor-sucesso-escura);
    border-radius: var(--raio-pequeno);
    padding: var(--esp-2) var(--esp-3);
    font-size: .85rem;
}

.conteudo-acc { flex: 1 1 auto; min-width: 0; }
.detalhe-acc {
    margin-top: var(--esp-3);
    padding-top: var(--esp-3);
    border-top: 1px dashed var(--cor-borda-forte);
}
.anexos-acc { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-top: var(--esp-3); }

.form-acc {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--esp-3) var(--esp-4);
    margin-top: var(--esp-3);
}
.campo-acc.campo-largo,
.explicacao-acc,
.acoes-form-acc { grid-column: 1 / -1; }
.campo-acc label {
    display: block;
    font-size: .82rem; font-weight: 600;
    color: var(--cor-texto-suave);
    margin-bottom: var(--esp-1);
}
.explicacao-acc {
    font-size: .82rem;
    color: var(--cor-texto-suave);
    background: var(--cor-fundo);
    border-radius: var(--raio-pequeno);
    padding: var(--esp-2) var(--esp-3);
    margin: 0;
}

@media (max-width: 767px) {
    .form-acc { grid-template-columns: minmax(0, 1fr); }
    .numeros-accs { gap: var(--esp-4); }
}

/* --- documentos digitais: lista unica, filtrada por categoria pelos chips --- */
.conteudo-documento { flex: 1 1 auto; min-width: 0; }
.icone-documento { background: var(--cor-fundo); color: var(--cor-primaria); font-size: 1.1rem; }

.versao-documento {
    font-size: .72rem; font-weight: 500;
    color: var(--cor-texto-suave);
    border: 1px solid var(--cor-borda-forte);
    border-radius: var(--raio-pilula);
    padding: 0 .45rem;
    margin-left: var(--esp-1);
    white-space: nowrap;
}
/* o codigo e' o que o aluno passa para terceiros conferirem: precisa poder ser lido e copiado */
.cod-verificacao {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .78rem;
    color: var(--cor-texto);
    background: var(--cor-fundo);
    border-radius: var(--raio-pequeno);
    padding: 0 .3rem;
    user-select: all;
}

/* --- eventos: inscricoes abertas, com o formulario, e as inscricoes do aluno, com certificado e boleto --- */
.conteudo-evento { flex: 1 1 auto; min-width: 0; }
.icone-evento { background: var(--cor-fundo); color: var(--cor-primaria); font-size: 1.1rem; }
.inscricao-evento {
    margin-top: var(--esp-4);
    padding-top: var(--esp-4);
    border-top: 1px solid var(--cor-borda);
}
.inscricao-evento h3 { font-size: 1rem; margin-bottom: var(--esp-3); }
.campo-evento label {
    display: block;
    font-size: .82rem; font-weight: 600;
    color: var(--cor-texto-suave);
    margin-bottom: var(--esp-1);
}

/* --- historico escolar: o curriculo inteiro em tabela, uma por fase --- */
.bloco-fase { margin-bottom: var(--esp-4); }

/* a tabela tem 7 colunas e nao cabe em tela estreita: rola sozinha, sem empurrar a pagina */
.tabela-rolante { overflow-x: auto; }

.tabela-historico {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
    min-width: 620px;
}
.tabela-historico th {
    text-align: left;
    font-size: .72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .03em;
    color: var(--cor-texto-suave);
    padding: 0 var(--esp-2) var(--esp-2);
    border-bottom: 1px solid var(--cor-borda-forte);
    white-space: nowrap;
}
.tabela-historico td {
    padding: var(--esp-2);
    border-bottom: 1px solid var(--cor-borda);
    vertical-align: top;
    white-space: nowrap;
}
.tabela-historico tr:last-child td { border-bottom: 0; }
.tabela-historico .col-disciplina { width: 99%; white-space: normal; }
.tabela-historico .col-numero,
.tabela-historico .col-situacao { text-align: center; }

/* disciplina que o aluno ainda nao cursou: continua no curriculo, mas nao disputa atencao */
.linha-pendente td { color: var(--cor-texto-fraco); }
.linha-acc td { font-style: italic; color: var(--cor-texto-suave); }
.sigla-vazia { color: var(--cor-texto-fraco); }

.convencoes {
    display: flex; flex-wrap: wrap;
    gap: var(--esp-2) var(--esp-4);
    font-size: .8rem;
    color: var(--cor-texto-suave);
    margin: 0 0 var(--esp-4);
}

/* --- notificacoes: mesma gramatica da lista de mensagens (nao lida com fundo e faixa) ---
   O azul da marca faz o papel do "nao lido"; o verde disputava com as etiquetas de situacao
   (deferido, aprovado), que sao verdes por significado. */
.etiqueta-novidade { background: var(--cor-primaria-clara); color: var(--cor-primaria); }
.conteudo-notificacao { flex: 1 1 auto; min-width: 0; }
.acoes-notificacao { flex: none; display: flex; gap: var(--esp-2); align-items: center; }
.lista-notificacoes > li { padding-left: var(--esp-3); border-left: 3px solid transparent; }
.lista-notificacoes > li:first-child { padding-top: var(--esp-3); }
.lista-notificacoes > li:last-child { padding-bottom: var(--esp-3); }
.lista-notificacoes > li.nao-lida { background: var(--cor-primaria-clara); border-left-color: var(--cor-primaria); }
.lista-notificacoes > li.nao-lida .item-titulo { font-weight: 700; }
.lista-notificacoes .item-titulo { display: flex; align-items: center; gap: var(--esp-2); flex-wrap: wrap; }
/* "marcar todas" nao e' filtro: fica no fim da barra, com a borda tracejada para nao parecer chip */
.chip-acao { border-style: dashed; margin-left: auto; }

@media (max-width: 575.98px) {
    .lista-notificacoes > li { flex-wrap: wrap; }
    .lista-notificacoes .acoes-notificacao { width: 100%; justify-content: flex-end; }
    .chip-acao { margin-left: 0; }
}

/* --- mural: um recado por linha, com quem publicou em destaque --- */
.conteudo-recado { flex: 1 1 auto; min-width: 0; }
.recado-titulo { font-weight: 600; margin-top: 2px; }
.recado-texto { color: var(--cor-texto-suave); font-size: .9rem; margin-top: 2px; overflow-wrap: anywhere; }

/* --- mensagens: a listagem de conversas e, no lugar dela, a conversa aberta em baloes --- */
.bloco-conversa { margin-bottom: var(--esp-4); }
.conteudo-mensagem { flex: 1 1 auto; min-width: 0; }
.acoes-mensagem { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: var(--esp-1); text-align: right; }

/* Conversa com novidade: fundo, faixa lateral e negrito - em verde, porque novidade e' coisa boa;
   vermelho aqui daria o tom de erro. So' o ponto nao dava: a lista inteira parecia igual. */
.lista-mensagens > li { cursor: pointer; padding-left: var(--esp-3); border-left: 3px solid transparent; }
/* a .lista zera o padding vertical da primeira e da ultima linha; aqui isso cortava o fundo do item */
.lista-mensagens > li:first-child { padding-top: var(--esp-3); }
.lista-mensagens > li:last-child { padding-bottom: var(--esp-3); }
.lista-mensagens > li:hover { background: var(--cor-fundo); }
.lista-mensagens > li.nao-lida { background: var(--cor-primaria-clara); border-left-color: var(--cor-primaria); }
.lista-mensagens > li.nao-lida .item-titulo { font-weight: 700; }
.lista-mensagens .item-titulo { display: flex; align-items: center; gap: var(--esp-2); flex-wrap: wrap; }

.conversa-cabecalho { margin: var(--esp-4) 0; }
.conversa-cabecalho h2 { font-size: 1.05rem; margin-top: var(--esp-2); }

/* o balao do proprio aluno vem deslocado e em outra cor - e' o que faz a conversa ser legivel de relance */
.balao {
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    padding: var(--esp-3);
    margin-bottom: var(--esp-3);
    background: var(--cor-superficie);
}
.balao-proprio { background: var(--cor-primaria-clara); border-color: var(--cor-primaria-clara); margin-left: var(--esp-6); }
/* resposta que chegou desde a ultima visita */
.balao-novo { border-color: var(--cor-sucesso); box-shadow: 0 0 0 3px var(--cor-sucesso-clara); }

.balao-cabecalho { display: flex; justify-content: space-between; gap: var(--esp-3); flex-wrap: wrap; font-size: .82rem; color: var(--cor-texto-suave); margin-bottom: var(--esp-2); }
.balao-autor { display: flex; align-items: center; gap: var(--esp-2); color: var(--cor-texto); }
/* as iniciais fazem o autor saltar sem depender de foto, que a mensagem nao carrega */
.balao-avatar {
    width: 26px; height: 26px; flex: none;
    border-radius: var(--raio-pilula);
    background: var(--cor-borda); color: var(--cor-texto-suave);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .7rem; font-weight: 700;
}
.balao-proprio .balao-avatar { background: var(--cor-primaria); color: #fff; }
.balao-data { white-space: nowrap; }
.balao-texto { white-space: pre-line; overflow-wrap: anywhere; }
.balao-anexo { margin-top: var(--esp-2); font-size: .85rem; }
.balao-acoes { margin-top: var(--esp-2); text-align: right; }

.titulo-respostas { font-size: .95rem; margin: var(--esp-4) 0 var(--esp-3); }
.acoes-conversa { text-align: right; }

/* na mensagem enviada, quem ja leu - era o popup "ver acessos" do portal antigo */
.leituras { margin: var(--esp-4) 0; }
.leituras h3 { font-size: .9rem; margin-bottom: var(--esp-2); }
.leituras ul { list-style: none; margin: 0; padding: 0; font-size: .85rem; }
.leituras li { display: flex; justify-content: space-between; gap: var(--esp-3); padding: var(--esp-2) 0; border-bottom: 1px solid var(--cor-borda); }
.leituras li:last-child { border-bottom: 0; }

.bloco-resposta { border-top: 1px solid var(--cor-borda); margin-top: var(--esp-4); padding-top: var(--esp-4); }
.acoes-resposta { display: flex; gap: var(--esp-2); }

/* a escolha de quem recebe so' aparece depois da disciplina: separada do resto do formulario */
.bloco-destinatarios { border-top: 1px solid var(--cor-borda); margin-top: var(--esp-5); padding-top: var(--esp-4); }
.bloco-destinatarios > h3 { font-size: 1rem; margin-bottom: var(--esp-1); }

.grupo-destinatarios { margin-bottom: var(--esp-4); }
.grupo-destinatarios h3 { font-size: .85rem; color: var(--cor-texto-suave); margin-bottom: var(--esp-2); }
.lista-destinatarios { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.destinatario {
    display: inline-flex; align-items: center; gap: var(--esp-2);
    border: 1px solid var(--cor-borda-forte);
    border-radius: var(--raio-pilula);
    padding: .25rem .8rem;
    font-size: .85rem;
    cursor: pointer;
    margin: 0;
}
.destinatario:has(input:checked) { border-color: var(--cor-primaria); background: var(--cor-primaria-clara); color: var(--cor-primaria-escura); }

#formCadastrarMensagemTurma .acoes-perfil { margin-top: var(--esp-6); }
@media (max-width: 575.98px) {
    .lista-mensagens > li { flex-wrap: wrap; }
    .lista-mensagens .acoes-mensagem { width: 100%; flex-direction: row; justify-content: space-between; align-items: center; }
    .balao-proprio { margin-left: var(--esp-3); }
}


/* --- perfil: um formulario so', quebrado em cartoes. A largura dos campos vem da grade do Bootstrap
       (row + col-*, direto na marcacao); aqui fica so' o visual do rotulo --- */
.bloco-perfil { margin-bottom: var(--esp-4); }

.campo-perfil label {
    display: block;
    font-size: .82rem; font-weight: 600;
    color: var(--cor-texto-suave);
    margin-bottom: var(--esp-1);
}
.dica-campo { font-weight: 400; color: var(--cor-texto-fraco); }

/* foto + dados que a secretaria mantem, lado a lado no topo da tela */
.identificacao { display: flex; gap: var(--esp-5); align-items: flex-start; flex-wrap: wrap; }
.identificacao .lista-info { flex: 1 1 260px; }
.foto-perfil { text-align: center; flex: none; }
.foto-perfil img {
    display: block;
    width: 132px; height: 132px;
    object-fit: cover;
    border-radius: var(--raio);
    border: 1px solid var(--cor-borda);
    background: var(--cor-fundo);
    margin-bottom: var(--esp-2);
}

/* a regua da senha: cada regra acende quando a senha passa a cumpri-la */
.regras-senha {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-4);
    font-size: .8rem; color: var(--cor-texto-fraco);
}
.regras-senha li::before { content: "\F28A"; font-family: "bootstrap-icons"; margin-right: 4px; }
.regras-senha li.regra-ok { color: var(--cor-sucesso); }
.regras-senha li.regra-ok::before { content: "\F26B"; }

.aviso-documentos {
    background: var(--cor-primaria-clara);
    border-left: 3px solid var(--cor-primaria);
    border-radius: var(--raio-pequeno);
    padding: var(--esp-3) var(--esp-4);
    font-size: .875rem;
    margin-bottom: var(--esp-4);
}
.aviso-documentos p { margin-bottom: var(--esp-2); }

/* Documentos: um cartao por tipo, com a previa do PDF. Ver o arquivo e' o que faz o aluno saber se
   anexou o certo - por isso a previa, e nao so' o nome do arquivo. */
.grade-documentos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--esp-4);
}
.documento {
    display: flex; flex-direction: column;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    padding: var(--esp-3);
    min-width: 0;
}
/* o que o aluno acabou de anexar ainda nao foi enviado: o cartao fica marcado ate ele salvar */
.documento-alterado { border-color: var(--cor-primaria); background: var(--cor-primaria-clara); }

.documento-titulo {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--esp-2);
    font-weight: 600; font-size: .9rem;
    margin-bottom: var(--esp-3);
    min-height: 2.4em;                 /* nomes de uma e de duas linhas alinham a previa na mesma altura */
}
.documento-titulo .etiqueta { flex: none; }

.documento-visualizacao { position: relative; }
.documento-visualizacao iframe {
    display: block;
    width: 100%; height: 240px;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-pequeno);
    background: var(--cor-fundo);
}
.documento-vazio {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--esp-2);
    height: 240px;
    border: 1px dashed var(--cor-borda-forte);
    border-radius: var(--raio-pequeno);
    background: var(--cor-fundo);
    color: var(--cor-texto-fraco);
    font-size: .82rem;
    text-align: center;
}
.documento-vazio i { font-size: 1.6rem; }

.documento-detalhe { font-size: .8rem; color: var(--cor-texto-suave); margin: var(--esp-2) 0; }
.documento-acoes { display: flex; gap: var(--esp-2); margin-top: auto; }
.documento-acoes .btn { flex: 1; }

.documento-pendente {
    font-size: .8rem; line-height: 1.35;
    color: var(--cor-primaria-escura);
    margin: var(--esp-2) 0 0;
}
.documento-pendente .nome-arquivo { font-weight: 600; overflow-wrap: anywhere; }

@media (max-width: 991.98px) {
    .grade-documentos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .grade-documentos { grid-template-columns: minmax(0, 1fr); }
}

.declaracao label { display: flex; gap: var(--esp-3); align-items: flex-start; font-size: .875rem; margin: 0; }
.declaracao input[type="checkbox"] { margin-top: 3px; transform: scale(1.2); flex: none; }

.acoes-perfil { text-align: center; margin-bottom: var(--esp-6); }
.acoes-perfil .btn { min-width: 220px; }

/* --- financeiro: cada mensalidade ou taxa e' um item de lista, com o valor e a acao (boleto ou
       recibo) na coluna da direita. Os chips filtram os tres blocos de uma vez --- */
/* .cartao nao tem margem propria: numa tela que e' uma pilha de cartoes, o respiro vem daqui */
.bloco-cobrancas, .bloco-financeiro { margin-bottom: var(--esp-4); }
.nota-bloco { font-size: .82rem; color: var(--cor-texto-suave); margin: calc(-1 * var(--esp-2)) 0 var(--esp-3); }

/* os chips filtram a lista do cartao onde estao - por isso moram no cabecalho dele, e nao no topo da tela */
.cartao-cabecalho .chips-cartao { margin-bottom: 0; justify-content: flex-end; }
@media (max-width: 767.98px) {
    .bloco-cobrancas .cartao-cabecalho { flex-wrap: wrap; }
    .cartao-cabecalho .chips-cartao { justify-content: flex-start; }
}

.conteudo-cobranca { flex: 1 1 auto; min-width: 0; }
.conteudo-cobranca .item-titulo { display: flex; align-items: center; gap: var(--esp-2); flex-wrap: wrap; }

/* uma linha por recebimento: parcela quitada em duas vezes mostra as duas */
.pagamento-cobranca { display: flex; align-items: center; gap: var(--esp-2); flex-wrap: wrap; margin-top: 2px; }
.pagamento-cobranca .bi-check2 { color: var(--cor-sucesso); }

/* o recibo e' apoio dentro da linha do pagamento, nao acao principal - dai o botao parecer link */
.botao-recibo {
    border: 0; background: none; padding: 0;
    font-size: .82rem;
    color: var(--cor-primaria);
    text-decoration: underline;
    cursor: pointer;
}
.botao-recibo:hover { color: var(--cor-primaria-escura); }

.acoes-cobranca {
    flex: none;
    display: flex; flex-direction: column; align-items: flex-end; gap: var(--esp-2);
    text-align: right;
}
.valor-cobranca { font-weight: 700; white-space: nowrap; }
.valor-perigo { color: var(--cor-perigo); }

@media (max-width: 575.98px) {
    /* a coluna da direita nao cabe ao lado do texto em tela estreita: vira uma faixa embaixo */
    .lista-cobrancas > li { flex-wrap: wrap; }
    .lista-cobrancas .acoes-cobranca { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
}

/* --- getToWork: o bloco das atividades semestrais, que nao pertencem a disciplina nenhuma.
       Os cartoes de atividade em si sao desenhados pelo getToWorkCompart.js e vem estilizados
       do includes/estilos-getToWork.css --- */
.bloco-semestral { border-left: 4px solid var(--cor-info); }
.bloco-semestral .disciplina-sigla { background: var(--cor-info-clara); color: var(--cor-info); }
.bloco-semestral .item-titulo { display: flex; align-items: center; gap: var(--esp-2); flex-wrap: wrap; }

/*  Modernizacao da area de atividades.

    Tudo aqui e' escopado em #areaAtividades de proposito: o componente desenha com a marcacao
    legada (.divTrabalho, .aResponderTrabalho...), estilizada em includes/estilos-getToWork.css, que
    a trilha tambem usa. Reescrever la' mudaria a trilha junto; aqui so' muda esta tela.
    A tela carrega o legado.css, entao varias regras precisam vencer .portal-conteudo em
    especificidade - dai os seletores encadeados.  */

.voltar-atividades {
    display: inline-flex; align-items: center; gap: var(--esp-2);
    font-size: .85rem; font-weight: 500;
    color: var(--cor-texto-suave);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-pequeno);
    padding: 6px 12px;
    background: var(--cor-superficie);
    text-decoration: none;
}
#areaAtividades .voltar-atividades:hover { background: var(--cor-fundo); color: var(--cor-primaria); border-color: var(--cor-borda-forte); text-decoration: none; }

.titulo-atividades {
    font-size: 1.15rem; font-weight: 600;
    color: var(--cor-texto);
    margin: var(--esp-4) 0 var(--esp-2);
}

#divTrabalhosDisciplina { margin-top: var(--esp-3); }

/* o cartao da atividade */
#areaAtividades .divTrabalho {
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    background: var(--cor-superficie);
    box-shadow: var(--sombra);
    padding: var(--esp-4);
    margin-bottom: var(--esp-4);
}
/*  A linha de topo (infos 63% · status 8% · respostas 20% · olhinho 8%) fica como o
    estilos-getToWork.css define: mexer na largura ou no tamanho ali desmonta a distribuicao.
    Aqui so' o titulo e a data, que sao texto.  */
#areaAtividades .divTituloTrabalho {
    font-size: 1rem; font-weight: 600;
    color: var(--cor-texto);
    margin-bottom: var(--esp-1);
}
#areaAtividades .divDataTrabalho { color: var(--cor-texto-suave); }
#areaAtividades .divTextosTrabalho { margin-top: var(--esp-3); }
#areaAtividades .divTextoTrabalho { font-size: .9rem; line-height: 1.6; color: var(--cor-texto); }

/* anexo como chip, no lugar do link solto que herdava o azul do legado */
#areaAtividades .divAnexoTrabalho { margin-top: var(--esp-3); }
#areaAtividades .divAnexoTrabalho a,
#areaAtividades .divAnexoTrabalho a:link,
#areaAtividades .divAnexoTrabalho a:visited {
    display: inline-flex; align-items: center; gap: var(--esp-2);
    font-size: .82rem; font-weight: 500;
    color: var(--cor-primaria);
    background: var(--cor-primaria-clara);
    border-radius: var(--raio-pilula);
    padding: 5px 12px;
    text-decoration: none;
}
#areaAtividades .divAnexoTrabalho a:hover { background: #dbe6ff; text-decoration: none; }

/* botao Entregar/Responder */
#areaAtividades .divBotaoResponderTrabalho { margin-top: var(--esp-4); }
#areaAtividades .aResponderTrabalho,
#areaAtividades .aResponderTrabalho:link,
#areaAtividades .aResponderTrabalho:visited {
    display: inline-block;
    background: var(--cor-primaria);
    color: #fff;
    border: 1px solid var(--cor-primaria);
    border-radius: var(--raio-pequeno);
    padding: 9px 18px;
    font-size: .875rem; font-weight: 600;
    text-decoration: none;
    width: auto;
}
#areaAtividades .aResponderTrabalho:hover { background: var(--cor-primaria-escura); border-color: var(--cor-primaria-escura); color: #fff; text-decoration: none; }

/*  o legado.css impoe altura e largura pequenas em .portal-conteudo textarea; vale para a
    observacao da entrega e para as respostas abertas que o componente desenha  */
#areaAtividades textarea,
#areaAtividades .campoTextoAtividade {
    width: 100%;
    min-height: 130px;
    resize: vertical;
    font-family: var(--fonte);
    font-size: .9rem;
    line-height: 1.5;
    padding: var(--esp-3);
    border: 1px solid var(--cor-borda-forte);
    border-radius: var(--raio-pequeno);
}
#areaAtividades textarea:focus { outline: none; border-color: var(--cor-primaria); }

#areaAtividades #divEntregarTrabalho,
#areaAtividades #divResponderQuestionario {
    border-top: 1px solid var(--cor-borda);
    margin-top: var(--esp-4);
    padding-top: var(--esp-4);
}
#areaAtividades #divEntregarTrabalho input[type="file"] { font-size: .85rem; margin-bottom: var(--esp-3); }
#areaAtividades .btnSalvarAtividade { margin-right: var(--esp-2); }

/* --- foruns: o cabecalho do forum aberto. A arvore de mensagens e o formulario de
       resposta sao desenhados pelo forumCompart.js e vem estilizados do estilos-ava.css --- */
.forum-cabecalho {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    padding-bottom: var(--esp-3);
    margin: var(--esp-3) 0 var(--esp-3);
    border-bottom: 1px solid var(--cor-borda);
}
.forum-foto {
    width: 44px; height: 44px; flex: none;
    border-radius: var(--raio-pilula);
    object-fit: cover;
    background: var(--cor-fundo);
}
.forum-cabecalho-texto { flex: 1 1 auto; min-width: 0; }
.forum-cabecalho-texto h2 { font-size: 1.1rem; overflow-wrap: anywhere; }

.forum-texto {
    font-size: .9rem;
    line-height: 1.6;
    color: var(--cor-texto);
    overflow-wrap: anywhere;
}
.forum-texto img { max-width: 100%; height: auto; }

.forum-anexo {
    display: inline-flex; align-items: center; gap: var(--esp-2);
    margin-top: var(--esp-3);
    font-size: .85rem;
}

.forum-acoes {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--esp-3);
    margin-top: var(--esp-4);
    padding-top: var(--esp-3);
    border-top: 1px solid var(--cor-borda);
}

/*  O realce da mensagem recem-salva (.mensagemNova) mora em includes/estilos-ava.css, junto do
    .mensagemForumAula: quem desenha a mensagem e' o forumCompart.js, e a trilha do professor e do
    tutor precisa do mesmo estilo. */

@media (max-width: 575px) {
    .forum-cabecalho { flex-wrap: wrap; row-gap: var(--esp-2); }
    .forum-acoes { flex-wrap: wrap; row-gap: var(--esp-2); }
}

/* MEU ESTAGIO (aluno) */

/*  "E agora, eu faco alguma coisa ou so' espero?" e' a primeira duvida de quem abre a tela. O painel
    responde antes da ficha e do historico, e a cor diz de quem e' a vez.  */
.estagio-aluno-passo {
    display: flex;
    gap: var(--esp-3);
    margin-top: var(--esp-4);
    padding: var(--esp-4);
    border: 1px solid var(--cor-borda);
    border-left: 4px solid var(--cor-borda-forte);
    border-radius: var(--raio-pequeno);
    background: var(--cor-fundo);
}
.estagio-aluno-passo-icone {
    width: 38px;
    height: 38px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--cor-superficie);
    font-size: 1.05rem;
}
.estagio-aluno-passo-corpo { min-width: 0; }
.estagio-aluno-passo-etiqueta { background: var(--cor-superficie); margin-bottom: var(--esp-2); }
.estagio-aluno-passo-titulo { font-size: .98rem; font-weight: 700; }
.estagio-aluno-passo-texto { margin: var(--esp-1) 0 0; font-size: .875rem; color: var(--cor-texto-suave); }
.estagio-aluno-passo-acoes { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-top: var(--esp-3); }
/*  gerar outra carta quando ja' existe uma: continua a mao, mas sem disputar atencao com o download  */
.estagio-aluno-acao-discreta {
    color: var(--cor-texto-suave);
    font-size: .82rem;
    text-decoration: none;
}
.estagio-aluno-acao-discreta:hover { color: var(--cor-primaria); text-decoration: underline; }

/*  o formulario de solicitacao mora dentro do cartao da disciplina, abaixo dos botoes: a linha separa
    o pedido do resto do cartao  */
.estagio-aluno-solicitacao {
    margin-top: var(--esp-4);
    padding-top: var(--esp-4);
    border-top: 1px solid var(--cor-borda);
}

.estagio-aluno-passo-acao { border-left-color: var(--cor-primaria); background: var(--cor-primaria-clara); }
.estagio-aluno-passo-acao .estagio-aluno-passo-icone,
.estagio-aluno-passo-acao .estagio-aluno-passo-etiqueta { color: var(--cor-primaria); }
.estagio-aluno-passo-atencao { border-left-color: var(--cor-perigo); background: var(--cor-perigo-clara); }
.estagio-aluno-passo-atencao .estagio-aluno-passo-icone,
.estagio-aluno-passo-atencao .estagio-aluno-passo-etiqueta { color: var(--cor-perigo); }
.estagio-aluno-passo-espera { border-left-color: var(--cor-info); }
.estagio-aluno-passo-espera .estagio-aluno-passo-icone,
.estagio-aluno-passo-espera .estagio-aluno-passo-etiqueta { color: var(--cor-info); }
.estagio-aluno-passo-fim .estagio-aluno-passo-icone,
.estagio-aluno-passo-fim .estagio-aluno-passo-etiqueta { color: var(--cor-texto-suave); }

/*  Empresa, periodo, carga e area sao dados de consulta: agrupados numa ficha eles param de disputar
    atencao com o proximo passo e com o historico.  */
.estagio-aluno-ficha {
    margin-top: var(--esp-4);
    padding: var(--esp-3) var(--esp-4);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-pequeno);
    font-size: .875rem;
}
.estagio-aluno-rotulo { display: block; color: var(--cor-texto-suave); font-size: .78rem; }
.estagio-aluno-valor { font-weight: 600; }
.estagio-aluno-vazio { color: var(--cor-texto-fraco); font-weight: 400; }
.estagio-aluno-subtitulo {
    font-size: .92rem;
    font-weight: 600;
    margin: var(--esp-4) 0 var(--esp-2);
}
.estagio-aluno-subtitulo .contagem-itens { margin-left: var(--esp-2); font-weight: 400; }
/*  Abre as duas colunas do estagio (Andamento / Documentos enviados). Em preto e no mesmo corpo do
    texto eles se perdiam no meio do conteudo, e e' por eles que o aluno acha o que procura.  */
.estagio-aluno-subtitulo-secao {
    display: flex;
    align-items: center;
    gap: var(--esp-2);
    padding-bottom: var(--esp-2);
    border-bottom: 1px solid var(--cor-borda);
    color: var(--cor-primaria);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}
/*  a marca a esquerda ancora o titulo na coluna, como o filete do formulario da secretaria  */
.estagio-aluno-subtitulo-secao::before {
    content: '';
    width: 3px;
    height: .9rem;
    border-radius: 2px;
    background: var(--cor-primaria);
}
.estagio-aluno-subtitulo-secao .contagem-itens {
    margin-left: auto;
    padding: .1rem .5rem;
    border-radius: var(--raio-pilula);
    background: var(--cor-primaria-clara);
    color: var(--cor-primaria);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: 0;
}

/*  A etiqueta a direita da o veredito antes de o aluno ler item a item a lista de conferencia.  */
.estagio-aluno-bloco-titulo {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    margin: var(--esp-4) 0 var(--esp-3);
    padding-bottom: var(--esp-3);
    border-bottom: 1px solid var(--cor-borda);
    font-size: 1rem;
    font-weight: 600;
}
.estagio-aluno-bloco-titulo .icone-cartao { width: 30px; height: 30px; font-size: .9rem; }
.estagio-aluno-bloco-titulo .etiqueta { margin-left: auto; }

.estagio-aluno-requisitos > summary { cursor: pointer; list-style: none; }
.estagio-aluno-requisitos > summary::-webkit-details-marker { display: none; }
.estagio-aluno-requisitos-seta {
    color: var(--cor-texto-fraco);
    font-size: .8rem;
    transition: transform .15s ease;
}
.estagio-aluno-requisitos[open] .estagio-aluno-requisitos-seta { transform: rotate(180deg); }

/*  A linha vertical liga as etapas: e' ela que faz a lista ser lida como percurso, e nao como
    uma lista qualquer. O marcador de cada etapa se apoia nela.  */
.estagio-aluno-linha-tempo {
    list-style: none;
    margin: 0;
    padding: 0 0 0 var(--esp-4);
    border-left: 2px solid var(--cor-borda);
}
.estagio-aluno-linha-tempo > li {
    position: relative;
    padding: 0 0 var(--esp-3);
    font-size: .875rem;
}
.estagio-aluno-linha-tempo > li:last-child { padding-bottom: 0; }
.estagio-aluno-linha-tempo > li::before {
    content: "";
    position: absolute;
    left: calc(var(--esp-4) * -1 - 5px);
    top: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cor-borda-forte);
}
.estagio-aluno-linha-tempo > li.estagio-aluno-etapa-atual::before { background: var(--cor-primaria); }
.estagio-aluno-etapa-atual .estagio-aluno-etapa-nome { font-weight: 700; color: var(--cor-primaria); }
.estagio-aluno-etapa-nome { font-weight: 600; }
.estagio-aluno-etapa-quando { color: var(--cor-texto-fraco); margin-left: var(--esp-2); font-size: .8rem; }
.estagio-aluno-etapa-obs { display: block; color: var(--cor-texto-suave); font-size: .82rem; }

/*  A devolutiva e' a unica coisa da tela que exige acao do aluno: destaca-se do resto do item.  */
.estagio-aluno-devolutiva {
    margin-top: var(--esp-2);
    padding: var(--esp-2) var(--esp-3);
    border-radius: var(--raio-controle, 6px);
    background: var(--cor-perigo-clara);
    color: var(--cor-perigo);
    font-size: .82rem;
}

/*  As tentativas indeferidas ou rescindidas continuam no cartao da disciplina, mas recolhidas: o
    aluno abre quando quer lembrar o que houve, sem competir com o estagio que vale agora.  */
.estagio-aluno-historico {
    margin-top: var(--esp-4);
    border-top: 1px solid var(--cor-borda);
    padding-top: var(--esp-3);
    font-size: .85rem;
}
.estagio-aluno-historico > summary { cursor: pointer; color: var(--cor-texto-suave); }
.estagio-aluno-historico > ul { margin: var(--esp-3) 0 0; padding-left: 0; list-style: none; }
.estagio-aluno-historico > ul > li { padding: var(--esp-2) 0; border-top: 1px dashed var(--cor-borda); }
.estagio-aluno-historico > ul > li:first-child { border-top: 0; }
.estagio-aluno-historico-quando { color: var(--cor-texto-fraco); margin-left: var(--esp-2); font-size: .8rem; }
.estagio-aluno-historico-motivo { display: block; color: var(--cor-texto-suave); font-size: .82rem; }