/* ========================================
   GOOGLE FONTS — Local copies.
   Replaces external <link> to fonts.googleapis.com
   for privacy (no external requests).
   Only latin + latin-ext subsets (Spanish content).
   ======================================== */

/* ── Open Sans ────────────────────────── */

/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/open-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/open-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Red Hat Text ─────────────────────── */

/* latin-ext */
@font-face {
  font-family: 'Red Hat Text';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/red-hat-text-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Red Hat Text';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/red-hat-text-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Red Hat Display ──────────────────── */

/* latin-ext */
@font-face {
  font-family: 'Red Hat Display';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/red-hat-display-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Red Hat Display';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/red-hat-display-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Manrope — Custom static fonts */

@font-face {
    font-display: swap;
    font-family: "Manrope";
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/Manrope-Regular.ttf") format("truetype");
}

@font-face {
    font-display: swap;
    font-family: "Manrope";
    font-style: normal;
    font-weight: 500;
    src: url("../fonts/Manrope-Medium.ttf") format("truetype");
}

@font-face {
    font-display: swap;
    font-family: "Manrope";
    font-style: normal;
    font-weight: 700;
    src: url("../fonts/Manrope-Bold.ttf") format("truetype");
}


/* --- Custom Properties --- */
:root {
  /* Colors */
  --nq-magenta:         #DA0081;
  --nq-magenta-hover:   #c00073;
  --nq-dark:            #200020;
  --nq-text:            #363636;
  --nq-input-bg:        #F8F1F5;
  --nq-error-red:       #D93552;
  --nq-error-banner:    #FF3E60;
  --nq-invalid-bg:      #F1BFDA;
  --nq-focus-border:    #796679;
  --nq-success-green:   rgb(42, 187, 127);
  --nq-success-bg:      rgb(244, 255, 250);
  --nq-mosparo-border:  rgb(241, 191, 218);
  --nq-grey-hover:      rgb(170, 170, 170);
  --nq-white:           #FFFFFF;

  /* Fonts */
  --font-pf:            "Red Hat Text", "RedHatText", "Overpass", overpass, helvetica, arial, sans-serif;
  --font-body:          "Open Sans", Helvetica, Arial, sans-serif;

  /* Sizing */
  --input-height:       48px;
  --radius:             4px;
  --radius-lg:          8px;
  --radius-mosparo:     11px;
  --radius-circle:      20px;
  --checkbox-size:      40px;

  /* Disabled state */
  --nq-disabled-text:   #6a6e73;
  --nq-disabled-bg:     #d2d2d2;

  /* Transitions */
  --transition-fast:    0.15s ease-in-out;
  --transition-medium:  0.25s ease;
}

/* ========================================
   BASE — Minimal reset, html/body defaults,
   and @font-face aliases for PatternFly ↔ Google Fonts bridging.
   ======================================== */

/* Font aliases: PatternFly references "RedHatText"/"RedHatDisplay" (no spaces),
   but Google Fonts loads "Red Hat Text"/"Red Hat Display" (with spaces).
   These @font-face aliases bridge the gap. */
@font-face {
  font-family: 'RedHatDisplay';
  font-style: normal;
  font-weight: 300;
  src: local('Red Hat Display Light'), local('RedHatDisplay-Light'), local('Red Hat Display');
}
@font-face {
  font-family: 'RedHatDisplay';
  font-style: normal;
  font-weight: 400;
  src: local('Red Hat Display Regular'), local('RedHatDisplay-Regular'), local('Red Hat Display');
}
@font-face {
  font-family: 'RedHatDisplay';
  font-style: normal;
  font-weight: 500;
  src: local('Red Hat Display Medium'), local('RedHatDisplay-Medium');
}
@font-face {
  font-family: 'RedHatDisplay';
  font-style: normal;
  font-weight: 600;
  src: local('Red Hat Display SemiBold'), local('RedHatDisplay-SemiBold'), local('Red Hat Display Medium');
}
@font-face {
  font-family: 'RedHatDisplay';
  font-style: normal;
  font-weight: 700;
  src: local('Red Hat Display Bold'), local('RedHatDisplay-Bold');
}
@font-face {
  font-family: 'RedHatText';
  font-style: normal;
  font-weight: 300;
  src: local('Red Hat Text Light'), local('RedHatText-Light'), local('Red Hat Text');
}
@font-face {
  font-family: 'RedHatText';
  font-style: normal;
  font-weight: 400;
  src: local('Red Hat Text Regular'), local('RedHatText-Regular'), local('Red Hat Text');
}
@font-face {
  font-family: 'RedHatText';
  font-style: normal;
  font-weight: 500;
  src: local('Red Hat Text Medium'), local('RedHatText-Medium');
}
@font-face {
  font-family: 'RedHatText';
  font-style: normal;
  font-weight: 700;
  src: local('Red Hat Text Bold'), local('RedHatText-Bold');
}

/* --- Reset --- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* --- html / body --- */

html {
  font-family: var(--font-pf);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.66666667;
  color: var(--nq-text);
  background-color: var(--nq-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* --- Element defaults --- */

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

a {
  color: #06c;
  text-decoration: none;
}

a:hover {
  color: #004080;
  text-decoration: underline;
}

img {
  vertical-align: middle;
  border-style: none;
}

input, button, select, textarea {
  margin: 0;
  font-family: var(--font-pf);
  font-size: inherit;
  line-height: inherit;
}

button {
  cursor: pointer;
  border-radius: 0;
}

input::-moz-focus-inner,
button::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

/* Hide number input spinners */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

/* ========================================
   LAYOUT — Page structure, card container,
   content areas, and responsive breakpoints.
   ======================================== */

.login-pf {
  background: none;
  min-height: 100vh;
  min-height: 100dvh;
}

.login-pf .container {
  padding-top: 40px;
}

.v-a {
  padding-top: 20px;
}

.card-pf {
  margin: 0 auto;
  padding: 0 20px;
  max-width: 500px;
  box-shadow: none;
}

#xd {
  width: 100%;
}

#xe {
  margin-top: 20px;
}

#xe .row {
  margin-left: 0;
  margin-right: 0;
}

#xg {
  margin-top: 10px;
}

#zb {
  margin-top: 20px;
}

/* --- Responsive --- */

@media (min-width: 768px) {
  .v-a .card-pf {
    max-width: 385px;
  }

  .login-pf .container {
    padding-right: 80px;
  }
}

@media (max-width: 767px) {
  .v-a .card-pf {
    max-width: 345px;
    margin: 0 auto;
    padding-top: 0;
    border-top: 0;
  }

  .login-pf .container {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}

/* ========================================
   HEADER — Logo, page title, and
   v-b (flex column container).
   ======================================== */

.v-c {
	width: 100%;
	text-align: center;
	margin-bottom: 20px;
}

#xa {
	color: #ededed;
	overflow: visible;
	white-space: nowrap;
	margin: 0;
}

#xb {
	width: 100%;
}

div.v-o {
	background-image: url(../img/i03.svg);
	background-repeat: no-repeat;
	margin: 0 auto;
	width: 180px;
	height: 40px;
	top: 96px;
	left: 108px;
	gap: 0px;
	opacity: 0px;
}

div.v-o span {
	display: none;
}

.v-b {
	display: flex;
	flex-direction: column;
	text-align: center;
	margin-bottom: 20px;
}

h1#xc {
	font-style: normal;
	font-weight: 600;
	font-size: 1.5rem;
	line-height: 1.75rem;
	text-align: center;
	color: var(--nq-dark);
	margin: 20px;
	white-space: nowrap;
}

