/* ══════════════════════════════════════════════════════════
   KNOWLEDGE-PUBLIC.CSS — Portal público da Central de Conhecimento
   Depende de communy-core.css (carregado antes).
   Contém apenas regras específicas do portal público.
   ══════════════════════════════════════════════════════════ */

/* Tokens específicos da KB — os demais foram promovidos ao communy-core */
:root {
    --kb-cta-steel:          #2c5b85;
    --kb-cta-steel-dark:     #1e3a55;
    --kb-cta-comercial:      #4F46A5;
    --kb-cta-comercial-dark: #3d3799;
    --kb-cta-navy:           #123B5A;
    --kb-cta-navy-dark:      #0a2540;
    --kb-placeholder:        #9aa1ae;
    --kb-shadow-cta-hover:      0 12px 36px rgba(13, 32, 53, 0.45);
    --kb-shadow-cta-hover-dark: 0 12px 36px rgba(0, 0, 0, 0.5);

    /* Aliases para tokens herdados do comercial que não existem no core da knowledge.
       Resolvem dinamicamente light/dark por apontarem para os tokens base. */
    --app-surface:        var(--app-surface-card);
    --app-surface-muted:  var(--app-surface-soft);
    --app-border:         var(--app-border-default);
    --app-heading:        var(--app-text-primary);
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
}

body.kb-public {
    min-height: 100%;
    margin: 0;
    background: var(--app-bg-light);
    color: var(--app-text-primary);
    font-family: "Funnel Sans", Arial, sans-serif;
    letter-spacing: 0;
}

body.kb-public a:not([class*="app-btn"]) {
    color: inherit;
}

/* ── Focus: suprime ring no clique, mostra no teclado ─────── */
.kb-public :focus {
    outline: none;
}

.kb-public :focus-visible {
    outline: 2px solid var(--app-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

.kb-container {
    width: min(100% - 40px, 1180px);
    margin: 0 auto;
}

.kb-search-result-list,
.kb-article-list,
.kb-most-read-list,
.kb-footer-links,
.kb-footer-bottom-links,
.kb-breadcrumb,
.kb-toc-list,
.kb-toc-sublist {
    list-style: none;
    margin: 0;
    padding: 0;
}



/* ── Header ──────────────────────────────────────────────── */

.kb-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--app-surface-card);
    border-bottom: 1px solid var(--app-border-default);
    transition: transform 280ms ease;
}

.kb-header.is-hidden {
    transform: translateY(-100%);
}

.kb-header-inner {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.kb-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: fit-content;
    text-decoration: none;
}

.kb-brand img { display: block; }

[data-theme-version="dark"] .kb-brand img:last-child,
[data-theme-version="dark"] .kb-footer-logotype,
[data-theme-version="dark"] .kb-auth-logotype {
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

.kb-header-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
}

/* Busca no header: só em mobile (≤768px). Em desktop a busca vive no hero/breadcrumb. */
.kb-header-search { display: none; }

.kb-menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--app-border-default);
    border-radius: var(--app-radius-sm);
    background: transparent;
    color: var(--app-text-primary);
    cursor: pointer;
    flex-shrink: 0;
}

/* ── Drawer ──────────────────────────────────────────────── */

.kb-drawer-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: var(--app-overlay);
}

.kb-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1050;
    width: min(320px, 85vw);
    display: flex;
    flex-direction: column;
    background: var(--app-surface-card);
    box-shadow: var(--app-shadow-drawer);
    transform: translateX(-100%);
    transition: transform 0.25s ease;
}

.kb-drawer[hidden] {
    display: flex;
    visibility: hidden;
}

.kb-drawer.is-open {
    transform: translateX(0);
    visibility: visible;
}

.kb-drawer-backdrop.is-open {
    display: block;
}

.kb-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--app-border-default);
    flex-shrink: 0;
}

.kb-drawer-body {
    flex: 1;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
}

.kb-drawer-link,
.kb-drawer-theme {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 14px;
    min-height: 44px;
    border-radius: var(--app-radius-sm);
    color: var(--app-accent);
    font-size: 15px;
    font-weight: 600;
    transition: background var(--app-transition);
}

.kb-drawer-link .kb-icon,
.kb-drawer-theme .kb-icon {
    color: var(--app-accent);
    font-size: 22px;
    flex-shrink: 0;
}

.kb-drawer-link:hover,
.kb-drawer-link:focus,
.kb-drawer-theme:hover,
.kb-drawer-theme:focus {
    background: var(--app-accent-hover);
    outline: none;
}

.kb-drawer-link {
    text-decoration: none;
    transition: background var(--app-transition), color var(--app-transition);
}

.kb-drawer-link.is-active {
    background: var(--app-accent);
    color: var(--app-text-on-accent);
}

.kb-drawer-link.is-active .kb-icon { color: var(--app-text-on-accent); }

