/* =====================================================================
   PERFEX RESKIN — linguagem visual Lightning
   Versão: 2.0  |  Data: 19 de agosto de 2026
   Substitui a v1.0 (paleta azul genérica, cantos de 12px, sombras suaves).

   ONDE SE COLA
   Setup → Settings → Theme Style → "Custom CSS for Admin Area".
   Guardar. Recarregar a página. Não toca em nenhum ficheiro do Perfex,
   logo sobrevive a atualizações e desfaz-se apagando o campo.

   PORQUE MUDOU DA v1
   A v1 era "SaaS suave": cantos de 12px, sombras generosas, muito espaço.
   Bonito, mas não é a linguagem do Salesforce. O Lightning é o contrário —
   denso, cantos de 4px, sombras quase invisíveis, cinzentos quentes. Esta
   versão usa a paleta oficial do Lightning Design System, a mesma do
   Perfex_Lightning_Mockup_v2.html.

   SELETORES VERIFICADOS CONTRA O CÓDIGO-FONTE
   Lidos do Perfex_CRM_v3.4.0_source.zip, não adivinhados:
     aside#menu.sidebar > ul#side-menu.nav.metis-menu   (menu lateral)
     li.menu-item-{slug} > a > .menu-icon + .menu-text
     ul.nav-second-level                                 (submenus)
     .panel_s                                            (121 usos — o cartão)
     header#header, #top_search, .sidebar-user-profile

   NOTA IMPORTANTE SOBRE O PERFEX 3.4
   Já traz Tailwind com prefixo `tw-`. As classes `tw-*` no HTML não são
   nossas e não devem ser combatidas — onde o Perfex já usa Tailwind, o
   resultado já é moderno. Este ficheiro trata da metade legada, que é
   Bootstrap 3, e é essa que faz o painel parecer de 2014.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Tokens — paleta oficial do Lightning Design System
   --------------------------------------------------------------------- */
:root {
  --lx-brand:        #0176D3;
  --lx-brand-dark:   #014486;
  --lx-brand-darker: #032D60;
  --lx-brand-light:  #57A3FA;

  /* Os cinzentos do Lightning são QUENTES (#FAFAF9, #DDDBDA), não frios.
     É a diferença mais difícil de ver e a que mais muda a sensação. */
  --lx-bg:        #F3F3F3;
  --lx-card:      #FFFFFF;
  --lx-alt:       #FAFAF9;
  --lx-border:    #DDDBDA;
  --lx-border-2:  #C9C7C5;
  --lx-border-soft:#ECEBEA;

  --lx-text:      #181818;
  --lx-text-2:    #3E3E3C;
  --lx-text-3:    #514F4D;
  --lx-muted:     #706E6B;

  --lx-ok:        #2E844A;
  --lx-ok-bg:     #CDEFC4;
  --lx-warn:      #FE9339;
  --lx-warn-bg:   #FEF1E1;
  --lx-bad:       #BA0517;
  --lx-bad-bg:    #FEDED7;
  --lx-info-bg:   #CFE6F8;

  /* 4px. Não 12px. É o detalhe que mais separa "app de trabalho" de
     "landing page". */
  --lx-r:    .25rem;
  --lx-r-md: .5rem;

  --lx-sh-1: 0 1px 1px rgba(0,0,0,.05);
  --lx-sh-2: 0 2px 4px rgba(0,0,0,.10);
  --lx-sh-3: 0 4px 12px rgba(0,0,0,.16);

  --lx-font: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
             "Helvetica Neue", Arial, sans-serif;
}

/* ---------------------------------------------------------------------
   2. Base
   --------------------------------------------------------------------- */
body, .table, .form-control, .panel_s, .btn, .nav, .breadcrumb,
.label, .badge, .dropdown-menu, .modal-content {
  font-family: var(--lx-font) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--lx-bg) !important;
  color: var(--lx-text);
  font-size: 13px;
  line-height: 1.5;
}

h1,h2,h3,h4,h5,h6 { color: var(--lx-text); font-weight: 600; letter-spacing: -.01em; }
a { color: var(--lx-brand); }
a:hover, a:focus { color: var(--lx-brand-dark); }

/* ---------------------------------------------------------------------
   3. Barra de topo
   Branca com uma linha fina. No Lightning o topo não compete com nada —
   quem tem cor é a navegação.
   --------------------------------------------------------------------- */
