/* =============================================================================
   ERP TheCamp — Sistema de design (skin "default")
   Camada POR CIMA do Bootstrap 5.3 (ver ADR-0008). CSP-safe: nada de inline.
   Tema claro padrão + escuro via [data-bs-theme=dark] (cookie tc_theme).
   Seções: 1) Tokens  2) Base/tipografia  3) Shell (topbar/sidebar)
           4) Page header  5) Botões  6) Cards/superfícies  7) Stat cards
           8) Formulários  9) Tabelas  10) Filtros  11) Pills/badges
           12) Flash/alertas  13) Dialog/confirm  14) Estados (vazio/loading)
           15) Auth helpers  16) Utilitários  17) Responsivo  18) Motion
   ========================================================================== */

/* ----------------------------------------------------------------- 1) TOKENS */
@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("../fonts/PlusJakartaSans-Variable.woff2") format("woff2");
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
}

:root {
    /* Marca TheCamp (ver logo) */
    --tc-brand: #e84525;
    /* laranja-vermelho */
    --tc-brand-dark: #cf3c1f;
    --tc-brand-2: #ffcc01;
    /* amarelo */
    --tc-brand-rgb: 232, 69, 37;
    --tc-brand-2-rgb: 255, 204, 1;
    /* A marca como CHAPA sob texto branco. O `--tc-brand` puro dá 3,96:1 com branco por cima —
       abaixo do 4,5:1 do WCAG AA. O bloco "UMA COR, UM SIGNIFICADO" já dizia que a marca não
       serve para texto pequeno, mas o rótulo DENTRO do botão primário é exatamente isso.
       Estes dois não mudam por tema, mesma regra do `--tc-danger`: branco por cima nos dois. */
    --tc-brand-ink: #cf3c1f;
    /* 4,86:1 com branco */
    --tc-brand-ink-hover: #b0330f;
    /* 6,3:1 com branco */
    --tc-ink: #16161a;
    /* fundo escuro (hero do login) */

    /* Layout */
    --tc-sidebar-w: 248px;
    --tc-header-h: 60px;
    --tc-radius: 14px;
    --tc-radius-sm: 10px;
    --tc-radius-xs: 6px;
    --tc-radius-pill: 999px;
    --tc-radius-circle: 50%;

    /* Tipografia. A display é local (OFL 1.1), sem CDN nem abertura de CSP. */
    --tc-font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --tc-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --tc-text-xs: 0.75rem;
    --tc-text-sm: 0.8125rem;
    --tc-text-base: 0.875rem;
    --tc-text-lg: 1rem;
    --tc-text-xl: 1.25rem;
    --tc-text-2xl: 2rem;
    --tc-text-page-title: clamp(1.4rem, 2.4vw, 1.8rem);
    --tc-text-relative-sm: 0.875em;

    /* Ritmo espacial em quartos de rem. Meios passos existem só onde o componente
       realmente precisa de densidade intermediária; não há valor novo fora da escala. */
    --tc-space-0-5: 0.125rem;
    --tc-space-1: 0.25rem;
    --tc-space-1-5: 0.375rem;
    --tc-space-2: 0.5rem;
    --tc-space-2-5: 0.625rem;
    --tc-space-3: 0.75rem;
    --tc-space-3-5: 0.875rem;
    --tc-space-4: 1rem;
    --tc-space-5: 1.25rem;
    --tc-space-6: 1.5rem;
    --tc-space-7: 1.75rem;
    --tc-space-8: 2rem;
    --tc-space-9: 2.25rem;
    --tc-space-10: 2.5rem;
    --tc-space-11: 2.75rem;
    --tc-space-12: 3rem;

    /* Camadas nomeadas. Os números acompanham a escala do Bootstrap, mas o uso deixa
       de depender de quem lembra qual inteiro fica acima de qual. */
    --tc-z-content: 1;
    --tc-z-sticky-actions: 3;
    --tc-z-sidebar-backdrop: 1029;
    --tc-z-topbar: 1030;
    --tc-z-mobile-sidebar: 1031;
    --tc-z-scrolltop: 1035;
    --tc-z-menu: 1040;
    --tc-z-rail: 1041;
    --tc-z-modal: 1055;
    --tc-z-ddi-root: 1056;
    --tc-z-ddi-menu: 1057;
    --tc-z-datepicker: 1060;
    --tc-z-toast: 1070;
    --tc-z-overlay: 1080;
    --tc-z-skip-link: 1100;

    /* Breakpoints únicos (custom properties não funcionam em @media):
       xs 480 · sm 575,98 · md 767,98 · lg 991,98 · xl 1199,98. */

    /* Transições */
    --tc-t-fast: 0.12s ease;
    --tc-t: 0.2s ease;
}


/* Tema CLARO (padrão) */
:root,
[data-bs-theme="light"] {
    --tc-app-bg: #f4f5f8;
    --tc-surface: #ffffff;
    --tc-surface-2: #f8f9fb;
    --tc-elev: #ffffff;
    --tc-border: rgba(16, 16, 26, 0.10);
    --tc-border-strong: rgba(16, 16, 26, 0.16);
    --tc-ink-1: #15161c;
    --tc-ink-2: #4a4f5a;
    /* Desvio D-16 (Sprint 9): era #757b88, ~4.25:1 sobre a superfície — abaixo do 4.5:1 do
       WCAG AA. Como quase todo texto secundário do sistema aponta para este token (rótulo de
       seção, tag, form-text, backlink, botão secundário), o ajuste é aqui, não em 20 regras. */
    --tc-muted: #656b78;
    --tc-shadow-sm: 0 1px 2px rgba(16, 16, 26, 0.06), 0 1px 3px rgba(16, 16, 26, 0.05);
    --tc-shadow: 0 4px 14px rgba(16, 16, 26, 0.08);
    --tc-shadow-lg: 0 18px 48px rgba(16, 16, 26, 0.16);
    --tc-active-bg: rgba(var(--tc-brand-rgb), 0.10);
    --tc-hover-bg: rgba(16, 16, 26, 0.045);

    /* Papéis da cor — ver o bloco "UMA COR, UM SIGNIFICADO" logo abaixo do tema escuro. */
    --tc-link: #be3717;
    /* 5,6:1 sobre a superfície branca; 5,2:1 sobre o fundo do app */
    --tc-link-hover: #96280e;
    --tc-focus: #15161c;
    --tc-focus-soft: rgba(21, 22, 28, 0.16);
    --tc-danger: #a4161a;
    --tc-danger-rgb: 164, 22, 26;
    --tc-danger-text: #a4161a;
    --tc-success: #1a7f4b;
    --tc-success-rgb: 26, 127, 75;
    --tc-success-text: #1a7f4b;
    --tc-warn: #b45309;
    --tc-warn-text: #8a4008;

    /* Cores CATEGÓRICAS da linha do tempo da matrícula (ADR-0082). Não são papéis de estado:
       elas só separam um idioma do outro e o marco do nivelamento do marco de promoção, numa
       superfície em que a marca já está ocupada pela própria matrícula. Por isso vivem aqui e
       não em --tc-brand/--tc-success/--tc-danger. Sobre elas escreve-se --tc-timeline-on. */
    --tc-timeline-1: #2b5f9e;
    --tc-timeline-2: #9c520f;
    --tc-timeline-leveling: #5c3f9c;
    --tc-timeline-on: #ffffff;

    /* Harmoniza o Bootstrap com a marca */
    --bs-body-bg: var(--tc-app-bg);
    --bs-body-color: var(--tc-ink-1);
    --bs-border-color: var(--tc-border);
    --bs-secondary-color: var(--tc-muted);
    --bs-danger: var(--tc-danger);
    --bs-danger-rgb: var(--tc-danger-rgb);
    --bs-success: var(--tc-success);
    --bs-success-rgb: var(--tc-success-rgb);
    --bs-code-color: var(--tc-link);
    --bs-link-color: var(--tc-link);
    --bs-link-hover-color: var(--tc-link-hover);

    /* Garante ícones nativos escuros (relógio do time, calendário do date) mesmo
       com o SO em modo escuro — senão herdam o color-scheme do sistema. */
    color-scheme: light;
}

/* Tema ESCURO */
[data-bs-theme="dark"] {
    --tc-app-bg: #0c0c10;
    --tc-surface: #16161c;
    --tc-surface-2: #1b1c23;
    --tc-elev: #1d1e26;
    --tc-border: rgba(255, 255, 255, 0.10);
    --tc-border-strong: rgba(255, 255, 255, 0.18);
    --tc-ink-1: #eef0f4;
    --tc-ink-2: #b9bec9;
    --tc-muted: #a2a8b5; /* D-16: era #8b909c, abaixo de 4.5:1 sobre o fundo escuro */
    --tc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --tc-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    --tc-shadow-lg: 0 22px 55px rgba(0, 0, 0, 0.6);
    --tc-active-bg: rgba(var(--tc-brand-rgb), 0.18);
    --tc-hover-bg: rgba(255, 255, 255, 0.06);

    /* Papéis da cor — ver o bloco "UMA COR, UM SIGNIFICADO" logo abaixo. */
    --tc-link: #ff8a66;
    --tc-link-hover: #ffab92;
    --tc-focus: #eef0f4;
    --tc-focus-soft: rgba(238, 240, 244, 0.22);
    --tc-danger: #a4161a;
    /* preenchimento: branco sobre ele dá 7,7:1 nos dois temas */
    --tc-danger-rgb: 164, 22, 26;
    --tc-danger-text: #ff8b80;
    --tc-success: #1a7f4b;
    --tc-success-rgb: 26, 127, 75;
    --tc-success-text: #4ad991;
    --tc-warn: #b45309;
    --tc-warn-text: #fdba74;

    /* No escuro as três categóricas clareiam para continuar legíveis sobre o fundo #16161c, e
       o texto que anda por cima delas escurece junto — senão a barra de contrato preenchida
       ficaria branco sobre azul-claro. */
    --tc-timeline-1: #78b0ec;
    --tc-timeline-2: #e9a05c;
    --tc-timeline-leveling: #b49bec;
    --tc-timeline-on: #101018;

    --bs-body-bg: var(--tc-app-bg);
    --bs-body-color: var(--tc-ink-1);
    --bs-emphasis-color: var(--tc-ink-1);
    --bs-border-color: var(--tc-border);
    --bs-secondary-color: var(--tc-muted);
    --bs-tertiary-bg: var(--tc-surface-2);
    --bs-danger: var(--tc-danger);
    --bs-danger-rgb: var(--tc-danger-rgb);
    --bs-success: var(--tc-success);
    --bs-success-rgb: var(--tc-success-rgb);
    --bs-code-color: var(--tc-link);
    --bs-link-color: var(--tc-link);
    --bs-link-hover-color: var(--tc-link-hover);
    color-scheme: dark;
}

/* ---------------------------------------------- UMA COR, UM SIGNIFICADO
   Antes desta camada conviviam quatro vermelhos — a marca (#e84525), o hover dela (#cf3c1f),
   o campo inválido (#c0392b) e o `--bs-danger` do Bootstrap (#dc3545) — e dois verdes com
   sentidos opostos: #1a7f4b para ESTADO concluído e o #198754 do Bootstrap para AÇÃO
   (o botão "Promover turma" era o único verde sólido de um sistema laranja).
   Ninguém distingue quatro vermelhos: o usuário aprende "vermelho = alguma coisa". Cada papel
   agora tem um token, e o Bootstrap aponta para eles (acima) em vez de entrar por baixo:

     --tc-brand    marca e PREENCHIMENTO (botão primário, pill, gráfico, ícone sobre chapa).
                   Nunca texto pequeno: dá 3,96:1 sobre branco, abaixo do 4,5:1 do WCAG AA.
     --tc-link     a mesma marca puxada ao escuro até passar em AA. É o que TEXTO usa.
     --tc-focus    anel NEUTRO. Foco na cor da marca era quase o vermelho de erro; num sistema
                   que é quase só formulário, clicar no campo Nome o fazia parecer reprovado.
     --tc-danger   erro e ação destrutiva. Só isto é vermelho-vermelho.
     --tc-success  ESTADO concluído. Ação nunca é verde — ação é a marca.
     --tc-warn     atenção sem erro (prazo apertado, fila crescendo).

   Os `*-text` são a mesma cor puxada para o tom que sobrevive ao fundo do tema, mesmo
   princípio já usado em `.tc-pill--custom` (ADR-0055). */

/* ------------------------------------------------------- 2) BASE / TIPOGRAFIA */
body {
    background: var(--tc-app-bg);
    color: var(--tc-ink-1);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.tc-page__title {
    font-family: var(--tc-font-display);
    letter-spacing: -0.015em;
}

a {
    color: var(--tc-link);
    text-decoration: none;
}

a:hover {
    color: var(--tc-link-hover);
}

.text-secondary {
    color: var(--tc-muted) !important;
}

/* `--bs-danger`/`--bs-success` já apontam para os tokens, mas eles são cor de PREENCHIMENTO
   (branco por cima). Como texto, o vermelho fechado some no tema escuro — por isso os
   utilitários de texto usam a variante `-text`, que acompanha o tema. */
.text-danger {
    color: var(--tc-danger-text) !important;
}

.text-success {
    color: var(--tc-success-text) !important;
}

/* `code` solto herdava o rosa do Bootstrap (#d63384 no claro, #e685b5 no escuro) — cor que não
   é da marca nem token do sistema. Na tela Importar planilha a lista inteira de colunas do
   modelo saía rosa. Mesmo tratamento do `.tc-code`, sem exigir a classe na view. */
code {
    font-family: var(--tc-font-mono);
    font-size: var(--tc-text-relative-sm);
    color: var(--tc-link);
    background: var(--tc-active-bg);
    border-radius: var(--tc-radius-xs);
    padding: var(--tc-space-0-5) var(--tc-space-1-5);
}

pre code {
    background: none;
    padding: 0;
}

::selection {
    background: rgba(var(--tc-brand-rgb), 0.22);
}

/* Foco acessível e consistente — anel NEUTRO, não a marca (ver "uma cor, um significado"). */
:focus-visible {
    outline: 2px solid var(--tc-focus);
    outline-offset: 2px;
    border-radius: var(--tc-radius-xs);
}

/* Pular para o conteúdo: quem navega por teclado atravessava os ~15 itens do menu em toda
   página, toda vez. Fica fora da tela até receber foco. */
.tc-skiplink {
    position: absolute;
    left: 0.5rem;
    top: -100%;
    z-index: var(--tc-z-skip-link);
    padding: var(--tc-space-2-5) var(--tc-space-4);
    border-radius: var(--tc-radius-sm);
    background: var(--tc-surface);
    color: var(--tc-ink-1);
    font-weight: 700;
    box-shadow: var(--tc-shadow-lg);
    transition: top var(--tc-t-fast);
}

.tc-skiplink:focus-visible {
    top: 0.5rem;
    color: var(--tc-ink-1);
}

.tc-brand {
    font-family: var(--tc-font-display);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--tc-ink-1);
    display: inline-flex;
    align-items: center;
    gap: var(--tc-space-2);
}

.tc-brand__logo {
    height: 26px;
    width: auto;
    display: block;
}

/* Kicker monoespaçado (rótulo técnico) */
.tc-kicker {
    font-family: var(--tc-font-mono);
    font-size: var(--tc-text-xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tc-muted);
}

/* --------------------------------------------------------------- 3) SHELL */
.tc-app {
    min-height: 100vh;
}

/* Topbar fixa */
.tc-topbar {
    position: sticky;
    top: 0;
    z-index: var(--tc-z-topbar);
    height: var(--tc-header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tc-space-4);
    padding: 0 var(--tc-space-4) 0 var(--tc-space-3);
    background: color-mix(in srgb, var(--tc-surface) 88%, transparent);
    backdrop-filter: saturate(1.3) blur(10px);
    border-bottom: 1px solid var(--tc-border);
}

.tc-topbar__left,
.tc-topbar__right {
    display: flex;
    align-items: center;
    gap: var(--tc-space-3);
}

.tc-iconbtn {
    appearance: none;
    border: 1px solid transparent;
    background: transparent;
    color: var(--tc-ink-2);
    width: 40px;
    height: 40px;
    border-radius: var(--tc-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--tc-text-lg);
    cursor: pointer;
    transition: background var(--tc-t-fast), color var(--tc-t-fast), border-color var(--tc-t-fast);
}

.tc-iconbtn:hover {
    background: var(--tc-hover-bg);
    color: var(--tc-ink-1);
}

.tc-userchip {
    display: inline-flex;
    align-items: center;
    gap: var(--tc-space-2);
    padding: var(--tc-space-1) var(--tc-space-1-5) var(--tc-space-1) var(--tc-space-3);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-pill);
    background: var(--tc-surface);
    color: var(--tc-ink-2);
    font-size: var(--tc-text-sm);
    max-width: 46vw;
}

.tc-userchip__meta {
    line-height: 1.1;
    overflow: hidden;
}

.tc-userchip__name {
    font-weight: 600;
    color: var(--tc-ink-1);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.tc-userchip__role {
    font-size: var(--tc-text-xs);
    color: var(--tc-muted);
}

.tc-avatar {
    width: 30px;
    height: 30px;
    border-radius: var(--tc-radius-circle);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--tc-text-xs);
    color: #fff;
    background: linear-gradient(135deg, var(--tc-brand), var(--tc-brand-dark));
    flex-shrink: 0;
}

/* Casca: sidebar + conteúdo */
.tc-shell {
    display: flex;
    align-items: flex-start;
}

.tc-sidebar {
    position: sticky;
    top: var(--tc-header-h);
    align-self: flex-start;
    width: var(--tc-sidebar-w);
    flex-shrink: 0;
    height: calc(100vh - var(--tc-header-h));
    overflow-y: auto;
    background: var(--tc-surface);
    border-right: 1px solid var(--tc-border);
    padding: var(--tc-space-4) var(--tc-space-3);
    display: flex;
    flex-direction: column;
    gap: var(--tc-space-0-5);
}

.tc-navsection {
    font-family: var(--tc-font-mono);
    font-size: var(--tc-text-xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tc-muted);
    /* Era 0.9rem no topo: com os seis grupos abertos a sidebar somava 1117px de conteúdo numa
       altura útil de 840px (notebook de 1440x900) e ganhava barra de rolagem própria, colada à
       da página — Importar planilha e Logs ficavam abaixo da dobra. Ver também o layout, que
       agora abre só o grupo da tela atual. */
    padding: var(--tc-space-2-5) var(--tc-space-3) var(--tc-space-1);
}

