/* ============================================================================ ESTÚDIO — sistema de design da Plataforma da Nathália Direção: "Canva conceitual" — ferramenta CRIATIVA, clara, colorida, viva e leve. Fundo lavanda-branco arejado, marca violeta vibrante, paleta de acentos alegres, cards bem arredondados, sombras suaves coloridas, gradientes felizes com parcimônia. Tipografia moderna e amigável (Fredoka display + Plus Jakarta corpo), auto-hospedada (servida de 'self' — CSP intacta). Assinatura: cada cliente tem uma IDENTIDADE COLORIDA própria (avatar em gradiente) e categorias com cor própria. ============================================================================ */ /* ── Fontes auto-hospedadas (OFL) ─────────────────────────────────────────── */ @font-face { font-family: "Fredoka"; src: url("../fonts/fredoka-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/plus-jakarta-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/plus-jakarta-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/plus-jakarta-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/plus-jakarta-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/plus-jakarta-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; } /* ── Tokens ───────────────────────────────────────────────────────────────── */ :root { /* Marca */ --violeta: #7b61ff; /* marca vibrante (periwinkle moderno) */ --violeta-600: #6a4dff; /* hover */ --violeta-700: #5b3ee6; --violeta-100: #efeaff; /* fundo tênue da marca */ --violeta-50: #f6f3ff; --grad: linear-gradient(135deg, #7b61ff 0%, #b15cff 50%, #ff6fb5 100%); /* gradiente-assinatura feliz */ /* Acentos alegres (categorias / destaques) */ --rosa: #ff5da2; --coral: #ff8a4c; --amarelo:#ffc542; --menta: #1fc7a8; --azul: #3da8ff; /* Semânticos de status (chips pastel + texto saturado) */ --ok: #11a37a; --ok-bg: #e3f8f0; --espera: #b67611; --espera-bg: #fff2d6; --ajuste: #e23d6d; --ajuste-bg: #ffe6ee; --neutro: #6b6790; --neutro-bg: #eeecf9; /* Neutros */ --tinta: #1f1b2e; /* títulos */ --texto: #2e2a40; /* corpo */ --tinta-suave: #7a7690; /* secundário (cinza-violeta) */ --fundo: #f6f5fc; /* fundo da aplicação (lavanda-branco) */ --papel: #ffffff; /* cards */ --linha: #eceaf6; /* bordas muito suaves */ /* Tipografia */ --fonte-display: "Fredoka", "Plus Jakarta Sans", system-ui, sans-serif; --fonte-corpo: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; /* Espaço */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; /* Forma — bem arredondado, sombras suaves coloridas */ --raio: 22px; --raio-md: 16px; --raio-sm: 12px; --pill: 999px; --sombra-sm: 0 2px 6px rgba(99, 80, 180, .07); --sombra: 0 10px 30px -14px rgba(99, 80, 180, .28); --sombra-violeta: 0 12px 26px -10px rgba(123, 97, 255, .45); } * { box-sizing: border-box; } html { font-size: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--fonte-corpo); font-size: 1rem; line-height: 1.6; color: var(--texto); background: var(--fundo); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ── Tipografia ───────────────────────────────────────────────────────────── */ h1, h2, h3 { color: var(--tinta); line-height: 1.15; margin: 0 0 var(--s3); } h1 { font-family: var(--fonte-display); font-weight: 600; font-size: clamp(1.7rem, 1.45rem + 1.4vw, 2.3rem); letter-spacing: -0.01em; } h2 { font-family: var(--fonte-display); font-weight: 600; font-size: 1.3rem; } h3 { font-family: var(--fonte-corpo); font-weight: 700; font-size: 1rem; color: var(--texto); margin-bottom: var(--s2); } p { margin: 0 0 var(--s3); } a { color: var(--violeta-700); text-decoration: none; } a:hover { text-decoration: underline; } .muted { color: var(--tinta-suave); } .eyebrow { font: 700 0.72rem/1 var(--fonte-corpo); letter-spacing: 0.12em; text-transform: uppercase; color: var(--violeta); margin: 0 0 var(--s2); display: block; } /* ── Shell ────────────────────────────────────────────────────────────────── */ .container { width: 100%; max-width: 960px; margin: 0 auto; padding: 0 var(--s4); } .topbar { background: var(--papel); border-bottom: 1px solid var(--linha); } .topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 66px; flex-wrap: wrap; } .brand { font-family: var(--fonte-display); font-weight: 600; font-size: 1.15rem; color: var(--tinta); display: inline-flex; align-items: center; gap: 10px; } .brand::before { content: ""; width: 22px; height: 22px; border-radius: 8px; background: var(--grad); box-shadow: var(--sombra-violeta); } .nav { display: flex; gap: var(--s1); align-items: center; flex-wrap: wrap; } .nav a { color: var(--tinta-suave); font-weight: 600; font-size: 0.92rem; padding: 8px 14px; border-radius: var(--pill); } .nav a:hover { color: var(--violeta-700); background: var(--violeta-50); text-decoration: none; } .main { padding-top: var(--s6); padding-bottom: var(--s8); } .footer { padding: var(--s6) var(--s4); color: var(--tinta-suave); text-align: center; } /* ── Esqueleto do painel: menu lateral responsivo ─────────────────────────── */ .nav-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .appbar { display: none; } .shell { display: flex; align-items: flex-start; min-height: 100vh; } .sidebar { flex: 0 0 250px; background: var(--papel); border-right: 1px solid var(--linha); padding: var(--s5) var(--s4); display: flex; flex-direction: column; gap: var(--s5); position: sticky; top: 0; height: 100vh; } .sidebar-brand { font-family: var(--fonte-display); font-weight: 600; font-size: 1.15rem; color: var(--tinta); display: flex; align-items: center; gap: 10px; } .sidebar-brand:hover { text-decoration: none; } .sidebar-brand::before { content: ""; width: 26px; height: 26px; border-radius: 9px; background: var(--grad); box-shadow: var(--sombra-violeta); } .sidenav { display: flex; flex-direction: column; gap: var(--s1); } .sidenav a { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 14px; color: var(--tinta-suave); font-weight: 600; } .sidenav a:hover { background: var(--violeta-50); color: var(--violeta-700); text-decoration: none; } .sidenav a.on { background: var(--violeta); color: #fff; box-shadow: var(--sombra-violeta); } .sidenav a.on:hover { background: var(--violeta-600); color: #fff; } .sidenav .ic { display: inline-grid; place-items: center; width: 22px; height: 22px; opacity: .95; } .sidebar-logout { margin-top: auto; } .content { flex: 1; min-width: 0; } /* Largura generosa e SEMPRE centrada na área útil (já descontada a sidebar): margin auto de ambos os lados, escalando em telas largas para aproveitar o espaço sem esticar texto. Cabeçalho e blocos vivem todos dentro deste mesmo container → mesma largura e alinhamento. */ .content-inner { width: 100%; max-width: 1280px; margin: 0 auto; padding: var(--s6) var(--s6); } @media (min-width: 1600px) { .content-inner { max-width: 1400px; } } @media (min-width: 1900px) { .content-inner { max-width: 1500px; } } .scrim { display: none; } @media (max-width: 899px) { .appbar { display: flex; align-items: center; gap: var(--s3); min-height: 60px; padding: 0 var(--s4); position: sticky; top: 0; z-index: 30; background: var(--papel); border-bottom: 1px solid var(--linha); } .burger { display: inline-grid; place-items: center; cursor: pointer; color: var(--tinta); padding: 8px; border-radius: 12px; } .burger:hover { background: var(--violeta-50); } .sidebar { position: fixed; top: 0; left: 0; z-index: 40; height: 100dvh; transform: translateX(-100%); transition: transform .22s ease; box-shadow: var(--sombra); } #navtoggle:checked ~ .shell .sidebar { transform: translateX(0); } .scrim { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(20,10,40,.4); opacity: 0; pointer-events: none; transition: opacity .2s ease; } #navtoggle:checked ~ .shell .scrim { opacity: 1; pointer-events: auto; } .content-inner { padding: var(--s5) var(--s4); } } @media (min-width: 900px) { .appbar { display: none; } } /* ── Cartões ──────────────────────────────────────────────────────────────── */ .card { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: var(--s5); margin-bottom: var(--s4); box-shadow: var(--sombra-sm); } .card-header { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s3); } .card-header h1, .card-header h2 { margin: 0; } .grid { display: grid; grid-template-columns: 1fr; gap: var(--s4); } @media (min-width: 640px) { .grid-2 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: 1fr 1fr 1fr; } } /* Grade adaptativa: tantas colunas quantas couberem — preenche a largura sem deixar vazio à direita. */ .grid-auto { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } /* Duas colunas em telas largas (seções dividem o espaço horizontal); empilha no estreito. */ .split { display: grid; gap: var(--s4); grid-template-columns: 1fr; align-items: start; } @media (min-width: 1100px) { .split { grid-template-columns: 5fr 7fr; } } .split > .card { margin-bottom: 0; } /* Coluna do .split pode empilhar vários cards (ex.: Ações + Conhecimento) com respiro entre eles. */ .split > div > .card { margin-bottom: var(--s4); } .split > div > .card:last-child { margin-bottom: 0; } /* ── Botões ───────────────────────────────────────────────────────────────── */ .btn { display: inline-block; appearance: none; cursor: pointer; background: var(--violeta); color: #fff; border: 1px solid transparent; border-radius: var(--pill); padding: 11px 22px; font: 700 0.95rem var(--fonte-corpo); text-align: center; width: 100%; box-shadow: var(--sombra-violeta); transition: transform .08s ease, box-shadow .15s ease, background-color .15s ease; } .btn:hover { background: var(--violeta-600); text-decoration: none; transform: translateY(-1px); } .btn:active { transform: translateY(0); } @media (min-width: 640px) { .btn { width: auto; } } .btn-secundario { background: var(--violeta-50); color: var(--violeta-700); border-color: var(--violeta-100); box-shadow: none; } .btn-secundario:hover { background: var(--violeta-100); } .btn-perigo { background: var(--ajuste); color: #fff; border-color: transparent; box-shadow: 0 12px 26px -12px rgba(226,61,109,.5); } .btn-perigo:hover { background: #c9315c; } .link-btn { background: none; border: none; cursor: pointer; color: var(--tinta-suave); font: 600 0.92rem var(--fonte-corpo); padding: 8px 14px; border-radius: var(--pill); } .link-btn:hover { color: var(--violeta-700); background: var(--violeta-50); } .logout-form { display: inline; margin: 0; } :focus-visible { outline: 3px solid var(--violeta); outline-offset: 2px; border-radius: 6px; } /* ── Formulários ──────────────────────────────────────────────────────────── */ .form-grupo { margin-bottom: var(--s4); } .form-grupo label { display: block; margin-bottom: var(--s1); font-weight: 600; font-size: 0.92rem; color: var(--texto); } .form-grupo input, .form-grupo textarea, .form-grupo select { width: 100%; padding: 12px 14px; font: 400 1rem var(--fonte-corpo); color: var(--texto); background: var(--papel); border: 1.5px solid var(--linha); border-radius: var(--raio-sm); } .form-grupo textarea { resize: vertical; min-height: 96px; } .form-grupo input:focus, .form-grupo textarea:focus, .form-grupo select:focus { outline: none; border-color: var(--violeta); box-shadow: 0 0 0 4px var(--violeta-100); } .form-grupo .ajuda, .ajuda { font-size: 0.85rem; color: var(--tinta-suave); margin-top: var(--s1); } fieldset.form-grupo { border: 1px solid var(--linha); border-radius: var(--raio-md); padding: var(--s3) var(--s4); } fieldset.form-grupo > label:first-child { font-weight: 700; } .check { display: flex; align-items: center; gap: var(--s2); font-weight: 400; margin: var(--s2) 0; } .check input { width: auto; } /* Consentimento LGPD não marcado: destaca o rótulo (a mensagem clara vem no .flash-error ao lado). */ .check-erro { color: var(--ajuste); font-weight: 600; } .inline-form { display: flex; gap: var(--s3); align-items: flex-end; flex-wrap: wrap; } .inline-form .form-grupo { flex: 1 1 200px; margin-bottom: 0; } /* Paginação (listas do painel): controles simples, centrados, embrulham no celular. */ .paginacao { display: flex; align-items: center; justify-content: center; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s4); } .paginacao-info { font-size: 0.9rem; } /* ── Mensagens (flash) ────────────────────────────────────────────────────── */ .flash { padding: 13px 16px; border-radius: var(--raio-sm); margin-bottom: var(--s4); font-size: 0.95rem; border: 1px solid transparent; } .flash-error { background: var(--ajuste-bg); color: #a8204a; border-color: #ffd0de; } .flash-success { background: var(--ok-bg); color: #0c7a5a; border-color: #c4eedf; } .flash-info { background: var(--violeta-100); color: var(--violeta-700); border-color: #ddd3ff; } .flash-espera { background: var(--espera-bg); color: var(--espera); border-color: #f0d49a; } /* ── Tabelas (arejadas, sem cara de Excel) ────────────────────────────────── */ .tabela-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 14px 16px; } th { font: 700 0.72rem/1 var(--fonte-corpo); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-suave); border-bottom: 1px solid var(--linha); } td { border-bottom: 1px solid var(--linha); } tbody tr:last-child td { border-bottom: none; } tbody tr:hover td { background: var(--violeta-50); } /* ── Badges / etiquetas de status (chips coloridos) ───────────────────────── */ .tag { display: inline-block; padding: 5px 13px; border-radius: var(--pill); font: 700 0.78rem var(--fonte-corpo); background: var(--neutro-bg); color: var(--neutro); } .tag-ok { background: var(--ok-bg); color: var(--ok); } .tag-espera { background: var(--espera-bg); color: var(--espera); } .tag-ajuste { background: var(--ajuste-bg); color: var(--ajuste); } .tag-marca { background: var(--violeta-100); color: var(--violeta-700); } /* ── Listas / ações ───────────────────────────────────────────────────────── */ .lista { margin: var(--s2) 0 var(--s4); padding-left: 18px; } .lista li { margin: var(--s2) 0; } .acoes { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; margin-top: var(--s2); } /* ── Lista de itens clicáveis (inventário): linha polida, não "link azul cru" ── */ .lista-rows { list-style: none; margin: var(--s2) 0 var(--s4); padding: 0; display: flex; flex-direction: column; gap: var(--s2); } .linha-item { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); background: var(--papel); color: var(--texto); border: 1px solid var(--linha); border-radius: var(--raio-md); box-shadow: var(--sombra-sm); text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .linha-item:hover { border-color: var(--violeta); box-shadow: var(--sombra-violeta); transform: translateX(2px); } .linha-item .li-titulo { flex: 1 1 auto; min-width: 0; font-weight: 600; color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .linha-item .li-meta { flex: 0 0 auto; display: flex; align-items: center; gap: var(--s2); } .linha-item::after { content: '\203a'; flex: 0 0 auto; color: var(--tinta-suave); font-size: 1.25rem; line-height: 1; } /* ── Portal do cliente: "1 número que importa" (destaque do mês) ── */ .destaque { background: var(--grad); color: #fff; border: none; box-shadow: var(--sombra-violeta); } .destaque-rotulo { font: 600 .78rem var(--fonte-corpo); text-transform: uppercase; letter-spacing: .05em; opacity: .85; } .destaque-nums { display: flex; flex-wrap: wrap; gap: var(--s6); margin-top: var(--s3); } .destaque-num { display: flex; flex-direction: column; min-width: 0; } .destaque-num strong { font: 700 2.1rem var(--fonte-display); line-height: 1; } .destaque-num span { font-size: .85rem; opacity: .9; margin-top: 6px; } .destaque-vazio { opacity: .92; margin: var(--s2) 0 0; } .destaque-acao { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; } .destaque-acao p { margin: 0; } .acesso-linha { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; } /* Serviços do cliente (módulos/planos por cliente) */ .modulo-lista { list-style: none; margin: var(--s2) 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); } .modulo-item { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s4); background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio-md); flex-wrap: wrap; } .modulo-info { display: flex; flex-direction: column; min-width: 0; } .modulo-info strong { color: var(--tinta); } .modulo-acao { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; } .faixa-aviso { background: var(--violeta-50); border-left: 3px solid var(--violeta); padding: var(--s2) var(--s3); border-radius: var(--raio-sm); } /* ── Arte do conteúdo (prévia na aprovação do cliente e no detalhe do admin) ── */ .arte-img { max-width: 100%; max-height: 480px; border-radius: var(--raio-sm); border: 1px solid var(--linha); display: block; } /* ── Pilares de conteúdo: chip colorido + balança da linha editorial ──────── */ .pilar-chip { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .8rem; font-weight: 600; line-height: 1.5; background: var(--pilar-bg, #ececf3); color: var(--pilar-fg, #4a4a55); } .pilar-cor-neutro { --pilar-bg: #ececf3; --pilar-fg: #4a4a55; --pilar-solid: #b9b9c6; } .pilar-cor-violeta { --pilar-bg: #ece8ff; --pilar-fg: #5b3fd6; --pilar-solid: #7b61ff; } .pilar-cor-rosa { --pilar-bg: #ffe6f2; --pilar-fg: #c43d84; --pilar-solid: #ff5da2; } .pilar-cor-coral { --pilar-bg: #ffe9dd; --pilar-fg: #c5572a; --pilar-solid: #ff8a4c; } .pilar-cor-amarelo { --pilar-bg: #fff3d1; --pilar-fg: #9a6f00; --pilar-solid: #ffc542; } .pilar-cor-menta { --pilar-bg: #d8f7f1; --pilar-fg: #0f8a7a; --pilar-solid: #19c3b1; } .pilar-cor-azul { --pilar-bg: #ddeeff; --pilar-fg: #2168c4; --pilar-solid: #3da8ff; } .pilar-balanca { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s2); } .pilar-balanca li { display: grid; gap: 4px; } .pilar-balanca-rotulo { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); } .pilar-barra { background: #ececf3; border-radius: 999px; height: 10px; overflow: hidden; } .pilar-barra-fill { display: block; height: 100%; border-radius: 999px; background: var(--pilar-solid, #b9b9c6); min-width: 2px; } /* ── ASSINATURA: identidade colorida do cliente + pasta-dossiê ────────────── */ .avatar { flex: 0 0 auto; width: 60px; height: 60px; border-radius: 20px; color: #fff; display: grid; place-items: center; font: 600 1.35rem var(--fonte-display); box-shadow: var(--sombra); } .av-0 { background: linear-gradient(135deg, #7b61ff, #ff6fb5); } .av-1 { background: linear-gradient(135deg, #19c3b1, #3da8ff); } .av-2 { background: linear-gradient(135deg, #ff8a4c, #ff5da2); } .av-3 { background: linear-gradient(135deg, #ffc542, #ff8a4c); } .av-4 { background: linear-gradient(135deg, #3da8ff, #7b61ff); } .av-5 { background: linear-gradient(135deg, #ff5da2, #b15cff); } /* Foto enviada: mesmo formato/sombra do selo, mas a imagem cobre o quadrado. */ .avatar-photo { object-fit: cover; background: var(--violeta-50); } .avatar.avatar-lg { width: 88px; height: 88px; border-radius: var(--raio-md); font-size: 1.9rem; } /* Campo de upload de foto (formulários de perfil). */ .avatar-field { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; } .avatar-field-controls { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .avatar-hint { margin: 0; font-size: .85rem; } .check { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; color: var(--ajuste); } .client-head { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; background: linear-gradient(120deg, var(--violeta-50), #fdf0f8); margin: calc(-1 * var(--s5)) calc(-1 * var(--s5)) var(--s4); padding: var(--s5); border-radius: var(--raio) var(--raio) 0 0; } .client-head .nome { display: flex; flex-direction: column; gap: 2px; } .client-head h1 { margin: 0; } .back-link { display: inline-block; margin-bottom: var(--s3); color: var(--tinta-suave); font-weight: 600; } /* ── Autenticação ─────────────────────────────────────────────────────────── */ .auth-card { max-width: 440px; margin: var(--s7) auto; } /* ── Grade de clientes (cards com avatar colorido) ────────────────────────── */ /* Flex que ENCHE a linha: muitos cards crescem para ocupar a largura; poucos cards ficam num tamanho confortável e centrados (sem "card minúsculo sozinho num oceano"). Sem colunas-fantasma. */ .client-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s4); } .client-tile { flex: 1 1 300px; max-width: 380px; display: flex; align-items: center; gap: var(--s4); margin-bottom: 0; } .client-tile-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .client-tile-body strong { color: var(--tinta); } /* ── Análise de Perfil (raio-x) ────────────────────────────────────────────── */ .metric-grid { margin-bottom: var(--s4); } .metric-card { display: flex; flex-direction: column; gap: 8px; margin-bottom: 0; } .metric-label { color: var(--tinta-suave); font-weight: 600; font-size: .9rem; } .metric-value { font-family: var(--fonte-display); font-weight: 600; font-size: 2.2rem; color: var(--tinta); line-height: 1; } .metric-value small { font-size: 1rem; color: var(--tinta-suave); margin-left: 4px; } .metric-var { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; padding: 3px 12px; border-radius: var(--pill); font-weight: 700; font-size: .85rem; } .metric-hint { color: var(--tinta-suave); font-size: .78rem; } .var-up { color: var(--ok); background: var(--ok-bg); } .var-down { color: var(--ajuste); background: var(--ajuste-bg); } .var-flat { color: var(--neutro); background: var(--neutro-bg); } .leitura { white-space: pre-wrap; color: var(--texto); } .month-picker { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: flex-end; margin-bottom: var(--s2); } .month-picker .form-grupo { margin: 0; } .period-chips { margin-top: var(--s3); } .subnav { margin-top: var(--s3); } .nota-extensao { margin-top: var(--s4); font-size: .85rem; } /* Visão de evolução: gráficos de linha em SVG puro (sem JS — CSP intacta), responsivos. */ .chart-grid { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .chart-card { display: flex; flex-direction: column; gap: var(--s3); margin-bottom: 0; } .chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); flex-wrap: wrap; } .chart-range { font-size: .85rem; } .chart { width: 100%; height: auto; display: block; } .chart-line { fill: none; stroke: var(--violeta); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; } .chart-dot { fill: var(--violeta); } .chart-xlabel, .chart-ylabel { fill: var(--tinta-suave); font-size: 12px; font-family: var(--fonte-corpo); } /* ── Construtor de onboarding (editor de perguntas) ────────────────────────── */ .onb-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s2); } .onb-item { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; background: var(--violeta-50); border-radius: var(--raio-md); padding: var(--s3) var(--s4); } .onb-item.onb-inativa { opacity: .6; } .onb-ord { display: flex; flex-direction: column; gap: 2px; } .onb-ord form { margin: 0; } .icon-btn { border: 1px solid var(--linha); background: var(--papel); border-radius: 8px; width: 30px; height: 24px; cursor: pointer; color: var(--tinta-suave); line-height: 1; } .icon-btn:hover { background: var(--violeta-100); color: var(--violeta-700); } .icon-btn:disabled { opacity: .35; cursor: default; } .onb-corpo { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .onb-tags { display: flex; gap: 6px; flex-wrap: wrap; } .onb-acoes { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; } .onb-acoes form { margin: 0; } .opcoes { display: flex; flex-direction: column; gap: 6px; } .opcao { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; } .ajuda { color: var(--tinta-suave); font-size: .88rem; margin: 0 0 6px; } /* ── Checklist de compliance (apoio à revisão de conteúdo) ─────────────────── */ .aviso-compliance { background: var(--espera-bg); color: var(--espera); border: 1px solid #f0d49a; } .compl-list { list-style: none; padding: 0; margin: 0 0 var(--s4); display: flex; flex-direction: column; gap: var(--s2); } .compl-item { background: var(--violeta-50); border-radius: var(--raio-md); padding: var(--s3) var(--s4); display: flex; flex-direction: column; gap: var(--s2); } .compl-regra { display: flex; gap: var(--s3); align-items: baseline; flex-wrap: wrap; justify-content: space-between; } .compl-campos { display: flex; gap: var(--s2); flex-wrap: wrap; } .compl-campos select { flex: 0 0 auto; } .compl-campos input { flex: 1 1 200px; min-width: 0; } /* ── Calendário editorial ───────────────────────────────────────────────────── */ .cal-nav { display: flex; align-items: center; justify-content: center; gap: var(--s4); margin-top: var(--s3); } .cal-title { font-family: var(--fonte-display); font-size: 1.15rem; text-transform: capitalize; } /* minmax(0,1fr) (não 1fr) impede a coluna de CRESCER com conteúdo largo → 7 colunas sempre iguais. */ .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; } .cal-head { margin-bottom: 6px; } .cal-wd { text-align: center; font-weight: 700; color: var(--tinta-suave); font-size: .8rem; padding: 4px 0; } .cal-day { min-width: 0; min-height: 96px; background: var(--violeta-50); border-radius: var(--raio-sm); padding: 6px; display: flex; flex-direction: column; gap: 4px; } .cal-out { opacity: .45; } .cal-day-head { display: flex; justify-content: space-between; align-items: center; } .cal-daynum { font-weight: 700; color: var(--tinta-suave); font-size: .85rem; } .cal-add { color: var(--tinta-suave); font-weight: 700; text-decoration: none; line-height: 1; padding: 0 4px; } .cal-add:hover { color: var(--violeta); text-decoration: none; } .cal-chip { display: flex; gap: 6px; align-items: center; background: var(--papel); border: 1px solid var(--linha); border-left: 3px solid var(--linha); border-radius: 8px; padding: 3px 7px; font-size: .78rem; color: var(--tinta); min-width: 0; max-width: 100%; } .cal-chip:hover { text-decoration: none; background: var(--violeta-50); } .cal-chip.tag-ok { border-left-color: var(--ok); } .cal-chip.tag-espera { border-left-color: var(--espera); } .cal-chip.tag-ajuste { border-left-color: var(--ajuste); } .cal-chip-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .cal-plat { flex: 0 0 auto; font-size: .68rem; color: var(--tinta-suave); } .cal-agenda { display: none; } .cal-ag-dia { padding: var(--s3) 0; border-bottom: 1px solid var(--linha); } .cal-ag-dia:last-child { border-bottom: 0; } .cal-ag-data { font-weight: 700; color: var(--tinta); display: block; margin-bottom: 8px; } .cal-ag-itens { display: flex; flex-direction: column; gap: 6px; } @media (max-width: 700px) { .cal-card { display: none; } .cal-agenda { display: block; } } /* ── Gerador de prompt de LP ─────────────────────────────────────────────────── */ .opcoes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; } .prompt-out { width: 100%; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .82rem; line-height: 1.5; white-space: pre; } /* ── Abas (chips com estado ativo claro) ──────────────────────────────────── */ .tabs { display: flex; flex-wrap: nowrap; gap: var(--s1); overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: var(--s1); } .tab { padding: 9px 16px; white-space: nowrap; color: var(--tinta-suave); font-weight: 600; border-radius: var(--pill); } .tab:hover { color: var(--violeta-700); background: var(--violeta-50); text-decoration: none; } .tab-active { color: #fff; background: var(--violeta); box-shadow: var(--sombra-violeta); } .tab-active:hover { color: #fff; background: var(--violeta-600); } /* ── Estado vazio (convite à ação) ────────────────────────────────────────── */ .empty { text-align: center; padding: var(--s7) var(--s4); color: var(--tinta-suave); } .empty::before { content: ""; display: block; width: 64px; height: 64px; margin: 0 auto var(--s4); border-radius: 20px; background: var(--grad); opacity: .9; box-shadow: var(--sombra); } .empty h3 { color: var(--texto); } .empty .btn { margin-top: var(--s3); } /* ── Quadro de conteúdo (Trello) ──────────────────────────────────────────── */ .board { display: flex; gap: var(--s3); overflow-x: auto; padding-bottom: var(--s2); -webkit-overflow-scrolling: touch; } .board-col { flex: 0 0 250px; max-width: 250px; background: var(--violeta-50); border-radius: var(--raio-md); padding: var(--s3); } .board-col-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s3); } .board-col-head span:first-child { font: 700 0.78rem var(--fonte-corpo); letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-suave); } .board-card { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio-sm); padding: var(--s3); margin-bottom: var(--s2); box-shadow: var(--sombra-sm); } .board-card-title { display: block; color: var(--tinta); font-weight: 700; } .board-card-meta { margin: var(--s1) 0; font-size: 0.82rem; color: var(--tinta-suave); } .board-flag { color: var(--ajuste); font-size: 0.82rem; margin: var(--s1) 0; font-weight: 700; } .board-move { width: 100%; margin-top: var(--s2); padding: 8px 10px; font-size: 0.88rem; } .board-add { display: block; text-align: center; padding: var(--s2); border: 1.5px dashed #cdbcff; border-radius: var(--raio-sm); color: var(--violeta-700); font-weight: 700; margin-bottom: var(--s2); } .board-add:hover { background: var(--violeta-100); text-decoration: none; } .board-empty { color: var(--tinta-suave); font-size: 0.82rem; text-align: center; padding: var(--s3); } .board-wait { font-size: 0.82rem; margin: var(--s2) 0 0; color: var(--tinta-suave); } .kind-icon { font-size: 1rem; } /* ── Linha do tempo ───────────────────────────────────────────────────────── */ .timeline { list-style: none; padding-left: 0; margin: 0; } .timeline li { padding: 12px 0 12px 18px; border-left: 3px solid var(--violeta-100); } .timeline-comment { background: var(--violeta-50); border-radius: var(--raio-sm); padding: 10px 12px; margin-top: var(--s2); } /* ── Cartões de métrica ───────────────────────────────────────────────────── */ .metric-card { text-align: left; } .metric-label { color: var(--tinta-suave); margin: 0; font-size: 0.88rem; } .metric-value { font: 600 2.2rem var(--fonte-display); color: var(--tinta); margin: var(--s1) 0; letter-spacing: -0.01em; } .metric-unit { font-size: 1rem; color: var(--tinta-suave); font-weight: 400; } .metric-delta { margin: 0; font-size: 0.9rem; font-weight: 700; } .delta-up { color: var(--ok); } .delta-down { color: var(--ajuste); } .delta-flat { color: var(--tinta-suave); } /* ── Cartão clicável ──────────────────────────────────────────────────────── */ .card-link { display: block; color: inherit; } .card-link:hover { border-color: var(--violeta); text-decoration: none; box-shadow: var(--sombra); } /* ── Grade de ações (substitui links soltos por tiles claros e agrupados) ──── Cada ação vira um "tile" clicável: ícone em selo violeta + título + 1 linha de apoio. Acomoda (navegação) e