/* Superficie de acceso Kudzu 1.7.291.
   Tenant y Superadmin comparten sólo este contrato visual; login.js conserva
   modos, endpoints y controles de seguridad separados. La geometría responde
   al espacio disponible, no a resoluciones. */
html[data-kudzu-auth-surface="true"] body.tenant-login-page {
  --tenant-access-accent: #2563eb;
  --tenant-access-accent-2: #0ea5e9;
  --tenant-access-indigo: #2e3192;
  --tenant-access-cyan: #00aeef;
  --tenant-access-rose: #e32158;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow-x: hidden;
  color: #15233a;
  background:
    linear-gradient(132deg, rgba(46, 49, 146, .085) 0%, transparent 35%),
    linear-gradient(225deg, rgba(0, 174, 239, .095) 0%, transparent 38%),
    linear-gradient(22deg, rgba(227, 33, 88, .025) 0%, transparent 24%),
    linear-gradient(180deg, #dff4ff 0%, #f1f7ff 50%, #fbfdff 100%) !important;
}

html[data-kudzu-auth-surface="true"] body.tenant-login-page::before,
html[data-kudzu-auth-surface="true"] body.tenant-login-page::after {
  content: none !important;
}

html[data-kudzu-auth-surface="true"] body.tenant-login-page .bg-layer {
  display: block !important;
  z-index: 0 !important;
  opacity: .62 !important;
  background:
    linear-gradient(118deg, transparent 9%, rgba(255, 255, 255, .32) 42%, transparent 72%),
    linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(46, 49, 146, .025)) !important;
  mask-image: none !important;
}

