/* SISMONITORIA — Monitoria da Qualidade (Regulação). * COMPLEMENTO do kit Aurora (public/css/aurora-core.css). A view é .aur e usa as classes * REAIS do kit (.glass/.topbar/.tabs/.filters/.kpis/.kpi/.au-table/.au-fld/.st/.chip/.au-empty/ * .t-note/.au-modal). Aqui mora só o que o kit não tem — barra rotulada, placar da monitoria, * lista de itens do instrumento e a folha de devolutiva — sempre com os tokens do kit * (--brand/--ink/--ink-soft/--ok/--warn/--err/--line/--glass), nunca hex de marca. * Tudo escopado em #view-monitoria: nada vaza para o resto do portal. */ #view-monitoria .mq-wrap{ display:flex; flex-direction:column; gap:16px } #view-monitoria .mq-pad{ padding:16px 18px } #view-monitoria .mq-scroll{ overflow-x:auto; scrollbar-width:thin } #view-monitoria .mq-cols{ display:grid; grid-template-columns:1fr 320px; gap:16px; align-items:start } #view-monitoria .mq-cols2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start } #view-monitoria .mq-sticky{ position:sticky; top:14px } @media (max-width:1080px){ #view-monitoria .mq-cols,#view-monitoria .mq-cols2{ grid-template-columns:1fr } #view-monitoria .mq-sticky{ position:static } } /* ── barra rotulada (rótulo · trilho · valor) ───────────────────────────────── */ #view-monitoria .mq-bar{ display:grid; grid-template-columns:minmax(120px,220px) 1fr 84px; gap:12px; align-items:center; padding:6px 0; font-size:13px } #view-monitoria .mq-bar .mq-rot{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink) } #view-monitoria .mq-track{ height:8px; border-radius:8px; background:rgba(77,90,54,.12); overflow:hidden } body.theme-dark #view-monitoria .mq-track{ background:rgba(157,190,99,.14) } #view-monitoria .mq-fill{ display:block; height:100%; border-radius:8px; background:linear-gradient(90deg,var(--brand),#7c974d); transition:width .5s cubic-bezier(.2,.8,.2,1) } #view-monitoria .mq-fill.ok{ background:linear-gradient(90deg,#3f9d6a,#66d69a) } #view-monitoria .mq-fill.warn{ background:linear-gradient(90deg,#c68a2c,#e6c150) } #view-monitoria .mq-fill.err{ background:linear-gradient(90deg,#e23a6d,#ff9a6a) } #view-monitoria .mq-bar .mq-val{ text-align:right; font-size:12px; font-weight:700; color:var(--ink-soft) } #view-monitoria .mq-barnote{ margin:-4px 0 10px; font-size:11.5px; color:var(--ink-soft) } /* ── placar da monitoria em edição ─────────────────────────────────────────── */ #view-monitoria .mq-score{ font-size:52px; font-weight:750; letter-spacing:-.045em; line-height:1; margin:4px 0 2px } #view-monitoria .mq-score small{ font-size:19px; font-weight:600; color:var(--ink-soft); margin-left:2px } #view-monitoria .mq-wave{ display:flex; align-items:flex-end; gap:3px; height:70px; margin:16px 0 6px } #view-monitoria .mq-wave i{ flex:1; border-radius:3px; min-height:8px; background:rgba(77,90,54,.16) } body.theme-dark #view-monitoria .mq-wave i{ background:rgba(157,190,99,.18) } #view-monitoria .mq-wave i.v-SIM{ background:linear-gradient(180deg,#66d69a,#3f9d6a) } #view-monitoria .mq-wave i.v-NAO{ background:linear-gradient(180deg,#ff8aa0,#e23a6d) } #view-monitoria .mq-wave i.v-NA{ background:rgba(77,90,54,.34) } #view-monitoria .mq-wave-leg{ display:flex; justify-content:space-between; font-size:11.5px; color:var(--ink-soft) } /* ── lista de itens do instrumento ─────────────────────────────────────────── */ #view-monitoria .mq-block{ display:flex; align-items:center; gap:10px; padding:14px 18px 8px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft) } #view-monitoria .mq-block .mq-block-peso{ margin-left:auto; font-weight:700; color:var(--ink-soft) } #view-monitoria .mq-item{ display:grid; grid-template-columns:1fr auto; gap:14px; align-items:start; padding:13px 18px; border-bottom:1px solid var(--line); transition:background .16s } #view-monitoria .mq-item:last-child{ border-bottom:none } #view-monitoria .mq-item:hover{ background:rgba(92,111,58,.06) } body.theme-dark #view-monitoria .mq-item:hover{ background:rgba(147,185,80,.08) } #view-monitoria .mq-item.pend{ background:rgba(232,134,58,.1); box-shadow:inset 3px 0 0 var(--warn) } #view-monitoria .mq-item-txt{ font-size:14px; font-weight:600; line-height:1.4; color:var(--ink) } #view-monitoria .mq-item-txt i{ font-style:normal; font-weight:700; color:var(--ink-soft); font-size:12px; margin-right:7px } #view-monitoria .mq-item-meta{ margin-top:7px; display:flex; gap:7px; align-items:center; flex-wrap:wrap } #view-monitoria .mq-tag{ font-size:10.5px; font-weight:700; letter-spacing:.05em; padding:3px 9px; border-radius:20px; color:var(--ink-soft); background:rgba(77,90,54,.1) } body.theme-dark #view-monitoria .mq-tag{ background:rgba(147,185,80,.12) } #view-monitoria .mq-tag.fatal{ color:#d02f5c; background:rgba(226,58,109,.14) } body.theme-dark #view-monitoria .mq-tag.fatal{ color:#ff86a6 } #view-monitoria .mq-link{ background:none; border:0; padding:0; cursor:pointer; font:inherit; font-size:12px; font-weight:700; color:var(--brand) } body.theme-dark #view-monitoria .mq-link{ color:var(--brand2) } #view-monitoria .mq-link:hover{ text-decoration:underline } #view-monitoria .mq-gloss,#view-monitoria .mq-obs{ display:none; margin-top:10px } #view-monitoria .mq-gloss.on,#view-monitoria .mq-obs.on{ display:block } #view-monitoria .mq-seg{ display:flex; gap:6px; flex-wrap:wrap } /* ── caixas de aviso (falha crítica, reincidência, ciclo) ──────────────────── */ #view-monitoria .mq-alert{ border-radius:14px; padding:12px 14px; font-size:12.5px; line-height:1.5; border:1px solid var(--line); background:rgba(255,255,255,.35) } body.theme-dark #view-monitoria .mq-alert{ background:rgba(255,255,255,.05) } #view-monitoria .mq-alert b{ display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; margin-bottom:4px } #view-monitoria .mq-alert.err{ border-color:rgba(226,58,109,.34); background:rgba(226,58,109,.1); color:#d02f5c } body.theme-dark #view-monitoria .mq-alert.err{ color:#ff86a6 } #view-monitoria .mq-alert.warn{ border-color:rgba(232,134,58,.34); background:rgba(232,134,58,.1); color:#ad631e } body.theme-dark #view-monitoria .mq-alert.warn{ color:#ffb877 } #view-monitoria .mq-alert.ok{ border-color:rgba(63,157,106,.32); background:rgba(63,157,106,.1); color:#2f8659 } body.theme-dark #view-monitoria .mq-alert.ok{ color:#77e0a5 } /* ── folha de devolutiva (documento) ───────────────────────────────────────── */ #view-monitoria .mq-folha{ max-width:900px; margin:0 auto; padding:38px 42px; font-size:13.5px; line-height:1.55 } #view-monitoria .mq-folha h2{ margin:0; font-size:19px; font-weight:700; text-align:center; letter-spacing:-.02em } #view-monitoria .mq-folha .mq-f-org{ text-align:center; font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft) } #view-monitoria .mq-folha .mq-f-sub{ text-align:center; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin-top:4px } #view-monitoria .mq-folha hr{ border:0; border-top:2px solid var(--brand); margin:16px 0; opacity:.6 } #view-monitoria .mq-ident{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 26px; margin:16px 0 } #view-monitoria .mq-ident div{ display:flex; gap:8px; padding:7px 0; border-bottom:1px solid var(--line) } #view-monitoria .mq-ident b{ font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); min-width:126px } #view-monitoria .mq-nota-box{ display:flex; align-items:center; gap:22px; border-radius:16px; padding:16px 20px; margin:16px 0; background:rgba(92,111,58,.09); border:1px solid var(--line) } body.theme-dark #view-monitoria .mq-nota-box{ background:rgba(147,185,80,.1) } #view-monitoria .mq-nota-box .mq-n{ font-size:42px; font-weight:750; line-height:1; letter-spacing:-.04em } #view-monitoria .mq-f-sec{ font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); font-weight:700; margin:22px 0 8px } #view-monitoria .mq-ass{ display:grid; grid-template-columns:1fr 1fr; gap:44px; margin-top:52px; text-align:center; font-size:12.5px } #view-monitoria .mq-ass div{ border-top:1px solid var(--ink-soft); padding-top:7px } #view-monitoria .mq-data-ass{ text-align:center; margin-top:26px; font-size:13px } #view-monitoria .mq-pre{ white-space:pre-wrap; margin:0; font-size:13.5px } /* ── nota / número tabular em tabela ───────────────────────────────────────── */ #view-monitoria .mq-num{ text-align:right; font-variant-numeric:tabular-nums } #view-monitoria .mq-muted{ color:var(--ink-soft); font-size:12px } #view-monitoria .mq-hist{ list-style:none; margin:0; padding:0; font-size:12.5px } #view-monitoria .mq-hist li{ padding:9px 0; border-bottom:1px solid var(--line); color:var(--ink-soft) } #view-monitoria .mq-hist li:last-child{ border-bottom:none } #view-monitoria .mq-hist b{ color:var(--ink); font-weight:650 } #view-monitoria .mq-hist .mq-quote{ font-style:italic; margin-top:3px } /* ── toast ─────────────────────────────────────────────────────────────────── */ #view-monitoria .mq-toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(160%); z-index:80; background:linear-gradient(135deg,var(--brand),#64793f); color:#fff; padding:12px 20px; border-radius:14px; font-size:13px; font-weight:600; box-shadow:0 18px 40px -14px rgba(46,59,23,.7); transition:transform .3s cubic-bezier(.2,.9,.3,1); max-width:min(520px,92vw) } #view-monitoria .mq-toast.on{ transform:translateX(-50%) translateY(0) } /* A impressão da devolutiva abre janela própria (monitoria.js -> imprimirFolha), com CSS de papel embutido — nada de @media print brigando com o casco do portal. */ /* ───────────────────────────────────────────────────────────────────────────── AJUSTES DE DENSIDADE E GRADE (passe de layout) 1) O kit define `.trend{grid-area:trend}` porque nasceu dentro do `.grid` de áreas nomeadas do mockup. Usada como coluna do meu grid simples, ela criava COLUNAS FANTASMA (medido: 536px 320px 0px 460px) e empurrava o placar para fora. Aqui a área volta a ser automática — o visual de .trend continua. 2) O painel opera em tela cheia o dia todo: paddings e fontes do kit foram comprimidos para caber mais informação sem virar aperto. ───────────────────────────────────────────────────────────────────────────── */ #view-monitoria .trend{ grid-area:auto } #view-monitoria .mq-wrap{ gap:12px } #view-monitoria .mq-cols{ grid-template-columns:minmax(0,1fr) 300px; gap:12px } #view-monitoria .mq-cols2{ gap:12px } #view-monitoria .mq-pad{ padding:14px 16px 16px } #view-monitoria .topbar{ padding:12px 16px } #view-monitoria .brand-txt h1{ font-size:17px } #view-monitoria .brand-txt p{ font-size:11.5px } #view-monitoria .mark{ width:36px; height:36px; border-radius:11px } #view-monitoria .tabs{ padding:5px } #view-monitoria .tab{ padding:8px 14px; font-size:12.5px } #view-monitoria .q-head{ padding:13px 16px 9px } #view-monitoria .q-head h2{ font-size:15px } #view-monitoria .q-head p{ font-size:11.5px; margin-top:2px } #view-monitoria .filters{ padding:12px 16px; gap:10px 12px } #view-monitoria .kpis{ grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px } #view-monitoria .kpi{ min-height:0; padding:13px 14px 12px; gap:6px } #view-monitoria .k-val{ font-size:23px } #view-monitoria .k-sub{ font-size:11.5px } #view-monitoria .k-ico{ width:26px; height:26px; border-radius:8px } #view-monitoria .au-table th{ padding:7px 10px } #view-monitoria .au-table td{ padding:9px 10px } #view-monitoria .au-fld input,#view-monitoria .au-fld select,#view-monitoria .au-fld textarea{ padding:8px 11px } #view-monitoria .au-fld textarea{ min-height:66px } #view-monitoria .au-form{ gap:10px 12px } #view-monitoria .t-note{ padding:9px 11px; font-size:11.5px; margin-top:10px } #view-monitoria .mq-alert{ padding:10px 12px; font-size:12px } #view-monitoria .btn{ padding:8px 13px; font-size:12.5px } /* grade compacta de campos: 4 colunas, com spans para os campos largos */ #view-monitoria .mq-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px 12px } #view-monitoria .mq-grid .sp2{ grid-column:span 2 } #view-monitoria .mq-grid .sp3{ grid-column:span 3 } #view-monitoria .mq-grid .sp4{ grid-column:span 4 } @media (max-width:1240px){ #view-monitoria .mq-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } #view-monitoria .mq-grid .sp3,#view-monitoria .mq-grid .sp4{ grid-column:span 2 } } @media (max-width:640px){ #view-monitoria .mq-grid{ grid-template-columns:1fr } #view-monitoria .mq-grid .sp2,#view-monitoria .mq-grid .sp3,#view-monitoria .mq-grid .sp4{ grid-column:span 1 } } /* itens do instrumento mais densos */ #view-monitoria .mq-item{ padding:10px 16px; gap:12px } #view-monitoria .mq-item-txt{ font-size:13.5px } #view-monitoria .mq-item-meta{ margin-top:5px } #view-monitoria .mq-block{ padding:12px 16px 6px } #view-monitoria .mq-seg .chip{ padding:6px 11px; font-size:11.5px } /* placar lateral compacto */ #view-monitoria .mq-score{ font-size:44px; margin:2px 0 } #view-monitoria .mq-wave{ height:58px; margin:12px 0 5px } #view-monitoria .trend{ padding:14px 16px; gap:5px } #view-monitoria .t-stats li{ padding:7px 9px } #view-monitoria .t-stats b{ font-size:16px } #view-monitoria .mq-bar{ grid-template-columns:minmax(110px,210px) 1fr 78px; padding:4px 0; font-size:12.5px } #view-monitoria .mq-folha{ padding:28px 32px } /* ───────────────────────────────────────────────────────────────────────────── CARD "INSTRUMENTO DE AVALIAÇÃO" — o miolo da tela de monitoria Antes eram linhas soltas com três chips perdidos na borda direita. Agora: cabeçalho de bloco com acento, número em selo, resposta em UM controle segmentado e acento lateral colorido na linha já respondida (leitura rápida do que falta). Progresso "X de N" no cabeçalho do card. ───────────────────────────────────────────────────────────────────────────── */ #view-monitoria .mq-block{ background:rgba(92,111,58,.1); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:8px 16px; margin-top:-1px; font-size:10.5px; } body.theme-dark #view-monitoria .mq-block{ background:rgba(147,185,80,.1) } #view-monitoria .mq-block::before{ content:""; width:3px; height:13px; border-radius:2px; background:var(--brand2); flex:none } #view-monitoria .mq-block-peso{ font-variant-numeric:tabular-nums } #view-monitoria .mq-item{ grid-template-columns:minmax(0,1fr) auto; align-items:center; padding:11px 16px 11px 13px; border-left:3px solid transparent } #view-monitoria .mq-item[data-r="SIM"]{ border-left-color:#3f9d6a; background:rgba(63,157,106,.05) } #view-monitoria .mq-item[data-r="NAO"]{ border-left-color:#e23a6d; background:rgba(226,58,109,.05) } #view-monitoria .mq-item[data-r="NA"]{ border-left-color:rgba(77,90,54,.4); background:rgba(77,90,54,.04) } #view-monitoria .mq-item.pend{ border-left-color:var(--warn) } #view-monitoria .mq-item-txt{ display:flex; align-items:flex-start; gap:9px; line-height:1.35 } #view-monitoria .mq-badge{ flex:none; display:inline-grid; place-items:center; width:22px; height:22px; border-radius:7px; background:rgba(92,111,58,.16); color:var(--ink-soft); font-size:11px; font-weight:800; font-variant-numeric:tabular-nums } body.theme-dark #view-monitoria .mq-badge{ background:rgba(147,185,80,.16) } #view-monitoria .mq-item[data-r="SIM"] .mq-badge{ background:rgba(63,157,106,.2); color:#2f8659 } #view-monitoria .mq-item[data-r="NAO"] .mq-badge{ background:rgba(226,58,109,.2); color:#d02f5c } body.theme-dark #view-monitoria .mq-item[data-r="SIM"] .mq-badge{ color:#77e0a5 } body.theme-dark #view-monitoria .mq-item[data-r="NAO"] .mq-badge{ color:#ff86a6 } #view-monitoria .mq-item-meta{ padding-left:31px } #view-monitoria .mq-gloss,#view-monitoria .mq-obs{ padding-left:31px } /* resposta: um controle segmentado, não três botões avulsos */ #view-monitoria .mq-seg{ display:inline-flex; gap:2px; padding:3px; border:1px solid var(--fld-bd); border-radius:12px; background:rgba(255,255,255,.35); flex:none } body.theme-dark #view-monitoria .mq-seg{ background:rgba(255,255,255,.05) } #view-monitoria .mq-seg .chip{ border:none; background:transparent; border-radius:9px; padding:6px 14px; min-width:58px; text-align:center; color:var(--ink-soft) } #view-monitoria .mq-seg .chip:hover{ transform:none; color:var(--ink); background:rgba(92,111,58,.1) } #view-monitoria .mq-seg .chip.active{ color:#fff } #view-monitoria .mq-seg .chip.active:hover{ background:none } /* progresso do preenchimento no cabeçalho do card */ #view-monitoria .mq-prog{ display:inline-block; width:120px; height:6px; border-radius:6px; overflow:hidden; background:rgba(77,90,54,.16) } body.theme-dark #view-monitoria .mq-prog{ background:rgba(157,190,99,.18) } #view-monitoria .mq-prog i{ display:block; height:100%; border-radius:6px; transition:width .3s; background:linear-gradient(90deg,var(--brand),#7c974d) } /* O reset do segmentado acima (background:transparent no .chip) tinha prioridade sobre o .chip.p3.active do kit — o botão escolhido ficava só com o texto em negrito. Reafirmamos os gradientes DENTRO do segmentado, na mesma especificidade do reset. */ #view-monitoria .mq-seg .chip.active{ background:linear-gradient(135deg,var(--brand),#64793f); color:#fff } #view-monitoria .mq-seg .chip.p3.active{ background:linear-gradient(135deg,#3f9d6a,#66d69a); color:#0e2b1c } #view-monitoria .mq-seg .chip.p0.active{ background:linear-gradient(135deg,#e23a6d,#ff7aa0); color:#fff } #view-monitoria .mq-seg .chip.active:hover{ filter:brightness(1.04) } /* ───────────────────────────────────────────────────────────────────────────── TEMA ESCURO x ESTADOS COLORIDOS (correção de especificidade) `body.theme-dark #view-monitoria .x` tem UM elemento a mais que `#view-monitoria .x.estado`, então vencia a cor de estado e no escuro a onda ficava toda oliva, a tag de falha crítica perdia o vermelho e os alertas perdiam o fundo. Aqui cada estado ganha seu par escuro explícito. ───────────────────────────────────────────────────────────────────────────── */ body.theme-dark #view-monitoria .mq-wave i.v-SIM{ background:linear-gradient(180deg,#66d69a,#3f9d6a) } body.theme-dark #view-monitoria .mq-wave i.v-NAO{ background:linear-gradient(180deg,#ff8aa0,#e23a6d) } body.theme-dark #view-monitoria .mq-wave i.v-NA{ background:rgba(157,190,99,.42) } body.theme-dark #view-monitoria .mq-tag.fatal{ background:rgba(226,58,109,.18); color:#ff86a6 } body.theme-dark #view-monitoria .mq-alert.err{ background:rgba(226,58,109,.14); border-color:rgba(226,58,109,.4); color:#ff86a6 } body.theme-dark #view-monitoria .mq-alert.warn{ background:rgba(232,134,58,.14); border-color:rgba(232,134,58,.4); color:#ffb877 } body.theme-dark #view-monitoria .mq-alert.ok{ background:rgba(63,157,106,.14); border-color:rgba(63,157,106,.4); color:#77e0a5 } body.theme-dark #view-monitoria .mq-item[data-r="SIM"]{ background:rgba(63,157,106,.09) } body.theme-dark #view-monitoria .mq-item[data-r="NAO"]{ background:rgba(226,58,109,.09) } body.theme-dark #view-monitoria .mq-item[data-r="NA"]{ background:rgba(157,190,99,.07) }