.kb-drawer-theme {
    width: 100%;
    border: none;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.kb-drawer-section-label {
    margin: 4px 12px 8px;
    color: var(--app-text-subtle);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.kb-drawer-divider {
    height: 1px;
    background: var(--app-border-default);
    margin: 8px 12px;
}



/* ── Hero ────────────────────────────────────────────────── */

.kb-hero {
    background: var(--app-accent);
    color: var(--app-text-on-accent);
    padding: 46px 0 36px;
}

.kb-hero-copy {
    max-width: 760px;
}

.kb-eyebrow,
.kb-section-kicker {
    display: inline-flex;
    margin-bottom: 12px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.kb-hero h1,
.kb-section-heading h2,
.kb-category-card h3 {
    margin: 0;
    color: inherit;
    font-family: var(--app-font-display);
    font-weight: 700;
    letter-spacing: 0;
}

.kb-hero h1 {
    font-size: clamp(32px, 5vw, 48px);
    line-height: 1.08;
}

.kb-hero p {
    max-width: 650px;
    margin: 14px 0 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 17px;
    line-height: 1.55;
}

/* ── Search ──────────────────────────────────────────────── */

.kb-search-wrapper {
    position: relative;
    width: min(100%, 780px);
    margin-top: 28px;
}

.kb-search-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--app-surface-card);
    border-radius: var(--app-radius-sm);
    box-shadow: var(--app-shadow-pop);
    max-height: 400px;
    overflow-y: auto;
    z-index: 200;
    color: var(--app-text-primary);
}

.kb-search-dropdown.is-open { display: block; }


.kb-search-result-item {
    border-bottom: 1px solid var(--app-border-default);
}

.kb-search-result-item:last-child {
    border-bottom: none;
}

.kb-search-result-link {
    display: block;
    padding: 14px 20px;
    text-decoration: none;
    transition: background var(--app-transition);
}

.kb-search-result-link:hover,
.kb-search-result-link:focus {
    background: var(--app-accent-hover);
    outline: none;
}

.kb-search-result-title {
    display: block;
    color: var(--app-accent);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 3px;
}

.kb-search-result-title strong {
    color: var(--app-accent-dark);
    font-weight: 700;
}

.kb-search-result-breadcrumb {
    display: block;
    color: var(--app-text-muted);
    font-size: 12px;
}

.kb-search-no-results {
    padding: 20px;
    text-align: center;
    margin: 0;
    color: var(--app-text-muted);
    font-size: 14px;
}


[data-theme-version="dark"] .kb-search-dropdown {
    background: var(--app-surface-card-dark);
}

[data-theme-version="dark"] .kb-search-result-title {
    color: var(--app-text-primary);
}

[data-theme-version="dark"] .kb-search-result-title strong {
    color: var(--app-text-primary);
}

[data-theme-version="dark"] .kb-search-result-item {
    border-color: var(--app-border-strong);
}

.kb-search {
    width: 100%;
    min-height: 58px;
    margin-top: 0;
    display: grid;
    grid-template-columns: 56px 1fr 52px;
    align-items: center;
    border-radius: var(--app-radius-sm);
    background: #fff;
    border: 1.5px solid var(--app-border-soft);
    transition: border-color var(--app-transition), box-shadow var(--app-transition);
}

.kb-search:focus-within {
    border-color: var(--app-accent);
    box-shadow: 0 0 0 0.2rem rgb(from var(--app-accent) r g b / 0.25);
}

.kb-search-icon {
    color: var(--app-text-subtle);
}

.kb-search input {
    width: 100%;
    min-width: 0;
    height: 58px;
    border: 0;
    outline: none;
    -webkit-appearance: none;
    color: var(--app-text-primary);
    font: inherit;
    font-size: 16px;
}

.kb-search input::placeholder {
    color: var(--kb-placeholder);
}

.kb-search input:focus,
.kb-search input:focus-visible {
    outline: 0;
    border: 0;
    box-shadow: none;
}

.kb-search button {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    width: 52px;
    border: 0;
    border-radius: 0 var(--app-radius-sm) var(--app-radius-sm) 0;
    background: transparent;
    color: var(--app-accent);
    cursor: pointer;
    transition: color var(--app-transition), background var(--app-transition);
}

.kb-search button:hover,
.kb-search button:focus {
    color: var(--app-accent-dark);
    outline: none;
}

.kb-search input[type="search"]::-webkit-search-cancel-button {
    display: none;
}

/* Botão oculto sem texto; aparece como X ao digitar */
.kb-search:not(.has-value) button {
    display: none;
}

.kb-search.has-value button {
    color: var(--app-text-muted);
}

.kb-search.has-value button:hover,
.kb-search.has-value button:focus {
    color: var(--app-text-primary);
}

/* ── Sections ────────────────────────────────────────────── */

.kb-section {
    padding: 48px 0 56px;
}

.kb-section-muted {
    padding-top: 12px;
}

.kb-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 28px;
    margin-bottom: 28px;
}

.kb-section-heading h2 {
    color: var(--app-text-primary);
    font-size: clamp(25px, 3vw, 32px);
}

.kb-section-heading p {
    max-width: 430px;
    margin: 0;
    color: var(--app-text-muted);
    font-size: 15px;
    line-height: 1.5;
}

.kb-section-kicker {
    color: var(--app-accent);
}

/* ── Category cards ──────────────────────────────────────── */

.kb-category-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.kb-category-card {
    padding: 22px;
    border: 1px solid var(--app-border-default);
    border-radius: var(--app-radius-sm);
    background: var(--app-surface-card);
    box-shadow: var(--app-shadow-card);
    transition: box-shadow var(--app-transition), transform var(--app-transition);
}

.kb-category-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: nowrap;
}

.kb-card-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--app-radius-sm);
}

.kb-card-icon .kb-icon { color: currentColor; font-size: 22px; }


.kb-category-card h3 {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
    flex: 1;
    min-width: 0;
    transition: color var(--app-transition), font-weight var(--app-transition);
}

.kb-article-count {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--app-text-muted);
    border: 1px solid var(--app-border-default);
    border-radius: 999px;
    padding: 2px 10px;
    white-space: nowrap;
}

.kb-category-card:has(.kb-category-card-head--link:hover) {
    box-shadow: 0 8px 32px rgb(from var(--app-accent) r g b / 0.18), var(--app-shadow-card);
    transform: translateY(-2px);
}

/* Rich card (categoria + artigos mesclados) */
.kb-category-card--rich { display: flex; flex-direction: column; }

.kb-category-card-head--link { display: flex; align-items: center; gap: 12px; text-decoration: none; padding-bottom: 16px; margin-bottom: 4px; }

.kb-category-card-head--link:hover h3 { color: var(--app-accent); }

.kb-category-card--rich .kb-most-read-list { flex: 1; }

.kb-category-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 20px;
}

.kb-article-list {
    display: grid;
    gap: 0;
}

.kb-article-list li + li,
.kb-most-read-list li + li {
    border-top: 1px solid var(--app-border-default);
}

/* Estilo base compartilhado — article-list e most-read-list */
body.kb-public .kb-article-list a,
body.kb-public .kb-most-read-list a,
body.kb-public a.kb-stats-article-link {
    color: var(--app-text-primary);
    text-decoration: none;
    line-height: 1.35;
    transition: color var(--app-transition);
}

body.kb-public .kb-article-list a:hover,
body.kb-public .kb-article-list a:focus,
body.kb-public .kb-most-read-list a:hover,
body.kb-public .kb-most-read-list a:focus,
body.kb-public a.kb-stats-article-link:hover,
body.kb-public a.kb-stats-article-link:focus {
    color: var(--app-accent);
    text-decoration: underline;
    outline: none;
}

/* Layout específico — article-list */
body.kb-public .kb-article-list a { display: block; padding: 11px 0; }

/* ── Exibir mais ─────────────────────────────────────────── */

.kb-article-list.is-collapsed li:nth-child(n+6) {
    display: none;
}

.kb-article-list-expand {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--app-accent);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: color var(--app-transition);
}

.kb-article-list-expand:hover {
    color: var(--app-accent-dark);
}

/* ── Most read list ──────────────────────────────────────── */

.kb-most-read-list {
    counter-reset: most-read;
    display: grid;
    gap: 0;
    /* mantém o ritmo das linhas constante entre cards com nº de artigos
       diferente — sem isso o grid estica as linhas para preencher o card */
    align-content: start;
}

/* Rótulo "Mais lidos" acima da lista de artigos */
.kb-most-read-label {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--app-text-subtle);
}

.kb-most-read-list li { counter-increment: most-read; }

/* Layout específico — most-read-list (grid para o contador) */
body.kb-public .kb-most-read-list a {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 10px 0;
}

