/* =============================================================
   GT2025 — Layout: Sidebar + Topbar + Content
   Depende de gt2025-vars.css (deve ser carregado antes).
   ============================================================= */

/* ---- Override de fontes legadas (skin-*) ---- */
body,
p,
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  font-family: var(--font-body) !important;
}

/* ---- Reset de estrutura legada ---- */
.col-md-3.left_col,
.left_col { display: none !important; }

.top_nav { display: none !important; }

/* ---- Sidebar ---- */
.gt-sidebar {
  position:        fixed;
  left:            0;
  top:             0;
  bottom:          0;
  width:           var(--sidebar-width);
  background:      var(--gradient-sidebar);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  z-index:         1050;
  overflow:        visible;
}

.gt-sidebar-logo {
  padding:         14px 0 10px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           100%;
  border-bottom:   1px solid rgba(255,255,255,0.15);
  margin-bottom:   4px;
}

.gt-sidebar-logo img {
  width:       40px;
  height:      40px;
  object-fit:  contain;
}

/* nav items */
.gt-sidebar-nav {
  flex:     1;
  width:    100%;
  overflow: visible;
  padding:  6px 0;
}

.gt-sidebar-item {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  padding:         10px 4px 8px;
  margin:          2px 6px;
  color:           #fff !important;
  text-decoration: none !important;
  font-family:     var(--font-ui);
  font-size:       10px;
  font-weight:     600;
  text-align:      center;
  border-radius:   6px;
  cursor:          pointer;
  transition:      background 0.15s;
  line-height:     1.2;
}
.gt-sidebar-item i {
  font-size:    20px;
  margin-bottom: 4px;
  line-height:  1;
}
.gt-sidebar-item:hover,
.gt-sidebar-item.active {
  background: rgba(255,255,255,0.12);
}

/* grupo com flyout */
.gt-sidebar-group {
  position: relative;
}

.gt-sidebar-flyout {
  visibility:    hidden;
  position:      absolute;
  left:          calc(var(--sidebar-width) + 4px);
  top:           0;
  background:    var(--color-white);
  border-radius: 8px;
  box-shadow:    var(--shadow-card);
  min-width:     200px;
  z-index:       1060;
  padding:       6px 0;
  transition:    visibility 0s 0.2s;
  max-height:    calc(100vh - 16px);
  overflow-y:    auto;
}
/* flyout abre no hover — delay de 200ms no fechamento para cruzar o gap */
.gt-sidebar-group:hover .gt-sidebar-flyout {
  visibility:       visible;
  transition-delay: 0s;
}
.gt-sidebar-group:hover > .gt-sidebar-item {
  background: rgba(255,255,255,0.18);
}

.gt-sidebar-flyout-title {
  padding:        6px 14px 2px;
  font-size:      10px;
  font-weight:    700;
  color:          var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family:    var(--font-ui);
}
.gt-sidebar-flyout a {
  display:         block;
  padding:         9px 14px;
  color:           var(--color-text-dark) !important;
  font-family:     var(--font-ui);
  font-size:       13px;
  text-decoration: none !important;
  white-space:     nowrap;
}
.gt-sidebar-flyout a:hover {
  background: rgba(var(--primary-color-rgb), 0.08);
  color:      var(--primary-color) !important;
}
.gt-sidebar-flyout hr {
  margin: 4px 0;
  border-color: var(--color-border);
}

/* footer de ícones */
.gt-sidebar-footer {
  width:           100%;
  padding:         8px 0 12px;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             2px;
  border-top:      1px solid rgba(255,255,255,0.15);
}

/* ---- Topbar ---- */
.gt-topbar {
  position:         fixed;
  top:              0;
  left:             var(--sidebar-width);
  right:            0;
  height:           var(--topbar-height);
  background:       var(--color-white);
  box-shadow:       0 1px 4px rgba(0,0,0,0.10);
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  padding:          0 20px 0 16px;
  z-index:          1040;
}

.gt-topbar-title {
  font-family:    var(--font-title) !important;
  font-size:      15px;
  font-weight:    700;
  color:          var(--primary-color);
  letter-spacing: 0.2px;
  white-space:    nowrap;
}

.gt-topbar-left {
  display:     flex;
  align-items: center;
  gap:         16px;
}

