/* =========================================================
   CONGHUB · ACABAMENTO PREMIUM
   Camada visual carregada por último. Só aparência: não muda
   comportamento, textos nem estrutura das telas.
   • Superfícies: um sistema único de cartões (raio, borda, sombra)
   • Hierarquia: títulos de página, seções e rótulos consistentes
   • Controles: botões, campos e abas com altura e foco padronizados
   • Navegação: menu lateral, barra superior e barra inferior refinados
========================================================= */
:root{
  --surface: #FFFFFF;
  --canvas: #F3F6FA;
  --line-soft: #E7ECF2;
  --shadow-1: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 1px rgba(16, 24, 40, .03);
  --shadow-2: 0 1px 2px rgba(16, 24, 40, .05), 0 6px 18px -6px rgba(16, 24, 40, .10);
  --shadow-3: 0 2px 4px rgba(16, 24, 40, .06), 0 16px 32px -12px rgba(16, 24, 40, .18);
  --r-card: 16px;
  --r-ctl: 10px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- Fundo e texto ---------- */
body{
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
#appRoot.app{
  background:
    radial-gradient(900px 420px at 100% -10%, rgba(23, 134, 252, .07), transparent 60%),
    radial-gradient(700px 380px at -10% 0%, rgba(11, 42, 99, .05), transparent 60%),
    var(--canvas);
}
#appRoot h1, #appRoot h2, #appRoot h3, #appRoot .booklet-title{ text-wrap: balance; }

/* ---------- Barra superior ---------- */
#appRoot > .topbar{
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
  box-shadow: 0 1px 0 rgba(16, 24, 40, .02);
}
#appRoot .brand-mark{ border-radius: 11px; box-shadow: 0 2px 6px rgba(11, 42, 99, .22); }
#appRoot .wordmark{ letter-spacing: -.02em; }
#appRoot .brand-text > span{ color: var(--text-muted); font-weight: 500; }
#appRoot .user-chip{ background: var(--surface); border-color: var(--line-soft); box-shadow: var(--shadow-1); transition: box-shadow .2s var(--ease); }
#appRoot .user-chip:hover{ box-shadow: var(--shadow-2); }
#appRoot .user-avatar{ background: linear-gradient(135deg, #1786FC, #0B2A63); color: #fff; }
#appRoot .notif-bell{ border-radius: 12px; transition: background-color .15s ease; }
#appRoot .notif-bell:hover{ background: var(--brand-soft); }

/* ---------- Menu lateral (computador) ---------- */
@media (min-width: 1100px){
  #appRoot > .tabs{ background: rgba(255, 255, 255, .72); border-right-color: var(--line-soft); padding: 22px 14px; }
  #appRoot .nav-label{ font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #687386; margin: 18px 12px 6px; }
  #appRoot .nav-section:first-child .nav-label{ margin-top: 2px; }
  #appRoot .tab-btn{ position: relative; border-radius: 11px; min-height: 42px; color: #3B4556; transition: background-color .15s ease, color .15s ease, box-shadow .2s var(--ease); }
  #appRoot .tab-btn:hover{ background: rgba(11, 42, 99, .05); color: var(--brand); }
  #appRoot .tab-btn.active{
    background: var(--surface); color: var(--brand); font-weight: 700;
    box-shadow: var(--shadow-2), inset 0 0 0 1px var(--line-soft);
  }
  #appRoot .tab-btn.active::before{
    content: ''; position: absolute; left: -14px; top: 9px; bottom: 9px; width: 4px; border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg, #1786FC, #0B2A63);
  }
  #appRoot .tab-btn.active .tab-icon{ color: var(--brand-accent); }
}

/* ---------- Cabeçalho das páginas ---------- */
#appRoot .tab-panel > .toolbar{ margin-bottom: 22px; }
#appRoot .booklet-title{ font-size: 30px; font-weight: 800; letter-spacing: -.025em; color: #0F1B33; line-height: 1.15; }
#appRoot .booklet-range{ font-size: 14.5px; color: var(--text-muted); margin-top: 4px; }
#panel-home > .toolbar{
  position: relative; overflow: hidden; border-radius: 22px;
  background:
    radial-gradient(520px 260px at 95% -30%, rgba(23, 134, 252, .55), transparent 65%),
    radial-gradient(380px 200px at 10% 140%, rgba(20, 163, 163, .25), transparent 60%),
    linear-gradient(135deg, #061B45 0%, #0B2A63 55%, #133F8C 100%);
  box-shadow: 0 18px 40px -18px rgba(11, 42, 99, .55);
}
#panel-home > .toolbar::after{
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255, 255, 255, .14) 1px, transparent 1.4px); background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent 40%, #000); mask-image: linear-gradient(90deg, transparent 40%, #000);
}
#panel-home > .toolbar .booklet-title{ color: #fff; }
#panel-home > .toolbar .booklet-range{ color: rgba(255, 255, 255, .78); }