/* Título em linha única com reticências (sem quebra) */
.kb-most-read-title {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.kb-public .kb-most-read-list a::before {
    content: counter(most-read);
    color: var(--app-text-subtle);
    font-size: 12px;
    font-weight: 700;
    padding-top: 1px;
}

body.kb-public .kb-most-read-list a:hover::before { color: var(--app-accent); }

/* ── Font size scaling ───────────────────────────────────── */

[data-font-size] [data-kb-font-size] {
    color: var(--app-accent);
    border-color: var(--app-accent);
    border-width: 2px;
    position: relative;
}

[data-font-size] [data-kb-font-size]::after {
    content: '';
    position: absolute;
    top: -3px;
    right: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--app-accent);
    border: 2px solid var(--app-surface-card);
}

[data-font-size="large"] .kb-article-body p,
[data-font-size="large"] .kb-article-body ul,
[data-font-size="large"] .kb-article-body ol { font-size: 17px; line-height: 1.75; }
[data-font-size="large"] .kb-article-body h2,
[data-font-size="large"] .kb-article-body .kb-h-section { font-size: 23px; }
[data-font-size="large"] .kb-article-body h3,
[data-font-size="large"] .kb-article-body .kb-h-sub { font-size: 18px; }
[data-font-size="large"] .kb-article-section-title { font-size: 24px; }
[data-font-size="large"] .kb-category-card h3 { font-size: 16px; }
[data-font-size="large"] .kb-article-list a,
[data-font-size="large"] .kb-most-read-list a { font-size: 18px; }

[data-font-size="xlarge"] .kb-article-body p,
[data-font-size="xlarge"] .kb-article-body ul,
[data-font-size="xlarge"] .kb-article-body ol { font-size: 19px; line-height: 1.8; }
[data-font-size="xlarge"] .kb-article-body h2,
[data-font-size="xlarge"] .kb-article-body .kb-h-section { font-size: 26px; }
[data-font-size="xlarge"] .kb-article-body h3,
[data-font-size="xlarge"] .kb-article-body .kb-h-sub { font-size: 20px; }
[data-font-size="xlarge"] .kb-article-section-title { font-size: 26px; }
[data-font-size="xlarge"] .kb-category-card h3 { font-size: 17px; }
[data-font-size="xlarge"] .kb-article-list a,
[data-font-size="xlarge"] .kb-most-read-list a { font-size: 20px; }

/* ── CTA Cards ───────────────────────────────────────────── */

.kb-cta-section {
    padding: 48px 0 56px;
    background: var(--app-bg-light);
}

.kb-cta-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.kb-cta-card {
    position: relative;
    background: var(--app-accent);
    border-radius: var(--app-radius-md);
    padding: 32px 0 0 32px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 0;
    transition: transform var(--app-transition), box-shadow var(--app-transition);
}

.kb-cta-card:hover { transform: translateY(-3px); box-shadow: 0 12px 36px rgb(from var(--app-accent) r g b / 0.3); }

.kb-cta-card--dark:hover { box-shadow: var(--kb-shadow-cta-hover); }

.kb-cta-card-deco {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    font-family: "Material Symbols Rounded";
    font-size: 100px;
    font-variation-settings: "FILL" 0, "wght" 100, "GRAD" 0, "opsz" 48;
    line-height: 1;
    color: rgba(255, 255, 255, 0.08);
    pointer-events: none;
    user-select: none;
}

.kb-cta-card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex: 1;
    padding-right: 32px;
    padding-bottom: 32px;
}

.kb-cta-card h3 {
    font-family: var(--app-font-display);
    font-size: 20px;
    font-weight: 700;
    color: var(--app-text-on-accent);
    margin: 0;
    line-height: 1.2;
}

.kb-cta-card p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    line-height: 1.55;
    max-width: 320px;
}

/* Communy / dark */
.kb-cta-card--dark { background: var(--kb-cta-steel); }

[data-theme-version="dark"] .kb-cta-card--dark { background: var(--kb-cta-steel-dark); }
[data-theme-version="dark"] .kb-cta-card--dark:hover { box-shadow: var(--kb-shadow-cta-hover-dark); }

/* Comercial */
.kb-cta-card--comercial { background: var(--kb-cta-comercial); }

[data-theme-version="dark"] .kb-cta-card--comercial { background: var(--kb-cta-comercial-dark); }

/* Material de apoio / navy */
.kb-cta-card--navy { background: var(--kb-cta-navy); }

[data-theme-version="dark"] .kb-cta-card--navy { background: var(--kb-cta-navy-dark); }
[data-theme-version="dark"] .kb-cta-card--navy:hover { box-shadow: var(--kb-shadow-cta-hover-dark); }


@media (max-width: 768px) {
    .kb-cta-section { padding: 32px 0 36px; }
    .kb-cta-grid { grid-template-columns: 1fr; }
    .kb-cta-card { padding-right: 24px; }
    .kb-cta-card-body { padding-right: 0; }
    .kb-cta-card p { max-width: none; }
}

/* ── Contact banner ─────────────────────────────────────── */

.kb-contact-banner-wrapper { padding: 0 0 64px; }

.kb-contact-banner {
    background: var(--app-accent);
    border-radius: var(--app-radius-md);
    padding: 56px 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    overflow: hidden;
    position: relative;
}

.kb-contact-banner::after {
    content: '';
    position: absolute;
    right: -60px;
    top: -60px;
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, transparent 65%);
    pointer-events: none;
}

.kb-contact-banner-body { position: relative; z-index: 1; max-width: 560px; }

.kb-contact-banner h2 { font-family: var(--app-font-display); font-size: 36px; font-weight: 700; color: var(--app-text-on-accent); margin: 0 0 12px; line-height: 1.15; }

.kb-contact-banner p { font-size: 15px; color: rgba(255, 255, 255, 0.7); margin: 0 0 32px; line-height: 1.65; }


.kb-contact-banner-deco { font-size: 200px; color: rgba(255, 255, 255, 0.12); font-variation-settings: "FILL" 1, "wght" 100, "GRAD" 0, "opsz" 48; flex-shrink: 0; position: relative; z-index: 1; line-height: 1; }

@media (max-width: 768px) {
    .kb-contact-banner { padding: 36px 28px; }
    .kb-contact-banner h2 { font-size: 26px; }
    .kb-contact-banner-deco { display: none; }
}

/* ── Footer ──────────────────────────────────────────────── */

.kb-footer {
    padding: 56px 0 0;
    border-top: 1px solid var(--app-border-default);
    background: var(--app-surface-card);
}

.kb-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 48px;
}

.kb-footer-brand { display: flex; flex-direction: column; gap: 16px; }

.kb-footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    width: fit-content;
}

.kb-footer-logotype { display: block; }

