/* ============================================================================
   Família .ft-* — telas do Fit (Paginas.CSR/CRUDs: Turmas, Planos, Alunos).

   Até 23/10/2026 as três telas definiam o mesmo prefixo cada uma do seu jeito, num <style>
   próprio: .ft-toolbar era space-between numa e flex-end na outra, .ft-meta coluna ou linha,
   .ft-aviso amarelo ou neutro, e o card em #16181D. Esta folha é a ÚNICA definição: classe .ft-*
   nova nasce aqui. O que é de uma tela só usa o prefixo dela (rc-, ct-, cv-, rd-, fn-).

   Selo de situação NÃO é daqui: é o .sy-badge + .sy-badge-* do tema, em todas as telas do Fit.

   Só tokens do sayts-theme.css (carregado antes). Neste app 1rem = 14px.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Abas e barra de ferramentas
   --------------------------------------------------------------------------- */
.ft-abas { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.ft-aba {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  background: transparent; border: 1px solid var(--sy-border); color: inherit;
  border-radius: var(--sy-r-pill); padding: 6px 14px; font-size: .85rem;
}
.ft-aba.ativa { border-color: var(--sy-brand-violet); background: var(--sy-tint-violet); }

/* A busca (.sy-search do tema) e as ações ficam à direita, como no resto do painel; um texto de
   contexto (.ft-sub), quando houver, vai para a esquerda. */
.ft-toolbar { display: flex; gap: 12px; align-items: center; justify-content: flex-end; flex-wrap: wrap; margin: 0 0 16px; }
.ft-toolbar > .ft-sub { margin-right: auto; }
.ft-sub { font-size: .85rem; opacity: .7; }

.ft-filtro { max-width: 230px; }

/* ---------------------------------------------------------------------------
   Lista em linhas e grade de cards
   --------------------------------------------------------------------------- */
.ft-lista { display: flex; flex-direction: column; gap: 10px; }
.ft-linha {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: var(--sy-card); border: 1px solid var(--sy-border); border-radius: var(--sy-r-card); padding: 12px 16px;
}
.ft-linha.inativo { opacity: .6; }
.ft-linha.compacta { padding: 8px 12px; font-size: .85rem; }
.ft-linha-main h5 { margin: 0 0 6px; font-size: 1rem; }
/* Nome + dados da linha, empilhados (lista de quem parou de vir). */
.ft-linha-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ft-linha-acoes { display: flex; gap: 8px; }

/* Dados de apoio de uma linha, em fila. No card da grade (.ft-card), um embaixo do outro. */
.ft-meta { display: flex; gap: 4px 14px; flex-wrap: wrap; align-items: center; font-size: .8rem; opacity: .75; }
.ft-card .ft-meta { flex-direction: column; align-items: flex-start; }
.ft-meta-ficha { margin-bottom: 8px; }
/* Últimas faturas, dentro da ficha: lista compacta, separada do que vem antes. */
.ft-faturas { margin-top: 10px; gap: 6px; }

.ft-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.ft-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--sy-card); border: 1px solid var(--sy-border); border-radius: var(--sy-r-card);
}
.ft-card.inativo { opacity: .6; }
.ft-card-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ft-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ft-card-head h5 { margin: 0; font-size: 1.05rem; }
.ft-card-actions { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--sy-border); }
.ft-precos { display: flex; gap: 14px; flex-wrap: wrap; align-items: baseline; }
.ft-preco { font-weight: 700; font-size: 1.1rem; }
.ft-preco small { font-weight: 400; opacity: .65; font-size: .78rem; }
.ft-preco.alt { opacity: .8; font-size: .95rem; }
.ft-desc { margin: 0; font-size: .85rem; opacity: .75; }

/* ---------------------------------------------------------------------------
   Resumo (Alunos)
   --------------------------------------------------------------------------- */
