/* SWEG UI — tokens e componentes base do novo layout (protótipo "AppyPay com cores SWEG").
   Reutiliza as variáveis de cor por marca (--color-primary-*) quando existem; os valores a seguir são o fallback SWEG. */
:root {
    --sw-primary: var(--color-primary-600, #282c31);
    --sw-primary-hover: var(--color-primary-700, #212529);
    --sw-primary-dark: #1e2225;
    --sw-brand: var(--color-primary-500, #2e3338);
    --sw-primary-soft: #f6f6f7;
    --sw-primary-ring: #e4e6e7;
    --sw-bg: #FAF8F5;
    --sw-card: #FFFFFF;
    --sw-border: #E8EBEF;
    --sw-border-strong: #E1E5EA;
    --sw-text: #1F2937;
    --sw-muted: #6B7280;
    --sw-ok: #2E9D5B;
    --sw-ok-soft: #DDF5E4;
    --sw-ok-text: #1B7A3A;
    --sw-warn-soft: #FEF0D9;
    --sw-warn-text: #1e2225;
    --sw-err-soft: #FDE2E2;
    --sw-err-text: #B42318;
    --sw-radius-card: 20px;
    --sw-radius-ctl: 10px;
    --sw-font: 'Inter', system-ui, sans-serif;
    --sw-font-logo: 'Inter Tight', 'Inter', sans-serif;
}

.sw-page { margin: 0; background: var(--sw-bg); font-family: var(--sw-font); color: var(--sw-text); }
.sw-page *, .sw-page *::before, .sw-page *::after { box-sizing: border-box; }
.sw-page a { color: var(--sw-primary-dark); }
.sw-page a:hover { color: #181b1e; }
.sw-mu { color: var(--sw-muted); }

/* Logótipo em texto */
.sw-logo { font-family: var(--sw-font-logo); font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--sw-brand); }

/* Botões */
.sw-bt { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 24px; border-radius: var(--sw-radius-ctl); font: 600 14px var(--sw-font); border: 1px solid var(--sw-border-strong); background: #fff; color: var(--sw-text); cursor: pointer; text-decoration: none; white-space: nowrap; }
.sw-bt:hover { background: var(--sw-bg); color: var(--sw-text); }
.sw-bt.pr { background: var(--sw-primary); border-color: var(--sw-primary); color: #fff; }
.sw-bt.pr:hover { background: var(--sw-primary-hover); color: #fff; }
.sw-bt.block { width: 100%; }
.sw-bt:disabled { opacity: .6; cursor: not-allowed; }
.sw-pill-bt { border-radius: 999px; padding: 0 16px; }

/* Campos */
.sw-fld { display: flex; flex-direction: column; gap: 8px; }
.sw-fl { font-size: 14px; color: #4B5563; }
.sw-fl b { color: var(--sw-primary); font-weight: 600; }
.sw-in { width: 100%; min-height: 46px; padding: 0 14px; border: 1px solid var(--sw-border-strong); border-radius: var(--sw-radius-ctl); background: #fff; font: 14px var(--sw-font); color: var(--sw-text); }
.sw-in:focus { outline: 2px solid #343a40; outline-offset: -1px; }
.sw-in[readonly], .sw-in:disabled { background: #F6F4F1; color: #4B5563; }
.sw-err { padding: 12px 14px; border-radius: var(--sw-radius-ctl); background: var(--sw-err-soft); color: var(--sw-err-text); font-size: 14px; font-weight: 500; }
.sw-info { padding: 12px 14px; border-radius: var(--sw-radius-ctl); background: var(--sw-ok-soft); color: var(--sw-ok-text); font-size: 14px; font-weight: 500; }
.sw-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: #374151; line-height: 1.4; }
.sw-check input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--sw-primary); flex: none; }

/* Cartões e pílulas */
.sw-card { background: var(--sw-card); border: 1px solid var(--sw-border); border-radius: var(--sw-radius-card); }
.sw-st { display: inline-flex; justify-content: center; min-width: 84px; padding: 4px 10px; border-radius: 8px; font-size: 12px; font-weight: 600; }
.sw-st.ok { background: var(--sw-ok-soft); color: var(--sw-ok-text); }
.sw-st.warn { background: var(--sw-warn-soft); color: var(--sw-warn-text); }
.sw-st.err { background: var(--sw-err-soft); color: var(--sw-err-text); }

/* Shell de autenticação (login / registo / OTP): formulário à esquerda, foto de marca à direita (protótipo C01–C03) */
.sw-auth { min-height: 100vh; box-sizing: border-box; padding: 12px; display: flex; flex-wrap: wrap; gap: 12px; }
.sw-auth-form { flex: 1 1 480px; min-width: 0; background: #fff; border: 1px solid #ECE7E1; border-radius: 20px; padding: 28px 36px; display: flex; flex-direction: column; }
.sw-auth-top { display: flex; justify-content: flex-end; }
.sw-auth-body { flex: 1; display: flex; align-items: center; justify-content: center; padding: 32px 0; }
.sw-auth-body.tight { padding: 20px 0; }
.sw-auth-box { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 20px; }
.sw-auth-box.tight { gap: 16px; }
.sw-auth-box.center { align-items: center; gap: 24px; text-align: center; }
.sw-auth-head { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; margin-bottom: 8px; }
.sw-auth-box.tight .sw-auth-head { margin-bottom: 4px; }
.sw-auth-head h1 { margin: 8px 0 0; font-size: 22px; font-weight: 600; }
.sw-auth-head p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--sw-muted); }
.sw-auth-foot { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--sw-muted); }
.sw-auth .sw-fl { font-weight: 500; }
.sw-auth .sw-in { min-height: 48px; font-size: 15px; }
.sw-auth .sw-bt { min-height: 50px; padding: 0 20px; font-size: 15px; border: 0; }
.sw-auth .sw-bt.pr { background: var(--sw-primary); }
.sw-auth .sw-bt.pr:hover { background: var(--sw-primary-hover); }
.sw-auth .sw-bt.pr:disabled { opacity: .55; }
.sw-lang { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--sw-border-strong); border-radius: 999px; background: #fff; font: 600 14px var(--sw-font); color: var(--sw-text); cursor: pointer; }
.sw-eye { position: absolute; right: 4px; top: 2px; width: 44px; height: 44px; border: 0; background: transparent; color: #4B5563; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.sw-phone { display: flex; align-items: center; min-height: 48px; border: 1px solid var(--sw-border-strong); border-radius: 10px; overflow: hidden; background: #fff; }
.sw-phone:focus-within { outline: 2px solid #343a40; outline-offset: -1px; }
.sw-phone > span { display: inline-flex; align-items: center; padding: 0 14px; min-height: 48px; background: var(--sw-bg); border-right: 1px solid var(--sw-border-strong); font-size: 15px; font-weight: 600; }
.sw-phone > input { flex: 1; min-width: 0; border: 0; outline: none; padding: 0 14px; font: 15px var(--sw-font); color: var(--sw-text); background: transparent; }

/* Painel fotográfico à direita */
.sw-hero { flex: 1 1 480px; min-width: 0; min-height: 560px; position: relative; border-radius: 20px; overflow: hidden; background: #3A2A20; }
.sw-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s ease; }
.sw-hero-img.on { opacity: 1; }
.sw-hero-badge { opacity: 0; transform: translateY(-6px); transition: opacity .6s ease, transform .6s ease; pointer-events: none; }
.sw-hero-badge.on { opacity: 1; transform: none; }
.sw-hero-texts { display: grid; }
.sw-hero-text { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 10px; opacity: 0; transform: translateY(8px); transition: opacity .6s ease, transform .6s ease; pointer-events: none; }
.sw-hero-text.on { opacity: 1; transform: none; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .sw-hero-img, .sw-hero-text, .sw-hero-badge { transition: none; } }
.sw-hero-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(5, 5, 6, .85) 0%, rgba(5, 5, 6, .35) 38%, rgba(5, 5, 6, 0) 60%); }
.sw-hero-badge { position: absolute; top: 28px; right: 28px; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.sw-hero-badge .tick { width: 28px; height: 28px; border-radius: 999px; background: var(--sw-ok-soft); color: var(--sw-ok-text); display: inline-flex; align-items: center; justify-content: center; }
.sw-hero-cap { position: absolute; left: 40px; right: 40px; bottom: 36px; color: #fff; display: flex; flex-direction: column; gap: 10px; }
.sw-hero-text strong { font-family: var(--sw-font-logo); font-size: 36px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.sw-hero-text span { font-size: 17px; }
.sw-dots { display: flex; gap: 6px; margin-top: 14px; }
.sw-dots button { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .55); cursor: pointer; transition: width .3s; }
.sw-dots button.on { width: 22px; background: #fff; }
@media (max-width: 900px) { .sw-hero { display: none; } .sw-auth-form { padding: 20px; } }

/* Caixas do código OTP */
.sw-otps { display: flex; gap: 10px; justify-content: center; border: 0; margin: 0; padding: 0; }
.sw-otp { width: 52px; height: 56px; border: 1px solid var(--sw-border-strong); border-radius: 12px; background: #fff; text-align: center; font: 600 22px var(--sw-font); color: var(--sw-text); box-sizing: border-box; padding: 0; }
.sw-otp:focus { outline: 2px solid #343a40; outline-offset: -1px; }

/* ── Onboarding em páginas (protótipo C04–C06) ───────────────────────────── */
.sw-ob { display: flex; flex-wrap: wrap; align-items: stretch; min-height: 100vh; padding: 12px; box-sizing: border-box; gap: 24px; }
.sw-ob-side { flex: 1 1 260px; max-width: 300px; background: #fff; border: 1px solid var(--sw-border); border-radius: 20px; display: flex; flex-direction: column; overflow: hidden; }
.sw-ob-brand { padding: 22px 22px 18px; border-bottom: 1px solid #F0F2F5; display: flex; flex-direction: column; gap: 2px; }
.sw-ob-prog { padding: 20px 22px; border-bottom: 1px solid #F0F2F5; display: flex; flex-direction: column; gap: 10px; }
.sw-ob-bar { height: 8px; border-radius: 999px; background: #F0EBE5; }
.sw-ob-bar > div { height: 8px; border-radius: 999px; background: var(--sw-brand); transition: width .4s; }
.sw-step { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 16px; border-bottom: 1px solid #F0F2F5; font-size: 15px; color: var(--sw-text); text-decoration: none; }
.sw-step:hover { color: var(--sw-text); background: #FCFBF9; }
.sw-step.on { background: var(--sw-primary-soft); box-shadow: inset 3px 0 0 var(--sw-primary); font-weight: 600; color: var(--sw-primary-dark); }
.sw-step .ok { margin-left: auto; width: 20px; height: 20px; border-radius: 999px; background: var(--sw-ok); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.sw-ob-help { margin: auto 18px 18px; padding: 20px; border-radius: 18px; background: var(--sw-primary); color: #fff; display: flex; flex-direction: column; gap: 10px; text-align: center; }
.sw-ob-help .sw-bt { color: var(--sw-primary-dark); border: 0; }
.sw-ob-main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 24px; padding: 16px 16px 40px 0; box-sizing: border-box; }
.sw-ob-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--sw-border); }
.sw-ob-head h1 { margin: 0; font-size: 26px; font-weight: 700; }
.sw-user { display: flex; align-items: center; gap: 10px; min-height: 44px; border: 0; background: transparent; font: 600 14px var(--sw-font); color: var(--sw-text); }
.sw-user > span { width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--sw-border-strong); background: #F3F5F7; display: inline-flex; align-items: center; justify-content: center; }

.sw-sec { background: #fff; border: 1px solid var(--sw-border); border-radius: 20px; overflow: hidden; }
.sw-sec-head { padding: 22px 28px; border-bottom: 1px solid #F0F2F5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.sw-sec-head h2 { margin: 0; font-size: 18px; font-weight: 600; }
.sw-sec-head p { margin: 6px 0 0; font-size: 14px; color: var(--sw-muted); }
.sw-sec-body { padding: 24px 28px; }
.sw-sec-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; padding: 16px 28px; border-top: 1px solid #F0F2F5; background: #FCFBF9; }

.sw-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.sw-opt { display: flex; flex-direction: column; gap: 12px; padding: 22px; border: 1px solid var(--sw-border); border-radius: 16px; background: #fff; text-align: left; font: inherit; color: inherit; cursor: pointer; position: relative; }
/* variante em carrossel: uma só linha com deslize horizontal (rato, toque ou setas) */
.sw-slide { position: relative; }
.sw-opts.slide { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 6px 4px 14px; margin: -6px -4px 0; scrollbar-width: thin; }
.sw-opts.slide .sw-opt { flex: 0 0 min(320px, 82%); scroll-snap-align: start; }
.sw-slide-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--sw-border); background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.12); cursor: pointer; z-index: 2; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; color: var(--sw-text); }
.sw-slide-nav:hover { border-color: var(--sw-primary); color: var(--sw-primary-dark); }
.sw-slide-nav.prev { left: -14px; }
.sw-slide-nav.next { right: -14px; }
@media (max-width: 640px) { .sw-slide-nav { display: none; } }
.sw-opt:hover { border-color: #b5b8bc; }
.sw-opt.on { border-color: var(--sw-primary); box-shadow: 0 0 0 3px var(--sw-primary-ring); background: #fcfcfc; }
.sw-opt-ico { width: 48px; height: 48px; border-radius: 12px; background: #edeeef; color: var(--sw-primary-dark); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.sw-opt.on .sw-opt-ico { background: var(--sw-primary); color: #fff; }
.sw-radio { width: 24px; height: 24px; border-radius: 999px; border: 2px solid #D1D5DB; background: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.sw-radio i { width: 8px; height: 8px; border-radius: 999px; background: #fff; }
.sw-opt.on .sw-radio, .sw-op.on .sw-radio, .sw-radio.sel { border-color: var(--sw-primary); background: var(--sw-primary); }
.sw-ul { margin: 0; padding: 12px 0 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: #374151; border-top: 1px solid #F0F2F5; }
.sw-ul li { display: flex; gap: 8px; align-items: flex-start; }
.sw-tag { padding: 4px 10px; border-radius: 999px; background: var(--sw-ok-soft); color: var(--sw-ok-text); font-size: 12px; font-weight: 700; }

.sw-vc { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border: 1px solid #9FD8B6; border-radius: 14px; background: #F6FCF8; }
.sw-vc.bad { border-color: #F3B8B2; background: #FDF6F5; }
.sw-vc > b { min-width: 64px; padding: 8px 10px; border-right: 1px solid #DCEFE3; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-align: center; }
.sw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px 16px; }
.sw-grid .full { grid-column: 1 / -1; }
.sw-drop { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding: 16px; border: 2px dashed #c3c6c9; border-radius: 14px; background: #f9f9f9; position: relative; }
.sw-drop-ico { width: 72px; height: 72px; border-radius: 14px; background: #fff; border: 1px solid #d2d4d6; color: var(--sw-primary-dark); display: inline-flex; align-items: center; justify-content: center; flex: none; overflow: hidden; }
.sw-drop-ico img { width: 100%; height: 100%; object-fit: contain; }

.sw-blk { border: 1px solid var(--sw-border); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.sw-blk-h { display: flex; justify-content: space-between; align-items: center; }
.sw-blk-h h3 { margin: 0; font-size: 15px; font-weight: 600; }
.sw-kv { display: grid; grid-template-columns: 120px 1fr; gap: 10px 12px; margin: 0; font-size: 14px; }
.sw-kv dt { color: var(--sw-muted); }
.sw-kv dd { margin: 0; font-weight: 500; }
.sw-op { display: flex; align-items: flex-start; gap: 14px; padding: 18px; border: 1px solid var(--sw-border); border-radius: 14px; background: #fff; text-align: left; font: inherit; color: inherit; cursor: pointer; width: 100%; }
.sw-op.on { border-color: var(--sw-primary); box-shadow: 0 0 0 3px var(--sw-primary-ring); background: #fcfcfc; }
.sw-op .sw-radio { margin-top: 1px; width: 22px; height: 22px; }
.sw-panel { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 14px; background: #FCFBF9; border: 1px solid #EEF0F3; }
.sw-seg { display: flex; padding: 4px; gap: 4px; border-radius: 12px; background: #F0F2F5; }
.sw-seg button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; border: 0; border-radius: 9px; background: transparent; font: 500 14px var(--sw-font); color: #374151; cursor: pointer; }
.sw-seg button.on { background: #fff; box-shadow: 0 1px 3px rgba(17, 24, 39, .12); font-weight: 600; color: var(--sw-text); }
.sw-ln { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; padding: 6px 0; }
.sw-total { margin-top: 6px; padding: 12px 14px; border-radius: 10px; background: var(--sw-primary); color: #fff; font-weight: 700; }
.sw-ref { background: var(--sw-primary-soft); border: 2px solid var(--sw-brand); border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.sw-ref b { display: block; font-size: 24px; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.sw-ref small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: #9CA3AF; margin-bottom: 2px; }
@media (max-width: 900px) { .sw-ob-side { max-width: none; } .sw-ob-main { padding: 0 12px 32px; } .sw-sec-head, .sw-sec-body, .sw-sec-foot { padding-left: 18px; padding-right: 18px; } }

/* Lista numerada ("Como obter a chave na AGT") */
.sw-ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.sw-ol li { display: flex; gap: 12px; font-size: 14px; line-height: 1.5; color: #374151; }
.sw-ol .n { width: 26px; height: 26px; border-radius: 999px; background: #fff; border: 1px solid #c3c6c9; color: var(--sw-primary-dark); font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }

/* Logótipo em imagem */
.sw-logo-img { display: block; width: auto; max-width: 100%; object-fit: contain; }

/* Separador de grupo na barra lateral da configuração */
.sw-ob-sep { padding: 14px 16px 6px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #4B5563; background: #FCFBF9; border-bottom: 1px solid #F0F2F5; }

/* Selector de idioma (SwLangMenu) */
.sw-langdd { position: relative; display: inline-block; }
.sw-langmenu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 190px; background: #fff; border: 1px solid var(--sw-border); border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, .12); padding: 6px 0; z-index: 3000; }
.sw-langmenu[hidden] { display: none; }
.sw-langmenu button { display: flex; align-items: center; gap: 14px; width: 100%; padding: 13px 18px; border: 0; background: transparent; font: 500 16px var(--sw-font); color: var(--sw-text); cursor: pointer; text-align: left; }
.sw-langmenu button + button { border-top: 1px solid var(--sw-border); }
.sw-langmenu button:hover { background: #F7F8FA; }
.sw-langmenu .ck { width: 24px; height: 24px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: transparent; flex: none; }
.sw-langmenu button.on .ck { background: var(--sw-primary); color: #fff; }

/* Multicaixa Express: ecrã de espera */
@keyframes sw-spin { to { transform: rotate(360deg); } }
.sw-spin { width: 56px; height: 56px; border-radius: 50%; border: 5px solid var(--sw-primary-soft, #edeeef); border-top-color: var(--sw-primary); animation: sw-spin 0.9s linear infinite; }
.sw-wait { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 28px 12px; }
.sw-wait-bar { width: 100%; max-width: 360px; height: 6px; border-radius: 999px; background: #EEF0F3; overflow: hidden; }
.sw-wait-bar > i { display: block; height: 100%; background: var(--sw-primary); transition: width 1s linear; }