/* ==========================================================================
   help.sendsolutions.com.br :: estilo da Central de Ajuda
   themes/send-capacitacao/public/help.css

   Servido por GET /theme/send-capacitacao/help.css (rota publica no
   functions.php do tema). Ate a Fase 4 este CSS morava na setting
   app-custom-head, uma coluna TEXT de 65.535 bytes que o MySQL trunca em
   silencio; aqui ele nasce versionado no git e sem teto.

   A ORDEM DOS BLOCOS E O ARQUIVO. Cada trecho abaixo era um tag style do
   custom-head e foi movido byte a byte, na mesma sequencia: os tokens
   :root vem antes porque valem para todas as camadas, e as camadas 1.x
   dependem de quem veio antes. Nao reordene.

   Quem publica: depois de mexer aqui, refaca o ?v= do tag link no
   app-custom-head, senao o navegador segue com a copia velha. O valor e
   os 10 primeiros hex do sha256 DESTE arquivo:

     sha256sum help.css | cut -c1-10
   ========================================================================== */

/* SEND (Fase 2): tokens canonicos da casa. Ficam antes de tudo para valer em
   todas as camadas abaixo. Valores decididos no TOKENS.md, nao editar aqui. */
:root{
  /* Marca */
  --send-azul:#0b58e7;
  --send-azul-escuro:#0842ac;
  --send-azul-wash:#e8f0fe;
  /* Acento secundario: icone de categoria e acao secundaria. Nunca estado. */
  --send-acento:#12a394;
  --send-acento-wash:#e2f5f1;
  /* O acento nao passa em contraste como texto (3.1 sobre branco);
     use esta variante quando ele precisar carregar texto. */
  --send-acento-texto:#0d766b;
  /* Neutros */
  --send-tinta:#131a2b;
  --send-tinta-suave:#5a6683;
  --send-borda:#e6e9f2;
  --send-fundo:#f4f6fb;
  --send-superficie:#ffffff;
  /* Superficie neutra fria: distingue o estado "sem marca" do azul-wash. */
  --send-neutro-wash:#eef1f7;
  /* Semanticos: so estado, nunca decoracao */
  --send-ok:#0f7352;
  --send-ok-wash:#e4f4ee;
  --send-atencao:#8a5f00;
  --send-atencao-wash:#fbf1da;
  --send-perigo:#b3261e;
  --send-perigo-wash:#fbe9e7;
  /* Raio: quatro degraus, mais o pill */
  --send-raio-peq:10px;
  --send-raio-md:14px;
  --send-raio:16px;
  --send-raio-lg:20px;
  --send-raio-pill:999px;
  /* Tipografia */
  --send-display:'Plus Jakarta Sans',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --send-corpo:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
  /* Largura de conteudo, igual nas duas frentes */
  --send-larg:1180px;
  /* Sombra e foco */
  --send-sombra:0 1px 2px rgba(19,26,43,.06),0 12px 30px -18px rgba(19,26,43,.18);
  --send-sombra-alta:0 2px 6px rgba(19,26,43,.08),0 22px 45px -22px rgba(19,26,43,.28);
  --send-anel-foco:0 0 0 3px rgba(11,88,231,.32);
}
/* SEND — leitura dos manuais (Camada 1). Aplica em body.tri-layout; nunca na home (:not(:has(.send-home))). Trata dark mode (html.dark-mode). */
/* As variaveis da camada viram alias dos tokens canonicos: o CSS abaixo continua
   escrito com --sb/--s-*, mas o valor passa a vir do bloco :root. */