/* ========================================
   TYPOGRAPHY — Heading hierarchy, .pr-text,
   and general text rules.
   ======================================== */

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-family: var(--font-body);
  font-weight: 500;
  line-height: 1.2;
}

.pr-text {
  color: var(--nq-dark);
  margin: 0;
  margin-top: 1rem;
  font-weight: 350;
  font-size: 14px;
  line-height: 21.86px;
  text-align: center;
}

/* ========================================
   FORM — .form-group, input fields,
   floating labels, and error messages.
   ======================================== */

/* --- Form groups --- */

.form-group {
	position: relative;
	margin-bottom: 1.25em;
}

#xh div.form-group:last-of-type {
	margin-bottom: 0;
}

/* --- Input fields --- */

.pf-c-form-control {
	display: block;
	width: 100%;
	height: var(--input-height) !important;
	padding: 8px 16px;
	font-family: "RedHatText", "Red Hat Text", "Overpass", overpass, helvetica, arial, sans-serif;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--nq-dark);
	background-color: var(--nq-input-bg);
	background-clip: padding-box;
	border: 0;
	border-radius: var(--radius);
	transition: border-color var(--transition-fast);
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

.pf-c-form-control:focus,
input:focus:not(.container_rombo):not(.container_asterisk) {
	border-color: var(--nq-focus-border);
	background-color: var(--nq-input-bg);
	outline: none;
	border: 1px solid var(--nq-focus-border) !important;
}

/* --- Floating labels --- */

.floating-label {
	position: absolute;
	pointer-events: none;
	left: 16px;
	top: 14px;
	transition: 0.2s ease all;
	color: var(--nq-dark);
	font-size: 16px;
	font-weight: 350;
	line-height: 1.25rem;
}

input:focus ~ .floating-label,
input:not(:focus):valid ~ .floating-label {
	top: 0;
	bottom: 10px;
	left: 16px;
	font-size: 12px;
	font-weight: 400;
	color: var(--nq-magenta);
	margin: 0 0 50px 0;
}

/* --- Error messages --- */

.errorMessage {
	display: none;
	color: var(--nq-error-red) !important;
	font-size: 12px;
	font-weight: 400;
	margin-top: 4px;
}

/* ========================================
   PASSWORD — .pf-c-input-group wrapper,
   toggle-password eye icon button (default,
   .visible, .focus states).
   ======================================== */

.pf-c-input-group {
  display: flex;
  width: 100%;
  position: relative;
}

.toggle-password {
  visibility: hidden;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background-image: url(../img/i09.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border: none;
  background-color: transparent;
  cursor: pointer;
  padding: 0;
  z-index: 2;
}

.toggle-password.visible {
  background-image: url(../img/i08.svg);
}

/* Show eye icon when password input is focused or has a value */
.toggle-password.focus {
  visibility: visible;
}

/*
 * When the eye icon is visible, hide the error triangle on the password input.
 * See states.css for the .pwd-eye-active override rules.
 */

/* ========================================
   CAPTCHA (MOSPARO) — .g-recaptcha container,
   mosparo placeholder, checkbox, checkmark icon,
   label, and all interactive states
   (default, loading, checked).
   ======================================== */

.g-recaptcha {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

/* --- Outer box --- */

.mosparo-placeholder {
  display: flex;
  position: relative;
  width: 100%;
  min-width: 300px;
  max-width: 500px;
  padding: 20px 20px 20px 24px;
  font-family: var(--font-pf);
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  color: var(--nq-dark);
  background: var(--nq-white);
  border: 2px solid var(--nq-mosparo-border);
  border-radius: var(--radius-mosparo);
  box-shadow: 0 0 12px 3px rgba(170, 170, 170, 0), inset 0 0 12px 3px rgba(0, 0, 0, 0);
  user-select: none;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.mosparo-placeholder *,
.mosparo-placeholder ::before,
.mosparo-placeholder ::after {
  box-sizing: border-box;
}

.mosparo-placeholder.checked {
  background: var(--nq-success-bg);
  border-color: var(--nq-success-green);
}

/* --- Row layout --- */

.mosparo-row {
  display: flex;
  align-items: center;
  width: 100%;
}

/* --- Checkbox column --- */

.mosparo-checkbox-col {
  display: block;
  position: relative;
  margin-right: 20px;
}

.mosparo-checkbox-col input[type="checkbox"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  z-index: 2;
  cursor: pointer;
}

/* --- Visual checkbox circle --- */

.mosparo-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex: 0 0 var(--checkbox-size);
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  background: transparent;
  border: 3px solid var(--nq-magenta);
  border-radius: var(--radius-circle);
  cursor: pointer;
  transition: all var(--transition-medium);
}

/* Pseudo-elements for ping & loading animations */
.mosparo-checkbox::before,
.mosparo-checkbox::after {
  content: "";
  display: block;
  position: absolute;
  top: -3px;
  left: -3px;
  width: var(--checkbox-size);
  height: var(--checkbox-size);
}

/* Ping ring (pulsating outline, idle state) */
.mosparo-checkbox::before {
  border: 1px solid var(--nq-magenta);
  border-radius: var(--radius-circle);
  opacity: 0;
  transform: scale(1);
  transform-origin: center;
  animation: mosparo-ping 3s infinite;
}

/* Loading spinner arc (hidden by default) */
.mosparo-checkbox::after {
  border: 3px solid transparent;
  border-left-color: var(--nq-magenta);
  border-radius: var(--radius-circle);
  opacity: 0;
  transition: all var(--transition-medium);
}

.mosparo-checkbox:hover {
  background-color: rgba(218, 0, 129, 0.05);
}

.mosparo-placeholder:not(.checked):not(.loading) .mosparo-checkbox:hover {
  border-color: var(--nq-grey-hover);
}

/* Focus ring via native checkbox */
.mosparo-placeholder:not(.checked):not(.loading) input[type="checkbox"]:focus + .mosparo-checkbox {
  border-color: var(--nq-grey-hover);
  box-shadow: 0 0 0 3px rgba(170, 170, 170, 0.3);
}

.mosparo-placeholder.checked input[type="checkbox"]:focus + .mosparo-checkbox {
  box-shadow: 0 0 0 3px rgba(42, 187, 127, 0.3);
}

/* --- Loading state --- */

.mosparo-placeholder.loading .mosparo-checkbox {
  border-color: rgba(132, 132, 132, 0.33);
}

.mosparo-placeholder.loading .mosparo-checkbox::before {
  animation: none;
  opacity: 0;
}

.mosparo-placeholder.loading .mosparo-checkbox::after {
  animation: mosparo-loading 1s linear infinite;
  opacity: 1;
}

/* --- Checked state --- */

.mosparo-placeholder.checked .mosparo-checkbox {
  background-color: transparent;
  border-color: var(--nq-success-green);
}

.mosparo-placeholder.checked .mosparo-checkbox::before {
  animation: none;
  opacity: 0;
}

/* --- Checkmark icon (CSS-drawn L-shape) --- */

.mosparo-icon-checkmark {
  display: none;
  width: 20px;
  height: 10px;
  margin-top: -4px;
  opacity: 0;
  transform: rotate(-45deg) scale(0);
  transform-origin: center;
}

.mosparo-icon-checkmark::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-style: solid;
  border-width: 0 0 2px 2px;
  border-color: var(--nq-success-green);
}

.mosparo-placeholder.checked .mosparo-icon-checkmark {
  display: block;
  animation: mosparo-checkmark-scale 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* --- Label --- */

.mosparo-content-col {
  flex: 1;
}

.mosparo-label {
  display: block;
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  color: var(--nq-dark);
  cursor: pointer;
}

/* ========================================
   BUTTONS — .pf-c-button base, .pf-m-block,
   #xr (primary), #xs
   (default), and their hover/disabled states.
   ======================================== */

.pf-c-button {
  display: inline-block;
  padding: 0.375rem 1rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  color: inherit;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  user-select: none;
  transition: color var(--transition-fast),
              background-color var(--transition-fast),
              border-color var(--transition-fast);
}

.pf-m-block {
  display: block;
  width: 100%;
}

/* --- Primary button (Entra) --- */

#xr {
  height: var(--input-height);
  font-weight: 400;
  color: var(--nq-white);
  background-color: var(--nq-magenta);
  border: none;
  border-radius: var(--radius);
}

#xr:hover {
  background-color: var(--nq-magenta-hover);
}