.kb-footer-tagline {
    font-size: 14px;
    color: var(--app-text-muted);
    line-height: 1.6;
    margin: 0;
    max-width: 280px;
}

.kb-footer-heading {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--app-text-primary);
    margin: 0 0 16px;
}

.kb-footer-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kb-footer-links a {
    font-size: 14px;
    color: var(--app-text-muted);
    text-decoration: none;
    transition: color var(--app-transition);
}

.kb-footer-links a:hover { color: var(--app-accent); }

.kb-footer-social {
    display: flex;
    align-items: center;
    gap: 6px;
}

.kb-footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    color: var(--app-accent);
    text-decoration: none;
    transition: background var(--app-transition);
}

.kb-footer-social-link svg { width: 18px; height: 18px; fill: currentColor; display: block; }

.kb-footer-social-link:hover,
.kb-footer-social-link:focus {
    background: var(--app-accent-hover);
    outline: none;
}

.kb-footer-bottom {
    padding: 20px 0;
    border-top: 1px solid var(--app-border-default);
    font-size: 13px;
    color: var(--app-text-subtle);
}

@media (max-width: 768px) {
    .kb-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .kb-footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
    .kb-footer-grid { grid-template-columns: 1fr; }
}

/* ── Category page ───────────────────────────────────────── */

.kb-cat-breadcrumb-bar {
    position: sticky;
    top: 0;
    z-index: 99;
    background: var(--app-surface-card);
    border-bottom: 1px solid var(--app-border-default);
    padding: 10px 0;
    transition: transform 280ms ease;
}

.kb-cat-breadcrumb-bar.is-hidden {
    transform: translateY(-100%);
}

.kb-breadcrumb-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 44px;
    min-width: 0;
}

.kb-breadcrumb-row > nav {
    min-width: 0;
    overflow: hidden;
}

.kb-search-wrapper--compact {
    width: min(100%, 340px);
    min-width: 200px;
    flex-shrink: 1;
    margin-top: 0;
}

.kb-search--compact {
    min-height: 40px;
    grid-template-columns: 40px 1fr 40px;
    box-shadow: none;
    border: 1px solid var(--app-border-strong);
}

.kb-search--compact input {
    height: 40px;
    font-size: 14px;
}

.kb-search--compact button {
    width: 36px;
    height: 36px;
}

.kb-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--app-text-muted);
    min-width: 0;
    overflow: hidden;
}

.kb-breadcrumb li + li::before {
    content: "›";
    margin-right: 6px;
    color: var(--app-text-subtle);
}

/* Home e Categoria ficam inteiros (não encolhem nem quebram linha);
   só o título do artigo cede espaço e trunca com reticências. */
.kb-breadcrumb li:not(.kb-breadcrumb-current) {
    flex-shrink: 0;
}

.kb-breadcrumb a {
    color: var(--app-text-muted);
    text-decoration: none;
    transition: color var(--app-transition);
    white-space: nowrap;
}

.kb-breadcrumb a:hover {
    color: var(--app-accent);
}

.kb-breadcrumb-current {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex-shrink: 1;
}

.kb-cat-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 40px;
    align-items: start;
    padding: 32px 0 60px;
}

/* ── Category sidebar ────────────────────────────────────── */

.kb-cat-sidebar,
.kb-article-toc {
    position: sticky;
    top: 24px;
}

.kb-side-nav {
    background: var(--app-surface-card);
    border: 1px solid var(--app-border-default);
    border-radius: var(--app-radius-sm);
    overflow: hidden;
}

.kb-side-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 11px 14px;
    color: var(--app-text-muted);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    background: none;
    border: 0;
    cursor: pointer;
    transition: color var(--app-transition), background var(--app-transition);
}

.kb-side-nav-link:hover,
.kb-side-nav-link:focus-visible {
    color: var(--app-accent);
    background: var(--app-accent-hover);
    outline: none;
}

.kb-side-nav-link.is-current {
    color: var(--app-accent);
    background: var(--app-accent-hover);
}

.kb-side-nav-link .kb-icon {
    font-size: 18px;
    flex-shrink: 0;
    color: var(--app-text-subtle);
}

.kb-side-nav-link.is-current .kb-icon {
    color: var(--app-accent);
}

.kb-side-nav-sub {
    list-style: none;
    margin: 0;
    padding: 0 0 6px;
    background: var(--app-surface-soft);
    border-top: 1px solid var(--app-border-default);
    overflow: hidden;
    transition: max-height 0.25s ease, padding 0.25s ease;
    max-height: 600px;
}

.kb-side-nav-item.is-collapsed .kb-side-nav-sub {
    max-height: 0;
    padding-bottom: 0;
    border-top: none;
}

.kb-side-nav-sublink {
    display: block;
    padding: 8px 14px 8px 28px;
    color: var(--app-text-muted);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: color var(--app-transition), border-color var(--app-transition), background var(--app-transition);
}

.kb-side-nav-sublink:hover {
    color: var(--app-accent);
    background: var(--app-accent-hover);
    outline: none;
}

.kb-side-nav-sublink.is-active {
    color: var(--app-accent);
    border-left-color: var(--app-accent);
    background: var(--app-accent-hover);
}

/* ── Article sections ────────────────────────────────────── */

.kb-cat-content {
    min-width: 0;
}

.kb-article-section {
    padding: 28px 0;
}

.kb-article-section:last-child {
    padding-bottom: 0;
}

.kb-article-section-title {
    margin: 0 0 4px;
    color: var(--app-text-primary);
    font-family: var(--app-font-display);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}



/* ── Dark mode overrides (KB-specific) ───────────────────── */

[data-theme-version="dark"] .kb-search {
    background: #fff;
    border-color: var(--app-border-strong);
}

[data-theme-version="dark"] .kb-search--compact {
    border-color: var(--app-text-subtle);
}

[data-theme-version="dark"] .kb-search input {
    color: #3d4465; /* mantido: search tem fundo branco no dark, precisa do text-primary do light */
}

