/* ========================================================================== * Code Law — padrão visual dos micro-SaaS * * Porte fiel do contrato visual do Hub Pimentel * (Sistema adv/frontend/src/styles/tokens.css). Mesmas cores, mesma * tipografia (Playfair Display + Inter), mesmos raios e sombras — para que * o mentorado não perceba que trocou de sistema ao abrir uma ferramenta. * * FONTE ÚNICA: nenhuma tela de micro-SaaS deve inventar cor, tamanho ou raio. * Se falta um token aqui, acrescente aqui — não no CSS da tela. * * Tema: atributo data-theme no , igual ao Hub Pimentel. Claro é o * padrão. Quem troca é o codelaw-theme.js, que grava um cookie de domínio * para a escolha valer em todos os subdomínios. * ========================================================================== */ /* ---------- Fontes auto-hospedadas ---------- */ @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/playfair-display-latin-500-normal.woff2') format('woff2'); } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/playfair-display-latin-600-normal.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/inter-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/inter-latin-500-normal.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/inter-latin-600-normal.woff2') format('woff2'); } /* ========================================================================== * TOKENS — tema claro (padrão) * ========================================================================== */ :root, :root[data-theme='light'] { /* Faz o browser desenhar select/date nativos na variante clara. */ color-scheme: light; /* ---------- Primitivas ---------- */ --color-grafite: #373738; --color-grafite-fundo-e: #191919; --color-grafite-fundo-c: #2E2E2D; --color-offwhite: #F1EFEA; --color-offwhite-teto: #EFECE8; --color-branco: #FFFFFF; --color-pedra: #C3B4A0; --color-cinza-claro: #C2BDB8; --color-taupe: #86827F; --color-bronze-terroso: #96692E; --color-bronze-mineral: #D49635; --color-ocre: #C9921E; --color-hairline: #E5E1DA; /* ---------- Funcional: status e prioridade ---------- * Sempre dessaturado e fosco — linguagem de dado, não decoração. */ --status-execucao-text: #3E6187; --status-execucao-bg: rgba(62, 97, 135, 0.12); --status-concluida-text: #4A7850; --status-concluida-bg: rgba(74, 120, 80, 0.13); --status-pausada-text: #9A6B1E; --status-pausada-bg: rgba(154, 107, 30, 0.14); --priority-alta-text: #A3402C; --priority-alta-bg: rgba(163, 64, 44, 0.11); --priority-media-text: #96692E; --priority-media-bg: rgba(150, 105, 46, 0.12); --priority-baixa-text: #4A7850; --priority-baixa-bg: rgba(74, 120, 80, 0.13); /* ---------- Semânticos ---------- */ --text-primary: var(--color-grafite); --text-secondary: var(--color-taupe); --bg-light: var(--color-offwhite); --bg-teto: var(--color-offwhite-teto); --surface-card: var(--color-branco); --surface-card-hover: var(--bg-teto); --surface-data: var(--color-branco); --surface-data-text: var(--color-grafite); --surface-data-muted: var(--color-taupe); --surface-data-border: var(--color-hairline); --divider: var(--color-cinza-claro); --accent: var(--color-bronze-terroso); --accent-hover: #7C561F; --accent-watch: var(--color-ocre); --icon-neutral: var(--color-taupe); --icon-active: var(--accent); /* Barra superior: grafite escuro nos dois temas, como a sidebar do Hub. */ --topbar-bg: var(--color-grafite-fundo-e); --topbar-text: var(--color-offwhite); --topbar-text-inactive: #C7C2BC; --topbar-item-active-bg: rgba(212, 150, 53, 0.14); --topbar-item-hover-bg: rgba(255, 255, 255, 0.06); --topbar-item-active-border: var(--color-bronze-mineral); /* ---------- Tipografia ---------- */ --font-serif: 'Playfair Display', Georgia, serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace; --size-display: 56px; --size-h1: 48px; --size-h2: 36px; --size-h3: 24px; --size-body-lg: 18px; --size-body: 17px; --size-support: 14px; --size-label: 13px; --lh-display: 1.1; --lh-h1: 1.1; --lh-h2: 1.2; --lh-h3: 1.3; --lh-body: 1.6; --lh-support: 1.5; --lh-label: 1.4; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --tracking-label: 0.08em; --tracking-caps: 0.18em; /* ---------- Espaçamento (grade 4px) ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px; /* ---------- Raio ---------- */ --radius-card: 6px; --radius-input: 4px; --radius-button: 4px; --radius-chip: 20px; /* ---------- Sombras ---------- * Contato de 1px assenta a caixa + difusa puxada para cima (spread * negativo). Constante: NÃO muda no hover. Não entra em botão, chip, * campo, aba, nem cabeçalho. */ --shadow-card: 0 1px 1px rgba(55, 55, 56, 0.03), 0 9px 18px -15px rgba(55, 55, 56, 0.30); --shadow-card-sm: 0 1px 1px rgba(55, 55, 56, 0.03), 0 8px 16px -14px rgba(55, 55, 56, 0.28); --shadow-popup: 0 30px 70px -34px rgba(55, 55, 56, 0.55); --transition-calm: 180ms ease; /* ---------- Larguras ---------- */ --width-page: 1120px; --width-form: 640px; /* Altura máxima de um bloco de log (saída de comando do servidor): dá para * ler o fim de um deploy sem que dezenas de linhas empurrem a página. */ --height-log: 22rem; /* ---------- Aliases retro-compat ---------- * CSS antigo dos micro-SaaS usa estes nomes. Mapeados para não cair em * fallback (era assim que aparecia indigo #6366f1 fora do sistema). */ --bg-primary: var(--bg-light); --bg-secondary: var(--surface-card); --bg-tertiary: var(--bg-teto); --bg-hover: var(--bg-teto); --bg-active: var(--color-cinza-claro); --text-tertiary: var(--color-taupe); --text-link: var(--accent); --border-primary: var(--color-hairline); --border-secondary: var(--divider); --accent-primary: var(--accent); --accent-secondary: var(--color-bronze-mineral); --accent-tertiary: var(--accent-hover); --success: var(--status-concluida-text); --success-bg: var(--status-concluida-bg); --warning: var(--status-pausada-text); --warning-bg: var(--status-pausada-bg); --error: var(--priority-alta-text); --error-bg: var(--priority-alta-bg); --info: var(--status-execucao-text); --info-bg: var(--status-execucao-bg); --primary: var(--color-grafite); --color-primary: var(--color-grafite); --color-primary-dark: var(--color-grafite-fundo-e); --color-danger: var(--priority-alta-text); } /* ========================================================================== * TOKENS — tema escuro ("menos preto, mais grafite") * A profundidade vem da diferença entre superfícies (app → card → hover), * não do preto absoluto. O bronze conduz o olhar só onde há ação. * ========================================================================== */ :root[data-theme='dark'] { color-scheme: dark; --dk-app: #232323; --dk-sidebar: #1F1F20; --dk-card: #2D2D2E; --dk-card-hover: #343435; --dk-border: rgba(255, 255, 255, 0.10); --dk-divider: rgba(255, 255, 255, 0.08); --text-primary: var(--color-offwhite); --text-secondary: #B9B5AF; --bg-light: var(--dk-app); --bg-teto: var(--dk-card); --surface-card: var(--dk-card); --surface-card-hover: var(--dk-card-hover); --surface-data: var(--dk-card); --surface-data-text: var(--color-offwhite); --surface-data-muted: #B9B5AF; --surface-data-border: var(--dk-border); --divider: var(--dk-divider); --accent: var(--color-bronze-mineral); --accent-hover: var(--color-bronze-terroso); --accent-watch: var(--color-ocre); --icon-neutral: #BEB8B0; --icon-active: var(--accent); /* No escuro a hairline é uma película branca sutil, nunca a linha clara. */ --color-hairline: var(--dk-border); --topbar-bg: var(--dk-sidebar); --topbar-text: var(--color-offwhite); --topbar-text-inactive: #C7C2BC; --shadow-card: 0 1px 1px rgba(20, 20, 21, 0.30), 0 9px 18px -15px rgba(20, 20, 21, 0.60); --shadow-card-sm: 0 1px 1px rgba(20, 20, 21, 0.30), 0 8px 16px -14px rgba(20, 20, 21, 0.55); --shadow-popup: 0 30px 70px -34px rgba(0, 0, 0, 0.85); --bg-primary: var(--bg-light); --bg-secondary: var(--surface-card); --bg-tertiary: var(--dk-card); --bg-hover: rgba(255, 255, 255, 0.05); --bg-active: rgba(255, 255, 255, 0.10); --text-tertiary: #8E8B87; --border-primary: var(--dk-border); --border-secondary: var(--dk-divider); --accent-primary: var(--accent); --accent-secondary: var(--color-bronze-mineral); --accent-tertiary: var(--accent-hover); --primary: var(--color-grafite); --color-primary: var(--color-grafite); --color-primary-dark: var(--color-grafite-fundo-e); --color-danger: var(--priority-alta-text); } /* ========================================================================== * BASE * ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; background-color: var(--bg-light); color: var(--text-primary); font-family: var(--font-sans); font-size: var(--size-support); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Títulos em Playfair; texto corrido em Inter. */ h1, h2, h3, h4 { font-family: var(--font-serif); color: var(--text-primary); font-weight: var(--weight-semibold); margin: 0; text-wrap: balance; } h1 { font-size: 34px; line-height: var(--lh-h1); } h2 { font-size: var(--size-h3); line-height: var(--lh-h3); } h3 { font-size: 18px; line-height: var(--lh-h3); } h4 { font-size: var(--size-body); line-height: var(--lh-h3); } p { margin: 0; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); text-decoration: underline; } code, kbd, samp, pre, .cl-mono { font-family: var(--font-mono); font-size: 0.9em; } code { background-color: var(--bg-teto); border-radius: 3px; padding: 0.1em 0.35em; } hr, .divider { border: none; border-top: 1px solid var(--color-hairline); margin: var(--space-6) 0; height: 0; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-input); } ::selection { background-color: rgba(212, 150, 53, 0.28); } /* ========================================================================== * LAYOUT * ========================================================================== */ /* Barra superior — o elemento que amarra todas as ferramentas entre si. */ .cl-topbar { background-color: var(--topbar-bg); color: var(--topbar-text); padding: 0 var(--space-6); position: sticky; top: 0; z-index: 100; } .cl-topbar-in { max-width: var(--width-page); margin: 0 auto; min-height: 56px; display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; } .cl-brand { font-family: var(--font-serif); font-size: var(--size-body); font-weight: var(--weight-semibold); color: var(--topbar-text); letter-spacing: 0.01em; display: inline-flex; align-items: center; gap: var(--space-2); } .cl-brand:hover { color: var(--topbar-text); text-decoration: none; } .cl-brand-mark { color: var(--color-bronze-mineral); } /* Nome da ferramenta ao lado da marca, separado por um fio. */ .cl-topbar-app { font-family: var(--font-sans); font-size: var(--size-label); color: var(--topbar-text-inactive); padding-left: var(--space-4); border-left: 1px solid rgba(255, 255, 255, 0.14); } .cl-topbar-nav { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .cl-topbar-who { font-size: var(--size-label); color: var(--topbar-text-inactive); margin-right: var(--space-2); } .cl-topbar-link { font-size: var(--size-label); color: var(--topbar-text-inactive); padding: 6px var(--space-3); border-radius: var(--radius-button); transition: background-color var(--transition-calm), color var(--transition-calm); } .cl-topbar-link:hover { background-color: var(--topbar-item-hover-bg); color: var(--topbar-text); text-decoration: none; } .cl-topbar-link.is-active { background-color: var(--topbar-item-active-bg); color: var(--topbar-text); } /* Abas de área (Ferramentas, Mentorados, Sistemas, Servidor). * Classe própria porque .cl-topbar-nav empurra tudo para a direita com * margin-left:auto — e a barra fica mais legível separando "onde estou" * (à esquerda, colado ao nome da tela) de "quem sou" (à direita). */ .cl-topbar-areas { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; } /* Alternador de tema. O padrão serve sobre superfície clara; dentro da barra * grafite ele é reescopado abaixo — assim a mesma marcação funciona nos dois * lugares sem a tela precisar de override. */ .cl-theme-switch { display: inline-flex; border: 1px solid var(--color-hairline); border-radius: var(--radius-button); overflow: hidden; flex: 0 0 auto; } .cl-theme-btn { background: transparent; border: none; color: var(--text-secondary); font-family: var(--font-sans); font-size: var(--size-label); padding: 5px var(--space-3); cursor: pointer; line-height: 1.4; transition: background-color var(--transition-calm), color var(--transition-calm); } .cl-theme-btn:hover { background-color: var(--bg-hover); } .cl-theme-btn[aria-pressed='true'] { background-color: var(--bg-teto); color: var(--accent); } .cl-topbar .cl-theme-switch { border-color: rgba(255, 255, 255, 0.16); } .cl-topbar .cl-theme-btn { color: var(--topbar-text-inactive); } .cl-topbar .cl-theme-btn:hover { background-color: var(--topbar-item-hover-bg); } .cl-topbar .cl-theme-btn[aria-pressed='true'] { background-color: var(--topbar-item-active-bg); color: var(--color-bronze-mineral); } /* Botão de sair: discreto na barra grafite, sem competir com o bronze. */ .cl-topbar-signout { background: transparent; border: none; color: var(--topbar-text-inactive); font-family: var(--font-sans); font-size: var(--size-label); padding: 6px var(--space-3); border-radius: var(--radius-button); cursor: pointer; transition: background-color var(--transition-calm), color var(--transition-calm); } .cl-topbar-signout:hover { background-color: var(--topbar-item-hover-bg); color: var(--topbar-text); } /* Corpo da página */ .cl-page { max-width: var(--width-page); margin: 0 auto; padding: var(--space-8) var(--space-6) var(--space-16); } .cl-page-narrow { max-width: var(--width-form); } /* Cabeçalho sereno: fio embaixo, título em serif, nada de faixa colorida. */ .cl-page-header { padding: var(--space-6) 0 var(--space-8); margin-bottom: var(--space-6); border-bottom: 1px solid var(--color-hairline); } .cl-page-title { font-family: var(--font-serif); font-size: 34px; font-weight: var(--weight-semibold); line-height: 1.1; color: var(--text-primary); margin: 0; } .cl-page-desc { margin: var(--space-1) 0 0; font-family: var(--font-sans); font-size: var(--size-support); color: var(--text-secondary); line-height: var(--lh-support); max-width: 68ch; } .cl-page-header-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; } /* Telas de entrada (login, troca de senha): coluna estreita e centrada, * sem barra superior — a marca faz o papel de cabeçalho. */ .cl-auth { max-width: 400px; margin: 4vh auto 0; display: flex; flex-direction: column; gap: var(--space-6); } .cl-auth-head { text-align: center; } .cl-auth-brand { font-family: var(--font-serif); font-size: 30px; font-weight: var(--weight-semibold); color: var(--text-primary); line-height: 1.1; } .cl-auth-brand span { color: var(--accent); } .cl-auth-foot { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); } .cl-section-title { font-family: var(--font-sans); font-size: 11px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-secondary); margin: var(--space-8) 0 var(--space-3); } .cl-stack { display: flex; flex-direction: column; gap: var(--space-4); } .cl-row { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: flex-end; } .cl-row > * { flex: 1 1 180px; } .cl-row > .cl-shrink { flex: 0 0 auto; } .cl-grid { display: grid; gap: var(--space-4); /* min(268px, 100%) evita que o card estoure o container e crie rolagem lateral em telas mais estreitas que o próprio mínimo. */ grid-template-columns: repeat(auto-fill, minmax(min(268px, 100%), 1fr)); } .cl-spacer { flex: 1 1 auto; } /* ========================================================================== * CARD * ========================================================================== */ .card, .cl-card { background-color: var(--surface-card); border: 1px solid var(--color-hairline); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: var(--space-6); position: relative; } .cl-card-sm { padding: var(--space-4); box-shadow: var(--shadow-card-sm); } .cl-card-flush { padding: 0; overflow: hidden; } /* Fio bronze de 3px no topo, revelado só no hover de card clicável. */ .cl-card-hover::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background-color: var(--accent); opacity: 0; transition: opacity var(--transition-calm); border-radius: var(--radius-card) var(--radius-card) 0 0; } .cl-card-hover:hover::before { opacity: 1; } .cl-card-hover:hover { border-color: var(--accent-secondary); } .cl-card-title { font-family: var(--font-serif); font-size: 18px; font-weight: var(--weight-semibold); color: var(--text-primary); margin: 0; } .cl-card-sub { font-size: var(--size-label); color: var(--text-secondary); margin: var(--space-1) 0 0; line-height: var(--lh-support); } /* ---------- Cartão de ferramenta no catálogo ---------- * O card INTEIRO é o alvo de clique (Fitts): o link do título se estica por * cima de tudo com um ::after. Os links auxiliares do rodapé sobem de camada * para continuarem clicáveis. Isso evita dentro de , que é HTML * inválido, e mantém um só ponto de ação por card. */ .cl-app { display: flex; flex-direction: column; gap: var(--space-3); position: relative; padding: var(--space-4); transition: border-color var(--transition-calm), background-color var(--transition-calm); } .cl-app-head { display: flex; align-items: flex-start; gap: var(--space-3); } /* Monograma no lugar do emoji: sóbrio, e distingue as ferramentas sem colorir. */ .cl-app-sigla { width: 38px; height: 38px; flex: 0 0 38px; border-radius: var(--radius-input); background-color: var(--bg-teto); border: 1px solid var(--color-hairline); display: grid; place-items: center; font-family: var(--font-serif); font-size: 14px; font-weight: var(--weight-semibold); letter-spacing: 0.02em; color: var(--text-secondary); transition: color var(--transition-calm), border-color var(--transition-calm); } .cl-app-id { min-width: 0; flex: 1 1 auto; } .cl-app-name { font-family: var(--font-serif); font-size: var(--size-body); font-weight: var(--weight-semibold); color: var(--text-primary); line-height: 1.25; /* Nome longo trunca em vez de empurrar o card. */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cl-app-name a { color: inherit; text-decoration: none; } /* O link do título cobre o card todo — é ele que responde ao clique. */ .cl-app-name a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-card); } .cl-app-cat { display: block; margin-top: 2px; font-size: 11px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-secondary); } /* Duas linhas fixas: é o que faz os rodapés alinharem entre cards da linha. */ .cl-app-desc { font-size: var(--size-label); color: var(--text-secondary); line-height: var(--lh-support); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(var(--lh-support) * 2em); } .cl-app-foot { margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--color-hairline); display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; min-height: 34px; } /* Links auxiliares: acima da camada do link esticado, e discretos. */ .cl-app-link { position: relative; z-index: 1; font-size: var(--size-label); color: var(--text-secondary); } .cl-app-link:hover { color: var(--accent); } /* "Abrir" não é botão: é a seta que confirma que o card leva a algum lugar. */ .cl-app-seta { margin-left: auto; font-size: var(--size-label); font-weight: var(--weight-medium); color: var(--accent); white-space: nowrap; transition: transform var(--transition-calm); } /* Hover e foco moram no card, não no botão — a resposta é calma: o fio ganha bronze e a superfície sobe um degrau. Sem salto, sem sombra nova. */ .cl-app-aberto:hover { border-color: var(--accent); background-color: var(--surface-card-hover); } .cl-app-aberto:hover .cl-app-sigla { color: var(--accent); border-color: var(--accent); } .cl-app-aberto:hover .cl-app-seta { transform: translateX(2px); } .cl-app-aberto:focus-within { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 2px; } /* Bloqueado: sem opacity — ela derruba o contraste do texto no tema escuro. A diferença vem da superfície e da ausência de bronze. */ .cl-app-locked { background-color: var(--bg-teto); border-style: dashed; box-shadow: none; } .cl-app-locked .cl-app-name { color: var(--text-secondary); } .cl-app-locked .cl-app-sigla { background-color: transparent; border-style: dashed; } /* KPI / número grande */ .cl-stats { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .cl-stat { background-color: var(--surface-card); border: 1px solid var(--color-hairline); border-radius: var(--radius-card); box-shadow: var(--shadow-card-sm); padding: var(--space-4) var(--space-4) var(--space-3); } .cl-stat-num { font-family: var(--font-serif); font-size: 30px; font-weight: var(--weight-semibold); line-height: 1.05; color: var(--text-primary); font-variant-numeric: tabular-nums; display: block; } .cl-stat-label { font-size: 11px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-secondary); display: block; margin-top: var(--space-1); } /* Terceira linha do cartão de número: o número bruto por trás do percentual * ("5,0 / 8,0 GB", "carga 0,31 · 2 vCPU"). Sem ela o admin vê a porcentagem * e não sabe de quanto. Não é .cl-stat-label — esta não é caixa alta. */ .cl-stat-sub { display: block; margin-top: var(--space-1); font-size: var(--size-label); color: var(--text-secondary); line-height: var(--lh-support); } /* ---------- Medidor de ocupação ---------- * nativo em vez de uma
com largura no style: a tela não pode * cravar tamanho e o elemento já anuncia o valor sozinho. O preenchimento * precisa ser repetido em -webkit- e -moz-: não existe propriedade única * aceita pelos dois motores. Os limiares (65% atenção, 85% alerta) são a * mesma régua do painel antigo. */ .cl-meter { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: var(--space-2); margin-top: var(--space-3); border: none; border-radius: var(--radius-chip); background-color: var(--bg-active); overflow: hidden; color: var(--accent); } .cl-meter::-webkit-progress-bar { background-color: var(--bg-active); border-radius: var(--radius-chip); } .cl-meter::-webkit-progress-value { background-color: var(--accent); border-radius: var(--radius-chip); } .cl-meter::-moz-progress-bar { background-color: var(--accent); border-radius: var(--radius-chip); } .cl-meter-espera::-webkit-progress-value { background-color: var(--status-pausada-text); } .cl-meter-espera::-moz-progress-bar { background-color: var(--status-pausada-text); } .cl-meter-alerta::-webkit-progress-value { background-color: var(--priority-alta-text); } .cl-meter-alerta::-moz-progress-bar { background-color: var(--priority-alta-text); } /* ========================================================================== * BOTÕES * CTA primário bronze cheio — um único por tela. Hover escurece, nunca * acende cor nova. Área de toque nunca abaixo de 42px no tamanho padrão. * ========================================================================== */ .btn, .cl-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-sans); font-size: var(--size-support); font-weight: var(--weight-medium); line-height: 1; min-height: 42px; padding: 0 var(--space-4); border-radius: var(--radius-button); border: 1px solid transparent; background-color: var(--accent); color: var(--color-offwhite); cursor: pointer; white-space: nowrap; text-decoration: none; transition: background-color var(--transition-calm), border-color var(--transition-calm), transform var(--transition-calm); } .btn:hover:not(:disabled), .cl-btn:hover:not(:disabled) { background-color: var(--accent-hover); color: var(--color-offwhite); text-decoration: none; } .btn:active:not(:disabled), .cl-btn:active:not(:disabled) { transform: translateY(1px); } .btn:disabled, .cl-btn:disabled, .btn[disabled] { opacity: 0.5; cursor: not-allowed; } .btn-sm, .cl-btn-sm { min-height: 32px; padding: 0 var(--space-3); font-size: var(--size-label); } .btn-lg, .cl-btn-lg { min-height: 48px; padding: 0 var(--space-6); font-size: var(--size-body); } .btn-primary, .cl-btn-primary { background-color: var(--accent); color: var(--color-offwhite); } /* Secundário: contorno hairline, sem preenchimento. */ .btn-secondary, .btn-outline, .cl-btn-secondary { background-color: transparent; color: var(--text-primary); border-color: var(--color-hairline); } .btn-secondary:hover:not(:disabled), .btn-outline:hover:not(:disabled), .cl-btn-secondary:hover:not(:disabled) { background-color: var(--bg-hover); color: var(--text-primary); } .btn-ghost, .cl-btn-ghost { background-color: transparent; color: var(--text-primary); } .btn-ghost:hover:not(:disabled), .cl-btn-ghost:hover:not(:disabled) { background-color: var(--bg-hover); color: var(--text-primary); } .btn-danger, .cl-btn-danger { background-color: var(--priority-alta-text); color: var(--color-offwhite); } .btn-danger:hover:not(:disabled), .cl-btn-danger:hover:not(:disabled) { filter: brightness(0.92); background-color: var(--priority-alta-text); } .btn-block, .cl-btn-block { width: 100%; } /* Spinner dentro do botão */ .cl-spin { width: 1rem; height: 1rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: cl-spin 0.6s linear infinite; } @keyframes cl-spin { to { transform: rotate(360deg); } } /* ========================================================================== * FORMULÁRIO * ========================================================================== */ .cl-field { display: block; margin-bottom: var(--space-4); } label { display: block; font-family: var(--font-sans); font-size: var(--size-label); font-weight: var(--weight-medium); color: var(--text-primary); margin-bottom: var(--space-1); } .cl-hint { font-size: var(--size-label); color: var(--text-secondary); line-height: var(--lh-support); margin-bottom: var(--space-2); } .cl-req { color: var(--priority-alta-text); } .cl-opt { color: var(--text-secondary); font-weight: var(--weight-regular); } input[type='text'], input[type='email'], input[type='password'], input[type='number'], input[type='search'], input[type='date'], input[type='tel'], select, textarea { width: 100%; font-family: var(--font-sans); font-size: var(--size-support); line-height: 1.4; color: var(--text-primary); background-color: var(--surface-card); border: 1px solid var(--color-hairline); border-radius: var(--radius-input); padding: 10px var(--space-3); min-height: 42px; transition: border-color var(--transition-calm); } textarea { min-height: 96px; resize: vertical; } input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) { border-color: var(--divider); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(150, 105, 46, 0.12); } :root[data-theme='dark'] input:focus, :root[data-theme='dark'] select:focus, :root[data-theme='dark'] textarea:focus { box-shadow: 0 0 0 3px rgba(212, 150, 53, 0.16); } input::placeholder, textarea::placeholder { color: var(--text-secondary); opacity: 1; } input:disabled, select:disabled, textarea:disabled { opacity: 0.55; cursor: not-allowed; } /* Interruptor (dry-run e afins) */ .cl-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex: 0 0 auto; margin: 0; } .cl-switch input { position: absolute; opacity: 0; width: 0; height: 0; } .cl-switch-slider { position: absolute; inset: 0; background-color: var(--divider); border-radius: var(--radius-chip); cursor: pointer; transition: background-color var(--transition-calm); } .cl-switch-slider::before { content: ''; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px; background-color: var(--color-branco); border-radius: 50%; transition: transform var(--transition-calm); } .cl-switch input:checked + .cl-switch-slider { background-color: var(--accent); } .cl-switch input:checked + .cl-switch-slider::before { transform: translateX(20px); } .cl-switch input:focus-visible + .cl-switch-slider { outline: 2px solid var(--accent); outline-offset: 2px; } .cl-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; } /* Zona de arrastar arquivo */ .cl-drop { position: relative; border: 1px dashed var(--divider); border-radius: var(--radius-card); background-color: var(--bg-teto); padding: var(--space-6); text-align: center; cursor: pointer; transition: border-color var(--transition-calm), background-color var(--transition-calm); } .cl-drop:hover { border-color: var(--accent); } .cl-drop.drag-over { border-color: var(--accent); background-color: var(--surface-card-hover); } .cl-drop.has-files { border-style: solid; border-color: var(--status-concluida-text); } .cl-drop input[type='file'] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; min-height: 0; padding: 0; } .cl-drop-icon { font-size: 26px; line-height: 1; color: var(--icon-neutral); } .cl-drop-text { font-size: var(--size-support); color: var(--text-secondary); margin-top: var(--space-2); } .cl-drop-files { font-size: var(--size-label); color: var(--status-concluida-text); font-weight: var(--weight-medium); margin-top: var(--space-2); word-break: break-word; } /* ========================================================================== * TABELA — superfície de dados * ========================================================================== */ .table-container, .cl-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--surface-data-border); border-radius: var(--radius-card); background-color: var(--surface-data); color: var(--surface-data-text); --text-primary: var(--surface-data-text); --text-secondary: var(--surface-data-muted); } .table-container table, .cl-table-wrap table, table.cl-table { width: 100%; border-collapse: collapse; font-family: var(--font-sans); font-size: var(--size-support); color: var(--surface-data-text); } .table-container th, .cl-table-wrap th, table.cl-table th { text-align: left; padding: 14px var(--space-4); font-size: 11px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--surface-data-muted); background-color: transparent; border-bottom: 1px solid var(--surface-data-border); white-space: nowrap; } .table-container td, .cl-table-wrap td, table.cl-table td { padding: 16px var(--space-4); border-bottom: 1px solid var(--surface-data-border); color: var(--surface-data-text); vertical-align: middle; } .table-container tr:last-child td, .cl-table-wrap tr:last-child td, table.cl-table tr:last-child td { border-bottom: none; } .cl-table-wrap tbody tr:hover { background-color: var(--bg-hover); } .cl-num { font-variant-numeric: tabular-nums; text-align: right; } .cl-nowrap { white-space: nowrap; } .cl-wrap { white-space: normal; } .cl-empty { padding: var(--space-12) var(--space-6); text-align: center; color: var(--surface-data-muted); font-size: var(--size-support); } /* ========================================================================== * CHIPS E ETIQUETAS * Fundo fosco + texto na cor. Nunca preenchimento saturado. * ========================================================================== */ .cl-chip, .status-chip, .tag { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); border-radius: var(--radius-chip); font-family: var(--font-sans); font-size: 11.5px; font-weight: var(--weight-semibold); letter-spacing: 0.02em; white-space: nowrap; border: 1px solid transparent; color: var(--text-primary); } /* Marca: silêncio quase total — só contorno. */ .cl-chip-marca, .status-chip-marca { background-color: transparent; border-color: var(--color-hairline); } .cl-chip-ok, .status-chip-concluida { color: var(--status-concluida-text); background-color: var(--status-concluida-bg); } .cl-chip-info, .status-chip-execucao { color: var(--status-execucao-text); background-color: var(--status-execucao-bg); } .cl-chip-espera, .status-chip-pausada { color: var(--status-pausada-text); background-color: var(--status-pausada-bg); } .cl-chip-alerta { color: var(--priority-alta-text); background-color: var(--priority-alta-bg); } /* Ponto de status, para listas densas */ .cl-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: 0 0 auto; background-color: var(--icon-neutral); } .cl-dot-ok { background-color: var(--status-concluida-text); } .cl-dot-info { background-color: var(--status-execucao-text); } .cl-dot-espera { background-color: var(--status-pausada-text); } .cl-dot-alerta { background-color: var(--priority-alta-text); } /* ========================================================================== * AVISOS * ========================================================================== */ .cl-alert, .alert, .flash { border: 1px solid transparent; border-radius: var(--radius-input); padding: var(--space-3) var(--space-4); font-size: var(--size-support); line-height: var(--lh-support); margin-bottom: var(--space-4); } .cl-alert-info, .alert.info, .flash.info { color: var(--status-execucao-text); background-color: var(--status-execucao-bg); border-color: rgba(62, 97, 135, 0.28); } .cl-alert-ok, .alert.ok, .alert.success, .flash.ok, .flash.success { color: var(--status-concluida-text); background-color: var(--status-concluida-bg); border-color: rgba(74, 120, 80, 0.30); } .cl-alert-espera, .alert.warn, .alert.warning, .flash.warn, .flash.warning { color: var(--status-pausada-text); background-color: var(--status-pausada-bg); border-color: rgba(154, 107, 30, 0.32); } .cl-alert-erro, .alert.erro, .alert.error, .flash.erro, .flash.error { color: var(--priority-alta-text); background-color: var(--priority-alta-bg); border-color: rgba(163, 64, 44, 0.28); } /* ========================================================================== * MODAL * ========================================================================== */ .cl-overlay { position: fixed; inset: 0; background-color: rgba(25, 25, 25, 0.55); display: flex; align-items: center; justify-content: center; padding: var(--space-4); z-index: 200; } .cl-modal { background-color: var(--surface-card); border: 1px solid var(--color-hairline); border-radius: var(--radius-card); box-shadow: var(--shadow-popup); width: 100%; max-width: 560px; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; } .cl-modal-header { padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-hairline); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); } .cl-modal-header h2, .cl-modal-header h3 { font-size: 18px; } .cl-modal-body { padding: var(--space-6); overflow-y: auto; } .cl-modal-footer { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-hairline); display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); } .cl-modal-close { background: transparent; border: none; color: var(--icon-neutral); font-size: 20px; line-height: 1; cursor: pointer; padding: var(--space-1); border-radius: var(--radius-button); } .cl-modal-close:hover { background-color: var(--bg-hover); color: var(--text-primary); } /* Aviso flutuante */ .cl-toast { position: fixed; bottom: var(--space-6); left: 50%; transform: translateX(-50%); background-color: var(--color-grafite-fundo-e); color: var(--color-offwhite); padding: var(--space-3) var(--space-6); border-radius: var(--radius-card); box-shadow: var(--shadow-popup); font-size: var(--size-support); z-index: 300; } /* ========================================================================== * CONFIRMAÇÃO DE AÇÃO DESTRUTIVA (sem JavaScript) *
guarda a ação atrás de um clique e o painel que abre exige o nome * digitado. Usamos o elemento nativo em vez de modal com script porque a tela * de sistemas é operada por uma pessoa só, no servidor, e um confirm em JS * seria mais código para o mesmo efeito. O painel abre no fluxo do documento * (não flutuando): dentro de .cl-table-wrap, que tem overflow, um elemento * posicionado seria cortado. * ========================================================================== */ .cl-confirm { display: inline-block; } /* Some com o triângulo para o poder vestir .cl-btn. */ .cl-confirm > summary { list-style: none; } .cl-confirm > summary::-webkit-details-marker { display: none; } .cl-confirm-box { margin-top: var(--space-3); /* Sem teto, o
é inline-block e adota a largura máxima do texto: o painel abriria numa linha só e esticaria a coluna de ações da tabela. */ max-width: 320px; padding: var(--space-3); border: 1px solid var(--priority-alta-bg); border-radius: var(--radius-input); background-color: var(--bg-teto); white-space: normal; text-align: left; } .cl-confirm-box input[type='text'] { margin-bottom: var(--space-2); } /* Saída crua de comando do servidor. Fundo grafite nos dois temas: é um * terminal, e ler log em superfície clara cansa. Rolagem própria para o log * não empurrar a página. */ .cl-log { margin: 0; padding: var(--space-4); background-color: var(--color-grafite-fundo-e); color: var(--color-offwhite); border-radius: var(--radius-card); max-height: var(--height-log); overflow: auto; white-space: pre-wrap; word-break: break-word; line-height: var(--lh-support); } /* ========================================================================== * RODAPÉ * ========================================================================== */ .cl-footer { max-width: var(--width-page); margin: 0 auto; padding: var(--space-6); border-top: 1px solid var(--color-hairline); display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; font-size: var(--size-label); color: var(--text-secondary); } /* ========================================================================== * UTILITÁRIOS * ========================================================================== */ .cl-muted { color: var(--text-secondary); } .cl-small { font-size: var(--size-label); } .cl-flush { margin: 0 !important; } /* Observação abaixo de um bloco (a diferença do .cl-hint é a margem). */ .cl-note { font-size: var(--size-label); color: var(--text-secondary); line-height: var(--lh-support); margin: var(--space-3) 0 0; } /* Linha de ações no fim de um formulário ou card. */ .cl-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; } .cl-actions-end { justify-content: flex-end; } /* Senha provisória: para ser lida em voz alta ou copiada sem erro. */ .cl-senha { font-family: var(--font-mono); font-size: 22px; letter-spacing: 0.06em; color: var(--text-primary); background-color: var(--bg-teto); border: 1px dashed var(--divider); border-radius: var(--radius-input); padding: var(--space-3) var(--space-4); display: inline-block; -webkit-user-select: all; user-select: all; } /* Só para leitor de tela — cabeçalho de coluna sem rótulo visível. */ .cl-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Lista dentro de aviso */ .cl-alert ul { margin: var(--space-2) 0 0; padding-left: 18px; } .cl-alert li { margin-top: 2px; } .cl-label-caps { font-size: 11px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-secondary); } .cl-serif { font-family: var(--font-serif); } .cl-center { text-align: center; } .cl-inline { display: inline; } .cl-hidden { display: none !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } @media (max-width: 768px) { .cl-page { padding: var(--space-6) var(--space-4) var(--space-12); } .cl-page-header { padding: var(--space-4) 0 var(--space-6); } .cl-page-title { font-size: 27px; } h1 { font-size: 27px; } .card, .cl-card { padding: var(--space-4); } .cl-topbar { padding: 0 var(--space-4); } /* Com as abas de área na barra, o nome de quem está logado é o item menos útil no celular — some primeiro para as abas caberem em uma linha. */ .cl-topbar-who { display: none; } }