header#header,
header#header .navbar-default {
  background: var(--lx-card) !important;
  border: none !important;
  border-bottom: 1px solid var(--lx-border) !important;
  box-shadow: var(--lx-sh-1) !important;
}
header#header .navbar-nav > li > a { color: var(--lx-text-2) !important; }
header#header .navbar-nav > li > a:hover { background: var(--lx-alt) !important; }

#top_search input,
#top_search .form-control {
  background: var(--lx-alt) !important;
  border: 1px solid var(--lx-border) !important;
  border-radius: var(--lx-r) !important;
  height: 34px !important;
}
#top_search input:focus {
  background: var(--lx-card) !important;
  border-color: var(--lx-brand) !important;
  box-shadow: 0 0 3px var(--lx-brand) !important;
}

/* ---------------------------------------------------------------------
   4. Menu lateral — a mudança que mais se nota
   Azul escuro da marca, item ativo em azul vivo com barra à esquerda.
   É o equivalente à barra de aplicação do Lightning.
   --------------------------------------------------------------------- */
aside#menu,
aside#menu.sidebar,
#side-menu {
  background: var(--lx-brand-darker) !important;
  border-right: none !important;
}

#side-menu > li > a,
aside#menu .metis-menu > li > a {
  color: rgba(255,255,255,.82) !important;
  font-weight: 500;
  font-size: 13px;
  padding: 10px 16px !important;
  border-left: 3px solid transparent !important;
  transition: background .12s ease, color .12s ease;
}
#side-menu > li > a:hover,
aside#menu .metis-menu > li > a:hover {
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
}
#side-menu > li.active > a,
aside#menu .metis-menu > li.active > a {
  background: var(--lx-brand) !important;
  color: #fff !important;
  border-left-color: #fff !important;
}
#side-menu .menu-icon,
aside#menu .menu-icon { color: rgba(255,255,255,.6) !important; width: 18px; text-align: center; }
#side-menu > li.active > a .menu-icon,
#side-menu > li > a:hover .menu-icon { color: #fff !important; }

/* Submenus: fundo ligeiramente mais escuro, para se lerem como "dentro de". */
#side-menu .nav-second-level,
aside#menu .nav-second-level { background: rgba(0,0,0,.18) !important; }
#side-menu .nav-second-level > li > a,
aside#menu .nav-second-level > li > a {
  color: rgba(255,255,255,.66) !important;
  padding: 8px 16px 8px 46px !important;
  font-size: 12.5px;
}
#side-menu .nav-second-level > li > a:hover,
#side-menu .nav-second-level > li.active > a { color: #fff !important; background: rgba(255,255,255,.07) !important; }

aside#menu .sidebar-user-profile a { color: rgba(255,255,255,.9) !important; }
aside#menu .menu-badge, aside#menu .badge { border-radius: 999px !important; }

/* ---------------------------------------------------------------------
   5. Cartões — .panel_s é a classe que o Perfex usa em 121 sítios.
   A v1 não lhe tocava, e era por isso que quase nada mudava de aspeto.
   --------------------------------------------------------------------- */
.panel_s,
.panel, .panel-default, .widget {
  background: var(--lx-card) !important;
  border: 1px solid var(--lx-border) !important;
  border-radius: var(--lx-r) !important;
  box-shadow: var(--lx-sh-1) !important;
}
.panel_s > .panel-body,
.panel-body { padding: 16px !important; }

.panel-heading,
.panel-default > .panel-heading {
  background: var(--lx-alt) !important;
  border-bottom: 1px solid var(--lx-border) !important;
  padding: 12px 16px !important;
  font-weight: 600;
  font-size: 13px;
  color: var(--lx-text);
}
.panel-title { font-weight: 600 !important; font-size: 14px !important; }
.panel-footer { background: var(--lx-alt) !important; border-top: 1px solid var(--lx-border) !important; }
.hr-panel-separator { border-color: var(--lx-border-soft) !important; }

/* Números grandes do dashboard */
.top_stats_widget .num, .widget .num, .widget-info h3 {
  font-size: 26px !important;
  font-weight: 700 !important;
  color: var(--lx-brand-dark) !important;
  letter-spacing: -.02em;
}
.widget-subtitle {
  color: var(--lx-muted) !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
}

/* ---------------------------------------------------------------------
   6. Botões
   O Perfex usa .btn-info como ação principal — não .btn-primary.
   --------------------------------------------------------------------- */