#xr:disabled {
  color: #FFFFFF;
  background-color: rgba(218, 0, 129, 0.25);
  opacity: 1;
  pointer-events: none;
  cursor: default;
}

/* --- Cancel button (Ahora No) --- */

#xs {
  height: var(--input-height);
  margin: -5px 0 0 0;
  font-weight: 400;
  color: var(--nq-dark);
  background-image: none;
  background-color: var(--nq-white);
  border: 1px solid var(--nq-dark);
  border-radius: var(--radius);
}

#xs:hover {
  background-color: #f5f5f5;
}

/* ========================================
   STATES — Error/validation visual states
   for form controls (aria-invalid, JS-added
   error classes, invalid-credential).
   ======================================== */

/* Error validation on inputs (added by JS via aria-invalid) */
.pf-c-form-control[aria-invalid="true"]:focus {
  border: 1px solid var(--nq-error-red) !important;
}

.pf-c-form-control[aria-invalid="true"] {
background-image: url(../img/i07.svg) !important;
	background-position: calc(100% - 0.5rem) center;
	background-size: 1.5rem 1.5rem;
	background-repeat: no-repeat;
}

/* Error classes added by JS for username */
.pf-c-form-control-error {
	background-image: url(../img/i07.svg) !important;
  background-position: calc(100% - 0.5rem) center;
  background-size: 1.5rem 1.5rem;
  background-repeat: no-repeat;
}

.pf-c-form-control-error:focus {
  border: 1px solid var(--nq-error-red) !important;
}

/* Error classes added by JS for password */
.pf-c-form-control-error-pwd {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23D93552'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E") !important;
  background-position: calc(100% - 0.5rem) center;
  background-size: 1.5rem 1.5rem;
  background-repeat: no-repeat;
}

.pf-c-form-control-error-pwd:focus {
  border: 1px solid var(--nq-error-red) !important;
}

/*
 * When the eye icon is visible (pwd-eye-active on wrapper),
 * hide the error triangle to prevent overlap.
 */
.pf-c-input-group.pwd-eye-active .pf-c-form-control-error-pwd,
.pf-c-input-group.pwd-eye-active .pf-c-form-control[aria-invalid="true"] {
  background-image: none !important;
}

/* Invalid credential (server-side error highlight) */
.invalid-credential {
  background-color: var(--nq-invalid-bg) !important;
}

/* ========================================
   ALERT ERROR BANNER — Shown on invalid login
   Original: .pf-c-alert.pf-m-danger {
     background-color: #FF3E60; border: 0; border-radius: 8px }
   ======================================== */

.alert-error {
  display: flex;
  align-items: center;
  margin: 20px 0;
  padding: 8px;
  border-radius: 8px;
}

.alert-error.pf-m-danger {
  background-color: #FF3E60;
  border: 0;
}

.alert-error .pf-c-alert__title {
  font-size: 14px;
  font-weight: 400;
  line-height: 18.52px;
  color: #200020;
}

/* Error icon (triangle with !) */
.icon-alert-error-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 5px;
  flex-shrink: 0;
}

.icon-alert-error {
  display: block;
  background-image: url(../img/i11.svg);
  background-size: 2rem 2rem;
  background-repeat: no-repeat;
  width: 35px;
  height: 35px;
}

/* ========================================
   ANIMATIONS — All @keyframes declarations
   for mosparo captcha (ping, loading spinner,
   checkmark draw, checkmark scale).
   ======================================== */

@keyframes mosparo-ping {
  0%   { opacity: 0; transform: scale(1); }
  5%   { opacity: 1; }
  100% { opacity: 0; transform: scale(2); }
}

@keyframes mosparo-loading {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes mosparo-checkmark-draw {
  0%   { width: 0; height: 0; opacity: 0; }
  40%  { width: 0; height: 100%; opacity: 1; }
  100% { width: 100%; height: 100%; opacity: 1; }
}

@keyframes mosparo-checkmark-scale {
  0%   { transform: rotate(-45deg) scale(0); opacity: 0; }
  50%  { transform: rotate(-45deg) scale(1.2); opacity: 1; }
  100% { transform: rotate(-45deg) scale(1); opacity: 1; }
}

/* ========================================
   Loading Overlay — Animation
   ======================================== */

/* --- Overlay & Dialog --- */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1101;
  border: none;
  overflow: hidden;
  display: none;
  background-color: #fafafae3 !important;
  opacity: 1;
}

