/* Tema claro das telas do cliente. O painel admin não carrega este arquivo. */
html, body {
    background: #f7f8fc !important;
    color: #1e293b;
}

.client-login-container,
.client-home,
.client-dashboard {
    background: transparent !important;
    color: #1e293b;
}

.flow-bg {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.flow-bg span {
    position: absolute;
    border-radius: 50%;
    background: rgba(148, 163, 184, .45);
    animation: flowFloat 12s ease-in-out infinite;
}

.flow-bg span:nth-child(1)  { width: 10px; height: 10px; top: 8%;  left: 6%;  animation-duration: 11s; }
.flow-bg span:nth-child(2)  { width: 16px; height: 16px; top: 14%; left: 22%; animation-duration: 13s; animation-delay: -2s; }
.flow-bg span:nth-child(3)  { width: 8px;  height: 8px;  top: 22%; left: 48%; animation-duration: 10s; animation-delay: -4s; }
.flow-bg span:nth-child(4)  { width: 22px; height: 22px; top: 10%; right: 18%; animation-duration: 14s; animation-delay: -1s; }
.flow-bg span:nth-child(5)  { width: 12px; height: 12px; top: 28%; right: 8%;  animation-duration: 11s; animation-delay: -5s; }
.flow-bg span:nth-child(6)  { width: 7px;  height: 7px;  top: 38%; left: 12%; animation-duration: 9s; animation-delay: -3s; }
.flow-bg span:nth-child(7)  { width: 18px; height: 18px; top: 46%; left: 34%; animation-duration: 15s; animation-delay: -6s; }
.flow-bg span:nth-child(8)  { width: 9px;  height: 9px;  top: 52%; right: 22%; animation-duration: 9s; animation-delay: -1s; }
.flow-bg span:nth-child(9)  { width: 14px; height: 14px; top: 62%; left: 8%;  animation-duration: 12s; animation-delay: -4s; }
.flow-bg span:nth-child(10) { width: 11px; height: 11px; top: 70%; left: 42%; animation-duration: 13s; animation-delay: -3s; }
.flow-bg span:nth-child(11) { width: 20px; height: 20px; top: 76%; right: 12%; animation-duration: 11s; animation-delay: -7s; }
.flow-bg span:nth-child(12) { width: 8px;  height: 8px;  top: 84%; left: 18%; animation-duration: 12s; animation-delay: -2s; }
.flow-bg span:nth-child(13) { width: 13px; height: 13px; top: 88%; left: 62%; animation-duration: 14s; animation-delay: -5s; }
.flow-bg span:nth-child(14) { width: 6px;  height: 6px;  top: 18%; left: 72%; animation-duration: 8s; animation-delay: -2s; }
.flow-bg span:nth-child(15) { width: 15px; height: 15px; top: 58%; left: 78%; animation-duration: 13s; animation-delay: -6s; }
.flow-bg span:nth-child(16) { width: 9px;  height: 9px;  top: 34%; left: 58%; animation-duration: 11s; animation-delay: -7s; }
.flow-bg span:nth-child(17) { width: 6px;  height: 6px;  top: 6%;  left: 36%; animation-duration: 9s; animation-delay: -1s; }
.flow-bg span:nth-child(18) { width: 8px;  height: 8px;  top: 12%; left: 84%; animation-duration: 10s; animation-delay: -4s; }
.flow-bg span:nth-child(19) { width: 7px;  height: 7px;  top: 26%; left: 16%; animation-duration: 8s; animation-delay: -2s; }
.flow-bg span:nth-child(20) { width: 11px; height: 11px; top: 32%; left: 64%; animation-duration: 12s; animation-delay: -5s; }
.flow-bg span:nth-child(21) { width: 6px;  height: 6px;  top: 42%; left: 4%;  animation-duration: 9s; animation-delay: -3s; }
.flow-bg span:nth-child(22) { width: 9px;  height: 9px;  top: 48%; right: 6%; animation-duration: 11s; animation-delay: -6s; }
.flow-bg span:nth-child(23) { width: 7px;  height: 7px;  top: 56%; left: 26%; animation-duration: 8s; animation-delay: -1s; }
.flow-bg span:nth-child(24) { width: 10px; height: 10px; top: 64%; left: 88%; animation-duration: 13s; animation-delay: -4s; }
.flow-bg span:nth-child(25) { width: 6px;  height: 6px;  top: 72%; left: 14%; animation-duration: 9s; animation-delay: -7s; }
.flow-bg span:nth-child(26) { width: 8px;  height: 8px;  top: 78%; left: 52%; animation-duration: 10s; animation-delay: -2s; }
.flow-bg span:nth-child(27) { width: 7px;  height: 7px;  top: 86%; right: 28%; animation-duration: 12s; animation-delay: -5s; }
.flow-bg span:nth-child(28) { width: 6px;  height: 6px;  top: 92%; left: 40%; animation-duration: 8s; animation-delay: -3s; }
.flow-bg span:nth-child(29) { width: 9px;  height: 9px;  top: 4%;  right: 34%; animation-duration: 11s; animation-delay: -6s; }
.flow-bg span:nth-child(30) { width: 7px;  height: 7px;  top: 40%; left: 90%; animation-duration: 9s; animation-delay: -2s; }
.flow-bg span:nth-child(31) { width: 8px;  height: 8px;  top: 20%; left: 58%; animation-duration: 10s; animation-delay: -4s; }
.flow-bg span:nth-child(32) { width: 6px;  height: 6px;  top: 66%; left: 70%; animation-duration: 8s; animation-delay: -1s; }

@keyframes flowFloat {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(18px, -22px, 0); }
}

