/* ============================================================================
   GSSoftware — tema visual global (public/main.css)
   Bootstrap 4 + AdminLTE 3 (+ Bootstrap 5 nas telas publicas de login).
   Um unico arquivo, sem @import, sem web font. Substitui o main.css antigo.

   Ordem de carga real: adminlte.min.css -> ESTE ARQUIVO (plugin GssTema)
   -> jquery-ui.css -> <style> inline da tela -> CSS do SweetAlert2 (via JS).
   Estrategia: vencer o vendor e os inline por ESPECIFICIDADE. Os 9 grupos de
   !important existentes estao marcados com [!n] e justificados no local; todos
   combatem um !important ou um atributo style= que ja existe no projeto.

   Secoes: 0 Tokens · 1 Base · 2 Layout · 3 Sidebar · 4 Navbar/menu do usuario
           5 Cards · 6 Tabelas (desktop) · 7 Tabelas (mobile = card) · 8 Badges
           9 Botoes · 10 Dropdowns · 11 Formularios · 12 Modais
           13 Tabs/Paginacao/Alertas · 14 Dashboard · 15 Login · 16 Plugins
           17 Legado
   ========================================================================== */

/* 0. TOKENS ================================================================= */
:root {
  /* Marca em dois papeis: o mint #31df7b da 1,75:1 com branco e NAO pode
     carregar texto — fica so como identidade/estado (filete do item ativo,
     icone ativo, selecao). O verde sobrio #15803d (5,02:1 com branco) e o
     acento de acao: botoes, links, aba ativa, paginacao, foco. */
  --gss-brand: #31df7b;
  --gss-green-600: #16a34a;        /* borda de foco */
  --gss-green-700: #15803d;        /* btn-primary/success — 5,02:1 com #fff */
  --gss-green-800: #166534;        /* hover do primario, links */
  --gss-green-900: #14532d;
  --gss-green-50: #ecfdf3;
  --gss-amber: #f5b400;            /* btn-warning = acao principal das telas */
  --gss-amber-dark: #dea300;
  --gss-amber-text: #1f2937;       /* 7,8:1 sobre o ambar */
  --gss-red: #dc2626;  --gss-red-dark: #b91c1c;
  --gss-blue: #0369a1; --gss-blue-dark: #075985;
  --gss-slate-500: #64748b; --gss-slate-600: #475569;

  /* neutros frios */
  --gss-bg: #f3f5f8;
  --gss-surface: #ffffff;
  --gss-surface-2: #f8fafc;
  --gss-surface-3: #f1f5f9;
  --gss-border: #e3e8ef;
  --gss-border-strong: #cbd5e1;
  --gss-text: #1e293b;
  --gss-text-muted: #64748b;
  --gss-thead-bg: #f8fafc;
  --gss-thead-text: #475569;
  --gss-zebra: rgba(15, 23, 42, .028);   /* zebra sutil, mas visivel */
  --gss-hover: rgba(21, 128, 61, .07);

  --gss-sidebar-bg: #0f1b2d;       /* navy neutro */
  --gss-sidebar-text: #c7d0dc;
  --gss-sidebar-text-2: #a7b3c2;

  --gss-ring-green: rgba(21, 128, 61, .25);
  --gss-ring-amber: rgba(245, 180, 0, .35);
  --gss-ring-neutral: rgba(100, 116, 139, .28);
  --gss-radius: 12px;
  --gss-radius-sm: 8px;
  --gss-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);
  --gss-shadow-lg: 0 10px 30px rgba(15, 23, 42, .12), 0 2px 6px rgba(15, 23, 42, .06);
  --gss-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  /* badges "soft": fundo claro + texto escuro (todos >= 6:1).
     dark e a excecao: fica solido para "Administrador" (success) e
     "Usuario"/"plataforma" (dark) nao virarem dois cinzas iguais. */
  --gss-b-primary-bg: #d1fae5;   --gss-b-primary-fg: #065f46;
  --gss-b-success-bg: #dcfce7;   --gss-b-success-fg: #166534;
  --gss-b-info-bg: #e0f2fe;      --gss-b-info-fg: #075985;
  --gss-b-warning-bg: #fef3c7;   --gss-b-warning-fg: #92400e;
  --gss-b-danger-bg: #fee2e2;    --gss-b-danger-fg: #991b1b;
  --gss-b-secondary-bg: #e2e8f0; --gss-b-secondary-fg: #334155;
  --gss-b-dark-bg: #1f2937;      --gss-b-dark-fg: #f8fafc;
  --gss-b-light-bg: #f1f5f9;     --gss-b-light-fg: #334155;

  /* small-box: mesma semantica do AdminLTE, tons conferidos para AA com
     branco (o rotulo <p> tem 0,8rem e precisa de 4,5:1). */
  --gss-sb-primary: #1d4ed8;   /* 8,6:1 */
  --gss-sb-success: #15803d;   /* 5,0:1 */
  --gss-sb-info: #0369a1;      /* 5,3:1 */
  --gss-sb-warning: #f5b400;   /* AdminLTE ja aplica texto escuro em bg-warning */
  --gss-sb-danger: #c81e1e;    /* 5,1:1 */
  --gss-sb-dark: #1e293b;
  --gss-sb-secondary: #475569; /* 7,4:1 */
}

/* Dark mode do AdminLTE (ha toggle): so remapeia tokens, para nao quebrar feio. */
.dark-mode {
  --gss-bg: #343a40; --gss-surface: #3f474e; --gss-surface-2: #454d55; --gss-surface-3: #4b545c;
  --gss-border: rgba(255, 255, 255, .12); --gss-border-strong: rgba(255, 255, 255, .22);
  --gss-text: #e9ecef; --gss-text-muted: #adb5bd;
  --gss-thead-bg: #454d55; --gss-thead-text: #ced4da;
  --gss-zebra: rgba(255, 255, 255, .03); --gss-hover: rgba(49, 223, 123, .12);
}

/* 1. BASE / TIPOGRAFIA ====================================================== */
body { font-family: var(--gss-font); font-size: 14px; line-height: 1.5; color: var(--gss-text); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 600; letter-spacing: -.01em; }
b, strong { font-weight: 600; }
small, .small { font-size: .8125rem; }
a { color: var(--gss-green-800); }
a:hover { color: var(--gss-green-900); }
hr { border-top-color: var(--gss-border); }
code { color: var(--gss-green-800); background: var(--gss-surface-3); padding: .1em .35em; border-radius: 4px; font-size: .85em; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--gss-green-700); }
::selection { background: rgba(49, 223, 123, .35); }
/* Foco de teclado visivel em qualquer interativo (o anel dos .btn vem na secao 9). */
:focus-visible { outline: 2px solid var(--gss-green-600); outline-offset: 2px; border-radius: 4px; }
.sidebar { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; }
.content-wrapper ::-webkit-scrollbar, .modal ::-webkit-scrollbar { width: 8px; height: 8px; }
.content-wrapper ::-webkit-scrollbar-thumb, .modal ::-webkit-scrollbar-thumb { background: var(--gss-border-strong); border-radius: 8px; }

