/* ============================================================
   KIDESIGN OS v2 — Design System unificado
   Site institucional + CRM + Área do Cliente
   Camada aditiva: não remove nada do CSS/JS existente,
   apenas eleva o acabamento visual em toda a plataforma.
   ============================================================ */

:root{
  --k-red:#ff0026;
  --k-red-bright:#ff2244;
  --k-red-dark:#7a0012;
  --k-black:#030304;
  --k-panel:rgba(255,255,255,.045);
  --k-panel-strong:rgba(255,255,255,.08);
  --k-line:rgba(255,255,255,.12);
  --k-line-soft:rgba(255,255,255,.07);
  --k-muted:#a6a6ad;
  --k-green:#39ffb6;
  --k-yellow:#ffd166;
  --k-blue:#5ac8ff;
  --k-radius:22px;
  --k-radius-sm:14px;
  --k-ease:cubic-bezier(.22,.9,.3,1);
}

/* Scrollbar futurista, consistente em todo o ecossistema */
*{scrollbar-width:thin;scrollbar-color:rgba(255,0,38,0.652) rgba(255,255,255,.05)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:rgba(255,255,255,.03)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--k-red),var(--k-red-dark));border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--k-red-bright)}

/* Foco acessível com brilho de marca, sem quebrar layout */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:2px solid rgba(255,0,38,0.92)!important;
  outline-offset:2px;
  box-shadow:0 0 0 5px rgba(255,0,38,0.232)!important;
}

/* Seleção de texto com identidade */
::selection{background:rgba(255,0,38,0.507);color:#fff}

/* ---------- Utilitários "glass" reutilizáveis ---------- */
.k-glass{
  position:relative;
  background:linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.02));
  border:1px solid var(--k-line);
  border-radius:var(--k-radius);
  backdrop-filter:blur(18px) saturate(1.15);
  -webkit-backdrop-filter:blur(18px) saturate(1.15);
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  transition:transform .35s var(--k-ease),box-shadow .35s var(--k-ease),border-color .35s var(--k-ease);
}
.k-glass:hover{border-color:rgba(255,0,38,0.58);box-shadow:0 26px 70px rgba(0,0,0,.45),0 0 30px rgba(255,0,38,0.087)}

.k-glow-orb{position:fixed;border-radius:50%;filter:blur(70px);opacity:.5;pointer-events:none;z-index:0;animation:kFloat 12s ease-in-out infinite}
.k-glow-orb.k-a{width:340px;height:340px;background:var(--k-red);left:-120px;top:-60px}
.k-glow-orb.k-b{width:420px;height:420px;background:var(--k-red-dark);right:-160px;bottom:-100px;animation-delay:-6s}

@keyframes kFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(18px,-24px)}}
@keyframes kFadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes kPulse{0%,100%{box-shadow:0 0 0 0 rgba(57,255,182,.5)}50%{box-shadow:0 0 0 7px rgba(57,255,182,0)}}
@keyframes kShimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}

/* ---------- Cards, painéis e mini-métricas (site, CRM e portal) ---------- */
.card,.panel,.mini,.mini-card,.side,.item,.task-item,.timeline-item,
.service-card,.process-card,.plan-card,.testimonial-card,.case-card{
  animation:kFadeUp .5s var(--k-ease) both;
}
.card:hover,.panel:hover,.mini:hover,.mini-card:hover{
  transform:translateY(-3px);
}
.mini,.mini-card{
  transition:transform .3s var(--k-ease),box-shadow .3s var(--k-ease),border-color .3s var(--k-ease)!important;
  position:relative;overflow:hidden;
}
.mini:before,.mini-card:before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.06) 50%,transparent 70%);
  background-size:200% 100%;opacity:0;transition:opacity .3s;
}
.mini:hover:before,.mini-card:hover:before{opacity:1;animation:kShimmer 1.4s linear infinite}
.mini:hover,.mini-card:hover{border-color:rgba(255,0,38,0.58)!important;box-shadow:0 16px 40px rgba(255,0,38,0.174)!important}

/* ---------- Barra de progresso animada (site/CRM/portal) ---------- */
.progress{position:relative;overflow:hidden}
.progress span{
  position:relative;
  background:linear-gradient(90deg,var(--k-red),var(--k-red-bright) 60%,#ffb3c1)!important;
  transition:width 1s var(--k-ease);
  box-shadow:0 0 16px rgba(255,0,38,0.725);
}
.progress span:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  width:40%;animation:kShimmer 2.2s linear infinite;
}

