/* Hide dark mode toggle button */
.md-header__option {
    display: none !important;
}

/* Make search button much smaller and compact */
.md-search__form {
    height: 1.8rem !important;
    width: 8rem !important;
    max-width: 8rem !important;
}

.md-search__input {
    font-size: 0.7rem !important;
    height: 1.8rem !important;
    padding-left: 1.8rem !important;
    padding-right: 0.5rem !important;
    border-radius: 0.2rem !important;
    line-height: 1.8rem !important;
}

.md-search__input::placeholder {
    font-size: 0.7rem !important;
}

/* Placeholder styling */

.md-search__icon {
    width: 1.8rem !important;
    height: 1.8rem !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1 !important;
}

.md-search__icon svg {
    width: 0.7rem !important;
    height: 0.7rem !important;
    margin: 0 !important;
}

/* Make the search container more compact */
.md-search {
    width: auto !important;
}

/* Style left TOC like Star Citizen Tools - clean and minimal */
.md-sidebar--primary {
    background: none !important;
    border: none !important;
    padding-right: 1rem !important;
    box-shadow: none !important;
}

.md-nav--primary .md-nav__title {
    color: rgb(157, 196, 216) !important;
    font-size: 0.7rem !important;
    font-weight: normal !important;
    padding: 0.3rem 0 !important;
    margin-bottom: 0.3rem !important;
    border-bottom: 1px solid rgb(25, 29, 31) !important;
    background: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.md-nav--primary .md-nav__list {
    background: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.md-nav--primary .md-nav__item {
    margin: 0.1rem 0 !important;
    background: none !important;
}

.md-nav--primary .md-nav__link {
    background: none !important;
    color: rgb(157, 196, 216) !important;
    font-size: 0.65rem !important;
    padding: 0.2rem 0.3rem !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.md-nav--primary .md-nav__link:hover {
    color: #4a9eff !important;
    background: none !important;
    box-shadow: none !important;
}

.md-nav--primary .md-nav__link--active {
    color: #4a9eff !important;
    background: none !important;
    font-weight: normal !important;
    box-shadow: none !important;
}

/* Style nested navigation items - clean */
.md-nav--primary .md-nav__item--nested .md-nav__link {
    font-weight: normal !important;
    color: rgb(157, 196, 216) !important;
    background: none !important;
    box-shadow: none !important;
}

.md-nav--primary .md-nav__item--nested .md-nav {
    padding-left: 0.3rem !important;
    border-left: 1px solid var(--fo-border-contrast, rgba(192, 199, 207, 0.22)) !important;
    margin-left: 0.3rem !important;
    background: none !important;
}

.md-nav--primary .md-nav__item--nested .md-nav .md-nav__link {
    font-weight: normal !important;
    color: rgb(157, 196, 216) !important;
    font-size: 0.6rem !important;
    padding: 0.15rem 0.3rem !important;
    background: none !important;
    box-shadow: none !important;
}

/* Star Citizen Tools exact color match */
body,
.md-main,
.md-content,
.md-content__inner {
    background: #060a0c !important;
    color: #9dc4d8 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

/* Header and navigation - exact Star Citizen style */
.md-header,
.md-tabs {
    background: #2a2a2a !important;
    border-bottom: 1px solid #3a3a3a !important;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5) !important;
}

/* Responsive logo sizing */
.md-header__button.md-logo img {
    height: 72px !important;
    /* larger on desktop */
    width: auto !important;
}

@media (max-width: 1024px) {
    .md-header__button.md-logo img {
        height: 56px !important;
    }
}

@media (max-width: 600px) {
    .md-header__button.md-logo img {
        height: 16px !important;
        /* much smaller on mobile */
    }
}

@media (max-width: 400px) {
    .md-header__button.md-logo img {
        height: 14px !important;
    }
}

/* Drawer/sidebar logo sizing (mobile nav inside sidebar) */
.md-nav__button.md-logo img {
    height: 24px !important;
    width: auto !important;
}

@media (max-width: 600px) {
    .md-nav__button.md-logo img {
        height: 16px !important;
    }
}

@media (max-width: 400px) {
    .md-nav__button.md-logo img {
        height: 14px !important;
    }
}

.md-tabs__link {
    color: #9dc4d8 !important;
    font-size: 13px !important;
}

.md-tabs__link--active {
    color: #ffffff !important;
}

/* FO custom topbar (if present) */
@media (min-width: 769px) {
    #fo-topbar {
        display: none;
    }
}

/* =============================
   Top tabs dropdowns (desktop only) via JS (fo-tabs-*)
   ============================= */
@media (min-width: 769px) {

    .md-header,
    .md-tabs {
        overflow: visible !important;
    }

    .md-tabs__list {
        display: flex;
        gap: 1rem;
    }

    .md-tabs__list>li {
        position: relative;
    }

    .fo-tabs-has-dropdown:hover>.fo-tabs-dropdown,
    .fo-tabs-has-dropdown:focus-within>.fo-tabs-dropdown,
    .fo-tabs-has-dropdown.fo-open>.fo-tabs-dropdown {
        display: block !important;
    }

    .fo-tabs-dropdown {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 240px;
        padding: 4px 0;
        /* tighter spacing */
        margin-top: 6px;
        background: #212125 !important;
        /* requested background */
        border: 1px solid #2a2a2f !important;
        border-radius: 8px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, .45);
        z-index: 3000;
    }

    /* Group inside dropdown (e.g., Clases -> list of clases) */
    .fo-tabs-dropdown .fo-group {
        padding: 4px 0;
    }

    .fo-tabs-dropdown .fo-group-label {
        display: block;
        width: 100%;
        text-align: left;
        background: transparent;
        border: 0;
        color: #ffffff;
        font-weight: 400;
        /* remove bold */
        font-size: 13px;
        padding: 8px 12px;
        cursor: default;
    }

    .fo-tabs-dropdown .fo-tabs-sublist {
        list-style: none;
        margin: 0;
        padding: 0 0 4px 0;
    }

    .fo-tabs-dropdown .fo-tabs-sublist .fo-tabs-dropdown-link {
        padding-left: 18px;
    }

    /* Pointer cursor off for group labels to indicate hover reveals submenu */
    .fo-headmenu-group {
        cursor: default;
    }

    .fo-tabs-dropdown li {
        list-style: none;
    }

    .fo-tabs-dropdown-link {
        display: block;
        padding: 8px 12px;
        /* tighter spacing already handled at container */
        color: #ffffff !important;
        /* white text */
        font-size: 13px;
        white-space: nowrap;
    }

    .fo-tabs-dropdown-link:hover {
        background: rgba(70, 85, 110, .25) !important;
        color: #4a9eff !important;
    }

    /* Ensure submenu items share same style */
    .fo-submenu-link,
    #fo-headmenu-sub a {
        color: #ffffff !important;
    }
}

/* Sidebar clean - no background or borders */
.md-sidebar {
    background: none !important;
    border: none !important;
}

.md-nav__link {
    color: #008fd0 !important;
    font-size: 13px !important;
}

.md-nav__link:hover {
    color: #008fd0 !important;
}

/* Links - exact Star Citizen blue */
a,
.md-typeset a {
    color: #4a9eff !important;
    text-decoration: none !important;
}

a:hover,
.md-typeset a:hover {
    color: #5dade2 !important;
    text-decoration: underline !important;
}

/* Typography - exact sizes and weights */
.md-typeset h1 {
    color: #d5ecf8 !important;
    font-size: 2.2em !important;
    font-weight: normal !important;
    border-bottom: 1px solid #008fd0 !important;
    margin-bottom: 0.5em !important;
    padding-bottom: 0.2em !important;
    text-align: left !important;
    letter-spacing: normal !important;
}

.md-typeset h2 {
    color: #d5ecf8 !important;
    font-size: 1.5em !important;
    font-weight: normal !important;
    border-bottom: 1px solid #3a3a3a !important;
    margin-top: 1.5em !important;
    margin-bottom: 0.5em !important;
    padding-bottom: 0.2em !important;
    text-align: left !important;
}

.md-typeset h3 {
    color: #d5ecf8 !important;
    font-size: 1.2em !important;
    font-weight: bold !important;
    margin-top: 1.2em !important;
    margin-bottom: 0.5em !important;
}

.md-typeset p {
    color: #9dc4d8 !important;
    font-size: 14px !important;
    text-align: justify !important;
    margin-bottom: 1em !important;
}

/* Tables for BODY content - Star Citizen Tools transparent with subtle visible borders */
.wikitable {
    background: transparent !important;
    color: #9dc4d8 !important;
    border: 1px solid rgba(157, 196, 216, 0.15) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    font-size: 13px !important;
    width: 100% !important;
    margin: 1em 0 !important;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    backdrop-filter: none !important;
}

/* General md-typeset tables (fallback) */
.md-typeset table:not(.infobox-table) {
    background: transparent !important;
    color: #9dc4d8 !important;
    border: 1px solid rgba(157, 196, 216, 0.15) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    font-size: 13px !important;
    width: 100% !important;
    margin: 1em 0 !important;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    backdrop-filter: none !important;
}

.md-typeset th,
.wikitable th {
    background: transparent !important;
    color: #e2e8f0 !important;
    font-weight: 500 !important;
    padding: 12px 16px !important;
    border: none !important;
    text-align: left !important;
    font-size: 13px !important;
    border-bottom: 1px solid rgba(157, 196, 216, 0.2) !important;
}

.md-typeset th:first-child,
.wikitable th:first-child {
    border-top-left-radius: 8px !important;
}

.md-typeset th:last-child,
.wikitable th:last-child {
    border-top-right-radius: 8px !important;
}

.md-typeset td,
.wikitable td {
    background: transparent !important;
    color: #9dc4d8 !important;
    padding: 12px 16px !important;
    border: none !important;
    vertical-align: top !important;
    border-bottom: 1px solid rgba(157, 196, 216, 0.12) !important;
}

.md-typeset tr:last-child td,
.wikitable tr:last-child td {
    border-bottom: none !important;
}

.md-typeset tr:last-child td:first-child,
.wikitable tr:last-child td:first-child {
    border-bottom-left-radius: 8px !important;
}

.md-typeset tr:last-child td:last-child,
.wikitable tr:last-child td:last-child {
    border-bottom-right-radius: 8px !important;
}

.md-typeset tr:nth-child(even) td,
.wikitable tr:nth-child(even) td {
    background: transparent !important;
}

.md-typeset tr:hover td,
.wikitable tr:hover td {
    background: rgba(70, 85, 110, 0.25) !important;
    transition: background 0.2s ease !important;
}

/* Table caption styling transparent with subtle border */
.md-typeset table caption,
.wikitable caption {
    background: transparent !important;
    color: #e2e8f0 !important;
    font-weight: 500 !important;
    padding: 12px 16px !important;
    text-align: left !important;
    border: none !important;
    margin: 0 !important;
    caption-side: top !important;
    font-size: 14px !important;
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
    border-bottom: 1px solid rgba(157, 196, 216, 0.2) !important;
}

/* Citizen overflow wrapper - transparent style */
.citizen-overflow-wrapper {
    position: relative !important;
    margin: 1em 0 !important;
    overflow: hidden !important;
    border-radius: 8px !important;
    /* box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5) !important; */
    backdrop-filter: none !important;
    background: transparent !important;
}

.citizen-overflow-content {
    overflow-x: auto !important;
    position: relative !important;
    border-radius: 8px !important;
    background: transparent !important;
}

.citizen-overflow-nav {
    display: none !important;
    /* Navigation buttons not needed for simple tables */
}

/* Star Citizen Tools exact Quick Facts infobox */
.infobox {
    position: static;
    float: right;
    width: 300px;
    margin: 0 0 1rem 1.5rem;
    background: rgba(20, 25, 35, 0.2) !important;
    color: #9dc4d8 !important;
    border: none !important;
    padding: 0 !important;
    font-size: 13px !important;
    clear: right;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    backdrop-filter: blur(10px) !important;
    display: flex !important;
    flex-direction: column !important;
}

.infobox-title {
    background: rgba(50, 65, 85, 0.4) !important;
    color: #e2e8f0 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-align: center !important;
    padding: 12px 16px !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(100, 120, 150, 0.2) !important;
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
}

.infobox-img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
    border: none !important;
    position: static !important;
    z-index: 1 !important;
}

