/* * Estilos do Portal de Licenças — sem framework CSS (propositalmente enxuto, * sem depender de Bootstrap/Tailwind), mas com um pequeno "design system" * via variáveis CSS para manter cor/espaçamento/raio consistentes em todo * o app, e regras @media para o layout se adaptar a telas de celular. */ :root { --cor-fundo: #f3f4f7; --cor-superficie: #ffffff; --cor-texto: #1c2028; --cor-texto-suave: #6b7280; --cor-borda: #e4e6eb; --cor-primaria: #2f6feb; --cor-primaria-escura: #2557bf; --cor-erro-fundo: #fdeceb; --cor-erro-texto: #b3261e; --cor-sucesso-fundo: #e6f6ea; --cor-sucesso-texto: #1c6b32; --raio: 10px; --raio-pequeno: 6px; --sombra: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08); --sombra-flutuante: 0 20px 40px rgba(16, 24, 40, 0.25); --cor-tabela-cabecalho: #fafafa; --cor-tabela-hover: #f9fafc; --cor-badge-alerta-fundo: #fff4e0; --cor-badge-alerta-texto: #8a5a00; --cor-badge-negociado-fundo: #eef0fd; --cor-badge-negociado-texto: #3730a3; --cor-atencao-fundo: #fff8ef; --cor-atencao-borda: #d97706; color-scheme: light; } /* Modo escuro: aplicado via atributo data-tema no (definido pelo botão na topbar + app.js, com preferência salva no localStorage) ou, se o usuário nunca escolheu, seguindo o prefers-color-scheme do sistema — ver regra @media logo abaixo. Só redefine as variáveis de cor; o resto do CSS já usa var(--cor-*) em todo canto, então herda o tema automaticamente. */ :root[data-tema="escuro"] { --cor-fundo: #14161c; --cor-superficie: #1e212a; --cor-texto: #e7e9ee; --cor-texto-suave: #99a0ac; --cor-borda: #2d313c; --cor-primaria: #5b8cf0; --cor-primaria-escura: #6f9bf4; --cor-erro-fundo: #3a2020; --cor-erro-texto: #f2867d; --cor-sucesso-fundo: #1c2f22; --cor-sucesso-texto: #7cd992; --sombra: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.35); --sombra-flutuante: 0 20px 40px rgba(0, 0, 0, 0.5); --cor-tabela-cabecalho: #22252e; --cor-tabela-hover: #262a34; --cor-badge-alerta-fundo: #3a2c10; --cor-badge-alerta-texto: #f0b429; --cor-badge-negociado-fundo: #262a4a; --cor-badge-negociado-texto: #a5b4fc; --cor-atencao-fundo: #3a2c10; --cor-atencao-borda: #f0b429; color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]):not([data-tema="escuro"]) { --cor-fundo: #14161c; --cor-superficie: #1e212a; --cor-texto: #e7e9ee; --cor-texto-suave: #99a0ac; --cor-borda: #2d313c; --cor-primaria: #5b8cf0; --cor-primaria-escura: #6f9bf4; --cor-erro-fundo: #3a2020; --cor-erro-texto: #f2867d; --cor-sucesso-fundo: #1c2f22; --cor-sucesso-texto: #7cd992; --sombra: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.35); --sombra-flutuante: 0 20px 40px rgba(0, 0, 0, 0.5); --cor-tabela-cabecalho: #22252e; --cor-tabela-hover: #262a34; --cor-badge-alerta-fundo: #3a2c10; --cor-badge-alerta-texto: #f0b429; --cor-badge-negociado-fundo: #262a4a; --cor-badge-negociado-texto: #a5b4fc; --cor-atencao-fundo: #3a2c10; --cor-atencao-borda: #f0b429; color-scheme: dark; } } * { box-sizing: border-box; } body { margin: 0; font-family: "Segoe UI", -apple-system, Roboto, Arial, sans-serif; background: var(--cor-fundo); color: var(--cor-texto); line-height: 1.5; -webkit-font-smoothing: antialiased; } h1, h2, h3 { line-height: 1.25; margin-top: 0; } h1 { font-size: 1.5rem; } h2 { font-size: 1.1rem; } h3 { font-size: 1rem; } a { color: var(--cor-primaria); } /* ===== Barra superior (menu, só aparece com usuário logado — ver layout.php) ===== */ .topbar { display: flex; align-items: center; justify-content: space-between; background: var(--cor-superficie); border-bottom: 1px solid var(--cor-borda); padding: 0.85rem 1.5rem; position: sticky; top: 0; z-index: 10; } .topbar-brand { font-weight: 700; color: var(--cor-texto); } /* Botão hamburguer, só aparece em telas pequenas (ver @media abaixo) */ .topbar-toggle { display: none; background: none; border: 1px solid var(--cor-borda); border-radius: var(--raio-pequeno); padding: 0.4rem 0.6rem; font-size: 1.1rem; cursor: pointer; } .topbar-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem 1.25rem; } .topbar-nav a { color: var(--cor-texto-suave); text-decoration: none; font-size: 0.95rem; } .topbar-nav a:hover { color: var(--cor-texto); } .topbar-user { color: var(--cor-texto-suave); font-size: 0.9rem; } /* Botão de alternar claro/escuro (app.js liga data-tema no e salva a escolha no localStorage). Fica sempre visível na topbar, não só no celular. */ .tema-toggle { background: none; border: 1px solid var(--cor-borda); border-radius: var(--raio-pequeno); padding: 0.35rem 0.55rem; font-size: 1rem; line-height: 1; color: var(--cor-texto); cursor: pointer; } .tema-toggle:hover { border-color: var(--cor-primaria); } /* 1100px cortava tabelas largas (ex: conferência de importação, com Produto, Qtde, 2 valores, 3 datas e Status) forçando rolagem horizontal mesmo em telas largas com espaço sobrando nas laterais. 1300px dá folga pra essas tabelas sem prejudicar a leitura de cards/formulários, que já têm seus próprios max-width menores (ex: .card-form). */ .content { max-width: 1300px; margin: 0 auto; padding: 1.5rem; } /* ===== Telas standalone (login, definir senha, erros) ===== */ .auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #1c2028, #2f3542); padding: 1.5rem; } .auth-card { background: var(--cor-superficie); padding: 2rem; border-radius: var(--raio); width: 100%; max-width: 380px; box-shadow: var(--sombra-flutuante); } .auth-card h1 { font-size: 1.3rem; margin-bottom: 1.5rem; } .auth-card label { display: block; margin-bottom: 1rem; font-size: 0.9rem; color: var(--cor-texto-suave); } .auth-card input { width: 100%; padding: 0.6rem 0.7rem; margin-top: 0.3rem; border: 1px solid var(--cor-borda); border-radius: var(--raio-pequeno); font-size: 1rem; color: var(--cor-texto); } .auth-card input:focus { outline: none; border-color: var(--cor-primaria); box-shadow: 0 0 0 3px rgba(47, 111, 235, 0.15); } .auth-card button { width: 100%; padding: 0.65rem; background: var(--cor-primaria); color: #fff; border: none; border-radius: var(--raio-pequeno); font-size: 1rem; font-weight: 600; cursor: pointer; } .auth-card button:hover { background: var(--cor-primaria-escura); } /* ===== Alertas ===== */ .alert { padding: 0.6rem 0.85rem; border-radius: var(--raio-pequeno); font-size: 0.85rem; margin-bottom: 1rem; } .alert-erro { background: var(--cor-erro-fundo); color: var(--cor-erro-texto); } .alert-sucesso { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso-texto); } /* ===== Cabeçalho de listagem (título + botão de ação principal) ===== */ .page-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.25rem; } /* ===== Botões ===== */ .btn { display: inline-block; padding: 0.55rem 1.1rem; background: var(--cor-primaria); color: #fff; border: none; border-radius: var(--raio-pequeno); font-size: 0.95rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: background 0.15s ease; } .btn:hover { background: var(--cor-primaria-escura); color: #fff; } /* Botão de ação secundária dentro de uma linha de tabela (ex: Ativar/Desativar) */ .btn-link { background: none; border: none; color: var(--cor-primaria); text-decoration: underline; cursor: pointer; font-size: 0.9rem; padding: 0; } /* ===== Cards (painéis de conteúdo) ===== */ .card { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 1.5rem; margin-bottom: 1.5rem; } .card-form label { display: block; margin-bottom: 1rem; font-size: 0.9rem; color: var(--cor-texto-suave); } .card-form input[type="text"], .card-form input[type="email"], .card-form input[type="number"], .card-form input[type="date"], .card-form select { display: block; width: 100%; max-width: 420px; padding: 0.55rem 0.7rem; margin-top: 0.3rem; border: 1px solid var(--cor-borda); border-radius: var(--raio-pequeno); font-size: 1rem; color: var(--cor-texto); background: var(--cor-superficie); } .card-form input:focus, .card-form select:focus { outline: none; border-color: var(--cor-primaria); box-shadow: 0 0 0 3px rgba(47, 111, 235, 0.15); } .campo-checkbox { display: flex; align-items: center; gap: 0.5rem; } .campo-erro { display: block; color: var(--cor-erro-texto); font-size: 0.8rem; margin-top: 0.3rem; } .texto-suave { color: var(--cor-texto-suave); font-size: 0.85rem; } /* Selo pequeno para chamar atenção dentro de uma célula de tabela (ex: produto do catálogo ainda sem preço definido) */ .badge { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; } .badge-alerta { background: var(--cor-badge-alerta-fundo); color: var(--cor-badge-alerta-texto); } .badge-erro { background: var(--cor-erro-fundo); color: var(--cor-erro-texto); } /* Empilha o badge embaixo do valor da célula em vez de ao lado, pra não esticar a largura da coluna (ex: coluna Renovação da tabela do portal). */ .badge-bloco { display: block; margin-top: 0.2rem; white-space: nowrap; width: fit-content; } /* Sinaliza que Valor Unit./Total foi editado manualmente, divergindo do preço do produto vinculado no catálogo — cor própria, reservada só pra esse estado (não é erro nem alerta, é uma informação neutra). */ .badge-negociado { background: var(--cor-badge-negociado-fundo); color: var(--cor-badge-negociado-texto); } /* Campos de edição inline na tabela de conferência de importação — bem mais compactos que os campos normais de formulário (.card-form), porque dividem espaço com várias outras colunas na mesma linha. */ .input-tabela { width: 100%; min-width: 90px; padding: 0.35rem 0.5rem; border: 1px solid var(--cor-borda); border-radius: var(--raio-pequeno); font-size: 0.85rem; color: var(--cor-texto); background: var(--cor-superficie); } .input-tabela:focus { outline: none; border-color: var(--cor-primaria); box-shadow: 0 0 0 2px rgba(47, 111, 235, 0.15); } .input-tabela-num { min-width: 55px; } .input-tabela-valor { min-width: 85px; } select.input-tabela { min-width: 200px; } /* ===== Campo de busca (type="search") ===== Genérico, não fica preso à toolbar do portal — usado em qualquer tela com filtro de busca em tabela (ex: portal do cliente, listagem de clientes). */ input[type="search"] { padding: 0.55rem 0.7rem; border: 1px solid var(--cor-borda); border-radius: var(--raio-pequeno); font-size: 1rem; min-width: 260px; background: var(--cor-superficie); color: var(--cor-texto); } input[type="search"]:focus { outline: none; border-color: var(--cor-primaria); box-shadow: 0 0 0 3px rgba(47, 111, 235, 0.15); } /* Agrupa busca + filtros em select acima de uma tabela, fora de uma toolbar maior com ações (ex: listagem de Clientes) — genérico, mesma ideia de .portal-toolbar-filtros mas sem depender do portal. */ .filtros-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 1rem; } /* Filtro sozinho acima da tabela "Licenças que precisam de atenção" do dashboard do Admin — sem input de busca ao lado, só o select mesmo. */ #licencas-atencao-filtro { display: block; margin-bottom: 1rem; } /* ===== Portal de Consulta do Cliente ===== */ .portal-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; } /* Busca + filtros de vencimento/vigência ficam juntos, agrupados à esquerda da toolbar (as ações de exportação ficam à direita, ver .portal-toolbar-acoes). */ .portal-toolbar-filtros { display: flex; flex-wrap: wrap; gap: 0.5rem; } /* ===== Filtro em select (genérico) ===== Usado nos selects de filtro fora de formulário (ex: vencimento/vigência do portal, vencimento do dashboard do Admin) — não usa .card-form select porque aquele é pra campo de formulário, com max-width de 420px. */ .filtro-select { padding: 0.55rem 0.7rem; border: 1px solid var(--cor-borda); border-radius: var(--raio-pequeno); font-size: 1rem; background: var(--cor-superficie); color: var(--cor-texto); } .filtro-select:focus { outline: none; border-color: var(--cor-primaria); box-shadow: 0 0 0 3px rgba(47, 111, 235, 0.15); } .portal-toolbar-acoes { display: flex; flex-wrap: wrap; gap: 0.5rem; } /* A tabela do portal tem 8 colunas — mais apertada que as demais listagens do sistema. Em vez de deixar tudo "nowrap" (que força rolagem horizontal mesmo no desktop), aperta o espaçamento e deixa só o nome da assinatura quebrar linha, que é de longe o texto mais comprido da tabela. */ #portal-tabela th, #portal-tabela td { padding: 0.6rem 0.65rem; font-size: 0.85rem; } #portal-tabela td:first-child { white-space: normal; max-width: 240px; } /* KPIs do topo do portal: um tile = um número (stat tile), sem legenda — o rótulo abaixo do valor já diz o que é. */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .kpi-tile { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.35rem; } .kpi-label { font-size: 0.8rem; color: var(--cor-texto-suave); } .kpi-valor { font-size: 1.75rem; font-weight: 600; color: var(--cor-texto); } /* Tiles de "atenção" (renovando em 30 dias / licenças vencidas) — quando têm alguma coisa pra mostrar, o card inteiro ganha a cor, não só o número, pra chamar mais atenção que um stat tile comum. Em zero, fica neutro (não faz sentido pintar de alerta quando não há nada pendente). */ .kpi-tile-atencao { border-left: 4px solid transparent; } .kpi-tile-atencao.tem-alerta { background: var(--cor-atencao-fundo); border-left-color: var(--cor-atencao-borda); } .kpi-tile-atencao.tem-alerta .kpi-valor { color: var(--cor-badge-alerta-texto); } .kpi-tile-atencao.tem-erro { background: var(--cor-erro-fundo); border-left-color: var(--cor-erro-texto); } .kpi-tile-atencao.tem-erro .kpi-valor { color: var(--cor-erro-texto); } /* Tile de destaque "neutro" (não é alerta nem erro, é a métrica mais importante do grid) — sempre colorido, ao contrário de .tem-alerta/.tem-erro que só pintam quando há algo pendente. Usado no "Valor total" do dashboard do Admin. */ .kpi-tile-primario { background: var(--cor-badge-negociado-fundo); border-left: 4px solid var(--cor-primaria); } .kpi-tile-primario .kpi-valor { color: var(--cor-primaria); } /* Navegação "Anterior/Próxima" abaixo de tabelas paginadas no servidor (ver templates/partials/paginacao.php). */ .paginacao { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin-top: 1rem; font-size: 0.9rem; } .paginacao-info { color: var(--cor-texto-suave); } .paginacao-desabilitado { color: var(--cor-texto-suave); opacity: 0.5; } /* ===== Tabelas ===== */ /* Envolve toda nos templates para permitir rolagem horizontal no celular, em vez de espremer colunas ou quebrar o layout da página. */ .tabela-wrap { overflow-x: auto; background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio); box-shadow: var(--sombra); } table { width: 100%; min-width: 480px; border-collapse: collapse; } table th { text-align: left; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--cor-texto-suave); background: var(--cor-tabela-cabecalho); } table th, table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--cor-borda); white-space: nowrap; } table tbody tr:last-child td { border-bottom: none; } table tbody tr:hover { background: var(--cor-tabela-hover); } /* Colunas de texto longo (nome de Assinatura/Produto, nome de arquivo de importação, razão social) que, com nowrap, forçavam a tabela inteira a ficar bem mais larga que a tela — aqui a célula quebra linha em vez de esticar a coluna. Usada em várias tabelas do Admin. */ .celula-quebra { white-space: normal; max-width: 260px; } /* Tabela de conferência de importação: 8 colunas, várias com select/input (às vezes com nome de produto bem comprido dentro do