:root { --sidebar-width: 245px; --brand: #0f5132; }
body { background: #f5f7f9; color: #1f2937; }
.sidebar { position: fixed; top: 56px; bottom: 0; width: var(--sidebar-width); background: #fff; border-right: 1px solid #dee2e6; }
.sidebar a { color: #334155; padding: .7rem .8rem; border-radius: .5rem; text-decoration: none; }
.sidebar a:hover { background: #e9f5ef; color: var(--brand); }
.main-content { margin-left: var(--sidebar-width); padding: 1.5rem; }
.main-content.no-sidebar { margin-left: 0; min-height: 100vh; display: grid; place-items: center; }
.simulation-banner { margin-left: var(--sidebar-width); background: #fff3cd; color: #664d03; text-align: center; font-weight: 700; padding: .5rem; }
.login-card { width: min(420px, calc(100vw - 2rem)); }
.brand-logo { height: 40px; width: auto; background: #fff; border-radius: .35rem; padding: .1rem .35rem; }
.login-logo { display: block; width: min(300px, 100%); height: auto; margin-inline: auto; }
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.metric { background: #fff; border: 1px solid #e2e8f0; border-radius: .75rem; padding: 1rem; min-height: 100px; }
.metric span { color: #64748b; display: block; }
.metric strong { font-size: 2rem; }
.metric-danger { border-color: #f1aeb5; background: #fff5f5; }
.badge { background: #64748b; }
.status-SEM_SETOR,.status-FALHOU { background: #dc3545; }
.status-NAO_RETORNADA { background: #6c757d; }
.connection-dot { display: inline-block; width: .75rem; height: .75rem; border-radius: 50%; margin-right: .45rem; }
.connection-dot.connected { background: #198754; box-shadow: 0 0 0 .2rem rgba(25,135,84,.15); }
.connection-dot.disconnected { background: #dc3545; box-shadow: 0 0 0 .2rem rgba(220,53,69,.15); }
.status-PENDENTE { background: #ffc107; color: #212529; }
.status-SIMULADA { background: #6f42c1; }
.status-ENVIADA,.status-ENTREGUE,.status-LIDA { background: #198754; }
.simulation-result { border-width: 2px; }
.message-preview { max-width: 680px; background: #dcf8c6; border-radius: .8rem .8rem .2rem .8rem; padding: 1rem 1.1rem; box-shadow: 0 .15rem .4rem rgba(0,0,0,.08); white-space: pre-line; }
.preview-grid dt { color: #64748b; font-weight: 600; }
.preview-grid dd { margin-bottom: .75rem; }
@media (max-width: 991.98px) { .main-content,.simulation-banner { margin-left: 0; } .sidebar { top: 0; } }