:root {
  color-scheme: dark;
  --page: #0b0f0d;
  --card: #101714;
  --surface: #141c19;
  --surface-raised: #19231f;
  --text: #eef2ef;
  --muted: #a3afa8;
  --faint: #7d8983;
  --hairline: #ffffff14;
  --border-strong: #5f7268;
  --tenant-accent: #28725b;
  --tenant-accent-ink: #f7faf8;
  --danger: #ff8f86;
  --focus: color-mix(in srgb, var(--tenant-accent) 68%, #eef7f2);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  font-family: 'Public Sans', system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; margin: 0; background: var(--page); }
body { color: var(--text); font-size: 16px; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
[hidden] { display: none !important; }

/* Fondo de atmósfera, sin contenido: luz del acento de la inmobiliaria sobre una base oscura,
   el fragmento de un plano en línea fina y un grano apenas perceptible. Todo en CSS y SVG
   embebido: el edificio no sirve otros archivos de esta pantalla. */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 58% 52% at 50% -6%, color-mix(in srgb, var(--tenant-accent) 34%, transparent), transparent 72%),
    radial-gradient(ellipse 42% 48% at 6% 104%, color-mix(in srgb, var(--tenant-accent) 20%, transparent), transparent 70%),
    radial-gradient(ellipse 36% 40% at 100% 62%, color-mix(in srgb, var(--tenant-accent) 12%, transparent), transparent 70%),
    linear-gradient(180deg, #0d1311, #080b0a);
  animation: settle 1.6s var(--ease-out) both;
}
/* El plano: líneas de 1 px, visibles alrededor de la tarjeta y disueltas hacia los bordes. */
.backdrop::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' fill='none' stroke='%23fff' stroke-width='1.5'%3E %3Cg stroke-width='3'%3E %3Cpath d='M200 150H300M500 150H760M960 150H1400V330M1400 480V850H1120M920 850H200V620M200 400V150'/%3E %3Cpath d='M620 150V520M620 600V850M200 520H480M560 520H620M1020 150V430H1080M1160 430H1400M1020 600V850'/%3E %3C/g%3E %3Crect x='300' y='144' width='200' height='12'/%3E%3Crect x='760' y='144' width='200' height='12'/%3E %3Crect x='1394' y='330' width='12' height='150'/%3E%3Crect x='920' y='844' width='200' height='12'/%3E%3Crect x='194' y='400' width='12' height='220'/%3E %3Cpath d='M620 520H700A80 80 0 0 1 620 600M480 520V440A80 80 0 0 1 560 520M1160 430V510A80 80 0 0 1 1080 430'/%3E %3Cg stroke-width='1'%3E %3Cpath d='M200 100H1400M200 90V110M620 90V110M1020 90V110M1400 90V110'/%3E %3Cpath d='M150 150V850M140 150H160M140 520H160M140 850H160'/%3E %3Cpath d='M1020 600H1400'/%3E %3Ccircle cx='820' cy='700' r='70'/%3E%3Crect x='300' y='220' width='220' height='140' rx='6'/%3E %3C/g%3E %3C/svg%3E") calc(50% + 12vw) calc(50% - 70px) / min(1640px, 150vw) auto no-repeat;
  opacity: .085;
  -webkit-mask-image: radial-gradient(ellipse 62% 62% at 50% 46%, #000 30%, transparent 78%);
  mask-image: radial-gradient(ellipse 62% 62% at 50% 46%, #000 30%, transparent 78%);
}
.backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E") 0 0 / 180px 180px;
  opacity: .06;
  mix-blend-mode: overlay;
}

.auth-shell {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: max(40px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
}

.auth-panel {
  position: relative;
  width: min(100%, 420px);
  margin: auto;
  padding: 44px 40px 30px;
  border: 1px solid transparent;
  border-radius: 16px;
  background: var(--card);
  box-shadow:
    inset 0 1px 0 #ffffff0f,
    0 0 0 1px #00000099,
    0 2px 4px #0000004d,
    0 30px 70px -14px #000000cc,
    0 0 70px -6px color-mix(in srgb, var(--tenant-accent) 28%, transparent);
  animation: arrive .7s .1s var(--ease-out) both;
}
/* Borde de luz: el acento arriba, que se apaga hacia los lados y queda en un filo neutro abajo.
   Es un degradado recortado a 1 px con máscara, así acompaña el radio de la tarjeta. */
.auth-panel::before {
  content: '';
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--tenant-accent) 55%, #ffffff) 0%,
    color-mix(in srgb, var(--tenant-accent) 45%, transparent) 22%,
    #ffffff17 55%,
    #ffffff0d 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
/* Reflejo del borde superior hacia adentro, muy tenue. */
.auth-panel::after {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 120px;
  border-radius: 16px 16px 0 0;
  background: radial-gradient(ellipse 60% 100% at 50% 0%, color-mix(in srgb, var(--tenant-accent) 10%, transparent), transparent);
  pointer-events: none;
}

.tenant-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-bottom: 28px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--hairline);
}
/* La tarjeta la encabeza siempre el ícono de GestionaYA!, y el nombre de la inmobiliaria va debajo.
   La pantalla de acceso no muestra el logo del tenant —decisión del 2026-09-25—: con la placa del
   logo, un archivo cuadrado o de proporción inesperada desbordaba encima del rótulo y del nombre,
   y la tarjeta quedaba a merced de lo que subiera cada inmobiliaria. */
.product-badge { width: 46px; height: 40px; margin-bottom: 18px; }
/* Sin inmobiliaria conocida, el rótulo sobra: el nombre es el del producto. */
.tenant-identity.is-fallback .eyebrow { display: none; }
.eyebrow { margin: 0 0 8px; color: var(--faint); font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.tenant-name { margin: 0; font-size: 23px; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; overflow-wrap: anywhere; }

.field-group + .field-group { margin-top: 20px; }

.page-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
  color: var(--faint);
  font-size: 12px;
}
.product-lockup { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: -.01em; }
/* Las tres barras del ícono de GestionaYA!, en vector: el PNG trae mucho margen y a este tamaño se perdía. */
.product-mark { width: 17px; height: 15px; flex: none; transform: translateY(-1px); }
.footer-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; }

