/* ============================================================================
   ONBOARDING CAROUSEL — "Adicionar sessão"
   Tutorial mostrado quando o usuário cria o primeiro pacote.
   Markup é injetado por onboardingCarousel.js (.oc-* namespace).
   ============================================================================ */

/* ── Overlay (scrim) ── */
.oc-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, .55);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
    font-family: var(--ap-font-body);
}

.oc-overlay.show {
    opacity: 1;
    visibility: visible;
}

/* ── Card ── */
.oc-card {
    position: relative;
    width: 940px;
    max-width: 96vw;
    height: 600px;
    max-height: 92vh;
    background: var(--ap-bg-card);
    border-radius: 22px;
    box-shadow: 0 40px 90px rgba(2, 6, 23, .5);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: scale(.94);
    transition: transform .3s cubic-bezier(.65, 0, .35, 1);
}

.oc-overlay.show .oc-card {
    transform: scale(1);
}

/* ── Close button ── */
.oc-close {
    position: absolute;
    top: 16px;
    right: 18px;
    z-index: 20;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .85);
    color: #475569;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
    transition: background .15s ease;
}

.oc-close:hover {
    background: #fff;
}

/* ── Abas de seção ── */
.oc-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 14px 62px 14px 20px;
    border-bottom: 1px solid var(--ap-border);
    background: var(--ap-bg-card);
}

.oc-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    border-radius: 9px;
    padding: 7px 12px;
    font-family: var(--ap-font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--ap-text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}

.oc-tab:hover {
    background: var(--ap-bg-hover);
    color: var(--ap-text-secondary);
}

.oc-tab.active {
    background: var(--ap-accent-light);
    color: var(--ap-accent-strong);
}

.oc-tab-num {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    background: var(--ap-bg-muted);
    color: var(--ap-text-muted);
    flex-shrink: 0;
}

.oc-tab.active .oc-tab-num {
    background: var(--ap-accent-strong);
    color: #fff;
}

/* Botão de texto do slide final */
.oc-done-btn {
    background: none;
    border: none;
    color: var(--ap-text-muted);
    font-family: var(--ap-font-body);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    padding: 12px 8px;
}

.oc-done-btn:hover {
    color: var(--ap-text-secondary);
}

/* ── Strip / track ── */
.oc-viewport {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.oc-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform .55s cubic-bezier(.65, 0, .35, 1);
}

.oc-slide {
    flex: 0 0 100%;
    height: 100%;
    display: flex;
}

/* Left demo panel (intentionally dark in both themes) */
.oc-demo {
    position: relative;
    flex: 0 0 440px;
    height: 100%;
    overflow: hidden;
    background: linear-gradient(160deg, #1f2937, #0f141c);
}

.oc-demo.oc-demo--success {
    background: linear-gradient(160deg, #13351f, #0f1f17);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Right copy panel */
.oc-copy {
    flex: 1;
    min-width: 0;
    padding: 56px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--ap-bg-card);
}

.oc-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ap-accent-strong);
    margin-bottom: 14px;
}

.oc-eyebrow--success {
    color: var(--ap-success-text);
}

.oc-title {
    font-family: var(--ap-font-heading);
    font-weight: 700;
    font-size: 27px;
    line-height: 1.2;
    color: var(--ap-text-primary);
    margin: 0 0 14px;
}

.oc-text {
    font-size: 15.5px;
    line-height: 1.62;
    color: var(--ap-text-muted);
    margin: 0;
    max-width: 380px;
}

.oc-text strong {
    color: var(--ap-text-primary);
}

.oc-cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border: none;
    border-radius: 11px;
    padding: 13px 22px;
    font-family: var(--ap-font-body);
    font-size: 14.5px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
}

.oc-cta--blue {
    background: #2563eb;
    box-shadow: 0 8px 20px rgba(37, 99, 235, .32);
}

.oc-cta--green {
    background: #16a34a;
    box-shadow: 0 8px 20px rgba(22, 163, 74, .3);
}

.oc-cta img {
    width: 18px;
    height: 18px;
    border-radius: 4px;
}

/* ── Footer ── */
.oc-footer {
    flex: 0 0 auto;
    border-top: 1px solid var(--ap-border);
    background: var(--ap-bg-card);
}

.oc-progress {
    height: 3px;
    background: var(--ap-bg-muted);
}

.oc-progress-fill {
    height: 100%;
    width: 0;
    background: var(--ap-accent-strong);
    transition: width .12s linear;
}

.oc-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 26px;
}

.oc-prev {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    color: var(--ap-text-muted);
    font-family: var(--ap-font-body);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 4px;
}