/* Títulos de seção */
#appRoot .section-title{ font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: #0F1B33; margin-top: 30px; }

/* ---------- Superfícies (um só sistema de cartões) ---------- */
#appRoot .report-card, #appRoot .stat-card, #appRoot .member-card, #appRoot .territory-card, #appRoot .fs-group-card,
#appRoot .item-card, #appRoot .activity-block, #appRoot .info-block, #appRoot .publication,
#appRoot .bus-card, #appRoot .sec-summary{
  border: 1px solid var(--line-soft); border-radius: var(--r-card);
  background-color: var(--surface); box-shadow: var(--shadow-2);
}
#appRoot .report-card, #appRoot .publication, #appRoot .activity-block, #appRoot .info-block{ overflow: hidden; }
#appRoot .report-card-header{ background: linear-gradient(180deg, #FBFCFE, #fff); border-bottom-color: var(--line-soft); }
#appRoot .report-card-header h3{ font-size: 15.5px; font-weight: 800; letter-spacing: -.01em; color: #0F1B33; }
#appRoot .member-card, #appRoot .territory-card, #appRoot .fs-group-card, #appRoot .mydesig-item, #appRoot .item-card{
  transition: box-shadow .22s var(--ease), transform .22s var(--ease), border-color .2s ease;
}
@media (hover: hover){
  #appRoot .member-card:hover, #appRoot .territory-card:hover, #appRoot .mydesig-item:hover, #appRoot .item-card:hover{
    box-shadow: var(--shadow-3); border-color: #D6DEE9;
  }
}
/* Minhas designações: mantém as cores de destaque, só refina forma e profundidade */
#appRoot .mydesig-item{ border-radius: 14px; box-shadow: var(--shadow-2); }

/* Indicadores */
#appRoot .stat-grid{ gap: 14px; }
#appRoot .stat-card{ position: relative; padding: 18px 20px; overflow: hidden; }
#appRoot .stat-card::after{
  content: ''; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%;
  background: radial-gradient(circle, rgba(23, 134, 252, .10), transparent 70%);
}
#appRoot .stat-card .stat-value{ font-size: 32px; font-weight: 800; letter-spacing: -.03em; color: var(--brand); }
#appRoot .stat-card .stat-label{ font-weight: 600; color: #3B4556; }
#appRoot .stat-delta{ font-size: 12px; }

/* ---------- Botões ---------- */
#appRoot .btn, .pf-modal .btn{ border-radius: var(--r-ctl); font-weight: 700; letter-spacing: -.005em;
  transition: background-color .15s ease, box-shadow .2s var(--ease), transform .12s ease, border-color .15s ease; }
#appRoot .btn:active{ transform: translateY(1px); }
#appRoot .btn-primary{
  background: linear-gradient(180deg, #13397F, #0B2A63); border-color: #0B2A63;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 6px 14px -6px rgba(11, 42, 99, .55);
}
#appRoot .btn-primary:hover{ background: linear-gradient(180deg, #17449A, #0D3175); box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 10px 20px -8px rgba(11, 42, 99, .6); }
#appRoot .btn-ghost{ background: var(--surface); border: 1px solid #D9E0EA; color: #1C2A44; box-shadow: var(--shadow-1); }
#appRoot .btn-ghost:hover{ background: #F7F9FC; border-color: #C5CFDD; }
#appRoot .btn:focus-visible, #appRoot .tab-btn:focus-visible, #appRoot .link-btn:focus-visible, #appRoot .icon-btn:focus-visible{
  outline: none; box-shadow: var(--focus);
}
#appRoot .icon-btn{ border-radius: 10px; transition: background-color .15s ease, color .15s ease; }

