/* ============================================================
   Onboarding — checklist "Primeros pasos" del dashboard.
   Scopeado .onb-*  ·  marca Sara (navy #062B63 + aqua #03DEBD).
   Aditivo: clases nuevas, no pisa nada del panel.
   ============================================================ */
.onb-card {
    --o-navy: #062B63; --o-aqua: #03DEBD; --o-aqua-2: #04E6C5; --o-aqua-d: #02A38C;
    --o-line: #e6e9ee; --o-soft: #f5f7fa; --o-tint: #eafaf6; --o-muted: #6b7280; --o-ink: #1f2937;
    background: #fff; border: 1px solid var(--o-line); border-radius: 16px;
    box-shadow: 0 10px 30px -20px rgba(6,43,99,.45); overflow: hidden; margin-bottom: 1rem;
    animation: onbRise .45s ease both;
}

/* Cabecera */
.onb-head {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1.05rem 1.25rem .9rem;
    background: linear-gradient(135deg, rgba(6,43,99,.04), rgba(4,230,197,.08));
}
.onb-head-main { display: flex; align-items: center; gap: .85rem; min-width: 0; }
.onb-head-ico {
    flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
    background: var(--o-navy); color: var(--o-aqua-2); font-size: 1.25rem;
}
.onb-title { font-weight: 800; color: var(--o-navy); font-size: 1.02rem; line-height: 1.2; }
.onb-sub   { font-size: .82rem; color: var(--o-muted); line-height: 1.3; }
.onb-head-right { display: flex; align-items: center; gap: .8rem; flex: 0 0 auto; }
.onb-count {
    font-weight: 800; font-size: .8rem; color: var(--o-aqua-d);
    background: var(--o-tint); border: 1px solid #cdeee6; border-radius: 999px; padding: .2rem .6rem;
}
.onb-dismiss-form { margin: 0; }
.onb-dismiss {
    background: none; border: 0; color: var(--o-muted); font-size: .78rem; cursor: pointer;
    text-decoration: underline; padding: .2rem .1rem; transition: color .15s ease;
}
.onb-dismiss:hover { color: var(--o-navy); }

/* Barra de progreso */
.onb-bar { height: 5px; background: var(--o-soft); position: relative; }
.onb-bar > span {
    display: block; height: 100%; border-radius: 0 3px 3px 0;
    background: linear-gradient(90deg, var(--o-aqua), var(--o-aqua-d));
    transition: width .5s ease;
}

/* Lista de pasos */
.onb-steps { list-style: none; margin: 0; padding: .4rem .6rem .7rem; }
.onb-step {
    display: flex; align-items: flex-start; gap: .8rem;
    padding: .7rem .65rem; border-radius: 12px; transition: background .15s ease;
}
.onb-step + .onb-step { border-top: 1px solid var(--o-line); }
.onb-step.is-next { background: var(--o-tint); border-top-color: transparent; }
.onb-step.is-next + .onb-step { border-top-color: transparent; }

.onb-check {
    flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; margin-top: .1rem;
    display: grid; place-items: center; font-size: .82rem; font-weight: 700;
    background: #fff; color: var(--o-muted); border: 2px solid var(--o-line);
}
.onb-step.is-next .onb-check { border-color: var(--o-aqua); color: var(--o-aqua-d); }
.onb-step.is-done .onb-check { background: var(--o-aqua-d); border-color: var(--o-aqua-d); color: #fff; }

.onb-step-ico {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; margin-top: .05rem;
    display: grid; place-items: center; font-size: 1.05rem;
    background: var(--o-soft); color: var(--o-navy);
}
.onb-step.is-done .onb-step-ico { color: #9aa3b0; }

.onb-step-body { flex: 1 1 auto; min-width: 0; }
.onb-step-title { font-weight: 700; color: var(--o-navy); font-size: .95rem; display: flex; align-items: center; gap: .5rem; }
.onb-step.is-done .onb-step-title { color: var(--o-muted); }
.onb-opt {
    font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--o-muted); background: var(--o-soft); border: 1px solid var(--o-line);
    border-radius: 999px; padding: .08rem .45rem;
}
.onb-step-blurb { font-size: .82rem; color: var(--o-muted); line-height: 1.45; margin-top: .12rem; }
.onb-step-blurb b { color: var(--o-navy); }
.onb-step.is-done .onb-step-blurb { display: none; }

.onb-step-actions { flex: 0 0 auto; display: flex; align-items: center; gap: .4rem; margin-top: .1rem; }
.onb-go {
    display: inline-flex; align-items: center; gap: .25rem; text-decoration: none;
    font-weight: 700; font-size: .82rem; color: #062B63; background: var(--o-aqua);
    padding: .35rem .7rem; border-radius: 9px; transition: background .15s ease, transform .15s ease;
}
.onb-go:hover { background: var(--o-aqua-2); transform: translateX(2px); color: #062B63; }
.onb-help { color: #b6bdc8; font-size: 1.05rem; text-decoration: none; display: grid; place-items: center; transition: color .15s ease; }
.onb-help:hover { color: var(--o-aqua-d); }

@keyframes onbRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 575px) {
    .onb-head { flex-direction: column; align-items: flex-start; gap: .6rem; }
    .onb-step { flex-wrap: wrap; }
    .onb-step-actions { width: 100%; justify-content: flex-end; }
}
@media (prefers-reduced-motion: reduce) { .onb-card { animation: none; } }