/* =====================================================================
   Sistema de Coordenação — Curso Técnico em Enfermagem
   Camada de estilo sobre o Bootstrap 5.

   DIREÇÃO VISUAL — "registro clínico"
   Este sistema não é um painel de métricas: é um sistema de registro.
   Ofício, termo de compromisso, ficha do aluno, prontuário da turma.
   O visual segue esse mundo — papel sob luz fria, tinta ardósia, régua
   fina no lugar de sombra, e a ABA DA PASTA como elemento recorrente:
   um traço chapado de 3px que marca categoria no topo do painel, no
   topo do indicador, na lateral do item ativo do menu e na lateral da
   linha da tabela. É o mesmo gesto em todo lugar, e ele codifica
   informação (a que grupo aquilo pertence), não enfeita.

   IMPORTANTE: as telas de impressão NÃO passam por aqui.
   `layouts/impressao.php` carrega o próprio <style> e não referencia
   este arquivo. Já `.previa-timbre` e `.logo-moldura` são prévias do
   papel dentro da tela — a proporção delas é intocável.
   ===================================================================== */

/* =====================================================================
   TOKENS
   ===================================================================== */

:root {
    /* Tinta: o chrome do sistema — menu, tooltip, avatar. É SUPERFÍCIE
       escura, não cor de texto. */
    --tinta:             #16232c;
    --tinta-media:       #3b4d5a;
    --tinta-suave:       #6b7f8c;

    /* TEXTO — nada de preto sobre branco.
       Preto puro sobre papel branco "grita" e cansa numa tela que o
       coordenador olha o dia inteiro. O corpo assenta num cinza escuro
       e o título num cinza um pouco mais fechado, só o bastante para a
       hierarquia continuar de pé. O contraste segue acima de 7:1. */
    --texto-forte:       #2c363f;
    --texto-corpo:       #3f4b55;

    /* Papel: o canvas. Frio, levemente esverdeado — papel sob fluorescente. */
    --papel:             #eef1f0;
    --superficie:        #ffffff;
    --superficie-2:      #f7f9f8;

    --borda:             #dde3e2;
    --borda-forte:       #c3cecb;

    /* Jade: cor de sinal. Aparece pouco, e sempre querendo dizer algo. */
    --jade:              #0e6b5a;
    --jade-esc:          #0a4f43;
    --jade-claro:        #e3efeb;
    --jade-vivo:         #14907a;

    /* Sinais clínicos — usados nos estados, não como paleta decorativa. */
    --carmim:            #a3324b;
    --carmim-claro:      #f8e8ec;
    --ambar:             #a8690f;
    --ambar-claro:       #fbf1e0;
    --indigo:            #2b5b8c;
    --indigo-claro:      #e7eef6;

    /* Compatibilidade: nomes antigos ainda usados por views e pelo JS. */
    --cor-primaria:      var(--jade);
    --cor-primaria-esc:  var(--jade-esc);
    --cor-primaria-clara:var(--jade-claro);
    --cor-acento:        var(--jade-vivo);
    --fundo:             var(--papel);
    --texto:             var(--texto-corpo);
    --texto-suave:       var(--tinta-suave);

    --sidebar-largura:   264px;
    --cabecalho-altura:  60px;

    /* Registro é réguado, não almofadado. */
    --raio:              4px;
    --raio-p:            3px;
    --aba:               3px;

    /* Sombra quase inexistente: quem separa é a régua de 1px. A sombra
       forte fica reservada ao que realmente flutua (modal, tooltip). */
    --sombra:            0 1px 1px rgba(22, 35, 44, .03);
    --sombra-forte:      0 12px 32px rgba(22, 35, 44, .16);

    --fonte-display:     "Zilla Slab", Georgia, "Times New Roman", serif;
    --fonte:             "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --fonte-mono:        "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

    /* Bootstrap: alinhado à paleta, para que badge, alert e link herdem
       o mesmo mundo sem precisar reescrever view por view. */
    --bs-primary:        #0e6b5a;
    --bs-primary-rgb:    14, 107, 90;
    --bs-danger:         #a3324b;
    --bs-danger-rgb:     163, 50, 75;
    --bs-warning:        #a8690f;
    --bs-warning-rgb:    168, 105, 15;
    --bs-info:           #2b5b8c;
    --bs-info-rgb:       43, 91, 140;
    --bs-success:        #1a7358;
    --bs-success-rgb:    26, 115, 88;
    --bs-secondary:      #5b6f7c;
    --bs-secondary-rgb:  91, 111, 124;
    --bs-body-color:     #3f4b55;
    --bs-heading-color:  #2c363f;
    --bs-emphasis-color: #2c363f;
    --bs-border-color:   #dde3e2;
    --bs-border-radius:  4px;
    --bs-border-radius-sm: 3px;
    --bs-border-radius-lg: 5px;
    --bs-link-color:     #0e6b5a;
    --bs-link-color-rgb: 14, 107, 90;
    --bs-link-hover-color: #0a4f43;
    --bs-link-hover-color-rgb: 10, 79, 67;
    --bs-font-sans-serif: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

body {
    background: var(--papel);
    color: var(--texto-corpo);
    font-family: var(--fonte);
    font-size: 14.5px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* Número é dado: sempre em algarismo tabular, para que colunas de
   contagem alinhem e a leitura não dance entre uma linha e outra. */
.indicador-valor,
.table td,
.table th,
.font-monospace,
time { font-variant-numeric: tabular-nums; }

.font-monospace { font-family: var(--fonte-mono) !important; letter-spacing: -.01em; }

h1, h2, h3, h4, h5, h6,
.cabecalho-titulo,
.painel-cabecalho h2,
.modal-title {
    font-family: var(--fonte-display);
    font-weight: 600;
    letter-spacing: -.005em;
    color: var(--texto-forte);
}

/* `strong` dentro de tabela e lista é nome próprio, código de turma,
   sigla — o dado que a pessoa procura. Fecha um passo, sem ir ao preto. */
.table strong, .lista-dados dd strong, .cartao-info strong, .item-selecao strong {
    color: var(--texto-forte);
}

a { text-underline-offset: .18em; }

/* Foco visível e consistente — o mesmo anel em qualquer controle. */
:focus-visible {
    outline: 2px solid var(--jade-vivo);
    outline-offset: 2px;
    border-radius: var(--raio-p);
}

/* =====================================================================
   CONTROLES
   ===================================================================== */

.btn {
    --bs-btn-font-size: .875rem;
    --bs-btn-font-weight: 600;
    --bs-btn-padding-y: .44rem;
    --bs-btn-padding-x: .9rem;
    --bs-btn-border-radius: var(--raio);
    letter-spacing: .005em;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.btn i { margin-right: .12rem; }

.btn-primary {
    --bs-btn-bg: var(--jade);
    --bs-btn-border-color: var(--jade);
    --bs-btn-hover-bg: var(--jade-esc);
    --bs-btn-hover-border-color: var(--jade-esc);
    --bs-btn-active-bg: var(--jade-esc);
    --bs-btn-active-border-color: var(--jade-esc);
}

.btn-outline-primary {
    --bs-btn-color: var(--jade);
    --bs-btn-border-color: var(--borda-forte);
    --bs-btn-hover-bg: var(--jade);
    --bs-btn-hover-border-color: var(--jade);
    --bs-btn-active-bg: var(--jade-esc);
    --bs-btn-active-border-color: var(--jade-esc);
}

.btn-outline-secondary {
    --bs-btn-color: var(--tinta-media);
    --bs-btn-border-color: var(--borda-forte);
    --bs-btn-hover-bg: var(--tinta);
    --bs-btn-hover-border-color: var(--tinta);
}

.btn-outline-danger {
    --bs-btn-color: var(--carmim);
    --bs-btn-border-color: #e6c3cc;
    --bs-btn-hover-bg: var(--carmim);
    --bs-btn-hover-border-color: var(--carmim);
}

.btn-light {
    --bs-btn-bg: var(--superficie);
    --bs-btn-border-color: var(--borda-forte);
    --bs-btn-hover-bg: var(--superficie-2);
    --bs-btn-color: var(--tinta-media);
}

/* =====================================================================
   ETIQUETA — pílula pastel

   O badge sólido escuro pesava: numa lista de trinta alunos, trinta
   retângulos escuros à direita puxavam o olho para longe do nome, que
   é o que a pessoa está procurando. Aqui ele vira pílula lavada — o
   fundo na cor diluída, o texto na mesma cor porém fechado. Continua
   legível de relance, e para de competir com o dado.

   O contorno de 1px na mesma cor é o que segura a pílula sobre fundo
   branco: sem ele, o pastel some no papel.
   ===================================================================== */

.badge {
    --bs-badge-border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: .32rem;
    font-weight: 600;
    font-size: .72rem;
    letter-spacing: .01em;
    line-height: 1.35;
    padding: .28rem .68rem;
    border: 1px solid transparent;
    white-space: nowrap;
}

/* O gap já separa o ícone do texto. */
.badge i { margin-right: 0; font-size: .78em; opacity: .8; }

/* Um pouco mais saturado que os demais: no `jade-claro` puro a etiqueta
   de Coordenador lia como cinza e empatava com a de Aluno. */
.text-bg-primary {
    background-color: #d8ece4 !important;
    color: #0a4f43 !important;
    border-color: rgba(14, 107, 90, .28);
}

.text-bg-success {
    background-color: #e2f0e8 !important;
    color: #17604a !important;
    border-color: rgba(26, 115, 88, .18);
}

.text-bg-info {
    background-color: var(--indigo-claro) !important;
    color: #24507c !important;
    border-color: rgba(43, 91, 140, .18);
}

.text-bg-danger {
    background-color: var(--carmim-claro) !important;
    color: #8d2b41 !important;
    border-color: rgba(163, 50, 75, .18);
}

.text-bg-warning {
    background-color: var(--ambar-claro) !important;
    color: #825009 !important;
    border-color: rgba(168, 105, 15, .2);
}

.text-bg-secondary {
    background-color: #eaeef0 !important;
    color: #4a5a66 !important;
    border-color: rgba(91, 111, 124, .18);
}

.text-bg-dark {
    background-color: #e3e8ea !important;
    color: #37434c !important;
    border-color: rgba(44, 54, 63, .16);
}

/* `light` é o badge de contagem (32/40 alunos): o mais neutro de todos. */
.text-bg-light {
    background-color: var(--superficie-2) !important;
    color: var(--tinta-media) !important;
    border-color: var(--borda);
}

.form-control, .form-select {
    border-color: var(--borda-forte);
    border-radius: var(--raio);
    font-size: .9rem;
    padding: .46rem .7rem;
}

.form-control:focus, .form-select:focus {
    border-color: var(--jade-vivo);
    box-shadow: 0 0 0 3px rgba(20, 144, 122, .14);
}

.form-check-input:checked { background-color: var(--jade); border-color: var(--jade); }
.form-check-input:focus   { border-color: var(--jade-vivo); box-shadow: 0 0 0 3px rgba(20, 144, 122, .14); }

/* =====================================================================
   ESTRUTURA
   ===================================================================== */

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

.app-main {
    flex: 1;
    min-width: 0;
    margin-left: var(--sidebar-largura);
    display: flex;
    flex-direction: column;
}

.app-conteudo { flex: 1; padding: 1.6rem 1.75rem 2.25rem; }

.app-rodape {
    display: flex;
    justify-content: space-between;
    padding: .9rem 1.75rem;
    border-top: 1px solid var(--borda);
    color: var(--tinta-suave);
    font-size: .76rem;
    letter-spacing: .02em;
}

/* =====================================================================
   MENU LATERAL — a lombada do arquivo

   Fundo tinta, seções separadas por régua com o rótulo montado sobre
   ela, e o item ativo marcado pela aba jade na borda esquerda.
   ===================================================================== */

.app-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-largura);
    background: var(--tinta);
    color: #aebdc6;
    display: flex;
    flex-direction: column;
    z-index: 1040;
}

.sidebar-marca {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: 0 1.15rem;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
    min-height: var(--cabecalho-altura);
}

.marca-icone {
    width: 34px; height: 34px;
    display: grid; place-items: center;
    background: var(--jade);
    color: #fff;
    border-radius: var(--raio-p);
    font-size: .98rem;
    flex-shrink: 0;
}

.marca-icone.grande { width: 52px; height: 52px; font-size: 1.5rem; border-radius: var(--raio); }

.marca-texto strong {
    display: block;
    color: #fff;
    font-family: var(--fonte-display);
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: .005em;
}

.marca-texto small {
    color: #7d93a0;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .13em;
}

.sidebar-fechar { color: #aebdc6; margin-left: auto; }

.sidebar-nav { flex: 1; padding: .5rem 0 1rem; overflow-y: auto; }

/* O rótulo da seção monta sobre a régua que separa os blocos. */
.nav-secao {
    position: relative;
    margin: 1.35rem 1.15rem .45rem;
    padding-top: .85rem;
    border-top: 1px solid rgba(255, 255, 255, .09);
    font-size: .64rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #7d93a0;
    font-weight: 700;
}

.sidebar-nav > .nav-secao:first-child { margin-top: .35rem; padding-top: 0; border-top: none; }

.nav-item-app {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem 1.15rem;
    color: #b9c7cf;
    text-decoration: none;
    font-size: .875rem;
    border-left: var(--aba) solid transparent;
    transition: background-color .12s ease, color .12s ease;
}

.nav-item-app i { width: 17px; text-align: center; font-size: .88rem; color: #7d93a0; transition: color .12s ease; }

.nav-item-app:hover:not(.disabled) { background: rgba(255, 255, 255, .05); color: #fff; }
.nav-item-app:hover:not(.disabled) i { color: #b9c7cf; }

/* A aba: item ativo ganha o traço jade e o fundo levemente aberto. */
.nav-item-app.active {
    background: rgba(20, 144, 122, .13);
    border-left-color: var(--jade-vivo);
    color: #fff;
    font-weight: 600;
}

.nav-item-app.active i { color: var(--jade-vivo); }

.nav-item-app.disabled { opacity: .38; cursor: not-allowed; }

.badge-breve {
    margin-left: auto;
    font-size: .56rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, .18);
    padding: .1rem .45rem;
    border-radius: 999px;
}

.sidebar-rodape { padding: .85rem 1.15rem; border-top: 1px solid rgba(255, 255, 255, .09); }

.unidade-atual { display: flex; align-items: center; gap: .6rem; font-size: .84rem; }
.unidade-atual i { color: var(--jade-vivo); font-size: .8rem; }
.unidade-atual small {
    display: block; color: #7d93a0;
    font-size: .62rem; text-transform: uppercase; letter-spacing: .12em;
}
.unidade-atual strong { color: #fff; font-weight: 600; }

.sidebar-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(22, 35, 44, .5);
    z-index: 1035;
}

.sidebar-overlay.visivel { display: block; }

/* =====================================================================
   CABECALHO
   ===================================================================== */

.app-cabecalho {
    position: sticky; top: 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: var(--cabecalho-altura);
    padding: 0 1.75rem;
    background: var(--superficie);
    border-bottom: 1px solid var(--borda);
    z-index: 1020;
}

.cabecalho-titulo { font-size: 1.18rem; font-weight: 600; margin: 0; }

.cabecalho-acoes { margin-left: auto; display: flex; align-items: center; gap: .5rem; }

.btn-icone { border: none; background: none; font-size: 1.1rem; color: var(--tinta-media); }

.btn-unidade, .btn-usuario {
    display: flex; align-items: center; gap: .45rem;
    background: var(--superficie);
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio);
    padding: .3rem .65rem;
    font-size: .84rem;
    font-weight: 500;
    color: var(--tinta-media);
    transition: border-color .12s ease, background-color .12s ease;
}

.btn-unidade:hover, .btn-usuario:hover { background: var(--superficie-2); border-color: var(--tinta-suave); color: var(--texto-forte); }

/* O carimbo: unidade única não é botão, é a marcação de origem do
   documento que está aberto. Retangular e monoespaçada, como carimbo. */
.badge-unidade {
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--jade-claro);
    color: var(--jade-esc);
    border: 1px solid rgba(14, 107, 90, .2);
    border-radius: 999px;
    padding: .26rem .7rem;
    font-family: var(--fonte-mono);
    font-size: .76rem;
    font-weight: 500;
    letter-spacing: .04em;
}

.dropdown-menu {
    --bs-dropdown-border-color: var(--borda);
    --bs-dropdown-border-radius: var(--raio);
    --bs-dropdown-font-size: .875rem;
    --bs-dropdown-link-active-bg: var(--jade);
    box-shadow: var(--sombra-forte);
    padding: .3rem;
}

.dropdown-item { border-radius: var(--raio-p); }
.dropdown-header {
    font-size: .64rem; text-transform: uppercase; letter-spacing: .13em;
    font-weight: 700; color: var(--tinta-suave);
}

.dropdown-unidades { min-width: 306px; }
.dropdown-unidades .dropdown-item { white-space: normal; padding: .55rem .7rem; }
.dropdown-unidades .dropdown-item.active { background: var(--jade-claro); color: var(--texto-forte); }

.avatar-img, .avatar-iniciais {
    width: 27px; height: 27px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* Redondo e lavado, na mesma língua das etiquetas: o quadrado escuro
   pesava mais que o nome do aluno ao lado dele. */
.avatar-iniciais {
    display: grid; place-items: center;
    background: #e4e9ec;
    color: #4a5a66;
    border: 1px solid rgba(91, 111, 124, .16);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .02em;
}

/* =====================================================================
   PAINEIS E CARTOES

   O painel é uma folha: régua de 1px, canto quase reto, sem sombra.
   ===================================================================== */

.painel {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    overflow: hidden;
}

.painel-cabecalho {
    display: flex; align-items: center; gap: .75rem;
    padding: .85rem 1.15rem;
    border-bottom: 1px solid var(--borda);
}

.painel-cabecalho h2 {
    font-size: 1rem; font-weight: 600; margin: 0;
    display: flex; align-items: center; gap: .5rem;
}

.painel-cabecalho h2 i { color: var(--jade); font-size: .85rem; }
.painel-cabecalho > *:last-child { margin-left: auto; }

.painel-corpo { padding: 1.15rem; }

.painel-rodape {
    display: flex; justify-content: flex-end; gap: .55rem;
    padding: .85rem 1.15rem;
    background: var(--superficie-2);
    border-top: 1px solid var(--borda);
}

/* Indicadores — a ficha

   Sem tile colorido de ícone: o número é o assunto. A categoria vem da
   aba no topo do cartão, e o ícone volta ao tamanho de glifo, junto do
   rótulo, onde ele apenas confirma do que se trata.
   ===================================================================== */

.cartoes-indicadores {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: .85rem;
}

.indicador {
    position: relative;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 1.05rem 1.1rem .95rem;
    box-shadow: var(--sombra);
}

/* A aba da pasta. */
.indicador::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: var(--aba);
    background: var(--aba-cor, var(--tinta-suave));
}

/* As quatro abas precisam se distinguir a 3px de altura: dois verdes
   próximos viravam a mesma cor no cartão. Vão de escuro a claro dentro
   da família e saem para o indigo/ardósia nos dois últimos. */
.indicador-primario { --aba-cor: var(--jade-esc); }
.indicador-sucesso  { --aba-cor: var(--jade-vivo); }
.indicador-info     { --aba-cor: var(--indigo); }
.indicador-neutro   { --aba-cor: var(--borda-forte); }

/* O ícone perde a caixa colorida e vira uma marca discreta no canto —
   quem carrega a categoria agora é a aba, e o número é o assunto. */
.indicador-icone {
    position: absolute;
    top: .85rem; right: .9rem;
    display: block;
    background: none;
    width: auto; height: auto;
    font-size: .82rem;
    color: var(--aba-cor, var(--tinta-suave));
    opacity: .4;
}

.indicador-valor {
    display: block;
    font-family: var(--fonte-display);
    font-size: 2.15rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--texto-forte);
    margin-bottom: .3rem;
}

.indicador-rotulo {
    font-size: .68rem;
    color: var(--tinta-suave);
    text-transform: uppercase;
    letter-spacing: .11em;
    font-weight: 600;
}

.boas-vindas { margin-bottom: 1.35rem; }
.boas-vindas h2 { font-size: 1.5rem; font-weight: 600; margin-bottom: .1rem; letter-spacing: -.015em; }
.boas-vindas p  { color: var(--tinta-suave); margin: 0; font-size: .9rem; }

/* Listas de dados — a ficha lida linha a linha. O rótulo é a coluna
   estreita à esquerda, como num formulário preenchido à máquina. */

/* Sem gap entre as colunas: a régua tem que atravessar a ficha inteira.
   Com `gap`, cada coluna ganhava a própria linha e o vão no meio lia
   como defeito. O respiro vem do padding do rótulo. */
.lista-dados { margin: 0; display: grid; grid-template-columns: 33% 1fr; gap: 0; }

.lista-dados dt {
    padding-right: 1rem;
    font-size: .66rem;
    color: var(--tinta-suave);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    padding: .5rem 0;
    border-top: 1px solid var(--borda);
}

.lista-dados dd {
    margin: 0;
    font-size: .89rem;
    padding: .5rem 0;
    border-top: 1px solid var(--borda);
}

.lista-dados dt:first-of-type, .lista-dados dd:first-of-type { border-top: none; }

/* Linha do tempo (auditoria resumida) */

.linha-tempo { list-style: none; margin: 0; padding: .35rem 0; }

.linha-tempo li {
    display: flex; align-items: flex-start; gap: .7rem;
    padding: .5rem 1.15rem;
    font-size: .86rem;
}

.evento-tipo { width: 7px; height: 7px; border-radius: 1px; margin-top: .45rem; flex-shrink: 0; }
.evento-ok     { background: #1a7358; }
.evento-alerta { background: var(--ambar); }

/* Modulos futuros — deliberadamente pálidos: ainda não são registro. */

.grade-modulos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .7rem; }

.modulo-card {
    display: flex; flex-direction: column; align-items: center; gap: .45rem;
    padding: 1rem .7rem;
    border: 1px dashed var(--borda-forte);
    border-radius: var(--raio);
    color: var(--tinta-suave);
    background: transparent;
    font-size: .78rem;
    letter-spacing: .01em;
    text-align: center;
}

.modulo-card i { font-size: 1.15rem; opacity: .4; }

/* =====================================================================
   TABELAS, BUSCA E ESTADOS VAZIOS
   ===================================================================== */

.barra-acoes {
    display: flex; align-items: center; gap: .6rem;
    margin-bottom: 1.15rem;
    flex-wrap: wrap;
}

.filtros-linha { display: flex; gap: .5rem; flex: 1; min-width: 260px; flex-wrap: wrap; }
.filtros-linha .form-select { max-width: 190px; }

/* Campo de busca padrao: input (com icone) + botao "Buscar" numa unica
   linha. O par nunca se separa; so o input encolhe. Este e o padrao de
   TODA busca do sistema — ver .busca-selecao para a variante em cartao. */
.campo-busca { position: relative; flex: 1 1 240px; min-width: 0; display: flex; gap: .45rem; }
.campo-busca i { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--tinta-suave); font-size: .8rem; pointer-events: none; z-index: 2; }
.campo-busca .form-control { flex: 1 1 auto; min-width: 0; padding-left: 2.25rem; }
.campo-busca .btn { flex: 0 0 auto; white-space: nowrap; }

.barra-acoes > .btn { margin-left: auto; }

/* Cabeçalho de tabela: régua dupla no topo, como livro de registro. */
.table {
    --bs-table-hover-bg: var(--jade-claro);
    --bs-table-border-color: var(--borda);
    margin-bottom: 0;
}

.table thead th {
    font-size: .64rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--tinta-suave);
    font-weight: 700;
    background: var(--superficie-2);
    border-bottom: 1px solid var(--borda-forte);
    padding: .6rem 1rem;
    white-space: nowrap;
}

.table tbody td { padding: .68rem 1rem; font-size: .875rem; vertical-align: middle; }
.table tbody tr:last-child td { border-bottom-width: 0; }

.tabela-auditoria { font-size: .82rem; }
.linha-alerta { background: var(--ambar-claro); }

.vazio { padding: 2.75rem 1.5rem; text-align: center; color: var(--tinta-suave); }
.vazio p { margin-bottom: 1rem; font-size: .89rem; }

.icone-vazio { font-size: 2.2rem; color: var(--borda-forte); margin-bottom: .8rem; }

/* Formularios */

.obrigatorio { color: var(--carmim); }

.divisor-form { margin: 1rem 0 .35rem; border-color: var(--borda); opacity: 1; }

.rotulo-secao {
    font-size: .64rem; text-transform: uppercase; letter-spacing: .13em;
    color: var(--tinta-suave); font-weight: 700;
}

.form-label { font-size: .78rem; font-weight: 600; margin-bottom: .28rem; color: var(--tinta-media); letter-spacing: .01em; }
.form-text  { font-size: .76rem; color: var(--tinta-suave); }

.aviso-suave {
    display: flex; gap: .6rem; align-items: flex-start;
    background: var(--jade-claro);
    color: var(--jade-esc);
    border-left: var(--aba) solid var(--jade);
    border-radius: 0 var(--raio) var(--raio) 0;
    padding: .65rem .85rem;
    font-size: .83rem;
}

.campo-senha { position: relative; }

.btn-ver-senha {
    position: absolute; right: .55rem; top: 50%; transform: translateY(-50%);
    border: none; background: none; color: var(--tinta-suave); z-index: 5;
    padding: .25rem .4rem;
}

/* Mensagem do sistema: também recebe a aba, na cor do que aconteceu. */
.mensagens-area .alert {
    display: flex; align-items: center; gap: .6rem;
    border: 1px solid var(--borda);
    border-left: var(--aba) solid currentColor;
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    font-size: .875rem;
    padding: .7rem .9rem;
}

/* =====================================================================
   TELAS DE AUTENTICACAO

   A porta de entrada não é um cartão flutuando num degradê: é a folha
   de rosto do arquivo. Fundo tinta com uma régua jade no topo do
   cartão — a mesma aba que organiza o resto do sistema.
   ===================================================================== */