.ft-resumo { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.ft-kpi {
  display: flex; flex-direction: column; min-width: 110px; padding: 10px 18px;
  background: var(--sy-card); border: 1px solid var(--sy-border); border-radius: var(--sy-r-card);
}
.ft-kpi strong { font-size: 1.4rem; }
.ft-kpi span { font-size: .76rem; opacity: .7; }

/* ---------------------------------------------------------------------------
   Ficha do aluno (Alunos)
   --------------------------------------------------------------------------- */
.ft-bloco { margin-top: 18px; }
.ft-head, .ft-ficha-head { display: flex; align-items: center; gap: 12px; }
.ft-head { justify-content: space-between; flex-wrap: wrap; }
.ft-ficha-head { width: 100%; }
.ft-head h5, .ft-ficha-head h5 { margin: 0; }
.ft-acoes-status { display: flex; gap: 8px; flex-wrap: wrap; }
.ft-inline { display: flex; gap: 8px; align-items: end; }
.ft-inline-campo { max-width: 160px; }
.ft-achado {
  display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: var(--sy-r-panel);
  border: 1px solid color-mix(in srgb, var(--sy-success) 40%, transparent);
}

/* FIT-21 — a barra lateral colorida deixa a lista varrível; o NÚMERO de dias continua escrito,
   porque quem decide para quem ligar precisa dele, não da cor. São três faixas, e a do meio
   (laranja) não tem token: fica em hex. */
.ft-corte { display: flex; align-items: center; gap: 8px; font-size: .82rem; opacity: .8; }
.ft-corte select { width: auto; }
.ft-ausente { border-left-width: 4px; }
.ft-ausente.leve { border-left-color: color-mix(in srgb, var(--sy-warning) 70%, transparent); }
.ft-ausente.atencao { border-left-color: rgba(235,120,40,.8); }
.ft-ausente.grave { border-left-color: color-mix(in srgb, var(--sy-danger) 90%, transparent); }
.ft-dias { font-weight: 600; opacity: 1; }
.ft-dias.leve { color: var(--sy-warning); }
.ft-dias.atencao, .ft-nunca { color: #EB7828; }
.ft-dias.grave { color: var(--sy-danger); }

/* ---------------------------------------------------------------------------
   Formulário, mensagens e vazio
   --------------------------------------------------------------------------- */
.ft-label { font-size: .85rem; opacity: .75; display: block; margin-bottom: 6px; }
.ft-hint { opacity: .65; font-size: .8rem; }
/* Dica embaixo de um campo. */
small.ft-hint { display: block; margin-top: 4px; }
.ft-hint.ft-hint-bloco { display: block; margin: 6px 0 14px; }
.ft-form-acoes { display: flex; gap: 10px; justify-content: flex-end; width: 100%; }

.ft-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ft-chip {
  display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; opacity: .75;
  font-size: .82rem; padding: 5px 12px; border-radius: var(--sy-r-pill); border: 1px solid var(--sy-border);
}
.ft-chip.on { opacity: 1; color: var(--sy-success); border-color: color-mix(in srgb, var(--sy-success) 45%, transparent); }

/* Aviso que pede ação (falta professor, falta plano). O .neutro é só informação. */
.ft-aviso {
  display: flex; gap: 8px; align-items: center; padding: 10px 14px; margin-bottom: 14px; font-size: .88rem;
  border-radius: var(--sy-r-panel); border: 1px solid color-mix(in srgb, var(--sy-warning) 45%, transparent); color: var(--sy-warning);
}
.ft-aviso.neutro { border-color: var(--sy-border); color: inherit; opacity: .85; }
.ft-erro {
  display: flex; gap: 8px; align-items: center; padding: 12px 16px; margin-bottom: 14px; font-size: .9rem;
  border-radius: var(--sy-r-panel); border: 1px solid color-mix(in srgb, var(--sy-danger) 45%, transparent); color: var(--sy-danger);
}
.ft-ok {
  padding: 12px 16px; margin-bottom: 14px; font-size: .9rem;
  border-radius: var(--sy-r-panel); border: 1px solid color-mix(in srgb, var(--sy-success) 40%, transparent); color: var(--sy-success);
}

.ft-vazio { text-align: center; padding: 40px 12px; opacity: .7; border: 1px dashed var(--sy-border); border-radius: var(--sy-r-card); }
.ft-vazio-mini { padding: 10px 2px; opacity: .7; font-size: .88rem; }