/* ==========================================================================
   Aprovados — Layout v7 — Sidebar Acordeão
   Bootstrap override via alta especificidade
   ========================================================================== */

:root {
  --crimson:      #215734;
  --crimson-deep: #1a1a2e;
  --sb-bg:        #1a1a2e;
  --sb-width:     248px;
  --sb-text:      rgba(255,255,255,.55);
  --sb-text-hi:   #ffffff;
  --sb-text-active: #ffffff;
  --sb-hover:     rgba(255,255,255,.07);
  --sb-active:    #215734;
  --sb-border:    rgba(255,255,255,.08);
  --surface:      #f5f6fa;
  --card:         #ffffff;
  --border:       #e4e7f0;
  --text:         #1e2235;
  --text-muted:   #6b7280;
  --text-faint:   #9ca3af;
  --blue:         #2563eb;
  --danger:        #dc2626;
  --danger-deep:   #b91c1c;
  --danger-bg:     #fff2f2;
  --danger-border: #fca5a5;
  --danger-text:   #7f1d1d;
  --th:           56px;
  --r1: 6px; --r2: 10px; --r3: 14px; --r4: 20px;
  --sh1: 0 1px 3px rgba(0,0,0,.06);
  --sh2: 0 4px 16px rgba(0,0,0,.09);
  --sh3: 0 12px 40px rgba(0,0,0,.16);
  --tr: all .2s ease;
  --fd: Georgia, 'Times New Roman', serif;
  --fb: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

*,*::before,*::after { box-sizing: border-box }
html { height: 100% }
body {
  margin: 0; min-height: 100%;
  font-family: var(--fb); font-size: 15px;
  line-height: 1.65; color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100% }
p:last-child { margin-bottom: 0 }
iframe { border: 0; width: 100%; height: 100% }
textarea { max-width: 100% }

/* ==========================================================================
   LAYOUT PRINCIPAL
   ========================================================================== */
#wrap { display: flex; min-height: 100vh }

/* ==========================================================================
   SIDEBAR
   ========================================================================== */
#app-sidebar {
  position: fixed; top: 0; left: 0;
  width: var(--sb-width); height: 100vh;
  background: linear-gradient(180deg, var(--sb-bg) 0%, #123B56 100%);
  display: flex; flex-direction: column;
  overflow: hidden;
  z-index: 1040;
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  border-right: 1px solid var(--sb-border);
  box-shadow: 2px 0 16px rgba(15,23,42,.04);
}

/* Logo */
.sidebar-brand {
  display: flex; align-items: center; justify-content: center;
  padding: 22px 20px 16px;
  border-bottom: 1px solid var(--sb-border);
  flex-shrink: 0; text-decoration: none;
}
.sidebar-logo {
  height: 34px; width: auto; max-width: 160px;
  opacity: 1;
}

/* Usuário — card boas-vindas */
.sidebar-user {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--sb-border);
  flex-shrink: 0;
  cursor: pointer;
  transition: background .18s;
  position: relative;
}
.sidebar-user:hover { background: var(--sb-hover) }
.sidebar-user-avatar {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--crimson), var(--crimson-deep));
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; color: #fff; text-transform: uppercase;
  box-shadow: 0 3px 10px rgba(152,21,27,.4);
}
.sidebar-user-info { overflow: hidden; flex: 1; min-width: 0 }
.sidebar-welcome {
  display: block; color: var(--sb-text); font-size: 11px;
  letter-spacing: .2px; margin-bottom: 2px;
}
.sidebar-user-name {
  display: block; color: var(--sb-text-hi); font-size: 14px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-user-role {
  display: block; color: var(--sb-text); font-size: 11px;
  text-transform: uppercase; letter-spacing: .6px;
}
.sidebar-user-arrow {
  font-size: 8px; color: var(--sb-text); opacity: .5;
  transition: transform .25s, opacity .2s;
  flex-shrink: 0;
}
.sidebar-user.open .sidebar-user-arrow {
  transform: rotate(90deg); opacity: .9;
}
/* Dropdown */
.sidebar-user-dropdown {
  background: rgba(15,23,42,.035);
  border-bottom: 1px solid var(--sb-border);
  padding: 4px 10px 8px;
  flex-shrink: 0;
}
.sidebar-user-option {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px;
  color: var(--sb-text) !important;
  font-size: 13px; font-weight: 400;
  text-decoration: none !important;
  border-radius: 7px;
  transition: background .15s, color .15s;
}
.sidebar-user-option:hover {
  background: var(--sb-hover);
  color: var(--sb-text-hi) !important;
  text-decoration: none !important;
}
.sidebar-user-option svg { flex-shrink: 0; opacity: .7 }
.sidebar-user-option:hover svg { opacity: 1 }

/* Scroll nav */
.sidebar-nav-wrapper {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 8px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(15,23,42,.15) transparent;
}
.sidebar-nav-wrapper::-webkit-scrollbar { width: 4px }
.sidebar-nav-wrapper::-webkit-scrollbar-thumb {
  background: rgba(15,23,42,.15); border-radius: 4px;
}

/* ==========================================================================
   MENU ACORDEÃO — reset Bootstrap via #app-sidebar (alta especificidade)
   ========================================================================== */

#app-sidebar ul.sidebar-nav {
  list-style: none !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  background: transparent !important;
  border: none !important; border-radius: 0 !important;
  box-shadow: none !important;
  display: block !important; float: none !important;
}

/* Item de nível 1 */
#app-sidebar ul.sidebar-nav > li {
  display: block !important; float: none !important;
  margin: 0 0 2px !important;
  border: none !important; background: transparent !important;
  position: relative;
}

#app-sidebar ul.sidebar-nav > li > a {
  display: flex !important; align-items: center !important;
  gap: 10px !important;
  padding: 11px 14px !important; margin: 0 !important;
  color: var(--sb-text) !important;
  font-size: 13px !important; font-weight: 500 !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important; border-radius: 9px !important;
  cursor: pointer !important;
  transition: background .18s, color .18s !important;
  width: 100% !important; white-space: normal !important;
}
#app-sidebar ul.sidebar-nav > li > a:hover,
#app-sidebar ul.sidebar-nav > li > a:focus {
  color: var(--sb-text-hi) !important;
  background: var(--sb-hover) !important;
  text-decoration: none !important; outline: none !important;
}
#app-sidebar ul.sidebar-nav > li.open > a {
  color: var(--sb-text-hi) !important;
  background: var(--sb-hover) !important;
}
#app-sidebar ul.sidebar-nav > li.active > a {
  color: #fff !important;
  background: var(--sb-active) !important;
  font-weight: 600 !important;
}

