/* ============================================================ SEM PILHA — a casca do Gaba: tokens, navegação, cartões, formulários, botões, listas, scanner e análise. Nada daqui alcança o papel: o bloco .folha-a4 e o @media print vêm depois e continuam intocados. ============================================================ */ :root { /* a conta velha continua valendo: quem lê style.css no app.js acha os mesmos nomes */ --primary: #047857; --primary-vivo: #10B981; --bg: #F8FAFC; --card-bg: #ffffff; --text: #0F172A; --border: #E2E8F0; --success: #047857; --danger: #B91C1C; --branco: #ffffff; --grafite: #0F172A; --tinta: #1E293B; --tinta-2: #475569; --tinta-3: #64748B; --linha: #E2E8F0; --linha-2: #CBD5E1; --menta: #10B981; --menta-2: #34D399; --menta-fundo: #ECFDF5; --menta-linha: #A7F3D0; --menta-grafite: #064E3B; --laranja: #F59E0B; --laranja-fundo: #FFFBEB; --laranja-linha: #FDE68A; --laranja-escuro: #B45309; --perigo-fundo: #FEF2F2; --perigo-linha: #FCA5A5; --raio-s: 10px; --raio-m: 16px; --raio-l: 24px; --raio-p: 999px; --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px; --sombra-1: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.05); --sombra-2: 0 4px 6px -2px rgba(15,23,42,.06), 0 12px 24px -6px rgba(15,23,42,.12); --sombra-3: 0 10px 30px -8px rgba(15,23,42,.45), 0 4px 10px -4px rgba(15,23,42,.25); --sombra-menta: 0 0 0 4px rgba(16,185,129,.18); --curva: cubic-bezier(.2,.8,.2,1); --toque: 48px; --ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } * { box-sizing: border-box; margin: 0; padding: 0; font-family: system-ui, -apple-system, sans-serif; } [hidden] { display: none !important; } body { background-color: var(--bg); color: var(--text); padding-bottom: 40px; line-height: 1.5; } :focus-visible { outline: 3px solid var(--menta); outline-offset: 2px; } /* --- topo: marca, filtro de escola e o pingo de conexão --- */ .navbar { background: var(--card-bg); padding: 14px 20px; display: flex; justify-content: space-between; align-items: center; gap: var(--e3); border-bottom: 1px solid var(--linha); box-shadow: var(--sombra-1); position: sticky; top: 0; z-index: 20; } .logo h1 { font-size: 1.3rem; font-weight: 800; letter-spacing: -.03em; color: var(--grafite); white-space: nowrap; } .logo span { color: var(--primary); font-weight: 700; } .badge { padding: 5px 12px; border-radius: var(--raio-p); font-size: .75rem; font-weight: 800; border: 1px solid transparent; white-space: nowrap; } .badge-on { background-color: var(--menta-fundo); color: var(--primary); border-color: var(--menta-linha); } .badge-off { background-color: var(--laranja-fundo); color: var(--laranja-escuro); border-color: var(--laranja-linha); } .conta-selo { position: relative; flex: none; } .conta-selo .badge { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; max-width: 240px; } .conta-selo .badge-on::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px var(--menta-linha); } .conta-selo .badge::after { content: ""; flex: none; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .14s; } .selo-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .conta-selo .badge[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); } .selo-painel { position: absolute; right: 0; top: calc(100% + 10px); width: min(300px, calc(100vw - 24px)); background: var(--card-bg); border: 1px solid var(--linha); border-radius: var(--raio-m); box-shadow: var(--sombra-2); padding: var(--e4); z-index: 30; text-align: left; } .selo-painel[hidden], .selo-painel [hidden] { display: none; } .selo-painel form, .selo-painel > div { display: flex; flex-direction: column; gap: var(--e2); } .selo-painel label { font-size: .76rem; font-weight: 800; color: var(--tinta-2); } .selo-painel input { width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 12px; font-size: .95rem; } .selo-painel .btn-primary, .selo-painel .btn-ghost { margin-top: var(--e1); width: 100%; } .selo-dica { margin: 0; font-size: .85rem; color: var(--tinta-2); } .selo-email { font-size: .85rem; color: var(--tinta-2); overflow-wrap: anywhere; } .selo-erro { margin: 0; padding: 8px 10px; border-radius: var(--raio-s); background: var(--laranja-fundo); border: 1px solid var(--laranja-linha); color: var(--laranja-escuro); font-size: .82rem; } .container { max-width: 960px; margin: var(--e5) auto; padding: 0 15px; } .escola-filtro { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 0 1 auto; } .escola-filtro[hidden] { display: none; } /* --- faixa de abas: a mesma pílula do protótipo --- */ .tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 6px; margin-bottom: var(--e5); background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio-p); box-shadow: var(--sombra-1); -webkit-overflow-scrolling: touch; } .tabs::-webkit-scrollbar { display: none; } .tab-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 16px; border: 1px solid transparent; background: transparent; border-radius: var(--raio-p); cursor: pointer; white-space: nowrap; font-weight: 800; font-size: .9rem; color: var(--tinta-2); transition: background .16s var(--curva), color .16s var(--curva); } .tab-btn:hover { background: var(--bg); color: var(--grafite); } .tab-btn.active { background: var(--grafite); color: #fff; border-color: var(--grafite); box-shadow: var(--sombra-1); } .tab-btn.tab-highlight { border-color: var(--menta-linha); color: var(--primary); background: var(--menta-fundo); } .tab-btn.tab-highlight.active { background: var(--grafite); border-color: var(--grafite); color: #fff; } .tab-content { display: none; animation: fadeIn .26s var(--curva); } .tab-content.active { display: block; } .tab-btn svg { width: 19px; height: 19px; flex: none; } /* a faixa de dentro: as 4 telas de cadastro, só visível quando o Bastidor está aberto */ .tabs-bastidor { margin: -12px 0 var(--e4); background: var(--bg); } .tabs-bastidor .tab-btn { min-height: 40px; padding: 0 14px; font-size: .84rem; } @media (max-width: 720px) { /* no celular a navegação desce para o polegar; o que resta no topo é a faixa de dentro */ body { padding-bottom: 96px; } .tabs-polegar { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); z-index: 50; margin: 0; width: calc(100vw - 20px); max-width: 420px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; overflow: visible; padding: 5px; background: rgba(15, 23, 42, .94); border-color: transparent; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: var(--sombra-3); } /* o icone sai da frente para a palavra caber inteira: no polegar o que se le e o nome da tela */ .tabs-polegar .tab-btn { color: #94A3B8; padding: 0 4px; font-size: .78rem; justify-content: center; } .tabs-polegar .tab-btn svg { display: none; } .tabs-polegar .tab-btn:hover { background: transparent; color: #fff; } .tabs-polegar .tab-btn.active { background: var(--menta); color: #04291F; border-color: transparent; } .tabs-polegar .tab-btn.tab-highlight { background: transparent; color: var(--menta-2); border-color: transparent; } .tabs-bastidor { margin-top: 0; } } h2 { font-size: 1.12rem; font-weight: 800; letter-spacing: -.02em; } h2 + .text-muted { margin-top: 4px; } /* --- cartões de conta --- */ .grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--e3); margin-top: var(--e4); } /* o mesmo cartão de número da Análise: valor em grafite, rótulo embaixo, alinhado à esquerda */ .card { background: var(--card-bg); padding: 14px 16px; border-radius: var(--raio-m); border: 1px solid var(--linha); box-shadow: var(--sombra-1); } .card h3 { font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; color: var(--grafite); font-variant-numeric: tabular-nums; } .card p { margin-top: 2px; font-size: .82rem; font-weight: 700; color: var(--tinta-3); } .card-accent { background: var(--menta-fundo); border-color: var(--menta-linha); } .card-accent h3 { color: var(--primary); } .card-atencao { background: var(--laranja-fundo); border-color: var(--laranja-linha); } .card-atencao h3 { color: var(--laranja-escuro); } .grid-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .card-falta { background: #fef3c7; border-color: #f59e0b; } .card-falta h3 { color: #92400e; } .scan-nao-lidos { margin-top: var(--e3); padding: 10px 12px; background: var(--cinza-fundo); border: 1px solid var(--cinza-linha); border-radius: var(--raio-m); font-size: .84rem; } .scan-nao-lidos h4 { margin: 0 0 6px; font-size: .88rem; font-weight: 700; color: var(--grafite); } .scan-nao-lidos ul { margin: 0; padding-left: 18px; } .scan-nao-lidos li { margin-bottom: 3px; cursor: pointer; color: var(--primary); } .scan-nao-lidos li:hover { text-decoration: underline; } @media (max-width: 480px) { .grid-cards-3 { gap: 8px; } .grid-cards-3 .card { padding: 12px; } .grid-cards-3 .card h3 { font-size: 1.4rem; } .grid-cards-3 .card p { font-size: .74rem; line-height: 1.3; } .grid-cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-cards-4 .card { padding: 10px; } .grid-cards-4 .card h3 { font-size: 1.2rem; } .grid-cards-4 .card p { font-size: .7rem; } } /* --- central de alívio: as duas contas que devolvem tempo --- */ .banner-aviso { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; background: var(--laranja-fundo); border: 1px solid var(--laranja-linha); border-radius: var(--raio-m); margin: var(--e3) 0; } .banner-aviso svg { flex: none; margin-top: 1px; } .banner-aviso p { font-size: .84rem; font-weight: 700; color: var(--laranja-escuro); line-height: 1.4; } .banner-aviso strong { font-weight: 800; } .banner-aviso .btn-ghost { margin-top: 6px; font-size: .78rem; padding: 6px 14px; min-height: 32px; } .backup-ok { background: var(--menta-fundo); border-color: var(--menta-linha); color: var(--primary); } .alivio-lema { display: flex; align-items: center; gap: var(--e3); margin: var(--e2) 0 0; padding: 12px 16px 12px 12px; background: linear-gradient(100deg, var(--menta-fundo) 0%, var(--branco) 80%); border: 1px solid var(--menta-linha); border-radius: var(--raio-l); box-shadow: var(--sombra-1); font-size: 1.02rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.35; color: var(--grafite); } .alivio-lema mark { padding: 0 3px; color: inherit; background: linear-gradient(transparent 56%, rgba(16, 185, 129, .32) 56%); border-radius: 2px; } .alivio-lema-icone { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--raio-m); background: var(--grafite); box-shadow: 0 6px 16px -8px rgba(15, 23, 42, .6); } .alivio-lema-icone svg { overflow: visible; } .alivio-lema-icone .f3 { fill: var(--primary); } .alivio-lema-icone .f2 { fill: var(--menta); } .alivio-lema-icone .f1 rect { fill: #fff; } .alivio-lema-icone .f1 path { stroke: var(--tinta-3); stroke-width: 1.6; stroke-linecap: round; } .alivio-lema-icone .f1 { transform-box: fill-box; transform-origin: 50% 50%; animation: folha-voa 3.6s var(--curva) .8s 3; } @keyframes folha-voa { 0%, 30% { transform: none; opacity: 1; } 58% { transform: translate(10px, -13px) rotate(16deg); opacity: 0; } 59% { transform: translateY(5px); opacity: 0; } 82%, 100% { transform: none; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .alivio-lema-icone .f1 { animation: none; } } .alivio { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--e3); margin-top: var(--e4); } .alivio-grande { background: var(--grafite); color: #fff; border-radius: var(--raio-l); padding: var(--e5); box-shadow: var(--sombra-2); } .alivio-grande h3 { font-size: 2.4rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: var(--menta-2); font-variant-numeric: tabular-nums; } .alivio-grande p { margin: 4px 0 6px; font-size: .95rem; font-weight: 800; letter-spacing: -.01em; } .alivio-grande small { display: block; font-size: .76rem; color: #94A3B8; line-height: 1.45; } .alivio-tempo { background: var(--laranja-fundo); border: 1px solid var(--laranja-linha); color: var(--grafite); } .alivio-tempo h3 { color: var(--laranja-escuro); } .alivio-tempo small { color: var(--tinta-3); } .alivio-barra { display: block; height: 8px; border-radius: 4px; background: var(--linha); overflow: hidden; margin-top: 8px; } .alivio-barra i { display: block; height: 100%; background: var(--menta); border-radius: 4px; } .alivio-falta { margin-left: auto; font-size: .8rem; font-weight: 800; color: var(--laranja-escuro); } /* --- formulários: campo com alvo de polegar e anel de menta --- */ .form-container { background: var(--card-bg); padding: var(--e5); border-radius: var(--raio-l); border: 1px solid var(--linha); margin-top: var(--e4); margin-bottom: var(--e5); box-shadow: var(--sombra-1); } .form-container form { display: flex; flex-direction: column; gap: var(--e3); } input, select, button { padding: 12px; border-radius: var(--raio-s); border: 1px solid var(--linha-2); font-size: 1rem; color: var(--text); background: var(--branco); accent-color: var(--primary); } .form-container input, .form-container select, .form-container textarea { width: 100%; min-height: var(--toque); padding: 11px 13px; font-size: .95rem; transition: border-color .14s, box-shadow .14s; } .form-container input:focus, .form-container select:focus, .form-container textarea:focus { border-color: var(--menta); box-shadow: var(--sombra-menta); outline: none; } .form-container input::placeholder, .form-container textarea::placeholder { color: #94A3B8; } /* o input de arquivo nao e um campo de texto: ele e uma porta, nao uma caixa */ input[type="file"] { min-height: 0; padding: 0; border: 0; background: transparent; font-size: .88rem; color: var(--tinta-2); } input[type="file"]::file-selector-button { margin: 0 10px 0 0; padding: 10px 16px; border: 1px solid var(--linha-2); border-radius: var(--raio-p); background: var(--branco); color: var(--grafite); font: inherit; font-weight: 700; cursor: pointer; } input[type="file"]::file-selector-button:hover { background: #F1F5F9; border-color: var(--tinta-3); } textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: var(--raio-s); border: 1px solid var(--linha-2); font: inherit; font-size: .9rem; resize: vertical; } button:disabled { opacity: .45; cursor: not-allowed; } button:not(:disabled) { cursor: pointer; } .imp-resumo { margin: 12px 0 6px; font-size: .9rem; } .imp-problemas { margin: 0 0 10px; padding: 10px 12px 10px 28px; border-radius: var(--raio-s); background: var(--laranja-fundo); border: 1px solid var(--laranja-linha); color: var(--laranja-escuro); font-size: .84rem; } .imp-tabela { max-height: 320px; overflow: auto; border: 1px solid var(--linha); border-radius: var(--raio-m); } .imp-tabela table { width: 100%; border-collapse: collapse; font-size: .82rem; } .imp-tabela th, .imp-tabela td { padding: 7px 9px; border-bottom: 1px solid var(--linha); text-align: left; white-space: nowrap; } .imp-tabela th { position: sticky; top: 0; background: var(--bg); font-size: .76rem; font-weight: 800; color: var(--tinta-2); } .imp-fora { margin: 0 0 12px; border: 1px solid var(--linha); border-radius: var(--raio-m); padding: 0 12px; } .imp-fora > summary { padding: 9px 0; font-size: .84rem; font-weight: 700; color: var(--tinta-2); cursor: pointer; } .imp-fora[open] > summary { border-bottom: 1px solid var(--linha); margin-bottom: 6px; } .imp-fora-tabela { width: 100%; border-collapse: collapse; font-size: .8rem; } .imp-fora-tabela th, .imp-fora-tabela td { padding: 6px 8px; border-bottom: 1px solid var(--linha); text-align: left; } .imp-fora-tabela th { font-size: .74rem; font-weight: 800; color: var(--tinta-2); } .imp-fora .cad-acoes { padding: 8px 0 10px; } .impt-painel { border-color: var(--menta-linha); animation: fadeIn .2s var(--curva); } .impt-titulo { margin: 0; font-size: 1rem; font-weight: 800; letter-spacing: -.01em; color: var(--grafite); } .impt-titulo em { font-style: normal; color: var(--primary); } .impt-tabela { max-height: 380px; margin-top: 4px; } .impt-tabela th, .impt-tabela td { vertical-align: middle; } .impt-tabela .impt-marca { width: 30px; padding-right: 0; } .impt-marca input { width: 18px; height: 18px; margin: 0; accent-color: var(--primary); } .impt-nome { width: 100%; min-width: 120px; max-width: 440px; min-height: 36px; padding: 6px 9px; border: 1px solid var(--linha-2); border-radius: var(--raio-s); font: inherit; font-size: .88rem; background: var(--branco); } .impt-nome:focus { border-color: var(--menta); box-shadow: var(--sombra-menta); outline: none; } .impt-tabela .impt-num { text-align: right; font-variant-numeric: tabular-nums; } @media (max-width: 520px) { .impt-tabela th, .impt-tabela td { padding: 7px 5px; } .impt-tabela .impt-marca { padding-left: 9px; } .impt-tabela .badge { padding: 4px 8px; } .impt-nome { min-width: 0; } } .gabarito-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; margin: 10px 0; } .gabarito-grid div { display: grid; grid-template-columns: 32px minmax(52px, 1fr); align-items: center; gap: 8px; } .gabarito-grid label { display: block; font-size: .76rem; font-weight: 800; color: var(--tinta-3); } .gabarito-grid select { min-width: 0; padding: 8px; width: 100%; font-weight: 800; text-align: center; } /* --- botões: menta para o caminho bom, contorno para o resto --- */ .btn-primary { background: var(--primary); color: white; border: 1px solid var(--primary); font-weight: 800; border-radius: var(--raio-p); min-height: var(--toque); padding: 0 20px; box-shadow: var(--sombra-1); transition: transform .14s var(--curva), box-shadow .14s, background .14s; } .btn-primary:hover:not(:disabled) { background: #036B4C; border-color: #036B4C; transform: translateY(-1px); box-shadow: var(--sombra-2); } .btn-primary:active:not(:disabled) { transform: translateY(0) scale(.985); } .btn-success { background: var(--grafite); color: white; border: 1px solid var(--grafite); font-weight: 800; border-radius: var(--raio-p); min-height: var(--toque); padding: 0 20px; box-shadow: var(--sombra-1); transition: transform .14s var(--curva), box-shadow .14s, background .14s; } .btn-success:hover:not(:disabled) { background: #1E293B; border-color: #1E293B; transform: translateY(-1px); box-shadow: var(--sombra-2); } .btn-success:active:not(:disabled) { transform: translateY(0) scale(.985); } .btn-danger { background: transparent; color: var(--danger); border: 1px solid var(--perigo-linha); font-weight: 800; border-radius: var(--raio-p); min-height: 44px; padding: 0 16px; transition: background .14s, border-color .14s; } .btn-danger:hover:not(:disabled) { background: var(--perigo-fundo); border-color: var(--danger); } /* --- tabelas e texto de apoio --- */ .data-table { font-size: .9rem; } .data-table th { font-size: .78rem; font-weight: 800; color: var(--tinta-2); } .data-table th, .data-table td { padding: 12px; border-bottom: 1px solid var(--linha); } .text-muted { color: var(--tinta-3); } code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; background: #E2E8F0; color: var(--grafite); padding: 1px 5px; border-radius: 6px; } #lista-escolas-cad:empty { display: none; } .gaba-dica { position: fixed; z-index: 90; box-sizing: border-box; padding: 15px 18px; border-radius: var(--raio-m); background: var(--grafite); color: var(--branco); border: 1px solid var(--menta); box-shadow: var(--sombra-3); pointer-events: auto; text-align: left; animation: dicaAparece .18s var(--curva); } .gaba-dica strong { display: block; color: var(--menta-linha); font-size: .9rem; font-weight: 800; line-height: 1.4; } .gaba-dica p { margin: 6px 0 0; font-size: .84rem; line-height: 1.55; } .gaba-dica::after { content: ""; position: absolute; left: var(--dica-seta); bottom: -6px; width: 10px; height: 10px; background: var(--grafite); border-right: 1px solid var(--menta); border-bottom: 1px solid var(--menta); transform: translateX(-50%) rotate(45deg); } .gaba-dica.dica-abaixo::after { bottom: auto; top: -6px; transform: translateX(-50%) rotate(225deg); } @keyframes dicaAparece { from { opacity: 0; transform: translateY(5px) scale(.97); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .gaba-dica { animation: none; } } @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } /* --- painel de cadernos (uiCaderno) --- */ .cad-linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; } .cad-linha label, .field label { display: block; font-size: .76rem; font-weight: 800; color: var(--tinta-2); margin-bottom: 6px; } .cad-linha select, .cad-linha input, .field input, .field select { width: 100%; min-height: 44px; padding: 9px 10px; border: 1px solid var(--linha-2); border-radius: var(--raio-s); font-size: .95rem; } .cad-linha select:focus, .cad-linha input:focus, .field input:focus, .field select:focus { border-color: var(--menta); box-shadow: var(--sombra-menta); outline: none; } .cad-check { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 6px 0; font-size: .9rem; } .cad-check input { width: 20px; height: 20px; accent-color: var(--primary); flex: none; } .cad-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: var(--e3); } .cad-acoes button { padding: 10px 16px; border-radius: var(--raio-p); min-height: 44px; } .cad-acoes .cad-check { margin: 0 0 0 4px; } .btn-ghost { background: var(--branco); border: 1px solid var(--linha-2); color: var(--grafite); cursor: pointer; padding: 10px 16px; border-radius: var(--raio-p); font-weight: 700; transition: background .14s, border-color .14s; } .btn-ghost:hover:not(:disabled) { background: #F1F5F9; border-color: var(--tinta-3); } a.btn-ghost { display: inline-flex; align-items: center; text-decoration: none; font: inherit; line-height: 1.2; } .cad-status { margin-top: var(--e3); font-size: .85rem; color: var(--tinta-2); background: var(--bg); border: 1px solid var(--linha); border-radius: var(--raio-m); padding: 12px 14px; min-height: 20px; } .cad-status.erro { background: var(--perigo-fundo); border-color: var(--perigo-linha); color: var(--danger); } .cad-lista { max-height: 180px; overflow: auto; border: 1px solid var(--linha); border-radius: var(--raio-m); margin-top: 10px; } .cad-lista div { padding: 6px 10px; border-bottom: 1px solid var(--linha); font-size: .85rem; } .cad-lista.vazia { border: 0; border-radius: 0; overflow: visible; } .cad-lista.vazia .cad-status { margin-top: 0; } /* --- revisao da prova: gabarito, peso e descritor por questao (uiCaderno) --- */ .cad-avisos { margin-top: var(--e3); padding: 12px 14px; border-radius: var(--raio-m); background: var(--laranja-fundo); border: 1px solid var(--laranja-linha); color: var(--laranja-escuro); font-size: .84rem; } .cad-avisos h3 { margin: 0 0 6px; font-size: .9rem; } .cad-avisos ul { margin: 0; padding-left: 18px; } .cad-nota { margin: 10px 0 0; font-size: .82rem; color: var(--tinta-3); } .cad-cabecalho { margin-top: var(--e3); border: 1px solid var(--linha); border-radius: var(--raio-m); padding: 12px 14px; } .cad-cabecalho summary { cursor: pointer; font-size: .85rem; font-weight: 800; color: var(--primary); } .q-editor { max-height: 420px; overflow: auto; border: 1px solid var(--linha); border-radius: var(--raio-m); margin-top: 6px; } .q-rev { display: grid; grid-template-columns: 34px minmax(120px, 1fr) 78px 62px minmax(90px, 1fr) minmax(90px, 1fr); gap: 6px; align-items: center; padding: 5px 8px; border-bottom: 1px solid var(--linha); font-size: .8rem; } .q-rev.ruim { background: var(--perigo-fundo); } .q-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--tinta-2); } .q-rev input, .q-rev select { padding: 5px 6px; border: 1px solid var(--linha-2); border-radius: 6px; width: 100%; font-size: .8rem; } .q-cab { position: sticky; top: 0; background: var(--bg); font-weight: 800; color: var(--tinta-3); z-index: 1; } @media (max-width: 720px) { .q-rev { grid-template-columns: 32px 1fr 70px 56px; } .q-rev .q-desc, .q-rev .q-bncc { grid-column: 2 / -1; } } /* --- o seletor de descritor (uiCaderno): flutua sobre a pagina inteira, porque dentro do .q-editor ele nasceria cortado pelo overflow do proprio editor --- */ .q-pick { position: fixed; z-index: 60; background: var(--branco); border: 1px solid var(--linha-2); border-radius: var(--raio-s); box-shadow: var(--sombra-2); overflow: auto; font-size: .78rem; color: var(--tinta-2); } .q-pick-item { padding: 6px 10px; border-bottom: 1px solid var(--linha); cursor: pointer; } .q-pick-item.ativo { background: var(--menta-fundo); } .q-pick-item b { font-size: .8rem; color: var(--tinta); } .q-pick-item span { display: block; font-size: .68rem; letter-spacing: .04em; color: var(--tinta-3); } .q-pick-item p { margin: 2px 0 0; } .q-pick-mais { padding: 7px 10px; color: var(--tinta-3); font-style: italic; } .q-pick-foot { position: sticky; bottom: 0; background: var(--bg); border-top: 1px solid var(--linha); padding: 4px 10px; font-size: .68rem; color: var(--tinta-3); } /* --- analise de item e distratores (app.js + analise.js) --- */ .ana-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 12px 0 8px; } .ana-card { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio-m); padding: 12px 14px; box-shadow: var(--sombra-1); } .ana-card h3 { margin: 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; color: var(--grafite); font-variant-numeric: tabular-nums; } .ana-card p { margin: 2px 0 0; font-size: .8rem; font-weight: 700; color: var(--tinta-3); } .ana-detalhe { display: block; margin-top: 4px; font-size: .72rem; color: var(--tinta-3); } .ana-avisos { margin: 0 0 10px; padding-left: 18px; font-size: .82rem; color: var(--laranja-escuro); } .ana-tabela { overflow-x: auto; border: 1px solid var(--linha); border-radius: var(--raio-m); } .ana-tabela table { min-width: 900px; font-size: .82rem; } .ana-tabela tr.sinalizada { background: var(--laranja-fundo); } .ana-num { font-weight: 800; color: var(--tinta); } .ana-pc { white-space: nowrap; } .ana-barra { display: inline-block; width: 70px; height: 8px; border-radius: 4px; background: var(--linha); overflow: hidden; vertical-align: middle; margin-right: 6px; } .ana-barra i { display: block; height: 100%; background: var(--menta); } .ana-distr { display: inline-block; margin: 1px 4px 1px 0; padding: 2px 7px; border: 1px solid var(--linha); border-radius: var(--raio-p); background: var(--bg); font-size: .76rem; color: var(--tinta); } .ana-distr.forte { background: var(--perigo-fundo); border-color: var(--perigo-linha); color: var(--danger); font-weight: 800; } .ana-ped { max-width: 190px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--tinta-2); } .ana-chip { display: inline-block; margin: 1px 4px 1px 0; padding: 2px 8px; border-radius: var(--raio-p); background: var(--laranja-fundo); border: 1px solid var(--laranja-linha); color: var(--laranja-escuro); font-size: .74rem; font-weight: 700; } .ana-ok { color: var(--primary); font-size: .76rem; font-weight: 700; } .ana-nivel { display: inline-block; margin: 1px 4px 1px 0; padding: 2px 8px; border-radius: var(--raio-p); background: var(--menta-fundo); border: 1px solid var(--menta-linha); color: var(--menta-grafite); font-size: .74rem; font-weight: 700; white-space: nowrap; } .ana-nivel b { font-variant-numeric: tabular-nums; } .ana-niveis { white-space: nowrap; } .ana-parte { padding: 1px 6px; border: 1px solid var(--linha-2); border-radius: var(--raio-p); background: var(--bg); color: var(--tinta-2); font-size: .7rem; font-weight: 700; white-space: nowrap; } .ab-cortes { margin: 10px 0 0; padding: 8px 12px; border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--branco); } .ab-cortes summary { cursor: pointer; font-size: .84rem; font-weight: 800; color: var(--primary); } .ab-cortes .ajuda { margin: 6px 0 0; } .cortes-linha { display: grid; grid-template-columns: minmax(120px, 1fr) 110px; gap: 6px; max-width: 420px; margin-top: 6px; } .cortes-linha input { width: 100%; padding: 5px 6px; border: 1px solid var(--linha-2); border-radius: 6px; font-size: .8rem; } .cortes-linha.cortes-cab { margin-top: 10px; } .cortes-cab span { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3); } .cortes-aviso { font-size: .78rem; color: var(--tinta-3); } @media (max-width: 900px) { .ana-cards { grid-template-columns: repeat(2, 1fr); } } /* --- scanner continuo (uiScanner) --- */ .scan-area { position: relative; margin-top: var(--e4); background: var(--grafite); border-radius: var(--raio-m); overflow: hidden; box-shadow: var(--sombra-2); } .scan-area video { display: block; width: 100%; height: auto; max-height: 62vh; object-fit: contain; } .scan-area canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; } .scan-dica { position: absolute; left: 12px; bottom: 10px; color: var(--linha); font-size: .8rem; font-weight: 700; text-shadow: 0 1px 2px #000; } .scan-ultimas { margin-top: var(--e4); display: flex; flex-direction: column; gap: 6px; } .scan-item { display: grid; grid-template-columns: 42px 1fr 130px 110px 1fr; gap: 8px; align-items: center; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio-m); padding: 8px 10px; font-size: .85rem; } .scan-item.duvida { background: var(--laranja-fundo); border-color: var(--laranja-linha); } @media (max-width: 720px) { .scan-item { grid-template-columns: 36px 1fr 1fr; } } /* ========================================= IMPRESSAO: somente o que esta em #print-root vai para o papel ========================================= */ /* --- listas de turmas e provas (app.js) --- */ .app-status { display: none; margin: 0 0 14px; padding: 10px 12px; border-radius: var(--raio-m); background: var(--bg); border: 1px solid var(--linha); font-size: .88rem; } .app-status.mostra { display: block; } .app-status.ok { background: var(--menta-fundo); border-color: var(--menta-linha); color: var(--primary); } .app-status.erro { background: var(--perigo-fundo); border-color: var(--perigo-linha); color: var(--danger); } .card-list { display: flex; flex-direction: column; gap: 10px; margin-top: var(--e4); } .card-list > .cad-status { margin-top: 0; } .item-lista { background: var(--card-bg); border: 1px solid var(--linha); border-radius: var(--raio-m); padding: 14px 16px; box-shadow: var(--sombra-1); } .item-lista.so-aparelho { border-style: dashed; border-color: var(--laranja-linha); background: var(--laranja-fundo); } .item-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .item-cab strong { font-size: 1rem; letter-spacing: -.01em; } .item-cab > span { font-size: .82rem; color: var(--tinta-2); } .item-acoes { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; } .item-acoes button { padding: 7px 12px; font-size: .82rem; border-radius: var(--raio-p); } .item-lista details { margin-top: 10px; } .item-lista summary { cursor: pointer; font-size: .85rem; font-weight: 700; color: var(--primary); } .linha-aluno { display: grid; grid-template-columns: 44px 1fr auto; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--linha); font-size: .85rem; } .linha-aluno:last-child { border-bottom: none; } button.pequeno { padding: 4px 9px; font-size: .75rem; border-radius: var(--raio-p); } .so-aparelho-tag { background: var(--laranja-fundo); color: var(--laranja-escuro); border: 1px solid var(--laranja-linha); border-radius: var(--raio-p); padding: 1px 8px; font-size: .7rem; font-weight: 800; } /* --- seletor de escola do topo: botão do app no lugar do select nativo --- */ .escola-botao { display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; max-width: 46vw; min-height: 40px; padding: 4px 28px 4px 10px; border: 1px solid var(--linha-2); border-radius: var(--raio-s); background: var(--bg); position: relative; text-align: left; line-height: 1.2; } .escola-botao::after { content: ""; position: absolute; right: 12px; top: 50%; width: 6px; height: 6px; border-right: 2px solid var(--tinta-2); border-bottom: 2px solid var(--tinta-2); transform: translateY(-70%) rotate(45deg); } .escola-botao-rotulo { font-size: .7rem; font-weight: 700; color: var(--tinta-3); } .escola-botao-nome { font-size: .85rem; font-weight: 800; color: var(--grafite); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* --- o caminho do bastidor: 1 Turmas, 2 Provas, 3 Cadernos --- */ .caminho-n { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--linha); color: var(--tinta-2); font-size: .72rem; font-weight: 800; } .tab-btn.active .caminho-n { background: var(--menta); color: #04291F; } .tabs-caminho .tab-btn { gap: 6px; } .tabs-caminho .tab-ajustes { margin-left: auto; } .tab-ajustes svg { width: 18px; height: 18px; flex: none; } @media (max-width: 720px) { /* as três etapas e a engrenagem cabem inteiras: nenhuma aba some para a direita */ .tabs-caminho { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 42px; gap: 4px; overflow: visible; } .tabs-caminho .tab-btn { justify-content: center; padding: 0 4px; gap: 5px; font-size: .8rem; } .tabs-caminho .caminho-n { width: 18px; height: 18px; font-size: .68rem; } .tabs-caminho .tab-ajustes { margin: 0; padding: 0; } .tab-ajustes-rotulo { display: none; } } @media (max-width: 480px) { .navbar { padding: 12px 14px; gap: 8px; } .escola-filtro { min-width: 84px; } /* o que sobra depois do logo e do minimo da escola: o selo nunca empurra a escola */ .conta-selo .badge { padding: 5px 9px; gap: 5px; max-width: calc(100vw - 236px); } } /* --- títulos de seção: um estilo só, sem caixa alta --- */ .secao { display: flex; align-items: center; gap: 10px; margin: var(--e6) 0 0; font-size: 1rem; font-weight: 800; letter-spacing: -.01em; color: var(--grafite); } .secao + .form-container, .secao + .card-list, .secao + .grid-cards, .secao + .ajuda { margin-top: var(--e3); } .secao-n { display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--grafite); color: #fff; font-size: .8rem; } .tab-content > h2 + .text-muted { margin-bottom: 10px; font-size: .9rem; } .tab-content > h2 ~ h2 { margin-top: var(--e6); } /* --- campos: rótulo sempre em cima, mesmo peso em toda tela --- */ .field { min-width: 0; } .field-solto { margin-top: 12px; } .field textarea { width: 100%; } .field .ajuda { margin-top: 6px; } .form-container .field input, .form-container .field select, .form-container .field textarea { min-height: 44px; } .form-container form > .cad-acoes { margin-top: 0; } .rotulo-solto { margin-top: 14px; font-size: .76rem; font-weight: 800; color: var(--tinta-2); } .faixa-linha { display: flex; align-items: center; gap: 10px; } .form-container .faixa-linha input[type="range"] { flex: 1; min-width: 0; padding: 0; border: 0; box-shadow: none; } .faixa-valor { flex: none; min-width: 44px; padding: 4px 10px; border-radius: var(--raio-p); background: var(--menta-fundo); border: 1px solid var(--menta-linha); color: var(--primary); font-size: .85rem; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; } .ajuda { margin: 8px 0 0; font-size: .84rem; color: var(--tinta-3); } .ajuda-topo { margin: 0 0 12px; } .linha-acao { display: grid !important; grid-template-columns: 1fr auto; align-items: end; gap: 10px !important; } @media (max-width: 520px) { .linha-acao { grid-template-columns: 1fr; } } .cad-acoes-topo { margin-top: 0; } .cad-linha-dentro { margin-top: 12px; } .botao-solto { margin-top: 12px; } .link { background: none; border: 0; padding: 0; min-height: 0; color: var(--primary); font: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .tabela-rola { overflow-x: auto; margin-top: 10px; } .tabela-rola .data-table { width: 100%; border-collapse: collapse; } .data-table thead tr { background: #F1F5F9; text-align: left; } .alivio-falta.zerada { color: var(--primary); } /* --- fato: o que o app já sabe e não precisa perguntar --- */ .fato { margin-top: 12px; padding: 10px 12px; border-radius: var(--raio-s); background: var(--menta-fundo); border: 1px solid var(--menta-linha); color: var(--menta-grafite); font-size: .86rem; } .fato-aviso { background: var(--laranja-fundo); border-color: var(--laranja-linha); color: var(--laranja-escuro); } /* --- cartões de escolha: o rádio grande no lugar do select de modo --- */ .escolhas { display: grid; gap: 10px; } .escolhas-2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: var(--e3); } .escolhas-3 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .escolha { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 14px 14px 14px 46px; border: 1px solid var(--linha-2); border-radius: var(--raio-m); background: var(--branco); cursor: pointer; transition: border-color .14s, box-shadow .14s, background .14s; } .escolha:hover { border-color: var(--tinta-3); } .escolha input { position: absolute; left: 14px; top: 15px; width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0; accent-color: var(--primary); } .escolha-titulo { font-size: .95rem; font-weight: 800; color: var(--grafite); } .escolha-texto { font-size: .82rem; color: var(--tinta-2); } .escolha:has(input:checked) { border-color: var(--menta); background: var(--menta-fundo); box-shadow: var(--sombra-menta); } .escolha:has(input:focus-visible) { outline: 3px solid var(--menta); outline-offset: 2px; } .escolha input:focus-visible { outline: none; } .modo-extra { margin-top: 12px; } .field-curto { max-width: 220px; } .passo-num { display: grid; grid-template-columns: 44px 1fr 44px; gap: 6px; } .passo-num .btn-ghost { padding: 0; min-height: 44px; font-size: 1.2rem; } .passo-num input { text-align: center; font-weight: 800; } /* --- segmento: duas ou três opções lado a lado --- */ .segmento { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; margin-bottom: 14px; background: var(--bg); border: 1px solid var(--linha); border-radius: var(--raio-p); } .segmento button { min-height: 40px; padding: 0 12px; border: 0; border-radius: var(--raio-p); background: transparent; font-size: .88rem; font-weight: 800; color: var(--tinta-2); } .segmento button[aria-selected="true"], .segmento button[aria-checked="true"] { background: var(--grafite); color: #fff; } .segmento-campo { margin: 0; } /* --- resumo da folha: a escolha atual numa linha, com "mudar" --- */ .resumo-folha { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .9rem; color: var(--tinta); } .resumo-folha .btn-ghost { flex: none; min-height: 40px; } #cad-folha-opcoes { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linha); } .dobra-avancada { margin: var(--e5) 0 0; padding: 12px 16px; border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--branco); } .dobra-avancada summary { cursor: pointer; font-size: .9rem; font-weight: 800; color: var(--tinta-2); } .dobra-avancada[open] summary { margin-bottom: 12px; } .fecho { margin-top: var(--e5); padding: var(--e4) var(--e5); border-radius: var(--raio-l); background: var(--branco); border: 1px solid var(--linha); box-shadow: var(--sombra-1); } .fecho-resumo { font-size: .95rem; font-weight: 800; color: var(--grafite); } /* --- listas: ações do mesmo tamanho, a de perigo só muda a cor --- */ .item-acoes-linha { margin: 10px 0 0; } .item-acoes button, .item-acoes .btn-danger { min-height: 36px; padding: 6px 12px; font-size: .82rem; font-weight: 700; } .pequeno-cheio { min-height: 36px; padding: 6px 14px; font-size: .82rem; box-shadow: none; } .item-cab { column-gap: 6px; } .item-cab strong { margin-right: 4px; } .item-cab > span + span:not(.so-aparelho-tag):not(.badge)::before { content: "·"; margin-right: 6px; color: var(--tinta-3); } .revisao { margin-top: 12px; } @media (max-width: 720px) { .q-cab .q-desc, .q-cab .q-bncc { display: none; } } /* --- painel do próprio Gaba: no celular sobe de baixo, no computador fica no meio --- */ .dlg-fundo { position: fixed; inset: 0; z-index: 80; background: rgba(15, 23, 42, .45); } .dlg { position: fixed; z-index: 81; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(420px, calc(100vw - 24px)); max-height: calc(100vh - 40px); overflow: auto; background: var(--branco); border-radius: var(--raio-l); box-shadow: var(--sombra-2); padding: var(--e5); } .dlg h3 { font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; color: var(--grafite); padding-right: 8px; } .dlg-texto { margin-top: 6px; font-size: .9rem; color: var(--tinta-2); } .dlg .field { margin-top: 14px; } .dlg .field input { width: 100%; min-height: 44px; } .dlg-opcoes { display: grid; gap: 8px; margin-top: 14px; } .dlg-opcoes .escolha { padding-top: 12px; padding-bottom: 12px; } .dlg-opcoes .escolha input { top: 13px; } .dlg-opcoes .field { margin-top: 4px; } .dlg-acoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: var(--e5); } .dlg-acoes button { min-height: 44px; padding: 0 18px; border-radius: var(--raio-p); font-weight: 800; } .btn-perigo-cheio { background: var(--danger); border: 1px solid var(--danger); color: #fff; } .btn-perigo-cheio:hover { background: #991B1B; } @media (max-width: 720px) { .dlg { top: auto; bottom: 0; left: 0; transform: none; width: 100%; max-width: none; border-radius: var(--raio-l) var(--raio-l) 0 0; padding-bottom: calc(var(--e5) + env(safe-area-inset-bottom, 0px)); } .dlg-acoes { flex-direction: column-reverse; } .dlg-acoes button { width: 100%; } } /* --- folha A4 (GabaFolha): todo posicionamento em mm vem de GabaLayout --- */ .folha-a4 { position: relative; width: 210mm; height: 297mm; margin: 0 auto; background: #fff; color: #111318; font-family: "Charter", "Georgia", "Times New Roman", serif; font-size: 9.5pt; line-height: 1.42; text-align: justify; text-justify: inter-word; overflow: hidden; page-break-after: always; break-after: page; box-sizing: border-box; -webkit-hyphens: auto; hyphens: auto; } /* a ultima folha nao pode arrastar uma pagina em branco junto */ .folha-a4:last-child { page-break-after: auto; break-after: auto; } .folha-a4 .fiducial { position: absolute; background: #000; line-height: 0; } .folha-a4 .fiducial i { display: block; position: absolute; left: 36%; top: 36%; width: 28%; height: 28%; background: #fff; } .folha-a4 .folha-qr { position: absolute; left: var(--qr-x); top: var(--qr-y); width: var(--qr-w); height: var(--qr-h); image-rendering: pixelated; } /* folha de resposta: o QR fica no canto de cima a esquerda (14mm) e o cabecalho e uma ficha que ocupa toda a largura a direita dele, 61..196mm — a mesma borda direita da moldura do cartao. */ .folha-a4.folha-resposta > .folha-cabecalho { position: absolute; left: 61mm; top: 10mm; right: 14mm; max-height: 48mm; overflow: hidden; } .folha-a4 .folha-cabecalho { font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; text-align: left; } /* corpo das caixas de tamanho fixo: GabaFolha.compactarCaixas() desce os degraus quando a caixa nao cabe no buraco que lhe deram. letra um pouco menor e melhor que o nome do aluno fora do papel. */ .folha-a4 .folha-cabecalho, .folha-a4 .folha-instrucoes, .folha-a4 .folha-rodape, .folha-a4 .folha-resultado { --cab: 1; } .folha-a4 .folha-compacta-1 { --cab: 0.86; } .folha-a4 .folha-compacta-2 { --cab: 0.76; } .folha-a4 .folha-compacta-3 { --cab: 0.66; } .folha-a4 .folha-cabecalho h1 { margin: 0 0 calc(0.8mm * var(--cab, 1)); font-size: calc(11pt * var(--cab, 1)); text-transform: uppercase; letter-spacing: 0.02em; } .folha-a4 .folha-cabecalho p { margin: 0 0 calc(0.7mm * var(--cab, 1)); font-size: calc(9pt * var(--cab, 1)); } .folha-a4 .folha-rede { font-size: calc(7.5pt * var(--cab, 1)); letter-spacing: 0.05em; text-transform: uppercase; color: #333; } .folha-a4 .folha-linha { display: inline-block; width: 58mm; border-bottom: 0.3mm solid #14181f; } .folha-a4 .folha-linha-nota { width: 15mm; } /* a identificacao e uma ficha de grade fixa, como nas avaliacoes da rede: rotulo miudo em cima, valor embaixo, e a caixa de Nota fechando a linha da assinatura */ .folha-a4 .folha-ficha { width: 100%; table-layout: fixed; border-collapse: collapse; border: 0.4mm solid #14181f; font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .folha-a4 .folha-ficha td, .folha-a4 .folha-ficha th { border: 0.2mm solid #14181f; padding: calc(0.6mm * var(--cab, 1)) 1.6mm calc(0.8mm * var(--cab, 1)); vertical-align: top; text-align: left; overflow: hidden; } .folha-a4 .folha-ficha-escola { background: #eef1f4; text-align: center !important; padding: calc(1.1mm * var(--cab, 1)) 2mm !important; } .folha-a4 .folha-ficha-escola .folha-rede { margin: 0; font-size: calc(6.4pt * var(--cab, 1)); font-weight: 400; letter-spacing: 0.08em; color: #3a4048; } .folha-a4 .folha-ficha-escola h1 { margin: calc(0.3mm * var(--cab, 1)) 0; font-size: calc(11pt * var(--cab, 1)); line-height: 1.15; letter-spacing: 0.03em; } .folha-a4 .folha-ficha-escola .folha-titulo { margin: 0; font-size: calc(8.4pt * var(--cab, 1)); font-weight: 700; color: #14181f; } .folha-a4 .folha-ficha-rotulo { display: block; font-size: calc(5.4pt * var(--cab, 1)); font-weight: 700; line-height: 1.25; letter-spacing: 0.06em; text-transform: uppercase; color: #5a616b; } .folha-a4 .folha-cabecalho .folha-ficha-valor { margin: 0; min-height: calc(3.4mm * var(--cab, 1)); font-size: calc(8.6pt * var(--cab, 1)); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .folha-a4 .folha-ficha-aluno .folha-ficha-valor { font-weight: 700; } .folha-a4 .folha-ficha-assina td { height: calc(7.5mm * var(--cab, 1)); } .folha-a4 .folha-ficha-nota { position: relative; text-align: center !important; background: #f6f7f9; } .folha-a4 .folha-ficha-nota .folha-ficha-rotulo { font-size: calc(6.4pt * var(--cab, 1)); color: #14181f; } .folha-a4 .folha-ficha-nota .folha-linha-nota { position: absolute; left: 3mm; right: 3mm; bottom: 1.6mm; width: auto; border-bottom-width: 0.2mm; } /* paginas de corpo: sem QR e sem marcas, entao o texto comeca no topo e flui em colunas */ .folha-a4.folha-questoes { display: flex; flex-direction: column; padding: 10mm 12mm 14mm; } .folha-a4.folha-questoes > .folha-cabecalho { position: static; } .folha-a4 .folha-cabecalho-fino { border-bottom: 0.4mm solid #1a1a1a; padding-bottom: 2mm; margin-bottom: 4mm; font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; text-align: left; } .folha-a4 .folha-cabecalho-fino p { margin: 0; font-size: 7.8pt; color: #222; letter-spacing: 0.01em; } .folha-a4 .folha-instrucoes { border: 0.35mm solid #222; border-radius: 0.8mm; padding: calc(3mm * var(--cab, 1)) calc(4mm * var(--cab, 1)); margin: 0 0 calc(5mm * var(--cab, 1)); break-inside: avoid; page-break-inside: avoid; background: #f8f9fa; text-align: left; } .folha-a4 .folha-instrucoes h2 { margin: 0 0 calc(1.5mm * var(--cab, 1)); font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-size: calc(8.5pt * var(--cab, 1)); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .folha-a4 .folha-instrucoes p { margin: 0 0 calc(1mm * var(--cab, 1)); font-size: calc(8pt * var(--cab, 1)); line-height: 1.35; } /* na folha de resposta as instrucoes ficam numa faixa entre o cabecalho e o cartao: o aluno le antes de marcar. a altura vem do GabaLayout, que a reserva so pelo numero de questoes */ .folha-a4.folha-resposta .folha-instrucoes-capa { position: absolute; left: 14mm; right: 14mm; margin: 0; overflow: hidden; display: flex; gap: 3.5mm; padding: calc(2.2mm * var(--cab, 1)) 3.5mm; border: 0.3mm solid #14181f; border-radius: 0; background: #fff; } .folha-a4.folha-resposta .folha-instrucoes-capa h2 { display: flex; align-items: center; flex: 0 0 23mm; margin: 0; padding-right: 3mm; border-right: 0.2mm solid #14181f; font-size: calc(7.6pt * var(--cab, 1)); line-height: 1.25; } .folha-a4.folha-resposta .folha-instrucoes-capa ol { flex: 1 1 auto; align-self: center; margin: 0; padding: 0 0 0 4.2mm; font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .folha-a4.folha-resposta .folha-instrucoes-capa li { margin: 0 0 calc(0.6mm * var(--cab, 1)); padding-left: 0.6mm; font-size: calc(7.8pt * var(--cab, 1)); line-height: 1.3; text-align: justify; } .folha-a4.folha-resposta .folha-instrucoes-capa li::marker { font-weight: 700; } /* faixa de correcao no pe da folha de respostas, abaixo da moldura do cartao: GabaFolha so a poe quando o cartao termina cedo o bastante para ela nao encostar nas marcas de baixo. */ .folha-a4 .folha-resultado { position: absolute; left: 14mm; right: 14mm; bottom: 32mm; border: 0.35mm solid #222; border-radius: 0.8mm; padding: calc(3mm * var(--cab, 1)) calc(4mm * var(--cab, 1)); background: #f8f9fa; text-align: left; font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .folha-a4 .folha-resultado h2 { margin: 0 0 calc(2mm * var(--cab, 1)); font-size: calc(8.5pt * var(--cab, 1)); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .folha-a4 .folha-resultado p { margin: 0 0 calc(2.5mm * var(--cab, 1)); font-size: calc(8.5pt * var(--cab, 1)); } .folha-a4 .folha-resultado p:last-child { margin-bottom: 0; } .folha-a4 .folha-linha-acertos { width: 16mm; } .folha-a4 .folha-linha-data { width: 30mm; } .folha-a4 .folha-area { flex: 1 1 auto; min-height: 0; overflow: hidden; } /* corpo fechado por medida: cada coluna ja vem pronta do empacotador, entao o CSS nao fragmenta nada */ .folha-a4 .folha-area--colunas { display: flex; align-items: flex-start; } .folha-a4 .folha-area--colunas .folha-coluna { flex: 1 1 0; min-width: 0; column-count: 1; column-rule: none; } .folha-a4 .folha-area--colunas .folha-coluna + .folha-coluna { margin-left: 3.5mm; padding-left: 3.5mm; border-left: 0.25mm solid #c0c5cc; } .folha-a4 .folha-continua { font-weight: 400; font-style: italic; text-transform: none; color: #555; font-size: 7.8pt; border-bottom: none; padding-bottom: 0; margin-bottom: 0.3mm; } .folha-a4 .folha-fluxo { font-size: 9pt; line-height: 1.42; column-count: var(--colunas, 1); column-gap: 7mm; column-rule: 0.25mm solid #c0c5cc; } .folha-a4 .folha-questao { margin-bottom: 3.5mm; position: relative; break-inside: avoid; page-break-inside: avoid; } .folha-a4 .folha-questao::after { content: ""; display: block; position: absolute; left: 0; right: 0; bottom: -1.8mm; border-bottom: 0.15mm solid #d5d8dd; } .folha-a4 .folha-questao:last-child::after { display: none; } .folha-a4 .folha-rotulo { margin: 0 0 1mm; padding-bottom: 0.5mm; border-bottom: 0.3mm solid #222; font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-size: 8.5pt; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #111; text-align: left; } .folha-a4 .folha-desc { margin: 0; font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-size: 7pt; color: #555; text-transform: uppercase; letter-spacing: 0.02em; text-align: left; } /* a palavra sem onde quebrar nao pode sair da coluna: ela vaza por cima da margem e a parte que passa do papel nao existe. o hifen automatico nao alcanca URL, codigo de matricula nem sequencia sem espaco, entao aqui ela quebra no meio mesmo. */ .folha-a4 .folha-desc, .folha-a4 .folha-enunciado, .folha-a4 .folha-comando, .folha-a4 .folha-alt li, .folha-a4 .folha-rotulo { overflow-wrap: anywhere; } .folha-a4 .folha-enunciado { margin: 0 0 1.2mm; text-indent: 0; } .folha-a4 .folha-qnum { font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-weight: 700; } .folha-a4 .folha-comando { margin: 0.5mm 0 1.2mm; font-weight: 600; font-style: italic; } /* cada alternativa e um
    proprio — e o tomo que o empacotador corta. o respiro mora no proprio ol, de baixo para cima: uma regra de irmao (.folha-alt + .folha-alt) nao existe dentro da sonda de medicao, que ve um ol sozinho, e a coluna estoura no papel por 1,2 mm x cada alternativa. */ .folha-a4 .folha-alt { margin: 0 0 1.2mm 4mm; padding: 0; list-style: none; } .folha-a4 .folha-alt li { margin: 0; padding-left: 5.5mm; text-indent: -5.5mm; line-height: 1.4; text-align: justify; } .folha-a4 .folha-letra { display: inline-block; width: 5.5mm; /* o text-indent negativo do li e herdado pelo inline-block e puxaria a letra para fora da coluna */ text-indent: 0; font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-weight: 700; font-size: 9pt; text-align: left; } .folha-a4 .folha-cartao { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; } .folha-a4 .folha-cartao-area { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } /* moldura do cartao: um filete so, na largura do cabecalho. as marcas ficam 1,5mm por dentro dela e o titulo e o codigo moram na faixa entre as marcas, que ja e espaco perdido para as bolhas */ .folha-a4 .folha-cartao-moldura { position: absolute; border: 0.4mm solid #14181f; pointer-events: none; } .folha-a4 .folha-cartao-titulo, .folha-a4 .folha-cartao-prova { position: absolute; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; line-height: 1.2; } .folha-a4 .folha-cartao-titulo p, .folha-a4 .folha-cartao-prova p { margin: 0; } .folha-a4 .folha-cartao-titulo p:first-child { font-size: 9pt; letter-spacing: 0.14em; text-transform: uppercase; } .folha-a4 .folha-cartao-titulo p + p { margin-top: 0.6mm; font-size: 6.6pt; color: #3a4048; } .folha-a4 .folha-cartao-prova p { font-size: 7.6pt; letter-spacing: 0.04em; color: #14181f; } .folha-a4 .folha-q { position: absolute; display: block; } .folha-a4 .folha-q-n { position: absolute; left: 0; top: 0; height: 100%; padding-right: 2mm; font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-size: 7.4pt; font-weight: 700; color: #14181f; text-align: right; line-height: var(--bubble); } .folha-a4 .folha-bubble { position: absolute; top: 0; border: 0.35mm solid #14181f; border-radius: 50%; box-sizing: border-box; background: #fff; } /* as letras saem uma vez por coluna, acima da primeira linha, e os filetes cinza separam as linhas de cinco em cinco: nenhum dos dois entra na amostra que o leitor tira de cada bolha */ .folha-a4 .folha-cartao-letra { position: absolute; text-align: center; font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-size: 6.4pt; font-weight: 700; line-height: 2.6mm; color: #3a4048; } .folha-a4 .folha-cartao-filete { position: absolute; border-top: 0.15mm solid #9aa1aa; } .folha-a4 .folha-cartao-divisa { position: absolute; border-left: 0.15mm solid #9aa1aa; } .folha-a4 .folha-texto-base { margin: 0.8mm 0 1.5mm; padding: 0.5mm 0 0.5mm 3mm; border-left: 0.4mm solid #888; font-size: 8.8pt; line-height: 1.38; color: #1a1a1a; } .folha-a4 .folha-texto-base .folha-enunciado { margin: 0; } /* o rodape mora abaixo da moldura do cartao: o GabaLayout para a moldura antes dele (RODAPE_MM) */ .folha-a4 .folha-rodape { position: absolute; left: 28mm; right: 28mm; bottom: 10mm; margin: 0; font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-size: calc(6.5pt * var(--cab, 1)); color: #777; text-align: center; letter-spacing: 0.02em; border-top: 0.15mm solid #ddd; padding-top: calc(1.5mm * var(--cab, 1)); } @media print { @page { size: A4 portrait; margin: 0; } * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } html, body { margin: 0 !important; padding: 0 !important; background: #fff; } /* so a casca do app sai do papel: o cabecalho e o rodape da folha sao
    /