/* Ajustes finales de composición para la puerta de entrada. */

/* El footer global conserva una presencia institucional sobria. */
.dtx-global-footer::before {
  display: none !important;
}

/*
 * En escritorio el footer queda centrado respecto a TODO el viewport, no al
 * campo institucional. Permanece inmóvil al alternar entre login y registro.
 */
@media (min-width: 861px) {
  .dtx-auth > .dtx-global-footer,
  .dtx-auth.is-register > .dtx-global-footer {
    position: absolute !important;
    z-index: 16;
    left: 50% !important;
    bottom: 34px;
    width: min(900px, calc(100% - 40px)) !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateX(-50%) !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, .76) !important;
    text-align: center !important;
    pointer-events: none;
    transition: none !important;
  }

  .dtx-auth > .dtx-global-footer .dtx-global-footer__inner {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    text-align: center !important;
  }

  .dtx-auth > .dtx-global-footer strong {
    color: rgba(255, 255, 255, .94) !important;
  }
}

/* El logo institucional permanece sobre una superficie blanca en ambos temas. */
.dtx-auth__institutional-brand-frame,
html[data-theme="dark"] .dtx-auth__institutional-brand-frame,
html[data-theme="light"] .dtx-auth__institutional-brand-frame {
  border-color: rgba(17, 56, 84, .12);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 12px 30px rgba(2, 14, 28, .16);
}

.dtx-auth__institutional-brand:hover .dtx-auth__institutional-brand-frame,
html[data-theme="dark"] .dtx-auth__institutional-brand:hover .dtx-auth__institutional-brand-frame,
html[data-theme="light"] .dtx-auth__institutional-brand:hover .dtx-auth__institutional-brand-frame {
  background: #fff;
  box-shadow: 0 16px 36px rgba(2, 14, 28, .2);
}

html[data-theme="dark"] .dtx-auth__institutional-brand-image,
html[data-theme="light"] .dtx-auth__institutional-brand-image {
  filter: none;
}

/* Acceso visible al instructivo, separado del formulario de credenciales. */
.dtx-auth__guide-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: .55rem;
  margin: -4px 0 22px;
  padding: .7rem 1rem;
  border: 1px solid rgba(37, 211, 255, .34);
  border-radius: 999px;
  background: rgba(20, 190, 230, .08);
  color: #5edfff;
  font-size: .82rem;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: .01em;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.dtx-auth__guide-link:hover,
.dtx-auth__guide-link:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(37, 211, 255, .68);
  background: rgba(20, 190, 230, .14);
  box-shadow: 0 10px 26px rgba(4, 170, 214, .12);
}

html[data-theme="light"] .dtx-auth__guide-link {
  border-color: rgba(0, 120, 170, .24);
  background: rgba(0, 145, 195, .07);
  color: #066c91;
}

/* El mensaje histórico ya no se muestra en la puerta de acceso. */
.dtx-auth__visual-foot {
  display: none;
}

/* Recuperación de acceso: visible, pero secundaria respecto al botón Ingresar. */
.dtx-auth__recovery-link,
.dtx-auth__back-link {
  width: fit-content;
  margin-top: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--dtx-cyan);
  font-size: .82rem;
  font-weight: 800;
  text-align: left;
  text-decoration: none;
}

.dtx-auth__recovery-link:hover,
.dtx-auth__back-link:hover,
.dtx-auth__recovery-link:focus-visible,
.dtx-auth__back-link:focus-visible {
  color: var(--dtx-text);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.dtx-auth__recovery-result {
  margin-top: 20px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--dtx-success) 30%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--dtx-success) 8%, transparent);
  color: var(--dtx-text-soft);
  font-size: .82rem;
}

.dtx-auth__recovery-result strong {
  display: block;
  margin-bottom: 4px;
  color: var(--dtx-success);
}

.dtx-auth__recovery-result p {
  margin: 0 0 12px;
  color: var(--dtx-text-muted);
}

.dtx-auth__recovery-result .dtx-btn {
  width: 100%;
  justify-content: center;
}

.dtx-auth__access-inner--reset {
  width: min(520px, 100%);
}

.dtx-auth__reset-expired {
  margin-bottom: 8px;
  align-items: flex-start;
}

/* El registro aprovecha el ancho disponible para no crecer innecesariamente. */
.dtx-auth__register-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
}

.dtx-auth.is-register .dtx-auth__access-inner {
  width: min(650px, 100%);
}

.dtx-auth.is-register .dtx-auth__scene-head {
  margin-bottom: 20px;
}