/* Image container with fade effect using inset shadow */
.infobox-img-container {
    position: relative !important;
    width: 100% !important;
    display: block !important;
    margin: 0 !important;
    overflow: hidden !important;
}

.infobox-img-container::after {
    content: "" !important;
    position: absolute !important;
    left: 0;
    right: 0;
    bottom: 0;
    height: 32px;
    pointer-events: none !important;
    z-index: 2 !important;
    background: linear-gradient(to bottom,
            rgba(20, 25, 35, 0) 0%,
            rgba(20, 25, 35, 0.7) 100%) !important;
}

/* Overlay image for crossfade rotator */
.fo-rotator-overlay {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: 1 !important;
}

/* Image-only variant for class pages: keep only the image */
.infobox.infobox--image-only>.infobox-title,
.infobox.infobox--image-only>.infobox-section,
.infobox.infobox--image-only>.infobox-table {
    display: none !important;
}

/* Image-only variant: make box hug the image with no background/padding */
.infobox.infobox--image-only {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Remove bottom fade overlay for pure image tiles */
.infobox.infobox--image-only .infobox-img-container::after {
    display: none !important;
}

/* Keep nice rounded corners on the image itself */
.infobox.infobox--image-only .infobox-img {
    border-radius: 12px !important;
}

/* Hide image-only infobox on small screens to reduce clutter */
@media (max-width: 600px) {
    .infobox.infobox--image-only {
        display: none !important;
    }
}

.infobox-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: transparent !important;
    margin: 0 !important;
    border: none !important;
    flex: 1 !important;
}

