/* pwa-ux-v49.css — NizonBank UX Enhancement Layer */

/* ── TOKENS ─────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  :root {
    --nzu-teal: #00BFA5;
    --nzu-teal-dim: rgba(0,191,165,.13);
    --nzu-teal-glow: rgba(0,191,165,.32);
    --nzu-blue: #0756D8;
    --nzu-success: #07855D;
    --nzu-danger: #CC2F2F;
    --nzu-warning: #D97706;
    --nzu-muted: #677B8E;
    --nzu-line: #D8E3EB;
    --nzu-ink: #0B1F35;
  }
}

/* ── CABEÇALHO DE SAUDAÇÃO (dashboard) ──────────────────────────────────── */
@media (max-width: 767.98px) {
  .nizon-page-head.nzu-head-greeting {
    min-height: 104px !important;
    padding: 18px 20px !important;
    background: linear-gradient(145deg,#061524 0%,#09355a 58%,#063f5d 100%) !important;
    border-radius: 22px !important;
  }
  .nizon-page-head.nzu-head-greeting h1 {
    font-size: 21px !important;
    letter-spacing: -.03em !important;
    line-height: 1.1 !important;
  }
  .nizon-page-head.nzu-head-greeting p {
    margin: 4px 0 0 !important;
    color: rgba(161,196,214,.9) !important;
    font-size: 11px !important;
  }
  .nzu-head-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 7px;
    padding: 3px 9px 3px 6px;
    background: rgba(0,191,165,.18);
    color: #4adfc9;
    border: 1px solid rgba(0,191,165,.28);
    border-radius: 99px;
    font: 700 9px/1 Manrope, sans-serif;
    letter-spacing: .09em;
    text-transform: uppercase;
  }
  .nzu-head-badge svg { width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:2.2 }
  .nzu-security-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    background: rgba(0,191,165,.16);
    color: #4adfc9;
    border: 1px solid rgba(0,191,165,.28);
    border-radius: 14px;
  }
  .nzu-security-icon svg { width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round }
}

/* ── GLOW TEAL NO CARTÃO (elemento-assinatura) ───────────────────────────── */
@media (max-width: 767.98px) {
  .nzu-card-glow {
    position: absolute;
    width: 210px;
    height: 210px;
    top: -75px;
    right: -60px;
    background: radial-gradient(circle, var(--nzu-teal-glow) 0%, transparent 65%);
    border-radius: 50%;
    animation: nzu-glow-breathe 4.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
  }
  @keyframes nzu-glow-breathe {
    0%,100% { transform:scale(1); opacity:.5 }
    50%      { transform:scale(1.22); opacity:1 }
  }
  .nzu-balance-reveal {
    animation: nzu-balance-appear .4s cubic-bezier(.2,.8,.2,1) .18s both;
  }
  @keyframes nzu-balance-appear {
    from { opacity:0; transform:translateY(7px) scale(.95) }
    to   { opacity:1; transform:none }
  }
}

