/* ==========================================================================
   Alpino UI — estilos globais (tipografia afinada + ajustes de peso/vidro)
   ========================================================================== */
/* Inter (400–700) */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

/* Utilitária essencial p/ truncamento em flex (usada em ~321 templates).
   Sem isto, filhos flex não encolhem abaixo do conteúdo e estouram a largura
   no mobile (ex.: e-mail longo do signatário em /ae/<id>/). */
.min-w-0{ min-width:0 !important; }
/* .text-truncate só trunca se o item flex puder encolher — sem isto o texto
   longo (nome de pessoa, título de documento) estoura o container em vez de
   virar reticências. Fora de flex é inócuo. */
.text-truncate{ min-width:0; }
/* Campo de formulário tem largura intrínseca (size do input): dentro de coluna
   estreita ele não encolhia e estourava o card no mobile. */
.form-control, .form-select{ min-width:0; }

/* ----------------------------------------------------------------------------
   Tokens / Variáveis
---------------------------------------------------------------------------- */
:root{
  --ti-primary:#095cf4;
  --ti-primary-2:#0046bd;
  --ti-dark-1:#2b2b2b;
  --ti-dark-2:#373737;
  --ti-radius:.65rem;
  --ti-shadow:0 .75rem 1.25rem rgba(0,0,0,.08);
  --ti-text-light:#e7efff;

  /* Paleta MOBILE (cards + dropdowns) */
  --mbl-blue-bg:#eef5ff;
  --mbl-blue-border:#d6e4ff;
  --mbl-blue-ink:#0b2a6e;
  --mbl-blue-hover:#e7f0ff;

  --mbl-navy-bg:#0f224a;
  --mbl-navy-border:#1d3a75;
  --mbl-navy-ink:#e7efff;

  /* Equipamentos */
  --equip-card-min-h:136px;

  /* Layout tokens */
  --bg-light:#f7f8fb;
  --bg-dark:#121212;
  --sb-width:280px;
  --sb-min:74px;
  --e-fast:180ms cubic-bezier(.2,.8,.2,1);
  --e-medium:260ms cubic-bezier(.22,1,.36,1);
  --bs-backdrop-zindex:2050;
  --bs-modal-zindex:2060;

  /* Texto “muted” */
  --ti-muted:#6c7a90;
  --ti-muted-dark:#c2cbe0;

  /* Avatares do picker/chips */
  --picker-avatar:84px;
  --chip-avatar:78px;

  --ti-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
                "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;

  /* Tabela */
  --table-head-bg:#095cf4;
  --table-head-fg:#fff;
  --table-radius:12px;
  --table-border:1px solid rgba(0,0,0,.08);
  --table-border-dark:1px solid rgba(255,255,255,.12);
}

/* ----------------------------------------------------------------------------
   Tipografia Global
---------------------------------------------------------------------------- */
html, body{ height:100%; overflow-x: hidden; }
body{
  background:var(--bg-light);
  font-family:var(--ti-font-sans);
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-optical-sizing:auto;
}
input, button, select, textarea { font: inherit; }
h1,h2,h3,h4,h5,h6{ font-weight:600; }
strong,b{ font-weight:600; }
.body-emphasis{ font-weight:500; }
body.dark-mode{
  background:var(--bg-dark);
  color:#e6e6e6;
  /* Override das variáveis Bootstrap que ficam ilegíveis em fundo escuro.
   * Sem isso, qualquer texto com color:var(--bs-secondary-color) ou
   * var(--bs-body-color) fica preto sobre preto. */
  --bs-body-color:#e6e6e6;
  --bs-body-color-rgb:230,230,230;
  --bs-secondary-color:rgba(230,230,230,.7);
  --bs-secondary-color-rgb:230,230,230;
  --bs-tertiary-color:rgba(230,230,230,.5);
  --bs-tertiary-color-rgb:230,230,230;
  --bs-emphasis-color:#ffffff;
  --bs-emphasis-color-rgb:255,255,255;
  --bs-link-color:#7eb6ff;
  --bs-link-hover-color:#a8cdff;
}

/* Fundo glass/liquid — três manchas radiais azuladas (azul, ciano, índigo),
   fixas atrás de todo o conteúdo. Pseudo em z-index:-1 pinta acima da cor base
   do body (--bg-light/--bg-dark) e abaixo dos cards/painéis. Requer que os
   wrappers de conteúdo (.main-content) fiquem transparentes — já são. */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(52% 46% at 12% 6%,  rgba(9, 92, 244, 0.12), transparent 62%),
    radial-gradient(46% 42% at 92% 12%, rgba(56, 189, 248, 0.12), transparent 60%),
    radial-gradient(56% 52% at 84% 98%, rgba(99, 102, 241, 0.10), transparent 62%);
}
body.dark-mode::before{
  background:
    radial-gradient(52% 46% at 12% 6%,  rgba(9, 92, 244, 0.24), transparent 62%),
    radial-gradient(46% 42% at 92% 12%, rgba(56, 189, 248, 0.16), transparent 60%),
    radial-gradient(56% 52% at 84% 98%, rgba(99, 102, 241, 0.20), transparent 62%);
}

