→
→ field-label / field-value
════════════════════════════════════════════════════════════════ */
.detail-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 14px;
margin-bottom: 16px;
}
.field-label {
font-size: .68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
color: var(--text-muted);
margin-bottom: 4px;
}
.field-value {
font-size: .875rem;
font-weight: 500;
color: var(--text);
word-break: break-word;
}
/* ════════════════════════════════════════════════════════════════
18. TELA DE LOGIN
Layout exclusivo da página de login.
Não usa .app-layout nem .sidebar — é uma tela separada.
════════════════════════════════════════════════════════════════ */
/* Corpo da tela de login — desativa overflow:hidden do body */
body.login-body { overflow: auto; }
/* Layout: painel visual (esq.) + formulário (dir.) */
.login-page {
display: flex;
min-height: 100vh;
align-items: stretch;
}
/* Painel esquerdo — gradiente e branding */
.login-left {
flex: 1;
background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-mid) 60%, var(--gradient-end) 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px;
position: relative;
overflow: hidden;
}
/* Padrão decorativo de fundo */
.login-left::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
pointer-events: none;
}
.login-brand {
position: relative;
text-align: center;
color: #ffffff;
}
.login-brand .logo-circle {
width: 90px; height: 90px;
background: #ffffff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 24px;
box-shadow: 0 8px 32px rgba(0, 0, 0, .25);
}
.login-brand .logo-circle img {
width: 70px; height: 70px;
object-fit: contain;
}
.login-brand h1 {
font-size: 2rem;
font-weight: 800;
letter-spacing: -.02em;
margin-bottom: 8px;
}
.login-brand p {
font-size: 1rem;
opacity: .8;
max-width: 360px;
line-height: 1.6;
}
/* Lista de features abaixo do logo */
.login-features {
margin-top: 48px;
position: relative;
display: grid;
gap: 16px;
width: 100%;
max-width: 380px;
}
.login-feature {
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .12);
border-radius: var(--radius);
padding: 16px 20px;
display: flex;
align-items: center;
gap: 14px;
color: #ffffff;
backdrop-filter: blur(8px);
}
.login-feature i { font-size: 1.3rem; opacity: .9; width: 24px; text-align: center; }
.login-feature span { font-size: .875rem; opacity: .85; }
/* Painel direito — formulário */
.login-right {
width: 460px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 50px;
background: var(--surface);
position: relative;
transition: background var(--transition);
}
.login-form-card { width: 100%; }
.login-form-card h2 {
font-size: 1.6rem;
font-weight: 700;
color: var(--text);
margin-bottom: 6px;
}
.login-form-card .subtitle {
color: var(--text-muted);
margin-bottom: 32px;
font-size: .9rem;
}
/* Rodapé do formulário */
.login-footer {
margin-top: 24px;
text-align: center;
font-size: .85rem;
color: var(--text-muted);
}
.login-footer a { color: var(--primary); font-weight: 500; }
.login-footer a:hover { text-decoration: underline; }
.login-legal {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--border);
font-size: .75rem;
color: var(--text-light);
text-align: center;
}
.login-legal a { color: var(--primary); }
/* ════════════════════════════════════════════════════════════════
19. ANIMAÇÕES
════════════════════════════════════════════════════════════════ */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideIn {
from { transform: translateX(calc(100% + 24px)); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes slideOut {
from { transform: translateX(0); opacity: 1; }
to { transform: translateX(calc(100% + 24px)); opacity: 0; }
}
@keyframes modalIn {
from { transform: translateY(16px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.modal-overlay.open .modal { animation: modalIn .25s ease; }
/* ════════════════════════════════════════════════════════════════
20. RESPONSIVO
════════════════════════════════════════════════════════════════ */
/* 900px — sidebar vira drawer, topbar ocupa toda a largura */
@media (max-width: 900px) {
.sidebar { transform: translateX(-100%); }
.sidebar.open { transform: translateX(0); }
.topbar { left: 0; }
.topbar-menu-btn { display: flex; }
.main-content { margin-left: 0; }
.dashboard-grid { grid-template-columns: 1fr; }
}
/* 768px — tela de login: oculta painel visual */
@media (max-width: 768px) {
.login-left { display: none; }
.login-right { width: 100%; padding: 40px 28px; }
}
/* 640px — filtros, formulários, modal e toasts em mobile */
@media (max-width: 640px) {
.filter-bar { flex-direction: column; align-items: stretch; }
.search-box { min-width: 0; }
.date-input { max-width: 100%; }
.form-row,
.form-row.three { grid-template-columns: 1fr; }
.detail-grid { grid-template-columns: 1fr 1fr; }
.modal-overlay { padding: 0; align-items: flex-end; }
.modal { border-radius: var(--radius-lg) var(--radius-lg) 0 0; max-height: 92vh; }
#toast-container { bottom: 0; right: 0; left: 0; padding: 0 12px 12px; }
.toast { min-width: 0; max-width: 100%; }
}