/* =========================================================================
GERENCIAL LOJA153 — identidade visual global
v2.1 (2026-04) — agora com identidade vetorial (SVG)
-------------------------------------------------------------------------
Use em todos os módulos com:
Assets de logo (SVG vetorial — escala perfeitamente em qualquer tamanho):
/assets/logo.svg → master com fill=currentColor
(use inline no HTML ou via mask-image)
/assets/logo-branca.svg → para ![]()
em fundo escuro
/assets/logo-preta.svg → para ![]()
em fundo claro
/assets/logo-symbol.svg → só o símbolo "1 5 3" (currentColor)
/assets/logo-symbol-branca.svg, logo-symbol-preta.svg
Favicons (declarar no de cada página):
/assets/favicon.svg → moderno, vetorial (preferido)
/assets/favicon.ico → fallback (16/32/48)
/assets/favicon-192.png → PWA / Android
/assets/favicon-180.png → apple-touch-icon
Como usar a logo (3 formas, em ordem de flexibilidade):
1) MELHOR: inline no HTML (cor pelo CSS via color/currentColor)
2) BOA: ![]()
com variante de cor fixa
3) ALTERNATIVA: máscara CSS (uma única classe, qualquer cor)
Mudanças em relação à v1:
• Identidade vetorial (SVG) substituindo PNGs/JPEGs renomeados
• Foco acessível com :focus-visible (substitui outline:none "cego")
• inputs em 16px em mobile (evita zoom automático no iOS)
• Reset enxuto (sem aplicar font-family no seletor universal)
• Suporte a prefers-reduced-motion
• Sistema de z-index documentado em variáveis
• Variáveis de hover/active para botões (sem dependência de opacity)
• Cards consolidados em base + modificador
• safe-area-inset-top no header sticky (notch iPhone)
• .gerencial-login-logo SEM filter:invert (use logo-preta.svg direto)
• Eliminação de cores hardcoded espalhadas pelo arquivo
• Organização em @layer (cascata previsível)
========================================================================= */
@layer reset, tokens, layout, components, utilities;
/* =========================================================================
TOKENS — design system
========================================================================= */
@layer tokens {
:root {
/* Cores base */
--g-bg-dark: #111111;
--g-bg-soft: #f9fafb;
--g-card: #ffffff;
--g-text: #111111;
--g-muted: #6b7280;
--g-muted-2: #6b7280; /* antes #9ca3af — corrigido por contraste WCAG AA */
--g-muted-on-dark: #c7cad1; /* tom claro p/ usar sobre fundos escuros */
--g-border: #f0f0f0;
--g-border-2: #e5e7eb;
/* Cores semânticas */
--g-blue: #1d4ed8; /* unificado: era #2563eb e #1d4ed8 misturados */
--g-blue-hover: #1e40af;
--g-green: #166534;
--g-green-hover: #14532d;
--g-green-soft: #16a34a;
--g-red: #7f1d1d;
--g-red-hover: #5f1414;
--g-orange: #ea580c;
--g-purple: #9333ea;
/* Tons neutros para hover */
--g-dark-hover: #1f1f1f;
--g-nav-bg: #333333;
--g-nav-bg-hover: #444444;
/* Foco acessível */
--g-focus-ring: 0 0 0 3px rgba(29, 78, 216, .35);
--g-focus-color: var(--g-blue);
/* Geometria */
--g-radius: 16px;
--g-radius-lg: 24px;
--g-radius-sm: 8px;
--g-radius-pill: 20px;
/* Sombras */
--g-shadow: 0 1px 4px rgba(0, 0, 0, .07);
--g-shadow-lg: 0 12px 35px rgba(0, 0, 0, .22);
--g-shadow-xl: 0 18px 45px rgba(0, 0, 0, .35);
/* Layout */
--g-max: 1080px;
/* Transições */
--g-trans-fast: 150ms ease;
--g-trans: 200ms ease;
/* Camadas (z-index) — sempre usar estas variáveis, nunca números soltos */
--g-z-header: 30;
--g-z-dropdown: 50;
--g-z-modal: 100;
--g-z-toast: 200;
}
}
/* =========================================================================
RESET — enxuto (sem aplicar font-family no universal)
========================================================================= */
@layer reset {
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background: var(--g-bg-soft);
color: var(--g-text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
button, input, select, textarea {
font: inherit;
color: inherit;
}
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
/* Foco acessível padrão para qualquer elemento interativo */
:focus-visible {
outline: 2px solid var(--g-focus-color);
outline-offset: 2px;
}
/* Respeito a usuários com sensibilidade a movimento */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}
}
/* =========================================================================
LAYOUT — header, main e shell de páginas inteiras (login, home)
========================================================================= */
@layer layout {
.gerencial-header {
background: var(--g-bg-dark);
color: #fff;
padding: 12px 16px;
/* respeita o notch em iPhones */
padding-top: max(12px, env(safe-area-inset-top));
position: sticky;
top: 0;
z-index: var(--g-z-header);
}
.gerencial-header-inner {
max-width: var(--g-max);
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.gerencial-brand {
display: flex;
align-items: center;
gap: 12px;
min-width: 220px;
text-decoration: none;
}
.gerencial-logo {
height: 54px;
width: auto;
}
.gerencial-stats,
.gerencial-subtitle {
color: var(--g-muted-on-dark);
font-size: 11px;
}
.gerencial-nav {
display: flex;
gap: 6px;
flex-wrap: wrap;
align-items: center;
}
.gerencial-nav a,
.gerencial-nav button,
.gerencial-nav-item {
padding: 7px 12px;
border-radius: 9px;
border: none;
background: var(--g-nav-bg);
color: #fff;
text-decoration: none;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: background var(--g-trans), transform var(--g-trans);
}
.gerencial-nav a:hover,
.gerencial-nav button:hover,
.gerencial-nav-item:hover {
background: var(--g-nav-bg-hover);
transform: translateY(-1px);
}
.gerencial-nav a.active,
.gerencial-nav button.active,
.gerencial-nav-item.active {
background: #fff;
color: var(--g-text);
}
.gerencial-main {
max-width: var(--g-max);
margin: 0 auto;
padding: 20px 16px;
}
/* ---------- Shell da tela de login ---------- */
.gerencial-login-screen {
min-height: 100vh;
background: var(--g-bg-dark);
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
}
.gerencial-login-box {
background: #fff;
border-radius: 20px;
padding: 32px;
width: 100%;
max-width: 360px;
box-shadow: var(--g-shadow-lg);
}
/* IMPORTANTE: agora apontar o ![]()
para /assets/logo-preta.png
(a v1 usava filter:invert(1) sobre logo branca — gambiarra removida) */
.gerencial-login-logo {
height: 150px;
width: auto;
display: block;
margin: 0 auto 18px;
}
/* ---------- Shell da home ---------- */
.gerencial-home-body {
min-height: 100vh;
background: var(--g-bg-dark);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.gerencial-home-wrap {
width: 100%;
max-width: 900px;
text-align: center;
}
.gerencial-home-logo {
height: 120px;
width: auto;
margin: 0 auto 12px;
display: block;
}
.gerencial-home-title {
font-size: 22px;
letter-spacing: .08em;
margin-bottom: 6px;
}
.gerencial-home-sub {
color: var(--g-muted-on-dark);
font-size: 13px;
margin-bottom: 28px;
}
.gerencial-home-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
.gerencial-home-card {
background: #fff;
color: var(--g-text);
border-radius: var(--g-radius-lg);
padding: 28px 18px;
text-decoration: none;
box-shadow: var(--g-shadow-lg);
transition: transform var(--g-trans), box-shadow var(--g-trans);
min-height: 150px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
}
.gerencial-home-card:hover {
transform: translateY(-3px);
box-shadow: var(--g-shadow-xl);
}
.gerencial-home-ico { font-size: 38px; }
.gerencial-home-card-title { font-size: 16px; font-weight: 800; }
.gerencial-home-card-desc {
font-size: 12px;
color: var(--g-muted);
line-height: 1.35;
}
}
/* =========================================================================
COMPONENTS — cards, formulários, botões, tabela, badge, toast
========================================================================= */
@layer components {
/* ---------- Cards (base + modificador, sem repetição) ---------- */
.gerencial-card {
background: var(--g-card);
border-radius: var(--g-radius);
padding: 20px;
box-shadow: var(--g-shadow);
border: 1px solid var(--g-border);
}
.gerencial-card-lg, /* compatibilidade v1 */
.gerencial-card.gerencial-card--lg { /* forma BEM recomendada */
border-radius: var(--g-radius-lg);
padding: 28px 18px;
box-shadow: var(--g-shadow-lg);
}
/* .gerencial-card-lg standalone (sem .gerencial-card) também precisa do base */
.gerencial-card-lg {
background: var(--g-card);
border: 1px solid var(--g-border);
}
/* ---------- Grid utilitário ---------- */
.gerencial-grid-4 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
@media (min-width: 640px) {
.gerencial-grid-4 { grid-template-columns: repeat(4, 1fr); }
}
/* ---------- Formulários ---------- */
.gerencial-input,
.gerencial-select,
.gerencial-textarea {
border: 1px solid var(--g-border-2);
border-radius: var(--g-radius-sm);
padding: 8px 12px;
background: var(--g-bg-soft);
color: var(--g-text);
font-size: 16px; /* 16px em mobile evita zoom automático no iOS Safari */
transition: border-color var(--g-trans), box-shadow var(--g-trans);
/* removido outline:none — agora foco vem via :focus-visible global */
}
.gerencial-input:focus-visible,
.gerencial-select:focus-visible,
.gerencial-textarea:focus-visible {
outline: none; /* substituído pela border + ring */
border-color: var(--g-blue);
box-shadow: var(--g-focus-ring);
}
.gerencial-input::placeholder,
.gerencial-textarea::placeholder { color: var(--g-muted-2); }
/* Em telas maiores, podemos voltar a 14px sem risco de zoom mobile */
@media (min-width: 640px) {
.gerencial-input,
.gerencial-select,
.gerencial-textarea { font-size: 14px; }
}
/* ---------- Botões ---------- */
.gerencial-btn {
padding: 8px 14px;
border-radius: 10px;
border: none;
cursor: pointer;
font-weight: 600;
font-size: 12px;
background: transparent;
color: inherit;
transition: background var(--g-trans), transform var(--g-trans);
}
.gerencial-btn:hover { transform: translateY(-1px); }
.gerencial-btn:active { transform: translateY(0); }
.gerencial-btn:disabled {
opacity: .45;
cursor: not-allowed;
transform: none;
}
.gerencial-btn-dark { background: var(--g-bg-dark); color: #fff; }
.gerencial-btn-dark:hover:not(:disabled) { background: var(--g-dark-hover); }
.gerencial-btn-blue { background: var(--g-blue); color: #fff; }
.gerencial-btn-blue:hover:not(:disabled) { background: var(--g-blue-hover); }
.gerencial-btn-green { background: var(--g-green); color: #fff; }
.gerencial-btn-green:hover:not(:disabled) { background: var(--g-green-hover); }
.gerencial-btn-red { background: var(--g-red); color: #fff; }
.gerencial-btn-red:hover:not(:disabled) { background: var(--g-red-hover); }
.gerencial-btn-outline {
background: #fff;
color: var(--g-muted);
border: 1px solid var(--g-border-2);
}
.gerencial-btn-outline:hover:not(:disabled) {
background: var(--g-bg-soft);
color: var(--g-text);
}
/* ---------- Tabela ---------- */
.gerencial-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.gerencial-table th {
text-align: left;
font-size: 11px;
color: var(--g-muted-2);
padding-bottom: 8px;
border-bottom: 1px solid var(--g-border);
padding-right: 12px;
}
.gerencial-table td {
padding: 10px 12px 10px 0;
border-bottom: 1px solid #fafafa;
vertical-align: middle;
}
.gerencial-table tr:hover td { background: #fafafa; }
/* ---------- Badge ---------- */
.gerencial-badge {
font-size: 11px;
padding: 3px 8px;
border-radius: var(--g-radius-pill);
white-space: nowrap;
display: inline-block;
}
/* ---------- Toast ---------- */
.gerencial-toast {
position: fixed;
top: 16px;
left: 50%;
transform: translateX(-50%);
background: var(--g-bg-dark);
color: #fff;
padding: 10px 20px;
border-radius: var(--g-radius);
font-size: 13px;
font-weight: 600;
z-index: var(--g-z-toast);
display: none;
white-space: nowrap;
box-shadow: var(--g-shadow-lg);
}
/* ---------- Logo via máscara CSS (qualquer cor via color:) ---------- */
/* Usa o mesmo arquivo SVG para qualquer cor — herda do `color` do CSS.
Útil quando você quer uma única referência e variar a cor por contexto.
Exemplo:
.my-dark-area .gerencial-logo-mask { color: #fff; } */
.gerencial-logo-mask,
.gerencial-logo-mask--symbol {
display: inline-block;
background-color: currentColor;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
.gerencial-logo-mask {
-webkit-mask-image: url('/assets/logo.svg');
mask-image: url('/assets/logo.svg');
/* proporção padrão da logo completa: ~414/114 ≈ 3.63 */
aspect-ratio: 414 / 114;
width: 200px;
}
.gerencial-logo-mask--symbol {
-webkit-mask-image: url('/assets/logo-symbol.svg');
mask-image: url('/assets/logo-symbol.svg');
/* proporção do símbolo: ~228/117 ≈ 1.95 */
aspect-ratio: 228 / 117;
width: 80px;
}
}
/* =========================================================================
UTILITIES
========================================================================= */
@layer utilities {
.g-muted { color: var(--g-muted); }
.g-muted-2 { color: var(--g-muted-2); }
.g-text-right { text-align: right; }
.g-text-center { text-align: center; }
.g-mb-8 { margin-bottom: 8px; }
.g-mb-12 { margin-bottom: 12px; }
.g-mb-16 { margin-bottom: 16px; }
.g-mt-8 { margin-top: 8px; }
.g-mt-12 { margin-top: 12px; }
.g-mt-16 { margin-top: 16px; }
/* Acessibilidade: esconde visualmente mas mantém para leitores de tela */
.g-sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
}
/* =========================================================================
RESPONSIVO — ajustes mobile
========================================================================= */
@media (max-width: 640px) {
.gerencial-logo { height: 44px; }
.gerencial-header-inner { align-items: flex-start; }
.gerencial-brand {
width: 100%;
justify-content: flex-start;
}
.gerencial-login-logo { height: 125px; }
.gerencial-home-grid { grid-template-columns: 1fr; }
.gerencial-home-logo { height: 95px; }
.gerencial-home-card { min-height: 130px; }
}