/* Componente de senha: mesma geometria nas paginas Administrator e ITAA. */
.password-page { --password-bg: #03102b; --password-accent: #8dd500; --password-button: #123a69; --password-hover: #0878d1; --password-muted: #d3dfed; --password-title-font: "Exo 2", sans-serif; display: grid; place-items: center; padding: 32px 16px; background: radial-gradient(ellipse at 74% 42%, #123a69 0, #040d1e 44%, #000208 100%); }
.password-card, .password-card * { box-sizing: border-box; }
.password-card { display: grid; gap: 24px; width: min(350px, 88vw); margin: 0; padding: 24px; border: 1px solid rgb(230 240 255 / 22%); border-radius: 18px; color: #fff; background: radial-gradient(circle at top left, rgb(255 255 255 / 18%) 0%, rgb(255 255 255 / 9%) 8%, rgb(255 255 255 / 3.5%) 17%, rgb(255 255 255 / .8%) 28%, rgb(255 255 255 / 0%) 40%), radial-gradient(circle at bottom right, rgb(255 255 255 / 18%) 0%, rgb(255 255 255 / 9%) 8%, rgb(255 255 255 / 3.5%) 17%, rgb(255 255 255 / .8%) 28%, rgb(255 255 255 / 0%) 40%), var(--password-bg); box-shadow: 0 20px 60px rgb(0 0 0 / 24%), inset 0 1px rgb(255 255 255 / 10%); font: 400 14px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; text-align: left; }
.password-heading { display: grid; gap: 12px; }
.password-brand { display: flex; align-items: center; gap: 10px; }
.password-brand img { width: 36px; height: 36px; flex: none; object-fit: contain; }
.password-brand span { font: 600 20px/1.2 var(--password-title-font); }
.password-card h1 { text-align: center; margin: 0; color: white; font: 600 22px/1.2 var(--password-title-font); }
.password-card p { margin: 0; }
.password-description, .password-help { color: var(--password-muted); font-size: 12px; line-height: 1.5; }
.password-fields { display: grid; gap: 20px; min-width: 0; }
.password-field { display: grid; gap: 4px; min-width: 0; }
.password-field label { margin: 0; color: #fff; font-size: 13px; font-weight: 600; line-height: 1.3; }
.password-field input { width: 100%; min-width: 0; height: 40px; margin: 0; padding: 10px 12px; border: 1px solid #dce5ec; border-radius: 8px; background: #fff; color: #162238; font: 400 14px/1.3 ui-sans-serif, system-ui, sans-serif; color-scheme: light; }
.password-field input:focus-visible { outline: 2px solid var(--password-accent); outline-offset: 1px; }
.password-control { position: relative; }
.password-control input { padding-right: 44px; }
.password-card .password-toggle { position: absolute; top: 3px; right: 3px; display: grid; place-items: center; width: 34px; height: 34px; margin: 0; padding: 0; border: 0; border-radius: 6px; color: #162238; background: transparent; cursor: pointer; }
.password-toggle:hover { background: rgb(0 0 0 / 6%); }
.password-toggle:focus-visible { outline: 2px solid var(--password-accent); outline-offset: 0; }
.password-toggle svg { width: 18px; height: 18px; }
.password-field input[aria-invalid="true"] { border-color: #ff9d9d; outline-color: #ff9d9d; }
.password-error { margin: 0; color: #ffd1c8; font-size: 12px; line-height: 1.4; }
.password-status { padding: 10px 12px; border: 1px solid rgb(255 255 255 / 22%); border-radius: 8px; color: #fff; font-size: 13px; overflow-wrap: anywhere; }
.password-status[data-error="true"] { color: #ffd1c8; }
.password-submit { width: 100%; min-height: 40px; padding: 10px 14px; border: 0; border-radius: 8px; background: var(--password-button); color: #fff; font: 700 14px/1.4 ui-sans-serif, system-ui, sans-serif; cursor: pointer; }
.password-submit:hover, .password-submit:focus-visible { background: var(--password-hover); }
.password-submit:disabled { opacity: .65; cursor: wait; }
.password-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; font-size: 12px; }
.password-links a { color: #fff; text-decoration: underline; }
.password-card [hidden] { display: none !important; }

:root[data-tema="escuro"] .password-page { background: radial-gradient(ellipse at 74% 42%, #123a69 0, #040d1e 44%, #000208 100%); }

.password-card #botao-trocar-senha { background: #8dd500; color: #03102b; }
.password-card #botao-trocar-senha:hover, .password-card #botao-trocar-senha:focus-visible { background: #9ae600; color: #03102b; }