.btn {
  border-radius: var(--lx-r) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  padding: 6px 14px !important;
  line-height: 1.6;
  border: 1px solid transparent;
  box-shadow: none !important;
  transition: background .12s ease, border-color .12s ease;
}
.btn-info, .btn-primary {
  background: var(--lx-brand) !important;
  border-color: var(--lx-brand) !important;
  color: #fff !important;
}
.btn-info:hover, .btn-primary:hover,
.btn-info:focus, .btn-primary:focus {
  background: var(--lx-brand-dark) !important;
  border-color: var(--lx-brand-dark) !important;
}
.btn-default {
  background: var(--lx-card) !important;
  border: 1px solid var(--lx-border-2) !important;
  color: var(--lx-brand) !important;
}
.btn-default:hover { background: var(--lx-alt) !important; border-color: var(--lx-brand) !important; }
.btn-success { background: var(--lx-ok) !important;  border-color: var(--lx-ok) !important;  color: #fff !important; }
.btn-warning { background: var(--lx-warn) !important; border-color: var(--lx-warn) !important; color: #fff !important; }
.btn-danger  { background: var(--lx-bad) !important;  border-color: var(--lx-bad) !important;  color: #fff !important; }
.btn-group > .btn:not(:first-child) { margin-left: -1px; }

/* ---------------------------------------------------------------------
   7. Formulários
   O foco do Lightning é borda azul + halo de 3px. Sem halos grandes.
   --------------------------------------------------------------------- */
.form-control,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border-radius: var(--lx-r) !important;
  border: 1px solid var(--lx-border) !important;
  background: var(--lx-card) !important;
  box-shadow: none !important;
  padding: 6px 10px !important;
  height: auto !important;
  min-height: 34px;
  font-size: 13px !important;
  color: var(--lx-text) !important;
}
.form-control:focus,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: var(--lx-brand) !important;
  box-shadow: 0 0 3px var(--lx-brand) !important;
  outline: none !important;
}
.form-control[disabled], .form-control[readonly] { background: #ECEBEA !important; }
.control-label, label { font-weight: 600 !important; color: var(--lx-text-3) !important; font-size: 12px !important; }
.has-error .form-control { border-color: var(--lx-bad) !important; }

/* ---------------------------------------------------------------------
   8. Tabelas
   Cabeçalho maiúsculo pequeno, linhas com hover discreto.
   --------------------------------------------------------------------- */
.table { background: var(--lx-card); margin-bottom: 0; }
.table > thead > tr > th {
  background: var(--lx-alt) !important;
  color: var(--lx-text-3) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--lx-border) !important;
  border-top: none !important;
  padding: 9px 12px !important;
  white-space: nowrap;
}
.table > tbody > tr > td {
  border-top: 1px solid var(--lx-border-soft) !important;
  padding: 9px 12px !important;
  vertical-align: middle;
  color: var(--lx-text-2);
  font-size: 13px;
}
.table > tbody > tr:hover > td { background: var(--lx-bg) !important; }
.table-striped > tbody > tr:nth-of-type(odd) { background: var(--lx-alt); }
.panel-table-full .table { border: none !important; }

/* DataTables */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--lx-border) !important;
  border-radius: var(--lx-r) !important;
  padding: 5px 9px !important;
}
.dataTables_info, .dataTables_length label { color: var(--lx-muted) !important; font-size: 12px; }

/* ---------------------------------------------------------------------
   9. Etiquetas e estados
   --------------------------------------------------------------------- */