.submit-arrow { width: 20px; height: 20px; margin-left: auto; transition: transform 220ms var(--ease-out); }
.submit-button:hover:not(:disabled) .submit-arrow { transform: translateX(3px); }
.submit-button .submit-label { margin-right: auto; }
.submit-button.is-loading .submit-arrow { display: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.noscript { position: fixed; bottom: 16px; left: 16px; right: 16px; z-index: 2; padding: 16px; background: #301c19; color: #ffd1cb; border: 1px solid #704640; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes settle { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 520px) {
  .auth-shell { padding-inline: 12px; padding-top: max(20px, env(safe-area-inset-top)); }
  .auth-panel { padding: 32px 22px 24px; border-radius: 14px; }
  .tenant-identity { padding-bottom: 22px; margin-bottom: 22px; }
  .tenant-name { font-size: 21px; }
  .page-footer { margin-top: 24px; }
}

form {
  width: 100%;
}

.field-group {
  position: relative;
}

label {
  display: block;
  margin-bottom: .6rem;
  color: var(--text);
  font-size: .875rem;
  font-weight: 650;
  line-height: 1.25;
}

.password-control {
  position: relative;
  border-radius: .45rem;
}

#key,
#username {
  width: 100%;
  height: 3.625rem;
  padding: 0 3.6rem 0 1rem;
  border: 1px solid var(--border-strong);
  border-radius: .45rem;
  outline: none;
  background: var(--surface);
  color: var(--text);
  caret-color: var(--tenant-accent);

  -webkit-appearance: none;
  appearance: none;
  transition:
    border-color 180ms var(--ease-out),
    background-color 180ms var(--ease-out),
    box-shadow 180ms var(--ease-out);
}

#username {
  padding-right: 1rem;
}

#key:-webkit-autofill,
#key:-webkit-autofill:hover,
#key:-webkit-autofill:focus,
#username:-webkit-autofill,
#username:-webkit-autofill:hover,
#username:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset;
  caret-color: var(--text);
  transition: background-color 9999s ease-in-out 0s;
}

#key::-webkit-credentials-auto-fill-button {
  margin-right: 2.7rem;
}

#key:hover:not(:disabled),
#username:hover:not(:disabled) {
  border-color: #7f9288;
  background: var(--surface-raised);
}

#key:focus-visible,
#username:focus-visible {
  border-color: var(--focus);
  background: var(--surface-raised);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 28%, transparent);
}

#key[aria-invalid='true'],
#username[aria-invalid='true'] {
  border-color: var(--danger);
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: .6rem;
  display: grid;
  place-items: center;
  width: 2.65rem;
  height: 2.65rem;
  padding: 0;
  border: 0;
  border-radius: .35rem;
  outline: none;
  background: transparent;
  color: var(--muted);
  -webkit-appearance: none;
  appearance: none;
  transform: translateY(-50%);
  transition:
    color 160ms var(--ease-out),
    background-color 160ms var(--ease-out);
}

.password-toggle:hover:not(:disabled) {
  background: rgba(255, 255, 255, .055);
  color: var(--text);
}

.password-toggle:focus-visible,
.submit-button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--focus) 64%, transparent);
  outline-offset: 3px;
}

.password-toggle svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.icon-eye-off {
  display: none;
}

.password-toggle[aria-pressed='true'] .icon-eye {
  display: none;
}

.password-toggle[aria-pressed='true'] .icon-eye-off {
  display: block;
}

.field-error,
.form-status {
  color: var(--danger);
  font-size: .78rem;
  line-height: 1.45;
}

.field-error {
  margin: .55rem 0 0;
}

.form-status {
  min-height: 1.15rem;
  margin: .85rem 0 0;
  text-align: center;
}

.form-status:empty {
  visibility: hidden;
}

.form-status[data-state='success'] {
  color: #82c9a9;
}

.submit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3.625rem;
  margin-top: 1.75rem;
  padding: .9rem 1.25rem;
  border: 1px solid var(--tenant-accent);
  border-radius: .45rem;
  outline: none;
  background: var(--tenant-accent);
  color: var(--tenant-accent-ink);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .015em;
  line-height: 1;
  -webkit-appearance: none;
  appearance: none;
  transition:
    background-color 180ms var(--ease-out),
    border-color 180ms var(--ease-out),
    color 180ms var(--ease-out);
}

.submit-button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--tenant-accent) 86%, #c8d8d0);
  background: color-mix(in srgb, var(--tenant-accent) 86%, #c8d8d0);
}

.submit-button:active:not(:disabled) {
  border-color: color-mix(in srgb, var(--tenant-accent) 88%, #06110d);
  background: color-mix(in srgb, var(--tenant-accent) 88%, #06110d);
}

button:disabled,
input:disabled {
  cursor: not-allowed;
  opacity: .56;
}

.submit-loader {
  display: none;
  width: 1rem;
  height: 1rem;
  border: 2px solid color-mix(in srgb, var(--tenant-accent-ink) 36%, transparent);
  border-top-color: var(--tenant-accent-ink);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

.submit-button.is-loading {
  gap: .65rem;
}

.submit-button.is-loading .submit-loader {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}