/* ==========================================================
 * Onboarding Wizard — Swiftcode-Sistema-visual
 * Sistema de diseño institucional y tokens compartidos
 * ========================================================== */

:root {
    --ob-bg:          #ffffff;
    --ob-card:        var(--paper, #fffdf8);
    --ob-field:       #ffffff;
    --ob-text:        var(--navy-900, #002855);
    --ob-text-2:      var(--ink, #0b2a4a);
    --ob-muted:       var(--muted, #5d7088);
    --ob-faint:       var(--faint, #93a4b8);
    --ob-accent:      var(--aqua-500, #08a4f4);
    --ob-accent-2:    var(--aqua-600, #0784d0);
    --ob-accent-glow: rgba(8, 164, 244, 0.28);
    --ob-border:      var(--line, #e8edf3);
    --ob-border-2:    var(--line-cool, #dbe7f1);
    --ob-danger:      var(--danger, #e5484d);
    --ob-font:        'Montserrat', system-ui, -apple-system, sans-serif;
    --ob-font-display:'Montserrat', system-ui, sans-serif;
    --ob-font-mono:   'JetBrains Mono', ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body.ob-body {
    font-family: var(--ob-font);
    color: var(--ob-text-2);
    background-color: #ffffff;
    background-image:
        radial-gradient(60rem 40rem at 8% -8%, rgba(8, 164, 244, 0.08), transparent 60%),
        radial-gradient(48rem 36rem at 102% 0%, rgba(8, 164, 244, 0.05), transparent 55%);
    background-attachment: fixed;
    min-height: 100vh;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 3rem 1.5rem;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    position: relative; overflow-x: hidden;
}

/* Container */
.ob-wrapper { position: relative; z-index: 1; width: 100%; max-width: 600px; }

/* Logo */
.ob-logo { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-bottom: 2rem; }
.ob-logo img { height: 38px; width: auto; }
.ob-logo span { font-weight: 800; font-size: 1.35rem; color: var(--ob-text); letter-spacing: -0.025em; font-family: var(--ob-font-display); }

/* Progress Bar */
.ob-progress { display: flex; align-items: center; gap: 0; margin-bottom: 2.25rem; padding: 0 1rem; }
.ob-progress-step { display: flex; align-items: center; flex: 1; position: relative; }
.ob-progress-step:last-child { flex: 0; }
.ob-progress-dot {
    width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--ob-font-mono);
    font-weight: 700; font-size: 0.875rem; flex-shrink: 0;
    background: var(--mist, #f4f9fd); color: var(--ob-muted);
    border: 1.5px solid var(--ob-border-2);
    box-shadow: 0 1px 2px rgba(0,40,85,0.04);
    transition: all 0.25s ease-out; position: relative; z-index: 1;
}
.ob-progress-step.active .ob-progress-dot {
    background: var(--ob-accent); color: #ffffff; border-color: var(--ob-accent);
    box-shadow: 0 0 0 4px var(--ob-accent-glow), 0 4px 12px rgba(8,164,244,0.35);
}
.ob-progress-step.completed .ob-progress-dot {
    background: var(--ob-accent-2); color: #ffffff; border-color: var(--ob-accent-2);
}
.ob-progress-line { flex: 1; height: 2px; background: var(--ob-border-2); margin: 0 -2px; transition: background 0.25s ease; }
.ob-progress-step.completed .ob-progress-line { background: var(--ob-accent); }

/* Card */
.ob-card {
    background: var(--ob-card);
    border: 1px solid var(--ob-border);
    border-radius: 24px;
    box-shadow: var(--shadow-card, 0 18px 40px -24px rgba(0,40,85,.28));
    padding: 2.75rem 2.5rem;
    position: relative; overflow: hidden;
}
.ob-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--aqua-400, #41b8f7), var(--ob-accent));
}

/* Step Content */
.ob-step { display: none; animation: ob-fadeIn 0.35s ease; }
.ob-step.active { display: block; }
@keyframes ob-fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.ob-step-header { text-align: center; margin-bottom: 2rem; }
.ob-step-icon {
    width: 56px; height: 56px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1.25rem;
    background: var(--aqua-50, #ecf8ff); color: var(--ob-accent);
    border: 1px solid var(--aqua-200, #b0e2fd);
    box-shadow: inset 0 0 0 1px var(--aqua-100, #d3eefe);
}
.ob-step-icon svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.75; }
.ob-step-title {
    font-family: var(--ob-font-display);
    font-weight: 800; font-size: 1.45rem; color: var(--ob-text); margin-bottom: 0.4rem;
    letter-spacing: -0.025em;
}
.ob-step-desc { font-size: 0.95rem; color: var(--ob-muted); line-height: 1.5; }

/* Form Elements */
.ob-form-group { margin-bottom: 1.25rem; }
.ob-label {
    display: block; margin-bottom: 0.5rem;
    font-size: 0.85rem; font-weight: 600; color: var(--navy-800, #052b50);
    letter-spacing: 0.01em;
}
.ob-label .ob-optional { font-weight: 400; color: var(--ob-muted); font-size: 0.8rem; }

.ob-input {
    width: 100%; height: 48px; padding: 0 1rem;
    border: 1px solid var(--ob-border-2); border-radius: 14px;
    font-family: var(--ob-font); font-size: 0.95rem;
    color: var(--ob-text-2); background: #ffffff;
    transition: all 0.2s ease;
}
.ob-input:focus { outline: none; border-color: var(--ob-accent); box-shadow: inset 0 0 0 2px var(--ob-accent), var(--shadow-glow, 0 18px 50px -18px rgba(8,164,244,.55)); }
.ob-input::placeholder { color: var(--ob-faint); }
.ob-input.error { border-color: var(--ob-danger); box-shadow: inset 0 0 0 2px var(--ob-danger); }
.ob-error-text { font-size: 0.8rem; color: var(--ob-danger); margin-top: 0.35rem; font-weight: 600; display: none; }
.ob-error-text.visible { display: block; }

.ob-select {
    width: 100%; height: 48px; padding: 0 1rem;
    border: 1px solid var(--ob-border-2); border-radius: 14px;
    font-family: var(--ob-font); font-size: 0.95rem;
    color: var(--ob-text-2); background: #ffffff;
    appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2308a4f4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 1.25rem center; padding-right: 2.5rem;
    transition: all 0.2s ease;
}
.ob-select:focus { outline: none; border-color: var(--ob-accent); box-shadow: inset 0 0 0 2px var(--ob-accent), var(--shadow-glow, 0 18px 50px -18px rgba(8,164,244,.55)); }

/* Industry type cards */
.ob-industry-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.85rem; margin-bottom: 1rem; }
.ob-industry-option {
    padding: 1.25rem 1rem; border: 1px solid var(--ob-border-2); border-radius: 14px;
    cursor: pointer; text-align: center; background: #ffffff;
    box-shadow: 0 1px 2px rgba(0,40,85,0.03);
    transition: all 0.2s ease;
}
.ob-industry-option:hover { border-color: var(--aqua-400, #41b8f7); background: var(--aqua-50, #ecf8ff); }
.ob-industry-option.selected {
    border-color: var(--ob-accent); background: var(--aqua-50, #ecf8ff);
    box-shadow: inset 0 0 0 1.5px var(--ob-accent), 0 4px 14px -4px rgba(8,164,244,0.3);
}
.ob-industry-option .ob-ind-label {
    font-size: 0.875rem; font-weight: 700; color: var(--navy-900, #002855);
    letter-spacing: 0.01em;
}

/* Row layout */
.ob-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* Buttons */
.ob-actions { display: flex; gap: 1rem; margin-top: 2.25rem; }
.ob-btn {
    flex: 1; height: 48px; padding: 0 1.5rem; border-radius: 999px;
    font-family: var(--ob-font); font-weight: 600; font-size: 0.95rem;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.2s ease-out; cursor: pointer; border: none; text-decoration: none;
}
.ob-btn-primary {
    background: var(--ob-accent); color: #ffffff;
    box-shadow: 0 10px 24px -10px rgba(8, 164, 244, 0.8);
}
.ob-btn-primary:hover {
    background: var(--ob-accent-2); transform: translateY(-2px);
    box-shadow: 0 14px 30px -10px rgba(8, 164, 244, 0.9);
}
.ob-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.ob-btn-secondary {
    background: var(--mist, #f4f9fd); color: var(--navy-800, #052b50);
    border: 1px solid var(--ob-border-2);
}
.ob-btn-secondary:hover {
    border-color: var(--ob-accent); color: var(--aqua-700, #0a68a8);
    background: var(--aqua-50, #ecf8ff);
}
.ob-btn-skip {
    background: transparent; color: var(--ob-muted);
    font-size: 0.85rem; font-weight: 600; border: none; padding: 0.6rem 1rem;
    text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.ob-btn-skip:hover { color: var(--aqua-700, #0a68a8); }

/* Captcha */
.ob-captcha-row {
    display: flex; align-items: center; gap: 0.85rem; margin-top: 0.5rem;
    padding: 0.85rem 1rem; background: var(--mist, #f4f9fd);
    border: 1px solid var(--ob-border-2); border-radius: 14px;
}
.ob-captcha-label {
    font-size: 0.85rem; font-weight: 700; color: var(--navy-800, #052b50);
    white-space: nowrap;
}
.ob-captcha-input { width: 90px; text-align: center; }

/* Loading Overlay */
.ob-loading {
    display: none; position: absolute; inset: 0;
    background: rgba(255, 253, 248, 0.92); backdrop-filter: blur(8px);
    z-index: 10; align-items: center; justify-content: center;
    flex-direction: column; gap: 1rem;
}
.ob-loading.active { display: flex; }
.ob-spinner {
    width: 40px; height: 40px; border-radius: 50%;
    border: 3px solid var(--aqua-100, #d3eefe); border-top-color: var(--ob-accent);
    animation: ob-spin 0.7s linear infinite;
}
@keyframes ob-spin { to { transform: rotate(360deg); } }
.ob-loading-text { font-size: 0.925rem; color: var(--navy-900, #002855); font-weight: 700; }

/* Footer link */
.ob-footer { text-align: center; margin-top: 1.75rem; font-size: 0.9rem; color: var(--ob-muted); }
.ob-footer a { color: var(--aqua-700, #0a68a8); font-weight: 700; text-decoration: none; }
.ob-footer a:hover { text-decoration: underline; color: var(--ob-accent-2); }

/* Responsive */
@media (max-width: 640px) {
    body.ob-body { padding: 2rem 1rem; }
    .ob-card { padding: 1.75rem 1.25rem; border-radius: 18px; }
    .ob-progress-dot { width: 32px; height: 32px; font-size: 0.8rem; }
    .ob-industry-grid { grid-template-columns: 1fr; }
    .ob-row { grid-template-columns: 1fr; }
    .ob-actions { flex-direction: column; }
}