.ingreso {
  min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 28px 16px;
  background: radial-gradient(80% 60% at 50% 0%, #2a1d18 0%, var(--escenario) 70%);
  overflow-x: hidden;
}
.ingreso .luces { position: fixed; }
.ingreso-caja {
  position: relative; z-index: 1; width: min(100%, 420px); text-align: center;
  background: rgba(25, 23, 21, 0.86); border: 1px solid var(--linea); border-radius: 22px; padding: 30px 24px 26px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  animation: subir 0.8s var(--ease) both;
}
.ingreso-logo { display: inline-block; margin-top: -84px; margin-bottom: 8px; }
.ingreso-logo .logo-vivo { width: 128px; height: 128px; filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.6)); }
.ingreso h1 { font-size: 54px; margin: 6px 0 12px; }
.ingreso h1 em { font-style: normal; color: var(--rojo); }
.ingreso-bajada { color: var(--papel-2); font-size: 15px; margin: 0 auto 22px; max-width: 32ch; }

#ingreso { display: grid; gap: 14px; text-align: left; }
.campo span:first-child { display: block; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gris); margin-bottom: 6px; }
.campo input {
  width: 100%; font: inherit; font-size: 17px; color: var(--papel); background: var(--escenario);
  border: 1.5px solid var(--linea); border-radius: 12px; padding: 13px 14px; min-height: 52px;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.campo input:focus { outline: none; border-color: var(--entrada); box-shadow: 0 0 0 4px rgba(255, 210, 63, 0.15); }
.campo-clave { position: relative; display: block; }
.campo-clave input { padding-right: 52px; }
.ver-clave { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border: 0; border-radius: 10px; background: none; color: var(--gris); cursor: pointer; display: grid; place-items: center; }
.ver-clave svg { width: 22px; height: 22px; }
.ver-clave[aria-pressed="true"] { color: var(--entrada); }

.ingreso-error { margin: 0; padding: 10px 12px; border-radius: 10px; background: rgba(229, 38, 45, 0.14); border: 1px solid rgba(229, 38, 45, 0.5); color: #ffb3b5; font-size: 14px; font-weight: 500; }
.ingreso-boton { width: 100%; margin-top: 4px; min-height: 54px; font-size: 17px; position: relative; }
.ingreso-boton .ruedita { display: none; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; animation: girar 0.8s linear infinite; }
.ingreso-boton.cargando .ruedita { display: inline-block; }
.ingreso-boton.cargando .texto { opacity: 0.7; }
.ingreso-boton.listo { background: var(--verde-wa); }
.sacudir { animation: sacudir 0.45s ease; }
@keyframes sacudir { 20% { transform: translateX(-10px); } 40% { transform: translateX(9px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(3px); } }
.ingreso-volver { display: inline-block; margin-top: 18px; color: var(--gris); font-size: 14px; text-decoration: none; }
.ingreso-volver:hover { color: var(--papel); }
@media (max-height: 640px) { .ingreso-logo { margin-top: -60px; } .ingreso-logo .logo-vivo { width: 96px; height: 96px; } }