/* ============================================================================
   Guided help ("Ayuda"): button in the top bar, first-time banner and the
   layer that darkens the page, lights up the element of each step and shows
   the card. Engine: assets/js/core/help-tour.js. Tokens: _theme.css.
   ============================================================================ */

/* ---- Button in the top bar ------------------------------------------------- */
.help-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 12px 0 10px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(var(--color-primary-rgb), 0.45);
    background: var(--color-primary-light);
    color: var(--color-primary-text);
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.help-button:hover { background: rgba(var(--color-primary-rgb), 0.28); }
.help-button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.help-button[hidden] { display: none; }
@media (max-width: 640px) {
    .help-button { padding: 0 9px; }
    .help-button-label { display: none; }
}

/* Green dot that pulses until the page tour is opened once. */
.help-button.is-new::before,
.help-button.is-new::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 11px;
    height: 11px;
    border-radius: var(--radius-full);
    background: var(--color-secondary);
}
.help-button.is-new::before { box-shadow: 0 0 0 2px var(--header-bg); }
.help-button.is-new::after { animation: help-ping 1.8s ease-out infinite; }

@keyframes help-ping {
    0% { transform: scale(1); opacity: 0.75; }
    80%, 100% { transform: scale(2.4); opacity: 0; }
}

/* ---- First-time banner (top of a form or editor) --------------------------- */
.help-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    width: 100%;
    padding: 14px 16px;
    border-radius: var(--radius-xl);
    border: 1px solid rgba(var(--color-primary-rgb), 0.3);
    background: var(--color-primary-subtle);
}
.help-banner[hidden] { display: none; }
.help-banner-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: var(--radius-full);
    background: var(--color-secondary-light);
    color: var(--color-secondary-text);
}
.help-banner-body { flex: 1 1 14rem; min-width: 0; }
.help-banner-title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--color-text-primary); }
.help-banner-text { margin: 2px 0 0; font-size: 0.9375rem; line-height: 1.45; color: var(--color-text-secondary); }
@media (max-width: 599.98px) { .help-banner .btn { width: 100%; justify-content: center; } }

/* ---- Layer ------------------------------------------------------------------ */
.help-tour {
    position: fixed;
    inset: 0;
    z-index: 100100; /* above everything: header (9999), dialogs and pickers (100000) */
    pointer-events: none;
}

.help-tour__veil {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, 0.68);
    opacity: 0;
    transition: opacity 0.25s ease;
}
.help-tour__veil.is-visible { opacity: 1; }

/* The huge shadow darkens the rest; the green ring pulses. */
.help-tour__spot {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 14px;
    box-shadow: 0 0 0 200vmax rgba(2, 6, 23, 0.68);
    outline: 3px solid var(--color-secondary);
    opacity: 0;
    transition: opacity 0.25s ease;
}
.help-tour__spot.is-visible { opacity: 1; }
.help-tour__spot::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    border: 3px solid var(--color-secondary);
    animation: help-pulse 1.6s ease-out infinite;
}
.help-tour__spot.is-action::after { animation-duration: 1.1s; }

[data-theme="high-contrast"] .help-tour__veil { background: rgba(15, 23, 42, 0.55); }
[data-theme="high-contrast"] .help-tour__spot { box-shadow: 0 0 0 200vmax rgba(15, 23, 42, 0.55); outline-color: var(--color-secondary-hover); }

.help-tour.is-moving .help-tour__spot {
    transition: opacity 0.25s ease, top 0.35s ease, left 0.35s ease, width 0.35s ease, height 0.35s ease;
}
.help-tour.is-moving .help-tour__card.is-placed { transition: opacity 0.2s ease, top 0.35s ease, left 0.35s ease; }

@keyframes help-pulse {
    0% { transform: scale(1); opacity: 0.9; }
    70%, 100% { transform: scale(1.08); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .help-tour__spot::after, .help-button.is-new::after { animation: none; opacity: 0; }
    .help-tour.is-moving .help-tour__spot,
    .help-tour.is-moving .help-tour__card.is-placed { transition: none; }
}

/* ---- Card ------------------------------------------------------------------- */
.help-tour__card {
    position: fixed;
    top: 0;
    left: 0;
    width: min(400px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    padding: 18px 20px 14px;
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border-light);
    background: var(--color-surface-elevated);
    color: var(--color-text-primary);
    box-shadow: var(--shadow-xl);
    pointer-events: auto;
    opacity: 0;
}
.help-tour__card.is-placed { opacity: 1; transition: opacity 0.2s ease; }
.help-tour__card.is-searching { opacity: 0; pointer-events: none; }
[data-theme="high-contrast"] .help-tour__card { background: #fff; }
@media (max-width: 599.98px) { .help-tour__card { padding: 14px 16px 12px; } }

.help-tour__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.help-tour__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px 2px 8px;
    border-radius: var(--radius-full);
    background: var(--color-secondary-light);
    color: var(--color-secondary-text);
    font-size: 0.8125rem;
    font-weight: 700;
}
.help-tour__count { font-size: 0.875rem; font-weight: 600; color: var(--color-text-secondary); }

.help-tour__progress {
    height: 4px;
    margin-top: 12px;
    border-radius: var(--radius-full);
    background: var(--color-border-strong);
    overflow: hidden;
}
.help-tour__progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--color-primary);
    transition: width 0.3s ease;
}

.help-tour__title { margin: 14px 0 0; font-size: 1.125rem; line-height: 1.4; font-weight: 700; color: var(--color-text-primary); }
.help-tour__text { margin: 6px 0 0; font-size: 0.96875rem; line-height: 1.55; color: var(--color-text); }
.help-tour__text b, .help-tour__text strong { color: var(--color-text-primary); }

.help-tour__status,
.help-tour__hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 12px 0 0;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 0.9375rem;
    line-height: 1.4;
    font-weight: 600;
}
.help-tour__status svg, .help-tour__hint svg { flex-shrink: 0; margin-top: 1px; }
.help-tour__status { background: var(--color-warning-light); color: var(--color-warning-text); }
.help-tour__status.is-done { background: var(--color-success-light); color: var(--color-success-text); }
.help-tour__hint { background: var(--color-primary-light); color: var(--color-primary-text); }

.help-tour__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.help-tour__actions .help-tour__btn { flex: 1 1 0; max-width: 12rem; justify-content: center; min-height: 42px; }

/* Exit on its own line, below the buttons, so it is not pressed by mistake. */
.help-tour__exit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    margin-top: 6px;
    padding: 0 4px;
    border: 0;
    background: none;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    color: var(--color-text-secondary);
    cursor: pointer;
}
.help-tour__exit:hover { color: var(--color-text-primary); }
.help-tour__exit:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

@media print { .help-button, .help-banner, .help-tour { display: none !important; } }