/* Tema customizado sobre o Bootstrap 5.3 (CDN) — paleta indigo + Inter + superfícies elevadas. Suporta claro (padrão) e escuro via [data-bs-theme] no . */ :root { --accent: #6366f1; --accent-hover: #4f46e5; --accent-rgb: 99, 102, 241; --bs-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --bs-border-radius: 0.65rem; --bs-border-radius-sm: 0.5rem; --bs-border-radius-lg: 0.9rem; /* Tokens de superfície — claro por padrão */ --surface: #ffffff; --surface-nav: rgba(255, 255, 255, 0.85); } [data-bs-theme="light"] { --bs-tertiary-bg: #f4f5f7; --bs-border-color: #e4e6eb; --surface: #ffffff; --surface-nav: rgba(255, 255, 255, 0.85); } [data-bs-theme="dark"] { --bs-body-bg: #0b0d12; --bs-tertiary-bg: #12141b; --bs-secondary-bg: #171922; --bs-border-color: #242732; --bs-body-color: #e4e6ea; --bs-secondary-color: #9aa0ab; --surface: #14161c; --surface-nav: rgba(11, 13, 18, 0.85); } body { font-feature-settings: "cv11", "ss01"; letter-spacing: -0.01em; } /*
tem min-width: min-content por padrão no navegador, o que quebra o grid flex do Bootstrap (.row/.col-*) quando usado dentro dele (crispy Fieldset). */ fieldset { min-width: 0; } fieldset legend { font-size: 1rem; font-weight: 600; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--bs-border-color); } h1, h2, h3, h4, h5, .navbar-brand { letter-spacing: -0.02em; font-weight: 600; } a { color: var(--accent); } a:hover { color: var(--accent-hover); } /* Sidebar */ .app-shell { display: flex; min-height: 100vh; align-items: flex-start; } .app-sidebar { width: 240px; flex: 0 0 240px; position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 1.25rem 1rem; background-color: var(--surface-nav); backdrop-filter: blur(8px); border-right: 1px solid var(--bs-border-color); } .app-main { flex: 1 1 auto; min-width: 0; } .app-content { flex: 1 1 auto; min-width: 0; } .sidebar-brand { color: var(--accent) !important; display: flex; align-items: center; gap: 0.4rem; font-weight: 600; letter-spacing: -0.02em; text-decoration: none; padding: 0 0.25rem; } .sidebar-nav { margin-top: 1.5rem; gap: 0.15rem; } .sidebar-nav .nav-link { display: flex; align-items: center; gap: 0.6rem; color: var(--bs-secondary-color); font-weight: 500; padding: 0.55rem 0.75rem; border-radius: var(--bs-border-radius-sm); } .sidebar-nav .nav-link:hover { color: var(--bs-body-color); background-color: var(--bs-tertiary-bg); } .sidebar-nav .nav-link.active { color: var(--accent); background-color: rgba(var(--accent-rgb), 0.12); } /* Barra superior — sempre visível (não só no mobile); no mobile também carrega o botão que abre a sidebar como offcanvas. */ .app-topbar { width: 100%; padding: 0.75rem 1rem; background-color: var(--surface-nav); backdrop-filter: blur(8px); border-bottom: 1px solid var(--bs-border-color); position: sticky; top: 0; z-index: 1020; } .offcanvas { background-color: var(--surface-nav); } .offcanvas .sidebar-nav { margin-top: 0.5rem; } /* Avatar do usuário (iniciais) e o botão que o envolve na barra superior */ .avatar-btn { border: none; background: transparent; padding: 0; } .avatar-btn::after { display: none; } .avatar-circle { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background-color: var(--accent); color: #fff; font-weight: 600; font-size: 0.8rem; object-fit: cover; } /* Cards */ .card { background-color: var(--surface); border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-lg); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); } [data-bs-theme="dark"] .card { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); } .card.stat-card { transition: transform 0.15s ease, border-color 0.15s ease; } .card.stat-card:hover { transform: translateY(-2px); border-color: var(--accent); } .card .card-body { padding: 1.25rem; } /* Botões — retinta os componentes já compilados via suas próprias variáveis CSS */ .btn { font-weight: 500; border-radius: var(--bs-border-radius); } .btn-primary { --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-hover-bg: var(--accent-hover); --bs-btn-hover-border-color: var(--accent-hover); --bs-btn-active-bg: var(--accent-hover); --bs-btn-active-border-color: var(--accent-hover); --bs-btn-disabled-bg: var(--accent); --bs-btn-disabled-border-color: var(--accent); --bs-btn-focus-shadow-rgb: var(--accent-rgb); } .btn-outline-primary { --bs-btn-color: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-hover-bg: var(--accent); --bs-btn-hover-border-color: var(--accent); --bs-btn-active-bg: var(--accent); --bs-btn-active-border-color: var(--accent); --bs-btn-focus-shadow-rgb: var(--accent-rgb); } .btn-outline-light { --bs-btn-color: var(--bs-body-color); --bs-btn-border-color: var(--bs-border-color); --bs-btn-hover-color: var(--bs-body-color); --bs-btn-hover-bg: var(--bs-tertiary-bg); --bs-btn-hover-border-color: var(--bs-border-color); } /* Formulários */ .form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 0.2rem rgba(var(--accent-rgb), 0.25); } .form-control, .form-select { border-radius: var(--bs-border-radius-sm); } /* Campos travados (ex.: preenchidos automaticamente pelo CEP) — precisa ficar óbvio que não dá pra editar direto, sem depender só do estilo padrão sutil do Bootstrap para :read-only. */ .form-control:read-only { background-color: var(--bs-tertiary-bg); cursor: not-allowed; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236c757d'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2Zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1rem; padding-right: 2.5rem; } .form-control:read-only:focus { box-shadow: none; border-color: var(--bs-border-color); } /* Tabelas — sem table-dark, herdam o tema ambiente com um pouco mais de respiro */ .table { --bs-table-bg: transparent; } .table > :not(caption) > * > * { padding: 0.65rem 0.75rem; } .table thead th { color: var(--bs-secondary-color); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; border-bottom-width: 1px; } /* Badges de status */ .badge { font-weight: 500; letter-spacing: 0.01em; padding: 0.4em 0.7em; border-radius: 999px; } /* Alerts */ .alert { border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); } /* Seções com divisor sutil no lugar de
*/ .section-divider { border-top: 1px solid var(--bs-border-color); margin: 2rem 0; } .text-muted-2 { color: var(--bs-secondary-color) !important; } /* Tabelas de especificação lado a lado: largura de rótulo fixa para os valores alinharem entre as tabelas, independente do texto do rótulo. */ .spec-table th { width: 45%; }