.infobox-table th,
.infobox-table td {
    padding: 8px 0 !important;
    text-align: left !important;
    font-size: 13px !important;
    border: none !important;
    vertical-align: top !important;
    background: transparent !important;
}

.infobox-table th {
    color: #e2e8f0 !important;
    font-weight: 500 !important;
    width: 50% !important;
    white-space: nowrap !important;
    min-width: 120px !important;
    padding: 8px 8px 8px 12px !important;
    /* More left margin, normal right */
}

.infobox-table td {
    color: #9dc4d8 !important;
    padding: 8px 4px 8px 8px !important;
    /* Less right margin, normal left */
}

/* NO hover effects for infobox tables */
.infobox-table tr:nth-child(even) td,
.infobox-table tr:nth-child(even) th,
.infobox-table tr:hover td,
.infobox-table tr:hover th {
    background: transparent !important;
}

@media (max-width: 900px) {
    .infobox {
        float: none;
        margin: 1rem auto;
        position: static;
        width: 100%;
        max-width: 300px;
    }
}

@media (max-width: 900px) {
    .md-sidebar {
        min-width: 180px !important;
        max-width: 90vw !important;
        width: auto !important;
        word-break: break-word !important;
        white-space: normal !important;
    }

    .md-nav__link {
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }
}