/* Cabeçalho de seção clicável (recolher/expandir o grupo) */
.tc-navsection--toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tc-space-2);
    width: 100%;
    border: 0;
    background: transparent;
    cursor: pointer;
    border-radius: var(--tc-radius-sm);
    transition: color var(--tc-t-fast);
}

.tc-navsection--toggle:hover {
    color: var(--tc-ink-2);
}

.tc-navsection__caret {
    font-size: var(--tc-text-sm);
    transition: transform var(--tc-t-fast);
}

.tc-navgroup.is-collapsed .tc-navsection__caret {
    transform: rotate(-90deg);
}

/* Ícone do módulo: aparece só quando a sidebar está recolhida (rail). */
.tc-navgroup {
    position: relative;
}

.tc-navsection__icon {
    display: none;
    font-size: var(--tc-text-xl);
}

.tc-navgroup__items {
    display: flex;
    flex-direction: column;
    gap: var(--tc-space-0-5);
    overflow: hidden;
}

.tc-navgroup.is-collapsed .tc-navgroup__items {
    display: none;
}

.tc-navlink {
    display: flex;
    align-items: center;
    gap: var(--tc-space-3);
    padding: var(--tc-space-2) var(--tc-space-3);
    border-radius: var(--tc-radius-sm);
    color: var(--tc-ink-2);
    font-weight: 500;
    position: relative;
    transition: background var(--tc-t-fast), color var(--tc-t-fast);
}

.tc-navlink .bi {
    font-size: var(--tc-text-lg);
    opacity: 0.85;
}

.tc-navlink:hover {
    background: var(--tc-hover-bg);
    color: var(--tc-ink-1);
}

/* Seta de "abre em aba nova": encostada à direita e discreta — avisa sem competir
   com o rótulo do item. */
.tc-navlink__ext {
    margin-left: auto;
    font-size: var(--tc-text-xs) !important;
    opacity: 0.5 !important;
}

.tc-navlink.is-active {
    background: var(--tc-active-bg);
    color: var(--tc-link);
    font-weight: 600;
}

.tc-navlink.is-active .bi {
    opacity: 1;
}

.tc-navlink.is-active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    border-radius: var(--tc-radius-xs);
    background: var(--tc-brand);
}

.tc-sidebar__foot {
    margin-top: auto;
    padding: var(--tc-space-3);
}

.tc-sidebar__foot .tc-kicker {
    font-size: var(--tc-text-xs);
}

/* Conteúdo */
.tc-content {
    flex: 1;
    min-width: 0;
}

/* `margin-inline: auto` faltava: em 2560px o conteúdo parava nos 1400px e sobravam ~950px de
   vazio só do lado direito, como se a tela estivesse cortada. */
.tc-main {
    padding: var(--tc-space-7) clamp(var(--tc-space-4), 3vw, var(--tc-space-9));
    max-width: 1400px;
    margin-inline: auto;
}

/* Backdrop do drawer (mobile) */
.tc-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--tc-z-sidebar-backdrop);
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--tc-t), visibility var(--tc-t);
}

body.tc-drawer-open .tc-backdrop {
    opacity: 1;
    visibility: visible;
}

/* ---------------------------------------------------------- 4) PAGE HEADER */
.tc-page__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--tc-space-4);
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.tc-page__title {
    font-size: var(--tc-text-page-title);
    font-weight: 800;
    margin: 0.25rem 0 0;
}

.tc-page__subtitle {
    color: var(--tc-muted);
    margin: 0.35rem 0 0;
}

/* Situação do registro. Ficava dentro de `.tc-page__actions`, na mesma linha e na mesma altura
   dos botões — parecia um quarto botão que não clica. Ela descreve o registro, então mora sob
   o título, junto com o resto do que identifica a ficha. */
.tc-page__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--tc-space-2);
    margin-top: 0.5rem;
}

.tc-page__actions {
    display: flex;
    gap: var(--tc-space-2);
    flex-wrap: wrap;
}

.tc-backlink {
    display: inline-flex;
    align-items: center;
    gap: var(--tc-space-1-5);
    color: var(--tc-muted);
    font-size: var(--tc-text-base);
    font-weight: 500;
}

.tc-backlink:hover {
    color: var(--tc-brand);
}

/* --------------------------------------------------------------- 5) BOTÕES */
.btn {
    --bs-btn-border-radius: var(--tc-radius-sm);
    font-weight: 600;
}

.btn-primary {
    --bs-btn-bg: var(--tc-brand-ink);
    --bs-btn-border-color: var(--tc-brand-ink);
    --bs-btn-hover-bg: var(--tc-brand-ink-hover);
    --bs-btn-hover-border-color: var(--tc-brand-ink-hover);
    --bs-btn-active-bg: var(--tc-brand-ink-hover);
    --bs-btn-active-border-color: var(--tc-brand-ink-hover);
    --bs-btn-disabled-bg: var(--tc-brand-ink);
    --bs-btn-disabled-border-color: var(--tc-brand-ink);
    box-shadow: 0 2px 8px rgba(var(--tc-brand-rgb), 0.25);
    transition: transform var(--tc-t-fast), box-shadow var(--tc-t-fast), background-color var(--tc-t-fast);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(var(--tc-brand-rgb), 0.32);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-outline-primary {
    --bs-btn-color: var(--tc-brand);
    --bs-btn-border-color: var(--tc-brand);
    --bs-btn-hover-bg: var(--tc-brand);
    --bs-btn-hover-border-color: var(--tc-brand);
    --bs-btn-active-bg: var(--tc-brand-dark);
    --bs-btn-active-border-color: var(--tc-brand-dark);
}

/* `--bs-danger`/`--bs-success` apontam para os tokens (seção 1), mas os BOTÕES não leem essas
   variáveis: o Bootstrap compila o hex literal dentro da própria regra
   (`.btn-outline-danger{--bs-btn-color:#dc3545}`). Por isso o quinto vermelho (#dc3545) e um
   cinza fora da paleta (#6c757d) continuavam vivos em 27 e 134 botões, apesar do bloco
   "UMA COR, UM SIGNIFICADO". Aqui eles entram na paleta como as outras duas variantes. */
.btn-outline-secondary {
    --bs-btn-color: var(--tc-ink-2);
    --bs-btn-border-color: var(--tc-border-strong);
    --bs-btn-hover-color: var(--tc-ink-1);
    --bs-btn-hover-bg: var(--tc-hover-bg);
    --bs-btn-hover-border-color: var(--tc-border-strong);
    --bs-btn-active-color: var(--tc-ink-1);
    --bs-btn-active-bg: var(--tc-hover-bg);
    --bs-btn-active-border-color: var(--tc-border-strong);
    --bs-btn-disabled-color: var(--tc-muted);
    --bs-btn-disabled-border-color: var(--tc-border);
}

/* O texto usa a variante `-text`, que acompanha o tema; a chapa do hover usa o `--tc-danger`
   cheio, sobre o qual o branco dá 7,7:1 nos dois temas. */
.btn-outline-danger {
    --bs-btn-color: var(--tc-danger-text);
    --bs-btn-border-color: var(--tc-danger);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--tc-danger);
    --bs-btn-hover-border-color: var(--tc-danger);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--tc-danger);
    --bs-btn-active-border-color: var(--tc-danger);
    --bs-btn-disabled-color: var(--tc-danger-text);
    --bs-btn-disabled-border-color: var(--tc-danger);
}

.spinner-border.text-primary {
    color: var(--tc-brand) !important;
}

/* ----------------------------------------------------- 6) CARDS / SUPERFÍCIES */
.card {
    --bs-card-bg: var(--tc-surface);
    --bs-card-border-color: var(--tc-border);
    --bs-card-border-radius: var(--tc-radius);
    --bs-card-inner-border-radius: calc(var(--tc-radius) - 1px);
    box-shadow: var(--tc-shadow-sm);
    transition: box-shadow var(--tc-t), transform var(--tc-t), border-color var(--tc-t);
}

.card-body {
    padding: var(--tc-space-5) var(--tc-space-5);
}

.tc-card-title {
    font-size: var(--tc-text-base);
    font-weight: 700;
    margin: 0 0 1rem;
}

.tc-section-label {
    font-family: var(--tc-font-mono);
    font-size: var(--tc-text-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tc-muted);
    margin: 0 0 1rem;
}

/* Subseção dentro de um .card já titulado por .tc-section-label (ex.: blocos do formulário de lead). */
.tc-subsection-label {
    font-size: var(--tc-text-sm);
    font-weight: 600;
    color: var(--tc-muted);
    margin: 0 0 0.75rem;
    padding-top: var(--tc-space-3);
    border-top: 1px dashed var(--tc-border);
}

.tc-subsection-label:first-child {
    padding-top: 0;
    border-top: 0;
}

/* Prazo do contrato: atalhos + campo digitável na mesma linha. O campo é um número de dois
   dígitos — sem o limite ele ocuparia a largura toda e pareceria esperar um texto.
   Não pode ser style inline: a CSP do app é `style-src 'self'`. */
.tc-duration-field {
    max-width: 11rem;
}

/* Bloco "Dados cadastrais do CNPJ": <details> nativo — nasce recolhido, some o marcador default
   do navegador porque o próprio .tc-subsection-label já indica que é clicável. */
.tc-cnpj-block > summary {
    cursor: pointer;
    list-style: none;
}
.tc-cnpj-block > summary::-webkit-details-marker {
    display: none;
}
.tc-cnpj-block > summary::before {
    content: '\25B8';
    display: inline-block;
    margin-right: 0.35rem;
    transition: transform 0.15s ease;
}
.tc-cnpj-block[open] > summary::before {
    transform: rotate(90deg);
}
.tc-cnpj-block input[readonly] {
    background-color: var(--tc-surface-muted, rgba(0, 0, 0, 0.03));
    cursor: default;
}

/* --------------------------------------------------------- 7) STAT CARDS */
.tc-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--tc-space-4);
}

.tc-stat {
    background: var(--tc-surface);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius);
    padding: var(--tc-space-5);
    box-shadow: var(--tc-shadow-sm);
    position: relative;
    overflow: hidden;
    transition: transform var(--tc-t), box-shadow var(--tc-t), border-color var(--tc-t);
}

.tc-stat:hover {
    transform: translateY(-3px);
    box-shadow: var(--tc-shadow);
    border-color: var(--tc-border-strong);
}

.tc-stat::after {
    content: "";
    position: absolute;
    right: -30px;
    top: -30px;
    width: 90px;
    height: 90px;
    border-radius: var(--tc-radius-circle);
    background: radial-gradient(circle, rgba(var(--tc-brand-rgb), 0.10), transparent 70%);
    pointer-events: none;
}

.tc-stat__top {
    display: flex;
    align-items: center;
    gap: var(--tc-space-2-5);
    margin-bottom: 0.75rem;
}

.tc-stat__icon {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: var(--tc-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--tc-text-lg);
    color: var(--tc-brand);
    background: var(--tc-active-bg);
}

.tc-stat__figures {
    display: flex;
    align-items: baseline;
    gap: var(--tc-space-2);
}

.tc-stat__value {
    font-family: var(--tc-font-display);
    font-size: var(--tc-text-2xl);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
}

.tc-stat__label {
    color: var(--tc-ink-2);
    font-size: var(--tc-text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.2;
}

/* Variação da última semana fechada contra a anterior.
   O cinza único não dizia nada: "↓ -47" em Contratos a assinar é ótima notícia, a mesma queda
   em Alunos em onboarding não é. Quem sabe o juízo é o indicador, não a seta — por isso cada
   card declara se cair é bom (`data-good="down"`) e a cor sai daí, não da direção. */
.tc-stat__delta {
    display: inline-flex;
    align-items: center;
    gap: var(--tc-space-0-5);
    font-size: var(--tc-text-xs);
    font-weight: 800;
    color: var(--tc-muted);
}

.tc-stat__delta--good {
    color: var(--tc-success-text);
}

.tc-stat__delta--bad {
    color: var(--tc-danger-text);
}

/* Sparkline: entrada por semana. SVG com atributos — nada de style inline (CSP).
   Ganhou linha de base e rótulo com o período; sem isso eram barras rosa-claro sem eixo, sem
   valor e sem dizer quantas semanas. */
.tc-spark {
    display: block;
    width: 100%;
    height: 34px;
    margin-top: 0.7rem;
}

.tc-spark__bar {
    fill: rgba(var(--tc-brand-rgb), 0.35);
}

.tc-spark__bar--last {
    fill: var(--tc-brand);
}

.tc-spark__axis {
    stroke: var(--tc-border-strong);
    stroke-width: 1;
}

.tc-stat:hover .tc-spark__bar {
    fill: rgba(var(--tc-brand-rgb), 0.5);
}

.tc-stat__series-label {
    display: flex;
    justify-content: space-between;
    gap: var(--tc-space-2);
    margin-top: 0.3rem;
    color: var(--tc-muted);
    font-size: var(--tc-text-xs);
}

/* ------------------------------------------- 7.1) MINHA FILA (dashboard) */
/* Fila de trabalho por perfil (ADR-0031): blocos read-only, 2 por linha, cada
   item levando à tela de origem. Sem inline style (CSP — ADR-0009). */
.tc-queue-section {
    margin-top: 1.75rem;
}

.tc-queue-section__head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--tc-space-2-5);
    margin-bottom: 0.9rem;
}

.tc-queue-section__title {
    font-size: var(--tc-text-lg);
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0;
}

.tc-queue-section__hint {
    color: var(--tc-muted);
    font-size: var(--tc-text-sm);
}

.tc-queue {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--tc-space-4);
    align-items: start;
}

.tc-queue__block {
    background: var(--tc-surface);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius);
    box-shadow: var(--tc-shadow-sm);
    overflow: hidden;
}

.tc-queue__head {
    display: flex;
    align-items: center;
    gap: var(--tc-space-3);
    padding: var(--tc-space-3) var(--tc-space-4);
    border-bottom: 1px solid var(--tc-border);
}

.tc-queue__icon {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: var(--tc-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--tc-brand);
    background: var(--tc-active-bg);
}

.tc-queue__heading {
    min-width: 0;
}

.tc-queue__title {
    display: block;
    font-weight: 700;
    font-size: var(--tc-text-base);
    line-height: 1.25;
}

.tc-queue__sub {
    display: block;
    color: var(--tc-muted);
    font-size: var(--tc-text-xs);
    font-weight: 600;
}

.tc-queue__viewonly {
    margin-left: 0.35rem;
    font-size: var(--tc-text-xs);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tc-muted);
    border: 1px dashed var(--tc-border-strong);
    border-radius: var(--tc-radius-pill);
    padding: var(--tc-space-0-5) var(--tc-space-1-5);
    vertical-align: middle;
}

.tc-queue__count {
    margin-left: auto;
    flex: none;
    min-width: 26px;
    height: 24px;
    padding: 0 var(--tc-space-2);
    border-radius: var(--tc-radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* O `color: #fff` era fixo enquanto o fundo seguia o tema: no escuro, `--tc-ink-1` resolve
       para #eef0f4 e o número branco sumia dentro do círculo branco (1,06:1). Só os blocos com
       variante (--hot, --warn) apareciam. O texto agora é a superfície, que inverte junto. */
    background: var(--tc-ink-1);
    color: var(--tc-surface);
    font-size: var(--tc-text-xs);
    font-weight: 800;
}

.tc-queue__count--warn {
    background: var(--tc-warn);
    color: #fff;
}

.tc-queue__count--hot {
    background: var(--tc-danger);
    color: #fff;
}

/* Ocultar bloco: preferência do usuário, discreta — só aparece no hover/foco do bloco. */
.tc-queue__hide {
    flex: none;
    margin: 0;
}

.tc-queue__hide-btn {
    border: 0;
    background: none;
    padding: var(--tc-space-0-5) var(--tc-space-0-5);
    color: var(--tc-muted);
    opacity: 0;
    cursor: pointer;
    transition: opacity var(--tc-t-fast), color var(--tc-t-fast);
}

.tc-queue__block:hover .tc-queue__hide-btn,
.tc-queue__hide-btn:focus-visible {
    opacity: 1;
}

.tc-queue__hide-btn:hover {
    color: var(--tc-ink-1);
}

.tc-queue-hidden {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--tc-space-2);
    margin-top: 1rem;
}

.tc-queue-hidden__label {
    color: var(--tc-muted);
    font-size: var(--tc-text-xs);
}

.tc-queue-hidden__btn {
    border: 1px dashed var(--tc-border-strong);
    background: none;
    border-radius: var(--tc-radius-pill);
    padding: var(--tc-space-0-5) var(--tc-space-3);
    color: var(--tc-ink-2);
    font-size: var(--tc-text-xs);
    font-weight: 700;
    cursor: pointer;
    transition: background var(--tc-t-fast), border-color var(--tc-t-fast);
}

.tc-queue-hidden__btn:hover {
    background: var(--tc-surface-2);
    border-color: var(--tc-brand);
}

.tc-queue__items {
    list-style: none;
    margin: 0;
    padding: var(--tc-space-1) var(--tc-space-1-5);
}

.tc-queue__item {
    display: flex;
    align-items: center;
    gap: var(--tc-space-3);
    padding: var(--tc-space-2) var(--tc-space-2-5);
    border-radius: var(--tc-radius-sm);
    color: inherit;
    text-decoration: none;
    transition: background var(--tc-t-fast);
}

.tc-queue__item:hover,
.tc-queue__item:focus-visible {
    background: var(--tc-surface-2);
    color: inherit;
}

.tc-queue__item-main {
    min-width: 0;
    flex: 1;
}