.gt-topbar-right {
  display:     flex;
  align-items: center;
  gap:         4px;
  margin-left: auto;
}


/* botão de ícone na topbar */
.gt-topbar-btn {
  position:      relative;
  background:    none;
  border:        none;
  color:         #666;
  font-size:     18px;
  padding:       8px 10px;
  cursor:        pointer;
  border-radius: 8px;
  transition:    background 0.15s, color 0.15s;
  text-decoration: none !important;
  display:       flex;
  align-items:   center;
  justify-content: center;
}
.gt-topbar-btn:hover {
  background: rgba(var(--primary-color-rgb), 0.08);
  color:      var(--primary-color);
}
.gt-topbar-btn .gt-badge {
  position:      absolute;
  top:           4px;
  right:         4px;
  background:    var(--color-danger);
  color:         #fff;
  font-size:     9px;
  font-weight:   700;
  padding:       1px 4px;
  border-radius: 10px;
  min-width:     15px;
  text-align:    center;
  font-family:   var(--font-ui);
}

/* avatar */
.gt-avatar-btn {
  width:         36px;
  height:        36px;
  border-radius: 50%;
  overflow:      hidden;
  cursor:        pointer;
  border:        none;
  padding:       0;
  background:    none;
  box-shadow:    var(--shadow-avatar);
  flex-shrink:   0;
}
.gt-avatar-btn img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}

/* seletor de contrato */
.gt-contract-label {
  font-family:  var(--font-ui);
  font-size:    12px;
  color:        var(--color-text-muted);
  max-width:    480px;
  overflow:     hidden;
  white-space:  nowrap;
  text-overflow: ellipsis;
  cursor:       pointer;
  padding:      4px 8px;
  border-radius: 6px;
  border:       1px solid var(--color-border);
  text-decoration: none !important;
  display:      flex;
  align-items:  center;
  gap:          6px;
}
.gt-contract-label:hover {
  border-color: var(--primary-color);
  color:        var(--primary-color);
}

/* dropdown genérico da topbar */
.gt-topbar-dropdown {
  position:   relative;
  display:    inline-flex;
}
.gt-dropdown-menu {
  display:       none;
  position:      absolute;
  top:           100%;
  right:         0;
  background:    var(--color-white);
  border-radius: 8px;
  box-shadow:    var(--shadow-card);
  min-width:     280px;
  max-height:    380px;
  overflow-y:    auto;
  z-index:       1070;
  padding:       14px 0 6px;
}
.gt-topbar-dropdown:hover .gt-dropdown-menu,
.gt-topbar-dropdown.open .gt-dropdown-menu {
  display: block;
}
.gt-dropdown-header {
  padding:      8px 14px 4px;
  font-size:    11px;
  font-weight:  700;
  color:        var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family:  var(--font-ui);
}
.gt-dropdown-item {
  display:         block;
  padding:         10px 14px;
  font-family:     var(--font-ui);
  font-size:       13px;
  color:           var(--color-text-dark) !important;
  text-decoration: none !important;
  border-bottom:   1px solid rgba(var(--primary-color-rgb), 0.06);
}
.gt-dropdown-item:last-child { border-bottom: none; }
.gt-dropdown-item:hover {
  background: rgba(var(--primary-color-rgb), 0.06);
}
.gt-dropdown-item .gt-di-label {
  font-size:   11px;
  color:       var(--primary-color);
  font-weight: 600;
  display:     block;
  margin-bottom: 2px;
}
.gt-dropdown-item .gt-di-text {
  color:     #555;
  display:   block;
  font-size: 12px;
}
.gt-dropdown-item .gt-di-time {
  color:     var(--color-text-muted);
  font-size: 11px;
}
.gt-dropdown-footer {
  padding:     8px 14px;
  text-align:  center;
  font-size:   12px;
  font-family: var(--font-ui);
}
.gt-dropdown-footer a {
  color:           var(--primary-color);
  text-decoration: none;
  font-weight:     600;
}

/* ---- Área principal de conteúdo ---- */
.right_col {
  margin-left: var(--sidebar-width) !important;
  margin-top:  var(--topbar-height) !important;
  padding:     24px !important;
  background:  var(--color-bg-page) !important;
  min-height:  calc(100vh - var(--topbar-height));
  /* remove float legado */
  float:       none !important;
  width:       auto !important;
}

