/* ==========================================================================
   AXIS — help center, tour center, "?" side panel and welcome invitation.
   (The Shepherd popover theme lives in css/tours.css, loaded on demand.)
   ========================================================================== */

.axis-minw-0 { min-width: 0; }

/* PageHeader always renders its actions slot (for the "?" button); hide it when a page has neither */
.axis-page-header__actions:empty { display: none; }

/* ---------- Tour launcher (app bar) ---------- */

.axis-tour-launcher {
    position: relative;
    display: inline-flex;
}

.axis-tour-launcher__dot {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--axis-brand-lime);
    box-shadow: 0 0 0 2px var(--mud-palette-appbar-background);
    pointer-events: none;
}

/* ---------- Welcome invitation ---------- */

.axis-tour-invite {
    position: fixed;
    right: var(--axis-space-6);
    bottom: var(--axis-space-6);
    z-index: 1500;
    width: min(360px, calc(100vw - 32px));
    padding: var(--axis-space-5);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--axis-radius-lg);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    box-shadow: 0 24px 64px rgba(0, 20, 26, 0.24);
    animation: axis-invite-in 220ms var(--axis-ease);
}

@keyframes axis-invite-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

.axis-tour-invite__close {
    position: absolute;
    top: 10px;
    right: 10px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
}

.axis-tour-invite__close:hover { background: var(--mud-palette-action-default-hover); }
.axis-tour-invite__close:focus-visible { outline: none; box-shadow: var(--axis-focus-ring); }

.axis-tour-invite__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--axis-radius);
    background: var(--axis-tint-brand);
    color: var(--mud-palette-primary);
}

.axis-tour-invite__title {
    margin: var(--axis-space-3) 0 var(--axis-space-1);
    font-size: 1.0625rem;
    font-weight: 600;
}

.axis-tour-invite__text {
    margin: 0 0 var(--axis-space-4);
    font-size: .875rem;
    line-height: 1.55;
    color: var(--mud-palette-text-secondary);
}

.axis-tour-invite__actions {
    display: flex;
    gap: var(--axis-space-2);
}

/* ---------- Tour center dialog ---------- */

.axis-tour-center__body {
    display: flex;
    flex-direction: column;
    gap: var(--axis-space-5);
}

.axis-tour-summary {
    display: flex;
    flex-direction: column;
    gap: var(--axis-space-2);
    padding: var(--axis-space-3) var(--axis-space-4);
    border-radius: var(--axis-radius);
    background: var(--axis-surface-muted);
    font-size: .875rem;
}

.axis-tour-group {
    display: flex;
    flex-direction: column;
    gap: var(--axis-space-2);
}

.axis-tour-group__title {
    display: flex;
    align-items: center;
    gap: var(--axis-space-1);
    margin: 0;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.axis-tour-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--axis-space-3);
    padding: var(--axis-space-3);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--axis-radius);
    background: var(--mud-palette-surface);
}

.axis-tour-card--done { background: var(--axis-surface-muted); }

.axis-tour-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--axis-radius);
    background: var(--axis-tint-brand);
    color: var(--mud-palette-primary);
}

.axis-tour-card__main { min-width: 0; }

.axis-tour-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--axis-space-2);
}

.axis-tour-card__title {
    margin: 0;
    font-size: .9375rem;
    font-weight: 600;
}

.axis-tour-card__desc {
    margin: 2px 0 0;
    font-size: .8125rem;
    color: var(--mud-palette-text-secondary);
}

.axis-tour-card__meta {
    display: flex;
    gap: var(--axis-space-1);
    margin-top: 2px;
    font-size: .75rem;
    color: var(--mud-palette-text-secondary);
}

.axis-tour-card__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--axis-space-1);
}

@media (max-width: 600px) {
    .axis-tour-card { grid-template-columns: auto 1fr; }
    .axis-tour-card__actions { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; }
}

/* ---------- Help center ---------- */

.axis-help-search { margin-bottom: var(--axis-space-6); max-width: 760px; }
.axis-help-search .mud-input.mud-input-outlined { background: var(--mud-palette-surface); }

.axis-help-category { margin-bottom: var(--axis-space-6); }

.axis-help-category__title,
.axis-help-section__title {
    margin: 0 0 var(--axis-space-3);
    font-size: 1rem;
    font-weight: 600;
}

.axis-help-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--axis-space-3);
}

.axis-help-card {
    display: flex;
    gap: var(--axis-space-3);
    padding: var(--axis-space-4);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--axis-radius-lg);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    transition: border-color var(--axis-duration) var(--axis-ease), background-color var(--axis-duration) var(--axis-ease);
}

.axis-help-card:hover { border-color: var(--mud-palette-secondary); background: var(--axis-tint-brand); color: var(--mud-palette-text-primary); }
.axis-help-card:focus-visible { outline: none; box-shadow: var(--axis-focus-ring); }

.axis-help-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: var(--axis-radius);
    background: var(--axis-tint-brand);
    color: var(--mud-palette-primary);
}