.oc-prev:disabled {
    opacity: .4;
    cursor: default;
}

.oc-dots {
    display: flex;
    align-items: center;
    gap: 8px;
}

.oc-dot {
    border: none;
    cursor: pointer;
    padding: 0;
    height: 8px;
    width: 8px;
    border-radius: 99px;
    background: var(--ap-border-hover);
    transition: all .25s ease;
}

.oc-dot.active {
    width: 22px;
    background: var(--ap-accent-strong);
}

.oc-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.oc-play {
    width: 32px;
    height: 32px;
    border: 1px solid var(--ap-border);
    border-radius: 9px;
    background: var(--ap-bg-card);
    color: var(--ap-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.oc-play:hover {
    background: var(--ap-bg-hover);
}

.oc-next {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--ap-accent-strong);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
    font-family: var(--ap-font-body);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.oc-next:hover {
    filter: brightness(1.06);
}

/* ============================================================================
   ANIMATIONS (ported from the design)
   ============================================================================ */
@keyframes apBlink { 0%,45%{opacity:1} 50%,95%{opacity:0} 100%{opacity:1} }
@keyframes apSpin { to { transform: rotate(360deg); } }

/* Genéricas (usadas pelos demos novos: criar / extensão / compartilhar) */
@keyframes ocRise { from { opacity:0; transform: translateY(12px); } to { opacity:1; transform: translateY(0); } }
@keyframes ocFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes ocPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(37,99,235,.4); } 50% { box-shadow: 0 0 0 6px rgba(37,99,235,0); } }

/* Scene 1: instalar (puzzle -> dropdown -> pin) */
@keyframes s1cur {
    0%   { transform: translate(205px,330px) scale(1); }
    20%  { transform: translate(339px,116px) scale(1); }
    25%  { transform: translate(339px,116px) scale(.8); }
    30%  { transform: translate(339px,116px) scale(1); }
    50%  { transform: translate(360px,200px) scale(1); }
    55%  { transform: translate(360px,200px) scale(.8); }
    60%  { transform: translate(360px,200px) scale(1); }
    80%  { transform: translate(360px,200px) scale(1); }
    100% { transform: translate(205px,330px) scale(1); }
}
@keyframes s1drop {
    0%,28%   { opacity:0; transform: translateY(-8px) scale(.96); }
    34%,80%  { opacity:1; transform: translateY(0) scale(1); }
    90%,100% { opacity:0; transform: translateY(-8px) scale(.96); }
}
@keyframes s1pin {
    0%,56%  { opacity:0; transform: scale(.3); }
    63%     { opacity:1; transform: scale(1.25); }
    70%     { opacity:1; transform: scale(1); }
    100%    { opacity:1; transform: scale(1); }
}

/* Scene 2: abrir serviço (typing + load) */
@keyframes s2cur {
    0%   { transform: translate(205px,330px) scale(1); }
    22%  { transform: translate(150px,116px) scale(1); }
    27%  { transform: translate(150px,116px) scale(.8); }
    32%  { transform: translate(150px,116px) scale(1); }
    60%  { transform: translate(150px,116px) scale(1); }
    100% { transform: translate(205px,330px) scale(1); }
}
@keyframes s2type { 0%,30%{ width:0; } 52%,100%{ width:118px; } }
@keyframes s2caret { 0%,30%{opacity:0} 31%,52%{opacity:1} 53%,100%{opacity:0} }
@keyframes s2blank { 0%,52%{opacity:1} 60%,100%{opacity:0} }
@keyframes s2page { 0%,54%{opacity:0; transform:translateY(8px)} 64%,100%{opacity:1; transform:translateY(0)} }
@keyframes s2fav  { 0%,52%{opacity:0; transform:scale(.4)} 60%,100%{opacity:1; transform:scale(1)} }

/* Scene 3: clicar no ícone -> popup */
@keyframes s3cur {
    0%   { transform: translate(205px,330px) scale(1); }
    28%  { transform: translate(375px,116px) scale(1); }
    33%  { transform: translate(375px,116px) scale(.78); }
    38%  { transform: translate(375px,116px) scale(1); }
    65%  { transform: translate(250px,250px) scale(1); }
    100% { transform: translate(205px,330px) scale(1); }
}
@keyframes s3ring { 0%,30%{opacity:0; transform:scale(.4)} 38%{opacity:.9; transform:scale(1)} 52%,100%{opacity:0; transform:scale(1.6)} }
@keyframes s3pop {
    0%,34%  { opacity:0; transform: translateY(-10px) scale(.6); }
    44%     { opacity:1; transform: translateY(0) scale(1); }
    100%    { opacity:1; transform: translateY(0) scale(1); }
}

