/* ========================================================== CENSO IA - Plataforma de Inteligencia Pedagogica Tema claro institucional + modo escuro O tema e decidido pelo atributo data-tema no : "claro" | "escuro" | ausente = segue o sistema operacional. Um script no aplica antes da primeira pintura, para nao existir o "flash" de tema errado ao navegar. ========================================================== */ :root { /* Marca */ --marca: #0F1E3D; --marca-2: #1B3163; --marca-3: #2A4A8A; --destaque: #E63946; --destaque-2: #FF5A67; --destaque-fraco: rgba(230, 57, 70, .10); /* Superficies (claro) */ --fundo: #F4F6FA; --superficie: #FFFFFF; --superficie-2:#F8FAFC; --superficie-3:#EEF2F8; --borda: #E2E8F0; --borda-forte: #CBD5E1; /* Texto (claro) */ --texto: #0F1E3D; --texto-suave: #55657F; --texto-fraco: #8A9AB3; /* Semanticas */ --sucesso: #15803D; --sucesso-bg: #DCFCE7; --alerta: #B45309; --alerta-bg: #FEF3C7; --erro: #B91C1C; --erro-bg: #FEE2E2; --info: #1D4ED8; --info-bg: #DBEAFE; /* Escala de notas (1 a 5) */ --nota-baixa: #DC2626; --nota-media: #F59E0B; --nota-boa: #0EA5E9; --nota-otima: #16A34A; /* Menu lateral - navy nos dois temas */ --menu-fundo: #0F1E3D; --menu-fundo-2:#152847; --menu-texto: #A9B8D4; --menu-ativo: #FFFFFF; --menu-borda: rgba(255, 255, 255, .08); --raio: 14px; --raio-sm: 9px; --raio-xs: 6px; --sombra: 0 1px 2px rgba(15, 30, 61, .04), 0 4px 14px rgba(15, 30, 61, .06); --sombra-alta: 0 12px 34px rgba(15, 30, 61, .16); --menu-w: 262px; --menu-w-min: 74px; --transicao: .18s ease; } @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --fundo: #0A1120; --superficie: #111B2E; --superficie-2: #16223A; --superficie-3: #1C2B46; --borda: #243350; --borda-forte: #33456A; --texto: #E7EDF7; --texto-suave: #9FB0CC; --texto-fraco: #6F819F; --sucesso-bg: rgba(22, 163, 74, .16); --alerta-bg: rgba(245, 158, 11, .16); --erro-bg: rgba(220, 38, 38, .16); --info-bg: rgba(37, 99, 235, .16); --sucesso: #4ADE80; --alerta: #FBBF24; --erro: #F87171; --info: #60A5FA; --menu-fundo: #080E1A; --menu-fundo-2: #0E1728; --destaque-fraco: rgba(230, 57, 70, .16); --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px rgba(0, 0, 0, .3); --sombra-alta: 0 16px 40px rgba(0, 0, 0, .5); } } :root[data-tema="escuro"] { --fundo: #0A1120; --superficie: #111B2E; --superficie-2: #16223A; --superficie-3: #1C2B46; --borda: #243350; --borda-forte: #33456A; --texto: #E7EDF7; --texto-suave: #9FB0CC; --texto-fraco: #6F819F; --sucesso-bg: rgba(22, 163, 74, .16); --alerta-bg: rgba(245, 158, 11, .16); --erro-bg: rgba(220, 38, 38, .16); --info-bg: rgba(37, 99, 235, .16); --sucesso: #4ADE80; --alerta: #FBBF24; --erro: #F87171; --info: #60A5FA; --menu-fundo: #080E1A; --menu-fundo-2: #0E1728; --destaque-fraco: rgba(230, 57, 70, .16); --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px rgba(0, 0, 0, .3); --sombra-alta: 0 16px 40px rgba(0, 0, 0, .5); } /* ---------------- Base ---------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; background: var(--fundo); color: var(--texto); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: var(--marca-3); text-decoration: none; transition: color var(--transicao); } a:hover { color: var(--destaque); } h1, h2, h3, h4, h5 { line-height: 1.25; font-weight: 700; color: var(--texto); } h1 { font-size: 1.55rem; letter-spacing: -.02em; } h2 { font-size: 1.25rem; letter-spacing: -.01em; } h3 { font-size: 1.05rem; } h4 { font-size: .95rem; } img { max-width: 100%; height: auto; display: block; } :focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; border-radius: 4px; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--borda-forte); border-radius: 8px; } ::-webkit-scrollbar-thumb:hover { background: var(--texto-fraco); } /* ---------------- Layout ---------------- */ .layout { display: flex; min-height: 100vh; } .principal { flex: 1; margin-left: var(--menu-w); display: flex; flex-direction: column; min-width: 0; transition: margin-left .22s ease; } html.menu-recolhido .principal { margin-left: var(--menu-w-min); } .conteudo { padding: 26px 30px 60px; flex: 1; } /* ---------------- Menu lateral ---------------- */ .menu { width: var(--menu-w); background: var(--menu-fundo); position: fixed; inset: 0 auto 0 0; display: flex; flex-direction: column; z-index: 900; transition: width .22s ease, transform .22s ease; border-right: 1px solid var(--menu-borda); } html.menu-recolhido .menu { width: var(--menu-w-min); } .menu-marca { display: flex; align-items: center; gap: 12px; padding: 18px 18px 16px; border-bottom: 1px solid var(--menu-borda); min-height: 74px; } .menu-logo { width: 40px; height: 40px; border-radius: 11px; background: linear-gradient(135deg, var(--destaque), #B31E2B); display: grid; place-items: center; color: #fff; font-size: 17px; flex-shrink: 0; box-shadow: 0 4px 12px rgba(230, 57, 70, .35); } .menu-logo img { width: 40px; height: 40px; border-radius: 11px; object-fit: cover; } .menu-nome { min-width: 0; } .menu-nome strong { display: block; color: #fff; font-size: 1.02rem; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .menu-nome span { display: block; font-size: .66rem; color: var(--menu-texto); text-transform: uppercase; letter-spacing: .1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .menu-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 12px 10px 20px; } .menu-nav::-webkit-scrollbar { width: 5px; } .menu-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); } .menu-secao { font-size: .63rem; text-transform: uppercase; letter-spacing: .13em; color: rgba(255,255,255,.34); font-weight: 700; padding: 16px 13px 6px; } .menu-item { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 13px; border-radius: var(--raio-sm); color: var(--menu-texto); font-size: .89rem; font-weight: 500; margin-bottom: 2px; background: none; border: 0; cursor: pointer; text-align: left; transition: background var(--transicao), color var(--transicao); } .menu-item > i:first-child { width: 19px; text-align: center; font-size: 15px; flex-shrink: 0; } .menu-item:hover { background: var(--menu-fundo-2); color: #fff; } .menu-item.ativo { background: var(--destaque); color: #fff; box-shadow: 0 4px 14px rgba(230,57,70,.32); } .menu-item.ativo > i:first-child { color: #fff; } .menu-rotulo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .menu-badge { margin-left: auto; background: var(--destaque); color: #fff; font-size: .68rem; font-weight: 700; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: grid; place-items: center; } .menu-item.ativo .menu-badge { background: rgba(255,255,255,.24); } .menu-seta { margin-left: auto; font-size: 11px; opacity: .55; transition: transform .18s ease; } .menu-grupo.aberto > .menu-item .menu-seta { transform: rotate(90deg); } .menu-grupo.aberto > .menu-item { color: #fff; } .menu-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .2s ease; } .menu-grupo.aberto > .menu-sub { grid-template-rows: 1fr; } /* O .menu-sub-inner nao e decorativo: a animacao usa grid-template-rows 0fr -> 1fr, e isso so dimensiona a PRIMEIRA linha do grid. Com varios filhos diretos, os demais viram linhas implicitas "auto" e o submenu fica permanentemente aberto. */ .menu-sub-inner { min-height: 0; overflow: hidden; padding-left: 14px; } .menu-sub-titulo { display: none; } .menu-filho { font-size: .83rem; padding: 8px 12px; } .menu-filho > i:first-child { font-size: 13px; width: 17px; } .menu-recolher { margin: 0 10px 8px; width: calc(100% - 20px); color: rgba(255,255,255,.45); font-size: .82rem; } .menu-recolher:hover { color: #fff; } .menu-rodape { padding: 12px 18px; border-top: 1px solid var(--menu-borda); font-size: .68rem; color: rgba(255,255,255,.32); white-space: nowrap; overflow: hidden; } /* Modo recolhido: icones apenas, com submenu flutuante */ html.menu-recolhido .menu-rotulo, html.menu-recolhido .menu-badge, html.menu-recolhido .menu-seta, html.menu-recolhido .menu-secao, html.menu-recolhido .menu-nome, html.menu-recolhido .menu-rodape { display: none; } html.menu-recolhido .menu-item { justify-content: center; padding: 11px 0; } html.menu-recolhido .menu-marca { justify-content: center; padding: 18px 0 16px; } /* Flyout do menu recolhido. Precisa ser `fixed`, nao `absolute`: .menu-nav e um container de rolagem (overflow-y: auto) e recorta qualquer descendente posicionado dentro dele. Nao adianta tentar liberar so a horizontal - pela especificacao do CSS, `overflow-x: visible` combinado com `overflow-y: auto` e computado como `auto`. A unica saida e escapar do contexto de recorte. A visibilidade e controlada por JS (classe .flyout-aberto), nao por CSS puro (:hover/:focus-within): um elemento fixed "teletransportado" para fora da caixa visual do grupo depende do navegador manter o estado de hover so pela ancestralidade no DOM, e qualquer microperda desse hover durante o trajeto do mouse fecha o menu antes do clique registrar. Com JS, abrir/fechar tem um atraso curto que tolera o cruzamento do vao e so fecha de verdade quando o ponteiro realmente sai de ambos (icone e submenu) - ver assets/js/menu.js. O calculo de left/top tambem e feito ali, a partir do retangulo real do icone, para nao depender de --menu-w-min bater exatamente com a largura renderizada. */ html.menu-recolhido .menu-grupo { position: relative; } html.menu-recolhido .menu-sub { position: fixed; left: 0; top: 0; grid-template-rows: 1fr; min-width: 222px; max-height: calc(100vh - 24px); overflow-y: auto; background: var(--menu-fundo-2); border: 1px solid var(--menu-borda); border-radius: var(--raio-sm); box-shadow: var(--sombra-alta); padding: 8px; opacity: 0; pointer-events: none; transition: opacity .14s ease; z-index: 1200; } html.menu-recolhido .menu-grupo.flyout-aberto .menu-sub { opacity: 1; pointer-events: auto; } /* Dentro do flyout nao ha recorte: o submenu ja tem a propria rolagem. */ html.menu-recolhido .menu-sub-inner { padding-left: 0; overflow: visible; } html.menu-recolhido .menu-sub .menu-rotulo { display: inline; } html.menu-recolhido .menu-sub-titulo { display: block; color: #fff; font-size: .74rem; font-weight: 700; padding: 4px 12px 8px; text-transform: uppercase; letter-spacing: .08em; } /* Dica dos itens sem submenu. Pelo mesmo motivo do flyout, nao pode ser um ::after do proprio item - seria recortado pela rolagem do .menu-nav. E um unico elemento no , reposicionado a cada hover pelo menu.js. */ .menu-dica { position: fixed; z-index: 1250; background: var(--menu-fundo-2); color: #fff; padding: 6px 11px; border-radius: var(--raio-xs); font-size: .78rem; white-space: nowrap; box-shadow: var(--sombra-alta); border: 1px solid var(--menu-borda); pointer-events: none; opacity: 0; transform: translateX(-6px); transition: opacity .12s ease, transform .12s ease; } .menu-dica.visivel { opacity: 1; transform: translateX(0); } /* ---------------- Barra superior ---------------- */ .topo { position: sticky; top: 0; z-index: 800; display: flex; align-items: center; gap: 14px; padding: 12px 30px; background: color-mix(in srgb, var(--superficie) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--borda); min-height: 66px; } .topo-menu-mobile { display: none; } .topo-titulo { min-width: 0; } .topo-titulo h1 { font-size: 1.18rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topo-titulo span { font-size: .76rem; color: var(--texto-fraco); } .topo-acoes { margin-left: auto; display: flex; align-items: center; gap: 9px; } .botao-icone { width: 38px; height: 38px; border-radius: var(--raio-sm); border: 1px solid var(--borda); background: var(--superficie); color: var(--texto-suave); display: grid; place-items: center; cursor: pointer; position: relative; transition: all var(--transicao); } .botao-icone:hover { background: var(--superficie-3); color: var(--texto); border-color: var(--borda-forte); } .botao-icone .ponto { position: absolute; top: 6px; right: 6px; min-width: 16px; height: 16px; padding: 0 4px; background: var(--destaque); color: #fff; border-radius: 8px; font-size: .62rem; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--superficie); } /* Seletor de area pedagogica */ .seletor-area { display: flex; align-items: center; gap: 9px; padding: 6px 12px 6px 8px; border: 1px solid var(--borda); border-radius: 999px; background: var(--superficie); cursor: pointer; font-size: .84rem; font-weight: 600; color: var(--texto); transition: all var(--transicao); } .seletor-area:hover { border-color: var(--marca-3); } .seletor-area i:first-child { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: var(--destaque-fraco); color: var(--destaque); } /* Avatar do usuario */ .usuario-topo { display: flex; align-items: center; gap: 10px; padding-left: 6px; } .avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--marca-2), var(--marca-3)); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .82rem; flex-shrink: 0; overflow: hidden; } .avatar img { width: 100%; height: 100%; object-fit: cover; } .avatar.pequeno { width: 30px; height: 30px; font-size: .7rem; } .avatar.grande { width: 76px; height: 76px; font-size: 1.5rem; } .usuario-topo .dados { line-height: 1.25; } .usuario-topo strong { font-size: .84rem; display: block; } .usuario-topo span { font-size: .7rem; color: var(--texto-fraco); } /* ---------------- Cartoes ---------------- */ .cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); overflow: hidden; margin-bottom: 18px; } .cartao-topo { display: flex; align-items: center; gap: 12px; padding: 15px 19px; border-bottom: 1px solid var(--borda); background: var(--superficie-2); } .cartao-topo h3 { display: flex; align-items: center; gap: 9px; font-size: .98rem; } .cartao-topo h3 i { color: var(--destaque); font-size: .92rem; } .cartao-topo .acoes { margin-left: auto; display: flex; gap: 8px; align-items: center; } .cartao-corpo { padding: 19px; } .cartao-corpo.justo { padding: 0; } .cartao-rodape { padding: 13px 19px; border-top: 1px solid var(--borda); background: var(--superficie-2); font-size: .82rem; color: var(--texto-suave); } /* Grades */ .grade { display: grid; gap: 18px; } .grade-2 { grid-template-columns: repeat(2, 1fr); } .grade-3 { grid-template-columns: repeat(3, 1fr); } .grade-4 { grid-template-columns: repeat(4, 1fr); } .grade-auto { grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); } .grade-larga { grid-template-columns: 2fr 1fr; align-items: start; } /* ---------------- Indicadores numericos ---------------- */ .metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 15px; margin-bottom: 20px; } .metrica { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 17px 19px; box-shadow: var(--sombra); position: relative; overflow: hidden; } .metrica::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--destaque); } .metrica.info::before { background: var(--info); } .metrica.sucesso::before { background: var(--sucesso); } .metrica.alerta::before { background: var(--alerta); } .metrica.neutra::before { background: var(--borda-forte); } .metrica .rotulo { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--texto-fraco); font-weight: 700; display: flex; align-items: center; gap: 7px; } .metrica .valor { font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; margin-top: 5px; line-height: 1.1; } .metrica .nota { font-size: .76rem; color: var(--texto-suave); margin-top: 3px; } .metrica .valor small { font-size: .95rem; font-weight: 600; color: var(--texto-fraco); } /* ---------------- Botoes ---------------- */ .botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 17px; border-radius: var(--raio-sm); border: 1px solid transparent; font-size: .87rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: all var(--transicao); white-space: nowrap; text-decoration: none; } .botao:disabled, .botao.desativado { opacity: .5; cursor: not-allowed; pointer-events: none; } .botao-principal { background: var(--destaque); color: #fff; } .botao-principal:hover { background: var(--destaque-2); color: #fff; box-shadow: 0 5px 16px rgba(230,57,70,.32); } .botao-marca { background: var(--marca); color: #fff; } .botao-marca:hover { background: var(--marca-2); color: #fff; } .botao-contorno { background: var(--superficie); border-color: var(--borda-forte); color: var(--texto-suave); } .botao-contorno:hover { border-color: var(--marca-3); color: var(--marca-3); background: var(--superficie); } .botao-suave { background: var(--superficie-3); color: var(--texto); } .botao-suave:hover { background: var(--borda); color: var(--texto); } .botao-perigo { background: transparent; border-color: color-mix(in srgb, var(--erro) 45%, transparent); color: var(--erro); } .botao-perigo:hover { background: var(--erro); color: #fff; border-color: var(--erro); } .botao-sucesso { background: var(--sucesso); color: #fff; } .botao-sucesso:hover { filter: brightness(1.08); color: #fff; } .botao-pequeno { padding: 6px 12px; font-size: .78rem; } .botao-grande { padding: 13px 24px; font-size: .95rem; } .botao-bloco { width: 100%; } /* Botao que dispara a IA - visualmente distinto, porque gasta cota */ .botao-ia { background: linear-gradient(135deg, var(--marca-2), var(--marca-3)); color: #fff; border: 0; position: relative; } .botao-ia:hover { color: #fff; box-shadow: 0 6px 20px rgba(42,74,138,.38); } .botao-ia i { color: #FFD166; } .botao-ia.processando { pointer-events: none; opacity: .75; } .botao-ia.processando i { animation: girar 1s linear infinite; } @keyframes girar { to { transform: rotate(360deg); } } .grupo-botoes { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; } /* ---------------- Formularios ---------------- */ .campo { margin-bottom: 15px; } .campo label { display: block; font-size: .8rem; font-weight: 600; color: var(--texto-suave); margin-bottom: 6px; } .campo label .obrigatorio { color: var(--destaque); } input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="time"], input[type="tel"], input[type="url"], input[type="search"], select, textarea { width: 100%; padding: 10px 13px; background: var(--superficie); border: 1px solid var(--borda-forte); border-radius: var(--raio-sm); color: var(--texto); font-size: .89rem; font-family: inherit; transition: border-color var(--transicao), box-shadow var(--transicao); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--marca-3); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca-3) 16%, transparent); } input::placeholder, textarea::placeholder { color: var(--texto-fraco); } input:disabled, select:disabled, textarea:disabled { background: var(--superficie-3); cursor: not-allowed; } textarea { min-height: 96px; resize: vertical; line-height: 1.6; } select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238A9AB3'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; padding-right: 34px; } .campo-erro input, .campo-erro select, .campo-erro textarea { border-color: var(--erro); } .mensagem-erro { font-size: .76rem; color: var(--erro); margin-top: 5px; display: block; } .ajuda { font-size: .76rem; color: var(--texto-fraco); margin-top: 5px; display: block; } .linha-campos { display: grid; gap: 15px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } /* Interruptor */ .interruptor { display: inline-flex; align-items: center; gap: 11px; cursor: pointer; user-select: none; } .interruptor input { position: absolute; opacity: 0; width: 0; height: 0; } .interruptor .trilho { width: 44px; height: 25px; border-radius: 999px; background: var(--borda-forte); position: relative; transition: background var(--transicao); flex-shrink: 0; } .interruptor .trilho::after { content: ''; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform var(--transicao); } .interruptor input:checked + .trilho { background: var(--sucesso); } .interruptor input:checked + .trilho::after { transform: translateX(19px); } .interruptor input:focus-visible + .trilho { outline: 2px solid var(--destaque); outline-offset: 2px; } .interruptor .texto { font-size: .86rem; font-weight: 500; } /* Caixa de selecao e radio em lista */ .opcao-lista { display: flex; align-items: center; gap: 11px; padding: 10px 13px; border: 1px solid var(--borda); border-radius: var(--raio-sm); cursor: pointer; transition: all var(--transicao); margin-bottom: 7px; background: var(--superficie); } .opcao-lista:hover { border-color: var(--marca-3); background: var(--superficie-2); } .opcao-lista input { accent-color: var(--destaque); width: 17px; height: 17px; } .opcao-lista.marcada { border-color: var(--destaque); background: var(--destaque-fraco); } /* ---------------- Tabelas ---------------- */ .tabela-rolagem { overflow-x: auto; } table.tabela { width: 100%; border-collapse: collapse; font-size: .87rem; } table.tabela th { text-align: left; padding: 11px 15px; font-size: .69rem; text-transform: uppercase; letter-spacing: .07em; color: var(--texto-fraco); font-weight: 700; background: var(--superficie-2); border-bottom: 1px solid var(--borda); white-space: nowrap; } table.tabela td { padding: 12px 15px; border-bottom: 1px solid var(--borda); vertical-align: middle; } table.tabela tbody tr:last-child td { border-bottom: 0; } table.tabela tbody tr { transition: background var(--transicao); } table.tabela tbody tr:hover { background: var(--superficie-2); } table.tabela .direita { text-align: right; } table.tabela .centro { text-align: center; } .celula-pessoa { display: flex; align-items: center; gap: 11px; min-width: 0; } .celula-pessoa .nome { font-weight: 600; } .celula-pessoa .sub { font-size: .75rem; color: var(--texto-fraco); } /* ---------------- Etiquetas ---------------- */ .etiqueta { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .01em; background: var(--superficie-3); color: var(--texto-suave); white-space: nowrap; } .etiqueta.sucesso { background: var(--sucesso-bg); color: var(--sucesso); } .etiqueta.alerta { background: var(--alerta-bg); color: var(--alerta); } .etiqueta.erro { background: var(--erro-bg); color: var(--erro); } .etiqueta.info { background: var(--info-bg); color: var(--info); } .etiqueta.destaque{ background: var(--destaque-fraco); color: var(--destaque); } .etiqueta.laudo { background: #EDE9FE; color: #6D28D9; } :root[data-tema="escuro"] .etiqueta.laudo { background: rgba(139, 92, 246, .18); color: #C4B5FD; } @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .etiqueta.laudo { background: rgba(139, 92, 246, .18); color: #C4B5FD; } } /* Notas por faixa */ .nota { display: inline-grid; place-items: center; min-width: 34px; height: 26px; padding: 0 8px; border-radius: var(--raio-xs); font-weight: 800; font-size: .8rem; color: #fff; } .nota-vazia { background: var(--superficie-3); color: var(--texto-fraco); } .nota-baixa { background: var(--nota-baixa); } .nota-media { background: var(--nota-media); } .nota-boa { background: var(--nota-boa); } .nota-otima { background: var(--nota-otima); } /* ---------------- Barras de indicador ---------------- */ .indicadores-lista { display: flex; flex-direction: column; gap: 13px; } .indicador-linha { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; } .indicador-linha .nome { font-size: .85rem; font-weight: 600; display: flex; align-items: center; gap: 8px; } .indicador-linha .nome i { color: var(--texto-fraco); width: 16px; text-align: center; } .indicador-linha .valor { font-size: .85rem; font-weight: 800; } .indicador-linha .barra { grid-column: 1 / -1; height: 7px; border-radius: 999px; background: var(--superficie-3); overflow: hidden; } .indicador-linha .barra span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--marca-3), var(--destaque)); transition: width .5s ease; } /* ---------------- Escala 1 a 5 para avaliar ---------------- */ .escala { display: flex; gap: 6px; } .escala input { position: absolute; opacity: 0; width: 0; height: 0; } .escala label { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--borda-forte); border-radius: var(--raio-sm); font-weight: 700; font-size: .88rem; cursor: pointer; color: var(--texto-suave); transition: all var(--transicao); margin: 0; } .escala label:hover { border-color: var(--marca-3); color: var(--marca-3); } .escala input:checked + label { background: var(--destaque); border-color: var(--destaque); color: #fff; } .escala input:focus-visible + label { outline: 2px solid var(--destaque); outline-offset: 2px; } /* ---------------- Analise da IA ---------------- */ .painel-ia { border: 1px solid var(--borda); border-left: 3px solid var(--marca-3); border-radius: var(--raio); background: var(--superficie-2); padding: 18px 20px; } .painel-ia .cabecalho { display: flex; align-items: center; gap: 10px; font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-fraco); font-weight: 700; margin-bottom: 12px; } .painel-ia .cabecalho i { color: var(--marca-3); } .painel-ia .conteudo-ia p { margin-bottom: 11px; font-size: .9rem; line-height: 1.68; } .painel-ia .conteudo-ia p:last-child { margin-bottom: 0; } .painel-ia .rodape-ia { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--borda); font-size: .74rem; color: var(--texto-fraco); display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .aviso-ia { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border-radius: var(--raio-sm); background: var(--info-bg); color: var(--info); font-size: .81rem; line-height: 1.5; } .aviso-ia i { margin-top: 2px; } .selo-desatualizada { display: inline-flex; align-items: center; gap: 6px; background: var(--alerta-bg); color: var(--alerta); padding: 4px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700; } /* ---------------- Mensagens ---------------- */ .aviso { display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px; border-radius: var(--raio-sm); font-size: .87rem; margin-bottom: 17px; border: 1px solid transparent; } .aviso i { margin-top: 2px; font-size: 1rem; } .aviso.sucesso { background: var(--sucesso-bg); color: var(--sucesso); border-color: color-mix(in srgb, var(--sucesso) 28%, transparent); } .aviso.erro { background: var(--erro-bg); color: var(--erro); border-color: color-mix(in srgb, var(--erro) 28%, transparent); } .aviso.alerta { background: var(--alerta-bg); color: var(--alerta); border-color: color-mix(in srgb, var(--alerta) 28%, transparent); } .aviso.info { background: var(--info-bg); color: var(--info); border-color: color-mix(in srgb, var(--info) 28%, transparent); } /* Notificacao flutuante */ .toasts { position: fixed; right: 22px; bottom: 22px; z-index: 2000; display: flex; flex-direction: column; gap: 10px; max-width: 380px; } .toast { background: var(--superficie); border: 1px solid var(--borda); border-left: 3px solid var(--marca-3); border-radius: var(--raio-sm); box-shadow: var(--sombra-alta); padding: 13px 16px; display: flex; gap: 11px; align-items: flex-start; font-size: .86rem; animation: entrar .22s ease; } .toast.sucesso { border-left-color: var(--sucesso); } .toast.erro { border-left-color: var(--erro); } .toast.alerta { border-left-color: var(--alerta); } .toast .fechar { margin-left: auto; background: none; border: 0; color: var(--texto-fraco); cursor: pointer; font-size: 1rem; } @keyframes entrar { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* ---------------- Vazio ---------------- */ .vazio { text-align: center; padding: 48px 24px; color: var(--texto-fraco); } .vazio i { font-size: 2.4rem; opacity: .35; margin-bottom: 14px; display: block; } .vazio h3 { color: var(--texto-suave); font-size: 1rem; margin-bottom: 6px; } .vazio p { font-size: .87rem; max-width: 420px; margin: 0 auto 16px; } /* ---------------- Filtros ---------------- */ .filtros { display: flex; gap: 11px; flex-wrap: wrap; align-items: flex-end; padding: 15px 19px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); margin-bottom: 18px; box-shadow: var(--sombra); } .filtros .campo { margin: 0; min-width: 165px; flex: 1; } .filtros .campo.estreito { flex: 0 0 155px; } /* ---------------- Paginacao ---------------- */ .paginacao { display: flex; gap: 6px; justify-content: center; align-items: center; padding: 18px 0; flex-wrap: wrap; } .paginacao a, .paginacao span { min-width: 36px; height: 36px; padding: 0 11px; display: grid; place-items: center; border: 1px solid var(--borda); border-radius: var(--raio-sm); font-size: .84rem; font-weight: 600; color: var(--texto-suave); background: var(--superficie); } .paginacao a:hover { border-color: var(--marca-3); color: var(--marca-3); } .paginacao .atual { background: var(--destaque); border-color: var(--destaque); color: #fff; } .paginacao .desativado { opacity: .4; pointer-events: none; } /* ---------------- Abas ---------------- */ .abas { display: flex; gap: 3px; border-bottom: 1px solid var(--borda); margin-bottom: 20px; overflow-x: auto; } .abas a, .abas button { padding: 11px 17px; font-size: .86rem; font-weight: 600; color: var(--texto-suave); border: 0; background: none; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; transition: all var(--transicao); font-family: inherit; } .abas a:hover, .abas button:hover { color: var(--texto); } .abas .ativa { color: var(--destaque); border-bottom-color: var(--destaque); } /* ---------------- Linha do tempo ---------------- */ .linha-tempo { position: relative; padding-left: 30px; } .linha-tempo::before { content: ''; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: var(--borda); } .linha-tempo-item { position: relative; padding-bottom: 20px; } .linha-tempo-item::before { content: ''; position: absolute; left: -26px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--superficie); border: 2px solid var(--borda-forte); } .linha-tempo-item.aula::before { border-color: var(--info); } .linha-tempo-item.avaliacao::before { border-color: var(--sucesso); } .linha-tempo-item.ocorrencia::before { border-color: var(--alerta); } .linha-tempo-item .data { font-size: .73rem; color: var(--texto-fraco); font-weight: 600; } .linha-tempo-item .titulo { font-size: .88rem; font-weight: 600; margin: 2px 0 3px; } .linha-tempo-item .detalhe { font-size: .82rem; color: var(--texto-suave); } /* ---------------- Grafico de barras simples (sem biblioteca) ---------------- */ .grafico-barras { display: flex; align-items: flex-end; gap: 10px; height: 168px; padding: 8px 0; } .grafico-barras .coluna { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; } .grafico-barras .haste { width: 100%; max-width: 44px; background: linear-gradient(180deg, var(--destaque), #B31E2B); border-radius: 6px 6px 0 0; min-height: 4px; transition: height .5s ease; position: relative; } .grafico-barras .haste[data-valor]:hover::after { content: attr(data-valor); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: var(--marca); color: #fff; padding: 3px 8px; border-radius: 5px; font-size: .72rem; white-space: nowrap; margin-bottom: 5px; } .grafico-barras .rotulo { font-size: .69rem; color: var(--texto-fraco); text-align: center; white-space: nowrap; } /* ---------------- Modal ---------------- */ .modal-fundo { position: fixed; inset: 0; z-index: 1500; background: rgba(9, 17, 32, .55); backdrop-filter: blur(3px); display: none; align-items: center; justify-content: center; padding: 22px; } .modal-fundo.aberto { display: flex; } .modal { background: var(--superficie); border-radius: var(--raio); box-shadow: var(--sombra-alta); width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; animation: entrar .2s ease; } .modal.largo { max-width: 860px; } .modal-topo { display: flex; align-items: center; gap: 12px; padding: 17px 21px; border-bottom: 1px solid var(--borda); } .modal-topo h3 { font-size: 1.02rem; } .modal-topo .fechar { margin-left: auto; background: none; border: 0; font-size: 1.15rem; color: var(--texto-fraco); cursor: pointer; } .modal-corpo { padding: 21px; } .modal-rodape { padding: 15px 21px; border-top: 1px solid var(--borda); display: flex; gap: 9px; justify-content: flex-end; background: var(--superficie-2); } /* ---------------- Login ---------------- */ .tela-login { min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr; background: var(--fundo); } .login-arte { background: radial-gradient(circle at 22% 18%, rgba(230,57,70,.28), transparent 46%), radial-gradient(circle at 78% 82%, rgba(42,74,138,.42), transparent 52%), var(--marca); color: #fff; padding: 56px 60px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; } .login-arte h1 { color: #fff; font-size: 2.5rem; letter-spacing: -.035em; margin-bottom: 12px; } .login-arte .tag { display: inline-flex; align-items: center; gap: 9px; font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 700; color: var(--destaque-2); margin-bottom: 20px; } .login-arte .tag::before { content: ''; width: 26px; height: 2px; background: var(--destaque); } .login-arte p { color: rgba(255,255,255,.72); font-size: 1rem; max-width: 430px; line-height: 1.7; } .login-arte ul { list-style: none; margin-top: 34px; display: flex; flex-direction: column; gap: 13px; } .login-arte li { display: flex; gap: 12px; align-items: flex-start; color: rgba(255,255,255,.82); font-size: .9rem; } .login-arte li i { color: var(--destaque-2); margin-top: 3px; } .login-arte .rodape { position: absolute; left: 60px; bottom: 34px; font-size: .74rem; color: rgba(255,255,255,.4); } .login-form { display: flex; align-items: center; justify-content: center; padding: 40px 30px; } .login-caixa { width: 100%; max-width: 390px; } .login-caixa .marca { display: flex; align-items: center; gap: 12px; margin-bottom: 30px; } .login-caixa h2 { font-size: 1.5rem; margin-bottom: 6px; } .login-caixa .sub { color: var(--texto-suave); font-size: .88rem; margin-bottom: 26px; } /* ---------------- Utilitarios ---------------- */ .flex { display: flex; } .entre { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .centro-v { display: flex; align-items: center; gap: 10px; } .crescer { flex: 1; } .esconder { display: none !important; } .suave { color: var(--texto-suave); } .fraco { color: var(--texto-fraco); } .pequeno { font-size: .8rem; } .menor { font-size: .74rem; } .forte { font-weight: 700; } .centralizado { text-align: center; } .direita { text-align: right; } .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .sem-quebra { white-space: nowrap; } .cabecalho-pagina { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; } .cabecalho-pagina .texto { flex: 1; min-width: 220px; } .cabecalho-pagina h1 { margin-bottom: 3px; } .cabecalho-pagina p { color: var(--texto-suave); font-size: .88rem; } .fundo-mobile { display: none; } /* ---------------- Impressao ---------------- */ @media print { .menu, .topo, .toasts, .botao, .filtros, .paginacao { display: none !important; } .principal { margin-left: 0; } .conteudo { padding: 0; } .cartao { border: 1px solid #ddd; box-shadow: none; break-inside: avoid; } body { background: #fff; color: #000; font-size: 12px; } } /* ---------------- Responsivo ---------------- */ @media (max-width: 1180px) { .grade-4 { grid-template-columns: repeat(2, 1fr); } .grade-larga { grid-template-columns: 1fr; } } @media (max-width: 960px) { .tela-login { grid-template-columns: 1fr; } .login-arte { display: none; } .grade-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 860px) { .menu { transform: translateX(-100%); width: var(--menu-w) !important; } .menu.aberto { transform: translateX(0); box-shadow: var(--sombra-alta); } html.menu-recolhido .menu .menu-rotulo, html.menu-recolhido .menu .menu-secao, html.menu-recolhido .menu .menu-nome, html.menu-recolhido .menu .menu-rodape { display: block; } html.menu-recolhido .menu .menu-item { justify-content: flex-start; padding: 10px 13px; } /* Na gaveta do celular o menu abre sempre por inteiro, entao o estado "recolhido" guardado no localStorage do desktop nao pode transformar o submenu em flyout flutuante - ele volta a ser accordion normal. */ html.menu-recolhido .menu-sub { position: static; grid-template-rows: 0fr; max-height: none; overflow: hidden; opacity: 1; pointer-events: auto; transform: none; background: none; border: 0; box-shadow: none; padding: 0; } html.menu-recolhido .menu-grupo.aberto > .menu-sub { grid-template-rows: 1fr; } html.menu-recolhido .menu-sub-inner { padding-left: 14px; overflow: hidden; } html.menu-recolhido .menu-sub-titulo { display: none; } .menu-dica { display: none; } .principal, html.menu-recolhido .principal { margin-left: 0; } .topo { padding: 11px 16px; } .topo-menu-mobile { display: grid; } .conteudo { padding: 18px 16px 50px; } .fundo-mobile.ativo { display: block; position: fixed; inset: 0; background: rgba(9,17,32,.5); z-index: 890; } .grade-2, .grade-3, .grade-4 { grid-template-columns: 1fr; } .usuario-topo .dados { display: none; } .seletor-area .rotulo-area { display: none; } .toasts { left: 16px; right: 16px; bottom: 16px; max-width: none; } } @media (max-width: 520px) { .metricas { grid-template-columns: repeat(2, 1fr); gap: 11px; } .metrica { padding: 13px 14px; } .metrica .valor { font-size: 1.5rem; } .cabecalho-pagina { flex-direction: column; align-items: stretch; } .filtros { padding: 13px; } .filtros .campo { min-width: 100%; } }