/* ==========================================================================
   CANARIN — THEME BASE (SIMPLIFICADO)
   -------------------------------------------------------------------------- */

/* Navbar / Títulos --------------------------------------------------------- */
.navbar-bg {
 background-color: #151515;
}

.nav-link-title,
.nav-link-icon {
 color: #ffffff;
}

.page-title {
 font-family: Poppins-Bold, sans-serif;
}

.page-title,
.page-pretitle {
 color: #000000;
}

/* Layout em telas largas --------------------------------------------------- */
@media (min-width: 992px) {
 :host,
  :root {
  margin-left: 0;
  margin-right: 0;
 }
}

/* Variáveis globais -------------------------------------------------------- */
:root {
 --can-primary: #ffd51c;
 --bg-top: #f7f9fc;
 --bg-mid: #eff3f8;
 --bg-bot: #e9eef5;
 --spot-a: rgba(255, 213, 28, 0.12);
 --spot-b: rgba(0, 102, 255, 0.06);
 --vignette: rgba(0, 0, 0, 0.10);
 --glass-bg: rgba(255, 255, 255, 0.62);
 --glass-blur: 14px;
 --glass-border: rgba(0, 0, 0, 0.08);
 --glass-shadow: 0 2px 6px rgba(15, 23, 42, 0.05),
    0 12px 28px rgba(15, 23, 42, 0.08);
 --glass-radius: 16px;
 --pill-bg: rgba(0, 0, 0, 0.035);
 --pill-active-bg: rgba(255, 255, 255, 0.85);
 --pill-active-ring: 0 0 0 2px rgba(0, 0, 0, 0.05) inset,
    0 8px 16px rgba(15, 23, 42, 0.06);
}

/* Tipografia base ---------------------------------------------------------- */
body {
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-rendering: optimizeLegibility;
 font-weight: 400;
 letter-spacing: -0.01em;
 font-synthesis: none;
}

h1,
h2,
h3 {
 font-weight: 600;
 letter-spacing: -0.015em;
}

h4,
h5,
h6,
.btn,
.nav-tabs .nav-link,
.form-label {
 font-weight: 500;
}

/* ==========================================================================
   FUNDO — aplique .bg-canar em .page
   -------------------------------------------------------------------------- */
.page.bg-canar {
 min-height: 100vh;
 background: radial-gradient(80rem 36rem at 12% -8%, var(--spot-a), transparent 60%),
    radial-gradient(70rem 34rem at 88% 108%, var(--spot-b), transparent 60%),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 55%, var(--bg-bot) 100%);
 position: relative;
}

.page.bg-canar::after {
 content: "";
 position: fixed;
 inset: 0;
 pointer-events: none;
 background: radial-gradient(120% 120% at 50% 20%, transparent 0 55%, var(--vignette) 100%);
 z-index: 0;
}

.page.bg-canar > .page-wrapper {
 position: relative;
 z-index: 1;
}

/* ==========================================================================
   CARD “VIDRO BRANCO”
   -------------------------------------------------------------------------- */
.glassw {
 border-radius: var(--glass-radius);
 background: var(--glass-bg);
 backdrop-filter: blur(var(--glass-blur));
 -webkit-backdrop-filter: blur(var(--glass-blur));
 border: 1px solid var(--glass-border);
 box-shadow: var(--glass-shadow);
}

/* Integração com Tabler */
.card.glassw {
 background: transparent;
 border: 0;
}

.card.glassw > .card-header {
 background: transparent;
 border: 0;
 padding-top: 1.25rem;
}

.card.glassw > .card-body {
 position: relative;
}

/* Inputs “de vidro” coerentes */
.glassw .form-control {
 background: rgba(255, 255, 255, 0.78);
 border: 1px solid rgba(0, 0, 0, 0.06);
 border-radius: 12px;
}