.loading-overlay.active {
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading-dialog {
  border: none;
  box-shadow: none;
  overflow: hidden;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.loading-dialog-content {
  padding: 0;
  background: unset;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* --- Loading Container --- */
.loading {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* --- SVG Logo Letter Animations --- */
.loading__logo .point__up {
  fill: #DA0081;
  animation-timing-function: ease-in-out;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-name: point-up-animation;
}

.loading__logo .point__down {
  fill: #DA0081;
  animation-timing-function: ease-in-out;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-name: point-down-animation;
}

.loading__logo .N {
  animation-timing-function: ease-in-out;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-name: n-animation;
}

.loading__logo .E {
  animation-timing-function: ease-in-out;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-name: e-animation;
}

.loading__logo .Q {
  animation-timing-function: ease-in-out;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-name: q-animation;
}

.loading__logo .U {
  animation-timing-function: ease-in-out;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-name: u-animation;
}

.loading__logo .I {
  animation-timing-function: ease-in-out;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-name: i-animation;
}

/* --- Feedback (success/error states) --- */
.loading__feedback {
  position: absolute;
  height: 200px;
  width: 200px;
  background-repeat: no-repeat;
  background-position: center;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -100px;
  opacity: 0;
  background-size: 0;
  will-change: background-size, opacity;
  transition: background-size 0.3s;
}

.loading--animate .loading__feedback {
  background-size: 100%;
  opacity: 1;
}

.loading--animate .loading__logo {
  display: none;
}

/* --- Success state --- */

.loading--success .loading__feedback {
  background-image: url('../img/i05.svg');
}

/* --- Error state --- */

.loading--error .loading__feedback {
  background-image: url('../img/i04.svg');
}

.loading__status-text {
  position: absolute;
  top: calc(50% + 90px);
  left: 50%;
  transform: translateX(-50%);
  font-family: "Manrope", sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #200020;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.loading--animate .loading__status-text {
  opacity: 1;
}

/* --- Body scroll lock --- */
body.loading-active {
  overflow: hidden;
}

/* --- Keyframes --- */
@keyframes point-up-animation {
  0% { z-index: -100; transform: translate(20px); opacity: 0; }
  10% { z-index: -100; transform: translate(20px) rotate(0); opacity: 0; }
  15% { z-index: 0; transform: translate(0) rotate(180deg); opacity: 1; transform-origin: 3% 9%; }
  30% { transform: translate(0); }
  35% { transform: translate(30px); }
  40% { transform: translate(45px, 15px) scale(2); }
  47% { transform: translate(45px, 15px) scale(2); }
  50% { transform: translate(50px, 11px) scale(2); }
  55% { transform-origin: 3.5% 9%; transform: translate(50px, 11px) scale(2); }
  60% { transform: translate(45px, 15px) scale(2) rotate(-180deg); }
  65% { transform: translate(45px, 15px) scale(2) rotate(-180deg); transform-origin: 3.5% 9%; }
  70% { transform: translate(50px, 11px) scale(2) rotate(-180deg); transform-origin: 3.5% 9%; }
  80% { transform: translate(45px, 15px) scale(2) rotate(-360deg); transform-origin: 3.5% 9%; }
  90% { transform: translate(45px, 15px) scale(2) rotate(-360deg); }
  95% { transform: translate(-60px) scale(0.5) rotate(-360deg); }
  to { transform: translate(-60px) scale(0) rotate(-360deg); }
}

@keyframes point-down-animation {
  0% { z-index: -100; transform: translate(20px); opacity: 0; }
  10% { z-index: -100; transform: translate(20px) rotate(0); opacity: 0; }
  15% { z-index: 0; transform: translate(0) rotate(180deg); opacity: 1; transform-origin: 3% 9%; }
  30% { transform: translate(0); }
  35% { transform: translate(30px); }
  40% { transform: translate(43px, 15px) scale(2); }
  47% { transform: translate(43px, 15px) scale(2); }
  50% { transform: translate(39px, 19px) scale(2); }
  55% { transform-origin: 3.5% 9%; transform: translate(39px, 19px) scale(2); }
  60% { transform: translate(44px, 15px) scale(2) rotate(-180deg); }
  65% { transform: translate(44px, 15px) scale(2) rotate(-180deg); }
  70% { transform: translate(39px, 19px) scale(2) rotate(-180deg); }
  80% { transform: translate(44px, 15px) scale(2) rotate(-360deg); transform-origin: 3.5% 9%; }
  90% { transform: translate(44px, 15px) scale(2) rotate(-360deg); }
  95% { transform: translate(-60px) scale(0.5) rotate(-360deg); }
  to { transform: translate(-60px) scale(0) rotate(-360deg); }
}

@keyframes n-animation {
  0% { transform: translate(30px); opacity: 0; }
  3% { transform: translate(30px); opacity: 1; }
  15% { transform: translate(0); }
  30% { transform: translate(0); }
  35% { transform: translate(30px); rotate: 0deg; }
  39% { transform-origin: 30% 52%; rotate: 45deg; }
  43% { transform: translate(50px, 30px); }
  to { transform: translate(50px, 40px); }
}

@keyframes e-animation {
  0% { opacity: 0; transform: translate(20px); }
  6% { opacity: 0; transform: translate(20px); }
  15% { opacity: 1; transform: translate(0); }
  30% { transform: translate(0); opacity: 1; }
  31% { transform: translate(-20px); opacity: 0; }
  to { opacity: 0; }
}

@keyframes q-animation {
  0% { opacity: 0; transform: translate(12px); }
  8% { opacity: 0; transform: translate(12px); }
  15% { opacity: 1; transform: translate(0); }
  30% { transform: translate(0); opacity: 1; }
  32% { transform: translate(-20px); opacity: 0; }
  to { opacity: 0; }
}

@keyframes u-animation {
  0% { opacity: 0; transform: translate(12px); }
  9% { opacity: 0; transform: translate(12px); }
  15% { opacity: 1; transform: translate(0); }
  30% { transform: translate(0); opacity: 1; }
  33% { transform: translate(-30px); opacity: 0; }
  to { opacity: 0; }
}

@keyframes i-animation {
  0% { opacity: 0; transform-origin: 100% 80%; transform: translate(10px) rotate(90deg); }
  11% { opacity: 0; transform: translate(10px) rotate(90deg); }
  15% { opacity: 1; transform: translate(0) rotate(0); }
  30% { transform: translate(0); opacity: 1; }
  34% { transform: translate(-40px); opacity: 0; }
  to { opacity: 0; }
}

/* ========================================
   OTP SCREEN — Styles for the OTP code input page.
   This file is OTP-specific (not TOTP).

   Layout: Title → OTP boxes → Instructions →
   Re-send section → Numeric keypad.
   ======================================== */

/* --- Prevent iOS double-tap zoom --- */
* {
	touch-action: manipulation;
}

/* --- OTP Page Layout --- */

.otp-page {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh; /* dynamic viewport for mobile */
	background-color: var(--nq-white);
	overflow: hidden;
}

/* --- OTP Content Title (replaces former header) --- */

.v-e {
	width: 100%;
	font-family: "Manrope", sans-serif;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.3;
	color: #200020;
	text-align: center;
	margin: 0 0 1rem;
}

/* --- OTP Content Area --- */

.v-d {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 32px 24px 16px;
	overflow-y: auto;
}

/* --- OTP Input Boxes (6 digits) --- */

.v-f {
	display: flex;
	gap: 4px;
	justify-content: center;
	width: 100%;
	margin-bottom: 24px;
	padding: 0 16px;
}

.otp-box {
	flex: 1;
	aspect-ratio: 1;
	max-width: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #e8e5ef;
	border: none;
	border-radius: 6px;
	font-family: "Manrope", sans-serif;
	font-size: 24px;
	font-weight: 600;
	color: var(--nq-magenta);
}

.otp-box--active {
	background-color: #e8e5ef;
}

.otp-box--filled {
	background-color: #e8e5ef;
}

/* --- OTP Instruction Text --- */

.zi {
	font-family: "Manrope", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	color: #303030;
	text-align: center;
	max-width: 360px;
	margin: 0 0 24px;
}

.zi__email {
	color: #DA0081;
	font-weight: 500;
}

/* --- Re-send OTP Section --- */

.otp-resend {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-bottom: 24px;
}

.otp-resend__prompt {
	display: flex;
	align-items: center;
	gap: 15px;
	font-family: "Manrope", sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: #606060;
}

.otp-resend__icon {
	width: 20px;
	height: 20px;
	display: inline-block;
}

/* Circular countdown timer (SVG-based for round linecap) */
.otp-resend__spinner {
	width: 28px;
	height: 28px;
	display: inline-block;
	flex-shrink: 0;
	position: relative;
}

.otp-resend__spinner svg {
	width: 100%;
	height: 100%;
	transform: rotate(-270deg) scaleX(-1);
}

.otp-resend__spinner .spinner-bg {
	fill: none;
	stroke: #f5d0e6;
	stroke-width: 5;
}

.otp-resend__spinner .spinner-progress {
	fill: none;
	stroke: var(--nq-magenta);
	stroke-width: 5;
	stroke-linecap: round;
	stroke-dasharray: 69.115;
	stroke-dashoffset: 5;
	transition: stroke-dashoffset 1s linear;
}

/* Disabled state for resend button */
.otp-resend__btn:disabled,
.otp-resend__btn--disabled {
	color: rgba(218, 0, 129, 0.5);
	border-color: rgba(218, 0, 129, 0.5);
	cursor: default;
	pointer-events: none;
}

.otp-resend__btn {
	display: block;
	width: 75%;
	max-width: 280px;
	margin: 0 auto;
	padding: 3px 20px;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 400;
	font-style: normal;
	color: var(--nq-magenta);
	background: none;
	border: 1.2px solid var(--nq-magenta);
	border-radius: 5px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.otp-resend__btn:hover {
	background-color: rgba(218, 0, 129, 0.06);
}

.otp-resend__btn:active {
	background-color: rgba(218, 0, 129, 0.12);
}

/* --- Numeric Keypad --- */

.v-g {
	width: 100%;
	max-width: 340px;
	margin: auto auto 0; /* push to bottom */
	padding-bottom: 50px;
	flex-shrink: 0;
}

.v-g__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.v-g__key {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 60px;
	padding: 0;
	margin: 0 auto;
	background: none;
	border: none;
	cursor: pointer;
	font-family: "Manrope", sans-serif;
	font-size: 34px;
	font-weight: 400;
	color: var(--nq-dark);
	border-radius: 8px;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
}

.v-g__key:active,
.v-g__key--pressed {
	background-color: #f0ecf5;
}

.v-g__key--empty {
	cursor: default;
	pointer-events: none;
}

.v-g__key--backspace img {
	width: 28px;
	height: 28px;
	opacity: 1;
	/* fill color set directly in the SVG (#200020) */
}

.v-g__key--backspace:active img {
	opacity: 0.5;
}

.v-g__key:disabled {
	opacity: 0.3;
	pointer-events: none;
}

/* --- Responsive adjustments --- */

@media (max-width: 360px) {
	.v-f {
		gap: 6px;
	}

	.otp-box {
		width: 42px;
		height: 50px;
		font-size: 22px;
	}

	.v-g__key {
		height: 48px;
		font-size: 24px;
	}
}

@media (min-height: 700px) {
	.v-d {
		padding-top: 40px;
	}
}

/* ========================================
   OTP CHANNEL MODAL — Overlay modal for selecting
   SMS or Email as OTP delivery channel.
   This file is OTP-specific (not TOTP).
   ======================================== */

/* --- Overlay Backdrop --- */

.v-h-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1200;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(32, 0, 32, 0.5);
	padding: 100px 20px 20px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.v-h-overlay--active {
	opacity: 1;
	visibility: visible;
}

/* --- Modal Card --- */

.v-h {
	width: 100%;
	max-width: 360px;
	background-color: #ffffff;
	border-radius: 10px;
	padding: 32px 28px 28px;
	text-align: center;
	position: relative;
	transform: scale(0.95) translateY(10px);
	transition: transform 0.3s ease, opacity 0.3s ease;
	opacity: 0;
}

.v-h-overlay--active .v-h {
	transform: scale(1) translateY(0);
	opacity: 1;
}

/* --- Lock Icon Container --- */

.v-h__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	margin: 0 auto 10px;
	background: none;
	border-radius: 0;
}

.v-h__icon img {
	width: 100px;
	height: 100px;
}

/* --- Modal Titles & Text --- */

.v-h__title {
	font-family: "Manrope", sans-serif;
	font-size: 18px;
	font-weight: 700;
	color: #200020;
	margin: 0 0 16px;
	line-height: 1.3;
}

.v-h__text {
	font-family: "Manrope", sans-serif;
	font-size: 16px;
	font-weight: 400;
	color: #6b6b6b;
	line-height: 1.6;
	margin: 0 0 8px;
}

.v-h__text:last-of-type {
	margin-bottom: 28px;
}

.v-h__highlight {
	color: #da0081;
	font-weight: 600;
	display: block;
}

/* --- Modal Primary Button (Enviar al celular) --- */

.v-h__btn-primary {
	display: block;
	width: 100%;
	padding: 16px 20px;
	font-family: "Manrope", sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: #ffffff;
	background-color: #da0081;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	margin-bottom: 16px;
	-webkit-tap-highlight-color: transparent;
}

.v-h__btn-primary:active {
	background-color: #a8005f;
}

/* --- Modal Text Link (Enviar al correo) --- */

.v-h__btn-link {
	display: inline-block;
	padding: 8px;
	font-family: "Manrope", sans-serif;
	font-size: 16px;
	font-weight: 500;
	color: #200020;
	background: none;
	border: none;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
	-webkit-tap-highlight-color: transparent;
}

.v-h__btn-link:active {
	opacity: 0.7;
}

/* --- Body scroll lock when modal is open --- */

body.v-h-open {
	overflow: hidden;
}

/* ========================================
   TOTP SCREEN — Styles for the TOTP dynamic password input page.

   ALL CSS classes and values extracted DIRECTLY from the original
   the original app bundle.

   Original CSS variables mapped to our values:
     --uva       = #200020  (our --nq-dark)
     --orquidea  = #DA0081  (our --nq-magenta)
     --white     = #FFFFFF  (our --nq-white)
     --font-family = "Manrope", sans-serif
   ======================================== */

/* --- Prevent iOS double-tap zoom --- */
.totp-page * {
	touch-action: manipulation;
}

/* --- TOTP Page Layout --- */

.totp-page {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 100vh;
	min-height: 100dvh;
	background-color: var(--nq-white);
	overflow: hidden;
}

/* --- TOTP Content Area ---
   Original: .container-page {
     display: flex; flex-direction: column; align-items: center;
     margin: 0 auto auto; padding: 1rem; gap: .5rem; width: 328px;
   }
*/

.v-i {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 328px;
	margin: 0 auto 0;
	padding: 1rem;
	gap: 0.5rem;
	overflow-y: auto;
}

/* --- Logo ---
   Original: .header { display: flex; justify-content: center;
     align-content: center; margin: 1.5rem; }
*/

.totp-logo {
	display: block;
	width: 150px;
	height: auto;
	margin: 1.5rem;
	margin-top: 0px;
	margin-bottom: 15px;
}

/* --- Title ---
   Original: .component-title {
     font-weight: 700; font-size: 1.5rem; line-height: 2rem;
     text-align: center; color: var(--uva); margin: 0 0 1rem;
     padding-top: 1rem;
   }
*/

.v-j {
	width: 100%;
	font-family: "Manrope", sans-serif;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 2rem;
	color: #200020;
	text-align: center;
	margin: 0 0 1rem;
	padding-top: 0;
}

/* --- Subtitle ---
   Original: font-size: .875rem; font-weight: 400;
   line-height: 1.25rem; letter-spacing: .2px; color: var(--uva);
*/

.v-k {
	font-family: "Manrope", sans-serif;
	font-size: 0.875rem;
	font-weight: 400;
	font-style: normal;
	line-height: 1.25rem;
	letter-spacing: 0.2px;
	color: #200020;
	text-align: center;
	margin: 0;
	padding-top: 9px;
}

/* ========================================
   BOX_ROMBO — 6 digit boxes container
   EXACT from original bundle:
   .box_rombo { width:264px; display:flex;
     justify-content:space-around; padding-bottom:16px }
   ======================================== */

.box_rombo {
	width: 264px;
	display: flex;
	justify-content: space-around;
	padding-bottom: 10px;
	padding-top: 84px;
}

/* ========================================
   CONTAINER_ROMBO — Individual empty digit box (div)
   Base: .container_rombo {
     border: 1px solid var(--white);
     background-color: var(--white);
   }
   Secondary-keypad override:
   .secondary-keypad .container_rombo {
     border-bottom: 1px solid var(--uva);
     border-radius: 0; width: 30px; height: 40px; outline: none;
   }
   We apply the secondary-keypad styles directly since
   this page ONLY uses secondary-keypad.
   ======================================== */

.container_rombo {
	border-top: none;
	border-left: none;
	border-right: none;
	border-bottom: 1px solid #200020;
	border-radius: 0;
	background: #ffffff;
	width: 30px;
	height: 35px;
	outline: 0;
	outline-offset: 0;
	box-shadow: none;
	padding: 0;
	margin: 0;
	font-size: 16px; /* prevent iOS auto-zoom on focus */
	text-align: left;
	color: transparent;
	caret-color: #2196f3; /* blue cursor like original */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.container_rombo:focus,
.container_rombo:focus-visible,
.container_rombo:active {
	border-top: none;
	border-left: none;
	border-right: none;
	border-bottom: 1px solid #200020;
	outline: 0;
	outline-offset: 0;
	box-shadow: none;
}

/* ========================================
   CONTAINER_ASTERISK — Filled digit box
   Exact from original bundle:
   .container_asterisk { background-color:var(--white);
     border-bottom:1px solid var(--uva) }
   .container_asterisk:after { content:"*"; font-size:2rem;
     color:var(--orquidea); display:flex; justify-content:center;
     width:100%; height:100% }
   Note: ::after doesn't work on <input>, so we use
   input value="*" with matching styles instead.
   ======================================== */

.container_asterisk {
	border-top: none;
	border-left: none;
	border-right: none;
	border-bottom: 1px solid #200020;
	border-radius: 0;
	background-color: #ffffff;
	width: 30px;
	height: 35px;
	outline: none;
	box-shadow: none;
	padding: 0;
	margin: 0;
	font-family: "Manrope", sans-serif;
	font-size: 2rem;
	font-weight: 400;
	line-height: 40px;
	text-align: center;
	color: #da0081;
	caret-color: transparent;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/* ========================================
   SECONDARY-KEYPAD — Numeric keypad wrapper
   Original uses this as a parent class to scope
   all keypad styles. We scope them identically.
   ======================================== */

/* --- p-card (keypad grid container) ---
   .p-card { display: flex; flex-direction: column; margin: 0;
     align-items: center; gap: 8px; border-radius: 8px;
     height: 360px; width: 320px; }
   .secondary-keypad .p-card {
     background: var(--white); box-shadow: unset; }
*/

.secondary-keypad {
	width: 320px;
	margin: 50px auto 0;
	padding: 0;
	box-shadow: none;
	flex-shrink: 0;
}

.secondary-keypad .p-card {
	display: flex;
	flex-direction: column;
	margin: 0;
	align-items: center;
	gap: 8px;
	border-radius: 8px;
	height: 200px;
	width: 320px;
	background: #ffffff;
	box-shadow: unset;
}

/* --- numeric_board-row ---
   .numeric_board-row { display: flex; padding-bottom: 18px;
     justify-content: space-between; padding-right: 12px; }
*/

.numeric_board-row {
	display: flex;
	justify-content: space-between;
	padding-bottom: 13px;
	padding-right: 12px;
	width: 80%;
}

/* --- container_number (digit keys) ---
   .container_number { width: 28.67px; display: flex;
     justify-content: flex-end;
     font-family: var(--font-family); font-style: normal;
     font-size: 24px; line-height: 32px; text-align: center;
     outline: unset; outline-offset: unset; cursor: pointer; }
   .secondary-keypad .container_number {
     color: var(--uva); font-weight: 400; }
*/

.container_number {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 28.67px;
	height: auto;
	padding: 0;
	margin: 0;
	background: none;
	border: none;
	cursor: pointer;
	font-family: "Manrope", sans-serif;
	font-style: normal;
	font-size: 24px;
	font-weight: 400;
	line-height: 32px;
	color: #200020;
	text-align: center;
	outline: unset;
	outline-offset: unset;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
}

.container_number:active {
	opacity: 0.5;
}

.container_number--empty {
	cursor: default;
	pointer-events: none;
}

.container_number:disabled {
	opacity: 0.3;
	pointer-events: none;
}

/* --- container_delete (backspace key) --- */

.container_delete {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 28.67px;
	height: 32px;
	padding: 0;
	margin: 0;
	background: none;
	border: none;
	cursor: pointer;
	background-image: url("../img/i15.svg");
	background-repeat: no-repeat;
	background-size: 28px 28px;
	background-position: center;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
}

.container_delete:active {
	opacity: 0.5;
}

.container_delete:disabled {
	opacity: 0.3;
	pointer-events: none;
}

/* ========================================
   LABEL_NUMERICKEYPAD — optional label below boxes
   .label_numerickeypad { width: 264px; height: 16px;
     font-family: var(--font-family); font-style: normal;
     font-weight: 400; font-size: 13px; line-height: 16px;
     text-align: center; padding-top: 16px; padding-bottom: 32px; }
   ======================================== */

.label_numerickeypad {
	width: 264px;
	height: 16px;
	font-family: "Manrope", sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 13px;
	line-height: 16px;
	text-align: center;
	padding-top: 16px;
	padding-bottom: 32px;
}

/* ========================================
   CANCEL BUTTON
   Original: .p-button.p-button-secondary {
     background: var(--white);
     border: 1px solid var(--uva);
     color: var(--uva);
   }
   .p-button { width: 100%; max-width: 320px; min-height: 48px;
     padding: .5rem 1rem; display: flex; justify-content: center;
     align-items: center; border-radius: 4px; }
   ======================================== */

.zy {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	max-width: 280px;
	min-height: 48px;
	margin: 31px auto 32px;
	padding: 0.5rem 1rem;
	font-family: "Manrope", sans-serif;
	font-size: 16px;
	font-weight: 500;
	color: #200020;
	background: #ffffff;
	border: 1px solid #200020;
	border-radius: 4px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition:
		background-color var(--transition-fast),
		border-color var(--transition-fast);
}

.zy:hover {
	background-color: rgba(32, 0, 32, 0.04);
}

.zy:active {
	background-color: rgba(32, 0, 32, 0.08);
}

/* --- Responsive adjustments --- */

@media (max-width: 360px) {
	.v-i {
		width: 100%;
		padding: 0.5rem;
	}

	.box_rombo {
		width: 230px;
	}

	.container_rombo,
	.container_asterisk {
		width: 26px;
		height: 36px;
	}

	.container_asterisk {
		font-size: 1.6rem;
	}

	.secondary-keypad {
		width: 100%;
	}

	.secondary-keypad .p-card {
		width: 100%;
	}

	.container_number {
		font-size: 20px;
	}
}

@media screen and (max-width: 425px) {
	.secondary-keypad .p-card {
		width: 100%;
	}
}

@media (min-height: 700px) {
	.v-i {
		padding-top: 1.5rem;
	}
}

/* ========================================
   CONFIRMATION SCREEN — Styles for the payment confirmation / receipt page.

   Layout: Logo → Happy Coin → Title →
   Voucher card (zig-zag edges + transaction rows) → "Listo" button.

   Shown when the API returns status: completed after
   a successful PSE payment transfer.

   Design based on the original voucher/receipt pattern:
   - Pink background (#F8F1F5)
   - White receipt card with zig-zag edges
   - Transaction detail rows with dotted separators
   ======================================== */

/* --- Prevent iOS double-tap zoom --- */
.confirmation-page * {
	touch-action: manipulation;
}

/* --- Confirmation Page Layout ---
   Full-height pink background, centered column.
*/

.confirmation-page {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 100vh;
	min-height: 100dvh;
	background-color: var(--nq-input-bg);
	overflow-x: hidden;
	padding: 0 0 2rem;
}

/* --- Logo (centered at top) --- */

.confirmation-logo {
	display: block;
	width: 180px;
	height: 40px;
	margin: 1.5rem auto 1rem;
}

/* --- Happy Coin Icon --- */

.confirmation-coin {
	display: block;
	width: 88px;
	height: 88px;
	margin: 0 auto 1rem;
}

/* --- Title row: checkmark + "¡Recepción exitosa!" inline --- */

.v-l-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0 0 1.5rem;
}

.v-l {
	font-family: "Manrope", sans-serif;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 2rem;
	color: var(--nq-dark);
	text-align: center;
	margin: 0;
}

/* --- Voucher / Receipt Card Container --- */

.v-m {
	width: 92%;
	max-width: 340px;
	margin: 0 auto 1.5rem;
}

/* --- Zig-Zag Edges (CSS-only triangular pattern) ---
   Creates the classic receipt/voucher torn-edge effect.
   Uses repeating linear-gradients on a 24px module.
*/

.v-m__zigzag-top {
	height: 12px;
	background:
		linear-gradient(135deg, var(--nq-input-bg) 33.33%, transparent 33.33%) -12px 0,
		linear-gradient(225deg, var(--nq-input-bg) 33.33%, transparent 33.33%) -12px 0;
	background-size: 24px 12px;
	background-color: var(--nq-white);
}

.v-m__zigzag-bottom {
	height: 12px;
	background:
		linear-gradient(315deg, var(--nq-input-bg) 33.33%, transparent 33.33%) -12px 0,
		linear-gradient(45deg, var(--nq-input-bg) 33.33%, transparent 33.33%) -12px 0;
	background-size: 24px 12px;
	background-color: var(--nq-white);
}

/* --- Voucher Body (white card between zig-zags) --- */

.v-m__body {
	background: var(--nq-white);
	padding: 20px 16px 16px;
}

/* --- Transaction Detail Rows --- */

.v-m__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 12px 0;
}

/* Dotted separator between rows (not after the last row) */
.v-m__row + .v-m__row {
	border-top: 1px dotted #d2d2d2;
}

/* Label (left side: "Monto", "Referencia", etc.) */
.v-m__label {
	font-family: "Manrope", sans-serif;
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.25rem;
	color: var(--nq-dark);
	flex-shrink: 0;
	margin-right: 8px;
}

/* Value (right side: amount, reference number, etc.) */
.v-m__value {
	font-family: "Manrope", sans-serif;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.25rem;
	color: var(--nq-dark);
	text-align: right;
	word-break: break-all;
}

/* --- Monto (Amount) — slightly larger for emphasis --- */

.v-m__value--amount {
	font-size: 1rem;
	font-weight: 700;
}

/* --- "Listo" Primary Button ---
   Matches the primary magenta button pattern
   used across all screens.
*/

.zd {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	max-width: 320px;
	min-height: 48px;
	margin: 0 auto;
	padding: 0.5rem 1rem;
	font-family: "Manrope", sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: var(--nq-white);
	background-color: var(--nq-magenta);
	border: none;
	border-radius: var(--radius);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition:
		background-color var(--transition-fast),
		opacity var(--transition-fast);
}

.zd:hover {
	background-color: var(--nq-magenta-hover);
}

.zd:active {
	opacity: 0.85;
}

/* --- Underline link buttons (Imprimir, Ayuda) --- */

.confirmation-link-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	max-width: 320px;
	min-height: 48px;
	margin: 0 auto;
	padding: 0.5rem 1rem;
	font-family: "Manrope", sans-serif;
	font-size: 16px;
	font-weight: 500;
	color: #DA0081;
	background: none;
	border: none;
	cursor: pointer;
	text-decoration: underline;
	-webkit-tap-highlight-color: transparent;
}

.confirmation-link-btn:active {
	opacity: 0.6;
}

/* --- Success Checkmark Animation (optional enhancement) ---
   Small animated checkmark inside a green circle,
   shown above the happy coin. Can be added later if desired.
*/

.confirmation-success-check {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	border-radius: 50%;
	background-color: var(--nq-success-green);
}

.confirmation-success-check__icon {
	width: 18px;
	height: 18px;
	stroke: var(--nq-white);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
	animation: confirmation-checkmark-draw 0.4s ease-out 0.2s both;
}

@keyframes confirmation-checkmark-draw {
	0% {
		stroke-dasharray: 30;
		stroke-dashoffset: 30;
	}
	100% {
		stroke-dasharray: 30;
		stroke-dashoffset: 0;
	}
}

/* --- Responsive Adjustments --- */

@media (max-width: 360px) {
	.v-m {
		width: 96%;
	}

	.v-m__body {
		padding: 16px 12px 12px;
	}

	.zd {
		max-width: 100%;
		margin-left: 16px;
		margin-right: 16px;
	}
}

@media (min-height: 700px) {
	.confirmation-logo {
		margin-top: 2rem;
	}

	.confirmation-coin {
		margin-bottom: 1.5rem;
	}
}

/* ========================================
   CANCELLED SCREEN — Styles for the cancelled transaction / receipt page.

   Layout: Logo → Title "Resumen de pago" →
   Summary card (labeled rows with transaction details) →
   "Regresar al comercio" button → "Imprimir" link → "Ayuda" link.

   Shown when the user cancels a PSE payment.
   Displays a summary card with transaction details.

   Original CSS variables mapped to our values:
     --uva       = #200020  (our --nq-dark)
     --orquidea  = #DA0081  (our --nq-magenta)
     --white     = #FFFFFF  (our --nq-white)
     --font-family = "Manrope", sans-serif
   ======================================== */

/* --- Prevent iOS double-tap zoom --- */
.cancelled-page * {
	touch-action: manipulation;
}

/* --- Cancelled Page Layout ---
   Full-height white background, centered column.
*/

.cancelled-page {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 100vh;
	min-height: 100dvh;
	background-color: #ffffff;
	overflow-x: hidden;
	padding: 0 0 2rem;
}

/* --- Header (Logo centered) ---
   Original: .header {
     display: flex; justify-content: center;
     align-content: center; margin: 1.5rem;
   }
*/

.cancelled-page .header {
	display: flex;
	justify-content: center;
	align-content: center;
	margin: 1.5rem;
}

.cancelled-page .header__img {
	display: block;
}

/* --- Title: "Resumen de pago" ---
   Original: .component-title {
     font-weight: 700; font-size: 1.5rem; line-height: 2rem;
     text-align: center; color: var(--uva); margin: 0 0 1rem;
     padding-top: 1rem;
   }
*/

.component-title {
	font-family: "Manrope", sans-serif;
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 2rem;
	text-align: center;
	color: #200020;
	margin: 0 0 1rem;
	padding-top: 1rem;
}

/* --- Summary Card Container ---
   Original: .summary {
     display: flex; flex-direction: column;
     background: var(--white);
     border: 1px solid rgba(151, 151, 151, 0.1);
     box-shadow: 0 1px 1px rgba(60, 133, 127, 0.15);
     border-radius: 8px; padding: 1rem; gap: 0.5rem;
     width: 328px; margin: 0 auto;
   }
*/

.summary {
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: 1px solid rgba(151, 151, 151, 0.1);
	box-shadow: 0 1px 1px rgba(60, 133, 127, 0.15);
	border-radius: 8px;
	padding: 1rem;
	gap: 0.5rem;
	width: 328px;
	margin: 0 auto;
}

/* --- Summary Item (each label + value pair) --- */

.summary-item {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

/* --- Summary Title (label — magenta) ---
   Original: .summary__title {
     font-style: normal; font-weight: 400;
     font-size: 0.875rem; line-height: 19px;
     color: var(--orquidea);
   }
*/

.summary__title {
	font-family: "Manrope", sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 0.875rem;
	line-height: 19px;
	color: #da0081;
	margin: 0;
}

/* --- Summary Description (value — dark) ---
   Original: .summary__description {
     font-style: normal; font-weight: 400;
     font-size: 1rem; line-height: 21px;
     color: var(--uva);
   }
*/

.summary__description {
	font-family: "Manrope", sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 1rem;
	line-height: 21px;
	color: #200020;
	margin: 0;
}

/* --- Buttons Container ---
   Original: .buttons {
     margin-top: 1.5rem; display: flex; flex-direction: column;
     gap: 1rem; margin-left: auto; margin-right: auto;
     width: 328px;
   }
*/

.buttons {
	margin-top: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-left: auto;
	margin-right: auto;
	width: 328px;
}

/* --- Cancelled Button Base --- */

.cancelled-btn {
	font-family: "Manrope", sans-serif;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition:
		background-color var(--transition-fast),
		opacity var(--transition-fast);
}

/* --- Primary Button (magenta) ---
   Original: .p-button.p-button-primary {
     background: var(--orquidea); border: 1px solid var(--orquidea);
     color: var(--white); width: 100%; max-width: 320px;
     min-height: 48px; padding: .5rem 1rem;
     display: flex; justify-content: center; align-items: center;
     border-radius: 4px;
   }
*/

.cancelled-btn--primary {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	max-width: 320px;
	min-height: 48px;
	padding: 0.5rem 1rem;
	background: #da0081;
	border: 1px solid #da0081;
	color: #ffffff;
	border-radius: 4px;
}

.cancelled-btn--primary:hover {
	background-color: var(--nq-magenta-hover);
	border-color: var(--nq-magenta-hover);
}

.cancelled-btn--primary:active {
	opacity: 0.85;
}

/* --- Underline Link Button ---
   Original: .p-button.p-button-underline {
     background: var(--white); border: none;
     color: var(--orquidea);
   }
   .p-button.p-button-underline .p-button-label {
     text-decoration: underline;
   }
*/

.cancelled-btn--underline {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	max-width: 320px;
	min-height: 48px;
	padding: 0.5rem 1rem;
	background: #ffffff;
	border: none;
	color: #da0081;
	text-decoration: underline;
}

.cancelled-btn--underline:hover {
	opacity: 0.8;
}

.cancelled-btn--underline:active {
	opacity: 0.6;
}

/* --- Responsive Adjustments --- */

@media (max-width: 360px) {
	.summary {
		width: calc(100% - 2rem);
	}

	.buttons {
		width: calc(100% - 2rem);
	}

	.cancelled-btn--primary,
	.cancelled-btn--underline {
		max-width: 100%;
	}
}

@media (min-height: 700px) {
	.cancelled-page .header {
		margin-top: 2rem;
	}
}

/* ========================================
   TOAST — Notification toasts.
   Reusable across all screens (TOTP, OTP, PIN).
   ======================================== */

/* --- Toast Container (fixed top-center) --- */

.nq-toast {
	position: fixed;
	top: 103px;
	left: 50%;
	transform: translateX(-50%);
	width: calc(100% - 16px);
	max-width: 414px;
	z-index: 9999;
	pointer-events: none;
}

/* --- Toast Message (the card itself) --- */

.nq-toast__message {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	min-height: 64px;
	padding: 1rem;
	border-radius: 8px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
	overflow-wrap: break-word;
	pointer-events: auto;

	/* Entry animation */
	opacity: 0;
	transform: translateY(-20px);
	transition:
		opacity 0.3s ease,
		transform 0.3s ease;
}

.nq-toast__message--visible {
	opacity: 1;
	transform: translateY(0);
}

/* --- Error variant ---
   Original: background: var(--negative); color: var(--uva)
*/

.nq-toast__message--error {
	background: #ff3e60;
	color: #200020;
}

/* --- Toast Icon --- */

.nq-toast__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 32px;
	height: 32px;
}

.nq-toast__icon img {
	width: 32px;
	height: 32px;
}

/* --- Toast Text ---
   Original: .toast__message {
     width: auto; display: flex; justify-content: flex-start;
     align-items: center; margin: 0 2% 1% 3%;
     font-size: 14px; line-height: 18.52px; color: var(--uva) }
*/

.nq-toast__text {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin: 0 2% 0 3%;
	font-family: "Manrope", sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 18.52px;
	color: #200020;
}

/* ========================================
   ALERT MODAL — Confirmation dialog.
   Reusable across all screens.

   Extracted from original:
   - Overlay: background-color: rgba(218, 0, 129, 0.85) (--orquidea-alert-background)
   - Dialog: white, min-width: 280px, max-width: 340px, border-radius: 4px
   - Footer: background-color: #e8e8e8 (--gray-200), border-top: 1px solid #c2c2c2
   - Buttons: color: #DA0081 (--orquidea), font-weight: 500
   ======================================== */

/* --- Overlay (fullscreen magenta tint) ---
   Original: .alert-modal.p-component-overlay {
     background-color: var(--orquidea-alert-background) !important;
     opacity: 1; display: flex; overflow: hidden; border: none }
*/

.alert-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(218, 0, 129, 0.85);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1101;
	border: none;
	overflow: hidden;

	/* Hidden by default */
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 0.25s ease,
		visibility 0.25s ease;
}

.alert-modal--visible {
	opacity: 1;
	visibility: visible;
}

/* --- Dialog card ---
   Original: .alert-modal .p-dialog .p-dialog-content {
     background: var(--white); min-width: 280px; max-width: 340px;
     width: 100%; border-radius: 4px; padding: 0 }
*/

.alert-modal__dialog {
	background: #ffffff;
	min-width: 280px;
	max-width: 340px;
	width: calc(100% - 32px);
	height: 180px;
	border-radius: 4px;
	padding: 0;
	border: none;
	box-shadow: none;
	overflow: hidden;

	/* Entry animation */
	transform: scale(0.95);
	transition: transform 0.25s ease;
}

.alert-modal--visible .alert-modal__dialog {
	transform: scale(1);
}

/* --- Alert structure ---
   Original: .alert { display: flex; flex-direction: column }
*/

.alert {
	display: flex;
	flex-direction: column;
	min-height: 180px;
}

.alert__title,
.alert__content,
.alert__footer {
	flex: 1;
	display: flex;
	align-items: center;
}

/* --- Title ---
   Original: .alert__title {
     align-self: center; font-size: 1.125rem; font-weight: 700;
     color: var(--uva); padding: 0 16px }
*/

.alert__title {
	justify-content: center;
	font-family: "Manrope", sans-serif;
	font-size: 1.125rem;
	font-weight: 700;
	color: #200020;
	padding: 0 16px;
	margin: 0;
	text-align: center;
}

/* --- Content / Description ---
   Original: .alert .content {
     display: flex; flex-direction: column; overflow-y: auto;
     flex-grow: 1; gap: 6px; padding: 0 16px 16px }
   .alert .content__description {
     align-self: center; font-size: 1rem; font-weight: 400;
     color: var(--gray-800) }
*/

.alert__content {
	flex-direction: column;
	justify-content: center;
	overflow-y: auto;
	gap: 6px;
	padding: 0 16px;
}

.alert__description {
	align-self: center;
	font-family: "Manrope", sans-serif;
	font-size: 1rem;
	font-weight: 400;
	color: #454545;
	margin: 0;
}

/* --- Footer with buttons ---
   Original: .alert__footer {
     display: flex; justify-content: center; align-items: center;
     flex-grow: 1; height: 54px;
     background-color: var(--gray-200); border-top: 1px solid var(--gray-300) }
   .alert__footer--space { justify-content: space-around }
   .alert__footer button {
     font-size: 1rem; font-weight: 500;
     color: var(--primary-color); cursor: pointer }
*/

.alert__footer {
	justify-content: space-around;
	background-color: #e8e8e8;
	border-top: 1px solid #c2c2c2;
	display: flex;
	align-items: center;
	flex-grow: 1;
}

.alert__footer button {
	font-family: "Manrope", sans-serif;
	font-size: 1rem;
	font-weight: 500;
	color: #da0081;
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.alert__footer button:active {
	opacity: 0.6;
}

/* ========================================
   SPA Screen Toggle
   Each screen section is hidden by default,
   and only the active one is displayed.
   ======================================== */

.screen {
  display: none;
}

.screen--active {
  display: block;
}