/* remove padding/margin/max-width do container body legado */
.container.body,
.main_container {
  padding:   0 !important;
  margin:    0 !important;
  max-width: 100% !important;
  width:     100% !important;
}

/* =============================================================
   GT2025 — Fase 3: Conteúdo das páginas
   ============================================================= */

/* ---- Header antigo de detalhe (.header-title-breadcrumb) → gt-page-header ---- */
.header-title-breadcrumb {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   20px;
  box-shadow:      none !important;
  background:      transparent !important;
  padding:         0 !important;
}
.header-title-breadcrumb .container { padding: 0; width: 100%; }
.header-title-breadcrumb h3 {
  font-family: var(--font-title);
  font-size:   20px;
  font-weight: 600;
  color:       var(--color-text-dark);
  margin:      0;
}
.header-title-breadcrumb .breadcrumb {
  background:  transparent;
  padding:     0;
  margin:      0;
  font-family: var(--font-ui);
  font-size:   13px;
}
.header-title-breadcrumb .breadcrumb a {
  color:           var(--primary-color);
  text-decoration: none;
}



/* ---- Cabeçalho de página ---- */
.gt-page-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   20px;
}
.gt-page-header h2,
.gt-page-title {
  font-family:  var(--font-title);
  font-size:    20px;
  font-weight:  600;
  color:        var(--color-text-dark);
  margin:       0;
}
.gt-page-header .gt-page-actions { display: flex; gap: 8px; }

/* ---- Bootstrap 3: .panel.panel-* → GT2025 card ---- */
.panel.panel-default,
.panel.panel-white,
.panel.panel-cryptic,
.panel.create-event,
.panel.element-box-shadow {
  background:    var(--color-white) !important;
  border-radius: var(--radius-card) !important;
  box-shadow:    var(--shadow-card) !important;
  border:        none !important;
  margin-bottom: 20px;
}
.panel-heading {
  background:    transparent !important;
  border-bottom: 1px solid var(--color-border) !important;
  padding:       18px 24px !important;
  border-radius: var(--radius-card) var(--radius-card) 0 0 !important;
}
.panel-heading h3,
.panel-heading .panel-title {
  font-family: var(--font-title);
  font-size:   18px;
  font-weight: 600;
  color:       var(--color-text-dark);
  margin:      0;
}
.panel-body {
  padding: 20px 24px !important;
}
.panel-footer {
  background:  transparent !important;
  border-top:  1px solid var(--color-border) !important;
  padding:     12px 24px !important;
}

/* ---- Seção de filtros ---- */
.row[style*="padding:15px"] {
  padding-top: 16px !important;
  padding-bottom: 8px !important;
}
.row[style*="padding:15px"] .form-group {
  margin-bottom: 12px;
}
.row[style*="padding:15px"] label.control-label {
  font-family:  var(--font-ui);
  font-size:    12px;
  font-weight:  600;
  color:        var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
}

/* ---- Botões — alinha ao design system ---- */
.btn-primary {
  background-color: var(--primary-color) !important;
  border-color:     var(--primary-color) !important;
  font-family:      var(--font-ui) !important;
  font-weight:      600 !important;
  border-radius:    var(--radius-btn) !important;
}
.btn-success {
  background-color: var(--color-success) !important;
  border-color:     var(--color-success) !important;
  font-family:      var(--font-ui) !important;
  font-weight:      600 !important;
  border-radius:    var(--radius-btn) !important;
}
.btn-danger {
  background-color: var(--color-danger) !important;
  border-color:     var(--color-danger) !important;
  font-family:      var(--font-ui) !important;
  font-weight:      600 !important;
  border-radius:    var(--radius-btn) !important;
}
.btn-default,
.btn-secondary {
  border-radius: var(--radius-btn) !important;
  font-family:   var(--font-ui) !important;
  font-weight:   600 !important;
}