.axis-help-card__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.axis-help-card__title { font-weight: 600; }
.axis-help-card__summary { font-size: .8125rem; color: var(--mud-palette-text-secondary); }
.axis-help-card__meta { margin-top: var(--axis-space-1); font-size: .75rem; color: var(--mud-palette-text-secondary); }

.axis-help-links { margin: 0; padding-left: var(--axis-space-5); }
.axis-help-links li { margin: var(--axis-space-1) 0; }

.axis-help-terms { display: flex; flex-wrap: wrap; gap: var(--axis-space-2); }

.axis-help-term-chip {
    padding: 3px 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    font-size: .8125rem;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
}

.axis-help-term-chip:hover { border-color: var(--mud-palette-secondary); background: var(--axis-tint-brand); }

/* Search results */

.axis-help-results__count { margin: 0 0 var(--axis-space-2); font-size: .8125rem; color: var(--mud-palette-text-secondary); }
.axis-help-results__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--axis-space-2); max-width: 900px; }

.axis-help-result__link {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px var(--axis-space-3);
    padding: var(--axis-space-3) var(--axis-space-4);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--axis-radius);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    text-decoration: none;
}

.axis-help-result__link:hover { border-color: var(--mud-palette-secondary); background: var(--axis-tint-brand); color: var(--mud-palette-text-primary); }

.axis-help-result__kind {
    grid-row: span 3;
    align-self: start;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    background: var(--axis-tint-brand);
    color: var(--mud-palette-primary);
}

.axis-help-result__kind--error { background: var(--axis-tint-error); color: var(--mud-palette-error); }
.axis-help-result__kind--pregunta { background: var(--axis-tint-info); color: var(--mud-palette-info); }
.axis-help-result__kind--accion { background: var(--axis-tint-success); color: var(--mud-palette-success); }

.axis-help-result__title { font-weight: 600; }
.axis-help-result__context { font-size: .75rem; color: var(--mud-palette-text-secondary); }
.axis-help-result__snippet { font-size: .8125rem; color: var(--mud-palette-text-secondary); }

/* Article */

.axis-help-breadcrumb {
    display: flex;
    gap: var(--axis-space-2);
    margin-bottom: var(--axis-space-2);
    font-size: .8125rem;
    color: var(--mud-palette-text-secondary);
}

.axis-help-article { max-width: 1100px; }
.axis-help-article p { line-height: 1.6; }

.axis-help-article__intro { margin-bottom: var(--axis-space-6); }
.axis-help-article__summary { margin: 0 0 var(--axis-space-3); font-size: 1rem; color: var(--mud-palette-text-secondary); }
.axis-help-article__cta { display: flex; flex-wrap: wrap; gap: var(--axis-space-2); }

.axis-help-section { margin-bottom: var(--axis-space-8); }
.axis-help-section > p { margin: 0 0 var(--axis-space-4); }

.axis-help-toc {
    display: flex;
    flex-wrap: wrap;
    gap: var(--axis-space-2);
    margin-bottom: var(--axis-space-4);
}

.axis-help-toc a {
    padding: 4px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    font-size: .8125rem;
    text-decoration: none;
}

.axis-help-action {
    padding: var(--axis-space-5);
    margin-bottom: var(--axis-space-4);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--axis-radius-lg);
    background: var(--mud-palette-surface);
    scroll-margin-top: 80px;
}

.axis-help-action__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--axis-space-2);
    margin-bottom: var(--axis-space-3);
}

.axis-help-action__title { margin: 0; font-size: 1rem; font-weight: 600; }

.axis-help-action__body--with-shot {
    display: grid;
    grid-template-columns: minmax(260px, 2fr) 3fr;
    gap: var(--axis-space-6);
    align-items: start;
}

@media (max-width: 960px) {
    .axis-help-action__body--with-shot { grid-template-columns: 1fr; }
}

/* Numbered steps: the circles match the numbered markers on the screenshot */
.axis-help-steps { counter-reset: axis-step; list-style: none; margin: 0; padding: 0; }

.axis-help-steps li {
    counter-increment: axis-step;
    position: relative;
    padding: 0 0 var(--axis-space-3) 38px;
    line-height: 1.55;
    color: var(--mud-palette-text-primary);
}

.axis-help-steps li::before {
    content: counter(axis-step);
    position: absolute;
    left: 0;
    top: -1px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--mud-palette-lines-inputs);
    font-size: .75rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
}

.axis-help-steps li.axis-help-steps__item--marked::before {
    border-color: transparent;
    background: var(--axis-brand-teal);
    color: var(--axis-brand-lime);
}

.axis-help-shot { margin: 0; }

.axis-help-shot img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--axis-radius);
}

.axis-help-shot figcaption { margin-top: var(--axis-space-1); font-size: .75rem; color: var(--mud-palette-text-secondary); }

.axis-help-tip {
    display: flex;
    gap: var(--axis-space-2);
    margin: var(--axis-space-2) 0 0;
    padding: var(--axis-space-3);
    border-radius: var(--axis-radius);
    background: var(--axis-tint-info);
    font-size: .875rem;
}

.axis-help-errors { margin: 0; display: flex; flex-direction: column; gap: var(--axis-space-3); }