/* ── AÇÕES RÁPIDAS — REDESENHO COMPLETO ─────────────────────────────────── */
@media (max-width: 767.98px) {
  .nizon-quick-actions {
    gap: 8px !important;
    padding: 16px 10px !important;
    border-radius: 22px !important;
    background: #fff !important;
    box-shadow: 0 12px 36px rgba(6,21,36,.10) !important;
  }
  .nizon-quick-action {
    gap: 7px !important;
    padding: 4px 0 6px !important;
  }
  .nizon-quick-action span {
    width: 48px !important;
    height: 48px !important;
    background: linear-gradient(145deg,#e8f4fb,#d8edfa) !important;
    color: var(--nzu-blue) !important;
    border-radius: 16px !important;
    box-shadow: 0 5px 14px rgba(7,86,216,.16), inset 0 1px rgba(255,255,255,.8) !important;
    transition: transform .15s, box-shadow .15s !important;
  }
  .nizon-quick-action:active span {
    transform: scale(.9) !important;
    box-shadow: 0 2px 7px rgba(7,86,216,.09) !important;
  }
  .nizon-quick-action b {
    font: 750 10px/1.25 Manrope, sans-serif !important;
    color: var(--nzu-ink) !important;
  }
  .nzu-action-hint span {
    animation: nzu-action-pulse 2s ease infinite !important;
    box-shadow: 0 5px 14px rgba(7,86,216,.16) !important;
  }
  @keyframes nzu-action-pulse {
    0%   { box-shadow:0 5px 14px rgba(7,86,216,.16),0 0 0 0 rgba(7,86,216,.38) }
    55%  { box-shadow:0 5px 14px rgba(7,86,216,.16),0 0 0 11px rgba(7,86,216,0) }
    100% { box-shadow:0 5px 14px rgba(7,86,216,.16),0 0 0 0 rgba(7,86,216,0) }
  }
}

/* ── CORES POR TIPO DE TRANSAÇÃO ────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .nizon-activity-row { transition:background .14s }
  .nizon-activity-row.nzu-credit { border-left:3px solid var(--nzu-success) !important }
  .nizon-activity-row.nzu-debit  { border-left:3px solid var(--nzu-danger)  !important }
  .nizon-activity-row.nzu-pending{ border-left:3px solid var(--nzu-warning) !important }
  .nzu-credit .nzu-amount  { color:var(--nzu-success) !important; font-weight:750 !important }
  .nzu-debit  .nzu-amount  { color:var(--nzu-danger)  !important; font-weight:750 !important }
  .nzu-pending .nzu-amount { color:var(--nzu-warning) !important; font-weight:750 !important }
}

/* ── NAVEGAÇÃO INFERIOR — REDESENHO COMPLETO ────────────────────────────── */
@media (max-width: 767.98px) {
  .nizon-app-nav {
    left: 8px !important;
    right: 8px !important;
    bottom: max(8px, var(--app-safe-bottom, 0px)) !important;
    height: 70px !important;
    padding: 7px 6px 6px !important;
    background: rgba(255,255,255,.97) !important;
    border: 1px solid rgba(7,20,38,.08) !important;
    border-radius: 26px !important;
    box-shadow: 0 22px 54px rgba(6,21,36,.24), 0 2px 8px rgba(6,21,36,.06) !important;
    backdrop-filter: blur(22px) !important;
  }
  .nizon-app-nav__item {
    border-radius: 16px !important;
    transition: color .14s, background .14s !important;
    gap: 3px !important;
  }
  .nizon-app-nav__item.is-active {
    background: rgba(7,86,216,.10) !important;
    color: var(--nzu-blue) !important;
  }
  .nizon-app-nav__item--primary {
    background: linear-gradient(145deg,#0756D8,#0690bb) !important;
    color: #fff !important;
    box-shadow: 0 10px 28px rgba(7,86,216,.34) !important;
    border-radius: 20px !important;
  }
  .nizon-app-nav__item--primary.is-active { color:#fff !important }
  .nizon-app-nav__item { position:relative }
  .nzu-nav-badge {
    position:absolute; top:4px; right:calc(50% - 23px);
    min-width:17px; height:17px; padding:0 4px;
    background:var(--nzu-danger); color:#fff;
    border:2px solid #fff; border-radius:99px;
    font:700 9px/13px Manrope,sans-serif; text-align:center;
    pointer-events:none;
  }
}

/* ── ÍCONES DAS MÉTRICAS — TEAL ─────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .nizon-metric-card .dashboard-widget__icon {
    background: linear-gradient(145deg,rgba(0,191,165,.12),rgba(7,86,216,.08)) !important;
    color: var(--nzu-teal) !important;
  }
}

/* ── RÓTULOS DE SEÇÃO ────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .nzu-section-title {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    color: var(--nzu-ink) !important;
    font: 700 13px/1 Manrope, sans-serif !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }
  .nzu-section-title::before {
    content: '';
    flex: 0 0 3px;
    width: 3px; height: 15px;
    background: linear-gradient(var(--nzu-teal), var(--nzu-blue));
    border-radius: 99px;
  }
  .nzu-see-all {
    margin-left: auto;
    color: var(--nzu-blue);
    font: 600 11px/1 Manrope, sans-serif;
    text-decoration: none !important;
  }
}

/* ── ANIMAÇÃO DE ENTRADA ESCALONADA ─────────────────────────────────────── */
@media (max-width: 767.98px) {
  @keyframes nzu-rise {
    from { opacity:0; transform:translateY(13px) }
    to   { opacity:1; transform:none }
  }
  .nzu-animate > .dashboard-widget,
  .nzu-animate > .col-xl-4,
  .nzu-animate > .nizon-quick-wrap,
  .nzu-animate > .nizon-activity-card,
  .nzu-animate > .card {
    animation: nzu-rise .3s ease both;
  }
  .nzu-animate > *:nth-child(2) { animation-delay:.05s }
  .nzu-animate > *:nth-child(3) { animation-delay:.1s  }
  .nzu-animate > *:nth-child(4) { animation-delay:.15s }
  .nzu-animate > *:nth-child(5) { animation-delay:.2s  }
  .nzu-animate > *:nth-child(6) { animation-delay:.25s }
}

/* ── TOAST DE CONEXÃO ────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .nzu-connection-toast {
    position:fixed; z-index:2147483647;
    left:14px; right:14px;
    bottom:max(92px, calc(72px + env(safe-area-inset-bottom,0px) + 12px));
    display:flex; align-items:center; gap:10px;
    padding:13px 16px;
    border-radius:15px;
    font:700 13px/1.3 Manrope,sans-serif;
    box-shadow:0 18px 44px rgba(0,0,0,.22);
    transform:translateY(18px); opacity:0;
    transition:transform .22s ease, opacity .22s ease;
    pointer-events:none;
  }
  .nzu-connection-toast.nzu-visible { transform:none; opacity:1 }
  .nzu-connection-toast--offline { background:#1E293B; color:#fff }
  .nzu-connection-toast--online  { background:var(--nzu-success); color:#fff }
  .nzu-connection-toast svg { width:17px;height:17px;flex:0 0 17px }
}

/* ── SPOTLIGHT DE BOAS-VINDAS ────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .nzu-spotlight-overlay {
    position:fixed; inset:0; z-index:9000;
    background:rgba(6,21,36,.75);
    backdrop-filter:blur(4px);
    animation:nzu-fade-in .25s ease both;
  }
  .nzu-spotlight-panel {
    position:fixed; z-index:9001;
    left:12px; right:12px;
    bottom:max(108px, calc(74px + env(safe-area-inset-bottom,0px) + 20px));
    padding:24px;
    background:#fff;
    border-radius:26px;
    box-shadow:0 32px 72px rgba(0,0,0,.3);
    animation:nzu-panel-in .3s cubic-bezier(.2,.8,.2,1) both;
  }
  @keyframes nzu-panel-in { from{opacity:0;transform:translateY(22px) scale(.97)} to{opacity:1;transform:none} }
  @keyframes nzu-fade-in  { from{opacity:0} to{opacity:1} }
  .nzu-spotlight-tag {
    display:inline-flex; align-items:center; gap:5px;
    margin-bottom:12px; padding:4px 10px;
    background:var(--nzu-teal-dim); color:#009e86;
    border-radius:99px; font:700 10px/1 Manrope,sans-serif;
    letter-spacing:.06em;
  }
  .nzu-spotlight-panel h3 { margin:0 0 8px; color:var(--nzu-ink); font:700 19px/1.2 'Space Grotesk',Manrope,sans-serif; letter-spacing:-.03em }
  .nzu-spotlight-panel p  { margin:0 0 18px; color:var(--nzu-muted); font:500 13px/1.6 Manrope,sans-serif }
  .nzu-spotlight-row { display:grid; grid-template-columns:1fr 1fr; gap:8px }
  .nzu-sp-btn {
    min-height:46px; display:flex; align-items:center; justify-content:center;
    border:0; border-radius:13px; font:700 13px/1 Manrope,sans-serif;
    cursor:pointer; touch-action:manipulation;
  }
  .nzu-sp-btn--primary { background:var(--nzu-blue); color:#fff; box-shadow:0 8px 20px rgba(7,86,216,.24) }
  .nzu-sp-btn--ghost   { background:#F0F4F8; color:var(--nzu-muted) }
  .nzu-spotlight-dots  { display:flex; justify-content:center; gap:6px; margin-top:16px }
  .nzu-dot { width:6px;height:6px;border-radius:50%;background:var(--nzu-line);transition:width .2s,background .2s,border-radius .2s }
  .nzu-dot--active { width:20px;border-radius:3px;background:var(--nzu-blue) }
}

/* ── PULL-TO-REFRESH ─────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .nzu-ptr-indicator {
    position:fixed; z-index:9999;
    top:max(14px, env(safe-area-inset-top,0px));
    left:50%; transform:translateX(-50%) translateY(-12px);
    display:flex; align-items:center; gap:8px;
    padding:9px 18px;
    background:#fff; color:var(--nzu-blue);
    border:1px solid rgba(7,86,216,.16);
    border-radius:999px;
    font:700 12px/1 Manrope,sans-serif;
    box-shadow:0 8px 26px rgba(0,0,0,.12);
    opacity:0; transition:opacity .18s, transform .18s;
  }
  .nzu-ptr-indicator.nzu-visible { opacity:1; transform:translateX(-50%) translateY(0) }
  .nzu-ptr-indicator svg { width:16px;height:16px }
}

/* ── ESTADO VAZIO ────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .nzu-empty-state { display:flex; flex-direction:column; align-items:center; padding:32px 20px; text-align:center }
  .nzu-empty-state__icon { width:60px;height:60px;display:grid;place-items:center;margin-bottom:14px;background:var(--nzu-teal-dim);color:var(--nzu-teal);border-radius:18px }
  .nzu-empty-state__icon svg { width:28px;height:28px }
  .nzu-empty-state h4 { margin:0 0 7px;color:var(--nzu-ink);font:700 15px/1.25 'Space Grotesk',sans-serif;letter-spacing:-.02em }
  .nzu-empty-state p  { margin:0;color:var(--nzu-muted);font:500 12px/1.6 Manrope,sans-serif;max-width:220px }
}

/* ── BOTÕES PRIMÁRIOS — TEXTURA ─────────────────────────────────────────── */
@media (display-mode:standalone) and (max-width:767.98px) {
  .dashboard-body .btn--base, .account .btn--base {
    background: linear-gradient(135deg,#0756D8,#0592be) !important;
    box-shadow: 0 12px 28px rgba(7,86,216,.28) !important;
    font-weight: 800 !important;
  }
  .dashboard-body .btn--base:active, .account .btn--base:active {
    transform: translateY(1px) !important;
    box-shadow: 0 6px 14px rgba(7,86,216,.16) !important;
  }
}

/* ── MOTION SEGURO ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce) {
  .nzu-card-glow, .nzu-balance-reveal, .nzu-action-hint span,
  .nzu-animate > *, .nzu-spotlight-panel, .nzu-connection-toast, .nzu-ptr-indicator {
    animation:none !important;
    transition:none !important;
  }
}