/* Ícone SVG nível 1 */
#app-sidebar ul.sidebar-nav > li > a .nav-icon {
  width: 18px !important; height: 18px !important;
  flex-shrink: 0 !important; display: block !important;
  opacity: .6; transition: opacity .15s;
}
#app-sidebar ul.sidebar-nav > li > a:hover .nav-icon,
#app-sidebar ul.sidebar-nav > li.open > a .nav-icon,
#app-sidebar ul.sidebar-nav > li.active > a .nav-icon { opacity: 1; }

/* Seta acordeão */
#app-sidebar .sidebar-arrow {
  display: flex !important; align-items: center; justify-content: center;
  margin-left: auto !important; flex-shrink: 0 !important;
  width: 18px !important; height: 18px !important;
  font-size: 9px !important; color: var(--sb-text) !important;
  opacity: .4 !important;
  transition: transform .25s ease, opacity .18s !important;
}
#app-sidebar ul.sidebar-nav > li > a:hover .sidebar-arrow,
#app-sidebar ul.sidebar-nav > li.open > a .sidebar-arrow { opacity: .85 !important; }
#app-sidebar ul.sidebar-nav > li.open > a .sidebar-arrow { transform: rotate(90deg) !important; }

/* ==========================================================================
   SUBMENU — controlado via JS (slideDown/slideUp)
   ========================================================================== */
#app-sidebar ul.sidebar-submenu {
  list-style: none !important; margin: 0 !important;
  padding: 0 !important;
  display: none !important;
  float: none !important;
  position: static !important;
  background: rgba(0,0,0,.14) !important;
  border: none !important; border-radius: 8px !important;
  box-shadow: none !important;
  min-width: 0 !important; width: auto !important;
  z-index: auto !important;
  margin: 3px 0 5px !important;
  overflow: hidden;
}

#app-sidebar ul.sidebar-submenu > li {
  display: block !important; float: none !important;
  margin: 0 !important; border: none !important;
  background: transparent !important;
}

#app-sidebar ul.sidebar-submenu > li > a {
  display: flex !important; align-items: center !important;
  gap: 9px !important;
  padding: 9px 14px 9px 36px !important;
  margin: 1px 6px !important;
  color: var(--sb-text) !important;
  font-size: 12.5px !important; font-weight: 400 !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important; border-radius: 7px !important;
  cursor: pointer !important;
  transition: background .15s, color .15s !important;
  width: calc(100% - 12px) !important;
  white-space: normal !important;
}
#app-sidebar ul.sidebar-submenu > li > a:hover,
#app-sidebar ul.sidebar-submenu > li > a:focus {
  color: #fff !important;
  background: var(--sb-hover) !important;
  text-decoration: none !important;
}
#app-sidebar ul.sidebar-submenu > li.active > a {
  color: #fff !important;
  background: var(--sb-active) !important;
  font-weight: 500 !important;
}
#app-sidebar ul.sidebar-submenu > li > a .nav-icon-sm {
  width: 14px !important; height: 14px !important;
  flex-shrink: 0 !important; display: block !important; opacity: .55;
}
#app-sidebar ul.sidebar-submenu > li > a:hover .nav-icon-sm,
#app-sidebar ul.sidebar-submenu > li.active > a .nav-icon-sm { opacity: 1; }

.nav-icon    { display: inline-block; vertical-align: middle; flex-shrink: 0; width: 18px; height: 18px }
.nav-icon-sm { display: inline-block; vertical-align: middle; flex-shrink: 0; width: 14px; height: 14px }

/* ==========================================================================
   SUBMENU ACORDEÃO — FECHADO POR PADRÃO
   ========================================================================== */

/* Reset total — Bootstrap pode tentar mostrar como dropdown */
#app-sidebar ul.sidebar-submenu {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: none !important;         /* FECHADO */
  float: none !important;
  position: static !important;      /* INLINE, não absolute/fixed */
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-width: 0 !important;
  width: auto !important;
  z-index: auto !important;
  overflow: hidden;
}

/* Aberto pelo JS — adiciona classe .open no <li> pai */
#app-sidebar ul.sidebar-nav > li.open > ul.sidebar-submenu {
  display: block !important;
  padding: 3px 0 6px !important;
}

/* Item de submenu */
#app-sidebar ul.sidebar-submenu > li {
  display: block !important;
  float: none !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
}

/* Link de submenu */
#app-sidebar ul.sidebar-submenu > li > a {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 8px 12px 8px 40px !important;
  margin: 1px 6px !important;
  color: var(--sb-text) !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
  border-radius: 7px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: background .15s, color .15s !important;
  width: calc(100% - 12px) !important;
}
#app-sidebar ul.sidebar-submenu > li > a:hover,
#app-sidebar ul.sidebar-submenu > li > a:focus {
  color: var(--sb-text-hi) !important;
  background: var(--sb-hover) !important;
  text-decoration: none !important;
}
#app-sidebar ul.sidebar-submenu > li.active > a {
  color: #fff !important;
  background: var(--sb-active) !important;
  font-weight: 500 !important;
}
#app-sidebar ul.sidebar-submenu > li > a .nav-icon-sm {
  width: 13px !important; height: 13px !important;
  flex-shrink: 0 !important; display: block !important;
  opacity: .6;
}
#app-sidebar ul.sidebar-submenu > li > a:hover .nav-icon-sm,
#app-sidebar ul.sidebar-submenu > li.active > a .nav-icon-sm {
  opacity: 1;
}

/* Globais */
.nav-icon     { display: inline-block; vertical-align: middle; flex-shrink: 0; width: 17px; height: 17px }
.nav-icon-sm  { display: inline-block; vertical-align: middle; flex-shrink: 0; width: 13px; height: 13px }