@media (max-width: 600px) {
    .md-sidebar {
        min-width: 120px !important;
        max-width: 98vw !important;
        width: auto !important;
        font-size: 15px !important;
    }

    .md-nav {
        font-size: 15px !important;
    }

    .md-nav__link {
        font-size: 15px !important;
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }
}

/* Content layout - Star Citizen style */
.md-content__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 2rem;
}

/* Desktop: shrink primary sidebar width by ~15% */
@media screen and (min-width: 76.25em) {
    .md-sidebar--primary {
        width: 200px !important;
        min-width: 200px !important;
        max-width: 200px !important;
    }
}

/* Lists and bullets */
.md-typeset ul {
    color: #9dc4d8 !important;
    font-size: 14px !important;
    margin: 1em 0 !important;
    text-align: left !important;
}

.md-typeset li {
    margin-bottom: 0.3em !important;
}

/* Horizontal rule */
.md-typeset hr {
    border: none !important;
    border-top: 1px solid #3a3a3a !important;
    margin: 1.5em 0 !important;
}

/* Desktop: reduce gap between left nav and main content by removing extra margin */
@media screen and (min-width: 76.25em) {
    [dir="ltr"] .md-sidebar--primary:not([hidden])~.md-content>.md-content__inner {
        margin-left: 0 !important;
    }
}