.axis-help-errors__item {
    padding: var(--axis-space-3) var(--axis-space-4);
    border-left: 3px solid var(--mud-palette-error);
    border-radius: 0 var(--axis-radius) var(--axis-radius) 0;
    background: var(--axis-tint-error);
}

.axis-help-errors dt { display: flex; align-items: center; gap: var(--axis-space-2); font-weight: 600; }
.axis-help-errors dd { margin: var(--axis-space-1) 0 0; line-height: 1.55; }

.axis-help-article code {
    padding: 1px 5px;
    border-radius: var(--axis-radius-sm);
    background: var(--axis-tint-brand);
    font-family: var(--axis-font-mono);
    font-size: .8125rem;
}

/* Compact variant (side panel): see the panel section at the end */
.axis-help-article--compact .axis-help-shot { margin-top: var(--axis-space-3); }

/* FAQ and glossary */

.axis-help-faq { max-width: 900px; }

.axis-help-faq__item {
    margin-bottom: var(--axis-space-2);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--axis-radius);
    background: var(--mud-palette-surface);
    scroll-margin-top: 80px;
}

.axis-help-faq__item summary {
    padding: var(--axis-space-3) var(--axis-space-4);
    font-weight: 600;
    cursor: pointer;
}

.axis-help-faq__item summary:focus-visible { outline: none; box-shadow: var(--axis-focus-ring); border-radius: var(--axis-radius); }
.axis-help-faq__answer { padding: 0 var(--axis-space-4) var(--axis-space-3); }
.axis-help-faq__answer p { margin: 0 0 var(--axis-space-2); line-height: 1.6; }
.axis-help-faq__links { display: flex; flex-wrap: wrap; gap: var(--axis-space-2); }

.axis-help-letters { display: flex; flex-wrap: wrap; gap: var(--axis-space-1); margin-bottom: var(--axis-space-4); }

.axis-help-letters a {
    display: grid;
    place-items: center;
    min-width: 30px;
    height: 30px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--axis-radius);
    font-weight: 600;
    text-decoration: none;
}

.axis-help-glossary { max-width: 900px; margin: 0; }
.axis-help-glossary__letter { margin: var(--axis-space-5) 0 var(--axis-space-2); font-size: 1rem; font-weight: 700; color: var(--mud-palette-primary); scroll-margin-top: 80px; }
.axis-help-glossary__item { padding: var(--axis-space-2) 0; border-bottom: 1px solid var(--mud-palette-lines-default); scroll-margin-top: 80px; }
.axis-help-glossary__item:target { background: var(--axis-tint-brand); }
.axis-help-glossary dt { font-weight: 600; }
.axis-help-glossary dd { margin: 2px 0 0; line-height: 1.55; color: var(--mud-palette-text-secondary); }
.axis-help-glossary__more { margin-left: var(--axis-space-2); font-size: .8125rem; }

/* ---------- "?" side panel ---------- */

/* MudDrawer takes the navigation drawer palette (teal, light text): the panel is page content, so it
   uses the surface colours instead, in light and dark mode. */
.axis-help-panel.mud-drawer {
    z-index: 1350;
    background-color: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border-left: 1px solid var(--mud-palette-lines-default);
    box-shadow: -16px 0 48px rgba(0, 20, 26, 0.18);
}

.axis-help-panel .mud-drawer-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.axis-help-panel__header {
    display: flex;
    align-items: center;
    gap: var(--axis-space-3);
    padding: var(--axis-space-4) var(--axis-space-3) var(--axis-space-4) var(--axis-space-5);
    background: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.axis-help-panel__header .axis-page-header__eyebrow { margin-bottom: 2px; }

.axis-help-panel__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--mud-palette-text-primary);
}

.axis-help-panel__header .mud-icon-button { color: var(--mud-palette-text-secondary); }

.axis-help-panel__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--axis-space-5);
}

.axis-help-panel__body > .axis-help-article__summary {
    margin: 0 0 var(--axis-space-5);
    font-size: .9375rem;
    line-height: 1.5;
}

.axis-help-panel__footer {
    display: flex;
    justify-content: flex-end;
    padding: var(--axis-space-2) var(--axis-space-4);
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* Compact article layout inside the panel */
.axis-help-article--compact { max-width: none; }
.axis-help-article--compact .axis-help-section { margin-bottom: var(--axis-space-6); }

.axis-help-article--compact .axis-help-section__title {
    margin: 0 0 var(--axis-space-2);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.axis-help-article--compact .axis-help-section > p {
    margin: 0 0 var(--axis-space-4);
    font-size: .875rem;
    color: var(--mud-palette-text-primary);
}

.axis-help-article--compact .axis-help-action {
    padding: var(--axis-space-4);
    margin-bottom: var(--axis-space-3);
    border-radius: var(--axis-radius);
}

.axis-help-article--compact .axis-help-action__title { font-size: .9375rem; }
.axis-help-article--compact .axis-help-steps li { font-size: .875rem; padding-bottom: var(--axis-space-2); }
.axis-help-article--compact .axis-help-errors__item { padding: var(--axis-space-3); font-size: .875rem; }
.axis-help-article--compact .axis-help-toc { display: none; }