/* Design da noite dentro da app: carregado depois de todos os outros estilos.
   Só muda a aparência. IDs, classes e lógica da app ficam iguais. O tema claro mantém as cores próprias. */
@font-face { font-family: 'Archivo Variable'; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%; src: url('/fonts/archivo-latin-wdth-normal.woff2') format('woff2-variations'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Archivo Variable'; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%; src: url('/fonts/archivo-latin-ext-wdth-normal.woff2') format('woff2-variations'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --n-acento: #2563EB; --n-sup: #0F172A; --n-sup-2: #1E293B; --n-t1: #CBD5E1; --n-t2: #94A3B8; --n-t3: #64748B;
  --n-ease-out: cubic-bezier(.22, 1, .36, 1);
  --n-ease-snap: cubic-bezier(.3, .9, .2, 1);
}
html[data-theme="light"], body[data-theme="light"] { --n-acento: #2563EB; --n-sup: #FFFFFF; --n-sup-2: #E2E8F0; --n-t1: #334155; --n-t2: #475569; --n-t3: #64748B; }

:root, html, body,
html:not([data-theme="light"]), body:not([data-theme="light"]) { --font: 'Archivo Variable', 'Archivo', system-ui, sans-serif !important; }
html:not([data-theme="light"]), body:not([data-theme="light"]), html[data-theme="dark"], body[data-theme="dark"] {
  --n-acento: #F2A65A; --n-sup: #161412; --n-sup-2: #24211F; --n-t1: #D8D2CA; --n-t2: #A39D96; --n-t3: #6F6A64;
  --bg: #0E0D0C !important; --bg2: #161412 !important; --bg3: #1C1917 !important; --card: #161412 !important;
  --primary: #F2EDE6 !important; --purple: #F2A65A !important; --RapiMoney: #F2A65A !important;
  --text: #F2EDE6 !important; --text2: #A39D96 !important; --text3: #6F6A64 !important;
  --border: rgba(242, 237, 230, .14) !important;
}
body { font-family: var(--font) !important; }
html:not([data-theme="light"]) body,
html:not([data-theme="light"]) #mainApp,
html:not([data-theme="light"]) .screen,
html:not([data-theme="light"]) .page,
html:not([data-theme="light"]) .page.active,
html:not([data-theme="light"]) .main-content { background: #0E0D0C !important; color: #F2EDE6; }

button, input, select, textarea { font-family: var(--font) !important; }
.page-header h2, .page-title, .section-title h2 { font-stretch: 118%; font-weight: 450 !important; letter-spacing: -.02em; }
:focus-visible { outline: 2px solid #F2A65A; outline-offset: 4px; }

/* botões e superfícies, no tema escuro */
html:not([data-theme="light"]) .btn-primary { background: #F2EDE6 !important; color: #0E0D0C !important; border: 0 !important; box-shadow: none !important; font-weight: 500 !important; font-stretch: 104%; transition: transform .45s var(--n-ease-snap), box-shadow .45s var(--n-ease-snap) !important; }
html:not([data-theme="light"]) .btn-primary:hover { box-shadow: 0 8px 34px rgba(242, 166, 90, .28) !important; }
html:not([data-theme="light"]) .btn-primary:disabled { background: #24211F !important; color: #6F6A64 !important; }
html:not([data-theme="light"]) .btn-primary *:not(svg):not(path) { color: inherit !important; }
.btn-primary:active, .quick-btn:active, .nav-btn:active { transform: scale(.97); }
html:not([data-theme="light"]) input:focus, html:not([data-theme="light"]) select:focus, html:not([data-theme="light"]) textarea:focus { border-color: #F2A65A !important; box-shadow: none !important; }

/* barra de cima e navegação */
html:not([data-theme="light"]) .top-bar { background: rgba(14, 13, 12, .74) !important; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 0 !important; box-shadow: none !important; }
html:not([data-theme="light"]) .bottom-nav { background: rgba(14, 13, 12, .86) !important; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-top: 1px solid rgba(242, 237, 230, .14) !important; box-shadow: none !important; }
html:not([data-theme="light"]) .nav-btn { color: #6F6A64 !important; background: none !important; transition: color .35s var(--n-ease-snap), transform .45s var(--n-ease-snap); }
html:not([data-theme="light"]) .nav-btn.active { color: #F2EDE6 !important; }
html:not([data-theme="light"]) .nav-btn span { color: inherit !important; font-stretch: 104%; font-weight: 450 !important; }
html:not([data-theme="light"]) .nav-btn svg { color: inherit !important; stroke: currentColor !important; filter: none !important; }
html:not([data-theme="light"]) .nav-btn.active:not(#navRechargeCenter)::after { content: ''; position: absolute; top: 3px; width: 5px; height: 5px; border-radius: 50%; background: #F2A65A; box-shadow: 0 0 7px 2px rgba(242, 166, 90, .75); animation: nAcende .5s var(--n-ease-out) both; }
.nav-btn { position: relative; }
html:not([data-theme="light"]) .nav-center-btn { background: #F2EDE6 !important; color: #0E0D0C !important; border: 0 !important; box-shadow: 0 6px 26px rgba(242, 166, 90, .22) !important; }
html:not([data-theme="light"]) .nav-center-btn svg { stroke: #0E0D0C !important; color: #0E0D0C !important; }
@keyframes nAcende { from { opacity: 0; transform: scale(.2); } }

/* janelas de aviso */
html:not([data-theme="light"]) .swal2-popup { background: #161412 !important; color: #F2EDE6 !important; border: 1px solid rgba(242, 237, 230, .14); border-radius: 18px !important; font-family: var(--font) !important; }
html:not([data-theme="light"]) .swal2-title { color: #F2EDE6 !important; font-stretch: 118%; font-weight: 450 !important; }
html:not([data-theme="light"]) .swal2-html-container { color: #A39D96 !important; }
html:not([data-theme="light"]) .swal2-confirm { background: #F2EDE6 !important; color: #0E0D0C !important; border-radius: 23px !important; box-shadow: none !important; font-weight: 500 !important; }
html:not([data-theme="light"]) .swal2-cancel { background: #24211F !important; color: #F2EDE6 !important; border-radius: 23px !important; box-shadow: none !important; }
html:not([data-theme="light"]) .swal2-icon.swal2-info, html:not([data-theme="light"]) .swal2-icon.swal2-question { border-color: #F2A65A !important; color: #F2A65A !important; }

/* ---------- dashboard ---------- */
#personalDashboard { position: relative; container-type: inline-size; overflow: clip; min-height: 100%; user-select: none; -webkit-user-select: none; }
#painelFundo { position: absolute; left: 0; top: 150px; width: 100%; height: 520px; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s var(--n-ease-out); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 74%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 74%, transparent 100%); }
#painelFundo.is-pronto { opacity: 1; }
#painelPalavra { position: absolute; left: 0; right: 0; top: 190px; z-index: 0; margin: 0; text-align: center; color: #24211F; font-size: 19.4cqw; font-stretch: 125%; font-weight: 500; line-height: 1; letter-spacing: -.02em; white-space: nowrap; pointer-events: none; user-select: none; }
#personalDashboard > *:not(#painelFundo):not(#painelPalavra) { position: relative; z-index: 1; }

#personalDashboard .balance-card { background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; margin: 0 !important; padding: 66px 22px 0 !important; min-height: 0 !important; overflow: visible !important; }
#personalDashboard .balance-card-bg { display: none !important; }
#personalDashboard .balance-header { color: #A39D96 !important; font-size: 14px !important; font-stretch: 104%; font-weight: 450 !important; text-transform: none !important; letter-spacing: 0 !important; }
#personalDashboard .balance-header span { color: inherit !important; }
#personalDashboard .eye-btn { background: none !important; border: 0 !important; color: #A39D96 !important; box-shadow: none !important; }
#personalDashboard .balance-amount { margin: 2px 0 8px !important; display: flex; align-items: baseline; gap: 8px; }
#personalDashboard .amount-value { color: #F2EDE6 !important; -webkit-text-fill-color: #F2EDE6 !important; background: none !important; font-size: clamp(50px, 15cqw, 92px) !important; font-stretch: 125%; font-weight: 400 !important; letter-spacing: -.045em !important; line-height: 1 !important; text-shadow: none !important; }
#personalDashboard .amount-currency { color: #A39D96 !important; font-size: 20px !important; font-weight: 400 !important; }
#personalDashboard .balance-sub { color: #6F6A64 !important; }
#personalDashboard .balance-footer { display: flex !important; justify-content: space-between; align-items: center; color: #6F6A64 !important; font-size: 13px !important; border: 0 !important; padding: 0 !important; margin: 0 !important; }
#personalDashboard .balance-footer strong { color: #A39D96 !important; font-weight: 450 !important; }
#personalDashboard #userRegionTag { background: none !important; border: 0 !important; padding: 0 !important; color: #A39D96 !important; font-size: 13px !important; font-weight: 450 !important; }

#personalDashboard .quick-actions-title { display: none !important; }
#personalDashboard #dashboardActions { display: flex !important; justify-content: center; gap: 26px; margin: 118px 16px 150px !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
#personalDashboard .quick-btn { display: flex; flex-direction: column; align-items: center; gap: 9px; background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; width: auto !important; min-width: 74px; transition: transform .45s var(--n-ease-snap); }
#personalDashboard .quick-btn:hover { transform: translateY(-3px); }
#personalDashboard .qa-icon { width: 60px !important; height: 60px !important; min-width: 60px !important; min-height: 60px !important; border-radius: 50% !important; background: #F2EDE6 !important; color: #0E0D0C !important; border: 0 !important; box-shadow: 0 8px 30px rgba(0, 0, 0, .45) !important; display: flex !important; align-items: center; justify-content: center; transition: box-shadow .45s var(--n-ease-snap); }
#personalDashboard .quick-btn:hover .qa-icon { box-shadow: 0 8px 34px rgba(242, 166, 90, .4) !important; }
#personalDashboard .qa-icon svg { stroke: #0E0D0C !important; color: #0E0D0C !important; width: 24px !important; height: 24px !important; filter: none !important; }
#personalDashboard .quick-btn > span { color: #F2EDE6 !important; font-size: 13px !important; font-stretch: 104%; font-weight: 500 !important; text-shadow: 0 1px 10px rgba(0, 0, 0, .85); margin: 0 !important; }

#personalDashboard #homeActiveCallMinutesBanner { background: #161412 !important; border: 1px solid rgba(242, 237, 230, .14) !important; box-shadow: none !important; }
#personalDashboard #homeActiveCallMinutesBanner > div > div:first-child { background: #24211F !important; }
#personalDashboard #homeCallMinutesSub, #personalDashboard #homeActiveCallMinutesBanner > span { color: #F2A65A !important; }

#personalDashboard .onboarding-card { margin: 0 20px 28px !important; background: none !important; border: 0 !important; border-top: 1px solid rgba(242, 237, 230, .14) !important; border-radius: 0 !important; box-shadow: none !important; padding: 20px 0 0 !important; }
#personalDashboard .onboarding-title { font-stretch: 118%; font-weight: 450 !important; color: #F2EDE6 !important; }
#personalDashboard .onboarding-sub, #personalDashboard .step-desc { color: #6F6A64 !important; }
#personalDashboard .step-title { color: #F2EDE6 !important; font-weight: 450 !important; }
#personalDashboard .onboarding-step { background: none !important; border: 0 !important; border-bottom: 1px solid rgba(242, 237, 230, .14) !important; border-radius: 0 !important; box-shadow: none !important; padding-inline: 0 !important; transition: transform .45s var(--n-ease-snap); }
#personalDashboard .onboarding-step:hover { transform: translateX(6px); }
#personalDashboard .onboarding-bar-fill { background: #F2A65A !important; box-shadow: 0 0 10px rgba(242, 166, 90, .6); }
#personalDashboard #onboardingPercent { color: #F2A65A !important; }

/* tema claro: o dashboard fica legível, com as ondas em azul */
html[data-theme="light"] #painelPalavra { display: none; }
html[data-theme="light"] #personalDashboard #dashboardActions { margin: 74px 16px 104px !important; }
html[data-theme="light"] #personalDashboard .amount-value, html[data-theme="light"] #personalDashboard .step-title, html[data-theme="light"] #personalDashboard .onboarding-title, html[data-theme="light"] #personalDashboard .quick-btn > span { color: #0F172A !important; -webkit-text-fill-color: #0F172A !important; text-shadow: none; }

/* ---------- movimento ---------- */
@media (prefers-reduced-motion: no-preference) {
  .page.active > *, #personalDashboard > *:not(#painelFundo):not(#painelPalavra) { animation: nSobe .7s var(--n-ease-out) backwards; }
  .page.active > *:nth-child(2) { animation-delay: 60ms; }
  .page.active > *:nth-child(3) { animation-delay: 120ms; }
  .page.active > *:nth-child(4) { animation-delay: 180ms; }
  #personalDashboard > .balance-card { animation-delay: 80ms; }
  #personalDashboard #dashboardActions { animation-delay: 420ms; }
  #personalDashboard #onboardingChecklist { animation-delay: 520ms; }
  #personalDashboard .amount-value { animation: nChega 1s var(--n-ease-out) 120ms backwards; }
  #painelPalavra { animation: nSurge 1.4s var(--n-ease-out) backwards; }
  @keyframes nSobe { from { opacity: 0; transform: translateY(14px); } }
  @keyframes nChega { from { opacity: 0; filter: blur(12px); transform: translateX(5%); } }
  @keyframes nSurge { from { opacity: 0; } }
}

/* ---------- tema branco ---------- */
html[data-theme="light"], body[data-theme="light"] { --n-acento: #1D4ED8; --n-sup: #FFFFFF; --n-sup-2: #EEF2F7; --n-t1: #1E293B; --n-t2: #334155; --n-t3: #475569; --text3: #475569 !important; }
html[data-theme="light"] .btn-primary, html[data-theme="light"] .btn-primary:hover { background: #1D4ED8 !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF; border: 0 !important; box-shadow: none !important; }
html[data-theme="light"] .btn-primary * { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF; }
html[data-theme="light"] .btn-primary:disabled { background: #CBD5E1 !important; color: #334155 !important; -webkit-text-fill-color: #334155; }
html[data-theme="light"] .btn-primary:disabled * { color: #334155 !important; -webkit-text-fill-color: #334155; }
html[data-theme="light"] #personalDashboard .qa-icon { background: #1D4ED8 !important; box-shadow: none !important; }
html[data-theme="light"] #personalDashboard .qa-icon svg { stroke: #FFFFFF !important; color: #FFFFFF !important; }
html[data-theme="light"] #personalDashboard .onboarding-bar-fill { background: #1D4ED8 !important; box-shadow: none; }
html[data-theme="light"] input::placeholder, html[data-theme="light"] textarea::placeholder { color: #64748B !important; -webkit-text-fill-color: #64748B; opacity: 1; }
html[data-theme="light"] input, html[data-theme="light"] textarea, html[data-theme="light"] select { background: #FFFFFF !important; color: #0F172A !important; -webkit-text-fill-color: #0F172A; border-color: #CBD5E1 !important; }
html[data-theme="light"] input:focus, html[data-theme="light"] textarea:focus, html[data-theme="light"] select:focus { border-color: #1D4ED8 !important; box-shadow: none !important; }
html[data-theme="light"] :focus-visible { outline-color: #1D4ED8; }
html[data-theme="light"] .nav-center-btn { background: #1D4ED8 !important; color: #FFFFFF !important; border: 0 !important; box-shadow: none !important; }
html[data-theme="light"] .nav-center-btn svg { stroke: #FFFFFF !important; color: #FFFFFF !important; }
html[data-theme="light"] #personalDashboard .onboarding-card { background: #FFFFFF !important; border: 1px solid #E2E8F0 !important; border-radius: 16px !important; padding: 16px !important; }
html[data-theme="light"] #personalDashboard .onboarding-step { border-bottom-color: #E2E8F0 !important; }

/* ---------- janelas de baixo ----------
   A app tem zoom a 80%, e isso encolhia também o limite de altura destas janelas:
   80vh dava só 64% do ecrã e a lista ficava cortada. Aqui o limite compensa o zoom. */
:root { --n-zoom: 1; }
.zoom-90 { --n-zoom: .9; }
.zoom-80 { --n-zoom: .8; }
.bottom-sheet { max-height: calc(92vh / var(--n-zoom)) !important; max-height: calc(92dvh / var(--n-zoom)) !important; padding-bottom: calc(28px + env(safe-area-inset-bottom)) !important; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
#sheetLanguages .lang-options-list { gap: 10px; }

/* idioma em página completa */
#overlayLanguages { align-items: stretch !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
#sheetLanguages { width: 100% !important; max-width: none !important; height: calc(100vh / var(--n-zoom)) !important; height: calc(100dvh / var(--n-zoom)) !important; max-height: none !important; min-height: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: calc(20px + env(safe-area-inset-top)) 24px calc(28px + env(safe-area-inset-bottom)) !important; }
#sheetLanguages .bs-handle { display: none !important; }
#sheetLanguages .bs-header h3, #sheetLanguages .bs-header [class*="title"] { font-stretch: 118%; }
#sheetLanguages .lang-options-list, #sheetLanguages .bs-header { width: 100%; max-width: 640px; margin-inline: auto; box-sizing: border-box; }

/* dados pessoais, segurança e país de destino: também em página completa */
#personalDataSheet, #securitySheet, #countryModalOverlay { align-items: stretch !important; justify-content: flex-start !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
#personalDataSheetInner, #securitySheetInner, #countryModalOverlay .country-modal-sheet { width: 100% !important; max-width: none !important; height: calc(100vh / var(--n-zoom)) !important; height: calc(100dvh / var(--n-zoom)) !important; max-height: none !important; min-height: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
#personalDataSheetInner, #securitySheetInner { padding: calc(20px + env(safe-area-inset-top)) 24px calc(28px + env(safe-area-inset-bottom)) !important; }
#countryModalOverlay .country-modal-sheet { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
#personalDataSheetInner .bs-handle, #securitySheetInner .bs-handle, #countryModalOverlay .country-sheet-handle { display: none !important; }
#personalDataSheetInner > *, #securitySheetInner > *, #countryModalOverlay .country-modal-sheet > * { width: 100%; max-width: 640px; margin-left: auto; margin-right: auto; box-sizing: border-box; }

/* na app Android o espaço do relógio e da bateria já é reservado de forma nativa */
html.n-app-android .top-bar { padding-top: 8px !important; min-height: calc(3.25rem + 8px) !important; }
html.n-app-android .page-header { padding-top: 10px !important; }
html.n-app-android #personalDashboard .balance-card { padding-top: 46px !important; }

/* ecrãs largos (iPad, computador): o Início fica numa coluna centrada, como no telemóvel */
@media (min-width: 700px) {
  #personalDashboard { max-width: 560px; margin-left: auto !important; margin-right: auto !important; }
}

/* ecrã de entrada: separadores Telemóvel / E-mail e ligações de baixo */
.login-tabs { display: flex !important; gap: 4px !important; padding: 4px !important; margin-bottom: 18px !important; border-radius: 14px !important; background: var(--n-sup-2) !important; border: 0 !important; }
.login-tab { flex: 1; height: 40px; border: 0 !important; border-radius: 10px !important; background: transparent !important; color: var(--text2) !important; font-size: 14px !important; font-weight: 500 !important; cursor: pointer; transition: background-color .3s var(--n-ease-snap), color .3s var(--n-ease-snap); }
.login-tab.active { background: var(--bg) !important; color: var(--text) !important; box-shadow: 0 1px 6px rgba(0, 0, 0, .12) !important; }
#loginStep1 .btn-ghost, #loginStep2 .btn-ghost, #forgotPinStep .btn-ghost { border: 0 !important; background: none !important; padding: 10px 0 !important; width: auto !important; color: var(--text2) !important; font-weight: 500 !important; }
#loginStep1 .btn-ghost:hover { color: var(--text) !important; }
#forgotPinBtn { color: var(--n-acento) !important; }
html[data-theme="light"] .auth-form .btn-primary, html[data-theme="light"] .screen .btn-primary { background: #1D4ED8 !important; background-image: none !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; box-shadow: none !important; }
html:not([data-theme="light"]) .auth-form .btn-primary, html:not([data-theme="light"]) .screen .btn-primary { background-image: none !important; }
#loginStep1 #forgotPinBtn { color: var(--n-acento) !important; }
html[data-theme="light"] #onboardNext, html[data-theme="light"] #registerBtn, html[data-theme="light"] #loginReqPinBtn, html[data-theme="light"] #loginSubmitPinBtn, html[data-theme="light"] #forgotSubmitBtn, html[data-theme="light"] #verifyOtpBtn { background: #1D4ED8 !important; background-image: none !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; }