.tela-auth {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    position: relative;
    background: var(--tinta);
}

/* Trama fina de linhas — papel pautado visto de longe, não um glow. */
.auth-fundo {
    position: absolute; inset: 0;
    background-image: repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, .035) 0 1px,
        transparent 1px 28px
    );
    mask-image: radial-gradient(ellipse at 50% 40%, #000 10%, transparent 72%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 10%, transparent 72%);
}

.auth-container { position: relative; width: 100%; max-width: 412px; }

.auth-cartao {
    position: relative;
    background: var(--superficie);
    border-radius: var(--raio);
    padding: 2.25rem 2rem 2rem;
    box-shadow: var(--sombra-forte);
    overflow: hidden;
}

.auth-cartao::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: var(--aba);
    background: var(--jade);
}

.auth-marca { text-align: center; margin-bottom: 1.6rem; }
.auth-marca .marca-icone { margin: 0 auto .85rem; }

.auth-marca h1 {
    font-family: var(--fonte-display);
    font-size: 1.32rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.01em;
    margin-bottom: .35rem;
}

.auth-marca p {
    font-size: .66rem;
    color: var(--tinta-suave);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: .16em;
    font-weight: 600;
}

.auth-form .form-floating label i { margin-right: .35rem; color: var(--tinta-suave); }
.auth-form .form-floating > .form-control { padding-right: 2.6rem; }
.auth-form .form-floating > label { font-size: .9rem; }