[data-theme-version="dark"] .kb-search input::placeholder {
    color: var(--kb-placeholder);
}

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 1024px) {
    .kb-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kb-hero {
        padding: 38px 0 28px;
    }

    .kb-hero p {
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    .kb-container {
        width: min(100% - 28px, 1180px);
    }

    .kb-header-inner {
        min-height: 64px;
        gap: 10px;
    }

    .kb-menu-toggle {
        display: inline-flex;
        flex-shrink: 0;
    }

    .kb-brand {
        flex-shrink: 0;
    }

    /* Mobile: só o ícone da marca; logotipo dá lugar à busca */
    .kb-brand .kb-brand-logotype {
        display: none;
    }

    /* Home: mantém logotipo alinhado à esquerda (hero já tem busca) */
    .kb-home .kb-header-inner {
        justify-content: flex-start;
    }

    .kb-home .kb-brand .kb-brand-logotype {
        display: block;
    }

    .kb-home .kb-header-search {
        display: none;
    }

    .kb-header-actions {
        display: none;
    }

    .kb-header-search {
        display: block;
        flex: 1;
        min-width: 0;
        margin-top: 0;
    }

    .kb-cat-layout {
        grid-template-columns: 1fr;
        padding: 20px 0 40px;
    }

    .kb-cat-sidebar {
        display: none;
    }

    .kb-search-wrapper--compact {
        display: none;
    }

    .kb-cat-breadcrumb-bar {
        min-height: 44px;
    }

    .kb-hero {
        padding: 34px 0 24px;
    }

    .kb-hero p {
        font-size: 15px;
    }

    .kb-search {
        grid-template-columns: 44px 1fr 44px;
    }

    .kb-search input {
        font-size: 14px;
    }

    .kb-section {
        padding: 34px 0 42px;
    }

    .kb-section-heading {
        display: block;
    }

    .kb-section-heading p {
        margin-top: 10px;
    }

    .kb-category-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .kb-category-card {
        padding: 18px;
    }

    .kb-category-card-head {
        grid-template-columns: auto 1fr;
    }

    .kb-card-more {
        grid-column: 1 / -1;
        justify-content: center;
    }

    .kb-footer-inner {
        flex-direction: column;
    }
}

/* ══════════════════════════════════════════════════════════
   ARTICLE PAGE
   ══════════════════════════════════════════════════════════ */

/* ── Layout 3 colunas ────────────────────────────────────── */

.kb-article-layout {
    display: grid;
    grid-template-columns: 220px 1fr 200px;
    gap: 40px;
    align-items: start;
    padding: 32px 0 60px;
}

/* ── Article main ────────────────────────────────────────── */

.kb-article-main {
    min-width: 0;
}

.kb-article-header {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--app-border-default);
}

.kb-article-header h1 {
    font-family: var(--app-font-display);
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 700;
    color: var(--app-text-primary);
    line-height: 1.2;
    margin: 0 0 10px;
}

.kb-article-meta {
    color: var(--app-text-muted);
    font-size: 13px;
    margin: 0;
}

/* ── Article body ────────────────────────────────────────── */

.kb-article-body section {
    margin-bottom: 8px;
}

.kb-article-body h2 {
    font-family: var(--app-font-display);
    font-size: 21px;
    font-weight: 700;
    color: var(--app-text-primary);
    margin: 36px 0 12px;
    padding-top: 4px;
}

.kb-article-body h2:first-child {
    margin-top: 0;
}

.kb-article-body h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--app-text-primary);
    margin: 24px 0 8px;
}

/* Papel do heading (definido pelo backend, independe da tag h2/h3/h4):
   garante hierarquia visual consistente entre artigos. */
.kb-article-body .kb-h-section {
    font-family: var(--app-font-display);
    font-size: 21px;
    font-weight: 700;
    color: var(--app-text-primary);
    margin: 36px 0 12px;
    padding-top: 4px;
}

.kb-article-body .kb-h-sub {
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    color: var(--app-text-primary);
    margin: 24px 0 8px;
    padding-top: 0;
}

.kb-article-body > .kb-h-section:first-child,
.kb-article-body > *:first-child .kb-h-section {
    margin-top: 0;
}

.kb-article-body p {
    color: var(--app-text-muted);
    font-size: 15px;
    line-height: 1.7;
    margin: 0 0 14px;
}

.kb-article-body ul,
.kb-article-body ol {
    color: var(--app-text-muted);
    font-size: 15px;
    line-height: 1.7;
    margin: 0 0 14px;
    padding-left: 22px;
}

.kb-article-body li {
    margin-bottom: 6px;
}

.kb-article-body a {
    color: var(--app-accent);
    text-decoration: none;
}

.kb-article-body a:hover {
    color: var(--app-accent-dark);
    text-decoration: underline;
}

.kb-article-body strong {
    color: var(--app-text-primary);
    font-weight: 700;
}

.kb-article-body table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    font-size: 14px;
}

.kb-article-body th {
    background: var(--app-surface-soft);
    color: var(--app-text-primary);
    font-weight: 700;
    padding: 10px 14px;
    border: 1px solid var(--app-border-default);
    text-align: left;
}

.kb-article-body td {
    padding: 10px 14px;
    border: 1px solid var(--app-border-default);
    color: var(--app-text-muted);
}

/* ── Related articles ────────────────────────────────────── */

.kb-related {
    padding: 32px 0;
    border-top: 1px solid var(--app-border-default);
    margin-top: 8px;
}

.kb-related-title {
    font-family: var(--app-font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--app-text-primary);
    margin: 0 0 4px;
}

/* ── Divider ─────────────────────────────────────────────── */

.kb-article-divider {
    border: none;
    border-top: 1px solid var(--app-border-default);
    margin: 40px 0 32px;
}

/* ── Prev / Next nav ─────────────────────────────────────── */

.kb-article-nav {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 40px;
}

.kb-article-nav-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 46%;
    text-decoration: none;
}

.kb-article-nav-next {
    align-items: flex-end;
    text-align: right;
}

.kb-article-nav-dir {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--app-text-muted);
    font-size: 13px;
    font-weight: 600;
}

.kb-article-nav-dir .kb-icon {
    font-size: 16px;
}

.kb-article-nav-title {
    color: var(--app-accent);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
}

.kb-article-nav-item:hover .kb-article-nav-title,
.kb-article-nav-item:focus .kb-article-nav-title {
    color: var(--app-accent-dark);
    text-decoration: underline;
}

/* ── Feedback ────────────────────────────────────────────── */

.kb-article-feedback {
    text-align: center;
    padding: 32px 0 48px;
}

.kb-feedback-question {
    font-size: 18px;
    font-weight: 700;
    color: var(--app-text-primary);
    margin: 0 0 20px;
}

.kb-feedback-actions {
    display: inline-flex;
    gap: 12px;
    margin-bottom: 20px;
}

.kb-feedback-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 20px;
    border-radius: var(--app-btn-radius);
    font: inherit;
    font-size: var(--app-btn-font-size);
    font-weight: var(--app-btn-font-weight);
    cursor: pointer;
    transition: background var(--app-transition), border-color var(--app-transition), color var(--app-transition);
}

.kb-feedback-btn .kb-icon {
    font-size: 18px;
}

.kb-feedback-yes {
    border: 1px solid var(--app-accent);
    background: transparent;
    color: var(--app-accent);
}

.kb-feedback-yes:hover,
.kb-feedback-yes:focus {
    background: var(--app-accent);
    color: var(--app-text-on-accent);
    outline: none;
}

.kb-feedback-no {
    border: 1px solid var(--app-border-strong);
    background: transparent;
    color: var(--app-text-muted);
}