/* 2. LAYOUT: wrapper, titulo da tela, rodape ================================ */
.content-wrapper { background-color: var(--gss-bg); }
.content-wrapper > .content { padding: 0 1rem 1.5rem; }
.content-title { padding: 1.1rem 0 .6rem; }
.content-title > .row { align-items: center; }
.content-title h1 { font-size: 1.35rem; font-weight: 600; line-height: 1.3; margin: 0; color: var(--gss-text); }
.content-title .btn { white-space: nowrap; }
.main-footer { background: transparent; border-top: 1px solid var(--gss-border); color: var(--gss-text-muted); font-size: .8rem; padding: .75rem 1rem; }
@media (max-width: 767.98px) {
  .content-wrapper > .content { padding: 0 .5rem 1rem; }
  .content-title { padding: .75rem 0 .25rem; }
  .content-title h1 { font-size: 1.2rem; margin-bottom: .25rem; }
  .content-title .btn-block { margin-top: .25rem; }
}

/* 3. SIDEBAR ================================================================ */
/* Prefixar .main-sidebar[class*="sidebar-dark-"] ganha do AdminLTE por
   especificidade, sem !important. */
.main-sidebar, .main-sidebar[class*="sidebar-dark-"] { background-color: var(--gss-sidebar-bg); }
/* [!1] .elevation-4 (vem de classes_sidebar no config) aplica
   box-shadow: 0 14px 28px rgba(0,0,0,.25) !important — a sombra pesada destoa
   de todo o resto do tema; trocada por um filete interno. */
