.reset-form, .reset-confirm { display: flex; flex-direction: column; gap: var(--space-6); } .reset-form__description, .reset-confirm__text { margin: 0; font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--fs-base); color: var(--color-text-dark); } .reset-form__description { max-width: 34ch; margin-inline: auto; text-align: center; } .reset-form__back { align-self: center; font-family: var(--font-body); font-size: var(--fs-base); color: #585555; text-decoration: underline; transition: color var(--duration-fast) var(--ease-out); } .reset-form__back:hover { color: var(--color-canon-red-alt); } .reset-confirm { outline: none; } .reset-confirm__status { display: flex; flex-direction: column; gap: var(--space-2); } .reset-confirm__heading { margin: 0; display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-md); color: var(--color-black); justify-content: center; } .reset-confirm__icon { font-size: 1.5rem; color: #06a10b; flex-shrink: 0; } .reset-honeypot { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .reset-form .auth-field { gap: 4px; } .reset-form .auth-field__input.is-invalid { border-color: var(--color-canon-red-alt); background-color: var(--color-canon-red-soft); } .reset-form .auth-field__error { display: none; align-items: center; gap: 4px; margin: 0; font-family: var(--font-body); font-size: var(--fs-sm); color: var(--color-canon-red-alt); } .reset-form .auth-field__error.is-visible { display: flex; } .reset-form .auth-field__error i { font-size: 1rem; flex-shrink: 0; } .reset-chrome, .reset-chrome *, .reset-chrome *::before, .reset-chrome *::after { box-sizing: border-box; } .reset-chrome { background-color: #f0f0f0; } .reset-chrome .registro-page { padding: calc(72px + 48px) var(--page-gutter, 16px) 48px; } @media (min-width: 1024px) { .reset-chrome .registro-page { padding-top: calc(90px + 48px); } } .reset-chrome .registro-container { max-width: 704px; margin-inline: auto; padding-inline: 16px; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .reset-chrome .registro-card { margin-top: 0; background: #fff; border: 0.8px solid #f3f4f6; border-radius: 12px; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.07); overflow: hidden; } .reset-chrome .step-header { padding: 20px clamp(16px, 4vw, 32px); background: #f9fafb; border-bottom: 0.8px solid #f3f4f6; } .reset-chrome .step-header__title { margin: 0; font-family: var(--font-heading, var(--font-body)); font-weight: 700; font-size: 18px; line-height: 28px; color: #101828; } .reset-chrome .step-header__title:focus, .success-copy__title:focus { outline: none; } .reset-chrome .step-body { padding: clamp(20px, 4vw, 32px); display: flex; flex-direction: column; gap: 20px; } .reset-chrome .registro-required-note { margin: 0; font-family: var(--font-body); font-size: 12px; color: #6a7282; } .reset-chrome .registro-required-note__mark { color: var(--color-canon-red, #c8102e); } .reset-intro { margin: 0; font-family: var(--font-body); font-size: 16px; color: var(--color-black, #000); } .auth-btn--registro:not(:disabled) { background-color: var(--color-canon-red, #c8102e); } .auth-btn--registro:not(:disabled):hover { background-color: #a30d26; } .reset-cancel-wrap { margin: 0; text-align: center; } .reset-cancel { font-family: var(--font-body); font-size: 12px; color: #565b63; text-decoration: underline; } .reset-cancel:hover { color: var(--color-canon-red-alt, #df1f26); } .step-body--success { align-items: center; text-align: center; padding-block: 40px; } .reset-success-icon { width: 284px; max-width: 100%; height: auto; } .success-copy { max-width: 368px; } .success-copy__title { margin: 0; font-family: var(--font-heading, var(--font-body)); font-weight: 700; font-size: 20px; color: #101828; } .success-copy__text { margin: 8px 0 0; font-family: var(--font-body); font-size: 14px; color: #4a5565; } .success-copy__text strong { color: #101828; font-weight: 600; } .success-copy__login { font-family: var(--font-body); font-weight: 500; font-size: 12px; color: var(--color-canon-red, #c8102e); } .success-copy__login:hover { text-decoration: underline; } .reset-chrome .rfield { display: flex; flex-direction: column; gap: 4px; width: 100%; } .reset-chrome .rfield__label { font-family: var(--font-body); font-weight: 500; font-size: 12px; color: #4a5565; margin: 0; } .reset-chrome .rfield__required { color: var(--color-canon-red, #c8102e); margin-left: 2px; } .reset-chrome .rfield__control { position: relative; } .reset-chrome .rfield__input { width: 100%; height: 41.6px; padding: 10px 44px 10px 12px; border: 0.8px solid #d1d5dc; border-radius: 6px; background: #fff; font-family: var(--font-body); font-size: 14px; color: #000; transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out; } .reset-chrome .rfield__input::placeholder { color: #99a1af; } .reset-chrome .rfield__input:hover { border-color: #9ca3af; } .reset-chrome .rfield__input:focus-visible { outline: none; border-color: var(--color-canon-red, #c8102e); box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.15); } .reset-chrome .rfield__input.is-invalid { border-color: var(--color-canon-red, #c8102e); background-color: rgba(200, 16, 46, 0.06); } .reset-chrome .rfield__error { display: none; align-items: center; gap: 4px; margin: 0; font-family: var(--font-body); font-size: 11px; color: var(--color-canon-red, #c8102e); } .reset-chrome .rfield__error.is-visible { display: flex; } .reset-chrome .rfield__error i { font-size: 13px; flex-shrink: 0; } .reset-chrome .rfield__toggle { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; border-radius: 999px; background: transparent; color: #9ca3af; font-size: 1.1rem; cursor: pointer; } .reset-chrome .rfield__toggle:hover { background-color: #f3f4f6; color: #374151; } .reset-chrome .rfield__hints { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 12px; list-style: none; border: 1px solid #f3f4f6; border-radius: 8px; background: #f9fafb; font-family: var(--font-body); font-size: 12px; color: #4a5565; max-height: 0; padding-block: 0; opacity: 0; overflow: hidden; transition: max-height 0.2s ease-out, opacity 0.15s ease-out, padding-block 0.2s ease-out, margin-top 0.2s ease-out; } .reset-chrome .rfield__hints.is-open { max-height: 160px; padding-block: 12px; opacity: 1; margin-top: 4px; } .reset-chrome .rfield__hint { display: flex; align-items: center; gap: 6px; } .reset-chrome .rfield__hint-icon { color: #d1d5db; font-size: 14px; flex-shrink: 0; } .reset-chrome .rfield__hint.is-valid { color: #101828; } .reset-chrome .rfield__hint.is-valid .rfield__hint-icon { color: #16a34a; } @media (prefers-reduced-motion: no-preference) { .registro-step { animation: reset-step-in 0.2s ease-out; } } @keyframes reset-step-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }