/* ════════════════════════════════════════════════════════════════════════════ Portal do Titular (aluno/responsável) — mockup "Portal do Titular (DSAR)". Prefixo `tt-`. Cores da marca vêm das variáveis definidas no . ════════════════════════════════════════════════════════════════════════════ */ body.le-titular { background: #F2F5FD; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; color: #12275A; min-height: 100vh; display: flex; flex-direction: column; margin: 0; } body.le-titular a { color: var(--marca-primaria); text-decoration: none; } /* ⚠️ A regra acima tem especificidade (0,1,2) e vence qualquer `.classe` sozinha — foi assim que o texto do botão "+ Nova solicitação" ficou azul sobre azul, ou seja, invisível (o texto estava lá; só não dava para ler). Todo BOTÃO que é um precisa reafirmar a cor com este mesmo peso. Mesmo tropeço do link "Já tenho conta" no fluxo de conta. */ body.le-titular a.sl-btn-azul { color: #fff; } body.le-titular a.sl-btn-claro, body.le-titular a.pv-btn-claro { color: #33445F; } /* ── Header ────────────────────────────────────────────────────────────────── */ .tt-topo { height: 96px; flex: none; background: var(--marca-bar); display: flex; align-items: center; padding: 0 34px; gap: 24px; } .tt-logo { background: #fff; border-radius: 8px; padding: 6px 10px; display: flex; } .tt-logo img { width: 104px; height: auto; display: block; } .tt-sep { width: 1px; height: 44px; background: rgba(255, 255, 255, .32); } .tt-titulo { font-size: 19.5px; font-weight: 600; color: #fff; } .tt-escudo { width: 44px; height: 44px; flex: none; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; } .tt-lema { display: flex; flex-direction: column; gap: 3px; } .tt-lema-1 { font-size: 14.5px; font-weight: 700; color: #fff; } .tt-lema-2 { font-size: 14px; color: #DCE6FA; } /* Faixa de 5 cores do design — é a assinatura visual do portal. */ .tt-faixa { width: 150px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #E8453C, #F5A623, #37C77F, #2E9BF0, #8B5CF6); } .tt-sair, a.tt-sair { font-size: 13px; font-weight: 600; color: #DCE6FA; } a.tt-sair:hover { color: #fff; } /* ── Corpo ─────────────────────────────────────────────────────────────────── */ .tt-corpo { flex: 1; padding: 26px 34px 30px; display: flex; flex-direction: column; gap: 18px; } .tt-abre { display: flex; align-items: flex-start; gap: 10px; } .tt-abre h1 { margin: 0; font-size: 38px; font-weight: 800; letter-spacing: -.02em; color: #0B3FBF; } .tt-abre p { margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: #2B4368; max-width: 420px; } .tt-abre p.destaque { font-weight: 500; color: #1E3A6B; margin-top: 14px; } .tt-abre strong { font-weight: 700; color: #0B3FBF; } .tt-ilustra { width: 290px; height: auto; flex: none; display: block; } .tt-h2 { margin: 6px 0 0; font-size: 19px; font-weight: 700; color: #0B3FBF; } .tt-acoes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .tt-acao { background: #fff; border: 1px solid #E4EAF5; border-radius: 12px; padding: 18px 16px 14px; display: flex; flex-direction: column; gap: 12px; cursor: pointer; color: inherit; box-shadow: 0 1px 3px rgba(18, 39, 90, .05); transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; } .tt-acao:hover { border-color: #9FC0F7; box-shadow: 0 6px 18px rgba(11, 63, 191, .12); transform: translateY(-2px); } .tt-acao-ic { width: 44px; height: 44px; border-radius: 11px; display: flex; align-items: center; justify-content: center; } .tt-acao b { font-size: 16.5px; font-weight: 700; color: #0B3FBF; line-height: 1.25; } .tt-acao span { font-size: 11.5px; line-height: 1.5; color: #5D7092; } .tt-acao-seta { display: flex; justify-content: center; margin-top: 2px; } /* Cartão desabilitado: aparece, apagado, com o motivo — some seria pior que dizer "ainda não". */ .tt-acao.indisponivel { opacity: .55; cursor: default; } .tt-acao.indisponivel:hover { transform: none; border-color: #E4EAF5; box-shadow: 0 1px 3px rgba(18, 39, 90, .05); } .tt-resumo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .tt-card { background: #fff; border: 1px solid #E4EAF5; border-radius: 12px; padding: 16px 18px; box-shadow: 0 1px 3px rgba(18, 39, 90, .05); } .tt-card-tit { font-size: 15px; font-weight: 700; color: #0B3FBF; } .tt-card-num { font-size: 30px; font-weight: 800; color: #12275A; line-height: 1.15; margin-top: 6px; } .tt-card-sub { font-size: 12px; color: #5D7092; margin-top: 2px; } /* ── Nova solicitação ──────────────────────────────────────────────────────── */ .tt-trilha { display: flex; align-items: flex-start; } .tt-etapa { display: flex; align-items: flex-start; gap: 10px; flex: none; } .tt-etapa span:first-child { width: 22px; height: 22px; flex: none; border-radius: 50%; background: #CFD8E6; color: #fff; font-size: 11.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 1px; } .tt-etapa.ativa span:first-child, .tt-etapa.feita span:first-child { background: var(--marca-primaria); } .tt-etapa b { display: block; font-size: 12.5px; font-weight: 600; color: #5B6E90; } .tt-etapa.ativa b, .tt-etapa.feita b { font-weight: 700; color: var(--marca-primaria); } .tt-etapa i { display: block; font-style: normal; font-size: 11px; color: #8A96AB; margin-top: 2px; } .tt-trilho { flex: 1; height: 2px; background: #E1E8F4; margin: 12px 14px 0; } .tt-trilho.ativo { background: var(--marca-primaria); } .tt-dados-titular { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 10px; } .tt-dados-titular span { display: block; font-size: 11.5px; font-weight: 600; color: #5B6E90; } .tt-dados-titular b { display: block; font-size: 12.5px; font-weight: 600; color: #0B2A5E; margin-top: 3px; word-break: break-word; } .tt-direitos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; } .tt-direito input { position: absolute; opacity: 0; pointer-events: none; } .tt-direito-cx { display: block; border: 1px solid #E4EAF5; border-radius: 10px; padding: 12px 14px; cursor: pointer; transition: border-color .14s ease, background .14s ease; } .tt-direito-cx b { display: block; font-size: 13.5px; font-weight: 700; color: #0B2A5E; } .tt-direito-cx i { display: block; font-style: normal; font-size: 11.5px; line-height: 1.5; color: #5D7092; margin-top: 3px; } .tt-direito-cx:hover { border-color: #9FC0F7; } .tt-direito input:checked + .tt-direito-cx { border-color: var(--marca-primaria); background: #F5F9FF; box-shadow: 0 0 0 1px var(--marca-primaria) inset; } .tt-textarea { width: 100%; box-sizing: border-box; border: 1px solid #DFE6F2; border-radius: 9px; padding: 12px 14px; font-family: inherit; font-size: 13.5px; line-height: 1.55; color: #12275A; resize: vertical; } .tt-textarea:focus { outline: none; border-color: var(--marca-primaria); } .tt-prazo { display: flex; align-items: flex-start; gap: 12px; font-size: 12.5px; line-height: 1.55; color: #33445F; } /* ──────────────────────────────────────────────────────────────────────────── SHELL: barra lateral + barra superior. Porte do bloco `hasShell` de `Portal do Titular (DSAR).dc.html`. Medidas e cores copiadas do mockup uma a uma. ──────────────────────────────────────────────────────────────────────────── */ .tt-app { min-height: 100vh; display: flex; background: #fff; color: #0D2A5E; } .tt-side { width: 242px; flex: none; align-self: stretch; background: linear-gradient(180deg, #00214F 0%, #001336 100%); display: flex; flex-direction: column; padding: 0 0 20px; position: sticky; top: 0; height: 100vh; } .tt-side-logo { padding: 22px 0 6px; display: flex; justify-content: center; } .tt-side-logo img { width: 112px; height: auto; display: block; } .tt-side-marca { padding: 10px 0 16px 24px; font-size: 11.5px; font-weight: 600; letter-spacing: .07em; color: #A9BAD6; } .tt-nav { display: flex; flex-direction: column; gap: 3px; padding: 0 16px; } .tt-nav-item { display: flex; align-items: center; gap: 11px; border-radius: 9px; padding: 11px 9px; font-size: 14px; white-space: nowrap; cursor: pointer; text-decoration: none; color: #DCE5F5; font-weight: 500; } .tt-nav-item:hover { background: rgba(255, 255, 255, .07); color: #fff; } .tt-nav-item.on { background: #0D3FBF; color: #fff; font-weight: 600; box-shadow: 0 3px 10px rgba(13, 63, 191, .35); } .tt-nav-item.on:hover { background: #0D3FBF; } /* Separador do grupo de itens de quem trabalha na escola: sem ele, "Consultar titular" ficaria colado em "Fale com o DPO" e pareceria mais um item do titular. */ .tt-nav-secao { margin: 16px 0 6px; padding: 0 9px; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #7C90B4; } .tt-side-vazio { flex: 1; min-height: 90px; } .tt-side-badge { padding: 0 22px; } .tt-side-badge img { width: 100%; height: auto; display: block; border-radius: 10px; } .tt-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .tt-bar { height: 56px; flex: none; background: linear-gradient(90deg, #001133 0%, #0A3ECB 55%, #0B45E8 100%); display: flex; align-items: center; padding: 0 22px; gap: 15px; } .tt-bar-ic { width: 32px; height: 32px; flex: none; border-radius: 9px; background: rgba(255, 255, 255, .14); display: flex; align-items: center; justify-content: center; } .tt-bar-tit { font-size: 16.5px; font-weight: 600; color: #fff; } .tt-bar-lema { display: flex; align-items: center; gap: 10px; } .tt-bar-lema div { display: flex; flex-direction: column; gap: 1px; } .tt-bar-lema .l1 { font-size: 12px; font-weight: 700; color: #fff; } .tt-bar-lema .l2 { font-size: 10.5px; font-weight: 400; color: #C9D9F8; } .tt-bar-eu { display: flex; align-items: center; gap: 9px; background: #fff; border-radius: 20px; padding: 5px 11px 5px 5px; cursor: pointer; text-decoration: none; } .tt-bar-eu div { display: flex; flex-direction: column; } .tt-bar-eu .n { font-size: 12px; font-weight: 700; color: #12275A; } .tt-bar-eu .p { font-size: 10.5px; font-weight: 400; color: #7387A6; } .tt-bar-av { width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--marca-acento); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; } /* Voltar na barra: presente em toda tela interna. Fica ANTES do bloco de identidade para não competir com o "Sair" — trocar um pelo outro por engano custa a sessão. */ .tt-bar-voltar { display: flex; align-items: center; gap: 8px; flex: none; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .14); color: #fff; border-radius: 9px; padding: 7px 13px; font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; } .tt-bar-voltar:hover { background: rgba(255, 255, 255, .26); } .tt-bar-sair { width: 32px; height: 32px; flex: none; border-radius: 9px; background: rgba(255, 255, 255, .14); display: flex; align-items: center; justify-content: center; text-decoration: none; } .tt-bar-sair:hover { background: rgba(255, 255, 255, .28); } /* ── Chat do DPO flutuante ────────────────────────────────────────────────── */ .tt-chat-abrir { position: fixed; right: 26px; bottom: 26px; z-index: 89; width: 56px; height: 56px; border: 0; border-radius: 50%; background: var(--marca-primaria); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 22px rgba(13, 42, 94, .28); } .tt-chat-abrir:hover { background: #093AB9; } /* ═══ MESMO DESENHO DO CHAT DA ASSISTENTE (pedido do cliente, 24/08/2026) ═══════════════════ A conversa com o DPO tinha medidas próprias — outro tamanho, outro raio, outra sombra, outro avatar, outra tipografia. Duas janelas de conversa no mesmo produto, parecidas mas não iguais, é o tipo de diferença que ninguém sabe explicar e todo mundo percebe. Os valores abaixo são OS MESMOS de `.hm-chat` (wwwroot/css/home.css). Mexeu num, mexe no outro. ⚠️ O cabeçalho passou a usar `var(--marca-bar)` no lugar de um gradiente fixo `#0232B5→#0B45DD`. Não é só estética: a cor é por ESCOLA, e o gradiente cravado fazia a conversa do titular aparecer azul-padrão dentro de um portal personalizado com outra marca. ⚠️ `100dvh`, não `vh`: no celular a barra de endereço come o campo de digitação. */ .tt-chat { position: fixed; right: 22px; bottom: 22px; z-index: 90; width: min(390px, calc(100vw - 24px)); height: min(560px, calc(100dvh - 40px)); display: flex; flex-direction: column; min-height: 0; background: #fff; border: 1px solid #E4EAF5; border-radius: 15px; overflow: hidden; box-shadow: 0 18px 48px rgba(11, 42, 94, .26); font-family: 'Plus Jakarta Sans', system-ui, sans-serif; animation: ttChatIn .18s ease-out; } .tt-chat[hidden] { display: none; } @keyframes ttChatIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .tt-chat-topo { flex: none; background: var(--marca-bar); padding: 13px 15px; display: flex; align-items: center; gap: 11px; } /* Círculo, como o da assistente — era quadrado de canto arredondado. */ .tt-chat-topo img { width: 38px; height: 38px; flex: none; border-radius: 50%; object-fit: cover; object-position: top center; background: #fff; display: block; } .tt-chat-topo .nome { font-size: 14.5px; font-weight: 700; color: #fff; } .tt-chat-topo .estado { display: flex; align-items: center; gap: 6px; margin-top: 1px; font-size: 11px; font-weight: 500; color: #DCE6FA; } .tt-chat-topo .ponto { width: 6px; height: 6px; border-radius: 50%; background: #4ADE80; } .tt-chat-fechar { width: 28px; height: 28px; flex: none; border-radius: 7px; background: none; display: flex; align-items: center; justify-content: center; cursor: pointer; } .tt-chat-fechar:hover { background: rgba(255, 255, 255, .16); } .tt-chat-fio { flex: 1; min-height: 0; overflow-y: auto; background: #F7F9FE; padding: 15px; display: flex; flex-direction: column; gap: 9px; scrollbar-width: thin; scrollbar-color: #B9C6DA #EEF1F7; } .tt-chat-fio::-webkit-scrollbar { width: 10px; } .tt-chat-fio::-webkit-scrollbar-track { background: #EEF1F7; border-radius: 6px; } .tt-chat-fio::-webkit-scrollbar-thumb { background: #B9C6DA; border-radius: 6px; border: 2px solid #EEF1F7; } .tt-msg { display: flex; gap: 9px; align-items: flex-end; } .tt-msg img { width: 26px; height: 26px; flex: none; border-radius: 50%; object-fit: cover; display: block; } /* Balão com as medidas de `.hm-fala`: 84% de largura, raio 12 com o canto do lado "colado" em 4, fonte 13/1.55 e respiro 10×13. A hora é exclusiva daqui e fica, só que na mesma escala. */ .tt-msg-balao { max-width: 84%; background: #fff; border: 1px solid #E4EAF5; border-radius: 12px 12px 12px 4px; padding: 10px 13px; } .tt-msg-balao .txt { font-size: 13px; font-weight: 400; line-height: 1.55; color: #2B4368; overflow-wrap: anywhere; } .tt-msg-balao .hora { font-size: 10px; font-weight: 500; color: #A3AEC2; margin-top: 4px; } .tt-msg.eu { justify-content: flex-end; } .tt-msg.eu .tt-msg-balao { background: var(--marca-primaria); border: 0; border-radius: 12px 12px 4px 12px; } .tt-msg.eu .txt { color: #fff; } .tt-msg.eu .hora { color: #C3D6FB; } /* Rodapé com as medidas de `.hm-chat-pe`: campo com borda própria e botão 42×42 raio 9. Os atalhos são exclusivos daqui (a assistente não tem) e ficam acima, na mesma linguagem. */ .tt-chat-pe { flex: none; background: #fff; border-top: 1px solid #EFF2F7; padding: 11px 13px; } .tt-chat-atalhos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; } .tt-chat-atalho { border: 1px solid #C6D6F5; background: #fff; border-radius: 20px; padding: 5px 11px; font-family: inherit; font-size: 11px; font-weight: 600; color: var(--marca-primaria); cursor: pointer; } .tt-chat-atalho:hover { background: #EDF4FF; } .tt-chat-campo { display: flex; align-items: center; gap: 9px; } .tt-chat-campo input { flex: 1; min-width: 0; border: 1px solid #DFE6F2; border-radius: 9px; padding: 11px 13px; font-family: inherit; font-size: 13px; color: #12275A; background: #fff; outline: none; } .tt-chat-campo input:focus { border-color: var(--marca-primaria); } .tt-chat-enviar { width: 42px; height: 42px; flex: none; border-radius: 9px; background: var(--marca-primaria); display: flex; align-items: center; justify-content: center; cursor: pointer; } .tt-chat-enviar:hover { background: #093AB9; } .tt-chat-aviso { display: flex; align-items: center; gap: 7px; margin-top: 9px; } .tt-chat-aviso span { font-size: 11px; font-weight: 400; line-height: 1.45; color: #8A96AB; } /* Cartão verde de protocolo aberto pelo chat */ .tt-msg-proto { max-width: 88%; background: #F1FAF5; border: 1px solid #B7E3CB; border-radius: 11px 11px 11px 3px; padding: 11px 13px; } .tt-msg-proto .tit { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; color: #127C48; } .tt-msg-proto .cod { font-size: 15px; font-weight: 800; letter-spacing: .02em; color: #0B2A5E; margin-top: 7px; font-family: ui-monospace, Menlo, monospace; } .tt-msg-proto .txt { font-size: 11px; font-weight: 400; line-height: 1.5; color: #33445F; margin-top: 6px; } /* ⚠️ Sem `body.le-titular` na frente: o widget também abre na tela de entrada (`body.hm`), e ali o link do protocolo ficava com a cor de link do tema em vez do verde do cartão. A especificidade vem de `a.tt-msg-proto-link` mesmo, que já basta para vencer as regras de `a` das cascas. */ a.tt-msg-proto-link { display: inline-block; margin-top: 9px; font-size: 11.5px; font-weight: 700; color: #127C48; } a.tt-msg-proto-link:hover { text-decoration: underline; } /* ⚠️ NA TELA DE ENTRADA NÃO EXISTE A BOLHA FLUTUANTE. Ali a porta é o botão "Falar com o DPO" do cartão do Encarregado, à vista no meio da página; a bolha seria um segundo botão para a mesma coisa, no canto, cobrindo o rodapé. Mesma regra que já vale nas telas com botão próprio. */ body.hm .tt-chat-abrir { display: none !important; } @media (max-width: 980px) { .tt-app { flex-direction: column; } .tt-side { width: auto; height: auto; position: static; padding-bottom: 12px; } .tt-side-vazio, .tt-side-badge { display: none; } .tt-nav { flex-direction: row; overflow-x: auto; } .tt-bar { height: auto; padding: 10px 14px; flex-wrap: wrap; gap: 10px; } .tt-bar-lema { display: none; } /* Tela cheia no celular, exatamente como `.hm-chat` faz na mesma largura: meia tela numa conversa longa é pior que tela cheia, e o teclado virtual já come metade do que sobra. `100dvh` e não `vh` — com `vh`, a barra de endereço tapa o campo de digitação. */ .tt-chat { right: 0; bottom: 0; width: 100vw; height: 100dvh; border-radius: 0; border: 0; } } /* Botão voltar das telas de segundo nível. O menu lateral cobre a navegação principal, mas quem entra numa tela a partir de outra precisa do caminho de volta. */ body.le-titular a.tt-voltar { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; border: 1px solid #DFE6F2; background: #fff; color: #33445F; border-radius: 8px; padding: 8px 14px; font-size: 12.5px; font-weight: 600; text-decoration: none; } body.le-titular a.tt-voltar:hover { background: #F5F8FD; border-color: #C6D6F5; } /* ── Personalizar: busca de escola e logo. Prefixo `pz-` ──────────────────── */ .pz-buscar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 13px; } .pz-busca { flex: 1; min-width: 260px; display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid #E1E7F0; border-radius: 9px; padding: 10px 13px; } .pz-busca input { flex: 1; min-width: 0; border: 0; outline: none; font-family: inherit; font-size: 13px; color: #12275A; background: transparent; } .pz-logo { display: flex; align-items: center; gap: 14px; margin-top: 6px; } .pz-logo-atual { width: 118px; height: 54px; flex: none; border-radius: 9px; display: flex; align-items: center; justify-content: center; padding: 6px; box-sizing: border-box; } .pz-logo-atual img { max-width: 100%; max-height: 100%; display: block; } .pz-logo-atual i { font-style: normal; font-size: 11px; color: rgba(255, 255, 255, .8); } .pz-dica { display: block; font-size: 11.5px; color: #8A96AB; margin-top: 5px; } .pz-link { margin-top: 14px; font-size: 12px; color: #5B6E90; } /* ──────────────────────────────────────────────────────────────────────────── Gerar link por escola. Prefixo `gl-`. ──────────────────────────────────────────────────────────────────────────── */ .gl-corpo { padding: 20px 24px 26px; display: flex; flex-direction: column; gap: 13px; background: #F7F9FD; } .gl-topo { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; } .gl-h1 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -.02em; color: #0B2A5E; } .gl-sub { margin: 7px 0 0; font-size: 13.5px; line-height: 1.5; color: #4B5D80; max-width: 80ch; } .gl-filtros { display: flex; gap: 10px; flex-wrap: wrap; } .gl-busca { flex: 1; min-width: 240px; display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid #E1E7F0; border-radius: 9px; padding: 10px 13px; } .gl-busca input { flex: 1; min-width: 0; border: 0; outline: none; font-family: inherit; font-size: 13px; color: #12275A; background: transparent; } .gl-btn-claro, body.le-titular a.gl-btn-claro { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #DFE6F2; background: #fff; color: #33445F; border-radius: 9px; padding: 10px 14px; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; } .gl-btn-claro:hover, body.le-titular a.gl-btn-claro:hover { background: #F5F8FD; color: #33445F; } .gl-lista { display: flex; flex-direction: column; gap: 12px; } .gl-cartao { background: #fff; border: 1px solid #E9EDF4; border-radius: 12px; padding: 15px 17px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 1px 2px rgba(13, 42, 94, .04); } .gl-cartao.inativa { opacity: .68; } .gl-cab { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .gl-preview { width: 110px; height: 46px; flex: none; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 6px; box-sizing: border-box; } .gl-preview img { max-width: 100%; max-height: 100%; display: block; } .gl-sem-logo { font-size: 10.5px; color: rgba(255, 255, 255, .8); } .gl-cab b { display: block; font-size: 15px; font-weight: 700; color: #0B2A5E; } .gl-cab i { display: block; font-style: normal; font-size: 11.5px; color: #8A96AB; margin-top: 2px; } .gl-link { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .gl-link input { flex: 1; min-width: 240px; border: 1px solid #E1E7F0; border-radius: 9px; padding: 10px 13px; font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; color: #12275A; background: #FBFCFE; } .gl-copiar { border: 0; background: var(--marca-primaria); color: #fff; border-radius: 9px; padding: 10px 16px; font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; min-width: 90px; } .gl-copiar:hover { background: #093AB9; } .gl-copiar.ok { background: #17A05A; } body.le-titular a.gl-abrir { border: 1px solid #DFE6F2; border-radius: 9px; padding: 10px 14px; font-size: 12.5px; font-weight: 600; color: #33445F; text-decoration: none; } body.le-titular a.gl-abrir:hover { background: #F5F8FD; } .gl-html { font-size: 11.5px; color: #8A96AB; } .gl-html code { display: block; margin-top: 4px; background: #F5F8FD; border: 1px solid #EDF1F7; border-radius: 7px; padding: 8px 11px; font-size: 11.5px; color: #33445F; overflow-x: auto; white-space: nowrap; } .gl-p { margin: 0; font-size: 13px; color: #5B6E90; } .gl-nota { margin: 0; font-size: 11.5px; line-height: 1.5; color: #8A96AB; } /* ──────────────────────────────────────────────────────────────────────────── Escolas e instituições. Prefixo `em-`. ──────────────────────────────────────────────────────────────────────────── */ .em-corpo { padding: 20px 24px 26px; display: flex; flex-direction: column; gap: 13px; background: #F7F9FD; } .em-h1 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -.02em; color: #0B2A5E; } .em-sub { margin: 7px 0 0; font-size: 13.5px; line-height: 1.5; color: #4B5D80; max-width: 80ch; } .em-duas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; align-items: start; } .em-cartao { background: #fff; border: 1px solid #E9EDF4; border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 11px; box-shadow: 0 1px 2px rgba(13, 42, 94, .04); } .em-cartao h2 { margin: 0; font-size: 16px; font-weight: 700; color: #0B2A5E; } .em-p { margin: 0; font-size: 12.5px; line-height: 1.55; color: #5B6E90; } .em-p code { background: #F1F5FC; border-radius: 5px; padding: 1px 6px; font-size: 11.5px; color: #33445F; } .em-campo { display: flex; flex-direction: column; gap: 5px; } .em-campo > span:first-child { font-size: 12px; font-weight: 700; color: #1E3A6B; } .em-campo i { font-style: normal; font-weight: 500; color: #8A96AB; } .em-campo input { border: 1px solid #DFE6F2; border-radius: 9px; padding: 10px 13px; font-family: inherit; font-size: 13px; color: #12275A; background: #fff; } .em-campo input:focus { outline: none; border-color: var(--marca-primaria); } .em-msg { font-size: 11.5px; font-weight: 600; color: #C42D25; } .em-msg:empty { display: none; } .em-arquivo { font-size: 12.5px; color: #33445F; } .em-btn { align-self: flex-start; border: 0; background: var(--marca-primaria); color: #fff; border-radius: 9px; padding: 11px 18px; font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; } .em-btn:hover { background: #093AB9; } .em-btn.claro { background: #fff; color: #33445F; border: 1px solid #DFE6F2; } .em-btn.claro:hover { background: #F5F8FD; } .em-tabela { background: #fff; border: 1px solid #E9EDF4; border-radius: 12px; overflow-x: auto; } .em-linha { display: grid; grid-template-columns: minmax(0, 2fr) 170px 100px 110px 120px 220px; gap: 0 14px; align-items: center; padding: 12px 18px; border-top: 1px solid #F0F3F8; font-size: 12.5px; min-width: 1020px; } .em-cab { background: #FBFCFE; font-weight: 600; color: #5B6E90; border-top: 0; } .em-linha.inativa { opacity: .62; } .em-linha .nome { display: flex; align-items: center; gap: 10px; min-width: 0; } .em-linha .nome b { font-weight: 700; color: #12275A; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .em-cor { width: 10px; height: 26px; flex: none; border-radius: 4px; } .em-preview { width: 62px; height: 40px; flex: none; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 5px; box-sizing: border-box; } .em-preview img { max-width: 100%; max-height: 100%; display: block; } /* O link fica junto do nome, na mesma célula: é o que a escola vai copiar, então precisa estar à mão sem abrir outra tela. */ .em-link { display: flex; align-items: center; gap: 6px; margin-top: 5px; } .em-link input { flex: 1; min-width: 0; max-width: 320px; border: 1px solid #E1E7F0; border-radius: 7px; padding: 5px 9px; font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: #5B6E90; background: #FBFCFE; } .em-copiar { border: 0; background: var(--marca-primaria); color: #fff; border-radius: 7px; padding: 6px 11px; font-family: inherit; font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap; } .em-copiar:hover { background: #093AB9; } .em-copiar.ok { background: #17A05A; } body.le-titular a.em-btn-mini { display: inline-flex; align-items: center; border: 1px solid #DFE6F2; background: #fff; color: #33445F; border-radius: 8px; padding: 7px 12px; font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap; } body.le-titular a.em-btn-mini:hover { background: #F5F8FD; } .em-linha .cnpj { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: #5B6E90; } .em-linha .num { font-weight: 700; color: #33445F; } .em-tag { border-radius: 20px; padding: 3px 10px; font-size: 10.5px; font-weight: 700; } .em-tag.ok { background: #E7F6EE; color: #127C48; } .em-tag.off { background: #EEF2FA; color: #7A89A6; } .em-linha .acao { display: flex; gap: 7px; justify-content: flex-end; align-items: center; flex-wrap: wrap; } .em-btn-mini { border: 1px solid #DFE6F2; background: #fff; color: #33445F; border-radius: 8px; padding: 7px 12px; font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; } .em-btn-mini:hover { background: #F5F8FD; } .em-vazio { margin: 0; padding: 26px 18px; font-size: 13px; color: #8A96AB; } .em-nota { margin: 0; font-size: 11.5px; line-height: 1.5; color: #8A96AB; } @media (max-width: 1000px) { .em-duas { grid-template-columns: 1fr; } } /* ──────────────────────────────────────────────────────────────────────────── Lista de titulares. Prefixo `tl-`. ──────────────────────────────────────────────────────────────────────────── */ .tl-corpo { padding: 20px 24px 26px; display: flex; flex-direction: column; gap: 13px; background: #F7F9FD; } .tl-topo { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; } .tl-h1 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -.02em; color: #0B2A5E; } .tl-sub { margin: 7px 0 0; font-size: 13.5px; line-height: 1.5; color: #4B5D80; max-width: 82ch; } .tl-filtros { background: #fff; border: 1px solid #E9EDF4; border-radius: 12px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .tl-busca { flex: 1; min-width: 240px; display: flex; align-items: center; gap: 9px; border: 1px solid #E1E7F0; border-radius: 9px; padding: 10px 13px; } .tl-busca input { flex: 1; min-width: 0; border: 0; outline: none; font-family: inherit; font-size: 13px; color: #12275A; background: transparent; } .tl-sel, .tl-motivo select { border: 1px solid #E1E7F0; border-radius: 9px; padding: 10px 12px; background: #fff; font-family: inherit; font-size: 13px; color: #12275A; } .tl-btn-claro, body.le-titular a.tl-btn-claro { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #DFE6F2; background: #fff; color: #33445F; border-radius: 9px; padding: 10px 14px; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; } .tl-btn-claro:hover, body.le-titular a.tl-btn-claro:hover { background: #F5F8FD; color: #33445F; } .tl-tabela { background: #fff; border: 1px solid #E9EDF4; border-radius: 12px; overflow-x: auto; } /* A faixa do motivo fica no TOPO da tabela e destacada: é a condição para qualquer linha abrir. */ .tl-motivo { display: flex; align-items: center; gap: 12px; padding: 13px 18px; background: #FFF8F3; border-bottom: 1px solid #F5E0D3; flex-wrap: wrap; } .tl-motivo > span { font-size: 13px; font-weight: 700; color: #8A5A00; } .tl-motivo select { min-width: 300px; } .tl-motivo i { font-style: normal; font-size: 11.5px; color: #A07A45; } .tl-linha { display: grid; grid-template-columns: minmax(0, 1.6fr) 150px 140px 120px 150px 130px; gap: 0 14px; align-items: center; padding: 12px 18px; border-top: 1px solid #F0F3F8; font-size: 12.5px; min-width: 940px; } .tl-cab { background: #FBFCFE; font-weight: 600; color: #5B6E90; } .tl-linha .titular { display: flex; align-items: center; gap: 11px; min-width: 0; } .tl-linha .titular b { display: block; font-weight: 600; color: #12275A; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tl-linha .titular i { display: block; font-style: normal; font-size: 11.5px; color: #8A96AB; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tl-av { width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--marca-acento); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .tl-tag { background: #EEF2FA; color: #5B6E90; border-radius: 20px; padding: 3px 10px; font-size: 10.5px; font-weight: 700; } .tl-linha .cpf { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: #5B6E90; } .tl-linha .data { color: #33445F; } .tl-id { border-radius: 20px; padding: 3px 10px; font-size: 10.5px; font-weight: 700; } .tl-id.ok { background: #E7F6EE; color: #127C48; } .tl-id.pendente { background: #FEF7E8; color: #8A5A00; } .tl-linha .acao { display: flex; justify-content: flex-end; } .tl-btn-abrir { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #B9D0F8; background: #fff; color: var(--marca-primaria); border-radius: 8px; padding: 8px 13px; font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; } /* Virou LINK (era