.kb-feedback-no:hover,
.kb-feedback-no:focus {
    border-color: var(--app-text-muted);
    color: var(--app-text-primary);
    outline: none;
}

.kb-feedback-thanks {
    color: var(--app-color-success);
    font-weight: 700;
    font-size: 15px;
    margin: 0;
}

.kb-feedback-support {
    color: var(--app-text-muted);
    font-size: 14px;
    margin: 0;
}

.kb-feedback-support a {
    color: var(--app-accent);
    font-weight: 600;
    text-decoration: underline;
}

/* ── TOC (right sidebar) ─────────────────────────────────── */

.kb-toc-title {
    margin: 0 0 12px;
    color: var(--app-text-subtle);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.kb-toc-list {
    border-left: 2px solid var(--app-border-default);
}

.kb-toc-link,
.kb-toc-sublink {
    display: block;
    padding: 5px 12px;
    color: var(--app-text-muted);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.4;
    border-left: 2px solid transparent;
    margin-left: -2px;
    transition: color var(--app-transition), border-color var(--app-transition);
}

.kb-toc-sublink {
    padding-left: 22px;
    font-weight: 400;
}

.kb-toc-link:hover,
.kb-toc-sublink:hover,
.kb-toc-link.is-active,
.kb-toc-sublink.is-active {
    color: var(--app-accent);
    border-left-color: var(--app-accent);
    outline: none;
}

/* ── Dark mode ───────────────────────────────────────────── */

[data-theme-version="dark"] .kb-article-header,
[data-theme-version="dark"] .kb-article-divider,
[data-theme-version="dark"] .kb-article-body th,
[data-theme-version="dark"] .kb-article-body td,
[data-theme-version="dark"] .kb-toc-list {
    border-color: var(--app-border-strong);
}

[data-theme-version="dark"] .kb-article-body th {
    background: var(--app-surface-soft);
}

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 1100px) {
    .kb-article-layout {
        grid-template-columns: 200px 1fr;
        gap: 24px;
    }

    .kb-article-toc {
        display: none;
    }
}

@media (max-width: 768px) {
    .kb-article-layout {
        grid-template-columns: 1fr;
        padding: 20px 0 40px;
    }

    .kb-article-nav {
        flex-direction: column;
        gap: 12px;
    }

    .kb-article-nav-item,
    .kb-article-nav-next {
        max-width: 100%;
        align-items: flex-start;
        text-align: left;
    }
}

/* ══════════════════════════════════════════════════════════
   AUTH PAGES (login / forgot-password)
   ══════════════════════════════════════════════════════════ */

body.kb-public--auth {
    background: var(--app-accent);
}

.kb-auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 48px 0 64px;
}

.kb-auth-wrap {
    display: flex;
    justify-content: center;
}

.kb-auth-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: var(--app-surface-card);
    border: 1px solid var(--app-border-default);
    border-radius: var(--app-radius-md);
    padding: 40px 36px 36px;
    box-shadow: var(--app-shadow-card);
}

.kb-auth-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: var(--app-radius-sm);
    cursor: pointer;
    color: var(--app-text-subtle);
    transition: background var(--app-transition), color var(--app-transition);
    padding: 0;
}

.kb-auth-close:hover { background: var(--app-accent-hover); color: var(--app-accent); }
.kb-auth-close .kb-icon { font-size: 20px; }

.kb-auth-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
}

.kb-auth-logotype {
    display: block;
}

.kb-auth-title {
    font-family: var(--app-font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--app-text-primary);
    margin: 0 0 6px;
    line-height: 1.2;
}

.kb-auth-subtitle {
    color: var(--app-text-muted);
    font-size: 14px;
    margin: 0 0 24px;
    line-height: 1.5;
}

.kb-auth-alert {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgb(from var(--app-color-danger) r g b / 0.08);
    border: 1px solid rgb(from var(--app-color-danger) r g b / 0.25);
    border-radius: var(--app-radius-sm);
    color: var(--app-color-danger);
    font-size: 14px;
    font-weight: 600;
    padding: 10px 14px;
    margin-bottom: 20px;
}

.kb-auth-alert .kb-icon { font-size: 18px; flex-shrink: 0; }

[data-theme-version="dark"] .kb-auth-alert {
    background: rgb(from var(--app-color-danger) r g b / 0.14);
    border-color: rgb(from var(--app-color-danger) r g b / 0.35);
}

.kb-auth-alert--info {
    background: var(--app-accent-hover);
    border-color: rgb(from var(--app-accent) r g b / 0.25);
    color: var(--app-accent-dark);
}

.kb-auth-alert--info a {
    color: var(--app-accent-dark);
    font-weight: 700;
    text-decoration: underline;
}

[data-theme-version="dark"] .kb-auth-alert--info {
    background: var(--app-surface-active);
    border-color: rgb(from var(--app-accent) r g b / 0.35);
    color: var(--app-accent);
}

.kb-auth-form { display: flex; flex-direction: column; gap: 18px; margin-bottom: 20px; }

.kb-auth-field { display: flex; flex-direction: column; gap: 6px; }

.kb-auth-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.kb-auth-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--app-text-primary);
}

.kb-auth-input-wrap { position: relative; }

.kb-auth-input {
    width: 100%;
    height: 44px;
    padding: 0 44px 0 14px;
    border: 1px solid var(--app-border-default);
    border-radius: var(--app-radius-sm);
    background: var(--app-bg-light);
    color: var(--app-text-primary);
    font: inherit;
    font-size: 14px;
    transition: border-color var(--app-transition), box-shadow var(--app-transition);
    outline: none;
}

.kb-auth-field:not(.kb-auth-field--password) .kb-auth-input { padding-right: 14px; }

.kb-auth-input:focus {
    border-color: var(--app-accent);
    box-shadow: 0 0 0 3px rgb(from var(--app-accent) r g b / 0.15);
}

[data-theme-version="dark"] .kb-auth-input {
    border-color: var(--app-border-input-dark, rgba(255,255,255,0.15));
    background: var(--app-surface-card);
}

.kb-auth-input--error {
    border-color: var(--app-color-danger);
    box-shadow: 0 0 0 3px rgb(from var(--app-color-danger) r g b / 0.15);
}

.kb-field-error {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--app-color-danger);
    margin-top: 4px;
}

.kb-auth-eye {
    position: absolute;
    right: 0;
    top: 0;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--app-text-subtle);
    transition: color var(--app-transition);
    padding: 0;
}

.kb-auth-eye:hover { color: var(--app-accent); }
.kb-auth-eye .kb-icon { font-size: 18px; }

.kb-auth-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--app-accent);
    text-decoration: none;
    transition: color var(--app-transition);
}

.kb-auth-link:hover { color: var(--app-accent-dark); text-decoration: underline; }
.kb-auth-link .kb-icon { font-size: 16px; }

