530 lines
12 KiB
SCSS
530 lines
12 KiB
SCSS
:host {
|
|
/* Paleta de Cores LineGestão */
|
|
--brand-blue: #030FAA; /* Azul Principal */
|
|
--brand-blue-dark: #020865; /* Azul Profundo (Gradiente) */
|
|
--brand-pink: #E33DCF; /* Rosa (Detalhes/Acentos) */
|
|
--text-main: #1e293b; /* Cinza Escuro (Texto) */
|
|
--text-muted: #64748b; /* Cinza Médio (Legendas) */
|
|
--bg-input: #f8fafc; /* Fundo dos inputs */
|
|
--border-input: #e2e8f0; /* Borda dos inputs */
|
|
}
|
|
|
|
/* ================================================= */
|
|
/* CONTAINER GLOBAL (TELA DIVIDIDA) */
|
|
/* ================================================= */
|
|
.login-wrapper {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 100vh; /* Ocupa 100% da altura da viewport */
|
|
min-height: 600px; /* Evita esmagamento em telas muito baixas */
|
|
background: #fff;
|
|
font-family: 'Inter', sans-serif;
|
|
overflow: hidden; /* Garante que nada gere scroll indesejado na tela principal */
|
|
|
|
/* Responsivo: Vira coluna no mobile/tablet vertical */
|
|
@media (max-width: 992px) {
|
|
flex-direction: column;
|
|
height: auto;
|
|
min-height: 100vh;
|
|
overflow-y: auto; /* Permite scroll no mobile */
|
|
}
|
|
}
|
|
|
|
/* ================================================= */
|
|
/* LADO ESQUERDO (FORMULÁRIO) */
|
|
/* ================================================= */
|
|
.login-left {
|
|
flex: 1; /* Ocupa o espaço necessário */
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center; /* Centraliza verticalmente */
|
|
padding: 0 60px;
|
|
background: white;
|
|
position: relative;
|
|
z-index: 5;
|
|
|
|
/* Ajuste Notebook: Menos padding lateral */
|
|
@media (max-width: 1366px) { padding: 0 40px; }
|
|
|
|
/* Ajuste Mobile */
|
|
@media (max-width: 576px) { padding: 32px 24px; }
|
|
}
|
|
|
|
/* Conteúdo Centralizado (Logo + Form) */
|
|
.left-content {
|
|
max-width: 380px;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* Logo no topo do form */
|
|
.brand-header {
|
|
margin-bottom: 32px;
|
|
|
|
.brand-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
color: var(--text-main);
|
|
|
|
i { color: var(--brand-blue); font-size: 24px; }
|
|
}
|
|
}
|
|
|
|
/* Títulos */
|
|
.welcome-title {
|
|
font-size: 32px;
|
|
font-weight: 700;
|
|
color: var(--text-main);
|
|
margin-bottom: 8px;
|
|
letter-spacing: -0.5px;
|
|
line-height: 1.2;
|
|
|
|
@media (max-width: 1366px) { font-size: 28px; }
|
|
}
|
|
|
|
.welcome-subtitle {
|
|
color: var(--text-muted);
|
|
margin-bottom: 32px;
|
|
font-size: 15px;
|
|
}
|
|
|
|
/* INPUTS E LABELS */
|
|
.form-group {
|
|
margin-bottom: 18px;
|
|
|
|
label {
|
|
display: block;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--text-main);
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
input {
|
|
width: 100%;
|
|
height: 48px; /* Altura confortável */
|
|
padding: 0 16px;
|
|
border-radius: 10px;
|
|
border: 1px solid var(--border-input);
|
|
background: var(--bg-input);
|
|
color: var(--text-main);
|
|
font-size: 14px;
|
|
outline: none;
|
|
transition: all 0.2s;
|
|
|
|
/* Ajuste Notebook: levemente menor */
|
|
@media (max-width: 1366px) { height: 44px; }
|
|
|
|
&::placeholder { color: #cbd5e1; }
|
|
|
|
&:focus {
|
|
background: #fff;
|
|
border-color: var(--brand-blue);
|
|
box-shadow: 0 0 0 3px rgba(3, 15, 170, 0.1);
|
|
}
|
|
|
|
&.error {
|
|
border-color: #ef4444;
|
|
background: #fef2f2;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Wrapper para input de senha com ícone */
|
|
.input-wrapper {
|
|
position: relative;
|
|
|
|
input { padding-right: 40px; }
|
|
|
|
.toggle-pass {
|
|
position: absolute;
|
|
right: 12px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background: none;
|
|
border: none;
|
|
color: #94a3b8;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
|
|
&:hover { color: var(--text-main); }
|
|
}
|
|
}
|
|
|
|
.error-msg {
|
|
color: #ef4444;
|
|
font-size: 11px;
|
|
margin-top: 4px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* AÇÕES (Checkbox + Esqueci Senha) */
|
|
.form-actions {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 24px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.custom-checkbox {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
cursor: pointer;
|
|
color: var(--text-muted);
|
|
user-select: none;
|
|
|
|
input { display: none; }
|
|
|
|
.checkmark {
|
|
width: 16px;
|
|
height: 16px;
|
|
border: 1px solid var(--border-input);
|
|
border-radius: 4px;
|
|
position: relative;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
input:checked ~ .checkmark {
|
|
background: var(--brand-blue);
|
|
border-color: var(--brand-blue);
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 4px; top: 1px;
|
|
width: 5px; height: 9px;
|
|
border: solid white;
|
|
border-width: 0 2px 2px 0;
|
|
transform: rotate(45deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
.forgot-link {
|
|
color: var(--brand-blue);
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
font-size: 13px;
|
|
|
|
&:hover { text-decoration: underline; }
|
|
}
|
|
|
|
/* BOTÃO PRINCIPAL */
|
|
.btn-primary-login {
|
|
width: 100%;
|
|
height: 48px;
|
|
background: var(--brand-blue);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 10px;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
|
|
&:hover:not(:disabled) {
|
|
background: var(--brand-blue-dark);
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(3, 15, 170, 0.25);
|
|
}
|
|
|
|
&:disabled {
|
|
background: #94a3b8;
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
|
|
/* FOOTER INTERNO */
|
|
.left-footer {
|
|
margin-top: 40px;
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
a {
|
|
color: var(--text-main);
|
|
text-decoration: none;
|
|
&:hover { text-decoration: underline; }
|
|
}
|
|
}
|
|
|
|
/* Alerta de erro da API */
|
|
.api-alert {
|
|
margin-top: 16px;
|
|
padding: 10px 12px;
|
|
border-radius: 8px;
|
|
background: #fef2f2;
|
|
color: #ef4444;
|
|
font-size: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
border: 1px solid #fecaca;
|
|
}
|
|
|
|
/* ================================================= */
|
|
/* LADO DIREITO (VISUAL / MOCKUP) */
|
|
/* ================================================= */
|
|
.login-right {
|
|
flex: 1.3; /* Ligeiramente maior que o form */
|
|
padding: 16px; /* Borda branca ao redor do bloco azul */
|
|
background: #fff;
|
|
display: flex;
|
|
overflow: hidden;
|
|
|
|
/* Some no tablet/mobile */
|
|
@media (max-width: 992px) { display: none; }
|
|
}
|
|
|
|
.right-content {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 24px;
|
|
position: relative;
|
|
overflow: hidden; /* Corta o mockup que sair da área */
|
|
|
|
/* Gradiente Azul LineGestão */
|
|
background: radial-gradient(circle at 20% 20%, #2a39ff 0%, var(--brand-blue) 60%, var(--brand-blue-dark) 100%);
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 56px;
|
|
color: white;
|
|
|
|
/* Ajuste Notebook: Menos padding */
|
|
@media (max-width: 1366px) { padding: 40px; }
|
|
}
|
|
|
|
.text-area {
|
|
position: relative;
|
|
z-index: 2;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.hero-title {
|
|
font-size: 36px;
|
|
font-weight: 700;
|
|
line-height: 1.2;
|
|
margin-bottom: 16px;
|
|
|
|
@media (max-width: 1366px) { font-size: 28px; }
|
|
}
|
|
|
|
.hero-desc {
|
|
font-size: 16px;
|
|
opacity: 0.85;
|
|
max-width: 450px;
|
|
line-height: 1.5;
|
|
|
|
@media (max-width: 1366px) { font-size: 14px; }
|
|
}
|
|
|
|
/* ================================================= */
|
|
/* MOCKUP SISTEMA (CSS PURO) */
|
|
/* ================================================= */
|
|
.dashboard-mockup {
|
|
position: absolute;
|
|
/* Posicionamento estratégico para não cortar feio */
|
|
bottom: -30px;
|
|
right: -30px;
|
|
|
|
width: 85%; /* Largura relativa */
|
|
max-width: 700px; /* Trava máxima */
|
|
aspect-ratio: 16/10; /* Mantém proporção de tela wide */
|
|
|
|
background: #F1F5F9; /* Cinza claro (fundo do sistema) */
|
|
border-top-left-radius: 24px;
|
|
box-shadow: -20px -20px 60px rgba(0,0,0,0.35); /* Sombra forte para dar profundidade */
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 24px;
|
|
z-index: 1;
|
|
|
|
/* 🔥 CORREÇÃO CRÍTICA PARA NOTEBOOKS 🔥 */
|
|
/* Se a tela for baixa ou estreita, diminui o mockup automaticamente */
|
|
@media (max-height: 800px), (max-width: 1366px) {
|
|
width: 80%;
|
|
right: -20px;
|
|
bottom: -20px;
|
|
padding: 16px;
|
|
}
|
|
}
|
|
|
|
/* Barra do Topo (Mock) */
|
|
.mock-top-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-bottom: 20px;
|
|
|
|
.dots span {
|
|
display: inline-block;
|
|
width: 8px; height: 8px;
|
|
border-radius: 50%;
|
|
background: #cbd5e1;
|
|
margin-right: 6px;
|
|
}
|
|
.mock-search {
|
|
flex: 1; height: 32px;
|
|
background: white;
|
|
border-radius: 8px;
|
|
border: 1px solid #e2e8f0;
|
|
}
|
|
.mock-profile {
|
|
width: 32px; height: 32px;
|
|
background: #cbd5e1;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
/* Grid Interno (Mock) */
|
|
.mock-grid {
|
|
display: grid;
|
|
grid-template-columns: 1.2fr 1fr; /* Coluna esquerda levemente maior */
|
|
grid-template-rows: auto 1fr;
|
|
gap: 16px;
|
|
height: 100%;
|
|
}
|
|
|
|
/* Cards Genéricos (Mock) */
|
|
.mock-card {
|
|
background: white;
|
|
border-radius: 16px;
|
|
padding: 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-shadow: 0 2px 6px rgba(0,0,0,0.03);
|
|
|
|
/* Card Destaque (Azul) */
|
|
&.highlight {
|
|
background: var(--brand-blue);
|
|
color: white;
|
|
|
|
span { font-size: 11px; opacity: 0.8; margin-bottom: 4px; display: block; }
|
|
h3 { font-size: 24px; margin: 0 0 8px 0; font-weight: 700; }
|
|
.badge-mock {
|
|
font-size: 10px;
|
|
background: rgba(255,255,255,0.2);
|
|
padding: 4px 10px;
|
|
border-radius: 20px;
|
|
width: fit-content;
|
|
display: flex; align-items: center; gap: 4px;
|
|
}
|
|
}
|
|
|
|
/* Card Gráfico */
|
|
&.chart-card {
|
|
grid-row: span 2; /* Ocupa altura toda */
|
|
|
|
span { font-size: 12px; font-weight: 600; color: #1e293b; margin-bottom: 16px; display: block;}
|
|
|
|
.fake-bars {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
height: 70%;
|
|
padding: 0 8px;
|
|
|
|
.bar {
|
|
width: 12px;
|
|
background: #e2e8f0;
|
|
border-radius: 10px;
|
|
|
|
/* A barra rosa ativa */
|
|
&.active {
|
|
background: var(--brand-pink);
|
|
box-shadow: 0 4px 10px rgba(227, 61, 207, 0.3);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Card Tabela */
|
|
&.table-card {
|
|
gap: 10px;
|
|
padding-top: 12px;
|
|
|
|
.table-row {
|
|
display: flex; align-items: center; gap: 10px; height: 28px;
|
|
|
|
&.head { background: #f1f5f9; border-radius: 6px; height: 24px; width: 100%; margin-bottom: 4px; }
|
|
|
|
.avatar { width: 24px; height: 24px; border-radius: 50%; background: #e2e8f0; }
|
|
.line { flex: 1; height: 8px; background: #f1f5f9; border-radius: 4px; }
|
|
.status { width: 8px; height: 8px; border-radius: 50%; }
|
|
.status.ok { background: #10b981; }
|
|
.status.warn { background: #f59e0b; }
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Card Flutuante (Badges) */
|
|
.float-card {
|
|
position: absolute;
|
|
top: 35%;
|
|
left: -40px;
|
|
|
|
background: white;
|
|
padding: 12px 20px;
|
|
border-radius: 16px;
|
|
box-shadow: 0 10px 40px rgba(0,0,0,0.12); /* Sombra suave */
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
z-index: 10;
|
|
animation: float 5s ease-in-out infinite;
|
|
|
|
/* Ajuste no notebook */
|
|
@media (max-width: 1366px) { left: -24px; padding: 10px 16px; }
|
|
|
|
.icon-circle {
|
|
width: 40px; height: 40px;
|
|
background: rgba(227, 61, 207, 0.1); /* Rosa suave */
|
|
color: var(--brand-pink);
|
|
border-radius: 10px;
|
|
display: grid; place-items: center;
|
|
font-size: 18px;
|
|
|
|
@media (max-width: 1366px) { width: 36px; height: 36px; font-size: 16px; }
|
|
}
|
|
|
|
strong { display: block; font-size: 14px; color: #1e293b; font-weight: 700; }
|
|
small { font-size: 11px; color: #64748b; }
|
|
}
|
|
|
|
/* Animações Utilitárias */
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-10px); }
|
|
}
|
|
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.spinner {
|
|
width: 20px; height: 20px;
|
|
border: 2px solid rgba(255,255,255,0.3);
|
|
border-top-color: white;
|
|
border-radius: 50%;
|
|
animation: spin 0.8s linear infinite;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.fade-in-up {
|
|
animation: fadeInUp 0.6s ease-out forwards;
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
} |