/* ==========================================================================
   componentes.css — bloco "elite" genérico e tokenizado (JP / MR / qualquer tenant)
   --------------------------------------------------------------------------
   Carregado por ÚLTIMO (depois de style.css) em Templates/headerfim.php, para
   ganhar a cascata sem tocar no ficheiro de cor por-tenant.

   Regra de ouro: a cor de marca entra SÓ por var(--cor_principal[_rgb]); zero
   hex de marca hardcoded → funciona em qualquer tenant sem editar este ficheiro.

   Markup BS4 (utilitárias ml-/mr-/text-right). Aqui no CSS as propriedades
   `gap`/`grid` são CSS nativo (não classes BS) e podem ser usadas à vontade —
   o que NÃO existe são as UTILITÁRIAS BS5 (.gap-*, .rounded-*, .d-grid) no HTML.
   ========================================================================== */

:root{
  --surface-app:#f6f7f9;
  --surface-card:#fff;
  --hairline:rgba(0,0,0,.11);
  --card-shadow:0 1px 3px rgba(16,24,40,.10),0 1px 2px rgba(16,24,40,.07);
  --accent-soft:rgba(var(--cor_principal_rgb),.08);
  --accent-soft-2:rgba(var(--cor_principal_rgb),.13);
  --filete:rgba(var(--cor_principal_rgb),.38);
}

/* ========================================================================
   HOME — superfície neutra + crest de marca (watermark discreto)
   Aplicado como 2ª classe no .content-wrapper da home (index.php).
   ======================================================================== */
.home-elite{
  background:var(--surface-app);
  position:relative;
}
/* Crest: injectado por --home-crest (tenant_asset). Watermark muito ténue no
   canto superior direito; não interfere com o conteúdo (z-index/pointer). */
.home-elite::before{
  content:"";
  position:absolute;
  top:66px;
  right:34px;
  width:min(32vw,300px);
  height:104px;
  background:var(--home-crest) no-repeat top right;
  background-size:contain;
  opacity:.06;
  pointer-events:none;
  z-index:0;
}
.home-elite .content{
  position:relative;
  z-index:1;
}

/* ---- Cartão elite: superfície branca, hairline, sombra suave ------------- */
.home-elite .he-card{
  background:var(--surface-card);
  border:1px solid var(--hairline);
  border-radius:10px;
  box-shadow:var(--card-shadow);
  padding:18px 18px 20px;
  margin-bottom:1rem;
}

/* ---- Cabeçalho discreto (substitui o card-header cor_secundaria) --------- */
.home-elite .he-eyebrow{
  display:block;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:#6b7280;
  margin-bottom:12px;
}

/* ========================================================================
   PESQUISAR (herói, padrão SCP) — barra grande com LUPA + seletor de tipo
   (pílulas) POR BAIXO, tudo numa só caixa branca.
   NB: NADA de overflow:hidden aqui — cortaria o dropdown do select2.
   ======================================================================== */