.btn-entrar { padding: .6rem; font-weight: 600; letter-spacing: .02em; }

.auth-divisor {
    display: flex; align-items: center; gap: .8rem;
    margin: 1.25rem 0;
    color: var(--tinta-suave);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-weight: 600;
}
.auth-divisor::before, .auth-divisor::after { content: ''; flex: 1; height: 1px; background: var(--borda); }

.btn-google {
    display: flex; align-items: center; justify-content: center; gap: .6rem;
    background: var(--superficie);
    border: 1px solid var(--borda-forte);
    padding: .58rem;
    font-weight: 600;
    color: var(--tinta-media);
}

.btn-google:hover { background: var(--superficie-2); border-color: var(--tinta-suave); color: var(--texto-forte); }

.aviso-google {
    margin: 1.25rem 0 0;
    padding: .65rem .8rem;
    background: var(--superficie-2);
    border-radius: var(--raio-p);
    font-size: .78rem;
    color: var(--tinta-suave);
    text-align: center;
}

.auth-ajuda {
    margin: 1.25rem 0 0;
    padding-top: 1.1rem;
    border-top: 1px solid var(--borda);
    font-size: .76rem;
    color: var(--tinta-suave);
    text-align: center;
    line-height: 1.55;
}

.auth-rodape {
    text-align: center;
    color: rgba(255, 255, 255, .45);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    margin-top: 1.15rem;
}