.client-login-container,
.client-home,
.client-content,
.tutorial-wrapper,
.wrap {
    position: relative;
    z-index: 1;
}

.client-login-container::before,
.client-home::before,
.client-dashboard::before,
.card-led-wrapper::before,
.client-login-card::after,
.home-card::after,
body::before {
    display: none !important;
}

.card-led-wrapper {
    padding: 0 !important;
    background: transparent !important;
    overflow: visible !important;
}

.client-login-card,
.home-card,
.welcome-card,
.renewal-card,
.step-card,
.modal-box,
.info-card,
.plan-card,
.price-card,
.client-card {
    background: #ffffff !important;
    color: #1e293b !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
}

.client-navbar {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    backdrop-filter: none !important;
}

.client-navbar h2,
.tutorial-header .logo-text,
.greeting h1,
.welcome-card h1,
.step-title,
.modal-title,
.home-card h3,
.card-head h3,
.client-logo h1 {
    color: #0f172a !important;
    background: none !important;
    -webkit-text-fill-color: #0f172a !important;
}

.name-holo {
    color: #4f46e5 !important;
    background: none !important;
    -webkit-text-fill-color: #4f46e5 !important;
    animation: none !important;
}

.greeting-sub,
.welcome-card p,
.home-card p,
.step-subtitle,
.modal-subtitle,
.client-logo p,
.nav-back-link,
.card-body p,
.sub,
.hint,
.price-label {
    color: #64748b !important;
}

.client-login-card label,
.modal-box label,
.form-group label {
    color: #334155 !important;
}

.client-login-card .form-control,
.modal-box .form-control,
.form-control,
input,
select,
textarea {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: #d1d5db !important;
}

.client-login-card .form-control::placeholder,
.form-control::placeholder {
    color: #94a3b8 !important;
}

.progress-track {
    background: #e5e7eb !important;
}

.card {
    background: #ffffff !important;
    color: #1e293b !important;
    border-color: #e5e7eb !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .05) !important;
}

.price,
.per-year,
.confirm-name {
    color: #0f172a !important;
}

.note {
    color: #047857 !important;
    background: #ecfdf5 !important;
    border-color: #a7f3d0 !important;
}

.card h2,
.card p,
.card label,
.card .hint,
.card .price-label,
.sub,
a.back,
.eyebrow {
    color: #334155 !important;
}


.client-logo img {
    width: min(280px, 100%);
    height: auto;
    display: block;
    margin: 0 auto 8px;
}

.alert-error {
    background: #fef2f2 !important;
    color: #b91c1c !important;
    border-color: #fecaca !important;
}

.alert-success {
    background: #f0fdf4 !important;
    color: #15803d !important;
    border-color: #bbf7d0 !important;
}

.step-card p,
.step-card li,
.step-card h1,
.step-card h2,
.step-card h3,
.step-card label {
    color: #334155 !important;
}

[style*="color:#e2e8f0"],
[style*="color: #e2e8f0"],
[style*="color:#f8fafc"],
[style*="color:#cbd5e1"],
[style*="color:#a5b4fc"],
[style*="color:#c4b5fd"],
[style*="color:#a5f3fc"],
[style*="color:#fcd34d"],
[style*="color:#fde68a"],
[style*="color:#a7f3d0"],
[style*="color:#6ee7b7"],
[style*="color:rgba(255,255,255"],
[style*="color: rgba(255,255,255"] {
    color: #334155 !important;
}


.btn-logout,
.btn-nav-logout {
    background: #fff1f2 !important;
    color: #be123c !important;
    border-color: #fecdd3 !important;
}

.link-forgot,
.back-link a {
    color: #4f46e5 !important;
}

.client-dashboard p,
.client-dashboard h1,
.client-dashboard h2,
.client-dashboard h3,
.client-dashboard h4,
.client-dashboard label,
.client-dashboard li,
.client-dashboard small,
.client-dashboard .modal-box,
.client-dashboard .modal-box p,
.client-dashboard .modal-box label,
.client-dashboard .modal-box small,
.client-dashboard .modal-box .form-control,
.client-dashboard .form-control,
.client-dashboard .nav-back-link,
.client-home .modal-box,
.client-home .modal-box p,
.client-home .modal-box label,
.client-home .modal-box small,
.client-home .modal-box .form-control {
    color: #334155 !important;
}

.client-dashboard .btn-primary,
.client-dashboard button.btn-primary,
.client-home .btn-modal-primary,
.client-home .btn-modal-danger,
.client-login-card .btn,
.step-card .btn-primary,
.step-card .btn-success,
.client-device-page .btn-primary {
    color: #ffffff !important;
}

.step-card .btn-ghost,
.step-card .btn-danger,
button.ghost,
.ghost {
    color: #334155 !important;
}