.label, .badge {
  border-radius: 999px !important;
  padding: 3px 9px !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: .01em;
}
.label-success, .badge-success { background: var(--lx-ok-bg) !important;  color: #194E31 !important; }
.label-warning, .badge-warning { background: var(--lx-warn-bg) !important; color: #8C4B02 !important; }
.label-danger,  .badge-danger  { background: var(--lx-bad-bg) !important;  color: #8E030F !important; }
.label-info,    .badge-info    { background: var(--lx-info-bg) !important; color: var(--lx-brand-dark) !important; }
.label-default, .badge-default { background: var(--lx-border-soft) !important; color: var(--lx-text-3) !important; }

/* ---------------------------------------------------------------------
   10. Separadores (tabs)
   --------------------------------------------------------------------- */
.nav-tabs { border-bottom: 1px solid var(--lx-border) !important; }
.nav-tabs > li > a {
  border: none !important;
  background: transparent !important;
  color: var(--lx-brand) !important;
  padding: 10px 16px !important;
  border-radius: 0 !important;
  font-weight: 500;
  border-bottom: 2px solid transparent !important;
  margin-right: 0;
}
.nav-tabs > li > a:hover { border-bottom-color: var(--lx-border-2) !important; }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: var(--lx-brand-dark) !important;
  border-bottom: 2px solid var(--lx-brand) !important;
  font-weight: 600;
}
.horizontal-scrollable-tabs .nav-tabs { border-bottom: 1px solid var(--lx-border) !important; }

/* ---------------------------------------------------------------------
   11. Janelas modais
   --------------------------------------------------------------------- */
.modal-content {
  border-radius: var(--lx-r-md) !important;
  border: none !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.30) !important;
}
.modal-header {
  background: var(--lx-alt) !important;
  border-bottom: 1px solid var(--lx-border) !important;
  border-radius: var(--lx-r-md) var(--lx-r-md) 0 0;
  padding: 14px 20px !important;
}
.modal-title { font-weight: 600 !important; font-size: 15px !important; }
.modal-body { padding: 20px !important; }
.modal-footer { background: var(--lx-alt) !important; border-top: 1px solid var(--lx-border) !important; padding: 12px 20px !important; }
.modal-backdrop.in { opacity: .4 !important; }

/* ---------------------------------------------------------------------
   12. Kanban (leads, tarefas, projetos)
   --------------------------------------------------------------------- */
.kan-ban-col {
  background: var(--lx-alt) !important;
  border: 1px solid var(--lx-border) !important;
  border-radius: var(--lx-r) !important;
  padding: 8px !important;
}
.kan-ban-col-status {
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  color: var(--lx-text-3) !important;
  padding: 8px 4px;
  border-bottom: 2px solid var(--lx-brand);
}
.kan-ban-card, .kan-ban-col .lead {
  background: var(--lx-card) !important;
  border: 1px solid var(--lx-border) !important;
  border-radius: var(--lx-r) !important;
  box-shadow: var(--lx-sh-1) !important;
  padding: 12px !important;
  margin: 6px 0 !important;
  transition: box-shadow .12s ease, border-color .12s ease;
}
.kan-ban-card:hover, .kan-ban-col .lead:hover {
  box-shadow: var(--lx-sh-2) !important;
  border-color: var(--lx-brand-light) !important;
}

/* ---------------------------------------------------------------------
   13. Avisos, migalhas, paginação, dicas
   --------------------------------------------------------------------- */
.alert {
  border-radius: var(--lx-r) !important;
  border: 1px solid transparent !important;
  padding: 11px 16px !important;
  font-size: 13px;
}
.alert-success { background: var(--lx-ok-bg) !important;  border-color: #9AD48F !important; color: #194E31 !important; }
.alert-warning { background: var(--lx-warn-bg) !important; border-color: #FBC57E !important; color: #8C4B02 !important; }
.alert-danger  { background: var(--lx-bad-bg) !important;  border-color: #FEB8AB !important; color: #8E030F !important; }
.alert-info    { background: var(--lx-info-bg) !important; border-color: #90CDF4 !important; color: var(--lx-brand-dark) !important; }

.breadcrumb { background: transparent !important; padding: 4px 0 !important; font-size: 12px; margin-bottom: 8px; }
.breadcrumb > li > a { color: var(--lx-brand); }
.breadcrumb > .active { color: var(--lx-muted); }

.pagination > li > a, .pagination > li > span {
  color: var(--lx-brand) !important;
  border-color: var(--lx-border) !important;
  border-radius: var(--lx-r) !important;
  margin: 0 2px;
  padding: 5px 11px !important;
}
.pagination > .active > a, .pagination > .active > span {
  background: var(--lx-brand) !important;
  border-color: var(--lx-brand) !important;
  color: #fff !important;
}

.tooltip-inner { background: #16325C !important; border-radius: var(--lx-r) !important; padding: 6px 10px !important; font-size: 12px; }
.popover { border-radius: var(--lx-r) !important; border-color: var(--lx-border) !important; box-shadow: var(--lx-sh-3) !important; }

.dropdown-menu {
  border: 1px solid var(--lx-border) !important;
  border-radius: var(--lx-r) !important;
  box-shadow: var(--lx-sh-3) !important;
  padding: 4px 0 !important;
}
.dropdown-menu > li > a { padding: 7px 14px !important; font-size: 13px; color: var(--lx-text-2) !important; }
.dropdown-menu > li > a:hover { background: var(--lx-bg) !important; color: var(--lx-text) !important; }
.dropdown-header { font-size: 11px !important; text-transform: uppercase; letter-spacing: .05em; color: var(--lx-muted) !important; font-weight: 700; }

hr { border-color: var(--lx-border-soft) !important; }
.well { background: var(--lx-alt) !important; border: 1px solid var(--lx-border) !important; border-radius: var(--lx-r) !important; box-shadow: none !important; }