/* ============================================================
   CAS · Auth — Pantalla de autenticación
   ============================================================ */

.back-link {
  position: fixed; top: 1.4rem; left: 1.6rem; z-index: 10;
  font-size: .85rem; font-weight: 600; color: var(--ink-400);
  transition: color .25s, transform .25s;
}
.back-link:hover { color: var(--gold-300); transform: translateX(-4px); }

.auth-wrap {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1.6rem;
  padding: 2rem 1.2rem;
}

.auth-card {
  width: min(440px, 100%); padding: 2.8rem 2.4rem 2rem;
  text-align: center; position: relative; overflow: hidden;
}
.auth-card::before {
  content: ''; position: absolute; top: -60px; left: 50%; transform: translateX(-50%);
  width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 175, 55, .13), transparent 70%);
  pointer-events: none;
}

.auth-seal {
  width: 100px; height: 100px; margin: 0 auto 1.3rem; border-radius: 50%;
  display: grid; place-items: center; position: relative;
  background: radial-gradient(circle at 35% 30%, var(--navy-700), var(--navy-900));
  border: 1px solid var(--glass-border-gold);
  box-shadow: 0 0 0 6px rgba(212, 175, 55, .07), 0 0 26px rgba(212, 175, 55, .16),
              0 16px 40px -12px rgba(0,0,0,.6);
}
.auth-seal::after {
  content: ''; position: absolute; inset: -9px; border-radius: 50%;
  border: 1px dashed rgba(212, 175, 55, .35);
  animation: sealSpin 24s linear infinite;
}
.auth-seal:has(.seal-logo)::after { display: none; }
@keyframes sealSpin { to { transform: rotate(360deg); } }
.auth-seal-icon {
  font-size: 2.4rem; display: grid; place-items: center;
  width: 100%; height: 100%;
}
/* Logo dentro del sello: misma proporción del hero (≈80% del medallón) */
.auth-seal .seal-logo { width: 80%; height: 80%; }

.auth-title { font-size: 1.7rem; margin-bottom: .4rem; }
.auth-sub { font-size: .85rem; color: var(--ink-400); margin-bottom: 1.8rem; }

/* ---------------- Modal de solicitud de alta ---------------- */
.alta-modal {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center; padding: 1.2rem;
}
.alta-modal[hidden] { display: none; }
.alta-backdrop {
  position: absolute; inset: 0;
  background: rgba(3, 8, 20, .78); backdrop-filter: blur(10px);
}
.alta-card {
  position: relative; width: min(470px, 100%); max-height: 90vh;
  overflow-y: auto; padding: 2.2rem 2.1rem 1.8rem;
  animation: fadeUp .4s var(--ease-out);
}
.alta-title { font-size: 1.4rem; margin-bottom: .6rem; text-align: center; }
.alta-close {
  position: absolute; top: .85rem; right: .85rem;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--ink-400); border: 1px solid var(--glass-border);
  background: rgba(6, 14, 34, .6); font-size: .85rem;
  transition: color .25s, border-color .25s, transform .35s var(--ease-out);
}
.alta-close:hover { color: var(--gold-300); border-color: rgba(212, 175, 55, .4); transform: rotate(90deg); }
body.modal-open { overflow: hidden; }

/* Indicador de documento adjuntado — tarjeta oscura, nítida */
.file-ok-card {
  display: flex; align-items: center; gap: .85rem;
  margin-top: .6rem; padding: .7rem .9rem;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(9, 20, 45, .95), rgba(6, 14, 34, .9));
  border: 1px solid rgba(52, 211, 153, .45);
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .55), 0 0 0 4px rgba(52, 211, 153, .07);
  animation: fadeUp .3s var(--ease-out);
}
.file-ok-card img {
  width: 70px; height: 48px; object-fit: cover; flex-shrink: 0;
  border-radius: 6px; border: 1px solid rgba(52, 211, 153, .5);
}
.file-ok-txt { flex: 1; min-width: 0; }
.file-ok-txt b { display: block; font-size: .8rem; color: #34d399; }
.file-ok-txt small { font-size: .68rem; color: var(--ink-400); }
.file-ok-check {
  width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px solid #34d399; color: #34d399;
  font-size: .75rem; font-weight: 800;
}

/* ---------------- Form ---------------- */
.auth-form { display: flex; flex-direction: column; gap: 1.2rem; text-align: left; }

.auth-error {
  display: flex; align-items: center; gap: .6rem;
  background: rgba(248, 113, 113, .1); border: 1px solid rgba(248, 113, 113, .35);
  color: var(--danger); font-size: .82rem; font-weight: 600;
  padding: .75rem 1rem; border-radius: var(--radius-sm);
  animation: fadeUp .3s var(--ease-out);
}
.auth-error::before { content: '⚠'; }

.auth-ok {
  display: flex; align-items: flex-start; gap: .6rem;
  background: rgba(52, 211, 153, .1); border: 1px solid rgba(52, 211, 153, .35);
  color: var(--ok); font-size: .82rem; font-weight: 600;
  padding: .75rem 1rem; border-radius: var(--radius-sm);
  animation: fadeUp .3s var(--ease-out); text-align: left; line-height: 1.5;
}

.alta-note {
  font-size: .78rem; color: var(--ink-300); line-height: 1.55;
  padding: .8rem 1rem; border-radius: var(--radius-sm);
  background: rgba(212, 175, 55, .07); border: 1px dashed rgba(212, 175, 55, .3);
}

.dni-preview {
  width: 100%; max-height: 190px; object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1.5px solid rgba(52, 211, 153, .55);
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .55), 0 0 0 4px rgba(52, 211, 153, .08);
}

@media (max-width: 480px) {
  .alta-card { padding: 1.9rem 1.4rem 1.5rem; }
}

.auth-alt { margin-top: 1rem; text-align: center; }
.link-btn {
  font-size: .8rem; font-weight: 700; color: var(--gold-400);
  transition: color .25s;
}
.link-btn:hover { color: var(--gold-300); text-decoration: underline; }

#btnLogin { margin-top: .3rem; padding: .95rem; font-size: .95rem; }
#btnLogin.loading { pointer-events: none; opacity: .75; }

.auth-demo {
  display: flex; align-items: center; gap: .6rem; justify-content: center;
  margin-top: 1.6rem; padding-top: 1.3rem;
  border-top: 1px solid var(--glass-border);
  font-size: .74rem; flex-wrap: wrap;
}
.auth-demo b { color: var(--gold-300); font-weight: 700; }

.auth-foot { font-size: .72rem; letter-spacing: .08em; }

@media (max-width: 480px) {
  .auth-card { padding: 2.2rem 1.5rem 1.6rem; }
}