/* Star Citizen style cards/gallery */
.md-typeset__cards {
    display: flex;
    gap: 1rem;
    margin: 1rem 0;
    flex-wrap: wrap;
}

/* =============================
   Generic content image rotator
   ============================= */
.fo-rotator {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 300px !important;
    /* match infobox image width */
    margin: 0 auto 1rem auto !important;
    /* centered like character/planet tiles */
    overflow: hidden !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5) !important;
    background: rgba(20, 25, 35, 0.15) !important;
}

/* Reserve perfect square space (300x300) even if aspect-ratio isn't applied by browser) */
.fo-rotator::before {
    content: "";
    display: block !important;
    padding-top: 100% !important;
    /* square placeholder */
}

.fo-rotator img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
}

.fo-rotator .fo-rotator-layer {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    transition: opacity 700ms ease !important;
}

.fo-rotator .fo-rotator-layer.fo-active {
    opacity: 1 !important;
}

.fo-rotator .fo-rotator-caption {
    display: block !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
    color: #9dc4d8 !important;
    text-align: center !important;
}

/* Ensure overlay images fill the reserved height */
.fo-rotator .fo-rotator-layer img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Bottom fade overlay like infobox image */
.fo-rotator::after {
    content: "" !important;
    position: absolute !important;
    left: 0;
    right: 0;
    bottom: 0;
    height: 32px;
    pointer-events: none !important;
    z-index: 2 !important;
    background: linear-gradient(to bottom,
            rgba(27, 27, 30, 0) 0%,
            rgba(27, 27, 30, 0.7) 100%) !important;
}

/* Caption card below image (as a single card with image) */
.fo-rotator-card .fo-rotator,
.fo-rotator-card .fo-rotator+figcaption,
.fo-rotator-card .fo-rotator-caption {
    display: block !important;
    margin: 0 auto !important;
    max-width: 300px !important;
}