/* Rodapé: logo Exam + Sair */
.sidebar-footer {
  padding: 8px 10px 14px;
  border-top: 1px solid var(--sb-border);
  flex-shrink: 0;
  display: flex; flex-direction: column; gap: 2px;
}
/* Logo Exam Enamed — canto inferior da sidebar */
.sidebar-exam-brand {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 8px;
  text-decoration: none; transition: opacity .18s;
  opacity: .45;
}
.sidebar-exam-brand:hover { opacity: .85; text-decoration: none }
/* Sair */
.sidebar-logout {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; border-radius: 8px;
  color: var(--sb-text); font-size: 13px;
  text-decoration: none; transition: var(--tr);
}
.sidebar-logout:hover {
  color: #ff8888 !important;
  background: rgba(255,100,100,.08);
  text-decoration: none;
}
.sidebar-logout .nav-icon { opacity: .55 }
.sidebar-logout:hover .nav-icon { opacity: 1; color: #ff8888 }
.sidebar-logout-initials { display: none }

/* ==========================================================================
   TOPBAR
   ========================================================================== */
#main-content {
  margin-left: var(--sb-width);
  flex: 1; display: flex; flex-direction: column; min-height: 100vh;
  transition: margin-left .28s cubic-bezier(.4,0,.2,1);
}
#topbar {
  height: var(--th); background: var(--card);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 24px;
  position: sticky; top: 0; z-index: 1030;
  box-shadow: 0 1px 0 var(--border), 0 2px 8px rgba(0,0,0,.03);
  gap: 8px;
}
.topbar-toggle {
  display: none; background: none; border: none; cursor: pointer;
  padding: 6px; color: var(--text-muted); border-radius: var(--r1);
  flex-direction: column; gap: 5px;
  align-items: center; justify-content: center;
  width: 36px; height: 36px; flex-shrink: 0;
}
.topbar-toggle:hover { background: var(--surface) }
.topbar-toggle span { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px }
.topbar-logo { display: none; align-items: center; text-decoration: none; flex: 1 }
.topbar-logo img { height: 30px; width: auto; max-width: 140px; object-fit: contain }
.topbar-logout-text { display: inline }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0 }
.topbar-sair-btn {
  display: none;
  align-items: center; gap: 6px;
  padding: 7px 14px;
  background: var(--crimson); color: #fff !important;
  border-radius: var(--r1); font-size: 13px; font-weight: 600;
  text-decoration: none !important;
  transition: var(--tr);
}
.topbar-sair-btn:hover { background: var(--crimson-deep); color: #fff !important; text-decoration: none !important }
.topbar-sair-btn svg { flex-shrink: 0 }
.page-content { flex: 1; padding: 28px 32px }
.sidebar-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.55); z-index: 1039;
}
.sidebar-overlay.active { display: block }

/* ==========================================================================
   ÍCONES LEGADOS
   ========================================================================== */
i[class^="exam-icon-"] { display: inline-block; width: 20px; height: 20px; vertical-align: middle; background: url('../images/sprites-black.png') no-repeat 30px 30px }
.sidebar-nav-wrapper i[class^="exam-icon-"] { background-image: url('../images/sprites-white.png') }
i.exam-icon-login  { background-position: 0 -30px }
i.exam-icon-logout { background-position: 0 0 }
i.exam-icon-admin  { background-position: -60px 0 }
i.exam-icon-record { background-position: -60px -30px }
i.exam-icon-provas { background-position: -30px -30px }
i.exam-icon-report { background-position: -30px 0 }

/* ==========================================================================
   ALERTAS
   ========================================================================== */
.alert { border-radius: var(--r2); border: 1px solid transparent; padding: 13px 18px; margin-bottom: 20px; font-size: 14px }
.alert-success { background: #f0fdf5; border-color: #a7f3c0; color: #14532d }
.alert-danger   { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-text) }
.alert-warning  { background: #fffbeb; border-color: #fcd34d; color: #78350f }
.alert-info     { background: #eff6ff; border-color: #93c5fd; color: #1e3a8a }

/* ==========================================================================
   CARDS / PANELS
   ========================================================================== */
.card, .panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--r3); box-shadow: var(--sh1); margin-bottom: 24px; overflow: hidden }
.card-header, .panel-heading { padding: 16px 24px; border-bottom: 1px solid var(--border); background: transparent }
.panel-heading .panel-title { font-size: 17px; color: var(--text); margin: 0 }
.card-body, .panel-body { padding: 24px }
.panel-footer { padding: 12px 24px; background: var(--surface); border-top: 1px solid var(--border) }

/* ==========================================================================
   BOTÕES
   ========================================================================== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; font-weight: 500; padding: 8px 20px; border-radius: var(--r1); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: var(--tr); line-height: 1.5; white-space: nowrap }
.btn:hover, .btn:focus { text-decoration: none }
.btn-primary { background: var(--crimson); border-color: var(--crimson); color: #fff; font-weight: 600 }
.btn-primary:hover { background: var(--crimson-deep); border-color: var(--crimson-deep); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(152,21,27,.3) }
.btn-primary.disabled, .btn-primary[disabled] { opacity: .5 }
.btn-default { background: #fff; border-color: var(--border); color: var(--text) }
.btn-default:hover { background: var(--surface); border-color: #ccc }
.btn-inverse, .btn.inverse { background: var(--sb-bg); border-color: var(--sb-bg); color: #fff }
.btn-inverse:hover, .btn.inverse:hover { background: #2d3461; color: #fff }
.btn-link { background: none; border-color: transparent; color: var(--crimson) }
.btn-link:hover { color: var(--crimson-deep); text-decoration: none }
.btn-danger  { background: var(--danger); border-color: var(--danger); color: #fff }
.btn-success { background: #1a7a4a; border-color: #1a7a4a; color: #fff }
.btn-warning { background: #b45309; border-color: #b45309; color: #fff }
.btn-sm  { font-size: 12px; padding: 5px 13px }
.btn-lg  { font-size: 16px; padding: 12px 30px }
.btn.logout { display: block; width: 100%; margin-top: 16px; background: transparent; border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.55); text-align: center }
.btn-group { position: relative; display: inline-flex }
.btn-group > .btn + .btn { margin-left: -1px }
.btn-group > .btn:not(:first-child):not(:last-child) { border-radius: 0 }
.btn-group > .btn:first-child  { border-top-right-radius: 0; border-bottom-right-radius: 0 }
.btn-group > .btn:last-child   { border-top-left-radius: 0; border-bottom-left-radius: 0 }
.navbar-btn { float: left; margin-right: 6px }

/* ==========================================================================
   FORMULÁRIOS
   ========================================================================== */
