/* ==========================================================================
VOX EDU — sistema visual
Aplicação da identidade oficial VOX (Brandbook v1.0, agosto/2026).
Cores, tipografia e símbolos vêm do brandbook, não de aproximação:
azul VOX #00A7A6 · amarelo VOX #F9B000 · preto · branco,
mais as escalas tonais oficiais de cada família.
Tipografia oficial: Sora (títulos e destaques) + DM Sans (texto e interface).
Auto-hospedadas em woff2 — nada de CDN de fonte.
Sobre o uso da marca: o brandbook autoriza a ASSINATURA ESSENCIAL (VOX) em
"materiais de rotina e comunicações internas das escolas", e o SÍMBOLO
ISOLADO em "ícone de aplicativo e ícones internos". É exatamente o caso
aqui. O "EDU" nunca é desenhado junto do logo como lockup — ele aparece
como nome do produto, em Sora, ao lado da assinatura oficial. Assim o
sistema tem cara de VOX sem inventar uma marca nova, que é o que o
brandbook proíbe.
Guia completo: https://voxgoiania.com/idvisual/
========================================================================== */
/* Sora — títulos, números, marca. Variable 100..800. */
@font-face {
font-family: "Sora";
src: url("../fonts/sora-latin.woff2") format("woff2");
font-weight: 100 800; font-style: normal; font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Sora";
src: url("../fonts/sora-latin-ext.woff2") format("woff2");
font-weight: 100 800; font-style: normal; font-display: swap;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* DM Sans — texto corrido e interface. Variable 100..1000. */
@font-face {
font-family: "DM Sans";
src: url("../fonts/dmsans-latin.woff2") format("woff2");
font-weight: 100 1000; font-style: normal; font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "DM Sans";
src: url("../fonts/dmsans-latin-ext.woff2") format("woff2");
font-weight: 100 1000; font-style: normal; font-display: swap;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ---------------------------------------------------------------- tokens -- */
:root {
/* --- paleta oficial, escala tonal do brandbook (páginas 46 e 47) --- */
--az-100: #00A7A6; --az-90: #2FAFAE; --az-80: #58B8B8; --az-70: #77C1C0;
--az-60: #8FCBCA; --az-50: #A5D3D3; --az-40: #BADDDC; --az-30: #CDE5E5;
--az-20: #DEF0EF; --az-10: #EFF7F8;
--am-100: #F9B000; --am-90: #FBBB21; --am-80: #FCC043; --am-70: #FDC75F;
--am-60: #FED27A; --am-50: #FED992; --am-40: #FFE0A9; --am-30: #FFE9C0;
--am-20: #FFF0D6; --am-10: #FFF7EA;
--pt-100: #000000; --pt-90: #3C3C3B; --pt-80: #575756; --pt-70: #706F6F;
--pt-60: #878787; --pt-50: #9D9D9C; --pt-40: #B2B2B2; --pt-30: #C6C6C6;
--pt-20: #DADADA; --pt-10: #EDEDED;
--canvas: #F2F7F8;
--surface: #FFFFFF;
--surface-2: #F7FBFB;
--surface-3: #EAF3F4;
--ink: #101D20;
--ink-2: #4A6165;
--ink-3: #7C9296;
--line: #E4EDEE;
--line-2: #CFE0E1;
--brand: #00A7A6; /* azul VOX oficial — preenchimento, ícone, marca */
--brand-txt: #007B7A; /* mesma família, escurecida só para TEXTO ter contraste */
--brand-hover: #008E8D;
--brand-soft: #58B8B8;
--brand-wash: #EFF7F8;
--brand-wash2: #DEF0EF;
--brand-ink: #FFFFFF;
--brand-deep: #05555C; /* azul profundo — barra do topo, login, faixas */
--brand-deep2: #023940;
/* amarelo VOX: no brandbook é a cor de energia, leveza e otimismo.
Aqui ele carrega tudo que é conquista, celebração e progresso —
nunca erro, nunca alerta (isso é --warn/--bad, outra família). */
--am: #F9B000;
--am-txt: #8A6200;
--am-wash: #FFF7EA;
--am-wash2: #FFE9C0;
--am-ink: #241900;
--ok: #10795A; --ok-wash: #E3F4EE;
--warn: #9C6207; --warn-wash: #FBF0DF;
--bad: #BE3A32; --bad-wash: #FBE9E7;
--info: #1D6FA5; --info-wash: #E5F0F8;
--r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 20px;
--sh-1: 0 1px 2px rgba(16,29,32,.05);
--sh-2: 0 1px 2px rgba(16,29,32,.04), 0 6px 18px -6px rgba(16,29,32,.14);
--sh-3: 0 14px 44px -14px rgba(2,57,64,.34);
--sh-am: 0 6px 18px -8px rgba(249,176,0,.55);
--sidebar-w: 256px;
--topbar-h: 64px;
--tb-bg: #05555C;
--tb-line: rgba(255,255,255,.12);
--tb-ink: #EAF7F6;
--tb-ink-2: #8DBDBD;
--font-ui: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
--font-tt: "Sora", "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
--mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
color-scheme: light;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--canvas: #04191C; --surface: #0B292E; --surface-2: #103137; --surface-3: #163B41;
--ink: #E9F6F6; --ink-2: #A6C3C6; --ink-3: #6F9195;
--line: rgba(255,255,255,.10); --line-2: rgba(255,255,255,.18);
--brand: #2FAFAE; --brand-txt: #77C1C0; --brand-hover: #58B8B8; --brand-soft: #8FCBCA;
--brand-wash: rgba(0,167,166,.16); --brand-wash2: rgba(0,167,166,.24); --brand-ink: #022A2A;
--brand-deep: #04262C; --brand-deep2: #021A1F;
--am: #FBBB21; --am-txt: #FED992; --am-wash: rgba(249,176,0,.15);
--am-wash2: rgba(249,176,0,.26); --am-ink: #241900;
--ok: #3FC08F; --ok-wash: rgba(63,192,143,.15);
--warn: #E0A64F; --warn-wash: rgba(224,166,79,.15);
--bad: #E8827A; --bad-wash: rgba(232,130,122,.15);
--info: #5BB0E6; --info-wash: rgba(91,176,230,.15);
--sh-1: 0 1px 2px rgba(0,0,0,.34);
--sh-2: 0 1px 2px rgba(0,0,0,.28), 0 6px 18px -6px rgba(0,0,0,.55);
--sh-3: 0 14px 44px -14px rgba(0,0,0,.75);
--sh-am: 0 6px 18px -8px rgba(249,176,0,.4);
--tb-bg: #04262C; --tb-line: rgba(255,255,255,.09);
--tb-ink: #DDF2F0; --tb-ink-2: #79A5A6;
color-scheme: dark;
}
}
:root[data-theme="dark"] {
--canvas: #04191C; --surface: #0B292E; --surface-2: #103137; --surface-3: #163B41;
--ink: #E9F6F6; --ink-2: #A6C3C6; --ink-3: #6F9195;
--line: rgba(255,255,255,.10); --line-2: rgba(255,255,255,.18);
--brand: #2FAFAE; --brand-txt: #77C1C0; --brand-hover: #58B8B8; --brand-soft: #8FCBCA;
--brand-wash: rgba(0,167,166,.16); --brand-wash2: rgba(0,167,166,.24); --brand-ink: #022A2A;
--brand-deep: #04262C; --brand-deep2: #021A1F;
--am: #FBBB21; --am-txt: #FED992; --am-wash: rgba(249,176,0,.15);
--am-wash2: rgba(249,176,0,.26); --am-ink: #241900;
--ok: #3FC08F; --ok-wash: rgba(63,192,143,.15);
--warn: #E0A64F; --warn-wash: rgba(224,166,79,.15);
--bad: #E8827A; --bad-wash: rgba(232,130,122,.15);
--info: #5BB0E6; --info-wash: rgba(91,176,230,.15);
--sh-1: 0 1px 2px rgba(0,0,0,.34);
--sh-2: 0 1px 2px rgba(0,0,0,.28), 0 6px 18px -6px rgba(0,0,0,.55);
--sh-3: 0 14px 44px -14px rgba(0,0,0,.75);
--sh-am: 0 6px 18px -8px rgba(249,176,0,.4);
--tb-bg: #04262C; --tb-line: rgba(255,255,255,.09);
--tb-ink: #DDF2F0; --tb-ink-2: #79A5A6;
color-scheme: dark;
}
/* ------------------------------------------------------------------ base -- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
background: var(--canvas); color: var(--ink); font-family: var(--font-ui);
font-size: 14px; line-height: 1.55; font-variant-numeric: tabular-nums;
-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
min-height: 100vh; overflow-x: hidden;
}
[hidden] { display: none !important; }
a { color: var(--brand-txt); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--am-wash2); color: var(--ink); }
/* Iconografia conforme o brandbook (p.59): lineart, traço uniforme, cantos e
terminações arredondadas. Nada pontiagudo, nada geométrico demais. */
svg.ic { width: 1em; height: 1em; flex: 0 0 auto; stroke: currentColor; fill: none;
stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.mono { font-family: var(--mono); }
.muted { color: var(--ink-3); }
.small { font-size: .78rem; }
.nowrap { white-space: nowrap; }
.tcenter { text-align: center; }
.tright { text-align: right; }
/* ------------------------------------------------------------- marca VOX -- */
/* A assinatura essencial é o arquivo oficial em SVG, nunca redigitada.
"EDU" vem ao lado, em Sora, como nome do produto — não como lockup. */
.marca { display: inline-flex; align-items: center; gap: .42em; line-height: 1; }
.marca .sig { height: 1em; width: auto; display: block; }
.marca .edu {
font-family: var(--font-tt); font-weight: 700; letter-spacing: .01em;
font-size: .48em; color: var(--brand-txt); padding-top: .12em;
}
.marca.neg .edu { color: var(--am); }
/* Símbolo isolado — permitido em ícone de aplicativo e ícones internos. */
.logo-mark {
width: 38px; height: 38px; border-radius: 12px; flex: 0 0 auto;
display: flex; align-items: center; justify-content: center;
background: var(--brand-wash2); overflow: hidden;
}
.logo-mark img, .logo-mark svg { width: 62%; height: 62%; display: block; }
.logo-mark.solido { background: linear-gradient(150deg, var(--brand) 0%, var(--brand-hover) 100%);
box-shadow: 0 4px 12px -4px rgba(0,167,166,.65); }
.logo-mark.solido img { filter: brightness(0) invert(1); }
/* Grafismo oficial: repetição do balão de fala do logo (brandbook p.54).
Usado como textura de fundo — sempre discreto, sempre atrás do conteúdo,
e nunca no lugar da assinatura. */
.grafismo-baloes {
position: absolute; inset: 0; pointer-events: none; opacity: .1;
background-image: url("data:image/svg+xml;utf8,\
");
background-size: 120px 120px;
}
/* ------------------------------------------------------------- estrutura -- */
/* A barra lateral começa ABAIXO da barra do topo: em cima ficam os MÓDULOS da
suíte (onde estou), aqui dentro só o que pertence ao módulo ativo (o que faço). */
.sidebar {
position: fixed; top: var(--topbar-h); left: 0; bottom: 0; width: var(--sidebar-w); z-index: 45;
background: var(--surface); color: var(--ink);
display: flex; flex-direction: column; border-right: 1px solid var(--line);
transition: transform .24s cubic-bezier(.4,0,.2,1);
}
/* cabeçalho da lateral: rótulo miúdo em cima, nome do módulo grande embaixo */
.sb-modulo-atual { padding: 14px 16px 12px; border-bottom: 1px solid var(--line); }
.sb-modulo-atual .rotulo {
font-size: .6rem; text-transform: uppercase; letter-spacing: .16em;
color: var(--ink-3); font-weight: 700;
}
.sb-modulo-atual .nome {
display: flex; align-items: center; gap: 9px; margin-top: 4px;
font-size: 1.06rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink);
}
.sb-modulo-atual .nome svg.ic { width: 19px; height: 19px; color: var(--brand-txt); }
.sb-nav { flex: 1; overflow-y: auto; padding: 6px 12px 8px; }
.sb-sec { font-size: .6rem; text-transform: uppercase; letter-spacing: .14em;
color: var(--ink-3); padding: 15px 11px 5px; font-weight: 700; }
.sb-nav button.nav-item {
width: 100%; display: flex; align-items: center; gap: 11px; padding: 9px 11px;
border-radius: 9px; border: none; background: transparent; color: var(--ink-2);
font-family: inherit; font-size: .855rem; font-weight: 500; cursor: pointer;
position: relative; text-align: left; transition: background .13s, color .13s;
}
.sb-nav button.nav-item svg.ic { width: 17px; height: 17px; color: var(--ink-3); }
.sb-nav button.nav-item:hover { background: var(--surface-3); color: var(--ink); }
.sb-nav button.nav-item:hover svg.ic { color: var(--ink-2); }
.sb-nav button.nav-item.active {
background: var(--brand-wash); color: var(--brand-hover); font-weight: 600;
}
:root[data-theme="dark"] .sb-nav button.nav-item.active { color: var(--brand-soft); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .sb-nav button.nav-item.active { color: var(--brand-soft); }
}
.sb-nav button.nav-item.active svg.ic { color: var(--brand-txt); }
.sb-nav button.nav-item.active::before {
content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--brand);
}
/* Pé da barra lateral: assinatura do produto, não o usuário. Quem está
logado já aparece no canto superior direito — repetir aqui era ruído. */
.sb-pe { padding: 13px 16px 15px; border-top: 1px solid var(--line); }
.sb-pe .sb-assinatura { line-height: 1.3; cursor: default; }
.sb-pe .sig-marca { display: flex; align-items: baseline; gap: 7px; }
.sb-pe .sig-marca .nome { font-family: var(--font-tt); font-size: .74rem;
font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
color: var(--ink-2); transition: color .18s; }
.sb-pe .sig-marca .ver { font-size: .58rem; font-weight: 500; letter-spacing: .04em;
color: var(--ink-3); opacity: .7; font-variant-numeric: tabular-nums; }
.sb-pe .sig-credito { display: block; margin-top: 3px; font-size: .63rem; letter-spacing: .015em;
color: var(--ink-3); opacity: .85; }
.sb-pe .sig-credito b { font-weight: 600; color: var(--ink-3); transition: color .18s; }
.sb-pe .sb-assinatura:hover .sig-marca .nome,
.sb-pe .sb-assinatura:hover .sig-credito b { color: var(--brand-txt); }
/* fica ABAIXO da barra lateral (45) e da barra do topo (60), pra o menu e as
abas de módulo continuarem clicáveis com o menu aberto no celular */
.sb-fundo { position: fixed; inset: var(--topbar-h) 0 0 0; background: rgba(6,26,30,.5); z-index: 44;
opacity: 0; pointer-events: none; transition: opacity .2s; }
.sb-fundo.on { opacity: 1; pointer-events: auto; }
.app-body { margin-left: var(--sidebar-w); padding-top: var(--topbar-h);
display: flex; flex-direction: column; min-height: 100vh; min-width: 0; }
/* ---- barra do topo: MARCA à esquerda · MÓDULOS no centro · ações à direita -- */
.topbar {
position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: var(--topbar-h);
background: var(--tb-bg); color: var(--tb-ink);
border-bottom: 1px solid var(--tb-line);
display: flex; align-items: center; gap: 10px; padding: 0 16px;
}
.tb-menu { display: none; background: transparent; border: none; color: var(--tb-ink-2);
cursor: pointer; padding: 9px; border-radius: 9px; line-height: 0; flex: 0 0 auto; }
.tb-menu svg.ic { width: 20px; height: 20px; }
.tb-menu:hover { background: rgba(255,255,255,.09); color: #fff; }
/* marca e ações crescem igual dos dois lados, então as abas de módulo ficam
exatamente no centro da barra — não só "no meio do que sobrou". */
.tb-marca { display: flex; align-items: center; gap: 10px; flex: 1 1 0; min-width: 0;
padding-right: 14px; border-right: 1px solid var(--tb-line); }
.tb-marca .logo-mark { width: 34px; height: 34px; border-radius: 9px; font-size: .88rem; }
.tb-marca .nome { font-size: 1.04rem; color: #fff; }
.tb-marca .nome .edu { color: var(--brand-soft); }
.tb-marca .unidade { font-size: .67rem; color: var(--tb-ink-2); margin-top: 2px;
max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* com 2+ unidades a linha da unidade vira um seletor, sem mudar de lugar */
.tb-marca select.unidade {
appearance: none; -webkit-appearance: none; border: none; background: transparent;
color: var(--tb-ink-2); font-family: inherit; font-size: .67rem; font-weight: 600;
padding: 1px 14px 1px 0; margin-top: 1px; cursor: pointer; max-width: 200px;
background-image: linear-gradient(45deg, transparent 50%, var(--tb-ink-2) 50%),
linear-gradient(135deg, var(--tb-ink-2) 50%, transparent 50%);
background-position: right 4px top 60%, right 0px top 60%;
background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.tb-marca select.unidade:hover { color: #fff; }
.tb-marca select.unidade option { color: var(--ink); background: var(--surface); }
/* abas de módulo — centralizadas entre a marca e as ações */
.tb-modulos {
flex: 0 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center;
gap: 3px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.tb-modulos::-webkit-scrollbar { display: none; }
.tb-mod {
display: flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 9px;
border: none; background: transparent; color: var(--tb-ink-2); font-family: inherit;
font-size: .85rem; font-weight: 600; white-space: nowrap; cursor: pointer;
position: relative; transition: background .14s, color .14s;
}
.tb-mod svg.ic { width: 16px; height: 16px; }
.tb-mod:hover { background: rgba(255,255,255,.08); color: #fff; }
.tb-mod.ativo { background: var(--brand); color: #fff; }
.tb-mod.ativo::after {
content: ""; position: absolute; left: 13px; right: 13px; bottom: -12px;
height: 3px; border-radius: 3px 3px 0 0; background: var(--brand-soft);
}
.tb-mod .selo {
font-size: .55rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 700;
color: var(--tb-ink-2); background: rgba(255,255,255,.09);
border-radius: 999px; padding: 3px 6px; white-space: nowrap;
}
.tb-mod.breve { color: var(--tb-ink-2); }
.tb-mod.breve:hover { background: rgba(255,255,255,.06); }
.tb-dir { display: flex; align-items: center; justify-content: flex-end; gap: 7px;
flex: 1 1 0; min-width: 0; }
.tb-busca { position: relative; display: none; }
@media (min-width: 1180px) { .tb-busca { display: block; } }
.tb-busca svg.ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
width: 15px; height: 15px; color: var(--tb-ink-2); pointer-events: none; }
.tb-busca input[type=search] {
width: 200px; padding: 8px 14px 8px 34px; font-size: .82rem; border-radius: 999px;
border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.08); color: #fff;
font-family: inherit; transition: width .18s, border-color .14s, background .14s;
}
.tb-busca input::placeholder { color: var(--tb-ink-2); }
.tb-busca input[type=search]:focus {
width: 265px; outline: none; border-color: var(--brand-soft);
background: rgba(255,255,255,.14); box-shadow: none;
}
/* caminho da tela, que antes ficava na barra do topo */
.pagina-caminho { font-size: .71rem; color: var(--ink-3); font-weight: 600;
letter-spacing: .02em; margin-bottom: 10px; }
.tb-res {
position: absolute; top: calc(100% + 8px); left: 0; width: 330px; z-index: 50;
background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
box-shadow: var(--sh-3); overflow: hidden; max-height: 360px; overflow-y: auto;
}
.tb-res button.res {
display: block; width: 100%; text-align: left; padding: 10px 13px; border: none;
background: transparent; color: var(--ink); font-family: inherit; cursor: pointer;
border-bottom: 1px solid var(--line);
}
.tb-res button.res:last-child { border-bottom: none; }
.tb-res button.res:hover { background: var(--brand-wash); }
.tb-res .n { font-size: .84rem; font-weight: 600; }
.tb-res .d { font-size: .72rem; color: var(--ink-3); }
.tb-btn { background: transparent; border: 1px solid transparent; color: var(--tb-ink-2);
cursor: pointer; padding: 9px; border-radius: 10px; line-height: 0; position: relative;
display: flex; align-items: center; justify-content: center; }
.tb-btn svg.ic { width: 19px; height: 19px; }
.tb-btn:hover { background: rgba(255,255,255,.09); color: #fff; }
.tb-btn .contador {
position: absolute; top: 0; right: 0; min-width: 16px; height: 16px; padding: 0 4px;
background: var(--bad); color: #fff; border-radius: 999px; font-size: .61rem; font-weight: 700;
display: flex; align-items: center; justify-content: center; line-height: 1;
box-shadow: 0 0 0 2px var(--tb-bg); pointer-events: none;
}
.tb-user { display: flex; align-items: center; gap: 9px; padding: 4px 10px 4px 4px;
border-radius: 999px; border: 1px solid rgba(255,255,255,.15);
background: rgba(255,255,255,.07); cursor: pointer; color: #fff; font-family: inherit; }
.tb-user:hover { border-color: var(--brand-soft); background: rgba(255,255,255,.12); }
.tb-user .quem { text-align: left; line-height: 1.15; display: none; }
@media (min-width: 1320px) { .tb-user .quem { display: block; } }
.tb-user .quem b { font-size: .78rem; font-weight: 600; display: block; }
.tb-user .quem span { font-size: .67rem; color: var(--tb-ink-2); }
.menu-flutuante {
position: absolute; top: calc(100% + 8px); right: 0; width: 220px; z-index: 70;
background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
box-shadow: var(--sh-3); overflow: hidden; padding: 5px;
}
.menu-flutuante button {
width: 100%; display: flex; align-items: center; gap: 9px; padding: 9px 10px;
border: none; background: transparent; color: var(--ink); font-family: inherit;
font-size: .83rem; text-align: left; border-radius: 8px; cursor: pointer;
}
.menu-flutuante button:hover { background: var(--surface-3); }
.menu-flutuante svg.ic { width: 16px; height: 16px; color: var(--ink-3); }
.menu-flutuante hr { border: none; border-top: 1px solid var(--line); margin: 5px 0; }
.avatar {
width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto;
display: flex; align-items: center; justify-content: center;
font-size: .73rem; font-weight: 700; color: #fff; letter-spacing: .02em;
background: var(--brand);
}
.avatar.lg { width: 38px; height: 38px; font-size: .82rem; }
.avatar.sm { width: 26px; height: 26px; font-size: .63rem; }
main { flex: 1; padding: 22px 20px 40px; max-width: 1400px; width: 100%; margin: 0 auto; }
.rodape-marca {
display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
padding: 6px 20px 28px; color: var(--ink-3); font-size: .74rem;
}
.rodape-marca .marca { font-size: .82rem; }
@media (max-width: 1023px) {
.sidebar { transform: translateX(-100%); box-shadow: var(--sh-3); }
.sidebar.aberta { transform: none; }
.app-body { margin-left: 0; }
.tb-menu { display: block; }
main { padding: 16px 14px 36px; }
}
/* No celular as abas de módulo continuam na barra do topo — só passam a rolar
na horizontal e encostam à esquerda, em vez de sumirem. */
@media (max-width: 900px) {
.topbar { padding: 0 10px; gap: 6px; }
/* aqui as abas passam a ficar com todo o espaço que sobra, rolando na horizontal */
.tb-marca { padding-right: 10px; flex: 0 0 auto; }
.tb-dir { flex: 0 0 auto; }
.tb-marca .nome { font-size: .95rem; }
.tb-marca .unidade, .tb-marca select.unidade { display: none; }
.tb-modulos { flex: 1 1 auto; justify-content: flex-start; }
.tb-mod { padding: 7px 10px; font-size: .8rem; }
.tb-mod .selo { display: none; }
.tb-mod.breve::after {
content: "•"; position: static; height: auto; width: auto; background: none;
color: var(--tb-ink-2); font-size: .8rem; line-height: 0;
}
}
@media (max-width: 620px) {
.tb-marca .nome { display: none; }
.tb-marca { border-right: none; padding-right: 4px; }
}
/* ------------------------------------------------------------ tipografia -- */
.pagina-topo { display: flex; justify-content: space-between; align-items: flex-start;
gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
h2.titulo-secao { font-family: var(--font-tt); font-size: 1.34rem; margin: 0 0 3px;
font-weight: 700; letter-spacing: -0.035em; }
p.dica { color: var(--ink-3); font-size: .82rem; line-height: 1.6; margin: 0; max-width: 76ch; }
h3.sub-titulo { font-family: var(--font-tt); font-size: .88rem; margin: 20px 0 10px;
font-weight: 600; letter-spacing: -0.02em; }
.nota-rodape { font-size: .77rem; color: var(--ink-3); line-height: 1.65; margin-top: 18px; max-width: 80ch; }
/* --------------------------------------------------------------- blocos --- */
.card, .panel {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
box-shadow: var(--sh-1);
}
.card { padding: 16px; }
.panel { overflow: hidden; }
.panel + .panel, .card + .card { margin-top: 14px; }
.panel-head { display: flex; align-items: center; gap: 10px; padding: 13px 16px 11px;
border-bottom: 1px solid var(--line); }
.panel-head h3 { font-family: var(--font-tt); margin: 0; font-size: .9rem; font-weight: 600;
letter-spacing: -0.02em; }
.panel-head .sub { font-size: .73rem; color: var(--ink-3); margin-top: 1px; }
/* Botão-link discreto. Nasceu no cabeçalho dos painéis, mas também é o que
veste os números clicáveis das tabelas — daí a regra base solta aqui: as
variantes abaixo são mais específicas e continuam mandando onde já mandavam. */
button.acao, a.acao {
background: none; border: none; padding: 2px 4px; margin: 0;
font: inherit; color: var(--brand-txt); cursor: pointer; border-radius: 5px;
transition: background .12s, color .12s;
}
button.acao:hover, a.acao:hover { background: var(--brand-wash); }
button.acao .muted { color: var(--ink-3); }
.panel-head .acao { margin-left: auto; font-size: .76rem; font-weight: 600; color: var(--brand-txt);
background: transparent; border: none; font-family: inherit; cursor: pointer;
padding: 5px 9px; border-radius: 7px; white-space: nowrap; }
.panel-head .acao:hover { background: var(--brand-wash); }
.panel-body { padding: 16px; }
.panel-body.aperta { padding: 8px; }
.grid { display: grid; gap: 14px; }
.grid.g2, .grid.g3, .grid.g4, .grid.g21 { grid-template-columns: 1fr; }
@media (min-width: 720px) {
.grid.g2 { grid-template-columns: repeat(2,1fr); }
.grid.g4 { grid-template-columns: repeat(2,1fr); }
}
@media (min-width: 1080px) {
.grid.g3 { grid-template-columns: repeat(3,1fr); }
.grid.g4 { grid-template-columns: repeat(4,1fr); }
.grid.g21 { grid-template-columns: 2fr 1fr; }
}
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; gap: 10px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.row.top { align-items: flex-start; }
.row.fim { align-items: flex-end; }
.grow { flex: 1; min-width: 0; }
.mb { margin-bottom: 16px; }
.mt { margin-top: 16px; }
.divider { height: 1px; background: var(--line); margin: 16px 0; border: none; }
/* ------------------------------------------------------------------ KPI --- */
.kpi-row { display: grid; gap: 12px; margin-bottom: 18px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 660px) { .kpi-row { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1180px) { .kpi-row { grid-template-columns: repeat(4, 1fr); } }
.kpi {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
padding: 14px; box-shadow: var(--sh-1); display: flex; gap: 12px; align-items: flex-start;
font-family: inherit; text-align: left; width: 100%;
transition: border-color .15s, box-shadow .15s, transform .15s;
}
button.kpi { cursor: pointer; color: inherit; }
button.kpi:hover { border-color: var(--brand-soft); box-shadow: var(--sh-2); transform: translateY(-1px); }
.kpi-ic { width: 38px; height: 38px; border-radius: 11px; flex: 0 0 auto;
display: flex; align-items: center; justify-content: center;
background: var(--brand-wash); color: var(--brand-txt); }
.kpi-ic svg.ic { width: 18px; height: 18px; }
.kpi-ic.ok { background: var(--ok-wash); color: var(--ok); }
.kpi-ic.warn { background: var(--warn-wash); color: var(--warn); }
.kpi-ic.bad { background: var(--bad-wash); color: var(--bad); }
.kpi-ic.info { background: var(--info-wash); color: var(--info); }
.kpi .txt { min-width: 0; }
.kpi .k { font-size: .725rem; color: var(--ink-3); font-weight: 500; line-height: 1.3; }
.kpi .v { font-family: var(--font-tt); font-size: 1.62rem; font-weight: 700;
letter-spacing: -0.045em; line-height: 1.12; margin-top: 3px; }
.kpi .v.menor { font-size: 1.05rem; letter-spacing: -0.02em; }
.delta { display: inline-flex; align-items: center; gap: 3px; font-size: .71rem;
font-weight: 600; margin-top: 3px; color: var(--ink-3); }
.delta svg.ic { width: 12px; height: 12px; }
.delta.sobe { color: var(--ok); }
.delta.desce { color: var(--bad); }
/* ------------------------------------------------------------- elementos -- */
.icon-tile { width: 40px; height: 40px; border-radius: var(--r); flex: 0 0 auto;
display: flex; align-items: center; justify-content: center;
background: var(--brand-wash); color: var(--brand-txt); font-weight: 700; font-size: .8rem; }
.icon-tile svg.ic { width: 18px; height: 18px; }
.icon-tile.sm { width: 32px; height: 32px; border-radius: 9px; }
.icon-tile.ok { background: var(--ok-wash); color: var(--ok); }
.icon-tile.warn { background: var(--warn-wash); color: var(--warn); }
.icon-tile.bad { background: var(--bad-wash); color: var(--bad); }
.icon-tile.info { background: var(--info-wash); color: var(--info); }
.item-lista { display: flex; flex-direction: column; }
.item { display: flex; align-items: center; gap: 12px; padding: 11px 16px;
border-bottom: 1px solid var(--line); color: inherit; text-align: left;
background: transparent; border-left: none; border-right: none; border-top: none;
font-family: inherit; width: 100%; }
.item:last-child { border-bottom: none; }
.item.clicavel { cursor: pointer; transition: background .13s; }
.item.clicavel:hover { background: var(--surface-2); }
.item .titulo { font-size: .87rem; font-weight: 600; letter-spacing: -0.005em; }
.item .meta { font-size: .74rem; color: var(--ink-3); margin-top: 2px;
display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.item .meta svg.ic { width: 12px; height: 12px; }
.item .meta .mi { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.item .meta .mi span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .dir { margin-left: auto; text-align: right; flex: 0 0 auto; }
.item .num { font-size: .95rem; font-weight: 700; }
.item .num.g { font-size: 1.3rem; letter-spacing: -0.02em; }
.legenda { display: flex; flex-direction: column; gap: 7px; }
.legenda .li { display: flex; align-items: center; gap: 9px; font-size: .8rem; }
.legenda .li .bolinha { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.legenda .li .rot { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legenda .li .n { margin-left: auto; font-weight: 700; }
.legenda .li .pc { color: var(--ink-3); width: 38px; text-align: right; font-size: .75rem; }
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px;
font-size: .69rem; font-weight: 700; white-space: nowrap; letter-spacing: .01em; }
.pill svg.ic { width: 11px; height: 11px; }
.pill-ok { background: var(--ok-wash); color: var(--ok); }
.pill-warn { background: var(--warn-wash); color: var(--warn); }
.pill-bad { background: var(--bad-wash); color: var(--bad); }
.pill-neutral { background: var(--brand-wash); color: var(--brand-hover); }
.pill-info { background: var(--info-wash); color: var(--info); }
.pill-off { background: var(--surface-3); color: var(--ink-3); }
:root[data-theme="dark"] .pill-neutral { color: var(--brand-soft); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .pill-neutral { color: var(--brand-soft); }
}
/* barra de progresso (linha do tempo da turma) */
.barra { height: 7px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.barra > i { display: block; height: 100%; background: var(--brand); border-radius: 999px;
transition: width .45s cubic-bezier(.4,0,.2,1); }
.barra.completa > i { background: var(--ok); }
.barra.atrasada > i { background: var(--warn); }
/* aviso destacado (usado nos valores a confirmar da remuneração) */
.aviso { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px;
border-radius: var(--r); font-size: .8rem; line-height: 1.55;
background: var(--warn-wash); color: var(--warn); border: 1px solid transparent; }
.aviso svg.ic { width: 16px; height: 16px; margin-top: 1px; }
.aviso.info { background: var(--info-wash); color: var(--info); }
.aviso.ok { background: var(--ok-wash); color: var(--ok); }
.aviso b { font-weight: 700; }
/* ------------------------------------------------------------ formulário -- */
/* `input:not([type])` está aqui de propósito: campo sem `type` (o CPF e o
WhatsApp do portal, por exemplo) ficava fora da regra e aparecia estreito,
com a cara do input cru do navegador. */
input:not([type]),
input[type=text], input[type=number], input[type=tel], input[type=password], input[type=date],
input[type=time], input[type=month], input[type=email], input[type=search], input[type=url],
input[type=file], select, textarea {
width: 100%; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink);
border-radius: var(--r-sm); padding: 9px 11px; font-size: .88rem; font-family: inherit;
transition: border-color .13s, box-shadow .13s;
}
input:focus, select:focus, textarea:focus {
outline: none; border-color: var(--brand-soft); box-shadow: 0 0 0 3px var(--brand-wash);
}
input:disabled, select:disabled, textarea:disabled { background: var(--surface-2); color: var(--ink-2); }
/* o preenchimento automático do Chrome pintava o campo de amarelo/marrom,
destoando do tema — aqui ele volta pras cores do sistema */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
-webkit-text-fill-color: var(--ink);
-webkit-box-shadow: 0 0 0 1000px var(--surface) inset;
caret-color: var(--ink);
transition: background-color 9999s ease-in-out 0s;
}
textarea { min-height: 80px; resize: vertical; line-height: 1.5; }
label.rotulo { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
color: var(--ink-3); display: block; margin-bottom: 5px; font-weight: 700; }
.field { margin-bottom: 13px; }
.field:last-child { margin-bottom: 0; }
.field .ajuda { font-size: .72rem; color: var(--ink-3); margin-top: 4px; }
.field-row { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 580px) {
.field-row.duas { grid-template-columns: 1fr 1fr; }
.field-row.tres { grid-template-columns: repeat(3,1fr); }
.field-row.quatro { grid-template-columns: repeat(2,1fr); }
}
@media (min-width: 900px) { .field-row.quatro { grid-template-columns: repeat(4,1fr); } }
label.check { display: flex; align-items: center; gap: 8px; font-size: .85rem; cursor: pointer; }
label.check input { width: auto; }
input[type=range] { width: 100%; accent-color: var(--brand-txt); }
.btn { border: 1px solid transparent; border-radius: var(--r-sm); padding: 9px 15px;
font-size: .85rem; font-weight: 600; cursor: pointer; font-family: inherit;
display: inline-flex; align-items: center; justify-content: center; gap: 7px;
text-decoration: none; white-space: nowrap;
transition: background .13s, border-color .13s, color .13s, opacity .13s; }
.btn svg.ic { width: 15px; height: 15px; }
.btn-primary { background: var(--brand); color: var(--brand-ink); }
.btn-primary:hover { background: var(--brand-hover); }
.btn-escuro { background: var(--brand-deep); color: #fff; }
.btn-escuro:hover { background: var(--brand-deep2); }
.btn-ghost { background: var(--surface); color: var(--ink-2); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); border-color: var(--ink-3); }
.btn-danger { background: var(--bad-wash); color: var(--bad); }
.btn-danger:hover { background: var(--bad); color: #fff; }
.btn-success { background: var(--ok-wash); color: var(--ok); }
.btn-success:hover { background: var(--ok); color: #fff; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-block { width: 100%; }
.btn-sm { padding: 6px 11px; font-size: .77rem; border-radius: 7px; }
.btn-lg { padding: 13px 20px; font-size: .95rem; border-radius: var(--r); }
.chip-linha { display: flex; gap: 7px; flex-wrap: wrap; }
.chip { border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2);
border-radius: 999px; padding: 6px 13px; font-size: .78rem; font-weight: 600;
cursor: pointer; font-family: inherit; transition: all .13s; white-space: nowrap; }
.chip:hover { border-color: var(--brand-soft); }
.chip.ativo { background: var(--brand); color: var(--brand-ink); border-color: var(--brand-txt); }
/* segmentado de presença — alvos grandes, pensados pro celular na sala */
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; }
.seg button { border: none; background: var(--surface); padding: 10px 14px; font-size: .8rem;
font-weight: 600; cursor: pointer; color: var(--ink-3); font-family: inherit;
min-height: 42px; border-right: 1px solid var(--line); }
.seg button:last-child { border-right: none; }
.seg button:hover { background: var(--surface-2); }
.seg button.on-presente { background: var(--ok-wash); color: var(--ok); }
.seg button.on-falta { background: var(--bad-wash); color: var(--bad); }
.seg button.on-reposicao { background: var(--warn-wash); color: var(--warn); }
@media (max-width: 520px) { .seg { width: 100%; } .seg button { flex: 1; padding: 10px 6px; } }
/* linha de presença */
.presenca-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--line); }
.presenca-row:last-child { border-bottom: none; }
.presenca-row > .quem { flex: 1 1 220px; min-width: 0; }
.presenca-row .nome { font-size: .89rem; font-weight: 600; }
/* ------------------------------------------------------------ permissões -- */
/* São muitas funções — a tela precisa ser rápida de operar, não um paredão de
caixinhas soltas: agrupada igual ao menu, com atalhos por módulo e por grupo. */
.perm-modulo { border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 10px; overflow: hidden; }
.perm-modulo .cab { display: flex; align-items: center; gap: 9px; padding: 10px 12px;
background: var(--surface-2); border-bottom: 1px solid var(--line); }
.perm-modulo .cab svg.ic { width: 16px; height: 16px; color: var(--brand-txt); }
.perm-modulo .cab b { font-size: .87rem; }
.perm-modulo .cab .conta { font-size: .72rem; color: var(--ink-3); }
.perm-modulo.desligado { opacity: .6; }
.perm-grupo { padding: 9px 12px; border-bottom: 1px dashed var(--line); }
.perm-grupo:last-child { border-bottom: none; }
.perm-grupo .rot { display: flex; align-items: center; gap: 8px; font-size: .65rem;
text-transform: uppercase; letter-spacing: .09em; color: var(--ink-3);
font-weight: 700; margin-bottom: 6px; }
.perm-itens { display: grid; grid-template-columns: 1fr; gap: 3px 16px; }
@media (min-width: 560px) { .perm-itens { grid-template-columns: 1fr 1fr; } }
.perm-itens label { font-size: .82rem; padding: 3px 0; }
.link-mini { background: none; border: none; color: var(--brand-txt); font-family: inherit;
font-size: .71rem; font-weight: 700; cursor: pointer; padding: 2px 7px;
border-radius: 6px; white-space: nowrap; }
.link-mini:hover { background: var(--brand-wash); }
/* -------------------------------------------------------------- tabelas --- */
table.data { width: 100%; border-collapse: collapse; font-size: .84rem; }
table.data th, table.data td { text-align: left; padding: 10px 12px;
border-bottom: 1px solid var(--line); white-space: nowrap; }
table.data thead th { font-size: .66rem; text-transform: uppercase; letter-spacing: .08em;
color: var(--ink-3); font-weight: 700; background: var(--surface-2); }
table.data tbody tr { transition: background .12s; }
table.data tbody tr:hover { background: var(--surface-2); }
table.data tbody tr:last-child td { border-bottom: none; }
table.data td.wrap, table.data th.wrap { white-space: normal; min-width: 160px; }
table.data td.acoes { text-align: right; }
table.data td.acoes .btn { margin-left: 5px; }
table.data input, table.data select { padding: 6px 8px; font-size: .8rem; }
/* qualquer conteúdo largo rola dentro do próprio container, nunca o body */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* --------------------------------------------------- agenda / calendário -- */
.calgrid { display: grid; grid-template-columns: 62px repeat(7, minmax(96px, 1fr));
border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
min-width: 760px; background: var(--surface); }
.calgrid .h { background: var(--surface-2); padding: 8px 6px; font-size: .72rem; font-weight: 700;
text-align: center; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); }
.calgrid .h:first-child { border-left: none; }
.calgrid .h .d { font-size: .66rem; color: var(--ink-3); font-weight: 500; }
.calgrid .h.hoje { background: var(--brand-wash); color: var(--brand-hover); }
.calgrid .hourlbl { padding: 6px 8px 6px 0; font-size: .68rem; color: var(--ink-3);
border-top: 1px solid var(--line); text-align: right; }
.calgrid .cell { min-height: 36px; border-top: 1px solid var(--line);
border-left: 1px solid var(--line); padding: 2px; }
.slot { background: var(--brand); color: #fff; border: none; font-family: inherit;
border-radius: 6px; padding: 4px 6px; font-size: .67rem; line-height: 1.25;
cursor: pointer; overflow: hidden; width: 100%; text-align: left; display: block;
margin-bottom: 2px; }
.slot.concluido { background: var(--ok); }
.slot.cancelado { background: var(--ink-3); text-decoration: line-through; }
.slot:hover { filter: brightness(1.1); }
/* --------------------------------------------- grade de ocupação de salas -- */
.ocupagrid { display: grid; grid-template-columns: 62px repeat(6, minmax(130px, 1fr));
border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
min-width: 860px; background: var(--surface); }
.ocupagrid .h { background: var(--surface-2); padding: 9px 8px; font-size: .74rem; font-weight: 700;
text-align: center; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); }
.ocupagrid .h:first-child { border-left: none; }
.ocupagrid .hourlbl { padding: 6px 8px 6px 0; font-size: .68rem; color: var(--ink-3);
border-top: 1px solid var(--line); text-align: right; }
.ocupagrid .cell { min-height: 40px; border-top: 1px solid var(--line);
border-left: 1px solid var(--line); padding: 3px; }
.aloc { border-radius: 7px; padding: 5px 7px; font-size: .69rem; line-height: 1.3;
margin-bottom: 3px; border-left: 3px solid; background: var(--surface-2); }
.aloc b { display: block; font-size: .73rem; }
.aloc .sub { color: var(--ink-3); }
.aloc.conflito { background: var(--bad-wash); border-color: var(--bad) !important; color: var(--bad); }
.aloc.conflito .sub { color: var(--bad); }
/* ---------------------------------------------------------------- misc ---- */
.vazio { text-align: center; color: var(--ink-3); font-size: .84rem; padding: 30px 16px;
display: flex; flex-direction: column; align-items: center; gap: 9px; }
.vazio svg.ic { width: 26px; height: 26px; color: var(--line-2); stroke-width: 1.5; }
.vazio .acao { margin-top: 4px; }
.toast {
position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(12px);
background: var(--ink); color: var(--canvas); padding: 11px 18px; border-radius: 999px;
font-size: .83rem; font-weight: 600; box-shadow: var(--sh-3); opacity: 0;
pointer-events: none; transition: opacity .2s, transform .2s; z-index: 95;
max-width: 92%; text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { background: var(--bad); color: #fff; }
.modal-fundo { position: fixed; inset: 0; background: rgba(6,26,30,.55); z-index: 80;
display: flex; align-items: center; justify-content: center; padding: 16px;
backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.modal { background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--sh-3);
border: 1px solid var(--line); width: 100%; max-width: 560px; max-height: 90vh;
overflow-y: auto; padding: 20px; }
.modal.larga { max-width: 760px; }
.modal-topo { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.modal-topo h3 { margin: 0; font-size: 1.02rem; font-weight: 600; letter-spacing: -0.015em; }
.modal-topo .sub { font-size: .75rem; color: var(--ink-3); margin-top: 2px; }
.modal-topo .fechar { margin-left: auto; background: transparent; border: none; cursor: pointer;
color: var(--ink-3); padding: 4px; border-radius: 7px; line-height: 0; }
.modal-topo .fechar:hover { background: var(--surface-3); color: var(--ink); }
.modal-topo .fechar svg.ic { width: 18px; height: 18px; }
.modal-acoes { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 18px; }
.kv { font-size: .86rem; margin-bottom: 11px; }
.kv b { display: block; font-size: .66rem; color: var(--ink-3); text-transform: uppercase;
letter-spacing: .08em; margin-bottom: 2px; font-weight: 700; }
.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 14px;
overflow-x: auto; }
.abas button { background: none; border: none; padding: 9px 13px; font-size: .82rem; font-weight: 600;
color: var(--ink-3); cursor: pointer; border-bottom: 2px solid transparent;
font-family: inherit; white-space: nowrap; }
.abas button.active { color: var(--brand-txt); border-bottom-color: var(--brand-txt); }
video.camera { width: 100%; max-width: 420px; border-radius: var(--r); background: #000;
display: block; aspect-ratio: 4/3; object-fit: cover; }
/* -------------------------------------------------------------- login ----- */
.login-wrap {
min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px;
background:
radial-gradient(900px 460px at 18% -10%, rgba(15,169,160,.45) 0%, transparent 62%),
radial-gradient(700px 420px at 92% 108%, rgba(15,169,160,.22) 0%, transparent 60%),
var(--brand-deep2);
position: relative; overflow: hidden;
}
/* ondas sutis — a marca é VOX (voz): a assinatura visual é a onda sonora,
não um gradiente roxo qualquer */
.login-wrap::before {
content: ""; position: absolute; inset: auto 0 0 0; height: 220px; opacity: .16;
background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 14px);
-webkit-mask-image: radial-gradient(120% 100% at 50% 120%, #000 30%, transparent 72%);
mask-image: radial-gradient(120% 100% at 50% 120%, #000 30%, transparent 72%);
pointer-events: none;
}
.login-card { width: 100%; max-width: 380px; background: var(--surface); position: relative;
border-radius: var(--r-xl); box-shadow: var(--sh-3); padding: 28px; }
.login-marca { text-align: center; margin-bottom: 22px; }
.login-marca .logo-mark { width: 54px; height: 54px; border-radius: 15px; font-size: 1.3rem;
margin: 0 auto 12px; }
.login-marca h1 { font-size: 1.6rem; margin: 0; }
.login-marca p { font-size: .79rem; color: var(--ink-3); margin: 5px 0 0; }
.login-erro { background: var(--bad-wash); color: var(--bad); padding: 10px 12px;
border-radius: var(--r-sm); font-size: .81rem; margin-bottom: 14px; }
.login-pe { text-align: center; margin-top: 20px; font-size: .72rem; color: var(--ink-3); }
/* -------------------------------------------------------------- animação -- */
.aparece { animation: aparece .3s cubic-bezier(.4,0,.2,1) both; }
@keyframes aparece { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.skel { background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 50%, var(--surface-3) 75%);
background-size: 200% 100%; animation: skel 1.3s ease-in-out infinite; border-radius: var(--r-sm);
height: 14px; }
@keyframes skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition: none !important; animation: none !important; }
}
/* ------------------------------------------------------------- impressão -- */
@media print {
.sidebar, .topbar, .sb-fundo, .rodape-marca, .toast, .nao-imprimir { display: none !important; }
.app-body { margin-left: 0 !important; }
body { background: #fff; color: #000; }
main { padding: 0; max-width: none; }
.panel, .card, .kpi { box-shadow: none; break-inside: avoid; }
}
/* ==========================================================================
Módulo Franqueadora
Cartões de conteúdo vindo do portal da Vox2You, aviso de novidade e agenda
da rede. Segue os mesmos tokens do resto do sistema — nada de cor solta.
========================================================================== */
.aviso.warn { background: var(--warn-wash); color: var(--warn); }
.dica { color: var(--ink-3); font-size: .82rem; line-height: 1.6; }
/* selo com o número de não lidos, na aba do módulo no topo */
.tb-mod .selo-num { display: inline-flex; align-items: center; justify-content: center;
min-width: 17px; height: 17px; padding: 0 5px; margin-left: 5px; border-radius: 999px;
background: var(--bad); color: #fff; font-size: .62rem; font-weight: 800; line-height: 1; }
/* --- lista de conteúdo --- */
.franq-lista { display: grid; gap: 10px; }
.franq-lista.grade { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.franq-card { display: flex; gap: 14px; background: var(--surface); border: 1px solid var(--line);
border-radius: var(--r); padding: 13px 15px; cursor: pointer; text-align: left;
transition: border-color .15s, box-shadow .15s, transform .15s; position: relative; }
.franq-card:hover { border-color: var(--brand-txt); box-shadow: var(--sh-1); transform: translateY(-1px); }
.franq-card.novo { border-left: 3px solid var(--brand); }
.franq-card h3 { margin: 5px 0 4px; font-size: .93rem; font-weight: 700; line-height: 1.35;
letter-spacing: -.01em; }
.franq-card p { margin: 0; font-size: .8rem; color: var(--ink-3); line-height: 1.55; }
.franq-corpo { flex: 1; min-width: 0; }
.franq-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.franq-data { font-size: .72rem; color: var(--ink-3); font-weight: 600; }
.franq-rodape { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 8px; }
.franq-cat, .franq-ext { font-size: .68rem; color: var(--ink-3); background: var(--surface-3);
border-radius: 5px; padding: 2px 7px; font-weight: 600; max-width: 100%;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.franq-ext { background: var(--brand-wash); color: var(--brand-hover); letter-spacing: .04em; }
.franq-capa { flex: 0 0 84px; height: 84px; border-radius: 8px; overflow: hidden;
background: var(--surface-3); }
.franq-capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* na grade de marketing o cartão vira vertical, com a capa em cima */
.franq-lista.grade .franq-card { flex-direction: column; gap: 10px; padding: 0; overflow: hidden; }
.franq-lista.grade .franq-capa { flex: none; width: 100%; height: 132px; border-radius: 0; }
.franq-lista.grade .franq-corpo { padding: 0 13px 13px; }
.franq-lista.grade .franq-card:not(:has(.franq-capa)) .franq-corpo { padding-top: 13px; }
.franq-paginador { display: flex; align-items: center; justify-content: center; gap: 14px;
margin-top: 16px; flex-wrap: wrap; }
/* --- detalhe --- */
.franq-previa { margin-bottom: 14px; border-radius: var(--r); overflow: hidden;
background: var(--surface-3); max-height: 320px; display: flex; justify-content: center; }
.franq-previa img { max-width: 100%; max-height: 320px; object-fit: contain; display: block; }
.franq-texto { font-size: .88rem; line-height: 1.7; color: var(--ink-1); overflow-wrap: anywhere; }
.franq-texto p { margin: 0 0 10px; }
.franq-texto a { color: var(--brand-hover); }
.franq-texto img { max-width: 100%; height: auto; border-radius: 8px; }
.franq-texto table { width: 100%; border-collapse: collapse; font-size: .82rem; margin: 10px 0; }
.franq-texto td, .franq-texto th { border: 1px solid var(--line); padding: 6px 9px; }
.franq-texto ul, .franq-texto ol { padding-left: 20px; margin: 0 0 10px; }
/* --- eventos da rede --- */
.franq-evento { display: flex; gap: 14px; align-items: center; padding: 10px 0;
border-bottom: 1px solid var(--line); }
.franq-evento:last-child { border-bottom: none; }
.franq-evento .dia { flex: 0 0 46px; text-align: center; background: var(--brand-wash);
border-radius: 8px; padding: 6px 0; }
.franq-evento .dia b { display: block; font-size: 1.05rem; color: var(--brand-hover); line-height: 1; }
.franq-evento .dia span { font-size: .64rem; text-transform: uppercase; color: var(--ink-3);
font-weight: 700; letter-spacing: .06em; }
.franq-evento h4 { margin: 0 0 2px; font-size: .87rem; font-weight: 700; }
.franq-evento.passado { opacity: .55; }
.franq-evento.passado .dia { background: var(--surface-3); }
.franq-evento.passado .dia b { color: var(--ink-3); }
/* --- aviso de novidade dentro do sistema --- */
.franq-banner { position: fixed; right: 16px; bottom: 16px; z-index: 90; max-width: min(380px, calc(100vw - 32px));
display: flex; align-items: center; gap: 12px; padding: 13px 15px; background: var(--surface);
border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: var(--r);
box-shadow: var(--sh-2); transform: translateY(18px); opacity: 0;
transition: transform .25s ease, opacity .25s ease; }
.franq-banner.on { transform: translateY(0); opacity: 1; }
.franq-banner svg.ic { width: 20px; height: 20px; color: var(--brand-txt); flex: none; }
.franq-banner > div { flex: 1; min-width: 0; font-size: .82rem; line-height: 1.4; }
.franq-banner > div span { display: block; color: var(--ink-3); font-size: .75rem; }
.franq-banner .btn { flex: none; }
.franq-banner .fechar { background: none; border: none; cursor: pointer; color: var(--ink-3);
padding: 2px; display: flex; }
.franq-banner .fechar svg.ic { width: 15px; height: 15px; color: inherit; }
@media (max-width: 640px) {
.franq-card { flex-direction: column; gap: 10px; }
.franq-capa { width: 100%; height: 148px; flex: none; }
.franq-banner { left: 12px; right: 12px; bottom: 12px; max-width: none; }
.franq-lista.grade { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.franq-lista.grade .franq-capa { height: 104px; }
}
/* ==========================================================================
IDENTIDADE VOX APLICADA — camada de expressão
Tudo aqui existe para o sistema PARECER da VOX, não só usar a cor dela:
a assinatura oficial na casca, o grafismo do balão de fala, o amarelo
como cor de conquista, e o vocabulário da marca nos textos da interface.
Regra que vale para qualquer coisa nova nesta seção: azul = a marca e o
que é rotina; amarelo = celebração, progresso e energia; nunca o
contrário, e nunca amarelo para erro.
========================================================================== */
/* ------------------------------------------------------------- login ------ */
.login-wrap {
min-height: 100vh; min-height: 100dvh; display: flex; align-items: center;
justify-content: center; padding: 20px; position: relative; overflow: hidden;
background:
radial-gradient(1100px 520px at 12% -12%, rgba(0,167,166,.55) 0%, transparent 62%),
radial-gradient(760px 460px at 96% 112%, rgba(249,176,0,.24) 0%, transparent 58%),
var(--brand-deep2);
}
/* grafismo oficial de repetição do balão de fala, bem discreto */
.login-wrap::before {
content: ""; position: absolute; inset: 0; opacity: .07; pointer-events: none;
background-image: url("data:image/svg+xml;utf8,\
");
background-size: 150px 150px;
}
/* a tríade VOX (brandbook p.58): três barras inclinadas derivadas do sorriso */
.login-wrap::after {
content: ""; position: absolute; right: -60px; bottom: -60px; width: 320px; height: 320px;
pointer-events: none; opacity: .5;
background-image: url("data:image/svg+xml;utf8,\
");
background-repeat: no-repeat; background-size: contain;
}
.login-card {
width: 100%; max-width: 396px; background: var(--surface); position: relative; z-index: 2;
border-radius: var(--r-xl); box-shadow: var(--sh-3); padding: 30px 28px 26px;
overflow: hidden; animation: sobe-suave .45s cubic-bezier(.22,1,.36,1) both;
}
/* fio amarelo no topo do cartão — o acento de energia da marca */
.login-card::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
background: linear-gradient(90deg, var(--brand) 0%, var(--brand) 45%, var(--am) 45%, var(--am) 100%);
}
.login-marca { text-align: center; margin-bottom: 20px; }
.login-marca .sig-grande { width: 118px; height: auto; margin: 0 auto 14px; display: block; }
.login-marca h1 {
font-family: var(--font-tt); font-size: 1.12rem; font-weight: 700;
letter-spacing: -.03em; margin: 0; color: var(--ink);
}
.login-marca h1 em { font-style: normal; color: var(--brand-txt); }
.login-marca p { font-size: .79rem; color: var(--ink-3); margin: 5px 0 0; }
.login-erro { background: var(--bad-wash); color: var(--bad); padding: 10px 12px;
border-radius: var(--r-sm); font-size: .81rem; margin-bottom: 14px; }
.login-pe { text-align: center; margin-top: 18px; font-size: .72rem; color: var(--ink-3); }
/* frase do vocabulário oficial da marca — troca a cada visita */
.login-frase {
margin: 20px -28px -26px; padding: 15px 28px 17px; background: var(--brand-wash);
border-top: 1px solid var(--line); text-align: center;
}
.login-frase b {
display: block; font-family: var(--font-tt); font-weight: 600; font-size: .9rem;
letter-spacing: -.02em; color: var(--brand-txt);
}
.login-frase span { display: block; font-size: .69rem; color: var(--ink-3); margin-top: 4px;
letter-spacing: .1em; text-transform: uppercase; }
/* ------------------------------------------------- marca na casca do app -- */
.tb-marca .marca.nome { font-size: 1.18rem; }
.tb-marca .marca .sig { filter: brightness(0) invert(1); }
.tb-marca .marca .edu { color: var(--am); font-size: .44em; }
.rodape-marca .marca .sig { height: .95em; opacity: .75; }
/* no tema escuro o arquivo "positivo" (preto puro) some no fundo — a versão
correta ali é a negativa, então invertemos o mesmo arquivo em vez de
carregar outro. */
:root[data-theme="dark"] .rodape-marca .marca .sig,
:root:not([data-theme="light"]) .rodape-marca .marca .sig { filter: invert(1); }
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) .rodape-marca .marca .sig { filter: none; }
}
:root[data-theme="light"] .rodape-marca .marca .sig { filter: none; }
.rodape-marca .marca .edu { font-size: .5em; }
/* ------------------------------------------ faixa de saudação do painel --- */
/* Primeira coisa que a pessoa vê ao entrar. Fala o nome dela, diz o que
importa hoje e carrega uma frase da marca — é onde o sistema deixa de ser
um painel genérico e vira VOX. */
.hero {
position: relative; overflow: hidden; border-radius: var(--r-xl); padding: 22px 24px;
margin-bottom: 18px; color: #fff; box-shadow: var(--sh-2);
background:
radial-gradient(680px 320px at 8% -40%, rgba(0,167,166,.75) 0%, transparent 60%),
radial-gradient(420px 260px at 100% 130%, rgba(249,176,0,.3) 0%, transparent 62%),
var(--brand-deep);
}
.hero::before {
content: ""; position: absolute; inset: 0; opacity: .08; pointer-events: none;
background-image: url("data:image/svg+xml;utf8,\
");
background-size: 130px 130px;
}
.hero > * { position: relative; z-index: 1; }
.hero .ola {
font-family: var(--font-tt); font-size: clamp(1.2rem, 3vw, 1.6rem); font-weight: 700;
letter-spacing: -.04em; line-height: 1.15; margin: 0;
}
.hero .ola b { color: var(--am); font-weight: 700; }
.hero .sub { font-size: .84rem; color: rgba(255,255,255,.76); margin-top: 7px; max-width: 68ch; }
.hero .sub b { color: #fff; font-weight: 600; }
.hero .frase {
display: inline-flex; align-items: center; gap: .5rem; margin-top: 14px; padding: .34rem .8rem;
border-radius: 999px; background: rgba(255,255,255,.11); border: 1px solid rgba(255,255,255,.16);
font-size: .76rem; color: rgba(255,255,255,.9);
}
.hero .frase svg.ic { width: 14px; height: 14px; color: var(--am); }
.hero-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.hero-acoes .btn { border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.1);
color: #fff; }
.hero-acoes .btn:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.34); }
.hero-acoes .btn.am { background: var(--am); border-color: var(--am); color: var(--am-ink); font-weight: 600; }
.hero-acoes .btn.am:hover { background: var(--am-90); border-color: var(--am-90); color: var(--am-ink); }
@media (max-width: 640px) { .hero { padding: 18px; border-radius: var(--r-lg); } }
/* ---------------------------------------------------- KPI com mais cor ---- */
/* Cada indicador ganha a família de cor do que ele significa. Painel de sete
cartões todos turquesa não diz nada; com família de cor, a pessoa acha o
número que procura sem ler o rótulo. */
.kpi-ic.am { background: var(--am-wash); color: var(--am-txt); }
.kpi-ic.roxo { background: #F1ECFB; color: #6034B3; }
.kpi-ic.rosa { background: #FDECF2; color: #B02F60; }
:root[data-theme="dark"] .kpi-ic.roxo,
:root:not([data-theme="light"]) .kpi-ic.roxo { background: rgba(150,110,230,.16); color: #B79BF0; }
:root[data-theme="dark"] .kpi-ic.rosa,
:root:not([data-theme="light"]) .kpi-ic.rosa { background: rgba(224,110,150,.16); color: #F0A0BC; }
.kpi { position: relative; overflow: hidden; }
/* filete de cor na borda esquerda, na família do ícone */
.kpi::after {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
background: var(--brand); opacity: 0; transition: opacity .16s;
}
button.kpi:hover::after { opacity: 1; }
.kpi.destaque {
background: linear-gradient(150deg, var(--am-wash) 0%, var(--surface) 62%);
border-color: var(--am-wash2);
}
.kpi.destaque:hover { border-color: var(--am); box-shadow: var(--sh-am); }
.kpi.destaque .v { color: var(--am-txt); }
/* entrada em cascata — os cartões aparecem em sequência, não de uma vez */
.cascata > * { animation: sobe-suave .38s cubic-bezier(.22,1,.36,1) both; }
.cascata > *:nth-child(1) { animation-delay: .02s; }
.cascata > *:nth-child(2) { animation-delay: .05s; }
.cascata > *:nth-child(3) { animation-delay: .08s; }
.cascata > *:nth-child(4) { animation-delay: .11s; }
.cascata > *:nth-child(5) { animation-delay: .14s; }
.cascata > *:nth-child(6) { animation-delay: .17s; }
.cascata > *:nth-child(7) { animation-delay: .20s; }
.cascata > *:nth-child(8) { animation-delay: .23s; }
@keyframes sobe-suave { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* ------------------------------------------------ conquista e progresso -- */
/* Território do sino: reconhecimento. Sempre amarelo, nunca azul. */
.selo {
display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem;
border-radius: 999px; font-size: .73rem; font-weight: 600; letter-spacing: .01em;
background: var(--am-wash); color: var(--am-txt); border: 1px solid var(--am-wash2);
}
.selo svg.ic { width: 14px; height: 14px; }
.selo.azul { background: var(--brand-wash); color: var(--brand-txt); border-color: var(--brand-wash2); }
.selo.forte { background: var(--am); color: var(--am-ink); border-color: var(--am); }
.icon-tile.am { background: var(--am-wash); color: var(--am-txt); }
.icon-tile.ok { background: var(--ok-wash); color: var(--ok); }
.icon-tile.info { background: var(--info-wash); color: var(--info); }
.barra { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.barra > i { display: block; height: 100%; border-radius: 999px;
background: linear-gradient(90deg, var(--brand), var(--brand-soft));
transition: width .6s cubic-bezier(.22,1,.36,1); }
.barra.am > i { background: linear-gradient(90deg, var(--am), var(--am-80)); }
.barra.cheia > i { background: linear-gradient(90deg, var(--am), var(--brand)); }
/* toque do sino — usado quando alguém conquista alguma coisa */
@keyframes sino-toca {
0%, 100% { transform: rotate(0); }
15% { transform: rotate(-13deg); } 30% { transform: rotate(11deg); }
45% { transform: rotate(-8deg); } 60% { transform: rotate(6deg); }
75% { transform: rotate(-3deg); }
}
.toca { animation: sino-toca 1.1s ease-in-out; transform-origin: 50% 12%; }
@keyframes pulsa-am {
0% { box-shadow: 0 0 0 0 rgba(249,176,0,.5); }
70% { box-shadow: 0 0 0 12px rgba(249,176,0,0); }
100% { box-shadow: 0 0 0 0 rgba(249,176,0,0); }
}
.pulsa { animation: pulsa-am 1.6s ease-out 2; }
/* --------------------------------------------------- frase da marca ------ */
/* Vocabulário oficial (brandbook p.24) usado como assinatura de rodapé de
tela. Não é enfeite: é o que faz o sistema falar como a marca fala. */
.frase-marca {
display: flex; align-items: center; gap: .6rem; margin-top: 20px; padding: 12px 15px;
border-radius: var(--r); background: var(--brand-wash); border: 1px solid var(--line);
font-size: .82rem; color: var(--brand-txt);
}
.frase-marca svg.ic { width: 16px; height: 16px; color: var(--am); flex: none; }
.frase-marca b { font-family: var(--font-tt); font-weight: 600; letter-spacing: -.015em; }
/* ------------------------------------------------------ estados vazios --- */
.vazio svg.ic { color: var(--brand-soft); }
.vazio.animado svg.ic { animation: flutua 3.4s ease-in-out infinite; }
@keyframes flutua { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
/* ---------------------------------------------------------- avatar -------- */
/* Cores derivadas do próprio nome, dentro das famílias da marca — dá vida à
lista de gente sem inventar paleta nova. */
.avatar.c0 { background: var(--az-40); color: #024746; }
.avatar.c1 { background: var(--am-40); color: #5C4100; }
.avatar.c2 { background: var(--az-20); color: #016463; }
.avatar.c3 { background: var(--am-20); color: #7A5600; }
.avatar.c4 { background: var(--az-50); color: #023B3B; }
.avatar.c5 { background: var(--am-50); color: #5C4100; }
/* -------------------------------------------------------- botão amarelo -- */
.btn.btn-am { background: var(--am); border-color: var(--am); color: var(--am-ink); font-weight: 600; }
.btn.btn-am:hover { background: var(--am-90); border-color: var(--am-90); color: var(--am-ink); }
/* ------------------------------------------------------------- impressão -- */
@media print {
.hero { background: #fff !important; color: #000 !important; border: 1px solid #ccc; }
.hero .ola b { color: #000 !important; }
.hero .sub { color: #444 !important; }
.hero::before, .login-wrap::before, .login-wrap::after { display: none !important; }
.frase-marca, .hero-acoes { display: none !important; }
.cascata > * { animation: none !important; }
}
/* ------------------------------------------------------------- pódio ------ */
/* Território do sino: celebração. O 1º lugar é o único em amarelo cheio —
se todos brilham, ninguém brilha. */
.podio {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: end;
padding: 20px 16px 4px;
background: linear-gradient(180deg, var(--brand-wash) 0%, transparent 78%);
}
.podio .deg {
display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg) var(--r-lg) 0 0;
padding: 14px 8px 0; min-width: 0;
}
.podio .deg .topo { line-height: 0; margin-bottom: 2px; }
.podio .deg .topo svg.ic { width: 24px; height: 24px; color: var(--pt-40); }
.podio .deg.p1 { padding-top: 20px; border-color: var(--am-wash2);
background: linear-gradient(180deg, var(--am-wash) 0%, var(--surface) 60%); }
.podio .deg.p1 .topo svg.ic { width: 30px; height: 30px; color: var(--am); }
.podio .deg.p1 .avatar { outline: 3px solid var(--am); outline-offset: 2px; }
.podio .deg.p2 .topo svg.ic { color: var(--az-70); }
.podio .deg.p3 .topo svg.ic { color: var(--am-60); }
.podio .nm { font-family: var(--font-tt); font-weight: 600; font-size: .8rem; letter-spacing: -.02em;
line-height: 1.25; overflow-wrap: anywhere; }
.podio .pat { font-size: .66rem; color: var(--ink-3); line-height: 1.3; }
.podio .pts { font-family: var(--font-tt); font-weight: 700; font-size: 1.08rem;
letter-spacing: -.03em; margin-top: 2px; }
.podio .pts span { font-family: var(--font-ui); font-weight: 400; font-size: .62rem;
color: var(--ink-3); margin-left: 3px; }
.podio .base {
width: 100%; margin-top: 8px; padding: 5px 0; font-family: var(--font-tt); font-weight: 700;
font-size: .74rem; color: var(--ink-3); background: var(--surface-3);
}
.podio .deg.p1 .base { background: var(--am); color: var(--am-ink); padding: 9px 0; }
.podio .deg.p2 .base { background: var(--az-30); color: #024746; padding: 7px 0; }
.podio .deg.p3 .base { background: var(--am-30); color: #7A5600; }
@media (max-width: 560px) { .podio { padding: 14px 8px 4px; gap: 5px; }
.podio .nm { font-size: .7rem; } .podio .pat { display: none; } }
/* posição na tabela do ranking */
.pos { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
border-radius: 50%; font-family: var(--font-tt); font-weight: 700; font-size: .7rem; }
.pos.p1 { background: var(--am); color: var(--am-ink); }
.pos.p2 { background: var(--az-30); color: #024746; }
.pos.p3 { background: var(--am-30); color: #7A5600; }
/* a marca aparece também em blocos de informação (ficha do sistema) */
.kv .marca .sig { height: 1.05em; }
.kv .marca .edu { font-size: .52em; }
:root[data-theme="dark"] .kv .marca .sig,
:root:not([data-theme="light"]) .kv .marca .sig { filter: invert(1); }
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) .kv .marca .sig { filter: none; }
}
:root[data-theme="light"] .kv .marca .sig { filter: none; }
/* ------------------------------------------- ajustes finos da casca ------- */
/* A assinatura oficial é bem mais larga que alta (2,5:1). Dimensionada por
altura, como qualquer logo — e com respiro à direita antes do "EDU",
que é a área de respiro que o brandbook exige. */
.tb-marca .marca.nome { font-size: 1.5rem; gap: .3em; }
.tb-marca .marca .sig { height: .82em; }
.tb-marca .marca .edu { font-size: .38em; letter-spacing: .06em; }
.login-marca .sig-grande { width: 148px; }
.pt-login .marca-topo .sig-grande { width: 128px; }
.rodape-marca .marca .sig { height: 1.15em; }
.kv .marca .sig { height: 1.25em; }
.pt-pe .marca .sig { height: 1.15em; }
.pt-topo .marca { font-size: 1.35rem; gap: .3em; }
.pt-topo .marca .sig { height: .8em; }
.pt-topo .marca .edu { font-size: .38em; letter-spacing: .06em; }
/* a busca do topo não pode brigar por espaço com as abas de módulo:
ela encolhe, e some antes de sobrepor qualquer coisa */
.tb-busca { flex: 0 1 auto; min-width: 0; }
@media (min-width: 1180px) and (max-width: 1439px) { .tb-busca { display: none; } }
@media (min-width: 1440px) { .tb-busca { display: block; } }
.tb-busca input[type=search] { max-width: 100%; }
/* no tema escuro o grafismo de balões ganha contraste demais sobre o fundo
profundo — o brandbook pede grafismo como apoio, nunca competindo com o
conteúdo, então ele recua um pouco aqui. */
:root[data-theme="dark"] .hero::before { opacity: .045; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .hero::before { opacity: .045; }
}
/* ---- Planejamento do ano: matriz curso x mes ---------------------------- */
.tabela.plano th, .tabela.plano td { text-align: center; white-space: nowrap; }
.tabela.plano td.wrap, .tabela.plano th.wrap { text-align: left; white-space: normal; }
.tabela.plano input[type="number"] {
width: 3rem; text-align: center; padding: 4px 2px; font-variant-numeric: tabular-nums;
}
.tabela.plano td.cel-plano { padding: 4px 3px; }
/* numero pequeno ao lado do previsto: o que ja abriu de verdade */
.tabela.plano .real {
display: inline-block; margin-left: 4px; font-size: 11px; font-weight: 700;
color: var(--brand-txt); background: var(--az-1, rgba(0,167,166,.12));
border-radius: 4px; padding: 0 5px; vertical-align: middle;
}
.tabela.plano .fat { font-variant-numeric: tabular-nums; }
.tabela.plano tfoot th { background: var(--sup-2, rgba(0,0,0,.03)); font-size: 12.5px; }
/* ---- Tarefas: a fila do dia ------------------------------------------- */
.lista-tarefas { display: flex; flex-direction: column; }
.tarefa {
display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: start;
padding: 13px 18px; border-top: 1px solid var(--linha-suave, rgba(0,0,0,.06));
}
.tarefa:first-child { border-top: none; }
.tarefa-ic { opacity: .55; padding-top: 2px; }
.tarefa-atrasada { background: var(--warn-suave, rgba(196,70,61,.05)); }
.tarefa-atrasada .tarefa-ic { opacity: 1; color: var(--bad, #C4463D); }
.tarefa-titulo { font-weight: 600; letter-spacing: -.01em; }
.tarefa-desc { font-size: 13.5px; color: var(--txt-2, #55706e); margin-top: 2px; }
.tarefa-meta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; font-size: 12.5px; }
.tarefa-meta .muted-ruim { color: var(--bad, #C4463D); font-weight: 600; }
.tarefa-acoes { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 720px) {
.tarefa { grid-template-columns: 26px 1fr; }
.tarefa-acoes { grid-column: 2; justify-content: flex-start; margin-top: 8px; }
}
/* ---- Tarefas: quick add, termômetro, destaque e quadro ------------------ */
/* A barra de escrita rápida é a primeira coisa da tela: o gesto mais comum
(anotar uma tarefa) não pode custar um clique em "Nova tarefa" + modal. */
.tar-rapida .panel-body { padding: 14px 18px; }
.tar-rapida-linha { display: flex; align-items: center; gap: 10px; }
.tar-rapida-linha > svg.ic { color: var(--ink-3); flex: none; }
.tar-rapida-campo {
flex: 1; min-width: 0; border: none; background: transparent; outline: none;
font: inherit; font-size: 15px; color: var(--ink); padding: 6px 0;
}
.tar-rapida-campo::placeholder { color: var(--ink-3); }
.tar-rapida-dica { margin-top: 6px; font-size: 12.5px; color: var(--ink-3); line-height: 1.6; }
.tar-rapida-dica b { color: var(--ink-2); font-weight: 600; }
@media (max-width: 720px) {
.tar-rapida-linha { flex-wrap: wrap; }
.tar-rapida-campo { flex-basis: 100%; order: -1; }
}
/* Termômetro: uma nota grande e o porquê ao lado. Sem a explicação vira
número mágico que ninguém sabe como melhorar. */
.tar-term { display: flex; align-items: center; gap: 20px; padding: 16px 20px; }
.tar-term-nota { flex: none; text-align: center; line-height: 1; }
.tar-term-nota .n { font-family: var(--font-tt); font-size: 2.6rem; font-weight: 700;
letter-spacing: -.03em; }
.tar-term-nota .d { font-size: 11px; color: var(--ink-3); margin-top: 4px; }
.tar-term-txt { flex: 1; min-width: 0; }
.tar-term-recado { font-weight: 600; }
.tar-term-linha { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 5px;
font-size: 12.5px; color: var(--ink-2); }
.tar-term-dica { display: flex; align-items: flex-start; gap: 7px; margin-top: 8px;
font-size: 12.5px; color: var(--ink-2); }
.tar-term-dica svg.ic { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.tar-term-bom .tar-term-nota .n { color: var(--ok); }
.tar-term-atencao .tar-term-nota .n { color: var(--warn); }
.tar-term-ruim .tar-term-nota .n { color: var(--bad); }
.tar-term-bom { border-left: 4px solid var(--ok); }
.tar-term-atencao { border-left: 4px solid var(--warn); }
.tar-term-ruim { border-left: 4px solid var(--bad); }
.tar-term.grande { align-items: flex-start; }
.tar-term.grande .tar-term-nota .n { font-size: 3.6rem; }
.tar-term-comp { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 16px; margin-top: 14px; }
.tar-comp-topo { display: flex; justify-content: space-between; align-items: baseline;
font-size: 13px; margin-bottom: 5px; }
.tar-comp-topo span { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tar-comp-txt { font-size: 12.5px; color: var(--ink-2); margin-top: 5px; }
.tar-comp-dica { font-size: 12px; color: var(--ink-3); margin-top: 3px; }
.barra.ruim > i { background: var(--bad); }
@media (max-width: 720px) {
.tar-term { flex-wrap: wrap; gap: 14px; }
.tar-term > .btn { width: 100%; }
}
/* O destaque é a tese da tela: se você só tiver cinco minutos, faça esta. */
.tar-destaque { padding: 18px 20px; border-left: 4px solid var(--brand); }
.tar-destaque.atrasada { border-left-color: var(--bad); }
.tar-destaque-selo { display: inline-flex; align-items: center; gap: 6px;
font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
color: var(--brand-txt); margin-bottom: 8px; }
.tar-destaque.atrasada .tar-destaque-selo { color: var(--bad); }
.tar-destaque-selo svg.ic { width: 14px; height: 14px; }
.tar-destaque-titulo { font-family: var(--font-tt); font-size: 1.25rem; font-weight: 600;
letter-spacing: -.02em; line-height: 1.3; }
.tar-destaque-desc { color: var(--ink-2); margin-top: 5px; font-size: 14px; }
.tar-destaque-meta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 9px; font-size: 12.5px; }
.tar-destaque-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
/* Linha da fila: prioridade alta e detalhe expansível. */
.tarefa-alta .tarefa-titulo { color: var(--bad); }
.tar-flag svg.ic { width: 14px; height: 14px; vertical-align: -2px; }
.tar-check { display: inline-flex; padding-top: 2px; cursor: pointer; }
.tar-check input { width: 17px; height: 17px; accent-color: var(--brand); cursor: pointer; }
.tar-detalhe { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line-2); }
.tar-detalhe-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tar-detalhe .dica { margin-top: 10px; }
.tar-check-lista { display: flex; flex-direction: column; gap: 4px; }
.tar-check-item { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.tar-check-item input { width: 15px; height: 15px; accent-color: var(--brand); }
.tar-check-item.ok span { text-decoration: line-through; color: var(--ink-3); }
.tar-check-novo input { width: 100%; border: none; border-bottom: 1px dashed var(--line-2);
background: transparent; font: inherit; font-size: 13px; padding: 5px 0 4px 23px;
color: var(--ink); outline: none; }
.tar-check-novo input:focus { border-bottom-color: var(--brand); }
/* Barra de seleção múltipla: a fila de segunda tem cinco coisas feitas na
sexta, e fechar uma a uma é cinco cliques iguais. */
.tar-selbar { position: sticky; top: 8px; z-index: 5; display: flex; flex-wrap: wrap;
align-items: center; gap: 8px; margin-bottom: 14px; padding: 10px 14px;
border-radius: var(--r); background: var(--brand-deep); color: var(--tb-ink);
box-shadow: var(--sh-2); }
.tar-selbar b { color: #fff; }
.tar-selbar .btn-ghost { color: var(--tb-ink); border-color: var(--tb-line); }
/* Quadro da casa */
.tar-quadro { display: grid; grid-template-columns: repeat(4, minmax(240px, 1fr));
gap: 14px; align-items: start; overflow-x: auto; padding-bottom: 6px; }
.tar-col { background: var(--surface-2); border: 1px solid var(--line);
border-radius: var(--r); min-height: 140px; }
.tar-col.sobre { border-color: var(--brand); background: var(--brand-wash); }
.tar-col-topo { display: flex; justify-content: space-between; align-items: center;
padding: 11px 14px; font-size: 12px; font-weight: 700; letter-spacing: .05em;
text-transform: uppercase; color: var(--ink-2); border-bottom: 1px solid var(--line); }
.tar-col-n { background: var(--surface-3); color: var(--ink-2); border-radius: 999px;
padding: 1px 8px; letter-spacing: 0; }
.tar-col-corpo { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.tar-col-vazia { font-size: 12.5px; color: var(--ink-3); text-align: center; padding: 18px 6px; }
.tar-card { background: var(--surface); border: 1px solid var(--line);
border-radius: var(--r-sm); padding: 12px; box-shadow: var(--sh-1); cursor: grab; }
.tar-card:active { cursor: grabbing; }
.tar-card.atrasada { border-left: 3px solid var(--bad); }
.tar-card.feito { opacity: .62; }
.tar-card.feito .tar-card-titulo { text-decoration: line-through; }
.tar-card-titulo { font-weight: 600; font-size: 14px; line-height: 1.35; }
.tar-card-desc { font-size: 12.5px; color: var(--ink-2); margin-top: 4px; }
.tar-card-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
margin-top: 8px; font-size: 12px; }
.tar-card .barra { margin-top: 8px; }
.tar-card-acoes { display: flex; gap: 6px; margin-top: 10px; }
@media (max-width: 900px) {
.tar-quadro { grid-template-columns: repeat(4, minmax(230px, 1fr)); }
}
/* arrastar dentro da coluna: a marca diz onde o card vai entrar */
.tar-card.arrastando { opacity:.4; }
.tar-card.alvo-antes { box-shadow: 0 -3px 0 -1px var(--brand), var(--sh-1); }
.tar-card.alvo-depois { box-shadow: 0 3px 0 -1px var(--brand), var(--sh-1); }
/* "De onde vem a fila" — barra por tipo de tarefa */
.tar-barra-linha { display: grid; grid-template-columns: 150px 1fr 46px; gap: 12px;
align-items: center; padding: 7px 0; font-size: 13.5px; }
.tar-barra-linha b { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
.tar-barra-linha { grid-template-columns: 110px 1fr 40px; font-size: 12.5px; }
}
/* ---- Atualizações do sistema: a memória do produto ---------------------- */
.atz-busca { display:flex; align-items:center; gap:10px; padding:12px 18px;
border-bottom:1px solid var(--line); }
.atz-busca > svg.ic { color: var(--ink-3); flex:none; }
.atz-busca input { flex:1; min-width:0; border:none; background:transparent; outline:none;
font:inherit; font-size:14.5px; color:var(--ink); padding:4px 0; }
.atz-busca input::placeholder { color: var(--ink-3); }
table.tabela.atz td { vertical-align: middle; }
.atz-linha { cursor: pointer; }
.atz-linha:hover { background: var(--surface-2); }
.atz-linha.aberta { background: var(--brand-wash); }
.atz-n { font-family: var(--font-tt); font-weight:700; color: var(--ink-3);
font-variant-numeric: tabular-nums; }
.atz-resumo { color: var(--ink-2); font-size: 13.5px; }
.atz-detalhe-linha > td { padding:0 !important; background: var(--surface-2); }
.atz-detalhe { padding:18px 22px; border-left:3px solid var(--brand); cursor:default; }
.atz-detalhe-topo h3 { margin:0; font-size:17px; font-weight:600; letter-spacing:-.01em; }
.atz-detalhe-meta { display:flex; flex-wrap:wrap; gap:9px; align-items:center; margin-top:7px;
font-size:12.5px; }
.atz-texto { margin-top:12px; max-width:78ch; }
.atz-texto p { margin:0 0 9px; font-size:14px; color: var(--ink-2); line-height:1.62; }
.atz-texto p:last-child { margin-bottom:0; }
.atz-texto b { color: var(--ink); }
.atz-texto code { font-family: var(--mono); font-size:12.5px; background: var(--surface-3);
padding:1px 5px; border-radius:4px; }
.atz-fonte { display:flex; align-items:center; gap:7px; margin-top:12px; font-size:12.5px;
color: var(--ink-3); }
.atz-fonte svg.ic { width:14px; height:14px; flex:none; }
.atz-fonte code { font-family: var(--mono); font-size:11.5px; }
.atz-acoes { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; padding-top:12px;
border-top:1px dashed var(--line-2); }
@media (max-width: 720px) {
.atz-detalhe { padding:14px 16px; }
}
/* ---- Tarefas: painel de tempo de resposta ------------------------------- */
.tmp-filtros .tmp-filtro-linha { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:12px; padding:14px 18px 10px; }
.tmp-campo { display:flex; flex-direction:column; gap:4px; }
.tmp-campo .rotulo { font-size:11.5px; }
.tmp-filtros .chip-linha { padding:0 18px 14px; }
.tmp-farol { display:flex; align-items:center; gap:22px; padding:18px 22px;
border-left:4px solid var(--brand); }
.tmp-farol-nota { flex:none; text-align:center; line-height:1; }
.tmp-farol-nota .n { font-family:var(--font-tt); font-size:2.5rem; font-weight:700;
letter-spacing:-.03em; color:var(--brand-txt); }
.tmp-farol-nota .d { font-size:11px; color:var(--ink-3); margin-top:5px; }
.tmp-farol-txt { flex:1; min-width:0; }
.tmp-farol-linha { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; }
.tmp-farol-linha .k { display:block; font-size:11px; letter-spacing:.07em; text-transform:uppercase;
color:var(--ink-3); font-weight:700; }
.tmp-farol-linha b { font-family:var(--font-tt); font-size:1.15rem; }
.tmp-farol-linha i { display:block; font-style:normal; font-size:12px; color:var(--ink-3);
margin-top:2px; }
.tmp-alerta { display:flex; align-items:flex-start; gap:8px; margin-top:14px; padding-top:12px;
border-top:1px dashed var(--line-2); font-size:12.5px; color:var(--ink-2); }
.tmp-alerta svg.ic { width:15px; height:15px; flex:none; margin-top:1px; color:var(--warn); }
.tmp-serie { display:flex; align-items:flex-end; gap:3px; height:120px; padding:4px 0 0;
overflow-x:auto; }
.tmp-col { flex:1 0 16px; display:flex; flex-direction:column; align-items:center;
justify-content:flex-end; height:100%; gap:4px; }
.tmp-col span { font-size:9.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.tmp-barra { width:100%; max-width:22px; background:var(--brand); border-radius:3px 3px 0 0;
min-height:3px; transition:.14s; }
.tmp-col:hover .tmp-barra { background:var(--brand-hover); }
@media (max-width:720px){
.tmp-farol { flex-wrap:wrap; gap:14px; }
.tmp-farol-nota .n { font-size:2rem; }
}
/* ---- Turmas: situação com cor ------------------------------------------ */
.sit { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
padding: 3px 9px; border-radius: 999px; white-space: nowrap; display: inline-block; }
.sit-andamento { background: var(--az-soft, #D6EFEE); color: var(--brand-txt, #007B7A); }
.sit-futura { background: var(--am-soft, #FDEFCE); color: var(--am-txt, #8A6000); }
.sit-encerrada { background: var(--sup-2, rgba(0,0,0,.06)); color: var(--txt-2, #55706e); }
.sit-sem_data { background: transparent; color: var(--bad, #C4463D);
border: 1px dashed var(--bad, #C4463D); }
/* faixa lateral discreta: a turma que está rodando salta aos olhos */
.tabela tr.linha-andamento td:first-child { box-shadow: inset 3px 0 0 var(--brand, #00A7A6); }
.tabela tr.linha-futura td:first-child { box-shadow: inset 3px 0 0 var(--am, #F9B000); }
.tabela tr.linha-sem_data td:first-child { box-shadow: inset 3px 0 0 var(--bad, #C4463D); }
.tabela tr.linha-encerrada { opacity: .62; }
.tabela .small { font-size: 11.5px; }
.tabela .muted-ruim { color: var(--bad, #C4463D); font-weight: 600; }
/* ---- aviso de planejamento no cadastro da turma ------------------------ */
.plano-aviso { border-radius: 10px; padding: 11px 14px; font-size: 13.5px; margin-bottom: 14px;
border: 1px solid var(--linha, #d3e2e0); line-height: 1.5; }
.plano-aviso .plano-link { margin-left: 8px; cursor: pointer; text-decoration: underline;
font-weight: 600; }
.plano-vazio { color: var(--txt-3, #6E8A88); background: var(--sup-2, rgba(0,0,0,.03)); }
.plano-dentro { background: var(--az-soft, #D6EFEE); border-color: var(--brand, #00A7A6);
color: var(--brand-txt, #007B7A); }
.plano-fora { background: var(--am-soft, #FDEFCE); border-color: var(--am, #F9B000);
color: var(--am-txt, #8A6000); }
.plano-sem_plano { background: transparent; border-style: dashed; color: var(--txt-2, #55706e); }
.plano-sem_plano_nenhum { background: transparent; border-style: dashed; color: var(--txt-3, #6E8A88); }
.ajuda-trava { color: var(--am-txt, #8A6000); font-weight: 600; }
/* ---- Parametrizações: seções em abas ---------------------------------- */
.abas-param { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px;
border-bottom: 1px solid var(--linha, #d3e2e0); }
.aba-param { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 13.5px;
background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer;
padding: 9px 14px; color: var(--txt-2, #55706e); border-radius: 8px 8px 0 0; }
.aba-param:hover { color: var(--brand-txt, #007B7A); background: var(--sup-2, rgba(0,0,0,.03)); }
.aba-param.on { color: var(--txt, #0D2A29); font-weight: 600;
border-bottom-color: var(--brand, #00A7A6); }
/* ---- Turmas: no ar ou não --------------------------------------------- */
.no-ar { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
padding: 3px 9px; border-radius: 6px; white-space: nowrap; display: inline-block; }
.no-ar-ativa { background: var(--brand, #00A7A6); color: #fff; }
.no-ar-rascunho { background: var(--am-soft, #FDEFCE); color: var(--am-txt, #8A6000);
border: 1px solid var(--am, #F9B000); }
.no-ar-inativa { background: transparent; color: var(--txt-3, #6E8A88);
border: 1px solid var(--linha, #d3e2e0); }
/* turma no ar ganha um leve destaque */
.tabela tr.turma-no-ar { background: var(--az-1, rgba(0,167,166,.045)); }
.tabela tr.turma-no-ar:hover { background: var(--az-1, rgba(0,167,166,.08)); }
/* ---- barra lateral encolhível ------------------------------------------ */
.sb-modulo-atual { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.sb-encolher { background: none; border: none; cursor: pointer; padding: 5px; border-radius: 7px;
color: var(--txt-3, #6E8A88); display: inline-flex; flex: none; }
.sb-encolher:hover { background: var(--sup-2, rgba(0,0,0,.05)); color: var(--txt, #0D2A29); }
.sb-encolher svg { transition: transform .18s; }
@media (min-width: 981px) {
body.sb-encolhida .sidebar { width: 62px; }
body.sb-encolhida .sidebar .sb-sec,
body.sb-encolhida .sidebar .nav-item span,
body.sb-encolhida .sb-modulo-atual .rotulo,
body.sb-encolhida .sb-modulo-atual .nome,
body.sb-encolhida .sb-pe { display: none; }
body.sb-encolhida .sidebar .nav-item { justify-content: center; padding-left: 0; padding-right: 0; }
body.sb-encolhida .sb-encolher svg { transform: rotate(180deg); }
body.sb-encolhida .conteudo,
body.sb-encolhida .main,
body.sb-encolhida main { margin-left: 62px; }
/* rótulo aparece ao passar o mouse, para não virar adivinhação */
body.sb-encolhida .sidebar .nav-item { position: relative; }
body.sb-encolhida .sidebar .nav-item:hover::after {
content: attr(data-rotulo); position: absolute; left: calc(100% + 8px); top: 50%;
transform: translateY(-50%); background: var(--txt, #0D2A29); color: #fff;
padding: 5px 10px; border-radius: 7px; font-size: 12.5px; white-space: nowrap; z-index: 40;
}
}
/* ---- Minhas turmas: um cartão por turma -------------------------------- */
.cards-turma { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.card-turma { margin: 0; }
.ct-nome { margin: 0; font-size: 17px; letter-spacing: -.01em; }
.ct-numeros { display: flex; gap: 20px; flex-wrap: wrap; margin: 14px 0 4px;
padding-top: 12px; border-top: 1px solid var(--linha-suave, rgba(0,0,0,.06)); }
.ct-numeros div { display: flex; flex-direction: column; }
.ct-numeros strong { font-family: Sora, sans-serif; font-size: 20px; line-height: 1.1; }
.ct-numeros span { font-size: 12px; color: var(--txt-3, #6E8A88); }
.ct-alerta strong { color: var(--bad, #C4463D); }
.ct-alunos { margin-top: 10px; }
.ct-alunos summary { cursor: pointer; font-size: 13px; color: var(--brand-txt, #007B7A); }
.ct-lista { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
/* ---- Planejamento: projeção, histograma e o mês a mês ------------------ */
.tabela.plano .saem { color: var(--am-txt, #8A6000); font-weight: 700; }
.tabela.plano .real-fora { background: var(--am-soft, #FDEFCE); color: var(--am-txt, #8A6000); }
.tabela.plano .barra-cel { vertical-align: bottom; padding-bottom: 6px; }
.tabela.plano .barra { width: 14px; margin: 0 auto 3px; border-radius: 3px 3px 0 0;
background: var(--brand, #00A7A6); }
.tabela.plano .barra-cel span { font-size: 11px; color: var(--txt-3, #6E8A88); display: block; }
.histo { display: flex; gap: 6px; align-items: flex-end; overflow-x: auto; padding-top: 8px; }
.histo-col { flex: 1; min-width: 42px; text-align: center; }
.histo-barras { position: relative; height: 128px; display: flex; align-items: flex-end;
justify-content: center; }
.histo-real { width: 22px; background: var(--brand, #00A7A6); border-radius: 4px 4px 0 0; }
.histo-prev { position: absolute; bottom: 0; width: 30px; border-radius: 4px 4px 0 0;
background: var(--az-soft, #D6EFEE); border: 1px dashed var(--brand, #00A7A6); }
.histo-num { font-family: Sora, sans-serif; font-weight: 700; font-size: 13px; margin-top: 5px; }
.histo-mes { font-size: 11.5px; color: var(--txt-3, #6E8A88); }
.meses-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.mes-card { margin: 0; }
.mes-nome { margin: 0; font-size: 16px; text-transform: capitalize; }
.mes-bloco { margin-top: 10px; }
.mes-rot { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
margin-bottom: 5px; }
.mes-rot.entra { color: var(--brand-txt, #007B7A); }
.mes-rot.sai { color: var(--am-txt, #8A6000); }
.mes-item { font-size: 13px; padding: 4px 0; border-top: 1px solid var(--linha-suave, rgba(0,0,0,.06)); }
.mes-item span { display: block; font-size: 11.5px; }
/* ---- Alunos: Onboarding (hand-off Comercial → CSC → Pedagógico → Atendimento)
Cada estação tem cor própria e ela se repete em três lugares: na barra do
fluxo, no ícone da coluna e na faixa lateral do card. É o que deixa "onde
isso está" legível de longe, sem ler texto. Azul da marca para a rotina,
amarelo só para o que já é conquista/entrega. */
.onb-board { display: grid; grid-template-columns: repeat(4, minmax(250px, 1fr)); gap: 14px;
align-items: start; }
.onb-col { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg);
padding: 12px; min-width: 0; }
.onb-col-head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.onb-col-head h3 { margin: 0; font-size: 14px; letter-spacing: -.01em; }
.onb-col-sub { font-size: 11px; color: var(--ink-3); line-height: 1.3; margin-top: 1px; }
.onb-col-ic { width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto;
display: flex; align-items: center; justify-content: center;
background: var(--brand-wash); color: var(--brand-txt); }
.onb-col-ic svg.ic { width: 16px; height: 16px; }
.onb-col-ic.e-comercial { background: var(--brand-wash); color: var(--brand-txt); }
.onb-col-ic.e-csc { background: var(--info-wash); color: var(--info); }
.onb-col-ic.e-pedagogico { background: var(--brand-wash2, var(--brand-wash)); color: var(--brand-deep, var(--brand-txt)); }
.onb-col-ic.e-atendimento { background: var(--am-wash); color: var(--am-txt); }
.onb-col-n { background: var(--surface-3); color: var(--ink-2); font-weight: 700;
font-size: 12px; border-radius: 999px; padding: 3px 10px; flex: 0 0 auto; }
.onb-col-n.alerta { background: var(--warn-wash); color: var(--warn); }
.onb-col-body { display: flex; flex-direction: column; gap: 10px; }
.onb-vazio { padding: 6px 0; opacity: .75; }
.onb-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
padding: 11px 12px; box-shadow: var(--sh-1); border-left: 3px solid transparent;
transition: box-shadow .14s, border-color .14s; }
.onb-card:hover { box-shadow: var(--sh-2); }
.onb-card-novo { border-left-color: var(--line-2); background: var(--surface-2); }
.onb-card-travado { border-left-color: var(--bad); }
.onb-card-topo { display: flex; align-items: center; gap: 9px; }
.onb-card-topo .titulo { font-weight: 600; font-size: 13.5px; letter-spacing: -.01em;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onb-card-topo .pill { flex: 0 0 auto; }
.onb-card-topo .pill svg.ic { width: 10px; height: 10px; }
.onb-contato { font-size: 11px; color: var(--ink-3); margin-top: 1px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Trilha das quatro estações dentro do card. */
.onb-trilha { display: flex; align-items: flex-start; gap: 0; margin: 11px 0 9px; }
.onb-passo { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
position: relative; min-width: 0; }
.onb-passo .pt { width: 9px; height: 9px; border-radius: 50%; background: var(--surface-3);
border: 1.5px solid var(--line-2); z-index: 1; }
.onb-passo .rot { font-size: 9.5px; color: var(--ink-3); letter-spacing: .01em; }
/* a linha que liga um passo ao anterior */
.onb-passo::before { content: ""; position: absolute; top: 5px; right: 50%; width: 100%;
height: 2px; background: var(--line); }
.onb-passo:first-child::before { display: none; }
.onb-passo.feito .pt { background: var(--brand); border-color: var(--brand); }
.onb-passo.feito .rot { color: var(--brand-txt); }
.onb-passo.feito::before { background: var(--brand); }
.onb-passo.atual .pt { background: var(--am); border-color: var(--am);
box-shadow: 0 0 0 3px var(--am-wash); }
.onb-passo.atual .rot { color: var(--am-txt); font-weight: 700; }
.onb-passo.atual::before { background: var(--brand); }
.onb-dado { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2);
background: var(--surface-2); border-radius: 8px; padding: 6px 8px; margin-bottom: 8px; }
.onb-dado svg.ic { width: 13px; height: 13px; flex: 0 0 auto; color: var(--ink-3); }
.onb-alerta { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; line-height: 1.35;
color: var(--warn); background: var(--warn-wash); border-radius: 8px;
padding: 6px 8px; margin-bottom: 8px; }
.onb-alerta svg.ic { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 1px; }
.onb-alerta.ok { color: var(--ok); background: var(--ok-wash); }
.onb-alerta.bad { color: var(--bad); background: var(--bad-wash); }
.onb-acoes { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; margin-top: 8px; }
/* Fila de entrada: lista compacta, porque são muitos e todos iguais. */
.onb-entrada { display: flex; flex-direction: column; }
.onb-linha { display: flex; align-items: center; gap: 11px; padding: 10px 16px;
border-bottom: 1px solid var(--line); }
.onb-linha:last-child { border-bottom: none; }
.onb-linha .titulo { font-size: 13.5px; font-weight: 600; letter-spacing: -.01em;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onb-linha-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 3px;
font-size: 11.5px; color: var(--ink-3); }
.onb-tag { display: inline-flex; align-items: center; gap: 3px; background: var(--warn-wash);
color: var(--warn); border-radius: 999px; padding: 1px 8px; font-size: 11px; }
.onb-tag.ok { background: var(--ok-wash); color: var(--ok); }
.onb-tag svg.ic { width: 10px; height: 10px; }
/* Barra do fluxo no topo: a largura de cada trecho é a proporção da fila. */
.onb-fluxo { display: flex; align-items: flex-end; gap: 4px; }
.onb-fluxo-item { min-width: 0; }
.onb-fluxo-barra { height: 10px; border-radius: 999px; background: var(--brand); }
.onb-fluxo-item:nth-child(1) .onb-fluxo-barra { background: var(--brand); }
.onb-fluxo-item:nth-child(3) .onb-fluxo-barra { background: var(--info); }
.onb-fluxo-item:nth-child(5) .onb-fluxo-barra { background: var(--brand-deep, var(--brand-hover)); }
.onb-fluxo-item:nth-child(7) .onb-fluxo-barra { background: var(--am); }
.onb-fluxo-rot { font-size: 11.5px; color: var(--ink-3); margin-top: 6px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onb-fluxo-rot b { color: var(--ink); font-family: var(--font-tt); font-size: 14px; }
.onb-fluxo-seta { flex: 0 0 auto; color: var(--ink-3); opacity: .5; padding-bottom: 20px; }
.onb-fluxo-seta svg.ic { width: 13px; height: 13px; }
@media (max-width: 1100px) {
.onb-board { grid-template-columns: repeat(2, minmax(240px, 1fr)); }
}
@media (max-width: 620px) {
.onb-board { grid-template-columns: 1fr; }
.onb-acoes { justify-content: stretch; }
.onb-acoes .btn { flex: 1; }
.onb-fluxo-rot { font-size: 10.5px; }
}
/* ==========================================================================
Leitura da conversa do aluno com o professor virtual (tela da equipe)
========================================================================== */
.ch-admin { display: flex; flex-direction: column; gap: 12px; max-height: 60vh; overflow-y: auto;
padding: 4px 2px; }
.ch-admin .linha { padding: 11px 13px; border-radius: var(--r-lg); background: var(--surface-2);
border-left: 3px solid var(--line-2); }
.ch-admin .linha.aluno { border-left-color: var(--brand); }
.ch-admin .linha.prof { border-left-color: var(--am); }
.ch-admin .quem { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
font-size: .72rem; font-weight: 700; color: var(--ink-2); margin-bottom: 5px; }
.ch-admin .quem span { font-weight: 500; color: var(--ink-3); }
.ch-admin .txt { font-size: .88rem; line-height: 1.6; }
/* Título de seção dentro de um formulário longo (a ficha do facilitador).
Ocupa a linha inteira da grade de campos e separa blocos de assunto. */
.secao-form {
grid-column: 1 / -1; margin: 14px 0 2px; padding-top: 10px;
border-top: 1px solid var(--line); font-family: var(--font-tt);
font-size: .78rem; font-weight: 600; text-transform: uppercase;
letter-spacing: .07em; color: var(--ink-3);
}
.secao-form:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
/* Conteúdo da aula (matriz do curso) dentro do modal: texto corrido que a
coordenação escreveu, mostrado como foi escrito. */
.txt-aula { font-size: .9rem; line-height: 1.65; color: var(--ink-2); margin: 0 0 4px; }
.lista-check { margin: 6px 0 10px; padding-left: 18px; }
.lista-check li { font-size: .9rem; line-height: 1.6; color: var(--ink-2); margin-bottom: 3px; }
/* Cartão de uma aula especial na Gestão de eventos: o que é, em que turma,
quando, e o checklist do que precisa estar pronto. */
.painel-evento {
border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
margin-bottom: 12px; background: var(--surface);
}
.painel-evento h4 { font-family: var(--font-tt); font-size: .95rem; font-weight: 600; }
.painel-evento:last-child { margin-bottom: 0; }
/* Uma linha do dia na Agenda da escola: hora, ícone, o que é, e o estado da
chamada. Aula especial ganha destaque — é o que exige preparação. */
.linha-agenda {
display: flex; gap: 12px; align-items: flex-start;
padding: 12px 0; border-bottom: 1px solid var(--line);
}
.linha-agenda:last-child { border-bottom: 0; padding-bottom: 0; }
.linha-agenda-evento { background: var(--am-wash); border-radius: 10px;
padding: 12px; margin: 4px 0; border-bottom: 0; }
.linha-agenda .hora-agenda { min-width: 64px; }
.linha-agenda .ic-agenda { color: var(--ink-3); padding-top: 2px; }
.linha-agenda .ic-agenda svg { width: 18px; height: 18px; }
.linha-agenda .titulo { font-size: .93rem; }