.fo-rotator-card {
    width: 100% !important;
    max-width: 300px !important;
    margin: 0 auto 1rem auto !important;
    background: rgba(33, 33, 37, 0.85) !important;
    border: 1px solid var(--fo-border, #2d2d32) !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35) !important;
    overflow: hidden !important;
}

.fo-rotator-card .fo-rotator {
    box-shadow: none !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.fo-rotator-card .fo-rotator-caption {
    color: #c0c7cf !important;
    padding: 10px 14px !important;
    background: transparent !important;
}

/* Optional ratio modifiers */
.fo-rotator--16x9 {
    aspect-ratio: 16 / 9 !important;
}

.fo-rotator--4x3 {
    aspect-ratio: 4 / 3 !important;
}

.fo-rotator--3x2 {
    aspect-ratio: 3 / 2 !important;
}

.fo-rotator--1x1 {
    aspect-ratio: 1 / 1 !important;
}

.md-typeset__card {
    background: #2a2a2a !important;
    border: 1px solid #3a3a3a !important;
    width: 160px;
    overflow: hidden;
    text-align: center;
}

.md-typeset__card img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
}

.md-typeset__card-content {
    padding: 8px 12px;
}

.md-typeset__card h4 {
    color: #008fd0 !important;
    font-size: 13px !important;
    font-weight: bold !important;
    margin: 0 0 4px 0 !important;
}

.md-typeset__card p {
    color: #9dc4d8 !important;
    font-size: 12px !important;
    margin: 0 !important;
}

/* Oculta el pie de página de MkDocs Material */
.md-footer-meta {
    display: none !important;
}

/* Mobile: Ensure submenus have solid background and no left margin, matching main menu */
@media (max-width: 600px) {

    /* Ensure submenus have the same background as the main menu in mobile */
    .md-sidebar--primary .md-nav__item--nested>.md-nav,
    .md-sidebar--primary .md-nav__item--nested>.md-nav>.md-nav__list {
        background: var(--md-default-bg-color) !important;
    }
}

/* .md-nav__title {
    display: none !important;
} */

/* Mobile: adjust back arrow position in drawer title */
@media (max-width: 600px) {
    .md-nav__title {
        display: flex !important;
        /* keep visible */
        align-items: center !important;
        line-height: 1.1 !important;
        min-height: 2rem !important;
        /* smaller title bar */
        padding-top: 0.2rem !important;
        padding-bottom: 0.2rem !important;
    }

    /* Nudge the back arrow a bit downward */
    .md-nav__title .md-nav__button,
    .md-nav__back-button {
        position: relative !important;
        top: 2px !important;
    }

    /* Hide text label inside submenu title, keep back arrow visible */
    .md-nav__title .md-ellipsis {
        display: none !important;
    }

    /* When drawer is open on mobile, hide header logo and site title */
    html[data-md-state="drawer"] .md-header__button.md-logo,
    html[data-md-state="drawer"] .md-header__title {
        display: none !important;
    }
}

/* Stronger mobile adjustments: shrink submenu title row and hide its text */
@media (max-width: 600px) {
    .md-sidebar--primary .md-nav__title {
        height: 2rem !important;
        min-height: 2rem !important;
        margin: 0 !important;
        padding: 0 0.25rem !important;
        border: 0 !important;
        display: flex !important;
        align-items: center !important;
        font-size: 0 !important;
        /* hide plain text nodes */
    }

    .md-sidebar--primary .md-nav__title .md-ellipsis {
        display: none !important;
    }

    .md-sidebar--primary .md-nav__back-button,
    .md-sidebar--primary .md-nav__title .md-nav__button {
        position: relative !important;
        top: 2px !important;
        margin: 0 !important;
    }

    /* Restore icon size/color after font-size:0 on parent */
    .md-sidebar--primary .md-nav__title .md-nav__icon {
        font-size: 1rem !important;
        color: var(--md-default-fg-color) !important;
    }
}

/* While drawer (sidebar) is open on mobile, hide the top header entirely to avoid overlap */
@media (max-width: 600px) {
    html[data-md-state="drawer"] .md-header {
        visibility: hidden !important;
    }
}

/* Desktop: match secondary nav left border color to central bar (#008fd0) */
@media screen and (min-width: 76.25em) {
    [dir="ltr"] .md-nav--integrated>.md-nav__list>.md-nav__item--active .md-nav--secondary {
        border-left: 1px solid #008fd0 !important;
    }
}

/* =============================
   Experimental neutral-dark palette
   Background base: rgb(27, 27, 30)
   ============================= */

:root {
    /* Base tones */
    --fo-bg: rgb(27, 27, 30);
    --fo-surface: rgb(33, 33, 37);
    --fo-border: rgb(45, 45, 50);
    --fo-border-contrast: rgba(192, 199, 207, 0.22);
    --fo-text: #c0c7cf;
    /* soft light gray-blue */
    --fo-text-strong: #e2e8f0;
    --fo-accent: #4a9eff;
    /* keep accent blue */

    /* Sync MkDocs Material background for drawers/lists */
    --md-default-bg-color: rgb(27, 27, 30);
}

/* Site canvas */
body,
.md-main,
.md-content,
.md-content__inner {
    background: var(--fo-bg) !important;
    color: var(--fo-text) !important;
}

/* Header and tabs */
.md-header,
.md-tabs {
    background: var(--fo-surface) !important;
    border-bottom: 1px solid var(--fo-border) !important;
}

/* Links */
a,
.md-typeset a {
    color: var(--fo-accent) !important;
}

/* Tables: subtle borders in the new palette */
.wikitable,
.md-typeset table:not(.infobox-table) {
    border: 1px solid rgba(192, 199, 207, 0.12) !important;
}

.md-typeset th,
.wikitable th {
    color: var(--fo-text-strong) !important;
    border-bottom: 0px solid rgba(192, 199, 207, 0.18) !important;
}

.md-typeset td,
.wikitable td {
    border-bottom: 0px solid rgba(192, 199, 207, 0.1) !important;
}

/* Infobox surfaces in the new palette */
.infobox {
    background: rgba(40, 42, 48, 0.30) !important;
}

.infobox-title {
    background: rgba(55, 58, 64, 0.40) !important;
    color: var(--fo-text-strong) !important;
}

.infobox-img-container::after {
    background: linear-gradient(to bottom,
            rgba(27, 27, 30, 0) 0%,
            rgba(27, 27, 30, 0.7) 100%) !important;
}

/* Drawer/submenus adopt the base background */
.md-sidebar--primary .md-nav__item--nested>.md-nav,
.md-sidebar--primary .md-nav__item--nested>.md-nav>.md-nav__list {
    background: var(--fo-bg) !important;
}

/* =============================
   Spell slots tables (11 columns: Nivel + 0-9)
   Reduce width ~20% on desktop; improve mobile usability
   ============================= */
/* Desktop/tablet: shrink width and compact spacing for 11-col spell tables */
.md-typeset table:has(> thead > tr > th:nth-child(11)),
.md-typeset table:has(> tbody > tr > td:nth-child(11)) {
    width: 80% !important;
    /* -20% width */
    margin-left: 0 !important;
    margin-right: auto !important;
    /* align left, avoid stretching to the right */
    font-size: 12px !important;
}

/* Compact header/body cells for those tables */
.md-typeset table:has(> thead > tr > th:nth-child(11)) th,
.md-typeset table:has(> tbody > tr > td:nth-child(11)) th,
.md-typeset table:has(> thead > tr > th:nth-child(11)) td,
.md-typeset table:has(> tbody > tr > td:nth-child(11)) td {
    padding: 6px 8px !important;
}

/* First column a bit wider for label readability */
.md-typeset table:has(> thead > tr > th:nth-child(11)) th:first-child,
.md-typeset table:has(> tbody > tr > td:nth-child(11)) td:first-child {
    width: 11% !important;
    min-width: 90px !important;
    white-space: normal !important;
}

/* Mobile: full-width, horizontal scroll, tighter spacing */
@media (max-width: 768px) {

    .md-typeset table:has(> thead > tr > th:nth-child(11)),
    .md-typeset table:has(> tbody > tr > td:nth-child(11)) {
        width: 100% !important;
        display: block !important;
        /* allow scrolling */
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
        /* keep columns compact */
        border-radius: 8px !important;
        /* preserve visual style */
    }

    .md-typeset table:has(> thead > tr > th:nth-child(11)) th,
    .md-typeset table:has(> tbody > tr > td:nth-child(11)) th,
    .md-typeset table:has(> thead > tr > th:nth-child(11)) td,
    .md-typeset table:has(> tbody > tr > td:nth-child(11)) td {
        padding: 6px 6px !important;
        font-size: 11.5px !important;
    }
}

/* Stronger, class-based rules applied by JS for reliability */
.md-typeset table.spell-slots-table {
    width: 100% !important;
    /* ensure full width on desktop */
    table-layout: fixed !important;
    /* force consistent column widths */
    font-size: 12px !important;
    /* compact */
}

.md-typeset table.spell-slots-table th,
.md-typeset table.spell-slots-table td {
    padding: 6px 8px !important;
    /* tighter cells */
}

/* First column (Nivel de Clase) smaller, centered number */
.md-typeset table.spell-slots-table th:first-child,
.md-typeset table.spell-slots-table td:first-child {
    width: 10% !important;
    min-width: 80px !important;
}

.md-typeset table.spell-slots-table td:first-child,
.md-typeset table.spell-slots-table th:first-child {
    text-align: center !important;
}

/* Allow label wrap like:
   Nivel de\nclase on small screens */
@media (max-width: 768px) {
    .md-typeset table.spell-slots-table th:first-child {
        white-space: normal !important;
        line-height: 1.1 !important;
    }
}

/* Numeric columns 0–9: evenly distributed, centered, no wrap */
.md-typeset table.spell-slots-table th:nth-child(n+2),
.md-typeset table.spell-slots-table td:nth-child(n+2) {
    text-align: center !important;
    white-space: nowrap !important;
}

/* Give a minimum width to numeric columns so all 10 fit on desktop without scroll */
.md-typeset table.spell-slots-table th:nth-child(n+2):nth-child(-n+11),
.md-typeset table.spell-slots-table td:nth-child(n+2):nth-child(-n+11) {
    min-width: 44px !important;
    /* compress numbers */
}

/* Larger desktops: allow slightly smaller font to fit 10 cols comfortably */
@media (min-width: 1024px) {
    .md-typeset table.spell-slots-table {
        font-size: 11.5px !important;
    }
}

/* Mobile keeps scroll for usability */
@media (max-width: 768px) {
    .md-typeset table.spell-slots-table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
    }
}