/* ---- Labels/badges legados (Bootstrap 3: .label-*) ---- */
.label {
  border-radius: var(--radius-badge);
  padding:       3px 9px;
  font-size:     11px;
  font-family:   var(--font-ui);
  font-weight:   600;
}
.label-success { background: var(--color-success) !important; color: #fff !important; }
.label-danger  { background: var(--color-danger)  !important; color: #fff !important; }
.label-info    { background: var(--color-info)    !important; color: #fff !important; }
.label-warning { background: var(--color-warning) !important; color: #fff !important; }
.label-primary { background: var(--primary-color) !important; color: #fff !important; }
.label-default { background: var(--color-bg-light)!important; color: var(--color-text-dark) !important; }

/* ---- Tabelas ---- */
.table thead th {
  font-family:    var(--font-ui);
  font-size:      12px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color:          var(--color-text-muted);
  border-bottom:  2px solid var(--color-border) !important;
  padding:        10px 12px !important;
}
.table tbody td {
  font-family:   var(--font-body);
  font-size:     13px;
  padding:       10px 12px !important;
  vertical-align: middle !important;
  border-bottom: 1px solid var(--color-bg-light) !important;
}
.table tbody tr:hover {
  background: rgba(var(--primary-color-rgb), 0.04) !important;
}
.table.table-cryptic,
.table.dataTable { border-collapse: collapse !important; }

/* ---- Alertas de retorno (sucesso/erro pós-ação) ---- */
.alert {
  border-radius:  var(--radius-card) !important;
  border:         none !important;
  border-left:    4px solid !important;
  padding:        14px 40px 14px 52px !important;
  position:       relative !important;
  box-shadow:     0 2px 8px rgba(0,0,0,0.06) !important;
}
/* ícone via ::before (FontAwesome) */
.alert::before {
  font-family:  'FontAwesome';
  font-size:    20px;
  position:     absolute;
  left:         16px;
  top:          50%;
  transform:    translateY(-50%);
  line-height:  1;
}
.alert-success {
  background:    rgba(60, 181, 123, 0.10) !important;
  border-color:  var(--color-success) !important;
  color:         #1a6b46 !important;
}
.alert-success::before {
  content: '\f058';
  color:   var(--color-success);
}
.alert-danger {
  background:    rgba(220, 53, 69, 0.08) !important;
  border-color:  var(--color-danger) !important;
  color:         #7a0020 !important;
}
.alert-danger::before {
  content: '\f057';
  color:   var(--color-danger);
}
.alert-warning {
  background:    rgba(255, 152, 0, 0.08) !important;
  border-color:  var(--color-warning) !important;
  color:         #7a4500 !important;
}
.alert-warning::before {
  content: '\f071';
  color:   var(--color-warning);
}
.alert-info {
  background:    rgba(33, 150, 243, 0.08) !important;
  border-color:  #2196f3 !important;
  color:         #0d47a1 !important;
}
.alert-info::before {
  content: '\f05a';
  color:   #2196f3;
}
/* título e texto */
.alert h3 {
  font-family:   var(--font-title);
  font-size:     14px;
  font-weight:   700;
  margin-bottom: 2px;
  color:         inherit !important;
}
.alert p {
  font-size:  13px;
  margin:     0 !important;
  color:      inherit !important;
}
.alert strong,
.alert b {
  font-size:   inherit;
  font-weight: 600;
}
/* botão fechar */
.alert .close {
  position:  absolute !important;
  top:       10px !important;
  right:     12px !important;
  color:     inherit !important;
  opacity:   0.5 !important;
  font-size: 18px !important;
}
.alert .close:hover { opacity: 1 !important; }

/* ---- Separadores de seção ---- */
hr.gt-section-divider {
  border:        0;
  border-top:    1px solid #e5e7eb;
  margin-top:    1.5rem;
  margin-bottom: 1.5rem;
}

/* ---- Cards do Dashboard (card-recurso-dash) ---- */
.card-recurso-dash {
  background:    var(--color-white);
  border-radius: var(--radius-card);
  box-shadow:    var(--shadow-card);
  padding:       20px 20px 16px;
  flex:          1 1 220px;
  min-width:     0;
  position:      relative;
  overflow:      hidden;
}
.card-recurso-dash::before {
  content:       '';
  position:      absolute;
  left:          0;
  top:           0;
  bottom:        0;
  width:         5px;
}
.card-recurso-dash .card-header {
  background:    transparent !important;
  border-bottom: 1px solid var(--color-border) !important;
  padding:       0 0 12px !important;
  margin-bottom: 8px;
}
.card-recurso-dash .card-header h4 {
  font-family: var(--font-title);
  font-size:   15px;
  font-weight: 600;
  color:       var(--primary-color);
  margin:      0;
}

/* Status rows dentro dos cards do dashboard */
.status-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         9px 0;
  border-bottom:   1px solid var(--color-bg-light);
  text-decoration: none !important;
  transition:      background 0.12s;
}
.status-row:last-of-type { border-bottom: none; }
.status-row:hover { background: rgba(var(--primary-color-rgb), 0.04); border-radius: 6px; padding-left: 4px; }

.status-main { display: flex; flex-direction: column; }
.status-count {
  font-size:   2.0rem !important;
  font-weight: 700;
  font-family: var(--font-title);
  line-height: 1;
}
.status-label {
  font-family: var(--font-ui);
  font-size:   11px;
  font-weight: 600;
  margin-top:  2px;
}
.status-percentage {
  font-family: var(--font-title);
  font-size:   17px;
  font-weight: 700;
}

/* Cores semânticas por tipo de status — sobrescreve inline styles */
.status-row.apto   .status-count,
.status-row.apto   .status-label,
.status-row.apto   .status-percentage { color: var(--color-success) !important; }

.status-row.ressalva .status-count,
.status-row.ressalva .status-label,
.status-row.ressalva .status-percentage { color: var(--color-warning) !important; }

.status-row.inaptos .status-count,
.status-row.inaptos .status-label,
.status-row.inaptos .status-percentage { color: var(--color-danger) !important; }

/* Total section — alinhado como status-row */
.total-section {
  display:          flex;
  flex-direction:   row-reverse;
  align-items:      center;
  justify-content:  space-between;
  padding:          10px 0 2px;
  border-top:       2px solid var(--color-border);
  margin-top:       6px;
}
.total-section h4.total {
  font-family: var(--font-title);
  font-size:   28px;
  font-weight: 700;
  color:       var(--primary-color);
  line-height: 1;
  margin:      0;
}
.total-section p {
  font-family:    var(--font-ui);
  font-size:      11px;
  font-weight:    600;
  color:          var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin:         0;
}

/* Coluna que alinha título + cards */
.gt-dash-section {
  display:        flex;
  flex-direction: column;
  width:          100%;
}

/* Wrapper dos cards do dashboard — sem fundo externo */
.gt-dash-cards-wrapper {
  display:     flex;
  flex-wrap:   wrap;
  gap:         16px;
  padding:     16px 0 0;
  align-items: stretch;
}

/* Título da seção — clean, só linha inferior */
.gt-dash-section-header {
  width: 100%;
}
.gt-dash-section-title {
  font-family:   var(--font-title);
  font-size:     15px;
  font-weight:   600;
  color:         var(--color-text-dark);
  padding:       0 0 10px;
  margin:        0 0 4px;
  border-bottom: 2px solid #e0e2e3;
  display:       block;
  width:         100%;
}

/* =============================================================
   GT2025 — Fase 3b: Formulários, Settings, Support, Register
   ============================================================= */

/* ---- Formulários internos ---- */
.form-horizontal .control-label,
label.control-label {
  font-family:    var(--font-ui) !important;
  font-size:      12px !important;
  font-weight:    600 !important;
  color:          var(--color-text-muted) !important;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding-left:   0 !important;
  margin-bottom:  4px;
}
.form-group { margin-bottom: 16px; }

/* ---- Input file ---- */
input[type="file"] {
  width:       100%;
  box-sizing:  border-box;
  font-family: var(--font-ui);
  font-size:   12px;
  color:       var(--color-text-muted);
  background:  var(--color-bg-page);
  border:      1px solid var(--color-border);
  border-radius: 6px;
  padding:     5px 8px;
  cursor:      pointer;
  overflow:    hidden;
  transition:  border-color 0.15s;
}
input[type="file"]:hover {
  border-color: var(--primary-color);
}
input[type="file"]::file-selector-button {
  font-family:  var(--font-ui);
  font-size:    11px;
  font-weight:  600;
  background:   var(--primary-color);
  color:        #fff;
  border:       none;
  border-radius: 4px;
  padding:      4px 12px;
  margin-right: 10px;
  cursor:       pointer;
  transition:   background 0.15s;
}
input[type="file"]::file-selector-button:hover {
  background: rgba(var(--primary-color-rgb), 0.82);
}

/* Botão de submit principal dentro de painéis */
.form-control-event[type="submit"],
input.btn.button-element[type="submit"] {
  background:    var(--primary-color) !important;
  border-color:  var(--primary-color) !important;
  color:         #fff !important;
  font-family:   var(--font-ui) !important;
  font-weight:   600 !important;
  border-radius: var(--radius-btn) !important;
  padding:       10px 24px !important;
}

/* Botão de toggle (settings: 2fa) */
.btn-toggle {
  border-radius: 20px !important;
}

/* ---- Modal GT2025 ---- */
.modal-content {
  border-radius: var(--radius-card) !important;
  border:        none !important;
  box-shadow:    var(--shadow-card) !important;
}
.modal-header {
  border-bottom: 1px solid var(--color-border) !important;
  padding:       16px 20px !important;
}
.modal-header .modal-title {
  font-family: var(--font-title) !important;
  font-size:   16px !important;
  font-weight: 600 !important;
}
.modal-footer {
  border-top: 1px solid var(--color-border) !important;
  padding:    12px 20px !important;
}

/* ---- Paginação ---- */
.box-pagination { padding: 12px 24px; }
.box-pagination .text-muted { font-family: var(--font-ui); font-size: 13px; }
.pagination > li > a,
.pagination > li > span {
  color:         var(--primary-color);
  border-radius: var(--radius-btn) !important;
  font-family:   var(--font-ui);
  font-size:     13px;
}
.pagination > .active > a,
.pagination > .active > span {
  background-color: var(--primary-color) !important;
  border-color:     var(--primary-color) !important;
  color:         var(--color-white) !important;
}

/* ---- Documentos Técnicos ---- */
.gt-doc-divider {
  border:     1px solid var(--color-border) !important;
  margin-top: 24px !important;
  margin-bottom: 20px !important;
}
.gt-doc-section-title {
  font-family: var(--font-title);
  font-size:   16px;
  font-weight: 600;
  color:       var(--color-text-dark);
  margin-bottom: 16px;
}


/* ---- Crachá: flip-card e card visual ---- */
.box-card {
  display:         flex;
  justify-content: center;
  padding:         24px 0;
  gap:             32px;
  flex-wrap:       wrap;
}

/* Override do background hardcoded #3D78AE → primary-color */
.card.cracha.position-relative {
  background-color: var(--primary-color) !important;
}

.flip-card {
  width:       200px;
  height:      320px;
  perspective: 800px;
}
.flip-card-inner {
  position:         relative;
  width:            100%;
  height:           100%;
  transition:       transform 0.6s;
  transform-style:  preserve-3d;
}
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
  position:           absolute;
  width:              100%;
  height:             100%;
  backface-visibility: hidden;
  border-radius:      var(--radius-card);
  overflow:           hidden;
  box-shadow:         var(--shadow-card);
}
.flip-card-back {
  transform: rotateY(180deg);
}
.card.cracha {
  height:        100%;
  border-radius: var(--radius-card) !important;
}

/* ---- Página de Register (sem sidebar/topbar) ---- */
#register-page {
  background: #0E5554;
  min-height: 100vh;
  display:    flex;
  align-items: center;
  justify-content: center;
}
#register-page .right_col {
  margin-left: 0 !important;
  margin-top:  0 !important;
  padding:     40px 16px !important;
  background:  transparent !important;
  min-height:  unset;
  width:       100% !important;
}
#register-page .panel.panel-default {
  max-width:     900px;
  margin:        0 auto;
  border-radius: var(--radius-login-card) !important;
  box-shadow:    0px 0px 17px -6px #000000 !important;
  overflow:      hidden;
}
#register-page .panel-body {
  padding: 32px 40px !important;
}
#register-page label {
  font-family: var(--font-ui) !important;
  font-size:   13px !important;
  font-weight: 600 !important;
  color:       #fff !important;
}
#register-page input:not([type="hidden"]),
#register-page select {
  border-radius: var(--radius-input) !important;
  border:        1px solid rgba(255,255,255,0.3) !important;
  background:    rgba(255,255,255,0.12) !important;
  color:         #fff !important;
  padding:       8px 12px;
  width:         100%;
}
#register-page input::placeholder { color: rgba(255,255,255,0.5); }
#register-page .panel-default {
  background: var(--primary-color) !important;
}
#register-page #btnCriarConta {
  background:    #fff !important;
  color:         var(--primary-color) !important;
  font-family:   var(--font-title) !important;
  font-weight:   700 !important;
  border-radius: var(--radius-btn) !important;
  border:        none !important;
  padding:       10px 32px !important;
  font-size:     15px !important;
}
#register-page #btnCriarConta:hover {
  background: rgba(255,255,255,0.9) !important;
}

