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

:root {
  --crimson:      #98151b;
  --crimson-deep: #7a1016;
  --sb-bg:        #1e2235;
  --sb-width:     248px;
  --sb-text:      rgba(255,255,255,.52);
  --sb-text-hi:   rgba(255,255,255,.93);
  --sb-hover:     rgba(255,255,255,.06);
  --sb-active:    rgba(59,91,219,.25);
  --sb-border:    rgba(255,255,255,.07);
  --surface:      #f5f6fa;
  --card:         #ffffff;
  --border:       #e4e7f0;
  --text:         #1e2235;
  --text-muted:   #6b7280;
  --text-faint:   #9ca3af;
  --blue:         #3b5bdb;
  --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: var(--sb-bg);
  display: flex; flex-direction: column;
  overflow: hidden;
  z-index: 1040;
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  box-shadow: 4px 0 28px rgba(0,0,0,.22);
}

/* 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;
  filter: brightness(0) invert(1); opacity: .88;
}

/* 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: #fff; 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(0,0,0,.2);
  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: #fff !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(255,255,255,.1) transparent;
}
.sidebar-nav-wrapper::-webkit-scrollbar { width: 4px }
.sidebar-nav-wrapper::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.12); 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: #fff !important;
  background: var(--sb-hover) !important;
  text-decoration: none !important; outline: none !important;
}
#app-sidebar ul.sidebar-nav > li.open > a {
  color: #fff !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: #fff2f2; border-color: #fca5a5; color: #7f1d1d }
.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: #c0392b; border-color: #c0392b; 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: #c0392b }
.help-block { font-size: 12px; color: #c0392b; 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: 1px solid var(--border) !important }
.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: #c0392b !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: #c0392b; 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: #c0392b; 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 }
}