/* Advertencia operativa: visible sin competir con los errores del formulario. */
.dtx-auth__register-warning {
  margin: 18px 0 0;
  padding: 12px 14px;
  border: 1px solid rgba(255, 194, 71, .28);
  border-left-width: 3px;
  border-radius: 12px;
  background: rgba(255, 194, 71, .075);
  color: #f4ce7a;
  font-size: .76rem;
  line-height: 1.5;
}

.dtx-auth__register-warning strong {
  color: #ffe09d;
  font-weight: 800;
}

html[data-theme="light"] .dtx-auth__register-warning {
  border-color: rgba(166, 108, 0, .24);
  background: rgba(235, 168, 38, .1);
  color: #755311;
}

html[data-theme="light"] .dtx-auth__register-warning strong {
  color: #5f4100;
}

@media (min-width: 861px) {
  /*
   * Login, Registro y Recuperación comparten una única celda de grid. La fila
   * toma la altura del formulario más alto y todos se centran dentro de ese
   * mismo marco para conservar el eje vertical al alternar escenas.
   */
  .dtx-auth__access {
    place-items: center;
    overflow-y: auto;
  }

  .dtx-auth__scenes {
    display: grid;
    height: auto !important;
    transition: none;
  }

  .dtx-auth__scene {
    position: relative;
    inset: auto;
    grid-area: 1 / 1;
    min-width: 0;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /*
   * En Registro, el panel institucional gana 5vw de ancho y se desplaza 5vw
   * hacia la izquierda respecto a la mitad derecha. El borde derecho permanece
   * en el final del viewport y la curva cubre por completo la intersección.
   */
  .dtx-auth.is-register .dtx-auth__visual {
    width: calc(100% + 5vw);
    transform: translateX(calc(100% - 10vw));
    clip-path: ellipse(77% 108% at 77% 50%);
  }

  /* El CTA del panel de registro se apila para no colisionar en zoom 100%. */
  .dtx-auth.is-register .dtx-auth__visual-action {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/*
 * En móvil existe un único scroll natural y la altura depende solo de la escena
 * visible. Dejamos de reservar la altura dinámica del panel oculto, que era la
 * causa del gran espacio vacío al final del formulario.
 */
@media (max-width: 860px) {
  html,
  body {
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .dtx-auth,
  .dtx-auth__stage,
  .dtx-auth__access {
    min-height: 0;
    overflow: visible;
  }

  .dtx-auth__access {
    padding-bottom: 28px;
  }

  .dtx-auth__scenes {
    height: auto !important;
  }

  .dtx-auth__scene {
    position: relative;
    inset: auto;
    display: none;
  }

  .dtx-auth__scene.is-active {
    display: block;
  }

  .dtx-auth__register-grid {
    grid-template-columns: 1fr;
  }

  .dtx-auth__guide-link {
    margin-bottom: 20px;
  }

  .dtx-auth__register-warning {
    margin-bottom: 0;
  }

  .dtx-auth__microcopy {
    margin-bottom: 0;
  }
}

/* En pantallas de poca altura dejamos respirar el formulario sin perder acceso. */
@media (max-height: 760px) and (min-width: 861px) {
  .dtx-auth__access {
    padding-top: 86px;
    padding-bottom: 32px;
  }

  .dtx-auth__register-grid {
    gap: 12px 16px;
  }

  .dtx-auth.is-register .dtx-auth__scene-head {
    margin-bottom: 16px;
  }

  .dtx-auth__guide-link {
    margin-bottom: 16px;
  }

  .dtx-auth__register-warning {
    margin-top: 14px;
  }
}

/*
 * La transición ECG se revela por recorte y no por dashoffset. Esto garantiza
 * visualmente el recorrido izquierda → derecha sin depender del sentido con el
 * que el navegador interpreta el patrón de guiones del SVG.
 */
.dtx-auth-transition__trace,
.dtx-auth-transition__glow {
  stroke-dasharray: none !important;
  stroke-dashoffset: 0 !important;
  clip-path: inset(0 100% 0 0);
  animation: dtx-auth-ecg-reveal-ltr 1.22s cubic-bezier(.42, 0, .24, 1) .08s forwards !important;
}

@keyframes dtx-auth-ecg-reveal-ltr {
  from {
    clip-path: inset(0 100% 0 0);
    opacity: .18;
  }

  10% {
    opacity: 1;
  }

  to {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dtx-auth-transition__trace,
  .dtx-auth-transition__glow {
    animation: none !important;
    clip-path: inset(0 0 0 0);
  }
}