/* ---- SweetAlert2 — design system override ---- */
.swal2-popup {
  font-family:   var(--font-body) !important;
  border-radius: var(--radius-card) !important;
  box-shadow:    0 8px 32px rgba(0,0,0,0.18) !important;
  padding:       2em 2em 1.6em !important;
}
.swal2-title {
  font-family: var(--font-title) !important;
  font-size:   1.3em !important;
  font-weight: 700 !important;
  color:       var(--color-text-main) !important;
}
.swal2-content,
.swal2-html-container {
  font-family: var(--font-body) !important;
  font-size:   0.95em !important;
  color:       var(--color-text-muted) !important;
}
/* Confirm button — primary color */
.swal2-confirm.swal2-styled,
.swal2-confirm {
  display:          inline-flex !important;
  align-items:      center !important;
  justify-content:  center !important;
  background-color: var(--primary-color) !important;
  border:           none !important;
  border-left:      none !important;
  border-right:     none !important;
  border-radius:    var(--radius-btn) !important;
  font-family:      var(--font-ui) !important;
  font-weight:      600 !important;
  font-size:        0.9em !important;
  padding:          8px 28px !important;
  line-height:      1.4 !important;
  box-shadow:       none !important;
  outline:          none !important;
}
.swal2-confirm.swal2-styled:hover,
.swal2-confirm:hover {
  background-color: rgba(var(--primary-color-rgb), 0.85) !important;
}
/* Cancel button — neutral (sem display para não sobrescrever display:none do swal) */
.swal2-cancel.swal2-styled:not([style*="display: none"]),
.swal2-cancel:not([style*="display: none"]) {
  align-items:      center !important;
  justify-content:  center !important;
  background-color: #6c757d !important;
  border:           none !important;
  border-radius:    var(--radius-btn) !important;
  font-family:      var(--font-ui) !important;
  font-weight:      600 !important;
  font-size:        0.9em !important;
  padding:          8px 28px !important;
  line-height:      1.4 !important;
  box-shadow:       none !important;
}
/* Icon colors already handled by swal2 — just ensure sizing */
.swal2-icon {
  margin: 0.8em auto 1em !important;
}
/* Input inside swal (e.g. textarea) */
.swal2-input,
.swal2-textarea {
  font-family:   var(--font-body) !important;
  border-radius: var(--radius-input) !important;
  border:        1px solid var(--color-border) !important;
  font-size:     0.9em !important;
}
.swal2-input:focus,
.swal2-textarea:focus {
  border-color: var(--primary-color) !important;
  box-shadow:   0 0 0 3px rgba(var(--primary-color-rgb), 0.15) !important;
}
.swal2-buttonswrapper {
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 1.2em !important;
}

