/* "Entenda esta tela" (item 18, P9): botão ⓘ perto do sino + offcanvas com o guia item a item
 * da tela atual (app/Views/partials/guia_tela.php + public/assets/js/guia.js). Arquivo PRÓPRIO
 * (não em app.css) para não colidir com outro agente que edita app.css na mesma onda (ver
 * WIRING SPEC: o coordenador linka via asset_url() nos <link> do layout).
 *
 * Zero cor nova: o "pulse" de 1º acesso usa --keys-anel-foco, já tingido por tema em
 * tokens.css (mesmo token do focus-ring do resto do app) — linter de tema aprova.
 */
@keyframes keys-guia-pulse {
    0%   { box-shadow: 0 0 0 0 var(--keys-anel-foco); }
    70%  { box-shadow: 0 0 0 9px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}
.keys-guia-pulse {
    animation: keys-guia-pulse 1.8s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .keys-guia-pulse { animation: none; }
}

.keys-guia-offcanvas { width: min(430px, 92vw); }
.keys-guia-offcanvas .offcanvas-body { font-size: 0.925rem; }
/* Convivência com a bottom tab bar mobile (item 28-B, `.keys-tabbar`, z-index 1030): o offcanvas
 * do Bootstrap fica em z-index 1045 (backdrop 1040), ou seja, JÁ desenha por cima da barra — nada
 * do guia fica escondido atrás dela. O padding extra abaixo só garante que a última linha do guia
 * não encoste no safe-area inferior (iPhone com notch) ao rolar até o fim. */
@media (max-width: 991.98px) {
    .keys-guia-offcanvas .offcanvas-body {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    }
}
.keys-guia-intro { color: var(--keys-texto-2); }
.keys-guia-itens { padding-left: 1.15rem; }
.keys-guia-itens li { margin-bottom: 0.95rem; line-height: 1.45; }
.keys-guia-itens li:last-child { margin-bottom: 0; }
.keys-guia-itens li strong { color: var(--keys-tinta); }