/* Botões com ícone (agenda, destaque) */
.btn-ico{ display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
#appRoot .home-actions{ display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
#appRoot .home-actions .btn{ min-height: 44px; }
.btn-ico svg{ width: 18px; height: 18px; flex: 0 0 auto; }

/* ---------- Campos ---------- */
#appRoot input[type="text"], #appRoot input[type="number"], #appRoot input[type="date"], #appRoot input[type="search"],
#appRoot input[type="time"], #appRoot select, #appRoot textarea{
  border-radius: var(--r-ctl); border-color: #D9E0EA; background-color: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#appRoot input:focus, #appRoot select:focus, #appRoot textarea:focus{ border-color: var(--brand-accent); box-shadow: 0 0 0 3px rgba(23, 134, 252, .16); outline: none; }
#appRoot .assign-field{ border-radius: var(--r-ctl); border-color: #D9E0EA; box-shadow: var(--shadow-1); }
#appRoot .assign-field:hover{ border-color: #B9C4D3; }
#appRoot .dropdown{ border-radius: 14px; border-color: var(--line-soft); box-shadow: var(--shadow-3); }

/* ---------- Abas internas (segmentado) ---------- */
#appRoot .segmented{ background: #E9EEF5; border: 0; border-radius: 12px; padding: 4px; box-shadow: inset 0 1px 2px rgba(16, 24, 40, .06); }
#appRoot .segmented button{ border-radius: 9px; font-weight: 700; min-height: 38px; transition: background-color .15s ease, color .15s ease, box-shadow .2s var(--ease); }
#appRoot .segmented button.active{ background: #fff; color: var(--brand); box-shadow: var(--shadow-2); }

/* ---------- Tabelas ---------- */
#appRoot .report-table{ border: 1px solid var(--line-soft); border-radius: 14px; overflow: hidden; background: #fff; box-shadow: var(--shadow-1); border-collapse: separate; border-spacing: 0; }
#appRoot .report-table thead th{ background: #F7F9FC; color: #5A6578; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid var(--line-soft); }
#appRoot .report-table tbody tr{ transition: background-color .12s ease; }
#appRoot .report-table tbody tr:hover td{ background: #F9FBFE; }
#appRoot .report-table td{ border-bottom: 1px solid #EEF2F6; }
#appRoot .report-table tbody tr:last-child td{ border-bottom: 0; }

/* ---------- Faixas e avisos ---------- */
#appRoot .note-bar, #appRoot .alert-bar{ border-radius: 14px; }
#appRoot .ro-note{ border-radius: 14px; display: flex; align-items: center; gap: 10px; }
#appRoot .ro-note svg, #appRoot .ro-week-banner svg{ width: 18px; height: 18px; flex: 0 0 auto; color: #F2A33A; }
#appRoot .ro-week-banner{ display: flex; align-items: center; gap: 8px; }
#appRoot .progress-strip{ gap: 6px; }

/* Selos e etiquetas */
#appRoot .mydesig-tag, #appRoot .event-tag, #appRoot .status-badge{ border-radius: 999px; font-weight: 700; letter-spacing: .01em; }

/* ---------- Painel de notificações e modais ---------- */
#appRoot .notif-panel{ border-radius: 18px; border-color: var(--line-soft); box-shadow: var(--shadow-3); }
.modal-box{ border-radius: 20px; box-shadow: 0 30px 60px -20px rgba(16, 24, 40, .35); }
.modal-overlay{ -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.toast{ border-radius: 14px; box-shadow: 0 12px 30px -10px rgba(16, 24, 40, .45); }

/* ---------- Celular ---------- */
@media (max-width: 720px){
  #appRoot .booklet-title{ font-size: 25px; }
  #panel-home > .toolbar{ border-radius: 20px; }
  #appRoot > .tabs{
    background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px);
    border-top-color: var(--line-soft); box-shadow: 0 -8px 24px -12px rgba(16, 24, 40, .18);
  }
  #appRoot .tab-btn{ flex: 1 1 0; min-width: 0; min-height: 52px; color: #5A6578; }
  #appRoot .tab-btn.active{ color: var(--brand); }
  #appRoot .tab-btn.active .tab-icon{ background: linear-gradient(180deg, #E3EDFF, #D6E5FF); }
  #appRoot .tab-short{ overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  /* Até 5 itens: o restante vai para "Mais" */
  #appRoot .tab-btn.nav-overflow{ display: none !important; }
  #appRoot .stat-card{ padding: 14px 16px; }
  #appRoot .stat-card .stat-value{ font-size: 26px; }
}
#appRoot .tab-more{ display: none; }
@media (max-width: 720px){ #appRoot .tab-more.show{ display: flex; } }

/* Painel "Mais" (celular) */
.nav-sheet-overlay{ position: fixed; inset: 0; z-index: 400; background: rgba(15, 23, 42, .38); opacity: 0; transition: opacity .2s ease;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.nav-sheet-overlay.on{ opacity: 1; }
.nav-sheet{ position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 22px 22px 0 0;
  padding: 10px 16px calc(18px + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform .26s var(--ease);
  box-shadow: 0 -20px 40px -20px rgba(16, 24, 40, .35); }
.nav-sheet-overlay.on .nav-sheet{ transform: none; }
.nav-sheet-grab{ width: 40px; height: 5px; border-radius: 999px; background: #D5DCE6; margin: 2px auto 12px; }
.nav-sheet h3{ margin: 0 4px 10px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #687386; }
.nav-sheet-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.nav-sheet-item{ display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 12px 14px; border-radius: 14px;
  border: 1px solid var(--line-soft); background: #F8FAFD; color: #1C2A44; font: inherit; font-size: 15px; font-weight: 700; text-align: left; cursor: pointer; }
.nav-sheet-item svg{ width: 22px; height: 22px; color: var(--brand); flex: 0 0 auto; }
.nav-sheet-item.active{ background: var(--brand-soft); border-color: #C9DAF7; color: var(--brand); }
.nav-sheet-item .nav-sheet-badge{ margin-left: auto; background: var(--brand-accent); color: #fff; border-radius: 999px; font-size: 11px; padding: 1px 7px; }

@media (prefers-reduced-motion: reduce){
  #appRoot *, .nav-sheet, .nav-sheet-overlay{ transition: none !important; animation: none !important; }
}
#appRoot .note-bar{ display: flex; align-items: center; gap: 10px; }
#appRoot .note-bar > svg{ width: 18px; height: 18px; flex: 0 0 auto; color: #F2A33A; }

/* =========================================================
   CORREÇÕES DE CELULAR
========================================================= */

/* ---------- 1. Painel de notificações: X e fundo clicável ---------- */
#appRoot .notif-panel-header{ display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.notif-head-actions{ display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.notif-close{
  display: flex; width: 36px; height: 36px; flex: 0 0 auto;
  align-items: center; justify-content: center;
  border: 0; border-radius: 10px; background: none; color: var(--ink-soft); cursor: pointer;
}
.notif-close svg{ width: 18px; height: 18px; }
.notif-close:hover{ background: var(--paper); color: var(--ink); }

/* Botão de ligar/desligar o som — sempre visível, no cabeçalho do painel */
.notif-sound-btn{
  display: flex; width: 36px; height: 36px; flex: 0 0 auto;
  align-items: center; justify-content: center;
  border: 0; border-radius: 10px; background: none; color: var(--ink-soft); cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.notif-sound-btn svg{ width: 18px; height: 18px; }
.notif-sound-btn:hover{ background: var(--paper); color: var(--ink); }
.notif-sound-btn.is-off{ color: #B42318; }
.notif-sound-btn:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(23, 134, 252, .3); }
/* Fica ABAIXO da barra superior (z-index 150), que é onde o painel vive.
   Com o painel aberto a barra sobe, para o painel ficar clicável por cima do fundo. */
.notif-backdrop{
  position: fixed; inset: 0; z-index: 140; background: rgba(15, 23, 42, .38);
  opacity: 0; transition: opacity .2s ease;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.notif-backdrop.on{ opacity: 1; }

body.notif-open #appRoot > .topbar{ z-index: 180; }

@media (max-width: 720px){
  .notif-close{ display: flex; }                 /* no celular o painel cobre a tela: precisa do X */
  body.notif-open{ overflow: hidden; }
  #appRoot .notif-panel{ z-index: 200; }
  /* X sempre no alto à direita; "Marcar todas" desce para a 2ª linha */
  #appRoot .notif-panel-header{
    position: sticky; top: 0; z-index: 2; background: #fff;
    display: grid; grid-template-columns: 1fr auto auto; align-items: center; row-gap: 2px;
  }
  #appRoot .notif-panel-header > .notif-head-actions{ display: contents; }
  #appRoot .notif-head-actions .notif-sound-btn{ grid-column: 2; grid-row: 1; }
  #appRoot .notif-close{ grid-column: 3; grid-row: 1; display: flex; }
  #appRoot .notif-head-actions .link-btn{ grid-column: 1 / -1; grid-row: 2; justify-self: start; padding-left: 0; font-size: 12.5px; }
}

/* ---------- 2. Rodapé do modal (Cancelar / Confirmar) ---------- */
@media (max-width: 720px){
  .bus-join-footer{ flex-direction: column; align-items: stretch; gap: 14px; }
  .bus-join-footer > div:last-child{ display: flex; gap: 10px; }
  .bus-join-footer > div:last-child .btn{ flex: 1 1 0; min-height: 48px; white-space: nowrap; }
  .bus-join-total{ display: flex; align-items: baseline; gap: 8px; }

  /* Mesma regra para os outros formulários em janela */
  .modal-box .form-actions, .modal-overlay .form-actions{ gap: 10px; }
  .modal-box .form-actions .btn, .modal-overlay .form-actions .btn{ flex: 1 1 0; min-height: 48px; }
}

/* ---------- 3. Escolher publicador: painel que sobe de baixo ---------- */
.dd-backdrop{
  position: fixed; inset: 0; z-index: 400; background: rgba(15, 23, 42, .42);
  opacity: 0; transition: opacity .2s ease;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.dd-backdrop.on{ opacity: 1; }
body.dd-locked{ overflow: hidden; }

.dropdown.dd-sheet{
  position: absolute; left: 0; right: 0; bottom: 0; top: auto;
  width: auto; max-width: none; max-height: 78vh; overflow: visible;
  display: flex; flex-direction: column;
  border: 0; border-radius: 22px 22px 0 0;
  box-shadow: 0 -20px 40px -20px rgba(16, 24, 40, .4);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(100%); transition: transform .26s var(--ease);
}
.dd-backdrop.on .dropdown.dd-sheet{ transform: none; }
.dd-sheet-head{ flex: 0 0 auto; padding: 8px 8px 0; }
.dd-sheet-grab{ display: block; width: 40px; height: 5px; border-radius: 999px; background: #D5DCE6; margin: 2px auto 10px; }
.dd-sheet-bar{ display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 10px 10px; }
.dd-sheet-bar b{ font-size: 16px; font-weight: 800; letter-spacing: -.01em; color: #0F1B33; }
.dd-sheet-x{
  width: 40px; height: 40px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 12px; background: var(--paper); color: var(--ink-soft); cursor: pointer;
}
.dd-sheet-x svg{ width: 18px; height: 18px; }
.dropdown.dd-sheet .dropdown-search{ position: static; padding: 0 16px 10px; border-bottom: 1px solid var(--line-soft); }
.dropdown.dd-sheet .dropdown-search input{ min-height: 48px; font-size: 16px; padding: 10px 14px; border-radius: 12px; }
.dd-sheet-list{ flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 6px 0; }
.dropdown.dd-sheet .dropdown-item{ min-height: 60px; padding: 10px 18px; gap: 12px; font-size: 15.5px; }
.dropdown.dd-sheet .dropdown-item .dd-avatar{ width: 34px; height: 34px; font-size: 12px; }
.dropdown.dd-sheet .dropdown-item .dd-name{ font-size: 15.5px; }
.dropdown.dd-sheet .dropdown-item .dd-sub{ font-size: 12.5px; }
.dropdown.dd-sheet .dropdown-clear{
  flex: 0 0 auto; min-height: 54px; display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; color: var(--red-flag); border-top: 1px solid var(--line-soft);
}

/* =========================================================
   MENU LATERAL — setas ↑/↓ no lugar da barra de rolagem
   (só no layout vertical do computador, ≥1100px)
========================================================= */
/* Escondidas POR PADRÃO, fora do media query. No celular e no tablet o
   menu é horizontal/inferior e não tem setas; se o "display: none"
   ficasse só dentro do bloco de ≥1100px, no celular os dois botões
   apareceriam sem estilo nenhum — duas caixas vazias nas pontas. */
.nav-arrow{ display: none; }

@media (min-width: 1100px){
  #appRoot > .tabs{ scrollbar-width: none; }
  #appRoot > .tabs::-webkit-scrollbar{ width: 0; height: 0; display: none; }

  .nav-arrow{
    position: sticky; z-index: 6; align-self: stretch;
    align-items: center; justify-content: center; height: 30px; padding: 0;
    border: 0; cursor: pointer; color: var(--ink-soft); background: transparent;
    transition: color .15s ease;
  }
  .nav-arrow.show{ display: flex; }
  .nav-arrow svg{ width: 22px; height: 22px; }
  .nav-arrow:hover{ color: var(--brand); }
  .nav-arrow:active{ transform: translateY(1px); }
  .nav-arrow:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(23, 134, 252, .3); border-radius: 8px; }
  /* a margem negativa faz a seta flutuar sobre o conteúdo, sem empurrar os itens */
  .nav-arrow-up{ top: 0; margin-bottom: -30px;
    background: linear-gradient(to bottom, var(--paper-raised) 62%, transparent); }
  .nav-arrow-down{ bottom: 0; margin-top: -30px;
    background: linear-gradient(to top, var(--paper-raised) 62%, transparent); }
}
@media (prefers-reduced-motion: reduce){ .nav-arrow{ transition: none; } }