/* ============================================================================
 * Knowledge Base — Portal (client area) styles
 * Standalone layout: Bootstrap grid + custom KB portal design.
 * ========================================================================== */

/* ----------------------------------------------------------------- Base */
/* Flex column shell so `.kb-portal-footer` can sit flush against the
 * bottom of the viewport when page content is short, and follow the
 * normal flow when content overflows. The page main / section blocks
 * grow with `flex: 1 0 auto` (forced on direct children below) so they
 * fill the gap between header and footer instead of leaving a big
 * empty band above the footer. */
body.kb-portal {
    background: #F9FAFB;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: #111827;
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
/* Any direct child of body that is NOT the footer expands to push the
 * footer down. Footer keeps its natural height. */
body.kb-portal > *:not(.kb-portal-footer):not(script) {
    flex: 0 0 auto;
}
/* Wrappers that must absorb the remaining vertical space. We mark the
 * LAST non-footer/non-script content block as the "growable" surface
 * so the footer never floats with an empty band above it. */
body.kb-portal > main,
body.kb-portal > .kb-portal-space-body,
body.kb-portal > .kb-portal-article-layout,
body.kb-portal > .kb-portal-search-page,
body.kb-portal > section:not(.kb-portal-hero):last-of-type {
    flex: 1 0 auto;
}

/* ----------------------------------------------------------------- Container */
.kb-portal-container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ================================================================= HERO
 * Clean Perfex-native look: white surface, neutral text, no gradient.
 * Matches the admin landing palette (tw-text-neutral-800 / 600) by hand
 * since the portal does not load Tailwind. */
.kb-portal-hero {
    background: #FFFFFF;
    color: #111827;
    padding: 48px 24px 36px;
    text-align: center;
    border-bottom: 1px solid #E5E7EB;
}

.kb-portal-hero__logo {
    height: 42px;
    margin-bottom: 18px;
}

.kb-portal-hero__title {
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 8px;
    color: #1F2937;          /* neutral-800 */
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.kb-portal-hero__subtitle {
    font-size: 15px;
    color: #6B7280;          /* neutral-500 */
    margin: 0 0 24px;
    font-weight: 400;
}

@media (min-width: 768px) {
    .kb-portal-hero { padding: 56px 24px 44px; }
    .kb-portal-hero__title { font-size: 30px; }
    .kb-portal-hero__subtitle { font-size: 16px; margin-bottom: 28px; }
}

/* ----- Stats badges row under search — neutral, no white-on-blue */
.kb-portal-hero__stats {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 13px;
    color: #6B7280;          /* neutral-500 */
}
.kb-portal-hero__stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.kb-portal-hero__stat i { color: #9CA3AF; font-size: 12px; }
.kb-portal-hero__stat strong { color: #1F2937; font-weight: 600; }
.kb-portal-hero__stat-divider { color: #D1D5DB; }

/* Search wrap — centers the search form in the hero */
.kb-portal-search-wrap {
    max-width: 640px;
    margin: 0 auto;
}

/* Search bar inside hero — use Bootstrap form-control + system btn-primary.
 * We only define structural sizing here; colors are inherited from the
 * Perfex/Bootstrap `.btn.btn-primary` class. */
.kb-portal-hero .kb-portal-search .form-control {
    border-radius: 4px 0 0 4px;
    border: 1px solid #D1D5DB;
    border-right: 0;
    font-size: 15px;
    height: 46px;
    padding: 0 16px;
    box-shadow: none;
    background: #FFFFFF;
    color: #111827;
}
.kb-portal-hero .kb-portal-search .form-control:focus {
    border-color: #84B6F9;
    outline: none;
    box-shadow: none;
}

.kb-portal-hero .kb-portal-search .btn {
    border-radius: 0 4px 4px 0;
    height: 46px;
    padding: 0 22px;
    font-size: 14px;
    font-weight: 500;
}

.kb-portal-hero .kb-portal-search {
    max-width: 640px;
    margin: 0 auto;
}

/* ================================================================= MAIN CONTENT WRAPPER */
.kb-portal-main-content {
    background: #F9FAFB;
}

/* ================================================================= SECTIONS */
.kb-portal-section {
    padding: 36px 24px;
    max-width: 1140px;
    margin: 0 auto;
}

.kb-portal-section--categories { padding-top: 40px; }
.kb-portal-section--lists      { padding-top: 8px; padding-bottom: 48px; }

.kb-portal-section__header {
    margin-bottom: 18px;
}

/* Section titles — same shape as admin `h4 tw-font-bold tw-text-neutral-800`
 * (small bold heading, no decorative underline, left-aligned). */
.kb-portal-section__title {
    font-size: 18px;
    font-weight: 700;
    color: #1F2937;          /* neutral-800 */
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    letter-spacing: -0.005em;
}
.kb-portal-section__title > i {
    color: #6B7280;          /* neutral-500 — muted icon next to title */
    font-size: 15px;
}


/* ================================================================= SPACE CARDS */
.kb-portal-card {
    --kb-card-accent: #2563EB;
    position: relative;
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    padding: 20px;
    text-decoration: none;
    color: #111827;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    height: 100%;
    min-height: 160px;
    overflow: hidden;
}
.kb-portal-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--kb-card-accent);
    opacity: 0;
    transition: opacity 0.18s ease;
}
.kb-portal-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(15,23,42,0.06);
    border-color: #D1D5DB;   /* neutral-300 */
    text-decoration: none;
    color: #111827;
}
.kb-portal-card:hover::before { opacity: 1; }

/* Icon wrap — neutral light tile, color comes from inline `style="color:..."`
 * set in the view. This keeps cards visually consistent across spaces
 * regardless of how vivid the user-chosen accent color is. */
.kb-portal-card__icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #F3F4F6;     /* neutral-100 */
    margin-bottom: 14px;
    font-size: 18px;
    line-height: 1;
}

.kb-portal-card__title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 4px;
    color: #111827;
    letter-spacing: -0.005em;
}

/* On hover, keep the title in the dark neutral so accent color stays
 * confined to the thin top border + arrow. Matches admin space cards. */
.kb-portal-card:hover .kb-portal-card__title {
    color: #111827;
}