body.tri-layout:not(:has(.send-home)){
  --sb:var(--send-azul);
  --sb-wash:var(--send-azul-wash);
  --s-line:var(--send-borda);
  --s-warn-wash:var(--send-atencao-wash);--s-warn-ink:var(--send-atencao);--s-warn-line:#f0d8b4;
  --s-ok-wash:var(--send-ok-wash);--s-ok-ink:var(--send-ok);--s-ok-line:#bfe3d1;
  --s-disp:var(--send-display);
}
html.dark-mode body.tri-layout:not(:has(.send-home)){
  --sb-wash:#16243b;--s-line:rgba(180,200,230,.14);
  --s-warn-wash:#2a2114;--s-warn-ink:#e6b477;--s-warn-line:#4a3a1e;
  --s-ok-wash:#132420;--s-ok-ink:#7fd3ac;--s-ok-line:#255040;
}
body.tri-layout:not(:has(.send-home)) main.content-wrap.card{border-radius:var(--send-raio-md);border:1px solid var(--s-line);box-shadow:0 1px 2px rgba(16,32,64,.04),0 10px 34px rgba(16,32,64,.06);}
body.tri-layout:not(:has(.send-home)) .page-content{font-size:17px;line-height:1.72}
body.tri-layout:not(:has(.send-home)) .page-content h1,body.tri-layout:not(:has(.send-home)) .page-content h2,body.tri-layout:not(:has(.send-home)) .page-content h3,body.tri-layout:not(:has(.send-home)) .page-content h4{font-family:var(--s-disp);letter-spacing:-.005em}
body.tri-layout:not(:has(.send-home)) .page-content h1{font-weight:800;line-height:1.18}
body.tri-layout:not(:has(.send-home)) .page-content h2{font-weight:800;font-size:1.4rem;margin-top:1.9em}
body.tri-layout:not(:has(.send-home)) .page-content h3{font-weight:700;font-size:1.18rem;margin-top:1.6em}
body.tri-layout:not(:has(.send-home)) .page-content h4{font-weight:700;font-size:1.12rem;margin-top:1.5em}
body.tri-layout:not(:has(.send-home)) .page-content img{border-radius:var(--send-raio-peq);border:1px solid var(--s-line);box-shadow:0 2px 12px rgba(16,32,64,.07);}
body.tri-layout:not(:has(.send-home)) .page-content p[style*="9534f"]{background:var(--s-warn-wash);border:1px solid var(--s-warn-line);color:var(--s-warn-ink)!important;border-radius:var(--send-raio-peq);padding:13px 16px;margin:20px 0;}
body.tri-layout:not(:has(.send-home)) .page-content p[style*="9534f"] strong{color:inherit}

