/* acceso.css — acceso del responsable (Martín la eligió el 11-oct): el acomodo del login de MBVC (video de fondo con velo, marca a la izquierda,
   tarjeta de cristal a la derecha, plecas arriba y abajo) con la paleta y el logo de HAON (haon-app public/css/login.css).
   Prefijo ha- para no chocar con nada. */
:root {
  --ha-hondo: #0f2847; --ha-azul: #1a5bb8; --ha-claro: #5ba3e8; --ha-oro: #ffd700;
  --ha-texto: #fff; --ha-texto-2: rgba(255, 255, 255, .88); --ha-texto-3: rgba(255, 255, 255, .62);
  --ha-vidrio: rgba(15, 40, 71, .42); --ha-borde: rgba(255, 255, 255, .16); --ha-input: rgba(0, 0, 0, .28);
  --ha-error: #ff6b6b;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { min-height: 100%; }
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--ha-texto);
  background: var(--ha-hondo); overflow-x: hidden; -webkit-font-smoothing: antialiased; letter-spacing: -0.01em; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

/* Fondo: video de HAON con velo azul HAON (más oscuro a la izquierda, donde va el texto) */
.ha-video { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.ha-velo { position: fixed; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(15, 40, 71, .85) 0%, rgba(15, 40, 71, .45) 45%, rgba(26, 91, 184, .18) 100%); }

/* Plecas */
.ha-pleca-top { position: fixed; top: 0; left: 0; right: 0; height: 70px; z-index: 50; display: flex; align-items: center; justify-content: space-between;
  padding: 0 max(24px, calc((100% - 1140px) / 2)); background: rgba(15, 40, 71, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ha-borde); }
.ha-marca { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.ha-marca img { height: 40px; width: 40px; border-radius: 50%; display: block; filter: drop-shadow(0 2px 10px rgba(91, 163, 232, .35)); }
.ha-marca b { display: block; font-size: 16px; font-weight: 800; letter-spacing: .04em; line-height: 1.1; }
.ha-marca small { display: block; font-size: 10px; color: var(--ha-oro); letter-spacing: .12em; text-transform: uppercase; }
.ha-rotulo { font-size: .92rem; font-weight: 600; color: var(--ha-texto-2); }
.ha-rotulo b { color: var(--ha-oro); font-weight: 700; }
.ha-pleca-bottom { position: fixed; bottom: 0; left: 0; right: 0; height: 34px; z-index: 50; display: flex; align-items: center; justify-content: space-between;
  padding: 0 max(20px, calc((100% - 1140px) / 2)); background: rgba(15, 40, 71, .92); color: var(--ha-texto-3); font-size: .75rem; }

/* Contenido: marca a la izquierda, tarjeta a la derecha */
.ha-main { position: relative; z-index: 10; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  padding: 110px 16px 70px; }
.ha-login { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 56px; width: 100%; max-width: 1040px; align-items: center; }
.ha-brand { padding: 8px; }
.ha-kicker { margin: 0 0 14px; font-size: .78rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ha-oro); }
.ha-titulo { font-size: 3.1rem; line-height: 1.06; font-weight: 800; letter-spacing: -0.02em; }
.ha-titulo span { color: var(--ha-claro); }
.ha-frase { margin-top: 18px; max-width: 30ch; font-size: 1.08rem; font-style: italic; color: var(--ha-texto-2); line-height: 1.5; }
.ha-puntos { list-style: none; margin-top: 26px; display: grid; gap: 10px; }
.ha-puntos li { position: relative; padding-left: 26px; color: var(--ha-texto-2); font-size: .95rem; }
.ha-puntos li::before { content: "✓"; position: absolute; left: 0; color: var(--ha-oro); font-weight: 700; }

/* Tarjeta de cristal HAON (la del acceso de HAON, con más transparencia para que respire el video) */
.ha-card { background: var(--ha-vidrio); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--ha-borde); border-radius: 16px; padding: 30px 30px 22px; box-shadow: 0 10px 40px rgba(0, 0, 0, .35); }
.ha-card-logo { display: block; width: 46%; max-width: 160px; margin: 0 auto 14px; filter: drop-shadow(0 4px 24px rgba(91, 163, 232, .35)); }
.ha-card-titulo { font-size: 1.35rem; font-weight: 700; text-align: center; }
.ha-card-sub { margin: 4px 0 18px; font-size: .86rem; color: var(--ha-texto-3); text-align: center; }
.ha-campo { display: block; margin-bottom: 14px; }
.ha-label { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 500; color: var(--ha-texto-3); letter-spacing: .3px; text-transform: uppercase; }
.ha-input { width: 100%; padding: 13px 16px; font: inherit; font-size: 16px; color: var(--ha-texto); background: var(--ha-input);
  border: 1px solid var(--ha-borde); border-radius: 8px; outline: none; transition: border-color .15s, box-shadow .15s, background .15s; }