/* Scene 4: escolher pacote + abrir menu */
@keyframes s4cur {
    0%   { transform: translate(120px,250px) scale(1); }
    24%  { transform: translate(300px,196px) scale(1); }
    29%  { transform: translate(300px,196px) scale(.8); }
    34%  { transform: translate(300px,196px) scale(1); }
    100% { transform: translate(300px,196px) scale(1); }
}
@keyframes s4menu {
    0%,30%  { opacity:0; transform: translateY(-10px) scale(.94); }
    40%     { opacity:1; transform: translateY(0) scale(1); }
    100%    { opacity:1; transform: translateY(0) scale(1); }
}
@keyframes s4arrow { 0%,24%{transform:rotate(0)} 32%,100%{transform:rotate(90deg)} }

/* Scene 5: clicar "Nova sessão" */
@keyframes s5cur {
    0%   { transform: translate(300px,150px) scale(1); }
    34%  { transform: translate(250px,196px) scale(1); }
    42%  { transform: translate(250px,196px) scale(.78); }
    48%  { transform: translate(250px,196px) scale(1); }
    100% { transform: translate(250px,196px) scale(1); }
}
@keyframes s5hl { 0%,32%{background:transparent} 40%,86%{background:rgba(96,165,250,.22)} 94%,100%{background:transparent} }

/* Scene 6: nomear sessão */
@keyframes s6sheet { 0%,14%{opacity:0; transform:translateY(16px)} 26%,100%{opacity:1; transform:translateY(0)} }
@keyframes s6cur {
    0%   { transform: translate(230px,360px) scale(1); }
    30%  { transform: translate(190px,300px) scale(1); }
    35%  { transform: translate(190px,300px) scale(.8); }
    40%  { transform: translate(190px,300px) scale(1); }
    70%  { transform: translate(320px,300px) scale(1); }
    75%  { transform: translate(320px,300px) scale(.8); }
    80%  { transform: translate(320px,300px) scale(1); }
    100% { transform: translate(230px,360px) scale(1); }
}
@keyframes s6type { 0%,40%{width:0} 64%,100%{width:120px} }
@keyframes s6caret { 0%,40%{opacity:0} 41%,64%{opacity:1} 65%,100%{opacity:0} }
@keyframes s6okidle { 0%,72%{opacity:1} 76%,100%{opacity:0} }
@keyframes s6okload { 0%,72%{opacity:0} 76%,100%{opacity:1} }

/* Scene 7: pronto */
@keyframes s7ring  { 0%{opacity:0; transform:scale(.4)} 30%{opacity:1; transform:scale(1.08)} 42%,100%{opacity:1; transform:scale(1)} }
@keyframes s7check { 0%,30%{stroke-dashoffset:34} 52%,100%{stroke-dashoffset:0} }
@keyframes s7row   { 0%,48%{opacity:0; transform:translateY(10px)} 60%,100%{opacity:1; transform:translateY(0)} }
@keyframes s7toast { 0%,40%{opacity:0; transform:translateY(-12px)} 52%{opacity:1; transform:translateY(0)} 88%{opacity:1} 100%{opacity:0; transform:translateY(-12px)} }
@keyframes s7burst { 0%,30%{opacity:0; transform:scale(.2)} 44%{opacity:1} 70%,100%{opacity:0; transform:scale(2.2)} }

/* ============================================================================
   RESPONSIVE — abaixo de 760px esconde o painel-demo e mostra só a cópia
   ============================================================================ */
@media (max-width: 760px) {
    .oc-card {
        width: 100%;
        height: auto;
        max-height: 90vh;
    }
    .oc-head {
        padding: 12px 54px 12px 14px;
        gap: 4px;
    }
    .oc-tab {
        padding: 7px 9px;
    }
    .oc-tab-label {
        display: none;
    }
    .oc-demo {
        display: none;
    }
    .oc-copy {
        flex: 1 1 100%;
        padding: 52px 28px 32px;
        min-height: 340px;
    }
    .oc-controls {
        padding: 14px 16px;
        gap: 8px;
    }
    .oc-dots {
        gap: 6px;
    }
    .oc-prev,
    .oc-next {
        white-space: nowrap;
    }
    .oc-next {
        padding: 10px 16px;
    }
}

/* ============================================================================
   REDUCED MOTION — desliga as animações demonstrativas e o auto-avanço visual
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
    .oc-card,
    .oc-track,
    .oc-demo *,
    .oc-progress-fill {
        animation: none !important;
        transition: none !important;
    }
}