.main-sidebar.elevation-4 { box-shadow: inset -1px 0 0 rgba(255, 255, 255, .06) !important; }
.main-sidebar .sidebar { padding: .25rem .6rem; }
.main-sidebar[class*="sidebar-dark-"] .brand-link { border-bottom: 1px solid rgba(255, 255, 255, .08); color: #fff; padding: .9rem .75rem; }
.brand-link .brand-text { font-weight: 500; letter-spacing: -.01em; }
.brand-link .brand-text b { font-weight: 700; color: var(--gss-brand); }
/* [!2] a logo vem com style="opacity:.8" inline no partial do vendor e com a
   classe .elevation-4, que aplica box-shadow com !important. Sem !important nao
   ha como limpar nenhum dos dois.
   NAO colocar anel/borda colorida aqui: a logo e do CLIENTE, e um anel verde da
   marca GSS por cima da logo dele fica errado em qualquer empresa que nao seja
   a plataforma. */
.brand-link .brand-image { opacity: 1 !important; box-shadow: none !important; border: 0; outline: 0; margin-top: -2px; }
.brand-link:focus .brand-image, .brand-link:hover .brand-image { box-shadow: none !important; outline: 0; }
.main-sidebar .nav-sidebar .nav-link { border-radius: var(--gss-radius-sm); padding: .5rem .75rem; margin-bottom: 2px; }
/* Os 61 itens do config usam 'icon' => 'fas fa-...' e o partial renderiza
   <i class="fas ..."> SEM a classe .nav-icon — por isso o alvo e "> i". */
.main-sidebar .nav-sidebar .nav-link > i, .main-sidebar .nav-sidebar .nav-link > .nav-icon { width: 1.6rem; margin-right: .35rem; font-size: 1rem; text-align: center; opacity: .9; }
.main-sidebar[class*="sidebar-dark-"] .nav-sidebar > .nav-item > .nav-link { color: var(--gss-sidebar-text); }
.main-sidebar[class*="sidebar-dark-"] .nav-treeview > .nav-item > .nav-link { color: var(--gss-sidebar-text-2); }
.main-sidebar[class*="sidebar-dark-"] .nav-sidebar > .nav-item > .nav-link:hover,
.main-sidebar[class*="sidebar-dark-"] .nav-sidebar > .nav-item > .nav-link:focus,
.main-sidebar[class*="sidebar-dark-"] .nav-treeview > .nav-item > .nav-link:hover,
.main-sidebar[class*="sidebar-dark-"] .nav-treeview > .nav-item > .nav-link:focus { color: #fff; background-color: rgba(255, 255, 255, .06); }
/* item ativo: verde translucido + filete da marca (o AdminLTE deixa o filho do
   treeview branco e ilegivel — por isso as variantes :hover/:focus aqui) */
.main-sidebar[class*="sidebar-dark-"] .nav-sidebar > .nav-item > .nav-link.active,
.main-sidebar[class*="sidebar-dark-"] .nav-treeview > .nav-item > .nav-link.active,
.main-sidebar[class*="sidebar-dark-"] .nav-treeview > .nav-item > .nav-link.active:hover,
.main-sidebar[class*="sidebar-dark-"] .nav-treeview > .nav-item > .nav-link.active:focus {
  background-color: rgba(49, 223, 123, .14); color: #fff; font-weight: 500; box-shadow: inset 3px 0 0 var(--gss-brand);
}
.main-sidebar[class*="sidebar-dark-"] .nav-sidebar .nav-link.active > i,
.main-sidebar[class*="sidebar-dark-"] .nav-sidebar .nav-link.active > .nav-icon { color: var(--gss-brand); opacity: 1; }
.main-sidebar[class*="sidebar-dark-"] .nav-header { color: rgba(255, 255, 255, .45); font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 1rem 1rem .4rem; }
.os-theme-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle { background: rgba(255, 255, 255, .18); }

/* 4. NAVBAR + MENU DO USUARIO =============================================== */
.main-header.navbar { background-color: var(--gss-surface); border-bottom: 1px solid var(--gss-border); box-shadow: none; padding: .4rem 1rem; }
.main-header .navbar-nav .nav-link { color: var(--gss-text-muted); border-radius: var(--gss-radius-sm); font-weight: 500; }
.main-header .navbar-nav .nav-link:hover, .main-header .navbar-nav .nav-link:focus { color: var(--gss-text); background-color: var(--gss-surface-3); }
/* Avatar circular no gatilho (usermenu_image = false, entao ha so o nome).
   O proprio <a> vira flex: assim o icone e o nome se alinham pelo centro real
   da linha, e nao por um vertical-align chutado. Com vertical-align o
   alinhamento so ficava certo no tamanho de fonte exato em que foi calibrado e
   escorregava em telas menores. */
.main-header .navbar-nav > .user-menu > .nav-link {
  display: flex; align-items: center; line-height: 1.2;
}
.main-header .navbar-nav > .user-menu > .nav-link::before {
  content: "\f007"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: .78rem;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 26px; width: 26px; height: 26px;
  margin-right: .5rem; border-radius: 50%;
  background: var(--gss-green-50); color: var(--gss-green-800);
}
/* O caret do dropdown tambem entra no eixo central. */
.main-header .navbar-nav > .user-menu > .nav-link::after { align-self: center; }
.main-header .navbar-nav > .user-menu > .dropdown-menu { width: 280px; padding: 0; margin-top: .4rem; border: 1px solid var(--gss-border); border-radius: var(--gss-radius); box-shadow: var(--gss-shadow-lg); overflow: hidden; }
/* [!3] .user-header recebe a classe bg-dark (config usermenu_header_class) e o
   AdminLTE define .bg-* com !important. Repintar no navy da sidebar deixa o
   menu coeso com a marca em vez de preto Bootstrap. */
.main-header .navbar-nav > .user-menu > .dropdown-menu > .user-header { height: auto; padding: 18px 16px 16px; text-align: left; background-color: var(--gss-sidebar-bg) !important; }
.main-header .navbar-nav > .user-menu > .dropdown-menu > .user-header > p { margin: 0; color: #fff; font-size: .95rem; font-weight: 600; line-height: 1.3; }
.main-header .navbar-nav > .user-menu > .dropdown-menu > .user-header > p > small { display: block; margin-top: 2px; font-size: .75rem; font-weight: 400; color: rgba(255, 255, 255, .65); }
.main-header .navbar-nav > .user-menu > .dropdown-menu > li > .dropdown-item { display: flex; align-items: center; width: auto; margin: 2px 6px; padding: .55rem .7rem; border-radius: var(--gss-radius-sm); color: var(--gss-text); font-size: .875rem; }
.main-header .navbar-nav > .user-menu > .dropdown-menu > li:first-of-type > .dropdown-item { margin-top: 6px; }
.main-header .navbar-nav > .user-menu > .dropdown-menu > li > .dropdown-item:hover { background-color: var(--gss-green-50); color: var(--gss-green-900); }
.main-header .navbar-nav > .user-menu > .dropdown-menu > li > .dropdown-item > i { width: 1.25rem; margin-right: .5rem; text-align: center; color: var(--gss-text-muted); }
.main-header .navbar-nav > .user-menu > .dropdown-menu > li > .dropdown-item:hover > i { color: var(--gss-green-700); }
.main-header .navbar-nav > .user-menu > .dropdown-menu > .user-body { padding: 6px; border-top: 1px solid var(--gss-border); border-bottom: 0; }
/* o partial usa float + .float-right; flex + float:none alinha "Perfil" e "Sair" */
.main-header .navbar-nav > .user-menu > .dropdown-menu > .user-footer { display: flex; justify-content: space-between; gap: 8px; padding: 10px 12px; margin-top: 6px; background-color: var(--gss-surface-2); border-top: 1px solid var(--gss-border); }
.main-header .navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn { float: none; margin: 0; border-radius: var(--gss-radius-sm); font-size: .8125rem; padding: .35rem .7rem; }

/* 5. CARDS (+ tabela "flush" dentro do card-body) =========================== */
.card { background-color: var(--gss-surface); border: 1px solid var(--gss-border); border-radius: var(--gss-radius); box-shadow: var(--gss-shadow-sm); margin-bottom: 1rem; }
/* sem overflow:hidden aqui de proposito: cortaria o dropdown "Acoes" das
   ultimas linhas da lista (aceitamos 1px de hover no canto arredondado) */
.card > .card-header { background-color: var(--gss-surface-2); border-bottom: 1px solid var(--gss-border); padding: .75rem 1.25rem; border-radius: calc(var(--gss-radius) - 1px) calc(var(--gss-radius) - 1px) 0 0; }
.card > .card-footer { background-color: var(--gss-surface-2); border-top: 1px solid var(--gss-border); border-radius: 0 0 calc(var(--gss-radius) - 1px) calc(var(--gss-radius) - 1px); }
.card-title { font-size: .95rem; font-weight: 600; margin: 0; color: var(--gss-text); }
.card-header > .row { align-items: center; }
.card .card-header .form-control-border { margin-bottom: 0; }
.card.card-outline { border-top-width: 3px; }
.card.card-primary.card-outline { border-top-color: var(--gss-green-600); }
.card.card-primary:not(.card-outline) > .card-header { background-color: var(--gss-green-700); }
.modal-body .card { box-shadow: none; }
/* Padding do card-body exposto em variaveis: os utilitarios p-, px- e py- usados
   nas blades so redefinem a variavel, e a tabela usa margem negativa = padding.
   Assim a tabela fica colada nas bordas sem estourar o card em nenhum caso. */
.card-body { --gss-cb-x: 1.25rem; --gss-cb-y: 1rem; padding: var(--gss-cb-y) var(--gss-cb-x); }
.card-body.p-0, .card-body.px-0 { --gss-cb-x: 0rem; }
.card-body.p-0, .card-body.py-0 { --gss-cb-y: 0rem; }
.card-body.p-1, .card-body.px-1 { --gss-cb-x: .25rem; }
.card-body.p-1, .card-body.py-1 { --gss-cb-y: .25rem; }
.card-body.p-2, .card-body.px-2 { --gss-cb-x: .5rem; }
.card-body.p-2, .card-body.py-2 { --gss-cb-y: .5rem; }
.card-body.p-3, .card-body.px-3 { --gss-cb-x: 1rem; }
.card-body.p-3, .card-body.py-3 { --gss-cb-y: 1rem; }
.card-body > .table, .card-body > .table-responsive, .card-body > [class*="table-responsive-"] {
  width: calc(100% + 2 * var(--gss-cb-x)); max-width: none;
  margin-left: calc(-1 * var(--gss-cb-x)); margin-right: calc(-1 * var(--gss-cb-x));
}
.card-body > .table:first-child, .card-body > .table-responsive:first-child,
.card-body > [class*="table-responsive-"]:first-child { margin-top: calc(-1 * var(--gss-cb-y)); }
.card-body > .table:last-child, .card-body > .table-responsive:last-child,
.card-body > [class*="table-responsive-"]:last-child { margin-bottom: calc(-1 * var(--gss-cb-y)); }
.card-body > .table-responsive > .table, .card-body > [class*="table-responsive-"] > .table { margin-bottom: 0; }
/* .mb-0 e !important e anula a margem negativa de baixo (dashboard usa
   "card-body p-0 > table mb-0"): o padding-bottom vai a zero no lugar */
.card-body:has(> .table.mb-0:last-child) { padding-bottom: 0; }
@media (max-width: 767.98px) {
  .card-body { --gss-cb-x: 1rem; --gss-cb-y: .875rem; }
  .card > .card-header { padding: .75rem 1rem; }
  /* filtros do card-header empilham: da respiro entre eles */
  .card > .card-header .row > [class*="col-"] + [class*="col-"] { margin-top: .5rem; }
}

/* 6. TABELAS (desktop) ====================================================== */
/* (0,2,0) vence o inline ".table{background:#f8f9fa}" de 27 telas */
.card .table, .modal .table, .content-wrapper .table { background-color: transparent; color: var(--gss-text); font-size: .875rem; }
/* [!4] 27 telas trazem ".table td,.table th{padding:0!important}" no <style>
   inline; so !important devolve a altura de linha pedida no brief. */
.table > thead > tr > th {
  padding: 9px 12px !important;
  font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
  color: var(--gss-thead-text); background-color: var(--gss-thead-bg);
  vertical-align: middle; border-top: 0; border-bottom: 0;
  /* box-shadow no lugar de border-bottom: borda de celula some quando o th e
     sticky com border-collapse */
  box-shadow: inset 0 -1px 0 var(--gss-border);
  position: sticky; top: 0; z-index: 2;
}
.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td { padding: 8px 12px !important; vertical-align: middle; border-top: 1px solid var(--gss-border); line-height: 1.4; }
.table > thead + tbody > tr:first-child > td { border-top: 0; }
.table > tbody > tr > td[colspan]:only-child { padding: 18px 12px !important; }  /* linhaVazia() */
.table-sm > thead > tr > th { padding: 7px 10px !important; }
.table-sm > tbody > tr > td, .table-sm > tbody > tr > th { padding: 5px 10px !important; }
/* dentro de modal o container de rolagem e o proprio .modal: o th sticky
   flutuaria por cima do cabecalho do modal */
.modal .table > thead > tr > th { position: static; }
/* zebra: (0,2,1) vence o inline "table tr:nth-child(even){background:#007bff18}" */
.table > tbody > tr:nth-child(even) { background-color: var(--gss-zebra); }
.table.table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--gss-zebra); }
.table.table-striped > tbody > tr:nth-of-type(even) { background-color: transparent; }
/* hover so no desktop: em toque ele fica "grudado" na linha tocada */
@media (min-width: 992px) {
  .table > tbody > tr:hover, .table-hover > tbody > tr:hover { background-color: var(--gss-hover); color: inherit; }
}
.table td .badge, .table td > center > .badge { vertical-align: middle; }
.table td small, .table td .text-muted { font-size: .78rem; }
.table .input-group-prepend.justify-content-center { display: inline-flex; margin: 0; }
.table-responsive, [class*="table-responsive-"] { -webkit-overflow-scrolling: touch; }

/* 7. TABELAS NO MOBILE: tr.d-lg-none vira card ============================== */
/* O <tr> continua table-row (nao brigamos com .d-table-row, que e !important):
   quem vira card e o unico <td>, exibido como bloco dentro da celula anonima
   que o navegador gera. Funciona igual nas duas variantes de markup — <td> puro
   (Usuarios/Empresas) e <td class="row d-flex"> (Diaria, que segue flex). */
@media (max-width: 991.98px) {
  .table:has(> tbody > tr.d-lg-none) > thead { display: none; }  /* protege thead sem d-none */
  .card-body > .table:has(> tbody > tr.d-lg-none) { background-color: var(--gss-surface-2); }
  .table > tbody > tr.d-lg-none, .table > tbody > tr.d-lg-none:nth-child(even) { background-color: transparent; }
  .table > tbody > tr.d-lg-none > td {
    display: block; width: auto; margin: .6rem .75rem; border: 1px solid var(--gss-border); border-top: 1px solid var(--gss-border);
    border-radius: var(--gss-radius); background-color: var(--gss-surface); box-shadow: var(--gss-shadow-sm);
    padding: 12px 14px !important;  /* [!4] mesmo inline "td{padding:0!important}" */
    line-height: 1.45; text-align: center;
  }
  .table > tbody > tr.d-lg-none:first-child > td { margin-top: .75rem; }
  .table > tbody > tr.d-lg-none:last-child > td { margin-bottom: .75rem; }
  /* [!5] neutraliza o style="font-size:4vw" inline dos blocos mobile */
  .table > tbody > tr.d-lg-none > td > [class*="col-"] {
    flex: 0 0 100%; max-width: 100%; padding: 3px 0; line-height: 1.45;
    font-size: .875rem !important;
  }
  .table > tbody > tr.d-lg-none > td > [class*="col-"]:first-child { font-size: .95rem !important; padding-bottom: 6px; }
  .table > tbody > tr.d-lg-none > td > [class*="col-"]:first-child b { font-weight: 600; color: var(--gss-text); }
  .table > tbody > tr.d-lg-none > td > [class*="col-"]:last-child:not(:first-child) { margin-top: 6px; padding-top: 9px; border-top: 1px dashed var(--gss-border); }
  /* Empresas empilha 4 badges e Usuarios poe o e-mail em badge: quebra de linha
     obrigatoria para nao estourar em 360px */
  .table > tbody > tr.d-lg-none > td .badge { font-size: .72rem; margin: .1rem .15rem; white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
  .table > tbody > tr.d-lg-none > td .btn.dropdown-toggle { min-width: 150px; padding-top: .4rem; padding-bottom: .4rem; }
  .table > thead > tr > th { position: static; }  /* sem sticky em tela pequena */
}

/* 8. BADGES (pilula "soft"; cobre badge-* do BS4 E badge bg-* do AdminLTE) === */
.badge { display: inline-block; padding: .3em .68em; font-size: .74rem; font-weight: 600; line-height: 1.25; letter-spacing: .01em; border-radius: 999px; vertical-align: middle; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .06); }
.badge:empty { display: none; }
.badge > i { margin-right: .25em; }
.badge.badge-primary   { background-color: var(--gss-b-primary-bg);   color: var(--gss-b-primary-fg); }
.badge.badge-success   { background-color: var(--gss-b-success-bg);   color: var(--gss-b-success-fg); }
.badge.badge-info      { background-color: var(--gss-b-info-bg);      color: var(--gss-b-info-fg); }
.badge.badge-warning   { background-color: var(--gss-b-warning-bg);   color: var(--gss-b-warning-fg); }
.badge.badge-danger    { background-color: var(--gss-b-danger-bg);    color: var(--gss-b-danger-fg); }
.badge.badge-secondary { background-color: var(--gss-b-secondary-bg); color: var(--gss-b-secondary-fg); }
.badge.badge-dark      { background-color: var(--gss-b-dark-bg);      color: var(--gss-b-dark-fg); }
.badge.badge-light     { background-color: var(--gss-b-light-bg);     color: var(--gss-b-light-fg); }
/* [!6] o AdminLTE define .bg-* (fundo E cor) com !important; escopo restrito a
   .badge, entao nenhum utilitario global e sequestrado. */
.badge.bg-primary   { background-color: var(--gss-b-primary-bg) !important;   color: var(--gss-b-primary-fg) !important; }
.badge.bg-success   { background-color: var(--gss-b-success-bg) !important;   color: var(--gss-b-success-fg) !important; }
.badge.bg-info      { background-color: var(--gss-b-info-bg) !important;      color: var(--gss-b-info-fg) !important; }
.badge.bg-warning   { background-color: var(--gss-b-warning-bg) !important;   color: var(--gss-b-warning-fg) !important; }
.badge.bg-danger    { background-color: var(--gss-b-danger-bg) !important;    color: var(--gss-b-danger-fg) !important; }
.badge.bg-secondary { background-color: var(--gss-b-secondary-bg) !important; color: var(--gss-b-secondary-fg) !important; }
.badge.bg-dark      { background-color: var(--gss-b-dark-bg) !important;      color: var(--gss-b-dark-fg) !important; }
.badge.bg-light     { background-color: var(--gss-b-light-bg) !important;     color: var(--gss-b-light-fg) !important; }

/* 9. BOTOES ================================================================= */
.btn { font-size: .875rem; font-weight: 500; line-height: 1.45; padding: .45rem .95rem; border-radius: var(--gss-radius-sm); box-shadow: none; transition: background-color .15s, border-color .15s, box-shadow .15s, color .15s; }
.btn:focus, .btn.focus { box-shadow: 0 0 0 3px var(--gss-ring-neutral); }
/* foco de teclado com contraste real (3,4:1) tambem nos botoes */
.btn:focus-visible { outline: 2px solid var(--gss-green-600); outline-offset: 2px; }
.btn-sm, .btn-group-sm > .btn { font-size: .8125rem; padding: .3rem .7rem; border-radius: 7px; }
.btn-xs { font-size: .75rem; line-height: 1.4; padding: .18rem .5rem; border-radius: 6px; }
.btn-lg, .btn-group-lg > .btn { font-size: 1rem; padding: .6rem 1.2rem; border-radius: 10px; }
.btn-flat { border-radius: var(--gss-radius-sm); }
.btn-block + .btn-block { margin-top: .5rem; }
.btn.disabled, .btn:disabled { opacity: .55; }
/* prefixo body (0,2,1): o PDV redefine .btn/.form-control no <style> inline e,
   por vir depois, ganharia o empate de especificidade */
body .btn-primary, body .btn-success { color: #fff; background-color: var(--gss-green-700); border-color: var(--gss-green-700); }
body .btn-primary:hover, body .btn-success:hover,
body .btn-primary:not(:disabled):not(.disabled):active, body .btn-success:not(:disabled):not(.disabled):active,
body .show > .btn-primary.dropdown-toggle, body .show > .btn-success.dropdown-toggle { color: #fff; background-color: var(--gss-green-800); border-color: var(--gss-green-800); }
body .btn-primary:focus, body .btn-primary.focus, body .btn-success:focus, body .btn-success.focus { box-shadow: 0 0 0 3px var(--gss-ring-green); }
body .btn-outline-primary { color: var(--gss-green-700); border-color: var(--gss-green-700); background-color: transparent; }
body .btn-outline-primary:hover, body .btn-outline-primary:not(:disabled):not(.disabled):active { color: #fff; background-color: var(--gss-green-700); border-color: var(--gss-green-700); }
/* warning = acao principal das telas (Cadastrar/Nova); texto escuro = 7,8:1 */
body .btn-warning { color: var(--gss-amber-text); background-color: var(--gss-amber); border-color: var(--gss-amber); }
body .btn-warning:hover, body .btn-warning:not(:disabled):not(.disabled):active, body .show > .btn-warning.dropdown-toggle { color: var(--gss-amber-text); background-color: var(--gss-amber-dark); border-color: var(--gss-amber-dark); }
body .btn-warning:focus, body .btn-warning.focus { box-shadow: 0 0 0 3px var(--gss-ring-amber); }
body .btn-default, body .btn-light { color: var(--gss-text); background-color: var(--gss-surface); border-color: var(--gss-border-strong); }
body .btn-default:hover, body .btn-light:hover, body .btn-default:not(:disabled):not(.disabled):active { color: var(--gss-text); background-color: var(--gss-surface-3); border-color: #94a3b8; }
body .btn-secondary { color: #fff; background-color: var(--gss-slate-500); border-color: var(--gss-slate-500); }
body .btn-secondary:hover, body .btn-secondary:not(:disabled):not(.disabled):active { color: #fff; background-color: var(--gss-slate-600); border-color: var(--gss-slate-600); }
body .btn-danger { color: #fff; background-color: var(--gss-red); border-color: var(--gss-red); }
body .btn-danger:hover, body .btn-danger:not(:disabled):not(.disabled):active { color: #fff; background-color: var(--gss-red-dark); border-color: var(--gss-red-dark); }
body .btn-danger:focus, body .btn-danger.focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, .25); }
body .btn-info { color: #fff; background-color: var(--gss-blue); border-color: var(--gss-blue); }
body .btn-info:hover, body .btn-info:not(:disabled):not(.disabled):active { color: #fff; background-color: var(--gss-blue-dark); border-color: var(--gss-blue-dark); }
body .btn-outline-danger { color: var(--gss-red); border-color: var(--gss-red); }
body .btn-outline-danger:hover { color: #fff; background-color: var(--gss-red); border-color: var(--gss-red); }
.btn-tool { color: var(--gss-text-muted); }
/* Dropdown "Acoes" das listas: neutro e discreto — o ambar fica reservado para
   a acao principal da tela. Escopado pelos dois markups reais (input-group-
   prepend e botao dentro de <td>), sem atingir o .btn-warning do cabecalho. */
.input-group-prepend > .btn.btn-warning.dropdown-toggle,
td .btn.btn-warning.dropdown-toggle { background-color: var(--gss-surface); border-color: var(--gss-border-strong); color: var(--gss-text); font-weight: 500; }
.input-group-prepend > .btn.btn-warning.dropdown-toggle:hover,
.input-group-prepend.show > .btn.btn-warning.dropdown-toggle,
td .btn.btn-warning.dropdown-toggle:hover { background-color: var(--gss-surface-3); border-color: #94a3b8; color: var(--gss-text); }
.input-group-prepend > .btn.btn-warning.dropdown-toggle:focus,
td .btn.btn-warning.dropdown-toggle:focus { box-shadow: 0 0 0 3px var(--gss-ring-neutral); }

/* 10. DROPDOWNS ============================================================= */
.dropdown-menu { min-width: 11rem; padding: 6px; font-size: .875rem; color: var(--gss-text); background-color: var(--gss-surface); border: 1px solid var(--gss-border); border-radius: 10px; box-shadow: var(--gss-shadow-lg); }
.dropdown-item { display: flex; align-items: center; padding: .45rem .65rem; border-radius: 7px; color: var(--gss-text); line-height: 1.35; cursor: pointer; white-space: nowrap; }
.dropdown-item:hover, .dropdown-item:focus { color: var(--gss-green-900); background-color: var(--gss-green-50); }
.dropdown-item:active, .dropdown-item.active { color: #fff; background-color: var(--gss-green-700); }
/* Duas variantes reais de markup dentro do <li class="dropdown-item">:
   (a) <span class="btn"><i/></span> Texto           (Usuarios, Empresas)
   (b) <span class="btn btn-sm"><i/> Texto</span>    (Cobranca)
   Por isso o .btn interno vira um slot de icone SEM largura fixa — o texto da
   variante (b) continua fluindo dentro dele. */
.dropdown-item > .btn { min-width: 1.5rem; margin-right: .4rem; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--gss-text-muted); font: inherit; font-weight: 500; line-height: inherit; text-align: left; box-shadow: none; }
.dropdown-item > .btn:focus, .dropdown-item > .btn.focus { box-shadow: none; }
.dropdown-item > .btn > i { width: 1.25rem; text-align: center; }
.dropdown-item:hover > .btn { color: inherit; }
.dropdown-item > .btn.text-danger, .dropdown-item > .btn.text-danger > i { color: var(--gss-red); }
.dropdown-divider { margin: 4px 0; border-top-color: var(--gss-border); }
.dropdown-header { color: var(--gss-text-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; padding: .4rem .65rem .2rem; }
.dropdown-toggle::after { margin-left: .4em; vertical-align: .15em; opacity: .7; }

/* 11. FORMULARIOS =========================================================== */
label { font-size: .8125rem; font-weight: 500; color: var(--gss-text-muted); margin-bottom: .3rem; }
.form-check-label, .custom-control-label { font-weight: 400; color: var(--gss-text); }
.form-group { margin-bottom: .9rem; }
.form-control, .custom-select { height: 38px; padding: .4rem .75rem; font-size: .875rem; color: var(--gss-text); background-color: var(--gss-surface); border: 1px solid var(--gss-border-strong); border-radius: var(--gss-radius-sm); box-shadow: none; transition: border-color .15s, box-shadow .15s; }
.form-control-sm, .input-group-sm > .form-control, .custom-select-sm { height: 31px; padding: .25rem .6rem; font-size: .8125rem; border-radius: 6px; }
.form-control-lg { height: 46px; font-size: 1rem; border-radius: 10px; }
textarea.form-control { height: auto; min-height: 84px; }
.form-control::placeholder { color: #94a3b8; opacity: 1; }
/* prefixo body: o PDV traz ".form-control:focus{border-color:#80bdff}" inline */
body .form-control:focus, body .custom-select:focus { color: var(--gss-text); background-color: var(--gss-surface); border-color: var(--gss-green-600); outline: 0; box-shadow: 0 0 0 3px var(--gss-ring-green); }
.form-control:disabled, .form-control[readonly] { background-color: var(--gss-surface-2); color: var(--gss-text-muted); opacity: 1; }
.form-control.is-invalid, .form-control.is-invalid:focus { border-color: var(--gss-red); background-image: none; box-shadow: 0 0 0 3px rgba(220, 38, 38, .18); }
/* .form-control-border (AdminLTE): mantem o "underline"; o foco engrossa a
   linha em verde sem mexer no layout */
.form-control.form-control-border, .custom-select.form-control-border { border: 0; border-bottom: 1.5px solid var(--gss-border-strong); border-radius: 0; padding-left: .25rem; padding-right: .25rem; background-color: transparent; box-shadow: none; }
body .form-control.form-control-border:focus, body .custom-select.form-control-border:focus { border-bottom-color: var(--gss-green-600); background-color: transparent; box-shadow: 0 1px 0 0 var(--gss-green-600); }
.form-control.form-control-border.is-invalid, .form-control.form-control-border.is-invalid:focus { border-bottom-color: var(--gss-red); box-shadow: 0 1px 0 0 var(--gss-red); }
textarea.form-control.form-control-border { height: auto; }
/* inputs empilhados em .col-* sem .form-group (padrao dos modais) */
.modal-body [class*="col-"] > .form-control-border:last-child, .modal-body [class*="col-"] > .form-control-border + small.text-muted { margin-bottom: .75rem; }
.input-group-text { font-size: .875rem; color: var(--gss-text-muted); background-color: var(--gss-surface-2); border-color: var(--gss-border-strong); border-radius: var(--gss-radius-sm); }
button.input-group-text { cursor: pointer; }
.custom-file, .custom-file-input, .custom-file-label { height: 38px; }
.custom-file-label { font-size: .875rem; line-height: 1.7; border-color: var(--gss-border-strong); border-radius: var(--gss-radius-sm); color: var(--gss-text-muted); }
.custom-file-label::after { height: 36px; line-height: 1.7; background-color: var(--gss-surface-2); color: var(--gss-text); border-radius: 0 var(--gss-radius-sm) var(--gss-radius-sm) 0; }
.custom-control-input:checked ~ .custom-control-label::before { background-color: var(--gss-green-700); border-color: var(--gss-green-700); }
.custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 3px var(--gss-ring-green); }
.invalid-feedback { font-size: .78rem; }
/* iOS: campo com fonte < 16px faz o Safari dar zoom automatico ao focar */
@media (max-width: 991.98px) { .form-control, .custom-select { font-size: 1rem; } }

/* 12. MODAIS ================================================================ */
.modal-content { border: 0; border-radius: 14px; background-color: var(--gss-surface); color: var(--gss-text); box-shadow: 0 20px 50px rgba(15, 23, 42, .22); }
.modal-header { align-items: center; padding: .9rem 1.25rem; border-bottom: 1px solid var(--gss-border); border-radius: 14px 14px 0 0; }
.modal-title { font-size: 1.05rem; font-weight: 600; line-height: 1.3; }
.modal-header .close { padding: .4rem .55rem; margin: -.4rem -.55rem -.4rem auto; font-size: 1.35rem; font-weight: 400; line-height: 1; color: var(--gss-text-muted); opacity: 1; text-shadow: none; border-radius: var(--gss-radius-sm); }
.modal-header .close:hover { color: var(--gss-text); background-color: var(--gss-surface-3); opacity: 1; }
.modal-body { padding: 1.25rem; }
.modal-footer { padding: .75rem 1.25rem; background-color: var(--gss-surface-2); border-top: 1px solid var(--gss-border); border-radius: 0 0 14px 14px; }
.modal-backdrop.show { opacity: .45; }
.modal-xl { max-width: 1140px; }

/* MONITOR BAIXO (LIC-MODAL-002).
   Sem isto o modal cresce com o conteudo, empurra o rodape para fora da tela e
   o botao de fechar fica inalcancavel -- no modal do token da licenca isso
   prendia o operador, porque ele usa data-backdrop="static" e nao fecha por
   clique fora. Agora o conteudo e que rola: cabecalho e rodape ficam sempre
   visiveis. Vale para TODOS os modais do sistema. */
.modal-dialog { max-height: calc(100vh - 3.5rem); }
.modal-content { max-height: calc(100vh - 3.5rem); }
.modal-body { overflow-y: auto; overscroll-behavior: contain; }
.modal-header, .modal-footer { flex-shrink: 0; }
@media (max-width: 575.98px) {
  .modal-dialog { margin: .5rem; max-height: calc(100vh - 1rem); }
  .modal-content { max-height: calc(100vh - 1rem); }
  .modal-header, .modal-body, .modal-footer { padding-left: 1rem; padding-right: 1rem; }
  /* Rodape com varios botoes: empilha em vez de estourar a largura. */
  .modal-footer > .btn { flex: 1 1 auto; }
}

/* 13. TABS / PILLS / PAGINACAO / ALERTAS ==================================== */
.nav-tabs { border-bottom: 1px solid var(--gss-border); }
.nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: .55rem .9rem; color: var(--gss-text-muted); font-weight: 500; border-radius: var(--gss-radius-sm) var(--gss-radius-sm) 0 0; }
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus { color: var(--gss-text); background-color: var(--gss-surface-3); border-color: transparent; }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: var(--gss-green-800); background-color: transparent; border-color: transparent transparent var(--gss-green-600); }
.nav-pills:not(.nav-sidebar) .nav-link { border-radius: var(--gss-radius-sm); }
.nav-pills:not(.nav-sidebar) .nav-link.active, .nav-pills:not(.nav-sidebar) .show > .nav-link { background-color: var(--gss-green-700); color: #fff; }
.page-link { color: var(--gss-green-800); border-color: var(--gss-border); font-size: .875rem; }
.page-link:hover { color: var(--gss-green-900); background-color: var(--gss-green-50); border-color: var(--gss-border); }
.page-link:focus { box-shadow: 0 0 0 3px var(--gss-ring-green); }
.page-item.active .page-link { color: #fff; background-color: var(--gss-green-700); border-color: var(--gss-green-700); }
.page-item:first-child .page-link { border-radius: var(--gss-radius-sm) 0 0 var(--gss-radius-sm); }
.page-item:last-child .page-link { border-radius: 0 var(--gss-radius-sm) var(--gss-radius-sm) 0; }
.alert { border-radius: 10px; border-width: 1px; font-size: .875rem; }
.alert-success { background: var(--gss-green-50); border-color: #d1fae5; color: var(--gss-green-900); }
.alert-danger { background: #fef2f2; border-color: #fee2e2; color: #991b1b; }
.progress { border-radius: 999px; background: var(--gss-surface-3); }
.progress-bar { background-color: var(--gss-green-600); }
.list-group-item { border-color: var(--gss-border); }
.breadcrumb { background: transparent; padding: 0; font-size: .8rem; }

/* 14. DASHBOARD: small-box, info-box, callout =============================== */
.small-box { border-radius: var(--gss-radius); box-shadow: var(--gss-shadow-sm); overflow: hidden; margin-bottom: 1rem; }
.small-box > .inner { padding: 14px 16px; }
/* o AdminLTE forca nowrap e os boxes de dinheiro (R$ 1.234.567,89) estouram */
.small-box h3 { font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em; margin: 0 0 4px; line-height: 1.15; white-space: normal; overflow-wrap: anywhere; }
.small-box p { font-size: .8rem; font-weight: 500; margin-bottom: 0; opacity: .95; }
.small-box .icon { color: rgba(255, 255, 255, .26); }
.small-box.bg-warning .icon { color: rgba(0, 0, 0, .16); }
.small-box .icon > i, .small-box .icon > i.fa, .small-box .icon > i.fas, .small-box .icon > i.far { font-size: 44px; top: 14px; right: 14px; transition: none; }
.small-box:hover .icon > i, .small-box:hover .icon > i.fa, .small-box:hover .icon > i.fas, .small-box:hover .icon > i.far { transform: none; font-size: 44px; }
.small-box > .small-box-footer { font-size: .75rem; background-color: rgba(0, 0, 0, .12); }
/* [!7] .bg-* do AdminLTE e !important. Mantemos a semantica de cor pedida no
   brief, so em tons conferidos para AA (ver tokens --gss-sb-*). */
.small-box.bg-primary   { background-color: var(--gss-sb-primary) !important; }
.small-box.bg-success   { background-color: var(--gss-sb-success) !important; }
.small-box.bg-info      { background-color: var(--gss-sb-info) !important; }
.small-box.bg-warning   { background-color: var(--gss-sb-warning) !important; }
.small-box.bg-danger    { background-color: var(--gss-sb-danger) !important; }
.small-box.bg-dark      { background-color: var(--gss-sb-dark) !important; }
.small-box.bg-secondary { background-color: var(--gss-sb-secondary) !important; }
@media (max-width: 767.98px) {
  .small-box > .inner { padding: 12px 12px 10px; }
  .small-box h3 { font-size: 1.5rem; }
  .small-box .icon > i, .small-box .icon > i.fa, .small-box .icon > i.fas, .small-box .icon > i.far,
  .small-box:hover .icon > i, .small-box:hover .icon > i.fas { font-size: 32px; top: 10px; right: 10px; }
}
.info-box { border-radius: var(--gss-radius); box-shadow: var(--gss-shadow-sm); background-color: var(--gss-surface); border: 1px solid var(--gss-border); min-height: 72px; }
.info-box .info-box-icon { border-radius: 10px; font-size: 1.4rem; }
.info-box .info-box-text { text-transform: none; font-size: .78rem; font-weight: 500; color: var(--gss-text-muted); }
.info-box .info-box-number { font-size: 1.1rem; font-weight: 700; color: var(--gss-text); }
.callout { border-radius: 10px; border: 1px solid var(--gss-border); border-left-width: 4px; box-shadow: none; background-color: var(--gss-surface); padding: .9rem 1.1rem; }
.callout h5 { font-size: 1rem; font-weight: 600; }
.callout p:last-child { margin-bottom: 0; }
.callout.callout-success { border-left-color: var(--gss-green-600); }
.callout.callout-danger { border-left-color: var(--gss-red); }
.callout.callout-warning { border-left-color: var(--gss-amber); }
.callout.callout-info { border-left-color: var(--gss-blue); }

/* 15. LOGIN / LAYOUTS PUBLICOS (layouts/app + auth/login, Bootstrap 5) ====== */
main.py-4 { min-height: calc(100vh - 58px); background-color: var(--gss-bg); }
/* [!8] o layout publico usa .navbar.shadow-sm, e .shadow-sm e !important no BS5 */
.navbar.bg-white.shadow-sm { box-shadow: 0 1px 0 0 var(--gss-border) !important; }
.navbar .navbar-brand { font-weight: 700; color: var(--gss-green-800); letter-spacing: -.01em; }
main.py-4 img.pb-3 { width: 96px; height: auto; }
/* .form-login existe no markup: nao precisamos de :has() para achar o card */
.form-login { max-width: 420px; margin: 0 auto; padding: 2rem 1.75rem 1.75rem; background-color: var(--gss-surface); border: 1px solid var(--gss-border); border-radius: 16px; box-shadow: var(--gss-shadow-lg); }
.form-login .row { margin-left: 0; margin-right: 0; }
/* e-mail/senha/empresa vem em .col-6 — metade de uma tela de 375px hoje */
.form-login .col-6 { flex: 0 0 100%; width: 100%; max-width: 100%; padding-left: 0; padding-right: 0; }
.form-login .form-control { height: 46px; font-size: 1rem; border-radius: 10px; }
.form-login .btn { width: 100%; height: 46px; font-size: 1rem; font-weight: 600; border-radius: 10px; }
.form-login .alert { font-size: .85rem; }
.form-login a.small { font-size: .85rem; }
@media (max-width: 575.98px) { .form-login { padding: 1.5rem 1.1rem; border-radius: 14px; } }

/* 16. PLUGINS: SweetAlert2, jQuery UI autocomplete ========================== */
/* o CSS destes dois entra DEPOIS deste arquivo (swal via JS, jquery-ui.css via
   <link> na tela): dai o prefixo body / a cadeia .ui-autocomplete.ui-menu */
/* CAMADAS DE SOBREPOSICAO (LOAD-002 / LOAD-004).
   Tres coisas competiam pelo topo da tela e duas empatavam em z-index 9999
   -- .preloader (AdminLTE) e #overlay-carregamento (main.js) -- entao quem
   cobria quem dependia da ordem no DOM. Ordem fixada aqui:
     9990  #overlay-carregamento .. carregamento de AJAX
    10000  .swal2-container ....... dialogos (precisam ficar ACIMA do AJAX,
                                    senao um Swal com progresso some atras)
    10010  .preloader ............. abertura da pagina, cobre tudo */
body .swal2-container { z-index: 10000; }
.preloader { z-index: 10010; }

body .swal2-popup { font-family: var(--gss-font); font-size: .95rem; border-radius: 14px; padding: 1.5rem; color: var(--gss-text); background: var(--gss-surface); }
body .swal2-title { font-size: 1.25rem; font-weight: 600; color: var(--gss-text); }
body .swal2-content, body .swal2-html-container { color: var(--gss-text-muted); }
body .swal2-styled { font-size: .9rem; font-weight: 500; padding: .55rem 1.2rem; border-radius: var(--gss-radius-sm); }
body .swal2-styled.swal2-confirm { background-color: var(--gss-green-700); }
body .swal2-styled.swal2-cancel { background-color: var(--gss-slate-500); }
body .swal2-styled:focus { box-shadow: 0 0 0 3px var(--gss-ring-green); }
body .swal2-toast { border-radius: 10px; box-shadow: var(--gss-shadow-lg); }
.ui-autocomplete.ui-menu.ui-widget-content { z-index: 1060; max-height: 260px; overflow-y: auto; overflow-x: hidden; padding: 6px; font-family: var(--gss-font); font-size: .875rem; color: var(--gss-text); background-color: var(--gss-surface); border: 1px solid var(--gss-border); border-radius: 10px; box-shadow: var(--gss-shadow-lg); }
.ui-autocomplete.ui-menu .ui-menu-item-wrapper { margin: 0; padding: .45rem .65rem; border: 0; border-radius: 7px; color: var(--gss-text); }
.ui-autocomplete.ui-menu .ui-menu-item-wrapper.ui-state-active { margin: 0; background: var(--gss-green-700); border: 0; color: #fff; font-weight: 500; }

/* 17. CLASSES LEGADAS (usadas pelo JS das telas; mantidas e suavizadas) ===== */
.btn-acao { cursor: pointer; }
.ui-autocomplete { z-index: 1060; }
.table > tbody > tr.linhaZebrada, .linhaZebrada { background-color: var(--gss-surface-3); }
.table > tbody > tr.table-light { background-color: var(--gss-surface-2); }
/* [!9] o main.css antigo ja definia .zebrado com !important e ele e aplicado
   sobre linhas que tem zebra/hover; sem !important o destaque some. */
.zebrado, .table > tbody > tr.zebrado { background: rgba(245, 180, 0, .22) !important; }

/* 12. LOG DE EXECUCAO DE ESTRUTURA (painel de empresas) ===================== */
/* Lista de comandos que rolam durante a atualizacao do banco da empresa.
   Altura fixa: sem isso o modal cresce a cada comando e o botao de fechar
   sai da viewport em monitor pequeno. */
.gss-estrutura-log {
  max-height: 220px; overflow-y: auto;
  padding: 8px; border: 1px solid var(--gss-border); border-radius: var(--gss-radius-sm);
  background-color: var(--gss-surface-2);
  font-size: .8rem; line-height: 1.45;
}
.gss-estrutura-linha { padding: 2px 0; border-bottom: 1px solid var(--gss-border-soft, rgba(15, 23, 42, .06)); }
.gss-estrutura-linha:last-child { border-bottom: 0; }
.gss-estrutura-linha.ok    { color: var(--gss-text-muted); }
.gss-estrutura-linha.ok    > i { color: var(--gss-green-600, #16a34a); }
.gss-estrutura-linha.falha { color: var(--gss-text); }
.gss-estrutura-linha.falha > i { color: #dc2626; }
.gss-estrutura-linha > i { width: 1rem; text-align: center; margin-right: .35rem; }

/* 12b. CAMPO DE LOGO DA EMPRESA (Minha Empresa) ============================= */
.gss-logo-campo { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; }
.gss-logo-previa {
  display: flex; align-items: center; justify-content: center;
  width: 96px; height: 96px; flex: 0 0 96px;
  border: 1px dashed var(--gss-border-strong); border-radius: var(--gss-radius);
  background-color: var(--gss-surface-2); overflow: hidden;
}
.gss-logo-previa > img { max-width: 100%; max-height: 100%; object-fit: contain; }
.gss-logo-previa > span { font-size: 1.6rem; }
.gss-logo-acao { flex: 1 1 220px; }
.gss-logo-acao > label.btn { cursor: pointer; }

/* 12c. CONFIGURACAO DO MERCADO PAGO ========================================= */
/* Passos com estado: mostra o que falta sem exibir nenhuma credencial. */
.gss-mp-passos { display: flex; gap: .5rem; flex-wrap: wrap; }
.gss-mp-passo {
  display: flex; align-items: center; gap: .4rem;
  padding: .4rem .8rem; border: 1px solid var(--gss-border); border-radius: 999px;
  background-color: var(--gss-surface-2); color: var(--gss-text-muted);
  font-size: .8125rem; font-weight: 500;
}
.gss-mp-passo > i { font-size: .9rem; }
.gss-mp-passo.feito { border-color: var(--gss-green-600); background-color: var(--gss-green-50); color: var(--gss-green-900); }
.gss-mp-passo.feito > i { color: var(--gss-green-700); }

.gss-mp-titulo { display: flex; align-items: center; gap: .5rem; margin: 1.5rem 0 .25rem; font-weight: 600; color: var(--gss-text); }
.gss-mp-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%;
  background-color: var(--gss-green-700); color: #fff; font-size: .75rem; font-weight: 700;
}
.gss-mp-ajuda { font-size: .8125rem; margin-bottom: .75rem; }