/* RED App · Acceso privado — pantallas y transiciones, octubre 2026 */
:root {
  color-scheme: light;
  --ivory: #F8F5EE;
  --ivory-deep: #F0EBE1;
  --white: #FFFFFF;
  --espresso: #30291F;
  --text: #39332B;
  --muted: #80786D;
  --gold: #A98448;
  --gold-strong: #98733B;
  --gold-light: #E6D7BA;
  --stroke: #E6DFD3;
  --field-stroke: #E2DBCF;
  --danger: #923F39;
  --danger-bg: #F9EFEC;
  --success: #43654D;
  --success-bg: #EDF5EE;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --ease: 200ms cubic-bezier(.2,.8,.2,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; background: var(--ivory); -webkit-text-size-adjust: 100%; }
body.auth-body {
  margin: 0;
  min-height: 100dvh;
  overflow-x: hidden;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  color: var(--text);
  background:
    radial-gradient(ellipse 72% 31% at 91% 0%, rgba(219,190,134,.18), transparent 88%),
    radial-gradient(ellipse 82% 35% at 0% 100%, rgba(224,208,175,.13), transparent 90%),
    var(--ivory);
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
a { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

.auth-page {
  width: 100%;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(34px + var(--safe-top)) 26px calc(27px + var(--safe-bottom));
}
.auth-shell {
  width: min(100%, 390px);
  margin-inline: auto;
  animation: enterAuth 450ms both;
}
.auth-top { display: flex; flex-direction: column; align-items: center; }
.auth-logo {
  width: min(100%, 230px);
  height: 108px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 25px;
}
.auth-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.auth-logo--small { width: min(100%, 192px); height: 89px; margin-bottom: 33px; }
.auth-logo__fallback {
  color: var(--gold-strong);
  text-align: center;
  font-family: 'Cormorant Garamond', Georgia, serif;
  line-height: .93;
}
.auth-logo__fallback span { display: block; font-size: 44px; letter-spacing: .015em; }
.auth-logo__fallback span + span { font-size: 22px; letter-spacing: .18em; margin-top: 5px; }
.auth-logo__fallback small { display: block; font-size: 11px; letter-spacing: .24em; margin-top: 9px; }

.auth-intro { text-align: center; width: 100%; }
.auth-eyebrow {
  display: block;
  margin: 0 0 11px;
  color: var(--gold-strong);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .20em;
  line-height: 1.4;
}
.auth-intro h1 {
  margin: 0;
  color: var(--espresso);
  font-size: clamp(25px, 6.8vw, 29px);
  line-height: 1.18;
  letter-spacing: -.043em;
  font-weight: 650;
  text-wrap: balance;
}
.auth-intro p {
  margin: 11px auto 0;
  max-width: 335px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--muted);
}
.auth-intro--secondary { text-align: left; }
.auth-intro--secondary p { margin: 12px 0 0; max-width: none; }
.auth-intro--secondary h1 { font-size: clamp(29px, 7.6vw, 34px); }

/* Navegación superior, sin barra de sitio web. */
.auth-navigation { margin: 0 0 23px; }
.nav-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  font-size: 12.5px;
}
.nav-back svg {
  width: 38px;
  height: 38px;
  flex: none;
  padding: 9px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.75);
  border-radius: 13px;
  transition: background var(--ease), border-color var(--ease), transform var(--ease);
}
.nav-back:hover svg { background: white; border-color: var(--gold-light); transform: translateX(-2px); }