/* callout "Recapitulando" (template usa color:#0f6f4d) */
body.tri-layout:not(:has(.send-home)) .page-content p[style*="0f6f4d"]{
  background:var(--s-ok-wash);border:1px solid var(--s-ok-line);color:var(--s-ok-ink)!important;
  border-radius:var(--send-raio-peq);padding:13px 16px;margin:20px 0;
}
body.tri-layout:not(:has(.send-home)) .page-content p[style*="0f6f4d"] strong{color:inherit}
body.tri-layout:not(:has(.send-home)) #sibling-navigation{opacity:1!important;gap:14px;margin-top:6px}
body.tri-layout:not(:has(.send-home)) #sibling-navigation > div > a{display:block;border:1px solid var(--s-line);border-radius:var(--send-raio-md);padding:10px 14px;transition:border-color .15s,background .15s;}
body.tri-layout:not(:has(.send-home)) #sibling-navigation > div > a:hover{border-color:var(--sb);background:var(--sb-wash)}
body.tri-layout:not(:has(.send-home)) #page-navigation h5,body.tri-layout:not(:has(.send-home)) #sidebar h5{font-family:var(--s-disp);font-size:12px;letter-spacing:.05em;text-transform:uppercase;font-weight:700;opacity:.72;}
body.tri-layout:not(:has(.send-home)) .sidebar-page-nav .page-nav-item a:hover{color:var(--sb)}
body.tri-layout:not(:has(.send-home)) .book-tree .selected{background:var(--sb-wash);border-radius:var(--send-raio-peq)}
body.tri-layout:not(:has(.send-home)):has(#header a[href*="/login"]) .actions{display:none!important}
body.tri-layout:not(:has(.send-home)):has(#header a[href*="/login"]) .active-restriction{display:none!important}
body.tri-layout:not(:has(.send-home)):has(#header a[href*="/login"]) #page-details a[href*="/revisions"]{display:none!important}

/* --- Camada 1.1: estrutura tipo mockup --- */
body.tri-layout:not(:has(.send-home)){--s-card:var(--send-superficie)}
html.dark-mode body.tri-layout:not(:has(.send-home)){--s-card:#1b232e}
body.tri-layout:not(:has(.send-home)) .send-kicker{font-family:var(--s-disp);font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--sb);margin:0 0 10px}
body.tri-layout:not(:has(.send-home)) .tri-layout-right-contents{display:flex;flex-direction:column;gap:14px}
body.tri-layout:not(:has(.send-home)) .tri-layout-right-contents #page-navigation,
body.tri-layout:not(:has(.send-home)) .tri-layout-right-contents #page-details,
body.tri-layout:not(:has(.send-home)) .tri-layout-right-contents .actions{background:var(--s-card);border:1px solid var(--s-line);border-radius:var(--send-raio-md);padding:15px 16px;margin:0;box-shadow:0 1px 2px rgba(16,32,64,.04)}
body.tri-layout:not(:has(.send-home)) .tri-layout-right-contents h5{font-family:var(--s-disp);text-transform:uppercase;font-size:12px;letter-spacing:.05em;font-weight:700;opacity:.7;margin:0 0 10px}
body.tri-layout:not(:has(.send-home)) #page-navigation.send-toc .sidebar-page-nav a{border-left:2px solid var(--s-line);padding:5px 0 5px 12px;display:block}
body.tri-layout:not(:has(.send-home)) #page-navigation.send-toc .sidebar-page-nav a:hover{color:var(--sb);border-left-color:var(--sb)}
body.tri-layout:not(:has(.send-home)) #page-details a[href*="/revisions"],
body.tri-layout:not(:has(.send-home)) #page-details .active-restriction,
body.tri-layout:not(:has(.send-home)) #page-details .dropdown-container{display:none!important}
body.tri-layout:not(:has(.send-home)) .page-content ul{list-style:none;padding-left:2px}
body.tri-layout:not(:has(.send-home)) .page-content ul > li{position:relative;padding-left:20px;margin:6px 0}
body.tri-layout:not(:has(.send-home)) .page-content ul > li::before{content:"";position:absolute;left:3px;top:11px;width:6px;height:6px;border-radius:50%;background:var(--sb)}

/* --- Camada 1.2: navegacao mais facil (laterais fixas + todos os modulos + destaque) --- */
@media (min-width:1000px){
 body.tri-layout:not(:has(.send-home)) .tri-layout-left-contents,
 body.tri-layout:not(:has(.send-home)) .tri-layout-right-contents{position:sticky;top:14px;max-height:calc(100vh - 28px);overflow-y:auto;overflow-x:hidden}
}
body.tri-layout:not(:has(.send-home)) .book-tree .selected{background:var(--sb-wash);border-radius:var(--send-raio-peq);font-weight:700}
body.tri-layout:not(:has(.send-home)) .book-tree .selected a,
body.tri-layout:not(:has(.send-home)) .book-tree .selected .entity-list-item-name{color:var(--send-azul-escuro)}
body.tri-layout:not(:has(.send-home)) .send-allmods{display:flex;align-items:center;gap:8px;font-family:var(--s-disp);font-weight:700;font-size:13px;color:var(--sb);text-decoration:none;padding:10px 12px;border:1px solid var(--s-line);border-radius:var(--send-raio-peq);margin-bottom:14px;background:var(--s-card)}
body.tri-layout:not(:has(.send-home)) .send-allmods:hover{background:var(--sb-wash)}
body.tri-layout:not(:has(.send-home)) .send-allmods svg{width:16px;height:16px}

/* --- Camada 1.3: pagina de modulos (/manuais) e cards de livro --- */
body.tri-layout:not(:has(.send-home)) main.content-wrap .grid.third{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;margin-top:6px}
body.tri-layout:not(:has(.send-home)) a.grid-card{border:1px solid var(--s-line);border-radius:var(--send-raio-md);overflow:hidden;background:var(--s-card);box-shadow:0 1px 2px rgba(16,32,64,.04);transition:transform .15s,box-shadow .15s,border-color .15s;display:flex;flex-direction:column;min-height:0}
body.tri-layout:not(:has(.send-home)) a.grid-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(16,32,64,.11);border-color:var(--sb)}
body.tri-layout:not(:has(.send-home)) a.grid-card .featured-image-container-wrap{width:46px;height:46px;min-height:0;aspect-ratio:auto;border-radius:var(--send-raio-md);margin:16px 0 0 16px;border:0;display:flex;align-items:center;justify-content:center;flex:none;background:var(--sb)!important}
body.tri-layout:not(:has(.send-home)) a.grid-card .featured-image-container{display:none!important}
body.tri-layout:not(:has(.send-home)) a.grid-card .featured-image-container-wrap .svg-icon{position:static;width:24px;height:24px;margin:0;fill:#fff;color:#fff;opacity:1}
body.tri-layout:not(:has(.send-home)) a.grid-card .grid-card-content{padding:12px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
body.tri-layout:not(:has(.send-home)) a.grid-card .grid-card-content h2,
body.tri-layout:not(:has(.send-home)) a.grid-card .grid-card-content h4{font-family:var(--s-disp);font-weight:800;font-size:16px;margin:0;line-height:1.25}
body.tri-layout:not(:has(.send-home)) a.grid-card:hover .grid-card-content h2{color:var(--sb)}
body.tri-layout:not(:has(.send-home)) a.grid-card .grid-card-content p{font-size:13px;line-height:1.5;margin:0}
body.tri-layout:not(:has(.send-home)) a.grid-card .grid-card-footer{opacity:.7;font-size:12px;padding-top:4px}
/* cabecalho da pagina de modulos */
body.send-modindex .send-allmods{display:none!important}
body.send-modindex .tri-layout-middle-contents h1{font-family:var(--s-disp);font-weight:800;font-size:26px;letter-spacing:-.01em;margin-bottom:2px}
body.send-modindex .send-subtitle{font-family:var(--s-disp);opacity:.62;font-size:15px;margin:0 0 6px}

/* --- Camada 1.4: icones reais do sistema (lucide) por modulo no /manuais --- */
body.tri-layout:not(:has(.send-home)) a.grid-card .featured-image-container-wrap .send-modicon{width:24px;height:24px;stroke:#fff;fill:none}

/* --- Camada 1.5: tela inicial do modulo (book show) = indice em cards com paginas visiveis --- */
body.send-bookindex main.content-wrap > h4{display:none}
.send-bookhead{display:flex;align-items:center;gap:14px;margin:2px 0 8px}
.send-bookhead .send-bookicon{width:48px;height:48px;border-radius:var(--send-raio-md);background:var(--sb);display:flex;align-items:center;justify-content:center;flex:none}
.send-bookhead .send-bookicon svg{width:26px;height:26px;stroke:#fff;fill:none}
.send-bookhead .send-kicker{font-family:var(--s-disp);font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--sb);margin:0 0 2px}
.send-bookhead h4{margin:0!important;display:block!important;font-family:var(--s-disp);font-weight:800;font-size:24px}
body.send-bookindex .book-content > .text-muted{font-size:15px;margin-bottom:8px}
body.send-bookindex .book-contents{display:block;margin-top:16px}
.send-chapcard{border:1px solid var(--s-line);border-radius:var(--send-raio-md);background:var(--s-card);overflow:hidden;margin:0 0 14px;box-shadow:0 1px 2px rgba(16,32,64,.04)}
.send-chapcard > a.chapter.entity-list-item{display:flex;gap:13px;padding:15px 17px 12px;align-items:flex-start;text-decoration:none;border:0}
.send-chapcard > a.chapter .icon.text-chapter{width:38px;height:38px;border-radius:var(--send-raio-peq);background:var(--sb-wash);color:var(--sb);display:flex;align-items:center;justify-content:center;flex:none;margin:0}
.send-chapcard > a.chapter .icon.text-chapter svg{width:20px;height:20px}
.send-chapcard > a.chapter .entity-list-item-name{font-family:var(--s-disp);font-weight:800;font-size:17px;margin:0}
.send-chapcard > a.chapter .entity-item-snippet p{margin:2px 0 0;font-size:13px}
.send-chapcard .chapter-expansion{padding:0 14px 8px 68px;margin:0}
.send-chapcard .chapter-expansion > .icon{display:none}
.send-chapcard .chapter-contents-toggle{font-family:var(--s-disp);text-transform:uppercase;letter-spacing:.04em;font-size:11px;font-weight:700;opacity:.55;pointer-events:none;padding:0 0 6px}
.send-chapcard .chapter-contents-toggle svg{display:none}
.send-chapcard .chapter-contents-list{display:block!important;height:auto!important;overflow:visible!important}
.send-chapcard .entity-list-item-children{display:flex;flex-direction:column;gap:1px}
.send-chapcard .entity-list-item-children a.page.entity-list-item{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:var(--send-raio-peq);text-decoration:none}
.send-chapcard .entity-list-item-children a.page.entity-list-item:hover{background:var(--sb-wash)}
.send-chapcard .entity-list-item-children a.page .icon{width:auto;height:auto;color:#8a94a3;flex:none;margin:0}
.send-chapcard .entity-list-item-children a.page .entity-list-item-name{font-weight:600;font-size:14px;margin:0}
.send-chapcard .entity-list-item-children a.page .entity-item-snippet{display:none}
.send-loosecard{padding:8px 14px 10px}
.send-loosecard .send-loosehdr{font-family:var(--s-disp);text-transform:uppercase;letter-spacing:.05em;font-size:11px;font-weight:700;opacity:.55;padding:6px 10px 8px}
.send-loosecard .entity-list-item-children a.page .entity-item-snippet{display:none}

/* --- Sobra da antiga Camada 1.6 ---
   O rodape proprio saiu daqui: agora ele nasce server-side, no _chrome.php do
   tema (.sx-rodape), e o CSS dele mora la. Esta regra NAO era do rodape, so
   dividia bloco com ele, entao continua como estava. */
.filter-nav{display:none!important}

/* --- Camada 1.7: seletor de mes (visao mensal) na pagina de Novidades --- */
.send-rel .rel-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 18px}
.send-rel .rel-tab{font-family:var(--send-display);font-weight:600;font-size:13px;border:1px solid var(--send-borda);background:var(--send-superficie);color:var(--send-tinta-suave);border-radius:var(--send-raio-pill);padding:7px 14px;cursor:pointer}
.send-rel .rel-tab:hover{border-color:var(--send-azul);color:var(--send-azul)}
.send-rel .rel-tab.on{background:var(--send-azul);border-color:var(--send-azul);color:#fff}
html.dark-mode .send-rel .rel-tab{background:#161d27;border-color:#26303c;color:#9aa6b5}
html.dark-mode .send-rel .rel-tab.on{background:#4d8bff;border-color:#4d8bff;color:#0b1220}

/* --- Camada 1.9: pagina de busca (/busca e /search) ---
   A busca do BookStack usa o layout "simple": o body nao recebe .tri-layout,
   entao nenhuma regra da Camada 1 alcanca esta tela e ela aparecia crua, com o
   visual de fabrica do wiki. Aqui a coluna de filtros e a lista de resultados
   passam a falar o mesmo vocabulario das outras telas: superficie, borda, raio
   e tipografia dos tokens --send-*.
   E camada de estilo, nada de estrutura: nenhum filtro muda de lugar, de nome
   ou de comportamento, e nao ha JS envolvido.
   O gancho e o #search-system, que a propria view do BookStack imprime, entao
   a regra vale tanto em /busca quanto no /search que redireciona para ela. */
#search-system{
  --sq-surf:var(--send-superficie);
  --sq-ink:var(--send-tinta);
  --sq-mut:var(--send-tinta-suave);
  --sq-line:var(--send-borda);
  --sq-azul:var(--send-azul);
  --sq-wash:var(--send-azul-wash);
  /* Cor do trecho que casou com o termo, sobre o --sq-wash. No claro e o azul
     da marca: #0b58e7 sobre #e8f0fe da 5,1:1, acima do 4,5:1 de AA. */
  --sq-realce:var(--sq-azul);
}
/* Modo escuro: mesmos valores que as outras camadas ja usam neste arquivo. */
html.dark-mode #search-system{
  --sq-surf:#1b232e;--sq-ink:#e7edf5;--sq-mut:#9aa6b5;
  --sq-line:#26303c;--sq-azul:#4d8bff;--sq-wash:rgba(77,139,255,.12);
  /* No escuro o mesmo par nao passa: o wash e translucido, entao o #4d8bff do
     realce acaba pintado sobre a mistura dele com a superficie (#212f47), e
     sobram 4,1:1, abaixo de AA. Aqui o texto passa a ser a tinta do modo
     escuro sobre o mesmo wash, o que da 11:1; o fundo azulado continua
     marcando o trecho encontrado, agora com a palavra legivel. */
  --sq-realce:var(--sq-ink);
}

/* Coluna de filtros: o painel vira cartao. Na grade .right-focus o primeiro
   filho e o painel de filtros e o segundo e a lista de resultados. */
#search-system .grid > div:first-child > div{background:var(--sq-surf);border:1px solid var(--sq-line);border-radius:var(--send-raio-md);padding:18px;box-shadow:0 1px 2px rgba(16,32,64,.04)}
#search-system h5{font-family:var(--send-display);font-weight:800;font-size:17px;color:var(--sq-ink);margin:0 0 16px}
/* Rotulos do formulario de filtros. O h6 com o total de resultados fica de
   fora de proposito: ele nao esta dentro de um <form>. */
#search-system form h6{font-family:var(--send-display);text-transform:uppercase;letter-spacing:.05em;font-size:12px;font-weight:700;color:var(--sq-mut);margin:18px 0 8px}
#search-system form h6:first-of-type{margin-top:0}
#search-system input[type="text"],
#search-system input[type="date"]{background:var(--sq-surf);color:var(--sq-ink);border:1px solid var(--sq-line);border-radius:var(--send-raio-peq);font-family:var(--send-corpo);font-size:14px}
#search-system input[type="text"]:focus,
#search-system input[type="date"]:focus{border-color:var(--sq-azul);outline:none;box-shadow:var(--send-anel-foco)}
/* So o campo do termo ocupa a largura do cartao. Os outros (correspondencia
   exata e marcador) ficam na largura nativa porque dividem a linha com o botao
   de remover, e um width:100% ali encolheria o campo. */
#search-system form > input[type="text"][name="search"]{width:100%}
#search-system table.form-table td{font-size:14px;color:var(--sq-mut)}
/* O .button do BookStack ja usa --color-primary, que nesta instalacao e o
   mesmo #0b58e7 do --send-azul; aqui so entram o raio e a tipografia. */
#search-system .button{font-family:var(--send-display);font-weight:700;font-size:14px;border-radius:var(--send-raio-peq);padding:9px 18px}
#search-system .button.outline{border-color:var(--sq-line);color:var(--sq-mut)}

/* Coluna de resultados */
#search-system .card.content-wrap{background:var(--sq-surf);border:1px solid var(--sq-line);border-radius:var(--send-raio-md);box-shadow:0 1px 2px rgba(16,32,64,.04),0 10px 34px rgba(16,32,64,.06)}
#search-system h1.list-heading{font-family:var(--send-display);font-weight:800;font-size:24px;letter-spacing:-.01em;color:var(--sq-ink);margin:0 0 4px}
#search-system h6.text-muted{font-size:13px;color:var(--sq-mut);margin:0 0 14px}
/* A lista nativa sangra 16px para os lados do cartao; com borda em cada item
   isso deixaria a borda pendurada para fora do conteudo. */
#search-system .book-contents .entity-list{margin:0}
#search-system .entity-list > a.entity-list-item{background:var(--sq-surf);border:1px solid var(--sq-line);border-radius:var(--send-raio-md);padding:14px 16px;margin:0 0 10px;transition:border-color .15s,box-shadow .15s}
#search-system .entity-list > a.entity-list-item:hover{background:var(--sq-surf);border-color:var(--sq-azul);border-radius:var(--send-raio-md);box-shadow:0 1px 2px rgba(16,32,64,.04),0 10px 26px -16px rgba(16,32,64,.4)}
#search-system .entity-list > a.entity-list-item:focus-visible{background:var(--sq-surf);border-color:var(--sq-azul);outline:none;box-shadow:var(--send-anel-foco)}
#search-system .entity-list-item-name{font-family:var(--send-display);font-weight:700;font-size:16px;color:var(--sq-ink);margin:0}
#search-system .entity-list > a.entity-list-item:hover .entity-list-item-name{color:var(--sq-azul)}
#search-system .entity-item-snippet p{font-size:13px;line-height:1.6;margin:6px 0 0}
/* Trecho que casou com o termo: o BookStack marca com <strong>. So no resumo,
   nao no titulo, para nao manchar o nome do resultado. A cor vem de
   --sq-realce, que muda no modo escuro (ver o bloco de variaveis la em cima). */
#search-system .entity-item-snippet strong{background:var(--sq-wash);color:var(--sq-realce);border-radius:4px;padding:0 3px;font-weight:700}
/* Sem resultados. As classes pb-l e mb-none do BookStack usam !important, por
   isso aqui so entram cor e tamanho. */
#search-system .empty-text{font-size:14px;color:var(--sq-mut)}
@media(max-width:1000px){
  #search-system .grid > div:first-child > div{padding:16px}
}

/* --- Camada 2.0: carrossel de cursos da Capacitacao (home) ---
   O corpo das paginas do BookStack passa por sanitizacao e perde as tags de
   script (nao ha uma unica delas em pages/page_revisions no banco; a tag de
   estilo sobrevive, a de script nao). Por isso a home carrega so o esqueleto
   da secao (.cc, com o titulo, a linha de apoio e o aviso) e TODO o resto mora
   aqui: a apresentacao neste bloco e o comportamento no bloco de script logo
   abaixo. E o mesmo caminho das camadas 1.x deste arquivo.

   A secao nasce ESCONDIDA e so aparece quando ha o que mostrar, para nao deixar
   buraco na home enquanto carrega nem depois:
     .cc                sem sessao, sem resposta ou sem curso nenhum: fora da pagina
     .cc--pronta        libera a secao
     .cc--lista         mostra o trilho com os cartoes
     .cc--aviso         mostra o aviso de quem nao tem identidade de capacitacao */
.send-home .cc{display:none}
.send-home .cc.cc--pronta{display:block}

/* Cabecalho: reaproveita o .ah das outras areas da home. O contador e as setas
   sao acrescentados pelo JS ao lado da regua (.r), que ja empurra tudo para a
   direita. O align-self existe porque o .ah alinha por baseline, e botao sem
   texto nao tem baseline util. */
.send-home .cc-navs{display:flex;gap:6px;flex:none;align-self:center}
.send-home .cc-navs[hidden]{display:none}
.send-home .cc-seta{width:32px;height:32px;padding:0;flex:none;display:grid;place-items:center;background:var(--send-superficie);border:1px solid var(--send-borda);border-radius:var(--send-raio-peq);color:var(--send-tinta-suave);cursor:pointer}
.send-home .cc-seta svg{width:16px;height:16px}
.send-home .cc-seta:hover:not([aria-disabled="true"]){border-color:var(--send-azul);color:var(--send-azul)}
.send-home .cc-seta[aria-disabled="true"]{opacity:.4;cursor:default}
.send-home .cc-seta:focus-visible{outline:none;box-shadow:var(--send-anel-foco)}

.send-home .cc-intro{margin:0 0 12px;max-width:70ch;color:var(--send-tinta-suave);font-size:13px;line-height:1.45}

/* Sessao no wiki sem identidade de capacitacao. Superficie neutra de proposito:
   nao e erro nem alerta, e um estado de acesso. E nao ha link nenhum aqui:
   /capacitacao responderia 403 justamente para quem le este aviso. */
.send-home .cc-aviso{display:none;gap:10px;align-items:flex-start;background:var(--send-neutro-wash);border:1px solid var(--send-borda);border-radius:var(--send-raio-md);padding:14px 16px;color:var(--send-tinta-suave);font-size:13px;line-height:1.5}
.send-home .cc--aviso .cc-aviso{display:flex}
.send-home .cc-aviso svg{width:18px;height:18px;flex:none;margin-top:1px}

/* Trilho: rolagem horizontal nativa com encaixe (scroll-snap). Sem biblioteca:
   no celular vale a rolagem por toque do proprio navegador e as setas so chamam
   scrollBy. O padding de 2px evita que o anel de foco dos cartoes seja cortado. */
.send-home .cc-trilho{display:none;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:0 2px;margin:0 -2px;padding:2px 2px 12px}
.send-home .cc--lista .cc-trilho{display:flex}
.send-home .cc-trilho:focus-visible{outline:none;box-shadow:var(--send-anel-foco);border-radius:var(--send-raio-md)}

.send-home .cc-card{flex:0 0 282px;scroll-snap-align:start;display:flex;flex-direction:column;background:var(--send-superficie);border:1px solid var(--send-borda);border-radius:var(--send-raio-md);padding:16px}
.send-home .cc-card:hover{border-color:var(--send-azul);box-shadow:var(--send-sombra)}
.send-home .cc-topo{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:11px}
.send-home .cc-ic{width:38px;height:38px;border-radius:var(--send-raio-peq);flex:none;display:grid;place-items:center;background:var(--send-azul-wash);color:var(--send-azul)}
.send-home .cc-ic svg{width:20px;height:20px}
.send-home .cc-selo{flex:none;border-radius:var(--send-raio-pill);padding:4px 10px;background:var(--send-neutro-wash);color:var(--send-tinta-suave);font-size:12px;font-weight:700;white-space:nowrap}
.send-home .cc-selo--andamento{background:var(--send-azul-wash);color:var(--send-azul-escuro)}
.send-home .cc-selo--concluida{background:var(--send-ok-wash);color:var(--send-ok)}
.send-home .cc-card h3{font-size:15px;font-weight:700;letter-spacing:-.01em}
.send-home .cc-desc{margin:5px 0 0;color:var(--send-tinta-suave);font-size:13px;line-height:1.42;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.send-home .cc-meta{display:flex;align-items:center;gap:6px;margin-top:11px;color:var(--send-tinta-suave);font-size:12px;font-weight:600}
.send-home .cc-meta svg{width:14px;height:14px;flex:none}
.send-home .cc-barra{height:6px;margin-top:12px;border-radius:var(--send-raio-pill);background:var(--send-borda);overflow:hidden}
.send-home .cc-barra span{display:block;height:100%;border-radius:inherit;background:var(--send-azul)}
.send-home .cc-pct{margin:6px 0 0;color:var(--send-tinta-suave);font-size:12px;font-weight:600}
.send-home .cc-rodape{margin-top:auto;padding-top:14px}
.send-home .cc-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:100%;border:1px solid var(--send-azul);border-radius:var(--send-raio-peq);background:var(--send-azul);color:var(--send-superficie);padding:9px 14px;font:inherit;font-weight:600;font-size:14px;cursor:pointer}
.send-home .cc-btn svg{width:15px;height:15px;flex:none}
.send-home .cc-btn:hover{background:var(--send-azul-escuro);border-color:var(--send-azul-escuro);color:var(--send-superficie)}
.send-home .cc-btn:disabled{opacity:.6;cursor:default}
.send-home .cc-btn:focus-visible{outline:none;box-shadow:var(--send-anel-foco)}
.send-home .cc-btn--sec{background:var(--send-superficie);border-color:var(--send-borda);color:var(--send-azul)}
.send-home .cc-btn--sec:hover{background:var(--send-azul-wash);border-color:var(--send-azul);color:var(--send-azul-escuro)}
.send-home .cc-erro{margin:8px 0 0;color:var(--send-perigo);font-size:12px;line-height:1.4}
.send-home .cc-erro:empty{display:none}

/* Movimento so para quem nao pediu para reduzir. O JS faz o mesmo teste antes
   de escolher entre rolagem suave e salto seco nas setas. */
@media (prefers-reduced-motion:no-preference){
  .send-home .cc-trilho{scroll-behavior:smooth}
  .send-home .cc-card{transition:border-color .15s,box-shadow .15s}
  .send-home .cc-seta{transition:border-color .15s,color .15s}
  .send-home .cc-btn{transition:background .15s,border-color .15s,color .15s}
}
/* No celular o cartao quase ocupa a tela: sobra a borda do proximo, que e o que
   avisa que da para arrastar. */
@media (max-width:640px){
  .send-home .cc-card{flex-basis:84%}
}