/* ---- Scrollbar — design system ---- */
::-webkit-scrollbar {
  width:  7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: var(--color-bg-page);
}
::-webkit-scrollbar-thumb {
  background:    rgba(var(--primary-color-rgb), 0.35);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--primary-color-rgb), 0.65);
}
/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--primary-color-rgb), 0.35) var(--color-bg-page);
}

/* ---- Scroll to top ---- */
.scrollToTop {
  position:        fixed;
  bottom:          24px;
  right:           24px;
  width:           38px;
  height:          38px;
  background:      var(--primary-color);
  color:           #fff !important;
  border-radius:   50%;
  display:         none;
  align-items:     center;
  justify-content: center;
  font-size:       15px;
  box-shadow:      0 4px 14px rgba(var(--primary-color-rgb), 0.4);
  text-decoration: none !important;
  z-index:         1080;
  transition:      background 0.15s, box-shadow 0.15s, transform 0.15s;
}
.scrollToTop:hover {
  background:  rgba(var(--primary-color-rgb), 0.85);
  box-shadow:  0 6px 18px rgba(var(--primary-color-rgb), 0.5);
  transform:   translateY(-2px);
  color:       #fff !important;
}
.scrollToTop[style*="display: inline"],
.scrollToTop[style*="display:inline"],
.scrollToTop[style*="display: block"],
.scrollToTop[style*="display:block"] {
  display: flex !important;
}