.tc-queue__item-name {
    display: block;
    font-weight: 700;
    font-size: var(--tc-text-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tc-queue__item-meta {
    display: block;
    color: var(--tc-muted);
    font-size: var(--tc-text-xs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tc-queue__tag {
    flex: none;
    font-size: var(--tc-text-xs);
    font-weight: 800;
    padding: var(--tc-space-0-5) var(--tc-space-2);
    border-radius: var(--tc-radius-pill);
    white-space: nowrap;
    background: var(--tc-surface-2);
    color: var(--tc-ink-2);
    border: 1px solid var(--tc-border);
}

.tc-queue__tag--warn {
    background: #fff7ed;
    color: #b45309;
    border-color: #fed7aa;
}

.tc-queue__tag--hot {
    background: #fff0f0;
    color: #c92a2a;
    border-color: #ffc9c9;
}

.tc-queue__chev {
    flex: none;
    color: var(--tc-muted);
    font-size: var(--tc-text-sm);
}

.tc-queue__empty {
    margin: 0;
    padding: var(--tc-space-5) var(--tc-space-4);
    text-align: center;
    color: var(--tc-muted);
    font-size: var(--tc-text-sm);
}

.tc-queue__foot {
    padding: var(--tc-space-2-5) var(--tc-space-4);
    border-top: 1px solid var(--tc-border);
    background: var(--tc-surface-2);
}

.tc-queue__foot a {
    font-weight: 700;
    font-size: var(--tc-text-xs);
    color: var(--tc-brand-dark);
    text-decoration: none;
}

.tc-queue__foot a:hover {
    text-decoration: underline;
}

/* ------------------------------------------------------- 8) FORMULÁRIOS */
.form-label {
    font-weight: 600;
    font-size: var(--tc-text-sm);
    color: var(--tc-ink-2);
    margin-bottom: 0.35rem;
}

/* `background-color`, e não o shorthand `background`: o shorthand apagava o `background-image`
   do Bootstrap, que é quem desenha a seta do `<select>`. Com `appearance: none` por baixo, o
   resultado era um select sem nenhuma seta — indistinguível de um campo de texto em todas as
   telas do sistema. Pelo mesmo motivo o `padding` vai separado abaixo: o shorthand levava
   junto o `padding-right` que reserva o espaço da seta. */
.form-control,
.form-select {
    --bs-border-radius: var(--tc-radius-sm);
    background-color: var(--tc-surface);
    border-color: var(--tc-border-strong);
    color: var(--tc-ink-1);
}

.form-control {
    padding: var(--tc-space-2) var(--tc-space-3);
}

.form-select {
    padding: var(--tc-space-2) var(--tc-space-9) var(--tc-space-2) var(--tc-space-3);
}

.form-control::placeholder {
    color: var(--tc-muted);
    opacity: 0.7;
}

/* Anel neutro: o foco na cor da marca ficava a um tom do vermelho de campo inválido. */
.form-control:focus,
.form-select:focus {
    border-color: var(--tc-focus);
    box-shadow: 0 0 0 0.2rem var(--tc-focus-soft);
    background-color: var(--tc-surface);
    color: var(--tc-ink-1);
}

.form-check-input:checked {
    background-color: var(--tc-brand);
    border-color: var(--tc-brand);
}

.form-check-input:focus {
    border-color: var(--tc-focus);
    box-shadow: 0 0 0 0.2rem var(--tc-focus-soft);
}

.form-text {
    color: var(--tc-muted);
}

/* Campo obrigatório: marca no RÓTULO, não no campo — o vermelho fica reservado ao erro.
   Sem isto o usuário só descobria o que faltava depois de tentar salvar. */
.tc-required {
    color: var(--tc-danger-text);
    font-weight: 700;
    margin-left: 0.15rem;
    /* É um <abbr> (o title explica a marca): sem isto o navegador põe sublinhado pontilhado. */
    text-decoration: none;
    cursor: help;
}

/* Campo de arquivo: era o único elemento da tela sem o desenho do sistema — o botão nativo do
   navegador, cinza, colado à esquerda. O `::file-selector-button` é a parte que dá para vestir. */
.tc-filefield {
    padding: var(--tc-space-1-5) var(--tc-space-2);
}

.tc-filefield::file-selector-button {
    margin-right: 0.75rem;
    padding: var(--tc-space-1-5) var(--tc-space-4);
    border: 1px solid var(--tc-border-strong);
    border-radius: var(--tc-radius-sm);
    background: var(--tc-surface-2);
    color: var(--tc-ink-1);
    font-weight: 600;
    font-size: var(--tc-text-base);
    cursor: pointer;
    transition: background var(--tc-t-fast), border-color var(--tc-t-fast);
}

.tc-filefield::file-selector-button:hover {
    background: var(--tc-hover-bg);
    border-color: var(--tc-brand);
}

.tc-formlegend {
    color: var(--tc-muted);
    font-size: var(--tc-text-sm);
    margin-bottom: var(--tc-space-4);
}

.tc-formgrid {
    display: grid;
    gap: var(--tc-space-4);
}

/* Grade canônica dos cadastros: 12 colunas do Bootstrap, gutter `g-3` e apenas divisões
   semânticas previsíveis (metade, 1/3 + 2/3 ou três terços). Aluno, professor e empresa não
   usam mais proporções acidentais 5/7 e 3/4/5, que quebravam os eixos entre blocos. */

/* Barra de ações fixa: em formulário longo o Salvar ficava só no fim, depois de rolar tudo.
   O `.tc-scrolltop` some enquanto ela existe (ver seção do botão) — no celular o círculo
   caía exatamente em cima do Salvar. */
.tc-formbar {
    position: sticky;
    bottom: 0;
    z-index: var(--tc-z-sticky-actions);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--tc-space-2-5);
    flex-wrap: wrap;
    margin-top: 1.25rem;
    padding: var(--tc-space-3) clamp(var(--tc-space-4), 3vw, var(--tc-space-5));
    background: var(--tc-surface);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius);
    box-shadow: var(--tc-shadow);
}

.tc-formbar__hint {
    margin-right: auto;
    color: var(--tc-muted);
    font-size: var(--tc-text-sm);
}

/* Na grade financeira a barra vem antes das linhas e fica logo abaixo da topbar. Assim Salvar
   e Cancelar continuam alcançáveis mesmo enquanto se edita a primeira das muitas linhas. */
.tc-formbar--grid {
    top: calc(var(--tc-header-h) + var(--tc-space-2));
    bottom: auto;
    margin-top: 0;
    margin-bottom: 1rem;
}

.tc-formbar.is-dirty {
    border-color: var(--tc-warn);
}

.tc-formbar.is-dirty .tc-formbar__hint {
    color: var(--tc-warn-text);
    font-weight: 600;
}

.tc-segmented {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: var(--tc-space-0-5);
    border: 1px solid var(--tc-border-strong);
    border-radius: var(--tc-radius-sm);
    background: var(--tc-surface-2);
}

.tc-segmented__option {
    padding: var(--tc-space-2) var(--tc-space-4);
    border-radius: calc(var(--tc-radius-sm) - var(--tc-radius-xs));
    color: var(--tc-muted);
    font-size: var(--tc-text-base);
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: background var(--tc-t-fast), color var(--tc-t-fast), box-shadow var(--tc-t-fast);
}

.tc-segmented .btn-check:checked+.tc-segmented__option {
    background: var(--tc-surface);
    color: var(--tc-brand);
    box-shadow: var(--tc-shadow-sm);
}

.tc-segmented .btn-check:focus-visible+.tc-segmented__option {
    outline: 2px solid var(--tc-brand);
    outline-offset: 1px;
}

/* ----------------------------------------------------------- 9) TABELAS */
.tc-tablecard {
    background: var(--tc-surface);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius);
    box-shadow: var(--tc-shadow-sm);
    /* `overflow: hidden` aqui matava o cabeçalho fixo — ver o comentário logo abaixo. */
    overflow: visible;
}

.tc-tablecard .table {
    margin: 0;
    --bs-table-bg: transparent;
    color: var(--tc-ink-1);
}

/* O cabeçalho fixo nunca funcionou: o `.table-responsive` do Bootstrap é `overflow-x: auto`, o
   navegador computa `overflow-y: auto` junto e ele vira o container de rolagem do sticky — que
   não rola na vertical, então o thead nunca grudava. Era código morto em 16 telas.
   Qualquer `overflow` diferente de `visible` em um ancestral reproduz o defeito, inclusive no
   próprio card: por isso os dois passam a ser `visible` e o arredondamento das quatro pontas
   volta pelas células, não pelo recorte. Abaixo de 768px a listagem vira cartão empilhado
   (seção 17), então ninguém precisa mais rolar tabela na horizontal.
   O `top` desce a altura da topbar — senão o cabeçalho colaria ATRÁS dela, que é sticky com
   z-index 1030 e 60px de altura. */
.tc-tablecard .table-responsive {
    overflow: visible;
}

.tc-tablecard>.table-responsive>.table>thead>tr>th:first-child {
    border-top-left-radius: var(--tc-radius);
}

.tc-tablecard>.table-responsive>.table>thead>tr>th:last-child {
    border-top-right-radius: var(--tc-radius);
}

.tc-tablecard>.table-responsive>.table>tbody>tr:last-child>td:first-child {
    border-bottom-left-radius: var(--tc-radius);
}

.tc-tablecard>.table-responsive>.table>tbody>tr:last-child>td:last-child {
    border-bottom-right-radius: var(--tc-radius);
}

.tc-tablecard .table>thead th {
    background: var(--tc-surface-2);
    border-bottom: 1px solid var(--tc-border);
    color: var(--tc-muted);
    font-family: var(--tc-font-mono);
    font-size: var(--tc-text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    padding: var(--tc-space-3) var(--tc-space-4);
    white-space: nowrap;
    position: sticky;
    top: var(--tc-header-h);
    z-index: var(--tc-z-content);
}

/* Coluna da caixa de seleção em massa: só o quadradinho cabe nela. Existe como classe
   porque `style="width:2.5rem"` na view é inline e a CSP estrita não o admite (dev/06 §A3.1). */
.tc-col-check {
    width: 2.5rem;
}

.tc-tablecard .table>tbody td {
    padding: var(--tc-space-3) var(--tc-space-4);
    border-color: var(--tc-border);
    vertical-align: middle;
}

.tc-tablecard .table>tbody tr {
    transition: background var(--tc-t-fast);
}

.tc-tablecard .table>tbody tr:hover {
    background: var(--tc-hover-bg);
}

.tc-tablecard .table>tbody tr:last-child td {
    border-bottom: 0;
}

/* Linha clicável: substitui a coluna de botões. O alvo do mouse é a linha inteira, mas o foco de
   teclado continua pertencendo ao link da identificação — por isso o realce responde também a
   :focus-within, senão quem navega por Tab não enxerga em que linha está. */
.tc-tablecard .table>tbody tr[data-row-href] {
    cursor: pointer;
}

.tc-tablecard .table>tbody tr[data-row-href]:focus-within {
    background: var(--tc-hover-bg);
}

/* A linha inteira acende no laranja da marca, não só a célula sob o cursor: o alvo do clique é a
   linha, e o realce precisa dizer isso. Sem sublinhado — a linha é um alvo só, não sete links.
   Como o realce dura o tempo do hover e vale para uma linha por vez, ele não recria o problema
   que a cor de repouso tinha: vinte nomes na cor da marca ao mesmo tempo faziam a lista parecer
   alerta.

   A pílula de situação fica de fora sem precisar de exceção aqui: `.tc-pill--*` pinta a própria
   cor no <span>, e regra direta sempre vence herança. O mesmo protege o vermelho da turma lotada
   e as tags do log — cor que carrega significado não é decoração e não pode acender junto. */
.tc-tablecard .table>tbody tr[data-row-href]:hover td {
    color: var(--tc-link);
}

.tc-cell-strong {
    font-weight: 600;
}

/* Sem `nowrap` o CPF saía "323.790.638-" numa linha e "77" na outra. */
.tc-cell-mono {
    font-family: var(--tc-font-mono);
    font-size: var(--tc-text-sm);
    color: var(--tc-ink-2);
    white-space: nowrap;
}

/* Peso de coluna. Nenhuma tabela declarava largura, então a repartição saía do acaso do
   navegador: "Alceu Albino Von Der Osten Neto" quebrava em três linhas enquanto a coluna de
   e-mail sobrava. O texto longo (nome, e-mail, empresa) recebe proporção; o que tem tamanho
   conhecido (documento, status, data, ações) encolhe até o conteúdo — `width: 1%` é o jeito de
   dizer "o mínimo que couber" em tabela, e sem isso as larguras somam mais que a tabela e ela
   passa a rolar na horizontal. */
.tc-col-name { width: 30%; min-width: 11rem; }
.tc-col-text { width: 20%; min-width: 9rem; }

/* E-mail e razão social não têm ponto de quebra natural, então o `min-content` da célula é a
   string inteira e a tabela estoura o card mesmo com as proporções certas. `anywhere` só age
   quando falta espaço — em largura folgada nada muda. */
.tc-tablecard .table>tbody>tr>td {
    overflow-wrap: anywhere;
}

.tc-col-doc,
.tc-col-status,
.tc-col-date,
.tc-col-num {
    width: 1%;
    white-space: nowrap;
}

/* O nome da linha é o alvo principal, mas vinte nomes seguidos na cor da marca faziam a lista
   inteira parecer alerta — no tema escuro, laranja saturado sobre preto na coluna toda.
   Cor de texto normal; a marca aparece no hover, onde é sinal de que ali se clica.

   O seletor pega QUALQUER link da tabela, e não só o filho direto de `td.tc-cell-strong`. Era essa
   restrição que deixava o Onboarding — que punha a classe no <a>, não na <td> — e todo link de
   coluna secundária (o "#12" do contrato em Empresas, a renovação em Contratos) na cor de link
   padrão, diferente do vizinho dentro da mesma tabela. `.tc-cell-link` existia só para contornar
   isso caso a caso e deixou de fazer sentido.

   `.btn` fica de fora: o botão do estado vazio tem cor própria e não herda a do texto. */
.tc-tablecard .table>tbody>tr>td a:not(.btn) {
    color: inherit;
}

.tc-tablecard .table>tbody>tr>td a:not(.btn):hover,
.tc-tablecard .table>tbody>tr>td a:not(.btn):focus-visible {
    color: var(--tc-link);
}

/* ------------------------------------------------- 9.1) TABELA EMBUTIDA
   Tabelas DENTRO de um card de detalhe (perfil acadêmico, onboarding, alocação,
   alunos da turma). Precisam se distinguir da listagem principal (.tc-tablecard),
   que é a tela em si: aqui a tabela é conteúdo de uma seção, não a página.

   Por isso: sem moldura própria (o card já é a moldura), sem faixa cinza no
   cabeçalho, linhas mais justas e divisórias mais leves. O recuo lateral zero
   alinha a primeira coluna com o título da seção. Em tela estreita continua
   rolando de lado dentro do .table-responsive — não vira card empilhado. */
.tc-table-inset {
    margin: 0;
    --bs-table-bg: transparent;
    color: var(--tc-ink-1);
    font-size: var(--tc-text-base);
}

.tc-table-inset>thead th {
    background: transparent;
    color: var(--tc-muted);
    font-size: var(--tc-text-xs);
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 1px solid var(--tc-border);
}

.tc-table-inset>tbody td {
    color: var(--tc-ink-2);
    vertical-align: middle;
    border-bottom: 1px solid var(--tc-border);
}

/* Respiro entre colunas sem recuo nas pontas: a linha ocupa a largura do card. */
.tc-table-inset>thead>tr>th,
.tc-table-inset>tbody>tr>td {
    padding: var(--tc-space-2) var(--tc-space-5) var(--tc-space-2) 0;
}

.tc-table-inset>thead>tr>th:last-child,
.tc-table-inset>tbody>tr>td:last-child {
    padding-right: 0;
}

.tc-table-inset>tbody>tr:last-child>td {
    border-bottom: 0;
    padding-bottom: 0;
}

/* Sem hover: a linha não é clicável aqui (diferente da listagem, onde leva ao registro). */
.tc-table-inset>tbody>tr:hover {
    background: transparent;
}

/* Primeira coluna é o assunto da linha (idioma, etapa, turma) — ganha o peso. */
.tc-table-inset>tbody>tr>td:first-child {
    color: var(--tc-ink-1);
    font-weight: 600;
}

/* ----------------------------------------------------- 9.2) COMENTÁRIOS
   Quadro de anotações internas da equipe (aluno e turma). Fluxo simples: caixa
   de escrita no topo, mais recentes primeiro. Editar abre um <details> nativo —
   a CSP proíbe script inline e isso não precisa de JS. */
.tc-comments__new {
    margin-top: 1.25rem;
}

.tc-comment-composer { position: relative; }

.tc-mention-menu {
    position: absolute;
    z-index: var(--tc-z-overlay);
    top: calc(100% + .25rem);
    left: 0;
    right: 0;
    max-height: 14rem;
    overflow-y: auto;
    padding: var(--tc-space-1-5);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-sm);
    background: var(--tc-surface, #fff);
    /* D-40: era a única sombra literal do arquivo — no tema escuro ela não escurecia junto. */
    box-shadow: var(--tc-shadow);
}

.tc-mention-menu__item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--tc-space-2);
    padding: var(--tc-space-2) var(--tc-space-2-5);
    border: 0;
    border-radius: var(--tc-radius-xs);
    background: transparent;
    color: var(--tc-ink-1);
    text-align: left;
}

.tc-mention-menu__item:hover,
.tc-mention-menu__item.is-active {
    background: rgba(var(--tc-brand-rgb), .1);
}

.tc-comments__new-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tc-space-3);
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.tc-comments__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--tc-space-4);
}

/* Leitura de conversa: os meus comentários à direita, os dos outros à esquerda.
   O lado diz de quem é antes de ler o nome. */
.tc-comment {
    display: flex;
    gap: var(--tc-space-3);
    align-items: flex-start;
}

.tc-comment--mine {
    flex-direction: row-reverse;
}

/* Uma cor por pessoa (user_id % 8). Serve para bater o olho e saber quem falou,
   principalmente numa conversa com três ou quatro pessoas. */
.tc-comment--c0 { --tc-comment-rgb: var(--tc-brand-rgb); }
.tc-comment--c1 { --tc-comment-rgb: 13, 110, 253; }
.tc-comment--c2 { --tc-comment-rgb: 25, 135, 84; }
.tc-comment--c3 { --tc-comment-rgb: 111, 66, 193; }
.tc-comment--c4 { --tc-comment-rgb: 214, 51, 132; }
.tc-comment--c5 { --tc-comment-rgb: 13, 140, 145; }
.tc-comment--c6 { --tc-comment-rgb: 176, 110, 20; }
.tc-comment--c7 { --tc-comment-rgb: 90, 100, 120; }

