:root { --dpn-primary: #0f2d3a; --dpn-primary-2: #143a4b; --dpn-accent: #d7a534; --dpn-accent-2: #f1c45b; --dpn-bg: #f4f7f8; --dpn-surface: #ffffff; --dpn-surface-soft: #f8fafb; --dpn-border: #dce4e8; --dpn-text: #1c2a33; --dpn-text-soft: #64727d; --dpn-success: #198754; --dpn-warning: #d39e00; --dpn-danger: #dc3545; --dpn-shadow: 0 12px 30px rgba(15, 45, 58, 0.08); --dpn-radius: 18px; --dpn-radius-sm: 12px; --dpn-sidebar-width: 270px; }

html, body { min-height: 100%; }

body { background: #000 url(/assets/img/background-dpn.jpg) top center no-repeat; background-size: cover; color: var(--dpn-text); font-family: "Open Sans", Arial, sans-serif; }

h1, h2, h3 { color: #ffffff; }

a { color: var(--dpn-primary); }

a:hover { color: var(--dpn-primary-2); }

.site-shell { min-height: 100vh; background: url(/assets/img/background-dpn.jpg) top center no-repeat; background-size: cover; }

.site-header { position: sticky; top: 0; z-index: 1040; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04); }

.site-header .topHeader { background: #000; color: #fff; padding: 14px 0; border-bottom: 2px solid #F00; }

.brand-wrap { display: flex; align-items: center; gap: 14px; }

.brand-logo { width: 90px; height: 46px; color: var(--dpn-primary); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; letter-spacing: 0.04em; }

.brand-copy { display: flex; flex-direction: column; line-height: 1.1; }

.brand-copy strong { font-size: 1rem; font-weight: 700; color: #fff; }

.brand-copy span { font-size: 0.78rem; color: rgba(255,255,255,.74); }

.btn, .Botao, button, html input[type="button"], input[type="reset"], input[type="submit"] { border-radius: 3px; font-weight: bold; border:2px solid; }

.btn-dpn-primary, .btn-primary, .btn-success, .btn-primary { background: #f00; border-color: #f00; color: #fff; border-radius: 3px; font-weight: bold; }

.btn-dpn-primary:hover,
.btn-primary:hover,
.btn-dpn-primary:focus,
.btn-primary:focus, .btn-primary:hover, .btn-primary:focus { background: var(--dpn-primary-2); border-color: var(--dpn-primary-2); color: #fff; }

.btn-dpn-accent { background: transparent; border: 2px solid #f00; color: #f00; font-weight: 700; border-radius: 3px; }

.btn-light { border-color: var(--dpn-border); }

.btn-outline-primary { border-color: #cd0c36; color: #fff; background: #000000; }
.btn-outline-primary:hover { background: #cd0c36; border-color: #cd0c36; }

.btn-outline-secondary { border-color: #9a0526; color: #fff; background: #000000; }
.btn-outline-secondary:hover { background: #9a0526; border-color: #9a0526; }

.btn-dark { background: #670f22; border-color: #000000; }
.btn-dark:hover { background: #000; border-color: #cd0c36; color: #cd0c36; }

.btn-outline-danger { background: #464646; border-color:#ffffff; color:#ffffff !important; }
.btn-outline-danger:hover { color: var(--bs-btn-hover-color); background-color: var(--bs-btn-hover-bg); border-color: var(--bs-btn-hover-border-color); }

.table-primary { --bs-table-bg: rgba(255,255,255,0.2); background: rgba(255,255,255,0.2); }

.site-body { display: flex; min-height: calc(100vh - 78px); }

.sidebar { width: var(--dpn-sidebar-width); background: #000000B3; border-right: 1px solid var(--dpn-border); padding: 24px 18px; box-shadow: 8px 0 24px rgba(15,45,58,.04); }

.sidebar-section-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--dpn-text-soft); font-weight: 700; margin: 0 0 12px 12px; }

.sidebar .nav-link { display: flex; align-items: center; gap: 10px; border-radius: 14px; color: #ffffff; padding: 12px 14px; font-weight: 600; transition: .2s ease; }

.sidebar .nav-link:hover { background: linear-gradient(90deg, rgba(255,0,0,.1) 0%, rgba(255,0,0,.5) 100%); color: #ffffff; }

.sidebar .nav-link.active { background: linear-gradient(90deg, rgba(255,0,0,.1) 0%, rgba(255,0,0,.5) 100%); }

.sidebar .nav-link.text-danger { color: var(--dpn-danger) !important; }

.sidebar .nav-icon { width: 28px; height: 28px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: rgba(15,45,58,.06); font-size: 13px; }

.main-panel { flex: 1; padding: 28px; }

.page-topbar { display: none; justify-content: space-between; align-items: center; gap: 16px; background: var(--dpn-surface); border: 1px solid var(--dpn-border); border-radius: var(--dpn-radius); padding: 18px 22px; margin-bottom: 22px; box-shadow: var(--dpn-shadow); }

.page-topbar h1,
.page-topbar h2,
.page-topbar h3,
.page-topbar p { margin: 0; }

.user-card { display: inline-flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid rgba(255,255,255,.18); border-radius: 16px; background: rgba(255,255,255,.08); }

.user-avatar { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.18); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }

.card, .surface-card { background: #000; border-radius: var(--dpn-radius); box-shadow: var(--dpn-shadow); color: #fff; }

.card-header { background: transparent; border-bottom: 1px solid #f00; padding: 16px 20px; font-weight: 700; }

.card-body { padding: 20px; }

.card-body form a { color:#ff0000; }

.card-body .card-title { font-weight:bold; }

.card-body .text-muted { color: #ffffff !important; }

.kpi-card { position: relative; overflow: hidden; }

.kpi-card::after { content: ""; position: absolute; inset: auto -30px -30px auto; width: 110px; height: 110px; border-radius: 50%; background: linear-gradient(135deg, rgba(215,165,52,.16), rgba(15,45,58,.06)); }

.kpi-label { color: var(--dpn-text-soft); font-size: .92rem; margin-bottom: 8px; }

.kpi-value { font-size: 2rem; font-weight: 800; line-height: 1; color: var(--dpn-primary); }

.badge { border-radius: 999px; padding: .5em .8em; }

.badge-soft { background: rgba(15,45,58,.08); color: var(--dpn-primary); }

.badge-status-success { background: rgba(25, 135, 84, .12); color: #146c43; }
.badge-status-warning { background: rgba(211, 158, 0, .16); color: #8d6800; }
.badge-status-danger { background: rgba(220, 53, 69, .12); color: #a52834; }
.badge-status-info { background: rgba(13, 110, 253, .10); color: #0b58ca; }

.form-control,
.form-select,
textarea,
input[type="email"], input[type="number"], input[type="password"], input[type="search"],
input[type="tel"], input[type="text"], input[type="url"], input[type="color"],
input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"],
input[type="time"], input[type="week"], select[multiple="multiple"] { background: #fff; border: 1px solid var(--dpn-border); border-radius: 14px; height: 48px; padding: 0 14px; color: var(--dpn-text); box-shadow: none; margin-bottom: 1rem; margin-top: 0; }

textarea { min-height: 120px; padding-top: 12px; }

.form-control:focus,
.form-select:focus,
textarea:focus,
input:focus,
select:focus { border-color: rgba(15,45,58,.45); box-shadow: 0 0 0 .2rem rgba(15,45,58,.08); }

.table { --bs-table-bg: transparent; }

.table thead th { color: var(--dpn-text-soft); text-transform: uppercase; font-size: .78rem; letter-spacing: .03em; border-bottom-width: 1px; }

.table > :not(caption) > * > * { padding: .9rem .85rem; border-color: var(--dpn-border); color:#ffffff; }

.progress { background: rgba(15,45,58,.08); border-radius: 999px; }

.progress-bar { background: linear-gradient(90deg, var(--dpn-primary) 0%, var(--dpn-accent) 100%); }

.site-footer { background: #fff; border-top: 1px solid var(--dpn-border); padding: 5px 0; color: var(--dpn-text-soft); }

.site-footer span { color: var(--dpn-primary); font-weight: 700; }

.auth-shell { min-height: calc(100vh - 134px); display: flex; align-items: center; }

.auth-card { max-width: 520px; margin: 0 auto; background: transparent; border: 0; }

.auth-card > .card-body { }

.auth-hero { padding: 26px; border-radius: 24px; background: #000000B3; color: #fff; box-shadow: var(--dpn-shadow); }

.auth-hero p { color: rgba(255,255,255,.78); margin-bottom: 0; }

.fab-new-os { position: fixed; right: 20px; bottom: 20px; z-index: 999; border-radius: 999px; padding: 14px 18px; box-shadow: 0 14px 24px rgba(15,45,58,.24); }

.text-muted { color:#ffffff !important; }

.title-area { position: relative; padding: 15px; background: #000000B3; margin-top: -15px; }

.title-area:after { content: ""; width: 100%; position: absolute; bottom: 0; height: 2px; background: #ff0000; display: block; left: 0; }

.title-area h3 { font-size: 24px; font-weight: bold; }

.title-area .text-muted { font-style: italic; color: #ffffff !important; font-size: 13px; margin-top: 10px; }

@media (max-width: 991.98px) { .site-body { flex-direction: column; }

	.sidebar { width: 100%; border-right: 0; border-bottom: 1px solid var(--dpn-border); box-shadow: none; }

	.main-panel { padding: 18px; }

	.page-topbar { flex-direction: column; align-items: flex-start; }
}