/* ---------- Botões com brilho consistente ---------- */
.primary,.btn-primary,.nav-cta,.mobile-cta,.k-btn{
  position:relative;overflow:hidden;
  transition:transform .25s var(--k-ease),box-shadow .25s var(--k-ease),filter .25s var(--k-ease)!important;
}
.primary:hover,.btn-primary:hover,.nav-cta:hover,.k-btn:hover{
  transform:translateY(-2px);
  filter:brightness(1.08);
}
.primary:active,.btn-primary:active{transform:translateY(0) scale(.98)}

/* ---------- Badges de status (usados no checklist da área do cliente) ---------- */
.k-status-list{display:grid;gap:10px;margin:18px 0}
.k-status-item{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;border-radius:16px;
  border:1px solid var(--k-line-soft);
  background:rgba(255,255,255,.035);
  animation:kFadeUp .45s var(--k-ease) both;
}
.k-status-dot{width:11px;height:11px;border-radius:50%;flex:none;box-shadow:0 0 0 4px rgba(255,255,255,.05)}
.k-status-item.done .k-status-dot{background:var(--k-green);box-shadow:0 0 12px rgba(57,255,182,.7)}
.k-status-item.doing .k-status-dot{background:var(--k-yellow);box-shadow:0 0 12px rgba(255,209,102,.6);animation:kPulse 1.6s infinite}
.k-status-item.pending .k-status-dot{background:rgba(255,255,255,.28)}
.k-status-item span{font-weight:700;color:#fff}
.k-status-item.pending span{color:var(--k-muted)}
.k-status-item small{margin-left:auto;color:var(--k-muted);font-weight:600;letter-spacing:.02em}

/* ---------- Card de "Próxima ação" ---------- */
.k-next-action{
  margin-top:18px;padding:22px 24px;border-radius:20px;
  background:linear-gradient(135deg,rgba(255,0,38,0.261),rgba(255,255,255,.03));
  border:1px solid rgba(255,0,38,0.507);
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  box-shadow:0 0 40px rgba(255,0,38,0.116);
}
.k-next-action .k-na-label{
  text-transform:uppercase;letter-spacing:.16em;font-size:11px;font-weight:900;color:var(--k-red-bright);
  display:block;margin-bottom:6px;
}
.k-next-action p{margin:0;font-size:17px;font-weight:700;color:#fff;max-width:520px}
.k-next-action.k-empty{
  background:linear-gradient(135deg,rgba(57,255,182,.14),rgba(255,255,255,.03));
  border-color:rgba(57,255,182,.35);box-shadow:0 0 40px rgba(57,255,182,.08);
}
.k-next-action.k-empty .k-na-label{color:var(--k-green)}

/* ---------- Sidebars (CRM e portal) com toque premium ---------- */
.side,aside.sidebar{position:sticky;top:18px}
.nav .nav,button.nav,.nav-link{position:relative}
.nav-link.active,.nav.active{position:relative}
.nav-link.active:before,.nav.active:before{
  content:"";position:absolute;left:-10px;top:50%;transform:translateY(-50%);
  width:4px;height:60%;border-radius:4px;
  background:linear-gradient(180deg,var(--k-red),var(--k-red-bright));
  box-shadow:0 0 10px rgba(255,0,38,0.92);
}

/* ---------- Cabeçalho / topo (área logada) ---------- */
.topbar,.top{position:relative}
.topbar:after,.top:after{
  content:"";position:absolute;left:0;right:0;bottom:-9px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,0,38,0.507),transparent);
}
.status-pill{position:relative;padding-left:22px!important}
.status-pill:before{
  content:"";position:absolute;left:10px;top:50%;transform:translateY(-50%);
  width:8px;height:8px;border-radius:50%;background:var(--k-green);
  box-shadow:0 0 10px rgba(57,255,182,.9);animation:kPulse 1.8s infinite;
}

/* ---------- Tabelas/listas com hover consistente ---------- */
.list .item,.compact-item,.blog-post-item,.payment-card{
  transition:transform .25s var(--k-ease),border-color .25s var(--k-ease),box-shadow .25s var(--k-ease);
}
.list .item:hover,.compact-item:hover,.blog-post-item:hover,.payment-card:hover{
  transform:translateX(4px);
  border-color:rgba(255,0,38,0.507)!important;
  box-shadow:0 10px 30px rgba(0,0,0,.3);
}

/* ---------- Responsivo: mantém tudo confortável em mobile ---------- */
@media(max-width:640px){
  .k-next-action{flex-direction:column;align-items:flex-start}
  .k-status-item small{margin-left:0}
}

/* Reduz movimento para quem prefere (acessibilidade) */
@media (prefers-reduced-motion: reduce){
  .k-glow-orb,.mini:before,.progress span:after,.status-pill:before,.k-status-item.doing .k-status-dot{animation:none!important}
  .card,.panel,.mini,.mini-card,.side,.item,.k-status-item{animation:none!important}
}