/* * Design tokens e layout do SGA - mesmo espírito do local_dashboard * (Moodle): tudo namespaced (.sga-*), tokens de cor em custom properties * (aqui emitidos no por Branding::cssVariables(), não em :root * fixo neste arquivo), nada de framework CSS externo. Ver * app/Models/Branding.php e resources/views/layouts/app.blade.php. * * Sem build step (Vite) de propósito nesta primeira tela - arquivo * estático servido direto de public/, como o plugin Moodle já fazia com * styles/dashboard.css. Um bundler entra quando o app tiver views * suficientes para justificar. */ :root { /* Defaults de segurança caso Branding::cssVariables() não rode por algum motivo (ex.: erro de conexão com o banco antes do login) - nunca uma tela sem estilo nenhum. */ --sga-primary: #7A1F2B; --sga-nav-bg-start: #5C1620; --sga-nav-bg-end: #3B0E15; --sga-logo-bg-start: #7A1F2B; --sga-logo-bg-end: #4A1219; --sga-nav-link-color: #D8B7BC; --sga-nav-accent: #C9A227; --sga-primary-dark: color-mix(in srgb, var(--sga-primary) 72%, black); --sga-primary-light: color-mix(in srgb, var(--sga-primary) 68%, white); --sga-ink: #23272B; --sga-ink-muted: #6B7280; --sga-border: #E5E7EB; --sga-bg: #F7F5F4; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--sga-ink); background: var(--sga-bg); } /* ---------- Tela de login (split-screen, mockup docx 5.1) ---------- */ .sga-login { display: flex; min-height: 100vh; } /* Pedido do usuário (2026-09-19): "inverter as cores do login" = trocar os lados (painel de marca <-> formulário), configurável em Aparência (Branding.login_flip_sides). */ .sga-login--flipped { flex-direction: row-reverse; } /* Pedido do usuário (2026-09-19): diferente do flip acima - aqui a posição de cada bloco fica igual, só as cores de fundo trocam de lado (útil pra logo que "fica melhor com fundo branco"; nesse caso a instituição troca a imagem de login pra uma versão colorida/escura, já que o painel dela deixa de ser escuro). O card do formulário (`.sga-login__card`) tem fundo branco próprio, sempre legível, então inverter o painel de trás nunca quebra o formulário em si. */ .sga-login--inverted .sga-login__brand { background: var(--sga-bg); color: var(--sga-login-text, var(--sga-ink)); } .sga-login--inverted .sga-login__brand-logo { border-top-color: color-mix(in srgb, var(--sga-ink) 25%, transparent); border-bottom-color: color-mix(in srgb, var(--sga-ink) 25%, transparent); } .sga-login--inverted .sga-login__panel { background: linear-gradient(160deg, var(--sga-logo-bg-start), var(--sga-logo-bg-end)); } .sga-login__brand { flex: 1 1 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, var(--sga-logo-bg-start), var(--sga-logo-bg-end)); color: var(--sga-login-text, #fff); padding: 3rem; } .sga-login__brand-inner { text-align: center; /* Ajustado junto com o teto da logo (440px = 27.5rem) - achado em produção (2026-09-19): com 22rem (352px) aqui, o max-width:100% da imagem cortava o novo teto antes dele valer a pena. */ max-width: 30rem; } .sga-login__brand-logo { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 1.25rem 0; border-top: 1px solid rgba(255, 255, 255, .35); border-bottom: 1px solid rgba(255, 255, 255, .35); font-size: 1.05rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; } .sga-login__brand-logo img, .sga-login__brand-image { /* Responsivo à largura da tela em vez de um px fixo - achado em produção (2026-09-19): um valor fixo fica minúsculo num monitor grande e continuaria estourando em telas pequenas se fosse fixado grande demais. clamp() entre um piso e um teto, escalando com a viewport entre os dois. Ajustado de novo no mesmo dia: os limites originais (140-320px, 18vw) foram calibrados olhando uma logo QUADRADA (só o símbolo) - com uma logo mais larga (símbolo + nome por extenso), o mesmo limite de largura vira uma imagem baixa e visualmente pequena (testado em 1920x1080, 1366x768 e mobile). Teto maior (440px) e vw mais generoso (26vw) escalam melhor pra proporção larga sem recalcular tudo se a logo mudar nesse formato de novo. */ width: clamp(160px, 26vw, 440px); max-width: 100%; height: auto; } @media (max-width: 860px) { .sga-login__brand { display: none; } } .sga-login__panel { flex: 1 1 50%; display: flex; align-items: center; justify-content: center; background: var(--sga-bg); padding: 2rem; } .sga-login__card { width: 100%; max-width: 25rem; /* Card flutuante com fundo branco próprio - achado ao implementar a inversão de cores de fundo acima: sem isto, o painel do formulário inteiro herdava o fundo do painel (`.sga-login__panel`), e um título/label escuro ficava ilegível quando esse painel virava escuro. Com o card sempre branco, o formulário nunca depende da cor do painel atrás dele. */ background: #fff; padding: 2.5rem; border-radius: 1rem; box-shadow: 0 20px 50px rgba(0, 0, 0, .12); } .sga-login__title { margin: 0 0 .25rem; font-size: 1.6rem; font-weight: 700; color: var(--sga-login-form-text, var(--sga-ink)); } /* Pedido do usuário (2026-09-19): cor do texto do card do formulário configurável (Branding.login_form_text_color) - `.sga-field label` é usado no app inteiro, por isso escopado só a `.sga-login` aqui, nunca vaza pras telas internas do sistema. */ .sga-login .sga-field label { color: var(--sga-login-form-text, var(--sga-ink)); } .sga-login__subtitle { margin: 0 0 1.75rem; color: var(--sga-ink-muted); font-size: .95rem; } .sga-field { margin-bottom: 1.1rem; } .sga-field label { display: block; margin-bottom: .35rem; font-size: .85rem; font-weight: 600; color: var(--sga-ink); } /* Pedido do usuário (2026-09-17): "deixar o estilo dos selects igual aos demais campos" - `.sga-select` é o mesmo visual de `.sga-field select` pra um a ponto de só sobrar "A"/"Fi"/"G" visível) e trocou de lugar com Instituição (Perfis primeiro). Achado do pedido seguinte ("diminuir a largura do select"/"tabela cortada"): a coluna de Ações é quem realmente precisava de mais espaço - `white-space: nowrap` nela não deixa os 4 ícones quebrarem linha, então uma coluna estreita demais "vazava" pra fora da tabela inteira (o scrollWidth da tabela crescia além do clientWidth mesmo com table-layout:fixed). */ .sga-table--users th:nth-child(3), .sga-table--users td:nth-child(3) { width: 18%; } .sga-table--users th:nth-child(4), .sga-table--users td:nth-child(4) { width: 16%; } .sga-table--users th:nth-child(5), .sga-table--users td:nth-child(5) { width: 10%; } .sga-table--users th:nth-child(6), .sga-table--users td:nth-child(6) { width: 18%; } /* Pedido do usuário (2026-09-17): achado testando o truncamento do e-mail - `.sga-table--rich .sga-table__title-cell { min-width: 14rem }` (mesma especificidade, declarada DEPOIS no arquivo) vencia este `min-width: 0` no empate de especificidade, empurrando o nome pra fora da própria célula e por cima da coluna de e-mail. Selector composto (`--rich--users` juntos, sem espaço) sobe a especificidade de propósito, pra nunca mais depender da ordem das regras no arquivo. */ .sga-table--rich.sga-table--users .sga-table__title-cell { gap: .55rem !important; min-width: 0; } .sga-table--users .sga-table__avatar { width: 1.65rem; height: 1.65rem; margin-right: 0; font-size: .62rem; } .sga-table--users td:nth-child(1) { overflow-wrap: anywhere; } /* Pedido do usuário (2026-09-17): e-mail quebrando no meio da palavra em resoluções menores ("admin@santacasacuriti" / "ba.edu.br") ficava difícil de ler - em vez de quebrar, trunca com "..." numa linha só (o `title` no , ver users/index.blade.php, mostra o e-mail inteiro ao passar o mouse). */ .sga-table--users td:nth-child(2) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .sga-table--users .sga-table__actions { min-width: 0; padding-right: 0; } .sga-table--users .sga-table__actions form, .sga-table--users .sga-table__actions > a { margin-left: .16rem; } .sga-table--users .sga-table__actions a:has(svg:only-child), .sga-table--users .sga-table__actions .sga-link-btn:has(svg:only-child) { width: 1.75rem; height: 1.75rem; padding: .34rem; } .sga-table--users .sga-table__actions svg { width: .9rem; height: .9rem; } .sga-role-badges { display: flex; flex-wrap: wrap; gap: .35rem; } .sga-role-badge { display: inline-flex; align-items: center; min-height: 1.55rem; padding: .24rem .58rem; border-radius: 999px; font-size: .72rem; font-weight: 800; line-height: 1.1; white-space: nowrap; } .sga-role-badge--admin { background: #FEE2E2; color: #991B1B; } .sga-role-badge--secretaria { background: #DBEAFE; color: #1D4ED8; } .sga-role-badge--financeiro { background: #FEF3C7; color: #92400E; } .sga-role-badge--aluno { background: #DCFCE7; color: #166534; } .sga-role-badge--academico { background: #E0F2FE; color: #0369A1; } .sga-role-badge--auditoria { background: #EDE9FE; color: #6D28D9; } .sga-role-badge--default { background: #F3F4F6; color: #4B5563; } .sga-role-select-form { display: flex; align-items: center; margin: 0; } .sga-role-select { width: 100%; min-width: 0; max-width: 12rem; min-height: 1.86rem; padding: .28rem 1.58rem .28rem .62rem; border: 1px solid color-mix(in srgb, var(--sga-primary) 18%, var(--sga-border)); border-radius: 999px; background: #fff; color: var(--sga-ink); font-family: inherit; font-size: .7rem; font-weight: 800; } .sga-role-select:hover, .sga-role-select:focus { outline: none; border-color: color-mix(in srgb, var(--sga-primary) 42%, var(--sga-border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sga-primary) 9%, transparent); } .sga-role-select.sga-role-badge--admin { border-color: #FECACA; background-color: #FEE2E2; color: #991B1B; } .sga-role-select.sga-role-badge--secretaria { border-color: #BFDBFE; background-color: #DBEAFE; color: #1D4ED8; } .sga-role-select.sga-role-badge--financeiro { border-color: #FDE68A; background-color: #FEF3C7; color: #92400E; } .sga-role-select.sga-role-badge--aluno { border-color: #BBF7D0; background-color: #DCFCE7; color: #166534; } .sga-role-select.sga-role-badge--academico { border-color: #BAE6FD; background-color: #E0F2FE; color: #0369A1; } .sga-role-select.sga-role-badge--auditoria { border-color: #DDD6FE; background-color: #EDE9FE; color: #6D28D9; } .sga-role-select.sga-role-badge--default { border-color: #E5E7EB; background-color: #F3F4F6; color: #4B5563; } .sga-role-select option { background: #fff; color: var(--sga-ink); } .sga-page:not(.sga-page--dashboard):not(.sga-page--student-dashboard)::before { content: ''; position: absolute; inset: 0 0 auto; height: .32rem; /* Cantos de cima arredondados pra bater com o card (ver comentário de `.sga-page` acima) - só em cima, nunca embaixo (a barra termina em cheio dentro do card, não é uma borda). */ border-radius: .75rem .75rem 0 0; background: linear-gradient(90deg, var(--sga-primary), var(--sga-nav-accent)); } .sga-page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; } .sga-page-heading > div { min-width: 0; } .sga-page__header-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .6rem; } .sga-page__header-actions form { margin: 0; } .sga-btn-secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 2.35rem; padding: .55rem .9rem; border: 1px solid color-mix(in srgb, var(--sga-primary) 18%, var(--sga-border)); border-radius: .55rem; background: #fff; color: var(--sga-primary); cursor: pointer; font-family: inherit; font-size: .88rem; font-weight: 800; text-decoration: none; transition: background .15s ease, border-color .15s ease, transform .15s ease; } .sga-btn-secondary:hover { border-color: var(--sga-primary); background: color-mix(in srgb, var(--sga-primary) 7%, #fff); transform: translateY(-1px); } /* Achado do teste manual do usuário (2026-09-12, "totalmente responsivo para navegação em smartphones"): em viewport de celular (375px), `padding:2rem` de cada lado sobrava pouquíssimo espaço útil, e o cabeçalho título+botão (`.sga-page__header`, `display:flex` sem quebra) ficava sobrepondo texto quando os dois não cabiam lado a lado na mesma linha. */ @media (max-width: 640px) { .sga-page { width: calc(100% - 1.5rem); margin: 1rem auto; padding: 1.25rem; border-radius: .5rem; } .sga-page-heading { display: grid; } .sga-page-heading .sga-btn-primary--inline { width: 100%; } .sga-page__header-actions { width: 100%; justify-content: stretch; } .sga-page__header-actions > *, .sga-page__header-actions form, .sga-page__header-actions a, .sga-page__header-actions button { width: 100%; } } .sga-page h1 { margin-top: 0; color: var(--sga-ink); font-size: 1.9rem; line-height: 1.12; letter-spacing: 0; } .sga-page:not(.sga-page--dashboard):not(.sga-page--student-dashboard) h1 { display: inline-flex; align-items: center; gap: .45rem; } .sga-page h2 { color: var(--sga-ink); font-size: 1.15rem; line-height: 1.25; letter-spacing: 0; } .sga-section-eyebrow { display: inline-flex; margin-bottom: .35rem; color: color-mix(in srgb, var(--sga-primary) 78%, var(--sga-ink)); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .sga-welcome-wave { display: inline-flex; align-items: center; justify-content: center; width: .92em; height: .92em; font-size: .62em; line-height: 1; transform-origin: 70% 70%; vertical-align: .05em; filter: drop-shadow(0 2px 2px rgba(15, 23, 42, .16)); } .sga-dashboard-hero h1 .sga-welcome-wave, .sga-student-hero h1 .sga-welcome-wave { font-size: .7em; } /* Achado do anexo 1 do pedido de 2026-09-12 ("melhorar links"): nome de curso/candidato/pessoa como link em tabela e o padrão "← Voltar" que se repete em quase toda tela nunca tiveram estilo próprio - caíam no azul sublinhado padrão do navegador (122 ocorrências, levantado por busca). Regra única aqui - mesmo espírito do CSS-only global redesign de `.sga-table__actions a` (pós-MVP-16) - sem tocar em nenhuma das ~50 views que usam `.sga-page`. Exclui o que já tem tratamento próprio (botão-pílula, badge, botão primário) pra não dar conflito visual - achado do F2-05 (o link "Baixar documento" ficava com texto invisível: fundo vinho do `.sga-btn-primary` + cor de texto vinho desta regra, que tinha especificidade maior. Mesmo bug já afetava silenciosamente o "Acessar o Moodle" do Portal do Aluno desde a padronização visual original - corrigido aqui pra ambos de uma vez, sem ser achado de segurança). `.sga-menu-link` entra na exclusão pelo mesmo motivo (2026-09-15) - já tem cor/hover próprios. */ .sga-page a:not(.sga-link-btn):not(.sga-badge):not(.sga-btn-primary):not(.sga-menu-link):not(.sga-kpi-card):not(.sga-metric-bar):not(.sga-alert-badge):not(.sga-quick-action):not(.sga-student-task):not(.sga-course-card):not(.sga-activity-row):not(.sga-event-row):not(.sga-student-link-row):not(.sga-platform-step):not(.sga-platform-client-row):not(.sga-platform-context__link):not(.sga-student-course-row):not(.sga-student-feed-row) { color: var(--sga-primary); text-decoration: none; font-weight: 600; } .sga-page a:not(.sga-link-btn):not(.sga-badge):not(.sga-btn-primary):not(.sga-menu-link):not(.sga-kpi-card):not(.sga-metric-bar):not(.sga-alert-badge):not(.sga-quick-action):not(.sga-student-task):not(.sga-course-card):not(.sga-activity-row):not(.sga-event-row):not(.sga-student-link-row):not(.sga-platform-step):not(.sga-platform-client-row):not(.sga-platform-context__link):not(.sga-student-course-row):not(.sga-student-feed-row):hover { text-decoration: underline; } /* Dashboard (MVP-16) e outras telas com grade de cartões se beneficiam de mais largura que o cartão de formulário padrão. */ .sga-page--wide { max-width: 78rem; } .sga-page--dashboard { max-width: 76rem; background: linear-gradient(180deg, color-mix(in srgb, var(--sga-primary) 5%, #fff), #fff 18rem), #fff; border-color: color-mix(in srgb, var(--sga-primary) 10%, var(--sga-border)); } .sga-page__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin: -.25rem 0 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid color-mix(in srgb, var(--sga-border) 82%, transparent); } .sga-page__header > div { min-width: 0; } .sga-page__header h1 { margin-bottom: .2rem; } .sga-page__header p { margin-top: 0 !important; } .sga-page-context { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .25rem 0 0 !important; color: var(--sga-ink-muted); font-size: .85rem; line-height: 1.35; } .sga-page-context strong { color: var(--sga-primary); font-weight: 800; } .sga-page-context span { color: var(--sga-ink-muted); } .sga-page-context span::before { content: '•'; margin-right: .4rem; color: color-mix(in srgb, var(--sga-ink-muted) 55%, transparent); } /* ---------- Indicadores do Dashboard (MVP-16, tela 02) ---------- */ .sga-dashboard-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(13rem, 24rem); gap: 1.5rem; align-items: center; margin-bottom: 1.75rem; } .sga-dashboard-hero__welcome { display: flex; align-items: center; gap: 1.25rem; min-width: 0; } .sga-dashboard-hero__mark { display: flex; align-items: center; justify-content: center; width: 4.5rem; height: 4.5rem; flex: none; border-radius: 1.1rem; background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .72), transparent 36%), color-mix(in srgb, var(--sga-primary) 12%, #fff); color: var(--sga-primary); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sga-primary) 12%, transparent); } .sga-dashboard-hero__mark svg { width: 2.3rem; height: 2.3rem; } .sga-dashboard-hero h1 { margin: .25rem 0 .35rem; color: var(--sga-ink); font-size: clamp(1.85rem, 2.65vw, 2.35rem); line-height: 1.05; letter-spacing: 0; white-space: nowrap; } .sga-dashboard-hero p { margin: 0; color: var(--sga-ink-muted); font-size: 1.02rem; } .sga-dashboard-eyebrow { display: block; color: color-mix(in srgb, var(--sga-primary) 74%, var(--sga-ink)); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .sga-dashboard-hero__aside { display: grid; gap: .75rem; align-self: start; min-width: 0; } .sga-dashboard-hero blockquote { margin: 0; padding: 1rem 1.1rem; border: 1px solid color-mix(in srgb, var(--sga-primary) 13%, var(--sga-border)); border-radius: .75rem; background: rgba(255, 255, 255, .72); box-shadow: 0 8px 24px rgba(15, 23, 42, .06); } .sga-dashboard-date { display: flex; align-items: center; justify-self: end; gap: .45rem; width: fit-content; margin: 0; padding: .46rem .62rem; border: 1px solid color-mix(in srgb, var(--sga-primary) 13%, var(--sga-border)); border-radius: 999px; background: rgba(255, 255, 255, .62); color: var(--sga-ink-muted); font-size: .78rem; line-height: 1; } .sga-dashboard-date svg { width: .92rem; height: .92rem; color: color-mix(in srgb, var(--sga-primary) 72%, var(--sga-ink-muted)); } .sga-dashboard-date strong { color: color-mix(in srgb, var(--sga-ink) 88%, var(--sga-primary)); font-size: .82rem; font-weight: 800; } .sga-dashboard-date span::after { content: '•'; margin-left: .45rem; color: color-mix(in srgb, var(--sga-ink-muted) 52%, transparent); } .sga-dashboard-hero blockquote { color: color-mix(in srgb, var(--sga-primary) 72%, var(--sga-ink)); font-size: .95rem; font-weight: 700; line-height: 1.45; } .sga-kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1rem; margin-top: 1.5rem; } .sga-kpi-grid--executive { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin-top: 0; } .sga-kpi-card { display: flex; flex-direction: column; padding: 1.1rem 1.25rem; background: #fff; border: 1px solid var(--sga-border); border-radius: .75rem; box-shadow: 0 1px 3px rgba(0, 0, 0, .04); text-decoration: none; color: inherit; transition: border-color .15s ease, box-shadow .15s ease; } .sga-kpi-card:hover { border-color: var(--sga-primary); box-shadow: 0 4px 14px rgba(0, 0, 0, .06); } /* Pedido do usuário (2026-09-16, dois prints): o `clamp()` baseado em `vw` não bastava - a largura real do CARTÃO não acompanha a viewport de forma linear (depende de quantas colunas o grid `auto-fit` encaixa e da sidebar estar recolhida ou não), então em várias larguras o cálculo ainda dava uma fonte grande demais e "R$ 1.500,00" quebrava. `container-type: inline-size` faz o próprio CARTÃO virar a régua (`cqi` abaixo mede % da largura DELE, não da tela) - a fonte agora acompanha o espaço real disponível, não uma aproximação. */ .sga-kpi-card--executive { position: relative; flex-direction: row; align-items: center; gap: 1rem; min-height: 7.4rem; padding: 1.05rem; overflow: hidden; container-type: inline-size; } .sga-kpi-card--executive::before { content: ''; position: absolute; inset: 0; opacity: .7; pointer-events: none; } .sga-kpi-card--executive.sga-kpi-card--ok::before { background: linear-gradient(135deg, color-mix(in srgb, #16A34A 9%, transparent), transparent 58%); } .sga-kpi-card--executive.sga-kpi-card--warn::before { background: linear-gradient(135deg, color-mix(in srgb, #D97706 12%, transparent), transparent 58%); } .sga-kpi-card--executive.sga-kpi-card--critical::before { background: linear-gradient(135deg, color-mix(in srgb, #DC2626 12%, transparent), transparent 58%); } .sga-kpi-card--executive > * { position: relative; z-index: 1; } .sga-kpi-card__content { display: flex; flex: 1; min-width: 0; flex-direction: column; } .sga-kpi-card__arrow { display: flex; align-items: center; justify-content: center; width: 1.8rem; height: 1.8rem; flex: none; border-radius: 50%; background: color-mix(in srgb, var(--sga-primary) 8%, #fff); color: var(--sga-primary); font-size: 1.4rem; line-height: 1; transition: transform .15s ease, background .15s ease; } .sga-kpi-card--executive:hover .sga-kpi-card__arrow { transform: translateX(2px); background: color-mix(in srgb, var(--sga-primary) 14%, #fff); } /* Redesenho de UX (pedido do usuário, 2026-09-13, com prints de referência) - selo de ícone colorido por `severity` (o mesmo campo já usado pelo painel "Alertas operacionais", nunca uma cor nova sem significado) no lugar de um cartão só-texto. `ok`/`warn`/`critical` já eram o vocabulário existente de HomeController::indicators() - aqui só ganham uma cor de fundo pastel + a mesma cor no ícone (`currentColor`, herdada por `` sem CSS extra por ícone). */ .sga-kpi-card__icon { display: flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; flex-shrink: 0; border-radius: .6rem; margin-bottom: .85rem; } .sga-kpi-card--executive .sga-kpi-card__icon { width: 3rem; height: 3rem; margin-bottom: 0; border-radius: .75rem; } .sga-kpi-card__icon .sga-shell__nav-icon { width: 1.3rem; height: 1.3rem; } .sga-kpi-card__icon--ok { background: #DCFCE7; color: #166534; } .sga-kpi-card__icon--warn { background: #FEF3C7; color: #92400E; } .sga-kpi-card__icon--critical { background: #FEE2E2; color: #991B1B; } /* Pedido do usuário (2026-09-13, refinamento do Portal com print de referência): "seguirmos exatamente as mesmas cores dos ícones" - no mockup, TODO cartão do Portal usa o MESMO tom (rosa claro + vinho), nunca uma cor por severidade feito o dashboard institucional. Deriva de `--sga-primary` (nunca uma cor fixa) - acompanha a paleta que cada instituição configurar em Aparência, sem precisar reescrever este CSS por cliente. Só o Portal do Aluno usa este modificador; o dashboard institucional (MVP-16) continua com `--ok/--warn/--critical` (a distinção por severidade importa mais ali, é uma tela operacional). */ .sga-kpi-card__icon--brand { background: color-mix(in srgb, var(--sga-primary) 12%, white); color: var(--sga-primary); } .sga-kpi-card__value { /* Fallback pra navegador sem container queries - se o valor com `cqi` da regra mais específica abaixo for inválido, o CSS ignora aquela declaração inteira e este 1.9rem simples continua valendo. */ font-size: 1.9rem; font-weight: 700; color: var(--sga-ink); line-height: 1.15; } /* Pedido do usuário (2026-09-16, dois prints): "R$ 1.500,00" quebrava em cartões mais estreitos ("R$" isolado numa linha) - a fonte agora escala com a largura real do CARTÃO (`cqi`, ver `container-type` em `.sga-kpi-card--executive` acima), então encolhe o suficiente pra caber mesmo quando o grid encaixa 4+ colunas numa tela menor. Reta calibrada em 2 pontos: ~1.3rem num cartão no mínimo do grid (15rem) e volta a 1.9rem (o máximo) a partir de ~23.75rem de cartão. */ .sga-kpi-card--executive .sga-kpi-card__value { font-size: clamp(1.3rem, .27rem + 6.86cqi, 1.9rem); } .sga-kpi-card__label { margin-top: .4rem; font-size: .85rem; color: var(--sga-ink); } .sga-kpi-card__detail { margin-top: .2rem; font-size: .8rem; color: var(--sga-ink-muted); } .sga-kpi-card__link { margin-top: .6rem; font-size: .8rem; font-weight: 600; color: var(--sga-primary); } .sga-dashboard-insights { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(17rem, .9fr); gap: 1rem; margin-top: 1rem; align-items: start; } /* Pedido do usuário (2026-09-16): "Governança" empilhada abaixo do Checklist, na mesma coluna - a coluna esquerda do grid acima vira uma pilha vertical de 2 cards em vez de 1 só. `min-width: 0` evita que o conteúdo largo de dentro (steps, tabela) force a coluna a crescer além do espaço do grid (achado clássico de grid/flex com filho largo). */ .sga-dashboard-insights__main { display: flex; flex-direction: column; gap: 1rem; min-width: 0; } .sga-dashboard-card { padding: 1.1rem 1.25rem; border: 1px solid var(--sga-border); border-radius: .75rem; background: #fff; box-shadow: 0 8px 24px rgba(15, 23, 42, .05); } .sga-dashboard-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .sga-dashboard-card__header h2 { margin: .15rem 0 0; color: var(--sga-ink); font-size: 1.05rem; } .sga-dashboard-card__header a { color: var(--sga-primary); font-size: .85rem; font-weight: 700; text-decoration: none; white-space: nowrap; } .sga-dashboard-card__header a:hover { text-decoration: underline; } .sga-metric-bars { display: grid; gap: .78rem; } .sga-metric-bar { display: grid; grid-template-columns: minmax(11rem, 1fr) minmax(10rem, 1.2fr) 2.5rem; gap: .8rem; align-items: center; color: var(--sga-ink); text-decoration: none; } .sga-metric-bar__label { min-width: 0; color: var(--sga-ink-muted); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sga-metric-bar__track { height: .62rem; border-radius: 999px; background: color-mix(in srgb, var(--sga-border) 72%, #fff); overflow: hidden; } .sga-metric-bar__fill { display: block; height: 100%; min-width: .35rem; border-radius: inherit; background: var(--sga-primary); } .sga-metric-bar--ok .sga-metric-bar__fill { background: #16A34A; } .sga-metric-bar--warn .sga-metric-bar__fill { background: #D97706; } .sga-metric-bar--critical .sga-metric-bar__fill { background: #DC2626; } .sga-metric-bar strong { color: var(--sga-ink); font-size: .92rem; text-align: right; } .sga-metric-bar:hover .sga-metric-bar__label { color: var(--sga-primary); } .sga-dashboard-layout { display: flex; gap: 1.5rem; align-items: flex-start; margin-top: 1.5rem; flex-wrap: wrap; } .sga-dashboard-layout .sga-kpi-grid { flex: 1 1 26rem; margin-top: 0; } .sga-alerts-panel { flex: 0 0 16rem; padding: 1.1rem 1.25rem; background: var(--sga-bg); border: 1px solid var(--sga-border); border-radius: .75rem; } .sga-alerts-panel--executive { flex: none; background: linear-gradient(160deg, color-mix(in srgb, var(--sga-primary) 6%, #fff), #fff 62%), #fff; } .sga-alerts-panel h2 { margin: 0 0 .75rem; font-size: .95rem; } .sga-alert-badge { display: block; margin-bottom: .5rem; padding: .45rem .7rem; border-radius: .5rem; font-size: .82rem; font-weight: 600; text-decoration: none; } .sga-alert-list { display: grid; gap: .5rem; } .sga-alert-badge { display: flex; align-items: center; gap: .55rem; } .sga-alert-badge span { display: inline-flex; align-items: center; justify-content: center; width: 1.55rem; height: 1.55rem; flex: none; border-radius: 50%; background: rgba(255, 255, 255, .58); font-weight: 800; } .sga-alert-badge--critical { background: #FEE2E2; color: #991B1B; } .sga-alert-badge--warn { background: #FEF3C7; color: #92400E; } .sga-alert-meter { display: grid; place-items: center; width: 9.5rem; height: 9.5rem; margin: .25rem auto 1rem; border-radius: 50%; background: radial-gradient(circle at center, #fff 0 58%, transparent 59%), conic-gradient(var(--sga-primary) var(--sga-alert-share), color-mix(in srgb, var(--sga-primary) 10%, var(--sga-border)) 0); } .sga-alert-meter div { display: grid; place-items: center; } .sga-alert-meter strong { color: var(--sga-ink); font-size: 2rem; line-height: 1; } .sga-alert-meter span { margin-top: .2rem; color: var(--sga-ink-muted); font-size: .78rem; font-weight: 700; } .sga-empty-note { color: var(--sga-ink-muted); font-size: .85rem; text-align: center; } .sga-severity-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; margin-top: 1rem; } .sga-severity-strip span { padding: .45rem .35rem; border-radius: .55rem; background: var(--sga-bg); color: var(--sga-ink-muted); font-size: .72rem; text-align: center; } .sga-severity-strip strong { display: block; color: var(--sga-ink); font-size: .95rem; } .sga-quick-actions { margin-top: 1rem; } .sga-quick-actions__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; } .sga-quick-action { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .75rem; align-items: center; min-height: 4rem; padding: .8rem .9rem; border: 1px solid var(--sga-border); border-radius: .65rem; background: color-mix(in srgb, var(--sga-bg) 45%, #fff); color: var(--sga-ink); text-decoration: none; transition: border-color .15s ease, background .15s ease, transform .15s ease; } .sga-quick-action:hover { transform: translateY(-1px); border-color: var(--sga-primary); background: #fff; } .sga-quick-action .sga-kpi-card__icon { width: 2.35rem; height: 2.35rem; margin: 0; } .sga-quick-action strong { min-width: 0; font-size: .86rem; line-height: 1.25; } .sga-quick-action > span:last-child { color: var(--sga-primary); font-size: 1.3rem; } .sga-dashboard-secondary { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(18rem, .85fr); gap: 1rem; margin-top: 1rem; } /* Pedido do usuário (2026-09-16): "Clientes recentes" com largura total - só sobrou ela nesta seção depois que "Governança" mudou de coluna (ver .sga-dashboard-insights__main), então o grid de 2 colunas dá lugar a 1 coluna só, ocupando a largura inteira. */ .sga-dashboard-secondary--full { grid-template-columns: 1fr; } .sga-dashboard-side-stack { display: grid; gap: 1rem; align-content: start; } .sga-activity-list, .sga-event-list { display: grid; gap: .55rem; } .sga-activity-row, .sga-event-row, .sga-student-link-row { display: grid; align-items: center; gap: .75rem; min-width: 0; border: 1px solid var(--sga-border); border-radius: .65rem; background: color-mix(in srgb, var(--sga-bg) 42%, #fff); color: var(--sga-ink); text-decoration: none; transition: border-color .15s ease, background .15s ease, transform .15s ease; } .sga-activity-row { grid-template-columns: auto minmax(0, 1fr) auto; padding: .72rem .82rem; } .sga-activity-row:hover, .sga-event-row:hover, .sga-student-link-row:hover { transform: translateY(-1px); border-color: var(--sga-primary); background: #fff; } .sga-activity-row .sga-kpi-card__icon, .sga-student-link-row .sga-kpi-card__icon { width: 2.45rem; height: 2.45rem; margin: 0; border-radius: .7rem; } .sga-activity-row strong, .sga-activity-row small, .sga-event-row strong, .sga-event-row small, .sga-student-link-row strong, .sga-student-link-row small { display: block; min-width: 0; } .sga-activity-row strong, .sga-event-row strong, .sga-student-link-row strong { color: var(--sga-ink); font-size: .9rem; line-height: 1.25; } .sga-activity-row small, .sga-event-row small, .sga-student-link-row small { margin-top: .15rem; color: var(--sga-ink-muted); font-size: .78rem; line-height: 1.25; } .sga-activity-row em { color: var(--sga-ink-muted); font-size: .76rem; font-style: normal; font-weight: 700; text-align: right; white-space: nowrap; } .sga-activity-row--critical { background: linear-gradient(90deg, #FEF2F2, #fff 72%); } .sga-activity-row--warn { background: linear-gradient(90deg, #FFFBEB, #fff 72%); } .sga-event-row { grid-template-columns: auto minmax(0, 1fr); padding: .72rem .82rem; } .sga-event-row__date { display: grid; place-items: center; width: 3.1rem; height: 3.1rem; border-radius: .72rem; background: color-mix(in srgb, var(--sga-primary) 9%, #fff); color: var(--sga-primary); } .sga-event-row--warn .sga-event-row__date { background: #FEF3C7; color: #92400E; } .sga-event-row__date strong { color: inherit; font-size: 1.12rem; line-height: 1; } .sga-event-row__date small { margin: .08rem 0 0; color: inherit; font-size: .63rem; font-weight: 800; } .sga-event-empty { display: grid; place-items: center; min-height: 10rem; padding: 1.2rem; border-radius: .7rem; background: color-mix(in srgb, var(--sga-bg) 58%, #fff); color: var(--sga-ink-muted); text-align: center; } .sga-event-empty .sga-kpi-card__icon { width: 3rem; height: 3rem; margin: 0 0 .55rem; } .sga-event-empty strong { color: var(--sga-ink); font-size: .95rem; } .sga-event-empty small { display: block; max-width: 15rem; margin-top: .2rem; font-size: .8rem; line-height: 1.35; } .sga-help-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8rem; align-items: center; padding: 1rem 1.05rem; border: 1px solid color-mix(in srgb, var(--sga-primary) 14%, var(--sga-border)); border-radius: .75rem; background: linear-gradient(145deg, color-mix(in srgb, var(--sga-primary) 8%, #fff), #fff 64%), #fff; box-shadow: 0 8px 24px rgba(15, 23, 42, .045); } .sga-help-card .sga-kpi-card__icon { width: 2.75rem; height: 2.75rem; margin: 0; } .sga-help-card strong, .sga-help-card small { display: block; } .sga-help-card strong { color: var(--sga-ink); font-size: .92rem; line-height: 1.25; } .sga-help-card small { margin-top: .2rem; color: var(--sga-ink-muted); font-size: .78rem; line-height: 1.35; } .sga-help-card a { grid-column: 2; color: var(--sga-primary); font-size: .8rem; font-weight: 800; text-decoration: none; } .sga-help-card a:hover { text-decoration: underline; } .sga-page--platform { max-width: 82rem; } .sga-platform-hero .sga-dashboard-hero__mark .sga-shell__nav-icon { width: 2.35rem; height: 2.35rem; } .sga-platform-context { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .8rem; align-items: center; margin: 0 0 1rem; padding: .9rem 1rem; border: 1px solid var(--sga-border); border-radius: .75rem; background: #fff; box-shadow: 0 8px 24px rgba(15, 23, 42, .05); } .sga-platform-context--warn { border-color: #FCD34D; background: linear-gradient(135deg, #FFFBEB, #fff 64%); } .sga-platform-context .sga-kpi-card__icon { width: 2.6rem; height: 2.6rem; margin: 0; } .sga-platform-context strong, .sga-platform-context small { display: block; min-width: 0; } .sga-platform-context strong { color: var(--sga-ink); font-size: .96rem; } .sga-platform-context small { margin-top: .15rem; color: var(--sga-ink-muted); font-size: .82rem; line-height: 1.35; } .sga-platform-context__link { color: var(--sga-primary); font-size: .83rem; font-weight: 800; text-decoration: none; white-space: nowrap; } .sga-platform-context__link:hover { text-decoration: underline; } .sga-platform-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: .75rem; } .sga-platform-step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem; min-height: 7.5rem; padding: .9rem; border: 1px solid var(--sga-border); border-radius: .7rem; background: linear-gradient(145deg, color-mix(in srgb, var(--sga-primary) 5%, transparent), transparent 64%), color-mix(in srgb, var(--sga-bg) 42%, #fff); color: var(--sga-ink); text-decoration: none; transition: border-color .15s ease, background .15s ease, transform .15s ease; } .sga-platform-step:hover { transform: translateY(-1px); border-color: var(--sga-primary); background: #fff; } .sga-platform-step > strong { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: .6rem; background: color-mix(in srgb, var(--sga-primary) 11%, #fff); color: var(--sga-primary); font-size: .95rem; } .sga-platform-step b, .sga-platform-step small { display: block; min-width: 0; } .sga-platform-step b { font-size: .9rem; line-height: 1.25; } .sga-platform-step small { margin-top: .2rem; color: var(--sga-ink-muted); font-size: .78rem; line-height: 1.35; } .sga-platform-support-flow { display: grid; grid-template-columns: minmax(13rem, .75fr) minmax(0, 1.25fr); gap: 1rem; align-items: stretch; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid color-mix(in srgb, var(--sga-border) 82%, transparent); } .sga-platform-support-flow h3 { margin: .15rem 0 .35rem; color: var(--sga-ink); font-size: 1rem; line-height: 1.25; } .sga-platform-support-flow p { margin: 0; color: var(--sga-ink-muted); font-size: .84rem; line-height: 1.45; } .sga-platform-support-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: .7rem; } .sga-platform-support-actions a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .65rem .75rem; align-items: center; min-height: 5.8rem; padding: .8rem; border: 1px solid color-mix(in srgb, var(--sga-primary) 12%, var(--sga-border)); border-radius: .7rem; background: linear-gradient(135deg, color-mix(in srgb, var(--sga-primary) 5%, #fff), #fff 64%); color: var(--sga-ink); text-decoration: none; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; } .sga-platform-support-actions a:hover { border-color: var(--sga-primary); box-shadow: 0 10px 22px rgba(15, 23, 42, .06); transform: translateY(-1px); } .sga-platform-support-actions .sga-kpi-card__icon { grid-row: span 2; width: 2.35rem; height: 2.35rem; margin: 0; } .sga-platform-support-actions strong, .sga-platform-support-actions small { display: block; min-width: 0; } .sga-platform-support-actions strong { font-size: .88rem; } .sga-platform-support-actions small { color: var(--sga-ink-muted); font-size: .74rem; line-height: 1.3; } .sga-platform-status-panel .sga-severity-strip { margin-top: 0; } .sga-platform-status-strip { grid-template-columns: 1fr; } .sga-platform-status { text-align: left !important; } .sga-platform-status--ativo strong { color: #166534; } .sga-platform-status--trial strong { color: #92400E; } .sga-platform-status--suspenso strong { color: #991B1B; } .sga-platform-bars { margin-top: 1rem; } .sga-platform-bars .sga-metric-bar { grid-template-columns: minmax(0, 1fr) 2.2rem; } .sga-platform-bars .sga-metric-bar__track { grid-column: 1 / -1; grid-row: 2; } .sga-platform-client-list { display: grid; gap: .55rem; } .sga-platform-client-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(8rem, auto); gap: .8rem; align-items: center; padding: .72rem .82rem; border: 1px solid var(--sga-border); border-radius: .65rem; background: color-mix(in srgb, var(--sga-bg) 42%, #fff); color: var(--sga-ink); text-decoration: none; transition: border-color .15s ease, background .15s ease, transform .15s ease; } .sga-platform-client-row:hover { transform: translateY(-1px); border-color: var(--sga-primary); background: #fff; } .sga-platform-client-row strong, .sga-platform-client-row small { display: block; min-width: 0; } .sga-platform-client-row strong { font-size: .9rem; } .sga-platform-client-row small, .sga-platform-client-row em { color: var(--sga-ink-muted); font-size: .78rem; font-style: normal; } .sga-platform-client-row em { text-align: right; } @media (max-width: 1180px) { .sga-quick-actions__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sga-dashboard-insights, .sga-dashboard-secondary { grid-template-columns: 1fr; } .sga-platform-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sga-platform-support-flow { grid-template-columns: 1fr; } } @media (max-width: 760px) { .sga-dashboard-hero { grid-template-columns: 1fr; } .sga-dashboard-hero h1 { font-size: 2rem; white-space: normal; } .sga-dashboard-hero__welcome { align-items: flex-start; } .sga-dashboard-hero__mark { width: 3.4rem; height: 3.4rem; border-radius: .85rem; } .sga-dashboard-hero__mark svg { width: 1.9rem; height: 1.9rem; } .sga-kpi-grid--executive, .sga-quick-actions__grid { grid-template-columns: 1fr; } .sga-metric-bar { grid-template-columns: 1fr 2.5rem; } .sga-metric-bar__track { grid-column: 1 / -1; grid-row: 2; } .sga-activity-row { grid-template-columns: auto minmax(0, 1fr); } .sga-activity-row em { grid-column: 2; text-align: left; } .sga-platform-context, .sga-platform-client-row { grid-template-columns: 1fr; } .sga-platform-context__link, .sga-platform-client-row em { text-align: left; } .sga-platform-steps { grid-template-columns: 1fr; } } /* ---------- Aparência (logotipo/cores) ---------- */ .sga-branding-layout { display: flex; gap: 2rem; align-items: flex-start; margin-top: 1rem; flex-wrap: wrap; } .sga-branding-layout .sga-form { flex: 1 1 22rem; } .sga-branding-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .75rem 1.5rem; } .sga-branding-colors input[type="color"] { width: 100%; height: 2.4rem; padding: .2rem; cursor: pointer; } .sga-branding-preview { flex: 0 0 14rem; position: sticky; top: 2rem; } .sga-branding-preview__sidebar { display: flex; flex-direction: column; gap: .3rem; padding: 1rem .85rem; border-radius: .75rem; box-shadow: 0 4px 14px rgba(0, 0, 0, .12); } .sga-branding-preview__brand { padding: .6rem .5rem; border-radius: .5rem; color: #fff; font-weight: 700; font-size: .85rem; margin-bottom: .5rem; } /* Pedido do usuário (2026-09-19): prévia em miniatura da tela de login, mesmo espírito da prévia do menu lateral acima - reflete flip/invert/ cor do botão ao vivo via JS (ver sgaBrandingPreview()), sem precisar salvar e abrir /login numa aba separada. */ .sga-branding-preview__login { display: flex; height: 8rem; border-radius: .75rem; overflow: hidden; box-shadow: 0 4px 14px rgba(0, 0, 0, .12); } .sga-branding-preview__login-brand, .sga-branding-preview__login-form { flex: 1 1 50%; display: flex; align-items: center; justify-content: center; padding: .5rem; } .sga-branding-preview__login-brand img { max-width: 70%; max-height: 70%; } .sga-branding-preview__login-card { width: 100%; background: #fff; border-radius: .4rem; padding: .5rem; box-shadow: 0 2px 6px rgba(0, 0, 0, .15); display: flex; flex-direction: column; gap: .3rem; } .sga-branding-preview__login-title { font-size: .6rem; font-weight: 700; color: var(--sga-ink); } .sga-branding-preview__login-input { display: block; height: .5rem; border-radius: .2rem; background: var(--sga-border); } .sga-branding-preview__login-btn { display: flex; align-items: center; justify-content: center; height: .8rem; border-radius: .3rem; background: var(--sga-primary); /* Achado do usuário (2026-09-19): a 1a tentativa com texto vazava da barra - achatado pra caber (font-size pequeno, sem quebra de linha, cortado se sobrar) e centralizado com flex em vez de depender de line-height. */ color: #fff; font-size: .38rem; font-weight: 700; line-height: 1; overflow: hidden; white-space: nowrap; letter-spacing: .02em; } .sga-branding-preview__login-brand-text { color: #fff; font-weight: 700; font-size: .7rem; text-align: center; } .sga-branding-preview__login-forgot { font-size: .5rem; text-align: center; color: var(--sga-primary); } .sga-status { padding: .75rem .95rem; background: color-mix(in srgb, var(--sga-primary) 10%, white); border: 1px solid color-mix(in srgb, var(--sga-primary) 30%, white); border-radius: .5rem; font-size: .9rem; color: color-mix(in srgb, var(--sga-primary) 72%, var(--sga-ink)); font-weight: 600; } .sga-btn-primary--inline { display: inline-flex; align-items: center; justify-content: center; width: auto; text-decoration: none; white-space: nowrap; } /* Achado do teste manual do usuário (2026-09-12, "totalmente responsivo para navegação em smartphones"): tabela com muitas colunas (ex.: Histórico Acadêmico, tela 27 do F2-02) estourava a largura da tela em mobile e rolava a PÁGINA INTEIRA na horizontal - `overflow-x:auto` direto na tabela dá scroll PRÓPRIO só a ela. Pedido do usuário (2026-09-15, "tabelas mais modernas"): `display:block` (a técnica antiga aqui) faz o browser gerar uma tabela ANÔNIMA pra conter thead/tbody/tr/td, e essa anônima ignora o `width:100%` do elemento real - a tabela sempre ficava do tamanho do conteúdo, sobrando espaço morto no card à direita (achado do próprio usuário, print da tela de Cursos). `display:table` sozinho já é scrollável com `overflow-x:auto` nos browsers atuais (não precisa do hack de bloco) e MANTÉM o `width:100%` na tabela de verdade - looks preenche o card quando cabe, sem afetar em nada o scroll em mobile quando não cabe. Sem tocar em nenhuma das ~50 views que usam `.sga-table`. */ .sga-table { display: table; overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; border-collapse: collapse; font-size: .9rem; background: #fff; } .sga-table thead th { text-align: left; padding: .78rem .9rem; background: color-mix(in srgb, var(--sga-bg) 68%, #fff); color: var(--sga-ink-muted); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--sga-border); white-space: nowrap; } .sga-table td { text-align: left; padding: .82rem .9rem; border-bottom: 1px solid var(--sga-border); vertical-align: middle; } /* Pedido do usuário (2026-09-14, "melhorar UX" das telas de listagem) - destaque sutil de linha ao passar o mouse, benefício automático em TODA tabela do sistema (nenhuma tela precisa de CSS próprio). Só linhas de dado de verdade (nunca o cabeçalho, nem a linha de "nenhum registro encontrado" - `td[colspan]` marca essa exceção). */ .sga-table tbody tr:hover td:not([colspan]) { background: color-mix(in srgb, var(--sga-primary) 4%, #fff); } .sga-table tbody tr:last-child td { border-bottom-color: transparent; } /* Avatar de iniciais em linha de tabela (Alunos/Usuários) - mesmo gradiente/formato do avatar da sidebar, só menor. */ .sga-table__avatar { display: inline-flex; align-items: center; justify-content: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: linear-gradient(135deg, var(--sga-logo-bg-start), var(--sga-logo-bg-end)); color: #fff; font-size: .68rem; font-weight: 700; text-transform: uppercase; flex-shrink: 0; margin-right: .5rem; vertical-align: middle; } /* Achado do pedido de UX de 2026-09-12 ("melhorar o UX destes links" sobre a coluna de ações de Usuários): virou botão-pílula em vez de texto sublinhado solto - `.sga-table__actions a` (link puro, ex.: "Editar") e `.sga-link-btn` (dentro de um
, ex.: "Excluir") ganham o MESMO visual aqui, sem precisar tocar nenhuma view - toda tela com essa coluna (Usuários, Unidades, Cursos, Central de Validação etc.) melhora de uma vez só. */ /* Pedido do usuário (2026-09-14): ícones de ação quebrando linha em telas com nome mais longo/coluna mais estreita (Usuários etc.) - `nowrap` garante que os botões fiquem sempre lado a lado, mesmo que a tabela precise rolar horizontalmente (já suportado por `.sga-table { overflow-x: auto }` acima). */ .sga-table__actions { text-align: right; white-space: nowrap; } .sga-table__actions form { display: inline-flex; margin: 0 0 0 .35rem; vertical-align: middle; } .sga-table__actions > a { margin-left: .35rem; vertical-align: middle; } .sga-table__actions a, .sga-table__actions .sga-link-btn { display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--sga-border); padding: .3rem .65rem; border-radius: .4rem; color: var(--sga-primary); text-decoration: none; cursor: pointer; font-size: .8rem; font-weight: 600; line-height: 1.2; transition: background .15s ease, border-color .15s ease, transform .15s ease; } /* Pedido do usuário (2026-09-14, "Usuários": ícone no lugar do texto) - botão vira um quadrado compacto quando o conteúdo é só um ícone (nenhum texto visível pra dar largura ao botão sozinho). */ .sga-table__actions a:has(svg:only-child), .sga-table__actions .sga-link-btn:has(svg:only-child) { padding: .4rem; width: 2rem; height: 2rem; } .sga-table__actions svg { width: 1rem; height: 1rem; flex-shrink: 0; } .sga-table__actions a:hover, .sga-table__actions .sga-link-btn:hover { background: color-mix(in srgb, var(--sga-primary) 8%, white); border-color: var(--sga-primary); transform: translateY(-1px); } .sga-table__actions .sga-link-btn--danger { color: #B42318; } .sga-table__actions .sga-link-btn--danger:hover { background: #FEE2E2; border-color: #B42318; } /* Fora de uma tabela (ex.: "Registrar baixa" ao lado de um