/* ---- Footer ---- */
footer {
  box-shadow:  0 -1px 4px rgba(0,0,0,0.08);
  border-top:  1px solid var(--color-border);
  background:  var(--color-white);
  font-family: var(--font-ui);
  font-size:   12px;
  color:       var(--color-text-muted);
  padding:     12px 20px;
}

/* ============================================================
   GT Digital Assistant — TourTip override (todas as páginas)
   ============================================================ */
.TourTip .TourTipContent {
    background: #fff !important;
    border: none !important;
    border-radius: 20px !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.16) !important;
    padding: 18px 18px 10px !important;
}
.TourTip .TourTipTitle,
.TourTip .TourTipDesc { display: none !important; }
.TourTip .TourTipExternalContent { display: block !important; }
.TourTip .TourTipBottomNub { border-top-color:   #fff !important; }
.TourTip .TourTipTopNub    { border-bottom-color: #fff !important; }
.TourTip .TourTipLeftNub   { border-right-color:  #fff !important; }
.TourTip .TourTipRightNub  { border-left-color:   #fff !important; }
.TourTip .TourTipButton {
    background: var(--primary-color) !important;
    font-family: Montserrat, sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    border: none !important;
    box-shadow: 0 3px 10px rgba(var(--primary-color-rgb), 0.4) !important;
    padding: 7px 20px !important;
    transition: all 0.2s !important;
    letter-spacing: 0.3px !important;
}
.TourTip .TourTipButton:hover {
    opacity: 0.88 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 5px 14px rgba(var(--primary-color-rgb), 0.45) !important;
}
.TourTip .TourTipButtonsHolder {
    margin-top: 8px;
    border-top: 1px solid #eef4f6;
    padding-top: 10px;
}
.TourTip .TourTipCloseIcon {
    top: 12px !important;
    right: 12px !important;
    opacity: 0.4;
    transition: opacity 0.2s;
}
.TourTip .TourTipCloseIcon:hover { opacity: 0.8; }
.TourTipCover {
    background-color: transparent !important;
    box-shadow: 0 0 0 3px var(--primary-color), 0 0 28px rgba(var(--primary-color-rgb), 0.3) !important;
    border-radius: 6px !important;
}
.TourTipDisabledArea { background-color: rgba(15,40,55,0.45) !important; }

.gt-assistant-widget {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
    width: 100%;
}
.gt-assistant-avatar {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding-top: 4px;
}
.gt-bot-img {
    width: 72px;
    height: auto;
    animation: gt-bot-float 3s ease-in-out infinite;
    filter: drop-shadow(0 6px 12px rgba(63,138,159,0.3));
}
.gt-bot-status {
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(34,197,94,0.2);
    animation: gt-pulse 1.8s ease-in-out infinite;
}
.gt-speech-bubble {
    background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.07) 0%, rgba(var(--primary-color-rgb), 0.03) 100%);
    border-radius: 0 18px 18px 18px;
    padding: 13px 16px 11px;
    position: relative;
    border-left: 3px solid var(--primary-color);
    flex: 1;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}
.gt-speech-bubble::before {
    content: '';
    position: absolute;
    left: -9px;
    top: 0;
    border-right: 9px solid rgba(var(--primary-color-rgb), 0.07);
    border-bottom: 9px solid transparent;
}
.gt-bubble-tag {
    font-family: Montserrat, sans-serif;
    font-size: 10px;
    font-weight: 700;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 0.7px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.gt-bubble-dot {
    width: 7px;
    height: 7px;
    background: #22c55e;
    border-radius: 50%;
    flex-shrink: 0;
    animation: gt-pulse 1.8s ease-in-out infinite;
}
.gt-bubble-title {
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: #1a3a45;
    margin-bottom: 5px;
}
.gt-bubble-text {
    font-family: Montserrat, sans-serif;
    font-size: 13px;
    color: #4a6572;
    line-height: 1.6;
}
.gt-bubble-text strong { color: var(--primary-color); font-weight: 700; }
@keyframes gt-bot-float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    30%       { transform: translateY(-7px) rotate(-1.5deg); }
    70%       { transform: translateY(-4px) rotate(1deg); }
}
@keyframes gt-pulse {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%       { opacity: 0.4; transform: scale(0.75); }
}