.tc-comment__avatar {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: var(--tc-radius-circle);
    display: grid;
    place-items: center;
    background: rgba(var(--tc-comment-rgb, var(--tc-brand-rgb)), 0.15);
    color: rgb(var(--tc-comment-rgb, var(--tc-brand-rgb)));
    font-size: var(--tc-text-xs);
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Balão do tamanho do texto (não da linha): é o que faz o alinhamento lateral aparecer.
   O teto de 85% impede que um comentário longo encoste no outro lado. */
.tc-comment__main {
    flex: 0 1 auto;
    max-width: 85%;
    min-width: 0;
    background: var(--tc-surface-2);
    border: 1px solid var(--tc-border);
    border-left: 3px solid rgba(var(--tc-comment-rgb, var(--tc-brand-rgb)), 0.55);
    border-radius: var(--tc-radius-sm);
    padding: var(--tc-space-2-5) var(--tc-space-3);
}

/* Espelha o realce e o alinhamento do lado de quem escreveu. */
.tc-comment--mine .tc-comment__main {
    background: rgba(var(--tc-comment-rgb, var(--tc-brand-rgb)), 0.07);
    border-left: 1px solid var(--tc-border);
    border-right: 3px solid rgba(var(--tc-comment-rgb, var(--tc-brand-rgb)), 0.55);
    text-align: right;
}

.tc-comment--mine .tc-comment__head,
.tc-comment--mine .tc-comment__actions {
    justify-content: flex-end;
}

/* No escuro as cores mais fechadas (âmbar, ardósia) somem no fundo: clareia o traço. */
[data-bs-theme="dark"] .tc-comment__avatar {
    color: color-mix(in srgb, rgb(var(--tc-comment-rgb, var(--tc-brand-rgb))) 65%, white);
    background: rgba(var(--tc-comment-rgb, var(--tc-brand-rgb)), 0.22);
}

.tc-comment__head {
    display: flex;
    align-items: baseline;
    gap: var(--tc-space-2);
    flex-wrap: wrap;
    font-size: var(--tc-text-sm);
    color: var(--tc-muted);
    margin-bottom: 0.25rem;
}

.tc-comment__head strong {
    color: var(--tc-ink-1);
    font-size: var(--tc-text-sm);
}

.tc-comment__edited {
    font-style: italic;
}

.tc-comment__body {
    margin: 0;
    color: var(--tc-ink-1);
    font-size: var(--tc-text-base);
    overflow-wrap: anywhere;
}

.tc-comment__actions {
    display: flex;
    align-items: flex-start;
    gap: var(--tc-space-3);
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

/* Ações discretas: só aparecem para o autor, e não competem com o texto. */
.tc-comment__action,
.tc-comment__edit>summary {
    background: none;
    border: 0;
    padding: 0;
    font-size: var(--tc-text-xs);
    color: var(--tc-muted);
    cursor: pointer;
    list-style: none;
}

.tc-comment__edit>summary::-webkit-details-marker {
    display: none;
}

.tc-comment__action:hover,
.tc-comment__edit>summary:hover {
    color: var(--tc-brand);
}

.tc-comment__edit[open] {
    flex: 1 0 100%;
}

.tc-comment__edit>form {
    margin-top: 0.5rem;
}

/* O alinhamento à direita é do balão, não do que se digita: texto sempre se escreve
   da esquerda (o text-align do balão vazaria para dentro do textarea). */
.tc-comment--mine .tc-comment__edit {
    text-align: left;
}

/* ----------------------------------------------------------- 10) FILTROS */
.tc-filters {
    background: var(--tc-surface);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius);
    box-shadow: var(--tc-shadow-sm);
    padding: var(--tc-space-4) var(--tc-space-4);
    margin-bottom: 1.25rem;
}

/* Aberto, o bloco avançado se separa dos filtros básicos por uma linha. FECHADO, ele é só a
   linha de "Filtros avançados": sem borda, sem margem e sem respiro próprio — antes o espaço
   morto entre o filtro básico e as ações passava de 5rem (Rafael, 21/08/2026). */
.tc-filters__advanced {
    border-top: 1px solid var(--tc-border);
    margin-top: var(--tc-space-3);
    padding-top: var(--tc-space-3);
}

.tc-filters__advanced:not([open]) {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
}

.tc-filters__advanced>summary {
    align-items: center;
    color: var(--tc-brand-dark);
    cursor: pointer;
    display: inline-flex;
    font-size: var(--tc-text-sm);
    font-weight: 750;
    gap: var(--tc-space-2);
    list-style: none;
    min-height: 1.75rem;
}

.tc-filters__advanced>summary::-webkit-details-marker {
    display: none;
}

.tc-filters__advanced>summary::before {
    content: "\f3e1";
    font-family: "bootstrap-icons";
    font-weight: normal;
}

.tc-filters__advanced[open]>summary::before {
    content: "\f286";
}

.tc-filters__advanced-count {
    align-items: center;
    background: var(--tc-brand-soft);
    border-radius: var(--tc-radius-pill);
    color: var(--tc-brand-dark);
    display: inline-flex;
    font-size: var(--tc-text-xs);
    justify-content: center;
    min-width: 1.5rem;
    padding: var(--tc-space-0-5) var(--tc-space-2);
}

.tc-filters__advanced-body {
    padding-top: var(--tc-space-3);
}

.tc-filter-state {
    align-items: center;
    border-top: 1px solid var(--tc-border);
    display: flex;
    flex-wrap: wrap;
    gap: var(--tc-space-2);
    margin-top: var(--tc-space-3);
    padding-top: var(--tc-space-3);
}

.tc-filter-state__count {
    color: var(--tc-muted);
    font-size: var(--tc-text-sm);
    font-weight: 700;
}

.tc-filter-state__chips {
    display: flex;
    flex: 1 1 16rem;
    flex-wrap: wrap;
    gap: var(--tc-space-1-5);
}

.tc-filter-chip {
    background: var(--tc-brand-soft);
    border: 1px solid color-mix(in srgb, var(--tc-brand) 26%, transparent);
    border-radius: var(--tc-radius-pill);
    color: var(--tc-brand-dark);
    font-size: var(--tc-text-xs);
    font-weight: 700;
    max-width: 100%;
    overflow: hidden;
    padding: var(--tc-space-1) var(--tc-space-2-5);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tc-filter-state__clear {
    color: var(--tc-muted);
    font-size: var(--tc-text-sm);
    font-weight: 650;
    text-decoration: none;
}

.tc-filter-state__clear:hover {
    color: var(--tc-brand-dark);
}

/* Rodapé do bloco de filtros: a contagem de resultados à esquerda e o "Exportar CSV" no canto
   inferior direito (o botão já vem com `ms-auto`). */
.tc-filters__foot {
    align-items: center;
    border-top: 1px solid var(--tc-border);
    display: flex;
    flex-wrap: wrap;
    gap: var(--tc-space-2);
    margin-top: var(--tc-space-3);
    padding-top: var(--tc-space-3);
}

.tc-filter-results {
    color: var(--tc-muted);
    font-size: var(--tc-text-sm);
}

/* Fora do rodapé (listas que ainda não usam `.tc-filters__foot`) a contagem mantém a régua. */
.tc-filters>.tc-filter-results {
    border-top: 1px solid var(--tc-border);
    margin-top: var(--tc-space-3);
    padding-top: var(--tc-space-3);
}

/* "Itens por página" na linha dos filtros básicos: o rótulo alinha com os vizinhos. */
.tc-filters__per-page .form-label {
    white-space: nowrap;
}

.tc-filter-results strong {
    color: var(--tc-ink-1);
    font-weight: 750;
}

@media (max-width: 767.98px) {
    .tc-filters {
        padding: var(--tc-space-3);
    }

    .tc-filters__advanced-body>.row>[class*="col-"] {
        width: 100%;
    }

    .tc-filter-state {
        align-items: flex-start;
        flex-direction: column;
    }

    .tc-filter-state__chips {
        flex-basis: auto;
    }
}

/* ----------------------------------------------------- 10.1) STATUS GROUPS */
.tc-status-groups {
    display: grid;
    gap: var(--tc-space-4);
}

.tc-status-group {
    background: var(--tc-surface);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius);
    box-shadow: var(--tc-shadow-sm);
    overflow: hidden;
}

.tc-status-group__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--tc-space-4);
    padding: var(--tc-space-4) var(--tc-space-4);
    background: var(--tc-surface-2);
    border-bottom: 1px solid var(--tc-border);
}

.tc-status-group__title {
    margin: 0;
    color: var(--tc-ink-1);
    font-size: var(--tc-text-lg);
    font-weight: 750;
}

.tc-status-group__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tc-space-2) var(--tc-space-3);
    margin-top: 0.45rem;
    color: var(--tc-muted);
    font-size: var(--tc-text-sm);
}

.tc-status-section__title {
    font-family: var(--tc-font-mono);
    font-size: var(--tc-text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tc-muted);
}

.tc-status-section {
    padding: var(--tc-space-4) var(--tc-space-4) var(--tc-space-4);
}

.tc-status-section+.tc-status-section {
    border-top: 1px solid var(--tc-border);
    background: color-mix(in srgb, var(--tc-surface-2) 48%, transparent);
}

.tc-status-section--inactive .tc-status-list {
    opacity: 0.86;
}

.tc-status-section__title {
    margin-bottom: 0.55rem;
}

.tc-status-list {
    display: grid;
    gap: var(--tc-space-2);
}

.tc-status-item {
    display: grid;
    grid-template-columns: minmax(12rem, 0.8fr) minmax(16rem, 1.4fr) auto;
    align-items: center;
    gap: var(--tc-space-3);
    width: 100%;
    padding: var(--tc-space-3) var(--tc-space-3);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-sm);
    background: var(--tc-surface);
    color: var(--tc-ink-1);
    font: inherit;
    text-align: left;
    transition: background var(--tc-t-fast), border-color var(--tc-t-fast);
}

button.tc-status-item { cursor: pointer; }

.tc-status-item:hover {
    background: var(--tc-hover-bg);
    border-color: var(--tc-border-strong);
}

.tc-status-item__main {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--tc-space-1-5) var(--tc-space-2-5);
    min-width: 0;
}

.tc-status-item__default {
    display: inline-flex;
    align-items: center;
    gap: var(--tc-space-1);
    padding: var(--tc-space-0-5) var(--tc-space-2);
    border-radius: var(--tc-radius-pill);
    background: var(--tc-surface-2);
    color: var(--tc-muted);
    font-size: var(--tc-text-xs);
    font-weight: 650;
}

.tc-status-item__details {
    display: grid;
    gap: var(--tc-space-1);
    color: var(--tc-muted);
    font-size: var(--tc-text-sm);
}

.tc-status-behavior {
    display: flex;
    align-items: flex-start;
    gap: var(--tc-space-2);
    line-height: 1.4;
}

.tc-status-behavior .bi {
    margin-top: var(--tc-space-0-5);
    color: var(--tc-ink-2);
}

.tc-status-behavior--quiet { color: var(--tc-muted); }

.tc-status-item__arrow {
    color: var(--tc-muted);
    transition: transform var(--tc-t-fast), color var(--tc-t-fast);
}

.tc-status-item:hover .tc-status-item__arrow {
    color: var(--tc-brand);
    transform: translateX(var(--tc-space-0-5));
}

@media (max-width: 767.98px) {

    .tc-status-group__head,
    .tc-status-section {
        padding-right: var(--tc-space-4);
        padding-left: var(--tc-space-4);
    }

    .tc-status-item {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }

    .tc-status-item__arrow { display: none; }
}

/* ----------------------------------------------------- 11) PILLS / BADGES */
.tc-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--tc-space-1-5);
    padding: var(--tc-space-1) var(--tc-space-3);
    border-radius: var(--tc-radius-pill);
    font-size: var(--tc-text-xs);
    font-weight: 600;
    line-height: 1.4;
    border: 1px solid transparent;
    /* "Aguardando assinatura" quebrava em duas linhas e deformava a altura da linha da tabela. */
    white-space: nowrap;
}

.tc-pill::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: var(--tc-radius-circle);
    background: currentColor;
}

.tc-pill--green {
    color: #1a7f4b;
    background: rgba(26, 127, 75, 0.12);
    border-color: rgba(26, 127, 75, 0.25);
}

.tc-pill--blue {
    color: #1f5fbf;
    background: rgba(31, 95, 191, 0.12);
    border-color: rgba(31, 95, 191, 0.25);
}

.tc-pill--yellow {
    color: #946200;
    background: rgba(148, 98, 0, 0.14);
    border-color: rgba(148, 98, 0, 0.28);
}

.tc-pill--red {
    color: #c0392b;
    background: rgba(192, 57, 43, 0.12);
    border-color: rgba(192, 57, 43, 0.25);
}

.tc-pill--gray {
    color: var(--tc-muted);
    background: var(--tc-hover-bg);
    border-color: var(--tc-border);
}

.tc-pill--purple {
    color: #7651b7;
    background: rgba(118, 81, 183, 0.12);
    border-color: rgba(118, 81, 183, 0.25);
}

.tc-pill--teal {
    color: #0f766e;
    background: rgba(15, 118, 110, 0.12);
    border-color: rgba(15, 118, 110, 0.25);
}

.tc-pill--orange {
    color: #b45309;
    background: rgba(180, 83, 9, 0.12);
    border-color: rgba(180, 83, 9, 0.25);
}

.tc-pill--default {
    color: var(--tc-ink-2);
    background: var(--tc-surface-2);
    border-color: var(--tc-border-strong);
    font-family: var(--tc-font-mono);
    font-size: var(--tc-text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: var(--tc-space-0-5) var(--tc-space-2);
    border-radius: var(--tc-radius-xs);
}

.tc-pill--default::before {
    content: "";
    width: 0.38rem;
    height: 0.2rem;
    border-left: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    border-radius: 0;
    background: none;
    transform: rotate(-45deg) translateY(-0.05rem);
}

/* Cor de status é configurável (ADR-0022), então o texto NÃO pode ser a cor crua: amarelo-claro
   some no tema claro e azul-marinho some no escuro. O texto é a MESMA cor puxada para outro tom
   — escuro no tema claro, claro no tema escuro. A identidade da cor fica; a ilegibilidade não é
   mais alcançável, seja qual for a cor cadastrada (P1-4 / ADR-0055). */
.tc-pill--custom {
    color: color-mix(in srgb, var(--tc-status-color, var(--tc-muted)) 40%, #14181f);
    background: color-mix(in srgb, var(--tc-status-color, var(--tc-muted)) 14%, transparent);
    border-color: color-mix(in srgb, var(--tc-status-color, var(--tc-muted)) 28%, transparent);
}

[data-bs-theme="dark"] .tc-pill--custom {
    color: color-mix(in srgb, var(--tc-status-color, var(--tc-muted)) 40%, #f2f5f8);
    background: color-mix(in srgb, var(--tc-status-color, var(--tc-muted)) 18%, transparent);
    border-color: color-mix(in srgb, var(--tc-status-color, var(--tc-muted)) 34%, transparent);
}

[data-bs-theme="dark"] .tc-pill--green {
    color: #4ad991;
    background: rgba(74, 217, 145, 0.14);
}

[data-bs-theme="dark"] .tc-pill--blue {
    color: #7ba7ff;
    background: rgba(123, 167, 255, 0.14);
}

[data-bs-theme="dark"] .tc-pill--yellow {
    color: #facc15;
    background: rgba(250, 204, 21, 0.14);
}

[data-bs-theme="dark"] .tc-pill--red {
    color: #ff7a6b;
    background: rgba(255, 122, 107, 0.14);
}

[data-bs-theme="dark"] .tc-pill--purple {
    color: #c4a7ff;
    background: rgba(196, 167, 255, 0.14);
}

[data-bs-theme="dark"] .tc-pill--teal {
    color: #5eead4;
    background: rgba(94, 234, 212, 0.14);
}

[data-bs-theme="dark"] .tc-pill--orange {
    color: #fdba74;
    background: rgba(253, 186, 116, 0.14);
}

.tc-color-chip {
    display: inline-block;
    width: 0.85rem;
    height: 0.85rem;
    margin-right: 0.45rem;
    border-radius: var(--tc-radius-circle);
    vertical-align: -0.12rem;
    background: var(--tc-status-color, var(--tc-muted));
    border: 1px solid color-mix(in srgb, var(--tc-status-color, var(--tc-muted)) 55%, transparent);
}

.tc-color-picker {
    display: grid;
    gap: var(--tc-space-3);
}

.tc-color-picker__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 5.5rem;
    gap: var(--tc-space-3);
    align-items: end;
}

.tc-color-picker__native {
    width: 100%;
    min-height: 2.55rem;
    padding: var(--tc-space-1);
}

.tc-color-picker__presets {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tc-space-1-5);
}

.tc-color-swatch {
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--tc-border-strong);
    border-radius: var(--tc-radius-sm);
    background: var(--tc-status-color, var(--tc-muted));
    cursor: pointer;
    transition: transform var(--tc-t-fast), box-shadow var(--tc-t-fast), border-color var(--tc-t-fast);
}

.tc-color-swatch:hover,
.tc-color-swatch:focus-visible {
    border-color: var(--tc-brand);
    box-shadow: 0 0 0 0.2rem rgba(var(--tc-brand-rgb), 0.15);
    transform: translateY(-1px);
}

.tc-tag {
    display: inline-flex;
    align-items: center;
    font-family: var(--tc-font-mono);
    font-size: var(--tc-text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tc-muted);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-xs);
    padding: var(--tc-space-0-5) var(--tc-space-1-5);
    background: var(--tc-surface-2);
}

/* Contador do sino (D-40): o vermelho do Bootstrap é o de erro, e notificação não é erro.
   A contagem usa a cor da marca, como o resto do que chama atenção sem ser alarme. */
.tc-badge-count {
    background: var(--tc-brand-ink);
    color: #fff;
}

.tc-notification-tabs {
    display: flex;
    gap: var(--tc-space-1);
    width: fit-content;
    margin-bottom: var(--tc-space-4);
    padding: var(--tc-space-1);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-sm);
    background: var(--tc-surface-2);
}

.tc-notification-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--tc-space-2);
    padding: var(--tc-space-2) var(--tc-space-3);
    border-radius: var(--tc-radius-xs);
    color: var(--tc-ink-2);
    font-size: var(--tc-text-sm);
    font-weight: 650;
}

.tc-notification-tab span {
    min-width: var(--tc-space-5);
    padding: 0 var(--tc-space-1);
    border-radius: var(--tc-radius-pill);
    background: var(--tc-hover-bg);
    color: var(--tc-muted);
    text-align: center;
    font-size: var(--tc-text-xs);
}

.tc-notification-tab:hover,
.tc-notification-tab.is-active {
    background: var(--tc-surface);
    color: var(--tc-ink-1);
    box-shadow: var(--tc-shadow-sm);
}

.tc-notification-list {
    display: grid;
}

.tc-notification {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    border-bottom: 1px solid var(--tc-border);
}

.tc-notification:last-child { border-bottom: 0; }