html[data-kudzu-auth-surface="true"] body.tenant-login-page[data-theme="dark"] {
  color: #edf5ff;
  background:
    linear-gradient(132deg, rgba(78, 84, 206, .2) 0%, transparent 36%),
    linear-gradient(225deg, rgba(0, 174, 239, .15) 0%, transparent 38%),
    linear-gradient(22deg, rgba(227, 33, 88, .045) 0%, transparent 24%),
    linear-gradient(180deg, #10243b 0%, #101d34 52%, #081424 100%) !important;
}

html[data-kudzu-auth-surface="true"] body.tenant-login-page[data-theme="dark"] .bg-layer {
  opacity: .24 !important;
}

.tenant-access-topbar {
  position: relative;
  z-index: 2;
  width: min(100%, 96rem);
  margin: 0 auto;
  padding: clamp(.9rem, 2.2vw, 1.45rem) clamp(1rem, 3.4vw, 3.2rem);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .62rem;
}

.tenant-access-brand {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: .56rem;
}

.tenant-access-brand-mark {
  width: 2.1rem;
  height: 2.1rem;
  flex: 0 0 2.1rem;
  display: grid;
  place-items: center;
  overflow: visible;
  border: 0;
  border-radius: .46rem;
  color: #fff;
  background: linear-gradient(145deg, var(--tenant-access-indigo), #176de0);
  box-shadow: 0 .42rem 1rem rgba(31, 73, 125, .16);
}

.tenant-access-brand-logo {
  width: 100%;
  height: 100%;
  display: block;
  padding: 0;
  object-fit: contain;
  border-radius: .38rem;
  background: transparent;
  box-shadow:
    0 .42rem 1rem rgba(31, 73, 125, .18),
    0 0 0 1px rgba(255, 255, 255, .28);
}

.tenant-access-brand-logo.hidden,
.tenant-access-brand-fallback.hidden {
  display: none !important;
}

.tenant-access-brand-fallback {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .02em;
}

.tenant-access-brand-name {
  max-width: min(24rem, 62vw);
  margin: 0;
  overflow: hidden;
  color: currentColor;
  font-size: .93rem;
  font-weight: 780;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tenant-access-theme {
  position: relative;
  isolation: isolate;
  width: 2.15rem;
  height: 2.15rem;
  flex: 0 0 2.15rem;
  display: grid;
  place-items: center;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(55, 99, 159, .22);
  border-radius: 999px;
  color: #234875;
  background: linear-gradient(145deg, rgba(255, 255, 255, .82), rgba(226, 241, 255, .66));
  box-shadow:
    0 .45rem 1rem rgba(48, 86, 137, .12),
    inset 0 1px 0 rgba(255, 255, 255, .8);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.tenant-access-theme:hover {
  border-color: rgba(37, 99, 235, .46);
  background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(218, 238, 255, .86));
  box-shadow: 0 .58rem 1.18rem rgba(42, 91, 153, .16), inset 0 1px 0 #fff;
  transform: translateY(-1px);
}

.tenant-access-theme:focus-visible {
  outline: 3px solid rgba(37, 99, 235, .2);
  outline-offset: 2px;
}

.tenant-access-theme-icon {
  font-size: 1rem;
  line-height: 1;
  transition: transform 180ms ease;
}

.tenant-access-theme:hover .tenant-access-theme-icon {
  transform: rotate(10deg) scale(1.04);
}

body[data-theme="dark"] .tenant-access-theme {
  color: #d9ecff;
  border-color: rgba(132, 181, 229, .22);
  background: linear-gradient(145deg, rgba(35, 61, 91, .92), rgba(16, 36, 60, .86));
  box-shadow: 0 .48rem 1rem rgba(1, 8, 20, .28), inset 0 1px 0 rgba(255, 255, 255, .08);
}

body[data-theme="dark"] .tenant-access-theme:hover {
  border-color: rgba(80, 176, 244, .52);
  background: linear-gradient(145deg, rgba(43, 73, 106, .96), rgba(19, 43, 70, .94));
}

.tenant-access-shell {
  position: relative;
  z-index: 1;
  width: min(100%, 96rem);
  min-height: 0;
  margin: 0 auto;
  padding: clamp(1rem, 5dvh, 4rem) 1rem clamp(2rem, 9dvh, 6rem);
  display: grid;
  place-items: center;
}

html[data-kudzu-auth-surface="true"] body .tenant-access-panel {
  container: tenant-access / inline-size;
  isolation: isolate;
  width: min(23rem, 100%);
  display: grid;
  gap: .84rem;
  padding: 1.5rem 1.65rem 1.15rem !important;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .72) !important;
  border-radius: 1.55rem !important;
  color: #15233a;
  background: linear-gradient(160deg, rgba(255, 255, 255, .74), rgba(247, 252, 255, .62)) !important;
  box-shadow:
    0 1.6rem 4rem rgba(35, 81, 125, .18),
    inset 0 1px 0 rgba(255, 255, 255, .92) !important;
  backdrop-filter: blur(18px) saturate(1.08);
  animation: tenant-access-enter 360ms cubic-bezier(.2, .8, .2, 1) both;
}

html[data-kudzu-auth-surface="true"] body[data-theme="dark"] .tenant-access-panel {
  color: #edf5ff;
  border-color: rgba(160, 202, 244, .2) !important;
  background: linear-gradient(155deg, rgba(18, 36, 59, .9), rgba(11, 25, 44, .82)) !important;
  box-shadow: 0 1.7rem 4.2rem rgba(2, 9, 22, .42), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

.tenant-access-intro {
  display: grid;
  justify-items: center;
  gap: .38rem;
  text-align: center;
}

.tenant-access-symbol {
  width: 3rem;
  height: 3rem;
  margin-bottom: .42rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .86);
  border-radius: 1rem;
  color: #1d2a3f;
  background: linear-gradient(155deg, rgba(255, 255, 255, .94), rgba(227, 242, 250, .82));
  box-shadow: 0 .75rem 1.5rem rgba(50, 94, 129, .18), inset 0 1px 0 #fff;
}

body[data-theme="dark"] .tenant-access-symbol {
  color: #edf5ff;
  border-color: rgba(157, 205, 246, .2);
  background: linear-gradient(155deg, rgba(39, 64, 91, .96), rgba(17, 38, 62, .96));
  box-shadow: 0 .75rem 1.5rem rgba(2, 9, 22, .32), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.tenant-access-symbol svg {
  width: 1.35rem;
  height: 1.35rem;
}

.tenant-access-intro h1 {
  margin: 0;
  color: currentColor;
  font-size: 1.36rem;
  font-weight: 790;
  letter-spacing: -.03em;
}

.tenant-access-intro .subhead {
  max-width: 18rem;
  margin: 0;
  color: color-mix(in srgb, currentColor 64%, transparent);
  font-size: .82rem;
  line-height: 1.42;
}

.tenant-access-content,
.tenant-access-form,
.tenant-access-fields {
  display: grid;
  gap: .52rem;
  min-width: 0;
}

.tenant-access-field {
  position: relative;
  display: grid;
  min-width: 0;
}

.tenant-access-field-icon {
  position: absolute;
  left: .72rem;
  top: 50%;
  z-index: 2;
  width: 1rem;
  height: 1rem;
  translate: 0 -50%;
  color: rgba(51, 68, 91, .58);
  pointer-events: none;
}

.tenant-access-field-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.tenant-access-field > input,
.tenant-access-password > input {
  width: 100%;
  min-height: 2.55rem !important;
  padding: .62rem 2.65rem .62rem 2.25rem !important;
  border: 1px solid transparent !important;
  border-radius: .68rem !important;
  color: #1c293d !important;
  background: rgba(235, 241, 245, .82) !important;
  box-shadow: inset 0 1px 2px rgba(26, 58, 85, .045) !important;
  font-size: .84rem !important;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease !important;
}

body[data-theme="dark"] .tenant-access-field-icon {
  color: rgba(214, 229, 245, .62);
}

body[data-theme="dark"] .tenant-access-field > input,
body[data-theme="dark"] .tenant-access-password > input {
  color: #edf5ff !important;
  background: rgba(7, 19, 34, .7) !important;
}

.tenant-access-field:focus-within > input,
.tenant-access-field:focus-within .tenant-access-password > input {
  border-color: rgba(37, 99, 235, .56) !important;
  background: rgba(255, 255, 255, .84) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12) !important;
  outline: none !important;
}

body[data-theme="dark"] .tenant-access-field:focus-within > input,
body[data-theme="dark"] .tenant-access-field:focus-within .tenant-access-password > input {
  background: rgba(7, 19, 34, .92) !important;
}

.tenant-access-password {
  display: block;
  min-width: 0;
}

.tenant-access-password .password-peek-btn {
  right: .3rem !important;
  width: 2rem !important;
  height: 2rem !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.tenant-access-password-help {
  display: flex;
  justify-content: flex-end;
  margin-top: -.16rem;
}

.tenant-access-text-action {
  min-height: 1.65rem;
  padding: .15rem .1rem;
  border: 0;
  border-radius: .35rem;
  color: color-mix(in srgb, currentColor 72%, transparent);
  background: transparent;
  font: inherit;
  font-size: .72rem;
  font-weight: 620;
  cursor: pointer;
}

.tenant-access-text-action:hover,
.tenant-access-text-action:focus-visible {
  color: var(--tenant-access-accent);
  text-decoration: underline;
  text-underline-offset: .18rem;
  outline: none;
}

.tenant-access-actions {
  display: grid;
  margin-top: .18rem;
}

.tenant-access-actions .btn.primary,
.tenant-access-google .auth-google-btn {
  width: 100% !important;
  min-height: 2.6rem !important;
  justify-content: center !important;
  border-radius: .68rem !important;
  font-size: .82rem !important;
  font-weight: 720 !important;
}

.tenant-access-actions .btn.primary {
  border-color: rgba(18, 28, 48, .9) !important;
  color: #fff !important;
  background: linear-gradient(180deg, #242938, #11141c) !important;
  box-shadow: 0 .65rem 1.25rem rgba(16, 24, 40, .17), inset 0 1px 0 rgba(255, 255, 255, .16) !important;
}

.tenant-access-actions .btn.primary:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.tenant-access-google {
  display: grid;
  gap: .46rem;
}

.tenant-access-google.hidden {
  display: none !important;
}

.tenant-access-google small {
  color: color-mix(in srgb, currentColor 54%, transparent);
  font-size: .66rem;
  line-height: 1.35;
  text-align: center;
}

.tenant-access-google .auth-provider-divider {
  margin: .03rem 0 !important;
}

.tenant-access-google .auth-google-btn {
  border-color: rgba(57, 83, 112, .17) !important;
  color: currentColor !important;
  background: rgba(255, 255, 255, .52) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72) !important;
}

body[data-theme="dark"] .tenant-access-google .auth-google-btn {
  border-color: rgba(157, 205, 246, .18) !important;
  background: rgba(20, 42, 66, .76) !important;
}

.tenant-access-secondary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
}

.tenant-access-system {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .24rem .48rem;
  padding-top: .52rem;
  border-top: 1px solid rgba(64, 92, 124, .13);
}

.tenant-access-system .auth-meta-chip {
  display: inline-flex !important;
  align-items: center;
  gap: .22rem;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  color: color-mix(in srgb, currentColor 55%, transparent) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: .61rem !important;
  font-weight: 590 !important;
}

.tenant-access-system .auth-meta-icon {
  width: .94rem;
  height: .94rem;
  flex: 0 0 .94rem;
  color: color-mix(in srgb, var(--kudzu-cyan) 48%, currentColor);
  opacity: .82;
}

.tenant-access-system .auth-meta-chip-state[data-state="ok"] .auth-meta-icon,
.tenant-access-system .auth-meta-chip-state[data-state="online"] .auth-meta-icon {
  color: var(--status-success-fg);
  opacity: .88;
}

.tenant-access-system .auth-meta-chip + .auth-meta-chip::before {
  content: "·";
  margin-right: .48rem;
}

.tenant-access-panel .status {
  margin: 0 !important;
  border-radius: .68rem !important;
  font-size: .76rem !important;
}

.tenant-access-panel .hidden {
  display: none !important;
}

.sr-only {
  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;
  white-space: nowrap !important;
  border: 0 !important;
}

@container tenant-access (max-width: 20rem) {
  .tenant-access-panel {
    padding-inline: 1rem !important;
  }

  .tenant-access-secondary,
  .tenant-access-system {
    flex-direction: column;
  }

  .tenant-access-system .auth-meta-chip + .auth-meta-chip::before {
    content: none;
  }
}

@keyframes tenant-access-enter {
  from { opacity: 0; transform: translateY(.7rem) scale(.988); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .tenant-access-panel,
  .tenant-access-theme,
  .tenant-access-actions .btn.primary {
    animation: none !important;
    transition: none !important;
  }
}