/* Os ajustes ao aspecto do legacy, e só esses.

   O resto vem de resources/css/style.css, que é o ficheiro do CDVPass copiado sem alterações — o
   portal é para se parecer com o que era, e mexer nesse ficheiro tornava impossível saber o que
   mudou. Tudo o que é diferente está aqui, e são duas coisas:

   1. A cor. Onde o legacy tinha o azul #00A0E9, está o gradiente da marca. Um gradiente só serve de
      fundo; o que é texto leva-o recortado pelas letras, e o que é borda ou realce pequeno leva um
      chapado tirado do próprio gradiente.

   2. A estrutura das páginas com a barra de topo. O legacy tinha tudo dentro do menu com o nome da
      pessoa. Aqui os destinos estão num menu lateral (no desenho do menu do e-Cards), as páginas de
      informação num ícone de ajuda na barra, e no menu do nome fica só sair. Todas as páginas têm o
      mesmo cabeçalho e as mesmas margens. */

:root {
    --grad1: #e514ff;
    --grad2: #0c8fff;
    --brand-gradient: linear-gradient(265deg, var(--grad1) -22.66%, var(--grad2) 125.69%);

    /* Para o que não pode levar gradiente. É o azul do gradiente, e não o #00A0E9 do legacy, para não
       andarem duas famílias de azul pela mesma página. */
    --accent: #0c8fff;
}

/* ---------- 1. a cor ---------- */

header .left-nav .logo-menu,
.login-btn:hover,
.login-btn:focus,
.login-btn.active,
.login-page .login-form form .login-btn:hover,
.login-page .login-form form .login-btn.active,
.genericBlueModal .modal-payment-top,
.genericBlueModal .modal-payment-bottom .btn-ok:hover,
.account-sad-face-login .sad-face {
    background: var(--brand-gradient);
}

/* Os títulos que eram azuis passam a gradiente recortado pelo texto. O chapado vem declarado primeiro,
   para um browser que não recorte o fundo pelo texto mostrar azul e não transparente. */