.tc-notification__open button {
    display: grid;
    grid-template-columns: var(--tc-space-2) minmax(0, 1fr);
    gap: var(--tc-space-3);
    width: 100%;
    padding: var(--tc-space-4);
    border: 0;
    background: transparent;
    color: var(--tc-ink-1);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.tc-notification__open button:hover { background: var(--tc-hover-bg); }

.tc-notification__marker {
    width: var(--tc-space-2);
    height: var(--tc-space-2);
    margin-top: var(--tc-space-1-5);
    border-radius: var(--tc-radius-circle);
    background: transparent;
}

.tc-notification.is-unread .tc-notification__marker { background: var(--tc-brand); }

.tc-notification__content,
.tc-notification__top {
    display: flex;
    min-width: 0;
}

.tc-notification__content {
    flex-direction: column;
    gap: var(--tc-space-1);
}

.tc-notification__top {
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--tc-space-3);
}

.tc-notification__top strong { font-weight: 600; }
.tc-notification.is-unread .tc-notification__top strong { font-weight: 750; }

.tc-notification__top time,
.tc-notification__actor {
    color: var(--tc-muted);
    font-size: var(--tc-text-sm);
}

.tc-notification__top time { white-space: nowrap; }
.tc-notification__body { color: var(--tc-ink-2); font-size: var(--tc-text-sm); }

.tc-notification__unread {
    padding-right: var(--tc-space-4);
}

@media (max-width: 575.98px) {
    .tc-notification-tabs { width: 100%; }
    .tc-notification-tab { flex: 1; justify-content: center; }
    .tc-notification__top { flex-direction: column; gap: var(--tc-space-1); }
    .tc-notification__unread { padding-right: var(--tc-space-3); }
}

.tc-code {
    font-family: var(--tc-font-mono);
    font-size: var(--tc-text-sm);
    color: var(--tc-brand);
    background: var(--tc-active-bg);
    border-radius: var(--tc-radius-xs);
    padding: var(--tc-space-0-5) var(--tc-space-1-5);
}

/* -------------------------------------------------------- 12) FLASH / ALERTAS */
.tc-flash {
    display: flex;
    align-items: flex-start;
    gap: var(--tc-space-3);
    border: 1px solid var(--tc-border);
    border-left-width: 4px;
    border-radius: var(--tc-radius-sm);
    background: var(--tc-surface);
    box-shadow: var(--tc-shadow-sm);
    padding: var(--tc-space-3) var(--tc-space-4);
    margin-bottom: 1.25rem;
    animation: tcFadeUp 0.35s ease both;
}

.tc-flash .bi {
    font-size: var(--tc-text-lg);
    line-height: 1.4;
}

.tc-flash__body {
    flex: 1;
}

.tc-flash--ok {
    border-left-color: #1a7f4b;
}

.tc-flash--ok .bi {
    color: #1a7f4b;
}

/* Aviso: a ação foi feita, mas parou no meio e alguém precisa agir (ADR-0060). Não é
   sucesso — e pintar de vermelho faria parecer que nada aconteceu, o que também engana. */
.tc-flash--warn {
    border-left-color: #b8860b;
}

.tc-flash--warn .bi {
    color: #b8860b;
}

.tc-flash--error {
    border-left-color: var(--tc-brand);
}

.tc-flash--error .bi {
    color: var(--tc-brand);
}

.tc-flash__close {
    background: none;
    border: 0;
    color: var(--tc-muted);
    font-size: var(--tc-text-lg);
    cursor: pointer;
    line-height: 1;
    padding: var(--tc-space-0-5);
}

.tc-flash__close:hover {
    color: var(--tc-ink-1);
}

/* Validação inline (mantém compat com .invalid-feedback do Bootstrap) */
.was-validated .form-control:invalid,
.form-control.is-invalid {
    border-color: var(--tc-danger-text);
}

.invalid-feedback,
.was-validated .form-control:invalid~.invalid-feedback {
    color: var(--tc-danger-text);
}

/* Calendário próprio do ERP — aplicado globalmente a input[type=date].
   O painel é movido para fora do card (portal) e posicionado em coordenadas de
   viewport pelo JS, então não precisa que o card suba de camada. */
.tc-datepicker {
    position: relative;
}

/* Painel de DDI do telefone: mesmo padrão do datepicker — posicionado
   relativo ao próprio campo (não depende de Popper/overflow de ancestrais). */
.card.is-ddi-layer,
.tc-filters.is-ddi-layer,
.tc-tablecard.is-ddi-layer {
    position: relative;
    z-index: var(--tc-z-ddi-root);
}

.tc-ddi-group {
    position: relative;
}

.tc-ddi-panel {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: var(--tc-z-ddi-menu);
    margin-top: 0.25rem;
    min-width: 240px;
    max-height: 280px;
    overflow-y: auto;
    background: var(--tc-surface);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius);
    box-shadow: var(--tc-shadow);
    padding: var(--tc-space-1);
}

.tc-ddi-panel[hidden] {
    display: none;
}

.tc-ddi-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tc-ddi-option {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    padding: var(--tc-space-1-5) var(--tc-space-2-5);
    border-radius: calc(var(--tc-radius) - var(--tc-radius-xs));
    color: var(--tc-ink-1);
    white-space: nowrap;
}

.tc-ddi-option:hover,
.tc-ddi-option.active {
    background: var(--tc-border);
}

.tc-datepicker__native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.tc-datepicker__field {
    width: 100%;
    padding-right: var(--tc-space-11);
    /* espaço para o botão do calendário */
}

.tc-datepicker__field:disabled {
    cursor: not-allowed;
    opacity: 0.65;
}

.tc-datepicker.is-open .tc-datepicker__field {
    border-color: var(--tc-brand);
    box-shadow: 0 0 0 0.2rem rgba(var(--tc-brand-rgb), 0.18);
}

.tc-datepicker__toggle {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 2.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--tc-brand);
    font-size: var(--tc-text-lg);
    cursor: pointer;
    border-radius: 0 var(--tc-radius) var(--tc-radius) 0;
    transition: background var(--tc-t-fast), color var(--tc-t-fast);
}

.tc-datepicker__toggle:hover {
    background: var(--tc-active-bg);
}

.tc-datepicker__toggle:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.tc-datepicker__month {
    border: 0;
    background: transparent;
    cursor: pointer;
    border-radius: var(--tc-radius-sm);
    padding: var(--tc-space-0-5) var(--tc-space-2);
    transition: background var(--tc-t-fast), color var(--tc-t-fast);
}

.tc-datepicker__month:hover {
    background: var(--tc-active-bg);
    color: var(--tc-brand);
}

.tc-datepicker__years {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--tc-space-1);
    padding: var(--tc-space-0-5) 0;
}

.tc-datepicker__years[hidden] {
    display: none;
}

.tc-datepicker__year {
    border: 0;
    border-radius: var(--tc-radius-sm);
    background: transparent;
    color: var(--tc-ink-2);
    font-size: var(--tc-text-sm);
    font-weight: 600;
    padding: var(--tc-space-2) 0;
    cursor: pointer;
    transition: background var(--tc-t-fast), color var(--tc-t-fast), transform var(--tc-t-fast);
}

.tc-datepicker__year:hover:not(:disabled) {
    background: var(--tc-active-bg);
    color: var(--tc-brand);
    transform: translateY(-1px);
}

.tc-datepicker__year.is-outside {
    color: var(--tc-muted);
    opacity: 0.48;
}

.tc-datepicker__year.is-today {
    box-shadow: inset 0 0 0 1px var(--tc-brand);
}

.tc-datepicker__year.is-selected {
    background: var(--tc-brand-ink);
    color: #fff;
    box-shadow: 0 3px 9px rgba(var(--tc-brand-rgb), 0.28);
}

.tc-datepicker__year:disabled {
    color: var(--tc-muted);
    opacity: 0.24;
    cursor: not-allowed;
}

/* Fixo na viewport: o JS grava top/left. Assim nenhum overflow ou contexto de
   empilhamento de ancestral (card, aba, modal) recorta ou esconde o painel. */
.tc-datepicker__panel {
    position: fixed;
    z-index: var(--tc-z-datepicker);
    top: 0;
    left: 0;
    width: 19.5rem;
    max-width: calc(100vw - 2rem);
    padding: var(--tc-space-3);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius);
    background: var(--tc-elev);
    color: var(--tc-ink-1);
    box-shadow: var(--tc-shadow-lg);
    animation: tcDatepickerIn 0.16s ease both;
}

.tc-datepicker__panel[hidden] {
    display: none;
}

.tc-datepicker__head {
    display: grid;
    grid-template-columns: 2.25rem 1fr 2.25rem;
    align-items: center;
    gap: var(--tc-space-1-5);
    margin-bottom: 0.65rem;
}

.tc-datepicker__month {
    text-align: center;
    font-weight: 750;
    font-size: var(--tc-text-base);
    letter-spacing: -0.01em;
}

.tc-datepicker__nav {
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--tc-radius-circle);
    background: transparent;
    color: var(--tc-ink-2);
    cursor: pointer;
    transition: background var(--tc-t-fast), color var(--tc-t-fast), transform var(--tc-t-fast);
}

.tc-datepicker__nav:hover {
    background: var(--tc-active-bg);
    color: var(--tc-brand);
}

.tc-datepicker__nav:active {
    transform: scale(0.94);
}

.tc-datepicker__weekdays,
.tc-datepicker__days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--tc-space-0-5);
}

.tc-datepicker__weekdays[hidden],
.tc-datepicker__days[hidden] {
    display: none;
}

.tc-datepicker__weekdays {
    margin-bottom: 0.28rem;
}

.tc-datepicker__weekdays span {
    padding: var(--tc-space-0-5) 0;
    text-align: center;
    color: var(--tc-muted);
    font-family: var(--tc-font-mono);
    font-size: var(--tc-text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tc-datepicker__day {
    position: relative;
    aspect-ratio: 1;
    min-width: 0;
    border: 0;
    border-radius: var(--tc-radius-sm);
    background: transparent;
    color: var(--tc-ink-2);
    font-size: var(--tc-text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--tc-t-fast), color var(--tc-t-fast), transform var(--tc-t-fast);
}

.tc-datepicker__day:hover:not(:disabled) {
    background: var(--tc-active-bg);
    color: var(--tc-brand);
    transform: translateY(-1px);
}

.tc-datepicker__day.is-outside {
    color: var(--tc-muted);
    opacity: 0.48;
}

.tc-datepicker__day.is-today::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0.28rem;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    border-radius: var(--tc-radius-circle);
    background: var(--tc-brand);
}

.tc-datepicker__day.is-selected {
    background: var(--tc-brand-ink);
    color: #fff;
    box-shadow: 0 3px 9px rgba(var(--tc-brand-rgb), 0.28);
}

.tc-datepicker__day.is-selected::after {
    background: #fff;
}

.tc-datepicker__day:disabled {
    color: var(--tc-muted);
    opacity: 0.24;
    cursor: not-allowed;
}

.tc-datepicker__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tc-space-3);
    margin-top: 0.65rem;
    padding-top: var(--tc-space-2-5);
    border-top: 1px solid var(--tc-border);
}

.tc-datepicker__action {
    border: 0;
    background: transparent;
    color: var(--tc-brand);
    font-size: var(--tc-text-xs);
    font-weight: 700;
    cursor: pointer;
    padding: var(--tc-space-1) var(--tc-space-1-5);
    border-radius: var(--tc-radius-xs);
}

.tc-datepicker__action:hover {
    background: var(--tc-active-bg);
}

.tc-datepicker__action--muted {
    color: var(--tc-muted);
}

@keyframes tcDatepickerIn {
    from {
        opacity: 0;
        transform: translateY(-4px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* No celular o painel vira um cartão centralizado — o JS não grava top/left
   nesta faixa (ver positionDatepicker em app.js), então estas regras valem. */
@media (max-width: 575.98px) {
    .tc-datepicker__panel {
        top: 50%;
        right: 1rem;
        bottom: auto;
        left: 1rem;
        width: auto;
        max-width: none;
        transform: translateY(-50%);
        animation: none;
    }
}

/* ----------------------------------------------------- 13) DIALOG / CONFIRM */
dialog.tc-dialog {
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius);
    background: var(--tc-surface);
    color: var(--tc-ink-1);
    box-shadow: var(--tc-shadow-lg);
    padding: 0;
    width: min(420px, calc(100vw - 2rem));
    max-width: 420px;
}

dialog.tc-dialog::backdrop {
    background: rgba(8, 8, 12, 0.55);
    backdrop-filter: blur(2px);
}

.tc-dialog__body {
    padding: var(--tc-space-6) var(--tc-space-6) var(--tc-space-4);
}

.tc-dialog__icon {
    width: 46px;
    height: 46px;
    border-radius: var(--tc-radius-circle);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--tc-text-xl);
    margin-bottom: 0.9rem;
    color: var(--tc-brand);
    background: var(--tc-active-bg);
}

.tc-dialog__title {
    font-weight: 700;
    font-size: var(--tc-text-lg);
    margin: 0 0 0.35rem;
}

.tc-dialog__text {
    color: var(--tc-muted);
    margin: 0;
    font-size: var(--tc-text-base);
}

.tc-dialog__foot {
    display: flex;
    justify-content: flex-end;
    gap: var(--tc-space-2-5);
    padding: var(--tc-space-4) var(--tc-space-6) var(--tc-space-5);
}

/* --------------------------------------------- 14) ESTADOS (vazio / loading) */
.tc-empty {
    text-align: center;
    padding: var(--tc-space-11) var(--tc-space-4);
    color: var(--tc-muted);
}

.tc-empty__icon {
    font-size: var(--tc-text-2xl);
    opacity: 0.55;
    display: block;
    margin-bottom: 0.5rem;
}

.tc-empty__title {
    font-weight: 600;
    color: var(--tc-ink-2);
}

/* Tela vazia é convite para agir, não constatação de ausência: as 21 ocorrências de `.tc-empty`
   não ofereciam próximo passo nenhum. A carga inicial vai produzir exatamente essa situação em
   várias telas ao mesmo tempo. */
.tc-empty__text {
    display: block;
    max-width: 42ch;
    margin: 0.35rem auto 0;
    font-size: var(--tc-text-base);
}

.tc-empty__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tc-space-2);
    justify-content: center;
    margin-top: 1.1rem;
}

.tc-loading {
    position: fixed;
    inset: 0;
    z-index: var(--tc-z-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--tc-app-bg) 70%, transparent);
    backdrop-filter: blur(2px);
}

.tc-loading[hidden] {
    display: none;
}

/* --------------------------------------------------------- 15) AUTH HELPERS */
/* Wrapper centralizado (páginas de erro) */
.tc-auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--tc-space-4);
}

/* ----------------------------------------------------------- 16) UTILITÁRIOS */
.tc-w-login {
    width: 100%;
    max-width: 380px;
}

.tc-w-narrow {
    max-width: 520px;
}

.tc-w-filter {
    max-width: 260px;
}

/* ----------------------------------------------------------- 17) RESPONSIVO */
@media (max-width: 991.98px) {
    .tc-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Sidebar vira drawer deslizante.
       `100vh` no celular ignora a barra de endereço do Chrome/Safari (~80px): o rodapé do menu,
       que tem `margin-top: auto`, ficava escondido atrás da UI do navegador. `dvh` acompanha. */
    .tc-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        z-index: var(--tc-z-mobile-sidebar);
        height: 100dvh;
        transform: translateX(-100%);
        transition: transform var(--tc-t);
        box-shadow: var(--tc-shadow-lg);
        padding-top: var(--tc-space-4);
    }

    body.tc-drawer-open .tc-sidebar {
        transform: translateX(0);
    }
}

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

@media (max-width: 991.98px) {
    .tc-queue {
        grid-template-columns: 1fr;
    }
}

/* Listagem vira cartão empilhado.
   A 390px a tabela mantinha as sete colunas e rolava na horizontal: o nome quebrava em quatro
   linhas e Status e Ações ficavam FORA da tela — no celular não dava para ver o status nem
   agir, e nada indicava que a tabela rolava. Cada linha vira um cartão; o rótulo de cada valor
   vem do `data-label` do próprio `td`, que substitui o cabeçalho escondido.
   A caixa de seleção em massa sai: no celular ela consumia coluna sem servir para nada. */
@media (max-width: 767.98px) {
    .tc-tablecard {
        background: none;
        border: 0;
        box-shadow: none;
    }

    .tc-tablecard>.table-responsive>.table,
    .tc-tablecard>.table-responsive>.table>tbody,
    .tc-tablecard>.table-responsive>.table>tbody>tr,
    .tc-tablecard>.table-responsive>.table>tbody>tr>td {
        display: block;
        width: auto;
    }

    .tc-tablecard>.table-responsive>.table>thead {
        display: none;
    }

    .tc-tablecard>.table-responsive>.table>tbody>tr {
        background: var(--tc-surface);
        border: 1px solid var(--tc-border);
        border-radius: var(--tc-radius);
        box-shadow: var(--tc-shadow-sm);
        margin-bottom: 0.75rem;
        padding: var(--tc-space-1-5) 0;
    }

    .tc-tablecard>.table-responsive>.table>tbody>tr:hover {
        background: var(--tc-surface);
    }

    .tc-tablecard>.table-responsive>.table>tbody>tr>td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--tc-space-4);
        padding: var(--tc-space-1-5) var(--tc-space-4);
        border: 0;
        text-align: left;
    }

    .tc-tablecard>.table-responsive>.table>tbody>tr>td[data-label]::before {
        content: attr(data-label);
        flex: none;
        font-family: var(--tc-font-mono);
        font-size: var(--tc-text-xs);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--tc-muted);
    }

    /* O nome é o título do cartão, não um par rótulo/valor. */
    .tc-tablecard>.table-responsive>.table>tbody>tr>td.tc-cell-strong {
        display: block;
        padding-top: var(--tc-space-3);
        font-size: var(--tc-text-lg);
    }

    .tc-tablecard>.table-responsive>.table>tbody>tr>td.tc-cell-strong::before {
        content: none;
    }

    .tc-tablecard>.table-responsive>.table>tbody>tr>td.tc-col-check {
        display: none;
    }

    .tc-tablecard>.table-responsive>.table>tbody>tr>td.tc-col-actions {
        margin-top: 0.35rem;
        padding-top: var(--tc-space-3);
        border-top: 1px solid var(--tc-border);
        justify-content: flex-end;
    }

    .tc-tablecard>.table-responsive>.table>tbody>tr>td.tc-col-actions::before {
        margin-right: auto;
    }

    .tc-rowactions .btn {
        min-width: 2.75rem;
        min-height: 2.75rem;
    }
}

