/* ═══════════════════════════════════════════════════════════════════════════
   CRM Hayim — Pantalla de acceso
   ───────────────────────────────────────────────────────────────────────────
   Réplica de la pantalla de acceso del portal HCT: aurora institucional
   (azul + rojo) sobre blanco, 100 % CSS —sin JavaScript—, y una tarjeta
   "glass" centrada.

   La versión anterior era una pantalla oscura con acentos dorados: se veía
   bien, pero no se parecía a nada más del ecosistema Hayim y hacía que el CRM
   pareciera otro producto. Esta entra en el mismo lenguaje que el HCT y que el
   propio panel.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --navy:   #012f65;
  --blue:   #2f6fd1;
  --red:    #c72629;
  --red-lt: #e0555a;
  --ink:    #0d1b2e;
  --muted:  #5b6b82;
  --line:   rgba(1,47,101,.12);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  min-height: 100vh;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: #fff;
  overflow-x: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: 32px 20px;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ─── Aurora (tres "hojas" difuminadas que flotan) ────────────────────────── */
.hy-aurora { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: #fff; }
.hy-blade { position: absolute; border-radius: 50%; filter: blur(72px); mix-blend-mode: multiply; will-change: transform, opacity; }
.hy-blade--1 {
  width: 80vw; height: 32vw; left: -16vw; top: -4vh;
  background: radial-gradient(closest-side, rgba(47,111,209,.5), rgba(1,47,101,.22) 46%, rgba(255,255,255,0) 80%);
  transform: rotate(-20deg); animation: hyBlade1 16s ease-in-out infinite;
}
.hy-blade--2 {
  width: 72vw; height: 28vw; right: -18vw; top: 20vh;
  background: radial-gradient(closest-side, rgba(199,38,41,.44), rgba(224,85,90,.20) 48%, rgba(255,255,255,0) 82%);
  transform: rotate(-14deg); animation: hyBlade2 20s ease-in-out infinite;
}
.hy-blade--3 {
  width: 66vw; height: 26vw; left: 8vw; bottom: -8vh;
  background: radial-gradient(closest-side, rgba(47,111,209,.40), rgba(199,38,41,.18) 52%, rgba(255,255,255,0) 84%);
  transform: rotate(-24deg); animation: hyBlade3 18s ease-in-out infinite;
}
/* El fotograma 0% es el más "florecido" para que, si el navegador no anima,
   lo que se vea de todos modos luzca bien. */
@keyframes hyBlade1 {
  0%,100% { transform: translate3d(0,0,0) rotate(-20deg) scale(1.12); opacity: .9; }
  50%     { transform: translate3d(4%,3%,0) rotate(-12deg) scale(1);  opacity: .6; }
}
@keyframes hyBlade2 {
  0%,100% { transform: translate3d(0,0,0) rotate(-14deg) scale(1.15); opacity: .85; }
  50%     { transform: translate3d(-4%,3%,0) rotate(-22deg) scale(1); opacity: .55; }
}
@keyframes hyBlade3 {
  0%,100% { transform: translate3d(0,0,0) rotate(-24deg) scale(1.1);  opacity: .8; }
  50%     { transform: translate3d(5%,-3%,0) rotate(-16deg) scale(.98); opacity: .5; }
}
.hy-grain {
  position: absolute; inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .035; mix-blend-mode: multiply;
}
.hy-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(120% 92% at 50% 22%, rgba(255,255,255,0) 46%, rgba(255,255,255,.9) 100%);
}

/* ─── Tarjeta de acceso ───────────────────────────────────────────────────── */
.hy-card {
  position: relative; z-index: 2;
  width: min(370px, 100%);
  padding: 30px 28px 24px;
  text-align: center;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 24px 56px rgba(1,47,101,.15), 0 1px 0 rgba(255,255,255,.85) inset;
}
.hy-card__logo {
  display: grid; place-items: center;
  width: 54px; height: 54px; margin: 0 auto 14px; padding: 8px;
  background: #fff; border-radius: 13px;
  box-shadow: 0 6px 16px rgba(47,111,209,.2), 0 0 0 1px var(--line);
}
.hy-card__logo img { width: 100%; height: 100%; object-fit: contain; }
.hy-card__title {
  margin: 0 0 3px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.5rem; font-weight: 800; color: var(--navy); line-height: 1.15;
}
/* El degradado azul↔rojo que fluye: el mismo detalle del HCT. */
.hy-accent {
  background: linear-gradient(100deg, var(--blue), var(--red) 55%, var(--blue));
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: hyFlow 6s ease-in-out infinite;
}
@keyframes hyFlow { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.hy-card__sub { margin-bottom: 22px; font-size: .8rem; color: var(--muted); }

.hy-err {
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 16px; padding: 10px 13px;
  border-radius: 9px; text-align: left;
  font-size: .82rem; color: #fff;
  background: linear-gradient(135deg, var(--red), var(--red-lt));
  box-shadow: 0 6px 16px rgba(199,38,41,.26);
}

.hy-form { display: flex; flex-direction: column; text-align: left; }
.hy-form label { margin: 10px 0 5px; font-size: .76rem; font-weight: 600; color: var(--navy); }
.hy-form input {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 9px;
  background: rgba(255,255,255,.75);
  font-family: inherit; font-size: .9rem; color: var(--ink);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.hy-form input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(47,111,209,.15); }
.hy-form button {
  width: 100%; margin-top: 20px; padding: 11px;
  border: none; border-radius: 10px; cursor: pointer;
  font-family: inherit; font-size: .92rem; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--red), var(--red-lt));
  box-shadow: 0 8px 20px rgba(199,38,41,.32), 0 1px 0 rgba(255,255,255,.35) inset;
  transition: transform .2s, box-shadow .2s, background .2s;
}
.hy-form button:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, #d92c2f, #e86a6e);
  box-shadow: 0 12px 28px rgba(199,38,41,.44), 0 1px 0 rgba(255,255,255,.4) inset;
}

/* Nota de orientación: quien llega aquí por error (un alumno, un padre, un
   profesor) necesita saber que ésta NO es su puerta. Antes solo había un
   "volver al sitio" y la gente se quedaba intentando entrar con sus claves. */
.hy-otros {
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: .76rem; color: var(--muted); line-height: 1.6;
}
.hy-otros strong { color: var(--navy); font-weight: 600; }
.hy-otros a { color: var(--blue); font-weight: 600; text-decoration: underline; }
.hy-otros a:hover { color: var(--red); }
.hy-back { display: inline-block; margin-top: 14px; font-size: .78rem; color: var(--muted); }
.hy-back:hover { color: var(--navy); }

a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--red); outline-offset: 2px; border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .001ms !important; }
}