.kb-auth-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 46px;
    background: var(--app-accent);
    color: var(--app-text-on-accent);
    border: none;
    border-radius: var(--app-btn-radius);
    font: inherit;
    font-size: var(--app-btn-font-size);
    font-weight: var(--app-btn-font-weight);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--app-transition), box-shadow var(--app-transition);
    margin-top: 4px;
}

.kb-auth-submit:hover { background: var(--app-accent-dark); box-shadow: 0 4px 14px rgb(from var(--app-accent) r g b / 0.35); }
.kb-auth-submit .kb-icon { font-size: 18px; }

.kb-auth-submit--outline {
    background: transparent;
    border: 1px solid var(--app-border-strong);
    color: var(--app-accent);
    margin-top: 8px;
}

.kb-auth-submit--outline:hover {
    background: var(--app-accent);
    color: var(--app-text-on-accent);
    box-shadow: none;
}

.kb-auth-footer-note {
    text-align: center;
    font-size: 13px;
    color: var(--app-text-muted);
    margin: 0;
}

.kb-auth-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.kb-auth-success-icon {
    font-size: 52px;
    color: var(--app-accent);
    font-variation-settings: "FILL" 1, "wght" 300, "GRAD" 0, "opsz" 48;
    margin-bottom: 16px;
}

.kb-auth-success .kb-auth-title { margin-bottom: 8px; }
.kb-auth-success .kb-auth-subtitle { margin-bottom: 24px; }

@media (max-width: 480px) {
    .kb-auth-page { padding: 24px 0 48px; align-items: flex-start; }
    .kb-auth-card { border-radius: var(--app-radius-sm); padding: 28px 20px 24px; }
}

/* ── Admin stats ───────────────────────────────────────── */
.kb-stats-hero {
    padding: 32px 0 0;
}

.kb-stats-heading,
.kb-stats-table-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.kb-stats-heading {
    margin-top: 18px;
}

.kb-stats-heading h1,
.kb-stats-table-header h2 {
    margin: 0;
    color: var(--app-heading);
    font-size: clamp(1.375rem, 1.1rem + 0.6vw, 1.625rem);
    font-weight: 700;
    line-height: 1.2;
}

/* Título do artigo + badge de status lado a lado */
.kb-stats-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    min-width: 0;
}

/* Badge de status (forma pill; cor/fundo vêm das classes .app-tone-* existentes) */
.kb-status-badge {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.5;
}

/* Panel transparente: header + toolbar + footer ficam FORA do card (igual .app-panel) */
.kb-stats-panel {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Fileira de cards de resumo (reusa .kb-stats-metric-card) — 3 por linha */
.kb-stats-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

@media (max-width: 768px) {
    .kb-stats-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .kb-stats-summary-grid {
        grid-template-columns: 1fr;
    }
}

.kb-stats-table-card {
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
    background: var(--app-surface);
    overflow: hidden;
}

.kb-search-stats-panel {
    margin-top: 34px;
}

.kb-search-stats-panel .kb-stats-filter {
    margin-bottom: 0;
}

.kb-search-stats-grid {
    margin-bottom: 0;
}

.kb-search-ranking-header {
    padding: 18px 22px 0;
}

.kb-search-ranking-header h3 {
    margin: 0;
    color: var(--app-heading);
    font-size: 18px;
}

.kb-search-ranking-table td:nth-child(2),
.kb-search-ranking-table th:nth-child(2) {
    width: 160px;
    text-align: right;
}

.kb-search-ranking-table td:last-child,
.kb-search-ranking-table th:last-child {
    width: 190px;
}

.kb-stats-table-header {
    padding: 0;
}

/* Header da tabela: título + subtítulo inline (espelha .app-panel-header do comercial) */
.kb-stats-table-header {
    align-items: center;
    flex-wrap: wrap;
}

.kb-stats-title-group {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
}

.kb-stats-subtitle {
    color: var(--app-text-muted);
    font-size: 14px;
    font-weight: 600;
}

/* Toolbar de busca — espelha .app-toolbar (start/end) + .app-search do comercial,
   reimplementado com classes kb- e tokens da knowledge. */
.kb-stats-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.kb-stats-toolbar-start {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

.kb-stats-toolbar-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-left: auto;
    flex: 1 1 auto;
    min-width: 0;
}

/* Busca: reusa o componente .kb-search--compact do portal; aqui só constrange a largura */
.kb-stats-toolbar-end .kb-search {
    max-width: 360px;
}

/* Ações do header: filtrar / ordenar (espelham .app-btn-icon) + Abrir admin */
.kb-stats-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Estado "aberto" do dropdown reusa o .app-icon-button (já accent, 42px) */
.kb-stats-dropdown.is-open .app-icon-button {
    border-color: var(--app-accent);
    background: var(--app-accent-hover);
}

.kb-stats-dropdown {
    position: relative;
}

.kb-stats-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 20;
    min-width: 224px;
    max-height: 320px;
    overflow-y: auto;
    padding: 8px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-md);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-card);
    display: none;
}

.kb-stats-dropdown.is-open .kb-stats-menu {
    display: block;
}

.kb-stats-menu-label {
    margin: 4px 10px 6px;
    color: var(--app-text-subtle);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.kb-stats-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 9px 10px;
    border: none;
    border-radius: var(--app-radius-sm);
    background: none;
    color: var(--app-text-primary);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background var(--app-transition), color var(--app-transition);
}

.kb-stats-menu-item:hover,
.kb-stats-menu-item:focus {
    background: var(--app-accent-hover);
    color: var(--app-accent-dark);
}

.kb-stats-menu-item.is-active {
    color: var(--app-accent-dark);
}

.kb-stats-menu-item.is-active::after {
    content: "check";
    font-family: "Material Symbols Rounded";
    font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
    font-size: 18px;
    line-height: 1;
    color: var(--app-accent);
}

/* Seletor "Por página" (espelha .app-page-size-control do comercial) */
.kb-stats-page-size {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.kb-stats-page-size-label {
    margin: 0;
    color: var(--app-text-muted);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

/* Trigger genérico com visual de select (botão de dropdown). Usado por "Por página" e "Período". */
.kb-stats-select-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    min-width: 84px;
    padding: 0 12px 0 14px;
    border: 1px solid var(--app-border-strong);
    border-radius: var(--app-radius-sm);
    background: var(--app-surface);
    color: var(--app-text-primary);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--app-transition), box-shadow var(--app-transition);
}

.kb-stats-select-trigger > span:first-child {
    margin-right: auto;
}

.kb-stats-select-trigger .kb-icon {
    font-size: 20px;
    color: var(--app-accent);
    transition: transform var(--app-transition);
}