@media (max-width: 575.98px) {
    .tc-stats {
        grid-template-columns: 1fr;
    }

    .tc-userchip__meta {
        display: none;
    }

    /* Desvio D-15 (Sprint 9): a 360px a topbar somava 385px numa viewport de 345 e a página
       inteira rolava na horizontal — em toda tela do admin, porque o defeito é do shell.
       Esconder o `__meta` já era feito aqui e não bastava: sobravam o logo (113px), o gap de
       16px e o padding de 28px, e nada disso encolhia (`min-width: auto` nos filhos flex).
       Só o chip do usuário fica no mobile; o nome e o cargo continuam dentro do dropdown. */
    .tc-topbar {
        gap: var(--tc-space-2);
        padding-left: var(--tc-space-2);
        padding-right: var(--tc-space-2);
    }

    .tc-topbar__left,
    .tc-topbar__right {
        min-width: 0;
    }

    .tc-brand__logo {
        max-width: 84px;
        height: auto;
    }

    /* O dropdown é absoluto: sem ancorar pela direita ele nasce fora da viewport. */
    .tc-usermenu .tc-menu {
        right: 0;
        left: auto;
        max-width: calc(100vw - 1rem);
    }

    .tc-main {
        padding: var(--tc-space-5) var(--tc-space-4);
    }

    .tc-formbar--grid .tc-formbar__hint {
        order: -1;
        flex-basis: 100%;
        margin-right: 0;
    }

    .tc-formbar--grid .btn {
        flex: 1;
    }

    .tc-page__head {
        align-items: flex-start;
    }
}

/* -------------------------------------------------------------- 18) MOTION */
@keyframes tcFadeUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.tc-animate {
    opacity: 0;
    animation: tcFadeUp 0.5s ease forwards;
}

.tc-animate-1 {
    animation-delay: 0.04s;
}

.tc-animate-2 {
    animation-delay: 0.10s;
}

.tc-animate-3 {
    animation-delay: 0.16s;
}

.tc-animate-4 {
    animation-delay: 0.22s;
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }

    .tc-animate {
        opacity: 1;
    }

    .btn-primary:hover,
    .tc-stat:hover {
        transform: none;
    }
}

/* ============================================================ 19) EXTRAS
   Logo no topbar, sidebar recolhível (rail), menu do usuário, voltar ao topo.
   ========================================================================== */

/* ---- Marca com a logo da skin (mesma do login) ---- */
.tc-brand {
    padding: 0;
}

.tc-brand__logo {
    height: 30px;
    width: auto;
    display: block;
}

/* ---- Sidebar recolhida (rail) — desktop apenas ----
   Mostra só UM ícone por MÓDULO. Os submenus ficam ocultos e aparecem
   num flyout ao passar o mouse (ou focar) o módulo. */
@media (min-width: 992px) {
    body.tc-rail {
        --tc-sidebar-w: 74px;
    }

    /* overflow visível pro flyout não ser recortado e z-index alto pra ele ficar
       à FRENTE do conteúdo (a sidebar passa a ser seu próprio contexto de empilhamento). */
    body.tc-rail .tc-sidebar {
        overflow: visible;
        z-index: var(--tc-z-rail);
    }

    /* Cabeçalho do módulo vira só o ícone, centralizado.
       Sem clique no recolhido (o flyout abre no hover); o hover do grupo
       continua funcionando porque o evento passa pro .tc-navgroup. */
    body.tc-rail .tc-navsection--toggle {
        justify-content: center;
        padding: var(--tc-space-2-5) 0;
        pointer-events: none;
    }

    body.tc-rail .tc-navsection__label,
    body.tc-rail .tc-navsection__caret {
        display: none;
    }

    body.tc-rail .tc-navsection__icon {
        display: inline-block;
        color: var(--tc-ink-2);
    }

    body.tc-rail .tc-navgroup:hover .tc-navsection__icon,
    body.tc-rail .tc-navgroup:focus-within .tc-navsection__icon {
        color: var(--tc-brand);
    }

    /* Submenus escondidos por padrão; viram flyout flutuante no hover/foco. */
    body.tc-rail .tc-navgroup__items {
        display: flex;
        position: absolute;
        top: 0;
        left: 100%;
        min-width: 210px;
        padding: var(--tc-space-1-5);
        background: var(--tc-surface);
        border: 1px solid var(--tc-border);
        border-radius: var(--tc-radius-sm);
        box-shadow: var(--tc-shadow-lg);
        opacity: 0;
        visibility: hidden;
        transform: translateX(-4px);
        transition: opacity var(--tc-t-fast), transform var(--tc-t-fast), visibility var(--tc-t-fast);
        z-index: var(--tc-z-menu);
    }

    /* O acordeão não vale no rail: o flyout sempre mostra todos os itens. */
    body.tc-rail .tc-navgroup.is-collapsed .tc-navgroup__items {
        display: flex;
    }

    body.tc-rail .tc-navgroup:hover .tc-navgroup__items,
    body.tc-rail .tc-navgroup:focus-within .tc-navgroup__items {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }

    /* Legenda com o nome do módulo no topo da caixa do flyout. */
    body.tc-rail .tc-navgroup__items::before {
        content: attr(data-flyout-title);
        font-family: var(--tc-font-mono);
        font-size: var(--tc-text-xs);
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--tc-muted);
        padding: var(--tc-space-1-5) var(--tc-space-2-5) var(--tc-space-2);
    }

    body.tc-rail .tc-sidebar__foot {
        display: none;
    }
}

/* ---- Menu do usuário (dropdown no header) ---- */
.tc-usermenu {
    position: relative;
}

.tc-usermenu__trigger {
    cursor: pointer;
    border: 1px solid var(--tc-border);
    background: var(--tc-surface);
}

.tc-usermenu__trigger[aria-expanded="true"] {
    border-color: var(--tc-brand);
}

.tc-usermenu__caret {
    color: var(--tc-muted);
    font-size: var(--tc-text-xs);
    margin-left: 0.15rem;
}

.tc-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 224px;
    background: var(--tc-surface);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-sm);
    box-shadow: var(--tc-shadow-lg);
    padding: var(--tc-space-1-5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--tc-t-fast), transform var(--tc-t-fast), visibility var(--tc-t-fast);
    z-index: var(--tc-z-menu);
}

.tc-usermenu.is-open .tc-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.tc-menu__head {
    padding: var(--tc-space-2) var(--tc-space-2-5);
    border-bottom: 1px solid var(--tc-border);
    margin-bottom: 0.3rem;
}

.tc-menu__name {
    font-weight: 700;
}

.tc-menu__role {
    font-size: var(--tc-text-xs);
    color: var(--tc-muted);
}

.tc-menu__item {
    display: flex;
    align-items: center;
    gap: var(--tc-space-2-5);
    width: 100%;
    padding: var(--tc-space-2) var(--tc-space-2-5);
    border-radius: var(--tc-radius-sm);
    color: var(--tc-ink-2);
    background: none;
    border: 0;
    text-align: left;
    font-size: var(--tc-text-base);
    cursor: pointer;
}

.tc-menu__item:hover {
    background: var(--tc-hover-bg);
    color: var(--tc-ink-1);
}

.tc-menu__item .bi {
    font-size: var(--tc-text-lg);
}

.tc-menu__item--danger {
    color: var(--tc-brand);
}

.tc-menu form {
    margin: 0;
}

/* ---- Botão "voltar ao topo" ----
   Ficava exatamente sobre o botão de próxima página no fim de qualquer listagem: em Alunos, com
   25 registros, o "avançar" sumia atrás do círculo laranja. Subiu acima da paginação e,
   em tela de formulário, some de vez — lá o lugar de baixo é da barra de Salvar. */
.tc-scrolltop {
    position: fixed;
    right: 1.25rem;
    bottom: 5.25rem;
    z-index: var(--tc-z-scrolltop);
    width: 44px;
    height: 44px;
    border-radius: var(--tc-radius-circle);
    border: 0;
    color: #fff;
    background: var(--tc-brand);
    box-shadow: 0 8px 20px rgba(var(--tc-brand-rgb), 0.4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--tc-text-lg);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity var(--tc-t), transform var(--tc-t), visibility var(--tc-t), background var(--tc-t-fast);
}

.tc-scrolltop.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.tc-scrolltop:hover {
    background: var(--tc-brand-dark);
}

/* A barra de Salvar já é o rodapé da tela: dois círculos disputando o canto seria um sobre o
   outro, e no celular o redondo cairia em cima do Salvar. */
body:has(.tc-formbar) .tc-scrolltop {
    display: none;
}

/* ---- Paginação das listagens ---- */
/* Mesmo caso do resumo de entrada: `display: flex` numa classe vence o `display: none` que o
   navegador dá ao [hidden]. Sem esta regra, esconder a paginação pelo atributo não funciona. */
.tc-pagination[hidden] {
    display: none;
}

.tc-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tc-space-4);
    flex-wrap: wrap;
    margin-top: 1.25rem;
}

.tc-pagination__info {
    display: inline-flex;
    align-items: center;
    gap: var(--tc-space-2);
    color: var(--tc-muted);
    font-size: var(--tc-text-base);
}

.tc-pagination__info .bi {
    color: var(--tc-brand);
}

.tc-pagination__sep {
    opacity: 0.5;
}

.tc-pagination__pages {
    display: flex;
    align-items: center;
    gap: var(--tc-space-1-5);
    list-style: none;
    margin: 0;
    padding: 0;
}

.tc-pagebtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 var(--tc-space-2-5);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-sm);
    background: var(--tc-surface);
    color: var(--tc-ink-2);
    font-weight: 600;
    font-size: var(--tc-text-base);
    transition: background var(--tc-t-fast), color var(--tc-t-fast), border-color var(--tc-t-fast);
}

.tc-pagebtn:hover {
    background: var(--tc-hover-bg);
    color: var(--tc-ink-1);
    border-color: var(--tc-border-strong);
}

.tc-pagebtn.is-active {
    background: var(--tc-brand-ink);
    border-color: var(--tc-brand-ink);
    color: #fff;
    box-shadow: 0 2px 8px rgba(var(--tc-brand-rgb), 0.3);
}

.tc-pagebtn.is-active:hover {
    background: var(--tc-brand-dark);
    color: #fff;
}

/* ---- Realce do termo buscado ---- */
mark,
.tc-mark {
    background: rgba(var(--tc-brand-rgb), 0.16);
    color: var(--tc-brand);
    padding: 0 var(--tc-space-0-5);
    border-radius: var(--tc-radius-xs);
    font-weight: 700;
}

[data-bs-theme="dark"] mark,
[data-bs-theme="dark"] .tc-mark {
    color: #ff8a76;
}

/* ---- Ações por linha (tabelas) ----
   O `flex-wrap: wrap` sem largura mínima na coluna empilhava os botões na vertical e levava a
   linha da tabela a ~82px de altura (em Contratos isso acontecia já com dois botões).
   O alvo de toque também subiu: com `padding: .3rem` e `line-height: 1` dava ~24px, o mínimo
   absoluto do WCAG 2.5.8, justamente nos botões que se quer alcançar com o dedo. */
.tc-rowactions {
    display: inline-flex;
    align-items: center;
    gap: var(--tc-space-1-5);
    justify-content: flex-end;
    flex-wrap: nowrap;
}

.tc-col-actions {
    width: 1%;
    min-width: 7.5rem;
    white-space: nowrap;
}

.tc-rowactions form {
    margin: 0;
}

.tc-rowactions .btn {
    padding: var(--tc-space-1) var(--tc-space-2);
    line-height: 1;
    min-width: 2.25rem;
    min-height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Campo de motivo do modal de status */
dialog.tc-dialog .form-control.is-invalid {
    border-color: var(--tc-danger-text);
}

/* ---- Cabeçalho ordenável (cores da marca) ---- */
.tc-sort {
    color: inherit;
    display: inline-flex;
    align-items: center;
    gap: var(--tc-space-1);
    white-space: nowrap;
    text-transform: inherit;
    letter-spacing: inherit;
}

.tc-sort:hover {
    color: var(--tc-ink-1);
}

.tc-sort .bi {
    font-size: var(--tc-text-xs);
    opacity: 0.45;
}

.tc-sort:hover .bi {
    opacity: 0.85;
}

.tc-sort.is-active {
    color: var(--tc-brand);
}

.tc-sort.is-active .bi {
    opacity: 1;
}

/* ---- Alunos: lista de definições (detalhe), timeline e linhas de perfil ---- */
.tc-deflist {
    display: flex;
    flex-direction: column;
}

.tc-deflist__row {
    display: grid;
    grid-template-columns: 12rem 1fr;
    gap: var(--tc-space-3);
    padding: var(--tc-space-2) 0;
    border-bottom: 1px solid var(--tc-border);
}

.tc-deflist__row:last-child {
    border-bottom: 0;
}

.tc-deflist__row dt {
    margin: 0;
    color: var(--tc-ink-2);
    font-size: var(--tc-text-sm);
}

.tc-deflist__row dd {
    margin: 0;
    color: var(--tc-ink-1);
    /* min-width:0 deixa o item do grid encolher; overflow-wrap quebra strings
       longas sem espaço (ex.: ID do documento do Autentique). */
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
    .tc-deflist__row {
        grid-template-columns: 1fr;
        gap: var(--tc-space-0-5);
    }
}

/* Empilhado: para cards estreitos (coluna lateral), onde a coluna fixa de 12rem não
   sobra largura nenhuma para o valor e "22/07/2026 19:55" desce uma letra por linha. */
.tc-deflist--stacked .tc-deflist__row {
    grid-template-columns: 1fr;
    gap: var(--tc-space-0-5);
}

/* Ficha do aluno aprovada em 18/08/2026: cadastro à esquerda, comentários e
   resumo acadêmico à direita, sem reconstruir a trajetória nesta página. */
.tc-student-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tc-space-4);
    margin-bottom: var(--tc-space-4);
}

.tc-student-hero__identity,
.tc-student-hero__meta {
    display: flex;
    align-items: center;
}

.tc-student-hero__identity {
    gap: var(--tc-space-3);
    min-width: 0;
}

.tc-student-hero__meta {
    flex-wrap: wrap;
    gap: var(--tc-space-1-5);
    margin-top: var(--tc-space-1-5);
}

.tc-student-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 3.5rem;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--tc-radius-circle);
    background: var(--tc-active-bg);
    color: var(--tc-brand);
    font-size: var(--tc-text-lg);
    font-weight: 750;
}

.tc-tag {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    padding: 0 var(--tc-space-2);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-pill);
    color: var(--tc-ink-2);
    font-size: var(--tc-text-xs);
    font-weight: 650;
}

.tc-context-nav {
    display: flex;
    gap: var(--tc-space-1);
    margin-bottom: var(--tc-space-4);
    padding: var(--tc-space-1);
    overflow-x: auto;
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius);
    background: var(--tc-surface);
    box-shadow: var(--tc-shadow-sm);
}

.tc-context-nav__link {
    display: inline-flex;
    align-items: center;
    gap: var(--tc-space-1);
    flex: 0 0 auto;
    min-height: 2.5rem;
    padding: 0 var(--tc-space-3);
    border-radius: var(--tc-radius-sm);
    color: var(--tc-ink-2);
    font-size: var(--tc-text-sm);
    font-weight: 650;
    text-decoration: none;
}

a.tc-context-nav__link:hover {
    background: var(--tc-hover-bg);
    color: var(--tc-brand);
}

.tc-context-nav__link.is-active {
    background: var(--tc-active-bg);
    color: var(--tc-brand);
}

.tc-context-nav__link.is-disabled {
    color: var(--tc-muted);
    cursor: default;
}

.tc-context-nav__link small {
    display: grid;
    place-items: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 var(--tc-space-1);
    border-radius: var(--tc-radius-pill);
    background: var(--tc-surface-2);
    color: var(--tc-ink-2);
    font-size: var(--tc-text-xs);
}

.tc-profile-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr);
    gap: var(--tc-space-4);
    align-items: start;
}

.tc-profile-layout__main,
.tc-profile-layout__aside {
    display: grid;
    gap: var(--tc-space-4);
}

.tc-profile-layout__aside {
    position: sticky;
    top: var(--tc-space-4);
}

.tc-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--tc-space-3);
    margin-bottom: var(--tc-space-3);
}

.tc-section-title {
    margin: 0;
    color: var(--tc-ink-1);
    font-size: var(--tc-text-lg);
    font-weight: 700;
}

.tc-section-copy {
    margin: var(--tc-space-1) 0 0;
    color: var(--tc-muted);
    font-size: var(--tc-text-sm);
}

.tc-profile-definition {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--tc-space-4);
    margin: 0;
}

.tc-profile-definition__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--tc-space-0-5);
    min-width: 0;
    padding: var(--tc-space-2-5) 0;
    border: 0;
    border-bottom: 1px solid var(--tc-border);
    background: transparent;
    text-align: left;
}

button.tc-profile-definition__row {
    width: 100%;
    color: inherit;
    font: inherit;
}

.tc-profile-definition__row--wide {
    grid-column: 1 / -1;
}

.tc-profile-definition__row dt {
    color: var(--tc-muted);
    font-size: var(--tc-text-xs);
    font-weight: 650;
}

.tc-profile-definition__row dd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tc-space-2);
    min-width: 0;
    margin: 0;
    color: var(--tc-ink-1);
    overflow-wrap: anywhere;
}

.tc-copy-field {
    cursor: copy;
}

.tc-copy-field .bi {
    flex: 0 0 auto;
    color: var(--tc-muted);
    opacity: 0;
    transition: opacity var(--tc-t-fast), color var(--tc-t-fast);
}

.tc-copy-field:hover .bi,
.tc-copy-field:focus-visible .bi,
.tc-copy-field.is-copied .bi {
    opacity: 1;
}

.tc-copy-field:hover dd,
.tc-copy-field:focus-visible dd {
    color: var(--tc-brand);
}

.tc-copy-field.is-copied .bi {
    color: var(--tc-success);
}

@media (max-width: 991.98px) {
    .tc-student-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .tc-profile-layout {
        grid-template-columns: 1fr;
    }

    .tc-profile-layout__aside {
        position: static;
    }
}

@media (max-width: 575.98px) {
    .tc-profile-definition {
        grid-template-columns: 1fr;
    }
}