/* Selecao de unidade */

.selecao-titulo { font-family: var(--fonte-display); font-size: 1.2rem; font-weight: 600; text-align: center; margin-bottom: .25rem; }
.selecao-subtitulo { font-size: .84rem; color: var(--tinta-suave); text-align: center; margin-bottom: 1.25rem; }

.busca-selecao { display: flex; gap: .45rem; margin-bottom: .9rem; }
.busca-selecao-campo { position: relative; flex: 1; }
.busca-selecao-campo i {
    position: absolute; left: .8rem; top: 50%; transform: translateY(-50%);
    color: var(--tinta-suave); font-size: .8rem; pointer-events: none;
}
.busca-selecao-campo input { padding-left: 2.25rem; border-radius: var(--raio); }
.busca-selecao .btn { border-radius: var(--raio); flex-shrink: 0; }

.lista-unidades {
    display: flex; flex-direction: column; gap: .4rem;
    max-height: 46vh; overflow-y: auto;
    margin: 0 -.25rem; padding: .1rem .25rem;
}

.selecao-vazio {
    text-align: center; color: var(--tinta-suave);
    font-size: .84rem; padding: 1.5rem .5rem 0;
}

/* Cada unidade é uma pasta na gaveta: a aba aparece ao passar o mouse. */
.cartao-unidade {
    display: flex; align-items: center; gap: .8rem;
    width: 100%;
    padding: .75rem .9rem;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-left: var(--aba) solid transparent;
    border-radius: var(--raio);
    text-align: left;
    transition: border-color .12s ease, background-color .12s ease;
}

.cartao-unidade:hover {
    border-color: var(--borda-forte);
    border-left-color: var(--jade);
    background: var(--superficie-2);
}

.cartao-icone {
    width: 32px; height: 32px;
    display: grid; place-items: center;
    background: var(--jade-claro);
    color: var(--jade);
    border-radius: var(--raio-p);
    font-size: .8rem;
    flex-shrink: 0;
}

.cartao-info { flex: 1; min-width: 0; }
.cartao-info strong { display: block; font-size: .9rem; font-weight: 600; }
.cartao-info small  { color: var(--tinta-suave); font-size: .76rem; }
.cartao-seta { color: var(--borda-forte); font-size: .75rem; }

/* =====================================================================
   PAGINAS DE ERRO
   ===================================================================== */

.tela-erro { min-height: 100vh; display: grid; place-items: center; background: var(--papel); padding: 1.5rem; }

.erro-caixa {
    position: relative;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 2.5rem 2.25rem 2.25rem;
    text-align: center;
    max-width: 430px;
    overflow: hidden;
}

.erro-caixa::before {
    content: '';
    position: absolute; inset: 0 0 auto 0;
    height: var(--aba);
    background: var(--tinta-suave);
}

.erro-icone { font-size: 2.2rem; margin-bottom: .9rem; }
.erro-aviso  { color: var(--ambar); }
.erro-perigo { color: var(--carmim); }
.erro-neutro { color: var(--tinta-suave); }

.erro-caixa h1 {
    font-family: var(--fonte-display);
    font-size: 3.4rem; font-weight: 600; line-height: 1;
    margin-bottom: .4rem; color: var(--texto-forte);
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}
.erro-caixa h2 { font-size: 1.02rem; font-weight: 600; margin-bottom: .55rem; }
.erro-caixa p  { color: var(--tinta-suave); font-size: .87rem; margin-bottom: 1.4rem; }

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