.form-group { margin-bottom: 20px }
label { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .5px }
.form-control { width: 100%; height: 42px; padding: 9px 14px; font-size: 14px; color: var(--text); background: #fff; border: 1px solid var(--border); border-radius: var(--r1); transition: border-color .2s, box-shadow .2s; outline: none; -webkit-appearance: none; appearance: none }
.form-control:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(59,91,219,.12) }
.form-control::-webkit-input-placeholder { color: var(--text-faint) }
.form-control::placeholder { color: var(--text-faint) }
textarea.form-control { height: auto; min-height: 90px; resize: vertical }
div.form-control { height: auto; min-height: 42px }
select.form-control { cursor: pointer }
.has-error .form-control { border-color: var(--danger) }
.help-block { font-size: 12px; color: var(--danger); margin-top: 4px }
.form-horizontal .control-label { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; padding-top: 12px }
.control-group.text-right.button { display: inline-block; float: right; margin-left: 6px }
.control-group label { margin-bottom: 2px }
.container .control-group { margin-bottom: 4px }
.radio, .checkbox { margin-top: 8px; margin-bottom: 8px }
.input-group { position: relative; display: flex; align-items: stretch }
.input-group .form-control { flex: 1; border-radius: var(--r1) 0 0 var(--r1) }
.input-group-addon { cursor: pointer; background: var(--surface); border: 1px solid var(--border); border-left: 0; border-radius: 0 var(--r1) var(--r1) 0; padding: 8px 14px; color: var(--text-muted); display: flex; align-items: center }
.input-documento { width: 100% }
.input-documento td { padding: 0 }
.input-documento td:not(:first-child) .form-control { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 0 }
.input-documento td:not(:last-child) .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0 }
td.qtd div:nth-child(n+2), td.qtd span:nth-child(n+2) { margin-left: 10px }

/* ==========================================================================
   TABELAS
   ========================================================================== */