.tc-timeline {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tc-timeline__item {
    padding: var(--tc-space-2) 0 var(--tc-space-2) var(--tc-space-4);
    border-left: 2px solid var(--tc-border);
    position: relative;
}

.tc-timeline__item::before {
    content: "";
    position: absolute;
    left: -5px;
    top: 0.85rem;
    width: 8px;
    height: 8px;
    border-radius: var(--tc-radius-circle);
    background: var(--tc-brand);
}

.tc-timeline__event {
    display: block;
    font-family: var(--tc-font-mono);
    font-size: var(--tc-text-sm);
    color: var(--tc-ink-1);
}

.tc-timeline__meta {
    display: block;
    font-size: var(--tc-text-xs);
    color: var(--tc-muted);
}

/* Passos de um processo (aba "Assinatura" do contrato). Diferente de .tc-timeline, que
   lista eventos que aconteceram: aqui os passos são FIXOS e os que ainda não aconteceram
   também aparecem, apagados — é isso que mostra o caminho inteiro para quem abre a aba de
   um contrato novo. O estado vem da classe do <li>: --done, --current, --todo, --cancelled. */
.tc-steps {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tc-step {
    position: relative;
    padding: var(--tc-space-2) 0 var(--tc-space-2) var(--tc-space-6);
    /* A linha que liga os passos é a borda esquerda; o último não continua para lugar
       nenhum, então ela para nele (ver :last-child abaixo). */
    border-left: 2px solid var(--tc-border);
}

.tc-step:last-child {
    border-left-color: transparent;
    padding-bottom: 0;
}

.tc-step::before {
    content: "";
    position: absolute;
    left: -6px;
    top: 0.8rem;
    width: 10px;
    height: 10px;
    border-radius: var(--tc-radius-circle);
    background: var(--tc-surface);
    border: 2px solid var(--tc-border-strong);
    box-sizing: border-box;
}

.tc-step__label {
    display: block;
    font-size: var(--tc-text-base);
    color: var(--tc-ink-1);
}

.tc-step__meta {
    display: block;
    font-size: var(--tc-text-xs);
    color: var(--tc-muted);
}

.tc-step--done::before {
    background: var(--bs-success, #198754);
    border-color: var(--bs-success, #198754);
}

/* Passo atual: anel na cor da marca — é onde o contrato está parado e o que a coluna da
   ação está pedindo para resolver. */
.tc-step--current::before {
    background: var(--tc-surface);
    border-color: var(--tc-brand);
    box-shadow: 0 0 0 3px rgba(var(--tc-brand-rgb), 0.18);
}

.tc-step--current .tc-step__label {
    font-weight: 600;
}

.tc-step--todo .tc-step__label {
    color: var(--tc-muted);
}

.tc-step--cancelled::before {
    background: var(--bs-danger, #dc3545);
    border-color: var(--bs-danger, #dc3545);
}

.tc-step--cancelled .tc-step__label {
    color: var(--bs-danger, #dc3545);
}

.tc-profile-row {
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-sm);
    padding: var(--tc-space-3);
    margin-bottom: 0.75rem;
    background: var(--tc-surface-2);
}

/* ---- Alunos: navegação por áreas ---- */
.tc-record-tabs__scroll {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    border-bottom: 1px solid var(--tc-border);
}

.tc-record-tabs__scroll::-webkit-scrollbar {
    display: none;
}

.tc-record-tabs .nav-tabs {
    flex-wrap: nowrap;
    gap: var(--tc-space-0-5);
    min-width: max-content;
    border: 0;
}

.tc-record-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: var(--tc-space-1-5);
    min-height: 2.8rem;
    padding: var(--tc-space-2-5) var(--tc-space-3);
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: var(--tc-radius-sm) var(--tc-radius-sm) 0 0;
    color: var(--tc-ink-2);
    font-size: var(--tc-text-sm);
    font-weight: 650;
    white-space: nowrap;
    transition: color var(--tc-t-fast), background var(--tc-t-fast), border-color var(--tc-t-fast);
}

.tc-record-tabs .nav-link:hover {
    color: var(--tc-ink-1);
    background: var(--tc-hover-bg);
    border-bottom-color: var(--tc-border-strong);
}

.tc-record-tabs .nav-link.active {
    color: var(--tc-brand);
    background: var(--tc-active-bg);
    border-bottom-color: var(--tc-brand);
}

.tc-record-tabs .nav-link.has-errors {
    color: #b42318;
}

[data-bs-theme="dark"] .tc-record-tabs .nav-link.has-errors {
    color: #ff8a7a;
}

.tc-tab-count {
    display: inline-grid;
    place-items: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 var(--tc-space-1);
    border-radius: var(--tc-radius-pill);
    background: var(--tc-surface);
    color: var(--tc-ink-2);
    font-family: var(--tc-font-mono);
    font-size: var(--tc-text-xs);
}

.tc-tab-error {
    color: currentColor;
    font-size: var(--tc-text-xs);
}

.tc-tab-stack {
    display: grid;
    gap: var(--tc-space-5);
    padding-top: var(--tc-space-5);
}

/* Barra de abas em largura total: a linha atravessa a tela e o conteúdo vem abaixo,
   em duas colunas (painel + comentários). Aqui o respiro tem de ficar na PRÓPRIA barra,
   não no painel — senão só a coluna da esquerda desce 1.25rem e os comentários ao lado
   ficam desalinhados com o card vizinho. */
.tc-record-tabs--full {
    margin-bottom: 1.25rem;
}

.tc-record-tabs--full ~ .row .tc-tab-stack {
    padding-top: 0;
}

/* Visualizador embutido do documento do contrato (aba "Documento"). */
.tc-doc-viewer {
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-sm);
    overflow: hidden;
    background: var(--tc-surface-2);
}

.tc-doc-viewer iframe {
    display: block;
    width: 100%;
    height: min(75vh, 40rem);
    border: 0;
}

.tc-sticky-panel {
    position: sticky;
    top: calc(var(--tc-header-h) + 1rem);
}

/* Coluna fixa de comentários (aluno e turma): a lista rola por dentro, deixando
   o cabeçalho e a caixa de escrita sempre à vista mesmo com muitos comentários. */
.tc-comments-card .tc-comments__list {
    max-height: min(42vh, 26rem);
    overflow-y: auto;
    margin-right: -0.35rem;
    padding-right: var(--tc-space-1-5);
    scrollbar-width: thin;
}

/* ---- Modal de troca de turma / alocação ---- */
.tc-modalhead {
    align-items: center;
    gap: var(--tc-space-4);
}

.tc-modalhead__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: var(--tc-radius-sm);
    background: var(--tc-active-bg);
    color: var(--tc-brand);
    font-size: var(--tc-text-xl);
}

.tc-modalhead__text {
    flex: 1 1 auto;
    min-width: 0;
}

.tc-modalhead__sub {
    margin: 0.1rem 0 0;
    font-size: var(--tc-text-sm);
    color: var(--tc-muted);
}

.tc-modalhead__sub .tc-dot {
    margin: 0 0.3rem;
    opacity: 0.6;
}

/* Faixa "de → para": turma atual à esquerda, destino (o próprio select) à direita. */
.tc-transfer {
    display: flex;
    align-items: stretch;
    gap: var(--tc-space-3);
}

.tc-transfer__node {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--tc-space-1-5);
    padding: var(--tc-space-3) var(--tc-space-4);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-sm);
    background: var(--tc-surface-2);
}

.tc-transfer__node--target {
    border-color: rgba(var(--tc-brand-rgb), 0.45);
    background: var(--tc-active-bg);
}

.tc-transfer__label {
    margin: 0;
    font-size: var(--tc-text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tc-muted);
}

.tc-transfer__value {
    font-weight: 700;
    font-size: var(--tc-text-lg);
    overflow-wrap: anywhere;
}

.tc-transfer__value .bi {
    color: var(--tc-brand);
    margin-right: 0.2rem;
}

.tc-transfer__arrow {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: var(--tc-brand);
    font-size: var(--tc-text-lg);
}

/* Os quatro fatos que a troca move: professor, horário, ocupação e modalidade. Mesma ordem
   dos dois lados — é o alinhamento que transforma duas listas em uma comparação. */
.tc-transfer__facts {
    list-style: none;
    margin: 0.15rem 0 0;
    padding: 0;
    display: grid;
    gap: var(--tc-space-1);
    font-size: var(--tc-text-sm);
    color: var(--tc-ink-2);
}

.tc-transfer__facts li {
    display: flex;
    align-items: baseline;
    gap: var(--tc-space-1-5);
    min-width: 0;
}

/* Largura fixa para os ícones: sem isso, cada linha começa num ponto diferente e os dois
   lados deixam de se alinhar horizontalmente — que é o único motivo de existirem lado a lado. */
.tc-transfer__facts .bi {
    flex: 0 0 1rem;
    color: var(--tc-muted);
}

/* O que muda a decisão: turma cheia exige exceção autorizada; modalidade diferente da
   vendida é divergência com o contrato. Nenhum dos dois bloqueia — ambos avisam. */
.tc-transfer__warn {
    display: flex;
    align-items: baseline;
    gap: var(--tc-space-1-5);
    margin: 0.5rem 0 0;
    font-size: var(--tc-text-sm);
    color: var(--tc-warn-text);
}

/* Troca de turma: contexto atual e seletor pesquisável na mesma tela. */
.tc-allocation-step + .tc-allocation-step {
    padding-top: var(--tc-space-5);
    border-top: 1px solid var(--tc-border);
}

.tc-allocation-summary {
    padding: var(--tc-space-3) var(--tc-space-4);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-sm);
    background: var(--tc-surface-2);
}

.tc-allocation-options {
    display: grid;
    gap: var(--tc-space-2);
    max-height: min(48vh, 30rem);
    overflow-y: auto;
    padding: var(--tc-space-1);
}

.tc-allocation-option {
    display: flex;
    align-items: flex-start;
    gap: var(--tc-space-3);
    padding: var(--tc-space-3);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-sm);
    background: var(--tc-surface);
    cursor: pointer;
}

.tc-allocation-option:hover,
.tc-allocation-option.is-selected {
    border-color: var(--tc-brand);
    background: var(--tc-active-bg);
    box-shadow: var(--tc-shadow-sm);
}

.tc-allocation-option:has(input:focus-visible) {
    outline: 2px solid var(--tc-brand);
    outline-offset: 1px;
}

.tc-allocation-option.is-hidden {
    display: none;
}

.tc-allocation-option.is-disabled {
    cursor: not-allowed;
    opacity: 0.72;
}

.tc-allocation-option > input {
    flex: 0 0 auto;
    margin-top: 0.25rem;
    accent-color: var(--tc-brand);
}

.tc-allocation-option__body {
    display: grid;
    gap: var(--tc-space-2);
    min-width: 0;
    width: 100%;
}

.tc-allocation-option__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tc-space-2);
}

.tc-allocation-option__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--tc-space-1) var(--tc-space-4);
    color: var(--tc-ink-2);
    font-size: var(--tc-text-sm);
}

.tc-allocation-option__facts span {
    display: flex;
    align-items: baseline;
    gap: var(--tc-space-1-5);
    min-width: 0;
}

.tc-allocation-option__facts .bi {
    flex: 0 0 1rem;
    color: var(--tc-muted);
}

.tc-allocation-option__warning {
    color: var(--tc-warn-text);
    font-size: var(--tc-text-sm);
}

@media (max-width: 575.98px) {
    .tc-transfer {
        flex-direction: column;
    }

    .tc-transfer__arrow {
        transform: rotate(90deg);
    }

    .tc-allocation-option__facts {
        grid-template-columns: 1fr;
    }
}

/* ---- Alunos: diário de eventos unificado ---- */
.tc-history {
    display: grid;
    gap: var(--tc-space-6);
}

.tc-history__date {
    display: flex;
    align-items: center;
    gap: var(--tc-space-3);
    margin: 0 0 0.55rem;
    color: var(--tc-ink-2);
    font-family: var(--tc-font-mono);
    font-size: var(--tc-text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tc-history__date::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--tc-border);
}

.tc-history .tc-timeline__item {
    min-height: 3.1rem;
    padding: var(--tc-space-2) 0 var(--tc-space-4) var(--tc-space-12);
    border-left: 1px solid var(--tc-border);
    margin-left: 0.9rem;
}

.tc-history .tc-timeline__item:last-child {
    padding-bottom: var(--tc-space-1);
    border-left-color: transparent;
}

.tc-history .tc-timeline__item::before {
    display: none;
}

.tc-history__icon {
    position: absolute;
    top: 0.3rem;
    left: -0.9rem;
    display: grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    border: 1px solid rgba(var(--tc-brand-rgb), 0.28);
    border-radius: var(--tc-radius-circle);
    background: var(--tc-surface);
    color: var(--tc-brand);
    box-shadow: 0 0 0 4px var(--tc-surface);
    font-size: var(--tc-text-sm);
}

.tc-history .tc-timeline__event {
    font-size: var(--tc-text-base);
    font-weight: 700;
    letter-spacing: -0.005em;
}

.tc-history__changes {
    display: grid;
    gap: var(--tc-space-1-5);
    margin: 0.65rem 0 0;
    padding: var(--tc-space-2-5) var(--tc-space-3);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-sm);
    background: var(--tc-surface-2);
}

/* Histórico de valores: a página mantém a mesma linguagem da tela editável e a série
   de uma linha entra pela lateral, sem empurrar nem duplicar as tabelas principais. */
.tc-history-rowlink {
    display: inline-flex;
    align-items: center;
    gap: var(--tc-space-2);
    font-weight: 650;
}

.tc-history-rowlink .bi {
    color: var(--tc-muted);
    font-size: var(--tc-text-xs);
    transition: transform var(--tc-t-fast), color var(--tc-t-fast);
}

.tc-history-rowlink:hover .bi {
    color: var(--tc-brand);
    transform: translateX(var(--tc-space-0-5));
}

.tc-history-drawer__backdrop {
    position: fixed;
    inset: 0;
    z-index: calc(var(--tc-z-overlay) - 1);
    background: rgba(10, 12, 18, 0.48);
    backdrop-filter: blur(2px);
    animation: tc-fade-in var(--tc-t) both;
}

.tc-history-drawer {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: var(--tc-z-overlay);
    display: flex;
    flex-direction: column;
    width: min(40rem, 100vw);
    height: 100dvh;
    border-left: 1px solid var(--tc-border-strong);
    background: var(--tc-surface);
    box-shadow: var(--tc-shadow-lg);
    animation: tc-drawer-in var(--tc-t) both;
}

.tc-history-drawer__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--tc-space-4);
    padding: var(--tc-space-5) var(--tc-space-6);
    border-bottom: 1px solid var(--tc-border);
    background: var(--tc-surface-2);
}

.tc-history-drawer__title {
    margin: var(--tc-space-1) 0 0;
    color: var(--tc-ink-1);
    font-size: var(--tc-text-xl);
    font-weight: 750;
}

.tc-history-drawer__body {
    display: grid;
    gap: var(--tc-space-3);
    overflow-y: auto;
    padding: var(--tc-space-5) var(--tc-space-6) var(--tc-space-8);
}

.tc-history-period {
    padding: var(--tc-space-4);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-sm);
    background: var(--tc-surface-2);
}

.tc-history-period__title {
    margin: 0 0 var(--tc-space-3);
    color: var(--tc-muted);
    font-size: var(--tc-text-sm);
    font-weight: 650;
}

.tc-history-period__value {
    color: var(--tc-ink-1);
    font-size: var(--tc-text-xl);
}

.tc-history-period__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--tc-space-4);
    margin: 0;
}

.tc-history-period__grid div {
    min-width: 0;
}

.tc-history-period__grid dt {
    margin-bottom: var(--tc-space-1);
    color: var(--tc-muted);
    font-size: var(--tc-text-xs);
    font-weight: 600;
}

.tc-history-period__grid dd {
    margin: 0;
    color: var(--tc-ink-1);
    font-size: var(--tc-text-base);
    font-weight: 650;
}

.tc-history-period__grid .tc-history-period__wide {
    grid-column: 1 / -1;
}

@keyframes tc-drawer-in {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

@keyframes tc-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (max-width: 575.98px) {
    .tc-history-drawer {
        width: 100%;
        border-left: 0;
    }

    .tc-history-drawer__head,
    .tc-history-drawer__body {
        padding-right: var(--tc-space-4);
        padding-left: var(--tc-space-4);
    }
}

.tc-history__change {
    display: grid;
    grid-template-columns: minmax(7.5rem, 0.35fr) 1fr;
    gap: var(--tc-space-3);
    align-items: baseline;
    font-size: var(--tc-text-xs);
}

.tc-history__change dt {
    color: var(--tc-muted);
    font-weight: 600;
}

.tc-history__change dd {
    min-width: 0;
    margin: 0;
    color: var(--tc-ink-1);
    overflow-wrap: anywhere;
}

.tc-history__old {
    color: var(--tc-muted);
    text-decoration: line-through;
    text-decoration-color: rgba(var(--tc-brand-rgb), 0.45);
}

.tc-history__arrow {
    margin: 0 0.35rem;
    color: var(--tc-muted);
    font-size: var(--tc-text-xs);
}

.tc-history__new {
    font-weight: 650;
}

@media (max-width: 991.98px) {
    .tc-sticky-panel {
        position: static;
    }
}

@media (max-width: 575.98px) {
    .tc-record-tabs .nav-link {
        padding-inline: var(--tc-space-3);
    }

    .tc-history__change {
        grid-template-columns: 1fr;
        gap: var(--tc-space-0-5);
    }
}

/* Texto longo digitado pelo usuário (parecer, observações): preserva quebras de linha. */
.tc-prewrap {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* ── Barra de contexto do aluno ──────────────────────────────────────────────
   Navegação cruzada aluno → contrato → matrícula → turma → nivelamento →
   onboarding. Mesma barra em todas essas telas. */
.tc-context {
    margin-bottom: 1.25rem;
    padding: var(--tc-space-2);
    background: var(--tc-surface);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius);
    box-shadow: var(--tc-shadow-sm);
}

.tc-context__items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: var(--tc-space-1-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.tc-context__item {
    display: flex;
    flex-direction: column;
    gap: var(--tc-space-0-5);
    height: 100%;
    padding: var(--tc-space-1-5) var(--tc-space-2-5);
    border: 1px solid transparent;
    border-radius: var(--tc-radius-sm);
    color: var(--tc-ink-1);
    text-decoration: none;
    transition: background var(--tc-t-fast), border-color var(--tc-t-fast);
}

a.tc-context__item:hover {
    background: var(--tc-hover-bg);
    border-color: var(--tc-border-strong);
}

.tc-context__item.is-current {
    background: var(--tc-active-bg);
    border-color: rgba(var(--tc-brand-rgb), 0.35);
}

.tc-context__item.is-empty {
    color: var(--tc-muted);
}

.tc-context__label {
    font-size: var(--tc-text-xs);
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tc-muted);
}

.tc-context__value {
    font-size: var(--tc-text-base);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tc-context__item:hover .tc-context__value,
.tc-context__item:focus-visible .tc-context__value {
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
}

.tc-context__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--tc-space-1);
    font-size: var(--tc-text-xs);
    min-width: 0;
}