.kb-portal-card__description {
    font-size: 13px;
    color: #6B7280;
    margin: 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Card body — fills remaining height */
.kb-portal-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Card footer — article count at the bottom + arrow */
.kb-portal-card__footer {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #F3F4F6;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.kb-portal-card__count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #9CA3AF;
    font-weight: 500;
}

.kb-portal-card__arrow {
    color: #D1D5DB;
    font-size: 12px;
    transition: transform 0.18s ease, color 0.18s ease;
}
.kb-portal-card:hover .kb-portal-card__arrow {
    transform: translateX(3px);
    color: var(--kb-card-accent);
}

/* Spaces grid — CSS grid for clean centered cards regardless of count */
.kb-portal-spaces-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 280px));
    gap: 20px;
    justify-content: center;
}
.kb-portal-spaces-grid > .kb-portal-card {
    width: 100%;
}

/* Other internal rows (popular + recent block) keep bootstrap behavior. */
.kb-portal-section--lists .row > [class*="col-"] {
    margin-bottom: 20px;
}

/* ================================================================= LIST CARDS (Popular + Recent) */
.kb-portal-list-card {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    padding: 20px;
    height: 100%;
}

.kb-portal-list-card__title {
    font-size: 15px;
    font-weight: 700;
    color: #1F2937;          /* neutral-800 — same as section titles */
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #F3F4F6;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: -0.005em;
}

/* Title icon next to "Populares" / "Recientes" — neutral muted, no vivid
 * red/green. Matches the admin pattern of monochrome heading icons. */
.kb-portal-list-card__title-icon {
    color: #9CA3AF;          /* neutral-400 */
    font-size: 13px;
}

.kb-portal-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.kb-portal-list__item {
    border-bottom: 1px solid #F3F4F6;
}
.kb-portal-list__item:last-child { border-bottom: 0; }

.kb-portal-list__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 6px;
    color: #374151;
    text-decoration: none;
    border-radius: 6px;
    transition: background 0.12s ease, color 0.12s ease;
}
.kb-portal-list__link:hover,
.kb-portal-list__link:focus {
    background: #F9FAFB;     /* neutral hover, no blue tint */
    color: #1F2937;
    text-decoration: none;
}

.kb-portal-list__icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #F3F4F6;
    border-radius: 6px;
    color: #6B7280;
    font-size: 12px;
}
.kb-portal-list__link:hover .kb-portal-list__icon {
    background: #E5E7EB;     /* darker neutral, not vivid blue */
    color: #4B5563;
}

.kb-portal-list__text {
    flex: 1;
    min-width: 0;
    font-size: 13.5px;
}
.kb-portal-list__title-text {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #111827;
    font-weight: 500;
}
.kb-portal-list__link:hover .kb-portal-list__title-text { color: #1F2937; }

.kb-portal-list__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-size: 11px;
    color: #9CA3AF;
}

.kb-portal-list__chip {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.6;
}

.kb-portal-list__time { color: #9CA3AF; }

.kb-portal-list__chevron {
    flex-shrink: 0;
    color: #D1D5DB;
    font-size: 10px;
    transition: color 0.12s ease, transform 0.12s ease;
}
.kb-portal-list__link:hover .kb-portal-list__chevron {
    color: #6B7280;
    transform: translateX(2px);
}

/* Stack the two cards on small screens */
@media (max-width: 767px) {
    .kb-portal-section--lists .col-md-6 + .col-md-6 { margin-top: 16px; }
}

/* ================================================================= POPULAR */
.kb-portal-popular {
    margin: 0;
    padding: 0;
}

.kb-portal-popular__item {
    padding: 10px 0;
    border-bottom: 1px solid #F3F4F6;
    list-style: none;
}

.kb-portal-popular__item:last-child { border-bottom: 0; }

.kb-portal-popular__item a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #374151;
    font-size: 14px;
    text-decoration: none;
}

.kb-portal-popular__item a:hover {
    color: #2563EB;
    text-decoration: none;
}

/* Popular grid — used in portal landing */
.kb-portal-popular-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kb-portal-popular-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    color: #374151;
    font-size: 14px;
    text-decoration: none;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.kb-portal-popular-item:hover {
    background: #EFF6FF;
    border-color: #BFDBFE;
    color: #2563EB;
    text-decoration: none;
}

.kb-portal-popular-item > i:first-child {
    color: #9CA3AF;
    flex-shrink: 0;
}

.kb-portal-popular-item > span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kb-portal-popular-item__arrow {
    color: #D1D5DB;
    flex-shrink: 0;
    font-size: 11px;
    transition: color 0.12s ease;
}

.kb-portal-popular-item:hover .kb-portal-popular-item__arrow {
    color: #2563EB;
}

/* ================================================================= TOP NAV BAR */
.kb-portal-topnav {
    background: #FFFFFF;
    border-bottom: 1px solid #E5E7EB;
    padding: 0;
    height: 52px;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
}

.kb-portal-topnav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.kb-portal-topnav__brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    text-decoration: none;
}

.kb-portal-topnav__brand i {
    color: #2563EB;
    font-size: 18px;
}

.kb-portal-topnav__brand:hover { color: #2563EB; text-decoration: none; }

.kb-portal-topnav__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #6B7280;
    text-decoration: none;
}