/* Área de pesquisa: filete de acento a separar da secção seguinte. */
.home-elite .he-searcharea{
  padding-bottom:24px;
  margin-bottom:26px;
  border-bottom:1px solid var(--filete);
}
/* Caixa única (barra + pílulas), com borda/sombra. */
.home-elite .he-searchbox{
  background:var(--surface-card);
  border:1px solid var(--hairline);
  border-radius:14px;
  box-shadow:var(--card-shadow);
}
/* Barra de pesquisa (54px) com a lupa à esquerda. */
.home-elite .he-search{ position:relative; width:100%; }
.home-elite .he-searchicon{
  position:absolute;
  left:18px; top:0;
  height:54px;
  display:flex;
  align-items:center;
  color:var(--cor_principal);
  font-size:1.25rem;
  z-index:3;
  pointer-events:none;
}
/* Slots: só o do tipo activo (.he-on) fica visível. */
#heSlots > div[align="center"]{ display:none; padding:0; }
#heSlots > div[align="center"].he-on{ display:block; }
/* select2 single estilizado como barra de pesquisa grande. */
#heSlots .he-on .select2-container{ width:100% !important; }
#heSlots .he-on .select2-container--default .select2-selection--single{
  height:54px; border:0; border-radius:0; box-shadow:none; background:transparent;
}
#heSlots .he-on .select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height:54px; padding-left:50px; color:#495057; font-size:1.05rem; text-align:left;
}
#heSlots .he-on .select2-container--default .select2-selection--single .select2-selection__arrow{
  height:54px; right:14px;
}
/* Seletor de tipo (pílulas) POR BAIXO da barra, separado por um filete. */
.s2-seg{
  display:inline-flex; flex-wrap:wrap; align-items:center;
  padding:2px; gap:2px; border:1px solid rgba(0,0,0,.15); border-radius:999px;
}
.s2-seg .btn{
  border:0; box-shadow:none; border-radius:999px;
  padding:3px 14px; font-size:.8rem; line-height:1.5; white-space:nowrap;
}
.s2-seg .btn:not(.cor_principal){ background:transparent; color:#6c757d; }
.s2-seg .btn:not(.cor_principal):hover{ background:rgba(0,0,0,.05); }
.s2-seg .btn.cor_principal:hover{ background-color:var(--cor_principal); color:#fff; }
.home-elite .he-switch{
  display:flex; flex-wrap:wrap; align-items:center; width:100%;
  margin:0; padding:8px 11px 10px;
  background:transparent; border:0; border-top:1px solid var(--hairline); border-radius:0;
}
.home-elite .he-switch .btn{ padding:6px 14px; font-size:.82rem; border-radius:999px; }
.home-elite .he-switch .btn:not(.cor_principal){ color:#495057; }

/* ========================================================================
   TILES elite — superfície neutra + hairline + cor de CATEGORIA no
   ícone/letra e no filete de topo (decisão 1 do contrato).
   Categorias:  brand (entidades) · grupo (cinza) · admin (âmbar).
   ======================================================================== */
.home-elite .he-tiles{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
  gap:8px;
}
.home-elite .he-tiles--lg{
  grid-template-columns:repeat(auto-fill,minmax(112px,1fr));
}

.home-elite .he-tile{
  --tile-accent:var(--cor_principal);
  --tile-accent-rgb:var(--cor_principal_rgb);
  --tile-icon:var(--cor_principal);
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height:74px;
  padding:12px 8px;
  background:var(--surface-card);
  border:1px solid var(--hairline);
  border-radius:9px;
  color:#374151;               /* vence a:link/a:visited via scope .home-elite */
  text-decoration:none;
  font-family:inherit;
  font-size:.76rem;
  font-weight:600;
  line-height:1.1;
  cursor:pointer;
  overflow:hidden;             /* recorta o filete de topo (não há select2 aqui) */
  transition:border-color .12s,box-shadow .12s,transform .06s,background-color .12s;
}
.home-elite .he-tiles--lg .he-tile{
  min-height:88px;
  font-size:.8rem;
}
/* Filete de acento no topo (cor de categoria). */
.home-elite .he-tile::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background:var(--tile-accent);
  opacity:.85;
}
.home-elite .he-tile .he-ico{
  font-size:1.4rem;
  line-height:1;
  margin-bottom:6px;
  color:var(--tile-icon);
}
.home-elite .he-tiles--lg .he-tile .he-ico{
  font-size:1.7rem;
}
.home-elite .he-tile .he-letra{
  font-family:Arial,sans-serif;
  font-weight:700;
  font-size:1.35rem;
  line-height:1;
  margin-bottom:6px;
  color:var(--tile-icon);
}
.home-elite .he-tile:hover,
.home-elite .he-tile:focus{
  color:#111827;
  background:rgba(var(--tile-accent-rgb),.06);
  border-color:rgba(var(--tile-accent-rgb),.45);
  box-shadow:var(--card-shadow);
  transform:translateY(-1px);
  text-decoration:none;
}

/* Categoria: grupos de oficina (cinza neutro). */
.home-elite .he-tile--grupo{
  --tile-accent:#6c757d;
  --tile-accent-rgb:108,117,125;
  --tile-icon:#5a6268;
}
/* Categoria: administração (âmbar; ícone em goldenrod escuro p/ legibilidade). */
.home-elite .he-tile--admin{
  --tile-accent:#f0c75a;
  --tile-accent-rgb:240,199,90;
  --tile-icon:#b7791f;
}

/* Divisor de grupo dentro da grelha de atalhos (rótulo + hairline). */
.home-elite .he-divider{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  margin:8px 0 2px;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:#9aa1ab;
}
.home-elite .he-divider::after{
  content:"";
  flex:1 1 auto;
  height:1px;
  background:var(--hairline);
  margin-left:8px;
}

/* ========================================================================
   Refinamentos globais discretos (não-home)
   ======================================================================== */
/* Navbar: ritmo horizontal dos ícones da direita (respiro entre items). */
.main-header .navbar-nav.ml-auto > .nav-item > .nav-link{
  padding-left:.7rem;
  padding-right:.7rem;
}
/* Sidebar (dark): barra-acento clara no item activo — leitura "elite" e
   segura em qualquer tenant (a faixa de cor de marca fica no navbar/rodapé). */
aside.main-sidebar .nav-sidebar > .nav-item > .nav-link.active{
  box-shadow:inset 3px 0 0 rgba(255,255,255,.6);
}

/* ========================================================================
   Chrome elite GLOBAL — páginas autenticadas (scoped a .content-wrapper, para
   NÃO tocar em login/modais/dropdowns). Eleva ~todas as páginas sem reescrever
   markup: quase tudo usa .card padrão do AdminLTE.
   Conservador de propósito: só cantos/sombra/hairline; NÃO usa `border`
   shorthand no .card (preservaria os topos coloridos de .card-*.card-outline).
   ======================================================================== */
.content-wrapper{ background:var(--surface-app); }
.content-wrapper .card{
  border-radius:10px;
  box-shadow:var(--card-shadow);
}
.content-wrapper .card > .card-header{
  border-bottom:1px solid var(--hairline);
}
/* Cabeçalho cinzento (cor_secundaria) → neutro com filete subtil de marca. */
.content-wrapper .card > .card-header.cor_secundaria{
  background:var(--surface-card);
  border-bottom:1px solid var(--filete);
}
.content-wrapper .card > .card-footer{
  background:transparent;
  border-top:1px solid var(--hairline);
}
/* small-box (estatísticas): TONAL em vez do bloco saturado do AdminLTE —
   superfície neutra + faixa de acento à esquerda + número na cor semântica.
   (os .bg-* do AdminLTE usam !important → override com !important; scoped a
   .small-box, logo badges/pills .bg-* ficam intactos.) */
.content-wrapper .small-box{
  border-radius:10px;
  box-shadow:var(--card-shadow);
  background:var(--surface-card) !important;
  color:#212529 !important;
  border:1px solid var(--hairline);
  overflow:hidden;
}
.content-wrapper .small-box > .inner h3,
.content-wrapper .small-box > .inner h6,
.content-wrapper .small-box > .inner p{ color:#212529 !important; }
.content-wrapper .small-box > .inner h3{ font-weight:700; }
.content-wrapper .small-box .icon{ color:rgba(16,24,40,.06) !important; }
/* Faixa de acento à esquerda + número na cor semântica (contraste em branco). */
.content-wrapper .small-box.bg-info{ border-left:4px solid #17a2b8; }
.content-wrapper .small-box.bg-success{ border-left:4px solid #28a745; }
.content-wrapper .small-box.bg-warning{ border-left:4px solid #e0a800; }
.content-wrapper .small-box.bg-info > .inner h3{ color:#117a8b !important; }
.content-wrapper .small-box.bg-success > .inner h3{ color:#1e7e34 !important; }
.content-wrapper .small-box.bg-warning > .inner h3{ color:#b8860b !important; }

/* Linhas de tabela com detalhe (data-href) → clicáveis (nav global em dt2-row-select.js). */
.content-wrapper table.dataTable tbody tr[data-href]{ cursor:pointer; }

/* ========================================================================
   LOGIN / entrada — páginas standalone AdminLTE (.login-page).
   Foto de marca (cover, sem distorção) + véu + card elite tokenizado.
   Ligar este ficheiro em Login/novo.php e Login/codigo.php.
   ======================================================================== */
body.login-page{
  min-height:100vh;
  background:#1f2937 url('/assets/login.jpg') center center / cover no-repeat fixed;
}
/* Véu por cima da foto para o card sobressair (foto de engrenagens é clara). */
body.login-page::before{
  content:"";
  position:fixed; inset:0;
  background:linear-gradient(180deg, rgba(17,24,39,.52), rgba(17,24,39,.72));
  z-index:0;
  pointer-events:none;
}
.login-page .login-box,
.login-page .register-box{
  position:relative; z-index:1;
  width:392px; max-width:92%;
}
/* Card: superfície branca, hairline, acento de marca no topo, sombra funda. */
.login-page .login-box > .card,
.login-page .register-box > .card{
  border:1px solid var(--hairline);
  border-top:3px solid var(--cor_principal);
  border-radius:14px;
  box-shadow:0 24px 50px -18px rgba(0,0,0,.55), var(--card-shadow);
  overflow:hidden;
}
.login-page .card-header{
  background:var(--surface-card);
  border-bottom:1px solid var(--hairline);
  padding:24px 22px 14px;
}
.login-page .card-header h1,
.login-page .card-header h3{ margin:0; font-weight:700; letter-spacing:-.01em; }
.login-page .card-body{ padding:22px; }
.login-page .form-control{ border-radius:8px; }
/* Input-group: manter os cantos coerentes (campo à esquerda, ícone à direita). */
.login-page .input-group > .form-control{ border-top-right-radius:0; border-bottom-right-radius:0; }
.login-page .input-group-text{
  background:var(--surface-app); color:#6b7280; border-color:var(--hairline);
  border-top-right-radius:8px; border-bottom-right-radius:8px;
}
/* Botão primário a toda a largura (mantém a cor de marca — é a ação principal). */
.login-page .btn.cor_principal{ border-radius:8px; font-weight:600; }