/* Formularios */
.login-form { display: flex; flex-direction: column; margin-top: 30px; }
.forgot-form { display: flex; flex-direction: column; margin-top: 33px; }
.verify-form { margin-top: 30px; }
.login-account-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  width: 100%;
  padding: 4px;
  margin: 0 0 26px;
  border-radius: 15px;
  background: #ECE6DB;
  border: 1px solid #E8E1D4;
}
.account-type-button {
  min-height: 43px;
  padding: 7px 5px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 11px;
  color: #776D5E;
  cursor: pointer;
  font-weight: 600;
  font-size: 12.5px;
  white-space: nowrap;
  transition: background var(--ease), box-shadow var(--ease), color var(--ease);
}
.account-type-button.is-active {
  color: var(--espresso);
  background: var(--white);
  border-color: rgba(161,135,90,.12);
  box-shadow: 0 2px 7px rgba(62,46,20,.065), 0 1px 3px rgba(62,46,20,.04);
}
.account-type-button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.form-group { display: flex; flex-direction: column; margin: 0 0 19px; }
.form-group label, .form-label {
  display: block;
  margin-bottom: 9px;
  font-size: 12px;
  line-height: 1.35;
  color: #514839;
  font-weight: 600;
  letter-spacing: -.005em;
}
.form-group input {
  display: block;
  width: 100%;
  height: 54px;
  min-width: 0;
  padding: 0 16px;
  color: var(--espresso);
  background: var(--white);
  border: 1px solid var(--field-stroke);
  border-radius: 13px;
  outline: 0;
  font-size: 15px;
  font-weight: 500;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.form-group input::placeholder { color: #AAA298; font-weight: 400; }
.form-group input:focus, .otp-digit:focus {
  border-color: #BDA06B;
  box-shadow: 0 0 0 3px rgba(169,132,72,.12);
}
.input-with-action { position: relative; }
.input-with-action input { padding-right: 54px; }
.password-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  border-radius: 9px;
  width: 42px;
  height: 42px;
  background: transparent;
  color: #847A6A;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.password-toggle:hover { color: var(--gold-strong); }
.password-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 0; }

.login-options { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 25px; }
.remember-me { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: #62594E; font-size: 12px; font-weight: 500; user-select: none; }
.remember-me input {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  flex: 0 0 18px;
  border: 1px solid #D7CCBC;
  border-radius: 5px;
  background: white;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.remember-me input::after {
  content: '';
  width: 8px;
  height: 5px;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  transform: translateY(-1px) rotate(-45deg) scale(0);
  transition: transform var(--ease);
}
.remember-me input:checked { background: var(--gold-strong); border-color: var(--gold-strong); }
.remember-me input:checked::after { transform: translateY(-1px) rotate(-45deg) scale(1); }
.remember-me input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.forgot-link, .auth-help a {
  color: var(--gold-strong);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}
.forgot-link:hover, .auth-help a:hover { text-decoration: underline; text-underline-offset: 3px; }

.auth-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  width: 100%;
  min-height: 55px;
  padding: 13px 22px;
  border: 1px solid rgba(128,98,51,.13);
  border-radius: 13px;
  background: var(--gold-strong);
  color: #FFFFFF;
  box-shadow: 0 7px 16px rgba(115,85,41,.12);
  font-size: 14px;
  font-weight: 650;
  letter-spacing: .015em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--ease), transform var(--ease), box-shadow var(--ease);
}
.auth-button:hover { background: #886633; box-shadow: 0 9px 20px rgba(115,85,41,.16); }
.auth-button:active { transform: scale(.992); }
.auth-button:focus-visible { outline: 3px solid rgba(169,132,72,.3); outline-offset: 3px; }
.auth-button:disabled { opacity: .76; cursor: wait; }
.auth-button.is-loading .button-arrow { display: none; }
.auth-button.is-loading::after {
  content: '';
  display: block;
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255,255,255,.42);
  border-top-color: white;
  border-radius: 50%;
  animation: spin .75s linear infinite;
}
.auth-help { margin: 22px 0 0; text-align: center; color: var(--muted); font-size: 12px; line-height: 1.6; }
.auth-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #978B79;
  margin-top: 36px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
}
.auth-footer__line { display: block; width: 25px; height: 1px; background: #DED4C4; }

/* Recuperación y estados */
.status-box {
  margin: 16px 0 5px;
  padding: 13px 15px;
  border: 1px solid #E9CCC5;
  border-radius: 12px;
  background: var(--danger-bg);
  color: var(--danger);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.55;
}
.status-box--success { background: var(--success-bg); color: var(--success); border-color: #CFDFD2; }
.login-form > .status-box { margin: -8px 0 20px; }
.auth-body--forgot .auth-footer { margin-top: 69px; }
.auth-body--forgot .auth-help { margin-top: 24px; }

/* Verificación OTP */
.auth-body--verify .auth-intro--secondary p { line-height: 1.7; }
.verify-subtitle strong { color: #61523E; font-weight: 650; overflow-wrap: anywhere; }
.identity-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 16px 0;
  margin-top: 23px;
  border-top: 1px solid var(--stroke);
  border-bottom: 1px solid var(--stroke);
}
.identity-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 47px;
  width: 47px;
  height: 47px;
  border-radius: 14px;
  color: #8F6B35;
  background: #EDE2D0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
}
.identity-details { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 5px; }
.identity-caption { color: #99856B; font-size: 9px; font-weight: 700; letter-spacing: .13em; }
.identity-details strong { display: block; color: var(--espresso); font-size: 14px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.identity-check { color: #8A9B79; flex: none; }
.local-test-code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  margin-top: 14px;
  border: 1px dashed #DAC5A2;
  border-radius: 10px;
  color: #736348;
  background: rgba(242,232,211,.5);
}
.local-test-code > span { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; }
.local-test-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #A38A5E; }
.local-test-code strong { color: #70532B; letter-spacing: .16em; font-size: 15px; font-variant-numeric: tabular-nums; }
.verify-form-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.verify-form-meta .form-label { margin: 0; }
.verify-length { color: #968979; font-size: 10px; white-space: nowrap; }
.otp-wrap { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 9px; }
.otp-digit {
  width: 100%;
  min-width: 0;
  height: 54px;
  background: white;
  border: 1px solid var(--field-stroke);
  border-radius: 12px;
  color: var(--espresso);
  outline: none;
  text-align: center;
  font-size: 21px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  caret-color: var(--gold-strong);
  transition: border-color var(--ease), box-shadow var(--ease);
}
.otp-digit[aria-invalid="true"] { border-color: #C88881; }
.otp-error { color: var(--danger); margin: 8px 0 0; font-size: 12px; }
.verify-hint { margin: 12px 0 22px; text-align: center; color: var(--muted); font-size: 11.5px; }
.auth-body--verify .auth-footer { margin-top: 37px; }
.auth-body--verify .status-box { margin-top: 15px; }
.auth-body--verify .status-box + .verify-form { margin-top: 19px; }
.auth-body--verify .status-box + .auth-button { margin-top: 26px; }

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

@media (max-width: 380px) {
  .auth-page { padding-inline: 24px; }
  .account-type-button { font-size: 11.5px; }
  .auth-intro h1 { font-size: 26px; }
  .auth-intro--secondary h1 { font-size: 30px; }
  .login-options { gap: 5px; }
  .forgot-link, .remember-me { font-size: 11px; }
  .otp-wrap { gap: 6px; }
  .otp-digit { height: 49px; border-radius: 10px; font-size: 19px; }
}
@media (max-width: 330px) {
  .auth-page { padding-inline: 17px; }
  .auth-logo { height: 94px; margin-bottom: 20px; }
  .auth-logo--small { height: 78px; }
  .login-options { flex-wrap: wrap; row-gap: 12px; }
}
@media (max-height: 735px) {
  .auth-page { align-items: flex-start; padding-top: calc(22px + var(--safe-top)); padding-bottom: calc(20px + var(--safe-bottom)); }
  .auth-logo { height: 86px; margin-bottom: 17px; }
  .auth-logo--small { height: 73px; margin-bottom: 19px; }
  .auth-navigation { margin-bottom: 14px; }
  .login-form { margin-top: 20px; }
  .login-account-switch { margin-bottom: 19px; }
  .form-group { margin-bottom: 14px; }
  .login-options { margin-bottom: 18px; }
  .auth-footer { margin-top: 23px; }
  .forgot-form { margin-top: 25px; }
  .identity-row { margin-top: 17px; padding: 12px 0; }
  .verify-form { margin-top: 22px; }
  .auth-body--forgot .auth-footer { margin-top: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ===== Navegación entre pantallas sin unificar los PHP ===== */
/* El logotipo permanece exclusivamente en index.html. */
.auth-body--forgot .auth-top,
.auth-body--verify .auth-top {
  align-items: stretch;
}
.auth-body--forgot .auth-intro--secondary,
.auth-body--verify .auth-intro--secondary {
  width: 100%;
}
.auth-body--forgot .forgot-form { margin-top: 35px; }
.auth-body--verify .identity-row { margin-top: 27px; }
.auth-body--verify .verify-form { margin-top: 27px; }
.auth-body--forgot .auth-footer { margin-top: 55px; }
.auth-help--recovery { margin-top: 28px; }

/* Indicador de progreso ligero, visible solo mientras se envía un formulario. */
body.auth-processing::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 38%;
  height: 3px;
  background: var(--gold);
  box-shadow: 0 2px 9px rgba(152,115,59,.22);
  animation: authProgress 1.25s ease-in-out infinite alternate;
  pointer-events: none;
}
.auth-button.is-loading { opacity: 1; cursor: progress; }
.auth-button.is-loading > svg { display: none; }
.auth-button.is-loading::after { flex: none; }

/* Entradas y salidas coordinadas mediante sessionStorage.
   No depende de compatibilidad experimental con View Transitions. */
html.auth-enter-forward .auth-shell {
  animation: authEnterRight 390ms cubic-bezier(.19,.88,.3,1) both;
}
html.auth-enter-back .auth-shell {
  animation: authEnterLeft 360ms cubic-bezier(.19,.88,.3,1) both;
}
html.auth-leave-forward .auth-shell {
  animation: authExitLeft 205ms cubic-bezier(.5,0,.75,.4) both;
  pointer-events: none;
}
html.auth-leave-back .auth-shell {
  animation: authExitRight 205ms cubic-bezier(.5,0,.75,.4) both;
  pointer-events: none;
}
@keyframes authEnterRight {
  from { opacity: 0; transform: translate3d(46px,0,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}
@keyframes authExitLeft {
  from { opacity: 1; transform: translate3d(0,0,0); }
  to { opacity: 0; transform: translate3d(-30px,0,0); }
}
@keyframes authEnterLeft {
  from { opacity: 0; transform: translate3d(-39px,0,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}
@keyframes authExitRight {
  from { opacity: 1; transform: translate3d(0,0,0); }
  to { opacity: 0; transform: translate3d(30px,0,0); }
}
@keyframes authProgress {
  from { transform: translateX(-96%); }
  to { transform: translateX(285%); }
}
@media (prefers-reduced-motion: reduce) {
  body.auth-processing::before { animation: none; width: 100%; opacity: .5; }
  html.auth-enter-forward .auth-shell,
  html.auth-enter-back .auth-shell,
  html.auth-leave-forward .auth-shell,
  html.auth-leave-back .auth-shell {
    animation: none !important;
  }
}