/* A pill ganhou `nowrap` (senão "Aguardando assinatura" quebrava em duas linhas e deformava a
   altura das linhas da tabela). Aqui as colunas são estreitas por natureza, então o que não
   couber é cortado com reticências em vez de invadir a coluna vizinha. */
.tc-context__meta .tc-pill {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

.tc-context__meta .tc-pill::before {
    display: none;
}

.tc-context__dates {
    color: var(--tc-muted);
    font-size: var(--tc-text-xs);
}

/* ---- Cards de matrícula (aba "Matrículas" da ficha do aluno) ----
   Cada card é um ciclo (1 aluno × 1 idioma × 1 período). As células reaproveitam a mesma
   linguagem visual da barra de contexto (rótulo minúsculo + valor + meta) porque são a
   mesma ideia — atalhos para as telas fundas do ciclo. */
.tc-mcards {
    display: flex;
    flex-direction: column;
    gap: var(--tc-space-4);
}

.tc-mcard {
    background: var(--tc-surface);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius);
    box-shadow: var(--tc-shadow-sm);
    padding: var(--tc-space-4) var(--tc-space-4);
}

.tc-mcard__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--tc-space-2);
    margin-bottom: 0.9rem;
}

.tc-mcard__title {
    font-size: var(--tc-text-lg);
    font-weight: 700;
    color: var(--tc-ink-1);
}

.tc-mcard__title a {
    color: inherit;
    text-decoration: none;
}

.tc-mcard__title a:hover {
    text-decoration: underline;
}

.tc-mcard__title .bi {
    font-size: var(--tc-text-relative-sm);
    color: var(--tc-muted);
}

.tc-mcard__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--tc-space-2);
}

.tc-mcard__date {
    font-size: var(--tc-text-xs);
    color: var(--tc-muted);
}

.tc-mcard__cells {
    /* Colunas FIXAS (não auto-fit): com contagem variável de células por card (depende de
       permissão e do que existe naquele ciclo), auto-fit dava larguras diferentes de card
       para card — o grid parecia "pular" ao rolar a lista. Toda célula (inclusive as
       .is-empty) sempre ocupa um lugar, então a grade fica igual em todos os cards. */
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--tc-space-2);
}

@media (max-width: 1199.98px) {
    .tc-mcard__cells { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* "Contratos sem matrícula": lista de contagem variável (não é o ciclo fixo de 5
   células) — dividir pelas mesmas 5 colunas espremia cada contrato e o rótulo do
   status ("Aguardando assinatura", nowrap) vazava da célula. Aqui a largura vem do
   conteúdo, não da contagem de itens do card. */
.tc-mcard__cells--flow {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

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

@media (max-width: 480px) {
    .tc-mcard__cells { grid-template-columns: 1fr; }
}

.tc-mcell {
    display: flex;
    flex-direction: column;
    /* Sem isto a célula não encolhe abaixo do conteúdo dela dentro do grid, e qualquer coisa
       que não quebre — a pill de status, por exemplo — vaza para fora da caixa. */
    min-width: 0;
    gap: var(--tc-space-0-5);
    padding: var(--tc-space-2) var(--tc-space-3);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-sm);
    background: var(--tc-surface-2);
    color: var(--tc-ink-1);
    text-decoration: none;
    transition: background var(--tc-t-fast), border-color var(--tc-t-fast);
}

a.tc-mcell:hover {
    background: var(--tc-hover-bg);
    border-color: rgba(var(--tc-brand-rgb), 0.35);
}

.tc-mcell.is-empty {
    color: var(--tc-muted);
    border-style: dashed;
    background: transparent;
}

.tc-mcell__label {
    font-size: var(--tc-text-xs);
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tc-muted);
}

.tc-mcell__value {
    font-size: var(--tc-text-base);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tc-mcell__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    min-width: 0;
    gap: var(--tc-space-1);
    font-size: var(--tc-text-xs);
}

/* A pill da tabela não quebra de propósito — quebrar deformava a altura da linha. Aqui é
   outra coisa: a célula tem 1/5 da largura do card, e rótulo longo ("Aguardando agendamento",
   o maior do catálogo de nivelamento) escapava da caixinha (Rafael, 14/08). Nesta posição,
   quebrar em duas linhas é melhor que vazar. */
.tc-mcell__meta .tc-pill {
    max-width: 100%;
    white-space: normal;
    text-align: center;
}

.tc-mcell__dates {
    color: var(--tc-muted);
    font-size: var(--tc-text-xs);
}

.tc-mcard__foot {
    margin-top: 0.9rem;
    padding-top: var(--tc-space-3);
    border-top: 1px solid var(--tc-border);
}

/* ---- Página pública do link de venda (aluno sem login) ---- */
/* Sem menu, sem topbar: uma coluna centrada, larga o bastante para o formulário
   de 12 campos que não caberia no painel estreito do layout de login. */
.tc-public {
    background: var(--tc-bg, var(--bs-body-bg));
    min-height: 100vh;
}

.tc-public__wrap {
    width: 100%;
    max-width: 56rem;
    margin: 0 auto;
    padding: var(--tc-space-6) var(--tc-space-4) var(--tc-space-12);
    display: flex;
    flex-direction: column;
    gap: var(--tc-space-6);
    min-height: 100vh;
}

.tc-public__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tc-space-4);
}

.tc-public__logo { height: 2.25rem; width: auto; }

/* Cartão central com um traço de marca no topo — sem isso é um .card do Bootstrap
   igual a qualquer outro, e esta é a única superfície que o aluno sem conta vê. */
.tc-public__card {
    position: relative;
    overflow: hidden;
    box-shadow: var(--tc-shadow-lg);
}

.tc-public__card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--tc-brand), var(--tc-brand-2));
}

/* Empurra o rodapé para baixo quando o conteúdo é curto (telas de "recebemos"). */
.tc-public__wrap > main { flex: 1 1 auto; }

.tc-public__foot {
    text-align: center;
    font-size: var(--tc-text-sm);
    color: var(--bs-secondary-color);
}

@media (max-width: 575.98px) {
    .tc-public__wrap { padding: var(--tc-space-4) var(--tc-space-3) var(--tc-space-8); }
    .tc-public__logo { height: 1.75rem; }
}

/* ---- Seletor em cartões (escolha entre caminhos, não entre valores) ---- */
/* Usado quando as opções mudam o QUE acontece depois, e não apenas um valor do
   formulário — aí o rótulo curto do tc-segmented não basta e cabe uma explicação.
   Mesmo padrão sem JS do tc-segmented: input.btn-check + label irmão. */
.tc-party-flow {
    padding-bottom: var(--tc-space-10);
}

.tc-party-stage {
    animation: tc-in 0.2s ease both;
}

.tc-party-stage + .tc-party-stage {
    margin-top: var(--tc-space-5);
    padding-top: var(--tc-space-6);
    border-top: 1px solid var(--tc-border);
}

.tc-party-stage__head {
    display: flex;
    align-items: flex-start;
    gap: var(--tc-space-3);
    margin-bottom: var(--tc-space-4);
}

.tc-party-stage__num {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: var(--tc-space-7);
    height: var(--tc-space-7);
    border-radius: var(--tc-radius-circle);
    background: var(--tc-active-bg);
    color: var(--tc-brand-dark);
    font-size: var(--tc-text-xs);
    font-weight: 800;
}

[data-bs-theme="dark"] .tc-party-stage__num {
    color: var(--tc-brand-2);
}

.tc-party-stage__title {
    margin: 0;
    color: var(--tc-ink-1);
    font-size: var(--tc-text-base);
    font-weight: 750;
}

.tc-party-stage__hint {
    margin: var(--tc-space-0-5) 0 0;
    color: var(--tc-muted);
    font-size: var(--tc-text-sm);
}

.tc-choice {
    display: flex;
    gap: var(--tc-space-3);
    align-items: flex-start;
    height: 100%;
    padding: var(--tc-space-3) var(--tc-space-4);
    border: 1px solid var(--tc-border-strong);
    border-radius: var(--tc-radius-sm);
    background: var(--tc-surface-2);
    cursor: pointer;
    transition: border-color var(--tc-t-fast), background var(--tc-t-fast), box-shadow var(--tc-t-fast);
}

.tc-choice:hover { border-color: var(--tc-brand); }

.tc-choice__icon {
    flex: 0 0 auto;
    font-size: var(--tc-text-lg);
    line-height: 1.2;
    color: var(--tc-muted);
}

.tc-choice__title {
    display: block;
    font-weight: 700;
    font-size: var(--tc-text-base);
    color: var(--tc-text);
}

.tc-choice__text {
    display: block;
    margin-top: .15rem;
    font-size: var(--tc-text-sm);
    line-height: 1.35;
    color: var(--tc-muted);
}

.btn-check:checked + .tc-choice {
    border-color: var(--tc-brand);
    background: var(--tc-surface);
    box-shadow: var(--tc-shadow-sm);
}

.btn-check:checked + .tc-choice .tc-choice__icon,
.btn-check:checked + .tc-choice .tc-choice__title { color: var(--tc-brand); }

.btn-check:focus-visible + .tc-choice {
    outline: 2px solid var(--tc-brand);
    outline-offset: 1px;
}

/* ---------------------------------------------------------------------------
   tc-wizard: navegação em etapas do formulário
   Diferente de .tc-steps, que é a linha do tempo da assinatura e narra o que já
   aconteceu com o contrato. Aqui cada passo é um botão: o vendedor pula para a
   etapa que quiser, inclusive com pendência — avançar nunca é bloqueado.
   O "feito" e o "pendente" usam ícone no markup, não codepoint em content:,
   que é o padrão do resto do arquivo.
   --------------------------------------------------------------------------- */

.tc-wizard {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--tc-space-2);
    padding: var(--tc-space-2);
    margin-bottom: 1.25rem;
    background: var(--tc-surface-2);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius);
    overflow-x: auto;
}

.tc-wizard__step {
    display: flex;
    align-items: center;
    gap: var(--tc-space-2);
    flex: 1 1 auto;
    min-width: max-content;
    padding: var(--tc-space-2) var(--tc-space-3-5);
    border: 1px solid transparent;
    border-radius: var(--tc-radius-sm);
    background: transparent;
    color: var(--tc-muted);
    font-size: var(--tc-text-base);
    text-align: left;
    cursor: pointer;
    transition: background var(--tc-t-fast), color var(--tc-t-fast), border-color var(--tc-t-fast);
}

.tc-wizard__step:hover { border-color: var(--tc-brand); }

.tc-wizard__step:focus-visible {
    outline: 2px solid var(--tc-brand);
    outline-offset: 2px;
}

.tc-wizard__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 auto;
    border-radius: var(--tc-radius-circle);
    background: rgba(var(--tc-brand-rgb), .12);
    color: var(--tc-muted);
    font-size: var(--tc-text-xs);
    font-variant-numeric: tabular-nums;
}

.tc-wizard__step--current {
    background: rgba(var(--tc-brand-rgb), .1);
    border-color: var(--tc-brand);
    color: var(--tc-ink-1);
    font-weight: 600;
}

.tc-wizard__step--current .tc-wizard__num {
    background: var(--tc-brand-ink);
    color: #fff;
}

.tc-wizard__step--done { color: var(--tc-ink-1); }

.tc-wizard__step--done .tc-wizard__num {
    background: rgba(var(--tc-brand-rgb), .16);
    color: var(--tc-brand);
}

/* Pendência não impede nada: só marca onde falta dado para gerar o contrato. */
.tc-wizard__step--pending .tc-wizard__num {
    background: rgba(var(--tc-brand-2-rgb), .3);
    color: var(--tc-ink-1);
}

.tc-wizard__panel[hidden] { display: none; }

/* Revisão final do contrato: projeção somente leitura das etapas anteriores. */
.tc-contract-review {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--tc-space-3);
    margin-bottom: var(--tc-space-4);
}

.tc-contract-review__section {
    min-width: 0;
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-sm);
    background: var(--tc-surface-2);
    overflow: hidden;
}

.tc-contract-review__section[data-review-section="groups"],
.tc-contract-review__section[data-review-section="terms"] {
    grid-column: 1 / -1;
}

.tc-contract-review__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tc-space-3);
    min-height: 2.75rem;
    padding: var(--tc-space-2) var(--tc-space-3);
    border-bottom: 1px solid var(--tc-border);
    background: var(--tc-surface);
}

.tc-contract-review__title {
    display: flex;
    align-items: center;
    gap: var(--tc-space-2);
    margin: 0;
    color: var(--tc-ink-1);
    font-size: var(--tc-text-base);
    font-weight: 750;
}

.tc-contract-review__title i { color: var(--tc-brand-dark); }

.tc-contract-review__edit {
    flex: 0 0 auto;
    padding: var(--tc-space-1) var(--tc-space-2);
    font-size: var(--tc-text-sm);
    text-decoration: none;
}

.tc-contract-review__body { padding: var(--tc-space-3); }

.tc-contract-review__empty {
    margin: 0;
    color: var(--tc-muted);
    font-size: var(--tc-text-sm);
    font-style: italic;
}

.tc-contract-review__list {
    display: grid;
    grid-template-columns: minmax(8rem, .7fr) minmax(0, 1.3fr);
    gap: 0 var(--tc-space-3);
    margin: 0;
}

.tc-contract-review__list dt,
.tc-contract-review__list dd {
    min-width: 0;
    margin: 0;
    padding: var(--tc-space-1-5) 0;
    border-bottom: 1px solid var(--tc-border);
    overflow-wrap: anywhere;
}

.tc-contract-review__list dt {
    color: var(--tc-muted);
    font-size: var(--tc-text-sm);
    font-weight: 650;
}

.tc-contract-review__list dd {
    color: var(--tc-ink-1);
    font-size: var(--tc-text-sm);
    font-weight: 600;
}

.tc-contract-review__list dd.is-empty {
    color: var(--tc-muted);
    font-style: italic;
    font-weight: 400;
}

.tc-contract-review__group {
    margin-top: var(--tc-space-3);
    padding: var(--tc-space-3);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-xs);
    background: var(--tc-surface);
}

.tc-contract-review__group-title {
    margin: 0 0 var(--tc-space-2);
    color: var(--tc-ink-1);
    font-size: var(--tc-text-sm);
    font-weight: 750;
}

@media (max-width: 767.98px) {
    .tc-contract-review { grid-template-columns: minmax(0, 1fr); }

    .tc-contract-review__section[data-review-section="groups"],
    .tc-contract-review__section[data-review-section="terms"] {
        grid-column: auto;
    }
}

@media (max-width: 575.98px) {
    .tc-contract-review__list { display: block; }

    .tc-contract-review__list dt {
        padding-bottom: 0;
        border-bottom: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tc-wizard__step { transition: none; }
}

/* ---------------------------------------------------------------------------
   Editor do documento do contrato
   É um contenteditable, não uma textarea: o vendedor edita o contrato já
   formatado. Por isso a área imita a página do PDF (Helvetica, uma coluna,
   uma linha do texto = um bloco aqui) em vez de parecer campo de formulário.
   A fidelidade não é milimétrica — o navegador quebra linha por conta própria
   —, então "Ver PDF" segue sendo a conferência final.
   --------------------------------------------------------------------------- */

.tc-doc__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tc-space-2);
    margin-bottom: .75rem;
}

.tc-doc__editor {
    min-height: 60vh;
    max-height: 75vh;
    overflow-y: auto;
    padding: var(--tc-space-10) var(--tc-space-12);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius);
    background: var(--tc-surface);
    font-family: Helvetica, Arial, sans-serif;
    font-size: var(--tc-text-base);
    line-height: 1.5;
    color: var(--tc-text);
}

.tc-doc__editor:focus {
    outline: none;
    border-color: var(--tc-brand);
    box-shadow: 0 0 0 .2rem rgba(var(--tc-brand-rgb), .15);
}

/* Margem zero de propósito: no PDF o espaço entre parágrafos vem de LINHA EM
   BRANCO, e cada linha em branco é um parágrafo vazio aqui. Se o CSS
   acrescentasse margem, a tela mostraria um espaçamento que o PDF não tem. */
.tc-doc__editor p,
.tc-doc__editor h1,
.tc-doc__editor h2,
.tc-doc__editor h3,
.tc-doc__editor h4,
.tc-doc__editor ul,
.tc-doc__editor ol {
    margin: 0;
}

.tc-doc__editor h1,
.tc-doc__editor h2,
.tc-doc__editor h3,
.tc-doc__editor h4 {
    font-weight: 700;
    text-align: center;
}
.tc-doc__editor h1 { font-size: 1.3rem; }
.tc-doc__editor h2 { font-size: 1.15rem; }
.tc-doc__editor h3 { font-size: 1.02rem; }
.tc-doc__editor h4 { font-size: .94rem; }

.tc-doc__editor .tc-doc__strong { font-weight: 700; }
.tc-doc__editor .tc-doc__center { text-align: center; }
.tc-doc__editor .tc-doc__right { text-align: right; }
.tc-doc__editor .tc-doc__justify { text-align: justify; }

.tc-doc__editor ul,
.tc-doc__editor ol {
    padding-left: var(--tc-space-6);
}
.tc-doc__editor .tc-doc__list-level-1 { margin-left: 1.5rem; }
.tc-doc__editor .tc-doc__list-level-2 { margin-left: 3rem; }
.tc-doc__editor .tc-doc__list-level-3 { margin-left: 4.5rem; }
.tc-doc__editor .tc-doc__list-level-4,
.tc-doc__editor .tc-doc__list-level-5,
.tc-doc__editor .tc-doc__list-level-6 { margin-left: 6rem; }

.tc-doc__editor u { text-underline-offset: .15em; }

.tc-level-drag { cursor: grab; }
.tc-level-drag:active { cursor: grabbing; }
.tc-level-row { transition: opacity .12s ease, transform .12s ease; }
.tc-level-row--dragging { opacity: .45; }

/* Parágrafo vazio = a linha em branco do documento. Um pouco mais baixo que uma
   linha de texto, como o espaço menor que o PDF dá ao branco. */
.tc-doc__editor p:has(> br:only-child) {
    height: .7em;
}