.kb-portal-topnav__link:hover { color: #2563EB; text-decoration: none; }

/* ================================================================= EMPTY STATE */
.kb-portal-empty {
    padding: 64px 24px;
    color: #9CA3AF;
    text-align: center;
}

.kb-portal-empty i { font-size: 48px; margin-bottom: 16px; display: block; color: #D1D5DB; }
.kb-portal-empty p { font-size: 15px; margin: 0 0 20px; color: #6B7280; }

.kb-portal-empty__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    background: #2563EB;
    color: #fff;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

.kb-portal-empty__btn:hover { background: #1d4ed8; color: #fff; text-decoration: none; }

/* ================================================================= SPACE HEADER
 * Admin-style header pattern: breadcrumb on top, big title + description
 * on the left, action button ("Volver") on the right. Neutral palette
 * matches the admin `space_permissions.php` layout. The user-chosen
 * space color is plumbed only through the 3px top border (inline) and
 * the sidebar active-item border via --kb-space-accent. */
.kb-portal-space-header {
    background: #FFFFFF;
    border-bottom: 1px solid #E5E7EB;
    padding: 18px 0 22px;
}

/* ---------- Breadcrumb (shared between portal_space + portal_article) */
.kb-portal-crumbs {
    margin: 0 0 14px;
}
.kb-portal-crumbs__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 13px;
    line-height: 1.4;
}
.kb-portal-crumbs__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #6B7280;          /* neutral-500 */
    min-width: 0;
}
.kb-portal-crumbs__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #6B7280;          /* neutral-500 */
    text-decoration: none;
    transition: color 0.12s ease;
}
.kb-portal-crumbs__link:hover,
.kb-portal-crumbs__link:focus {
    color: #1F2937;          /* neutral-800 */
    text-decoration: none;
}
.kb-portal-crumbs__link > i { font-size: 11px; color: #9CA3AF; }
.kb-portal-crumbs__sep {
    color: #D1D5DB;          /* neutral-300 — muted divider */
    font-size: 9px;
    display: inline-flex;
    align-items: center;
}
.kb-portal-crumbs__item--active {
    color: #1F2937;          /* neutral-800 — active crumb is text only */
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60ch;
}

/* ---------- Page header row (title left, actions right) — mirrors the admin
 * `tw-flex tw-items-center tw-justify-between` layout used in admin headers. */
.kb-portal-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.kb-portal-page-header__main {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex: 1 1 auto;
}
.kb-portal-page-header__text {
    min-width: 0;
}
.kb-portal-page-header__title {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    color: #1F2937;          /* neutral-800 */
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.kb-portal-page-header__subtitle {
    margin: 4px 0 0;
    font-size: 13px;
    color: #6B7280;          /* neutral-500 */
}
.kb-portal-page-header__actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Icon chip — neutral tile + muted icon. Mirror of `.kb-portal-card__icon-wrap`
 * from the landing. The icon's color is the muted neutral-500 (not the user's
 * accent), so vivid space colors don't blow up the surface. */
.kb-portal-space-header__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: #F3F4F6;     /* neutral-100 */
    border-radius: 10px;
    flex-shrink: 0;
    color: #6B7280;          /* neutral-500 — drives the <i>/emoji */
}
.kb-portal-space-header__icon i { color: inherit; }

/* Badge — fully neutral. No vivid space-color text. */
.kb-portal-space-header__count {
    font-size: 12px;
    color: #6B7280;          /* neutral-500 */
    font-weight: 500;
    background: #F3F4F6;     /* neutral-100 */
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

/* "Volver" button — relies on Bootstrap's `btn btn-default`. We only add
 * the icon spacing here so the layout stays consistent with admin buttons. */
.kb-portal-btn-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.kb-portal-btn-back i { font-size: 12px; }

/* ================================================================= SUBHEADER (article + search pages)
 * On the article page the subheader hosts: breadcrumb on the left,
 * "Volver" btn-default on the right — same admin-style pattern as
 * `.kb-portal-space-header`. The search page keeps its single-column
 * variant via `.kb-portal-subheader--search`. */
.kb-portal-subheader {
    background: #FFFFFF;
    border-bottom: 1px solid #E5E7EB;
    padding: 14px 0;
}

/* Article subheader uses a flex row that aligns the breadcrumb (left)
 * with the "Volver" button (right). The breadcrumb's own `margin-bottom`
 * is neutralized here so the row stays vertically centered. */
.kb-portal-subheader > .kb-portal-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.kb-portal-subheader .kb-portal-crumbs {
    margin: 0;
    min-width: 0;
    flex: 1 1 auto;
}
.kb-portal-subheader__actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Search page keeps the legacy stacked layout (search field below crumbs). */
.kb-portal-subheader--search > .kb-portal-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

.kb-portal-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #6B7280;
    text-decoration: none;
    font-weight: 500;
    width: fit-content;
}

.kb-portal-back:hover { color: #2563EB; text-decoration: none; }

.kb-portal-subheader__title {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    color: #111827;
}

.kb-portal-subheader .kb-portal-search { max-width: 720px; }

.kb-portal-subheader .kb-portal-search .form-control {
    height: 46px;
    border-radius: 8px 0 0 8px;
    font-size: 15px;
    border-color: #D1D5DB;
}

.kb-portal-subheader .kb-portal-search .form-control:focus {
    border-color: #2563EB;
    outline: none;
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

.kb-portal-subheader .kb-portal-search .kb-portal-search-btn {
    height: 46px;
    border-radius: 0 8px 8px 0;
    background: #2563EB;
    color: #fff;
    border: 1px solid #2563EB;
    padding: 0 20px;
    font-weight: 500;
}

.kb-portal-subheader .kb-portal-search .kb-portal-search-btn:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
}

/* ================================================================= SEARCH RESULTS PAGE */
.kb-portal-search-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 28px 24px 80px;
}

/* When inside the container, override max-width */
.kb-portal-search-page .kb-portal-container {
    max-width: 100%;
    padding: 0;
}

.kb-search-meta {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #E5E7EB;
}

.kb-search-meta__count {
    margin: 0;
    font-size: 14px;
    color: #6B7280;
}

.kb-search-meta__count strong { color: #111827; }

.kb-search-meta__num {
    display: inline-block;
    background: #F3F4F6;
    color: #374151;
    font-size: 12px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 10px;
    margin-left: 6px;
    vertical-align: middle;
}

.kb-search-meta__count--empty {
    color: #EF4444;
}

.kb-search-meta__count--empty strong { color: #B91C1C; }

/* ================================================================= SPACE BODY + LAYOUT */
.kb-portal-space-body {
    background: #F9FAFB;
    min-height: calc(100vh - 180px);
    padding: 32px 0 64px;
}

.kb-portal-space-layout {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}

/* Sidebar */
.kb-portal-sidebar {
    width: 260px;
    flex-shrink: 0;
    position: sticky;
    top: 24px;
}

.kb-portal-sidebar__toggle {
    margin-bottom: 12px;
    text-align: left;
}

/* Neutral counter inside the mobile sidebar toggle. Replaces the previous
 * inline `style="background:$space_color"` to keep the toggle in the
 * Perfex-admin palette. */
.kb-portal-sidebar__toggle-badge {
    margin-left: 6px;
    background: #E5E7EB;     /* neutral-200 */
    color: #374151;          /* neutral-700 */
    font-weight: 600;
}

.kb-portal-sidebar__inner {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    overflow: hidden;
}

/* Sidebar section label — small uppercase eyebrow above the article list. */
.kb-portal-sidebar__section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6B7280;          /* neutral-500 */
    padding: 14px 16px 10px;
    border-bottom: 1px solid #F3F4F6;
}
.kb-portal-sidebar__section-label i { color: #9CA3AF; }

.kb-portal-sidebar__empty {
    padding: 20px 16px;
    font-size: 13px;
    color: #9CA3AF;
    text-align: center;
    margin: 0;
}

.kb-portal-sidebar__list {
    padding: 6px;
    margin: 0;
    list-style: none;
}

.kb-portal-sidebar__item {
    border-radius: 6px;
    margin-bottom: 2px;
}

.kb-portal-sidebar__item a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    font-size: 14px;
    color: #374151;          /* neutral-700 */
    text-decoration: none;
    border-radius: 6px;
    transition: background 0.12s ease, color 0.12s ease;
    line-height: 1.3;
}

.kb-portal-sidebar__item-icon {
    color: #9CA3AF;          /* neutral-400 */
    font-size: 13px;
    flex-shrink: 0;
    transition: color 0.12s ease;
}

.kb-portal-sidebar__item a > span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kb-portal-sidebar__item-arrow {
    color: #9CA3AF;          /* neutral-400 — visible on active item */
    font-size: 10px;
    flex-shrink: 0;
}

/* Hover — neutral surface, no blue tint. Same hover used in landing's list cards. */
.kb-portal-sidebar__item a:hover {
    background: #F9FAFB;     /* neutral-50 */
    color: #1F2937;          /* neutral-800 */
    text-decoration: none;
}

.kb-portal-sidebar__item a:hover .kb-portal-sidebar__item-icon {
    color: #4B5563;          /* neutral-600 */
}

/* Active item — neutral background with a thin 3px border-left in the space
 * accent color (set via --kb-space-accent on .kb-portal-space-layout). This is
 * the only place the user-chosen color appears in the sidebar. */
.kb-portal-sidebar__item.is-active a {
    background: #F3F4F6;     /* neutral-100 */
    color: #1F2937;          /* neutral-800 */
    font-weight: 600;
    border-left: 3px solid var(--kb-space-accent, #2563EB);
    border-radius: 0 6px 6px 0;
    padding-left: 7px;       /* compensates for 3px border */
}

.kb-portal-sidebar__item.is-active .kb-portal-sidebar__item-icon {
    color: #4B5563;          /* neutral-600 — no vivid accent on the icon */
}

/* Hierarchical tree additions — folders + nested children */
.kb-portal-sidebar__row {
    display: flex;
    align-items: center;
    gap: 0;
}
.kb-portal-sidebar__chevron {
    background: transparent;
    border: 0;
    color: #9CA3AF;
    font-size: 9px;
    width: 18px;
    height: 28px;
    flex-shrink: 0;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, color 0.12s ease;
}
.kb-portal-sidebar__chevron:hover { color: #4b5563; }
.kb-portal-sidebar__chevron--spacer { cursor: default; }
.kb-portal-sidebar__item.is-collapsed > .kb-portal-sidebar__row > .kb-portal-sidebar__chevron i {
    transform: rotate(-90deg);
}
.kb-portal-sidebar__item.is-collapsed > .kb-portal-sidebar__list { display: none; }

.kb-portal-sidebar__link {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    font-size: 14px;
    color: #374151;          /* neutral-700 */
    text-decoration: none;
    border-radius: 6px;
    transition: background 0.12s ease, color 0.12s ease;
    line-height: 1.3;
    min-width: 0;
}
/* Hover — neutral, no blue tint (matches the flat sidebar variant above). */
.kb-portal-sidebar__link:hover {
    background: #F9FAFB;     /* neutral-50 */
    color: #1F2937;          /* neutral-800 */
    text-decoration: none;
}
.kb-portal-sidebar__link:hover .kb-portal-sidebar__item-icon { color: #4B5563; }
.kb-portal-sidebar__link--inert {
    cursor: default;
    color: #6b7280;
}
.kb-portal-sidebar__link--inert:hover {
    background: transparent;
    color: #6b7280;
}
/* Active link — neutral surface + 3px left border in --kb-space-accent.
 * Same pattern as the flat sidebar variant. */
.kb-portal-sidebar__item.is-active > .kb-portal-sidebar__row > .kb-portal-sidebar__link {
    background: #F3F4F6;     /* neutral-100 */
    color: #1F2937;          /* neutral-800 */
    font-weight: 600;
    border-left: 3px solid var(--kb-space-accent, #2563EB);
    border-radius: 0 6px 6px 0;
    padding-left: 7px;
}
.kb-portal-sidebar__item.is-active > .kb-portal-sidebar__row > .kb-portal-sidebar__link .kb-portal-sidebar__item-icon {
    color: #4B5563;          /* neutral-600 — no vivid accent */
}
.kb-portal-sidebar__item.is-folder > .kb-portal-sidebar__row > .kb-portal-sidebar__link {
    font-weight: 500;
    color: #1f2937;
}
.kb-portal-sidebar__list--depth-1,
.kb-portal-sidebar__list--depth-2,
.kb-portal-sidebar__list--depth-3,
.kb-portal-sidebar__list--depth-4,
.kb-portal-sidebar__list--depth-5 {
    padding-left: 18px;
}

/* ----------------------------------------------------------------------------
 * KB-folder scope (portal adaptation of the admin "scope to a Knowledge Base"
 * behaviour). A KB-folder is a folder whose icon contains `fa-book`; PHP tags
 * its <li> with `.is-kb` + `data-kb-is-kb="1"`. Unlike the admin (which keys
 * off `body[data-kb-scope]`), the portal lives inside the client theme, so we
 * key off the sidebar container `#kb-portal-sidebar-nav[data-kb-scope]` to stay
 * encapsulated and avoid colliding with the theme's <body>.
 * ------------------------------------------------------------------------- */

/* A FIRST-LEVEL KB-folder OUTSIDE of scope reads as a closed "card" that
 * invites entering, NOT as an expandable folder. Hide its chevron and its child
 * <ul>; give the row a pointer cursor and a trailing → arrow hint (mirrors the
 * admin, where a non-scoped KB hides its chevron + children).
 *
 * Scoped to depth-0 ONLY (`.kb-portal-sidebar__list--depth-0 > …`): a KB-folder
 * nested deeper toggles like a normal folder, matching the JS gate in
 * `isClosedKbCard()` — only top-level KB-folders are scopeable, so only they
 * get the closed-card treatment. */
#kb-portal-sidebar-nav .kb-portal-sidebar__list--depth-0
    > .kb-portal-sidebar__item.is-kb:not(.is-kb-scoped)
    > .kb-portal-sidebar__row > .kb-portal-sidebar__chevron {
    visibility: hidden;
    width: 0;
    pointer-events: none;
}
#kb-portal-sidebar-nav .kb-portal-sidebar__list--depth-0
    > .kb-portal-sidebar__item.is-kb:not(.is-kb-scoped)
    > .kb-portal-sidebar__list {
    display: none !important;
}
/* The KB row itself is clickable (enters scope). Render the inert label as a
 * pointer surface and reveal a → hint on the right. */
#kb-portal-sidebar-nav .kb-portal-sidebar__list--depth-0
    > .kb-portal-sidebar__item.is-kb:not(.is-kb-scoped)
    > .kb-portal-sidebar__row > .kb-portal-sidebar__link--inert {
    cursor: pointer;
    color: #374151;          /* neutral-700 — reads as actionable, not inert */
    font-weight: 600;
}
#kb-portal-sidebar-nav .kb-portal-sidebar__list--depth-0
    > .kb-portal-sidebar__item.is-kb:not(.is-kb-scoped)
    > .kb-portal-sidebar__row > .kb-portal-sidebar__link--inert:hover {
    background: #F9FAFB;     /* neutral-50 */
    color: #1F2937;          /* neutral-800 */
}
#kb-portal-sidebar-nav .kb-portal-sidebar__list--depth-0
    > .kb-portal-sidebar__item.is-kb:not(.is-kb-scoped)
    > .kb-portal-sidebar__row > .kb-portal-sidebar__link--inert > span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* The KB book icon uses the same neutral grey as every other tree icon, so a
 * KB-folder does not stand out in a different colour from the normal folders
 * (the "enter" affordance is carried by the book glyph + the → arrow, not by
 * colour). Pedido del usuario: mismo gris para que no se vea tan diferente. */
#kb-portal-sidebar-nav .kb-portal-sidebar__list--depth-0
    > .kb-portal-sidebar__item.is-kb:not(.is-kb-scoped)
    > .kb-portal-sidebar__row > .kb-portal-sidebar__link--inert .kb-portal-sidebar__item-icon {
    color: #9CA3AF;          /* neutral-400 — igual que .kb-portal-sidebar__item-icon */
}
/* Trailing → "enter" hint, injected via ::after so no markup change is needed.
 * Uses the Unicode RIGHTWARDS ARROW (U+2192) rather than a Font Awesome glyph
 * so it renders with the portal's system font stack and never depends on the
 * exact FA web-font family name being loaded. */
#kb-portal-sidebar-nav .kb-portal-sidebar__list--depth-0
    > .kb-portal-sidebar__item.is-kb:not(.is-kb-scoped)
    > .kb-portal-sidebar__row > .kb-portal-sidebar__link--inert::after {
    content: "\2192";        /* → rightwards arrow */
    font-size: 13px;
    line-height: 1;
    color: #9CA3AF;          /* neutral-400 */
    margin-left: auto;
    flex-shrink: 0;
    transition: transform 0.12s ease, color 0.12s ease;
}
#kb-portal-sidebar-nav .kb-portal-sidebar__list--depth-0
    > .kb-portal-sidebar__item.is-kb:not(.is-kb-scoped)
    > .kb-portal-sidebar__row:hover > .kb-portal-sidebar__link--inert::after {
    color: #4B5563;          /* neutral-600 */
    transform: translateX(2px);
}

/* When a scope is active, hide every FIRST-LEVEL tree node except the scoped
 * KB. First level = direct children of the depth-0 root <ul>. The scoped KB
 * (.is-kb-scoped) and its full subtree stay visible. */
#kb-portal-sidebar-nav[data-kb-scope]
    .kb-portal-sidebar__list--depth-0 > .kb-portal-sidebar__item {
    display: none;
}
#kb-portal-sidebar-nav[data-kb-scope]
    .kb-portal-sidebar__list--depth-0 > .kb-portal-sidebar__item.is-kb-scoped {
    display: block;
}

/* Inside scope, the active KB behaves like a normal tree node again: its
 * chevron is interactive and its subtree shows (subject to is-collapsed on the
 * inner folders, which keeps working untouched). */
#kb-portal-sidebar-nav .kb-portal-sidebar__item.is-kb.is-kb-scoped
    > .kb-portal-sidebar__row > .kb-portal-sidebar__chevron {
    visibility: visible;
    width: 18px;
    pointer-events: auto;
}
#kb-portal-sidebar-nav .kb-portal-sidebar__item.is-kb.is-kb-scoped:not(.is-collapsed)
    > .kb-portal-sidebar__list {
    display: block;
}

/* Breadcrumb: when scoped, the space crumb becomes an actionable "exit scope"
 * control. JS toggles `.is-link` on #kb-portal-crumb-space and wires the click;
 * here we just make the label look/behave like the root crumb link. */
.kb-portal-crumbs__item.is-link .kb-portal-crumbs__space-label {
    color: #6B7280;          /* neutral-500 — same as other crumb links */
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-weight: 400;
    transition: color 0.12s ease;
}
.kb-portal-crumbs__item.is-link .kb-portal-crumbs__space-label:hover,
.kb-portal-crumbs__item.is-link .kb-portal-crumbs__space-label:focus {
    color: #1F2937;          /* neutral-800 */
    text-decoration: none;
    outline: none;
}

/* Content area */
.kb-portal-space-content {
    flex: 1;
    min-width: 0;
}

/* ================================================================= NODE PREVIEW (active article placeholder) */
.kb-portal-node-preview {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 36px;
}

.kb-portal-node-preview__title {
    font-size: 24px;
    font-weight: 700;
    color: #1F2937;          /* neutral-800 */
    margin: 0 0 12px;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.kb-portal-node-preview__excerpt {
    font-size: 15px;
    color: #6B7280;          /* neutral-500 */
    margin: 0 0 24px;
    line-height: 1.6;
}

/* Structural sizing only — visual styling comes from `.btn.btn-primary`
 * applied via class in the view (same decision as portal_landing.php). */
.kb-portal-node-preview__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.kb-portal-node-preview__btn i { font-size: 13px; }

/* ================================================================= SPACE EMPTY STATE
 * Calm "pick an article" surface. The big icon lives in a neutral circle —
 * same pattern as `.kb-portal-card__icon-wrap` on the landing — so the
 * space's vivid color never floods this view. */
.kb-portal-space-empty {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 48px 40px;
    text-align: center;
}

/* Big neutral icon tile (round). Icon color is inherited muted neutral. */
.kb-portal-space-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: #F3F4F6;     /* neutral-100 */
    border-radius: 50%;
    margin-bottom: 18px;
    color: #6B7280;          /* neutral-500 — drives the inner <i>/emoji */
}
.kb-portal-space-empty__icon i { color: inherit; }

.kb-portal-space-empty__title {
    font-size: 20px;
    font-weight: 700;
    color: #1F2937;          /* neutral-800 */
    margin: 0 0 8px;
    letter-spacing: -0.005em;
}

.kb-portal-space-empty__desc {
    font-size: 14px;
    color: #6B7280;          /* neutral-500 */
    margin: 0 auto 28px;
    max-width: 420px;
}

.kb-portal-space-empty__articles {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 480px;
    margin: 0 auto;
    text-align: left;
}

/* List-group style: white surface, fine border, hover lands on neutral gray.
 * No blue tint anywhere — same restraint as admin list-groups. */
.kb-portal-space-empty__article-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    color: #374151;          /* neutral-700 */
    font-size: 14px;
    text-decoration: none;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.kb-portal-space-empty__article-link:hover {
    background: #F9FAFB;     /* neutral-50 */
    border-color: #D1D5DB;   /* neutral-300 */
    color: #1F2937;          /* neutral-800 */
    text-decoration: none;
}

.kb-portal-space-empty__article-link > i:first-child { color: #9CA3AF; }
.kb-portal-space-empty__article-link > span          { flex: 1; }
.kb-portal-space-empty__article-link > i:last-child  {
    color: #D1D5DB;
    font-size: 11px;
    transition: color 0.12s ease, transform 0.12s ease;
}
.kb-portal-space-empty__article-link:hover > i:last-child {
    color: #6B7280;
    transform: translateX(2px);
}

/* ================================================================= RESPONSIVE SPACE */
@media (max-width: 991px) {
    .kb-portal-space-layout { flex-direction: column; gap: 20px; }
    .kb-portal-sidebar { width: 100%; position: static; }
    .kb-portal-sidebar__inner { border-radius: 8px; }
    .kb-portal-node-preview { padding: 24px; }
    .kb-portal-space-empty { padding: 32px 20px; }
}

@media (max-width: 767px) {
    .kb-portal-page-header { align-items: flex-start; }
    .kb-portal-page-header__actions {
        width: 100%;
        justify-content: flex-start;
        margin-top: 4px;
    }
    .kb-portal-page-header__title { font-size: 20px; }
    .kb-portal-sidebar__inner { display: none; }
    .kb-portal-sidebar__inner.in { display: block; }
    .kb-portal-sidebar__toggle { display: block !important; }
    .kb-portal-subheader > .kb-portal-container { align-items: flex-start; }
    .kb-portal-subheader__actions { width: 100%; justify-content: flex-start; }
}

/* ================================================================= ARTICLE */
.kb-portal-article-layout {
    display: flex;
    gap: 40px;
    padding: 32px 24px 24px;
    max-width: 1140px;
    margin: 0 auto;
    align-items: flex-start;
}

.kb-portal-article {
    flex: 1;
    min-width: 0;
    max-width: 820px;
}

/* "Paper" card variant — wraps the whole article + related.
 * The 3px top border consumes --kb-space-accent (plumbed by the view on the
 * `.kb-portal-article-layout` wrapper). This is the ONLY place on the article
 * screen where the space color appears, mirroring the restraint used in the
 * `.kb-portal-card` landing tiles and the `.kb-portal-space-header` top bar. */
.kb-portal-article--card {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-top: 3px solid var(--kb-space-accent, #E5E7EB);
    border-radius: 12px;
    padding: 40px 48px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

@media (max-width: 767px) {
    .kb-portal-article--card { padding: 24px 20px; }
}

/* Top breadcrumb / back-bar row */
.kb-portal-article-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

/* Space chip — fully neutral. Replaces the previous inline-styled chip that
 * received `background: $space_color18; color: $space_color;` from the view.
 * Same restraint as `.kb-portal-space-header__count` and the search-results
 * space pill: neutral-100 surface, neutral-500 text, no vivid color flood. */
.kb-portal-breadcrumb__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    background: #F3F4F6;     /* neutral-100 */
    color: #374151;          /* neutral-700 */
    border: 1px solid #E5E7EB;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.kb-portal-breadcrumb__chip:hover,
.kb-portal-breadcrumb__chip:focus {
    background: #E5E7EB;     /* neutral-200 */
    border-color: #D1D5DB;   /* neutral-300 */
    color: #1F2937;          /* neutral-800 */
    text-decoration: none;
}
.kb-portal-breadcrumb__chip i {
    font-size: 10px;
    color: #6B7280;          /* neutral-500 — muted icon, never vivid */
}

.kb-portal-article__title {
    font-size: 32px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 14px;
    line-height: 1.25;
    letter-spacing: -0.015em;
}

.kb-portal-article__meta {
    font-size: 13px;
    color: #9CA3AF;
    margin: 0 0 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.kb-portal-article__meta-item { display: inline-flex; align-items: center; gap: 6px; }
.kb-portal-article__meta-dot { color: #D1D5DB; }

.kb-portal-article__divider {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #E5E7EB 20%, #E5E7EB 80%, transparent 100%);
    margin: 0 0 28px;
}

.kb-portal-article__content {
    font-size: 16px;
    line-height: 1.75;
    color: #1F2937;
}

.kb-portal-article__content h2 { font-size: 22px; margin-top: 36px; font-weight: 700; color: #1F2937; }
.kb-portal-article__content h3 { font-size: 18px; margin-top: 28px; font-weight: 600; color: #1F2937; }
.kb-portal-article__content p  { margin-bottom: 16px; }

/* Body links — muted neutral with underline on hover (admin-style restraint).
 * `.kb-mention` chips below override this with their own neutral chip style. */
.kb-portal-article__content a {
    color: #374151;          /* neutral-700 */
    text-decoration: underline;
    text-decoration-color: #D1D5DB;
    text-underline-offset: 2px;
    transition: color 0.12s ease, text-decoration-color 0.12s ease;
}
.kb-portal-article__content a:hover,
.kb-portal-article__content a:focus {
    color: #1F2937;          /* neutral-800 */
    text-decoration-color: #9CA3AF;
}

.kb-portal-article__content code {
    background: #F3F4F6;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 14px;
    color: #1F2937;
}
.kb-portal-article__content pre {
    background: #1F2937;
    color: #F9FAFB;
    padding: 20px;
    border-radius: 8px;
    overflow-x: auto;
}
/* Blockquote — neutral surface + neutral border. Was the only place left
 * with the old `#BFDBFE` + `#EFF6FF` blue flood; brought in line with the
 * rest of the article body. */
.kb-portal-article__content blockquote {
    border-left: 4px solid #E5E7EB;
    padding: 10px 16px;
    margin: 0 0 16px;
    color: #6B7280;
    background: #F9FAFB;
    border-radius: 0 6px 6px 0;
}

/* @-mention chip rendered inline inside article content.
 * Tag shapes produced by the editor:
 *   <span class="kb-mention kb-mention--user">@name</span>      (legacy)
 *   <a class="kb-mention kb-mention--staff" href="...">@name</a>
 *   <a class="kb-mention kb-mention--node"  href="...">title</a>
 *
 * The portal renders them as a neutral pill instead of the old blue link,
 * so the article body stays calm. Hover lands on neutral-200 to keep the
 * affordance visible without re-introducing color flood. */
.kb-portal-article__content .kb-mention {
    display: inline-block;
    padding: 0 7px;
    background: #F3F4F6;     /* neutral-100 */
    color: #374151;          /* neutral-700 */
    border-radius: 4px;
    font-weight: 500;
    text-decoration: none;
    font-size: 0.95em;
    line-height: 1.5;
    transition: background 0.12s ease, color 0.12s ease;
}
.kb-portal-article__content .kb-mention:hover,
.kb-portal-article__content .kb-mention:focus {
    background: #E5E7EB;     /* neutral-200 */
    color: #1F2937;          /* neutral-800 */
    text-decoration: none;
}

/* ToC aside */
.kb-portal-toc-aside {
    width: 220px;
    flex-shrink: 0;
    position: sticky;
    top: 24px;
}

.kb-toc--portal {
    font-size: 13px;
    color: #6B7280;
}

.kb-toc--portal a {
    display: block;
    padding: 4px 0;
    color: #6B7280;
    text-decoration: none;
    border-left: 2px solid #E5E7EB;
    padding-left: 12px;
    transition: color 0.12s, border-color 0.12s;
}

/* TOC hover/active — neutral, no blue. The thin left border darkens
 * from neutral-200 to neutral-500 to mark the active heading. */
.kb-toc--portal a:hover,
.kb-toc--portal a.is-active {
    color: #1F2937;          /* neutral-800 */
    border-left-color: #6B7280; /* neutral-500 */
}

/* Related articles */
.kb-portal-related {
    margin-top: 48px;
    padding-top: 28px;
    border-top: 1px solid #F3F4F6;
}

.kb-portal-related__title {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 14px;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: -0.005em;
}
.kb-portal-related__title i { color: #6B7280; font-size: 13px; }

.kb-portal-related__list { padding: 0; margin: 0; list-style: none; }

.kb-portal-related__list li {
    list-style: none;
    margin: 0;
}

.kb-portal-related__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 8px;
    color: #374151;
    font-size: 14px;
    text-decoration: none;
    border-radius: 6px;
    transition: background 0.12s ease, color 0.12s ease;
}
/* Related-articles list — same hover treatment as `.kb-portal-list__link`
 * on the landing: neutral background, neutral-800 text, no blue tint. */
.kb-portal-related__link:hover,
.kb-portal-related__link:focus {
    background: #F9FAFB;
    color: #1F2937;          /* neutral-800 */
    text-decoration: none;
}

.kb-portal-related__icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #F3F4F6;
    border-radius: 6px;
    color: #6B7280;
    font-size: 12px;
    transition: background 0.12s ease, color 0.12s ease;
}
.kb-portal-related__link:hover .kb-portal-related__icon {
    background: #E5E7EB;     /* neutral-200 — darker neutral, not vivid blue */
    color: #4B5563;          /* neutral-600 */
}

.kb-portal-related__text { flex: 1; min-width: 0; font-weight: 500; }

.kb-portal-related__chevron {
    flex-shrink: 0;
    color: #D1D5DB;
    font-size: 10px;
    transition: transform 0.12s ease, color 0.12s ease;
}
.kb-portal-related__link:hover .kb-portal-related__chevron {
    color: #6B7280;          /* neutral-500 — quiet but visible */
    transform: translateX(2px);
}

/* Spacer between the article card and the page footer */
.kb-portal-article-spacer {
    height: 60px;
    background: transparent;
}

/* ================================================================= FEEDBACK */
.kb-portal-feedback {
    margin-top: 48px;
    padding: 28px 24px;
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    text-align: center;
}

.kb-portal-feedback h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 16px;
    color: #374151;
}

.kb-portal-feedback__buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.kb-portal-feedback__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 15px;
    border: 1px solid #D1D5DB;
    background: #FFFFFF;
    cursor: pointer;
    color: #374151;
    transition: background 0.12s, border-color 0.12s;
}

.kb-portal-feedback__btn:hover { background: #EFF6FF; border-color: #BFDBFE; color: #2563EB; }

.kb-portal-feedback__reason {
    margin-top: 16px;
}

.kb-portal-feedback__reason textarea {
    width: 100%;
    max-width: 480px;
}

.kb-portal-feedback__thanks {
    margin-top: 12px;
    color: #10B981;
    font-weight: 600;
}

/* ================================================================= SEARCH RESULTS */
.kb-portal-search-results {
    list-style: none;
    padding: 0;
    margin: 0;
}

.kb-portal-search-results__item {
    margin-bottom: 8px;
}

.kb-portal-search-results__link {
    display: block;
    padding: 18px 20px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.kb-portal-search-results__link:hover,
.kb-portal-search-results__link:focus {
    border-color: #2563EB;
    box-shadow: 0 2px 10px rgba(37,99,235,.1);
    text-decoration: none;
    color: inherit;
}

.kb-portal-search-results__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.kb-portal-search-results__title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    line-height: 1.4;
}

.kb-portal-search-results__link:hover .kb-portal-search-results__title {
    color: #2563EB;
}

.kb-portal-search-results__space {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 500;
    color: #6B7280;
    background: #F3F4F6;
    padding: 3px 9px;
    border-radius: 20px;
    white-space: nowrap;
}

.kb-portal-search-results__space i {
    font-size: 10px;
}

.kb-portal-search-results__snippet {
    font-size: 13.5px;
    color: #6B7280;
    margin: 0;
    line-height: 1.55;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.kb-portal-search-results__snippet mark {
    background: #FEF3C7;
    padding: 0 2px;
    border-radius: 2px;
}

/* Responsive search page */
@media (max-width: 640px) {
    .kb-portal-search-page { padding: 20px 16px 60px; }
    .kb-portal-search-results__header { flex-direction: column; gap: 6px; }
    .kb-portal-search-results__space { align-self: flex-start; }
}

/* ================================================================= FOOTER
 * Minimal centered branding strip. The previous "Volver al panel" action
 * was removed because every portal page exposes its own admin-style
 * "Volver" button in the header (next to the breadcrumb). Two
 * back-actions on the same screen was redundant — the footer now serves
 * only as a quiet brand mark. */
.kb-portal-footer {
    /* Pegado al borde inferior del viewport y al final del flujo. Como
       body.kb-portal es flex-column con min-height:100vh, marcar el
       footer como `margin-top: auto` lo empuja al fondo cuando el
       contenido es corto, y queda al final del scroll cuando es largo.
       Antes flotaba a media pagina porque ni el shell flex ni el padre
       directo del footer aportaba el auto-margin. */
    flex: 0 0 auto;
    margin-top: auto;
    border-top: 1px solid #E5E7EB;
    background: #FFFFFF;
    padding: 14px 24px;
}
.kb-portal-footer__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.kb-portal-footer__brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #6B7280;          /* neutral-500 — quiet, no longer a heading */
    font-weight: 500;
    min-width: 0;
    text-align: center;
}
.kb-portal-footer__brand i {
    color: #9CA3AF;          /* neutral-400 */
    font-size: 13px;
    line-height: 1;
}
.kb-portal-footer__brand-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .kb-portal-footer { padding: 12px 16px; }
    .kb-portal-footer__brand { font-size: 11px; gap: 6px; }
}

/* ================================================================= RESPONSIVE */
@media (max-width: 767px) {
    .kb-portal-hero { padding: 36px 16px 28px; }
    .kb-portal-hero__title { font-size: 22px; margin-bottom: 16px; }
    .kb-portal-article-layout { flex-direction: column; padding: 24px 16px; }
    .kb-portal-toc-aside { display: none !important; }
    .kb-portal-section { padding: 24px 16px; }
}

/* ============================================================================
 * PDF inline link + preview modal (kb-pdf-preview.js opens the iframe modal)
 * ========================================================================== */
/* Inline PDF link — same neutral treatment as the rest of the article body.
 * The red PDF icon is kept as a universal visual signal (matches the admin
 * editor + Perfex's own PDF icons), but the surrounding text/hover lands on
 * neutral tones instead of the old `#2563EB` / `#EFF6FF` blue. */
.kb-pdf-link {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 2px 8px; border-radius: 4px;
    color: #374151;          /* neutral-700 */
    text-decoration: none; font-weight: 500;
    transition: background .12s ease, color .12s ease;
    cursor: pointer;
}
.kb-pdf-link:hover,
.kb-pdf-link:focus {
    background: #F3F4F6;     /* neutral-100 */
    color: #1F2937;          /* neutral-800 */
    text-decoration: none;
}
.kb-pdf-link > i { color: #DC2626; font-size: 14px; }
.kb-pdf-link > span { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }

body.kb-pdf-modal-open { overflow: hidden; }
.kb-pdf-modal {
    position: fixed; inset: 0; z-index: 10500;
    display: flex; align-items: center; justify-content: center;
}
.kb-pdf-modal[hidden] { display: none; }
.kb-pdf-modal__backdrop {
    position: absolute; inset: 0;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(2px);
    cursor: pointer;
}
.kb-pdf-modal__shell {
    position: relative;
    width: min(96vw, 1080px); height: min(94vh, 860px);
    background: #FFFFFF; border-radius: 10px; overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .35);
}
.kb-pdf-modal__header {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid #E5E7EB; background: #F9FAFB;
}
.kb-pdf-modal__title {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 600; color: #111827; min-width: 0;
}
.kb-pdf-modal__title > i { color: #DC2626; font-size: 16px; }
.kb-pdf-modal__name {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw;
}
.kb-pdf-modal__actions { display: inline-flex; align-items: center; gap: 4px; }
.kb-pdf-modal__btn {
    width: 32px; height: 32px;
    border: 0; border-radius: 6px;
    background: transparent; color: #4B5563;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 13px; text-decoration: none;
    transition: background .12s ease, color .12s ease;
}
.kb-pdf-modal__btn:hover,
.kb-pdf-modal__btn:focus { background: #E5E7EB; color: #111827; text-decoration: none; outline: none; }
.kb-pdf-modal__body { flex: 1; min-height: 0; background: #F3F4F6; }
.kb-pdf-modal__frame { display: block; width: 100%; height: 100%; border: 0; }

/* ============================================================================
 * PDF / Image embed inline (file-shortcut) — PORTAL
 * ----------------------------------------------------------------------------
 * Tarjeta que se incrusta en el flujo del articulo del portal cuando el nodo
 * es un file-shortcut (link_target #kbfile:ext). Replica el markup y la
 * estetica del admin (kb-admin.css) para que un PDF/imagen se vea igual en
 * ambos contextos: header con nombre + acciones (abrir nueva pestana,
 * descargar) y debajo el iframe del visor nativo con altura fija.
 * El helper que produce este markup es _kb_build_portal_file_shortcut_embed().
 * ========================================================================== */
.kb-pdf-embed {
    margin: 16px 0;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    overflow: hidden;
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}
.kb-pdf-embed__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #F8FAFC;
    border-bottom: 1px solid #E2E8F0;
}
.kb-pdf-embed__icon {
    color: #DC2626;
    font-size: 16px;
    flex: 0 0 auto;
}
.kb-pdf-embed__name {
    flex: 1 1 auto;
    font-size: 13px;
    font-weight: 500;
    color: #334155;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kb-pdf-embed__btn {
    background: transparent;
    border: 0;
    color: #64748B;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 120ms ease-out;
    text-decoration: none;
}
.kb-pdf-embed__btn:hover,
.kb-pdf-embed__btn:focus {
    background: #F1F5F9;
    color: #2563EB;
    text-decoration: none;
}
.kb-pdf-embed__frame {
    width: 100%;
    height: 600px;
    border: 0;
    display: block;
    background: #F5F5F5;
}

/* En lectura responsive: bajamos altura un poco en pantallas chicas */
@media (max-width: 768px) {
    .kb-pdf-embed__frame { height: 480px; }
}

/* Image embed inline (file shortcut tipo imagen) */
.kb-image-embed {
    margin: 16px 0;
    text-align: center;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    overflow: hidden;
}
.kb-image-embed__img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* ============================================== STAFF PREVIEW BANNER */
/* Aviso que ve un miembro del staff al previsualizar el portal (botón
   "Ver en portal" del árbol admin). No se muestra a clientes reales. */
.kb-portal-preview-banner {
    background: #FEF3C7;
    border-bottom: 1px solid #FDE68A;
    color: #92400E;
    font-size: 13px;
    padding: 10px 0;
}
.kb-portal-preview-banner .kb-portal-container {
    display: flex;
    align-items: center;
    gap: 8px;
}
.kb-portal-preview-banner i {
    color: #D97706;
}