.login-page .login-form h3,
.login-page .login-form h2,
.account-user-welcome .text-wrapper h6,
.account-about-user .title-element p,
.account-licenses .title-element p,
.account-licenses .item .user-about .texts-wrapper h6,
.account-licenses .item .item-midle h6.blue,
.account-sad-face-login .account-not-founded h5 {
    color: var(--accent);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
    /* Só nos títulos que são texto e nada mais. inline-block para o gradiente ocupar a largura das
       letras e não a do painel inteiro — num bloco a toda a largura via-se só a ponta magenta. Os
       títulos das secções (title-element) têm um botão dentro e ficam com o chapado. */
    .login-page .login-form h3,
    .login-page .login-form h2,
    .account-user-welcome .text-wrapper h6,
    .account-sad-face-login .account-not-founded h5 {
        display: inline-block;
        background: var(--brand-gradient);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}

.options ul li a:hover,
.options ul li a:focus,
.options ul li a.more:active,
.options ul li a.active {
    color: var(--accent) !important;
}

a { color: var(--accent); }

/* O style.css traz o bootstrap, e com ele o azul do bootstrap em tudo o que é link ao passar por cima
   (#0056b3) e no anel de foco (rgba(0,123,255,.25)). Isso punha, por exemplo, o texto do botão OK da
   recuperação de password a azul-escuro sobre o fundo azul. */
a:hover,
a:focus { color: var(--accent); }
.login-btn:hover,
.login-btn:focus,
.login-btn.active { color: #fff; }
.btn:focus,
.btn.focus { box-shadow: none; }

/* O que o legacy pintava de #00A0E9 e que a regra geral acima não apanha, por estar num seletor mais
   específico. Encontrado a percorrer todas as páginas e estados (repouso, hover, foco, activo). */
.checkbox-contain input:checked ~ .checkmark { background: var(--brand-gradient); border-color: transparent; }
.account-payment .cart-final .elements-cart .service .text-wrapper h5 { color: var(--title); }
.account-licenses .item.disabled .user-about.enabled .texts-wrapper h6 { color: var(--accent); }

/* ---------- 2. a estrutura das páginas ---------- */

:root {
    --menu-width: 230px;
    --menu-width-collapsed: 64px;
    --menu-bg: #2b3340;
    --menu-text: #aeb8c6;
    --title: #354052;
    --muted: #7F8FA4;
    --faint: #9eabc0;
    --bad: #F85359;
    --good: #37b047;
    --line: #E2E7EE;
}

/* O style.css empurra o body 90px para baixo, a contar com o cabeçalho fixo. Aqui quem o faz é o
   #page-content, para o menu lateral poder começar logo debaixo da barra. */
body.app { padding-top: 0 !important; background: #F4F6F9; }
body.app #page-content { padding-top: 72px; min-height: 100vh; }

/* O logótipo é o botão do menu: no legacy já tinha as três riscas desenhadas, sem fazerem nada. */
header .left-nav button.logo-menu {
    border: 0;
    cursor: pointer;
    line-height: 0;
    font: inherit;
}
header .left-nav .logo-menu img { display: block; }
/* Sem o contorno preto do browser ao clicar. Pelo teclado continua a ver-se onde está o foco, com um
   contorno branco por dentro do gradiente. */
header .left-nav .logo-menu:focus { outline: none; }
header .left-nav .logo-menu:focus-visible { outline: 2px solid rgba(255, 255, 255, .85); outline-offset: -5px; }

/* À direita: a ajuda e o nome, alinhados ao centro da barra. */
header .right-nav .top-tools {
    display: flex;
    align-items: center;
    gap: 22px;
    height: 71px;
    padding-right: 25px;
}
header .right-nav .top-tools .user-topnav { padding-top: 0; display: flex; align-items: center; height: 71px; }
/* O nome e a seta: no legacy a seta estava posta à mão a 33px do topo, contando com o padding de
   20px que o menu tinha. Numa barra alinhada ao centro fica tudo na mesma linha. */
header .right-nav .top-tools .user-topnav > a { display: flex; align-items: center; }
header .right-nav .top-tools .user-topnav .name { margin-right: 12px; }
header .right-nav .top-tools .user-topnav .btn { position: static; float: none; margin-top: 5px; }
/* A língua, na barra de quem ainda não entrou (os termos, a ajuda abertos a partir do login). O mesmo
   problema e o mesmo remédio da ajuda: sem os 70px e os 12px de cima que o style.css dá às div da barra,
   e com a forma do botão da ajuda ao lado — um círculo de 36px, ao centro da barra. */
header .right-nav .top-tools .culture,
header .right-nav .top-tools .culture .language { height: auto; padding-top: 0; position: relative; }
header .right-nav .top-tools .culture .language > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #A6B2C4;
    font-size: 14px !important;
    font-weight: 700;
    letter-spacing: .5px;
}
header .right-nav .top-tools .culture .language > a:hover,
header .right-nav .top-tools .culture .language > a[aria-expanded="true"] { color: var(--accent); background: #F4F6F9; }
/* O menu à mesma altura e com o mesmo encosto do da ajuda. O partial traz a posição do ecrã de login
   em linha, e aqui não serve. */
header .right-nav .top-tools .culture .options { top: 43px !important; right: -14px !important; }
header .right-nav .top-tools .culture .options .triangle-options { left: auto !important; right: 27px !important; }

/* O style.css dá a todas as div da barra 70px de altura e 12px de cima, a contar com o menu do nome.
   A ajuda fica com a altura do ícone, e a barra alinha-a ao centro, na linha do nome. */
header .right-nav .top-tools .help-menu { height: auto; padding-top: 0; position: relative; }
.help-menu .help-toggle {
    display: flex;
    align-items: center;
    color: #A6B2C4;
    padding: 6px;
    border-radius: 50%;
}
.help-menu .help-toggle:hover,
.help-menu .help-toggle[aria-expanded="true"] { color: var(--accent); background: #F4F6F9; }
.help-menu .help-toggle .icon { width: 24px; height: 24px; }
/* Por baixo do ícone e encostado à direita dele, com o triângulo a apontar para o ícone — e à mesma
   altura do menu do nome. */
header .right-nav .top-tools .help-menu .options {
    position: absolute;
    top: 43px;
    right: -14px;
    left: auto;
    min-width: 210px;
}
header .right-nav .top-tools .help-menu .options .triangle-options { left: auto !important; right: 27px !important; }
.help-menu .options ul { margin: 0; padding: 0; list-style: none; }
.help-menu .options ul li a {
    display: block;
    padding: 10px 15px;
    font-size: 14px;
    color: var(--title);
    background: #fff;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
.help-menu .options ul li:last-child a { border-bottom: 0; }
.help-menu .options ul li a:hover { background: var(--line); font-weight: 700; text-decoration: none; }

/* O menu lateral. */
.side-menu {
    position: fixed;
    top: 72px;
    bottom: 0;
    left: 0;
    z-index: 998;
    width: var(--menu-width);
    background: var(--menu-bg);
    overflow-x: hidden;
    overflow-y: auto;
    transition: width .25s ease, transform .25s ease;
}
.side-menu ul { list-style: none; margin: 0; padding: 24px 0 0; }
.side-menu a {
    display: flex;
    align-items: center;
    gap: 18px;
    height: 52px;
    padding: 0 20px 0 18px;
    border-left: 3px solid transparent;
    color: var(--menu-text);
    font-size: 14px;
    white-space: nowrap;
    text-decoration: none;
}
.side-menu a:hover { color: #fff; text-decoration: none; }
.side-menu a[aria-current="page"] {
    color: #fff;
    font-weight: 700;
    background: rgba(255, 255, 255, .05);
    border-left-color: var(--accent);
    border-image: var(--brand-gradient) 1;
}
.side-menu .icon { flex: none; width: 22px; height: 22px; }
.side-menu span { transition: opacity .2s ease; }

body.has-menu #page-content { margin-left: var(--menu-width); transition: margin-left .25s ease; }

body.menu-collapsed .side-menu { width: var(--menu-width-collapsed); }
body.menu-collapsed .side-menu span { opacity: 0; pointer-events: none; }
body.has-menu.menu-collapsed #page-content { margin-left: var(--menu-width-collapsed); }

/* Ecrã estreito: o menu sai do caminho e o botão abre-o por cima da página. */
@media (max-width: 991.98px) {
    .side-menu { width: var(--menu-width) !important; transform: translateX(-100%); }
    body.menu-open .side-menu { transform: none; }
    body.menu-collapsed .side-menu span { opacity: 1; pointer-events: auto; }
    body.has-menu #page-content,
    body.has-menu.menu-collapsed #page-content { margin-left: 0; }
    .menu-backdrop { position: fixed; inset: 72px 0 0 0; z-index: 997; background: rgba(43, 51, 64, .45); }
    header .right-nav .top-tools .user-topnav .name { display: none; }
}

/* A página: a mesma margem e a mesma largura em todas, e o cabeçalho sempre no mesmo sítio. */
.page {
    padding: 32px 30px 48px;
}
@media (max-width: 767.98px) { .page { padding: 20px 15px 32px; } }

.page-header { margin-bottom: 24px; }
.page-header h1 {
    display: inline-block;
    margin: 0 0 6px;
    font-size: 28px;
    font-weight: 300;
    line-height: 1.2;
    color: var(--accent);
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
    .page-header h1 {
        background: var(--brand-gradient);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}
.page-header p { margin: 0; max-width: 760px; font-size: 15px; line-height: 1.5; color: var(--muted); }

/* Os cartões do legacy, com as mesmas margens entre si e por dentro em todas as páginas. */
.page .student-info,
.page .account-user-welcome { margin-bottom: 24px; }
.page .student-info { padding: 24px 30px; }
@media (max-width: 767.98px) { .page .student-info { padding: 18px 16px; } }

/* O texto das páginas de informação. */
.doc h2 { margin: 28px 0 10px; font-size: 18px; font-weight: 700; color: var(--title); }
.doc h2:first-child { margin-top: 0; }
.doc p, .doc li { font-size: 15px; line-height: 1.65; color: var(--muted); text-align: justify; }
.doc p { margin: 0 0 12px; }
.doc ul { margin: 0 0 16px; padding-left: 22px; }
.doc.helpCenter .video-frame { margin: 16px 0 0; }

/* Avisos e estados. */
.text-bad { font-size: 13px; color: var(--bad); margin-bottom: 5px; }
.empty { font-size: 13px; color: var(--faint); margin-bottom: 5px; }
.notice p { margin: 4px 0; font-size: 14px; }
.notice p.ok { color: var(--good); }
.notice p.bad { color: var(--bad); }
.notice .confirm-signal, .notice .error-signal { margin: 0; }

/* Os dados da conta: os campos do legacy, e os botões por baixo. */
.account-about-user .field { margin-bottom: 18px; }
.account-about-user .field label { display: block; }
.account-about-user .field select,
.account-about-user .field input {
    width: 100%;
    height: 35px;
    padding: 0 15px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: #fff;
    font-size: 14px;
    color: var(--title);
    box-sizing: border-box;
}
.account-about-user .field select:focus,
.account-about-user .field input:focus { border-color: var(--accent); outline: none; }
.account-about-user .field .input-bad { border-color: var(--bad); }
.account-about-user .field .hint { display: block; margin-top: 4px; font-size: 12px; color: var(--faint); }
.password-rules { margin: 24px 0 0; padding: 0; list-style: none; }
.password-rules li { margin-bottom: 8px; font-size: 13px; color: #AAB2C0; }
.password-rules li::before { content: "– "; }
.password-rules li.broken { color: var(--bad); }
.notice .card-actions { margin-top: 12px; }
.tag-unconfirmed {
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 10px;
    background: #FFF4E5;
    color: #B7791F;
    font-size: 11px;
    vertical-align: 1px;
}

/* Segurança: as mesmas peças das outras páginas da conta, e o que só ela tem — o QR, a chave, os códigos. */
.two-factor .lead-text, .recovery-codes .lead-text { margin: 0 0 18px; font-size: 14px; color: var(--muted); }
.two-factor .qr svg { width: 180px; height: 180px; display: block; margin: 0 0 18px; }
.two-factor code.secret, .recovery-codes code {
    font-family: Consolas, "Courier New", monospace; font-size: 14px; letter-spacing: .08em; color: var(--title);
    background: #F4F6F9; border-radius: 4px; padding: 2px 6px;
}
.account-about-user .field input.code-input { max-width: 240px; letter-spacing: .25em; }
.recovery-codes ul.codes {
    list-style: none; margin: 0 0 8px; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 16px;
}
.two-factor-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.two-factor-options .option { border: 1px solid var(--line); border-radius: 4px; padding: 18px 20px; display: flex; flex-direction: column; }
.two-factor-options .option label { display: block; }
.two-factor-options .option .info:last-of-type { flex: 1; }
.two-factor-options .option .card-actions { margin-top: 12px; }
.two-factor-options .option p.info + p.info { margin-top: 6px; }
.two-factor .section-label { margin: 22px 0 12px; font-size: 13px; font-weight: 600; color: var(--title); }
.tag-on, .tag-off { padding: 2px 10px; border-radius: 10px; font-size: 12px; }
.tag-on { background: #E6F6EC; color: #237A45; }
.tag-off { background: #F4F6F9; color: var(--muted); }
/* O código de 6 algarismos, uma caixa por algarismo (legacy.js). O input verdadeiro fica fora de vista mas
   no formulário; os !important vencem o ".login-form form input" e o ".field input" que o pintam por inteiro. */
.otp { margin: 0 0 14px; }
.otp .otp-boxes { display: flex; gap: 10px; }
.otp .otp-boxes[hidden] { display: none; }
.otp input.otp-cell,
.login-page .login-form form .otp input.otp-cell,
.account-about-user .field .otp input.otp-cell {
    width: 46px; max-width: 46px; height: 54px; margin: 0; padding: 0;
    border: 1px solid var(--line); border-radius: 6px; background: #fff; box-shadow: none;
    text-align: center; font-size: 22px; font-weight: 600; color: var(--title); letter-spacing: 0;
}
.otp input.otp-cell:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(12, 143, 255, .15); }
.otp input.otp-source {
    position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;
    margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; border: 0 !important;
}
.otp .otp-toggle,
.two-factor .code-by-email .link-button {
    display: inline-block; margin-top: 10px; padding: 0; border: 0; background: none; cursor: pointer;
    font: inherit; font-size: 13px; color: var(--faint); text-decoration: underline;
}
.otp .otp-toggle:hover, .two-factor .code-by-email .link-button:hover { color: var(--accent); }
.two-factor .code-by-email { margin: 6px 0 0; text-align: right; }
@media (max-width: 400px) {
    .otp .otp-boxes { gap: 6px; }
    .otp input.otp-cell,
    .login-page .login-form form .otp input.otp-cell,
    .account-about-user .field .otp input.otp-cell { width: 40px; max-width: 40px; height: 48px; font-size: 20px; }
}

/* O passo do código: o visto de "lembrar este browser" e a dica, no tamanho dos outros textos do login.
   O ".login-form form input" do legacy pinta qualquer input como uma caixa de texto, o visto incluído. */
.login-page .login-form form .remember-browser { display: flex; align-items: center; gap: 10px; margin: 2px 0 20px; }
.login-page .login-form form .remember-browser .checkbox-contain input {
    width: 16px; height: 16px; min-height: 0; margin: 0; padding: 0; border: 0; box-shadow: none;
}
.login-page .login-form form .remember-browser label.text { margin: 0; font-size: 13px; color: var(--muted); cursor: pointer; }
.login-page .login-form form .code-hint { margin: 16px 0 0; font-size: 13px; color: var(--faint); }
.login-page .login-form .code-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: 28px; }
.login-page .login-form .code-links form { margin: 0; }
.login-page .login-form .code-links .code-link,
.login-page .login-form .code-links form .code-link {
    width: auto; height: auto; margin: 0; padding: 0; border: 0; background: none; box-shadow: none;
    font: inherit; font-size: 13px; line-height: 1.5; display: inline-block; color: var(--faint); text-decoration: none; cursor: pointer;
}
.login-page .login-form .code-links .code-link:hover { color: var(--accent); text-decoration: none; }

.card-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.card-actions .invite {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 120px;
    height: 36px;
    padding: 0 18px;
    border: 0;
    border-radius: 4px;
    background: var(--brand-gradient);
    color: #fff;
    font: inherit;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}
/* O fundo repetido no hover: o a.invite:hover do legacy (#00A0E9) é mais específico que .card-actions .invite. */
.card-actions .invite:hover { opacity: .9; color: #fff; text-decoration: none; background: var(--brand-gradient); }
.card-actions .invite.secondary { background: #fff; color: var(--title); border: 1px solid var(--line); }
.card-actions .invite.secondary:hover { background: #F4F6F9; color: var(--title); }

/* A fotografia: um botão, para se chegar a ela pelo teclado, com o aspecto do legacy. */
.account-user-welcome button.photo-change { border: 0; padding: 0; background: none; cursor: pointer; }
.photo-modal .modal-header h5 { margin: 0; font-size: 20px; color: var(--accent); }
.photo-modal .modal-header .close { border: 0; background: none; font-size: 24px; line-height: 1; cursor: pointer; }
.photo-modal .photo-preview { display: flex; justify-content: center; margin: 8px 0 12px; }
.photo-modal .photo-preview img { width: 180px; height: 180px; border-radius: 50%; object-fit: cover; box-shadow: 0 2px 6px rgba(53, 64, 82, .2); }
.photo-modal .hint { text-align: center; font-size: 12px; color: var(--faint); }
.photo-modal .modal-footer.card-actions { margin: 0; justify-content: space-between; }
.photo-modal label.invite { margin: 0; }
.photo-modal .invite:disabled { opacity: .5; cursor: default; }

/* A pergunta antes de guardar os dados da conta, com o mesmo aspecto da janela da fotografia. */
.confirm-modal .modal-header h5 { margin: 0; font-size: 20px; color: var(--accent); }
.confirm-modal .modal-header .close { border: 0; background: none; font-size: 24px; line-height: 1; cursor: pointer; }
.confirm-modal .modal-body p { margin: 0 0 10px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.confirm-modal .modal-footer.card-actions { margin: 0; }

/* Os toasts: no canto, por baixo da barra de topo, por cima de tudo menos da barra. */
.toasts {
    position: fixed;
    top: 88px;
    right: 24px;
    z-index: 1060;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(380px, calc(100vw - 32px));
}
.toast {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 14px 14px 18px;
    border-left: 4px solid var(--good);
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(53, 64, 82, .18);
    animation: toast-in .2s ease-out;
    transition: opacity .25s ease, transform .25s ease;
}
.toast.bad { border-left-color: var(--bad); }
.toast.leaving { opacity: 0; transform: translateX(16px); }
.toast .toast-text { flex: 1; }
.toast .toast-text p { margin: 0 0 4px; font-size: 14px; line-height: 1.45; color: var(--title); }
.toast .toast-text p:last-child { margin-bottom: 0; }
.toast .toast-close { border: 0; background: none; padding: 0 2px; font-size: 20px; line-height: 1; color: var(--faint); cursor: pointer; }
.toast .toast-close:hover { color: var(--title); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } }
@media (max-width: 767.98px) { .toasts { top: 80px; right: 16px; } }

/* O pagamento: o desenho da página do legacy (account-payment), com o método por botões de opção. */
.account-payment .info-payment .title h6,
.account-payment .cart-final h6 { font-size: 16px; font-weight: 700; color: var(--title); margin-bottom: 16px; }
.account-payment .cart-final .service { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.account-payment .cart-final .service img { width: 48px; height: 48px; border-radius: 10px; object-fit: contain; }
.account-payment .cart-final .service h5 { margin: 0; font-size: 16px; color: var(--title); }
.account-payment .cart-final .service p { margin: 0; font-size: 13px; color: var(--muted); }
.account-payment .cart-final .service .price { font-size: 20px; font-weight: 700; color: var(--accent); }
.account-payment .payment-method .methods { display: flex; gap: 12px; margin-bottom: 14px; }
.account-payment .payment-method .method {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    min-width: 110px; height: 56px; padding: 0 12px;
    border: 1px solid var(--line); border-radius: 6px; background: #fff; cursor: pointer;
}
.account-payment .payment-method .method:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(12, 143, 255, .15); }
.account-payment .payment-method .mbway-phone { display: none; }
.account-payment .payment-method:has(input[value="MbWay"]:checked) .mbway-phone { display: block; }
.account-payment .checkbox-termsandconditions { margin: 18px 0 8px; }
/* O style.css dá ao contentor do legacy um cartão próprio; aqui os cartões são as duas colunas. */
.page .account-payment { background: none; box-shadow: none; padding: 0; margin: 0; }
.account-payment .billing-fields { border: 0; margin: 0; padding: 0; }
.account-payment .field { margin-bottom: 16px; }
.account-payment .field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.account-payment .field .hint { display: block; margin-top: 4px; font-size: 12px; color: var(--faint); }
.account-payment .field input {
    width: 100%; height: 35px; padding: 0 15px; border: 1px solid var(--line); border-radius: 4px; box-sizing: border-box;
}

.payment-result .modal-payment-top { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.payment-result .modal-payment-top img { width: 72px; }
.payment-result .modal-payment-top h6 { font-size: 18px; color: var(--accent); margin: 0 0 6px; }
.payment-result .modal-payment-top p { margin: 0; color: var(--muted); font-size: 14px; }
.payment-result dl.multibanco {
    display: grid; grid-template-columns: max-content 1fr; gap: 10px 24px;
    max-width: 420px; margin: 0 0 12px; padding: 18px 22px; border-radius: 8px; background: #F4F6F9;
}
.payment-result dl.multibanco dt { color: var(--muted); font-weight: 400; }
.payment-result dl.multibanco dd { margin: 0; color: var(--title); font-weight: 700; letter-spacing: .5px; }

/* As apps de cada escola: ícones, à direita, no lugar do botão do legacy. */
.app-links { display: flex; justify-content: flex-end; align-items: center; gap: 14px; height: 100%; }
.app-links form { margin: 0; }
.app-links a, .app-links button {
    display: block; line-height: 0; border: 0; padding: 0; background: none; cursor: pointer;
    border-radius: 10px; transition: transform .15s ease, box-shadow .15s ease;
}
.app-links a:hover, .app-links button:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(53, 64, 82, .18); }
.app-links img { width: 40px; height: 40px; border-radius: 10px; object-fit: contain; }
@media (max-width: 991.98px) { .app-links { justify-content: flex-start; margin-top: 12px; } }

/* As fotografias dos educandos e o logótipo das escolas, no círculo de 36px do legacy. O style.css
   não lhes dá tamanho nenhum e o círculo corta o que sobra, por isso no legacy só ficavam bem as que já
   vinham pequenas; uma fotografia grande mostrava só o canto de cima. Aqui enchem o círculo, ao centro. */
.account-licenses .item .user-about .image-wrapper img,
.account-licenses .item .user-about .image-wrapper-noradius img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.account-licenses .item .user-about { display: flex; align-items: center; min-height: 36px; }
.account-licenses .item .user-about .image-wrapper,
.account-licenses .item .user-about .image-wrapper-noradius { flex: none; }
.account-licenses .item .user-about .texts-wrapper { padding-left: 12px; }
.account-licenses .item .user-about .texts-wrapper h6 { margin: 0 0 3px; }
.account-licenses .item .user-about .texts-wrapper p { margin: 0; }

/* O "Activa" das licenças e o "tentar novamente". */
.account-licenses .item .btn-wrapper a.active { cursor: default; }
.account-licenses .licences-retry {
    margin-top: 8px;
    padding: 6px 16px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: #fff;
    color: var(--title);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}
.account-licenses .licences-loading { color: var(--faint); }

/* ---------- pequenas coisas que o markup novo precisa ---------- */

/* Os botões do Microsoft e do Google eram <a> com um SVG dentro e um onclick que submetia outro
   formulário. Aqui são botões desse formulário (atributo form), sem script; ficam sem moldura para o
   SVG ser o botão, como era. */
.login-page .login-form .actions .provider,
.provider-buttons .provider {
    background: none;
    border: 0;
    padding: 5px;
    margin: 0;
    cursor: pointer;
    vertical-align: middle;
    line-height: 0;
}
.login-page .login-form .actions .provider img,
.provider-buttons .provider img { display: block; }
.provider-buttons form { display: inline-block; margin: 0 5px 0 0; }

/* A página de ajuda do legacy trazia isto numa folha à parte (_login.css) que não vale a pena
   carregar inteira: define também um cabeçalho vermelho que o style.css depois tapava. */
.helpCenter h6 { line-height: 1em !important; }
.helpCenter h6 a { font-size: 18px; color: #a4a4a4; text-decoration: underline; }

/* O vídeo da ajuda: 854×480 no legacy, aqui a largura que houver com a mesma proporção. */
.helpCenter .video-frame { width: 100%; max-width: 854px; margin: 0 auto; aspect-ratio: 854 / 480; }
.helpCenter .video-frame iframe { width: 100%; height: 100%; border: 0; }

/* Os botões de sair e de mudar de idioma são formulários, para que um prefetch não saia da sessão
   nem mude a língua de ninguém. Aqui ficam com o aspecto dos links que substituem. */
.options form { margin: 0; }
.options ul li button.as-link {
    display: block;
    width: 100%;
    text-align: left;
    font-size: 14px;
    padding: 10px 15px;
    min-width: 170px;
    background: #fff;
    color: #354052;
    border: 0;
    border-bottom: 1px solid #E2E7EE;
    cursor: pointer;
    font-family: inherit;
}
.options ul li button.as-link:hover {
    background: #E2E7EE;
    color: var(--accent);
    font-weight: 700;
}

/* Os erros de validação com a cor que o legacy usava nas regras de password. */
.submitErrors ul, .validation-summary-errors ul { list-style: none; padding: 0; color: #F85359; }
.field-validation-error { color: #F85359; font-size: 13px; }

/* O ecrã de carregamento só aparece quando se sai da página. */
#loading-wrapper { display: none; }
#loading-wrapper.visible { display: block; }

/* "Voltar ao login", por baixo dos formulários sem sessão: com a cara do "Esqueceu a password?" do
   login — cinzento, 14px — e não a de um link azul a chamar a atenção. */
.back-to-login { margin: 28px 0 0; clear: both; }
.back-to-login a { color: #AAB2C0; font-size: 14px; text-decoration: none; }
.back-to-login a:hover,
.back-to-login a:focus { color: var(--accent); text-decoration: none; }

/* A linha do botão de entrar e dos serviços externos. No legacy o botão flutuava à esquerda com 34px
   e os serviços vinham em linha com 36px e 5px de margem, e ficavam desencontrados alguns píxeis.
   Numa linha flex, todos com a altura dos SVG, ficam alinhados ao centro. */
.login-page .login-form .actions.sign-in {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.login-page .login-form form .actions.sign-in .login-btn {
    float: none;
    height: 36px;
    line-height: 34px;
    margin: 0;
}
.login-page .login-form .actions.sign-in .provider { padding: 0; }