/* ============================================================
   Gestão Escolar — identidade "quadro-escolar" sobre Fomantic UI
   O framework cuida da anatomia; aqui mora só a alma da escola.
   ============================================================ */
:root {
    --ardosia-900: #12291d;
    --ardosia-700: #1b4332;
    --ardosia-500: #2d6a4f;
    --ardosia-100: #d8f3dc;
    --giz: #f7f5ef;
    --papel: #efece4;
    --tinta-suave: #5c6358;
    --fonte-base: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- Fonte padrão: Montserrat sobre o Fomantic ----------
   O Fomantic aplica Lato com boa especificidade, então cobrimos o
   body E os grupos de elementos que o framework estiliza por conta
   própria (cabeçalhos, menu, botões, campos de formulário, tabelas).
   Uma família só, num lugar só: trocar aqui troca o sistema inteiro. */
body,
.ui.menu,
.ui.header,
h1, h2, h3, h4, h5, h6,
.ui.button,
.ui.input > input,
.ui.form input,
.ui.form textarea,
.ui.form .field > label,
.ui.dropdown,
.ui.table,
.ui.message,
.ui.label,
.ui.statistic > .value,
.ui.statistic > .label {
    font-family: var(--fonte-base);
}

body { background: var(--giz); }
body.com-topo { padding-top: 54px; }

/* Topbar */
.topo-identidade.ui.menu { background: var(--ardosia-900); border-radius: 0; }
.topo-identidade .marca { font-weight: 800; font-size: 1.15rem; color: #fff !important; }
.topo-identidade .marca span { color: var(--ardosia-100); }

/* Corpo com sidebar */
.app-corpo { display: flex; align-items: stretch; min-height: calc(100vh - 54px); }
.app-corpo > .ui.vertical.menu.sidebar-app {
    flex: 0 0 240px; width: 240px !important; margin: 0; border-radius: 0;
    border-top: none; border-bottom: none; border-left: none;
}
.sidebar-app .active.item { background: var(--ardosia-100) !important; color: var(--ardosia-900) !important; font-weight: 600; }
.conteudo { flex: 1; padding: 1.6rem 2rem 3rem; min-width: 0; }

/* Botão primário na cor da casa */
.ui.primary.button, .ui.primary.buttons .button { background-color: var(--ardosia-700); }
.ui.primary.button:hover, .ui.primary.button:focus { background-color: var(--ardosia-500); }
.ui.primary.button:active { background-color: var(--ardosia-900); }

/* Cabeçalho das tabelas com o tom da lousa */
.ui.table thead th { background: var(--ardosia-100); color: var(--ardosia-900); }

/* Links do conteúdo */
.conteudo a:not(.ui):not(.item) { color: var(--ardosia-500); }
.conteudo a:not(.ui):not(.item):hover { color: var(--ardosia-700); }

/* ---------- utilidades preservadas do layout antigo ---------- */
.pagina-cabecalho { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.pagina-cabecalho .ui.header { margin: 0; }
.grupo-botoes { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.form-inline { display: inline-block; margin: 0; }
.celula-acoes { white-space: nowrap; }
.texto-suave { color: var(--tinta-suave); }
.dica { color: var(--tinta-suave); font-size: 0.88rem; margin: 0.7rem 0 0; }
.vazio { color: var(--tinta-suave); font-style: italic; }
.filtro-barra { display: flex; gap: 0.8rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: 1rem; }
.rotulo-mini { display: inline-flex; flex-direction: column; gap: 0.2rem; font-size: 0.78rem; color: var(--tinta-suave); }

/* Formulários de linha: Fomantic estiliza os campos, o flex alinha */
/* ============================================================
   .form-linha — o formulário de UMA linha
   ------------------------------------------------------------
   O Fomantic aplica width:100% em todo input dentro de .ui.form —
   ótimo no grid de campos, desastroso aqui: cada input virava um
   bloco da largura da tela e o flex não tinha o que distribuir
   (era o campo de data com 1600px do print).
   Aqui o input volta a ter largura de conteúdo: cada tipo ganha a
   sua, o campo de texto principal estica, e os botões ficam na
   mesma linha. No celular, empilha inteiro.
   ============================================================ */
.ui.form.form-linha { display: flex; gap: .5rem; align-items: flex-end; flex-wrap: wrap; }
.ui.form.form-linha > * { align-self: flex-end; }
.ui.form.form-linha .ui.checkbox { margin-bottom: .55rem; }

/* O default: input não estica mais do que precisa */
.ui.form.form-linha input,
.ui.form.form-linha select,
.ui.form.form-linha .ui.selection.dropdown {
    width: auto; min-width: 0; margin: 0;
}

/* Larguras por TIPO de dado — data é data, número é número */
.ui.form.form-linha > input[type="date"] { width: 165px; flex: 0 0 auto; }
.ui.form.form-linha > input[type="month"] { width: 150px; flex: 0 0 auto; }
.ui.form.form-linha > input[type="number"],
.ui.form.form-linha > input[name="peso"],
.ui.form.form-linha > input[name="ordem"],
.ui.form.form-linha > input[name="num_parcelas"],
.ui.form.form-linha > input[name="dia_vencimento"],
.ui.form.form-linha > input[name="aulas_semanais"],
.ui.form.form-linha > input[name="carga_horaria"] { width: 92px; flex: 0 0 auto; text-align: center; }
.ui.form.form-linha > input[name="valor_total"],
.ui.form.form-linha > input[name="desconto"],
.ui.form.form-linha > input[name="multa_atraso"],
.ui.form.form-linha > input[name="juros_mes"],
.ui.form.form-linha > input[name="desconto_pontualidade"] { width: 110px; flex: 0 0 auto; }

/* O campo principal (nome, título, motivo) puxa o espaço que sobra,
   mas com teto — texto de 1900px não se lê, se varre.
   ATENÇÃO: só vale para input FILHO DIRETO da .form-linha. Dentro de
   .campo-rotulado (que é flex-column) um flex-grow:1 esticaria o input
   na VERTICAL — foi exatamente o bug das caixas de 226px de altura. */
.ui.form.form-linha > input[type="text"]:not([name="peso"]),
.ui.form.form-linha > input:not([type]),
.ui.form.form-linha > input[name="nome"],
.ui.form.form-linha > input[name="titulo"],
.ui.form.form-linha > input[name="justificativa"],
.ui.form.form-linha > input[name="motivo"],
.ui.form.form-linha > input[name="despacho"] {
    flex: 1 1 220px; min-width: 180px; max-width: 520px;
}

/* Botão nunca quebra sozinho para a linha de baixo */
.ui.form.form-linha .ui.button,
.ui.form.form-linha button { flex: 0 0 auto; margin: 0; white-space: nowrap; }

/* Campo com rótulo em cima dentro da linha.
   ATENÇÃO: height:auto + align-self:flex-end são obrigatórios — sem
   eles o align-items:flex-end do container estica o span até a altura
   do bloco e o campo vira uma caixa gigante com o texto boiando. */
.form-linha .campo-rotulado {
    display: inline-flex; flex-direction: column; gap: 3px;
    flex: 0 0 auto; height: auto; align-self: flex-end;
}
.form-linha .campo-rotulado.cresce { flex: 1 1 220px; min-width: 180px; max-width: 420px; }
.form-linha .campo-rotulado > .rotulo-mini { line-height: 1.2; }
.form-linha .campo-rotulado > input,
.form-linha .campo-rotulado > select,
.form-linha .campo-rotulado > .ui.selection.dropdown {
    width: 100%; height: auto;
    flex: 0 0 auto !important;   /* blindagem: nada estica na vertical aqui */
    align-self: stretch;
}
/* Datas e peso dentro do campo rotulado mantêm a largura do tipo */
.form-linha .campo-rotulado > input[type="date"] { width: 165px; }
.form-linha .campo-rotulado > input[name="peso"] { width: 92px; }

@media (max-width: 720px) {
    .ui.form.form-linha { gap: .6rem; }
    .ui.form.form-linha input,
    .ui.form.form-linha select,
    .ui.form.form-linha .ui.selection.dropdown,
    .form-linha .campo-rotulado { width: 100%; flex: 1 1 100%; max-width: none; }
    .ui.form.form-linha .ui.button { width: 100%; }
}

/* ---- Período letivo: cada um é um bloco, não campos soltos ---- */
.linha-periodo {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    padding: .9rem 1rem; margin-bottom: .6rem;
    background: #fff; border: 1px solid var(--borda, #e2ded3); border-radius: 8px;
}
.linha-periodo > * { align-self: flex-end; }
.linha-periodo > .ui.form.form-linha { flex: 1 1 auto; height: auto; }
.linha-periodo .acoes-periodo { display: flex; gap: .4rem; align-items: flex-end; flex: 0 0 auto; }
.linha-periodo .acoes-periodo form { margin: 0; }
.periodo-encerrado { background: #fbfaf7; }
.periodo-encerrado .resumo { display: flex; flex-direction: column; gap: 2px; }

/* Grades de formulário (2 colunas fluidas) */
.ui.form .form-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.4rem 1.2rem; }

/* Matriz de permissões e habilitações */
.lista-checkboxes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.5rem 1.2rem; }
.lista-checkboxes code { display: block; font-size: 0.72rem; color: var(--tinta-suave); }

/* Editor da grade curricular */
.linha-grade-item { display: flex; align-items: flex-end; gap: 0.8rem; padding: 0.55rem 0; border-top: 1px solid rgba(34,36,38,.1); }
.linha-grade-item:first-of-type { border-top: none; }
.nome-disciplina-grade { min-width: 200px; font-weight: 600; padding-bottom: 0.55rem; }
.total-linha { margin: 0.8rem 0 0; padding-top: 0.6rem; border-top: 2px solid rgba(34,36,38,.15); font-size: 0.92rem; }

/* Períodos do ano letivo */
.linha-periodo { padding-top: 0.6rem; border-top: 1px solid rgba(34,36,38,.1); }
.linha-periodo:first-of-type { border-top: none; }
.linha-periodo-status { display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0 0.6rem; }
.btn-link-suave { background: none; border: none; padding: 0; cursor: pointer; color: var(--ardosia-500); font-size: 0.82rem; text-decoration: underline; }
.btn-link-suave:hover { color: var(--ardosia-700); }

/* Quadro de horários (peça sob medida) */
.card-quadro { overflow-x: auto; }
.quadro-horarios { width: 100%; border-collapse: collapse; }
.quadro-horarios th, .quadro-horarios td { border: 1px solid rgba(34,36,38,.15); padding: 0.4rem; text-align: center; vertical-align: middle; }
.quadro-horarios thead th { background: var(--ardosia-700); color: #fff; font-size: 0.85rem; padding: 0.55rem 0.4rem; }
.quadro-horarios .col-slot { background: var(--ardosia-100); color: var(--ardosia-900); font-size: 0.82rem; white-space: nowrap; min-width: 92px; }
.quadro-horarios .col-slot span { display: block; font-weight: 400; font-size: 0.75rem; }
.quadro-horarios td { min-width: 112px; height: 60px; }
.aula-celula { position: relative; display: flex; flex-direction: column; gap: 0.05rem; background: var(--ardosia-100); border-radius: 6px; padding: 0.35rem 0.3rem 0.3rem; }
.aula-sigla { font-weight: 700; color: var(--ardosia-900); font-size: 0.9rem; }
.aula-prof { font-size: 0.72rem; color: var(--tinta-suave); }
.aula-celula .form-inline { position: absolute; top: 2px; right: 4px; }
.btn-x { background: none; border: none; cursor: pointer; line-height: 1; color: #b91c1c; font-size: 0.95rem; padding: 0 0.15rem; }
.btn-x:hover { color: #7f1d1d; }
.form-marcar { display: flex; gap: 0.25rem; justify-content: center; align-items: center; }
.form-marcar select { font-size: 0.78rem; max-width: 96px; padding: 0.25rem; border: 1px solid rgba(34,36,38,.15); border-radius: 4px; background: #fff; }
.btn-mais { background: var(--ardosia-500); color: #fff; border: none; border-radius: 6px; width: 26px; height: 26px; cursor: pointer; font-size: 1rem; line-height: 1; }
.btn-mais:hover { background: var(--ardosia-700); }

/* Telas de acesso (login / escolher escola) */
.tela-guest { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; }
.coluna-acesso { width: 100%; max-width: 430px; }
.marca-guest { text-align: center; margin-bottom: 1.2rem; }
.marca-guest h1 { color: var(--ardosia-900); font-size: 2rem; margin: 0; font-weight: 800; }
.marca-guest h1 span { color: var(--ardosia-500); }
.marca-guest p { color: var(--tinta-suave); margin: 0.3rem 0 0; }
.btn-vinculo { text-align: left !important; margin-bottom: 0.6rem !important; }
.btn-vinculo strong { display: block; }
.btn-vinculo span { font-size: 0.82rem; color: var(--tinta-suave); font-weight: 400; }

/* ---- Financeiro: coluna Ações compacta nas parcelas ---- */
.celula-acoes .ui.form.form-linha { gap: 4px; margin: 0; flex-wrap: nowrap; }
.celula-acoes input[type="date"] { width: 138px; }
.celula-acoes select { width: 112px; }
.cancelar-detalhe { margin-top: 4px; }
.cancelar-detalhe summary { cursor: pointer; color: #9f3a38; font-size: 0.85em; user-select: none; }
.cancelar-detalhe[open] { padding-bottom: 2px; }
.cancelar-detalhe input[name="motivo"] { width: 210px; }

/* ---- Ficha do aluno (detalhe) ---- */
.ficha-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px 22px; }
.ficha-item { display: flex; flex-direction: column; gap: 2px; }
.ficha-item--largo { grid-column: 1 / -1; }
.ficha-valor { font-weight: 600; }
.form-vincular select { max-width: 380px; }
.celula-acoes { white-space: nowrap; }

/* ---- Planos de pagamento: cartões com rótulos ---- */
.plano-item { display: flex; justify-content: space-between; align-items: flex-start;
              gap: 18px; flex-wrap: wrap; padding: 14px 2px; border-bottom: 1px solid #ececec; }
.plano-item:last-of-type { border-bottom: none; }
.plano-form { flex: 1 1 560px; }
.ui.form .plano-nome { max-width: 480px; font-weight: 600; margin-bottom: 8px; }
.plano-campos { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.plano-campos .campo { display: flex; flex-direction: column; gap: 3px; }
.plano-campos .campo input { width: 120px; }
.plano-campos .campo input.campo-curto { width: 86px; }
.plano-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
              min-width: 140px; padding-top: 4px; }

/* ---- Menu lateral: módulos retráteis ---- */
.sidebar-app { padding: .5rem 0; background: #fff; }

.sidebar-app .item-painel {
    display: flex; align-items: center; gap: .6rem;
    padding: .7rem 1.1rem; margin: 0 .5rem .4rem;
    border-radius: 8px; color: var(--ardosia-900); font-weight: 600;
    font-size: .95rem; text-decoration: none;
}
.sidebar-app .item-painel:hover { background: var(--papel); }
.sidebar-app .item-painel.active { background: var(--ardosia-100); }
.sidebar-app .item-painel i.icon { color: var(--ardosia-500); margin: 0; }

.sidebar-app .modulo-menu { margin: 0 .5rem 2px; }
.sidebar-app .modulo-menu summary.modulo-titulo {
    display: flex; align-items: center; gap: .6rem;
    padding: .7rem 1.1rem; border-radius: 8px; cursor: pointer;
    font-weight: 600; font-size: .95rem; color: var(--ardosia-900);
    list-style: none; user-select: none; transition: background .12s ease;
}
.sidebar-app .modulo-menu summary::-webkit-details-marker { display: none; }
.sidebar-app .modulo-menu summary:hover { background: var(--papel); }
.sidebar-app .modulo-menu[open] summary.modulo-titulo { color: var(--ardosia-700); }
.sidebar-app .modulo-titulo > i.icon { color: var(--ardosia-500); margin: 0; width: 1.1em; }
.sidebar-app .modulo-titulo > span { flex: 1; }
.sidebar-app .modulo-titulo .seta {
    color: var(--tinta-suave); font-size: .8em; margin: 0;
    transition: transform .18s ease; opacity: .7;
}
.sidebar-app .modulo-menu[open] .seta { transform: rotate(180deg); }

.sidebar-app .modulo-corpo { padding: .2rem 0 .5rem; }
.sidebar-app .grupo-menu {
    padding: .5rem 1.1rem .15rem 1.7rem; font-size: .67rem; font-weight: 700;
    letter-spacing: .07em; text-transform: uppercase; color: var(--tinta-suave); opacity: .7;
}
.sidebar-app .item-menu {
    display: block; padding: .42rem 1.1rem .42rem 1.7rem;
    margin-left: 1.1rem; border-left: 2px solid #eceae3;
    color: var(--tinta); font-size: .9rem; text-decoration: none;
    transition: color .12s ease, border-color .12s ease;
}
.sidebar-app .item-menu:hover { color: var(--ardosia-500); border-left-color: var(--ardosia-100); }
.sidebar-app .item-menu.active {
    color: var(--ardosia-700); font-weight: 600;
    border-left-color: var(--ardosia-500); background: var(--ardosia-100);
    border-radius: 0 6px 6px 0;
}


/* ============================================================
   DROPDOWN (Fomantic) — regras que impedem o esprememto
   ------------------------------------------------------------
   O componente herda a largura do container. Em linha compacta,
   filtro de topo ou célula de tabela, isso apertava o texto até
   quebrar em três linhas. Aqui cada contexto ganha largura mínima
   e o rótulo é forçado a UMA linha, com elipse quando não couber.
   ============================================================ */

/* --- Base: em qualquer lugar --- */
.ui.selection.dropdown {
    min-width: 190px;
    min-height: 2.71428571em;
    padding: .67857143em 2.1em .67857143em 1em;
    white-space: nowrap;
    display: inline-flex; align-items: center;
}
.ui.selection.dropdown > .text {
    display: block; width: 100%;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.3;
}
.ui.selection.dropdown > .dropdown.icon { top: auto; padding: 0; right: .9em; }
.ui.selection.dropdown:focus,
.ui.selection.dropdown.active,
.ui.selection.dropdown.active:hover { border-color: var(--ardosia-500); }
.ui.selection.dropdown .menu > .item.selected,
.ui.selection.dropdown .menu > .item.active.selected { background: var(--ardosia-100); }

/* Menu: nunca mais estreito que o campo, nem gigante na tela */
.ui.selection.dropdown .menu {
    min-width: 100% !important; width: auto !important;
    max-height: 16rem; border-color: var(--ardosia-500);
}
.ui.selection.dropdown .menu > .item { white-space: nowrap; line-height: 1.35; }

/* Dentro do grid do form: ocupa a coluna inteira */
.ui.form .field > .ui.selection.dropdown,
.ui.form .fields .field > .ui.selection.dropdown { width: 100%; min-width: 0; }

/* O dropdown é inline-flex e ignorava a largura da coluna do grid
   (.three wide field): esticava até 1280px. Aqui ele volta a caber
   na coluna que o Fomantic reservou. */
.ui.form .fields > .field > .ui.selection.dropdown { width: 100%; max-width: 100%; min-width: 0; }
/* Campo solto (fora do grid) não precisa da tela inteira. */
.ui.form > .field > .ui.selection.dropdown,
.ui.form .segment > .field > .ui.selection.dropdown { max-width: 420px; }

/* Linha compacta (form-linha): respira, mas não estica demais */
.form-linha > .ui.selection.dropdown,
.ui.form.form-linha .ui.selection.dropdown { min-width: 210px; max-width: 340px; }

/* Filtro de topo: largura confortável para nome de turma/período */
.filtro-barra .ui.selection.dropdown { min-width: 230px; }

/* Dentro de tabela (célula de ações): compacto, mas legível */
.celula-acoes .ui.selection.dropdown {
    min-width: 132px; min-height: 2.2em;
    padding: .45em 1.9em .45em .7em; font-size: .92em;
}
.celula-acoes .ui.selection.dropdown .menu > .item { padding: .5em .9em !important; font-size: .95em; }

/* Cartão de plano de pagamento */
.plano-campos .ui.selection.dropdown { min-width: 150px; }

/* Seleção de plano na matrícula: nome de plano é longo */
.ui.form .ui.selection.dropdown[name="plano_pagamento_id"],
.ui.selection.dropdown.plano-largo { min-width: 280px; }

/* Chamada: P/F/FJ é lista curta — não precisa de largura de contrato */
.ui.table .ui.selection.dropdown { min-width: 150px; }

/* Busca dentro do dropdown herda o campo, sem pular */
.ui.search.selection.dropdown > input.search { line-height: 1.3; padding: .67857143em 2.1em .67857143em 1em; }
.celula-acoes .ui.search.selection.dropdown > input.search { padding: .45em 1.9em .45em .7em; }

/* Desabilitado continua legível (chamada em período encerrado) */
.ui.selection.dropdown.disabled { opacity: .5; }

/* required não preenchido: o vermelho que o navegador dava de graça */
.ui.selection.dropdown.campo-invalido {
    border-color: #e0b4b4 !important; background: #fff6f6 !important;
}
.ui.selection.dropdown.campo-invalido > .text { color: #9f3a38; }

/* Celular: dropdown ocupa a largura toda, menu não vaza da tela */
@media (max-width: 720px) {
    .ui.selection.dropdown,
    .form-linha > .ui.selection.dropdown,
    .filtro-barra .ui.selection.dropdown { width: 100%; min-width: 0; max-width: none; }
}


/* ============================================================
   CELULAR — a página não pode vazar
   Tabela de 12 colunas não cabe em 390px. Em vez de espremer
   (ilegível) ou deixar a página inteira deslizar (o vazamento de
   até 1194px medido), a TABELA rola sozinha dentro do bloco.
   ============================================================ */
@media (max-width: 900px) {
    .conteudo { padding: 1rem .8rem 2rem; min-width: 0; }
    .ui.segment { overflow-x: auto; }
    .ui.table { min-width: 640px; }               /* rola dentro do segment */
    .pagina-cabecalho { flex-wrap: wrap; gap: .5rem; }
    .ficha-grade { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
    .plano-item { flex-direction: column; align-items: stretch; }
    .plano-meta { align-items: flex-start; }
    .linha-periodo { flex-direction: column; align-items: stretch; }
    .linha-periodo .acoes-periodo { justify-content: flex-end; }
    .app-corpo { flex-direction: column; }
    .app-corpo > .sidebar-app { flex: 0 0 auto; width: 100% !important; }
}
@media (max-width: 720px) {
    .ui.form .fields { flex-direction: column; margin: 0; }
    .ui.form .fields > .field { width: 100% !important; padding: 0 0 .6rem; }
    .filtro-barra { flex-direction: column; align-items: stretch; }
}
html, body { max-width: 100%; overflow-x: hidden; }


/* ---- Filtro de topo: campo de filtro não é campo de formulário ----
   .filtro-barra é um <form> com .ui.form, então o Fomantic mandava
   width:100% em tudo: o select de turma e o campo de busca esticavam
   por 1300px da tela. Filtro tem largura de filtro. */
.filtro-barra { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.ui.form.filtro-barra input,
.ui.form.filtro-barra select,
.filtro-barra input,
.filtro-barra select { width: auto; margin: 0; }
.ui.form.filtro-barra input[type="search"],
.ui.form.filtro-barra input[name="busca"],
.filtro-barra input[name="busca"] { width: 280px; }
.ui.form.filtro-barra input[type="month"],
.ui.form.filtro-barra input[type="date"],
.filtro-barra input[type="month"],
.filtro-barra input[type="date"] { width: 170px; }
.ui.form.filtro-barra select,
.filtro-barra select,
.filtro-barra .ui.selection.dropdown { min-width: 200px; max-width: 320px; }
.filtro-barra .ui.button { flex: 0 0 auto; }
@media (max-width: 720px) {
    .ui.form.filtro-barra input, .ui.form.filtro-barra select,
    .filtro-barra input, .filtro-barra select,
    .filtro-barra .ui.selection.dropdown { width: 100%; max-width: none; }
}


/* ============================================================
   BLOCO RECOLHÍVEL — o mesmo <details> do menu, agora no conteúdo
   ------------------------------------------------------------
   Seções de consulta ocasional (responsáveis, matrículas, listas
   longas) recolhem para a tela não virar um paredão. O <summary>
   carrega um RESUMO ("· 2 vinculados"), então dá para decidir se
   vale abrir sem abrir. Nativo: funciona sem JavaScript.
   ============================================================ */
.bloco-recolhivel { padding: 0; overflow: visible; }
.bloco-recolhivel > summary {
    display: flex; align-items: center; gap: .6rem;
    padding: .9rem 1.1rem; cursor: pointer; user-select: none;
    list-style: none; border-radius: .28571429rem;
    font-size: 1.1rem; font-weight: 700; color: var(--ardosia-900);
    transition: background .12s ease;
}
.bloco-recolhivel > summary::-webkit-details-marker { display: none; }
.bloco-recolhivel > summary:hover { background: var(--papel); }
.bloco-recolhivel[open] > summary {
    border-bottom: 1px solid rgba(34,36,38,.15);
    border-radius: .28571429rem .28571429rem 0 0;
}
.bloco-recolhivel > summary .seta-bloco {
    color: var(--tinta-suave); font-size: .75em; opacity: .7;
    transition: transform .18s ease; margin-left: auto;
}
.bloco-recolhivel[open] > summary .seta-bloco { transform: rotate(180deg); }
.bloco-recolhivel > summary .resumo-bloco {
    font-size: .82rem; font-weight: 500; color: var(--tinta-suave);
}
.bloco-recolhivel > .corpo-bloco { padding: 1.1rem; }
@media (max-width: 900px) {
    .bloco-recolhivel > .corpo-bloco { padding: .8rem; overflow-x: auto; }
}

/* Papéis do responsável no formulário de vínculo */
.papeis-vinculo { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.papeis-vinculo .ui.checkbox { margin: 0; }

/* ---------- Abas de página (ex.: diário do professor) ----------
   Menu "secondary pointing" do Fomantic com o acento da lousa; o
   segment da aba ativa senta colado no menu, sem margem dupla. */
.abas-pagina.ui.secondary.pointing.menu {
    margin-bottom: 0;
    border-bottom-color: rgba(27, 67, 50, .18);
}
.abas-pagina.ui.secondary.pointing.menu .item { color: var(--tinta-suave); }
.abas-pagina.ui.secondary.pointing.menu .active.item,
.abas-pagina.ui.secondary.pointing.menu .active.item:hover {
    color: var(--ardosia-700);
    border-color: var(--ardosia-500);
    font-weight: 600;
}
.abas-pagina .ui.circular.label { background: var(--ardosia-100); color: var(--ardosia-900); }
.abas-pagina ~ .ui.tab.segment { margin-top: 0; }

/* ---------- Acordeão de Cursos e séries ----------
   Título ativo com o verde da lousa; o acordeão de disciplinas
   dentro da tabela fica discreto, sem borda própria. */
.cursos-acordeao.ui.styled.accordion .title { color: var(--ardosia-900); }
.cursos-acordeao.ui.styled.accordion .active.title { color: var(--ardosia-700); }
/* O acordeão de disciplinas fica DENTRO de um styled accordion, e o
   Fomantic dá caixa (sombra/borda/fundo) a acordeões aninhados. As
   regras abaixo vencem a especificidade dele e transformam o bloco
   em texto puro, alinhado à célula da tabela. */
.cursos-acordeao.ui.styled.accordion .acordeao-disciplinas.accordion {
    box-shadow: none;
    background: transparent;
    border-radius: 0;
    margin: 0;
    width: 100%;
}
.cursos-acordeao.ui.styled.accordion .acordeao-disciplinas .title,
.cursos-acordeao.ui.styled.accordion .acordeao-disciplinas .title:first-child {
    border-top: none;
    padding: 0;
    color: var(--ardosia-700);
    font-weight: 600;
}
.cursos-acordeao.ui.styled.accordion .acordeao-disciplinas .content {
    padding: .3rem 0 0 1.1rem;
}
/* Linha da série inteira convida ao clique (JS na view de cursos) */
.cursos-acordeao .linha-expansivel { cursor: pointer; }
.cursos-acordeao .linha-expansivel:hover td { background: rgba(27, 67, 50, .04); }