.glassw .form-control:focus {
 border-color: rgba(0, 0, 0, 0.12);
 box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

/* ==========================================================================
   ABAS (TABS) EM FORMATO PILL COM ACTIVE DESTACADO
   -------------------------------------------------------------------------- */
.glassw .nav-tabs {
 --tblr-border-color: transparent;
 /* remove linha padrão */
 background: transparent;
 gap: 0.375rem;
}

.glassw .nav-tabs .nav-link {
 border: 0;
 border-radius: 999px;
 padding: 0.45rem 0.85rem;
 background: var(--pill-bg);
 color: #1b1b1b;
 transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.glassw .nav-tabs .nav-link:hover {
 background: rgba(0, 0, 0, 0.06);
}

.glassw .nav-tabs .nav-link.active {
 background: var(--pill-active-bg);
 color: #0f0f0f;
 box-shadow: var(--pill-active-ring);
 transform: translateY(-1px);
 /* micro feedback */;
}

/* (opcional) botão “Salvar” mais suave */
.glassw .btn.btn-primary {
 border-radius: 10px;
}

/* ==========================================================================
   SECTION CARD
   -------------------------------------------------------------------------- */
.card-section.card {
 border-radius: var(--glass-radius);
 box-shadow: var(--glass-shadow);
 background: rgba(255, 255, 255, 0.08);
 backdrop-filter: blur(10px);
 -webkit-backdrop-filter: blur(10px);
}

.card-section.title-label {
 color: #7b7b7b;
 font-family: Poppins-SemiBold, Poppins-Medium, Poppins-Regular, sans-serif;
 font-size: 15px;
 margin: 15px 0 10px 15px;
}

.card-section.sub-title {
 font-family: Poppins-SemiBold, Poppins-Regular, sans-serif;
}


/* ============================================================
   NAVBAR — Liquid Glass (harmoniza com .glassw)
   ============================================================ */
.navbar-glass {
  /* base glass */
 background: var(--glass-bg);
 backdrop-filter: blur(var(--glass-blur)) saturate(140%);
 -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
 border-bottom: 1px solid var(--glass-border);
 box-shadow: var(--glass-shadow);
 color: #0f0f0f;
}

/* texto/ícones */
.navbar-glass .navbar-brand,
.navbar-glass .nav-link,
.navbar-glass .nav-link .icon,
.navbar-glass .nav-link-title,
.navbar-glass .navbar-toggler,
.navbar-glass .navbar-brand .navbar-brand-image {
 color: #0f0f0f !important;
 fill: #0f0f0f !important;
}

/* estado ativo/hover */
.navbar-glass .nav-link:hover {
 opacity: .85;
}

.navbar-glass .nav-item.active > .nav-link .nav-link-title::after {
 content: "";
 display: block;
 height: 3px;
 border-radius: 3px;
 background: var(--can-primary);
 margin-top: .35rem;
 transform: translateY(-2px);
}

/* avatar e itens à direita */
.navbar-glass .avatar {
 box-shadow: 0 2px 12px rgba(0,0,0,.08);
}

.navbar-glass .dropdown-menu {
  /* menu também “glass” */
 background: rgba(255,255,255,.86);
 backdrop-filter: blur(10px);
 -webkit-backdrop-filter: blur(10px);
 border: 1px solid rgba(0,0,0,.08);
 box-shadow: var(--glass-shadow);
}

/* mobile: mantém leitura sobre fundos claros/escuros */
@media (max-width: 991.98px) {
 .navbar-glass {
  background: rgba(255,255,255,.90);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
 }
}

/* quando usar .sticky-top, dá uma separação sutil do conteúdo */
.sticky-top .navbar-glass {
 border-radius: 0;
            /* nav full-width */
 box-shadow: 0 1px 0 rgba(0,0,0,.05),
    0 8px 24px rgba(15,23,42,.06);
}

/* se quiser uma “vignette” no fundo da navbar quando sobreposta a heróis claros */
.navbar-overlap.navbar-glass::after {
 content: "";
 position: absolute;
 inset: auto 0 0 0;
 height: 18px;
 pointer-events: none;
 background: linear-gradient(to bottom, rgba(0,0,0,.08), transparent);
 opacity: .06;
}

/* Navbar sticky acima do conteúdo */
.navbar-glass.sticky-top {
 z-index: 1030;
 /* acima de cards/dropdowns */;
}

/* quando a página rolar, aplica uma sombra sutil */
.has-sticky-shadow .navbar-glass.sticky-top {
 box-shadow: 0 1px 0 rgba(0,0,0,.05),
    0 8px 24px rgba(15,23,42,.06);
}

/* Desktop: sticky padrão */
.navbar-glass.sticky-top {
 z-index: 1030;
}

/* Altura padrão (fallback) */
:root {
 --navbar-h: 64px;
}

/* Navbar fixa com efeito glass */
.navbar-glass.fixed-top {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 z-index: 1090;
 /* acima de dropdowns/cards */
 background: var(--glass-bg);
 backdrop-filter: blur(var(--glass-blur)) saturate(140%);
 -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
 border-bottom: 1px solid var(--glass-border);
 box-shadow: var(--glass-shadow);
}

/* Compensa a altura da navbar no conteúdo */
.page-wrapper,
.page {
 padding-top: calc(var(--navbar-h) + env(safe-area-inset-top, 0px));
}

/* Sombra quando há rolagem */
.has-sticky-shadow .navbar-glass.fixed-top {
 box-shadow: 0 1px 0 rgba(0,0,0,.05),
    0 8px 24px rgba(15,23,42,.06);
}

/* (opcional) se você ainda tiver .navbar-overlap, neutraliza o overlap com fixed */
.navbar-overlap.navbar-glass.fixed-top {
 margin-bottom: 0;
}


/* menus sempre por cima e sem clipping */
header.navbar.fixed-top {
 z-index: 1080;
}

.navbar, .navbar .container, .navbar .container-xl {
 overflow: visible;
}

/* fallback: força dropdown a aparecer quando .show */
.dropdown-menu.show {
 display: block;
}

/* evita o dropdown ficar atrás de vidro/blur */
.navbar .dropdown-menu {
 z-index: 2000;
}

.navbar .nav-item.dropdown {
 position: relative;
}

.navbar .dropdown-menu {
 right: .5rem;
 left: auto;
 top: 63px;
 transform: none;
      /* não desloca */
 z-index: 5000;
}