@media (max-width: 991.98px) {
    .app-sidebar { transform: translateX(-100%); transition: transform .2s ease; }
    .app-sidebar.aberta { transform: translateX(0); }
    .app-main { margin-left: 0; }
    .app-conteudo { padding: 1.1rem 1.1rem 1.75rem; }
    .app-cabecalho { padding: 0 1.1rem; }
    .app-rodape { padding: .9rem 1.1rem; }
}

@media (max-width: 575.98px) {
    .cabecalho-titulo { font-size: 1rem; }
    .barra-acoes { flex-direction: column; align-items: stretch; }
    .barra-acoes > .btn { margin-left: 0; }
    .filtros-linha { flex-direction: column; }
    .filtros-linha .form-select { max-width: none; }
    .lista-dados { grid-template-columns: 1fr; }
    .lista-dados dt { padding-bottom: 0; }
    .lista-dados dd { padding-top: .1rem; border-top: none; }
    .indicador-valor { font-size: 1.85rem; }
    .auth-cartao { padding: 1.75rem 1.3rem 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

/* =====================================================================
   MODULO DE TURMAS
   ===================================================================== */

/* Lista de seleção de alunos no modal de matrícula */
.lista-selecao {
    max-height: 340px;
    overflow-y: auto;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
}

.item-selecao {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .75rem;
    border-bottom: 1px solid var(--borda);
    cursor: pointer;
    transition: background-color .1s ease;
}

.item-selecao:last-child { border-bottom: none; }
.item-selecao:hover { background: var(--jade-claro); }

.item-selecao .form-check-input { margin: 0; flex-shrink: 0; }
.item-selecao > span { min-width: 0; }
.item-selecao strong { font-size: .88rem; font-weight: 600; }

.modal-content { border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra-forte); }
.modal-header, .modal-footer { border-color: var(--borda); }
.modal-header { padding: .9rem 1.15rem; }
.modal-body   { padding: 1.15rem; }
.modal-footer { padding: .85rem 1.15rem; background: var(--superficie-2); }
.modal-title { font-size: 1.02rem; font-weight: 600; display: flex; align-items: center; gap: .5rem; }
.modal-title i { color: var(--jade); font-size: .85rem; }

/* O aviso dentro do formulário de turma pode conter link */
.aviso-suave a { color: inherit; font-weight: 700; }

/* ---------------------------------------------------------------------------
   Heatmap de atividades recentes (tela de auditoria)
   Grade estilo "contribuicoes" com tooltip flutuante por dia.
--------------------------------------------------------------------------- */
.heatmap-scroll { overflow-x: auto; padding-bottom: .25rem; }

.heatmap {
    display: inline-flex;
    gap: 3px;
    align-items: flex-end;
}

.heatmap-col {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.heatmap-mes {
    height: 14px;
    font-size: .64rem;
    line-height: 14px;
    color: var(--tinta-suave);
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.heatmap-cel {
    width: 13px;
    height: 13px;
    border-radius: 2px;
    background: var(--borda);
    cursor: default;
    transition: transform .08s ease;
}
.heatmap-cel:hover:not(.vazia) { transform: scale(1.25); outline: 1px solid rgba(22, 35, 44, .18); }
.heatmap-cel.vazia { background: transparent; cursor: default; }

.heatmap-cel[data-nivel="0"] { background: var(--borda); }
.heatmap-cel[data-nivel="1"] { background: #c2ddd5; }
.heatmap-cel[data-nivel="2"] { background: #79b8a8; }
.heatmap-cel[data-nivel="3"] { background: var(--jade); }
.heatmap-cel[data-nivel="4"] { background: var(--jade-esc); }

.heatmap-legenda {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: .75rem;
    font-size: .7rem;
    color: var(--tinta-suave);
}
.heatmap-legenda .heatmap-cel { cursor: default; }

/* Tooltip flutuante */
.heatmap-tooltip {
    position: absolute;
    z-index: 1080;
    min-width: 150px;
    max-width: 240px;
    padding: .5rem .65rem;
    background: var(--tinta);
    color: #fff;
    border-radius: var(--raio);
    box-shadow: var(--sombra-forte);
    font-size: .76rem;
    line-height: 1.4;
    pointer-events: none;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity .1s ease, transform .1s ease;
}
.heatmap-tooltip.visivel { opacity: 1; transform: translateY(0); }
.heatmap-tooltip .tt-titulo { font-weight: 600; }
.heatmap-tooltip .tt-total { color: #a8bcc6; font-size: .7rem; margin-bottom: .25rem; }
.heatmap-tooltip .tt-vazio { color: #7d93a0; font-style: italic; }
.heatmap-tooltip .tt-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 180px;
    overflow-y: auto;
}
.heatmap-tooltip .tt-lista li {
    padding: 1px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =====================================================================
   LOGO DA UNIDADE (tela "Minha unidade")
   A moldura reproduz a proporcao impressa do timbre — 15 cm x 3 cm —
   para que o coordenador veja na tela o mesmo enquadramento que sairia
   no papel, sem precisar imprimir para conferir.

   NAO ALTERAR a proporcao: ela espelha o papel.
   ===================================================================== */
.logo-moldura {
    aspect-ratio: 5 / 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .5rem;
    border: 1px dashed var(--borda-forte);
    border-radius: var(--raio);
    background:
        linear-gradient(45deg, rgba(22, 35, 44, .035) 25%, transparent 25%) 0 0/16px 16px,
        linear-gradient(-45deg, rgba(22, 35, 44, .035) 25%, transparent 25%) 0 8px/16px 16px,
        #fff;
}
.logo-moldura img { max-width: 100%; max-height: 100%; object-fit: contain; }

.logo-vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    color: var(--tinta-suave);
    font-size: .83rem;
}
.logo-vazio i { font-size: 1.5rem; }

.lista-requisitos { margin: 0; padding-left: 1.1rem; color: var(--tinta-suave); font-size: .83rem; }
.lista-requisitos li { margin-bottom: .2rem; }

/* =====================================================================
   TIMBRE NA TELA (prévia do ofício e topo do formulário)
   Mesma composição do papel: logo em 15 x 3 cm, nome e sigla centrados.
   Na tela a largura é relativa — o que importa é a PROPORÇÃO 5:1, para
   que o enquadramento visto aqui seja o mesmo da impressão.

   Esta seção reproduz o papel: fonte e proporção ficam como estavam,
   fora do sistema de tipos da interface.
   ===================================================================== */
.previa-timbre {
    text-align: center;
    margin-bottom: 1.4rem;
    line-height: 1.35;
}
.previa-timbre img {
    display: block;
    width: 100%;
    max-width: 520px;
    aspect-ratio: 5 / 1;
    object-fit: contain;
    margin: 0 auto .5rem;
}
.previa-timbre strong { font-size: 1.02rem; }
.previa-timbre div { font-size: .9rem; }

/* No formulário o timbre é referência, não conteúdo: fica mais discreto
   e separado dos campos por uma linha. */
.previa-timbre-topo {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--borda);
}
.previa-timbre-topo img { max-width: 420px; }
.previa-timbre-topo strong { font-size: .95rem; }
.previa-timbre-topo div { font-size: .82rem; color: var(--tinta-suave); }

/* =====================================================================
   TOOLTIP

   Um único balão flutuante, movido pelo JS (App usa `position: fixed`).
   Fixed em vez de absolute porque os botões vivem dentro de tabelas com
   `overflow-x: auto` — em CSS puro, o balão seria cortado pela tabela.
   ===================================================================== */
.tooltip-app {
    position: fixed;
    z-index: 1090;
    max-width: 260px;
    padding: .38rem .6rem;
    background: var(--tinta);
    color: #fff;
    border-radius: var(--raio);
    box-shadow: var(--sombra-forte);
    font-size: .76rem;
    line-height: 1.4;
    text-align: center;
    pointer-events: none;          /* nunca rouba o hover do botão */
    opacity: 0;
    transform: translateY(3px) scale(.97);
    transition: opacity .12s ease, transform .12s ease;
}
.tooltip-app.visivel { opacity: 1; transform: translateY(0) scale(1); }

/* A setinha aponta para baixo (balão acima do botão) e vira para cima
   quando o balão precisa cair abaixo por falta de espaço. */
.tooltip-app::after {
    content: '';
    position: absolute;
    left: 50%;
    margin-left: -5px;
    border: 5px solid transparent;
}
.tooltip-app:not(.em-baixo)::after { top: 100%; border-top-color: var(--tinta); }
.tooltip-app.em-baixo::after { bottom: 100%; border-bottom-color: var(--tinta); }

/* =====================================================================
   GRUPOS DE ORIENTAÇÃO (termo de compromisso)

   Cada professor orientador ganha uma cor. A linha do aluno assume a cor
   do seu orientador, então a coordenação enxerga os grupos de relance —
   quem está com quem — sem precisar ler nome por nome.

   É a mesma aba que marca painel, indicador e menu: aqui ela marca a
   qual grupo aquela linha pertence. O fundo da linha fica intocado — a
   leitura da tabela continua a de sempre, e as listras não competem com
   os avisos (ficha incompleta, sem orientador).

   As variáveis `--cor-orientador` e `--cor-orientador-fraca` são
   declaradas pela view no <tr> e herdadas pelo que está dentro dele.
   ===================================================================== */
/* Borda, e não box-shadow: o hover do Bootstrap também é um inset
   box-shadow na célula, e um sobrescreveria o outro — a primeira coluna
   ficava sem o realce ao passar o mouse.

   A faixa transparente vale para TODA linha da tabela, colorida ou não:
   sem ela, as linhas sem grupo ficariam 4px deslocadas das outras. */
.tabela-orientadores > tbody > tr > *:first-child {
    border-left: 4px solid transparent;
}

.tabela-orientadores > tbody > tr.linha-orientador > *:first-child {
    border-left-color: var(--cor-orientador);
}

/* O select assume a cor do professor escolhido. Sem grupo, volta ao
   visual padrão do Bootstrap. */
.js-orientador select {
    border-color: var(--cor-orientador, var(--bs-border-color));
    color: var(--cor-orientador, inherit);
    font-weight: 500;
}

.js-orientador select:focus {
    border-color: var(--cor-orientador, var(--bs-border-color));
    box-shadow: 0 0 0 3px var(--cor-orientador-fraca, rgba(14, 107, 90, .2));
}

/* Legenda: um chip por professor, com a bolinha da cor dele. */
.legenda-orientadores {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .5rem;
    padding: .6rem .9rem;
}

.chip-orientador {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .16rem .6rem;
    border: 1px solid var(--cor-orientador);
    border-radius: 999px;
    background: var(--cor-orientador-fraca);
    font-size: .76rem;
    font-weight: 500;
    line-height: 1.5;
}

.chip-orientador .ponto {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--cor-orientador);
    flex: none;
}

.chip-orientador .total { color: var(--tinta-suave); }

/* Sem orientador nenhum: cinza, sem cor de grupo. */
.chip-orientador.sem-grupo {
    border-style: dashed;
    border-color: var(--borda-forte);
    background: transparent;
}