/* Navegação: atalhos estáveis e catálogo na ordem da referência G-Click. */
.sidebar button.nav-link { width: 100%; border: 0; background: transparent; text-align: left; font: inherit; font-size: 12px; cursor: pointer; }
.sidebar button.nav-link:hover { background: rgba(255,255,255,.08); }
.sidebar button.nav-link.is-active { background: rgba(113,164,132,.2); }
.sidebar button.navigation-launch { background: #e6f6f3; color: #08232f; font-weight: 700; margin: 2px 0 8px; }
.sidebar button.navigation-launch:hover { background: #fff; }
.sidebar .nav-link:focus-visible, .rail-user:focus-visible { outline: 2px solid #2ce0b1; outline-offset: -2px; }
.sidebar { overflow-y: auto; }
.sidebar .sidebar-bottom { margin-top: auto; }
@media (min-width: 701px) {
  /* A página mantém o espaço da faixa estreita; a expansão fica sobre ela. */
  .main-area { margin-left: 64px; }
  body.navigation-open .sidebar { width: 224px; padding: 20px 12px 12px; box-shadow: none; }
  body.navigation-open .sidebar .brand { justify-content: flex-start; gap: 11px; padding: 0 9px; margin-bottom: 20px; }
  body.navigation-open .sidebar .brand-copy, body.navigation-open .sidebar .rail-user-name, body.navigation-open .sidebar .sidebar-bottom > span:not(.connection-dot) { display: flex; }
  body.navigation-open .sidebar .rail-user-name { flex-direction: column; gap: 4px; }
  body.navigation-open .sidebar .rail-user-name strong { font-size: 11px; }
  body.navigation-open .sidebar .rail-user-name small { font-size: 9px; }
  body.navigation-open .sidebar .sidebar-label { display: block; margin-top: 22px; }
  body.navigation-open .sidebar .nav-link > span:not(.nav-icon) { display: block; }
  body.navigation-open .sidebar .nav-link { justify-content: flex-start; padding: 0 10px; min-height: 42px; }
  body.navigation-open .sidebar .rail-user { justify-content: flex-start; padding: 8px; margin-bottom: 18px; }
  body.navigation-open .sidebar .sidebar-bottom { justify-content: flex-start; padding: 12px 7px 2px; }
}
.navigation-menu { padding: 0; color: #12303d; background: #fff; border: 1px solid #dde8ec; border-radius: 13px; box-shadow: 0 20px 80px #08232f38; width: min(1190px, calc(100vw - 96px)); max-width: none; max-height: calc(100dvh - 32px); margin: 16px 16px 16px 80px; overflow: hidden; }
.navigation-menu[open] { display: flex; flex-direction: column; }
.navigation-menu::backdrop { background: rgba(22,42,32,.2); }
.navigation-menu [hidden] { display: none !important; }
.navigation-menu button, .navigation-menu input { font: inherit; }
.navigation-menu button { cursor: pointer; }
.navigation-menu :is(a, button, input):focus-visible { outline: 2px solid #007f73; outline-offset: 2px; }
.navigation-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px 14px; flex-shrink: 0; }
.navigation-eyebrow { font-size: 9px; letter-spacing: .13em; font-weight: 700; color: #5f7480; }
.navigation-header h2 { margin: 4px 0 0; font-size: 23px; font-weight: 650; letter-spacing: -.6px; }
.navigation-close { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; padding: 0; border: 1px solid #dce8ec; border-radius: 8px; font-size: 25px !important; background: #fff; color: #526b5d; }
.navigation-close:hover { background: #eef5f6; }
.navigation-controls { padding: 0 24px 12px; border-bottom: 1px solid #e4edf0; flex-shrink: 0; }
.navigation-search { height: 40px; display: flex; align-items: center; gap: 9px; padding: 0 12px; border: 1px solid #c3d5da; border-radius: 7px; background: #f8fbfc; }
.navigation-search:focus-within { border-color: #00a896; box-shadow: 0 0 0 2px #00a89612; }
.navigation-search .icon { width: 17px; height: 17px; }
.navigation-search input { border: 0; background: transparent; width: 100%; padding: 0; min-width: 0; height: 100%; font-size: 13px; outline: none !important; box-shadow: none; }
.navigation-search kbd { border: 1px solid #d6e3e8; padding: 2px 4px; border-radius: 3px; font-size: 9px; color: #7a8d98; }
.navigation-filters { display: flex; gap: 5px; flex-wrap: wrap; padding: 12px 0 10px; }
.navigation-filters button { border: 1px solid transparent; background: transparent; color: #566e7a; border-radius: 5px; padding: 5px 8px; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; }
.navigation-filters button:hover { background: #f1f7f8; }
.navigation-filters button[aria-pressed="true"] { background: #e6f6f3; color: #0b4f5c; border-color: #b5dcd6; font-weight: 700; }
.navigation-filters button > span { font-size: 10px; opacity: .8; font-variant-numeric: tabular-nums; }
.navigation-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #858c96; }
.navigation-dot.is-ready { background: #00a896; }
.navigation-dot.is-partial { background: #b67b22; }
.navigation-dot.is-pending { background: #6b4fd8; box-shadow: 0 0 0 0 rgba(107,79,216,.5); animation: navigation-pulse 1.8s ease-out infinite; }
@keyframes navigation-pulse { 70% { box-shadow: 0 0 0 6px rgba(107,79,216,0); } 100% { box-shadow: 0 0 0 0 rgba(107,79,216,0); } }
@media (prefers-reduced-motion: reduce) { .navigation-dot.is-pending { animation: none; } }
.navigation-dot.is-review { background: #909193; }
.navigation-guide { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 10px; color: #5f7480; }
.navigation-guide label { white-space: nowrap; display: flex; align-items: center; gap: 5px; color: #0b4f5c; cursor: pointer; }
.navigation-guide input { width: 14px; height: 14px; accent-color: #007f73; }
.navigation-content { padding: 20px 24px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.navigation-columns { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; }
.navigation-column + .navigation-column { border-left: 1px solid #e4edf0; padding-left: 24px; }
.navigation-group { margin: 0 0 22px; }
.navigation-group:last-child { margin-bottom: 0; }
.navigation-group h3 { font-size: 13px; font-weight: 750; margin: 0 0 7px; display: flex; align-items: center; gap: 7px; color: #224530; }
.navigation-group h3 .icon { width: 16px; height: 16px; }
.navigation-group ul { padding: 0; margin: 0; list-style: none; }
.navigation-row { display: flex; align-items: center; gap: 5px; min-height: 31px; padding: 3px 0 3px 4px; border-radius: 4px; }
.navigation-row:hover, .navigation-row:focus-within { background: #f1f5ee; }
.navigation-name { flex: 1; min-width: 0; font-size: 12px !important; line-height: 1.35; font-weight: 450; color: #344d3c; background: transparent; border: 0; padding: 3px 0; text-align: left; text-decoration: none; }
.navigation-name:hover { color: #146841; text-decoration: underline; }
.navigation-state { display: inline-block; flex-shrink: 0; white-space: nowrap; font-size: 9px !important; line-height: 1.4; padding: 2px 5px; border: 1px solid transparent; border-radius: 4px; background: #f0f1f2; color: #61676d; }
.navigation-state.is-ready { color: #2d6943; background: #edf5e9; }
.navigation-state.is-partial { color: #86581c; background: #fcf2df; }
.navigation-state.is-pending { color: #4b34a8; background: #efeafc; }
.navigation-state.is-review { color: #666b72; background: #f0f1f2; }
button.navigation-state:hover { border-color: currentColor; }
.navigation-footer { border-top: 1px solid #e4edf0; padding: 11px 24px; background: #f9fbf7; display: flex; flex-wrap: wrap; gap: 5px 15px; font-size: 9px; color: #6d796f; flex-shrink: 0; }
.navigation-footer > span:first-child { font-weight: 700; color: #3f6249; }
.navigation-footer small { width: 100%; font-size: 9px; }
.navigation-empty { padding: 35px 0; font-size: 13px; text-align: center; color: #7b857b; }
.navigation-detail { max-width: 650px; margin: 2px auto 30px; padding: 4px; }
.navigation-back { display: block; border: 0; color: #446a4f; background: transparent; padding: 8px 0; margin-bottom: 18px; font-size: 12px !important; }
.navigation-detail h3 { margin: 10px 0 22px; font-size: 23px; letter-spacing: -.4px; }
.navigation-detail h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; margin: 20px 0 7px; color: #74806f; }
.navigation-detail p { font-size: 14px; line-height: 1.65; color: #415548; }
.navigation-detail .button { margin-top: 18px; white-space: normal; text-align: center; }
.navigation-detail .navigation-permission { padding: 10px; background: #f9f1de; font-size: 12px; }
body.navigation-open { overflow: hidden; }
@media (min-width: 701px) { .navigation-menu { margin-left: 236px; width: min(1280px, calc(100vw - 252px)); } }
@media (max-width: 1250px) and (min-width: 701px) {
  .navigation-columns { gap: 14px; }
  .navigation-column + .navigation-column { padding-left: 14px; }
  .navigation-content, .navigation-header, .navigation-controls { padding-left: 18px; padding-right: 18px; }
  .navigation-state { font-size: 8px !important; padding: 2px 3px; }
  .navigation-name { font-size: 11px !important; }
}
@media (max-width: 850px) {
  .navigation-columns { grid-template-columns: 1fr 1fr; }
  .navigation-column:last-child { grid-column: 1 / -1; border: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .navigation-guide { align-items: flex-start; }
}
@media (max-width: 700px) {
  .navigation-menu { inset: 0; margin: 8px; width: calc(100vw - 16px); max-height: calc(100dvh - 16px); border-radius: 10px; }
  .navigation-header { padding: 15px 16px 10px; }
  .navigation-header h2 { font-size: 20px; }
  .navigation-controls { padding: 0 16px 10px; }
  .navigation-content { padding: 16px; }
  .navigation-columns { display: block; }
  .navigation-column + .navigation-column { padding: 0; border: 0; }
  .navigation-column:last-child { display: block; }
  .navigation-group { margin-bottom: 25px; }
  .navigation-name { font-size: 13px !important; }
  .navigation-row { min-height: 39px; }
  .navigation-state { font-size: 10px !important; }
  .navigation-footer { padding: 9px 16px; }
  .navigation-footer > span:nth-child(2) { display: none; }
  .navigation-guide { flex-wrap: wrap; }
  .navigation-filters { gap: 3px; padding: 8px 0; }
  .navigation-filters button { padding: 4px 6px; font-size: 10px; }
  .navigation-columns .navigation-group:last-child { margin-bottom: 25px; }
}
@media print { .navigation-menu { display: none !important; } }

/* Painel no formato do G-Click: encostado no menu lateral, metade da largura e altura inteira; itens compactos e situação por ponto colorido */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 701px) {
  .navigation-menu { position: fixed; inset: 0 auto 0 224px; margin: 0; height: 100dvh; max-height: none; width: min(780px, calc(50vw + 40px)); min-width: 600px; border: 0; border-right: 1px solid #dde8ec; border-radius: 0; box-shadow: 10px 0 36px #08232f22; }
  .navigation-menu::backdrop { background: rgba(22,42,32,.12); }
  .navigation-header { padding: 12px 16px 6px; }
  .navigation-header h2 { margin: 0; font-size: 15px; letter-spacing: 0; }
  .navigation-close { width: 28px; height: 28px; font-size: 20px !important; }
  .navigation-controls { padding: 0 16px 8px; }
  .navigation-search { height: 34px; }
  .navigation-filters { padding: 8px 0 4px; }
  .navigation-guide { font-size: 10px; }
  .navigation-content { padding: 12px 16px 14px; }
  .navigation-columns { gap: 12px; }
  .navigation-column + .navigation-column { padding-left: 12px; }
  .navigation-group { margin: 0 0 14px; }
  .navigation-group h3 { font-size: 12.5px; margin: 0 0 4px; }
  .navigation-row { min-height: 22px; padding: 0 0 0 2px; gap: 4px; }
  .navigation-name { font-size: 12px !important; padding: 2px 0; line-height: 1.3; color: #47606d; }
  .navigation-state { padding: 4px; background: transparent; border: 0; }
  .navigation-state .navigation-dot { width: 7px; height: 7px; }
  .navigation-footer { padding: 8px 16px; }
  .navigation-footer > span:nth-child(2) { display: none; }
}

/* ===== GigiFlow: barra lateral e painel de menu integrados (sem divisão dura) ===== */
.sidebar { background: radial-gradient(120% 60% at 0% 0%, rgba(44,224,177,.10), transparent 55%), linear-gradient(180deg, #08232f 0%, #0a2a39 55%, #0b3142 100%); border-right: 0; }
body.navigation-open .sidebar { background: radial-gradient(130% 55% at 50% 0%, rgba(44,224,177,.13), transparent 60%), linear-gradient(180deg, #08232f 0%, #0a2a39 55%, #0b3142 100%); }
body.navigation-open .sidebar .brand { justify-content: center; gap: 0; padding: 10px 0 6px; margin-bottom: 18px; flex-direction: column; }
body.navigation-open .sidebar .brand .brand-icon { display: none; }
body.navigation-open .sidebar .brand-copy { align-items: center; text-align: center; display: flex; }
body.navigation-open .sidebar .brand-wide { width: 168px; height: auto; margin: 0 auto; filter: drop-shadow(0 4px 14px rgba(44,224,177,.18)); }
body.navigation-open .sidebar .brand-copy small { margin-top: 4px; letter-spacing: .08em; text-transform: uppercase; font-size: 8.5px; color: #6fa9ae; }
body.navigation-open .sidebar .rail-user { background: rgba(255,255,255,.05); border-radius: 12px; }
.sidebar .rail-user .avatar { box-shadow: 0 0 0 2px rgba(44,224,177,.55); }
.sidebar .nav-link { border-radius: 10px; }
.sidebar .nav-link.is-active { background: linear-gradient(90deg, rgba(44,224,177,.20), rgba(44,224,177,.04)); box-shadow: inset 3px 0 0 #2ce0b1; color: #fff; }
@media (min-width: 701px) {
  .navigation-menu { border-right: 0; border-radius: 0 22px 22px 0; background: linear-gradient(180deg, #fcfefe 0%, #f3f9fa 100%); box-shadow: 18px 0 60px rgba(8,35,47,.16); overflow: hidden; }
  /* a borda do painel nasce da própria barra: sombra que se dissolve, sem linha */
  .navigation-menu::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 34px; pointer-events: none; background: linear-gradient(90deg, rgba(8,35,47,.16), rgba(8,35,47,0)); }
  .navigation-header { background: linear-gradient(180deg, rgba(44,224,177,.10), rgba(44,224,177,0)); }
  .navigation-header h2 { color: #08232f; }
  .navigation-search { border-radius: 12px; background: #fff; border-color: #cfe2e6; box-shadow: 0 1px 0 rgba(8,35,47,.03); }
  .navigation-search:focus-within { border-color: #00a896; box-shadow: 0 0 0 3px rgba(0,168,150,.16); }
  .navigation-filters button[aria-pressed="true"] { background: #e6f6f3; color: #0b4f5c; border-color: #b5dcd6; }
  .navigation-group h3 { color: #08232f; }
  .navigation-row:hover { background: rgba(0,168,150,.07); border-radius: 8px; }
  .navigation-close { border-radius: 10px; }
}
/* O logotipo horizontal tem fundo próprio (#08232f): o topo da barra usa exatamente essa cor, para o logotipo se fundir sem moldura */
.sidebar, body.navigation-open .sidebar { background: linear-gradient(180deg, #08232f 0, #08232f 150px, #0a2a39 55%, #0b3142 100%); }
body.navigation-open .sidebar .brand-wide { filter: none; }