.ha-input:focus { border-color: var(--ha-oro); background: rgba(0, 0, 0, .38); box-shadow: 0 0 0 3px rgba(255, 215, 0, .15); }
.ha-pass { position: relative; }
.ha-pass .ha-input { padding-right: 48px; }
.ha-ojo { position: absolute; top: 0; right: 0; width: 46px; height: 100%; display: grid; place-items: center; color: var(--ha-oro); opacity: .85; }
.ha-ojo:hover { opacity: 1; }
.ha-btn { width: 100%; margin-top: 6px; padding: 15px 24px; border-radius: 50px; background: var(--ha-oro); color: var(--ha-hondo);
  font-size: 14px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; box-shadow: 0 2px 10px rgba(0, 0, 0, .3); transition: all .15s; }
.ha-btn:hover:not(:disabled), .ha-btn:focus-visible { background: #ffe700; box-shadow: 0 0 24px rgba(255, 215, 0, .4); transform: translateY(-1px); }
.ha-btn:disabled { opacity: .55; cursor: wait; }
.ha-error { margin: 0 0 14px; padding: 11px 14px; background: rgba(255, 107, 107, .12); border: 1px solid rgba(255, 107, 107, .35);
  border-radius: 8px; color: var(--ha-error); font-size: 13px; line-height: 1.4; }
.ha-error[hidden], .ha-ok[hidden] { display: none; }
.ha-ok { margin: 0 0 14px; padding: 11px 14px; background: rgba(76, 211, 143, .12); border: 1px solid rgba(76, 211, 143, .4);
  border-radius: 8px; color: #b6f5d3; font-size: 13px; line-height: 1.45; }
.ha-olvide { margin-top: 14px; text-align: center; }
.ha-enlace { color: var(--ha-oro); font-size: 13px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; opacity: .9; }
.ha-enlace:hover { opacity: 1; }
.ha-ayuda { margin: 0 0 16px; font-size: 13px; line-height: 1.5; color: var(--ha-texto-2); }
.ha-reglas { margin: -4px 0 14px; padding-left: 18px; font-size: 12px; line-height: 1.6; color: var(--ha-texto-3); }
.ha-reglas li.cumple { color: #b6f5d3; }
.ha-partners { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--ha-borde); text-align: center; }
.ha-partners p { margin-bottom: 10px; font-size: 11px; font-weight: 500; color: var(--ha-texto-3); letter-spacing: .4px; text-transform: uppercase; }
.ha-partners div { display: flex; justify-content: center; align-items: center; gap: 26px; }
.ha-partners img { height: 34px; width: auto; opacity: .9; }   /* aws-blanco.png es cuadrado con margen: a 34 px se lee como los demás */

/* Celular: una columna, marca arriba y tarjeta abajo */
@media (max-width: 860px) {
  .ha-login { grid-template-columns: 1fr; row-gap: 22px; }
  .ha-brand { text-align: center; padding: 0 4px; }
  .ha-titulo { font-size: 2.1rem; }
  .ha-frase { margin: 10px auto 0; font-size: .95rem; }
  .ha-puntos { display: none; }
  .ha-card { padding: 24px 20px 18px; }
  .ha-main { padding: 88px 14px 56px; }
  .ha-pleca-top { height: 60px; padding: 0 14px; }
  .ha-marca img { height: 34px; width: 34px; }
  .ha-rotulo { font-size: .8rem; }
  .ha-fecha { display: none; }
  .ha-pleca-bottom { justify-content: center; }
}
/* Sin movimiento si la persona lo pidió: se queda la imagen fija */
@media (prefers-reduced-motion: reduce) {
  .ha-video { display: none; }
  body { background: var(--ha-hondo) url('/video/haon-acceso.jpg') center / cover fixed; }
  .ha-btn { transition: none; }
}