/* ----------------------------------------------------------------------------
   Utilitários / Cards base
---------------------------------------------------------------------------- */
.form-wrapper{
  background:#fff; border-radius:14px; box-shadow:var(--ti-shadow);
  padding:16px 14px 20px;
}
body.dark-mode .form-wrapper{ background:var(--ti-dark-1); color:#f1f1f1; }

/* ====================== Tabela (card + arredondado) ====================== */
.table-wrap{
  background:#fff;
  border: var(--table-border);
  border-radius: var(--table-radius);
  padding:10px 12px;
  box-shadow:var(--ti-shadow);
  overflow:hidden; /* garante cantos arredondados com cabeçalho sticky */
}
body.dark-mode .table-wrap{
  background:var(--ti-dark-2);
  border:var(--table-border-dark);
}

/* tabela com cabeçalho “Alpino” (cores iguais no claro/escuro) */
.table-alpino{
  border-collapse:separate;
  border-spacing:0;
}
.table-alpino thead th{
  background:var(--table-head-bg) !important;
  color:var(--table-head-fg) !important;
  border:0 !important;
  position:sticky; top:0; z-index:1;
  vertical-align:middle;
}
/* arredonda topo do thead (quando não houver .table-wrap) */
.table-alpino thead th:first-child{ border-top-left-radius: var(--table-radius); }
.table-alpino thead th:last-child{  border-top-right-radius: var(--table-radius); }
/* arredonda base da tabela (última linha) */
.table-alpino tbody tr:last-child > *:first-child{ border-bottom-left-radius: var(--table-radius); }
.table-alpino tbody tr:last-child > *:last-child{  border-bottom-right-radius: var(--table-radius); }

/* cabeçalho sticky também mantém cor */
.table-alpino thead.sticky > tr,
.table-alpino thead.sticky > tr > th{
  background:var(--table-head-bg) !important;
  color:var(--table-head-fg) !important;
  border-color:transparent !important;
}
.table-alpino thead.sticky + tbody tr:first-child > *{ border-top-color:transparent; }

/* modo escuro – mantém o thead com a mesma cor */
body.dark-mode .table-alpino thead th{
  background:var(--table-head-bg) !important;
  color:var(--table-head-fg) !important;
}

/* Tabela dark (BS5 tokens) */
body.dark-mode .table{
  --bs-table-color:#e9eef9;
  --bs-table-bg:#181818;
  --bs-table-border-color:rgba(255,255,255,.12);
  --bs-table-accent-bg:rgba(255,255,255,.02);
  --bs-table-striped-bg:rgba(255,255,255,.04);
  --bs-table-striped-color:#e9eef9;
  --bs-table-hover-bg:rgba(255,255,255,.07);
  --bs-table-hover-color:#ffffff;
}
body.dark-mode .table > :not(caption) > * > *{
  background-color:var(--bs-table-bg) !important;
  color:var(--bs-table-color) !important;
  border-color:var(--bs-table-border-color) !important;
}
body.dark-mode .table.table-hover > tbody > tr:hover > *{
  background-color:var(--bs-table-hover-bg) !important;
  color:var(--bs-table-hover-color) !important;
}
body.dark-mode .table.table-striped > tbody > tr:nth-of-type(odd) > *{
  background-color:var(--bs-table-striped-bg) !important;
  color:var(--bs-table-striped-color) !important;
}

/* ----------------------------------------------------------------------------
   Badges / Avatares
---------------------------------------------------------------------------- */
.status-badge{ font-size:.75rem; }
.avatar-xs{ width:28px; height:28px; border-radius:999px; object-fit:cover; box-shadow:0 0 0 2px #fff; }
body.dark-mode .avatar-xs{ box-shadow:0 0 0 2px var(--ti-dark-2); }
.avatar{ width:34px; height:34px; border-radius:50%; object-fit:cover; border:1px solid rgba(0,0,0,.08); }

/* ----------------------------------------------------------------------------
   HERO
---------------------------------------------------------------------------- */
.hero-card{
  display:flex; gap:14px; align-items:center; justify-content:space-between;
  background:linear-gradient(135deg,var(--ti-primary),var(--ti-primary-2));
  color:#fff; border-radius:14px; box-shadow:var(--ti-shadow);
  padding:14px 16px; margin-bottom:14px;
}
.hero-left{ display:flex; gap:12px; align-items:center; min-width:0; }
.hero-ico{ width:44px; height:44px; border-radius:12px; background:rgba(255,255,255,.18); display:grid; place-items:center; font-size:22px; }
.hero-title{ margin:0; font-weight:600; }
.hero-sub{ margin:0; opacity:.9; }
/* Anti-vazamento do hero: sem `min-width:0` o .hero-left não encolhe e título
   longo (ou o pill do subtítulo, que é nowrap) escapa para fora do card em
   telas estreitas. Títulos com .text-truncate continuam truncando — o
   min-width:0 é justamente o que faz o truncate funcionar no flex. */
.hero-card .hero-title,
.hero-card .hero-sub{ min-width:0; overflow-wrap:anywhere; }
@media (max-width:575.98px){
  .hero-card .hero-sub .pill{ white-space:normal; }
}

/* Variante de hero "premium" — degradê azul Alpino → preto (diagonal).
   Assinatura: brilho azul no lado do título (header "iluminado" desse lado)
   + malha blueprint sutil no lado escuro. Combina com botões .btn-header (glass).
   Uso: <div class="hero-card hero-sm hero-forn"> … </div> */
.hero-card.hero-forn{
  background:linear-gradient(112deg,#0b3e9e 0%,#091430 55%,#05070e 100%);
  position:relative;   /* sem overflow:hidden p/ não recortar dropdowns do header */
}
.hero-card.hero-forn::before{   /* malha blueprint, lado escuro (direita) */
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.55; border-radius:inherit;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:30px 30px;
  -webkit-mask-image:linear-gradient(90deg, transparent 38%, #000);
          mask-image:linear-gradient(90deg, transparent 38%, #000);
}
.hero-card.hero-forn::after{    /* brilho azul Alpino no lado do título (esquerda) */
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:radial-gradient(120% 150% at 4% 18%, rgba(88,158,255,.42), transparent 58%);
}
.hero-card.hero-forn > *{ position:relative; z-index:1; }
/* Dropdowns do hero precisam pintar ACIMA de theads sticky/conteúdo da página
   (o z-index:1 acima cria stacking context; sem isso a tabela corta o menu).
   1030 fica abaixo de offcanvas (1045) e modais (1055). */
.hero-card .hero-actions{ position:relative; z-index:1030; }
.hero-card.hero-forn .hero-ico{
  background:rgba(255,255,255,.12); border:1px solid rgba(120,170,255,.34);
  box-shadow:0 6px 16px rgba(3,10,40,.42);
}

/* Legibilidade de conteúdo sobre o fundo colorido da HERO:
   .text-muted do Bootstrap fica cinza-escuro (ilegível) e pills claras somem.
   Aqui viram branco/glass. */
.hero-card .text-muted,
.hero-card .small.text-muted{ color:rgba(255,255,255,.82) !important; }
.hero-card .pill{
  background:rgba(255,255,255,.18);
  color:#fff;
  border-color:rgba(255,255,255,.30);
}

.hero-avatar{
  width:72px; height:72px; border-radius:999px; object-fit:cover;
  box-shadow:0 0 0 3px var(--hero-ring, rgba(255,255,255,.35));
  transition: box-shadow .2s ease;
}
.hero-avatar-wrap.is-active  .hero-avatar{ --hero-ring:#22c55e; }
.hero-avatar-wrap.is-inactive .hero-avatar{ --hero-ring:#ef4444; }

.badge-status{
  position:absolute; top:-2px; right:-10px;
  padding:4px 8px; font-size:.675rem; line-height:1;
  border-radius:999px; font-weight:600;
  box-shadow:0 4px 12px rgba(0,0,0,.18);
}

/* Botões da HERO no dark (efeito glass) */
body.dark-mode .hero-card .btn.btn-light,
body.dark-mode .hero-card .btn.btn-outline-light{
  background:rgba(11,42,110,.22); border-color:rgba(219,230,255,.22);
  color:var(--ti-text-light); backdrop-filter:saturate(120%) blur(6px);
  -webkit-backdrop-filter:saturate(120%) blur(6px);
}
body.dark-mode .hero-card .btn.btn-light:hover,
body.dark-mode .hero-card .btn.btn-outline-light:hover{
  background:rgba(11,42,110,.32); border-color:rgba(219,230,255,.34); color:#fff;
}

/* ----------------------------------------------------------------------------
   Abas
---------------------------------------------------------------------------- */
.nav-tabs{ border-bottom:0; gap:.25rem; }
.nav-tabs .nav-link{
  display:flex; align-items:center; justify-content:center; gap:.35rem;
  font-weight:600; white-space:nowrap; border:0; background:transparent;
  color:#0b2a6e;
}
.nav-tabs .nav-link i{ font-size:1.05rem; line-height:1; }
.nav-tabs .nav-link.active{
  color:#0b5cff; border-bottom:3px solid #0b5cff; background:transparent;
}
body.dark-mode .nav-tabs .nav-link{ color:#e6eeff; }
body.dark-mode .nav-tabs .nav-link:hover{ color:#ffffff; }
body.dark-mode .nav-tabs .nav-link.active{
  color:#ffffff; border-bottom-color:var(--ti-primary);
}
.tab-pane{ padding-top:12px; }

/* ----------------------------------------------------------------------------
   Filtros / Cards
---------------------------------------------------------------------------- */
.filters-card{
  background:#fff; border-radius:14px; box-shadow:var(--ti-shadow);
  padding:12px 14px; margin-bottom:12px;
}
body.dark-mode .filters-card{ background:var(--ti-dark-2); }

/* ----------------------------------------------------------------------------
   Equipamentos
---------------------------------------------------------------------------- */
#lista-vinculados > [class*="col-"],
#lista-disponiveis > [class*="col-"]{ display:flex; min-width:260px; }
@media (min-width:1200px){
  #lista-vinculados > [class*="col-"],
  #lista-disponiveis > [class*="col-"]{ min-width:280px; }
}
.equipamento-item{ width:100%; }
.equipamento-item .card{ width:100%; height:100%; }
#lista-vinculados .card .card-body,
#lista-disponiveis .card .card-body{
  min-height:var(--equip-card-min-h);
  display:grid; grid-template-columns:64px 1fr; gap:12px; align-items:start;
}
#lista-vinculados img, #lista-disponiveis img{
  width:64px; height:64px; object-fit:cover; border-radius:8px;
}
#lista-vinculados .card .flex-grow-1,
#lista-disponiveis .card .flex-grow-1{ display:flex; flex-direction:column; }
#lista-vinculados .card .flex-grow-1 .mt-2,
#lista-disponiveis .card .flex-grow-1 .mt-2{ margin-top:auto; }
.equipamento-scroll{ max-height:calc(100vh - 320px); overflow-y:auto; }

/* ----------------------------------------------------------------------------
   IP Card
---------------------------------------------------------------------------- */
.ip-card .card-body{ display:flex; align-items:center; justify-content:space-between; }

/* ----------------------------------------------------------------------------
   Dropdown (alpino + Bootstrap glass) + FAB
---------------------------------------------------------------------------- */
.alpino-dropdown{ position:relative; display:inline-block; }

/* FAB/Toggle redondo */
.menu-toggle, .btn-ti-fab{
  width:40px; height:40px; border-radius:999px; border:0;
  display:grid; place-items:center; cursor:pointer; color:#fff;
  background:linear-gradient(135deg, var(--ti-primary), var(--ti-primary-2));
  box-shadow:0 8px 18px rgba(0,0,0,.12);
  transition:filter .15s ease, transform .05s ease;
}
.menu-toggle:hover, .btn-ti-fab:hover{ filter:brightness(1.05); }
.menu-toggle:active, .btn-ti-fab:active{ transform:translateY(1px); }

/* FAB: posição + “pulse” opcional */
.fab-picker{ position:fixed; right:16px; bottom:16px; z-index:1080; }
.fab-picker.fab-anim-pulse{ animation:f-fabPulse 2.2s ease-in-out infinite; }
@keyframes f-fabPulse{
  0%,100%{ transform: translateY(0) scale(1); box-shadow: 0 8px 18px rgba(0,0,0,.12); }
  50%{ transform: translateY(-2px) scale(1.06); box-shadow: 0 14px 28px rgba(0,0,0,.18); }
}
.fab-picker:hover,.fab-picker:focus-visible{ animation-play-state: paused; transform: translateY(-1px) scale(1.05); }
.fab-picker:active{ transform: translateY(0) scale(.98); }
.fab-picker i{ display:inline-block; transition: transform .28s cubic-bezier(.22,1,.36,1); }
.fab-picker:hover i{ transform: rotate(90deg); }

/* ===== Menu mobile (alpino-dropdown): GLASS por padrão ===== */
.menu-card{
  position:absolute; right:0; top:calc(100% + 8px); z-index:1030; display:none;
  border-radius:14px; padding:8px; min-width:230px;
  background:rgba(255,255,255,.38);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border:1px solid rgba(255,255,255,.45);
  box-shadow:0 14px 26px rgba(0,0,0,.12);
  color:#0b2a6e;
}
.alpino-dropdown.is-open .menu-card{ display:block; }
.menu-card form{ margin:0; width:100%; }

.menu-item, .menu-item.btn{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  border-radius:12px; width:100%; text-decoration:none !important;
  color:inherit; background:transparent; border:0; cursor:pointer;
  appearance:none; -webkit-appearance:none; outline:none;
  transition:background .12s ease, color .12s ease, transform .05s ease;
}
.menu-item:focus, .menu-item:focus-visible{ outline:none; box-shadow:none; }
.menu-ico{
  width:34px; height:34px; border-radius:12px;
  background:rgba(255,255,255,.40);
  display:grid; place-items:center; font-size:16px; color:#0b5cff;
}
.menu-card .menu-item:hover, .menu-card .menu-item:focus{ background:rgba(255,255,255,.22); }
.menu-card .menu-item:active{ transform:translateY(1px); }

body.dark-mode .menu-card{
  background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.14);
  box-shadow:0 14px 30px rgba(0,0,0,.5); color:#e7efff;
}
body.dark-mode .menu-item{ color:inherit; }
body.dark-mode .menu-item:hover, body.dark-mode .menu-item:focus{ background:rgba(255,255,255,.10); }
body.dark-mode .menu-ico{ background:rgba(255,255,255,.14); color:#cfe1ff; }

/* ===== Dropdown Bootstrap: GLASS GLOBAL ===== */
.dropdown-menu{
  background:rgba(255,255,255,.38);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border:1px solid rgba(255,255,255,.45);
  border-radius:14px;
  box-shadow:0 10px 26px rgba(0,0,0,.12);
  overflow:hidden;
  padding:.35rem;
}
body.dark-mode .dropdown-menu{
  background:rgba(0,0,0,.45);
  border-color:rgba(255,255,255,.14);
  box-shadow:0 10px 30px rgba(0,0,0,.5);
}
.dropdown-menu .dropdown-item{
  border-radius:10px; font-weight:500; padding:.5rem .75rem;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus{
  background:rgba(255,255,255,.28);
}
body.dark-mode .dropdown-menu .dropdown-item:hover,
body.dark-mode .dropdown-menu .dropdown-item:focus{
  background:rgba(255,255,255,.12);
}
.dropdown-menu .dropdown-divider{
  margin:.35rem .25rem; opacity:.35; border-top:1px solid rgba(0,0,0,.08);
}
body.dark-mode .dropdown-menu .dropdown-divider{
  border-top-color:rgba(255,255,255,.14);
}
/* (Opcional) desativar glass */
.dropdown-menu.dropdown-solid{
  background:#fff !important;
  border:1px solid rgba(0,0,0,.08) !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  box-shadow:var(--ti-shadow);
}
body.dark-mode .dropdown-menu.dropdown-solid{
  background:#181818 !important; border-color:rgba(255,255,255,.12) !important;
}

/* ----------------------------------------------------------------------------
   Modal
---------------------------------------------------------------------------- */
.modal .modal-header{
  background:linear-gradient(135deg, var(--ti-primary, #0b5cff), var(--ti-primary-2, #0a49d1)) !important;
  color:#fff !important; border:0;
}
/* Subtítulos (.text-muted) dentro do header colorido do modal → brancos legíveis */
.modal .modal-header .text-muted,
.modal .modal-header .small.text-muted{ color:rgba(255,255,255,.82) !important; }
.modal .btn-close{ filter:invert(1) contrast(200%); opacity:.9; transition:opacity .15s ease; }
.modal .btn-close:hover{ opacity:1; }
.modal .modal-content{ border-radius:16px; overflow:hidden; box-shadow:var(--ti-shadow, 0 20px 60px rgba(2,8,23,.15)); }
body.dark-mode .modal .modal-content{ background:#121826 !important; color:#e9eef9 !important; }
body.dark-mode .modal .modal-header{
  background:linear-gradient(135deg,#0f224a,#1d3a75) !important; color:#e7efff !important;
}
body.dark-mode .modal .form-control,
body.dark-mode .modal .form-select,
body.dark-mode .modal .list-group-item,
body.dark-mode .modal .card{
  background:#2f2f2f !important; color:#e9eef9 !important; border-color:#3a3a3a !important;
}
body.dark-mode .modal a{ color:#cfe1ff; }
body.dark-mode .modal a:hover{ color:#ffffff; }

/* ----------------------------------------------------------------------------
   Mobile “doc-cards”
---------------------------------------------------------------------------- */
.d-md-none .doc-card{
  border-radius:14px; background:var(--mbl-blue-bg);
  border:1px solid var(--mbl-blue-border); color:var(--mbl-blue-ink); box-shadow:var(--ti-shadow);
  padding:12px 14px; margin-bottom:12px;
  display:block; position:relative; isolation:isolate; /* evita “um dentro do outro” */
}
.d-md-none .doc-card + .doc-card{ margin-top:12px; } /* reforça espaçamento */
body.dark-mode .d-md-none .doc-card{
  background:var(--mbl-navy-bg); border:1px solid var(--mbl-navy-border); color:var(--mbl-navy-ink);
}
.doc-card-mobile{ display:grid; grid-template-columns:1fr max- content; gap:10px; align-items:start; }
.doc-title{ font-weight:600; font-size:.98rem; line-height:1.25; margin:0 0 4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:break-word; }
.doc-meta{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:.86rem; opacity:.9; }
.doc-stats{ font-size:.85rem; margin-top:4px; }
/* Ações alinhadas à direita no mobile */
.doc-actions{ display:flex; flex-direction:row; align-items:center; justify-content:flex-end; gap:6px; }
/* Collapse dentro do card ocupa toda a largura e não “invade” colunas */
.doc-card > .collapse{ grid-column:1/-1; }

/* ----------------------------------------------------------------------------
   Responsividade leve
---------------------------------------------------------------------------- */
@media (max-width: 575.98px){
  .hero-card{ border-radius:12px; padding:12px; }
  .doc-card{
    padding:12px 14px;
  }
}
@media (max-width:1023.98px){
  .kpi-grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:576px){
  .kpi-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .doc-actions{ flex-direction:column; align-items:flex-end; }
}
@media (min-width:1024px){ .grid{ grid-template-columns:1fr 1fr; } }

/* ----------------------------------------------------------------------------
   Botões
---------------------------------------------------------------------------- */
.btn-alpino-primary{
  --btn-grad-from: var(--ti-primary);
  --btn-grad-to:   var(--ti-primary-2);
  color:#fff; background-image: linear-gradient(135deg, var(--btn-grad-from), var(--btn-grad-to));
  background-color: var(--btn-grad-from); border-color: var(--ti-primary-2);
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
  transition: filter .15s ease, transform .05s ease, box-shadow .15s ease;
  font-weight:600;
}
.btn-alpino-primary:hover{ filter: brightness(1.03); }
.btn-alpino-primary:active{ transform: translateY(1px); filter: brightness(.98); }
.btn-alpino-primary:focus-visible{ outline: none; box-shadow: 0 0 0 .25rem rgba(9, 92, 244, .35); }
.btn-alpino-primary:disabled, .btn-alpino-primary.disabled{ opacity:.75; box-shadow:none; transform:none; filter:none; }

.btn-alpino-secondary{
  --btn-sec-from:#9ca3af; --btn-sec-to:#111827;
  color:#fff; background-image: linear-gradient(135deg, var(--btn-sec-from), var(--btn-sec-to));
  background-color: var(--btn-sec-from); border-color:#0b1220;
  box-shadow: 0 8px 18px rgba(0,0,0,.10), inset 0 0 0 1px rgba(255,255,255,.06);
  transition: filter .15s ease, transform .05s ease, box-shadow .15s ease;
  font-weight:600;
}
.btn-alpino-secondary:hover{ filter: brightness(1.04); }
.btn-alpino-secondary:active{ transform: translateY(1px); filter: brightness(.98); }
.btn-alpino-secondary:focus-visible{ outline:none; box-shadow:0 0 0 .25rem rgba(156,163,175,.35); }
body.dark-mode .btn-alpino-secondary:focus-visible{ box-shadow:0 0 0 .25rem rgba(255,255,255,.22); }
.btn-alpino-secondary:disabled, .btn-alpino-secondary.disabled{ opacity:.75; box-shadow:none; transform:none; filter:none; }

/* CTA Alpino — botão de ação de destaque (ex.: Enviar / Confirmar).
   Gradiente azul, cantos arredondados, sombra colorida e leve elevação no hover;
   estado desabilitado em cinza. Auto-suficiente (não precisa de .btn). */
.btn-alpino-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  color:#fff; border:0; border-radius:10px; font-weight:700; font-size:.9rem;
  padding:9px 18px; cursor:pointer; text-decoration:none; line-height:1.2;
  background-image:linear-gradient(135deg, var(--ti-primary,#095cf4), var(--ti-primary-2,#3b82f6));
  box-shadow:0 6px 14px rgba(9,92,244,.28);
  transition:filter .12s ease, transform .12s ease, box-shadow .12s ease;
}
.btn-alpino-cta:hover:not(:disabled):not(.disabled){ filter:brightness(1.06); transform:translateY(-1px); color:#fff; }
.btn-alpino-cta:active:not(:disabled):not(.disabled){ transform:translateY(0); }
.btn-alpino-cta:focus-visible{ outline:none; box-shadow:0 0 0 .25rem rgba(9,92,244,.35); }
.btn-alpino-cta.sm{ padding:6px 12px; font-size:.82rem; border-radius:9px; }
.btn-alpino-cta:disabled, .btn-alpino-cta.disabled{
  background:#cbd5e1; background-image:none; color:#f8fafc; box-shadow:none; cursor:not-allowed; transform:none; filter:none;
}
body.dark-mode .btn-alpino-cta:disabled, body.dark-mode .btn-alpino-cta.disabled{ background:rgba(255,255,255,.14); color:rgba(255,255,255,.5); }

/* Botão de header "glass" — pensado para headers/heros escuros ou com gradiente
   (ex.: hero de status dos dashboards). Fundo translúcido claro + borda sutil,
   realça no hover. Auto-suficiente (não precisa de .btn). Suporta .filter-dot.
   Variante .sm menor. Em header claro, use .btn-header.dark (texto escuro). */
.btn-header{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.08);
  color:#eef4fb; border-radius:11px; padding:9px 15px; line-height:1.2;
  font-weight:600; font-size:.9rem; cursor:pointer; text-decoration:none; position:relative;
  transition:background .12s ease, border-color .12s ease, transform .12s ease;
}
.btn-header:hover{ background:rgba(255,255,255,.15); color:#fff; }
.btn-header:active{ transform:translateY(1px); }
.btn-header:focus-visible{ outline:none; box-shadow:0 0 0 .25rem rgba(255,255,255,.22); }
.btn-header.sm{ padding:6px 12px; font-size:.82rem; border-radius:9px; }
.btn-header.dark{ color:#1f2937; border-color:rgba(15,23,42,.14); background:rgba(15,23,42,.05); }
.btn-header.dark:hover{ background:rgba(15,23,42,.1); color:#0f172a; }
/* Variantes glass COLORIDAS do header — vidro tingido sobre hero escuro.
   Base parametrizada por --bh (cor principal) e --bh2 (cor secundária do degradê). */
.btn-header.green, .btn-header.blue, .btn-header.red,
.btn-header.amber, .btn-header.cyan, .btn-header.purple{
  border-color:rgba(var(--bh), .45);
  background:linear-gradient(135deg, rgba(var(--bh),.28), rgba(var(--bh2),.16));
  backdrop-filter:saturate(140%) blur(6px); -webkit-backdrop-filter:saturate(140%) blur(6px);
  box-shadow:0 4px 14px rgba(var(--bh),.20), inset 0 1px 0 rgba(255,255,255,.20);
}
.btn-header.green:hover, .btn-header.blue:hover, .btn-header.red:hover,
.btn-header.amber:hover, .btn-header.cyan:hover, .btn-header.purple:hover{
  background:linear-gradient(135deg, rgba(var(--bh),.42), rgba(var(--bh2),.26)); color:#fff; border-color:rgba(var(--bh),.65);
}
.btn-header.green:focus-visible, .btn-header.blue:focus-visible, .btn-header.red:focus-visible,
.btn-header.amber:focus-visible, .btn-header.cyan:focus-visible, .btn-header.purple:focus-visible{
  box-shadow:0 0 0 .25rem rgba(var(--bh),.30);
}
.btn-header.green { --bh:16,185,129;  --bh2:5,150,105;   color:#eafff2; }
.btn-header.blue  { --bh:59,130,246;  --bh2:11,102,255;  color:#eaf1ff; }
.btn-header.red   { --bh:239,68,68;   --bh2:220,38,38;   color:#ffecec; }
.btn-header.amber { --bh:245,158,11;  --bh2:217,119,6;   color:#fff6e6; }
.btn-header.cyan  { --bh:14,165,233;  --bh2:2,132,199;   color:#e6faff; }
.btn-header.purple{ --bh:139,92,246;  --bh2:124,58,237;  color:#f2ecff; }

/* ==========================================================================
   .alpino-hint — balão de dica/atenção anexado a um elemento (ex.: avatar).
   --------------------------------------------------------------------------
   Aparece no load, apontando p/ o âncora, com animação suave e botão de dispensar.
   USO:
     <span class="alpino-hint-wrap">
       <img class="avatar-lg" ...>
       <span class="alpino-hint red" role="button" data-bs-toggle="modal" data-bs-target="#x">
         <i class="bi bi-exclamation-triangle-fill"></i>
         <span>Texto do aviso.</span>
         <button class="alpino-hint-x" onclick="this.closest('.alpino-hint').remove()">&times;</button>
       </span>
     </span>
   Cores: red (default) | green | blue | amber | cyan | purple.
   Posição: por padrão abaixo do âncora c/ seta à direita; `.hint-left` alinha à esquerda.
   ========================================================================== */
.alpino-hint-wrap{ position:relative; display:inline-flex; }
.alpino-hint{
  --hint:220,38,38; --hint2:239,68,68;                 /* default = red */
  position:absolute; top:calc(100% + 12px); right:0; z-index:1035;
  display:flex; align-items:center; gap:8px; white-space:normal; width:max-content; max-width:260px;
  background:linear-gradient(135deg, rgb(var(--hint)), rgb(var(--hint2))); color:#fff;
  padding:9px 34px 9px 12px; border-radius:12px; font-size:.82rem; font-weight:600; line-height:1.25;
  box-shadow:0 10px 24px rgba(var(--hint),.40), inset 0 1px 0 rgba(255,255,255,.25);
  cursor:pointer; transform-origin:top right;
  animation:alpinoHintIn .35s cubic-bezier(.2,.9,.3,1.2) both, alpinoHintBob 2.2s ease-in-out .5s infinite;
}
.alpino-hint > i{ font-size:1rem; flex:0 0 auto; }
.alpino-hint::after{ content:""; position:absolute; bottom:100%; right:16px;
  border:7px solid transparent; border-bottom-color:rgb(var(--hint)); }
.alpino-hint.hint-left{ right:auto; left:0; transform-origin:top left; }
.alpino-hint.hint-left::after{ right:auto; left:16px; }
.alpino-hint-x{ position:absolute; top:5px; right:8px; background:transparent; border:0; color:#fff;
  font-size:1.05rem; line-height:1; opacity:.85; cursor:pointer; padding:0; }
.alpino-hint-x:hover{ opacity:1; }
.alpino-hint.red   { --hint:220,38,38;  --hint2:239,68,68; }
.alpino-hint.green { --hint:22,163,74;  --hint2:34,197,94; }
.alpino-hint.blue  { --hint:11,102,255; --hint2:59,130,246; }
.alpino-hint.amber { --hint:217,119,6;  --hint2:245,158,11; }
.alpino-hint.cyan  { --hint:8,145,178;  --hint2:14,165,233; }
.alpino-hint.purple{ --hint:124,58,237; --hint2:139,92,246; }
@keyframes alpinoHintIn{ from{ opacity:0; transform:translateY(-6px) scale(.9); } to{ opacity:1; transform:translateY(0) scale(1); } }
@keyframes alpinoHintBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-3px); } }
@media (prefers-reduced-motion: reduce){ .alpino-hint{ animation:alpinoHintIn .2s ease both; } }
@media (max-width:575.98px){ .alpino-hint{ max-width:200px; font-size:.76rem; } }

.btn.btn-ti{
  background-color: var(--ti-primary) !important; border-color: var(--ti-primary) !important;
  color:#fff !important; font-weight:600;
}
.btn.btn-ti:hover{ filter: brightness(.95); color:#fff !important; }

/* Botão na HERO mantém texto branco */
.hero-card .btn.btn-ti,
.hero-card .btn.btn-ti:link,
.hero-card .btn.btn-ti:visited,
.hero-card .btn.btn-ti:hover,
.hero-card .btn.btn-ti:focus,
.hero-card .btn.btn-ti:active{ color:#fff !important; }
.hero-card .btn.btn-ti i{ color:inherit !important; }

/* ----------------------------------------------------------------------------
   KPI Cards — padrão Alpino (substitui o legado azul gradient
   para visual canônico: fundo branco, ícone tonal, label uppercase, val 1.4rem).
   Compatível com markup legado (.kpi-card / .kpi-top / .kpi-body / .kpi-ico).
---------------------------------------------------------------------------- */
.kpi-card{
  position:relative;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:10px 12px !important;
  border-radius:14px !important;
  background:#fff !important;
  background-image:none !important;
  border:1px solid rgba(15,23,42,.08) !important;
  box-shadow:var(--ti-shadow) !important;
  overflow:hidden;
  color:inherit !important;
  text-decoration:none;
  transition:transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}
.kpi-card:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 24px rgba(9,92,244,.10);
  color:inherit;
}
body.dark-mode .kpi-card{ background:var(--ti-dark-2, #1f2430) !important; border-color:rgba(255,255,255,.08) !important; color:#eef3ff !important; }
body.dark-mode .kpi-card:hover{ color:#eef3ff !important; }

/* .kpi-top: estrutura legada (texto à esquerda + ícone à direita) — inverte para ícone à esquerda */
.kpi-top{
  display:flex;
  flex-direction:row-reverse;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  width:100%;
}
.kpi-top > div:not(.kpi-ico){ min-width:0; flex:1 1 auto; }

/* .kpi-body: layout horizontal (ícone à esquerda) — já bate com .kpi-tile */
.kpi-card .kpi-body{ min-width:0; flex:1 1 auto; }

/* Label / Value canônicos */
.kpi-label{
  font-size:.72rem !important;
  text-transform:uppercase !important;
  letter-spacing:.02em !important;
  font-weight:600 !important;
  color:var(--bs-secondary-color) !important;
  line-height:1.1 !important;
  opacity:1 !important;
}
.kpi-value{
  font-weight:800 !important;
  font-size:1.4rem !important;
  line-height:1.05 !important;
  margin-top:2px !important;
}
body.dark-mode .kpi-label{ color:rgba(238,243,255,.65); }

/* Ícone canônico (caixa colorida 36px, default azul Alpino) */
.kpi-ico{
  width:36px !important;
  height:36px !important;
  min-width:36px !important;
  border-radius:10px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:linear-gradient(135deg, rgba(9,92,244,.16), rgba(9,92,244,.06)) !important;
  color:#095cf4 !important;
  flex:0 0 36px !important;
  font-size:1rem !important;
  box-shadow:none !important;
  transition:transform .12s ease;
}
.kpi-card:hover .kpi-ico{ transform:none; }

/* Tons opcionais para ícone (kpi-card.tone-X) */
.kpi-card.tone-red    .kpi-ico, .kpi-card.tone-red    .icon-wrap{ background:linear-gradient(135deg, rgba(239,68,68,.22), rgba(239,68,68,.08)); color:#b91c1c; }
.kpi-card.tone-amber  .kpi-ico, .kpi-card.tone-amber  .icon-wrap{ background:linear-gradient(135deg, rgba(245,158,11,.22), rgba(245,158,11,.08)); color:#b45309; }
.kpi-card.tone-green  .kpi-ico, .kpi-card.tone-green  .icon-wrap{ background:linear-gradient(135deg, rgba(34,197,94,.22), rgba(34,197,94,.08));  color:#15803d; }
.kpi-card.tone-cyan   .kpi-ico, .kpi-card.tone-cyan   .icon-wrap{ background:linear-gradient(135deg, rgba(14,165,233,.22), rgba(14,165,233,.08)); color:#0369a1; }
.kpi-card.tone-purple .kpi-ico, .kpi-card.tone-purple .icon-wrap{ background:linear-gradient(135deg, rgba(168,85,247,.22), rgba(168,85,247,.08)); color:#6b21a8; }

/* Variante absoluta (alguns templates usam .icon-wrap em vez de .kpi-ico) */
.kpi-card .icon-wrap{
  position:static;
  width:36px;
  height:36px;
  border-radius:10px;
  background:linear-gradient(135deg, rgba(9,92,244,.16), rgba(9,92,244,.06));
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1rem;
  color:#095cf4;
}

/* Wrapper de link clicável */
.kpi-link{
  text-decoration:none;
  color:inherit;
  display:block;
}
.kpi-link:hover{ color:inherit; }

/* Estado ativo (KPI filtro selecionado) */
.kpi-card.active,
.kpi-link.active .kpi-card{
  background:linear-gradient(135deg,#095cf4,#0046bd);
  color:#fff;
  border-color:transparent;
}
.kpi-card.active .kpi-ico,
.kpi-card.active .icon-wrap,
.kpi-link.active .kpi-card .kpi-ico,
.kpi-link.active .kpi-card .icon-wrap{
  background:rgba(255,255,255,.18);
  color:#fff;
}
.kpi-card.active .kpi-label,
.kpi-link.active .kpi-card .kpi-label{ color:rgba(255,255,255,.85); }

/* ----------------------------------------------------------------------------
   Liquid Glass + BLUE CARD
---------------------------------------------------------------------------- */
.glass{
  background:rgba(255,255,255,.35);
  -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(255,255,255,.4); border-radius:14px;
  box-shadow:var(--ti-shadow);
}
body.dark-mode .glass{
  background:rgba(18,18,18,.55); border-color:rgba(255,255,255,.12);
  box-shadow:0 10px 26px rgba(0,0,0,.45);
}

/* Variante “card azul” (sem blur) */
.glass-card{
  background:var(--mbl-blue-bg);
  border:1px solid var(--mbl-blue-border);
  color:var(--mbl-blue-ink);
  border-radius:14px;
  box-shadow:var(--ti-shadow);
}
body.dark-mode .glass-card{
  background:var(--mbl-navy-bg); border-color:var(--mbl-navy-border); color:var(--mbl-navy-ink);
}
.glass-card .section-title{ color:inherit; }

/* ----------------------------------------------------------------------------
   Texto “muted” + links
---------------------------------------------------------------------------- */
.text-muted, .small.text-muted{ color:var(--ti-muted) !important; }
body.dark-mode .text-muted, body.dark-mode .small.text-muted{ color:var(--ti-muted-dark) !important; opacity:.92; }
body.dark-mode .hero-card .small.text-muted,
body.dark-mode .modal .small.text-muted{ color:#cfe1ff !important; opacity:.88; }
a.text-muted{ text-decoration:none; }
a.text-muted:hover{ color:#0b5cff !important; }
body.dark-mode a.text-muted:hover{ color:#cfe1ff !important; }

/* ----------------------------------------------------------------------------
   Toasts
---------------------------------------------------------------------------- */
.toast{
  --ti-toast-radius:14px; border-radius:var(--ti-toast-radius) !important;
  overflow:hidden; box-shadow:var(--ti-shadow,0 10px 26px rgba(0,0,0,.12));
  --bs-toast-bg:#ffffff; --bs-toast-color:#0f172a; --bs-toast-border-color:rgba(0,0,0,.08);
}
.toast .toast-body{ background:var(--bs-toast-bg); color:var(--bs-toast-color); }
.toast .toast-header{ border-bottom:0; font-weight:600; }
body.dark-mode .toast{
  --bs-toast-bg:#121826; --bs-toast-color:#e9eef9; --bs-toast-border-color:rgba(255,255,255,.14);
  --bs-toast-box-shadow:0 12px 30px rgba(0,0,0,.6);
  box-shadow:var(--bs-toast-box-shadow); backdrop-filter:saturate(140%) blur(6px); -webkit-backdrop-filter:saturate(140%) blur(6px);
}
body.dark-mode .toast .toast-body{ background:var(--bs-toast-bg); color:var(--bs-toast-color); }
body.dark-mode .toast .toast-header{ color:#fff; border-bottom:0; }
body.dark-mode .toast .btn-close{ filter:invert(1) contrast(120%); opacity:.9; }
body.dark-mode .toast small.opacity-75{ color:#e9eef9 !important; opacity:.7 !important; }
.toast a{ color:#0b5cff; text-decoration:none; }
.toast a:hover{ text-decoration:underline; }
body.dark-mode .toast a{ color:#cfe1ff; }
body.dark-mode .toast a:hover{ color:#ffffff; }
.toast-container{ z-index:2000 !important; }

/* ----------------------------------------------------------------------------
   Sidebar + Layout
---------------------------------------------------------------------------- */
.grid{ display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width: 992px){ .grid{ grid-template-columns:1fr 1fr; } }

.sidebar{
  position:fixed; inset:0 auto 0 0; height:100vh; width:var(--sb-width); z-index:1040;
  background:rgba(255,255,255,.38);
  -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%);
  border-right:1px solid rgba(255,255,255,.45);
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  border-top-right-radius:var(--ti-radius,14px); border-bottom-right-radius:var(--ti-radius,14px);
  display:flex; flex-direction:column;
  transition:width var(--e-medium), transform var(--e-medium), background var(--e-medium), border-color var(--e-medium);
  transform:translateZ(0);
}
body.dark-mode .sidebar{ background:rgba(0,0,0,.45); border-right-color:rgba(255,255,255,.14); box-shadow:0 10px 30px rgba(0,0,0,.5); }
.sidebar-scroll{ overflow:auto; padding:10px 10px 80px; }

#mobileMenuBtn{
  position:fixed; top:10px; left:10px; z-index:1041; background:transparent; border:0; color:#27408b;
  transition:color var(--e-fast);
}
body.dark-mode #mobileMenuBtn{ color:#fff; }
@media (min-width: 768px){ #mobileMenuBtn{ display:none; } }

.toggle-sidebar{ display:flex; justify-content:flex-end; padding:8px 6px 0; }
.toggle-sidebar .btn{
  color:#1b3a8a; border-radius:999px; width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.45);
  transition:background var(--e-fast), color var(--e-fast), transform var(--e-fast);
}
.toggle-sidebar .btn:active{ transform:translateY(1px) scale(.98); }
body.dark-mode .toggle-sidebar .btn{ color:#fff; background:rgba(255,255,255,.08); }

.logo{ display:flex; justify-content:center; padding:8px 10px 6px; }
.logo img{ max-height:54px; filter:drop-shadow(0 2px 6px rgba(0,0,0,.12)); }

.user-info{
  display:flex; gap:10px; align-items:center;
  background:rgba(255,255,255,.6); border-radius:12px; padding:8px 10px; margin:8px 4px 4px;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
}
.user-info img{ width:40px; height:40px; border-radius:50%; object-fit:cover; border:2px solid rgba(0,0,0,.06); }
.user-name{ font-weight:600; line-height:1.1; }
.user-email{ font-size:.82rem; opacity:.8; }
body.dark-mode .user-info{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); }
body.dark-mode .user-info img{ border-color:rgba(255,255,255,.18); }

.nav.flex-column{ gap:6px; padding:8px 4px; }
.nav-item .nav-link{
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:12px; color:#0b2a6e; font-weight:600;
  background:rgba(255,255,255,.4); transition:background var(--e-fast), color var(--e-fast), transform var(--e-fast);
  position:relative;
}
.nav-item .nav-link i{ font-size:1.25rem; width:26px; text-align:center; }
.nav-item .nav-link:hover{ background:rgba(9,92,244,.15); }
.nav-item .nav-link:active{ transform:translateY(1px) scale(.98); }
.nav-item .nav-link.active{ background:linear-gradient(135deg, var(--ti-primary), var(--ti-primary-2)); color:#fff; }
body.dark-mode .nav-item .nav-link{ color:#e5eeff; background:rgba(255,255,255,.06); }
body.dark-mode .nav-item .nav-link:hover{ background:rgba(255,255,255,.12); }

/* Submenu alinhado */
.submenu-list{ padding:8px 4px; margin:6px 0 2px 0; }
.submenu-list .nav-link{ padding-left:44px; font-weight:600; }
.submenu-list .nav-link i{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:20px; text-align:center;
}

/* Minimized */
.sidebar.minimized{ width:var(--sb-min); }
.sidebar.minimized .user-info{ padding:8px; flex-direction:column; align-items:center; text-align:center; }
.sidebar.minimized .user-name, .sidebar.minimized .user-email{ display:none; }
.sidebar.minimized .nav-link span{ display:none; }
.sidebar.minimized .nav-link{ justify-content:center; padding:10px 8px; }

/* FIX subitens no minimizado */
.sidebar.minimized .submenu-list{ padding:8px 4px; }
.sidebar.minimized .submenu-list .nav-link{
  justify-content:center; padding:10px 8px; padding-left:0 !important; gap:0; width:100%;
}
.sidebar.minimized .submenu-list .nav-link i{ position:static; transform:none; width:26px; text-align:center; }

/* Ações inferiores */
.bottom-actions{
  position:absolute; left:0; right:0; bottom:8px; display:flex; gap:8px; justify-content:center;
}
.bottom-actions button{
  width:42px; height:42px; border:0; border-radius:12px; background:rgba(9,92,244,.12); color:#0b2a6e;
  display:flex; align-items:center; justify-content:center; transition: background var(--e-fast), transform var(--e-fast);
  backdrop-filter: blur(6px);
}
.bottom-actions button:hover{ transform: translateY(-1px); background:rgba(9,92,244,.18); }
body.dark-mode .bottom-actions button{ background:rgba(255,255,255,.08); color:#fff; }

/* Mobile/off-canvas */
.sidebar{ transform:translateX(0); }
@media (max-width: 767.98px){
  .sidebar{ transform:translateX(-102%); }
  .sidebar.minimized{ transform:translateX(-102%); }
  .sidebar.show{ transform:translateX(0) !important; }
}

/* Backdrop SEMPRE transparente (não escurece o fundo). Só serve para capturar
   o clique fora e recolher o sidebar quando ele está expandido por cima. */
#sidebarBackdrop{ background:transparent; opacity:0; }
#sidebarBackdrop.visible{ display:block; pointer-events:auto; }

/* Conteúdo principal */
.main-content{
  position:relative; z-index:auto; padding:10px; min-height:100%;
  transition: margin-left var(--e-medium); background:transparent; overflow-x:hidden; max-width: 100%;
}
@media (min-width: 768px){
  /* O conteúdo reserva SEMPRE só o trilho (mini). O sidebar expandido flutua
     POR CIMA do conteúdo (overlay), sem empurrar/reflow. */
  .sidebar ~ .main-content{
    margin-left: calc(var(--sb-min) + (var(--sb-gap, 2px) * 2));
  }
}

/* Hero default some quando existir hero-card específico */
.main-content:has(> .hero-card) > .hero{ display:none !important; }

.hero{
  background:linear-gradient(135deg,var(--ti-primary),var(--ti-primary-2));
  color:#fff; border-radius:var(--ti-radius,14px); box-shadow:var(--ti-shadow);
  padding:14px 16px; margin:10px 6px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.hero .title{ margin:0; font-weight:700; }
.btn-ti{ background:var(--ti-primary); border-color:var(--ti-primary); color:#fff; border-radius:.65rem; }
.btn-ti:hover{ filter:brightness(.98); }

/* Forms dark tweaks (globais) */
body.dark-mode .form-control,
body.dark-mode .form-select{
  color:#e6e6e6; background:#181818; border-color:rgba(255,255,255,.12);
}
body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus{
  color:#fff; background:#1b1b1b; border-color:var(--ti-primary);
  box-shadow:0 0 0 .25rem rgba(9,92,244,.25);
}

/* ----------------------------------------------------------------------------
   Compact mode (ui-sm)
---------------------------------------------------------------------------- */
.ui-sm{ font-size:.9375rem; }
/* Hero FINO é o padrão Alpino: padding vertical reduzido, ícone/tipografia
   compactos. Título e subtítulo devem usar mb-0 (nada de h5/mb-1 no título —
   engordam o hero e quebram a uniformidade entre as telas). */
.hero-card.hero-sm{ padding:7px 12px; border-radius:14px; }
.hero-card.hero-sm .hero-ico{ width:32px; height:32px; font-size:16px; border-radius:9px; }
.hero-card.hero-sm .hero-title{ font-size:.95rem; line-height:1.2; }
.hero-card.hero-sm .hero-sub{ font-size:.8rem; line-height:1.2; }
.hero-card.hero-sm .btn{ padding:.3rem .6rem; font-size:.875rem; border-radius:.5rem; }
/* Header compacto no mobile (Padrão Alpino): ícone menor alinhado à mesma
   linha do título + fonte reduzida, para o conjunto caber em 1 linha em ≤575px.
   Os títulos devem usar `text-truncate` (+ wrapper `min-w-0`) para garantir
   a linha única. Aplica-se a TODOS os heros .hero-sm. */
@media (max-width:575.98px){
  .hero-card.hero-sm .hero-ico{ width:30px; height:30px; font-size:15px; border-radius:9px; }
  .hero-card.hero-sm .hero-title{ font-size:.9rem; line-height:1.15; }
  .hero-card.hero-sm .hero-sub{ font-size:.72rem; }
}

.glass-card{ display:flex; flex-direction:column; gap:.6rem; }
.ui-sm .glass-card{ padding:10px 12px; gap:.5rem; }

.ui-sm .helper{ font-size:.8rem; }
.ui-sm .row.g-2{ --bs-gutter-x:.5rem; --bs-gutter-y:.5rem; }

.ui-sm .form-label{ font-size:.82rem; margin-bottom:.25rem; }
.ui-sm .form-control,
.ui-sm .form-select,
.ui-sm .form-control.form-control-sm,
.ui-sm .form-select.form-select-sm{
  font-size:.875rem; padding:.35rem .5rem; border-radius:.5rem;
}
.ui-sm select[multiple]{ font-size:.875rem; line-height:1.25; }
.ui-sm .input-group-text{ padding:.35rem .5rem; font-size:.875rem; border-radius:.5rem; }
.ui-sm #id_funcionarios{ min-height:220px; font-size:.875rem; line-height:1.25; }

.ui-sm .btn{ padding:.35rem .6rem; font-size:.875rem; border-radius:.5rem; }
.ui-sm .btn.btn-sm{ padding:.3rem .5rem; font-size:.8125rem; }
.ui-sm .btn.btn-ti{ padding:.35rem .6rem; font-size:.875rem; border-radius:.5rem; }
.ui-sm input[type="search"].form-control{ padding:.3rem .5rem; }
.ui-sm hr{ margin:.75rem 0; opacity:.6; }

/* tabelas mais compactas e col de ações um pouco maior */
.ui-sm .table.table-alpino th,
.ui-sm .table.table-alpino td{ padding:.5rem .5rem; }
th.col-actions{ width:160px !important; }

/* ----------------------------------------------------------------------------
   FAB + Picker lateral + Chips
---------------------------------------------------------------------------- */
.picker-panel{
  position:fixed; top:0; right:0; bottom:0;
  width:min(420px,100vw); transform:translateX(102%);
  transition:transform .26s cubic-bezier(.22,1,.36,1); z-index:1079;
  display:flex; flex-direction:column;
}
.picker-panel.show{ transform:translateX(0); }

.picker-header{
  background:linear-gradient(135deg, var(--ti-primary), var(--ti-primary-2));
  color:#fff; padding:10px 12px; border-top-left-radius:14px;
}
.picker-header .title{ margin:0; font-weight:700; font-size:1rem; }

.picker-body{ padding:10px 12px; overflow:auto; }
.picker-search{ margin-bottom:8px; }
.picker-list{ display:grid; gap:6px; }

.picker-item{
  display:grid; grid-template-columns:var(--picker-avatar) 1fr auto; align-items:center;
  gap:12px; padding:8px 10px; border-radius:12px; background:rgba(255,255,255,.5);
  cursor:pointer; user-select:none; transition:background .12s ease, transform .05s ease;
}
.picker-item:hover{ background:rgba(9,92,244,.12); }
.picker-item:active{ transform:translateY(1px); }
.picker-item .avatar{
  width:var(--picker-avatar) !important; height:var(--picker-avatar) !important;
  border-radius:999px; background:#eaf1ff; display:grid; place-items:center; font-size:14px; color:#0b5cff;
}
.picker-item .avatar-img{
  width:var(--picker-avatar); height:var(--picker-avatar); border-radius:999px; object-fit:cover;
  border:1px solid rgba(0,0,0,.08); display:block;
}
body.dark-mode .picker-item .avatar-img{ border-color:rgba(255,255,255,.14); }
.picker-item .name{ font-weight:600; line-height:1.15; }
.picker-item .meta{ font-size:.82rem; opacity:.85; }
.picker-item .check{ font-size:1.05rem; opacity:0; transition:opacity .12s ease; }
.picker-item.is-selected{ background:rgba(9,92,244,.16); }
.picker-item.is-selected .check{ opacity:1; }

body.dark-mode .picker-item{ background:rgba(202, 202, 202, 0.08); }
body.dark-mode .picker-item:hover{ background:rgba(255,255,255,.12); }
body.dark-mode .picker-item.is-selected{ background:rgba(255,255,255,.18); }

/* ========================= CHIPS (selecionados) ========================== */
.chips{
  display:grid;
  /* min() para a coluna nunca ficar maior que o container: com 320px fixo os
     chips vazavam a tela no mobile (< 320px úteis). */
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap:10px;
  align-items:start;
  min-width:0;
}
@media (min-width:1200px){
  .chips{ grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); }
}

.person-chip{
  background:var(--mbl-blue-bg);
  border:1px solid var(--mbl-blue-border);
  color:var(--mbl-blue-ink);
  box-shadow:var(--ti-shadow);
  border-radius:12px;
  padding:8px 10px;
  display:grid;
  row-gap:4px;
}
.person-chip .chip-main{
  display:grid;
  grid-template-columns: var(--chip-avatar) 1fr auto;
  column-gap:10px;
  align-items:center;
  min-width:0;
}
.person-chip .chip-avatar,
.person-chip .chip-fallback{
  width:var(--chip-avatar);
  height:var(--chip-avatar);
  border-radius:999px;
  object-fit:cover;
  border:1px solid rgba(0,0,0,.08);
  display:block;
  grid-column:1;
}
.person-chip .chip-fallback{
  display:grid;
  place-items:center;
  font-weight:600;
  background:#eaf1ff;
  color:#0b5cff;
}
.person-chip .name{
  grid-column:2;
  font-weight:600;
  line-height:1.15;
  margin:0;
}
.person-chip .chip-main small,
.person-chip .meta{
  grid-column:2;
  font-size:.82rem;
  opacity:.85;
  margin:0;
}
.person-chip .rm{
  grid-column:3;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px; height:22px;
  border-radius:999px;
  background:rgba(11,92,244,.12);
  cursor:pointer;
}
.person-chip .rm i{ font-size:12px; line-height:1; }
.person-chip .sub{ grid-column:2 / span 2; font-size:.78rem; opacity:.9; }

/* Variante SEM .chip-main: avatar + .chip-body + .rm direto no chip (Form.16,
   Treinamentos). Sem estas regras os filhos empilhavam e o texto vazava. */
.person-chip:has(> .chip-body){
  grid-template-columns: var(--chip-avatar) minmax(0,1fr) auto;
  column-gap:10px;
  align-items:center;
}
.person-chip:has(> .chip-body) > .chip-avatar,
.person-chip:has(> .chip-body) > .chip-fallback{ grid-column:1; grid-row:1; }
.person-chip > .chip-body{
  grid-column:2; grid-row:1; min-width:0;
  display:flex; flex-direction:column; gap:1px;
}
.person-chip:has(> .chip-body) > .rm{ grid-column:3; grid-row:1; }
.person-chip .chip-body h6{ font-size:.92rem; line-height:1.18; overflow-wrap:anywhere; }
.person-chip .chip-body .meta{ overflow-wrap:anywhere; }

body.dark-mode .person-chip{
  background:var(--mbl-navy-bg);
  border-color:var(--mbl-navy-border);
  color:var(--mbl-navy-ink);
}
body.dark-mode .person-chip .chip-avatar{
  border-color:rgba(255,255,255,.14);
  box-shadow:0 0 0 2px var(--mbl-navy-bg);
}
body.dark-mode .person-chip .chip-fallback{
  background:rgba(255,255,255,.08);
  color:#cfe1ff;
}

/* Checkboxes compactos */
.ui-sm .form-check.form-check-sm .form-check-input{ transform:scale(.9); margin-top:.2rem; }
.ui-sm .form-check.form-check-sm .form-check-label{ font-size:.92rem; }

/* Títulos com ícone inline */
.title-inline{ display:flex; align-items:center; gap:.5rem; }
.hero-ico--sm{ display:inline-grid; width:36px; height:36px; font-size:20px; }

/* ===== Centralização no modo minimizado ===== */
.sidebar.minimized .nav.flex-column,
.sidebar.minimized .submenu-list{ padding-left:0; padding-right:0; }
.sidebar.minimized .nav-link,
.sidebar.minimized .submenu-list .nav-link{
  --tile:48px; width:var(--tile); height:var(--tile); margin:0 auto; padding:0;
  border-radius:12px; display:grid; place-items:center; gap:0;
}
.sidebar.minimized .submenu-list .nav-link i,
.sidebar.minimized .nav-link i{ position:static; transform:none; width:auto; text-align:center; font-size:1.25rem; }
.sidebar.minimized .bottom-actions{ flex-direction:column; align-items:center; gap:6px; }
.sidebar.minimized .bottom-actions button{ width:36px; height:36px; margin:0 !important; border-radius:10px; }
.sidebar.minimized .bottom-actions i{ font-size:1rem; }

/* ===== Alpino Toggle (checkbox → switch) ===== */
.form-check.toggle{
  --tgl-w:44px; --tgl-h:26px; --tgl-pad:2px; --tgl-radius:999px;
  --tgl-track-off-bg: rgba(9,92,244,.12);
  --tgl-track-off-bd: var(--mbl-blue-border, #d6e4ff);
  --tgl-track-on-bg:  linear-gradient(135deg, var(--ti-primary,#095cf4), var(--ti-primary-2,#0046bd));
  --tgl-thumb-bg:#fff;
  --tgl-focus-ring: rgba(9,92,244,.28);
  display:block;
}
.form-check.toggle .form-check-input{ position:absolute !important; opacity:0 !important; width:1px; height:1px; pointer-events:none; }
.form-check.toggle .form-check-label{
  position:relative; display:inline-flex; align-items:center; min-height:var(--tgl-h);
  padding-left:calc(var(--tgl-w) + 10px); cursor:pointer; user-select:none; gap:.35rem;
}
.form-check.toggle .form-check-label::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:var(--tgl-w); height:var(--tgl-h); border-radius:var(--tgl-radius);
  background:var(--tgl-track-off-bg); border:1px solid var(--tgl-track-off-bd);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.06);
  transition: background var(--e-fast), border-color var(--e-fast), box-shadow var(--e-fast);
}
.form-check.toggle .form-check-label::after{
  --thumb: calc(var(--tgl-h) - var(--tgl-pad)*2);
  content:""; position:absolute; left:var(--tgl-pad); top:50%; transform:translateY(-50%);
  width:var(--thumb); height:var(--thumb); border-radius:999px; background:var(--tgl-thumb-bg);
  box-shadow:0 1px 3px rgba(2,8,23,.15), 0 0 0 1px rgba(2,8,23,.06);
  transition:left var(--e-fast), box-shadow var(--e-fast), transform .12s ease;
}
.form-check.toggle .form-check-label:hover::after{ box-shadow:0 2px 6px rgba(2,8,23,.22), 0 0 0 1px rgba(2,8,23,.08); }
.form-check.toggle .form-check-input:checked + .form-check-label::before{ background:var(--tgl-track-on-bg); border-color:transparent; }
.form-check.toggle .form-check-input:checked + .form-check-label::after{
  left: calc(var(--tgl-w) - (var(--tgl-h) - var(--tgl-pad)*2) - var(--tgl-pad));
}
.form-check.toggle .form-check-input:focus-visible + .form-check-label::before,
.form-check.toggle .form-check-input:focus + .form-check-label::before{ box-shadow:0 0 0 .25rem var(--tgl-focus-ring); }
.form-check.toggle .form-check-input:disabled + .form-check-label{ opacity:.65; cursor:not-allowed; }
.form-check.toggle .form-check-input:disabled + .form-check-label::after{ box-shadow:0 0 0 1px rgba(2,8,23,.06); }
.form-check.form-check-sm.toggle{ --tgl-w:38px; --tgl-h:22px; --tgl-pad:2px; font-size:.92rem; }
/* Dark mode */
body.dark-mode .form-check.toggle{
  --tgl-track-off-bg: rgba(255,255,255,.10);
  --tgl-track-off-bd: rgba(255,255,255,.18);
  --tgl-thumb-bg: #f5f7ff;
  --tgl-focus-ring: rgba(207,225,255,.28);
}
body.dark-mode .form-check.toggle .form-check-label::before{ box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 1px 2px rgba(0,0,0,.45); }
body.dark-mode .form-check.toggle .form-check-label:hover::after{ box-shadow:0 2px 8px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.12); }

/* ----------------------------------------------------------------------------
   Overlay de carregamento (global reutilizável)
---------------------------------------------------------------------------- */
.loading-overlay{
  position:fixed; inset:0; z-index:2090;
  display:none; align-items:center; justify-content:center;
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(8px) saturate(140%); backdrop-filter: blur(8px) saturate(140%);
}
.loading-overlay.show{ display:flex; }
.loading-card{
  display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:14px;
  background:var(--mbl-blue-bg); border:1px solid var(--mbl-blue-border); color:var(--mbl-blue-ink);
  box-shadow:var(--ti-shadow);
}
.spinner{
  width:28px; height:28px; border-radius:50%;
  border:3px solid rgba(0,0,0,.15); border-top-color:var(--ti-primary);
  animation:spin 1s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }
body.dark-mode .loading-overlay{ background:rgba(0,0,0,.45); }
body.dark-mode .loading-card{ background:var(--mbl-navy-bg); border-color:var(--mbl-navy-border); color:var(--mbl-navy-ink); }
body.is-loading{ overflow:hidden; }

/* ----------------------------------------------------------------------------
   Acessibilidade / Movimento reduzido
---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .fab-picker, .fab-picker *{ animation:none !important; transition:none !important; }
  .form-check.toggle .form-check-label::before,
  .form-check.toggle .form-check-label::after{ transition:none; }
}

/* ----------------------------------------------------------------------------
   Botões icônicos (glass + redondos) — reuso em listas/ações
---------------------------------------------------------------------------- */
.ic-group{ display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:nowrap; white-space:nowrap; }
.btn-ic{
  --ic-size: 34px;
  width:var(--ic-size); height:var(--ic-size);
  border-radius:999px; display:inline-grid; place-items:center;
  padding:0; line-height:1; border:1px solid rgba(0,0,0,.06);
  background:rgba(255,255,255,.45);
  backdrop-filter:saturate(140%) blur(8px);
  -webkit-backdrop-filter:saturate(140%) blur(8px);
  box-shadow:0 4px 14px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease, opacity .12s ease;
  text-decoration:none !important;
}
.btn-ic.sm{ --ic-size:34px; }
.btn-ic i{ font-size:16px; line-height:1; }
@media (hover:hover){
  .btn-ic:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.35); }
}
.btn-ic:active{ transform:translateY(0); }
.btn-ic:focus-visible{ outline:3px solid rgba(11,102,255,.35); outline-offset:2px; }
.btn-ic:disabled, .btn-ic.disabled{ opacity:.5; pointer-events:none; }

/* tema escuro */
body.dark-mode .btn-ic{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.18);
  box-shadow:0 4px 14px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12);
}

/* cores (icone) */
.ic-blue { color:#0b66ff; }        body.dark-mode .ic-blue { color:#8fb8ff; }
.ic-green{ color:#15803d; }        body.dark-mode .ic-green{ color:#7ee2a5; }
.ic-amber{ color:#b45309; }        body.dark-mode .ic-amber{ color:#facc15; }
.ic-grey { color:#334155; }        body.dark-mode .ic-grey { color:#cbd5e1; }
.ic-red   { color:#b91c1c; }       body.dark-mode .ic-red   { color:#fca5a5; }
.ic-cyan  { color:#0ea5e9; }       body.dark-mode .ic-cyan  { color:#7dd3fc; }
.ic-purple{ color:#7c3aed; }       body.dark-mode .ic-purple{ color:#c4b5fd; }

/* tamanhos extras */
.btn-ic.xs{ --ic-size:30px; }
.btn-ic.lg{ --ic-size:44px; }
.btn-ic.xl{ --ic-size:52px; }
.btn-ic[data-auto-ico] i{ font-size:calc(var(--ic-size) * .42); }

/* estados */
.btn-ic.is-on,
.btn-ic[aria-pressed="true"]{
  outline:3px solid rgba(11,102,255,.35);
  outline-offset:2px;
  filter:saturate(150%);
}

/* toque suave */
.btn-ic{ -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
@media (prefers-reduced-motion: reduce){ .btn-ic{ transition:none; } }

/* ==========================================================================
   .fx-gloss — PADRÃO Alpino de "brilho de luz" (highlight interno + glow colorido)
   --------------------------------------------------------------------------
   Dá o aspecto vidro/relevo: uma linha de luz branca no topo (inset highlight)
   + um brilho externo NA MESMA COR do elemento (colored glow).

   USO:
     - Elemento colorido pronto:  class="fx-gloss on-red"
       (define fundo + texto branco + glow da cor de uma vez)
     - Só o efeito, cor por conta:  class="fx-gloss"  com  style="--fx-glow: rgba(R,G,B,.35)"
     - Regular a intensidade:      --fx-sheen (alpha do highlight, def .28)
                                   --fx-glow-blur (espalhamento, def 14px)
   Combina com border-radius alto e (opcional) backdrop-filter:blur() p/ vidro.
   ========================================================================== */
.fx-gloss{
  --fx-glow: rgba(15,23,42,.20);   /* cor do brilho externo (troque pela cor do elemento) */
  --fx-sheen: .28;                 /* alpha da linha de luz no topo */
  --fx-glow-blur: 14px;            /* espalhamento do glow externo */
  box-shadow:
    0 4px var(--fx-glow-blur) var(--fx-glow),
    inset 0 1px 0 rgba(255,255,255,var(--fx-sheen)) !important;
}
/* variante "glossy" mais plástica (highlight mais forte) */
.fx-gloss.glossy{ --fx-sheen:.42; }

/* Cores prontas (fundo sólido + texto branco + glow da própria cor).
   Alinhadas à paleta dos ícones .ic-* do Alpino. */
.fx-gloss.on-red   { background:#dc2626 !important; border-color:#dc2626 !important; color:#fff !important; --fx-glow:rgba(220,38,38,.35); }
.fx-gloss.on-green { background:#16a34a !important; border-color:#16a34a !important; color:#fff !important; --fx-glow:rgba(22,163,74,.35); }
.fx-gloss.on-blue  { background:#0b66ff !important; border-color:#0b66ff !important; color:#fff !important; --fx-glow:rgba(11,102,255,.35); }
.fx-gloss.on-amber { background:#d97706 !important; border-color:#d97706 !important; color:#fff !important; --fx-glow:rgba(217,119,6,.35); }
.fx-gloss.on-cyan  { background:#0ea5e9 !important; border-color:#0ea5e9 !important; color:#fff !important; --fx-glow:rgba(14,165,233,.35); }
.fx-gloss.on-purple{ background:#7c3aed !important; border-color:#7c3aed !important; color:#fff !important; --fx-glow:rgba(124,58,237,.35); }
.fx-gloss.on-grey  { background:#334155 !important; border-color:#334155 !important; color:#fff !important; --fx-glow:rgba(51,65,85,.35); }
/* o ícone/texto interno herda o branco */
.fx-gloss[class*="on-"] i{ color:#fff !important; }

body.dark-mode .fx-gloss.on-red   { border-color:#ef4444 !important; }
body.dark-mode .fx-gloss.on-green { border-color:#22c55e !important; }
body.dark-mode .fx-gloss.on-blue  { border-color:#3b82f6 !important; }
body.dark-mode .fx-gloss.on-amber { border-color:#f59e0b !important; }
body.dark-mode .fx-gloss.on-cyan  { border-color:#38bdf8 !important; }
body.dark-mode .fx-gloss.on-purple{ border-color:#a78bfa !important; }
body.dark-mode .fx-gloss.on-grey  { border-color:#64748b !important; }

/* ==========================================================================
   .row-actions — PADRÃO Alpino p/ ações em linha (btn-ic lado a lado)
   Mantém os ícones SEMPRE na mesma linha (sem quebrar), alinhados à direita.
   Use em toda célula "Ações" de table-alpino e no rodapé de cards mobile.
   ========================================================================== */
.row-actions{
  display:inline-flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:.25rem;
  white-space:nowrap;
}
td.text-end .row-actions,
.text-end > .row-actions{ justify-content:flex-end; }

/* ==========================================================================
   Skeleton / placeholder de carregamento ("loading card") — padrão Alpino
   Uso: <div class="skeleton skel-line"></div>, .skel-circle, ou .skeleton
   como fundo de um bloco enquanto o conteúdo real é carregado via AJAX.
   ========================================================================== */
.skeleton{ position:relative; overflow:hidden; background:#e9eef5; border-radius:8px; }
.skeleton::after{
  content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  animation:skel-shimmer 1.2s infinite;
}
@keyframes skel-shimmer{ 100%{ transform:translateX(100%); } }
.skel-line{ height:.8rem; border-radius:6px; }
.skel-line + .skel-line{ margin-top:.5rem; }
.skel-circle{ border-radius:50%; }
body.dark-mode .skeleton{ background:rgba(255,255,255,.08); }
body.dark-mode .skeleton::after{ background:linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent); }
@media (prefers-reduced-motion: reduce){ .skeleton::after{ animation:none; } }

/* ==========================================================================
   DataTable child row (linha expansível) — padrão Alpino
   Coluna de controle (chevron) + detalhe expandido com info-rows.
   ========================================================================== */
.table-alpino td.dt-control-cell{
  width:36px; cursor:pointer; text-align:center; color:var(--ti-primary,#0b66ff);
  user-select:none;
}
.dt-expand-ico{ transition:transform .18s ease; font-size:15px; }
.table-alpino tr.dt-expanded td.dt-control-cell .dt-expand-ico{ transform:rotate(90deg); }
.table-alpino tr.dt-child-shown > td{ background:rgba(11,102,255,.03); }
.dt-child{
  display:flex; flex-wrap:wrap; gap:.35rem 2rem;
  padding:.5rem .25rem .65rem 42px;
}
.dt-child-row{ display:flex; align-items:baseline; gap:.5rem; min-width:0; }
.dt-child-lab{ font-weight:700; color:var(--ti-muted,#64748b); font-size:.8rem; white-space:nowrap; }
.dt-child-lab i{ margin-right:.15rem; }
.dt-child-val{ font-size:.9rem; color:inherit; }
body.dark-mode .table-alpino tr.dt-child-shown > td{ background:rgba(90,150,255,.06); }
body.dark-mode .dt-child-lab{ color:#9fb2c9; }

/* Tooltip glass */
.tooltip .tooltip-inner{
  border-radius:10px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  background:rgba(0,0,0,.78);
  color:#fff;
  border:1px solid rgba(255,255,255,.15);
}
body.dark-mode .tooltip .tooltip-inner{
  background:rgba(255,255,255,.10);
  color:#fff;
  border-color:rgba(255,255,255,.18);
}

/* ----------------------------------------------------------------------------
   Badges “subtle” no dark
---------------------------------------------------------------------------- */
body.dark-mode .badge.bg-primary-subtle{ background:rgba(64,153,255,.15) !important; color:#cfe1ff !important; }
body.dark-mode .badge.bg-secondary-subtle{ background:rgba(255,255,255,.08) !important; color:#f2f2f2 !important; }

/* ----------------------------------------------------------------------------
   Fundos para linhas “detalhe” (ex.: participantes)
---------------------------------------------------------------------------- */
.parts-row td{ background:rgba(0,0,0,.02); }
body.dark-mode .parts-row td{ background:rgba(255,255,255,.05); }

/* ============== Doc-card (cards mobile) – padrão Alpino ============== */
/* claro: azul claro */
.doc-card{
  border-radius:14px;
  background: var(--mbl-blue-bg);
  border: 1px solid var(--mbl-blue-border);
  color: var(--mbl-blue-ink);
  box-shadow: var(--ti-shadow);
  padding:14px 16px;
}

body.dark-mode .doc-card{
  background: var(--mbl-navy-bg);
  border: 1px solid var(--mbl-navy-border);
  color: var(--mbl-navy-ink);
  box-shadow: 0 8px 18px rgba(0,0,0,.45);
}

.doc-card + .doc-card{
  margin-top:12px;
}

/* título/metas continuam legíveis no dark */
body.dark-mode .doc-title{ color:#fff; }
body.dark-mode .doc-meta{ color:#cfe1ff; opacity:.9; }

/* reforço visual das bordas quando há fundo escuro atrás */
.doc-card{ outline: 0; }
body.dark-mode .doc-card{ outline: 0; }

/* ajustes do container dos cards no mobile (opcional, deixa respiro) */
.d-lg-none > .doc-card{ margin-bottom:12px; }

/* ============== Glass/blue cards – borda sempre aparente ============== */
.glass-card{
  border: 1px solid var(--mbl-blue-border);
}
body.dark-mode .glass-card{
  border: 1px solid var(--mbl-navy-border);
}

/* ============== Placeholders visíveis no dark mode ==================== */
input::placeholder,
textarea::placeholder{
  opacity:.7;               /* claro: leve */
}

/* escuro: tom claro azulado para contraste */
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder{
  color:#cfe1ff;
  opacity:.9;
}

/* compat: WebKit/Edge antigos */
body.dark-mode input::-webkit-input-placeholder,
body.dark-mode textarea::-webkit-input-placeholder{ color:#cfe1ff; opacity:.9; }

/* ==========================================================================
   Pills globais (badges pastéis arredondados) — Alpino UI
   ========================================================================== */

/* container padrão */
.pill-list{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  align-items:center;
}

/* base pill */
.pill{
  display:inline-flex;
  align-items:center;
  padding:.28rem .55rem;
  border-radius:999px !important;
  font-weight:700;
  font-size:.78rem;
  line-height:1;
  white-space:nowrap;
  border:1px solid rgba(0,0,0,.08);
}

/* borda no dark */
body.dark-mode .pill{
  border-color:rgba(255,255,255,.14);
}

/* ========== VARIANTES POR COR (LIGHT) ========== */

.pill-green{
  background:rgba(16,185,129,.14);
  color:#065f46;
}

.pill-slate{
  background:rgba(148,163,184,.18);
  color:#334155;
}

.pill-blue{
  background:rgba(9,92,244,.12);
  color:#0b2a6e;
}

.pill-cyan{
  background:rgba(14,165,233,.14);
  color:#075985;
}

.pill-info{
  background:rgba(14,165,233,.14);
  color:#075985;
}

.pill-indigo{
  background:rgba(99,102,241,.14);
  color:#312e81;
}

/* extras úteis (opcionais, mas vale ter no kit) */

.pill-amber{
  background:rgba(245,158,11,.16);
  color:#92400e;
}

.pill-red{
  background:rgba(239,68,68,.14);
  color:#7f1d1d;
}

/* ========== VARIANTES POR COR (DARK) ========== */

body.dark-mode .pill-green{
  background:rgba(16,185,129,.22);
  color:#d1fae5;
}

body.dark-mode .pill-slate{
  background:rgba(148,163,184,.20);
  color:#e2e8f0;
}

body.dark-mode .pill-blue{
  background:rgba(9,92,244,.22);
  color:#e7efff;
}

body.dark-mode .pill-cyan{
  background:rgba(14,165,233,.22);
  color:#cffafe;
}

body.dark-mode .pill-info{
  background:rgba(14,165,233,.22);
  color:#cffafe;
}

body.dark-mode .pill-indigo{
  background:rgba(99,102,241,.22);
  color:#e0e7ff;
}

body.dark-mode .pill-amber{
  background:rgba(245,158,11,.18);
  color:#fde68a;
}

body.dark-mode .pill-red{
  background:rgba(239,68,68,.18);
  color:#fecaca;
}

/* ========== TAMANHOS (opcional) ========== */

.pill-sm{
  padding:.20rem .48rem;
  font-size:.74rem;
}

.pill-lg{
  padding:.34rem .68rem;
  font-size:.82rem;
}

/* ========== CLICÁVEL (chip) ========== */

.pill.is-clickable{
  cursor:pointer;
  user-select:none;
  transition: filter .12s ease, transform .05s ease;
}

@media (hover:hover){
  .pill.is-clickable:hover{ filter: brightness(1.03); }
}

.pill.is-clickable:active{
  transform: translateY(1px);
}


/* ===== Filter-pop (desktop) — força largura grande ===== */
.filter-pop {
  /* Bootstrap usa essa variável pra min-width do dropdown */
  --bs-dropdown-min-width: min(920px, 96vw);

  width: var(--bs-dropdown-min-width) !important;
  max-width: 96vw !important;

  padding: 12px !important;
  border-radius: 14px;
    border:1px solid rgba(9,92,244,.14);
    box-shadow:var(--ti-shadow);
    background:rgba(255,255,255,.92);
    backdrop-filter: blur(10px);
}
  body.dark-mode .filter-pop{
    background:rgba(15,18,25,.92);
    border-color:rgba(255,255,255,.14);
  }
/* deixa o form ocupar toda a largura do menu */
.filter-pop .dropdown-menu form{ width:100%; }

/* evita que inputs fiquem “espremidos” dentro de flex/grid */
.filter-pop .dropdown-menu .row > [class*="col-"]{
  min-width: 0;
}

/* ===== Offcanvas Filtros (mobile lateral) ===== */
.offcanvas.offcanvas-end{
  width: min(92vw, 420px);
  border-top-left-radius:16px;
  border-bottom-left-radius:16px;
}

/* dark mode */
body.dark-mode .offcanvas:not(.offcanvas-glass){
  border-color:rgba(255,255,255,.14);
  background:#0f1220;
  color:#eaf1ff;
}


body.dark-mode .filter-pop .form-label{ color:rgba(255,255,255,.82); }
body.dark-mode .filter-pop .filter-title{ color:rgba(255,255,255,.82); }

/* =========================================================
   Alpino UI — Offcanvas (Glass / Ações / Filtros)
   Padrão oficial (desktop + mobile)
   ========================================================= */

/* Offcanvas glass base */
.offcanvas.offcanvas-glass{
  background:rgba(255,255,255,.40);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-left:1px solid rgba(255,255,255,.45);
  box-shadow:0 14px 30px rgba(0,0,0,.12);
  color:inherit;
}

/* Dark mode */
body.dark-mode .offcanvas.offcanvas-glass{
  background:rgba(8,12,24,.72);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-left:1px solid rgba(255,255,255,.14);
  box-shadow:0 14px 30px rgba(0,0,0,.55);
  color:#e7efff;
}

/* Não escurecer a tela (backdrop invisível, mas clicável p/ fechar) */
.offcanvas-backdrop{
  background:transparent !important;
}
.offcanvas-backdrop.show{
  opacity:0 !important;
}

/* Offcanvas “Ações” (largura padrão) */
.offcanvas-actions{
  width:min(92vw, 420px) !important;
  border-top-left-radius:16px;
  border-bottom-left-radius:16px;
}

/* Header com título/ícone no estilo Alpino */
.offcanvas-glass .offcanvas-header{
  padding:14px 14px 10px;
}
.offcanvas-glass .title-inline{
  display:flex;
  align-items:center;
  gap:.6rem;
  min-width:0;
}
.offcanvas-glass .title-inline .min-w-0{
  min-width:0;
}
.offcanvas-glass .offcanvas-header .btn-close{
  opacity:.9;
}
body.dark-mode .offcanvas-glass .offcanvas-header .btn-close{
  filter:invert(1) grayscale(1);
  opacity:.85;
}

/* Subtítulo no dark mode (quando usa text-muted) */
body.dark-mode .offcanvas-glass .text-muted{
  color:rgba(231,239,255,.70) !important;
}

/* Corpo */
.offcanvas-glass .offcanvas-body{
  padding:14px;
}

body.dark-mode .offcanvas-glass{
  background:rgba(0,0,0,.45);
  border-left-color:rgba(255,255,255,.14);
  box-shadow:0 14px 30px rgba(0,0,0,.55);
  color:#e7efff;
}

/* =========================
   Card Soft — Alpino UI
   usar em: tickets/base.html
   ========================= */
.card-soft{
  position: relative;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(9,92,244,.08);
  border-radius: 14px;
  padding: 1rem;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.card-soft:hover{
  transform: translateY(-2px);
  box-shadow: 0 1rem 1.6rem rgba(0,0,0,.10);
  border-color: rgba(9,92,244,.16);
}

.card-soft::before{
  content:"";
  position:absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, #095cf4 0%, #0046bd 100%);
  opacity:.95;
}

/* variações úteis */
.card-soft.card-soft-flat{
  box-shadow: none;
  border: 1px solid rgba(9,92,244,.10);
}

.card-soft.card-soft-no-top::before{
  display:none;
}

/* dark mode */
body.dark-mode .card-soft{
  background: #1f2430;
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 .75rem 1.25rem rgba(0,0,0,.28);
  color: #eef3ff;
}

body.dark-mode .card-soft:hover{
  box-shadow: 0 1rem 1.8rem rgba(0,0,0,.34);
  border-color: rgba(255,255,255,.12);
}

body.dark-mode .card-soft .text-muted,
body.dark-mode .card-soft small,
body.dark-mode .card-soft .form-text{
  color: rgba(231,239,255,.70) !important;
}

/* inputs dentro do card-soft */
.card-soft .form-control,
.card-soft .form-select{
  border-radius: .65rem;
}

/* lista / tabela dentro do card */
.card-soft .table:last-child,
.card-soft .list-group:last-child,
.card-soft .accordion:last-child{
  margin-bottom: 0;
}
.card-soft.card-soft-glass{
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.dark-mode .card-soft.card-soft-glass{
  background: rgba(31,36,48,.78);
}
.kpi-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
    margin-bottom:12px;
  }
  @media (max-width:1199.98px){ .kpi-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
  @media (max-width:575.98px){ .kpi-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

  .kpi-card{
    position:relative; overflow:hidden; color:#fff;
    border-radius:14px; box-shadow:var(--ti-shadow);
    padding:16px; min-height:96px;
    background:linear-gradient(135deg,#095cf4 0%, #0046bd 100%);
  }
  .kpi-card .label{ opacity:.92; font-size:.92rem; }
  .kpi-card .value{ font-size:1.6rem; font-weight:700; line-height:1.1; margin-top:6px; }

    .hero-actions-desktop{ display:none; gap:.5rem; margin-left:auto; }
  .hero-actions-mobile{ display:flex; margin-left:auto; }
  @media (min-width:992px){
    .hero-actions-desktop{ display:flex; }
    .hero-actions-mobile{ display:none; }
  }
    .gp-mobile-cards{ display:none; }
  @media (max-width:991.98px){
    .gp-desktop-table{ display:none; }
    .gp-mobile-cards{ display:block; }
  }

  /* =========================================================
   GED Viewer modal — layout lateral 1/3 + 2/3
   ========================================================= */
.modal.modal-ged-full .modal-dialog{
  max-width:96vw !important;
  width:96vw;
  height:94vh;
  margin:2vh auto;
}

.modal.modal-ged-full .modal-content{
  height:100%;
  display:flex;
  flex-direction:column;
  border-radius:16px;
}

.modal.modal-ged-full .modal-header{
  flex:0 0 auto;
}

.modal.modal-ged-full .modal-body{
  flex:1 1 auto;
  overflow:hidden;
  padding:12px 14px;
}

.modal.modal-ged-full .ged-viewer-shell{
  display:grid;
  grid-template-columns:minmax(300px, 32%) minmax(0, 68%);
  gap:14px;
  height:100%;
  min-height:0;
}

.modal.modal-ged-full .ged-viewer-sidebar,
.modal.modal-ged-full .ged-viewer-stage{
  min-height:0;
}

.modal.modal-ged-full .ged-viewer-sidebar{
  display:flex;
  flex-direction:column;
  gap:12px;
  overflow:auto;
  padding-right:4px;
}

.modal.modal-ged-full .ged-viewer-stage{
  display:flex;
  flex-direction:column;
  min-height:0;
}

.modal.modal-ged-full .ged-meta-card{
  background:var(--mbl-blue-bg);
  border:1px solid var(--mbl-blue-border);
  border-radius:14px;
  box-shadow:var(--ti-shadow);
  padding:12px 14px;
}

.modal.modal-ged-full .ged-meta-label{
  font-size:.82rem;
  color:var(--ti-muted);
  margin-bottom:4px;
}

.modal.modal-ged-full .ged-meta-value{
  font-weight:700;
  color:var(--mbl-blue-ink);
  line-height:1.2;
}

.modal.modal-ged-full .ged-file-box{
  background:var(--mbl-blue-bg);
  border:1px solid var(--mbl-blue-border);
  border-radius:14px;
  box-shadow:var(--ti-shadow);
  padding:14px;
}

.modal.modal-ged-full .ged-file-title{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  color:var(--mbl-blue-ink);
  margin-bottom:8px;
}

.modal.modal-ged-full .ged-file-name{
  font-weight:700;
  color:var(--mbl-blue-ink);
  word-break:break-word;
}

.modal.modal-ged-full .ged-file-sub{
  font-size:.86rem;
  color:var(--ti-muted);
  margin-top:4px;
}

.modal.modal-ged-full .ged-controls{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
  margin-top:12px;
}

.modal.modal-ged-full .ged-controls .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
}

.modal.modal-ged-full .ged-page-badge{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  border-radius:12px;
  background:rgba(9,92,244,.08);
  border:1px solid rgba(9,92,244,.12);
  font-weight:700;
  color:var(--mbl-blue-ink);
}

.modal.modal-ged-full .ged-stage-card{
  flex:1 1 auto;
  min-height:0;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(9,92,244,.10);
  border-radius:16px;
  box-shadow:var(--ti-shadow);
  padding:12px;
  display:flex;
  flex-direction:column;
}

.modal.modal-ged-full .pdf-inline-wrap{
  display:flex;
  flex-direction:column;
  min-height:0;
  height:100%;
}

.modal.modal-ged-full .pdf-inline-stage{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:8px;
  background:transparent;
  border:0;
}

.modal.modal-ged-full .pdf-inline-canvas-wrap{
  width:100%;
  display:flex;
  justify-content:center;
}

.modal.modal-ged-full .pdf-inline-canvas{
  max-width:100%;
  height:auto;
  border-radius:12px;
  box-shadow:0 8px 20px rgba(0,0,0,.12);
  background:#fff;
}

.modal.modal-ged-full .ged-image-wrap{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  display:flex;
  justify-content:center;
  align-items:flex-start;
}

.modal.modal-ged-full .ged-image-wrap img{
  max-width:100%;
  height:auto;
  border-radius:14px;
  box-shadow:0 8px 20px rgba(0,0,0,.12);
}

body.dark-mode .modal.modal-ged-full .ged-meta-card,
body.dark-mode .modal.modal-ged-full .ged-file-box{
  background:var(--mbl-navy-bg);
  border-color:var(--mbl-navy-border);
}

body.dark-mode .modal.modal-ged-full .ged-meta-value,
body.dark-mode .modal.modal-ged-full .ged-file-title,
body.dark-mode .modal.modal-ged-full .ged-file-name,
body.dark-mode .modal.modal-ged-full .ged-page-badge{
  color:var(--mbl-navy-ink);
}

body.dark-mode .modal.modal-ged-full .ged-meta-label,
body.dark-mode .modal.modal-ged-full .ged-file-sub{
  color:var(--ti-muted-dark);
}

body.dark-mode .modal.modal-ged-full .ged-stage-card{
  background:rgba(255,255,255,.03);
  border-color:rgba(255,255,255,.10);
}

body.dark-mode .modal.modal-ged-full .ged-page-badge{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.12);
}

@media (max-width: 991.98px){
  .modal.modal-ged-full .modal-dialog{
    max-width:100vw !important;
    width:100vw;
    height:100vh;
    margin:0;
  }

  .modal.modal-ged-full .modal-content{
    border-radius:0;
    height:100vh;
  }

  .modal.modal-ged-full .modal-body{
    overflow:auto;
    padding:10px;
  }

  .modal.modal-ged-full .ged-viewer-shell{
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
    gap:10px;
    height:auto;
  }

  .modal.modal-ged-full .ged-viewer-sidebar{
    overflow:visible;
    padding-right:0;
  }

  .modal.modal-ged-full .ged-viewer-stage{
    min-height:58vh;
  }

  .modal.modal-ged-full .ged-stage-card{
    min-height:58vh;
    padding:8px;
  }

  .modal.modal-ged-full .pdf-inline-wrap{
    height:100%;
    min-height:54vh;
  }

  .modal.modal-ged-full .pdf-inline-stage{
    min-height:52vh;
    padding:4px;
    justify-content:flex-start;
    align-items:flex-start;
  }

  .modal.modal-ged-full .pdf-inline-canvas-wrap{
    width:100%;
    min-height:50vh;
    justify-content:center;
    align-items:flex-start;
  }

  .modal.modal-ged-full .pdf-inline-canvas{
    width:100% !important;
    max-width:100%;
    height:auto;
    border-radius:10px;
  }

  .modal.modal-ged-full .ged-image-wrap{
    min-height:52vh;
    align-items:flex-start;
  }

  .modal.modal-ged-full .ged-image-wrap img{
    width:100%;
    max-width:100%;
    height:auto;
  }

  .modal.modal-ged-full .ged-controls{
    grid-template-columns:repeat(3, minmax(0,1fr));
  }

  .modal.modal-ged-full .ged-controls .btn,
  .modal.modal-ged-full .ged-page-badge{
    min-height:46px;
  }
}