.kb-stats-dropdown.is-open .kb-stats-select-trigger,
.kb-stats-select-trigger:focus-visible {
    outline: none;
    border-color: var(--app-accent);
    box-shadow: 0 0 0 3px rgb(from var(--app-accent) r g b / 0.2);
}

.kb-stats-dropdown.is-open .kb-stats-select-trigger .kb-icon {
    transform: rotate(180deg);
}

/* Trigger do período é mais largo (rótulos tipo "Últimos 6 meses") */
.kb-stats-period-trigger {
    min-width: 160px;
}

/* Menus que abrem no canto esquerdo (page-size e período) */
.kb-stats-page-size .kb-stats-menu,
.kb-stats-filter-head .kb-stats-menu {
    right: auto;
    left: 0;
    min-width: 120px;
}

.kb-stats-filter-head .kb-stats-menu {
    min-width: 200px;
}

/* Cabeçalho do filtro de período: kicker + dropdown empilhados */
.kb-stats-filter-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

/* Footer: resumo + paginação (espelha .app-list-footer + .app-pagination) */
.kb-stats-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.kb-stats-summary {
    margin: 0;
    color: var(--app-text-muted);
    font-size: 15px;
}

.kb-stats-pagination[hidden] {
    display: none;
}

.kb-pagination-list {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kb-page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--app-border-strong);
    border-radius: var(--app-radius-sm);
    background: var(--app-surface);
    color: var(--app-accent);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--app-transition), border-color var(--app-transition), color var(--app-transition);
}

.kb-page-link .kb-icon {
    font-size: 20px;
}

.kb-page-item:not(.is-active):not(.is-disabled) .kb-page-link:hover,
.kb-page-item:not(.is-active):not(.is-disabled) .kb-page-link:focus {
    background: var(--app-accent);
    border-color: var(--app-accent);
    color: var(--app-text-on-accent);
}

.kb-page-item.is-active .kb-page-link {
    background: var(--app-accent);
    border-color: var(--app-accent);
    color: var(--app-text-on-accent);
    cursor: default;
}

.kb-page-item.is-disabled .kb-page-link {
    opacity: 0.45;
    cursor: not-allowed;
}

.kb-page-item.is-ellipsis {
    display: inline-flex;
    align-items: flex-end;
    padding: 0 4px;
    color: var(--app-text-subtle);
    font-weight: 700;
}

.kb-stats-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.kb-stats-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 920px;
}

.kb-stats-table th,
.kb-stats-table td {
    padding: 15px 24px;
    border-bottom: 1px solid var(--app-border-soft);
    text-align: left;
    vertical-align: middle;
}

.kb-stats-table th {
    background: var(--app-surface);
    color: var(--app-text-primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.kb-stats-table td {
    color: var(--app-text-muted);
}

.kb-stats-table th:not(:first-child),
.kb-stats-table td:not(:first-child) {
    text-align: center;
}

.kb-stats-table td:not(:first-child) {
    width: 132px;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.kb-stats-table tbody tr:last-child td {
    border-bottom: none;
}

.kb-stats-table tbody tr {
    transition: background-color 0.15s ease;
}

.kb-stats-table tbody tr:hover td {
    background: var(--app-accent-hover);
}

/* Apenas o truncamento específico da tabela — cor, peso e hover (accent)
   vêm da base compartilhada .kb-article-list / .kb-most-read-list (documentada). */
.kb-stats-article-link {
    display: inline-block;
    max-width: 58ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.kb-stats-empty {
    color: var(--app-text-muted);
    text-align: center;
}

.kb-stats-filter,
.kb-stats-metric-card,
.kb-stats-chart-card {
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
    background: var(--app-surface);
}

.kb-stats-filter {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 24px;
    margin-bottom: 18px;
}

.kb-stats-filter h2 {
    margin: 0;
    color: var(--app-heading);
}

.kb-stats-filter-fields {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.kb-stats-filter-fields label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--app-text-muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.kb-stats-filter-fields input {
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--app-border-strong);
    border-radius: var(--app-radius-sm);
    background: var(--app-surface);
    color: var(--app-heading);
    font: inherit;
    font-size: 14px;
}

.kb-stats-metric-grid,
.kb-stats-chart-grid {
    display: grid;
    gap: 18px;
}

.kb-stats-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 18px;
}

.kb-stats-chart-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.6fr);
}

.kb-stats-metric-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px;
}

.kb-stats-metric-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--app-radius-sm);
    background: rgb(from var(--app-accent) r g b / 0.12);
    color: var(--app-accent);
}

.kb-stats-metric-label {
    display: block;
    color: var(--app-text-muted);
    font-size: 13px;
    font-weight: 700;
}

.kb-stats-metric-card strong {
    display: block;
    margin-top: 4px;
    color: var(--app-heading);
    font-size: 28px;
    line-height: 1;
}

/* Indicador de tendência (seta + % vs período anterior) — à direita do card */
.kb-stats-metric-trend {
    margin-left: auto;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    text-align: right;
}

.kb-stats-metric-trend-value {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}

.kb-stats-metric-trend-value .kb-icon {
    font-size: 16px;
}

.kb-stats-metric-trend-label {
    color: var(--app-text-subtle);
    font-weight: 600;
    font-size: 12px;
    white-space: nowrap;
}

.kb-stats-metric-trend--up .kb-stats-metric-trend-value {
    color: var(--app-color-success);
}

.kb-stats-metric-trend--down .kb-stats-metric-trend-value {
    color: var(--app-color-danger);
}

.kb-stats-chart-card {
    min-width: 0;
    padding: 22px;
}

.kb-stats-chart-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.kb-stats-chart-header h2 {
    margin: 0;
    color: var(--app-heading);
}

.kb-stats-chart {
    min-height: 300px;
}

.kb-stats-feedback-summary {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.kb-stats-feedback-summary span {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--app-surface-muted);
    color: var(--app-text-muted);
    font-size: 13px;
    font-weight: 700;
}

.kb-stats-feedback-summary strong {
    margin-right: 4px;
    color: var(--app-heading);
}

@media (max-width: 768px) {
    .kb-stats-heading,
    .kb-stats-table-header,
    .kb-stats-filter,
    .kb-stats-filter-fields {
        align-items: flex-start;
        flex-direction: column;
    }

    .kb-stats-filter-fields,
    .kb-stats-filter-fields label,
    .kb-stats-filter-fields input,
    .kb-stats-filter-fields button {
        width: 100%;
    }

    .kb-stats-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .kb-stats-toolbar-end {
        justify-content: stretch;
    }

    .kb-stats-toolbar-end .kb-search {
        max-width: none;
    }

    .kb-stats-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .kb-pagination-list {
        flex-wrap: wrap;
        justify-content: center;
    }

    .kb-stats-metric-grid,
    .kb-stats-chart-grid {
        grid-template-columns: 1fr;
    }
}