/* Progression table: narrow numeric columns, flexible "Dotes" */
.md-typeset table.progression-table {
    table-layout: auto !important;
    /* size to content like spells */
    width: auto !important;
    /* shrink to content width */
    max-width: 100% !important;
    /* never exceed container */
    margin-left: 0 !important;
    /* align left */
    margin-right: auto !important;
    font-size: 12.5px !important;
}

.md-typeset table.progression-table th,
.md-typeset table.progression-table td {
    padding: 6px 8px !important;
}

/* Allow header text to wrap so it doesn't overlap */
.md-typeset table.progression-table th {
    white-space: nowrap !important;
    /* single line headers */
    line-height: 1.2 !important;
}

.md-typeset table.progression-table th:nth-child(1),
/* Nivel */
.md-typeset table.progression-table td:nth-child(1) {
    width: 60px !important;
    min-width: 60px !important;
    text-align: center !important;
}

.md-typeset table.progression-table th:nth-child(2),
/* Ataque Base */
.md-typeset table.progression-table th:nth-child(3),
/* Fortaleza */
.md-typeset table.progression-table th:nth-child(4),
/* Reflejos */
.md-typeset table.progression-table th:nth-child(5)

/* Voluntad */
    {
    width: 70px !important;
    min-width: 70px !important;
    text-align: center !important;
    white-space: nowrap !important;
}

.md-typeset table.progression-table td:nth-child(2),
.md-typeset table.progression-table td:nth-child(3),
.md-typeset table.progression-table td:nth-child(4),
.md-typeset table.progression-table td:nth-child(5) {
    width: 60px !important;
    min-width: 60px !important;
    text-align: center !important;
    white-space: nowrap !important;
    /* numeric cells stay compact */
}

/* Sixth column Dotes: expand only to its content, wrap lines, no forced fill */
.md-typeset table.progression-table th:nth-child(6),
.md-typeset table.progression-table td:nth-child(6) {
    width: auto !important;
    max-width: 520px !important;
    /* prevents stretching */
    white-space: normal !important;
}

@media (max-width: 768px) {
    .md-typeset table.progression-table {
        font-size: 12px !important;
        width: 100% !important;
        max-width: none !important;
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
    }
}