.table { width: 100%; border-collapse: collapse; font-size: 14px }
.table thead tr { background: var(--surface); border-bottom: 2px solid var(--border) }
.table thead th { padding: 11px 16px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--text-muted); white-space: nowrap; border: none }
@media (max-width: 768px) { .table thead th { white-space: normal } }
@media (max-width: 768px) { .table-responsive > .table > tbody > tr > td, .table-responsive > .table > thead > tr > th { white-space: normal !important; } }
.table tbody tr { border-bottom: 1px solid #eceef5; transition: background .15s }
.table tbody tr:last-child { border-bottom: none }
.table tbody tr:hover { background: #f7f8fc }
.table td { padding: 13px 16px; vertical-align: middle; border: none }
.table td.expand { width: 100% }
.table a { color: var(--crimson) }
.table a:hover { color: var(--crimson-deep); text-decoration: none }
.table-bordered { border: 1px solid var(--border); border-radius: var(--r2); overflow: hidden }
.table-bordered td, .table-bordered th { border: none !important; border-bottom: 1px solid #eceef5 !important }
.table-bordered thead th { border-bottom: 2px solid var(--border) !important }
.table-bordered tbody tr:hover { background: #f7f8fc }
.table-striped tbody tr:nth-child(odd) { background: #f7f8fc }
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch }
table th.text-right, table td.text-right { text-align: right }

/* ==========================================================================
   TABS / PAGINAÇÃO / MODAL
   ========================================================================== */
.nav-tabs { border-bottom: 2px solid var(--border); list-style: none; padding: 0; margin: 0 0 20px; display: flex; gap: 2px; flex-wrap: wrap }
.nav-tabs > li > a { display: block; padding: 10px 20px; color: var(--text-muted); font-size: 13px; font-weight: 600; text-decoration: none; border-radius: var(--r1) var(--r1) 0 0; border: 1px solid transparent; margin-bottom: -2px; transition: var(--tr) }
.nav-tabs > li > a:hover { color: var(--text); background: var(--surface); text-decoration: none }
.nav-tabs > li.active > a { color: var(--blue); background: var(--card); border-color: var(--border); border-bottom-color: var(--card) }
.pagination { display: flex; gap: 4px; list-style: none; padding: 0; margin: 0; flex-wrap: wrap }
.pagination > li > a, .pagination > li > span { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: var(--r1); color: var(--text); font-size: 13px; text-decoration: none; transition: var(--tr) }
.pagination > li > a:hover { background: var(--surface); border-color: #bbb }
.pagination > .active > a, .pagination > .active > span { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600 }
.pagination > .disabled > a, .pagination > .disabled > span { opacity: .4; cursor: default }
.modal-content { border-radius: var(--r3); border: none; box-shadow: var(--sh3) }
.modal-header { padding: 20px 26px; border-bottom: 1px solid var(--border); background: var(--surface) }
.modal-title { font-size: 19px; color: var(--text); margin: 0 }
.modal-body { padding: 26px }
.modal-footer { padding: 16px 26px; border-top: 1px solid var(--border); background: var(--surface) }

/* ==========================================================================
   CHOSEN
   ========================================================================== */
.chosen-container .chosen-single, .chosen-container .chosen-choices { border: 1px solid var(--border) !important; border-radius: var(--r1) !important; background: #fff !important; box-shadow: none !important; height: 42px !important; padding: 10px 14px !important; font-size: 14px; color: var(--text) }
.chosen-container .chosen-choices { height: auto !important; min-height: 42px !important }
.chosen-container-single .chosen-single div { top: 10px }
.chosen-container.chosen-container-active .chosen-single, .chosen-container.chosen-container-active .chosen-choices { border-color: var(--blue) !important; box-shadow: 0 0 0 3px rgba(59,91,219,.12) !important }
.chosen-container .chosen-drop { border: 1px solid var(--border); border-radius: 0 0 var(--r1) var(--r1); box-shadow: var(--sh2) }
.chosen-container .chosen-choices li.search-choice { padding-top: 6px; padding-bottom: 6px }
.chosen-container .chosen-choices li.search-choice .search-choice-close { top: 7px }
.chosen-container .chosen-choices li.search-field input[type=text] { height: 100%; margin-top: 3px; margin-left: 7px }
.has-error .chosen-container .chosen-single, .has-error .chosen-container .chosen-choices { border-color: var(--danger) !important }
.chosen-container-single .chosen-search input[type=text] { background: url(chosen-sprite.png) no-repeat 100% -20px }

/* ==========================================================================
   LOGIN
   ========================================================================== */
body.login { background: var(--sb-bg); display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px }
body.login #wrap { width: 100%; display: flex; align-items: center; justify-content: center; min-height: 100vh }
body.login #app-sidebar, body.login #topbar { display: none }
body.login #main-content { margin-left: 0 }
.panel-login { background: #fff; border-radius: var(--r4); border: none; box-shadow: 0 32px 80px rgba(0,0,0,.5); overflow: hidden; width: 100%; max-width: 440px; margin: 0 auto }
.panel-login .panel-header { background: var(--sb-bg); padding: 40px 36px 32px; text-align: center; border-bottom: 3px solid var(--crimson) }
.panel-login .panel-header img { height: 50px; width: auto; filter: brightness(0) invert(1); max-width: 200px }
.panel-login .panel-body { padding: 36px }
.panel-login .form-group { margin-bottom: 18px }
.panel-login label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; margin-bottom: 7px }
.panel-login .form-control { height: 46px; border: 1.5px solid var(--border); font-size: 15px; padding: 11px 16px }
.panel-login button[type=submit], .panel-login input[type=submit] { width: 100%; height: 50px; background: var(--crimson); border: none; border-radius: var(--r1); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; transition: var(--tr); margin-top: 10px }
.panel-login button[type=submit]:hover, .panel-login input[type=submit]:hover { background: var(--crimson-deep); transform: translateY(-2px); box-shadow: 0 4px 20px rgba(152,21,27,.4) }
.panel-login .panel-footer { background: var(--surface); border-top: 1px solid var(--border); padding: 18px 36px; text-align: center }
.panel-login .panel-footer a { color: var(--text-muted); font-size: 13px; text-decoration: none }
.panel-login .panel-footer a:hover { color: var(--crimson) }
.panel-login .alert { margin: 0 0 18px; font-size: 13px }
.form-login label { display: none }

/* ==========================================================================
   MISC
   ========================================================================== */
.navbar { margin-bottom: 16px; border: 1px solid var(--border); border-radius: var(--r2); background: #fff; padding: 8px 16px }
.navbar-form { display: flex; align-items: center; gap: 8px; padding: 0; margin: 0; flex-wrap: wrap }
.navbar .form-group label { float: left; margin: 8px 8px 0 0; font-weight: normal; text-transform: none; letter-spacing: 0 }
.navbar-divider, .navbar-separator { float: left; height: 36px; border-right: 1px solid var(--border); margin: 0 15px }
.collapse-filters { margin-bottom: 20px; border: 1px solid var(--border); border-radius: var(--r2); background: #fff; padding: 18px; box-shadow: var(--sh1) }
.nowrap { white-space: nowrap }
.pre { white-space: pre-wrap }
.important { color: var(--danger); font-weight: 600 }
.clearfix::after { content: ''; display: table; clear: both }
.busca { cursor: pointer }
.select-buttons .btn { margin: 8px 8px 0 0 }
.select-buttons .btn-link { border: 1px solid var(--crimson); border-radius: var(--r1) }
.panel-large, .panel-small { width: 100%; max-width: 380px; margin: 0 auto }
.panel-large { max-width: 620px }
.expiry-message { color: var(--danger); font-weight: 600 }
li.dropdown:hover > ul.dropdown-menu { display: block }
#scroll-top { position: fixed; bottom: 28px; right: 28px; background: var(--blue); border-radius: 50%; z-index: 1000; box-shadow: 0 4px 16px rgba(59,91,219,.3); transition: var(--tr) }
#scroll-top:hover { background: #2d4abf; transform: translateY(-2px) }
#scroll-top a { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; color: #fff; border-radius: 50% }
.prova-online #main-content { padding-top: 70px }
.menu-prova-online { z-index: 1000; position: fixed; top: 0; left: 0; width: 100%; padding: 10px 16px; background: #fff; border-bottom: 1px solid var(--border); box-shadow: var(--sh1) }
#timer { font-size: 20px; font-weight: 700; color: var(--text) }
#timer span { font-size: 26px; color: var(--crimson) }
.prova { margin: 16px 0 24px; box-shadow: var(--sh2); background: #fff; border-radius: var(--r2); overflow: hidden }
.prova.preview { padding: 24px }
.prova .box { padding: 16px; border: 2px solid var(--border); border-radius: var(--r2); margin-bottom: 16px }
div.questoes { margin-top: 20px }
.prova.preview div.questoes { counter-reset: questao }
.prova.preview div.questoes div.questao { position: relative; padding: 0 0 20px 20px; margin-bottom: 20px; border-bottom: 1px solid var(--border) }
.prova.preview div.questoes div.questao:before { content: counter(questao) ")"; counter-increment: questao; position: absolute; left: 0 }
.alternativa { position: relative; padding: 6px 0 }
.alternativa.correta { background: #f0fdf5 }
ol.alternativas { list-style-type: none; counter-reset: item }
ol.alternativas li { position: relative }
ol.alternativas li:before { content: counter(item,upper-alpha) ")"; counter-increment: item; position: absolute; left: -30px }
.questao-container { margin-bottom: 12px; border: 1px solid var(--border); border-radius: var(--r2); background: #fff; padding: 16px }

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width: 992px) {
  #app-sidebar { transform: translateX(-100%); box-shadow: none }
  #app-sidebar.open { transform: translateX(0); box-shadow: 6px 0 40px rgba(0,0,0,.4) }
  #main-content { margin-left: 0 }
  .topbar-toggle { display: flex }
  .topbar-logo { display: flex }
  .topbar-title { display: none }
  .page-content { padding: 20px 16px }
  .topbar-sair-btn { display: flex }
}
@media (max-width: 767px) {
  .page-content { padding: 16px 12px }
  .panel-body, .card-body { padding: 16px }
  .modal-body { padding: 16px }
  .modal-footer { padding: 12px 16px }
  .btn-lg { font-size: 14px; padding: 10px 20px }
  .topbar-logout-text { display: none }
  #timer { font-size: 16px }
  #timer span { font-size: 20px }
  .panel-login .panel-body { padding: 26px 20px }
  .panel-login .panel-header { padding: 30px 20px 24px }
  .nav-tabs > li { flex: 1; min-width: 0 }
  .nav-tabs > li > a { text-align: center; font-size: 12px; padding: 8px 10px }
  .navbar-form { flex-wrap: wrap }
}
@media (max-width: 480px) {
  #topbar { padding: 0 12px }
  .page-content { padding: 12px 10px }
  .card-body, .panel-body { padding: 12px }
}
@media (max-width: 575px) { .table-responsive-sm thead { display: none } }
@media (min-width: 768px) {
  .form-inline .radio input[type="radio"],
  .form-inline .checkbox input[type="checkbox"] { float: left; margin-right: 5px }
  .nav-tabs.stacked { flex-direction: column; border-right: 2px solid var(--border); border-bottom: none }
  .nav-tabs.stacked > li > a { border-radius: var(--r1) 0 0 var(--r1); margin-right: -2px }
  .nav-tabs.stacked > li.active > a { border-right-color: transparent }
}
@media print {
  #app-sidebar, #topbar, .btn, .sidebar-overlay { display: none !important }
  #main-content { margin-left: 0 !important }
  .page-content { padding: 0 }
  .table { font-size: 11px }
}

#wrap { display: contents }
html, body { overflow-x: hidden; max-width: 100vw }

/* Responsividade mobile - prova online */
@media (max-width: 768px) {
    .prova-online #main-content { padding-top: 80px }
    .menu-prova-online { padding: 6px 8px }
    .pages-container .owl-item { overflow: hidden }
    ol.alternativas li { word-wrap: break-word; overflow-wrap: break-word; white-space: normal }
    .alternativa { word-wrap: break-word; overflow-wrap: break-word; white-space: normal }
    .form label { word-wrap: break-word; overflow-wrap: break-word }
    .owl-wrapper-outer { overflow: hidden !important }
    
    .owl-item { width: 100% !important; box-sizing: border-box }
    p, th, div { max-width: 100%; overflow-wrap: break-word } td { overflow-wrap: break-word }
    .prova img, .questao img, .alternativa img { max-width: 100% !important; height: auto !important }
    .prova table, .questao table { max-width: 100% !important; width: 100% !important }
    .page-content { overflow-x: hidden }
    .ra-card, .area-card, .qual-card { overflow-x: auto !important }
    .ra-table, .area-table, .qual-table { min-width: unset !important }
    .area-bar { min-width: 40px !important }
}

/* ==========================================================================
   TOPBAR — busca e avatar (adicionado no redesign do dashboard)
   ========================================================================== */
.topbar-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 8px 14px;
  max-width: 420px; width: 100%; margin: 0 auto;
  color: var(--text-faint);
}
.topbar-search input {
  border: none; background: transparent; outline: none;
  font-size: 13px; color: var(--text); width: 100%;
}
.topbar-search input::placeholder { color: var(--text-faint); }
.topbar-avatar {
  display: flex; align-items: center; gap: 8px;
  cursor: default; padding: 4px 10px 4px 4px; border-radius: 999px;
  transition: background .15s;
}
.topbar-avatar:hover { background: var(--surface); }
.topbar-avatar-circle {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), #1d4ed8);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex-shrink: 0; text-transform: uppercase;
}
.topbar-avatar-name { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; }
@media (max-width: 780px) {
  .topbar-search { display: none; }
  .topbar-avatar-name { display: none; }
}

/* ==========================================================================
   SIDEBAR — item Dashboard, cabeçalhos de grupo, ajuda e rodapé (redesign)
   ========================================================================== */
.sidebar-group-label {
  padding: 14px 16px 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: #94a3b8;
}
#app-sidebar ul.sidebar-nav > li:first-child + .sidebar-group-label,
.sidebar-nav-wrapper > .sidebar-group-label:first-child { padding-top: 6px; }

.sidebar-help-card {
  display: flex; align-items: center; gap: 10px;
  padding: 12px; margin: 4px 6px 10px;
  background: #eff6ff; border: 1px solid #dbeafe; border-radius: 12px;
  text-decoration: none !important; transition: background .15s;
}
.sidebar-help-card:hover { background: #dbeafe; text-decoration: none !important; }
.sidebar-help-icon {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  background: #2563eb; color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.sidebar-help-text { display: flex; flex-direction: column; line-height: 1.3; }
.sidebar-help-text strong { font-size: 12.5px; color: #1e3a8a; font-weight: 700; }
.sidebar-help-text span { font-size: 11px; color: #3b82f6; }

.sidebar-icon-row {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 4px 10px 10px;
}
.sidebar-icon-row a {
  width: 34px; height: 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  color: var(--sb-text); text-decoration: none !important;
  transition: background .15s, color .15s;
}
.sidebar-icon-row a:hover {
  background: var(--sb-hover); color: var(--sb-text-hi);
  text-decoration: none !important;
}

/* Prova Online - layout com mapa da prova (adicionado) */
.prova-online-layout { display: flex; gap: 20px; align-items: flex-start }
.prova-online-main { flex: 1; min-width: 0 }
.mapa-prova-sidebar { width: 280px; flex-shrink: 0; position: sticky; top: 90px }
.mapa-prova-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r3); padding: 20px; box-shadow: var(--sh1) }
.mapa-prova-card h4 { font-family: var(--fd); margin: 0 0 2px; color: var(--crimson-deep); font-size: 17px }
.mapa-prova-sub { font-size: 12.5px; color: var(--text-muted); margin: 0 0 14px }
.mapa-prova-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 14px }
.mapa-num { aspect-ratio: 1; border: none; border-radius: 50%; background: var(--surface); color: var(--text-muted); font-weight: 700; font-size: 12.5px; cursor: pointer; transition: var(--tr) }
.mapa-num:hover { transform: scale(1.08) }
.mapa-num.done { background: var(--crimson); color: #fff }
.mapa-num.current { background: var(--crimson-deep); color: #fff; box-shadow: 0 0 0 3px rgba(26,26,46,.18) }
.mapa-legend { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--text-muted); font-weight: 600 }
.mapa-legend .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px }
.mapa-legend .done { background: var(--crimson) }
.mapa-legend .blank { background: var(--border) }

/* Alternativas como cards (adicionado) */
.prova.preview .radio-group { counter-reset: alt; display: flex; flex-direction: column; gap: 10px }
.prova.preview .radio-group .radio { counter-increment: alt; border: 1.5px solid var(--border); border-radius: var(--r2); background: var(--card); transition: var(--tr) }
.prova.preview .radio-group .radio label { display: flex; align-items: center; gap: 14px; padding: 13px 16px; margin: 0; cursor: pointer; font-weight: 400 }
.prova.preview .radio-group .radio label::before { content: counter(alt, upper-alpha); flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--surface); color: var(--text-muted); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px }
.prova.preview .radio-group .radio input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0 }
.prova.preview .radio-group .radio:has(input:checked) { border-color: var(--crimson); background: rgba(33,87,52,.06) }
.prova.preview .radio-group .radio:has(input:checked) label::before { background: var(--crimson); color: #fff }
@media (max-width: 900px) {
.prova-online-layout { flex-direction: column }
.mapa-prova-sidebar { width: 100%; position: static }
}

/* Dashboard do aluno - vtx (adicionado) */
.vtx-dash { font-family: Inter, sans-serif; color: var(--text); max-width: 1180px; margin: 0 auto }
.vtx-hero { background: linear-gradient(135deg, var(--crimson-deep) 0%, #123B56 100%); border-radius: var(--r4); padding: 28px 32px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 20px }
.vtx-hero-main { flex: 1; min-width: 260px }
.vtx-hero-eyebrow { font-family: IBM Plex Mono, monospace; text-transform: uppercase; letter-spacing: .08em; font-size: 11.5px; color: #6EE7B7; margin: 0 0 6px; font-weight: 600 }
.vtx-hero-title { font-family: Fraunces, serif; color: #fff; font-size: 27px; font-weight: 600; margin: 0 0 10px; line-height: 1.3 }
.vtx-hero-title span { color: #34D399 }
.vtx-hero-sub { color: rgba(255,255,255,.72); font-size: 14.5px; margin: 0 0 18px }
.vtx-btn-primary { display: inline-flex; align-items: center; gap: 8px; background: var(--crimson); color: #fff; text-decoration: none; border-radius: var(--r2); padding: 12px 20px; font-weight: 700; font-size: 14.5px }
.vtx-btn-primary:hover { opacity: .9; color: #fff; text-decoration: none }
.vtx-hero-streak { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r3); padding: 18px 20px; min-width: 220px }
.vtx-streak-label { font-family: IBM Plex Mono, monospace; text-transform: uppercase; letter-spacing: .06em; font-size: 10.5px; color: rgba(255,255,255,.6); margin: 0 0 8px; font-weight: 600 }
.vtx-streak-num { display: flex; align-items: baseline; gap: 8px }
.vtx-streak-flame { font-size: 24px }
.vtx-streak-val { font-family: Fraunces, serif; font-size: 30px; color: #fff; font-weight: 700 }
.vtx-streak-unit { font-size: 11px; color: rgba(255,255,255,.6); line-height: 1.2 }
.vtx-streak-week { display: flex; gap: 6px; margin-top: 12px }
.vtx-streak-day { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.08); color: rgba(255,255,255,.5); font-size: 10.5px; font-weight: 700 }
.vtx-streak-day.active { background: var(--crimson); color: #fff }

.vtx-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 20px }
.vtx-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r3); padding: 20px; display: flex; align-items: center; gap: 14px; box-shadow: var(--sh1) }
.vtx-card-icon { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0 }
.vtx-ic-green { background: #E3F6EE; color: var(--crimson) }
.vtx-ic-amber { background: #FFF1DE; color: #C97A1E }
.vtx-ic-blue { background: #E7EEFC; color: var(--blue) }
.vtx-card-val { display: block; font-family: Fraunces, serif; font-size: 23px; color: var(--text); font-weight: 700 }
.vtx-card-lbl { display: block; font-size: 12.5px; color: var(--text-muted) }
.vtx-row-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-bottom: 16px }
.vtx-panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--r3); padding: 22px; box-shadow: var(--sh1) }
.vtx-panel-center { text-align: center; display: flex; flex-direction: column; align-items: center }
.vtx-panel h3 { font-family: Fraunces, serif; font-size: 18px; color: var(--text); margin: 0 0 4px; font-weight: 600 }
.vtx-panel-head { display: flex; justify-content: space-between; align-items: flex-start }
.vtx-panel-sub { font-size: 12.5px; color: var(--text-muted); margin: 0 0 14px }
.vtx-pill { font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 99px }
.vtx-pill-pos { background: #E3F6EE; color: var(--crimson) }
.vtx-pill-neg { background: #FCE8E6; color: #C0392B }
.vtx-gauge-meta { font-size: 13px; color: var(--text-muted); margin-top: 10px }
.vtx-areas { display: flex; flex-direction: column; gap: 14px; margin-top: 6px }
.vtx-area-row { display: grid; grid-template-columns: 90px 1fr 40px; align-items: center; gap: 10px }
.vtx-area-nome { font-size: 13px; font-weight: 700; color: var(--text) }
.vtx-area-bar { height: 9px; border-radius: 99px; background: var(--surface); overflow: hidden }
.vtx-area-fill { height: 100%; border-radius: 99px; background: var(--crimson) }
.vtx-area-pct { font-size: 12.5px; font-weight: 700; color: var(--text-muted); text-align: right }
.vtx-empty-txt { color: var(--text-faint); font-size: 13.5px }
.vtx-missoes { display: flex; flex-direction: column; gap: 10px; margin-top: 6px }
.vtx-missao { display: flex; align-items: center; gap: 14px; padding: 13px 14px 13px 20px; border-radius: var(--r2); background: var(--surface); border: 1px solid var(--border); text-decoration: none; color: inherit; position: relative }
.vtx-missao:hover { border-color: var(--crimson); text-decoration: none; color: inherit }
.vtx-missao-bar { position: absolute; left: 0; top: 6px; bottom: 6px; width: 4px; border-radius: 4px; background: var(--blue) }
.vtx-missao-info { display: flex; flex-direction: column; gap: 2px; flex: 1 }
.vtx-missao-info strong { font-size: 14px; color: var(--text) }
.vtx-missao-info span { font-size: 12px; color: var(--text-muted) }
.vtx-missao svg { color: var(--text-faint); flex-shrink: 0 }
.vtx-conquistas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 10px }
.vtx-conquista { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--r2); background: var(--surface) }
.vtx-conquista-bloq { opacity: .45 }
.vtx-conquista-icon { font-size: 22px }
.vtx-conquista strong { display: block; font-size: 13.5px; color: var(--text) }
.vtx-conquista span { display: block; font-size: 11.5px; color: var(--text-muted) }
.vtx-details { margin-top: 16px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r3); padding: 16px 20px }
.vtx-details summary { cursor: pointer; font-weight: 700; color: var(--text) }
@media (max-width: 900px) {
.vtx-hero { flex-direction: column }
.vtx-cards { grid-template-columns: 1fr }
.vtx-row-2 { grid-template-columns: 1fr }
.vtx-conquistas { grid-template-columns: 1fr 1fr }
}

/* Dashboard do admin - vxd (adicionado) */
.vxd-wrap { font-family: Inter, sans-serif; color: var(--text); max-width: 1280px; margin: 0 auto }
.vxd-topRow { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; flex-wrap: wrap; gap: 14px }
.vxd-greeting { font-size: 24px; font-weight: 700; margin: 0 0 4px; color: var(--text) }
.vxd-sub { color: var(--text-muted); font-size: 14px; margin: 0 }
.vxd-datePill { background: var(--card); border: 1px solid var(--border); border-radius: var(--r2); padding: 10px 16px; font-size: 13.5px; font-weight: 600; color: var(--text); box-shadow: var(--sh1) }
.vxd-cards-main { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 18px }
.vxd-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r3); padding: 18px; display: flex; align-items: center; gap: 14px; box-shadow: var(--sh1) }
.vxd-card-icon { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0 }
.vxd-ic-blue { background: #E5EEFD; color: #2563EB }
.vxd-ic-green { background: #E3F6EE; color: #16A34A }
.vxd-ic-orange { background: #FFF1DE; color: #EA7A17 }
.vxd-ic-purple { background: #F1E9FE; color: #8B5CF6 }
.vxd-ic-teal { background: #DFF6F3; color: #0D9488 }
.vxd-ic-cyan { background: #DFF4FB; color: #0891B2 }
.vxd-ic-indigo { background: #E6E7FE; color: #4F46E5 }
.vxd-ic-red { background: #FCE8E6; color: #DC2626 }
.vxd-card-info { display: flex; flex-direction: column }
.vxd-card-value { font-size: 21px; font-weight: 700; color: var(--text) }
.vxd-card-label { font-size: 12.5px; color: var(--text-muted) }
.vxd-mainGrid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; margin-bottom: 16px }
.vxd-panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--r3); padding: 20px; box-shadow: var(--sh1); margin-bottom: 16px }
.vxd-panel-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px }
.vxd-panel-head h3 { font-size: 16px; margin: 0 0 2px; color: var(--text); font-weight: 700 }
.vxd-panel-head p { font-size: 12.5px; color: var(--text-muted); margin: 0 }
.vxd-panel-link { font-size: 13px; font-weight: 700; color: var(--blue); text-decoration: none }
.vxd-panel-link:hover { text-decoration: underline }
.vxd-empty { color: var(--text-faint); font-size: 13.5px }
.vxd-chartWrap { width: 100% }
.vxd-chart { width: 100%; height: auto; display: block }
.vxd-chartLabels { display: flex; justify-content: space-between; margin-top: 6px; padding: 0 4px }
.vxd-chartLabels span { font-size: 11px; color: var(--text-faint) }
.vxd-miniStats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border) }
.vxd-miniStat { text-align: center }
.vxd-miniStat-value { display: block; font-size: 17px; font-weight: 700; color: var(--text) }
.vxd-miniStat-label { display: block; font-size: 11px; color: var(--text-muted); margin-top: 2px }

.vxd-activityList { display: flex; flex-direction: column; gap: 14px }
.vxd-activityItem { display: flex; align-items: center; gap: 12px }
.vxd-activityIcon { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 15px }
.vxd-activityInfo { display: flex; flex-direction: column; flex: 1; min-width: 0 }
.vxd-activityTitle { font-size: 13.5px; font-weight: 700; color: var(--text) }
.vxd-activitySub { font-size: 12px; color: var(--text-muted) }
.vxd-activityTime { font-size: 11.5px; color: var(--text-faint); white-space: nowrap }
.vxd-quickGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px }
.vxd-quickCard { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--r2); background: var(--surface); border: 1px solid var(--border); text-decoration: none; color: inherit; position: relative }
.vxd-quickCard:hover { border-color: var(--blue); text-decoration: none; color: inherit }
.vxd-quickTitle { display: block; font-size: 13.5px; font-weight: 700; color: var(--text) }
.vxd-quickSub { display: block; font-size: 11.5px; color: var(--text-muted) }
.vxd-quickArrow { margin-left: auto; color: var(--text-faint); flex-shrink: 0 }
.vxd-table { font-size: 13.5px }
.vxd-badge { font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 99px }
.vxd-badge-green { background: #E3F6EE; color: #16A34A }
.vxd-badge-orange { background: #FFF1DE; color: #EA7A17 }
.vxd-badge-blue { background: #E5EEFD; color: #2563EB }
@media (max-width: 1100px) {
.vxd-cards-main { grid-template-columns: 1fr 1fr }
.vxd-mainGrid { grid-template-columns: 1fr }
.vxd-quickGrid { grid-template-columns: 1fr 1fr }
}

.sidebar-wordmark { font-family: IBM Plex Mono, monospace; letter-spacing: .18em; font-size: 13px; font-weight: 600; color: #fff; margin-left: 10px }

/* Paginas sem sidebar (hideHeader true): remove reserva de espaco da aside vazia */
#wrap.no-sidebar #app-sidebar { display: none !important; }
#wrap.no-sidebar #main-content { margin-left: 0 !important; }

.navbar .btn.navbar-btn { background: var(--crimson); border-color: var(--crimson); color: #fff; font-weight: 600 }
.navbar .btn.navbar-btn:hover { background: var(--crimson-deep); border-color: var(--crimson-deep); color: #fff }
.navbar .navbar-brand { font-size: 17px; font-weight: 700; color: var(--text) }

/* ==========================================================================
   DANGER (contextuais Bootstrap) — unificado com a identidade visual
   ========================================================================== */
.text-danger { color: var(--danger) }
.bg-danger   { background-color: var(--danger-bg); color: var(--danger-text) }

.label-danger { background-color: var(--danger); color: #fff }
.label-danger[href]:hover, .label-danger[href]:focus { background-color: var(--danger-deep) }

.badge-danger { background-color: var(--danger); color: #fff }

.progress-bar-danger { background-color: var(--danger) }

.panel-danger { border-color: var(--danger-border) }
.panel-danger > .panel-heading { background-color: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-text) }

table tr.danger, table td.danger, .table-danger,
.table > tbody > tr.danger > td, .table > tbody > tr.danger > th,
.table > tbody > tr > td.danger, .table > tbody > tr > th.danger {
  background-color: var(--danger-bg) !important;
  color: var(--danger-text);
}
.table-hover > tbody > tr.danger:hover > td, .table-hover > tbody > tr.danger:hover > th,
.table-hover > tbody > tr:hover > td.danger, .table-hover > tbody > tr:hover > th.danger {
  background-color: #ffe4e4 !important;
}

.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active {
  background-color: var(--danger-deep); border-color: var(--danger-deep); color: #fff;
}